告警处理优化

src/assets/fonts/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1690177575312') format('truetype');
+  src: url('iconfont.ttf?t=1690188947515') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-paizhao:before {
+  content: "\e6ba";
+}
+
+.icon-paizhao-xianxing:before {
+  content: "\e8d1";
+}
+
+.icon-tuiguanglishitupianjinqun:before {
+  content: "\e613";
+}
+
 .icon-gongsi:before {
   content: "\e62e";
 }
@@ -35,7 +47,15 @@
   content: "\ef1c";
 }
 
+.icon-shexiangtou-zaixian:before {
+  content: "\ef1d";
+}
+
 .icon-shudianxianlu_2722010801:before {
   content: "\efed";
 }
 
+.icon-tupian_normal:before {
+  content: "\e681";
+}
+

src/views/alarmHandling/index.vue

@@ -37,6 +37,16 @@
               ></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="通道">
+            <el-select v-model="formdata.channel">
+              <el-option
+                v-for="item in tdOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item label="开始日期">
             <!-- <el-date-picker
               v-model="formdata.timeVal"
@@ -208,18 +218,6 @@
               v-if="selectRow.path !== '' && tableData.length !== 0"
             >
               <!-- v-viewer="OptionssalseImg" -->
-              <!-- <div
-                class="nosee"
-                :style="'backgroundImage:url(' + photoPic + '!1366x768)'"
-              ></div>
-              <viewer :options="OptionssalseImg" class="bigimgView">
-                <img
-                  @load="imgOnload"
-                  ref="picJpg"
-                  class="animImg"
-                  :src="photoPic + '!1366x768'"
-                />
-              </viewer> -->
               <img
                 ref="picJpg"
                 class="animImg"
@@ -253,55 +251,67 @@
       </div>
       <div class="pictureBox" v-else v-loading="loading">
         <div class="piclist" v-if="tableData.length !== 0">
-          <el-card
+          <div
             class="box-card imgList"
             v-for="(item, index) in tableData"
             :key="index"
             :class="current === index ? 'bgColor' : ''"
           >
             <div class="bigpic">
+              <div class="toolsBtn">
+                <el-button
+                  title="主动拍照"
+                  type="primary"
+                  icon="el-icon-camera"
+                  @click.stop="handlePicList(item)"
+                ></el-button>
+                <el-button
+                  title="历史图片"
+                  type="primary"
+                  icon="el-icon-picture-outline"
+                  @click.stop="handlePicHistory(item)"
+                ></el-button>
+                <!-- <el-button
+                  type="primary"
+                  :loading="btnpicloading"
+                  @click.stop="handlePicList(item)"
+                  >主动拍照</el-button
+                >
+                <el-button type="primary" @click.stop="handlePicHistory(item)"
+                  >历史图片</el-button
+                > -->
+              </div>
               <div class="picshow" @click="handlePicAlarm(item, index)">
                 <img :src="item.path + '!1366x768'" ref="picJpg" />
-                <!-- <canvas
-                  id="myCanvas"
-                  class="myCanvas"
-                  :ref="'myCanvas' + index"
-                ></canvas> -->
               </div>
-
               <div class="caption">
                 <p class="infoTop">
-                  {{ item.lineName }} /
+                  <span v-if="item.isread == 1" class="readbox">[已读]</span>
-                  {{
+                  <span v-if="item.isread == 0">[未读]</span>
-                    item.displayName !== null && item.displayName !== ""
+                  <span>
-                      ? item.displayName
+                    {{ item.lineName }} /
-                      : item.cmdid
+                    {{
-                  }}
+                      item.displayName !== null && item.displayName !== ""
-                  /
+                        ? item.displayName
-                  {{
+                        : item.cmdid
-                    item.alias !== null && item.alias !== ""
+                    }}
-                      ? item.alias
+                    /
-                      : item.channnelName
+                    {{
-                  }}
+                      item.alias !== null && item.alias !== ""
-                  / 告警原因：<span class="alarmInfo">({{ item.enname }})</span>
+                        ? item.alias
+                        : item.channnelName
+                    }}
+                  </span>
                 </p>
                 <p class="infoBottom">
