From 6215e0df70faa440aa8d4c21fd6d6515a05518c5 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 13 四月 2021 15:43:09 +0800
Subject: [PATCH] 右侧管线/分析/修改
---
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue | 67 +++++++---
src/assets/css/map/map-panel-style.less | 13 ++
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue | 81 ++++++------
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue | 75 ++++++------
src/components/panel/topicSearch/SewersSearch.vue | 1
src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue | 120 ++++++++++----------
6 files changed, 195 insertions(+), 162 deletions(-)
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index 8be47de..12ca059 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/src/assets/css/map/map-panel-style.less
@@ -556,7 +556,7 @@
}
}
-/***********************************************鍙充晶瀹樼綉鐩稿叧************/
+/***********************************************鍙充晶绠＄嚎鐩稿叧************/
.el-tabs__header {
background: none;
}
@@ -586,3 +586,14 @@
background: none;
border: none;
}
+.el-card {
+ margin-top: 15px;
+ background: rgba(0, 16, 30, 0.5);
+ border: 0.00521rem solid @color;
+ box-shadow: 0 0 0.03rem @color;
+}
+.clearfix {
+ display: inline-block;
+ color: #ffffff;
+ margin: 15px 0;
+}
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index 5d18286..4e7cb11 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/src/components/panel/topicSearch/SewersSearch.vue
@@ -74,6 +74,7 @@
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
+// 寮曞叆鍒嗘瀽缁勪欢鍐呭
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
export default {
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
index 325eb98..2b45355 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
@@ -6,46 +6,65 @@
<el-button type="primary" size="mini">杩為�氭�у垎鏋�</el-button>
<el-button type="primary" size="mini">娓呴櫎</el-button>
</el-row>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
+ <el-card class="box-card">
+ <span class="clearfix">璧峰绠℃</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ <span class="clearfix">缁撴潫绠℃</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ <span class="clearfix">鍒嗘瀽缁撴灉</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ </el-card>
</div>
</template>
@@ -54,30 +73,11 @@
name: 'Connectivity',
data () {
return {
- tableData: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }]
+ tableData: []
}
}
}
</script>
<style lang="less" scoped>
-/deep/ .el-table {
- margin-top: 15px;
-}
</style>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
index b417149..c6c5206 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue
@@ -5,26 +5,31 @@
<el-button type="primary" size="mini">鎴柇闈㈠垎鏋�</el-button>
<el-button type="primary" size="mini">娓呴櫎</el-button>
</el-row>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
+ <el-card class="box-card">
+ <span class="clearfix">绠＄嚎鏌ヨ缁撴灉</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ <span class="clearfix">鏂潰鍥�</span>
+ <div class="cross-section">
+ <span>鏆傛棤鏁版嵁</span>
+ </div>
+ </el-card>
</div>
</template>
@@ -33,30 +38,22 @@
name: 'CrossSectional',
data () {
return {
- tableData: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }]
+ tableData: []
}
}
}
</script>
<style lang="less" scoped>
-/deep/ .el-table {
- margin-top: 15px;
+.cross-section {
+ background: rgba(0, 16, 30, 0.5);
+ border: 0.00521rem solid @color;
+ box-shadow: 0 0 0.03rem @color;
+ color: #ffffff;
+ width: 100%;
+ height: 50px;
+ border-radius: 3px;
+ text-align: center;
+ line-height: 50px;
}
</style>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue
index 1b10461..2cfbacd 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue
@@ -3,26 +3,45 @@
<el-row>
<el-button type="primary" size="mini">閫夋嫨绠℃</el-button>
</el-row>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
+ <el-card class="box-card">
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ <span class="clearfix">鍒嗘瀽缁撴灉</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ </el-card>
</div>
</template>
@@ -31,30 +50,12 @@
name: 'Flow',
data () {
return {
- tableData: [{
- date: '2016-05-02',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�'
- }, {
- date: '2016-05-04',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�'
- }, {
- date: '2016-05-01',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�'
- }, {
- date: '2016-05-03',
- name: '鐜嬪皬铏�',
- address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�'
- }]
+ tableData: []
}
}
}
</script>
<style lang="less" scoped>
-/deep/ .el-table {
- margin-top: 15px;
-}
+
</style>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
index 650dcdd..20f108c 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
@@ -1,29 +1,50 @@
<template>
<div class="connectivity">
<el-row>
+ <span class="tube-span">鐖嗙(鐩稿叧寮�鍏�)</span>
<el-button type="primary" size="mini">閫夋嫨绠＄嚎</el-button>
<el-button type="primary" size="mini">娓呴櫎</el-button>
</el-row>
- <el-table
- :data="tableData"
- height="250"
- border
- style="width: 100%">
- <el-table-column
- prop="date"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="name"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- prop="address"
- label="鎿嶄綔">
- </el-table-column>
- </el-table>
+ <el-card class="box-card">
+ <span class="clearfix">鍙戠敓鐖嗚鐨勭娈�</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ <span class="clearfix">闇�瑕佸叧闂殑闃�闂�</span>
+ <el-table
+ :data="tableData"
+ style="width: 100%">
+ <el-table-column
+ prop="date"
+ label="绠＄嚎鍚嶇О"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ label="绠＄嚎绫诲瀷"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="address"
+ label="鎿嶄綔">
+ </el-table-column>
+ </el-table>
+ </el-card>
</div>
</template>
@@ -39,7 +60,9 @@
</script>
<style lang="less" scoped>
-/deep/ .el-table {
- margin-top: 15px;
+.tube-span {
+ color: #ffffff !important;
+ font-size: 14px;
+ margin: 0 15px;
}
</style>
--
Gitblit v1.8.0