From 2abaf1a68cc38303724d7aa74d2d3ed81af6466f Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期日, 31 三月 2024 22:09:30 +0800 Subject: [PATCH] bug修改 --- src/views/smoke/realTime/index.vue | 704 ++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 418 insertions(+), 286 deletions(-) diff --git a/src/views/smoke/realTime/index.vue b/src/views/smoke/realTime/index.vue index 09f4a4e..ba58f5f 100644 --- a/src/views/smoke/realTime/index.vue +++ b/src/views/smoke/realTime/index.vue @@ -1,306 +1,438 @@ <template> - <div> - <MyHeader @getList="getRealTimeList"></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="鐩戞祴鐐�" 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> - </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> 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 = { - pageNum: this.currentPage, - pageSize: this.pageSize, - resource: - seachData.seachData.resource == undefined - ? null - : seachData.seachData.resource, - region: - seachData.seachData.region == undefined - ? null - : seachData.seachData.region, - type: this.statusArr[1] ?? null, - code: - seachData.seachData.code == undefined - ? null - : seachData.seachData.code, - categoryBig: - seachData.seachData.categoryBig == undefined - ? null - : seachData.seachData.categoryBig, - categorySmall: - seachData.seachData.categorySmall == undefined - ? null - : seachData.seachData.categorySmall, - site: - seachData.seachData.site == undefined - ? null - : seachData.seachData.site, - street: - seachData.seachData.street == undefined - ? null - : seachData.seachData.street, - alarmTime: - seachData.seachData.alarmTime == undefined - ? null - : seachData.seachData.alarmTime, - }; - } else { - params = { - pageNum: this.currentPage, - pageSize: this.pageSize, - }; - } + } - realTimeApi - .findInTimeList(params) - .then(({ list, total }) => { - list.forEach(e => { - e.AcquitAtStr = this.Dateformat(e.AcquitAt); - 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)); - }, - 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) { - var fmtdate = new Date(fmt) - var o = { - "M+": fmtdate.getMonth() + 1, //鏈堜唤 - "d+": fmtdate.getDate(), //鏃� - "h+": fmtdate.getHours(), //灏忔椂 - "m+": fmtdate.getMinutes(), //鍒� - "s+": fmtdate.getSeconds(), //绉� - "q+": Math.floor((fmtdate.getMonth() + 3) / 3), //瀛e害 - "S": fmtdate.getMilliseconds() //姣 - }; - if (/(y+)/.test(fmt)) { - fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); - } - for (var k in o) { - if (new RegExp("(" + k + ")").test(fmt)) { - fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); - } - } - return fmt; - } + 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 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; } + + font-size: 20px; + cursor: pointer; + color: #666; + span:hover { + cursor: pointer; + } + } } </style> \ No newline at end of file -- Gitblit v1.8.0