analysis style

src/views/ComprehensiveAnalysis.vue

@@ -1,25 +1,212 @@
 <template>
-    <div class="comprehensive-analysis">
-        
+  <div class="comprehensive-analysis">
+    <div class="comprehensive-analysis-backbtn" @click="backEvent">
+      <div class="left-arrow"></div>
+      <div class="title">返回上级</div>
     </div>
+    <!-- 右上角工具栏 -->
+    <div class="comprehensive-analysis-toolbar">
+      <div class="selected-icon" @click="showLayers"></div>
+      <div class="layers-control-icon" @click="selectLayers"></div>
+      <div class="searchbox">
+        <el-input
+          placeholder="请输入地址、地块名称等"
+          v-model="analysis.searchInput"
+        ></el-input>
+      </div>
+    </div>
+    <!-- 图例 -->
+    <MenuCard
+      class="comprehensive-analysis-legendbox"
+      :menuData="{
+        type: 'chart',
+        title: '图例',
+        boxWidth: '200',
+        boxHeight: '200',
+      }"
+    >
+    </MenuCard>
+    <div class="comprehensive-analysis-left">
+      <div class="collapse-btn" @click="collapsePanelEvent"></div>
+      <div class="close-btn"></div>
+    </div>
+    <div class="comprehensive-analysis-right">
+      <div class="control-container"><div class="control-btn"></div></div>
+      <div class="contant-container"></div>
+    </div>
+  </div>
 </template>
 <script>
+// 综合分析
+import MenuCard from "@/components/layout/MenuCard.vue";
 export default {
-    name: "ComprehensiveAnalysis",
-    data(){
-        return{}
-    },
-    mounted(){
-
+  name: "ComprehensiveAnalysis",
+  components: {
+    MenuCard,
+  },
+  data() {
+    return {
+      analysis: {
+        searchInput: "",
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    // 回退事件
+    backEvent() {
+      console.log("综合分析回退事件");
     },
-    methods:{
-
-    },
-
-}
+    // 控制图层的显示与隐藏
+    showLayers() {},
+    // 选择图层
+    selectLayers() {},
+    // 折叠
+    collapsePanelEvent() {},
+    // 关闭面板
+    closeEvent() {},
+  },
+};
 </script>
 <style lang="less" scoped>
-.comprehensive-analysis{
+@commonBorderColor: #00aaff;
+.comprehensive-analysis {
+  &-backbtn {
+    width: 120px;
+    height: 35px;
+    background: @commonBorderColor;
+    color: #fff;
+    border-radius: 3px;
+    position: absolute;
+    left: 30px;
+    top: 15px;
+    pointer-events: auto;
+    cursor: pointer;
+    .left-arrow {
+      width: 7px;
+      height: 7px;
+      border-top: 3px solid #ffffff;
+      border-right: 3px solid #ffffff;
+      transform: translate(-50%, -50%) rotate(224deg);
+      position: absolute;
+      top: 16px;
+      left: 25px;
+    }
+    .title {
+      width: 80px;
+      height: 35px;
+      line-height: 35px;
+      position: absolute;
+      left: 34px;
+    }
+  }
+  &-toolbar {
+    width: 340px;
+    height: 50px;
+    line-height: 28px;
+    color: #fff;
+    border-radius: 3px;
+    position: absolute;
+    right: 60px;
+    top: 8px;
+    pointer-events: auto;
+
+    .selected-icon {
+      width: 40px;
+      height: 40px;
+      background: url("../assets/map/display.png") no-repeat center;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      cursor: pointer;
+    }
+    .layers-control-icon {
+      width: 44px;
+      height: 32px;
+      background: url("../assets/map/layer_default.png") no-repeat center;
+      position: absolute;
+      bottom: 4px;
+      left: 40px;
+      cursor: pointer;
+    }
+    .searchbox {
+      width: 245px;
+      height: 40px;
+      position: absolute;
+      bottom: 2px;
+      right: 0;
+    }
+  }
+  &-legendbox {
+    position: absolute;
+    right: 30px;
+    bottom: 30px;
+  }
 
+  &-left {
+    width: 300px;
+    height: 85%;
+    position: absolute;
+    top: 60px;
+    left: 0;
+    border-right: 2px solid @commonBorderColor;
+    border-top: 2px solid @commonBorderColor;
+    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;
+      cursor: pointer;
+    }
+    .close-btn {
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      background: url("../assets/image/close.png") no-repeat center;
+      cursor: pointer;
+    }
+  }
+  &-right {
+    width: 300px;
+    height: 85%;
+    position: absolute;
+    top: 60px;
+    right: 0;
+    border-left: 2px solid @commonBorderColor;
+    border-top: 2px solid @commonBorderColor;
+    border-bottom: 2px solid @commonBorderColor;
+    background: rgba(0, 170, 255, 0.2);
+    pointer-events: auto;
+    display: flex;
+    .control-container {
+      width: 12%;
+      height: 100%;
+      background: red;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      .control-btn {
+        width: 50px;
+        height: 50px;
+        background: purple;
+        position: absolute;
+        left: -25px;
+      }
+    }
+    .contant-container {
+      width: 88%;
+      height: 100%;
+      background: yellow;
+    }
+  }
 }
-</style>
+</style>

src/views/HomeView.vue

@@ -19,7 +19,7 @@
           type: 'card',
           title: '历年频发问题Top10',
           titleWidth: 85,
-          boxWidth: '400'
+          boxWidth: '400',
         }"
       >
         <template slot="top"><TopCard :dataSize="10" /></template>
@@ -29,7 +29,11 @@
           <!-- <h2>浦东新区</h2> -->
           <div class="droplet-box-title">浦东新区</div>
           <div class="droplet-box">
-            <div class="droplet-box-item" v-for="item in townCollection" :key="item.name">
+            <div
+              class="droplet-box-item"
+              v-for="item in townCollection"
+              :key="item.name"
+            >
               <div class="problem-num">{{ item.num }} 个</div>
               <div class="problem-img"></div>
               <div class="problem-title">{{ item.name }}</div>
@@ -43,24 +47,10 @@
     </div>
 
     <!-- 综合分析 -->
-    <div id="ComprehensiveContainer" v-if="$ifMenu('3', '')">
-      <div id="ComprehensiveContainer-backbtn" @click="backEvent">
-        <div class="left-arrow"></div>
-        <div class="title">返回上级</div>
-      </div>
-      <div id="ComprehensiveContainer-toolbar">
-        <div class="selected-icon" @click="showLayers"></div>
-        <div class="layers-control-icon" @click="selectLayers"></div>
-        <div class="searchbox">
-          <el-input placeholder="请输入地址、地块名称等" v-model="analysis.searchInput"></el-input>
-        </div>
-      </div>
-      <div id="ComprehensiveContainer-left">
-        <div class="collapse-btn" @click="collapsePanelEvent"></div>
-        <div class="close-btn"></div>
-      </div>
-      <div id="ComprehensiveContainer-right"></div>
-    </div>
+    <ComprehensiveAnalysis
+      id="ComprehensiveContainer"
+      v-if="$ifMenu('3', '')"
+    />
 
     <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
@@ -150,14 +140,21 @@
           type: 'chart',
           title: '图例',
           boxWidth: '150',
-          boxHeight: '180'
+          boxHeight: '180',
         }"
         ><div class="legend-container">
           <div class="left-container">
