配置大屏左侧

gassafetyprogress-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2022-08-22 14:15:59
+ * @LastEditTime: 2022-08-23 17:04:59
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
@@ -85,8 +85,10 @@
     </div>
 
     <!-- 左边 -->
-    <div class="leftbar">
-      <leftBar ref="mychild2"></leftBar>
+    <div class="leftbar" :style="{width:windowInnerWidth>1024?'470px':'300px'}">
+      <leftBar v-if="windowInnerWidth>1024" ref="mychild2"></leftBar>
+      <leftBarZ v-else ref="mychild2"></leftBarZ>
+
     </div>
     <!-- 右边 -->
     <div class="rightbar">
@@ -179,11 +181,13 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
 
 // import markerInfoWindow from './components/markerInfoWindow.vue'
 import leftBar from "@/components/bigWindow/leftBar.vue";
+import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
 import rightBar from "@/components/bigWindow/rightBar.vue";
 export default {
   name: "Home",
   components: {
     leftBar,
+    leftBarZ,
     rightBar,
     // Center,
     UserCenter,
@@ -268,6 +272,7 @@ export default {
 
       // 报警轮询timer
       alarmTimer: null,
+      windowInnerWidth:0,
     };
   },
 
@@ -285,6 +290,9 @@ export default {
       }
     },
   },
+  created() {
+    this.windowInnerWidth = window.innerWidth;
+  },
   async mounted() {
     // console.log(99999999999999)
     //   getPipe().then(res=>{
@@ -293,7 +301,6 @@ export default {
     //   console.log(123)
     // })
     // return;
-
     const path = eval(this.systemSetting.map_center);
     this.map = new EditorMap(
       "map",
@@ -351,11 +358,11 @@ export default {
     }),
     // 管道上图
     addPipeLine(data, component) {
-          console.log('zzzzzzsssssxxxxzxzxzxzxzxzxz')
+      console.log("zzzzzzsssssxxxxzxzxzxzxzxzxz");
 
       for (let comp in data) {
         data[comp].forEach((pipe) => {
-          console.log(pipe)
+          console.log(pipe);
           this.map.addPipeLine(pipe, component);
         });
       }
@@ -587,8 +594,9 @@ export default {
 }
 
 .leftbar {
-  width: 450px;
-  height: 90%;
+  width: 300px;
+  overflow: hidden;
+  height: calc(100vh - 85px);
   position: fixed;
   top: 10%;
   left: 0;
@@ -711,7 +719,7 @@ export default {
   box-shadow: inset 0px 1px 2px 1px #125c9b;
   font-size: 14px;
 }
-.list img{
+.list img {
   width: 22px;
 }
 </style>