related to comprehensive analysis

src/components/chart/BarChart.vue

@@ -62,6 +62,12 @@ export default {
   },
   methods: {
     initEchart(categoryData, soil, water, forestry) {
+      // console.log(categoryData,"街道");
+      // console.log(soil,"土");
+      // console.log(water,"水");
+      // console.log(forestry,"林业");
+
+
       if (!this.barChart) {
         this.barChart = echarts.init(this.$refs.barChart);
       }

src/components/map/MapHolder.vue

@@ -22,8 +22,8 @@ export default {
       map2DViewer.map = L.map("map2DViewer", {
         attributionControl: false,
         zoomControl: false,
-        minZoom:10,
-        maxZoom:15
+        minZoom: 10,
+        maxZoom: 15,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
@@ -86,7 +86,6 @@ export default {
         clickable: true,
         offset: [-25, 10],
       });
-      console.log(wmarker, "label");
       wmarker.addTo(map2DViewer.map);
       L.circleMarker(center, {
         radius: 8,

src/config/common.js

@@ -36,7 +36,7 @@ export const streetLocation = {
 export const soilData = {
     '全部街道':{
         A:300,
-        B:320,
+        B:200,
         C:280
     },
     '潍坊新村街道':{
@@ -51,48 +51,48 @@ export const soilData = {
     },
     '周家渡街道':{
         A:240,
-        B:320,
+        B:120,
         C:289
     },
     '塘桥街道':{
         A:120,
         B:90,
-        C:101
+        C:30
     },
     '上钢新村街道':{
         A:230,
-        B:320,
+        B:302,
         C:210
     },
     '南码头路街道':{
-        A:300,
-        B:320,
+        A:30,
+        B:270,
         C:280
     },
     '沪东新村街道':{
         A:300,
-        B:320,
+        B:150,
         C:280
     },
     '金杨新村街道':{
         A:182,
         B:320,
-        C:300
+        C:227
     },
     '洋泾街道':{
         A:300,
         B:320,
-        C:280
+        C:500
     },
     '浦兴路街道':{
         A:300,
         B:320,
-        C:280
+        C:230
     },
     '东明路街道':{
         A:300,
-        B:320,
-        C:280
+        B:220,
+        C:180
     },
     '花木街道':{
         A:182,
@@ -130,37 +130,37 @@ export const waterData = {
     },
     '上钢新村街道':{
         A:230,
-        B:320,
+        B:300,
         C:210
     },
     '南码头路街道':{
         A:300,
-        B:320,
+        B:240,
         C:280
     },
     '沪东新村街道':{
         A:300,
         B:320,
-        C:280
+        C:250
     },
     '金杨新村街道':{
         A:182,
-        B:320,
-        C:300
+        B:326,
+        C:400
     },
     '洋泾街道':{
         A:300,
         B:320,
-        C:280
+        C:240
     },
     '浦兴路街道':{
         A:300,
         B:320,
-        C:280
+        C:267
     },
     '东明路街道':{
         A:300,
-        B:320,
+        B:230,
         C:280
     },
     '花木街道':{
@@ -172,7 +172,7 @@ export const waterData = {
 // 林地资源
 export const forestryData = {
     '全部街道':{
-        A:300,
+        A:306,
         B:320,
         C:280
     },
@@ -193,7 +193,7 @@ export const forestryData = {
     },
     '塘桥街道':{
         A:120,
-        B:90,
+        B:190,
         C:101
     },
     '上钢新村街道':{
@@ -222,8 +222,8 @@ export const forestryData = {
         C:280
     },
     '浦兴路街道':{
-        A:300,
-        B:320,
+        A:50,
+        B:418,
         C:280
     },
     '东明路街道':{

src/utils/publicFunction.js

@@ -10,7 +10,23 @@ const buildGuid = function(options) {
     return mar + '_' + (new Date()).getTime().toString() + text;
 }
 
+/**
+ * 根据数组属性排序 
+ */
+ const compare = function (property) {//property:根据什么属性排序
+  return function(a,b){
+   var value1 = a[property];
+   var value2 = b[property];
+   /*
+   * value2 - value1; ——> 降序
+   * value1 - value2; ——> 升序
+   */
+   return value1 - value2;//升序排序
+  }
+ }
+  
 
 export default {
-  buildGuid
+  buildGuid,
+  compare
 }

src/views/ComprehensiveAnalysis.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="comprehensive-analysis">
+        
+    </div>
+</template>
+<script>
+export default {
+    name: "ComprehensiveAnalysis",
+    data(){
+        return{}
+    },
+    mounted(){
+
+    },
+    methods:{
+
+    },
+
+}
+</script>
+<style lang="less" scoped>
+.comprehensive-analysis{
+
+}
+</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>
@@ -42,6 +46,29 @@
       </div>
     </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>
+
     <!-- Home页面 -->
     <!-- 左侧菜单列 1 -- 首页 -->
     <div id="leftMenus" v-if="$ifMenu('1', '')">
@@ -126,14 +153,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>
@@ -146,7 +180,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">
@@ -156,7 +191,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">
@@ -169,7 +205,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">
@@ -185,7 +222,14 @@ 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";
@@ -202,7 +246,7 @@ export default {
     TagCard,
     ChartCard,
     TagTableCard,
-    TopCard
+    TopCard,
   },
   data() {
     return {
@@ -210,19 +254,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,
@@ -237,7 +281,7 @@ export default {
             title: "基本农田被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png"
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY1cq.png",
           },
           {
             type: "imageMenu",
@@ -245,7 +289,7 @@ export default {
             title: "基本农田种林",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png"
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZY3j0.png",
           },
           {
             type: "imageMenu",
@@ -253,7 +297,7 @@ export default {
             title: "基本农田抛荒",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png"
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYl3n.png",
           },
           {
             type: "imageMenu",
@@ -261,8 +305,8 @@ export default {
             title: "一般耕地被违规占用",
             titleWidth: 81,
             boxHeight: 236,
-            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png"
-          }
+            imageUrl: "https://s1.ax1x.com/2022/11/16/zZYQ9s.png",
+          },
         ],
         main: [
           {
@@ -270,34 +314,35 @@ 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"],
       legendData: ["#E565FF", "#0055FF", "#00FFD5"],
       btnChecked: "A",
       AData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       BData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       CData: {
         soil: [],
         water: [],
-        forestry: []
+        forestry: [],
       },
       streetSelectVal: "全部街道",
       streetOptions: [],
@@ -306,8 +351,12 @@ export default {
         { name: "土地资源问题", num: 67 },
         { name: "水资源问题", num: 37 },
         { name: "林地资源问题", num: 60 },
-        { name: "生态资源问题", num: 55 }
-      ]
+        { name: "生态资源问题", num: 55 },
+      ],
+      // 综合分析
+      analysis: {
+        searchInput: "",
+      },
     };
   },
   methods: {
@@ -343,7 +392,19 @@ export default {
     // 镇域专题下拉框
     specialTownSelect(val) {
       this.$refs.mapLoaderRef.setView(streetLocation[val], 11);
-    }
+    },
+    // 综合分析 - 回退事件
+    backEvent() {
+      console.log("综合分析回退事件");
+    },
+    // 综合分析 - 控制图层的显示与隐藏
+    showLayers() {},
+    // 综合分析 - 选择图层
+    selectLayers() {},
+    // 综合分析 - 折叠
+    collapsePanelEvent() {},
+    // 综合分析 - 关闭面板
+    closeEvent() {},
   },
   created() {
     // 目录
@@ -353,23 +414,51 @@ export default {
     this.water = [];
     this.forestry = [];
 
-    for (let i in soilData) {
-      this.AData.soil.push(soilData[i].A);
-      this.BData.soil.push(soilData[i].B);
-      this.CData.soil.push(soilData[i].C);
-    }
+    let ADataArr = [];
+    let BDataArr = [];
+    let CDataArr = [];
+    // 街道排序
+    for (let i in this.categoryData) {
+      let ADataSum =
+        soilData[this.categoryData[i]].A +
+        waterData[this.categoryData[i]].A +
+        forestryData[this.categoryData[i]].A;
+      let BDataSum =
+        soilData[this.categoryData[i]].B +
+        waterData[this.categoryData[i]].B +
+        forestryData[this.categoryData[i]].B;
 
-    for (let i in waterData) {
-      this.AData.water.push(waterData[i].A);
-      this.BData.water.push(waterData[i].B);
-      this.CData.water.push(waterData[i].C);
+      let CDataSum =
+        soilData[this.categoryData[i]].C +
+        waterData[this.categoryData[i]].C +
+        forestryData[this.categoryData[i]].C;
+      ADataArr.push({ name: this.categoryData[i], sum: ADataSum });
+      BDataArr.push({ name: this.categoryData[i], sum: BDataSum });
+      CDataArr.push({ name: this.categoryData[i], sum: CDataSum });
     }
 
-    for (let i in forestryData) {
-      this.AData.forestry.push(forestryData[i].A);
-      this.BData.forestry.push(forestryData[i].B);
-      this.CData.forestry.push(forestryData[i].C);
-    }
+    ADataArr.sort(publicFun.compare("sum"));
+    BDataArr.sort(publicFun.compare("sum"));
+    CDataArr.sort(publicFun.compare("sum"));
+
+    // 按A,B,C分出各自资源的排序数组
+    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);
+    });
+
+    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);
+    });
+
+    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);
+    });
 
     this.soil = this.AData.soil;
     this.water = this.AData.water;
@@ -379,13 +468,14 @@ export default {
     for (let key in street) {
       this.streetOptions.push({
         value: street[key],
-        label: street[key]
+        label: street[key],
       });
     }
-  }
+  },
 };
 </script>
 <style lang="less" scoped>
+@commonBorderColor: #00aaff;
 #LayoutContent {
   position: relative;
   width: 100%;
@@ -462,7 +552,7 @@ export default {
             display: flex;
             align-items: center;
             justify-content: center;
-            color: #00aaff;
+            color: @commonBorderColor;
           }
           .problem-img {
             width: 80%;
@@ -496,6 +586,127 @@ export default {
     }
   }
 }
+
+/* 综合分析 */
+#ComprehensiveContainer {
+  position: relative;
+  height: calc(100% - 60px);
+  width: 100%;
+  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 {
   position: absolute;
@@ -586,7 +797,7 @@ export default {
         .legend-icon {
           width: 25px;
           height: 15px;
-          background: #00aaff;
+          background: @commonBorderColor;
           border-radius: 2px;
           margin: 0 auto;
         }
@@ -686,14 +897,22 @@ export default {
     transform: translate(-50%, -50%) rotate(45deg);
     width: 110px;
     height: 100px;
-    background: linear-gradient(to left, #00aaff, #00aaff) left top no-repeat,
-      linear-gradient(to bottom, #00aaff, #00aaff) left top no-repeat,
-      linear-gradient(to left, #00aaff, #00aaff) right top no-repeat,
-      linear-gradient(to bottom, #00aaff, #00aaff) right top no-repeat,
-      linear-gradient(to left, #00aaff, #00aaff) left bottom no-repeat,
-      linear-gradient(to bottom, #00aaff, #00aaff) left bottom no-repeat,
-      linear-gradient(to left, #00aaff, #00aaff) right bottom no-repeat,
-      linear-gradient(to left, #00aaff, #00aaff) 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;
   }
 }