feat: 3d地图

mm/mm.config.js

@@ -18,6 +18,7 @@ module.exports = async (util) => {
     proxy: {
       '/': `http://www.httpbin.org/`, // 后端接口主域
       '/anything/intercept': [`origin`, `127.0.0.1`], // 修改接口返回的数据
+      '/datav/': `https://geo.datav.aliyun.com/`, // 修改接口返回的数据
     },
     api: {
       // 在其他文件里的 api

src/assets/styles/common.scss

@@ -33,7 +33,7 @@
   width: 500px;
   height: 550px;
   border: 2px solid rgba(92,255,255,0.1);
-  background: rgba(10,106,255,0.1) url(../../assets/img/wg.png) repeat 50% 50% !important;
+  // background: rgba(10,106,255,0.1) url(../../assets/img/wg.png) repeat 50% 50% !important;
   background-blend-mode: screen;
   overflow: visible;
   &:before {

src/components/Customize/HorizontalHistogram.vue

@@ -275,7 +275,7 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  width: 526px;
+  width: 401px;
   height: 300px;
   .title {
     display: flex;
@@ -285,6 +285,7 @@ export default {
       font-size: 8px;
       text-align: right;
       word-break: break-all;
+      line-height: 1;
     }
   }
   .chartsdom {

src/components/Customize/cylindricalHistogram.vue

@@ -236,7 +236,7 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  width: 526px;
+  width: 401px;
   height: 300px;
   .title {
     display: flex;
@@ -246,6 +246,7 @@ export default {
       font-size: 8px;
       text-align: right;
       word-break: break-all;
+      line-height: 1;
     }
   }
   .chartsdom {

src/components/Customize/wavyLineChart.vue

@@ -212,8 +212,7 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  right: 100px;
-  width: 526px;
+  width: 401px;
   height: 300px;
   .title {
     display: flex;
@@ -223,6 +222,7 @@ export default {
       font-size: 8px;
       text-align: right;
       word-break: break-all;
+      line-height: 1;
     }
   }
   .chartsdom {

src/components/Customize/weatherForecast.vue

@@ -172,7 +172,7 @@ export default {
 
 <style lang="scss" scoped>
 .sn-container {
-  width: 526px;
+  width: 401px;
   height: 300px;
   .title {
     display: flex;
@@ -182,6 +182,7 @@ export default {
       font-size: 8px;
       text-align: right;
       word-break: break-all;
+      line-height: 1;
     }
   }
   .chartsdom {

src/views/page1/index.vue

@@ -1,61 +1,61 @@
 <template>
-  <div class="home-container">
-    <div class="wrap" ref="editor">
-      <div class="top"></div>
-      <cylindricalHistogram
-        style="left: 50px; top: 425px"
-        v-if="isGetData"
-        title="各区域移栽产量分析"
-        titleEn="Tongren Tobacco Planting Digital Management Platform"
-        :area="Transplantarea"
-        :dataArray="TransplantdataArray"
-      ></cylindricalHistogram>
-      <weatherForecast
-        style="left: 50px; top: 750px"
-        v-if="isWeather"
-        title="天气预报"
-        titleEn="Tongren Tobacco Planting Digital Management Platform"
-        :area="Weatherarea"
-        :dataArray="WeatherdataArray"
-        :alertValue="30"
-      >
-      </weatherForecast>
-      <wavyLineChart
-        id="`wavyLineChart`"
-        style="left: 1350px; top: 105px"
-        v-if="isWavyLine"
-        title="各区域移栽面积"
-        :area="wavyLineArea"
-        :dataArray="wavyLinedataArray"
-        smooth="true"
-      >
-      </wavyLineChart>
-      <HorizontalHistogram
-        style="left: 1350px; top: 425px"
-        v-if="isHorizontal"
-        title="移栽情况分析"
-        :area="HorizontalArea"
-        :dataArray="HorizontalArray"
-      ></HorizontalHistogram>
-      <wavyLineChart
-        id="`移栽趋势分析`"
-        style="left: 1350px; top: 750px"
-        v-if="isWavyLine"
-        title="移栽趋势分析"
-        :area="wavyLineArea"
-        :dataArray="wavyLinedataArray"
-      >
-      </wavyLineChart>
-    </div>
-  </div>
+  <bgBox :tabChange="tabChange">
+    <cylindricalHistogram
+      style="left: 50px; top: 425px"
+      v-if="isGetData"
+      title="各区域移栽产量分析"
+      titleEn="Tongren Tobacco Planting Digital Management Platform"
+      :area="Transplantarea"
+      :dataArray="TransplantdataArray"
+    ></cylindricalHistogram>
+    <weatherForecast
+      style="left: 50px; top: 750px"
+      v-if="isWeather"
+      title="天气预报"
+      titleEn="Tongren Tobacco Planting Digital Management Platform"
+      :area="Weatherarea"
+      :dataArray="WeatherdataArray"
+      :alertValue="30"
+    >
+    </weatherForecast>
+    <wavyLineChart
+      id="`wavyLineChart`"
+      style="left: 1470px; top: 105px"
+      v-if="isWavyLine"
+      title="各区域移栽面积"
+      :area="wavyLineArea"
+      :dataArray="wavyLinedataArray"
+      smooth="true"
+    >
+    </wavyLineChart>
+    <HorizontalHistogram
+      style="left: 1470px; top: 425px"
+      v-if="isHorizontal"
+      title="移栽情况分析"
+      :area="HorizontalArea"
+      :dataArray="HorizontalArray"
+    ></HorizontalHistogram>
+    <wavyLineChart
+      id="`移栽趋势分析`"
+      style="left: 1470px; top: 750px"
+      v-if="isWavyLine"
+      title="移栽趋势分析"
+      :area="wavyLineArea"
+      :dataArray="wavyLinedataArray"
+    >
+    </wavyLineChart>
+    <threeMap v-if="hasGetJson" :getJson="getJson"></threeMap>
+  </bgBox>
 </template>
 
 <script>
+import bgBox from '@/components/bgBox/index.vue'
 import { screenSize } from '@/assets/js/utils'
 import cylindricalHistogram from '@/components/Customize/cylindricalHistogram'
 import weatherForecast from '@/components/Customize/weatherForecast'
 import wavyLineChart from '@/components/Customize/wavyLineChart'
 import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
+import threeMap from '@/components/Customize/map/index'
 export default {
   name: `Home`,
   components: {
@@ -63,6 +63,8 @@ export default {
     weatherForecast,
     wavyLineChart,
     HorizontalHistogram,
+    bgBox,
+    threeMap,
   },
   data() {
     return {
@@ -80,10 +82,12 @@ export default {
         Done: [],
         Percentage: [],
       },
+      getJson: ``,
       isGetData: false,
       isWeather: false,
       isWavyLine: false,
       isHorizontal: false,
+      hasGetJson: false,
     }
   },
   computed: {},
@@ -92,6 +96,7 @@ export default {
     this.getWeatherForecast()
     this.getTransplantAreaInEachRegion()
     this.getAnalysisOfTransplantingSituation()
+    this.getJSON()
     this.$http.get(`https://httpbin.org/get`)
   },
 
@@ -140,6 +145,12 @@ export default {
         this.isHorizontal = true
       })
     },
+    async getJSON() {
+      this.getJson = await this.$http.get(
+        `/datav/areas_v3/bound/geojson?code=520600_full`
+      )
+      this.hasGetJson = true
+    },
   },
 }
 </script>