Skip to content

C
country-energy-ecological-construction
Commit f5b5ac39 authored by 范加坤's avatar 范加坤
Browse files
Options

沼肥

parent 8769f449
Hide whitespace changes
Inline Side-by-side
Showing with 511 additions and 49 deletions
src/components/PartWrap/PartWrap.vue
View file @ f5b5ac39
......@@ -37,7 +37,7 @@ export default {
.part {
height: 100%;
padding: 1.2vh;
min-height: 12vh;
min-height: 9vh;
box-sizing: border-box;
position: relative;
background: @linear-color;
......@@ -101,8 +101,8 @@ export default {
// margin-bottom: 1vh;
label {
text-align: center;
line-height: 5vh;
height: 5vh;
// line-height: 5vh;
// height: 5vh;
.sub {
font-size: 14px;
}
......@@ -111,7 +111,7 @@ export default {
// width: 100%;
// font-size: 1.4vh;
padding-left: 10px;
height: 2vh;
// height: 2vh;
line-height: 1.8vh;
color: @main-color;
text-align: left;
......@@ -125,7 +125,7 @@ export default {
margin-left: 32px;
color: @font-light-color;
font-family: timeFont;
font-size: 3vh;
font-size: 2.6vh;
}
}
</style>
src/components/statusControl/index.vue
View file @ f5b5ac39
......@@ -50,17 +50,19 @@ export default {
.statusControl {
ul li {
margin-bottom: 10px;
border-radius: 5px;
border-radius: 15px;
padding: 5px 10px;
width: 150px;
color: #333;
background-color: #fff;
width: 130px;
color: #84c6ff;
// background-color: #fff;
box-shadow: 0 0 5px #fff9;
text-align: center;
cursor: pointer;
border: 1px solid #84c6ff;
&.acitive {
color: #fff;
background-color: #144683;
background-color: #16ceaf;
}
}
}
......
src/pages/biogasManureEcoAgriculture/components/methaneMap.vue 0 → 100644
View file @ f5b5ac39
<template>
<div class="methane">
<Map mapId="methane" @onload="onload"></Map>
</div>
</template>
<script>
import Map from "@/components/Map/Map.vue";
export default {
name: "methane",
data() {
return {
map: "",
};
},
components: {
Map,
},
computed: {},
methods: {
async onload(map) {
this.map = map;
this.map.addLayer({
id: "province",
source: "province",
type: "fill",
layout: {},
paint: {
"fill-outline-color": "#fff",
"fill-color": "rgba(0, 0, 0, 0)",
},
});
await this.$emit("onload", map);
},
async setBackground(data) {
await this.map.setPaintProperty("province", "fill-color", data);
},
},
};
</script>
<style scoped lang="less">
.methane {
height: inherit;
}
</style>
src/pages/biogasManureEcoAgriculture/index.vue
View file @ f5b5ac39
<template>
<div class="BiogasManureEcoAgriculture"></div>
<!-- 农村沼气转型升级 -->
<div class="biogasManureEcoAgriculture">
<div class="left-part">
<PartWrap
class="left-part-item"
:title="'原料消耗量合计(万吨)'"
:value="leftObj.yl_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'畜禽粪污(万吨)'"
:value="leftObj.cqwf_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'农作物秸秆(万吨)'"
:value="leftObj.nzwjg_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'其他有机废弃物(万吨)'"
:value="leftObj.qt_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'沼肥用量(万吨)'"
:value="leftObj.sf_num"
></PartWrap>
</div>
<div class="bottom-part">
<PartWrap class="bottom-part-table" :title="'统计表'">
<div
class="bottom-part-table-cont"
style="width: 100%,height:100%; padding-top:10px"
>
<el-table :data="tableData" border style="width: 100%" height="22vh">
<el-table-column
type="index"
label="序号"
align="center"
></el-table-column>
<el-table-column
prop="pname"
label="地区"
align="center"
></el-table-column>
<el-table-column
prop="yl_num"
label="原料消耗合计(万吨)"
align="center"
></el-table-column>
<el-table-column
prop="cqwf_num"
align="center"
label="畜禽粪污(万吨)"
></el-table-column>
<el-table-column
prop="nzwjg_num"
align="center"
label="农作物秸秆(万吨)"
></el-table-column>
<el-table-column
prop="qt_num"
align="center"
label="其他有机废弃物(万亩)"
></el-table-column>
<el-table-column
prop="sf_num"
align="center"
label="沼肥用量(万亩)"
></el-table-column>
</el-table>
</div>
</PartWrap>
<PartWrap
class="bottom-part-echart"
:title="statusValue.value + '(万吨)'"
>
<div style="width: 100%; height: 23vh">
<Echart ref="echart3" :options="bottom_option" @barClick="echartBarClick"/>
</div>
</PartWrap>
</div>
<Lengend class="legend-part" :colors="colors" :range="colorLabel" />
<MethaneMap @onload="load" ref="map"></MethaneMap>
<div class="this-city" v-if="thisCity">
{{ thisCity.name }}
<i
class="el-icon-close"
style="color: #fff; margin-left: 10px"
@click="cityChange(false)"
></i>
</div>
<StatusControl
class="status-control"
:list="statusControlList"
v-model="statusValue"
></StatusControl>
</div>
</template>
<script>
import Lengend from '../../components/Lengend/Lengend.vue'
import cityConfig from '../../config/city.config'
import Echart from '../../components/Echart/Echarts.vue'
import PartWrap from '../../components/PartWrap/PartWrap.vue'
import StatusControl from '@/components/statusControl/index.vue'
import MethaneMap from './components/methaneMap'
export default {
name: "BiogasManureEcoAgriculture",
name: 'BiogasManureEcoAgriculture',
data() {
return {};
return {
map: '',
// legendRange:[],
colors: [
'rgb(67, 134, 78)',
'rgb(178, 222, 145)',
'rgb(223, 238, 175)',
'rgb(245, 255, 163)',
'rgb(240, 145, 98)',
'rgb(245,1,0)'
],
colorLabel: [],
cityConfig: cityConfig.province,
thisCity: '',
leftObj: {
all_local_num: '',
all_capacity: '',
family_num: '',
zj_capacity: ''
},
statusControlList: [
{ key: 'yl_num', value: '原料消耗量' },
{ key: 'cqwf_num', value: '畜禽粪污' },
{ key: 'nzwjg_num', value: '农作物秸秆' },
{ key: 'qt_num', value: '其他有机废弃物' },
{ key: 'sf_num', value: '沼肥用量' }
],
statusValue: { key: 'yl_num', value: '原料消耗量' },
thisTable: '供气户数',
bottom_option: {
textStyle: {
color: '#fff'
},
tooltip: {
trigger: 'axis'
},
// legend: {
// data: [
// '汇总',
// '小型沼气工程',
// '中性沼气工程',
// '大性沼气工程',
// '特大性沼气工程'
// ],
// textStyle: {
// color: '#fff'
// }
// },
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
grid: { bottom: '10%' },
series: [
{
barWidth: 40,
data: [],
type: 'bar',
itemStyle: {
color: '#d8ee2c'
}
}
]
},
tableData: ''
}
},
components: {},
computed: {},
methods: {},
};
watch: {
thisCity() {
this.getLeftData()
// this.getlineChartData(this.statusValue1.key)
},
statusValue() {
this.getlineChartData(this.tableData)
}
},
components: {
Echart,
PartWrap,
Lengend,
MethaneMap,
StatusControl
},
async mounted() {
// await this.getYearRange()
// await this.getLeftData()
// await this.getTableData()
// await this.getlineChartData(this.statusValue1.key)
},
methods: {
async load(map) {
this.map = map
await this.getLeftData()
await this.getTableData()
await this.getlineChartData(this.tableData)
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 200, right: 200 }
}
)
},
async echartBarClick(e) {
console.log(e)
this.thisCity = this.cityConfig.find(item => {
return item.name == e.name
})
let res = await this.$api.layer.query('land_region_province', {
filter: ['=', 'PXZQDM', this.thisCity.code]
})
let param = res.data.features[0].properties
this.map.fitBounds(
[
[param.x_min, param.y_min],
[param.x_max, param.y_max]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
}
)
this.map.setFilter('province', ['==', 'code', this.thisCity.code])
},
cityChange(e) {
if (!e) {
this.thisCity = ''
this.map.setFilter('province', null)
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
}
)
}
},
async getLeftData() {
let res = await this.$api.layer.query('ra_biogas_manure', {
filter: ['=', 'pcode', this.thisCity ? this.thisCity.code : '10']
})
this.leftObj = res.data.features[0].properties
},
async setBackgroundColor(data) {
console.log(data[0], data[data.length - 1])
let cha =
Number(data[data.length - 1][this.statusValue.key]) -
Number(data[0][this.statusValue.key])
let range = [
Number(data[0][this.statusValue.key]),
Number(data[0][this.statusValue.key]) + cha / 4,
Number(data[0][this.statusValue.key]) + cha / 2,
Number(data[0][this.statusValue.key]) + (cha / 4) * 3,
Number(data[0][this.statusValue.key]) + cha
]
range.reverse()
console.log(range)
this.colorLabel = range
let a = ['match', ['get', 'code']]
data.forEach(item => {
a.push(item.pcode)
a.push(this.getColorOfProvince(Number(item[this.statusValue.key])))
})
console.log(a)
a.push('#ccc')
this.$refs.map.setBackground(a)
},
getColorOfProvince(count) {
if (count > this.colorLabel[this.colorLabel.length - 1]) {
return this.colors[this.colors.length - 1]
} else {
let idx = -1
this.colorLabel.find((item, index) => {
idx = index
return item >= count
})
if (idx !== -1) {
return this.colors[idx]
}
}
},
async getTableData() {
let res = await this.$api.layer.query('ra_biogas_manure', {
filter: ['!=', 'pcode', '10']
})
console.log(res)
let data = res.data.features.map(item => {
return item.properties
})
this.tableData = data
},
async getlineChartData(param) {
let data = param.sort((a, b) => {
return b[this.statusValue.key] - a[this.statusValue.key]
})
this.setBackgroundColor(data)
let titles = data.map(item => {
return item.pname
})
let datas = data.map(item => {
return item[this.statusValue.key]
})
this.$set(this.bottom_option.xAxis, 'data', titles)
this.$set(this.bottom_option.series[0], 'data', datas)
}
}
}
</script>
<style scoped lang="less"></style>
<style lang="less" scoped>
// @import url('../../assets/css/public.less');
.biogasManureEcoAgriculture {
width: 100%;
height: 100%;
position: relative;
.this-city {
display: flex;
align-items: center;
position: absolute;
z-index: 99;
color: #fff;
border: 1px solid #5ab4ff;
padding-left: 1.5vh;
padding-right: 1.5vh;
line-height: 4vh;
margin-right: 2vh;
margin-top: 0.3vh;
height: 4vh;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #16ceaf !important;
bottom: 35vh;
left: 40vw;
border-radius: 25px;
}
.left-part {
z-index: 99;
// display: flex;
// flex-direction: column;
height: 55vh;
// width: 250px;
position: absolute;
top: 11vh;
left: 1vw;
z-index: 100;
.left-part-item {
height: 5vh;
margin-bottom: 2vh;
}
}
.bottom-part {
z-index: 99;
width: 97vw;
display: flex;
justify-content: space-between;
position: absolute;
height: 27vh;
bottom: 2vh;
left: 2vh;
z-index: 21;
display: flex;
.bottom-part-table {
width: 40vw;
.bottom-part-table-cont {
width: 100%;
}
}
.bottom-part-echart {
margin-left: 1vw;
flex: 1;
}
}
.legend-part {
position: absolute;
z-index: 11;
left: 300px;
bottom: 33vh;
}
.status-control {
position: absolute;
right: 2vw;
top: 12vh;
z-index: 99;
}
}
</style>
src/pages/methaneUpgrade/index.vue
View file @ f5b5ac39
<template>
<!-- 农村沼气转型升级 -->
<div class="methaneUpgrade">
<div class="left-part">
<DateWidget
class="date-widget"
:range="yearRange"
@dateChange="dateChange"
/>
<PartWrap
class="left-part-item"
:title="'年末累积(处)'"
:value="leftObj.all_local_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'总池容(万立方米)'"
:value="leftObj.all_capacity"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'供气户数(万户)'"
:value="leftObj.family_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'装机容量(千瓦)'"
:value="leftObj.zj_capacity"
></PartWrap>
</div>
<div class="bottom-part">
<PartWrap
class="bottom-part-table"
......@@ -53,33 +80,6 @@
</div>
</PartWrap>
</div>
<div class="left-part">
<DateWidget
class="date-widget"
:range="yearRange"
@dateChange="dateChange"
/>
<PartWrap
class="left-part-item"
:title="'年末累积(处)'"
:value="leftObj.all_local_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'总池容(万立方米)'"
:value="leftObj.all_capacity"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'供气户数(万户)'"
:value="leftObj.family_num"
></PartWrap>
<PartWrap
class="left-part-item"
:title="'装机容量(千瓦)'"
:value="leftObj.zj_capacity"
></PartWrap>
</div>
<Lengend class="legend-part" :colors="colors" :range="colorLabel" />
<div class="right-part">
<PartWrap class="right-part-echart" :title="'年末累计(处)'">
......@@ -450,6 +450,16 @@ export default {
await this.getLeftData()
await this.getTableData()
await this.getlineChartData(this.statusValue1.key)
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
}
)
},
async echartBarClick(e) {
console.log(e)
......@@ -474,6 +484,16 @@ export default {
cityChange(e) {
if (!e) {
this.thisCity = ''
this.map.setFilter('province', null)
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
}
)
}
},
dateChange(e) {
......@@ -725,10 +745,10 @@ export default {
}
.left-part {
z-index: 99;
display: flex;
flex-direction: column;
// display: flex;
// flex-direction: column;
height: 55vh;
width: 250px;
// width: 250px;
position: absolute;
top: 11vh;
left: 1vw;
......@@ -738,6 +758,7 @@ export default {
left: 280px;
}
.left-part-item {
height: 5vh;
margin-bottom: 2vh;
}
}
......@@ -778,7 +799,7 @@ export default {
width: 28vw;
flex-wrap: wrap;
justify-content: space-around;
.right-part-echart{
.right-part-echart {
margin-bottom: 1vh;
}
}
......
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