From 02129858b17c1934b30d29b87805844479a32c6c Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期三, 03 一月 2024 13:15:08 +0800 Subject: [PATCH] bug --- src/views/smoke/realTime/index.vue | 433 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 429 insertions(+), 4 deletions(-) diff --git a/src/views/smoke/realTime/index.vue b/src/views/smoke/realTime/index.vue index 2f1c154..ba58f5f 100644 --- a/src/views/smoke/realTime/index.vue +++ b/src/views/smoke/realTime/index.vue @@ -1,13 +1,438 @@ <template> - <div>瀹炴椂绠$悊</div> + <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="鐩戞祴鐐�" min-width="120px"> + </el-table-column> + <el-table-column prop="Addr" label="瀹夎鍦板潃" min-width="180px"> + </el-table-column> + <el-table-column prop="AcquitAtStr" label="閲囬泦鏃堕棿" min-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="180px" fixed="right"> + <template slot-scope="scope"> + <div class="operation"> + <i class="el-icon-document" @click="handleDetectorDailySumDays(scope.row)" title="涓�鐐逛竴妗�"></i> + <span class="line">|</span> + <i class="el-icon-notebook-1" @click="handleIntimeData(scope.row)" title="鏌ョ湅姣忓垎閽熸暟鎹�"></i> + <span class="line">|</span> + <i class="el-icon-s-data" @click="handleTenMinData(scope.row)" title="鏌ョ湅10min娴撳害"></i> + <span class="line">|</span> + <i class="el-icon-data-analysis" @click="handleTenHourData(scope.row)" title="鏌ョ湅灏忔椂鎶樼畻娴撳害"></i> + <span class="line">|</span> + <i class="el-icon-monitor" @click="handleDevices(scope.row)" title="鐩戞祴鐐硅澶囩鐞�"></i> + <!-- <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> + </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 + title="涓�鐐逛竴妗�" + 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" + title="鍒嗛挓閲囬泦鏁版嵁" + @closeDialog="closeDialog" + :inTimeData="inTimeData" + ></IntimeData> + </el-dialog> + + + <el-dialog + :destroy-on-close="true" + :visible.sync="dialogTenMinData" + width="80%" + > + <TenMinData + v-if="dialogTenMinData" + title="10min娴撳害鏇茬嚎" + @closeDialog="closeDialog" + :inTimeData="inTimeData" + ></TenMinData> + </el-dialog> + + <el-dialog + :destroy-on-close="true" + title="灏忔椂鎶樼畻娴撳害" + :visible.sync="dialogTenHourData" + width="80%" + > + <TenHourData + v-if="dialogTenHourData" + @closeDialog="closeDialog" + :inTimeData="inTimeData" + ></TenHourData> + </el-dialog> + + + <el-dialog + :destroy-on-close="true" + title="鐩戞祴鐐硅澶囩鐞�" + :visible.sync="dialogDevices" + width="80%" + > + <Devices + v-if="dialogDevices" + @closeDialog="closeDialog" + :inTimeData="inTimeData" + ></Devices> + </el-dialog> + </div> </template> <script> -export default { +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, + 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, + }; + } + + 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) => { + 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 "姝e父"; + 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> +<style lang="scss" scoped> +.el-table { + .operation { + display: flex; + // color: var(--operation-color); + .line { + padding: 0 5px; + } + font-size: 20px; + cursor: pointer; + color: #666; + span:hover { + cursor: pointer; + } + } +} </style> \ No newline at end of file -- Gitblit v1.8.0