左右bar缩放完成

zh-baseversion-web/src/components/bigWindow/rightBar.vue

@@ -1151,6 +1151,7 @@ export default {
 .rightb {
   width: 98%;
   height: 100%;
+ 
 }
 .rightbar1 {
   width: 90%;
@@ -1161,7 +1162,7 @@ export default {
 .rightbar2 {
   width: 76%;
   height: 37%;
-  padding-top: 15px;
+  padding-top: 30px;
   margin-left: 20%;
   pointer-events: auto;
 }

zh-baseversion-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2023-07-12 17:13:16
- * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2024-07-13 16:22:48
+ * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
 -->
 <template>
-  <div class="home bigwindow" @click='windowClick'>
+  <div class="home bigwindow" @click="windowClick">
     <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
     <div id="map"></div>
     <!-- <Center :show="show" :centerData="centerData" /> -->
@@ -30,7 +30,10 @@
       :pageSize="20"
     />
     <PipeColor />
-    <PipeSelect @transmit="getPipeSelectMessage"  @closeMediumPressureLine="clearBigWindowsSelectPipe"/>
+    <PipeSelect
+      @transmit="getPipeSelectMessage"
+      @closeMediumPressureLine="clearBigWindowsSelectPipe"
+    />
 
     <!-- 底部按钮 -->
     <!-- <div class="home-div">
@@ -54,7 +57,7 @@
         </div>
       </div>
     </div> -->
-    <Bottom v-if="enterpriseId==-2" @listChange="listChange" ref='Bottom'/>
+    <Bottom v-if="enterpriseId == -2" @listChange="listChange" ref="Bottom" />
     <!-- 设备按钮 -->
     <div class="typelist-div">
       <div
@@ -83,18 +86,21 @@
     <!-- 头部 -->
     <div class="banner-test">
       <!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
-      <img  v-if="this.enterpriseId==-2" src="../../assets/images/zibk.png" alt="" />
+      <img
+        v-if="this.enterpriseId == -2"
+        src="../../assets/images/zibk.png"
+        alt=""
+      />
       <img v-else src="../../assets/images/20230805152711.png" alt="" />
-
     </div>
 
     <!-- 左边 -->
-    <div class="leftbar">
+    <div class="leftbar" :style="changeLeftBarStyle">
       <leftBar ref="mychild2"></leftBar>
     </div>
 
     <!-- 右边 -->
-    <div class="rightbar">
+    <div class="rightbar" :style="changeRightBarStyle">
       <rightBar ref="mychild"></rightBar>
     </div>
     <!-- <img src="../../assets/images/leftbk.svg" alt=""> -->
@@ -150,7 +156,11 @@
 import { EditorMap } from "@/utils/mapClass/map";
 import { mapGetters, mapActions } from "vuex";
 import { listDetectorInfo } from "@/api/detector/detectorInfo";
-import { detectorUserList,massMarksDetectorUserList,labelsLayerMarksDetectorUserList } from "@/api/detector/detectorUser";
+import {
+  detectorUserList,
+  massMarksDetectorUserList,
+  labelsLayerMarksDetectorUserList,
+} from "@/api/detector/detectorUser";
 import {
   pipeData,
   tiaoyaxiang,
@@ -171,7 +181,7 @@ import {
   userAlarm,
   getTcqDevice,
   getYhq,
-  deviceUser
+  deviceUser,
 } from "@/api/bigWindow/getDevice";
 import Line from "@/components/bigWindow/Line.vue";
 import VideoView from "@/components/bigWindow/VideoView.vue";
@@ -190,9 +200,9 @@ import { getUserProfile } from "@/api/system/user";
 import leftBar from "@/components/bigWindow/leftBar.vue";
 import rightBar from "@/components/bigWindow/rightBar.vue";
 import Bottom from "./components/Bottom.vue";
-import { mapState } from 'vuex'
-import MediumPressureLineVue from '../../components/bigWindow/MediumPressureLine.vue';
-import PipeSelect from '../../components/bigWindow/PipeSelect.vue';
+import { mapState } from "vuex";
+import MediumPressureLineVue from "../../components/bigWindow/MediumPressureLine.vue";
+import PipeSelect from "../../components/bigWindow/PipeSelect.vue";
 export default {
   name: "Home",
   components: {
@@ -217,6 +227,8 @@ export default {
       nowDate: "",
       nowweek: "",
       nowtime: "", // 当前日期
+      changeRightBarStyle: "",
+      changeLeftBarStyle: "",
       typeList: [
         {
           val: 1,
@@ -300,7 +312,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(["company", "systemSetting","enterpriseId"]),
+    ...mapGetters(["company", "systemSetting", "enterpriseId"]),
     companyLength() {
       return this.typeList.length;
     },
@@ -313,6 +325,12 @@ export default {
       }
     },
   },
+  created() {
+    window.addEventListener("resize", this.leftRightBarChange);
+    this.leftRightBarChange();
+    // changeRightBarStyle
+  },
+
   async mounted() {
     // console.log(99999999999999)
     //   getPipe().then(res=>{
@@ -334,10 +352,10 @@ export default {
       this
     );
 
-    getUserProfile().then(response => {
+    getUserProfile().then((response) => {
       var user = response.data;
-        if(user.deptId ==13){
-          this.map.setCenter(["117.908541","39.688353"])
+      if (user.deptId == 13) {
+        this.map.setCenter(["117.908541", "39.688353"]);
       }
     });
 
@@ -369,22 +387,32 @@ export default {
       await this.goMap(getEnterprise, this.addDevice, Company, true);
       // this.goMap(getPipe, this.addPipeLine, Line, true);
       //管道
-      this.goMediumPressureLineMap(getPipe, this.addMediumPipeLine, Line,MediumPressureLineVue, true);
+      this.goMediumPressureLineMap(
+        getPipe,
+        this.addMediumPipeLine,
+        Line,
+        MediumPressureLineVue,
+        true
+      );
       //调压箱
       this.labelsLayerMarksTysGoMap(getTyx, Device, false);
       //阀门井
       this.labelsLayerMarksFmjGoMap(getFm, Device, false);
       //场站
-      this.labelsLayerMarksCzGoMap(getCz,Cz, false);
+      this.labelsLayerMarksCzGoMap(getCz, Cz, false);
       //监控
-      this.labelsLayerMarksVideoGoMap(getVideo,VideoView, false);
+      this.labelsLayerMarksVideoGoMap(getVideo, VideoView, false);
       //this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图
-      if (this.enterpriseId==-2){
+      if (this.enterpriseId == -2) {
         this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图
       }
 
       // 用户要等一下 因为有报警数据
-      this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => {
+      this.labelsLayerMarksDetectorUserGoMap(
+        labelsLayerMarksDetectorUserList,
+        User,
+        false
+      ).then((res) => {
         // 先查一下，然后开启定时器
         this.userAlarm();
         this.alarmTimer = setInterval(() => {
@@ -403,17 +431,42 @@ export default {
     ...mapActions({
       GetCompany: "bigWindowCompany/GetCompany",
     }),
-    windowClick(){
+    leftRightBarChange() {
+
+      const scale = window.innerHeight / 1080;
+      let right = 0;
+      if (scale >= 1) {
+        right = (585 / 2) * (scale - 1) - 20;  
+      } else {
+        right = (585 / 2) * (scale - 1) - 20;
+      }
+
+      // console.log("right", right, "scale", scale);
+      this.changeRightBarStyle = [
+        { right: right + "px" },
+        { transform: `scale(${scale})` },
+      ];
+      this.changeLeftBarStyle = [
+        { left: right + 20 + "px" },
+        { transform: `scale(${scale})` },
+      ];
+    },
+    windowClick() {
       this.$refs.Bottom.selectUpClear();
     },
     // 点击了 大屏端 管道搜索的清除键
-    clearBigWindowsSelectPipe(){
+    clearBigWindowsSelectPipe() {
       this.map.infowindowClose();
     },
-    getPipeSelectMessage(data,id) {
-      let arrArea = data.split(',');
-      this.map.setCenter([arrArea[0],arrArea[1]])
-      this.map.filterSelectPipe(id,MediumPressureLineVue,arrArea[0],arrArea[1]);
+    getPipeSelectMessage(data, id) {
+      let arrArea = data.split(",");
+      this.map.setCenter([arrArea[0], arrArea[1]]);
+      this.map.filterSelectPipe(
+        id,
+        MediumPressureLineVue,
+        arrArea[0],
+        arrArea[1]
+      );
     },
     // 管道上图
     addPipeLine(data, component) {
@@ -424,10 +477,10 @@ export default {
       }
     },
     // 管道上图
-    addMediumPipeLine(data, component,mediumComponent) {
+    addMediumPipeLine(data, component, mediumComponent) {
       for (let comp in data) {
         data[comp].forEach((pipe) => {
-          this.map.addMediumPipeLine(pipe, component,mediumComponent);
+          this.map.addMediumPipeLine(pipe, component, mediumComponent);
         });
       }
     },
@@ -461,7 +514,13 @@ export default {
         });
       }
     },
-    goMediumPressureLineMap(httpFunc, addFunc, component,mediumComponent, show){
+    goMediumPressureLineMap(
+      httpFunc,
+      addFunc,
+      component,
+      mediumComponent,
+      show
+    ) {
       return httpFunc().then((res) => {
         // 给用户加icontype
         if (res.data && !res.data[0].iconType) {
@@ -482,46 +541,41 @@ export default {
         } else {
           config = { data: res.data || res.rows };
         }
-        addFunc(config, component, mediumComponent,show);
+        addFunc(config, component, mediumComponent, show);
         return config.iconType;
       });
     },
 
-    labelsLayerMarksDeviceUserGoMap(httpFunc,component,show){
+    labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
         this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
-      })
-    }
-    ,
-    labelsLayerMarksVideoGoMap(httpFunc,component,show){
+      });
+    },
+    labelsLayerMarksVideoGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
         this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
-      })
-    }
-    ,
-    labelsLayerMarksCzGoMap(httpFunc,component,show){
+      });
+    },
+    labelsLayerMarksCzGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
         this.map.labelsLayerMarksCzGoMap(mapData, component, show);
-      })
-    }
-    ,
-    labelsLayerMarksFmjGoMap(httpFunc,component,show){
+      });
+    },
+    labelsLayerMarksFmjGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
         this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
-      })
-    }
-    ,
-    labelsLayerMarksTysGoMap(httpFunc,component,show){
+      });
+    },
+    labelsLayerMarksTysGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
         this.map.labelsLayerMarksTysGoMap(mapData, component, show);
-      })
-    }
-    ,
+      });
+    },
     labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
       return httpFunc().then((res) => {
         const mapData = res.data;
@@ -572,9 +626,9 @@ export default {
     // },
     // 更改下方列表
     listChange(arr) {
-      console.log(arr)
+      console.log(arr);
       // return;
-      this.selarr=[...arr]
+      this.selarr = [...arr];
       this.map.allfilter(this.selarr, this.selarr1);
       this.map.infowindowClose();
       this.show = false;
@@ -653,7 +707,6 @@ export default {
     getTcqDevice(queryParams, title) {
       console.log(queryParams);
       return getTcqDevice(queryParams).then((res) => {
-
         this.detcetorList = res;
         this.centerUserId = queryParams.devId;
         // 总数据
@@ -700,6 +753,7 @@ export default {
   },
   // 销毁定时器
   beforeDestroy() {
+    window.removeEventListener("resize",this.leftRightBarChange);
     if (this.formatDate) {
       clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
     }
@@ -755,9 +809,13 @@ export default {
 
 .leftbar {
   width: 565px;
-  height: 93%;
+  // height: 93%;
+  height: 1010px;
+
   position: fixed;
-  top: 70px;
+  // top: 70px;
+  top: 50%;
+  margin-top: -470px;
   z-index: 999;
   background: url("../../assets/firstimage/le.png");
   background-size: 105% 100%;
@@ -767,15 +825,15 @@ export default {
 }
 .rightbar {
   width: 585px;
-  height: 93%;
+  height: 1010px;
   position: fixed;
-  top: 70px;
+  top: 50%;
+  margin-top: -470px;
   z-index: 999;
-  right: 0;
+  // right: 861px;
   background: url("../../assets/firstimage/ri.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  margin-right: -20px;
   pointer-events: none;
 }
 .home-div {

zh-baseversion-web/vue.config.js

@@ -35,8 +35,9 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
 
-        target: `http://localhost:8905/gassafety`,
+        // target: `http://localhost:8905/gassafety`,
         // target: `http://27.128.233.145:8905/gassafety`,
+        target: ` http://36.138.180.82:8905/gassafety`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''