完成地图

src/commons/api/gateway.js

-import { sendRequest } from "../http/api.js"
+import { sendRequest,getJson } from "../http/api.js"
 
 
 //获取区域地址
@@ -53,6 +53,16 @@ export const getWorkSituationList = data => {
 }
 
 
+//地图数据
+export const getMapJson = data => {
+  return getJson({
+    url: `/static/portal/${data}.json`,
+    method: 'GET',
+  });
+}
+
+
+
 
 
 //实时统计残疾人

src/commons/http/api.js

 /*包含n个请求函数的模块
-* 函数的返回值：promise
-* 第一个参数（url），第二个参数（post/get）--字符串*/
+ * 函数的返回值：promise
+ * 第一个参数（url），第二个参数（post/get）--字符串*/
 import http from './http'
 /**
  * 基础请求
@@ -12,9 +12,9 @@ export const sendRequest = (obj) => {
   return new Promise((resolve, reject) => {
     //调用请求方法
     http(obj).then(res => {
-            if(res.data.success){
+      if (res.data.success) {
         resolve(res.data)
-            }else {
+      } else {
         reject(res)
       }
     }).catch(err => {
@@ -23,13 +23,34 @@ export const sendRequest = (obj) => {
   })
 } //post
 
+
+export const getJson = (obj) => {
+  return new Promise((resolve, reject) => {
+    //调用请求方法
+    http(obj).then(res => {
+      resolve(res.data)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+
+
+
+
+
+
 /**
  * 发送GET请求， 获取图片流
  * */
 export const getImgStream = (url, params) => {
   return new Promise((resolve, reject) => {
     //调用请求方法
-        http.get(url, {params: params, responseType: 'blob'}).then(res => {
+    http.get(url, {
+      params: params,
+      responseType: 'blob'
+    }).then(res => {
       if (res.status === 200) {
         resolve(res)
       } else {
@@ -47,12 +68,14 @@ export const getImgStream = (url, params) => {
 export const sendPostExcelStream = (url, params) => {
   return new Promise((resolve, reject) => {
     //调用请求方法
-        http.post(url, params,{responseType: 'blob'}).then(res => {
+    http.post(url, params, {
+      responseType: 'blob'
+    }).then(res => {
       if (res.status === 200) {
         var blob = res.data
         var reader = new FileReader()
         reader.readAsDataURL(blob) // 转换为base64，可以直接放入a表情href
-                reader.onload = function (e) {
+        reader.onload = function(e) {
           // 转换完成，创建一个a标签用于下载
           var a = document.createElement('a')
           a.download = params.getStreamPage

src/router/menu.js

@@ -13,7 +13,7 @@
       }]
     },{
       title: "任务地图",
-      icon: 'ios-people',
+      icon: 'md-map',
       path:'/gateway/map',
       children: [{
         title: '任务地图',

src/view/gateway/map/index.vue

@@ -2,8 +2,19 @@
   <Row>
     <Col :xs="24" :md="13" class="row-col">
     <Card>
-      <p slot="title">任务完成情况</p>
-      <div></div>
+      <Row slot="title">
+        <Col span="12">
+        <span class="font-28">任务完成情况</span>
+        </Col>
+        <Col span="12">
+        <div class="text-right">
+          <Button @click="getWorkSituationListFun(),queryInfo.id='450000000000'">
+            返回上级地区
+          </Button>
+        </div>
+        </Col>
+      </Row>
+      <div id="map" style="width:100%;height: 800px;"></div>
     </Card>
     </Col>
     <Col :xs="24" :md="11" class="row-col">
@@ -46,14 +57,20 @@
 
 <script>
   import mapList from "./map.json"
-  import { getWorkSituationList } from "@/commons/api/gateway.js"
+  import {
+    getWorkSituationList,
+    getMapJson
+  } from "@/commons/api/gateway.js"
+  import {
+    getJson
+  } from "@/commons/http/api.js"
   export default {
     data() {
       return {
         formItem: {
           value: ''
         },
-        list:[],
+        list: [],
         columns1: [{
             title: '地区',
             key: 'name',
@@ -85,24 +102,123 @@
             align: 'center',
           }
         ],
+
+        queryInfo: {
+          id: '450000000000',
+          systemId: 1,
+          year: '0',
+          mapId: 'g450000'
+        }
+
+
       }
     },
     created() {
       this.getWorkSituationListFun()
     },
     methods: {
-      getWorkSituationListFun(){
-        getWorkSituationList({
-          id:"450000000000"
-        }).then(res=>{
-          if(res.success){
+      getWorkSituationListFun() {
+        getWorkSituationList(this.queryInfo).then(res => {
+          if (res.success) {
             this.list = res.data
+            let dataList = []
+            res.data.map((v, i) => {
+              dataList.push(v)
+              dataList[i].value = v.finished
+            })
+            this.getMapJsonFun(dataList, `g${(this.queryInfo.id).slice(0,6)}`)
           }
         })
+      },
+
+
+
+
+      //地图
+      getMapJsonFun(dataList, areaId) {
+        var that = this
+        var echarts = require('echarts');
+        var myChart = echarts.init(document.getElementById('map'));
+        getMapJson(areaId).then(res => {
+          echarts.registerMap('GX', res);
+          let option = {
+            // title: {
+            //   text: '项目任务完成情况',
+            // },
+            tooltip: {
+              trigger: 'item',
+              formatter: function(data) {
+                return data.data.finished + '%(完成数 / 指标数)';
+              }
+            },
+            toolbox: {
+              show: true,
+              orient: 'vertical',
+              left: 'right',
+              top: 'center',
+              feature: {
+                dataView: {
+                  readOnly: false
+                },
+                restore: {},
+                saveAsImage: {}
+              }
+            },
+            visualMap: {
+              min: 0,
+              max: 100,
+              text: ['高完成率%', '低完成率%'],
+              realtime: false,
+              calculable: true,
+              inRange: {
+                color: ['orangered', 'yellow', 'lightskyblue']
+              }
+            },
+            series: [{
+              name: '项目任务完成情况',
+              type: 'map',
+              mapType: 'GX', // 自定义扩展图表类型
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true
+                  }
+                },
+                emphasis: {
+                  label: {
+                    show: true
+                  }
+                }
+              },
+              data: dataList,
+              // 自定义名称映射
+              nameMap: {
+                'nanning': '南宁市',
+                'liuzhou': '柳州市',
+                'guilin': '桂林市'
+              }
+            }]
           }
+          myChart.setOption(option);
 
+          //点击事件
+          myChart.on('click', function(params) {
+            console.log(params.data);
+            that.queryInfo.id = params.data.areaId
+            that.getWorkSituationListFun()
+          })
+
+
+
+        })
 
 
+
+
+      }
+    },
+    mounted() {
+      //this.getMapJsonFun()
     }
   }
 </script>