Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo
userName
commit
023b37c622
|
|
@ -3,6 +3,7 @@
|
|||
<setting-item-box name="路径" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.dataset" size="small"></n-input>
|
||||
<n-button @click="openModal">修改图片</n-button>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="样式">
|
||||
|
|
@ -22,17 +23,30 @@
|
|||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<a-modal
|
||||
class="photo-control-modal"
|
||||
v-model:open="openChangePhotoModal"
|
||||
width="1340px"
|
||||
style="top: 90px"
|
||||
:footer="null"
|
||||
:closable="false"
|
||||
:zIndex="3000"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<PhotoModal :readonly="true" @closePhotoModal="closePhotoModal" @saveChangePhoto="saveChangePhoto"/>
|
||||
</a-modal>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { PropType, ref } from 'vue'
|
||||
import { option } from './config'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem,
|
||||
} from '@/components/Pages/ChartItemSetting'
|
||||
import PhotoModal from '@/views/chart/ContentCharts/components/PhotoModal/index.vue'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
|
|
@ -40,6 +54,14 @@ const props = defineProps({
|
|||
required: true,
|
||||
},
|
||||
})
|
||||
const openChangePhotoModal = ref(false)
|
||||
const closePhotoModal = () => {
|
||||
openChangePhotoModal.value = false
|
||||
}
|
||||
const saveChangePhoto = (url) => {
|
||||
props.optionData.dataset = url
|
||||
openChangePhotoModal.value = false
|
||||
}
|
||||
|
||||
// 适应类型
|
||||
const fitList = [
|
||||
|
|
@ -64,4 +86,7 @@ const fitList = [
|
|||
label: 'none'
|
||||
},
|
||||
]
|
||||
const openModal = () => {
|
||||
openChangePhotoModal.value = true
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<!-- 筛选项数据显示设置 -->
|
||||
<CollapseItem name="筛选项数据显示设置" :expanded="true">
|
||||
<span style="font-size: 12px; margin-left: 8px"> 筛选项字段与类型 </span>
|
||||
<div style="overflow-x: auto">
|
||||
<span style="font-size: 12px; margin-left: 8px"> 筛选项字段与类型 </span>
|
||||
<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,72 +178,79 @@
|
|||
</SettingItem>
|
||||
|
||||
<!-- 搜索框、时间日期框无选项 -->
|
||||
<n-table
|
||||
v-if="
|
||||
!['inputSearch', 'inputSearchAll', 'timePicker', 'timeRange', 'dateRange'].includes(
|
||||
filtersetItem.showType,
|
||||
)
|
||||
"
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
:single-line="false"
|
||||
size="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>值</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(optionsItem, optionsIndex) in filtersetItem.options" :key="optionsIndex">
|
||||
<td>
|
||||
<n-input
|
||||
v-model:value="optionsItem.label"
|
||||
type="text"
|
||||
size="small"
|
||||
placeholder="名称"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<n-input v-model:value="optionsItem.value" type="text" size="small" placeholder="值" />
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 70px">
|
||||
<n-button
|
||||
class="go-ml-2"
|
||||
type="primary"
|
||||
<div style="overflow-x: auto">
|
||||
<n-table
|
||||
v-if="
|
||||
!['inputSearch', 'inputSearchAll', 'timePicker', 'timeRange', 'dateRange'].includes(
|
||||
filtersetItem.showType,
|
||||
)
|
||||
"
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
:single-line="false"
|
||||
size="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>值</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(optionsItem, optionsIndex) in filtersetItem.options" :key="optionsIndex">
|
||||
<td>
|
||||
<n-input
|
||||
v-model:value="optionsItem.label"
|
||||
type="text"
|
||||
size="small"
|
||||
ghost
|
||||
@click="
|
||||
filtersetItem.options.splice(optionsIndex + 1, 0, {
|
||||
label: null,
|
||||
value: null,
|
||||
})
|
||||
"
|
||||
>
|
||||
+
|
||||
</n-button>
|
||||
<n-button
|
||||
class="go-ml-2"
|
||||
type="warning"
|
||||
placeholder="名称"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<n-input
|
||||
v-model:value="optionsItem.value"
|
||||
type="text"
|
||||
size="small"
|
||||
ghost
|
||||
:disabled="optionsItem.length === 1"
|
||||
@click="
|
||||
if (filtersetItem.options.length !== 1) {
|
||||
filtersetItem.options.splice(optionsIndex, 1);
|
||||
}
|
||||
"
|
||||
>
|
||||
-
|
||||
</n-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
placeholder="值"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div style="width: 70px">
|
||||
<n-button
|
||||
class="go-ml-2"
|
||||
type="primary"
|
||||
size="small"
|
||||
ghost
|
||||
@click="
|
||||
filtersetItem.options.splice(optionsIndex + 1, 0, {
|
||||
label: null,
|
||||
value: null,
|
||||
})
|
||||
"
|
||||
>
|
||||
+
|
||||
</n-button>
|
||||
<n-button
|
||||
class="go-ml-2"
|
||||
type="warning"
|
||||
size="small"
|
||||
ghost
|
||||
:disabled="optionsItem.length === 1"
|
||||
@click="
|
||||
if (filtersetItem.options.length !== 1) {
|
||||
filtersetItem.options.splice(optionsIndex, 1);
|
||||
}
|
||||
"
|
||||
>
|
||||
-
|
||||
</n-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</div>
|
||||
</CollapseItem>
|
||||
|
||||
<br />
|
||||
|
|
@ -343,10 +350,10 @@
|
|||
</CollapseItem>
|
||||
|
||||
<CollapseItem name="表格数据显示设置" :expanded="true">
|
||||
<span style="font-size: 12px; margin-left: 8px">
|
||||
表格数据（请先确定数据部分，再确定表格数据）
|
||||
</span>
|
||||
<div style="overflow-x: auto">
|
||||
<span style="font-size: 12px; margin-left: 8px">
|
||||
表格数据（请先确定数据部分，再确定表格数据）
|
||||
</span>
|
||||
<n-table
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
|
|
@ -417,68 +424,75 @@
|
|||
</SettingItemBox>
|
||||
|
||||
<span style="font-size: 12px; margin-left: 8px"> 表格数据（前缀和后缀） </span>
|
||||
<n-table
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
:single-line="false"
|
||||
size="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>表头名称</th>
|
||||
<th>前缀</th>
|
||||
<th>后缀</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in props.optionData.header" :key="index">
|
||||
<td>
|
||||
{{ item.title }}
|
||||
</td>
|
||||
<td>
|
||||
<n-input v-model:value="item.prefix" size="small" placeholder="前缀" />
|
||||
</td>
|
||||
<td>
|
||||
<n-input v-model:value="item.suffix" size="small" placeholder="后缀" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
<div style="overflow-x: auto">
|
||||
<n-table
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
:single-line="false"
|
||||
size="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>表头名称</th>
|
||||
<th>前缀</th>
|
||||
<th>后缀</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in props.optionData.header" :key="index">
|
||||
<td>
|
||||
{{ item.title }}
|
||||
</td>
|
||||
<td>
|
||||
<n-input v-model:value="item.prefix" size="small" placeholder="前缀" />
|
||||
</td>
|
||||
<td>
|
||||
<n-input v-model:value="item.suffix" size="small" placeholder="后缀" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<span style="font-size: 12px; margin-left: 8px"> 表格数据（数据格式转换） </span>
|
||||
<n-table
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
:single-line="false"
|
||||
size="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>表头名称</th>
|
||||
<th>数据格式转换</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in props.optionData.header" :key="index">
|
||||
<td style="width: 70px">
|
||||
{{ item.title }}
|
||||
</td>
|
||||
<td>
|
||||
<n-select
|
||||
v-model:value="item.convert"
|
||||
:options="[
|
||||
{ label: '小数点保留后两位', value: '0' },
|
||||
{ label: '转换时间格式（例：0小时0分钟0秒）', value: '1' },
|
||||
]"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="数据格式转换"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</n-table>
|
||||
<div style="overflow-x: auto">
|
||||
<n-table
|
||||
class="go-request-header-table-box"
|
||||
style="margin-top: 12px"
|
||||
:single-line="false"
|
||||
size="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>表头名称</th>
|
||||
<th>数据格式转换</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in props.optionData.header" :key="index">
|
||||
<td style="width: 70px">
|
||||
{{ item.title }}
|
||||
</td>
|
||||
<td>
|
||||
<n-select
|
||||
v-model:value="item.convert"
|
||||
: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"
|
||||
placeholder="数据格式转换"
|
||||
/>
|
||||
</td>
|
||||
</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,
|
||||
},
|
||||
);
|
||||
|
||||
// 筛选方式
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
// 转换时间格式（例：0小时0分钟0秒）
|
||||
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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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,9 +65,39 @@
|
|||
|
||||
// 确定类型
|
||||
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[]) => {
|
||||
option.dataset = resData;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="modal-content">
|
||||
<div ref="modalContent" class="modal-content">
|
||||
<div class="modal-title">
|
||||
<div class="title-span">图片管理</div>
|
||||
<div class="close-button-div">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="menu-title">
|
||||
<div class="menu-title-icon"></div>
|
||||
<div class="menu-title-span">图片资源</div>
|
||||
<div style="font-size: 20px;cursor: pointer;" @click="openAddMenu"><PlusSquareOutlined /></div>
|
||||
<div v-if="isChange" style="font-size: 20px;cursor: pointer;" @click="openAddMenu"><PlusSquareOutlined /></div>
|
||||
</div>
|
||||
<div class="menu-list">
|
||||
<div :class="`menu-item ${selectPhotoGroup == item? 'select-menu': ''}`" v-for="(item, index) in photoGroupList" :key="index" @click="changeMenu">
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
<a-image
|
||||
class="item-image"
|
||||
:src="`${apiUrl}/${item.filePath}`"
|
||||
:preview="{ getContainer: () => modalContent }"
|
||||
/>
|
||||
<div class="image-size">{{ `` }}</div>
|
||||
<a-checkbox class="select-image"
|
||||
|
|
@ -114,22 +115,24 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<Button type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
|
||||
<Button v-if="isChange" type="primary" style="margin-right: 10px;background-color: #ed6f6f;" @click="deleteImage">删除图片</Button>
|
||||
<Upload
|
||||
:multiple="true"
|
||||
:accept="'.jpg,.png,.jpeg'"
|
||||
:showUploadList="false"
|
||||
:custom-request="customRequest"
|
||||
v-if="isChange"
|
||||
>
|
||||
<Button type="primary" :icon="h(UploadOutlined)" style="margin-right: 10px;">上传图片</Button>
|
||||
</Upload>
|
||||
<Button type="primary" @click="addPhotoToList">添加到图片列表</Button>
|
||||
<Button v-if="isChange" type="primary" @click="addPhotoToList">添加到图片列表</Button>
|
||||
<Button v-if="!isChange" type="primary" @click="changePhotoPath">修改</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, h, computed } from "vue"
|
||||
import { ref, onMounted, h, computed, defineProps, defineEmits } from "vue"
|
||||
import { imageList, imageUpload, imageDelete, getImageGroupList } from '@/api/demo/photo'
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
import { Image, Button, Upload, Modal } from 'ant-design-vue';
|
||||
|
|
@ -147,6 +150,14 @@ import { selectSortOptions } from './util'
|
|||
const photoModalStateStore = photoModalStore()
|
||||
const packagesStore = usePackagesStore()
|
||||
const { apiUrl } = useGlobSetting();
|
||||
const props = defineProps({
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const emits = defineEmits(['closePhotoModal','saveChangePhoto'])
|
||||
const isChange = computed(() => !props.readonly)
|
||||
|
||||
onMounted(() => {
|
||||
// getList()
|
||||
|
|
@ -166,6 +177,7 @@ const current = ref(1)
|
|||
const pageSize = ref(10)
|
||||
const addMenuName = ref('')
|
||||
const addMenuOpen = ref(false)
|
||||
const modalContent = ref()
|
||||
|
||||
const paginatedData = computed(() => {
|
||||
const start = (current.value - 1) * pageSize.value;
|
||||
|
|
@ -197,7 +209,12 @@ const getPhotoGroup = () => {
|
|||
})
|
||||
}
|
||||
const closeModal = () => {
|
||||
photoModalStateStore.changeOpenState(false)
|
||||
if(isChange.value){
|
||||
photoModalStateStore.changeOpenState(false)
|
||||
}else{
|
||||
emits('closePhotoModal')
|
||||
}
|
||||
|
||||
}
|
||||
const changeSelect = (type,item) => {
|
||||
switch(type){
|
||||
|
|
@ -296,6 +313,17 @@ const changeMenu = (item) => {
|
|||
current.value = 1
|
||||
getList()
|
||||
}
|
||||
const changePhotoPath = () => {
|
||||
if(selectPhotoList.value.length <= 0){
|
||||
window.$message.warning('请选择要修改的图片')
|
||||
return
|
||||
}
|
||||
if(selectPhotoList.value.length > 1){
|
||||
window.$message.warning('请只选择一张需要修改的图片')
|
||||
return
|
||||
}
|
||||
emits('saveChangePhoto',`${apiUrl}/${selectPhotoList.value[0].filePath}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
:footer="null"
|
||||
:closable="false"
|
||||
>
|
||||
<PhotoModal />
|
||||
<PhotoModal :readonly="false"/>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue