智处-弹窗表格筛选功能-增加日期筛选、摄像头类型bug修正

main
滕嵩 2025-03-20 17:02:12 +08:00
parent 9b76cc88af
commit 593ca352b7
16 changed files with 357 additions and 207 deletions

View File

@ -5,7 +5,7 @@ export const ZhiChu_ModalFrameConfig: ConfigType = {
key: 'ZhiChu_ModalFrame',
chartKey: 'VZhiChu_ModalFrame',
conKey: 'VCZhiChu_ModalFrame',
title: '弹窗框架',
title: '在线人员弹窗框架',
category: ChatCategoryEnum.ZHICHU,
categoryName: ChatCategoryEnumName.ZHICHU,
package: PackagesCategoryEnum.ZHICHU,

View File

@ -5,7 +5,7 @@ export const ZhiChu_ModalFrameCloseConfig: ConfigType = {
key: 'ZhiChu_ModalFrameClose',
chartKey: 'VZhiChu_ModalFrameClose',
conKey: 'VCZhiChu_ModalFrameClose',
title: '弹窗关闭按钮',
title: '在线人员弹窗关闭按钮',
category: ChatCategoryEnum.ZHICHU,
categoryName: ChatCategoryEnumName.ZHICHU,
package: PackagesCategoryEnum.ZHICHU,

View File

@ -51,6 +51,9 @@ export const option = {
tableHeaderBackgroud: '#FFFFFF',
tableHeaderFontSize: 20,
tableHeaderFontColor: '#000000',
tableDataBackgroudShow: false,
tableDataBackgroud: '#FFFFFF',
tableDataFontSize: 20,
tableDataFontColor: '#FFFFFF',
},
@ -58,7 +61,7 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ZhiChu_ModalTableConfig.key
public attr = { ...chartInitConfig, w: 1060, h: 485, zIndex: -1 }
public attr = { ...chartInitConfig, w: 1060, h: 570, zIndex: -1 }
public chartConfig = cloneDeep(ZhiChu_ModalTableConfig)
public option = cloneDeep(option)
}

View File

@ -1,8 +1,8 @@
<template>
<!-- 筛选项数据显示设置 -->
<CollapseItem name="筛选项数据显示设置" :expanded="true">
<div style="overflow-x: auto">
<span style="font-size: 12px; margin-left: 8px"> 筛选项字段与类型 </span>
<div style="overflow-x: auto">
<n-table
class="go-request-header-table-box"
style="margin-top: 12px"
@ -82,6 +82,7 @@
{ label: '全数据搜索框', value: 'inputSearchAll' },
{ label: '时间选择器', value: 'timePicker' },
{ label: '时间范围', value: 'timeRange' },
{ label: '日期范围', value: 'dateRange' },
]"
clearable
size="small"
@ -91,7 +92,6 @@
filtersetItem.value = null;
"
/>
<!-- { label: '日期范围', value: 'dateRange' }, -->
</SettingItem>
<SettingItem v-if="!['inputSearchAll'].includes(filtersetItem.showType)" name="对应字段">
<n-select
@ -178,6 +178,7 @@
</SettingItem>
<!-- 搜索框时间日期框无选项 -->
<div style="overflow-x: auto">
<n-table
v-if="
!['inputSearch', 'inputSearchAll', 'timePicker', 'timeRange', 'dateRange'].includes(
@ -207,7 +208,12 @@
/>
</td>
<td>
<n-input v-model:value="optionsItem.value" type="text" size="small" placeholder="值" />
<n-input
v-model:value="optionsItem.value"
type="text"
size="small"
placeholder="值"
/>
</td>
<td>
<div style="width: 70px">
@ -244,6 +250,7 @@
</tr>
</tbody>
</n-table>
</div>
</CollapseItem>
<br />
@ -343,10 +350,10 @@
</CollapseItem>
<CollapseItem name="表格数据显示设置" :expanded="true">
<div style="overflow-x: auto">
<span style="font-size: 12px; margin-left: 8px">
表格数据请先确定数据部分再确定表格数据
</span>
<div style="overflow-x: auto">
<n-table
class="go-request-header-table-box"
style="margin-top: 12px"
@ -417,6 +424,7 @@
</SettingItemBox>
<span style="font-size: 12px; margin-left: 8px"> 表格数据前缀和后缀 </span>
<div style="overflow-x: auto">
<n-table
class="go-request-header-table-box"
style="margin-top: 12px"
@ -444,9 +452,11 @@
</tr>
</tbody>
</n-table>
</div>
<br />
<span style="font-size: 12px; margin-left: 8px"> 表格数据数据格式转换 </span>
<div style="overflow-x: auto">
<n-table
class="go-request-header-table-box"
style="margin-top: 12px"
@ -470,6 +480,9 @@
:options="[
{ label: '小数点保留后两位', value: '0' },
{ label: '转换时间格式0小时0分钟0秒', value: '1' },
{ label: '转换日期格式2025-01-01', value: '2' },
{ label: '转换日期格式2025/01/01', value: '3' },
{ label: '转换日期格式2025-01-01 00:00:00', value: '4' },
]"
clearable
size="small"
@ -479,6 +492,7 @@
</tr>
</tbody>
</n-table>
</div>
<SettingItemBox :alone="false" name="显示设置">
<SettingItem name="是否显示边框">
@ -572,14 +586,14 @@
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="字体设置">
<!-- <SettingItem name="表头背景颜色">
<SettingItemBox :alone="false" name="表头设置">
<SettingItem name="表头背景颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.tableHeaderBackgroud"
></n-color-picker>
</SettingItem> -->
</SettingItem>
<SettingItem name="表头字体颜色">
<n-color-picker
size="small"
@ -595,6 +609,23 @@
placeholder="表头字体大小"
></n-input-number>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="表格设置">
<SettingItem name="表格背景颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.tableDataBackgroud"
></n-color-picker>
</SettingItem>
<SettingItem name="是否使用表格背景颜色">
<n-space>
<n-switch
v-model:value="optionData.dataStyle.tableDataBackgroudShow"
size="small"
></n-switch>
</n-space>
</SettingItem>
<SettingItem name="表格字体颜色">
<n-color-picker
size="small"
@ -685,7 +716,7 @@
columnsWidths.value = props.optionData.header.map((item) => item.width).join(',');
},
{
deep: false,
deep: true,
immediate: true,
},
);
@ -697,6 +728,10 @@
item.width = widths[index];
});
},
{
deep: true,
immediate: true,
},
);
//

