gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

main
刘妍 2025-03-21 16:37:42 +08:00
parent 3592c3c824 c08ef91731
commit b34b8ed616
38 changed files with 2112 additions and 442 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/chart/zhilan/ZhiLan_ZhongZhiShuLiangMianJi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 485 KiB

BIN
src/assets/images/chart/zhilan/weixingyaogan.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 MiB

27
src/packages/components/Informations/Mores/Image/config.vue
View File

@ -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>

64
src/packages/components/Tasks/Tasks/TaskBanner/config.ts
View File

@ -10,37 +10,39 @@ export const option = {
titleSize: 15,
desColor: '#FFFFFF',
desSize: 15,
bannerArr: [
"/src/assets/images/chart/tasks/bannerimg1.png",
"/src/assets/images/chart/tasks/bannerimg1.png",
"/src/assets/images/chart/tasks/bannerimg1.png",
],
dataset:[
{
title: '预警描述',
desc: '费县马庄镇牛田村村委东北方向375.75° 1.197公里处发现火情'
},
{
title: '水平角',
desc: '375.75°'
},
{
title: '俯视角',
desc: '98.5°'
},
{
title: '经纬度',
desc: '117.90911,3012349'
},
{
title: '预警时间',
desc: '2024.12.24 13:08:07'
},
{
title: '线索来源',
desc: '无人机上报'
}
]
dataset:{
data: [
{
title: '预警描述',
desc: '费县马庄镇牛田村村委东北方向375.75° 1.197公里处发现火情'
},
{
title: '水平角',
desc: '375.75°'
},
{
title: '俯视角',
desc: '98.5°'
},
{
title: '经纬度',
desc: '117.90911,3012349'
},
{
title: '预警时间',
desc: '2024.12.24 13:08:07'
},
{
title: '线索来源',
desc: '无人机上报'
}
],
imgArr: [
"/src/assets/images/chart/tasks/bannerimg1.png",
"/src/assets/images/chart/tasks/bannerimg1.png",
"/src/assets/images/chart/tasks/bannerimg1.png",
]
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {

2
src/packages/components/Tasks/Tasks/TaskBanner/index.ts
View File

@ -9,6 +9,6 @@ export const TaskBannerConfig: ConfigType = {
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.TASKS,
chartFrame: ChartFrameEnum.STATIC,
chartFrame: ChartFrameEnum.COMMON,
image: 'banner.png',
};

7
src/packages/components/Tasks/Tasks/TaskBanner/index.vue
View File

@ -2,13 +2,13 @@
<div class="go-title-03">
<div class="bannerbox">
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled>
<div v-for="item in bannerArr">
<div v-for="item in dataset.imgArr">
<a-image :src="item" />
</div>
</a-carousel>
</div>
<div class="flex column sectionsbox">
<div class="flex mt-1" v-for="item in dataset">
<div class="flex mt-1" v-for="item in dataset.data">
<div class="flex ai-c jc-c tasktitlesbox">
<div class="dots"></div>
<div class="titleText">{{ item.title }}</div>
@ -39,12 +39,11 @@ const {
titleColor,
desColor,
desSize,
bannerArr,
dataset
} = toRefs(props.chartConfig.option)
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
props.chartConfig.option.dataset = resData;
});
</script>

4
src/packages/components/Tasks/Tasks/TaskRadio/config.ts
View File

@ -1,5 +1,5 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { TaskRadioConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
@ -23,4 +23,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 484, h: 40, zIndex: 1 }
public chartConfig = cloneDeep(TaskRadioConfig)
public option = cloneDeep(option)
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
public filter = "return res.result;"
}

2
src/packages/components/Tasks/Tasks/TaskRadio/index.ts
View File

@ -9,6 +9,6 @@ export const TaskRadioConfig: ConfigType = {
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.TASKS,
chartFrame: ChartFrameEnum.STATIC,
chartFrame: ChartFrameEnum.COMMON,
image: 'radiobg.png',
};

6
src/packages/components/Tasks/Tasks/TaskRadio/index.vue
View File

