feat(设备-运行状态): 增加设备运行历史弹窗枚举和时间格式化显示

This commit is contained in:
fhysy 2025-04-14 17:14:47 +08:00
parent 40e6526712
commit 5f403d7391
1 changed files with 65 additions and 14 deletions

View File

@ -3,7 +3,12 @@
<div class="show-data-header"> <div class="show-data-header">
<div class="header-time"> <div class="header-time">
<div class="time-select"> <div class="time-select">
<el-select v-model="timeValue" placeholder="请选择" size="small" @change="selectChange"> <el-select
v-model="timeValue"
placeholder="请选择"
size="small"
@change="selectChange"
>
<el-option <el-option
v-for="item in timeOptions" v-for="item in timeOptions"
:key="item.value" :key="item.value"
@ -27,19 +32,42 @@
</div> </div>
<div class="eader-radio"> <div class="eader-radio">
<el-radio-group v-model="showType" size="small"> <el-radio-group v-model="showType" size="small">
<el-radio-button :disabled="showlistDisable" label="表格"></el-radio-button> <el-radio-button
<el-radio-button :disabled="showchartDisable" label="图表"></el-radio-button> :disabled="showlistDisable"
label="表格"
></el-radio-button>
<el-radio-button
:disabled="showchartDisable"
label="图表"
></el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
</div> </div>
<div class="show-data-body"> <div class="show-data-body">
<div v-show="showType === '图表'" id="chart" style="width:100%;height:400px;"></div> <div
v-show="showType === '图表'"
id="chart"
style="width:100%;height:400px;"
></div>
<div v-show="showType === '表格'" class="list-container"> <div v-show="showType === '表格'" class="list-container">
<el-table :data="tableData" class="device-topic-list" style="width: 100%"> <el-table
<el-table-column label="时间" prop="time" width="250"></el-table-column> :data="tableData"
<el-table-column label="原始值" prop="value"> class="device-topic-list"
style="width: 100%"
>
<el-table-column
align="center"
label="时间"
prop="time"
width="250"
></el-table-column>
<el-table-column align="center" label="原始值" prop="value">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="dialogData.funDataType === 'IMAGE'" class style="text-align: center;"> <div
v-if="dialogData.funDataType === 'IMAGE'"
class
style="text-align: center;"
>
<el-image <el-image
:preview-src-list="[getIotFileUrl(scope.row.value)]" :preview-src-list="[getIotFileUrl(scope.row.value)]"
:src="getIotFileUrl(scope.row.value)" :src="getIotFileUrl(scope.row.value)"
@ -52,7 +80,8 @@
<span <span
style=" cursor: default; position: relative; right: -10px; color: #3a8ee6;" style=" cursor: default; position: relative; right: -10px; color: #3a8ee6;"
@click="copyOnClick(scope.row.value)" @click="copyOnClick(scope.row.value)"
>复制</span> >复制</span
>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -84,12 +113,13 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from "echarts";
import { getDataUploadListAt } from "@/api/iot/device"; import { getDataUploadListAt } from "@/api/iot/device";
import { getIotFileUrl } from "@/utils/hciot"; import { getIotFileUrl } from "@/utils/hciot";
import moment from "moment";
export default { export default {
name: "RunStateTable", name: "RunStateTable",
props: ["deviceKey",'deviceId', "dialogShow", "pro_type", "prodId"], props: ["deviceKey", "deviceId", "dialogShow", "pro_type", "prodId"],
data() { data() {
return { return {
timeValue: "1", timeValue: "1",
@ -219,11 +249,30 @@ export default {
this.setShowChart(timeData); this.setShowChart(timeData);
}); });
}, },
formatTime(date) {
//
if (date && date.toString().length === 10) {
// 10
return moment(date * 1000).format("YYYY-MM-DD HH:mm:ss");
} else if (date && date.toString().length === 13) {
// 13
return moment(date).format("YYYY-MM-DD HH:mm:ss");
} else {
return date;
}
},
setShowChart(timeData) { setShowChart(timeData) {
for (let item of timeData) { for (let item of timeData) {
let value = item.value;
if (this.dialogData.dataFormatType === "ENUM") {
let key = parseInt(item.value);
value = this.dialogData.dataFormatObj[key] || item.value;
} else if (this.dialogData.dataFormatType === "TIME") {
value = this.formatTime(item.value);
}
let dataItem = { let dataItem = {
time: this.parseTime(new Date(item.time)), time: this.parseTime(new Date(item.time)),
value: item.value value: value
}; };
this.tableData.push(dataItem); this.tableData.push(dataItem);
} }
@ -296,7 +345,9 @@ export default {
if ( if (
this.dialogData.funDataType === "TEXT" || this.dialogData.funDataType === "TEXT" ||
this.dialogData.funDataType === "DATE" || this.dialogData.funDataType === "DATE" ||
this.dialogData.funDataType === "IMAGE" this.dialogData.funDataType === "IMAGE" ||
this.dialogData.dataFormatType === "ENUM" ||
this.dialogData.dataFormatType === "TIME"
) { ) {
this.showchartDisable = true; this.showchartDisable = true;
this.showType = "表格"; this.showType = "表格";