合并

src/utils/api/index.js

@@ -90,6 +90,14 @@ export function getAlarmList(data) {
     data,
   });
 }
+//已读未读
+export function readAlarm(data) {
+  return request({
+    url: "/api/readAlarm",
+    method: "post",
+    data,
+  });
+}
 
 //历史图片
 //获取电压-线路-杆塔等信息

src/views/alarmHandling/index.vue

@@ -57,6 +57,7 @@
           </el-form-item>
         </el-form>
       </div>
+
       <div class="alarmContain" v-loading="loading">
         <div class="alarmTable">
           <el-table
@@ -84,6 +85,7 @@
               :formatter="dateFormat"
             >
             </el-table-column>
+
             <!-- <el-table-column
               prop="dyLevel"
               label="电压等级"
@@ -101,14 +103,14 @@
             <el-table-column
               prop="towerName"
               label="杆塔名称"
-              min-width="115"
+              min-width="145"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
             <el-table-column
               prop="displayName"
               label="设备名称"
-              min-width="95"
+              min-width="145"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
@@ -140,8 +142,8 @@
             </el-table-column>
             <el-table-column label="是否已读" min-width="95" fixed="right">
               <template slot-scope="scope">
-                <span v-if="scope.row.isread == 0">未读</span>
-                <span v-if="scope.row.isread == 1">已读</span>
+                <span v-if="scope.row.isread == 1" class="readbox">[已读]</span>
+                <span v-if="scope.row.isread == 0">[未读]</span>
               </template>
             </el-table-column>
           </el-table>
@@ -158,7 +160,9 @@
           </div>
         </div>
         <div class="alarmPic">
-          <div class="imgshow"><img :src="photoPic" /></div>
+          <div class="imgshow" @click="handleBigPicbox(photoPic)">
+            <img :src="photoPic" />
+          </div>
           <div class="editorBtn">
             <!-- <el-button type="primary" :loading="btnpicloading" @click="handleCommandpic">主动拍照</el-button> -->
             <el-button type="primary">历史图片</el-button>
@@ -166,11 +170,24 @@
         </div>
       </div>
     </div>
+    <!-- 点击出现大图 -->
+    <div v-if="showBigpic" class="showPic" @click="closePic">
+      <div class="picboxI">
+        <img class="maskPic" :src="photoPic" />
+        <i @click="closePic" class="el-icon-circle-close"></i>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { getSearchInfo, getAlarmList, getLatestPhotoJoggle, getReturnedPhotoJoggle } from "@/utils/api/index";
+import {
+  getSearchInfo,
+  getAlarmList,
+  getLatestPhotoJoggle,
+  getReturnedPhotoJoggle,
+  readAlarm,
+} from "@/utils/api/index";
 import moment from "moment";
 export default {
   data() {
@@ -195,7 +212,9 @@ export default {
       loading: false,
       btnpicloading: false,
       timer: null,
-      i:0
+      i: 0,
+      isreadshow: false,
+      showBigpic: false,
     };
   },
   mounted() {
@@ -208,6 +227,12 @@ export default {
     this.getSearchgj();
   },
   methods: {
+    handleBigPicbox() {
+      this.showBigpic = true;
+    },
+    closePic() {
+      this.showBigpic = false;
+    },
     //获取电压信息
     getSearchdy() {
       getSearchInfo({ type: 1 })
@@ -289,22 +314,34 @@ export default {
       console.log(row);
       this.photoPic = row.path;
       //未读变已读
+      if (row.isread == 0) {
+        readAlarm({
+          id: row.id,
+        })
+          .then((res) => {
+            console.log(res);
+            row.isread = 1;
+            console.log(row.isread);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
     },
     //手动拍照
     handleCommandpic() {
       this.btnpicloading = true;
-      getLatestPhotoJoggle({})
-        .then((res) => {
-          this.$message({
-            showClose: true,
-            message: "手动拍照请求成功！",
-            type: "success",
-          });
-          this.timer = window.setInterval(() => {
-            this.newPicApi();
-            this.i++;
-          }, 5000);
-        })
+      getLatestPhotoJoggle({}).then((res) => {
+        this.$message({
+          showClose: true,
+          message: "手动拍照请求成功！",
+          type: "success",
+        });
+        this.timer = window.setInterval(() => {
+          this.newPicApi();
+          this.i++;
+        }, 5000);
+      });
     },
     //获取最新图片
     newPicApi() {
@@ -344,6 +381,45 @@ export default {
   height: calc(100% - 32px);
   padding: 16px 16px;
   background: #ffffff;
+  .showPic {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 50%);
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+    display: flex;
+    cursor: pointer;
+    .picboxI {
+      position: relative;
+      max-width: 1280px;
+      max-height: 720px;
+      margin: auto;
+      animation-name: scaleDraw;
+      /*关键帧名称*/
+      animation-timing-function: ease;
+      /*动画的速度曲线*/
+      animation-iteration-count: 1;
+      /*动画播放的次数*/
+      animation-duration: 0.65s;
+
+      img {
+        max-width: 1366px;
+        max-height: 768px;
+        margin: auto;
+      }
+      .el-icon-circle-close {
+        position: absolute;
+        right: -10px;
+        font-size: 48px;
+        color: #fff;
+        cursor: pointer;
+        top: -24px;
+      }
+    }
+  }
   .searchMain {
     border: 1px solid #dddddd;
     height: calc(100% - 34px);
@@ -386,6 +462,9 @@ export default {
       .el-table__body tr.current-row > td {
         background-color: rgba(18, 128, 113, 0.2);
       }
+      .readbox {
+        color: #e49e61;
+      }
     }
     .pageNation {
       margin-top: 8px;
@@ -400,6 +479,7 @@ export default {
       .imgshow {
         width: 100%;
         height: 100%;
+
         img {
           width: 100%;
           height: 100%;

src/views/pictureRotation/index.vue

@@ -21,7 +21,7 @@
         <el-button type="primary" @click="setbtn">设置</el-button>
       </div>
     </div>
-    <div class="imageCenter" v-loading="loading">
+    <div class="imageCenter" v-loading="loading" v-cloak>
       <div class="imgList" v-for="(item, index) in picList" :key="index">
         <viewer
           :options="OptionssalseImg"
@@ -368,4 +368,7 @@ export default {
     }
   }
 }
+[v-cloak] {
+  display: none;
+}
 </style>

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的