Merge branch 'wp1.0' into fly

src/App.vue

@@ -4,12 +4,16 @@
   </div>
 </template>
 <script>
+import DevicePixelRatio from "./components/common/devicePixelRatio";
 export default {
   name: "App",
   data() {
     return {};
   },
   mounted() {},
+  created() {
+    //new DevicePixelRatio().init();
+  },
 };
 </script>
 

src/assets/css/element.less

@@ -72,3 +72,6 @@
 .el-select-dropdown {
   margin-top: 4px !important;
 }
+.el-link {
+  font-size: 12px;
+}

src/assets/fonts/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1683175912652') format('truetype');
+  src: url('iconfont.ttf?t=1690188947515') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-paizhao:before {
+  content: "\e6ba";
+}
+
+.icon-paizhao-xianxing:before {
+  content: "\e8d1";
+}
+
+.icon-tuiguanglishitupianjinqun:before {
+  content: "\e613";
+}
+
 .icon-gongsi:before {
   content: "\e62e";
 }
@@ -23,11 +35,27 @@
   content: "\e791";
 }
 
+.icon-shexiangtoulixian:before {
+  content: "\e7b2";
+}
+
 .icon-video-camera:before {
   content: "\e962";
 }
 
+.icon-shexiangtou-lixian:before {
+  content: "\ef1c";
+}
+
+.icon-shexiangtou-zaixian:before {
+  content: "\ef1d";
+}
+
 .icon-shudianxianlu_2722010801:before {
   content: "\efed";
 }
 
+.icon-tupian_normal:before {
+  content: "\e681";
+}
+

src/components/common/Sidebar.vue

