综合分析页面样式以及左右面板部分内容调整

src/components/layout/Header.vue

@@ -6,7 +6,12 @@
         <div class="title">浦 东 新 区 资 源 环 境 智 慧 审 计 平 台</div>
       </el-col>
       <el-col :span="12">
-        <el-menu :default-active="getActiveIndex()" class="el-menu-demo" mode="horizontal" @select="select">
+        <el-menu
+          :default-active="getActiveIndex()"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="select"
+        >
           <el-menu-item index="1">首页</el-menu-item>
           <el-submenu index="2">
             <template slot="title" class="submenu">疑点筛查</template>
@@ -28,9 +33,14 @@
       </el-col>
       <el-col :span="3">
         <div class="user">
-          <div class="alert-icon"></div>
-          <div class="admin-icon"></div>
-          <div class="inner-user">user</div>
+          <div class="manage-icon"></div>
+          <div class="alert-icon">
+            <div class="alert-info">12</div>
+          </div>
+          <div class="inner-user">
+            <div class="inner-user-icon"></div>
+            <div class="inner-user-text">管理员</div>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -53,8 +63,8 @@ export default {
         4: "全流程管理",
         "5-1": "法律法规",
         "5-2": "频发问题",
-        "5-3": "指标体系"
-      }
+        "5-3": "指标体系",
+      },
     };
   },
   mounted() {},
