Skip to content

C
country-energy-ecological-construction
Commit 3781c533 authored by 吕超's avatar 吕超
Browse files
Options

Merge remote-tracking branch 'origin/van_branch' into lc_branch

parents e52f0656 4655be12
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 630 additions and 118 deletions
src/components/Lengend/Lengend.vue
View file @ 3781c533
......@@ -24,43 +24,43 @@
<script>
export default {
data() {
return {};
return {}
},
props: {
title: {
type: String,
type: String
},
colors: {
type: Array,
type: Array
},
range: {
type: Array,
},
type: Array
}
},
computed: {
getCode() {
return function (index) {
if (index === 0) {
return "<";
return '<'
}
if (index === this.colors.length - 1) {
return ">";
return '>'
}
return "-";
};
},
},
};
return '-'
}
}
}
}
</script>
<style lang="less" scoped>
.legend {
position: absolute;
right: 1vh;
bottom: 1vh;
padding: 10px;
background-color: rgba(1, 1, 1, 0.3);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 3px;
.title {
width: 100%;
......@@ -73,19 +73,17 @@ export default {
.item {
display: flex;
align-items: center;
margin-bottom: .3vh;
.circle {
border-radius: 2px;
width: 17px;
height: 10px;
margin-right: 0.5vh;
width: 30px;
height: 15px;
margin-right: 14px;
}
label {
color: @main-color;
font-size: 1.2vh;
}
}
.item + .item {
margin-top: 0.3vh;
}
}
</style>
src/components/Map/Map.vue
View file @ 3781c533
......@@ -106,7 +106,7 @@ export default {
layout: {
"text-font": ["open-sans"],
"text-field": "{PXZQMC}",
"text-size": 17,
"text-size": 16,
"text-max-width": 5,
},
// maxzoom: 7,
......
src/components/PartWrap/PartWrap.vue
View file @ 3781c533
......@@ -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 @ 3781c533
......@@ -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 @ 3781c533
<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/methaneUpgrade/index.vue
View file @ 3781c533
<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"
......@@ -10,7 +37,7 @@
class="bottom-part-table-cont"
style="width: 100%,height:100%; padding-top:10px"
>
<el-table :data="tableData" border style="width: 100%" height="25vh">
<el-table :data="tableData" border style="width: 100%" height="22vh">
<el-table-column
type="index"
label="序号"
......@@ -48,42 +75,15 @@
class="bottom-part-echart"
:title="thisCity ? thisCity.name : '全国' + statusValue1.value"
>
<div style="width: 100%; height: 25vh">
<div style="width: 100%; height: 23vh">
<Echart ref="echart3" :options="bottom_option" />
</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="bottom-part-echart" :title="'年末累计(处)'">
<div style="width: 13vw; height: 38vh">
<PartWrap class="right-part-echart" :title="'年末累计(处)'">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart1_option"
......@@ -91,8 +91,8 @@
/>
</div>
</PartWrap>
<PartWrap class="bottom-part-echart" :title="'总池容(万立方米)'">
<div style="width: 13vw; height: 38vh">
<PartWrap class="right-part-echart" :title="'总池容(万立方米)'">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart2_option"
......@@ -100,8 +100,8 @@
/>
</div>
</PartWrap>
<PartWrap class="bottom-part-echart" :title="'供气户数(万户)'">
<div style="width: 13vw; height: 38vh">
<PartWrap class="right-part-echart" :title="'供气户数(万户)'">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart3_option"
......@@ -109,8 +109,8 @@
/>
</div>
</PartWrap>
<PartWrap class="bottom-part-echart" :title="'装机容量(千瓦)'">
<div style="width: 13vw; height: 38vh">
<PartWrap class="right-part-echart" :title="'装机容量(千瓦)'">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart4_option"
......@@ -450,20 +450,53 @@ 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: 120, left: 80, right: 470 }
}
)
},
echartBarClick(e) {
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: 120, left: 80, right: 450 }
}
)
}
},
dateChange(e) {
console.log(e)
this.thisYear = e
this.getLeftData()
this.getTableData()
......@@ -510,7 +543,7 @@ export default {
a.push(this.getColorOfProvince(Number(item[this.statusValue1.key])))
})
console.log(a)
a.push('#ccc')
a.push('rgba(0,0,0,0)')
this.$refs.map.setBackground(a)
},
getColorOfProvince(count) {
......@@ -712,31 +745,30 @@ export default {
}
.left-part {
z-index: 99;
display: flex;
flex-direction: column;
height: 55vh;
width: 250px;
position: absolute;
top: 11vh;
left: 1vw;
z-index: 100;
.date-widget {
position: absolute;
left: 280px;
position: relative;
// right: calc(-100% - 1vw);
margin-bottom: 3vh;
}
.left-part-item {
margin-bottom: 2vh;
height: 5vh;
margin-bottom: 1vh;
}
}
.bottom-part {
z-index: 99;
width: 70vw;
width: 71vw;
display: flex;
justify-content: space-between;
position: absolute;
height: 30vh;
bottom: 2vh;
left: 2vh;
height: 27vh;
bottom: 1vh;
left: 1vw;
z-index: 21;
display: flex;
.bottom-part-table {
......@@ -754,28 +786,32 @@ export default {
position: absolute;
z-index: 11;
left: 300px;
bottom: 33vh;
bottom: 29vh;
}
.right-part {
margin-right: 1vw;
z-index: 99;
position: absolute;
right: 0;
top: 12vh;
bottom: 1vh;
display: flex;
width: 28vw;
width: 26vw;
flex-wrap: wrap;
justify-content: space-around;
.right-part-echart {
margin-top: 1vh;
}
}
.status-control {
position: absolute;
right: 29vw;
top: 12vh;
right: 28vw;
top: 13vh;
z-index: 99;
}
.status-control1 {
position: absolute;
right: 29vw;
bottom: 33vh;
right: 28vw;
bottom: 29vh;
z-index: 99;
}
}
......
src/router/index.js
View file @ 3781c533
......@@ -5,6 +5,7 @@ import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{ path: "/", redirect: "/methane_upgrade" },
{
path: "/",
name: "Home",
......
src/views/Home.vue
View file @ 3781c533
......@@ -7,23 +7,41 @@
<h3>农村农业生态建设</h3>
</div>
<div class="menu">
<div class="a-menu" @click="$router.push('/methane_upgrade')">
沼气
<div
:class="[
'a-menu',
$route.path == '/methane_upgrade' ? 'active' : ''
]"
@click="$router.push('/methane_upgrade')"
>
农村沼气转型升级
</div>
<div class="a-menu" @click="$router.push('/biomass_energy_warm')">
生物
<div
:class="[
'a-menu',
$route.path == '/biomass_energy_warm' ? 'active' : ''
]"
@click="$router.push('/biomass_energy_warm')"
>
生物质能清洁取暖
</div>
<div
class="a-menu"
:class="[
'a-menu',
$route.path == '/biogas_manure_eco_agriculture' ? 'active' : ''
]"
@click="$router.push('/biogas_manure_eco_agriculture')"
>
沼肥
沼肥生态农业
</div>
<div
class="a-menu"
:class="[
'a-menu',
$route.path == '/renewable_energy_village' ? 'active' : ''
]"
@click="$router.push('/renewable_energy_village')"
>
示范村
可再生能源示范村
</div>
</div>
</div>
......@@ -40,16 +58,16 @@
<script>
export default {
name: "Home",
name: 'Home',
data() {
return {
// baseUrl: process.env.BASE_URL
};
}
},
components: {
// HelloWorld,
},
};
}
}
</script>
<style scoped lang="less">
......@@ -91,26 +109,42 @@ export default {
}
h3 {
font-size: 4.7vh;
line-height: 10vh;
line-height: 8vh;
font-weight: 700;
letter-spacing: 0.1vh;
color: @main-color;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
}
.menu {
display: flex;
align-items: center;
margin-right: 40px;
.a-menu {
width: 50px;
height: 50px;
background-color: @main-color;
margin-right: 20px;
border-radius: 50%;
line-height: 50px;
// width: 50px;
height: 8vh;
// background-color: @main-color;
// margin-right: 20px;
// border-radius: 50%;
line-height: 7vh;
font-size: 2vh;
font-weight: 600;
padding: 10px;
box-sizing: border-box;
text-align: center;
color: aliceblue;
color: @main-color;
&:hover {
// background-color: rgb(206, 206, 206);
}
}
.active {
color: #fff;
background: linear-gradient(
to bottom,
rgba(0, 100, 200, 0.4),
rgba(0, 200, 100, 0)
);
}
}
}
......
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