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

fix: 设备一张图

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

2
.env
View File

@ -5,7 +5,7 @@ VITE_DEV_PORT = '8080'
# VITE_DEV_PATH = 'http://192.168.0.34:11887'
VITE_DEV_PATH = 'http://192.168.0.34: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'

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

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

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

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

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

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

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

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

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

@ -23,8 +23,6 @@ import { handleNoParam } from './commonDataComponents/useNoParamRes'
import { handleManulInput } from './commonDataComponents/useManualInputRes'
import { 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 }
}

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

@ -1,18 +1,18 @@
<template>
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
:update-options="{replaceMerge: replaceMergeArr}"
autoresize
<v-chart
ref="vChartRef"
:init-options="initOptions"
:theme="themeColor"
:option="option"
:manual-update="isPreview()"
: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":
globalQueryParamsStore.setGlobalQueryParams({
space_complete_id : e.data.complete_id
})
console.log(chartEditStore.getComponentList,'chartEditStore_getComponentList')
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
chartEditStore.getComponentList.forEach(component=>{
// component.request.requestInterval = 10
// component.request.requestInterval = 15
component.request.immediate = true
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
})
// props.chartConfig.option.series[0].forEach(item=>{
useChartCommonData(component, useChartEditStore)
// })
})
break;
console.log(chartEditStore.getComponentList, 'chartEditStore_getComponentList')
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
chartEditStore.getComponentList.forEach(component => {
// component.request.requestInterval = 10
// component.request.requestInterval = 15
if (component.chartConfig.key === 'TextCommon' && component.option.spaceName) {
component.option.dataset = `当前：${e.data.complete_name}`
}
component.request.immediate = true
default:
break;
}
useChartCommonData(component, useChartEditStore)
})
break
default:
break
}
}
onMounted(() => {
if(vChartRef.value) {
if (vChartRef.value) {
vChartRef.value.chart.on('click', chartPEvents)
}
})

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

@ -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 />
@ -39,17 +39,19 @@ import { CanvasRenderer } from 'echarts/renderers'
import { useChartDataFetch } from '@/hooks'
import { mergeTheme, setOption } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartCommonData } from '@/hooks'
import { useChartCommonData } from '@/hooks'
import {isPreview, postMessageToParent} from '@/utils'
import { isPreview, postMessageToParent } from '@/utils'
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
import 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,17 +149,19 @@ 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 {
name: it.properties.name,
adcode: it.properties.adcode,
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,31 +253,50 @@ const hainanLandsHandle = async (newData: boolean) => {
}
}
const initSpaceName = (text: string) => {
componentList.value
.filter((v: any) => v.chartConfig.key === 'TextCommon' && v.option.spaceName)
.forEach((item: any) => {
item.option.dataset = `当前：${text}`
})
}
// 点击区域
const chartPEvents = (e: any) => {
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){
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)
return JSON.parse(item.space.extend_column_string).county_code===`${county.properties.adcode}`
}
})
if (county) {
const space_complete: any = customData.value.devList.find((item: any) => {
if (item.space.extend_column_string.length) {
return JSON.parse(item.space.extend_column_string).county_code === `${county.properties.adcode}`
}
})
// 找到空间标识的文字框然后进行赋值
initSpaceName(space_complete?.space.complete_name || `佛山市/${county.properties.name}`)
const chartEditStore = useChartEditStore()
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)
}
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
})
}
console.log(county,'county')
// // 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) {
return
@ -316,34 +339,37 @@ onMounted(() => {
})
})
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){
// let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${1111}</span></div>`
// return str
// }
let value: any
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
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){
// let str = `<div style="display: flex;align-items: center"><span style="margin-right: 20px;">${v.name}</span><span>${1111}</span></div>`
// return str
// }
let value: any
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
}
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}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
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">

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

@ -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: {
@ -70,33 +86,33 @@ const option = {
// },
// },
label: {
normal: {
show: false,
position: 'center',
formatter: '{text|{b}}\n{c} ({d}%)',
rich: {
text: {
color: "#666",
fontSize: 14,
align: 'center',
verticalAlign: 'middle',
padding: 8
},
value: {
color: "#8693F3",
fontSize: 24,
align: 'center',
verticalAlign: 'middle',
},
}
},
emphasis: {
show: false,
textStyle: {
fontSize: 24,
}
normal: {
show: false,
position: 'center',
formatter: '{text|{b}}\n{c} ({d}%)',
rich: {
text: {
color: '#666',
fontSize: 14,
align: 'center',
verticalAlign: 'middle',
padding: 8
},
value: {
color: '#8693F3',
fontSize: 24,
align: 'center',
verticalAlign: 'middle'
}
}
},
},
emphasis: {
show: false,
textStyle: {
fontSize: 24
}
}
}
}
]
}

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

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

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

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

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

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

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

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

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