@ -9,6 +9,8 @@
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
const props = defineProps({
chartConfig: {
@ -26,6 +28,10 @@ const {
dataValue,
dataset
} = toRefs(props.chartConfig.option)
// 数据callback处理（预览时触发）
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
props.chartConfig.option.dataValue = JSON.stringify(resData);
});
</script>
<style lang="scss" scoped>

2
src/packages/components/Tasks/Tasks/TaskTextArea/index.ts
View File

@ -9,6 +9,6 @@ export const TaskTextAreaConfig: ConfigType = {
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.TASKS,
chartFrame: ChartFrameEnum.STATIC,
chartFrame: ChartFrameEnum.COMMON,
image: 'textareabg.png',
};

29
src/packages/components/Units/Titles/LeftCharts/data.json
View File

@ -1,33 +1,32 @@
{
"dimensions": ["product", "data1"],
"source": [
{
"product": "Mon",
"data1": 120
"label": "Mon",
"value": 120
},
{
"product": "Tue",
"data1": 200
"label": "Tue",
"value": 200
},
{
"product": "Wed",
"data1": 150
"label": "Wed",
"value": 150
},
{
"product": "Thu",
"data1": 80
"label": "Thu",
"value": 80
},
{
"product": "Fri",
"data1": 70
"label": "Fri",
"value": 70
},
{
"product": "Sat",
"data1": 110
"label": "Sat",
"value": 110
},
{
"product": "Sun",
"data1": 130
"label": "Sun",
"value": 130
}
]
}

2
src/packages/components/Units/Titles/LeftCharts/index.ts
View File

@ -9,6 +9,6 @@ export const LeftChartsConfig: ConfigType = {
category: ChatCategoryEnum.TITLE,
categoryName: ChatCategoryEnumName.TITLE,
package: PackagesCategoryEnum.UNITS,
chartFrame: ChartFrameEnum.STATIC,
chartFrame: ChartFrameEnum.COMMON,
image: 'leftchartsbg.png'
}

2
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrame/index.ts
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,

2
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalFrameClose/index.ts
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,

33
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
View File

@ -5,34 +5,28 @@ import { chartInitConfig } from '@/settings/designSetting'
import { ZhiChu_ModalTableConfig } from './index'
import dataJson from './data.json'
const {header, source} = dataJson;
const {header, source, filterset} = dataJson;
export const option = {
header: header,
dataset: source,
filterset: filterset,
dataStyle: {
mapshow: ['水源', '物资', '营房', '防火通道', '', ],
distance: '1',
colLeft: 4,
// filterSet: [
// { label: '地图显示', field:'circle', showType: '', value: ''},
// { label: '资源列表', field:'', showType: '', value: ''},
// { label: '重点资源', field:'', showType: '', value: ''},
// { label: '距离', field:'', showType: '', value: ''},
// ],
filterHeight: 200,
filterMarginTop: 40,
filterMarginTop: 20,
filterMarginLeft: 50,
filterItemHeight: 45,
filterTitleAlign: 'left',
filterTitleFontSize: 24,
filterTitleFontColor: '#ADFFC0',
filterTitleWidth: 100,
filterTitleMarginRight: 20,
filterContentAlign: 'left',
filterChooseFontSize: 18,
filterChooseFontColor: '#FFFFFF',
tableMarginTop: 10,
tableMarginTop: 20,
tableMarginLeft: 20,
tableBordered: false,
tableSigleColumn: true,
@ -41,9 +35,9 @@ export const option = {
tableSize: 'small',
tableAlign: 'center',
// 表头
tableHeaderShow: true,
tableHeaderShow: false,
// 序号
orderBumberShow: true,
orderBumberShow: false,
// 操作
buttonDivShow: true,
buttonDivShow1: true,
@ -57,6 +51,9 @@ export const option = {
tableHeaderBackgroud: '#FFFFFF',
tableHeaderFontSize: 20,
tableHeaderFontColor: '#000000',
tableDataBackgroudShow: false,
tableDataBackgroud: '#FFFFFF',
tableDataFontSize: 20,
tableDataFontColor: '#FFFFFF',
},
@ -64,7 +61,7 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ZhiChu_ModalTableConfig.key
public attr = { ...chartInitConfig, w: 995, h: 544, zIndex: -1 }
public attr = { ...chartInitConfig, w: 1060, h: 570, zIndex: -1 }
public chartConfig = cloneDeep(ZhiChu_ModalTableConfig)
public option = cloneDeep(option)
}

789
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue
View File

@ -1,121 +1,406 @@
<template>
<!-- 筛选项数据显示设置 -->
<CollapseItem name="筛选项数据显示设置" :expanded="true">
<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"
:single-line="false"
size="small"
>
<thead>
<tr>
<th>标题名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in props.optionData.filterset" :key="index">
<td>
<n-input v-model:value="item.title" type="text" size="small" />
</td>
<td>
<div style="width: 70px">
<n-button
class="go-ml-2"
type="primary"
size="small"
ghost
@click="
props.optionData.filterset.splice(index + 1, 0, {
title: null,
field: null,
compareType: null,
showType: null,
value: [],
options: [{ label: null, value: null }],
})
"
>
+
</n-button>
<n-button
class="go-ml-2"
type="warning"
size="small"
ghost
:disabled="props.optionData.filterset.length === 1"
@click="
if (props.optionData.filterset.length !== 1) {
props.optionData.filterset.splice(index, 1);
}
"
>
-
</n-button>
</div>
</td>
</tr>
</tbody>
</n-table>
</div>
</CollapseItem>
<CollapseItem
:expanded="false"
v-for="(filtersetItem, filtersetIndex) in optionData.filterset"
:key="filtersetIndex"
:alone="false"
:name="'筛选项【' + filtersetItem.title + '】设置'"
>
<SettingItem name="筛选类型">
<n-select
v-model:value="filtersetItem.showType"
:options="[
{ label: '多选框', value: 'checkbox' },
{ label: '单选框', value: 'radio' },
{ label: '下拉框', value: 'select' },
{ label: '下拉框（多选）', value: 'selectGroup' },
{ label: '按钮组', value: 'buttonGroup' },
{ label: '按钮组（多选）', value: 'buttonGroupList' },
{ label: '列搜索框', value: 'inputSearch' },
{ label: '全数据搜索框', value: 'inputSearchAll' },
{ label: '时间选择器', value: 'timePicker' },
{ label: '时间范围', value: 'timeRange' },
{ label: '日期范围', value: 'dateRange' },
]"
clearable
size="small"
placeholder="筛选类型"
@change="
filtersetItem.compareType = null;
filtersetItem.value = null;
"
/>
</SettingItem>
<SettingItem v-if="!['inputSearchAll'].includes(filtersetItem.showType)" name="对应字段">
<n-select
v-model:value="filtersetItem.field"
:options="columnsOptions"
size="small"
clearable
placeholder="对应字段"
/>
</SettingItem>
<SettingItem name="筛选方式">
<n-select
v-model:value="filtersetItem.compareType"
:options="getOptionsByShowType(filtersetItem)"
clearable
size="small"
placeholder="筛选方式"
/>
</SettingItem>
<!-- 默认值，搜索框无默认值 -->
<SettingItem
v-if="!['inputSearch', 'inputSearchAll'].includes(filtersetItem.showType)"
name="默认值"
>
<!-- 多选框、下拉框（多选）、按钮组 （多选）-->
<n-select
v-if="['checkbox', 'selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)"
v-model:value="filtersetItem.value"
:options="filtersetItem.options"
multiple
clearable
size="small"
placeholder="默认值"
/>
<!-- 时间选择器 -->
<n-time-picker
v-else-if="['timePicker'].includes(filtersetItem.showType)"
v-model:formatted-value="filtersetItem.value"
value-format="HH:mm:ss"
format="HH:mm:ss"
size="small"
clearable
placeholder="默认时间"
/>
<!-- 时间范围 -->
<div v-else-if="['timeRange'].includes(filtersetItem.showType)">
<n-time-picker
v-model:formatted-value="filtersetItem.value"
value-format="HH:mm:ss"
format="HH:mm:ss"
size="small"
clearable
placeholder="开始时间"
/>
<n-time-picker
v-model:formatted-value="filtersetItem.value2"
value-format="HH:mm:ss"
format="HH:mm:ss"
size="small"
clearable
placeholder="结束时间"
/>
</div>
<!-- 日期范围 -->
<n-date-picker
v-else-if="['dateRange'].includes(filtersetItem.showType)"
v-model:formatted-value="filtersetItem.value"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
size="small"
clearable
/>
<!-- 其他 -->
<n-select
v-else
v-model:value="filtersetItem.value"
:options="filtersetItem.options"
clearable
size="small"
placeholder="默认值"
/>
</SettingItem>
<!-- 搜索框、时间日期框无选项 -->
<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"
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"
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 />
<!-- 筛选项样式设置 -->
<CollapseItem name="筛选项样式设置" :expanded="true">
<SettingItemBox :alone="false" name="整体设置">
<SettingItem :alone="false" name="上方距离">
<n-input-number
v-model:value="optionData.dataStyle.filterMarginTop"
:min="0"
size="small"
placeholder="上方距离"
/>
</SettingItem>
<SettingItem :alone="false" name="左右距离">
<n-input-number
v-model:value="optionData.dataStyle.filterMarginLeft"
:min="0"
size="small"
placeholder="左右距离"
/>
</SettingItem>
<SettingItem :alone="false" name="单个筛选项高度">
<n-input-number
v-model:value="optionData.dataStyle.filterItemHeight"
:min="0"
size="small"
placeholder="单个筛选项高度"
/>
</SettingItem>
<SettingItem name="标题对齐方式">
<n-select
v-model:value="optionData.dataStyle.filterTitleAlign"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' },
]"
size="small"
/>
</SettingItem>
<SettingItem name="内容对齐方式">
<n-select
v-model:value="optionData.dataStyle.filterContentAlign"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' },
]"
size="small"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="标题样式">
<SettingItem :alone="false" name="标题占比">
<n-space vertical>
<n-slider v-model:value="optionData.dataStyle.colLeft" :step="1" :min="0" :max="24" />
<n-input-number v-model:value="optionData.dataStyle.colLeft" size="small">
<template #suffix> / 24 </template>
</n-input-number>
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="字体设置">
<SettingItem name="筛选标题字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.filterTitleFontColor"
></n-color-picker>
</SettingItem>
<SettingItem name="筛选标题字体大小">
<n-input-number
v-model:value="optionData.dataStyle.filterTitleFontSize"
:min="0"
size="small"
placeholder="筛选标题字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="筛选内容字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.filterChooseFontColor"
></n-color-picker>
</SettingItem>
<SettingItem name="筛选内容字体大小">
<n-input-number
v-model:value="optionData.dataStyle.filterChooseFontSize"
:min="0"
size="small"
placeholder="筛选内容字体大小"
></n-input-number>
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="表格数据显示设置" :expanded="true">
<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>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in props.optionData.header" :key="index">
<td>
{{ index + 1 }}
</td>
<td>
<n-input v-model:value="item.title" type="text" size="small" />
</td>
<td>
<n-select v-model:value="item.key" :options="columnsOptions" size="small" />
</td>
<td>
<div style="width: 70px">
<n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)">
+
</n-button>
<n-button
class="go-ml-2"
type="warning"
size="small"
ghost
:disabled="props.optionData.header.length === 1"
@click="remove(index)"
>
-
</n-button>
</div>
</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>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in props.optionData.header" :key="index">
<td>
{{ index + 1 }}
</td>
<td>
<n-input v-model:value="item.title" type="text" size="small" />
</td>
<td>
<n-select v-model:value="item.key" :options="columnsOptions" size="small" />
</td>
<td>
<div style="width: 70px">
<n-button class="go-ml-2" type="primary" size="small" ghost @click="add(index)">
+
</n-button>
<n-button
class="go-ml-2"
type="warning"
size="small"
ghost
:disabled="props.optionData.header.length === 1"
@click="remove(index)"
>
-
</n-button>
</div>
</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>
<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>
<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>
</CollapseItem>
<CollapseItem name="表格样式设置" :expanded="true">
<SettingItemBox :alone="true" name="表格宽度">
<SettingItem :alone="true" name="不包含序列和操作列">
<n-input v-model:value="columnsWidths" type="text" size="small" />
@ -137,47 +422,78 @@
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="整体设置">
<SettingItem name="上方距离">
<n-input-number
v-model:value="optionData.dataStyle.tableMarginTop"
:min="0"
size="small"
placeholder="上方距离"
/>
</SettingItem>
<SettingItem name="左右距离">
<n-input-number
v-model:value="optionData.dataStyle.tableMarginLeft"
:min="0"
size="small"
placeholder="左右距离"
/>
</SettingItem>
<SettingItem name="对齐方式">
<n-select
v-model:value="optionData.dataStyle.tableAlign"
size="small"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' },
]"
/>
</SettingItem>
<SettingItem name="表格尺寸大小">
<n-select
v-model:value="optionData.dataStyle.tableSize"
size="small"
:options="[
{ label: '小', value: 'small' },
{ label: '中', value: 'medium' },
{ label: '大', value: 'large' },
]"
/>
</SettingItem>
</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"
: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>
<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="是否显示边框">
<n-space>
@ -226,14 +542,58 @@
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="字体设置">
<!-- <SettingItem name="表头背景颜色">
</CollapseItem>
<CollapseItem name="表格样式设置" :expanded="true">
<SettingItemBox name="整体设置">
<SettingItem name="上方距离">
<n-input-number
v-model:value="optionData.dataStyle.tableMarginTop"
:min="0"
size="small"
placeholder="上方距离"
/>
</SettingItem>
<SettingItem name="左右距离">
<n-input-number
v-model:value="optionData.dataStyle.tableMarginLeft"
:min="0"
size="small"
placeholder="左右距离"
/>
</SettingItem>
<SettingItem name="对齐方式">
<n-select
v-model:value="optionData.dataStyle.tableAlign"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' },
]"
size="small"
/>
</SettingItem>
<SettingItem name="表格尺寸大小">
<n-select
v-model:value="optionData.dataStyle.tableSize"
:options="[
{ label: '小', value: 'small' },
{ label: '中', value: 'medium' },
{ label: '大', value: 'large' },
]"
size="small"
/>
</SettingItem>
</SettingItemBox>
<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"
@ -249,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"
@ -309,9 +686,9 @@
title: '',
align: props.optionData.dataStyle.tableAlign,
width: '200',
prefix: '',
suffix: '',
convert: '',
prefix: null,
suffix: null,
convert: null,
});
};
@ -339,7 +716,7 @@
columnsWidths.value = props.optionData.header.map((item) => item.width).join(',');
},
{
deep: false,
deep: true,
immediate: true,
},
);
@ -351,5 +728,99 @@
item.width = widths[index];
});
},
{
deep: true,
immediate: true,
},
);
// 筛选方式
function getOptionsByShowType(filtersetItem) {
let result: any = [];
if (filtersetItem.showType) {
switch (filtersetItem.showType) {
case 'checkbox':
// 多选框
result = [
{ label: '等于', value: 'equal' },
{ label: '含有', value: 'contain' },
];
break;
case 'radio':
// 单选框
result = [
{ label: '大于', value: 'greater' },
{ label: '小于', value: 'less' },
{ label: '大于等于', value: 'greaterAndEqual' },
{ label: '小于等于', value: 'lessAndEqual' },
{ label: '等于', value: 'equal' },
{ label: '不等于', value: 'notequal' },
{ label: '含有', value: 'contain' },
{ label: '不含有', value: 'notcontain' },
];
break;
case 'select':
// 下拉框
result = [
{ label: '等于', value: 'equal' },
{ label: '含有', value: 'contain' },
];
break;
case 'selectGroup':
// 下拉框（多选）
result = [
{ label: '等于', value: 'equal' },
{ label: '含有', value: 'contain' },
];
break;
case 'buttonGroup':
// 按钮组
result = [
{ label: '等于', value: 'equal' },
{ label: '不等于', value: 'notequal' },
{ label: '含有', value: 'contain' },
{ label: '不含有', value: 'notcontain' },
];
break;
case 'buttonGroupList':
// 按钮组（多选）
result = [
{ label: '等于', value: 'equal' },
{ label: '不等于', value: 'notequal' },
{ label: '含有', value: 'contain' },
{ label: '不含有', value: 'notcontain' },
];
break;
case 'inputSearch':
// 列搜索框
result = [{ label: '含有', value: 'contain' }];
break;
case 'inputSearchAll':
// 全数据搜索框
result = [{ label: '含有', value: 'contain' }];
break;
case 'timePicker':
// 时间选择器
result = [
{ label: '大于', value: 'greater' },
{ label: '小于', value: 'less' },
{ label: '大于等于', value: 'greaterAndEqual' },
{ label: '小于等于', value: 'lessAndEqual' },
{ label: '等于', value: 'equal' },
{ label: '不等于', value: 'notequal' },
];
break;
case 'timeRange':
// 时间范围
result = [{ label: '在两者之间', value: 'between' }];
break;
case 'dateRange':
// 日期范围
result = [{ label: '在两者之间', value: 'between' }];
break;
}
}
return result;
}
</script>

