mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-29 16:29:14 +08:00
fix: 设备一张图
This commit is contained in:
宝莉
parent
b0022f968c
commit
eeaf55cba0
2
.env
2
.env
@ -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:8025/'
|
||||
# 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
|
||||
# VITE_PRO_PATH = 'http://192.168.0.235:8177'
|
||||
|
||||
@ -3,14 +3,20 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ResultErrcode } from "@/enums/httpEnum";
|
||||
import { AreaDevCountType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import dataJson from "./data.json";
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
|
||||
export const handleAreaDevCountClass =async (targetComponent: CreateComponentType) => {
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AreaDevCountType
|
||||
// targetComponent?.option.series.forEach((item,index)=>{
|
||||
// item.encode = { y:index===0? 'dev_count':'it_dev_count', x: 'space' }
|
||||
// })
|
||||
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'
|
||||
}
|
||||
// 处理数据
|
||||
@ -24,7 +30,8 @@ export const handleAreaDevCountClass =async (targetComponent: CreateComponentTyp
|
||||
|
||||
'配电设备总数':item?.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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -8,13 +8,16 @@ export const handleAssetsClass =async (targetComponent: CreateComponentType) =>
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AssetsClassType
|
||||
let { enable, dataSource } = obj
|
||||
let { enable, dataSource,device_codes } = obj
|
||||
if(!enable) return {
|
||||
errcode: ResultErrcode.SUCCESS,
|
||||
data: { ...dataJson },
|
||||
errmsg: ''
|
||||
}
|
||||
const query = {
|
||||
device_codes:device_codes?.length
|
||||
? device_codes.split(',')
|
||||
: [],
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
// 处理数据
|
||||
@ -23,14 +26,13 @@ const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
res!.data = {
|
||||
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
|
||||
dimensions: ['品牌','data'],
|
||||
source:res?.data?.brand_count.slice(0,7).map((item: {})=>{
|
||||
source:res?.data?.brand_count? res?.data?.brand_count.map((item: {})=>{
|
||||
return {
|
||||
'品牌':Object.keys(item)[0],
|
||||
'品牌':Object.keys(item)[0]||'未知品牌',
|
||||
data:Object.values(item)[0],
|
||||
}
|
||||
})
|
||||
}):[{'品牌':'品牌',data:'0'}]
|
||||
}
|
||||
console.log(res,'调用了吗')
|
||||
|
||||
return res
|
||||
}else{
|
||||
@ -39,14 +41,15 @@ const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
res!.data = {
|
||||
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
|
||||
dimensions: ['品牌','data'],
|
||||
source:res?.data.slice(0,7).map((item: any)=>{
|
||||
source:res!.data.length? res?.data.map((item: any)=>{
|
||||
return {
|
||||
'品牌':item.name,
|
||||
data:item.count,
|
||||
'品牌':item?.name||'未知品牌',
|
||||
data:item?.count||'0',
|
||||
}
|
||||
})
|
||||
}):[{'品牌':'品牌',data:'0'}]
|
||||
}
|
||||
console.log(res,'调用了吗1')
|
||||
console.log(res,'调用了吗11')
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import { ResultErrcode } from '@/enums/httpEnum'
|
||||
import dataJson from './data.json'
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
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 {
|
||||
errcode: ResultErrcode.SUCCESS,
|
||||
data: { ...dataJson },
|
||||
@ -15,6 +15,9 @@ export const handleCategoryBrandCountTable =async (targetComponent: CreateCompon
|
||||
}
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
const queryParams = {
|
||||
device_codes:device_codes?.length
|
||||
? device_codes.split(',')
|
||||
: [],
|
||||
...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)
|
||||
|
||||
@ -1,40 +1,69 @@
|
||||
import { publicInterface } from "@/api/path";
|
||||
import { publicInterface } from '@/api/path'
|
||||
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 dataJson from "./data.json";
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const handleCompanyTempTop =async (targetComponent: CreateComponentType) => {
|
||||
console.log(targetComponent,'targetComponent.commonData');
|
||||
export const handleCompanyTempTop = async (targetComponent: CreateComponentType) => {
|
||||
console.log(targetComponent, 'targetComponent_targetComponent')
|
||||
const option = targetComponent.option as any
|
||||
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType
|
||||
let { enable, space_complete_id, signal_ids} = obj
|
||||
if(!enable) return {
|
||||
let { enable, space_complete_id, signal_ids,spaceLevel } = obj
|
||||
if (!enable)
|
||||
return {
|
||||
errcode: ResultErrcode.SUCCESS,
|
||||
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');
|
||||
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['名称']} ${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: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
|
||||
dimensions: ['名称','温度值'],
|
||||
source:res?.data.map((item: any)=>{
|
||||
dimensions: ['uid', '温度值',],
|
||||
source: res?.data.slice(0, 10).map((item: any) => {
|
||||
return {
|
||||
'名称':`${item.node_name}`,
|
||||
'温度值':item.dems_device_point.node_value,
|
||||
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{
|
||||
} else {
|
||||
// 后端没有给errcode,前端重置
|
||||
res.errcode = '00000'
|
||||
res.data = {
|
||||
dimensions:[],
|
||||
source:[]
|
||||
dimensions: [],
|
||||
source: []
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
@ -23,8 +23,6 @@ import { handleNoParam } from './commonDataComponents/useNoParamRes'
|
||||
import { handleManulInput } from './commonDataComponents/useManualInputRes'
|
||||
import { handleManulInputSingle } from './commonDataComponents/useManualInputSingleRes'
|
||||
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
|
||||
) => {
|
||||
const vChartRef = ref<typeof VChart | null>(null)
|
||||
let fetchInterval: any = 0
|
||||
// 如果用下方的变量每次执行都会新增一个定时器， 但清除的得是targetComponent里面的定时器
|
||||
// let fetchInterval: any = null
|
||||
|
||||
// 组件类型
|
||||
const { chartFrame } = targetComponent.chartConfig
|
||||
@ -77,7 +76,8 @@ export const useChartCommonData = (
|
||||
// 缓存组件的实例后续更新用得上
|
||||
const instanceMap = new 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
|
||||
Object.assign(targetComponent.option, {
|
||||
// series,
|
||||
@ -124,7 +124,8 @@ export const useChartCommonData = (
|
||||
} = toRefs(targetComponent.request)
|
||||
|
||||
try {
|
||||
clearInterval(fetchInterval)
|
||||
clearInterval(targetComponent.request.fetchInterval)
|
||||
console.log(targetComponent.request.fetchInterval,'fetchInterval_fetchInterval')
|
||||
|
||||
const fetchFn = async () => {
|
||||
let res, isMultiple = true
|
||||
@ -157,7 +158,7 @@ export const useChartCommonData = (
|
||||
break;
|
||||
case CurrentSourceEnum.COMPANYTEMPTOP:
|
||||
res = await handleCompanyTempTop(targetComponent)
|
||||
console.log(res,'res',targetComponent,'触发了吗')
|
||||
console.log(res,'res_触发了吗')
|
||||
|
||||
break;
|
||||
case CurrentSourceEnum.ALARMTREND:
|
||||
@ -247,7 +248,7 @@ export const useChartCommonData = (
|
||||
// 开启轮询
|
||||
if (time) {
|
||||
|
||||
fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
|
||||
targetComponent.request.fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
|
||||
} else {
|
||||
fetchFn()
|
||||
}
|
||||
@ -257,7 +258,7 @@ export const useChartCommonData = (
|
||||
}
|
||||
requestIntervalFn()
|
||||
if(!isPreview()) {
|
||||
clearInterval(fetchInterval)
|
||||
clearInterval(targetComponent.request.fetchInterval)
|
||||
}
|
||||
return { vChartRef }
|
||||
}
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
:theme="themeColor"
|
||||
:option="option"
|
||||
:manual-update="isPreview()"
|
||||
:update-options="{replaceMerge: replaceMergeArr}"
|
||||
:update-options="{ replaceMerge: replaceMergeArr }"
|
||||
autoresize
|
||||
>
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<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 { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import { use } from 'echarts/core'
|
||||
@ -23,11 +23,11 @@ import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartDataFetch, useChartCommonData } from '@/hooks'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
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 isObject from 'lodash/isObject'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
@ -57,34 +57,39 @@ const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
// 控制所有柱状图的点击事件
|
||||
const chartPEvents = (e:any)=>{
|
||||
console.log(e,'e_chartPEvents'),
|
||||
console.log(props.chartConfig,'chartConfig1')
|
||||
switch (props.chartConfig.commonData.currentSource) {
|
||||
case "areaDevCount":
|
||||
const chartPEvents = (e: any) => {
|
||||
console.log(e, 'e_chartPEvents'), console.log(props.chartConfig, 'chartConfig1')
|
||||
switch (props.chartConfig.commonData.currentSource) {
|
||||
case 'areaDevCount':
|
||||
// 设置公共查询条件
|
||||
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=>{
|
||||
|
||||
// })
|
||||
|
||||
console.log(chartEditStore.getComponentList, 'chartEditStore_getComponentList')
|
||||
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
|
||||
chartEditStore.getComponentList.forEach(component=>{
|
||||
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:
|
||||
break;
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
if(vChartRef.value) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.chart.on('click', chartPEvents)
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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">
|
||||
<n-icon :color="backColor" :size="backSize * 1.1">
|
||||
<ArrowBackIcon />
|
||||
@ -41,15 +41,17 @@ import { mergeTheme, setOption } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartCommonData } from '@/hooks'
|
||||
|
||||
import {isPreview, postMessageToParent} from '@/utils'
|
||||
import { isPreview, postMessageToParent } from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import mapChinaJson from './mapGeojson/china.json'
|
||||
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
|
||||
import { customData as customDataConfig } from './config'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import {useOriginStore} from "@/store/modules/originStore/originStore";
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { debounce } from 'lodash'
|
||||
import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
@ -95,7 +97,7 @@ const originStore = useOriginStore()
|
||||
const systemConfig = originStore.getOriginStore.user.systemConfig
|
||||
|
||||
const activeAlarmData = computed(() => {
|
||||
let obj:any = {levels: [], confirm_statuses: []}
|
||||
let obj: any = { levels: [], confirm_statuses: [] }
|
||||
if (systemConfig['active_alarm_level']) {
|
||||
for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) {
|
||||
obj.levels.push(i + 1)
|
||||
@ -119,17 +121,17 @@ const dataMap = computed(() => {
|
||||
|
||||
let getData = () => {
|
||||
let obj = dataMap.value as any
|
||||
if(JSON.stringify(obj) !== '{}') {
|
||||
if (JSON.stringify(obj) !== '{}') {
|
||||
let ids = []
|
||||
for(let k in obj) {
|
||||
if(obj[k].roomId) ids.push(obj[k].roomId)
|
||||
for (let k in obj) {
|
||||
if (obj[k].roomId) ids.push(obj[k].roomId)
|
||||
}
|
||||
const param = {
|
||||
ids,
|
||||
...activeAlarmData.value
|
||||
}
|
||||
publicInterface('/dcim/dems/device', 'get_space_tree_with_status_v3', param).then((res: any) => {
|
||||
if(res.data) {
|
||||
if (res.data) {
|
||||
colorMap.value = {}
|
||||
res.data = res.data.filter((_: any) => _.node_status !== 0)
|
||||
res.data.forEach((_: any) => {
|
||||
@ -138,8 +140,7 @@ let getData = () => {
|
||||
vEchartsSetOption()
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
vEchartsSetOption()
|
||||
}
|
||||
}
|
||||
@ -148,8 +149,10 @@ getData = debounce(getData, 200)
|
||||
const vChartRef = ref<typeof VChart>()
|
||||
const currentMap: Ref<any> = ref(null)
|
||||
let colorMap: Ref<any> = ref({})
|
||||
const componentList: Ref<any> = ref([])
|
||||
|
||||
const updateMapFn = (data: any) => {
|
||||
if(!data) return
|
||||
if (!data) return
|
||||
props.chartConfig.option.series[0].data = data.features.map((it: any) => {
|
||||
let obj = (dataMap.value as any)[it.properties.name] || {}
|
||||
return {
|
||||
@ -158,7 +161,7 @@ const updateMapFn = (data: any) => {
|
||||
|
||||
value: it.properties.center ? it.properties.center.concat(50) : [],
|
||||
itemStyle: {
|
||||
color: colorMap.value[obj.roomId] || '#4dca59',
|
||||
color: colorMap.value[obj.roomId] || '#4dca59'
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -167,8 +170,11 @@ const updateMapFn = (data: any) => {
|
||||
//动态获取json注册地图
|
||||
const getGeojson = (regionId: string) => {
|
||||
return new Promise<boolean>(resolve => {
|
||||
console.log(regionId,'regionId')
|
||||
if(regionId==='440600'){
|
||||
console.log(regionId, 'regionId')
|
||||
if (regionId === '440600') {
|
||||
const chartEditStore = useChartEditStore()
|
||||
componentList.value = chartEditStore.getComponentList
|
||||
initSpaceName('佛山市')
|
||||
get_area_dev_count()
|
||||
}
|
||||
import(`./mapGeojson/${regionId}.json`).then(data => {
|
||||
@ -179,17 +185,17 @@ const getGeojson = (regionId: string) => {
|
||||
})
|
||||
})
|
||||
}
|
||||
const get_area_dev_count =async ()=>{
|
||||
const res = await publicInterface('/dcim/dems/device','get_area_dev_count', {space_type:'county'})
|
||||
const get_area_dev_count = async () => {
|
||||
const res = await publicInterface('/dcim/dems/device', 'get_area_dev_count', { space_type: 'county' })
|
||||
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: {} })
|
||||
|
||||
}else{
|
||||
} else {
|
||||
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
}
|
||||
|
||||
// 进行更换初始化地图 如果为china 单独处理
|
||||
@ -198,8 +204,7 @@ const registerMapInitAsync = async () => {
|
||||
const adCode = `${props.chartConfig.option.mapRegion.adcode}`
|
||||
const province = `${props.chartConfig.option.mapRegion.province}`
|
||||
if (adCode !== 'china') {
|
||||
|
||||
await getGeojson(province?province:adCode)
|
||||
await getGeojson(province ? province : adCode)
|
||||
} else {
|
||||
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
|
||||
}
|
||||
@ -209,20 +214,20 @@ registerMapInitAsync()
|
||||
|
||||
const handleClickMap = (e: any) => {
|
||||
let obj = dataMap.value as any
|
||||
if(obj && JSON.stringify(obj) !== '{}') {
|
||||
if (obj && JSON.stringify(obj) !== '{}') {
|
||||
let path = obj[e.name]?.skipPath
|
||||
if(path) openWeb(path)
|
||||
if (path) openWeb(path)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if(vChartRef.value) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.chart.on('click', 'series.map', handleClickMap)
|
||||
}
|
||||
})
|
||||
|
||||
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) => {
|
||||
@ -239,7 +244,6 @@ const vEchartsSetOption = () => {
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
|
||||
|
||||
// 处理海南群岛
|
||||
const hainanLandsHandle = async (newData: boolean) => {
|
||||
if (newData) {
|
||||
@ -249,30 +253,49 @@ const hainanLandsHandle = async (newData: boolean) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 点击区域
|
||||
const chartPEvents = (e: any) => {
|
||||
console.log(e,'e')
|
||||
console.log(props.chartConfig.option,'props.chartConfig.option.series[1]')
|
||||
if(props.chartConfig.option.mapRegion.province===440600){
|
||||
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}`
|
||||
}
|
||||
})
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
chartEditStore.getComponentList.forEach(component=>{
|
||||
if(component.commonData.currentSource==='areaDevCount'){
|
||||
component.commonData['areaDevCount'].space_complete_id = space_complete?space_complete?.space.complete_id:null
|
||||
// useChartCommonData(component, useChartEditStore)
|
||||
}
|
||||
|
||||
const initSpaceName = (text: string) => {
|
||||
componentList.value
|
||||
.filter((v: any) => v.chartConfig.key === 'TextCommon' && v.option.spaceName)
|
||||
.forEach((item: any) => {
|
||||
item.option.dataset = `当前：${text}`
|
||||
})
|
||||
}
|
||||
console.log(county,'county')
|
||||
// 点击区域
|
||||
const chartPEvents = (e: any) => {
|
||||
console.log(e, 'e')
|
||||
e.color = 'pink'
|
||||
if (props.chartConfig.option.mapRegion.province === 440600) {
|
||||
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}`
|
||||
}
|
||||
})
|
||||
// 找到空间标识的文字框然后进行赋值
|
||||
initSpaceName(space_complete?.space.complete_name || `佛山市/${county.properties.name}`)
|
||||
|
||||
console.log(space_complete, 'space_complete_space_complete')
|
||||
// 设置公共查询条件
|
||||
globalQueryParamsStore.setGlobalQueryParams({
|
||||
space_complete_id: space_complete?.space?.complete_id || '-999'
|
||||
})
|
||||
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)
|
||||
// }
|
||||
component.request.immediate = true
|
||||
|
||||
useChartCommonData(component, useChartEditStore)
|
||||
})
|
||||
}
|
||||
console.log(county, 'county')
|
||||
}
|
||||
if (e.seriesType !== 'map') return
|
||||
if (!props.chartConfig.option.mapRegion.enter) {
|
||||
@ -316,7 +339,9 @@ onMounted(() => {
|
||||
})
|
||||
})
|
||||
|
||||
watch(() => customData.value.dataMap, () => {
|
||||
watch(
|
||||
() => customData.value.dataMap,
|
||||
() => {
|
||||
let obj = dataMap.value as any
|
||||
props.chartConfig.option.series[1].tooltip.formatter = (v: any) => {
|
||||
// if(props.chartConfig.option.mapRegion.province===440600){
|
||||
@ -324,26 +349,27 @@ watch(() => customData.value.dataMap, () => {
|
||||
// return str
|
||||
// }
|
||||
let value: any
|
||||
if(JSON.stringify(obj) !== '{}') value = obj[v.name]?.value || '-'
|
||||
if (JSON.stringify(obj) !== '{}') value = obj[v.name]?.value || '-'
|
||||
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
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
let scale = ref(1)
|
||||
const handleWheel = (event: any) => {
|
||||
// 阻止默认行为（例如页面滚动）
|
||||
event.preventDefault();
|
||||
if(!option.value.canScroll) return
|
||||
event.preventDefault()
|
||||
if (!option.value.canScroll) return
|
||||
// 检查滚动方向
|
||||
if (event.deltaY < 0) {
|
||||
scale.value = Math.min(3, scale.value + 0.1)
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
scale.value = Math.max(0.1, scale.value - 0.1)
|
||||
}
|
||||
}
|
||||
@ -351,39 +377,39 @@ const handleWheel = (event: any) => {
|
||||
// 查找父元素，确保父元素的类名为 .go-preview-scale
|
||||
function findParentWithClass(element: any, className: string) {
|
||||
// 当前元素的父元素
|
||||
let parent = element.parentElement;
|
||||
let parent = element.parentElement
|
||||
// 遍历父元素链，直到找到匹配的类名或到达文档根元素
|
||||
while (parent && !parent.classList.contains(className)) {
|
||||
parent = parent.parentElement;
|
||||
parent = parent.parentElement
|
||||
}
|
||||
// 返回找到的父元素，或者 null 如果没有匹配的父元素
|
||||
return parent;
|
||||
return parent
|
||||
}
|
||||
|
||||
const getScaleXY = (v: string) => {
|
||||
// 定义正则表达式来匹配 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) {
|
||||
const scaleX = parseFloat(matches[1]);
|
||||
const scaleY = parseFloat(matches[2]);
|
||||
const scaleX = parseFloat(matches[1])
|
||||
const scaleY = parseFloat(matches[2])
|
||||
return [scaleX, scaleY]
|
||||
} else {
|
||||
return [1, 1]
|
||||
}
|
||||
}
|
||||
|
||||
let offsetX:number, offsetY:number
|
||||
let left:number, top:number
|
||||
let offsetX: number, offsetY: number
|
||||
let left: number, top: number
|
||||
let isDragging = ref(false)
|
||||
const box = ref()
|
||||
const handleMousedown = (event: any) => {
|
||||
if(box.value) {
|
||||
if (box.value) {
|
||||
let el = box.value
|
||||
isDragging.value = true;
|
||||
isDragging.value = true
|
||||
|
||||
offsetX = event.clientX
|
||||
offsetY = event.clientY
|
||||
@ -398,39 +424,38 @@ const handleMousedown = (event: any) => {
|
||||
|
||||
// 当鼠标移动时触发
|
||||
const handleMousemove = (event: any) => {
|
||||
if(!option.value.canDrag) return
|
||||
if (!isDragging.value) return;
|
||||
if(box.value){
|
||||
if (!option.value.canDrag) return
|
||||
if (!isDragging.value) return
|
||||
if (box.value) {
|
||||
let parent = findParentWithClass(box.value, 'go-preview-scale')
|
||||
let [scaleX, scaleY] = getScaleXY(parent.style.transform)
|
||||
let el = box.value
|
||||
|
||||
|
||||
// 计算元素的新位置
|
||||
const x = left + (event.clientX - offsetX) / scaleX
|
||||
const y = top + (event.clientY - offsetY) / scaleY
|
||||
// 更新元素的位置
|
||||
el.style.left = `${x}px`;
|
||||
el.style.top = `${y}px`;
|
||||
el.style.left = `${x}px`
|
||||
el.style.top = `${y}px`
|
||||
}
|
||||
}
|
||||
|
||||
// 当鼠标松开时触发
|
||||
const handleMouseup = (event: any) => {
|
||||
if(!option.value.canDrag) return
|
||||
isDragging.value = false;
|
||||
if (!option.value.canDrag) return
|
||||
isDragging.value = false
|
||||
|
||||
// 移除鼠标移动和松开事件监听器
|
||||
document.removeEventListener('mousemove', handleMousemove);
|
||||
document.removeEventListener('mouseup', handleMouseup);
|
||||
document.removeEventListener('mousemove', handleMousemove)
|
||||
document.removeEventListener('mouseup', handleMouseup)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if(vChartRef.value) {
|
||||
if (vChartRef.value) {
|
||||
vChartRef.value.$el.addEventListener('wheel', handleWheel, { passive: false })
|
||||
}
|
||||
if(box.value) {
|
||||
if (box.value) {
|
||||
box.value.addEventListener('mousedown', handleMousedown)
|
||||
}
|
||||
})
|
||||
@ -441,8 +466,6 @@ onUnmounted(() => {
|
||||
box?.value?.removeEventListener('mousedown', handleMousedown)
|
||||
})
|
||||
|
||||
|
||||
|
||||
//监听是否显示南海群岛
|
||||
if (!isPreview()) {
|
||||
watch(
|
||||
@ -489,25 +512,27 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
let timer:unknown
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), () => {
|
||||
if(!isPreview()) return
|
||||
if(props.chartConfig.request.requestInterval) {
|
||||
if(timer) clearInterval(timer as number)
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
let timer: unknown
|
||||
watch(
|
||||
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
|
||||
() => {
|
||||
if (!isPreview()) return
|
||||
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(() => {
|
||||
getData()
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
if (!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
@ -516,9 +541,8 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer) clearInterval(timer as number)
|
||||
if (timer) clearInterval(timer as number)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scope lang="scss">
|
||||
|
||||
@ -10,58 +10,74 @@ export enum PieTypeEnum {
|
||||
NORMAL = '常规图',
|
||||
RING = '环形图',
|
||||
ROSE = '玫瑰图',
|
||||
RINGROSE = '环形玫瑰图',
|
||||
RINGROSE = '环形玫瑰图'
|
||||
}
|
||||
|
||||
export const PieTypeObject = {
|
||||
[PieTypeEnum.NORMAL]: 'normal',
|
||||
[PieTypeEnum.RING]: 'ring',
|
||||
[PieTypeEnum.ROSE]: 'rose',
|
||||
[PieTypeEnum.RINGROSE]: 'ringrose',
|
||||
[PieTypeEnum.RINGROSE]: 'ringrose'
|
||||
}
|
||||
|
||||
// 其它配置
|
||||
const otherConfig = {
|
||||
// 轮播动画
|
||||
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 = {
|
||||
...otherConfig,
|
||||
backgroundColor: "rgba(255,255,255,1)",
|
||||
backgroundColor: 'rgba(255,255,255,1)',
|
||||
color,
|
||||
type: 'pie',
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
trigger: 'item'
|
||||
// valueFormatter :function(value:string){
|
||||
// // console.log(name,'name-formatter')
|
||||
// return ''+value
|
||||
// }
|
||||
},
|
||||
legend: {
|
||||
orient: "vartical",
|
||||
x: "left",
|
||||
top: "center",
|
||||
left: "70%",
|
||||
bottom: "0%",
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
top: 'center',
|
||||
left: '0',
|
||||
right: '30%',
|
||||
bottom: '0%',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap :16,
|
||||
formatter :function(name:string){
|
||||
return ''+name
|
||||
itemGap: 16,
|
||||
formatter: function (name: string) {
|
||||
return name.length > 5 ? name.substring(0, 5) + '...' : name;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||||
minAngle: 2, //最小的扇区角度（0 ~ 360）
|
||||
radius: ["50%", "0%"],
|
||||
center: ["30%", "50%"],
|
||||
// minAngle: 2, //最小的扇区角度（0 ~ 360）
|
||||
radius: ['0%', '50%'],
|
||||
center: ['30%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
// itemStyle: { //图形样式
|
||||
// normal: {
|
||||
@ -76,27 +92,27 @@ const option = {
|
||||
formatter: '{text|{b}}\n{c} ({d}%)',
|
||||
rich: {
|
||||
text: {
|
||||
color: "#666",
|
||||
color: '#666',
|
||||
fontSize: 14,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
padding: 8
|
||||
},
|
||||
value: {
|
||||
color: "#8693F3",
|
||||
color: '#8693F3',
|
||||
fontSize: 24,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
},
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
fontSize: 24
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -53,6 +53,9 @@ use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
props.chartConfig.option.legend.top='10'
|
||||
props.chartConfig.option.legend.left='60%'
|
||||
|
||||
|
||||
// 会重新选择需要选中和展示的数据
|
||||
const handleSeriesData = () => {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<setting-item-box name="空间ID" :alone="true">
|
||||
<n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入空间ID"/>
|
||||
</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="请输入"/>
|
||||
</setting-item-box>
|
||||
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<template #title>
|
||||
<div class="titleBox">
|
||||
<div class="mr10">{{title}}</div>
|
||||
<n-checkbox :checked="checkAll" @update:checked="(v:boolean) => emit('update:checkAll', v)" size="small" class="mr10">全选</n-checkbox>
|
||||
<n-button strong size="tiny" color="rgba(36,197,231,.5)" text-color="#fff" class="button" @click="clickBatch">
|
||||
<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">
|
||||
<template #icon>
|
||||
<AssignmentTurnedInRoundIcon/>
|
||||
</template>
|
||||
@ -19,7 +19,7 @@
|
||||
</n-checkbox>
|
||||
</n-space>
|
||||
</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-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>
|
||||
@ -118,4 +118,7 @@ const jumpMore = () => {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
:deep(.n-checkbox__label){
|
||||
padding:0 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
<setting-item-box name="空间ID" :alone="true">
|
||||
<n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入空间ID"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="温湿度测点ID(英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="props.customData.dems_device_point_signal_ids" size="small" placeholder="请输入温湿度测点ID(英文逗号隔开)"/>
|
||||
<setting-item-box name="通过测点编码筛选(多个编码使用英文逗号分隔)" :alone="true">
|
||||
<n-input v-model:value="props.customData.dems_device_point_signal_ids" size="small" placeholder="请输入测点编码筛选(多个编码使用英文逗号分隔)"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="显示筛选条件" :alone="true">
|
||||
<n-radio-group v-model:value="props.customData.showFilter" size="small" style="margin-top: 2px">
|
||||
|
||||
@ -14,32 +14,58 @@
|
||||
>
|
||||
<div v-if="tableData.length" class="itemBox">
|
||||
<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-tag class="mr5" size="small" strong :color="{textColor: '#000', color: item.confirm_status === 'ok' ? '#4DCA59' : '#f5b442'}">
|
||||
{{ item.confirm_status === 'ok'?'已确认':'未确认' }}
|
||||
<n-checkbox
|
||||
:disabled="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 class="mr5" size="small" :color="{textColor: item.color1, borderColor: item.color1}">
|
||||
{{select1.options[item.level - 1].label}}
|
||||
<n-tag class="mr5" size="small" :color="{ textColor: item.color1, borderColor: item.color1 }">
|
||||
{{ select1.options[item.level - 1].label }}
|
||||
</n-tag>
|
||||
<div class="textEllipsis" style="color: rgba(255, 255, 255, 0.82);flex: 20;">{{ item.content }}</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>
|
||||
<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 class="textEllipsis" style="color: rgba(255, 255, 255, 0.82); flex: 20">{{ item.content }}</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>
|
||||
<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>
|
||||
<template v-if="alarmVideos[i]">
|
||||
<SpinnerIcon 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;"/>
|
||||
<SpinnerIcon
|
||||
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>
|
||||
<div v-else style="width: 20px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="emptyBox" v-else>
|
||||
<img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 50%" alt="">
|
||||
<div style="color: #fff;text-align: center">查询结果为空</div>
|
||||
<img src="@/assets/images/exception/nodata.svg" style="width: 100%; height: 50%" alt="" />
|
||||
<div style="color: #fff; text-align: center">查询结果为空</div>
|
||||
</div>
|
||||
<!-- <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>-->
|
||||
<!-- <VModalV1 v-model:show="modalV1Obj.show" :data="modalV1Obj.data" @confirm="confirm"/>-->
|
||||
<!-- <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>-->
|
||||
<!-- <VModalV1 v-model:show="modalV1Obj.show" :data="modalV1Obj.data" @confirm="confirm"/>-->
|
||||
</BorderBox>
|
||||
</template>
|
||||
|
||||
@ -49,11 +75,11 @@ import type { Ref } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import BorderBox from './BorderBoxV2.vue'
|
||||
import {isPreview, postMessageToParent, useGetMessageByParent} from '@/utils'
|
||||
import moment from "moment"
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
|
||||
import {icon} from '@/plugins/icon'
|
||||
import { isPreview, postMessageToParent, useGetMessageByParent } from '@/utils'
|
||||
import moment from 'moment'
|
||||
import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
|
||||
import { icon } from '@/plugins/icon'
|
||||
import VModal from './VModal.vue'
|
||||
import VModalV1 from './VModalV1.vue'
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
@ -109,59 +135,64 @@ interface Select2Type {
|
||||
color: string
|
||||
}[]
|
||||
}
|
||||
const select2:Select2Type = reactive({
|
||||
const select2: Select2Type = reactive({
|
||||
value: [],
|
||||
options: [
|
||||
{ label: '已确认', value: 'ok', number: 0, color: '#4DCA59' },
|
||||
{ label: '未确认', value: 'not', number: 0, color: '#f5b442' },
|
||||
{ label: '未确认', value: 'not', number: 0, color: '#f5b442' }
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
type tableDataItemType = {
|
||||
id: number,
|
||||
content: string,
|
||||
generate_time: string,
|
||||
checked: boolean,
|
||||
confirm_status: 'ok' | 'not',
|
||||
level: number,
|
||||
color1: string,
|
||||
color2: string,
|
||||
position: string,
|
||||
device_name: string,
|
||||
node_name: string,
|
||||
confirm_people: string,
|
||||
confirm_time: string,
|
||||
reconfirmation_time_str: string,
|
||||
serial_no: string,
|
||||
remark: string,
|
||||
[k:string]: any,
|
||||
id: number
|
||||
content: string
|
||||
generate_time: string
|
||||
checked: boolean
|
||||
confirm_status: 'ok' | 'not'
|
||||
level: number
|
||||
color1: string
|
||||
color2: string
|
||||
position: string
|
||||
device_name: string
|
||||
node_name: string
|
||||
confirm_people: string
|
||||
confirm_time: string
|
||||
reconfirmation_time_str: string
|
||||
serial_no: string
|
||||
remark: string
|
||||
[k: string]: any
|
||||
}
|
||||
let tableData:tableDataItemType[] = reactive([])
|
||||
watch(() => tableData.map(_ => _.checked), (v:boolean[]) => {
|
||||
if(!v.length) checkAll.value = false
|
||||
else if(v.every(_ => _)) checkAll.value = true
|
||||
else if(v.every(_ => !_)) checkAll.value = false
|
||||
})
|
||||
let tableData: tableDataItemType[] = reactive([])
|
||||
watch(
|
||||
() => tableData.map(_ => _.checked),
|
||||
(v: boolean[]) => {
|
||||
if (!v.length) checkAll.value = false
|
||||
else if (v.every(_ => _)) checkAll.value = true
|
||||
else if (v.every(_ => !_)) checkAll.value = false
|
||||
}
|
||||
)
|
||||
|
||||
let checkAll = ref(false)
|
||||
watch(() => checkAll.value, (v) => {
|
||||
tableData.forEach(_ => _.checked = v)
|
||||
})
|
||||
watch(
|
||||
() => checkAll.value,
|
||||
v => {
|
||||
tableData.forEach(_ => (_.checked = v))
|
||||
}
|
||||
)
|
||||
|
||||
const getNumber = () => {
|
||||
console.log(props.chartConfig.customData?.dems_device_point_signal_ids,'props.chartConfig.customData?.dems_device_point_signal_ids')
|
||||
|
||||
const q = {
|
||||
space_complete_id: props.chartConfig.customData?.space_complete_id,
|
||||
confirm_statuss: alarmConfirmStatus.value,
|
||||
handle_statuss: alarmHandleStatuss.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 => {
|
||||
if (res && JSON.stringify(res.data) !== '{}') {
|
||||
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,
|
||||
append_space_to_content: 'complete',
|
||||
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 => {
|
||||
@ -195,36 +227,41 @@ let alarmVideos = ref([])
|
||||
// })
|
||||
let currentVideo: any = ref({})
|
||||
const getVideos = (ids: number[], alarmIds: number[]) => {
|
||||
if(ids.length) {
|
||||
publicInterface('/dcim/video_monitor/other_device', 'get_alarm_device', {device_uids: ids.toString()}).then((res: any) => {
|
||||
if (ids.length) {
|
||||
publicInterface('/dcim/video_monitor/other_device', 'get_alarm_device', { device_uids: ids.toString() }).then(
|
||||
(res: any) => {
|
||||
// if(res.errcode !== '00000') return
|
||||
if(!res?.data) return
|
||||
let arr:any = []
|
||||
if (!res?.data) return
|
||||
let arr: any = []
|
||||
ids.forEach(id => {
|
||||
arr.push(res.data[id] ? res.data[id][0] : null)
|
||||
})
|
||||
alarmVideos.value = arr.concat()
|
||||
|
||||
let index = 0, last:any = {}
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
if(arr[i]) {
|
||||
let index = 0,
|
||||
last: any = {}
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i]) {
|
||||
last = arr[i]
|
||||
index = i
|
||||
break
|
||||
}
|
||||
}
|
||||
if(JSON.stringify(currentVideo.value) === '{}' && !last) return
|
||||
let obj = JSON.stringify(currentVideo.value) !== '{}' ? JSON.parse(JSON.stringify(currentVideo.value)) : {
|
||||
if (JSON.stringify(currentVideo.value) === '{}' && !last) return
|
||||
let obj =
|
||||
JSON.stringify(currentVideo.value) !== '{}'
|
||||
? JSON.parse(JSON.stringify(currentVideo.value))
|
||||
: {
|
||||
ip: '',
|
||||
port: null,
|
||||
account: '',
|
||||
password: '',
|
||||
channel: '',
|
||||
brand: '',
|
||||
plugin: '',
|
||||
plugin: ''
|
||||
}
|
||||
if(last) {
|
||||
for(let k in obj) {
|
||||
if (last) {
|
||||
for (let k in obj) {
|
||||
obj[k] = last[k]
|
||||
}
|
||||
}
|
||||
@ -235,28 +272,29 @@ const getVideos = (ids: number[], alarmIds: number[]) => {
|
||||
type: 'openVideoV2',
|
||||
data: obj
|
||||
})
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const showLoading = ref(false)
|
||||
const {getMessageByParent} = useGetMessageByParent()
|
||||
getMessageByParent('', (e) => {
|
||||
if(e.data.type === 'openVideoV2_closeLoading' && e.data.page === 'customLargeScreen') {
|
||||
const { getMessageByParent } = useGetMessageByParent()
|
||||
getMessageByParent('', e => {
|
||||
if (e.data.type === 'openVideoV2_closeLoading' && e.data.page === 'customLargeScreen') {
|
||||
showLoading.value = false
|
||||
}
|
||||
})
|
||||
const showVideo = (obj: any, id: number) => {
|
||||
let a: {[k: string]: string | null | boolean | number} = {
|
||||
let a: { [k: string]: string | null | boolean | number } = {
|
||||
ip: '',
|
||||
port: null,
|
||||
account: '',
|
||||
password: '',
|
||||
channel: '',
|
||||
brand: '',
|
||||
plugin: '',
|
||||
plugin: ''
|
||||
}
|
||||
for(let k in a) {
|
||||
for (let k in a) {
|
||||
a[k] = obj[k]
|
||||
}
|
||||
// 点击时强制打开
|
||||
@ -281,8 +319,7 @@ const getData = () => {
|
||||
append_space_to_content: 'complete',
|
||||
handle_statuss: alarmHandleStatuss.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_size: 10,
|
||||
@ -290,14 +327,14 @@ const getData = () => {
|
||||
}
|
||||
}
|
||||
publicInterface('/dcim/dems/devie_active_alarm', 'get_page', queryModel).then(res => {
|
||||
if(res && !res.data) {
|
||||
if (res && !res.data) {
|
||||
tableData.splice(0)
|
||||
return
|
||||
}
|
||||
if(res && res.data) {
|
||||
if (res && res.data) {
|
||||
res.data.item = res.data.item.filter((_: tableDataItemType) => _.level)
|
||||
const lastTableData = [...tableData]
|
||||
let arr:tableDataItemType[] = res.data['item'].map((e:any) => ({
|
||||
let arr: tableDataItemType[] = res.data['item'].map((e: any) => ({
|
||||
...e,
|
||||
id: e.id,
|
||||
content: e.content,
|
||||
@ -314,11 +351,14 @@ const getData = () => {
|
||||
confirm_time: e.confirm_time,
|
||||
reconfirmation_time_str: e.reconfirmation_time_str,
|
||||
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) {
|
||||
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) {
|
||||
arr.map(e => {
|
||||
const lastIndex = lastTableData.findIndex(item => item.id === e.id)
|
||||
@ -336,10 +376,10 @@ const getData = () => {
|
||||
// show: false,
|
||||
// data: {}
|
||||
// })
|
||||
const clickItem = (i:number) => {
|
||||
const clickItem = (i: number) => {
|
||||
postMessageToParent({
|
||||
type: 'openRealTimeEventDetail',
|
||||
currentAlarm: tableData[i],
|
||||
currentAlarm: tableData[i]
|
||||
})
|
||||
|
||||
// 自己写的详情
|
||||
@ -357,7 +397,9 @@ const systemConstant = originStore.getOriginStore.user.systemConstant
|
||||
const systemConfig = originStore.getOriginStore.user.systemConfig
|
||||
|
||||
if (systemConstant['warn_levels']) {
|
||||
select1.options = systemConstant['warn_levels'].filter((item: any) => item.value !== '').map((item: any) => {
|
||||
select1.options = systemConstant['warn_levels']
|
||||
.filter((item: any) => item.value !== '')
|
||||
.map((item: any) => {
|
||||
return { label: item.label, value: Number(item.value), number: 0, color: item.remark }
|
||||
})
|
||||
}
|
||||
@ -365,7 +407,7 @@ if (systemConstant['warn_levels']) {
|
||||
let alarmHandleStatuss: Ref<any[]> = ref([])
|
||||
let alarmRecoveryStatus: Ref<any[]> = ref([])
|
||||
let alarmConfirmStatus: Ref<any[]> = ref([])
|
||||
if(systemConfig) {
|
||||
if (systemConfig) {
|
||||
if (systemConfig['active_alarm_level']) {
|
||||
for (let i = 0; i < Number(systemConfig['active_alarm_level']); i++) {
|
||||
select1.value.push(i + 1)
|
||||
@ -383,9 +425,12 @@ if(systemConfig) {
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => {
|
||||
watch(
|
||||
() => select1.value.join('&&') + select2.value.join('&&'),
|
||||
v => {
|
||||
getData()
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
// const modalV1Obj = reactive({
|
||||
// show: false,
|
||||
@ -401,16 +446,16 @@ watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => {
|
||||
// singleIds: [],
|
||||
// })
|
||||
const clickBatch = () => {
|
||||
if(!tableData.filter(_ => _.checked).length) {
|
||||
if (!tableData.filter(_ => _.checked).length) {
|
||||
window['$message'].warning('请先选择数据')
|
||||
return
|
||||
}
|
||||
let selectIds = tableData.filter(_ => _.checked && _.confirm_status !== 'ok').map(_ => _.id)
|
||||
if(!selectIds.length) return
|
||||
if (!selectIds.length) return
|
||||
postMessageToParent({
|
||||
type: 'openRealTimeEventDialog',
|
||||
multipleConfirm: true,
|
||||
selectIds,
|
||||
selectIds
|
||||
})
|
||||
// Object.assign(modalV1Obj, {
|
||||
// show: true,
|
||||
@ -426,8 +471,8 @@ const clickBatch = () => {
|
||||
// })
|
||||
}
|
||||
|
||||
getMessageByParent('', (e) => {
|
||||
if(e.data.type === 'openRealTimeEventDialog_confirmed' && e.data.page === 'customLargeScreen') {
|
||||
getMessageByParent('', e => {
|
||||
if (e.data.type === 'openRealTimeEventDialog_confirmed' && e.data.page === 'customLargeScreen') {
|
||||
console.log('openRealTimeEventDialog_confirmed')
|
||||
getData()
|
||||
}
|
||||
@ -436,7 +481,7 @@ const clickSingle = (id: number) => {
|
||||
postMessageToParent({
|
||||
type: 'openRealTimeEventDialog',
|
||||
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') {
|
||||
publicInterface('/dcim/space_page', 'get', { space_id: row.space_id, order: 'sort,id asc' }).then(res => {
|
||||
if (res && res.data && res.data.length) {
|
||||
@ -476,13 +521,11 @@ const jumpTo = (row:any) => {
|
||||
type: 'changeRouterV1',
|
||||
url: `/dynamicRing/schematicDiagram/${res.data[0].id}`
|
||||
})
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
window['$message'].warning('所选节点没有配置页面')
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
window['$message'].warning('所选节点没有配置页面')
|
||||
}
|
||||
}
|
||||
@ -490,29 +533,39 @@ const jumpTo = (row:any) => {
|
||||
const jumpMore = () => {
|
||||
postMessageToParent({
|
||||
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
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit, props.chartConfig.customData?.space_complete_id].join('&&'), v => {
|
||||
if(!isPreview()) return
|
||||
if(props.chartConfig.request.requestInterval) {
|
||||
if(timer) clearInterval(timer as number)
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
let timer: unknown
|
||||
watch(
|
||||
() =>
|
||||
[
|
||||
props.chartConfig.request.requestInterval,
|
||||
props.chartConfig.request.requestIntervalUnit,
|
||||
props.chartConfig.customData?.space_complete_id
|
||||
].join('&&'),
|
||||
v => {
|
||||
if (!isPreview()) return
|
||||
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(() => {
|
||||
nextTick(() => {
|
||||
getData()
|
||||
})
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
if (!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
@ -549,18 +602,18 @@ onUnmounted(() => {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
.mr5{
|
||||
.mr5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.mr10{
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.textEllipsis{
|
||||
.textEllipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.emptyBox{
|
||||
.emptyBox {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -568,13 +621,13 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.itemBox{
|
||||
.itemBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
.item{
|
||||
.item {
|
||||
flex: none;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
@ -582,7 +635,7 @@ onUnmounted(() => {
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
margin: 3px 0;
|
||||
background: rgba(65,150,255,.05);
|
||||
background: rgba(65, 150, 255, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<setting-item-box name="标题" :alone="true">
|
||||
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||
</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="请输入"/>
|
||||
</setting-item-box>
|
||||
<!-- <setting-item-box name="空间ID" :alone="true">
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
|
||||
<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 === 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 === 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 === 2 }" @click="changeTab(2)">年度</span>
|
||||
</div>
|
||||
<div class="dynamic-component-main">
|
||||
<div class="system-introduction">
|
||||
@ -16,24 +16,12 @@
|
||||
height="100%"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="linear-gradient"
|
||||
x1="3"
|
||||
y1="25.85"
|
||||
x2="70"
|
||||
y2="25.85"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<linearGradient 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.5" stop-color="#0bd1ff" stop-opacity="0.8" />
|
||||
<stop offset="1" stop-color="#0bd1ff" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="linear-gradient-2"
|
||||
y1="194.15"
|
||||
y2="194.15"
|
||||
xlink:href="#linear-gradient"
|
||||
/>
|
||||
<linearGradient id="linear-gradient-2" y1="194.15" y2="194.15" xlink:href="#linear-gradient" />
|
||||
<linearGradient
|
||||
id="未命名的渐变_5"
|
||||
x1="-3804"
|
||||
@ -82,33 +70,33 @@
|
||||
<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-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 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)">
|
||||
{{ alarmLevel["level_4"] }}
|
||||
{{ alarmLevel['level_4'] }}
|
||||
</text>
|
||||
<text class="cls-7" transform="translate(308.3 153)">
|
||||
{{ alarmLevel["level_3"] }}
|
||||
{{ alarmLevel['level_3'] }}
|
||||
</text>
|
||||
<text class="cls-7" transform="translate(308.3 107)">
|
||||
{{ alarmLevel["level_2"] }}
|
||||
{{ alarmLevel['level_2'] }}
|
||||
</text>
|
||||
<text class="cls-7" transform="translate(308.3 61)">
|
||||
{{ alarmLevel["level_1"] }}
|
||||
{{ alarmLevel['level_1'] }}
|
||||
</text>
|
||||
<rect
|
||||
class="cls-8"
|
||||
x="12.5"
|
||||
y="30.5"
|
||||
width="49"
|
||||
height="159"
|
||||
/>
|
||||
<path
|
||||
class="cls-9"
|
||||
d="M61,31V189H13V31H61m1-1H12V190H62V30Z"
|
||||
/>
|
||||
<rect class="cls-8" x="12.5" y="30.5" width="49" height="159" />
|
||||
<path class="cls-9" d="M61,31V189H13V31H61m1-1H12V190H62V30Z" />
|
||||
<g class="cls-10">
|
||||
<polygon
|
||||
class="cls-11"
|
||||
@ -137,233 +125,63 @@
|
||||
height="1"
|
||||
transform="translate(-48.5 171.5) rotate(-90)"
|
||||
/>
|
||||
<polygon
|
||||
class="cls-9"
|
||||
points="8 36.29 0 28.29 0 29.71 8 37.71 8 36.29"
|
||||
/>
|
||||
<polygon
|
||||
class="cls-9"
|
||||
points="8 42 0 34 0 35.41 8 43.41 8 42"
|
||||
/>
|
||||
<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
|
||||
class="cls-9"
|
||||
points="8 59.12 0 51.12 0 52.53 8 60.53 8 59.12"
|
||||
/>
|
||||
<polygon
|
||||
class="cls-9"
|
||||
points="8 64.83 0 56.83 0 58.24 8 66.24 8 64.83"
|
||||
/>
|
||||
<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
|
||||
class="cls-9"
|
||||
points="8 81.95 0 73.95 0 75.36 8 83.36 8 81.95"
|
||||
/>
|
||||
<polygon
|
||||
class="cls-9"
|
||||
points="8 87.66 0 79.66 0 81.07 8 89.07 8 87.66"
|
||||
/>
|
||||
<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
|
||||
class="cls-9"
|
||||
points="8 104.78 0 96.78 0 98.19 8 106.19 8 104.78"
|
||||
/>
|
||||
<polygon
|
||||
class="cls-9"
|
||||
points="8 110.48 0 102.48 0 103.9 8 111.9 8 110.48"
|
||||
/>
|
||||
<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
|
||||
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>
|
||||
<polygon class="cls-9" points="8 36.29 0 28.29 0 29.71 8 37.71 8 36.29" />
|
||||
<polygon class="cls-9" points="8 42 0 34 0 35.41 8 43.41 8 42" />
|
||||
<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 class="cls-9" points="8 59.12 0 51.12 0 52.53 8 60.53 8 59.12" />
|
||||
<polygon class="cls-9" points="8 64.83 0 56.83 0 58.24 8 66.24 8 64.83" />
|
||||
<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 class="cls-9" points="8 81.95 0 73.95 0 75.36 8 83.36 8 81.95" />
|
||||
<polygon class="cls-9" points="8 87.66 0 79.66 0 81.07 8 89.07 8 87.66" />
|
||||
<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 class="cls-9" points="8 104.78 0 96.78 0 98.19 8 106.19 8 104.78" />
|
||||
<polygon class="cls-9" points="8 110.48 0 102.48 0 103.9 8 111.9 8 110.48" />
|
||||
<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 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="94" y="26" width="1" height="20" />
|
||||
<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"
|
||||
/>
|
||||
<rect class="cls-8" x="85" y="81" width="138" height="58" />
|
||||
<path
|
||||
class="cls-9"
|
||||
d="M222,82v56H86V82H222m2-2H84v60H224V80Z"
|
||||
/>
|
||||
<path class="cls-9" d="M222,82v56H86V82H222m2-2H84v60H224V80Z" />
|
||||
<text class="cls-19" transform="translate(100.63 122)">
|
||||
{{ alarmLevelTotal }}
|
||||
</text>
|
||||
<rect class="cls-20" x="109.5" y="80" width="80" height="2" />
|
||||
<rect
|
||||
class="cls-21"
|
||||
x="109.5"
|
||||
y="138"
|
||||
width="80"
|
||||
height="2"
|
||||
/>
|
||||
<rect class="cls-21" x="109.5" y="138" width="80" height="2" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
@ -416,7 +225,19 @@
|
||||
</template>
|
||||
|
||||
<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 { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
@ -425,23 +246,37 @@ import BorderBox from '../components/BorderBox.vue'
|
||||
import { customData as customDataConfig } from './config'
|
||||
|
||||
import VChart from 'vue-echarts'
|
||||
import {isPreview} from '@/utils'
|
||||
import {graphic} from "echarts";
|
||||
import {cloneDeep} from 'lodash'
|
||||
import moment from "moment"
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
|
||||
import { isPreview } from '@/utils'
|
||||
import { graphic } from 'echarts'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import moment from 'moment'
|
||||
import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
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 alarmLevelTotal = ref(0)
|
||||
const commonName = ref('一般')
|
||||
@ -459,14 +294,14 @@ const alarmData = ref<any>({})
|
||||
const getStyle = (radius: number) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
overflow: 'hidden',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
const customData: Ref<typeof customDataConfig> = computed(() => {
|
||||
return props.chartConfig.customData as typeof customDataConfig
|
||||
})
|
||||
const changeTab = (flag: number)=>{
|
||||
tab.value = flag
|
||||
const changeTab = (flag: number) => {
|
||||
tab.value = flag
|
||||
if (tab.value === 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) {
|
||||
@ -475,63 +310,65 @@ tab.value = flag
|
||||
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 params = {
|
||||
signal_ids:customData.value.signal_ids.length?customData.value.signal_ids.split(','):[],
|
||||
alarmConfirmStatus:customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus : [],
|
||||
alarmRecoveryStatus : customData.value.alarmRecoveryStatus.length ? customData.value.alarmRecoveryStatus : []
|
||||
}
|
||||
publicInterface('/dcim/dems/devie_history_alarm', 'alarm_statistical_by_time', params).then((res:any) => {
|
||||
signal_ids: customData.value.signal_ids.length ? customData.value.signal_ids.split(',') : [],
|
||||
alarmConfirmStatus: customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus : [],
|
||||
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')
|
||||
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}
|
||||
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
|
||||
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(
|
||||
watchedProperties,
|
||||
(newVal, oldVal) => {
|
||||
getData()
|
||||
},
|
||||
{ deep: true, }
|
||||
);
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
|
||||
getData()
|
||||
})
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
if (!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
@ -575,9 +412,9 @@ onUnmounted(() => {
|
||||
font-family: 'PingFang-SC-Bold';
|
||||
}
|
||||
}
|
||||
}
|
||||
.dynamic-component-main{
|
||||
width:100%;
|
||||
}
|
||||
.dynamic-component-main {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
// @import "./index.scss";
|
||||
@ -597,7 +434,6 @@ onUnmounted(() => {
|
||||
.cls-5 {
|
||||
font-size: 14px;
|
||||
fill: #fff;
|
||||
|
||||
}
|
||||
.cls-15,
|
||||
.cls-5 {
|
||||
@ -658,7 +494,6 @@ onUnmounted(() => {
|
||||
.cls-19 {
|
||||
fill: #fff;
|
||||
|
||||
|
||||
font-size: 30px;
|
||||
}
|
||||
.cls-20 {
|
||||
@ -673,6 +508,6 @@ onUnmounted(() => {
|
||||
glyph-orientation-vertical: 0deg;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.3em;
|
||||
fill:#fff;
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||
</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="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警确认状态" :alone="true">
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<div style="overflow: visible;">
|
||||
<div style="overflow: visible">
|
||||
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
|
||||
<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 === 1}" @click="changeTab(1)">年</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>
|
||||
</div>
|
||||
<v-chart ref="vChartRef" :option="chartOption" autoresize></v-chart>
|
||||
|
||||
</BorderBox>
|
||||
</div>
|
||||
</template>
|
||||
@ -14,14 +13,13 @@
|
||||
<script setup lang="ts">
|
||||
import BorderBox from '../components/BorderBox.vue'
|
||||
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 { CreateComponentType } from '@/packages/index.d'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import {isPreview} from '@/utils'
|
||||
import { isPreview } from '@/utils'
|
||||
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({
|
||||
chartConfig: {
|
||||
@ -33,7 +31,7 @@ const tab = ref(0)
|
||||
const getStyle = (radius: number) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
overflow: 'hidden',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,17 +39,14 @@ const customData: Ref<typeof customDataConfig> = computed(() => {
|
||||
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
|
||||
getData()
|
||||
}
|
||||
|
||||
|
||||
let chartOption:Ref<any> = ref({
|
||||
let chartOption: Ref<any> = ref({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@ -59,8 +54,7 @@ let chartOption:Ref<any> = ref({
|
||||
lineStyle: {
|
||||
color: '#27558e'
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: '2%',
|
||||
@ -68,35 +62,40 @@ let chartOption:Ref<any> = ref({
|
||||
left: '2%',
|
||||
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'
|
||||
}
|
||||
},
|
||||
// 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: [
|
||||
@ -106,20 +105,21 @@ let chartOption:Ref<any> = ref({
|
||||
boundaryGap: false,
|
||||
data: [],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
inside: false,
|
||||
// inside: false,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#ccc',
|
||||
fontWeight: 'normal',
|
||||
fontSize: '12'
|
||||
},
|
||||
interval: 0
|
||||
|
||||
},
|
||||
formatter: function(value:any) {
|
||||
return value.length>8?value.slice(5):value
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
@ -146,77 +146,67 @@ let chartOption:Ref<any> = ref({
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
]
|
||||
},)
|
||||
series: []
|
||||
})
|
||||
const vChartRef = ref()
|
||||
|
||||
|
||||
const getData = () => {
|
||||
let params:any = {
|
||||
signal_ids:signal_ids.length?signal_ids.split(','):[],
|
||||
let params: any = {
|
||||
signal_ids: signal_ids.length ? signal_ids.split(',') : [],
|
||||
alarmConfirmStatus,
|
||||
alarmRecoveryStatus,
|
||||
level
|
||||
}
|
||||
tab.value===0?params['before_day'] = 30:params['before_month'] = 12
|
||||
publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', params).then((response:any) => {
|
||||
tab.value === 0 ? (params['before_day'] = 30) : (params['before_month'] = 12)
|
||||
publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', params).then((response: any) => {
|
||||
let res = response?.data
|
||||
console.log(res,'res');
|
||||
|
||||
|
||||
if (res && res['series']) {
|
||||
chartOption.value.xAxis[0]['data'] = res['legend']
|
||||
chartOption.value.legend.data = []
|
||||
chartOption.value.series = []
|
||||
for (let i = 0; i < res['series'].length; i++) {
|
||||
chartOption.value.series.push(
|
||||
{
|
||||
chartOption.value.series.push({
|
||||
name: res['series'][i]['name'],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: true,
|
||||
symbol: 'circle',
|
||||
data: res['series'][i]['data']
|
||||
}
|
||||
)
|
||||
})
|
||||
chartOption.value.legend.data.push({ name: res['series'][i]['name'] })
|
||||
}
|
||||
console.log(chartOption.value,'chartOption');
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
let timer:unknown
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
if(!isPreview()) return
|
||||
if(props.chartConfig.request.requestInterval) {
|
||||
if(timer) clearInterval(timer as number)
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
let timer: unknown
|
||||
watch(
|
||||
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
|
||||
v => {
|
||||
if (!isPreview()) return
|
||||
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(() => {
|
||||
}, number)
|
||||
timer = setInterval(() => {}, number)
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
if (!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
}, number)
|
||||
timer = setInterval(() => {}, number)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer) clearInterval(timer as number)
|
||||
if (timer) clearInterval(timer as number)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -241,13 +231,13 @@ onUnmounted(() => {
|
||||
font-family: 'PingFang-SC-Bold';
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
.radio{
|
||||
.radio {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -40px;
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<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 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
|
||||
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>
|
||||
</template>
|
||||
@ -15,16 +22,14 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
const props = defineProps(['customData', 'request'])
|
||||
const multipleSourceOptions = [
|
||||
{
|
||||
label: '配电设备',
|
||||
value:'device'
|
||||
label: '动环设备',
|
||||
value: 'device'
|
||||
},
|
||||
{
|
||||
label: 'IT设备',
|
||||
value:'IT'
|
||||
},
|
||||
|
||||
value: 'IT'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,51 +1,73 @@
|
||||
<template>
|
||||
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
|
||||
|
||||
<div class="container">
|
||||
<div class="container" v-if="type_count.length">
|
||||
<div class="classify" v-for="item in type_count" :key="item">
|
||||
<div class="img">
|
||||
<img 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="">
|
||||
<img
|
||||
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]}}
|
||||
|
||||
{{ Object.values(item)[0] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
{{Object.keys(item)[0]}}
|
||||
{{ 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>
|
||||
</BorderBox>
|
||||
</template>
|
||||
|
||||
<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 { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import BorderBox from '../components/BorderBox.vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import {isPreview} from '@/utils'
|
||||
import {graphic} from "echarts";
|
||||
import {cloneDeep} from 'lodash'
|
||||
import moment from "moment"
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { graphic } from 'echarts'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import moment from 'moment'
|
||||
import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
|
||||
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 props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
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) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
@ -53,30 +75,31 @@ const getStyle = (radius: number) => {
|
||||
}
|
||||
}
|
||||
|
||||
let type_count:any = ref([])
|
||||
let type_count: any = ref([])
|
||||
const queryParams = {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
const getData = () => {
|
||||
if(props.chartConfig?.customData?.currentSource==='IT'){
|
||||
if (props.chartConfig?.customData?.currentSource === 'IT') {
|
||||
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}).then(res => {
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
type_count.value = res.data.type_count
|
||||
type_count.value = res?.data?.type_count||[]
|
||||
// for (const key in computeNodeData) {
|
||||
// computeNodeData[key] = res.data[key]
|
||||
// }
|
||||
}
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
publicInterface('/dcim/dems/device', 'get_dev_category_count', {
|
||||
device_codes: customData.value.device_codes?.length ? customData.value.device_codes.split(',') : [],
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}).then(res => {
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
type_count.value = res.data.map((item:any)=>{
|
||||
type_count.value = res.data.map((item: any) => {
|
||||
return {
|
||||
[item.name]:item.count
|
||||
[item.name]: item.count
|
||||
}
|
||||
})
|
||||
// for (const key in computeNodeData) {
|
||||
@ -85,52 +108,60 @@ const getData = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
let timer:unknown
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
if(!isPreview()) return
|
||||
console.log(props,'props')
|
||||
let timer: unknown
|
||||
console.log(
|
||||
props.chartConfig.request.requestInterval,
|
||||
'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(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)
|
||||
if (props.chartConfig.request.requestInterval) {
|
||||
startInterval()
|
||||
}
|
||||
})
|
||||
|
||||
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()
|
||||
})
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
// 根据currentSource去获取对应 参数
|
||||
}
|
||||
)
|
||||
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 number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
console.log('class_setInterval')
|
||||
nextTick(() => {
|
||||
getData()
|
||||
})
|
||||
}, number)
|
||||
}
|
||||
onMounted(() => {
|
||||
getData()
|
||||
startInterval()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer as number)
|
||||
@ -146,45 +177,42 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.classify{
|
||||
.classify {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
overflow: auto;
|
||||
color:#fff;
|
||||
.img{
|
||||
color: #fff;
|
||||
.img {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.value{
|
||||
.value {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.count{
|
||||
.count {
|
||||
font-size: 20px;
|
||||
padding: 0 5px;
|
||||
font-family: LESLIE;
|
||||
@ -193,8 +221,14 @@ onUnmounted(() => {
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
letter-spacing: 0em;
|
||||
font-variation-settings: "opsz" auto;
|
||||
color: #4196FF;
|
||||
font-variation-settings: 'opsz' auto;
|
||||
color: #4196ff;
|
||||
}
|
||||
.no-data {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
img {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<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 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
|
||||
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>
|
||||
</template>
|
||||
@ -15,16 +22,14 @@ import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
const props = defineProps(['customData', 'request'])
|
||||
const multipleSourceOptions = [
|
||||
{
|
||||
label: '配电设备',
|
||||
value:'device'
|
||||
label: '动环设备',
|
||||
value: 'device'
|
||||
},
|
||||
{
|
||||
label: 'IT设备',
|
||||
value:'IT'
|
||||
},
|
||||
|
||||
value: 'IT'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
<template>
|
||||
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: visible">
|
||||
|
||||
<div class="overview" v-for="item in type_count" :key="item">
|
||||
<div class="img">
|
||||
<img 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">
|
||||
{{item.value}}
|
||||
|
||||
<img
|
||||
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" :class="{ brand: item.label === '常用品牌' }">
|
||||
{{ item.value || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
{{item.label}}
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</BorderBox>
|
||||
@ -25,21 +27,19 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import BorderBox from '../components/BorderBox.vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import {isPreview} from '@/utils'
|
||||
import {graphic} from "echarts";
|
||||
import {cloneDeep} from 'lodash'
|
||||
import moment from "moment"
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import {RequestHttpIntervalEnum} from "@/enums/httpEnum";
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
import { isPreview } from '@/utils'
|
||||
import { graphic } from 'echarts'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import moment from 'moment'
|
||||
import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
|
||||
import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
|
||||
import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||
@ -50,56 +50,62 @@ const getStyle = (radius: number) => {
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
let type_count:any = ref([])
|
||||
let type_count: any = ref([])
|
||||
const queryParams = {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
const getData = () => {
|
||||
if(props.chartConfig?.customData?.currentSource==='IT'){
|
||||
if (props.chartConfig?.customData?.currentSource === 'IT') {
|
||||
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}).then(res => {
|
||||
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
let commonBrands = res.data.type_count?.reduce((prev:any, curr:any) => {
|
||||
const prevValue:any = Object.values(prev)[0];
|
||||
const currValue:any = Object.values(curr)[0];
|
||||
return currValue > prevValue ? curr : prev;
|
||||
},{});
|
||||
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)
|
||||
label: '设备总数',
|
||||
value: res.data?.type_count?.reduce((pre: any, cur: any) => (pre += Object.values(cur)[0]), 0) || '0'
|
||||
},
|
||||
{
|
||||
label:'常用品牌',
|
||||
value:Object.keys(commonBrands)[0],
|
||||
},
|
||||
label: '常用品牌',
|
||||
value: res.data.brand_count ? (commonBrands ? Object.keys(commonBrands)[0] : '未知品牌') : '无' //无数据处理
|
||||
}
|
||||
]
|
||||
type_count.value = obj
|
||||
console.log(type_count, 'type_count_type_count')
|
||||
|
||||
// for (const key in computeNodeData) {
|
||||
// computeNodeData[key] = res.data[key]
|
||||
// }
|
||||
}
|
||||
})
|
||||
}else{
|
||||
publicInterface('/dcim/dems/device', 'get_dev_category_count', {
|
||||
} else {
|
||||
publicInterface('/dcim/dems/device', 'get_dev_brand_count', {
|
||||
device_codes: props.chartConfig?.customData?.device_codes?.length
|
||||
? props.chartConfig?.customData?.device_codes?.split(',')
|
||||
: [],
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}).then(res => {
|
||||
}).then(res => {
|
||||
if (res && res.data) {
|
||||
const commonBrands:any = res?.data?.reduce((prev:any, curr:any) => {
|
||||
return curr.count > prev.count ? curr : prev;
|
||||
},{});
|
||||
const commonBrands: any = res?.data?.reduce((prev: any, curr: any) => {
|
||||
// 如果 prev 不存在，则初始化为当前元素
|
||||
return prev ? (curr.count > prev.count ? curr : prev) : curr
|
||||
}, undefined)
|
||||
let obj = [
|
||||
{
|
||||
label:'设备总数',
|
||||
value:res.data.reduce((pre:any,cur:any)=>pre+=cur.count,0)
|
||||
label: '设备总数',
|
||||
value: res.data.reduce((pre: any, cur: any) => (pre += cur.count), 0)
|
||||
},
|
||||
{
|
||||
label:'常用品牌',
|
||||
value:commonBrands.name,
|
||||
},
|
||||
label: '常用品牌',
|
||||
value: res?.data?.length ? commonBrands?.name || '未知品牌' : '无' // 无数据处理
|
||||
}
|
||||
]
|
||||
type_count.value = obj
|
||||
|
||||
@ -109,57 +115,56 @@ const getData = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
let timer:unknown
|
||||
console.log([props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),'[props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit]_overview')
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
console.log(v,'overview_v')
|
||||
if(!isPreview()) return
|
||||
console.log(props,'props')
|
||||
let timer: unknown
|
||||
watch(
|
||||
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
|
||||
v => {
|
||||
if (!isPreview()) return
|
||||
|
||||
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)
|
||||
if (props.chartConfig.request.requestInterval) {
|
||||
startInterval()
|
||||
}
|
||||
},{
|
||||
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(() => {
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.chartConfig?.customData?.currentSource,
|
||||
() => {
|
||||
getData()
|
||||
})
|
||||
if(!isPreview()) return
|
||||
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
|
||||
// 根据currentSource去获取对应 参数
|
||||
}
|
||||
)
|
||||
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 number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
console.log('class_setInterval')
|
||||
nextTick(() => {
|
||||
getData()
|
||||
})
|
||||
}, number)
|
||||
}
|
||||
onMounted(() => {
|
||||
getData()
|
||||
startInterval()
|
||||
})
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer as number)
|
||||
@ -175,34 +180,36 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview{
|
||||
.overview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
color:#fff;
|
||||
.img{
|
||||
color: #fff;
|
||||
padding: 0 20px;
|
||||
.img {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
.value{
|
||||
.value {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
white-space: pre-wrap;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.brand {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -36,6 +36,7 @@ export const option = {
|
||||
paddingY: 10,
|
||||
textAlign: 'center', // 水平对齐方式
|
||||
fontWeight: 'normal',
|
||||
spaceName:false,
|
||||
|
||||
// 边框
|
||||
borderWidth: 0,
|
||||
|
||||
@ -7,12 +7,19 @@
|
||||
<SettingItem>
|
||||
<n-text :depth="3">开启数据时，将会覆盖此文本</n-text>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showUnit" size="small" />
|
||||
<n-text>展示单位</n-text>
|
||||
</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 name="链接" :alone="true">-->
|
||||
<!-- <setting-item>-->
|
||||
|
||||
@ -81,6 +81,7 @@ const option = shallowReactive({
|
||||
watch(
|
||||
[() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit, () => props.chartConfig.option.showStatusColor],
|
||||
([newData, newShowUnit, showStatusColor]: [any, boolean, boolean]) => {
|
||||
console.log(newData,'newData_watch')
|
||||
option.dataset = newData
|
||||
option.showUnit = newShowUnit
|
||||
option.showStatusColor = showStatusColor
|
||||
|
||||
@ -180,14 +180,21 @@ useChartCommonData(props.chartConfig, useChartEditStore)
|
||||
}
|
||||
:deep(td) {
|
||||
text-align: left !important;
|
||||
padding-left:16px;
|
||||
|
||||
// padding-left: 10px;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background-color:#1A1D25;
|
||||
text-align: left !important;
|
||||
padding-left:16px;
|
||||
|
||||
}
|
||||
.customDataTable{
|
||||
:deep(td) {
|
||||
background-color:rgba(65, 150, 255, 0.05);
|
||||
padding-left:16px;
|
||||
|
||||
}
|
||||
// :deep(th) {
|
||||
// background-color:rgba(65, 150, 255, 0.05);
|
||||
|
||||
@ -24,6 +24,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
// 请求基础属性
|
||||
export const requestConfig: RequestConfigType = {
|
||||
fetchInterval:null,
|
||||
immediate:false,
|
||||
requestDataType: RequestDataTypeEnum.STATIC,
|
||||
requestHttpType: RequestHttpEnum.GET,
|
||||
@ -58,11 +59,13 @@ const commonData: commonDataType = {
|
||||
areaDevCount: {
|
||||
enable: false,
|
||||
dataSource: '',
|
||||
space_complete_id:''
|
||||
space_complete_id:'',
|
||||
device_codes:''
|
||||
},
|
||||
assetsClass: {
|
||||
enable: false,
|
||||
dataSource: ''
|
||||
dataSource: '',
|
||||
device_codes:''
|
||||
},
|
||||
pointHistory: {
|
||||
enable: false,
|
||||
@ -103,7 +106,8 @@ const commonData: commonDataType = {
|
||||
companyTempTop: {
|
||||
enable: false,
|
||||
signal_ids:'131240020010',
|
||||
space_complete_id: '.7.9.70.'
|
||||
space_complete_id: '.7.9.70.',
|
||||
spaceLevel: 2,
|
||||
},
|
||||
alarmTrend: {
|
||||
enable: false,
|
||||
@ -119,6 +123,7 @@ const commonData: commonDataType = {
|
||||
categoryBrandCountTable: {
|
||||
enable: false,
|
||||
currentSource:'',
|
||||
device_codes:''
|
||||
},
|
||||
singlePoint: {
|
||||
enable: false,
|
||||
|
||||
@ -214,6 +214,8 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
|
||||
|
||||
// 单个图表请求配置
|
||||
export interface RequestConfigType extends RequestPublicConfigType {
|
||||
// 请求的定时器
|
||||
fetchInterval?:any
|
||||
// 是否立即执行
|
||||
immediate?:boolean
|
||||
// 所选全局数据池的对应 id
|
||||
@ -362,12 +364,14 @@ export interface DeviceClassType {
|
||||
export interface AssetsClassType {
|
||||
enable: boolean
|
||||
dataSource: string
|
||||
device_codes:string
|
||||
}
|
||||
// 局房温度Top10
|
||||
export interface CompanyTempTopType {
|
||||
enable: boolean
|
||||
space_complete_id: string,
|
||||
space_complete_id: string
|
||||
signal_ids:string
|
||||
spaceLevel:number
|
||||
|
||||
}
|
||||
// 告警趋势
|
||||
@ -383,6 +387,7 @@ export interface AreaDevCountType {
|
||||
enable: boolean
|
||||
dataSource: string
|
||||
space_complete_id:string
|
||||
device_codes:string
|
||||
}
|
||||
|
||||
// 测点表格值
|
||||
@ -393,6 +398,7 @@ export interface PointTableType {
|
||||
export interface CategoryBrandCountTableType {
|
||||
enable: boolean
|
||||
currentSource: string
|
||||
device_codes:string
|
||||
}
|
||||
|
||||
// 手动输入值
|
||||
|
||||
@ -4,11 +4,15 @@ import { cloneDeep } from 'lodash'
|
||||
export const useGlobalQueryParamsStore = defineStore({
|
||||
id: 'useGlobalQueryParamsStore',
|
||||
state: () => ({
|
||||
queryParams: {}
|
||||
queryParams: {},
|
||||
areaDevCountQueryParams:{}
|
||||
}),
|
||||
getters: {
|
||||
getGlobalQueryParams():{[k:string]: any} {
|
||||
return this.queryParams
|
||||
},
|
||||
getAreaDevCountQueryParams():{[k:string]: any} {
|
||||
return this.areaDevCountQueryParams
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -19,6 +23,15 @@ export const useGlobalQueryParamsStore = defineStore({
|
||||
else {
|
||||
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)
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<n-switch v-model:value="currentObj.enable"/>
|
||||
</n-space>
|
||||
</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="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警确认状态" :alone="true">
|
||||
|
||||
@ -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>
|
||||
@ -1,39 +1,39 @@
|
||||
<template>
|
||||
<setting-item-box name="启用数据" :alone="true">
|
||||
<n-space justify="start">
|
||||
<n-switch v-model:value="currentObj.enable"/>
|
||||
<n-switch v-model:value="currentObj.enable" />
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<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 v-if="currentObj.dataSource === 'device'" 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, AssetsClassType} from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
|
||||
import { computed } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { useTargetData } from '../../hooks/useTargetData.hook'
|
||||
import { commonDataType, AssetsClassType } 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 AssetsClassType
|
||||
})
|
||||
console.log(targetData,'targetData')
|
||||
console.log(targetData, 'targetData')
|
||||
const multipleSourceOptions = [
|
||||
{
|
||||
label: '配电设备',
|
||||
value:'device'
|
||||
label: '动环设备',
|
||||
value: 'device'
|
||||
},
|
||||
{
|
||||
label: 'IT设备',
|
||||
value:'IT'
|
||||
},
|
||||
|
||||
value: 'IT'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -3,12 +3,17 @@
|
||||
<n-space justify="start">
|
||||
<n-switch v-model:value="categoryBrandCountTable.enable" />
|
||||
</n-space>
|
||||
|
||||
</setting-item-box>
|
||||
<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
|
||||
v-if="categoryBrandCountTable.currentSource === 'device'"
|
||||
name="分类编码（多个编码使用英文逗号分隔）"
|
||||
:alone="true"
|
||||
>
|
||||
<n-input v-model:value="categoryBrandCountTable.device_codes" size="small" placeholder="请输入" />
|
||||
</setting-item-box>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -21,19 +26,20 @@ import { commonDataType, CategoryBrandCountTableType } from '@/store/modules/cha
|
||||
|
||||
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 multipleSourceOptions = [
|
||||
const categoryBrandCountTable: Ref<CategoryBrandCountTableType> = computed(
|
||||
() => targetData.value.commonData.categoryBrandCountTable
|
||||
)
|
||||
const multipleSourceOptions = [
|
||||
{
|
||||
label: '配电设备',
|
||||
value:'device'
|
||||
label: '动环设备',
|
||||
value: 'device'
|
||||
},
|
||||
{
|
||||
label: 'IT设备',
|
||||
value:'IT'
|
||||
},
|
||||
|
||||
value: 'IT'
|
||||
}
|
||||
]
|
||||
// type computeIdsItemType = {
|
||||
// id: string,
|
||||
@ -67,9 +73,6 @@ const categoryBrandCountTable: Ref<CategoryBrandCountTableType> = computed(() =>
|
||||
// const handleDelete = (i: number) => {
|
||||
// targetData.value.commonData.pointTable.ids.splice(i, 1)
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -4,12 +4,16 @@
|
||||
<n-switch v-model:value="currentObj.enable"/>
|
||||
</n-space>
|
||||
</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="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="空间ID" :alone="true">
|
||||
<n-input v-model:value="currentObj.space_complete_id" size="small" placeholder="请输入"/>
|
||||
</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>
|
||||
|
||||
|
||||
@ -10,13 +10,13 @@
|
||||
<setting-item-box name="统计方式" :alone="true">
|
||||
<n-select multiple v-model:value="pointHistory.methods" :options="MethodsOptions" size="small" />
|
||||
</setting-item-box>
|
||||
<setting-item-box name="测点ID" :alone="true">
|
||||
<setting-item-box name="测点编码" :alone="true">
|
||||
<n-space vertical>
|
||||
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
|
||||
<n-input
|
||||
:value="item.value"
|
||||
@update:value="(v: string) => handleChange(v, i)"
|
||||
placeholder="请输入测点ID"
|
||||
placeholder="请输入测点编码"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
<n-switch v-model:value="pointRealTime.with_device_name" />
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="测点ID" :alone="true">
|
||||
<setting-item-box name="测点编码" :alone="true">
|
||||
<n-space vertical>
|
||||
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
|
||||
<n-input
|
||||
:value="item.value"
|
||||
@update:value="(v: string) => handleChange(v, i)"
|
||||
placeholder="请输入测点ID"
|
||||
placeholder="请输入测点编码"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<n-switch v-model:value="pointTable.enable" />
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="测点ID" :alone="true">
|
||||
<setting-item-box name="测点编码" :alone="true">
|
||||
<n-space vertical>
|
||||
<n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
|
||||
<n-input
|
||||
:value="item.value"
|
||||
@update:value="(v: string) => handleChange(v, i)"
|
||||
placeholder="请输入测点ID"
|
||||
placeholder="请输入测点编码"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
|
||||
@ -4,10 +4,10 @@
|
||||
<n-switch v-model:value="singlePoint.enable"/>
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="测点ID" :alone="true">
|
||||
<setting-item-box name="测点编码" :alone="true">
|
||||
<n-input
|
||||
v-model:value="singlePoint.pointId"
|
||||
placeholder="请输入测点ID"
|
||||
placeholder="请输入测点编码"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
|
||||
@ -2,31 +2,31 @@
|
||||
<div v-if="!IsStatic && !targetData.chartConfig.conDataKey" class="go-chart-configurations-data">
|
||||
<template v-if="!IsCommonSingle">
|
||||
<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>
|
||||
<PointHistory v-if="matchComponent(CurrentSourceEnum.POINTHISTORY)"/>
|
||||
<EnergyUseHistory v-else-if="matchComponent(CurrentSourceEnum.ENERGYUSEHISTORY)"/>
|
||||
<RecordValueHistory v-else-if="matchComponent(CurrentSourceEnum.RECORDVALUEHISTORY)"/>
|
||||
<PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)"/>
|
||||
<MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)"/>
|
||||
<DeviceClass v-else-if="matchComponent(CurrentSourceEnum.DEVICECLASS)"/>
|
||||
<AssetsClass v-else-if="matchComponent(CurrentSourceEnum.ASSETSCLASS)"/>
|
||||
<CompanyTempTop v-else-if="matchComponent(CurrentSourceEnum.COMPANYTEMPTOP)"/>
|
||||
<AlarmTrend v-else-if="matchComponent(CurrentSourceEnum.ALARMTREND)"/>
|
||||
<PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)"/>
|
||||
<CategoryBrandCountTable v-else-if="matchComponent(CurrentSourceEnum.CATEGORYBRANDCOUNTTABLE)"/>
|
||||
<ManualInput v-else-if="matchComponent(CurrentSourceEnum.MANUALINPUT)"/>
|
||||
|
||||
<PointHistory v-if="matchComponent(CurrentSourceEnum.POINTHISTORY)" />
|
||||
<EnergyUseHistory v-else-if="matchComponent(CurrentSourceEnum.ENERGYUSEHISTORY)" />
|
||||
<RecordValueHistory v-else-if="matchComponent(CurrentSourceEnum.RECORDVALUEHISTORY)" />
|
||||
<PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)" />
|
||||
<MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)" />
|
||||
<DeviceClass v-else-if="matchComponent(CurrentSourceEnum.DEVICECLASS)" />
|
||||
<AssetsClass v-else-if="matchComponent(CurrentSourceEnum.ASSETSCLASS)" />
|
||||
<CompanyTempTop v-else-if="matchComponent(CurrentSourceEnum.COMPANYTEMPTOP)" />
|
||||
<AlarmTrend v-else-if="matchComponent(CurrentSourceEnum.ALARMTREND)" />
|
||||
<AreaDevCount v-else-if="matchComponent(CurrentSourceEnum.AREADEVCOUNT)" />
|
||||
<PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)" />
|
||||
<CategoryBrandCountTable v-else-if="matchComponent(CurrentSourceEnum.CATEGORYBRANDCOUNTTABLE)" />
|
||||
<ManualInput v-else-if="matchComponent(CurrentSourceEnum.MANUALINPUT)" />
|
||||
</template>
|
||||
<template v-else-if="IsCommonSingle">
|
||||
<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>
|
||||
<SinglePoint v-if="matchComponent(CurrentSourceEnum.SINGLEPOINT)"/>
|
||||
<ManualInputSingle v-if="matchComponent(CurrentSourceEnum.MANUALINPUTSINGLE)"/>
|
||||
<SinglePoint v-if="matchComponent(CurrentSourceEnum.SINGLEPOINT)" />
|
||||
<ManualInputSingle v-if="matchComponent(CurrentSourceEnum.MANUALINPUTSINGLE)" />
|
||||
</template>
|
||||
<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 v-if="!matchComponent(CurrentSourceEnum.MANUALINPUT)" name="更新间隔" :alone="true">
|
||||
<n-input-group>
|
||||
@ -36,16 +36,26 @@
|
||||
:show-button="false"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
style="flex: 1;"
|
||||
style="flex: 1"
|
||||
>
|
||||
</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>
|
||||
</setting-item-box>
|
||||
</div>
|
||||
<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">
|
||||
<n-input-group>
|
||||
<n-input-number
|
||||
@ -54,17 +64,21 @@
|
||||
:show-button="false"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
style="flex: 1;"
|
||||
style="flex: 1"
|
||||
>
|
||||
</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>
|
||||
</setting-item-box>
|
||||
</div>
|
||||
<div v-else-if="IsStatic">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-else-if="IsStatic">暂无数据</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -77,6 +91,7 @@ import MonthAlarmClass from './components/MonthAlarmClass.vue'
|
||||
import AssetsClass from './components/AssetsClass.vue'
|
||||
import CompanyTempTop from './components/CompanyTempTop.vue'
|
||||
import AlarmTrend from './components/AlarmTrend.vue'
|
||||
import AreaDevCount from './components/AreaDevCount.vue'
|
||||
import DeviceClass from './components/DeviceClass.vue'
|
||||
import PointTable from './components/PointTable.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 { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { PieCircleConfig } from '@/packages/components/Charts/Pies/PieCircle/index'
|
||||
import { TextBarrageConfig } from "@/packages/components/Informations/Texts/TextBarrage/index";
|
||||
import { TextCommonConfig } from "@/packages/components/Informations/Texts/TextCommon/index";
|
||||
import { TextGradientConfig } from "@/packages/components/Informations/Texts/TextGradient/index";
|
||||
import { WaterPoloConfig } from "@/packages/components/Charts/Mores/WaterPolo/index";
|
||||
import { TextBarrageConfig } from '@/packages/components/Informations/Texts/TextBarrage/index'
|
||||
import { TextCommonConfig } from '@/packages/components/Informations/Texts/TextCommon/index'
|
||||
import { TextGradientConfig } from '@/packages/components/Informations/Texts/TextGradient/index'
|
||||
import { WaterPoloConfig } from '@/packages/components/Charts/Mores/WaterPolo/index'
|
||||
import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/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 IsStatic = computed(() => {
|
||||
return targetData.value.chartConfig.chartFrame === ChartFrameEnum.STATIC
|
||||
})
|
||||
|
||||
/*
|
||||
* 通用组件再分为: 多个点的数据和 一个点的数据(用于圆环图等)
|
||||
* 通用组件再分为: 多个点的数据和 一个点的数据(用于圆环图等)
|
||||
*/
|
||||
const IsCommonSingle = computed(() => {
|
||||
let singleCharArr = [
|
||||
@ -124,9 +139,9 @@ const IsCommonSingle = computed(() => {
|
||||
TextGradientConfig,
|
||||
WaterPoloConfig,
|
||||
DashboardConfig,
|
||||
BorderCustom2Config,
|
||||
BorderCustom2Config
|
||||
]
|
||||
const { package:packageStr, category, key } = targetData.value.chartConfig
|
||||
const { package: packageStr, category, key } = targetData.value.chartConfig
|
||||
const flag = singleCharArr.some(_ => {
|
||||
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 matchComponent = (name: string) => {
|
||||
console.log(name,'name---')
|
||||
console.log(name, 'name---')
|
||||
return targetData.value.commonData.currentSource === name
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user