@@ -51,13 +51,13 @@
 export default {
   data() {
     return {
-      activeIndex: "/realTimeMonitor",
+      activeIndex: "/stritl",
       items: [
-        // {
+        {
-        //   icon: "el-icon-s-home",
+          icon: "el-icon-s-home",
-        //   index: "/videoHistory",
+          index: "/stritl",
-        //   title: "首页",
+          title: "首页",
-        // },
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",
@@ -134,11 +134,11 @@ export default {
         },
       ],
       items1: [
-        // {
+        {
-        //   icon: "el-icon-s-home",
+          icon: "el-icon-s-home",
-        //   index: "stritl",
+          index: "stritl",
-        //   title: "首页",
+          title: "首页",
-        // },
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",
@@ -215,11 +215,11 @@ export default {
         },
       ],
       items2: [
-        // {
+        {
-        //   icon: "el-icon-s-home",
+          icon: "el-icon-s-home",
-        //   index: "stritl",
+          index: "stritl",
-        //   title: "首页",
+          title: "首页",
-        // },
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",

src/components/common/devicePixelRatio.js

@@ -0,0 +1,60 @@
+class DevicePixelRatio {
+  constructor() {
+    //this.flag = false;
+  }
+  //获取系统类型
+  _getSystem() {
+    let flag = false;
+    var agent = navigator.userAgent.toLowerCase();
+    //		var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+    //		if(isMac) {
+    //			return false;
+    //		}
+    //现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
+    if (agent.indexOf("windows") >= 0) {
+      return true;
+    }
+  }
+  //获取页面缩放比例
+  //	_getDevicePixelRatio() {
+  //		let t = this;
+  //	}
+  //监听方法兼容写法
+  _addHandler(element, type, handler) {
+    if (element.addEventListener) {
+      element.addEventListener(type, handler, false);
+    } else if (element.attachEvent) {
+      element.attachEvent("on" + type, handler);
+    } else {
+      element["on" + type] = handler;
+    }
+  }
+  //校正浏览器缩放比例
+  _correct() {
+    let t = this;
+    //页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
+    document.getElementsByTagName("body")[0].style.zoom =
+      1 / window.devicePixelRatio;
+  }
+  //监听页面缩放
+  _watch() {
+    let t = this;
+    t._addHandler(window, "resize", function () {
+      //注意这个方法是解决全局有两个window.resize
+      //重新校正
+      t._correct();
+    });
+  }
+  //初始化页面比例
+  init() {
+    let t = this;
+    if (t._getSystem()) {
+      //判断设备，目前只在windows系统下校正浏览器缩放比例
+      //初始化页面校正浏览器缩放比例
+      t._correct();
+      //开启监听页面缩放
+      t._watch();
+    }
+  }
+}
+export default DevicePixelRatio;

src/router/index.js

@@ -13,7 +13,7 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "home" */ "../components/common/Home.vue"),
     meta: { title: "首页" },
-    redirect: "/realTimeMonitor",
+    redirect: "/stritl",
     children: [
       {
         path: "/stritl",

src/utils/api/index.js

@@ -7,6 +7,40 @@ export function loginJoggle(data) {
     data,
   });
 }
+//获取装置总数图表
+export function getTermStatistics(data) {
+  return request({
+    url: "/api/getTermStatistics",
+    method: "get",
+    params: data,
+  });
+}
+//获取一周的装置告警
+
+export function getWeekAlarmStatistics(data) {
+  return request({
+    url: "/api/getWeekAlarmStatistics",
+    method: "get",
+    params: data,
+  });
+}
+//获取当天告警分类统计
+export function getTodayAlarmStatistics(data) {
+  return request({
+    url: "/api/getTodayAlarmStatistics",
+    method: "get",
+    params: data,
+  });
+}
+//获取所有杆塔下的图片列表，实时监控
+
+export function getTowerAndPhotoList(data) {
+  return request({
+    url: "/api/getTowerAndPhotoList",
+    method: "post",
+    data,
+  });
+}
 //声光报警
 export function alarmMarkJoggle(data) {
   return request({
@@ -20,8 +54,11 @@ export function alarmMarkJoggle(data) {
 export function getdyTreeListJoggle(data) {
   return request({
     url: "/api/getdyTreeList",
-    method: "post",
+    method: "get",
-    data,
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
   });
 }
 //获取图片接口
@@ -498,14 +535,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) {
@@ -527,11 +576,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,
   });
 }
 
@@ -706,7 +755,18 @@ export function updateMarkEnableStatus(data) {
     },
   });
 }
+//全局设置通道
 
+export function updateAlarmChannel(data) {
+  return request({
+    url: "/api/updateAlarmChannel",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
 ///api/getTermStatus
 export function getTermStatus(data) {
   return request({
@@ -718,3 +778,41 @@ export function getTermStatus(data) {
     },
   });
 }
+
+//导出数据
+
+export function getTerminalListExcel() {
+  return request({
+    url: "/api/getTerminalListExcel",
+    method: "post",
+    responseType: "blob",
+  });
+}
+
+//首页查看数据
+
+export function getOnlineTerminalList(data) {
+  return request({
+    url: "/api/getOnlineTerminalList",
+    method: "get",
+    params: data,
+  });
+}
+//导出数据
+export function getOnlineTerminalListExcel() {
+  return request({
+    url: "/api/getOnlineTerminalListExcel",
+    method: "post",
+    responseType: "blob",
+  });
+}
+
+//调节焦距
+
+export function updateTermCamera(data) {
+  return request({
+    url: "/api/updateTermCamera",
+    method: "get",
+    params: data,
+  });
+}

src/views/Login.vue

@@ -108,7 +108,7 @@ export default {
               if (res.code == 200) {
                 this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
                 this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
-                this.$router.push("/realTimeMonitor");
+                this.$router.push("/stritl");
 
                 this.$message({
                   duration: 1500,

src/views/alarmHandling/components/historyimg copy.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-dialog
+    title="历史图片"
+    :visible.sync="isShow"
+    class="historyPic"
+    width="1192px"
+    @close="handleclose"
+  >
+    <div v-loading="loadingpic">
+      <el-carousel
+        :loop="false"
+        :autoplay="false"
+        height="650px"
+        indicator-position="none"
+      >
+        <el-carousel-item v-for="(item, index) in imglist" :key="index">
+          <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>
+  </el-dialog>
+</template>
+<script>
+import { getHistoryList } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      isShow: false,
+      imglist: [],
+      page: 1, // 当前页数
+      pageSize: 10, // 每页数量
+      total: 0, //总条数
+      selectnr: "", //获取当前数据内容
+      loadingpic: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    //获取图片数据
+    getdataform(val) {
+      this.selectnr = val;
+      this.loadingpic = true;
+      getHistoryList({
+        channelId: this.selectnr.channelId,
+        termId: this.selectnr.termId,
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      }).then((res) => {
+        this.loadingpic = false;
+        this.imglist = res.data.list;
+        this.total = res.data.total;
+      });
+    },
+    //下一页
+    changebtn(e) {
+      console.log(e);
+      if (Math.floor(e / 9) == 1) {
+        this.page++;
+        getHistoryList({
+          channelId: this.selectnr.channelId,
+          termId: this.selectnr.termId,
+          pageindex: this.page,
+          pagesize: this.pageSize,
+        }).then((res) => {
+          this.imglist.push(res.data.list);
+          this.total = res.data.total;
+        });
+      }
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+      this.imglist = [];
+    },
+    handleclose() {
+      this.isShow = false;
+      this.imglist = [];
+    },
+  },
+};
+</script>
+<style lang="less">
+.historyPic {
+  .el-image {
+    width: 1152px;
+    height: 648px;
+    img {
+      width: 1152px;
+      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/components/historyimg.vue

@@ -1,37 +1,46 @@
 <template>
   <el-dialog
-    title="历史图片"
-    :visible.sync="isShow"
-    class="historyPic"
-    width="1192px"
     @close="handleclose"
+    title="历史图片"
+    :visible.sync="historyPicdialog"
+    width="1366px"
+    :close-on-click-modal="false"
+    class="showDialogHistoryPic"
   >
-    <div v-loading="loadingpic">
+    <div class="title">
-      <el-carousel
+      {{ picInfoData.lineName }}-{{ picInfoData.towerName }}-（{{
-        :loop="false"
+        picInfoData.alias !== null && picInfoData.alias !== ""
-        :autoplay="false"
+          ? picInfoData.alias
-        height="650px"
+          : picInfoData.channnelname
-        indicator-position="none"
+      }}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
-      >
-        <el-carousel-item v-for="(item, index) in imglist" :key="index">
-          <el-image :src="item.path" fit="contain"></el-image>
-        </el-carousel-item>
-      </el-carousel>
     </div>
+    <carouselChart
+      ref="carouselpic"
+      :terminalPhoto="terminalPhoto"
+      v-if="terminalPhoto.length > 0"
+      v-loading="historyPicLoading"
+    ></carouselChart>
   </el-dialog>
 </template>
 <script>
+import carouselChart from "../../components/carouselChart.vue";
 import { getHistoryList } from "@/utils/api/index";
 export default {
+  components: {
+    carouselChart,
+  },
   data() {
     return {
-      isShow: false,
-      imglist: [],
       page: 1, // 当前页数
       pageSize: 10, // 每页数量
       total: 0, //总条数
       selectnr: "", //获取当前数据内容
-      loadingpic: false,
+      historyPicLoading: false,
+      historyPicdialog: false,
+      //点击查看历史图片
+      picInfoData: {}, //获取当前图片的信息
+      terminalPhoto: [], //获取装置当前图片数据
+      nopicPath: require("@/assets/img/nopic.jpg"),
     };
   },
   mounted() {},
@@ -39,15 +48,18 @@ export default {
     //获取图片数据
     getdataform(val) {
       this.selectnr = val;
-      this.loadingpic = true;
+      this.historyPicLoading = true;
       getHistoryList({
         channelId: this.selectnr.channelId,
         termId: this.selectnr.termId,
         pageindex: this.page,
         pagesize: this.pageSize,
       }).then((res) => {
-        this.loadingpic = false;
+        console.log(res);
-        this.imglist = res.data.list;
+
+        this.historyPicLoading = false;
+        this.terminalPhoto = res.data.list;
+
         this.total = res.data.total;
       });
     },
@@ -62,41 +74,54 @@ export default {
           pageindex: this.page,
           pagesize: this.pageSize,
         }).then((res) => {
-          this.imglist.push(res.data.list);
+          this.terminalPhoto.push(res.data.list);
           this.total = res.data.total;
         });
       }
     },
-    display() {
+    display(data) {
-      this.isShow = true;
+      this.historyPicdialog = true;
+      this.picInfoData = data;
+      console.log(data);
     },
     hide() {
-      this.isShow = false;
+      this.historyPicdialog = false;
-      this.imglist = [];
+      this.terminalPhoto = [];
     },
     handleclose() {
-      this.isShow = false;
+      this.historyPicdialog = false;
-      this.imglist = [];
+      this.terminalPhoto = [];
     },
   },
 };
 </script>
 <style lang="less">
-.historyPic {
+.showDialogHistoryPic {
-  .el-image {
+  display: flex;
-    width: 1152px;
+  align-items: center;
-    height: 648px;
+  justify-content: center;
-    img {
+  .el-dialog {
-      width: 1152px;
+    width: 70% !important;
-      height: 648px;
+    height: 90%;
+    transform: none;
+    margin: auto;
+    left: auto;
+    top: auto;
+  }
+  .el-dialog__body {
+    height: calc(100% - 70px);
+    .title {
+      height: 32px;
+      padding-left: 12px;
+      line-height: 32px;
+      color: #fff;
+      font-size: 14px;
+      background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
+      text-align: center;
     }
+    .thumb-example {
+      //height: 100%;
     }
-  .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

@@ -37,6 +37,7 @@
               ></el-option>
             </el-select>
           </el-form-item>
+
           <el-form-item label="开始日期">
             <!-- <el-date-picker
               v-model="formdata.timeVal"
@@ -208,30 +209,17 @@
               v-if="selectRow.path !== '' && tableData.length !== 0"
             >
               <!-- v-viewer="OptionssalseImg" -->
-              <!-- <div
+              <img ref="picJpg" class="animImg" :src="photoPic + '!1366x768'" />
-                class="nosee"
-                :style="'backgroundImage:url(' + photoPic + '!1366x768)'"
-              ></div>
-              <viewer :options="OptionssalseImg" class="bigimgView">
-                <img
-                  @load="imgOnload"
-                  ref="picJpg"
-                  class="animImg"
-                  :src="photoPic + '!1366x768'"
-                />
-              </viewer> -->
-              <img
-                ref="picJpg"
-                class="animImg"
-                @load="imgOnload"
-                :src="photoPic + '!1366x768'"
-              />
               <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
             </div>
             <img
               ref="picJpg"
               src="../../assets/img/nopic.jpg"
-              v-if="selectRow.path == '' || tableData.length == 0"
+              v-if="
+                selectRow.path == '' ||
+                selectRow.path == null ||
+                tableData.length == 0
+              "
             />
           </div>
           <div class="editorBtn">
@@ -244,7 +232,7 @@
             >
             <el-button
               type="primary"
-              @click="handleHistory"
+              @click="handleHistory(selectRow)"
               :disabled="tableData.length == 0"
               >历史图片</el-button
             >
@@ -253,24 +241,50 @@
       </div>
       <div class="pictureBox" v-else v-loading="loading">
         <div class="piclist" v-if="tableData.length !== 0">
-          <el-card
+          <div
             class="box-card imgList"
             v-for="(item, index) in tableData"
             :key="index"
             :class="current === index ? 'bgColor' : ''"
           >
             <div class="bigpic">
-              <div class="picshow" @click="handlePicAlarm(item, index)">
+              <div class="toolsBtn">
-                <img :src="item.path + '!1366x768'" ref="picJpg" />
+                <el-button
-                <!-- <canvas
+                  title="主动拍照"
-                  id="myCanvas"
+                  type="primary"
-                  class="myCanvas"
+                  icon="el-icon-camera"
-                  :ref="'myCanvas' + index"
+                  @click.stop="handlePicList(item)"
-                ></canvas> -->
+                ></el-button>
+                <el-button
+                  title="历史图片"
+                  type="primary"
+                  icon="el-icon-picture-outline"
+                  @click.stop="handlePicHistory(item)"
+                ></el-button>
+              </div>
+              <div class="picshow" @click="handlePicAlarm(item)">
+                <img
+                  v-if="item.path == '' || null"
+                  src="../../assets/img/nodatapic2.jpg"
+                />
+                <img
+                  v-else
+                  :id="'img' + index"
+                  :ref="'imgref' + index"
+                  :src="item.path + '!1366x768'"
+                  ref="picJpg"
+                />
+                <canvas
+                  :ref="'canvansref' + index"
+                  :id="'canvas_' + index"
+                  class="canvasAll"
+                ></canvas>
               </div>
-
               <div class="caption">
                 <p class="infoTop">
+                  <span v-if="item.isread == 1" class="readbox">[已读]</span>
+                  <span v-if="item.isread == 0">[未读]</span>
+                  <span>
                     {{ item.lineName }} /
                     {{
                       item.displayName !== null && item.displayName !== ""
@@ -283,25 +297,17 @@
                         ? item.alias
                         : item.channnelName
                     }}
-                  / 告警原因：<span class="alarmInfo">({{ item.enname }})</span>
+                  </span>
                 </p>
                 <p class="infoBottom">
-                  告警时间：{{
+                  <span>{{
                     $moment(item.alarmTime).format("YYYY-MM-DD HH:mm:ss")
-                  }}
+                  }}</span>
-                  <el-button
+                  <span class="alarmInfo">({{ item.enname }})</span>
-                    type="primary"
-                    :loading="btnpicloading"
-                    @click.stop="handlePicList(item)"
-                    >主动拍照</el-button
-                  >
-                  <el-button type="primary" @click.stop="handlePicHistory(item)"
-                    >历史图片</el-button
-                  >
                 </p>
               </div>
             </div>
-          </el-card>
+          </div>
         </div>
         <div class="piclist" v-else>
           <el-empty description="暂无数据"></el-empty>
@@ -327,8 +333,14 @@
         :style="{ transform: 'scale(' + zoomD + ')' }"
         @mousedown="move"
       >
-        <img @load="imgOnload" class="maskPic img" :src="bigPhotoPic" ref="" />
+        <img
-        <canvas id="myCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
+          @load="imgOnload"
+          id="bigimg"
+          ref="bigimgref"
+          class="maskPic img"
+          :src="bigPhotoPic"
+        />
+        <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas>
       </div>
       <div class="viewClose" @click="closePic">
         <i class="el-icon-close"></i>
@@ -343,8 +355,12 @@ import {
   getSearchInfo,
   getAlarmList,
   getAlarmTypeList,
-  getLatestPhotoJoggle,
+  // getLatestPhotoJoggle,
-  getReturnedPhotoJoggle,
+  // getReturnedPhotoJoggle,
+  getTermStatus,
+  takePicJoggle,
+  getTakePicPhotoStatusJoggle,
+  getTakePicStatusJoggle,
   readAlarm,
 } from "@/utils/api/index";
 import historyimg from "./components/historyimg.vue";
@@ -368,6 +384,7 @@ export default {
       dyOptions: [{ id: -1, name: "全部" }], //电压数据
       xlOptions: [{ id: -1, name: "全部" }], //线路数据
       gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+
       gjOptions: [{ id: -1, label: -1, name: "全部" }], //告警数据
       formdata: {
         dyId: -1,
@@ -394,10 +411,12 @@ export default {
       selectRow: {},
       alarmLoading: false,
       canvasloading: false,
-      tableShow: true, //表格展示
+      tableShow: false, //表格展示
       zoomD: 1,
       canvansdata: "",
       current: 0,
+      requestId: "", //请求拍照返回的requestid
+      picTime: "", //请求拍照返回的时间
     };
   },
   created() {
@@ -439,7 +458,10 @@ export default {
       var y = e.pageY - img.offsetTop;
       // 添加鼠标移动事件
       personBox.addEventListener("mousemove", move);
+      console.log(personBox.addEventListener("mousemove", move));
+      console.log(personBox.style);
       function move(e) {
+        console.log(personBox.style.left);
         personBox.style.left = e.pageX - x + "px";
         personBox.style.top = e.pageY - y + "px";
       }
@@ -489,12 +511,13 @@ export default {
       this.canvasloading = true;
       this.canvansdata = val;
       if (val.path !== "" && this.tableData.length !== 0) {
-        console.log(val);
         this.bigPhotoPic = val.path;
         this.showBigpic = true;
+        setTimeout(() => {
           this.$nextTick(() => {
             this.drawline2(val);
           });
+        }, 100);
       }
     },
     closePic() {
@@ -560,8 +583,17 @@ export default {
           this.photoPic = res.data.list[0].path;
           this.selectRow = res.data.list[0];
           console.log(this.selectRow);
+
+          if (this.tableShow) {
+            this.$nextTick(() => {
               this.$refs.multipleTable.setCurrentRow(this.selectRow);
               this.handleRowClick(this.selectRow);
+            });
+          } else {
+            this.$nextTick(() => {
+              this.drawlineListAll(this.tableData);
+            });
+          }
         })
         .catch((err) => {
           console.log(err);
@@ -636,9 +668,12 @@ export default {
     //绘制大图告警区域
     drawline2(data) {
       console.log(data);
+      console.log(document.getElementById("bigCanvas"));
+      console.log(document.getElementById("bigimg"));
+      this.canvas = document.getElementById("bigCanvas");
+      this.imgpic = document.getElementById("bigimg");
       console.log(this.canvas);
-      this.canvas = this.$refs.myCanvasbig;
+      console.log(this.imgpic);
-      this.imgpic = this.$refs.picJpg;
       this.textInfo = data.enname;
       this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
       this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
@@ -662,7 +697,7 @@ export default {
       // 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 = "12px normal";
+      this.ctx.font = "14px normal";
       this.ctx.fillStyle = "#ff0000";
       //this.ctx.fillText(this.textInfo, top, left + 24);
       //距离上面有空间
@@ -674,14 +709,15 @@ export default {
       this.ctx.closePath();
       this.ctx.stroke();
     },
+
     //绘制所有的图片告警区域
     drawlineListAll(val) {
       for (let i = 0; i < val.length; i++) {
         console.log(i);
-        console.log(this.$refs.myCanvas);
+        console.log(document.getElementById("canvas_" + i));
-        console.log(this.$refs.picJpg);
+        console.log(document.getElementById("img" + i));
-        this.canvas = this.$refs.myCanvas;
+        this.canvas = document.getElementById("canvas_" + i);
-        this.imgpic = this.$refs.picJpg;
+        this.imgpic = document.getElementById("img" + i);
         this.textInfo = val[i].enname;
         console.log(this.textInfo);
         console.log(this.imgpic.offsetWidth);
@@ -721,56 +757,16 @@ export default {
         this.ctx.stroke();
       }
     },
-    //绘制列表大图
-    drawlineList(data, index) {
-      console.log(data);
-      console.log(this.$refs.myCanvasbig);
-      console.log(this.$refs.picJpg);
-      console.log("picJpg" + index);
-      this.canvas = this.$refs.myCanvasbig;
-      this.imgpic = this.$refs.picJpg;
-      this.textInfo = data.enname;
-      this.canvas.width = this.imgpic[index].offsetWidth; //设置画布大小
-      this.canvas.height = this.imgpic[index].offsetHeight; //设置画布大小
-      console.log(this.canvas.width, this.canvas.height);
-      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 = "12px normal";
-      this.ctx.fillStyle = "#ff0000";
-      //this.ctx.fillText(this.textInfo, top, left + 24);
-      //距离上面有空间
-      if (left > 32) {
-        this.ctx.fillText(this.textInfo, top, left - 4);
-      } else if (this.canvas.height - left + height > 32) {
-        this.ctx.fillText(this.textInfo, top, height - 4);
-      }
-      this.ctx.closePath();
-      this.ctx.stroke();
-    },
     //点击当前行
     handleRowClick(row) {
       //this.$refs.multipleTable.toggleRowSelection(row);
       console.log(this.$refs.picJpg.complete);
       this.alarmLoading = true;
+      if (row.path == "" || row.path == null) {
+        this.alarmLoading = false;
+      }
       this.photoPic = row.path;
-
       this.selectRow = row;
       //未读变已读
       if (row.isread == 0) {
@@ -788,39 +784,112 @@ export default {
             });
         }, 300);
       }
-
       this.$nextTick(() => {
         this.drawline(row);
         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(res.data);
+                this.statusNum++;
+              }, 3000);
+            })
+            .catch((err) => {
+              console.log(err); //代码错误、请求失败捕获
+            });
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    //获取装置是否下发状态
+    getTakePicStatus(data) {
+      console.log(data);
+      getTakePicStatusJoggle({
+        requestid: data.requestId,
+        termId: this.selectRow.termId,
+        photoTime: new Date(data.taketime).getTime(),
+      })
+        .then((res) => {
+          console.log(res);
+          //res.data  0 状态未知  1 成功 2失败
+          if (
+            res.data.cmaStatus == 0 &&
+            res.data.picStatus == false &&
+            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.cmaStatus == 1 || res.data.picStatus == true) {
             this.$message({
               duration: 1500,
               showClose: true,
-          message: "手动拍照请求成功！",
+              message: "下发指令成功！",
               type: "success",
             });
+            this.statusNum = 0;
+            clearInterval(this.statusTimer);
+            this.statusTimer = null;
             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,
+        requestid: this.requestId,
       }).then((res) => {
+        console.log(res.data);
         if (res.data == true && this.i < 10) {
           clearInterval(this.timer);
           this.timer = null;
@@ -846,9 +915,10 @@ export default {
         }
       });
     },
+
     //历史图片
-    handleHistory() {
+    handleHistory(val) {
-      this.$refs.historyimg_ref.display();
+      this.$refs.historyimg_ref.display(val);
       this.$refs.historyimg_ref.getdataform(this.selectRow);
     },
     //切换图片
@@ -856,7 +926,14 @@ export default {
       this.tableShow = !this.tableShow;
       this.zoomD = 1;
       if (!this.tableShow) {
+        this.$nextTick(() => {
           this.drawlineListAll(this.tableData);
+        });
+      } else {
+        this.$nextTick(() => {
+          this.$refs.multipleTable.setCurrentRow(this.selectRow);
+          this.handleRowClick(this.selectRow);
+        });
       }
     },
 
@@ -869,22 +946,39 @@ export default {
     handlePicHistory(val) {
       console.log(val);
       this.selectRow = val;
-      this.handleHistory();
+      this.handleHistory(val);
     },
     handlePicAlarm(val, index) {
       console.log(val, index);
       this.current = index;
-      this.canvansdata = val;
       this.canvasloading = true;
+      this.canvansdata = val;
       if (val.path !== "" && this.tableData.length !== 0) {
         console.log(val);
         this.bigPhotoPic = val.path;
         this.showBigpic = true;
-
+        setTimeout(() => {
           this.$nextTick(() => {
-          console.log("huatu");
+            this.drawline2(val);
-          this.drawlineList(val, index);
+          });
+        }, 100);
+
+        //未读变已读
+        if (val.isread == 0) {
+          setTimeout(function () {
+            readAlarm({
+              id: val.id,
+            })
+              .then((res) => {
+                console.log(res);
+                val.isread = 1;
+                console.log(val.isread);
+              })
+              .catch((err) => {
+                console.log(err);
               });
+          }, 300);
+        }
       }
     },
     dateFormat(row, column) {
@@ -917,12 +1011,14 @@ export default {
     right: 0;
     top: 0;
     z-index: 9999;
+    width: 100%;
+    height: 100%;
     display: flex;
     cursor: pointer;
     .picboxI {
       position: relative;
-      width: 1366px;
+      width: 85%;
-      height: 768px;
+      height: 85%;
       margin: auto;
       animation-name: scaleDraw;
       /*关键帧名称*/
@@ -935,18 +1031,20 @@ export default {
       align-items: center;
       justify-content: center;
       img {
-        max-width: 1366px;
+        max-width: 100%;
-        max-height: 768px;
+        max-height: 100%;
+
         margin: auto;
         position: absolute;
         cursor: grab;
       }
       .myCanvas {
         position: absolute;
-        top: 0;
+        // top: 0;
-        left: 0;
+        // left: 0;
-        width: 100%;
+        max-width: 100%;
-        height: 100%;
+        max-height: 100%;
+        margin: 0 auto;
         cursor: pointer;
         pointer-events: none;
       }
@@ -1018,7 +1116,7 @@ export default {
         background-color: rgba(18, 128, 113, 0.2);
       }
       .readbox {
-        color: #e49e61;
+        color: #169e8c;
       }
     }
     .pageNation {
@@ -1088,35 +1186,37 @@ export default {
       margin: auto;
     }
     .piclist {
-      display: flex;
+      // display: flex;
-      // justify-content: space-around;
+      // // justify-content: space-around;
-      flex-wrap: wrap;
+      // flex-wrap: wrap;
       overflow: auto;
       border: 1px solid #eee;
       height: calc(100% - 2px);
     }
     .imgList {
-      width: calc((100% - 104px) / 3);
+      width: calc((100% - 40px) / 4);
       position: relative;
       display: inline-block;
-      margin: 8px;
+      margin: 2px;
       position: relative;
-      padding: 4px;
       border-radius: 3px;
       background: #fff;
-      height: fit-content;
+      height: 30%;
-      //height: auto;
       border: 2px solid transparent;
-      .el-card__body {
-        padding: 0px;
-      }
       .bigpic {
         width: 100%;
         height: 100%;
         background-size: 100% 100%;
+        position: relative;
         .picshow {
           position: relative;
-          .myCanvas {
+          height: 100%;
+          img {
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+          }
+          .canvasAll {
             position: absolute;
             width: 100%;
             height: 100%;
@@ -1126,35 +1226,37 @@ export default {
             pointer-events: none;
           }
         }
-      }
-      img {
-        cursor: pointer;
-        width: 100%;
-        height: 250px;
-        object-fit: fill;
-      }
-
         .caption {
-        padding: 9px;
+          padding: 6px;
-        color: #333;
+          color: #fff;
+          position: absolute;
+          left: 0;
+          bottom: 0px;
+          background: rgba(0, 0, 0, 0.5);
+          width: calc(100% - 12px);
           .alarmInfo {
-          color: #e49e61;
+            color: #fff;
           }
           .infoTop {
             font-size: 14px;
-          color: #000;
+            color: #fff;
             font-weight: normal;
             margin-top: 2px;
             padding-left: 5px;
             padding-right: 5px;
+            .readbox {
+              color: #169e8c;
+            }
           }
           .infoBottom {
-          color: #000;
+            color: #fff;
             font-size: 12px;
             font-weight: normal;
             margin-top: 6px;
             padding-left: 5px;
             padding-right: 5px;
+            display: flex;
+            justify-content: space-between;
             .el-button--small {
               margin-left: 24px;
               padding: 4px;
@@ -1165,9 +1267,24 @@ export default {
             }
           }
         }
+        .toolsBtn {
+          position: absolute;
+          right: 4px;
+          top: 4px;
+          z-index: 2;
+          .el-button {
+            width: auto;
+            background: rgba(0, 0, 0, 0.5);
+            border: 1px solid transparent;
+            color: #fff;
+            font-size: 20px;
+            padding: 2px;
+          }
+        }
+      }
     }
     .bgColor {
-      border: 2px solid #e49e61;
+      border: 2px solid #169e8c;
     }
   }
 }

src/views/components/carouselChart.vue

@@ -2,6 +2,7 @@
   <div class="thumb-example">
     <div class="picTop">
       <!-- 判断是否是图片并且不为空 -->
+
       <div
         class="bigimg"
         v-if="
@@ -10,25 +11,27 @@
         "
         :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
       >
-        <!--  @click="handleBigPicbox(bigPicPath)"  -->
+        <el-button
+          class="downBtn"
+          @click.stop="
+            downLoadPic(
+              bigPicPath.substring(0, bigPicPath.length - 9),
+              bigPicPath.substring(0, bigPicPath.length - 9)
+            )
+          "
+          >下载图片</el-button
+        >
+        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
         <div
           class="nosee"
           :style="'backgroundImage:url(' + bigPicPath + ')'"
         ></div>
-        <div class="bigimgView" v-viewer="OptionssalseImg">
+        <div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
           <img ref="picJpg" class="animImg" :src="bigPicPath" />
         </div>
-
         <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,29 +42,13 @@
           autoplay
         ></video>
       </div>
-
+      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
-      <div
-        v-if="
-          showBigpic &&
-          bigPicPath.indexOf('nopic') == -1 &&
-          bigPicPath.indexOf('videos') == -1
-        "
-        class="showPic"
-        @click="closePic"
-      >
-        <div class="picboxI">
         <img
-            class="maskPic"
+          class="animImg"
-            :src="bigPicPath"
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
-            ref="bigImage"
-            width="100%"
-            height="100%"
         />
       </div>
-        <div class="viewClose">
+
-          <i @click="closePic" class="el-icon-close"></i>
-        </div>
-      </div>
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -177,6 +164,35 @@
         <i class="el-icon-arrow-right"></i>
       </div>
     </div>
+
+    <!-- 点击出现大图 -->
+    <div
+      v-if="showBigpic"
+      class="showPic"
+      v-loading="canvasloading"
+      @click="closePic($event)"
+    >
+      <div
+        class="picboxI"
+        @mousewheel.prevent="rollImg"
+        :style="{
+          transform: 'scale(' + zoomD + ')',
+        }"
+        @mousedown="move"
+      >
+        <img
+          @load="imgOnload"
+          id="bigimg"
+          ref="bigimgref"
+          class="maskPic img"
+          :src="bigImgPath"
+        />
+        <!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
+      </div>
+      <div class="viewClose" @click="closePic($event)">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -203,6 +219,7 @@ export default {
         url: "src",
       },
       isshowArrow: true, //判断是否显示切换按钮
+      mediaType: "", //判断图片类型是视频还是图片
       bigPicPath: "", //大图地址
       videopath: "",
       smallPicPath: "", //小图地址
@@ -222,11 +239,16 @@ export default {
       showBigpic: false,
       flagline: true,
       markEnable: "",
+      zoomD: 1,
+      canvasloading: false,
+      bigImgPath: "",
     };
   },
   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);
     this.total = this.terminalPhoto.length / this.pagesize;
@@ -253,17 +275,136 @@ export default {
   watch: {
     terminalPhoto: function (newVal, oldVal) {
       this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+
       this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
       this.total = this.terminalPhoto.length / this.pagesize;
     },
   },
   created() {},
   methods: {
-    handleBigPicbox() {
+    downLoadPic(url, name) {
+      const image = new Image();
+      image.setAttribute("crossOrigin", "anonymous");
+      image.src = url;
+      image.onload = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+        canvas.toBlob((blob) => {
+          const url = URL.createObjectURL(blob);
+          this.download(url, name);
+          // 用完释放URL对象
+          URL.revokeObjectURL(url);
+        });
+      };
+    },
+    download(href, name) {
+      const eleLink = document.createElement("a");
+      eleLink.download = name;
+      eleLink.href = href;
+      eleLink.click();
+      eleLink.remove();
+    },
+    // showbigpicPath(data) {
+    //   console.log(data);
+    //   if (data.includes("!")) {
+    //     this.bigPicPath = data.substring(0, data.length - 9);
+    //   } else {
+    //     this.bigPicPath = data;
+    //     this.bgbigPath = data;
+    //   }
+
+    //   console.log(this.bigPicPath);
+    // },
+    // handleBigPicbox() {
+    //   this.showBigpic = true;
+    // },
+    //移动demo
+    move(e) {
+      console.log(e);
+      e.preventDefault();
+      // 获取元素
+      var personBox = document.querySelector(".picboxI");
+      var img = document.querySelector(".img");
+      var x = e.pageX - img.offsetLeft;
+      var y = e.pageY - img.offsetTop;
+      // 添加鼠标移动事件
+      personBox.addEventListener("mousemove", move);
+      console.log(personBox.addEventListener("mousemove", move));
+      console.log(personBox.style);
+      function move(e) {
+        console.log(personBox.style.left);
+        personBox.style.left = e.pageX - x + "px";
+        personBox.style.top = e.pageY - y + "px";
+      }
+      // 添加鼠标抬起事件，鼠标抬起，将事件移除
+      img.addEventListener("mouseup", function () {
+        personBox.removeEventListener("mousemove", move);
+      });
+      // 鼠标离开父级元素，把事件移除
+      personBox.addEventListener("mouseout", function () {
+        personBox.removeEventListener("mousemove", move);
+      });
+    },
+    // 缩放图片
+    rollImg(e) {
+      let direction = e.deltaY > 0 ? "down" : "up";
+      if (direction === "up") {
+        // 滑轮向上滚动
+        this.large();
+      } else {
+        // 滑轮向下滚动
+        this.Small();
+      }
+    },
+    //大
+    large() {
+      this.$nextTick(() => {
+        if (this.zoomD < 6) {
+          this.zoomD += 0.1;
+        }
+        document.querySelector(
+          ".picboxI"
+        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
+      });
+    },
+    // 小
+    Small() {
+      this.$nextTick(() => {
+        if (this.zoomD > 0.3) {
+          this.zoomD -= 0.1;
+        }
+        document.querySelector(
+          ".picboxI"
+        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
+      });
+    },
+    imgOnload() {
+      console.log("加载完成");
+      this.canvasloading = false;
+    },
+    //放大图
+    handleBigPicbox(val) {
+      console.log(val);
+      //this.canvasloading = true;
       this.showBigpic = true;
+      this.bigImgPath = val.substring(0, val.length - 9);
     },
-    closePic() {
+    closePic(e) {
+      console.log(e);
+      var btn = this.$refs.bigimgref;
+      console.log(btn);
+      if (btn) {
+        if (!btn.contains(event.target)) {
+          //按钮.app-download以外的区域
+          this.zoomD = 1;
           this.showBigpic = false;
+        }
+      }
+      //
+      // this.showBigpic = false;
     },
     openline() {
       this.flagline = true;
@@ -324,13 +465,17 @@ 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);
       console.log(this.page);
@@ -356,7 +501,9 @@ 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);
       if (this.activeSmall > 4) {
@@ -383,7 +530,9 @@ export default {
       console.log(row);
       console.log();
       this.activeSmall = index;
+      this.mediaType = row.mediaType;
       this.bigPicPath = row.path + "!1366x768";
+      // this.bgbigPath = row.path + "!1366x768";
       getCoordinate({
         channelId: row.channelId,
         needPic: "1",
@@ -460,67 +609,28 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 0px);
+  height: calc(100% - 32px);
   box-sizing: border-box;
 
-  .showPic {
+  .picTop {
-    position: fixed;
-    background-color: rgba(0, 0, 0, 0.5);
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    right: 0;
-    top: 0;
-    z-index: 9999;
-    display: flex;
-    cursor: pointer;
-    .picboxI {
-      position: relative;
-      max-width: 1366px;
-      max-height: 768px;
-      margin: auto;
-      animation-name: scaleDraw;
-      /*关键帧名称*/
-      animation-timing-function: ease;
-      /*动画的速度曲线*/
-      animation-iteration-count: 1;
-      /*动画播放的次数*/
-      animation-duration: 0.65s;
-      overflow: hidden;
-      border: 2px solid #f00;
-      img {
     width: 100%;
-        height: 100%;
+    height: 80%;
-        margin: auto;
-      }
-    }
-    .viewClose {
-      -webkit-app-region: no-drag;
-      background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 50%;
-      cursor: pointer;
-      height: 80px;
     overflow: hidden;
+    margin-bottom: 4px;
+    position: relative;
+    .downBtn {
       position: absolute;
-      right: -40px;
+      background: rgba(0, 0, 0, 0.5);
-      top: -40px;
+      border: none;
-      transition: background-color 0.15s;
+      right: 8px;
-      width: 80px;
-      .el-icon-close {
       bottom: 16px;
-        left: 16px;
-        position: absolute;
       color: #fff;
-        font-size: 18px;
+      z-index: 5;
-      }
+      &:hover {
+        background: rgba(0, 0, 0, 0.9);
+        color: #169e8c;
       }
     }
-  .picTop {
-    width: 100%;
-    height: 80%;
-    overflow: hidden;
-    margin-bottom: 4px;
-    position: relative;
     &:hover {
       .arrow {
         opacity: 1;
@@ -548,6 +658,9 @@ export default {
         position: absolute;
         z-index: 3;
         opacity: 0;
+        .animImg {
+          opacity: 0;
+        }
       }
       .mark {
         position: absolute;
@@ -709,6 +822,75 @@ export default {
       right: 16px;
     }
   }
+  //放大图
+  .showPic {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 50%);
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    .picboxI {
+      position: relative;
+      width: 85%;
+      height: 85%;
+      margin: auto;
+      animation-name: scaleDraw;
+      /*关键帧名称*/
+      animation-timing-function: ease;
+      /*动画的速度曲线*/
+      animation-iteration-count: 1;
+      /*动画播放的次数*/
+      animation-duration: 0.65s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+
+        margin: auto;
+        position: absolute;
+        cursor: grab;
+      }
+      .myCanvas {
+        position: absolute;
+        // top: 0;
+        // left: 0;
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0 auto;
+        cursor: pointer;
+        pointer-events: none;
+      }
+    }
+    .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;
+        color: #fff;
+        font-size: 18px;
+      }
+    }
+  }
 }
 @keyframes scaleDraw {
   /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
@@ -721,6 +903,5 @@ export default {
     transform: scale(1);
   }
 }
-
 // https://v1.github.surmon.me/vue-awesome-swiper/
 </style>

src/views/devicePhotoSchedule/components/adddeviceDialog copy.vue

@@ -0,0 +1,260 @@
+<template>
+  <el-dialog
+    class="adddeviceDialog"
+    :title="title"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="670px"
+    @close="handleclose"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="auto"
+      :rules="rules"
+      :model="ruleForm"
+    >
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <div class="addtimeBox" ref="timescrollref">
+        <div
+          class="timeBoxArr"
+          v-for="(item, index) in ruleForm.list"
+          :key="index"
+        >
+          <el-form-item
+            label="时间"
+            :prop="'list.' + index + '.time'"
+            :rules="{ required: true, message: '请选择时间', trigger: 'blur' }"
+          >
+            <el-time-picker
+              is-range
+              v-model="item.time"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="HH:mm"
+              value-format="HH:mm"
+            >
+            </el-time-picker>
+          </el-form-item>
+          <el-form-item label="间隔（分）" :prop="'list.' + index + '.span'">
+            <!-- <el-input v-model="ruleForm.span" autocomplete="off" type="number"></el-input> -->
+            <el-input-number v-model="item.span" :min="1"></el-input-number>
+          </el-form-item>
+          <div class="btngrop">
+            <el-button
+              v-if="index !== 0"
+              type="danger"
+              icon="el-icon-minus"
+              @click="deleteModule(item, index)"
+            ></el-button>
+            <el-button
+              icon="el-icon-plus"
+              type="primary"
+              @click="addModule()"
+              v-if="index + 1 == ruleForm.list.length"
+            ></el-button>
+          </div>
+        </div>
+      </div>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="ruleForm.remark" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { addScheduleRulel, updateScheduleRulel } from "@/utils/api/index";
+import moment from "moment";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      isShow: false,
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+      ruleForm: {},
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val == null) {
+        return (this.ruleForm = {
+          name: "",
+          list: [
+            {
+              time: "",
+              span: "",
+            },
+          ],
+          remark: "",
+        });
+      }
+      //this.ruleForm = val;
+      this.ruleForm = JSON.parse(JSON.stringify(val));
+      this.ruleForm.list.forEach((val) => {
+        this.$set(val, "time", [val.startTime, val.endTime]);
+        console.log(val.startTime);
+        console.log(val.endTime);
+      });
+    },
+    addModule() {
+      //新增一行
+      this.ruleForm.list.push({
+        time: "",
+        span: "",
+      });
+      console.log(this.$refs.timescrollref);
+      this.$nextTick(() => {
+        console.log(this.$refs.timescrollref);
+        if (this.$refs.timescrollref) {
+          console.log(this.$refs.timescrollref.scrollHeight);
+          this.$refs.timescrollref.scrollTop =
+            this.$refs.timescrollref.scrollHeight;
+        }
+      });
+    },
+    //删除一行
+    deleteModule(item, index) {
+      console.log(item, index);
+      const itemList = this.ruleForm.list.indexOf(item);
+      if (itemList !== -1) {
+        this.ruleForm.list.splice(index, 1);
+      }
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          // delete this.ruleForm.time;
+          this.ruleForm.list.forEach((val) => {
+            this.$set(val, "startTime", val.time[0]);
+            this.$set(val, "endTime", val.time[1]);
+          });
+          // console.log(this.ruleForm.list[0].startTime);
+          let arr = [];
+          for (var i = 0; i < this.ruleForm.list.length; i++) {
+            console.log(this.ruleForm.list[i].startTime.split(":")[0]);
+            console.log(this.ruleForm.list[i].startTime.split(":")[1]);
+            console.log(this.ruleForm.list[i].endTime.split(":")[0]);
+            console.log(this.ruleForm.list[i].endTime.split(":")[1]);
+
+            // let str = moment(new Date()).format("hh:mm");
+            // console.log(typeof str);
+            // console.log(this.ruleForm.list[i].startTime);
+
+            // console.log(typeof this.ruleForm.list[i].startTime);
+            // var Stime = this.ruleForm.list[i].startTime;
+            // var Etime = this.ruleForm.list[i].endTime;
+            // console.log(Stime, Etime);
+            // var date = new Date(Stime);
+            // console.log(date);
+            // moment(date).format("YYYY-MM-DD HH:mm:ss")
+
+            arr.push(
+              {
+                hour: Math.floor(this.ruleForm.list[i].span / 60),
+                minute: this.ruleForm.list[i].span % 60,
+                preset: 255,
+              },
+              {
+                hour: this.ruleForm.list[i].startTime.split(":")[0],
+                minute: this.ruleForm.list[i].startTime.split(":")[1],
+                preset: 255,
+              },
+              {
+                hour: this.ruleForm.list[i].endTime.split(":")[0],
+                minute: this.ruleForm.list[i].endTime.split(":")[1],
+                preset: 255,
+              }
+            );
+          }
+          this.ruleForm.list = arr;
+          if (this.title == "新增") {
+            addScheduleRulel(this.ruleForm)
+              .then((res) => {
+                this.isShow = false;
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: "添加成功",
+                  type: "success",
+                });
+                this.$parent.deviceList();
+              })
+              .catch((err) => {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: "添加失败",
+                  type: "error",
+                });
+              });
+          } else {
+            updateScheduleRulel(this.ruleForm)
+              .then((res) => {
+                this.isShow = false;
+                this.$message.success("修改成功");
+                this.$parent.deviceList();
+              })
+              .catch((err) => {
+                this.$message.error("修改失败");
+              });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.deviceList();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.adddeviceDialog {
+  .el-form {
+    .addtimeBox {
+      max-height: 205px;
+      overflow: auto;
+    }
+    .timeBoxArr {
+      display: flex;
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__inner {
+        width: 226px;
+        margin-right: 16px;
+      }
+
+      .btngrop {
+        margin-bottom: 16px;
+        margin-left: 16px;
+        height: 32px;
+        .el-button--small {
+          padding: 9px 8px;
+          width: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/devicePhotoSchedule/components/adddeviceDialog.vue

@@ -20,12 +20,12 @@
       <div class="addtimeBox" ref="timescrollref">
         <div
           class="timeBoxArr"
-          v-for="(item, index) in ruleForm.list"
+          v-for="(item, index) in ruleForm.listTime"
           :key="index"
         >
           <el-form-item
             label="时间"
-            :prop="'list.' + index + '.time'"
+            :prop="'listTime.' + index + '.time'"
             :rules="{ required: true, message: '请选择时间', trigger: 'blur' }"
           >
             <el-time-picker
@@ -35,11 +35,13 @@
               start-placeholder="开始时间"
               end-placeholder="结束时间"
               format="HH:mm"
-              value-format="HH:mm:ss"
             >
             </el-time-picker>
           </el-form-item>
-          <el-form-item label="间隔（分）" :prop="'list.' + index + '.span'">
+          <el-form-item
+            label="间隔（分）"
+            :prop="'listTime.' + index + '.span'"
+          >
             <!-- <el-input v-model="ruleForm.span" autocomplete="off" type="number"></el-input> -->
             <el-input-number v-model="item.span" :min="1"></el-input-number>
           </el-form-item>
@@ -54,7 +56,7 @@
               icon="el-icon-plus"
               type="primary"
               @click="addModule()"
-              v-if="index + 1 == ruleForm.list.length"
+              v-if="index + 1 == ruleForm.listTime.length"
             ></el-button>
           </div>
         </div>
@@ -91,24 +93,25 @@ export default {
       if (val == null) {
         return (this.ruleForm = {
           name: "",
-          list: [
+          listTime: [
             {
               time: "",
               span: "",
             },
           ],
+          list: [],
           remark: "",
         });
       }
       //this.ruleForm = val;
       this.ruleForm = JSON.parse(JSON.stringify(val));
-      this.ruleForm.list.forEach((val) => {
+      this.ruleForm.listTime.forEach((val) => {
         this.$set(val, "time", [val.startTime, val.endTime]);
       });
     },
     addModule() {
       //新增一行
-      this.ruleForm.list.push({
+      this.ruleForm.listTime.push({
         time: "",
         span: "",
       });
@@ -135,10 +138,42 @@ export default {
       this.$refs.formInfo.validate((valid) => {
         if (valid) {
           // delete this.ruleForm.time;
-          this.ruleForm.list.forEach((val) => {
+
-            this.$set(val, "startTime", val.time[0]);
+          this.ruleForm.listTime.forEach((val) => {
-            this.$set(val, "endTime", val.time[1]);
+            this.$set(val, "startTime", new Date(val.time[0]));
+            this.$set(val, "endTime", new Date(val.time[1]));
+            // console.log(val.time[0]);
+            // console.log(typeof val.time[0]);
+            // console.log(new Date(val.time[0]));
+            // console.log(new Date(val.time[1]));
+            // console.log(new Date(val.time[0]).getHours());
+            // console.log(new Date(val.time[0]).getMinutes());
           });
+
+          let arr = [];
+          for (var i = 0; i < this.ruleForm.listTime.length; i++) {
+            console.log(this.ruleForm.listTime);
+
+            arr.push(
+              {
+                hour: Math.floor(this.ruleForm.listTime[i].span / 60),
+                minute: this.ruleForm.listTime[i].span % 60,
+                preset: 255,
+              },
+              {
+                hour: this.ruleForm.listTime[i].startTime.getHours(),
+                minute: this.ruleForm.listTime[i].startTime.getMinutes(),
+                preset: 255,
+              },
+              {
+                hour: this.ruleForm.listTime[i].endTime.getHours(),
+                minute: this.ruleForm.listTime[i].endTime.getMinutes(),
+                preset: 255,
+              }
+            );
+          }
+          console.log(arr);
+          this.ruleForm.list = arr;
           if (this.title == "新增") {
             addScheduleRulel(this.ruleForm)
               .then((res) => {

src/views/devicePhotoSchedule/components/setdevice.vue

@@ -14,13 +14,29 @@
           <p class="timeGz" v-for="(val, index) in ruleSchedule" :key="index">
             <span>
               {{
-                val.startTime.substring(0, val.startTime.lastIndexOf(":"))
+                new Date(val.startTime).getHours() < 10
+                  ? "0" + new Date(val.startTime).getHours()
+                  : new Date(val.startTime).getHours()
+              }}:
+              {{
+                new Date(val.startTime).getMinutes() < 10
+                  ? "0" + new Date(val.startTime).getMinutes()
+                  : new Date(val.startTime).getMinutes()
               }}</span
             >
             ~
-            <span>{{
+            <span
-              val.endTime.substring(0, val.endTime.lastIndexOf(":"))
+              >{{
-            }}</span>
+                new Date(val.endTime).getHours() < 10
+                  ? "0" + new Date(val.endTime).getHours()
+                  : new Date(val.endTime).getHours()
+              }}:
+              {{
+                new Date(val.endTime).getMinutes() < 10
+                  ? "0" + new Date(val.endTime).getMinutes()
+                  : new Date(val.endTime).getMinutes()
+              }}</span
+            >
             间隔：<b>{{ val.span }}分钟</b>
           </p>
         </div>
@@ -65,6 +81,10 @@
                 :max="9"
               ></el-input-number>
             </div>
+            <!-- <div class="math">
+              规约：
+              {{ data.protocol }}
+            </div> -->
             <div
               class="deStatus"
               v-if="allCheckNode.indexOf(data) != -1 && showtag"
@@ -99,6 +119,7 @@ import {
   getTermListByChannelJoggle,
   getCmaSchelduleUpload,
 } from "@/utils/api/index";
+import moment from "moment";
 export default {
   props: {
     title: String,
@@ -148,15 +169,18 @@ export default {
       flag: false,
       sureloading: false,
       showtag: false,
+      checkOffset: "",
     };
   },
   mounted() {},
   methods: {
     //判断
     getdataform(val) {
+      console.log(val);
       this.selid = val.id;
-      this.ruleSchedule = val.list;
+      this.ruleSchedule = val.listTime;
-      console.log(this.ruleSchedule, "时间规则");
+      console.log(this.ruleSchedule);
+      // console.log(this.ruleSchedule, "时间规则");
       this.getlistnr();
     },
     //获取所有通道
@@ -188,7 +212,7 @@ export default {
         })
         .catch((err) => {});
     },
-    //// 给数组里的每一个对象都添加一个isEdit属性
+    // 给数组里的每一个对象都添加一个isEdit属性
     getChildren(data) {
       console.log(data);
       return data.map((item) => {
@@ -211,10 +235,34 @@ export default {
       this.allCheckNode = this.$refs.tree.getCheckedNodes();
       // console.log(this.allCheckNode);
       console.log(nodeObj);
+      console.log(this.allCheckNode);
       this.isactive = nodeObj.id;
       this.isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1;
       console.log(this.isCheck);
     },
+    // //获取开始时间和结束时间的偏移量
+    // getruleSchedule() {
+    //   for (var j = 0; j < this.allCheckNode.length; j++) {
+    //     console.log(this.allCheckNode[j].offsetNum);
+    //     for (var i = 0; i < this.ruleSchedule.length; i++) {
+    //       console.log(typeof this.ruleSchedule[i].startTime);
+    //       console.log(this.ruleSchedule[i].startTime);
+    //       var Stime = moment(this.ruleSchedule[i].startTime).format("HH:mm");
+    //       var Etime = moment(this.ruleSchedule[i].endTime).format("HH:mm");
+    //       console.log(Stime, Etime);
+
+    //       // this.ruleSchedule[i].startTime = new Date(
+    //       //   this.ruleSchedule[i].startTime
+    //       // );
+    //       // this.ruleSchedule[i].endTime = new Date(this.ruleSchedule[i].endTime);
+    //       // console.log(this.ruleSchedule[i].startTime);
+    //       // console.log(this.ruleSchedule[i].endTime);
+    //       // moment().add(offsetSeconds, "seconds").toObject();
+
+    //       // console.log(time);
+    //     }
+    //   }
+    // },
 
     // 保存确定操作
     submitForm() {
@@ -224,19 +272,165 @@ export default {
     },
     //时间表
     sureSum() {
-      //console.log(this.termidArr);
       console.log(this.checkedAisle);
+
       var ruleBox = [];
+      //循环装置
       for (var i = 0; i < this.allCheckNode.length; i++) {
+        console.log(this.allCheckNode[i].bsManufacturer);
+        if (
+          this.allCheckNode[i].bsManufacturer == null ||
+          this.allCheckNode[i].bsManufacturer == undefined
+        ) {
+          console.log(this.allCheckNode[i].offsetNum);
+          //循环时间规则
+          let timearr = [];
+          let dayArr = [];
+          for (var j = 0; j < this.ruleSchedule.length; j++) {
+            console.log(this.ruleSchedule);
+            console.log(this.ruleSchedule[j].startTime);
+            // var Stime = moment(this.ruleSchedule[j].startTime).format("HH:mm");
+            // var Etime = moment(this.ruleSchedule[j].endTime).format("HH:mm");
+
+            var Stime = moment(this.ruleSchedule[j].startTime)
+              .add(this.allCheckNode[i].offsetNum, "minute")
+              .format();
+            var Etime = moment(this.ruleSchedule[j].endTime)
+              .add(this.allCheckNode[i].offsetNum, "minute")
+              .format();
+            var lastETime = moment(this.ruleSchedule[j].endTime).format();
+
+            var spanTime = this.ruleSchedule[j].span;
+            console.log(spanTime);
+            console.log(moment(this.ruleSchedule[j].endTime).hour());
+            //判断湖南规约
+            if (this.allCheckNode[i].protocol == "65283") {
+              console.log("湖南规约");
+              console.log(Stime, Etime);
+              console.log(typeof Stime);
+              console.log(
+                moment(this.ruleSchedule[j].endTime)
+                  .add(this.allCheckNode[i].offsetNum, "minute")
+                  .hour()
+              );
+              console.log(
+                moment(this.ruleSchedule[j].endTime)
+                  .add(this.allCheckNode[i].offsetNum, "minute")
+                  .minute()
+              );
+
+              //如果偏移之后的时间是第二天，那么不做偏移
+              console.log(moment().isSame(moment(Etime), "day"));
+              //判断是不是同一天
+              if (moment().isSame(moment(Etime), "day")) {
+                //如果是同一天
+                timearr.push(
+                  {
+                    hour: Math.floor(this.ruleSchedule[j].span / 60),
+                    minute: this.ruleSchedule[j].span % 60,
+                    preset: 255,
+                  },
+                  {
+                    hour: moment(this.ruleSchedule[j].startTime)
+                      .add(this.allCheckNode[i].offsetNum, "minute")
+                      .hour(),
+                    minute: moment(this.ruleSchedule[j].startTime)
+                      .add(this.allCheckNode[i].offsetNum, "minute")
+                      .minute(),
+                    preset: 255,
+                  },
+                  {
+                    hour: moment(this.ruleSchedule[j].endTime)
+                      .add(this.allCheckNode[i].offsetNum, "minute")
+                      .hour(),
+                    minute: moment(this.ruleSchedule[j].endTime)
+                      .add(this.allCheckNode[i].offsetNum, "minute")
+                      .minute(),
+                    preset: 255,
+                  }
+                );
+              } else {
+                timearr.push(
+                  {
+                    hour: Math.floor(this.ruleSchedule[j].span / 60),
+                    minute: this.ruleSchedule[j].span % 60,
+                    preset: 255,
+                  },
+                  {
+                    hour: moment(this.ruleSchedule[j].startTime)
+                      .add(this.allCheckNode[i].offsetNum, "minute")
+                      .hour(),
+                    minute: moment(this.ruleSchedule[j].startTime)
+                      .add(this.allCheckNode[i].offsetNum, "minute")
+                      .minute(),
+                    preset: 255,
+                  },
+                  {
+                    hour: moment(this.ruleSchedule[j].endTime).hour(),
+                    minute: moment(this.ruleSchedule[j].endTime).minute(),
+                    preset: 255,
+                  }
+                );
+              }
+
+              console.log(timearr);
+            }
+            ////判断河南规约
+            if (this.allCheckNode[i].protocol == "65286") {
+              console.log("河南规约");
+              //偏移时间
+              //this.getDayArr(startDay, endDay);
+
+              let startDay = Stime;
+              let endDay = Etime;
+              var lastendDay = lastETime;
+              console.log(lastETime);
+              console.log(startDay, endDay);
+              let startVal = this.$moment(new Date(startDay)).format(
+                "YYYY-MM-DD HH:mm"
+              );
+              console.log(startVal);
+              console.log(moment().isSame(moment(endDay), "day"));
+              while (this.$moment(startVal).isBefore(endDay)) {
+                dayArr.push(startVal);
+                // 自增
+                startVal = this.$moment(new Date(startVal))
+                  .add(spanTime, "minute")
+                  .format("YYYY-MM-DD HH:mm");
+                console.log(startVal);
+              }
+
+              // // 将结束日期的天放进数组
+              if (!moment().isSame(moment(endDay), "day")) {
+                dayArr.push(
+                  this.$moment(new Date(lastETime)).format("YYYY-MM-DD HH:mm")
+                );
+              }
+
+              console.log(dayArr);
+              for (var k = 0; k < dayArr.length; k++) {
+                //console.log(moment(dayArr[k]).hour());
+                timearr.push({
+                  hour: moment(dayArr[k]).hour(),
+                  minute: moment(dayArr[k]).minute(),
+                  preset: 255,
+                });
+              }
+              // return dayArr;
+            }
+          }
+
           var parmsobj = {
             termid: this.allCheckNode[i].id,
-          channelidlist: [this.checkedAisle],
+            channelid: this.checkedAisle,
             offset: this.allCheckNode[i].offsetNum,
+            list: timearr,
           };
           console.log(parmsobj);
           ruleBox.push(parmsobj);
         }
         console.log(ruleBox);
+      }
       setScheduleRulel({
         list: ruleBox,
         scheduleid: this.selid,
@@ -252,14 +446,19 @@ export default {
           }, 3000);
         })
         .catch((err) => {
-          this.$message({
+          // this.$message({
-            duration: 1500,
+          //   duration: 1500,
-            showClose: true,
+          //   showClose: true,
-            message: "添加失败",
+          //   message: "添加失败",
-            type: "error",
+          //   type: "error",
-          });
+          // });
         });
     },
+    //获取到时间规则，把时间规则转化为对应的规约格式
+    //湖南规约
+    getHnTime() {},
+    //河南规约
+    getZzTime() {},
     //根据requestid查询时间表下发状态
     requestTime() {
       this.sureloading = true;
@@ -274,7 +473,6 @@ export default {
             arr
           ) {
             console.log(value, index, arr);
-
             return value.status !== 1;
           });
           if (this.requestList.length == 0) {

src/views/devicePhotoSchedule/components/setdevicebak.vue

@@ -1,386 +0,0 @@
-<template>
-  <el-dialog
-    class="photoSetDialog"
-    title="设置"
-    :visible.sync="isShow"
-    :close-on-click-modal="false"
-    width="1020px"
-    @close="handleclose"
-  >
-    <div class="setTimeTd">
-      <h3>时间表规则</h3>
-      <div class="flexTimeGz">
-        <p class="timeGz" v-for="(val, index) in ruleSchedule" :key="index">
-          <span>
-            {{
-              val.startTime.substring(0, val.startTime.lastIndexOf(":"))
-            }}</span
-          >
-          ~
-          <span>{{
-            val.endTime.substring(0, val.endTime.lastIndexOf(":"))
-          }}</span>
-          间隔：<b>{{ val.span }}分钟</b>
-        </p>
-      </div>
-      <h3>设置通道</h3>
-      <div class="chooseTDBox">
-        <label>选择通道:</label>
-        <div class="checkBox">
-          <el-radio-group v-model="checkedAisle" @change="handleChange">
-            <el-radio
-              :label="val.id"
-              border
-              v-for="val in aisleList"
-              :key="val.id"
-              >{{ val.name }}</el-radio
-            >
-          </el-radio-group>
-        </div>
-      </div>
-      <div class="flexnr" v-loading="loading" v-if="newzzList.length !== 0">
-        <el-tree
-          :data="newzzList"
-          show-checkbox
-          :props="defaultProps"
-          ref="tree"
-          node-key="id"
-          :default-expand-all="true"
-          @check-change="getCheckedNodes"
-        >
-          <span
-            v-if="!data.list"
-            class="custom-tree-node"
-            slot-scope="{ data }"
-          >
-            <span class="mr10">{{ data.name }}</span>
-            <!-- <el-tag size="mini" type="success" v-if="zzsuccess"
-              >装置下发成功</el-tag
-            >
-            <el-tag size="mini" v-if="zzpending"
-              ><i class="el-icon-loading"></i>装置下发中</el-tag
-            >
-            <el-tag size="mini" type="danger" v-if="zzerror"
-              >装置下发失败</el-tag
-            > -->
-          </span>
-          <span v-else class="custom-tree-node" slot-scope="{ data }">
-            <span>{{ data.name }}</span>
-          </span>
-        </el-tree>
-      </div>
-      <div class="flexnr" v-else>
-        <p class="nochannel">图像监测装置</p>
-      </div>
-    </div>
-    <div slot="footer" class="dialog-footer">
-      <!-- <el-button @click="getCheckedNodes">获取</el-button> -->
-      <el-button @click="handleclose">取 消</el-button>
-      <el-button type="primary" @click="submitForm()" :loading="sureloading"
-        >确 定</el-button
-      >
-    </div>
-  </el-dialog>
-</template>
-<script>
-import {
-  setScheduleRulel,
-  getScheduleRulelAccessList,
-  getTermListByChannelJoggle,
-  getCmaSchelduleUpload,
-} from "@/utils/api/index";
-export default {
-  props: {
-    title: String,
-  },
-  data() {
-    return {
-      contentStyle: { width: "90px" },
-      isShow: false,
-      selid: 0, //选中时间表id
-      ruleSchedule: [], //时间表规则
-      checkedAisle: "", //选中通道数据
-      aisleList: [], //通道数据内容
-      listnr: [], //通道树状结构
-      defaultProps: {
-        children: "list",
-        label: "name",
-      },
-      termidArr: [],
-      ruleid: "",
-      parmsList: [], //选中的通道
-      multipleSelection: [],
-      //新是数据结构参数
-      newzzList: [],
-      zzListCheck: [],
-      loading: false,
-
-      //全选
-      checkAll: true,
-      isIndeterminate: true, //全选设置默认选中
-      timer: null,
-      termidArrNum: -1,
-      requestList: [],
-
-      timer: null,
-      i: 0,
-      zzsuccess: false,
-      zzpending: false,
-      zzerror: false,
-
-      allCheckNode: [], //获取选中的节点
-
-      requestArr: [], //通过requestid获取状态
-      termzzid: [],
-      flag: false,
-      sureloading: false,
-    };
-  },
-  mounted() {},
-  methods: {
-    //判断
-    getdataform(val) {
-      this.selid = val.id;
-      this.ruleSchedule = val.list;
-      console.log(this.ruleSchedule, "时间规则");
-      this.getlistnr();
-    },
-    //获取所有通道
-    getlistnr() {
-      getScheduleRulelAccessList({})
-        .then((res) => {
-          this.listnr = res.data.list;
-          this.aisleList = res.data.channellist;
-        })
-        .catch((err) => {});
-    },
-
-    //选择通道
-    handleChange() {
-      console.log(this.checkedAisle);
-      this.loading = true;
-      getTermListByChannelJoggle({
-        id: this.checkedAisle,
-      })
-        .then((res) => {
-          console.log(res);
-          this.newzzList = res.data.list;
-          console.log(this.listnr);
-          console.log(this.newzzList);
-          console.log(this.zzListCheck);
-          this.loading = false;
-        })
-        .catch((err) => {});
-    },
-    handleCheckBox() {
-      console.log(this.zzListCheck);
-    },
-
-    // //获取所选值
-    getCheckedNodes() {
-      this.allCheckNode = this.$refs.tree.getCheckedNodes();
-      console.log(this.allCheckNode);
-    },
-
-    // 保存确定操作
-    submitForm() {
-      //console.log(this.termidArr);
-      this.sureSum();
-    },
-    //时间表
-    sureSum() {
-      //console.log(this.termidArr);
-      console.log(this.checkedAisle);
-      var ruleBox = [];
-      for (var i = 0; i < this.allCheckNode.length; i++) {
-        var parmsobj = {
-          termid: this.allCheckNode[i].id,
-          channelidlist: [this.checkedAisle],
-          offset: Math.floor(Math.random() * 10),
-        };
-        console.log(parmsobj);
-        ruleBox.push(parmsobj);
-      }
-      console.log(ruleBox);
-      setScheduleRulel({
-        list: ruleBox,
-        scheduleid: this.selid,
-      })
-        .then((res) => {
-          console.log(res);
-          this.requestList = res.data.list;
-          this.requestTime();
-          this.timer = window.setInterval(() => {
-            //console.log(this.requestList);
-            this.requestTime();
-            this.i++;
-          }, 3000);
-        })
-        .catch((err) => {
-          this.$message({
-            showClose: true,
-            message: "添加失败",
-            type: "error",
-          });
-        });
-    },
-    //根据requestid查询时间表下发状态
-    requestTime() {
-      this.sureloading = true;
-      getCmaSchelduleUpload({
-        list: this.requestList,
-      })
-        .then((res) => {
-          this.requestArr = res.data.list;
-          this.requestList = this.requestArr.filter(function (
-            value,
-            index,
-            arr
-          ) {
-            console.log(value, index, arr);
-            return value.status !== 1;
-          });
-          if (this.requestList.length == 0) {
-            this.zzsuccess = true;
-            this.$message.success("下发成功");
-            clearInterval(this.timer);
-            this.timer = null;
-            this.isShow = false;
-            this.sureloading = false;
-          } else if (this.i > 9) {
-            this.zzerror = true;
-            this.i = 0;
-            this.$message.warning("下发失败，请稍后再试！");
-            clearInterval(this.timer);
-            this.timer = null;
-            this.isShow = false;
-            this.sureloading = false;
-          }
-        })
-        .catch((err) => {});
-    },
-    display() {
-      this.isShow = true;
-    },
-    handleclose() {
-      this.isShow = false;
-      this.newzzList = [];
-      this.checkedAisle = "";
-      console.log(this.allCheckNode, "1111111111");
-      clearTimeout(this.timer);
-      this.timer = null;
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.photoSetDialog {
-  .el-dialog__body {
-    // height: 360px;
-    // overflow: auto;
-  }
-
-  .flexnr {
-    height: 360px;
-    overflow: auto;
-    display: flex;
-    align-items: flex-start;
-    border: 1px solid #eee;
-    padding: 16px;
-    border-radius: 4px;
-    .mr10 {
-      margin-right: 10px;
-    }
-    .dybox {
-      h4 {
-        font-size: 14px;
-        color: #333;
-        line-height: 24px;
-        font-weight: normal;
-      }
-      .xlbox {
-        h4 {
-          font-size: 14px;
-          color: #333;
-          line-height: 24px;
-          font-weight: normal;
-        }
-        margin-left: 16px;
-        .zzbox {
-          h4 {
-          }
-          .el-checkbox-group {
-            // display: flex;
-            // flex-direction: column;
-            margin-left: 22px;
-            .el-checkbox {
-              line-height: 28px;
-              //width: 196px;
-              .el-checkbox__label {
-                b {
-                  margin-left: 18px;
-                  font-weight: normal;
-                  font-size: 12px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    .nochannel {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-  .w50 {
-    width: 50px;
-  }
-  .setTimeTd {
-    h3 {
-      margin: 8px 0px;
-      font-size: 16px;
-      line-height: 24px;
-    }
-    .flexTimeGz {
-      display: flex;
-      flex-wrap: wrap;
-      .timeGz {
-        line-height: 32px;
-        margin-right: 16px;
-        b {
-          font-weight: normal;
-          color: @color-primary;
-        }
-        span {
-          margin: 0px 8px;
-        }
-      }
-    }
-
-    .setCheckbox {
-      .el-table__header .el-table-column--selection .cell .el-checkbox:after {
-        color: #333;
-        content: "全选";
-        font-size: 16px;
-        margin-left: 12px;
-        font-weight: bold;
-      }
-    }
-  }
-  .chooseTDBox {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-    label {
-      margin-right: 8px;
-    }
-  }
-  .treeTable {
-    margin-top: 16px;
-  }
-}
-</style>

src/views/devicePhotoSchedule/index copy.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="deviceInformation">
+    <div class="deviceBox">
+      <div class="deviceBtnGroup">
+        <h4>拍照时间表设置</h4>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          @click.native.stop="handleAdddevice()"
+          >新增</el-button
+        >
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="deviceTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
+          v-loading="loading"
+        >
+          <!-- <el-table-column type="index" width="55"> </el-table-column>
+          <el-table-column type="selection" width="55"> </el-table-column> -->
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column label="名称" show-overflow-tooltip>
+            <template slot-scope="scope">{{ scope.row.name }}</template>
+          </el-table-column>
+          <!-- <el-table-column label="时间表类型" show-overflow-tooltip>
+            <template>时间表类型</template>
+          </el-table-column> -->
+          <el-table-column label="时间表规则">
+            <template slot-scope="scope">
+              <p
+                class="timeGz"
+                v-for="(val, index) in scope.row.list"
+                :key="index"
+              >
+                <span>
+                  {{
+                    val.startTime.substring(0, val.startTime.lastIndexOf(":"))
+                  }}</span
+                >
+                ~
+                <span>{{
+                  val.endTime.substring(0, val.endTime.lastIndexOf(":"))
+                }}</span>
+                间隔：<b>{{ val.span }}分钟</b>
+              </p>
+              <!-- <ul
+                class="rulesBox"
+                v-for="(item, value) in scope.row.list"
+                :key="value"
+              >
+                <li><span>开始时间：</span>{{ item.startTime }}</li>
+                <li><span>结束时间：</span>{{ item.endTime }}</li>
+                <li>
+                  <span>时间间隔（分）:</span>
+                  <el-tag>{{ item.span }}</el-tag>
+                </li>
+              </ul> -->
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="remark"
+            label="备注"
+            show-overflow-tooltip
+          ></el-table-column>
+          <el-table-column fixed="right" label="操作" width="200">
+            <template slot-scope="scope">
+              <el-button
+                @click.native.stop="handleResive(scope.row)"
+                type="text"
+                >修改</el-button
+              >
+              <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(scope.row)"
+                >删除</el-button
+              >
+              <el-button type="text" @click.native.stop="handleSet(scope.row)"
+                >设置</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <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"
+            background
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+    <!-- 新增时间表 -->
+    <adddeviceDialog :title="title" ref="adddeviceDialogref"></adddeviceDialog>
+    <!-- 设置时间表 -->
+    <setdevice ref="setdeviceDialogref"></setdevice>
+  </div>
+</template>
+<script>
+import {
+  getScheduleRulelListJoggle,
+  deleteScheduleRulel,
+} from "@/utils/api/index";
+import adddeviceDialog from "./components/adddeviceDialog.vue";
+import setdevice from "./components/setdevice.vue";
+
+export default {
+  components: {
+    adddeviceDialog,
+    setdevice,
+  },
+  data() {
+    return {
+      title: "", //弹窗标题
+      deviceTableData: [],
+      //multipleSelection: [], //获取当前选中
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      loading: true,
+    };
+  },
+  created() {
+    this.deviceList();
+  },
+  methods: {
+    //获取拍照时间表数据列表
+    deviceList() {
+      this.loading = true;
+      getScheduleRulelListJoggle({
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      })
+        .then((res) => {
+          this.deviceTableData = res.data.list;
+          this.total = res.data.total;
+          this.loading = false;
+        })
+        .catch((err) => {});
+    },
+    //点击行选中
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+    // 新建
+    handleAdddevice() {
+      this.title = "新增";
+      this.$refs.adddeviceDialogref.display();
+      this.$refs.adddeviceDialogref.getdataform(null);
+    },
+
+    //修改
+    handleResive(data) {
+      this.title = "修改";
+      this.$refs.adddeviceDialogref.display();
+      this.$refs.adddeviceDialogref.getdataform(data);
+    },
+
+    //设置
+    handleSet(data) {
+      this.$refs.setdeviceDialogref.display();
+      this.$refs.setdeviceDialogref.getdataform(data);
+    },
+
+    //删除数据
+    handleDelete(data) {
+      let deleteArr = [];
+      deleteArr.push({
+        id: data.id,
+      });
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteScheduleRulel({ list: deleteArr }).then((res) => {
+            this.deviceList(); //刷新
+          });
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.deviceList();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.deviceList();
+    },
+  },
+};
+</script>
+<style lang="less">
+.deviceInformation {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: @color-white;
+
+  .deviceBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+  }
+  .deviceBtnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .deviceTable {
+    margin-top: 16px;
+    height: calc(100% - 48px);
+    //background: #fcc;
+    .rulesBox {
+      display: flex;
+      flex-direction: row;
+      li {
+        list-style: none;
+        margin-right: 24px;
+        line-height: 24px;
+        span {
+          margin-right: 4px;
+        }
+        .el-tag--small {
+          height: 16px;
+          padding: 0 8px;
+          line-height: 16px;
+        }
+      }
+    }
+    .timeGz {
+      line-height: 32px;
+      b {
+        font-weight: normal;
+        color: @color-primary;
+      }
+      span {
+        margin: 0px 8px;
+      }
+    }
+  }
+}
+</style>

src/views/devicePhotoSchedule/index.vue

@@ -13,7 +13,7 @@
       <div class="deviceTable">
         <el-table
           ref="multipleTable"
-          :data="deviceTableData"
+          :data="newList"
           stripe
           tooltip-effect="dark"
           style="width: 100%"
@@ -30,39 +30,41 @@
           <el-table-column label="名称" show-overflow-tooltip>
             <template slot-scope="scope">{{ scope.row.name }}</template>
           </el-table-column>
-          <!-- <el-table-column label="时间表类型" show-overflow-tooltip>
-            <template>时间表类型</template>
-          </el-table-column> -->
           <el-table-column label="时间表规则">
             <template slot-scope="scope">
               <p
                 class="timeGz"
-                v-for="(val, index) in scope.row.list"
+                v-for="(val, index) in scope.row.listTime"
                 :key="index"
               >
                 <span>
                   {{
-                    val.startTime.substring(0, val.startTime.lastIndexOf(":"))
+                    new Date(val.startTime).getHours() < 10
+                      ? "0" + new Date(val.startTime).getHours()
+                      : new Date(val.startTime).getHours()
+                  }}:
+                  {{
+                    new Date(val.startTime).getMinutes() < 10
+                      ? "0" + new Date(val.startTime).getMinutes()
+                      : new Date(val.startTime).getMinutes()
                   }}</span
                 >
+
                 ~
-                <span>{{
+                <span
-                  val.endTime.substring(0, val.endTime.lastIndexOf(":"))
+                  >{{
-                }}</span>
+                    new Date(val.endTime).getHours() < 10
+                      ? "0" + new Date(val.endTime).getHours()
+                      : new Date(val.endTime).getHours()
+                  }}:
+                  {{
+                    new Date(val.endTime).getMinutes() < 10
+                      ? "0" + new Date(val.endTime).getMinutes()
+                      : new Date(val.endTime).getMinutes()
+                  }}</span
+                >
                 间隔：<b>{{ val.span }}分钟</b>
               </p>
-              <!-- <ul
-                class="rulesBox"
-                v-for="(item, value) in scope.row.list"
-                :key="value"
-              >
-                <li><span>开始时间：</span>{{ item.startTime }}</li>
-                <li><span>结束时间：</span>{{ item.endTime }}</li>
-                <li>
-                  <span>时间间隔（分）:</span>
-                  <el-tag>{{ item.span }}</el-tag>
-                </li>
-              </ul> -->
             </template>
           </el-table-column>
 
@@ -127,6 +129,8 @@ export default {
     return {
       title: "", //弹窗标题
       deviceTableData: [],
+      newList: [],
+      listTime: [],
       //multipleSelection: [], //获取当前选中
       page: 1, // 当前页数
       pageSize: 20, // 每页数量
@@ -146,9 +150,94 @@ export default {
         pagesize: this.pageSize,
       })
         .then((res) => {
+          this.newList = [];
           this.deviceTableData = res.data.list;
           this.total = res.data.total;
           this.loading = false;
+          // for (var i = 0; i < this.deviceTableData.list.length; i++) {
+          //   console.log(this.deviceTableData.list[i]);
+          // }
+          console.log(this.deviceTableData);
+
+          for (var i = 0; i < this.deviceTableData.length; i++) {
+            var arr = [];
+            console.log(this.deviceTableData[i]);
+            for (var k = 0; k < this.deviceTableData[i].list.length; k++) {
+              if (k % 3 == 0) {
+                var obj = {};
+                obj.span =
+                  this.deviceTableData[i].list[k].hour * 60 +
+                  this.deviceTableData[i].list[k].minute;
+                console.log("时间间隔");
+              } else if (k % 3 == 1) {
+                console.log("开始时间");
+                console.log("a");
+                // obj.startTime =
+                //   this.deviceTableData[i].list[k].hour +
+                //   ":" +
+                //   this.deviceTableData[i].list[k].minute;
+                // console.log(new Date());
+                let timeDate = new Date();
+                timeDate.setHours(this.deviceTableData[i].list[k].hour);
+                timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
+                console.log(timeDate);
+                // console.log(new Date().getHours());
+                // console.log(
+                //   new Date().setHours(this.deviceTableData[i].list[k].hour)
+                // );
+                // console.log(d.getHours() + ":" + d.getMinutes());
+                // if (timeDate.getHours() < 10) {
+                //   console.log(timeDate.getHours());
+                //   obj.startTime =
+                //     "0" + timeDate.getHours() + ":" + timeDate.getMinutes();
+                // } else {
+
+                // }
+
+                // let timeHour =
+                //   timeDate.getHours() < 10
+                //     ? "0" + timeDate.getHours()
+                //     : timeDate.getHours();
+                // let timeMinute =
+                //   timeDate.getMinutes() < 10
+                //     ? "0" + timeDate.getMinutes()
+                //     : timeDate.getMinutes();
+                obj.startTime = timeDate.toUTCString();
+              } else if (k % 3 == 2) {
+                console.log("结束时间");
+                obj.endTime =
+                  this.deviceTableData[i].list[k].hour +
+                  ":" +
+                  this.deviceTableData[i].list[k].minute;
+                let timeDate = new Date();
+                timeDate.setHours(this.deviceTableData[i].list[k].hour);
+                timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
+                // obj.endTime = c.toJSON();
+                let timeHour =
+                  timeDate.getHours() < 10
+                    ? "0" + timeDate.getHours()
+                    : timeDate.getHours();
+                let timeMinute =
+                  timeDate.getMinutes() < 10
+                    ? "0" + timeDate.getMinutes()
+                    : timeDate.getMinutes();
+                //obj.startTime = timeHour + ":" + timeMinute;
+                // obj.endTime = timeHour + ":" + timeMinute;
+                obj.endTime = timeDate.toUTCString();
+                arr.push(obj);
+              }
+              console.log(this.deviceTableData[i].list[k]);
+            }
+            this.newList.push({
+              id: this.deviceTableData[i].id,
+              list: this.deviceTableData[i].list,
+              name: this.deviceTableData[i].name,
+              remark: this.deviceTableData[i].remark,
+              listTime: arr,
+            });
+          }
+          console.log("this.newList");
+          console.log(this.newList);
         })
         .catch((err) => {});
     },

src/views/management/monitoringEquipment/photographicDevice/index.vue

@@ -3,9 +3,20 @@
     <div class="photoBox">
       <div class="photoGraphicBtnGroup">
         <h4>拍照装置管理</h4>
-        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
+        <div>
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            @click="handleAddPhoto()"
             >新增</el-button
           >
+          <el-button
+            type="primary"
+            icon="el-icon-document"
+            @click="handleExport()"
+            >导出</el-button
+          >
+        </div>
       </div>
       <div class="searchBox">
         <el-form :inline="true" :model="formdata" class="demo-form-inline">
@@ -150,6 +161,13 @@
             :formatter="dateFormat"
           >
           </el-table-column>
+          <el-table-column
+            prop="protocolName"
+            label="规约名称"
+            show-overflow-tooltip
+            min-width="90"
+            v-if="roleUser != 2"
+          />
           <el-table-column
             prop="lastHeartbeat"
             label="最后一次心跳时间"
@@ -418,6 +436,7 @@ import {
   // resetTerminalApi,
   // setTermGPSJoggle,
   getSearchInfo,
+  getTerminalListExcel,
 } from "@/utils/api/index";
 import moment from "moment";
 import addPhotoDialog from "./components/addPhotoDialog.vue";
@@ -599,6 +618,11 @@ export default {
       this.$refs.addPhotoDialogref.display();
       this.$refs.addPhotoDialogref.getdataform(null);
     },
+    //导出
+    handleExport() {
+      window.location.href = "/api/api/getTerminalListExcel";
+    },
+
     //handleResive 修改线路数据
     handleRevisePhoto(data) {
       this.photoDialogTitle = "修改";

src/views/management/userEquipment/lineInformation/components/addTowerDialog.vue

@@ -24,6 +24,9 @@
       <el-form-item label="杆塔名称：" prop="towerName">
         <el-input v-model="formdata.towerName" autocomplete="off"></el-input>
       </el-form-item>
+      <el-form-item label="杆塔地址：" prop="address">
+        <el-input v-model="formdata.address" autocomplete="off"></el-input>
+      </el-form-item>
     </el-form>
 
     <div slot="footer" class="dialog-footer">
@@ -53,6 +56,9 @@ export default {
             trigger: "blur",
           },
         ],
+        address: [
+          { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        ],
       },
     };
   },
@@ -74,6 +80,7 @@ export default {
               {
                 lineId: this.formdata.id,
                 name: this.formdata.towerName,
+                address: this.formdata.address,
               },
             ],
           })

src/views/management/userEquipment/towerInformation/components/addDialog.vue

@@ -61,6 +61,9 @@ export default {
         lineId: [
           { required: true, message: "请选择线路编号", trigger: "blur" },
         ],
+        // address: [
+        //   { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        // ],
         order: [{ required: true, message: "请输入排序号", trigger: "blur" }],
       },
     };

src/views/pictureRotation/index.vue

@@ -34,8 +34,8 @@
             v-if="index < colNum * i && index >= colNum * (i - 1)"
             :key="'col-' + index"
           >
-            <div class="imgList">
+            <div class="imgList" @click="handleShowHistory(item)">
-              <viewer
+              <!-- <viewer
                 :options="OptionssalseImg"
                 v-if="item.path !== null && item.path.indexOf('videos') == -1"
                 class="bigpic"
@@ -46,7 +46,18 @@
                 "
               >
                 <img :src="item.path + '!1366x768'" />
-              </viewer>
+              </viewer> -->
+              <div
+                v-if="item.path !== null && item.path.indexOf('videos') == -1"
+                class="bigpic"
+                :style="
+                  item.path
+                    ? 'backgroundImage:url(' + item.path + '!128x72)'
+                    : ''
+                "
+              >
+                <img :src="item.path + '!1366x768'" />
+              </div>
               <div
                 class="bigpic"
                 v-else-if="
@@ -63,21 +74,19 @@
               <div class="bigpic" v-else>
                 <img src="../../assets/img/nopic.jpg" />
               </div>
-              <p class="infoTop">
+              <div class="picInfo">
-                {{ item.linename }}-{{ item.towername }}-{{
+                <p>
+                  {{ item.linename }}-{{ item.towername }}-（{{
                     item.alias !== null && item.alias !== ""
                       ? item.alias
                       : item.channnelname
-                }}
+                  }}）
-                <!-- {{
-                  item.displayname !== null && item.displayname !== ""
-                    ? item.displayname
-                    : item.cmdid
-                }}- -->
                 </p>
-              <p class="infoBottom" v-if="item.photoTime !== null">
+                <p class="timeinfo" v-if="item.photoTime !== null">
-                {{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} 
+                  {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
                 </p>
+                <p class="timeinfo" v-else>无抓拍</p>
+              </div>
             </div>
           </el-col>
         </el-row>
@@ -141,12 +150,37 @@
         <el-button type="primary" @click="submitForm()">确 定</el-button>
       </div>
     </el-dialog>
+    <el-dialog
+      title="历史图片"
+      :visible.sync="historyPicdialog"
+      width="1366px"
+      :close-on-click-modal="false"
+      class="showDialogHistoryPic"
+    >
+      <div class="title">
+        {{ picInfoData.linename }}-{{ picInfoData.towername }}-（{{
+          picInfoData.alias !== null && picInfoData.alias !== ""
+            ? picInfoData.alias
+            : picInfoData.channnelname
+        }}） {{ $moment(picInfoData.photoTime).format("YYYY-MM-DD ") }}
+      </div>
+      <carouselChart
+        ref="carouselpic"
+        :terminalPhoto="terminalPhoto"
+        v-if="terminalPhoto.length > 0"
+        v-loading="historyPicLoading"
+      ></carouselChart>
+    </el-dialog>
   </div>
 </template>
 <script>
-import { getPictureList } from "@/utils/api/index";
+import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
-import qs from "qs";
+import carouselChart from "../components/carouselChart.vue";
+
 export default {
+  components: {
+    carouselChart,
+  },
   data() {
     return {
       OptionssalseImg: {
@@ -200,8 +234,8 @@ export default {
       //画面布局
       rowNum: "",
       colNum: "",
-      rowradio: "2",
+      rowradio: "4",
-      colradio: "2",
+      colradio: "4",
       selLayout: 1,
       options: [
         {
@@ -213,9 +247,55 @@ export default {
           label: "倒序",
         },
       ],
+
+      //点击查看历史图片
+      picInfoData: {}, //获取当前图片的信息
+      historyPicdialog: false,
+      historyPicLoading: false,
+      terminalPhoto: [], //获取装置当前图片数据
+      nopicPath: require("@/assets/img/nopic.jpg"),
     };
   },
   methods: {
+    //点击图片弹出历史图
+    handleShowHistory(item) {
+      console.log(item);
+      this.picInfoData = item;
+      console.log(this.picInfoData);
+      this.historyPicdialog = true;
+
+      //this.getTerminalPhotoList(item.cmdid);
+      this.getTerminalPhotoList(item.channelid, item.photoTime, item.termid);
+    },
+    //获取图片
+    getTerminalPhotoList(channelid, date, termId) {
+      this.terminalPhoto = [];
+
+      this.historyPicLoading = true;
+      getTerminalPhotoListJoggle({
+        channelid: channelid,
+        time: date,
+        terminalid: termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.historyPicLoading = false;
+          if (res.data.list.length == 0) {
+            this.terminalPhoto = [
+              {
+                path: this.nopicPath,
+                termId: termId,
+                mediatype: 0,
+              },
+            ];
+          } else {
+            this.terminalPhoto = res.data.list;
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
     setbtn() {
       this.isRuning = false;
       this.pauseCountdown();
@@ -225,16 +305,16 @@ export default {
         : 15;
       this.rowNum = parseInt(localStorage.getItem("row"))
         ? parseInt(localStorage.getItem("row"))
-        : 2;
+        : 4;
       this.colNum = parseInt(localStorage.getItem("col"))
         ? parseInt(localStorage.getItem("col"))
-        : 2;
+        : 4;
       this.rowradio = parseInt(localStorage.getItem("row"))
         ? parseInt(localStorage.getItem("row"))
-        : 2;
+        : 4;
       this.colradio = parseInt(localStorage.getItem("col"))
         ? parseInt(localStorage.getItem("col"))
-        : 2;
+        : 4;
     },
     submitForm() {
       localStorage.setItem("totalTime", this.selSpeed);
@@ -242,10 +322,10 @@ export default {
       localStorage.setItem("col", this.colradio);
       this.rowNum = parseInt(localStorage.getItem("row"))
         ? parseInt(localStorage.getItem("row"))
-        : 2;
+        : 4;
       this.colNum = parseInt(localStorage.getItem("col"))
         ? parseInt(localStorage.getItem("col"))
-        : 2;
+        : 4;
       this.pageSize = this.rowradio * this.colradio;
       this.setdialog = false;
       this.$message.success("设置成功");
@@ -327,12 +407,13 @@ export default {
       : 15;
     this.rowradio = this.rowNum = parseInt(localStorage.getItem("row"))
       ? parseInt(localStorage.getItem("row"))
-      : 2;
+      : 4;
     this.colradio = this.colNum = parseInt(localStorage.getItem("col"))
       ? parseInt(localStorage.getItem("col"))
-      : 2;
+      : 4;
     this.pageSize = this.rowradio * this.colradio;
-    this.toggleCountdown();
+    //this.toggleCountdown();
+    this.getPicData();
   },
   created() {},
 
@@ -410,29 +491,22 @@ export default {
         height: 100%;
         cursor: pointer;
       }
-      .infoTop {
+      .picInfo {
         position: absolute;
-        bottom: 28px;
+        background: #169e8ca1;
-        left: 0px;
+        color: #fff;
-        font-size: 14px;
+        height: auto;
-        background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
+        font-size: 12px;
-        color: @color-white;
+        left: 0;
-        font-weight: normal;
+        bottom: 0;
-        margin-top: 2px;
+        width: 100%;
-        padding-left: 5px;
+        text-align: center;
-        padding-right: 5px;
+        p {
+          margin-top: 4px;
+        }
+        .timeinfo {
+          margin-bottom: 4px;
         }
-      .infoBottom {
-        position: absolute;
-        bottom: 4px;
-        color: @color-white;
-        left: 0px;
-        font-size: 14px;
-        background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
-        font-weight: normal;
-        margin-top: 2px;
-        padding-left: 5px;
-        padding-right: 5px;
       }
     }
   }
@@ -463,6 +537,36 @@ export default {
       }
     }
   }
+  .showDialogHistoryPic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-dialog {
+      width: 70% !important;
+      height: 90%;
+      transform: none;
+      margin: auto;
+      left: auto;
+      top: auto;
+    }
+
+    .el-dialog__body {
+      height: calc(100% - 70px);
+      .title {
+        height: 32px;
+        padding-left: 12px;
+        line-height: 32px;
+        color: #fff;
+        font-size: 14px;
+        background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
+        text-align: center;
+      }
+      .thumb-example {
+        //height: 100%;
+      }
+    }
+  }
 }
 [v-cloak] {
   display: none;

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/components/setschedule.vue

@@ -50,26 +50,47 @@
                 <div class="w8">时间表:</div>
                 <div class="w80 flexonly" v-loading="timeloading">
                   <el-tag
+                    v-if="timeProtocol == '65283'"
                     class="mr10 mt10"
                     size="mini"
                     v-for="(val, index) in this.shedulenr"
                     :key="index"
-                    >{{ val.substring(0, val.lastIndexOf(":")) }}</el-tag
+                    >{{ val.substring(val.length - 5) }}</el-tag
                   >
+                  <el-tag
+                    v-if="timeProtocol == '65286'"
+                    class="mr10 mt10"
+                    size="mini"
+                    v-for="(val, index) in this.shedulenr"
+                    :key="index"
+                    >{{ $moment(val).format("HH:mm") }}</el-tag
+                  >
+                  <!-- {{ val.substring(val.length - 5) }} -->
                 </div>
               </div>
               <div class="rightTime" v-if="newshedulenr.length !== 0">
                 <div class="w8">装置时间表:</div>
-                <span class="offtime" v-if="offsetnum !== ''"
+                <span
+                  class="offtime"
+                  v-if="offsetnum !== '' || offsetnum !== null"
                   >(偏移时间{{ offsetnum }}分钟)</span
                 >
                 <div class="w80 flexonly" v-loading="timeloading">
                   <el-tag
+                    v-if="timeProtocol == '65283'"
                     class="mr10 mt10"
                     size="mini"
                     v-for="(val, index) in this.newshedulenr"
                     :key="index"
-                    >{{ val.substring(0, val.lastIndexOf(":")) }}</el-tag
+                    >{{ val.substring(val.length - 5) }}</el-tag
+                  >
+                  <el-tag
+                    v-if="timeProtocol == '65286'"
+                    class="mr10 mt10"
+                    size="mini"
+                    v-for="(val, index) in this.newshedulenr"
+                    :key="index"
+                    >{{ $moment(val).format("HH:mm") }}</el-tag
                   >
                 </div>
               </div>
@@ -92,7 +113,7 @@
         <div class="deviceTable">
           <el-table
             ref="multipleTable"
-            :data="deviceTableData"
+            :data="newList"
             tooltip-effect="dark"
             stripe
             style="width: 100%"
@@ -101,25 +122,42 @@
             <el-table-column label="名称" show-overflow-tooltip>
               <template slot-scope="scope">{{ scope.row.name }}</template>
             </el-table-column>
-            <el-table-column label="时间表类型" show-overflow-tooltip>
+            <!-- <el-table-column label="时间表类型" show-overflow-tooltip>
               <template>按时间段</template>
-            </el-table-column>
+            </el-table-column> -->
-            <el-table-column label="时间表规则" width="300">
+            <el-table-column label="时间表规则" width="360px">
               <template slot-scope="scope">
                 <p
                   class="timeGz"
-                  v-for="(val, index) in scope.row.list"
+                  v-for="(val, index) in scope.row.listTime"
                   :key="index"
                 >
                   <span>
                     {{
-                      val.startTime.substring(0, val.startTime.lastIndexOf(":"))
+                      new Date(val.startTime).getHours() < 10
+                        ? "0" + new Date(val.startTime).getHours()
+                        : new Date(val.startTime).getHours()
+                    }}:
+                    {{
+                      new Date(val.startTime).getMinutes() < 10
+                        ? "0" + new Date(val.startTime).getMinutes()
+                        : new Date(val.startTime).getMinutes()
                     }}</span
                   >
+
                   ~
-                  <span>{{
+                  <span
-                    val.endTime.substring(0, val.endTime.lastIndexOf(":"))
+                    >{{
-                  }}</span>
+                      new Date(val.endTime).getHours() < 10
+                        ? "0" + new Date(val.endTime).getHours()
+                        : new Date(val.endTime).getHours()
+                    }}:
+                    {{
+                      new Date(val.endTime).getMinutes() < 10
+                        ? "0" + new Date(val.endTime).getMinutes()
+                        : new Date(val.endTime).getMinutes()
+                    }}</span
+                  >
                   间隔：<b>{{ val.span }}分钟</b>
                 </p>
               </template>
@@ -183,8 +221,31 @@
                   v-for="(val, index) in scheduleInfo"
                   :key="index"
                 >
-                  <span>{{ val.startTime }}</span> ~
+                  <span
-                  <span>{{ val.endTime }}</span>
+                    >{{
+                      new Date(val.startTime).getHours() < 10
+                        ? "0" + new Date(val.startTime).getHours()
+                        : new Date(val.startTime).getHours()
+                    }}:
+                    {{
+                      new Date(val.startTime).getMinutes() < 10
+                        ? "0" + new Date(val.startTime).getMinutes()
+                        : new Date(val.startTime).getMinutes()
+                    }}</span
+                  >
+                  ~
+                  <span
+                    >{{
+                      new Date(val.endTime).getHours() < 10
+                        ? "0" + new Date(val.endTime).getHours()
+                        : new Date(val.endTime).getHours()
+                    }}:
+                    {{
+                      new Date(val.endTime).getMinutes() < 10
+                        ? "0" + new Date(val.endTime).getMinutes()
+                        : new Date(val.endTime).getMinutes()
+                    }}</span
+                  >
                   间隔：<b>{{ val.span }}分钟</b>
                 </p>
               </div>
@@ -245,6 +306,7 @@ import {
   getCmaSchelduleUpload,
   getTermStatus,
 } from "@/utils/api/index";
+import moment from "moment";
 export default {
   props: {
     title: String,
@@ -259,6 +321,8 @@ export default {
       selaccess: "", //选中的通道
       shedulenr: [], //查询的时间表
       deviceTableData: [], //时间表-表格
+      newList: [],
+      listTime: [],
       page: 1, // 当前页数
       pageSize: 10, // 每页数量
       total: 0, //总条数
@@ -295,6 +359,7 @@ export default {
       offsetnum: "",
       setNum: Math.floor(Math.random() * 10),
       compareloading: false,
+      timeProtocol: "",
     };
   },
   mounted() {
@@ -305,9 +370,11 @@ export default {
       console.log(tab, event);
     },
     //获取单个设备通道
-    getSingleAccess(id, zzid) {
+    getSingleAccess(id, zzid, protocol) {
       this.newcmdzzid = zzid;
       this.selfacilityId = id;
+      this.timeProtocol = protocol;
+      console.log(this.timeProtocol);
       getChannelListJoggle({ termid: id })
         .then((res) => {
           this.accesslist = res.data.list;
@@ -321,10 +388,97 @@ export default {
             terminalid: this.selfacilityId,
           })
             .then((res) => {
-              // this.$message.success("查询成功");
-              // this.shedulenr = res.data.list.join("; ")
               this.shedulenr = res.data.list;
+              console.log(this.shedulenr);
+              //湖南规约
+              if (this.timeProtocol == "65283") {
+                console.log("1111111111111111111111111111111111111");
+                var hnarr = [];
+                for (var i = 0; i < this.shedulenr.length; i++) {
+                  if (i % 3 == 0) {
+                    var hnobj = {};
+                    hnobj.span =
+                      this.shedulenr[i].hour * 60 + this.shedulenr[i].minute;
+                    console.log("时间间隔");
+                  } else if (i % 3 == 1) {
+                    console.log("开始时间");
+                    console.log("a");
+                    let timeDate = new Date();
+                    timeDate.setHours(this.shedulenr[i].hour);
+                    timeDate.setMinutes(this.shedulenr[i].minute);
+                    console.log(timeDate);
+                    hnobj.startTime = timeDate;
+                  } else if (i % 3 == 2) {
+                    console.log("结束时间");
+                    hnobj.endTime =
+                      this.shedulenr[i].hour + ":" + this.shedulenr[i].minute;
+                    let timeDate = new Date();
+                    timeDate.setHours(this.shedulenr[i].hour);
+                    timeDate.setMinutes(this.shedulenr[i].minute);
+                    // hnobj.endTime = c.toJSON();
+                    let timeHour =
+                      timeDate.getHours() < 10
+                        ? "0" + timeDate.getHours()
+                        : timeDate.getHours();
+                    let timeMinute =
+                      timeDate.getMinutes() < 10
+                        ? "0" + timeDate.getMinutes()
+                        : timeDate.getMinutes();
+                    hnobj.endTime = timeDate;
+                    hnarr.push(hnobj);
+                  }
+                }
+                console.log("222222222222222222");
+                console.log(hnarr);
+                console.log("22222222222222222222222");
+                let dayArr = [];
+                //根据开始时间结束时间生产数组
+                for (let k = 0; k < hnarr.length; k++) {
+                  console.log(hnarr[k].startTime);
+                  console.log(hnarr[k].endTime);
+                  console.log(hnarr[k].span);
+                  let startDay = hnarr[k].startTime;
+                  let endDay = hnarr[k].endTime;
+                  console.log(startDay, endDay);
+                  let startVal = this.$moment(new Date(startDay)).format(
+                    "YYYY-MM-DD HH:mm"
+                  );
+                  console.log(startVal);
+                  while (this.$moment(startVal).isBefore(endDay)) {
+                    dayArr.push(startVal);
+                    // 自增
+                    startVal = this.$moment(new Date(startVal))
+                      .add(hnarr[k].span, "minute")
+                      .format("YYYY-MM-DD HH:mm");
+                    console.log(startVal);
+                  }
+
+                  // // 将结束日期的天放进数组
+                  dayArr.push(
+                    this.$moment(new Date(endDay)).format("YYYY-MM-DD HH:mm")
+                  );
+                  console.log(dayArr);
+                  this.shedulenr = dayArr;
+                }
+              }
+              //河南规约
+              if (this.timeProtocol == "65286") {
+                console.log("河南规约");
+                var hnarr = [];
+                for (var i = 0; i < this.shedulenr.length; i++) {
+                  console.log(this.shedulenr[i].hour);
+                  let timeDate = new Date();
+                  timeDate.setHours(this.shedulenr[i].hour);
+                  timeDate.setMinutes(this.shedulenr[i].minute);
+
+                  console.log(timeDate);
+                  hnarr.push(timeDate);
+                }
+                console.log(hnarr);
+                this.shedulenr = hnarr;
+              }
               this.offsetnum = res.data.offset;
+
               this.loading = false;
             })
             .catch((err) => {
@@ -343,9 +497,95 @@ export default {
         terminalid: this.selfacilityId,
       })
         .then((res) => {
-          // this.$message.success("查询成功");
-          // this.shedulenr = res.data.list.join("; ")
           this.shedulenr = res.data.list;
+          console.log(this.shedulenr);
+          //湖南规约
+          if (this.timeProtocol == "65283") {
+            console.log("1111111111111111111111111111111111111");
+            var hnarr = [];
+            for (var i = 0; i < this.shedulenr.length; i++) {
+              if (i % 3 == 0) {
+                var hnobj = {};
+                hnobj.span =
+                  this.shedulenr[i].hour * 60 + this.shedulenr[i].minute;
+                console.log("时间间隔");
+              } else if (i % 3 == 1) {
+                console.log("开始时间");
+                console.log("a");
+                let timeDate = new Date();
+                timeDate.setHours(this.shedulenr[i].hour);
+                timeDate.setMinutes(this.shedulenr[i].minute);
+                console.log(timeDate);
+                hnobj.startTime = timeDate;
+              } else if (i % 3 == 2) {
+                console.log("结束时间");
+                hnobj.endTime =
+                  this.shedulenr[i].hour + ":" + this.shedulenr[i].minute;
+                let timeDate = new Date();
+                timeDate.setHours(this.shedulenr[i].hour);
+                timeDate.setMinutes(this.shedulenr[i].minute);
+                // hnobj.endTime = c.toJSON();
+                let timeHour =
+                  timeDate.getHours() < 10
+                    ? "0" + timeDate.getHours()
+                    : timeDate.getHours();
+                let timeMinute =
+                  timeDate.getMinutes() < 10
+                    ? "0" + timeDate.getMinutes()
+                    : timeDate.getMinutes();
+                hnobj.endTime = timeDate;
+                hnarr.push(hnobj);
+              }
+            }
+            console.log("222222222222222222");
+            console.log(hnarr);
+            console.log("22222222222222222222222");
+            let dayArr = [];
+            //根据开始时间结束时间生产数组
+            for (let k = 0; k < hnarr.length; k++) {
+              console.log(hnarr[k].startTime);
+              console.log(hnarr[k].endTime);
+              console.log(hnarr[k].span);
+              let startDay = hnarr[k].startTime;
+              let endDay = hnarr[k].endTime;
+              console.log(startDay, endDay);
+              let startVal = this.$moment(new Date(startDay)).format(
+                "YYYY-MM-DD HH:mm"
+              );
+              console.log(startVal);
+              while (this.$moment(startVal).isBefore(endDay)) {
+                dayArr.push(startVal);
+                // 自增
+                startVal = this.$moment(new Date(startVal))
+                  .add(hnarr[k].span, "minute")
+                  .format("YYYY-MM-DD HH:mm");
+                console.log(startVal);
+              }
+
+              // // 将结束日期的天放进数组
+              dayArr.push(
+                this.$moment(new Date(endDay)).format("YYYY-MM-DD HH:mm")
+              );
+              console.log(dayArr);
+              this.shedulenr = dayArr;
+            }
+          }
+          //河南规约
+          if (this.timeProtocol == "65286") {
+            console.log("河南规约");
+            var hnarr = [];
+            for (var i = 0; i < this.shedulenr.length; i++) {
+              console.log(this.shedulenr[i].hour);
+              let timeDate = new Date();
+              timeDate.setHours(this.shedulenr[i].hour);
+              timeDate.setMinutes(this.shedulenr[i].minute);
+
+              console.log(timeDate);
+              hnarr.push(timeDate);
+            }
+            console.log(hnarr);
+            this.shedulenr = hnarr;
+          }
           this.offsetnum = res.data.offset;
           this.loading = false;
         })
@@ -386,6 +626,99 @@ export default {
               // this.shedulenr = res.data.list.join("; ")
               this.compareloading = false;
               this.newshedulenr = res.data.list;
+              //湖南规约
+              if (this.timeProtocol == "65283") {
+                console.log("湖南规约");
+                console.log("1111111111111111111111111111111111111");
+                var hnarr = [];
+                for (var i = 0; i < this.newshedulenr.length; i++) {
+                  if (i % 3 == 0) {
+                    var hnobj = {};
+                    hnobj.span =
+                      this.newshedulenr[i].hour * 60 +
+                      this.newshedulenr[i].minute;
+                    console.log("时间间隔");
+                  } else if (i % 3 == 1) {
+                    console.log("开始时间");
+                    console.log("a");
+                    let timeDate = new Date();
+                    timeDate.setHours(this.newshedulenr[i].hour);
+                    timeDate.setMinutes(this.newshedulenr[i].minute);
+                    console.log(timeDate);
+                    hnobj.startTime = timeDate;
+                  } else if (i % 3 == 2) {
+                    console.log("结束时间");
+                    hnobj.endTime =
+                      this.newshedulenr[i].hour +
+                      ":" +
+                      this.newshedulenr[i].minute;
+                    let timeDate = new Date();
+                    timeDate.setHours(this.newshedulenr[i].hour);
+                    timeDate.setMinutes(this.newshedulenr[i].minute);
+                    // hnobj.endTime = c.toJSON();
+                    let timeHour =
+                      timeDate.getHours() < 10
+                        ? "0" + timeDate.getHours()
+                        : timeDate.getHours();
+                    let timeMinute =
+                      timeDate.getMinutes() < 10
+                        ? "0" + timeDate.getMinutes()
+                        : timeDate.getMinutes();
+                    hnobj.endTime = timeDate;
+                    hnarr.push(hnobj);
+                  }
+                }
+                console.log("222222222222222222");
+                console.log(hnarr);
+                console.log("22222222222222222222222");
+                let dayArr = [];
+                //根据开始时间结束时间生产数组
+                for (let k = 0; k < hnarr.length; k++) {
+                  console.log(hnarr[k].startTime);
+                  console.log(hnarr[k].endTime);
+                  console.log(hnarr[k].span);
+                  let startDay = hnarr[k].startTime;
+                  let endDay = hnarr[k].endTime;
+                  console.log(startDay, endDay);
+                  let startVal = this.$moment(new Date(startDay)).format(
+                    "YYYY-MM-DD HH:mm"
+                  );
+                  console.log(startVal);
+                  while (this.$moment(startVal).isBefore(endDay)) {
+                    dayArr.push(startVal);
+                    // 自增
+                    startVal = this.$moment(new Date(startVal))
+                      .add(hnarr[k].span, "minute")
+                      .format("YYYY-MM-DD HH:mm");
+                    console.log(startVal);
+                  }
+
+                  // // 将结束日期的天放进数组
+
+                  dayArr.push(
+                    this.$moment(new Date(endDay)).format("YYYY-MM-DD HH:mm")
+                  );
+
+                  console.log(dayArr);
+                  this.newshedulenr = dayArr;
+                }
+              }
+              //河南规约
+              if (this.timeProtocol == "65286") {
+                console.log("河南规约");
+                var hnarr = [];
+                for (var i = 0; i < this.newshedulenr.length; i++) {
+                  console.log(this.newshedulenr[i].hour);
+                  let timeDate = new Date();
+                  timeDate.setHours(this.newshedulenr[i].hour);
+                  timeDate.setMinutes(this.newshedulenr[i].minute);
+
+                  console.log(timeDate);
+                  hnarr.push(timeDate);
+                }
+                console.log(hnarr);
+                this.newshedulenr = hnarr;
+              }
               this.timernum = 0;
               // this.$message.success("查询成功");
               clearInterval(this.timer);
@@ -416,10 +749,98 @@ export default {
         pagesize: this.pageSize,
       })
         .then((res) => {
+          // this.deviceTableData = res.data.list;
+          // this.total = res.data.total;
+          // console.log(this.deviceTableData);
+          // this.loading = false;
+          this.newList = [];
           this.deviceTableData = res.data.list;
           this.total = res.data.total;
-          console.log(this.deviceTableData);
           this.loading = false;
+          // for (var i = 0; i < this.deviceTableData.list.length; i++) {
+          //   console.log(this.deviceTableData.list[i]);
+          // }
+          // console.log(this.deviceTableData);
+
+          for (var i = 0; i < this.deviceTableData.length; i++) {
+            var arr = [];
+            console.log(this.deviceTableData[i]);
+            for (var k = 0; k < this.deviceTableData[i].list.length; k++) {
+              if (k % 3 == 0) {
+                var obj = {};
+                obj.span =
+                  this.deviceTableData[i].list[k].hour * 60 +
+                  this.deviceTableData[i].list[k].minute;
+                console.log("时间间隔");
+              } else if (k % 3 == 1) {
+                console.log("开始时间");
+                console.log("a");
+                // obj.startTime =
+                //   this.deviceTableData[i].list[k].hour +
+                //   ":" +
+                //   this.deviceTableData[i].list[k].minute;
+                // console.log(new Date());
+                let timeDate = new Date();
+                timeDate.setHours(this.deviceTableData[i].list[k].hour);
+                timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
+                console.log(timeDate);
+                // console.log(new Date().getHours());
+                // console.log(
+                //   new Date().setHours(this.deviceTableData[i].list[k].hour)
+                // );
+                // console.log(d.getHours() + ":" + d.getMinutes());
+                // if (timeDate.getHours() < 10) {
+                //   console.log(timeDate.getHours());
+                //   obj.startTime =
+                //     "0" + timeDate.getHours() + ":" + timeDate.getMinutes();
+                // } else {
+
+                // }
+
+                // let timeHour =
+                //   timeDate.getHours() < 10
+                //     ? "0" + timeDate.getHours()
+                //     : timeDate.getHours();
+                // let timeMinute =
+                //   timeDate.getMinutes() < 10
+                //     ? "0" + timeDate.getMinutes()
+                //     : timeDate.getMinutes();
+                obj.startTime = timeDate.toUTCString();
+              } else if (k % 3 == 2) {
+                console.log("结束时间");
+                obj.endTime =
+                  this.deviceTableData[i].list[k].hour +
+                  ":" +
+                  this.deviceTableData[i].list[k].minute;
+                let timeDate = new Date();
+                timeDate.setHours(this.deviceTableData[i].list[k].hour);
+                timeDate.setMinutes(this.deviceTableData[i].list[k].minute);
+                // obj.endTime = c.toJSON();
+                let timeHour =
+                  timeDate.getHours() < 10
+                    ? "0" + timeDate.getHours()
+                    : timeDate.getHours();
+                let timeMinute =
+                  timeDate.getMinutes() < 10
+                    ? "0" + timeDate.getMinutes()
+                    : timeDate.getMinutes();
+                //obj.startTime = timeHour + ":" + timeMinute;
+                // obj.endTime = timeHour + ":" + timeMinute;
+                obj.endTime = timeDate.toUTCString();
+                arr.push(obj);
+              }
+              console.log(this.deviceTableData[i].list[k]);
+            }
+            this.newList.push({
+              id: this.deviceTableData[i].id,
+              list: this.deviceTableData[i].list,
+              name: this.deviceTableData[i].name,
+              remark: this.deviceTableData[i].remark,
+              listTime: arr,
+            });
+          }
+          console.log("this.newList");
+          console.log(this.newList);
         })
         .catch((err) => {});
     },
@@ -430,11 +851,14 @@ export default {
     },
     //设置-获取所有通道
     handleSet(val) {
+      console.log(this.setNum);
+      var deviceOffsetnum = this.setNum;
       this.loading = true;
       this.scheduleid = val.id;
       this.isShowset = true;
       console.log(val);
-      this.scheduleInfo = val.list;
+      this.scheduleInfo = val.listTime;
+      console.log("1111111", deviceOffsetnum);
       this.timeName = val.name;
       getScheduleRulelAccessList({ termid: this.selfacilityId })
         .then((res) => {
@@ -446,9 +870,14 @@ export default {
             dyid: this.listnr[0].id,
             xlname: this.listnr[0].list[0].name,
             xlid: this.listnr[0].list[0].id,
-            zzname: this.listnr[0].list[0].list[0].name,
+            zzname:
+              this.listnr[0].list[0].list[0].name == null
+                ? this.listnr[0].list[0].list[0].cmdid
+                : this.listnr[0].list[0].list[0].name,
             zzcmid: this.listnr[0].list[0].list[0].cmdid,
             zzid: this.listnr[0].list[0].list[0].id,
+            zzprotocol: this.timeProtocol,
+            offsetNum: deviceOffsetnum,
           };
           this.zzchannel = this.listnr[0].list[0].list[0].list;
           console.log(this.deviceListData);
@@ -518,15 +947,149 @@ export default {
         getTermStatus({ termId: this.deviceListData.zzid }).then((res) => {
           console.log(res);
           if (res.data.isonline) {
-            setScheduleRulel({
+            var ruleBox = [];
-              scheduleid: this.scheduleid,
+            //循环装置
-              list: [
+
+            //循环时间规则
+            let timearr = [];
+            let dayArr = [];
+            console.log(this.scheduleInfo);
+            for (var j = 0; j < this.scheduleInfo.length; j++) {
+              var Stime = moment(this.scheduleInfo[j].startTime)
+                .add(this.deviceListData.offsetNum, "minute")
+                .format();
+              var Etime = moment(this.scheduleInfo[j].endTime)
+                .add(this.deviceListData.offsetNum, "minute")
+                .format();
+              var lastETime = moment(this.scheduleInfo[j].endTime).format();
+              var spanTime = this.scheduleInfo[j].span;
+              console.log(Stime, Etime, spanTime);
+              console.log(moment(this.scheduleInfo[j].endTime).hour());
+              //判断湖南规约
+              if (this.deviceListData.zzprotocol == "65283") {
+                console.log("湖南规约");
+                console.log(Stime, Etime);
+                console.log(typeof Stime);
+                console.log(
+                  moment(this.scheduleInfo[j].endTime)
+                    .add(this.deviceListData.offsetNum, "minute")
+                    .hour()
+                );
+                console.log(
+                  moment(this.scheduleInfo[j].endTime)
+                    .add(this.deviceListData.offsetNum, "minute")
+                    .minute()
+                );
+                if (moment().isSame(moment(Etime), "day")) {
+                  //如果是同一天
+                  timearr.push(
                     {
-                  termid: this.deviceListData.zzid,
+                      hour: Math.floor(this.scheduleInfo[j].span / 60),
-                  channelidlist: [this.checkList],
+                      minute: this.scheduleInfo[j].span % 60,
-                  offset: this.setNum,
+                      preset: 255,
+                    },
+                    {
+                      hour: moment(this.scheduleInfo[j].startTime)
+                        .add(this.deviceListData.offsetNum, "minute")
+                        .hour(),
+                      minute: moment(this.scheduleInfo[j].startTime)
+                        .add(this.deviceListData.offsetNum, "minute")
+                        .minute(),
+                      preset: 255,
                     },
-              ],
+                    {
+                      hour: moment(this.scheduleInfo[j].endTime)
+                        .add(this.deviceListData.offsetNum, "minute")
+                        .hour(),
+                      minute: moment(this.scheduleInfo[j].endTime)
+                        .add(this.deviceListData.offsetNum, "minute")
+                        .minute(),
+                      preset: 255,
+                    }
+                  );
+                } else {
+                  timearr.push(
+                    {
+                      hour: Math.floor(this.scheduleInfo[j].span / 60),
+                      minute: this.scheduleInfo[j].span % 60,
+                      preset: 255,
+                    },
+                    {
+                      hour: moment(this.scheduleInfo[j].startTime)
+                        .add(this.deviceListData.offsetNum, "minute")
+                        .hour(),
+                      minute: moment(this.scheduleInfo[j].startTime)
+                        .add(this.deviceListData.offsetNum, "minute")
+                        .minute(),
+                      preset: 255,
+                    },
+                    {
+                      hour: moment(this.scheduleInfo[j].endTime).hour(),
+                      minute: moment(this.scheduleInfo[j].endTime).minute(),
+                      preset: 255,
+                    }
+                  );
+                }
+
+                console.log(timearr);
+              }
+            }
+
+            ////判断河南规约
+            if (this.deviceListData.zzprotocol == "65286") {
+              console.log("河南规约");
+              //偏移时间
+              //this.getDayArr(startDay, endDay);
+              let startDay = Stime;
+              let endDay = Etime;
+              var lastendDay = lastETime;
+              console.log(startDay, endDay);
+              let startVal = this.$moment(new Date(startDay)).format(
+                "YYYY-MM-DD HH:mm"
+              );
+              console.log(startVal);
+
+              while (this.$moment(startVal).isBefore(endDay)) {
+                dayArr.push(startVal);
+                // 自增
+                startVal = this.$moment(new Date(startVal))
+                  .add(spanTime, "minute")
+                  .format("YYYY-MM-DD HH:mm");
+                console.log(startVal);
+              }
+
+              // // 将结束日期的天放进数组
+              if (!moment().isSame(moment(endDay), "day")) {
+                dayArr.push(
+                  this.$moment(new Date(lastETime)).format("YYYY-MM-DD HH:mm")
+                );
+              }
+              console.log(dayArr);
+              for (var k = 0; k < dayArr.length; k++) {
+                //console.log(moment(dayArr[k]).hour());
+                timearr.push({
+                  hour: moment(dayArr[k]).hour(),
+                  minute: moment(dayArr[k]).minute(),
+                  preset: 255,
+                });
+              }
+              // return dayArr;
+            }
+
+            var parmsobj = {
+              termid: this.deviceListData.zzid,
+              channelid: this.checkList,
+              offset: this.deviceListData.offsetNum,
+              list: timearr,
+            };
+            console.log(parmsobj);
+            ruleBox.push(parmsobj);
+
+            console.log(ruleBox);
+
+            setScheduleRulel({
+              scheduleid: this.scheduleid,
+              list: ruleBox,
             })
               .then((res) => {
                 console.log(res);
@@ -595,8 +1158,9 @@ export default {
     },
     closebtn() {
       this.isShowset = false;
+      this.deviceListData = [];
       this.checkList = "";
-      this.setNum = Math.floor(Math.random() * 10);
+      // this.setNum = this.offsetnum;
       this.deviceList();
 
       clearInterval(this.timers);

src/views/realTimeMonitor/paramArea.vue

@@ -1,216 +0,0 @@
-<template>
-  <div class="parameterArea">
-    <div class="timeBox"></div>
-    <div class="monitorItemBox">
-      <h3>检测项</h3>
-      <div class="btnBox">
-        <el-button
-          type="primary"
-          v-for="(item, index) in MonitorItem"
-          :key="index"
-          icon="el-icon-thumb"
-          >{{ item.name }}</el-button
-        >
-      </div>
-    </div>
-    <div class="monitorPointBox">
-      <h3>监拍点</h3>
-      <div class="btnBox">
-        <el-button
-          type="primary"
-          v-for="(item, index) in MonitorPoint"
-          :key="index"
-          icon="el-icon-thumb"
-          >{{ item.name }}</el-button
-        >
-      </div>
-    </div>
-    <div class="actionItem">
-      <h3>操作项</h3>
-      <div class="btnBox">
-        <el-button
-          type="primary"
-          v-for="(item, index) in actionItem"
-          :key="index"
-          icon="el-icon-thumb"
-          >{{ item.name }}</el-button
-        >
-      </div>
-    </div>
-    <div class="configItem">
-      <h3>配置项</h3>
-      <div class="btnBox">
-        <el-button
-          type="primary"
-          v-for="(item, index) in configItem"
-          :key="index"
-          icon="el-icon-thumb"
-          >{{ item.name }}</el-button
-        >
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      //检测项
-      MonitorItem: [
-        {
-          name: "图片视频",
-        },
-        {
-          name: "测温",
-        },
-        {
-          name: "微气象",
-        },
-        {
-          name: "倾斜监测",
-        },
-        {
-          name: "风偏监测",
-        },
-        {
-          name: "覆冰检测",
-        },
-        {
-          name: "实时视频",
-        },
-        {
-          name: "弧垂",
-        },
-        {
-          name: "电压检测",
-        },
-      ],
-      //监拍点
-      MonitorPoint: [
-        {
-          name: "小号侧",
-        },
-        {
-          name: "大号侧",
-        },
-      ],
-      //操作项
-      actionItem: [
-        {
-          name: "主动拍照",
-        },
-        {
-          name: "主动录像",
-        },
-        {
-          name: "声光报警",
-        },
-        {
-          name: "图片调阅",
-        },
-        {
-          name: "微信推送",
-        },
-        {
-          name: "历史图片",
-        },
-        {
-          name: "线缆绘制",
-        },
-        {
-          name: "清除绘制",
-        },
-        {
-          name: "主动巡检",
-        },
-        {
-          name: "指令集",
-        },
-        {
-          name: "开启雨刮",
-        },
-        {
-          name: "喊话",
-        },
-        {
-          name: "上一设备",
-        },
-        {
-          name: "下一设备",
-        },
-        {
-          name: "返回",
-        },
-        {
-          name: "历史对比",
-        },
-        {
-          name: "图片标记",
-        },
-        {
-          name: "主动巡航",
-        },
-      ],
-      //配置项
-      configItem: [
-        {
-          name: "设置分组",
-        },
-        {
-          name: "隐患类型",
-        },
-        {
-          name: "地图查看",
-        },
-        {
-          name: "监拍点信息",
-        },
-        {
-          name: "告警级别",
-        },
-        {
-          name: "设备信息",
-        },
-        {
-          name: "设置漏告",
-        },
-      ],
-    };
-  },
-};
-</script>
-<style lang="less">
-// .parameterArea {
-//   width: 300px;
-//   padding: 16px 8px;
-//   .monitorItemBox,
-//   .monitorPointBox,
-//   .actionItem,
-//   .configItem {
-//     border: 1px solid @border-color-base;
-//     padding: 8px 16px 8px 16px;
-//     margin-bottom: 32px;
-//     h3 {
-//       font-size: 16px;
-//       margin-bottom: 8px;
-//       background: transparent;
-//       color: @color-text-regular;
-//     }
-//     .btnBox {
-//       display: flex;
-//       flex-wrap: wrap;
-//       justify-content: space-between;
-//       .el-button {
-//         width: 84px;
-//         padding: 6px 0px;
-//         font-size: 12px;
-//         margin-bottom: 8px;
-//       }
-//       .el-button + .el-button {
-//         margin-left: 0px;
-//       }
-//     }
-//   }
-// }
-</style>

src/views/realTimeMonitor/picturemain.vue

@@ -1,191 +0,0 @@
-<template>
-  <div class="picture" v-if="photoData">
-    <div class="picTop">
-      <h3>{{ photoData.text }}</h3>
-      <div class="total">
-        <span>监拍设备:14套 监拍点:14个 视频:0套 测温:0 套 微气象:0 套</span>
-      </div>
-    </div>
-    <div class="picmain">
-      <div class="photosPic">
-        <div class="topTitle">
-          <h4>{{ photoData.children[0].text }};大号侧</h4>
-          <div class="iconList">
-            <i class="el-icon-video-camera" title="主副机"></i>
-            <i class="el-icon-video-camera" title="夜视"></i>
-            <i class="el-icon-video-camera" title="云台"></i>
-            <i class="el-icon-video-camera" title="T基+通道"></i>
-            <i class="el-icon-video-camera" title="声光告警"></i>
-            <i class="el-icon-video-camera" title="测温"></i>
-            <i class="el-icon-video-camera" title="微气象"></i>
-          </div>
-        </div>
-        <ul class="picShow">
-          <li
-            v-for="(item, index) in lagrePic.slice(0, 4)"
-            :key="index"
-            @click="picShow(index)"
-          >
-            <img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
-            <span class="timeShow">{{ item.captureTime }}</span>
-          </li>
-        </ul>
-      </div>
-      <div class="photosPic">
-        <div class="topTitle">
-          <h4>{{ photoData.children[0].text }};小号测</h4>
-          <div class="iconList">
-            <i class="el-icon-video-camera" title="主副机"></i>
-            <i class="el-icon-video-camera" title="夜视"></i>
-            <i class="el-icon-video-camera" title="云台"></i>
-            <i class="el-icon-video-camera" title="T基+通道"></i>
-            <i class="el-icon-video-camera" title="声光告警"></i>
-            <i class="el-icon-video-camera" title="测温"></i>
-            <i class="el-icon-video-camera" title="微气象"></i>
-          </div>
-        </div>
-        <ul class="picShow">
-          <li
-            v-for="(item, index) in smallPic.slice(0, 4)"
-            :key="index"
-            @click="picShow(index)"
-          >
-            <img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
-            <span class="timeShow">{{ item.captureTime }}</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="page">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-size="100"
-        layout="prev, pager, next, jumper,total"
-        :total="400"
-      >
-      </el-pagination>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: ["photoData"],
-  data() {
-    return {
-      dataPhoto: "",
-      lagrePic: [],
-      smallPic: [],
-      currentPage4: 4,
-    };
-  },
-  mounted: function () {
-    this.getPhoto();
-  },
-  methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
-    getPhoto() {
-      console.log(photo);
-      //this.dataPhoto = photo;
-      photo.forEach((item) => {
-        console.log(item);
-        if (item.orientation === "1") {
-          this.lagrePic.push(item);
-        } else {
-          this.smallPic.push(item);
-        }
-      });
-    },
-    picShow(index) {
-      console.log(index);
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.picture {
-  flex: 1;
-  padding: 16px;
-  width: 100%;
-  .picTop {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    h3 {
-      font-size: 24px;
-      line-height: 30px;
-      color: @color-text-regular;
-    }
-    .total span {
-      color: @color-text-secondary;
-      font-size: 14px;
-      line-height: 30px;
-    }
-  }
-  .picmain {
-    border: 1px solid @border-color-base;
-    .photosPic {
-      padding-bottom: 12px;
-      border-bottom: 1px solid @border-color-base;
-      &:last-child {
-        border-bottom: 0px solid @border-color-base;
-      }
-      .topTitle {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        h4 {
-          padding: 0 10px;
-          display: inline-block;
-          line-height: 45px;
-          color: @color-text-regular;
-          font-size: 14px;
-          font-weight: bold;
-        }
-        .iconList {
-          i {
-            color: @color-text-secondary;
-            margin-right: 12px;
-            font-size: 28px;
-          }
-        }
-      }
-      .picShow {
-        display: flex;
-        padding-left: 6px;
-        justify-content: space-between;
-
-        li {
-          display: inline-block;
-          position: relative;
-          width: 24.5%;
-          img {
-            width: 100%;
-            height: 100%;
-          }
-          .timeShow {
-            position: absolute;
-            top: 0;
-            left: 0;
-            background: @color-primary;
-            display: inline-block;
-            color: @color-white;
-            font-size: 14px;
-            padding: 4px;
-          }
-        }
-      }
-    }
-  }
-  .page {
-    margin-top: 16px;
-  }
-}
-</style>

src/views/realTimeMonitor/previewContain.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="previewContain" v-loading="previewLoading">
+    <!-- {{ previewData }} -->
+    <!-- {{ previewData.name }}______{{ previewData.id }} -->
+    <div class="pictureBox">
+      <el-row
+        v-for="i in rowNum"
+        :key="'row-' + i"
+        :style="{ height: 100 / rowNum + '%' }"
+      >
+        <el-col
+          :span="24 / colNum"
+          v-for="(item, index) in picList"
+          :key="'col-' + index"
+          v-if="index < colNum * i && index >= colNum * (i - 1)"
+        >
+          <div class="imgcloum" @click="handleTowerPic(item)">
+            <!-- 首先判断是否是图片mediatype=0,并且path不为空  展示图片 -->
+            <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" v-if="picList.length !== 0">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page="page"
+        :page-size="pageSize"
+        layout=" prev, pager, next, jumper,total"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import { getTowerAndPhotoList } from "@/utils/api/index";
+
+export default {
+  props: ["previewData"],
+  data() {
+    return {
+      rowNum: 4,
+      colNum: 4,
+      page: 1, // 当前页数
+      pageSize: 16, // 每页数量
+      totalPage: 0, //总页数
+      total: 0, //总条数
+      picList: [], //图片列表数据
+      id: "",
+      type: "",
+      previewLoading: false,
+    };
+  },
+  mounted: function () {},
+  methods: {
+    //获取所有杆塔图片列表
+    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: page,
+        pagesize: this.rowNum * this.colNum,
+      })
+        .then((res) => {
+          this.previewLoading = false;
+          console.log(res);
+          this.picList = res.data.list;
+          this.totalPage = res.data.totalpage;
+          this.total = res.data.total;
+        })
+        .catch((err) => {
+          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.page);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.previewContain {
+  width: 100%;
+  padding: 16px;
+  height: auto;
+  //background: #fcc;
+  .pictureBox {
+    height: calc(100% - 38px);
+    //background-color: aquamarine;
+    .el-col {
+      height: 100%;
+      padding-right: 0.3%;
+      padding-left: 0.3%;
+      padding-top: 0.3%;
+      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: 12px;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        .timeinfo {
+          margin-top: 4px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/realTimeSearch/index.vue

@@ -10,7 +10,9 @@
                 :key="item.id"
                 :label="item.name"
                 :value="item.id"
-              ></el-option>
+              >
+                {{ item.name }}
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="线路名称">
@@ -61,7 +63,11 @@
               <el-option
                 v-for="item in tdOptions"
                 :key="item.id"
-                :label="item.name"
+                :label="
+                  item.alias !== null && item.alias !== ''
+                    ? item.alias
+                    : item.name
+                "
                 :value="item.id"
               ></el-option>
             </el-select>
@@ -79,6 +85,8 @@
               type="datetime"
               placeholder="开始日期"
               value-format="timestamp"
+              :picker-options="pickerOptions"
+              default-time="00:00:00"
             >
             </el-date-picker>
           </el-form-item>
@@ -89,6 +97,7 @@
               default-time="23:59:59"
               placeholder="结束日期"
               value-format="timestamp"
+              :picker-options="pickerOptions"
               class="ml10"
             >
             </el-date-picker>
@@ -98,7 +107,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <div class="pictureBox" v-loading="loading">
+      <div class="pictureBox" v-loading="loading" v-infinite-scroll>
         <div v-if="picList.length !== 0" style="width: 100%">
           <el-card
             class="box-card imgList"
@@ -110,7 +119,11 @@
               class="bigpic"
               v-if="item.path.indexOf('videos') == -1"
             >
-              <img :src="item.path + '!1366x768'" />
+              <img
+                :src="item.path + '!1366x768'"
+                :class="'bigpath' + index"
+                @click="showbigpicPath(item, index)"
+              />
 
               <!-- <el-image :src="item.path" lazy></el-image> -->
 
@@ -196,6 +209,11 @@ import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
 export default {
   data() {
     return {
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
       OptionssalseImg: {
         inline: false,
         button: true,
@@ -210,7 +228,7 @@ export default {
       xlOptions: [{ id: -1, name: "全部" }], //线路数据
       gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
       zzOptions: [{ id: -1, name: "全部" }], //装置数据
-      tdOptions: [{ id: -1, name: "全部" }], //通道数据
+      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
       formdata: {
         dyid: -1,
         lineid: -1,
@@ -235,7 +253,7 @@ export default {
         that.onSubmit(); // 触发事件
       }
     };
-    console.log(this.$route.query);
+
     // this.formdata.search = this.$route.query.name;
     // console.log(this.formdata.search);
   },
@@ -244,15 +262,37 @@ export default {
     //   new Date(new Date().toLocaleDateString()).getTime(),
     //   new Date().getTime(),
     // ]);
+
+    this.$set(this.formdata, "endtime", new Date().getTime());
+
+    if (JSON.stringify(this.$route.query) === "{}") {
       this.$set(
         this.formdata,
         "starttime",
         new Date(new Date().toLocaleDateString()).getTime()
       );
-    this.$set(this.formdata, "endtime", new Date().getTime());
       this.getSearchdy();
+    } else {
+      console.log(this.$route.query);
+      this.getSearchdy();
+      console.log(this.$route.query.date);
+      this.formdata.dyid = this.$route.query.dyId;
+      this.formdata.lineid = this.$route.query.lineId;
+      this.formdata.towerid = this.$route.query.towerId;
+      this.formdata.channelid = this.$route.query.channelId;
+      this.formdata.termid = this.$route.query.termId;
+
+      this.$set(this.formdata, "starttime", this.$route.query.date);
+    }
   },
   methods: {
+    showbigpicPath(item, index) {
+      console.log(item, index);
+      var personBox = document.querySelector(".bigpath" + index);
+      console.log(personBox.src);
+      console.log(item.path);
+      personBox.src = item.path;
+    },
     //获取电压信息
     getSearchdy() {
       getSearchInfo({ type: 1 })
@@ -265,7 +305,14 @@ export default {
           //   this.formdata.dyid = res.data.list[0].id;
           // }
           this.dyOptions = this.dyOptions.concat(res.data.list);
+          console.log(this.dyOptions);
+          //this.formdata.dyid = this.dyOptions[0].id;
+          if (JSON.stringify(this.$route.query) === "{}") {
             this.formdata.dyid = this.dyOptions[0].id;
+          } else {
+            this.formdata.dyid = Number(this.$route.query.dyId);
+          }
+
           // this.$set(this.formdata, 'dyid', this.dyOptions[0].id)
           this.getSearchxl();
         })
@@ -277,7 +324,13 @@ export default {
         .then((res) => {
           this.xlOptions = [{ id: -1, name: "全部" }];
           this.xlOptions = this.xlOptions.concat(res.data.list);
+          // this.formdata.lineid = this.xlOptions[0].id;
+          if (JSON.stringify(this.$route.query) === "{}") {
             this.formdata.lineid = this.xlOptions[0].id;
+          } else {
+            this.formdata.lineid = Number(this.$route.query.lineId);
+          }
+
           this.getSearchgt();
         })
         .catch((err) => {});
@@ -288,7 +341,13 @@ export default {
         .then((res) => {
           this.gtOptions = [{ id: -1, name: "全部" }];
           this.gtOptions = this.gtOptions.concat(res.data.list);
+          // this.formdata.towerid = this.gtOptions[0].id;
+          if (JSON.stringify(this.$route.query) === "{}") {
             this.formdata.towerid = this.gtOptions[0].id;
+          } else {
+            this.formdata.towerid = Number(this.$route.query.towerId);
+          }
+
           this.getSearchzz();
         })
         .catch((err) => {});
@@ -299,7 +358,13 @@ export default {
         .then((res) => {
           this.zzOptions = [{ id: -1, name: "全部" }];
           this.zzOptions = this.zzOptions.concat(res.data.list);
+          // this.formdata.termid = this.zzOptions[0].id;
+          if (JSON.stringify(this.$route.query) === "{}") {
             this.formdata.termid = this.zzOptions[0].id;
+          } else {
+            this.formdata.termid = Number(this.$route.query.termId);
+          }
+
           this.getSearchtd();
         })
         .catch((err) => {});
@@ -308,13 +373,20 @@ export default {
     getSearchtd() {
       getSearchInfo({ type: 5, id: this.formdata.termid })
         .then((res) => {
-          this.tdOptions = [{ id: -1, name: "全部" }];
+          this.tdOptions = [{ id: -1, name: "全部", alias: null }];
           this.tdOptions = this.tdOptions.concat(res.data.list);
+          //this.formdata.channelid = this.tdOptions[0].id;
+          if (JSON.stringify(this.$route.query) === "{}") {
             this.formdata.channelid = this.tdOptions[0].id;
+          } else {
+            this.formdata.channelid = Number(this.$route.query.channelId);
+          }
+
           // if (this.signtype == 0) {
           //   this.getPicData();
           // }
           // this.signtype = 1;
+          this.getPicData();
         })
         .catch((err) => {});
     },

src/views/stritl/index copy.vue

@@ -1,502 +0,0 @@
-<template>
-  <div class="stritlBox">
-    <div class="stritl_left">
-      <div class="strLeftTop">
-        <h3>{{ numberUnits.name }}</h3>
-        <bar
-          v-if="flag.baizhang"
-          :legendData="unitXData"
-          :seriesData="unitYData"
-          :boxStyle="numberUnits.boxStyle"
-        ></bar>
-      </div>
-      <div class="strLeftMid">
-        <h3>{{ hazardClass.name }}</h3>
-        <pie
-          v-if="flag.baizhang"
-          :pieData="hazardPieData"
-          :boxStyle="hazardClass.boxStyle"
-        ></pie>
-      </div>
-      <div class="strLeftBottom">
-        <h3>{{ monitLine.name }}</h3>
-        <bar
-          v-if="flag.baizhang"
-          :legendData="lineXData"
-          :seriesData="lineYData"
-          :boxStyle="monitLine.boxStyle"
-        ></bar>
-      </div>
-    </div>
-    <div class="stritl_center">
-      <div class="strCenterTop">
-        <mapChart></mapChart>
-      </div>
-      <div class="strCenterbottom">
-        <div class="bottomL">
-          <h3>{{ hazardType.name }}</h3>
-          <horizontalBar
-            :legendData="hazardTypeXData"
-            :seriesData="hazardTypeYData"
-            :boxStyle="hazardType.boxStyle"
-          ></horizontalBar>
-        </div>
-        <div class="bottomM">
-          <h3>{{ deviceInfo.name }}</h3>
-          <div class="infoBox">
-            <p>
-              <span>在运数</span>
-              <span>{{ infoData.deviceCount }}</span>
-            </p>
-            <p>
-              <span>在线数</span>
-              <span>{{ infoData.hasPhotoCount }}</span>
-            </p>
-            <p>
-              <span>杆塔覆盖率</span>
-              <span>{{ infoData.deviceCoverage }}%</span>
-            </p>
-            <p>
-              <span>在线率</span>
-              <span>{{ infoData.hasPhotoRate }}%</span>
-            </p>
-          </div>
-        </div>
-        <div class="bottomR">
-          <h3>{{ deviceOnline.name }}</h3>
-          <pie
-            :pieData="deviceOnline.onlineData"
-            :boxStyle="deviceOnline.boxStyle"
-          ></pie>
-        </div>
-      </div>
-    </div>
-    <div class="stritl_right">
-      <div class="strRightTop">
-        <h3>线路分布(总计：5)</h3>
-        <div class="tableBox">
-          <el-table :data="lineAllData" style="width: 100%">
-            <el-table-column
-              prop="voltageLevelStr"
-              label="电压等级"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column prop="lineCount" label="线路数" align="center">
-            </el-table-column>
-            <el-table-column prop="towerCount" label="安装数" align="center">
-            </el-table-column>
-            <el-table-column
-              prop="deviceCoverage"
-              label="安装覆盖率"
-              align="center"
-            >
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-      <!-- <div class="strRightMid">5</div> -->
-      <div class="strRightBottom">
-        <h3>{{ patrolOpinions.name }}</h3>
-        <div class="suggest">
-          <p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
-          <p class="info">
-            <span>{{ patrolOpinions.info1 }}</span>
-            <span>{{ patrolOpinions.info2 }}</span>
-          </p>
-        </div>
-        <h4>往年同期隐患比例分布图</h4>
-        <radar
-          :radarName="radarName"
-          :radarValue="radarValue"
-          :boxStyle="patrolOpinions.boxStyle"
-          :radarTitle="radarTitle"
-        ></radar>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import bar from "./chartFiles/bar";
-import horizontalBar from "./chartFiles/horizontalBar";
-import pie from "./chartFiles/pie";
-import radar from "./chartFiles/radar";
-import mapChart from "./chartFiles/mapChart";
-import {
-  getLineDataByVoltage,
-  getCapturePointDataByDanger,
-  getHostDeviceDataByVoltage,
-  getPhotoAlarmDataByAlarmType,
-  getCompanyDeviceInfo,
-  getByName,
-  getLastYearAlarmReasons,
-} from "@/utils/api/index";
-export default {
-  data() {
-    return {
-      name: localStorage.getItem("ms_username"),
-      flag: {
-        baizhang: false, //是否开始渲染子组件
-      },
-      //装置数量统计
-      unitAllData: [],
-      unitXData: [],
-      unitYData: [],
-      numberUnits: {
-        name: "装置数量统计",
-        boxStyle: {
-          width: "100%",
-          height: "200px",
-        },
-      },
-      //监控路线统计
-      lineAllData: [],
-      lineXData: [],
-      lineYData: [],
-      monitLine: {
-        name: "监控路线统计",
-        boxStyle: {
-          width: "100%",
-          height: "200px",
-        },
-      },
-      //隐患分类统计
-      hazardData: [],
-      hazardPieData: [],
-      hazardClass: {
-        name: "隐患分类统计",
-        boxStyle: {
-          width: "100%",
-          height: "200px",
-        },
-      },
-      //隐患类型统计
-      hazardTypeData: [],
-      hazardTypeXData: [],
-      hazardTypeYData: [],
-      hazardType: {
-        name: "隐患类型统计",
-        boxStyle: {
-          width: "100%",
-          height: "160px",
-        },
-      },
-      //装置信息统计
-      infoData: [],
-      deviceInfo: {
-        name: "装置信息统计",
-        infoData: [
-          { value: 24, name: "在运数" },
-          { value: 10, name: "在线数" },
-          { value: "92.31%", name: "杆塔覆盖率" },
-          { value: "41.67%", name: "在线率" },
-        ],
-      },
-      deviceOnline: {
-        name: "装置在线统计",
-        onlineData: [
-          { value: 55, name: "离线" },
-          { value: 45, name: "在线" },
-        ],
-        boxStyle: {
-          width: "100%",
-          height: "160px",
-        },
-      },
-      //隐患比例分布图
-      patrolData: [],
-      radarName: [],
-      radarValue: [],
-      radarTitle: "隐患比例分布图",
-      patrolOpinions: {
-        name: "巡查意见",
-        month: "三月份",
-        info1: "1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。",
-        info2:
-          "2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。",
-        boxStyle: {
-          width: "100%",
-          height: "160px",
-        },
-      },
-    };
-  },
-  components: {
-    bar,
-    horizontalBar,
-    pie,
-    radar,
-    mapChart,
-  },
-  computed: {
-    role() {
-      return this.name === "admin" ? "超级管理员" : "普通用户";
-    },
-  },
-  methods: {},
-  created() {
-    //装置数量统计
-    getHostDeviceDataByVoltage({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.unitAllData = res.data.data;
-      for (var i = 0; i < this.unitAllData.length; i++) {
-        this.unitXData.push(this.unitAllData[i].name);
-        this.unitYData.push(this.unitAllData[i].value);
-      }
-      this.flag.baizhang = true;
-    });
-
-    //装置信息统计
-    getCompanyDeviceInfo({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.infoData = res.data;
-    });
-    //线路分布
-    getLineDataByVoltage({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.lineAllData = res.data;
-      console.log(this.lineAllData);
-      for (var i = 0; i < this.lineAllData.length; i++) {
-        this.lineXData.push(this.lineAllData[i].voltageLevelStr);
-        this.lineYData.push(this.lineAllData[i].lineCount);
-      }
-      this.flag.baizhang = true;
-    });
-    //隐患分类统计
-    getCapturePointDataByDanger({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.hazardData = res.data;
-
-      // let name1 = this.hazardData.nameList;
-      // let value1 = this.hazardData.valueList;
-      this.hazardPieData = res.data.list;
-      console.log(this.hazardPieData);
-
-      this.flag.baizhang = true;
-    });
-
-    //隐患类型统计
-    getPhotoAlarmDataByAlarmType({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.hazardTypeData = res.data.dataList;
-
-      for (var i = 0; i < this.hazardTypeData.length; i++) {
-        this.hazardTypeXData.push(this.hazardTypeData[i].name);
-        this.hazardTypeYData.push(this.hazardTypeData[i].acount);
-      }
-      this.flag.baizhang = true;
-    });
-
-    //巡视意见
-    getByName({
-      name: "三月",
-    }).then((res) => {
-      console.log(res);
-    });
-    //雷达图数据
-    getLastYearAlarmReasons({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-      month: "04",
-    }).then((res) => {
-      console.log(res);
-      this.patrolData = res.data;
-      console.log(this.patrolData);
-      let obj = {};
-      this.patrolData.forEach((item) => {
-        if (obj.hasOwnProperty(item.alarmInfo)) {
-          obj[item.alarmInfo] += item.num;
-        } else {
-          obj[item.alarmInfo] = item.num;
-        }
-      });
-      console.log(obj);
-      this.radarValue = Object.values(obj);
-      console.log(this.radarValue);
-      let max = Math.max(...this.radarValue);
-      //对象转化成数组对象
-      console.log(max);
-      for (let i in obj) {
-        console.log(i);
-        this.radarName.push({
-          name: i,
-          max: max,
-        });
-      }
-      console.log(this.radarName);
-    });
-  },
-};
-</script>
-
-<style lang="less">
-.stritlBox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  .stritl_left,
-  .stritl_right {
-    width: 20%;
-    margin: 8px;
-  }
-  .stritl_left,
-  .stritl_right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .strLeftTop,
-    .strLeftMid,
-    .strLeftBottom {
-      height: 30%;
-      box-sizing: content-box;
-      box-shadow: @box-shadow-basic;
-      border: 1px solid @border-color-base;
-      background-color: @color-white;
-      border-radius: 4px;
-      padding: 8px;
-      h3 {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-    }
-    .strRightTop,
-    .strRightBottom {
-      height: 46%;
-      box-sizing: content-box;
-      box-shadow: @box-shadow-basic;
-      border: 1px solid @border-color-base;
-      background-color: @color-white;
-      border-radius: 4px;
-      padding: 8px;
-      h3 {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-    }
-    .strRightTop {
-      position: relative;
-      .tableBox {
-        position: absolute;
-        width: calc(100% - 16px);
-        .el-table .cell {
-          white-space: normal;
-          word-break: break-all;
-        }
-        .el-table th.el-table__cell > .cell {
-          min-width: 58px;
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-      }
-    }
-    .strRightBottom {
-      h3 {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-      .suggest {
-        .attention {
-          font-size: 14px;
-          margin-bottom: 8px;
-          span {
-            font-size: 14px;
-            color: @color-red;
-          }
-        }
-        .info {
-          display: flex;
-          flex-direction: column;
-          font-size: 14px;
-          line-height: 22px;
-        }
-      }
-      h4 {
-        margin-top: 8px;
-        margin-bottom: 8px;
-      }
-    }
-  }
-  .stritl_center {
-    flex: 1;
-    margin: 10px;
-    display: flex;
-    flex-direction: column;
-    .strCenterTop {
-      flex: 1;
-      box-sizing: content-box;
-      box-shadow: @box-shadow-basic;
-      border: 1px solid @border-color-base;
-      background-color: @color-white;
-      border-radius: 4px;
-      //padding: 8px;
-    }
-    .strCenterbottom {
-      margin-top: 24px;
-      height: 210px;
-      //border: 1px solid #000;
-      box-sizing: content-box;
-      display: flex;
-      justify-content: space-between;
-      .bottomL,
-      .bottomM,
-      .bottomR {
-        border: 1px solid #000;
-        box-sizing: content-box;
-        width: 30%;
-        box-shadow: @box-shadow-basic;
-        border: 1px solid @border-color-base;
-        background-color: @color-white;
-        border-radius: 4px;
-        padding: 8px;
-        h3 {
-          margin-bottom: 8px;
-          font-size: 15px;
-        }
-      }
-      .bottomM {
-        .infoBox {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-around;
-          p {
-            width: 40%;
-            height: 68px;
-            background: #fcc;
-            text-align: center;
-            margin: 6px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            span {
-              color: #333;
-              font-size: 14px;
-              &:last-child {
-                font-size: 20px;
-                margin-top: 5px;
-                font-weight: bold;
-              }
-            }
-            &:first-child {
-              background: url("../../assets/img/border-blue.png");
-            }
-            &:nth-child(2) {
-              background: url("../../assets/img/border-green.png");
-            }
-            &:nth-child(3) {
-              background: url("../../assets/img/border-yellow.png");
-            }
-            &:nth-child(4) {
-              background: url("../../assets/img/border-gray.png");
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/stritl/index.vue

@@ -1,13 +1,558 @@
 <template>
-  <div class="stritlBox">首页</div>
+  <div class="stritleEchartsPage">
+    <div class="echart-top">
+      <el-card class="box-card" v-loading="numloading">
+        <h3>装置数量统计</h3>
+        <!-- <el-button class="lookBtn" type="primary" @click="handleLook"
+          >查看</el-button
+        > -->
+        <div class="bottomM">
+          <div class="infoBox">
+            <p @click="handleLook">
+              <span>装置总数</span>
+              <span>{{ termDataNum.totalNum }}</span>
+            </p>
+            <p>
+              <span>在线数量</span>
+              <span>{{ termDataNum.onlineNum }}</span>
+            </p>
+            <p>
+              <span>离线率</span>
+              <span>{{ (termDataNum.offlinePercent * 100).toFixed(2) }}%</span>
+            </p>
+            <p>
+              <span>在线率</span>
+              <span>{{ (termDataNum.onlinePercent * 100).toFixed(2) }}%</span>
+            </p>
+          </div>
+        </div>
+      </el-card>
+      <el-card class="box-card">
+        <h3>装置在线统计</h3>
+        <div id="echart2" class="chartClass" v-loading="pieloading"></div>
+      </el-card>
+    </div>
+    <div class="echart-top">
+      <el-card class="box-card" v-loading="barloading">
+        <h3>7天告警数量统计</h3>
+        <div class="dateBox">
+          <span class="datemsg">当前日期前七天</span>
+          <el-date-picker
+            v-model="dateValue"
+            align="right"
+            type="date"
+            placeholder="选择日期"
+            :picker-options="singpickerOptions"
+            @change="changedate"
+          >
+          </el-date-picker>
+        </div>
+        <div id="echart3" class="chartClass"></div>
+      </el-card>
+      <el-card class="box-card" v-loading="pie2loading">
+        <h3>告警类型统计</h3>
+        <div class="dateBox">
+          <el-date-picker
+            v-model="dateValue2"
+            align="right"
+            type="date"
+            placeholder="选择日期"
+            :picker-options="singpickerOptions"
+            @change="changedate2"
+          >
+          </el-date-picker>
+        </div>
+        <div id="echart4" class="chartClass"></div>
+      </el-card>
+    </div>
+    <el-dialog
+      class="exportDialog"
+      title="装置列表"
+      width="70%"
+      :visible.sync="dialogTableVisible"
+    >
+      <div class="exportList" v-loading="exportLoading">
+        <el-button class="exportbtn" type="primary" @click="handleExport()"
+          >导出</el-button
+        >
+        <el-table
+          :data="onLineData"
+          stripe
+          tooltip-effect="dark"
+          height="calc(100% - 54px)"
+        >
+          <el-table-column prop="lineName" label="线路名称"></el-table-column>
+          <el-table-column prop="towerName" label="杆塔名称"></el-table-column>
+          <el-table-column prop="cmdId" label="装置ID"></el-table-column>
+          <el-table-column
+            prop="hearttime"
+            label="最新心跳时间"
+          ></el-table-column>
+          <el-table-column
+            prop="pictime"
+            label="最新图片拍照时间"
+          ></el-table-column>
+          <el-table-column prop="isonline" label="是否在线"></el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
 </template>
+<script>
+import {
+  getTermStatistics,
+  getWeekAlarmStatistics,
+  getTodayAlarmStatistics,
+  getOnlineTerminalList,
+  getOnlineTerminalListExcel,
+} from "@/utils/api/index";
+export default {
+  name: "",
+  data() {
+    return {
+      termDataNum: "", //总数
+      dateValue: "", //7天告警统计日期
+      dateValue2: "", //当天告警分类统计日期
+      weekData: [], //7天告警统计
+      todayAlarm: [], //当天告警分类统计
+      singpickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      myChart2: "",
+      myChart3: "",
+      myChart4: "",
+      numloading: false,
+      pieloading: false,
+      barloading: false,
+      pie2loading: false,
 
-<script></script>
+      dialogTableVisible: false,
+      onLineData: [],
+      exportLoading: false,
+    };
+  },
+  created() {
+    console.log(window.devicePixelRatio);
+  },
+  mounted() {
+    this.getDateTime(); //获取当前时间
+    this.getTermData();
+    this.getWeekAlarmStatistics();
+    this.getTodayAlarmStatistics();
+  },
+  watch: {
+    "$store.state.collapse"(val) {
+      console.log(val);
+      setTimeout(() => {
+        //echarts得重绘方法
+        this.myChart1.resize();
+        this.myChart2.resize();
+        this.myChart3.resize();
+        this.myChart4.resize();
+      }, 300);
+    },
+  },
+  methods: {
+    //查看在线列表
+    handleLook() {
+      this.dialogTableVisible = true;
+      this.exportLoading = true;
+      getOnlineTerminalList()
+        .then((res) => {
+          console.log(res);
+          this.onLineData = res.data;
+          this.exportLoading = false;
+          console.log(this.onLineData);
+        })
+        .catch((err) => {});
+    },
+    //导出
+    handleExport() {
+      window.location.href = "/api/api/getOnlineTerminalListExcel";
+    },
+    // 隐患数量统计
+    changedate() {
+      console.log(this.dateValue.getTime());
+      this.dateValue = this.dateValue.getTime();
+      this.getWeekAlarmStatistics();
+    },
+    // 隐患分类统计
+    changedate2() {
+      console.log(this.dateValue2.getTime());
+      this.dateValue2 = this.dateValue2.getTime();
+      this.getTodayAlarmStatistics();
+    },
+    //获取当前时间
+    getDateTime() {
+      console.log(new Date());
+      this.dateValue = new Date().getTime();
+      this.dateValue2 = new Date().getTime();
+      console.log(this.dateValue);
+      //console.log(this.$moment(this.dateValue).format("yy-MM-DD"));
+    },
+    //装置数量统计
+    getTermData() {
+      this.numloading = true;
+      this.pieloading = true;
+      getTermStatistics()
+        .then((res) => {
+          console.log(res);
+          this.termDataNum = res.data;
+          this.numloading = false;
+          this.pieloading = false;
+          this.getEchart2();
+        })
+        .catch((err) => {});
+    },
+    //获取7天告警统计
+    getWeekAlarmStatistics() {
+      this.barloading = true;
+      getWeekAlarmStatistics({ starttime: this.dateValue })
+        .then((res) => {
+          console.log(res);
+          this.weekData = res.data.list;
+          this.barloading = false;
+          this.getEchart3();
+        })
+        .catch((err) => {});
+    },
+    //获取当天告警分类统计
+    getTodayAlarmStatistics() {
+      this.pie2loading = true;
+      getTodayAlarmStatistics({ starttime: this.dateValue2 })
+        .then((res) => {
+          console.log(res);
+          this.todayAlarm = res.data.list;
+          this.pie2loading = false;
+          this.getEchart4();
+        })
+        .catch((err) => {});
+    },
+    //装置数量统计
+    getEchart2() {
+      this.$nextTick(() => {
+        console.log(this.termDataNum);
+        this.$echarts.init(document.getElementById("echart2")).dispose();
+        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
+        let option = {
+          // title: {
+          //   text: "装置在线统计",
+          // },
+          color: ["#169e8c", "#bbb"],
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            type: "scroll",
+            orient: "vertical",
+            right: 10,
+            top: 20,
+            bottom: 20,
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["40%", "70%"],
+              avoidLabelOverlap: false,
 
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: "#fff",
+                borderWidth: 2,
+              },
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+                formatter: "{b}\n{d}%",
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 26,
+                  fontWeight: "bold",
+                  formatter: "{b}\n{d}%",
+                },
+              },
+              labelLine: {
+                show: true,
+              },
+              data: [
+                { value: this.termDataNum.onlineNum, name: "在线" },
+                { value: this.termDataNum.offlineNum, name: "离线" },
+              ],
+            },
+          ],
+        };
+        this.myChart2.setOption(option);
+        window.addEventListener("resize", () => {
+          this.myChart2.resize();
+        });
+      });
+    },
+    //获取7天告警统计
+    getEchart3() {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("echart3")).dispose();
+        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
+        let option = {
+          // title: {
+          //   text: "隐患分类统计",
+          // },
+          color: ["#169e8c"],
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+          grid: {
+            //与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
+            top: "10%",
+            left: "10%",
+            right: "10%",
+            bottom: "10%",
+          },
+          xAxis: {
+            type: "category",
+            data: this.weekData.map((x) => {
+              return this.$moment(x.date).format("MM-DD");
+            }),
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+          yAxis: { type: "value" },
+          series: [
+            {
+              name: "告警数量",
+              data: this.weekData.map((x) => {
+                return x.num;
+              }),
+              type: "bar",
+              showBackground: true,
+              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
+            },
+          ],
+        };
+        this.myChart3.setOption(option);
+        window.addEventListener("resize", () => {
+          this.myChart3.resize();
+        });
+      });
+    },
+    //获取当天告警分类统计
+    getEchart4() {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("echart4")).dispose();
+        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
+        let arr = [];
+        this.todayAlarm.forEach((element) => {
+          arr.push({
+            value: element.num, //将数组的num值赋给value
+            name: element.enname, //将数组的name值赋给name
+          });
+        });
+        let option = {
+          // title: {
+          //   text: "隐患分类统计",
+          // },
+          // tooltip: {
+          //   trigger: "axis",
+          //   axisPointer: {
+          //     type: "shadow",
+          //   },
+          // },
+          // xAxis: {
+          //   type: "category",
+          //   data: this.todayAlarm.map((item) => {
+          //     return item.enname;
+          //   }),
+          //   axisTick: {
+          //     alignWithLabel: true,
+          //   },
+          // },
+          // yAxis: { type: "value" },
+          // series: [
+          //   {
+          //     name: "告警数量",
+          //     data: this.todayAlarm.map((item) => {
+          //       return item.num;
+          //     }),
+          //     type: "bar",
+          //     showBackground: true,
+          //     backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
+          //   },
+          // ],
+
+          // title: {
+          //   text: "装置在线统计",
+          // },
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            type: "scroll",
+            orient: "vertical",
+            right: 10,
+            top: 20,
+            bottom: 20,
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["40%", "70%"],
+              avoidLabelOverlap: false,
+
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: "#fff",
+                borderWidth: 2,
+              },
+              label: {
+                show: true,
+                fontSize: 16,
+                fontWeight: "bold",
+                formatter: "{b}\n{d}%",
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 26,
+                  fontWeight: "bold",
+                  formatter: "{b}\n{d}%",
+                },
+              },
+              labelLine: {
+                show: true,
+              },
+              data: arr,
+            },
+          ],
+        };
+        this.myChart4.setOption(option);
+        window.addEventListener("resize", () => {
+          this.myChart4.resize();
+        });
+      });
+    },
+  },
+};
+</script>
 <style lang="less">
-.stritlBox {
+.stritleEchartsPage {
-  width: 100%;
+  height: calc(100% - 32px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .echart-top {
+    display: flex;
+    height: 48%;
+    justify-content: space-between;
+    .el-card {
+      width: 49%;
       height: 100%;
+      .el-card__body {
+        height: calc(100% - 40px);
+        position: relative;
+      }
+    }
+    .box-card {
+      .chartClass {
+        height: calc(100% - 32px);
+        width: 100%;
+      }
+      h3 {
+        font-size: 18px;
+        color: #333;
+        line-height: 32px;
+      }
+      .lookBtn {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+      }
+      .bottomM {
+        .infoBox {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-around;
+          margin-top: 2%;
+          p {
+            width: 40%;
+            //height: 88px;
+            padding: 2%;
+            text-align: center;
+            margin: 2%;
             display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            &:first-child {
+              &:hover {
+                cursor: pointer;
+              }
+            }
+
+            span {
+              color: #333;
+              font-size: 16px;
+              &:last-child {
+                font-size: 20px;
+                margin-top: 5px;
+                font-weight: bold;
+              }
+            }
+            &:first-child {
+              span {
+                &:last-child {
+                  color: #128071;
+                }
+              }
+            }
+            &:nth-child(2) {
+              span {
+                &:last-child {
+                  color: #409eff;
+                }
+              }
+            }
+            &:nth-child(3) {
+            }
+            &:nth-child(4) {
+            }
+          }
+        }
+      }
+      .dateBox {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        .datemsg {
+          margin-right: 8px;
+          font-size: 12px;
+        }
+        .el-date-editor.el-input {
+          width: 140px;
+        }
+      }
+    }
+  }
+}
+.exportDialog {
+  .el-dialog__body {
+    //height: 400px;
+    height: 620px;
+    .exportList {
+      height: 100%;
+      .exportbtn {
+        margin-bottom: 12px;
+        float: right;
+      }
+    }
+  }
 }
 </style>

src/views/system/globalTools/index.vue

@@ -16,6 +16,21 @@
           </el-switch>
         </div>
       </el-card>
+      <el-card class="box-card globalDrawLine">
+        <div slot="header" class="clearfix">
+          <span>设置告警通道</span>
+        </div>
+        <div>
+          <el-select v-model="channel" @change="handleChange">
+            <el-option
+              v-for="item in tdOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+      </el-card>
       <el-card class="box-card globalprob">
         <div slot="header" class="clearfix">
           <span>设置告警可信度</span>
@@ -43,6 +58,7 @@ import {
   updateAlarmTypeList,
   getMarkEnableStatus,
   updateMarkEnableStatus,
+  updateAlarmChannel,
 } from "@/utils/api/index";
 
 export default {
@@ -52,6 +68,8 @@ export default {
       lineValue: false,
       lineNum: 0,
       probList: [],
+      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
+      channel: "",
     };
   },
   created() {
@@ -64,11 +82,15 @@ export default {
       getMarkEnableStatus()
         .then((res) => {
           console.log(res);
-          if (res.data === 1) {
+          if (res.data.imgMark === 1) {
             this.lineValue = true;
+            console.log("绘制开启");
           } else {
             this.lineValue = false;
+            console.log("绘制关闭");
           }
+          this.channel = res.data.alarmChannel;
+          console.log(this.channel);
         })
         .catch((err) => {});
     },
@@ -93,6 +115,8 @@ export default {
       getAlarmTypeList().then((res) => {
         console.log(res);
         this.probList = res.data.list;
+        this.tdOptions = [{ id: -1, name: "全部", alias: null }];
+        this.tdOptions = this.tdOptions.concat(res.data.channellist);
       });
     },
     setProb() {
@@ -113,6 +137,25 @@ export default {
           console.log(err);
         });
     },
+    //获取告警通道
+    handleChange(val) {
+      console.log(val);
+      updateAlarmChannel({ channel: this.channel })
+        .then((res) => {
+          console.log(res);
+          if (res.code === 200) {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "告警通道设置成功",
+              type: "success",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
 };
 </script>

vue.config.js

@@ -29,11 +29,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的
         },
       },
     },