115
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json
View File

@ -46,48 +46,141 @@
"convert": "1"
}
],
"filterset": [
{
"title": "地图显示",
"field": "type",
"compareType": "contain",
"showType": "checkbox",
"value": [ "水源", "物资", "营房", "防火通道", "三轮通道", "步行道" ],
"options": [
{ "label": "水源", "value": "水源" },
{ "label": "物资", "value": "物资" },
{ "label": "营房", "value": "营房" },
{ "label": "防火通道", "value": "防火通道" },
{ "label": "三轮通道", "value": "三轮通道" },
{ "label": "步行道", "value": "步行道" }
]
},
{
"title": "资源列表",
"field": "type",
"compareType": "equal",
"showType": "buttonGroup",
"value": null,
"options": [
{ "label": "水源", "value": "水源" },
{ "label": "物资", "value": "物资" },
{ "label": "营房", "value": "营房" }
]
},
{
"title": "重点资源",
"field": null,
"compareType": null,
"showType": null,
"value": null,
"options": [
{ "label": null, "value": null }
]
},
{
"title": "距离",
"field": "distance",
"compareType": "lessAndEqual",
"showType": "radio",
"value": null,
"options": [
{ "label": "1km以内", "value": "1" },
{ "label": "5km以内", "value": "5" },
{ "label": "10km以内", "value": "10" },
{ "label": "20km以内", "value": "20" },
{ "label": "全部", "value": null }
]
}
],
"source": [
{
"name": "坑塘",
"type": "水源",
"area": null,
"time": null,
"distance": "1.14",
"estimatedTime": "00:05:45"
"distance": "21.14",
"estimatedTime": "00:05:45",
"date": "2025-03-01 00:05:45"
},
{
"name": "东蒙布袋口检查",
"type": "物资",
"area": "300",
"time": "12.50",
"distance": "1.14",
"estimatedTime": "00:05:45"
"distance": "14.14",
"estimatedTime": "00:05:45",
"date": "2025-03-11 00:05:45"
},
{
"name": "北刘家庄蓄水池",
"type": "营房",
"area": "300",
"time": "12.50",
"distance": "0.14",
"estimatedTime": "00:05:45",
"date": "2025/03/01 00:05:45"
},
{
"name": "防火通道",
"type": "防火通道",
"area": null,
"time": null,
"distance": "2.14",
"estimatedTime": "00:05:45",
"date": "2025-12-01 00:05:45"
},
{
"name": "步行道",
"type": "步行道",
"area": "300",
"time": "5.50",
"distance": "1.14",
"estimatedTime": "00:05:45"
"estimatedTime": "00:05:45",
"date": "2025-08-01 00:05:45"
},
{
"name": "三轮通道",
"type": "三轮通道",
"area": "300",
"time": "9.50",
"distance": "5.14",
"estimatedTime": "00:05:45",
"date": "2025-10-21 00:05:45"
},
{
"name": "坑塘",
"type": "水源",
"area": null,
"time": null,
"distance": "1.14",
"estimatedTime": "00:05:45"
"distance": "10.14",
"estimatedTime": "00:05:45",
"date": "2025-06-01 00:05:45"
},
{
"name": "东蒙布袋口检查",
"type": "物资",
"area": "300",
"time": "12.50",
"distance": "1.14",
"estimatedTime": "00:05:45"
"distance": "10.14",
"estimatedTime": "00:05:45",
"date": "2025-06-12 00:05:45"
},
{
"name": "北刘家庄蓄水池",
"type": "营房",
"area": "300",
"time": "12.50",
"distance": "1.14",
"estimatedTime": "00:05:45"
"distance": "19.14",
"estimatedTime": "00:05:45",
"date": "2025-05-01 00:05:45"
}
]
}

