From 5178799b28cc30037f3991aecf83811e92cba296 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期四, 05 十月 2023 21:11:10 +0800
Subject: [PATCH] table
---
src/views/smoke/realTime/index.vue | 363 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 293 insertions(+), 70 deletions(-)
diff --git a/src/views/smoke/realTime/index.vue b/src/views/smoke/realTime/index.vue
index 7165c60..09f4a4e 100644
--- a/src/views/smoke/realTime/index.vue
+++ b/src/views/smoke/realTime/index.vue
@@ -1,83 +1,306 @@
<template>
- <MyHeader @getList="getRealTimeList"></MyHeader>
+ <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>
+ </div>
+ </div>
</template>
<script>
import MyHeader from "./components/header";
import realTimeApi from "@/api/smoke/realTime";
export default {
- data() {
- return {
- tableData: [],
- totalNum: 0,
- pageSize: 10,
- currentPage: 1,
- };
- },
- 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,
+ data() {
+ return {
+ tableData: [],
+ totalNum: 0,
+ pageSize: 10,
+ currentPage: 1,
};
- } else {
- params = {
- pageNum: this.currentPage,
- pageSize: this.pageSize,
- };
- }
-
- realTimeApi
- .findInTimeList(params)
- .then(({ records, total }) => {
- debugger;
- this.tableData = records;
- this.totalNum = total;
- })
- .catch((err) => this.$message.error(err));
},
- },
+ 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 "姝ｅ父"
+ 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), //瀛ｅ害
+ "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;
+ }
+ },
};
</script>
-<style>
+<style lang="scss" scoped>
+.el-table {
+ .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