Skip to content

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

样式调整

parent e752c89b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 414 additions and 482 deletions
src/App.vue
View file @ 74307dbf
......@@ -7,18 +7,18 @@
</template>
<script>
import { mapActions } from "vuex";
import { mapActions } from 'vuex'
export default {
data() {
return {};
return {}
},
created() {
this.getRegionProvince();
this.getRegionProvince()
},
methods: {
...mapActions(["getRegionProvince"]),
},
};
...mapActions(['getRegionProvince'])
}
}
</script>
<style lang="less">
......@@ -29,12 +29,15 @@ body {
height: 100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-weight: 700;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// text-align: center;
color: #fff;
background: url("./assets/img/bg.png") no-repeat;
background: url('./assets/img/bg.png') no-repeat;
background-size: 100% 100%;
background-position: center;
background-attachment: fixed;
......
src/components/PartWrap/PartWrap.vue
View file @ 74307dbf
......@@ -39,7 +39,7 @@ export default {
<style lang="less" scoped>
// 各模块简单基本样式
.part {
height: 100%;
// height: 100%;
padding: 1.2vh;
min-height: 9vh;
box-sizing: border-box;
......
src/components/statusControl/index.vue
View file @ 74307dbf
<template>
<div class="statusControl" :style="statusStyle">
<div :class="['wrap', isShow ? 'isShowWrap' : 'noShowWrap']">
<div class="this_active" @click="() => (isShow = !isShow)">
<span>{{ value.value }} </span>
<i
:class="isShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
style="color: #fff"
></i>
</div>
<div class="statusControl" v-show="isShow" :style="statusStyle">
<ul>
<li
v-for="(item, index) in list"
......@@ -11,58 +19,103 @@
</li>
</ul>
</div>
</div>
</template>
<script>
// #144683
export default {
name: "statusControl",
name: 'statusControl',
props: {
list: {
type: Array,
default: function () {
return [];
},
return []
}
},
statusStyle: {
type: [Object, String],
default: "",
default: ''
},
value: {
type: Object,
default: function () {
return {};
},
},
return {}
}
}
},
data() {
return {};
return {
isShow: false
}
},
methods: {
onStatusChange(item) {
this.$emit("input", item);
},
},
};
this.$emit('input', item)
this.isShow = false
}
}
}
</script>
<style scoped lang="less">
.wrap {
overflow: hidden;
width: auto;
}
.isShowWrap {
// border-radius: 30px;
.this_active {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
}
.noShowWrap {
.this_active {
width: 200px;
border-radius: 22.5px;
}
}
.this_active {
// width: 100%;
line-height: 45px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px 0 25px;
box-sizing: border-box;
background-color: #16ceaf;
}
.statusControl {
ul li {
background-color: hsla(0, 0%, 100%, 0.5);
width: 340px;
padding: 15px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
margin-bottom: 10px;
margin-top: 10px;
border-radius: 15px;
padding: 5px 10px;
width: 170px;
width: 160px;
box-sizing: border-box;
color: #84c6ff;
// background-color: #fff;
box-shadow: 0 0 5px #fff9;
box-shadow: 0 0 2px #fff9;
text-align: center;
cursor: pointer;
border: 1px solid #84c6ff;
background-color: #fff;
&.acitive {
color: #fff;
background-color: #16ceaf;
}
}
}
}
</style>
src/pages/biogasManureEcoAgriculture/index.vue
View file @ 74307dbf
......@@ -360,7 +360,7 @@ export default {
}
.left-part {
z-index: 99;
// display: flex;
display: flex;
// flex-direction: column;
height: 55vh;
// width: 250px;
......@@ -370,7 +370,7 @@ export default {
z-index: 100;
.left-part-item {
height: 5vh;
margin-bottom: 1vh;
margin-right: 1vh;
}
}
.bottom-part {
......@@ -403,9 +403,9 @@ export default {
}
.status-control {
position: absolute;
right: 1vw;
top: 12vh;
z-index: 99;
left: 1vw;
top: 21vh;
z-index: 999;
}
}
</style>
......
src/pages/biomassEnergyWarm/components/leftPart.vue
View file @ 74307dbf
......@@ -88,8 +88,8 @@ export default {
<style scoped lang="less">
.leftPart {
display: flex;
flex-direction: column;
width: 250px;
// flex-direction: column;
// width: 250px;
position: absolute;
top: 11vh;
left: 1vw;
......@@ -98,7 +98,7 @@ export default {
left: 280px;
}
.left-part-item {
margin-bottom: 2vh;
margin-right: 2vw;
}
}
</style>
src/pages/biomassEnergyWarm/index.vue
View file @ 74307dbf
......@@ -8,11 +8,7 @@
:data="data"
:provinceCode="provinceCode"
></BiogasManureMap>
<StatusControl
:statusStyle="{ position: 'absolute', right: '27.7vw', top: '100px' }"
:list="statusControlList"
v-model="statusValue"
></StatusControl>
<SortList :type="statusValue.key" @barClick="barClick"></SortList>
<!-- 表格数据展示 -->
<Table :type="statusValue.key" :data="data"></Table>
......@@ -28,15 +24,17 @@
</div>
</PartWrap>
</div>
<div class="status_control_wrap">
<StatusControl
:statusStyle="{
position: 'absolute',
right: '27.7vw',
bottom: '30.5vh',
}"
:list="statusControlList"
v-model="statusValue"
></StatusControl>
<StatusControl
class="StatusControl"
:list="getAllItemOfType"
v-model="allItemValue"
></StatusControl>
</div>
<Legend
class="legendPart"
:colors="color"
......@@ -46,36 +44,36 @@
</template>
<script>
import PartWrap from "@/components/PartWrap/PartWrap.vue";
import Echart from "@/components/Echart/Echarts.vue";
import StatusControl from "@/components/statusControl/index.vue";
import Legend from "@/components/Lengend/Lengend.vue";
import { getCodeOfName } from "@/config/city.config";
import BiogasManureMap from "./components/biogasManureMap.vue";
import LeftPart from "./components/leftPart.vue";
import SortList from "./components/sortList.vue";
import Table from "./components/table.vue";
import { BiomassData } from "./config/biomass.config.js";
import { color, colorLabel } from "./config/legend.config";
import { mapGetters } from "vuex";
import PartWrap from '@/components/PartWrap/PartWrap.vue'
import Echart from '@/components/Echart/Echarts.vue'
import StatusControl from '@/components/statusControl/index.vue'
import Legend from '@/components/Lengend/Lengend.vue'
import { getCodeOfName } from '@/config/city.config'
import BiogasManureMap from './components/biogasManureMap.vue'
import LeftPart from './components/leftPart.vue'
import SortList from './components/sortList.vue'
import Table from './components/table.vue'
import { BiomassData } from './config/biomass.config.js'
import { color, colorLabel } from './config/legend.config'
import { mapGetters } from 'vuex'
export default {
name: "BiomassEnergyWarm",
name: 'BiomassEnergyWarm',
data() {
return {
statusControlList: [
{ key: "gn", value: "打捆直燃集中供暖" },
{ key: "ghcx", value: "固化成型" },
{ key: "rj", value: "热解气化" },
{ key: "th", value: "碳化" },
{ key: 'gn', value: '打捆直燃集中供暖' },
{ key: 'ghcx', value: '固化成型' },
{ key: 'rj', value: '热解气化' },
{ key: 'th', value: '碳化' }
],
statusValue: { key: "gn", value: "打捆直燃集中供暖" },
dataSetCode: "ra_energy_heating",
statusValue: { key: 'gn', value: '打捆直燃集中供暖' },
dataSetCode: 'ra_energy_heating',
data: [],
color,
colorLabel,
provinceCode: "",
allItemValue: { key: "gn_local", value: "数量（处）" },
};
provinceCode: '',
allItemValue: { key: 'gn_local', value: '数量（处）' }
}
},
components: {
PartWrap,
......@@ -85,53 +83,53 @@ export default {
StatusControl,
SortList,
Table,
Legend,
Legend
},
computed: {
getItemOfType() {
return BiomassData[this.statusValue.key].find(
(item) => item.type === "aggregation"
);
item => item.type === 'aggregation'
)
},
getAllItemOfType() {
return BiomassData[this.statusValue.key];
return BiomassData[this.statusValue.key]
},
getValOfdata() {
const res = {
[this.getItemOfType.key]: [],
};
[this.getItemOfType.key]: []
}
this.data.forEach((item) => {
this.data.forEach(item => {
res[this.getItemOfType.key].push({
xAxis: item.properties.pname,
yAxis: item.properties[this.getItemOfType.key],
});
});
return res;
yAxis: item.properties[this.getItemOfType.key]
})
})
return res
},
setOptionOfEchart() {
return function (type) {
const data = this.getValOfdata[type]
.filter((item) => item.yAxis)
.sort((a, b) => b.yAxis - a.yAxis);
const xData = data.map((item) => item.xAxis);
const yData = data.map((item) => item.yAxis);
.filter(item => item.yAxis)
.sort((a, b) => b.yAxis - a.yAxis)
const xData = data.map(item => item.xAxis)
const yData = data.map(item => item.yAxis)
const option = {
title: {},
color: ["#d65108"],
color: ['#d65108'],
tooltip: {
show: true,
show: true
},
grid: {
left: "3%",
right: "3%",
top: "10%",
bottom: "3%",
containLabel: true,
left: '3%',
right: '3%',
top: '10%',
bottom: '3%',
containLabel: true
},
yAxis: [
{
type: "value",
type: 'value',
// splitLine: {
// lineStyle: {
// color: "rgba(255,255,255,.15)",
......@@ -139,101 +137,101 @@ export default {
// },
axisLine: {
lineStyle: {
color: "#fff",
},
},
},
color: '#fff'
}
}
}
],
xAxis: [
{
position: "bottom",
type: "category",
position: 'bottom',
type: 'category',
data: xData,
axisTick: {
show: false,
show: false
},
axisLine: {
show: false,
show: false
},
axisLabel: {
color: "#fff",
},
},
color: '#fff'
}
}
],
series: [
{
name: "",
type: "bar",
name: '',
type: 'bar',
barWidth: `50%`,
data: yData,
label: {
show: true,
position: "top",
position: 'top'
},
itemStyle: {
// emphasis: {
// color: "rgba(201,59,60)",
// },
},
},
],
};
return option;
};
}
}
]
}
return option
}
},
// 获取所有值
getRandomLabel() {
const obj = BiomassData[this.statusValue.key].find(
(item) => item.key === this.allItemValue.key
);
const res = [];
this.data.forEach((item) => {
res.push(item.properties[obj.key]);
});
return [...new Set(res)].filter((item) => item).sort((a, b) => a - b);
item => item.key === this.allItemValue.key
)
const res = []
this.data.forEach(item => {
res.push(item.properties[obj.key])
})
return [...new Set(res)].filter(item => item).sort((a, b) => a - b)
},
// 根据值生产颜色段
getRandomColorLabel() {
const labels = this.getRandomLabel;
const min = labels[0];
const max = labels[labels.length - 1];
const colorLabels = [];
const part = (max - min) / 4;
const labels = this.getRandomLabel
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)));
colorLabels.push(Number((part * i - 1).toFixed(4)))
}
return colorLabels;
return colorLabels
},
...mapGetters(["getMsgOfProvince"]),
...mapGetters(['getMsgOfProvince'])
},
created() {
this.getEnergyWarm();
this.getEnergyWarm()
},
methods: {
getEnergyWarm() {
const param = {
filter: ["!=", "pcode", 10],
};
this.$api.layer.query(this.dataSetCode, param).then((res) => {
this.data = res.data.features;
this.getValOfdata;
});
filter: ['!=', 'pcode', 10]
}
this.$api.layer.query(this.dataSetCode, param).then(res => {
this.data = res.data.features
this.getValOfdata
})
},
barClick(name) {
console.log(name);
const code = getCodeOfName(name.name);
code && (this.provinceCode = code);
},
console.log(name)
const code = getCodeOfName(name.name)
code && (this.provinceCode = code)
}
},
watch: {
statusValue: {
handler(val) {
this.allItemValue = BiomassData[val.key][0];
},
deep: true,
this.allItemValue = BiomassData[val.key][0]
},
},
};
deep: true
}
}
}
</script>
<style scoped lang="less">
......@@ -259,8 +257,16 @@ export default {
.legendPart {
position: absolute;
z-index: 11;
left: 300px;
left: 1vw;
bottom: 30.5vh;
}
.status_control_wrap {
position: absolute;
left: 1vw;
top: 21vh;
.StatusControl{
margin-top: 1vh;
}
}
}
</style>
src/pages/methaneUpgrade/index.vue
View file @ 74307dbf
This diff is collapsed.
src/pages/renewableEnergyVillage/index.vue
View file @ 74307dbf
......@@ -17,12 +17,9 @@
:yearValue="yearValue"
@showPopup="isShowPopup"
></EnergyVillageMap>
<StatusControl
class="statusControl"
:list="statusControlList"
:value="showFilter"
@input="onStatusChange"
></StatusControl>
<div class="statusControl" @click="onStatusChange">
{{ statusValue.value }}
</div>
<!-- <Table class="table"></Table> -->
<SortList
:provinceCode="statusValue.key"
......@@ -30,7 +27,7 @@
:yearValue="yearValue"
></SortList>
<FilterProvince
v-if="showFilter.key"
v-if="showFilter"
class="filterProvince"
@onAddressChange="onAddressChange"
></FilterProvince>
......@@ -39,93 +36,94 @@
</template>
<script>
import { mapActions, mapState } from "vuex";
import PartWrap from "@/components/PartWrap/PartWrap.vue";
import StatusControl from "@/components/statusControl/index.vue";
import { getCodeOfName } from "@/config/city.config";
import DateWidget from "@/components/DateWidget/DateWidget.vue";
import EnergyVillageMap from "./components/energyVillageMap.vue";
import { mapActions, mapState } from 'vuex'
import PartWrap from '@/components/PartWrap/PartWrap.vue'
// import StatusControl from '@/components/statusControl/index.vue'
import { getCodeOfName } from '@/config/city.config'
import DateWidget from '@/components/DateWidget/DateWidget.vue'
import EnergyVillageMap from './components/energyVillageMap.vue'
// import Table from "./components/table.vue";
import FilterProvince from "./components/filterProvince.vue";
import SortList from "./components/sortList.vue";
import PicPopup from "./components/picPopup.vue";
import FilterProvince from './components/filterProvince.vue'
import SortList from './components/sortList.vue'
import PicPopup from './components/picPopup.vue'
export default {
name: "RenewableEnergyVillage",
name: 'RenewableEnergyVillage',
components: {
PartWrap,
EnergyVillageMap,
// Table,
StatusControl,
// StatusControl,
SortList,
FilterProvince,
DateWidget,
PicPopup,
PicPopup
},
created() {
this.getData();
this.getData()
},
data() {
return {
statusControlList: [{ key: "province", value: "省份筛选" }],
showFilter: {},
statusValue: {},
statusControlList: [{ key: 'province', value: '省份筛选' }],
showFilter: '',
statusValue: { value: '全国' },
yearRange: [],
yearValue: "",
yearValue: '',
showPopup: false,
popupId: "",
};
popupId: ''
}
},
computed: {
getYearRange() {
let yearRange = [];
this.data.features.forEach((item) => {
let year = item.properties.vliiage_year;
if (!yearRange.find((item) => item === year)) {
yearRange.push(year);
let yearRange = []
this.data.features.forEach(item => {
let year = item.properties.vliiage_year
if (!yearRange.find(item => item === year)) {
yearRange.push(year)
}
});
})
let max = Math.max(...yearRange);
let min = Math.min(...yearRange);
return [String(min), String(max)];
let max = Math.max(...yearRange)
let min = Math.min(...yearRange)
return [String(min), String(max)]
},
getCount() {
return this.data.features.filter(
(item) => item.properties.vliiage_year === this.yearValue
);
item => item.properties.vliiage_year === this.yearValue
)
},
...mapState("energyVillage", ["data"]),
...mapState('energyVillage', ['data'])
},
methods: {
onStatusChange(e) {
if (e.key === this.showFilter.key) {
this.showFilter = {};
} else {
this.showFilter = e;
}
onStatusChange() {
// if (e.key === this.showFilter.key) {
// this.showFilter = {}
// } else {
this.showFilter = true
// }
},
barClick(name) {
const code = getCodeOfName(name.name);
code && (this.statusValue = { key: code, value: name });
const code = getCodeOfName(name.name)
code && (this.statusValue = { key: code, value: name })
},
onAddressChange(item) {
this.statusValue = {
key: item.province_code,
value: item.province,
};
value: item.province
}
this.showFilter = false
},
dateChange(e) {
this.yearValue = e;
this.yearValue = e
},
isShowPopup(id) {
this.popupId = id;
if (id === "14") {
this.showPopup = true;
this.popupId = id
if (id === '14') {
this.showPopup = true
}
},
...mapActions("energyVillage", ["getData"]),
},
};
...mapActions('energyVillage', ['getData'])
}
}
</script>
<style lang="less" scoped>
......@@ -168,6 +166,16 @@ export default {
position: absolute;
top: 11vh;
right: calc(3vh + 13vw);
border-radius: 15px;
padding: 5px 10px;
width: 130px;
box-sizing: border-box;
color: #fff;
background-color: #16ceaf;
box-shadow: 0 0 5px #fff9;
text-align: center;
cursor: pointer;
border: 1px solid #84c6ff;
}
}
</style>
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