首页，告警页面放大图片

src/views/alarmHandling/components/historyimg.vue

@@ -91,5 +91,12 @@ export default {
       height: 648px;
     }
   }
+  .el-carousel__arrow {
+    background: rgba(0, 0, 0, 0.5);
+    height: 40px;
+    width: 40px;
+    color: #169e8c;
+    font-size: 22px;
+  }
 }
 </style>

src/views/alarmHandling/index.vue

@@ -77,10 +77,15 @@
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
           </el-form-item>
+          <!-- <el-form-item>
+            <el-button type="primary" @click="handleListRow">{{
+              tableShow ? "图片列表" : "表格列表"
+            }}</el-button>
+          </el-form-item> -->
         </el-form>
       </div>
 
-      <div class="alarmContain" v-loading="loading">
+      <div class="alarmContain" v-loading="loading" v-if="tableShow">
         <div class="alarmTable">
           <el-table
             ref="multipleTable"
@@ -182,15 +187,12 @@
           </div>
         </div>
         <div class="alarmPic">
-          <div
+          <div class="imgshow" v-loading="alarmLoading">
-            class="imgshow"
-            v-loading="alarmLoading"
-            @click="handleBigPicbox(selectRow)"
-          >
             <!-- @click="handleBigPicbox(selectRow)" -->
             <div
               class="picshow"
               v-if="selectRow.path !== '' && tableData.length !== 0"
+              v-viewer="OptionssalseImg"
             >
               <!-- <div
                 class="nosee"
@@ -235,6 +237,72 @@
           </div>
         </div>
       </div>
+      <div class="pictureBox" v-else>
+        <div class="piclist" v-if="tableData.length !== 0">
+          <el-card
+            class="box-card imgList"
+            v-for="(item, index) in tableData"
+            :key="index"
+          >
+            <div class="bigpic">
+              <div class="picshow">
+                <img :src="item.path + '!1366x768'" :ref="'picJpg' + index" />
+                <canvas
+                  id="myCanvas"
+                  class="myCanvas"
+                  :ref="'myCanvas' + index"
+                ></canvas>
+              </div>
+
+              <div class="caption">
+                <p class="infoTop">
+                  {{ item.lineName }} /
+                  {{
+                    item.displayName !== null && item.displayName !== ""
+                      ? item.displayName
+                      : item.cmdid
+                  }}
+                  /
+                  {{
+                    item.alias !== null && item.alias !== ""
+                      ? item.alias
+                      : item.channnelName
+                  }}
+                  / 告警原因：<span class="alarmInfo">({{ item.enname }})</span>
+                </p>
+                <p class="infoBottom">
+                  告警时间：{{
+                    $moment(item.alarmTime).format("YYYY-MM-DD HH:mm:ss")
+                  }}
+                  <el-button
+                    type="primary"
+                    :loading="btnpicloading"
+                    @click="handlePicList(item)"
+                    >主动拍照</el-button
+                  >
+                  <el-button type="primary" @click="handlePicHistory(item)"
+                    >历史图片</el-button
+                  >
+                </p>
+              </div>
+            </div>
+          </el-card>
+        </div>
+        <div class="piclist" v-else>
+          <el-empty description="暂无数据"></el-empty>
+        </div>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            layout="sizes, prev, pager, next, jumper,total"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
     </div>
     <!-- 点击出现大图 -->
     <div
@@ -310,6 +378,7 @@ export default {
       selectRow: {},
       alarmLoading: false,
       canvasloading: false,
+      tableShow: true, //表格展示
     };
   },
   mounted() {
@@ -400,7 +469,7 @@ export default {
           this.photoPic = res.data.list[0].path;
           this.selectRow = res.data.list[0];
           console.log(this.selectRow);
-          // 别忘了标签上定义ref  这里的 myTable就说获取的标签上的ref命的名
+
           this.$refs.multipleTable.setCurrentRow(this.selectRow);
           this.handleRowClick(this.selectRow);
         })
@@ -454,13 +523,21 @@ export default {
         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);
+      console.log(top, left, width, height);
+      console.log(this.canvas.width, this.canvas.height);
+      //距离上面有空间
+      if (left > 32) {
+        this.ctx.fillText(this.textInfo, top, left - 14);
+      } else if (this.canvas.height - left + height > 32) {
+        this.ctx.fillText(this.textInfo, top, height - 14);
+      }
+
       this.ctx.closePath();
       this.ctx.stroke();
     },
