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

fix: 设备一张图

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

2
.env
View File

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

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

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

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

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

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

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

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

@ -1,33 +1,62 @@
import { publicInterface } from "@/api/path"; import { publicInterface } from '@/api/path'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { ResultErrcode } from "@/enums/httpEnum"; import { ResultErrcode } from '@/enums/httpEnum'
import { CompanyTempTopType } from '@/store/modules/chartEditStore/chartEditStore.d' import { CompanyTempTopType } from '@/store/modules/chartEditStore/chartEditStore.d'
import dataJson from "./data.json"; import dataJson from './data.json'
export const handleCompanyTempTop = async (targetComponent: CreateComponentType) => { export const handleCompanyTempTop = async (targetComponent: CreateComponentType) => {
console.log(targetComponent,'targetComponent.commonData'); console.log(targetComponent, 'targetComponent_targetComponent')
const option = targetComponent.option as any
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as CompanyTempTopType
let { enable, space_complete_id, signal_ids} = obj let { enable, space_complete_id, signal_ids,spaceLevel } = obj
if(!enable) return { if (!enable)
return {
errcode: ResultErrcode.SUCCESS, errcode: ResultErrcode.SUCCESS,
data: { ...dataJson }, data: { ...dataJson },
errmsg: '' errmsg: ''
} }
const res:any = await publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', {signal_ids:[signal_ids],space_complete_id}) option.tooltip.formatter = (value:any)=>{
console.log(res,'res_handleCompanyTempTop'); 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) { 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 = { res.data = {
// dimensions: res?.data.brand_count.map((item: {})=>Object.keys(item).join('')), dimensions: ['uid', '温度值',],
dimensions: ['名称','温度值'], source: res?.data.slice(0, 10).map((item: any) => {
source:res?.data.map((item: any)=>{
return { return {
'名称':`${item.node_name}`, uid: item.dems_device_point.uid,
'温度值':item.dems_device_point.node_value, 名称: `${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 return res
} else { } else {
// 后端没有给errcode,前端重置 // 后端没有给errcode,前端重置

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

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

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

@ -58,29 +58,34 @@ const option = computed(() => {
}) })
// 控制所有柱状图的点击事件 // 控制所有柱状图的点击事件
const chartPEvents = (e: any) => { const chartPEvents = (e: any) => {
console.log(e,'e_chartPEvents'), console.log(e, 'e_chartPEvents'), console.log(props.chartConfig, 'chartConfig1')
console.log(props.chartConfig,'chartConfig1')
switch (props.chartConfig.commonData.currentSource) { switch (props.chartConfig.commonData.currentSource) {
case "areaDevCount": case 'areaDevCount':
// 设置公共查询条件
globalQueryParamsStore.setGlobalQueryParams({ globalQueryParamsStore.setGlobalQueryParams({
space_complete_id: e.data.complete_id space_complete_id: e.data.complete_id
}) })
// props.chartConfig.option.series[0].forEach(item=>{
// })
console.log(chartEditStore.getComponentList, 'chartEditStore_getComponentList') console.log(chartEditStore.getComponentList, 'chartEditStore_getComponentList')
// 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法 // 没有统一更新数据的方法，只能尝试改变它的更新时间，促使watch触发请求方法
chartEditStore.getComponentList.forEach(component => { chartEditStore.getComponentList.forEach(component => {
// component.request.requestInterval = 10 // component.request.requestInterval = 10
// component.request.requestInterval = 15 // component.request.requestInterval = 15
if (component.chartConfig.key === 'TextCommon' && component.option.spaceName) {
component.option.dataset = `当前：${e.data.complete_name}`
}
component.request.immediate = true component.request.immediate = true
useChartCommonData(component, useChartEditStore) useChartCommonData(component, useChartEditStore)
}) })
break
break;
default: default:
break; break
} }
} }
onMounted(() => { onMounted(() => {

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

@ -47,9 +47,11 @@ import mapChinaJson from './mapGeojson/china.json'
import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components' import { DatasetComponent, GridComponent, TooltipComponent, GeoComponent, VisualMapComponent } from 'echarts/components'
import { customData as customDataConfig } from './config' import { customData as customDataConfig } from './config'
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
import {useOriginStore} from "@/store/modules/originStore/originStore"; import { useOriginStore } from '@/store/modules/originStore/originStore'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import { debounce } from 'lodash' import { debounce } from 'lodash'
import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
const globalQueryParamsStore = useGlobalQueryParamsStore()
const props = defineProps({ const props = defineProps({
themeSetting: { themeSetting: {
@ -138,8 +140,7 @@ let getData = () => {
vEchartsSetOption() vEchartsSetOption()
} }
}) })
} } else {
else {
vEchartsSetOption() vEchartsSetOption()
} }
} }
@ -148,6 +149,8 @@ getData = debounce(getData, 200)
const vChartRef = ref<typeof VChart>() const vChartRef = ref<typeof VChart>()
const currentMap: Ref<any> = ref(null) const currentMap: Ref<any> = ref(null)
let colorMap: Ref<any> = ref({}) let colorMap: Ref<any> = ref({})
const componentList: Ref<any> = ref([])
const updateMapFn = (data: any) => { const updateMapFn = (data: any) => {
if (!data) return if (!data) return
props.chartConfig.option.series[0].data = data.features.map((it: any) => { props.chartConfig.option.series[0].data = data.features.map((it: any) => {
@ -158,7 +161,7 @@ const updateMapFn = (data: any) => {
value: it.properties.center ? it.properties.center.concat(50) : [], value: it.properties.center ? it.properties.center.concat(50) : [],
itemStyle: { itemStyle: {
color: colorMap.value[obj.roomId] || '#4dca59', color: colorMap.value[obj.roomId] || '#4dca59'
} }
} }
}) })
@ -169,6 +172,9 @@ const getGeojson = (regionId: string) => {
return new Promise<boolean>(resolve => { return new Promise<boolean>(resolve => {
console.log(regionId, 'regionId') console.log(regionId, 'regionId')
if (regionId === '440600') { if (regionId === '440600') {
const chartEditStore = useChartEditStore()
componentList.value = chartEditStore.getComponentList
initSpaceName('佛山市')
get_area_dev_count() get_area_dev_count()
} }
import(`./mapGeojson/${regionId}.json`).then(data => { import(`./mapGeojson/${regionId}.json`).then(data => {
@ -182,14 +188,14 @@ const getGeojson = (regionId: string) => {
const get_area_dev_count = async () => { const get_area_dev_count = async () => {
const res = await publicInterface('/dcim/dems/device', 'get_area_dev_count', { space_type: 'county' }) const res = await publicInterface('/dcim/dems/device', 'get_area_dev_count', { space_type: 'county' })
customData.value.devList = res?.data customData.value.devList = res?.data
console.log(res?.data, 'res?.data')
props.chartConfig.option.series[1].data = res?.data || []
} }
//异步时先注册空的 保证初始化不报错 //异步时先注册空的 保证初始化不报错
if (props.chartConfig.option.mapRegion.province) { if (props.chartConfig.option.mapRegion.province) {
registerMap(`${props.chartConfig.option.mapRegion.province}`, { geoJSON: {} as any, specialAreas: {} }) registerMap(`${props.chartConfig.option.mapRegion.province}`, { geoJSON: {} as any, specialAreas: {} })
} else { } else {
registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} }) registerMap(`${props.chartConfig.option.mapRegion.adcode}`, { geoJSON: {} as any, specialAreas: {} })
} }
// 进行更换初始化地图 如果为china 单独处理 // 进行更换初始化地图 如果为china 单独处理
@ -198,7 +204,6 @@ const registerMapInitAsync = async () => {
const adCode = `${props.chartConfig.option.mapRegion.adcode}` const adCode = `${props.chartConfig.option.mapRegion.adcode}`
const province = `${props.chartConfig.option.mapRegion.province}` const province = `${props.chartConfig.option.mapRegion.province}`
if (adCode !== 'china') { if (adCode !== 'china') {
await getGeojson(province ? province : adCode) await getGeojson(province ? province : adCode)
} else { } else {
await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands) await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
@ -239,7 +244,6 @@ const vEchartsSetOption = () => {
setOption(vChartRef.value, props.chartConfig.option) setOption(vChartRef.value, props.chartConfig.option)
} }
// 处理海南群岛 // 处理海南群岛
const hainanLandsHandle = async (newData: boolean) => { const hainanLandsHandle = async (newData: boolean) => {
if (newData) { if (newData) {
@ -249,27 +253,46 @@ const hainanLandsHandle = async (newData: boolean) => {
} }
} }
const initSpaceName = (text: string) => {
componentList.value
.filter((v: any) => v.chartConfig.key === 'TextCommon' && v.option.spaceName)
.forEach((item: any) => {
item.option.dataset = `当前：${text}`
})
}
// 点击区域 // 点击区域
const chartPEvents = (e: any) => { const chartPEvents = (e: any) => {
console.log(e, 'e') console.log(e, 'e')
console.log(props.chartConfig.option,'props.chartConfig.option.series[1]') e.color = 'pink'
if (props.chartConfig.option.mapRegion.province === 440600) { if (props.chartConfig.option.mapRegion.province === 440600) {
const county = currentMap.value.features.find((item: any) => item.properties.name === e.name) const county = currentMap.value.features.find((item: any) => item.properties.name === e.name)
if (county) { if (county) {
const space_complete: any = customData.value.devList.find((item: any) => { const space_complete: any = customData.value.devList.find((item: any) => {
if (item.space.extend_column_string.length) { if (item.space.extend_column_string.length) {
return JSON.parse(item.space.extend_column_string).county_code === `${county.properties.adcode}` return JSON.parse(item.space.extend_column_string).county_code === `${county.properties.adcode}`
} }
}) })
// 找到空间标识的文字框然后进行赋值
initSpaceName(space_complete?.space.complete_name || `佛山市/${county.properties.name}`)
const chartEditStore = useChartEditStore() console.log(space_complete, 'space_complete_space_complete')
chartEditStore.getComponentList.forEach(component=>{ // 设置公共查询条件
if(component.commonData.currentSource==='areaDevCount'){ globalQueryParamsStore.setGlobalQueryParams({
component.commonData['areaDevCount'].space_complete_id = space_complete?space_complete?.space.complete_id:null space_complete_id: space_complete?.space?.complete_id || '-999'
// useChartCommonData(component, useChartEditStore) })
} globalQueryParamsStore.setAreaDevCountQueryParams({
space_complete_id: space_complete?.space?.complete_id || '-999'
})
componentList.value.forEach((component: any) => {
// if (component.commonData.currentSource === 'areaDevCount') {
// component.commonData['areaDevCount'].space_complete_id = space_complete.space.complete_id
// // useChartCommonData(component, useChartEditStore)
// }
component.request.immediate = true
useChartCommonData(component, useChartEditStore)
}) })
} }
console.log(county, 'county') console.log(county, 'county')
@ -316,7 +339,9 @@ onMounted(() => {
}) })
}) })
watch(() => customData.value.dataMap, () => { watch(
() => customData.value.dataMap,
() => {
let obj = dataMap.value as any let obj = dataMap.value as any
props.chartConfig.option.series[1].tooltip.formatter = (v: any) => { props.chartConfig.option.series[1].tooltip.formatter = (v: any) => {
// if(props.chartConfig.option.mapRegion.province===440600){ // if(props.chartConfig.option.mapRegion.province===440600){
@ -330,20 +355,21 @@ watch(() => customData.value.dataMap, () => {
return str return str
} }
getData() getData()
}, { },
{
immediate: true immediate: true
}) }
)
let scale = ref(1) let scale = ref(1)
const handleWheel = (event: any) => { const handleWheel = (event: any) => {
// 阻止默认行为（例如页面滚动） // 阻止默认行为（例如页面滚动）
event.preventDefault(); event.preventDefault()
if (!option.value.canScroll) return if (!option.value.canScroll) return
// 检查滚动方向 // 检查滚动方向
if (event.deltaY < 0) { if (event.deltaY < 0) {
scale.value = Math.min(3, scale.value + 0.1) scale.value = Math.min(3, scale.value + 0.1)
} } else {
else {
scale.value = Math.max(0.1, scale.value - 0.1) scale.value = Math.max(0.1, scale.value - 0.1)
} }
} }
@ -351,25 +377,25 @@ const handleWheel = (event: any) => {
// 查找父元素，确保父元素的类名为 .go-preview-scale // 查找父元素，确保父元素的类名为 .go-preview-scale
function findParentWithClass(element: any, className: string) { function findParentWithClass(element: any, className: string) {
// 当前元素的父元素 // 当前元素的父元素
let parent = element.parentElement; let parent = element.parentElement
// 遍历父元素链，直到找到匹配的类名或到达文档根元素 // 遍历父元素链，直到找到匹配的类名或到达文档根元素
while (parent && !parent.classList.contains(className)) { while (parent && !parent.classList.contains(className)) {
parent = parent.parentElement; parent = parent.parentElement
} }
// 返回找到的父元素，或者 null 如果没有匹配的父元素 // 返回找到的父元素，或者 null 如果没有匹配的父元素
return parent; return parent
} }
const getScaleXY = (v: string) => { const getScaleXY = (v: string) => {
// 定义正则表达式来匹配 scale 函数中的两个数字 // 定义正则表达式来匹配 scale 函数中的两个数字
const regex = /scale\((\d*\.?\d+),\s*(\d*\.?\d+)\)/; const regex = /scale\((\d*\.?\d+),\s*(\d*\.?\d+)\)/
// 使用正则表达式匹配并提取数字 // 使用正则表达式匹配并提取数字
const matches = v.match(regex); const matches = v.match(regex)
if (matches) { if (matches) {
const scaleX = parseFloat(matches[1]); const scaleX = parseFloat(matches[1])
const scaleY = parseFloat(matches[2]); const scaleY = parseFloat(matches[2])
return [scaleX, scaleY] return [scaleX, scaleY]
} else { } else {
return [1, 1] return [1, 1]
@ -383,7 +409,7 @@ const box = ref()
const handleMousedown = (event: any) => { const handleMousedown = (event: any) => {
if (box.value) { if (box.value) {
let el = box.value let el = box.value
isDragging.value = true; isDragging.value = true
offsetX = event.clientX offsetX = event.clientX
offsetY = event.clientY offsetY = event.clientY
@ -399,30 +425,29 @@ const handleMousedown = (event: any) => {
// 当鼠标移动时触发 // 当鼠标移动时触发
const handleMousemove = (event: any) => { const handleMousemove = (event: any) => {
if (!option.value.canDrag) return if (!option.value.canDrag) return
if (!isDragging.value) return; if (!isDragging.value) return
if (box.value) { if (box.value) {
let parent = findParentWithClass(box.value, 'go-preview-scale') let parent = findParentWithClass(box.value, 'go-preview-scale')
let [scaleX, scaleY] = getScaleXY(parent.style.transform) let [scaleX, scaleY] = getScaleXY(parent.style.transform)
let el = box.value let el = box.value
// 计算元素的新位置 // 计算元素的新位置
const x = left + (event.clientX - offsetX) / scaleX const x = left + (event.clientX - offsetX) / scaleX
const y = top + (event.clientY - offsetY) / scaleY const y = top + (event.clientY - offsetY) / scaleY
// 更新元素的位置 // 更新元素的位置
el.style.left = `${x}px`; el.style.left = `${x}px`
el.style.top = `${y}px`; el.style.top = `${y}px`
} }
} }
// 当鼠标松开时触发 // 当鼠标松开时触发
const handleMouseup = (event: any) => { const handleMouseup = (event: any) => {
if (!option.value.canDrag) return if (!option.value.canDrag) return
isDragging.value = false; isDragging.value = false
// 移除鼠标移动和松开事件监听器 // 移除鼠标移动和松开事件监听器
document.removeEventListener('mousemove', handleMousemove); document.removeEventListener('mousemove', handleMousemove)
document.removeEventListener('mouseup', handleMouseup); document.removeEventListener('mouseup', handleMouseup)
} }
onMounted(() => { onMounted(() => {
@ -441,8 +466,6 @@ onUnmounted(() => {
box?.value?.removeEventListener('mousedown', handleMousedown) box?.value?.removeEventListener('mousedown', handleMousedown)
}) })
//监听是否显示南海群岛 //监听是否显示南海群岛
if (!isPreview()) { if (!isPreview()) {
watch( watch(
@ -489,9 +512,10 @@ watch(
} }
) )
let timer: unknown let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), () => { watch(
() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'),
() => {
if (!isPreview()) return if (!isPreview()) return
if (props.chartConfig.request.requestInterval) { if (props.chartConfig.request.requestInterval) {
if (timer) clearInterval(timer as number) if (timer) clearInterval(timer as number)
@ -502,7 +526,8 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
getData() getData()
}, number) }, number)
} }
}) }
)
onMounted(() => { onMounted(() => {
getData() getData()
@ -518,7 +543,6 @@ onMounted(() => {
onUnmounted(() => { onUnmounted(() => {
if (timer) clearInterval(timer as number) if (timer) clearInterval(timer as number)
}) })
</script> </script>
<style scope lang="scss"> <style scope lang="scss">

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

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

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

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

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

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

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

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

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

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

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

@ -14,28 +14,54 @@
> >
<div v-if="tableData.length" class="itemBox"> <div v-if="tableData.length" class="itemBox">
<div class="item" v-for="(item, i) in tableData" :key="i" @click="clickItem(i)"> <div class="item" v-for="(item, i) in tableData" :key="i" @click="clickItem(i)">
<n-checkbox :disabled="item.confirm_status === 'ok'" v-model:checked="item.checked" class="mr10" size="small" @click.stop/> <n-checkbox
<n-tag class="mr5" size="small" strong :color="{textColor: '#000', color: item.confirm_status === 'ok' ? '#4DCA59' : '#f5b442'}"> :disabled="item.confirm_status === 'ok'"
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' ? '已确认' : '未确认' }} {{ item.confirm_status === 'ok' ? '已确认' : '未确认' }}
</n-tag> </n-tag>
<n-tag class="mr5" size="small" :color="{ textColor: item.color1, borderColor: item.color1 }"> <n-tag class="mr5" size="small" :color="{ textColor: item.color1, borderColor: item.color1 }">
{{ select1.options[item.level - 1].label }} {{ select1.options[item.level - 1].label }}
</n-tag> </n-tag>
<div class="textEllipsis" style="color: rgba(255, 255, 255, 0.82);flex: 20;">{{ item.content }}</div> <div class="textEllipsis" style="color: rgba(255, 255, 255, 0.82); flex: 20">{{ item.content }}</div>
<div style="flex: 1;"></div> <div style="flex: 1"></div>
<div class="mr10 textEllipsis" style="color: #B5BAC3;width: 150px">{{ moment(item.generate_time).format('yyyy-MM-DD HH:mm:ss') }}</div> <div class="mr10 textEllipsis" style="color: #b5bac3; width: 150px">
<LocationIcon @click.stop="jumpTo(item)" class="mr10" style="width: 20px;height: 20px;color: #4196ff;"/> {{ moment(item.generate_time).format('yyyy-MM-DD HH:mm:ss') }}
<CheckCircleOutlinedIcon @click.stop="clickSingle(item.id)" v-if="item.confirm_status === 'not'" class="mr10" style="width: 20px;height: 20px;color: #4196ff;"/> </div>
<LocationIcon @click.stop="jumpTo(item)" class="mr10" style="width: 20px; height: 20px; color: #4196ff" />
<CheckCircleOutlinedIcon
@click.stop="clickSingle(item.id)"
v-if="item.confirm_status === 'not'"
class="mr10"
style="width: 20px; height: 20px; color: #4196ff"
/>
<div v-else class="mr10" style="width: 20px"></div> <div v-else class="mr10" style="width: 20px"></div>
<template v-if="alarmVideos[i]"> <template v-if="alarmVideos[i]">
<SpinnerIcon v-if="showLoading && currentVideo.alarmId === item.id" class="rotate" style="width: 18px;height: 18px;color: #4196ff;"/> <SpinnerIcon
<PlayCircle16FilledIcon v-else @click.stop="showVideo(alarmVideos[i], item.id)" style="width: 20px;height: 20px;color: #4196ff;"/> v-if="showLoading && currentVideo.alarmId === item.id"
class="rotate"
style="width: 18px; height: 18px; color: #4196ff"
/>
<PlayCircle16FilledIcon
v-else
@click.stop="showVideo(alarmVideos[i], item.id)"
style="width: 20px; height: 20px; color: #4196ff"
/>
</template> </template>
<div v-else style="width: 20px"></div> <div v-else style="width: 20px"></div>
</div> </div>
</div> </div>
<div class="emptyBox" v-else> <div class="emptyBox" v-else>
<img src="@/assets/images/exception/nodata.svg" style="width: 100%;height: 50%" alt=""> <img src="@/assets/images/exception/nodata.svg" style="width: 100%; height: 50%" alt="" />
<div style="color: #fff; text-align: center">查询结果为空</div> <div style="color: #fff; text-align: center">查询结果为空</div>
</div> </div>
<!-- <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>--> <!-- <VModal v-model:show="modalObj.show" :data="modalObj.data" :select1Options="select1.options"/>-->
@ -50,9 +76,9 @@ import { CreateComponentType } from '@/packages/index.d'
import { publicInterface } from '@/api/path/business.api' import { publicInterface } from '@/api/path/business.api'
import BorderBox from './BorderBoxV2.vue' import BorderBox from './BorderBoxV2.vue'
import { isPreview, postMessageToParent, useGetMessageByParent } from '@/utils' import { isPreview, postMessageToParent, useGetMessageByParent } from '@/utils'
import moment from "moment" import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
import { icon } from '@/plugins/icon' import { icon } from '@/plugins/icon'
import VModal from './VModal.vue' import VModal from './VModal.vue'
import VModalV1 from './VModalV1.vue' import VModalV1 from './VModalV1.vue'
@ -113,50 +139,55 @@ const select2:Select2Type = reactive({
value: [], value: [],
options: [ options: [
{ label: '已确认', value: 'ok', number: 0, color: '#4DCA59' }, { label: '已确认', value: 'ok', number: 0, color: '#4DCA59' },
{ label: '未确认', value: 'not', number: 0, color: '#f5b442' }, { label: '未确认', value: 'not', number: 0, color: '#f5b442' }
] ]
}) })
type tableDataItemType = { type tableDataItemType = {
id: number, id: number
content: string, content: string
generate_time: string, generate_time: string
checked: boolean, checked: boolean
confirm_status: 'ok' | 'not', confirm_status: 'ok' | 'not'
level: number, level: number
color1: string, color1: string
color2: string, color2: string
position: string, position: string
device_name: string, device_name: string
node_name: string, node_name: string
confirm_people: string, confirm_people: string
confirm_time: string, confirm_time: string
reconfirmation_time_str: string, reconfirmation_time_str: string
serial_no: string, serial_no: string
remark: string, remark: string
[k:string]: any, [k: string]: any
} }
let tableData: tableDataItemType[] = reactive([]) let tableData: tableDataItemType[] = reactive([])
watch(() => tableData.map(_ => _.checked), (v:boolean[]) => { watch(
() => tableData.map(_ => _.checked),
(v: boolean[]) => {
if (!v.length) checkAll.value = false if (!v.length) checkAll.value = false
else if (v.every(_ => _)) checkAll.value = true else if (v.every(_ => _)) checkAll.value = true
else if (v.every(_ => !_)) checkAll.value = false else if (v.every(_ => !_)) checkAll.value = false
}) }
)
let checkAll = ref(false) let checkAll = ref(false)
watch(() => checkAll.value, (v) => { watch(
tableData.forEach(_ => _.checked = v) () => checkAll.value,
}) v => {
tableData.forEach(_ => (_.checked = v))
}
)
const getNumber = () => { const getNumber = () => {
console.log(props.chartConfig.customData?.dems_device_point_signal_ids,'props.chartConfig.customData?.dems_device_point_signal_ids')
const q = { const q = {
space_complete_id: props.chartConfig.customData?.space_complete_id, space_complete_id: props.chartConfig.customData?.space_complete_id,
confirm_statuss: alarmConfirmStatus.value, confirm_statuss: alarmConfirmStatus.value,
handle_statuss: alarmHandleStatuss.value, handle_statuss: alarmHandleStatuss.value,
recovery_statuss: alarmRecoveryStatus.value, recovery_statuss: alarmRecoveryStatus.value,
dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(','), signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(',')
} }
publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level_new', q).then(res => { publicInterface('/dcim/dems/devie_active_alarm', 'count_by_level_new', q).then(res => {
if (res && JSON.stringify(res.data) !== '{}') { if (res && JSON.stringify(res.data) !== '{}') {
@ -172,7 +203,8 @@ const getNumber = () => {
space_complete_id: props.chartConfig.customData?.space_complete_id, space_complete_id: props.chartConfig.customData?.space_complete_id,
append_space_to_content: 'complete', append_space_to_content: 'complete',
handle_statuss: alarmHandleStatuss.value, handle_statuss: alarmHandleStatuss.value,
recovery_statuss: alarmRecoveryStatus.value recovery_statuss: alarmRecoveryStatus.value,
dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(',')
} }
} }
publicInterface('/dcim/dems/devie_active_alarm', 'get_app_alarm_num_by_condition', param).then(res => { publicInterface('/dcim/dems/devie_active_alarm', 'get_app_alarm_num_by_condition', param).then(res => {
@ -196,7 +228,8 @@ let alarmVideos = ref([])
let currentVideo: any = ref({}) let currentVideo: any = ref({})
const getVideos = (ids: number[], alarmIds: number[]) => { const getVideos = (ids: number[], alarmIds: number[]) => {
if (ids.length) { if (ids.length) {
publicInterface('/dcim/video_monitor/other_device', 'get_alarm_device', {device_uids: ids.toString()}).then((res: any) => { publicInterface('/dcim/video_monitor/other_device', 'get_alarm_device', { device_uids: ids.toString() }).then(
(res: any) => {
// if(res.errcode !== '00000') return // if(res.errcode !== '00000') return
if (!res?.data) return if (!res?.data) return
let arr: any = [] let arr: any = []
@ -205,7 +238,8 @@ const getVideos = (ids: number[], alarmIds: number[]) => {
}) })
alarmVideos.value = arr.concat() alarmVideos.value = arr.concat()
let index = 0, last:any = {} let index = 0,
last: any = {}
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
if (arr[i]) { if (arr[i]) {
last = arr[i] last = arr[i]
@ -214,14 +248,17 @@ const getVideos = (ids: number[], alarmIds: number[]) => {
} }
} }
if (JSON.stringify(currentVideo.value) === '{}' && !last) return if (JSON.stringify(currentVideo.value) === '{}' && !last) return
let obj = JSON.stringify(currentVideo.value) !== '{}' ? JSON.parse(JSON.stringify(currentVideo.value)) : { let obj =
JSON.stringify(currentVideo.value) !== '{}'
? JSON.parse(JSON.stringify(currentVideo.value))
: {
ip: '', ip: '',
port: null, port: null,
account: '', account: '',
password: '', password: '',
channel: '', channel: '',
brand: '', brand: '',
plugin: '', plugin: ''
} }
if (last) { if (last) {
for (let k in obj) { for (let k in obj) {
@ -235,13 +272,14 @@ const getVideos = (ids: number[], alarmIds: number[]) => {
type: 'openVideoV2', type: 'openVideoV2',
data: obj data: obj
}) })
}) }
)
} }
} }
const showLoading = ref(false) const showLoading = ref(false)
const { getMessageByParent } = useGetMessageByParent() const { getMessageByParent } = useGetMessageByParent()
getMessageByParent('', (e) => { getMessageByParent('', e => {
if (e.data.type === 'openVideoV2_closeLoading' && e.data.page === 'customLargeScreen') { if (e.data.type === 'openVideoV2_closeLoading' && e.data.page === 'customLargeScreen') {
showLoading.value = false showLoading.value = false
} }
@ -254,7 +292,7 @@ const showVideo = (obj: any, id: number) => {
password: '', password: '',
channel: '', channel: '',
brand: '', brand: '',
plugin: '', plugin: ''
} }
for (let k in a) { for (let k in a) {
a[k] = obj[k] a[k] = obj[k]
@ -281,8 +319,7 @@ const getData = () => {
append_space_to_content: 'complete', append_space_to_content: 'complete',
handle_statuss: alarmHandleStatuss.value, handle_statuss: alarmHandleStatuss.value,
recovery_statuss: alarmRecoveryStatus.value, recovery_statuss: alarmRecoveryStatus.value,
dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(','), dems_device_point_signal_ids: props.chartConfig.customData?.dems_device_point_signal_ids.split(',')
}, },
page: { page: {
page_size: 10, page_size: 10,
@ -314,9 +351,12 @@ const getData = () => {
confirm_time: e.confirm_time, confirm_time: e.confirm_time,
reconfirmation_time_str: e.reconfirmation_time_str, reconfirmation_time_str: e.reconfirmation_time_str,
serial_no: e.serial_no, serial_no: e.serial_no,
remark: e.remark, remark: e.remark
})) }))
getVideos(arr.map(_ => _.device?.uid), arr.map(_ => _.id)) getVideos(
arr.map(_ => _.device?.uid),
arr.map(_ => _.id)
)
if (checkAll.value) { if (checkAll.value) {
arr = arr.map((e: any) => ({ ...e, checked: e.confirm_status !== 'ok' })) arr = arr.map((e: any) => ({ ...e, checked: e.confirm_status !== 'ok' }))
} else if (lastTableData.length) { } else if (lastTableData.length) {
@ -339,7 +379,7 @@ const getData = () => {
const clickItem = (i: number) => { const clickItem = (i: number) => {
postMessageToParent({ postMessageToParent({
type: 'openRealTimeEventDetail', type: 'openRealTimeEventDetail',
currentAlarm: tableData[i], currentAlarm: tableData[i]
}) })
// 自己写的详情 // 自己写的详情
@ -357,7 +397,9 @@ const systemConstant = originStore.getOriginStore.user.systemConstant
const systemConfig = originStore.getOriginStore.user.systemConfig const systemConfig = originStore.getOriginStore.user.systemConfig
if (systemConstant['warn_levels']) { if (systemConstant['warn_levels']) {
select1.options = systemConstant['warn_levels'].filter((item: any) => item.value !== '').map((item: any) => { select1.options = systemConstant['warn_levels']
.filter((item: any) => item.value !== '')
.map((item: any) => {
return { label: item.label, value: Number(item.value), number: 0, color: item.remark } return { label: item.label, value: Number(item.value), number: 0, color: item.remark }
}) })
} }
@ -383,9 +425,12 @@ if(systemConfig) {
} }
} }
watch(() => select1.value.join('&&') + select2.value.join('&&'), (v) => { watch(
() => select1.value.join('&&') + select2.value.join('&&'),
v => {
getData() getData()
}) }
)
// const modalV1Obj = reactive({ // const modalV1Obj = reactive({
// show: false, // show: false,
@ -410,7 +455,7 @@ const clickBatch = () => {
postMessageToParent({ postMessageToParent({
type: 'openRealTimeEventDialog', type: 'openRealTimeEventDialog',
multipleConfirm: true, multipleConfirm: true,
selectIds, selectIds
}) })
// Object.assign(modalV1Obj, { // Object.assign(modalV1Obj, {
// show: true, // show: true,
@ -426,7 +471,7 @@ const clickBatch = () => {
// }) // })
} }
getMessageByParent('', (e) => { getMessageByParent('', e => {
if (e.data.type === 'openRealTimeEventDialog_confirmed' && e.data.page === 'customLargeScreen') { if (e.data.type === 'openRealTimeEventDialog_confirmed' && e.data.page === 'customLargeScreen') {
console.log('openRealTimeEventDialog_confirmed') console.log('openRealTimeEventDialog_confirmed')
getData() getData()
@ -436,7 +481,7 @@ const clickSingle = (id: number) => {
postMessageToParent({ postMessageToParent({
type: 'openRealTimeEventDialog', type: 'openRealTimeEventDialog',
multipleConfirm: false, multipleConfirm: false,
selectIds: [id], selectIds: [id]
}) })
// 自己写的弹窗 // 自己写的弹窗
@ -476,13 +521,11 @@ const jumpTo = (row:any) => {
type: 'changeRouterV1', type: 'changeRouterV1',
url: `/dynamicRing/schematicDiagram/${res.data[0].id}` url: `/dynamicRing/schematicDiagram/${res.data[0].id}`
}) })
} } else {
else {
window['$message'].warning('所选节点没有配置页面') window['$message'].warning('所选节点没有配置页面')
} }
}) })
} } else {
else {
window['$message'].warning('所选节点没有配置页面') window['$message'].warning('所选节点没有配置页面')
} }
} }
@ -490,12 +533,21 @@ const jumpTo = (row:any) => {
const jumpMore = () => { const jumpMore = () => {
postMessageToParent({ postMessageToParent({
type: 'changeRouterV1', type: 'changeRouterV1',
url: `/alarmManage/monitorAlarm` url: `/alarmManage/monitorAlarm`,
query:{dems_device_point_signal_ids:props.chartConfig.customData?.dems_device_point_signal_ids}
}) })
} }
let timer: unknown let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit, props.chartConfig.customData?.space_complete_id].join('&&'), v => { watch(
() =>
[
props.chartConfig.request.requestInterval,
props.chartConfig.request.requestIntervalUnit,
props.chartConfig.customData?.space_complete_id
].join('&&'),
v => {
if (!isPreview()) return if (!isPreview()) return
if (props.chartConfig.request.requestInterval) { if (props.chartConfig.request.requestInterval) {
if (timer) clearInterval(timer as number) if (timer) clearInterval(timer as number)
@ -506,7 +558,8 @@ watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.reques
getData() getData()
}, number) }, number)
} }
}) }
)
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
getData() getData()
@ -582,7 +635,7 @@ onUnmounted(() => {
justify-content: center; justify-content: center;
padding: 0 10px; padding: 0 10px;
margin: 3px 0; margin: 3px 0;
background: rgba(65,150,255,.05); background: rgba(65, 150, 255, 0.05);
cursor: pointer; cursor: pointer;
} }
} }

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

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

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

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

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

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

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

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

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

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

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

@ -1,26 +1,45 @@
<template> <template>
<BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto"> <BorderBox :title="chartConfig?.customData?.title" :style="getStyle(borderRadius)" style="overflow: auto">
<div class="container" v-if="type_count.length">
<div class="container">
<div class="classify" v-for="item in type_count" :key="item"> <div class="classify" v-for="item in type_count" :key="item">
<div class="img"> <div class="img">
<img v-if="props.chartConfig?.customData?.currentSource==='IT'" src="@/assets/images/chart/decorates/Base1.png" alt=""> <img
<img v-else src="@/assets/images/chart/decorates/Base4.png" alt=""> v-if="props.chartConfig?.customData?.currentSource === 'IT'"
src="@/assets/images/chart/decorates/Base1.png"
alt=""
/>
<img v-else src="@/assets/images/chart/decorates/Base4.png" alt="" />
<div class="value"> <div class="value">
{{ Object.values(item)[0] }} {{ Object.values(item)[0] }}
</div> </div>
</div> </div>
<div class="value"> <div class="value">
{{Object.keys(item)[0]}} {{ Object.keys(item)[0] || '未知分类' }}
</div> </div>
</div> </div>
</div> </div>
<!-- 无数据 -->
<div v-else class="no-data go-flex-center">
<img :src="noData" alt="暂无数据" />
<n-text :depth="3">暂无数据</n-text>
</div>
</BorderBox> </BorderBox>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, shallowReactive, watch, toRefs, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue' import {
PropType,
shallowReactive,
watch,
toRefs,
reactive,
onMounted,
onUnmounted,
nextTick,
ref,
computed,
Ref
} from 'vue'
import { useChartDataFetch } from '@/hooks' import { useChartDataFetch } from '@/hooks'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@ -28,24 +47,27 @@ import { publicInterface } from '@/api/path/business.api'
import BorderBox from '../components/BorderBox.vue' import BorderBox from '../components/BorderBox.vue'
import VChart from 'vue-echarts' import VChart from 'vue-echarts'
import { isPreview } from '@/utils' import { isPreview } from '@/utils'
import {graphic} from "echarts"; import { graphic } from 'echarts'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
import moment from "moment" import moment from 'moment'
import {selectTimeOptions} from "@/views/chart/ContentConfigurations/components/ChartData/index.d"; import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
import {RequestHttpIntervalEnum} from "@/enums/httpEnum"; import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore' import { useGlobalQueryParamsStore } from '@/store/modules/globalQueryParamsStore/globalQueryParamsStore'
import { customData as customDataConfig } from './config'
import noData from '@/assets/images/canvas/noData.png'
const globalQueryParamsStore = useGlobalQueryParamsStore() const globalQueryParamsStore = useGlobalQueryParamsStore()
const props = defineProps({ const props = defineProps({
chartConfig: { chartConfig: {
type: Object as PropType<CreateComponentType>, type: Object as PropType<CreateComponentType>,
required: true required: true
}, }
}) })
const { w, h } = toRefs(props.chartConfig.attr) const { w, h } = toRefs(props.chartConfig.attr)
const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option) const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
const customData: Ref<typeof customDataConfig> = computed(() => {
return props.chartConfig.customData as typeof customDataConfig
})
const getStyle = (radius: number) => { const getStyle = (radius: number) => {
return { return {
borderRadius: `${radius}px`, borderRadius: `${radius}px`,
@ -63,7 +85,7 @@ const getData = () => {
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
}).then(res => { }).then(res => {
if (res && res.data) { if (res && res.data) {
type_count.value = res.data.type_count type_count.value = res?.data?.type_count||[]
// for (const key in computeNodeData) { // for (const key in computeNodeData) {
// computeNodeData[key] = res.data[key] // computeNodeData[key] = res.data[key]
// } // }
@ -71,6 +93,7 @@ const getData = () => {
}) })
} else { } else {
publicInterface('/dcim/dems/device', 'get_dev_category_count', { publicInterface('/dcim/dems/device', 'get_dev_category_count', {
device_codes: customData.value.device_codes?.length ? customData.value.device_codes.split(',') : [],
...globalQueryParamsStore.getGlobalQueryParams ...globalQueryParamsStore.getGlobalQueryParams
}).then(res => { }).then(res => {
if (res && res.data) { if (res && res.data) {
@ -85,52 +108,60 @@ const getData = () => {
} }
}) })
} }
} }
let timer: unknown let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => { 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 if (!isPreview()) return
console.log(props, 'props') console.log(props, 'props')
if (props.chartConfig.request.requestInterval) { if (props.chartConfig.request.requestInterval) {
if(timer) clearInterval(timer as number) startInterval()
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || {unit: 0}
const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval
timer = setInterval(() => {
getData()
}, number)
} }
}) }
)
watch(()=>props.chartConfig?.customData?.currentSource,()=>{ watch(
() => props.chartConfig?.customData?.currentSource,
console.log(props.chartConfig?.customData?.currentSource,'chartConfig'); () => {
console.log(props.chartConfig?.customData?.currentSource, 'chartConfig')
getData() getData()
// 根据currentSource去获取对应 参数 // 根据currentSource去获取对应 参数
}) }
watch(()=>props.chartConfig?.request?.immediate,(v)=>{ )
watch(
() => props.chartConfig?.request?.immediate,
v => {
if (!v) return if (!v) return
getData() getData()
startInterval()
props.chartConfig.request.immediate = false props.chartConfig.request.immediate = false
// 根据currentSource去获取对应 参数 // 根据currentSource去获取对应 参数
}
}) )
onMounted(() => { const startInterval = () => {
nextTick(() => {
getData()
})
if (!isPreview()) return if (!isPreview()) return
if (timer) clearInterval(timer as number)
const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 } const obj = selectTimeOptions.find(_ => _.value === props.chartConfig.request.requestIntervalUnit) || { unit: 0 }
const unit = obj.unit const unit = obj.unit
const number = unit * props.chartConfig.request.requestInterval! const number = unit * props.chartConfig.request.requestInterval!
timer = setInterval(() => { timer = setInterval(() => {
console.log('class_setInterval')
nextTick(() => { nextTick(() => {
getData() getData()
}) })
}, number) }, number)
}
onMounted(() => {
getData()
startInterval()
}) })
onUnmounted(() => { onUnmounted(() => {
clearInterval(timer as number) clearInterval(timer as number)
@ -152,7 +183,6 @@ onUnmounted(() => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto; overflow: auto;
} }
.classify { .classify {
display: flex; display: flex;
@ -179,8 +209,6 @@ onUnmounted(() => {
white-space: pre-wrap; white-space: pre-wrap;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
} }
} }
@ -193,8 +221,14 @@ onUnmounted(() => {
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
letter-spacing: 0em; letter-spacing: 0em;
font-variation-settings: "opsz" auto; font-variation-settings: 'opsz' auto;
color: #4196FF; color: #4196ff;
}
.no-data {
flex-direction: column;
width: 100%;
img {
width: 120px;
}
} }
</style> </style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -13,10 +13,10 @@
<AssetsClass v-else-if="matchComponent(CurrentSourceEnum.ASSETSCLASS)" /> <AssetsClass v-else-if="matchComponent(CurrentSourceEnum.ASSETSCLASS)" />
<CompanyTempTop v-else-if="matchComponent(CurrentSourceEnum.COMPANYTEMPTOP)" /> <CompanyTempTop v-else-if="matchComponent(CurrentSourceEnum.COMPANYTEMPTOP)" />
<AlarmTrend v-else-if="matchComponent(CurrentSourceEnum.ALARMTREND)" /> <AlarmTrend v-else-if="matchComponent(CurrentSourceEnum.ALARMTREND)" />
<AreaDevCount v-else-if="matchComponent(CurrentSourceEnum.AREADEVCOUNT)" />
<PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)" /> <PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)" />
<CategoryBrandCountTable v-else-if="matchComponent(CurrentSourceEnum.CATEGORYBRANDCOUNTTABLE)" /> <CategoryBrandCountTable v-else-if="matchComponent(CurrentSourceEnum.CATEGORYBRANDCOUNTTABLE)" />
<ManualInput v-else-if="matchComponent(CurrentSourceEnum.MANUALINPUT)" /> <ManualInput v-else-if="matchComponent(CurrentSourceEnum.MANUALINPUT)" />
</template> </template>
<template v-else-if="IsCommonSingle"> <template v-else-if="IsCommonSingle">
<setting-item-box name="数据源" :alone="true"> <setting-item-box name="数据源" :alone="true">
@ -36,16 +36,26 @@
:show-button="false" :show-button="false"
placeholder="请输入" placeholder="请输入"
size="small" size="small"
style="flex: 1;" style="flex: 1"
> >
</n-input-number> </n-input-number>
<!-- 单位 --> <!-- 单位 -->
<n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/> <n-select
class="select-time-options"
v-model:value="targetData.request.requestIntervalUnit"
:options="selectTimeOptions"
size="small"
style="width: 80px"
/>
</n-input-group> </n-input-group>
</setting-item-box> </setting-item-box>
</div> </div>
<div v-else-if="!IsStatic && targetData.chartConfig.conDataKey"> <div v-else-if="!IsStatic && targetData.chartConfig.conDataKey">
<component :is="targetData.chartConfig.conDataKey" :customData="targetData.customData" :request="targetData.request"></component> <component
:is="targetData.chartConfig.conDataKey"
:customData="targetData.customData"
:request="targetData.request"
></component>
<setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true"> <setting-item-box v-if="targetData?.customData?.showInterval" name="更新间隔" :alone="true">
<n-input-group> <n-input-group>
<n-input-number <n-input-number
@ -54,17 +64,21 @@
:show-button="false" :show-button="false"
placeholder="请输入" placeholder="请输入"
size="small" size="small"
style="flex: 1;" style="flex: 1"
> >
</n-input-number> </n-input-number>
<!-- 单位 --> <!-- 单位 -->
<n-select class="select-time-options" v-model:value="targetData.request.requestIntervalUnit" :options="selectTimeOptions" size="small" style="width: 80px"/> <n-select
class="select-time-options"
v-model:value="targetData.request.requestIntervalUnit"
:options="selectTimeOptions"
size="small"
style="width: 80px"
/>
</n-input-group> </n-input-group>
</setting-item-box> </setting-item-box>
</div> </div>
<div v-else-if="IsStatic"> <div v-else-if="IsStatic">暂无数据</div>
暂无数据
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -77,6 +91,7 @@ import MonthAlarmClass from './components/MonthAlarmClass.vue'
import AssetsClass from './components/AssetsClass.vue' import AssetsClass from './components/AssetsClass.vue'
import CompanyTempTop from './components/CompanyTempTop.vue' import CompanyTempTop from './components/CompanyTempTop.vue'
import AlarmTrend from './components/AlarmTrend.vue' import AlarmTrend from './components/AlarmTrend.vue'
import AreaDevCount from './components/AreaDevCount.vue'
import DeviceClass from './components/DeviceClass.vue' import DeviceClass from './components/DeviceClass.vue'
import PointTable from './components/PointTable.vue' import PointTable from './components/PointTable.vue'
import CategoryBrandCountTable from './components/CategoryBrandCountTable.vue' import CategoryBrandCountTable from './components/CategoryBrandCountTable.vue'
@ -92,10 +107,10 @@ import { sourceOptions, optionTypeEnum, selectTimeOptions } from './index.d'
import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d' import { PackagesCategoryEnum, CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
import { PieCircleConfig } from '@/packages/components/Charts/Pies/PieCircle/index' import { PieCircleConfig } from '@/packages/components/Charts/Pies/PieCircle/index'
import { TextBarrageConfig } from "@/packages/components/Informations/Texts/TextBarrage/index"; import { TextBarrageConfig } from '@/packages/components/Informations/Texts/TextBarrage/index'
import { TextCommonConfig } from "@/packages/components/Informations/Texts/TextCommon/index"; import { TextCommonConfig } from '@/packages/components/Informations/Texts/TextCommon/index'
import { TextGradientConfig } from "@/packages/components/Informations/Texts/TextGradient/index"; import { TextGradientConfig } from '@/packages/components/Informations/Texts/TextGradient/index'
import { WaterPoloConfig } from "@/packages/components/Charts/Mores/WaterPolo/index"; import { WaterPoloConfig } from '@/packages/components/Charts/Mores/WaterPolo/index'
import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/index' import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/index'
import { BorderCustom2Config } from '@/packages/components/Decorates/Borders/BorderCustom2/index' import { BorderCustom2Config } from '@/packages/components/Decorates/Borders/BorderCustom2/index'
@ -124,7 +139,7 @@ const IsCommonSingle = computed(() => {
TextGradientConfig, TextGradientConfig,
WaterPoloConfig, WaterPoloConfig,
DashboardConfig, DashboardConfig,
BorderCustom2Config, BorderCustom2Config
] ]
const { package: packageStr, category, key } = targetData.value.chartConfig const { package: packageStr, category, key } = targetData.value.chartConfig
const flag = singleCharArr.some(_ => { const flag = singleCharArr.some(_ => {