From 4df0471b7dff0494625ff09969b1a13b5359a26e Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期一, 31 五月 2021 22:41:47 +0800
Subject: [PATCH] 统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。
---
src/components/table/components/CorporateEmergency.vue | 65 ++++++
src/store/index.js | 1
src/components/table/components/IndexStatistics.vue | 6
src/components/LayerController/logic/Company.js | 2
src/components/table/components/EnvironmentalRisk.vue | 60 +++++-
src/components/table/components/Pipeline.vue | 62 ++++++
src/components/table/components/componented/SecondaryTablePollutionSource.vue | 61 ++++++
src/components/table/components/PollutionSource.vue | 77 +++++++-
src/components/table/components/WasteSolid.vue | 48 ++++-
src/components/table/summarySheets.vue | 10
src/components/table/components/SoilGroundwater.vue | 2
src/components/table/components/tabHandover.vue | 24 ++
src/components/table/components/WasteWater.vue | 64 ++++--
src/components/table/components/WasteGas.vue | 48 ++++
public/assets/corporateEmergency.json | 2
15 files changed, 447 insertions(+), 85 deletions(-)
diff --git a/public/assets/corporateEmergency.json b/public/assets/corporateEmergency.json
index 1067828..5b0f3bf 100644
--- a/public/assets/corporateEmergency.json
+++ b/public/assets/corporateEmergency.json
@@ -1,6 +1,6 @@
[
{
- "UserName": "闆嗗洟鍚嶇О",
+ "UserName": "闆嗗洟鍏徃",
"WasteWaters": "",
"AddOutPut": "",
"MonthOutPut": "",
diff --git a/src/components/LayerController/logic/Company.js b/src/components/LayerController/logic/Company.js
index d6b7ea2..f970f34 100644
--- a/src/components/LayerController/logic/Company.js
+++ b/src/components/LayerController/logic/Company.js
@@ -8,6 +8,7 @@
const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default
+const $store = require('../../../store/index').default
module.exports = function () {
/**
@@ -22,6 +23,7 @@
const res = await mapApi.getCompany()
// console.log(res)
const data = res.Result.DataInfo || {}
+ $store.state.companyPoints = data
for (let i = 0; i < data.length; i++) {
// console.log(data[i])
// 缁忕含搴� 浣嶇疆
diff --git a/src/components/table/components/CorporateEmergency.vue b/src/components/table/components/CorporateEmergency.vue
index 0609e51..d74dce8 100644
--- a/src/components/table/components/CorporateEmergency.vue
+++ b/src/components/table/components/CorporateEmergency.vue
@@ -1,14 +1,19 @@
<template>
<div class="Pipeline">
- <el-table class="tableBox" :data="tableData" border>
+ <el-table class="tableBox" :data="tableData" :cell-style="rowClass" border>
<el-table-column width="30px" label="">
- <template>
- <i class="el-icon-caret-right"></i>
- <span style="margin-left: 10px"></span>
+ <template slot-scope="{row,$index}">
+ <el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" :class="{active: isActive === $index}" slot="reference"></i>
+ </el-popover>
</template>
</el-table-column>
<el-table-column label="搴忓彿" width="60px" type="index"></el-table-column>
- <el-table-column prop="UserName" label="浼佷笟鍚嶇О"></el-table-column>
+ <el-table-column prop="UserName" label="浼佷笟鍚嶇О">
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
+ </template>
+ </el-table-column>
<el-table-column prop="WasteWaters" label="搴旀�ラ妗堟暟閲忥紙涓級"></el-table-column>
<el-table-column prop="AddOutPut" label="搴旀�ラ妗堝妗堝彿"></el-table-column>
<el-table-column prop="MonthOutPut" label="搴旀�ョ墿璧勫瓨鏀剧偣"></el-table-column>
@@ -23,17 +28,61 @@
import mapApi from '@/api/mapApi'
export default {
name: 'CorporateEmergency',
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
+ },
data () {
return {
- tableData: null
+ tableData: null,
+ isActive: '',
+ isShowIcon: false
}
},
async mounted () {
this.tableData = await mapApi.getCorporateEmergencyStatistics()
+ },
+ methods: {
+ tableHeaderColor ({ row, column, owIndex, columnIndex }) {
+ // return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
+ },
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'height:.3rem'
+ },
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
+ }
+ }
}
}
</script>
-<style scoped>
-
+<style scoped lang="less">
+.Pipeline{
+ .el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+ }
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/EnvironmentalRisk.vue b/src/components/table/components/EnvironmentalRisk.vue
index d67c894..59d9ba4 100644
--- a/src/components/table/components/EnvironmentalRisk.vue
+++ b/src/components/table/components/EnvironmentalRisk.vue
@@ -1,14 +1,19 @@
<template>
- <div class="PollutionSource">
+ <div class="waste-risk">
<el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
<el-table-column width="30px" label="">
- <template>
- <i class="el-icon-caret-right"></i>
- <span style="margin-left: 10px"></span>
+ <template slot-scope="{row,$index}">
+ <el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" :class="{active: isActive === $index}" slot="reference"></i>
+ </el-popover>
</template>
</el-table-column>
<el-table-column label="搴忓彿" width="60px" type="index"></el-table-column>
- <el-table-column prop="UserName" label="浼佷笟鍚嶇О"></el-table-column>
+ <el-table-column prop="UserName" label="浼佷笟鍚嶇О">
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
+ </template>
+ </el-table-column>
<el-table-column prop="ProductionFacilities" label="涓�绾ч闄╂簮锛堜釜锛�"></el-table-column>
<el-table-column prop="GovernanceFacilities" label="浜岀骇椋庨櫓婧愶紙涓級"></el-table-column>
<el-table-column prop="GovernanceFacilities" label="涓夌骇椋庨櫓婧愶紙涓級"></el-table-column>
@@ -20,10 +25,17 @@
<script>
import mapApi from '@/api/mapApi'
export default {
- name: 'AirQuality',
+ name: 'EnvironmentalRisk',
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
+ },
data () {
return {
- tableData: null
+ tableData: null,
+ isActive: '',
+ isShowIcon: false
}
},
async mounted () {
@@ -35,12 +47,40 @@
},
// 琛ㄥご鏍峰紡璁剧疆
rowClass () {
- // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ return 'height:.3rem'
+ },
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
+ }
}
}
}
</script>
-<style scoped>
-
+<style scoped lang="less">
+.waste-risk{
+.el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+}
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/IndexStatistics.vue b/src/components/table/components/IndexStatistics.vue
index f5d31f0..9dbcd45 100644
--- a/src/components/table/components/IndexStatistics.vue
+++ b/src/components/table/components/IndexStatistics.vue
@@ -1,7 +1,7 @@
<template>
<div>
<el-tabs v-model="activeName">
- <el-tab-pane label="鎸囨爣缁熻" name="first">
+ <el-tab-pane label="鎸囨爣缁熻" name="first" :cell-style="rowClass">
<el-table :data="tableData" :lock-scroll="true" class="scroll">
<el-table-column type="index" label="搴忓彿"></el-table-column>
<el-table-column prop="date" label="鍗曚綅鍚嶇О"></el-table-column>
@@ -82,6 +82,10 @@
methods: {
refsDatatitle (item) {
this.titleProp = item
+ },
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'height:.3rem'
}
}
}
diff --git a/src/components/table/components/Pipeline.vue b/src/components/table/components/Pipeline.vue
index 619ff80..9662ded 100644
--- a/src/components/table/components/Pipeline.vue
+++ b/src/components/table/components/Pipeline.vue
@@ -1,14 +1,19 @@
<template>
<div class="Pipeline">
- <el-table class="tableBox" :data="tableData" border>
+ <el-table class="tableBox" :data="tableData" border :cell-style="rowClass">
<el-table-column width="30px" label="">
- <template>
- <i class="el-icon-caret-right"></i>
- <span style="margin-left: 10px"></span>
+ <template slot-scope="{row,$index}">
+ <el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" :class="{active: isActive === $index}" slot="reference"></i>
+ </el-popover>
</template>
</el-table-column>
<el-table-column label="搴忓彿" width="60px" type="index"></el-table-column>
- <el-table-column prop="date" label="浼佷笟鍚嶇О"></el-table-column>
+ <el-table-column prop="date" label="浼佷笟鍚嶇О">
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.date}}</u>
+ </template>
+ </el-table-column>
<el-table-column prop="name" label="绠＄嚎鎬婚暱搴︼紙km锛�"></el-table-column>
<el-table-column prop="province" label="鍛ㄨ竟鐜 "></el-table-column>
<el-table-column prop="city" label="鎷︽埅璁炬柦"></el-table-column>
@@ -21,17 +26,58 @@
import mapApi from '@/api/mapApi'
export default {
name: 'Pipeline',
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
+ },
data () {
return {
- tableData: null
+ tableData: null,
+ isActive: '',
+ isShowIcon: false
}
},
async mounted () {
this.tableData = await mapApi.getPipelineStatistics()
+ },
+ methods: {
+ // 琛ㄥご鏍峰紡璁剧疆
+ rowClass () {
+ return 'height:.3rem'
+ },
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
+ }
+ }
}
}
</script>
-<style scoped>
-
+<style scoped lang="less">
+.Pipeline{
+ .el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+ }
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/PollutionSource.vue b/src/components/table/components/PollutionSource.vue
index 474e1dc..2dd0df7 100644
--- a/src/components/table/components/PollutionSource.vue
+++ b/src/components/table/components/PollutionSource.vue
@@ -1,26 +1,51 @@
<template>
<div class="PollutionSource">
- <el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
+ <el-table class="tableBox" v-loading :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
<el-table-column width="30px" label="">
- <template>
- <i class="el-icon-caret-right"></i>
- <span style="margin-left: 10px"></span>
+ <template slot-scope="{row,$index}">
+ <el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
+ <SecondaryTablePollutionSource v-show="$index ===1"></SecondaryTablePollutionSource>
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" slot="reference"></i>
+ </el-popover>
</template>
</el-table-column>
<el-table-column label="搴忓彿" width="60px" type="index"></el-table-column>
- <el-table-column prop="UserName" label="浼佷笟鍚嶇О"></el-table-column>
- <el-table-column prop="ProductionFacilities" label="鐢熶骇璁炬柦"></el-table-column>
- <el-table-column prop="GovernanceFacilities" label="娌荤悊璁炬柦"></el-table-column>
+ <el-table-column prop="UserName" label="浼佷笟鍚嶇О">
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
+ </template>
+ </el-table-column>
+ <el-table-column prop="ProductionFacilities" label="鐢熶骇瑁呯疆锛堜釜锛�">
+ <template slot-scope="{row}">
+ <el-popover placement="bottom-end" trigger="click" title="澶╂触鐭冲寲鐩戞祴鐐圭己澶辨姤璀︽槑缁�" popper-class="popovers">
+ <u slot="reference" style="color: #00ffff">{{row.ProductionFacilities}}</u>
+ </el-popover>
+ </template>
+ </el-table-column>
+ <el-table-column prop="GovernanceFacilities" label="娌荤悊璁炬柦锛堜釜锛�"></el-table-column>
</el-table>
</div>
</template>
<script>
import mapApi from '@/api/mapApi'
+
+import SecondaryTablePollutionSource from './componented/SecondaryTablePollutionSource'
+
export default {
- name: 'AirQuality',
+ name: 'PollutionSource',
+ components: {
+ SecondaryTablePollutionSource
+ },
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
+ },
data () {
return {
+ isActive: '',
+ isShowIcon: false,
tableData: null
}
},
@@ -32,13 +57,41 @@
// return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
},
// 琛ㄥご鏍峰紡璁剧疆
- rowClass () {
- // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ rowClass (row, column) {
+ return 'height:.3rem'
+ },
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
+ }
}
}
}
</script>
-<style scoped>
-
+<style scoped lang="less">
+.PollutionSource{
+ .el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+ }
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/SoilGroundwater.vue b/src/components/table/components/SoilGroundwater.vue
index 6c3538b..f7b8173 100644
--- a/src/components/table/components/SoilGroundwater.vue
+++ b/src/components/table/components/SoilGroundwater.vue
@@ -126,7 +126,7 @@
},
// 琛ㄥご鏍峰紡璁剧疆
rowClass () {
- // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ return 'height:.3rem'
},
// 鑾峰彇鐐瑰嚮鐨勮〃鏍�
handle (row, column, event, cell) {
diff --git a/src/components/table/components/WasteGas.vue b/src/components/table/components/WasteGas.vue
index 86a5779..e8400ea 100644
--- a/src/components/table/components/WasteGas.vue
+++ b/src/components/table/components/WasteGas.vue
@@ -6,18 +6,16 @@
<!-- <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
<el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
<ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
- <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" slot="reference"></i>
<!-- <i class="el-icon-caret-bottom" slot="reference" v-else @click="doIcon($index)"></i>-->
</el-popover>
</template>
</el-table-column>
<el-table-column label="搴忓彿" width="45px" type="index"></el-table-column>
<el-table-column prop="UserName" label="浼佷笟鍚嶇О">
- <template slot-scope="scope">
- <div v-if="scope.row.UserName==='闆嗗洟鍚嶇О'" style="color: #00ffff">{{scope.row.UserName}}</div>
- <div v-else-if="scope.row.UserName==='澶╂触鐭冲寲'" style="color: #00ffff">{{scope.row.UserName}}</div>
- <div v-else >{{scope.row.UserName}}</div>
- </template>
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
+ </template>
</el-table-column>
<el-table-column prop="WasteWaters" label="宸ヤ笟澶栨帓搴熸按閲忥紙m鲁锛�" width="100px"></el-table-column>
<el-table-column label="浜屾哀鍖栫～ (浜х敓閲�/t)">
@@ -71,6 +69,11 @@
Refinery,
ChemicalWastewater
},
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
+ },
data () {
return {
isActive: '',
@@ -99,7 +102,7 @@
},
// 琛ㄥご鏍峰紡璁剧疆
rowClass () {
- // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ return 'height:.3rem'
},
// 鑾峰彇鐐瑰嚮鐨勮〃鏍�
handle (row, column, event, cell) {
@@ -117,14 +120,43 @@
return
}
this.isActive = index
+ },
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
+ }
}
}
}
</script>
-<style scoped>
+<style scoped lang="less">
.active {
/*color: red;*/
transform:rotate(90deg);
}
+.Waste-water{
+.el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+}
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/WasteSolid.vue b/src/components/table/components/WasteSolid.vue
index 4b24e07..4c46ab8 100644
--- a/src/components/table/components/WasteSolid.vue
+++ b/src/components/table/components/WasteSolid.vue
@@ -1,5 +1,5 @@
<template>
- <div class="waste-water">
+ <div class="waste-solid">
<el-table
class="tableBox"
:data="tableData"
@@ -20,8 +20,7 @@
:disabled="!isShowIcon"
popper-class="popovers">
<ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
- <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference"
- @click="doIcon($index)"></i>
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" slot="reference"></i>
<!-- <i class="el-icon-caret-bottom" slot="reference" v-else @click="doIcon($index)"></i>-->
</el-popover>
</template>
@@ -29,10 +28,8 @@
<el-table-column label="搴忓彿" width="45px" type="index">
</el-table-column>
<el-table-column prop="UserName" label="浼佷笟鍚嶇О" width="120px">
- <template slot-scope="scope">
- <div v-if="scope.row.UserName==='闆嗗洟鍚嶇О'" style="color: #00ffff">{{ scope.row.UserName }}</div>
- <div v-else-if="scope.row.UserName==='澶╂触鐭冲寲'" style="color: #00ffff">{{ scope.row.UserName }}</div>
- <div v-else>{{ scope.row.UserName }}</div>
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
</template>
</el-table-column>
<el-table-column prop="WasteWaters" width="100px">
@@ -93,6 +90,11 @@
MissingAlarm,
Refinery,
ChemicalWastewater
+ },
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
},
data () {
return {
@@ -160,7 +162,7 @@
},
// 琛ㄥご鏍峰紡璁剧疆
rowClass () {
- // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ return 'height:.3rem'
},
// 鑾峰彇鐐瑰嚮鐨勮〃鏍�
handle (row, column, event, cell) {
@@ -178,6 +180,19 @@
return
}
this.isActive = index
+ },
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
+ }
}
}
}
@@ -197,5 +212,20 @@
/*color: red;*/
transform: rotate(90deg);
}
-
+.waste-solid{
+ .el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+ }
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/WasteWater.vue b/src/components/table/components/WasteWater.vue
index 6540b1a..2f894bc 100644
--- a/src/components/table/components/WasteWater.vue
+++ b/src/components/table/components/WasteWater.vue
@@ -1,22 +1,20 @@
<template>
<div class="waste-water">
- <el-table class="tableBox" :data="tableData" style="width: 100%" @cell-click="handle">
+ <el-table class="tableBox" :data="tableData" style="width: 100%" :cell-style="rowClass" @cell-click="handle">
<el-table-column width="30px" label="">
<template slot-scope="{row,$index}">
<!-- <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
<el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
- <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
- <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
+ <ChemicalWastewater v-show="$index ===2"></ChemicalWastewater>
+ <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" slot="reference"></i>
<!-- <i class="el-icon-caret-bottom" slot="reference" v-else @click="doIcon($index)"></i>-->
</el-popover>
</template>
</el-table-column>
<el-table-column label="搴忓彿" width="45px" type="index"></el-table-column>
<el-table-column prop="UserName" label="浼佷笟鍚嶇О" >
- <template slot-scope="scope">
- <div v-if="scope.row.UserName==='闆嗗洟鍚嶇О'" style="color: #00ffff">{{scope.row.UserName}}</div>
- <div v-else-if="scope.row.UserName==='澶╂触鐭冲寲'" style="color: #00ffff">{{scope.row.UserName}}</div>
- <div v-else >{{scope.row.UserName}}</div>
+ <template slot-scope="{row}">
+ <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
</template>
</el-table-column>
<el-table-column prop="WasteWaters" width="80">
@@ -85,6 +83,11 @@
tableData: null
}
},
+ props: {
+ searchNameToPosition: {
+ type: Function
+ }
+ },
async mounted () {
this.tableData = await mapApi.getWasteWaterStatistics()
},
@@ -94,29 +97,48 @@
},
// 琛ㄥご鏍峰紡璁剧疆
rowClass () {
- // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
+ return 'height:.3rem'
},
// 鑾峰彇鐐瑰嚮鐨勮〃鏍�
handle (row, column, event, cell) {
console.log(row.UserName)
},
- doIcon (index) {
- if (index !== 1) {
- this.isShowIcon = false
- this.isActive = ''
- return
+ showBottomTable (e) {
+ if (e.path[0].classList.contains('go') === true) {
+ e.path[0].classList.remove('go')
+ e.path[0].classList.add('aa')
+ } else {
+ const newList = document.querySelectorAll('i.showBottomTableBtn')
+ for (let i = 0; i < newList.length; i++) {
+ newList[i].classList.remove('go')
+ }
+ e.path[0].classList.remove('aa')
+ e.path[0].classList.add('go')
}
- this.isShowIcon = !this.isShowIcon
- if (index === this.isActive) {
- this.isActive = ''
- return
- }
- this.isActive = index
}
}
}
</script>
-<style>
-
+<style scoped lang="less">
+/deep/ .el-tabs__item:focus.is-active.is-focus:not(:active) {
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+.waste-water{
+.el-icon-caret-right{
+ position: absolute;
+ top: .11rem;
+ left: .04rem;
+ font-size: .14rem;
+ cursor: pointer;
+}
+}
+.aa{
+ transition: all .2s;
+}
+.go{
+ transform:rotate(90deg);
+ transition: all .2s;
+}
</style>
diff --git a/src/components/table/components/componented/SecondaryTablePollutionSource.vue b/src/components/table/components/componented/SecondaryTablePollutionSource.vue
new file mode 100644
index 0000000..1378eaf
--- /dev/null
+++ b/src/components/table/components/componented/SecondaryTablePollutionSource.vue
@@ -0,0 +1,61 @@
+<template>
+ <div class="Chemical-Waste-water" id="Chemical-Waste-water">
+ <!-- <el-row type="flex" class="head-area" align="middle">
+ <el-col>
+ <span>鐩戞祴鐐规帓鏀炬槑缁�</span>
+ </el-col>
+ </el-row> -->
+ <div class="panel-title">鐩戞祴鐐规帓鏀炬槑缁�</div>
+ <el-table class="tableBox" :data="tableData">
+ <el-table-column label="搴忓彿" width="60px" type="index"></el-table-column>
+ <el-table-column prop="UserName" label="浼佷笟鍚嶇О" width="120"></el-table-column>
+ <el-table-column prop="WasteWaters" width="100">
+ <div slot="header">
+ <span>宸ヤ笟澶栨帓搴熸按閲�</span>
+ <div>锛坢鲁锛�</div>
+ </div>
+ </el-table-column>
+ <el-table-column label="浜х敓閲� 锛堝惃锛�">
+ <el-table-column prop="AddOutPut" label="涓�鑸浐搴�" width="65"></el-table-column>
+ <el-table-column prop="MonthOutPut" label="鍗遍櫓搴熺墿" width="65"></el-table-column>
+ </el-table-column>
+ <el-table-column label="璐瓨鐘舵�侊紙涓級">
+ <el-table-column prop="normal" label="姝ｅ父" width="60"></el-table-column>
+ <el-table-column prop="warning" label="棰勮" width="60"></el-table-column>
+ </el-table-column>
+ <el-table-column label="璐瓨鐘舵�侊紙涓級">
+ <el-table-column prop="normal" label="姝ｅ父" width="60"></el-table-column>
+ <el-table-column prop="warning" label="棰勮" width="60"></el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'ChemicalWastewater',
+ data: function () {
+ return {
+ tableData: [{
+ UserName: '#鐏偓鎺掓斁鍙�',
+ WasteWaters: '1',
+ AddOutPut: '',
+ MonthOutPut: '',
+ normal: '',
+ warning: ''
+ }]
+ }
+ },
+ methods: {
+ // closeBtns () {
+ // this.$emit('isShow')
+ // }
+ }
+}
+</script>
+<style lang="less">
+.Chemical-Waste-water {
+ text-align: center;background:@background-color;
+ color: #fff;
+}
+</style>
diff --git a/src/components/table/components/tabHandover.vue b/src/components/table/components/tabHandover.vue
index c3e087a..bc7816c 100644
--- a/src/components/table/components/tabHandover.vue
+++ b/src/components/table/components/tabHandover.vue
@@ -1,10 +1,10 @@
<template>
- <div>
+ <div class="tabHandover">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane>
</el-tabs>
<div>
- <component :is="gcComp"></component>
+ <component :is="gcComp" :searchNameToPosition="searchNameToPosition"></component>
</div>
</div>
</template>
@@ -71,11 +71,27 @@
this.gcComp = CorporateEmergency
break
}
+ },
+ searchNameToPosition (e) {
+ if (e.target.innerHTML === '闆嗗洟鍏徃') {
+ return window.map.setView({ lat: 34.828558921813965, lng: 117.41676807403564 }, 5)
+ }
+ if (this.$store.state.companyPoints.filter(obj => obj.name === e.target.innerHTML).length > 0) {
+ const newList = this.$store.state.companyPoints.filter(obj => obj.name === e.target.innerHTML)[0]
+ window.map.setView({ lat: newList.Latitude, lng: newList.Longitude }, 15)
+ } else {
+ this.$message({
+ message: '娌℃湁鏌ヨ鍒拌浼佷笟锛�',
+ type: 'warning'
+ })
+ }
}
}
}
</script>
-<style scoped>
-
+<style>
+.tabHandover .el-tabs__item{
+ font-size: .1rem;
+}
</style>
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
index f8a9396..914a8ee 100644
--- a/src/components/table/summarySheets.vue
+++ b/src/components/table/summarySheets.vue
@@ -131,7 +131,13 @@
/*width: 850px;*/
/*height: 265px;*/
z-index: 500;
-
+ .el-dialog__header {
+ padding: 10px 20px 10px !important;
+ .el-dialog__headerbtn{
+ top: 16px;
+ right: 16px;
+ }
+ }
.subtopic {
display: inline-flex;
@@ -173,7 +179,7 @@
}
.el-dialog.el-dialog--center {
- left: 0.5rem;
+ left: 0.45rem;
top: 0.73979rem;
}
diff --git a/src/store/index.js b/src/store/index.js
index 2d18c38..62f471e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,7 @@
export default new Vuex.Store({
state: {
+ companyPoints: [] // 浼佷笟鐐�
},
mutations: {
},
--
Gitblit v1.8.0