时间表

.postcssrc.js

@@ -0,0 +1,8 @@
+// module.exports = {
+//   plugins: {
+//     "postcss-pxtorem": {
+//       rootValue: 37.5,
+//       propList: ["*"],
+//     },
+//   },
+// };

package-lock.json

@@ -1973,49 +1973,6 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
-      },
-      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.10.1",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2180,6 +2137,47 @@
         }
       }
     },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.10.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
+      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -3769,12 +3767,12 @@
       "dev": true
     },
     "echarts": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
-      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
       "requires": {
         "tslib": "2.3.0",
-        "zrender": "5.4.3"
+        "zrender": "5.4.4"
       }
     },
     "ee-first": {
@@ -5242,6 +5240,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "jquery": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
+    },
     "js-md5": {
       "version": "0.7.3",
       "resolved": "https://registry.npmmirror.com/js-md5/-/js-md5-0.7.3.tgz",
@@ -6716,6 +6719,12 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "postcss-pxtorem": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
+      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg==",
+      "dev": true
+    },
     "postcss-reduce-initial": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
@@ -8788,9 +8797,9 @@
       }
     },
     "zrender": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
-      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
       "requires": {
         "tslib": "2.3.0"
       }

package.json

@@ -10,8 +10,9 @@
   "dependencies": {
     "axios": "^1.3.4",
     "core-js": "^3.8.3",
-    "echarts": "^5.4.2",
+    "echarts": "^5.4.3",
     "element-ui": "^2.15.13",
+    "jquery": "^3.7.0",
     "moment": "^2.29.4",
     "update-element-ui-theme": "^1.0.0",
     "v-viewer": "^1.6.4",
@@ -32,6 +33,7 @@
     "js-md5": "^0.7.3",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
+    "postcss-pxtorem": "^6.0.0",
     "style-resources-loader": "^1.5.0",
     "swiper": "^5.3.6",
     "vue-awesome-swiper": "^4.1.0",

public/index.html

@@ -3,7 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
     <title>视频监控可视化平台</title>

src/App.vue

@@ -9,8 +9,49 @@ export default {
   data() {
     return {};
   },
+  watch: {},
+  created() {},
   mounted() {},
+  methods: {},
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+// @media only screen and (orientation: portrait) and (max-width: 768px) {
+//   /*竖屏 css*/
+//   // 需求代码
+//   html {
+//     width: 100vmin !important;
+
+//     height: 100vmax !important;
+//   }
+
+//   body {
+//     width: 100vmin !important;
+
+//     height: 100vmax !important;
+//   }
+
+//   #app {
+//     width: 100vmax !important;
+
+//     height: 100vmin !important;
+
+//     transform-origin: top left;
+
+//     transform: rotate(90deg) translate(0, -100vmin);
+//   }
+//   .el-menu--horizontal {
+//   }
+// }
+
+// landscape 为判断为横屏
+
+@media only screen and (orientation: landscape) and (max-height: 600px) {
+  /*横屏 css*/
+  // 需求代码
+  #app {
+    //background: #f00;
+  }
+}
+</style>

src/assets/css/element.less

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

src/assets/css/reset.css

@@ -9,7 +9,6 @@ body,
 .wrapper {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 
 body {
@@ -45,3 +44,14 @@ a {
   background-color: #f0f0f0;
   border-radius: 32px;
 }
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #e8f5f4 !important;
+}
+.el-table__body tr.hover-row.current-row > td.el-table__cell,
+.el-table__body
+  tr.hover-row.el-table__row--striped.current-row
+  > td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
+.el-table__body tr.hover-row > td.el-table__cell {
+  background-color: #e8f5f4 !important;
+}

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/Home.vue

@@ -24,6 +24,8 @@ export default {
   components: {
     vHead,
   },
+  mounted() {},
+  methods: {},
   created() {},
 };
 </script>
@@ -46,4 +48,261 @@ export default {
     box-sizing: border-box;
   }
 }
+
+@media (max-width: 900px) {
+  .greenStyle .header {
+    // background: #000;
+    width: 100%;
+    height: 40px;
+    font-size: 12px;
+    line-height: 40px;
+    .logo {
+      display: none;
+    }
+    .el-menu-item {
+      padding: 0 10px;
+    }
+    .el-menu-item [class^="el-icon-"] {
+      width: 12px;
+    }
+    .sidebar .el-menu--horizontal .el-menu-item {
+      height: 40px;
+      line-height: 40px;
+
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+    }
+    .sidebar .el-menu--horizontal .el-submenu .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+    }
+    .header-user-con {
+      height: 40px;
+      .user-avator {
+        margin-left: 4px;
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .user-avator {
+        //display: none;
+      }
+    }
+    .header-right {
+      padding-right: 12px;
+    }
+  }
+  .content-box {
+    top: 41px;
+    //首页
+    .stritleEchartsPage {
+      height: 100%;
+      .exportDialog {
+        .el-dialog {
+          margin-top: 180px !important;
+          width: 80%;
+        }
+      }
+      .el-card .el-card__body {
+        padding: 8px;
+        height: calc(100% - 16px);
+      }
+      .echart-top {
+        .box-card {
+          h3 {
+            font-size: 12px;
+            line-height: 20px;
+          }
+          .bottomM {
+            p {
+              padding: 1.5%;
+              margin: 1.5%;
+              zoom: 0.8;
+              span {
+                font-size: 12px !important;
+              }
+            }
+          }
+          .chartClass {
+            height: calc(100% - 16px);
+            zoom: 0.6;
+          }
+          .dateBox {
+            top: 8px;
+            right: 8px;
+            .el-input__inner {
+              height: 20px;
+              line-height: 20px;
+            }
+            .el-input__icon {
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+    //realMonitor实时监控
+    .realMonitor {
+      .monitor-container {
+        .sideBar {
+          width: 200px;
+          .el-tree-node__content {
+            font-size: 10px !important;
+          }
+          .el-tree-node__children {
+            .el-tree-node__content {
+              padding-left: 8px !important;
+            }
+          }
+          .radioFilter {
+            .refresh {
+              display: none;
+            }
+          }
+        }
+        .picSetBox {
+          .swiperBox {
+            .title {
+              height: 20px;
+              line-height: 20px;
+              .el-breadcrumb {
+                height: 20px;
+                line-height: 20px;
+                font-size: 12px;
+              }
+            }
+            .thumb-example {
+              height: calc(100% - 8px);
+              .radioBox {
+                top: -18px;
+              }
+              .picTop {
+                height: 70%;
+              }
+              .picBottom {
+                height: 30%;
+              }
+            }
+          }
+        }
+        .picSetBox {
+          .parameterArea {
+            width: 180px;
+            .setTimebtn .buttonGroup .el-button {
+              width: 84px;
+            }
+            .setfocalLength {
+              .selectChannel {
+                .labelname {
+                  font-size: 12px;
+                }
+              }
+              .buttonGroup .el-button {
+                width: 84px;
+              }
+            }
+          }
+        }
+        .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
+          width: 174px;
+        }
+      }
+      .infoDialog {
+        .el-dialog {
+          width: 80% !important;
+          margin-top: 120px !important;
+        }
+      }
+      .setTimeDialog {
+        .el-dialog {
+          width: 80% !important;
+          margin-top: 120px !important;
+        }
+      }
+      .parameterSetDialog {
+        .el-dialog {
+          width: 100% !important;
+          margin-top: 140px !important;
+        }
+      }
+    }
+    //realTimeSearch历史图片
+    .realTimeSearch {
+      height: auto;
+      .searchMain {
+        .searchBox {
+          .el-form-item__label {
+            font-size: 12px;
+          }
+          .el-select {
+            width: 100px;
+          }
+          .el-date-editor.el-input,
+          .el-date-editor.el-input__inner {
+            width: 188px;
+          }
+        }
+      }
+      .pictureBox {
+        height: 100%;
+        overflow: auto;
+        .imgList {
+          width: calc((100% - 50px) / 3);
+          height: auto;
+          margin: 2px;
+          .bigpic {
+            position: relative;
+            img {
+              height: 200px;
+            }
+            .caption {
+              position: absolute;
+              bottom: 0px;
+              background: #169e8ca1;
+              width: calc(100% - 8px);
+              padding: 4px;
+              .infoTop {
+                color: #fff;
+                font-size: 12px;
+              }
+              .infoBottom {
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+    //告警处理
+    .alarmHandBox {
+      height: auto;
+    }
+    .lineInformation,
+    .towerinfobox,
+    .camerChannel,
+    .photoGraphicDevice,
+    .deviceInformation,
+    .deviceReport,
+    .globalBox {
+      height: auto;
+      .el-dialog {
+        width: 100% !important;
+        margin-top: 140px !important;
+      }
+    }
+  }
+  .setRoadDialog {
+    .el-dialog {
+      margin-top: 140px !important;
+    }
+  }
+}
 </style>

src/components/common/Sidebar.vue

@@ -51,13 +51,13 @@
 export default {
   data() {
     return {
-      activeIndex: "/realTimeMonitor",
+      activeIndex: "/stritl",
       items: [
-        // {
-        //   icon: "el-icon-s-home",
-        //   index: "stritl",
-        //   title: "首页",
-        // },
+        {
+          icon: "el-icon-s-home",
+          index: "/stritl",
+          title: "首页",
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",
@@ -106,6 +106,14 @@ export default {
               index: "/devicePhotoSchedule",
               title: "拍照时间表设置",
             },
+            {
+              index: "/deviceReport",
+              title: "装置报表",
+            },
+            {
+              index: "/waterMark",
+              title: "水印下发",
+            },
             // {
             //   index: "/deviceUpgrade",
             //   title: "装置升级",
@@ -132,13 +140,18 @@ export default {
             },
           ],
         },
-      ],
-      items1: [
         // {
-        //   icon: "el-icon-s-home",
-        //   index: "stritl",
-        //   title: "首页",
+        //   icon: "el-icon-setting",
+        //   index: "/itOperation",
+        //   title: "运维管理",
         // },
+      ],
+      items1: [
+        {
+          icon: "el-icon-s-home",
+          index: "stritl",
+          title: "首页",
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",
@@ -215,11 +228,11 @@ export default {
         },
       ],
       items2: [
-        // {
-        //   icon: "el-icon-s-home",
-        //   index: "stritl",
-        //   title: "首页",
-        // },
+        {
+          icon: "el-icon-s-home",
+          index: "stritl",
+          title: "首页",
+        },
         {
           icon: "el-icon-camera",
           index: "/realTimeMonitor",
@@ -255,18 +268,18 @@ export default {
               title: "杆塔信息管理",
             },
 
-            {
-              index: "/cameraChannel",
-              title: "通道管理",
-            },
+            // {
+            //   index: "/cameraChannel",
+            //   title: "通道管理",
+            // },
             {
               index: "/photographicDevice",
               title: "拍照装置管理",
             },
-            {
-              index: "/devicePhotoSchedule",
-              title: "拍照时间表设置",
-            },
+            // {
+            //   index: "/devicePhotoSchedule",
+            //   title: "拍照时间表设置",
+            // },
             // {
             //   index: "/deviceUpgrade",
             //   title: "装置升级",
@@ -324,6 +337,9 @@ export default {
       height: 70px;
       line-height: 70px;
     }
+    .el-submenu__title {
+      padding: 0 10px;
+    }
     .el-dropdown-menu__item,
     .el-menu-item,
     .el-submenu__title {

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/main.js

@@ -11,9 +11,9 @@ Vue.use(ElementUI, {
   size: "small",
 });
 
-//  引入Echarts
-// import * as echarts from "echarts";
-// Vue.prototype.$echarts = echarts;
+//引入Echarts;
+import * as echarts from "echarts";
+Vue.prototype.$echarts = echarts;
 
 // // 引入 vue-awesome-swiper
 // import VueAwesomeSwiper from "vue-awesome-swiper";
@@ -43,10 +43,17 @@ Vue.use(Viewer);
 Viewer.setDefaults({
   zIndexInline: 9999,
 });
-
+//使用jq
+import jquery from "jquery";
+Vue.prototype.$ = jquery;
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
-  document.title = `${to.meta.title} | 视频监控可视化平台`;
+  if (to.meta.title == "") {
+    document.title = ` 视频监控可视化平台`;
+  } else {
+    document.title = `${to.meta.title} | 视频监控可视化平台`;
+  }
+
   const role = localStorage.getItem("role");
   const token = localStorage.getItem("token");
   console.log(role, token);

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-
+// import MobilePage from "../views/realTimeMonitor/mobile_index.vue";
+// import PCPage from "../views/realTimeMonitor/index.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -13,7 +14,7 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "home" */ "../components/common/Home.vue"),
     meta: { title: "首页" },
-    redirect: "/realTimeMonitor",
+    redirect: "/stritl",
     children: [
       {
         path: "/stritl",
@@ -22,7 +23,7 @@ const routes = [
             /* webpackChunkName: "dashboard" */ "../views/stritl/index.vue"
           ),
         meta: {
-          title: "系统首页",
+          title: "",
           icon: "el-icon-s-home",
         },
       },
@@ -31,7 +32,7 @@ const routes = [
         path: "/realTimeMonitor",
         component: () =>
           import(
-            /* webpackChunkName: "icon" */ "../views/realTimeMonitor/index.vue"
+            /* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
           ),
         meta: {
           title: "实时监控",
@@ -112,6 +113,22 @@ const routes = [
           ),
         meta: { title: "拍照时间表设置", icon: "el-icon-setting" },
       },
+      {
+        path: "/deviceReport",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/monitoringEquipment/deviceReport/index.vue"
+          ),
+        meta: { title: "装置报表", icon: "el-icon-setting" },
+      },
+      {
+        path: "/waterMark",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/management/userEquipment/waterMark/index.vue"
+          ),
+        meta: { title: "水印下发", icon: "el-icon-setting" },
+      },
 
       {
         path: "/imageSettings",
@@ -145,7 +162,14 @@ const routes = [
           ),
         meta: { title: "全局设置" },
       },
-
+      {
+        path: "/itoperation",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/itOperation/index.vue"
+          ),
+        meta: { title: "运维管理", icon: "el-icon-setting" },
+      },
       // {
       //   path: "/videoMonitor",
       //   component: () =>
@@ -154,14 +178,14 @@ const routes = [
       //     ),
       //   meta: { title: "监控视频", icon: "el-icon-video-camera" },
       // },
-      // {
-      //   path: "/videoHistory",
-      //   component: () =>
-      //     import(
-      //       /* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue"
-      //     ),
-      //   meta: { title: "视频回放", icon: "el-icon-video-camera" },
-      // },
+      {
+        path: "/videoHistory",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/videoMonitor/videoHistory.vue"
+          ),
+        meta: { title: "视频回放" },
+      },
 
       // {
       //   path: "/groupInformation",

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",
-    data,
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
   });
 }
 //获取图片接口
@@ -62,6 +99,17 @@ export function getDeviceList(data) {
     },
   });
 }
+//获取最新装置信息aaa
+export function getinfoStatus(data) {
+  return request({
+    url: "/api/getLastTermInfo",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
 //获取最新装置信息
 export function getNewDeviceList(data) {
   return request({
@@ -459,6 +507,17 @@ export function getTermGPSPosition(data) {
 }
 // 获取GPS位置
 
+export function getTermLastGPSPosition(data) {
+  return request({
+    url: "/api/getTermLastGPSPosition",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+// 获取GPS位置
 export function getTermGPSJoggle(data) {
   return request({
     url: "/api/getTermGPS",
@@ -476,14 +535,26 @@ export function setTermGPSJoggle(data) {
 }
 
 //手动拍照
-export function getLatestPhotoJoggle(data) {
+export function takePicJoggle(data) {
   return request({
-    url: "/api/getLatestPhoto",
-    method: "post",
-    data,
+    url: "/api/takePic",
+    method: "get",
+
+    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) {
@@ -505,11 +576,11 @@ export function getAllTowerJoggle(data) {
 }
 
 //手动拍照获取最新图片
-export function getReturnedPhotoJoggle(data) {
+export function getTakePicPhotoStatusJoggle(data) {
   return request({
-    url: "/api/getReturnedPhoto",
-    method: "post",
-    data,
+    url: "/api/getTakePicPhotoStatus",
+    method: "get",
+    params: data,
   });
 }
 
@@ -684,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({
@@ -696,3 +778,76 @@ 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,
+  });
+}
+
+//规约版本
+export function getProtocolList(data) {
+  return request({
+    url: "/api/getProtocolList",
+    method: "get",
+    params: data,
+  });
+}
+
+//统一调用接口命令
+
+export function setTermCamera(data) {
+  return request({
+    url: "/api/setTermCamera",
+    method: "post",
+    data,
+    // headers: {
+    //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    // },
+  });
+}
+
+//统一返回数据
+
+export function getTermCameraRequest(data) {
+  return request({
+    url: "/api/getTermCameraRequest",
+    method: "post",
+    data,
+    // headers: {
+    //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    // },
+  });
+}

src/utils/rem.js

@@ -0,0 +1,12 @@
+//兼容处理
+function setHtml() {
+  //获取设备宽度
+  var deviceWidth = document.documentElement.offsetWidth;
+  //给html标签设置fontSize，就是给rem赋值
+  document.documentElement.style.fontSize = (deviceWidth / 375) * 10 + "px";
+}
+
+//窗口大小变化的时候执行
+window.onresize = setHtml;
+//页面初始加载时也要触发
+setHtml();

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">
-      <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"></el-image>
-        </el-carousel-item>
-      </el-carousel>
+    <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>
 </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;
-        this.imglist = res.data.list;
+        console.log(res);
+
+        this.historyPicLoading = false;
+        this.terminalPhoto = res.data.list;
+
         this.total = res.data.total;
       });
     },
@@ -62,33 +74,53 @@ 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() {
-      this.isShow = true;
+    display(data) {
+      this.historyPicdialog = true;
+      this.picInfoData = data;
+      console.log(data);
     },
     hide() {
-      this.isShow = false;
-      this.imglist = [];
+      this.historyPicdialog = false;
+      this.terminalPhoto = [];
     },
     handleclose() {
-      this.isShow = false;
-      this.imglist = [];
+      this.historyPicdialog = false;
+      this.terminalPhoto = [];
     },
   },
 };
 </script>
 <style lang="less">
-.historyPic {
-  .el-image {
-    width: 1152px;
-    height: 648px;
-    img {
-      width: 1152px;
-      height: 648px;
+.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%;
     }
   }
 }

src/views/cameraChannel/components/adddeviceDialog.vue

@@ -17,8 +17,11 @@
       <el-form-item label="通道名称：" prop="channelname">
         <el-input v-model="formdata.channelname" autocomplete="off"></el-input>
       </el-form-item>
-      <el-form-item label="装置ID：" prop="id" :error="errorMsg">
-        <el-input-number v-model="formdata.id"></el-input-number>
+      <el-form-item label="通道编号：" prop="id" :error="errorMsg">
+        <el-input-number
+          v-model="formdata.id"
+          :disabled="title == '修改' ? true : false"
+        ></el-input-number>
       </el-form-item>
       <!-- <el-form-item label="分辨率高：" prop="maxResolutionHeight">
         <el-input-number
@@ -59,7 +62,7 @@ export default {
         channelname: [
           { required: true, message: "请输入名称", trigger: "blur" },
         ],
-        id: [{ required: true, message: "请输入id", trigger: "blur" }],
+        id: [{ required: true, message: "请输入通道编号", trigger: "blur" }],
         // maxResolutionHeight: [
         //   { required: true, message: "请输入分辨率高", trigger: "blur" },
         // ],
@@ -76,7 +79,8 @@ export default {
       if (val == null) {
         return (this.formdata = {});
       }
-      this.formdata = val;
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
     },
     // 保存确定操作
     submitForm() {

src/views/cameraChannel/index.vue

@@ -23,11 +23,19 @@
         >
           <!-- <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
             prop="channelname"
           ></el-table-column>
+          <el-table-column
+            label="通道编号"
+            show-overflow-tooltip
+            prop="id"
+          ></el-table-column>
           <el-table-column
             label="分辨率高"
             show-overflow-tooltip
@@ -47,10 +55,10 @@
                 disabled
               ></el-switch> -->
               <el-tag
-                :type="scope.row.status == 1 ? 'success' : 'info'"
+                :type="scope.row.status == 1 ? 'warning' : 'success'"
                 effect="dark"
               >
-                {{ scope.row.status == 1 ? "开启" : "关闭" }}</el-tag
+                {{ scope.row.status == 1 ? "开启中" : "已关闭" }}</el-tag
               >
             </template>
           </el-table-column>
@@ -187,15 +195,15 @@ export default {
 </script>
 <style lang="less">
 .camerChannel {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: @color-white;
 
   .deviceBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
   }
   .deviceBtnGroup {
@@ -208,6 +216,14 @@ export default {
     margin-top: 16px;
     height: calc(100% - 48px);
     //background: #fcc;
+    .el-tag--dark.el-tag--success {
+      background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
+      border-color: transparent;
+    }
+    .el-tag--dark.el-tag--warning {
+      background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
+      border: 0px solid transparent;
+    }
   }
 }
 </style>

src/views/components/carouselChart.vue

@@ -1,52 +1,69 @@
 <template>
   <div class="thumb-example">
+    <div class="radioBox" v-if="bigPicPath.indexOf('nopic') == -1">
+      {{ picRadio }}
+    </div>
     <div class="picTop">
-      <div
-        class="bigimg"
-        v-if="
-          bigPicPath.indexOf('nopic') == -1 &&
-          bigPicPath.indexOf('videos') == -1
-        "
-        :style="
-          bigPicPath ? 'backgroundImage:url(' + bigPicPath + '!128x72)' : ''
-        "
-        @click="handleBigPicbox(bigPicPath)"
-      >
-        <img ref="picJpg" class="animImg" :src="bigPicPath" />
+      <!-- 判断是否是图片并且不为空 -->
 
-        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
-        <!-- <p class="mark">
-          {{ bigPicPath }}
-          <span>{{ this.activeSmall }}</span>
-        </p> -->
-      </div>
       <div
+        class="bigimg"
+        :class="nopicClass ? 'picNo' : ''"
         v-if="
-          showBigpic &&
           bigPicPath.indexOf('nopic') == -1 &&
           bigPicPath.indexOf('videos') == -1
         "
-        class="showPic"
-        @click="closePic"
+        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
       >
-        <div class="picboxI">
-          <img class="maskPic" :src="bigPicPath" />
-          <i @click="closePic" class="el-icon-circle-close"></i>
+        <el-button
+          class="downBtn"
+          @click.stop="
+            downLoadPic(
+              bigPicPath.substring(0, bigPicPath.length - 9),
+              bigPicPath.substring(0, bigPicPath.length - 9)
+            )
+          "
+          >下载图片</el-button
+        >
+        <!-- <a
+          class="downBtn"
+          :href="bigPicPath.substring(0, bigPicPath.length - 9)"
+          download
+          >下载图片</a
+        > -->
+        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
+        <div
+          class="nosee"
+          :style="'backgroundImage:url(' + bigPicPath + ')'"
+        ></div>
+        <div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
+          <img
+            ref="picJpg"
+            class="animImg"
+            :src="bigPicPath"
+            @error="setDefaultImage"
+          />
         </div>
+        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
+        <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
       </div>
       <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
         <video
           width="100%"
           height="100%"
-          :src="bigPicPath"
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
           controls="controls"
           :poster="videopath"
           autoplay
         ></video>
       </div>
-      <div class="bigimg" v-else>
-        <img class="animImg" :src="bigPicPath" />
+      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
+        <img
+          class="animImg"
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
+        />
       </div>
+
       <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
         <i class="el-icon-arrow-left"></i>
       </div>
@@ -72,8 +89,9 @@
               item.path.indexOf('videos') == -1
             "
           >
-            <img :src="item.path + '!260x160'" />
+            <img :src="item.path + '!260x160'" @error="setDefaultImage" />
             <p class="timeInfo">
+              <!-- <i class="el-icon-picture-outline"></i> -->
               <el-tooltip
                 class="item"
                 effect="dark"
@@ -112,8 +130,9 @@
               v-if="item.thumb == null"
             />
             <img :src="item.thumb" v-else />
-            <p class="videoicon"><i class="el-icon-video-play"></i></p>
+
             <p class="timeInfo">
+              <i class="el-icon-video-camera"></i>
               <el-tooltip
                 class="item"
                 effect="dark"
@@ -162,11 +181,41 @@
         <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>
 
 <script>
 import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
+import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
   components: {},
   props: {
@@ -188,6 +237,7 @@ export default {
         url: "src",
       },
       isshowArrow: true, //判断是否显示切换按钮
+      mediaType: "", //判断图片类型是视频还是图片
       bigPicPath: "", //大图地址
       videopath: "",
       smallPicPath: "", //小图地址
@@ -197,7 +247,6 @@ export default {
       page: 1, //当前第几页
       pagesize: 5, //每页显示五条
       total: 0, //总共又几页
-
       localPoints: [], //画图对象
       canvas: null,
       ctx: null,
@@ -207,11 +256,20 @@ export default {
       showBigpic: false,
       flagline: true,
       markEnable: "",
+      zoomD: 1,
+      canvasloading: false,
+      bigImgPath: "",
+      picRadio: "", //图片分辨率
+      nopicClass: false,
     };
   },
   mounted() {
     console.log(this.terminalPhoto);
-    this.bigPicPath = this.terminalPhoto[0].path;
+    this.mediaType = this.terminalPhoto[0].mediaType;
+    this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+    this.picRadio =
+      this.terminalPhoto[0].width + "x" + this.terminalPhoto[0].height;
+    // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
     this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
     this.total = this.terminalPhoto.length / this.pagesize;
     console.log(this.fiveList);
@@ -236,18 +294,134 @@ export default {
   },
   watch: {
     terminalPhoto: function (newVal, oldVal) {
-      this.bigPicPath = this.terminalPhoto[0].path;
+      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() {
+    setDefaultImage(e) {
+      console.log(e);
+      if (e.isTrusted) {
+        e.target.src = defaultImage;
+      }
+    },
+    async downLoadPic(path, name) {
+      const imgUrl = path;
+      const response = await fetch(imgUrl);
+      const blob = await response.blob();
+      // 创建下载链接
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // 释放 Blob URL
+      window.URL.revokeObjectURL(url);
+    },
+
+    // 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() {
-      this.showBigpic = false;
+    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;
@@ -263,9 +437,17 @@ export default {
       this.canvas = this.$refs.myCanvas;
       this.imgpic = this.$refs.picJpg;
       console.log(this.canvas);
-      console.log(this.imgpic);
+      console.log(this.imgpic.src);
+      if (this.imgpic.src.indexOf("nodatapic") !== -1) {
+        console.log("aaa");
+        this.nopicClass = true;
+      } else {
+        this.nopicClass = false;
+        console.log("bbb");
+      }
       this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
       this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
+
       this.ctx = this.canvas.getContext("2d");
       console.log(this.localPoints);
       if (this.flagline == true) {
@@ -308,13 +490,20 @@ export default {
         (this.page - 1) * this.pagesize,
         this.page * this.pagesize
       );
-      this.bigPicPath = this.fiveList[this.activeSmall].path;
+
+      this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
+
       this.videopath = this.fiveList[this.activeSmall].thumb;
     },
     //大图点击左侧切换图片
     leftClick() {
       this.bigNum--; //执行下一张
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path;
+      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+      this.picRadio =
+        this.terminalPhoto[this.bigNum].width +
+        "x" +
+        this.terminalPhoto[this.bigNum].height;
       this.activeSmall--;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       console.log(this.page);
@@ -340,7 +529,12 @@ export default {
     //点击右侧切换图片
     rightClick() {
       this.bigNum++; //执行下一张
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path;
+      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+      this.picRadio =
+        this.terminalPhoto[this.bigNum].width +
+        "x" +
+        this.terminalPhoto[this.bigNum].height;
       this.activeSmall++;
       console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
       if (this.activeSmall > 4) {
@@ -365,9 +559,15 @@ export default {
     //点击小图变成大图
     handleBigpic(row, index) {
       console.log(row);
-      console.log();
       this.activeSmall = index;
-      this.bigPicPath = row.path;
+      this.mediaType = row.mediaType;
+      console.log(this.$refs.picJpg);
+      this.bigPicPath = row.path + "!1366x768";
+
+      this.picRadio = row.width + "x" + row.height;
+
+      console.log();
+      // this.bgbigPath = row.path + "!1366x768";
       getCoordinate({
         channelId: row.channelId,
         needPic: "1",
@@ -444,46 +644,15 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 0px);
+  height: calc(100% - 32px);
   box-sizing: border-box;
-  .showPic {
-    position: fixed;
-    background-color: rgba(0, 0, 0, 50%);
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    right: 0;
-    top: 0;
-    z-index: 9999;
-    display: flex;
-    cursor: pointer;
-    .picboxI {
-      position: relative;
-      max-width: 1280px;
-      max-height: 720px;
-      margin: auto;
-      animation-name: scaleDraw;
-      /*关键帧名称*/
-      animation-timing-function: ease;
-      /*动画的速度曲线*/
-      animation-iteration-count: 1;
-      /*动画播放的次数*/
-      animation-duration: 0.65s;
-
-      img {
-        max-width: 1280px;
-        max-height: 720px;
-        margin: auto;
-      }
-      .el-icon-circle-close {
-        position: absolute;
-        right: -24px;
-        font-size: 48px;
-        color: #fff;
-        cursor: pointer;
-        top: -24px;
-      }
-    }
+  position: relative;
+  .radioBox {
+    position: absolute;
+    right: 24px;
+    color: #fff;
+    font-size: 14px;
+    top: -24px;
   }
   .picTop {
     width: 100%;
@@ -491,11 +660,29 @@ export default {
     overflow: hidden;
     margin-bottom: 4px;
     position: relative;
+    .downBtn {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border: none;
+      right: 8px;
+      bottom: 28px;
+      color: #fff;
+      z-index: 5;
+      opacity: 0;
+      &:hover {
+        background: rgba(0, 0, 0, 0.9);
+        color: #169e8c;
+      }
+    }
     &:hover {
       .arrow {
         opacity: 1;
         transition: all 0.5s ease-in;
       }
+      .downBtn {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
     }
     .bigimg {
       width: 100%;
@@ -505,6 +692,23 @@ export default {
       justify-content: center;
       position: relative;
       background-size: 100% 100%;
+      .nosee {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-size: 100% 100%;
+        z-index: 2;
+      }
+      .bigimgView {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 3;
+        opacity: 0;
+        .animImg {
+          opacity: 0;
+        }
+      }
       .mark {
         position: absolute;
         bottom: 12px;
@@ -523,6 +727,17 @@ export default {
         width: 100%;
         height: 100%;
         cursor: pointer;
+        z-index: 2;
+      }
+    }
+    .picNo {
+      .bigimgView {
+        opacity: 1;
+        .animImg {
+          opacity: 1;
+          cursor: default;
+          pointer-events: none;
+        }
       }
     }
     img {
@@ -550,6 +765,7 @@ export default {
       line-height: 60px;
       width: 40px;
       height: 40px;
+      z-index: 4;
       &:hover {
         color: @color-primary;
       }
@@ -603,22 +819,35 @@ export default {
         font-size: 12px;
         text-align: center;
         color: #333;
-      }
-      .videoicon {
-        position: absolute;
-        top: 73%;
-        left: 10%;
-        transform: translate(-50%, -50%);
-        i {
-          font-size: 28px;
-          color: #fff;
+        min-height: 20px;
+        .el-icon-picture-outline,
+        .el-icon-video-camera {
+          font-size: 20px;
+          margin-right: 8px;
+          align-items: center;
+          vertical-align: sub;
+          color: @color-primary;
         }
       }
+      // .videoicon {
+      //   position: absolute;
+      //   top: 73%;
+      //   left: 10%;
+      //   transform: translate(-50%, -50%);
+      //   i {
+      //     font-size: 28px;
+      //     color: #fff;
+      //   }
+      // }
       .borderActive {
         .timeInfo {
           //background: @color-primary;
           background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
           color: #fff;
+          .el-icon-picture-outline,
+          .el-icon-video-camera {
+            color: #fff;
+          }
         }
       }
       // .borderActive {
@@ -663,6 +892,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是需要绑定到选择器的关键帧名称*/

src/views/components/carouselChart2.vue

@@ -1,282 +0,0 @@
-<template>
-  <div class="thumb-example">
-    <!-- swiper1 -->
-    <swiper
-      class="swiper gallery-top"
-      :options="swiperOptionTop"
-      ref="swiperTop"
-    >
-      <swiper-slide
-        class="slide-1"
-        v-for="(item, index) in terminalPhoto"
-        :key="item.id"
-      >
-        <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
-          <img v-if="index == 0" :src="item.path + '!1280x720'" />
-          <img
-            v-else
-            src="../../assets/img/loading.jpg"
-            :data-src="item.path + '!1280x720'"
-            class="swiper-lazy"
-          />
-        </viewer>
-        <div class="bigimg" v-else>
-          <img :src="item.path" alt="" />
-        </div>
-      </swiper-slide>
-      <div
-        class="swiper-button-next swiper-button-white"
-        slot="button-next"
-      ></div>
-      <div
-        class="swiper-button-prev swiper-button-white"
-        slot="button-prev"
-      ></div>
-    </swiper>
-    <!-- swiper2 Thumbs -->
-    <swiper
-      class="swiper gallery-thumbs"
-      :options="swiperOptionThumbs"
-      ref="swiperThumbs"
-    >
-      <swiper-slide
-        class="slide"
-        v-for="(item, index) in terminalPhoto"
-        :key="item.id"
-      >
-        <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
-          <img v-if="index == 0" :src="item.path + '!260x160'" />
-          <img
-            v-else
-            src="../../assets/img/loading.jpg"
-            :data-src="item.path + '!260x160'"
-            class="swiper-lazy"
-          />
-        </div>
-        <div class="bigimg" v-else>
-          <img :src="item.path" alt="" />
-        </div>
-        <!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />
-
-        <img
-          src="item.path + '!260x160'"
-          alt=""
-          :data-src="item.path + '!260x160'"
-          class="swiper-lazy"
-          v-else-if="item.path.indexOf('nopic') == -1"
-        />
-        <img :src="item.path" alt="" v-else /> -->
-        <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="拍照时间"
-            placement="top-start"
-          >
-            <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-          </el-tooltip>
-
-          (
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="图片上传时间"
-            placement="top-start"
-          >
-            <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-          </el-tooltip>
-          )
-          <span>--通道{{ item.channelId }}</span>
-        </p>
-      </swiper-slide>
-    </swiper>
-  </div>
-</template>
-
-<script>
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
-import "swiper/css/swiper.css";
-export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  props: {
-    terminalPhoto: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      swiperOptionTop: {
-        spaceBetween: 10,
-        //loop: true,
-        freeMode: true,
-        // loopedSlides: 1,
-        lazy: {
-          loadPrevNext: true,
-          loadPrevNextAmount: 1,
-          loadOnTransitionStart: true,
-        },
-        // lazyLoading: true, //懒加载开启
-        navigation: {
-          nextEl: ".swiper-button-next",
-          prevEl: ".swiper-button-prev",
-        },
-        observer: true, //修改swiper自己或子元素时，自动初始化swiper
-        observeParents: true, //修改swiper的父元素时，自动初始化swiper
-        onSlideChangeEnd: function (swiper) {
-          swiper.update();
-        },
-        virtual: {
-          slides: (function () {
-            var slides = [];
-            for (var i = 0; i < 100; i += 1) {
-              slides.push("Slide " + (i + 1));
-            }
-            return slides;
-          })(),
-        },
-      },
-      swiperOptionThumbs: {
-        spaceBetween: 10,
-        centeredSlides: true,
-        slidesPerView: "auto",
-        touchRatio: 0.2,
-        lazyLoading: true, //懒加载开启
-        slideToClickedSlide: true,
-        lazy: {
-          loadPrevNext: true,
-          loadPrevNextAmount: 5,
-          loadOnTransitionStart: true,
-          //loadOnTransitionStart: true,
-        },
-        observer: true, //修改swiper自己或子元素时，自动初始化swiper
-        observeParents: true, //修改swiper的父元素时，自动初始化swiper
-        onSlideChangeEnd: function (swiper) {
-          swiper.update();
-        },
-        //loop: true,
-        //loopedSlides: 4,
-      },
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const swiperTop = this.$refs.swiperTop.$swiper;
-      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
-      swiperTop.controller.control = swiperThumbs;
-      swiperThumbs.controller.control = swiperTop;
-    });
-  },
-
-  methods: {},
-};
-</script>
-<style lang="less">
-.thumb-example {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 26px);
-  box-sizing: border-box;
-  .gallery-top {
-    //background: #fcc;
-    width: 100%;
-    height: 80%;
-    overflow: hidden;
-    margin-bottom: 4px;
-    //border: 3px solid transparent;
-    .slide-1 {
-      width: 100%;
-      overflow: hidden;
-      .bigimg {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-      }
-    }
-    .swiper-button-prev.swiper-button-disabled,
-    .swiper-button-next.swiper-button-disabled {
-      opacity: 0.35;
-      cursor: auto;
-      pointer-events: none;
-      display: none !important;
-    }
-  }
-  .gallery-thumbs {
-    width: 100%;
-    height: 18%;
-    .slide {
-      width: 20%;
-      border: 3px solid transparent;
-      overflow: hidden;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .bigimg {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      img {
-        //width: 100%;
-        height: 100%;
-        object-fit: fill;
-      }
-    }
-
-    .timeInfo {
-      position: absolute;
-      bottom: 0px;
-      width: 100%;
-      background: #f0f0f0;
-      padding: 8px 0px;
-      font-size: 12px;
-      text-align: center;
-      color: #333;
-    }
-  }
-
-  .swiper-button-next.swiper-button-white,
-  .swiper-container-rtl .swiper-button-prev.swiper-button-white,
-  .swiper-button-prev.swiper-button-white,
-  .swiper-container-rtl .swiper-button-next.swiper-button-white {
-    width: 40px;
-    height: 40px;
-    border-radius: 30px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    color: #fff;
-    text-align: center;
-    line-height: 60px;
-  }
-  .swiper-button-next:after,
-  .swiper-container-rtl .swiper-button-prev:after,
-  .swiper-button-prev:after,
-  .swiper-container-rtl .swiper-button-next:after {
-    transform: scale(0.5);
-  }
-}
-// https://v1.github.surmon.me/vue-awesome-swiper/
-</style>

src/views/components/carouselChartnew.vue

@@ -1,280 +0,0 @@
-<template>
-  <div class="thumb-example">
-    <!-- swiper1 -->
-
-    <swiper
-      class="swiper gallery-top"
-      :options="swiperOptionTop"
-      ref="swiperTop"
-    >
-      <!--  -->
-      <!-- <viewer class="swiper-slide"> 
-        
-      </viewer> -->
-      <!-- <viewer class="swiper-slide">
-       
-      </viewer> -->
-
-      <div
-        class="swiper-button-next swiper-button-white"
-        slot="button-next"
-      ></div>
-      <div
-        class="swiper-button-prev swiper-button-white"
-        slot="button-prev"
-      ></div>
-    </swiper>
-
-    <!-- swiper2 Thumbs -->
-    <swiper
-      class="swiper gallery-thumbs"
-      :options="swiperOptionThumbs"
-      ref="swiperThumbs"
-    >
-      <swiper-slide
-        class="slide"
-        v-for="(item, index) in terminalPhoto"
-        :key="item.id"
-      >
-        <div class="bigimg" v-if="item.path.indexOf('nopic') == -1">
-          <!-- <img :src="item.path + '!1280x720'" alt="" /> -->
-          <img v-if="index == 0" :src="item.path + '!260x160'" />
-          <img
-            v-else
-            src="../../assets/img/loading.jpg"
-            :data-src="item.path + '!260x160'"
-            class="swiper-lazy"
-          />
-        </div>
-        <div class="bigimg" v-else>
-          <img :src="item.path" alt="" />
-        </div>
-        <!-- <img v-if="index == 0" :src="item.path + '!1280x720'" />
-
-        <img
-          src="item.path + '!260x160'"
-          alt=""
-          :data-src="item.path + '!260x160'"
-          class="swiper-lazy"
-          v-else-if="item.path.indexOf('nopic') == -1"
-        />
-        <img :src="item.path" alt="" v-else /> -->
-        <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="拍照时间"
-            placement="top-start"
-          >
-            <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
-          </el-tooltip>
-
-          (
-          <el-tooltip
-            class="item"
-            effect="dark"
-            content="图片上传时间"
-            placement="top-start"
-          >
-            <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
-          </el-tooltip>
-          )
-          <span>--通道{{ item.channelId }}</span>
-        </p>
-      </swiper-slide>
-    </swiper>
-  </div>
-</template>
-
-<script>
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
-import "swiper/css/swiper.css";
-export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-  },
-  props: {
-    terminalPhoto: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    let a = "1111111111111";
-    return {
-      imgflag: false,
-      swiperOptionTop: {
-        lazy: {
-          loadPrevNext: true,
-          loadPrevNextAmount: 1,
-          loadOnTransitionStart: true,
-        },
-        navigation: {
-          nextEl: ".swiper-button-next",
-          prevEl: ".swiper-button-prev",
-        },
-        virtual: {
-          slides: [],
-          renderSlide: function (slide, index) {
-            if (slide.path.indexOf("nopic") != -1) {
-              return `<div class="swiper-slide"><div class="bigimg"><img src="static/img/nopic.0e9cfc7c.jpg" alt="" /></div></div>`;
-            } else {
-              return (
-                `<view class="swiper-slide">` +
-                `<div class="bigimg"  id="imgView" style="background:url(${
-                  slide.path + "!80x720"
-                });background-size:100% 100%">` +
-                `<img id="imgid" src=" ${slide.path + "!1280x720"}  " />
-                </view>`
-              );
-            }
-          },
-        },
-      },
-      swiperOptionThumbs: {
-        spaceBetween: 10,
-        centeredSlides: true,
-        slidesPerView: "auto",
-        slideToClickedSlide: true,
-        lazy: {
-          loadPrevNext: true,
-          loadPrevNextAmount: 5,
-          loadOnTransitionStart: true,
-        },
-      },
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      const swiperTop = this.$refs.swiperTop.$swiper;
-      const swiperThumbs = this.$refs.swiperThumbs.$swiper;
-      swiperTop.controller.control = swiperThumbs;
-      swiperThumbs.controller.control = swiperTop;
-    });
-  },
-  methods: {},
-  watch: {
-    terminalPhoto: function (newVal, oldVal) {
-      this.swiperOptionTop.virtual.slides = newVal;
-    },
-  },
-  created() {
-    console.log(this.swiperOptionTop.virtual.slides);
-    this.swiperOptionTop.virtual.slides = this.terminalPhoto;
-  },
-};
-</script>
-<style lang="less">
-.thumb-example {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 26px);
-  box-sizing: border-box;
-  .gallery-top {
-    //background: #fcc;
-    width: 100%;
-    height: 80%;
-    overflow: hidden;
-    margin-bottom: 4px;
-    //border: 3px solid transparent;
-    .swiper-slide {
-      width: 100%;
-      overflow: hidden;
-      .bigimg {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: fill;
-      }
-    }
-    .swiper-button-prev.swiper-button-disabled,
-    .swiper-button-next.swiper-button-disabled {
-      opacity: 0.35;
-      cursor: auto;
-      pointer-events: none;
-      display: none !important;
-    }
-  }
-  .gallery-thumbs {
-    width: 100%;
-    height: 18%;
-    .slide {
-      width: 20%;
-      border: 3px solid transparent;
-      overflow: hidden;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .bigimg {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      img {
-        //width: 100%;
-        height: 100%;
-        object-fit: fill;
-      }
-    }
-
-    .timeInfo {
-      position: absolute;
-      bottom: 0px;
-      width: 100%;
-      background: #f0f0f0;
-      padding: 8px 0px;
-      font-size: 12px;
-      text-align: center;
-      color: #333;
-    }
-  }
-
-  .swiper-button-next.swiper-button-white,
-  .swiper-container-rtl .swiper-button-prev.swiper-button-white,
-  .swiper-button-prev.swiper-button-white,
-  .swiper-container-rtl .swiper-button-next.swiper-button-white {
-    width: 40px;
-    height: 40px;
-    border-radius: 30px;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 30px;
-    color: #fff;
-    text-align: center;
-    line-height: 60px;
-  }
-  .swiper-button-next:after,
-  .swiper-container-rtl .swiper-button-prev:after,
-  .swiper-button-prev:after,
-  .swiper-container-rtl .swiper-button-next:after {
-    transform: scale(0.5);
-  }
-  .pismask {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 99999;
-    top: 0px;
-    left: 0px;
-  }
-}
-// https://v1.github.surmon.me/vue-awesome-swiper/
-</style>

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

@@ -0,0 +1,253 @@
+<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.listTime"
+          :key="index"
+        >
+          <el-form-item
+            label="时间"
+            :prop="'listTime.' + 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"
+            >
+            </el-time-picker>
+          </el-form-item>
+          <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>
+          <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.listTime.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";
+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: "",
+          listTime: [
+            {
+              time: "",
+              span: "",
+            },
+          ],
+          list: [],
+          remark: "",
+        });
+      }
+      //this.ruleForm = val;
+      this.ruleForm = JSON.parse(JSON.stringify(val));
+      this.ruleForm.listTime.forEach((val) => {
+        this.$set(val, "time", [val.startTime, val.endTime]);
+      });
+    },
+    addModule() {
+      //新增一行
+      this.ruleForm.listTime.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.listTime.forEach((val) => {
+            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) => {
+                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

@@ -5,7 +5,6 @@
     :visible.sync="isShow"
     :close-on-click-modal="false"
     width="670px"
-    @close="handleclose"
   >
     <el-form
       label-position="left"
@@ -20,25 +19,45 @@
       <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'"
             :rules="{ required: true, message: '请选择时间', trigger: 'blur' }"
           >
-            <el-time-picker
+            <!-- <el-time-picker
               is-range
+              :picker-options="pickerOptions"
               v-model="item.time"
               range-separator="至"
               start-placeholder="开始时间"
               end-placeholder="结束时间"
-              value-format="HH:mm:ss"
+              format="HH:mm"
+              @change="handleTimeChange"
             >
-            </el-time-picker>
+            </el-time-picker> -->
+            <div class="timeBoxList">
+              <el-time-picker
+                v-model="item.startTime"
+                placeholder="开始时间"
+                format="HH:mm"
+              >
+              </el-time-picker>
+              <i class="split">~</i>
+              <el-time-picker
+                v-model="item.endTime"
+                placeholder="结束时间"
+                format="HH:mm"
+              >
+              </el-time-picker>
+            </div>
           </el-form-item>
-          <el-form-item label="间隔（分）" :prop="'list.' + index + '.span'">
+          <el-form-item
+            class="spanRight"
+            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>
@@ -53,7 +72,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>
@@ -77,6 +96,12 @@ export default {
   data() {
     return {
       isShow: false,
+      pickerOptions: {
+        disabledDate(time) {
+          // 取消开始对时间的限制
+          return false;
+        },
+      },
       rules: {
         name: [{ required: true, message: "请输入名称", trigger: "blur" }],
       },
@@ -90,25 +115,49 @@ export default {
       if (val == null) {
         return (this.ruleForm = {
           name: "",
-          list: [
+          listTime: [
             {
-              time: "",
+              startTime: "",
+              endTime: "",
               span: "",
             },
           ],
+          list: [],
           remark: "",
         });
       }
-      this.ruleForm = val;
-      this.ruleForm.list.forEach((val) => {
-        this.$set(val, "time", [val.startTime, val.endTime]);
+      //this.ruleForm = val;
+      this.ruleForm = JSON.parse(JSON.stringify(val));
+      console.log(this.ruleForm.listTime);
+      this.ruleForm.listTime.forEach((item) => {
+        this.$set(
+          item,
+          "startTime",
+          this.$moment(new Date(item.startTime), "HH:mm")
+        );
+        this.$set(
+          item,
+          "endTime",
+          this.$moment(new Date(item.endTime), "HH:mm")
+        );
+        //this.$set(item, "time", [item.startTime, item.endTime]);
       });
+      console.log();
+    },
+    handleTimeChange(value) {
+      console.log(value);
+      // this.item.time = value;
+      // // 当开始时间改变时，重新设置pickerOptions使得结束时间可以大于开始时间
+      // this.pickerOptions.disabledDate = (time) => {
+      //   return time.getTime() < this.item.time[0].getTime();
+      // };
     },
     addModule() {
       //新增一行
-      this.ruleForm.list.push({
-        time: "",
-        span: "",
+      this.ruleForm.listTime.push({
+        startTime: "",
+        endTime: "",
+        timeSpan: "",
       });
       console.log(this.$refs.timescrollref);
       this.$nextTick(() => {
@@ -133,10 +182,35 @@ 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.$set(val, "endTime", val.time[1]);
+          this.ruleForm.listTime.forEach((val) => {
+            console.log(val);
+            this.$set(val, "startTime", new Date(val.startTime));
+            this.$set(val, "endTime", new Date(val.endTime));
           });
+          let arr = [];
+          for (var i = 0; i < this.ruleForm.listTime.length; i++) {
+            console.log(this.ruleForm.listTime);
+            console.log(this.ruleForm.listTime[i].startTime);
+            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) => {
@@ -179,9 +253,9 @@ export default {
     hide() {
       this.isShow = false;
     },
-    handleclose() {
-      this.$parent.deviceList();
-    },
+    // handleclose() {
+    //   this.$parent.getruleList();
+    // },
   },
   mounted() {},
 };
@@ -210,7 +284,24 @@ export default {
           width: 30px;
         }
       }
+      .timeBoxList {
+        display: flex;
+        .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
+          width: 100px;
+          margin-right: 0px;
+        }
+        .split {
+          padding: 0 4px;
+        }
+      }
+      .spanRight {
+        margin-left: 14px;
+      }
     }
   }
 }
+.el-time-spinner__item.disabled {
+  cursor: pointer;
+}
 </style>

src/views/devicePhotoSchedule/components/setdevice.vue

@@ -14,16 +14,41 @@
           <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>{{
-              val.endTime.substring(0, val.endTime.lastIndexOf(":"))
-            }}</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>
+        <div class="mathFloor">
+          <span class="mathTitle">设置偏移量(max:10)：</span>
+          <el-input-number
+            v-model="mathMam"
+            :min="0"
+            :max="10"
+          ></el-input-number>
+          <el-button type="primary" @click="setMathFloor()">设置</el-button>
+        </div>
       </div>
 
       <!-- <h3>设置通道</h3> -->
@@ -41,8 +66,13 @@
           </el-radio-group>
         </div>
       </div>
-      <div class="flexnr" v-loading="loading" v-if="newzzList.length !== 0">
+      <div
+        class="flexnr"
+        v-loading="loading"
+        v-if="newzzList.length !== 0 || loading"
+      >
         <el-tree
+          :class="sureloading ? 'noallow' : ''"
           :data="newzzList"
           show-checkbox
           :props="defaultProps"
@@ -56,29 +86,67 @@
             class="custom-tree-node nodelist"
             slot-scope="{ data }"
           >
-            <span class="mr10">{{ data.name }}</span>
+            <span class="mr10">{{
+              data.name == null ? data.cmdid : data.name
+            }}</span>
             <div class="math">
               偏移时间(分)：
               <el-input-number
                 v-model="data.offsetNum"
                 :min="0"
-                :max="9"
+                :max="mathMam"
               ></el-input-number>
             </div>
-            <div
+            <div class="deStatus" v-if="allCheckNode.indexOf(data) != -1">
+              <el-tag v-if="xfload && showtag"
+                ><i class="el-icon-loading"></i>下发中</el-tag
+              >
+              <el-tag
+                type="danger"
+                v-if="
+                  nosuccessData.findIndex((item) => item.termid === data.id) !==
+                    -1 &&
+                  showtag &&
+                  !xfload
+                "
+                >下发失败</el-tag
+              >
+              <el-tag
+                type="success"
+                v-if="
+                  nosuccessData.findIndex((item) => item.termid === data.id) ==
+                    -1 &&
+                  showtag &&
+                  !xfload
+                "
+                >下发成功</el-tag
+              >
+            </div>
+            <!-- <div
               class="deStatus"
               v-if="allCheckNode.indexOf(data) != -1 && showtag"
             >
-              <!-- <el-tag type="success">下发成功</el-tag> -->
-              <el-tag type=""><i class="el-icon-loading"></i>下发中</el-tag>
-              <!-- <el-tag type="danger">下发失败</el-tag> -->
-            </div>
+              <el-tag
+                type="success"
+                v-if="xfsuccess && allCheckNode.indexOf(data) != -1 && showtag"
+                >下发成功</el-tag
+              >
+              <el-tag v-if="xfload && showtag"
+                ><i class="el-icon-loading"></i>下发中</el-tag
+              >
+              <el-tag
+                type="danger"
+                v-if="xferror && allCheckNode.indexOf(data) != -1 && showtag"
+                >下发失败</el-tag
+              >
+            </div> -->
           </div>
           <span v-else class="custom-tree-node" slot-scope="{ data }">
-            <span>{{ data.name }}</span>
+            <span>{{ data.name == null ? data.cmdid : data.name }}</span>
           </span>
         </el-tree>
       </div>
+
       <div class="flexnr" v-else>
         <p class="nochannel">暂无图像监测装置</p>
       </div>
@@ -99,6 +167,7 @@ import {
   getTermListByChannelJoggle,
   getCmaSchelduleUpload,
 } from "@/utils/api/index";
+import moment from "moment";
 export default {
   props: {
     title: String,
@@ -110,12 +179,13 @@ export default {
       isShow: false,
       selid: 0, //选中时间表id
       ruleSchedule: [], //时间表规则
-      checkedAisle: "", //选中通道数据
+      checkedAisle: 1, //选中通道数据
       aisleList: [], //通道数据内容
       listnr: [], //通道树状结构
       defaultProps: {
         children: "list",
         label: "name",
+        disabled: this.disabledFn,
       },
       termidArr: [],
       ruleid: "",
@@ -148,15 +218,25 @@ export default {
       flag: false,
       sureloading: false,
       showtag: false,
+      checkOffset: "",
+      mathMam: 0,
+
+      //未下发成功
+      nosuccessData: [],
+      xfsuccess: false,
+      xfload: false,
+      xferror: false,
     };
   },
   mounted() {},
   methods: {
     //判断
     getdataform(val) {
+      console.log(val);
       this.selid = val.id;
-      this.ruleSchedule = val.list;
-      console.log(this.ruleSchedule, "时间规则");
+      this.ruleSchedule = val.listTime;
+      console.log(this.ruleSchedule);
+      // console.log(this.ruleSchedule, "时间规则");
       this.getlistnr();
     },
     //获取所有通道
@@ -165,6 +245,7 @@ export default {
         .then((res) => {
           this.listnr = res.data.list;
           this.aisleList = res.data.channellist;
+          this.handleChange();
         })
         .catch((err) => {});
     },
@@ -180,19 +261,28 @@ export default {
           console.log(res);
           this.newzzList = res.data.list;
           console.log(this.newzzList);
-
-          //console.log(a);
           this.newzzList = this.getChildren(this.newzzList);
           console.log(this.newzzList);
           this.loading = false;
         })
         .catch((err) => {});
     },
-    //// 给数组里的每一个对象都添加一个isEdit属性
+    //不在线的装置不能选中
+    disabledFn(data, node) {
+      if (node.level == 3) {
+        if (!data.onlinestatus) {
+          // 根据自己的节点数据条件设置判断，我只提供了个参考
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    // 给数组里的每一个对象都添加一个isEdit属性
     getChildren(data) {
-      console.log(data);
+      //console.log(data);
       return data.map((item) => {
-        console.log(item);
+        //console.log(item);
         item = Object.assign({}, item);
         item.offsetNum = Math.floor(Math.random() * 10);
 
@@ -205,15 +295,22 @@ export default {
     handleCheckBox() {
       console.log(this.zzListCheck);
     },
+    //设置偏移量
+    setMathFloor() {
+      console.log(this.mathMam);
+      this.handleChange();
+    },
 
     // //获取所选值
     getCheckedNodes(nodeObj) {
       this.allCheckNode = this.$refs.tree.getCheckedNodes();
       // console.log(this.allCheckNode);
       console.log(nodeObj);
-      this.isactive = nodeObj.id;
+      console.log(this.allCheckNode);
+      this.isactive = nodeObj.id || nodeObj.termid;
       this.isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1;
       console.log(this.isCheck);
+      this.showtag = false;
     },
 
     // 保存确定操作
@@ -221,22 +318,183 @@ export default {
       //console.log(this.termidArr);
       this.sureSum();
       this.showtag = true;
+      this.xfload = true;
+      this.sureloading = true;
     },
     //时间表
     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: this.allCheckNode[i].offsetNum,
-        };
-        console.log(parmsobj);
-        ruleBox.push(parmsobj);
+        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" ||
+              this.allCheckNode[i].protocol == "65285"
+            ) {
+              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" ||
+              this.allCheckNode[i].protocol == "65282" ||
+              this.allCheckNode[i].protocol == "65280" ||
+              this.allCheckNode[i].protocol == "65296" ||
+              this.allCheckNode[i].protocol == "65281" ||
+              this.allCheckNode[i].protocol == "65284"
+            ) {
+              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")) {
+                // console.log("dayArr最后一天啊");
+                // console.log(dayArr);
+                // console.log(
+                //   this.$moment(new Date(lastETime)).format("YYYY-MM-DD HH:mm")
+                // );
+                // 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,
+            channelid: this.checkedAisle,
+            offset: this.allCheckNode[i].offsetNum,
+            list: timearr,
+          };
+          //console.log(parmsobj);
+          ruleBox.push(parmsobj);
+        }
+        //console.log(ruleBox);
       }
-      console.log(ruleBox);
       setScheduleRulel({
         list: ruleBox,
         scheduleid: this.selid,
@@ -252,14 +510,19 @@ export default {
           }, 3000);
         })
         .catch((err) => {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "添加失败",
-            type: "error",
-          });
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   message: "添加失败",
+          //   type: "error",
+          // });
         });
     },
+    //获取到时间规则，把时间规则转化为对应的规约格式
+    //湖南规约
+    getHnTime() {},
+    //河南规约
+    getZzTime() {},
     //根据requestid查询时间表下发状态
     requestTime() {
       this.sureloading = true;
@@ -274,25 +537,36 @@ export default {
             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;
-            this.showtag = false;
+            this.xfload = false;
           } else if (this.i > 9) {
-            this.zzerror = true;
+            console.log(this.requestArr);
+            this.nosuccessData = this.requestArr;
+
+            // this.allCheckNode.forEach((item, i) => {
+
+            //   this.$refs.tree.setChecked(item.id, false, true);
+            // });
+
+            // this.nosuccessData.forEach((item, i) => {
+            //   this.$refs.tree.setChecked(item.termid, true, true);
+            // });
+
             this.i = 0;
-            this.$message.warning("下发失败，请稍后再试！");
+            // this.$message.warning("下发失败，请稍后再试！");
             clearInterval(this.timer);
             this.timer = null;
-            this.isShow = false;
-            this.showtag = false;
+
+            this.xfload = false;
+
             this.sureloading = false;
           }
         })
@@ -301,10 +575,15 @@ export default {
     display() {
       this.isShow = true;
     },
+    clearfn() {
+      clearTimeout(this.timer);
+      this.timer = null;
+    },
     handleclose() {
       this.isShow = false;
       this.newzzList = [];
-      this.checkedAisle = "";
+      this.checkedAisle = 1;
+      this.mathMam = 0;
       console.log(this.allCheckNode, "1111111111");
       clearTimeout(this.timer);
       this.timer = null;
@@ -329,6 +608,8 @@ export default {
     border: 1px solid #eee;
     padding: 16px;
     border-radius: 4px;
+    position: relative;
+
     .el-tree {
       flex: 1;
       border: 1px solid #eee;
@@ -353,6 +634,11 @@ export default {
         }
       }
     }
+    .noallow {
+      .el-tree-node .el-tree-node__content {
+        pointer-events: none;
+      }
+    }
 
     .dybox {
       h4 {
@@ -427,6 +713,12 @@ export default {
         }
       }
     }
+    .mathFloor {
+      margin-left: 20px;
+      .el-button {
+        margin-left: 12px;
+      }
+    }
 
     .setCheckbox {
       .el-table__header .el-table-column--selection .cell .el-checkbox:after {

src/views/devicePhotoSchedule/components/setdevice_yh.vue

@@ -0,0 +1,508 @@
+<template>
+  <el-dialog
+    class="photoSetDialog"
+    title="设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1020px"
+    @close="handleclose"
+  >
+    <div class="setTimeTd" v-loading="timeboxLoading">
+      <div class="headTitle">
+        <div class="rulesInfo">
+          <h3>时间表规则：</h3>
+          <div class="timeBox" v-for="(val, index) in rulesList" :key="index">
+            <div class="timeSlot">
+              {{
+                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()
+              }}
+              ~
+              {{
+                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()
+              }}
+            </div>
+            <div class="timespan">
+              间隔：<b>{{ val.span }}分钟</b>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="mathFloor">
+        <span class="mathTitle">设置偏移量(max:10)：</span>
+        <el-input-number v-model="mathMam" :min="0" :max="10"></el-input-number>
+        <el-button type="primary" @click="setMathFloor()">设置</el-button>
+      </div>
+      <div class="channelBox">
+        <span class="channelTitle">选择通道：</span>
+        <div class="checkBox" v-if="channelList.length !== 0">
+          <el-radio-group v-model="checkedAisle" @change="handleChange">
+            <el-radio
+              :label="val.id"
+              border
+              v-for="val in channelList"
+              :key="val.id"
+              >{{ val.name }}</el-radio
+            >
+          </el-radio-group>
+        </div>
+      </div>
+      <div class="treebox" v-loading="treeloading">
+        <el-tree
+          ref="tree"
+          :data="treeList"
+          :props="defaultProps"
+          show-checkbox
+          node-key="id"
+          default-expand-all
+          :expand-on-click-node="false"
+          @check="getCheckedNodes"
+        >
+          <div
+            class="custom-tree-node"
+            slot-scope="{ node, data }"
+            v-if="!data.list"
+          >
+            <span class="zzCmdidbox">{{
+              data.name == null ? data.cmdid : data.name
+            }}</span
+            >-- <span>{{ data.id }}</span
+            >-- <span>{{ data.onlinestatus == 0 ? "离线" : "在线" }}</span
+            >--
+            <span>{{ data.protocol }}</span>
+            <div class="math">
+              偏移时间(分)：
+              <el-input-number
+                v-model="data.offsetNum"
+                :min="0"
+                :max="mathMam"
+              ></el-input-number>
+            </div>
+            <div class="xfBack" v-if="allCheckNode.indexOf(data) != -1">
+              <el-tag v-if="data.xfloading"
+                ><i class="el-icon-loading"></i>下发中</el-tag
+              >
+              <el-tag v-if="data.xferror" type="danger"
+                ><i class="el-icon-error"></i>下发失败</el-tag
+              >
+              <el-tag v-if="data.xfsuccess" type="success"
+                ><i class="el-icon-success"></i>下发成功</el-tag
+              >
+              <el-button size="mini" v-if="data.xferror" @click="reissue(data)"
+                >重新下发</el-button
+              >
+            </div>
+          </div>
+          <div v-else class="custom-tree-node" slot-scope="{ data }">
+            <span>{{ data.name == null ? data.cmdid : data.name }}</span>
+          </div>
+        </el-tree>
+      </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()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  setScheduleRulel,
+  getScheduleRulelAccessList,
+  getTermListByChannelJoggle,
+  //setTermCamera,
+  //getTermCameraRequest,
+  getCmaSchelduleUpload,
+} from "@/utils/api/index";
+// import moment from "moment";
+export default {
+  data() {
+    return {
+      isShow: false,
+      timeboxLoading: false,
+      rulesTimeList: "", //当前时间表数据
+      rulesList: [],
+      rulesid: "", //规则id
+      mathMam: 0, //偏移量默认为0
+      checkedAisle: 1, //选中通道数据
+      channelList: [], //通道数据内容
+      treeloading: false,
+      treeList: [], //树结构
+      defaultProps: {
+        children: "list",
+        label: "name",
+        disabled: this.disabledFn,
+      },
+      allCheckNode: [], //获取选中的节点
+      groupNum: "", //时间表组数
+      xfloading: false,
+      xferror: false,
+      xfsuccess: false,
+      requestList: [], //requesids数组
+      timer: null,
+      imun: 0,
+
+      successTermid: [], //成功的
+      errorTermid: [], //失败的
+    };
+  },
+  mounted() {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.rulesTimeList = val;
+      this.rulesid = val.id;
+      this.rulesList = val.listTime;
+      this.timeboxLoading = true;
+      this.getChannelList();
+    },
+    //设置偏移量
+    setMathFloor() {
+      console.log(this.mathMam);
+      this.handleChange();
+    },
+    //不在线的装置不能选中
+    disabledFn(data, node) {
+      if (node.level == 3) {
+        if (!data.onlinestatus) {
+          // 根据自己的节点数据条件设置判断，我只提供了个参考
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
+    // //获取所选值
+    getCheckedNodes(nodeObj) {
+      console.log(nodeObj);
+      this.allCheckNode = this.$refs.tree.getCheckedNodes();
+      console.log(this.allCheckNode);
+      // console.log(nodeObj);
+      // console.log(this.allCheckNode);
+      // this.isactive = nodeObj.id || nodeObj.termid;
+      // this.isCheck = this.$refs.tree.getCheckedNodes().indexOf(nodeObj) > -1;
+      // console.log(this.isCheck);
+      // this.showtag = false;
+    },
+    // 给数组里的每一个对象都添加一个offsetNum偏移属性
+    getChildren(data) {
+      //console.log(data);
+      return data.map((item) => {
+        //console.log(item);
+        item = Object.assign({}, item);
+        item.offsetNum = Math.floor(Math.random() * 10);
+        item.xfsuccess = false;
+        item.xferror = false;
+        item.xfloading = false;
+        if (!!item.list && item.list.length > 0) {
+          item.list = this.getChildren(item.list);
+        }
+        return item;
+      });
+    },
+    // 保存确定操作
+    submitForm() {
+      console.log(this.allCheckNode);
+      this.xfloading = true;
+      var ruleBox = []; //定义时间表规则大数组参数
+      //首先循环时间规则
+      for (let i = 0; i < this.allCheckNode.length; i++) {
+        if (
+          this.allCheckNode[i].bsManufacturer == null ||
+          this.allCheckNode[i].bsManufacturer == undefined
+        ) {
+          this.allCheckNode[i].xfloading = true;
+          let timearr = [];
+          let dayArr = [];
+          for (let j = 0; j < this.rulesList.length; j++) {
+            var Stime = this.$moment(this.rulesList[j].startTime).add(
+              this.allCheckNode[i].offsetNum,
+              "minute"
+            );
+
+            var Etime = this.$moment(this.rulesList[j].endTime).add(
+              this.allCheckNode[i].offsetNum,
+              "minute"
+            );
+
+            var spanTime = this.rulesList[j].span;
+            console.log(Stime, Etime, spanTime);
+            //湖南规约
+            if (this.allCheckNode[i].protocol == "65283") {
+              timearr.push(
+                {
+                  hour: Math.floor(spanTime / 60),
+                  minute: spanTime % 60,
+                  preset: 255,
+                },
+                {
+                  hour: Stime.hour(),
+                  minute: Etime.minute(),
+                  preset: 255,
+                },
+                {
+                  hour: Stime.hour(),
+                  minute: Etime.minute(),
+                  preset: 255,
+                }
+              );
+              console.log(timearr);
+            } else {
+              //其他规约
+              let startDay = Stime;
+              let endDay = Etime;
+              let startVal = this.$moment(new Date(startDay)).format(
+                "YYYY-MM-DD HH:mm"
+              );
+              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(dayArr);
+          for (var k = 0; k < dayArr.length; k++) {
+            //console.log(moment(dayArr[k]).hour());
+            timearr.push({
+              hour: this.$moment(dayArr[k]).hour(),
+              minute: this.$moment(dayArr[k]).minute(),
+              preset: 255,
+            });
+          }
+          console.log(timearr);
+          var parmsobj = {
+            termid: this.allCheckNode[i].id,
+            channelid: this.checkedAisle,
+            offset: this.allCheckNode[i].offsetNum,
+            list: timearr,
+          };
+          ruleBox.push(parmsobj);
+        }
+      }
+      //设置下发时间表规则
+      setScheduleRulel({
+        list: ruleBox,
+        scheduleid: this.rulesid,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestList = res.data.list;
+          // this.requestTime();
+          this.timer = window.setInterval(() => {
+            //console.log(this.requestList);
+            this.requestTime();
+            this.imun++;
+          }, 3000);
+        })
+        .catch((err) => {});
+    },
+    //根据requestid查询时间表下发状态
+    requestTime() {
+      this.sureloading = true;
+      getCmaSchelduleUpload({
+        list: this.requestList,
+      })
+        .then((res) => {
+          this.requestArr = res.data.list;
+          console.log(this.requestList);
+          this.requestList = this.requestArr.filter(function (
+            value,
+            index,
+            arr
+          ) {
+            console.log(value, index, arr);
+            return value.status !== 1;
+          });
+          if (this.requestList.length == 0) {
+            console.log(this.successTermid);
+            console.log(this.errorTermid);
+            this.$message.success("下发成功");
+            clearInterval(this.timer);
+            this.timer = null;
+          } else if (this.imun > 9) {
+            console.log(this.requestList);
+            for (let m = 0; m < this.requestList.length; m++) {
+              console.log(this.requestList[m]);
+              this.errorTermid.push(this.requestList[m].termid);
+            }
+            console.log(this.errorTermid);
+
+            clearInterval(this.timer);
+            this.timer = null;
+            this.imun = 0;
+            // this.$message.warning("下发失败，请稍后再试！");
+          }
+        })
+        .catch((err) => {});
+    },
+
+    //重新下发
+    reissue(val) {
+      console.log(val);
+      val.xfloading = true;
+      val.xferror = false;
+      setTimeout(() => {
+        val.xfloading = false;
+        val.xfsuccess = true;
+        val.xferror = false;
+      }, 2000);
+    },
+    //获取通道
+    getChannelList() {
+      getScheduleRulelAccessList({})
+        .then((res) => {
+          console.log(res);
+          this.channelList = res.data.channellist;
+
+          this.handleChange();
+        })
+        .catch((err) => {});
+    },
+    //改变通道获取树状结构
+    handleChange() {
+      console.log(this.checkedAisle);
+      this.treeloading = true;
+      getTermListByChannelJoggle({
+        id: this.checkedAisle,
+      })
+        .then((res) => {
+          console.log(res);
+          this.timeboxLoading = false;
+          //this.treeList = res.data.list;
+          this.treeList = this.getChildren(res.data.list);
+          this.treeloading = false;
+        })
+        .catch((err) => {});
+    },
+    display() {
+      this.isShow = true;
+    },
+    clearfn() {},
+    handleclose() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.photoSetDialog {
+  .setTimeTd {
+    //background-color: #fcc;
+    .headTitle {
+      .rulesInfo {
+        display: flex;
+        align-items: center;
+        line-height: 32px;
+        h3 {
+          font-size: 14px;
+          font-weight: normal;
+        }
+        .timeBox {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          margin-right: 8px;
+          .timeSlot {
+            font-size: 14px;
+            margin-right: 8px;
+          }
+          .timespan {
+            b {
+              font-size: 14px;
+              font-weight: normal;
+              color: #169e8c;
+            }
+          }
+        }
+      }
+    }
+    .mathFloor {
+      margin-top: 8px;
+      .mathTitle {
+        font-size: 14px;
+        font-weight: normal;
+      }
+      .el-button {
+        margin-left: 8px;
+      }
+    }
+    .channelBox {
+      display: flex;
+      align-items: center;
+      line-height: 32px;
+      margin-top: 8px;
+      .channelTitle {
+        font-size: 14px;
+      }
+      .el-radio {
+        margin-right: 8px;
+      }
+    }
+    .treebox {
+      margin-top: 8px;
+      background-color: #169e8c;
+      height: 366px;
+      // overflow: auto;
+      display: flex;
+      align-items: flex-start;
+      border: 1px solid #eee;
+      padding: 8px;
+      border-radius: 4px;
+      position: relative;
+      .el-tree {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+
+        .el-tree-node {
+          .el-tree-node__content {
+            height: 32px;
+            border-bottom: 1px solid #eee;
+          }
+        }
+        .custom-tree-node {
+          display: flex;
+          align-items: center;
+          .zzCmdidbox {
+            width: 180px;
+          }
+          .math {
+            margin-left: 32px;
+          }
+          .xfBack {
+            margin-left: 32px;
+          }
+          .el-input-number--small {
+            line-height: 26px;
+          }
+          .el-input--small .el-input__inner {
+            height: 26px;
+            line-height: 26px;
+          }
+          .el-input-number__increase {
+            height: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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%"
@@ -24,42 +24,47 @@
         >
           <!-- <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"
+                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>{{
-                  val.endTime.substring(0, val.endTime.lastIndexOf(":"))
-                }}</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>
-              <!-- <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>
 
@@ -124,6 +129,8 @@ export default {
     return {
       title: "", //弹窗标题
       deviceTableData: [],
+      newList: [],
+      listTime: [],
       //multipleSelection: [], //获取当前选中
       page: 1, // 当前页数
       pageSize: 20, // 每页数量
@@ -143,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) => {});
     },
@@ -224,15 +316,15 @@ export default {
 </script>
 <style lang="less">
 .deviceInformation {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: @color-white;
 
   .deviceBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
   }
   .deviceBtnGroup {

src/views/deviceUpgrade/index.vue

@@ -109,14 +109,14 @@ export default {
 </script>
 <style lang="less">
 .deviceUpgrade {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: #ffffff;
   .upgradeBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
     .upBtnGroup {
       display: flex;

src/views/itOperation/index copy 2.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="itoperation">
+    <div class="deviceBox">
+      <div class="photoGraphicBtnGroup">
+        <h4>运维管理</h4>
+
+        <div class="itForm">
+          <div class="ip">
+            <p class="label">I1服务器IP及端口：</p>
+
+            <el-input v-model="ipPort" placeholder=""></el-input>
+          </div>
+          <div class="ip">
+            <p class="label">APP升级URL：</p>
+            <el-input v-model="appUrl" placeholder=""></el-input>
+          </div>
+          <div class="ip">
+            <p class="label">日志上传URL：</p>
+            <el-input v-model="logUrl" placeholder=""></el-input>
+          </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
+          >
+          <el-button
+            type="primary"
+            icon="el-icon-setting"
+            @click="showColumnOption()"
+            >设置列</el-button
+          >
+        </div>
+      </div>
+      <div class="searchBox">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <el-form-item label="电压等级" class="dybox">
+            <el-select v-model="formdata.dyId" @change="getSearchxl">
+              <el-option
+                v-for="item in dyOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="线路名称" class="xlbox">
+            <el-select
+              v-model="formdata.lineId"
+              @change="getSearchgt"
+              filterable
+            >
+              <el-option
+                v-for="item in xlOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="杆塔名称">
+            <el-select v-model="formdata.towerId" filterable>
+              <el-option
+                v-for="item in gtOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否在线" class="isonLineClass">
+            <el-select v-model="formdata.isonline" filterable>
+              <el-option
+                v-for="item in onlineOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/设备编号"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button type="primary" @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          v-loading="loading"
+          :row-class-name="tableRowClassName"
+          highlight-current-row
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column type="index" width="50" label="序号">
+          </el-table-column>
+          <el-table-column label="在线状态" v-if="showColumn.onlineStatus">
+            <template slot-scope="scope">{{
+              scope.row.onlineStatus == 1 ? "在线" : "离线"
+            }}</template>
+          </el-table-column>
+          <el-table-column label="出厂ID" v-if="showColumn.factoryID">
+            <template slot-scope="scope">{{ scope.row.factoryID }}</template>
+          </el-table-column>
+          <el-table-column label="CMD_ID" v-if="showColumn.cmdID">
+            <template slot-scope="scope">{{ scope.row.cmdID }}</template>
+          </el-table-column>
+          <el-table-column label="快心跳">
+            <template slot="header" slot-scope="scope">
+              <el-checkbox v-model="isCheckedAll" @change="handleCheckAllChange"
+                >快心跳</el-checkbox
+              >
+            </template>
+            <template slot-scope="scope">
+              <el-checkbox
+                v-model="scope.row.isheartCheck"
+                @change="handleheartChange(scope.row)"
+              ></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="线路杆塔信息" v-if="showColumn.lineInfo">
+            <template slot-scope="scope">{{ scope.row.lineInfo }}</template>
+          </el-table-column>
+          <el-table-column label="当天拍照数量" v-if="showColumn.dayPicNum">
+            <template slot-scope="scope">{{ scope.row.dayPicNum }}</template>
+          </el-table-column>
+          <el-table-column
+            label="当天图片上传数量"
+            v-if="showColumn.dayUpPicNum"
+          >
+            <template slot-scope="scope">{{ scope.row.dayUpPicNum }}</template>
+          </el-table-column>
+          <el-table-column
+            label="最后一次收到I1服务器数据时间"
+            v-if="showColumn.lastI1Time"
+          >
+            <template slot-scope="scope">{{ scope.row.lastI1Time }}</template>
+          </el-table-column>
+          <el-table-column label="规约信息" v-if="showColumn.protocolInfo">
+            <template slot-scope="scope">{{ scope.row.protocolInfo }}</template>
+          </el-table-column>
+          <el-table-column label="运维版本" v-if="showColumn.operationVersion">
+            <template slot-scope="scope">{{
+              scope.row.operationVersion
+            }}</template>
+          </el-table-column>
+          <el-table-column label="I1版本" v-if="showColumn.I1Version">
+            <template slot-scope="scope">{{ scope.row.I1Version }}</template>
+          </el-table-column>
+          <el-table-column label="camer版本" v-if="showColumn.camerVersion">
+            <template slot-scope="scope">{{ scope.row.camerVersion }}</template>
+          </el-table-column>
+          <el-table-column label="AI版本" v-if="showColumn.AIVersion">
+            <template slot-scope="scope">{{ scope.row.AIVersion }}</template>
+          </el-table-column>
+          <el-table-column label="I1服务器及端口" v-if="showColumn.I1port">
+            <template slot-scope="scope">{{ scope.row.I1port }}</template>
+          </el-table-column>
+          <el-table-column
+            label="安卓每天重启次数"
+            v-if="showColumn.restartNum"
+          >
+            <template slot-scope="scope">{{ scope.row.restartNum }}</template>
+          </el-table-column>
+          <el-table-column label="充电电压" v-if="showColumn.chargingVoltage">
+            <template slot-scope="scope">{{
+              scope.row.chargingVoltage
+            }}</template>
+          </el-table-column>
+          <el-table-column label="电池电压" v-if="showColumn.batteryVoltage">
+            <template slot-scope="scope">{{
+              scope.row.batteryVoltage
+            }}</template>
+          </el-table-column>
+          <el-table-column label="电量" v-if="showColumn.power">
+            <template slot-scope="scope">{{ scope.row.power }}</template>
+          </el-table-column>
+          <el-table-column
+            label="I1每天重启次数"
+            v-if="showColumn.I1dayStartNum"
+          >
+            <template slot-scope="scope">{{
+              scope.row.I1dayStartNum
+            }}</template>
+          </el-table-column>
+          <el-table-column label="I1网络错误次数" v-if="showColumn.I1ErrorNum">
+            <template slot-scope="scope">{{ scope.row.I1ErrorNum }}</template>
+          </el-table-column>
+          <el-table-column
+            label="卡1信号强度"
+            v-if="showColumn.card1signalStrength"
+          >
+            <template slot-scope="scope">{{
+              scope.row.card1signalStrength
+            }}</template>
+          </el-table-column>
+          <el-table-column
+            label="卡2信号强度"
+            v-if="showColumn.card2signalStrength"
+          >
+            <template slot-scope="scope">{{
+              scope.row.card2signalStrength
+            }}</template>
+          </el-table-column>
+          <el-table-column label="卡1_ICCID" v-if="showColumn.card1caaid">
+            <template slot-scope="scope">{{ scope.row.card1caaid }}</template>
+          </el-table-column>
+          <el-table-column label="卡2_ICCID" v-if="showColumn.card2caaid">
+            <template slot-scope="scope">{{ scope.row.card2caaid }}</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>
+    <el-drawer
+      title="选择表格显示的字段"
+      :visible.sync="isShowColumn"
+      direction="rtl"
+      size="20%"
+    >
+      <div class="body">
+        <el-checkbox v-model="checkList.onlineStatus">在线状态</el-checkbox>
+        <el-checkbox v-model="checkList.factoryID">出厂ID</el-checkbox>
+        <el-checkbox v-model="checkList.cmdID">CMD_ID</el-checkbox>
+        <el-checkbox v-model="checkList.lineInfo">线路杆塔信息</el-checkbox>
+
+        <el-checkbox v-model="checkList.dayPicNum">当天拍照数量</el-checkbox>
+        <el-checkbox v-model="checkList.dayUpPicNum"
+          >当天图片上传数量</el-checkbox
+        >
+        <el-checkbox v-model="checkList.lastI1Time"
+          >最后一次收到I1服务器数据时间</el-checkbox
+        >
+        <el-checkbox v-model="checkList.protocolInfo">规约信息</el-checkbox>
+        <el-checkbox v-model="checkList.operationVersion">运维版本</el-checkbox>
+        <el-checkbox v-model="checkList.I1Version">I1版本</el-checkbox>
+        <el-checkbox v-model="checkList.camerVersion">camer版本</el-checkbox>
+        <el-checkbox v-model="checkList.AIVersion">AI版本</el-checkbox>
+        <el-checkbox v-model="checkList.I1port">I1服务器及端口</el-checkbox>
+        <el-checkbox v-model="checkList.restartNum"
+          >安卓每天重启次数</el-checkbox
+        >
+        <el-checkbox v-model="checkList.chargingVoltage">充电电压</el-checkbox>
+        <el-checkbox v-model="checkList.batteryVoltage">电池电压</el-checkbox>
+        <el-checkbox v-model="checkList.power">电量</el-checkbox>
+        <el-checkbox v-model="checkList.I1dayStartNum"
+          >I1每天重启次数</el-checkbox
+        >
+        <el-checkbox v-model="checkList.I1ErrorNum">I1网络错误次数</el-checkbox>
+        <el-checkbox v-model="checkList.card1SignalStrength"
+          >卡1信号强度</el-checkbox
+        >
+        <el-checkbox v-model="checkList.card2SignalStrength"
+          >卡2信号强度</el-checkbox
+        >
+        <el-checkbox v-model="checkList.card1caaid">卡1_ICCID</el-checkbox>
+        <el-checkbox v-model="checkList.card2caaid">卡2_ICCID</el-checkbox>
+      </div>
+      <div class="footer">
+        <el-button size="small" type="primary" plain @click="saveColumn"
+          >保存列配置</el-button
+        >
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<script>
+import { getSearchInfo } from "@/utils/api/index";
+export default {
+  components: {},
+  data() {
+    return {
+      isShowColumn: false,
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      onlineOptions: [
+        { id: -1, name: "全部" },
+        { id: 1, name: "在线" },
+        { id: 0, name: "离线" },
+      ],
+      formdata: {
+        dyId: -1,
+        lineId: -1,
+        towerId: -1,
+        search: "",
+        isonline: -1,
+      },
+      ipPort: "",
+      appUrl: "",
+      logUrl: "",
+      tableData: [
+        {
+          onlineStatus: 0,
+          factoryID: "CSY2023082400001",
+          cmdID: "CSYJ2023082400001",
+          lineInfo: "1",
+          dayPicNum: "2",
+          dayUpPicNum: "3",
+          lastI1Time: "4",
+          protocolInfo: "5",
+          operationVersion: "6",
+          I1Version: "7",
+          camerVersion: "8",
+          AIVersion: "9",
+          I1port: "1",
+          restartNum: "2",
+          chargingVoltage: "3",
+          batteryVoltage: "4",
+          power: "5",
+          I1dayStartNum: "6",
+          I1ErrorNum: "7",
+          card1SignalStrength: "8",
+          card2SignalStrength: "9",
+          card1caaid: "1",
+          card2caaid: "2",
+        },
+        {
+          onlineStatus: 1,
+          factoryID: "CSY2023082400001",
+          cmdID: "CSYJ2023082400001",
+          lineInfo: "1",
+          dayPicNum: "2",
+          dayUpPicNum: "3",
+          lastI1Time: "4",
+          protocolInfo: "5",
+          operationVersion: "6",
+          I1Version: "7",
+          camerVersion: "8",
+          AIVersion: "9",
+          I1port: "1",
+          restartNum: "2",
+          chargingVoltage: "3",
+          batteryVoltage: "4",
+          power: "5",
+          I1dayStartNum: "6",
+          I1ErrorNum: "7",
+          card1SignalStrength: "8",
+          card2SignalStrength: "9",
+          card1caaid: "1",
+          card2caaid: "2",
+        },
+      ],
+      checkList: {},
+      showColumn: {
+        onlineStatus: true,
+        factoryID: true,
+        cmdID: true,
+        lineInfo: true,
+        dayPicNum: true,
+        dayUpPicNum: true,
+        lastI1Time: true,
+        protocolInfo: true,
+        operationVersion: true,
+        I1Version: true,
+        camerVersion: true,
+        AIVersion: true,
+        I1port: true,
+        restartNum: true,
+        chargingVoltage: true,
+        batteryVoltage: true,
+        power: true,
+        I1dayStartNum: true,
+        I1ErrorNum: true,
+        card1SignalStrength: true,
+        card2SignalStrength: true,
+        card1caaid: true,
+        card2caaid: true,
+      }, //设置显示隐藏列
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      loading: false,
+      //全选
+      isCheckedAll: false,
+    };
+  },
+  watch: {
+    // 监听复选框配置列所有的变化
+    checkList: {
+      handler: function (newnew, oldold) {
+        // console.log(newnew);
+        this.showColumn = newnew;
+        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
+        this.$nextTick(() => {
+          this.$refs.multipleTable.doLayout();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {},
+  mounted() {
+    this.getSearchdy();
+    // 发请求得到checkListInitData的列的名字
+    if (localStorage.getItem("columnSet")) {
+      this.checkList = JSON.parse(localStorage.getItem("columnSet"));
+    } else {
+      this.checkList = {
+        onlineStatus: true,
+        factoryID: true,
+        cmdID: true,
+        lineInfo: true,
+        dayPicNum: true,
+        dayUpPicNum: true,
+        lastI1Time: true,
+        protocolInfo: true,
+        operationVersion: true,
+        I1Version: true,
+        camerVersion: true,
+        AIVersion: true,
+        I1port: true,
+        restartNum: true,
+        chargingVoltage: true,
+        batteryVoltage: true,
+        power: true,
+        I1dayStartNum: true,
+        I1ErrorNum: true,
+        card1SignalStrength: true,
+        card2SignalStrength: true,
+        card1caaid: true,
+        card2caaid: true,
+      };
+    }
+    //添加check
+    this.getAdd(this.tableData);
+  },
+  methods: {
+    //获取电压信息
+    getSearchdy() {
+      getSearchInfo({ type: 1 })
+        .then((res) => {
+          this.dyOptions = [{ id: -1, name: "全部" }];
+          this.dyOptions = this.dyOptions.concat(res.data.list);
+          this.formdata.dyId = this.dyOptions[0].id;
+          this.getSearchxl();
+        })
+        .catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl() {
+      getSearchInfo({ type: 2, id: this.formdata.dyId })
+        .then((res) => {
+          this.xlOptions = [{ id: -1, name: "全部" }];
+          this.xlOptions = this.xlOptions.concat(res.data.list);
+          this.formdata.lineId = this.xlOptions[0].id;
+          this.getSearchgt();
+        })
+        .catch((err) => {});
+    },
+    //获取杆塔数据
+    getSearchgt() {
+      getSearchInfo({ type: 3, id: this.formdata.lineId })
+        .then((res) => {
+          this.gtOptions = [{ id: -1, name: "全部" }];
+          this.gtOptions = this.gtOptions.concat(res.data.list);
+          this.formdata.towerId = this.gtOptions[0].id;
+        })
+        .catch((err) => {});
+    },
+    //查询
+    onSubmit() {
+      this.page = 1;
+      //this.terminalList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {
+        isonline: -1,
+      };
+      this.getSearchdy();
+      this.page = 1;
+      this.pageSize = 20;
+      //this.terminalList();
+    },
+    //给每条数据添加checkbox
+    getAdd(arr) {
+      console.log(arr);
+      var that = this;
+      arr.forEach(function (item, index, array) {
+        that.$set(arr[index], "isheartCheck", false);
+      });
+      console.log(arr);
+      return arr;
+    },
+    //快心跳全选
+    handleCheckAllChange(val) {
+      console.log(val);
+      if (val) {
+        console.log("我全选了");
+        let mutCheck = [];
+        this.tableData.forEach((item) => {
+          item.isheartCheck = true;
+          mutCheck.push(item.cmdID);
+        });
+        console.log(mutCheck);
+        this.$message({
+          message: "全选了快心跳" + mutCheck,
+          type: "success",
+        });
+      } else {
+        console.log("我全部取消");
+        this.tableData.forEach((item) => {
+          item.isheartCheck = false;
+        });
+      }
+      // this.checkedCities = val ? cityOptions : [];
+      // this.isIndeterminate = false;
+    },
+    //快心跳单选
+    handleheartChange(val) {
+      console.log(val);
+    },
+
+    //设置列的显示隐藏
+    showColumnOption() {
+      this.isShowColumn = true;
+    },
+    saveColumn() {
+      localStorage.setItem("columnSet", JSON.stringify(this.checkList));
+      this.isShowColumn = false;
+    },
+    //选中
+    tableRowClassName({ row, rowIndex }) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.itoperation {
+  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;
+    .photoGraphicBtnGroup {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .itForm {
+        display: flex;
+        .ip {
+          display: flex;
+          margin-right: 12px;
+          align-items: center;
+          .label {
+            font-size: 14px;
+            color: #606266;
+            width: auto;
+          }
+          .el-input {
+            width: 166px;
+          }
+        }
+      }
+    }
+    .searchBox {
+      margin-top: 8px;
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+        .isonLineClass {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+      }
+    }
+  }
+  .deviceTable {
+    margin-top: 8px;
+    height: calc(100% - 40px);
+    position: releative;
+    .batchBox {
+      height: 40px;
+      position: absolute;
+      line-height: 40px;
+      background: #fafafa;
+      width: calc(100% - 116px);
+      left: 78px;
+      z-index: 4;
+      top: 55px;
+    }
+    .el-input--small {
+      font-size: 12px;
+      .el-input__inner {
+        padding: 0px 8px;
+      }
+    }
+  }
+  .el-drawer__wrapper {
+    .el-drawer__body {
+      padding: 0px 20px;
+      .body {
+        display: flex;
+        flex-direction: column;
+        .el-checkbox {
+          width: 100%;
+          height: 28px;
+          line-height: 28px;
+          display: inline-block;
+          font-family: PingFang SC;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 14px;
+          color: #000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          box-sizing: border-box;
+        }
+        .el-checkbox:hover {
+          background-color: #f5f7fa;
+        }
+      }
+      .footer {
+        width: 100%;
+        height: 44px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

src/views/itOperation/index copy.vue

@@ -0,0 +1,718 @@
+<template>
+  <div class="itoperation">
+    <div class="deviceBox">
+      <div class="photoGraphicBtnGroup">
+        <h4>运维管理</h4>
+
+        <div class="itForm">
+          <div class="ip">
+            <p class="label">I1服务器IP及端口：</p>
+
+            <el-input v-model="ipPort" placeholder=""></el-input>
+          </div>
+          <div class="ip">
+            <p class="label">APP升级URL：</p>
+            <el-input v-model="appUrl" placeholder=""></el-input>
+          </div>
+          <div class="ip">
+            <p class="label">日志上传URL：</p>
+            <el-input v-model="logUrl" placeholder=""></el-input>
+          </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
+          >
+          <el-button
+            type="primary"
+            icon="el-icon-setting"
+            @click="showColumnOption()"
+            >设置列</el-button
+          >
+        </div>
+      </div>
+      <div class="searchBox">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <el-form-item label="电压等级" class="dybox">
+            <el-select v-model="formdata.dyId" @change="getSearchxl">
+              <el-option
+                v-for="item in dyOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="线路名称" class="xlbox">
+            <el-select
+              v-model="formdata.lineId"
+              @change="getSearchgt"
+              filterable
+            >
+              <el-option
+                v-for="item in xlOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="杆塔名称">
+            <el-select v-model="formdata.towerId" filterable>
+              <el-option
+                v-for="item in gtOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="是否在线" class="isonLineClass">
+            <el-select v-model="formdata.isonline" filterable>
+              <el-option
+                v-for="item in onlineOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/设备编号"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button type="primary" @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          v-loading="loading"
+          :row-class-name="tableRowClassName"
+          highlight-current-row
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <!-- <el-table-column
+            fixed
+            prop="date"
+            label="日期"
+            width="150"
+            v-if="showColumn.date"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="姓名"
+            width="120"
+            v-if="showColumn.name"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="province"
+            label="省份"
+            width="120"
+            v-if="showColumn.provinces"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="city"
+            label="市区"
+            width="120"
+            v-if="showColumn.city"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="地址"
+            width="300"
+            v-if="showColumn.adreess"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="zip"
+            label="邮编"
+            width="120"
+            v-if="showColumn.zipCode"
+          >
+          </el-table-column> -->
+
+          <el-table-column type="index" width="50" label="序号">
+          </el-table-column>
+          <el-table-column label="在线状态" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="出厂ID" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="CMD_ID" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="线路杆塔信息" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column prop="selection" label="快心跳">
+            <template slot="header" slot-scope="scope">
+              <div>
+                <el-checkbox
+                  v-model="selection"
+                  :indeterminate="isIndeterminate"
+                  @click.prevent.stop.native="
+                    handleSelectedFn('selection', 'isIndeterminate', scope)
+                  "
+                  >快心跳
+                </el-checkbox>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>
+                <el-checkbox
+                  v-model="scope.row.selection"
+                  @click.prevent.stop.native="
+                    handleListSelectedFn('selection', 'isIndeterminate', scope)
+                  "
+                >
+                </el-checkbox>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="pass" label="是否运维">
+            <template slot="header" slot-scope="scope">
+              <div>
+                <el-checkbox
+                  v-model="pass"
+                  :indeterminate="isIndeterminate1"
+                  @click.prevent.stop.native="
+                    handleSelectedFn('pass', 'isIndeterminate1', scope)
+                  "
+                  >是否运维
+                </el-checkbox>
+              </div>
+            </template>
+            <template slot-scope="scope">
+              <div>
+                <el-checkbox
+                  v-model="scope.row.pass"
+                  @click.prevent.stop.native="
+                    handleListSelectedFn('pass', 'isIndeterminate1', scope)
+                  "
+                >
+                </el-checkbox>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="日志上传">
+            <template slot-scope="scope">
+              <el-checkbox
+                v-model="tableData[scope.$index].isLog"
+              ></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="升级URL">
+            <template slot-scope="scope">
+              <el-checkbox
+                v-model="tableData[scope.$index].isUpurl"
+              ></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="重启">
+            <template slot-scope="scope">
+              <el-checkbox
+                v-model="tableData[scope.$index].isReset"
+              ></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="I1服务器IP及端口">
+            <template slot-scope="scope">
+              <el-checkbox
+                v-model="tableData[scope.$index].isIport"
+              ></el-checkbox>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="时间" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+
+          <el-table-column label="当天拍照数量" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="当天图片上传数量" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="最后一次收到I1服务器数据时间" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="规约信息" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="运维版本" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="I1版本" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="camer版本" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="AI版本" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="I1服务器及端口" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="安卓每天重启次数" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+
+          <el-table-column label="充电电压" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="电池电压" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="电量" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="I1每天重启次数" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="I1网络错误次数" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="卡1信号强度" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="卡2信号强度" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="卡1_ICCID" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <el-table-column label="卡2_ICCID" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</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>
+      <el-drawer
+        title="选择表格显示的字段"
+        :visible.sync="isShowColumn"
+        direction="rtl"
+        size="20%"
+      >
+        <div class="body">
+          <el-checkbox v-model="checkList.date" disabled>在线状态</el-checkbox>
+          <el-checkbox v-model="checkList.name" disabled>出厂ID</el-checkbox>
+          <el-checkbox v-model="checkList.provinces" disabled
+            >CMD_ID</el-checkbox
+          >
+          <el-checkbox v-model="checkList.city">线路杆塔信息</el-checkbox>
+          <el-checkbox v-model="checkList.adreess">时间</el-checkbox>
+          <el-checkbox v-model="checkList.zipCode">当天拍照数量</el-checkbox>
+          <el-checkbox v-model="checkList.date">当天图片上传数量</el-checkbox>
+          <el-checkbox v-model="checkList.name"
+            >最后一次收到I1服务器数据时间</el-checkbox
+          >
+          <el-checkbox v-model="checkList.provinces">规约信息</el-checkbox>
+          <el-checkbox v-model="checkList.city">运维版本</el-checkbox>
+          <el-checkbox v-model="checkList.adreess">I1版本</el-checkbox>
+          <el-checkbox v-model="checkList.zipCode">camer版本</el-checkbox>
+          <el-checkbox v-model="checkList.date">AI版本</el-checkbox>
+          <el-checkbox v-model="checkList.name">I1服务器及端口</el-checkbox>
+          <el-checkbox v-model="checkList.provinces"
+            >安卓每天重启次数</el-checkbox
+          >
+          <el-checkbox v-model="checkList.city">充电电压</el-checkbox>
+          <el-checkbox v-model="checkList.adreess">电池电压</el-checkbox>
+          <el-checkbox v-model="checkList.zipCode">电量</el-checkbox>
+          <el-checkbox v-model="checkList.date">I1每天重启次数</el-checkbox>
+          <el-checkbox v-model="checkList.name">I1网络错误次数</el-checkbox>
+          <el-checkbox v-model="checkList.provinces">卡1信号强度</el-checkbox>
+          <el-checkbox v-model="checkList.city">卡2信号强度</el-checkbox>
+          <el-checkbox v-model="checkList.adreess">卡1_ICCID</el-checkbox>
+          <el-checkbox v-model="checkList.zipCode">卡2_ICCID</el-checkbox>
+        </div>
+        <div class="footer">
+          <el-button size="small" type="primary" plain @click="saveColumn"
+            >保存列配置</el-button
+          >
+        </div>
+      </el-drawer>
+    </div>
+  </div>
+</template>
+<script>
+import { getSearchInfo } from "@/utils/api/index";
+export default {
+  components: {},
+  data() {
+    return {
+      isShowColumn: false,
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      onlineOptions: [
+        { id: -1, name: "全部" },
+        { id: 1, name: "在线" },
+        { id: 0, name: "离线" },
+      ],
+      formdata: {
+        dyId: -1,
+        lineId: -1,
+        towerId: -1,
+        search: "",
+        isonline: -1,
+      },
+      ipPort: "",
+      appUrl: "",
+      logUrl: "",
+      tableData: [
+        {
+          cmdid: "11M00000000000009",
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+          selection: false,
+          pass: false,
+        },
+        {
+          cmdid: "11M00000000000009",
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+          selection: false,
+          pass: false,
+        },
+      ],
+      pass: false,
+      selection: false,
+      isIndeterminate: false,
+      isIndeterminate1: false,
+
+      checkList: {},
+      showColumn: {
+        date: true,
+        name: true,
+        provinces: true,
+        city: true,
+        adreess: true,
+        zipCode: true,
+      }, //设置显示隐藏列
+
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      loading: false,
+    };
+  },
+  watch: {
+    // 监听复选框配置列所有的变化
+    checkList: {
+      handler: function (newnew, oldold) {
+        // console.log(newnew);
+        this.showColumn = newnew;
+        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
+        this.$nextTick(() => {
+          this.$refs.multipleTable.doLayout();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {},
+  mounted() {
+    this.getSearchdy();
+    // 发请求得到checkListInitData的列的名字
+    if (localStorage.getItem("columnSet")) {
+      this.checkList = JSON.parse(localStorage.getItem("columnSet"));
+    } else {
+      this.checkList = {
+        date: true,
+        name: true,
+        provinces: true,
+        city: true,
+        adreess: true,
+        zipCode: true,
+      };
+    }
+  },
+  methods: {
+    handleSelectedFn(selectionvalue, isIndeterminatevalue, scope) {
+      // 点击table头部全选框
+      // 头部全选框状态改变
+      this[selectionvalue] = !this[selectionvalue];
+      // 列表选择框状态改变
+      for (let i = 0; i < this.tableData.length; i++) {
+        this.tableData[i][selectionvalue] = this[selectionvalue];
+        this[isIndeterminatevalue] = false;
+      }
+      console.log(scope);
+    },
+    handleListSelectedFn(selectionvalue, isIndeterminatevalue, scope) {
+      console.log(selectionvalue, isIndeterminatevalue, scope.row);
+      // 点击table列表内的选择框
+      // table列表内选择框状态改变
+      this.tableData[scope.$index][selectionvalue] =
+        !this.tableData[scope.$index][selectionvalue];
+      // 判断是否在全选状态下
+      let statusSelectio = this.allSelectionFn(selectionvalue);
+      if (statusSelectio) {
+        // 列表全部被选中,头部变更为选中状态
+        this[selectionvalue] = true;
+        this[isIndeterminatevalue] = false;
+        return false;
+      }
+      // 列表有选中且非全选，头部全选框待定状态
+      for (let i = 0; i < this.tableData.length; i++) {
+        if (this.tableData[i][selectionvalue] === true) {
+          this[isIndeterminatevalue] = true;
+          return false;
+        }
+      }
+      // 列表有没有选中，头部全选框未选状态
+      this[isIndeterminatevalue] = false;
+      this[selectionvalue] = false;
+    },
+    allSelectionFn(selectionvalue) {
+      // 判断是否在全选状态下
+      for (let i = 0; i < this.tableData.length; i++) {
+        if (this.tableData[i][selectionvalue] !== true) {
+          return false;
+        }
+      }
+      return true;
+    },
+    getTableDataFn() {
+      for (let i = 0; i < this.tableData.length; i++) {
+        console.log(this.tableData[i]);
+        console.log("selection:", this.tableData[i].selection);
+        console.log("pass:", this.tableData[i].pass);
+      }
+    },
+
+    //获取电压信息
+    getSearchdy() {
+      getSearchInfo({ type: 1 })
+        .then((res) => {
+          this.dyOptions = [{ id: -1, name: "全部" }];
+          this.dyOptions = this.dyOptions.concat(res.data.list);
+          this.formdata.dyId = this.dyOptions[0].id;
+          this.getSearchxl();
+        })
+        .catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl() {
+      getSearchInfo({ type: 2, id: this.formdata.dyId })
+        .then((res) => {
+          this.xlOptions = [{ id: -1, name: "全部" }];
+          this.xlOptions = this.xlOptions.concat(res.data.list);
+          this.formdata.lineId = this.xlOptions[0].id;
+          this.getSearchgt();
+        })
+        .catch((err) => {});
+    },
+    //获取杆塔数据
+    getSearchgt() {
+      getSearchInfo({ type: 3, id: this.formdata.lineId })
+        .then((res) => {
+          this.gtOptions = [{ id: -1, name: "全部" }];
+          this.gtOptions = this.gtOptions.concat(res.data.list);
+          this.formdata.towerId = this.gtOptions[0].id;
+        })
+        .catch((err) => {});
+    },
+    //查询
+    onSubmit() {
+      this.page = 1;
+      //this.terminalList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {
+        isonline: -1,
+      };
+      this.getSearchdy();
+      this.page = 1;
+      this.pageSize = 20;
+      //this.terminalList();
+    },
+    handleClick(row) {
+      console.log(row);
+    },
+    showColumnOption() {
+      this.isShowColumn = true;
+    },
+    saveColumn() {
+      localStorage.setItem("columnSet", JSON.stringify(this.checkList));
+      this.isShowColumn = false;
+    },
+    //选中
+
+    tableRowClassName({ row, rowIndex }) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
+
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.itoperation {
+  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;
+    .photoGraphicBtnGroup {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .itForm {
+        display: flex;
+        .ip {
+          display: flex;
+          margin-right: 12px;
+          align-items: center;
+          .label {
+            font-size: 14px;
+            color: #606266;
+            width: auto;
+          }
+          .el-input {
+            width: 166px;
+          }
+        }
+      }
+    }
+    .searchBox {
+      margin-top: 8px;
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+        .isonLineClass {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+      }
+    }
+  }
+  .deviceTable {
+    margin-top: 8px;
+    height: calc(100% - 40px);
+    position: releative;
+    .batchBox {
+      height: 40px;
+      position: absolute;
+      line-height: 40px;
+      background: #fafafa;
+      width: calc(100% - 116px);
+      left: 78px;
+      z-index: 4;
+      top: 55px;
+    }
+    .el-input--small {
+      font-size: 12px;
+      .el-input__inner {
+        padding: 0px 8px;
+      }
+    }
+  }
+  .el-drawer__wrapper {
+    .el-drawer__body {
+      padding: 0px 20px;
+      .body {
+        display: flex;
+        flex-direction: column;
+        .el-checkbox {
+          width: 100%;
+          height: 28px;
+          line-height: 28px;
+          display: inline-block;
+          font-family: PingFang SC;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 14px;
+          color: #000;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          box-sizing: border-box;
+        }
+        .el-checkbox:hover {
+          background-color: #f5f7fa;
+        }
+      }
+      .footer {
+        width: 100%;
+        height: 44px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

src/views/itOperation/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="itoperation">
+    <div class="deviceBox">
+      <iframe
+        id="iframeId"
+        class="iframeBox"
+        src="http://dev.xinyingpower.com:40099/web/"
+        width="100%"
+        height="100%"
+        frameborder="0"
+      ></iframe>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  methods: {},
+};
+</script>
+<style lang="less">
+.itoperation {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: @color-white;
+  .deviceBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 0px);
+    //padding: 12px;
+    border-radius: 4px;
+  }
+}
+</style>

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

@@ -1,154 +0,0 @@
-<template>
-  <div class="simCardcontain">
-    <div class="simBtnGroup">
-      <el-button type="primary">新增</el-button>
-      <el-button type="primary">修改</el-button>
-      <el-button type="primary">删除</el-button>
-      <el-button type="primary">查询</el-button>
-      <el-button type="primary">质保延期</el-button>
-      <el-button type="primary">导入</el-button>
-      <el-button type="primary">导入模板下载</el-button>
-      <el-button type="primary">导出</el-button>
-    </div>
-    <div class="searchForm">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="单位:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="网络类型:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态:">
-          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-        </el-form-item>
-        <el-form-item label="是否已使用">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="电话号码:">
-          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="simTable">
-      <el-table
-        ref="multipleTable"
-        :data="tableData"
-        stripe
-        tooltip-effect="dark"
-        style="width: 100%"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="index" width="55"> </el-table-column>
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column label="单位">
-          <template slot-scope="scope">{{ scope.row.date }}</template>
-        </el-table-column>
-        <el-table-column prop="name" label="电话号码"> </el-table-column>
-        <el-table-column prop="address" label="网络类型" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column prop="name" label="质保到期日"> </el-table-column>
-        <el-table-column prop="name" label="流量包(M)"> </el-table-column>
-        <el-table-column prop="name" label="告警阀值(%)"> </el-table-column>
-        <el-table-column prop="name" label="状态"> </el-table-column>
-        <el-table-column prop="name" label="是否已使用"> </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      formInline: {
-        user: "",
-        region: "",
-      },
-      tableData: [
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-08",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-06",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-07",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-      ],
-      multipleSelection: [],
-    };
-  },
-  methods: {
-    onSubmit() {
-      console.log("submit!");
-    },
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach((row) => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-  },
-};
-</script>
-<style lang="less">
-.simCardcontain {
-  width: 100%;
-  height: 100%;
-  background: @color-white;
-  .simBtnGroup {
-    padding: 16px 8px;
-  }
-  .searchForm {
-    padding: 0px 8px;
-    .el-form {
-      .el-form-item {
-        margin-bottom: 0px;
-      }
-    }
-  }
-  .simTable {
-    padding: 16px 8px 0 8px;
-  }
-}
-</style>

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

@@ -0,0 +1,599 @@
+<template>
+  <div class="deviceReport">
+    <div class="reportBox">
+      <div class="photoGraphicBtnGroup">
+        <h4>装置报表</h4>
+        <div></div>
+      </div>
+      <div class="searchBox">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <div class="selectForm">
+            <el-form-item label="电压等级" class="dybox">
+              <el-select v-model="formdata.dyId" @change="getSearchxl">
+                <el-option
+                  v-for="item in dyOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="线路名称" class="xlbox">
+              <el-select
+                v-model="formdata.lineId"
+                @change="getSearchgt"
+                filterable
+              >
+                <el-option
+                  v-for="item in xlOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="杆塔名称">
+              <el-select v-model="formdata.towerId" filterable>
+                <el-option
+                  v-for="item in gtOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="开始日期">
+              <el-date-picker
+                v-model="formdata.starttime"
+                type="datetime"
+                placeholder="开始日期"
+                value-format="timestamp"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="结束日期">
+              <el-date-picker
+                v-model="formdata.endtime"
+                type="datetime"
+                default-time="23:59:59"
+                placeholder="结束日期"
+                value-format="timestamp"
+                class="ml10"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-input
+                v-model="formdata.search"
+                placeholder="请输入线路/杆塔/设备编号"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </div>
+          <div class="btngrop">
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">查询</el-button>
+              <el-button type="primary" @click="onReset">重置</el-button>
+              <el-button
+                type="primary"
+                icon="el-icon-document"
+                @click="handleExport()"
+                >导出</el-button
+              >
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+      <div class="photoGraphicTable">
+        <el-table
+          ref="multipleTable"
+          :data="terminalTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          v-loading="loading"
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column
+            prop="dyName"
+            label="电压等级"
+            min-width="120"
+            show-overflow-tooltip
+            fixed
+          >
+          </el-table-column>
+
+          <el-table-column
+            prop="lineName"
+            label="线路名称"
+            show-overflow-tooltip
+            min-width="120"
+            fixed
+          >
+            <template slot-scope="scope">
+              {{ scope.row.lineName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="towerName"
+            label="杆塔名称"
+            show-overflow-tooltip
+            min-width="150"
+            fixed
+          >
+            <template slot-scope="scope">
+              {{ scope.row.towerName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="equipName"
+            label="设备名称"
+            show-overflow-tooltip
+            min-width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdId"
+            label="设备编号"
+            show-overflow-tooltip
+            min-width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            prop="sim"
+            label="SIM卡号"
+            show-overflow-tooltip
+            min-width="170"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="netType"
+            label="网络类型"
+            show-overflow-tooltip
+            min-width="120"
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.netType == 1"> 移动</span>
+              <span v-if="scope.row.netType == 2"> 联通</span>
+              <span v-if="scope.row.netType == 3"> 电信</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            prop="isonline"
+            label="状态"
+            show-overflow-tooltip
+            min-width="120"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.isonline ? "在线" : "离线" }}</template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="model"
+            label="装置型号"
+            show-overflow-tooltip
+            min-width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="bsManufacturer"
+            label="装置厂家"
+            show-overflow-tooltip
+            min-width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="protocolName"
+            label="规约名称"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="workingDate"
+            label="投运日期"
+            show-overflow-tooltip
+            min-width="120"
+          >
+            <template slot-scope="scope">
+              {{
+                scope.row.workingDate == null
+                  ? ""
+                  : $moment(scope.row.workingDate).format("yy-MM-DD")
+              }}</template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="isonline"
+            label="最新运行状态"
+            show-overflow-tooltip
+            min-width="120"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.isonline ? "在线" : "离线" }}</template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="protocolName"
+            label="在线天数"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="图片数量"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="最后数据上送时间"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="最后图片上送时间"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="最新基本信息采集时间"
+            show-overflow-tooltip
+            min-width="180"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="装置名称"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="装置型号"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="装置版本号"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="生产厂家"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="生产日期"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="出厂编号"
+            show-overflow-tooltip
+            min-width="120"
+          />
+
+          <el-table-column
+            prop="protocolName"
+            label="最新工作状态采集时间"
+            show-overflow-tooltip
+            min-width="180"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="电源电压"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="工作温度"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="电池电量"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="浮充状态"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="工作总时间"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="连续工作时间"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="网络连接状态"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="最新运行状态采集时间"
+            show-overflow-tooltip
+            min-width="180"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="4G信号强度"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="2G信号强度"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="剩余运行内存"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="剩余存储内"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="最新GPS位置采集时间"
+            show-overflow-tooltip
+            min-width="180"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="半径"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="维度"
+            show-overflow-tooltip
+            min-width="120"
+          />
+          <el-table-column
+            prop="protocolName"
+            label="经度"
+            show-overflow-tooltip
+            min-width="120"
+          />
+
+          <!-- <el-table-column
+            prop="status"
+            label="装置状态"
+            show-overflow-tooltip
+            v-if="roleUser != 2"
+          >
+            <template slot-scope="scope">
+              {{ scope.row.status == 1 ? "运行中" : "已删除" }}
+            </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>
+  </div>
+</template>
+
+<script>
+import {
+  getTerminalJoggle,
+  getSearchInfo,
+  getTerminalListExcel,
+} from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      formdata: {
+        dyId: -1,
+        lineId: -1,
+        towerId: -1,
+        search: "",
+      },
+      terminalTableData: [], //表格数据
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      loading: true,
+    };
+  },
+  created() {
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+  },
+  mounted() {
+    this.$set(
+      this.formdata,
+      "starttime",
+      new Date(new Date().toLocaleDateString()).getTime()
+    );
+    this.$set(this.formdata, "endtime", new Date().setHours(23, 59, 59, 59));
+    this.getSearchdy();
+    this.terminalList();
+  },
+  methods: {
+    //获取电压信息
+    getSearchdy() {
+      getSearchInfo({ type: 1 })
+        .then((res) => {
+          this.dyOptions = [{ id: -1, name: "全部" }];
+          this.dyOptions = this.dyOptions.concat(res.data.list);
+          this.formdata.dyId = this.dyOptions[0].id;
+          this.getSearchxl();
+        })
+        .catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl() {
+      getSearchInfo({ type: 2, id: this.formdata.dyId })
+        .then((res) => {
+          this.xlOptions = [{ id: -1, name: "全部" }];
+          this.xlOptions = this.xlOptions.concat(res.data.list);
+          this.formdata.lineId = this.xlOptions[0].id;
+          this.getSearchgt();
+        })
+        .catch((err) => {});
+    },
+    //获取杆塔数据
+    getSearchgt() {
+      getSearchInfo({ type: 3, id: this.formdata.lineId })
+        .then((res) => {
+          this.gtOptions = [{ id: -1, name: "全部" }];
+          this.gtOptions = this.gtOptions.concat(res.data.list);
+          this.formdata.towerId = this.gtOptions[0].id;
+        })
+        .catch((err) => {});
+    },
+
+    //查询
+    onSubmit() {
+      this.page = 1;
+      this.terminalList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {};
+      this.getSearchdy();
+      this.page = 1;
+      this.pageSize = 20;
+
+      this.terminalList();
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    ////获取拍照装置列表数据
+    terminalList() {
+      this.loading = true;
+      this.$set(this.formdata, "pageindex", this.page);
+      this.$set(this.formdata, "pagesize", this.pageSize);
+      getTerminalJoggle(this.formdata)
+        .then((res) => {
+          console.log(res);
+          this.terminalTableData = res.data.list;
+          this.total = res.data.total;
+          this.loading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //导出
+    handleExport() {
+      //window.location.href = "/api/api/getTerminalListExcel";
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.terminalList(); //刷新
+    },
+
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.terminalList();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.deviceReport {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #ffffff;
+  .reportBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+    .searchBox {
+      display: flex;
+      flex-direction: column;
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
+          width: 185px;
+        }
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+      }
+    }
+    .photoGraphicBtnGroup {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .searchBox {
+      margin-top: 8px;
+    }
+    .photoGraphicTable {
+      // margin-top: 16px;
+      //margin-top: 36px;
+      height: calc(100% - 130px);
+    }
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/components/addLineDialog.vue

@@ -0,0 +1,146 @@
+<template>
+  <el-dialog
+    class="addLineDialog"
+    title="修改线路"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="420px"
+    @close="handleclose"
+  >
+    <el-form
+      label-position="left"
+      label-width="92px"
+      ref="formLineInfo"
+      :rules="rules"
+      :model="formdata"
+    >
+      <!-- <el-form-item label="公司名称：" prop="bsManufacturer">
+        <el-input
+          v-model="formdata.bsManufacturer"
+          autocomplete="off"
+        ></el-input>
+      </el-form-item> -->
+      <el-form-item label="DY等级：" prop="dyLevelid">
+        <el-select v-model="formdata.dyId" placeholder="请选择电压等级">
+          <el-option
+            v-for="items in dyOptions"
+            :key="items.id"
+            :label="items.name"
+            :value="items.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="线路名称：" prop="name">
+        <el-input v-model="formdata.lineName" 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 {
+  addLineJoggle,
+  updateLineJoggle,
+  getdyListJoggle,
+} from "@/utils/api/index";
+
+export default {
+  props: {
+    lineDialogTitle: String,
+  },
+
+  data() {
+    return {
+      isShow: false,
+      formdata: {},
+      dyOptions: "",
+      rules: {
+        // bsManufacturer: [
+        //   { required: true, message: "请输入公司名称", trigger: "blur" },
+        // ],
+        dyId: [{ required: true, message: "请选择DY等级", trigger: "change" }],
+
+        lineName: [
+          {
+            required: true,
+            message: "请输入线路名称",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formdata = JSON.parse(JSON.stringify(val));
+      //this.$set(this.formdata);
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formLineInfo.validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          updateLineJoggle({
+            id: this.formdata.lineId,
+            // bsManufacturer: null,
+            name: this.formdata.lineName,
+            dyLevelid: this.formdata.dyId,
+          })
+            .then((res) => {
+              this.isShow = false;
+              //this.$message.success("修改成功");
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "修改成功",
+                type: "success",
+              });
+              this.$parent.terminalList(); //刷新
+            })
+            .catch((err) => {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "修改失败",
+                type: "error",
+              });
+              //this.$message.error("修改失败");
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.terminalList(); //刷新
+    },
+  },
+
+  created() {
+    getdyListJoggle().then((res) => {
+      console.log(res);
+      this.dyOptions = res.data.list;
+      console.log(this.dyOptions);
+    });
+  },
+};
+</script>
+<style lang="less">
+.addLineDialog {
+  .el-select {
+    width: 100%;
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/components/addPhotoDialog.vue

@@ -30,7 +30,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="杆塔名称：" prop="towerId">
-        <el-select v-model="formInfo.towerId" placeholder="请选择">
+        <el-select v-model="formInfo.towerId" placeholder="请选择" filterable>
           <el-option
             v-for="item in toweridOptions"
             :key="item.id"
@@ -43,12 +43,71 @@
       <el-form-item label="装置ID：" prop="cmdId">
         <el-input v-model="formInfo.cmdId" autocomplete="on"></el-input>
       </el-form-item>
+      <el-form-item label="云台选择：" prop="hasPan">
+        <el-select v-model="formInfo.hasPan" placeholder="请选择">
+          <el-option
+            v-for="item in hasPanOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="装置名称：" prop="equipName">
         <el-input v-model="formInfo.equipName" auto-complete="on"></el-input>
       </el-form-item>
       <el-form-item label="SIM卡：" prop="sim">
         <el-input v-model="formInfo.sim" auto-complete="on"></el-input>
       </el-form-item>
+      <el-form-item label="网络类型：" prop="netType">
+        <el-select v-model="formInfo.netType" placeholder="请选择">
+          <el-option
+            v-for="item in networkOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="装置型号：" prop="model">
+        <el-input v-model="formInfo.model" auto-complete="on"></el-input>
+      </el-form-item>
+      <el-form-item label="装置厂家：" prop="bsManufacturer">
+        <el-input
+          v-model="formInfo.bsManufacturer"
+          auto-complete="on"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="规约版本：" prop="protocolVersion">
+        <!-- <el-input
+          v-model="formInfo.protocolVersion"
+          auto-complete="on"
+        ></el-input> -->
+        <el-select v-model="formInfo.protocol" placeholder="请选择">
+          <el-option
+            v-for="item in protocolOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="投运日期：" prop="workingDate">
+        <el-date-picker
+          class="dateClass"
+          v-model="formInfo.workingDate"
+          type="date"
+          placeholder="选择日期"
+          format="yyyy 年 MM 月 dd 日"
+          value-format="timestamp"
+        ></el-date-picker>
+      </el-form-item>
+      <!-- <el-form-item label="状态：" prop="status">
+        <el-select v-model="formInfo.statusId" placeholder="请选择">
+          <el-option v-for="item in statusOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item> -->
       <el-divider></el-divider>
       <h4>添加通道</h4>
       <div class="addchannel" ref="channelBoxref">
@@ -71,10 +130,10 @@
               ></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="通道名称：">
+          <el-form-item label="通道昵称：">
             <el-input
               v-model="val.alias"
-              placeholder="请输入通道名称"
+              placeholder="请输入通道昵称"
             ></el-input>
           </el-form-item>
           <div class="btngrop">
@@ -122,6 +181,7 @@ import {
   updateTerminalJoggle,
   getAllChannelListJoggle,
   getLineAndGtInfo,
+  getProtocolList,
 } from "@/utils/api/index";
 export default {
   props: {
@@ -150,6 +210,45 @@ export default {
       filterOption: [], //筛选后的通道列表
       lineOptions: [], //线路
       toweridOptions: [], //杆塔
+      networkOptions: [
+        {
+          id: 1,
+          name: "移动",
+        },
+        {
+          id: 2,
+          name: "联通",
+        },
+        {
+          id: 3,
+          name: "电信",
+        },
+      ], //网络类型
+      statusOptions: [
+        {
+          id: 1,
+          name: "在运",
+        },
+        {
+          id: 2,
+          name: "停运",
+        },
+        {
+          id: 3,
+          name: "调试",
+        },
+      ], //状态
+      hasPanOptions: [
+        {
+          id: 0,
+          name: "否",
+        },
+        {
+          id: 1,
+          name: "是",
+        },
+      ],
+      protocolOptions: [], //规约版本
       rules: {
         cmdId: [
           { required: true, message: "请输入装置ID", trigger: "blur" },
@@ -159,10 +258,22 @@ export default {
       photoDialogtype: 0, //1 线路change时，修改杆塔数据
     };
   },
-  mounted() {},
+  mounted() {
+    this.getProtocol();
+  },
   created() {},
   watch: {},
   methods: {
+    getProtocol() {
+      //获取规约版本
+      getProtocolList()
+        .then((res) => {
+          console.log(res);
+          this.protocolOptions = res.data.list;
+          console.log(this.protocolOptions);
+        })
+        .catch((err) => {});
+    },
     //判断
     getdataform(val) {
       this.getLine();
@@ -173,7 +284,13 @@ export default {
           towerId: "",
           cmdId: "",
           equipName: "",
+          hasPan: this.hasPanOptions[0].id,
           sim: "",
+          netType: this.networkOptions[0].id,
+          model: "",
+          bsManufacturer: "",
+          protocol: this.protocolOptions[0].id,
+          workingDate: new Date().getTime(),
           list: [
             {
               id: "",
@@ -182,7 +299,23 @@ export default {
           ],
         });
       }
-      this.formInfo = val;
+      if (val.list.length == 0) {
+        console.log(val);
+        console.log("我是没有通道的");
+        val.list.push({
+          id: "",
+          alias: "",
+        });
+      }
+
+      //this.formInfo = val;
+      this.formInfo = JSON.parse(JSON.stringify(val));
+      this.$set(
+        this.formInfo,
+        "workingDate",
+        new Date(this.formInfo.workingDate).getTime()
+      );
+      console.log(this.formInfo.workingDate);
     },
     //通道号值改变
     changeHandle() {
@@ -240,7 +373,9 @@ export default {
             //   list: this.formInfo.list,
             //   displayName: this.formInfo.cmdId,
             // };
+            this.$set(this.formInfo, "workingDate", new Date().getTime());
             this.$set(this.formInfo, "displayName", this.formInfo.cmdId);
+            console.log(this.formInfo);
             addTerminalJoggle(this.formInfo)
               .then((res) => {
                 this.isShow = false;
@@ -261,6 +396,8 @@ export default {
                 });
               });
           } else {
+            console.log(this.formInfo);
+
             updateTerminalJoggle(this.formInfo)
               .then((res) => {
                 this.isShow = false;
@@ -326,7 +463,10 @@ export default {
         .then((res) => {
           this.channelOptions = res.data.list;
           this.filterOption = res.data.list;
-          this.formInfo.list[0].id = this.filterOption[0].id;
+          if (this.photoDialogTitle == "新增") {
+            this.formInfo.list[0].id = this.filterOption[0].id;
+          }
+          //this.formInfo.list[0].id = this.filterOption[0].id;
         })
         .catch((err) => {});
     },
@@ -362,6 +502,9 @@ export default {
         .el-form-item__label {
           padding-right: 0px;
         }
+        .dateClass {
+          width: 290px;
+        }
       }
       .el-divider--horizontal {
         margin: 12px;

src/views/management/monitoringEquipment/photographicDevice/components/baseInfor.vue

@@ -0,0 +1,212 @@
+<template>
+  <el-dialog
+    class="baseInforDialog"
+    title="基本信息"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1280px"
+  >
+    <el-form :inline="true" :model="formdata" class="demo-form-inline">
+      <el-form-item label="开始日期">
+        <el-date-picker
+          v-model="formdata.starttime"
+          type="datetime"
+          placeholder="开始日期"
+          value-format="timestamp"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束日期">
+        <el-date-picker
+          v-model="formdata.endtime"
+          type="datetime"
+          default-time="23:59:59"
+          placeholder="结束日期"
+          value-format="timestamp"
+          class="ml10"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="listData"
+      stripe
+      tooltip-effect="dark"
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <template slot="empty">
+        <el-empty :image-size="160" description="暂无数据"></el-empty>
+      </template>
+      <el-table-column min-width="45" label="序号">
+        <template slot-scope="scope">
+          <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="采集时间"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备名称"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备编号"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="装置名称"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="装置型号"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="装置版本号"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="生产厂家"
+        min-width="100"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="生产日期"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="出厂编号"
+        min-width="100"
+        show-overflow-tooltip
+      ></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 slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getLineListJoggle } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      isShow: false,
+      formdata: {},
+      listData: [
+        {
+          name: "测试",
+        },
+        {
+          name: "测试2",
+        },
+      ],
+      loading: false,
+      seltermid: "", //装置id
+      selcmdId: "", //cmdId
+      requestId: "",
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  mounted() {},
+  methods: {
+    //查询
+    onSubmit() {
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+      this.getlistnr();
+    },
+    //获取数据
+    getlistnr(val) {
+      console.log(val);
+      this.seltermid = val.id;
+      this.selcmdId = val.cmdid;
+      this.loading = true;
+      getLineListJoggle({
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      }).then((res) => {
+        this.listData = res.data.list;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getlistnr();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getlistnr();
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<<<<<<< HEAD
+<style lang="less">
+.baseInforDialog {
+  .pageNation {
+    justify-content: flex-start;
+    margin-top: 16px;
+    .el-pagination {
+      padding: 0px;
+      .el-select .el-input {
+        margin-left: 0px;
+      }
+    }
+  }
+}
+</style>
+=======
+<style lang="less" scoped></style>
+>>>>>>> hn1.0

src/views/management/monitoringEquipment/photographicDevice/components/gpsPosition.vue

@@ -7,7 +7,7 @@
     width="662px"
     @close="handleclose"
   >
-    <div class="gpsbox" v-loading="loading">
+    <!-- <div class="gpsbox" v-loading="loading">
       <p>
         <span>经度：</span><span>{{ infornr.longitude }}</span>
       </p>
@@ -17,6 +17,26 @@
       <p>
         <span>半径：</span><span>{{ infornr.radius }}</span>
       </p>
+    </div> -->
+    <div class="gpsbox" v-loading="loading">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item>
+          <template slot="label"> 采集时间 </template
+          >{{ $moment(infornr.updatetime).format("YYYY-MM-DD HH:mm:ss") }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label"> 经度 </template>{{ infornr.longitude }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label"> 纬度 </template>{{ infornr.latitude }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label"> 半径 </template>{{ infornr.radius }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-button type="text" class="newBtn" @click="getgpsData()"
+        >获取最新GPS位置</el-button
+      >
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" @click="isShow = false">确 定</el-button>
@@ -24,37 +44,59 @@
   </el-dialog>
 </template>
 <script>
-import { getTermGPSJoggle, getTermGPSPosition } from "@/utils/api/index";
+import {
+  getTermLastGPSPosition,
+  getTermGPSJoggle,
+  getTermGPSPosition,
+} from "@/utils/api/index";
 export default {
   props: {
     title: String,
   },
   data() {
     return {
-      loading: true,
+      loading: false,
       isShow: false,
       timer: null,
       infornr: {},
       i: 0,
       queryTime: "", //查询ID
-      cmdid: "",
+      zzcmdid: "",
+      zztermid: "",
     };
   },
   mounted() {},
   methods: {
+    //获取数据信息
+    getgpssql() {
+      getTermLastGPSPosition({
+        termId: this.zztermid,
+      })
+        .then((res) => {
+          this.infornr = res.data;
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   message: "gps信息已更新",
+          //   type: "success",
+          // });
+        })
+        .catch((err) => {});
+    },
     //获取第一次数据
-    getgpsData(val) {
-      console.log(val);
+    getgpsData() {
+      console.log(this.zzcmdid);
+      console.log(this.zztermid);
       this.loading = true;
-      //this.cmdid = cmdid;
       getTermGPSPosition({
-        cmdId: val.cmdid,
+        cmdId: this.zzcmdid,
       })
         .then((res) => {
           this.queryTime = res.data;
-          this.getNewgpsData(val);
+          console.log(this.zztermid);
+          this.getNewgpsData(this.zztermid);
           this.timer = window.setInterval(() => {
-            this.getNewgpsData(val);
+            this.getNewgpsData(this.zztermid);
             this.i++;
           }, 5000);
         })
@@ -64,7 +106,7 @@ export default {
     getNewgpsData(val) {
       getTermGPSJoggle({
         queryTime: this.queryTime,
-        termid: val.id,
+        termid: val,
       })
         .then((res) => {
           this.loading = true;
@@ -97,8 +139,11 @@ export default {
         })
         .catch((err) => {});
     },
-    display() {
+    display(data) {
+      console.log(data);
       this.isShow = true;
+      this.zzcmdid = data.cmdId;
+      this.zztermid = data.id;
     },
     hide() {
       this.isShow = false;
@@ -107,6 +152,7 @@ export default {
       this.i = 0;
       clearInterval(this.timer);
       this.timer = null;
+      this.loading = false;
     },
   },
 };
@@ -119,6 +165,9 @@ export default {
       height: 32px;
       font-size: 16px;
     }
+    .newBtn {
+      margin-top: 14px;
+    }
   }
 }
 </style>

src/views/management/monitoringEquipment/photographicDevice/components/gpsSite.vue

@@ -0,0 +1,194 @@
+<template>
+  <el-dialog
+    class="gpsSiteDialog"
+    title="GPS位置数据"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1280px"
+  >
+    <el-form :inline="true" :model="formdata" class="demo-form-inline">
+      <el-form-item label="开始日期">
+        <el-date-picker
+          v-model="formdata.starttime"
+          type="datetime"
+          placeholder="开始日期"
+          value-format="timestamp"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束日期">
+        <el-date-picker
+          v-model="formdata.endtime"
+          type="datetime"
+          default-time="23:59:59"
+          placeholder="结束日期"
+          value-format="timestamp"
+          class="ml10"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="listData"
+      stripe
+      tooltip-effect="dark"
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <template slot="empty">
+        <el-empty :image-size="160" description="暂无数据"></el-empty>
+      </template>
+      <el-table-column min-width="45" label="序号">
+        <template slot-scope="scope">
+          <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="采集时间"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备名称"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备编号"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="半径"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="维度"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="经度"
+        min-width="80"
+        show-overflow-tooltip
+      ></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 slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getLineListJoggle } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      isShow: false,
+      formdata: {},
+      listData: [
+        {
+          name: "测试",
+        },
+        {
+          name: "测试2",
+        },
+      ],
+      loading: false,
+      seltermid: "", //装置id
+      selcmdId: "", //cmdId
+      requestId: "",
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  mounted() {},
+  methods: {
+    //查询
+    onSubmit() {
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+      this.getlistnr();
+    },
+    //获取数据
+    getlistnr(val) {
+      console.log(val);
+      this.seltermid = val.id;
+      this.selcmdId = val.cmdid;
+      this.loading = true;
+      getLineListJoggle({
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      }).then((res) => {
+        this.listData = res.data.list;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getlistnr();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getlistnr();
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<<<<<<< HEAD
+<style lang="less">
+.gpsSiteDialog {
+  .pageNation {
+    justify-content: flex-start;
+    margin-top: 16px;
+    .el-pagination {
+      padding: 0px;
+      .el-select .el-input {
+        margin-left: 0px;
+      }
+    }
+  }
+}
+</style>
+=======
+<style lang="less" scoped></style>
+>>>>>>> hn1.0

src/views/management/monitoringEquipment/photographicDevice/components/imageCapturebak.vue

@@ -0,0 +1,425 @@
+<template>
+  <el-dialog
+    class="setimgDialog"
+    title="图像采集参数"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="60%"
+    @close="handleclose"
+  >
+    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
+      <el-tab-pane label="查询实际参数" name="1">
+        <div class="flexnr">
+          <div class="wt80">通道:</div>
+          <el-select v-model="selaccess" placeholder="请选择" class="mr20">
+            <el-option
+              v-for="item in accesslist"
+              :key="item.channelid"
+              :label="item.channelname"
+              :value="item.channelid"
+            ></el-option>
+          </el-select>
+          <el-button
+            :loading="searchloading"
+            type="primary"
+            @click="inquirebtn()"
+            >查询</el-button
+          >
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">色彩选择:</div>
+          <el-select v-model="capturenr.color" class="wt280" :disabled="true">
+            <el-option
+              v-for="item in colorlist"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">图像分辨率:</div>
+          <el-select
+            v-model="capturenr.resolution"
+            class="wt280"
+            :disabled="true"
+          >
+            <el-option
+              v-for="item in ratiolist"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">亮度:</div>
+          <el-input
+            v-model="capturenr.luminance"
+            :disabled="true"
+            class="wt280"
+          ></el-input>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">对比度:</div>
+          <el-input
+            v-model="capturenr.contrast"
+            :disabled="true"
+            class="wt280"
+          ></el-input>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">饱和度:</div>
+          <el-input
+            v-model="capturenr.saturation"
+            :disabled="true"
+            class="wt280"
+          ></el-input>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="设置参数" name="2">
+        <el-form
+          :model="setForm"
+          :rules="rules"
+          ref="setForm"
+          label-width="120px"
+        >
+          <el-form-item label="通道" prop="channelId">
+            <el-select
+              v-model="setForm.channelId"
+              placeholder="请选择"
+              class="mr20"
+            >
+              <el-option
+                v-for="item in accesslist"
+                :key="item.channelid"
+                :label="item.channelname"
+                :value="item.channelid"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="色彩选择" prop="color">
+            <el-select
+              v-model="setForm.color"
+              placeholder="请选择"
+              class="mr20"
+            >
+              <el-option
+                v-for="item in colorlist"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="图像分辨率" prop="resolution">
+            <el-select
+              v-model="setForm.resolution"
+              placeholder="请选择"
+              class="mr20"
+            >
+              <el-option
+                v-for="item in ratiolist"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="亮度" prop="luminance">
+            <el-input-number
+              v-model="setForm.luminance"
+              :min="1"
+              :max="100"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="对比度" prop="contrast">
+            <el-input-number
+              v-model="setForm.contrast"
+              :min="1"
+              :max="100"
+            ></el-input-number>
+          </el-form-item>
+
+          <el-form-item label="饱和度" prop="saturation">
+            <el-input-number
+              v-model="setForm.saturation"
+              :min="1"
+              :max="100"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitbtn('setForm')"
+              >确认</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+<script>
+import {
+  getChannelListJoggle,
+  getPhotoParamApi,
+  setPhotoParamApi,
+  getPhotoParamnrApi,
+  getResolutionRatio,
+} from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      loading: false,
+      isShow: false,
+      searchloading: false,
+      activeName: "1", //选项卡
+      accesslist: [], //通道选择器
+      colorlist: [
+        {
+          name: "黑白",
+          id: 0,
+        },
+        {
+          name: "彩色",
+          id: 1,
+        },
+      ], //色彩选择器
+      ratiolist: [], //图像分辨率
+      selaccess: "", //选中的通道
+      capturenr: {}, //查询后的内容
+      setForm: {}, //设置参数
+      rules: {
+        channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
+        color: [{ required: true, message: "请选择色彩", trigger: "blur" }],
+        contrast: [
+          { required: true, message: "请输入对比度", trigger: "blur" },
+        ],
+        luminance: [{ required: true, message: "请输入亮度", trigger: "blur" }],
+        resolution: [
+          { required: true, message: "请选择图像分辨率", trigger: "blur" },
+        ],
+        saturation: [
+          { required: true, message: "请输入饱和度", trigger: "blur" },
+        ],
+      },
+      timer: null,
+      i: 0,
+      seltermid: "", //装置id
+      selcmdId: "", //cmdId
+      requestId: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    //获取设备通道
+    getSingleAccess(val) {
+      this.setForm = {};
+      console.log(val);
+      this.seltermid = val.id;
+      this.selcmdId = val.cmdId;
+      getChannelListJoggle({ termid: this.seltermid })
+        .then((res) => {
+          this.accesslist = res.data.list;
+          this.selaccess = res.data.list[0].channelid;
+          this.$set(this.setForm, "channelId", res.data.list[0].channelid);
+        })
+        .catch((err) => {});
+    },
+    //获取图像分辨率
+    getRatio() {
+      this.$set(this.setForm, "color", this.colorlist[0].id);
+      getResolutionRatio({ type: 0 })
+        .then((res) => {
+          this.ratiolist = res.data.list;
+          this.$set(this.setForm, "resolution", res.data.list[0].id);
+        })
+        .catch((err) => {});
+    },
+    //查询触发
+    inquirebtn() {
+      this.loading = true;
+      this.searchloading = true;
+      getPhotoParamApi({
+        channelId: this.selaccess,
+        termId: this.seltermid,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.requestId = res.data.requestId;
+            this.inquirenr();
+            this.timer = window.setInterval(() => {
+              this.inquirenr();
+              this.i++;
+            }, 1000);
+          } else {
+            this.$message.error(res.code.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    //查询接口
+    inquirenr() {
+      getPhotoParamnrApi({
+        channelId: this.selaccess,
+        termId: this.seltermid,
+        requestId: this.requestId,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 200) {
+            this.capturenr = res.data;
+            if (res.data.isNew == true) {
+              this.searchloading = false;
+              this.i = 0;
+              this.$message.success("查询已更新");
+              clearInterval(this.timer);
+              this.timer = null;
+            } else if (this.i > 9) {
+              this.searchloading = false;
+              this.i = 0;
+              this.$message.warning("暂无响应，请稍后再试！");
+
+              clearInterval(this.timer);
+              this.timer = null;
+            }
+          } else {
+            this.$message.error(res.code.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    //确认
+    submitbtn(setForm) {
+      this.$set(this.setForm, "cmdId", this.selcmdId);
+      this.$set(this.setForm, "termId", this.seltermid);
+      this.$refs[setForm].validate((valid) => {
+        if (valid) {
+          setPhotoParamApi(this.setForm)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message.success("设置成功");
+                this.isShow = false;
+              } else {
+                this.$message.error(res.code.msg);
+              }
+            })
+            .catch((err) => {
+              this.$message.error("设置失败");
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.searchloading = false;
+      this.i = 0;
+      clearInterval(this.timer);
+      this.timer = null;
+    },
+  },
+};
+</script>
+<style lang="less">
+.setimgDialog {
+  .el-tabs__content {
+    height: 400px;
+    overflow: auto;
+    .el-tab-pane {
+      height: calc(100% - 16px);
+    }
+  }
+  .flexonly {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .flexno {
+    display: flex;
+    margin-top: 24px;
+    padding: 0px 8px;
+    align-items: center;
+  }
+  .flexnr {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    padding: 0px 8px;
+  }
+  .mt10 {
+    margin-bottom: 10px;
+  }
+  .mr10 {
+    margin-right: 10px;
+  }
+  .w8 {
+    width: 8%;
+  }
+  .wt80 {
+    width: 80px;
+  }
+  .wt280 {
+    width: 280px;
+  }
+  .w80 {
+    width: 90%;
+    overflow-y: auto;
+    height: 300px;
+  }
+  .mr20 {
+    margin-right: 20px;
+  }
+  .bt30 {
+    margin-bottom: 30px;
+  }
+  .deviceTable {
+    padding: 16px 8px 0 8px;
+    height: calc(100% - 16px);
+    .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;
+        }
+      }
+    }
+  }
+}
+.setRoadDialog {
+  .el-dialog__body {
+    height: 400px;
+    overflow: auto;
+    .el-form {
+      height: 100%;
+      //background: #fcc;
+    }
+    .setTimeTd {
+      h3 {
+        margin: 8px 0px;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      .timename {
+        margin: 8px 0px;
+      }
+    }
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/components/runStatus.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-dialog
+    class="runStatusDialog"
+    title="装置运行状态"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1280px"
+  >
+    <el-form :inline="true" :model="formdata" class="demo-form-inline">
+      <el-form-item label="开始日期">
+        <el-date-picker
+          v-model="formdata.starttime"
+          type="datetime"
+          placeholder="开始日期"
+          value-format="timestamp"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束日期">
+        <el-date-picker
+          v-model="formdata.endtime"
+          type="datetime"
+          default-time="23:59:59"
+          placeholder="结束日期"
+          value-format="timestamp"
+          class="ml10"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="listData"
+      stripe
+      tooltip-effect="dark"
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <template slot="empty">
+        <el-empty :image-size="160" description="暂无数据"></el-empty>
+      </template>
+      <el-table-column min-width="45" label="序号">
+        <template slot-scope="scope">
+          <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="采集时间"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备名称"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备编号"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="4G信号强度"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="2G信号强度"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="剩余运行内存"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="剩余存储内存"
+        min-width="100"
+        show-overflow-tooltip
+      ></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 slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getLineListJoggle } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      isShow: false,
+      formdata: {},
+      listData: [
+        {
+          name: "测试",
+        },
+        {
+          name: "测试2",
+        },
+      ],
+      loading: false,
+      seltermid: "", //装置id
+      selcmdId: "", //cmdId
+      requestId: "",
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  mounted() {},
+  methods: {
+    //查询
+    onSubmit() {
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+      this.getlistnr();
+    },
+    //获取数据
+    getlistnr(val) {
+      console.log(val);
+      this.seltermid = val.id;
+      this.selcmdId = val.cmdid;
+      this.loading = true;
+      getLineListJoggle({
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      }).then((res) => {
+        this.listData = res.data.list;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getlistnr();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getlistnr();
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.runStatusDialog {
+  .pageNation {
+    justify-content: flex-start;
+    margin-top: 16px;
+    .el-pagination {
+      padding: 0px;
+      .el-select .el-input {
+        margin-left: 0px;
+      }
+    }
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/components/towerDialog.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-dialog
+    class="addtowerDialog"
+    title="修改杆塔"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleClose"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="100px"
+      :rules="rules"
+      :model="formdata"
+    >
+      <el-form-item label="线路名称：" prop="lineId">
+        <el-select v-model="formdata.lineId" placeholder="请选择">
+          <el-option
+            v-for="item in lineOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="杆塔名称：" prop="name">
+        <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-item label="排序号：" prop="order">
+        <el-input-number
+          controls-position="right"
+          v-model="formdata.order"
+          :min="0"
+        ></el-input-number>
+      </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 { getLineListApi, addTowerApi, updateTowerApi } from "@/utils/api/index";
+
+export default {
+  data() {
+    return {
+      isShow: false,
+      lineOptions: [],
+      formdata: {},
+      rules: {
+        towerName: [
+          { required: true, message: "请输入杆塔名称", trigger: "blur" },
+        ],
+        lineId: [
+          { required: true, message: "请选择线路编号", trigger: "blur" },
+        ],
+        // address: [
+        //   { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        // ],
+        order: [{ required: true, message: "请输入排序号", trigger: "blur" }],
+      },
+    };
+  },
+  mounted() {
+    this.getLineListdata();
+  },
+  methods: {
+    getLineListdata() {
+      getLineListApi({ pageindex: 1, pagesize: 100 })
+        .then((res) => {
+          this.lineOptions = res.data.list;
+        })
+        .catch((err) => {});
+    },
+    //判断
+    getdataform(val) {
+      //this.formdata = val;
+      this.formdata.order = 0;
+      this.formdata = JSON.parse(JSON.stringify(val));
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          updateTowerApi({
+            id: this.formdata.towerId,
+            name: this.formdata.towerName,
+            address: null,
+            lineId: this.formdata.lineId,
+            lineName: this.formdata.lineName,
+            order: this.formdata.order,
+          })
+            .then((res) => {
+              this.isShow = false;
+              //this.$message.success("修改成功");
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "修改成功",
+                type: "success",
+              });
+              this.$parent.terminalList(); //刷新
+            })
+            .catch((err) => {
+              //this.$message.error("修改失败");
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "修改失败",
+                type: "error",
+              });
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleClose() {
+      this.$parent.terminalList(); //刷新
+    },
+  },
+};
+</script>
+<style lang="less">
+.addtowerDialog {
+  .el-select {
+    width: 100%;
+  }
+  .el-input-number {
+    width: 100%;
+  }
+  .el-input-number .el-input__inner {
+    text-align: left;
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/components/videoCapture.vue

@@ -1,30 +1,37 @@
 <template>
-  <el-dialog
-    class="setimgDialog"
-    title="视频采集参数"
-    :visible.sync="isShow"
-    :close-on-click-modal="false"
-    width="60%"
-    @close="handleclose"
+  <el-tabs
+    v-model="activeName"
+    @tab-click="handleClick"
+    type="card"
+    v-loading="loading"
   >
-    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
-      <el-tab-pane label="查询实际参数" name="1">
+    <el-tab-pane label="查询实际参数" name="1">
+      <div class="captureBoxVideo">
         <div class="flexnr">
           <div class="wt80">通道:</div>
-          <el-select v-model="selaccess" placeholder="请选择" class="mr20">
+          <el-select
+            v-model="selaccess"
+            placeholder="请选择"
+            class="mr20"
+            @change="clearform"
+          >
             <el-option
               v-for="item in accesslist"
               :key="item.channelid"
-              :label="item.channelname"
+              :label="
+                item.alias !== null && item.alias !== ''
+                  ? item.alias
+                  : item.channelname
+              "
               :value="item.channelid"
-            ></el-option>
+            >
+              {{
+                item.alias !== null && item.alias !== ""
+                  ? item.alias
+                  : item.channelname
+              }}
+            </el-option>
           </el-select>
-          <el-button
-            :loading="searchloading"
-            type="primary"
-            @click="inquirebtn()"
-            >查询</el-button
-          >
         </div>
         <div class="flexno bt30">
           <div class="wt80">视频分辨率:</div>
@@ -36,9 +43,10 @@
             <el-option
               v-for="item in ratiolist"
               :key="item.id"
-              :label="item.name"
+              :label="item.id + '  (' + item.name + ')'"
               :value="item.id"
-            ></el-option>
+            >
+            </el-option>
           </el-select>
         </div>
         <div class="flexno bt30">
@@ -59,13 +67,30 @@
             <template slot="append">s (秒)</template>
           </el-input>
         </div>
-      </el-tab-pane>
-      <el-tab-pane label="设置参数" name="2">
+        <!-- <el-button
+          class="searchImage"
+          :loading="searchloading"
+          type="primary"
+          @click="inquirebtn()"
+          >查询</el-button
+        > -->
+        <el-button
+          class="searchImage"
+          :loading="searchloading"
+          type="primary"
+          @click="videoSearch()"
+          >查询</el-button
+        >
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="设置参数" name="2">
+      <div class="captureBoxVideo">
         <el-form
           :model="setForm"
           :rules="rules"
           ref="setForm"
           label-width="120px"
+          class="captureForm"
         >
           <el-form-item label="通道" prop="channelId">
             <el-select
@@ -76,9 +101,19 @@
               <el-option
                 v-for="item in accesslist"
                 :key="item.channelid"
-                :label="item.channelname"
+                :label="
+                  item.alias !== null && item.alias !== ''
+                    ? item.alias
+                    : item.channelname
+                "
                 :value="item.channelid"
-              ></el-option>
+              >
+                {{
+                  item.alias !== null && item.alias !== ""
+                    ? item.alias
+                    : item.channelname
+                }}
+              </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="视频分辨率" prop="videoFormat">
@@ -90,7 +125,7 @@
               <el-option
                 v-for="item in ratiolist"
                 :key="item.id"
-                :label="item.name"
+                :label="item.id + '  (' + item.name + ')'"
                 :value="item.id"
               ></el-option>
             </el-select>
@@ -100,6 +135,7 @@
               v-model="setForm.preset"
               :min="1"
               :max="255"
+              :disabled="true"
             ></el-input-number>
           </el-form-item>
           <el-form-item label="录制时长 s(秒)" prop="videoTime">
@@ -110,14 +146,20 @@
             ></el-input-number>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="submitbtn('setForm')"
+            <!-- <el-button type="primary" @click="submitbtn('setForm')"
+              >确认</el-button
+            > -->
+            <el-button
+              type="primary"
+              @click="videoSet('setForm')"
+              :loading="setloading"
               >确认</el-button
             >
           </el-form-item>
         </el-form>
-      </el-tab-pane>
-    </el-tabs>
-  </el-dialog>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 <script>
 import {
@@ -126,6 +168,8 @@ import {
   setVideoParamApi,
   getVideoParamnrApi,
   getResolutionRatio,
+  setTermCamera,
+  getTermCameraRequest,
 } from "@/utils/api/index";
 export default {
   data() {
@@ -133,12 +177,37 @@ export default {
       loading: false,
       isShow: false,
       searchloading: false,
+      setloading: false,
       activeName: "1", //选项卡
       accesslist: [], //通道选择器
-      ratiolist: [], //分辨率
+      ratiolist: [],
+      hnratiolist: [
+        {
+          id: 1,
+          name: "480P",
+        },
+        {
+          id: 2,
+          name: "720p",
+        },
+        {
+          id: 3,
+          name: "1080P",
+        },
+        {
+          id: 4,
+          name: "QVGA",
+        },
+        {
+          id: 5,
+          name: "VGA",
+        },
+      ], //分辨率
       selaccess: "", //选中的通道
       capturenr: {}, //查询后的内容
-      setForm: {}, //设置参数
+      setForm: {
+        preset: 255,
+      }, //设置参数
       rules: {
         channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
         videoTime: [
@@ -160,13 +229,16 @@ export default {
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
+      this.capturenr = {};
     },
     //获取设备通道
     getSingleAccess(val) {
-      this.setForm = {};
+      this.setForm = {
+        preset: 255,
+      };
       console.log(val);
       this.seltermid = val.id;
-      this.selcmdId = val.cmdid;
+      this.selcmdId = val.cmdId;
       getChannelListJoggle({ termid: this.seltermid })
         .then((res) => {
           this.accesslist = res.data.list;
@@ -179,8 +251,8 @@ export default {
     getRatio() {
       getResolutionRatio({ type: 1 })
         .then((res) => {
-          this.ratiolist = res.data.list;
-          this.$set(this.setForm, "videoFormat", res.data.list[0].id);
+          this.ratiolist = this.hnratiolist;
+          this.$set(this.setForm, "videoFormat", this.ratiolist[0].id);
         })
         .catch((err) => {});
     },
@@ -252,6 +324,7 @@ export default {
     //确认
     submitbtn(setForm) {
       this.$set(this.setForm, "cmdId", this.selcmdId);
+      // this.$set(this.setForm, "preset", 255);
       // this.$set(this.setForm, "termId", this.seltermid);
       this.$refs[setForm].validate((valid) => {
         if (valid) {
@@ -272,111 +345,190 @@ export default {
         }
       });
     },
-    display() {
-      this.isShow = true;
+    //命令调用videoSearch
+    // --act=videoparams [0xD5] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --preset=[Preset No] format=[Video Format: 1 QVGA 2 VGA 3 480p 4 720P 5 1080P] time=[seconds]
+    videoSearch() {
+      this.searchloading = true;
+      let params = [
+        {
+          name: "act",
+          value: "videoparams",
+        },
+        {
+          name: "flag",
+          value: 0,
+        },
+        {
+          name: "channel",
+          value: this.selaccess,
+        },
+        {
+          name: "preset",
+          value: 255,
+        },
+        {
+          name: "format",
+          value: "",
+        },
+        {
+          name: "time",
+          value: "",
+        },
+      ];
+      this.setTermFn(params);
+    },
+    videoSet(setForm) {
+      console.log(this.setForm);
+      this.setloading = true;
+      let params = [
+        {
+          name: "act",
+          value: "videoparams",
+        },
+        {
+          name: "flag",
+          value: 1,
+        },
+        {
+          name: "channel",
+          value: this.setForm.channelId,
+        },
+        {
+          name: "preset",
+          value: 255,
+        },
+        {
+          name: "format",
+          value: this.setForm.videoFormat,
+        },
+        {
+          name: "time",
+          value: this.setForm.videoTime,
+        },
+      ];
+      this.setTermFn(params);
+    },
+    setTermFn(dataParams) {
+      setTermCamera({
+        termId: this.seltermid,
+        list: dataParams,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+          //this.getinfo1();
+
+          clearInterval(this.timer);
+          this.timer = window.setInterval(() => {
+            this.getinfo();
+            this.i++;
+          }, 1000);
+          // this.timer = setInterval(() => {
+          //   this.getinfo();
+          //   this.i++;
+          // }, 1000);
+        })
+        .catch((err) => {});
     },
-    hide() {
-      this.isShow = false;
+    getinfo() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          if (res.data.success == 1) {
+            window.clearInterval(this.timer);
+            this.timer = null;
+            this.i = 0;
+            console.log("终止轮询");
+            // && res.data.result == 255
+            this.searchloading = false;
+            this.setloading = false;
+            console.log(JSON.parse(res.data.data));
+            this.capturenr = JSON.parse(res.data.data);
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "信息已更新",
+              type: "success",
+            });
+          } else if (this.i > 9) {
+            window.clearInterval(this.timer);
+            this.timer = null;
+            this.i = 0;
+            this.searchloading = false;
+            this.setloading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "暂未获取到信息，请稍后再试！！",
+              type: "warning",
+            });
+          }
+        })
+        .catch();
     },
-    handleclose() {
+    clearform() {
+      console.log("清除其他数据");
+      this.capturenr = {};
+      this.setForm = {};
       this.searchloading = false;
-      this.i = 0;
-      clearInterval(this.timer);
-      this.timer = null;
+      this.setloading = false;
+    },
+    clearData() {
+      this.capturenr = {};
+      this.setForm = {};
+      this.searchloading = false;
+      this.setloading = false;
     },
   },
 };
 </script>
 <style lang="less">
-.setimgDialog {
-  .el-tabs__content {
-    height: 400px;
-    overflow: auto;
-    .el-tab-pane {
-      height: calc(100% - 16px);
+.captureBoxVideo {
+  width: 400px;
+  margin: 0 auto;
+  margin-top: 24px;
+  .flexnr {
+    display: flex;
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 18px;
+    .wt80 {
+      text-align: right;
+      float: left;
+      font-size: 14px;
+      color: #606266;
+      margin: 0 12px 0 0;
+      box-sizing: border-box;
+      width: 100px;
+      display: block;
+    }
+    .mr20 {
+      flex: 1;
     }
   }
-  .flexonly {
-    display: flex;
-    flex-wrap: wrap;
+  .searchImage {
+    margin-left: 110px;
   }
   .flexno {
     display: flex;
-    margin-top: 24px;
-    padding: 0px 8px;
-    align-items: center;
-  }
-  .flexnr {
-    display: flex;
-    align-items: center;
-    margin-top: 16px;
-    padding: 0px 8px;
-  }
-  .mt10 {
-    margin-bottom: 10px;
-  }
-  .mr10 {
-    margin-right: 10px;
-  }
-  .w8 {
-    width: 8%;
-  }
-  .wt80 {
-    width: 80px;
-  }
-  .wt280 {
-    width: 280px;
-  }
-  .w80 {
-    width: 90%;
-    overflow-y: auto;
-    height: 300px;
-  }
-  .mr20 {
-    margin-right: 20px;
-  }
-  .bt30 {
-    margin-bottom: 30px;
-  }
-  .deviceTable {
-    padding: 16px 8px 0 8px;
-    height: calc(100% - 16px);
-    .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;
-        }
-      }
+    height: 32px;
+    line-height: 32px;
+    margin-bottom: 18px;
+    .wt80 {
+      text-align: right;
+      float: left;
+      font-size: 14px;
+      color: #606266;
+      margin: 0 12px 0 0;
+      box-sizing: border-box;
+      width: 100px;
+      display: block;
     }
-  }
-}
-.setRoadDialog {
-  .el-dialog__body {
-    height: 400px;
-    overflow: auto;
-    .el-form {
-      height: 100%;
-      //background: #fcc;
+    .wt280 {
+      flex: 1;
     }
-    .setTimeTd {
-      h3 {
-        margin: 8px 0px;
-        font-size: 16px;
-        line-height: 24px;
-      }
-      .timename {
-        margin: 8px 0px;
-      }
+  }
+  .captureForm {
+    .el-form-item__content {
     }
   }
 }

src/views/management/monitoringEquipment/photographicDevice/components/videoCapturebak.vue

@@ -0,0 +1,383 @@
+<template>
+  <el-dialog
+    class="setimgDialog"
+    title="视频采集参数"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="60%"
+    @close="handleclose"
+  >
+    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
+      <el-tab-pane label="查询实际参数" name="1">
+        <div class="flexnr">
+          <div class="wt80">通道:</div>
+          <el-select v-model="selaccess" placeholder="请选择" class="mr20">
+            <el-option
+              v-for="item in accesslist"
+              :key="item.channelid"
+              :label="item.channelname"
+              :value="item.channelid"
+            ></el-option>
+          </el-select>
+          <el-button
+            :loading="searchloading"
+            type="primary"
+            @click="inquirebtn()"
+            >查询</el-button
+          >
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">视频分辨率:</div>
+          <el-select
+            v-model="capturenr.videoFormat"
+            class="wt280"
+            :disabled="true"
+          >
+            <el-option
+              v-for="item in ratiolist"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">预置位:</div>
+          <el-input
+            v-model="capturenr.preset"
+            :disabled="true"
+            class="wt280"
+          ></el-input>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">录制时长:</div>
+          <el-input
+            v-model="capturenr.videoTime"
+            :disabled="true"
+            class="wt280"
+          >
+            <template slot="append">s (秒)</template>
+          </el-input>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="设置参数" name="2">
+        <el-form
+          :model="setForm"
+          :rules="rules"
+          ref="setForm"
+          label-width="120px"
+        >
+          <el-form-item label="通道" prop="channelId">
+            <el-select
+              v-model="setForm.channelId"
+              placeholder="请选择"
+              class="mr20"
+            >
+              <el-option
+                v-for="item in accesslist"
+                :key="item.channelid"
+                :label="item.channelname"
+                :value="item.channelid"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="视频分辨率" prop="videoFormat">
+            <el-select
+              v-model="setForm.videoFormat"
+              placeholder="请选择"
+              class="mr20"
+            >
+              <el-option
+                v-for="item in ratiolist"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="预置位" prop="preset">
+            <el-input-number
+              v-model="setForm.preset"
+              :min="1"
+              :max="255"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="录制时长 s(秒)" prop="videoTime">
+            <el-input-number
+              v-model="setForm.videoTime"
+              :min="1"
+              :max="100"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="submitbtn('setForm')"
+              >确认</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+  </el-dialog>
+</template>
+<script>
+import {
+  getChannelListJoggle,
+  getVideoParamApi,
+  setVideoParamApi,
+  getVideoParamnrApi,
+  getResolutionRatio,
+} from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      loading: false,
+      isShow: false,
+      searchloading: false,
+      activeName: "1", //选项卡
+      accesslist: [], //通道选择器
+      ratiolist: [], //分辨率
+      selaccess: "", //选中的通道
+      capturenr: {}, //查询后的内容
+      setForm: {}, //设置参数
+      rules: {
+        channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
+        videoTime: [
+          { required: true, message: "请输入录制时长", trigger: "blur" },
+        ],
+        preset: [{ required: true, message: "请输入预置位", trigger: "blur" }],
+        videoFormat: [
+          { required: true, message: "请选择视频分辨率", trigger: "blur" },
+        ],
+      },
+      timer: null,
+      i: 0,
+      seltermid: "", //装置id
+      selcmdId: "", //cmdId
+      requestId: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    //获取设备通道
+    getSingleAccess(val) {
+      this.setForm = {};
+      console.log(val);
+      this.seltermid = val.id;
+      this.selcmdId = val.cmdId;
+      getChannelListJoggle({ termid: this.seltermid })
+        .then((res) => {
+          this.accesslist = res.data.list;
+          this.selaccess = res.data.list[0].channelid;
+          this.$set(this.setForm, "channelId", res.data.list[0].channelid);
+        })
+        .catch((err) => {});
+    },
+    //获取分辨率
+    getRatio() {
+      getResolutionRatio({ type: 1 })
+        .then((res) => {
+          this.ratiolist = res.data.list;
+          this.$set(this.setForm, "videoFormat", res.data.list[0].id);
+        })
+        .catch((err) => {});
+    },
+    //查询触发
+    inquirebtn() {
+      this.loading = true;
+      this.searchloading = true;
+      getVideoParamApi({
+        channelId: this.selaccess,
+        termId: this.seltermid,
+      })
+        .then((res) => {
+          if (res.code == 200) {
+            this.requestId = res.data.requestId;
+            this.inquirenr();
+            this.timer = window.setInterval(() => {
+              this.inquirenr();
+              this.i++;
+            }, 1000);
+          } else {
+            this.$message.error(res.code.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    //查询接口
+    inquirenr() {
+      getVideoParamnrApi({
+        // channelId: this.selaccess,
+        // termId: this.seltermid,
+        requestId: this.requestId,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 200) {
+            this.capturenr = res.data;
+            if (res.data.isNew == true) {
+              this.searchloading = false;
+              this.i = 0;
+
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "查询已更新",
+                type: "success",
+              });
+              clearInterval(this.timer);
+              this.timer = null;
+            } else if (this.i > 9) {
+              this.searchloading = false;
+              this.i = 0;
+
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "暂无响应，请稍后再试！",
+                type: "warning",
+              });
+
+              clearInterval(this.timer);
+              this.timer = null;
+            }
+          } else {
+            this.$message.error(res.code.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    //确认
+    submitbtn(setForm) {
+      this.$set(this.setForm, "cmdId", this.selcmdId);
+      // this.$set(this.setForm, "termId", this.seltermid);
+      this.$refs[setForm].validate((valid) => {
+        if (valid) {
+          setVideoParamApi(this.setForm)
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message.success("设置成功");
+                this.isShow = false;
+              } else {
+                this.$message.error(res.code.msg);
+              }
+            })
+            .catch((err) => {
+              this.$message.error("设置失败");
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.searchloading = false;
+      this.i = 0;
+      clearInterval(this.timer);
+      this.timer = null;
+    },
+  },
+};
+</script>
+<style lang="less">
+.setimgDialog {
+  .el-tabs__content {
+    height: 400px;
+    overflow: auto;
+    .el-tab-pane {
+      height: calc(100% - 16px);
+    }
+  }
+  .flexonly {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .flexno {
+    display: flex;
+    margin-top: 24px;
+    padding: 0px 8px;
+    align-items: center;
+  }
+  .flexnr {
+    display: flex;
+    align-items: center;
+    margin-top: 16px;
+    padding: 0px 8px;
+  }
+  .mt10 {
+    margin-bottom: 10px;
+  }
+  .mr10 {
+    margin-right: 10px;
+  }
+  .w8 {
+    width: 8%;
+  }
+  .wt80 {
+    width: 80px;
+  }
+  .wt280 {
+    width: 280px;
+  }
+  .w80 {
+    width: 90%;
+    overflow-y: auto;
+    height: 300px;
+  }
+  .mr20 {
+    margin-right: 20px;
+  }
+  .bt30 {
+    margin-bottom: 30px;
+  }
+  .deviceTable {
+    padding: 16px 8px 0 8px;
+    height: calc(100% - 16px);
+    .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;
+        }
+      }
+    }
+  }
+}
+.setRoadDialog {
+  .el-dialog__body {
+    height: 400px;
+    overflow: auto;
+    .el-form {
+      height: 100%;
+      //background: #fcc;
+    }
+    .setTimeTd {
+      h3 {
+        margin: 8px 0px;
+        font-size: 16px;
+        line-height: 24px;
+      }
+      .timename {
+        margin: 8px 0px;
+      }
+    }
+  }
+}
+</style>

src/views/management/monitoringEquipment/photographicDevice/components/workStatus.vue

@@ -0,0 +1,226 @@
+<template>
+  <el-dialog
+    class="workStatus"
+    title="工作状态"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1280px"
+  >
+    <el-form :inline="true" :model="formdata" class="demo-form-inline">
+      <el-form-item label="开始日期">
+        <el-date-picker
+          v-model="formdata.starttime"
+          type="datetime"
+          placeholder="开始日期"
+          value-format="timestamp"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束日期">
+        <el-date-picker
+          v-model="formdata.endtime"
+          type="datetime"
+          default-time="23:59:59"
+          placeholder="结束日期"
+          value-format="timestamp"
+          class="ml10"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary">导出</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="listData"
+      stripe
+      tooltip-effect="dark"
+      style="width: 100%"
+      v-loading="loading"
+    >
+      <template slot="empty">
+        <el-empty :image-size="160" description="暂无数据"></el-empty>
+      </template>
+      <el-table-column min-width="45" label="序号">
+        <template slot-scope="scope">
+          <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="采集时间"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备名称"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="设备编号"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="电源电压"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="工作温度"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="电池电量"
+        min-width="80"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="浮充状态"
+        min-width="100"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{
+          scope.row.name == 0 ? "充电" : "放电"
+        }}</template>
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="工作总时间"
+        min-width="120"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="连续工作时间"
+        min-width="100"
+        show-overflow-tooltip
+      ></el-table-column>
+      <el-table-column
+        prop="name"
+        label="网络连接状态"
+        min-width="100"
+        show-overflow-tooltip
+      >
+        <template slot-scope="scope">{{
+          scope.row.name == 0 ? "已连接" : "未连接"
+        }}</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 slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getLineListJoggle } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      isShow: false,
+      formdata: {},
+      listData: [
+        {
+          name: "测试",
+        },
+        {
+          name: "测试2",
+        },
+      ],
+      loading: false,
+      seltermid: "", //装置id
+      selcmdId: "", //cmdId
+      requestId: "",
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  mounted() {},
+  methods: {
+    //查询
+    onSubmit() {
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+      this.getlistnr();
+    },
+    //获取数据
+    getlistnr(val) {
+      console.log(val);
+      this.seltermid = val.id;
+      this.selcmdId = val.cmdid;
+      this.loading = true;
+      getLineListJoggle({
+        pageindex: this.page,
+        pagesize: this.pageSize,
+      }).then((res) => {
+        this.listData = res.data.list;
+        this.total = res.data.total;
+        this.loading = false;
+      });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getlistnr();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getlistnr();
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<<<<<<< HEAD
+<style lang="less">
+.workStatus {
+  .pageNation {
+    justify-content: flex-start;
+    margin-top: 16px;
+    .el-pagination {
+      padding: 0px;
+      .el-select .el-input {
+        margin-left: 0px;
+      }
+    }
+  }
+}
+</style>
+=======
+<style lang="less" scoped></style>
+>>>>>>> hn1.0

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

@@ -3,11 +3,22 @@
     <div class="photoBox">
       <div class="photoGraphicBtnGroup">
         <h4>拍照装置管理</h4>
-        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
-          >新增</el-button
-        >
+        <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">
+      <div class="searchBox">
         <el-form :inline="true" :model="formdata" class="demo-form-inline">
           <el-form-item label="电压等级" class="dybox">
             <el-select v-model="formdata.dyId" @change="getSearchxl">
@@ -43,14 +54,29 @@
               ></el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="是否在线" class="isonLineClass">
+            <el-select v-model="formdata.isonline" filterable>
+              <el-option
+                v-for="item in onlineOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item>
-            <el-input v-model="formdata.searchnr" placeholder="请输入线路/杆塔/设备编号"></el-input>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/设备编号"
+              clearable
+            ></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button type="primary" @click="onReset">重置</el-button>
           </el-form-item>
         </el-form>
-      </div> -->
+      </div>
       <div class="photoGraphicTable">
         <el-table
           ref="multipleTable"
@@ -62,20 +88,26 @@
           @selection-change="handleSelectionChange"
           @row-click="handleRowClick"
           v-loading="loading"
+          highlight-current-row
+          :row-key="getRowKeys"
         >
-          <!-- <el-table-column
-            prop="cmdid"
-            label="电压等级"
-            show-overflow-tooltip
-            
-          >
-          </el-table-column> -->
+          <el-table-column prop="dyName" label="电压等级" show-overflow-tooltip>
+          </el-table-column>
+
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
           <el-table-column
             prop="lineName"
             label="线路名称"
             show-overflow-tooltip
             min-width="120"
           >
+            <template slot-scope="scope">
+              <el-link @click.native.stop="handleLine(scope.row)">{{
+                scope.row.lineName
+              }}</el-link>
+            </template>
           </el-table-column>
           <el-table-column
             prop="towerName"
@@ -83,6 +115,11 @@
             show-overflow-tooltip
             min-width="150"
           >
+            <template slot-scope="scope">
+              <el-link @click.native.stop="handleTower(scope.row)">{{
+                scope.row.towerName
+              }}</el-link>
+            </template>
           </el-table-column>
           <el-table-column
             prop="equipName"
@@ -98,57 +135,80 @@
             min-width="150"
           >
           </el-table-column>
-          <!-- <el-table-column
-            prop="cmdid"
-            label="SIM卡号"
+
+          <el-table-column
+            prop="protocolName"
+            label="规约名称"
             show-overflow-tooltip
-            
-          >
-          </el-table-column>
+            min-width="90"
+          />
           <el-table-column
-            prop="cmdid"
-            label="网络类型"
+            prop="isonline"
+            label="是否在线"
             show-overflow-tooltip
-            
           >
+            <template slot-scope="scope">
+              {{ scope.row.isonline ? "在线" : "离线" }}</template
+            >
           </el-table-column>
           <el-table-column
-            prop="cmdid"
-            label="状态"
+            prop="hasPan"
+            label="是否带云台"
             show-overflow-tooltip
-            
           >
+            <template slot-scope="scope">
+              {{ scope.row.hasPan == 1 ? "是" : "否" }}</template
+            >
+          </el-table-column>
+
+          <el-table-column prop="sim" label="SIM卡号" show-overflow-tooltip>
           </el-table-column>
           <el-table-column
-            prop="cmdid"
-            label="装置型号"
+            prop="netType"
+            label="网络类型"
             show-overflow-tooltip
-            
           >
+            <template slot-scope="scope">
+              <span v-if="scope.row.netType == 1"> 移动</span>
+              <span v-if="scope.row.netType == 2"> 联通</span>
+              <span v-if="scope.row.netType == 3"> 电信</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="model" label="装置型号" show-overflow-tooltip>
           </el-table-column>
           <el-table-column
-            prop="cmdid"
+            prop="bsManufacturer"
             label="装置厂家"
             show-overflow-tooltip
-            
           >
           </el-table-column>
+
           <el-table-column
-            prop="cmdid"
-            label="规约版本"
+            prop="workingDate"
+            label="投运日期"
             show-overflow-tooltip
-            
           >
+            <template slot-scope="scope">
+              {{
+                scope.row.workingDate == null
+                  ? ""
+                  : $moment(scope.row.workingDate).format("yy-MM-DD")
+              }}</template
+            >
           </el-table-column>
           <el-table-column
-            prop="cmdid"
-            label="投运日期"
+            prop="status"
+            label="装置状态"
             show-overflow-tooltip
-            
-            :formatter="dateFormat"
+            v-if="roleUser != 2"
           >
-          </el-table-column> -->
-          <el-table-column
+            <template slot-scope="scope">
+              {{ scope.row.status == 1 ? "运行中" : "已删除" }}
+            </template>
+          </el-table-column>
+
+          <!-- <el-table-column
             prop="lastHeartbeat"
             label="最后一次心跳时间"
             show-overflow-tooltip
@@ -199,41 +259,43 @@
             show-overflow-tooltip
             min-width="90"
           >
-          </el-table-column>
-          <!-- <el-table-column
-            prop="cmdid"
-            label=" 连续工作时间
-          剩余运行内存
-          剩余存储内存"
-            show-overflow-tooltip
-            
-          >
-          </el-table-column> -->
-
-          <!-- <el-table-column
-            prop="updateTime"
-            label="修改时间"
-            :show-overflow-tooltip="true"
-            :formatter="dateFormat"
-            
-          >
-          </el-table-column> -->
-
-          <!-- <el-table-column
-            prop="createTime"
-            label="创建时间"
-            :show-overflow-tooltip="true"
-            :formatter="dateFormat"
-          >
           </el-table-column> -->
 
           <el-table-column
             fixed="right"
             label="操作"
-            width="580"
+            width="340"
             v-if="roleUser != 2"
           >
             <template slot-scope="scope">
+              <el-dropdown
+                class="dropgps"
+                trigger="click"
+                @command="
+                  (command) => {
+                    handleSearchCommand(command, scope.row);
+                  }
+                "
+              >
+                <span class="el-dropdown-link">
+                  数据查询<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="info">基本信息</el-dropdown-item>
+                  <el-dropdown-item command="workStatus"
+                    >工作状态</el-dropdown-item
+                  >
+                  <el-dropdown-item command="runStatus"
+                    >运行状态</el-dropdown-item
+                  >
+                  <el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <el-button
+                @click.native.stop="handleParameterSet(scope.row)"
+                type="text"
+                >参数配置</el-button
+              >
               <el-button
                 @click.native.stop="handleRevisePhoto(scope.row)"
                 type="text"
@@ -244,7 +306,7 @@
                 @click.native.stop="handlepicture(scope.row)"
                 >图片标记</el-button
               >
-              <el-button
+              <!-- <el-button
                 type="text"
                 @click.native.stop="handleDeviceReset(scope.row)"
                 >装置复位</el-button
@@ -263,7 +325,7 @@
                 type="text"
                 @click.native.stop="handleShowGPS(scope.row)"
                 >获取GPS位置</el-button
-              >
+              > -->
               <!-- <el-select
                 class="dropgps"
                 v-model="gpsvalue"
@@ -279,7 +341,7 @@
                 >
                 </el-option>
               </el-select> -->
-              <el-dropdown
+              <!-- <el-dropdown
                 class="dropgps"
                 trigger="click"
                 @command="
@@ -295,16 +357,24 @@
                   <el-dropdown-item command="open">开启GPS</el-dropdown-item>
                   <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
                 </el-dropdown-menu>
-              </el-dropdown>
+              </el-dropdown> -->
               <el-button
                 type="text"
                 class="deleteText"
                 @click.native.stop="handleDelete(scope.row)"
-                >删除</el-button
+                v-if="scope.row.status == 1"
+                >关闭</el-button
+              >
+              <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(scope.row)"
+                v-if="scope.row.status == 0"
+                >打开</el-button
               >
             </template>
           </el-table-column>
-          <el-table-column fixed="right" label="操作" width="380" v-else>
+          <el-table-column fixed="right" label="操作" width="180" v-else>
             <template slot-scope="scope">
               <el-button
                 @click.native.stop="handleRevisePhoto(scope.row)"
@@ -317,7 +387,7 @@
                 >图片标记</el-button
               >
 
-              <el-button
+              <!-- <el-button
                 type="text"
                 @click.native.stop="handleShowGPS(scope.row)"
                 >获取GPS位置</el-button
@@ -339,7 +409,7 @@
                   <el-dropdown-item command="open">开启GPS</el-dropdown-item>
                   <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
                 </el-dropdown-menu>
-              </el-dropdown>
+              </el-dropdown> -->
               <el-button
                 type="text"
                 class="deleteText"
@@ -367,44 +437,73 @@
       :photoDialogTitle="photoDialogTitle"
       ref="addPhotoDialogref"
     ></addPhotoDialog>
-    <imageCapture ref="imageCaptureref"></imageCapture>
-    <videoCapture ref="videoCaptureref"></videoCapture>
+    <imageCapturebak ref="imageCaptureref"></imageCapturebak>
+    <videoCapturebak ref="videoCaptureref"></videoCapturebak>
     <pictureTags ref="picturetagsref"></pictureTags>
     <gps-position ref="gpsdialog_ref"></gps-position>
+    <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
+    <baseInfor ref="baseInfor_ref"></baseInfor>
+    <workStatus ref="workStatus_ref"></workStatus>
+    <runStatus ref="runStatus_ref"></runStatus>
+    <gpsSite ref="gpsSite_ref"></gpsSite>
+    <!-- 新增线路 -->
+    <add-lineDialog ref="addlineDialogref"></add-lineDialog>
+    <towerDialog ref="towerDialogref"></towerDialog>
   </div>
 </template>
 <script>
 import {
   getTerminalJoggle,
   deleteTerminalJoggle,
-  resetTerminalApi,
-  setTermGPSJoggle,
+  // resetTerminalApi,
+  // setTermGPSJoggle,
   getSearchInfo,
+  getTerminalListExcel,
 } from "@/utils/api/index";
 import moment from "moment";
 import addPhotoDialog from "./components/addPhotoDialog.vue";
-import imageCapture from "./components/imageCapture.vue";
-import videoCapture from "./components/videoCapture.vue";
+import imageCapturebak from "./components/imageCapturebak.vue";
+import videoCapturebak from "./components/videoCapturebak.vue";
 import pictureTags from "./components/pictureTags.vue";
 import gpsPosition from "./components/gpsPosition.vue";
+import parameterSetDialog from "./components/parameterSetDialog.vue";
+import baseInfor from "./components/baseInfor.vue";
+import workStatus from "./components/workStatus.vue";
+import runStatus from "./components/runStatus.vue";
+import gpsSite from "./components/gpsSite.vue";
+import addLineDialog from "./components/addLineDialog.vue";
+import towerDialog from "./components/towerDialog.vue";
 export default {
   components: {
     addPhotoDialog,
-    imageCapture,
-    videoCapture,
+    imageCapturebak,
+    videoCapturebak,
     pictureTags,
     gpsPosition,
+    parameterSetDialog,
+    baseInfor,
+    workStatus,
+    runStatus,
+    gpsSite,
+    addLineDialog,
+    towerDialog,
   },
   data() {
     return {
-      dyOptions: [{ id: 0, name: "全部" }], //电压数据
-      xlOptions: [{ id: 0, name: "全部" }], //线路数据
-      gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      onlineOptions: [
+        { id: -1, name: "全部" },
+        { id: 1, name: "在线" },
+        { id: 0, name: "离线" },
+      ],
       formdata: {
-        dyId: 0,
-        lineId: 0,
-        towerId: 0,
-        searchnr: "",
+        dyId: -1,
+        lineId: -1,
+        towerId: -1,
+        search: "",
+        isonline: -1,
       },
       roleUser: "",
       terminalTableData: [], //表格数据
@@ -432,16 +531,48 @@ export default {
     };
   },
   created() {
-    this.terminalList();
-    this.getSearchdy();
     this.roleUser = localStorage.getItem("role");
     console.log(this.roleUser);
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+    console.log(this.$route.query);
+    this.formdata.search = this.$route.query.name;
+    console.log(this.formdata.search);
+  },
+  mounted() {
+    this.getSearchdy();
+    this.terminalList();
   },
   methods: {
+    getRowKeys(row) {
+      return row.id;
+    },
+    //点击线路跳转
+    handleLineLink(val) {
+      console.log(val);
+      this.$router.push({
+        path: "/lineInformation",
+        query: { lineName: val.lineName, name: val.towerName },
+      });
+    },
+    //点击杆塔跳转
+    handletowerLink(val) {
+      console.log(val);
+      this.$router.push({
+        path: "/towerInformation",
+        query: { lineName: val.lineName, name: val.towerName },
+      });
+    },
     //获取电压信息
     getSearchdy() {
       getSearchInfo({ type: 1 })
         .then((res) => {
+          this.dyOptions = [{ id: -1, name: "全部" }];
           this.dyOptions = this.dyOptions.concat(res.data.list);
           this.formdata.dyId = this.dyOptions[0].id;
           this.getSearchxl();
@@ -452,7 +583,7 @@ export default {
     getSearchxl() {
       getSearchInfo({ type: 2, id: this.formdata.dyId })
         .then((res) => {
-          this.xlOptions = [{ id: 0, name: "全部" }];
+          this.xlOptions = [{ id: -1, name: "全部" }];
           this.xlOptions = this.xlOptions.concat(res.data.list);
           this.formdata.lineId = this.xlOptions[0].id;
           this.getSearchgt();
@@ -463,23 +594,36 @@ export default {
     getSearchgt() {
       getSearchInfo({ type: 3, id: this.formdata.lineId })
         .then((res) => {
-          this.gtOptions = [{ id: 0, name: "全部" }];
+          this.gtOptions = [{ id: -1, name: "全部" }];
           this.gtOptions = this.gtOptions.concat(res.data.list);
           this.formdata.towerId = this.gtOptions[0].id;
         })
         .catch((err) => {});
     },
+
     //查询
     onSubmit() {
+      this.page = 1;
+      this.terminalList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {
+        isonline: -1,
+      };
+
+      this.getSearchdy();
+      this.page = 1;
+      this.pageSize = 20;
+
       this.terminalList();
     },
     ////获取拍照装置列表数据
     terminalList() {
       this.loading = true;
-      getTerminalJoggle({
-        pageindex: this.page,
-        pagesize: this.pageSize,
-      })
+      this.$set(this.formdata, "pageindex", this.page);
+      this.$set(this.formdata, "pagesize", this.pageSize);
+      getTerminalJoggle(this.formdata)
         .then((res) => {
           console.log(res);
           this.terminalTableData = res.data.list;
@@ -512,6 +656,18 @@ export default {
       this.$refs.addPhotoDialogref.display();
       this.$refs.addPhotoDialogref.getdataform(null);
     },
+    //导出
+    handleExport() {
+      window.location.href = "/api/api/getTerminalListExcel";
+    },
+    handleLine(data) {
+      this.$refs.addlineDialogref.display();
+      this.$refs.addlineDialogref.getdataform(data);
+    },
+    handleTower(data) {
+      this.$refs.towerDialogref.display();
+      this.$refs.towerDialogref.getdataform(data);
+    },
     //handleResive 修改线路数据
     handleRevisePhoto(data) {
       this.photoDialogTitle = "修改";
@@ -519,107 +675,35 @@ export default {
       this.$refs.addPhotoDialogref.getdataform(data);
       console.log(data);
     },
-    //装置复位
-    handleDeviceReset(data) {
-      this.$confirm("此操作将复位装置, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          resetTerminalApi({ cmId: data.cmdId })
-            .then((res) => {
-              if (res.code == 200) {
-                this.$message({
-                  duration: 1500,
-                  showClose: true,
-                  message: "装置已复位",
-                  type: "success",
-                });
-              } else {
-                this.$message({
-                  duration: 1500,
-                  showClose: true,
-                  message: res.msg,
-                  type: "error",
-                });
-              }
-            })
-            .catch((err) => {});
-        })
-        .catch(() => {
-          // this.$message({
-          //   duration: 1500,
-          //   showClose: true,
-          //   type: "info",
-          //   message: "已取消删除",
-          // });
-        });
-    },
-    //获取GPS位置
-    handleShowGPS(data) {
-      this.$refs.gpsdialog_ref.display();
-      this.$refs.gpsdialog_ref.getgpsData(data);
-      console.log(data);
-    },
 
-    //切换gps开启关闭
-    changeGPS(val, row) {
-      console.log(val, row);
-      setTermGPSJoggle({ gpsstatus: val, cmdId: row.cmdId })
-        .then((res) => {
-          console.log(res);
-          if (val == 0) {
-            this.$message({
-              duration: 1500,
-              message: "关闭GPS",
-              type: "success",
-              showClose: true,
-            });
-          } else {
-            this.$message({
-              duration: 1500,
-              message: "成功开启GPS",
-              type: "success",
-              showClose: true,
-            });
-          }
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
+    //线缆绘制
+    handlepicture(data) {
+      console.log(data);
+      this.$refs.picturetagsref.display(data);
     },
-    handleCommand(command, row) {
+    //数据查询
+    handleSearchCommand(command, row) {
       console.log(command, row);
       switch (command) {
-        case "open": //开启
-          this.changeGPS(1, row);
+        case "info":
+          this.$refs.baseInfor_ref.display();
+          break;
+        case "workStatus":
+          this.$refs.workStatus_ref.display();
           break;
-        case "close": //关闭
-          this.changeGPS(0, row);
+        case "runStatus":
+          this.$refs.runStatus_ref.display();
+          break;
+        case "GPS":
+          this.$refs.gpsSite_ref.display();
+          break;
+        default:
           break;
       }
     },
-    //
-    // gpsChange(val) {
-    //   console.log(val);
-    // },
-    //图像采集参数
-    handleImageCapture(data) {
-      this.$refs.imageCaptureref.display();
-      this.$refs.imageCaptureref.getSingleAccess(data);
-      this.$refs.imageCaptureref.getRatio();
-    },
-    //视频采集参数
-    handleVideoCapture(data) {
-      this.$refs.videoCaptureref.display();
-      this.$refs.videoCaptureref.getSingleAccess(data);
-      this.$refs.videoCaptureref.getRatio();
-    },
-    //线缆绘制
-    handlepicture(data) {
-      console.log(data);
-      this.$refs.picturetagsref.display(data);
+    //参数配置
+    handleParameterSet(data) {
+      this.$refs.parameterSetref.display(data);
     },
 
     // //新建弹窗handleAddPhoto
@@ -641,7 +725,7 @@ export default {
         termid: data.id,
       });
       console.log(this.deleteArr);
-      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+      this.$confirm("确定要关闭该装置?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
@@ -655,7 +739,7 @@ export default {
           this.$message({
             duration: 1500,
             type: "success",
-            message: "删除成功!",
+            message: "关闭成功!",
             showClose: true,
           });
         })
@@ -683,14 +767,14 @@ export default {
 </script>
 <style lang="less">
 .photoGraphicDevice {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: @color-white;
   .photoBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
     .searchBox {
       .ml10 {
@@ -707,6 +791,11 @@ export default {
             width: 160px;
           }
         }
+        .isonLineClass {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
       }
     }
   }
@@ -715,16 +804,18 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-
+  .searchBox {
+    margin-top: 8px;
+  }
   .photoGraphicTable {
     // margin-top: 16px;
-    margin-top: 36px;
-    height: calc(100% - 70px);
+    //margin-top: 36px;
+    height: calc(100% - 94px);
   }
   .dropgps {
     color: @color-primary;
-    margin-left: 16px;
-    margin-right: 16px;
+    // margin-left: 16px;
+    // margin-right: 16px;
     cursor: pointer;
     font-size: 12px;
     width: 80px;

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

@@ -0,0 +1,807 @@
+<template>
+  <div class="photoGraphicDevice">
+    <div class="photoBox">
+      <div class="photoGraphicBtnGroup">
+        <h4>拍照装置管理</h4>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
+          >新增</el-button
+        >
+      </div>
+      <div class="searchBox">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <el-form-item label="电压等级" class="dybox">
+            <el-select v-model="formdata.dyId" @change="getSearchxl">
+              <el-option
+                v-for="item in dyOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="线路名称" class="xlbox">
+            <el-select
+              v-model="formdata.lineId"
+              @change="getSearchgt"
+              filterable
+            >
+              <el-option
+                v-for="item in xlOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="杆塔名称">
+            <el-select v-model="formdata.towerId" filterable>
+              <el-option
+                v-for="item in gtOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/设备编号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button type="primary" @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="photoGraphicTable">
+        <el-table
+          ref="multipleTable"
+          :data="terminalTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
+          v-loading="loading"
+        >
+          <!-- <el-table-column
+            prop="cmdid"
+            label="电压等级"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column> -->
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column
+            prop="lineName"
+            label="线路名称"
+            show-overflow-tooltip
+            min-width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="towerName"
+            label="杆塔名称"
+            show-overflow-tooltip
+            min-width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="equipName"
+            label="设备名称"
+            show-overflow-tooltip
+            min-width="150"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdId"
+            label="设备编号"
+            show-overflow-tooltip
+            min-width="150"
+          >
+          </el-table-column>
+          <!-- <el-table-column
+            prop="cmdid"
+            label="SIM卡号"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="网络类型"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="状态"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="装置型号"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="装置厂家"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="规约版本"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="投运日期"
+            show-overflow-tooltip
+            
+            :formatter="dateFormat"
+          >
+          </el-table-column> -->
+          <el-table-column
+            prop="lastHeartbeat"
+            label="最后一次心跳时间"
+            show-overflow-tooltip
+            min-width="150"
+          >
+            <template slot-scope="scope">
+              {{
+                scope.row.lastHeartbeat == null || scope.row.lastHeartbeat == 0
+                  ? ""
+                  : $moment(scope.row.lastHeartbeat * 1000).format(
+                      "yy-MM-DD HH:mm:ss"
+                    )
+              }}</template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bootTime"
+            label="装置上次启动时间"
+            show-overflow-tooltip
+            min-width="150"
+          >
+            <template slot-scope="scope"
+              >{{
+                scope.row.bootTime == null
+                  ? ""
+                  : $moment(scope.row.bootTime * 1000).format(
+                      "yy-MM-DD HH:mm:ss"
+                    )
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="电量/电压"
+            show-overflow-tooltip
+            min-width="80"
+            ><template slot-scope="scope"
+              >{{ scope.row.batteryCapacity }} /
+              {{
+                scope.row.batteryVoltage.toFixed(1) == 0.0
+                  ? 0
+                  : scope.row.batteryVoltage.toFixed(1)
+              }}V</template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="signalStrength4g"
+            label="4G信号强度"
+            show-overflow-tooltip
+            min-width="90"
+          >
+          </el-table-column>
+          <!-- <el-table-column
+            prop="cmdid"
+            label=" 连续工作时间
+          剩余运行内存
+          剩余存储内存"
+            show-overflow-tooltip
+            
+          >
+          </el-table-column> -->
+
+          <!-- <el-table-column
+            prop="updateTime"
+            label="修改时间"
+            :show-overflow-tooltip="true"
+            :formatter="dateFormat"
+            
+          >
+          </el-table-column> -->
+
+          <!-- <el-table-column
+            prop="createTime"
+            label="创建时间"
+            :show-overflow-tooltip="true"
+            :formatter="dateFormat"
+          >
+          </el-table-column> -->
+          <el-table-column
+            fixed="right"
+            label="操作"
+            width="520"
+            v-if="roleUser != 2"
+          >
+            <template slot-scope="scope">
+              <el-button
+                @click.native.stop="handleRevisePhoto(scope.row)"
+                type="text"
+                >修改</el-button
+              >
+              <el-button
+                type="text"
+                @click.native.stop="handlepicture(scope.row)"
+                >图片标记</el-button
+              >
+              <el-button
+                type="text"
+                @click.native.stop="handleDeviceReset(scope.row)"
+                >装置复位</el-button
+              >
+              <el-button
+                type="text"
+                @click.native.stop="handleImageCapture(scope.row)"
+                >图像参数</el-button
+              >
+              <el-button
+                type="text"
+                @click.native.stop="handleVideoCapture(scope.row)"
+                >视频参数</el-button
+              >
+              <el-button
+                type="text"
+                @click.native.stop="handleShowGPS(scope.row)"
+                >获取GPS位置</el-button
+              >
+              <!-- <el-select
+                class="dropgps"
+                v-model="gpsvalue"
+                placeholder="请选择"
+                popper-class="gpsdropbox"
+                @change="gpsChange(scope.row)"
+              >
+                <el-option
+                  v-for="item in gpsOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select> -->
+              <el-dropdown
+                class="dropgps"
+                trigger="click"
+                @command="
+                  (command) => {
+                    handleCommand(command, scope.row);
+                  }
+                "
+              >
+                <span class="el-dropdown-link">
+                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
+                  <el-dropdown-item command="open">开启GPS</el-dropdown-item>
+                  <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <!-- <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(scope.row)"
+                >删除</el-button
+              > -->
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="320" v-else>
+            <template slot-scope="scope">
+              <el-button
+                @click.native.stop="handleRevisePhoto(scope.row)"
+                type="text"
+                >修改</el-button
+              >
+              <el-button
+                type="text"
+                @click.native.stop="handlepicture(scope.row)"
+                >图片标记</el-button
+              >
+
+              <el-button
+                type="text"
+                @click.native.stop="handleShowGPS(scope.row)"
+                >获取GPS位置</el-button
+              >
+
+              <el-dropdown
+                class="dropgps"
+                trigger="click"
+                @command="
+                  (command) => {
+                    handleCommand(command, scope.row);
+                  }
+                "
+              >
+                <span class="el-dropdown-link">
+                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
+                  <el-dropdown-item command="open">开启GPS</el-dropdown-item>
+                  <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+              <!-- <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(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>
+    <addPhotoDialog
+      :photoDialogTitle="photoDialogTitle"
+      ref="addPhotoDialogref"
+    ></addPhotoDialog>
+    <imageCapturebak ref="imageCaptureref"></imageCapturebak>
+    <videoCapturebak ref="videoCaptureref"></videoCapturebak>
+    <pictureTags ref="picturetagsref"></pictureTags>
+    <gps-position ref="gpsdialog_ref"></gps-position>
+    <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
+    <baseInfor ref="baseInfor_ref"></baseInfor>
+    <workStatus ref="workStatus_ref"></workStatus>
+    <runStatus ref="runStatus_ref"></runStatus>
+    <gpsSite ref="gpsSite_ref"></gpsSite>
+  </div>
+</template>
+<script>
+import {
+  getTerminalJoggle,
+  deleteTerminalJoggle,
+  resetTerminalApi,
+  setTermGPSJoggle,
+  getSearchInfo,
+} from "@/utils/api/index";
+import moment from "moment";
+import addPhotoDialog from "./components/addPhotoDialog.vue";
+import imageCapturebak from "./components/imageCapturebak.vue";
+import videoCapturebak from "./components/videoCapturebak.vue";
+import pictureTags from "./components/pictureTags.vue";
+import gpsPosition from "./components/gpsPosition.vue";
+import parameterSetDialog from "./components/parameterSetDialog.vue";
+import baseInfor from "./components/baseInfor.vue";
+import workStatus from "./components/workStatus.vue";
+import runStatus from "./components/runStatus.vue";
+import gpsSite from "./components/gpsSite.vue";
+
+export default {
+  components: {
+    addPhotoDialog,
+    imageCapturebak,
+    videoCapturebak,
+    pictureTags,
+    gpsPosition,
+    parameterSetDialog,
+    baseInfor,
+    workStatus,
+    runStatus,
+    gpsSite,
+  },
+  data() {
+    return {
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      formdata: {
+        dyId: -1,
+        lineId: -1,
+        towerId: -1,
+        search: "",
+      },
+      roleUser: "",
+      terminalTableData: [], //表格数据
+      photoDialog: false, //新增弹窗
+      photoDialogTitle: "", //弹窗标题
+      deleteArr: [], //删除数组
+      multipleSelection: [], //当前选中数组
+      formphotoInfo: {}, //弹窗传值
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      loading: true,
+
+      gpsOptions: [
+        {
+          value: "1",
+          label: "GPS关闭",
+        },
+        {
+          value: "2",
+          label: "GPS开启",
+        },
+      ],
+      gpsvalue: "1",
+    };
+  },
+  created() {
+    this.getSearchdy();
+    this.terminalList();
+    this.roleUser = localStorage.getItem("role");
+    console.log(this.roleUser);
+  },
+  methods: {
+    //获取电压信息
+    getSearchdy() {
+      getSearchInfo({ type: 1 })
+        .then((res) => {
+          this.dyOptions = [{ id: -1, name: "全部" }];
+          this.dyOptions = this.dyOptions.concat(res.data.list);
+          this.formdata.dyId = this.dyOptions[0].id;
+          this.getSearchxl();
+        })
+        .catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl() {
+      getSearchInfo({ type: 2, id: this.formdata.dyId })
+        .then((res) => {
+          this.xlOptions = [{ id: -1, name: "全部" }];
+          this.xlOptions = this.xlOptions.concat(res.data.list);
+          this.formdata.lineId = this.xlOptions[0].id;
+          this.getSearchgt();
+        })
+        .catch((err) => {});
+    },
+    //获取杆塔数据
+    getSearchgt() {
+      getSearchInfo({ type: 3, id: this.formdata.lineId })
+        .then((res) => {
+          this.gtOptions = [{ id: -1, name: "全部" }];
+          this.gtOptions = this.gtOptions.concat(res.data.list);
+          this.formdata.towerId = this.gtOptions[0].id;
+        })
+        .catch((err) => {});
+    },
+    //查询
+    onSubmit() {
+      this.terminalList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {};
+      this.getSearchdy();
+      this.page = 1;
+      this.pageSize = 20;
+      this.terminalList();
+    },
+    ////获取拍照装置列表数据
+    terminalList() {
+      this.loading = true;
+      this.$set(this.formdata, "pageindex", this.page);
+      this.$set(this.formdata, "pagesize", this.pageSize);
+      getTerminalJoggle(this.formdata)
+        .then((res) => {
+          console.log(res);
+          this.terminalTableData = res.data.list;
+          this.total = res.data.total;
+          this.loading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击行选中当前行
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    //时间转化
+    dateFormat(row, column) {
+      var date = row[column.property];
+      if (date == undefined) {
+        return "";
+      }
+      return moment(date).format("YYYY-MM-DD HH:mm:ss");
+    },
+    // 新建弹窗
+    handleAddPhoto() {
+      this.photoDialogTitle = "新增";
+      this.$refs.addPhotoDialogref.display();
+      this.$refs.addPhotoDialogref.getdataform(null);
+    },
+    //handleResive 修改线路数据
+    handleRevisePhoto(data) {
+      this.photoDialogTitle = "修改";
+      this.$refs.addPhotoDialogref.display();
+      this.$refs.addPhotoDialogref.getdataform(data);
+      console.log(data);
+    },
+    //装置复位
+    handleDeviceReset(data) {
+      this.$confirm("此操作将复位装置, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          resetTerminalApi({ cmId: data.cmdId })
+            .then((res) => {
+              if (res.code == 200) {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: "装置已复位",
+                  type: "success",
+                });
+              } else {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: res.msg,
+                  type: "error",
+                });
+              }
+            })
+            .catch((err) => {});
+        })
+        .catch(() => {
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   type: "info",
+          //   message: "已取消删除",
+          // });
+        });
+    },
+    //获取GPS位置
+    handleShowGPS(data) {
+      // this.$refs.gpsdialog_ref.display();
+      // this.$refs.gpsdialog_ref.getgpsData(data);
+      this.$refs.gpsdialog_ref.display(data);
+      this.$refs.gpsdialog_ref.getgpssql();
+      console.log(data);
+    },
+
+    //切换gps开启关闭
+    changeGPS(val, row) {
+      console.log(val, row);
+      setTermGPSJoggle({ gpsstatus: val, cmdId: row.cmdId })
+        .then((res) => {
+          console.log(res);
+          if (val == 0) {
+            this.$message({
+              duration: 1500,
+              message: "关闭GPS",
+              type: "success",
+              showClose: true,
+            });
+          } else {
+            this.$message({
+              duration: 1500,
+              message: "成功开启GPS",
+              type: "success",
+              showClose: true,
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleCommand(command, row) {
+      console.log(command, row);
+      switch (command) {
+        case "open": //开启
+          this.changeGPS(1, row);
+          break;
+        case "close": //关闭
+          this.changeGPS(0, row);
+          break;
+      }
+    },
+    //
+    // gpsChange(val) {
+    //   console.log(val);
+    // },
+    //图像采集参数
+    handleImageCapture(data) {
+      this.$refs.imageCaptureref.display();
+      this.$refs.imageCaptureref.getSingleAccess(data);
+      this.$refs.imageCaptureref.getRatio();
+    },
+    //视频采集参数
+    handleVideoCapture(data) {
+      this.$refs.videoCaptureref.display();
+      this.$refs.videoCaptureref.getSingleAccess(data);
+      this.$refs.videoCaptureref.getRatio();
+    },
+
+    //线缆绘制
+    handlepicture(data) {
+      console.log(data);
+      this.$refs.picturetagsref.display(data);
+    },
+    //数据查询
+    handleSearchCommand(command, row) {
+      console.log(command, row);
+      switch (command) {
+        case "info":
+          this.$refs.baseInfor_ref.display();
+          break;
+        case "workStatus":
+          this.$refs.workStatus_ref.display();
+          break;
+        case "runStatus":
+          this.$refs.runStatus_ref.display();
+          break;
+        case "GPS":
+          this.$refs.gpsSite_ref.display();
+          break;
+        default:
+          break;
+      }
+    },
+    //参数配置
+    handleParameterSet(data) {
+      this.$refs.parameterSetref.display(data);
+    },
+
+    // //新建弹窗handleAddPhoto
+    // handleAddPhoto() {
+    //   this.photoDialog = true;
+    //   this.photoDialogTitle = "新增";
+    // },
+    // //修改弹窗handleRevisePhoto
+    // handleRevisePhoto(data) {
+    //   this.photoDialog = true;
+    //   this.photoDialogTitle = "修改";
+    //   this.formphotoInfo = Object.assign({}, data);
+    // },
+
+    //删除数据
+    handleDelete(data) {
+      console.log(data);
+      this.deleteArr.push({
+        termid: data.id,
+      });
+      console.log(this.deleteArr);
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 行设置向后台请求删除数据
+          deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
+            console.log(res);
+            this.terminalList(); //刷新
+          });
+          this.$message({
+            duration: 1500,
+            type: "success",
+            message: "删除成功!",
+            showClose: true,
+          });
+        })
+        .catch(() => {
+          // this.$message({
+          //   duration: 1500,
+          //   type: "info",
+          //   message: "已取消删除",
+          //   showClose: true,
+          // });
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.terminalList(); //刷新
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.terminalList();
+    },
+  },
+};
+</script>
+<style lang="less">
+.photoGraphicDevice {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: @color-white;
+  .photoBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+    .searchBox {
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+      }
+    }
+  }
+  .photoGraphicBtnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .searchBox {
+    margin-top: 8px;
+  }
+  .photoGraphicTable {
+    // margin-top: 16px;
+    //margin-top: 36px;
+    height: calc(100% - 94px);
+  }
+  .dropgps {
+    color: @color-primary;
+    margin-left: 16px;
+    // margin-right: 16px;
+    cursor: pointer;
+    font-size: 12px;
+    width: 80px;
+    .el-input__inner {
+      padding: 0px;
+      border: none;
+      color: @color-primary;
+      font-size: 12px;
+      background-color: transparent;
+    }
+  }
+}
+.gpsdropbox {
+  .el-select-dropdown__item {
+    line-height: 27px;
+    padding: 0 15px;
+    font-size: 12px;
+    height: 27px;
+  }
+}
+</style>

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

@@ -82,7 +82,8 @@ export default {
       if (val == null) {
         return (this.formdata = {});
       }
-      this.formdata = val;
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
       //this.$set(this.formdata);
     },
     // 保存确定操作

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,13 +56,17 @@ export default {
             trigger: "blur",
           },
         ],
+        // address: [
+        //   { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        // ],
       },
     };
   },
   methods: {
     //判断
     getdataform(val) {
-      this.formdata = val;
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
       this.formdata.lineId = val.name;
     },
     // 保存确定操作
@@ -73,12 +80,18 @@ export default {
               {
                 lineId: this.formdata.id,
                 name: this.formdata.towerName,
+                address: this.formdata.address,
               },
             ],
           })
             .then((res) => {
               if (res.code == 200) {
-                this.$message.success("修改成功");
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: "新增杆塔成功",
+                  type: "success",
+                });
                 this.$parent.lineList();
                 this.isShow = false;
               } else {

src/views/management/userEquipment/lineInformation/index.vue

@@ -7,6 +7,21 @@
           >新增</el-button
         >
       </div>
+      <div class="searchBox">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路名称或公司名称"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button type="primary" @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
       <div class="lineTable">
         <el-table
           ref="multipleTable"
@@ -18,14 +33,27 @@
           @selection-change="handleSelectionChange"
           @row-click="handleRowClick"
           v-loading="loading"
+          highlight-current-row
+          :row-key="getRowKeys"
         >
           <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
           <!-- <el-table-column type="index" 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.bsManufacturer
             }}</template>
           </el-table-column>
+
+          <el-table-column
+            prop="dyLevelname"
+            label="电压等级名称"
+            show-overflow-tooltip
+            min-width="120"
+          >
+          </el-table-column>
           <!-- <el-table-column
             prop="id"
             label="线路编号"
@@ -42,14 +70,17 @@
           </el-table-column>
 
           <el-table-column
-            prop="dyLevelname"
-            label="电压等级名称"
+            prop="status"
+            label="是否启用"
             show-overflow-tooltip
             min-width="120"
           >
+            <template slot-scope="scope">
+              {{ scope.row.status == 1 ? "已启用" : "未启用" }}</template
+            >
           </el-table-column>
 
-          <el-table-column fixed="right" label="操作" width="200">
+          <el-table-column label="操作" width="200">
             <template slot-scope="scope">
               <el-button
                 @click.native.stop="handleResive(scope.row)"
@@ -109,19 +140,36 @@ export default {
       pageSize: 20, // 每页数量
       total: 0, //总条数
       loading: true,
+      formdata: {
+        search: "",
+      },
     };
   },
   created() {
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+    // console.log(this.$route.query);
+    // this.formdata.search = this.$route.query.lineName;
+    // console.log(this.formdata.search);
+  },
+  mounted() {
     this.lineList();
   },
   methods: {
+    getRowKeys(row) {
+      return row.id;
+    },
     //获取线路列表数据
     lineList() {
       this.loading = true;
-      getLineListJoggle({
-        pageindex: this.page,
-        pagesize: this.pageSize,
-      })
+      this.$set(this.formdata, "pageindex", this.page);
+      this.$set(this.formdata, "pagesize", this.pageSize);
+      getLineListJoggle(this.formdata)
         .then((res) => {
           this.lineTableData = res.data.list;
           this.total = res.data.total;
@@ -137,7 +185,18 @@ export default {
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
-
+    //查询
+    onSubmit() {
+      this.page = 1;
+      this.lineList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {};
+      this.page = 1;
+      this.pageSize = 20;
+      this.lineList();
+    },
     // 新建弹窗
     handleAddLine() {
       this.lineDialogTitle = "新增";
@@ -147,6 +206,7 @@ export default {
 
     //handleResive 修改线路数据
     handleResive(data) {
+      console.log(data);
       this.lineDialogTitle = "修改";
       this.$refs.addlineDialogref.display();
       this.$refs.addlineDialogref.getdataform(data);
@@ -204,16 +264,35 @@ export default {
 </script>
 <style lang="less">
 .lineInformation {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: @color-white;
   .lineBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
+    .searchBox {
+      margin-top: 8px;
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+      }
+    }
   }
+
   .lineBtnGroup {
     display: flex;
     justify-content: space-between;
@@ -221,8 +300,8 @@ export default {
   }
 
   .lineTable {
-    margin-top: 16px;
-    height: calc(100% - 48px);
+    //margin-top: 16px;
+    height: calc(100% - 94px);
   }
 }
 </style>

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

@@ -14,7 +14,7 @@
       :rules="rules"
       :model="formdata"
     >
-      <el-form-item label="线路编号：" prop="lineId">
+      <el-form-item label="线路名称：" prop="lineId">
         <el-select v-model="formdata.lineId" placeholder="请选择">
           <el-option
             v-for="item in lineOptions"
@@ -27,6 +27,9 @@
       <el-form-item label="杆塔名称：" prop="name">
         <el-input v-model="formdata.name" 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-item label="排序号：" prop="order">
         <el-input-number
           controls-position="right"
@@ -58,6 +61,9 @@ export default {
         lineId: [
           { required: true, message: "请选择线路编号", trigger: "blur" },
         ],
+        // address: [
+        //   { required: true, message: "请输入杆塔地址", trigger: "blur" },
+        // ],
         order: [{ required: true, message: "请输入排序号", trigger: "blur" }],
       },
     };
@@ -80,7 +86,8 @@ export default {
           order: 0,
         });
       }
-      this.formdata = val;
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
     },
     // 保存确定操作
     submitForm() {

src/views/management/userEquipment/towerInformation/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="deviceInformation">
+  <div class="towerinfobox">
     <div class="deviceBox">
       <div class="deviceBtnGroup">
         <h4>杆塔信息管理</h4>
@@ -10,6 +10,55 @@
           >新增</el-button
         >
       </div>
+      <div class="searchBox">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <!-- <el-form-item label="电压等级" class="dybox">
+            <el-select v-model="formdata.dyId" @change="getSearchxl">
+              <el-option
+                v-for="item in dyOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="线路名称" class="xlbox">
+            <el-select
+              v-model="formdata.lineId"
+              @change="getSearchgt"
+              filterable
+            >
+              <el-option
+                v-for="item in xlOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="杆塔名称">
+            <el-select v-model="formdata.towerId" filterable>
+              <el-option
+                v-for="item in gtOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item> -->
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/地址"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button type="primary" @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
       <div class="deviceTable">
         <el-table
           ref="multipleTable"
@@ -21,27 +70,55 @@
           @selection-change="handleSelectionChange"
           @row-click="handleRowClick"
           v-loading="loading"
+          highlight-current-row
+          :row-key="getRowKeys"
         >
           <!-- <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
+            prop="dyLevelname"
+            label="电压等级"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              {{
+                scope.row.dyLevelname
+              }}
+            </template>
+          </el-table-column> -->
           <el-table-column
             prop="lineName"
             label="线路名称"
             show-overflow-tooltip
-          ></el-table-column>
+          >
+            <template slot-scope="scope">
+              <el-link @click.native.stop="handleResive(scope.row)">{{
+                scope.row.lineName
+              }}</el-link>
+            </template>
+          </el-table-column>
           <!-- <el-table-column
             prop="lineId"
             label="线路编号"
             show-overflow-tooltip
           ></el-table-column> -->
+          <el-table-column prop="name" label="杆塔名称" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <el-link @click.native.stop="handleResive(scope.row)">{{
+                scope.row.name
+              }}</el-link>
+            </template></el-table-column
+          >
           <el-table-column
-            prop="name"
-            label="杆塔名称"
+            prop="address"
+            label="杆塔地址"
             show-overflow-tooltip
           ></el-table-column>
 
-          <el-table-column prop="order" label="排序号">
+          <el-table-column prop="order" label="排序号" width="100">
             <template slot-scope="scope">
               {{ scope.row.order == null ? 0 : scope.row.order }}
             </template>
@@ -82,7 +159,7 @@
   </div>
 </template>
 <script>
-import { getTowerListApi, delTowerApi } from "@/utils/api/index";
+import { getTowerListApi, delTowerApi, getSearchInfo } from "@/utils/api/index";
 import addDialog from "./components/addDialog.vue";
 
 export default {
@@ -98,23 +175,105 @@ export default {
       pageSize: 20, // 每页数量
       total: 0, //总条数
       loading: true,
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+
+      formdata: {
+        dyId: -1,
+        lineId: -1,
+        towerId: -1,
+        search: "",
+      },
     };
   },
-  mounted() {
-    console.log("ssss");
-    this.deviceList();
+  created() {
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+    console.log(this.$route.query);
+    this.formdata.search = this.$route.query.name;
+    console.log(this.formdata.search);
   },
-  activated() {
+  mounted() {
+    this.getSearchdy();
     this.deviceList();
   },
+
   methods: {
+    getRowKeys(row) {
+      return row.id;
+    },
+    //点击线路跳转
+    handleLineLink(val) {
+      console.log(val);
+      this.$router.push({
+        path: "/lineInformation",
+        query: { lineName: val.lineName, name: val.name },
+      });
+    },
+    //点击线路跳转
+    handletowerLink(val) {
+      console.log(val);
+      this.$router.push({
+        path: "/photographicDevice",
+        query: { lineName: val.lineName, name: val.name },
+      });
+    },
+    //获取电压信息
+    getSearchdy() {
+      getSearchInfo({ type: 1 })
+        .then((res) => {
+          this.dyOptions = [{ id: -1, name: "全部" }];
+          this.dyOptions = this.dyOptions.concat(res.data.list);
+          this.formdata.dyId = this.dyOptions[0].id;
+          this.getSearchxl();
+        })
+        .catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl() {
+      getSearchInfo({ type: 2, id: this.formdata.dyId })
+        .then((res) => {
+          this.xlOptions = [{ id: -1, name: "全部" }];
+          this.xlOptions = this.xlOptions.concat(res.data.list);
+          this.formdata.lineId = this.xlOptions[0].id;
+          this.getSearchgt();
+        })
+        .catch((err) => {});
+    },
+    //获取杆塔数据
+    getSearchgt() {
+      getSearchInfo({ type: 3, id: this.formdata.lineId })
+        .then((res) => {
+          this.gtOptions = [{ id: -1, name: "全部" }];
+          this.gtOptions = this.gtOptions.concat(res.data.list);
+          this.formdata.towerId = this.gtOptions[0].id;
+        })
+        .catch((err) => {});
+    },
+    //查询
+    onSubmit() {
+      this.page = 1;
+      this.deviceList();
+    },
+    //重置
+    onReset() {
+      this.formdata = {};
+      this.page = 1;
+      this.pageSize = 20;
+      this.deviceList();
+    },
     //获取数据列表
     deviceList() {
       this.loading = true;
-      getTowerListApi({
-        pageindex: this.page,
-        pagesize: this.pageSize,
-      })
+      this.$set(this.formdata, "pageindex", this.page);
+      this.$set(this.formdata, "pagesize", this.pageSize);
+      getTowerListApi(this.formdata)
         .then((res) => {
           this.tableDate = res.data.list;
           this.total = res.data.total;
@@ -190,27 +349,43 @@ export default {
 };
 </script>
 <style lang="less">
-.deviceInformation {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+.towerinfobox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: @color-white;
 
   .deviceBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
+    .searchBox {
+      margin-top: 8px;
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+      }
+    }
   }
   .deviceBtnGroup {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
-
   .deviceTable {
-    margin-top: 16px;
-    height: calc(100% - 48px);
+    height: calc(100% - 94px);
     //background: #fcc;
   }
 }

src/views/management/userEquipment/waterMark/index.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="waterMark">
+    <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">
+        <div class="batchBox" v-if="this.multipleSelection.length !== 0">
+          <el-button type="text" icon="el-icon-s-promotion">批量下发</el-button>
+        </div>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          stripe
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          v-loading="loading"
+          :row-class-name="tableRowClassName"
+          highlight-current-row
+          @selection-change="handleSelectionChange"
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column label="设备CMD_ID" width="125">
+            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
+          </el-table-column>
+          <!-- <el-table-column prop="channel" label="通道"> </el-table-column> -->
+          <el-table-column
+            prop="bottomLeft"
+            label="通道1左下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomLeft"
+              />
+              <span v-else>{{ scope.row.bottomLeft }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomRIght"
+            label="通道1右下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomRIght"
+              />
+              <span v-else>{{ scope.row.bottomRIght }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomLeft"
+            label="通道2左下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomLeft"
+              />
+              <span v-else>{{ scope.row.bottomLeft }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomRIght"
+            label="通道2右下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomRIght"
+              />
+              <span v-else>{{ scope.row.bottomRIght }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomLeft"
+            label="通道3左下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomLeft"
+              />
+              <span v-else>{{ scope.row.bottomLeft }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomRIght"
+            label="通道3右下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomRIght"
+              />
+              <span v-else>{{ scope.row.bottomRIght }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomLeft"
+            label="通道4左下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomLeft"
+              />
+              <span v-else>{{ scope.row.bottomLeft }}</span></template
+            >
+          </el-table-column>
+          <el-table-column
+            prop="bottomRIght"
+            label="通道4右下角水印"
+            show-overflow-tooltip
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-if="scope.row.index == tableCli"
+                v-model="scope.row.bottomRIght"
+              />
+              <span v-else>{{ scope.row.bottomRIght }}</span></template
+            >
+          </el-table-column>
+
+          <el-table-column fixed="right" label="操作" width="120">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                v-if="scope.row.index == tableCli"
+                :disabled="multipleSelection.length !== 0"
+                @click="handleSave(scope.row, scope)"
+                >保存</el-button
+              >
+              <el-button
+                v-else
+                type="text"
+                :disabled="multipleSelection.length !== 0"
+                @click="handleEdit(scope.row, scope)"
+                >编辑</el-button
+              >
+              <el-button type="text" :disabled="multipleSelection.length !== 0"
+                >下发</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>
+  </div>
+</template>
+<script>
+// import { getTowerListApi, delTowerApi } from "@/utils/api/index";
+export default {
+  components: {},
+  data() {
+    return {
+      tableData: [
+        {
+          cmdid: "10020",
+          bottomLeft: "省检-四班-500kV芜城5382线038#小号侧 ",
+          bottomRIght: "西格玛-2020-09-10",
+        },
+
+        {
+          cmdid: "10021",
+          channel: "通道1",
+          bottomLeft: "上海市普陀区金沙江路 1518 弄",
+          bottomRIght: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          cmdid: "10021",
+          channel: "通道2",
+          bottomLeft: "上海市普陀区金沙江路 1518 弄",
+          bottomRIght: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          cmdid: "10021",
+          channel: "通道3",
+          bottomLeft: "上海市普陀区金沙江路 1518 弄",
+          bottomRIght: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          cmdid: "10021",
+          channel: "通道4",
+          bottomLeft: "上海市普陀区金沙江路 1518 弄",
+          bottomRIght: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+      multipleSelection: [],
+      isEdit: false,
+      tableCli: -1,
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      loading: false,
+    };
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    //选中
+    handleSelectionChange(val) {
+      console.log(val);
+      this.multipleSelection = val;
+      this.tableCli = -1;
+    },
+    tableRowClassName({ row, rowIndex }) {
+      // 把每一行的索引放进row
+      row.index = rowIndex;
+    },
+    handleEdit(val, scope) {
+      console.log(val, scope);
+      this.tableCli = scope.$index;
+      console.log(this.tableCli);
+    },
+    handleSave(val, scope) {
+      this.tableCli = -1;
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+    },
+  },
+};
+</script>
+<style lang="less">
+.waterMark {
+  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;
+    .searchBox {
+      margin-top: 8px;
+      .ml10 {
+        margin-left: 10px;
+      }
+      .el-form {
+        .dybox {
+          .el-form-item__content {
+            width: 120px;
+          }
+        }
+        .xlbox {
+          .el-form-item__content {
+            width: 160px;
+          }
+        }
+      }
+    }
+  }
+  .deviceBtnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .deviceTable {
+    margin-top: 8px;
+    height: calc(100% - 40px);
+    position: releative;
+    .batchBox {
+      height: 40px;
+      position: absolute;
+      line-height: 40px;
+      background: #fafafa;
+      width: calc(100% - 116px);
+      left: 78px;
+      z-index: 4;
+      top: 55px;
+    }
+    .el-input--small {
+      font-size: 12px;
+      .el-input__inner {
+        padding: 0px 8px;
+      }
+    }
+  }
+}
+</style>

src/views/pictureRotation/index.vue

@@ -1,75 +1,105 @@
 <template>
   <div class="picRotation">
-    <div class="picHead">
-      <div class="pageNation">
-        <el-pagination
-          @current-change="handleCurrentChange"
-          :current-page="page"
-          :page-size="pageSize"
-          layout=" prev, pager, next, jumper,total"
-          :total="total"
-        >
-        </el-pagination>
-      </div>
-      <div class="buttonGroup">
-        <span class="info">
-          <b> {{ isRuning ? remainingTime : "已暂停" }} </b>
-        </span>
-        <el-button type="primary" @click="toggleCountdown">{{
-          isRuning ? "暂停轮巡" : "开始轮巡"
-        }}</el-button>
-        <el-button type="primary" @click="setbtn">设置</el-button>
-      </div>
-    </div>
-    <div class="imageCenter" v-loading="loading" v-cloak>
-      <div class="imgList" v-for="(item, index) in picList" :key="index">
-        <viewer
-          :options="OptionssalseImg"
-          v-if="item.path !== null && item.path.indexOf('videos') == -1"
-          class="bigpic"
-          :style="
-            item.path ? 'backgroundImage:url(' + item.path + '!128x72)' : ''
-          "
-        >
-          <img :src="item.path + '!1280x720'" />
-        </viewer>
-        <div
-          class="bigpic"
-          v-else-if="item.path !== null && item.path.indexOf('videos') !== -1"
-        >
-          <video
-            width="100%"
-            height="100%"
-            :src="item.path"
-            controls="controls"
-          ></video>
+    <div class="rotationBox">
+      <div class="picHead">
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="page"
+            :page-size="pageSize"
+            layout=" prev, pager, next, jumper,total"
+            :total="total"
+          >
+          </el-pagination>
         </div>
-        <div class="bigpic" v-else>
-          <img src="../../assets/img/nopic.jpg" />
+        <div class="buttonGroup">
+          <span class="info">
+            <b> {{ isRuning ? remainingTime : "已暂停" }} </b>
+          </span>
+          <el-button type="primary" @click="toggleCountdown">{{
+            isRuning ? "暂停轮巡" : "开始轮巡"
+          }}</el-button>
+          <el-button type="primary" @click="setbtn">设置</el-button>
         </div>
-        <p class="infoTop">
-          {{ item.linename }}-{{
-            item.displayname !== null && item.displayname !== ""
-              ? item.displayname
-              : item.cmdid
-          }}-{{
-            item.alias !== null && item.alias !== ""
-              ? item.alias
-              : item.channnelname
-          }}
-        </p>
-        <p class="infoBottom" v-if="item.photoTime !== null">
-          {{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} 
-        </p>
+      </div>
+      <div class="imageCenter" v-loading="loading" v-cloak>
+        <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"
+            v-if="index < colNum * i && index >= colNum * (i - 1)"
+            :key="'col-' + index"
+          >
+            <div class="imgList" @click="handleShowHistory(item)">
+              <!-- <viewer
+                :options="OptionssalseImg"
+                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'" />
+              </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'" @error="setDefaultImage" />
+              </div>
+              <div
+                class="bigpic"
+                v-else-if="
+                  item.path !== null && item.path.indexOf('videos') !== -1
+                "
+              >
+                <video
+                  width="100%"
+                  height="100%"
+                  :src="item.path"
+                  controls="controls"
+                ></video>
+              </div>
+              <div class="bigpic" v-else>
+                <img src="../../assets/img/nopic.jpg" />
+              </div>
+              <div class="picInfo">
+                <p>
+                  {{ item.linename }}-{{ item.towername }}-（{{
+                    item.alias !== null && item.alias !== ""
+                      ? item.alias
+                      : item.channnelname
+                  }}）
+                </p>
+                <p class="timeinfo" v-if="item.photoTime !== 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>
     <el-dialog
       title="设置"
       :visible.sync="setdialog"
-      width="30%"
+      width="480px"
       :close-on-click-modal="false"
+      class="setPicShow"
     >
-      <el-form label-width="100px" label-position="left">
+      <el-form label-position="left">
         <el-form-item label="轮巡速度">
           <el-select v-model="selSpeed" placeholder="请选择">
             <el-option
@@ -80,23 +110,77 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="画面布局">
-          <el-select v-model="selLayout" placeholder="s请选择">
-            <el-option v-for="item in layoutOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </el-form-item> -->
+        <el-form-item label="画面布局" class="layoutBox">
+          <!-- <el-select v-model="selLayout" placeholder="s请选择">
+            <el-option
+              v-for="item in layoutOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select> -->
+          <div class="selectGroup">
+            <div class="rowbox">
+              <el-radio-group v-model="rowradio" class="radio1">
+                <el-radio-button label="1"></el-radio-button>
+                <el-radio-button label="2"></el-radio-button>
+                <el-radio-button label="3"></el-radio-button>
+                <el-radio-button label="4"></el-radio-button>
+                <!-- <el-radio-button label="5"></el-radio-button>
+                <el-radio-button label="6"></el-radio-button> -->
+              </el-radio-group>
+              <span class="labelinfo">行</span>
+            </div>
+            <div class="colbox">
+              <el-radio-group v-model="colradio" class="radio2">
+                <el-radio-button label="1"></el-radio-button>
+                <el-radio-button label="2"></el-radio-button>
+                <el-radio-button label="3"></el-radio-button>
+                <el-radio-button label="4"></el-radio-button>
+                <!-- <el-radio-button label="5"></el-radio-button>
+                <el-radio-button label="6"></el-radio-button> -->
+              </el-radio-group>
+              <span class="labelinfo">列</span>
+            </div>
+          </div>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="setdialog = false">取 消</el-button>
         <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 qs from "qs";
+import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
+import carouselChart from "../components/carouselChart.vue";
+import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  components: {
+    carouselChart,
+  },
   data() {
     return {
       OptionssalseImg: {
@@ -147,32 +231,11 @@ export default {
         },
       ], //轮巡速度
       selSpeed: 5,
-      layoutOptions: [
-        {
-          value: 1,
-          label: "2*2",
-        },
-        {
-          value: 2,
-          label: "3*3",
-        },
-        {
-          value: 3,
-          label: "2*3",
-        },
-        {
-          value: 4,
-          label: "3*2",
-        },
-        {
-          value: 5,
-          label: "4*2",
-        },
-        {
-          value: 6,
-          label: "4*3",
-        },
-      ], //画面布局
+      //画面布局
+      rowNum: "",
+      colNum: "",
+      rowradio: "4",
+      colradio: "4",
       selLayout: 1,
       options: [
         {
@@ -184,9 +247,58 @@ export default {
           label: "倒序",
         },
       ],
+
+      //点击查看历史图片
+      picInfoData: {}, //获取当前图片的信息
+      historyPicdialog: false,
+      historyPicLoading: false,
+      terminalPhoto: [], //获取装置当前图片数据
+      nopicPath: require("@/assets/img/nopic.jpg"),
     };
   },
   methods: {
+    setDefaultImage(e) {
+      e.target.src = defaultImage;
+    },
+    //点击图片弹出历史图
+    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();
@@ -194,11 +306,33 @@ export default {
       this.selSpeed = parseInt(localStorage.getItem("totalTime"))
         ? parseInt(localStorage.getItem("totalTime"))
         : 15;
+      this.rowNum = parseInt(localStorage.getItem("row"))
+        ? parseInt(localStorage.getItem("row"))
+        : 4;
+      this.colNum = parseInt(localStorage.getItem("col"))
+        ? parseInt(localStorage.getItem("col"))
+        : 4;
+      this.rowradio = parseInt(localStorage.getItem("row"))
+        ? parseInt(localStorage.getItem("row"))
+        : 4;
+      this.colradio = parseInt(localStorage.getItem("col"))
+        ? parseInt(localStorage.getItem("col"))
+        : 4;
     },
     submitForm() {
       localStorage.setItem("totalTime", this.selSpeed);
+      localStorage.setItem("row", this.rowradio);
+      localStorage.setItem("col", this.colradio);
+      this.rowNum = parseInt(localStorage.getItem("row"))
+        ? parseInt(localStorage.getItem("row"))
+        : 4;
+      this.colNum = parseInt(localStorage.getItem("col"))
+        ? parseInt(localStorage.getItem("col"))
+        : 4;
+      this.pageSize = this.rowradio * this.colradio;
       this.setdialog = false;
       this.$message.success("设置成功");
+      this.getPicData();
     },
     //点击分页
     handleCurrentChange(val) {
@@ -210,9 +344,10 @@ export default {
     //请求数据接口方法
     getPicData() {
       this.loading = true;
+      this.picList = [];
       getPictureList({
         pageindex: this.page,
-        pagesize: this.pageSize,
+        pagesize: this.rowNum * this.colNum,
       })
         .then((res) => {
           this.picList = res.data.list;
@@ -273,7 +408,15 @@ export default {
     this.remainingTime = parseInt(localStorage.getItem("totalTime"))
       ? parseInt(localStorage.getItem("totalTime"))
       : 15;
-    this.toggleCountdown();
+    this.rowradio = this.rowNum = parseInt(localStorage.getItem("row"))
+      ? parseInt(localStorage.getItem("row"))
+      : 4;
+    this.colradio = this.colNum = parseInt(localStorage.getItem("col"))
+      ? parseInt(localStorage.getItem("col"))
+      : 4;
+    this.pageSize = this.rowradio * this.colradio;
+    //this.toggleCountdown();
+    this.getPicData();
   },
   created() {},
 
@@ -286,10 +429,17 @@ export default {
 </script>
 <style lang="less">
 .picRotation {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: #ffffff;
+  .rotationBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 22px);
+    max-height: calc(100% - 22px);
+    padding: 12px;
+    border-radius: 4px;
+  }
   .picHead {
     display: flex;
     align-items: center;
@@ -317,24 +467,23 @@ export default {
   }
 
   .imageCenter {
-    display: flex;
-    // justify-content: space-around;
-    flex-wrap: wrap;
+    // display: flex;
+    // flex-wrap: wrap;
     height: calc(100% - 52px);
-    justify-content: space-between;
+    .el-col {
+      height: 100%;
+      padding-right: 0.1%;
+      padding-left: 0.1%;
+      padding-top: 0.1%;
+      padding-bottom: 0.1%;
+    }
+    // justify-content: space-between;
     .imgList {
-      width: 49.8%;
-      position: relative;
-      display: inline-block;
-      margin-right: 0.1%;
-      margin-left: 0.1%;
-      margin-top: 0.1%;
-      margin-bottom: 0.1%;
+      border: 1px solid #eee;
+      width: 100%;
       position: relative;
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px px;
-      height: 49.8%;
+      //background-color: #00eaff;
+      height: 100%;
       .bigpic {
         width: 100%;
         height: 100%;
@@ -345,29 +494,79 @@ export default {
         height: 100%;
         cursor: pointer;
       }
-      .infoTop {
+      .picInfo {
         position: absolute;
-        bottom: 28px;
-        left: 0px;
-        font-size: 14px;
-        background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
-        color: @color-white;
-        font-weight: normal;
-        margin-top: 2px;
-        padding-left: 5px;
-        padding-right: 5px;
+        background: #169e8ca1;
+        color: #fff;
+        height: auto;
+        font-size: 12px;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        text-align: center;
+        p {
+          margin-top: 4px;
+        }
+        .timeinfo {
+          margin-bottom: 4px;
+        }
       }
-      .infoBottom {
-        position: absolute;
-        bottom: 4px;
-        color: @color-white;
-        left: 0px;
+    }
+  }
+  .setPicShow {
+    .el-select {
+      width: 222px;
+    }
+    .layoutBox {
+      display: flex;
+      align-items: center;
+    }
+    .selectGroup {
+      display: flex;
+      flex-direction: column;
+      .el-radio-button--small .el-radio-button__inner {
+        padding: 9px 24px;
+      }
+      .rowbox {
+        margin-bottom: 8px;
+        .labelinfo {
+          margin-left: 8px;
+        }
+      }
+      .colbox {
+        .labelinfo {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  .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, #00eaff 10%, @color-primary 100%);
-        font-weight: normal;
-        margin-top: 2px;
-        padding-left: 5px;
-        padding-right: 5px;
+        background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
+        text-align: center;
+      }
+      .thumb-example {
+        //height: 100%;
       }
     }
   }

src/views/realTimeMonitor/components/gpsPosition.vue

@@ -0,0 +1,172 @@
+<template>
+  <el-dialog
+    class="gpsPoisitiondialog"
+    title="GPS位置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="662px"
+    @close="handleclose"
+  >
+    <!-- <div class="gpsbox" v-loading="loading">
+      <p>
+        <span>经度：</span><span>{{ infornr.longitude }}</span>
+      </p>
+      <p>
+        <span>纬度：</span><span>{{ infornr.latitude }}</span>
+      </p>
+      <p>
+        <span>半径：</span><span>{{ infornr.radius }}</span>
+      </p>
+    </div> -->
+    <div class="gpsbox" v-loading="loading">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item>
+          <template slot="label"> 采集时间 </template
+          >{{ $moment(infornr.updatetime).format("YYYY-MM-DD HH:mm:ss") }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label"> 经度 </template>{{ infornr.longitude }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label"> 纬度 </template>{{ infornr.latitude }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label"> 半径 </template>{{ infornr.radius }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-button type="text" class="newBtn" @click="getgpsData()"
+        >获取最新GPS位置</el-button
+      >
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="isShow = false">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getTermLastGPSPosition,
+  getTermGPSJoggle,
+  getTermGPSPosition,
+} from "@/utils/api/index";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      loading: false,
+      isShow: false,
+      timer: null,
+      infornr: {},
+      i: 0,
+      queryTime: "", //查询ID
+      zzcmdid: "",
+      zztermid: "",
+    };
+  },
+  mounted() {},
+  methods: {
+    //获取数据信息
+    getgpssql() {
+      getTermLastGPSPosition({
+        termId: this.zztermid,
+      })
+        .then((res) => {
+          this.infornr = res.data;
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   message: "gps信息已更新",
+          //   type: "success",
+          // });
+        })
+        .catch((err) => {});
+    },
+    //获取第一次数据
+    getgpsData() {
+      console.log(this.zzcmdid);
+      console.log(this.zztermid);
+      this.loading = true;
+      getTermGPSPosition({
+        cmdId: this.zzcmdid,
+      })
+        .then((res) => {
+          this.queryTime = res.data;
+          console.log(this.zztermid);
+          this.getNewgpsData(this.zztermid);
+          this.timer = window.setInterval(() => {
+            this.getNewgpsData(this.zztermid);
+            this.i++;
+          }, 5000);
+        })
+        .catch((err) => {});
+    },
+    //最新数据
+    getNewgpsData(val) {
+      getTermGPSJoggle({
+        queryTime: this.queryTime,
+        termid: val,
+      })
+        .then((res) => {
+          this.loading = true;
+          if (res.code == 200) {
+            this.infornr = res.data;
+            if (res.data.hasNew == true) {
+              this.loading = false;
+              this.i = 0;
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "gps信息已更新",
+                type: "success",
+              });
+              clearInterval(this.timer);
+            } else if (this.i > 9) {
+              this.loading = false;
+              this.i = 0;
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "暂未获取到GPS信息，请稍后再试！！",
+                type: "warning",
+              });
+              clearInterval(this.timer);
+            }
+          } else {
+            this.$message.error(res.code.msg);
+          }
+        })
+        .catch((err) => {});
+    },
+    display(cmdid, newTermId) {
+      this.isShow = true;
+      this.zzcmdid = cmdid;
+      this.zztermid = newTermId;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.i = 0;
+      clearInterval(this.timer);
+      this.timer = null;
+      this.loading = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.gpsPoisitiondialog {
+  .gpsbox {
+    p {
+      line-height: 32px;
+      height: 32px;
+      font-size: 16px;
+    }
+    .newBtn {
+      margin-top: 14px;
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/infoDialog.vue

@@ -8,7 +8,7 @@
     @close="handleclose"
   >
     <div class="infoTable" v-loading="loading">
-      <el-descriptions class="margin-top" :column="1" border>
+      <el-descriptions :column="1" border>
         <el-descriptions-item>
           <template slot="label"> 装置编号 </template>{{ cmdid }}
         </el-descriptions-item>
@@ -46,46 +46,62 @@
           }}
         </el-descriptions-item>
       </el-descriptions>
+      <el-button type="text" class="newBtn" @click="getListData()"
+        >获取最新装置信息</el-button
+      >
     </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>
 <script>
-import { getDeviceList, getNewDeviceList } from "@/utils/api/index";
+import {
+  getDeviceList,
+  getNewDeviceList,
+  getinfoStatus,
+} from "@/utils/api/index";
 export default {
   props: {
     title: String,
   },
   data() {
     return {
-      loading: true,
+      loading: false,
       isShow: false,
       infornr: {}, //装置信息内容
       timer: null,
       i: 0,
       queryTime: "", //查询ID
       cmdid: "",
+      zztermid: "",
     };
   },
   mounted() {},
   methods: {
+    //数据库获取最新数据
+    getinfo() {
+      getinfoStatus({
+        termId: this.zztermid,
+      })
+        .then((res) => {
+          this.infornr = res.data;
+        })
+        .catch((err) => {});
+    },
     //获取第一次数据
-    getListData(val, cmdid) {
+    getListData() {
       this.loading = true;
-      this.cmdid = cmdid;
       getDeviceList({
-        termId: val,
+        termId: this.zztermid,
       })
         .then((res) => {
           this.queryTime = res.data.queryTime;
-          this.getNewListData(val);
           this.timer = window.setInterval(() => {
-            this.getNewListData(val);
+            this.getNewListData(this.zztermid);
             this.i++;
-          }, 10000);
+          }, 3000);
         })
         .catch((err) => {});
     },
@@ -96,17 +112,19 @@ export default {
         termId: val,
       })
         .then((res) => {
-          this.loading = false;
           if (res.code == 200) {
             this.infornr = res.data;
+
             if (res.data.isNew == true) {
               this.i = 0;
               this.$message.success("装置信息已更新");
               clearInterval(this.timer);
-            } else if (this.i > 9) {
+              this.loading = false;
+            } else if (this.i > 5) {
               this.i = 0;
               this.$message.warning("暂无响应，请稍后再试！");
               clearInterval(this.timer);
+              this.loading = false;
             }
           } else {
             this.$message.error(res.code.msg);
@@ -114,13 +132,23 @@ export default {
         })
         .catch((err) => {});
     },
-    display() {
+    // display() {
+    //   this.isShow = true;
+
+    // },
+    display(newTermId, cmdid) {
+      console.log(newTermId, cmdid);
       this.isShow = true;
+      this.zztermid = newTermId;
+      this.cmdid = cmdid;
     },
     hide() {
       this.isShow = false;
+      this.loading = false;
     },
     handleclose() {
+      this.isShow = false;
+      this.loading = false;
       this.i = 0;
       clearInterval(this.timer);
       this.timer = null;
@@ -130,5 +158,8 @@ export default {
 </script>
 <style lang="less">
 .infoDialog {
+  .newBtn {
+    margin-top: 14px;
+  }
 }
 </style>

src/views/realTimeMonitor/components/setschedule.vue

@@ -50,26 +50,53 @@
                 <div class="w8">时间表:</div>
                 <div class="w80 flexonly" v-loading="timeloading">
                   <el-tag
+                    v-if="timeProtocol == '65283' || timeProtocol == '65285'"
                     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' ||
+                      timeProtocol == '65282' ||
+                      timeProtocol == '65281'
+                    "
+                    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 !== null"
                   >(偏移时间{{ offsetnum }}分钟)</span
                 >
                 <div class="w80 flexonly" v-loading="timeloading">
                   <el-tag
+                    v-if="timeProtocol == '65283' || timeProtocol == '65285'"
+                    class="mr10 mt10"
+                    size="mini"
+                    v-for="(val, index) in this.newshedulenr"
+                    :key="index"
+                    >{{ val.substring(val.length - 5) }}</el-tag
+                  >
+                  <el-tag
+                    v-if="
+                      timeProtocol == '65286' ||
+                      timeProtocol == '65282' ||
+                      timeProtocol == '65281'
+                    "
                     class="mr10 mt10"
                     size="mini"
                     v-for="(val, index) in this.newshedulenr"
                     :key="index"
-                    >{{ val.substring(0, val.lastIndexOf(":")) }}</el-tag
+                    >{{ $moment(val).format("HH:mm") }}</el-tag
                   >
                 </div>
               </div>
@@ -92,7 +119,7 @@
         <div class="deviceTable">
           <el-table
             ref="multipleTable"
-            :data="deviceTableData"
+            :data="newList"
             tooltip-effect="dark"
             stripe
             style="width: 100%"
@@ -101,25 +128,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 label="时间表规则" width="300">
+            </el-table-column> -->
+            <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>{{
-                    val.endTime.substring(0, val.endTime.lastIndexOf(":"))
-                  }}</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>
               </template>
@@ -183,8 +227,31 @@
                   v-for="(val, index) in scheduleInfo"
                   :key="index"
                 >
-                  <span>{{ val.startTime }}</span> ~
-                  <span>{{ val.endTime }}</span>
+                  <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 +312,7 @@ import {
   getCmaSchelduleUpload,
   getTermStatus,
 } from "@/utils/api/index";
+import moment from "moment";
 export default {
   props: {
     title: String,
@@ -259,6 +327,8 @@ export default {
       selaccess: "", //选中的通道
       shedulenr: [], //查询的时间表
       deviceTableData: [], //时间表-表格
+      newList: [],
+      listTime: [],
       page: 1, // 当前页数
       pageSize: 10, // 每页数量
       total: 0, //总条数
@@ -293,8 +363,9 @@ export default {
       requestArr: [], //通过requestid获取状态
       sureloading: false,
       offsetnum: "",
-      setNum: Math.floor(Math.random() * 10),
+      setNum: 0,
       compareloading: false,
+      timeProtocol: "",
     };
   },
   mounted() {
@@ -305,9 +376,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 +394,107 @@ export default {
             terminalid: this.selfacilityId,
           })
             .then((res) => {
-              // this.$message.success("查询成功");
-              // this.shedulenr = res.data.list.join("; ")
               this.shedulenr = res.data.list;
+              console.log(res.data.offset);
               this.offsetnum = res.data.offset;
+              console.log(this.offsetnum);
+              console.log("aaaaa");
+              console.log(this.shedulenr);
+              //湖南规约
+              if (
+                this.timeProtocol == "65283" ||
+                this.timeProtocol == "65285"
+              ) {
+                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" ||
+                this.timeProtocol == "65282" ||
+                this.timeProtocol == "65281"
+              ) {
+                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.loading = false;
             })
             .catch((err) => {
@@ -343,9 +513,99 @@ 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" || this.timeProtocol == "65285") {
+            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" ||
+            this.timeProtocol == "65282" ||
+            this.timeProtocol == "65281"
+          ) {
+            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 +646,148 @@ export default {
               // this.shedulenr = res.data.list.join("; ")
               this.compareloading = false;
               this.newshedulenr = res.data.list;
+              this.offsetnum = res.data.offset;
+              console.log("qqqqqqqqqqqqqqqqqqqqqq");
+              console.log(this.offsetnum);
+              //湖南规约
+              if (
+                this.timeProtocol == "65283" ||
+                this.timeProtocol == "65285"
+              ) {
+                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"
+                  );
+                  let endVal = this.$moment(new Date(endDay)).format(
+                    "YYYY-MM-DD HH:mm"
+                  );
+                  console.log(startVal, endVal);
+                  if (this.$moment(endVal).isBefore(this.$moment(startVal))) {
+                    let zeroEnd = this.$moment("23:59", "HH:mm").format(
+                      "YYYY-MM-DD HH:mm"
+                    );
+                    let zeroStart = this.$moment("00:00", "HH:mm").format(
+                      "YYYY-MM-DD HH:mm"
+                    );
+                    while (
+                      this.$moment(startVal).isBefore(this.$moment(zeroEnd)) ||
+                      this.$moment(startVal).isSame(this.$moment(zeroEnd))
+                    ) {
+                      dayArr.push(startVal);
+                      startVal = this.$moment(startVal)
+                        .add(hnarr[k].span, "minute")
+                        .format("YYYY-MM-DD HH:mm");
+                    }
+                    while (
+                      this.$moment(zeroStart).isBefore(this.$moment(endVal)) ||
+                      this.$moment(zeroStart).isSame(this.$moment(endVal))
+                    ) {
+                      dayArr.push(zeroStart);
+                      zeroStart = this.$moment(zeroStart)
+                        .add(hnarr[k].span, "minute")
+                        .format("YYYY-MM-DD HH:mm");
+                    }
+                  } else {
+                    while (
+                      this.$moment(startVal).isBefore(this.$moment(endVal)) ||
+                      this.$moment(startVal).isSame(this.$moment(endVal))
+                    ) {
+                      dayArr.push(startVal);
+                      startVal = this.$moment(startVal)
+                        .add(hnarr[k].span, "minute")
+                        .format("YYYY-MM-DD HH:mm");
+                    }
+                  }
+                  // 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" ||
+                this.timeProtocol == "65282" ||
+                this.timeProtocol == "65281"
+              ) {
+                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 +818,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 +920,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 +939,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 +1016,156 @@ export default {
         getTermStatus({ termId: this.deviceListData.zzid }).then((res) => {
           console.log(res);
           if (res.data.isonline) {
+            var ruleBox = [];
+            //循环装置
+
+            //循环时间规则
+            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" ||
+                this.deviceListData.zzprotocol == "65285"
+              ) {
+                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(
+                    {
+                      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)
+                        .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" ||
+              this.timeProtocol == "65282" ||
+              this.timeProtocol == "65281"
+            ) {
+              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: [
-                {
-                  termid: this.deviceListData.zzid,
-                  channelidlist: [this.checkList],
-                  offset: this.setNum,
-                },
-              ],
+              list: ruleBox,
             })
               .then((res) => {
                 console.log(res);
@@ -595,10 +1234,12 @@ export default {
     },
     closebtn() {
       this.isShowset = false;
+      this.deviceListData = [];
       this.checkList = "";
-      this.setNum = Math.floor(Math.random() * 10);
+      this.sureloading = false;
+      // this.setNum = this.offsetnum;
       this.deviceList();
-
+      this.setNum = 0;
       clearInterval(this.timers);
       this.timers = null;
     },
@@ -654,12 +1295,14 @@ export default {
       }
     }
     .timeShow {
-      display: flex;
+      //display: flex;
       .leftTime {
         width: 50%;
+        float: left;
       }
       .rightTime {
         width: 50%;
+        float: right;
         position: relative;
         .offtime {
           position: absolute;

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,179 @@
+<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"
+              @error="setDefaultImage"
+            />
+            <!-- 判断是否是视频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";
+import defaultImage from "../../assets/img/nodatapic2.jpg";
+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: {
+    setDefaultImage(e) {
+      e.target.src = defaultImage;
+    },
+    //获取所有杆塔图片列表
+    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,17 +97,25 @@
               default-time="23:59:59"
               placeholder="结束日期"
               value-format="timestamp"
+              :picker-options="pickerOptions"
               class="ml10"
             >
             </el-date-picker>
           </el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="formdata.search"
+              placeholder="请输入线路/杆塔/设备名称"
+              clearable
+            ></el-input>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">查询</el-button>
           </el-form-item>
         </el-form>
       </div>
-      <div class="pictureBox" v-loading="loading">
-        <div v-if="picList.length !== 0">
+      <div class="pictureBox" v-loading="loading" v-infinite-scroll>
+        <div v-if="picList.length !== 0" style="width: 100%">
           <el-card
             class="box-card imgList"
             v-for="(item, index) in picList"
@@ -110,7 +126,12 @@
               class="bigpic"
               v-if="item.path.indexOf('videos') == -1"
             >
-              <img :src="item.path + '!1280x720'" />
+              <img
+                :src="item.path + '!1366x768'"
+                :class="'bigpath' + index"
+                @click="showbigpicPath(item, index)"
+                @error="setDefaultImage"
+              />
 
               <!-- <el-image :src="item.path" lazy></el-image> -->
 
@@ -193,9 +214,15 @@
 
 <script>
 import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
+import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
   data() {
     return {
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
       OptionssalseImg: {
         inline: false,
         button: true,
@@ -206,17 +233,18 @@ export default {
         zoomable: true,
         url: "src",
       },
-      dyOptions: [{ id: 0, name: "全部" }], //电压数据
-      xlOptions: [{ id: 0, name: "全部" }], //线路数据
-      gtOptions: [{ id: 0, name: "全部" }], //杆塔数据
-      zzOptions: [{ id: 0, name: "全部" }], //装置数据
-      tdOptions: [{ id: 0, name: "全部" }], //通道数据
+      dyOptions: [{ id: -1, name: "全部" }], //电压数据
+      xlOptions: [{ id: -1, name: "全部" }], //线路数据
+      gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
+      zzOptions: [{ id: -1, name: "全部" }], //装置数据
+      tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
       formdata: {
-        dyid: "",
-        lineid: "",
-        towerid: "",
-        channelid: "",
-        termid: "",
+        dyid: -1,
+        lineid: -1,
+        towerid: -1,
+        channelid: -1,
+        termid: -1,
+        search: "",
         // timeVal: "",
       },
       picList: [],
@@ -227,20 +255,57 @@ export default {
       signtype: 0, //0第一次查询
     };
   },
+  created() {
+    var that = this;
+    document.onkeydown = function (e) {
+      var key = window.event.keyCode;
+      if (key === 13) {
+        that.onSubmit(); // 触发事件
+      }
+    };
+
+    // this.formdata.search = this.$route.query.name;
+    // console.log(this.formdata.search);
+  },
   mounted() {
     // this.$set(this.formdata, "timeVal", [
     //   new Date(new Date().toLocaleDateString()).getTime(),
     //   new Date().getTime(),
     // ]);
-    this.$set(
-      this.formdata,
-      "starttime",
-      new Date(new Date().toLocaleDateString()).getTime()
-    );
+
     this.$set(this.formdata, "endtime", new Date().getTime());
-    this.getSearchdy();
+
+    if (JSON.stringify(this.$route.query) === "{}") {
+      this.$set(
+        this.formdata,
+        "starttime",
+        new Date(new Date().toLocaleDateString()).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: {
+    setDefaultImage(e) {
+      e.target.src = defaultImage;
+    },
+    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 })
@@ -253,7 +318,14 @@ export default {
           //   this.formdata.dyid = res.data.list[0].id;
           // }
           this.dyOptions = this.dyOptions.concat(res.data.list);
-          this.formdata.dyid = this.dyOptions[0].id;
+          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();
         })
@@ -263,9 +335,15 @@ export default {
     getSearchxl() {
       getSearchInfo({ type: 2, id: this.formdata.dyid })
         .then((res) => {
-          this.xlOptions = [{ id: 0, name: "全部" }];
+          this.xlOptions = [{ id: -1, name: "全部" }];
           this.xlOptions = this.xlOptions.concat(res.data.list);
-          this.formdata.lineid = this.xlOptions[0].id;
+          // 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) => {});
@@ -274,9 +352,15 @@ export default {
     getSearchgt() {
       getSearchInfo({ type: 3, id: this.formdata.lineid })
         .then((res) => {
-          this.gtOptions = [{ id: 0, name: "全部" }];
+          this.gtOptions = [{ id: -1, name: "全部" }];
           this.gtOptions = this.gtOptions.concat(res.data.list);
-          this.formdata.towerid = this.gtOptions[0].id;
+          // 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) => {});
@@ -285,9 +369,15 @@ export default {
     getSearchzz() {
       getSearchInfo({ type: 4, id: this.formdata.towerid })
         .then((res) => {
-          this.zzOptions = [{ id: 0, name: "全部" }];
+          this.zzOptions = [{ id: -1, name: "全部" }];
           this.zzOptions = this.zzOptions.concat(res.data.list);
-          this.formdata.termid = this.zzOptions[0].id;
+          // 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) => {});
@@ -296,19 +386,27 @@ export default {
     getSearchtd() {
       getSearchInfo({ type: 5, id: this.formdata.termid })
         .then((res) => {
-          this.tdOptions = [{ id: 0, name: "全部" }];
+          this.tdOptions = [{ id: -1, name: "全部", alias: null }];
           this.tdOptions = this.tdOptions.concat(res.data.list);
-          this.formdata.channelid = this.tdOptions[0].id;
+          //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) => {});
     },
     //获取图片列表
     getPicData() {
       this.loading = true;
+      this.picList = [];
       this.$set(this.formdata, "pageindex", this.page);
       this.$set(this.formdata, "pagesize", this.pageSize);
       // this.$set(this.formdata, "starttime", this.formdata.timeVal[0]);
@@ -334,11 +432,13 @@ export default {
           type: "warning",
         });
       }
+      this.page = 1;
       this.getPicData();
     },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
+      this.picList = [];
       this.getPicData();
     },
     //每页条数
@@ -351,14 +451,14 @@ export default {
 </script>
 <style lang="less">
 .realTimeSearch {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: #fff;
   .searchMain {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 22px);
+    padding: 12px;
     border-radius: 4px;
     .ml10 {
       margin-left: 10px;

src/views/stritl/chartFiles/pie.vue

@@ -1,87 +1,87 @@
 <template>
-    <div id="myMidChart" ref="pieChart" :style="boxStyle"></div>
+  <div id="myMidChart" ref="pieChart" :style="boxStyle"></div>
 </template>
 <script>
 export default {
-    props: {
-        pieData: {},
-        boxStyle: {}
+  props: {
+    pieData: {},
+    boxStyle: {},
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$nextTick(function () {
+      this.drawBar();
+    });
+  },
+  methods: {
+    drawBar() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(this.$refs.pieChart);
+      // 绘制图表
+      myChart.setOption({
+        legend: {
+          orient: "vertical",
+          top: "center",
+          left: "right",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: "pie",
+            radius: ["40%", "70%"],
+            center: ["35%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 12,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: this.pieData,
+          },
+        ],
+      });
+      window.addEventListener("resize", () => {
+        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
+        myChart.resize();
+      });
     },
-    data() {
-        return {};
+  },
+  watch: {
+    pieData(val, old) {
+      this.drawBar();
     },
-    mounted() {
-        this.$nextTick(function () {
-            this.drawBar();
-        });
-    },
-    methods: {
-        drawBar() {
-            // 基于准备好的dom，初始化echarts实例
-            var myChart = this.$echarts.init(this.$refs.pieChart);
-            // 绘制图表
-            myChart.setOption({
-                legend: {
-                    orient: 'vertical',
-                    top: 'center',
-                    left: 'right'
-                },
-                tooltip: {
-                    trigger: 'item'
-                },
-                series: [
-                    {
-                        // name: 'Access From',
-                        type: 'pie',
-                        radius: ['40%', '70%'],
-                        center: ['35%', '50%'],
-                        avoidLabelOverlap: false,
-                        itemStyle: {
-                            borderRadius: 10,
-                            borderColor: '#fff',
-                            borderWidth: 2
-                        },
-                        label: {
-                            show: false,
-                            position: 'center'
-                        },
-                        emphasis: {
-                            label: {
-                                show: false,
-                                fontSize: 40,
-                                fontWeight: 'bold'
-                            }
-                        },
-                        labelLine: {
-                            show: false
-                        },
-                        data: this.pieData
-                    }
-                ]
-            });
-            window.addEventListener('resize', () => {
-                // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
-                myChart.resize();
-            });
-        }
-    },
-    watch: {
-        pieData(val, old) {
-            this.drawBar();
-        }
-    },
-    beforeDestroy() {
-        /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
+  },
+  beforeDestroy() {
+    /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
       容易导致内存泄漏和额外CPU或GPU占用哦*/
-        window.removeEventListener('resize', () => {
-            myChart.resize();
-        });
-    }
+    window.removeEventListener("resize", () => {
+      myChart.resize();
+    });
+  },
 };
 </script>
 <style lang="less">
 #myMidChart {
-    width: 100%;
-    height: 240px;
+  width: 100%;
+  height: 240px;
 }
-</style>
+</style>

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,597 @@
 <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(-1)">
+              <span>装置总数</span>
+              <span>{{ termDataNum.totalNum ? termDataNum.totalNum : 0 }}</span>
+            </p>
+            <p @click="handleLook(1)">
+              <span>在线数量</span>
+              <span>{{
+                termDataNum.onlineNum ? termDataNum.onlineNum : 0
+              }}</span>
+            </p>
+            <p @click="handleLook(0)">
+              <span>离线率</span>
+              <span
+                >{{
+                  termDataNum.offlinePercent
+                    ? (termDataNum.offlinePercent * 100).toFixed(2)
+                    : 0
+                }}%</span
+              >
+            </p>
+            <p>
+              <span @click="handleLook(1)">在线率</span>
+              <span
+                >{{
+                  termDataNum.onlinePercent
+                    ? (termDataNum.onlinePercent * 100).toFixed(2)
+                    : 0
+                }}%</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(paramsLineVal)"
+          >导出</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-column prop="longitude" label="经度"></el-table-column>
+          <el-table-column prop="latitude" 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,
+      paramsLineVal: "",
+    };
+  },
+  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(val) {
+      console.log(val);
+      this.paramsLineVal = val;
+      this.dialogTableVisible = true;
+      this.exportLoading = true;
+      this.onLineData = [];
+      getOnlineTerminalList({
+        type: val,
+      })
+        .then((res) => {
+          console.log(res);
 
+          this.onLineData = res.data;
+          this.exportLoading = false;
+          console.log(this.onLineData);
+        })
+        .catch((err) => {});
+    },
+    //导出
+    handleExport(val) {
+      console.log(val);
+      window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
+    },
+    // 隐患数量统计
+    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);
+        let that = this;
+        that.$echarts.init(document.getElementById("echart2")).dispose();
+        that.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: that.termDataNum.onlineNum, name: "在线" },
+                { value: that.termDataNum.offlineNum, name: "离线" },
+              ],
+            },
+          ],
+        };
+        that.myChart2.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart2.resize();
+        });
+        that.myChart2.on("click", function (params) {
+          console.log(params);
+          if (params.name == "在线") {
+            that.handleLook(1);
+          } else {
+            that.handleLook(0);
+          }
+        });
+      });
+    },
+    //获取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 {
-  width: 100%;
-  height: 100%;
+.stritleEchartsPage {
+  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);
+            &:hover {
+              cursor: pointer;
+            }
+            &: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/components/addUser.vue

@@ -93,7 +93,8 @@ export default {
       if (val == null) {
         return (this.formdata = {});
       }
-      this.formdata = val;
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
     },
     // 保存确定操作
     submitForm() {

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,19 +137,38 @@ 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>
 <style lang="less">
 .globalBox {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: #fff;
   .setBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
     display: flex;
     .globalDrawLine {

src/views/system/userManagement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="camerChannel">
+  <div class="usermanagement">
     <div class="deviceBox">
       <div class="deviceBtnGroup">
         <h4>用户管理</h4>
@@ -20,6 +20,9 @@
         >
           <!-- <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
@@ -170,16 +173,16 @@ export default {
 };
 </script>
 <style lang="less">
-.camerChannel {
-  width: calc(100% - 32px);
-  height: calc(100% - 32px);
-  padding: 16px 16px;
+.usermanagement {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
   background: @color-white;
 
   .deviceBox {
     border: 1px solid #dddddd;
-    height: calc(100% - 32px);
-    padding: 16px;
+    height: calc(100% - 24px);
+    padding: 12px;
     border-radius: 4px;
   }
   .deviceBtnGroup {

src/views/videoMonitor/videoHistory.vue

@@ -1,168 +1,240 @@
-
-
 <template>
-    <div style="padding: 20px">
-        <el-card
-            ><el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"
-                ><el-tab-pane label="用户管理" name="用户管理"
-                    ><div class="echart-top">
-                        <div id="echart1" style="width: 100%; height: 100%"></div>
-                        <div id="echart2" style="width: 100%; height: 100%"></div></div></el-tab-pane
-                ><el-tab-pane label="配置管理" name="配置管理"
-                    ><div class="echart-top">
-                        <div id="echart3" style="width: 100%; height: 100%"></div>
-                        <div id="echart4" style="width: 100%; height: 100%"></div></div></el-tab-pane></el-tabs
-        ></el-card>
+  <div class="echartsPage">
+    <div class="echart-top">
+      <el-card class="box-card">
+        <div id="echart1" style="width: 100%; height: 100%"></div>
+      </el-card>
+      <el-card class="box-card">
+        <div id="echart2" style="width: 100%; height: 100%"></div>
+      </el-card>
+    </div>
+    <div class="echart-top">
+      <el-card class="box-card">
+        <div id="echart3" style="width: 100%; height: 100%"></div>
+      </el-card>
+      <el-card class="box-card">
+        <div id="echart4" style="width: 100%; height: 100%"></div>
+      </el-card>
     </div>
+    <!-- <el-card>
+      <el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"
+        ><el-tab-pane label="用户管理" name="用户管理"></el-tab-pane
+        ><el-tab-pane label="配置管理" name="配置管理"></el-tab-pane></el-tabs
+    ></el-card> -->
+  </div>
 </template>
 <script>
 export default {
-    name: '',
-    data() {
-        return { tabName: '配置管理', myChart1: '', myChart2: '', myChart3: '', myChart4: '' };
+  name: "",
+  data() {
+    return {
+      tabName: "配置管理",
+      myChart1: "",
+      myChart2: "",
+      myChart3: "",
+      myChart4: "",
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    "$store.state.collapse"(val) {
+      console.log(val);
+      setTimeout(() => {
+        //echarts得重绘方法
+        this.myChart1.resize();
+        this.myChart2.resize();
+        this.myChart3.resize();
+        this.myChart4.resize();
+      }, 300);
     },
-    mounted() {
-        this.init();
+  },
+  methods: {
+    init() {
+      this.getEchart1();
+      this.getEchart2();
+      this.getEchart3();
+      this.getEchart4();
     },
-    watch: {
-        '$store.state.collapse'(val) {
-            console.log(val);
-            setTimeout(() => {
-                //echarts得重绘方法
-                this.myChart1.resize();
-                this.myChart2.resize();
-                this.myChart3.resize();
-                this.myChart4.resize();
-            }, 300);
-        }
+    handleClick(value) {
+      console.log("value", value);
+      if (value.name === "用户管理") {
+        this.getEchart1();
+        this.getEchart2();
+      } else {
+        this.getEchart3();
+      }
     },
-    methods: {
-        init() {
-            this.getEchart1();
-            this.getEchart2();
-            this.getEchart3();
-            this.getEchart4();
-        },
-        handleClick(value) {
-            console.log('value', value);
-            if (value.name === '用户管理') {
-                this.getEchart1();
-                this.getEchart2();
-            } else {
-                this.getEchart3();
-            }
-        },
-        getEchart1() {
-            this.$nextTick(() => {
-                this.$echarts.init(document.getElementById('echart1')).dispose();
-                this.myChart1 = this.$echarts.init(document.getElementById('echart1'));
-                let option = {
-                    legend: { top: 'bottom' },
-                    toolbox: {
-                        show: true,
-                        feature: {
-                            mark: { show: true },
-                            dataView: { show: true, readOnly: false },
-                            restore: { show: true },
-                            saveAsImage: { show: true }
-                        }
-                    },
-                    series: [
-                        {
-                            name: '面积模式',
-                            type: 'pie',
-                            radius: [50, 250],
-                            center: ['50%', '50%'],
-                            roseType: 'area',
-                            itemStyle: { borderRadius: 8 },
-                            data: [
-                                { value: 40, name: 'rose 1' },
-                                { value: 38, name: 'rose 2' },
-                                { value: 32, name: 'rose 3' },
-                                { value: 30, name: 'rose 4' },
-                                { value: 28, name: 'rose 5' },
-                                { value: 26, name: 'rose 6' },
-                                { value: 22, name: 'rose 7' },
-                                { value: 18, name: 'rose 8' }
-                            ]
-                        }
-                    ]
-                };
-                this.myChart1.setOption(option);
-                window.addEventListener('resize', () => {
-                    this.myChart1.resize();
-                });
-            });
-        },
-        getEchart2() {
-            this.$nextTick(() => {
-                this.$echarts.init(document.getElementById('echart2')).dispose();
-                this.myChart2 = this.$echarts.init(document.getElementById('echart2'));
-                let option = {
-                    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-                    yAxis: { type: 'value' },
-                    series: [
-                        {
-                            data: [120, 200, 150, 80, 70, 110, 130],
-                            type: 'bar',
-                            showBackground: true,
-                            backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }
-                        }
-                    ]
-                };
-                this.myChart2.setOption(option);
-                window.addEventListener('resize', () => {
-                    this.myChart2.resize();
-                });
-            });
-        },
-        getEchart3() {
-            this.$nextTick(() => {
-                this.$echarts.init(document.getElementById('echart3')).dispose();
-                this.myChart3 = this.$echarts.init(document.getElementById('echart3'));
-                let option = {
-                    xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
-                    yAxis: { type: 'value' },
-                    series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {} }]
-                };
-                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 option = {
-                    xAxis: {},
-                    yAxis: {},
-                    series: [
-                        {
-                            data: [
-                                [10, 40],
-                                [50, 100],
-                                [40, 20]
-                            ],
-                            type: 'line'
-                        }
-                    ]
-                };
-                this.myChart4.setOption(option);
-                window.addEventListener('resize', () => {
-                    this.myChart4.resize();
-                });
-            });
-        }
-    }
+    getEchart1() {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("echart1")).dispose();
+        this.myChart1 = this.$echarts.init(document.getElementById("echart1"));
+        let option = {
+          title: {
+            text: "装置数量统计",
+          },
+          legend: { top: "bottom" },
+          toolbox: {
+            show: true,
+          },
+          series: [
+            {
+              name: "面积模式",
+              type: "pie",
+              radius: [50, 120],
+              center: ["50%", "50%"],
+              roseType: "area",
+              itemStyle: { borderRadius: 8 },
+              data: [
+                { value: 40, name: "rose 1" },
+                { value: 38, name: "rose 2" },
+                { value: 32, name: "rose 3" },
+                { value: 30, name: "rose 4" },
+                { value: 28, name: "rose 5" },
+                { value: 26, name: "rose 6" },
+                { value: 22, name: "rose 7" },
+                { value: 18, name: "rose 8" },
+              ],
+            },
+          ],
+        };
+        this.myChart1.setOption(option);
+        window.addEventListener("resize", () => {
+          this.myChart1.resize();
+        });
+      });
+    },
+    getEchart2() {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("echart2")).dispose();
+        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
+        let option = {
+          title: {
+            text: "隐患分类统计",
+          },
+          xAxis: {
+            type: "category",
+            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          },
+          yAxis: { type: "value" },
+          series: [
+            {
+              data: [120, 200, 150, 80, 70, 110, 130],
+              type: "bar",
+              showBackground: true,
+              backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
+            },
+          ],
+        };
+        this.myChart2.setOption(option);
+        window.addEventListener("resize", () => {
+          this.myChart2.resize();
+        });
+      });
+    },
+    getEchart3() {
+      this.$nextTick(() => {
+        this.$echarts.init(document.getElementById("echart3")).dispose();
+        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
+        let option = {
+          title: {
+            text: "装置信息统计",
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          },
+          yAxis: { type: "value" },
+          series: [
+            {
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: "line",
+              areaStyle: {},
+            },
+          ],
+        };
+        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 option = {
+          title: {
+            text: "装置在线统计",
+          },
+          tooltip: {
+            trigger: "item",
+          },
+          legend: {
+            top: "5%",
+            left: "center",
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["40%", "70%"],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: "#fff",
+                borderWidth: 2,
+              },
+              label: {
+                show: false,
+                position: "center",
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 40,
+                  fontWeight: "bold",
+                },
+              },
+              labelLine: {
+                show: false,
+              },
+              data: [
+                { value: 1048, name: "在线" },
+                { value: 735, name: "离线" },
+              ],
+            },
+          ],
+        };
+        this.myChart4.setOption(option);
+        window.addEventListener("resize", () => {
+          this.myChart4.resize();
+        });
+      });
+    },
+  },
 };
 </script>
-<style scoped>
-.echart-top {
+<style lang="less">
+.echartsPage {
+  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;
-    width: 100%;
-    height: 500px;
+
+    .el-card {
+      width: 48%;
+      height: 100%;
+      .el-card__body {
+        height: calc(100% - 40px);
+      }
+    }
+  }
 }
-</style>
+</style>

vue.config.js

@@ -1,5 +1,6 @@
 const { defineConfig } = require("@vue/cli-service");
 const path = require("path");
+const webpack = require("webpack");
 module.exports = defineConfig({
   //打包清除console
   chainWebpack(config) {
@@ -37,4 +38,14 @@ module.exports = defineConfig({
       },
     },
   },
+  chainWebpack: (config) => {
+    config.plugin("provide").use(webpack.ProvidePlugin, [
+      {
+        $: "jquery",
+        jquery: "jquery",
+        jQuery: "jquery",
+        "window.jQuery": "jquery",
+      },
+    ]);
+  },
 });