告警

src/views/alarmHandling/index.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="alarmHandBox">
     <div class="searchMain">
-      <!-- <div class="alarmButtonGroup">
-        <el-button type="primary">查询</el-button>
-        <el-button type="primary">今日告警</el-button>
-        <el-button type="primary">最近三日告警</el-button>
-        <el-button type="primary">最近一周告警</el-button>
-        <el-button type="primary">批量处理</el-button>
-        <el-button type="primary">查看详情</el-button>
-        <el-button type="primary">导出</el-button>
-        <el-button type="primary">导出处理结果</el-button>
-        <el-button type="primary">导出图片</el-button>
-        <el-button type="primary">手动刷新</el-button>
-      </div> -->
       <div class="searchBox">
         <el-form :inline="true" :model="formdata" class="demo-form-inline">
           <el-form-item label="电压等级">
@@ -36,7 +24,7 @@
             </el-select>
           </el-form-item>
           <el-form-item label="杆塔名称">
-            <el-select v-model="formdata.towerId" >
+            <el-select v-model="formdata.towerId">
               <el-option
                 v-for="item in gtOptions"
                 :key="item.id"
@@ -55,7 +43,7 @@
             ></el-date-picker>
           </el-form-item>
           <el-form-item label="告警原因">
-            <el-select v-model="formdata.warnCause" >
+            <el-select v-model="formdata.warnCause">
               <el-option
                 v-for="item in gjOptions"
                 :key="item.id"
@@ -69,7 +57,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <div class="alarmContain">
+      <div class="alarmContain" v-loading="loading">
         <div class="alarmTable">
           <el-table
             ref="multipleTable"
@@ -81,6 +69,7 @@
             @selection-change="handleSelectionChange"
             height="calc(100% - 40px)"
             @row-click="handleRowClick"
+            highlight-current-row
           >
             <el-table-column min-width="45" label="序号">
               <template slot-scope="scope">
@@ -95,13 +84,13 @@
               :formatter="dateFormat"
             >
             </el-table-column>
-            <el-table-column 
-              prop="dyLevel" 
-              label="电压等级" 
+            <!-- <el-table-column
+              prop="dyLevel"
+              label="电压等级"
               min-width="75"
               :show-overflow-tooltip="true"
             >
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column
               prop="lineName"
               label="线路名称"
@@ -117,35 +106,42 @@
             >
             </el-table-column>
             <el-table-column
-              prop="orientationName"
+              prop="displayName"
               label="设备名称"
               min-width="95"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
             <el-table-column
+              label="通道名称"
+              min-width="75"
+              :show-overflow-tooltip="true"
+            >
+              <template slot-scope="scope">{{
+                scope.row.alias !== null && scope.row.alias !== ""
+                  ? scope.row.alias
+                  : scope.row.channnelName
+              }}</template>
+            </el-table-column>
+            <!-- <el-table-column
               prop="termId"
               label="设备编号"
               min-width="75"
               :show-overflow-tooltip="true"
             >
-            </el-table-column>
+            </el-table-column> -->
+
             <el-table-column
-              prop="name"
+              prop="enname"
               label="告警原因"
               min-width="155"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
-            <el-table-column
-              prop="status"
-              label="是否已读"
-              min-width="95"
-              fixed="right"
-            >
+            <el-table-column label="是否已读" min-width="95" fixed="right">
               <template slot-scope="scope">
-                <span v-if="scope.row.status == 0">未读</span>
-                <span v-if="scope.row.status == 1">已读</span>
+                <span v-if="scope.row.isread == 0">未读</span>
+                <span v-if="scope.row.isread == 1">已读</span>
               </template>
             </el-table-column>
           </el-table>
@@ -164,11 +160,6 @@
         <div class="alarmPic">
           <div class="imgshow"><img :src="photoPic" /></div>
           <div class="editorBtn">
