修改 模块运行状态页面添加数据展示
This commit is contained in:
guanj
@@ -1267,38 +1267,35 @@ const handleClick = async (tab?: any) => {
|
||||
}
|
||||
//模块数据
|
||||
if (dataSet.value.includes('_moduleData')) {
|
||||
setTimeout(async () => {
|
||||
if (tab.props != undefined) await (datePickerRef.value && datePickerRef.value?.setInterval(5))
|
||||
|
||||
setTimeout(() => {
|
||||
if ((tab && tab.props) != undefined) {
|
||||
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]
|
||||
}
|
||||
}, 0)
|
||||
|
||||
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(() => {
|
||||
await setTimeout(() => {
|
||||
allModelData(obj)
|
||||
.then((res: any) => {
|
||||
tableData.value = res.data
|
||||
formInline.total = res.data.total
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
setTimeout(() => {
|
||||
//targetType
|
||||
moduleDataRef.value?.setData(res.data)
|
||||
}, 500)
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
}, 0)
|
||||
}, 0)
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="container">
|
||||
<div class="tabs-container">
|
||||
<!-- 左侧标签头 -->
|
||||
<div class="tab-list" :style="echartHeight" style="overflow-y: auto">
|
||||
<div class="tab-list" :style="titleHeight" style="overflow-y: auto">
|
||||
<button
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@@ -12,12 +12,7 @@
|
||||
@click="changeTab(index)"
|
||||
>
|
||||
<span>{{ item.moduleName }}</span>
|
||||
<el-tag
|
||||
class="ml10"
|
||||
:type="item.moduleState == '离线' ? 'danger' : 'success'"
|
||||
size="small"
|
||||
effect="dark"
|
||||
>
|
||||
<el-tag class="ml10" :type="getType(item.moduleState)" size="small" effect="dark">
|
||||
{{ item.moduleState }}
|
||||
</el-tag>
|
||||
</button>
|
||||
@@ -25,10 +20,20 @@
|
||||
|
||||
<!-- 右侧内容区域 -->
|
||||
<div class="tab-content-container flex-1" :key="activeTab">
|
||||
<div :style="echartHeight">
|
||||
<MyEchart :options="echartList.options" v-if="echartList.dataList != null" />
|
||||
<el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
|
||||
</div>
|
||||
<el-tabs v-model="activeName" type="card" v-if="echartList?.dataList != null">
|
||||
<el-tab-pane label="状态" name="0">
|
||||
<div :style="echartHeight" class="pt10">
|
||||
<MyEchart :options="echartList.options" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="数据" name="1">
|
||||
<div :style="echartHeight" class="pt10">
|
||||
<MyEchart style="height: 50%" :options="echartList.loadList" />
|
||||
<MyEchart style="height: 50%" :options="echartList.modOutList" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-empty description="暂无数据" style="width: 100%; height: 100%" v-else></el-empty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,20 +61,23 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, reactive,onBeforeUnmount } 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'
|
||||
import { chain } from 'lodash'
|
||||
import { yMethod } from '@/utils/echartMethod'
|
||||
import { k } from 'vite/dist/node/types.d-aGj9QkWt'
|
||||
const list: any = ref([])
|
||||
const loading = ref(false)
|
||||
const height = ref(mainHeight(290))
|
||||
const echartHeight = ref(mainHeight(302))
|
||||
const titleHeight = ref(mainHeight(302))
|
||||
const echartHeight = ref(mainHeight(342))
|
||||
const activeTab = ref(0)
|
||||
const activeName = ref('0')
|
||||
const echartList: any = ref({})
|
||||
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
const setData = (data: any) => {
|
||||
activeTab.value = 0
|
||||
// echartHeight.value = mainHeight(292 + data.length * 49, data.length)
|
||||
@@ -107,7 +115,7 @@ const setData = (data: any) => {
|
||||
legend: {
|
||||
show: true,
|
||||
type: 'plain',
|
||||
top: 0,
|
||||
top: 10,
|
||||
itemWidth: 14, // 图例标记宽度
|
||||
itemHeight: 14, // 图例标记高度
|
||||
data: [
|
||||
@@ -131,20 +139,21 @@ const setData = (data: any) => {
|
||||
top: '30px'
|
||||
},
|
||||
yAxis: {
|
||||
max: 1,
|
||||
data: ['运行', '中断'],
|
||||
interval: 1,
|
||||
max: 1.03,
|
||||
data: ['运行', '停止', '中断'],
|
||||
interval: 0.01,
|
||||
|
||||
axisLabel: {
|
||||
formatter: value => {
|
||||
// if (value === 0) {
|
||||
// return ` `
|
||||
// }
|
||||
if (value === 0) {
|
||||
return `{lx|离线} `
|
||||
}
|
||||
if (value === 1) {
|
||||
return `{yx|运行} `
|
||||
if (value === 0.03) {
|
||||
return `{lx|离线}`
|
||||
} else if (value === 0.5) {
|
||||
return `{tz|停止}`
|
||||
} else if (value === 1) {
|
||||
return `{yx|运行}`
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
@@ -173,8 +182,24 @@ const setData = (data: any) => {
|
||||
width: 35,
|
||||
height: 20,
|
||||
borderColor: '#000'
|
||||
},
|
||||
tz: {
|
||||
backgroundColor: '#e6a23c',
|
||||
color: '#fff',
|
||||
borderRadius: 5,
|
||||
padding: [1, 3],
|
||||
fontWeight: 600,
|
||||
fontSize: 12,
|
||||
align: 'center',
|
||||
textAlign: 'center',
|
||||
width: 35,
|
||||
height: 20,
|
||||
borderColor: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -185,7 +210,7 @@ const setData = (data: any) => {
|
||||
type: 'line',
|
||||
data: item.dataList.map((k: any) => [
|
||||
k.time,
|
||||
k.stateDesc == '离线' ? 0 : 1,
|
||||
k.stateDesc == '离线' ? 0.03 : k.stateDesc == '运行' ? 1 : 0.5,
|
||||
k.stateDesc,
|
||||
k.dataType,
|
||||
k.eventName
|
||||
@@ -202,7 +227,7 @@ const setData = (data: any) => {
|
||||
.filter((k: any) => k.dataType === 1)
|
||||
.map((k: any) => ({
|
||||
name: k.stateDesc,
|
||||
coord: [k.time, k.stateDesc === '离线' ? 0 : 1],
|
||||
coord: [k.time, k.stateDesc == '离线' ? 0.03 : k.stateDesc == '运行' ? 1 : 0.5],
|
||||
itemStyle: {
|
||||
color: '#FFB74D', // 亮黄色填充
|
||||
borderColor: '#FFB74D', // 边框颜色
|
||||
@@ -214,10 +239,138 @@ const setData = (data: any) => {
|
||||
]
|
||||
}
|
||||
}
|
||||
let [loadMin, loadMax] = yMethod(item.loadList.map(k => (k.data == 3.14159 ? 0 : k.data)))
|
||||
item.loadList = {
|
||||
title: {
|
||||
text: '负载电流'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '30px'
|
||||
},
|
||||
yAxis: {
|
||||
name: 'A',
|
||||
min: loadMin,
|
||||
max: loadMax
|
||||
},
|
||||
color: ['#FFCC00', '#009900', '#CC0000'],
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: 'A相',
|
||||
type: 'line',
|
||||
data: item.loadList
|
||||
.filter((k: any) => k.phasicType == 'A')
|
||||
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
|
||||
smooth: true, //让线变得平滑
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
type: 'line',
|
||||
data: item.loadList
|
||||
.filter((k: any) => k.phasicType == 'B')
|
||||
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
|
||||
smooth: true, //让线变得平滑
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
type: 'line',
|
||||
data: item.loadList
|
||||
.filter((k: any) => k.phasicType == 'C')
|
||||
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
|
||||
smooth: true, //让线变得平滑
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
let [modOuMin, modOuMax] = yMethod(item.modOutList.map(k => (k.data == 3.14159 ? 0 : k.data)))
|
||||
|
||||
item.modOutList = {
|
||||
title: {
|
||||
text: '输出电流'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '30px'
|
||||
},
|
||||
yAxis: {
|
||||
name: 'A',
|
||||
min: modOuMin,
|
||||
max: modOuMax
|
||||
},
|
||||
color: ['#FFCC00', '#009900', '#CC0000'],
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: 'A相',
|
||||
type: 'line',
|
||||
data: item.modOutList
|
||||
.filter((k: any) => k.phasicType == 'A')
|
||||
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
|
||||
smooth: true, //让线变得平滑
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'B相',
|
||||
type: 'line',
|
||||
data: item.modOutList
|
||||
.filter((k: any) => k.phasicType == 'B')
|
||||
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
|
||||
smooth: true, //让线变得平滑
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'C相',
|
||||
type: 'line',
|
||||
data: item.modOutList
|
||||
.filter((k: any) => k.phasicType == 'C')
|
||||
.map((k: any) => [k.time, k.data == 3.14159 ? null : k.data]),
|
||||
smooth: true, //让线变得平滑
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
list.value = data
|
||||
echartList.value = list.value[activeTab.value]
|
||||
echarts.connect('group')
|
||||
}
|
||||
const getModule = async (id: string) => {
|
||||
loading.value = true
|
||||
@@ -238,8 +391,21 @@ const changeTab = (e: any) => {
|
||||
echartList.value = list.value[e]
|
||||
activeTab.value = e
|
||||
}
|
||||
const getType = (type: string) => {
|
||||
switch (type) {
|
||||
case '运行':
|
||||
return 'success'
|
||||
case '离线':
|
||||
return 'danger'
|
||||
default:
|
||||
return 'warning'
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ setData, getModule })
|
||||
onBeforeUnmount(() => {
|
||||
echarts.disconnect('group')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -311,5 +477,6 @@ defineExpose({ setData, getModule })
|
||||
|
||||
.tab-content-container {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user