feat(设备-运行状态): 增加设备运行历史弹窗枚举和时间格式化显示
This commit is contained in:
parent
40e6526712
commit
5f403d7391
|
@ -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 = "表格";
|
||||||
|
|
Loading…
Reference in New Issue