217 lines
7.5 KiB
Vue
217 lines
7.5 KiB
Vue
|
<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>
|