实时监控

src/assets/css/element.less

@@ -0,0 +1,35 @@
+//表格样式
+.el-table {
+  td.el-table__cell,
+  th.el-table__cell.is-leaf {
+    border-bottom: 1px solid #ebeef5;
+  }
+  .el-table__header-wrapper,
+  .el-table__fixed-header-wrapper {
+    border-top: 1px solid #ebeef5;
+  }
+  th.el-table__cell {
+    background: #f8f8f8 !important;
+  }
+  .el-button--text {
+    padding: 0px;
+  }
+  .el-button + .el-button,
+  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
+    margin-left: 16px;
+  }
+  .deleteText {
+    color: #f56c6c;
+  }
+}
+.el-table::before,
+.el-table__fixed-right::before,
+.el-table__fixed::before {
+  height: 0px !important;
+}
+//分页
+.pageNation {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+}

src/assets/css/global.less

@@ -25,3 +25,10 @@
 
 //阴影
 @box-shadow-basic: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+//网站主题颜色
+
+//欣影橙色色
+@orange-color: #f08200;
+//电网绿色
+@green-color: #00a096;

src/assets/css/theme.less

@@ -129,11 +129,11 @@
 //绿色主题
 .greenStyle {
   .header {
-    background: #00a096;
+    background: @green-color;
   }
 
   .el-menu {
-    background: #00a096;
+    background: @green-color;
 
     i {
       color: @color-white !important;
@@ -153,23 +153,23 @@
 
     .el-menu-item:not(.is-disabled):focus,
     .el-menu-item:not(.is-disabled):hover {
-      color: #00a096;
+      color: @green-color;
       background-color: @color-white;
       border-bottom: 2px solid @color-white;
 
       i {
-        color: #00a096 !important;
+        color: @green-color !important;
       }
     }
 
     .el-submenu:focus .el-submenu__title,
     .el-submenu:hover .el-submenu__title {
-      color: #00a096 !important;
+      color: @green-color !important;
       background-color: @color-white;
       border-bottom: 2px solid @color-white;
 
       i {
-        color: #00a096 !important;
+        color: @green-color !important;
       }
     }
 
@@ -179,7 +179,7 @@
   }
 
   .sidebar .el-menu--horizontal .el-menu-item.is-active i {
-    color: #00a096;
+    color: @green-color;
   }
 
   .sidebar
@@ -187,126 +187,103 @@
     .el-submenu.is-active
     .el-submenu__title
     > i:first-child {
-    color: #00a096;
+    color: @green-color;
   }
 
   .tags-li.active {
-    border: 1px solid #00a096;
-    background-color: #00a096;
+    border: 1px solid @green-color;
+    background-color: @green-color;
   }
 }
 
 //橙色主题
 .orangeStyle {
   .header {
-    background: #f08200;
+    background: @orange-color;
   }
-  .el-menu {
-    background: #f08200;
-
-    i {
-      color: @color-white !important;
-    }
-
-    .el-menu-item {
-      color: @color-white;
-    }
+  .sidebar {
+    .el-menu {
+      background: @orange-color;
 
-    .el-menu-item.is-active {
-      color: @color-white;
-    }
+      i {
+        color: @color-white !important;
+      }
 
-    .el-submenu .el-submenu__title {
-      color: @color-white;
-    }
+      .el-menu-item {
+        color: @color-white;
+      }
 
-    .el-menu-item:not(.is-disabled):focus,
-    .el-menu-item:not(.is-disabled):hover {
-      color: #f08200;
-      background-color: @color-white;
-      border-bottom: 2px solid @color-white;
+      .el-menu-item.is-active {
+        color: @color-white;
+      }
 
-      i {
-        color: #f08200 !important;
+      .el-submenu .el-submenu__title {
+        color: @color-white;
       }
-    }
 
-    .el-submenu:focus .el-submenu__title,
-    .el-submenu:hover .el-submenu__title {
-      color: #f08200 !important;
-      background-color: @color-white;
-      border-bottom: 2px solid @color-white;
+      .el-menu-item:not(.is-disabled):focus,
+      .el-menu-item:not(.is-disabled):hover {
+        color: @color-white;
+        background-color: #f39b33;
+        border-bottom: 2px solid #f39b33;
+        i {
+          color: @color-white !important;
+        }
+      }
+      .el-submenu:focus .el-submenu__title,
+      .el-submenu:hover .el-submenu__title {
+        color: @color-white !important;
+        background-color: #f39b33;
+        border-bottom: 2px solid #f39b33;
+
+        i {
+          color: @color-white !important;
+        }
+      }
 
-      i {
-        color: #f08200 !important;
+      .el-submenu.is-active .el-submenu__title {
+        color: @color-white;
       }
     }
-
-    .el-submenu.is-active .el-submenu__title {
-      color: @color-white;
+    .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+      background-color: #f39b33;
+      border-bottom: 2px solid #f39b33;
+    }
+    .el-menu--horizontal > .el-menu-item.is-active {
+      background-color: #f39b33;
+      border-bottom: 2px solid #f39b33;
     }
-  }
-  .sidebar .el-menu--horizontal .el-menu-item.is-active i {
-    color: #f08200;
-  }
-
-  .sidebar
     .el-menu--horizontal
-    .el-submenu.is-active
-    .el-submenu__title
-    > i:first-child {
-    color: #f08200;
-  }
-  .sideBar {
+      .el-submenu.is-active
+      .el-submenu__title
+      > i:first-child {
+      color: @orange-color;
+    }
     .el-tree--highlight-current
       .el-tree-node.is-current
       > .el-tree-node__content {
       // 设置颜色
       color: #fff;
-      background: #f08200 !important;
+      background: @orange-color !important;
+    }
+    .el-menu--horizontal .el-menu-item.is-active i {
+      color: @orange-color;
     }
   }
-  .gallery-thumbs .swiper-slide-active {
-    border: 3px solid #f08200 !important;
-  }
-  .tags-li.active {
-    border: 1px solid #f08200;
-    background-color: #f08200;
+  .monitor-container
+    .sideBar
+    .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    color: #fff;
+    background: @orange-color;
   }
-}
 
-//表格样式
-
-.el-table {
-  td.el-table__cell,
-  th.el-table__cell.is-leaf {
-    border-bottom: 1px solid #ebeef5;
-  }
-  .el-table__header-wrapper,
-  .el-table__fixed-header-wrapper {
-    border-top: 1px solid #ebeef5;
-  }
-  th.el-table__cell {
-    background: #f8f8f8 !important;
-  }
-  .el-button--text {
-    padding: 0px;
-  }
-  .el-button + .el-button,
-  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
-    margin-left: 16px;
+  .gallery-thumbs .swiper-slide-active {
+    border: 3px solid @orange-color !important;
   }
-  .deleteText {
-    color: #f56c6c;
+  .tags-li.active {
+    border: 1px solid @orange-color;
+    background-color: @orange-color;
   }
 }
-.el-table::before,
-.el-table__fixed-right::before,
-.el-table__fixed::before {
-  height: 0px !important;
-}
-.pageNation {
-  margin-top: 8px;
-  display: flex;
-  justify-content: flex-end;
-}

src/assets/font/iconfont.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1681806954677') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dianli:before {
+  content: "\e649";
+}
+
+.icon-dianlihangye:before {
+  content: "\e791";
+}
+

src/components/common/Header.vue

@@ -18,16 +18,7 @@
             :value="item.value"
           ></el-option>
         </el-select>
-        <!-- 全屏显示 -->
-        <!-- <div class="btn-fullscreen" @click="handleFullScreen">
-          <el-tooltip
-            effect="dark"
-            :content="fullscreen ? `取消全屏` : `全屏`"
-            placement="bottom"
-          >
-            <i class="el-icon-rank"></i>
-          </el-tooltip>
-        </div> -->
+
         <!-- 用户头像 -->
         <div class="user-avator">
           <img src="../../assets/img/user.jpeg" />
@@ -39,8 +30,8 @@
             <i class="el-icon-caret-bottom"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="noticeShow">公告</el-dropdown-item>
-            <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item>
+            <!-- <el-dropdown-item command="noticeShow">公告</el-dropdown-item>
+            <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item> -->
             <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>

src/main.js

@@ -22,6 +22,8 @@ Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */);
 import "./assets/css/reset.css"; //默认样式
 import "./assets/css/theme.less"; //修改主题颜色
 import "./assets/css/global.less"; //全局定义颜色
+import "./assets/css/element.less"; //全局定义颜色
+import "./assets/font/iconfont.css"; //按钮
 
 //引入md5加密
 import md5 from "js-md5";

src/utils/api/index.js

@@ -115,9 +115,9 @@ export function getTowerList(params) {
 
 //实时监控页面
 //获取线路树状结构
-export function getLineTreeListJoggle(data) {
+export function getdyTreeListJoggle(data) {
   return request({
-    url: "/test/getLineTreeList",
+    url: "/test/getdyTreeList",
     method: "post",
     data,
   });

src/views/realTimeMonitor/index.vue

@@ -4,7 +4,6 @@
     <div class="sideBar">
       <!-- <treeSide></treeSide> -->
       <!-- <el-tree ref="tree" :data="barData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> -->
-
       <el-tree
         :data="lineTreeData"
         :props="defaultProps"
@@ -16,13 +15,12 @@
         :current-node-key="currentNodekey"
       >
         <span class="custom-tree-node" slot-scope="{ node, data }">
-          <span v-if="data.list" class="el-icon-folder"> </span>
+          <span v-if="data.list" class="iconfont icon-dianli"> </span>
           <span
             v-else
-            class="el-icon-document"
+            class="iconfont icon-dianlihangye"
             style="margin-right: 3px"
           ></span>
-
           <span>{{ node.label }}</span>
         </span>
       </el-tree>
@@ -43,11 +41,13 @@
             v-model="dateValue"
             type="date"
             placeholder="选择日期"
+            value-format="timestamp"
+            @change="changedate"
           >
           </el-date-picker>
         </div>
         <div class="monitorItemBox">
-          <h3>检测项 通道</h3>
+          <h3>通道</h3>
           <el-select
             v-model="channelValue"
             placeholder="请选择"
@@ -70,7 +70,7 @@
 
 <script>
 import {
-  getLineTreeListJoggle,
+  getdyTreeListJoggle,
   getChannelListJoggle,
   getTerminalPhotoListJoggle,
 } from "@/utils/api/index";
@@ -110,22 +110,36 @@ export default {
   mounted() {},
   created() {
     this.getLineTreeList();
+    this.getDateTime();
+    console.log(this.dateValue);
   },
   methods: {
+    //获取当前时间
+    getDateTime() {
+      this.dateValue = new Date().getTime();
+    },
+    //选择时间
+    changedate() {
+      console.log(this.dateValue);
+    },
     //获取左侧树结构
     getLineTreeList() {
-      getLineTreeListJoggle()
+      getdyTreeListJoggle({
+        termid: 123455,
+      })
         .then((res) => {
           console.log(res);
           this.lineTreeData = res.data.list;
-          console.log(this.lineTreeData);
-          if (this.lineTreeData.length > 0) {
-            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+          console.log(this.lineTreeData[0].list[0].list);
+          if (this.lineTreeData[0].list[0].list.length > 0) {
+            this.currentNodekey = this.lineTreeData[0].list[0].list[0].id; //第一个数据
+            console.log(this.currentNodekey);
             this.$nextTick(() => {
               this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
               console.log(this.currentNodekey);
               this.channelId = this.currentNodekey;
-              this.getChannelList(this.channelId);
+              console.log(this.channelId);
+              this.getChannelList(this.channelId); //获取通道id接口
             });
           }
         })
@@ -133,16 +147,28 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    //点击获取当前点击的tree数据
+    handleNodeClick(data, node) {
+      console.log(data, node);
+      if (data.list) {
+        this.$refs.tree.setCurrentKey(data.list[0].id);
+      }
+      this.channelId = data.id; //获取当前点击的id
+      this.getChannelList(this.channelId); //获取通道id接口
+    },
+
     //获取通道的接口
     getChannelList(id) {
       getChannelListJoggle({ termid: id })
         .then((res) => {
           console.log(res);
           this.channelList = res.data.list;
+          console.log(this.channelList);
           this.getTerminalPhotoList(
             this.channelList[0].id,
             this.channelList[0].termId
           ); //获取图片列表是传当前设备的 id 和termid
+          this.channelOption = [];
           this.channelList.forEach((item) => {
             this.channelOption.push({
               label: item.channelName,
@@ -184,15 +210,6 @@ export default {
       console.log(channelObj);
       this.getTerminalPhotoList(val, channelObj.termid);
     },
-    //点击获取当前点击的tree数据
-    handleNodeClick(data, node) {
-      console.log(data, node);
-      if (data.list) {
-        this.$refs.tree.setCurrentKey(data.list[0].id);
-      }
-      this.channelId = data.id; //获取当前点击的id
-      this.getChannelList(this.channelId);
-    },
   },
 };
 </script>

vue.config.js

@@ -18,16 +18,17 @@ module.exports = defineConfig({
   },
   devServer: {
     proxy: {
-      '/api': {//表示拦截以/api开头的请求路径
+      "/api": {
+        //表示拦截以/api开头的请求路径
         //表示拦截以/api开头的请求路径
         //target: 'http://localhost:1234', //本地nodejs服务器
         target: "http://47.96.238.157:8093", //公司项目服务器环境
         //target: 'http://180.166.218.222:7200',
         changOrigin: true, //是否开启跨域
         pathRewrite: {
-          '^/api': '' //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
-        }
-      }
+          "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的
+        },
+      },
       // [process.env.VUE_APP_BASE_API]: {
       //   //表示拦截以/api开头的请求路径
       //   //target: 'http://localhost:1234', //本地nodejs服务器