添加数据

src/assets/css/variables.styl

@@ -3,6 +3,7 @@ $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
 $font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
 $color-map(opacity = 0.3)
   rgba(91, 213, 255, opacity)
+$color-green = #71C012
 $gd-layout()
   width 100%
   height 100%

src/views/3d-map.vue

@@ -70,8 +70,8 @@ export default {
         viewMode:'3D',//开启3D视图,默认为关闭
         buildingAnimation:true,//楼块出现是否带动画
         expandZoomRange:true,
-        zooms:[17,20],
-        center:[121.497915,31.218138],
+        zooms:[15,20],
+        center:[121.497915,31.218138], // 黄浦
 
         showIndoorMap:false,
         // mapStyle:'amap://styles/light',
@@ -86,7 +86,6 @@ export default {
         const location = [e.lnglat.getLng(), e.lnglat.getLat()]
         this.map.setZoomAndCenter(18.8, location)
         console.log(e, e.lnglat.getLng() + ',' + e.lnglat.getLat())
-        this.showDetail(e, location)
       })
 
       this.map.addControl(new AMap.ControlBar({
@@ -98,14 +97,14 @@ export default {
         }
       }))
 
-      new AMap.Polygon({
-        bubble:true,
-        fillColor: 'blue',
-        fillOpacity:0.2,
-        strokeWeight:1,
-        path:this.buildingOptions.areas[0].path,
-        map:this.map
-      })
+      // new AMap.Polygon({
+      //   bubble:true,
+      //   fillColor: 'green',
+      //   fillOpacity:0.2,
+      //   strokeWeight:1,
+      //   path:this.buildingOptions.areas[0].path,
+      //   map:this.map
+      // })
       // new AMap.Polygon({
       //   bubble:true,
       //   fillOpacity:0.2,
