实时数据展示

src/App.vue

@@ -180,6 +180,7 @@ body {
     transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
       bottom 0.3s;
     overflow: hidden;
+    z-index: 2004;
     .warnTitle {
       display: flex;
       justify-content: space-between;

src/components/Sidebar.vue

@@ -41,19 +41,13 @@ export default {
           path: "/home",
           name: "首页",
         },
+        {
+          path: "/realtimeData",
+          name: "实时数据",
+        },
         {
           path: "/dataReport",
-          name: "数据展示",
-          subs: [
-            {
-              path: "/dataReport",
-              name: "数据报表",
-            },
-            {
-              path: "/realtimeData",
-              name: "实时数据",
-            },
-          ],
+          name: "数据报表",
         },
 
         {

src/utils/api/index.js

@@ -783,6 +783,16 @@ export function updateStateApi(data) {
   });
 }
 
+// 一键处理 oneKeyUpdateState
+
+export function oneKeyUpdateStateApi(data) {
+  return request({
+    url: "/warning/oneKeyUpdateState",
+    method: "post",
+    data,
+  });
+}
+
 //I2配置
 //字段映射列表
 export function listFieldConfigApi(data) {

src/views/homePage/warnMessage/components/warnDialog.vue

@@ -37,6 +37,21 @@
             >
             </el-date-picker>
           </el-form-item>
+          <el-form-item label="处理状态">
+            <el-select
+              v-model="formdata.stateVal"
+              placeholder="请选择"
+              @change="statechange"
+            >
+              <el-option
+                v-for="item in stateOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
             <el-button
@@ -46,6 +61,13 @@
               @click="exportWarn"
               >导出数据</el-button
             >
+            <el-button
+              type="danger"
+              icon="el-icon-bell"
+              class="exportBtn"
+              @click="clearWarnAll"
+              >一键处理</el-button
+            >
           </el-form-item>
         </el-form>
       </div>
@@ -128,7 +150,11 @@
 </template>
 
 <script>
-import { warningListApi, updateStateApi } from "@/utils/api/index";
+import {
+  warningListApi,
+  updateStateApi,
+  oneKeyUpdateStateApi,
+} from "@/utils/api/index";
 export default {
   name: "warnDialog",
   components: {},
@@ -140,11 +166,23 @@ export default {
         },
       },
       dialogVisible: false,
-      formdata: {},
+      formdata: {
+        stateVal: 1,
+      },
       tableData: [],
       page: 1, // 当前页数
       pageSize: 20, // 每页数量
       total: 0, //总条数
+      stateOptions: [
+        {
+          value: 1,
+          label: "未处理",
+        },
+        {
+          value: 0,
+          label: "已处理",
+        },
+      ],
     };
   },
   created() {
@@ -217,7 +255,13 @@ export default {
         console.log(val);
       }
     },
+    //更改处理状态
+    statechange() {
+      // this.pageSize = 20;
+      // this.page = 1;
+    },
     onSubmit() {
+      this.page = 1;
       console.log(this.formdata);
       //开始时间和结束时间
       this.formdata.starttime = this.$moment(this.formdata.starttime).format(
@@ -231,6 +275,7 @@ export default {
       params.endTime = this.formdata.endtime;
       params.pageSize = this.pageSize;
       params.pageNum = this.page;
+      params.state = this.formdata.stateVal;
       console.log(params);
       this.getwarnList(params);
     },
@@ -247,6 +292,7 @@ export default {
       );
       params.pageSize = this.pageSize;
       params.pageNum = this.page;
+      params.state = this.formdata.stateVal;
       console.log(params);
       this.getwarnList(params);
     },
@@ -263,6 +309,7 @@ export default {
       );
       params.pageSize = this.pageSize;
       params.pageNum = this.page;
+      params.state = this.formdata.stateVal;
       console.log(params);
       this.getwarnList(params);
     },
@@ -317,6 +364,29 @@ export default {
           });
       }, 300);
     },
+    //一键处理
+    clearWarnAll() {
+      this.$confirm("此操作将一键处理所有告警, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        oneKeyUpdateStateApi()
+          .then((res) => {
+            console.log(res);
+            if (res.success) {
+              this.$message({
+                type: "success",
+                message: "一键处理告警成功!",
+              });
+              this.onSubmit();
+            }
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      });
+    },
   },
 };
 </script>

src/views/homePage/warnMessage/index.vue

