Skip to content

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

fix: 修改标题，信息弹窗，调整间距等等

parent 68756cae
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 78 deletions
src/assets/css/index.less
View file @ 07bd3ec6
......@@ -465,4 +465,16 @@ i {
.leaflet-control-clegend-right {
right: 20vw;
bottom: 0;
}
&::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: rgba(0, 100, 200, 0.2);
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
// box-shadow: inset 0 0 6px rgba(234, 227, 216, 0.1);
background-color: rgba(0, 100, 210, 1);
}
\ No newline at end of file
src/components/PartWrap/PartWrap.vue
View file @ 07bd3ec6
<template>
<div class="part info">
<label class="title" for="title">
<i class="el-icon-s-flag"></i>
<i v-if="isFlag" class="el-icon-s-flag"></i>
{{ title }}
</label>
<div>
......@@ -28,6 +28,10 @@ export default {
value: {
type: [String, Number],
},
isFlag: {
type: Boolean,
default: true,
},
},
};
</script>
......
src/pages/biomassEnergyWarm/components/biogasManureMap.vue
View file @ 07bd3ec6
......@@ -43,14 +43,23 @@ export default {
const currentColor = this.getCurrentColor(item.properties[obj.key]);
filterCon.push(item.properties.pcode, currentColor);
});
filterCon.push("#f00");
return filterCon;
filterCon.push(color[0]);
return filterCon.length === 3 ? undefined : filterCon;
},
...mapGetters(["getMsgOfProvince"]),
},
methods: {
onload(map) {
this.map = map;
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602],
],
{
padding: { bottom: 500, top: 120, left: 80, right: 470 },
}
);
this.setPaintColor();
},
getCurrentColor(val) {
......
src/pages/biomassEnergyWarm/components/sortList.vue
View file @ 07bd3ec6
......@@ -5,8 +5,9 @@
v-for="(item, index) in getItemOfType"
:key="index"
:title="item.value"
:style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }"
:style="{ width: '48%' }"
>
<!-- :style="{ width: `${getItemOfType.length === 1 ? '100%' : '48%'}` }" -->
<div class="partItem">
<Echart
ref="echart3"
......@@ -72,18 +73,15 @@ export default {
const xData = data.map((item) => item.xAxis);
const yData = data.map((item) => item.yAxis);
const option = {
title: {
text: "各省入侵报告次数",
textStyle: {
color: "rgba(12,88,97,.8)",
fontSize: 16,
},
},
title: {},
color: ["#d65108"],
tooltip: {
show: true,
},
grid: {
left: "3%",
right: "3%",
top: "10%",
right: "13%",
top: "3%",
bottom: "3%",
containLabel: true,
},
......@@ -122,7 +120,7 @@ export default {
{
name: "入侵报告次数",
type: "bar",
barWidth: 12,
barWidth: `80%`,
data: yData,
label: {
show: true,
......
src/pages/biomassEnergyWarm/components/table.vue
View file @ 07bd3ec6
......@@ -20,7 +20,7 @@
v-for="(item, index) in getItemOfType"
:key="index"
:label="item.value"
:width="450 / getItemOfType.length"
:width="`${1 / getItemOfType.length}%`"
align="center"
>
</el-table-column>
......
src/pages/biomassEnergyWarm/index.vue
View file @ 07bd3ec6
......@@ -98,14 +98,11 @@ export default {
const xData = data.map((item) => item.xAxis);
const yData = data.map((item) => item.yAxis);
const option = {
title: {
text: "各省入侵报告次数",
textStyle: {
color: "rgba(12,88,97,.8)",
fontSize: 16,
},
},
title: {},
color: ["#d65108"],
tooltip: {
show: true,
},
grid: {
left: "3%",
right: "3%",
......@@ -148,11 +145,11 @@ export default {
{
name: "入侵报告次数",
type: "bar",
barWidth: 12,
barWidth: `50%`,
data: yData,
label: {
show: true,
position: "right",
position: "top",
},
itemStyle: {
emphasis: {
......@@ -198,7 +195,7 @@ export default {
position: absolute;
bottom: 1vw;
right: 1vw;
left: calc(600px + 1vw);
left: calc(31vw + 2vw);
height: 27vh;
.left-part-item {
......
src/pages/renewableEnergyVillage/components/energyVillageMap.vue
View file @ 07bd3ec6
......@@ -38,6 +38,15 @@ export default {
methods: {
async onload(map) {
this.map = map;
this.map.fitBounds(
[
[73.487345, 17.397329],
[135.087387, 53.561602],
],
{
padding: { bottom: 80, top: 120, left: 80, right: 470 },
}
);
await this.getData();
this.addLayer();
},
......
src/pages/renewableEnergyVillage/components/filterProvince.vue
View file @ 07bd3ec6
<template>
<div class="filterProvince">
<div class="search">
<input type="text" v-model.lazy="search" />
</div>
<div class="content">
<ul>
<li
v-for="(item, index) in getData"
@click="onAddressChange(item)"
:key="index"
>
{{ item.province }}
</li>
</ul>
</div>
<PartWrap :isFlag="false">
<div class="search">
<input type="text" v-model="search" />
</div>
<div class="content">
<ul>
<li
v-for="(item, index) in getData"
@click="onAddressChange(item)"
:key="index"
>
{{ item.province }}
</li>
</ul>
</div>
</PartWrap>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import PartWrap from "@/components/PartWrap/PartWrap.vue";
export default {
name: "filterProvince",
data() {
......@@ -26,16 +29,21 @@ export default {
search: "",
};
},
components: {
PartWrap,
},
created() {},
computed: {
getData() {
let data = [];
data = this.getAggregationProvince();
if (this.search) {
data = this.getAggregationProvince().filter(
(item) => item.province === this.search
);
}
data = this.getAggregationProvince();
data.unshift({ province: "全国", provinceCode: "" });
!this.search && data.unshift({ province: "全国", provinceCode: "" });
return data;
},
...mapGetters("energyVillage", ["getAggregationProvince"]),
......@@ -51,12 +59,12 @@ export default {
<style scoped lang="less">
.filterProvince {
width: 300px;
padding: 10px;
.search input {
width: 90%;
transform: translate(5%);
margin: 0 auto;
margin: 10px auto 20px;
padding-left: 5px;
outline: none;
border: none;
height: 30px;
......@@ -64,7 +72,7 @@ export default {
border: 1px solid #eaeaee;
color: #999;
border-radius: 5px;
margin-bottom: 20px;
// margin-bottom: 20px;
}
ul {
display: flex;
......@@ -72,12 +80,12 @@ export default {
align-items: center;
text-align: center;
li {
width: 100px;
width: 33%;
cursor: pointer;
}
li:hover {
color: blue;
color: #5e8ed1;
}
}
}
......
src/pages/renewableEnergyVillage/components/picPopup.vue
View file @ 07bd3ec6
<template>
<div class="picPopup">
<el-dialog
title="提示"
title=""
:visible.sync="getVisible"
width="70%"
:before-close="handleClose"
......@@ -21,10 +21,19 @@
class="left el-icon-arrow-left"
@click="listValue <= 0 || (listValue -= 1)"
></i>
<img
:src="`${BASE_URL}/images/14_${list[listValue].key}.jpg`"
alt=""
/>
<div class="contain">
<div class="zero" v-if="listValue === 0">
<img :src="`${BASE_URL}/images/14_basic_info1.jpg`" alt="" />
<img :src="`${BASE_URL}/images/14_basic_info2.jpg`" alt="" />
<img :src="`${BASE_URL}/images/14_basic_info3.jpg`" alt="" />
</div>
<template v-else>
<img
:src="`${BASE_URL}/images/14_${list[listValue].key}.jpg`"
alt=""
/>
</template>
</div>
<i
class="right el-icon-arrow-right"
@click="listValue >= list.length - 1 || (listValue += 1)"
......@@ -33,9 +42,9 @@
</div>
<span slot="footer" class="dialog-footer">
<el-button size="medium" @click="getVisible = false">取 消</el-button>
<el-button size="medium" type="primary" @click="getVisible = false"
>确 定</el-button
>
<el-button size="medium" type="primary" @click="getVisible = false">
确 定
</el-button>
</span>
</el-dialog>
</div>
......@@ -55,9 +64,7 @@ export default {
return {
BASE_URL: process.env.VUE_APP_BASE_URL,
list: [
{ key: "basic_info1", value: "基本情况" },
{ key: "basic_info2", value: "基本情况2" },
{ key: "basic_info3", value: "基本情况3" },
{ key: "basic_info", value: "基本情况" },
{ key: "technical_patterns", value: "技术模式" },
{ key: "goal_achievement", value: "目标实现情况" },
{ key: "eco_benefits", value: "效益分析" },
......@@ -92,6 +99,9 @@ export default {
<style scoped lang="less">
.picPopup {
/deep/ .el-dialog {
margin-top: 10vh !important;
}
.select {
display: flex;
justify-content: space-between;
......@@ -118,10 +128,20 @@ export default {
cursor: pointer;
}
img {
.contain {
flex: 1;
height: 50vh;
object-fit: contain;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.zero {
width: 100%;
height: 100%;
overflow-y: auto;
}
}
}
......
src/pages/renewableEnergyVillage/components/sortList.vue
View file @ 07bd3ec6
<template>
<div class="sortList">
<PartWrap class="left-part-item" title="消耗量（万吨）" style="width: 100%">
<PartWrap class="left-part-item" title="数量（个）" style="width: 100%">
<div class="partItem">
<Echart
ref="echart3"
......@@ -52,21 +52,17 @@ export default {
const xData = data.map((item) => item.province);
const yData = data.map((item) => item.count);
const option = {
title: {
text: "各省入侵报告次数",
textStyle: {
color: "rgba(12,88,97,.8)",
fontSize: 16,
},
},
color: ["#d65108"],
grid: {
left: "3%",
right: "3%",
top: "10%",
right: "13%",
top: "3%",
bottom: "3%",
containLabel: true,
},
tooltip: {
show: true,
},
xAxis: [
{
position: "top",
......
src/pages/renewableEnergyVillage/index.vue
View file @ 07bd3ec6
......@@ -18,7 +18,7 @@
@showPopup="isShowPopup"
></EnergyVillageMap>
<StatusControl
:statusStyle="{ position: 'absolute', right: '600px', top: '100px' }"
class="statusControl"
:list="statusControlList"
:value="showFilter"
@input="onStatusChange"
......@@ -119,7 +119,9 @@ export default {
},
isShowPopup(id) {
this.popupId = id;
this.showPopup = true;
if (id === "14") {
this.showPopup = true;
}
},
...mapActions("energyVillage", ["getData"]),
},
......@@ -132,7 +134,7 @@ export default {
.left-part-item {
position: absolute;
top: 11vh;
top: calc(11vh + 45px + 2vh);
left: 1vw;
width: 250px;
......@@ -152,16 +154,20 @@ export default {
.filterProvince {
position: absolute;
right: 600px;
top: 140px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
right: calc(3vh + 550px);
top: calc(11vh + 44px + 1vh);
}
.date-widget {
position: absolute;
left: 280px;
top: 100px;
top: 11vh;
left: 1vw;
}
.statusControl {
position: absolute;
top: 11vh;
right: calc(3vh + 550px);
}
}
</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