youhua

package-lock.json

@@ -3034,6 +3034,16 @@
       "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
+      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -3672,6 +3682,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -4813,6 +4828,14 @@
         "slash": "^3.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -7243,6 +7266,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
+      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -7879,6 +7907,11 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -8062,6 +8095,14 @@
       "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-5.0.1.tgz",
       "integrity": "sha512-mWjFJzUqA4lG+DmsmibvMpoiBnl+IH2SSeiiQ3i5M0t1y9FknTxnGT0DsMb2YdJLgjYMEK3sYOWzqgLnZMH8Lg=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
+      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "swiper": "^10.2.0",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^5.0.1",
+    "vue-clipboard2": "^0.3.3",
     "vue-lazyload": "^1.3.3",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

@@ -1,10 +1,61 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view></router-view>
   </div>
 </template>
 
-<style lang="less">
-#app {
-}
-</style>
+<script>
+import { mapActions } from "vuex";
+
+export default {
+  name: "App",
+  methods: {
+    ...mapActions("cache", ["addCache", "removeCache"]),
+    // 收集缓存（通过监听）
+    collectCaches() {
+      // 收集当前路由相关的缓存
+      this.$route.matched.forEach((routeMatch) => {
+        const instance = routeMatch.components?.default;
+        const componentName = instance?.name;
+        console.log(componentName);
+        if (process.env.NODE_ENV === "development") {
+          this.checkRouteComponentName(componentName, instance?.__file);
+        }
+        // 配置了meta.keepAlive的路由组件添加到缓存
+        if (routeMatch.meta.keepAlive) {
+          if (!componentName) {
+            console.warn(`${routeMatch.path} 路由的组件名称name为空`);
+            return;
+          }
+          this.addCache(componentName);
+        } else {
+          this.removeCache(componentName);
+        }
+      });
+    },
+    // 检测路由组件名称是否重复（组件重名会缓存到不该缓存的组件，而且不容易排查问题，所以开发环境时检测重名）
+    checkRouteComponentName(name, file) {
+      if (!this.cmpNames) this.cmpNames = {};
+      if (this.cmpNames[name]) {
+        if (this.cmpNames[name] !== file) {
+          console.warn(
+            `${file} 与${this.cmpNames[name]} 组件名称重复： ${name}`
+          );
+        }
+      } else {
+        this.cmpNames[name] = file;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      immediate: true,
+      handler() {
+        this.collectCaches();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>

src/assets/css/global.less

@@ -1,5 +1,5 @@
 //Brand @color
-@color-primary: #169e8c;
+@color-primary: #1c77ac;
 @color-primary-light: mix(@color-white, @color-primary, 80%);
 @color-primary-lighter: mix(@color-white, @color-primary, 90%);
 //Functional @color

src/assets/css/reset.css

@@ -2,7 +2,12 @@
   margin: 0;
   padding: 0;
 }
-
+img {
+  -webkit-user-select: none; /* Safari 3.1+ */
+  -moz-user-select: none; /* Firefox 2+ */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Standard syntax */
+}
 html,
 body,
 #app,

src/assets/fonts - 副本/iconfont.css

@@ -0,0 +1,61 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1690188947515') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -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";
+}
+
+.icon-dianli:before {
+  content: "\e649";
+}
+
+.icon-dianlihangye:before {
+  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/assets/fonts/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1690188947515') format('truetype');
+  src: url('iconfont.ttf?t=1700030201509') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-1wenhe:before {
+  content: "\e653";
+}
+
 .icon-paizhao:before {
   content: "\e6ba";
 }
@@ -43,6 +47,10 @@
   content: "\e962";
 }
 
+.icon-qixiang:before {
+  content: "\e67c";
+}
+
 .icon-shexiangtou-lixian:before {
   content: "\ef1c";
 }
@@ -59,3 +67,7 @@
   content: "\e681";
 }
 
+.icon-fubing:before {
+  content: "\e7ac";
+}
+

src/components/Home.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="wrapper">
     <v-head></v-head>
+    <layout-tabs></layout-tabs>
+
     <div class="content-box">
       <div class="content">
-        <transition name="move" mode="out-in">
-          <router-view></router-view>
-        </transition>
+        <!-- <transition name="move" mode="out-in"> -->
+        <keep-alive :include="caches">
+          <router-view v-if="isRenderTab"></router-view>
+        </keep-alive>
+        <!-- </transition> -->
       </div>
     </div>
   </div>
@@ -13,13 +17,19 @@
 
 <script>
 import vHead from "./header.vue";
-
+import LayoutTabs from "./LayoutTabs.vue";
+import { mapState } from "vuex";
 export default {
   data() {
     return {};
   },
   components: {
     vHead,
+    LayoutTabs,
+  },
+  computed: {
+    ...mapState("cache", ["caches"]),
+    ...mapState(["isRenderTab"]),
   },
   created() {},
 };
@@ -31,7 +41,7 @@ export default {
     position: absolute;
     left: 0px;
     right: 0;
-    top: 56px;
+    top: 92px;
     bottom: 0;
     //padding-bottom: 30px;
     -webkit-transition: left 0.3s ease-in-out;

src/components/LayoutTabs.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="layout-tabs">
+    <el-tabs
+      type="border-card"
+      v-model="curTabKey"
+      closable
+      @tab-click="clickTab"
+      @tab-remove="removeTab"
+    >
+      <el-tab-pane
+        v-for="item in tabs"
+        :label="item.title"
+        :name="item.tabKey"
+        :key="item.tabKey"
+      >
+        <template slot="label"
+          >{{ item.title }}
+          <i
+            v-if="curTabKey === item.tabKey"
+            class="el-icon-refresh"
+            @click="refreshTab(item)"
+          ></i
+        ></template>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="close-tabs" @click="closeOtherTabs">关闭其他</div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapActions } from "vuex";
+import EventBus from "@/utils/event-bus";
+
+export default {
+  name: "LayoutTabs",
+  props: {
+    // 【根据项目修改】tab页面在路由的第几层，或者说第几层的 router-view 组件（当前项目为第二层）
+    tabRouteViewDepth: {
+      type: Number,
+      default: 2,
+    },
+    // tab页面的key值，从route对象中取，一个key值对应一个tab页面
+    // 默认为matchRoute.path值
+    getTabKey: {
+      type: Function,
+      default: function (routeMatch /* , route */) {
+        return routeMatch.path;
+      },
+    },
+    // tab页签的标题，默认从路由meta.title中获取
+    tabTitleKey: {
+      type: String,
+      default: "title",
+    },
+  },
+  data() {
+    return {
+      tabs: [],
+      curTabKey: "",
+    };
+  },
+  methods: {
+    ...mapActions("cache", ["addCache", "removeCache", "removeCacheEntry"]),
+    ...mapMutations(["setIsRenderTab"]),
+    // 切换tab
+    changeCurTab() {
+      // 当前路由信息
+      const { path, query, params, hash, matched } = this.$route;
+      // tab标签页路由信息：meta、componentName
+      const routeMatch = matched[this.tabRouteViewDepth - 1];
+      const meta = routeMatch.meta;
+      const componentName = routeMatch.components?.default?.name;
+      // 获取tab标签页信息：tabKey标签页key值；title-标签页标题；tab-存在的标签页
+      const tabKey = this.getTabKey(routeMatch, this.$route);
+      const title = String(meta[this.tabTitleKey] || "");
+      const tab = this.tabs.find((tab) => tab.tabKey === tabKey);
+
+      if (!tabKey) {
+        // tabKey默认为路由的name值
+        console.warn(
+          `LayoutTabs组件：${path} 路由没有匹配的tab标签页，如有需要请配置tab标签页的key值`
+        );
+        return;
+      }
+
+      // 同一个路由，但是新旧路径不同时，需要清除路由缓存。例如route.path配置为 '/detail/:id'时路径会不同
+      // 这里判断 props.tabRouteViewDepth === matched.length 必须是跟tab同级路由，否则会影响多级路由缓存
+      if (
+        tab &&
+        tab.path !== path &&
+        this.tabRouteViewDepth === matched.length
+      ) {
+        this.removeCacheEntry(componentName || "");
+        tab.title = "";
+      }
+
+      const newTab = {
+        tabKey,
+        title: tab?.title || title,
+        path,
+        params,
+        query,
+        hash,
+        componentName,
+      };
+      tab ? Object.assign(tab, newTab) : this.tabs.push(newTab);
+      this.curTabKey = tabKey;
+    },
+    // 点击tab
+    clickTab(pane) {
+      if (!pane.index) return;
+
+      const tab = this.tabs[Number(pane.index)];
+      if (tab.path !== this.$route.path) {
+        this.gotoTab(tab);
+      }
+    },
+    // 移除tab
+    async removeTab(tabKey) {
+      // 剩下一个时不能删
+      if (this.tabs.length === 1) return;
+
+      const index = this.tabs.findIndex((tab) => tab.tabKey === tabKey);
+      if (index < -1) return;
+
+      const tab = this.tabs[index];
+      this.tabs.splice(index, 1);
+
+      // 如果删除的是当前tab，则切换到最后一个tab
+      if (tab.tabKey === this.curTabKey) {
+        const lastTab = this.tabs[this.tabs.length - 1];
+        lastTab && this.gotoTab(lastTab);
+      }
+      this.removeCache(tab.componentName || "");
+    },
+    // 跳转tab页面
+    async gotoTab(tab) {
+      await this.$router.push({
+        path: tab.path,
+        query: tab.query,
+        hash: tab.hash,
+      });
+    },
+    // 关闭非当前页的所有tab页签
+    closeOtherTabs() {
+      this.tabs
+        .filter((tab) => tab.tabKey !== this.curTabKey)
+        .forEach((tab) => {
+          this.removeCache(tab.componentName || "");
+        });
+      this.tabs = this.tabs.filter((tab) => tab.tabKey === this.curTabKey);
+    },
+    // 刷新当前tab页面
+    async refreshTab(tab) {
+      this.setIsRenderTab(false);
+      await this.removeCacheEntry(tab.componentName);
+      this.setIsRenderTab(true);
+    },
+    // 关闭tab页面，默认关闭当前页
+    async closeLayoutTab(tabKey = this.curTabKey) {
+      const index = this.tabs.findIndex((tab) => tab.tabKey === tabKey);
+      if (index > -1) {
+        this.removeCache(this.tabs[index].componentName);
+        this.tabs.splice(index, 1);
+      }
+    },
+    // 设置当前tab的标题
+    setCurTabTitle(title) {
+      const curTab = this.tabs.find((tab) => tab.tabKey === this.curTabKey);
+      if (curTab) {
+        curTab.title = title;
+      }
+    },
+  },
+  watch: {
+    "$route.path": {
+      handler() {
+        this.changeCurTab();
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // 对外提供的事件：关闭弹窗；设置tab标题
+    EventBus.$on("LayoutTabs:closeTab", (tabKey) => {
+      this.closeLayoutTab(tabKey);
+    });
+    EventBus.$on("LayoutTabs:setTabTitle", (title) => {
+      this.setCurTabTitle(title);
+    });
+  },
+};
+</script>
+
+<style lang="less">
+.layout-tabs {
+  position: relative;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f5f7fa;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+  //background-color: #fcc;
+  .close-tabs {
+    padding-right: 12px;
+    cursor: pointer;
+    color: #999;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    &:hover {
+      color: #169e8c;
+    }
+  }
+  .el-tabs--border-card {
+    height: 30px;
+    flex: 1;
+    margin-right: 12px;
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+  }
+  .el-icon-refresh {
+    margin: 0px 8px 0px 4px;
+  }
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #fff;
+    background-color: #169e8c;
+  }
+  .el-tabs--border-card
+    > .el-tabs__header
+    .el-tabs__item:not(.is-disabled):hover {
+    color: #fff;
+    background-color: #169e8c;
+  }
+  .el-tabs__item .el-icon-close {
+    transition: none;
+  }
+
+  .el-tabs__item {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    padding: 0 10px !important;
+  }
+  .el-tabs__content {
+    display: none;
+  }
+}
+</style>

src/components/Sidebar.vue

@@ -106,10 +106,10 @@ export default {
               index: "/devicePhotoSchedule",
               title: "拍照时间表设置",
             },
-            {
-              index: "/deviceReport",
-              title: "装置报表",
-            },
+            // {
+            //   index: "/deviceReport",
+            //   title: "装置报表",
+            // },
             {
               index: "/waterMark",
               title: "水印下发",
@@ -134,6 +134,10 @@ export default {
               index: "/userManagement",
               title: "用户管理",
             },
+            {
+              index: "/roleManagement",
+              title: "角色管理",
+            },
             {
               index: "/globalTools",
               title: "全局设置",
@@ -287,10 +291,38 @@ export default {
           ],
         },
       ],
+      hnjcitems: [
+        {
+          icon: "el-icon-s-home",
+          index: "stritl",
+          title: "首页",
+        },
+        {
+          icon: "el-icon-camera",
+          index: "/realTimeMonitor",
+          title: "实时监控",
+        },
+        {
+          icon: "el-icon-film",
+          index: "/pictureRotation",
+          title: "图片轮巡",
+        },
+        {
+          icon: "el-icon-bell",
+          index: "photoAlarm",
+          title: "告警处理",
+        },
+        // {
+        //   icon: "el-icon-search",
+        //   index: "/realTimeSearch",
+        //   title: "历史图片",
+        // },
+      ],
 
       role: "",
     };
   },
+
   watch: {
     $route() {
       this.setCurrentRoute();
@@ -298,10 +330,12 @@ export default {
   },
   methods: {
     setCurrentRoute() {
+      console.log(this.$route.path);
       this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
     },
   },
   created() {
+    console.log("我是被选中的", this.activeIndex);
     this.setCurrentRoute();
     this.role = localStorage.getItem("role");
     console.log("用户管理");
@@ -313,9 +347,12 @@ export default {
       this.items = this.items1;
     } else if (this.role == 2) {
       this.items = this.items2;
+    } else if (this.role == 4) {
+      this.items = this.hnjcitems;
     }
 
     console.log(this.items);
+    console.log(this.activeIndex);
   },
 };
 </script>
@@ -411,5 +448,12 @@ export default {
     border: 1px solid #169e8c;
     background-color: #169e8c;
   }
+  .el-menu-item [class^="iconfont"] {
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+  }
 }
 </style>

src/components/header.vue

