<template>
<panel-container>
<modular-layout type="roundCorner">
<panel-title-1>资源环境</panel-title-1>
<div class="Modular_main">
<div>
<vue-scroll>
<!--规划用地-->
<TitleThree>规划用地</TitleThree>
<div class="PlanningLand">
<div class="landList">
<gauge-item
title="居住用地"
chart-id="ghyd_jzyd"
:width="guage.width"
:height="guage.height"
color="#fe0000"
:data="ghyd_jzyd"
/>
</div>
<div class="landList">
<gauge-item
title="物流仓库用地"
chart-id="ghyd_wlckyd"
:width="guage.width"
:height="guage.height"
color="#fbae06"
:data="ghyd_wlckyd"
/>
</div>
<div class="landList">
<gauge-item
title="公共设施用地"
chart-id="ghyd_ggssyd"
:width="guage.width"
:height="guage.height"
color="#1efe00"
:data="ghyd_ggssyd"
/>
</div>
<div class="landList">
<gauge-item
title="绿地与广场用地"
chart-id="ghyd_ldygcyd"
:width="guage.width"
:height="guage.height"
color="#09fbfd"
:data="ghyd_ldygcyd"
/>
</div>
<div class="landList">
<gauge-item
title="城市建设用地"
chart-id="ghyd_csjsyd"
:width="guage.width"
:height="guage.height"
color="#fc00ea"
:data="ghyd_csjsyd"
/>
</div>
<div class="landList">
<gauge-item
title="道路交通用地"
chart-id="ghyd_csjsyd1"
:width="guage.width"
:height="guage.height"
color="#d9eb33"
:data="ghyd_csjsyd1"
/>
</div>
</div>
<div class="bioBasis">
<!--生态结构-->
<div style="width: 37.9%">
<TitleThree>生态结构</TitleThree>
<simple-board :data="stjg" />
</div>
<!--基础设施-->
<div style="width: 62%; margin-left: .05rem;" id="infrastructure_box">
<TitleThree>基础设施</TitleThree>
<div>
<EchartLine
:id="infrastructure.id"
:width="infrastructure.width"
:height="infrastructure.height"
:legend="infrastructure.legend"
:xAxisData="infrastructure.xAxisData"
:yAxisData="infrastructure.yAxisData"
/>
</div>
</div>
</div>
<div class="row">
<div class="col-70">
<TitleThree title="项目建设"/>
<div class="row" style="margin:0;">
<div class="col-50" style="padding-left: 20px;">
<div class="module-corner" style="padding-right: 10px;">
<div class="column2" style=" padding: .02rem 0;">
<div>
<Legend :list="[['项目数', '#bd273c ']]" />
<div v-for="(value,index) in project_build_bar" :key="index">
<ProgressBar1 :data="value" :labelWidth="`80px`" />
</div>
</div>
</div>
<Corner />
</div>
</div>
<div class="col-50" style="padding-left: 20px;">
<div class="module-corner" style="padding-bottom: 20px;" id="project-build-pie-box">
<EchartPieAnnular
:id="project_build_pie.id"
:width="project_build_pie.width"
:height="project_build_pie.height"
:legend="project_build_pie.legend"
:seriesData="project_build_pie.seriesData"
/>
<Corner />
</div>
</div>
</div>
</div>
<div class="col-30">
<TitleThree title="工地建设" />
<div class="Modular_left Modular_right">
<DataListCols :data="siteBuild" :title="['名称','数量']" />
</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</modular-layout>
</panel-container>
<!--</div>-->
<!--</div>-->
</template>
<script>
import LitterTitle from '@/components/title/LitterTitle'
import {countSize} from '@/utils/utils'
import DataListCols from '@/components/board/DataListCols'
import Legend from '@/components/legend/Legend'
import ProgressBar1 from '@/components/progressBar/ProgressBar1'
import IconList2 from './components/IconList2'
import Corner from '@/components/Corner'
import EchartPieAnnular from '@/components/echart/EchartPieAnnular'
import EchartLineNoY from '@/components/echart/EchartLineNoY'
import EchartLine from '@/components/echart/EchartLine'
import BigNumber from 'bignumber.js'
import { fetchProjectBuild } from '@/api/cityPlan.js'
import EchartGauge1 from '../../components/echart/EchartGauge1'
import GaugeItem from './components/gaugeItem'
import SimpleBoard from '../../components/board/SimpleBoard'
export default {
components: {
SimpleBoard,
GaugeItem,
EchartGauge1,
DataListCols,
LitterTitle,
Legend,
ProgressBar1,
IconList2,
Corner,
EchartPieAnnular,
EchartLineNoY,
EchartLine
},
data () {
return {
guage: {
width: 0,
height: 0
},
// 规划用地-居住用地
ghyd_jzyd: {
total: '1420.58',
already: '100',
rate: 25.74
},
// 规划用地-物流仓库用地
ghyd_wlckyd: {
total: '92.85',
already: '354',
rate: 1.68
},
// 规划用地-公共设施用地
ghyd_ggssyd: {
total: '3.15',
already: '300',
rate: 0.06
},
// 规划用地-绿地与广场用地
ghyd_ldygcyd: {
total: '1316.60',
already: '250',
rate: 23.86
},
// 规划用地-城市建设用地
ghyd_csjsyd: {
total: '926.57',
already: '400',
rate: 20
},
// 规划用地-道路交通用地
ghyd_csjsyd1: {
total: '1324.63',
already: '400',
rate: 24
},
// 生态结构
stjg: [
{ name: '中央景观走廊', total: '1'},
{ name: '城市长廊', total: '5'},
{ name: '生态公园', total: '7'},
{ name: '城市公园', total: '18'},
{ name: '湖泊', total: '4'},
{ name: '河流', total: '2'}
],
// 规划用地
ghyd_option: {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
color: ['#c23531'],
series: [
{
name: '业务指标',
type: 'gauge',
title: {
fontSize: '85%',
offsetCenter: [0, '70%'],
backgroundColor: {
image: require('@/assets/images/complete.png')
},
fontFamily: 'Arial',
width: countSize(0.54),
height: countSize(0.25),
lineHeight: countSize(0.3),
color: '#00caff',
rich: {}
},
data: [
{
value: 50,
name: '完成率'
}
],
detail: {
formatter: '{value}%',
offsetCenter: [0, '-5%'],
color: 'red',
fontSize: '150%',
fontWeight: 'bold',
fontFamily: 'sans-serif'
},
pointer: {
// 指针
show: false
},
// 分隔线样式。
splitLine: {
show: false
},
// 刻度样式
axisTick: {
show: false
},
// 刻度单位标签。10,20,30。
axisLabel: {
show: false
},
axisLine: {
// 坐标轴线 整体圆的粗细
show: true,
lineStyle: {
// 属性lineStyle控制线条样式
width: 9,
color: [[1, '#262795']]
}
}
},
{
name: '进度条',
type: 'gauge',
// 半径
// radius: 65,
// 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
startAngle: 225,
// 结束角度。
endAngle: 0,
center: ['50%', '50%'],
// 仪表盘轴线相关配置。
axisLine: {
// 坐标轴线
show: true,
lineStyle: {
// 属性lineStyle控制线条样式
width: 9,
color: [
[
1,
new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#0336ff'
},
{
offset: 1,
color: '#01b4ff'
}
])
]
]
}
},
// 分隔线样式。
splitLine: {
show: false
},
// 刻度样式
axisTick: {
show: false
},
// 刻度标签。
axisLabel: {
show: false
},
// 仪表盘指针。
pointer: {
show: false
},
// 仪表盘标题。
title: {
show: false
},
// 仪表盘详情，用于显示数据。
detail: {
show: false
},
zlevel: 2
}
]
},
// 基础设施
infrastructure: {
id: 'infrastructure_id',
width: 0,
height: 0,
xAxisData: ['道路设施', '轨道设施', '行政设施', '教育设施', '商业设施', '金融邮电设施', '商业设施', '社会福利设施', '社区服务设施', '市政设施', '文化设施', '医疗设施' ],
legend: ['总数量', '现状', '新增'],
yAxisData: [
{name: '总数量', data: [ 855, 1078, 856, 865, 990, 782, 1210, 867, 689, 777, 878, 1043, 478, 999 ], color: '255,45,85'},
{name: '现状', data: [545, 745, 546, 575, 777, 467, 710, 567, 590, 430, 610, 701], color: '0,144,255'},
{name: '新增', data: [300, 232, 233, 454, 190, 330, 210, 154, 390, 130, 310, 218], color: '255,204,0'}
]
},
// 项目建设
project_build_bar: [
{title: '0%-20%', num: 50, max: 100},
{title: '20%-40%', num: 40, max: 100},
{title: '40%-60%', num: 60, max: 110},
{title: '60%-80%', num: 70, max: 110},
{title: '80%-100%', num: 30, max: 110}
],
project_build_pie: {
id: 'project-build-pie',
width: 0,
height: 0,
legend: ['未开始', '在建', '已完成'],
seriesData: [
{value: 34, name: '未开始'},
{value: 34, name: '在建'},
{value: 34, name: '已完成'}
]
},
// 工地建设
siteBuild: [
{name: '潭东镇', num1: '100'},
{name: '潭口镇', num1: '200'},
{name: '高校园区', num1: '300'}
]
}
},
created () {},
mounted () {
this.calGuageSize()
// 饼图
// let legend = []
// let seriesData = [{name: '绿化', value: 50, max: 100},
// {name: '绿化1', value: 40, max: 100},
// {name: '绿化2', value: 60, max: 110}]
// this.$set(this.project_build_pie, 'seriesData', seriesData)
this.callEchart(this.project_build_pie, 'project-build-pie-box', 1.55)
// 查询项目建设/项目管理
this.getProjectBuild()
// 智慧项管--业务运行
this.getBusiness()
// 基础设施
this.callEchart(this.infrastructure, 'infrastructure_box', 2.32)
},
methods: {
// 计算油表盘大小
calGuageSize () {
this.callEchart(this.guage, 'ghyd_jzyd', 1)
},
// 查询项目建设/项目管理
getProjectBuild () {
fetchProjectBuild().then(res => {
// debugger
let data = res.data
if (data) {
// 进度条
let bb = []
for (let i = 0; i < data.length; i++) {
bb.push(Number(data[i].SL))
};
let max = Math.max(...bb)
data.map((item, index) => {
this.project_build_bar.push({title: item.XMJD, num: Number(item.SL), max})
})
// 饼图
let legend = []
let seriesData = []
data.forEach(item => {
seriesData.push({value: Number(item.ZB), name: item.XMJD})
})
this.$set(this.project_build_pie, 'seriesData', seriesData)
this.callEchart(this.project_build_pie, 'project-build-pie-box', 1.55)
}
})
},
getBusiness () {
let params = {
appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
id: '155',
flag: '97',
format: 'json',
param_dsid: '1048'
}
this.request({
url: '/platformbigdata/modelservlet',
method: 'get',
params
}).then(res => {
// debugger
if (res.ret_code == 200) {
this.siteBuild = []
// this.siteBuild.push({ name: '项目总数', num1: res.data[0].XMZS});
// this.siteBuild.push({ name: '未开始数', num1: res.data[0].WKSS});
// this.siteBuild.push({ name: '在建数', num1: res.data[0].ZJS});
// this.siteBuild.push({ name: '已完成数', num1: res.data[0].YWCS});
this.siteBuild.push({ name: '项目总数', num1: 220})
this.siteBuild.push({ name: '未开始数', num1: 12})
this.siteBuild.push({ name: '在建数', num1: 48})
this.siteBuild.push({ name: '已完成数', num1: 148})
}
})
},
// 规划用地图标渲染，接收id,渲染的数据{},百分比颜色三个参数
ghydChart (id, data, color) {
// 定义echart宽高
const _div = document.getElementById(id)
const _width = document.getElementsByClassName('landList')[0].offsetWidth
_div.style.width = _width * 0.95 + 'px'
_div.style.height = _width * 0.95 + 'px'
_div.style.paddingLeft = _width * 0.05 + 'px'
// 组装option
// let rate = new BigNumber((parseInt(data.already) / parseInt(data.total)).toFixed(3) *100);
let rate = data.rate
let option = this.ghyd_option
option.series[0].data[0].value = rate.toFixed(1)
option.series[0].detail.color = color
if (rate >= 83.3) {
if (rate === 100) {
option.series[1].endAngle = -45
} else {
let num = 100 - rate
option.series[1].endAngle = -45 + (num * 2.7)
}
} else {
option.series[1].endAngle = 225 - rate * 2.7
}
this.initEchart(id, option)
},
initEchart (id, option) {
const _div = document.getElementById(id)
let myChart = this.$echarts.init(_div)
myChart.setOption(option)
window.addEventListener('resize', () => {
this.initEchart()
myChart.resize()
})
},
callEchart (data, idBox, offset) {
const _width = document.getElementById(idBox).clientWidth
this.$set(data, 'width', _width)
this.$set(data, 'height', _width / offset)
}
}
}
</script>
<style scoped>
.panel-container {
width: 100%;
height: 100%;
overflow: auto;
}
.bioBasis {
display: flex;
margin: 0.07rem 0;
}
.module-corner {
background: url("../../assets/images/moduleBg01.png") no-repeat left top;
background-size: 100% 100%;
padding: .03rem 0;
position: relative;
}
/*规划用地*/
.PlanningLand {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: -.07rem;
padding: 0 .05rem;
}
.landList {
width: 20%;
font-size: 0.07rem;
}
/*.land {*/
/*width: 100%;*/
/*margin-top: -.04rem;*/
/*}*/
/*.landTil {*/
/*color: #00caff;*/
/*font-size: 0.07rem;*/
/*text-align: center;*/
/*margin-bottom: 0.05rem;*/
/*}*/
/*.landSize {*/
/*width: 50%;*/
/*float: left;*/
/*text-align: center;*/
/*}*/
/*.landSize > span {*/
/*font-size: 0.05rem;*/
/*color: #00a3d7;*/
/*}*/
/*.size {*/
/*margin-top: .03rem;*/
/*color: #00faa8;*/
/*font-weight:bold;*/
/*font-size: 0.06rem;*/
/*}*/
/*.size span {*/
/*font-size: 0.05rem;*/
/*}*/
/*生态结构*/
/*.ecology {*/
/*background: url("../../assets/images/ecology.png") no-repeat left top;*/
/*margin: 0 0rem 0 0.1rem;*/
/*background-size: 100% 100%;*/
/*padding: 0.02rem 0;*/
/*}*/
/*.ecologyBox {*/
/*padding: 0 0.05rem;*/
/*}*/
/*.ecologyBox li {*/
/*display: flex;*/
/*justify-content: space-between;*/
/*padding: 0.05rem 0;*/
/*background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);*/
/*-webkit-background-clip: text;*/
/*}*/
/*.ecologyBox li p:first-child {*/
/*width: 34%;*/
/*}*/
/*.ecologyBox li p {*/
/*color: #02f1ff;*/
/*font-size: 0.06rem;*/
/*line-height: 0.06rem;*/
/*width: 22%;*/
/*text-align: left;*/
/*}*/
/*.ecologyBox li:hover:not(.ecologyBox_til) {*/
/*background: linear-gradient(to right, #03092f, #0b1c84, #03092f);*/
/*}*/
/*.ecologyBox .ecologyBox_til p {*/
/*color: #fff;*/
/*}*/
</style>
<style>
.cityPlan .dataListBox tbody tr td{
padding: 0.071rem .02rem !important;
}
</style>