2
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.ts
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,

747
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue
View File

@ -1,95 +1,208 @@
<template>
<div class="ZhiChu_ModalTable">
<div class="filter">
<a-row>
<!-- 地图显示 -->
<a-col :span="6">
<div class="filterTitle">地图显示</div>
</a-col>
<a-col :span="18">
<n-checkbox-group v-model:value="option.dataStyle.mapshow">
<n-space item-style="display: flex;">
<n-checkbox value="水源">
<template #default>
<span class="filterChoose">水源</span>
</template>
</n-checkbox>
<n-checkbox value="物资">
<template #default>
<span class="filterChoose">物资</span>
</template>
</n-checkbox>
<n-checkbox value="营房">
<template #default>
<span class="filterChoose">营房</span>
</template>
</n-checkbox>
<n-checkbox value="防火通道">
<template #default>
<span class="filterChoose">防火通道</span>
</template>
</n-checkbox>
<n-checkbox value="三轮通道">
<template #default>
<span class="filterChoose">三轮通道</span>
</template>
</n-checkbox>
<n-checkbox value="步行道">
<template #default>
<span class="filterChoose">步行道</span>
</template>
</n-checkbox>
</n-space>
</n-checkbox-group>
</a-col>
<!-- 资源列表 -->
<a-col :span="6">
<div class="filterTitle">资源列表</div>
</a-col>
<a-col :span="18">
<div style="display: inline-flex">
<div class="ziyuanlist_choose">水源</div>
<div class="ziyuanlist_nochoose">物资</div>
<div class="ziyuanlist_nochoose">营房</div>
</div>
</a-col>
<!-- 重点资源 -->
<a-col :span="6">
<div class="filterTitle">重点资源</div>
</a-col>
<a-col :span="18">
<div class="filterChoose"></div>
</a-col>
<!-- 距离 -->
<a-col :span="6">
<div class="filterTitle">距离</div>
</a-col>
<a-col :span="18">
<div class="filterChoose">
<n-radio-group v-model:value="option.dataStyle.distance" name="radiogroup">
<n-space>
<n-radio value="1">
<span class="filterChoose">1km以内</span>
</n-radio>
<n-radio value="5">
<span class="filterChoose">5km以内</span>
</n-radio>
<n-radio value="10">
<span class="filterChoose">10km以内</span>
</n-radio>
<n-radio value="20">
<span class="filterChoose">20km以内</span>
</n-radio>
<n-radio value="all">
<span class="filterChoose">全部</span>
</n-radio>
</n-space>
</n-radio-group>
</div>
</a-col>
</a-row>
<div class="filterDiv">
<div class="filterItem" v-for="(item, index) in option.filterset" :key="index">
<a-row>
<!-- 筛选标题 -->
<a-col :span="option.dataStyle.colLeft">
<div class="filterTitle">{{ item.title }}</div>
</a-col>
<!-- 筛选内容 -->
<!-- 多选框 -->
<a-col :span="24 - option.dataStyle.colLeft" v-if="item.showType == 'checkbox'">
<div class="filterContentDiv">
<n-checkbox-group v-model:value="item.value">
<n-checkbox
:style="{
marginRight: option.dataStyle.filterTitleFontSize + 'px',
}"
v-for="(checkboxItem, checkboxIndex) in item.options"
:key="checkboxIndex"
:value="checkboxItem.value"
>
<template #default>
<span class="filterContentFont">{{ checkboxItem.label }}</span>
</template>
</n-checkbox>
</n-checkbox-group>
</div>
</a-col>
<!-- 单选框 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'radio'">
<div class="filterContentDiv">
<n-radio-group v-model:value="item.value" name="radiogroup">
<n-space>
<n-radio
:style="{
marginRight: option.dataStyle.filterTitleFontSize + 'px',
}"
v-for="(radioItem, radioIndex) in item.options"
:key="radioIndex"
:value="radioItem.value"
>
<span class="filterContentFont">{{ radioItem.label }}</span>
</n-radio>
</n-space>
</n-radio-group>
</div>
</a-col>
<!-- 下拉框 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'select'">
<div class="filterContentDiv">
<n-select
v-model:value="item.value"
:options="item.options"
:style="{ width: '50%' }"
placeholder="请选择选项"
clearable
/>
</div>
</a-col>
<!-- 下拉框（多选） -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'selectGroup'">
<div class="filterContentDiv">
<n-select
v-model:value="item.value"
:options="item.options"
placeholder="请选择选项（可多选）"
clearable
multiple
/>
</div>
</a-col>
<!-- 按钮组 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'buttonGroup'">
<div class="filterContentDiv" style="display: inline-flex">
<div
:style="{
marginRight: option.dataStyle.filterTitleFontSize + 'px',
}"
v-for="(buttonItem, buttonIndex) in item.options"
:key="buttonIndex"
:class="
item.value == buttonItem.value
? 'filterContentFont_choose'
: 'filterContentFont_nochoose'
"
@click="clickFilterButton(item, buttonItem)"
>
{{ buttonItem.label }}
</div>
</div>
</a-col>
<!-- 按钮组（多选） -->
<a-col
:span="24 - option.dataStyle.colLeft"
v-else-if="item.showType == 'buttonGroupList'"
>
<div class="filterContentDiv" style="display: inline-flex">
<div
:style="{
marginRight: option.dataStyle.filterTitleFontSize + 'px',
}"
v-for="(buttonItem, buttonIndex) in item.options"
:key="buttonIndex"
:class="
item.value && item.value.includes(buttonItem.value)
? 'filterContentFont_choose'
: 'filterContentFont_nochoose'
"
@click="clickFilterButtonList(item, buttonItem)"
>
{{ buttonItem.label }}
</div>
</div>
</a-col>
<!-- 列搜索框 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'inputSearch'">
<div class="filterContentDiv">
<n-input-group>
<n-input
v-model:value="item.value"
:style="{ width: '50%' }"
:placeholder="'请输入' + item.title"
clearable
/>
<n-button type="primary" ghost @click="search"> 搜索 </n-button>
</n-input-group>
</div>
</a-col>
<!-- 全数据搜索框 -->
<a-col
:span="24 - option.dataStyle.colLeft"
v-else-if="item.showType == 'inputSearchAll'"
>
<div class="filterContentDiv">
<n-input-group>
<n-input
v-model:value="item.value"
:style="{ width: '50%' }"
placeholder="请输入搜索数据"
clearable
/>
<n-button type="primary" ghost @click="searchAll"> 搜索 </n-button>
</n-input-group>
</div>
</a-col>
<!-- 时间选择器 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'timePicker'">
<div class="filterContentDiv">
<n-time-picker
v-model:formatted-value="item.value"
value-format="HH:mm:ss"
format="HH:mm:ss"
:style="{ width: '50%' }"
clearable
placeholder="请选择时间"
/>
</div>
</a-col>
<!-- 时间范围 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'timeRange'">
<div class="filterContentDiv" :style="{ display: 'inline-flex' }">
<n-time-picker
v-model:formatted-value="item.value"
value-format="HH:mm:ss"
format="HH:mm:ss"
:style="{ width: '40%', marginRight: '30px' }"
clearable
placeholder="请选择开始时间"
/>
<n-time-picker
v-model:formatted-value="item.value2"
value-format="HH:mm:ss"
format="HH:mm:ss"
:style="{ width: '40%' }"
clearable
placeholder="请选择结束时间"
/>
</div>
</a-col>
<!-- 日期范围 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'dateRange'">
<div class="filterContentDiv">
<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>
<!-- 其他 -->
<a-col :span="24 - option.dataStyle.colLeft" v-else>
<div class="filterContent"> </div>
</a-col>
</a-row>
</div>
</div>
<div class="table">
<!-- 表格部分 -->
<!-- 表头 -->
<div class="theadDiv">
<n-table
:bordered="option.dataStyle.tableBordered"
:single-column="option.dataStyle.tableSigleColumn"
@ -102,19 +215,60 @@
backgroud: option.dataStyle.tableHeaderBackgroud,
}"
>
<th class="th" v-if="option.dataStyle.orderBumberShow">序号</th>
<th class="th" v-for="(item, index) in option.header" :key="index">{{ item.title }}</th>
<th class="th" v-if="option.dataStyle.buttonDivShow">操作</th>
<th
class="th"
v-if="option.dataStyle.orderBumberShow"
:style="{
width: headWidths[0] + 'px',
}"
>
</th>
<th
class="th"
v-for="(item, index) in option.header"
:key="index"
:style="{
width: headWidths[option.dataStyle.orderBumberShow ? index + 1 : index] + 'px',
}"
>
{{ item.title }}
</th>
<th
class="th"
v-if="option.dataStyle.buttonDivShow"
:style="{
width: headWidths[headWidths.length - 1] + 'px',
}"
>
操作
</th>
</tr>
</thead>
</n-table>
</div>
<!-- 表格数据 -->
<div class="tbodyDiv">
<n-table
:bordered="option.dataStyle.tableBordered"
:single-column="option.dataStyle.tableSigleColumn"
:single-line="option.dataStyle.tableSingleLine"
:size="option.dataStyle.tableSize"
>
<tbody>
<tr
v-for="(dataItem, dataIndex) in option.dataset"
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',
@ -124,6 +278,7 @@
</td>
<!-- 数据 -->
<td
:id="'dataTd_' + headerIndex"
v-for="(headerItem, headerIndex) in option.header"
:key="headerIndex"
:style="{
@ -131,21 +286,23 @@
}"
>
<span>
{{ dataItem[headerItem.key] ? convertData(headerItem, dataItem) : '--' }}</span
>
{{ dataItem[headerItem.key] ? convertData(headerItem, dataItem) : '--' }}
</span>
</td>
<!-- 操作 -->
<td
id="dataTd_button"
v-if="option.dataStyle.buttonDivShow"
:style="{
width: option.dataStyle.buttonDivWidth + 'px',
}"
>
<div v-if="option.dataStyle.buttonDivShow" class="buttonDiv">
<div class="buttonDiv">
<n-button
v-if="option.dataStyle.buttonDivShow1"
size="small"
quaternary
@click="addRight(dataIndex)"
@click="pitchLocation(dataItem, dataIndex)"
>
<Button1 :dataStyle="option.dataStyle" />
</n-button>
@ -159,7 +316,7 @@
v-if="option.dataStyle.buttonDivShow2"
size="small"
quaternary
@click="removeRight(index1)"
@click="moveLocation(dataItem, dataIndex)"
>
<Button2 :dataStyle="option.dataStyle" />
</n-button>
@ -179,6 +336,7 @@
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash-es';
import Button1 from './svg/button1.vue';
import Button2 from './svg/button2.vue';
@ -189,25 +347,269 @@
},
});
//查询字段
const inputData = ref('');
//前台过滤
const filterData = computed(() => {
return option?.dataset?.filter((item: any) => {
return Object.values(item).some((val) => {
return String(val).toLowerCase().includes(inputData.value.toLowerCase());
});
});
});
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
dataset: props.chartConfig.option.dataset,
header: props.chartConfig.option.header,
dataset: props.chartConfig.option.dataset,
filterset: props.chartConfig.option.filterset,
dataStyle: props.chartConfig.option.dataStyle,
});
// 表头高度
const headHeight: any = computed(() => {
if (option.dataStyle.tableHeaderShow) {
return document.querySelector('.theadDiv')?.offsetHeight + 10;
} else {
return 0;
}
});
// 数据表实际宽度
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);
function search() {
searchFlag.value = true;
}
function searchAll() {
searchAllFlag.value = true;
}
// 数据过滤
const filterData = computed(() => {
let data = cloneDeep(option.dataset);
option.filterset.forEach((filtersetItem) => {
// console.log(filtersetItem);
if (
(filtersetItem.field && filtersetItem.value) ||
(!filtersetItem.field && filtersetItem.showType == 'inputSearchAll')
) {
switch (filtersetItem.compareType) {
// 大于
case 'greater':
if (['timePicker'].includes(filtersetItem.showType)) {
data = data.filter(
(d) =>
dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
dayjs(filtersetItem.value, 'HH:mm:ss'),
) > 0,
);
} else {
data = data.filter(
(d) => Number(d[filtersetItem.field]) > Number(filtersetItem.value),
);
}
break;
// 小于
case 'less':
if (['timePicker'].includes(filtersetItem.showType)) {
data = data.filter(
(d) =>
dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
dayjs(filtersetItem.value, 'HH:mm:ss'),
) < 0,
);
} else {
data = data.filter(
(d) => Number(d[filtersetItem.field]) < Number(filtersetItem.value),
);
}
break;
// 大于等于
case 'greaterAndEqual':
if (['timePicker'].includes(filtersetItem.showType)) {
data = data.filter(
(d) =>
dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
dayjs(filtersetItem.value, 'HH:mm:ss'),
) >= 0,
);
} else {
data = data.filter(
(d) => Number(d[filtersetItem.field]) >= Number(filtersetItem.value),
);
}
break;
// 小于等于
case 'lessAndEqual':
if (['timePicker'].includes(filtersetItem.showType)) {
data = data.filter(
(d) =>
dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
dayjs(filtersetItem.value, 'HH:mm:ss'),
) <= 0,
);
} else {
data = data.filter(
(d) => Number(d[filtersetItem.field]) <= Number(filtersetItem.value),
);
}
break;
// 等于
case 'equal':
if (['checkbox'].includes(filtersetItem.showType)) {
// 多选框不选中时，不展示
data = data.filter((d) =>
filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
);
} else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
// 下拉框（多选）、按钮组（多选）不选中时，全展示
if (filtersetItem.value.length > 0) {
data = data.filter((d) =>
filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
);
}
} else {
// 其他统一
data = data.filter((d) => d[filtersetItem.field] == filtersetItem.value);
}
break;
// 不等于
case 'notequal':
if (['checkbox'].includes(filtersetItem.showType)) {
// 多选框不选中时，不展示
data = data.filter((d) =>
filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
);
} else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
// 下拉框（多选）、按钮组（多选）不选中时，全展示
if (filtersetItem.value.length > 0) {
data = data.filter((d) =>
filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
);
}
} else {
// 其他统一
data = data.filter((d) => d[filtersetItem.field] !== filtersetItem.value);
}
break;
// 含有
case 'contain':
if (['checkbox'].includes(filtersetItem.showType)) {
// 多选框不选中时，不展示
data = data.filter((d) =>
filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
);
} else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
// 下拉框（多选）、按钮组（多选）不选中时，全展示
if (filtersetItem.value.length > 0) {
data = data.filter((d) =>
filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
);
}
} else if (['inputSearch'].includes(filtersetItem.showType)) {
// 搜索框单独处理
if (searchFlag.value) {
data = data.filter(
(d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1,
);
searchFlag.value = false;
}
} else if (['inputSearchAll'].includes(filtersetItem.showType)) {
// 全数据搜索框单独处理
if (searchAllFlag.value) {
data = data.filter((d) => {
let flag = false;
option.header.some((headerLi) => {
if (d[headerLi.key]) {
flag = flag ? true : d[headerLi.key].includes(filtersetItem.value);
}
});
return flag;
});
searchAllFlag.value = false;
}
} else {
// 其他统一
data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1);
}
break;
// 不含有
case 'notcontain':
if (['checkbox'].includes(filtersetItem.showType)) {
// 多选框不选中时，不展示
data = data.filter((d) =>
filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
);
} else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
// 下拉框（多选）、按钮组（多选）不选中时，全展示
if (filtersetItem.value.length > 0) {
data = data.filter((d) =>
filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
);
}
} else {
// 其他统一
data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) == -1);
}
break;
// 两者之间
case 'between':
if (['timeRange'].includes(filtersetItem.showType)) {
data = data.filter((d) => {
const time = dayjs(d[filtersetItem.field], 'HH:mm:ss');
const startTime = dayjs(filtersetItem.value, 'HH:mm:ss');
const endTime = dayjs(filtersetItem.value2, 'HH:mm:ss');
return time.diff(startTime) >= 0 && time.diff(endTime) <= 0;
});
}
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[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;
});
}
break;
}
}
});
return data;
});
// 筛选-按钮点击事件
function clickFilterButton(item, buttonItem) {
if (item.value == buttonItem.value) {
item.value = '';
} else {
item.value = buttonItem.value;
}
}
// 筛选-按钮点击事件（多选）
function clickFilterButtonList(item, buttonItem) {
if (!item.value) {
item.value = [];
}
if (item.value.includes(buttonItem.value)) {
item.value.splice(item.value.indexOf(buttonItem.value), 1);
} else {
item.value.push(buttonItem.value);
}
}
// 数据转换
function convertData(header, data) {
let prefix = header.prefix ? header.prefix : '';
@ -222,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() +
'小时' +
@ -231,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;
}
@ -239,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;
@ -249,6 +665,20 @@
return false;
}
}
// 检查字符串可否转成日期
function isValidDate(str, format) {
const parsedDate = dayjs(str, format);
if (parsedDate.isValid()) {
return true;
} else {
return false;
}
}
// 表格按钮方法
function pitchLocation(dataItem, dataIndex) {}
function moveLocation(dataItem, dataIndex) {}
// setdata 数据监听与更改
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
@ -268,63 +698,95 @@
user-select: none;
}
.filter {
.filterDiv {
width: 100%;
height: v-bind('`${option.dataStyle.filterHeight}px`');
margin-top: v-bind('`${option.dataStyle.filterMarginTop}px`');
margin-left: v-bind('`${option.dataStyle.filterMarginLeft}px`');
margin-right: v-bind('`${option.dataStyle.filterMarginLeft}px`');
padding-top: v-bind('`${option.dataStyle.filterMarginTop}px`');
padding-left: v-bind('`${option.dataStyle.filterMarginLeft}px`');
padding-right: v-bind('`${option.dataStyle.filterMarginLeft}px`');
}
// 筛选标题
.filterTitle {
align-items: center;
width: v-bind('`${option.dataStyle.filterTitleWidth}px`');
text-align: v-bind('`${option.dataStyle.filterTitleAlign}`');
font-size: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
color: v-bind('`${option.dataStyle.filterTitleFontColor}`');
margin-right: v-bind('`${option.dataStyle.filterTitleMarginRight}px`');
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
line-height: 33px;
text-align: left;
line-height: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
height: v-bind('`${option.dataStyle.filterItemHeight}px`');
font-style: normal;
}
.filterChoose {
.filterContentDiv {
width: 100%;
height: v-bind('`${option.dataStyle.filterItemHeight}px`');
justify-content: v-bind('`${option.dataStyle.filterContentAlign}`');
text-align: v-bind('`${option.dataStyle.filterContentAlign}`');
align-items: v-bind('`${option.dataStyle.filterContentAlign}`');
}
// 内容通用字体
.filterContentFont {
font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
color: v-bind('`${option.dataStyle.filterChooseFontColor}`');
}
::v-deep .n-checkbox-box {
width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
}
::v-deep .n-radio__dot {
width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
}
.ziyuanlist_nochoose {
margin-right: 30px;
.filterContentFont_nochoose {
background: #1c211f;
color: #18d09d;
border: 1px solid #18d09d;
font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
width: 80px;
height: 30px;
border-radius: 30px;
width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
text-align: center;
line-height: 30px;
line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
}
.ziyuanlist_choose {
margin-right: 30px;
.filterContentFont_choose {
background: #26d1ad;
color: #0d2822;
font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
width: 80px;
height: 30px;
border-radius: 30px;
width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
text-align: center;
line-height: 30px;
line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
}
.table {
padding-top: v-bind('`${option.dataStyle.tableMarginTop}px`');
// 表头
.theadDiv {
margin-top: v-bind('`${option.dataStyle.tableMarginTop}px`');
padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`');
padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`');
}
// 表格部分
.tbodyDiv {
overflow-y: auto;
height: v-bind(
'`${h - headHeight - option.dataStyle.filterMarginTop - option.dataStyle.filterItemHeight * option.filterset.length - option.dataStyle.tableMarginTop}px`'
);
padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`');
padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`');
}
.tbodyDiv::-webkit-scrollbar {
display: none;
}
.tbodyDiv {
scrollbar-width: none;
-ms-overflow-style: none;
}
.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`');
@ -336,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%;
}

32
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/data.json
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"

38
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/index.vue
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,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;

12
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian1.vue
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>

10
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian2.vue
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>

12
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian3.vue
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>

4
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian6.vue
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>

4
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian7.vue
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>

4
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian8.vue
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>

4
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/svg/tupian9.vue
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>

2
src/packages/components/Zhilan/Zhilan/WeiXingGuoLv/config.ts
View File

@ -7,7 +7,7 @@ import cloneDeep from 'lodash/cloneDeep'
export const option = {
textColors: ['#FFFFFF','#FFFFFF'],
textSize: [14,10],
backgroundColors: ["#05231A","#0A392A","#0A392A"],
backgroundColors: ["#05231A","#0A392A","#06281D"],
headerData:["卫星","观测目标","开始时间","结束时间"],
dataset: [
{ title: '山东卫星一号' , target: '山东临沂市费县费城街道', startTime: '2025-3-17 16:12:57', endTime: '2025-3-17 16:12:57' },

2
src/packages/components/Zhilan/Zhilan/WeiXingImg/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="go-title-03">
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/weixingimg.png" />
<img :width="w" :height="h" src="/src/assets/images/chart/zhilan/weixingyaogan.gif" />
</div>
</template>

48
src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts Normal file
View File

@ -0,0 +1,48 @@
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { ZhiLan_ZhongZhiShuLiangMianJiConfig } from './index'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
const { source } = dataJson;
export const option = {
dataset: source,
dataStyle: {
backgroud: '#FFFFFF00',
marginTop: 100,
marginLeft: 25,
sortOrder: '0',
unitTitle: '单位 / 平方米',
unitName: 'm²',
unitFontSize: 14,
unitFontColor: '#738073',
itemMarginTop: 15,
itemHeight: 40,
labelFontSize: 13,
labelFontColor: '#9ab398',
labelWidth: 100,
labelAlign: 'center',
valueFontSize: 16,
valueFontColor: '#FFFFFF',
lineBackgroud: '#000000',
lineBorderWidth: 1,
lineBorderColor: '#ffffff',
lineHeight: 15,
lineStartColor: '#0B4D2C',
lineEndColor: '#4DFFB5',
}
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = ZhiLan_ZhongZhiShuLiangMianJiConfig.key
public attr = { ...chartInitConfig, w: 400, h: 900, zIndex: 1 }
public chartConfig = cloneDeep(ZhiLan_ZhongZhiShuLiangMianJiConfig)
public option = cloneDeep(option)
}

237
src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.vue Normal file
View File

@ -0,0 +1,237 @@
<template>
<CollapseItem name="样式设置" :expanded="true">
<SettingItemBox :alone="false" name="整体设置">
<SettingItem :alone="false" name="上方距离">
<n-input-number
v-model:value="optionData.dataStyle.marginTop"
:min="0"
size="small"
placeholder="上方距离"
/>
</SettingItem>
<SettingItem :alone="false" name="左右距离">
<n-input-number
v-model:value="optionData.dataStyle.marginLeft"
:min="0"
size="small"
placeholder="左右距离"
/>
</SettingItem>
<SettingItem name="背景颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.backgroud"
></n-color-picker>
</SettingItem>
<SettingItem name="单个高度">
<n-input-number
v-model:value="optionData.dataStyle.itemHeight"
:min="0"
size="small"
placeholder="单个高度"
></n-input-number>
</SettingItem>
<SettingItem name="单位与内容之间的距离">
<n-input-number
v-model:value="optionData.dataStyle.itemMarginTop"
:min="0"
size="small"
placeholder="单位与内容之间的距离"
></n-input-number>
</SettingItem>
<SettingItem name="排序方式">
<n-radio-group
v-model:value="optionData.dataStyle.sortOrder"
size="small"
name="radiogroup"
>
<n-space>
<n-radio value="0"> 不排序 </n-radio>
<n-radio value="1"> 升序 </n-radio>
<n-radio value="2"> 降序 </n-radio>
</n-space>
</n-radio-group>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="单位设置">
<SettingItem :alone="false" name="单位名称">
<n-input
v-model:value="optionData.dataStyle.unitTitle"
size="small"
placeholder="单位名称"
/>
</SettingItem>
<SettingItem :alone="false" name="单位符号">
<n-input
v-model:value="optionData.dataStyle.unitName"
size="small"
placeholder="单位符号"
/>
</SettingItem>
<SettingItem name="单位字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.unitFontColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.unitFontColor = dataStyleClone.unitFontColor"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem :alone="false" name="单位字体大小">
<n-input-number
v-model:value="optionData.dataStyle.unitFontSize"
:min="0"
size="small"
placeholder="单位字体大小"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="标题设置">
<SettingItem name="标题宽度">
<n-input-number
v-model:value="optionData.dataStyle.labelWidth"
:min="0"
size="small"
placeholder="标题宽度"
></n-input-number>
</SettingItem>
<SettingItem name="标题字体大小">
<n-input-number
v-model:value="optionData.dataStyle.labelFontSize"
:min="0"
size="small"
placeholder="标题字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.labelFontColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button
size="small"
@click="optionData.dataStyle.labelFontColor = dataStyleClone.labelFontColor"
>
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题对齐方式">
<n-select
v-model:value="optionData.dataStyle.labelAlign"
:options="[
{ label: '靠左', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '靠右', value: 'right' },
]"
size="small"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="进度条设置">
<SettingItem name="进度条背景颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.lineBackgroud"
></n-color-picker>
</SettingItem>
<SettingItem name="进度条高度">
<n-input-number
v-model:value="optionData.dataStyle.lineHeight"
:min="0"
size="small"
placeholder="进度条高度"
></n-input-number>
</SettingItem>
<SettingItem name="进度条边框颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.lineBorderColor"
></n-color-picker>
</SettingItem>
<SettingItem name="进度条边框宽度">
<n-input-number
v-model:value="optionData.dataStyle.lineBorderWidth"
:min="0"
size="small"
placeholder="进度条边框宽度"
></n-input-number>
</SettingItem>
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.lineStartColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button size="small" @click="optionData.dataStyle.lineStartColor = '#0B4D2C'">
恢复默认
</n-button>
</SettingItem>
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.lineEndColor"
></n-color-picker>
</SettingItem>
<SettingItem>
<n-button size="small" @click="optionData.dataStyle.lineEndColor = '#4DFFB5'">
恢复默认
</n-button>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="false" name="值设置">
<SettingItem name="值的字体大小">
<n-input-number
v-model:value="optionData.dataStyle.valueFontSize"
:min="0"
size="small"
placeholder="值的字体大小"
></n-input-number>
</SettingItem>
<SettingItem name="值的字体颜色">
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.dataStyle.valueFontColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting';
import { option } from './config';
const props = defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true,
},
});
const dataStyleClone = {
unitFontColor: '#738073',
labelFontColor: '#9ab398',
lineStartColor: '#0B4D2C',
lineEndColor: '#4DFFB5',
};
</script>

64
src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/data.json Normal file
View File

@ -0,0 +1,64 @@
{
"source": [
{
"label": "林种类型",
"value": "4820"
},
{
"label": "林种类型",
"value": "14820"
},
{
"label": "林种类型",
"value": "8820"
},
{
"label": "林种类型",
"value": "1220"
},
{
"label": "林种类型",
"value": "7421"
},
{
"label": "林种类型",
"value": "4820"
},
{
"label": "林种类型",
"value": "14820"
},
{
"label": "林种类型",
"value": "8820"
},
{
"label": "林种类型",
"value": "1220"
},
{
"label": "林种类型",
"value": "7421"
},
{
"label": "林种类型",
"value": "4820"
},
{
"label": "林种类型",
"value": "14820"
},
{
"label": "林种类型",
"value": "8820"
},
{
"label": "林种类型",
"value": "1220"
},
{
"label": "林种类型",
"value": "7421"
}
]
}

14
src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.ts Normal file
View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d';
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d';
export const ZhiLan_ZhongZhiShuLiangMianJiConfig: ConfigType = {
key: 'ZhiLan_ZhongZhiShuLiangMianJi',
chartKey: 'VZhiLan_ZhongZhiShuLiangMianJi',
conKey: 'VCZhiLan_ZhongZhiShuLiangMianJi',
title: '种植数量面积',
category: ChatCategoryEnum.ZHILAN,
categoryName: ChatCategoryEnumName.ZHILAN,
package: PackagesCategoryEnum.ZHILAN,
chartFrame: ChartFrameEnum.COMMON,
image: 'ZhiLan_ZhongZhiShuLiangMianJi.png',
};

187
src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue Normal file
View File

@ -0,0 +1,187 @@
<template>
<div class="ZhiLan_ZhongZhiShuLiangMianJi">
<div class="box">
<div class="unit">{{ option.dataStyle.unitTitle }} （{{ option.dataStyle.unitName }}）</div>
<div class="itemList">
<div class="item" v-for="(item, index) in sortData" :key="index">
<div class="label">{{ item.label }}</div>
<div class="backbox">
<div class="num">
<div
class="rate"
:style="{
width: `${(item.value / maxValue) * valueWidth * 0.7}px`,
background: `linear-gradient(90deg,
${option.dataStyle.lineStartColor} 0%,
${option.dataStyle.lineEndColor} 100%)`,
}"
>
</div>
<span class="value">{{ item.value }}</span>
<span class="value_unit">{{ option.dataStyle.unitName }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, reactive, computed } from 'vue';
import { CreateComponentType } from '@/packages/index.d';
import { useChartDataFetch } from '@/hooks';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { cloneDeep } from 'lodash-es';
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true,
},
});
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
dataset: props.chartConfig.option.dataset,
dataStyle: props.chartConfig.option.dataStyle,
});
// 排序
const sortData = computed(() => {
let cloneData = cloneDeep(option.dataset);
if (option.dataStyle.sortOrder == '0') {
// 不排序
return cloneData;
} else if (option.dataStyle.sortOrder == '1') {
// 升序
return cloneData.sort((a, b) => parseInt(a.value) - parseInt(b.value));
} else if (option.dataStyle.sortOrder == '2') {
// 降序
return cloneData.sort((a, b) => parseInt(b.value) - parseInt(a.value));
}
});
// 最大值
const maxValue = Math.max(...option.dataset.map((item) => parseInt(item.value, 10)));
// 进度条宽度
const valueWidth = computed(() => {
return w.value - option.dataStyle.marginLeft * 2 - option.dataStyle.labelWidth;
});
// 单位DIV高度
const unitHeight = computed(() => {
return document.querySelector('.unit')?.offsetHeight;
});
// setdata 数据监听与更改
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData;
});
</script>
<style lang="scss" scoped>
.ZhiLan_ZhongZhiShuLiangMianJi {
background: v-bind('`${option.dataStyle.backgroud}`');
width: v-bind('`${w}px`');
height: v-bind('`${h}px`');
// 页面不能被选中
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.box {
margin-top: v-bind('`${option.dataStyle.marginTop}px`');
padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
padding-right: v-bind('`${option.dataStyle.marginLeft}px`');
}
.unit {
text-align: right;
color: v-bind('`${option.dataStyle.unitFontColor}`');
font-size: v-bind('`${option.dataStyle.unitFontSize}px`');
margin-bottom: v-bind('`${option.dataStyle.itemMarginTop}px`');
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
font-style: normal;
}
.itemList {
overflow-y: auto;
height: v-bind(
'`${h - option.dataStyle.marginTop - option.dataStyle.itemMarginTop - unitHeight}px`'
);
}
.itemList::-webkit-scrollbar {
display: none;
}
.itemList {
scrollbar-width: none;
-ms-overflow-style: none;
}
.item {
display: inline-flex;
width: 100%;
height: v-bind('`${option.dataStyle.itemHeight}px`');
}
.label {
display: flex;
align-items: center;
justify-content: v-bind('`${option.dataStyle.labelAlign}`');
width: v-bind('`${option.dataStyle.labelWidth}px`');
border-right: 1px solid #ffffff;
color: v-bind('`${option.dataStyle.labelFontColor}`');
font-size: v-bind('`${option.dataStyle.labelFontSize}px`');
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
text-align: right;
font-style: normal;
}
.backbox {
display: flex;
align-items: center;
justify-content: center;
width: v-bind('`${valueWidth}px`');
height: 100%;
.num {
background: v-bind('`${option.dataStyle.lineBackgroud}`');
border: v-bind('`${option.dataStyle.lineBorderWidth}px`') solid
v-bind('`${option.dataStyle.lineBorderColor}`');
display: inline-flex;
align-items: center;
width: 100%;
height: v-bind('`${option.dataStyle.lineHeight}px`');
.rate {
height: v-bind('`${option.dataStyle.lineHeight * 0.5}px`');
margin-right: 10px;
}
.value {
color: v-bind('`${option.dataStyle.valueFontColor}`');
font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
font-family: D-DIN, D-DIN;
font-weight: bold;
font-style: normal;
}
.value_unit {
color: v-bind('`${option.dataStyle.valueFontColor}`');
font-size: v-bind('`${option.dataStyle.valueFontSize}px`');
font-family: D, D;
font-weight: normal;
font-style: normal;
}
}
}
</style>

3
src/packages/components/Zhilan/Zhilan/index.ts
View File

@ -18,7 +18,7 @@ import { ZhiLanRenYuanLeiXingConfig } from './ZhiLanRenYuanLeiXing/index';
import { ZhiLanGongNengLeiXingConfig } from './ZhiLanGongNengLeiXing/index';
import { WeiXingGuoLvConfig } from './WeiXingGuoLv/index';
import { WeiXingImgConfig } from './WeiXingImg/index';
import { ZhiLan_ZhongZhiShuLiangMianJiConfig } from './ZhiLan_ZhongZhiShuLiangMianJi/index';
export default [
ZhiLanTitlesConfig,
@ -27,6 +27,7 @@ export default [
ZhiLanGongNengLeiXingConfig,
WeiXingGuoLvConfig,
WeiXingImgConfig,
ZhiLan_ZhongZhiShuLiangMianJiConfig,
ZhiLanIcons01Config,
ZhiLanIcons02Config,
ZhiLanIcons03Config,

40
src/views/chart/ContentCharts/components/PhotoModal/index.vue
View File

@ -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>

2
src/views/chart/ContentCharts/index.vue
View File

@ -52,7 +52,7 @@
:footer="null"
:closable="false"
>
<PhotoModal />
<PhotoModal :readonly="false"/>
</a-modal>
</template>