View File

@ -66,7 +66,7 @@
"title": "资源列表",
"field": "type",
"compareType": "equal",
"showType": "button",
"showType": "buttonGroup",
"value": null,
"options": [
{ "label": "水源", "value": "水源" },
@ -106,7 +106,8 @@
"area": null,
"time": null,
"distance": "21.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-03-01 00:05:45"
},
{
"name": "东蒙布袋口检查",
@ -114,7 +115,8 @@
"area": "300",
"time": "12.50",
"distance": "14.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-03-11 00:05:45"
},
{
"name": "北刘家庄蓄水池",
@ -122,7 +124,9 @@
"area": "300",
"time": "12.50",
"distance": "0.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025/03/01 00:05:45"
},
{
"name": "防火通道",
@ -130,7 +134,8 @@
"area": null,
"time": null,
"distance": "2.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-12-01 00:05:45"
},
{
"name": "步行道",
@ -138,7 +143,8 @@
"area": "300",
"time": "5.50",
"distance": "1.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-08-01 00:05:45"
},
{
"name": "三轮通道",
@ -146,7 +152,8 @@
"area": "300",
"time": "9.50",
"distance": "5.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-10-21 00:05:45"
},
{
"name": "坑塘",
@ -154,7 +161,8 @@
"area": null,
"time": null,
"distance": "10.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-06-01 00:05:45"
},
{
"name": "东蒙布袋口检查",
@ -162,7 +170,8 @@
"area": "300",
"time": "12.50",
"distance": "10.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-06-12 00:05:45"
},
{
"name": "北刘家庄蓄水池",
@ -170,7 +179,8 @@
"area": "300",
"time": "12.50",
"distance": "19.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-05-01 00:05:45"
}
]
}

View File

