页面优化

src/assets/css/element.less

@@ -21,6 +21,10 @@
   .deleteText {
     color: #f56c6c;
   }
+  .deleteText:focus,
+  .deleteText:hover {
+    color: #f56c6c;
+  }
 }
 .el-table::before,
 .el-table__fixed-right::before,

src/assets/css/theme.less

@@ -15,10 +15,6 @@
       color: @color-white;
     }
 
-    .el-menu-item.is-active {
-      color: @color-white;
-    }
-
     .el-submenu .el-submenu__title {
       color: @color-white;
     }
@@ -44,12 +40,28 @@
         color: #20a0ff !important;
       }
     }
-
-    .el-submenu.is-active .el-submenu__title {
-      color: @color-white;
   }
+  .el-menu--horizontal > .el-menu-item.is-active {
+    border-bottom: 2px solid #fff;
+    color: #20a0ff;
+    background-color: #fff;
+    i {
+      color: #20a0ff !important;
+    }
+  }
+  .el-submenu.is-active {
+    .el-submenu__title {
+      border-bottom: 2px solid #fff !important;
+      color: #20a0ff !important;
+      background-color: #fff;
+      i {
+        color: #20a0ff !important;
+      }
+    }
+  }
+  .gallery-thumbs .swiper-slide-active {
+    border: 3px solid #20a0ff !important;
   }
-
   .tags-li.active {
     border: 1px solid #20a0ff;
     background-color: #20a0ff;

src/assets/fonts/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1681806954677') format('truetype');
+  src: url('iconfont.ttf?t=1683175912652') format('truetype');
 }
 
 .iconfont {
@@ -11,6 +11,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gongsi:before {
+  content: "\e62e";
+}
+
 .icon-dianli:before {
   content: "\e649";
 }
@@ -19,3 +23,11 @@
   content: "\e791";
 }
 
+.icon-video-camera:before {
+  content: "\e962";
+}
+
+.icon-shudianxianlu_2722010801:before {
+  content: "\efed";
+}
+

src/components/common/Sidebar.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="sidebar">
     <el-menu
-      :default-active="onRoutes"
+      :default-active="activeIndex"
       class="sidebar-el-menu"
       mode="horizontal"
+      @select="handleSelect"
       router
     >
       <template v-for="item in items">