@@ -113,15 +112,31 @@ export default {
       //   path:this.buildingOptions.areas[1].path,
       //   map:this.map
       // })
-
+      const marker = new AMap.Marker({
+        map: this.map,
+        position: [121.498973,31.218018],
+        extData: {
+          title: '测试点击',
+          content: '测试额外附加数据',
         },
-    showDetail(e, location) {
+        icon: new AMap.Icon({
+          size: new AMap.Size(30, 30),  //图标大小
+          image: require('@/assets/images/attorney.png'),
+          // imageOffset: new AMap.Pixel(0, -60)
+        })
+      })
+      marker.on('click', e => {
+        const location = [e.lnglat.getLng(), e.lnglat.getLat()]
+        this.showDetail(e, location, marker.getExtData())
+      })
+    },
+    showDetail(e, location, data) {
       // TODO
       const infoWindow = new AMap.InfoWindow({
         content: `
             <div>
-              <b>测试建筑物</b>
-              <p>电话 : 021-1234567   邮编 : 200000</p>
+              <b>${data.title}</b>
+              <p>${data.content}</p>
             </div>
           `
       })
@@ -141,4 +156,8 @@ export default {
 .amap-logo
 .amap-copyright
   display none !important
+.amap-icon
+  img
+    width 100%
+    height 100%
 </style>

src/views/guangdong/components/apply-demand-list.vue

@@ -51,7 +51,7 @@ export default {
       justify-content space-between
       b
         font-size 1.1rem
-        color #71C012
+        color $color-green
       .unit
         font-size 0.5rem
         margin-left 0.2rem

src/views/guangdong/components/production-list.vue

+<template>
+  <ul class="list">
+    <li class="row">
+      <p>市</p>
+      <p>养殖面积(公顷)</p>
+      <p>产值(万元)</p>
+    </li>
+    <li class="row" v-for="(item, i) in list" :key="item.name + i">
+      <p>{{item.name}}</p>
+      <p><b><m-count :value="item.area" :decimal="0"/></b></p>
+      <p><b><m-count :value="item.output"/></b></p>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'ProductionList',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.list
+  height 100%
+  overflow auto
+  padding 0.5rem 1rem
+.row
+  display flex
+  color #ccc
+  padding 0.5rem 0
+  align-items center
+  justify-content space-between
+  border-bottom 0.1rem solid rgba(28, 66, 95, 0.4)
+  &:first-child
+    color $color-map(1)
+  p
+    width 40%
+    text-align right
+    &:first-child
+      width 20%
+      text-align center
+    &:last-child
+      b
+        color $color-green
+    b
+      color #FFCE34
+</style>

src/views/guangdong/components/progress-list.vue

@@ -48,7 +48,7 @@ export default {
       width 21%
     b
       font-size 1.1rem
-      color #71C012
+      color $color-green
     .unit
       font-size 0.5rem
       margin-left 0.2rem

src/views/guangdong/gd-disease.vue

@@ -8,13 +8,13 @@
       <p>损失<b><m-count :value="sum.loss"/></b>万元</p>
     </div>
     <div class="box1">
-      <m-card mode="2" title="各疫病的发病次数(次)">
-        <DataList :list="disease" :decimal="0"/>
+      <m-card mode="2" title="各市疫病情况">
+        <DiseaseList :list="citySituation"/>
       </m-card>
     </div>
     <div class="box2">
-      <m-card mode="2" title="各市疫病情况">
-        <DiseaseList :list="citySituation"/>
+      <m-card mode="2" title="各疫病的发病次数(次)">
+        <DataList :list="disease" :decimal="0"/>
       </m-card>
     </div>
     <div class="box3">

src/views/guangdong/gd-fish.vue

@@ -69,7 +69,7 @@ export default {
           boundaryGap: false,
         },
         yAxis: {
-          name: '(元/公斤)',
+          name: '(元)',
           max: 8,
         },
         series: {
@@ -122,10 +122,10 @@ export default {
         span
           background #5BD5FF
       &:last-child
-        color #71C012
+        color $color-green
         margin-left 3rem
         span
-          background #71C012
+          background $color-green
       span
         display inline-block
         width 0.8rem

src/views/guangdong/gd-industry.vue

@@ -119,7 +119,7 @@ export default {
           data: this.fishChartData.name,
         },
         yAxis: {
-          name: data.unit,
+          name: `(${data.unit})`,
         },
         series: {
           type: 'bar',

src/views/guangdong/gd-production.vue

@@ -14,7 +14,7 @@
     </div>
     <div class="box2">
       <m-card mode="2" title="各市养殖面积(亩)">
-        <DataList :list="list2"/>
+        <ProductionList :list="cityData"/>
       </m-card>
     </div>
     <div class="box3">
@@ -27,6 +27,7 @@
 
 <script>
 import DataList from './components/list'
+import ProductionList from './components/production-list'
 import ThemeTitle from './components/title'
 import GuangdongMap from './components/map'
 import axios from 'axios'
@@ -34,6 +35,7 @@ export default {
   name: 'GDProduction',
   components: {
     DataList,
+    ProductionList,
     ThemeTitle,
     GuangdongMap,
   },
@@ -42,29 +44,7 @@ export default {
       area: 0,
       production: [],
       specialProduction: [],
-      list2: [
-        {name: '广州市', value: 7434.40, unit: ''},
-        {name: '韶关市', value: 18218.06, unit: ''},
-        {name: '深圳市', value: 1996.85, unit: ''},
-        {name: '珠海市', value: 1711.24, unit: ''},
-        {name: '汕头市', value: 2198.70, unit: ''},
-        {name: '佛山市', value: 3875, unit: ''},
-        {name: '江门市', value: 9505, unit: ''},
-        {name: '湛江市', value: 13225.44, unit: ''},
-        {name: '茂名市', value: 11458, unit: ''},
-        {name: '肇庆市', value: 7434.40, unit: ''},
-        {name: '惠州市', value: 11599, unit: ''},
-        {name: '梅州市', value: 15864.5, unit: ''},
-        {name: '汕尾市', value: 5271, unit: ''},
-        {name: '河源市', value: 15642, unit: ''},
-        {name: '阳江市', value: 7955.9, unit: ''},
-        {name: '清远市', value: 19000, unit: ''},
-        {name: '东莞市', value: 2460.10, unit: ''},
-        {name: '中山市', value: 1783.67, unit: ''},
-        {name: '潮州市', value: 3679, unit: ''},
-        {name: '揭阳市', value: 5240.5, unit: ''},
-        {name: '云浮市', value: 7785.11, unit: ''},
-      ],
+      cityData: [],
       options: {
         xAxis: {
           data: [],

static/gd-industry.json

@@ -33,7 +33,7 @@
       {"name": "稚龟", "unit": "万只", "data": [546, 547, 564, 665]},
       {"name": "鳗苗", "unit": "千克", "data": [835, 801, 800, 43]},
       {"name": "虾类", "unit": "亿尾", "data": [4000, 4000, 4100, 5455]},
-      {"name": "贝类", "unit": "", "data": [605659, 245210, 255032, 293678]},
+      {"name": "贝类", "unit": "万颗", "data": [605659, 245210, 255032, 293678]},
       {"name": "罗非鱼", "unit": "亿尾", "data": [116.65, 113, 104.54, 102.24]}
     ]
   }

static/gd-production.json

 {
-  "area": 482540,
+  "area": 478897,
+  "cityData": [
+    {"name": "广州市", "area": 23010, "output": 338068.2145},
+    {"name": "韶关市", "area": 15968, "output": 101234.3071},
+    {"name": "深圳市", "area": 1126, "output": 211927.7261},
+    {"name": "珠海市", "area": 25697, "output": 786416.7286},
+    {"name": "汕头市", "area": 15330, "output": 603102.5457},
+    {"name": "佛山市", "area": 34888, "output": 1704450.882},
+    {"name": "江门市", "area": 55194, "output": 1783605.536},
+    {"name": "湛江市", "area": 81382, "output": 2472339.802},
+    {"name": "茂名市", "area": 37383, "output": 852607.1035},
+    {"name": "肇庆市", "area": 33945, "output": 549175.9952},
+    {"name": "惠州市", "area": 17670, "output": 277631.0517},
+    {"name": "梅州市", "area": 10697, "output": 122771.9367},
+    {"name": "汕尾市", "area": 18408, "output": 706701.8312},
+    {"name": "河源市", "area": 5664, "output": 46794.78575},
+    {"name": "阳江市", "area": 31472, "output": 2101692.311},
+    {"name": "清远市", "area": 16861, "output": 187195.4563},
+    {"name": "东莞市", "area": 5596, "output": 70267.57092},
+    {"name": "中山市", "area": 20596, "output": 623650.283},
+    {"name": "潮州市", "area": 13030, "output": 246433.1558},
+    {"name": "揭阳市", "area": 8219, "output": 245622.1037},
+    {"name": "云浮市", "area": 6762, "output": 122186.4332}
+  ],
   "production": [
     {"name": "海水养殖产量", "unit": "", "value":	3167259},
     {"name": "鱼类", "unit": "", "value":	594793},