已读

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
@@ -141,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 || isreadshow">未读</span>
-                <span v-if="scope.row.isread == 1 || isreadshow">已读</span>
+                <span v-if="scope.row.isread == 1">[已读]</span>
+                <span v-if="scope.row.isread == 0">[未读]</span>
               </template>
             </el-table-column>
           </el-table>
@@ -159,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">主动拍照</el-button>
             <el-button type="primary">历史图片</el-button>
@@ -167,6 +170,12 @@
         </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>
 
@@ -195,6 +204,7 @@ export default {
       total: 0, //总条数
       loading: false,
       isreadshow: false,
+      showBigpic: false,
     };
   },
   mounted() {
@@ -207,6 +217,12 @@ export default {
     this.getSearchgj();
   },
   methods: {
+    handleBigPicbox() {
+      this.showBigpic = true;
+    },
+    closePic() {
+      this.showBigpic = false;
+    },
     //获取电压信息
     getSearchdy() {
       getSearchInfo({ type: 1 })
@@ -288,15 +304,19 @@ export default {
       console.log(row);
       this.photoPic = row.path;
       //未读变已读
-      readAlarm({
-        id: row.id,
-      })
-        .then((res) => {
-          console.log(res);
+      if (row.isread == 0) {
+        readAlarm({
+          id: row.id,
         })
-        .catch((err) => {
-          console.log(err);
-        });
+          .then((res) => {
+            console.log(res);
+            row.isread = 1;
+            console.log(row.isread);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
     },
     dateFormat(row, column) {
       var date = row[column.property];
@@ -314,6 +334,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);
@@ -370,6 +429,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

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