@@ -583,6 +660,22 @@ export default {
       this.$refs.historyimg_ref.display();
       this.$refs.historyimg_ref.getdataform(this.selectRow);
     },
+    //切换图片
+    handleListRow() {
+      this.tableShow = !this.tableShow;
+    },
+
+    //在图片列表也执行  自动拍照和 查看历史图片
+    handlePicList(val) {
+      console.log(val);
+      this.selectRow = val;
+      this.handleCommandpic();
+    },
+    handlePicHistory(val) {
+      console.log(val);
+      this.selectRow = val;
+      this.handleHistory();
+    },
     dateFormat(row, column) {
       var date = row[column.property];
       if (date == undefined) {
@@ -640,6 +733,7 @@ export default {
         width: 100%;
         height: 100%;
         cursor: pointer;
+        pointer-events: none;
       }
     }
     .viewClose {
@@ -726,7 +820,6 @@ export default {
         width: 100%;
         height: 100%;
         position: relative;
-
         .picshow {
           width: 100%;
           height: 100%;
@@ -758,6 +851,7 @@ export default {
           height: 100%;
           cursor: pointer;
           z-index: 2;
+          pointer-events: none;
         }
       }
       .editorBtn {
@@ -772,5 +866,89 @@ export default {
       }
     }
   }
+  .pictureBox {
+    height: calc(100% - 90px);
+    max-height: calc(100% - 90px);
+    .el-empty {
+      margin: auto;
+    }
+    .piclist {
+      display: flex;
+      // justify-content: space-around;
+      flex-wrap: wrap;
+      overflow: auto;
+      border: 1px solid #eee;
+      height: calc(100% - 2px);
+    }
+    .imgList {
+      width: calc((100% - 104px) / 3);
+      position: relative;
+      display: inline-block;
+      margin: 8px;
+      position: relative;
+      padding: 4px;
+      border-radius: 3px;
+      background: #fff;
+      height: fit-content;
+      height: 320px;
+      .el-card__body {
+        padding: 0px;
+      }
+      .bigpic {
+        width: 100%;
+        height: 100%;
+        background-size: 100% 100%;
+        .picshow {
+          position: relative;
+          .myCanvas {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            left: 0;
+            top: 0;
+          }
+        }
+      }
+      img {
+        cursor: pointer;
+        width: 100%;
+        height: 250px;
+        object-fit: fill;
+      }
+
+      .caption {
+        padding: 9px;
+        color: #333;
+        .alarmInfo {
+          color: #e49e61;
+        }
+        .infoTop {
+          font-size: 16px;
+          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 {
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/views/components/carouselChart.vue

@@ -9,16 +9,15 @@
           bigPicPath.indexOf('videos') == -1
         "
         :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
-        @click="handleBigPicbox(bigPicPath)"
       >
         <!--  @click="handleBigPicbox(bigPicPath)"  -->
         <div
           class="nosee"
           :style="'backgroundImage:url(' + bigPicPath + ')'"
         ></div>
-        <viewer :options="OptionssalseImg" class="bigimgView">
+        <div class="bigimgView" v-viewer="OptionssalseImg">
           <img ref="picJpg" class="animImg" :src="bigPicPath" />
-        </viewer>
+        </div>
 
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
@@ -51,7 +50,13 @@
         @click="closePic"
       >
         <div class="picboxI">
-          <img class="maskPic" :src="bigPicPath" />
+          <img
+            class="maskPic"
+            :src="bigPicPath"
+            ref="bigImage"
+            width="100%"
+            height="100%"
+          />
         </div>
         <div class="viewClose">
           <i @click="closePic" class="el-icon-close"></i>
@@ -222,6 +227,7 @@ export default {
   mounted() {
     console.log(this.terminalPhoto);
     this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+    // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
     console.log(this.fiveList);
@@ -479,10 +485,11 @@ export default {
       animation-iteration-count: 1;
       /*动画播放的次数*/
       animation-duration: 0.65s;
-
+      overflow: hidden;
+      border: 2px solid #f00;
       img {
-        max-width: 1366px;
+        width: 100%;
-        max-height: 768px;
+        height: 100%;
         margin: auto;
       }
     }
@@ -712,5 +719,6 @@ export default {
     transform: scale(1);
   }
 }
+
 // https://v1.github.surmon.me/vue-awesome-swiper/
 </style>