From cb85033879c74f34925a303402c1ad3e4a8646f2 Mon Sep 17 00:00:00 2001
From: 徐旺旺 <11530253@qq.com>
Date: 星期一, 10 五月 2021 17:03:54 +0800
Subject: [PATCH] 搜索更换为geoserver wfs,图层顺序，弹窗定位等
---
src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue | 419 ++++++++++++++++++++++++++++++++---------------------------
1 files changed, 226 insertions(+), 193 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue b/src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue
index e719096..6cde22c 100644
--- a/src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue
+++ b/src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue
@@ -1,69 +1,65 @@
<!-- 鏃ユ暟鎹� -->
<template>
<div id="Tab">
- <div class="animation">
- <div class="infomation">
- <span class="grid-content">姘哀鍖栫墿 :<i style="color: #e8ee0b">29.93</i> 鏍囧噯 : 100</span>
- <span class="grid-content">浜屾哀鍖栫～ : <i style="color: #e8ee0b">17.34</i> 鏍囧噯 : 50</span>
- <span class="grid-content">鐑熷皹 : <i style="color: #e8ee0b">6.93</i> 鏍囧噯 : 30</span>
- <span class="grid-content">搴熸皵娴侀噺 : <i style="color: #e8ee0b">120343.18</i></span>
- </div>
- </div>
+ <public-data-standard :dataStandard="dataStandard"></public-data-standard>
<div class="form-echrts">
<div class="from-search">
<div class="pickerMon">
<div class="pickerData">
<span> 寮�濮嬫椂闂�:</span>
<span class="pickerTable">
- <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
+ <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
</span>
</div>
<div class="pickerData">
- <span >缁撴潫鏃堕棿:</span>
+ <span>缁撴潫鏃堕棿:</span>
<span class="pickerTable">
- <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
+ <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
</span>
</div>
</div>
-<!-- <div>-->
-<!-- 閲囨牱鐐规暟:-->
-<!-- <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>
+ <!-- <div>-->
+ <!-- 閲囨牱鐐规暟:-->
+ <!-- <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 hover-bottom" @click="onSubmit">鏌ヨ</div>
+ <div class="detailbtn hover-bottom" @click="dialogVisible = true">鏄庣粏琛�</div>
</div>
<div style="width:5rem;height:1.5rem;" id="echarts" ref="main">
</div>
</div>
- <!-- 鏄庣粏寮规 -->
- <el-dialog :visible.sync="dialogVisible"
- :append-to-body="true"
- :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
- width="68%"
- center
- v-dialogDrag
- >
- <div class="el-dialog-div" style="height: 500px">
- <public-detailed-list v-bind="$attrs"></public-detailed-list>
- </div>
- </el-dialog>
+ <!-- <!– 鏄庣粏寮规 –>-->
+ <!-- <el-dialog :visible.sync="dialogVisible"-->
+ <!-- :append-to-body="true"-->
+ <!-- :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
+ <!-- width="68%"-->
+ <!-- center-->
+ <!-- v-dialogDrag-->
+ <!-- >-->
+ <!-- <div class="el-dialog-div" style="height: 500px">-->
+ <!-- <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
+ <!-- </div>-->
+ <!-- </el-dialog>-->
</div>
</template>
<script>
-import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
+import mapApi from '@/api/mapApi'
+// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import dayjs from 'dayjs'
+import PublicDataStandard from '@components/BaseNav/PublicBounced/common/PublicDataStandard'
export default {
name: 'ECharts',
components: {
- PublicDetailedList
+ PublicDataStandard
+ // PublicDetailedList
},
data () {
return {
@@ -77,6 +73,47 @@
timeEnd: ''
},
info: this.series,
+ dataStandard: [{
+ current: {
+ name: '姘哀鍖栫墿1',
+ val: 29.93
+ },
+ standard: {
+ name: '鏍囧噯',
+ val: 100
+ }
+ },
+ {
+ current: {
+ name: '浜屾哀鍖栫～',
+ val: 17.34
+ },
+ standard: {
+ name: '鏍囧噯',
+ val: 50
+ }
+ },
+ {
+ current: {
+ name: '鐑熷皹',
+ val: 6.93
+ },
+ standard: {
+ name: '鏍囧噯',
+ val: 30
+ }
+ },
+ {
+ current: {
+ name: '搴熸皵娴侀噺',
+ val: 120343.18
+ },
+ standard: {
+ name: '',
+ val: null
+ }
+ }
+ ],
JsonDayCharts: {
id: 'mychartsDay',
title: '鍔犵儹鐐夌儫姘�',
@@ -123,8 +160,20 @@
],
xdata: ['1鏃�', '2鏃�', '3鏃�', '4鏃�', '5鏃�', '6鏃�', '7鏃�', '8鏃�', '9鏃�', '10鏃�', '11鏃�', '12鏃�', '13鏃�', '14鏃�', '15鏃�', '16鏃�', '17鏃�', '18鏃�', '19鏃�', '20鏃�', '21鏃�', '22鏃�', '23鏃�', '24鏃�', '25鏃�', '26鏃�', '27鏃�', '28鏃�', '29鏃�', '30鏃�', '31鏃�'],
ydatas: [
- { name: '姘哀鍖栫墿', data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 100 },
- { name: '浜屾哀鍖栫～', data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 },
+ {
+ name: '姘哀鍖栫墿',
+ data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'],
+ zdcbcolor: 'red',
+ zxcolor: '#00B0F0',
+ bzz: 100
+ },
+ {
+ name: '浜屾哀鍖栫～',
+ data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'],
+ zdcbcolor: 'red',
+ zxcolor: '#fff21c',
+ bzz: 50
+ },
{
name: '搴熸皵娴侀噺',
data: ['2827518.25', '2763525.75', '2776435.50', '2742003.50', '2856001.75', '2890287.00', '2832898.25', '2803715.50', '2513925.75', '2753303.50', '2749836.00', '2786188.50', '2738838.00', '2733660.25', '2815521.25', '2830217.25', '2798918.00', '2803543.50', '2770175.25', '2823321.25', '2856329.25', '2801588.00', '2798103.50', '2766343.00', '2750489.50', '2697786.25', '2796775.50', '2808028.50', '2813561.75', '2757129.25', '2720755.50'],
@@ -132,7 +181,13 @@
zxcolor: '#9ACD32',
bzz: null
},
- { name: '鐑熷皹', data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 30 }
+ {
+ name: '鐑熷皹',
+ data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'],
+ zdcbcolor: 'red',
+ zxcolor: '#f48183',
+ bzz: 30
+ }
],
yname: ' 娴撳害(mg/m鲁)',
// id:'mychartDay',
@@ -150,6 +205,17 @@
this.onSubmit()
},
methods: {
+ async getWasteGasMonData () {
+ const GasOnlinedata = {
+ onLineMonEmissPointId: '23',
+ monItemId: '28,31',
+ beginTime: '2020-04-06 15:13:20',
+ endTime: '2020-04-07 15:13:20',
+ dataType: '1'
+ }
+ const data = await mapApi.getWasteGasMonData(GasOnlinedata)
+ this.JsonDayCharts = data
+ },
onSubmit () {
console.log('submit!')
this.CreateCharts(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype)
@@ -160,9 +226,9 @@
this.mychartDay.clear()
var dataUnit = ''
if (datatype === 1) {
- dataUnit = '姘旈噺(m鲁/d)'
+ dataUnit = '搴熸皵姘旈噺(m鲁/d)'
} else {
- dataUnit = '姘旈噺(m鲁/h)'
+ dataUnit = '搴熸皵姘旈噺(m鲁/h)'
}
var serLists = []
@@ -189,17 +255,17 @@
itemStyle: {
normal: {
color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
- // var biaozhuiz
- // for (var i = 0; i < exhbzzList.length; i++) {
- // if (exhbzzList[i].name == c.seriesName) {
- // biaozhuiz = exhbzzList[i].bzhui
- // }
- // }
- // if (c.value > 999999999999) {
- // return zdcbcolor
- // } else {
- // return '#33c95f'
- // }
+ // var biaozhuiz
+ // for (var i = 0; i < exhbzzList.length; i++) {
+ // if (exhbzzList[i].name == c.seriesName) {
+ // biaozhuiz = exhbzzList[i].bzhui
+ // }
+ // }
+ // if (c.value > 999999999999) {
+ // return zdcbcolor
+ // } else {
+ // return '#33c95f'
+ // }
},
lineStyle: { // 鎶樼嚎鐨勯鑹�
color: ydatas[i].zxcolor,
@@ -223,19 +289,19 @@
itemStyle: {
normal: {
color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹�
- // var biaozhuiz
- // for (var i = 0; i < exhbzzList.length; i++) {
- // if (exhbzzList[i].name == c.seriesName) {
- // biaozhuiz = exhbzzList[i].bzhui
- // }
- // }
- // if (c.value > biaozhuiz) {
- // return zdcbcolor
- // } else if (c.value > biaozhuiz * 0.9) {
- // return '#FFA500'
- // } else {
- // return '#33c95f'
- // }
+ // var biaozhuiz
+ // for (var i = 0; i < exhbzzList.length; i++) {
+ // if (exhbzzList[i].name == c.seriesName) {
+ // biaozhuiz = exhbzzList[i].bzhui
+ // }
+ // }
+ // if (c.value > biaozhuiz) {
+ // return zdcbcolor
+ // } else if (c.value > biaozhuiz * 0.9) {
+ // return '#FFA500'
+ // } else {
+ // return '#33c95f'
+ // }
},
lineStyle: { // 鎶樼嚎鐨勯鑹�
color: ydatas[i].zxcolor,
@@ -304,12 +370,12 @@
var seriesName = params[i].seriesName
// 鍊�
var value = params[i].value
- var valueFliter
- if (value === 'NaN') {
- valueFliter = ''
- } else {
- // valueFliter = formatter(value)
- }
+ // var valueFliter
+ // if (value === 'NaN') {
+ // valueFliter = ''
+ // } else {
+ // valueFliter = this.formatter(value)
+ // }
var maker = params[i].marker
if (seriesName === '浜屾哀鍖栫～') {
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
@@ -322,7 +388,7 @@
} else {
maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>'
}
- s += maker + seriesName + ':' + valueFliter + '<br />'
+ s += maker + seriesName + ':' + value + '<br />'
}
return s
}
@@ -477,15 +543,15 @@
// })
/**
- * 瑙ｅ喅mychartDay.on('click',function(){...})浜嬩欢閲嶅瑙﹀彂鐨勯棶棰�
- * Date: 20200720
- */
+ * 瑙ｅ喅mychartDay.on('click',function(){...})浜嬩欢閲嶅瑙﹀彂鐨勯棶棰�
+ * Date: 20200720
+ */
this.mychartDay.off('click')
/**
- * 鍥炬爣鐐瑰嚮浜嬩欢
- * 20190426 add
- * */
+ * 鍥炬爣鐐瑰嚮浜嬩欢
+ * 20190426 add
+ * */
// this.mychartDay.on('click', function (params) {
// // 鑾峰彇褰撳墠鏃堕棿锛屽皬鏃�
// var nowHours = new Date().Format('hh')
@@ -683,122 +749,89 @@
</script>
<style scoped lang="less">
-//.animation{
-// padding: 0 1rem;
-// overflow: hidden;
-// //width: 1rem;
-// .infomation{
-// display: flex;
-// //margin: 0 1rem;
-// overflow: hidden;
-// animation: move 1s linear 0s infinite;
-// @keyframes move {
-// 0% {
-// }
-// 100% {
-// transform: translateX(-10%);
-// }
-// }
-// /* 榧犳爣缁忚繃marquee 灏卞仠姝㈠姩鐢� */
-// &:hover {
-// //z-index: 9999999;
-// animation-play-state: paused;
-// }
-// }
-//}
- .grid-content {
- font-size: 8px;
- background-color: #2e4967;
- text-align: center;
- border-radius: 2px;
- margin-right: 10px;
- padding:0 10px
- }
-.animation {
- //width: 600px;
- //height: 0.06rem;
- .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: 3px;
- }
- }
- }
- /deep/.el-date-editor--datetime{
- width: 100%;
- }
- /deep/.el-input__inner{
- position: relative;
- width:140px;
- background-color: #2e4967;
- 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;
- 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;
- margin-right: 6px;
- }
- }
- .el-dialog-div {
- //height: 50vh!important;
- overflow: auto;
- //overflow: hidden;
+.form-echrts {
+ width: 100%;
+ border-top: 1px solid #396d83;
+ //margin: 10px 10px 10px 10px;
+ .from-search {
+ display: flex;
+ padding: 0.02rem;
+
+ > div {
+ margin-left: 10px
+ }
+
+ .pickerMon {
+ display: flex;
+
+ > div:first-child {
+ margin-right: 10px;
+ }
+
+ .pickerData {
+ flex: 1;
+ display: flex;
+
+ > span {
+ line-height: 22px
}
- #echarts {
- margin: 0;
- padding: 0;
- //height: 3rem;
- //border: 1px solid #396d83;
- //margin: 10px 10px 10px 10px;
+ .pickerTable {
+ margin-left: 3px;
}
+ }
}
+
+ /deep/ .el-date-editor--datetime {
+ width: 100%;
+ }
+
+ /deep/ .el-input__inner {
+ position: relative;
+ width: 1rem;
+ background-color: #2e4967;
+ color: #fff;
+ font-size: 0.08rem;
+ height: 0.15rem;
+ padding: 0;
+ border: none;
+ text-align: center;
+ z-index: 9999;
+ //padding-left:20px ;
+ //padding: 0!important;
+ }
+
+ /deep/ .el-input__icon {
+ display: block;
+ width: 1rem;
+ height: 0.15rem;
+ line-height: 0.15rem;
+ cursor: pointer;
+ font-size: 0;
+ }
+
+ input::-webkit-calendar-picker-indicator {
+ opacity: 100;
+ }
+
+ .detailbtn {
+ background-color: #2e4967;
+ text-align: center;
+ padding: 0 7px;
+ height: 0.15rem;
+ line-height: 0.15rem;
+ border-radius: 4px;
+ margin-right: 6px;
+ }
+ }
+
+ .el-dialog-div {
+ overflow: auto;
+ }
+
+ #echarts {
+ margin: 0;
+ padding: 0;
+ }
+}
</style>
--
Gitblit v1.8.0