@@ -132,7 +132,6 @@ export default {
 
   methods: {
     lookMore() {
-      delete this.params.state; // 这将彻底删除 state 属性
       this.params.startTime = this.starttime;
       this.params.endTime = this.endtime;
       this.params.pageSize = 20;
@@ -236,7 +235,7 @@ export default {
         font-size: 12px;
         text-align: center;
         &:first-child {
-          width: 12%;
+          width: 13%;
         }
         &:nth-child(2) {
           width: 15%;
@@ -281,7 +280,7 @@ export default {
           width: 100%;
           span {
             &:first-child {
-              width: 12%;
+              width: 13%;
             }
             &:nth-child(2) {
               width: 15%;

src/views/realTimeData/index.vue

@@ -1,66 +1,104 @@
 <template>
   <div class="realtimeData">
-    <div class="realHead">
-      <div class="greyBox">
-        <div class="selectBox">
-          <h4>选择区域</h4>
-          <el-radio-group
-            v-model="areaVal"
-            size="mini"
-            @input="handleAreaChange"
-          >
-            <el-radio
-              v-for="item in areaAllList"
-              :key="item.id"
-              :label="item.id"
-              border
-            >
-              {{ item.mc }}
-            </el-radio>
-          </el-radio-group>
-        </div>
-        <div class="selectBox">
-          <h4>选择主设备</h4>
-          <div class="zsbBox" v-if="zsbAllList.length !== 0">
-            <el-radio-group
-              v-model="zsbVal"
-              size="mini"
-              @input="handlezsbChange"
-            >
-              <el-radio
-                v-for="item in zsbAllList"
-                :key="item.id"
-                :label="item.id"
-                border
+    <div class="realcontain">
+      <div class="realHead">
+        <h3>{{ msgTitle }}</h3>
+        <el-button
+          @click="handleTypeDraw"
+          type="primary"
+          style="margin-left: 16px"
+        >
+          选择设备类型
+        </el-button>
+        <el-button
+          @click="handleAreaDraw"
+          type="primary"
+          style="margin-left: 16px"
+        >
+          选择区域和主设备
+        </el-button>
+
+        <el-button
+          v-if="msgTitle == '设备类型实时数据'"
+          @click="exporTypeData"
+          type="primary"
+          style="margin-left: 16px"
+        >
+          按设备类型导出
+        </el-button>
+        <el-button
+          v-else
+          @click="exporZsbData"
+          type="primary"
+          style="margin-left: 16px"
+        >
+          按主设备导出
+        </el-button>
+        <el-drawer title="选择条件" :visible.sync="typedrawer" direction="ttb">
+          <div class="greyBox">
+            <div class="selectBox">
+              <h4>选择设备类型</h4>
+              <el-radio-group
+                v-model="deviceTypeVal"
+                size="mini"
+                @input="handletypeChange"
               >
-                {{ item.mc }}
-              </el-radio>
-            </el-radio-group>
+                <el-radio
+                  v-for="item in deviceTypeList"
+                  :key="item.id"
+                  :label="item.id"
+                  border
+                >
+                  {{ item.mc }}
+                </el-radio>
+              </el-radio-group>
+            </div>
           </div>
-          <div class="zsbBox" v-else>
-            <p class="empytBox">暂无数据</p>
+        </el-drawer>
+        <el-drawer title="选择条件" :visible.sync="areadrawer" direction="ttb">
+          <div class="greyBox">
+            <div class="selectBox">
+              <h4>选择区域</h4>
+              <el-radio-group
+                v-model="areaVal"
+                size="mini"
+                @input="handleAreaChange"
+              >
+                <el-radio
+                  v-for="item in areaAllList"
+                  :key="item.id"
+                  :label="item.id"
+                  border
+                >
+                  {{ item.mc }}
+                </el-radio>
+              </el-radio-group>
+            </div>
+            <div class="selectBox">
+              <h4>选择主设备</h4>
+              <div class="zsbBox" v-if="zsbAllList.length !== 0">
+                <el-radio-group
+                  v-model="zsbVal"
+                  size="mini"
+                  @input="handlezsbChange"
+                >
+                  <el-radio
+                    v-for="item in zsbAllList"
+                    :key="item.id"
+                    :label="item.id"
+                    border
+                  >
+                    {{ item.mc }}
+                  </el-radio>
+                </el-radio-group>
+              </div>
+              <div class="zsbBox" v-else>
+                <p class="empytBox">暂无数据</p>
+              </div>
+            </div>
           </div>
-        </div>
-        <!-- <div class="selectBox">
-          <h4>选则监控设备</h4>
-          <el-radio-group
-            v-model="jksbVal"
-            size="small"
-            @change="handlejksbChange"
-          >
-            <el-radio
-              v-for="item in jksbAllList"
-              :key="item.id"
-              :label="item.id"
-              border
-            >
-              {{ item.name }}
-            </el-radio>
-          </el-radio-group>
-        </div> -->
+        </el-drawer>
       </div>
-    </div>
-    <div class="realcontain">
       <div class="loadingbox" v-loading="dataLoading">
         <div class="cardBox" v-if="jksbAllList.length !== 0">
           <el-card
@@ -69,7 +107,9 @@
             :key="index"
           >
             <div slot="header" class="clearfix">
-              <span class="headTitle" :title="item.name">{{ item.name }}</span>
+              <span class="headTitle" :title="item.name"
+                >{{ item.jgName }}/{{ item.zsbName }}/{{ item.name }}</span
+              >
               <el-button
                 style="float: right; padding: 3px 0"
                 type="text"
@@ -171,7 +211,8 @@ import {
   areaListAllApi,
   zsbListAllApi,
   monitoringListAllApi,
-  getDetailApi,
+  // getDetailApi,
+  modevtypeListAllApi,
 } from "@/utils/api/index";
 import historyDialog from "./components/historyDialog";
 export default {
@@ -179,14 +220,20 @@ export default {
   components: { historyDialog },
   data() {
     return {
+      msgTitle: "设备类型实时数据",
+      typedrawer: false,
+      areadrawer: false,
+      deviceTypeVal: null,
+      deviceTypeList: [], //设备类型
       areaVal: null,
-      areaAllList: [],
+      areaAllList: [], //区域
       zsbVal: null,
-      zsbAllList: [],
+      zsbAllList: [], //主设备
 
-      jksbAllList: [],
+      jksbAllList: [], //监控设备
       dataLoading: false,
       intervalId: null, // 用于保存 setInterval 的 ID
+      intervalIdType: null,
     };
   },
 
@@ -197,10 +244,99 @@ export default {
     this.$nextTick(() => {
       this.areaVal = JSON.parse(localStorage.getItem("areaVal"));
       this.zsbVal = JSON.parse(localStorage.getItem("zsbVal"));
-      this.getAreaAllList();
+      this.deviceTypeVal = JSON.parse(localStorage.getItem("deviceTypeVal"));
+      this.getdeviceTypeAll();
     });
   },
   methods: {
+    //选择设备类型
+    handleTypeDraw() {
+      this.typedrawer = true;
+      this.msgTitle = "设备类型实时数据";
+      this.getdeviceTypeAll();
+    },
+    //选择区域和主设备
+    handleAreaDraw() {
+      this.areadrawer = true;
+      this.msgTitle = "主设备实时数据";
+      this.getAreaAllList();
+    },
+    //获取所有的设备类型
+    getdeviceTypeAll() {
+      modevtypeListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.deviceTypeList = res.data;
+          // 尝试从 localStorage 获取 areaVal
+          const storeddeviceTypeVal = localStorage.getItem("deviceTypeVal");
+          if (storeddeviceTypeVal) {
+            // 如果 localStorage 中有 areaVal，则将其解析为数字（假设 id 是数字）并赋值给 this.areaVal
+            this.areaVal = JSON.parse(storeddeviceTypeVal);
+          } else {
+            // 否则，使用 res.data[0].id
+            this.deviceTypeVal = res.data[0]?.id; // 使用可选链操作符避免 res.data[0] 为 undefined 的情况
+
+            // 同时，将新获取的 areaVal 存储到 localStorage 中
+            localStorage.setItem(
+              "deviceTypeVal",
+              JSON.stringify(this.deviceTypeVal)
+            );
+          }
+          this.getTypeAllList();
+          this.startIntervalIfNeededType();
+          this.stopInterval();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handletypeChange(value) {
+      this.deviceTypeVal = value;
+      localStorage.removeItem("deviceTypeVal");
+      localStorage.setItem("deviceTypeVal", JSON.stringify(value));
+      this.jksbAllList = [];
+      this.getTypeAllList();
+      this.startIntervalIfNeededType();
+      this.stopInterval();
+    },
+    //根据类型获取所有数据
+    getTypeAllList() {
+      monitoringListAllApi({ typeId: this.deviceTypeVal })
+        .then((res) => {
+          console.log(res);
+          this.jksbAllList = res.data;
+          this.dataLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    startIntervalIfNeededType() {
+      // 如果定时器尚未启动，则启动它
+      if (this.intervalIdType === null) {
+        this.intervalIdType = setInterval(this.getTypeAllList, 10000);
+      }
+    },
+    stopIntervalType() {
+      // 停止定时器
+      if (this.intervalIdType !== null) {
+        clearInterval(this.intervalIdType);
+        this.intervalIdType = null;
+      }
+    },
+
+    //按照设备类型导出
+    exporTypeData() {
+      window.location.href =
+        "/cac-api/nsensor/exportLatest?typeId=" + this.deviceTypeVal;
+    },
+
+    //按照主设备导出
+    exporZsbData() {
+      window.location.href =
+        "/cac-api/nsensor/exportLatest?zsbid=" + this.zsbVal;
+    },
+
     //获取所有区间间隔
     getAreaAllList() {
       areaListAllApi()
@@ -254,9 +390,9 @@ export default {
           //  localStorage.setItem("zsbVal", JSON.stringify(res.data[0].id));
           // 调用 getjcsbAllList 方法获取监测设备列表
           this.getjcsbAllList();
-
           // 启动定时器（如果尚未启动）
           this.startIntervalIfNeeded();
+          this.stopIntervalType();
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -270,6 +406,8 @@ export default {
 
       // 启动定时器（如果尚未启动）
       this.startIntervalIfNeeded();
+
+      this.stopIntervalType();
     },
     //获取所有监测设备
     getjcsbAllList() {
@@ -309,6 +447,7 @@ export default {
   beforeDestroy() {
     // 在组件销毁前停止定时请求
     this.stopInterval();
+    this.stopIntervalType();
   },
 };
 </script>
@@ -318,21 +457,26 @@ export default {
   height: 100%;
   flex-direction: column;
   .realHead {
-    height: 200px;
-    background: rgba(8, 9, 36, 0.28);
-    box-shadow: inset 0 4px 44px 0 #106cde;
+    // height: 200px;
+    // background: rgba(8, 9, 36, 0.28);
+    // box-shadow: inset 0 4px 44px 0 #106cde;
     padding: 0px 12px;
-    margin-bottom: 20px;
+    margin: 10px 0px;
+    display: flex;
+    align-items: center;
+    .el-drawer__wrapper {
+      .el-drawer__header {
+        margin-bottom: 14px;
+      }
+    }
+    .el-drawer {
+      height: 50% !important;
+    }
     .greyBox {
-      background: rgba(8, 9, 36, 0.28);
-      -webkit-backdrop-filter: blur(10px);
-      backdrop-filter: blur(10px);
-      box-shadow: inset 0 4px 44px 0 #106cde;
-      color: #fff;
-      margin-top: 12px;
+      color: #000;
+      //margin-top: 12px;
       margin-bottom: 12px;
       padding: 8px 0px;
-
       height: calc(100% - 40px);
       .selectBox {
         display: flex;
@@ -340,7 +484,7 @@ export default {
         margin-bottom: 12px;
 
         h4 {
-          color: #fff;
+          color: #000;
           margin-right: 12px;
           font-weight: normal;
           width: 100px;
@@ -352,21 +496,21 @@ export default {
           display: flex;
           flex-wrap: wrap;
           flex: 1;
-          color: #fff;
+          color: #000;
           .el-radio {
             margin-bottom: 12px;
             margin-right: 12px;
-            color: #fff;
+            color: #000;
           }
           .el-radio.is-bordered.is-checked {
-            border-color: #66e6ff;
+            border-color: #337ab7;
           }
           .el-radio__input.is-checked + .el-radio__label {
-            color: #66e6ff;
+            color: #337ab7;
           }
           .el-radio__input.is-checked .el-radio__inner {
-            border-color: #66e6ff;
-            background: #66e6ff;
+            border-color: #337ab7;
+            background: #337ab7;
           }
         }
         .zsbBox {
@@ -385,13 +529,14 @@ export default {
     }
   }
   .realcontain {
-    height: calc(100% - 220px);
+    height: calc(100% - 0px);
     background: rgba(8, 9, 36, 0.28);
     box-shadow: inset 0 4px 44px 0 #106cde;
     padding: 0px 12px;
-    overflow: auto;
+
     .loadingbox {
-      height: 100%;
+      height: calc(100% - 64px);
+      overflow: auto;
     }
     .cardBox {
       display: flex;
@@ -406,14 +551,15 @@ export default {
         backdrop-filter: blur(10px);
         box-shadow: inset 0 4px 44px 0 #106cde;
         color: #fff;
-        width: 280px;
+        width: 346px;
         border: 1px solid #66e6ff;
         .el-card__header {
           padding: 4px 8px;
           border-bottom: 1px solid #66e6ff;
           .headTitle {
             font-weight: bold;
-            width: 180px;
+            width: 250px;
+            font-size: 14px;
             display: inline-block;
             overflow: hidden; /*超出部分隐藏*/
             text-overflow: ellipsis; /*超出部分省略号表示*/