Skip to content

A
adminDemo
Commit 031a31bf by 黄志甲
Options

对接综合门户接口

parent 5df596d1
Showing with 542 additions and 250 deletions
src/commons/api/gateway.js 0 → 100644
import { sendRequest } from "../http/api.js"
//获取区域地址
export const getCityAreaList = params => {
return sendRequest({
url: '/portal/stats/getCityAreaList',
method: 'POST',
params
});
}
//获取年份
export const getYearList = data => {
return sendRequest({
url: '/portal/stats/getYearList',
method: 'POST',
data
});
}
//获取项目状态
export const getStatusCyclicList = data => {
return sendRequest({
url: '/portal/stats/getStatusCyclicList',
method: 'POST',
data
});
}
//底部柱形图数据/portal/stats/getWorkSituationMonthList
export const getWorkSituationMonthList = data => {
return sendRequest({
url: '/portal/stats/getWorkSituationMonthList',
method: 'POST',
data
});
}
/* 任务地图 */
//列表
export const getWorkSituationList = data => {
return sendRequest({
url: '/portal/stats/getWorkSituationList',
method: 'POST',
data
});
}
//实时统计残疾人
export const getIDTKindCountList = data => {
return sendRequest({
url: '/portal/people/getIDTKindCountList',
method: 'GET',
data
});
}
//广西残疾人小康进程实现程度数据
export const getPeopleFairly = data => {
return sendRequest({
url: '/portal/stats/getPeopleFairly',
method: 'GET',
data
});
}
/* 数据库统计 */
//全区持证残疾人
export const getPeopleBaseDataNum = data => {
return sendRequest({
url: '/portal/stats/getPeopleBaseDataNum',
method: 'GET',
data
});
}
//残疾人动态更新数据库2018
export const getPeopleUpdateDataNum = data => {
return sendRequest({
url: '/portal/stats/getPeopleUpdateDataNum',
method: 'GET',
data
});
}
//残疾人动态更新数据库2017
export const getPeopleUpdateData2017Num = data => {
return sendRequest({
url: '/portal/stats/getPeopleUpdateData2017Num',
method: 'GET',
data
});
}
//建档立卡数据库
export const getPeoplePoorOnCard2018Num = data => {
return sendRequest({
url: '/portal/stats/getPeoplePoorOnCard2018Num',
method: 'GET',
data
});
}
//残疾人两项补贴数据库
export const getPeopleAllowanceNum = data => {
return sendRequest({
url: '/portal/stats/getPeopleAllowanceNum',
method: 'GET',
data
});
}
src/commons/http/api.js
...@@ -12,8 +12,7 @@ export const sendRequest = (obj) => { ...@@ -12,8 +12,7 @@ export const sendRequest = (obj) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
//调用请求方法 //调用请求方法
http(obj).then(res => { http(obj).then(res => {
if(res.data.code==200){ if(res.data.success){
console.log("进入这里了")
resolve(res.data) resolve(res.data)
}else { }else {
reject(res) reject(res)
......
src/commons/http/http.js
...@@ -5,7 +5,7 @@ import router from '../../router/index' //引入路由(接口拦截操作) ...@@ -5,7 +5,7 @@ import router from '../../router/index' //引入路由(接口拦截操作)
//所有请求的携带的参数设置 //所有请求的携带的参数设置
const http = axios.create({ const http = axios.create({
baseURL: 'http://baidu.com', // 地址 baseURL: 'http://portal.project.gxdpf.org.cn', // 地址
timeout: 30000 timeout: 30000
}) })
//设置拦截器 //设置拦截器
......
src/router/index.js
...@@ -29,12 +29,12 @@ export default new Router({ ...@@ -29,12 +29,12 @@ export default new Router({
/* 综合门户 */ /* 综合门户 */
{ {
path: '/gateway/handle', path: '/gateway/handle/index',
name: "gateway-handle", name: "gateway-handle",
component: () => import('@/view/gateway/handle/index.vue') //任务处理 component: () => import('@/view/gateway/handle/index.vue') //任务处理
}, },
{ {
path: '/gateway/map', path: '/gateway/map/index',
name: "gateway-map", name: "gateway-map",
component: () => import('@/view/gateway/map/index.vue') //任务地图 component: () => import('@/view/gateway/map/index.vue') //任务地图
}, },
......
src/router/menu.js
const menu = [ const menu = [
// { {
// title: "综合门户", title: "综合门户",
// children: [{ path:'/gateway',
// title: "任务处理", children: [{
// icon: 'ios-people', title: "任务处理",
// children: [{ icon: 'ios-people',
// title: '任务处理', path:"/gateway/handle",
// path: '/gateway/handle', children: [{
// action: 'member-page' title: '任务处理',
// }] path: '/gateway/handle/index',
// },{ action: 'member-page'
// title: "任务地图", }]
// icon: 'ios-people', },{
// children: [{ title: "任务地图",
// title: '任务地图', icon: 'ios-people',
// path: '/gateway/map', path:'/gateway/map',
// action: 'member-page' children: [{
// }] title: '任务地图',
// }, path: '/gateway/map/index',
// { action: 'member-page'
// title: "残疾人统计", }]
// icon: 'ios-people', },
// children: [{ {
// title: '残疾人数据实时统计', title: "残疾人统计",
// path: '/gateway/theDisabled/list', icon: 'ios-people',
// action: 'gateway-theDisabled-list' path:"/gateway/theDisabled",
// }, children: [{
// { title: '残疾人数据实时统计',
// title: '残疾人小康进程实现程度', path: '/gateway/theDisabled/list',
// path: '/gateway/theDisabled/progress', action: 'gateway-theDisabled-list'
// action: 'member-page' },
// }] {
// }, title: '残疾人小康进程实现程度',
// { path: '/gateway/theDisabled/progress',
// title: "数据库统计", action: 'gateway-theDisabled-progress'
// icon: 'ios-people', }]
// children: [{ },
// title: '数据库信息', {
// path: '/gateway/dbNum/index', title: "数据库统计",
// action: 'gateway-dbNum' icon: 'ios-people',
// }] path:'/gateway/dbNum',
// }] children: [{
// }, title: '数据库信息',
path: '/gateway/dbNum/index',
action: 'gateway-dbNum'
}]
}]
},
{ {
title: "党员扶残", title: "党员扶残",
path:"/auxiliaryDisability", path:"/auxiliaryDisability",
......
src/view/Main.vue
...@@ -41,7 +41,8 @@ ...@@ -41,7 +41,8 @@
<Submenu :name="`${index+1}-${key+1}`" v-for="(items,key) in item.children" :key="key"> <Submenu :name="`${index+1}-${key+1}`" v-for="(items,key) in item.children" :key="key">
<template slot="title"> <template slot="title">
<Icon :type="items.icon" /> <Icon :type="items.icon" />
{{items.title}} {{index+1}} - {{key+1}} {{items.title}}
<!-- {{index+1}} - {{key+1}} -->
</template> </template>
<MenuItem <MenuItem
v-for="(v,i) in items.children" :key="i" v-for="(v,i) in items.children" :key="i"
...@@ -49,7 +50,8 @@ ...@@ -49,7 +50,8 @@
:id="`id${index+1}-${key+1}-${i+1}`" :id="`id${index+1}-${key+1}-${i+1}`"
:to="v.path" :to="v.path"
v-if="!v.children"> v-if="!v.children">
{{v.title}} {{index+1}}-{{key+1}}-{{i+1}} {{v.title}}
<!-- {{index+1}}-{{key+1}}-{{i+1}} -->
</MenuItem> </MenuItem>
...@@ -60,13 +62,15 @@ ...@@ -60,13 +62,15 @@
v-if="v.children" v-if="v.children"
> >
<template slot="title"> <template slot="title">
{{v.title}}{{index+1}}-{{key+1}}-{{i+1}} {{v.title}}
<!-- {{index+1}}-{{key+1}}-{{i+1}} -->
</template> </template>
<MenuItem v-for="(vs,is) in v.children" :key="is" <MenuItem v-for="(vs,is) in v.children" :key="is"
:name="`${index+1}-${key+1}-${i+1}-${is+1}`" :name="`${index+1}-${key+1}-${i+1}-${is+1}`"
:id="`id${index+1}-${key+1}-${i+1}-${is+1}`" :id="`id${index+1}-${key+1}-${i+1}-${is+1}`"
:to="vs.path"> :to="vs.path">
{{vs.title}}{{index+1}}-{{key+1}}-{{i+1}}-{{is+1}} {{vs.title}}
<!-- {{index+1}}-{{key+1}}-{{i+1}}-{{is+1}} -->
</MenuItem> </MenuItem>
</Submenu> </Submenu>
...@@ -99,7 +103,6 @@ ...@@ -99,7 +103,6 @@
</Row> </Row>
</Header> </Header>
<Content :style="{padding: '0 16px 16px'}"> <Content :style="{padding: '0 16px 16px'}">
<Breadcrumb :style="{margin: '8px 0'}"> <Breadcrumb :style="{margin: '8px 0'}">
<BreadcrumbItem>{{menu[headerIndex].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[headerIndex].title}}</BreadcrumbItem>
<BreadcrumbItem>{{menu[headerIndex].children[menuIndex].title}}</BreadcrumbItem> <BreadcrumbItem>{{menu[headerIndex].children[menuIndex].title}}</BreadcrumbItem>
...@@ -205,6 +208,7 @@ ...@@ -205,6 +208,7 @@
this.openNames= [] this.openNames= []
this.activeName= '' this.activeName= ''
this.$router.push('/welcome') this.$router.push('/welcome')
}, },
...@@ -218,13 +222,12 @@ ...@@ -218,13 +222,12 @@
item.children.forEach((v, i) => { item.children.forEach((v, i) => {
if (`/${arr[1]}/${arr[2]}` == v.path) { if (`/${arr[1]}/${arr[2]}` == v.path) {
this.openNames = [] this.openNames = []
this.menuIndex = i
this.openNames.push(`${index+1}-${i+1}`) this.openNames.push(`${index+1}-${i+1}`)
v.children.forEach((content, key) => { v.children.forEach((content, key) => {
if (paths == content.path) { if (paths == content.path) {
this.menuChildren = key this.menuChildren = key
this.activeName = `${index+1}-${i+1}-${key+1}` this.activeName = `${index+1}-${i+1}-${key+1}`
console.log(this.$el.querySelector(`#id${index+1}-${i+1}-${key+1}`).offsetTop,'-------------')
} else if (`/${arr[1]}/${arr[2]}/${arr[3]}` == content.path) { } else if (`/${arr[1]}/${arr[2]}/${arr[3]}` == content.path) {
content.children.forEach((vs, is) => { content.children.forEach((vs, is) => {
if (paths == vs.path) { if (paths == vs.path) {
......
src/view/gateway/dbNum/index.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<p class="font-weight-bold color-black3">包括：广西残疾人办证数据、动态更新数据、建档立卡数据、业务服务数据、区直单位服务残疾人数据</p> <p class="font-weight-bold color-black3">包括：广西残疾人办证数据、动态更新数据、建档立卡数据、业务服务数据、区直单位服务残疾人数据</p>
</div> </div>
<Card class="card-div"> <Card class="card-div">
<p slot="title" > <p slot="title">
<span class="font-weight-bold">残疾人基础信息数据库</span> <span class="font-weight-bold">残疾人基础信息数据库</span>
</p> </p>
<Row> <Row>
...@@ -15,14 +15,14 @@ ...@@ -15,14 +15,14 @@
<div class="text-center"> <div class="text-center">
<img src="@/assets/money.png" class="db-img" /> <img src="@/assets/money.png" class="db-img" />
<p>全区持证残疾人</p> <p>全区持证残疾人</p>
<h3>180080（条）</h3> <h3>{{peopleBaseDataNum}}（条）</h3>
</div> </div>
</Col> </Col>
</Row> </Row>
</Card> </Card>
<Card class="card-div"> <Card class="card-div">
<p slot="title" > <p slot="title">
<span class="font-weight-bold">历年动态更新数据库</span> <span class="font-weight-bold">历年动态更新数据库</span>
</p> </p>
<Row> <Row>
...@@ -30,21 +30,21 @@ ...@@ -30,21 +30,21 @@
<div class="text-center"> <div class="text-center">
<img src="@/assets/money.png" class="db-img" /> <img src="@/assets/money.png" class="db-img" />
<p>残疾人动态更新数据库2018</p> <p>残疾人动态更新数据库2018</p>
<h3>180080（条）</h3> <h3>{{peopleUpdateDataNum}}（条）</h3>
</div> </div>
</Col> </Col>
<Col :xs="24" :md="4"> <Col :xs="24" :md="4">
<div class="text-center"> <div class="text-center">
<img src="@/assets/money.png" class="db-img" /> <img src="@/assets/money.png" class="db-img" />
<p>残疾人动态更新数据库2017</p> <p>残疾人动态更新数据库2017</p>
<h3>180080（条）</h3> <h3>{{peopleUpdateData2017Num}}（条）</h3>
</div> </div>
</Col> </Col>
</Row> </Row>
</Card> </Card>
<Card class="card-div"> <Card class="card-div">
<p slot="title" > <p slot="title">
<span class="font-weight-bold">建档立卡贫困残疾人数据库</span> <span class="font-weight-bold">建档立卡贫困残疾人数据库</span>
</p> </p>
<Row> <Row>
...@@ -52,14 +52,14 @@ ...@@ -52,14 +52,14 @@
<div class="text-center"> <div class="text-center">
<img src="@/assets/money.png" class="db-img" /> <img src="@/assets/money.png" class="db-img" />
<p>建档立卡贫困残疾人数据库</p> <p>建档立卡贫困残疾人数据库</p>
<h3>180080（条）</h3> <h3>{{ peoplePoorOnCard2018Num }}（条）</h3>
</div> </div>
</Col> </Col>
</Row> </Row>
</Card> </Card>
<Card class="card-div"> <Card class="card-div">
<p slot="title" > <p slot="title">
<span class="font-weight-bold">残疾人两项补贴数据库</span> <span class="font-weight-bold">残疾人两项补贴数据库</span>
</p> </p>
<Row> <Row>
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
<div class="text-center"> <div class="text-center">
<img src="@/assets/money.png" class="db-img" /> <img src="@/assets/money.png" class="db-img" />
<p>残疾人两项补贴数据库</p> <p>残疾人两项补贴数据库</p>
<h3>180080（条）</h3> <h3>{{peopleAllowanceNum}}（条）</h3>
</div> </div>
</Col> </Col>
</Row> </Row>
...@@ -79,31 +79,84 @@ ...@@ -79,31 +79,84 @@
</template> </template>
<script> <script>
import {
getPeopleBaseDataNum,
getPeopleUpdateDataNum,
getPeopleUpdateData2017Num,
getPeoplePoorOnCard2018Num,
getPeopleAllowanceNum,
} from "@/commons/api/gateway.js"
export default {
data() {
return {
peopleBaseDataNum: 0, //全区残疾人数
peopleUpdateDataNum:0, //2018历年
peopleUpdateData2017Num:0, //2017历年
peoplePoorOnCard2018Num:0, //建档立卡
peopleAllowanceNum:0, //残疾人两项补贴数据库
}
},
created() {
this.getDbNum()
},
methods: {
getDbNum() {
getPeopleBaseDataNum().then(res => {
if (res.success) {
this.peopleBaseDataNum = res.data
}
})
getPeopleUpdateDataNum().then(res=>{
if(res.success){
this.peopleUpdateDataNum = res.data
}
})
getPeopleUpdateData2017Num().then(res=>{
if(res.success){
this.peopleUpdateData2017Num = res.data
}
})
getPeoplePoorOnCard2018Num().then(res=>{
if(res.success){
this.peoplePoorOnCard2018Num = res.data
}
})
getPeopleAllowanceNum().then(res=>{
if(res.success){
this.peopleAllowanceNum = res.data
}
})
}
}
}
</script> </script>
<style > <style>
.cardMargin{ .cardMargin {
margin: 20px 0 20px; margin: 20px 0 20px;
} }
.cardMargin>p{
.cardMargin>p {
padding: 10px 0 10px; padding: 10px 0 10px;
} }
.card-div{
margin:20px 0 0; .card-div {
margin: 20px 0 0;
} }
.db-img{ .db-img {
width:80px; width: 80px;
height:80px; height: 80px;
} }
img{ img {
width: auto; width: auto;
height: auto; height: auto;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
</style> </style>
src/view/gateway/handle/echarts.js
export const option = {
tooltip: {
trigger: 'item',
formatter: function(vent) {
return `状态统计<br/>${vent.data.name}:${vent.data.value}(${vent.data.value}%)`
}
},
legend: {
orient: 'vertical',
top: 'center',
right: 10,
data: ['申请', '公示', '拨款', '完成']
},
grid: {
left: 'center',
top: '20',
right: '20',
bottom: '40'
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 0,
name: '申请'
},
{
value: 0,
name: '公示'
},
{
value: 0,
name: '拨款'
},
{
value: 0,
name: '完成'
}
]
}]
};
export const map = { export const map = {
tooltip: { tooltip: {
...@@ -77,5 +15,3 @@ export const map = { ...@@ -77,5 +15,3 @@ export const map = {
type: 'bar' type: 'bar'
}] }]
} }
src/view/gateway/handle/index.vue
<template> <template>
<Row> <Row>
<Form ref="formCustom" :model="data" :label-width="80"> <Form ref="formCustom" :model="queryData" :label-width="80">
<Row> <Row>
<Col span="4"> <Col span="4">
<FormItem label="项目"> <FormItem label="项目">
<Select v-model="data.project" placeholder="请选择查看项目" class="fromItem"> <Select v-model="queryData.systemId" placeholder="请选择项目" class="fromItem" clearable @on-clear="clear('systemId')">
<Option value="project1">项目1</Option> <Option value="1">项目1</Option>
<Option value="project2">项目2</Option> <Option value="2">项目2</Option>
</Select> </Select>
</FormItem> </FormItem>
</Col> </Col>
...@@ -14,37 +14,43 @@ ...@@ -14,37 +14,43 @@
<Row> <Row>
<Col span="4"> <Col span="4">
<FormItem label="年份"> <FormItem label="年份">
<Select v-model="data.time" placeholder="请选择查看项目" class="fromItem"> <Select v-model="queryData.year" placeholder="请选择年份" class="fromItem" clearable @on-clear="clear('year')">
<Option value="2019">2019</Option> <Option value="0">
<Option value="2020">2020</Option> 请选择年份
<Option value="2021">2021</Option> </Option>
<Option :value="item.year" v-for="(item,index) in yearList" :key="index">
{{item.year}}
</Option>
</Select> </Select>
</FormItem> </FormItem>
</Col> </Col>
<Col span="4" :xs="24" :md="4"> <Col span="4" :xs="24" :md="4">
<FormItem label="地区" class="fromItem"> <FormItem label="地区" class="fromItem">
<Select v-model="data.addres" placeholder="请选择地址" class="fromItem"> <Select v-model="queryData.id" placeholder="请选择地区" class="fromItem" clearable @on-clear="clear('id')">
<Option value="2019">2019</Option> <Option value="0">
<Option value="2020">2020</Option> 请选择地区
<Option value="2021">2021</Option> </Option>
<Option :value="item.id" v-for="(item,index) in cityAreaList" :key="index">
{{item.name}}
</Option>
</Select> </Select>
</FormItem> </FormItem>
</Col> </Col>
<Col span="4"> <Col span="4">
<FormItem> <FormItem>
<Button type="primary">查询</Button> <Button type="primary" @click="getStatusCyclicListFun">查询</Button>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
</Form> </Form>
<Row> <Row >
<Col :xs="24" :md="6" class="row-col"> <Col :xs="24" :md="6" class="row-col">
<Card> <Card>
<div> <div>
<h4>项目状态统计</h4> <h4>项目状态统计</h4>
<p class="pColor">本年度任务数</p> <p class="pColor">本年度任务数{{num}}</p>
</div> </div>
<div> <div>
<div class="display: flex; flex: 1;"> <div class="display: flex; flex: 1;">
...@@ -53,38 +59,20 @@ ...@@ -53,38 +59,20 @@
</div> </div>
</Card> </Card>
</Col> </Col>
<Col :xs="24" :md="4" class="row-col">
<Card> <Col :md="18" >
<div class="know-flex know-wrap konw-center know-align-center know-column mouse"> <Row type="flex" justify="start" align="top" style="height:276px;">
<h3 class="font-30 color-red">0</h3> <Col :xs="24" :md="6" class="row-col" v-for="(item,index) in statusList" :key="index">
<a>申请</a>
</div>
</Card>
</Col>
<Col :xs="24" :md="4" class="row-col">
<Card>
<div class="know-flex know-wrap konw-center know-align-center know-column mouse">
<h3 class="font-30 color-red">0</h3>
<a>公示</a>
</div>
</Card>
</Col>
<Col :xs="24" :md="4" class="row-col">
<Card> <Card>
<div class="know-flex know-wrap konw-center know-align-center know-column mouse"> <div class="know-flex know-wrap konw-center know-align-center know-column mouse">
<h3 class="font-30 color-red">0</h3> <h3 class="font-30 color-red">{{item.value}}</h3>
<a>拨款</a> <a>{{item.name}}</a>
</div> </div>
</Card> </Card>
</Col> </Col>
<Col :xs="24" :md="4" class="row-col"> </Row>
<Card>
<div class="know-flex know-wrap konw-center know-align-center know-column mouse">
<h3 class="font-30 color-red">0</h3>
<a>完成</a>
</div>
</Card>
</Col> </Col>
</Row> </Row>
<Row style="margin-top: 20px;"> <Row style="margin-top: 20px;">
<Col span="24"> <Col span="24">
...@@ -99,42 +87,212 @@ ...@@ -99,42 +87,212 @@
</template> </template>
<script> <script>
import {option , map } from "./echarts.js" //饼图配置 柱形图配置 import {
option,
map
} from "./echarts.js" //饼图配置 柱形图配置
import {
getCityAreaList,
getYearList,
getStatusCyclicList,
getWorkSituationMonthList
} from "@/commons/api/gateway.js"
export default { export default {
data() { data() {
return { return {
data: { queryData: {
project: 'project1', id: "0",
time: "2019", month: "01",
option: option, systemId: "1",
map:map year: "0",
},
cityAreaList: [],
yearList: [],
statusList: [{
value: 0,
name: '申请'
},
{
value: 0,
name: '公示'
},
{
value: 0,
name: '拨款'
},
{
value: 0,
name: '完成'
} }
],
num: 0,
optionList: [],
dataList:[],
time:[]
} }
}, },
created() { created() {
this.option = option this.getCityAreaListFun()
this.getYearListFun()
this.getStatusCyclicListFun()
},
computed: {
},
watch: {
statusList(newsStatusList, oldVal) {
this.num = 0
newsStatusList.map(v => {
this.num += v.value
})
this.drawLine()
},
dataList(newDataList,oldVal){
this.dataFun()
}
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.drawLine() this.drawLine()
this.time() this.dataFun()
}, 500) }, 500)
}, },
methods: { methods: {
//获取区域
getCityAreaListFun() {
getCityAreaList().then(res => {
if (res.success) {
this.cityAreaList = res.data
}
})
},
//获取年份
getYearListFun() {
getYearList().then(res => {
if (res.success) {
this.yearList = res.data
}
})
},
//项目状态&&查询
getStatusCyclicListFun() {
this.num = 0 //清空
this.optionList = []
getStatusCyclicList(this.queryData).then(res => {
if (res.success) {
this.statusList.map(v => {
this.optionList.push(v.name)
})
this.statusList = res.data
}
})
this.getWorkSituationMonthListFun()
},
//柱形图数据
getWorkSituationMonthListFun(){
if(this.queryData.id=="0"){
this.queryData.id = 450000000000
}
getWorkSituationMonthList(this.queryData).then(res=>{
// this.time()
this.dataList = []
this.time = []
if(res.success){
res.data.map(v=>{
this.dataList.push(v.finished)
this.time.push(v.month)
})
}
})
},
drawLine() { drawLine() {
var echarts = require('echarts'); var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('myChart')); var myChart = echarts.init(document.getElementById('myChart'));
let option = {
tooltip: {
trigger: 'item',
formatter: function(vent) {
return `状态统计<br/>${vent.data.name}:${vent.data.value}(${vent.data.value}%)`
}
},
legend: {
orient: 'vertical',
top: 'center',
right: 20,
data: this.optionList
},
grid: {
left: 'center',
top: '20',
right: '50',
bottom: '40'
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: this.statusList
}]
};
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
myChart.resize() myChart.resize()
}) })
}, },
time() {
dataFun() {
var echarts = require('echarts'); var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('time')); var myChart = echarts.init(document.getElementById('time'));
myChart.setOption(map) let dataOption = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: this.time
},
yAxis: {
type: 'value'
},
series: [{
data: this.dataList,
type: 'bar'
}]
}
myChart.setOption(dataOption)
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
myChart.resize() myChart.resize()
}) })
......
src/view/gateway/map/index.vue
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</Card> </Card>
<div style="margin-top:30px;"> <div style="margin-top:30px;">
<Table border :columns="columns1" :data="data1"></Table> <Table border :columns="columns1" :data="list"></Table>
</div> </div>
</Card> </Card>
</Col> </Col>
...@@ -46,13 +46,14 @@ ...@@ -46,13 +46,14 @@
<script> <script>
import mapList from "./map.json" import mapList from "./map.json"
import { getWorkSituationList } from "@/commons/api/gateway.js"
export default { export default {
data() { data() {
return { return {
formItem: { formItem: {
value: '' value: ''
}, },
data1:[], list:[],
columns1: [{ columns1: [{
title: '地区', title: '地区',
key: 'name', key: 'name',
...@@ -60,22 +61,22 @@ ...@@ -60,22 +61,22 @@
}, },
{ {
title: '任务数', title: '任务数',
key: 'age', key: 'taskNum',
align: 'center', align: 'center',
}, },
{ {
title: '资金指标 ', title: '资金指标 ',
key: 'address', key: 'taskFundAmount',
align: 'center', align: 'center',
}, },
{ {
title: '使用资金数', title: '使用资金数',
key: 'address', key: 'finishedAmount',
align: 'center', align: 'center',
}, },
{ {
title: '完成率(%)', title: '完成率(%)',
key: 'address', key: 'finished',
align: 'center', align: 'center',
}, },
{ {
...@@ -86,13 +87,19 @@ ...@@ -86,13 +87,19 @@
], ],
} }
}, },
created() {
this.getWorkSituationListFun()
},
methods: { methods: {
// https://geo.datav.aliyun.com/areas/bound/450000_full.json getWorkSituationListFun(){
getWorkSituationList({
id:"450000000000"
}).then(res=>{
if(res.success){
this.list = res.data
}
})
}
......
src/view/gateway/theDisabled/list.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<Col :xs="24" :md="16"> <Col :xs="24" :md="16">
<Card> <Card>
<h2 slot="title">广西全区持证残疾人统计数据（每1个小时更新一次）</h2> <h2 slot="title">广西全区持证残疾人统计数据（每1个小时更新一次）</h2>
<Table border :columns="listColumns" :data="list"> <Table border :columns="listColumns" :data="list" :loading="loadingType">
<header>数据统计</header> <header>数据统计</header>
</Table> </Table>
</Card> </Card>
...@@ -12,12 +12,13 @@ ...@@ -12,12 +12,13 @@
</template> </template>
<script> <script>
import{getIDTKindCountList} from "@/commons/api/gateway.js"
export default { export default {
data() { data() {
return { return {
listColumns: [{ listColumns: [{
title: '残疾类型', title: '残疾类型',
key: 'type', key: 'idtkind',
align: 'center' align: 'center'
}, { }, {
title: '总人数', title: '总人数',
...@@ -26,45 +27,26 @@ ...@@ -26,45 +27,26 @@
align: 'center' align: 'center'
}, { }, {
title: '6-16岁学龄儿童人数', title: '6-16岁学龄儿童人数',
key: 'nums', key: 'numYoung',
sortable: true, sortable: true,
align: 'center' align: 'center'
}], }],
list: [{ list: [],
type: 'John Brown', loadingType:true
num: 17,
nums: 3088
},
{
type: 'John Brown',
num: 16,
nums: 3088
},
{
type: 'John Brown',
num: 15,
nums: 3088
},
{
type: 'John Brown',
num: 14,
nums: 3088
},
{
type: 'John Brown',
num: 13,
nums: 3088
},
{
type: 'John Brown',
num: 12,
nums: 3088
},
]
} }
}, },
created() {
this.getIDTKindCountListFun()
},
methods: { methods: {
getIDTKindCountListFun(){
getIDTKindCountList().then(res=>{
if(res.success){
this.list = res.data
this.loadingType= false
}
})
}
} }
......
src/view/gateway/theDisabled/progress.vue
...@@ -4,37 +4,46 @@ ...@@ -4,37 +4,46 @@
<div class="text-center"> <div class="text-center">
<h1>广西残疾人小康进程实现程度数据</h1> <h1>广西残疾人小康进程实现程度数据</h1>
</div> </div>
<Table border :columns="listColumns" :data="list"> <Table border :columns="listColumns" :data="data">
<header>数据统计</header> <header>数据统计</header>
<template slot-scope="{ row, index }" slot="value">
{{row.value}}%
</template>
<template slot-scope="{ row, index }" slot="census">
{{row.census}}%
</template>
</Table> </Table>
</Col> </Col>
</Row> </Row>
</template> </template>
<script> <script>
import { getPeopleFairly } from "@/commons/api/gateway.js"
export default { export default {
data() { data() {
return { return {
listColumns: [{ listColumns: [{
title: '序号', title: '序号',
key: 'index', key: 'id',
align: 'center' align: 'center',
sortable: true,
}, { }, {
title: '主要指标 ', title: '主要指标 ',
key: 'num', key: 'name',
sortable: true, sortable: true,
align: 'center' align: 'center'
}, { }, {
title: '目标值 ', title: '目标值 ',
key: 'nums', key: 'value',
sortable: true, sortable: true,
align: 'center', align: 'center',
width:100, width:100,
minWidth:100 minWidth:100,
slot:'value'
}, },
{ {
title: '完成数', title: '完成数',
key: 'nums', key: 'finishedNum',
sortable: true, sortable: true,
align: 'center', align: 'center',
width:100, width:100,
...@@ -42,7 +51,7 @@ ...@@ -42,7 +51,7 @@
}, },
{ {
title: '任务数 ', title: '任务数 ',
key: 'nums', key: 'workNum',
sortable: true, sortable: true,
align: 'center', align: 'center',
width:100, width:100,
...@@ -50,27 +59,38 @@ ...@@ -50,27 +59,38 @@
}, },
{ {
title: '完成率', title: '完成率',
key: 'nums',
sortable: true, sortable: true,
align: 'center',
width:100, width:100,
minWidth:100 minWidth:100,
slot:'census'
}, },
{ {
title: '完成数（含来源、时间、范围）', title: '完成数（含来源、时间、范围）',
key: 'nums', key: 'workContent',
align: 'center', align: 'center',
width:280 width:280
}, },
{ {
title: '任务数（含来源、时间、范围）', title: '任务数（含来源、时间、范围）',
key: 'nums', key: 'finishedContent',
align: 'center', align: 'center',
width:280 width:280
}], }],
data:[]
} }
}, },
created() {
this.getPeopleFairlyFun()
},
methods: { methods: {
getPeopleFairlyFun(){
getPeopleFairly().then(res=>{
if(res.success){
this.data = res.data
}
})
}
} }
......
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