From 0eb2de2d7631496fb6d9db215852c43b49793f6a Mon Sep 17 00:00:00 2001
From: wangqi <magical1908@outlook.com>
Date: 星期一, 12 四月 2021 15:08:45 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 98 +---
src/assets/css/map/map-panel-style.less | 59 +++
src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue | 194 +++++-----
src/components/panel/ToolBoxPanel.vue | 20 +
src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue | 355 +++++++++++---------
src/components/LayerController/LayerController.vue | 15
src/components/BaseNav/PublicBounced/PublicBounced.vue | 28
src/eventBus.js | 2
src/utils/dragBoxes.js | 39 ++
src/components/table/summarySheets.vue | 13
src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue | 78 ++--
src/components/BaseNav/SolidWaste/directive/dir.js | 37 -
src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue | 82 +---
13 files changed, 559 insertions(+), 461 deletions(-)
diff --git a/src/assets/css/map/map-panel-style.less b/src/assets/css/map/map-panel-style.less
index 5c5a3a9..fcf9008 100644
--- a/src/assets/css/map/map-panel-style.less
+++ b/src/assets/css/map/map-panel-style.less
@@ -239,6 +239,7 @@
.el-button{
}
+.hover-bottom:hover,
.active-button{
border: 0.00521rem solid #fff700 !important;
box-shadow: 0 0 0.03rem #fff700 !important;
@@ -440,3 +441,61 @@
}
+.el-picker-panel{
+ background: @background-color;
+ border-color:@color;
+ color:@color;
+ .el-picker-panel__body-wrapper{
+ background: @background-color;
+ }
+ .el-input__inner{
+ background:@background-color;
+ border-color:@color;
+ }
+ .el-date-table td.today span{
+ color:@color-highlight;
+ }
+ .el-picker-panel__footer{
+ background: @background-color;
+ border-top-color:@color;
+ }
+ .el-date-table th{
+ border-bottom-color:@color;
+ }
+ .el-button{
+ background: @background-color;
+ color:@color;
+ border-color:@color;
+ }
+ .el-button--text{
+ padding: 7px 15px;
+ }
+ .el-button:hover{
+ background: @background-color;
+ color:@color-highlight;
+ border-color:@color-highlight;
+ }
+ .el-input__inner{
+ color:#fff;
+ text-align: center;
+ }
+ .el-date-picker__time-header{
+ border-bottom-color:@background-color-split;
+ }
+ .el-date-picker__header-label{color:#fff}
+}
+.el-select-dropdown{
+ background: @background-color;
+ border-color:@color;
+ color:@color;
+ .el-select-dropdown__item{
+ color:#fff;
+ }
+ .el-select-dropdown__item.hover{
+ background: @background-color;
+ box-shadow: 0 0 5px @color-highlight inset;
+ }
+ .el-select-dropdown__item.selected{
+ color:@color-highlight;
+ }
+ }
\ No newline at end of file
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
index 7f68fb3..5033415 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDate.vue
@@ -15,31 +15,25 @@
<div class="pickerData">
<span> 寮�濮嬫椂闂�:</span>
<span class="pickerTable">
- <el-date-picker type="datetime" v-model="value1">
- </el-date-picker>
- </span>
+ <el-date-picker type="datetime" v-model="value1"></el-date-picker>
+ </span>
</div>
<div class="pickerData">
<span >缁撴潫鏃堕棿:</span>
<span class="pickerTable">
- <el-date-picker
- type="datetime"
- v-model="value2"
- >
- </el-date-picker>
- </span>
+ <el-date-picker type="datetime" v-model="value2"></el-date-picker>
+ </span>
</div>
</div>
<div>
閲囨牱鐐规暟:
- <input list="source" id="ipt" class="echatsInput" @change="datalistBtn">
- <datalist id="source" @click="datalistBtn">
- <option value="0" />
- <option value="25" />
- <option value="50" />
- <option value="75" />
- <option value="100" />
- </datalist>
+ <el-select v-model="formInline.region" placeholder="50">
+ <el-option label="0" value="0"></el-option>
+ <el-option label="25" value="25"></el-option>
+ <el-option label="50" value="50"></el-option>
+ <el-option label="75" value="75"></el-option>
+ <el-option label="100" value="100"></el-option>
+ </el-select>
</div>
<div class="detailbtn" @click="onSubmit">鏌ヨ</div>
<div class="detailbtn" @click="dialogVisible = true" >鏄庣粏琛�</div>
@@ -88,7 +82,6 @@
},
methods: {
onSubmit () {
- console.log(this.value1)
console.log('submit!')
},
drawChart: function () {
@@ -309,11 +302,12 @@
// }
//}
.grid-content {
- font-size: 8px !important;
+ font-size: 8px;
background-color: #2e4967;
text-align: center;
- margin: 0 2px 4px 2px;
border-radius: 2px;
+ margin-right: 10px;
+ padding:0 10px
>i{
font-style: normal;
color: #eef309;
@@ -322,8 +316,8 @@
.animation {
//width: 600px;
//height: 0.06rem;
- .Infomation {
- margin-left: 10px;
+ .infomation {
+ padding: 5px 10px;
}
}
.form-echrts {
@@ -343,18 +337,8 @@
flex: 1;
display: flex;
>span{line-height: 22px}
- .pickerTable{
- margin-left: 6px;
- /deep/.el-input{
- font-size: 0px;
- .el-input__prefix{
- width: 100%;
- }
- }
- /deep/.el-input__icon {
- width: 100%;
- font-size: 0;
- }
+ .pickerTable {
+ margin-left: 3px;
}
}
}
@@ -363,16 +347,25 @@
}
/deep/.el-input__inner{
position: relative;
- width: 0.9rem!important;
- height: 0.125rem!important;
+ width:140px;
background-color: #2e4967;
- color: #ffffff;
+ color: #fff;
font-size: 12px;
height: 24px;
padding: 0;
+ border-color:#00fff6;
+ text-align: center;
//padding-left:20px ;
//padding: 0!important;
}
+ /deep/.el-input__icon{
+ display: block;
+ width: 140px;
+ height: 22px;
+ line-height: 22px;
+ cursor: pointer;
+ font-size: 0;
+ }
.echatsInput{
color: #00ffff;
background-color: #2e4967;
@@ -380,6 +373,7 @@
border-radius: 6px;
width: 80px;
height: 22px;
+ text-align: center;
}
input::-webkit-calendar-picker-indicator {
opacity: 100;
@@ -388,10 +382,15 @@
background-color:#2e4967;
text-align: center;
padding: 0 7px;
- line-height: 20px;
+ line-height: 24px;
border-radius: 4px;
margin-right: 6px;
}
+ .detailbtn:hover{
+ box-shadow: 0 0 0.03rem #fff700 !important;
+ color:#fff700 !important;
+ cursor: pointer;
+ }
}
.el-dialog-div {
//height: 50vh!important;
@@ -402,9 +401,6 @@
#echarts {
margin: 0;
padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
}
}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
index c93b933..4af2b05 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHour.vue
@@ -32,14 +32,13 @@
</div>
<div>
閲囨牱鐐规暟:
- <input list="source" id="ipt" class="echatsInput" v-model="value">
- <datalist id="source" >
- <option value="0" />
- <option value="25" />
- <option value="50" />
- <option value="75" />
- <option value="100" />
- </datalist>
+ <el-select v-model="formInline.region" placeholder="50">
+ <el-option label="0" value="0"></el-option>
+ <el-option label="25" value="25"></el-option>
+ <el-option label="50" value="50"></el-option>
+ <el-option label="75" value="75"></el-option>
+ <el-option label="100" value="100"></el-option>
+ </el-select>
</div>
<div class="detailbtn" @click="onSubmit">鏌ヨ</div>
<div class="detailbtn" @click="dialogVisible = true" >鏄庣粏琛�</div>
@@ -64,7 +63,6 @@
<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'
-// import
export default {
name: 'ECharts',
@@ -73,12 +71,12 @@
},
data () {
return {
- value: '50',
value1: '',
value2: '',
watchData: [],
dialogVisible: false,
myChar: null,
+ value: '',
formInline: {
user: '',
region: ''
@@ -327,98 +325,98 @@
<style scoped lang="less">
.grid-content{
- font-size: 8px!important;
- background-color:#2e4967;
- text-align: center;
- margin: 0 2px 4px 2px;
- border-radius: 2px;
- >i{
- font-style: normal;
- color: #eef309;
- }
+ font-size: 8px;
+ background-color: #2e4967;
+ text-align: center;
+ border-radius: 2px;
+ margin-right: 10px;
+ padding:0 10px
}
-.Infomation {
- margin-left: 10px;
+.infomation {
+ padding: 5px 10px;
}
.form-echrts {
- width: 100%;
- border-top: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
- .from-search{
- display: flex;
- padding:5px;
- >div{margin-left: 10px}
- .pickerMon{
- display: flex;
- >div:first-child{
- margin-right: 10px;
- }
- .pickerData{
- flex: 1;
- display: flex;
- >span{line-height: 22px}
- .pickerTable{
- margin-left: 6px;
- /deep/.el-input{
- font-size: 0px;
- .el-input__prefix{
- width: 100%;
- }
- }
- /deep/.el-input__icon {
- //font-size: 0;
- width: 100%;
- }
- }
- }
- }
- /deep/.el-date-editor--datetime{
- width: 100%;
- }
- /deep/.el-input__inner{
- position: relative;
- width: 0.9rem!important;
- height: 0.125rem!important;
- background-color: #2e4967;
- color: #ffffff;
- font-size: 12px;
- height: 24px;
- padding: 0;
- //padding-left:20px ;
- //padding: 0!important;
- }
- .echatsInput{
- color: #00ffff;
- background-color: #2e4967;
- border: none;
- border-radius: 6px;
- width: 80px;
- height: 22px;
- }
- input::-webkit-calendar-picker-indicator {
- opacity: 100;
- }
- .detailbtn{
- background-color:#2e4967;
- text-align: center;
- padding: 0 7px;
- line-height: 20px;
- border-radius: 4px;
- }
- }
- .el-dialog-div {
- //height: 50vh!important;
- overflow: auto;
- //overflow: hidden;
- }
-
- #echarts {
- margin: 0;
- padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
+ width: 100%;
+ border-top: 1px solid #396d83;
//margin: 10px 10px 10px 10px;
- }
+ .from-search{
+ display: flex;
+ padding:5px;
+ >div{margin-left: 10px}
+ .pickerMon{
+ display: flex;
+ >div:first-child {
+ margin-right: 10px;
+ }
+ .pickerData{
+ flex: 1;
+ display: flex;
+ >span{line-height: 22px}
+ .pickerTable {
+ margin-left: 3px;
+ }
+ }
+ }
+ /deep/.el-date-editor--datetime{
+ width: 100%;
+ }
+ /deep/.el-input__inner{
+ position: relative;
+ width:140px;
+ background-color: #2e4967;
+ color: #ffffff;
+ font-size: 12px;
+ height: 24px;
+ padding: 0;
+ border-color:#00fff6;
+ text-align: center;
+ //padding-left:20px ;
+ //padding: 0!important;
+ }
+ /deep/.el-input__icon{
+ display: block;
+ width: 140px;
+ height: 22px;
+ line-height: 22px;
+ cursor: pointer;
+ font-size: 0;
+ }
+ .echatsInput{
+ color: #00ffff;
+ background-color: #2e4967;
+ border: none;
+ border-radius: 6px;
+ width: 80px;
+ height: 22px;
+ text-align: center;
+ }
+ input::-webkit-calendar-picker-indicator {
+ opacity: 100;
+ }
+ .detailbtn{
+ background-color:#2e4967;
+ text-align: center;
+ padding: 0 7px;
+ line-height: 24px;
+ border-radius: 4px;
+ margin-right: 6px;
+ }
+ .detailbtn:hover{
+ box-shadow: 0 0 0.03rem #fff700 !important;
+ color:#fff700 !important;
+ cursor: pointer;
+ }
+ }
+ .el-dialog-div {
+ //height: 50vh!important;
+ overflow: auto;
+ //overflow: hidden;
+ }
+
+ #echarts {
+ margin: 0;
+ padding: 0;
+ }
}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
index ad97760..a803441 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/Echarts.vue
@@ -1,5 +1,5 @@
<template>
- <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
+ <div style="width:5rem;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
</template>
<script>
@@ -12,202 +12,247 @@
name: 'ECharts',
data () {
return {
- myChart: [],
- result: [],
days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
- value: '',
+ myChart: [],
+ // x杞存暟鎹�
+ xAxis: [],
seriesData: [],
- aseries: ''
+ seriesName: []
}
},
+ mounted () {
+ this.$nextTick(() => {
+ this.initEchartsData()
+ this.upDateEchartsData()
+ })
+ },
methods: {
- drawChart () {
+ // 鍒濆鍖栨暟鎹�
+ async initEchartsData () {
+ const endTime = dayjs().add(1, 's')
+ const data = {
+ $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+ $startTime: this.dayjs,
+ $endTime: endTime,
+ $step: 15
+ }
+ const result = (await mapApi.DataItems(data)).data
+ for (var i = 0; i < result.length; i++) {
+ // console.log(result[i])
+ this.xAxis.push(result[i].ReadTime)
+ this.seriesData.push(result[i].TagValue)
+ this.seriesName = result[i].UnionTagCode
+ }
+ this.upDateEchartsinit()
+ },
+ // 瀹炴椂鏁版嵁鍒锋柊
+ upDateEchartsData () {
+ // const interValHander =
+ setInterval(async () => {
+ const endTime = dayjs().add(1, 's')
+ const data = {
+ $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
+ $startTime: this.dayjs,
+ $endTime: endTime,
+ $step: 15
+ }
+ const result = (await mapApi.DataItems(data)).data
+ for (var i = 0; i < result.length; i++) {
+ // console.log(result[i])
+ // this.xAxis.shift()
+ this.xAxis.push(result[i].ReadTime)
+ this.seriesData.push(result[i].TagValue)
+ this.seriesName = result[i].UnionTagCode
+ }
+ this.upDateEchartsinit()
+ }, 1500)
+ },
+ // 鍒濆鍖杄charts
+ upDateEchartsinit () {
this.myChart = this.$echarts.init(this.$refs.echarts)
-
- const option = {
- tooltip: {
- trigger: 'axis'
+ // 鍥捐〃鐨勯厤缃」鏁版嵁
+ const xAxisData = this.xAxis
+ const legendData = [this.seriesName, 'TJIP45.lscl2tb552AISA11201B', 'TJIP45.lscl2tb552AISA11202A', 'TJIP45.lscl2tbAIA-10505-1', 'TJIP45.lscl2tbAIA-10505-2']
+ const seriesData = [
+ {
+ name: this.seriesName,
+ type: 'line',
+ stack: '鎬婚噺',
+ data: this.seriesData
},
- legend: {
- data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+ {
+ name: 'TJIP45.lscl2tb552AISA11201B',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [2.20, 1.82, 1.91, 2.34, 2.90, 3.30, 3.10]
+ }
+ ]
+ const option = {
+ title: {
+ // text: '瀹炴椂鏁版嵁',
+ target: 'blank',
+ left: '5%',
+ textStyle: {
+ color: '#fff',
+ fontSize: 15,
+ bottom: 20
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ color: '#1a4245'
+ }
+ }
+ // formatter: function (params) {
+ // // console.log(params)
+ // var UnionTagCode = params[0].seriesName + '<br />'
+ // for (var i = 0; i < params.length; i++) {
+ // var seriesName = params[i].seriesName
+ // // 鍊�
+ // var value = params[i].value[1]
+ //
+ // // var valueFliter = formatter(value)
+ // var valueFliter = value
+ //
+ // var maker = params[i].marker
+ // var colo = ''
+ // switch (seriesName) {
+ // case 'TJIP45.lscl2tb552AI10710':
+ // colo = '#fff21c'
+ // break
+ // default:
+ // colo = 'red'
+ // break
+ // }
+ // maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
+ // UnionTagCode += maker + seriesName + ':' + valueFliter + '<br />'
+ // }
+ // return UnionTagCode
+ // }
},
grid: {
- containLabel: false
+ top: '20%'
},
toolbox: {
+ show: false,
feature: {
- saveAsImage: {
- show: false
- }
+ saveAsImage: {}
+ }
+ },
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 100
+ }, {
+ start: 0,
+ end: 100,
+ show: false,
+ handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '80%',
+ handleStyle: {
+ color: '#fff',
+ shadowBlur: 3,
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ }
+ }],
+ legend: {
+ data: legendData,
+ textStyle: {
+ color: '#ffffff',
+ fontSize: 12
}
},
xAxis: {
type: 'category',
+ // type: 'time',
boundaryGap: false,
+ axisLabel: {
+ margin: 6,
+ interval: 0,
+ textStyle: {
+ color: '#fff'
+ }
+ },
splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed'
+ }
+ },
+ axisTick: {
show: false
},
- // data: this.seriesData,
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
axisLine: {
lineStyle: {
color: '#FFFFFF',
- // width: 1
- show: false
+ width: 1
}
- }
+ },
+ data: xAxisData
},
- yAxis: {
+ yAxis: [{
type: 'value',
- boundaryGap: [0, '100%'],
+ name: 'yname',
+ // max: function (value) {
+ // var max_val_list = []; //鎵�鏈夋樉绀烘姌绾跨殑鏍囧噯鍊�
+ // if (bzzList && bzzList.length > 0) {
+ // $.each(bzzList, function (index, item) {
+ // max_val_list.push(item.bzhui);
+ // });
+ // }
+ // max_val_list = max_val_list.sort(function (a, b) {
+ // return a - b
+ // }); //鎺掑簭
+ // var ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1];
+ // return parseInt(ma);
+ // },
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ splitLine: {
+ show: false
+ }, // y杞� 缃戞牸绾夸笉鏄剧ず,
axisLine: {
lineStyle: {
color: '#FFFFFF',
width: 1
}
}
- },
- series: [
- {
- name: '妯℃嫙鏁版嵁',
- type: 'line',
- // showSymbol: false,
- // hoverAnimation: false,
- data: this.seriesData
+ }, {
+ type: 'value',
+ name: 'dataUnit',
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#fff'
+ }
},
- {
- name: '鑱旂洘骞垮憡',
- type: 'line',
- stack: '鎬婚噺',
- data: [220, 182, 191, 234, 290, 330, 310]
+ splitLine: {
+ show: false
},
- {
- name: '瑙嗛骞垮憡',
- type: 'line',
- stack: '鎬婚噺',
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '鐩存帴璁块棶',
- type: 'line',
- stack: '鎬婚噺',
- data: [320, 332, 301, 334, 390, 330, 320]
- },
- {
- name: '鎼滅储寮曟搸',
- type: 'line',
- stack: '鎬婚噺',
- data: [820, 932, 901, 934, 1290, 1330, 1320]
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1
+ }
}
- ]
+ }],
+ series: seriesData
}
this.myChart.setOption(option)
- },
- async echartsData () {
- const addDays = dayjs().add(300, 'day')
- const data = {
- $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
- $startTime: this.dayjs,
- $endTime: addDays,
- $step: 15
- }
- const result = await mapApi.DataItems(data)
- this.result = result.data
- for (let i = 0; i < result.length; i++) {
- // // console.log(result[i])
-
- // const seriesData = []
- const aseries = []
- // let nameData = ''
-
- this.seriesData.push(result[i].ReadTime)
- aseries.push(result[i].TagValue)
- // nameData = result[i].UnionTagCode
- this.aseries = result[i].UnionTagCode
- }
- this.myChart.setOption({
- series: [{
- data: this.seriesData
- }]
- })
- },
- // 鏁版嵁鐨勮姹�
- requestEcharts () {
- setInterval(async () => {
- const addDays = dayjs().add(300, 'day')
- const data = {
- $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
- $startTime: this.dayjs,
- $endTime: addDays,
- $step: 15
- }
- const result = await mapApi.DataItems(data)
- this.result = result.data
- for (let i = 0; i < result.length; i++) {
- // // console.log(result[i])
-
- // const seriesData = []
- const aseries = []
- // let nameData = ''
-
- this.seriesData.push(result[i].ReadTime)
- aseries.push(result[i].TagValue)
- // nameData = result[i].UnionTagCode
- this.aseries = result[i].UnionTagCode
- }
- this.myChart.setOption({
- series: [{
- data: this.seriesData
- }]
- })
- }, 3000)
}
- },
- mounted () {
- this.$nextTick(() => {
- this.requestEcharts()
- this.drawChart()
- this.echartsData()
- })
}
}
</script>
<style scoped lang="less">
-.Infomation {
- margin-left: 10px;
- height: 0.2rem;
-}
-.el-tag {
- height: 25px;
- width: 140px;
- line-height: 25px;
- margin-right: 10px;
- font-size: 10px;
- background-color: rgba(0, 255, 246, 0.14);
- color: #00d0f9;
- border: none;
- padding: 0 15px;
-}
-
-.form-echrts {
- width: 100%;
- height: 1rem;
- border-top: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
- .el-dialog-div {
- //height: 50vh!important;
- overflow: auto;
- //overflow: hidden;
- }
-
- #echarts {
- margin: 0;
- padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
- }
-}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
index 7296b46..efb16e4 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue
@@ -5,20 +5,19 @@
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<ul class="tab">
- <li @click='tabTaggle("ECharts")'>瀹炴椂鏁版嵁</li>
+ <li @click='tabTaggle("Echarts")'>瀹炴椂鏁版嵁</li>
<li @click='tabTaggle("EChartsHour")'>灏忔椂鏁版嵁</li>
<li @click='tabTaggle("EChartsDate")'>鏃ユ暟鎹�</li>
<li @click='tabTaggle("ECharts")'>浜哄伐鏁版嵁</li>
- <div id="title" >
- <span><strong> </strong></span>
- <span >姝ｅ父</span>
- <span ></span>
- <span >棰勮</span>
- <span ></span>
- <span >瓒呮爣</span>
- <span ></span>
- </div>
</ul>
+ <div class="legend" >
+ <span >姝ｅ父</span>
+ <i style=" background: #4ec99c;"></i>
+ <span >棰勮</span>
+ <i style=" background: red;"></i>
+ <span >瓒呮爣</span>
+ <i style=" background: orange;"></i>
+ </div>
<component :is="currentTab" v-bind="$attrs"></component>
</div>
</template>
@@ -48,17 +47,11 @@
</script>
-<style scoped>
-* {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
+<style scoped lang="less">
.win {
position: relative;
/*margin-bottom: 13px;*/
- background-color: rgba(33, 41, 69, 0.9);
+ background:@background-color;
border: 0.8px solid #396d83;
/*height: 1.5rem;*/
}
@@ -103,66 +96,39 @@
.tab {
display: flex;
border-bottom: 1px solid #396d83;
- margin-bottom: 10px;
+ padding:5px 10px
}
-li {
+.tab li {
background-color: #243a55;
- margin: 10px 10px 2px 10px;
- /*padding: 5px 10px;*/
- width: 90px;
- height: 25px;
line-height: 25px;
text-align: center;
border-radius: 5px;
+ margin-right: 10px;
+ padding:0 15px
}
-ul li:hover {
+.tab li:hover {
background-color: #0e639e;
color: #682000;
cursor: pointer;
}
-#title{
- height: 30px;
- /* margin-top: 30px; */
- color: #ffffff;
- margin-top: 5px;
+.legend{
+ position: absolute;
+ top:10px;
+ right: 0;
+ display: flex;
+ justify-items: center;
+}
+.legend i {
+ display: block;
+ width: 35px;
+ height: 15px;
+ margin:0 10px 0 3px;
+ border-radius: 3px;
+}
+.legend span{
+ line-height: 15px;
}
-#title span:nth-child(1){
- /*margin-left: 478px*/
-}
-#title span:nth-child(2){
- /*margin-left: 177px*/
-}
-#title span:nth-child(3){
- display: inline-block;
- background-color: #4ec99c;
- height: 15px;
- width: 35px;
- margin-left: 10px;
- border-radius: 5px;
-}
-#title span:nth-child(6){
- /*margin-left: 21px*/
-}
-#title span:nth-child(7){
- display: inline-block;
- background-color: red;
- height: 15px;
- width: 35px;
- margin-left: 7px;
- border-radius: 5px;
-}
-#title span:nth-child(4){
- margin-left: 17px;
-}
-#title span:nth-child(5){
- display: inline-block;
- background-color: orange;
- height: 15px;
- width: 35px;
- margin-left: 9px;
- border-radius: 5px;
-}
</style>
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
index 3df30bb..967de8a 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue
@@ -9,16 +9,14 @@
<div class="main">
<div class="main-matter">
<div v-if="value === 'feiqi'">
- <el-row type="flex" class="row-bg row-item-one" justify="space-around">
- <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</el-col>
- <el-col :span="8">鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</el-col>
- <el-col :span="8">鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</el-col>
- </el-row>
- <el-row type="flex" class="row-bg row-item-two" justify="space-around">
- <el-col :span="8">鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</el-col>
- <el-col :span="18">鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
- <el-col :span="18">鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</el-col>
- </el-row>
+ <ul>
+ <li>鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</li>
+ <li>鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</li>
+ <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</li>
+ <li>鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</li>
+ <li>鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</li>
+ <li>鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</li>
+ </ul>
</div>
<div v-else-if="value === 'gufei'">
<ul>
@@ -31,16 +29,14 @@
</ul>
</div>
<div v-else-if="value === 'feishui'">
- <el-row type="flex" class="row-bg row-item-one" justify="space-around">
- <el-col :span="8">鐩戞祴鐐瑰悕绉�:{{ setWasteWaterdata.Name }}</el-col>
- <el-col :span="8">鐢熶骇鍗曚綅:{{ setWasteWaterdata.porltName }}</el-col>
- <el-col :span="8">鎺掓斁绫诲瀷鍚嶇О:{{ setWasteWaterdata.MonTypeName }}</el-col>
- </el-row>
- <el-row type="flex" class="row-bg row-item-two" justify="space-around">
- <el-col :span="8">鎺掓斁鍘诲悜:{{ setWasteWaterdata.EmissDirecti }}</el-col>
- <el-col :span="8">鎺у埗绾у埆鍚嶇О:{{ setWasteWaterdata.ContrLevelShowName }}</el-col>
- <el-col :span="8">鍐�/澶栨帓鍙�:{{ setWasteWaterdata.OrOutPortName }}</el-col>
- </el-row>
+ <ul>
+ <li>鐩戞祴鐐瑰悕绉�:{{ setWasteWaterdata.Name }}</li>
+ <li>鐢熶骇鍗曚綅:{{ setWasteWaterdata.porltName }}</li>
+ <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteWaterdata.MonTypeName }}</li>
+ <li>鎺掓斁鍘诲悜:{{ setWasteWaterdata.EmissDirecti }}</li>
+ <li>鎺у埗绾у埆鍚嶇О:{{ setWasteWaterdata.ContrLevelShowName }}</li>
+ <li>鍐�/澶栨帓鍙�:{{ setWasteWaterdata.OrOutPortName }}</li>
+ </ul>
</div>
</div>
</div>
@@ -75,7 +71,7 @@
.win {
position: relative;
margin-bottom: 10px;
- background-color: rgba(33, 41, 69, 0.9);
+ background-color: @background-color;
//width: 6rem;
//height: 0.5rem;
}
@@ -87,40 +83,8 @@
.main-matter {
font-size: 13px;
font-weight: normal;
- padding: 0 6px;
+ padding: 6px;
border: 1px solid #396d83;
-
- .row-item-one {
- //flex-wrap: nowrap;
- overflow: hidden;
- margin-top: 6px;
- margin-bottom: 7px;
- //margin-left: 10px;
- }
- .row-item-two{
- margin-bottom: 6px;
- }
- .el-row {
- width: 100%;
- color: #00d0f9;
- display: flex;
- font-size: 12px !important;
- text-align: center;
-
- .el-col {
- text-align: center;
- flex: 1;
- width: 100%;
- background-color: #243a55;
- margin-left: 6px;
- border-radius: 4px;
-
- &:nth-child(1) {
- margin-left: 0;
- }
- }
- }
-
ul {
//width: 100%;
//height: 100%;
@@ -128,16 +92,14 @@
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
- line-height: 30px;
-
+ margin-bottom: -6px;
li {
+ margin-bottom: 6px;
text-align: center;
- width: 32%;
- height: 30px;
- margin: 5px auto;
+ min-width: 32%;
background-color: #243a55;
color: #00d0f9;
- border-radius: 4px;
+ border-radius: 3px;
font-size: 0.08rem;
}
diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue
index b221e49..8d23b01 100644
--- a/src/components/BaseNav/PublicBounced/PublicBounced.vue
+++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue
@@ -1,7 +1,6 @@
<template>
- <div class="public-bounced" v-drag v-if="flag">
- <!-- <Echarts></Echarts>-->
- <div class="public-bounced-title">
+ <div class="public-bounced map-background" v-drag v-if="flag">
+ <div class="public-bounced-title panel-title" ref="publicBounced">
<span>{{ displayContentTitle }}</span>
<i class="el-icon-circle-close" @click="closePopup"></i>
</div>
@@ -16,7 +15,7 @@
:value="value"
:getQueryOnlineMonData="getQueryOnlineMonData"
:getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails'
->
+ >
</public-chart>
</div>
</div>
@@ -29,9 +28,7 @@
<script>
-// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'
-
-import '@/components/BaseNav/SolidWaste/directive/dir'
+import '@/utils/dragBoxes'
import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo'
@@ -60,6 +57,11 @@
getQueryOnlineMonData: []
// getGasQueryOnlineMonData: []
}
+ },
+ mounted () {
+ this.$nextTick(() => {
+ console.log(this.$refs.publicBounced)
+ })
},
methods: {
closePopup () {
@@ -101,16 +103,14 @@
<style lang="less" scoped>
.public-bounced {
- z-index: 999;
+ z-index: 2000;
position: absolute;
top: 15%;
left: 20%;
- background-color: #002432;
- border: 1px #9fc5c8 solid;
.public-bounced-title {
+ cursor: move;
height: 0.1rem;
- border: 1px #a4c0d8 solid;
padding: 10px 0;
display: flex;
align-items: center;
@@ -123,11 +123,15 @@
}
i {
- color: white;
+ color: #C0C4CC;
margin: 0 15px;
font-size: 22px;
cursor: pointer;
}
+
+ i:hover {
+ color: #00fff6;
+ }
}
.public-bounced-content {
diff --git a/src/components/BaseNav/SolidWaste/directive/dir.js b/src/components/BaseNav/SolidWaste/directive/dir.js
index ef3a982..063f6c3 100644
--- a/src/components/BaseNav/SolidWaste/directive/dir.js
+++ b/src/components/BaseNav/SolidWaste/directive/dir.js
@@ -1,45 +1,31 @@
import Vue from 'vue'
-// 浣跨敤Vue.directive()瀹氫箟涓�涓叏灞�鎸囦护
-// 1.鍙傛暟涓�锛氭寚浠ょ殑鍚嶇О锛屽畾涔夋椂鎸囦护鍓嶉潰涓嶉渶瑕佸啓v-
-// 2.鍙傛暟浜岋細鏄竴涓璞★紝璇ュ璞′腑鏈夌浉鍏崇殑鎿嶄綔鍑芥暟
-// 3.鍦ㄨ皟鐢ㄧ殑鏃跺�欏繀椤诲啓v-
+
const drag = Vue.directive('drag', {
- // 1.鎸囦护缁戝畾鍒板厓绱犱笂鍥炵珛鍒绘墽琛宐ind鍑芥暟锛屽彧鎵ц涓�娆�
- // 2.姣忎釜鍑芥暟涓涓�涓弬鏁版案杩滄槸el锛岃〃绀虹粦瀹氭寚浠ょ殑鍏冪礌锛宔l鍙傛暟鏄師鐢焜s瀵硅薄
- // 3.閫氳繃el.focus()鏄棤娉曡幏鍙栫劍鐐圭殑锛屽洜涓哄彧鏈夋彃鍏OM鍚庢墠鐢熸晥
- bind: function (el) {
- el.style.cursor = 'move' // 榧犳爣鏍峰紡鍙榤ove鏍峰紡
- },
- // inserted琛ㄧず涓�涓厓绱狅紝鎻掑叆鍒癉OM涓細鎵цinserted鍑芥暟锛屽彧瑙﹀彂涓�娆�
- inserted: function (el) {
- el.onmousedown = function (e) {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.public-bounced-title')
+ dialogHeaderEl.onmousedown = function (e) {
var distX = e.pageX - el.offsetLeft
var distY = e.pageY - el.offsetTop
- // console.log('鍏冪礌鏈韩鐨勯珮锛�' + el.clientHeight + ',鍏冪礌鏈韩鐨勫锛�' + el.clientWidth)
-
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
- // 瑙ｅ喅蹇�熸嫋鍔ㄦ粸鍚庨棶棰�
-
document.onmousemove = function (e) {
- // 鐢ㄩ紶鏍囩殑浣嶇疆鍑忓幓榧犳爣鐩稿鍏冪礌鐨勪綅缃紝寰楀埌鍏冪礌鐨勪綅缃�
let left = e.clientX - distX
let top = e.clientY - distY
if (left <= 0) {
- left = 5 // 璁剧疆鎴�5鏄负浜嗕笉绂昏竟缂樺お杩�
- } else if (left > document.documentElement.clientWidth - el.clientWidth) {
- // document.documentElement.clientWidth 灞忓箷鐨勫彲瑙嗗搴�
- left = document.documentElement.clientWidth - el.clientWidth - 5
+ left = 5
+ } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
+ left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
}
if (top <= 0) {
top = 5
- } else if (top > document.documentElement.clientHeight - el.clientHeight) {
- top = document.documentElement.clientHeight - el.clientHeight - 5
+ } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
+ top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
}
+
el.style.left = left + 'px'
el.style.top = top + 'px'
}
@@ -47,9 +33,6 @@
document.onmousemove = document.onmouseup = null
}
}
- },
- // 褰揤Node鏇存柊鐨勬椂鍊欎細鎵цupdated锛屽彲浠ヨЕ鍙戝娆�
- updated: function (el) {
}
})
export default drag
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index fe80364..ef07406 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -21,7 +21,7 @@
import iconSetting from '@/assets/images/map-pages/icon/setting.png'
import LcServiceLayer from './modules/LcServiceLayer'
-
+import bus from '@/eventBus'
export default {
name: 'LayerController',
components: { LcServiceLayer },
@@ -55,9 +55,22 @@
}
}
},
+ mounted () {
+ const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 3 && state.type) {
+ that.layerControllerVisible = false
+ }
+ })
+ },
methods: {
showPanel () {
this.layerControllerVisible = !this.layerControllerVisible
+ const state = {
+ type: this.layerControllerVisible,
+ num: 3
+ }
+ bus.$emit('changeState', state)
},
switchPanel () {
this.panelSwitch.main = !this.panelSwitch.main
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 9733c83..1e62696 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -96,6 +96,9 @@
// 娴嬮噺鐨勬柟娉�
import Measure from '@/components/plugin/MeaSure'
+//
+import bus from '@/eventBus'
+
export default {
name: 'ToolBoxPanel',
components: {
@@ -263,7 +266,19 @@
]
}
},
+ mounted () {
+ /* import bus from '@/eventBus' */
+ const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 1 && state.type) {
+ that.selectGroup = false
+ that.isShow = []
+ that.active = -1
+ }
+ })
+ },
methods: {
+
init (map) {
this.map = map
this.toolBoxPanelVisible = true
@@ -391,6 +406,11 @@
this.isShow = !this.isShow
this.active = -1
}
+ const state = {
+ type: this.selectGroup,
+ num: 1
+ }
+ bus.$emit('changeState', state)
}
}
}
diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue
index 41239cf..909a35f 100644
--- a/src/components/table/summarySheets.vue
+++ b/src/components/table/summarySheets.vue
@@ -47,7 +47,7 @@
import IndexStatistics from './components/IndexStatistics'
import '@/components/BaseNav/SolidWaste/directive/dir'
-
+import bus from '@/eventBus'
export default {
name: 'summary-sheet.vue',
components: {
@@ -68,6 +68,7 @@
}
},
methods: {
+
closeBtn () {
this.$refs.summarySheets.show()
this.summaryVisible = true
@@ -82,10 +83,20 @@
},
subtopicBtn () {
this.subtopic = !this.subtopic
+ const state = {
+ type: this.subtopic,
+ num: 2
+ }
+ bus.$emit('changeState', state)
}
},
mounted () {
const that = this
+ bus.$on('changeState', function (state) {
+ if (state.num !== 2 && state.type) {
+ that.subtopic = false
+ }
+ })
this.$nextTick(() => {
this.$refs.summarySheets.$on('closeDialog', () => {
that.summaryVisible = false
diff --git a/src/eventBus.js b/src/eventBus.js
new file mode 100644
index 0000000..b0230b5
--- /dev/null
+++ b/src/eventBus.js
@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export default new Vue()
diff --git a/src/utils/dragBoxes.js b/src/utils/dragBoxes.js
new file mode 100644
index 0000000..1e17b89
--- /dev/null
+++ b/src/utils/dragBoxes.js
@@ -0,0 +1,39 @@
+/* eslint */
+import Vue from 'vue'
+
+const drag = Vue.directive('drag', {
+ bind (el, binding, vnode, oldVnode) {
+ const dialogHeaderEl = el.querySelector('.public-bounced-title')
+ dialogHeaderEl.onmousedown = function (e) {
+ var distX = e.pageX - el.offsetLeft
+ var distY = e.pageY - el.offsetTop
+ if (e.preventDefault) {
+ e.preventDefault()
+ } else {
+ e.returnValue = false
+ }
+ document.onmousemove = function (e) {
+ let left = e.clientX - distX
+ let top = e.clientY - distY
+
+ if (left <= 0) {
+ left = 5
+ } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
+ left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
+ }
+ if (top <= 0) {
+ top = 5
+ } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
+ top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
+ }
+
+ el.style.left = left + 'px'
+ el.style.top = top + 'px'
+ }
+ document.onmouseup = function () {
+ document.onmousemove = document.onmouseup = null
+ }
+ }
+ }
+})
+export default drag
--
Gitblit v1.8.0