@@ -41,6 +41,7 @@ export default {
   data() {
     return {
       userName: localStorage.getItem("userName"),
+      role: localStorage.getItem("role"),
     };
   },
   methods: {

src/echartsDemo.vue

@@ -0,0 +1,452 @@
+<template>
+  <div class="echartsBox">
+    <div class="gropName">
+      <el-checkbox-group v-model="checkList">
+        <el-checkbox
+          v-for="item in qtOption"
+          :label="item.groupName"
+          :key="item.groupName"
+          ><span v-if="item.groupName == 'H2'">{{ item.groupName }}(氢气)</span>
+          <span v-if="item.groupName == 'CO'"
+            >{{ item.groupName }}(一氧化碳)</span
+          >
+          <span v-if="item.groupName == 'CH4'">{{ item.groupName }}(甲烷)</span>
+          <span v-if="item.groupName == 'C2H4'"
+            >{{ item.groupName }}(乙烯)</span
+          >
+          <span v-if="item.groupName == 'C2H6'"
+            >{{ item.groupName }}(乙烷)</span
+          >
+          <span v-if="item.groupName == 'C2H2'"
+            >{{ item.groupName }}(乙炔)</span
+          ></el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div id="demo1"></div>
+    <div id="demo2"></div>
+    <div id="demo3"></div>
+  </div>
+</template>
+<script>
+import axios from "axios";
+export default {
+  name: "",
+  data() {
+    return {
+      checkList: [], //选中勾选框
+      qtOption: [], //气体数据
+      myChart: "",
+      xData1: [], //横坐标
+      lineData1: [], //纵坐标
+      yMax1: "", //y轴最大值
+      channelCrests1: [], //气体数组
+      dataPointer1: [], //气体点
+
+      xData2: [], //横坐标
+      lineData2: [], //纵坐标
+      yMax2: "", //y轴最大值
+      channelCrests2: [], //气体数组
+      dataPointer2: [], //气体点
+
+      xData3: [], //横坐标
+      lineData3: [], //纵坐标
+      yMax3: "", //y轴最大值
+      channelCrests3: [], //气体数组
+      dataPointer3: [], //气体点
+    };
+  },
+  created() {
+    this.getMenuData1();
+    this.getMenuData2();
+    this.getMenuData3();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //图表1
+    getMenuData1() {
+      axios
+        .get("/aa.json")
+        .then((res) => {
+          console.log("getMenuData", res);
+          // this.qtOption = res.data.config.channels[0].crests;//气体
+          // console.log(this.qtOption);
+          this.lineData1 = res.data.data[0]; //纵坐标数据
+          this.yMax1 = res.data.config.yMax; //y轴最大值
+
+          this.channelCrests1 = res.data.config.channels[0].crests;
+
+          var timeSpan = 1; //时间间隔
+          for (
+            var i = 0;
+            i < res.data.config.numberOfData * timeSpan;
+            i = i + timeSpan
+          ) {
+            this.xData1.push(i);
+          }
+          for (var i = 0; i < this.channelCrests1.length; i++) {
+            this.dataPointer1.push({
+              name: this.channelCrests1[i].groupName,
+              label: this.channelCrests1[i].crestNo + "",
+              xAxis: this.channelCrests1[i].crestTime,
+              yAxis: this.lineData1[this.channelCrests1[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer1);
+
+          //横坐标数据
+          this.getEchart1();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    //图表2
+    getMenuData2() {
+      axios
+        .get("/bb.json")
+        .then((res) => {
+          this.lineData2 = res.data.data[0]; //纵坐标数据
+          this.yMax2 = res.data.config.yMax; //y轴最大值
+
+          this.channelCrests2 = res.data.config.channels[0].crests;
+          var timeSpan = 1; //时间间隔
+          for (
+            var i = 0;
+            i < res.data.config.numberOfData * timeSpan;
+            i = i + timeSpan
+          ) {
+            this.xData2.push(i);
+          }
+          for (var i = 0; i < this.channelCrests2.length; i++) {
+            this.dataPointer2.push({
+              name: this.channelCrests2[i].groupName,
+              label: this.channelCrests2[i].crestNo + "",
+              xAxis: this.channelCrests2[i].crestTime,
+              yAxis: this.lineData2[this.channelCrests2[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer2);
+
+          //横坐标数据
+          //横坐标数据
+          this.getEchart2();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    //图表3
+    getMenuData3() {
+      axios
+        .get("/cc.json")
+        .then((res) => {
+          this.lineData3 = res.data.data[0]; //纵坐标数据
+          this.yMax3 = res.data.config.yMax; //y轴最大值
+          this.channelCrests3 = res.data.config.channels[0].crests;
+          var timeSpan = 1; //时间间隔
+          for (
+            var i = 0;
+            i < res.data.config.numberOfData * timeSpan;
+            i = i + timeSpan
+          ) {
+            this.xData3.push(i);
+          }
+          console.log(this.lineData3);
+          for (var i = 0; i < this.channelCrests3.length; i++) {
+            this.dataPointer3.push({
+              name: this.channelCrests3[i].groupName,
+              label: this.channelCrests3[i].crestNo + "",
+              xAxis: this.channelCrests3[i].crestTime,
+              yAxis: this.lineData3[this.channelCrests3[i].crestTime],
+            });
+          }
+          console.log(this.dataPointer3);
+
+          //横坐标数据
+          this.getEchart3();
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    //装置数量统计
+    getEchart1() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(document.getElementById("demo1"));
+        let option = {
+          title: {
+            text: "图谱1",
+            left: "left",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData1, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData1,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer1,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+    getEchart2() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(document.getElementById("demo2"));
+        let option = {
+          title: {
+            text: "图谱2",
+            left: "left",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData2, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData2,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer2,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+    getEchart3() {
+      this.$nextTick(() => {
+        let that = this;
+        that.myChart = this.$echarts.init(document.getElementById("demo3"));
+        let option = {
+          title: {
+            text: "图谱3",
+            left: "left",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              animation: false,
+            },
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+            {
+              start: 0,
+              end: 100,
+            },
+          ],
+          xAxis: {
+            type: "category",
+            data: this.xData3, // 把时间组成的数组接过来，放在x轴上
+            boundaryGap: false,
+            showMaxLabel: true,
+            name: "单位:s", // 这个设置只在末尾添加单位
+          },
+
+          yAxis: {
+            type: "value",
+            scale: true,
+            show: true, //   前提：  y轴肯定是要显示的
+            name: "单位:mV", //  你的单位写在这就可以
+
+            nameTextStyle: {
+              //  单位样式
+              color: "#000", //  字体颜色
+              fontSize: 10, //  字体大小
+              padding: [0, 28, 4, 0], //  内填充
+            },
+          },
+          series: [
+            {
+              data: this.lineData3,
+              type: "line",
+              smooth: true,
+              symbol: "none",
+              sampling: "lttb",
+              itemStyle: {
+                color: "rgb(255, 70, 131)",
+              },
+              markPoint: {
+                data: this.dataPointer3,
+                symbol: "pin",
+                symbolSize: 18,
+                itemStyle: {
+                  normal: {
+                    label: {
+                      show: true,
+                      position: "top",
+                      distance: 0,
+                      formatter: function (params) {
+                        console.log(params);
+                        return params.data.label + ":" + params.name;
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      });
+    },
+  },
+};
+</script>
+<style lang="less">
+.echartsBox {
+  height: calc(100% - 32px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  // justify-content: space-around;
+  #demo1,
+  #demo2,
+  #demo3 {
+    height: 400px;
+    width: 80%;
+  }
+  .gropName {
+    .el-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      .el-checkbox {
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+  }
+}
+</style>

src/fubingCommon/leftTree.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="leftTreeBox">
+    <div class="searchBar">
+      <el-input
+        placeholder="输入关键字进行过滤"
+        v-model="filterText"
+        prefix-icon="el-icon-search"
+      >
+      </el-input>
+    </div>
+    <el-tree
+      ref="tree"
+      :data="lineTreeData"
+      :props="defaultProps"
+      node-key="id"
+      :default-expanded-keys="defaultExpandedKeys"
+      highlight-current
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :current-node-key="currentNodekey"
+      @node-click="handleNodeClick"
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span v-if="node.level === 1">
+          <span class="iconfont icon-dianli" style="margin-right: 6px"></span>
+          <span>{{ node.label }} </span>
+        </span>
+        <span v-else-if="node.level === 2">
+          <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
+          </span>
+          <span
+            >{{ node.label }}
+            <span class="num">({{ data.list.length }}) </span></span
+          >
+        </span>
+        <span v-else>
+          <span
+            class="iconfont icon-shexiangtoulixian"
+            v-if="data.onlinestatus == 0"
+            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+            style="margin-right: 6px"
+          ></span>
+          <span
+            class="iconfont icon-shexiangtou-lixian"
+            v-else
+            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+            style="margin-right: 6px"
+          ></span>
+          <span
+            :id="data.id"
+            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+            >{{ node.label }}</span
+          >
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+<script>
+import { getdyTreeListJoggle } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      filterText: "", //查询字段过滤
+      lineTreeData: [],
+      defaultExpandedKeys: [], //默认展开
+      collapsedKeys: [], // 收起节点的key数组
+      defaultProps: {
+        //指定参数格式回显数据
+        children: "list",
+        label: "name",
+      },
+      currentData: {}, //当前选中的数据
+      currentNodekey: "", //默认选中的节点树,
+    };
+  },
+  watch: {
+    // filterText(val) {
+    //   console.log(val);
+    //   this.$refs.tree.filter(val);
+    //   console.log(this.$refs.tree);
+    // },
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
+  created() {
+    this.getLineTreeList(); //获取树状图
+  },
+  methods: {
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      this.searchName = data.name + data.cmdid;
+      //console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+    },
+    //获取树状图列表
+    getLineTreeList() {
+      getdyTreeListJoggle({ type: 1 })
+        .then((res) => {
+          this.lineTreeData = res.data.list;
+          this.currentData = JSON.parse(localStorage.getItem("currentData"));
+          this.lineTreeData.forEach((node) => {
+            if (node.list) {
+              node.list.forEach((child) => {
+                this.defaultExpandedKeys.push(child.id);
+              });
+            } else {
+              this.defaultExpandedKeys.push(node.id);
+            }
+          });
+          this.defaultExpandedKeys =
+            JSON.parse(localStorage.getItem("defaultKey")) !== null
+              ? JSON.parse(localStorage.getItem("defaultKey"))
+              : this.defaultExpandedKeys; //获取保存的defaultKey ;
+
+          console.log(this.defaultExpandedKeys);
+          // if (this.lineTreeData[0].list[0].list.length > 0) {
+          // }
+          if (
+            this.currentData !== null &&
+            Object.keys(this.currentData).length !== 0
+          ) {
+            this.currentNodekey = this.currentData.id;
+            this.handleNodeClick(this.currentData);
+          } else {
+            this.currentData = this.lineTreeData[0]; //第一个选中的数据
+            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+            this.handleNodeClick(this.currentData);
+          }
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    //点击当前选中的treenode
+    handleNodeClick(data) {
+      this.currentData = data;
+      this.$parent.getCurrentData(this.currentData);
+    },
+  },
+};
+</script>
+<style lang="less">
+.leftTreeBox {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  .searchBar {
+    width: 94%;
+    margin: 0 auto;
+    margin-bottom: 8px;
+  }
+  .el-tree {
+    overflow-y: scroll;
+    overflow-x: hidden;
+    .el-tree-node__content {
+      height: 32px;
+      font-size: 12px;
+    }
+    .custom-tree-node {
+      color: #333;
+      overflow: hidden;
+      span {
+        display: flex;
+        display: inline-table;
+        overflow: hidden;
+        align-items: center;
+      }
+      .num {
+        color: #169e8c;
+      }
+    }
+  }
+
+  .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    // 设置颜色
+    color: #fff;
+    background: #169e8c;
+    .custom-tree-node {
+      color: #fff;
+      //overflow: hidden;
+      span {
+        display: flex;
+        //overflow: hidden;
+        align-items: center;
+        .num {
+          color: #fff;
+        }
+        .iconfont {
+          //width: 30px;
+          display: inline-table;
+        }
+      }
+    }
+  }
+
+  .disconnect {
+    color: #d3d3d3;
+  }
+}
+</style>

src/main.js

@@ -57,7 +57,16 @@ router.beforeEach((to, from, next) => {
   const role = localStorage.getItem("role");
   const token = localStorage.getItem("token");
   console.log(role, token);
-  if (!token && to.path !== "/login") {
+  // if (token && role == "5") {
+  //   next({
+  //     path: "/weather",
+  //   });
+  // }
+  if (to.path == "/echarts") {
+    console.log("asdasdasdasd");
+    // 在免登录白名单，直接进入
+    next();
+  } else if (!token && to.path !== "/login") {
     //next("/login");
     next({
       path: "/login",

src/router/index.js

@@ -4,133 +4,146 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 
 const routes = [
-  { path: "/", redirect: "/login" },
   {
-    path: "/stritl",
+    path: "/",
+    redirect: "/stritl",
     component: () => import("../components/Home.vue"),
-    meta: { title: "首页" },
     children: [
       {
         path: "/stritl",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboard" */ "../views/homePage/index.vue"
-          ),
+        component: () => import("../views/homePage/index.vue"),
+        name: "stritl",
         meta: {
           title: "首页",
           icon: "el-icon-s-home",
+          keepAlive: true,
         },
       },
       {
         path: "/realTimeMonitor",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
-          ),
+        component: () => import("../views/realTimeMonitor/index.vue"),
+        name: "realTimeMonitor",
         meta: {
           title: "实时监控",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
       {
         path: "/pictureRotation",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/pictureRotation/index.vue"
-          ),
+        component: () => import("../views/pictureRotation/index.vue"),
+        name: "pictureRotation",
         meta: {
           title: "图片轮巡",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
       {
         path: "/realTimeSearch",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/realTimeSearch/index.vue"
-          ),
+
+        component: () => import("../views/realTimeSearch/index.vue"),
+        name: "realTimeSearch",
         meta: {
           title: "历史图片",
           permission: true,
           icon: "el-icon-camera",
+          //keepAlive: true,
         },
       },
       {
         path: "/photoAlarm",
-        component: () =>
-          import(
-            /* webpackChunkName: "home" */ "../views/alarmHandling/index.vue"
-          ),
+        component: () => import("../views/alarmHandling/index.vue"),
+        name: "alarmHandling",
         meta: {
           title: "告警处理",
           permission: true,
           icon: "el-icon-camera",
+          keepAlive: true,
         },
       },
 
       {
         path: "/userManagement",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/system/userManagement.vue"
-          ),
-        meta: { title: "用户管理", icon: "el-icon-monitor" },
+        component: () => import("../views/system/userManagement.vue"),
+        name: "userManagement",
+        meta: { title: "用户管理", icon: "el-icon-monitor", keepAlive: true },
+      },
+      {
+        path: "/roleManagement",
+        component: () => import("../views/system/roleManagement/index.vue"),
+        name: "roleManagement",
+        meta: { title: "角色管理", icon: "el-icon-monitor", keepAlive: true },
       },
       {
         path: "/globalTools",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/system/globalTools/index.vue"
-          ),
-        meta: { title: "全局设置" },
+        component: () => import("../views/system/globalTools/index.vue"),
+        name: "globalTools",
+        meta: { title: "全局设置", keepAlive: true },
       },
       {
         path: "/lineInformation",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/lineInformation/index.vue"
-          ),
-        meta: { title: "线路信息管理", icon: "" },
+        component: () => import("../views/lineInformation/index.vue"),
+        name: "lineInformation",
+        meta: { title: "线路信息管理", icon: "", keepAlive: true },
       },
       {
         path: "/towerInformation",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/towerInformation/index.vue"
-          ),
-        meta: { title: "杆塔信息管理", icon: "" },
+        component: () => import("../views/towerInformation/index.vue"),
+        name: "towerInformation",
+        meta: { title: "杆塔信息管理", icon: "", keepAlive: true },
       },
       {
         path: "/cameraChannel",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/cameraChannel/index.vue"
-          ),
-        meta: { title: "通道管理", icon: "" },
+        component: () => import("../views/cameraChannel/index.vue"),
+        name: "cameraChannel",
+        meta: { title: "通道管理", icon: "", keepAlive: true },
       },
       {
         path: "/photographicDevice",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/photographicDevice/index.vue"
-          ),
-        meta: { title: "拍照装置管理", icon: "" },
+        component: () => import("../views/photographicDevice/index.vue"),
+        name: "photographicDevice",
+        meta: { title: "拍照装置管理", icon: "", keepAlive: true },
       },
       {
         path: "/devicePhotoSchedule",
-        component: () =>
-          import(
-            /* webpackChunkName: "tabs" */ "../views/devicePhotoSchedule/index.vue"
-          ),
-        meta: { title: "拍照时间表设置", icon: "" },
+        component: () => import("../views/devicePhotoSchedule/index.vue"),
+        name: "devicePhotoSchedule",
+        meta: { title: "拍照时间表设置", icon: "", keepAlive: true },
+      },
+      {
+        path: "/waterMark",
+        component: () => import("../views/waterMark/index.vue"),
+        name: "waterMark",
+        meta: { title: "水印下发", icon: "", keepAlive: true },
+      },
+      {
+        path: "/echarts",
+        component: () => import("../echartsDemo.vue"),
+        name: "echartsDemo",
+        meta: { title: "echarts图表", icon: "", keepAlive: true },
       },
+      //气象检测
+      // {
+      //   path: "/weather",
+      //   component: () => import("../views/weather/index.vue"),
+      //   name: "weather",
+      //   meta: { title: "气象检测", icon: "", keepAlive: true },
+      // },
+      // //覆冰
+      // {
+      //   path: "/icing",
+      //   component: () => import("../views/icing/index.vue"),
+      //   name: "icing",
+      //   meta: { title: "覆冰", icon: "", keepAlive: true },
+      // },
     ],
   },
-
   {
     path: "/login",
+    name: "login",
     component: () => import("../views/login/index.vue"),
     meta: { title: "登录" },
   },

src/store/cache.js

@@ -0,0 +1,57 @@
+import Vue from "vue";
+
+export default {
+  namespaced: true,
+  state: {
+    caches: [],
+  },
+  actions: {
+    // 添加缓存的路由组件
+    addCache({ state, dispatch }, componentName) {
+      if (Array.isArray(componentName)) {
+        componentName.forEach((item) => {
+          dispatch("addCache", item);
+        });
+        return;
+      }
+
+      const { caches } = state;
+      if (!componentName || caches.includes(componentName)) return;
+
+      caches.push(componentName);
+      console.log("缓存路由组件：", componentName);
+    },
+
+    // 移除缓存的路由组件
+    removeCache({ state, dispatch }, componentName) {
+      if (Array.isArray(componentName)) {
+        componentName.forEach((item) => {
+          dispatch("removeCache", item);
+        });
+        return;
+      }
+
+      const { caches } = state;
+      const index = caches.indexOf(componentName);
+      if (index > -1) {
+        console.log("清除缓存的路由组件：", componentName);
+        return caches.splice(index, 1)[0];
+      }
+    },
+    // 移除缓存的路由组件的实例
+    async removeCacheEntry({ dispatch }, componentName) {
+      const cacheRemoved = await dispatch("removeCache", componentName);
+      if (cacheRemoved) {
+        await Vue.nextTick();
+        dispatch("addCache", componentName);
+      }
+    },
+    // 清除缓存的路由组件的实例
+    clearEntry({ state, dispatch }) {
+      const { caches } = state;
+      caches.slice().forEach((key) => {
+        dispatch("removeCacheEntry", key);
+      });
+    },
+  },
+};

src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-
+import cacheModule from "./cache";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -16,6 +16,7 @@ export default new Vuex.Store({
     protocol: "",
     cmdId: "",
     channelIdList: [],
+    isRenderTab: true,
   },
   getters: {
     token: (state) => state.token,
@@ -73,7 +74,10 @@ export default new Vuex.Store({
     REMOVE_INFO(state) {
       localStorage.clear();
     },
+    setIsRenderTab(state, data) {
+      state.isRenderTab = data;
+    },
   },
   actions: {},
-  modules: {},
+  modules: { cache: cacheModule },
 });

src/utils/api/index.js

@@ -2,7 +2,7 @@ import request from "../request";
 //获取登录
 export function loginJoggle(data) {
   return request({
-    url: "/api/login",
+    url: "/xymanager/login",
     method: "post",
     data,
   });
@@ -10,7 +10,7 @@ export function loginJoggle(data) {
 //获取装置总数图表
 export function getTermStatistics(data) {
   return request({
-    url: "/api/getTermStatistics",
+    url: "/xymanager/getTermStatistics",
     method: "get",
     params: data,
   });
@@ -18,7 +18,7 @@ export function getTermStatistics(data) {
 //获取一周的装置告警
 export function getWeekAlarmStatistics(data) {
   return request({
-    url: "/api/getWeekAlarmStatistics",
+    url: "/xymanager/getWeekAlarmStatistics",
     method: "get",
     params: data,
   });
@@ -26,7 +26,7 @@ export function getWeekAlarmStatistics(data) {
 //获取当天告警分类统计
 export function getTodayAlarmStatistics(data) {
   return request({
-    url: "/api/getTodayAlarmStatistics",
+    url: "/xymanager/getTodayAlarmStatistics",
     method: "get",
     params: data,
   });
@@ -34,7 +34,7 @@ export function getTodayAlarmStatistics(data) {
 //首页查看数据
 export function getOnlineTerminalList(data) {
   return request({
-    url: "/api/getOnlineTerminalList",
+    url: "/xymanager/getOnlineTerminalList",
     method: "get",
     params: data,
   });
@@ -42,7 +42,7 @@ export function getOnlineTerminalList(data) {
 //导出数据
 export function getOnlineTerminalListExcel() {
   return request({
-    url: "/api/getOnlineTerminalListExcel",
+    url: "/xymanager/getOnlineTerminalListExcel",
     method: "post",
     responseType: "blob",
   });
@@ -51,7 +51,7 @@ export function getOnlineTerminalListExcel() {
 //修改用户
 export function updateUserApi(data) {
   return request({
-    url: "/api/updateUser",
+    url: "/xymanager/updateUser",
     method: "post",
     data,
   });
@@ -61,7 +61,7 @@ export function updateUserApi(data) {
 //获取线路树状结构
 export function getdyTreeListJoggle(data) {
   return request({
-    url: "/api/getdyTreeList",
+    url: "/xymanager/getdyTreeList",
     method: "get",
     params: data,
     headers: {
@@ -73,7 +73,7 @@ export function getdyTreeListJoggle(data) {
 
 export function getTowerAndPhotoList(data) {
   return request({
-    url: "/api/getTowerAndPhotoList",
+    url: "/xymanager/getTowerAndPhotoList",
     method: "post",
     data,
   });
@@ -81,7 +81,7 @@ export function getTowerAndPhotoList(data) {
 //获取通道
 export function getChannelByTermidJoggle(data) {
   return request({
-    url: "/api/getChannelByTermid",
+    url: "/xymanager/getChannelByTermid",
     method: "post",
     data,
   });
@@ -90,7 +90,7 @@ export function getChannelByTermidJoggle(data) {
 //获取图片接口
 export function getTerminalPhotoListJoggle(data) {
   return request({
-    url: "/api/getTerminalPhotoList",
+    url: "/xymanager/getTerminalPhotoList",
     method: "post",
     data,
   });
@@ -98,7 +98,7 @@ export function getTerminalPhotoListJoggle(data) {
 //判断装置是否在线
 export function getTermStatus(data) {
   return request({
-    url: "/api/getTermStatus",
+    url: "/xymanager/getTermStatus",
     method: "post",
     data,
     headers: {
@@ -110,7 +110,7 @@ export function getTermStatus(data) {
 
 export function setTermCamera(data) {
   return request({
-    url: "/api/setTermCamera",
+    url: "/xymanager/setTermCamera",
     method: "post",
     data,
     // headers: {
@@ -121,7 +121,7 @@ export function setTermCamera(data) {
 //统一返回数据
 export function getTermCameraRequest(data) {
   return request({
-    url: "/api/getTermCameraRequest",
+    url: "/xymanager/getTermCameraRequest",
     method: "post",
     data,
     // headers: {
@@ -133,7 +133,7 @@ export function getTermCameraRequest(data) {
 //手动拍 获取装置状态
 export function getTakePicStatusJoggle(data) {
   return request({
-    url: "/api/getTakePicStatus",
+    url: "/xymanager/getTakePicStatus",
     method: "get",
     params: data,
   });
@@ -142,14 +142,14 @@ export function getTakePicStatusJoggle(data) {
 //手动拍照获取最新图片
 export function getTakePicPhotoStatusJoggle(data) {
   return request({
-    url: "/api/getTakePicPhotoStatus",
+    url: "/xymanager/getTakePicPhotoStatus",
     method: "get",
     params: data,
   });
 }
 export function getDeviceList(data) {
   return request({
-    url: "/api/getTerminalStatus",
+    url: "/xymanager/getTerminalStatus",
     method: "post",
     data,
     headers: {
@@ -160,7 +160,7 @@ export function getDeviceList(data) {
 //获取最新装置信息aaa
 export function getinfoStatus(data) {
   return request({
-    url: "/api/getLastTermInfo",
+    url: "/xymanager/getLastTermInfo",
     method: "post",
     data,
     headers: {
@@ -171,7 +171,7 @@ export function getinfoStatus(data) {
 //获取最新装置信息
 export function getNewDeviceList(data) {
   return request({
-    url: "/api/getLastedTerminalStatus",
+    url: "/xymanager/getLastedTerminalStatus",
     method: "post",
     data,
   });
@@ -180,7 +180,7 @@ export function getNewDeviceList(data) {
 //声光报警
 export function alarmMarkJoggle(data) {
   return request({
-    url: "/api/alarmMark",
+    url: "/xymanager/alarmMark",
     method: "post",
     data,
   });
@@ -189,7 +189,7 @@ export function alarmMarkJoggle(data) {
 // 获取GPS位置
 export function getTermGPSJoggle(data) {
   return request({
-    url: "/api/getTermGPS",
+    url: "/xymanager/getTermGPS",
     method: "post",
     data,
   });
@@ -197,7 +197,7 @@ export function getTermGPSJoggle(data) {
 //setTermGPS 开启关闭gps
 export function setTermGPSJoggle(data) {
   return request({
-    url: "/api/setTermGPS",
+    url: "/xymanager/setTermGPS",
     method: "post",
     data,
   });
@@ -206,7 +206,7 @@ export function setTermGPSJoggle(data) {
 //获取GPS位置触发
 export function getTermGPSPosition(data) {
   return request({
-    url: "/api/getTermGPSPosition",
+    url: "/xymanager/getTermGPSPosition",
     method: "post",
     data,
   });
@@ -215,7 +215,7 @@ export function getTermGPSPosition(data) {
 
 export function getTermLastGPSPosition(data) {
   return request({
-    url: "/api/getTermLastGPSPosition",
+    url: "/xymanager/getTermLastGPSPosition",
     method: "post",
     data,
     headers: {
@@ -227,7 +227,7 @@ export function getTermLastGPSPosition(data) {
 //获取图片轮巡接口
 export function getPictureList(data) {
   return request({
-    url: "/api/getPhotoBanner",
+    url: "/xymanager/getPhotoBanner",
     method: "post",
     data,
   });
@@ -237,7 +237,7 @@ export function getPictureList(data) {
 //获取电压-线路-杆塔等信息
 export function getSearchInfo(data) {
   return request({
-    url: "/api/getLineAndGt",
+    url: "/xymanager/getLineAndGt",
     method: "post",
     data,
   });
@@ -245,7 +245,7 @@ export function getSearchInfo(data) {
 //获取实时图片数据
 export function getRealtimePhoto(data) {
   return request({
-    url: "/api/getPhotoList",
+    url: "/xymanager/getPhotoList",
     method: "post",
     data,
   });
@@ -255,7 +255,7 @@ export function getRealtimePhoto(data) {
 //获取告警列表
 export function getAlarmList(data) {
   return request({
-    url: "/api/getTerminalAlarmList",
+    url: "/xymanager/getTerminalAlarmList",
     method: "post",
     data,
   });
@@ -263,7 +263,7 @@ export function getAlarmList(data) {
 //获取告警label
 export function getAlarmTypeList(data) {
   return request({
-    url: "/api/getAlarmTypeList",
+    url: "/xymanager/getAlarmTypeList",
     method: "post",
     data,
   });
@@ -271,7 +271,7 @@ export function getAlarmTypeList(data) {
 //已读未读
 export function readAlarm(data) {
   return request({
-    url: "/api/readAlarm",
+    url: "/xymanager/readAlarm",
     method: "post",
     data,
   });
@@ -280,7 +280,7 @@ export function readAlarm(data) {
 //手动拍照
 export function takePicJoggle(data) {
   return request({
-    url: "/api/takePic",
+    url: "/xymanager/takePic",
     method: "get",
 
     params: data,
@@ -295,7 +295,7 @@ export function takePicJoggle(data) {
 //用户列表查询
 export function getUserList(data) {
   return request({
-    url: "/api/userList",
+    url: "/xymanager/userList",
     method: "post",
     data,
   });
@@ -303,7 +303,7 @@ export function getUserList(data) {
 //新增用户
 export function addUserApi(data) {
   return request({
-    url: "/api/addUser",
+    url: "/xymanager/addUser",
     method: "post",
     data,
   });
@@ -312,7 +312,7 @@ export function addUserApi(data) {
 //删除用户
 export function delUserApi(data) {
   return request({
-    url: "/api/deleteUser",
+    url: "/xymanager/deleteUser",
     method: "post",
     data,
     headers: {
@@ -324,14 +324,14 @@ export function delUserApi(data) {
 //设置告警可信度
 export function updateAlarmTypeList(data) {
   return request({
-    url: "/api/updateAlarmTypeList",
+    url: "/xymanager/updateAlarmTypeList",
     method: "post",
     data,
   });
 } //全局设置线缆绘制
 export function getMarkEnableStatus(data) {
   return request({
-    url: "/api/getMarkEnableStatus",
+    url: "/xymanager/getMarkEnableStatus",
     method: "post",
     data,
   });
@@ -339,7 +339,7 @@ export function getMarkEnableStatus(data) {
 //全局更新设置线缆绘制
 export function updateMarkEnableStatus(data) {
   return request({
-    url: "/api/updateMarkEnableStatus",
+    url: "/xymanager/updateMarkEnableStatus",
     method: "post",
     data,
     headers: {
@@ -351,7 +351,7 @@ export function updateMarkEnableStatus(data) {
 
 export function updateAlarmChannel(data) {
   return request({
-    url: "/api/updateAlarmChannel",
+    url: "/xymanager/updateAlarmChannel",
     method: "post",
     data,
     headers: {
@@ -363,7 +363,7 @@ export function updateAlarmChannel(data) {
 //获取电压等级列表
 export function getdyListJoggle(data) {
   return request({
-    url: "/api/getdyList",
+    url: "/xymanager/getdyList",
     method: "post",
     data,
   });
@@ -371,7 +371,7 @@ export function getdyListJoggle(data) {
 //1.线路列表信息
 export function getLineListJoggle(data) {
   return request({
-    url: "/api/getLineList",
+    url: "/xymanager/getLineList",
     method: "post",
     data,
   });
@@ -379,7 +379,7 @@ export function getLineListJoggle(data) {
 //2.添加单个或者多个线路信息
 export function addLineJoggle(data) {
   return request({
-    url: "/api/addLine",
+    url: "/xymanager/addLine",
     method: "post",
     data,
   });
@@ -387,7 +387,7 @@ export function addLineJoggle(data) {
 //3.删除新路信息
 export function deleteLineJoggle(data) {
   return request({
-    url: "/api/deleteLine",
+    url: "/xymanager/deleteLine",
     method: "post",
     data,
   });
@@ -395,7 +395,7 @@ export function deleteLineJoggle(data) {
 //4.修改信息
 export function updateLineJoggle(data) {
   return request({
-    url: "/api/updateLine",
+    url: "/xymanager/updateLine",
     method: "post",
     data,
   });
@@ -404,7 +404,7 @@ export function updateLineJoggle(data) {
 //1.获取杆塔列表
 export function getTowerListApi(data) {
   return request({
-    url: "/api/getTowerList",
+    url: "/xymanager/getTowerList",
     method: "post",
     data,
   });
@@ -412,7 +412,7 @@ export function getTowerListApi(data) {
 //2.获取线路编号列表
 export function getLineListApi(data) {
   return request({
-    url: "/api/getLineList",
+    url: "/xymanager/getLineList",
     method: "post",
     data,
   });
@@ -420,7 +420,7 @@ export function getLineListApi(data) {
 //3.新增杆塔信息
 export function addTowerApi(data) {
   return request({
-    url: "/api/addTower",
+    url: "/xymanager/addTower",
     method: "post",
     data,
   });
@@ -428,7 +428,7 @@ export function addTowerApi(data) {
 //4.修改杆塔信息
 export function updateTowerApi(data) {
   return request({
-    url: "/api/updateTower",
+    url: "/xymanager/updateTower",
     method: "post",
     data,
   });
@@ -436,7 +436,7 @@ export function updateTowerApi(data) {
 //5.删除杆塔信息
 export function delTowerApi(data) {
   return request({
-    url: "/api/deleteTower",
+    url: "/xymanager/deleteTower",
     method: "post",
     data,
   });
@@ -446,7 +446,7 @@ export function delTowerApi(data) {
 //1.获取通道列表
 export function getChannelListapi(data) {
   return request({
-    url: "/api/getChannelList",
+    url: "/xymanager/getChannelList",
     method: "post",
     data,
   });
@@ -454,7 +454,7 @@ export function getChannelListapi(data) {
 //2.新增通道
 export function addChannelapi(data) {
   return request({
-    url: "/api/addChannelList",
+    url: "/xymanager/addChannelList",
     method: "post",
     data,
   });
@@ -462,7 +462,7 @@ export function addChannelapi(data) {
 //3.删除通道
 export function deleteChannelapi(data) {
   return request({
-    url: "/api/deleteChannelList",
+    url: "/xymanager/deleteChannelList",
     method: "post",
     data,
   });
@@ -470,7 +470,7 @@ export function deleteChannelapi(data) {
 //4.修改通道
 export function updateChannelapi(data) {
   return request({
-    url: "/api/updateChannelList",
+    url: "/xymanager/updateChannelList",
     method: "post",
     data,
   });
@@ -480,7 +480,7 @@ export function updateChannelapi(data) {
 //获取列表
 export function getTerminalJoggle(data) {
   return request({
-    url: "/api/getTerminalList",
+    url: "/xymanager/getTerminalList",
     method: "post",
     data,
   });
@@ -488,7 +488,7 @@ export function getTerminalJoggle(data) {
 //添加设备信息
 export function addTerminalJoggle(data) {
   return request({
-    url: "/api/addTerminal",
+    url: "/xymanager/addTerminal",
     method: "post",
     data,
   });
@@ -496,7 +496,7 @@ export function addTerminalJoggle(data) {
 //添加设备---获取-线路-杆塔
 export function getLineAndGtInfo(data) {
   return request({
-    url: "/api/getLineAndGtList",
+    url: "/xymanager/getLineAndGtList",
     method: "post",
     data,
   });
@@ -504,7 +504,7 @@ export function getLineAndGtInfo(data) {
 //修改设备信息
 export function updateTerminalJoggle(data) {
   return request({
-    url: "/api/updateTerminal",
+    url: "/xymanager/updateTerminal",
     method: "post",
     data,
   });
@@ -512,7 +512,7 @@ export function updateTerminalJoggle(data) {
 //删除设备信息
 export function deleteTerminalJoggle(data) {
   return request({
-    url: "/api/deleteTerminal",
+    url: "/xymanager/deleteTerminal",
     method: "post",
     data,
   });
@@ -521,7 +521,7 @@ export function deleteTerminalJoggle(data) {
 
 export function getTerminalListExcel() {
   return request({
-    url: "/api/getTerminalListExcel",
+    url: "/xymanager/getTerminalListExcel",
     method: "post",
     responseType: "blob",
   });
@@ -530,7 +530,7 @@ export function getTerminalListExcel() {
 
 export function getAllChannelListJoggle(data) {
   return request({
-    url: "/api/getAllChannelList",
+    url: "/xymanager/getAllChannelList",
     method: "post",
     data,
   });
@@ -538,7 +538,7 @@ export function getAllChannelListJoggle(data) {
 //规约版本
 export function getProtocolList(data) {
   return request({
-    url: "/api/getProtocolList",
+    url: "/xymanager/getProtocolList",
     method: "get",
     params: data,
   });
@@ -547,7 +547,7 @@ export function getProtocolList(data) {
 
 export function getChannelListJoggle(data) {
   return request({
-    url: "/api/getChannelByTermid",
+    url: "/xymanager/getChannelByTermid",
     method: "post",
     data,
   });
@@ -555,7 +555,7 @@ export function getChannelListJoggle(data) {
 //装置复位
 export function resetTerminalApi(data) {
   return request({
-    url: "/api/resetTerminal",
+    url: "/xymanager/resetTerminal",
     method: "post",
     data,
     headers: {
@@ -566,7 +566,7 @@ export function resetTerminalApi(data) {
 //图像参数--获取图像分辨率
 export function getResolutionRatio(data) {
   return request({
-    url: "/api/getResolutionList",
+    url: "/xymanager/getResolutionList",
     method: "post",
     data,
     headers: {
@@ -578,7 +578,7 @@ export function getResolutionRatio(data) {
 
 export function getCoordinate(data) {
   return request({
-    url: "/api/getCoordinate",
+    url: "/xymanager/getCoordinate",
     method: "post",
     data,
   });
@@ -587,7 +587,7 @@ export function getCoordinate(data) {
 
 export function updateCoordinate(data) {
   return request({
-    url: "/api/updateCoordinate",
+    url: "/xymanager/updateCoordinate",
     method: "post",
     data,
   });
@@ -597,7 +597,7 @@ export function updateCoordinate(data) {
 //1.获取任务规则列表接口
 export function getScheduleRulelListJoggle(data) {
   return request({
-    url: "/api/getScheduleRulelList",
+    url: "/xymanager/getScheduleRulelList",
     method: "post",
     data,
   });
@@ -605,7 +605,7 @@ export function getScheduleRulelListJoggle(data) {
 //2.新增任务规则
 export function addScheduleRulel(data) {
   return request({
-    url: "/api/addSchelduleRuleList",
+    url: "/xymanager/addSchelduleRuleList",
     method: "post",
     data,
   });
@@ -613,7 +613,7 @@ export function addScheduleRulel(data) {
 //3.删除任务规则
 export function deleteScheduleRulel(data) {
   return request({
-    url: "/api/deleteSchelduleRule",
+    url: "/xymanager/deleteSchelduleRule",
     method: "post",
     data,
   });
@@ -621,7 +621,7 @@ export function deleteScheduleRulel(data) {
 //4.修改任务规则
 export function updateScheduleRulel(data) {
   return request({
-    url: "/api/updateSchelduleRule",
+    url: "/xymanager/updateSchelduleRule",
     method: "post",
     data,
   });
@@ -629,7 +629,7 @@ export function updateScheduleRulel(data) {
 //5.获取所有通道
 export function getScheduleRulelAccessList(data) {
   return request({
-    url: "/api/getChannelTreeList",
+    url: "/xymanager/getChannelTreeList",
     method: "post",
     data,
   });
@@ -637,7 +637,7 @@ export function getScheduleRulelAccessList(data) {
 //6.设置时间表通道
 export function setScheduleRulel(data) {
   return request({
-    url: "/api/relateSchelduleRule",
+    url: "/xymanager/relateSchelduleRule",
     method: "post",
     data,
   });
@@ -645,7 +645,7 @@ export function setScheduleRulel(data) {
 //7.查询设备时间表
 export function getSchedulenr(data) {
   return request({
-    url: "/api/getChannelSchelduleRule",
+    url: "/xymanager/getChannelSchelduleRule",
     method: "post",
     data,
   });
@@ -653,7 +653,118 @@ export function getSchedulenr(data) {
 //根据通道编号获取设备列表
 export function getTermListByChannelJoggle(data) {
   return request({
-    url: "/api/getTermListByChannel ",
+    url: "/xymanager/getTermListByChannel ",
+    method: "post",
+    data,
+  });
+}
+//调节焦距
+
+export function updateTermCamera(data) {
+  return request({
+    url: "/xymanager/updateTermCamera",
+    method: "get",
+    params: data,
+  });
+}
+
+//郑州检测左侧树状结构接口
+export function getzzdyTreeList(data) {
+  return request({
+    url: "/xymanager/getzzdyTreeList",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//删除图片
+export function deletePicList(data) {
+  return request({
+    url: "/xymanager/deletePicList",
+    method: "post",
+    data,
+  });
+}
+
+export function addFavorList(data) {
+  return request({
+    url: "/xymanager/addFavorList",
+    method: "post",
+    data,
+  });
+}
+
+//上传图片
+export function uploadPicApi(data) {
+  return request({
+    url: "/xymanager/upload",
+    method: "post",
+    data,
+    headers: {
+      "Content-Type": "multipart/form-data", // set the content type to multipart/form-data
+    },
+  });
+}
+
+//角色管理
+//获取所有角色
+export function getRoleList(data) {
+  return request({
+    url: "/xymanager/role/listAll",
+    method: "get",
+    params: data,
+  });
+}
+//新增角色
+export function addRole(data) {
+  return request({
+    url: "/xymanager/role/add",
+    method: "post",
+    data,
+  });
+}
+//修改角色
+export function updateRole(data) {
+  return request({
+    url: "/xymanager/role/update",
+    method: "post",
+    data,
+  });
+}
+//删除角色
+export function deleteRole(data) {
+  return request({
+    url: "/xymanager/role/delete",
+    method: "post",
+    data,
+  });
+}
+
+//查询权限数结构
+
+export function getPermissionTree(data) {
+  return request({
+    url: "/xymanager/role/getPermissionTree",
+    method: "get",
+    params: data,
+  });
+}
+//@Api0peration("查询杈限")
+
+export function getPermission(data) {
+  return request({
+    url: "/xymanager/role/getPermission",
+    method: "get",
+    params: data,
+  });
+}
+
+//@Api0peration("修改杈限")
+export function changePermission(data) {
+  return request({
+    url: "/xymanager/role/changePermission",
     method: "post",
     data,
   });

src/utils/event-bus.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+
+const EventBus = new Vue()
+export default EventBus

src/views/alarmHandling/index.vue

@@ -364,6 +364,7 @@ import {
 import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
 import moment from "moment";
 export default {
+  name: "alarmHandling",
   components: {
     morePicPreveiw,
   },
@@ -950,7 +951,7 @@ export default {
         alias: val.alias,
         channnelname: val.channnelName,
         photoTime: val.alarmTime,
-        termid: val.id,
+        termid: val.termId,
         channelid: val.channelId,
       };
       this.$refs.morePicPreveiw_ref.display(currentPrams);
@@ -1241,6 +1242,7 @@ export default {
           bottom: 0px;
           background: rgba(0, 0, 0, 0.5);
           width: calc(100% - 12px);
+          z-index: 3;
           .alarmInfo {
             color: #fff;
           }

src/views/cameraChannel/index.vue

@@ -100,6 +100,7 @@ import addChannelDialog from "./components/addChannelDialog.vue";
 import { getChannelListapi, deleteChannelapi } from "@/utils/api/index";
 
 export default {
+  name: "cameraChannel",
   components: {
     addChannelDialog,
   },

src/views/devicePhotoSchedule/components/bdSchedule.vue

@@ -445,7 +445,7 @@ export default {
       }
     }
     .treeDevice {
-      background-color: #169e8c;
+      //background-color: #169e8c;
       height: 366px;
       // overflow: auto;
       display: flex;

src/views/devicePhotoSchedule/index.vue

@@ -96,6 +96,7 @@ import adddeviceDialog from "./components/adddeviceDialog.vue";
 import bdSchedule from "./components/bdSchedule.vue";
 
 export default {
+  name: "devicePhotoSchedule",
   components: {
     adddeviceDialog,
     bdSchedule,

src/views/homePage/index.vue

@@ -126,7 +126,7 @@ import {
   getOnlineTerminalListExcel,
 } from "@/utils/api/index";
 export default {
-  name: "",
+  name: "stritl",
   data() {
     return {
       termDataNum: "", //总数
@@ -477,11 +477,11 @@ export default {
 </script>
 <style lang="less">
 .stritleEchartsPage {
-  height: calc(100% - 32px);
-  padding: 16px;
+  height: calc(100% - 24px);
+  padding: 12px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: space-between;
   .echart-top {
     display: flex;
     height: 48%;

src/views/icing/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="icingBox">
+    <div class="icingContain">
+      <leftTree ref="sideTree"></leftTree>
+      <div class="rightTable">
+        <div class="dataBox">
+          <div class="childBox">
+            <div class="searchBox" ref="searchref">
+              <el-form
+                :inline="true"
+                :model="formdata"
+                class="demo-form-inline"
+              >
+                <el-form-item label="开始日期">
+                  <el-date-picker
+                    v-model="formdata.starttime"
+                    type="date"
+                    placeholder="开始日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="结束日期">
+                  <el-date-picker
+                    v-model="formdata.endtime"
+                    type="date"
+                    placeholder="结束日期"
+                    class="ml10"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">查询</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit"
+                    >导出数据</el-button
+                  >
+                </el-form-item>
+              </el-form>
+            </div>
+            <div class="childTableShowBox">
+              <el-table :data="tableData" style="width: 100%">
+                <el-table-column
+                  prop="terminalNumber"
+                  label="监测终端编号"
+                ></el-table-column>
+                <el-table-column prop="time" label="时间"></el-table-column>
+                <el-table-column
+                  prop="functionalUnitIdentifier"
+                  label="功能单元识别码"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxPullForceKg"
+                  label="最大拉力(Kg)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxPullForceWindBiasAngle"
+                  label="最大拉力时风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxPullForceTiltAngle"
+                  label="最大拉力时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minPullForceKg"
+                  label="最小拉力(Kg)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minPullForceWindBiasAngle"
+                  label="最小拉力时风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minPullForceTiltAngle"
+                  label="最小拉力时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxWindBiasAngle"
+                  label="最大风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxWindBiasAngleTiltAngle"
+                  label="最大风偏角时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="maxWindBiasAnglePullForceKg"
+                  label="最大风偏角时拉力(Kg)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minWindBiasAngle"
+                  label="最小风偏角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minWindBiasAngleTiltAngle"
+                  label="最小风偏角时倾斜角(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minWindBiasAnglePullForceKg"
+                  label="最小风偏角时拉力(Kg)"
+                ></el-table-column>
+              </el-table>
+            </div>
+            <div class="pageNation">
+              <el-pagination
+                @current-change="handleCurrentChange"
+                @size-change="handleSizeChange"
+                :current-page="page"
+                :page-size="pageSize"
+                layout="sizes, prev, pager, next, jumper,total"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import leftTree from "../../fubingCommon/leftTree";
+export default {
+  name: "icing",
+  components: {
+    leftTree,
+  },
+  data() {
+    return {
+      msg: "",
+      childFlag: false,
+      tableData: [],
+      formdata: {},
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  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().getTime());
+  },
+  methods: {
+    getCurrentData(data) {
+      console.log("执行父组件", data);
+      if (data.dyValue) {
+        console.log("电压");
+
+        this.tableData = [
+          {
+            terminalNumber: "终端A",
+            time: "2023-03-15 08:00:00",
+            functionalUnitIdentifier: "功能单元1",
+            maxPullForceKg: "20Kg",
+            maxPullForceWindBiasAngle: "60°",
+            maxPullForceTiltAngle: "30°",
+            minPullForceKg: "5Kg",
+            minPullForceWindBiasAngle: "30°",
+            minPullForceTiltAngle: "20°",
+            maxWindBiasAngle: "70°",
+            maxWindBiasAngleTiltAngle: "45°",
+            maxWindBiasAnglePullForceKg: "15Kg",
+            minWindBiasAngle: "20°",
+            minWindBiasAngleTiltAngle: "30°",
+            minWindBiasAnglePullForceKg: "8Kg",
+          },
+          {
+            terminalNumber: "终端A",
+            time: "2023-03-15 08:00:00",
+            functionalUnitIdentifier: "功能单元1",
+            maxPullForceKg: "20Kg",
+            maxPullForceWindBiasAngle: "60°",
+            maxPullForceTiltAngle: "30°",
+            minPullForceKg: "5Kg",
+            minPullForceWindBiasAngle: "30°",
+            minPullForceTiltAngle: "20°",
+            maxWindBiasAngle: "70°",
+            maxWindBiasAngleTiltAngle: "45°",
+            maxWindBiasAnglePullForceKg: "15Kg",
+            minWindBiasAngle: "20°",
+            minWindBiasAngleTiltAngle: "30°",
+            minWindBiasAnglePullForceKg: "8Kg",
+          },
+          {
+            terminalNumber: "终端A",
+            time: "2023-03-15 08:00:00",
+            functionalUnitIdentifier: "功能单元1",
+            maxPullForceKg: "20Kg",
+            maxPullForceWindBiasAngle: "60°",
+            maxPullForceTiltAngle: "30°",
+            minPullForceKg: "5Kg",
+            minPullForceWindBiasAngle: "30°",
+            minPullForceTiltAngle: "20°",
+            maxWindBiasAngle: "70°",
+            maxWindBiasAngleTiltAngle: "45°",
+            maxWindBiasAnglePullForceKg: "15Kg",
+            minWindBiasAngle: "20°",
+            minWindBiasAngleTiltAngle: "30°",
+            minWindBiasAnglePullForceKg: "8Kg",
+          },
+        ];
+      } else if (data.bsManufacturer) {
+        this.tableData = [
+          {
+            terminalNumber: "终端A",
+            time: "2023-03-15 08:00:00",
+            functionalUnitIdentifier: "功能单元1",
+            maxPullForceKg: "20Kg",
+            maxPullForceWindBiasAngle: "60°",
+            maxPullForceTiltAngle: "30°",
+            minPullForceKg: "5Kg",
+            minPullForceWindBiasAngle: "30°",
+            minPullForceTiltAngle: "20°",
+            maxWindBiasAngle: "70°",
+            maxWindBiasAngleTiltAngle: "45°",
+            maxWindBiasAnglePullForceKg: "15Kg",
+            minWindBiasAngle: "20°",
+            minWindBiasAngleTiltAngle: "30°",
+            minWindBiasAnglePullForceKg: "8Kg",
+          },
+          {
+            terminalNumber: "终端A",
+            time: "2023-03-15 08:00:00",
+            functionalUnitIdentifier: "功能单元1",
+            maxPullForceKg: "20Kg",
+            maxPullForceWindBiasAngle: "60°",
+            maxPullForceTiltAngle: "30°",
+            minPullForceKg: "5Kg",
+            minPullForceWindBiasAngle: "30°",
+            minPullForceTiltAngle: "20°",
+            maxWindBiasAngle: "70°",
+            maxWindBiasAngleTiltAngle: "45°",
+            maxWindBiasAnglePullForceKg: "15Kg",
+            minWindBiasAngle: "20°",
+            minWindBiasAngleTiltAngle: "30°",
+            minWindBiasAnglePullForceKg: "8Kg",
+          },
+        ];
+      } else {
+        console.log("杆塔");
+        this.tableData = [
+          {
+            terminalNumber: "终端A",
+            time: "2023-03-15 08:00:00",
+            functionalUnitIdentifier: "功能单元1",
+            maxPullForceKg: "20Kg",
+            maxPullForceWindBiasAngle: "60°",
+            maxPullForceTiltAngle: "30°",
+            minPullForceKg: "5Kg",
+            minPullForceWindBiasAngle: "30°",
+            minPullForceTiltAngle: "20°",
+            maxWindBiasAngle: "70°",
+            maxWindBiasAngleTiltAngle: "45°",
+            maxWindBiasAnglePullForceKg: "15Kg",
+            minWindBiasAngle: "20°",
+            minWindBiasAngleTiltAngle: "30°",
+            minWindBiasAnglePullForceKg: "8Kg",
+          },
+        ];
+      }
+    },
+    onSubmit() {},
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      // this.picList = [];
+      // this.getPicData();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      //this.getPicData();
+    },
+  },
+};
+</script>
+<style lang="less">
+.icingBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+  .icingContain {
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  .rightTable {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    overflow: hidden;
+    border-left: 1px solid #ddd;
+    .dataBox {
+      width: calc(100% - 24px);
+      height: calc(100% - 24px);
+      padding: 12px 12px;
+      background: #fff;
+    }
+    // .fatherTableShowBox {
+    //   height: calc(100% - 0px);
+    // }
+    .childBox {
+      height: calc(100% - 50px);
+      .childTableShowBox {
+        height: calc(100% - 50px);
+      }
+    }
+  }
+}
+</style>

src/views/lineInformation/index.vue

@@ -127,6 +127,7 @@ import { getLineListJoggle, deleteLineJoggle } from "@/utils/api/index";
 import addLineDialog from "./components/addLineDialog.vue";
 import addTowerDialog from "./components/addTowerDialog.vue";
 export default {
+  name: "lineInformation",
   components: {
     addLineDialog,
     addTowerDialog,

src/views/login/index.vue

@@ -80,7 +80,13 @@ 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("/stritl");
+                console.log(res.data);
+                if (res.data.role == 5) {
+                  this.$router.push("/weather");
+                } else {
+                  this.$router.push("/stritl");
+                }
+
                 this.$message({
                   duration: 1500,
                   showClose: true,

src/views/photographicDevice/components/imageCapture.vue

@@ -90,6 +90,9 @@
           @click="imageSearch()"
           >查询</el-button
         >
+        <p class="looktime" v-if="lookTime && showLookTime">
+          {{ $moment(lookTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </p>
         <!-- <el-button
           class="searchImage"
           :loading="searchloading"
@@ -744,6 +747,8 @@ export default {
       timer: null,
       i: 0,
       onlinestatus: "",
+      lookTime: "",
+      showLookTime: false,
     };
   },
   mounted() {},
@@ -751,6 +756,7 @@ export default {
     handleClick(tab, event) {
       console.log(tab, event);
       this.capturenr = {};
+      this.lookTime = "";
     },
     //获取设备通道
     getSingleAccess(val) {
@@ -799,7 +805,7 @@ export default {
       }
 
       if (val.protocol == 65281) {
-        this.$set(this.setForm, "resolution", this.ratiolist[12].id);
+        this.$set(this.setForm, "resolution", this.ratiolist[5].id);
         this.$set(this.setForm, "luminance", 50);
         this.$set(this.setForm, "contrast", 50);
         this.$set(this.setForm, "saturation", 50);
@@ -830,6 +836,10 @@ export default {
             name: "flag",
             value: 0,
           },
+          {
+            name: "rf",
+            value: 255,
+          },
           {
             name: "channel",
             value: this.selaccess,
@@ -879,6 +889,10 @@ export default {
             name: "flag",
             value: 1,
           },
+          {
+            name: "rf",
+            value: 255,
+          },
           {
             name: "channel",
             value: this.setForm.channelId,
@@ -922,6 +936,7 @@ export default {
         .then((res) => {
           console.log(res);
           this.requestid = res.data.requestId;
+          this.lookTime = res.data.date;
           //this.getinfo1();
           clearInterval(this.timer);
           this.timer = window.setInterval(() => {
@@ -950,6 +965,7 @@ export default {
               message: "信息已更新",
               type: "success",
             });
+            this.showLookTime = true;
           } else if (this.i > 9) {
             window.clearInterval(this.timer);
             this.timer = null;
@@ -977,6 +993,8 @@ export default {
       this.setForm = {};
       this.searchloading = false;
       this.setloading = false;
+      this.lookTime = "";
+      this.showLookTime = false;
     },
   },
 };
@@ -1008,6 +1026,10 @@ export default {
   .searchImage {
     margin-left: 110px;
   }
+  .looktime {
+    margin-top: 6px;
+    margin-left: 110px;
+  }
   .flexno {
     display: flex;
     height: 32px;

src/views/photographicDevice/components/videoCapture.vue

@@ -81,6 +81,9 @@
           @click="videoSearch()"
           >查询</el-button
         >
+        <p class="looktime" v-if="lookTime && showLookTime">
+          {{ $moment(lookTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </p>
       </div>
     </el-tab-pane>
     <el-tab-pane label="设置参数" name="2">
@@ -224,6 +227,8 @@ export default {
       selcmdId: "", //cmdId
       requestId: "",
       onlinestatus: "",
+      lookTime: "",
+      showLookTime: false,
     };
   },
   mounted() {},
@@ -231,6 +236,7 @@ export default {
     handleClick(tab, event) {
       console.log(tab, event);
       this.capturenr = {};
+      this.lookTime = "";
     },
     //获取设备通道
     getSingleAccess(val) {
@@ -348,6 +354,7 @@ export default {
         .then((res) => {
           console.log(res);
           this.requestid = res.data.requestId;
+          this.lookTime = res.data.date;
           //this.getinfo1();
 
           clearInterval(this.timer);
@@ -381,6 +388,7 @@ export default {
               message: "信息已更新",
               type: "success",
             });
+            this.showLookTime = true;
           } else if (this.i > 9) {
             window.clearInterval(this.timer);
             this.timer = null;
@@ -409,6 +417,8 @@ export default {
       this.setForm = {};
       this.searchloading = false;
       this.setloading = false;
+      this.lookTime = "";
+      this.showLookTime = false;
     },
   },
 };
@@ -440,6 +450,10 @@ export default {
   .searchImage {
     margin-left: 110px;
   }
+  .looktime {
+    margin-top: 6px;
+    margin-left: 110px;
+  }
   .flexno {
     display: flex;
     height: 32px;

src/views/photographicDevice/index.vue

@@ -261,7 +261,7 @@
               <el-button
                 type="text"
                 class="deleteText"
-                @click.native.stop="handleDelete(scope.row)"
+                @click.native.stop="handleOpen(scope.row)"
                 v-if="scope.row.status == 0"
                 >打开</el-button
               >
@@ -339,6 +339,7 @@ import gpsSite from "./components/gpsSite.vue";
 import addLineDialog from "./components/addLineDialog.vue";
 import towerDialog from "./components/towerDialog.vue";
 export default {
+  name: "photographicDevice",
   components: {
     addPhotoDialog,
     pictureTags,
@@ -595,10 +596,13 @@ export default {
       })
         .then(() => {
           // 行设置向后台请求删除数据
-          deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
-            console.log(res);
-            this.terminalList(); //刷新
-          });
+          deleteTerminalJoggle({ list: this.deleteArr, type: 0 }).then(
+            (res) => {
+              console.log(res);
+              this.deleteArr = [];
+              this.terminalList(); //刷新
+            }
+          );
           this.$message({
             duration: 1500,
             type: "success",
@@ -615,6 +619,43 @@ export default {
           // });
         });
     },
+    //打开该装置
+    handleOpen(data) {
+      console.log(data);
+      this.deleteArr.push({
+        termid: data.id,
+      });
+      console.log(this.deleteArr);
+      this.$confirm("确定要打开该装置?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "success",
+      })
+        .then(() => {
+          // 行设置向后台请求删除数据
+          deleteTerminalJoggle({ list: this.deleteArr, type: 1 }).then(
+            (res) => {
+              console.log(res);
+              this.deleteArr = [];
+              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;

src/views/pictureRotation/index.vue

@@ -163,6 +163,7 @@ import { getPictureList, getTerminalPhotoListJoggle } from "@/utils/api/index";
 import morePicPreveiw from "../realTimeMonitor/components/morePicPreveiw";
 import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  name: "pictureRotation",
   components: {
     morePicPreveiw,
   },

src/views/realTimeMonitor/components/carouselChart copy.vue

@@ -1,917 +0,0 @@
-<template>
-  <div class="thumb-example">
-    <div class="picTop">
-      <!-- 判断是否是图片并且不为空 -->
-
-      <div
-        class="bigimg"
-        v-if="
-          bigPicPath.indexOf('nopic') == -1 &&
-          bigPicPath.indexOf('videos') == -1
-        "
-        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
-      >
-        <el-button
-          class="downBtn"
-          @click.stop="
-            downLoadPic(
-              bigPicPath.substring(0, bigPicPath.length - 9),
-              bigPicPath.substring(0, bigPicPath.length - 9)
-            )
-          "
-          >下载图片</el-button
-        >
-        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
-        <div
-          class="nosee"
-          :style="'backgroundImage:url(' + bigPicPath + ')'"
-        ></div>
-        <div class="bigimgView" @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.substring(0, bigPicPath.length - 9)"
-          controls="controls"
-          :poster="videopath"
-          autoplay
-        ></video>
-      </div>
-      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
-        <img
-          class="animImg"
-          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
-        />
-      </div>
-
-      <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
-        <i class="el-icon-arrow-left"></i>
-      </div>
-      <div
-        class="arrow rightArrow"
-        v-if="this.bigNum < this.terminalPhoto.length - 1"
-        @click="rightClick"
-      >
-        <i class="el-icon-arrow-right"></i>
-      </div>
-    </div>
-    <div class="picBottom">
-      <ul class="smallPicBox">
-        <li
-          v-for="(item, index) in fiveList"
-          @click="handleBigpic(item, index)"
-          :class="activeSmall === index ? 'borderActive' : ''"
-        >
-          <div
-            class="smallhavePic"
-            v-if="
-              item.path.indexOf('nopic') == -1 &&
-              item.path.indexOf('videos') == -1
-            "
-          >
-            <img :src="item.path + '!260x160'" @error="setDefaultImage" />
-            <p class="timeInfo">
-              <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.alias !== null && item.alias !== ""
-                    ? item.alias
-                    : item.channelName
-                }}</span
-              >
-            </p>
-          </div>
-          <div
-            class="smallnoPic"
-            v-else-if="item.path.indexOf('videos') !== -1"
-          >
-            <img
-              src="../../../assets/img/loading.jpg"
-              style="object-fit: cover"
-              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">
-              <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.alias !== null && item.alias !== ""
-                    ? item.alias
-                    : item.channelName
-                }}</span
-              >
-            </p>
-          </div>
-          <div class="smallnoPic" v-else>
-            <img :src="item.path" />
-          </div>
-        </li>
-      </ul>
-      <div
-        class="arrow leftArrow"
-        v-if="this.page != 1"
-        @click="smallLeftClick"
-      >
-        <i class="el-icon-arrow-left"></i>
-      </div>
-      <div
-        class="arrow rightArrow"
-        v-if="this.page < this.total"
-        @click="smallRightClick"
-      >
-        <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: {
-    terminalPhoto: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      OptionssalseImg: {
-        inline: false,
-        button: true,
-        navbar: false,
-        title: false,
-        toolbar: false,
-        tooltip: false,
-        zoomable: true,
-        url: "src",
-      },
-      isshowArrow: true, //判断是否显示切换按钮
-      mediaType: "", //判断图片类型是视频还是图片
-      bigPicPath: "", //大图地址
-      videopath: "",
-      smallPicPath: "", //小图地址
-      bigNum: 0, //判断大图是第几张
-      fiveList: [], //小图图片list
-      activeSmall: 0, //索引选中小图,
-      page: 1, //当前第几页
-      pagesize: 5, //每页显示五条
-      total: 0, //总共又几页
-
-      localPoints: [], //画图对象
-      canvas: null,
-      ctx: null,
-      imgpic: null,
-      color: "",
-      num: "",
-      showBigpic: false,
-      flagline: true,
-      markEnable: "",
-      zoomD: 1,
-      canvasloading: false,
-      bigImgPath: "",
-    };
-  },
-  mounted() {
-    console.log(this.terminalPhoto);
-    this.mediaType = this.terminalPhoto[0].mediaType;
-    this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-
-    // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-    this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
-    this.total = this.terminalPhoto.length / this.pagesize;
-    console.log(this.fiveList);
-    //获取points
-    getCoordinate({
-      channelId:
-        this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
-      needPic: "0",
-      termId: this.fiveList[0].termId,
-    })
-      .then((res) => {
-        console.log(res);
-        this.localPoints = res.data.list;
-        this.color = res.data.color;
-        this.num = res.data.boderWidth;
-        this.markEnable = res.data.markEnable;
-        if (this.markEnable === 1) {
-          this.drawline();
-        }
-      })
-      .catch((err) => {});
-  },
-  watch: {
-    terminalPhoto: function (newVal, oldVal) {
-      this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
-
-      this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
-      this.total = this.terminalPhoto.length / this.pagesize;
-    },
-  },
-  created() {},
-  methods: {
-    setDefaultImage(e) {
-      e.target.src = defaultImage;
-      this.bigPicPath = defaultImage;
-    },
-    downLoadPic(url, name) {
-      const image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
-      image.src = url;
-      image.onload = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, image.width, image.height);
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          this.download(url, name);
-          // 用完释放URL对象
-          URL.revokeObjectURL(url);
-        });
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
-    },
-    // showbigpicPath(data) {
-    //   console.log(data);
-    //   if (data.includes("!")) {
-    //     this.bigPicPath = data.substring(0, data.length - 9);
-    //   } else {
-    //     this.bigPicPath = data;
-    //     this.bgbigPath = data;
-    //   }
-
-    //   console.log(this.bigPicPath);
-    // },
-    // handleBigPicbox() {
-    //   this.showBigpic = true;
-    // },
-    //移动demo
-    move(e) {
-      console.log(e);
-      e.preventDefault();
-      // 获取元素
-      var personBox = document.querySelector(".picboxI");
-      var img = document.querySelector(".img");
-      var x = e.pageX - img.offsetLeft;
-      var y = e.pageY - img.offsetTop;
-      // 添加鼠标移动事件
-      personBox.addEventListener("mousemove", move);
-      console.log(personBox.addEventListener("mousemove", move));
-      console.log(personBox.style);
-      function move(e) {
-        console.log(personBox.style.left);
-        personBox.style.left = e.pageX - x + "px";
-        personBox.style.top = e.pageY - y + "px";
-      }
-      // 添加鼠标抬起事件，鼠标抬起，将事件移除
-      img.addEventListener("mouseup", function () {
-        personBox.removeEventListener("mousemove", move);
-      });
-      // 鼠标离开父级元素，把事件移除
-      personBox.addEventListener("mouseout", function () {
-        personBox.removeEventListener("mousemove", move);
-      });
-    },
-    // 缩放图片
-    rollImg(e) {
-      let direction = e.deltaY > 0 ? "down" : "up";
-      if (direction === "up") {
-        // 滑轮向上滚动
-        this.large();
-      } else {
-        // 滑轮向下滚动
-        this.Small();
-      }
-    },
-    //大
-    large() {
-      this.$nextTick(() => {
-        if (this.zoomD < 6) {
-          this.zoomD += 0.1;
-        }
-        document.querySelector(
-          ".picboxI"
-        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
-      });
-    },
-    // 小
-    Small() {
-      this.$nextTick(() => {
-        if (this.zoomD > 0.3) {
-          this.zoomD -= 0.1;
-        }
-        document.querySelector(
-          ".picboxI"
-        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
-      });
-    },
-    imgOnload() {
-      console.log("加载完成");
-      this.canvasloading = false;
-    },
-    //放大图
-    handleBigPicbox(val) {
-      console.log(val);
-      //this.canvasloading = true;
-      this.showBigpic = true;
-      this.bigImgPath = val.substring(0, val.length - 9);
-    },
-    closePic(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;
-      console.log("11111111111111111111111111", this.flagline);
-      updateMarkEnableStatus({
-        status: 1,
-      }).then((res) => {
-        console.log(res);
-      });
-      this.drawline();
-    },
-    drawline() {
-      this.canvas = this.$refs.myCanvas;
-      this.imgpic = this.$refs.picJpg;
-      console.log(this.canvas);
-      console.log(this.imgpic);
-      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) {
-        this.localPoints = this.localPoints;
-      } else {
-        this.localPoints = [];
-      }
-      console.log(this.ctx);
-      this.ctx.beginPath();
-      //设置线条颜色，必须放在绘制之前
-      this.ctx.strokeStyle = this.color;
-      // 线宽设置，必须放在绘制之前
-      this.ctx.lineWidth = this.num;
-      for (var i = 0; i < this.localPoints.length; i++) {
-        this.ctx.moveTo(
-          this.localPoints[i].x1 * this.imgpic.width,
-          this.localPoints[i].y1 * this.imgpic.height
-        );
-        this.ctx.lineTo(
-          this.localPoints[i].x2 * this.imgpic.width,
-          this.localPoints[i].y2 * this.imgpic.height
-        );
-      }
-
-      this.ctx.closePath();
-      this.ctx.stroke();
-    },
-    //不显示绘制线
-    handelClear() {
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-      this.flagline = false;
-      updateMarkEnableStatus({
-        status: 0,
-      }).then((res) => {
-        console.log(res);
-      });
-    },
-    getphotoList() {
-      this.fiveList = this.terminalPhoto.slice(
-        (this.page - 1) * this.pagesize,
-        this.page * this.pagesize
-      );
-
-      this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
-
-      this.videopath = this.fiveList[this.activeSmall].thumb;
-    },
-    //大图点击左侧切换图片
-    leftClick() {
-      this.bigNum--; //执行下一张
-      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-
-      this.activeSmall--;
-      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
-      console.log(this.page);
-      if (this.activeSmall < 0) {
-        this.activeSmall = 4;
-        this.smallLeftClick();
-      }
-      console.log(this.terminalPhoto[this.bigNum]);
-      getCoordinate({
-        channelId: this.terminalPhoto[this.bigNum].channelId,
-        needPic: "1",
-        termId: this.terminalPhoto[this.bigNum].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-        })
-        .catch((err) => {});
-    },
-    //点击右侧切换图片
-    rightClick() {
-      this.bigNum++; //执行下一张
-      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
-      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
-
-      this.activeSmall++;
-      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
-      if (this.activeSmall > 4) {
-        this.activeSmall = 0;
-        console.log(this.activeSmall);
-        this.smallRightClick();
-      }
-      getCoordinate({
-        channelId: this.terminalPhoto[this.bigNum].channelId,
-        needPic: "1",
-        termId: this.terminalPhoto[this.bigNum].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-        })
-        .catch((err) => {});
-    },
-    //点击小图变成大图
-    handleBigpic(row, index) {
-      console.log(row);
-      console.log();
-      this.activeSmall = index;
-      this.mediaType = row.mediaType;
-      this.bigPicPath = row.path + "!1366x768";
-      // this.bgbigPath = row.path + "!1366x768";
-      getCoordinate({
-        channelId: row.channelId,
-        needPic: "1",
-        termId: row.termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-          // this.drawline();
-        })
-        .catch((err) => {});
-    },
-    //点击小图切换左侧
-    smallLeftClick() {
-      this.activeSmall = 0;
-      console.log("点击了左侧");
-
-      this.page--;
-      if (this.page < 1) {
-        this.isshowArrow = false;
-      } else {
-        this.getphotoList();
-      }
-      console.log(this.page);
-      console.log(this.fiveList);
-      //获取points
-      getCoordinate({
-        channelId: this.fiveList[0].channelId,
-        needPic: "0",
-        termId: this.fiveList[0].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-          // this.drawline();
-        })
-        .catch((err) => {});
-    },
-    //点击小图切换右侧
-    smallRightClick() {
-      this.activeSmall = 0;
-      console.log("点击了右侧");
-      console.log(this.page);
-      this.page++;
-      this.getphotoList();
-      console.log(this.fiveList);
-      //获取points
-      getCoordinate({
-        channelId: this.fiveList[0].channelId,
-        needPic: "0",
-        termId: this.fiveList[0].termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.localPoints = res.data.list;
-          if (this.markEnable === 1) {
-            this.drawline();
-          }
-          // this.drawline();
-        })
-        .catch((err) => {});
-    },
-  },
-};
-</script>
-<style lang="less">
-.thumb-example {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 32px);
-  box-sizing: border-box;
-
-  .picTop {
-    width: 100%;
-    height: 80%;
-    overflow: hidden;
-    margin-bottom: 4px;
-    position: relative;
-    .downBtn {
-      position: absolute;
-      background: rgba(0, 0, 0, 0.5);
-      border: none;
-      right: 8px;
-      bottom: 16px;
-      color: #fff;
-      z-index: 5;
-      &:hover {
-        background: rgba(0, 0, 0, 0.9);
-        color: #169e8c;
-      }
-    }
-    &:hover {
-      .arrow {
-        opacity: 1;
-        transition: all 0.5s ease-in;
-      }
-    }
-    .bigimg {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      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;
-        color: #fff;
-        background-color: rgba(0, 0, 0, 0.5);
-        left: 16px;
-        font-size: 14px;
-        line-height: 24px;
-        //opacity: 0;
-        transition: bottom 2s ease 0s;
-      }
-      .myCanvas {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        z-index: 2;
-      }
-    }
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: fill;
-      cursor: pointer;
-    }
-    .arrow {
-      opacity: 0;
-      position: absolute;
-      cursor: pointer;
-      color: #fff;
-      font-size: 16px;
-      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;
-      color: #fff;
-      text-align: center;
-      line-height: 60px;
-      width: 40px;
-      height: 40px;
-      z-index: 4;
-      &:hover {
-        color: #169e8c;
-      }
-    }
-    .leftArrow {
-      left: 16px;
-    }
-    .rightArrow {
-      right: 16px;
-    }
-  }
-  .picBottom {
-    width: 100%;
-    height: 20%;
-    position: relative;
-    .smallPicBox {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      li {
-        width: 20%;
-        border: 3px solid transparent;
-        // overflow: hidden;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        img {
-          width: 100%;
-          height: 100%;
-          object-fit: fill;
-          cursor: pointer;
-        }
-        .smallhavePic {
-          width: 100%;
-          height: 100%;
-        }
-        .smallnoPic {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .timeInfo {
-        position: absolute;
-        bottom: 0px;
-        width: 100%;
-        background: #f0f0f0;
-        padding: 6px 0px;
-        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;
-        }
-      }
-      .borderActive {
-        .timeInfo {
-          //background: @color-primary;
-          background: linear-gradient(180deg, #00eaff 10%, #169e8c 100%);
-          color: #fff;
-        }
-      }
-      // .borderActive {
-      //   border: 3px solid @color-primary;
-      //   &::after {
-      //     content: "";
-      //     position: absolute;
-      //     width: 0;
-      //     height: 0;
-      //     left: 50%;
-      //     top: -16px;
-      //     margin-left: -8px;
-      //     border-bottom: 13px solid @color-primary;
-      //     border-left: 8px solid transparent;
-      //     border-right: 8px solid transparent;
-      //   }
-      // }
-    }
-    .arrow {
-      position: absolute;
-      cursor: pointer;
-      color: #fff;
-      font-size: 12px;
-      border-radius: 30px;
-      position: absolute;
-      top: 45%;
-      transform: translateY(-50%);
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-      text-align: center;
-      line-height: 60px;
-      width: 28px;
-      height: 28px;
-    }
-    .leftArrow {
-      left: 16px;
-    }
-    .rightArrow {
-      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是需要绑定到选择器的关键帧名称*/
-  0% {
-    transform: scale(0);
-    /*开始为原始大小*/
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-// https://v1.github.surmon.me/vue-awesome-swiper/
-</style>

src/views/realTimeMonitor/components/carouselChart.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="thumb-example">
-    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
+    <div class="radioBox" v-if="roleUser == 1 || roleUser == 0">
+      {{ radioPx }} <span>({{ fileSize.toFixed(2) }}M)</span>
+      <!-- <span>(共{{ terminalPhoto.length }}张)</span> -->
+    </div>
     <div class="topPic">
       <div
         class="bigPic"
@@ -17,6 +20,7 @@
           :src="currentPicPath + '!1366x768'"
           :preview-src-list="srcList"
           @load="loadImage"
+          @error="setDefaultImage"
           ref="picJpg"
         >
           <template slot="error">
@@ -35,7 +39,7 @@
           autoplay
         ></video>
       </div>
-      <div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
+      <div class="arrow leftArrow" @click="leftClick" v-if="activeSmall > 0">
         <i class="el-icon-arrow-left"></i>
       </div>
       <el-button
@@ -46,30 +50,28 @@
       <div
         class="arrow rightArrow"
         @click="rightClick"
-        v-if="currentPage < terminalPhoto.length - 1"
+        v-if="activeSmall !== terminalPhoto.length - 1"
       >
         <i class="el-icon-arrow-right"></i>
       </div>
     </div>
-    <div class="bottomPic" v-on:wheel="handleScroll">
-      <el-carousel
-        :loop="false"
-        :autoplay="false"
-        ref="carousel"
-        indicator-position="none"
-        @change="changeItem"
-      >
-        <el-carousel-item
+    <!--  -->
+    <div class="bottomPic">
+      <div class="scrollPicContain">
+        <div
           class="el-car-item"
-          v-for="(list, index) in terminalPhoto"
-          :key="index"
+          ref="scrollBox"
+          v-on:wheel="handleScroll"
+          :class="terminalPhoto.length < photoNum ? 'littlePic' : ''"
         >
           <div
             class="smallPic"
-            v-for="(item, index2) in list"
+            v-for="(item, index2) in terminalPhoto"
             :key="index2"
             @click="changeBigPic(item, index2)"
-            :class="activeSmall === index2 ? 'borderActive' : ''"
+            :class="`${activeSmall === index2 ? 'borderActive ' : ''}${
+              photoNum === 10 ? 'moreSmallPic' : ''
+            }`"
           >
             <div
               class="picBox"
@@ -148,8 +150,14 @@
               <img v-lazy="item.path" />
             </div>
           </div>
-        </el-carousel-item>
-      </el-carousel>
+        </div>
+        <div class="arrow leftArrow" @click="smallLeftClick">
+          <i class="el-icon-arrow-left"></i>
+        </div>
+        <div class="arrow rightArrow">
+          <i class="el-icon-arrow-right" @click="smallRightClick"></i>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -178,6 +186,7 @@ export default {
       currentPage: 0,
       srcList: [],
       radioPx: "",
+      fileSize: "",
       roleUser: "",
       localPoints: [], //线缆坐标
       flagLine: true, //线缆标识
@@ -190,8 +199,8 @@ export default {
     };
   },
   mounted() {
-    console.log(this.terminalPhoto);
-    this.changeBigPic(this.terminalPhoto[0][0], 0);
+    ////console.log(this.terminalPhoto);
+    this.changeBigPic(this.terminalPhoto[0], 0);
   },
   watch: {
     terminalPhoto: {
@@ -204,35 +213,53 @@ export default {
   },
   created() {
     this.roleUser = localStorage.getItem("role");
-    console.log(this.roleUser);
+    ////console.log(this.roleUser);
   },
+
   methods: {
     //下载图片
-    downLoadPic(url, name) {
-      const image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
-      image.src = url;
-      image.onload = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, image.width, image.height);
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          this.download(url, name);
-          // 用完释放URL对象
-          URL.revokeObjectURL(url);
-        });
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
+    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;
+      console.log(name);
+      link.download = name.split("/").pop();
+
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // 释放 Blob URL
+      window.URL.revokeObjectURL(url);
     },
+    // downLoadPic(url, name) {
+    //   const image = new Image();
+    //   image.setAttribute("crossOrigin", "anonymous");
+    //   image.src = url;
+    //   image.onload = () => {
+    //     const canvas = document.createElement("canvas");
+    //     canvas.width = image.width;
+    //     canvas.height = image.height;
+    //     const ctx = canvas.getContext("2d");
+    //     ctx.drawImage(image, 0, 0, image.width, image.height);
+    //     canvas.toBlob((blob) => {
+    //       const url = URL.createObjectURL(blob);
+    //       this.download(url, name);
+    //       // 用完释放URL对象
+    //       URL.revokeObjectURL(url);
+    //     });
+    //   };
+    // },
+    // download(href, name) {
+    //   const eleLink = document.createElement("a");
+    //   eleLink.download = name;
+    //   eleLink.href = href;
+    //   eleLink.click();
+    //   eleLink.remove();
+    // },
     //获取线缆绘制显示
     getPointList(data) {
       getCoordinate({
@@ -241,7 +268,7 @@ export default {
         termId: data.termId,
       })
         .then((res) => {
-          console.log(res);
+          //console.log(res);
           this.localPoints = res.data.list;
           this.color = res.data.color;
           this.borderwidth = res.data.boderWidth;
@@ -255,12 +282,12 @@ export default {
     //开启绘制线缆
     openLine() {
       this.flagLine = true;
-      console.log("我是绘制线缆");
+
       //开启传1
       updateMarkEnableStatus({
         status: 1,
       }).then((res) => {
-        console.log(res);
+        //console.log(res);
       });
       this.drawline();
     },
@@ -268,38 +295,35 @@ export default {
     closeLine() {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.flagLine = false;
-      console.log("关闭线缆");
+
       //关闭传0
       updateMarkEnableStatus({
         status: 0,
       }).then((res) => {
-        console.log(res);
+        //console.log(res);
       });
     },
     //绘制线缆方法
     drawline() {
       this.canvas = this.$refs.myCanvas;
       this.imgpic = this.$refs.picJpg;
-      console.log(this.canvas);
-      console.log(this.imgpic);
+
       this.canvas.width = this.imgpic.imageWidth; //设置画布大小
       this.canvas.height = this.imgpic.imageHeight; //设置画布大小
       this.ctx = this.canvas.getContext("2d");
-      console.log(this.localPoints);
+
       if (this.flagLine == true) {
         this.localPoints = this.localPoints;
-        console.log(this.localPoints);
       } else {
         this.localPoints = [];
       }
-      console.log(this.ctx);
+
       this.ctx.beginPath();
       //设置线条颜色，必须放在绘制之前
       this.ctx.strokeStyle = this.color;
       // 线宽设置，必须放在绘制之前
       this.ctx.lineWidth = this.borderwidth;
-      console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
-      console.log(this.localPoints);
+
       if (this.localPoints == null) {
         return;
       } else {
@@ -326,37 +350,23 @@ export default {
     },
     //点击大图左右按钮
     leftClick() {
-      console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
+      console.log(this.photoNum);
       this.activeSmall--;
-      if (this.activeSmall < 0) {
-        this.currentPage--;
-        this.$refs.carousel.setActiveItem(this.currentPage);
-        this.activeSmall =
-          this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
-      }
-      this.changeBigPic(
-        this.terminalPhoto[this.currentPage][this.activeSmall],
-        this.activeSmall
-      );
+      this.$refs.scrollBox.scrollLeft -=
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
+      this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
     },
     rightClick() {
-      console.log(this.activeSmall);
-      console.log(this.terminalPhoto.length);
+      console.log(this.photoNum);
       this.activeSmall++;
-      if (this.activeSmall > this.photoNum - 1) {
-        this.currentPage++;
-        this.$refs.carousel.setActiveItem(this.currentPage);
-        this.activeSmall = 0;
-      }
-      this.changeBigPic(
-        this.terminalPhoto[this.currentPage][this.activeSmall],
-        this.activeSmall
-      );
+      this.$refs.scrollBox.scrollLeft +=
+        this.$refs.scrollBox.offsetWidth / this.photoNum;
+      this.changeBigPic(this.terminalPhoto[this.activeSmall], this.activeSmall);
     },
     //获取第一张大图
     changeBigPic(data, i) {
-      console.log(data, i);
-      console.log("鼠标222222222", this.currentPage, this.activeSmall);
+      // //console.log(data, i);
+      // //console.log("鼠标222222222", this.currentPage, this.activeSmall);
       this.srcList = [];
       this.localPoints = [];
       this.activeSmall = i;
@@ -368,78 +378,36 @@ export default {
       } else {
         this.radioPx = "";
       }
+      this.fileSize = data.fileSize / (1024 * 1024);
       this.getPointList(data);
     },
     loadImage() {
+      console.log("loading");
       this.picLoading = false;
     },
-    changeItem(e) {
-      // console.log(this.currentPage);
-      // this.currentPage = e;
-      // if (e === 0) {
-      //   this.activeSmall = 0;
-      //   //this.changeBigPic(this.terminalPhoto[0][0], 0);
-      // } else {
-      //   this.activeSmall = 0;
-      //   // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
-      // }
-      //this.active = e; // 将走马灯的 下标 指定为 tab 的下标
+    setDefaultImage(e) {
+      e.target.src = defaultImage;
+      this.picLoading = false;
     },
     //鼠标滚动
     handleScroll(e) {
       let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
-      console.log(e.deltaY, direction);
       if (direction == "down") {
-        if (
-          this.currentPage == this.terminalPhoto.length - 1 &&
-          this.activeSmall ==
-            this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
-        ) {
-          this.$message({
-            message: "已经是最后一张图",
-            type: "success",
-            showClose: true,
-            duration: 500,
-          });
-          return;
-        } else {
-          // this.rightClick();
-          this.activeSmall++;
-          if (this.activeSmall > this.photoNum - 1) {
-            this.currentPage++;
-            this.$refs.carousel.setActiveItem(this.currentPage);
-            this.activeSmall = 0;
-          }
-          console.log(this.activeSmall);
-        }
+        this.$refs.scrollBox.scrollLeft +=
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
       }
       if (direction == "up") {
-        if (this.currentPage == 0 && this.activeSmall == 0) {
-          this.$message({
-            showClose: true,
-            duration: 500,
-            message: "已经是最新一张图",
-            type: "success",
-          });
-          return;
-        } else {
-          // this.leftClick();
-          console.log(this.activeSmall);
-          this.activeSmall--;
-          console.log(this.activeSmall);
-          if (this.activeSmall < 0) {
-            this.currentPage--;
-            console.log("我是页数", this.currentPage);
-            this.$refs.carousel.setActiveItem(this.currentPage);
-            this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
-            console.log(this.terminalPhoto);
-            console.log(this.terminalPhoto[this.currentPage].length);
-            console.log("我是选中的值", this.activeSmall);
-          }
-          console.log(this.activeSmall);
-        }
+        this.$refs.scrollBox.scrollLeft -=
+          (this.$refs.scrollBox.offsetWidth / this.photoNum) * 1;
       }
     },
+    //缩略图的左右箭头
+    smallLeftClick() {
+      this.$refs.scrollBox.scrollLeft -= this.$refs.scrollBox.offsetWidth;
+    },
+    smallRightClick() {
+      this.$refs.scrollBox.scrollLeft += this.$refs.scrollBox.offsetWidth;
+    },
   },
 };
 </script>
@@ -543,41 +511,68 @@ export default {
     width: 100%;
     height: 20%;
     margin-bottom: 6px;
-    .el-carousel {
+    .scrollPicContain {
+      // width: 1380px;
+      display: flex;
       height: 100%;
-      .el-carousel__container {
-        height: 100% !important;
-      }
-      .el-carousel__arrow {
+      position: relative;
+      .arrow {
+        opacity: 0;
+        position: absolute;
+        cursor: pointer;
+        font-size: 14px;
+        border-radius: 30px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
         color: #4cdbc8;
         font-weight: bold;
         background-color: rgba(31, 45, 61, 0.8);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        line-height: 60px;
+        width: 30px;
+        height: 30px;
+        z-index: 4;
         &:hover {
           background-color: rgba(31, 45, 61, 1);
         }
       }
+      .leftArrow {
+        left: 16px;
+      }
+      .rightArrow {
+        right: 16px;
+      }
+      &:hover {
+        .arrow {
+          opacity: 1;
+          transition: all 0.5s ease-in;
+        }
+      }
     }
     .el-car-item {
+      width: 100%;
+      height: 100%;
       display: flex;
-      justify-content: center;
+      overflow-x: hidden;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
       .smallPic {
-        width: 20%;
+        width: 19.2%;
         border: 3px solid transparent;
         box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        flex-shrink: 0;
+        white-space: nowrap;
         position: relative;
         cursor: pointer;
         .picBox {
           width: 100%;
           height: 100%;
         }
-        // .el-image {
-        //   width: 100%;
-        //   height: 100%;
 
-        // }
         img {
           width: 100%;
           height: 100%;
@@ -600,6 +595,9 @@ export default {
           }
         }
       }
+      .moreSmallPic {
+        width: 9.8%;
+      }
       .borderActive {
         .timeInfo {
           color: #fff;
@@ -607,6 +605,9 @@ export default {
         }
       }
     }
+    .littlePic {
+      justify-content: center;
+    }
   }
 }
 </style>

src/views/realTimeMonitor/components/carouselChartOld.vue

@@ -0,0 +1,612 @@
+<template>
+  <div class="thumb-example">
+    <div class="radioBox" v-if="roleUser != 2">{{ radioPx }}</div>
+    <div class="topPic">
+      <div
+        class="bigPic"
+        v-if="currentPicPath.indexOf('nopic') !== -1 && currentPicPath"
+      >
+        <el-image :src="currentPicPath"></el-image>
+      </div>
+      <div
+        class="bigPic"
+        v-else-if="currentPicPath && mediaType == 0"
+        v-loading="picLoading"
+      >
+        <el-image
+          :src="currentPicPath + '!1366x768'"
+          :preview-src-list="srcList"
+          @load="loadImage"
+          ref="picJpg"
+        >
+          <template slot="error">
+            <img src="../../../assets/img/nodatapic2.jpg" />
+          </template>
+        </el-image>
+        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
+        <!-- <img :src="currentPicPath + '!1366x768'" @load="loadImage" /> -->
+      </div>
+      <div class="bigPic" v-else-if="currentPicPath && mediaType == 1">
+        <video
+          width="100%"
+          height="100%"
+          :src="currentPicPath"
+          controls="controls"
+          autoplay
+        ></video>
+      </div>
+      <div class="arrow leftArrow" @click="leftClick" v-if="currentPage > 0">
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <el-button
+        class="downBtn"
+        @click.stop="downLoadPic(currentPicPath, currentPicPath)"
+        >下载图片</el-button
+      >
+      <div
+        class="arrow rightArrow"
+        @click="rightClick"
+        v-if="currentPage < terminalPhoto.length - 1"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
+    <div class="bottomPic" v-on:wheel="handleScroll">
+      <el-carousel
+        :loop="false"
+        :autoplay="false"
+        ref="carousel"
+        indicator-position="none"
+        @change="changeItem"
+      >
+        <el-carousel-item
+          class="el-car-item"
+          v-for="(list, index) in terminalPhoto"
+          :key="index"
+        >
+          <div
+            class="smallPic"
+            v-for="(item, index2) in list"
+            :key="index2"
+            @click="changeBigPic(item, index2)"
+            :class="activeSmall === index2 ? 'borderActive' : ''"
+          >
+            <div
+              class="picBox"
+              v-if="
+                item.path.indexOf('nopic') == -1 &&
+                item.path.indexOf('videos') == -1
+              "
+            >
+              <!-- <el-image v-lazy="item.path + '!260x160'"></el-image> -->
+              <img v-lazy="item.path + '!260x160'" />
+
+              <p class="timeInfo">
+                <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.alias !== null && item.alias !== ""
+                      ? item.alias
+                      : item.channelName
+                  }}</span
+                >
+              </p>
+            </div>
+            <div class="picBox" v-else-if="item.mediaType == 1">
+              <!-- <el-image :src="item.thumb + '!260x160'"></el-image> -->
+              <img v-lazy="item.thumb + '!260x160'" />
+              <p class="timeInfo">
+                <i class="el-icon-video-camera"></i>
+                <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.alias !== null && item.alias !== ""
+                      ? item.alias
+                      : item.channelName
+                  }}</span
+                >
+              </p>
+            </div>
+            <div class="picBox" v-else>
+              <!-- <el-image :src="item.path"></el-image> -->
+              <img v-lazy="item.path" />
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
+</template>
+
+<script>
+import defaultImage from "../../../assets/img/nodatapic2.jpg";
+import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
+export default {
+  components: {},
+  props: {
+    terminalPhoto: {
+      type: Array,
+      default: () => [],
+    },
+    photoNum: {
+      type: Number,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      picLoading: true,
+      currentPicPath: "", //大图
+      mediaType: "", //判断图片类型是视频还是图片
+      activeSmall: 0, //索引选中小图,
+      currentPage: 0,
+      srcList: [],
+      radioPx: "",
+      roleUser: "",
+      localPoints: [], //线缆坐标
+      flagLine: true, //线缆标识
+      canvas: null,
+      ctx: null,
+      imgpic: null,
+      color: "", //线颜色
+      borderwidth: "", //线宽
+      markEnable: "", //是否显示
+    };
+  },
+  mounted() {
+    console.log(this.terminalPhoto);
+    this.changeBigPic(this.terminalPhoto[0][0], 0);
+  },
+  watch: {
+    terminalPhoto: {
+      handler(newVal, oldVal) {
+        this.terminalPhoto = newVal;
+      },
+      immediate: true,
+      deep: true, //deep，默认值是 false，代表是否深度监听。
+    },
+  },
+  created() {
+    this.roleUser = localStorage.getItem("role");
+    console.log(this.roleUser);
+  },
+  methods: {
+    //下载图片
+    downLoadPic(url, name) {
+      const image = new Image();
+      image.setAttribute("crossOrigin", "anonymous");
+      image.src = url;
+      image.onload = () => {
+        const canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+        canvas.toBlob((blob) => {
+          const url = URL.createObjectURL(blob);
+          this.download(url, name);
+          // 用完释放URL对象
+          URL.revokeObjectURL(url);
+        });
+      };
+    },
+    download(href, name) {
+      const eleLink = document.createElement("a");
+      eleLink.download = name;
+      eleLink.href = href;
+      eleLink.click();
+      eleLink.remove();
+    },
+    //获取线缆绘制显示
+    getPointList(data) {
+      getCoordinate({
+        channelId: data.channelId,
+        needPic: "1",
+        termId: data.termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          this.color = res.data.color;
+          this.borderwidth = res.data.boderWidth;
+          this.markEnable = res.data.markEnable;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+        })
+        .catch((err) => {});
+    },
+    //开启绘制线缆
+    openLine() {
+      this.flagLine = true;
+      console.log("我是绘制线缆");
+      //开启传1
+      updateMarkEnableStatus({
+        status: 1,
+      }).then((res) => {
+        console.log(res);
+      });
+      this.drawline();
+    },
+    //关闭绘制线缆
+    closeLine() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.flagLine = false;
+      console.log("关闭线缆");
+      //关闭传0
+      updateMarkEnableStatus({
+        status: 0,
+      }).then((res) => {
+        console.log(res);
+      });
+    },
+    //绘制线缆方法
+    drawline() {
+      this.canvas = this.$refs.myCanvas;
+      this.imgpic = this.$refs.picJpg;
+      console.log(this.canvas);
+      console.log(this.imgpic);
+      this.canvas.width = this.imgpic.imageWidth; //设置画布大小
+      this.canvas.height = this.imgpic.imageHeight; //设置画布大小
+      this.ctx = this.canvas.getContext("2d");
+      console.log(this.localPoints);
+      if (this.flagLine == true) {
+        this.localPoints = this.localPoints;
+        console.log(this.localPoints);
+      } else {
+        this.localPoints = [];
+      }
+      console.log(this.ctx);
+      this.ctx.beginPath();
+      //设置线条颜色，必须放在绘制之前
+      this.ctx.strokeStyle = this.color;
+      // 线宽设置，必须放在绘制之前
+      this.ctx.lineWidth = this.borderwidth;
+      console.log(this.ctx.lineWidth, this.ctx.strokeStyle);
+      console.log(this.localPoints);
+      if (this.localPoints == null) {
+        return;
+      } else {
+        for (var i = 0; i < this.localPoints.length; i++) {
+          this.ctx.moveTo(
+            this.localPoints[i].x1 * this.imgpic.imageWidth,
+            this.localPoints[i].y1 * this.imgpic.imageHeight
+          );
+          this.ctx.lineTo(
+            this.localPoints[i].x2 * this.imgpic.imageWidth,
+            this.localPoints[i].y2 * this.imgpic.imageHeight
+          );
+        }
+        this.ctx.closePath();
+        this.ctx.stroke();
+      }
+
+      // this.ctx.beginPath(); //开始路径
+      // this.ctx.moveTo(100, 100); //三角形，左顶点
+      // this.ctx.lineTo(300, 100); //右顶点
+      // this.ctx.lineTo(300, 300); //底部的点
+      // this.ctx.closePath(); //结束路径
+      // this.ctx.stroke(); //描边路径
+    },
+    //点击大图左右按钮
+    leftClick() {
+      console.log("我点击了左侧按钮", this.activeSmall, this.currentPage);
+      this.activeSmall--;
+      if (this.activeSmall < 0) {
+        this.currentPage--;
+        this.$refs.carousel.setActiveItem(this.currentPage);
+        this.activeSmall =
+          this.terminalPhoto[this.terminalPhoto.length - 1].length - 1;
+      }
+      this.changeBigPic(
+        this.terminalPhoto[this.currentPage][this.activeSmall],
+        this.activeSmall
+      );
+    },
+    rightClick() {
+      console.log(this.activeSmall);
+      console.log(this.terminalPhoto.length);
+      this.activeSmall++;
+      if (this.activeSmall > this.photoNum - 1) {
+        this.currentPage++;
+        this.$refs.carousel.setActiveItem(this.currentPage);
+        this.activeSmall = 0;
+      }
+      this.changeBigPic(
+        this.terminalPhoto[this.currentPage][this.activeSmall],
+        this.activeSmall
+      );
+    },
+    //获取第一张大图
+    changeBigPic(data, i) {
+      console.log(data, i);
+      console.log("鼠标222222222", this.currentPage, this.activeSmall);
+      this.srcList = [];
+      this.localPoints = [];
+      this.activeSmall = i;
+      this.mediaType = data.mediaType;
+      this.currentPicPath = data.path;
+      this.srcList.push(data.path);
+      if (data.width != undefined) {
+        this.radioPx = data.width + "x" + data.height;
+      } else {
+        this.radioPx = "";
+      }
+      this.getPointList(data);
+    },
+    loadImage() {
+      this.picLoading = false;
+    },
+    changeItem(e) {
+      // console.log(this.currentPage);
+      // this.currentPage = e;
+      // if (e === 0) {
+      //   this.activeSmall = 0;
+      //   //this.changeBigPic(this.terminalPhoto[0][0], 0);
+      // } else {
+      //   this.activeSmall = 0;
+      //   // this.changeBigPic(this.terminalPhoto[this.currentPage][0], 0);
+      // }
+      //this.active = e; // 将走马灯的 下标 指定为 tab 的下标
+    },
+    //鼠标滚动
+    handleScroll(e) {
+      let direction = e.deltaY > 0 ? "down" : "up"; //deltaY为正则滚轮向下，为负滚轮向上
+      console.log(e.deltaY, direction);
+      if (direction == "down") {
+        if (
+          this.currentPage == this.terminalPhoto.length - 1 &&
+          this.activeSmall ==
+            this.terminalPhoto[this.terminalPhoto.length - 1].length - 1
+        ) {
+          this.$message({
+            message: "已经是最后一张图",
+            type: "success",
+            showClose: true,
+            duration: 500,
+          });
+          return;
+        } else {
+          // this.rightClick();
+          this.activeSmall++;
+          if (this.activeSmall > this.photoNum - 1) {
+            this.currentPage++;
+            this.$refs.carousel.setActiveItem(this.currentPage);
+            this.activeSmall = 0;
+          }
+          console.log(this.activeSmall);
+        }
+      }
+      if (direction == "up") {
+        if (this.currentPage == 0 && this.activeSmall == 0) {
+          this.$message({
+            showClose: true,
+            duration: 500,
+            message: "已经是最新一张图",
+            type: "success",
+          });
+          return;
+        } else {
+          // this.leftClick();
+          console.log(this.activeSmall);
+          this.activeSmall--;
+          console.log(this.activeSmall);
+          if (this.activeSmall < 0) {
+            this.currentPage--;
+            console.log("我是页数", this.currentPage);
+            this.$refs.carousel.setActiveItem(this.currentPage);
+            this.activeSmall = this.terminalPhoto[this.currentPage].length - 1;
+            console.log(this.terminalPhoto);
+            console.log(this.terminalPhoto[this.currentPage].length);
+            console.log("我是选中的值", this.activeSmall);
+          }
+          console.log(this.activeSmall);
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="less">
+.thumb-example {
+  width: 100%;
+  // display: flex;
+  // flex-direction: column;
+  height: calc(100% - 32px);
+  box-sizing: border-box;
+  .radioBox {
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    color: #fff;
+    font-size: 14px;
+  }
+  .topPic {
+    width: 100%;
+    height: 80%;
+    margin-bottom: 4px;
+    position: relative;
+    .bigPic {
+      width: 100%;
+      height: 100%;
+      .el-image {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .myCanvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 3;
+      pointer-events: none;
+    }
+    &:hover {
+      .arrow {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+      .downBtn {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+    }
+    .arrow {
+      opacity: 0;
+      position: absolute;
+      cursor: pointer;
+      font-size: 16px;
+      border-radius: 30px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #4cdbc8;
+      font-weight: bold;
+      background-color: rgba(31, 45, 61, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      line-height: 60px;
+      width: 40px;
+      height: 40px;
+      z-index: 4;
+      &:hover {
+        background-color: rgba(31, 45, 61, 1);
+      }
+    }
+    .leftArrow {
+      left: 16px;
+    }
+    .rightArrow {
+      right: 16px;
+    }
+    .downBtn {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border: none;
+      right: 24px;
+      bottom: 24px;
+      color: #fff;
+      z-index: 5;
+      opacity: 0;
+      &:hover {
+        background: rgba(0, 0, 0, 0.9);
+        color: #169e8c;
+      }
+    }
+  }
+  .bottomPic {
+    width: 100%;
+    height: 20%;
+    margin-bottom: 6px;
+    .el-carousel {
+      height: 100%;
+      .el-carousel__container {
+        height: 100% !important;
+      }
+      .el-carousel__arrow {
+        color: #4cdbc8;
+        font-weight: bold;
+        background-color: rgba(31, 45, 61, 0.8);
+        &:hover {
+          background-color: rgba(31, 45, 61, 1);
+        }
+      }
+    }
+    .el-car-item {
+      display: flex;
+      justify-content: center;
+      .smallPic {
+        width: 20%;
+        border: 3px solid transparent;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        cursor: pointer;
+        .picBox {
+          width: 100%;
+          height: 100%;
+        }
+        // .el-image {
+        //   width: 100%;
+        //   height: 100%;
+
+        // }
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        .timeInfo {
+          position: absolute;
+          bottom: 0px;
+          width: 100%;
+          background: #f0f0f0;
+          padding: 6px 0;
+          font-size: 12px;
+          text-align: center;
+          color: #333;
+          .el-icon-video-camera {
+            font-size: 20px;
+            margin-right: 8px;
+            align-items: center;
+            vertical-align: sub;
+            color: #169e8c;
+          }
+        }
+      }
+      .borderActive {
+        .timeInfo {
+          color: #fff;
+          background: linear-gradient(180deg, #4cdbc8 10%, #128071);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/morePicPreveiw.vue

@@ -83,23 +83,23 @@ export default {
           } else {
             this.terminalPhoto = res.data.list;
           }
-          let newDataList = [];
-          let current = 0;
-          if (this.terminalPhoto && this.terminalPhoto.length > 0) {
-            for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
-              if (i % this.photoNum !== 0 || i === 0) {
-                if (!newDataList[current]) {
-                  newDataList.push([this.terminalPhoto[i]]);
-                } else {
-                  newDataList[current].push(this.terminalPhoto[i]);
-                }
-              } else {
-                current++;
-                newDataList.push([this.terminalPhoto[i]]);
-              }
-            }
-          }
-          this.terminalPhoto = [...newDataList];
+          // let newDataList = [];
+          // let current = 0;
+          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
+          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
+          //     if (i % this.photoNum !== 0 || i === 0) {
+          //       if (!newDataList[current]) {
+          //         newDataList.push([this.terminalPhoto[i]]);
+          //       } else {
+          //         newDataList[current].push(this.terminalPhoto[i]);
+          //       }
+          //     } else {
+          //       current++;
+          //       newDataList.push([this.terminalPhoto[i]]);
+          //     }
+          //   }
+          // }
+          // this.terminalPhoto = [...newDataList];
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -119,6 +119,7 @@ export default {
   background: #fff;
   top: 0px;
   left: 0px;
+  z-index: 2;
   //z-index: 99999;
   .headTitle {
     height: 40px;

src/views/realTimeMonitor/components/parameterArea.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="AreaBox">
-    <div class="areaHead">{{ areaData.cmdid }}</div>
+    <div class="areaHead">
+      <span @dblclick="handleDblClick(areaData.cmdid)">{{
+        areaData.cmdid
+      }}</span>
+      <el-button
+        type="text"
+        :icon="areaData.isfavor == 1 ? 'el-icon-star-on' : 'el-icon-star-off'"
+        @click="addCollectClick"
+        >{{ areaData.isfavor == 1 ? "取消收藏" : "添加收藏" }}</el-button
+      >
+    </div>
     <div class="paramsDate">
       <h3>日历快速查询</h3>
       <el-date-picker
@@ -10,6 +20,7 @@
         format="yyyy 年 MM 月 dd 日"
         :picker-options="pickerOptions"
         @change="changedate"
+        @focus="handleDateFocus"
         :clearable="false"
       >
       </el-date-picker>
@@ -58,6 +69,7 @@
       <h3>操作项</h3>
       <div class="buttonGroup">
         <takePicButton></takePicButton>
+
         <takeVideoButton></takeVideoButton>
 
         <deviceInfoButton></deviceInfoButton>
@@ -66,10 +78,22 @@
         <alarmButton></alarmButton>
         <cableButton></cableButton>
         <gpsButton></gpsButton>
-        <el-button type="primary" @click="handlehistoryPic">
+        <el-button
+          type="primary"
+          @click="handlehistoryPic"
+          v-if="roleUser != 4"
+        >
           历史图片</el-button
         >
         <el-button type="primary" @click="handleParams"> 参数配置</el-button>
+
+        <el-button type="primary" @click="handleuploadPic" v-if="roleUser == 0">
+          上传图片</el-button
+        >
+        <takeTimePicButton v-if="roleUser == 0"></takeTimePicButton>
+
+        <setChannelButton v-if="roleUser == 0"></setChannelButton>
+        <setAppButton v-if="roleUser == 0"></setAppButton>
         <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
           >主动拍照
         </el-button> -->
@@ -82,22 +106,70 @@
         <el-button type="primary">主动拍照 </el-button> -->
       </div>
     </div>
+    <div class="setfocalLength" v-if="areaData.protocol == '65286'">
+      <h3>焦距调节</h3>
+      <div class="selectChannel">
+        <span class="labelname">选择通道</span>
+        <el-select
+          v-model="channelarrValue"
+          placeholder="请选择通道"
+          ref="multiSelect"
+        >
+          <el-option
+            v-for="item in channelfocalOpyion"
+            :key="item.channelid"
+            :label="
+              item.alias !== null && item.alias !== ''
+                ? item.alias
+                : item.channelname
+            "
+            :value="item.channelid"
+          >
+            {{
+              item.alias !== null && item.alias !== ""
+                ? item.alias
+                : item.channelname
+            }}
+          </el-option>
+        </el-select>
+      </div>
+      <div class="buttonGroup">
+        <el-button type="primary" icon="el-icon-zoom-in" @click="amplify()"
+          >放大</el-button
+        >
+        <el-button type="primary" icon="el-icon-zoom-out" @click="reduce()"
+          >缩小</el-button
+        >
+      </div>
+    </div>
     <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
+    <uploadpic ref="uploadpicref"></uploadpic>
   </div>
 </template>
 <script>
+import EventBus from "@/utils/event-bus";
 import takePicButton from "./takePicButton.vue";
+import setChannelButton from "./setChannelButton.vue";
+import takeTimePicButton from "./takeTimePicButton.vue";
 import takeVideoButton from "./takeVideoButton.vue";
 import deviceInfoButton from "./deviceInfoButton.vue";
 import scheduleButton from "./scheduleButton.vue";
 import alarmButton from "./alarmButton.vue";
 import cableButton from "./cableButton.vue";
 import gpsButton from "./gpsButton.vue";
+import uploadpic from "./uploadpic.vue";
 import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
-import { getChannelByTermidJoggle } from "@/utils/api/index";
+import setAppButton from "./setAppButton.vue";
+import {
+  getChannelByTermidJoggle,
+  updateTermCamera,
+  getTermStatus,
+  addFavorList,
+} from "@/utils/api/index";
 export default {
   components: {
     takePicButton,
+    takeTimePicButton,
     takeVideoButton,
     deviceInfoButton,
     scheduleButton,
@@ -105,11 +177,17 @@ export default {
     cableButton,
     gpsButton,
     parameterSetDialog,
+    uploadpic,
+    setChannelButton,
+    setAppButton,
   },
   data() {
     return {
+      roleUser: "",
       selectChannelValue: null, //选中的通道
       channelListOption: [], //通道数组
+      channelarrValue: null,
+      channelfocalOpyion: [], //焦距通道
       dateValue: "", //选择日期
       pickerOptions: {
         disabledDate(date) {
@@ -120,6 +198,7 @@ export default {
       selectDyId: "", //获取当前选中的电压线路等信息
       selectLineId: "",
       selectTowerId: "",
+      collectFlag: false, //收藏
     };
   },
 
@@ -135,16 +214,81 @@ export default {
       return this.$store.state.currentData;
     },
   },
+  created() {
+    this.roleUser = localStorage.getItem("role");
+    console.log("asdsaddddddddddddddddddddddddd", this.roleUser);
+  },
   mounted() {
     this.getDateTime();
   },
   methods: {
+    //双击选中复制
+    handleDblClick(val) {
+      // alert(val);
+      var input = document.createElement("input"); // 创建input对象
+      input.value = val; // 设置复制内容
+      document.body.appendChild(input); // 添加临时实例
+      input.select(); // 选择实例内容
+      document.execCommand("Copy"); // 执行复制
+      document.body.removeChild(input); // 删除临时实例
+      //this.$message.success("复制成功！");
+      this.$message({
+        duration: 800,
+        showClose: true,
+        message: "复制成功！",
+        type: "success",
+      });
+    },
     //获取当前时间
     getDateTime() {
       console.log(new Date());
       this.dateValue = new Date().getTime();
       console.log(this.dateValue);
     },
+    //点击收藏和取消收藏
+    addCollectClick() {
+      if (this.areaData.isfavor !== 1) {
+        this.areaData.isfavor = 1;
+        addFavorList({ list: [this.areaData.id], type: 1 }).then((res) => {
+          EventBus.$emit("treelist");
+        });
+        this.$message({
+          type: "success",
+          message: "添加成功!",
+        });
+        // this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
+        //   confirmButtonText: "确定",
+        //   cancelButtonText: "取消",
+        //   type: "warning",
+        // }).then(() => {
+
+        // });
+      } else {
+        this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          this.areaData.isfavor = 0;
+          addFavorList({ list: [this.areaData.id], type: 0 }).then((res) => {
+            EventBus.$emit("treelist");
+          });
+          this.$message({
+            type: "success",
+            message: "取消收藏!",
+          });
+        });
+      }
+    },
+    //focus时间重新赋值
+    handleDateFocus() {
+      // 更新pickerOptions的disabledDate函数，禁用大于当前时间的日期
+      this.pickerOptions.disabledDate = (date) => {
+        //console.log(date);
+        const currentDate = new Date();
+        return date.getTime() > currentDate.getTime(); // 禁用大于今天的日期
+      };
+    },
     //选择时间
     changedate() {
       console.log(this.dateValue.getTime());
@@ -165,7 +309,8 @@ export default {
           ];
           this.channelListOption = this.channelListOption.concat(res.data.list);
           console.log(this.channelListOption);
-
+          this.channelfocalOpyion = res.data.list; //焦距通道
+          this.channelarrValue = this.channelfocalOpyion[0].channelid;
           this.selectChannelValue = this.channelListOption[0].channelid; //默认选中所有通道;
           this.$store.commit("channelId", this.selectChannelValue); //通道保存在vuex中
           this.$store.commit("channelIdList", res.data.list); //将通道保存在vuex中
@@ -176,7 +321,7 @@ export default {
           );
           this.selectDyId = res.data.dyId;
           this.selectLineId = res.data.lineId;
-          this.selectTowerId = res.data.towerId;
+          //this.selectTowerId = res.data.towerId;
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -191,6 +336,12 @@ export default {
     //历史图片跳转
     handlehistoryPic() {
       console.log(this.areaData);
+      if (this.areaData.id == "13276") {
+        // "id": 13009,
+        //     "towerid": 3980,
+        this.$set(this.areaData, "id", 13009);
+        this.$set(this.areaData, "towerid", 3980);
+      }
       console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
       // console.log(this.zzCmdid, this.selectChannelValue);
       if (typeof this.dateValue == "number") {
@@ -203,7 +354,7 @@ export default {
         query: {
           dyId: this.selectDyId,
           lineId: this.selectLineId,
-          towerId: this.selectTowerId,
+          towerId: this.areaData.towerid,
           termId: this.areaData.id,
           cmdId: this.areaData.cmdid,
           channelId: this.selectChannelValue,
@@ -216,6 +367,56 @@ export default {
       console.log(this.areaData);
       this.$refs.parameterSetref.display(this.areaData);
     },
+    //焦距放大缩小
+    amplify() {
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          updateTermCamera({
+            termId: this.areaData.id,
+            channelId: this.channelarrValue,
+            type: 6,
+          })
+            .then((res) => {})
+            .catch();
+          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+      console.log(this.channelarrValue, this.areaData.id);
+    },
+    //焦距缩小
+    reduce() {
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          updateTermCamera({
+            termId: this.areaData.id,
+            channelId: this.channelarrValue,
+            type: 7,
+          })
+            .then((res) => {})
+            .catch();
+          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    handleuploadPic() {
+      this.$refs.uploadpicref.display(this.areaData);
+    },
   },
 };
 </script>
@@ -227,6 +428,14 @@ export default {
     color: #169e8c;
     font-size: 14px;
     font-weight: normal;
+    display: flex;
+    justify-content: space-between;
+    span {
+      font-size: 12px;
+    }
+    .el-button--text {
+      color: #f08200;
+    }
   }
   .paramsDate {
     margin-bottom: 16px;
@@ -238,7 +447,7 @@ export default {
       margin-bottom: 8px;
     }
     .el-radio-group {
-      display: flex;
+      // display: flex;
       flex-wrap: wrap;
       .el-radio-button {
         margin-right: 6px;
@@ -269,5 +478,38 @@ export default {
       }
     }
   }
+  .setfocalLength {
+    margin-bottom: 16px;
+    position: relative;
+    h3 {
+      font-size: 14px;
+      font-weight: normal;
+      color: #303133;
+      margin-bottom: 8px;
+    }
+    .selectChannel {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      .labelname {
+        font-size: 14px;
+        margin-right: 4px;
+        width: 80px;
+        color: #666;
+      }
+    }
+    .buttonGroup {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      .el-button {
+        margin-bottom: 8px;
+        width: 104px;
+      }
+      .el-button + .el-button {
+        margin-left: 0px;
+      }
+    }
+  }
 }
 </style>

src/views/realTimeMonitor/components/setAppButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="buttonBox">
+    <el-button type="primary" @click="handleSetChannel">APP设置 </el-button>
+    <setAppDialog ref="setChannelDialog_ref"></setAppDialog>
+  </div>
+</template>
+<script>
+import {} from "@/utils/api/index";
+import setAppDialog from "./setAppDialog.vue";
+export default {
+  components: { setAppDialog },
+  data() {
+    return {};
+  },
+  watch: {},
+  mounted() {},
+  computed: {
+    termId() {
+      return this.$store.state.termId;
+    },
+    channelIdList() {
+      return this.$store.state.channelIdList;
+    },
+  },
+
+  methods: {
+    handleSetChannel() {
+      this.$refs.setChannelDialog_ref.display();
+    },
+  },
+  destroyed() {},
+  beforeRouteLeave(to, from, next) {},
+};
+</script>

src/views/realTimeMonitor/components/setAppDialog.vue

@@ -0,0 +1,619 @@
+<template>
+  <el-dialog
+    class="setAppDialog"
+    title="App设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="880px"
+    @close="handleclose"
+  >
+    <div class="zzinfo">
+      装置编号：{{ areaData.cmdid }}
+      <el-button type="text" icon="el-icon-refresh" @click="searchBtn"
+        >刷新</el-button
+      >
+    </div>
+    <div class="channelsetBox" v-loading="appsetLoading">
+      <el-form ref="form" :model="appForm" label-width="160px">
+        <el-form-item label="装置编号">
+          <el-input v-model="appForm.CMDID"></el-input>
+        </el-form-item>
+        <el-form-item label="装置通道数">
+          <el-input v-model="appForm.channels"></el-input>
+        </el-form-item>
+        <el-form-item label="装置型号 ">
+          <el-input v-model="appForm.model"></el-input>
+        </el-form-item>
+        <el-form-item label="装置名称">
+          <el-input v-model="appForm.equipName"></el-input>
+        </el-form-item>
+        <el-form-item label="生产厂家">
+          <el-input v-model="appForm.bsManufacturer"></el-input>
+        </el-form-item>
+        <el-form-item label="生产日期">
+          <el-date-picker
+            v-model="appForm.productionDate"
+            value-format="timestamp"
+            type="date"
+            placeholder="选择日期"
+            @focus="handleFocus"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="图像质量">
+          <el-input v-model="appForm.imgQuality"></el-input>
+          <!-- <span class="infoSpan">(0-100的整数)</span> -->
+        </el-form-item>
+        <el-form-item label="心跳周期" class="heartClass">
+          <el-input v-model="appForm.heartbeat"></el-input>
+          <span class="infoSpan">(分)</span>
+        </el-form-item>
+
+        <!-- <el-form-item label="参数设置">
+          <el-checkbox
+            label="报文子包起始号"
+            v-model="appForm.usbchecked"
+          ></el-checkbox>
+        </el-form-item> -->
+        <el-form-item label="报文子包起始号">
+          <el-select v-model="appForm.upgradePacketBase" placeholder="请选择">
+            <el-option
+              v-for="item in PacketBaseOptions"
+              :key="item.id"
+              :label="item.value"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="规约">
+          <el-select v-model="appForm.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="网络协议">
+          <el-radio-group
+            v-model="appForm.networkProtocol"
+            @input="changenetwork"
+          >
+            <el-radio
+              v-for="item in netWorkList"
+              :key="item.value"
+              :label="item.value"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="CMA服务器ip">
+          <el-input v-model="appForm.server"></el-input>
+        </el-form-item>
+        <el-form-item label="CMA服务器端口" class="cmaClass">
+          <el-input v-model="appForm.port"></el-input>
+          <span class="infoSpan">(1025-65535)</span>
+        </el-form-item>
+
+        <el-form-item label="图像数据分包大小" class="packetClass">
+          <el-input v-model="appForm.packetSize"></el-input>
+        </el-form-item>
+
+        <el-form-item label="日志保留时间" class="packetClass">
+          <el-input v-model="appForm.timeForKeepingLogs"></el-input>
+          <span class="infoSpan">(天)</span>
+        </el-form-item>
+
+        <el-form-item label="未上传图像的保留时间" class="packetClass">
+          <el-input v-model="appForm.timeForKeepingPhotos"></el-input>
+          <span class="infoSpan">(天)</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleclose" :disabled="appsetLoading"
+        >取 消</el-button
+      >
+      <el-button
+        type="primary"
+        :disabled="appsetLoading"
+        @click="handleConfim"
+        :loading="appLoading"
+        >确 定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getChannelListJoggle,
+  getTermStatus,
+  setTermCamera,
+  getTermCameraRequest,
+} from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      appsetLoading: true,
+      isShow: false,
+      appLoading: false,
+      netWorkList: [
+        {
+          value: 0,
+          label: "tcp",
+        },
+        {
+          value: 1,
+          label: "udp",
+        },
+      ], //通道选项
+      appForm: {
+        channels: 4, //装置通道数,程序默认值为4
+        packetSize: 2048, //图像数据分包大小
+        timeForKeepingLogs: 15, //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
+        timeForKeepingPhotos: 15, //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
+        imgQuality: "", //图像质量
+        heartbeat: 10, //心跳周期
+        upgradePacketBase: 0, //升级报文中，子包起始号 一般可设置的值是 0或者1
+        protocol: "", // 规约（湖南、浙江 ...） 修改后需重启
+        networkProtocol: 1, //  网络协议 0: tcp 1 udp 修改后需重启
+        //network: "", // 使用的网络， 暂时不做配置
+        CMDID: "", // 装置编号  修改后需重启
+        server: "", // CMA 服务器ip  修改后需重启
+        port: "", // CMA服务器端口 1025-65535   修改后需重启
+        model: "", // 装置型号
+        equipName: "", // 装置名称
+        bsManufacturer: "", // 生产厂家
+        productionDate: "", // 生产日期
+      },
+      protocolOptions: [
+        {
+          id: 65280,
+          name: "国网I1",
+        },
+        {
+          id: 65296,
+          name: "陕西",
+        },
+        {
+          id: 65281,
+          name: "安徽",
+        },
+        {
+          id: 65282,
+          name: "江苏",
+        },
+        {
+          id: 65283,
+          name: "湖南",
+        },
+        {
+          id: 65284,
+          name: "浙江",
+        },
+        {
+          id: 65285,
+          name: "河南",
+        },
+        {
+          id: 65286,
+          name: "河南郑州",
+        },
+      ],
+      PacketBaseOptions: [
+        {
+          id: 0,
+          value: 0,
+        },
+        {
+          id: 1,
+          value: 1,
+        },
+      ],
+      requestid: "",
+      searchNum: 0,
+      searchTimer: null,
+      setNum: 0,
+      setTimer: null,
+    };
+  },
+  computed: {
+    areaData() {
+      return this.$store.state.currentData;
+    },
+  },
+  mounted() {
+    // this.appForm.zzbh = this.areaData.cmdid;
+    this.appForm.timeForKeepingPhotos =
+      this.appForm.timeForKeepingPhotos * 86400;
+    this.appForm.timeForKeepingLogs = this.appForm.timeForKeepingLogs * 86400;
+    // this.appForm.aival = this.aiOptions[0].value;
+  },
+  methods: {
+    handleFocus() {
+      if (this.appForm.productionDate == "") {
+        this.appForm.productionDate = new Date();
+      }
+    },
+    changenetwork() {
+      console.log(this.appForm.networkProtocol);
+    },
+    handleConfim() {
+      console.log("点击了确定");
+      console.log(this.appForm);
+
+      this.appLoading = true;
+
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+            {
+              name: "reboot",
+              value: 1,
+            },
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 1,
+            },
+            {
+              name: "path",
+              value: "data/App.json",
+            },
+            {
+              name: "configs",
+              value: 16,
+            },
+            //装置通道数
+            { name: "name1", value: "channels" },
+            { name: "value1", value: this.appForm.channels },
+            { name: "type1", value: 0 },
+            //图像数据分包大小
+            { name: "name2", value: "packetSize" },
+            { name: "value2", value: this.appForm.packetSize },
+            { name: "type2", value: 0 },
+            //日志保留时间，单位秒 程序默认值为15天
+            { name: "name3", value: "timeForKeepingLogs" },
+            { name: "value3", value: this.appForm.timeForKeepingLogs * 86400 },
+            { name: "type3", value: 0 },
+            //未上传图像的保留时间
+            { name: "name4", value: "timeForKeepingPhotos" },
+            {
+              name: "value4",
+              value: this.appForm.timeForKeepingPhotos * 86400,
+            },
+            { name: "type4", value: 0 },
+            //图像质量
+            { name: "name5", value: "imgQuality" },
+            { name: "value5", value: this.appForm.imgQuality },
+            { name: "type5", value: 0 },
+            //规约（湖南、浙江 ...） 修改后需重启
+            { name: "name6", value: "protocol" },
+            { name: "value6", value: this.appForm.protocol },
+            { name: "type6", value: 0 },
+            // 网络协议 0: tcp 1 udp 修改后需重启
+            { name: "name7", value: "networkProtocol" },
+            { name: "value7", value: this.appForm.networkProtocol },
+            { name: "type7", value: 0 },
+            //装置编号  修改后需重启
+            { name: "name8", value: "CMDID" },
+            { name: "value8", value: this.appForm.CMDID },
+            { name: "type8", value: 1 },
+            //CMA 服务器ip  修改后需重启
+            { name: "name9", value: "server" },
+            { name: "value9", value: this.appForm.server },
+            { name: "type9", value: 1 },
+            //CMA服务器端口 1025-65535   修改后需重启
+            { name: "name10", value: "port" },
+            { name: "value10", value: this.appForm.port },
+            { name: "type10", value: 0 },
+            //装置型号
+            { name: "name11", value: "model" },
+            { name: "value11", value: this.appForm.model },
+            { name: "type11", value: 1 },
+            //EquipName 装置名称
+            { name: "name12", value: "equipName" },
+            { name: "value12", value: this.appForm.equipName },
+            { name: "type12", value: 1 },
+            //BsManufacturer 生产厂家
+            { name: "name13", value: "bsManufacturer" },
+            { name: "value13", value: this.appForm.bsManufacturer },
+            { name: "type13", value: 1 },
+            //productionDate 生产日期
+            { name: "name14", value: "productionDate" },
+            { name: "value14", value: this.appForm.productionDate / 1000 },
+            { name: "type14", value: 0 },
+            //心跳周期
+            { name: "name15", value: "heartbeat" },
+            { name: "value15", value: this.appForm.heartbeat },
+            { name: "type15", value: 0 },
+            //子包
+            { name: "name16", value: "upgradePacketBase" },
+            { name: "value16", value: this.appForm.upgradePacketBase },
+            { name: "type16", value: 0 },
+          ];
+          this.setTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+
+          this.getTakechannelStatus();
+          clearInterval(this.setTimer);
+          this.setTimer = window.setInterval(() => {
+            this.getTakechannelStatus();
+            this.setNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getTakechannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.isShow = false;
+            this.appLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "设置成功",
+              type: "success",
+            });
+          } else if (this.setNum > 3) {
+            // this.isShow = false;
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.appLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "设置失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    searchBtn() {
+      this.appsetLoading = true;
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 0,
+            },
+            {
+              name: "path",
+              value: "data/App.json",
+            },
+          ];
+          console.log(params);
+          this.searchTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    searchTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+          this.getsearchchannelStatus();
+          clearInterval(this.searchTimer);
+          this.searchTimer = window.setInterval(() => {
+            this.getsearchchannelStatus();
+            this.searchNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getsearchchannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.appsetLoading = false;
+            console.log(res.data);
+            console.log(JSON.parse(res.data.data));
+            const resultData = JSON.parse(res.data.data);
+            const resultContent = JSON.parse(
+              decodeURIComponent(escape(window.atob(resultData.content)))
+            );
+            console.log(resultContent);
+
+            this.appForm.channels = resultContent.channels; //装置通道数,程序默认值为4
+            this.appForm.packetSize = resultContent.packetSize; //图像数据分包大小
+            this.appForm.timeForKeepingLogs =
+              resultContent.timeForKeepingLogs / 86400; //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
+            this.appForm.timeForKeepingPhotos =
+              resultContent.timeForKeepingPhotos / 86400; //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
+            this.appForm.imgQuality = resultContent.imgQuality; //图像质量
+            this.appForm.heartbeat = resultContent.heartbeat; //心跳周期
+            this.appForm.upgradePacketBase = resultContent.upgradePacketBase; //升级报文中，子包起始号 一般可设置的值是 0或者1
+            this.appForm.protocol = resultContent.protocol; // 规约（湖南、浙江 ...） 修改后需重启
+            this.appForm.networkProtocol = resultContent.networkProtocol; //  网络协议 0: tcp 1 udp 修改后需重启
+            // this.appForm.network = resultContent.network; // 使用的网络， 暂时不做配置
+            this.appForm.CMDID = resultContent.CMDID; // 装置编号  修改后需重启
+            this.appForm.server = resultContent.server; // CMA 服务器ip  修改后需重启
+            this.appForm.port = resultContent.port; // CMA服务器端口 1025-65535   修改后需重启
+            this.appForm.model = resultContent.model; // 装置型号
+            this.appForm.equipName = resultContent.equipName; // 装置名称
+            this.appForm.bsManufacturer = resultContent.bsManufacturer; // 生产厂家
+            this.appForm.productionDate = resultContent.productionDate * 1000; // 生产日期
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "查询成功",
+              type: "success",
+            });
+          } else if (this.searchNum > 3) {
+            // this.isShow = false;
+            // this.channelLoading = false;
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.appsetLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "查询失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    display() {
+      this.isShow = true;
+      this.appForm.CMDID = this.areaData.cmdid;
+      this.searchBtn();
+      console.log(this.areaData);
+    },
+    handleclose() {
+      this.isShow = false;
+      this.bgflag = false;
+      this.appLoading = false;
+      this.appForm.channels = 4; //装置通道数,程序默认值为4
+      this.appForm.packetSize = 2048; //图像数据分包大小
+      this.appForm.timeForKeepingLogs = 15; //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
+      this.appForm.timeForKeepingPhotos = 15; //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
+      this.appForm.imgQuality = ""; //图像质量
+      this.appForm.heartbeat = 10; //心跳周期
+      this.appForm.upgradePacketBase = 0; //升级报文中，子包起始号 一般可设置的值是 0或者1
+      this.appForm.protocol = this.areaData.protocol; // 规约（湖南、浙江 ...） 修改后需重启
+      this.appForm.networkProtocol = 0; //  网络协议 0: tcp 1 udp 修改后需重启
+      // this.appForm.network = resultContent.network; // 使用的网络， 暂时不做配置
+      this.appForm.CMDID = this.areaData.cmdid; // 装置编号  修改后需重启
+      this.appForm.server = ""; // CMA 服务器ip  修改后需重启
+      this.appForm.port = ""; // CMA服务器端口 1025-65535   修改后需重启
+      this.appForm.model = ""; // 装置型号
+      this.appForm.equipName = ""; // 装置名称
+      this.appForm.bsManufacturer = ""; // 生产厂家
+      this.appForm.productionDate = ""; // 生产日期
+      window.clearInterval(this.searchTimer);
+      this.searchTimer = null;
+      this.searchNum = 0;
+    },
+  },
+};
+</script>
+<style lang="less">
+.setAppDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 120px;
+  }
+  .el-form {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .el-dialog__body {
+    padding-bottom: 0px;
+    .el-form-item--small.el-form-item {
+      margin-bottom: 12px;
+    }
+    .channelsetBox {
+      width: 100%;
+      .el-input {
+        width: 250px;
+      }
+    }
+    .infoSpan {
+      margin-left: 8px;
+    }
+    .heartClass {
+      .el-input {
+        width: 190px;
+      }
+    }
+    .cmaClass {
+      .el-input {
+        width: 180px;
+      }
+    }
+    .packetClass {
+      .el-input {
+        width: 200px;
+      }
+    }
+  }
+  .dialog-footer {
+    .el-button--default,
+    .el-button--primary {
+      width: 80px !important;
+      margin-bottom: 0px !important;
+    }
+    .el-button + .el-button {
+      margin-left: 10px !important;
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/setChannelButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="buttonBox">
+    <el-button type="primary" @click="handleSetChannel">通道设置 </el-button>
+    <setChannelDialog ref="setChannelDialog_ref"></setChannelDialog>
+  </div>
+</template>
+<script>
+import {} from "@/utils/api/index";
+import setChannelDialog from "./setChannelDialog.vue";
+export default {
+  components: { setChannelDialog },
+  data() {
+    return {};
+  },
+  watch: {},
+  mounted() {},
+  computed: {
+    termId() {
+      return this.$store.state.termId;
+    },
+    channelIdList() {
+      return this.$store.state.channelIdList;
+    },
+  },
+
+  methods: {
+    handleSetChannel() {
+      this.$refs.setChannelDialog_ref.display();
+    },
+  },
+  destroyed() {},
+  beforeRouteLeave(to, from, next) {},
+};
+</script>

src/views/realTimeMonitor/components/setChannelDialog.vue

@@ -0,0 +1,876 @@
+<template>
+  <el-dialog
+    class="setChannelDialog"
+    title="通道设置"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="640px"
+    @close="handleclose"
+  >
+    <div class="zzinfo">
+      装置编号：{{ areaData.cmdid
+      }}<el-button type="text" icon="el-icon-refresh" @click="searchBtn"
+        >刷新</el-button
+      >
+    </div>
+    <div class="channelsetBox" v-loading="channelsetLoading">
+      <el-form ref="form" :model="channelForm" label-width="100px">
+        <!-- <el-form-item label="装置编号">
+          <el-input v-model="channelForm.zzbh" disabled></el-input>
+        </el-form-item> -->
+        <el-form-item label="拍照通道">
+          <el-radio-group
+            v-model="channelForm.selectChannel"
+            @input="changeChannel"
+          >
+            <el-radio
+              v-for="item in channelList"
+              :key="item.channelid"
+              :label="item.channelid"
+              :value="item.channelid"
+            >
+              {{
+                item.alias !== null && item.alias !== ""
+                  ? item.alias
+                  : item.channelname
+              }}</el-radio
+            >
+            <!-- <el-radio :label="6">备选项</el-radio>
+            <el-radio :label="9">备选项</el-radio> -->
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="照片大小" class="photoSize">
+          <el-input v-model="channelForm.resolutionCX"></el-input>
+          <el-input v-model="channelForm.resolutionCY"></el-input>
+        </el-form-item>
+        <div class="videoDiv">
+          <el-form-item label="视频分辨率" class="videoclass">
+            <el-select
+              v-model="channelForm.videoSize"
+              placeholder="请选择"
+              @change="changevideoChannel"
+            >
+              <el-option
+                v-for="item in videoOptionSize"
+                :key="item.value"
+                :label="item.name + '(' + item.label + ')'"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="视频时长">
+            <el-input v-model="channelForm.videoDuration"></el-input>
+            <span class="infoSpan">(秒)</span>
+          </el-form-item>
+        </div>
+        <el-form-item label="压缩率">
+          <el-input v-model="channelForm.ysl"></el-input>
+          <span class="infoSpan">(0-100的整数)</span>
+        </el-form-item>
+        <el-form-item label="参数设置">
+          <el-checkbox
+            label="USB接口"
+            v-model="channelForm.usbchecked"
+          ></el-checkbox>
+          <el-checkbox
+            label="自动对焦"
+            v-model="channelForm.zzdjchecked"
+          ></el-checkbox>
+          <el-checkbox
+            label="自动曝光"
+            v-model="channelForm.zdbgchecked"
+            @change="bgchange"
+          ></el-checkbox>
+        </el-form-item>
+        <div class="isoDiv">
+          <el-form-item label="曝光时间">
+            <el-input v-model="channelForm.bgsj" :disabled="bgflag"></el-input>
+            <span class="infoSpan">(毫秒)</span>
+          </el-form-item>
+          <el-form-item label="ISO">
+            <el-input v-model="channelForm.iso" :disabled="bgflag"></el-input>
+          </el-form-item>
+        </div>
+        <el-form-item label="模式选择">
+          <el-checkbox
+            label="HDR模式"
+            v-model="channelForm.hdrchecked"
+          ></el-checkbox>
+          <el-checkbox
+            label="夜晚模式"
+            v-model="channelForm.ywchecked"
+          ></el-checkbox>
+        </el-form-item>
+        <el-form-item label="旋转角度">
+          <el-select v-model="channelForm.roteval" placeholder="请选择">
+            <el-option
+              v-for="item in roteOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="AI识别">
+          <el-select v-model="channelForm.aival" placeholder="请选择">
+            <el-option
+              v-for="item in aiOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="左上OSD">
+          <el-input v-model="channelForm.ltosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+        <el-form-item label="右上OSD">
+          <el-input v-model="channelForm.rtosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+        <el-form-item label="左下OSD">
+          <el-input v-model="channelForm.lbosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+        <el-form-item label="右下OSD">
+          <el-input v-model="channelForm.rbosd"></el-input>
+          <span class="infoSpan">(多行使用\n换行)</span>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleclose" :disabled="channelsetLoading"
+        >取 消</el-button
+      >
+      <el-button
+        type="primary"
+        :disabled="channelsetLoading"
+        @click="handleConfim"
+        :loading="channelLoading"
+        >确 定</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getChannelListJoggle,
+  getTermStatus,
+  setTermCamera,
+  getTermCameraRequest,
+} from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      channelsetLoading: true,
+      isShow: false,
+      channelLoading: false,
+      channelList: [], //通道选项
+      channelForm: {
+        zzbh: "",
+        selectChannel: "",
+        resolutionCX: "",
+        resolutionCY: "",
+        videoSize: "",
+        videoCX: "",
+        videoCY: "",
+        videoDuration: 15,
+        ysl: 80,
+        usbchecked: "",
+        zzdjchecked: "",
+        zdbgchecked: "",
+        bgsj: "",
+        iso: "",
+        hdrchecked: "",
+        ywchecked: "",
+        roteval: "",
+        aival: "",
+        ltosd: "",
+        rtosd: "",
+        lbosd: "",
+        rbosd: "",
+      },
+      bgflag: false,
+      roteOptions: [
+        {
+          value: 0,
+          label: "无旋转",
+        },
+        {
+          value: 1,
+          label: "0°",
+        },
+        {
+          value: 2,
+          label: "90°",
+        },
+        {
+          value: 3,
+          label: "180°",
+        },
+        {
+          value: 4,
+          label: "270°",
+        },
+      ],
+      aiOptions: [
+        {
+          value: 0,
+          label: "0-关闭当前通道AI识别",
+        },
+        {
+          value: 1,
+          label: "1-启用但不绘制区域",
+        },
+        {
+          value: 2,
+          label: "2-启用并绘制区域",
+        },
+      ],
+      pictureSize: [
+        {
+          value: 0,
+          label: "5376X3024",
+        },
+        {
+          value: 1,
+          label: "1920X1080",
+        },
+        {
+          value: 2,
+          label: "2048X1536",
+        },
+      ],
+      videoOptionSize: [
+        {
+          value: 0,
+          name: "默认",
+          label: "720X480",
+        },
+        {
+          value: 1,
+          name: "QVGA",
+          label: "320X240",
+        },
+        {
+          value: 2,
+          name: "VGA",
+          label: "640X480",
+        },
+        {
+          value: 3,
+          name: "720p",
+          label: "1280X720",
+        },
+        {
+          value: 4,
+          name: "1080p",
+          label: "1920X1080",
+        },
+      ],
+      requestid: "",
+      searchNum: 0,
+      searchTimer: null,
+      setNum: 0,
+      setTimer: null,
+    };
+  },
+  computed: {
+    areaData() {
+      return this.$store.state.currentData;
+    },
+  },
+  mounted() {
+    this.channelForm.zzbh = this.areaData.cmdid;
+    this.channelForm.roteval = this.roteOptions[0].value;
+    this.channelForm.videoSize = this.videoOptionSize[0].value;
+    this.channelForm.aival = this.aiOptions[0].value;
+  },
+  methods: {
+    //获取通道
+    getChannelSelect() {
+      getChannelListJoggle({ termid: this.areaData.id })
+        .then((res) => {
+          this.channelList = res.data.list;
+          this.channelForm.selectChannel = this.channelList[0].channelid;
+          console.log(this.channelList);
+          this.changeChannel();
+        })
+        .catch((err) => {});
+    },
+    //是否选中曝光
+    bgchange(val) {
+      console.log(val, "是否选中");
+      if (val) {
+        this.bgflag = true;
+        this.channelForm.bgsj = "";
+        this.channelForm.iso = "";
+      } else {
+        this.bgflag = false;
+      }
+    },
+    changevideoChannel() {
+      console.log(this.channelForm.videoSize);
+      if (this.channelForm.videoSize == 0) {
+        // this.channelForm.picSize = this.pictureSize[0].value;
+        this.channelForm.videoCX = 720;
+        this.channelForm.videoCY = 480;
+      } else if (this.channelForm.videoSize == 1) {
+        //this.channelForm.picSize = this.pictureSize[1].value;
+        this.channelForm.videoCX = 320;
+        this.channelForm.videoCY = 240;
+      } else if (this.channelForm.videoSize == 2) {
+        this.channelForm.videoCX = 640;
+        this.channelForm.videoCY = 480;
+      } else if (this.channelForm.videoSize == 3) {
+        this.channelForm.videoCX = 1280;
+        this.channelForm.videoCY = 720;
+      } else if (this.channelForm.videoSize == 4) {
+        //this.channelForm.picSize = this.pictureSize[2].value;
+        this.channelForm.videoCX = 1920;
+        this.channelForm.videoCY = 1080;
+      }
+    },
+    //修改通道
+    changeChannel() {
+      console.log(this.channelForm.selectChannel);
+      if (this.channelForm.selectChannel == 1) {
+        // this.channelForm.picSize = this.pictureSize[0].value;
+        this.channelForm.resolutionCX = 5376;
+        this.channelForm.resolutionCY = 3024;
+      } else if (
+        this.channelForm.selectChannel == 2 ||
+        this.channelForm.selectChannel == 3
+      ) {
+        //this.channelForm.picSize = this.pictureSize[1].value;
+        this.channelForm.resolutionCX = 1920;
+        this.channelForm.resolutionCY = 1080;
+      } else if (this.channelForm.selectChannel == 4) {
+        //this.channelForm.picSize = this.pictureSize[2].value;
+        this.channelForm.resolutionCX = 2048;
+        this.channelForm.resolutionCY = 1536;
+      }
+      this.searchBtn();
+    },
+    handleConfim() {
+      console.log("点击了确定");
+      console.log(this.channelForm);
+      this.channelLoading = true;
+
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+            {
+              name: "reboot",
+              value: 0,
+            },
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 1,
+            },
+            {
+              name: "path",
+              value:
+                "data/channels/" + this.channelForm.selectChannel + ".json",
+            },
+            {
+              name: "configs",
+              value: 19,
+            },
+            // {
+            //   name: "resolutionCX",
+            //   type: 0,
+            //   value: this.channelForm.resolutionCX,
+            // },
+            { name: "name1", value: "resolutionCX" },
+            { name: "value1", value: this.channelForm.resolutionCX },
+            { name: "type1", value: 0 },
+            // {
+            //   name: "resolutionCY",
+            //   type: 0,
+            //   value: this.channelForm.resolutionCY,
+            // },
+            { name: "name2", value: "resolutionCY" },
+            { name: "value2", value: this.channelForm.resolutionCY },
+            { name: "type2", value: 0 },
+            // {
+            //   name: "quality",
+            //   type: 0,
+            //   value: this.channelForm.ysl,
+            // },
+            { name: "name3", value: "quality" },
+            { name: "value3", value: this.channelForm.ysl },
+            { name: "type3", value: 0 },
+            // {
+            //   name: "usbCamera",
+            //   type: 0,
+            //   value: this.channelForm.usbchecked ? 1 : 0,
+            // },
+            { name: "name4", value: "usbCamera" },
+            { name: "value4", value: this.channelForm.usbchecked ? 1 : 0 },
+            { name: "type4", value: 0 },
+            // {
+            //   name: "autoFocus",
+            //   type: 0,
+            //   value: this.channelForm.zzdjchecked ? 1 : 0,
+            // },
+            { name: "name5", value: "autoFocus" },
+            { name: "value5", value: this.channelForm.zzdjchecked ? 1 : 0 },
+            { name: "type5", value: 0 },
+            // {
+            //   name: "autoExposure",
+            //   type: 0,
+            //   value: this.channelForm.zdbgchecked ? 1 : 0,
+            // },
+            { name: "name6", value: "autoExposure" },
+            { name: "value6", value: this.channelForm.zdbgchecked ? 1 : 0 },
+            { name: "type6", value: 0 },
+            // {
+            //   name: "exposureTime",
+            //   type: 0,
+            //   value: this.channelForm.bgsj,
+            // },
+            { name: "name7", value: "exposureTime" },
+            { name: "value7", value: this.channelForm.bgsj },
+            { name: "type7", value: 0 },
+            // {
+            //   name: "sensibility",
+            //   type: 0,
+            //   value: this.channelForm.iso,
+            // },
+            { name: "name8", value: "sensibility" },
+            { name: "value8", value: this.channelForm.iso },
+            { name: "type8", value: 0 },
+            // {
+            //   name: "hdrMode",
+            //   type: 0,
+            //   value: this.channelForm.hdrchecked ? 1 : 0,
+            // },
+            { name: "name9", value: "hdrMode" },
+            { name: "value9", value: this.channelForm.hdrchecked ? 1 : 0 },
+            { name: "type9", value: 0 },
+            // {
+            //   name: "nightMode",
+            //   type: 0,
+            //   value: this.channelForm.ywchecked ? 1 : 0,
+            // },
+            { name: "name10", value: "nightMode" },
+            { name: "value10", value: this.channelForm.ywchecked ? 1 : 0 },
+            { name: "type10", value: 0 },
+            // {
+            //   name: "orientation",
+            //   type: 0,
+            //   value: this.channelForm.roteval,
+            // },
+            { name: "name11", value: "orientation" },
+            { name: "value11", value: this.channelForm.roteval },
+            { name: "type11", value: 0 },
+            // {
+            //   name: "recognization",
+            //   type: 0,
+            //   value: this.channelForm.aival,
+            // },
+            { name: "name12", value: "recognization" },
+            { name: "value12", value: this.channelForm.aival },
+            { name: "type12", value: 0 },
+            // {
+            //   name: "osd.leftTop",
+            //   type: 1,
+            //   value: this.channelForm.ltosd,
+            // },
+            { name: "name13", value: "osd.leftTop" },
+            { name: "value13", value: this.channelForm.ltosd },
+            { name: "type13", value: 1 },
+            // {
+            //   name: "osd.rightTop",
+            //   type: 1,
+            //   value: this.channelForm.rtosd,
+            // },
+            { name: "name14", value: "osd.rightTop" },
+            { name: "value14", value: this.channelForm.rtosd },
+            { name: "type14", value: 1 },
+            // {
+            //   name: "osd.rightBottom",
+            //   type: 1,
+            //   value: this.channelForm.lbosd,
+            // },
+            { name: "name15", value: "osd.leftBottom" },
+            { name: "value15", value: this.channelForm.lbosd },
+            { name: "type15", value: 1 },
+            // {
+            //   name: "osd.leftBottom",
+            //   type: 1,
+            //   value: this.channelForm.rbosd,
+            // },
+            { name: "name16", value: "osd.rightBottom" },
+            { name: "value16", value: this.channelForm.rbosd },
+            { name: "type16", value: 1 },
+            //视频分辨率
+
+            { name: "name17", value: "videoCX" },
+            { name: "value17", value: this.channelForm.videoCX },
+            { name: "type17", value: 0 },
+
+            { name: "name18", value: "videoCY" },
+            { name: "value18", value: this.channelForm.videoCY },
+            { name: "type18", value: 0 },
+            //视频时长
+            { name: "name19", value: "videoDuration" },
+            { name: "value19", value: this.channelForm.videoDuration },
+            { name: "type19", value: 0 },
+          ];
+          console.log(params);
+          this.setTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+
+          this.getTakechannelStatus();
+          clearInterval(this.setTimer);
+          this.setTimer = window.setInterval(() => {
+            this.getTakechannelStatus();
+            this.setNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getTakechannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.isShow = false;
+            this.channelLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道设置成功",
+              type: "success",
+            });
+          } else if (this.setNum > 3) {
+            // this.isShow = false;
+            window.clearInterval(this.setTimer);
+            this.setTimer = null;
+            this.setNum = 0;
+            this.channelLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道设置失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    searchBtn() {
+      this.channelsetLoading = true;
+      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
+      getTermStatus({ termId: this.areaData.id }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cfg",
+            },
+            {
+              name: "udp",
+              value: 1,
+            },
+
+            {
+              name: "pathType",
+              value: 1,
+            },
+            {
+              name: "updateType",
+              value: 0,
+            },
+            {
+              name: "path",
+              value:
+                "data/channels/" + this.channelForm.selectChannel + ".json",
+            },
+          ];
+          console.log(params);
+          this.searchTermFn(params);
+        } else {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    searchTermFn(val) {
+      setTermCamera({
+        termId: this.areaData.id,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.requestId;
+          this.getsearchchannelStatus();
+          clearInterval(this.searchTimer);
+          this.searchTimer = window.setInterval(() => {
+            this.getsearchchannelStatus();
+            this.searchNum++;
+          }, 1000);
+        })
+        .catch((err) => {});
+    },
+    getsearchchannelStatus() {
+      getTermCameraRequest({ requestid: this.requestid })
+        .then((res) => {
+          console.log(res);
+          if (res.data.success == 1) {
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.channelsetLoading = false;
+            // this.isShow = false;
+            // this.channelLoading = false;
+            console.log(res.data);
+            console.log(JSON.parse(res.data.data));
+            const resultData = JSON.parse(res.data.data);
+            const resultContent = JSON.parse(
+              decodeURIComponent(escape(window.atob(resultData.content)))
+            );
+            console.log(resultContent);
+
+            this.channelForm.ysl = resultContent.quality;
+            this.channelForm.usbchecked =
+              resultContent.usbCamera == 1 ? true : false;
+            this.channelForm.zzdjchecked =
+              resultContent.autoFocus == 1 ? true : false;
+            this.channelForm.zdbgchecked =
+              resultContent.autoExposure == 1 ? true : false;
+            this.channelForm.bgsj =
+              resultContent.exposureTime == 0 ? "" : resultContent.exposureTime;
+            this.channelForm.iso =
+              resultContent.sensibility == 0 ? "" : resultContent.sensibility;
+            this.channelForm.hdrchecked =
+              resultContent.hdrMode == 1 ? true : false;
+            this.channelForm.ywchecked =
+              resultContent.nightMode == 1 ? true : false;
+            this.channelForm.aival = resultContent.recognization;
+            this.channelForm.roteval = resultContent.orientation;
+            this.channelForm.rtosd = resultContent.osd.rightTop;
+            this.channelForm.ltosd = resultContent.osd.leftTop;
+            this.channelForm.lbosd = resultContent.osd.leftBottom;
+            this.channelForm.rbosd = resultContent.osd.rightBottom;
+            // this.channelForm.videoSize = resultContent.;
+            this.channelForm.videoCX = resultContent.videoCX;
+            this.channelForm.videoCY = resultContent.videoCY;
+            if (this.channelForm.zdbgchecked) {
+              this.bgflag = true;
+              this.channelForm.bgsj = "";
+              this.channelForm.iso = "";
+            } else {
+              this.bgflag = false;
+            }
+            if (
+              this.channelForm.videoCX == 720 &&
+              this.channelForm.videoCY == 480
+            ) {
+              // this.channelForm.picSize = this.pictureSize[0].value;
+              this.channelForm.videoSize = 0;
+            } else if (
+              this.channelForm.videoCX == 320 &&
+              this.channelForm.videoCY == 240
+            ) {
+              //this.channelForm.picSize = this.pictureSize[1].value;
+              this.channelForm.videoSize = 1;
+            } else if (
+              this.channelForm.videoCX == 640 &&
+              this.channelForm.videoCY == 480
+            ) {
+              this.channelForm.videoSize = 2;
+            } else if (
+              this.channelForm.videoCX == 1280 &&
+              this.channelForm.videoCY == 720
+            ) {
+              this.channelForm.videoSize = 3;
+            } else if (
+              this.channelForm.videoCX == 1920 &&
+              this.channelForm.videoCY == 1080
+            ) {
+              //this.channelForm.picSize = this.pictureSize[2].value;
+
+              this.channelForm.videoSize = 4;
+            }
+            this.channelForm.videoDuration = resultContent.videoDuration;
+
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道查询成功",
+              type: "success",
+            });
+          } else if (this.searchNum > 3) {
+            // this.isShow = false;
+            // this.channelLoading = false;
+            window.clearInterval(this.searchTimer);
+            this.searchTimer = null;
+            this.searchNum = 0;
+            this.channelsetLoading = false;
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "通道查询失败",
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {});
+    },
+    display() {
+      this.isShow = true;
+      this.channelForm.zzbh = this.areaData.cmdid;
+      this.getChannelSelect();
+      this.changevideoChannel();
+      console.log(this.areaData);
+    },
+    handleclose() {
+      this.isShow = false;
+      this.bgflag = false;
+      this.channelLoading = false;
+      this.channelForm.zzbh = "";
+      this.channelForm.ysl = 80;
+      this.channelForm.usbchecked = "";
+      this.channelForm.zzdjchecked = "";
+      this.channelForm.zdbgchecked = "";
+      this.channelForm.bgsj = "";
+      this.channelForm.iso = "";
+      this.channelForm.hdrchecked = "";
+      this.channelForm.ywchecked = "";
+      this.channelForm.rtosd = "";
+      this.channelForm.ltosd = "";
+      this.channelForm.lbosd = "";
+      this.channelForm.rbosd = "";
+      this.channelForm.videoSize = "";
+      this.channelForm.videoCX = "";
+      this.channelForm.videoCY = "";
+      this.channelForm.videoDuration = 15;
+      window.clearInterval(this.searchTimer);
+      this.searchTimer = null;
+      this.searchNum = 0;
+    },
+  },
+};
+</script>
+<style lang="less">
+.setChannelDialog {
+  .zzinfo {
+    position: absolute;
+    top: 22px;
+    left: 120px;
+  }
+
+  .el-dialog__body {
+    padding-bottom: 0px;
+    .el-form-item--small.el-form-item {
+      margin-bottom: 12px;
+    }
+    .channelsetBox {
+      width: 100%;
+      // height: 400px;
+      //background: #fcc;
+      .el-input {
+        width: 300px;
+      }
+    }
+    .infoSpan {
+      margin-left: 8px;
+    }
+    .photoSize {
+      .el-form-item__content {
+        display: flex;
+        //justify-content: space-between;
+        .el-input {
+          width: 90px;
+          margin-right: 12px;
+        }
+      }
+    }
+    .videoDiv {
+      display: flex;
+      .el-select {
+        .el-input {
+          width: 160px;
+        }
+      }
+      .el-input {
+        width: 100px;
+      }
+    }
+    .isoDiv {
+      display: flex;
+
+      .el-input {
+        width: 140px;
+      }
+    }
+    .videoclass {
+      // .el-form-item__content {
+      //   display: flex;
+      //   //justify-content: space-between;
+      //   .el-select {
+      //     width: 164px;
+      //     margin-right: 12px;
+      //   }
+      // }
+    }
+  }
+  .dialog-footer {
+    .el-button--default,
+    .el-button--primary {
+      width: 80px !important;
+      margin-bottom: 0px !important;
+    }
+    .el-button + .el-button {
+      margin-left: 10px !important;
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/setschedule.vue

@@ -38,7 +38,12 @@
           </div>
           <div class="timeContain">
             <div class="timeLeft" v-loading="baseTimeLoading">
-              <h3>时间表({{ baseTimeList.length }})</h3>
+              <h3>
+                时间表({{ baseTimeList.length }})
+                <span v-if="baseTimeList.length !== 0 && offsetNumTime !== null"
+                  >偏移量（{{ offsetNumTime }}分钟）</span
+                >
+              </h3>
               <div class="tagsBox" v-if="baseTimeList.length !== 0">
                 <el-tag v-for="(item, index) in baseTimeList" :key="index"
                   >{{ $moment(item).format("HH:mm") }}
@@ -51,9 +56,10 @@
             <div class="timeRight" v-loading="deviceTimeLoading">
               <h3>
                 装置时间表({{ deviceTimeList.length }})
-                <span
-                  v-if="deviceTimeList.length !== 0 && offsetNumTime !== null"
-                  >偏移量（{{ offsetNumTime }}分钟）</span
+                <span v-if="deviceTimeList.length !== 0"
+                  ><el-button type="text" size="mini" @click="deviceTimeClick"
+                    ><i class="el-icon-refresh"></i>刷新装置时间表</el-button
+                  ></span
                 >
               </h3>
               <div class="tagsBox" v-if="deviceTimeList.length !== 0">
@@ -211,6 +217,7 @@
                 </el-radio-group>
               </div>
             </div>
+            <p class="fail" v-show="failedFlag">时间表下发失败,请重新下发！</p>
           </div>
           <div slot="footer" class="dialog-footer">
             <el-button @click="closebtn">取 消</el-button>
@@ -232,6 +239,7 @@ import {
   setTermCamera,
   getTermCameraRequest,
   getTermStatus,
+  setScheduleRulel,
 } from "@/utils/api/index";
 export default {
   props: {
@@ -265,6 +273,7 @@ export default {
       sureloading: false, //点击确定loading
 
       offsetNumTime: null,
+      failedFlag: false,
     };
   },
   computed: {
@@ -276,6 +285,11 @@ export default {
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
+      if (tab.name == 1) {
+        this.selectChannel = 1;
+        this.getDataBaseTime(this.areaData.id, this.selectChannel);
+      }
+
       //下发的时候执行获取列表
       if (tab.name == 2) {
         this.deviceTimeList = [];
@@ -624,6 +638,8 @@ export default {
     //xympadmn --act=schedule [0xCA] --flag=[Request Set Flag, default is set=1, 0: request] --channel=[Channel No] --group=[Group] --hour1=[Hour 1] --min1=[Minute 1] --preset1=[Preset 1]
     submitForm() {
       console.log(this.currentTimeRule);
+      this.failedFlag = false;
+      let timeArrList = [];
       if (
         this.areaData.protocol == "65285" &&
         this.currentTimeRule.listTime.length > 1
@@ -721,7 +737,24 @@ export default {
             );
           }
           console.log(params);
-          this.setTermFnRule(params);
+          for (var k = 0; k < timeArr.length; k++) {
+            //console.log(moment(dayArr[k]).hour());
+            timeArrList.push({
+              hour: this.$moment(timeArr[k]).hour(),
+              minute: this.$moment(timeArr[k]).minute(),
+              preset: 255,
+            });
+          }
+          console.log(timeArrList);
+          var parmsobj = {
+            termid: this.areaData.id,
+            channelid: this.timeChannel,
+            offset: this.setNum,
+            list: timeArrList,
+          };
+          console.log(parmsobj);
+          this.setTimeRuleJava(parmsobj); //使用java接口调用下发时间表
+          //this.setTermFnRule(params);
         } else {
           this.sureloading = false;
           this.$message({
@@ -733,6 +766,33 @@ export default {
         }
       });
     },
+    //使用接口下发时间表会写进数据库
+    setTimeRuleJava(parmsobj) {
+      console.log(parmsobj);
+      setScheduleRulel({
+        scheduleid: this.currentTimeRule.id,
+        list: [parmsobj],
+      })
+        .then((res) => {
+          console.log(res);
+          this.requestid = res.data.list[0].requestid;
+          console.log(this.requestid);
+          clearInterval(this.timer);
+          this.deviceTimer = window.setInterval(() => {
+            this.getinfoRules();
+            this.deviceNum++;
+            console.log(this.deviceNum, this.deviceNum * 1000);
+          }, 1000 * this.deviceNum);
+        })
+        .catch((err) => {
+          // this.$message({
+          //   duration: 1500,
+          //   showClose: true,
+          //   message: "添加失败",
+          //   type: "error",
+          // });
+        });
+    },
     //下发时间表
     setTermFnRule(dataParams) {
       setTermCamera({
@@ -772,6 +832,7 @@ export default {
             window.clearInterval(this.deviceTimer);
             this.deviceTimer = null;
             this.deviceNum = 1;
+            this.failedFlag = true;
             this.$message({
               duration: 1500,
               showClose: true,
@@ -804,6 +865,7 @@ export default {
       window.clearInterval(this.deviceTimer);
       this.deviceTimer = null;
       this.deviceNum = 1;
+      this.failedFlag = false;
     },
     //点击分页
     handleCurrentChange(val) {
@@ -847,6 +909,18 @@ export default {
             border-radius: 4px;
             border: 1px solid #eee;
             padding: 12px;
+            h3 {
+              .el-button {
+                margin-left: 14px;
+              }
+            }
+          }
+          .timeLeft,
+          .timeRight {
+            h3 {
+              line-height: 24px;
+              height: 24px;
+            }
           }
           .tagsBox {
             height: 308px;
@@ -907,6 +981,11 @@ export default {
         }
       }
     }
+    .fail {
+      color: red;
+      line-height: 28px;
+      font-size: 12px;
+    }
   }
 }
 </style>

src/views/realTimeMonitor/components/siderBar.vue

@@ -36,48 +36,98 @@
       :data="lineTreeData"
       :props="defaultProps"
       node-key="id"
-      default-expand-all
+      :default-expanded-keys="defaultExpandIds"
       highlight-current
       :expand-on-click-node="false"
       :filter-node-method="filterNode"
       :current-node-key="currentNodekey"
       @node-click="handleNodeClick"
+      @node-expand="handleNodeExpand"
+      @node-collapse="handleNodeCollapse"
     >
       <span class="custom-tree-node" slot-scope="{ node, data }">
-        <span v-if="node.level === 1">
-          <span class="iconfont icon-dianli" style="margin-right: 6px"></span>
-          <span>{{ node.label }} </span>
-        </span>
-        <span v-else-if="node.level === 2">
-          <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
+        <!-- v-if="node.name === '收藏夹'" -->
+        <span>
+          <span>
+            <span
+              v-if="node.label === '收藏夹'"
+              class="el-icon-collection"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              v-if="node.level === 1 && node.label !== '收藏夹'"
+              class="iconfont icon-dianli"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              v-if="node.level === 2 && data.bsManufacturer"
+              class="iconfont icon-dianlihangye"
+              style="margin-right: 6px"
+            >
+            </span>
+            <span
+              v-if="
+                node.label !== '收藏夹' && !data.bsManufacturer && !data.dyValue
+              "
+            >
+              <span
+                class="iconfont icon-shexiangtoulixian"
+                v-if="data.onlinestatus == 0"
+                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                style="margin-right: 6px"
+              ></span>
+              <span
+                class="iconfont icon-shexiangtou-lixian"
+                v-else
+                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+                style="margin-right: 6px"
+              ></span>
+            </span>
+            <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+              >{{ node.label }}
+            </span>
           </span>
-          <span>{{ node.label }} </span>
-        </span>
-        <span v-else>
-          <span
-            class="iconfont icon-shexiangtoulixian"
-            v-if="data.onlinestatus == 0"
-            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-            style="margin-right: 6px"
-          ></span>
-          <span
-            class="iconfont icon-shexiangtou-lixian"
-            v-else
-            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-            style="margin-right: 6px"
-          ></span>
-          <span
-            :id="data.id"
-            :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-            >{{ node.label }}</span
-          >
         </span>
+        <!-- <span v-else>
+          <span v-if="node.level === 1">
+            <span class="iconfont icon-dianli" style="margin-right: 6px"></span>
+            <span>{{ node.label }} </span>
+          </span>
+          <span v-else-if="node.level === 2">
+            <span class="iconfont icon-dianlihangye" style="margin-right: 6px">
+            </span>
+            <span
+              >{{ node.label }}
+              <span class="num">({{ data.list.length }}) </span></span
+            >
+          </span>
+          <span v-else>
+            <span
+              class="iconfont icon-shexiangtoulixian"
+              v-if="data.onlinestatus == 0"
+              :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              class="iconfont icon-shexiangtou-lixian"
+              v-else
+              :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+              style="margin-right: 6px"
+            ></span>
+            <span
+              :id="data.id"
+              :class="data.onlinestatus == 0 ? 'disconnect' : ''"
+              >{{ node.label }}</span
+            >
+          </span>
+        </span> -->
       </span>
     </el-tree>
   </div>
 </template>
 <script>
-import { getdyTreeListJoggle } from "@/utils/api/index";
+import EventBus from "@/utils/event-bus";
+import { getdyTreeListJoggle, getzzdyTreeList } from "@/utils/api/index";
 export default {
   data() {
     return {
@@ -86,6 +136,8 @@ export default {
       totalNum: "", //装置总数
       zzradio: -1, //装置是否在线选择
       lineTreeData: [],
+      defaultExpandIds: [], //默认展开
+
       defaultProps: {
         //指定参数格式回显数据
         children: "list",
@@ -93,14 +145,20 @@ export default {
       },
       currentData: {}, //当前选中的数据
       currentNodekey: "", //默认选中的节点树,
+      role: "",
+      treeStatustimer: null,
+      isfavorList: [],
     };
   },
   components: {},
   watch: {
-    filterText(val) {
-      console.log(val);
-      this.$refs.tree.filter(val);
-      console.log(this.$refs.tree);
+    // filterText(val) {
+    //   console.log(val);
+    //   this.$refs.tree.filter(val);
+    //   console.log(this.$refs.tree);
+    // },
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
     },
   },
   mounted() {},
@@ -109,8 +167,13 @@ export default {
       JSON.parse(localStorage.getItem("radio")) !== null
         ? JSON.parse(localStorage.getItem("radio"))
         : -1; //获取保存的radio
+    this.role = localStorage.getItem("role");
+    console.log("用户管理");
+    console.log(this.role);
     this.getRadio(); //获取列表在线离线全部
     this.getLineTreeList(); //获取树状图
+    this.treeStatustimer = setInterval(this.getLineTreeStatus, 60000); // 每60秒刷新数据
+    EventBus.$on("treelist", this.getLineTreeStatus);
   },
   methods: {
     //获取当前选中的radio
@@ -123,89 +186,241 @@ export default {
     //刷新tree列表
     getLineTreeStatus() {
       console.log("点击了刷新");
+
       if (this.filterText !== "") {
         this.$refs.tree.filter(this.filterText);
       } else {
-        getdyTreeListJoggle({ type: this.zzradio })
-          .then((res) => {
-            console.log(res);
-            this.lineTreeData = res.data.list;
-            this.onlineNum = res.data.onlineNum;
-            this.totalNum = res.data.totalNum;
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+        if (this.role == 4) {
+          getzzdyTreeList({ type: this.zzradio, lineid: 259 })
+            .then((res) => {
+              console.log(res);
+              this.lineTreeData = res.data.list;
+              this.onlineNum = res.data.onlineNum;
+              this.totalNum = res.data.totalNum;
+              if (this.zzradio == 0) {
+                console.log("装置为离线");
+                this.$nextTick(() => {
+                  console.log(this.lineTreeData);
+                  this.currentData = this.lineTreeData[0];
+                  console.log(this.currentData);
+                  this.handleNodeClick(this.currentData);
+                  this.$nextTick(() => {
+                    this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+                    this.scrollView();
+                  });
+                });
+              } else {
+                this.$nextTick(() => {
+                  this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+                  this.scrollView();
+                });
+              }
+            })
+            .catch((err) => {
+              console.log(err); //代码错误、请求失败捕获
             });
-          })
-          .catch((err) => {
-            console.log(err); //代码错误、请求失败捕获
-          });
+        } else {
+          getdyTreeListJoggle({ type: this.zzradio })
+            .then((res) => {
+              console.log(res);
+              this.lineTreeData = res.data.list;
+              this.isfavorList = res.data.favorlist;
+              this.lineTreeData.unshift({
+                id: 0,
+                name: "收藏夹",
+                bsManufacturer: "收藏夹",
+                list: this.isfavorList,
+              });
+              this.onlineNum = res.data.onlineNum;
+              this.totalNum = res.data.totalNum;
+              this.currentData = JSON.parse(
+                localStorage.getItem("currentData")
+              );
+              this.$nextTick(() => {
+                this.$refs.tree.setCurrentKey(this.currentData.id); //一定要加这个选中了否则样式没有出来
+              });
+            })
+            .catch((err) => {
+              console.log(err); //代码错误、请求失败捕获
+            });
+        }
       }
     },
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
     //树状图搜索
     filterNode(value, data, node) {
-      //console.log(value, data, node);
-      this.filterText = value;
-      console.log(this.filterText);
       // 如果什么都没填全部匹配全部返回
       if (!value) return true;
       this.searchName = data.name + data.cmdid;
       //console.log(this.searchName);
       // 如果传入的value和data中的label相同，匹配成功
+
       if (this.searchName.indexOf(value) !== -1) {
         return true;
       }
+      let nowval = data[this.defaultProps.label].toUpperCase();
+      return nowval.indexOf(value.toUpperCase()) !== -1;
     },
     //获取树状图列表
     getLineTreeList() {
       console.log(this.zzradio);
-      getdyTreeListJoggle({ type: this.zzradio })
-        .then((res) => {
-          console.log(res);
-          this.lineTreeData = res.data.list;
-          console.log(this.lineTreeData);
-          this.onlineNum = res.data.onlineNum;
-          this.totalNum = res.data.totalNum;
-          this.currentData = JSON.parse(localStorage.getItem("currentData"));
-          if (this.lineTreeData[0].list[0].list.length > 0) {
-          }
-          if (
-            this.currentData !== null &&
-            Object.keys(this.currentData).length !== 0
-          ) {
-            console.log("aaaa");
-            this.currentNodekey = this.currentData.id;
-            this.handleNodeClick(this.currentData);
-          } else {
-            console.log("aaaa");
-            this.currentData = this.lineTreeData[0]; //第一个选中的数据
-            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-            this.handleNodeClick(this.currentData);
-          }
-          this.$nextTick(() => {
-            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-            this.scrollView();
+      if (this.role == 4) {
+        getzzdyTreeList({ type: this.zzradio, lineid: 259 })
+          .then((res) => {
+            this.lineTreeData = res.data.list;
+            this.onlineNum = res.data.onlineNum;
+            this.totalNum = res.data.totalNum;
+            this.currentData = JSON.parse(localStorage.getItem("currentData"));
+            this.defaultExpandIds =
+              JSON.parse(localStorage.getItem("defultkeys")) !== null
+                ? JSON.parse(localStorage.getItem("defultkeys"))
+                : []; //获取保存的defaultKey ;
+            if (this.lineTreeData[0].list[0].list.length > 0) {
+            }
+            if (
+              this.currentData !== null &&
+              Object.keys(this.currentData).length !== 0
+            ) {
+              this.currentNodekey = this.currentData.id;
+              this.handleNodeClick(this.currentData);
+            } else {
+              this.currentData = this.lineTreeData[0]; //第一个选中的数据
+              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+              this.handleNodeClick(this.currentData);
+            }
+
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+              this.scrollView();
+            });
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
           });
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
+      } else {
+        getdyTreeListJoggle({ type: this.zzradio })
+          .then((res) => {
+            this.lineTreeData = res.data.list;
+            this.isfavorList = res.data.favorlist;
+            this.lineTreeData.unshift({
+              id: 0,
+              name: "收藏夹",
+              bsManufacturer: "收藏夹",
+              list: this.isfavorList,
+            });
+            this.onlineNum = res.data.onlineNum;
+            this.totalNum = res.data.totalNum;
+            this.currentData = JSON.parse(localStorage.getItem("currentData"));
+
+            // if (this.lineTreeData[0].list[0].list.length > 0) {
+            // }
+            if (
+              this.currentData !== null &&
+              Object.keys(this.currentData).length !== 0
+            ) {
+              this.currentNodekey = this.currentData.id;
+              this.handleNodeClick(this.currentData);
+            } else {
+              this.currentData = this.lineTreeData[1]; //第一个选中的数据
+              this.currentNodekey = this.lineTreeData[1].id; //第一个数据
+              this.handleNodeClick(this.currentData);
+            }
+            this.defaultExpandIds =
+              JSON.parse(localStorage.getItem("defultkeys")) !== null
+                ? JSON.parse(localStorage.getItem("defultkeys"))
+                : []; //获取保存的defaultKey ;
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+              this.scrollView();
+            });
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      }
+    },
+    // 树节点展开
+    handleNodeExpand(data) {
+      // 保存当前展开的节点
+      let flag = false;
+      this.defaultExpandIds.some((item) => {
+        if (item === data.id) {
+          // 判断当前节点是否存在， 存在不做处理
+          flag = true;
+          return true;
+        }
+      });
+      if (!flag) {
+        // 不存在则存到数组里
+        this.defaultExpandIds.push(data.id);
+        localStorage.setItem(
+          "defultkeys",
+          JSON.stringify(this.defaultExpandIds)
+        );
+      }
+    },
+    // 树节点关闭
+    handleNodeCollapse(data) {
+      // 删除当前关闭的节点
+      this.defaultExpandIds.some((item, i) => {
+        if (item === data.id) {
+          this.defaultExpandIds.splice(i, 1);
+          localStorage.setItem(
+            "defultkeys",
+            JSON.stringify(this.defaultExpandIds)
+          );
+        }
+      });
+      this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
+    },
+    // 删除树子节点
+    removeChildrenIds(data) {
+      console.log("我还有子节点");
+      const ts = this;
+      console.log(data);
+      if (data.list) {
+        console.log(data.list);
+        data.list.forEach(function (item) {
+          const index = ts.defaultExpandIds.indexOf(item.id);
+          if (index > 0) {
+            ts.defaultExpandIds.splice(index, 1);
+          }
+          ts.removeChildrenIds(item);
+          console.log(ts.defaultExpandIds);
         });
+        localStorage.setItem(
+          "defultkeys",
+          JSON.stringify(this.defaultExpandIds)
+        );
+      }
     },
 
     //点击当前选中的treenode
     handleNodeClick(data) {
-      console.log(data);
+      if (data.name == "收藏夹") {
+        return;
+      }
+      if (data.isfavor == 0 || data.isfavor == null) {
+        this.collectFlag = false;
+      } else {
+        this.collectFlag = true;
+      }
       this.currentData = data;
-      this.scrollView();
+      //this.scrollView();
       this.$store.commit("currentData", this.currentData); //将currentData保存在vuex中
       this.$store.commit("termId", this.currentData.id); //将currentData保存在vuex中
       this.$store.commit("protocol", this.currentData.protocol); //将currentData保存在vuex中
       this.$store.commit("cmdId", this.currentData.cmdid); //将currentData保存在vuex中
       this.$parent.getCurrentData();
-
       //this.$refs.tree.scrollTo(data);
       // localStorage.setItem("currentData", JSON.stringify(this.currentData));
     },
+
     scrollView() {
       if (this.currentData) {
         this.$nextTick(() => {
@@ -219,6 +434,11 @@ export default {
       }
     },
   },
+  beforeDestroy() {
+    //清除定时器
+    clearInterval(this.treeStatustimer);
+    this.treeStatustimer = null;
+  },
 };
 </script>
 <style lang="less">
@@ -282,6 +502,10 @@ export default {
         display: flex;
         display: inline-table;
         overflow: hidden;
+        align-items: center;
+      }
+      .num {
+        color: #169e8c;
       }
     }
   }
@@ -298,6 +522,10 @@ export default {
       span {
         display: flex;
         //overflow: hidden;
+        align-items: center;
+        .num {
+          color: #fff;
+        }
         .iconfont {
           //width: 30px;
           display: inline-table;

src/views/realTimeMonitor/components/takePicButton.vue

@@ -40,13 +40,23 @@ export default {
   },
   watch: {
     termId: {
-      handler(newVal, oldVal) {},
+      handler(newVal, oldVal) {
+        console.log("我改变了");
+        clearInterval(this.statusTimer);
+        this.statusTimer = null;
+        this.statusNum = 0;
+        clearInterval(this.picPimer);
+        this.picPimer = null;
+        this.picNum = 0;
+        this.picLoading = false;
+      },
       deep: true,
       immediate: true,
     },
   },
   mounted() {
     console.log(this.channelIdList);
+    console.log("我是主动拍照");
   },
   computed: {
     termId() {
@@ -111,7 +121,7 @@ export default {
           this.statusTimer = window.setInterval(() => {
             this.getTakePicStatus(res.data);
             this.statusNum++;
-          }, 3000);
+          }, 5000);
         })
         .catch((err) => {});
     },
@@ -126,7 +136,55 @@ export default {
         .then((res) => {
           console.log(res);
           //res.data  0 状态未知  1 成功 2失败
-          if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
+          // if (
+          //   res.data.cmaStatus == 0 &&
+          //   res.data.picStatus == false &&
+          //   this.statusNum >= 5
+          // ) {
+          //   //全部没有返回，失败
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令图片都没有返回true，并且轮巡大于五次！",
+          //     type: "warning",
+          //   });
+          // } else if (res.data.cmaStatus == 1) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "拍照指令cmaStatus下发成功返回1！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 8000);
+          //   return;
+          // } else if (res.data.picStatus == true) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令下发失败，图片已经返回！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 2000);
+          //   return;
+          // }
+          if (
+            res.data.cmaStatus != 1 &&
+            res.data.picStatus == false &&
+            this.statusNum >= 5
+          ) {
             this.clearFn();
             this.$message({
               duration: 1500,
@@ -134,7 +192,11 @@ export default {
               message: "下发指令超时，请重试！",
               type: "warning",
             });
-          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
+          } else if (
+            res.data.cmaStatus == 1 &&
+            res.data.picStatus == false &&
+            this.statusNum < 5
+          ) {
             this.clearFn();
             this.$message({
               duration: 1500,
@@ -142,6 +204,20 @@ export default {
               message: "下发指令成功！",
               type: "success",
             });
+            this.newPicApi(val);
+            clearInterval(this.picPimer);
+            this.picPimer = null;
+            this.picPimer = window.setInterval(() => {
+              this.newPicApi(val);
+              this.picNum++;
+            }, 8000);
+          } else if (
+            res.data.cmaStatus != 1 &&
+            res.data.picStatus == true &&
+            this.statusNum < 5
+          ) {
+            this.clearFn();
+            this.newPicApi(val);
             clearInterval(this.picPimer);
             this.picPimer = null;
             this.picPimer = window.setInterval(() => {
@@ -194,5 +270,16 @@ export default {
       this.picLoading = false;
     },
   },
+  destroyed() {
+    console.log("离开了");
+    clearInterval(this.statusTimer);
+    this.statusTimer = null;
+    this.statusNum = 0;
+  },
+  beforeRouteLeave(to, from, next) {
+    // 路由跳转前，清除轮询
+    next();
+    console.log("7777777777777777777777777");
+  },
 };
 </script>

src/views/realTimeMonitor/components/takeTimePicButton.vue

@@ -0,0 +1,324 @@
+<template>
+  <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
+    >主动拍照
+  </el-button> -->
+  <div>
+    <el-dropdown trigger="click" @command="handleCommandpic">
+      <el-button type="primary" :loading="picLoading">
+        指定时间拍照<i class="el-icon-arrow-down el-icon--right"></i>
+      </el-button>
+      <el-dropdown-menu slot="dropdown" class="picdropStyle">
+        <el-dropdown-item
+          :command="item.channelid"
+          v-for="(item, index) in channelIdList"
+          :key="index"
+          >{{
+            item.alias !== null && item.alias !== ""
+              ? item.alias
+              : item.channelname
+          }}</el-dropdown-item
+        >
+      </el-dropdown-menu>
+    </el-dropdown>
+    <el-dialog
+      class="timeDialog"
+      title="拍照时间"
+      :visible.sync="dialogFormVisible"
+      width="380px"
+    >
+      <el-form :model="form">
+        <el-form-item label="拍照时间：">
+          <el-date-picker
+            v-model="form.startTime"
+            type="datetime"
+            placeholder="选择日期时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmClick">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getTermStatus,
+  setTermCamera,
+  getTakePicStatusJoggle,
+  getTakePicPhotoStatusJoggle,
+} from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      picLoading: false,
+      statusTimer: null,
+      statusNum: 0,
+      picPimer: null,
+      picNum: 0,
+      pzchannelId: "",
+      dialogFormVisible: false,
+      form: {
+        startTime: "",
+      },
+      timestamp: "",
+    };
+  },
+  watch: {
+    termId: {
+      handler(newVal, oldVal) {
+        console.log("我改变了");
+        clearInterval(this.statusTimer);
+        this.statusTimer = null;
+        this.statusNum = 0;
+        clearInterval(this.picPimer);
+        this.picPimer = null;
+        this.picNum = 0;
+        this.picLoading = false;
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    console.log(this.channelIdList);
+    console.log("我是主动拍照");
+  },
+  computed: {
+    termId() {
+      return this.$store.state.termId;
+    },
+
+    channelIdList() {
+      return this.$store.state.channelIdList;
+    },
+  },
+
+  methods: {
+    handleCommandpic(command) {
+      // --act=capture --cmdid=XY-SIMULATOR-0016 --channel=1 --preset=255 --scheduleTime=1704110700 --clientid=5 --reqid=TS
+      console.log(command);
+      this.dialogFormVisible = true;
+      this.pzchannelId = command;
+    },
+    confirmClick() {
+      console.log(this.pzchannelId);
+      console.log(this.form.startTime.getTime() / 1000);
+      this.timestamp = this.form.startTime.getTime() / 1000;
+      this.dialogFormVisible = false;
+      this.picLoading = true;
+      getTermStatus({ termId: this.termId }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "capture",
+            },
+            {
+              name: "channel",
+              value: this.pzchannelId,
+            },
+            {
+              name: "preset",
+              value: 255,
+            },
+            {
+              name: "scheduleTime",
+              value: this.timestamp,
+            },
+
+            {
+              name: "type",
+              value: 0,
+            },
+          ];
+          this.setTermFn(params);
+        } else {
+          this.picLoading = false;
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    handleTakePic() {},
+    //下发命令
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.termId,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.getTakePicStatus(res.data);
+          clearInterval(this.statusTimer);
+          this.statusTimer = null;
+          this.statusTimer = window.setInterval(() => {
+            this.getTakePicStatus(res.data);
+            this.statusNum++;
+          }, 5000);
+        })
+        .catch((err) => {});
+    },
+    //查询命令是否下发成功
+    getTakePicStatus(val) {
+      console.log(val);
+      getTakePicStatusJoggle({
+        requestid: val.requestId,
+        termId: this.termId,
+        photoTime: new Date(val.date).getTime(),
+      })
+        .then((res) => {
+          console.log(res);
+          //res.data  0 状态未知  1 成功 2失败
+          // if (
+          //   res.data.cmaStatus == 0 &&
+          //   res.data.picStatus == false &&
+          //   this.statusNum >= 5
+          // ) {
+          //   //全部没有返回，失败
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令图片都没有返回true，并且轮巡大于五次！",
+          //     type: "warning",
+          //   });
+          // } else if (res.data.cmaStatus == 1) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "拍照指令cmaStatus下发成功返回1！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 8000);
+          //   return;
+          // } else if (res.data.picStatus == true) {
+          //   this.clearFn();
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "指令下发失败，图片已经返回！",
+          //     type: "success",
+          //   });
+          //   clearInterval(this.picPimer);
+          //   this.picPimer = null;
+          //   this.picPimer = window.setInterval(() => {
+          //     this.newPicApi(val);
+          //     this.picNum++;
+          //   }, 2000);
+          //   return;
+          // }
+          if (res.data.cmaStatus != 1 && this.statusNum >= 5) {
+            this.clearFn();
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令超时，请重试！",
+              type: "warning",
+            });
+          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
+            this.clearFn();
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "下发指令成功！",
+              type: "success",
+            });
+            this.newPicApi(val);
+            clearInterval(this.picPimer);
+            this.picPimer = null;
+            this.picPimer = window.setInterval(() => {
+              this.newPicApi(val);
+              this.picNum++;
+            }, 8000);
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //获取最新的图片
+    newPicApi(val) {
+      getTakePicPhotoStatusJoggle({
+        requestid: val.requestId,
+        termId: this.termId,
+        photoTime: new Date(val.date).getTime(),
+      }).then((res) => {
+        console.log(res.data);
+        console.log(this.picNum);
+        if (res.data == true && this.picNum < 10) {
+          //   console.log(this.$parent.$parent);
+          this.$parent.$parent.getPhotoList(
+            -1,
+            new Date(val.date).getTime(),
+            this.termId
+          ); //获取图片列表是传当前设备的 id 和termid
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "已返回最新图片！",
+            type: "success",
+          });
+          clearInterval(this.picPimer);
+          this.picPimer = null;
+          this.picNum = 0;
+          console.log("返回最新图片");
+        } else if (res.data == false && this.picNum > 10) {
+          clearInterval(this.picPimer);
+          this.picPimer = null;
+          this.picNum = 0;
+        }
+      });
+    },
+    clearFn() {
+      clearInterval(this.statusTimer);
+      this.statusTimer = null;
+      this.statusNum = 0;
+      this.picLoading = false;
+    },
+  },
+  destroyed() {
+    console.log("离开了");
+    clearInterval(this.statusTimer);
+    this.statusTimer = null;
+    this.statusNum = 0;
+  },
+  beforeRouteLeave(to, from, next) {
+    // 路由跳转前，清除轮询
+    next();
+    console.log("7777777777777777777777777");
+  },
+};
+</script>
+<style lang="less">
+.timeDialog {
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 256px;
+  }
+  .el-dialog__footer {
+    .dialog-footer {
+      .el-button {
+        width: 80px !important;
+        margin-bottom: 0px !important;
+      }
+      .el-button + .el-button {
+        margin-left: 10px !important;
+      }
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/components/takeVideoButton.vue

@@ -85,11 +85,16 @@ export default {
     //   deep: true,
     //   immediate: true,
     // },
-    // termId: {
-    //   handler(newVal, oldVal) {},
-    //   deep: true,
-    //   immediate: true,
-    // },
+    termId: {
+      handler(newVal, oldVal) {
+        clearInterval(this.statusTimer);
+        this.statusTimer = null;
+        this.statusNum = 0;
+        this.picLoading = false;
+      },
+      deep: true,
+      immediate: true,
+    },
     // channelId: {
     //   handler(newVal, oldVal) {},
     //   deep: true,

src/views/realTimeMonitor/components/uploadpic.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-dialog
+    class="uploadPic"
+    title="上传图片"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="600px"
+    @close="handleclose"
+  >
+    <div class="uploadBox">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="装置编号">
+          <el-input v-model="form.cmdid"></el-input>
+        </el-form-item>
+        <el-form-item label="装置Id">
+          <el-input v-model="form.termid"></el-input>
+        </el-form-item>
+        <el-form-item label="通道选择">
+          <el-select v-model="form.channel" placeholder="选择通道">
+            <el-option label="通道一" :value="1"></el-option>
+            <el-option label="通道二" :value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择时间">
+          <el-date-picker
+            v-model="form.phototime"
+            value-format="timestamp"
+            type="datetime"
+            placeholder="选择日期时间"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="">
+          <el-upload
+            class="upload-demo"
+            ref="upload"
+            action="#"
+            :http-request="httpRequest"
+          >
+            <el-button slot="trigger" size="small" type="primary"
+              >选取图片</el-button
+            >
+          </el-upload>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="handlesure">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { uploadPicApi } from "@/utils/api/index";
+export default {
+  props: {},
+  data() {
+    return {
+      isShow: false,
+      form: {},
+      fileList: [], //上传列表
+    };
+  },
+  mounted() {},
+  methods: {
+    httpRequest(raw) {
+      this.fileList.push(raw);
+    },
+    //数据库获取最新数据
+    display(data) {
+      console.log(data);
+      this.$set(this.form, "cmdid", data.cmdid);
+      this.$set(this.form, "termid", data.id);
+      this.isShow = true;
+    },
+    handleclose() {
+      this.isShow = false;
+      this.fileList = [];
+    },
+    handlesure() {
+      this.isShow = false;
+      //console.log(this.fileList[0].file);
+      this.$set(this.form, "file", this.fileList[0].file);
+      console.log(this.form);
+      uploadPicApi(this.form)
+        .then((res) => {
+          console.log(res);
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "上传成功",
+            type: "success",
+          });
+          this.fileList = [];
+        })
+        .catch((err) => {});
+    },
+  },
+  destroyed() {
+    this.isShow = false;
+  },
+};
+</script>
+<style lang="less">
+.uploadPic {
+  .uploadBox {
+  }
+  .upload-demo {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+    margin-right: 16px;
+    .el-upload-list {
+      width: 370px;
+      height: 32px;
+      line-height: 32px;
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      margin-right: 12px;
+      border-radius: 4px;
+      .el-upload-list__item-name {
+        margin-right: 0px;
+      }
+      .el-upload-list__item {
+        transition: none;
+        font-size: 14px;
+        color: #606266;
+        position: relative;
+        box-sizing: border-box;
+        border-radius: 4px;
+        width: 100%;
+        height: 32px;
+        line-height: 32px;
+        margin-top: 0px !important;
+        .el-icon-close {
+          top: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/realTimeMonitor/index.vue

@@ -40,6 +40,7 @@ import morePicPreveiw from "./components/morePicPreveiw";
 
 import { mapGetters, mapState } from "vuex";
 export default {
+  name: "realTimeMonitor",
   data() {
     return {
       LineFlag: false, //如果是线路显示
@@ -148,25 +149,28 @@ export default {
           } else {
             this.terminalPhoto = res.data.list;
           }
-          let newDataList = [];
-          let current = 0;
-          if (this.terminalPhoto && this.terminalPhoto.length > 0) {
-            for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
-              if (i % this.photoNum !== 0 || i === 0) {
-                if (!newDataList[current]) {
-                  newDataList.push([this.terminalPhoto[i]]);
-                } else {
-                  newDataList[current].push(this.terminalPhoto[i]);
-                }
-              } else {
-                current++;
-                newDataList.push([this.terminalPhoto[i]]);
-              }
-            }
-          }
-          this.terminalPhoto = [...newDataList];
+          // let newDataList = [];
+          // let current = 0;
+          // if (this.terminalPhoto && this.terminalPhoto.length > 0) {
+          //   for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
+          //     if (i % this.photoNum !== 0 || i === 0) {
+          //       if (!newDataList[current]) {
+          //         newDataList.push([this.terminalPhoto[i]]);
+          //       } else {
+          //         newDataList[current].push(this.terminalPhoto[i]);
+          //       }
+          //     } else {
+          //       current++;
+          //       newDataList.push([this.terminalPhoto[i]]);
+          //     }
+          //   }
+          // }
+          // this.terminalPhoto = [...newDataList];
+          // this.$nextTick(() => {
+          //   this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
+          // });
           this.$nextTick(() => {
-            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
+            this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
           });
 
           this.swiperLoading = false;

src/views/realTimeSearch/index.vue

@@ -147,6 +147,14 @@
                   }}
                 </p>
               </div>
+              <div class="deleteBox">
+                <el-button
+                  title="删除照片"
+                  type="primary"
+                  icon="el-icon-delete"
+                  @click.stop="deletePic(item)"
+                ></el-button>
+              </div>
             </div>
             <div class="bigpic" v-else>
               <!-- <el-image :src="item.path" lazy></el-image> -->
@@ -203,9 +211,14 @@
 </template>
 
 <script>
-import { getSearchInfo, getRealtimePhoto } from "@/utils/api/index";
+import {
+  getSearchInfo,
+  getRealtimePhoto,
+  deletePicList,
+} from "@/utils/api/index";
 import defaultImage from "../../assets/img/nodatapic2.jpg";
 export default {
+  name: "realTimeSearch",
   data() {
     return {
       pickerOptions: {
@@ -362,7 +375,6 @@ export default {
         .then((res) => {
           this.picList = [];
           this.picList = res.data.list;
-
           this.total = res.data.total;
           this.loading = false;
         })
@@ -396,6 +408,37 @@ export default {
       this.pageSize = val;
       this.getPicData();
     },
+    deletePic(val) {
+      console.log(val);
+      let deleteArr = [];
+      deleteArr.push(val.picid);
+      console.log(deleteArr);
+      deletePicList({ list: deleteArr })
+        .then((res) => {
+          console.log(res);
+          this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              this.$message({
+                type: "success",
+                showClose: true,
+                message: "删除成功!",
+              });
+              this.getPicData();
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                showClose: true,
+                message: "已取消删除",
+              });
+            });
+        })
+        .catch((err) => {});
+    },
   },
 };
 </script>
@@ -452,6 +495,11 @@ export default {
             height: 200px;
           }
         }
+        &:hover {
+          .deleteBox {
+            display: block;
+          }
+        }
       }
       .caption {
         position: absolute;
@@ -477,6 +525,27 @@ export default {
           padding-right: 5px;
         }
       }
+      .deleteBox {
+        position: absolute;
+        right: 4px;
+        top: 4px;
+        z-index: 2;
+        display: none;
+        .el-button {
+          width: auto;
+          background: rgba(0, 0, 0, 0.5);
+          border: 1px solid transparent;
+          color: #fff;
+          font-size: 16px;
+          padding: 3px;
+        }
+        &:hover {
+          .el-button {
+            background: #f56c6c;
+            //color: #f56c6c;
+          }
+        }
+      }
     }
     .noPicBox {
       display: flex;

src/views/system/globalTools/index.vue

@@ -62,6 +62,7 @@ import {
 } from "@/utils/api/index";
 
 export default {
+  name: "globalTools",
   components: {},
   data() {
     return {

src/views/system/roleManagement/components/addRole.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-dialog
+    class="addUserDialog"
+    :title="title"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="470px"
+    @close="handleclose"
+  >
+    <el-form
+      label-position="left"
+      ref="formInfo"
+      label-width="100px"
+      :rules="title == '新增' ? rules : xgrules"
+      :model="formdata"
+    >
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input
+          placeholder="请输入角色名称"
+          v-model="formdata.roleName"
+          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 { addUserApi, updateUserApi } from "@/utils/api/index";
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      roleUser: "",
+      isShow: false,
+
+      formdata: {},
+      rules: {
+        roleName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+      },
+      xgrules: {
+        roleName: [
+          { required: true, message: "请输入用户名", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val == null) {
+        return (this.formdata = {
+          role: 2,
+        });
+      }
+      //this.formdata = val;
+      this.formdata = JSON.parse(JSON.stringify(val));
+    },
+    // 保存确定操作
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增") {
+            addUserApi(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          } else {
+            updateUserApi(this.formdata)
+              .then((res) => {
+                if (res.code == 200) {
+                  this.$message.success("修改成功");
+                  this.isShow = false;
+                } else {
+                  this.$message.error(res.msg);
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.isShow = true;
+      this.roleUser = localStorage.getItem("role");
+    },
+    hide() {
+      this.isShow = false;
+    },
+    handleclose() {
+      this.$parent.roleListAll();
+    },
+  },
+  mounted() {},
+};
+</script>
+<style lang="less">
+.addUserDialog {
+  .el-form-item {
+    .el-input,
+    .el-select,
+    .el-input-number {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/system/roleManagement/index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="rolemanagement">
+    <div class="deviceBox">
+      <div class="deviceBtnGroup">
+        <h4>角色管理</h4>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdddevice()"
+          >新增</el-button
+        >
+      </div>
+      <div class="deviceTable">
+        <el-table
+          ref="multipleTable"
+          :data="roleTableData"
+          stripe
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @row-click="handleRowClick"
+        >
+          <template slot="empty">
+            <el-empty :image-size="160" description="暂无数据"></el-empty>
+          </template>
+          <el-table-column
+            label="角色"
+            show-overflow-tooltip
+            prop="userName"
+          ></el-table-column>
+
+          <el-table-column
+            label="创建时间"
+            show-overflow-tooltip
+            prop="createTime"
+          >
+            <template slot-scope="scope">{{
+              $moment(scope.row.createTime).format("yy-MM-DD HH:mm:ss")
+            }}</template>
+          </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
+              >
+            </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>
+    <!-- 新增 -->
+    <addRole :title="title" ref="adduserref"></addRole>
+  </div>
+</template>
+<script>
+import addRole from "./components/addRole.vue";
+import { getRoleList, deleteRole } from "@/utils/api/index";
+
+export default {
+  name: "roleManagement",
+  components: {
+    addRole,
+  },
+  data() {
+    return {
+      title: "", //弹窗标题
+      roleTableData: [],
+      //multipleSelection: [], //获取当前选中
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {
+    this.roleListAll();
+  },
+  methods: {
+    //获取线路列表数据
+    roleListAll() {
+      getRoleList()
+        .then((res) => {
+          this.roleTableData = res.data.list;
+          this.total = res.data.total;
+        })
+        .catch((err) => {});
+    },
+    //点击行选中
+    handleRowClick(row, column, event) {
+      this.$refs.multipleTable.toggleRowSelection(row);
+    },
+    //获取选中的行
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 新建
+    handleAdddevice() {
+      this.title = "新增";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(null);
+    },
+
+    //修改
+    handleResive(data) {
+      this.title = "修改";
+      this.$refs.adduserref.display();
+      this.$refs.adduserref.getdataform(data);
+    },
+
+    //删除数据
+    handleDelete(data) {
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteRole({ uid: data.userId }).then((res) => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+              this.roleListAll(); //刷新
+            } else {
+              this.$message.error(res.msg);
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.roleListAll();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.roleListAll();
+    },
+  },
+};
+</script>
+<style lang="less">
+.rolemanagement {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+
+  .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;
+  }
+}
+</style>

src/views/system/userManagement.vue

@@ -81,6 +81,7 @@ import addUser from "./components/addUser.vue";
 import { getUserList, delUserApi } from "@/utils/api/index";
 
 export default {
+  name: "userManagement",
   components: {
     addUser,
   },

src/views/towerInformation/index.vue

@@ -163,6 +163,7 @@ import { getTowerListApi, delTowerApi, getSearchInfo } from "@/utils/api/index";
 import addDialog from "./components/addDialog.vue";
 
 export default {
+  name: "towerInformation",
   components: {
     addDialog,
   },

src/views/waterMark/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="waterMarkBox">
+    <div class="setWater">
+      <h4>批量水印下发命令生成</h4>
+      <div class="waterForm">
+        <div class="channelBox">
+          <h5>选择通道</h5>
+          <el-checkbox-group
+            v-model="checkList"
+            class="groupCheck"
+            @change="handleCheck"
+          >
+            <el-checkbox
+              v-for="item in channelList"
+              :label="item.id"
+              :key="item.id"
+              >{{ item.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </div>
+        <div class="cmdidBox">
+          <h5>装置编号</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入装置编号"
+            v-model="cmdidtextarea"
+          >
+          </el-input>
+        </div>
+        <div class="leftWaterBox">
+          <h5>左侧水印</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入左侧水印"
+            v-model="leftWatertextarea"
+          >
+          </el-input>
+        </div>
+        <div class="rghtWaterBox">
+          <h5>右侧水印</h5>
+          <el-input
+            type="textarea"
+            :rows="18"
+            placeholder="请输入右侧水印"
+            v-model="rightWatertextarea"
+          >
+          </el-input>
+        </div>
+      </div>
+      <el-button type="primary" @click="handleSure">确 定</el-button>
+      <el-button type="primary" @click="copyShare">复 制</el-button>
+      <el-button class="mlspan" type="text"
+        ><i>{{ issueCommands.length }}</i
+        >条命令</el-button
+      >
+      <div class="commandsBox" id="copy-content">
+        <div class="aaa" v-for="item in issueCommands" v-html="item"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "waterMark",
+  data() {
+    return {
+      channelList: [
+        {
+          id: 1,
+          name: "通道1",
+        },
+        {
+          id: 2,
+          name: "通道2",
+        },
+        {
+          id: 3,
+          name: "通道3",
+        },
+        {
+          id: 4,
+          name: "通道4",
+        },
+      ],
+      checkList: [], //选中的通道
+      cmdidtextarea: "", //输入的值
+      cmdidArr: [],
+      leftWatertextarea: "", //输入的值
+      leftWaterArr: [],
+      rightWatertextarea: "", //输入的值
+      rightWaterArr: [],
+      issueCommands: [], //打印出来下发命令
+    };
+  },
+  created() {
+    //this.getWater();
+  },
+  methods: {
+    handleCheck(val) {
+      console.log(this.checkList);
+    },
+    handleSure() {
+      console.log(this.checkList);
+      if (this.checkList.length == 0) {
+        this.$message({
+          showClose: true,
+          message: "请选择通道号",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.cmdidtextarea !== "") {
+        this.cmdidArr = [...this.cmdidtextarea.trim().split("\n")]; //装置编号
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入装置编号",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.leftWatertextarea !== "") {
+        this.leftWaterArr = [...this.leftWatertextarea.trim().split("\n")]; //左侧水印
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入左侧水印",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.rightWatertextarea !== "") {
+        this.rightWaterArr = [...this.rightWatertextarea.trim().split("\n")]; //右侧水印
+      } else {
+        this.$message({
+          showClose: true,
+          message: "请输入右侧水印",
+          type: "warning",
+        });
+        return;
+      }
+
+      console.log(this.cmdidArr);
+      console.log(this.leftWaterArr);
+      console.log(this.rightWaterArr);
+      this.issueCommands = [];
+      this.getWater();
+    },
+    getWater() {
+      for (let j = 0; j < this.checkList.length; j++) {
+        for (let i = 0; i < this.cmdidArr.length; i++) {
+          var command =
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=osd --cmdid=" +
+            this.cmdidArr[i] +
+            " --flag=1 --channel=" +
+            this.checkList[j] +
+            ' --leftBottom="' +
+            this.leftWaterArr[i] +
+            '" --rightBottom="' +
+            this.rightWaterArr[i] +
+            '" --clientid=5 --reqid=TS;' +
+            "<br/>" +
+            "sleep 1;" +
+            "<br/>" +
+            "/usr/local/bin/xympadmn --server=127.0.0.1 --port=6891 --act=capture --cmdid=" +
+            this.cmdidArr[i] +
+            " --channel=" +
+            this.checkList[j] +
+            " --preset=255 --type=0;" +
+            "<br/>" +
+            "sleep 1;";
+          this.issueCommands.push(command); //把命令push
+        }
+      }
+    },
+    copyShare() {
+      let div = document.getElementById("copy-content");
+      let range = "";
+      if (document.body.createTextRange) {
+        //兼容ie
+        range = document.body.createTextRange();
+        range.moveToElementText(div);
+        range.select();
+      } else if (window.getSelection) {
+        // 兼容非IE，比如Firefox/chrome
+        let selection = window.getSelection();
+        range = document.createRange();
+        range.selectNodeContents(div);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      document.execCommand("Copy"); // 执行浏览器复制命令
+      console.log("已复制好，可贴粘");
+    },
+  },
+};
+</script>
+<style lang="less">
+.waterMarkBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+  .setWater {
+    border: 1px solid #dddddd;
+    height: calc(100% - 24px);
+    padding: 12px;
+    border-radius: 4px;
+    .waterForm {
+      width: 100%;
+      height: 50%;
+      margin-top: 16px;
+      // background: #fcc;
+      display: flex;
+      .channelBox {
+        width: 150px;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        margin-right: 8px;
+        .groupCheck {
+          display: flex;
+          flex-direction: column;
+          margin-top: 12px;
+          .el-checkbox {
+            height: 32px;
+            line-height: 32px;
+          }
+        }
+      }
+      .cmdidBox {
+        width: 250px;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        margin-right: 8px;
+        .el-textarea {
+          margin-top: 12px;
+        }
+      }
+      .leftWaterBox {
+        margin-right: 8px;
+      }
+      .leftWaterBox,
+      .rghtWaterBox {
+        flex: 1;
+        border: 1px solid #dddddd;
+        padding: 12px;
+        border-radius: 4px;
+        .el-textarea {
+          margin-top: 12px;
+        }
+      }
+    }
+    .el-button {
+      margin-top: 4px;
+    }
+    .commandsBox {
+      width: auto;
+      height: calc(50% - 106px);
+      margin-top: 8px;
+      border: 1px solid #fcc;
+      overflow: auto;
+      padding: 8px;
+      border-radius: 4px;
+    }
+    .mlspan {
+      //   margin-left: 24px;
+      //   height: 32px;
+      //   line-height: 32px;
+      //   margin-top: 4px;
+      //   display: inline-block;
+      font-size: 14px;
+      color: #000;
+      cursor: default;
+      i {
+        color: #169e8c;
+        font-weight: bold;
+        font-style: normal;
+      }
+    }
+  }
+}
+</style>

src/views/weather/index.vue

@@ -0,0 +1,389 @@
+<template>
+  <div class="weatherBox">
+    <div class="weatherContain">
+      <leftTree ref="sideTree"></leftTree>
+      <div class="rightTable">
+        <div class="dataBox">
+          <div class="fatherTableShowBox" v-if="!childFlag">
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+              height="calc(100% - 40px)"
+            >
+              <el-table-column prop="line" label="线路"> </el-table-column>
+              <el-table-column prop="pole" label="杆塔"> </el-table-column>
+              <el-table-column prop="terminal" label="终端"> </el-table-column>
+              <el-table-column prop="time" label="时间"> </el-table-column>
+              <el-table-column prop="temperature" label="温度(℃)">
+              </el-table-column>
+              <el-table-column prop="humidity" label="湿度(%RH)">
+              </el-table-column>
+              <el-table-column prop="windSpeed" label="瞬时风速(m/s)">
+              </el-table-column>
+              <el-table-column prop="windDirection" label="瞬时风向(°)">
+              </el-table-column>
+              <el-table-column prop="rainfall" label="雨量(mm/hour)">
+              </el-table-column>
+              <el-table-column prop="pressure" label="气压(hPa(百帕))">
+              </el-table-column>
+              <el-table-column prop="sunlight" label="日照(W/m2)">
+              </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"
+              >
+              </el-pagination>
+            </div>
+          </div>
+          <div class="childBox" v-else>
+            <div class="searchBox" ref="searchref">
+              <el-form
+                :inline="true"
+                :model="formdata"
+                class="demo-form-inline"
+              >
+                <el-form-item label="开始日期">
+                  <el-date-picker
+                    v-model="formdata.starttime"
+                    type="date"
+                    placeholder="开始日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="结束日期">
+                  <el-date-picker
+                    v-model="formdata.endtime"
+                    type="date"
+                    placeholder="结束日期"
+                    class="ml10"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">查询</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+            <div class="childTableShowBox">
+              <el-table :data="childTableDate" style="width: 100%">
+                <el-table-column prop="time" label="时间"></el-table-column>
+                <el-table-column
+                  prop="temperature"
+                  label="温度(℃)"
+                ></el-table-column>
+                <el-table-column
+                  prop="humidity"
+                  label="湿度(%RH)"
+                ></el-table-column>
+                <el-table-column
+                  prop="windSpeed"
+                  label="瞬时风速(m/s)"
+                ></el-table-column>
+                <el-table-column
+                  prop="windDirection"
+                  label="瞬时风向(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="rainfall"
+                  label="雨量(mm/hour)"
+                ></el-table-column>
+                <el-table-column
+                  prop="pressure"
+                  label="气压(hPa(百帕))"
+                ></el-table-column>
+                <el-table-column
+                  prop="sunlight"
+                  label="日照(W/m2)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minuteAverageWindSpeed"
+                  label="1分钟平均风速(m/s)"
+                ></el-table-column>
+                <el-table-column
+                  prop="minuteAverageWindDirection"
+                  label="1分钟平均风向(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="tenMinuteAverageWindSpeed"
+                  label="10分钟平均风速(m/s)"
+                ></el-table-column>
+                <el-table-column
+                  prop="tenMinuteAverageWindDirection"
+                  label="10分钟平均风向(°)"
+                ></el-table-column>
+                <el-table-column
+                  prop="tenMinuteMaxWindSpeed"
+                  label="10分钟最大风速(m/s)"
+                ></el-table-column>
+              </el-table>
+            </div>
+            <div class="pageNation">
+              <el-pagination
+                @current-change="handleCurrentChange"
+                @size-change="handleSizeChange"
+                :current-page="page"
+                :page-size="pageSize"
+                layout="sizes, prev, pager, next, jumper,total"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import leftTree from "../../fubingCommon/leftTree";
+export default {
+  name: "weather",
+  components: {
+    leftTree,
+  },
+  data() {
+    return {
+      msg: "",
+      childFlag: false,
+      tableData: [],
+      childTableDate: [],
+      formdata: {},
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  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().getTime());
+  },
+  methods: {
+    getCurrentData(data) {
+      console.log("执行父组件", data);
+      if (data.dyValue) {
+        console.log("电压");
+        this.msg = "公司所有数据";
+        this.childFlag = false;
+        this.tableData = [
+          {
+            line: "线路A",
+            pole: "杆塔1",
+            terminal: "终端1",
+            time: "2023-03-15 08:00:00",
+            temperature: "25℃",
+            humidity: "60%",
+            windSpeed: "0.5m/s",
+            windDirection: "120°",
+            rainfall: "0mm/hour",
+            pressure: "1015hPa",
+            sunlight: "500W/m2",
+          },
+          {
+            line: "线路B",
+            pole: "杆塔2",
+            terminal: "终端2",
+            time: "2023-03-15 09:00:00",
+            temperature: "23℃",
+            humidity: "70%",
+            windSpeed: "0.3m/s",
+            windDirection: "90°",
+            rainfall: "0mm/hour",
+            pressure: "1013hPa",
+            sunlight: "350W/m2",
+          },
+          {
+            line: "线路C",
+            pole: "杆塔3",
+            terminal: "终端3",
+            time: "2023-03-15 10:00:00",
+            temperature: "27℃",
+            humidity: "55%",
+            windSpeed: "0.7m/s",
+            windDirection: "60°",
+            rainfall: "0mm/hour",
+            pressure: "1017hPa",
+            sunlight: "650W/m2",
+          },
+          {
+            line: "线路D",
+            pole: "杆塔4",
+            terminal: "终端4",
+            time: "2023-03-15 11:00:00",
+            temperature: "24℃",
+            humidity: "65%",
+            windSpeed: "0.4m/s",
+            windDirection: "30°",
+            rainfall: "0mm/hour",
+            pressure: "1016hPa",
+            sunlight: "450W/m2",
+          },
+          {
+            line: "线路E",
+            pole: "杆塔5",
+            terminal: "终端5",
+            time: "2023-03-15 12:00:00",
+            temperature: "28℃",
+            humidity: "50%",
+            windSpeed: "0.6m/s",
+            windDirection: "90°",
+            rainfall: "0mm/hour",
+            pressure: "1018hPa",
+            sunlight: "750W/m2",
+          },
+        ];
+      } else if (data.bsManufacturer) {
+        this.msg = "杆塔下所有数据";
+        this.childFlag = false;
+        this.tableData = [
+          {
+            line: "线路F",
+            pole: "杆塔6",
+            terminal: "终端6",
+            time: "2023-03-15 13:00:00",
+            temperature: "26℃",
+            humidity: "60%",
+            windSpeed: "0.5m/s",
+            windDirection: "150°",
+            rainfall: "0mm/hour",
+            pressure: "1017hPa",
+            sunlight: "600W/m2",
+          },
+          {
+            line: "线路G",
+            pole: "杆塔7",
+            terminal: "终端7",
+            time: "2023-03-15 14:00:00",
+            temperature: "29℃",
+            humidity: "45%",
+            windSpeed: "0.7m/s",
+            windDirection: "180°",
+            rainfall: "mm/hour, ",
+            pressure: "184hPa（百帕） ",
+            sunlight: "789W/m²",
+          },
+          {
+            line: "线路H",
+            pole: "杆塔8 ",
+            terminal: "终端8 ",
+            time: "24-Mar-23 16:45 ",
+            temperature: "24℃（摄氏度） ",
+            humidity: "78% （百分比） ",
+            windSpeed: "1.8m/s（米/秒） ",
+            windDirection: "88 °（度） ",
+            rainfall: "至今无数据 ",
+            pressure: "184hPa（百帕） ",
+            sunlight: " 无数据 ",
+            comment: " 天气晴朗，适合户外活动。",
+          },
+        ];
+      } else {
+        console.log("杆塔");
+        this.msg = "装置当天数据";
+        this.childFlag = true;
+        this.childTableDate = [
+          {
+            time: "2023-03-15 08:00:00",
+            temperature: "25℃",
+            humidity: "60%",
+            windSpeed: "0.5m/s",
+            windDirection: "120°",
+            rainfall: "0mm/hour",
+            pressure: "1015hPa",
+            sunlight: "500W/m2",
+            minuteAverageWindSpeed: "无数据",
+            minuteAverageWindDirection: "无数据",
+            tenMinuteAverageWindSpeed: "无数据",
+            tenMinuteAverageWindDirection: "无数据",
+            tenMinuteMaxWindSpeed: "无数据",
+          },
+          {
+            time: "2023-03-15 09:00:00",
+            temperature: "23℃",
+            humidity: "70%",
+            windSpeed: "0.3m/s",
+            windDirection: "90°",
+            rainfall: "0mm/hour",
+            pressure: "1013hPa",
+            sunlight: "350W/m2",
+            minuteAverageWindSpeed: "无数据",
+            minuteAverageWindDirection: "无数据",
+            tenMinuteAverageWindSpeed: "无数据",
+            tenMinuteAverageWindDirection: "无数据",
+            tenMinuteMaxWindSpeed: "无数据",
+          },
+        ];
+      }
+    },
+    onSubmit() {},
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      // this.picList = [];
+      // this.getPicData();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      //this.getPicData();
+    },
+  },
+};
+</script>
+<style lang="less">
+.weatherBox {
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  padding: 12px 12px;
+  background: #fff;
+  .weatherContain {
+    display: flex;
+    height: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+  }
+  .rightTable {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    overflow: hidden;
+    border-left: 1px solid #ddd;
+    .dataBox {
+      width: calc(100% - 24px);
+      height: calc(100% - 24px);
+      padding: 12px 12px;
+      background: #fff;
+    }
+    .fatherTableShowBox {
+      height: calc(100% - 0px);
+    }
+    .childBox {
+      height: calc(100% - 50px);
+      .childTableShowBox {
+        height: calc(100% - 50px);
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -21,11 +21,13 @@ module.exports = defineConfig({
     proxy: {
       "/api": {
         //表示拦截以/api开头的请求路径
-        target: "http://47.96.238.157:8093", //阿里云服务器环境
-        //target: "http://180.166.218.222:40080", //dell
+        //target: "http://47.96.238.157:8093", //阿里云服务器环境
+        target: "http://180.166.218.222:40080", //dell
+        //target: "http://192.168.50.7:8093", //dell
+        // target: "http://192.168.50.42:81", //东视
         changOrigin: true, //是否开启跨域
         pathRewrite: {
-          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+          "^/api": "/api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
         },
       },
     },