-                  告警时间：{{
+                  <span>{{
                     $moment(item.alarmTime).format("YYYY-MM-DD HH:mm:ss")
-                  }}
+                  }}</span>
-                  <el-button
+                  <span class="alarmInfo">({{ item.enname }})</span>
-                    type="primary"
-                    :loading="btnpicloading"
-                    @click.stop="handlePicList(item)"
-                    >主动拍照</el-button
-                  >
-                  <el-button type="primary" @click.stop="handlePicHistory(item)"
-                    >历史图片</el-button
-                  >
                 </p>
               </div>
             </div>
-          </el-card>
+          </div>
         </div>
         <div class="piclist" v-else>
           <el-empty description="暂无数据"></el-empty>
@@ -372,8 +382,10 @@ export default {
       dyOptions: [{ id: -1, name: "全部" }], //电压数据
       xlOptions: [{ id: -1, name: "全部" }], //线路数据
       gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
       gjOptions: [{ id: -1, label: -1, name: "全部" }], //告警数据
       formdata: {
+        channel: 1,
         dyId: -1,
         lineId: -1,
         towerId: -1,
@@ -548,9 +560,14 @@ export default {
         .then((res) => {
           this.gjOptions = [{ id: -1, label: -1, name: "全部" }];
           this.gjOptions = this.gjOptions.concat(res.data.list);
+          this.tdOptions = [{ id: -1, name: "全部", alias: null }];
+          this.tdOptions = this.tdOptions.concat(res.data.channellist);
+          console.log(this.tdOptions);
           console.log(this.gjOptions);
           this.formdata.label = this.gjOptions[0].label;
+          this.formdata.channel = this.tdOptions[1].id;
           console.log(this.formdata.label);
+          console.log(this.formdata.channel);
         })
         .catch((err) => {});
     },
@@ -822,9 +839,9 @@ export default {
               console.log(this.requestId);
               this.btnpicloading = true;
               this.statusTimer = window.setInterval(() => {
-                this.getTakePicStatus(this.requestId);
+                this.getTakePicStatus(res.data);
                 this.statusNum++;
-              }, 2000);
+              }, 3000);
             })
             .catch((err) => {
               console.log(err); //代码错误、请求失败捕获
@@ -843,12 +860,18 @@ export default {
     getTakePicStatus(data) {
       console.log(data);
       getTakePicStatusJoggle({
-        requestid: data,
+        requestid: data.requestId,
+        termId: this.selectRow.termId,
+        photoTime: new Date(data.taketime).getTime(),
       })
         .then((res) => {
           console.log(res);
           //res.data  0 状态未知  1 成功 2失败
-          if (res.data == 0 && this.statusNum >= 5) {
+          if (
+            res.data.cmaStatus == 0 &&
+            res.data.picStatus == false &&
+            this.statusNum >= 5
+          ) {
             this.statusNum = 0;
             clearInterval(this.statusTimer);
             this.statusTimer = null;
@@ -860,16 +883,16 @@ export default {
               message: "下发指令超时，请重试！",
               type: "warning",
             });
-          } else if (res.data == 1) {
+          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
-            this.statusNum = 0;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
             this.$message({
               duration: 1500,
               showClose: true,
               message: "下发指令成功！",
               type: "success",
             });
+            this.statusNum = 0;
+            clearInterval(this.statusTimer);
+            this.statusTimer = null;
             this.timer = window.setInterval(() => {
               this.newPicApi();
               this.i++;
@@ -895,6 +918,7 @@ export default {
       getTakePicPhotoStatusJoggle({
         photoTime: new Date(this.picTime).getTime(),
         termId: this.selectRow.termId,
+        requestid: this.requestId,
       }).then((res) => {
         console.log(res.data);
         if (res.data == true && this.i < 10) {
@@ -957,11 +981,26 @@ export default {
         console.log(val);
         this.bigPhotoPic = val.path;
         this.showBigpic = true;
-
         this.$nextTick(() => {
           console.log("huatu");
           this.drawlineList(val, index);
         });
+        //未读变已读
+        if (val.isread == 0) {
+          setTimeout(function () {
+            readAlarm({
+              id: val.id,
+            })
+              .then((res) => {
+                console.log(res);
+                val.isread = 1;
+                console.log(val.isread);
+              })
+              .catch((err) => {
+                console.log(err);
+              });
+          }, 300);
+        }
       }
     },
     dateFormat(row, column) {
@@ -1096,7 +1135,7 @@ export default {
         background-color: rgba(18, 128, 113, 0.2);
       }
       .readbox {
-        color: #e49e61;
+        color: #169e8c;
       }
     }
     .pageNation {
@@ -1166,34 +1205,36 @@ export default {
       margin: auto;
     }
     .piclist {
-      display: flex;
+      // display: flex;
-      // justify-content: space-around;
+      // // justify-content: space-around;
-      flex-wrap: wrap;
+      // flex-wrap: wrap;
       overflow: auto;
       border: 1px solid #eee;
       height: calc(100% - 2px);
     }
     .imgList {
-      width: calc((100% - 104px) / 3);
+      width: calc((100% - 40px) / 4);
       position: relative;
       display: inline-block;
-      margin: 8px;
+      margin: 2px;
       position: relative;
-      padding: 4px;
       border-radius: 3px;
       background: #fff;
-      height: fit-content;
+      height: 30%;
-      //height: auto;
       border: 2px solid transparent;
-      .el-card__body {
-        padding: 0px;
-      }
       .bigpic {
         width: 100%;
         height: 100%;
         background-size: 100% 100%;
+        position: relative;
         .picshow {
           position: relative;
+          height: 100%;
+          img {
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+          }
           .myCanvas {
             position: absolute;
             width: 100%;
@@ -1204,48 +1245,65 @@ export default {
             pointer-events: none;
           }
         }
-      }
+        .caption {
-      img {
+          padding: 6px;
-        cursor: pointer;
+          color: #fff;
-        width: 100%;
+          position: absolute;
-        height: 250px;
+          left: 0;
-        object-fit: fill;
+          bottom: 0px;
-      }
+          background: rgba(0, 0, 0, 0.5);
-
+          width: calc(100% - 12px);
-      .caption {
+          .alarmInfo {
-        padding: 9px;
+            color: #fff;
-        color: #333;
-        .alarmInfo {
-          color: #e49e61;
-        }
-        .infoTop {
-          font-size: 14px;
-          color: #000;
-          font-weight: normal;
-          margin-top: 2px;
-          padding-left: 5px;
-          padding-right: 5px;
-        }
-        .infoBottom {
-          color: #000;
-          font-size: 12px;
-          font-weight: normal;
-          margin-top: 6px;
-          padding-left: 5px;
-          padding-right: 5px;
-          .el-button--small {
-            margin-left: 24px;
-            padding: 4px;
-            width: 78px;
           }
-          .el-button + .el-button {
+          .infoTop {
-            margin-left: 10px;
+            font-size: 14px;
+            color: #fff;
+            font-weight: normal;
+            margin-top: 2px;
+            padding-left: 5px;
+            padding-right: 5px;
+            .readbox {
+              color: #169e8c;
+            }
+          }
+          .infoBottom {
+            color: #fff;
+            font-size: 12px;
+            font-weight: normal;
+            margin-top: 6px;
+            padding-left: 5px;
+            padding-right: 5px;
+            display: flex;
+            justify-content: space-between;
+            .el-button--small {
+              margin-left: 24px;
+              padding: 4px;
+              width: 78px;
+            }
+            .el-button + .el-button {
+              margin-left: 10px;
+            }
+          }
+        }
+        .toolsBtn {
+          position: absolute;
+          right: 4px;
+          top: 4px;
+          z-index: 2;
+          .el-button {
+            width: auto;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid transparent;
+            color: #fff;
+            font-size: 20px;
+            padding: 2px;
           }
         }
       }
     }
     .bgColor {
-      border: 2px solid #e49e61;
+      border: 2px solid #169e8c;
     }
   }
 }

src/views/stritl/index.vue

@@ -298,6 +298,7 @@ export default {
           // title: {
           //   text: "装置在线统计",
           // },
+          color: ["#169e8c", "#bbb"],
           tooltip: {
             trigger: "item",
           },