告警信息查询

src/views/alarmHandling/index.vue

@@ -182,12 +182,34 @@
           </div>
         </div>
         <div class="alarmPic">
-          <div class="imgshow" @click="handleBigPicbox(selectRow)">
+          <div
+            class="imgshow"
+            v-loading="alarmLoading"
+            @click="handleBigPicbox(selectRow)"
+          >
+            <!-- @click="handleBigPicbox(selectRow)" -->
             <div
               class="picshow"
               v-if="selectRow.path !== '' && tableData.length !== 0"
             >
-              <img ref="picJpg" :src="photoPic" />
+              <!-- <div
+                class="nosee"
+                :style="'backgroundImage:url(' + photoPic + '!1280x720)'"
+              ></div>
+              <viewer :options="OptionssalseImg" class="bigimgView">
+                <img
+                  @load="imgOnload"
+                  ref="picJpg"
+                  class="animImg"
+                  :src="photoPic + '!1280x720'"
+                />
+              </viewer> -->
+              <img
+                @load="imgOnload"
+                ref="picJpg"
+                class="animImg"
+                :src="photoPic + '!1280x720'"
+              />
               <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
             </div>
             <img
@@ -215,11 +237,18 @@
       </div>
     </div>
     <!-- 点击出现大图 -->
-    <div v-if="showBigpic" class="showPic" @click="closePic">
+    <div
+      v-if="showBigpic"
+      class="showPic"
+      @click="closePic"
+      v-loading="canvasloading"
+    >
       <div class="picboxI">
-        <img class="maskPic" :src="bigPhotoPic" />
+        <img @load="imgOnload" class="maskPic" :src="bigPhotoPic" />
-        <!-- <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas> -->
+        <canvas id="myCanvas" class="myCanvas" ref="myCanvas2"></canvas>
-        <i @click="closePic" class="el-icon-circle-close"></i>
+      </div>
+      <div class="viewClose">
+        <i @click="closePic" class="el-icon-close"></i>
       </div>
     </div>
     <historyimg ref="historyimg_ref"></historyimg>
