blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-06-30 00:29:16 +08:00
Code Issues Projects Releases Wiki Activity

fix: 设备一张图

Browse Source
This commit is contained in:
宝莉 2024-09-06 16:23:19 +08:00
parent b0022f968c
commit eeaf55cba0
39 changed files with 1412 additions and 1306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -5,7 +5,7 @@ VITE_DEV_PORT = '8080'
# VITE_DEV_PATH = 'http://192.168.0.34:11887' # VITE_DEV_PATH = 'http://192.168.0.34:11887'
VITE_DEV_PATH = 'http://192.168.0.34:8025/' VITE_DEV_PATH = 'http://192.168.0.34:8025/'
# VITE_DEV_PATH = 'http://192.168.0.120:3001' # VITE_DEV_PATH = 'http://192.168.0.120:3001'
VITE_DEV_TOKEN = "2e51947c-5d8d-42f2-99e8-8d841cff7a00" VITE_DEV_TOKEN = "197fccbc-0048-4552-aeb3-9b19edb351d6"
# production path # production path
# VITE_PRO_PATH = 'http://192.168.0.235:8177' # VITE_PRO_PATH = 'http://192.168.0.235:8177'

11
src/hooks/commonDataComponents/useAreaDevCountRes.ts
View File

@ -3,14 +3,20 @@ import { CreateComponentType } from '@/packages/index.d'
import { ResultErrcode } from "@/enums/httpEnum"; import { ResultErrcode } from "@/enums/httpEnum";
import { AreaDevCountType } from '@/store/modules/chartEditStore/chartEditStore.d' import { AreaDevCountType } from '@/store/modules/chartEditStore/chartEditStore.d'
import dataJson from "./data.json"; import dataJson from "./data.json";
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
export const handleAreaDevCountClass =async (targetComponent: CreateComponentType) => { export const handleAreaDevCountClass =async (targetComponent: CreateComponentType) => {
const globalQueryParamsStore = useGlobalQueryParamsStore()
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AreaDevCountType const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AreaDevCountType
// targetComponent?.option.series.forEach((item,index)=>{ // targetComponent?.option.series.forEach((item,index)=>{
// item.encode = { y:index===0? 'dev_count':'it_dev_count', x: 'space' } // item.encode = { y:index===0? 'dev_count':'it_dev_count', x: 'space' }
// }) // })
const queryParams = { const queryParams = {
space_complete_id:obj?.space_complete_id||null, device_codes: obj.device_codes?.length
? obj.device_codes.split(',')
: [],
...globalQueryParamsStore.getAreaDevCountQueryParams,
space_type:'station' space_type:'station'
} }
// 处理数据 // 处理数据
@ -24,7 +30,8 @@ export const handleAreaDevCountClass =async (targetComponent: CreateComponentTyp
'配电设备总数':item?.dev_count, '配电设备总数':item?.dev_count,
'IT设备总数':item?.it_dev_count, 'IT设备总数':item?.it_dev_count,
complete_id:item?.space?.complete_id complete_id:item?.space?.complete_id,
complete_name:item?.space.complete_name
} }
}) })
} }

23
src/hooks/commonDataComponents/useAssetsClassRes.ts
View File

@ -8,13 +8,16 @@ export const handleAssetsClass =async (targetComponent: CreateComponentType) =>
const globalQueryParamsStore = useGlobalQueryParamsStore() const globalQueryParamsStore = useGlobalQueryParamsStore()
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AssetsClassType const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AssetsClassType
let { enable, dataSource } = obj let { enable, dataSource,device_codes } = obj
if(!enable) return { if(!enable) return {
errcode: ResultErrcode.SUCCESS, errcode: ResultErrcode.SUCCESS,
data: { ...dataJson }, data: { ...dataJson },
errmsg: '' errmsg: ''
} }
const query = { const query = {
device_codes:device_codes?.length
? device_codes.split(',')
: [],
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
} }
// 处理数据 // 处理数据
@ -23,14 +26,13 @@ const globalQueryParamsStore = useGlobalQueryParamsStore()
res!.data = { res!.data = {
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')), // dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
dimensions: ['品牌','data'], dimensions: ['品牌','data'],
source:res?.data?.brand_count.slice(0,7).map((item: {})=>{ source:res?.data?.brand_count? res?.data?.brand_count.map((item: {})=>{
return { return {
'品牌':Object.keys(item)[0], '品牌':Object.keys(item)[0]||'未知品牌',
data:Object.values(item)[0], data:Object.values(item)[0],
} }
}) }):[{'品牌':'品牌',data:'0'}]
} }
console.log(res,'调用了吗')
return res return res
}else{ }else{
@ -39,14 +41,15 @@ const globalQueryParamsStore = useGlobalQueryParamsStore()
res!.data = { res!.data = {
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')), // dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
dimensions: ['品牌','data'], dimensions: ['品牌','data'],
source:res?.data.slice(0,7).map((item: any)=>{ source:res!.data.length? res?.data.map((item: any)=>{
return { return {
'品牌':item.name, '品牌':item?.name||'未知品牌',
data:item.count, data:item?.count||'0',
} }
}) }):[{'品牌':'品牌',data:'0'}]
} }
console.log(res,'调用了吗1') console.log(res,'调用了吗11')
return res return res
} }

5
src/hooks/commonDataComponents/useCategoryBrandCountTableRes.ts
View File