-            <div class="legend-icon" v-for="(item, index) in legendData" :key="index" :style="{ background: item }"></div>
+            <div
+              class="legend-icon"
+              v-for="(item, index) in legendData"
+              :key="index"
+              :style="{ background: item }"
+            ></div>
           </div>
           <div class="right-container">
-            <div class="lengend-title" v-for="item in buttonData" :key="item">{{ item }} 类</div>
+            <div class="lengend-title" v-for="item in buttonData" :key="item">
+              {{ item }} 类
+            </div>
           </div>
         </div>
       </MenuCard>
@@ -170,7 +167,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年林地面积变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年林地面积变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[1]" v-if="$ifMenu('1', '')">
         <template slot="top">
@@ -180,7 +178,8 @@
             <TagCard :data="tagCardData"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年审计项目变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年审计项目变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[2]" v-if="$ifMenu('1', '')">
         <template slot="top">
@@ -193,7 +192,8 @@
             <TagCard :data="tagCardData3"></TagCard>
           </div>
         </template>
-        <template slot="bottom"> <ChartCard :title="'近三年土地类问题变化'" /> </template
+        <template slot="bottom">
+          <ChartCard :title="'近三年土地类问题变化'" /> </template
       ></MenuCard>
       <MenuCard :menuData="menus.right[4]" v-if="$ifMenu('2', '1')">
         <template slot="top">
@@ -209,13 +209,21 @@ import Header from "@/components/layout/Header.vue";
 import MenuCard from "@/components/layout/MenuCard";
 import NewSelect from "@/components/common/NewSelect.vue";
 import BarChart from "@/components/chart/BarChart.vue";
