Commit 76d57fbd by 黄志甲

完成地图

parent 030969c1
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',
});
}
//实时统计残疾人
......
/*包含n个请求函数的模块
* 函数的返回值:promise
* 第一个参数(url),第二个参数(post/get)--字符串*/
* 函数的返回值:promise
* 第一个参数(url),第二个参数(post/get)--字符串*/
import http from './http'
/**
* 基础请求
......@@ -9,62 +9,85 @@ import http from './http'
* @param method 请求方式: POST(默认)、GET
* */
export const sendRequest = (obj) => {
return new Promise((resolve, reject) => {
//调用请求方法
http(obj).then(res => {
if(res.data.success){
resolve(res.data)
}else {
reject(res)
}
}).catch(err => {
reject(err)
})
return new Promise((resolve, reject) => {
//调用请求方法
http(obj).then(res => {
if (res.data.success) {
resolve(res.data)
} else {
reject(res)
}
}).catch(err => {
reject(err)
})
})
} //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 => {
if (res.status === 200) {
resolve(res)
} else {
reject(res)
}
}).catch(err => {
reject(err)
})
return new Promise((resolve, reject) => {
//调用请求方法
http.get(url, {
params: params,
responseType: 'blob'
}).then(res => {
if (res.status === 200) {
resolve(res)
} else {
reject(res)
}
}).catch(err => {
reject(err)
})
})
}
/**
* 发送POST请求,获取Excel文件流
* */
export const sendPostExcelStream = (url, params) => {
return new Promise((resolve, reject) => {
//调用请求方法
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) {
// 转换完成,创建一个a标签用于下载
var a = document.createElement('a')
a.download = params.getStreamPage
a.href = e.target.result
a.click()
}
}
resolve(res)
}).catch(err => {
reject(err)
})
return new Promise((resolve, reject) => {
//调用请求方法
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) {
// 转换完成,创建一个a标签用于下载
var a = document.createElement('a')
a.download = params.getStreamPage
a.href = e.target.result
a.click()
}
}
resolve(res)
}).catch(err => {
reject(err)
})
})
}
......@@ -72,23 +95,23 @@ export const sendPostExcelStream = (url, params) => {
* 文件上传
* */
export const fileUpload = (url, params) => {
return new Promise((resolve, reject) => {
let formData = new FormData()
for (let i in params) {
formData.append(i, params[i])
return new Promise((resolve, reject) => {
let formData = new FormData()
for (let i in params) {
formData.append(i, params[i])
}
http.post(url, formData).then(res => {
if (res.status === 200) {
if (res.data.success) {
resolve(res.data)
} else {
reject(res)
}
http.post(url, formData).then(res => {
if (res.status === 200) {
if (res.data.success) {
resolve(res.data)
} else {
reject(res)
}
} else {
reject(res)
}
}).catch(err => {
reject(err)
})
} else {
reject(res)
}
}).catch(err => {
reject(err)
})
})
}
......@@ -13,7 +13,7 @@
}]
},{
title: "任务地图",
icon: 'ios-people',
icon: 'md-map',
path:'/gateway/map',
children: [{
title: '任务地图',
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment