实时监控添加图片列表展示

src/utils/api/index.js

@@ -507,14 +507,26 @@ export function setTermGPSJoggle(data) {
 }
 
 //手动拍照
-export function getLatestPhotoJoggle(data) {
+export function takePicJoggle(data) {
   return request({
-    url: "/api/getLatestPhoto",
+    url: "/api/takePic",
-    method: "post",
+    method: "get",
-    data,
+
+    params: data,
+    // data,
+    // headers: {
+    //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    // },
+  });
+}
+//手动拍 获取装置状态
+export function getTakePicStatusJoggle(data) {
+  return request({
+    url: "/api/getTakePicStatus",
+    method: "get",
+    params: data,
   });
 }
-
 //获取所有通道列表
 
 export function getAllChannelListJoggle(data) {
@@ -536,11 +548,11 @@ export function getAllTowerJoggle(data) {
 }
 
 //手动拍照获取最新图片
-export function getReturnedPhotoJoggle(data) {
+export function getTakePicPhotoStatusJoggle(data) {
   return request({
-    url: "/api/getReturnedPhoto",
+    url: "/api/getTakePicPhotoStatus",
-    method: "post",
+    method: "get",
-    data,
+    params: data,
   });
 }
 

src/views/alarmHandling/components/historyimg.vue

@@ -14,7 +14,16 @@
         indicator-position="none"
       >
         <el-carousel-item v-for="(item, index) in imglist" :key="index">
-          <el-image :src="item.path" fit="contain"></el-image>
+          <el-image
+            :src="item.path"
+            fit="contain"
+            v-if="item.mediaType == 0"
+          ></el-image>
+          <el-image
+            :src="item.thumb"
+            fit="contain"
+            v-if="item.mediaType == 1"
+          ></el-image>
         </el-carousel-item>
       </el-carousel>
     </div>

src/views/alarmHandling/index.vue

@@ -343,8 +343,12 @@ import {
   getSearchInfo,
   getAlarmList,
   getAlarmTypeList,
-  getLatestPhotoJoggle,
+  // getLatestPhotoJoggle,
-  getReturnedPhotoJoggle,
+  // getReturnedPhotoJoggle,
+  getTermStatus,
+  takePicJoggle,
+  getTakePicPhotoStatusJoggle,
+  getTakePicStatusJoggle,
   readAlarm,
 } from "@/utils/api/index";
 import historyimg from "./components/historyimg.vue";
@@ -398,6 +402,8 @@ export default {
       zoomD: 1,
       canvansdata: "",
       current: 0,
+      requestId: "", //请求拍照返回的requestid
+      picTime: "", //请求拍照返回的时间
     };
   },
   created() {
@@ -794,33 +800,100 @@ export default {
         this.imgOnload();
       });
     },
-    //手动拍照
+
+    //主动拍照
     handleCommandpic() {
-      this.btnpicloading = true;
+      getTermStatus({ termId: this.selectRow.termId }).then((res) => {
-      getLatestPhotoJoggle({
+        console.log(res);
+        if (res.data.isonline) {
+          takePicJoggle({
             captureType: 0,
             channel: this.selectRow.channelId,
             termId: this.selectRow.termId,
             preset: 255,
-      }).then((res) => {
+          })
+            .then((res) => {
+              console.log(res);
+              this.requestId = res.data.requestId; //获取requestid 判断装置是否下发
+              this.picTime = res.data.taketime; //获取时间 判断获取最新图片
+              console.log(this.requestId);
+              this.btnpicloading = true;
+              this.statusTimer = window.setInterval(() => {
+                this.getTakePicStatus(this.requestId);
+                this.statusNum++;
+              }, 2000);
+            })
+            .catch((err) => {
+              console.log(err); //代码错误、请求失败捕获
+            });
+        } else {
           this.$message({
             duration: 1500,
             showClose: true,
-          message: "手动拍照请求成功！",
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    //获取装置是否下发状态
+    getTakePicStatus(data) {
+      console.log(data);
+      getTakePicStatusJoggle({
+        requestid: data,
+      })
+        .then((res) => {
+          console.log(res);
+          //res.data  0 状态未知  1 成功 2失败
+          if (res.data == 0 && this.statusNum >= 5) {
+            this.statusNum = 0;
+            clearInterval(this.statusTimer);
+            this.statusTimer = null;
+            this.btnpicloading = false;
+            this.btnvideoloading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令超时，请重试！",
+              type: "warning",
+            });
+          } else if (res.data == 1) {
+            this.statusNum = 0;
+            clearInterval(this.statusTimer);
+            this.statusTimer = null;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令成功！",
               type: "success",
             });
             this.timer = window.setInterval(() => {
-          this.newPicApi(res.data);
+              this.newPicApi();
               this.i++;
-        }, 5000);
+            }, 8000);
+          } else if (res.data == 2) {
+            this.statusNum = 0;
+            clearInterval(this.statusTimer);
+            this.statusTimer = null;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令失败！",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
         });
     },
     //获取最新图片
-    newPicApi(val) {
+    newPicApi() {
-      getReturnedPhotoJoggle({
+      getTakePicPhotoStatusJoggle({
-        photoTime: val,
+        photoTime: new Date(this.picTime).getTime(),
         termId: this.selectRow.termId,
       }).then((res) => {
+        console.log(res.data);
         if (res.data == true && this.i < 10) {
           clearInterval(this.timer);
           this.timer = null;
@@ -846,6 +919,7 @@ export default {
         }
       });
     },
+
     //历史图片
     handleHistory() {
       this.$refs.historyimg_ref.display();

src/views/components/carouselChart.vue

@@ -22,13 +22,6 @@
         <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
         <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
       </div>
-      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
-        <img
-          class="animImg"
-          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
-        />
-      </div>
-
       <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
         <video
           width="100%"
@@ -39,6 +32,12 @@
           autoplay
         ></video>
       </div>
+      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
+        <img
+          class="animImg"
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
+        />
+      </div>
 
       <div
         v-if="
@@ -203,6 +202,7 @@ export default {
         url: "src",
       },
       isshowArrow: true, //判断是否显示切换按钮
+      mediaType: "", //判断图片类型是视频还是图片
       bigPicPath: "", //大图地址
       videopath: "",
       smallPicPath: "", //小图地址
@@ -226,6 +226,7 @@ export default {
   },
   mounted() {
     console.log(this.terminalPhoto);
+    this.mediaType = this.terminalPhoto[0].mediaType;
     this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
@@ -324,12 +325,14 @@ export default {
         (this.page - 1) * this.pagesize,
         this.page * this.pagesize
       );
+
       this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
       this.videopath = this.fiveList[this.activeSmall].thumb;
     },
     //大图点击左侧切换图片
     leftClick() {
       this.bigNum--; //执行下一张
+      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
       this.activeSmall--;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
@@ -356,6 +359,7 @@ export default {
     //点击右侧切换图片
     rightClick() {
       this.bigNum++; //执行下一张
+      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
       this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
@@ -383,6 +387,7 @@ export default {
       console.log(row);
       console.log();
       this.activeSmall = index;
+      this.mediaType = row.mediaType;
       this.bigPicPath = row.path + "!1366x768";
       getCoordinate({
         channelId: row.channelId,
@@ -460,7 +465,7 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 0px);
+  height: calc(100% - 32px);
   box-sizing: border-box;
 
   .showPic {

src/views/realTimeMonitor/components/infoDialog.vue

@@ -52,7 +52,7 @@
     </div>
     <div slot="footer" class="dialog-footer">
       <!-- <el-button @click="isShow = false">取 消</el-button> -->
-      <el-button type="primary" @click="isShow = false">确 定</el-button>
+      <el-button type="primary" @click="handleclose">确 定</el-button>
     </div>
   </el-dialog>
 </template>
@@ -147,6 +147,7 @@ export default {
       this.isShow = false;
     },
     handleclose() {
+      this.isShow = false;
       this.i = 0;
       clearInterval(this.timer);
       this.timer = null;

src/views/realTimeMonitor/picIndex.vue

@@ -375,7 +375,7 @@ export default {
             console.log(this.zzstatus);
             this.$nextTick(() => {
               this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-              this.channelId = this.currentNodekey;
+
               this.getChannelList(this.channelId); //获取通道id接口
             });
           }

src/views/realTimeMonitor/previewContain.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="previewContain">
+  <div class="previewContain" v-loading="previewLoading">
     <!-- {{ previewData }} -->
     <!-- {{ previewData.name }}______{{ previewData.id }} -->
     <div class="pictureBox">
@@ -14,24 +14,41 @@
           :key="'col-' + index"
           v-if="index < colNum * i && index >= colNum * (i - 1)"
         >
-          <div class="imgcloum">
+          <div class="imgcloum" @click="handleTowerPic(item)">
-            <!-- <img
+            <!-- 首先判断是否是图片mediatype=0,并且path不为空  展示图片 -->
-              src="http://180.166.218.222:40080/photos/2023/07/17/03/XYIGQ10C221000003_1_FF_20230717134007.jpg!1366x768"
+            <img
-            /> -->
+              :src="item.path + '!1366x768'"
-            <img :src="item.path + '!1366x768'" />
+              v-if="item.mediatype == 0 && item.path !== null"
+            />
+            <!-- 判断是否是视频mediatype=1,并且path不为空  展示图片 -->
+            <img
+              v-else-if="item.mediatype == 1 && item.thumb !== null"
+              :src="item.thumb + '!1366x768'"
+            />
+            <!-- 判断是否是视频mediatype=bull,并且path为空  展示暂无图片 -->
+            <img
+              v-else-if="item.mediatype == null"
+              src="../../assets/img/nodatapic2.jpg"
+            />
+            <div class="picInfo">
+              <p>
+                {{ item.linename }}-{{ item.towername }}-（{{
+                  item.alias !== null && item.alias !== ""
+                    ? item.alias
+                    : item.channnelname
+                }}）
+              </p>
+              <p class="timeinfo" v-if="item.mediatype !== null">
+                {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
+              </p>
+              <p class="timeinfo" v-else>无抓拍</p>
+            </div>
           </div>
         </el-col>
       </el-row>
     </div>
 
-    <div class="pageNation">
+    <div class="pageNation" v-if="picList.length !== 0">
-      <!-- <el-pagination
-        @current-change="handleCurrentChange"
-        :current-page="page"
-        layout=" prev, pager, next, jumper,total"
-        :total="total"
-      >
-      </el-pagination> -->
       <el-pagination
         @current-change="handleCurrentChange"
         :current-page="page"
@@ -45,6 +62,7 @@
 </template>
 <script>
 import { getTowerAndPhotoList } from "@/utils/api/index";
+
 export default {
   props: ["previewData"],
   data() {
@@ -58,22 +76,26 @@ export default {
       picList: [], //图片列表数据
       id: "",
       type: "",
+      previewLoading: false,
     };
   },
   mounted: function () {},
   methods: {
     //获取所有杆塔图片列表
-    getPicList(id, type) {
+    getPicList(id, type, page) {
       this.id = id;
       this.type = type;
+      this.page = page;
       console.log(id, type);
+      this.previewLoading = true;
       getTowerAndPhotoList({
         id: id,
         type: type,
-        pageindex: this.page,
+        pageindex: page,
         pagesize: this.rowNum * this.colNum,
       })
         .then((res) => {
+          this.previewLoading = false;
           console.log(res);
           this.picList = res.data.list;
           this.totalPage = res.data.totalpage;
@@ -83,11 +105,16 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    handleTowerPic(val) {
+      console.log(val);
+      this.$parent.jumpTowerPic(val);
+      console.log("调用父组件方法");
+    },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
       this.picList = [];
-      this.getPicList(this.id, this.type);
+      this.getPicList(this.id, this.type, this.page);
     },
   },
 };
@@ -104,19 +131,44 @@ export default {
     //background-color: aquamarine;
     .el-col {
       height: 100%;
-      padding-right: 0.1%;
+      padding-right: 0.3%;
-      padding-left: 0.1%;
+      padding-left: 0.3%;
-      padding-top: 0.1%;
+      padding-top: 0.3%;
-      padding-bottom: 0.1%;
+      padding-bottom: 0.3%;
+      border-radius: 4px;
+      overflow: hidden;
     }
     .imgcloum {
       width: 100%;
       height: 100%;
       //   background: #f00;
+      cursor: pointer;
+      position: relative;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      overflow: hidden;
+      &:hover {
+        border: 1px solid #169e8c;
+      }
       img {
         width: 100%;
         height: 100%;
       }
+      .picInfo {
+        position: absolute;
+        background: #169e8ca1;
+        color: #fff;
+        height: auto;
+        font-size: 14px;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        .timeinfo {
+          margin-top: 4px;
+          margin-bottom: 4px;
+        }
+      }
     }
   }
 }