@ -5,7 +5,7 @@ export const ZhiChu_ModalTableConfig: ConfigType = {
key: 'ZhiChu_ModalTable',
chartKey: 'VZhiChu_ModalTable',
conKey: 'VCZhiChu_ModalTable',
title: '弹窗表格',
title: '在线人员弹窗筛选表格',
category: ChatCategoryEnum.ZHICHU,
categoryName: ChatCategoryEnumName.ZHICHU,
package: PackagesCategoryEnum.ZHICHU,

View File

@ -181,7 +181,15 @@
<!-- 日期范围 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'dateRange'">
<div class="filterContentDiv">
<n-date-picker />
<n-date-picker
v-model:formatted-value="item.value"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
:style="{ width: '80%' }"
size="small"
clearable
/>
</div>
</a-col>
<!-- 其他 -->
@ -193,6 +201,7 @@
</div>
<!-- 表格部分 -->
<!-- 表头 -->
<div class="theadDiv">
<n-table
:bordered="option.dataStyle.tableBordered"
@ -210,17 +219,16 @@
class="th"
v-if="option.dataStyle.orderBumberShow"
:style="{
width: option.dataStyle.orderDivWidth + 'px',
width: headWidths[0] + 'px',
}"
>
序号
</th>
<th
class="th"
v-for="(item, index) in option.header"
:key="index"
:style="{
width: item.width + 'px',
width: headWidths[option.dataStyle.orderBumberShow ? index + 1 : index] + 'px',
}"
>
{{ item.title }}
@ -229,7 +237,7 @@
class="th"
v-if="option.dataStyle.buttonDivShow"
:style="{
width: option.dataStyle.buttonDivWidth + 'px',
width: headWidths[headWidths.length - 1] + 'px',
}"
>
操作
@ -238,6 +246,7 @@
</thead>
</n-table>
</div>
<!-- 表格数据 -->
<div class="tbodyDiv">
<n-table
:bordered="option.dataStyle.tableBordered"
@ -249,10 +258,17 @@
<tr
v-for="(dataItem, dataIndex) in filterData"
:key="dataIndex"
:class="dataIndex % 2 == 0 ? 'td1' : 'td2'"
:class="
option.dataStyle.tableDataBackgroudShow
? 'td_background'
: dataIndex % 2 == 0
? 'td_image1'
: 'td_image2'
"
>
<!-- 序号 -->
<td
id="dataTd_order"
v-if="option.dataStyle.orderBumberShow"
:style="{
width: option.dataStyle.orderDivWidth + 'px',
@ -262,6 +278,7 @@
</td>
<!-- 数据 -->
<td
:id="'dataTd_' + headerIndex"
v-for="(headerItem, headerIndex) in option.header"
:key="headerIndex"
:style="{
@ -274,6 +291,7 @@
</td>
<!-- 操作 -->
<td
id="dataTd_button"
v-if="option.dataStyle.buttonDivShow"
:style="{
width: option.dataStyle.buttonDivWidth + 'px',
@ -339,7 +357,7 @@
});
//
const headHeight = computed(() => {
const headHeight: any = computed(() => {
if (option.dataStyle.tableHeaderShow) {
return document.querySelector('.theadDiv')?.offsetHeight + 10;
} else {
@ -347,6 +365,27 @@
}
});
//
const headWidths = computed(() => {
let widths: any = [];
if (option.dataStyle.tableHeaderShow) {
setTimeout(() => {
if (option.dataStyle.orderBumberShow) {
widths.push(document.getElementById('dataTd_order')?.offsetWidth);
}
option.header.forEach((item, index) => {
let td = document.getElementById('dataTd_' + index);
widths.push(td?.offsetWidth);
});
if (option.dataStyle.buttonDivShow) {
widths.push(document.getElementById('dataTd_button')?.offsetWidth);
}
console.log(widths);
}, 500);
}
return widths;
});
//
const searchFlag = ref(false);
const searchAllFlag = ref(false);
@ -362,8 +401,12 @@
const filterData = computed(() => {
let data = cloneDeep(option.dataset);
option.filterset.forEach((filtersetItem) => {
if (filtersetItem.value) {
switch (filtersetItem.field && filtersetItem.compareType) {
// console.log(filtersetItem);
if (
(filtersetItem.field && filtersetItem.value) ||
(!filtersetItem.field && filtersetItem.showType == 'inputSearchAll')
) {
switch (filtersetItem.compareType) {
//
case 'greater':
if (['timePicker'].includes(filtersetItem.showType)) {
@ -534,9 +577,9 @@
}
if (['dateRange'].includes(filtersetItem.showType)) {
data = data.filter((d) => {
const time = dayjs(d[filtersetItem.field], 'yyyy-MM-dd HH:mm:ss');
const startTime = dayjs(filtersetItem.value, 'yyyy-MM-dd HH:mm:ss');
const endTime = dayjs(filtersetItem.value, 'yyyy-MM-dd HH:mm:ss');
const time = dayjs(d[filtersetItem.field], 'YYYY-MM-DD HH:mm:ss');
const startTime = dayjs(filtersetItem.value[0], 'YYYY-MM-DD HH:mm:ss');
const endTime = dayjs(filtersetItem.value[1], 'YYYY-MM-DD HH:mm:ss');
return time.diff(startTime) >= 0 && time.diff(endTime) <= 0;
});
}
@ -581,7 +624,7 @@
: String(convertData.toFixed(2));
}
// 000
if (convertData && header.convert == '1' && isValidDate(convertData)) {
if (convertData && header.convert == '1' && isValidTime(convertData)) {
convertData =
dayjs(convertData, 'HH:mm:ss').hour() +
'小时' +
@ -590,6 +633,21 @@
dayjs(convertData, 'HH:mm:ss').second() +
'秒';
}
// YYYY-MM-DD HH:mm:ss
let format = 'YYYY-MM-DD HH:mm:ss';
if (header.convert == '2') {
format = 'YYYY-MM-DD';
}
if (header.convert == '3') {
format = 'YYYY/MM/DD';
}
if (
convertData &&
['2', '3', '4'].includes(header.convert) &&
isValidDate(convertData, format)
) {
convertData = dayjs(convertData).format(format);
}
return prefix + convertData + suffix;
}
@ -598,9 +656,8 @@
const regex = /^-?\d+(\.\d+)?$/;
return regex.test(String(str).trim());
}
//
function isValidDate(str) {
function isValidTime(str) {
const parsedDate = dayjs(str, 'HH:mm:ss');
if (parsedDate.isValid()) {
return true;
@ -608,6 +665,15 @@
return false;
}
}
//
function isValidDate(str, format) {
const parsedDate = dayjs(str, format);
if (parsedDate.isValid()) {
return true;
} else {
return false;
}
}
//
function pitchLocation(dataItem, dataIndex) {}
@ -720,6 +786,7 @@
}
.th {
background: v-bind('`${option.dataStyle.tableHeaderBackgroud}`');
text-align: v-bind('`${option.dataStyle.tableAlign}`');
color: v-bind('`${option.dataStyle.tableHeaderFontColor}`');
font-size: v-bind('`${option.dataStyle.tableHeaderFontSize}px`');
@ -731,11 +798,14 @@
font-size: v-bind('`${option.dataStyle.tableDataFontSize}px`');
border-bottom: 0px;
}
.td1 {
.td_background {
background: v-bind('`${option.dataStyle.tableDataBackgroud}`');
}
.td_image1 {
background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td1.png');
background-size: 100% 100%;
}
.td2 {
.td_image2 {
background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td2.png');
background-size: 100% 100%;
}

View File

@ -4,34 +4,34 @@
"title":"高空瞭望",
"num": "132"
},
{
"title":"生态林视频监控",
"num": "53"
},
{
"title":"市应急热成像",
"num": "13"
},
{
"title":"铁塔监控",
"num": "153"
},
{
"title":"林区摄像头",
"num": "523"
},
{
"title":"智能语音卡口",
"num": "28"
},
{
"title":"视频监控",
"num": "332"
},
{
"title":"生态林视频监控",
"num": "53"
},
{
"title":"林区摄像头",
"num": "523"
},
{
"title":"无人机机场",
"num": "45"
},
{
"title":"市应急热成像",
"num": "13"
},
{
"title":"智能语音卡口",
"num": "28"
},
{
"title":"费县现有基站",
"num": "45"

View File

@ -1,7 +1,7 @@
<template>
<div class="ZhiGan_SheXiangTouLeiXing">
<div class="list">
<div v-for="(item, index) in option.dataset" :key="item.title">
<div v-for="(item, index) in option.dataset" :key="item.title" @click="clickBtn(item)">
<div class="item">
<Tupian1 v-if="checkType(item, index) == 0" :item="item" :dataStyle="option.dataStyle" />
<Tupian2 v-if="checkType(item, index) == 1" :item="item" :dataStyle="option.dataStyle" />
@ -19,11 +19,12 @@
</template>
<script setup lang="ts">
import { PropType, toRefs, watch, reactive, ref, onMounted, onBeforeUnmount } from 'vue';
import { PropType, toRefs, watch, reactive, ref } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { icon } from '@/plugins';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import { eventHandlerHook } from '@/hooks/eventHandler.hook';
import Tupian1 from './svg/tupian1.vue';
import Tupian2 from './svg/tupian2.vue';
import Tupian3 from './svg/tupian3.vue';
@ -35,6 +36,7 @@
import Tupian9 from './svg/tupian9.vue';
import dayjs from 'dayjs';
const chartEditStore = useChartEditStore();
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
@ -63,8 +65,38 @@
//
function checkType(item, index) {
return index;
if (item.title.includes('瞭望')) {
return 0;
} else if (item.title.includes('铁塔')) {
return 1;
} else if (item.title.includes('生态林')) {
return 3;
} else if (item.title.includes('视频监控')) {
return 2;
} else if (item.title.includes('林区')) {
return 4;
} else if (item.title.includes('无人机')) {
return 5;
} else if (item.title.includes('应急')) {
return 6;
} else if (item.title.includes('卡口')) {
return 7;
} else if (item.title.includes('基站')) {
return 8;
} else {
return index % 9;
}
}
//
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
// callback
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {

View File

@ -415,17 +415,17 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-1-28)"
opacity="0.59535072"
x="0"
y="83.0014701"
width="92.8480217"
x="-12"
y="83.6227657"
width="113"
height="28"
></rect>
<rect
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-1-29)"
x="0"
y="109.899697"
width="92.8480217"
x="-12"
y="110.995475"
width="113"
height="1"
></rect>
</g>

View File

@ -369,17 +369,17 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-2-26)"
opacity="0.59535072"
x="0"
y="83"
width="92.8480217"
x="-12"
y="83.6227657"
width="113"
height="28"
></rect>
<rect
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-2-27)"
x="0"
x="-12"
y="110"
width="92.8480217"
width="113"
height="1"
></rect>
</g>

View File

@ -434,17 +434,17 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-3-28)"
opacity="0.59535072"
x="0"
y="83.000794"
width="92.8480217"
x="-12"
y="83.6227657"
width="113"
height="28"
></rect>
<rect
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-3-29)"
x="0"
y="109.339134"
width="92.8480217"
x="-12"
y="110.995475"
width="113"
height="1"
></rect>
</g>

View File

@ -337,7 +337,7 @@
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-6-25)"
opacity="0.59535072"
x="0"
y="80.9716418"
y="83.6227657"
width="113"
height="28"
></rect>
@ -345,7 +345,7 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-6-26)"
x="0"
y="107.971642"
y="110.995475"
width="113"
height="1"
></rect>

View File

@ -324,7 +324,7 @@
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-7-24)"
opacity="0.59535072"
x="0"
y="75.8571429"
y="79.8571429"
width="113"
height="28"
></rect>
@ -332,7 +332,7 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-7-25)"
x="0"
y="103.628571"
y="105.628571"
width="113"
height="1"
></rect>

View File

@ -404,7 +404,7 @@
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-8-27)"
opacity="0.59535072"
x="0"
y="83.3623409"
y="83.6227657"
width="113"
height="28"
></rect>
@ -412,7 +412,7 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-8-28)"
x="0"
y="110.999895"
y="110.995475"
width="113"
height="1"
></rect>

View File

@ -422,7 +422,7 @@
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-9-28)"
opacity="0.59535072"
x="0"
y="83.7533891"
y="83.6227657"
width="113"
height="28"
></rect>
@ -430,7 +430,7 @@
id="矩形"
fill="url(#linearGradient-ZhiGan_SheXiangTouLeiXing-9-29)"
x="0"
y="110.999959"
y="110.995475"
width="113"
height="1"
></rect>