From c73a31a4fadbd10651702e8466a46abfcdb1a143 Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期日, 30 五月 2021 15:48:43 +0800
Subject: [PATCH] 废水接口替换完成，头部检测项动态展示，UI优化
---
src/components/base-page/WasteWater/WasteWaterIndex.vue | 4
src/components/base-page/WasteWater/PublicTabs.vue | 22 ++++---
src/components/base-page/WasteWater/WasteWaterDayChart.vue | 46 ++++++++++++--
src/components/base-page/PublicSector.vue | 1
src/App.vue | 2
src/components/base-page/WasteWater/WasteWaterHoursChart.vue | 46 ++++++++++++---
src/components/base-page/WasteWater/WasteWaterRealChart.vue | 38 +++++++++++-
7 files changed, 123 insertions(+), 36 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index a2535d8..1e6c2a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -32,6 +32,6 @@
.popoverBoxStyle{
border: 0.00521rem solid #00fff6;
box-shadow: 0 0 0.03rem #00fff6;
- background-color: rgba(0, 16, 30, 0.7) !important;
+ background-color: rgba(0, 16, 30, 0.8) !important;
}
</style>
diff --git a/src/components/base-page/PublicSector.vue b/src/components/base-page/PublicSector.vue
index 328b263..146c612 100644
--- a/src/components/base-page/PublicSector.vue
+++ b/src/components/base-page/PublicSector.vue
@@ -31,7 +31,6 @@
.public-bounced-content {
padding: 0.05rem;
- display: flex;
.public-bounced-content-left {
}
diff --git a/src/components/base-page/WasteWater/PublicTabs.vue b/src/components/base-page/WasteWater/PublicTabs.vue
index 4b5b9b1..1f08bb6 100644
--- a/src/components/base-page/WasteWater/PublicTabs.vue
+++ b/src/components/base-page/WasteWater/PublicTabs.vue
@@ -8,12 +8,12 @@
<div class="main-matter">
<div>
<ul>
- <li>鐩戞祴鐐瑰悕绉�:{{ storagePlaceId.Name }}</li>
- <li>鐢熶骇鍗曚綅:{{ storagePlaceId.porltName }}</li>
- <li>鎺掓斁绫诲瀷鍚嶇О:{{ storagePlaceId.MonTypeName }}</li>
- <li>鎺掓斁鍘诲悜:{{ storagePlaceId.EmissDirecti }}</li>
- <li>鎺у埗绾у埆鍚嶇О:{{ storagePlaceId.ContrLevelShowName }}</li>
- <li>鍐�/澶栨帓鏀惧彛:{{ storagePlaceId.OrOutPortName }}</li>
+ <li><span class="namer">鐩戞祴鐐瑰悕绉帮細</span>{{ storagePlaceId.Name }}</li>
+ <li><span class="namer">鐢熶骇鍗曚綅锛�</span>{{ storagePlaceId.porltName }}</li>
+ <li><span class="namer">鎺掓斁绫诲瀷鍚嶇О锛�</span>{{ storagePlaceId.MonTypeName }}</li>
+ <li><span class="namer">鎺掓斁鍘诲悜锛�</span>{{ storagePlaceId.EmissDirecti }}</li>
+ <li><span class="namer">鎺у埗绾у埆鍚嶇О锛�</span>{{ storagePlaceId.ContrLevelShowName }}</li>
+ <li><span class="namer">鍐�/澶栨帓鏀惧彛锛�</span>{{ storagePlaceId.OrOutPortName }}</li>
</ul>
</div>
</div>
@@ -60,14 +60,18 @@
li {
margin-bottom: 0.04rem;
- text-align: center;
min-width: 31%;
- background-color: #243a55;
- color: #00d0f9;
+ box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
+ color: #00fff6;
border-radius: 0.02rem;
font-size: 0.08rem;
line-height: 0.09rem;
padding: 0.03rem .5%;
+ .namer{
+ display: inline-block;
+ width: .6rem;
+ text-align: right;
+ }
}
}
diff --git a/src/components/base-page/WasteWater/WasteWaterDayChart.vue b/src/components/base-page/WasteWater/WasteWaterDayChart.vue
index 8f0bce3..808879d 100644
--- a/src/components/base-page/WasteWater/WasteWaterDayChart.vue
+++ b/src/components/base-page/WasteWater/WasteWaterDayChart.vue
@@ -1,5 +1,5 @@
<template>
- <div class="echarts-box">
+ <div id="wasteWaterDayChartBox" class="echarts-box">
<div class="tab-scroll">
<PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
</div>
@@ -9,7 +9,7 @@
<span class="demonstration">缁撴潫鏃堕棿锛�</span>
<el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd" type="datetime" size="mini"></el-date-picker>
<span class="demonstration">閲囨牱鐐规暟锛�</span>
- <el-select v-model="formData.region" placeholder="璇烽�夋嫨" size="mini">
+ <el-select class="selectBox" v-model="formData.region" placeholder="璇烽�夋嫨" size="mini">
<el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
</el-select>
<el-button @click="querySearch()">鏌ヨ</el-button>
@@ -19,7 +19,7 @@
popper-class="popoverBoxStyle"
trigger="click">
<dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
- <el-button slot="reference">鏄庣粏琛�</el-button>
+ <el-button slot="reference" id="mingxiBtn">鏄庣粏琛�</el-button>
</el-popover>
</div>
<div class="echarts-chart">
@@ -521,9 +521,12 @@
saveAsImage: {}
}
},
- grid: { // 缃戞牸
- top: '20%'
- // left: '5%'
+ grid: {
+ // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁＄畻
+ top: '20%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%'
},
legend: {
data: legend
@@ -678,6 +681,33 @@
}
</script>
-<style scoped lang="less">
-
+<style lang="less">
+#wasteWaterDayChartBox .echarts-form .el-input__inner {
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+ border-color: #336fa4;
+}
+#wasteWaterDayChartBox .echarts-form{
+ margin-top: 1px
+}
+#wasteWaterDayChartBox .echarts-form .el-input__icon{
+ height: .13rem;
+ top: -.02rem;
+ right: -0.03rem;
+ position: absolute;
+ color: #00d0f9;
+}
+#wasteWaterDayChartBox .echarts-form .selectBox .el-input__icon:last-child{
+ top: .02rem;
+}
+#wasteWaterDayChartBox .echarts-form .selectBox .is-reverse{
+ top: -.02rem !important;
+}
+#wasteWaterDayChartBox .echarts-form .el-button{
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+}
+#mingxiBtn{
+ margin-left: -.02rem;
+}
</style>
diff --git a/src/components/base-page/WasteWater/WasteWaterHoursChart.vue b/src/components/base-page/WasteWater/WasteWaterHoursChart.vue
index 6cdefb1..a4b7d6c 100644
--- a/src/components/base-page/WasteWater/WasteWaterHoursChart.vue
+++ b/src/components/base-page/WasteWater/WasteWaterHoursChart.vue
@@ -1,5 +1,5 @@
<template>
- <div class="echarts-box">
+ <div id="wasteWaterHoursChartBox" class="echarts-box">
<div class="tab-scroll">
<PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
</div>
@@ -9,7 +9,7 @@
<span class="demonstration">缁撴潫鏃堕棿锛�</span>
<el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH" type="datetime" size="mini"></el-date-picker>
<span class="demonstration">閲囨牱鐐规暟锛�</span>
- <el-select v-model="formData.region" placeholder="璇烽�夋嫨" size="mini">
+ <el-select class="selectBox" v-model="formData.region" placeholder="璇烽�夋嫨" size="mini">
<el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
</el-select>
<el-button @click="querySearch()">鏌ヨ</el-button>
@@ -19,7 +19,7 @@
popper-class="popoverBoxStyle"
trigger="click">
<dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
- <el-button slot="reference">鏄庣粏琛�</el-button>
+ <el-button slot="reference" id="mingxiBtn">鏄庣粏琛�</el-button>
</el-popover>
</div>
<div class="echarts-chart">
@@ -541,12 +541,15 @@
saveAsImage: {}
}
},
- grid: { // 缃戞牸
- top: '20%'
- // left: '15%'
- },
legend: {
data: legend
+ },
+ grid: {
+ // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁＄畻
+ top: '20%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%'
},
dataZoom: [{
type: 'inside',
@@ -697,7 +700,30 @@
}
}
</script>
-
-<style scoped lang="less">
-
+<style>
+#wasteWaterHoursChartBox .echarts-form .el-input__inner {
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+ border-color: #336fa4;
+}
+#wasteWaterHoursChartBox .echarts-form .el-input__icon{
+ height: .13rem;
+ top: -.02rem;
+ right: -0.03rem;
+ position: absolute;
+ color: #00d0f9;
+}
+#wasteWaterHoursChartBox .echarts-form .selectBox .el-input__icon:last-child{
+ top: .02rem;
+}
+#wasteWaterHoursChartBox .echarts-form .selectBox .is-reverse{
+ top: -.02rem !important;
+}
+#wasteWaterHoursChartBox .echarts-form .el-button{
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+}
+#mingxiBtn{
+ margin-left: -.02rem;
+}
</style>
diff --git a/src/components/base-page/WasteWater/WasteWaterIndex.vue b/src/components/base-page/WasteWater/WasteWaterIndex.vue
index d5c3167..b8e3f42 100644
--- a/src/components/base-page/WasteWater/WasteWaterIndex.vue
+++ b/src/components/base-page/WasteWater/WasteWaterIndex.vue
@@ -28,9 +28,9 @@
<component :is="currentTab" ref="RealData"></component>
</div>
</template>
- <template v-slot:video>
+<!-- <template v-slot:video>
<public-video></public-video>
- </template>
+ </template>-->
</public-sector>
</template>
diff --git a/src/components/base-page/WasteWater/WasteWaterRealChart.vue b/src/components/base-page/WasteWater/WasteWaterRealChart.vue
index b332667..670b975 100644
--- a/src/components/base-page/WasteWater/WasteWaterRealChart.vue
+++ b/src/components/base-page/WasteWater/WasteWaterRealChart.vue
@@ -1,5 +1,5 @@
<template>
- <div class="echarts-box">
+ <div id="wasteWaterRealChartBox" class="echarts-box">
<div class="tab-scroll">
<PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
</div>
@@ -9,7 +9,7 @@
<span class="demonstration">缁撴潫鏃堕棿锛�</span>
<el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
<span class="demonstration">閲囨牱鐐规暟锛�</span>
- <el-select v-model="formData.region" placeholder="璇烽�夋嫨" size="mini">
+ <el-select class="selectBox" v-model="formData.region" placeholder="璇烽�夋嫨" size="mini">
<el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
</el-select>
<el-button @click="querySearch()">鏌ヨ</el-button>
@@ -502,7 +502,11 @@
}
},
grid: {
- top: '20%'
+ // 涓庣粷瀵瑰畾浣嶇浉浼硷紝top锛宭eft锛宺ight锛宐ottom 璁惧畾鏄牴鎹笂绾х洅瀛愬楂樻潵璁＄畻
+ top: '20%',
+ left: '6%',
+ right: '6%',
+ bottom: '12%'
},
legend: {
data: this.legendList
@@ -610,6 +614,30 @@
}
</script>
-<style scoped lang="less">
-
+<style lang="less">
+#wasteWaterRealChartBox .echarts-form .el-input__inner {
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+ border-color: #336fa4;
+}
+#wasteWaterRealChartBox .echarts-form{
+ margin-top: 1px
+}
+#wasteWaterRealChartBox .echarts-form .el-input__icon{
+ height: .13rem;
+ top: -.02rem;
+ right: -0.03rem;
+ position: absolute;
+ color: #00d0f9;
+}
+#wasteWaterRealChartBox .echarts-form .selectBox .el-input__icon:last-child{
+ top: .02rem;
+}
+#wasteWaterRealChartBox .echarts-form .selectBox .is-reverse{
+ top: -.02rem !important;
+}
+#wasteWaterRealChartBox .echarts-form .el-button{
+ background-color: rgba(0, 0, 0, 0);
+ height: .13rem;
+}
</style>
--
Gitblit v1.8.0