From ac1c7ea6d29679b221847db076044caeaf27b84c Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期二, 13 四月 2021 11:27:50 +0800 Subject: [PATCH] 废水图表日数据功能添加 --- src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue | 8 src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue | 11 src/components/BaseNav/PublicBounced/GasComponents/EChartsDateWasteWater.vue | 686 +++++++++++++++++++++++++++++++ src/components/BaseNav/PublicBounced/PublicBounced.vue | 1 src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue | 610 +++++++++++++++++++++++++++ 5 files changed, 1,306 insertions(+), 10 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsDateWasteWater.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDateWasteWater.vue new file mode 100644 index 0000000..698c1b8 --- /dev/null +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsDateWasteWater.vue @@ -0,0 +1,686 @@ +<!-- 鏃ユ暟鎹� --> +<template> + <div id="Tab"> + <div class="animation"> + <div class="infomation"> + <span class="grid-content">姘哀鍖栫墿 :<i>29.93</i> 鏍囧噯 : 100</span> + <span class="grid-content">浜屾哀鍖栫~ : <i>17.34</i> 鏍囧噯 : 50</span> + <span class="grid-content">鐑熷皹 : <i>6.93</i> 鏍囧噯 : 30</span> + <span class="grid-content">搴熸皵娴侀噺 : <i>120343.18</i></span> + </div> + </div> + <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="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> + </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> + <div style="width:5rem;height:2rem;" 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> + </div> +</template> + +<script> +import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' + +export default { + name: 'ECharts', + components: { + PublicDetailedList + }, + data () { + return { + value1: '', + value2: '', + watchData: [], + dialogVisible: false, + myChar: null, + value: '', + formInline: { + user: '', + region: '' + }, + JsonDateWater: { + datatype: 1, + id: 'mychart1eff', + jcdID: '1020', + legend: [ + { + name: 'COD', + icon: 'image://../assets/imgs/legend/SO2.png', + textStyle: { color: '#ccc' }, + itemWidth: 20, + itemHeight: 5 + }, + { + name: '姘ㄦ爱', + icon: 'image://../assets/imgs/legend/NOX.png', + textStyle: { color: '#ccc' }, + itemWidth: 20, + itemHeight: 5 + }, + { + name: '搴熸按娴侀噺', + icon: 'image://../assets/imgs/legend/VOCs.png', + textStyle: { color: '#ccc' }, + itemWidth: 20, + itemHeight: 5 + } + ], + xdata: ['14鏃�', '15鏃�', '16鏃�', '17鏃�', '18鏃�', '19鏃�', '20鏃�', '21鏃�', '22鏃�', '23鏃�', '24鏃�', '25鏃�', '26鏃�', '27鏃�', '28鏃�', '29鏃�', '30鏃�', '31鏃�', '1 鏃�', '2 鏃�', '3 鏃�', '4 鏃�', '5 鏃�', '6 鏃�', '7 鏃�', '8 鏃�', '9 鏃�', '10鏃�', '11鏃�', '12鏃�'], + ydatas: [ + { + name: 'COD', + data: [11.626, 11.263, 13.186, 16.041, 20.021, 11.285, 19.546, 15.592, 16.603001, 23.582001, 23.325001, 21.077999, 20.959999, 18.955, 18.676001, 19.322001, 11.976, 11.92, 8.247, 6.38, 6.559, 10.25, 8.354, 7.562, 7.442, 7.543, 7.268, 6.255, 5.735, 8.115], + zdcbcolor: 'red', + zxcolor: '#fff21c', + bzz: 80 + }, + { + name: '姘ㄦ爱', + data: [0.224, 3.283, 1.715, 0.831, 4.168, 2.197, 0.451, 0.342, 0.601, 2.669, 1.503, 0.595, 0.649, 0.74, 0.631, 0.432, 0.488, 1.817, 0.579, 2.748, 0.527, 1.01, 0.441, 0.459, 0.582, 0.578, 0.575, 0.295, 0.297, 0.31], + zdcbcolor: 'red', + zxcolor: '#00B0F0', + bzz: 25 + }, + { + name: '搴熸按娴侀噺', + data: [5697.10791, 5623.143066, 5177.564941, 5162.195801, 4633.836914, 4198.133789, 4286.970215, 4162.566895, 2561.10791, 1808.824951, 2961.506104, 2758.715088, 3373.334961, 3282.522949, 3817.322998, 3382.928955, 4747.026855, 2645.947021, 3539.041992, 2540.4729, 4657.589844, 3618.812988, 5725.787109, 6082.206055, 6345.832031, 6470.28418, 5611.5, 5599.958984, 4924.814941, 5191.693848], + zdcbcolor: 'red', + zxcolor: '#9ACD32', + bzz: null + } + ], + yname: '娴撳害(mg/l)' + } + } + }, + methods: { + onSubmit () { + console.log('submit!') + this.effChartShow(this.JsonDateWater.id, this.JsonDateWater.title, this.JsonDateWater.legend, this.JsonDateWater.xdata, this.JsonDateWater.ydatas, this.JsonDateWater.yname, this.JsonDateWater.id, this.JsonDateWater.datatype) + }, + effChartShow: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { + this.myChart = this.echarts.init(this.$refs.main) + this.myChart.clear() + var dataUnit = '' + if (datatype == 1) { + dataUnit = '娴侀噺(m鲁/d)' + } else { + dataUnit = '娴侀噺(m鲁/h)' + } + + var serLists = [] + for (var i = 0; i < ydatas.length; i++) { + // var zdcbcolor = ydatas[i].zdcbcolor + var bz = ydatas[i].bzz + var obj + if (bz) { + obj = { + name: ydatas[i].name, + symbol: 'circle', // 鎶樼偣褰㈢姸 + symbolSize: 10, // 澶у皬 + smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + /* var biaozhuiz + for (var i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == c.seriesName) { + biaozhuiz = bzzList[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, + width: 5 + }, + borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + + }, + type: 'line', + data: ydatas[i].data, + markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 + symbol: 'none', + data: [{ + label: { + normal: { + position: 'end', + formatter: ''// ydatas[i].name+'鏍囧噯鍊�' //+'{c}' + } + }, + name: '鏍囧噯鍊�', + yAxis: bz, + lineStyle: { + color: ydatas[i].zxcolor, + type: 'dashed', + width: 2 + } + } + ] + } + } + } else { + obj = { + name: ydatas[i].name, + symbol: 'circle', // 鎶樼偣褰㈢姸 + symbolSize: 10, // 澶у皬 + smooth: false, // 鐩寸嚎 锛宼rue 涓烘洸绾� + yAxisIndex: 1, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + /* var biaozhuiz + for (var i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == c.seriesName) { + biaozhuiz = bzzList[i].bzhui + } + } + if (c.value > 9999999) { + return zdcbcolor + } else { + return '#33c95f' + } */ + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 5 + }, + borderColor: 'black', // 鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + + }, + type: 'line', + data: ydatas[i].data + } + } + serLists.push(obj) + } + var option = + { + /* title: { + text: title, + }, */ + tooltip: { // 鎻愮ず妗� + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + color: '#1a4245' + } + }, + formatter: function (params) { + var s = params[0].name + '<br />' + for (var i = 0; i < params.length; i++) { + // var name = params[i].name + // 鍥捐〃title鍚嶇О + var seriesName = params[i].seriesName + // 鍊� + var value = params[i].value + var valueFliter + if (value === 'NaN') { + valueFliter = '' + } else { + // valueFliter = formatter(value) + } + var maker = params[i].marker + if (seriesName == 'COD') { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' + } else if (seriesName == '姘ㄦ爱') { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>' + } else if (seriesName == '鎬荤7') { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>' + } else if (seriesName == '鎬绘爱') { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>' + } else { + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>' + } + s += maker + seriesName + ':' + valueFliter + '<br />' + } + return s + } + }, + toolbox: { // 鎵撳嵃绛夊伐鍏� + show: false, + feature: { + saveAsImage: {} + } + }, + grid: { // 缃戞牸 + top: '20%', + left: '5%' + }, + legend: { + data: legend + }, + 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 + } + }], + xAxis: { // x 杞磋缃� + type: 'category', + boundaryGap: false, + axisLabel: { // x杞村叏閮ㄦ樉绀� + rotate: 20, + interval: 0, + textStyle: { + color: '#fff' + } + }, + splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎 + show: true, + lineStyle: { + type: 'dashed' + } + }, + axisTick: { // x 杞村埢搴︽樉绀� + show: false + }, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + }, + data: xdata + }, + yAxis: [{ + type: 'value', + 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' + } + }, + axisPointer: { + snap: true + }, + splitLine: { + show: false + }, // y杞� 缃戞牸绾夸笉鏄剧ず, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }, { + type: 'value', + name: dataUnit, + axisLabel: { + formatter: '{value}', + textStyle: { + color: '#fff' + } + }, + axisPointer: { + snap: true + }, + splitLine: { + show: false + }, // y杞� 缃戞牸绾夸笉鏄剧ず, + // inverse: true, + // nameLocation: 'start', + // max:500, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }], + series: serLists + } + this.myChart.setOption(option) + + /* myChart.on('legendselectchanged', function (params) { + // console.log(params); + var StdVal = null + var op = { yAxis: {} } + if (params.selected.COD) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == 'COD') { + StdVal = bzzList[i].bzhui + } + } + } + + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } else if (params.selected['鎬绘爱']) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == '鎬绘爱') { + StdVal = bzzList[i].bzhui + } + } + } + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } else if (params.selected['姘ㄦ爱']) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == '姘ㄦ爱') { + StdVal = bzzList[i].bzhui + } + } + } + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } else if (params.selected['鎬荤7']) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == '鎬荤7') { + StdVal = bzzList[i].bzhui + } + } + } + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } + + myChart.setOption(op) + }) */ + + /** + * 瑙e喅myChart.on('click',function(){...})浜嬩欢閲嶅瑙﹀彂鐨勯棶棰� + * Date: 20200720 + */ + this.myChart.off('click') + + /** + * 鍥炬爣鐐瑰嚮浜嬩欢 + * 20190426 add + * */ + /* myChart.on('click', function (params) { + // console.log('[鐩戞祴鐐筰d=%s]',jcdID) + + // 鑾峰彇褰撳墠鏃堕棿锛屽皬鏃� + var nowHours = new Date().Format('hh') + // console.log('[褰撳墠灏忔椂鏄細%s]',nowHours); + + // 鐐瑰嚮鎶樼嚎鍥炬姌鐐瑰搴旂殑鏃堕棿 + // 闇�瑕佷紶鐨勬椂闂翠负 + var _date = null + if (params.name.indexOf('鏃�') != -1) { + var hours = params.name.substring(0, params.name.indexOf('鏃�')) + // console.log('[鍧愭爣杞村搴旂殑鏃堕棿涓�%s]',hours); + + if (parseInt(hours) < parseInt(nowHours)) { + _date = new Date().Format('yyyy-MM-dd') + ' ' + hours + ':00:00' + } else { + var currentDate = new Date() + // 24灏忔椂涔嬪墠鏃堕棿 + var stringDate = new Date(currentDate.getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd') + + _date = stringDate + ' ' + hours + ':00:00' + } + + // console.log('[闇�瑕佷紶閫掔殑鏃堕棿涓猴細%s]',_date); + } else if (params.name.indexOf('鏃�') != -1) { + var day = params.name.substring(0, params.name.indexOf('鏃�') - 1) + _date = new Date().Format('yyyy-MM') + '-' + day.trim() + } + + // todo 璋冩帴鍙� 鏌ュ嚟璇� + + if (params.color != 'red') { + var poltMtrlId + var monItemId = 28 + for (var i = 0; i < wrwIDS.length; i++) { + if (params.seriesName == wrwIDS[i].name) { + poltMtrlId = wrwIDS[i].id + } + } + + getCBMX(jcdID, poltMtrlId, monItemId, _date, function (res) { + createDivByMouse(res, params.event) + }) + } + // createDivByMouse("s",params.event); + }) */ + }, + drawChart: function () { + window.onresize = function () { + var h1 = document.documentElement.clientHeight// 鑾峰彇灞忓箷鐨勯珮搴� + if (h1 > 700) { + this.myChart.getDom().style.height = 3 + 'rem' + this.myChart.getDom().style.width = 6 + 'rem' + } else { + this.myChart.getDom().style.height = 3 + 'rem' + this.myChart.getDom().style.width = 6 + 'rem' + } + this.myChart.resize() + } + } + } +} +</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; + } + + #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/EChartsHourWasteWater.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue index 3a14a98..1752528 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsHourWasteWater.vue @@ -3,10 +3,9 @@ <div id="Tab"> <div class="infomation"> <div> - <span class="grid-content">姘哀鍖栫墿 :<i>29.93</i> 鏍囧噯 : 100</span> - <span class="grid-content">浜屾哀鍖栫~ : <i>17.34</i> 鏍囧噯 : 50</span> - <span class="grid-content">鐑熷皹 : <i>6.93</i> 鏍囧噯 : 30</span> - <span class="grid-content">搴熸皵娴侀噺 : <i>120343.18</i></span> + <span class="grid-content">COD :<i>6.039</i> 鏍囧噯 : 100</span> + <span class="grid-content">姘ㄦ爱 : <i>0.38</i> 鏍囧噯 : 50</span> + <span class="grid-content">搴熸按娴侀噺 : <i>254.643997</i></span> </div> </div> <div class="form-echrts"> @@ -83,7 +82,7 @@ timeEnd: '' }, myChart: null, - JsonWater: { + JsonHourWater: { id: 'mycharteff', title: '', datatype: 2, @@ -132,7 +131,7 @@ console.log(1) // const date = [this.value1, this.value2, this.formInline.region] - this.effChartShow(this.JsonWater.id, this.JsonWater.title, this.JsonWater.legend, this.JsonWater.xdata, this.JsonWater.ydatas, this.JsonWater.yname, this.JsonWater.id, this.JsonWater.datatype) + this.effChartShow(this.JsonHourWater.id, this.JsonHourWater.title, this.JsonHourWater.legend, this.JsonHourWater.xdata, this.JsonHourWater.ydatas, this.JsonHourWater.yname, this.JsonHourWater.id, this.JsonHourWater.datatype) // console.log(date) // if (date) { // var date1 = new Date(date) diff --git a/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue b/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue new file mode 100644 index 0000000..a9220cc --- /dev/null +++ b/src/components/BaseNav/PublicBounced/GasComponents/EChartsRealWasteWater.vue @@ -0,0 +1,610 @@ +<!-- 鏃ユ暟鎹� --> +<template> + <div id="Tab"> + <div class="animation"> + <div class="infomation"> + <span class="grid-content">姘哀鍖栫墿 :<i>29.93</i> 鏍囧噯 : 100</span> + <span class="grid-content">浜屾哀鍖栫~ : <i>17.34</i> 鏍囧噯 : 50</span> + <span class="grid-content">鐑熷皹 : <i>6.93</i> 鏍囧噯 : 30</span> + <span class="grid-content">搴熸皵娴侀噺 : <i>120343.18</i></span> + </div> + </div> + <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="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> + </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> + <div style="width:5rem;height:2rem;" 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> + </div> +</template> + +<script> +import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' + +export default { + name: 'ECharts', + components: { + PublicDetailedList + }, + data () { + return { + value1: '', + value2: '', + watchData: [], + dialogVisible: false, + myChar: null, + value: '', + formInline: { + user: '', + region: '' + }, + JsonRealWater: { + datatype: 1, + id: 'mychart1eff', + jcdID: '1020', + legend: [ + { + name: 'COD', + icon: 'image://../assets/imgs/legend/SO2.png', + textStyle: { color: '#ccc' }, + itemWidth: 20, + itemHeight: 5 + }, + { + name: '姘ㄦ爱', + icon: 'image://../assets/imgs/legend/NOX.png', + textStyle: { color: '#ccc' }, + itemWidth: 20, + itemHeight: 5 + }, + { + name: '搴熸按娴侀噺', + icon: 'image://../assets/imgs/legend/VOCs.png', + textStyle: { color: '#ccc' }, + itemWidth: 20, + itemHeight: 5 + } + ], + xdata: ['14鏃�', '15鏃�', '16鏃�', '17鏃�', '18鏃�', '19鏃�', '20鏃�', '21鏃�', '22鏃�', '23鏃�', '24鏃�', '25鏃�', '26鏃�', '27鏃�', '28鏃�', '29鏃�', '30鏃�', '31鏃�', '1 鏃�', '2 鏃�', '3 鏃�', '4 鏃�', '5 鏃�', '6 鏃�', '7 鏃�', '8 鏃�', '9 鏃�', '10鏃�', '11鏃�', '12鏃�'], + ydatas: [ + { + name: 'COD', + data: [11.626, 11.263, 13.186, 16.041, 20.021, 11.285, 19.546, 15.592, 16.603001, 23.582001, 23.325001, 21.077999, 20.959999, 18.955, 18.676001, 19.322001, 11.976, 11.92, 8.247, 6.38, 6.559, 10.25, 8.354, 7.562, 7.442, 7.543, 7.268, 6.255, 5.735, 8.115], + zdcbcolor: 'red', + zxcolor: '#fff21c', + bzz: 80 + }, + { + name: '姘ㄦ爱', + data: [0.224, 3.283, 1.715, 0.831, 4.168, 2.197, 0.451, 0.342, 0.601, 2.669, 1.503, 0.595, 0.649, 0.74, 0.631, 0.432, 0.488, 1.817, 0.579, 2.748, 0.527, 1.01, 0.441, 0.459, 0.582, 0.578, 0.575, 0.295, 0.297, 0.31], + zdcbcolor: 'red', + zxcolor: '#00B0F0', + bzz: 25 + }, + { + name: '搴熸按娴侀噺', + data: [5697.10791, 5623.143066, 5177.564941, 5162.195801, 4633.836914, 4198.133789, 4286.970215, 4162.566895, 2561.10791, 1808.824951, 2961.506104, 2758.715088, 3373.334961, 3282.522949, 3817.322998, 3382.928955, 4747.026855, 2645.947021, 3539.041992, 2540.4729, 4657.589844, 3618.812988, 5725.787109, 6082.206055, 6345.832031, 6470.28418, 5611.5, 5599.958984, 4924.814941, 5191.693848], + zdcbcolor: 'red', + zxcolor: '#9ACD32', + bzz: null + } + ], + yname: '娴撳害(mg/l)' + } + } + }, + methods: { + onSubmit () { + console.log('submit!') + }, + DrawRealTimeDateChart: function (id, title, legend, ydatas, yname) { + this.myChart = this.echarts.init(this.$refs.main) + var serLists = [] + for (var i = 0; i < ydatas.length; i++) { + // var zdcbcolor = ydatas[i].zdcbcolor + var bz = ydatas[i].bzz + var obj + if (bz) { + obj = { + name: ydatas[i].name, + // symbol:'circle', // 鎶樼偣褰㈢姸 + // symbolSize: 3, //澶у皬 + smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + /* var biaozhuiz + for (var i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == c.seriesName) { + biaozhuiz = bzzList[i].bzhui + } + } + if (c.value[1] > biaozhuiz) { + return zdcbcolor + } else if (c.value[1] > biaozhuiz * 0.9) { + return '#FFA500' + } + { + return '#33c95f' + } */ + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 2 + }, + // borderColor:'black', //鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + + }, + type: 'line', + data: ydatas[i].data, + markLine: { // 骞冲潎鍊� 锛� 鍜� 鎸囨爣涓婇檺 + symbol: 'none', + data: [{ + label: { + normal: { + position: 'end', + formatter: ''// ydatas[i].name+'鏍囧噯鍊�' //+'{c}' + } + }, + name: '鏍囧噯鍊�', + yAxis: bz, + lineStyle: { + color: ydatas[i].zxcolor, + type: 'dashed', + width: 2 + } + } + ] + } + } + } else { + obj = { + name: ydatas[i].name, + // symbol:'circle', // 鎶樼偣褰㈢姸 + // symbolSize: 3, //澶у皬 + smooth: true, // 鐩寸嚎 锛宼rue 涓烘洸绾� + yAxisIndex: 1, + itemStyle: { + normal: { + color: function (c) { // 鏍规嵁value 鏄剧ず涓嶅悓鐨勬姌鐐归鑹� + return '#33c95f' + }, + lineStyle: { // 鎶樼嚎鐨勯鑹� + color: ydatas[i].zxcolor, + width: 2 + }, + // borderColor:'black', //鎶樼偣杈规鐨勯鑹� + label: { // 鏄剧ず鍊� + show: false + } + } + + }, + type: 'line', + data: ydatas[i].data + } + } + + if (ydatas[i].name === '搴熸按娴侀噺' || ydatas[i].name === '搴熸按') { + obj.yAxisIndex = 1 + } + serLists.push(obj) + } + + var option = { + /* title: { + text: title, + }, */ + tooltip: { // 鎻愮ず妗� + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + color: '#1a4245' + } + }, + formatter: function (params) { + var s = params[0].name + '<br />' + for (var i = 0; i < params.length; i++) { + // var name = params[i].name + // 鍥捐〃title鍚嶇О + var seriesName = params[i].seriesName + // 鍊� + var value = params[i].value[1] + var valueFliter + if (value === 'NaN') { + valueFliter = '' + } else { + // valueFliter = formatter(value) + } + var maker = params[i].marker + var colo = '' + switch (seriesName) { + case 'COD': + colo = '#fff21c' + break + case '姘ㄦ爱': + colo = '#00B0F0' + break + case '鎬荤7': + colo = '#f48183' + break + case '鎬绘爱': + colo = '#e0ffff' + break + default: + colo = '#9ACD32' + break + } + maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>' + s += maker + seriesName + ':' + valueFliter + '<br />' + } + return s + } + }, + toolbox: { // 鎵撳嵃绛夊伐鍏� + show: false, + feature: { + saveAsImage: {} + } + }, + grid: { // 缃戞牸 + top: '20%' + }, + legend: { + data: legend + }, + 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 + } + }], + xAxis: { // x 杞磋缃� + type: 'time', + boundaryGap: false, + axisLabel: { // x杞村叏閮ㄦ樉绀� + // rotate: 30, + margin: 6, + interval: 0, + textStyle: { + color: '#fff' + } + }, + splitLine: { // 缃戞牸鍨傜洿绾夸负 铏氱嚎 + show: true, + lineStyle: { + type: 'dashed' + } + }, + axisTick: { // x 杞村埢搴︽樉绀� + show: false + }, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + // data: xdata + }, + yAxis: [{ + type: 'value', + name: yname, + max: function (value) { + return parseInt(value.max + 30) + }, + axisLabel: { + formatter: '{value}', + textStyle: { + color: '#fff' + } + }, + axisPointer: { + snap: true + }, + splitLine: { + show: false + }, // y杞� 缃戞牸绾夸笉鏄剧ず, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }, { + type: 'value', + name: dataUnit, + axisLabel: { + formatter: '{value}', + textStyle: { + color: '#fff' + } + }, + axisPointer: { + snap: true + }, + splitLine: { + show: false + }, // y杞� 缃戞牸绾夸笉鏄剧ず, + // inverse: true, + // nameLocation: 'start', + // max:500, + axisLine: { + lineStyle: { + color: '#FFFFFF', + width: 1// 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑 + } + } + }], + series: serLists + } + RealTimeChart.setOption(option) + RealTimeChart.on('legendselectchanged', function (params) { + // console.log(params); + var StdVal = null + var op = { yAxis: {} } + if (params.selected.COD) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == 'COD') { + StdVal = bzzList[i].bzhui + } + } + } + + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } else if (params.selected['鎬绘爱']) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == '鎬绘爱') { + StdVal = bzzList[i].bzhui + } + } + } + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } else if (params.selected['姘ㄦ爱']) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == '姘ㄦ爱') { + StdVal = bzzList[i].bzhui + } + } + } + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } else if (params.selected['鎬荤7']) { + if (bzzList && bzzList.length > 0) { + for (let i = 0; i < bzzList.length; i++) { + if (bzzList[i].name == '鎬荤7') { + StdVal = bzzList[i].bzhui + } + } + } + op.yAxis.max = function (value) { + var ma + if (value.max < StdVal) { + ma = StdVal + } else { + ma = Math.ceil(value.max) + } + return ma + } + } + RealTimeChart.setOption(op) + }) + }, + drawChart: function () { + window.onresize = function () { + var h1 = document.documentElement.clientHeight// 鑾峰彇灞忓箷鐨勯珮搴� + if (h1 > 700) { + this.myChart.getDom().style.height = 3 + 'rem' + this.myChart.getDom().style.width = 6 + 'rem' + } else { + this.myChart.getDom().style.height = 3 + 'rem' + this.myChart.getDom().style.width = 6 + 'rem' + } + this.myChart.resize() + } + } + } +} +</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; + } + + #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 baf09e5..b346f75 100644 --- a/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue +++ b/src/components/BaseNav/PublicBounced/GasComponents/PublicChart.vue @@ -5,11 +5,12 @@ <div class="border_corner border_corner_left_bottom"></div> <div class="border_corner border_corner_right_bottom"></div> <ul class="tab"> - <li :class="active==0?'hover':''" @click='tabTaggle("EChartsHour",0)'>瀹炴椂鏁版嵁</li> + <li :class="active==0?'hover':''" @click='tabTaggle("ECharts",0)'>瀹炴椂鏁版嵁</li> <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>灏忔椂鏁版嵁</li> <li :class="active==2?'hover':''" @click='tabTaggle("EChartsHourWasteWater",2)'>鏃ユ暟鎹�</li> <li :class="active==3?'hover':''" @click='tabTaggle("ECharts",3)'>浜哄伐鏁版嵁</li> </ul> + <component :is="currentTab"></component> <div class="legend" > <span >姝e父</span> <i style=" background: #4ec99c;"></i> @@ -18,7 +19,6 @@ <span >瓒呮爣</span> <i style=" background: orange;"></i> </div> - <component :is="currentTab"></component> </div> </template> @@ -26,13 +26,15 @@ import EChartsHour from './EChartsHour' // import EChartsDate from './EChartsDate' import EChartsHourWasteWater from './EChartsHourWasteWater' +import EChartsDateWasteWater from './EChartsDateWasteWater' export default { name: 'PublicChart', components: { EChartsHour, // EChartsDate - EChartsHourWasteWater + EChartsHourWasteWater, + EChartsDateWasteWater }, data () { return { diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index 18a3f0d..abc4da6 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -37,7 +37,6 @@ export default { name: 'PublicBounced', components: { - // Echarts, PublicTabs, PublicTable, PublicChart, -- Gitblit v1.8.0