Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web端添加治理模块状态展示界面、模块事件展示、主动询问模块状态功能

Browse Source
This commit is contained in:
guanj
2025-07-08 08:44:13 +08:00
parent 4cde4e367e
commit 7fabcb7f0f
9 changed files with 859 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/api/cs-device-boot/EquipmentDelivery.ts
View File

@@ -121,8 +121,24 @@ export function getById(data?: any) {
//测试项日志修改
export function updateRecordData(data?: any) {
return createAxios({
url: 'cs-device-boot/wlRecord/updateRecordData',
url: '/cs-device-boot/wlRecord/updateRecordData',
method: 'POST',
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
})
}

13
src/components/echarts/MyEchart.vue
View File

@@ -51,13 +51,7 @@ const initChart = () => {
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
@@ -66,7 +60,7 @@ const initChart = () => {
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
confine: true,
// confine: true,
...(props.options?.tooltip || null)
},
toolbox: {
@@ -109,6 +103,7 @@ const initChart = () => {
type: 'inside',
height: 13,
start: 0,
bottom: '20px',
end: 100
},
@@ -117,7 +112,7 @@ const initChart = () => {
height: 13,
bottom: '20px',
end: 100
},
}
// {
// show: true,
// yAxisIndex: 0,

2
src/components/form/datePicker/index.vue
View File

@@ -417,7 +417,7 @@ const setTime = (flag = 0, e = 0) => {
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')
} else {
data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')

44
src/components/tree/govern/pointTree.vue
View File

@@ -12,11 +12,9 @@ import { useDictData } from '@/stores/dictData'
// const props = defineProps(['template'])
interface Props {
template?: boolean
}
const props = withDefaults(defineProps<Props>(), {
template: false,
template: false
})
defineOptions({
name: 'govern/deviceTree'
@@ -29,29 +27,25 @@ const dictData = useDictData()
const treRef = ref()
const width = ref('')
const info = () => {
tree.value = []
let arr1: any[] = []
let arr2: any[] = []
getLineTree().then(res => {
let arr1: any[] = []
let arr2: any[] = []
//治理设备
res.data.map((item: any) => {
if (item.name == '治理设备') {
item.children.forEach((item: any) => {
item.icon = 'el-icon-HomeFilled'
item.level=1
item.level = 1
item.color = config.getColorVal('elementUiPrimary')
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-List'
item2.level=1
item2.level = 1
item2.color = config.getColorVal('elementUiPrimary')
item2.children.forEach((item3: any) => {
item3.icon = 'el-icon-Platform'
item3.level=1
item3.level = 1
item3.color =
item3.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
item3.children.forEach((item4: any) => {
@@ -71,13 +65,15 @@ const info = () => {
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
item.children.forEach((item2: any) => {
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)
})
})
}
})
tree.value = res.data
nextTick(() => {
if (arr1.length) {
//初始化选中
@@ -98,7 +94,6 @@ const info = () => {
// })
// }
else {
emit('init', arr2[0])
}
})
@@ -108,17 +103,16 @@ const changePointType = (val: any, obj: any) => {
emit('pointTypeChange', val, obj)
}
if (props.template) {
getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
emit('Policy', res.data)
info()
}).catch(err => {
info()
})
getTemplateByDept({ id: dictData.state.area[0].id })
.then((res: any) => {
emit('Policy', res.data)
info()
})
.catch(err => {
info()
})
} else {
info()
}
onMounted(() => {
})
onMounted(() => {})
</script>

104
src/components/tree/point.vue
View File

@@ -1,9 +1,16 @@
<!-- 设备监控使用折叠面板渲染多个tree -->
<template>
<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'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse" style="cursor: pointer"
v-if="route.path != '/admin/govern/reportCore/statistics/index'" />
<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'"
: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 style="display: flex; align-items: center" class="mb10">
<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" />
</template>
</el-input>
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
<Icon
@click="onMenuCollapse"
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
:class="menuCollapse ? 'unfold' : ''"
size="18"
class="fold ml10 menu-collapse"
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>
<el-collapse :accordion="true" v-model.trim="activeName" style="flex: 1; height: 100%"
@change="changeDevice">
<el-collapse
: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-tree
:style="{ height: bxsDeviceData.length != 0 ? 'calc(100vh - 300px)' : 'calc(100vh - 238px)' }"
ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
node-key="id" default-expand-all v-bind="$attrs" :data="zlDeviceData" style="overflow: auto">
ref="treeRef1"
: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 }">
<span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<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>
</template>
@@ -35,13 +63,24 @@
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length != 0">
<el-tree
:style="{ height: zlDeviceData.length != 0 ? 'calc(100vh - 280px)' : 'calc(100vh - 238px)' }"
ref="treeRef2" :props="defaultProps" highlight-current default-expand-all
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
style="overflow: auto">
ref="treeRef2"
:props="defaultProps"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
:data="bxsDeviceData"
v-bind="$attrs"
style="overflow: auto"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
v-if="data.icon" />
<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>
</template>
@@ -97,12 +136,23 @@ watch(
item.children.map((vv: any) => {
zlDeviceData.value.push(vv)
})
// console.log('🚀 ~ item.children.map ~ zlDeviceData.value:', zlDeviceData.value)
} else if (item.name == '便携式设备') {
item.children.map((vv: any) => {
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
// return data.name.includes(value)
if (data.name) {
return chooseNode(value, data, node)
}
}
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
const chooseNode = (value: string, data: any, node: any) => {
if (data.name.indexOf(value) !== -1) {
return true
}
@@ -200,18 +248,10 @@ const treeRef1 = ref<InstanceType<typeof ElTree>>()
const treeRef2 = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef1, treeRef2 })
onMounted(() => {
setTimeout(() => {
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)
}, 500)
// nextTick(() => {
// // setTimeout(() => {
// // }, 500)
// })
})
</script>

814
src/views/govern/device/control/index.vue
View File

File diff suppressed because it is too large Load Diff

216
src/views/govern/device/control/moduleData.vue Normal file
View 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>

52
src/views/govern/manage/factory.vue
View File

@@ -3,11 +3,21 @@
<TableHeader>
<template v-slot:select>
<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 label="设备类型">
<!-- <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
<el-form-item label="流程状态">
<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
v-model.trim="tableStore.table.params.devType"
clearable
@@ -46,7 +56,7 @@
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="CLD"></el-option>
</el-select>
</el-form-item>
</el-form-item>-->
<!-- <el-form-item label="状态">
<el-select v-model.trim="tableStore.table.params.status" clearable placeholder="请选择状态">
<el-option label="未注册" :value="1"></el-option>
@@ -372,6 +382,7 @@ const tableStore = new TableStore({
已连接: '已连接'
}
},
{
title: '通讯状态',
field: 'runStatus',
@@ -386,7 +397,33 @@ const tableStore = new TableStore({
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: '操作',
align: 'center',
@@ -647,11 +684,12 @@ const tableStore = new TableStore({
tableStore.table.params.orderBy = 'desc'
tableStore.table.params.devType = ''
tableStore.table.params.devModel = ''
tableStore.table.params.process = ''
tableStore.table.params.devAccessMethod = ''
tableStore.table.params.status = ''
tableStore.table.params.sortBy = ''
tableStore.table.params.orderBy = ''
tableStore.table.params.searchValue=''
tableStore.table.params.searchValue = ''
// 设备类型
const devTypeChange = (e: any) => {

2
src/views/govern/mxgraph/graphList/index.vue
View File

@@ -36,7 +36,7 @@
</div>
</div>
<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-col>
</el-row>