From b041f8a0a7c42f95b838fdf3a400213026968e95 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期日, 12 十一月 2023 23:27:47 +0800
Subject: [PATCH] 实时数据
---
src/views/smoke/realTime/index.vue | 719 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 402 insertions(+), 317 deletions(-)
diff --git a/src/views/smoke/realTime/index.vue b/src/views/smoke/realTime/index.vue
index 2b8476a..c220764 100644
--- a/src/views/smoke/realTime/index.vue
+++ b/src/views/smoke/realTime/index.vue
@@ -1,337 +1,422 @@
<template>
- <div>
- <MyHeader
- @getList="getRealTimeList"
- @exportTable="exportInTime"
- ></MyHeader>
- <!-- 鏁版嵁灞曠ず -->
- <div style="width: 100%; overflow-x: scroll">
- <el-table
- border
- stripe
- ref="multipleTable"
- :header-cell-style="{
- background: '#F5F5F5',
- 'font-weight': '650',
- 'line-height': '45px'
- }"
- :data="tableData"
- :row-class-name="tableRowClassName"
- >
- <el-table-column label="搴忓彿" type="index" width="60px">
- </el-table-column>
- <el-table-column prop="Locale" label="鐩戞祴鐐�" width="120px">
- </el-table-column>
- <el-table-column prop="Addr" label="瀹夎鍦板潃" width="180px">
- </el-table-column>
- <el-table-column
- prop="AcquitAtStr"
- label="閲囬泦鏃堕棿"
- width="100px"
- >
- </el-table-column>
- <el-table-column
- prop="FanStatusStr"
- label="椋庢満鐘舵��"
- width="80px"
- >
- </el-table-column>
- <el-table-column
- prop="FilterStatusStr"
- label="鍑�鍖栧櫒鐘舵��"
- width="95px"
- >
- </el-table-column>
- <el-table-column
- prop="EmissionsConc"
- label="娌圭儫瀹炴椂娴撳害锛坢g/m3锛�"
- width="110px"
- >
- </el-table-column>
- <el-table-column
- prop="CEmissions"
- label="娌圭儫鎶樼畻娴撳害锛坢g/m3锛�"
- width="110px"
- >
- </el-table-column>
- <el-table-column
- prop="GranuleConc"
- label="棰楃矑鐗╁疄鏃舵祿搴︼紙mg/m3锛�"
- width="120px"
- >
- </el-table-column>
- <el-table-column
- prop="CGranule"
- label="棰楃矑鐗╂姌绠楁祿搴︼紙mg/m3锛�"
- width="120px"
- >
- </el-table-column>
- <el-table-column
- prop="HydrocarbonConc"
- label="闈炵敳鐑锋�荤儍瀹炴椂娴撳害锛坢g/m3锛�"
- width="160px"
- >
- </el-table-column>
- <el-table-column
- prop="CHydrocarbon"
- label="闈炵敳鐑锋�荤儍鎶樼畻娴撳害锛坢g/m3锛�"
- width="160px"
- >
- </el-table-column>
- <el-table-column prop="StatusStr" label="鎺掓斁鐘舵��" width="80px">
- </el-table-column>
- <el-table-column
- prop="OnlineStatusStr"
- label="鏁翠綋鐘舵��"
- width="80px"
- >
- </el-table-column>
- <el-table-column prop="operation" label="鎿嶄綔" width="550px">
- <template slot-scope="scope">
- <div class="operation">
- <span @click="handleUpload(scope.row)"
- >涓�鐐逛竴妗�</span
- >
- <span class="line">|</span>
- <span @click="handleDispatch(scope.row)"
- >鏌ョ湅姣忓垎閽熸暟鎹�</span
- >
- <span class="line">|</span>
- <span @click="handleLearn(scope.row)"
- >鏌ョ湅10min娴撳害</span
- >
- <span class="line">|</span>
- <span @click="handleNotDeal(scope.row)"
- >鏌ョ湅灏忔椂鎶樼畻娴撳害</span
- >
- <span class="line">|</span>
- <span @click="handleNotDeal(scope.row)"
- >鐩戞祴鐐硅澶囩鐞�</span
- >
- </div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- <div class="tools">
- <div class="pagination">
- <el-pagination
- background
- @prev-click="handlePrev"
- @next-click="handleNext"
- :current-page="currentPage"
- layout="prev, pager, next"
- :total="totalNum"
- :page-size="pageSize"
- @current-change="changeCurrentPage"
- >
- </el-pagination>
+ <div>
+ <MyHeader @getList="getRealTimeList" @exportTable="exportInTime"></MyHeader>
+ <!-- 鏁版嵁灞曠ず -->
+ <div style="width: 100%; overflow-x: scroll">
+ <el-table
+ border
+ stripe
+ ref="multipleTable"
+ :header-cell-style="{
+ background: '#F5F5F5',
+ 'font-weight': '650',
+ 'line-height': '45px',
+ }"
+ :data="tableData"
+ :row-class-name="tableRowClassName"
+ >
+ <el-table-column label="搴忓彿" type="index" width="60px">
+ </el-table-column>
+ <el-table-column prop="Locale" label="鐩戞祴鐐�" width="120px">
+ </el-table-column>
+ <el-table-column prop="Addr" label="瀹夎鍦板潃" width="180px">
+ </el-table-column>
+ <el-table-column prop="AcquitAtStr" label="閲囬泦鏃堕棿" width="100px">
+ </el-table-column>
+ <el-table-column prop="FanStatusStr" label="椋庢満鐘舵��" width="80px">
+ </el-table-column>
+ <el-table-column prop="FilterStatusStr" label="鍑�鍖栧櫒鐘舵��" width="95px">
+ </el-table-column>
+ <el-table-column
+ prop="EmissionsConc"
+ label="娌圭儫瀹炴椂娴撳害锛坢g/m3锛�"
+ width="110px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="CEmissions"
+ label="娌圭儫鎶樼畻娴撳害锛坢g/m3锛�"
+ width="110px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="GranuleConc"
+ label="棰楃矑鐗╁疄鏃舵祿搴︼紙mg/m3锛�"
+ width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="CGranule"
+ label="棰楃矑鐗╂姌绠楁祿搴︼紙mg/m3锛�"
+ width="120px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="HydrocarbonConc"
+ label="闈炵敳鐑锋�荤儍瀹炴椂娴撳害锛坢g/m3锛�"
+ width="160px"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="CHydrocarbon"
+ label="闈炵敳鐑锋�荤儍鎶樼畻娴撳害锛坢g/m3锛�"
+ width="160px"
+ >
+ </el-table-column>
+ <el-table-column prop="StatusStr" label="鎺掓斁鐘舵��" width="80px">
+ </el-table-column>
+ <el-table-column prop="OnlineStatusStr" label="鏁翠綋鐘舵��" width="80px">
+ </el-table-column>
+ <el-table-column prop="operation" label="鎿嶄綔" width="550px">
+ <template slot-scope="scope">
+ <div class="operation">
+ <span @click="handleDetectorDailySumDays(scope.row)"
+ >涓�鐐逛竴妗�</span
+ >
+ <span class="line">|</span>
+ <span @click="handleIntimeData(scope.row)">鏌ョ湅姣忓垎閽熸暟鎹�</span>
+ <span class="line">|</span>
+ <span @click="handleTenMinData(scope.row)">鏌ョ湅10min娴撳害</span>
+ <span class="line">|</span>
+ <span @click="handleTenHourData(scope.row)"
+ >鏌ョ湅灏忔椂鎶樼畻娴撳害</span
+ >
+ <span class="line">|</span>
+ <span @click="handleDevices(scope.row)">鐩戞祴鐐硅澶囩鐞�</span>
</div>
- </div>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
+ <div class="tools">
+ <div class="pagination">
+ <el-pagination
+ background
+ @prev-click="handlePrev"
+ @next-click="handleNext"
+ :current-page="currentPage"
+ layout="prev, pager, next"
+ :total="totalNum"
+ :page-size="pageSize"
+ @current-change="changeCurrentPage"
+ >
+ </el-pagination>
+ </div>
+ </div>
+ <el-dialog
+ :destroy-on-close="true"
+ :visible.sync="dialogDetectorDailySumDays"
+ width="80%"
+ >
+ <DetectorDailySumDays
+ v-if="dialogDetectorDailySumDays"
+ @closeDialog="closeDialog"
+ :inTimeData="inTimeData"
+ ></DetectorDailySumDays>
+ </el-dialog>
+
+
+ <el-dialog
+ :destroy-on-close="true"
+ :visible.sync="dialogIntimeData"
+ width="80%"
+ >
+ <IntimeData
+ v-if="dialogIntimeData"
+ @closeDialog="closeDialog"
+ :inTimeData="inTimeData"
+ ></IntimeData>
+ </el-dialog>
+
+
+ <el-dialog
+ :destroy-on-close="true"
+ :visible.sync="dialogTenMinData"
+ width="80%"
+ >
+ <TenMinData
+ v-if="dialogTenMinData"
+ @closeDialog="closeDialog"
+ :inTimeData="inTimeData"
+ ></TenMinData>
+ </el-dialog>
+
+ <el-dialog
+ :destroy-on-close="true"
+ :visible.sync="dialogTenHourData"
+ width="80%"
+ >
+ <TenHourData
+ v-if="dialogTenHourData"
+ @closeDialog="closeDialog"
+ :inTimeData="inTimeData"
+ ></TenHourData>
+ </el-dialog>
+
+
+ <el-dialog
+ :destroy-on-close="true"
+ :visible.sync="dialogDevices"
+ width="80%"
+ >
+ <Devices
+ v-if="dialogDevices"
+ @closeDialog="closeDialog"
+ :inTimeData="inTimeData"
+ ></Devices>
+ </el-dialog>
+ </div>
</template>
<script>
import MyHeader from "./components/header";
+
+import DetectorDailySumDays from "./components/detectorDailySumDays.vue";
+import Devices from "./components/devices.vue";
+import IntimeData from "./components/intimeData.vue";
+import TenHourData from "./components/tenHourData.vue";
+import TenMinData from "./components/tenMinData.vue";
+
import realTimeApi from "@/api/smoke/realTime";
export default {
- data() {
- return {
- tableData: [],
- totalNum: 0,
- pageSize: 10,
- currentPage: 1,
+ data() {
+ return {
+ tableData: [],
+ totalNum: 0,
+ pageSize: 10,
+ currentPage: 1,
+ dialogDetectorDailySumDays: false,
+ dialogDevices: false,
+ dialogIntimeData: false,
+ dialogTenHourData: false,
+ dialogTenMinData: false,
+ inTimeData:{}
+ };
+ },
+ components: {
+ MyHeader,
+ DetectorDailySumDays,
+ TenHourData,
+ Devices,
+ IntimeData,
+ TenMinData,
+ },
+ created() {
+ this.getRealTimeList();
+ },
+ methods: {
+ getRealTimeList(seachData) {
+ let params;
+ if (seachData) {
+ params = this.getParam(seachData);
+ } else {
+ params = {
+ pageNum: this.currentPage,
+ pageSize: this.pageSize,
};
- },
- components: { MyHeader },
- created() {
- this.getRealTimeList();
- },
- methods: {
- getRealTimeList(seachData) {
- let params;
- if (seachData) {
- params = this.getParam(seachData)
- } else {
- params = {
- pageNum: this.currentPage,
- pageSize: this.pageSize,
- };
- }
+ }
- realTimeApi
- .findInTimeList(params)
- .then(({ list, total }) => {
- list.forEach(e => {
- e.AcquitAtStr = this.dateFormat("YYYY-mm-dd HH:MM", new Date(e.AcquitAt*1000));
- e.FanStatusStr = this.FanStatusStr(e.FanStatus)
- e.FilterStatusStr = this.FanStatusStr(e.FilterStatus)
- e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus)
- e.StatusStr = this.StatusStr(e.Status)
- });
- this.tableData = list;
- this.totalNum = total;
- })
- .catch((err) => this.$message.error(err));
- },
- exportInTime(seachData) {
- let params;
- if (seachData) {
- params = this.getParam(seachData)
- }
- realTimeApi
- .exportInTime(params)
- .then((res) => {
- debugger
- let time = new Date();
- let deathdate = time.toLocaleDateString();
- const blob = new Blob([res.data], {
- type: "application/vnd.ms-excel;charset=utf-8",
- });
- if (window.navigator.msSaveBlob) {
- window.navigator.msSaveBlob(
- blob,
- deathdate + "瀹炴椂鏁版嵁" + ".xls"
- );
- } else {
- const url = window.URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.style.display = "none";
- link.href = url;
- link.download = deathdate + "瀹炴椂鏁版嵁" + ".xls";
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
- this.$message.success("鎿嶄綔鎴愬姛");
- })
- .catch((err) => this.$message.error(err));
- },
- getParam(seachData) {
- let params;
- if (seachData) {
- const seachParams = seachData.seachData
- params = {
- owner:
- seachParams.owner == undefined
- ? null
- : seachParams.owner,
- onlineStatus:
- seachParams.onlineStatus == undefined
- ? null
- : seachParams.onlineStatus,
- status: seachParams.status == undefined
- ? null
- : seachParams.status,
- type:
- seachParams.type == undefined
- ? null
- : seachParams.type,
- startTime:
- seachParams.alarmTime == undefined
- ? null
- : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[0]),
- endTime:
- seachParams.alarmTime == undefined
- ? null
- : this.dateFormat("YYYY-mm-dd HH:MM:SS", seachParams.alarmTime[1]),
- };
- }
- return params;
- },
+ realTimeApi
+ .findInTimeList(params)
+ .then(({ list, total }) => {
+ list.forEach((e) => {
+ e.AcquitAtStr = this.dateFormat(
+ "YYYY-mm-dd HH:MM",
+ new Date(e.AcquitAt * 1000)
+ );
+ e.FanStatusStr = this.FanStatusStr(e.FanStatus);
+ e.FilterStatusStr = this.FanStatusStr(e.FilterStatus);
+ e.OnlineStatusStr = this.OnlineStatusStr(e.OnlineStatus);
+ e.StatusStr = this.StatusStr(e.Status);
+ });
+ this.tableData = list;
+ this.totalNum = total;
+ })
+ .catch((err) => this.$message.error(err));
+ },
+ exportInTime(seachData) {
+ let params;
+ if (seachData) {
+ params = this.getParam(seachData);
+ }
+ realTimeApi
+ .exportInTime(params)
+ .then((res) => {
+ debugger;
+ let time = new Date();
+ let deathdate = time.toLocaleDateString();
+ const blob = new Blob([res.data], {
+ type: "application/vnd.ms-excel;charset=utf-8",
+ });
+ if (window.navigator.msSaveBlob) {
+ window.navigator.msSaveBlob(blob, deathdate + "瀹炴椂鏁版嵁" + ".xls");
+ } else {
+ const url = window.URL.createObjectURL(blob);
+ const link = document.createElement("a");
+ link.style.display = "none";
+ link.href = url;
+ link.download = deathdate + "瀹炴椂鏁版嵁" + ".xls";
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+ this.$message.success("鎿嶄綔鎴愬姛");
+ })
+ .catch((err) => this.$message.error(err));
+ },
+ getParam(seachData) {
+ let params;
+ if (seachData) {
+ const seachParams = seachData.seachData;
+ params = {
+ owner: seachParams.owner == undefined ? null : seachParams.owner,
+ onlineStatus:
+ seachParams.onlineStatus == undefined
+ ? null
+ : seachParams.onlineStatus,
+ status: seachParams.status == undefined ? null : seachParams.status,
+ type: seachParams.type == undefined ? null : seachParams.type,
+ startTime:
+ seachParams.alarmTime == undefined
+ ? null
+ : this.dateFormat(
+ "YYYY-mm-dd HH:MM:SS",
+ seachParams.alarmTime[0]
+ ),
+ endTime:
+ seachParams.alarmTime == undefined
+ ? null
+ : this.dateFormat(
+ "YYYY-mm-dd HH:MM:SS",
+ seachParams.alarmTime[1]
+ ),
+ };
+ }
+ return params;
+ },
- FanStatusStr(FanStatus) {
- switch (FanStatus) {
- case 1:
- return "寮�"
- case 2:
- return "鍏�"
- default:
- return "寮傚父"
- }
- },
- OnlineStatusStr(Status) {
- switch (Status) {
- case 1:
- return "鍦ㄧ嚎"
- case 2:
- return "绂荤嚎"
- default:
- return "寮傚父绂荤嚎"
- }
- },
- StatusStr(Status) {
- switch (Status) {
- case "NORMAL":
- return "姝ｅ父"
- case "ALARM":
- return "棰勮"
- case "EXCESS":
- return "瓒呮爣"
- case "DOWN":
- return "绂荤嚎"
- default:
- return "寮傚父绂荤嚎"
- }
- },
- // 璁剧疆琛ㄦ牸鏂戦┈绾�
- tableRowClassName({ row, rowIndex }) {
- if ((rowIndex + 1) % 2 === 0) {
- return 'warning-row';
- } else {
- return 'success-row';
- }
- },
- // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
- changeCurrentPage(page) {
- this.currentPage = page;
- this.getRealTimeList();
- },
- // 涓婁竴椤电偣鍑讳簨浠�
- handlePrev(page) {
- this.currentPage = page;
- this.getRealTimeList();
- },
- // 涓嬩竴椤电偣鍑讳簨浠�
- handleNext(page) {
- this.currentPage = page;
- this.getRealTimeList();
- },
- dateFormat(fmt, date) {
- let ret;
- const opt = {
- "Y+": date.getFullYear().toString(), // 骞�
- "m+": (date.getMonth() + 1).toString(), // 鏈�
- "d+": date.getDate().toString(), // 鏃�
- "H+": date.getHours().toString(), // 鏃�
- "M+": date.getMinutes().toString(), // 鍒�
- "S+": date.getSeconds().toString() // 绉�
- // 鏈夊叾浠栨牸寮忓寲瀛楃闇�姹傚彲浠ョ户缁坊鍔狅紝蹇呴』杞寲鎴愬瓧绗︿覆
- };
- for (let k in opt) {
- ret = new RegExp("(" + k + ")").exec(fmt);
- if (ret) {
- fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
- };
- };
- return fmt;
- },
- }
+ FanStatusStr(FanStatus) {
+ switch (FanStatus) {
+ case 1:
+ return "寮�";
+ case 2:
+ return "鍏�";
+ default:
+ return "寮傚父";
+ }
+ },
+ OnlineStatusStr(Status) {
+ switch (Status) {
+ case 1:
+ return "鍦ㄧ嚎";
+ case 2:
+ return "绂荤嚎";
+ default:
+ return "寮傚父绂荤嚎";
+ }
+ },
+ StatusStr(Status) {
+ switch (Status) {
+ case "NORMAL":
+ return "姝ｅ父";
+ case "ALARM":
+ return "棰勮";
+ case "EXCESS":
+ return "瓒呮爣";
+ case "DOWN":
+ return "绂荤嚎";
+ default:
+ return "寮傚父绂荤嚎";
+ }
+ },
+ // 璁剧疆琛ㄦ牸鏂戦┈绾�
+ tableRowClassName({ row, rowIndex }) {
+ if ((rowIndex + 1) % 2 === 0) {
+ return "warning-row";
+ } else {
+ return "success-row";
+ }
+ },
+ // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+ changeCurrentPage(page) {
+ this.currentPage = page;
+ this.getRealTimeList();
+ },
+ // 涓婁竴椤电偣鍑讳簨浠�
+ handlePrev(page) {
+ this.currentPage = page;
+ this.getRealTimeList();
+ },
+ // 涓嬩竴椤电偣鍑讳簨浠�
+ handleNext(page) {
+ this.currentPage = page;
+ this.getRealTimeList();
+ },
+ dateFormat(fmt, date) {
+ let ret;
+ const opt = {
+ "Y+": date.getFullYear().toString(), // 骞�
+ "m+": (date.getMonth() + 1).toString(), // 鏈�
+ "d+": date.getDate().toString(), // 鏃�
+ "H+": date.getHours().toString(), // 鏃�
+ "M+": date.getMinutes().toString(), // 鍒�
+ "S+": date.getSeconds().toString(), // 绉�
+ // 鏈夊叾浠栨牸寮忓寲瀛楃闇�姹傚彲浠ョ户缁坊鍔狅紝蹇呴』杞寲鎴愬瓧绗︿覆
+ };
+ for (let k in opt) {
+ ret = new RegExp("(" + k + ")").exec(fmt);
+ if (ret) {
+ fmt = fmt.replace(
+ ret[1],
+ ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
+ );
+ }
+ }
+ return fmt;
+ },
+ handleDetectorDailySumDays(row) {
+ this.dialogDetectorDailySumDays = true;
+ this.inTimeData = row
+ },
+ handleIntimeData(row) {
+ this.dialogIntimeData = true;
+ this.inTimeData = row
+ },
+ handleTenMinData(row) {
+ this.dialogTenMinData = true;
+ this.inTimeData = row
+ },
+ handleTenHourData(row) {
+ this.dialogTenHourData = true;
+ this.inTimeData = row
+ },
+ handleDevices(row) {
+ this.dialogDevices = true;
+ this.inTimeData = row
+ },
+ closeDialog() {
+ this.dialogDetectorDailySumDays = false;
+ this.dialogDevices = false;
+ this.dialogIntimeData = false;
+ this.dialogTenHourData = false;
+ this.dialogTenMinData = false;
+ },
+ },
};
</script>
<style lang="scss" scoped>
.el-table {
- .operation {
- display: flex;
- color: var(--operation-color);
- .line {
- padding: 0 5px;
- }
-
- span:hover {
- cursor: pointer;
- }
+ .operation {
+ display: flex;
+ color: var(--operation-color);
+ .line {
+ padding: 0 5px;
}
+
+ span:hover {
+ cursor: pointer;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0