新版调整

src/components/Combinations/toolBar/toolBar.scss

@@ -57,7 +57,7 @@
     justify-content: flex-start;
     position: absolute;
     top: 54px;
-    right: 1px;
+    right: 38px;
     margin: 5px 0 0 5px;
     // background: url(/static/images/bigscreen/filter-bg.png) no-repeat;
     background-size: cover;

src/components/Viewer/smViewer.scss

@@ -30,12 +30,13 @@
 
 .cesiumbtn {
     position: absolute;
-    right: 30px;
-    top: 30px;
+    right: 15px;
+    top: 8px;
     color: #51E9FF;
-    font-size: 24px;
+    font-size: 20px;
     z-index: 98;
     cursor: pointer;
+    z-index: 9999;
 }
 
 .cesium-viewer-timelineContainer {

src/router/index.js

@@ -47,6 +47,11 @@ export const constantRoutes = [{
         component: () =>
             import('@/views/viewer.vue'),
         hidden: true
+    }, {
+        path: '/overview1',
+        component: () =>
+            import('@/views/overview1.vue'),
+        hidden: true
     },
     {
         path: '/checkmodel',

src/store/store.js

@@ -36,6 +36,7 @@ var store2 = {
         sceneLayerlist: [],
         flattenNames: [],//存储压平的名称数组
         cockpit_date: null,
+        viewer_flag : true,
         cockpit_hysy: {
             text: {
                 xzqhdm_number: 0,
@@ -196,6 +197,8 @@ var store2 = {
         this.state.cockpit_date = newValue;
     }, setCockpitGkzb(newValue) {
         this.state.cockpit_gkzb = newValue;
+    },setViewerFlagb(newValue) {
+        this.state.viewer_flag = newValue;
     },
 }
 

src/views/cockpitNew1/hysy.vue

@@ -405,7 +405,7 @@ export default {
     border-width: 0px;
     position: absolute;
     left: 1rem;
-    top: 44rem;
+    top: 35.7rem;
     width: 416px;
     height: 310px;
     display: flex;

src/views/cockpitNew1/tdsc.vue

@@ -632,7 +632,7 @@ export default {
   border-width: 0px;
   position: absolute;
   left: 1rem;
-  top: 24rem;
+  top: 19rem;
   width: 416px;
   height: 310px;
   border-width: 0px;

src/views/map3d.vue

@@ -138,15 +138,15 @@ export default {
     handleMenuSelect(item) {
       this.$router.push({ path: item });
 
-      if (item == "/checkmodel") {
-        store.setToolBarShow(true); //显示工具栏
-        // this.$refs.routeViewRef["switch"]();
+      // if (item == "/checkmodel") {
+      //   store.setToolBarShow(true); //显示工具栏
+      //   // this.$refs.routeViewRef["switch"]();
 
-      } else {
-        store.setToolBarShow(false); //显示工具栏
-        // this.$refs.routeViewRef["switch"]();
+      // } else {
+      //   store.setToolBarShow(false); //显示工具栏
+      //   // this.$refs.routeViewRef["switch"]();
 
-      }
+      // }
 
 
 

src/views/overview1.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="overview">
+        <!-- <div class="innerContainer leftPane">驾驶舱</div> -->
+        <div class="innerContainer leftPane"
+            :class="{ 'leftPaneAnimationDown': isleftPaneAnimationDown, 'leftPaneAnimationUp': isleftPaneAnimationUp }">
+            <!-- <QYGH />
+            <ZRZY />
+            <KCZY /> -->
+            <div class="leftPanePackUp" @click="switchPack_down">
+            </div>
+        </div>
+
+        <div class="innerContainer rightPane"
+            :class="{ 'rightPaneAnimationUp': iSRightPaneAnimationUp, 'rightPaneAnimationDown': isRightPaneAnimationDown, }">
+            <!-- <DXGL />
+            <GDBH />
+            <JCJG /> -->
+            <div class="rightPanePackUp" @click="switchPack_up">
+            </div>
+        </div>
+
+    </div>
+</template>
+  
+<script>
+// import QYGH from './homepage/qygh.vue';
+// import ZRZY from './homepage/zrzy.vue';
+// import KCZY from './homepage/kczy.vue';
+// import DXGL from './homepage/dxgl.vue';
+// import GDBH from './homepage/gdbh.vue';
+// import JCJG from './homepage/jcjg.vue';
+
+export default {
+    name: "overview1",
+    components: {
+        // QYGH,
+        // DXGL,
+        // ZRZY,
+        // KCZY,
+        // GDBH,
+        // JCJG
+    },
+    data() {
+        return {
+            iSRightPaneAnimationUp: false,
+            isRightPaneAnimationDown: false,
+            isleftPaneAnimationDown: false,
+            isleftPaneAnimationUp: false
+        };
+    },
+    created() { },
+    methods: {
+        switchPack_down() {
+            // 右侧动画控制
+            this.iSRightPaneAnimationUp = !this.iSRightPaneAnimationUp;
+            this.isRightPaneAnimationDown = false;
+            // 动画完成之后，修改位置
+            setTimeout(() => {
+                let dom = document.getElementsByClassName('rightPane')[0];
+                dom.style.right = '-360px';
+            }, 600);
+
+            // 左侧控制
+            this.isleftPaneAnimationDown = !this.isleftPaneAnimationDown;
+            this.isleftPaneAnimationUp = false;
+
+            setTimeout(() => {
+                let leftPane = document.getElementsByClassName('leftPane')[0];
+                leftPane.style.left = '-360px';
+            }, 600);
+        },
+        switchPack_up() {
+            // 右侧动画控制
+            this.isRightPaneAnimationDown = !this.isRightPaneAnimationDown;
+            this.iSRightPaneAnimationUp = false;
+            // 动画完成之后，修改位置
+            setTimeout(() => {
+                let rightPane = document.getElementsByClassName('rightPane')[0];
+                rightPane.style.right = '10px';
+            }, 600);
+
+            // 左侧控制
+            this.isleftPaneAnimationDown = false;
+            this.isleftPaneAnimationUp = !this.isleftPaneAnimationUp;
+            setTimeout(() => {
+                let leftPane = document.getElementsByClassName('leftPane')[0];
+                leftPane.style.left = '10px';
+            }, 600);
+        },
+
+
+    },
+};
+</script>
+  
+<style lang="scss" scoped>
+.overview {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.innerContainer {
+    width: 350px;
+    height: calc(100% - 20px);
+    position: absolute;
+    background-image: url("/static/images/homepage/00-底框.png");
+    background-size: 100% 100%;
+    z-index: 99;
+    top: 10px;
+    // writing-mode: vertical-lr;
+    text-align: center;
+    // font-size: 73px;
+    // line-height: 350px;
+    color: red;
+}
+
+.leftPane {
+    left: 10px;
+
+
+}
+
+.rightPane {
+    right: 10px;
+}
+
+// 右侧面板收起动画
+@keyframes rightPaneAnimation-packUp {
+
+    from {
+        right: 10px;
+
+    }
+
+    to {
+        right: -360px;
+    }
+}
+
+
+
+.rightPaneAnimationUp {
+    animation: rightPaneAnimation-packUp 0.5s linear 0.5s forwards;
+    animation-iteration-count: 1;
+}
+
+// 右侧面板放开动画
+@keyframes rightPaneAnimation-packDown {
+    from {
+        right: -360px;
+    }
+
+    to {
+        right: 10px;
+
+    }
+
+
+}
+
+
+
+.rightPaneAnimationDown {
+    animation: rightPaneAnimation-packDown 0.5s linear 0.5s forwards;
+    animation-iteration-count: 1;
+}
+
+// 左侧面板收起
+@keyframes leftPaneAnimation-Down {
+    from {
+        left: 10px;
+    }
+
+    to {
+        left: -360px;
+
+    }
+
+
+}
+
+
+
+.leftPaneAnimationDown {
+    animation: leftPaneAnimation-Down 0.5s linear 0.5s forwards;
+    animation-iteration-count: 1;
+}
+
+// 左侧面板打开
+@keyframes leftPaneAnimation-up {
+    from {
+        left: -360px;
+
+    }
+
+    to {
+        left: 10px;
+
+    }
+
+
+}
+
+
+
+.leftPaneAnimationUp {
+    animation: leftPaneAnimation-up 0.5s linear 0.5s forwards;
+    animation-iteration-count: 1;
+}
+
+.leftPanePackUp {
+    width: 25px;
+    height: 25PX;
+    min-height: 50px;
+    background-image: url("/static/images/homepage/packDown.png");
+    background-size: 100% 100%;
+    position: absolute;
+    left: 103%;
+    z-index: 11111;
+    top: 50%;
+}
+
+.rightPanePackUp {
+    width: 25px;
+    height: 25PX;
+    min-height: 50px;
+    // background-image: url("/static/images/homepage/packUp.png");
+    background-image: url("/static/images/homepage/packDown.png");
+
+    background-size: 100% 100%;
+    position: absolute;
+    left: -10%;
+    z-index: 11111;
+    top: 50%;
+}
+</style>
+  

src/views/viewer.vue

@@ -1,20 +1,25 @@
 <template>
-    <div v-show="flag" class="viewer">
-        <div class="bg">
-            <div class="bg_left"></div>
-            <div class="bg_right"></div>
-            <div class="bg_bottom"></div>
+    <div>
+        <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
+            @click="bigViewerChange"></i>
+        <div v-show="store.state.viewer_flag" class="viewer">
+            <div class="bg">
+
+                <div class="bg_left"></div>
+                <div class="bg_right"></div>
+                <div class="bg_bottom"></div>
+            </div>
+            <datePicker @dateChange="dateChange"></datePicker>
+            <ser-center></ser-center>
+            <GKZB ref="gkzb_ref" />
+            <BJXM />
+            <TDSC />
+            <HYSY ref="hysy_ref" />
+            <TDSY />
+            <GDBH ref="gdbh_ref" />
+            <STXF ref="stxf_ref" />
+            <WPJG ref="wpjg_ref" />
         </div>
-        <datePicker @dateChange="dateChange"></datePicker>
-        <ser-center></ser-center>
-        <GKZB ref="gkzb_ref"/>
-        <BJXM />
-        <TDSC />
-        <HYSY ref="hysy_ref" />
-        <TDSY />
-        <GDBH ref="gdbh_ref" />
-        <STXF ref="stxf_ref" />
-        <WPJG ref="wpjg_ref" />
     </div>
 </template>
 
@@ -55,6 +60,10 @@ export default {
     watch: {},
     //方法集合
     methods: {
+        bigViewerChange() {
+            store.setViewerFlagb(!store.state.viewer_flag);
+            store.setToolBarShow(!store.state.viewer_flag)
+        },
         switch() {
             this.flag = !this.flag;
         },
@@ -202,9 +211,9 @@ export default {
                             const name = pickObj.id.properties.name.getValue();
                             const address = pickObj.id.properties.adcode.getValue();
                             const center = pickObj.id.properties.centroid.getValue();
-                            store.state.regional_information={
-                                id:address,
-                                name:name,
+                            store.state.regional_information = {
+                                id: address,
+                                name: name,
                             }
                             // 选中状态
                             pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
@@ -388,14 +397,16 @@ export default {
 };
 </script>
 <style  scoped lang="scss" >
-.viewer{
+.viewer {
     width: 100%;
     height: 100%;
 }
-.bg{
+
+.bg {
     width: 100%;
     height: 100%;
-    .bg_left{
+
+    .bg_left {
         width: 21.6%;
         height: 100%;
         position: absolute;
@@ -403,7 +414,8 @@ export default {
         z-index: 100;
         background: linear-gradient(to right, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
     }
-    .bg_right{
+
+    .bg_right {
         width: 21.6%;
         height: 100%;
         position: absolute;
@@ -411,13 +423,15 @@ export default {
         z-index: 100;
         background: linear-gradient(to left, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
     }
-    .bg_bottom{
-        width: 100%;// 56.8%;
+
+    .bg_bottom {
+        width: 100%; // 56.8%;
         height: 30%;
         position: absolute;
         // left: 21.6%;
-        bottom:0;
+        bottom: 0;
         z-index: 100;
         background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
     }
-}</style>
+}
+</style>