-            <!-- <el-button type="primary">处理</el-button>
-            <el-button type="primary">查看操作详情</el-button>
-            <el-button type="primary">设置非警告区域</el-button>
-            <el-button type="primary">转向GT</el-button>
-            <el-button type="primary">复制</el-button> -->
             <el-button type="primary">主动拍照</el-button>
             <el-button type="primary">历史图片</el-button>
           </div>
@@ -184,15 +175,15 @@ import moment from "moment";
 export default {
   data() {
     return {
-      dyOptions: [{ id: 0, name: '全部'}], //电压数据
-      xlOptions: [{ id: 0, name: '全部'}], //线路数据
-      gtOptions: [{ id: 0, name: '全部'}], //杆塔数据
-      gjOptions: [{ id: 0, name: '全部'}], //告警数据
+      dyOptions: [{ id: 0, name: "全部" }], //电压数据
+      xlOptions: [{ id: 0, name: "全部" }], //线路数据
+      gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
+      gjOptions: [{ id: 0, name: "全部" }], //告警数据
       formdata: {
         dyId: "",
         lineId: "",
         towerId: "",
-        warnCause:'',
+        warnCause: "",
         timeVal: "",
       },
       photoPic: "",
@@ -201,6 +192,7 @@ export default {
       page: 1, // 当前页数
       pageSize: 20, // 每页数量
       total: 0, //总条数
+      loading: false,
     };
   },
   mounted() {
@@ -256,13 +248,17 @@ export default {
     },
     //获取数据
     getTableList() {
+      this.loading = true;
       this.$set(this.formdata, "pageindex", this.page);
       this.$set(this.formdata, "pagesize", this.pageSize);
+      this.$set(this.formdata, "starttime", this.formdata.timeVal[0]);
+      this.$set(this.formdata, "endtime", this.formdata.timeVal[1]);
       getAlarmList(this.formdata)
         .then((res) => {
+          this.loading = false;
           this.tableData = res.data.list;
           this.total = res.data.total;
-          // this.photoPic = "http://180.166.218.222:8104/media" + this.tableData[0].photoPath;
+          this.photoPic = res.data.list[0].path;
         })
         .catch((err) => {
           console.log(err);
@@ -270,7 +266,7 @@ export default {
     },
     //查询
     onSubmit() {
-      this.getTableList()
+      this.getTableList();
     },
     handleSelectionChange(val) {
       this.multipleSelection = val;
@@ -288,7 +284,7 @@ export default {
     handleRowClick(row) {
       //this.$refs.multipleTable.toggleRowSelection(row);
       console.log(row);
-      this.photoPic = "http://180.166.218.222:8104/media" + row.photoPath;
+      this.photoPic = row.path;
     },
     dateFormat(row, column) {
       var date = row[column.property];
@@ -297,7 +293,7 @@ export default {
       }
       return moment(date).format("YYYY-MM-DD HH:mm:ss");
     },
-  }
+  },
 };
 </script>
 <style lang="less">
@@ -308,8 +304,8 @@ export default {
   background: #ffffff;
   .searchMain {
     border: 1px solid #dddddd;
-    height: calc(100% - 62px);
-    max-height: calc(100% - 62px);
+    height: calc(100% - 34px);
+    max-height: calc(100% - 34px);
     padding: 16px;
     border-radius: 4px;
   }
@@ -323,9 +319,16 @@ export default {
     .alarmTable {
       width: 50%;
       height: 100%;
+      .el-table__body tr {
+        cursor: pointer;
+      }
+      .el-table__body tr.current-row > td {
+        background-color: rgba(18, 128, 113, 0.2);
+      }
     }
     .pageNation {
       margin-top: 8px;
+      justify-content: flex-start;
     }
     .alarmPic {
       width: 50%;

vue.config.js

@@ -29,7 +29,7 @@ module.exports = defineConfig({
       "/api": {
         //表示拦截以/api开头的请求路径
         target: "http://47.96.238.157:8093", //阿里云服务器环境
-        // target: "http://180.166.218.222:40080", //dell
+        //target: "http://180.166.218.222:40080", //dell
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的