blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-10-13 14:02:10 +08:00
Code Issues Projects Releases Wiki Activity

feat: 空调可视化列表点击链接

Browse Source
This commit is contained in:
huanghao1412 2024-04-21 16:27:55 +08:00
parent 56d93c8d04
commit 796995f0d7
4 changed files with 146 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/packages/components/CustomComponents/CustomComponents/AirConditioningTable/config.ts
View File

@ -4,8 +4,21 @@ import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting' import { chartInitConfig } from '@/settings/designSetting'
import { AirConditioningTableConfig } from './index' import { AirConditioningTableConfig } from './index'
export const customData = { export type CustomDataType = {
enable: boolean
ids: string[]
showInterval: boolean
[key: string]: boolean | string | string[]
}
export const customData: CustomDataType = {
enable: false,
ids: [] as string[], ids: [] as string[],
col1Title: '设备名',
col2Code: '',
col2Title: '空调功率',
col3Code: '',
col3Title: '用电量',
showInterval: true showInterval: true
} }
@ -14,9 +27,9 @@ export const option = {
// 展示列 // 展示列
header: { header: {
columns: [ columns: [
{key: 'node_name', reg: '', title: '设备名', unit: '', show: true, width: 'auto', align: 'left', ellipsis: true}, {key: 'col1', title: '设备名', unit: '', show: true, width: 'auto', align: 'left', ellipsis: true},
{key: 'col1', reg: '/功率/', title: '空调功率', unit: 'kW', show: true, width: 'auto', align: 'left', ellipsis: true}, {key: 'col2', title: '空调功率', unit: 'kW', show: true, width: 'auto', align: 'left', ellipsis: true},
{key: 'col2', reg: '/用电量/', title: '用电量', unit: 'kWh', show: true, width: 'auto', align: 'left', ellipsis: true}, {key: 'col3', title: '用电量', unit: 'kWh', show: true, width: 'auto', align: 'left', ellipsis: true},
], ],
// value: [], // value: [],
// options: [], // options: [],

12
src/packages/components/CustomComponents/CustomComponents/AirConditioningTable/config.vue
View File

@ -7,12 +7,12 @@
<n-switch v-model:value="it.show" size="small"/> <n-switch v-model:value="it.show" size="small"/>
</n-space> </n-space>
</setting-item> </setting-item>
<setting-item name="正则表达式 匹配测点名称 如/功率/" v-if="i !== 0"> <!-- <setting-item name="正则表达式 匹配测点名称 如/功率/" v-if="i !== 0">-->
<n-input v-model:value="it.reg"/> <!-- <n-input v-model:value="it.reg"/>-->
</setting-item> <!-- </setting-item>-->
<setting-item name="列名"> <!-- <setting-item name="列名">-->
<n-input v-model:value="it.title"/> <!-- <n-input v-model:value="it.title"/>-->
</setting-item> <!-- </setting-item>-->
<setting-item name="单位"> <setting-item name="单位">
<n-input v-model:value="it.unit"/> <n-input v-model:value="it.unit"/>
</setting-item> </setting-item>

32
src/packages/components/CustomComponents/CustomComponents/AirConditioningTable/configData.vue
View File

@ -1,4 +1,30 @@
<template> <template>
<setting-item-box name="启用数据" :alone="true">
<n-space align="start">
<n-switch v-model:value="customData.enable" size="small"/>
</n-space>
</setting-item-box>
<setting-item-box name="第二列">
<setting-item name="标题">
<n-input v-model:value="customData.col1Title" style="height: 28px;" size="small"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="第二列">
<setting-item name="标题">
<n-input v-model:value="customData.col2Title" style="height: 28px;" size="small"></n-input>
</setting-item>
<setting-item name="测点编码">
<n-input v-model:value="customData.col2Code" style="height: 28px;" size="small"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="第三列">
<setting-item name="标题">
<n-input v-model:value="customData.col3Title" style="height: 28px;" size="small"></n-input>
</setting-item>
<setting-item name="测点编码">
<n-input v-model:value="customData.col3Code" style="height: 28px;" size="small"></n-input>
</setting-item>
</setting-item-box>
<setting-item-box name="设备UID" :alone="true"> <setting-item-box name="设备UID" :alone="true">
<n-space vertical> <n-space vertical>
<n-space v-for="(item, i) in computeIds" :key="i" align="center" :wrap="false"> <n-space v-for="(item, i) in computeIds" :key="i" align="center" :wrap="false">
@ -28,20 +54,20 @@
<script lang="ts" setup> <script lang="ts" setup>
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { reactive, watch, toRefs, ToRefs } from 'vue'; import { reactive, watch, toRefs, ToRefs } from 'vue';
import {customData as cd} from './config' import {CustomDataType} from './config'
import {icon} from "@/plugins"; import {icon} from "@/plugins";
const props = defineProps(['customData', 'request']) const props = defineProps(['customData', 'request'])
const { CloseIcon, AddIcon } = icon.ionicons5 const { CloseIcon, AddIcon } = icon.ionicons5
type computeIdsItemType = { type computeIdsItemType = {
id: string, id: string
value: string value: string
} }
const computeIds: computeIdsItemType[] = reactive([]) const computeIds: computeIdsItemType[] = reactive([])
const {customData} = toRefs(props) as ToRefs<{customData: typeof cd}> const {customData} = toRefs(props) as ToRefs<{customData: CustomDataType}>
watch(() => customData.value.ids, () => { watch(() => customData.value.ids, () => {
if(!customData.value.ids.length) customData.value.ids.push('') if(!customData.value.ids.length) customData.value.ids.push('')

180
src/packages/components/CustomComponents/CustomComponents/AirConditioningTable/index.vue
View File

@ -46,7 +46,7 @@ import { cloneDeep } from 'lodash'
import {publicInterface} from "@/api/path"; import {publicInterface} from "@/api/path";
import { useOriginStore } from '@/store/modules/originStore/originStore' import { useOriginStore } from '@/store/modules/originStore/originStore'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
import {customData as cd} from './config' import {CustomDataType} from './config'
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
@ -78,58 +78,62 @@ watch(() => props.chartConfig.option.header, v => {
deep: true deep: true
}) })
let originData:any = ref([]) let originData:any = ref({})
const customData = computed(() => { const customData = computed(() => {
return props.chartConfig.customData as typeof cd return props.chartConfig.customData as CustomDataType
}) })
let data = computed(() => { let data = computed(() => {
let arr:any = [] let arr:any = []
// if(!Object.keys(originData.value).length) return arr if(!Object.keys(originData.value).length) return arr
// customData.value.ids.forEach((id: string) => { customData.value.ids.forEach((id: string) => {
// let obj: any = {}
// option.header.columns.forEach((col: any, i: number) => {
// if(i === 0) {
// obj[col.key] = originData.value[id]?.[col.key]
// }
// else {
// let o = originData.value[id] ? originData.value[id] : null
// if(o) {
// let arr = [
// ...Object.values(o.aic),
// ...Object.values(o.aoc),
// ...Object.values(o.dic),
// ...Object.values(o.doc),
// ]
// let t:any = arr.find((_: any) => _.node_name === col.key) || {}
// obj[col.key] = t.value
// }
// else obj[col.key] = undefined
// }
// })
// arr.push(obj)
// })
if(!originData.value.length) return arr
customData.value.ids.forEach((id, i) => {
let target = originData.value[i]
let obj: any = {} let obj: any = {}
option.header.columns.forEach((col: any, ci:number) => { option.header.columns.forEach((col: any, i: number) => {
if(ci === 0) { if(col.key === 'col1') {
obj[col.key] = target.node_name obj[col.key] = originData.value[id]?.node_name
} }
else { else {
const pattern = col.reg.slice(1, -1); // 移除开始和结束的斜杠 let o = originData.value[id] ? originData.value[id] : null
let t = {node_value: ''} if(o) {
if(pattern) { let points:any = []
const regex = new RegExp(pattern); let keys = ['aic', 'aoc', 'dic', 'doc']
t = target.children.find((_: any) => regex.test(_.node_name)) || {} keys.forEach(k => {
Object.keys(o[k]).forEach(kk => {
points.push({
__node_code: kk,
...o[k][kk]
})
})
})
let t:any = points.find((_: any) => _.__node_code === customData.value[`${col.key}Code`]) || {}
obj[col.key] = t.value
} }
obj[col.key] = t.node_value else obj[col.key] = undefined
} }
}) })
arr.push(obj) arr.push(obj)
}) })
// if(!originData.value.length) return arr
// customData.value.ids.forEach((id, i) => {
// let target = originData.value[i]
// let obj: any = {}
// option.header.columns.forEach((col: any, ci:number) => {
// if(ci === 0) {
// obj[col.key] = target.node_name
// }
// else {
// const pattern = col.reg.slice(1, -1); // 移除开始和结束的斜杠
// let t = {node_value: ''}
// if(pattern) {
// const regex = new RegExp(pattern);
// t = target.children.find((_: any) => regex.test(_.node_name)) || {}
// }
// obj[col.key] = t.node_value
// }
// })
// arr.push(obj)
// })
return arr return arr
}) })
@ -146,8 +150,11 @@ const filterData = computed(() => {
const columns = computed(() => { const columns = computed(() => {
let arr = option.header.columns.filter((_: any) => _.show).map((item: any) => { let arr = option.header.columns.filter((_: any) => _.show).map((item: any, i: number) => {
let obj = item let obj = item
if(item.key === 'col1') item.title = customData.value.col1Title
else if(item.key === 'col2') item.title = customData.value.col2Title
else if(item.key === 'col3') item.title = customData.value.col3Title
obj.render = (row: any) => { obj.render = (row: any) => {
if(row[item.key] !== null && row[item.key] !== undefined) return row[item.key] + (item.unit ? item.unit : '') if(row[item.key] !== null && row[item.key] !== undefined) return row[item.key] + (item.unit ? item.unit : '')
else return '--' else return '--'
@ -173,67 +180,68 @@ if (systemConfig['active_alarm_confirm_status']) {
const getData = () => { const getData = () => {
if(!customData.value.ids.filter((_: string) => _).length) { if(!customData.value.ids.filter((_: string) => _).length) {
originData.value = [] originData.value = {}
return return
} }
let params = { let params = {
confirm_statuses, confirm_statuses,
levels, levels,
device: customData.value.ids.map((id: string) => { device: customData.value.ids.map((id: string) => {
return {dataType: 'point-title', dems_device_uid: id, is_all_point: true, points: []} return {dataType: 'point-title', dems_device_uid: id, is_all_point: false, points: [customData.value.col2Code, customData.value.col3Code]}
}) })
} }
publicInterface('/dcim/dems/device_point', 'cinterface_realtime_data_get_by_uid_no_err_v2', params).then(res => { publicInterface('/dcim/dems/device_point', 'cinterface_realtime_data_get_by_uid_no_err_v2', params).then(res => {
if (res && res.data) { if (res && res.data) {
let arr = customData.value.ids.map((id: string) => { originData.value = res.data
let obj = { // let arr = customData.value.ids.map((id: string) => {
node_name: res.data[id] ? res.data[id].node_name : '', // let obj = {
uid: id // node_name: res.data[id] ? res.data[id].node_name : '',
} // uid: id
return obj // }
}) // return obj
getDataChild(arr) // })
// getDataChild(arr)
} }
}) })
} }
const getDataChild = (parents: any) => { // const getDataChild = (parents: any) => {
let params = { // let params = {
"condition": { // "condition": {
"dems_device_uid": '', // "dems_device_uid": '',
"node_name": "", // "node_name": "",
"signal_id": "", // "signal_id": "",
"node_status": null, // "node_status": null,
"data_type": "", // "data_type": "",
"dems_device_template_id": null, // "dems_device_template_id": null,
"is_major_paramenter": "", // "is_major_paramenter": "",
"is_show": true, // "is_show": true,
"open_driver": true // "open_driver": true
}, // },
"page": { // "page": {
"page_size": 99999, // "page_size": 99999,
"page_number": 1 // "page_number": 1
} // }
} // }
let arr = customData.value.ids.map(_ => { // let arr = customData.value.ids.map(_ => {
let p = cloneDeep(params) // let p = cloneDeep(params)
p.condition.dems_device_uid = _ // p.condition.dems_device_uid = _
return publicInterface('/dcim/dems/device_point', 'get_page', p) // return publicInterface('/dcim/dems/device_point', 'get_page', p)
}) // })
Promise.all(arr).then(res => { // Promise.all(arr).then(res => {
let data = res.map(item => { // let data = res.map(item => {
if(item && item.errcode === '00000') return item.data.item || [] // if(item && item.errcode === '00000') return item.data.item || []
else return [] // else return []
}) // })
data.forEach((item, i) => { // data.forEach((item, i) => {
parents[i].children = item // parents[i].children = item
}) // })
originData.value = parents // originData.value = parents
}) // })
} // }
watch(() => customData.value.ids, () => { watch(() => [customData.value.enable, customData.value.col2Code, customData.value.col3Code, customData.value.ids.join('&&')].toString(), () => {
getData() if(customData.value.enable) getData()
}, { }, {
immediate: true, immediate: true,
deep: true deep: true