@@ -243,6 +272,16 @@ export default {
   },
   data() {
     return {
+      OptionssalseImg: {
+        inline: false,
+        button: true,
+        navbar: false,
+        title: false,
+        toolbar: false,
+        tooltip: false,
+        zoomable: true,
+        url: "src",
+      },
       dyOptions: [{ id: 0, name: "全部" }], //电压数据
       xlOptions: [{ id: 0, name: "全部" }], //线路数据
       gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
@@ -269,6 +308,8 @@ export default {
       textInfo: "",
       bigPhotoPic: "", //大图路径
       selectRow: {},
+      alarmLoading: false,
+      canvasloading: false,
     };
   },
   mounted() {
@@ -286,13 +327,18 @@ export default {
     this.getTableList();
   },
   methods: {
+    imgOnload() {
+      this.alarmLoading = false;
+      this.canvasloading = false;
+    },
     handleBigPicbox(val) {
-      if (val.path !== "" && tableData.length !== 0) {
+      this.canvasloading = true;
+      if (val.path !== "" && this.tableData.length !== 0) {
         console.log(val);
         this.bigPhotoPic = val.path;
         this.showBigpic = true;
         this.$nextTick(() => {
-          this.drawline(val);
+          this.drawline2(val);
         });
       }
     },
@@ -424,9 +470,42 @@ export default {
       this.ctx.closePath();
       this.ctx.stroke();
     },
+    //绘制告警区域
+    drawline2(data) {
+      this.canvas = this.$refs.myCanvas2;
+      this.imgpic = this.$refs.picJpg;
+      this.textInfo = data.enname;
+      this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
+      this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
+      this.ctx = this.canvas.getContext("2d");
+      this.ctx.beginPath();
+      //设置线条颜色，必须放在绘制之前
+      this.ctx.strokeStyle = "#ff0000";
+      // 线宽设置，必须放在绘制之前
+      this.ctx.lineWidth = 1;
+
+      // 绘制矩形
+      var scaleX = this.canvas.width / data.photoWidth, //this.iw图片的宽
+        scaleY = this.canvas.height / data.photoHeight; //this.ih图片的高
+      console.log(scaleX, scaleY);
+      var top = data.x * scaleX,
+        left = data.y * scaleY,
+        width = data.width * scaleX,
+        height = data.height * scaleY;
+      console.log(top, left, width, height);
+      // this.ctx.strokeStyle = "red"; //线的颜色
+      this.ctx.strokeRect(top, left, width, height); //绘制路径矩形
+      //this.ctx.strokeRect(data.x, data.y, data.width, data.height);
+      this.ctx.font = "24px normal";
+      this.ctx.fillStyle = "#ff0000";
+      this.ctx.fillText(this.textInfo, top, left + 24);
+      this.ctx.closePath();
+      this.ctx.stroke();
+    },
     //点击当前行
     handleRowClick(row) {
       //this.$refs.multipleTable.toggleRowSelection(row);
+      this.alarmLoading = true;
       console.log(row);
       this.photoPic = row.path;
       this.selectRow = row;
@@ -560,13 +639,25 @@ export default {
         height: 100%;
         cursor: pointer;
       }
-      .el-icon-circle-close {
+    }
+    .viewClose {
+      -webkit-app-region: no-drag;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      cursor: pointer;
+      height: 80px;
+      overflow: hidden;
+      position: absolute;
+      right: -40px;
+      top: -40px;
+      transition: background-color 0.15s;
+      width: 80px;
+      .el-icon-close {
+        bottom: 16px;
+        left: 16px;
         position: absolute;
-        right: -24px;
-        font-size: 48px;
         color: #fff;
-        cursor: pointer;
+        font-size: 18px;
-        top: -24px;
       }
     }
   }
@@ -639,6 +730,20 @@ export default {
           height: 100%;
           position: relative;
         }
+        .nosee {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-size: 100% 100%;
+          z-index: 2;
+        }
+        .bigimgView {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          z-index: 3;
+          opacity: 0;
+        }
         img {
           width: 100%;
           height: 100%;
@@ -650,6 +755,7 @@ export default {
           width: 100%;
           height: 100%;
           cursor: pointer;
+          z-index: 2;
         }
       }
       .editorBtn {

src/views/components/carouselChart.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="thumb-example">
     <div class="picTop">
+      <div class="bigimg" v-if="bigPicPath.indexOf('nopic') !== -1">
+        <img class="animImg" :src="bigPicPath" />
+      </div>
       <div
         class="bigimg"
         v-if="
@@ -8,17 +11,20 @@
           bigPicPath.indexOf('videos') == -1
         "
         :style="
-          bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!128x72)' : ''
+          bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!260x160)' : ''
         "
-        @click="handleBigPicbox(bigPicPath)"
       >
-        <img ref="picJpg" class="animImg" :src="bigPicPath" />
+        <!--  @click="handleBigPicbox(bigPicPath)"  -->
+        <div
+          class="nosee"
+          :style="'backgroundImage:url(' + bigPicPath + '!1280x720)'"
+        ></div>
+        <viewer :options="OptionssalseImg" class="bigimgView">
+          <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" />
+        </viewer>
 
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
-        <!-- <p class="mark">
+        <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" /> -->
-          {{ bigPicPath }}
-          <span>{{ this.activeSmall }}</span>
-        </p> -->
       </div>
       <div
         v-if="
@@ -44,9 +50,7 @@
           autoplay
         ></video>
       </div>
-      <div class="bigimg" v-else>
+
-        <img class="animImg" :src="bigPicPath" />
-      </div>
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -505,6 +509,20 @@ export default {
       justify-content: center;
       position: relative;
       background-size: 100% 100%;
+      .nosee {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-size: 100% 100%;
+        z-index: 2;
+      }
+      .bigimgView {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 3;
+        opacity: 0;
+      }
       .mark {
         position: absolute;
         bottom: 12px;
@@ -523,6 +541,7 @@ export default {
         width: 100%;
         height: 100%;
         cursor: pointer;
+        z-index: 2;
       }
     }
     img {

vue.config.js

@@ -28,11 +28,11 @@ module.exports = defineConfig({
     proxy: {
       "/api": {
         //表示拦截以/api开头的请求路径
-        target: "http://47.96.238.157:8093", //阿里云服务器环境
+        // 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的
+          "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
         },
       },
     },