From d4a64e11c43a8268d48fbb6d710d3ba379a31359 Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期日, 30 五月 2021 12:26:30 +0800
Subject: [PATCH] css弹框UI优化
---
src/components/base-page/WasteWater/WasteWaterIndex.vue | 20 ++++-----
src/views/popup/DynamicHeader/TableColumn.vue | 24 ++++++++++++
src/components/base-page/WasteWater/WasteWaterDayChart.vue | 1
src/views/popup/DynamicHeader/DynamicTable.vue | 43 +++++++++++++++++++++
src/components/base-page/WasteWater/WasteWaterHoursChart.vue | 1
5 files changed, 76 insertions(+), 13 deletions(-)
diff --git a/src/components/base-page/WasteWater/WasteWaterDayChart.vue b/src/components/base-page/WasteWater/WasteWaterDayChart.vue
index 5be6461..8f0bce3 100644
--- a/src/components/base-page/WasteWater/WasteWaterDayChart.vue
+++ b/src/components/base-page/WasteWater/WasteWaterDayChart.vue
@@ -364,7 +364,6 @@
effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
this.chart = this.$echarts.init(this.$refs.echartsDay)
this.chart.clear()
- // console.log(this.chart)
this.chart.clear()
let dataUnit = ''
if (datatype === 1) {
diff --git a/src/components/base-page/WasteWater/WasteWaterHoursChart.vue b/src/components/base-page/WasteWater/WasteWaterHoursChart.vue
index 1fb3164..6cdefb1 100644
--- a/src/components/base-page/WasteWater/WasteWaterHoursChart.vue
+++ b/src/components/base-page/WasteWater/WasteWaterHoursChart.vue
@@ -182,7 +182,6 @@
if (result.length > 0) {
this.dataStandard = []
this.tableData = this.analysisResult(result) // 灏忔椂鏄庣粏琛ㄨВ鏋愮粨鏋�
- console.log(this.tableData)
const d = result
const nameList = [] // 瀛樻斁鍥句緥
const dateList = [] // 瀛樻斁鏃堕棿
diff --git a/src/components/base-page/WasteWater/WasteWaterIndex.vue b/src/components/base-page/WasteWater/WasteWaterIndex.vue
index 2d775ab..d5c3167 100644
--- a/src/components/base-page/WasteWater/WasteWaterIndex.vue
+++ b/src/components/base-page/WasteWater/WasteWaterIndex.vue
@@ -84,26 +84,26 @@
display: flex;
align-items: center;
justify-content: space-between;
- padding: 5px 0;
+ padding-left: 0.07rem;
border-bottom: 1px #243a55 solid;
-
.navigation-left {
display: flex;
align-items: center;
.uncheck {
- margin: 0 10px;
cursor: pointer;
- padding: 5px;
+ margin-left: -0.05rem;
+ width: .8rem;
+ padding: 6px 0;
/*border: 1px solid #2b87c8;*/
/*border-radius: 4px;*/
+ background-position: 0 0;
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ background-image: url("../../../../public/assets/images/map-pages/title_bg.png");
text-align: center;
vertical-align: middle !important;
color: #fff;
- -webkit-transform: skew(30deg);
- -moz-transform: skew(30deg);
- -o-transform: skew(30deg);
- transform: skew(15deg);
}
.default-uncheck {
@@ -113,14 +113,13 @@
}
.hover {
- background-color: #0e539e;
+ background-image: url("../../../../public/assets/images/map-pages/title_bg2.png");
color: #ffffff;
cursor: pointer;
}
.hover:hover {
cursor: pointer;
- padding: 5px;
border-radius: 4px;
text-align: center;
color: #F0FFFF;
@@ -128,7 +127,6 @@
}
.navigation-left :hover {
- background-color: #0e639e;
color: #fff;
cursor: pointer;
}
diff --git a/src/views/popup/DynamicHeader/DynamicTable.vue b/src/views/popup/DynamicHeader/DynamicTable.vue
new file mode 100644
index 0000000..a115ba1
--- /dev/null
+++ b/src/views/popup/DynamicHeader/DynamicTable.vue
@@ -0,0 +1,43 @@
+<template>
+ <el-table :data="tableData" border :height="height">
+ <template v-for="item in tableHeader">
+ <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></table-column>
+ <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center"></el-table-column>
+ </template>
+ </el-table>
+</template>
+
+<script>
+import TableColumn from './TableColumn'
+export default {
+ props: {
+ // 琛ㄦ牸鐨勬暟鎹�
+ tableData: {
+ type: Array,
+ required: true
+ },
+ // 澶氱骇琛ㄥご鐨勬暟鎹�
+ tableHeader: {
+ type: Array,
+ required: true
+ },
+ // 琛ㄦ牸鐨勯珮搴�
+ height: {
+ type: String,
+ default: '340'
+ }
+ },
+ components: {
+ TableColumn
+ },
+ watch: {
+ tableData (val, oldVal) {
+ this.tableData = val
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/popup/DynamicHeader/TableColumn.vue b/src/views/popup/DynamicHeader/TableColumn.vue
new file mode 100644
index 0000000..be2ea78
--- /dev/null
+++ b/src/views/popup/DynamicHeader/TableColumn.vue
@@ -0,0 +1,24 @@
+<template>
+ <el-table-column :label="coloumnHeader.label" :prop="coloumnHeader.label" align="center">
+ <template v-for="item in coloumnHeader.children">
+ <tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item"></tableColumn>
+ <el-table-column v-else :key="item.name" :label="item.label" :prop="item.prop" align="center"></el-table-column>
+ </template>
+ </el-table-column>
+</template>
+
+<script>
+export default {
+ name: 'tableColumn',
+ props: {
+ coloumnHeader: {
+ type: Object,
+ required: true
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
--
Gitblit v1.8.0