Skip to content

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

调整ui

parent 2268cce5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 706 additions and 373 deletions
src/assets/css/index.less
View file @ 3570e9f4
......@@ -67,23 +67,6 @@ i {
.el-date-picker {
color: #fff!important;
}
// .el-input__inner__picker {
// cursor: pointer!important;
// position: relative!important;
// padding: 0!important;
// font-size: 36px!important;
// color: @font-light-color!important;
// font-family: timeFont!important;
// height: 100%!important;
// line-height: 45px!important;
// box-shadow: 0 0px 8px 0 rgba(0, 100, 200, 0.9)!important;
// padding: 0 25px!important;
// border: 0.1vh solid @main-color!important;
// border-radius: 25px!important;
// &:hover {
// border-color: #fff!important;
// }
// }
.el-button.active {
background-color: @active-color !important;
border-color: @font-color !important;
......@@ -146,7 +129,11 @@ table {
}
thead {
color: @main-color !important;
color: #fff !important;
.cell{
font-size: 1.1vh;
}
}
td .cell {
......
src/components/Map/Map.vue
View file @ 3570e9f4
......@@ -3,41 +3,43 @@
</template>
<script>
import mapboxgl from "mapbox-gl";
import { register } from "./config/map.js";
import style from "./config/index.js";
import provincePoint from "./config/province_point.json";
import mapboxgl from 'mapbox-gl'
import { register } from './config/map.js'
import style from './config/index.js'
import provincePoint from './config/province_point.json'
export default {
props: {
center: {
type: Array,
default: () => [110, 30],
default: () => [110, 30]
},
zoom: {
type: Number,
default: 2,
default: 2
},
mapId: {
// 接收图层容器的ID
type: String || undefined,
default: "map",
},
default: 'map'
}
},
data() {
return {
map: null,
};
map: null
}
},
mounted() {
this.initMap();
this.initMap()
},
methods: {
initMap() {
let width = document.body.clientWidth
let height = document.body.clientHeight
this.map = new mapboxgl.Map({
container: this.mapId,
zoom: this.zoom,
center: [110, 30],
style:`http://39.104.87.15/api/basemap/style/grey_simple.json`,
style: `http://39.104.87.15/api/basemap/style/village_eco.json`,
// style: {
// version: 8,
// center: [110, 36],
......@@ -46,83 +48,95 @@ export default {
// layers: [],
// glyphs: "./fonts/{fontstack}/{range}.pbf",
// },
bounds: [
[73.487345, 17.397329],
[135.087387, 53.561602]
],
fitBoundsOptions: {
padding: {
bottom: height * 0.3,
top: height * 0.12,
left: width * 0.2,
right: width * 0.2
}
},
maxZoom: 19.9,
minZoom: 0.1,
// dragRotate: false,
trackResize: true,
attributionControl: false,
preserveDrawingBuffer: true,
preserveDrawingBuffer: true
// renderWorldCopies: false, // 地图不重复
// style
});
this.map.on("load", async () => {
let map = this.map;
window.map = this.map;
})
this.map.on('load', async () => {
let map = this.map
window.map = this.map
// 添加新的地图实例方法, 初始化相关状态
register(mapboxgl.Map.prototype);
register(mapboxgl.Map.prototype)
map._initMapState({
center: [110, 30],
zoom: this.zoom,
});
zoom: this.zoom
})
// console.log()
map.setBaseMap({ sources: style.sources, layers: style.layers });
map.setBaseMap({ sources: style.sources, layers: style.layers })
// 添加source
Object.entries(style.sources).forEach((item) => {
map.addSource(item[0], item[1]);
});
Object.entries(style.sources).forEach(item => {
map.addSource(item[0], item[1])
})
// 添加layers
style.layers.forEach((item) => {
map.addLayer(item);
});
await this.addProvinceLayer();
await this.addProvincePoint();
this.$emit("onload", map);
});
style.layers.forEach(item => {
map.addLayer(item)
})
await this.addProvinceLayer()
await this.addProvincePoint()
this.$emit('onload', map)
})
},
addProvinceLayer() {
// this.$api.data.getProvinceData().then(res => {
this.map.addSource("province", {
this.map.addSource('province', {
tiles: [
"http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf",
'http://39.104.87.15/api/tileset/agnps_sjwj/{z}/{x}/{y}.vector.pbf'
],
type: "vector",
});
type: 'vector'
})
this.map.addLayer({
id: "province",
source: "province",
type: "fill",
"source-layer": "province",
id: 'province',
source: 'province',
type: 'fill',
'source-layer': 'province',
layout: {},
paint: {
"fill-outline-color": "#fff",
"fill-color": "rgba(0, 0, 0, 0)",
},
});
'fill-outline-color': '#fff',
'fill-color': 'rgba(0, 0, 0, 0)'
}
})
},
addProvincePoint() {
this.map.addSource("__province_point", {
type: "geojson",
data: provincePoint,
});
this.map.addSource('__province_point', {
type: 'geojson',
data: provincePoint
})
this.map.addLayer({
id: "__province_point",
source: "__province_point",
type: "symbol",
id: '__province_point',
source: '__province_point',
type: 'symbol',
paint: {
"text-color": "#fff",
"text-halo-color": "#000",
"text-halo-width": 1,
'text-color': '#fff',
'text-halo-color': '#000',
'text-halo-width': 1
},
layout: {
"text-field": ["get", "P_XZQMC"],
"text-size": 15,
},
});
},
},
};
'text-field': ['get', 'P_XZQMC'],
'text-size': 15
}
})
}
}
}
</script>
<style lang="less" scoped>
......
src/components/common/components/PartWrap/PartBox.vue
View file @ 3570e9f4
......@@ -8,7 +8,7 @@
/>
{{ title }}
</label>
<div>
<div style="height:100%">
<label class="main" for="pm" v-if="value">
{{ value }}
<!-- <label class="sub">吨</label> -->
......@@ -40,7 +40,7 @@ export default {
<style lang="less" scoped>
// 各模块简单基本样式
.part {
// height: 100%;
height: 100%;
min-height: 9vh;
box-sizing: border-box;
position: relative;
......
src/components/common/components/PartWrap/PartWrap.vue
View file @ 3570e9f4
......@@ -5,7 +5,7 @@
</label>
<div>
<label class="main" for="pm" v-if="value">
{{ value }}
{{ Number(value).toFixed(2) }}
<!-- <label class="sub">吨</label> -->
</label>
<slot></slot>
......
src/components/common/components/statusControl/StatusControl.vue
View file @ 3570e9f4
......@@ -74,7 +74,7 @@ export default {
}
.noShowWrap {
.this_active {
width: 220px;
width: 250px;
border-radius: 13.5px;
}
}
......@@ -84,7 +84,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px 0 25px;
padding: 2px 18px 2px 25px;
box-sizing: border-box;
background: linear-gradient(to bottom, #00b6f8, #016aec);
img {
......@@ -112,7 +112,7 @@ export default {
padding: 5px 10px;
width: 160px;
box-sizing: border-box;
color: #84c6ff;
color: rgb(99, 99, 99);
// background-color: #fff;
box-shadow: 0 0 2px #fff9;
text-align: center;
......
src/pages/biogasManureEcoAgriculture/index.vue
View file @ 3570e9f4
......@@ -34,7 +34,7 @@
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 :data="tableData" border style="width: 100%" height="20vh">
<el-table-column
type="index"
label="序号"
......@@ -49,32 +49,59 @@
prop="yl_num"
label="原料消耗合计(万吨)"
align="center"
></el-table-column>
>
<template slot-scope="scope">
{{ handleTofixed(scope.row.yl_num) }}
</template></el-table-column
>
<el-table-column
prop="cqwf_num"
align="center"
label="畜禽粪污(万吨)"
></el-table-column>
>
<template slot-scope="scope">
{{ handleTofixed(scope.row.cqwf_num) }}
</template></el-table-column
>
<el-table-column
prop="nzwjg_num"
align="center"
label="农作物秸秆(万吨)"
></el-table-column>
>
<template slot-scope="scope">
{{ handleTofixed(scope.row.nzwjg_num) }}
</template></el-table-column
>
<el-table-column
prop="qt_num"
align="center"
label="其他有机废弃物(万亩)"
></el-table-column>
>
<template slot-scope="scope">
{{ handleTofixed(scope.row.qt_num) }}
</template></el-table-column
>
<el-table-column
prop="sf_num"
align="center"
label="沼肥用量(万亩)"
></el-table-column>
>
<template slot-scope="scope">
{{ handleTofixed(scope.row.sf_num) }}
</template>
</el-table-column>
</el-table>
</div>
</PartBox>
<PartBox class="bottom-part-echart" :title="statusValue.value + '(万吨)'">
<div style="width: 100%; height: 23vh">
<div
style="
width: calc(100% - 2vh);
height: 20vh;
background-color: #fff;
margin: 0 auto;
"
>
<Echart
ref="echart3"
:options="bottom_option"
......@@ -83,7 +110,12 @@
</div>
</PartBox>
</div>
<Lengend class="legend-part" :colors="colors" :range="colorLabel" />
<Lengend
class="legend-part"
:title="statusValue.value + '(万吨)'"
:colors="colors"
:range="colorLabel"
/>
<MethaneMap @onload="load" ref="map"></MethaneMap>
<div class="this-city" v-if="thisCity">
{{ thisCity.name }}
......@@ -119,18 +151,19 @@ export default {
// 'rgb(245, 255, 163)',
// 'rgb(240, 145, 98)',
// 'rgb(245,1,0)'
// 'rgba(0, 100, 200, 0)',
// 'rgba(0, 100, 200, 0.2)',
// 'rgba(0, 100, 200, 0.4)',
// 'rgba(0, 100, 200, 0.6)',
// 'rgba(0, 100, 200, 0.8)',
// 'rgba(0, 100, 200, 1)',
'#A9D6E5',
'#89C2D9',
'#61A5C2',
'#468FAF',
'#2C7DA0',
'#2A6F97'
'#dfffcc',
'#c1f4be',
'#a3e8b0',
'#85dda1',
'#67d193',
'#57cc99'
// '#A9D6E5',
// '#89C2D9',
// '#61A5C2',
// '#468FAF',
// '#2C7DA0',
// '#2A6F97'
],
colorLabel: [],
cityConfig: cityConfig.province,
......@@ -151,9 +184,9 @@ export default {
statusValue: { key: 'yl_num', value: '原料消耗量' },
thisTable: '供气户数',
bottom_option: {
textStyle: {
color: '#fff'
},
// textStyle: {
// color: '#fff'
// },
tooltip: {
trigger: 'axis'
},
......@@ -180,6 +213,7 @@ export default {
top: '7%',
bottom: '7%',
left: '3%',
right: '3%',
containLabel: true
},
series: [
......@@ -201,7 +235,10 @@ export default {
this.getLeftData()
// this.getlineChartData(this.statusValue1.key)
},
statusValue() {
statusValue(data) {
this.tableData = this.tableData.sort((a, b) => {
return a[data.key] - b[data.key]
})
this.getlineChartData(this.tableData)
}
},
......@@ -217,27 +254,34 @@ export default {
// await this.getlineChartData(this.statusValue1.key)
},
methods: {
handleTofixed(text) {
if (text.indexOf('.') != -1) {
return Number(text).toFixed(2)
} else {
return text
}
},
async load(map) {
this.map = map
await this.getLeftData()
await this.getTableData()
await this.getlineChartData(this.tableData)
let width = document.body.clientWidth
let height = document.body.clientHeight
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: {
bottom: height * 0.3,
top: height * 0.12,
left: width * 0.3,
right: width * 0.3
}
}
)
// let width = document.body.clientWidth
// let height = document.body.clientHeight
// this.map.fitBounds(
// [
// [73.487345, 17.397329],
// [135.087387, 53.561602]
// ],
// {
// padding: {
// bottom: height * 0.3,
// top: height * 0.12,
// left: width * 0.3,
// right: width * 0.3
// }
// }
// )
},
async echartBarClick(e) {
console.log(e)
......@@ -348,11 +392,14 @@ export default {
return b[this.statusValue.key] - a[this.statusValue.key]
})
this.setBackgroundColor(data)
data = data.filter(item => {
return item[this.statusValue.key] !== '0'
})
let titles = data.map(item => {
return item.pname
})
let datas = data.map(item => {
return item[this.statusValue.key]
return Number(item[this.statusValue.key]).toFixed(2)
})
this.$set(this.bottom_option.xAxis, 'data', titles)
......@@ -394,7 +441,6 @@ export default {
z-index: 99;
display: flex;
// flex-direction: column;
height: 55vh;
// width: 250px;
position: absolute;
top: 11vh;
......@@ -417,7 +463,7 @@ export default {
z-index: 21;
display: flex;
.bottom-part-table {
width: 40vw;
width: 42vw;
.bottom-part-table-cont {
width: 100%;
}
......@@ -430,7 +476,7 @@ export default {
.legend-part {
position: absolute;
z-index: 11;
right: 1vw;
left: 1vw;
bottom: 29vh;
}
.status-control {
......
src/pages/biomassEnergyWarm/components/biogasManureMap.vue
View file @ 3570e9f4
......@@ -59,23 +59,24 @@ export default {
methods: {
onload(map) {
this.map = map
let width = document.body.clientWidth
let height = document.body.clientHeight
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: {
bottom: height * 0.3,
top: height * 0.12,
left: width * 0.1,
right: width * 0.3
}
}
)
this.setPaintColor()
// let width = document.body.clientWidth
// let height = document.body.clientHeight
// this.map.fitBounds(
// [
// [73.487345, 17.397329],
// [135.087387, 53.561602]
// ],
// {
// padding: {
// bottom: height * 0.3,
// top: height * 0.12,
// left: width * 0.1,
// right: width * 0.3
// }
// }
// )
this.setPaintColor()
},
getCurrentColor(val) {
if (val > this.colorLabels[this.colorLabels.length - 1]) {
......
src/pages/biomassEnergyWarm/components/sortList.vue
View file @ 3570e9f4
......@@ -5,7 +5,6 @@
v-for="(item, index) in getItemOfType"
:key="index"
:title="item.value"
:style="{ width: '48%' }"
>
<!-- :style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }" -->
<div class="partItem">
......@@ -54,10 +53,12 @@ export default {
this.data.forEach(item => {
Object.entries(res).forEach(i => {
res[i[0]].push({
xAxis: item.properties.pname,
yAxis: item.properties[i[0]]
})
if (item.properties[i[0]] !== '0') {
res[i[0]].push({
xAxis: item.properties.pname,
yAxis: item.properties[i[0]]
})
}
})
})
return res
......@@ -90,12 +91,12 @@ export default {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.15)'
// color: 'rgba(255,255,255,.15)'
}
},
axisLine: {
lineStyle: {
color: '#fff'
// color: '#fff'
}
}
}
......@@ -104,26 +105,26 @@ export default {
{
type: 'category',
data: xData,
axisTick: {
show: false
},
// axisTick: {
// show: false
// },
axisLine: {
show: false
},
axisLabel: {
color: '#fff'
// color: '#fff'
}
}
],
series: [
{
type: 'bar',
barWidth: `80%`,
barMaxWidth: 30,
data: yData,
label: {
show: true,
position: 'right'
},
// label: {
// show: true,
// position: 'right'
// },
itemStyle: {
color: 'rgb(255, 122,12)'
// emphasis: {
......@@ -164,7 +165,6 @@ export default {
right: 10px;
display: flex;
flex-wrap: wrap;
width: 27vw;
height: calc(100vh - 11vh - 27vh - 2vw);
.left-part-item {
height: 100%;
......@@ -174,10 +174,12 @@ export default {
}
.partItem {
width: 100%;
width: calc(100% - 2vh);
margin: 0 auto;
// height: calc(100vh - 95px - 27vh - 2vw);
height: calc(100vh - 15vh - 27vh - 2vw);
height: calc(100vh - 18vh - 27vh - 2vw);
overflow-y: auto;
background-color: #fff;
}
}
.left-part-item:nth-child(odd) {
......
src/pages/biomassEnergyWarm/components/table.vue
View file @ 3570e9f4
......@@ -4,7 +4,7 @@
<el-table
class="table"
ref="table"
height="22vh"
height="20vh"
:data="getDataOfType"
border
style="width: 100%"
......@@ -23,6 +23,9 @@
:width="`${1 / getItemOfType.length}%`"
align="center"
>
<template slot-scope="scope">
{{ handleTofixed(scope.row[item.key]) }}
</template>
</el-table-column>
</el-table>
</PartBox>
......@@ -30,59 +33,78 @@
</template>
<script>
import { BiomassData } from "../config/biomass.config.js";
import { BiomassData } from '../config/biomass.config.js'
export default {
name: "biogasTable",
name: 'biogasTable',
props: {
type: {
type: String,
default: "",
default: ''
},
data: {
type: Array,
default: () => [],
},
default: () => []
}
},
components: {},
data() {
return {};
return {}
},
computed: {
getItemOfType() {
return BiomassData[this.type];
return BiomassData[this.type]
},
getDataOfType() {
const data = [];
const keys = this.getItemOfType.map((item) => item.key);
this.data.forEach((item) => {
let obj = {};
keys.forEach((key) => {
obj[key] = item.properties[key];
});
obj.pname = item.properties.pname;
data.push(obj);
});
return data;
},
let data = []
const keys = this.getItemOfType.map(item => item.key)
console.log(keys)
this.data.forEach(item => {
let obj = {}
keys.forEach(key => {
obj[key] = item.properties[key]
})
obj.pname = item.properties.pname
data.push(obj)
})
data = data
.sort((a, b) => {
return Number(b[keys[0]]) - Number(a[keys[0]])
})
.filter(item => {
return item[keys[0]] && item[keys[0]] !== '0'
})
return data
}
},
beforeUpdate() {
this.$nextTick(() => {
//在数据加载完，重新渲染表格
this.$refs["table"].doLayout();
});
this.$refs['table'].doLayout()
})
},
methods: {},
};
methods: {
handleTofixed(text) {
if (text) {
if (text.indexOf('.') != -1) {
return Number(text).toFixed(2)
} else {
return text
}
} else {
return 0
}
}
}
}
</script>
<style scoped lang="less">
.biogasTable {
position: absolute;
left: 1vw;
bottom: 2vh;
bottom: 1vh;
width: 31vw;
height: 26vh;
height: 27vh;
// height: 400px;
}
</style>
src/pages/biomassEnergyWarm/config/legend.config.js
View file @ 3570e9f4
......@@ -9,11 +9,18 @@ export const color = [
// // "#9bcfe2",
// "#a3e4e3",
// '#A9D6E5',
'#89C2D9',
'#61A5C2',
'#468FAF',
'#2C7DA0',
'#2A6F97'
// '#89C2D9',
// '#61A5C2',
// '#468FAF',
// '#2C7DA0',
// '#2A6F97'
'#dfffcc',
'#c1f4be',
'#a3e8b0',
'#85dda1',
'#67d193',
// '#57cc99'
];
// export const colorLabel = [1, 3, 5, 10, 30, 50, 100, 500];
export const colorLabel = [1, 30, 50, 100];
src/pages/biomassEnergyWarm/index.vue
View file @ 3570e9f4
......@@ -39,6 +39,7 @@
class="legendPart"
:colors="color"
:range="getRandomColorLabel"
:title="statusValue.value + ' ' + allItemValue.value"
></Legend>
</div>
</template>
......@@ -59,18 +60,18 @@ export default {
data() {
return {
statusControlList: [
{ key: 'rj', value: '热解气化' },
{ key: 'gn', value: '打捆直燃集中供暖' },
{ key: 'ghcx', value: '固化成型' },
{ key: 'rj', value: '热解气化' },
{ key: 'th', value: '碳化' }
],
statusValue: { key: 'gn', value: '打捆直燃集中供暖' },
statusValue: { key: 'rj', value: '热解气化' },
dataSetCode: 'ra_energy_heating',
data: [],
color,
colorLabel,
provinceCode: '',
allItemValue: { key: 'gn_local', value: '数量（处）' }
allItemValue: { key: 'rj_num', value: '数量（处）', type: 'aggregation' }
}
},
components: {
......@@ -106,7 +107,7 @@ export default {
setOptionOfEchart() {
return function (type) {
const data = this.getValOfdata[type]
.filter(item => item.yAxis)
.filter(item => item.yAxis && item.yAxis !== '0')
.sort((a, b) => b.yAxis - a.yAxis)
const xData = data.map(item => item.xAxis)
const yData = data.map(item => item.yAxis)
......@@ -133,9 +134,9 @@ export default {
// },
// },
axisLine: {
lineStyle: {
color: '#fff'
}
// lineStyle: {
// color: '#fff'
// }
}
}
],
......@@ -151,7 +152,7 @@ export default {
show: false
},
axisLabel: {
color: '#fff'
// color: '#fff'
}
}
],
......@@ -159,12 +160,8 @@ export default {
{
name: '',
type: 'bar',
barWidth: `50%`,
barMaxWidth: 35,
data: yData,
label: {
show: true,
position: 'top'
},
itemStyle: {
color: 'rgb(255, 122,12)'
// emphasis: {
......@@ -191,13 +188,16 @@ export default {
// 根据值生产颜色段
getRandomColorLabel() {
const labels = this.getRandomLabel
console.log(labels)
const min = labels[0]
const max = labels[labels.length - 1]
const colorLabels = []
const part = (max - min) / 4
for (let i = 1; i <= 4; i++) {
colorLabels.push(Number((part * i - 1).toFixed(4)))
console.log(part)
colorLabels.push(Number((part * i - part).toFixed(4)))
}
console.log(colorLabels)
return colorLabels
},
...mapGetters(['getMsgOfProvince'])
......@@ -216,7 +216,6 @@ export default {
})
},
barClick(name) {
console.log(name)
const code = getCodeOfName(name.name)
code && (this.provinceCode = code)
}
......@@ -248,7 +247,10 @@ export default {
height: inherit;
}
.partItem {
height: 22vh;
height: 20vh;
background-color: #fff;
width: (100% - 2vh);
margin: 0 auto;
}
}
......
src/pages/methaneUpgrade/index.vue
View file @ 3570e9f4
This diff is collapsed.
src/pages/renewableEnergyVillage/components/energyVillageMap.vue
View file @ 3570e9f4
......@@ -46,6 +46,7 @@ export default {
],
{
padding: { bottom: 80, top: 120, left: 80, right: 270 },
animate:false
}
);
await this.getData();
......
src/pages/renewableEnergyVillage/components/sortList.vue
View file @ 3570e9f4
......@@ -68,13 +68,9 @@ export default {
type: 'value',
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.15)'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
}
}
],
......@@ -88,9 +84,6 @@ export default {
axisLine: {
show: false
},
axisLabel: {
color: '#fff'
}
}
],
series: [
......@@ -98,10 +91,6 @@ export default {
type: 'bar',
barWidth: 12,
data: yData,
label: {
show: true,
position: 'right'
},
itemStyle: {
color: 'rgb(255, 122,12)',
emphasis: {
......@@ -141,9 +130,11 @@ export default {
}
.partItem {
width: 100%;
height: 55vh;
width: calc(100% - 2vh);
height: 53vh;
overflow-y: auto;
background-color: #fff;
margin: 0 auto;
}
}
.left-part-item:nth-child(odd) {
......
src/pages/renewableEnergyVillage/index.vue
View file @ 3570e9f4
......@@ -161,7 +161,7 @@ export default {
position: absolute;
top: calc(11vh + 45px + 5vh);
left: 1vw;
width: 250px;
// width: 200px;
&.part {
height: auto;
......
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