From dde5df08bdcecbbc61f1a4a004803b693cc660aa Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期三, 14 四月 2021 15:29:26 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/common/echarts/EChartsDateWasteWater.vue | 711 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 711 insertions(+), 0 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/common/echarts/EChartsDateWasteWater.vue b/src/components/BaseNav/PublicBounced/common/echarts/EChartsDateWasteWater.vue new file mode 100644 index 0000000..05af4e3 --- /dev/null +++ b/src/components/BaseNav/PublicBounced/common/echarts/EChartsDateWasteWater.vue @@ -0,0 +1,711 @@ +<!-- 鏃ユ暟鎹� --> +<template> + <div id="Tab"> + <div class="animation"> + <div class="infomation"> + <span class="grid-content">COD :<i style="color: #e8ee0b">8.115</i> 鏍囧噯 : <i style="color: #fff">20</i></span> + <span class="grid-content">姘ㄦ爱 : <i style="color: #e8ee0b">0.31</i> 鏍囧噯 : <i style="color: #fff">5</i></span> + <span class="grid-content">pH : <i style="color: #e8ee0b">7.673</i> 鏍囧噯 : <i style="color: #fff">9</i></span> + <span class="grid-content">搴熸按娴侀噺 : <i style="color: #e8ee0b">5191.693848</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="formInline.timeStart"> + </el-date-picker> + </span> + </div> + <div class="pickerData"> + <span >缁撴潫鏃堕棿:</span> + <span class="pickerTable"> + <el-date-picker type="datetime" v-model="formInline.timeEnd"> + </el-date-picker> + </span> + </div> + </div> +<!-- <div>--> +<!-- 閲囨牱鐐规暟:--> +<!-- <el-select v-model="formInline.region">--> +<!-- <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 class="boxChart"> + <div style="width:5rem;height:1.5rem" id="popChart" ref="main"> + </div> + </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: 260px"> + <public-detailed-list v-bind="$attrs"></public-detailed-list> + </div> + </el-dialog> + </div> +</template> + +<script> +import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' + +export default { + name: 'EChartsDateWasteWater', + components: { + PublicDetailedList + }, + data () { + return { + watchData: [], + dialogVisible: false, + myChar: null, + value: '', + formInline: { + user: '', + region: '', + timeStart: '2021-03-14 00:00:00', + timeEnd: '2021-04-12 00:00:00' + }, + 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: 'pH', + icon: 'image://../assets/imgs/legend/WenDu.png', + textStyle: { color: '#CCC' }, + itemWidth: 20, + itemHeight: 5 + }, + { + name: '搴熸按娴侀噺', + icon: 'image://../assets/imgs/legend/VOCs.png', + textStyle: { color: '#CCC' }, + itemWidth: 20, + itemHeight: 5 + } + ], + xdata: ['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鏃�', '13鏃�'], + ydatas: [ + { + name: 'COD', + data: [18.271, 18.806, 18.615, 20.938, 18.933001, 18.789, 17.612, 17.319, 18.403999, 17.724001, 17.450001, 17.299, 17.906, 17.761, 16.913, 17.087, 16.094, 13.851, 15.783, 15.785, 15.503, 17.163, 15.008, 12.056, 14.812, 15.243, 15.562, 13.034, 11.11, 10.746], + zdcbcolor: 'red', + zxcolor: '#fff21c', + bzz: 25 + }, + { + name: '姘ㄦ爱', + data: [0.1, 0.169, 0.125, 0.266, 0.126, 0.156, 0.174, 0.161, 0.224, 0.178, 0.166, 0.152, 0.146, 0.138, 0.125, 0.171, 0.145, 0.147, 0.123, 0.117, 0.109, 0.106, 0.159, 0.121, 0.133, 0.181, 0.208, 0.115, 0.108, 0.162], + zdcbcolor: 'red', + zxcolor: '#00B0F0', + bzz: 5 + }, + { + name: 'pH', + data: [7.461, 7.486, 7.495, 7.498, 7.512, 7.526, 7.535, 7.555, 7.585, 7.585, 7.512, 7.365, 7.334, 7.349, 7.367, 7.397, 7.399, 7.384, 7.424, 7.466, 7.496, 7.527, 7.599, 7.612, 7.613, 7.614, 7.618, 7.644, 7.661, 7.673], + zdcbcolor: 'red', + zxcolor: '#F206FF', + bzz: 9 + }, + { + name: '搴熸按娴侀噺', + data: [49.395836, 49.337986, 48.906597, 51.755833, 48.786461, 48.124866, 47.832222, 70.607361, 77.931816, 63.092083, 70.620911, 63.302162, 66.679314, 66.482918, 81.546745, 95.860214, 87.731102, 53.503544, 63.230419, 70.389374, 63.531391, 63.028618, 63.168613, 63.55653, 63.631458, 51.364937, 28.757296, 31.669098, 26.574379, 30.628475], + zdcbcolor: 'red', + zxcolor: '#9ACD32', + bzz: null + } + ], + yname: '娴撳害(mg/l)' + } + } + }, + mounted () { + this.onSubmit() + }, + methods: { + onSubmit () { + 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: 4 + }, + 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: 4 + }, + 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: '7%', + bottom: '10%' + }, + 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, + nameTextStyle: { + fontSize: 10 + }, + axisLabel: { // x杞村叏閮ㄦ樉绀� + rotate: 20, + interval: 0, + textStyle: { + color: '#fff', + fontSize: 10 + } + }, + 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 +} +.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: #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; + } + + #popChart { + margin: 0; + padding: 0; + } +} +</style> -- Gitblit v1.8.0