@ -13,33 +13,59 @@
style="overflow: visible"
>
<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'?'已确认':'未确认' }}
<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-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,68 +227,74 @@ 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(res.errcode !== '00000') return
if(!res?.data) return
let arr:any = []
ids.forEach(id => {
arr.push(res.data[id] ? res.data[id][0] : null)
})
alarmVideos.value = arr.concat()
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 = []
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]) {
last = arr[i]
index = i
break
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)) : {
ip: '',
port: null,
account: '',
password: '',
channel: '',
brand: '',
plugin: '',
}
if(last) {
for(let k in obj) {
obj[k] = last[k]
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: ''
}
if (last) {
for (let k in obj) {
obj[k] = last[k]
}
}
obj.alarmId = alarmIds[index]
currentVideo.value = obj
obj.showForce = false
postMessageToParent({
type: 'openVideoV2',
data: obj
})
}
obj.alarmId = alarmIds[index]
currentVideo.value = obj
obj.showForce = false
postMessageToParent({
type: 'openVideoV2',
data: obj
})
})
)
}
}
const showLoading = ref(false)
const {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,15 +397,17 @@ 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) => {
return { label: item.label, value: Number(item.value), number: 0, color: item.remark }
})
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 }
})
}
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) => {
getData()
})
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}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
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;
}
}

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

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

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

