mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-29 16:29:14 +08:00
feat: 添加温度、设备一张图
This commit is contained in:
宝莉
parent
b167c8a82c
commit
26919a1554
4
.env
4
.env
@ -5,7 +5,7 @@ VITE_DEV_PORT = '8080'
|
||||
# VITE_DEV_PATH = 'http://192.168.0.34:11887'
|
||||
VITE_DEV_PATH = 'http://192.168.0.34:8025/'
|
||||
# VITE_DEV_PATH = 'http://192.168.0.120:3001'
|
||||
VITE_DEV_TOKEN = "1f58b5b5-4eae-415b-bce9-d206adb1477b"
|
||||
VITE_DEV_TOKEN = "6d3db4a4-bcf6-47f7-8764-3b95f4f9b4d3"
|
||||
|
||||
# production path
|
||||
VITE_PRO_PATH = 'http://192.168.0.235:8177'
|
||||
# VITE_PRO_PATH = 'http://192.168.0.235:8177'
|
||||
|
||||
@ -283,6 +283,23 @@
|
||||
<setting-item name="y轴">
|
||||
<n-select v-model:value="legend.y" size="small" :options="legendConfig.lengendY" />
|
||||
</setting-item>
|
||||
<setting-item name="上">
|
||||
<n-input-number
|
||||
v-model:value="legend.top"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="px"
|
||||
/>
|
||||
</setting-item>
|
||||
<setting-item name="右">
|
||||
<n-input-number
|
||||
v-model:value="legend.right"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="px"
|
||||
/>
|
||||
</setting-item>
|
||||
|
||||
</setting-item-box>
|
||||
<setting-item-box name="图例信息">
|
||||
<setting-item name="方向">
|
||||
@ -301,6 +318,20 @@
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item v-if="dataZoom" name="滚动条">
|
||||
<template #header>
|
||||
<n-switch v-model:value="dataZoom.show" size="small"></n-switch>
|
||||
</template>
|
||||
<setting-item-box name="样式">
|
||||
<!-- <setting-item name="颜色">
|
||||
<n-color-picker size="small" v-model:value="dataZoom.backgroundColor"></n-color-picker>
|
||||
</setting-item> -->
|
||||
<setting-item name="展示个数">
|
||||
<n-input-number v-model:value="dataZoom.endValue" :min="1" size="small"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item v-if="visualMap" name="视觉映射">
|
||||
<template #header>
|
||||
@ -391,6 +422,9 @@ const yAxisArr: Ref<any> = computed(() => {
|
||||
const legend = computed(() => {
|
||||
return props.optionData.legend
|
||||
})
|
||||
const dataZoom = computed(() => {
|
||||
return props.optionData.dataZoom
|
||||
})
|
||||
|
||||
const grid = computed(() => {
|
||||
return props.optionData.grid
|
||||
|
||||
@ -3,9 +3,10 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ResultErrcode } from "@/enums/httpEnum";
|
||||
import { AlarmTrendType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import dataJson from "./data.json";
|
||||
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
export const handleAlarmTrend =async (targetComponent: CreateComponentType) => {
|
||||
console.log(targetComponent.commonData,'targetComponent.commonData');
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AlarmTrendType
|
||||
let { enable, signal_ids,alarmConfirmStatus,alarmRecoveryStatus,level} = obj
|
||||
@ -15,10 +16,10 @@ export const handleAlarmTrend =async (targetComponent: CreateComponentType) => {
|
||||
errmsg: ''
|
||||
}
|
||||
const queryParams = {
|
||||
signal_ids,
|
||||
alarmConfirmStatus:alarmConfirmStatus.length ? alarmConfirmStatus.split(',') : [],
|
||||
alarmRecoveryStatus:alarmRecoveryStatus.length ? alarmRecoveryStatus.split(',') : [],
|
||||
level:level.length ? alarmRecoveryStatus.split(',') : []
|
||||
signal_ids:signal_ids.length?signal_ids.split(','):[],
|
||||
alarmConfirmStatus,
|
||||
alarmRecoveryStatus,
|
||||
level
|
||||
}
|
||||
|
||||
const res = await publicInterface('/dcim/dems/devie_history_alarm', 'trend_chart', queryParams)
|
||||
|
||||
@ -6,13 +6,15 @@ import dataJson from "./data.json";
|
||||
|
||||
export const handleAreaDevCountClass =async (targetComponent: CreateComponentType) => {
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AreaDevCountType
|
||||
console.log(targetComponent,'targetComponent_targetComponent');
|
||||
// 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,
|
||||
space_type:'station'
|
||||
}
|
||||
// 处理数据
|
||||
const res = await publicInterface('/dcim/dems/device','get_area_dev_count', {})
|
||||
const res = await publicInterface('/dcim/dems/device','get_area_dev_count', queryParams)
|
||||
res!.data = {
|
||||
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
|
||||
dimensions: ['区域','配电设备总数','IT设备总数'],
|
||||
@ -22,6 +24,7 @@ export const handleAreaDevCountClass =async (targetComponent: CreateComponentTyp
|
||||
|
||||
'配电设备总数':item?.dev_count,
|
||||
'IT设备总数':item?.it_dev_count,
|
||||
complete_id:item?.space?.complete_id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -3,19 +3,19 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ResultErrcode } from "@/enums/httpEnum";
|
||||
import { AssetsClassType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import dataJson from "./data.json";
|
||||
import { Product } from "@vicons/carbon";
|
||||
|
||||
import {useGlobalQueryParamsStore} from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
|
||||
export const handleAssetsClass =async (targetComponent: CreateComponentType) => {
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as AssetsClassType
|
||||
let { enable, dataSource } = obj
|
||||
console.log(enable, dataSource,'handleAssetsClass')
|
||||
if(!enable) return {
|
||||
errcode: ResultErrcode.SUCCESS,
|
||||
data: { ...dataJson },
|
||||
errmsg: ''
|
||||
}
|
||||
const query = {
|
||||
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
// 处理数据
|
||||
if(dataSource==='IT'){
|
||||
@ -23,10 +23,10 @@ export const handleAssetsClass =async (targetComponent: CreateComponentType) =>
|
||||
const res = await publicInterface('/dcim/asset','get_asset_overview_page_info_new', query)
|
||||
res!.data = {
|
||||
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')),
|
||||
dimensions: ['product','data'],
|
||||
dimensions: ['品牌','data'],
|
||||
source:res?.data.brand_count.slice(0,8).map((item: {})=>{
|
||||
return {
|
||||
product:Object.keys(item)[0],
|
||||
'品牌':Object.keys(item)[0],
|
||||
data:Object.values(item)[0],
|
||||
}
|
||||
})
|
||||
|
||||
@ -5,7 +5,7 @@ import { commonDataType, CategoryBrandCountTableType } from '@/store/modules/cha
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
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
|
||||
if(!enable) return {
|
||||
@ -13,9 +13,13 @@ export const handleCategoryBrandCountTable =async (targetComponent: CreateCompon
|
||||
data: { ...dataJson },
|
||||
errmsg: ''
|
||||
}
|
||||
console.log(currentSource,'currentSource');
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
|
||||
const res = await publicInterface(currentSource==='IT'?'/dcim/asset':'/dcim/dems/device',currentSource==='IT'?'get_category_brand_count': 'get_dev_category_brand_count', {})
|
||||
console.log(currentSource,'currentSource');
|
||||
const queryParams = {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
const res = await publicInterface(currentSource==='IT'?'/dcim/asset':'/dcim/dems/device',currentSource==='IT'?'get_category_brand_count': 'get_dev_category_brand_count', queryParams)
|
||||
const top = ['TOP1','TOP2','TOP3']
|
||||
|
||||
res!.data = {
|
||||
|
||||
@ -5,7 +5,7 @@ import { CompanyTempTopType } from '@/store/modules/chartEditStore/chartEditStor
|
||||
import dataJson from "./data.json";
|
||||
|
||||
export const handleCompanyTempTop =async (targetComponent: CreateComponentType) => {
|
||||
console.log(targetComponent.commonData,'targetComponent.commonData');
|
||||
console.log(targetComponent,'targetComponent.commonData');
|
||||
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType
|
||||
let { enable, space_complete_id, signal_ids} = obj
|
||||
|
||||
@ -48,11 +48,7 @@ export const useChartCommonData = (
|
||||
// eCharts 组件配合 vChart 库更新方式
|
||||
const echartsUpdateHandle = (dataset: any) => {
|
||||
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
||||
// if (vChartRef.value) {
|
||||
// setOption(vChartRef.value, { dataset: dataset })
|
||||
// }
|
||||
// if(!dataset.dimensions) return
|
||||
console.log(targetComponent,'targetComponent')
|
||||
|
||||
if(targetComponent.option){
|
||||
const SingleDataArr = [
|
||||
CurrentSourceEnum.SINGLEPOINT,
|
||||
@ -168,7 +164,6 @@ export const useChartCommonData = (
|
||||
}
|
||||
if (res && res.errcode === ResultErrcode.SUCCESS) {
|
||||
try {
|
||||
console.log(res,'res--fetchFn')
|
||||
|
||||
const { data } = res
|
||||
// 多值的
|
||||
@ -185,7 +180,6 @@ export const useChartCommonData = (
|
||||
else throw Error()
|
||||
}
|
||||
else if(Object.prototype.toString.call(data) === '[object Object]'){
|
||||
console.log(data,'data_isMultiple');
|
||||
|
||||
if(data.dimensions && data.source) {
|
||||
if(typeof targetComponent.commonData.dataLength === 'number') {
|
||||
@ -231,6 +225,7 @@ export const useChartCommonData = (
|
||||
const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
|
||||
// 开启轮询
|
||||
if (time) {
|
||||
|
||||
fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
|
||||
} else {
|
||||
fetchFn()
|
||||
|
||||
@ -45,6 +45,27 @@ export const option = {
|
||||
min: null
|
||||
}
|
||||
],
|
||||
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'
|
||||
}
|
||||
},
|
||||
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
<template>
|
||||
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
|
||||
:update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}" autoresize></v-chart>
|
||||
<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 } 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'
|
||||
@ -21,7 +27,10 @@ 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'
|
||||
const chartEditStore = useChartEditStore()
|
||||
|
||||
const globalQueryParamsStore = useGlobalQueryParamsStore()
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
@ -38,7 +47,6 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
props.chartConfig.option.tooltip.position = setTooltipPosition(props.chartConfig.attr)
|
||||
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
|
||||
@ -48,6 +56,36 @@ const replaceMergeArr = ref<string[]>()
|
||||
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')
|
||||
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
|
||||
chartEditStore.getComponentList.forEach(component=>{
|
||||
component.request.requestInterval = 15
|
||||
useChartCommonData(component, useChartEditStore)
|
||||
|
||||
})
|
||||
|
||||
console.log(globalQueryParamsStore.getGlobalQueryParams,'chartConfig2')
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
if(vChartRef.value) {
|
||||
vChartRef.value.chart.on('click', chartPEvents)
|
||||
}
|
||||
})
|
||||
|
||||
// dataset 无法变更条数的补丁
|
||||
// watch(
|
||||
|
||||
@ -51,6 +51,26 @@ export const option = {
|
||||
min: null
|
||||
}
|
||||
],
|
||||
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'
|
||||
}
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [seriesItem, seriesItem],
|
||||
allSeriesConfig: seriesItem
|
||||
|
||||
@ -13,6 +13,7 @@ export const option = {
|
||||
dataset: dataJson,
|
||||
mapRegion: {
|
||||
adcode: 'china',
|
||||
province: '',
|
||||
showHainanIsLands: true,
|
||||
enter: false,
|
||||
backSize: 20,
|
||||
@ -185,6 +186,7 @@ export const customData = {
|
||||
// k: 名字 v: 数值
|
||||
dataMap: '{}',
|
||||
showInterval: true,
|
||||
devList:[]
|
||||
}
|
||||
|
||||
export const MapDefaultConfig = { ...option }
|
||||
|
||||
@ -22,8 +22,18 @@
|
||||
label-field="name"
|
||||
/>
|
||||
</SettingItem>
|
||||
<SettingItem name="省市区" v-if="mapRegion.adcode!=='china'">
|
||||
<n-select
|
||||
size="small"
|
||||
v-model:value="mapRegion.province"
|
||||
:options="provinceOptions"
|
||||
value-field="adcode"
|
||||
label-field="name"
|
||||
/>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
|
||||
<SettingItemBox name="区域颜色">
|
||||
<SettingItem name="0%处颜色">
|
||||
<n-color-picker
|
||||
@ -294,7 +304,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { PropType, computed,watch } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
|
||||
@ -307,6 +317,12 @@ const mapRegionOptions = ref([
|
||||
name: '中国'
|
||||
}
|
||||
])
|
||||
const provinceOptions = ref([
|
||||
{
|
||||
adcode: '',
|
||||
name: ''
|
||||
}
|
||||
])
|
||||
|
||||
const rippleEffectOptions = ref([
|
||||
{
|
||||
@ -325,16 +341,20 @@ const props = defineProps({
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const initMapRegionOptions = () => {
|
||||
mapChinaJson.features.forEach((element: any) => {
|
||||
const getMapOptionsByMapJson = (mapJson:any,origin:any)=>{
|
||||
mapJson.features.forEach((element: any) => {
|
||||
if (element.properties.name) {
|
||||
mapRegionOptions.value.push({ ...element.properties })
|
||||
origin.push({ ...element.properties })
|
||||
}
|
||||
})
|
||||
}
|
||||
const initMapRegionOptions = () => {
|
||||
getMapOptionsByMapJson(mapChinaJson,mapRegionOptions.value)
|
||||
|
||||
}
|
||||
initMapRegionOptions()
|
||||
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
@ -342,4 +362,15 @@ const seriesList = computed(() => {
|
||||
const mapRegion = computed(() => {
|
||||
return props.optionData.mapRegion
|
||||
})
|
||||
watch(()=>mapRegion.value.adcode,(code:string)=>{
|
||||
// 清空
|
||||
provinceOptions.value = []
|
||||
mapRegion.value.province = ''
|
||||
import(`./mapGeojson/${code}.json`).then((data:any) => {
|
||||
console.log(data,'data_data')
|
||||
getMapOptionsByMapJson(data,provinceOptions.value)
|
||||
console.log(provinceOptions.value,'provinceOptions.value')
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -39,6 +39,8 @@ 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 {isPreview, postMessageToParent} from '@/utils'
|
||||
import mapJsonWithoutHainanIsLands from './mapWithoutHainanIsLands.json'
|
||||
import mapChinaJson from './mapGeojson/china.json'
|
||||
@ -152,17 +154,24 @@ const updateMapFn = (data: 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',
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(props.chartConfig.option.series[0].data,'props.chartConfig.option.series[0].data')
|
||||
}
|
||||
|
||||
//动态获取json注册地图
|
||||
const getGeojson = (regionId: string) => {
|
||||
return new Promise<boolean>(resolve => {
|
||||
console.log(regionId,'regionId')
|
||||
if(regionId==='440600'){
|
||||
get_area_dev_count()
|
||||
}
|
||||
import(`./mapGeojson/${regionId}.json`).then(data => {
|
||||
currentMap.value = data.default
|
||||
registerMap(regionId, { geoJSON: data.default as any, specialAreas: {} })
|
||||
@ -171,16 +180,27 @@ const getGeojson = (regionId: string) => {
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
//异步时先注册空的 保证初始化不报错
|
||||
if(props.chartConfig.option.mapRegion.province){
|
||||
registerMap(`${props.chartConfig.option.mapRegion.province}`, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
}else{
|
||||
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
|
||||
|
||||
}
|
||||
|
||||
// 进行更换初始化地图 如果为china 单独处理
|
||||
const registerMapInitAsync = async () => {
|
||||
await nextTick()
|
||||
const adCode = `${props.chartConfig.option.mapRegion.adcode}`
|
||||
const province = `${props.chartConfig.option.mapRegion.province}`
|
||||
if (adCode !== 'china') {
|
||||
await getGeojson(adCode)
|
||||
|
||||
await getGeojson(province?province:adCode)
|
||||
} else {
|
||||
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
|
||||
}
|
||||
@ -220,25 +240,7 @@ const vEchartsSetOption = () => {
|
||||
setOption(vChartRef.value, props.chartConfig.option)
|
||||
}
|
||||
|
||||
// 更新数据处理
|
||||
const dataSetHandle = async (dataset: any) => {
|
||||
props.chartConfig.option.series.forEach((item: any) => {
|
||||
// if (item.type === 'effectScatter' && dataset.point) item.data = dataset.point
|
||||
if (item.type === 'lines' && dataset.line) {
|
||||
item.data = dataset.line.map((it: any) => {
|
||||
return {
|
||||
...it,
|
||||
lineStyle: {
|
||||
color: props.chartConfig.option.series[2].lineStyle.normal.color
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (item.type === 'map' && dataset.map) item.data = dataset.map
|
||||
})
|
||||
if (dataset.pieces) props.chartConfig.option.visualMap.pieces = dataset.pieces
|
||||
|
||||
isPreview() && vEchartsSetOption()
|
||||
}
|
||||
// 处理海南群岛
|
||||
const hainanLandsHandle = async (newData: boolean) => {
|
||||
if (newData) {
|
||||
@ -250,6 +252,29 @@ const hainanLandsHandle = async (newData: boolean) => {
|
||||
|
||||
// 点击区域
|
||||
const chartPEvents = (e: any) => {
|
||||
console.log(e,'e')
|
||||
console.log(props.chartConfig.option,'props.chartConfig.option.series[1]')
|
||||
if(props.chartConfig.option.mapRegion.province===440600){
|
||||
const county = currentMap.value.features.find((item:any)=>item.properties.name===e.name)
|
||||
if(county){
|
||||
const space_complete:any = customData.value.devList.find((item:any)=>{
|
||||
if(item.space.extend_column_string.length){
|
||||
|
||||
return JSON.parse(item.space.extend_column_string).county_code===`${county.properties.adcode}`
|
||||
}
|
||||
})
|
||||
|
||||
const chartEditStore = useChartEditStore()
|
||||
chartEditStore.getComponentList.forEach(component=>{
|
||||
if(component.commonData.currentSource==='areaDevCount'){
|
||||
component.commonData['areaDevCount'].space_complete_id = space_complete?space_complete?.space.complete_id:null
|
||||
// useChartCommonData(component, useChartEditStore)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
console.log(county,'county')
|
||||
}
|
||||
if (e.seriesType !== 'map') return
|
||||
if (!props.chartConfig.option.mapRegion.enter) {
|
||||
return
|
||||
@ -295,6 +320,10 @@ 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 : '-'
|
||||
@ -413,30 +442,7 @@ onUnmounted(() => {
|
||||
box?.value?.removeEventListener('mousedown', handleMousedown)
|
||||
})
|
||||
|
||||
// //监听 dataset 数据发生变化
|
||||
// watch(
|
||||
// () => props.chartConfig.option.dataset,
|
||||
// newData => {
|
||||
// dataSetHandle(newData)
|
||||
// },
|
||||
// {
|
||||
// immediate: true,
|
||||
// deep: false
|
||||
// }
|
||||
// )
|
||||
|
||||
// 监听线的颜色
|
||||
// if (props.chartConfig.option.series[2] && !isPreview()) {
|
||||
// watch(
|
||||
// () => props.chartConfig.option.series[2].lineStyle.normal.color,
|
||||
// () => {
|
||||
// dataSetHandle(props.chartConfig.option.dataset)
|
||||
// },
|
||||
// {
|
||||
// deep: false
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
|
||||
//监听是否显示南海群岛
|
||||
if (!isPreview()) {
|
||||
@ -469,6 +475,20 @@ watch(
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
//监听地图展示区域发生变化
|
||||
watch(
|
||||
() => `${props.chartConfig.option.mapRegion.province}`,
|
||||
newData => {
|
||||
try {
|
||||
checkOrMap(newData)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
let timer:unknown
|
||||
@ -499,10 +519,7 @@ onMounted(() => {
|
||||
onUnmounted(() => {
|
||||
if(timer) clearInterval(timer as number)
|
||||
})
|
||||
// 预览
|
||||
// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
// dataSetHandle(newData)
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scope lang="scss">
|
||||
|
||||
7844
src/packages/components/Charts/Maps/MapBase/mapGeojson/440600.json
Normal file
7844
src/packages/components/Charts/Maps/MapBase/mapGeojson/440600.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -28,8 +28,8 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
title: '实时告警统计',
|
||||
showInterval: true,
|
||||
space_complete_id: '',
|
||||
confirm_statuss:[],
|
||||
signal_ids:'',
|
||||
confirm_statuss:['ok','not'],
|
||||
signal_ids:'131240020010',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@ -11,14 +11,17 @@
|
||||
|
||||
<setting-item-box name="告警确认状态" :alone="true">
|
||||
<n-select v-model:value="props.customData.confirm_statuss" multiple :options="confirmStatusOption" size="small"/>
|
||||
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
|
||||
const props = defineProps(['customData', 'request'])
|
||||
const originStore = useOriginStore()
|
||||
const systemConstant = originStore?.getOriginStore?.user?.systemConstant
|
||||
|
||||
const confirmStatusOption = [
|
||||
{ label: '已确认', value: 'ok' },
|
||||
{ label: '未确认', value: 'not' }
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue'
|
||||
import { PropType, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref ,Ref,computed} from 'vue'
|
||||
import {isPreview} from '@/utils'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import BorderBox from '../components/BorderBox.vue'
|
||||
@ -29,6 +29,7 @@ import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
import VChart from 'vue-echarts'
|
||||
import { customData as customDataConfig } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
@ -36,9 +37,9 @@ const props = defineProps({
|
||||
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 {
|
||||
@ -90,9 +91,10 @@ nameObj.commonColor = systemConstant['warn_levels'].find((item:any) => item.valu
|
||||
nameObj.eventColor = systemConstant['warn_levels'].find((item:any) => item.value === '5') ? systemConstant['warn_levels'].find((item:any) => item.value === '5')['remark'] : '#4fbadb'
|
||||
|
||||
const getData = () => {
|
||||
const confirm_statuss =props.chartConfig.customData?.confirm_statuss.length?props.chartConfig.customData?.confirm_statuss.length: systemConfig?.['active_alarm_confirm_status'] ? [...JSON.parse(systemConfig['active_alarm_confirm_status'])] : []
|
||||
const confirm_statuss =props.chartConfig.customData?.confirm_statuss.length?props.chartConfig.customData?.confirm_statuss: systemConfig?.['active_alarm_confirm_status'] ? [...JSON.parse(systemConfig['active_alarm_confirm_status'])] : []
|
||||
const param = {
|
||||
confirm_statuss,
|
||||
signal_ids:props.chartConfig.customData?.signal_ids.length?props.chartConfig.customData?.signal_ids.split(','):[],
|
||||
space_complete_id: props.chartConfig.customData?.space_complete_id
|
||||
}
|
||||
|
||||
@ -303,7 +305,17 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
|
||||
}, number)
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性，用于拼接并排除 title
|
||||
const watchedProperties = computed(() => {
|
||||
return `${customData.value.confirm_statuss.join(',')}-${customData.value.signal_ids}`;
|
||||
});
|
||||
watch(
|
||||
watchedProperties,
|
||||
(newVal, oldVal) => {
|
||||
getData()
|
||||
},
|
||||
{ deep: true, }
|
||||
);
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
getData()
|
||||
|
||||
@ -25,14 +25,14 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public chartConfig = cloneDeep(AlarmLevelStatistic)
|
||||
public option = cloneDeep(option)
|
||||
public customData = cloneDeep({
|
||||
title: '告警数统计',
|
||||
title: '告警等级数统计',
|
||||
showInterval: true,
|
||||
currentSource:'level',
|
||||
// 告警确认状态
|
||||
alarmConfirmStatus:'',
|
||||
alarmConfirmStatus:['ok','not'],
|
||||
// 告警恢复状态
|
||||
alarmRecoveryStatus:'',
|
||||
signal_ids:'',
|
||||
space_complete_id:''
|
||||
alarmRecoveryStatus:['ok','not'],
|
||||
signal_ids:'131240020010',
|
||||
// space_complete_id:''
|
||||
})
|
||||
}
|
||||
|
||||
@ -3,18 +3,19 @@
|
||||
<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="测点ID(双引号包裹内容+英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="空间ID" :alone="true">
|
||||
<!-- <setting-item-box name="空间ID" :alone="true">
|
||||
<n-input v-model:value="props.customData.space_complete_id" size="small" placeholder="请输入"/>
|
||||
</setting-item-box> -->
|
||||
<setting-item-box name="告警确认状态" :alone="true">
|
||||
<n-select v-model:value="props.customData.alarmConfirmStatus" multiple :options="confirmStatusOption" size="small"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警确认状态(双引号包裹内容+英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="props.customData.alarmConfirmStatus" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警恢复状态(双引号包裹内容+英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="props.customData.alarmRecoveryStatus" size="small" placeholder="请输入"/>
|
||||
<setting-item-box name="告警恢复状态" :alone="true">
|
||||
<n-select v-model:value="props.customData.alarmRecoveryStatus" multiple :options="recoveryStatusOption" size="small"/>
|
||||
</setting-item-box>
|
||||
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
@ -22,7 +23,14 @@
|
||||
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps(['customData', 'request'])
|
||||
|
||||
const confirmStatusOption = [
|
||||
{ label: '已确认', value: 'ok' },
|
||||
{ label: '未确认', value: 'not' }
|
||||
]
|
||||
const recoveryStatusOption = [
|
||||
{ label: '已恢复', value: 'ok' },
|
||||
{ label: '未恢复', value: 'not' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -7,7 +7,7 @@ export const AlarmLevelStatistic: ConfigType = {
|
||||
conKey: 'VCAlarmLevelStatistic',
|
||||
// VCD开头
|
||||
conDataKey: 'VCDAlarmLevelStatistic',
|
||||
title: '告警数统计',
|
||||
title: '告警等级数统计',
|
||||
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
|
||||
@ -480,12 +480,15 @@ tab.value = flag
|
||||
|
||||
}
|
||||
console.log(props.chartConfig,'chartConfig');
|
||||
console.log(customData.value,'customData')
|
||||
|
||||
let type_count:any = ref([])
|
||||
const alarmConfirmStatus = customData.value.alarmConfirmStatus.length ? customData.value.alarmConfirmStatus.split(',') : []
|
||||
const alarmRecoveryStatus = customData.value.alarmRecoveryStatus.length ? customData.value.alarmRecoveryStatus.split(',') : []
|
||||
const getData = () => {
|
||||
publicInterface('/dcim/dems/devie_history_alarm', 'alarm_statistical_by_time', {alarmConfirmStatus,alarmRecoveryStatus}).then((res:any) => {
|
||||
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')
|
||||
@ -510,13 +513,18 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
|
||||
}
|
||||
})
|
||||
|
||||
watch(()=>props.chartConfig?.customData?.currentSource,()=>{
|
||||
|
||||
console.log(props.chartConfig?.customData?.currentSource,'chartConfig');
|
||||
// 计算属性，用于拼接并排除 title
|
||||
const watchedProperties = computed(() => {
|
||||
return `${customData.value.alarmConfirmStatus.join(',')}-${customData.value.alarmRecoveryStatus.join(',')}-${customData.value.signal_ids}`;
|
||||
});
|
||||
watch(
|
||||
watchedProperties,
|
||||
(newVal, oldVal) => {
|
||||
getData()
|
||||
// 根据currentSource去获取对应 参数
|
||||
},
|
||||
{ deep: true, }
|
||||
);
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { AlarmTrend } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
// import logo from '@/assets/logo.png'
|
||||
|
||||
export const option = {}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
constructor() {
|
||||
super();
|
||||
this.attr.w = 450
|
||||
this.attr.h = 300
|
||||
this.request.requestInterval = 15
|
||||
}
|
||||
public key = AlarmTrend.key
|
||||
public chartConfig = cloneDeep(AlarmTrend)
|
||||
public option = cloneDeep(option)
|
||||
public customData = cloneDeep({
|
||||
title: '告警趋势',
|
||||
showInterval: true,
|
||||
signal_ids:'131240020010',
|
||||
alarmConfirmStatus:['ok','not'],
|
||||
alarmRecoveryStatus:['ok','not'],
|
||||
level:[1, 2, 3, 4, 5]
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import {computed, PropType} from "vue";
|
||||
import {GlobalThemeJsonType} from "@/settings/chartThemes";
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const config = computed(() => {
|
||||
return props.optionData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<setting-item-box name="标题1" :alone="true">
|
||||
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="测点ID" :alone="true">
|
||||
<n-input v-model:value="props.customData.signal_ids" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警确认状态" :alone="true">
|
||||
<n-select v-model:value="props.customData.alarmConfirmStatus" multiple :options="confirmStatusOption" size="small"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警恢复状态" :alone="true">
|
||||
<n-select v-model:value="props.customData.alarmRecoveryStatus" multiple :options="recoveryStatusOption" size="small"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警等级" :alone="true">
|
||||
<n-select v-model:value="props.customData.level" multiple :options="levelOptions" size="small"/>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import {computed} from "vue";
|
||||
import {cloneDeep} from "lodash";
|
||||
import {icon} from "@/plugins";
|
||||
const props = defineProps(['customData', 'request'])
|
||||
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
const originStore = useOriginStore()
|
||||
const systemConstant = originStore?.getOriginStore?.user?.systemConstant
|
||||
const levelOptions = systemConstant['warn_levels'].filter((item:any)=>{
|
||||
if(item.value){
|
||||
item.value = item.value*1
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const confirmStatusOption = [
|
||||
{ label: '已确认', value: 'ok' },
|
||||
{ label: '未确认', value: 'not' }
|
||||
]
|
||||
const recoveryStatusOption = [
|
||||
{ label: '已恢复', value: 'ok' },
|
||||
{ label: '未恢复', value: 'not' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||
|
||||
export const AlarmTrend: ConfigType = {
|
||||
key: 'AlarmTrend',
|
||||
chartKey: 'VAlarmTrend',
|
||||
conKey: 'VCAlarmTrend',
|
||||
// VCD开头
|
||||
conDataKey: 'VCDAlarmTrend',
|
||||
title: '告警趋势',
|
||||
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'AlarmTrend.png'
|
||||
}
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
</BorderBox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { customData as customDataConfig } from './config'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { publicInterface } from '@/api/path/business.api'
|
||||
import {isPreview} from '@/utils'
|
||||
import moment from 'moment'
|
||||
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d";
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const tab = ref(0)
|
||||
const getStyle = (radius: number) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
overflow: 'hidden',
|
||||
}
|
||||
}
|
||||
|
||||
const customData: Ref<typeof customDataConfig> = computed(() => {
|
||||
return props.chartConfig.customData as typeof customDataConfig
|
||||
})
|
||||
|
||||
|
||||
const {signal_ids,alarmConfirmStatus,alarmRecoveryStatus,level} = customData.value
|
||||
|
||||
|
||||
const changeTab = (flag:any)=> {
|
||||
tab.value = flag
|
||||
getData()
|
||||
}
|
||||
|
||||
|
||||
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
|
||||
},
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
]
|
||||
},)
|
||||
const vChartRef = ref()
|
||||
|
||||
|
||||
const getData = () => {
|
||||
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');
|
||||
|
||||
|
||||
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');
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
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}
|
||||
const unit = obj.unit
|
||||
const number = unit * props.chartConfig.request.requestInterval!
|
||||
timer = setInterval(() => {
|
||||
}, number)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
.radio{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -6,9 +6,13 @@
|
||||
<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/Base2.png" alt="">
|
||||
<div class="value">
|
||||
{{Object.values(item)[0]}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="value">
|
||||
{{Object.keys(item)[0]}}<span class="count">{{Object.values(item)[0]}}</span>台
|
||||
{{Object.keys(item)[0]}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,7 +33,8 @@ 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>,
|
||||
@ -47,13 +52,14 @@ const getStyle = (radius: number) => {
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
console.log(props.chartConfig,'chartConfig');
|
||||
|
||||
let type_count:any = ref([])
|
||||
const queryParams = {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
const getData = () => {
|
||||
if(props.chartConfig?.customData?.currentSource==='IT'){
|
||||
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {}).then(res => {
|
||||
console.log(res,'res----')
|
||||
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', queryParams).then(res => {
|
||||
if (res && res.data) {
|
||||
type_count.value = res.data.type_count
|
||||
// for (const key in computeNodeData) {
|
||||
@ -62,8 +68,7 @@ const getData = () => {
|
||||
}
|
||||
})
|
||||
}else{
|
||||
publicInterface('/dcim/dems/device', 'get_dev_category_count', {}).then(res => {
|
||||
console.log(res,'res----')
|
||||
publicInterface('/dcim/dems/device', 'get_dev_category_count', queryParams).then(res => {
|
||||
if (res && res.data) {
|
||||
type_count.value = res.data.map((item:any)=>{
|
||||
return {
|
||||
@ -147,12 +152,25 @@ onUnmounted(() => {
|
||||
overflow: auto;
|
||||
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: 17px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.count{
|
||||
|
||||
@ -30,7 +30,8 @@ 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>,
|
||||
@ -48,13 +49,13 @@ const getStyle = (radius: number) => {
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
console.log(props.chartConfig,'chartConfig');
|
||||
let type_count:any = ref([])
|
||||
|
||||
const queryParams = {
|
||||
...globalQueryParamsStore.getGlobalQueryParams
|
||||
}
|
||||
const getData = () => {
|
||||
if(props.chartConfig?.customData?.currentSource==='IT'){
|
||||
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', {}).then(res => {
|
||||
console.log(res,'res----')
|
||||
publicInterface('/dcim/asset', 'get_asset_overview_page_info_new', queryParams).then(res => {
|
||||
|
||||
if (res && res.data) {
|
||||
let commonBrands = res.data.type_count.reduce((prev:any, curr:any) => {
|
||||
@ -80,8 +81,7 @@ const getData = () => {
|
||||
}
|
||||
})
|
||||
}else{
|
||||
publicInterface('/dcim/dems/device', 'get_dev_category_count', {}).then(res => {
|
||||
console.log(res,'res----')
|
||||
publicInterface('/dcim/dems/device', 'get_dev_category_count', queryParams).then(res => {
|
||||
if (res && res.data) {
|
||||
const commonBrands:any = res.data.reduce((prev:any, curr:any) => {
|
||||
return curr.count > prev.count ? curr : prev;
|
||||
@ -104,7 +104,6 @@ const getData = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log(type_count.value,`type_count_${props.chartConfig?.customData?.currentSource}`)
|
||||
|
||||
}
|
||||
let timer:unknown
|
||||
|
||||
@ -20,6 +20,7 @@ import { PositionConfig } from './Position'
|
||||
import { JumpBtnConfig } from './JumpBtn'
|
||||
import { ClassifiedStatistic } from './ClassifiedStatistic'
|
||||
import { AlarmLevelStatistic } from './AlarmLevelStatistic'
|
||||
import { AlarmTrend } from './AlarmTrend'
|
||||
import { RoomTemperature } from './RoomTemperature'
|
||||
import { Overview } from './Overview'
|
||||
|
||||
@ -46,6 +47,7 @@ export default [
|
||||
JumpBtnConfig,
|
||||
ClassifiedStatistic,
|
||||
AlarmLevelStatistic,
|
||||
AlarmTrend,
|
||||
RoomTemperature,
|
||||
Overview
|
||||
]
|
||||
|
||||
@ -25,7 +25,6 @@ const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
|
||||
const option = shallowReactive({
|
||||
dataset: ''
|
||||
})
|
||||
|
||||
const getStyle = (radius: number) => {
|
||||
return {
|
||||
borderRadius: `${radius}px`,
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
</template>
|
||||
</n-input>
|
||||
<n-data-table
|
||||
:class="{'customDataTable':isBackgroundColor}"
|
||||
style="box-sizing: border-box;"
|
||||
:style="`
|
||||
width: ${w}px;
|
||||
@ -164,7 +165,6 @@ const columns = computed(() => {
|
||||
return dimensions
|
||||
})
|
||||
useChartCommonData(props.chartConfig, useChartEditStore)
|
||||
console.log(props.chartConfig,'chartConfig')
|
||||
|
||||
</script>
|
||||
|
||||
@ -175,19 +175,18 @@ console.log(props.chartConfig,'chartConfig')
|
||||
gap: 15px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
:deep(.n-data-table-td) {
|
||||
background-color:#1A1D25;
|
||||
:deep(td) {
|
||||
background-color:red;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background-color:#1A1D25;
|
||||
}
|
||||
@include go('custom-data-table'){
|
||||
background-color: #1A1D25;
|
||||
:deep(.n-data-table-td) {
|
||||
background-color:#1A1D25;
|
||||
}
|
||||
:deep(.n-data-table-th) {
|
||||
background-color:#1A1D25;
|
||||
.customDataTable{
|
||||
:deep(td) {
|
||||
background-color:rgba(65, 150, 255, 0.05);
|
||||
}
|
||||
// :deep(th) {
|
||||
// background-color:rgba(65, 150, 255, 0.05);
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,6 +12,7 @@ import type VChart from 'vue-echarts'
|
||||
* @returns object
|
||||
*/
|
||||
export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[]) => {
|
||||
|
||||
return (option = merge({}, pick(themeSetting, includes), option))
|
||||
}
|
||||
|
||||
|
||||
@ -52,7 +52,17 @@ export const requestConfig: RequestConfigType = {
|
||||
|
||||
const commonData: commonDataType = {
|
||||
currentSource: CurrentSourceEnum.POINTHISTORY,
|
||||
queryParams:{},
|
||||
dataLength: null,
|
||||
areaDevCount: {
|
||||
enable: false,
|
||||
dataSource: '',
|
||||
space_complete_id:''
|
||||
},
|
||||
assetsClass: {
|
||||
enable: false,
|
||||
dataSource: ''
|
||||
},
|
||||
pointHistory: {
|
||||
enable: false,
|
||||
methods: [],
|
||||
@ -88,10 +98,7 @@ const commonData: commonDataType = {
|
||||
enable: false,
|
||||
space_complete_id: ''
|
||||
},
|
||||
assetsClass: {
|
||||
enable: false,
|
||||
dataSource: ''
|
||||
},
|
||||
|
||||
companyTempTop: {
|
||||
enable: false,
|
||||
signal_ids:'131240020010',
|
||||
@ -100,6 +107,9 @@ const commonData: commonDataType = {
|
||||
alarmTrend: {
|
||||
enable: false,
|
||||
signal_ids:'131240020010',
|
||||
alarmConfirmStatus:['ok','not'],
|
||||
alarmRecoveryStatus:['ok','not'],
|
||||
level:[1, 2, 3, 4, 5]
|
||||
},
|
||||
pointTable: {
|
||||
enable: false,
|
||||
|
||||
@ -128,6 +128,8 @@
|
||||
"type": "scroll",
|
||||
"x": "center",
|
||||
"y": "top",
|
||||
"top": 0,
|
||||
"right": 10,
|
||||
"icon": "circle",
|
||||
"orient": "horizontal",
|
||||
"textStyle": {
|
||||
|
||||
@ -372,14 +372,15 @@ export interface CompanyTempTopType {
|
||||
export interface AlarmTrendType {
|
||||
enable: boolean
|
||||
signal_ids:string
|
||||
alarmConfirmStatus:string
|
||||
alarmRecoveryStatus:string
|
||||
level:string
|
||||
alarmConfirmStatus:string[]
|
||||
alarmRecoveryStatus:string[]
|
||||
level:number[]
|
||||
|
||||
}
|
||||
export interface AreaDevCountType {
|
||||
enable: boolean
|
||||
dataSource: string
|
||||
space_complete_id:string
|
||||
}
|
||||
|
||||
// 测点表格值
|
||||
@ -413,6 +414,8 @@ export interface ManualInputSingleType {
|
||||
export interface commonDataType {
|
||||
// 多数据
|
||||
currentSource: CurrentSourceEnum
|
||||
// 公共接口参数
|
||||
queryParams:any
|
||||
dataLength: number | null
|
||||
pointHistory: PointHistoryType
|
||||
energyUseHistory: EnergyUseHistoryType
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
export const useGlobalQueryParamsStore = defineStore({
|
||||
id: 'useGlobalQueryParamsStore',
|
||||
state: () => ({
|
||||
queryParams: {}
|
||||
}),
|
||||
getters: {
|
||||
getGlobalQueryParams():{[k:string]: any} {
|
||||
return this.queryParams
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setGlobalQueryParams(queryParams: {[k:string]: any}, merge: boolean = true) {
|
||||
if(merge) {
|
||||
this.queryParams = cloneDeep(queryParams)
|
||||
}
|
||||
else {
|
||||
Object.assign(this.queryParams, queryParams)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -7,17 +7,18 @@
|
||||
<setting-item-box name="测点ID" :alone="true">
|
||||
<n-input v-model:value="currentObj.signal_ids" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警确认状态(双引号包裹内容+英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="currentObj.alarmConfirmStatus" size="small" placeholder="请输入"/>
|
||||
<setting-item-box name="告警确认状态" :alone="true">
|
||||
<n-select v-model:value="currentObj.alarmConfirmStatus" multiple :options="confirmStatusOption" size="small"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警恢复状态(双引号包裹内容+英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="currentObj.alarmRecoveryStatus" size="small" placeholder="请输入"/>
|
||||
<setting-item-box name="告警恢复状态" :alone="true">
|
||||
<n-select v-model:value="currentObj.alarmRecoveryStatus" multiple :options="recoveryStatusOption" size="small"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="告警恢复状态(双引号包裹内容+英文逗号隔开)" :alone="true">
|
||||
<n-input v-model:value="currentObj.level" size="small" placeholder="请输入"/>
|
||||
<setting-item-box name="告警等级" :alone="true">
|
||||
<n-select v-model:value="currentObj.level" multiple :options="levelOptions" size="small"/>
|
||||
</setting-item-box>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -26,12 +27,32 @@ import type {Ref} from 'vue'
|
||||
import {SettingItemBox} from '@/components/Pages/ChartItemSetting'
|
||||
import {useTargetData} from '../../hooks/useTargetData.hook'
|
||||
import {commonDataType, AlarmTrendType} from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { useOriginStore } from '@/store/modules/originStore/originStore'
|
||||
const originStore = useOriginStore()
|
||||
const systemConstant = originStore?.getOriginStore?.user?.systemConstant
|
||||
const levelOptions = systemConstant['warn_levels'].filter((item:any)=>{
|
||||
if(item.value){
|
||||
item.value = item.value*1
|
||||
return item
|
||||
}
|
||||
})
|
||||
const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
|
||||
|
||||
const currentObj = computed(() => {
|
||||
return targetData.value.commonData[targetData.value.commonData.currentSource] as AlarmTrendType
|
||||
})
|
||||
|
||||
const confirmStatusOption = [
|
||||
{ label: '已确认', value: 'ok' },
|
||||
{ label: '未确认', value: 'not' }
|
||||
]
|
||||
const recoveryStatusOption = [
|
||||
{ label: '已恢复', value: 'ok' },
|
||||
{ label: '未恢复', value: 'not' }
|
||||
]
|
||||
// const recoveryStatusOption = [
|
||||
// { label: '已恢复', value: 'ok' },
|
||||
// { label: '未恢复', value: 'not' }
|
||||
// ]
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user