Web端添加治理模块状态展示界面、模块事件展示、主动询问模块状态功能
This commit is contained in:
@@ -121,8 +121,24 @@ export function getById(data?: any) {
|
|||||||
//测试项日志修改
|
//测试项日志修改
|
||||||
export function updateRecordData(data?: any) {
|
export function updateRecordData(data?: any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: 'cs-device-boot/wlRecord/updateRecordData',
|
url: '/cs-device-boot/wlRecord/updateRecordData',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//模块数据
|
||||||
|
export function allModelData(data?: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/data/allModelData',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//刷新状态
|
||||||
|
export function getModuleState(data?: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/data/getModuleState',
|
||||||
|
method: 'POST',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -51,13 +51,7 @@ const initChart = () => {
|
|||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
label: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 16
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
@@ -66,7 +60,7 @@ const initChart = () => {
|
|||||||
},
|
},
|
||||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
confine: true,
|
// confine: true,
|
||||||
...(props.options?.tooltip || null)
|
...(props.options?.tooltip || null)
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
@@ -109,6 +103,7 @@ const initChart = () => {
|
|||||||
type: 'inside',
|
type: 'inside',
|
||||||
height: 13,
|
height: 13,
|
||||||
start: 0,
|
start: 0,
|
||||||
|
|
||||||
bottom: '20px',
|
bottom: '20px',
|
||||||
end: 100
|
end: 100
|
||||||
},
|
},
|
||||||
@@ -117,7 +112,7 @@ const initChart = () => {
|
|||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '20px',
|
||||||
end: 100
|
end: 100
|
||||||
},
|
}
|
||||||
// {
|
// {
|
||||||
// show: true,
|
// show: true,
|
||||||
// yAxisIndex: 0,
|
// yAxisIndex: 0,
|
||||||
|
|||||||
@@ -417,7 +417,7 @@ const setTime = (flag = 0, e = 0) => {
|
|||||||
|
|
||||||
let data = ''
|
let data = ''
|
||||||
|
|
||||||
if ((dd < 4 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
|
if ((dd < 2 || dd == 0) && interval.value != 4 && !props.theCurrentTime) {
|
||||||
data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
|
data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
|
||||||
} else {
|
} else {
|
||||||
data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
|
data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
|
||||||
|
|||||||
@@ -12,11 +12,9 @@ import { useDictData } from '@/stores/dictData'
|
|||||||
// const props = defineProps(['template'])
|
// const props = defineProps(['template'])
|
||||||
interface Props {
|
interface Props {
|
||||||
template?: boolean
|
template?: boolean
|
||||||
|
|
||||||
}
|
}
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
template: false,
|
template: false
|
||||||
|
|
||||||
})
|
})
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'govern/deviceTree'
|
name: 'govern/deviceTree'
|
||||||
@@ -29,15 +27,11 @@ const dictData = useDictData()
|
|||||||
const treRef = ref()
|
const treRef = ref()
|
||||||
const width = ref('')
|
const width = ref('')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const info = () => {
|
const info = () => {
|
||||||
getLineTree().then(res => {
|
tree.value = []
|
||||||
let arr1: any[] = []
|
let arr1: any[] = []
|
||||||
let arr2: any[] = []
|
let arr2: any[] = []
|
||||||
|
getLineTree().then(res => {
|
||||||
//治理设备
|
//治理设备
|
||||||
res.data.map((item: any) => {
|
res.data.map((item: any) => {
|
||||||
if (item.name == '治理设备') {
|
if (item.name == '治理设备') {
|
||||||
@@ -71,13 +65,15 @@ const info = () => {
|
|||||||
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
item.children.forEach((item2: any) => {
|
item.children.forEach((item2: any) => {
|
||||||
item2.icon = 'el-icon-Platform'
|
item2.icon = 'el-icon-Platform'
|
||||||
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
item2.color =
|
||||||
|
item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
|
||||||
arr2.push(item2)
|
arr2.push(item2)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
tree.value = res.data
|
tree.value = res.data
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (arr1.length) {
|
if (arr1.length) {
|
||||||
//初始化选中
|
//初始化选中
|
||||||
@@ -98,7 +94,6 @@ const info = () => {
|
|||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
else {
|
else {
|
||||||
|
|
||||||
emit('init', arr2[0])
|
emit('init', arr2[0])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -108,17 +103,16 @@ const changePointType = (val: any, obj: any) => {
|
|||||||
emit('pointTypeChange', val, obj)
|
emit('pointTypeChange', val, obj)
|
||||||
}
|
}
|
||||||
if (props.template) {
|
if (props.template) {
|
||||||
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
|
getTemplateByDept({ id: dictData.state.area[0].id })
|
||||||
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
info()
|
info()
|
||||||
|
})
|
||||||
}).catch(err => {
|
.catch(err => {
|
||||||
info()
|
info()
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
info()
|
info()
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {})
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,9 +1,16 @@
|
|||||||
<!-- 设备监控使用折叠面板渲染多个tree -->
|
<!-- 设备监控使用折叠面板渲染多个tree -->
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
||||||
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
<Icon
|
||||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer"
|
v-show="menuCollapse"
|
||||||
v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
|
@click="onMenuCollapse"
|
||||||
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 mt20 menu-collapse"
|
||||||
|
style="cursor: pointer"
|
||||||
|
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
|
||||||
|
/>
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
@@ -11,22 +18,43 @@
|
|||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
<Icon
|
||||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
|
@click="onMenuCollapse"
|
||||||
|
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
|
:class="menuCollapse ? 'unfold' : ''"
|
||||||
|
size="18"
|
||||||
|
class="fold ml10 menu-collapse"
|
||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'" />
|
v-if="props.canExpand && route.path != '/admin/govern/reportCore/statistics/index'"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
|
<el-collapse
|
||||||
@change="changeDevice">
|
:accordion="true"
|
||||||
|
v-model.trim="activeName"
|
||||||
|
style="flex: 1; height: 100%"
|
||||||
|
@change="changeDevice"
|
||||||
|
>
|
||||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length != 0">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
|
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
|
||||||
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
|
ref="treeRef1"
|
||||||
node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
|
:props="defaultProps"
|
||||||
|
highlight-current
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
default-expand-all
|
||||||
|
v-bind="$attrs"
|
||||||
|
:data="zlDeviceData"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -35,13 +63,24 @@
|
|||||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
|
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
|
||||||
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
|
ref="treeRef2"
|
||||||
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
|
:props="defaultProps"
|
||||||
style="overflow: auto">
|
highlight-current
|
||||||
|
default-expand-all
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
node-key="id"
|
||||||
|
:data="bxsDeviceData"
|
||||||
|
v-bind="$attrs"
|
||||||
|
style="overflow: auto"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
<Icon
|
||||||
v-if="data.icon" />
|
:name="data.icon"
|
||||||
|
style="font-size: 16px"
|
||||||
|
:style="{ color: data.color }"
|
||||||
|
v-if="data.icon"
|
||||||
|
/>
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -97,12 +136,23 @@ watch(
|
|||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
zlDeviceData.value.push(vv)
|
zlDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
|
// console.log('🚀 ~ item.children.map ~ zlDeviceData.value:', zlDeviceData.value)
|
||||||
} else if (item.name == '便携式设备') {
|
} else if (item.name == '便携式设备') {
|
||||||
item.children.map((vv: any) => {
|
item.children.map((vv: any) => {
|
||||||
bxsDeviceData.value.push(vv)
|
bxsDeviceData.value.push(vv)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
if (zlDeviceData.value.length != 0) {
|
||||||
|
activeName.value = '0'
|
||||||
|
}
|
||||||
|
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
||||||
|
activeName.value = '1'
|
||||||
|
}
|
||||||
|
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
||||||
|
activeName.value = ''
|
||||||
|
}
|
||||||
|
changeDevice(activeName.value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -162,14 +212,12 @@ const filterNode = (value: string, data: any, node: any) => {
|
|||||||
if (!value) return true
|
if (!value) return true
|
||||||
// return data.name.includes(value)
|
// return data.name.includes(value)
|
||||||
if (data.name) {
|
if (data.name) {
|
||||||
|
|
||||||
return chooseNode(value, data, node)
|
return chooseNode(value, data, node)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
|
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
|
||||||
const chooseNode = (value: string, data: any, node: any) => {
|
const chooseNode = (value: string, data: any, node: any) => {
|
||||||
|
|
||||||
if (data.name.indexOf(value) !== -1) {
|
if (data.name.indexOf(value) !== -1) {
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
@@ -200,18 +248,10 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
|||||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||||
defineExpose({ treeRef1, treeRef2 })
|
defineExpose({ treeRef1, treeRef2 })
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setTimeout(() => {
|
// nextTick(() => {
|
||||||
if (zlDeviceData.value.length != 0) {
|
// // setTimeout(() => {
|
||||||
activeName.value = '0'
|
// // }, 500)
|
||||||
}
|
// })
|
||||||
if (zlDeviceData.value.length === 0 && bxsDeviceData.value.length != 0) {
|
|
||||||
activeName.value = '1'
|
|
||||||
}
|
|
||||||
if (!zlDeviceData.value && !bxsDeviceData.value) {
|
|
||||||
activeName.value = ''
|
|
||||||
}
|
|
||||||
changeDevice(activeName.value)
|
|
||||||
}, 500)
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="default-main device-control" :style="{ height: pageHeight.height }" v-loading="loading"
|
<div
|
||||||
style="position: relative">
|
class="default-main device-control"
|
||||||
|
:style="{ height: pageHeight.height }"
|
||||||
|
v-loading="loading"
|
||||||
|
style="position: relative"
|
||||||
|
>
|
||||||
<!-- @init="nodeClick" -->
|
<!-- @init="nodeClick" -->
|
||||||
<PointTree @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
|
<PointTree @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
|
||||||
<div class="device-control-right" v-if="deviceData">
|
<div class="device-control-right" v-if="deviceData">
|
||||||
@@ -15,23 +19,30 @@
|
|||||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
|
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
|
||||||
在线补召
|
在线补召
|
||||||
</el-button> -->
|
</el-button> -->
|
||||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets"
|
<el-button
|
||||||
@click="handleAnalysisList">
|
v-if="deviceType == '1'"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-Tickets"
|
||||||
|
@click="handleAnalysisList"
|
||||||
|
>
|
||||||
补召
|
补召
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<el-descriptions-item label="名称">
|
<el-descriptions-item label="名称">
|
||||||
{{ devData.name || '/' }}
|
{{ devData.name || '/' }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="测量间隔" width="160">
|
<el-descriptions-item label="测量间隔" width="160">{{ devData.lineInterval }}分钟</el-descriptions-item>
|
||||||
{{ devData.lineInterval }}分钟
|
<el-descriptions-item label="电压等级" width="160">{{ devData.volGrade }}kV</el-descriptions-item>
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="电压等级" width="160">
|
|
||||||
{{ devData.volGrade }}kV
|
|
||||||
</el-descriptions-item>
|
|
||||||
<el-descriptions-item label="接线方式" width="160">
|
<el-descriptions-item label="接线方式" width="160">
|
||||||
{{ devData.conType == 0 ? '星型接线' : devData.conType == 1 ? '角型接线' : devData.conType == 2 ? 'V型接线' :
|
{{
|
||||||
'/' }}
|
devData.conType == 0
|
||||||
|
? '星型接线'
|
||||||
|
: devData.conType == 1
|
||||||
|
? '角型接线'
|
||||||
|
: devData.conType == 2
|
||||||
|
? 'V型接线'
|
||||||
|
: '/'
|
||||||
|
}}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
|
|
||||||
<!-- <el-descriptions-item label="安装位置" width="160">
|
<!-- <el-descriptions-item label="安装位置" width="160">
|
||||||
@@ -45,7 +56,6 @@
|
|||||||
{{ devData.ctRatio || '/' }}
|
{{ devData.ctRatio || '/' }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
|
|
||||||
|
|
||||||
<!-- <el-descriptions-item label="名称">
|
<!-- <el-descriptions-item label="名称">
|
||||||
{{ devData.name ? devData.name : '/' }}
|
{{ devData.name ? devData.name : '/' }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
@@ -67,8 +77,13 @@
|
|||||||
</el-descriptions-item> -->
|
</el-descriptions-item> -->
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
<el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
|
<el-tabs v-model.trim="dataSet" type="border-card" class="device-control-box-card" @tab-click="handleClick">
|
||||||
<el-tab-pane lazy :label="item.name" :name="item.id" v-for="(item, index) in deviceData.dataSetList"
|
<el-tab-pane
|
||||||
:key="index">
|
lazy
|
||||||
|
:label="item.name"
|
||||||
|
:name="item.id"
|
||||||
|
v-for="(item, index) in deviceData.dataSetList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<span class="custom-tabs-label">
|
<span class="custom-tabs-label">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
@@ -77,42 +92,59 @@
|
|||||||
<DataAnalysis v-if="item.name.includes('趋势数据')" />
|
<DataAnalysis v-if="item.name.includes('趋势数据')" />
|
||||||
<Timer v-if="item.name.includes('实时数据')" />
|
<Timer v-if="item.name.includes('实时数据')" />
|
||||||
<Monitor v-if="item.name.includes('暂态事件')" />
|
<Monitor v-if="item.name.includes('暂态事件')" />
|
||||||
<Odometer v-if="
|
<Odometer
|
||||||
|
v-if="
|
||||||
item.name != 'APF模块数据' &&
|
item.name != 'APF模块数据' &&
|
||||||
item.name != '历史APF模块数据' &&
|
item.name != '历史APF模块数据' &&
|
||||||
!item.name.includes('历史监测') &&
|
!item.name.includes('历史监测') &&
|
||||||
!item.name.includes('趋势数据') &&
|
!item.name.includes('趋势数据') &&
|
||||||
!item.name.includes('实时数据') &&
|
!item.name.includes('实时数据') &&
|
||||||
!item.name.includes('暂态事件')
|
!item.name.includes('暂态事件')
|
||||||
" />
|
"
|
||||||
<Histogram v-if="
|
/>
|
||||||
|
<Histogram
|
||||||
|
v-if="
|
||||||
item.name != 'APF模块数据' &&
|
item.name != 'APF模块数据' &&
|
||||||
item.name != '历史APF模块数据' &&
|
item.name != '历史APF模块数据' &&
|
||||||
item.name.includes('历史监测') &&
|
item.name.includes('历史监测') &&
|
||||||
!item.name.includes('趋势数据') &&
|
!item.name.includes('趋势数据') &&
|
||||||
!item.name.includes('实时数据') &&
|
!item.name.includes('实时数据') &&
|
||||||
!item.name.includes('暂态事件')
|
!item.name.includes('暂态事件')
|
||||||
" />
|
"
|
||||||
|
/>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<TableHeader :showSearch="false" v-if="
|
<TableHeader
|
||||||
|
:showSearch="false"
|
||||||
|
v-if="
|
||||||
(dataSet.indexOf('_trenddata') == -1 &&
|
(dataSet.indexOf('_trenddata') == -1 &&
|
||||||
dataSet.indexOf('_realtimedata') == -1 &&
|
dataSet.indexOf('_realtimedata') == -1 &&
|
||||||
dataSet.indexOf('_event') == -1) ||
|
dataSet.indexOf('_event') == -1) ||
|
||||||
realTimeFlag
|
realTimeFlag
|
||||||
">
|
"
|
||||||
|
>
|
||||||
<template #select>
|
<template #select>
|
||||||
<el-form-item label="日期"
|
<el-form-item
|
||||||
v-show="dataSet.includes('_items') || dataSet.indexOf('_history') != -1">
|
label="日期"
|
||||||
|
v-show="
|
||||||
|
dataSet.includes('_items') ||
|
||||||
|
dataSet.indexOf('_history') != -1 ||
|
||||||
|
dataSet.indexOf('_moduleData') != -1
|
||||||
|
"
|
||||||
|
>
|
||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="数据类型" v-if="!dataSet.includes('_')">
|
<el-form-item label="数据类型" v-if="!dataSet.includes('_')">
|
||||||
<el-select v-model.trim="formInline.targetType" @change="handleTargetTypeChange">
|
<el-select v-model.trim="formInline.targetType" @change="handleTargetTypeChange">
|
||||||
<el-option v-for="item in queryList" :key="item.id" :label="item.name"
|
<el-option
|
||||||
:value="item.id" />
|
v-for="item in queryList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
@@ -122,58 +154,106 @@
|
|||||||
<el-option value="Primary" label="一次值"></el-option>
|
<el-option value="Primary" label="一次值"></el-option>
|
||||||
<el-option value="Secondary" label="二次值"></el-option>
|
<el-option value="Secondary" label="二次值"></el-option>
|
||||||
</el-select> -->
|
</el-select> -->
|
||||||
<el-radio-group v-model.trim="formInline.dataLevel" :disabled="TrendList?.lineType != 1"
|
<el-radio-group
|
||||||
@change="handleClick">
|
v-model.trim="formInline.dataLevel"
|
||||||
|
v-if="!dataSet.includes('_moduleData')"
|
||||||
|
:disabled="TrendList?.lineType != 1"
|
||||||
|
@change="handleClick"
|
||||||
|
>
|
||||||
<el-radio-button label="一次值" value="Primary" />
|
<el-radio-button label="一次值" value="Primary" />
|
||||||
<el-radio-button label="二次值" value="Secondary" />
|
<el-radio-button label="二次值" value="Secondary" />
|
||||||
|
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="谐波次数" v-show="oddAndEvenFlag && !dataSet.includes('_')">
|
<el-form-item label="谐波次数" v-show="oddAndEvenFlag && !dataSet.includes('_')">
|
||||||
<el-select v-model.trim="oddAndEven" style="min-width: 120px !important">
|
<el-select v-model.trim="oddAndEven" style="min-width: 120px !important">
|
||||||
<el-option v-for="item in oddAndEvenList" :key="item.value" :label="item.label"
|
<el-option
|
||||||
:value="item.value" />
|
v-for="item in oddAndEvenList"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="数据来源" v-if="dataSet.includes('_items')">
|
<el-form-item label="数据来源" v-if="dataSet.includes('_items')">
|
||||||
<el-select v-model.trim="formInline.dataSource" placeholder="请选择数据来源" clearable>
|
<el-select v-model.trim="formInline.dataSource" placeholder="请选择数据来源" clearable>
|
||||||
|
<el-option
|
||||||
<el-option v-for="item in dataSourceList" :key="item.id" :label="item.name"
|
v-for="item in dataSourceList"
|
||||||
:value="item.id" />
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="关键字筛选" v-if="!dataSet.includes('_')">
|
<el-form-item label="关键字筛选" v-if="!dataSet.includes('_')">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="searchValue" autocomplete="off"
|
<el-input
|
||||||
clearable @input="handleSearch" placeholder="请输入关键字筛选"
|
maxlength="32"
|
||||||
style="width: 180px !important"></el-input>
|
show-word-limit
|
||||||
|
v-model.trim="searchValue"
|
||||||
|
autocomplete="off"
|
||||||
|
clearable
|
||||||
|
@input="handleSearch"
|
||||||
|
placeholder="请输入关键字筛选"
|
||||||
|
style="width: 180px !important"
|
||||||
|
></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button type="primary"
|
<el-button
|
||||||
|
type="primary"
|
||||||
:icon="dataSet.indexOf('_realtimedata') != -1 ? 'el-icon-Refresh' : 'el-icon-Search'"
|
:icon="dataSet.indexOf('_realtimedata') != -1 ? 'el-icon-Refresh' : 'el-icon-Search'"
|
||||||
@click="handleClick">{{ dataSet.indexOf('_realtimedata') != -1 ? '刷新' : '查询' }}</el-button>
|
@click="handleClick"
|
||||||
<el-button type="primary" :disabled="tableLoading" v-if="realTimeFlag" :icon="DataLine"
|
>
|
||||||
@click="handleTrend">
|
{{ dataSet.indexOf('_realtimedata') != -1 ? '刷新' : '查询' }}
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
v-if="dataSet.indexOf('_moduleData') != -1"
|
||||||
|
:icon="Refresh"
|
||||||
|
@click="refreshTheState"
|
||||||
|
>
|
||||||
|
刷新状态
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:disabled="tableLoading"
|
||||||
|
v-if="realTimeFlag"
|
||||||
|
:icon="DataLine"
|
||||||
|
@click="handleTrend"
|
||||||
|
>
|
||||||
谐波频谱
|
谐波频谱
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="primary" v-if="realTimeFlag" :icon="TrendCharts"
|
<el-button
|
||||||
@click="handleHarmonicSpectrum" :disabled="tableLoading">
|
type="primary"
|
||||||
|
v-if="realTimeFlag"
|
||||||
|
:icon="TrendCharts"
|
||||||
|
@click="handleHarmonicSpectrum"
|
||||||
|
:disabled="tableLoading"
|
||||||
|
>
|
||||||
实时趋势
|
实时趋势
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<div class="data_time" :style="{
|
<div
|
||||||
|
class="data_time"
|
||||||
|
:style="{
|
||||||
height: realTimeFlag ? '30px' : '40px',
|
height: realTimeFlag ? '30px' : '40px',
|
||||||
alignItems: realTimeFlag ? 'flex-end' : 'center'
|
alignItems: realTimeFlag ? 'flex-end' : 'center'
|
||||||
}" v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2">
|
}"
|
||||||
|
v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2"
|
||||||
|
>
|
||||||
<p class="mb5">
|
<p class="mb5">
|
||||||
<span v-if="trendDataTime && !realTimeFlag">数据时间:{{ trendDataTime }}</span>
|
<span v-if="trendDataTime && !realTimeFlag">数据时间:{{ trendDataTime }}</span>
|
||||||
<span v-if="realTimeFlag">数据时间:{{ mqttMessage.dataTime }}</span>
|
<span v-if="realTimeFlag">数据时间:{{ mqttMessage.dataTime }}</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<el-button v-if="!realTimeFlag && dataSet.includes('_realtimedata')" style="float: right !important"
|
<el-button
|
||||||
:icon="Back" @click="handleReturn" :loading="tableLoading">
|
v-if="!realTimeFlag && dataSet.includes('_realtimedata')"
|
||||||
|
style="float: right !important"
|
||||||
|
:icon="Back"
|
||||||
|
@click="handleReturn"
|
||||||
|
:loading="tableLoading"
|
||||||
|
>
|
||||||
返回
|
返回
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
@@ -189,33 +269,51 @@
|
|||||||
></div> -->
|
></div> -->
|
||||||
<!-- v-loading="tableLoading" -->
|
<!-- v-loading="tableLoading" -->
|
||||||
<div :style="{ height: tableHeight }" v-loading="tableLoading" v-if="!dataSet.includes('_')">
|
<div :style="{ height: tableHeight }" v-loading="tableLoading" v-if="!dataSet.includes('_')">
|
||||||
<div style="overflow: auto" :style="{ height: tableHeight }" v-if="
|
<div
|
||||||
|
style="overflow: auto"
|
||||||
|
:style="{ height: tableHeight }"
|
||||||
|
v-if="
|
||||||
dataSet.indexOf('_trenddata') == -1 &&
|
dataSet.indexOf('_trenddata') == -1 &&
|
||||||
dataSet.indexOf('_realtimedata') == -1 &&
|
dataSet.indexOf('_realtimedata') == -1 &&
|
||||||
dataSet.indexOf('_event') == -1 &&
|
dataSet.indexOf('_event') == -1 &&
|
||||||
tableData.length != 0
|
tableData.length != 0
|
||||||
">
|
"
|
||||||
<div class="mb5 mt5" v-if="dataSet.indexOf('_history') == -1"
|
>
|
||||||
style="font-weight: 800;font-size: 16px;text-align: center">
|
<div
|
||||||
|
class="mb5 mt5"
|
||||||
|
v-if="dataSet.indexOf('_history') == -1"
|
||||||
|
style="font-weight: 800; font-size: 16px; text-align: center"
|
||||||
|
>
|
||||||
统计时间:{{ tableData[0]?.time || '' }}
|
统计时间:{{ tableData[0]?.time || '' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nearRealTimeData ref="nearRealTimeDataRef" v-if="dataSet.indexOf('_history') == -1"
|
<nearRealTimeData
|
||||||
:style="{ height: tableHeightBox, overflow: 'auto' }" />
|
ref="nearRealTimeDataRef"
|
||||||
|
v-if="dataSet.indexOf('_history') == -1"
|
||||||
|
:style="{ height: tableHeightBox, overflow: 'auto' }"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- 循环渲染的card 最新数据/历史数据显示 -->
|
<!-- 循环渲染的card 最新数据/历史数据显示 -->
|
||||||
<div class="content"
|
<div
|
||||||
|
class="content"
|
||||||
v-if="tableData.length != 0 && !tableLoading && dataSet.indexOf('_history') != -1"
|
v-if="tableData.length != 0 && !tableLoading && dataSet.indexOf('_history') != -1"
|
||||||
:style="{ height: tableHeightBox }">
|
:style="{ height: tableHeightBox }"
|
||||||
|
>
|
||||||
<el-card class="box-card" :class="dataSet.indexOf('_history') == -1 ? 'box-card-new' : ''"
|
<el-card
|
||||||
v-for="(item, index) in tableData" :key="index">
|
class="box-card"
|
||||||
|
:class="dataSet.indexOf('_history') == -1 ? 'box-card-new' : ''"
|
||||||
|
v-for="(item, index) in tableData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<span style="flex: 1">{{ item.name }}</span>
|
<span style="flex: 1">{{ item.name }}</span>
|
||||||
<Icon name="el-icon-TrendCharts" class="ml10" @click="getDeviceDataTrend(item)"
|
<Icon
|
||||||
style="font-size: 26px; cursor: pointer; color: #fff"></Icon>
|
name="el-icon-TrendCharts"
|
||||||
|
class="ml10"
|
||||||
|
@click="getDeviceDataTrend(item)"
|
||||||
|
style="font-size: 26px; cursor: pointer; color: #fff"
|
||||||
|
></Icon>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -229,8 +327,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-else-if="item.children.length" class="box-card-div">
|
<div v-else-if="item.children.length" class="box-card-div">
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<el-tag effect="dark" type="danger" style="width: 40px; text-align: center"
|
<el-tag
|
||||||
class="mr10">
|
effect="dark"
|
||||||
|
type="danger"
|
||||||
|
style="width: 40px; text-align: center"
|
||||||
|
class="mr10"
|
||||||
|
>
|
||||||
MAX
|
MAX
|
||||||
</el-tag>
|
</el-tag>
|
||||||
{{
|
{{
|
||||||
@@ -241,8 +343,12 @@
|
|||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<el-tag effect="dark" type="success" style="width: 40px; text-align: center"
|
<el-tag
|
||||||
class="mr10">
|
effect="dark"
|
||||||
|
type="success"
|
||||||
|
style="width: 40px; text-align: center"
|
||||||
|
class="mr10"
|
||||||
|
>
|
||||||
AVG
|
AVG
|
||||||
</el-tag>
|
</el-tag>
|
||||||
{{
|
{{
|
||||||
@@ -253,8 +359,12 @@
|
|||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center">
|
<div style="display: flex; align-items: center">
|
||||||
<el-tag effect="dark" type="warning" style="width: 40px; text-align: center"
|
<el-tag
|
||||||
class="mr10">
|
effect="dark"
|
||||||
|
type="warning"
|
||||||
|
style="width: 40px; text-align: center"
|
||||||
|
class="mr10"
|
||||||
|
>
|
||||||
MIN
|
MIN
|
||||||
</el-tag>
|
</el-tag>
|
||||||
{{
|
{{
|
||||||
@@ -350,15 +460,20 @@
|
|||||||
<Trend ref="trendRef" :TrendList="TrendList"></Trend>
|
<Trend ref="trendRef" :TrendList="TrendList"></Trend>
|
||||||
</div>
|
</div>
|
||||||
<!-- 实时数据 -->
|
<!-- 实时数据 -->
|
||||||
<div :style="`height: calc(100vh - (${sonTab == 1 ? '378px' : sonTab == 2 ? '340px' : '425px'}))`"
|
<div
|
||||||
v-if="dataSet.indexOf('_realtimedata') != -1" v-loading="tableLoading">
|
:style="`height: calc(100vh - (${sonTab == 1 ? '378px' : sonTab == 2 ? '340px' : '425px'}))`"
|
||||||
|
v-if="dataSet.indexOf('_realtimedata') != -1"
|
||||||
|
v-loading="tableLoading"
|
||||||
|
>
|
||||||
<!-- <div class="view_top_btn" v-if="realTimeFlag">
|
<!-- <div class="view_top_btn" v-if="realTimeFlag">
|
||||||
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
|
<el-button type="primary" :icon="Platform" @click="handleRecordWaves">
|
||||||
实时录波
|
实时录波
|
||||||
</el-button>
|
</el-button>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="view_top_btn"
|
<div
|
||||||
v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2">
|
class="view_top_btn"
|
||||||
|
v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2"
|
||||||
|
>
|
||||||
<el-button :icon="Back" @click="handleReturn" :loading="tableLoading">返回</el-button>
|
<el-button :icon="Back" @click="handleReturn" :loading="tableLoading">返回</el-button>
|
||||||
</div>
|
</div>
|
||||||
<!-- 实时数据主界面组件 -->
|
<!-- 实时数据主界面组件 -->
|
||||||
@@ -366,23 +481,41 @@
|
|||||||
<!-- 实时数据-实时录波组件 -->
|
<!-- 实时数据-实时录波组件 -->
|
||||||
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
|
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
|
||||||
<!-- 实时数据-实时趋势组件 -->
|
<!-- 实时数据-实时趋势组件 -->
|
||||||
<realTrend v-if="!realTimeFlag && sonTab == 1" ref="realTrendRef"
|
<realTrend
|
||||||
@changeTrendType="changeTrendType">
|
v-if="!realTimeFlag && sonTab == 1"
|
||||||
</realTrend>
|
ref="realTrendRef"
|
||||||
|
@changeTrendType="changeTrendType"
|
||||||
|
></realTrend>
|
||||||
<!-- 实时数据-谐波频谱组件 -->
|
<!-- 实时数据-谐波频谱组件 -->
|
||||||
<harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef">
|
<harmonicSpectrum
|
||||||
</harmonicSpectrum>
|
v-show="!realTimeFlag && sonTab == 2"
|
||||||
|
ref="harmonicSpectrumRef"
|
||||||
|
></harmonicSpectrum>
|
||||||
</div>
|
</div>
|
||||||
<!-- 暂态事件 -->
|
<!-- 暂态事件 -->
|
||||||
<div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_event') != -1"
|
<div
|
||||||
v-loading="tableLoading">
|
style="height: calc(100vh - 340px)"
|
||||||
|
v-if="dataSet.indexOf('_event') != -1"
|
||||||
|
v-loading="tableLoading"
|
||||||
|
>
|
||||||
<Event ref="eventRef"></Event>
|
<Event ref="eventRef"></Event>
|
||||||
</div>
|
</div>
|
||||||
<!-- 测试项记录 -->
|
<!-- 测试项记录 -->
|
||||||
<div style="height: calc(100vh - 395px)" v-if="dataSet.indexOf('_items') != -1"
|
<div
|
||||||
v-loading="tableLoading">
|
style="height: calc(100vh - 395px)"
|
||||||
|
v-if="dataSet.indexOf('_items') != -1"
|
||||||
|
v-loading="tableLoading"
|
||||||
|
>
|
||||||
<testItemRecords ref="testItemRecordsRef" @onSubmit="handleClick" />
|
<testItemRecords ref="testItemRecordsRef" @onSubmit="handleClick" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 模块数据 -->
|
||||||
|
<div
|
||||||
|
style="height: calc(100vh - 395px)"
|
||||||
|
v-if="dataSet.indexOf('_moduleData') != -1"
|
||||||
|
v-loading="tableLoading"
|
||||||
|
>
|
||||||
|
<moduleData ref="moduleDataRef" @onSubmit="handleClick" />
|
||||||
|
</div>
|
||||||
<div v-if="!tableData" style="height: 42px"></div>
|
<div v-if="!tableData" style="height: 42px"></div>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
@@ -405,8 +538,8 @@ import {
|
|||||||
getHarmRealData,
|
getHarmRealData,
|
||||||
getOverLimitData,
|
getOverLimitData,
|
||||||
queryDictType,
|
queryDictType,
|
||||||
getById
|
getById,
|
||||||
|
allModelData
|
||||||
} from '@/api/cs-device-boot/EquipmentDelivery'
|
} from '@/api/cs-device-boot/EquipmentDelivery'
|
||||||
import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
|
import { deviceHisData, deviceRtData, realTimeData, getTestData } from '@/api/cs-device-boot/csGroup'
|
||||||
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
|
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
|
||||||
@@ -421,11 +554,12 @@ import offLineDataImport from './offLineDataImport/index.vue'
|
|||||||
import Event from './tabs/event.vue'
|
import Event from './tabs/event.vue'
|
||||||
import nearRealTimeData from './nearRealTimeData.vue'
|
import nearRealTimeData from './nearRealTimeData.vue'
|
||||||
import testItemRecords from './testItemRecords.vue'
|
import testItemRecords from './testItemRecords.vue'
|
||||||
|
import moduleData from './moduleData.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { useAdminInfo } from '@/stores/adminInfo'
|
import { useAdminInfo } from '@/stores/adminInfo'
|
||||||
import { Histogram, TrendCharts, DataLine, DataAnalysis, Odometer, Monitor, Timer, Back } from '@element-plus/icons-vue'
|
import { Histogram, TrendCharts, DataLine, DataAnalysis, Odometer, Monitor, Timer, Back ,Refresh} from '@element-plus/icons-vue'
|
||||||
import analysisList from './analysisList/index.vue'
|
import analysisList from './analysisList/index.vue'
|
||||||
import mqtt from 'mqtt'
|
import mqtt from 'mqtt'
|
||||||
defineOptions({
|
defineOptions({
|
||||||
@@ -439,6 +573,7 @@ const getGroupLoading = ref(false)
|
|||||||
const deviceData = ref<any>(null)
|
const deviceData = ref<any>(null)
|
||||||
const dataSet = ref('')
|
const dataSet = ref('')
|
||||||
const testItemRecordsRef = ref()
|
const testItemRecordsRef = ref()
|
||||||
|
const moduleDataRef = ref()
|
||||||
const nearRealTimeDataRef = ref()
|
const nearRealTimeDataRef = ref()
|
||||||
const devTypeOptions = ref([])
|
const devTypeOptions = ref([])
|
||||||
const devModelOptions = ref([])
|
const devModelOptions = ref([])
|
||||||
@@ -464,28 +599,29 @@ const formInline = reactive({
|
|||||||
dataLevel: 'Secondary'
|
dataLevel: 'Secondary'
|
||||||
})
|
})
|
||||||
|
|
||||||
const dataSourceList = [{
|
const dataSourceList = [
|
||||||
|
{
|
||||||
id: '0',
|
id: '0',
|
||||||
name: '补召'
|
name: '补召'
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
name: '在线监测'
|
name: '在线监测'
|
||||||
}]
|
}
|
||||||
|
]
|
||||||
const oddAndEvenList = [
|
const oddAndEvenList = [
|
||||||
{
|
{
|
||||||
value: '3',
|
value: '3',
|
||||||
label: '全部',
|
label: '全部'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '1',
|
value: '1',
|
||||||
label: '奇次',
|
label: '奇次'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: '2',
|
value: '2',
|
||||||
label: '偶次',
|
label: '偶次'
|
||||||
},
|
}
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
const detail = ref<any>(null)
|
const detail = ref<any>(null)
|
||||||
//是否显示实时数据默认内容
|
//是否显示实时数据默认内容
|
||||||
@@ -634,15 +770,14 @@ const handleSearch = () => {
|
|||||||
})
|
})
|
||||||
if (oddAndEvenFlag.value) {
|
if (oddAndEvenFlag.value) {
|
||||||
list = list.filter((item: any) => {
|
list = list.filter((item: any) => {
|
||||||
let str = item.otherName.split("次")[0]
|
let str = item.otherName.split('次')[0]
|
||||||
queryListName[0].name == '间谐波电压含有率' ? str = str - 0.5 : ''
|
queryListName[0].name == '间谐波电压含有率' ? (str = str - 0.5) : ''
|
||||||
|
|
||||||
if (oddAndEven.value == '1') {
|
if (oddAndEven.value == '1') {
|
||||||
// 奇次
|
// 奇次
|
||||||
if (str % 2 != 0) {
|
if (str % 2 != 0) {
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (oddAndEven.value == '2') {
|
} else if (oddAndEven.value == '2') {
|
||||||
// 偶次
|
// 偶次
|
||||||
if (str % 2 == 0) {
|
if (str % 2 == 0) {
|
||||||
@@ -651,14 +786,10 @@ const handleSearch = () => {
|
|||||||
} else {
|
} else {
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
nearRealTimeDataRef.value?.setData(list, queryListName)
|
nearRealTimeDataRef.value?.setData(list, queryListName)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const getDeviceDataTrend = (e: any) => {
|
const getDeviceDataTrend = (e: any) => {
|
||||||
@@ -696,15 +827,11 @@ const lineId: any = ref('')
|
|||||||
const dataLevel: any = ref('')
|
const dataLevel: any = ref('')
|
||||||
const dataSource = ref([])
|
const dataSource = ref([])
|
||||||
const nodeClick = async (e: anyObj) => {
|
const nodeClick = async (e: anyObj) => {
|
||||||
// console.log("🚀 ~ nodeClick ~ e:", e)
|
|
||||||
|
|
||||||
|
|
||||||
if (e == undefined || e.level == 2) {
|
if (e == undefined || e.level == 2) {
|
||||||
return loading.value = false
|
return (loading.value = false)
|
||||||
}
|
}
|
||||||
searchValue.value = ''
|
searchValue.value = ''
|
||||||
|
|
||||||
|
|
||||||
deviceId.value = e?.pid
|
deviceId.value = e?.pid
|
||||||
lineId.value = e?.id
|
lineId.value = e?.id
|
||||||
TrendList.value = e
|
TrendList.value = e
|
||||||
@@ -729,7 +856,6 @@ const nodeClick = async (e: anyObj) => {
|
|||||||
await getDeviceData(e.level == 3 ? e.pid : e.id, 'history', e.level == 3 ? e.id : e.children[0].id)
|
await getDeviceData(e.level == 3 ? e.pid : e.id, 'history', e.level == 3 ? e.id : e.children[0].id)
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
getById({ lineId: e.level == 3 ? e.id : e.children[0].id }).then((res: any) => {
|
getById({ lineId: e.level == 3 ? e.id : e.children[0].id }).then((res: any) => {
|
||||||
|
|
||||||
devData.value = res.data
|
devData.value = res.data
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -744,7 +870,6 @@ const nodeClick = async (e: anyObj) => {
|
|||||||
tableData.value = []
|
tableData.value = []
|
||||||
loading.value = false
|
loading.value = false
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
res.data.dataSetList.forEach((item: any) => {
|
res.data.dataSetList.forEach((item: any) => {
|
||||||
//历史
|
//历史
|
||||||
if (item.type === 'history') {
|
if (item.type === 'history') {
|
||||||
@@ -766,6 +891,10 @@ const nodeClick = async (e: anyObj) => {
|
|||||||
if (item.type === 'items') {
|
if (item.type === 'items') {
|
||||||
item.id = item.id + '_items'
|
item.id = item.id + '_items'
|
||||||
}
|
}
|
||||||
|
// 模块数据
|
||||||
|
if (item.type === 'moduleData') {
|
||||||
|
item.id = item.id + '_moduleData'
|
||||||
|
}
|
||||||
})
|
})
|
||||||
res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
|
res.data.dataSetList = res.data.dataSetList.filter((item: any) => item.name != '历史统计数据')
|
||||||
//便携式设备默认二次值
|
//便携式设备默认二次值
|
||||||
@@ -813,7 +942,6 @@ const connectMqtt = () => {
|
|||||||
password: 'njcnpqs'
|
password: 'njcnpqs'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
mqttRef.value = mqtt.connect(url, options)
|
mqttRef.value = mqtt.connect(url, options)
|
||||||
}
|
}
|
||||||
const getRealDataMqttMsg = async () => {
|
const getRealDataMqttMsg = async () => {
|
||||||
@@ -826,7 +954,8 @@ const getRealDataMqttMsg = async () => {
|
|||||||
}
|
}
|
||||||
//新的实时数据
|
//新的实时数据
|
||||||
//1.调用接口 mqtt推送数据
|
//1.调用接口 mqtt推送数据
|
||||||
await getBasicRealData(lineId.value).then((res: any) => {
|
await getBasicRealData(lineId.value)
|
||||||
|
.then((res: any) => {
|
||||||
if (res.code == 'A0000') {
|
if (res.code == 'A0000') {
|
||||||
ElMessage.success('装置应答成功')
|
ElMessage.success('装置应答成功')
|
||||||
mqttMessage.value = {}
|
mqttMessage.value = {}
|
||||||
@@ -855,7 +984,7 @@ const getRealDataMqttMsg = async () => {
|
|||||||
obj = {
|
obj = {
|
||||||
...obj,
|
...obj,
|
||||||
// 电压有效值
|
// 电压有效值
|
||||||
vRmsA: (obj.vRmsA) / 1000,
|
vRmsA: obj.vRmsA / 1000,
|
||||||
vRmsB: obj.vRmsB / 1000,
|
vRmsB: obj.vRmsB / 1000,
|
||||||
vRmsC: obj.vRmsC / 1000,
|
vRmsC: obj.vRmsC / 1000,
|
||||||
//基波电压幅值
|
//基波电压幅值
|
||||||
@@ -884,36 +1013,36 @@ const getRealDataMqttMsg = async () => {
|
|||||||
obj = {
|
obj = {
|
||||||
...obj,
|
...obj,
|
||||||
// 电压有效值
|
// 电压有效值
|
||||||
vRmsA: ((obj.vRmsA * obj.pt)) / 1000,
|
vRmsA: (obj.vRmsA * obj.pt) / 1000,
|
||||||
vRmsB: ((obj.vRmsB * obj.pt)) / 1000,
|
vRmsB: (obj.vRmsB * obj.pt) / 1000,
|
||||||
vRmsC: ((obj.vRmsC * obj.pt)) / 1000,
|
vRmsC: (obj.vRmsC * obj.pt) / 1000,
|
||||||
// 电流有效值
|
// 电流有效值
|
||||||
iRmsA: (obj.iRmsA * obj.ct),
|
iRmsA: obj.iRmsA * obj.ct,
|
||||||
iRmsB: (obj.iRmsB * obj.ct),
|
iRmsB: obj.iRmsB * obj.ct,
|
||||||
iRmsC: (obj.iRmsC * obj.ct),
|
iRmsC: obj.iRmsC * obj.ct,
|
||||||
//基波电压幅值
|
//基波电压幅值
|
||||||
v1A: ((obj.v1A * obj.pt)) / 1000,
|
v1A: (obj.v1A * obj.pt) / 1000,
|
||||||
v1B: ((obj.v1B * obj.pt)) / 1000,
|
v1B: (obj.v1B * obj.pt) / 1000,
|
||||||
v1C: ((obj.v1C * obj.pt)) / 1000,
|
v1C: (obj.v1C * obj.pt) / 1000,
|
||||||
//基波电流幅值
|
//基波电流幅值
|
||||||
i1A: (obj.i1A * obj.ct),
|
i1A: obj.i1A * obj.ct,
|
||||||
i1B: (obj.i1B * obj.ct),
|
i1B: obj.i1B * obj.ct,
|
||||||
i1C: (obj.i1C * obj.ct),
|
i1C: obj.i1C * obj.ct,
|
||||||
//有功功率
|
//有功功率
|
||||||
pA: ((obj.pA * obj.pt * obj.ct)) / 1000,
|
pA: (obj.pA * obj.pt * obj.ct) / 1000,
|
||||||
pB: ((obj.pB * obj.pt * obj.ct)) / 1000,
|
pB: (obj.pB * obj.pt * obj.ct) / 1000,
|
||||||
pC: ((obj.pC * obj.pt * obj.ct)) / 1000,
|
pC: (obj.pC * obj.pt * obj.ct) / 1000,
|
||||||
pTot: ((obj.pTot * obj.pt * obj.ct)) / 1000,
|
pTot: (obj.pTot * obj.pt * obj.ct) / 1000,
|
||||||
//无功功率
|
//无功功率
|
||||||
qA: ((obj.qA * obj.pt * obj.ct)) / 1000,
|
qA: (obj.qA * obj.pt * obj.ct) / 1000,
|
||||||
qB: ((obj.qB * obj.pt * obj.ct)) / 1000,
|
qB: (obj.qB * obj.pt * obj.ct) / 1000,
|
||||||
qC: ((obj.qC * obj.pt * obj.ct)) / 1000,
|
qC: (obj.qC * obj.pt * obj.ct) / 1000,
|
||||||
qTot: ((obj.qTot * obj.pt * obj.ct)) / 1000,
|
qTot: (obj.qTot * obj.pt * obj.ct) / 1000,
|
||||||
//视在功率
|
//视在功率
|
||||||
sA: ((obj.sA * obj.pt * obj.ct)) / 1000,
|
sA: (obj.sA * obj.pt * obj.ct) / 1000,
|
||||||
sB: ((obj.sB * obj.pt * obj.ct)) / 1000,
|
sB: (obj.sB * obj.pt * obj.ct) / 1000,
|
||||||
sC: ((obj.sC * obj.pt * obj.ct)) / 1000,
|
sC: (obj.sC * obj.pt * obj.ct) / 1000,
|
||||||
sTot: ((obj.sTot * obj.pt * obj.ct)) / 1000
|
sTot: (obj.sTot * obj.pt * obj.ct) / 1000
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//如果消息返回值是一次值,下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
|
//如果消息返回值是一次值,下拉框是二次值需要单位换算 乘以1000 并且除以pt ct
|
||||||
@@ -973,7 +1102,6 @@ const getRealDataMqttMsg = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//更新谐波频谱数据
|
//更新谐波频谱数据
|
||||||
// !realTimeFlag.value &&
|
// !realTimeFlag.value &&
|
||||||
// sonTab.value == 1 &&
|
// sonTab.value == 1 &&
|
||||||
@@ -995,7 +1123,8 @@ const getRealDataMqttMsg = async () => {
|
|||||||
ElMessage.success('装置应答失败')
|
ElMessage.success('装置应答失败')
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
}
|
}
|
||||||
}).catch(e => {
|
})
|
||||||
|
.catch(e => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
}, 0)
|
}, 0)
|
||||||
@@ -1111,11 +1240,11 @@ const handleClick = async (tab?: any) => {
|
|||||||
tableData.value = res.data
|
tableData.value = res.data
|
||||||
formInline.total = res.data.total
|
formInline.total = res.data.total
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
setTimeout(() => { //targetType
|
setTimeout(() => {
|
||||||
testItemRecordsRef.value?.setData(res.data,)
|
//targetType
|
||||||
|
testItemRecordsRef.value?.setData(res.data)
|
||||||
}, 500)
|
}, 500)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}, 1500)
|
}, 1500)
|
||||||
})
|
})
|
||||||
@@ -1126,7 +1255,36 @@ const handleClick = async (tab?: any) => {
|
|||||||
})
|
})
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
|
//模块数据
|
||||||
|
if (dataSet.value.includes('_moduleData')) {
|
||||||
|
;(await datePickerRef.value) && datePickerRef.value?.setInterval(5)
|
||||||
|
let obj = {
|
||||||
|
// devId: deviceId.value, //e.id
|
||||||
|
lineId: lineId.value, //e.pid
|
||||||
|
startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||||
|
endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||||
|
}
|
||||||
|
await setTimeout(() => {
|
||||||
|
allModelData(obj)
|
||||||
|
.then((res: any) => {
|
||||||
|
tableData.value = res.data
|
||||||
|
formInline.total = res.data.total
|
||||||
|
tableLoading.value = false
|
||||||
|
setTimeout(() => {
|
||||||
|
//targetType
|
||||||
|
moduleDataRef.value?.setData(res.data)
|
||||||
|
}, 500)
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.value = false
|
||||||
|
}, 1500)
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
setTimeout(() => {
|
||||||
|
tableLoading.value = false
|
||||||
|
}, 1500)
|
||||||
|
})
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
|
||||||
//查询当前指标
|
//查询当前指标
|
||||||
if (!dataSet.value.includes('_')) {
|
if (!dataSet.value.includes('_')) {
|
||||||
@@ -1144,15 +1302,14 @@ const handleClick = async (tab?: any) => {
|
|||||||
})
|
})
|
||||||
if (oddAndEvenFlag.value) {
|
if (oddAndEvenFlag.value) {
|
||||||
list = list.filter((item: any) => {
|
list = list.filter((item: any) => {
|
||||||
let str = item.otherName.split("次")[0]
|
let str = item.otherName.split('次')[0]
|
||||||
queryListName[0].name == '间谐波电压含有率' ? str = str - 0.5 : ''
|
queryListName[0].name == '间谐波电压含有率' ? (str = str - 0.5) : ''
|
||||||
|
|
||||||
if (oddAndEven.value == '1') {
|
if (oddAndEven.value == '1') {
|
||||||
// 奇次
|
// 奇次
|
||||||
if (str % 2 != 0) {
|
if (str % 2 != 0) {
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (oddAndEven.value == '2') {
|
} else if (oddAndEven.value == '2') {
|
||||||
// 偶次
|
// 偶次
|
||||||
if (str % 2 == 0) {
|
if (str % 2 == 0) {
|
||||||
@@ -1161,12 +1318,11 @@ const handleClick = async (tab?: any) => {
|
|||||||
} else {
|
} else {
|
||||||
return item
|
return item
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => { //targetType
|
setTimeout(() => {
|
||||||
|
//targetType
|
||||||
nearRealTimeDataRef.value?.setData(list, queryListName)
|
nearRealTimeDataRef.value?.setData(list, queryListName)
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
}, 500)
|
}, 500)
|
||||||
@@ -1193,16 +1349,22 @@ const handleClick = async (tab?: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 刷新状态
|
||||||
|
const refreshTheState = () => {
|
||||||
|
|
||||||
|
moduleDataRef.value.getModule(deviceData.value.ndid)
|
||||||
|
}
|
||||||
//模版下载
|
//模版下载
|
||||||
const handleDownLoadTemplate = () => {}
|
const handleDownLoadTemplate = () => {}
|
||||||
//补召日志
|
//补召日志
|
||||||
const analysisListRef = ref()
|
const analysisListRef = ref()
|
||||||
//打开补召日志
|
//打开补召日志
|
||||||
const handleAnalysisList = () => {
|
const handleAnalysisList = () => {
|
||||||
analysisListRef.value && analysisListRef.value.open({
|
analysisListRef.value &&
|
||||||
|
analysisListRef.value.open({
|
||||||
lineId: lineId.value,
|
lineId: lineId.value,
|
||||||
deviceData: deviceData.value,
|
deviceData: deviceData.value,
|
||||||
deviceId: deviceId.value,
|
deviceId: deviceId.value
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
//离线数据导入
|
//离线数据导入
|
||||||
@@ -1232,7 +1394,6 @@ queryByCode('Device_Type').then(res => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
const handleTargetTypeChange = () => {
|
const handleTargetTypeChange = () => {
|
||||||
|
|
||||||
if (queryList.value.filter((item: any) => item.id == formInline.targetType)[0].name != '基本数据') {
|
if (queryList.value.filter((item: any) => item.id == formInline.targetType)[0].name != '基本数据') {
|
||||||
oddAndEvenFlag.value = true
|
oddAndEvenFlag.value = true
|
||||||
} else {
|
} else {
|
||||||
@@ -1314,8 +1475,6 @@ onBeforeUnmount(() => {
|
|||||||
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
|
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
|
||||||
|
|
||||||
.box-card-content {
|
.box-card-content {
|
||||||
|
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1323,12 +1482,9 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.box-card-div {
|
.box-card-div {
|
||||||
display: grid;
|
display: grid;
|
||||||
// grid-template-columns: repeat(3, 1fr);
|
// grid-template-columns: repeat(3, 1fr);
|
||||||
@@ -1337,12 +1493,10 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box-card-new {
|
.box-card-new {
|
||||||
|
|
||||||
min-height: 110px !important;
|
min-height: 110px !important;
|
||||||
|
|
||||||
.el-card__body {
|
.el-card__body {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
216
src/views/govern/device/control/moduleData.vue
Normal file
216
src/views/govern/device/control/moduleData.vue
Normal file
@@ -0,0 +1,216 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 运行 运行(中断) 运行(故障) 离线 -->
|
||||||
|
<div :style="height" style="overflow-y: auto">
|
||||||
|
<el-collapse v-model="activeNames" v-loading="loading">
|
||||||
|
<el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
|
||||||
|
<template #title>
|
||||||
|
<div class="header">
|
||||||
|
{{ item.moduleName }}
|
||||||
|
<el-tag
|
||||||
|
class="ml10"
|
||||||
|
:type="item.moduleState == '离线' ? 'danger' : 'success'"
|
||||||
|
size="small"
|
||||||
|
effect="dark"
|
||||||
|
>
|
||||||
|
{{ item.moduleState }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div :style="echartHeight" style="min-height: 150px">
|
||||||
|
<MyEchart :options="item.options" v-if="item.dataList != null" />
|
||||||
|
<el-empty description="暂无数据" style="height: 130px" v-else></el-empty>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { WarnTriangleFilled } from '@element-plus/icons-vue'
|
||||||
|
import { getModuleState } from '@/api/cs-device-boot/EquipmentDelivery'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
const activeNames = ref([0, 1, 2, 3])
|
||||||
|
const list: any = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const height = ref(mainHeight(290))
|
||||||
|
const echartHeight = ref(mainHeight(292))
|
||||||
|
const setData = (data: any) => {
|
||||||
|
echartHeight.value = mainHeight(292 + data.length * 49, data.length)
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
// console.log('🚀 ~ setData ~ data:', data)
|
||||||
|
if (item.dataList == null) return
|
||||||
|
item.options = {
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
formatter: function (params: any) {
|
||||||
|
var tips = params[0].data[0] + ':' + params[0].data[2] + '<br/>'
|
||||||
|
if (params[0].data[3] == 1) {
|
||||||
|
tips += '事件:' + params[0].data[4]
|
||||||
|
}
|
||||||
|
|
||||||
|
return tips
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'time',
|
||||||
|
name: '时间',
|
||||||
|
//
|
||||||
|
axisLabel: {
|
||||||
|
formatter: {
|
||||||
|
day: '{MM}-{dd}',
|
||||||
|
month: '{MM}',
|
||||||
|
year: '{yyyy}'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加自定义图例
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
type: 'plain',
|
||||||
|
top: 0,
|
||||||
|
itemWidth: 14, // 图例标记宽度
|
||||||
|
itemHeight: 14, // 图例标记高度
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: '事件',
|
||||||
|
icon: 'path://M0,10 L10,10 L5,0 Z', // 自定义三角形路径
|
||||||
|
textStyle: {
|
||||||
|
color: '#333',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FFB74D' // 图例标记颜色与数据标记一致
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '30px'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
max: 1,
|
||||||
|
data: ['运行', '中断'],
|
||||||
|
interval: 1,
|
||||||
|
|
||||||
|
axisLabel: {
|
||||||
|
formatter: value => {
|
||||||
|
// if (value === 0) {
|
||||||
|
// return ` `
|
||||||
|
// }
|
||||||
|
if (value === 0) {
|
||||||
|
return `{lx|离线} `
|
||||||
|
}
|
||||||
|
if (value === 1) {
|
||||||
|
return `{yx|运行} `
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
yx: {
|
||||||
|
backgroundColor: '#67c23a',
|
||||||
|
color: '#fff',
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: [1, 3],
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'center',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: 35,
|
||||||
|
height: 20,
|
||||||
|
borderColor: '#000'
|
||||||
|
},
|
||||||
|
lx: {
|
||||||
|
backgroundColor: '#f56c6c',
|
||||||
|
color: '#fff',
|
||||||
|
borderRadius: 5,
|
||||||
|
padding: [1, 3],
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'center',
|
||||||
|
textAlign: 'center',
|
||||||
|
width: 35,
|
||||||
|
height: 20,
|
||||||
|
borderColor: '#000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
options: {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '事件',
|
||||||
|
type: 'line',
|
||||||
|
data: item.dataList.map((k: any) => [
|
||||||
|
k.time,
|
||||||
|
k.stateDesc == '离线' ? 0 : 1,
|
||||||
|
k.stateDesc,
|
||||||
|
k.dataType,
|
||||||
|
k.eventName
|
||||||
|
]),
|
||||||
|
step: 'end',
|
||||||
|
symbol: 'none',
|
||||||
|
|
||||||
|
// 动态显示标记
|
||||||
|
markPoint: {
|
||||||
|
symbol: 'triangle', // 使用三角形标记
|
||||||
|
symbolSize: 10, // 标记大小
|
||||||
|
symbolOffset: [0, 6], // 向上偏移,放置在线条上方
|
||||||
|
data: item.dataList
|
||||||
|
.filter((k: any) => k.dataType === 1)
|
||||||
|
.map((k: any) => ({
|
||||||
|
name: k.stateDesc,
|
||||||
|
coord: [k.time, k.stateDesc === '离线' ? 0 : 1],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FFB74D', // 亮黄色填充
|
||||||
|
borderColor: '#FFB74D', // 边框颜色
|
||||||
|
borderWidth: 1 // 边框宽度
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
list.value = data
|
||||||
|
}
|
||||||
|
const getModule = async (id: string) => {
|
||||||
|
loading.value = true
|
||||||
|
await getModuleState({ id: id }).then(res => {
|
||||||
|
res.data.forEach((item: any) => {
|
||||||
|
list.value.forEach((k: any) => {
|
||||||
|
if (k.moduleName === item.moduleName) {
|
||||||
|
k.moduleState = item.moduleState
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
ElMessage.success('刷新成功')
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ setData, getModule })
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.header) {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.header-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-empty__image) {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -3,11 +3,21 @@
|
|||||||
<TableHeader>
|
<TableHeader>
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="关键字筛选">
|
<el-form-item label="关键字筛选">
|
||||||
<el-input v-model.trim="tableStore.table.params.searchValue" style="width: 200px" clearable placeholder="请输入设备名称/网络设备ID" />
|
<el-input
|
||||||
|
v-model.trim="tableStore.table.params.searchValue"
|
||||||
|
style="width: 200px"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入设备名称/网络设备ID"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备类型">
|
<el-form-item label="流程状态">
|
||||||
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
|
<el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择状态">
|
||||||
|
<el-option label="功能调试" :value="2"></el-option>
|
||||||
|
<el-option label="出厂调试" :value="3"></el-option>
|
||||||
|
<el-option label="正式投运" :value="4"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="设备类型">
|
||||||
<el-select
|
<el-select
|
||||||
v-model.trim="tableStore.table.params.devType"
|
v-model.trim="tableStore.table.params.devType"
|
||||||
clearable
|
clearable
|
||||||
@@ -46,7 +56,7 @@
|
|||||||
<el-option label="MQTT" value="MQTT"></el-option>
|
<el-option label="MQTT" value="MQTT"></el-option>
|
||||||
<el-option label="CLD" value="CLD"></el-option>
|
<el-option label="CLD" value="CLD"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>-->
|
||||||
<!-- <el-form-item label="状态">
|
<!-- <el-form-item label="状态">
|
||||||
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
|
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
|
||||||
<el-option label="未注册" :value="1"></el-option>
|
<el-option label="未注册" :value="1"></el-option>
|
||||||
@@ -372,6 +382,7 @@ const tableStore = new TableStore({
|
|||||||
已连接: '已连接'
|
已连接: '已连接'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '通讯状态',
|
title: '通讯状态',
|
||||||
field: 'runStatus',
|
field: 'runStatus',
|
||||||
@@ -386,7 +397,33 @@ const tableStore = new TableStore({
|
|||||||
2: '在线'
|
2: '在线'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '流程状态',
|
||||||
|
field: 'process',
|
||||||
|
width: 100,
|
||||||
|
render: 'tag',
|
||||||
|
custom: {
|
||||||
|
2: 'warning',
|
||||||
|
3: 'warning',
|
||||||
|
4: 'success'
|
||||||
|
},
|
||||||
|
replaceValue: {
|
||||||
|
2: '功能调试',
|
||||||
|
3: '出厂调试',
|
||||||
|
4: '正式投运'
|
||||||
|
}
|
||||||
|
// formatter: row => {
|
||||||
|
// return row.cellValue == '1'
|
||||||
|
// ? '设备登记'
|
||||||
|
// : row.cellValue == '2'
|
||||||
|
// ? '功能调试'
|
||||||
|
// : row.cellValue == '3'
|
||||||
|
// ? '出厂调试'
|
||||||
|
// : row.cellValue == '4'
|
||||||
|
// ? '设备投运'
|
||||||
|
// : row.cellValue
|
||||||
|
// }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
@@ -647,6 +684,7 @@ const tableStore = new TableStore({
|
|||||||
tableStore.table.params.orderBy = 'desc'
|
tableStore.table.params.orderBy = 'desc'
|
||||||
tableStore.table.params.devType = ''
|
tableStore.table.params.devType = ''
|
||||||
tableStore.table.params.devModel = ''
|
tableStore.table.params.devModel = ''
|
||||||
|
tableStore.table.params.process = ''
|
||||||
tableStore.table.params.devAccessMethod = ''
|
tableStore.table.params.devAccessMethod = ''
|
||||||
tableStore.table.params.status = ''
|
tableStore.table.params.status = ''
|
||||||
tableStore.table.params.sortBy = ''
|
tableStore.table.params.sortBy = ''
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
|
<img v-if="item.fileContent" :src="item.fileContent" class="image xiaoshou" @click="imgData(item)" />
|
||||||
<el-empty v-else description="暂无设计" />
|
<el-empty v-else description="暂无设计" style="height: 220px;"/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|||||||
Reference in New Issue
Block a user