-import { street, streetLocation, soilData, waterData, forestryData } from "@/config/common";
+import {
+  street,
+  streetLocation,
+  soilData,
+  waterData,
+  forestryData,
+} from "@/config/common";
 import publicFun from "@/utils/publicFunction.js";
 import TagCard from "@/components/common/TagCard";
 import ChartCard from "@/components/common/ChartCard.vue";
 import TagTableCard from "@/components/common/TagTableCard";
 import TopCard from "@/components/common/TopCard";
 import BottomMenus from "@/components/common/BottomMenus";
+// 综合分析
+import ComprehensiveAnalysis from "@/views/ComprehensiveAnalysis.vue";
 // 镇域专题组件
 export default {
   name: "HomeView",
@@ -229,7 +237,8 @@ export default {
     ChartCard,
     TagTableCard,
     TopCard,
-    BottomMenus
+    BottomMenus,
+    ComprehensiveAnalysis,
   },
   data() {
     return {
@@ -237,19 +246,19 @@ export default {
         type: "tb",
         title: "土地资源",
         value: 100,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData2: {
         type: "tb",
         title: "土地资源面积",
         value: 172,
-        unit: "公顷"
+        unit: "公顷",
       },
       tagCardData3: {
         type: "lr",
         title: "林地面积",
         value: 654,
-        unit: "公顷"
+        unit: "公顷",
       },
       testTitle: "土地资源",
       activeIndex: 1,
@@ -264,7 +273,7 @@ export default {
             title: "基本农田被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "/static/images/2.png"
+            imageUrl: "/static/images/2.png",
           },
           {
             type: "imageMenu",
@@ -272,7 +281,7 @@ export default {
             title: "基本农田种林",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "/static/images/3.png"
+            imageUrl: "/static/images/3.png",
           },
           {
             type: "imageMenu",
@@ -280,7 +289,7 @@ export default {
             title: "基本农田抛荒",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "/static/images/1.png"
+            imageUrl: "/static/images/1.png",
           },
           {
             type: "imageMenu",
@@ -288,8 +297,8 @@ export default {
             title: "一般耕地被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "/static/images/4.png"
-          }
+            imageUrl: "/static/images/4.png",
+          },
         ],
         main: [
           {
@@ -297,16 +306,16 @@ export default {
             title: "浦东新区自然资源分布TOP10",
             boxWidth: "360",
             boxHeight: "370",
-            boxBackground: "rgba(0,39,77,0.6)"
-          }
+            boxBackground: "rgba(0,39,77,0.6)",
+          },
         ],
         right: [
           { type: "card", title: "资金投入情况", titleWidth: 64 },
           { type: "card", title: "资源环境项目", titleWidth: 64 },
           { type: "card", title: "历年频发问题TOP5", titleWidth: 81 },
           { type: "card", title: "土地类问题", titleWidth: 60 },
-          { type: "card", title: "土地类问题TOP5", titleWidth: 81 }
-        ]
+          { type: "card", title: "土地类问题TOP5", titleWidth: 81 },
+        ],
       },
       // 首页饼图相关
       buttonData: ["A", "B", "C"],
@@ -316,19 +325,19 @@ export default {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       BData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       CData: {
         soil: [],
         water: [],
         forestry: [],
-        categoryData: []
+        categoryData: [],
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -337,12 +346,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
+        { name: "生态资源问题", num: 55 },
       ],
       // 综合分析
       analysis: {
-        searchInput: ""
-      }
+        searchInput: "",
+      },
     };
   },
   methods: {
@@ -382,18 +391,6 @@ export default {
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
     },
-    // 综合分析 - 回退事件
-    backEvent() {
-      console.log("综合分析回退事件");
-    },
-    // 综合分析 - 控制图层的显示与隐藏
-    showLayers() {},
-    // 综合分析 - 选择图层
-    selectLayers() {},
-    // 综合分析 - 折叠
-    collapsePanelEvent() {},
-    // 综合分析 - 关闭面板
-    closeEvent() {}
   },
   created() {
     // 目录
@@ -408,10 +405,19 @@ export default {
     let CDataArr = [];
     // 街道排序
     for (let i in category) {
-      let ADataSum = soilData[category[i]].A + waterData[category[i]].A + forestryData[category[i]].A;
-      let BDataSum = soilData[category[i]].B + waterData[category[i]].B + forestryData[category[i]].B;
+      let ADataSum =
+        soilData[category[i]].A +
+        waterData[category[i]].A +
+        forestryData[category[i]].A;
+      let BDataSum =
+        soilData[category[i]].B +
+        waterData[category[i]].B +
+        forestryData[category[i]].B;
 
-      let CDataSum = soilData[category[i]].C + waterData[category[i]].C + forestryData[category[i]].C;
+      let CDataSum =
+        soilData[category[i]].C +
+        waterData[category[i]].C +
+        forestryData[category[i]].C;
       ADataArr.push({ name: category[i], sum: ADataSum });
       BDataArr.push({ name: category[i], sum: BDataSum });
       CDataArr.push({ name: category[i], sum: CDataSum });
@@ -422,21 +428,21 @@ export default {
     CDataArr.sort(publicFun.compare("sum"));
 
     // 按A,B,C分出各自资源的排序数组
-    ADataArr.forEach(item => {
+    ADataArr.forEach((item) => {
       this.AData.soil.push(soilData[item.name].A);
       this.AData.water.push(waterData[item.name].A);
       this.AData.forestry.push(forestryData[item.name].A);
       this.AData.categoryData.push(item.name);
     });
 
-    BDataArr.forEach(item => {
+    BDataArr.forEach((item) => {
       this.BData.soil.push(soilData[item.name].B);
       this.BData.water.push(waterData[item.name].B);
       this.BData.forestry.push(forestryData[item.name].B);
       this.BData.categoryData.push(item.name);
     });
 
-    CDataArr.forEach(item => {
+    CDataArr.forEach((item) => {
       this.CData.soil.push(soilData[item.name].C);
       this.CData.water.push(waterData[item.name].C);
       this.CData.forestry.push(forestryData[item.name].C);
@@ -452,10 +458,10 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -579,117 +585,6 @@ export default {
   top: 60px;
   z-index: 999;
   pointer-events: none;
-  background: rgba(100, 100, 100, 0.2);
-  &-backbtn {
-    width: 120px;
-    height: 35px;
-    background: @commonBorderColor;
-    color: #fff;
-    border-radius: 3px;
-    position: absolute;
-    left: 30px;
-    top: 15px;
-    pointer-events: auto;
-    cursor: pointer;
-    .left-arrow {
-      width: 7px;
-      height: 7px;
-      border-top: 3px solid #ffffff;
-      border-right: 3px solid #ffffff;
-      transform: translate(-50%, -50%) rotate(224deg);
-      position: absolute;
-      top: 16px;
-      left: 25px;
-    }
-    .title {
-      width: 80px;
-      height: 35px;
-      line-height: 35px;
-      position: absolute;
-      left: 34px;
-    }
-  }
-  &-toolbar {
-    width: 340px;
-    height: 50px;
-    line-height: 28px;
-    color: #fff;
-    border-radius: 3px;
-    position: absolute;
-    right: 60px;
-    top: 8px;
-    pointer-events: auto;
-
-    .selected-icon {
-      width: 40px;
-      height: 40px;
-      background: url("../assets/map/display.png") no-repeat center;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      cursor: pointer;
-    }
-    .layers-control-icon {
-      width: 44px;
-      height: 32px;
-      background: url("../assets/map/layer_default.png") no-repeat center;
-      position: absolute;
-      bottom: 4px;
-      left: 40px;
-      cursor: pointer;
-    }
-    .searchbox {
-      width: 245px;
-      height: 40px;
-      position: absolute;
-      bottom: 2px;
-      right: 0;
-    }
-  }
-
-  &-left {
-    width: 300px;
-    height: 85%;
-    position: absolute;
-    top: 60px;
-    left: 0;
-    border-right: 2px solid @commonBorderColor;
-    border-top: 2px solid @commonBorderColor;
-    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;
-      cursor: pointer;
-    }
-    .close-btn {
-      width: 30px;
-      height: 30px;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      background: url("../assets/image/close.png") no-repeat center;
-      cursor: pointer;
-    }
-  }
-
-  &-right {
-    width: 300px;
-    height: 85%;
-    position: absolute;
-    top: 60px;
-    right: 0;
-    border-left: 2px solid @commonBorderColor;
-    border-top: 2px solid @commonBorderColor;
-    border-bottom: 2px solid @commonBorderColor;
-    background: rgba(0, 170, 255, 0.2);
-    pointer-events: auto;
-  }
 }
 /* Home目录 -- 左侧菜单列 */
 #leftMenus {
@@ -734,7 +629,7 @@ export default {
 }
 // 底部菜单定位
 #leftMenusB {
-  position:absolute;
+  position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
@@ -888,14 +783,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right top no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat,
-      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right bottom no-repeat;
+    background: linear-gradient(to left, @commonBorderColor, @commonBorderColor)
+        left top no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right top
+        no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) right
+        top no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to bottom, @commonBorderColor, @commonBorderColor) left
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat,
+      linear-gradient(to left, @commonBorderColor, @commonBorderColor) right
+        bottom no-repeat;
     background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
   }
 }