@ -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('一般')
@ -449,89 +284,91 @@ const importantName = ref('重要')
const seriousName = ref('严重')
const urgentName = ref('紧急')
const alarmLevel = ref({
level_1: 0,
level_2: 0,
level_3: 0,
level_4: 0
level_1: 0,
level_2: 0,
level_3: 0,
level_4: 0
})
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
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) {
alarmLevel.value = alarmData.value ? alarmData.value['month'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 }
} else if (tab.value === 2) {
alarmLevel.value = alarmData.value ? alarmData.value['year'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 }
}
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) {
alarmLevel.value = alarmData.value ? alarmData.value['month'] : { level_1: 0, level_2: 0, level_3: 0, level_4: 0 }
} else if (tab.value === 2) {
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) => {
if (res.data) {
alarmData.value = res.data
console.log(alarmData.value,'getData_alarmLevel')
changeTab(tab.value)
}
})
}
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return
console.log(props,'props')
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
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
changeTab(tab.value)
}
})
}
let timer: unknown
watch(
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
v => {
if (!isPreview()) return
console.log(props, 'props')
if (props.chartConfig.request.requestInterval) {
if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
}
}
)
// 计算属性，用于拼接并排除 title
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, }
);
watchedProperties,
(newVal, oldVal) => {
getData()
},
{ 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(() => {
@ -555,29 +392,29 @@ onUnmounted(() => {
<style lang="scss" scoped>
.tab-item {
position: absolute;
top: 0;
right: 10px;
padding-right: 10px;
color: #fff;
height: 40px;
line-height: 40px;
.change_tab {
display: inline-block;
margin: 0 4px;
cursor: pointer;
font-size: 14px;
color: themed('dynamicComponentTabColor');
font-family: 'PingFang-SC-Regular';
&--active {
border-bottom: 1px solid #4196ff;
color: #4196ff;
font-family: 'PingFang-SC-Bold';
}
}
position: absolute;
top: 0;
right: 10px;
padding-right: 10px;
color: #fff;
height: 40px;
line-height: 40px;
.change_tab {
display: inline-block;
margin: 0 4px;
cursor: pointer;
font-size: 14px;
color: themed('dynamicComponentTabColor');
font-family: 'PingFang-SC-Regular';
&--active {
border-bottom: 1px solid #4196ff;
color: #4196ff;
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>

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

@ -3,7 +3,7 @@
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</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">

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

@ -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>
</div>
<v-chart ref="vChartRef" :option="chartOption" autoresize></v-chart>
<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,216 +39,208 @@ 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({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#27558e'
}
},
let chartOption: Ref<any> = ref({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#27558e'
}
}
},
grid: {
right: '2%',
top: '12%',
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'
// }
// },
legend: {
data: [],
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: '#ccc'
}
},
calculable: true,
xAxis: [
{
type: 'category',
name: '',
boundaryGap: false,
data: [],
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
// inside: false,
show: true,
textStyle: {
color: '#ccc',
},
grid: {
right: '2%',
top: '12%',
left: '2%',
bottom: '2%',
containLabel: true
},
color: ['#E5403D', '#EE7F57', '#EEC219', '#50AFCE', '#82C046'],
dataZoom:{
show: false,
height: 5,
xAxisIndex: [0],
bottom: 10,
showDetail: false,
showDataShadow: false,
borderColor: 'transparent',
textStyle: {
fontSize: 0
},
startValue: 0,
endValue: 5, // 从0开始的7个
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
handleSize: '0%',
handleStyle: {
color: '#d3dee5'
}
},
legend: {
data: [],
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: '#ccc'
},
},
calculable: true,
xAxis: [
{
type: 'category',
name: '',
boundaryGap: false,
data: [],
axisLine: {
show: true,
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
inside: false,
textStyle: {
color: '#ccc',
fontWeight: 'normal',
fontSize: '12'
},
interval: 0
},
}
],
yAxis: [
{
type: 'value',
name: '',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#ccc'
}
},
axisLine: {
lineStyle: {
color: '#4196ff',
opacity: 0.2
}
},
splitLine: {
lineStyle: {
color: '#e0e0e0'
}
formatter: function(value:any) {
return value.length>8?value.slice(5):value
}
}
],
series: [
]
},)
}
}
],
yAxis: [
{
type: 'value',
name: '',
minInterval: 1,
axisLabel: {
show: true,
textStyle: {
color: '#ccc'
}
},
axisLine: {
lineStyle: {
color: '#4196ff',
opacity: 0.2
}
},
splitLine: {
lineStyle: {
color: '#e0e0e0'
}
}
}
],
series: []
})
const vChartRef = ref()
const 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) => {
let res = response?.data
console.log(res,'res');
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
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(
{
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');
}
})
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({
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'] })
}
}
})
}
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)
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)
}
}
})
)
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>
.tab-item {
position: absolute;
top: 0;
right: 10px;
padding-right: 10px;
color: #fff;
height: 40px;
line-height: 40px;
.change_tab {
display: inline-block;
margin: 0 4px;
cursor: pointer;
font-size: 14px;
color: themed('dynamicComponentTabColor');
font-family: 'PingFang-SC-Regular';
&--active {
border-bottom: 1px solid #4196ff;
color: #4196ff;
font-family: 'PingFang-SC-Bold';
}
}
position: absolute;
top: 0;
right: 10px;
padding-right: 10px;
color: #fff;
height: 40px;
line-height: 40px;
.change_tab {
display: inline-block;
margin: 0 4px;
cursor: pointer;
font-size: 14px;
color: themed('dynamicComponentTabColor');
font-family: 'PingFang-SC-Regular';
&--active {
border-bottom: 1px solid #4196ff;
color: #4196ff;
font-family: 'PingFang-SC-Bold';
}
.box{
}
}
.box {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
.radio{
.radio {
position: absolute;
right: 0;
top: -40px;
}
}
</style>
</style>

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

@ -1,11 +1,18 @@
<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"/>
</setting-item-box>
<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>

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

@ -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="">
<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">
{{ Object.values(item)[0] }}
</div>
</div>
<div class="value">
{{Object.values(item)[0]}}
{{ Object.keys(item)[0] || '未知分类' }}
</div>
</div>
<div class="value">
{{Object.keys(item)[0]}}
</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,84 +75,93 @@ 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 => {
if (res && res.data) {
type_count.value = res.data.type_count
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
}else{
...globalQueryParamsStore.getGlobalQueryParams
}).then(res => {
if (res && res.data) {
type_count.value = res?.data?.type_count||[]
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
} else {
publicInterface('/dcim/dems/device', 'get_dev_category_count', {
...globalQueryParamsStore.getGlobalQueryParams
}).then(res => {
if (res && res.data) {
type_count.value = res.data.map((item:any)=>{
return {
[item.name]:item.count
}
})
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
device_codes: customData.value.device_codes?.length ? customData.value.device_codes.split(',') : [],
...globalQueryParamsStore.getGlobalQueryParams
}).then(res => {
if (res && res.data) {
type_count.value = res.data.map((item: any) => {
return {
[item.name]: item.count
}
})
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
}
}
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return
console.log(props,'props')
if(props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
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) {
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,55 +177,58 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
.container{
.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
overflow: auto;
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{
width: 100%;
height: 100%;
}
.value{
position: absolute;
width: 100%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
white-space: pre-wrap;
text-align: center;
font-size: 20px;
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
}
.value {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: pre-wrap;
text-align: center;
font-size: 20px;
}
}
}
.count {
font-size: 20px;
padding: 0 5px;
font-family: LESLIE;
font-size: 20px;
font-weight: 500;
line-height: 20px;
text-align: center;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
color: #4196ff;
}
.count{
font-size: 20px;
padding: 0 5px;
font-family: LESLIE;
font-size: 20px;
font-weight: 500;
line-height: 20px;
text-align: center;
letter-spacing: 0em;
font-variation-settings: "opsz" auto;
color: #4196FF;
.no-data {
flex-direction: column;
width: 100%;
img {
width: 120px;
}
}
</style>

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

@ -1,11 +1,18 @@
<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"/>
</setting-item-box>
<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>

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

@ -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,116 +50,121 @@ 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 => {
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;
},{});
let obj = [
{
label:'设备总数',
value:res.data.type_count.reduce((pre:any,cur:any)=>pre+=Object.values(cur)[0],0)
},
{
label:'常用品牌',
value:Object.keys(commonBrands)[0],
},
]
type_count.value = obj
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
}else{
publicInterface('/dcim/dems/device', 'get_dev_category_count', {
...globalQueryParamsStore.getGlobalQueryParams
}).then(res => {
if (res && res.data) {
const commonBrands:any = res?.data?.reduce((prev:any, curr:any) => {
return curr.count > prev.count ? curr : prev;
},{});
let obj = [
{
label:'设备总数',
value:res.data.reduce((pre:any,cur:any)=>pre+=cur.count,0)
},
{
label:'常用品牌',
value:commonBrands.name,
},
]
type_count.value = obj
...globalQueryParamsStore.getGlobalQueryParams
}).then(res => {
if (res && res.data) {
console.log(res.data, 'data____')
let commonBrands = res.data.brand_count?.reduce((prev: any, curr: any) => {
if (!prev) return curr
const prevValue: any = Object.values(prev)[0]
const currValue: any = Object.values(curr)[0]
return currValue > prevValue ? curr : prev
}, undefined)
let obj = [
{
label: '设备总数',
value: res.data?.type_count?.reduce((pre: any, cur: any) => (pre += Object.values(cur)[0]), 0) || '0'
},
{
label: '常用品牌',
value: res.data.brand_count ? (commonBrands ? Object.keys(commonBrands)[0] : '未知品牌') : '无' //无数据处理
}
]
type_count.value = obj
console.log(type_count, 'type_count_type_count')
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
} 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 => {
if (res && res.data) {
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?.length ? commonBrands?.name || '未知品牌' : '无' // 无数据处理
}
]
type_count.value = obj
// for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key]
// }
}
})
}
}
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')
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)
let timer: unknown
watch(
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
v => {
if (!isPreview()) return
if (props.chartConfig.request.requestInterval) {
startInterval()
}
},
{
deep: true
}
},{
deep:true,
})
watch(()=>props.chartConfig?.customData?.currentSource,()=>{
getData()
// 根据currentSource去获取对应 参数
})
watch(()=>props.chartConfig?.request?.immediate,(v)=>{
if(!v)return
getData()
props.chartConfig.request.immediate = false
// 根据currentSource去获取对应 参数
})
onMounted(() => {
nextTick(() => {
)
watch(
() => props.chartConfig?.customData?.currentSource,
() => {
getData()
})
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{
position: absolute;
width: 100%;
top:50%;
left:50%;
transform: translate(-50%,-50%);
white-space: pre-wrap;
text-align: center;
font-size: 20px;
width: 100px;
height: 100px;
.value {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: pre-wrap;
text-align: center;
font-size: 20px;
}
img {
width: 100%;
height: 100%;
}
}
img{
width: 100%;
height: 100%;
.brand {
font-size: 16px !important;
}
}
}
</style>

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

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

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

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

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

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

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

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

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

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

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

@ -214,6 +214,8 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
// 单个图表请求配置
export interface RequestConfigType extends RequestPublicConfigType {
// 请求的定时器
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
}
// 手动输入值

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

@ -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)
}
},
}
})

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

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

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

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

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

@ -1,39 +1,39 @@
<template>
<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"/>
</setting-item-box>
<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>

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

@ -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"/>
</setting-item-box>
<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>

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

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

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

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

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

@ -14,13 +14,13 @@
<n-switch v-model:value="pointRealTime.with_device_name" />
</n-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
src/views/chart/ContentConfigurations/components/ChartDataV2/components/PointTable.vue
View File

@ -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
src/views/chart/ContentConfigurations/components/ChartDataV2/components/SinglePoint.vue
View File

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

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

@ -2,31 +2,31 @@
<div v-if="!IsStatic && !targetData.chartConfig.conDataKey" class="go-chart-configurations-data">
<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>