Web端添加治理模块状态展示界面、模块事件展示、主动询问模块状态功能
This commit is contained in:
guanj
File diff suppressed because it is too large
Load Diff
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>
|
||||
<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) => {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user