@@ -63,7 +73,11 @@ export default {
     getActiveIndex() {
       if (this.$store.state.navSelect) {
         if (this.$store.state.navSelect.subIndex) {
-          return this.$store.state.navSelect.index + "-" + this.$store.state.navSelect.subIndex;
+          return (
+            this.$store.state.navSelect.index +
+            "-" +
+            this.$store.state.navSelect.subIndex
+          );
         } else {
           return this.$store.state.navSelect.index;
         }
@@ -78,10 +92,10 @@ export default {
       that.$emit("navSelect", {
         index: index[0],
         subIndex: index[1],
-        name: name
+        name: name,
       });
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -125,7 +139,11 @@ export default {
   color: #ffffff !important;
   font-size: 20px !important;
 }
-#layoutHeader /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+#layoutHeader
+  /deep/
+  .el-menu--horizontal
+  > .el-submenu
+  .el-submenu__title:hover {
   background: none;
 }
 #layoutHeader /deep/ .el-submenu__title i {
@@ -146,13 +164,34 @@ export default {
   width: 95%;
   height: 100%;
   position: relative;
+  .manage-icon {
+    width: 28px;
+    height: 28px;
+    position: absolute;
+    left: 20px;
+    top: 14px;
+    background: url("../../assets/home/header_manage.png") no-repeat center;
+  }
   .alert-icon {
     width: 26px;
     height: 30px;
     position: absolute;
-    left: 20px;
+    left: 80px;
     top: 14px;
     background: url("../../assets/home/header_alert.png") no-repeat center;
+    .alert-info{
+      width: 25px;
+      height: 20px;
+      position: absolute;
+      background: red;
+      border-radius: 10px;
+      right: -20px;
+      top: -10px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
   .admin-icon {
     width: 41px;
@@ -171,8 +210,24 @@ export default {
     right: 15px;
     top: 4px;
     color: #fff;
-    line-height: 46px;
-    font-size: 27px;
+    &-icon {
+      margin: 0 auto;
+      width: 35px;
+      height: 35px;
+      background: #74ffff;
+      border: 1px solid #ffffff;
+      border-radius: 50%;
+    }
+    &-text {
+      margin: 0 auto;
+      width: 39px;
+      height: 15px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+    }
   }
 }
 </style>

src/views/ComprehensiveAnalysis.vue

@@ -6,10 +6,34 @@
     </div>
     <!-- 右上角工具栏 -->
     <div class="comprehensive-analysis-toolbar">
-      <div class="selected-icon" @click="showLayers"></div>
-      <div class="layers-control-icon" @click="selectLayers"></div>
+      <!-- 显示与隐藏所选图层 -->
+      <div
+        class="layer-display"
+        @click="showLayers"
+        :class="{ 'display-true': showLayersValue }"
+      ></div>
+      <!-- 选择图层 -->
+      <div
+        class="layers-control-icon"
+        @click="layerControlEvent"
+        :class="{ 'control-true': layerControlBtn }"
+      ></div>
+      <!-- 搜索地块等信息 -->
       <div class="searchbox">
-        <el-input placeholder="请输入地址、地块名称等" v-model="analysis.searchInput"></el-input>
+        <el-input
+          placeholder="请输入地址、地块名称等"
+          v-model="searchInput"
+        ></el-input>
+      </div>
+      <!-- 图层box -->
+      <div class="layercontrol-container" v-show="layerControlBox">
+        <div class="layer-control-item" v-for="item in 4" :key="item">
+          <div class="left"><div class="left-eye"></div></div>
+          <div class="right">
+            <div class="right-line"></div>
+            <div class="right-text"></div>
+          </div>
+        </div>
       </div>
     </div>
     <!-- 图例 -->
@@ -20,18 +44,49 @@
         title: '图例',
         boxWidth: '200',
         boxHeight: '200',
-        legendShowState: true
+        legendShowState: true,
       }"
     >
     </MenuCard>
-    <div class="comprehensive-analysis-left">
-      <div class="collapse-btn" @click="collapsePanelEvent"></div>
-      <div class="close-btn"></div>
+
+    <!-- 开启左边面板的控制按钮 -->
+    <div class="comprehensive-analysis-leftopenbox" v-show="leftBoxBtn">
+      <div @click="leftPanelDisplay('show')"></div>
     </div>
-    <div class="comprehensive-analysis-right">
-      <div class="control-container"><div class="control-btn"></div></div>
-      <div class="contant-container"></div>
+    <!-- 开启右边面板的控制按钮 -->
+    <div class="comprehensive-analysis-rightopenbox" v-show="rightBoxBtn">
+      <div @click="rightPanelDisplay('show')"></div>
     </div>
+
+    <!-- 左侧面板的显示与隐藏 -->
+    <transition name="fade-left">
+      <div class="comprehensive-analysis-left" v-show="showLeftBox">
+        <div class="contant-container">
+          <div class="contant-container-innerbox">
+            <el-tree
+              :data="modelData"
+              :props="defaultProps"
+              @node-click="handleNodeClick"
+            ></el-tree>
+          </div>
+        </div>
+        <div class="control-container">
+          <div @click="leftPanelDisplay('hide')"></div>
+        </div>
+      </div>
+    </transition>
+
+    <!-- 右侧面板的显示与隐藏 -->
+    <transition name="fade-right">
+      <div class="comprehensive-analysis-right" v-show="showRightBox">
+        <div class="control-container">
+          <div @click="rightPanelDisplay('hide')"></div>
+        </div>
+        <div class="contant-container">
+          <div class="contant-container-innerbox"></div>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -40,15 +95,106 @@ import MenuCard from "@/components/layout/MenuCard.vue";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
-    MenuCard
+    MenuCard,
   },
   data() {
     return {
-      analysis: {
-        searchInput: ""
-      }
+      searchInput: "",
+      showLayersValue: false,
+      layerControlBtn: false,
+      layerControlBox: false,
+      showLeftBox: true,
+      showRightBox: true,
+      leftBoxBtn: false,
+      rightBoxBtn: false,
+      layersData: [
+        {
+          color: `rgb(${Math.random() * 100},${Math.random() * 100},${
+            Math.random() * 100
+          }`,
+          type: "",
+        },
+        ,
+      ],
+      modelData: [
+        {
+          label: "一级 1",
+          children: [
+            {
+              label: "二级 1-1",
+              children: [
+                {
+                  label: "三级 1-1-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 2",
+          children: [
+            {
+              label: "二级 2-1",
+              children: [
+                {
+                  label: "三级 2-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 2-2",
+              children: [
+                {
+                  label: "三级 2-2-1",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: "一级 3",
+          children: [
+            {
+              label: "二级 3-1",
+              children: [
+                {
+                  label: "三级 3-1-1",
+                },
+              ],
+            },
+            {
+              label: "二级 3-2",
+              children: [
+                {
+                  label: "三级 3-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
     };
   },
+  watch: {
+    showLayersValue(val) {
+      if (val) {
+        console.log("显示图层");
+      } else {
+        console.log("隐藏图层");
+      }
+    },
+    layerControlBtn(val) {
+      if (val) {
+        this.layerControlBox = true;
+      } else {
+        this.layerControlBox = false;
+      }
+    },
+  },
   mounted() {},
   methods: {
     // 回退事件
@@ -56,14 +202,42 @@ export default {
       console.log("综合分析回退事件");
     },
     // 控制图层的显示与隐藏
-    showLayers() {},
-    // 选择图层
-    selectLayers() {},
-    // 折叠
-    collapsePanelEvent() {},
-    // 关闭面板
-    closeEvent() {}
-  }
+    showLayers() {
+      this.showLayersValue = !this.showLayersValue;
+    },
+    // 图层控制面板显示与隐藏
+    layerControlEvent() {
+      this.layerControlBtn = !this.layerControlBtn;
+    },
+    // 左侧面板的显示与隐藏
+    leftPanelDisplay(val) {
+      if (val === "show") {
+        this.showLeftBox = true;
+        this.leftBoxBtn = false;
+      }
+
+      if (val === "hide") {
+        this.showLeftBox = false;
+        this.leftBoxBtn = true;
+      }
+    },
+    // 右侧面板的显示与隐藏
+    rightPanelDisplay(val) {
+      if (val === "show") {
+        this.showRightBox = true;
+        this.rightBoxBtn = false;
+      }
+
+      if (val === "hide") {
+        this.showRightBox = false;
+        this.rightBoxBtn = true;
+      }
+    },
+    // 树状结构图
+    handleNodeClick(data) {
+      console.log(data);
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -109,7 +283,7 @@ export default {
     top: 8px;
     pointer-events: auto;
 
-    .selected-icon {
+    .layer-display {
       width: 40px;
       height: 40px;
       background: url("../assets/map/display.png") no-repeat center;
@@ -117,7 +291,11 @@ export default {
       bottom: 0;
       left: 0;
       cursor: pointer;
+      &.display-true {
+        background: url("../assets/map/display_true.png") no-repeat center;
+      }
     }
+
     .layers-control-icon {
       width: 44px;
       height: 32px;
@@ -126,6 +304,9 @@ export default {
       bottom: 4px;
       left: 40px;
       cursor: pointer;
+      &.control-true {
+        background: url("../assets/map/layer_selected.png") no-repeat center;
+      }
     }
     .searchbox {
       width: 245px;
@@ -134,13 +315,67 @@ export default {
       bottom: 2px;
       right: 0;
     }
+    .layercontrol-container {
+      position: absolute;
+      width: 288px;
+      height: 190px;
+      left: -200px;
+      bottom: -200px;
+      border: 1px solid @commonBorderColor;
+      background: rgba(0, 170, 255, 0.2);
+
+      .layer-control-item {
+        width: 100%;
+        height: 30px;
+        display: flex;
+        .left {
+          width: 20%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-right: 1px solid @commonBorderColor;
+          border-bottom: 1px solid @commonBorderColor;
+          &-eye {
+            width: 80%;
+            height: 80%;
+            background: url("../assets/map/eye1.png") no-repeat center;
+            cursor: pointer;
+            .open {
+              background: url("../assets/map/eye2.png") no-repeat center;
+            }
+          }
+        }
+        .right {
+          width: 80%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          border-bottom: 1px solid @commonBorderColor;
+          &-line {
+            width: 3%;
+            height: 90%;
+
+            border-right: 7px solid red;
+          }
+          &-text {
+            width: 50%;
+            height: 90%;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+          }
+        }
+      }
+    }
   }
   &-legendbox {
     position: absolute;
     right: 30px;
     bottom: 30px;
   }
-
+  /* 左边树状面板 */
   &-left {
     width: 300px;
     height: 85%;
@@ -152,25 +387,71 @@ export default {
     border-bottom: 2px solid @commonBorderColor;
     background: rgba(0, 170, 255, 0.2);
     pointer-events: auto;
-    .collapse-btn {
-      width: 30px;
-      height: 40px;
-      position: absolute;
-      top: 5px;
-      right: 50px;
-      background: @commonBorderColor;
+    display: flex;
+    .control-container {
+      width: 12%;
+      height: 100%;
+      background: red;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      & > div {
+        width: 50px;
+        height: 50px;
+        background: url("../assets/image/open.png") no-repeat center;
+        position: absolute;
+        right: -25px;
+        cursor: pointer;
+      }
+    }
+    .contant-container {
+      width: 88%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-innerbox {
+        width: 90%;
+        height: 97%;
+        background: yellow;
+      }
+    }
+  }
+  &-leftopenbox {
+    position: absolute;
+    left: 0;
+    width: 50px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    & > div {
+      pointer-events: auto;
+      width: 50px;
+      height: 50px;
+      background: url("../assets/image/folded.png") no-repeat center;
       cursor: pointer;
     }
-    .close-btn {
-      width: 30px;
-      height: 30px;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      background: url("../assets/image/close.png") no-repeat center;
+  }
+  &-rightopenbox {
+    position: absolute;
+    right: 0;
+    width: 50px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    & > div {
+      pointer-events: auto;
+      width: 50px;
+      height: 50px;
+      background: url("../assets/image/open.png") no-repeat center;
       cursor: pointer;
     }
   }
+  /* 右面板 -- 显示标记疑点 */
   &-right {
     width: 300px;
     height: 85%;
@@ -192,19 +473,86 @@ export default {
       justify-content: center;
       align-items: center;
       position: relative;
-      .control-btn {
+      & > div {
         width: 50px;
         height: 50px;
-        background: purple;
+        background: url("../assets/image/folded.png") no-repeat center;
         position: absolute;
         left: -25px;
+        cursor: pointer;
       }
     }
     .contant-container {
       width: 88%;
       height: 100%;
-      background: yellow;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &-innerbox {
+        width: 90%;
+        height: 97%;
+        background: yellow;
+      }
     }
   }
+
+  /* 侧边栏收缩动画效果 */
+  /* 左边 */
+  .fade-left-enter-from {
+    opacity: 0;
+    transform: translateX(-300px);
+  }
+
+  .fade-left-enter-to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  /* 主动输入控住过渡的持续时间和缓动曲线 */
+  .fade-left-enter-active {
+    transition: all 1s ease;
+  }
+
+  .fade-left-leave-from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .fade-left-leave-to {
+    opacity: 0;
+    transform: translateX(-300px);
+  }
+
+  .fade-left-leave-active {
+    transition: all 0.5s ease;
+  }
+  /* 右边 */
+  .fade-right-enter-from {
+    opacity: 0;
+    transform: translateX(300px);
+  }
+
+  .fade-right-enter-to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .fade-right-enter-active {
+    transition: all 1s ease;
+  }
+
+  .fade-right-leave-from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .fade-right-leave-to {
+    opacity: 0;
+    transform: translateX(300px);
+  }
+
+  .fade-right-leave-active {
+    transition: all 0.5s ease;
+  }
 }
 </style>