@@ -53,7 +54,7 @@ export default {
   data() {
     return {
       //collapse: false,
-
+      activeIndex: "/realTimeMonitor",
       items: [
         // {
         //   icon: "el-icon-s-home",
@@ -75,6 +76,11 @@ export default {
           index: "cameraChannel",
           title: "通道管理",
         },
+        {
+          icon: "el-icon-picture-outline",
+          index: "imageSettings",
+          title: "图像采集参数设置",
+        },
         // {
         //   icon: "el-icon-film",
         //   index: "pictureRotation",
@@ -255,17 +261,20 @@ export default {
       ],
     };
   },
-  computed: {
+  mounted() {
-    onRoutes() {
+    this.activeIndex = sessionStorage.getItem("keyPath") || "/realTimeMonitor";
-      return this.$route.path.replace("/", "");
+  },
+  watch: {
+    activeIndex(newValue) {
+      if (newValue != this.$route.path) {
+        this.activeIndex = this.$route.path;
+      }
+    },
   },
+  methods: {
+    handleSelect(keyPath) {
+      sessionStorage.setItem("keyPath", keyPath);
     },
-  created() {
-    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
-    // bus.$on('collapse', (msg) => {
-    //     this.collapse = msg;
-    //     bus.$emit('collapse-content', msg);
-    // });
   },
 };
 </script>

src/main.js

@@ -23,7 +23,7 @@ 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"; //按钮
+import "./assets/fonts/iconfont.css"; //按钮
 
 //引入md5加密
 import md5 from "js-md5";

src/router/index.js

@@ -85,6 +85,14 @@ const routes = [
           icon: "el-icon-coin",
         },
       },
+      {
+        path: "/imageSettings",
+        component: () =>
+          import(
+            /* webpackChunkName: "tabs" */ "../views/imageSettings/index.vue"
+          ),
+        meta: { title: "图像采集装置设置", icon: "el-icon-picture-outline" },
+      },
       {
         path: "/photoAlarm",
         component: () =>

src/utils/api/index.js

@@ -1,118 +1,5 @@
 import request from "../request";
 
-//登陆接口
-
-export function login(data) {
-  return request({
-    url: "/stritl/login",
-    method: "post",
-    data,
-  });
-}
-//首页数据接口
-export function getLineDataByVoltage(data) {
-  return request({
-    url: "/stritl/main/getLineDataByVoltage",
-    method: "post",
-    data,
-  });
-}
-
-export function getCapturePointDataByDanger(params) {
-  return request({
-    url: "/stritl/main/getCapturePointDataByDanger",
-    method: "post",
-    params,
-  });
-}
-
-export function getHostDeviceDataByVoltage(data) {
-  return request({
-    url: "/stritl/main/getHostDeviceDataByVoltage",
-    method: "post",
-    data,
-  });
-}
-export function getCompanyDeviceInfo(params) {
-  return request({
-    url: "/stritl/main/getCompanyDeviceInfo",
-    method: "get",
-    params,
-  });
-}
-
-export function getPhotoAlarmDataByAlarmType(params) {
-  return request({
-    url: "/stritl/main/getPhotoAlarmDataByAlarmType",
-    method: "post",
-    params,
-  });
-}
-export function getByName(data) {
-  return request({
-    url: "/stritl/inspectionOpinions/getByName",
-    method: "post",
-    data,
-  });
-}
-
-//雷达图数据
-export function getLastYearAlarmReasons(params) {
-  return request({
-    url: "/stritl/main/getLastYearAlarmReasons",
-    method: "get",
-    params,
-  });
-}
-
-export function get1(params) {
-  return request({
-    url: "/get1",
-    method: "get",
-    params,
-  });
-}
-export function get2(params) {
-  return request({
-    url: "/get2",
-    method: "get",
-    params,
-  });
-}
-//图片轮巡 Post请求：
-export function picLoop(data) {
-  return request({
-    url: "/stritl/realData/listCompanyScan",
-    method: "post",
-    data,
-  });
-}
-//预警
-export function list(params) {
-  return request({
-    url: "/stritl/photoAlarm/list",
-    method: "get",
-    params,
-  });
-}
-//获取左侧树状图 http://180.166.218.222:7200/stritl/line/getTreeLineCompany
-
-export function getListCompany(params) {
-  return request({
-    url: "/stritl/line/getTreeLine",
-    method: "post",
-    params,
-  });
-}
-//获取右侧表格
-export function getTowerList(params) {
-  return request({
-    url: "/stritl/towerLogic/getTowerLogicList",
-    method: "get",
-    params,
-  });
-}
-
 //实时监控页面
 //获取线路树状结构
 export function getdyTreeListJoggle(data) {
@@ -319,3 +206,16 @@ export function deleteTerminalJoggle(data) {
     data,
   });
 }
+
+//图像采集装置设置 列表
+export function getImageResolutionListJoggle(data) {
+  return request({
+    url: "/test/getImageResolutionList",
+    method: "post",
+    data,
+  });
+}
+
+//设置图像参数 setImageParams
+
+//查询图像分辨率 getImageParams

src/views/components/carouselChart.vue

@@ -41,18 +41,9 @@
         <img :src="item.path" alt="" />
         <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
           {{ $moment(item.photoTime).format("HH:mm:ss") }}
+          <span>(通道{{ item.channelId }})</span>
         </p>
       </swiper-slide>
-      <!-- <div
-        v-if="terminalPhoto.length !== 1"
-        class="swiper-button-next swiper-button-white"
-        slot="button-next"
-      ></div>
-      <div
-        v-if="terminalPhoto.length !== 1"
-        class="swiper-button-prev swiper-button-white"
-        slot="button-prev"
-      ></div> -->
     </swiper>
   </div>
 </template>
@@ -74,22 +65,23 @@ export default {
   data() {
     return {
       swiperOptionTop: {
-        // loop: true,
-        loopedSlides: 5, // looped slides should be the same
         spaceBetween: 10,
+        //loop: true,
+        freeMode: true,
+        // loopedSlides: 4,
         navigation: {
           nextEl: ".swiper-button-next",
           prevEl: ".swiper-button-prev",
         },
       },
       swiperOptionThumbs: {
-        //loop: true,
-        loopedSlides: 5, // looped slides should be the same
         spaceBetween: 10,
         centeredSlides: true,
         slidesPerView: "auto",
         touchRatio: 0.2,
         slideToClickedSlide: true,
+        //loop: true,
+        //loopedSlides: 4,
       },
     };
   },
@@ -171,7 +163,7 @@ export default {
       padding: 8px 0px;
       font-size: 14px;
       text-align: center;
-      color: @color-text-primary;
+      color: #333;
     }
   }
 

src/views/devicePhotoSchedule/components/setdevice.vue

@@ -4,7 +4,7 @@
     title="设置"
     :visible.sync="isShow"
     :close-on-click-modal="false"
-    width="40%"
+    width="480px"
   >
     <!-- <el-form
       label-position="left"
@@ -153,9 +153,19 @@ export default {
 </script>
 <style lang="less">
 .photoSetDialog {
+  .el-dialog__body {
+    // height: 360px;
+    // overflow: auto;
+  }
+
   .flexnr {
+    height: 360px;
+    overflow: auto;
     display: flex;
     align-items: flex-start;
+    .el-tree {
+      flex: 1;
+    }
   }
   .w50 {
     width: 50px;

src/views/imageSettings/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="imageSettings">
+    <div class="imageSetBox">
+      <div class="imageSetBtnGroup">
+        <el-button type="primary" icon="el-icon-plus">新增</el-button>
+      </div>
+      <div class="imageSetTable">
+        <el-table
+          ref="multipleTable"
+          :data="imageTableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+        >
+          <el-table-column
+            label="通道名称"
+            show-overflow-tooltip
+            prop="channelname"
+          ></el-table-column>
+          <el-table-column
+            label="分辨率高"
+            show-overflow-tooltip
+            prop="maxResolutionHeight"
+          ></el-table-column>
+          <el-table-column
+            label="分辨率宽"
+            show-overflow-tooltip
+            prop="maxResolutionWidth"
+          ></el-table-column>
+
+          <el-table-column fixed="right" label="操作" width="200">
+            <template slot-scope="scope">
+              <el-button type="text">设置图像参数</el-button>
+              <el-button type="text" class="deleteText"
+                >查询图像分辨率</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pageNation">
+          <el-pagination
+            :current-page="page"
+            :page-size="pageSize"
+            layout=" prev, pager, next, jumper,total"
+            :total="total"
+            background
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getImageResolutionList } from "@/utils/api/index";
+
+export default {
+  components: {},
+  data() {
+    return {
+      imageTableData: [
+        {
+          id: 1,
+          channelname: "通道1",
+          status: 1,
+          maxResolutionWidth: 1200,
+          maxResolutionHeight: 1200,
+        },
+      ],
+
+      page: 1, // 当前页数
+      pageSize: 10, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {},
+  methods: {
+    //获取线路列表数据
+  },
+};
+</script>
+<style lang="less">
+.imageSettings {
+  width: calc(100% - 32px);
+  height: calc(100% - 32px);
+  padding: 16px 16px;
+  background: @color-white;
+  .imageSetBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 32px);
+    padding: 16px;
+    border-radius: 4px;
+  }
+  .imageSetBtnGroup {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .imageSetTable {
+    margin-top: 16px;
+    height: calc(100% - 48px);
+    //background: #fcc;
+  }
+}
+</style>

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

@@ -27,7 +27,6 @@
       </el-form-item>
       <el-form-item label="是否带云台：" prop="hasPan" required>
         <!-- <el-input v-model="formInfo.hasPan"></el-input> -->
-
         <el-radio-group v-model="formInfo.hasPan">
           <el-radio :label="0">否</el-radio>
           <el-radio :label="1">是</el-radio>
@@ -103,7 +102,7 @@ export default {
           { required: true, message: "请输入杆塔编号", trigger: "blur" },
         ],
         hasPan: [
-          { required: true, message: "请输入是否带云台", trigger: "blur" },
+          { required: true, message: "请输入是否带云台", trigger: "change" },
         ],
 
         // equipName: [
@@ -160,6 +159,7 @@ export default {
                 console.log(res);
                 this.$emit("photoDialogClose", 1); //关闭弹窗
                 this.formArr = [];
+
                 this.$message.success("添加成功");
               })
               .catch((err) => {

src/views/realTimeMonitor/components/setschedule.vue

@@ -4,9 +4,9 @@
     title="时间表设置"
     :visible.sync="isShow"
     :close-on-click-modal="false"
-    width="60%"
+    width="680px"
   >
-    <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
       <el-tab-pane label="查询实际时间表" name="1">
         <div class="flexnr">
           <div class="w8">通道:</div>
@@ -65,7 +65,7 @@
               label="备注"
               show-overflow-tooltip
             ></el-table-column>
-            <el-table-column fixed="right" label="操作" width="200">
+            <el-table-column fixed="right" label="操作">
               <template slot-scope="scope">
                 <el-button type="text" @click.native.stop="handleSet(scope.row)"
                   >设置</el-button
@@ -86,14 +86,19 @@
           </div>
         </div>
         <el-dialog
-          class="addLineDialog"
+          class="setRoadDialog"
           title="设置"
           :visible.sync="isShowset"
           :close-on-click-modal="false"
-          width="40%"
+          width="480px"
           append-to-body
         >
-          <el-form label-position="left" ref="formInfo" label-width="100px">
+          <el-form
+            label-position="left"
+            ref="formInfo"
+            label-width="100px"
+            v-loading="loading"
+          >
             <el-form-item label="通道：">
               <el-tree
                 :data="listnr"
@@ -128,6 +133,7 @@ export default {
   },
   data() {
     return {
+      loading: true,
       isShow: false,
       isShowset: false,
       activeName: "1", //选项卡
@@ -174,6 +180,7 @@ export default {
           this.$message.success("查询成功");
           // this.shedulenr = res.data.list.join("; ")
           this.shedulenr = res.data.list;
+          this.loading = false;
         })
         .catch((err) => {
           this.$message.error("查询失败");
@@ -188,6 +195,7 @@ export default {
         .then((res) => {
           this.deviceTableData = res.data.list;
           this.total = res.data.total;
+          this.loading = false;
         })
         .catch((err) => {});
     },
@@ -198,11 +206,13 @@ export default {
     },
     //设置-获取所有通道
     handleSet(val) {
+      this.loading = true;
       this.scheduleid = val.id;
       this.isShowset = true;
       getScheduleRulelAccessList({ termid: this.selfacilityId })
         .then((res) => {
           this.listnr = res.data.list;
+          this.loading = false;
         })
         .catch((err) => {});
     },
@@ -273,21 +283,30 @@ export default {
 </script>
 <style lang="less">
 .setTimeDialog {
+  .el-tabs__content {
+    height: 280px;
+    overflow: auto;
+    .el-tab-pane {
+      height: calc(100% - 16px);
+    }
+  }
   .flexonly {
     display: flex;
     flex-wrap: wrap;
   }
   .flexno {
     display: flex;
-    margin-top: 25px;
+    margin-top: 24px;
+    padding: 0px 8px;
   }
   .flexnr {
     display: flex;
     align-items: center;
-    margin-top: 25px;
+    margin-top: 16px;
+    padding: 0px 8px;
   }
   .mt10 {
-    margin-top: 10px;
+    margin-bottom: 10px;
   }
   .mr10 {
     margin-right: 10px;
@@ -306,7 +325,17 @@ export default {
   }
   .deviceTable {
     padding: 16px 8px 0 8px;
-    height: calc(100% - 80px);
+    height: calc(100% - 16px);
+  }
+}
+.setRoadDialog {
+  .el-dialog__body {
+    height: 280px;
+    overflow: auto;
+    .el-form {
+      height: 100%;
+      //background: #fcc;
+    }
   }
 }
 </style>

src/views/realTimeMonitor/index.vue

@@ -14,11 +14,16 @@
           :current-node-key="currentNodekey"
         >
           <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span v-if="data.list" class="iconfont icon-dianli"> </span>
+            <span v-if="node.level === 1" class="iconfont icon-dianli"></span>
             <span
-              v-else
+              v-else-if="data.list && node.level !== 1"
               class="iconfont icon-dianlihangye"
-              style="margin-right: 3px"
+            >
+            </span>
+            <span
+              v-else
+              class="iconfont icon-video-camera"
+              style="margin-right: 6px"
             ></span>
             <span>{{ node.label }}</span>
           </span>
@@ -60,6 +65,22 @@
               </el-option>
             </el-select>
           </div>
+          <!-- <div class="GPSItemBox">
+            <h3>当前GPS状态</h3>
+            <el-select
+              v-model="channelValue"
+              placeholder="请选择"
+              @change="changeChannelId"
+            >
+              <el-option
+                v-for="item in channelOption"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div> -->
           <div class="setTimebtn">
             <h3>操作项</h3>
             <div class="buttonGroup">
@@ -67,7 +88,7 @@
                 >时间表设置</el-button
               >
               <el-button type="primary" @click="handleShowErr"
-                >主动拍照</el-button
+                >手动拍照</el-button
               >
               <el-button type="primary" @click="handleShowErr"
                 >获取GPS位置</el-button
@@ -76,18 +97,17 @@
                 >装置复位</el-button
               >
 
-              <el-button type="primary" @click="handlePanel"
+              <!-- <el-button type="primary" @click="handlePanel"
                 >图片标记</el-button
-              >
+              > -->
-
+              <!-- <el-button type="primary" @click="handleShowErr"
-              <el-button type="primary" @click="handleShowErr"
                 >监拍点信息</el-button
-              >
+              > -->
               <el-button type="primary" @click="handleShowErr">
                 装置信息</el-button
               >
               <el-button type="primary" @click="handleUpGrade"
-                >装置升级</el-button
+                >远程升级</el-button
               >
             </div>
           </div>
@@ -315,6 +335,11 @@ export default {
       overflow: auto;
       padding: 16px 0px;
       .el-tree {
+        .custom-tree-node {
+          .iconfont {
+            // color: #666;
+          }
+        }
         .el-tree-node__content {
           height: 40px;
           font-size: 12px;
@@ -350,7 +375,8 @@ export default {
       position: relative;
       .monitorItemBox,
       .paramsDate,
-      .setTimebtn {
+      .setTimebtn,
+      .GPSItemBox {
         margin-bottom: 16px;
         h3 {
           font-size: 14px;