@ -7,7 +7,7 @@ import { ResultErrcode } from '@/enums/httpEnum'
import dataJson from './data.json' import dataJson from './data.json'
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore' import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
export const handleCategoryBrandCountTable =async (targetComponent: CreateComponentType) => { export const handleCategoryBrandCountTable =async (targetComponent: CreateComponentType) => {
let { currentSource, enable } = (targetComponent.commonData as commonDataType).categoryBrandCountTable as CategoryBrandCountTableType let { currentSource, enable,device_codes } = (targetComponent.commonData as commonDataType).categoryBrandCountTable as CategoryBrandCountTableType
if(!enable) return { if(!enable) return {
errcode: ResultErrcode.SUCCESS, errcode: ResultErrcode.SUCCESS,
data: { ...dataJson }, data: { ...dataJson },
@ -15,6 +15,9 @@ export const handleCategoryBrandCountTable =async (targetComponent: CreateCompon
} }
const globalQueryParamsStore = useGlobalQueryParamsStore() const globalQueryParamsStore = useGlobalQueryParamsStore()
const queryParams = { const queryParams = {
device_codes:device_codes?.length
? device_codes.split(',')
: [],
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
} }
const res = await publicInterface(currentSource==='IT'?'/dcim/asset':'/dcim/dems/device',currentSource==='IT'?'get_category_brand_count': 'get_dev_category_brand_count', queryParams) const res = await publicInterface(currentSource==='IT'?'/dcim/asset':'/dcim/dems/device',currentSource==='IT'?'get_category_brand_count': 'get_dev_category_brand_count', queryParams)

97
src/hooks/commonDataComponents/useCompanyTempTopRes.ts
View File

@ -1,41 +1,70 @@
import { publicInterface } from "@/api/path"; import { publicInterface } from '@/api/path'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { ResultErrcode } from "@/enums/httpEnum"; import { ResultErrcode } from '@/enums/httpEnum'
import { CompanyTempTopType } from '@/store/modules/chartEditStore/chartEditStore.d' import { CompanyTempTopType } from '@/store/modules/chartEditStore/chartEditStore.d'
import dataJson from "./data.json"; import dataJson from './data.json'
export const handleCompanyTempTop =async (targetComponent: CreateComponentType) => { export const handleCompanyTempTop = async (targetComponent: CreateComponentType) => {
console.log(targetComponent,'targetComponent.commonData'); console.log(targetComponent, 'targetComponent_targetComponent')
const option = targetComponent.option as any
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType
let { enable, space_complete_id, signal_ids} = obj let { enable, space_complete_id, signal_ids,spaceLevel } = obj
if(!enable) return { if (!enable)
errcode: ResultErrcode.SUCCESS, return {
data: { ...dataJson }, errcode: ResultErrcode.SUCCESS,
errmsg: '' data: { ...dataJson },
} errmsg: ''
const res:any = await publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', {signal_ids:[signal_ids],space_complete_id})
console.log(res,'res_handleCompanyTempTop');
if (res && res.data) {
res.data = {
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
dimensions: ['名称','温度值'],
source:res?.data.map((item: any)=>{
return {
'名称':`${item.node_name}`,
'温度值':item.dems_device_point.node_value,
}
})
}
return res
}else{
// 后端没有给errcode,前端重置
res.errcode = '00000'
res.data = {
dimensions:[],
source:[]
}
return res
} }
option.tooltip.formatter = (value:any)=>{
const item = value[0].data
// 将字符串按照 '/' 分割成数组
const parts = item.space_complete_name.split('/');
// 从数组开头开始，截取指定层级及以后的部分
const space_complete_name = parts.slice(spaceLevel, parts.length );
return `
${space_complete_name.join('/')}/${item.device_name}</br>
${item['名称']}&nbsp;&nbsp;&nbsp;&nbsp;${item['温度值']}°C
`
}
const res: any = await publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', {
signal_ids: [signal_ids],
space_complete_id
})
if (res && res.data) {
// option.yAxis[0].data = res?.data.slice(0, 10).map((item: any) => item.dems_device_point.node_value)
// option.xAxis.data = res?.data.slice(0, 10).map((item: any) => item.node_name)
res.data = {
dimensions: ['uid', '温度值',],
source: res?.data.slice(0, 10).map((item: any) => {
return {
uid: item.dems_device_point.uid,
名称: `${item.dems_device_point.node_name}`,
温度值: item.dems_device_point.node_value,
space_complete_name:item.space_complete_name,
device_name:item.node_name
}
}),
encode: {
x: '名称',
y: '温度值'
}
}
return res
} else {
// 后端没有给errcode,前端重置
res.errcode = '00000'
res.data = {
dimensions: [],
source: []
}
return res
}
} }

17
src/hooks/useChartCommonData.hook.ts
View File

@ -23,8 +23,6 @@ import { handleNoParam } from './commonDataComponents/useNoParamRes'
import { handleManulInput } from './commonDataComponents/useManualInputRes' import { handleManulInput } from './commonDataComponents/useManualInputRes'
import { handleManulInputSingle } from './commonDataComponents/useManualInputSingleRes' import { handleManulInputSingle } from './commonDataComponents/useManualInputSingleRes'
import { ResultErrcode } from '@/enums/httpEnum' import { ResultErrcode } from '@/enums/httpEnum'
import { logDark } from 'naive-ui';
import { fetchChartComponent } from '@/packages';
// 获取类型 // 获取类型
@ -42,7 +40,8 @@ export const useChartCommonData = (
updateCallback?: (...args: any) => any updateCallback?: (...args: any) => any
) => { ) => {
const vChartRef = ref<typeof VChart | null>(null) const vChartRef = ref<typeof VChart | null>(null)
let fetchInterval: any = 0 // 如果用下方的变量每次执行都会新增一个定时器， 但清除的得是targetComponent里面的定时器
// let fetchInterval: any = null
// 组件类型 // 组件类型
const { chartFrame } = targetComponent.chartConfig const { chartFrame } = targetComponent.chartConfig
@ -77,7 +76,8 @@ export const useChartCommonData = (
// 缓存组件的实例后续更新用得上 // 缓存组件的实例后续更新用得上
const instanceMap = new Map() const instanceMap = new Map()
// 存储构造函数引用,如果直接使用vChartRef.value的话会报错，因为json序列化无法对构造函数进行处理，先将它放到map中等使用的时候再获取 // 存储构造函数引用,如果直接使用vChartRef.value的话会报错，因为json序列化无法对构造函数进行处理，先将它放到map中等使用的时候再获取
instanceMap.set('$ref', vChartRef.value); const mapGetOption = {getOption:vChartRef.value.getOption,setOption:vChartRef.value.setOption}
instanceMap.set('$ref',mapGetOption);
targetComponent.$ref = instanceMap targetComponent.$ref = instanceMap
Object.assign(targetComponent.option, { Object.assign(targetComponent.option, {
// series, // series,
@ -124,7 +124,8 @@ export const useChartCommonData = (
} = toRefs(targetComponent.request) } = toRefs(targetComponent.request)
try { try {
clearInterval(fetchInterval) clearInterval(targetComponent.request.fetchInterval)
console.log(targetComponent.request.fetchInterval,'fetchInterval_fetchInterval')
const fetchFn = async () => { const fetchFn = async () => {
let res, isMultiple = true let res, isMultiple = true
@ -157,7 +158,7 @@ export const useChartCommonData = (
break; break;
case CurrentSourceEnum.COMPANYTEMPTOP: case CurrentSourceEnum.COMPANYTEMPTOP:
res = await handleCompanyTempTop(targetComponent) res = await handleCompanyTempTop(targetComponent)
console.log(res,'res',targetComponent,'触发了吗') console.log(res,'res_触发了吗')
break; break;
case CurrentSourceEnum.ALARMTREND: case CurrentSourceEnum.ALARMTREND:
@ -247,7 +248,7 @@ export const useChartCommonData = (
// 开启轮询 // 开启轮询
if (time) { if (time) {
fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) targetComponent.request.fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
} else { } else {
fetchFn() fetchFn()
} }
@ -257,7 +258,7 @@ export const useChartCommonData = (
} }
requestIntervalFn() requestIntervalFn()
if(!isPreview()) { if(!isPreview()) {
clearInterval(fetchInterval) clearInterval(targetComponent.request.fetchInterval)
} }
return { vChartRef } return { vChartRef }
} }

67
src/packages/components/Charts/Bars/BarCommon/index.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<v-chart <v-chart
ref="vChartRef" ref="vChartRef"
:init-options="initOptions" :init-options="initOptions"
:theme="themeColor" :theme="themeColor"
:option="option" :option="option"
:manual-update="isPreview()" :manual-update="isPreview()"
:update-options="{replaceMerge: replaceMergeArr}" :update-options="{ replaceMerge: replaceMergeArr }"
autoresize autoresize
> >
</v-chart> </v-chart>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick, computed, watch, PropType,onMounted } from 'vue' import { ref, nextTick, computed, watch, PropType, onMounted } from 'vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook' import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core' import { use } from 'echarts/core'
@ -23,11 +23,11 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartDataFetch, useChartCommonData } from '@/hooks' import { useChartDataFetch, useChartCommonData } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import {isPreview, setTooltipPosition} from '@/utils' import { isPreview, setTooltipPosition } from '@/utils'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject' import isObject from 'lodash/isObject'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore' import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
const chartEditStore = useChartEditStore() const chartEditStore = useChartEditStore()
const globalQueryParamsStore = useGlobalQueryParamsStore() const globalQueryParamsStore = useGlobalQueryParamsStore()
@ -57,34 +57,39 @@ const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes) return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
}) })
// 控制所有柱状图的点击事件 // 控制所有柱状图的点击事件
const chartPEvents = (e:any)=>{ const chartPEvents = (e: any) => {
console.log(e,'e_chartPEvents'), console.log(e, 'e_chartPEvents'), console.log(props.chartConfig, 'chartConfig1')
console.log(props.chartConfig,'chartConfig1') switch (props.chartConfig.commonData.currentSource) {
switch (props.chartConfig.commonData.currentSource) { case 'areaDevCount':
case "areaDevCount": // 设置公共查询条件
globalQueryParamsStore.setGlobalQueryParams({ globalQueryParamsStore.setGlobalQueryParams({
space_complete_id : e.data.complete_id space_complete_id: e.data.complete_id
}) })
console.log(chartEditStore.getComponentList,'chartEditStore_getComponentList') // props.chartConfig.option.series[0].forEach(item=>{
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
chartEditStore.getComponentList.forEach(component=>{
// component.request.requestInterval = 10
// component.request.requestInterval = 15
component.request.immediate = true
useChartCommonData(component, useChartEditStore) // })
}) console.log(chartEditStore.getComponentList, 'chartEditStore_getComponentList')
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
chartEditStore.getComponentList.forEach(component => {
// component.request.requestInterval = 10
// component.request.requestInterval = 15
if (component.chartConfig.key === 'TextCommon' && component.option.spaceName) {
component.option.dataset = `当前：${e.data.complete_name}`
}
component.request.immediate = true
useChartCommonData(component, useChartEditStore)
})
break; break
default: default:
break; break
} }
} }
onMounted(() => { onMounted(() => {
if(vChartRef.value) { if (vChartRef.value) {
vChartRef.value.chart.on('click', chartPEvents) vChartRef.value.chart.on('click', chartPEvents)
} }
}) })

244
src/packages/components/Charts/Maps/MapBase/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="box" :style="{scale}" style="position: absolute"> <div ref="box" :style="{ scale }" style="position: absolute">
<div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel"> <div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel">
<n-icon :color="backColor" :size="backSize * 1.1"> <n-icon :color="backColor" :size="backSize * 1.1">
<ArrowBackIcon /> <ArrowBackIcon />
@ -39,17 +39,19 @@ import { CanvasRenderer } from 'echarts/renderers'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
import { mergeTheme, setOption } from '@/packages/public/chart' import { mergeTheme, setOption } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartCommonData } from '@/hooks' import { useChartCommonData } from '@/hooks'
import {isPreview, postMessageToParent} from '@/utils' import { isPreview, postMessageToParent } from '@/utils'
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json' import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
import mapChinaJson from './mapGeojson/china.json' import mapChinaJson from './mapGeojson/china.json'
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
import { customData as customDataConfig } from './config' import { customData as customDataConfig } from './config'
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
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 { debounce } from 'lodash' import { debounce } from 'lodash'
import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
const globalQueryParamsStore = useGlobalQueryParamsStore()
const props = defineProps({ const props = defineProps({
themeSetting: { themeSetting: {
@ -95,7 +97,7 @@ const originStore = useOriginStore()
const systemConfig = originStore.getOriginStore.user.systemConfig const systemConfig = originStore.getOriginStore.user.systemConfig
const activeAlarmData = computed(() => { const activeAlarmData = computed(() => {
let obj:any = {levels: [], confirm_statuses: []} let obj: any = { levels: [], confirm_statuses: [] }
if (systemConfig['active_alarm_level']) { if (systemConfig['active_alarm_level']) {
for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) { for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) {
obj.levels.push(i + 1) obj.levels.push(i + 1)
@ -119,17 +121,17 @@ const dataMap = computed(() => {
let getData = () => { let getData = () => {
let obj = dataMap.value as any let obj = dataMap.value as any
if(JSON.stringify(obj) !== '{}') { if (JSON.stringify(obj) !== '{}') {
let ids = [] let ids = []
for(let k in obj) { for (let k in obj) {
if(obj[k].roomId) ids.push(obj[k].roomId) if (obj[k].roomId) ids.push(obj[k].roomId)
} }
const param = { const param = {
ids, ids,
...activeAlarmData.value ...activeAlarmData.value
} }
publicInterface('/dcim/dems/device', 'get_space_tree_with_status_v3', param).then((res: any) => { publicInterface('/dcim/dems/device', 'get_space_tree_with_status_v3', param).then((res: any) => {
if(res.data) { if (res.data) {
colorMap.value = {} colorMap.value = {}
res.data = res.data.filter((_: any) => _.node_status !== 0) res.data = res.data.filter((_: any) => _.node_status !== 0)
res.data.forEach((_: any) => { res.data.forEach((_: any) => {
@ -138,8 +140,7 @@ let getData = () => {
vEchartsSetOption() vEchartsSetOption()
} }
}) })
} } else {
else {
vEchartsSetOption() vEchartsSetOption()
} }
} }
@ -148,8 +149,10 @@ getData = debounce(getData, 200)
const vChartRef = ref<typeof VChart>() const vChartRef = ref<typeof VChart>()
const currentMap: Ref<any> = ref(null) const currentMap: Ref<any> = ref(null)
let colorMap: Ref<any> = ref({}) let colorMap: Ref<any> = ref({})
const componentList: Ref<any> = ref([])
const updateMapFn = (data: any) => { const updateMapFn = (data: any) => {
if(!data) return if (!data) return
props.chartConfig.option.series[0].data = data.features.map((it: any) => { props.chartConfig.option.series[0].data = data.features.map((it: any) => {
let obj = (dataMap.value as any)[it.properties.name] || {} let obj = (dataMap.value as any)[it.properties.name] || {}
return { return {
@ -158,7 +161,7 @@ const updateMapFn = (data: any) => {
value: it.properties.center ? it.properties.center.concat(50) : [], value: it.properties.center ? it.properties.center.concat(50) : [],
itemStyle: { itemStyle: {
color: colorMap.value[obj.roomId] || '#4dca59', color: colorMap.value[obj.roomId] || '#4dca59'
} }
} }
}) })
@ -167,8 +170,11 @@ const updateMapFn = (data: any) => {
//动态获取json注册地图 //动态获取json注册地图
const getGeojson = (regionId: string) => { const getGeojson = (regionId: string) => {
return new Promise<boolean>(resolve => { return new Promise<boolean>(resolve => {
console.log(regionId,'regionId') console.log(regionId, 'regionId')
if(regionId==='440600'){ if (regionId === '440600') {
const chartEditStore = useChartEditStore()
componentList.value = chartEditStore.getComponentList
initSpaceName('佛山市')
get_area_dev_count() get_area_dev_count()
} }
import(`./mapGeojson/${regionId}.json`).then(data => { import(`./mapGeojson/${regionId}.json`).then(data => {
@ -179,17 +185,17 @@ const getGeojson = (regionId: string) => {
}) })
}) })
} }
const get_area_dev_count =async ()=>{ const get_area_dev_count = async () => {
const res = await publicInterface('/dcim/dems/device','get_area_dev_count', {space_type:'county'}) const res = await publicInterface('/dcim/dems/device', 'get_area_dev_count', { space_type: 'county' })
customData.value.devList = res?.data customData.value.devList = res?.data
console.log(res?.data, 'res?.data')
props.chartConfig.option.series[1].data = res?.data || []
} }
//异步时先注册空的 保证初始化不报错 //异步时先注册空的 保证初始化不报错
if(props.chartConfig.option.mapRegion.province){ if (props.chartConfig.option.mapRegion.province) {
registerMap(`${props.chartConfig.option.mapRegion.province}`, { geoJSON: {} as any, specialAreas: {} }) registerMap(`${props.chartConfig.option.mapRegion.province}`, { geoJSON: {} as any, specialAreas: {} })
} else {
}else{
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} }) registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
} }
// 进行更换初始化地图 如果为china 单独处理 // 进行更换初始化地图 如果为china 单独处理
@ -198,8 +204,7 @@ const registerMapInitAsync = async () => {
const adCode = `${props.chartConfig.option.mapRegion.adcode}` const adCode = `${props.chartConfig.option.mapRegion.adcode}`
const province = `${props.chartConfig.option.mapRegion.province}` const province = `${props.chartConfig.option.mapRegion.province}`
if (adCode !== 'china') { if (adCode !== 'china') {
await getGeojson(province ? province : adCode)
await getGeojson(province?province:adCode)
} else { } else {
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands) await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
} }
@ -209,20 +214,20 @@ registerMapInitAsync()
const handleClickMap = (e: any) => { const handleClickMap = (e: any) => {
let obj = dataMap.value as any let obj = dataMap.value as any
if(obj && JSON.stringify(obj) !== '{}') { if (obj && JSON.stringify(obj) !== '{}') {
let path = obj[e.name]?.skipPath let path = obj[e.name]?.skipPath
if(path) openWeb(path) if (path) openWeb(path)
} }
} }
onMounted(() => { onMounted(() => {
if(vChartRef.value) { if (vChartRef.value) {
vChartRef.value.chart.on('click', 'series.map', handleClickMap) vChartRef.value.chart.on('click', 'series.map', handleClickMap)
} }
}) })
onUnmounted(() => { onUnmounted(() => {
if(vChartRef.value) vChartRef.value.chart.off('click', 'series.map', handleClickMap) if (vChartRef.value) vChartRef.value.chart.off('click', 'series.map', handleClickMap)
}) })
const openWeb = (url: string) => { const openWeb = (url: string) => {
@ -239,7 +244,6 @@ const vEchartsSetOption = () => {
setOption(vChartRef.value, props.chartConfig.option) setOption(vChartRef.value, props.chartConfig.option)
} }
// 处理海南群岛 // 处理海南群岛
const hainanLandsHandle = async (newData: boolean) => { const hainanLandsHandle = async (newData: boolean) => {
if (newData) { if (newData) {
@ -249,31 +253,50 @@ const hainanLandsHandle = async (newData: boolean) => {
} }
} }
const initSpaceName = (text: string) => {
componentList.value
.filter((v: any) => v.chartConfig.key === 'TextCommon' && v.option.spaceName)
.forEach((item: any) => {
item.option.dataset = `当前：${text}`
})
}
// 点击区域 // 点击区域
const chartPEvents = (e: any) => { const chartPEvents = (e: any) => {
console.log(e,'e') console.log(e, 'e')
console.log(props.chartConfig.option,'props.chartConfig.option.series[1]') e.color = 'pink'
if(props.chartConfig.option.mapRegion.province===440600){ if (props.chartConfig.option.mapRegion.province === 440600) {
const county = currentMap.value.features.find((item:any)=>item.properties.name===e.name) const county = currentMap.value.features.find((item: any) => item.properties.name === e.name)
if(county){
const space_complete:any = customData.value.devList.find((item:any)=>{
if(item.space.extend_column_string.length){
return JSON.parse(item.space.extend_column_string).county_code===`${county.properties.adcode}` if (county) {
} const space_complete: any = customData.value.devList.find((item: any) => {
}) if (item.space.extend_column_string.length) {
return JSON.parse(item.space.extend_column_string).county_code === `${county.properties.adcode}`
}
})
// 找到空间标识的文字框然后进行赋值
initSpaceName(space_complete?.space.complete_name || `佛山市/${county.properties.name}`)
const chartEditStore = useChartEditStore() console.log(space_complete, 'space_complete_space_complete')
chartEditStore.getComponentList.forEach(component=>{ // 设置公共查询条件
if(component.commonData.currentSource==='areaDevCount'){ globalQueryParamsStore.setGlobalQueryParams({
component.commonData['areaDevCount'].space_complete_id = space_complete?space_complete?.space.complete_id:null space_complete_id: space_complete?.space?.complete_id || '-999'
// useChartCommonData(component, useChartEditStore) })
} globalQueryParamsStore.setAreaDevCountQueryParams({
space_complete_id: space_complete?.space?.complete_id || '-999'
})
componentList.value.forEach((component: any) => {
// if (component.commonData.currentSource === 'areaDevCount') {
// component.commonData['areaDevCount'].space_complete_id = space_complete.space.complete_id
}) // // useChartCommonData(component, useChartEditStore)
} // }
console.log(county,'county') component.request.immediate = true
useChartCommonData(component, useChartEditStore)
})
} }
console.log(county, 'county')
}
if (e.seriesType !== 'map') return if (e.seriesType !== 'map') return
if (!props.chartConfig.option.mapRegion.enter) { if (!props.chartConfig.option.mapRegion.enter) {
return return
@ -316,34 +339,37 @@ onMounted(() => {
}) })
}) })
watch(() => customData.value.dataMap, () => { watch(
let obj = dataMap.value as any () => customData.value.dataMap,
props.chartConfig.option.series[1].tooltip.formatter = (v: any) => { () => {
// if(props.chartConfig.option.mapRegion.province===440600){ let obj = dataMap.value as any
// let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${1111}</span></div>` props.chartConfig.option.series[1].tooltip.formatter = (v: any) => {
// return str // if(props.chartConfig.option.mapRegion.province===440600){
// } // let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${1111}</span></div>`
let value: any // return str
if(JSON.stringify(obj) !== '{}') value = obj[v.name]?.value || '-' // }
else value = !isNaN(v.value) ? v.value : '-' let value: any
let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${value}</span></div>` if (JSON.stringify(obj) !== '{}') value = obj[v.name]?.value || '-'
return str else value = !isNaN(v.value) ? v.value : '-'
let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${value}</span></div>`
return str
}
getData()
},
{
immediate: true
} }
getData() )
}, {
immediate: true
})
let scale = ref(1) let scale = ref(1)
const handleWheel = (event: any) => { const handleWheel = (event: any) => {
// 阻止默认行为（例如页面滚动） // 阻止默认行为（例如页面滚动）
event.preventDefault(); event.preventDefault()
if(!option.value.canScroll) return if (!option.value.canScroll) return
// 检查滚动方向 // 检查滚动方向
if (event.deltaY < 0) { if (event.deltaY < 0) {
scale.value = Math.min(3, scale.value + 0.1) scale.value = Math.min(3, scale.value + 0.1)
} } else {
else {
scale.value = Math.max(0.1, scale.value - 0.1) scale.value = Math.max(0.1, scale.value - 0.1)
} }
} }
@ -351,39 +377,39 @@ const handleWheel = (event: any) => {
// 查找父元素，确保父元素的类名为 .go-preview-scale // 查找父元素，确保父元素的类名为 .go-preview-scale
function findParentWithClass(element: any, className: string) { function findParentWithClass(element: any, className: string) {
// 当前元素的父元素 // 当前元素的父元素
let parent = element.parentElement; let parent = element.parentElement
// 遍历父元素链，直到找到匹配的类名或到达文档根元素 // 遍历父元素链，直到找到匹配的类名或到达文档根元素
while (parent && !parent.classList.contains(className)) { while (parent && !parent.classList.contains(className)) {
parent = parent.parentElement; parent = parent.parentElement
} }
// 返回找到的父元素，或者 null 如果没有匹配的父元素 // 返回找到的父元素，或者 null 如果没有匹配的父元素
return parent; return parent
} }
const getScaleXY = (v: string) => { const getScaleXY = (v: string) => {
// 定义正则表达式来匹配 scale 函数中的两个数字 // 定义正则表达式来匹配 scale 函数中的两个数字
const regex = /scale\((\d*\.?\d+),\s*(\d*\.?\d+)\)/; const regex = /scale\((\d*\.?\d+),\s*(\d*\.?\d+)\)/
// 使用正则表达式匹配并提取数字 // 使用正则表达式匹配并提取数字
const matches = v.match(regex); const matches = v.match(regex)
if (matches) { if (matches) {
const scaleX = parseFloat(matches[1]); const scaleX = parseFloat(matches[1])
const scaleY = parseFloat(matches[2]); const scaleY = parseFloat(matches[2])
return [scaleX, scaleY] return [scaleX, scaleY]
} else { } else {
return [1, 1] return [1, 1]
} }
} }
let offsetX:number, offsetY:number let offsetX: number, offsetY: number
let left:number, top:number let left: number, top: number
let isDragging = ref(false) let isDragging = ref(false)
const box = ref() const box = ref()
const handleMousedown = (event: any) => { const handleMousedown = (event: any) => {
if(box.value) { if (box.value) {
let el = box.value let el = box.value
isDragging.value = true; isDragging.value = true
offsetX = event.clientX offsetX = event.clientX
offsetY = event.clientY offsetY = event.clientY
@ -398,39 +424,38 @@ const handleMousedown = (event: any) => {
// 当鼠标移动时触发 // 当鼠标移动时触发
const handleMousemove = (event: any) => { const handleMousemove = (event: any) => {
if(!option.value.canDrag) return if (!option.value.canDrag) return
if (!isDragging.value) return; if (!isDragging.value) return
if(box.value){ if (box.value) {
let parent = findParentWithClass(box.value, 'go-preview-scale') let parent = findParentWithClass(box.value, 'go-preview-scale')
let [scaleX, scaleY] = getScaleXY(parent.style.transform) let [scaleX, scaleY] = getScaleXY(parent.style.transform)
let el = box.value let el = box.value
// 计算元素的新位置 // 计算元素的新位置
const x = left + (event.clientX - offsetX) / scaleX const x = left + (event.clientX - offsetX) / scaleX
const y = top + (event.clientY - offsetY) / scaleY const y = top + (event.clientY - offsetY) / scaleY
// 更新元素的位置 // 更新元素的位置
el.style.left = `${x}px`; el.style.left = `${x}px`
el.style.top = `${y}px`; el.style.top = `${y}px`
} }
} }
// 当鼠标松开时触发 // 当鼠标松开时触发
const handleMouseup = (event: any) => { const handleMouseup = (event: any) => {
if(!option.value.canDrag) return if (!option.value.canDrag) return
isDragging.value = false; isDragging.value = false
// 移除鼠标移动和松开事件监听器 // 移除鼠标移动和松开事件监听器
document.removeEventListener('mousemove', handleMousemove); document.removeEventListener('mousemove', handleMousemove)
document.removeEventListener('mouseup', handleMouseup); document.removeEventListener('mouseup', handleMouseup)
} }
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
if(vChartRef.value) { if (vChartRef.value) {
vChartRef.value.$el.addEventListener('wheel', handleWheel, { passive: false }) vChartRef.value.$el.addEventListener('wheel', handleWheel, { passive: false })
} }
if(box.value) { if (box.value) {
box.value.addEventListener('mousedown', handleMousedown) box.value.addEventListener('mousedown', handleMousedown)
} }
}) })
@ -441,8 +466,6 @@ onUnmounted(() => {
box?.value?.removeEventListener('mousedown', handleMousedown) box?.value?.removeEventListener('mousedown', handleMousedown)
}) })
//监听是否显示南海群岛 //监听是否显示南海群岛
if (!isPreview()) { if (!isPreview()) {
watch( watch(
@ -489,25 +512,27 @@ watch(
} }
) )
let timer: unknown
let timer:unknown watch(
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), () => { () => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
if(!isPreview()) return () => {
if(props.chartConfig.request.requestInterval) { if (!isPreview()) return
if(timer) clearInterval(timer as number) if (props.chartConfig.request.requestInterval) {
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} if (timer) clearInterval(timer as number)
const unit = obj.unit const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const number = unit * props.chartConfig.request.requestInterval const unit = obj.unit
timer = setInterval(() => { const number = unit * props.chartConfig.request.requestInterval
getData() timer = setInterval(() => {
}, number) getData()
}, number)
}
} }
}) )
onMounted(() => { onMounted(() => {
getData() getData()
if(!isPreview()) return if (!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {
@ -516,9 +541,8 @@ onMounted(() => {
}) })
onUnmounted(() => { onUnmounted(() => {
if(timer) clearInterval(timer as number) if (timer) clearInterval(timer as number)
}) })
</script> </script>
<style scope lang="scss"> <style scope lang="scss">

104
src/packages/components/Charts/Pies/PieCommon3/config.ts
View File

@ -10,58 +10,74 @@ export enum PieTypeEnum {
NORMAL = '常规图', NORMAL = '常规图',
RING = '环形图', RING = '环形图',
ROSE = '玫瑰图', ROSE = '玫瑰图',
RINGROSE = '环形玫瑰图', RINGROSE = '环形玫瑰图'
} }
export const PieTypeObject = { export const PieTypeObject = {
[PieTypeEnum.NORMAL]: 'normal', [PieTypeEnum.NORMAL]: 'normal',
[PieTypeEnum.RING]: 'ring', [PieTypeEnum.RING]: 'ring',
[PieTypeEnum.ROSE]: 'rose', [PieTypeEnum.ROSE]: 'rose',
[PieTypeEnum.RINGROSE]: 'ringrose', [PieTypeEnum.RINGROSE]: 'ringrose'
} }
// 其它配置 // 其它配置
const otherConfig = { const otherConfig = {
// 轮播动画 // 轮播动画
isCarousel: false, isCarousel: false,
legendShowValue: false, legendShowValue: false
} }
const color = ["#F5B442", "#FF8A66","#FF6D55","#FF3342","#F23DAD","#B73FEF","#F23DAD","#B73FEF","#6F40ED","#5945ED"] const color = [
'#F5B442',
'#FF8A66',
'#FF6D55',
'#FF3342',
'#F23DAD',
'#B73FEF',
'#F23DAD',
'#B73FEF',
'#6F40ED',
'#5945ED'
]
const option = { const option = {
...otherConfig, ...otherConfig,
backgroundColor: "rgba(255,255,255,1)", backgroundColor: 'rgba(255,255,255,1)',
color, color,
type: 'pie', type: 'pie',
tooltip: { tooltip: {
show: true, show: true,
trigger: 'item', trigger: 'item'
// valueFormatter :function(value:string){ // valueFormatter :function(value:string){
// // console.log(name,'name-formatter') // // console.log(name,'name-formatter')
// return ''+value // return ''+value
// } // }
}, },
legend: { legend: {
orient: "vartical", type: 'scroll',
x: "left", orient: 'vertical',
top: "center", x: 'left',
left: "70%", top: 'center',
bottom: "0%", left: '0',
right: '30%',
bottom: '0%',
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
itemGap :16, itemGap: 16,
formatter :function(name:string){ formatter: function (name: string) {
return ''+name return name.length > 5 ? name.substring(0, 5) + '...' : name;
} }
},
grid: {
left: '3%',
}, },
dataset: { ...dataJson }, dataset: { ...dataJson },
series: [ series: [
{ {
type: 'pie', type: 'pie',
clockwise: false, //饼图的扇区是否是顺时针排布 clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360） // minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["50%", "0%"], radius: ['0%', '50%'],
center: ["30%", "50%"], center: ['30%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
// itemStyle: { //图形样式 // itemStyle: { //图形样式
// normal: { // normal: {
@ -70,33 +86,33 @@ const option = {
// }, // },
// }, // },
label: { label: {
normal: { normal: {
show: false, show: false,
position: 'center', position: 'center',
formatter: '{text|{b}}\n{c} ({d}%)', formatter: '{text|{b}}\n{c} ({d}%)',
rich: { rich: {
text: { text: {
color: "#666", color: '#666',
fontSize: 14, fontSize: 14,
align: 'center', align: 'center',
verticalAlign: 'middle', verticalAlign: 'middle',
padding: 8 padding: 8
}, },
value: { value: {
color: "#8693F3", color: '#8693F3',
fontSize: 24, fontSize: 24,
align: 'center', align: 'center',
verticalAlign: 'middle', verticalAlign: 'middle'
}, }
}
},
emphasis: {
show: false,
textStyle: {
fontSize: 24,
}
} }
}, },
emphasis: {
show: false,
textStyle: {
fontSize: 24
}
}
}
} }
] ]
} }

3
src/packages/components/Charts/Pies/PieCommon3/index.vue
View File

@ -53,6 +53,9 @@ use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent
const option = computed(() => { const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes) return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
}) })
props.chartConfig.option.legend.top='10'
props.chartConfig.option.legend.left='60%'
// 会重新选择需要选中和展示的数据 // 会重新选择需要选中和展示的数据
const handleSeriesData = () => { const handleSeriesData = () => {

2
src/packages/components/CustomComponents/AlarmDiagram/RealTimeAlarmStatistics/configData.vue
View File

@ -5,7 +5,7 @@
<setting-item-box name="空间ID" :alone="true"> <setting-item-box name="空间ID" :alone="true">
<n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入空间ID"/> <n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入空间ID"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>

9
src/packages/components/CustomComponents/AlarmDiagram/RealTimeEvent/BorderBoxV2.vue
View File

@ -3,8 +3,8 @@
<template #title> <template #title>
<div class="titleBox"> <div class="titleBox">
<div class="mr10">{{title}}</div> <div class="mr10">{{title}}</div>
<n-checkbox :checked="checkAll" @update:checked="(v:boolean) => emit('update:checkAll', v)" size="small" class="mr10">全选</n-checkbox> <n-checkbox :checked="checkAll" @update:checked="(v:boolean) => emit('update:checkAll', v)" size="small" >全选</n-checkbox>
<n-button strong size="tiny" color="rgba(36,197,231,.5)" text-color="#fff" class="button" @click="clickBatch"> <n-button strong size="tiny" color="rgba(36,197,231,.5)" text-color="#fff" class="button " @click="clickBatch">
<template #icon> <template #icon>
<AssignmentTurnedInRoundIcon/> <AssignmentTurnedInRoundIcon/>
</template> </template>
@ -19,7 +19,7 @@
</n-checkbox> </n-checkbox>
</n-space> </n-space>
</n-checkbox-group> </n-checkbox-group>
<n-checkbox-group v-if="showFilter" :value="select2.value" @update:value="(v:[]) => changeSelect2(v)" class="mr10" size="small"> <n-checkbox-group v-if="showFilter" :value="select2.value" @update:value="(v:[]) => changeSelect2(v)" size="small">
<n-space item-style="display: flex;"> <n-space item-style="display: flex;">
<n-checkbox :value="item.value" :label="item.label" v-for="(item, i) in select2.options" :key="i"> <n-checkbox :value="item.value" :label="item.label" v-for="(item, i) in select2.options" :key="i">
<div :style="{color: item.color}" style="display: inline-block">{{item.label}}</div> <div :style="{color: item.color}" style="display: inline-block">{{item.label}}</div>
@ -118,4 +118,7 @@ const jumpMore = () => {
cursor: pointer; cursor: pointer;
} }
} }
:deep(.n-checkbox__label){
padding:0 6px;
}
</style> </style>

4
src/packages/components/CustomComponents/AlarmDiagram/RealTimeEvent/configData.vue
View File

@ -5,8 +5,8 @@
<setting-item-box name="空间ID" :alone="true"> <setting-item-box name="空间ID" :alone="true">
<n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入空间ID"/> <n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入空间ID"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="温湿度测点ID(英文逗号隔开)" :alone="true"> <setting-item-box name="通过测点编码筛选(多个编码使用英文逗号分隔)" :alone="true">
<n-input v-model:value="props.customData.dems_device_point_signal_ids" size="small" placeholder="请输入温湿度测点ID(英文逗号隔开)"/> <n-input v-model:value="props.customData.dems_device_point_signal_ids" size="small" placeholder="请输入测点编码筛选(多个编码使用英文逗号分隔)"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="显示筛选条件" :alone="true"> <setting-item-box name="显示筛选条件" :alone="true">
<n-radio-group v-model:value="props.customData.showFilter" size="small" style="margin-top: 2px"> <n-radio-group v-model:value="props.customData.showFilter" size="small" style="margin-top: 2px">

349
src/packages/components/CustomComponents/AlarmDiagram/RealTimeEvent/index.vue
View File

@ -13,33 +13,59 @@
style="overflow: visible" style="overflow: visible"
> >
<div v-if="tableData.length" class="itemBox"> <div v-if="tableData.length" class="itemBox">
<div class="item" v-for="(item, i) in tableData" :key="i" @click="clickItem(i)"> <div class="item" v-for="(item, i) in tableData" :key="i" @click="clickItem(i)">
<n-checkbox :disabled="item.confirm_status === 'ok'" v-model:checked="item.checked" class="mr10" size="small" @click.stop/> <n-checkbox
<n-tag class="mr5" size="small" strong :color="{textColor: '#000', color: item.confirm_status === 'ok' ? '#4DCA59' : '#f5b442'}"> :disabled="item.confirm_status === 'ok'"
{{ item.confirm_status === 'ok'?'已确认':'未确认' }} v-model:checked="item.checked"
class="mr10"
size="small"
@click.stop
/>
<n-tag
class="mr5"
size="small"
strong
:color="{ textColor: '#000', color: item.confirm_status === 'ok' ? '#4DCA59' : '#f5b442' }"
>
{{ item.confirm_status === 'ok' ? '已确认' : '未确认' }}
</n-tag> </n-tag>
<n-tag class="mr5" size="small" :color="{textColor: item.color1, borderColor: item.color1}"> <n-tag class="mr5" size="small" :color="{ textColor: item.color1, borderColor: item.color1 }">
{{select1.options[item.level - 1].label}} {{ select1.options[item.level - 1].label }}
</n-tag> </n-tag>
<div class="textEllipsis" style="color: rgba(255, 255, 255, 0.82);flex: 20;">{{ item.content }}</div> <div class="textEllipsis" style="color: rgba(255, 255, 255, 0.82); flex: 20">{{ item.content }}</div>
<div style="flex: 1;"></div> <div style="flex: 1"></div>
<div class="mr10 textEllipsis" style="color: #B5BAC3;width: 150px">{{ moment(item.generate_time).format('yyyy-MM-DD HH:mm:ss') }}</div> <div class="mr10 textEllipsis" style="color: #b5bac3; width: 150px">
<LocationIcon @click.stop="jumpTo(item)" class="mr10" style="width: 20px;height: 20px;color: #4196ff;"/> {{ moment(item.generate_time).format('yyyy-MM-DD HH:mm:ss') }}
<CheckCircleOutlinedIcon @click.stop="clickSingle(item.id)" v-if="item.confirm_status === 'not'" class="mr10" style="width: 20px;height: 20px;color: #4196ff;"/> </div>
<LocationIcon @click.stop="jumpTo(item)" class="mr10" style="width: 20px; height: 20px; color: #4196ff" />
<CheckCircleOutlinedIcon
@click.stop="clickSingle(item.id)"
v-if="item.confirm_status === 'not'"
class="mr10"
style="width: 20px; height: 20px; color: #4196ff"
/>
<div v-else class="mr10" style="width: 20px"></div> <div v-else class="mr10" style="width: 20px"></div>
<template v-if="alarmVideos[i]"> <template v-if="alarmVideos[i]">
<SpinnerIcon v-if="showLoading && currentVideo.alarmId === item.id" class="rotate" style="width: 18px;height: 18px;color: #4196ff;"/> <SpinnerIcon
<PlayCircle16FilledIcon v-else @click.stop="showVideo(alarmVideos[i], item.id)" style="width: 20px;height: 20px;color: #4196ff;"/> v-if="showLoading && currentVideo.alarmId === item.id"
class="rotate"
style="width: 18px; height: 18px; color: #4196ff"
/>
<PlayCircle16FilledIcon
v-else
@click.stop="showVideo(alarmVideos[i], item.id)"
style="width: 20px; height: 20px; color: #4196ff"
/>
</template> </template>
<div v-else style="width: 20px"></div> <div v-else style="width: 20px"></div>
</div> </div>
</div> </div>
<div class="emptyBox" v-else> <div class="emptyBox" v-else>
<img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 50%" alt=""> <img src="@/assets/images/exception/nodata.svg" style="width: 100%; height: 50%" alt="" />
<div style="color: #fff;text-align: center">查询结果为空</div> <div style="color: #fff; text-align: center">查询结果为空</div>
</div> </div>
<!-- <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>--> <!-- <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>-->
<!-- <VModalV1 v-model:show="modalV1Obj.show" :data="modalV1Obj.data" @confirm="confirm"/>--> <!-- <VModalV1 v-model:show="modalV1Obj.show" :data="modalV1Obj.data" @confirm="confirm"/>-->
</BorderBox> </BorderBox>
</template> </template>
@ -49,11 +75,11 @@ import type { Ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
import BorderBox from './BorderBoxV2.vue' import BorderBox from './BorderBoxV2.vue'
import {isPreview, postMessageToParent, useGetMessageByParent} from '@/utils' import { isPreview, postMessageToParent, useGetMessageByParent } from '@/utils'
import moment from "moment" import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
import {icon} from '@/plugins/icon' import { icon } from '@/plugins/icon'
import VModal from './VModal.vue' import VModal from './VModal.vue'
import VModalV1 from './VModalV1.vue' import VModalV1 from './VModalV1.vue'
import { useOriginStore } from '@/store/modules/originStore/originStore' import { useOriginStore } from '@/store/modules/originStore/originStore'
@ -109,59 +135,64 @@ interface Select2Type {
color: string color: string
}[] }[]
} }
const select2:Select2Type = reactive({ const select2: Select2Type = reactive({
value: [], value: [],
options: [ options: [
{ label: '已确认', value: 'ok', number: 0, color: '#4DCA59' }, { label: '已确认', value: 'ok', number: 0, color: '#4DCA59' },
{ label: '未确认', value: 'not', number: 0, color: '#f5b442' }, { label: '未确认', value: 'not', number: 0, color: '#f5b442' }
] ]
}) })
type tableDataItemType = { type tableDataItemType = {
id: number, id: number
content: string, content: string
generate_time: string, generate_time: string
checked: boolean, checked: boolean
confirm_status: 'ok' | 'not', confirm_status: 'ok' | 'not'
level: number, level: number
color1: string, color1: string
color2: string, color2: string
position: string, position: string
device_name: string, device_name: string
node_name: string, node_name: string
confirm_people: string, confirm_people: string
confirm_time: string, confirm_time: string
reconfirmation_time_str: string, reconfirmation_time_str: string
serial_no: string, serial_no: string
remark: string, remark: string
[k:string]: any, [k: string]: any
} }
let tableData:tableDataItemType[] = reactive([]) let tableData: tableDataItemType[] = reactive([])
watch(() => tableData.map(_ => _.checked), (v:boolean[]) => { watch(
if(!v.length) checkAll.value = false () => tableData.map(_ => _.checked),
else if(v.every(_ => _)) checkAll.value = true (v: boolean[]) => {
else if(v.every(_ => !_)) checkAll.value = false if (!v.length) checkAll.value = false
}) else if (v.every(_ => _)) checkAll.value = true
else if (v.every(_ => !_)) checkAll.value = false
}
)
let checkAll = ref(false) let checkAll = ref(false)
watch(() => checkAll.value, (v) => { watch(
tableData.forEach(_ => _.checked = v) () => checkAll.value,
}) v => {
tableData.forEach(_ => (_.checked = v))
}
)
const getNumber = () => { const getNumber = () => {
console.log(props.chartConfig.customData?.dems_device_point_signal_ids,'props.chartConfig.customData?.dems_device_point_signal_ids')
const q = { const q = {
space_complete_id: props.chartConfig.customData?.space_complete_id, space_complete_id: props.chartConfig.customData?.space_complete_id,
confirm_statuss: alarmConfirmStatus.value, confirm_statuss: alarmConfirmStatus.value,
handle_statuss: alarmHandleStatuss.value, handle_statuss: alarmHandleStatuss.value,
recovery_statuss: alarmRecoveryStatus.value, recovery_statuss: alarmRecoveryStatus.value,
dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(','), signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(',')
} }
publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level_new', q).then(res => { publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level_new', q).then(res => {
if (res && JSON.stringify(res.data) !== '{}') { if (res && JSON.stringify(res.data) !== '{}') {
select1.options.forEach((item, i) => { select1.options.forEach((item, i) => {
item.number = res.data[`level${i+1}`] item.number = res.data[`level${i + 1}`]
}) })
} }
}) })
@ -172,7 +203,8 @@ const getNumber = () => {
space_complete_id: props.chartConfig.customData?.space_complete_id, space_complete_id: props.chartConfig.customData?.space_complete_id,
append_space_to_content: 'complete', append_space_to_content: 'complete',
handle_statuss: alarmHandleStatuss.value, handle_statuss: alarmHandleStatuss.value,
recovery_statuss: alarmRecoveryStatus.value recovery_statuss: alarmRecoveryStatus.value,
dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(',')
} }
} }
publicInterface('/dcim/dems/devie_active_alarm', 'get_app_alarm_num_by_condition', param).then(res => { publicInterface('/dcim/dems/devie_active_alarm', 'get_app_alarm_num_by_condition', param).then(res => {
@ -195,68 +227,74 @@ let alarmVideos = ref([])
// }) // })
let currentVideo: any = ref({}) let currentVideo: any = ref({})
const getVideos = (ids: number[], alarmIds: number[]) => { const getVideos = (ids: number[], alarmIds: number[]) => {
if(ids.length) { if (ids.length) {
publicInterface('/dcim/video_monitor/other_device', 'get_alarm_device', {device_uids: ids.toString()}).then((res: any) => { publicInterface('/dcim/video_monitor/other_device', 'get_alarm_device', { device_uids: ids.toString() }).then(
// if(res.errcode !== '00000') return (res: any) => {
if(!res?.data) return // if(res.errcode !== '00000') return
let arr:any = [] if (!res?.data) return
ids.forEach(id => { let arr: any = []
arr.push(res.data[id] ? res.data[id][0] : null) ids.forEach(id => {
}) arr.push(res.data[id] ? res.data[id][0] : null)
alarmVideos.value = arr.concat() })
alarmVideos.value = arr.concat()
let index = 0, last:any = {} let index = 0,
for(let i = 0; i < arr.length; i++) { last: any = {}
if(arr[i]) { for (let i = 0; i < arr.length; i++) {
last = arr[i] if (arr[i]) {
index = i last = arr[i]
break index = i
break
}
} }
} if (JSON.stringify(currentVideo.value) === '{}' && !last) return
if(JSON.stringify(currentVideo.value) === '{}' && !last) return let obj =
let obj = JSON.stringify(currentVideo.value) !== '{}' ? JSON.parse(JSON.stringify(currentVideo.value)) : { JSON.stringify(currentVideo.value) !== '{}'
ip: '', ? JSON.parse(JSON.stringify(currentVideo.value))
port: null, : {
account: '', ip: '',
password: '', port: null,
channel: '', account: '',
brand: '', password: '',
plugin: '', channel: '',
} brand: '',
if(last) { plugin: ''
for(let k in obj) { }
obj[k] = last[k] if (last) {
for (let k in obj) {
obj[k] = last[k]
}
} }
obj.alarmId = alarmIds[index]
currentVideo.value = obj
obj.showForce = false
postMessageToParent({
type: 'openVideoV2',
data: obj
})
} }
obj.alarmId = alarmIds[index] )
currentVideo.value = obj
obj.showForce = false
postMessageToParent({
type: 'openVideoV2',
data: obj
})
})
} }
} }
const showLoading = ref(false) const showLoading = ref(false)
const {getMessageByParent} = useGetMessageByParent() const { getMessageByParent } = useGetMessageByParent()
getMessageByParent('', (e) => { getMessageByParent('', e => {
if(e.data.type === 'openVideoV2_closeLoading' && e.data.page === 'customLargeScreen') { if (e.data.type === 'openVideoV2_closeLoading' && e.data.page === 'customLargeScreen') {
showLoading.value = false showLoading.value = false
} }
}) })
const showVideo = (obj: any, id: number) => { const showVideo = (obj: any, id: number) => {
let a: {[k: string]: string | null | boolean | number} = { let a: { [k: string]: string | null | boolean | number } = {
ip: '', ip: '',
port: null, port: null,
account: '', account: '',
password: '', password: '',
channel: '', channel: '',
brand: '', brand: '',
plugin: '', plugin: ''
} }
for(let k in a) { for (let k in a) {
a[k] = obj[k] a[k] = obj[k]
} }
// 点击时强制打开 // 点击时强制打开
@ -281,8 +319,7 @@ const getData = () => {
append_space_to_content: 'complete', append_space_to_content: 'complete',
handle_statuss: alarmHandleStatuss.value, handle_statuss: alarmHandleStatuss.value,
recovery_statuss: alarmRecoveryStatus.value, recovery_statuss: alarmRecoveryStatus.value,
dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(','), dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(',')
}, },
page: { page: {
page_size: 10, page_size: 10,
@ -290,14 +327,14 @@ const getData = () => {
} }
} }
publicInterface('/dcim/dems/devie_active_alarm', 'get_page', queryModel).then(res => { publicInterface('/dcim/dems/devie_active_alarm', 'get_page', queryModel).then(res => {
if(res && !res.data) { if (res && !res.data) {
tableData.splice(0) tableData.splice(0)
return return
} }
if(res && res.data) { if (res && res.data) {
res.data.item = res.data.item.filter((_: tableDataItemType) => _.level) res.data.item = res.data.item.filter((_: tableDataItemType) => _.level)
const lastTableData = [...tableData] const lastTableData = [...tableData]
let arr:tableDataItemType[] = res.data['item'].map((e:any) => ({ let arr: tableDataItemType[] = res.data['item'].map((e: any) => ({
...e, ...e,
id: e.id, id: e.id,
content: e.content, content: e.content,
@ -314,11 +351,14 @@ const getData = () => {
confirm_time: e.confirm_time, confirm_time: e.confirm_time,
reconfirmation_time_str: e.reconfirmation_time_str, reconfirmation_time_str: e.reconfirmation_time_str,
serial_no: e.serial_no, serial_no: e.serial_no,
remark: e.remark, remark: e.remark
})) }))
getVideos(arr.map(_ => _.device?.uid), arr.map(_ => _.id)) getVideos(
arr.map(_ => _.device?.uid),
arr.map(_ => _.id)
)
if (checkAll.value) { if (checkAll.value) {
arr = arr.map((e:any) => ({ ...e, checked: e.confirm_status !== 'ok' })) arr = arr.map((e: any) => ({ ...e, checked: e.confirm_status !== 'ok' }))
} else if (lastTableData.length) { } else if (lastTableData.length) {
arr.map(e => { arr.map(e => {
const lastIndex = lastTableData.findIndex(item => item.id === e.id) const lastIndex = lastTableData.findIndex(item => item.id === e.id)
@ -336,10 +376,10 @@ const getData = () => {
// show: false, // show: false,
// data: {} // data: {}
// }) // })
const clickItem = (i:number) => { const clickItem = (i: number) => {
postMessageToParent({ postMessageToParent({
type: 'openRealTimeEventDetail', type: 'openRealTimeEventDetail',
currentAlarm: tableData[i], currentAlarm: tableData[i]
}) })
// 自己写的详情 // 自己写的详情
@ -357,15 +397,17 @@ const systemConstant = originStore.getOriginStore.user.systemConstant
const systemConfig = originStore.getOriginStore.user.systemConfig const systemConfig = originStore.getOriginStore.user.systemConfig
if (systemConstant['warn_levels']) { if (systemConstant['warn_levels']) {
select1.options = systemConstant['warn_levels'].filter((item: any) => item.value !== '').map((item: any) => { select1.options = systemConstant['warn_levels']
return { label: item.label, value: Number(item.value), number: 0, color: item.remark } .filter((item: any) => item.value !== '')
}) .map((item: any) => {
return { label: item.label, value: Number(item.value), number: 0, color: item.remark }
})
} }
let alarmHandleStatuss: Ref<any[]> = ref([]) let alarmHandleStatuss: Ref<any[]> = ref([])
let alarmRecoveryStatus: Ref<any[]> = ref([]) let alarmRecoveryStatus: Ref<any[]> = ref([])
let alarmConfirmStatus: Ref<any[]> = ref([]) let alarmConfirmStatus: Ref<any[]> = ref([])
if(systemConfig) { if (systemConfig) {
if (systemConfig['active_alarm_level']) { if (systemConfig['active_alarm_level']) {
for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) { for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) {
select1.value.push(i + 1) select1.value.push(i + 1)
@ -383,9 +425,12 @@ if(systemConfig) {
} }
} }
watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => { watch(
getData() () => select1.value.join('&&') + select2.value.join('&&'),
}) v => {
getData()
}
)
// const modalV1Obj = reactive({ // const modalV1Obj = reactive({
// show: false, // show: false,
@ -401,16 +446,16 @@ watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => {
// singleIds: [], // singleIds: [],
// }) // })
const clickBatch = () => { const clickBatch = () => {
if(!tableData.filter(_ => _.checked).length) { if (!tableData.filter(_ => _.checked).length) {
window['$message'].warning('请先选择数据') window['$message'].warning('请先选择数据')
return return
} }
let selectIds = tableData.filter(_ => _.checked && _.confirm_status !== 'ok').map(_ => _.id) let selectIds = tableData.filter(_ => _.checked && _.confirm_status !== 'ok').map(_ => _.id)
if(!selectIds.length) return if (!selectIds.length) return
postMessageToParent({ postMessageToParent({
type: 'openRealTimeEventDialog', type: 'openRealTimeEventDialog',
multipleConfirm: true, multipleConfirm: true,
selectIds, selectIds
}) })
// Object.assign(modalV1Obj, { // Object.assign(modalV1Obj, {
// show: true, // show: true,
@ -426,8 +471,8 @@ const clickBatch = () => {
// }) // })
} }
getMessageByParent('', (e) => { getMessageByParent('', e => {
if(e.data.type === 'openRealTimeEventDialog_confirmed' && e.data.page === 'customLargeScreen') { if (e.data.type === 'openRealTimeEventDialog_confirmed' && e.data.page === 'customLargeScreen') {
console.log('openRealTimeEventDialog_confirmed') console.log('openRealTimeEventDialog_confirmed')
getData() getData()
} }
@ -436,7 +481,7 @@ const clickSingle = (id: number) => {
postMessageToParent({ postMessageToParent({
type: 'openRealTimeEventDialog', type: 'openRealTimeEventDialog',
multipleConfirm: false, multipleConfirm: false,
selectIds: [id], selectIds: [id]
}) })
// 自己写的弹窗 // 自己写的弹窗
@ -468,7 +513,7 @@ const clickSingle = (id: number) => {
// }) // })
// } // }
const jumpTo = (row:any) => { const jumpTo = (row: any) => {
if (row.space && row.space.space_type !== 'device') { if (row.space && row.space.space_type !== 'device') {
publicInterface('/dcim/space_page', 'get', { space_id: row.space_id, order: 'sort,id asc' }).then(res => { publicInterface('/dcim/space_page', 'get', { space_id: row.space_id, order: 'sort,id asc' }).then(res => {
if (res && res.data && res.data.length) { if (res && res.data && res.data.length) {
@ -476,13 +521,11 @@ const jumpTo = (row:any) => {
type: 'changeRouterV1', type: 'changeRouterV1',
url: `/dynamicRing/schematicDiagram/${res.data[0].id}` url: `/dynamicRing/schematicDiagram/${res.data[0].id}`
}) })
} } else {
else {
window['$message'].warning('所选节点没有配置页面') window['$message'].warning('所选节点没有配置页面')
} }
}) })
} } else {
else {
window['$message'].warning('所选节点没有配置页面') window['$message'].warning('所选节点没有配置页面')
} }
} }
@ -490,29 +533,39 @@ const jumpTo = (row:any) => {
const jumpMore = () => { const jumpMore = () => {
postMessageToParent({ postMessageToParent({
type: 'changeRouterV1', type: 'changeRouterV1',
url: `/alarmManage/monitorAlarm` url: `/alarmManage/monitorAlarm`,
query:{dems_device_point_signal_ids:props.chartConfig.customData?.dems_device_point_signal_ids}
}) })
} }
let timer:unknown let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit, props.chartConfig.customData?.space_complete_id].join('&&'), v => { watch(
if(!isPreview()) return () =>
if(props.chartConfig.request.requestInterval) { [
if(timer) clearInterval(timer as number) props.chartConfig.request.requestInterval,
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} props.chartConfig.request.requestIntervalUnit,
const unit = obj.unit props.chartConfig.customData?.space_complete_id
const number = unit * props.chartConfig.request.requestInterval ].join('&&'),
timer = setInterval(() => { v => {
getData() if (!isPreview()) return
}, number) if (props.chartConfig.request.requestInterval) {
if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
} }
}) )
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
getData() getData()
}) })
if(!isPreview()) return if (!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {
@ -549,18 +602,18 @@ onUnmounted(() => {
animation: rotate 1s linear infinite; animation: rotate 1s linear infinite;
} }
.mr5{ .mr5 {
margin-right: 5px; margin-right: 5px;
} }
.mr10{ .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.textEllipsis{ .textEllipsis {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.emptyBox{ .emptyBox {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
@ -568,13 +621,13 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
} }
.itemBox{ .itemBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
.item{ .item {
flex: none; flex: none;
height: 30px; height: 30px;
display: flex; display: flex;
@ -582,7 +635,7 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
padding: 0 10px; padding: 0 10px;
margin: 3px 0; margin: 3px 0;
background: rgba(65,150,255,.05); background: rgba(65, 150, 255, 0.05);
cursor: pointer; cursor: pointer;
} }
} }

2
src/packages/components/CustomComponents/CustomComponents/AlarmLevelStatistic/configData.vue
View File

@ -3,7 +3,7 @@
<setting-item-box name="标题" :alone="true"> <setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID(双引号包裹内容+英文逗号隔开)" :alone="true"> <setting-item-box name="测点编码(双引号包裹内容+英文逗号隔开)" :alone="true">
<n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<!-- <setting-item-box name="空间ID" :alone="true"> <!-- <setting-item-box name="空间ID" :alone="true">

563
src/packages/components/CustomComponents/CustomComponents/AlarmLevelStatistic/index.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto"> <BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
<div class="tab-item"> <div class="tab-item">
<span class="change_tab" :class="{'change_tab--active': tab === 0}" @click="changeTab(0)">今日</span> <span class="change_tab" :class="{ 'change_tab--active': tab === 0 }" @click="changeTab(0)">今日</span>
<span class="change_tab" :class="{'change_tab--active': tab === 1}" @click="changeTab(1)">本月</span> <span class="change_tab" :class="{ 'change_tab--active': tab === 1 }" @click="changeTab(1)">本月</span>
<span class="change_tab" :class="{'change_tab--active': tab === 2}" @click="changeTab(2)">年度</span> <span class="change_tab" :class="{ 'change_tab--active': tab === 2 }" @click="changeTab(2)">年度</span>
</div> </div>
<div class="dynamic-component-main"> <div class="dynamic-component-main">
<div class="system-introduction"> <div class="system-introduction">
@ -16,24 +16,12 @@
height="100%" height="100%"
> >
<defs> <defs>
<linearGradient <linearGradient id="linear-gradient" x1="3" y1="25.85" x2="70" y2="25.85" gradientUnits="userSpaceOnUse">
id="linear-gradient"
x1="3"
y1="25.85"
x2="70"
y2="25.85"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#0bd1ff" stop-opacity="0" /> <stop offset="0" stop-color="#0bd1ff" stop-opacity="0" />
<stop offset="0.5" stop-color="#0bd1ff" stop-opacity="0.8" /> <stop offset="0.5" stop-color="#0bd1ff" stop-opacity="0.8" />
<stop offset="1" stop-color="#0bd1ff" stop-opacity="0" /> <stop offset="1" stop-color="#0bd1ff" stop-opacity="0" />
</linearGradient> </linearGradient>
<linearGradient <linearGradient id="linear-gradient-2" y1="194.15" y2="194.15" xlink:href="#linear-gradient" />
id="linear-gradient-2"
y1="194.15"
y2="194.15"
xlink:href="#linear-gradient"
/>
<linearGradient <linearGradient
id="未命名的渐变_5" id="未命名的渐变_5"
x1="-3804" x1="-3804"
@ -82,33 +70,33 @@
<rect class="cls-2" x="255" y="137" width="120" height="20" /> <rect class="cls-2" x="255" y="137" width="120" height="20" />
<rect class="cls-3" x="255" y="91" width="120" height="20" /> <rect class="cls-3" x="255" y="91" width="120" height="20" />
<rect class="cls-4" x="255" y="45" width="120" height="20" /> <rect class="cls-4" x="255" y="45" width="120" height="20" />
<text class="cls-5" transform="translate(255 177)">{{ commonName }}</text> <text
v-for="(item, index) in warn_levels"
class="cls-5"
:transform="translateList[index]"
:key="index"
>
{{ item.label }}
</text>
<!-- <text class="cls-5" transform="translate(255 177)">{{ commonName }}</text>
<text class="cls-5" transform="translate(255 131)">{{ importantName }}</text> <text class="cls-5" transform="translate(255 131)">{{ importantName }}</text>
<text class="cls-5" transform="translate(255 85)">{{ seriousName }}</text> <text class="cls-5" transform="translate(255 85)">{{ seriousName }}</text>
<text class="cls-5" transform="translate(255 39)">{{ urgentName }}</text> <text class="cls-5" transform="translate(255 39)">{{ urgentName }}</text> -->
<text class="cls-7" transform="translate(308.3 199)"> <text class="cls-7" transform="translate(308.3 199)">
{{ alarmLevel["level_4"] }} {{ alarmLevel['level_4'] }}
</text> </text>
<text class="cls-7" transform="translate(308.3 153)"> <text class="cls-7" transform="translate(308.3 153)">
{{ alarmLevel["level_3"] }} {{ alarmLevel['level_3'] }}
</text> </text>
<text class="cls-7" transform="translate(308.3 107)"> <text class="cls-7" transform="translate(308.3 107)">
{{ alarmLevel["level_2"] }} {{ alarmLevel['level_2'] }}
</text> </text>
<text class="cls-7" transform="translate(308.3 61)"> <text class="cls-7" transform="translate(308.3 61)">
{{ alarmLevel["level_1"] }} {{ alarmLevel['level_1'] }}
</text> </text>
<rect <rect class="cls-8" x="12.5" y="30.5" width="49" height="159" />
class="cls-8" <path class="cls-9" d="M61,31V189H13V31H61m1-1H12V190H62V30Z" />
x="12.5"
y="30.5"
width="49"
height="159"
/>
<path
class="cls-9"
d="M61,31V189H13V31H61m1-1H12V190H62V30Z"
/>
<g class="cls-10"> <g class="cls-10">
<polygon <polygon
class="cls-11" class="cls-11"
@ -137,233 +125,63 @@
height="1" height="1"
transform="translate(-48.5 171.5) rotate(-90)" transform="translate(-48.5 171.5) rotate(-90)"
/> />
<polygon <polygon class="cls-9" points="8 36.29 0 28.29 0 29.71 8 37.71 8 36.29" />
class="cls-9" <polygon class="cls-9" points="8 42 0 34 0 35.41 8 43.41 8 42" />
points="8 36.29 0 28.29 0 29.71 8 37.71 8 36.29" <polygon class="cls-9" points="8 47.71 0 39.71 0 41.12 8 49.12 8 47.71" />
/> <polygon class="cls-9" points="8 53.41 0 45.41 0 46.83 8 54.83 8 53.41" />
<polygon <polygon class="cls-9" points="8 59.12 0 51.12 0 52.53 8 60.53 8 59.12" />
class="cls-9" <polygon class="cls-9" points="8 64.83 0 56.83 0 58.24 8 66.24 8 64.83" />
points="8 42 0 34 0 35.41 8 43.41 8 42" <polygon class="cls-9" points="8 70.53 0 62.53 0 63.95 8 71.95 8 70.53" />
/> <polygon class="cls-9" points="8 76.24 0 68.24 0 69.66 8 77.66 8 76.24" />
<polygon <polygon class="cls-9" points="8 81.95 0 73.95 0 75.36 8 83.36 8 81.95" />
class="cls-9" <polygon class="cls-9" points="8 87.66 0 79.66 0 81.07 8 89.07 8 87.66" />
points="8 47.71 0 39.71 0 41.12 8 49.12 8 47.71" <polygon class="cls-9" points="8 93.36 0 85.36 0 86.78 8 94.78 8 93.36" />
/> <polygon class="cls-9" points="8 99.07 0 91.07 0 92.48 8 100.48 8 99.07" />
<polygon <polygon class="cls-9" points="8 104.78 0 96.78 0 98.19 8 106.19 8 104.78" />
class="cls-9" <polygon class="cls-9" points="8 110.48 0 102.48 0 103.9 8 111.9 8 110.48" />
points="8 53.41 0 45.41 0 46.83 8 54.83 8 53.41" <polygon class="cls-9" points="8 116.19 0 108.19 0 109.61 8 117.61 8 116.19" />
/> <polygon class="cls-9" points="8 121.9 0 113.9 0 115.31 8 123.31 8 121.9" />
<polygon <polygon class="cls-9" points="8 127.61 0 119.61 0 121.02 8 129.02 8 127.61" />
class="cls-9" <polygon class="cls-9" points="8 133.31 0 125.31 0 126.73 8 134.73 8 133.31" />
points="8 59.12 0 51.12 0 52.53 8 60.53 8 59.12" <polygon class="cls-9" points="8 139.02 0 131.02 0 132.43 8 140.43 8 139.02" />
/> <polygon class="cls-9" points="8 144.73 0 136.73 0 138.14 8 146.14 8 144.73" />
<polygon <polygon class="cls-9" points="8 150.43 0 142.43 0 143.85 8 151.85 8 150.43" />
class="cls-9" <polygon class="cls-9" points="8 156.14 0 148.14 0 149.56 8 157.56 8 156.14" />
points="8 64.83 0 56.83 0 58.24 8 66.24 8 64.83" <polygon class="cls-9" points="8 161.85 0 153.85 0 155.26 8 163.26 8 161.85" />
/> <polygon class="cls-9" points="8 167.56 0 159.56 0 160.97 8 168.97 8 167.56" />
<polygon <polygon class="cls-9" points="8 173.26 0 165.26 0 166.68 8 174.68 8 173.26" />
class="cls-9" <polygon class="cls-9" points="8 178.97 0 170.97 0 172.38 8 180.38 8 178.97" />
points="8 70.53 0 62.53 0 63.95 8 71.95 8 70.53" <polygon class="cls-9" points="8 184.68 0 176.68 0 178.09 8 186.09 8 184.68" />
/> <polygon class="cls-9" points="8 190.38 0 182.38 0 183.8 8 191.8 8 190.38" />
<polygon <polygon class="cls-9" points="74 36.29 66 28.29 66 29.71 74 37.71 74 36.29" />
class="cls-9" <polygon class="cls-9" points="74 42 66 34 66 35.41 74 43.41 74 42" />
points="8 76.24 0 68.24 0 69.66 8 77.66 8 76.24" <polygon class="cls-9" points="74 47.71 66 39.71 66 41.12 74 49.12 74 47.71" />
/> <polygon class="cls-9" points="74 53.41 66 45.41 66 46.83 74 54.83 74 53.41" />
<polygon <polygon class="cls-9" points="74 59.12 66 51.12 66 52.53 74 60.53 74 59.12" />
class="cls-9" <polygon class="cls-9" points="74 64.83 66 56.83 66 58.24 74 66.24 74 64.83" />
points="8 81.95 0 73.95 0 75.36 8 83.36 8 81.95" <polygon class="cls-9" points="74 70.53 66 62.53 66 63.95 74 71.95 74 70.53" />
/> <polygon class="cls-9" points="74 76.24 66 68.24 66 69.66 74 77.66 74 76.24" />
<polygon <polygon class="cls-9" points="74 81.95 66 73.95 66 75.36 74 83.36 74 81.95" />
class="cls-9" <polygon class="cls-9" points="74 87.66 66 79.66 66 81.07 74 89.07 74 87.66" />
points="8 87.66 0 79.66 0 81.07 8 89.07 8 87.66" <polygon class="cls-9" points="74 93.36 66 85.36 66 86.78 74 94.78 74 93.36" />
/> <polygon class="cls-9" points="74 99.07 66 91.07 66 92.48 74 100.48 74 99.07" />
<polygon <polygon class="cls-9" points="74 104.78 66 96.78 66 98.19 74 106.19 74 104.78" />
class="cls-9" <polygon class="cls-9" points="74 110.48 66 102.48 66 103.9 74 111.9 74 110.48" />
points="8 93.36 0 85.36 0 86.78 8 94.78 8 93.36" <polygon class="cls-9" points="74 116.19 66 108.19 66 109.61 74 117.61 74 116.19" />
/> <polygon class="cls-9" points="74 121.9 66 113.9 66 115.31 74 123.31 74 121.9" />
<polygon <polygon class="cls-9" points="74 127.61 66 119.61 66 121.02 74 129.02 74 127.61" />
class="cls-9" <polygon class="cls-9" points="74 133.31 66 125.31 66 126.73 74 134.73 74 133.31" />
points="8 99.07 0 91.07 0 92.48 8 100.48 8 99.07" <polygon class="cls-9" points="74 139.02 66 131.02 66 132.43 74 140.43 74 139.02" />
/> <polygon class="cls-9" points="74 144.73 66 136.73 66 138.14 74 146.14 74 144.73" />
<polygon <polygon class="cls-9" points="74 150.43 66 142.43 66 143.85 74 151.85 74 150.43" />
class="cls-9" <polygon class="cls-9" points="74 156.14 66 148.14 66 149.56 74 157.56 74 156.14" />
points="8 104.78 0 96.78 0 98.19 8 106.19 8 104.78" <polygon class="cls-9" points="74 161.85 66 153.85 66 155.26 74 163.26 74 161.85" />
/> <polygon class="cls-9" points="74 167.56 66 159.56 66 160.97 74 168.97 74 167.56" />
<polygon <polygon class="cls-9" points="74 173.26 66 165.26 66 166.68 74 174.68 74 173.26" />
class="cls-9" <polygon class="cls-9" points="74 178.97 66 170.97 66 172.38 74 180.38 74 178.97" />
points="8 110.48 0 102.48 0 103.9 8 111.9 8 110.48" <polygon class="cls-9" points="74 184.68 66 176.68 66 178.09 74 186.09 74 184.68" />
/> <polygon class="cls-9" points="74 190.38 66 182.38 66 183.8 74 191.8 74 190.38" />
<polygon <text class="cls-15 cls-22" transform="translate(35 60.74)">告警总数</text>
class="cls-9"
points="8 116.19 0 108.19 0 109.61 8 117.61 8 116.19"
/>
<polygon
class="cls-9"
points="8 121.9 0 113.9 0 115.31 8 123.31 8 121.9"
/>
<polygon
class="cls-9"
points="8 127.61 0 119.61 0 121.02 8 129.02 8 127.61"
/>
<polygon
class="cls-9"
points="8 133.31 0 125.31 0 126.73 8 134.73 8 133.31"
/>
<polygon
class="cls-9"
points="8 139.02 0 131.02 0 132.43 8 140.43 8 139.02"
/>
<polygon
class="cls-9"
points="8 144.73 0 136.73 0 138.14 8 146.14 8 144.73"
/>
<polygon
class="cls-9"
points="8 150.43 0 142.43 0 143.85 8 151.85 8 150.43"
/>
<polygon
class="cls-9"
points="8 156.14 0 148.14 0 149.56 8 157.56 8 156.14"
/>
<polygon
class="cls-9"
points="8 161.85 0 153.85 0 155.26 8 163.26 8 161.85"
/>
<polygon
class="cls-9"
points="8 167.56 0 159.56 0 160.97 8 168.97 8 167.56"
/>
<polygon
class="cls-9"
points="8 173.26 0 165.26 0 166.68 8 174.68 8 173.26"
/>
<polygon
class="cls-9"
points="8 178.97 0 170.97 0 172.38 8 180.38 8 178.97"
/>
<polygon
class="cls-9"
points="8 184.68 0 176.68 0 178.09 8 186.09 8 184.68"
/>
<polygon
class="cls-9"
points="8 190.38 0 182.38 0 183.8 8 191.8 8 190.38"
/>
<polygon
class="cls-9"
points="74 36.29 66 28.29 66 29.71 74 37.71 74 36.29"
/>
<polygon
class="cls-9"
points="74 42 66 34 66 35.41 74 43.41 74 42"
/>
<polygon
class="cls-9"
points="74 47.71 66 39.71 66 41.12 74 49.12 74 47.71"
/>
<polygon
class="cls-9"
points="74 53.41 66 45.41 66 46.83 74 54.83 74 53.41"
/>
<polygon
class="cls-9"
points="74 59.12 66 51.12 66 52.53 74 60.53 74 59.12"
/>
<polygon
class="cls-9"
points="74 64.83 66 56.83 66 58.24 74 66.24 74 64.83"
/>
<polygon
class="cls-9"
points="74 70.53 66 62.53 66 63.95 74 71.95 74 70.53"
/>
<polygon
class="cls-9"
points="74 76.24 66 68.24 66 69.66 74 77.66 74 76.24"
/>
<polygon
class="cls-9"
points="74 81.95 66 73.95 66 75.36 74 83.36 74 81.95"
/>
<polygon
class="cls-9"
points="74 87.66 66 79.66 66 81.07 74 89.07 74 87.66"
/>
<polygon
class="cls-9"
points="74 93.36 66 85.36 66 86.78 74 94.78 74 93.36"
/>
<polygon
class="cls-9"
points="74 99.07 66 91.07 66 92.48 74 100.48 74 99.07"
/>
<polygon
class="cls-9"
points="74 104.78 66 96.78 66 98.19 74 106.19 74 104.78"
/>
<polygon
class="cls-9"
points="74 110.48 66 102.48 66 103.9 74 111.9 74 110.48"
/>
<polygon
class="cls-9"
points="74 116.19 66 108.19 66 109.61 74 117.61 74 116.19"
/>
<polygon
class="cls-9"
points="74 121.9 66 113.9 66 115.31 74 123.31 74 121.9"
/>
<polygon
class="cls-9"
points="74 127.61 66 119.61 66 121.02 74 129.02 74 127.61"
/>
<polygon
class="cls-9"
points="74 133.31 66 125.31 66 126.73 74 134.73 74 133.31"
/>
<polygon
class="cls-9"
points="74 139.02 66 131.02 66 132.43 74 140.43 74 139.02"
/>
<polygon
class="cls-9"
points="74 144.73 66 136.73 66 138.14 74 146.14 74 144.73"
/>
<polygon
class="cls-9"
points="74 150.43 66 142.43 66 143.85 74 151.85 74 150.43"
/>
<polygon
class="cls-9"
points="74 156.14 66 148.14 66 149.56 74 157.56 74 156.14"
/>
<polygon
class="cls-9"
points="74 161.85 66 153.85 66 155.26 74 163.26 74 161.85"
/>
<polygon
class="cls-9"
points="74 167.56 66 159.56 66 160.97 74 168.97 74 167.56"
/>
<polygon
class="cls-9"
points="74 173.26 66 165.26 66 166.68 74 174.68 74 173.26"
/>
<polygon
class="cls-9"
points="74 178.97 66 170.97 66 172.38 74 180.38 74 178.97"
/>
<polygon
class="cls-9"
points="74 184.68 66 176.68 66 178.09 74 186.09 74 184.68"
/>
<polygon
class="cls-9"
points="74 190.38 66 182.38 66 183.8 74 191.8 74 190.38"
/>
<text class="cls-15 cls-22" transform="translate(35 60.74)">
告警总数
</text>
<rect class="cls-9" x="235" width="1" height="220" /> <rect class="cls-9" x="235" width="1" height="220" />
<rect class="cls-9" x="94" y="26" width="1" height="20" /> <rect class="cls-9" x="94" y="26" width="1" height="20" />
<rect class="cls-9" x="104" y="26" width="1" height="168" /> <rect class="cls-9" x="104" y="26" width="1" height="168" />
@ -390,21 +208,12 @@
points="36 0 36 22 37 22 37 1 395 1 395 219 37 219 37 198 36 198 36 220 396 220 396 0 36 0" points="36 0 36 22 37 22 37 1 395 1 395 219 37 219 37 198 36 198 36 220 396 220 396 0 36 0"
/> />
<rect class="cls-8" x="85" y="81" width="138" height="58" /> <rect class="cls-8" x="85" y="81" width="138" height="58" />
<path <path class="cls-9" d="M222,82v56H86V82H222m2-2H84v60H224V80Z" />
class="cls-9"
d="M222,82v56H86V82H222m2-2H84v60H224V80Z"
/>
<text class="cls-19" transform="translate(100.63 122)"> <text class="cls-19" transform="translate(100.63 122)">
{{ alarmLevelTotal }} {{ alarmLevelTotal }}
</text> </text>
<rect class="cls-20" x="109.5" y="80" width="80" height="2" /> <rect class="cls-20" x="109.5" y="80" width="80" height="2" />
<rect <rect class="cls-21" x="109.5" y="138" width="80" height="2" />
class="cls-21"
x="109.5"
y="138"
width="80"
height="2"
/>
</g> </g>
</g> </g>
</g> </g>
@ -416,7 +225,19 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref,Ref,computed } from 'vue' import {
PropType,
shallowReactive,
watch,
toRefs,
reactive,
onMounted,
onUnmounted,
nextTick,
ref,
Ref,
computed
} from 'vue'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@ -425,23 +246,37 @@ import BorderBox from '../components/BorderBox.vue'
import { customData as customDataConfig } from './config' import { customData as customDataConfig } from './config'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import {isPreview} from '@/utils' import { isPreview } from '@/utils'
import {graphic} from "echarts"; import { graphic } from 'echarts'
import {cloneDeep} from 'lodash' import { cloneDeep } from 'lodash'
import moment from "moment" import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
import { useOriginStore } from '@/store/modules/originStore/originStore'
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType>,
required: true required: true
}, }
}) })
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
const originStore = useOriginStore()
const systemConstant = originStore.getOriginStore.user.systemConstant
const warn_levels = ref([])
if (systemConstant['warn_levels']) {
warn_levels.value = systemConstant['warn_levels']
.filter((item: any) => item.value !== '')
.map((item: any) => {
return { label: item.label, value: Number(item.value), number: 0, color: item.remark }
})
}
// 只取前四个
warn_levels.value = warn_levels.value.slice(0,warn_levels.value.length-1)
// 倒序
const translateList = ['translate(255 39)', 'translate(255 85)', 'translate(255 131)', 'translate(255 177)']
const tab = ref(0) const tab = ref(0)
const alarmLevelTotal = ref(0) const alarmLevelTotal = ref(0)
const commonName = ref('一般') const commonName = ref('一般')
@ -449,89 +284,91 @@ const importantName = ref('重要')
const seriousName = ref('严重') const seriousName = ref('严重')
const urgentName = ref('紧急') const urgentName = ref('紧急')
const alarmLevel = ref({ const alarmLevel = ref({
level_1: 0, level_1: 0,
level_2: 0, level_2: 0,
level_3: 0, level_3: 0,
level_4: 0 level_4: 0
}) })
const alarmData = ref<any>({}) const alarmData = ref<any>({})
const getStyle = (radius: number) => { const getStyle = (radius: number) => {
return { return {
borderRadius: `${radius}px`, borderRadius: `${radius}px`,
overflow: 'hidden', overflow: 'hidden'
} }
} }
const customData: Ref<typeof customDataConfig> = computed(() => { const customData: Ref<typeof customDataConfig> = computed(() => {
return props.chartConfig.customData as typeof customDataConfig return props.chartConfig.customData as typeof customDataConfig
}) })
const changeTab = (flag: number)=>{ const changeTab = (flag: number) => {
tab.value = flag tab.value = flag
if (tab.value === 0) { if (tab.value === 0) {
alarmLevel.value = alarmData.value ? alarmData.value['day'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 } alarmLevel.value = alarmData.value ? alarmData.value['day'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 }
} else if (tab.value === 1) { } else if (tab.value === 1) {
alarmLevel.value = alarmData.value ? alarmData.value['month'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 } alarmLevel.value = alarmData.value ? alarmData.value['month'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 }
} else if (tab.value === 2) { } else if (tab.value === 2) {
alarmLevel.value = alarmData.value ? alarmData.value['year'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 } alarmLevel.value = alarmData.value ? alarmData.value['year'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 }
} }
console.log(alarmLevel.value,'level_4')
alarmLevelTotal.value = Number(alarmLevel.value['level_1']) + Number(alarmLevel.value['level_2']) + Number(alarmLevel.value['level_3'] + Number(alarmLevel.value['level_4']))
alarmLevelTotal.value =
Number(alarmLevel.value['level_1']) +
Number(alarmLevel.value['level_2']) +
Number(alarmLevel.value['level_3'] + Number(alarmLevel.value['level_4']))
} }
console.log(props.chartConfig,'chartConfig');
console.log(customData.value,'customData')
const getData = () => { const getData = () => {
const params = { const params = {
signal_ids:customData.value.signal_ids.length?customData.value.signal_ids.split(','):[], signal_ids: customData.value.signal_ids.length ? customData.value.signal_ids.split(',') : [],
alarmConfirmStatus:customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus : [], alarmConfirmStatus: customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus : [],
alarmRecoveryStatus : customData.value.alarmRecoveryStatus.length ? customData.value.alarmRecoveryStatus : [] alarmRecoveryStatus: customData.value.alarmRecoveryStatus.length ? customData.value.alarmRecoveryStatus : []
}
publicInterface('/dcim/dems/devie_history_alarm', 'alarm_statistical_by_time', params).then((res:any) => {
if (res.data) {
alarmData.value = res.data
console.log(alarmData.value,'getData_alarmLevel')
changeTab(tab.value)
}
})
}
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return
console.log(props,'props')
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
} }
}) publicInterface('/dcim/dems/devie_history_alarm', 'alarm_statistical_by_time', params).then((res: any) => {
if (res.data) {
alarmData.value = res.data
changeTab(tab.value)
}
})
}
let timer: unknown
watch(
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
v => {
if (!isPreview()) return
console.log(props, 'props')
if (props.chartConfig.request.requestInterval) {
if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
}
)
// 计算属性，用于拼接并排除 title // 计算属性，用于拼接并排除 title
const watchedProperties = computed(() => { const watchedProperties = computed(() => {
return `${customData.value.alarmConfirmStatus.join(',')}-${customData.value.alarmRecoveryStatus.join(',')}-${customData.value.signal_ids}`; return `${customData.value.alarmConfirmStatus.join(',')}-${customData.value.alarmRecoveryStatus.join(',')}-${
}); customData.value.signal_ids
}`
})
watch( watch(
watchedProperties, watchedProperties,
(newVal, oldVal) => { (newVal, oldVal) => {
getData() getData()
}, },
{ deep: true, } { deep: true }
); )
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
getData() getData()
}) })
if(!isPreview()) return if (!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {
@ -555,29 +392,29 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-item { .tab-item {
position: absolute; position: absolute;
top: 0; top: 0;
right: 10px; right: 10px;
padding-right: 10px; padding-right: 10px;
color: #fff; color: #fff;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
.change_tab { .change_tab {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 4px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: themed('dynamicComponentTabColor'); color: themed('dynamicComponentTabColor');
font-family: 'PingFang-SC-Regular'; font-family: 'PingFang-SC-Regular';
&--active { &--active {
border-bottom: 1px solid #4196ff; border-bottom: 1px solid #4196ff;
color: #4196ff; color: #4196ff;
font-family: 'PingFang-SC-Bold'; font-family: 'PingFang-SC-Bold';
}
}
} }
.dynamic-component-main{ }
width:100%; }
.dynamic-component-main {
width: 100%;
padding: 10px; padding: 10px;
} }
// @import "./index.scss"; // @import "./index.scss";
@ -597,7 +434,6 @@ onUnmounted(() => {
.cls-5 { .cls-5 {
font-size: 14px; font-size: 14px;
fill: #fff; fill: #fff;
} }
.cls-15, .cls-15,
.cls-5 { .cls-5 {
@ -658,7 +494,6 @@ onUnmounted(() => {
.cls-19 { .cls-19 {
fill: #fff; fill: #fff;
font-size: 30px; font-size: 30px;
} }
.cls-20 { .cls-20 {
@ -673,6 +508,6 @@ onUnmounted(() => {
glyph-orientation-vertical: 0deg; glyph-orientation-vertical: 0deg;
font-size: 18px; font-size: 18px;
letter-spacing: 0.3em; letter-spacing: 0.3em;
fill:#fff; fill: #fff;
} }
</style> </style>

2
src/packages/components/CustomComponents/CustomComponents/AlarmTrend/configData.vue
View File

@ -3,7 +3,7 @@
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="告警确认状态" :alone="true"> <setting-item-box name="告警确认状态" :alone="true">

350
src/packages/components/CustomComponents/CustomComponents/AlarmTrend/index.vue
View File

@ -1,12 +1,11 @@
<template> <template>
<div style="overflow: visible;"> <div style="overflow: visible">
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto"> <BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
<div class="tab-item"> <div class="tab-item">
<span class="change_tab" :class="{'change_tab--active': tab === 0}" @click="changeTab(0)">月</span> <span class="change_tab" :class="{ 'change_tab--active': tab === 0 }" @click="changeTab(0)">月</span>
<span class="change_tab" :class="{'change_tab--active': tab === 1}" @click="changeTab(1)">年</span> <span class="change_tab" :class="{ 'change_tab--active': tab === 1 }" @click="changeTab(1)">年</span>
</div> </div>
<v-chart ref="vChartRef" :option="chartOption" autoresize></v-chart> <v-chart ref="vChartRef" :option="chartOption" autoresize></v-chart>
</BorderBox> </BorderBox>
</div> </div>
</template> </template>
@ -14,14 +13,13 @@
<script setup lang="ts"> <script setup lang="ts">
import BorderBox from '../components/BorderBox.vue' import BorderBox from '../components/BorderBox.vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import {computed, PropType, Ref, onMounted, ref, watch, onUnmounted} from "vue"; import { computed, PropType, Ref, onMounted, ref, watch, onUnmounted } from 'vue'
import { customData as customDataConfig } from './config' import { customData as customDataConfig } from './config'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
import {isPreview} from '@/utils' import { isPreview } from '@/utils'
import moment from 'moment' import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
@ -33,7 +31,7 @@ const tab = ref(0)
const getStyle = (radius: number) => { const getStyle = (radius: number) => {
return { return {
borderRadius: `${radius}px`, borderRadius: `${radius}px`,
overflow: 'hidden', overflow: 'hidden'
} }
} }
@ -41,213 +39,205 @@ const customData: Ref<typeof customDataConfig> = computed(() => {
return props.chartConfig.customData as typeof customDataConfig return props.chartConfig.customData as typeof customDataConfig
}) })
const { signal_ids, alarmConfirmStatus, alarmRecoveryStatus, level } = customData.value
const {signal_ids,alarmConfirmStatus,alarmRecoveryStatus,level} = customData.value const changeTab = (flag: any) => {
const changeTab = (flag:any)=> {
tab.value = flag tab.value = flag
getData() getData()
} }
let chartOption: Ref<any> = ref({
let chartOption:Ref<any> = ref({ tooltip: {
tooltip: { trigger: 'axis',
trigger: 'axis', axisPointer: {
axisPointer: { type: 'line',
type: 'line', lineStyle: {
lineStyle: { color: '#27558e'
color: '#27558e'
}
},
},
grid: {
right: '2%',
top: '12%',
left: '2%',
bottom: '2%',
containLabel: true
},
color: ['#E5403D', '#EE7F57', '#EEC219', '#50AFCE', '#82C046'],
dataZoom:{
show: false,
height: 5,
xAxisIndex: [0],
bottom: 10,
showDetail: false,
showDataShadow: false,
borderColor: 'transparent',
textStyle: {
fontSize: 0
},
startValue: 0,
endValue: 5, // 从0开始的7个
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
handleSize: '0%',
handleStyle: {
color: '#d3dee5'
} }
}, }
legend: { },
data: [], grid: {
textStyle: { right: '2%',
fontSize: 12, top: '12%',
fontWeight: 'bolder', left: '2%',
color: '#ccc' bottom: '2%',
}, containLabel: true
// right: '5%',
// top: '10%',
// left: '5%',
// bottom: '15%',
// containLabel: true
},
color: ['#E5403D', '#EE7F57', '#EEC219', '#50AFCE', '#82C046'],
// dataZoom:{
// show: false,
// height: 5,
// xAxisIndex: [0],
// bottom: 10,
// showDetail: false,
// showDataShadow: false,
// borderColor: 'transparent',
// textStyle: {
// fontSize: 0
// },
// startValue: 0,
// endValue: 5, // 从0开始的7个
// backgroundColor: 'rgba(0,0,0,0)',
// borderWidth: 0,
// handleSize: '0%',
// handleStyle: {
// color: '#d3dee5'
// }
// },
legend: {
data: [],
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: '#ccc'
}
},
calculable: true,
xAxis: [
{
type: 'category',
name: '',
boundaryGap: false,
data: [],
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
// inside: false,
show: true,
textStyle: {
color: '#ccc',
}, },
calculable: true, formatter: function(value:any) {
xAxis: [ return value.length>8?value.slice(5):value
{
type: 'category',
name: '',
boundaryGap: false,
data: [],
axisLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#ccc',
fontWeight: 'normal',
fontSize: '12'
},
interval: 0
},
}
],
yAxis: [
{
type: 'value',
name: '',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#ccc'
}
},
axisLine: {
lineStyle: {
color: '#4196ff',
opacity: 0.2
}
},
splitLine: {
lineStyle: {
color: '#e0e0e0'
}
} }
} }
], }
series: [ ],
] yAxis: [
},) {
type: 'value',
name: '',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#ccc'
}
},
axisLine: {
lineStyle: {
color: '#4196ff',
opacity: 0.2
}
},
splitLine: {
lineStyle: {
color: '#e0e0e0'
}
}
}
],
series: []
})
const vChartRef = ref() const vChartRef = ref()
const getData = () => { const getData = () => {
let params:any = { let params: any = {
signal_ids:signal_ids.length?signal_ids.split(','):[], signal_ids: signal_ids.length ? signal_ids.split(',') : [],
alarmConfirmStatus, alarmConfirmStatus,
alarmRecoveryStatus, alarmRecoveryStatus,
level level
} }
tab.value===0?params['before_day'] = 30:params['before_month'] = 12 tab.value === 0 ? (params['before_day'] = 30) : (params['before_month'] = 12)
publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', params).then((response:any) => { publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', params).then((response: any) => {
let res = response?.data let res = response?.data
console.log(res,'res');
if (res && res['series']) { if (res && res['series']) {
chartOption.value.xAxis[0]['data'] = res['legend'] chartOption.value.xAxis[0]['data'] = res['legend']
chartOption.value.legend.data = [] chartOption.value.legend.data = []
chartOption.value.series = [] chartOption.value.series = []
for (let i = 0; i < res['series'].length; i++) { for (let i = 0; i < res['series'].length; i++) {
chartOption.value.series.push( chartOption.value.series.push({
{ name: res['series'][i]['name'],
name: res['series'][i]['name'], type: 'line',
type: 'line', smooth: true,
smooth: true, showSymbol: true,
showSymbol: true, symbol: 'circle',
symbol: 'circle', data: res['series'][i]['data']
data: res['series'][i]['data'] })
} chartOption.value.legend.data.push({ name: res['series'][i]['name'] })
) }
chartOption.value.legend.data.push({ name: res['series'][i]['name'] }) }
} })
console.log(chartOption.value,'chartOption');
}
})
} }
let timer: unknown
watch(
let timer:unknown () => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => { v => {
if(!isPreview()) return if (!isPreview()) return
if(props.chartConfig.request.requestInterval) { if (props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number) if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => { timer = setInterval(() => {}, number)
}, number) }
} }
}) )
onMounted(() => { onMounted(() => {
getData() getData()
if(!isPreview()) return if (!isPreview()) return
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {}, number)
}, number)
}) })
onUnmounted(() => { onUnmounted(() => {
if(timer) clearInterval(timer as number) if (timer) clearInterval(timer as number)
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tab-item { .tab-item {
position: absolute; position: absolute;
top: 0; top: 0;
right: 10px; right: 10px;
padding-right: 10px; padding-right: 10px;
color: #fff; color: #fff;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
.change_tab { .change_tab {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 4px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
color: themed('dynamicComponentTabColor'); color: themed('dynamicComponentTabColor');
font-family: 'PingFang-SC-Regular'; font-family: 'PingFang-SC-Regular';
&--active { &--active {
border-bottom: 1px solid #4196ff; border-bottom: 1px solid #4196ff;
color: #4196ff; color: #4196ff;
font-family: 'PingFang-SC-Bold'; font-family: 'PingFang-SC-Bold';
}
}
} }
.box{ }
}
.box {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; overflow: visible;
position: relative; position: relative;
.radio{ .radio {
position: absolute; position: absolute;
right: 0; right: 0;
top: -40px; top: -40px;

25
src/packages/components/CustomComponents/CustomComponents/ClassifiedStatistic/configData.vue
View File

@ -1,11 +1,18 @@
<template> <template>
<n-space vertical> <n-space vertical>
<setting-item-box name="标题" :alone="true"> <setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.title" size="small" placeholder="请输入" />
</setting-item-box> </setting-item-box>
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
<n-select v-model:value="props.customData.currentSource" :options="multipleSourceOptions" size="small"/> <n-select v-model:value="props.customData.currentSource" :options="multipleSourceOptions" size="small" />
</setting-item-box> </setting-item-box>
<setting-item-box
v-if="props.customData.currentSource === 'device'"
name="分类编码（多个编码使用英文逗号分隔）"
:alone="true"
>
<n-input v-model:value="props.customData.device_codes" size="small" placeholder="请输入" />
</setting-item-box>
</n-space> </n-space>
</template> </template>
@ -15,16 +22,14 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request']) const props = defineProps(['customData', 'request'])
const multipleSourceOptions = [ const multipleSourceOptions = [
{ {
label: '配电设备', label: '动环设备',
value:'device' value: 'device'
}, },
{ {
label: 'IT设备', label: 'IT设备',
value:'IT' value: 'IT'
}, }
] ]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

272
src/packages/components/CustomComponents/CustomComponents/ClassifiedStatistic/index.vue
View File

@ -1,51 +1,73 @@
<template> <template>
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto"> <BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
<div class="container" v-if="type_count.length">
<div class="container">
<div class="classify" v-for="item in type_count" :key="item"> <div class="classify" v-for="item in type_count" :key="item">
<div class="img"> <div class="img">
<img v-if="props.chartConfig?.customData?.currentSource==='IT'" src="@/assets/images/chart/decorates/Base1.png" alt=""> <img
<img v-else src="@/assets/images/chart/decorates/Base4.png" alt=""> v-if="props.chartConfig?.customData?.currentSource === 'IT'"
src="@/assets/images/chart/decorates/Base1.png"
alt=""
/>
<img v-else src="@/assets/images/chart/decorates/Base4.png" alt="" />
<div class="value">
{{ Object.values(item)[0] }}
</div>
</div>
<div class="value"> <div class="value">
{{Object.values(item)[0]}} {{ Object.keys(item)[0] || '未知分类' }}
</div> </div>
</div> </div>
<div class="value">
{{Object.keys(item)[0]}}
</div>
</div> </div>
<!-- 无数据 -->
<div v-else class="no-data go-flex-center">
<img :src="noData" alt="暂无数据" />
<n-text :depth="3">暂无数据</n-text>
</div> </div>
</BorderBox> </BorderBox>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue' import {
PropType,
shallowReactive,
watch,
toRefs,
reactive,
onMounted,
onUnmounted,
nextTick,
ref,
computed,
Ref
} from 'vue'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
import BorderBox from '../components/BorderBox.vue' import BorderBox from '../components/BorderBox.vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import {isPreview} from '@/utils' import { isPreview } from '@/utils'
import {graphic} from "echarts"; import { graphic } from 'echarts'
import {cloneDeep} from 'lodash' import { cloneDeep } from 'lodash'
import moment from "moment" import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore' import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
import { customData as customDataConfig } from './config'
import noData from '@/assets/images/canvas/noData.png'
const globalQueryParamsStore = useGlobalQueryParamsStore() const globalQueryParamsStore = useGlobalQueryParamsStore()
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType>,
required: true required: true
}, }
}) })
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
const customData: Ref<typeof customDataConfig> = computed(() => {
return props.chartConfig.customData as typeof customDataConfig
})
const getStyle = (radius: number) => { const getStyle = (radius: number) => {
return { return {
borderRadius: `${radius}px`, borderRadius: `${radius}px`,
@ -53,84 +75,93 @@ const getStyle = (radius: number) => {
} }
} }
let type_count:any = ref([]) let type_count: any = ref([])
const queryParams = { const queryParams = {
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
} }
const getData = () => { const getData = () => {
if(props.chartConfig?.customData?.currentSource==='IT'){ if (props.chartConfig?.customData?.currentSource === 'IT') {
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', { publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
}).then(res => { }).then(res => {
if (res && res.data) { if (res && res.data) {
type_count.value = res.data.type_count type_count.value = res?.data?.type_count||[]
// for (const key in computeNodeData) { // for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key] // computeNodeData[key] = res.data[key]
// } // }
} }
}) })
}else{ } else {
publicInterface('/dcim/dems/device', 'get_dev_category_count', { publicInterface('/dcim/dems/device', 'get_dev_category_count', {
...globalQueryParamsStore.getGlobalQueryParams device_codes: customData.value.device_codes?.length ? customData.value.device_codes.split(',') : [],
}).then(res => { ...globalQueryParamsStore.getGlobalQueryParams
if (res && res.data) { }).then(res => {
type_count.value = res.data.map((item:any)=>{ if (res && res.data) {
return { type_count.value = res.data.map((item: any) => {
[item.name]:item.count return {
} [item.name]: item.count
}) }
// for (const key in computeNodeData) { })
// computeNodeData[key] = res.data[key] // for (const key in computeNodeData) {
// } // computeNodeData[key] = res.data[key]
} // }
}) }
})
} }
} }
let timer:unknown let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => { console.log(
if(!isPreview()) return props.chartConfig.request.requestInterval,
console.log(props,'props') 'props.chartConfig.request.requestInterval_props.chartConfig.request.requestInterval'
)
watch(
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
v => {
if (!isPreview()) return
console.log(props, 'props')
if(props.chartConfig.request.requestInterval) { if (props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number) startInterval()
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} }
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
} }
}) )
watch(()=>props.chartConfig?.customData?.currentSource,()=>{
console.log(props.chartConfig?.customData?.currentSource,'chartConfig');
getData()
// 根据currentSource去获取对应 参数
})
watch(()=>props.chartConfig?.request?.immediate,(v)=>{
if(!v)return
getData()
props.chartConfig.request.immediate = false
// 根据currentSource去获取对应 参数
})
onMounted(() => {
nextTick(() => {
watch(
() => props.chartConfig?.customData?.currentSource,
() => {
console.log(props.chartConfig?.customData?.currentSource, 'chartConfig')
getData() getData()
}) // 根据currentSource去获取对应 参数
if(!isPreview()) return }
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} )
watch(
() => props.chartConfig?.request?.immediate,
v => {
if (!v) return
getData()
startInterval()
props.chartConfig.request.immediate = false
// 根据currentSource去获取对应 参数
}
)
const startInterval = () => {
if (!isPreview()) return
if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {
console.log('class_setInterval')
nextTick(() => { nextTick(() => {
getData() getData()
}) })
}, number) }, number)
}
onMounted(() => {
getData()
startInterval()
}) })
onUnmounted(() => { onUnmounted(() => {
clearInterval(timer as number) clearInterval(timer as number)
@ -146,55 +177,58 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container{ .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;
} }
.classify{ .classify {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 33%; width: 33%;
overflow: auto; overflow: auto;
color:#fff; color: #fff;
.img{ .img {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.value{ .value {
position: absolute; position: absolute;
width: 100%; width: 100%;
top:50%; top: 50%;
left:50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
white-space: pre-wrap; white-space: pre-wrap;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
}
} }
} }
.count {
font-size: 20px;
padding: 0 5px;
font-family: LESLIE;
font-size: 20px;
font-weight: 500;
line-height: 20px;
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
color: #4196ff;
} }
.count{ .no-data {
font-size: 20px; flex-direction: column;
padding: 0 5px; width: 100%;
font-family: LESLIE; img {
font-size: 20px; width: 120px;
font-weight: 500; }
line-height: 20px;
text-align: center;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
color: #4196FF;
} }
</style> </style>

25
src/packages/components/CustomComponents/CustomComponents/Overview/configData.vue
View File

@ -1,11 +1,18 @@
<template> <template>
<n-space vertical> <n-space vertical>
<setting-item-box name="标题" :alone="true"> <setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/> <n-input v-model:value="props.customData.title" size="small" placeholder="请输入" />
</setting-item-box> </setting-item-box>
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
<n-select v-model:value="props.customData.currentSource" :options="multipleSourceOptions" size="small"/> <n-select v-model:value="props.customData.currentSource" :options="multipleSourceOptions" size="small" />
</setting-item-box> </setting-item-box>
<setting-item-box
v-if="props.customData.currentSource === 'device'"
name="分类编码（多个编码使用英文逗号分隔）"
:alone="true"
>
<n-input v-model:value="props.customData.device_codes" size="small" placeholder="请输入" />
</setting-item-box>
</n-space> </n-space>
</template> </template>
@ -15,16 +22,14 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request']) const props = defineProps(['customData', 'request'])
const multipleSourceOptions = [ const multipleSourceOptions = [
{ {
label: '配电设备', label: '动环设备',
value:'device' value: 'device'
}, },
{ {
label: 'IT设备', label: 'IT设备',
value:'IT' value: 'IT'
}, }
] ]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

261
src/packages/components/CustomComponents/CustomComponents/Overview/index.vue
View File

@ -1,17 +1,19 @@
<template> <template>
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: visible"> <BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: visible">
<div class="overview" v-for="item in type_count" :key="item"> <div class="overview" v-for="item in type_count" :key="item">
<div class="img"> <div class="img">
<img v-if="props.chartConfig?.customData?.currentSource==='IT'" src="@/assets/images/chart/decorates/Base1.png" alt=""> <img
<img v-else src="@/assets/images/chart/decorates/Base4.png" alt=""> v-if="props.chartConfig?.customData?.currentSource === 'IT'"
<div class="value"> src="@/assets/images/chart/decorates/Base1.png"
{{item.value}} alt=""
/>
<img v-else src="@/assets/images/chart/decorates/Base4.png" alt="" />
<div class="value" :class="{ brand: item.label === '常用品牌' }">
{{ item.value || '0' }}
</div> </div>
</div> </div>
<div class="label"> <div class="label">
{{item.label}} {{ item.label }}
</div> </div>
</div> </div>
</BorderBox> </BorderBox>
@ -25,21 +27,19 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
import BorderBox from '../components/BorderBox.vue' import BorderBox from '../components/BorderBox.vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import {isPreview} from '@/utils' import { isPreview } from '@/utils'
import {graphic} from "echarts"; import { graphic } from 'echarts'
import {cloneDeep} from 'lodash' import { cloneDeep } from 'lodash'
import moment from "moment" import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore' import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
const globalQueryParamsStore = useGlobalQueryParamsStore() const globalQueryParamsStore = useGlobalQueryParamsStore()
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType>,
required: true required: true
}, }
}) })
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
@ -50,116 +50,121 @@ const getStyle = (radius: number) => {
overflow: 'hidden' overflow: 'hidden'
} }
} }
let type_count:any = ref([]) let type_count: any = ref([])
const queryParams = { const queryParams = {
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
} }
const getData = () => { const getData = () => {
if(props.chartConfig?.customData?.currentSource==='IT'){ if (props.chartConfig?.customData?.currentSource === 'IT') {
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', { publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
}).then(res => { }).then(res => {
if (res && res.data) {
console.log(res.data, 'data____')
let commonBrands = res.data.brand_count?.reduce((prev: any, curr: any) => {
if (!prev) return curr
const prevValue: any = Object.values(prev)[0]
const currValue: any = Object.values(curr)[0]
return currValue > prevValue ? curr : prev
}, undefined)
let obj = [
{
label: '设备总数',
value: res.data?.type_count?.reduce((pre: any, cur: any) => (pre += Object.values(cur)[0]), 0) || '0'
},
{
label: '常用品牌',
value: res.data.brand_count ? (commonBrands ? Object.keys(commonBrands)[0] : '未知品牌') : '无' //无数据处理
}
]
type_count.value = obj
console.log(type_count, 'type_count_type_count')
if (res && res.data) { // for (const key in computeNodeData) {
let commonBrands = res.data.type_count?.reduce((prev:any, curr:any) => { // computeNodeData[key] = res.data[key]
const prevValue:any = Object.values(prev)[0]; // }
const currValue:any = Object.values(curr)[0]; }
return currValue > prevValue ? curr : prev; })
},{}); } else {
let obj = [ publicInterface('/dcim/dems/device', 'get_dev_brand_count', {
{ device_codes: props.chartConfig?.customData?.device_codes?.length
label:'设备总数', ? props.chartConfig?.customData?.device_codes?.split(',')
value:res.data.type_count.reduce((pre:any,cur:any)=>pre+=Object.values(cur)[0],0) : [],
}, ...globalQueryParamsStore.getGlobalQueryParams
{ }).then(res => {
label:'常用品牌', if (res && res.data) {
value:Object.keys(commonBrands)[0], const commonBrands: any = res?.data?.reduce((prev: any, curr: any) => {
}, // 如果 prev 不存在，则初始化为当前元素
] return prev ? (curr.count > prev.count ? curr : prev) : curr
type_count.value = obj }, undefined)
let obj = [
{
label: '设备总数',
value: res.data.reduce((pre: any, cur: any) => (pre += cur.count), 0)
},
{
label: '常用品牌',
value: res?.data?.length ? commonBrands?.name || '未知品牌' : '无' // 无数据处理
}
]
type_count.value = obj
// for (const key in computeNodeData) { // for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key] // computeNodeData[key] = res.data[key]
// } // }
} }
}) })
}else{
publicInterface('/dcim/dems/device', 'get_dev_category_count', {
...globalQueryParamsStore.getGlobalQueryParams
}).then(res => {
if (res && res.data) {
const commonBrands:any = res?.data?.reduce((prev:any, curr:any) => {
return curr.count > prev.count ? curr : prev;
},{});
let obj = [
{
label:'设备总数',
value:res.data.reduce((pre:any,cur:any)=>pre+=cur.count,0)
},
{
label:'常用品牌',
value:commonBrands.name,
},
]
type_count.value = obj
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
} }
} }
let timer:unknown let timer: unknown
console.log([props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),'[props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit]_overview') watch(
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => { () => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
console.log(v,'overview_v') v => {
if(!isPreview()) return if (!isPreview()) return
console.log(props,'props')
if(props.chartConfig.request.requestInterval) { if (props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number) startInterval()
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} }
const unit = obj.unit },
const number = unit * props.chartConfig.request.requestInterval {
timer = setInterval(() => { deep: true
getData()
}, number)
} }
},{ )
deep:true,
})
watch(()=>props.chartConfig?.customData?.currentSource,()=>{
getData()
// 根据currentSource去获取对应 参数
})
watch(()=>props.chartConfig?.request?.immediate,(v)=>{
if(!v)return
getData()
props.chartConfig.request.immediate = false
// 根据currentSource去获取对应 参数
})
onMounted(() => {
nextTick(() => {
watch(
() => props.chartConfig?.customData?.currentSource,
() => {
getData() getData()
}) // 根据currentSource去获取对应 参数
if(!isPreview()) return }
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0} )
watch(
() => props.chartConfig?.request?.immediate,
v => {
if (!v) return
getData()
startInterval()
props.chartConfig.request.immediate = false
// 根据currentSource去获取对应 参数
}
)
const startInterval = () => {
if (!isPreview()) return
if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {
console.log('class_setInterval')
nextTick(() => { nextTick(() => {
getData() getData()
}) })
}, number) }, number)
}
onMounted(() => {
getData()
startInterval()
}) })
onUnmounted(() => { onUnmounted(() => {
clearInterval(timer as number) clearInterval(timer as number)
@ -175,34 +180,36 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.overview{ .overview {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 33%; width: 33%;
color:#fff; color: #fff;
.img{ padding: 0 20px;
.img {
position: relative; position: relative;
width: 100px; width: 100px;
height: 100px; height: 100px;
.value{ .value {
position: absolute; position: absolute;
width: 100%; width: 100%;
top:50%; top: 50%;
left:50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
white-space: pre-wrap; white-space: pre-wrap;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
}
img {
width: 100%;
height: 100%;
}
} }
.brand {
img{ font-size: 16px !important;
width: 100%;
height: 100%;
} }
} }
}
</style> </style>

1
src/packages/components/Informations/Texts/TextCommon/config.ts
View File

@ -36,6 +36,7 @@ export const option = {
paddingY: 10, paddingY: 10,
textAlign: 'center', // 水平对齐方式 textAlign: 'center', // 水平对齐方式
fontWeight: 'normal', fontWeight: 'normal',
spaceName:false,
// 边框 // 边框
borderWidth: 0, borderWidth: 0,

11
src/packages/components/Informations/Texts/TextCommon/config.vue
View File

@ -7,12 +7,19 @@
<SettingItem> <SettingItem>
<n-text :depth="3">开启数据时，将会覆盖此文本</n-text> <n-text :depth="3">开启数据时，将会覆盖此文本</n-text>
</SettingItem> </SettingItem>
<SettingItem> <setting-item>
<n-space> <n-space>
<n-switch v-model:value="optionData.showUnit" size="small" /> <n-switch v-model:value="optionData.showUnit" size="small" />
<n-text>展示单位</n-text> <n-text>展示单位</n-text>
</n-space> </n-space>
</SettingItem>
</setting-item>
<setting-item>
<n-space>
<n-switch v-model:value="optionData.spaceName" size="small" />
<n-text>空间标识</n-text>
</n-space>
</setting-item>
</setting-item-box> </setting-item-box>
<!-- <setting-item-box name="链接" :alone="true">--> <!-- <setting-item-box name="链接" :alone="true">-->
<!-- <setting-item>--> <!-- <setting-item>-->

1
src/packages/components/Informations/Texts/TextCommon/index.vue
View File

@ -81,6 +81,7 @@ const option = shallowReactive({
watch( watch(
[() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit, () => props.chartConfig.option.showStatusColor], [() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit, () => props.chartConfig.option.showStatusColor],
([newData, newShowUnit, showStatusColor]: [any, boolean, boolean]) => { ([newData, newShowUnit, showStatusColor]: [any, boolean, boolean]) => {
console.log(newData,'newData_watch')
option.dataset = newData option.dataset = newData
option.showUnit = newShowUnit option.showUnit = newShowUnit
option.showStatusColor = showStatusColor option.showStatusColor = showStatusColor

7
src/packages/components/Tables/Tables/TablesBasic/index.vue
View File

@ -180,14 +180,21 @@ useChartCommonData(props.chartConfig, useChartEditStore)
} }
:deep(td) { :deep(td) {
text-align: left !important; text-align: left !important;
padding-left:16px;
// padding-left: 10px; // padding-left: 10px;
} }
:deep(.n-data-table-th) { :deep(.n-data-table-th) {
background-color:#1A1D25; background-color:#1A1D25;
text-align: left !important;
padding-left:16px;
} }
.customDataTable{ .customDataTable{
:deep(td) { :deep(td) {
background-color:rgba(65, 150, 255, 0.05); background-color:rgba(65, 150, 255, 0.05);
padding-left:16px;
} }
// :deep(th) { // :deep(th) {
// background-color:rgba(65, 150, 255, 0.05); // background-color:rgba(65, 150, 255, 0.05);

11
src/packages/public/publicConfig.ts
View File

@ -24,6 +24,7 @@ import cloneDeep from 'lodash/cloneDeep'
// 请求基础属性 // 请求基础属性
export const requestConfig: RequestConfigType = { export const requestConfig: RequestConfigType = {
fetchInterval:null,
immediate:false, immediate:false,
requestDataType: RequestDataTypeEnum.STATIC, requestDataType: RequestDataTypeEnum.STATIC,
requestHttpType: RequestHttpEnum.GET, requestHttpType: RequestHttpEnum.GET,
@ -58,11 +59,13 @@ const commonData: commonDataType = {
areaDevCount: { areaDevCount: {
enable: false, enable: false,
dataSource: '', dataSource: '',
space_complete_id:'' space_complete_id:'',
device_codes:''
}, },
assetsClass: { assetsClass: {
enable: false, enable: false,
dataSource: '' dataSource: '',
device_codes:''
}, },
pointHistory: { pointHistory: {
enable: false, enable: false,
@ -103,7 +106,8 @@ const commonData: commonDataType = {
companyTempTop: { companyTempTop: {
enable: false, enable: false,
signal_ids:'131240020010', signal_ids:'131240020010',
space_complete_id: '.7.9.70.' space_complete_id: '.7.9.70.',
spaceLevel: 2,
}, },
alarmTrend: { alarmTrend: {
enable: false, enable: false,
@ -119,6 +123,7 @@ const commonData: commonDataType = {
categoryBrandCountTable: { categoryBrandCountTable: {
enable: false, enable: false,
currentSource:'', currentSource:'',
device_codes:''
}, },
singlePoint: { singlePoint: {
enable: false, enable: false,

8
src/store/modules/chartEditStore/chartEditStore.d.ts vendored
View File

@ -214,6 +214,8 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
// 单个图表请求配置 // 单个图表请求配置
export interface RequestConfigType extends RequestPublicConfigType { export interface RequestConfigType extends RequestPublicConfigType {
// 请求的定时器
fetchInterval?:any
// 是否立即执行 // 是否立即执行
immediate?:boolean immediate?:boolean
// 所选全局数据池的对应 id // 所选全局数据池的对应 id
@ -362,12 +364,14 @@ export interface DeviceClassType {
export interface AssetsClassType { export interface AssetsClassType {
enable: boolean enable: boolean
dataSource: string dataSource: string
device_codes:string
} }
// 局房温度Top10 // 局房温度Top10
export interface CompanyTempTopType { export interface CompanyTempTopType {
enable: boolean enable: boolean
space_complete_id: string, space_complete_id: string
signal_ids:string signal_ids:string
spaceLevel:number
} }
// 告警趋势 // 告警趋势
@ -383,6 +387,7 @@ export interface AreaDevCountType {
enable: boolean enable: boolean
dataSource: string dataSource: string
space_complete_id:string space_complete_id:string
device_codes:string
} }
// 测点表格值 // 测点表格值
@ -393,6 +398,7 @@ export interface PointTableType {
export interface CategoryBrandCountTableType { export interface CategoryBrandCountTableType {
enable: boolean enable: boolean
currentSource: string currentSource: string
device_codes:string
} }
// 手动输入值 // 手动输入值

17
src/store/modules/globalQueryParamsStore/globalQueryParamsStore.ts
View File

@ -4,11 +4,15 @@ import { cloneDeep } from 'lodash'
export const useGlobalQueryParamsStore = defineStore({ export const useGlobalQueryParamsStore = defineStore({
id: 'useGlobalQueryParamsStore', id: 'useGlobalQueryParamsStore',
state: () => ({ state: () => ({
queryParams: {} queryParams: {},
areaDevCountQueryParams:{}
}), }),
getters: { getters: {
getGlobalQueryParams():{[k:string]: any} { getGlobalQueryParams():{[k:string]: any} {
return this.queryParams return this.queryParams
},
getAreaDevCountQueryParams():{[k:string]: any} {
return this.areaDevCountQueryParams
} }
}, },
actions: { actions: {
@ -19,6 +23,15 @@ export const useGlobalQueryParamsStore = defineStore({
else { else {
Object.assign(this.queryParams, queryParams) Object.assign(this.queryParams, queryParams)
} }
} },
setAreaDevCountQueryParams(areaDevCountQueryParams: {[k:string]: any}, merge: boolean = true) {
if(merge) {
this.areaDevCountQueryParams = cloneDeep(areaDevCountQueryParams)
}
else {
Object.assign(this.areaDevCountQueryParams, areaDevCountQueryParams)
}
},
} }
}) })

2
src/views/chart/ContentConfigurations/components/ChartDataV2/components/AlarmTrend.vue
View File

@ -4,7 +4,7 @@
<n-switch v-model:value="currentObj.enable"/> <n-switch v-model:value="currentObj.enable"/>
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-input v-model:value="currentObj.signal_ids" size="small" placeholder="请输入"/> <n-input v-model:value="currentObj.signal_ids" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="告警确认状态" :alone="true"> <setting-item-box name="告警确认状态" :alone="true">

21
src/views/chart/ContentConfigurations/components/ChartDataV2/components/AreaDevCount.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<setting-item-box name="分类编码（多个编码使用英文逗号分隔）" :alone="true">
<n-input v-model:value="currentObj.device_codes" size="small" placeholder="请输入" />
</setting-item-box>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import type { Ref } from 'vue'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { useTargetData } from '../../hooks/useTargetData.hook'
import { commonDataType, AreaDevCountType } from '@/store/modules/chartEditStore/chartEditStore.d'
const { targetData } = useTargetData() as { targetData: Ref<{ commonData: commonDataType; id: string }> }
const currentObj = computed(() => {
return targetData.value.commonData[targetData.value.commonData.currentSource] as AreaDevCountType
})
console.log(targetData, 'targetData')
</script>
<style lang="scss" scoped></style>

36
src/views/chart/ContentConfigurations/components/ChartDataV2/components/AssetsClass.vue
View File

@ -1,39 +1,39 @@
<template> <template>
<setting-item-box name="启用数据" :alone="true"> <setting-item-box name="启用数据" :alone="true">
<n-space justify="start"> <n-space justify="start">
<n-switch v-model:value="currentObj.enable"/> <n-switch v-model:value="currentObj.enable" />
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
<n-select v-model:value="currentObj.dataSource" :options="multipleSourceOptions" size="small"/> <n-select v-model:value="currentObj.dataSource" :options="multipleSourceOptions" size="small" />
</setting-item-box> </setting-item-box>
<setting-item-box v-if="currentObj.dataSource === 'device'" name="分类编码（多个编码使用英文逗号分隔）" :alone="true">
<n-input v-model:value="currentObj.device_codes" size="small" placeholder="请输入" />
</setting-item-box>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {computed} from 'vue' import { computed } from 'vue'
import type {Ref} from 'vue' import type { Ref } from 'vue'
import {SettingItemBox} from '@/components/Pages/ChartItemSetting' import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import {useTargetData} from '../../hooks/useTargetData.hook' import { useTargetData } from '../../hooks/useTargetData.hook'
import {commonDataType, AssetsClassType} from '@/store/modules/chartEditStore/chartEditStore.d' import { commonDataType, AssetsClassType } from '@/store/modules/chartEditStore/chartEditStore.d'
const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> } const { targetData } = useTargetData() as { targetData: Ref<{ commonData: commonDataType; id: string }> }
const currentObj = computed(() => { const currentObj = computed(() => {
return targetData.value.commonData[targetData.value.commonData.currentSource] as AssetsClassType return targetData.value.commonData[targetData.value.commonData.currentSource] as AssetsClassType
}) })
console.log(targetData,'targetData') console.log(targetData, 'targetData')
const multipleSourceOptions = [ const multipleSourceOptions = [
{ {
label: '配电设备', label: '动环设备',
value:'device' value: 'device'
}, },
{ {
label: 'IT设备', label: 'IT设备',
value:'IT' value: 'IT'
}, }
] ]
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

35
src/views/chart/ContentConfigurations/components/ChartDataV2/components/CategoryBrandCountTable.vue
View File

@ -3,12 +3,17 @@
<n-space justify="start"> <n-space justify="start">
<n-switch v-model:value="categoryBrandCountTable.enable" /> <n-switch v-model:value="categoryBrandCountTable.enable" />
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
<n-select v-model:value="categoryBrandCountTable.currentSource" :options="multipleSourceOptions" size="small"/> <n-select v-model:value="categoryBrandCountTable.currentSource" :options="multipleSourceOptions" size="small" />
</setting-item-box> </setting-item-box>
<setting-item-box
v-if="categoryBrandCountTable.currentSource === 'device'"
name="分类编码（多个编码使用英文逗号分隔）"
:alone="true"
>
<n-input v-model:value="categoryBrandCountTable.device_codes" size="small" placeholder="请输入" />
</setting-item-box>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -21,19 +26,20 @@ import { commonDataType, CategoryBrandCountTableType } from '@/store/modules/cha
const { CloseIcon, AddIcon } = icon.ionicons5 const { CloseIcon, AddIcon } = icon.ionicons5
const { targetData } = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> } const { targetData } = useTargetData() as { targetData: Ref<{ commonData: commonDataType; id: string }> }
const categoryBrandCountTable: Ref<CategoryBrandCountTableType> = computed(() => targetData.value.commonData.categoryBrandCountTable) const categoryBrandCountTable: Ref<CategoryBrandCountTableType> = computed(
const multipleSourceOptions = [ () => targetData.value.commonData.categoryBrandCountTable
)
const multipleSourceOptions = [
{ {
label: '配电设备', label: '动环设备',
value:'device' value: 'device'
}, },
{ {
label: 'IT设备', label: 'IT设备',
value:'IT' value: 'IT'
}, }
] ]
// type computeIdsItemType = { // type computeIdsItemType = {
// id: string, // id: string,
@ -67,9 +73,6 @@ const categoryBrandCountTable: Ref<CategoryBrandCountTableType> = computed(() =>
// const handleDelete = (i: number) => { // const handleDelete = (i: number) => {
// targetData.value.commonData.pointTable.ids.splice(i, 1) // targetData.value.commonData.pointTable.ids.splice(i, 1)
// } // }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

6
src/views/chart/ContentConfigurations/components/ChartDataV2/components/CompanyTempTop.vue
View File

@ -4,12 +4,16 @@
<n-switch v-model:value="currentObj.enable"/> <n-switch v-model:value="currentObj.enable"/>
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-input v-model:value="currentObj.signal_ids" size="small" placeholder="请输入"/> <n-input v-model:value="currentObj.signal_ids" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="空间ID" :alone="true"> <setting-item-box name="空间ID" :alone="true">
<n-input v-model:value="currentObj.space_complete_id" size="small" placeholder="请输入"/> <n-input v-model:value="currentObj.space_complete_id" size="small" placeholder="请输入"/>
</setting-item-box> </setting-item-box>
<setting-item-box name="显示完整空间层级" :alone="true">
<n-input-number v-model:value="currentObj.spaceLevel" size="small" :min='1'/>
</setting-item-box>
</template> </template>

4
src/views/chart/ContentConfigurations/components/ChartDataV2/components/PointHistory.vue
View File

@ -10,13 +10,13 @@
<setting-item-box name="统计方式" :alone="true"> <setting-item-box name="统计方式" :alone="true">
<n-select multiple v-model:value="pointHistory.methods" :options="MethodsOptions" size="small" /> <n-select multiple v-model:value="pointHistory.methods" :options="MethodsOptions" size="small" />
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-space vertical> <n-space vertical>
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false"> <n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
<n-input <n-input
:value="item.value" :value="item.value"
@update:value="(v: string) => handleChange(v, i)" @update:value="(v: string) => handleChange(v, i)"
placeholder="请输入测点ID" placeholder="请输入测点编码"
size="small" size="small"
clearable clearable
/> />

4
src/views/chart/ContentConfigurations/components/ChartDataV2/components/PointRealTime.vue
View File

@ -14,13 +14,13 @@
<n-switch v-model:value="pointRealTime.with_device_name" /> <n-switch v-model:value="pointRealTime.with_device_name" />
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-space vertical> <n-space vertical>
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false"> <n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
<n-input <n-input
:value="item.value" :value="item.value"
@update:value="(v: string) => handleChange(v, i)" @update:value="(v: string) => handleChange(v, i)"
placeholder="请输入测点ID" placeholder="请输入测点编码"
size="small" size="small"
clearable clearable
/> />

4
src/views/chart/ContentConfigurations/components/ChartDataV2/components/PointTable.vue
View File

@ -4,13 +4,13 @@
<n-switch v-model:value="pointTable.enable" /> <n-switch v-model:value="pointTable.enable" />
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-space vertical> <n-space vertical>
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false"> <n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
<n-input <n-input
:value="item.value" :value="item.value"
@update:value="(v: string) => handleChange(v, i)" @update:value="(v: string) => handleChange(v, i)"
placeholder="请输入测点ID" placeholder="请输入测点编码"
size="small" size="small"
clearable clearable
/> />

4
src/views/chart/ContentConfigurations/components/ChartDataV2/components/SinglePoint.vue
View File

@ -4,10 +4,10 @@
<n-switch v-model:value="singlePoint.enable"/> <n-switch v-model:value="singlePoint.enable"/>
</n-space> </n-space>
</setting-item-box> </setting-item-box>
<setting-item-box name="测点ID" :alone="true"> <setting-item-box name="测点编码" :alone="true">
<n-input <n-input
v-model:value="singlePoint.pointId" v-model:value="singlePoint.pointId"
placeholder="请输入测点ID" placeholder="请输入测点编码"
size="small" size="small"
clearable clearable
/> />

91
src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue
View File

@ -2,31 +2,31 @@
<div v-if="!IsStatic && !targetData.chartConfig.conDataKey" class="go-chart-configurations-data"> <div v-if="!IsStatic && !targetData.chartConfig.conDataKey" class="go-chart-configurations-data">
<template v-if="!IsCommonSingle"> <template v-if="!IsCommonSingle">
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
<n-select v-model:value="targetData.commonData.currentSource" :options="multipleSourceOptions" size="small"/> <n-select v-model:value="targetData.commonData.currentSource" :options="multipleSourceOptions" size="small" />
</setting-item-box> </setting-item-box>
<PointHistory v-if="matchComponent(CurrentSourceEnum.POINTHISTORY)"/> <PointHistory v-if="matchComponent(CurrentSourceEnum.POINTHISTORY)" />
<EnergyUseHistory v-else-if="matchComponent(CurrentSourceEnum.ENERGYUSEHISTORY)"/> <EnergyUseHistory v-else-if="matchComponent(CurrentSourceEnum.ENERGYUSEHISTORY)" />
<RecordValueHistory v-else-if="matchComponent(CurrentSourceEnum.RECORDVALUEHISTORY)"/> <RecordValueHistory v-else-if="matchComponent(CurrentSourceEnum.RECORDVALUEHISTORY)" />
<PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)"/> <PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)" />
<MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)"/> <MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)" />
<DeviceClass v-else-if="matchComponent(CurrentSourceEnum.DEVICECLASS)"/> <DeviceClass v-else-if="matchComponent(CurrentSourceEnum.DEVICECLASS)" />
<AssetsClass v-else-if="matchComponent(CurrentSourceEnum.ASSETSCLASS)"/> <AssetsClass v-else-if="matchComponent(CurrentSourceEnum.ASSETSCLASS)" />
<CompanyTempTop v-else-if="matchComponent(CurrentSourceEnum.COMPANYTEMPTOP)"/> <CompanyTempTop v-else-if="matchComponent(CurrentSourceEnum.COMPANYTEMPTOP)" />
<AlarmTrend v-else-if="matchComponent(CurrentSourceEnum.ALARMTREND)"/> <AlarmTrend v-else-if="matchComponent(CurrentSourceEnum.ALARMTREND)" />
<PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)"/> <AreaDevCount v-else-if="matchComponent(CurrentSourceEnum.AREADEVCOUNT)" />
<CategoryBrandCountTable v-else-if="matchComponent(CurrentSourceEnum.CATEGORYBRANDCOUNTTABLE)"/> <PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)" />
<ManualInput v-else-if="matchComponent(CurrentSourceEnum.MANUALINPUT)"/> <CategoryBrandCountTable v-else-if="matchComponent(CurrentSourceEnum.CATEGORYBRANDCOUNTTABLE)" />
<ManualInput v-else-if="matchComponent(CurrentSourceEnum.MANUALINPUT)" />
</template> </template>
<template v-else-if="IsCommonSingle"> <template v-else-if="IsCommonSingle">
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
<n-select v-model:value="targetData.commonData.currentSource" :options="singleSourceOptions" size="small"/> <n-select v-model:value="targetData.commonData.currentSource" :options="singleSourceOptions" size="small" />
</setting-item-box> </setting-item-box>
<SinglePoint v-if="matchComponent(CurrentSourceEnum.SINGLEPOINT)"/> <SinglePoint v-if="matchComponent(CurrentSourceEnum.SINGLEPOINT)" />
<ManualInputSingle v-if="matchComponent(CurrentSourceEnum.MANUALINPUTSINGLE)"/> <ManualInputSingle v-if="matchComponent(CurrentSourceEnum.MANUALINPUTSINGLE)" />
</template> </template>
<setting-item-box name="数据量" :alone="true"> <setting-item-box name="数据量" :alone="true">
<n-input-number v-model:value="targetData.commonData.dataLength" size="small"/> <n-input-number v-model:value="targetData.commonData.dataLength" size="small" />
</setting-item-box> </setting-item-box>
<setting-item-box v-if="!matchComponent(CurrentSourceEnum.MANUALINPUT)" name="更新间隔" :alone="true"> <setting-item-box v-if="!matchComponent(CurrentSourceEnum.MANUALINPUT)" name="更新间隔" :alone="true">
<n-input-group> <n-input-group>
@ -36,16 +36,26 @@
:show-button="false" :show-button="false"
placeholder="请输入" placeholder="请输入"
size="small" size="small"
style="flex: 1;" style="flex: 1"
> >
</n-input-number> </n-input-number>
<!-- 单位 --> <!-- 单位 -->
<n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/> <n-select
class="select-time-options"
v-model:value="targetData.request.requestIntervalUnit"
:options="selectTimeOptions"
size="small"
style="width: 80px"
/>
</n-input-group> </n-input-group>
</setting-item-box> </setting-item-box>
</div> </div>
<div v-else-if="!IsStatic && targetData.chartConfig.conDataKey"> <div v-else-if="!IsStatic && targetData.chartConfig.conDataKey">
<component :is="targetData.chartConfig.conDataKey" :customData="targetData.customData" :request="targetData.request"></component> <component
:is="targetData.chartConfig.conDataKey"
:customData="targetData.customData"
:request="targetData.request"
></component>
<setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true"> <setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true">
<n-input-group> <n-input-group>
<n-input-number <n-input-number
@ -54,17 +64,21 @@
:show-button="false" :show-button="false"
placeholder="请输入" placeholder="请输入"
size="small" size="small"
style="flex: 1;" style="flex: 1"
> >
</n-input-number> </n-input-number>
<!-- 单位 --> <!-- 单位 -->
<n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/> <n-select
class="select-time-options"
v-model:value="targetData.request.requestIntervalUnit"
:options="selectTimeOptions"
size="small"
style="width: 80px"
/>
</n-input-group> </n-input-group>
</setting-item-box> </setting-item-box>
</div> </div>
<div v-else-if="IsStatic"> <div v-else-if="IsStatic">暂无数据</div>
暂无数据
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -77,6 +91,7 @@ import MonthAlarmClass from './components/MonthAlarmClass.vue'
import AssetsClass from './components/AssetsClass.vue' import AssetsClass from './components/AssetsClass.vue'
import CompanyTempTop from './components/CompanyTempTop.vue' import CompanyTempTop from './components/CompanyTempTop.vue'
import AlarmTrend from './components/AlarmTrend.vue' import AlarmTrend from './components/AlarmTrend.vue'
import AreaDevCount from './components/AreaDevCount.vue'
import DeviceClass from './components/DeviceClass.vue' import DeviceClass from './components/DeviceClass.vue'
import PointTable from './components/PointTable.vue' import PointTable from './components/PointTable.vue'
import CategoryBrandCountTable from './components/CategoryBrandCountTable.vue' import CategoryBrandCountTable from './components/CategoryBrandCountTable.vue'
@ -92,10 +107,10 @@ import { sourceOptions, optionTypeEnum, selectTimeOptions } from './index.d'
import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d' import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
import { PieCircleConfig } from '@/packages/components/Charts/Pies/PieCircle/index' import { PieCircleConfig } from '@/packages/components/Charts/Pies/PieCircle/index'
import { TextBarrageConfig } from "@/packages/components/Informations/Texts/TextBarrage/index"; import { TextBarrageConfig } from '@/packages/components/Informations/Texts/TextBarrage/index'
import { TextCommonConfig } from "@/packages/components/Informations/Texts/TextCommon/index"; import { TextCommonConfig } from '@/packages/components/Informations/Texts/TextCommon/index'
import { TextGradientConfig } from "@/packages/components/Informations/Texts/TextGradient/index"; import { TextGradientConfig } from '@/packages/components/Informations/Texts/TextGradient/index'
import { WaterPoloConfig } from "@/packages/components/Charts/Mores/WaterPolo/index"; import { WaterPoloConfig } from '@/packages/components/Charts/Mores/WaterPolo/index'
import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/index' import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/index'
import { BorderCustom2Config } from '@/packages/components/Decorates/Borders/BorderCustom2/index' import { BorderCustom2Config } from '@/packages/components/Decorates/Borders/BorderCustom2/index'
@ -104,17 +119,17 @@ import { BorderCustom2Config } from '@/packages/components/Decorates/Borders/Bor
const { targetData } = useTargetData() as { targetData: Ref<CreateComponentType | CreateComponentGroupType> } const { targetData } = useTargetData() as { targetData: Ref<CreateComponentType | CreateComponentGroupType> }
/* /*
* 通用组件: 通用数据 * 通用组件: 通用数据
* 自定义组件: 自定义数据 * 自定义组件: 自定义数据
* 静态组件: 无数据 * 静态组件: 无数据
* */ * */
// 通用组件 自定义组件 静态组件 // 通用组件 自定义组件 静态组件
const IsStatic = computed(() => { const IsStatic = computed(() => {
return targetData.value.chartConfig.chartFrame === ChartFrameEnum.STATIC return targetData.value.chartConfig.chartFrame === ChartFrameEnum.STATIC
}) })
/* /*
* 通用组件再分为: 多个点的数据和 一个点的数据(用于圆环图等) * 通用组件再分为: 多个点的数据和 一个点的数据(用于圆环图等)
*/ */
const IsCommonSingle = computed(() => { const IsCommonSingle = computed(() => {
let singleCharArr = [ let singleCharArr = [
@ -124,9 +139,9 @@ const IsCommonSingle = computed(() => {
TextGradientConfig, TextGradientConfig,
WaterPoloConfig, WaterPoloConfig,
DashboardConfig, DashboardConfig,
BorderCustom2Config, BorderCustom2Config
] ]
const { package:packageStr, category, key } = targetData.value.chartConfig const { package: packageStr, category, key } = targetData.value.chartConfig
const flag = singleCharArr.some(_ => { const flag = singleCharArr.some(_ => {
return _.package === packageStr && _.category === category && _.key === key return _.package === packageStr && _.category === category && _.key === key
}) })
@ -137,7 +152,7 @@ const multipleSourceOptions = sourceOptions.filter(_ => _.type === optionTypeEnu
const singleSourceOptions = sourceOptions.filter(_ => _.type === optionTypeEnum.SINGLE) const singleSourceOptions = sourceOptions.filter(_ => _.type === optionTypeEnum.SINGLE)
const matchComponent = (name: string) => { const matchComponent = (name: string) => {
console.log(name,'name---') console.log(name, 'name---')
return targetData.value.commonData.currentSource === name return targetData.value.commonData.currentSource === name
} }
</script> </script>