| | |
| | | <template> |
| | | <div id="Tab"> |
| | | <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> |
| | | <div class="tab-scroll"> |
| | | <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> |
| | | <span class="time-select">{{ timeStart }}时——{{ timeEnd }}时</span> |
| | | </div> |
| | | <div class="form-echrts"> |
| | | <div class="from-search"> |
| | | <div class="pickerMon"> |
| | |
| | | <div class="detailbtn">明细表</div> |
| | | </div> |
| | | <div class="boxChart"> |
| | | <div style="width: 5rem;height:2rem;" id="echarts" ref="echartsHour"></div> |
| | | <div style="width: 5rem;height:1.5rem;" id="echarts" ref="echartsHour"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | timeStart: '', |
| | | timeEnd: '' |
| | | }, |
| | | timeEnd: dayjs().format('YYYY-MM-DD HH'), |
| | | timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH'), |
| | | chart: null, |
| | | jcdID: 1, |
| | | dataType: 2, |
| | |
| | | continue |
| | | } |
| | | |
| | | var MonTimeStr = d[i].MonTimeStr |
| | | const MonTimeStr = d[i].MonTimeStr |
| | | |
| | | // getWRW(d[i]) |
| | | |
| | |
| | | if (nameList.length === 0) { |
| | | nameList.push(d[i].PoltmtrlName.trim()) |
| | | dateList.push(strDate) |
| | | /* var data=new Array(); |
| | | /* let data=new Array(); |
| | | data.push(d.MonQty); */ |
| | | if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) { |
| | | d[i].MonQty = 0 |
| | |
| | | const newList = [] |
| | | |
| | | for (let i = 0; i < dataList.length; i++) { |
| | | var list = dataList[i].reverse() |
| | | const list = dataList[i].reverse() |
| | | newList.push(list) |
| | | } |
| | | dataList = newList |
| | |
| | | } |
| | | lengList.push(objTemp) |
| | | |
| | | var legend = lengList |
| | | var xdata = dateList.reverse() |
| | | var ydatas = [] |
| | | const legend = lengList |
| | | const xdata = dateList.reverse() |
| | | const ydatas = [] |
| | | |
| | | for (var j = 0; j < nameList.length; j++) { |
| | | for (let j = 0; j < nameList.length; j++) { |
| | | let zdcbcolor, zxcolor |
| | | if (nameList[j] === 'COD') { |
| | | zdcbcolor = 'red' |
| | |
| | | } else if (nameList[j] === '总磷') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#f48183' |
| | | } else if (nameList[j] === '总氮') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#d9f2f4' |
| | | } else { |
| | | } else if (nameList[j] === '废水流量') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#9ACD32' |
| | | } else { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#d9f2f4' |
| | | } |
| | | const ydata = { |
| | | name: nameList[j], |
| | |
| | | this.bzzList.push(this.bzz) |
| | | ydatas.push(ydata) |
| | | } |
| | | console.log(ydatas) |
| | | |
| | | var yname = '浓度(mg/l)' |
| | | const yname = '浓度(mg/l)' |
| | | |
| | | this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) |
| | | } |
| | | }, |
| | | effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) { |
| | | this.chart = this.$echarts.init(this.$refs.echartsHour) |
| | | console.log(this.chart) |
| | | this.chart.clear() |
| | | var dataUnit = '' |
| | | console.log(ydatas) |
| | | // this.chart.clear() |
| | | let 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 |
| | | const serLists = [] |
| | | for (let i = 0; i < ydatas.length; i++) { |
| | | // let zdcbcolor = ydatas[i].zdcbcolor |
| | | const bz = ydatas[i].bzz |
| | | let obj |
| | | if (bz) { |
| | | obj = { |
| | | name: ydatas[i].name, |
| | | symbol: 'circle', // 折点形状 |
| | | symbolSize: 10, // 大小 |
| | | smooth: false, // 直线 ,true 为曲线 |
| | | // itemStyle: { |
| | | // normal: { |
| | | // color: function (c) { // 根据value 显示不同的折点颜色 |
| | | // // var biaozhuiz |
| | | // let bzlist = this.bzzList |
| | | // for (let i = 0; i < this.bzzList.length; i++) { |
| | | // if (this.bzzList[i].name === c.seriesName) { |
| | | // this.bz = this.bzzList[i].bzhui |
| | | // } |
| | | // } |
| | | // if (c.value > this.bz) { |
| | | // return zdcbcolor |
| | | // } else if (c.value > this.bz * 0.9) { |
| | | // return '#FFA500' |
| | | // } else { |
| | | // return '#33c95f' |
| | | // } |
| | | // }, |
| | | // lineStyle: { // 折线的颜色 |
| | | // color: ydatas[i].zxcolor, |
| | | // width: 5 |
| | | // }, |
| | | // borderColor: 'black', // 折点边框的颜色 |
| | | // label: { // 显示值 |
| | | // show: false |
| | | // } |
| | | // } |
| | | // }, |
| | | itemStyle: { |
| | | normal: { |
| | | // color: function (c) { // 根据value 显示不同的折点颜色 |
| | | // // let biaozhuiz |
| | | // let bzlist = this.bzzList |
| | | // for (let i = 0; i < this.bzzList.length; i++) { |
| | | // if (this.bzzList[i].name === c.seriesName) { |
| | | // this.bz = this.bzzList[i].bzhui |
| | | // } |
| | | // } |
| | | // if (c.value > this.bz) { |
| | | // return zdcbcolor |
| | | // } else if (c.value > this.bz * 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: { // 平均值 , 和 指标上限 |
| | |
| | | // itemStyle: { |
| | | // normal: { |
| | | // color: function (c) { // 根据value 显示不同的折点颜色 |
| | | // // var biaozhuiz |
| | | // // let biaozhuiz |
| | | // for (let i = 0; i < this.bzzList.length; i++) { |
| | | // if (this.bzzList[i].name === c.seriesName) { |
| | | // this.bz = this.bzzList[i].bzhui |
| | |
| | | } |
| | | serLists.push(obj) |
| | | } |
| | | var option = { |
| | | const option = { |
| | | /* title: { |
| | | text: title, |
| | | }, */ |
| | |
| | | } |
| | | }, |
| | | formatter: function (params) { |
| | | var s = params[0].name + '<br />' |
| | | for (var i = 0; i < params.length; i++) { |
| | | // var name = params[i].name |
| | | let s = params[0].name + '<br />' |
| | | for (let i = 0; i < params.length; i++) { |
| | | // let name = params[i].name |
| | | // 图表title名称 |
| | | var seriesName = params[i].seriesName |
| | | const seriesName = params[i].seriesName |
| | | // 值 |
| | | var value = params[i].value |
| | | const value = params[i].value |
| | | |
| | | // var valueFliter = formatter(value) |
| | | var valueFliter = value |
| | | // let valueFliter = formatter(value) |
| | | const valueFliter = parseFloat(value).toFixed(2) |
| | | |
| | | var maker = params[i].marker |
| | | let 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 === '总磷') { |
| | | 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 { |
| | | } else if (seriesName === '废水流量') { |
| | | maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>' |
| | | } else { |
| | | maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>' |
| | | } |
| | | s += maker + seriesName + ':' + valueFliter + '<br />' |
| | | } |
| | |
| | | } |
| | | }, |
| | | grid: { // 网格 |
| | | top: '20%', |
| | | left: '5%' |
| | | top: '20%' |
| | | // left: '15%' |
| | | }, |
| | | legend: { |
| | | data: legend |
| | |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | axisLabel: { // x轴全部显示 |
| | | rotate: 20, |
| | | interval: 0, |
| | | // rotate: 20, |
| | | // interval: 0, |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | |
| | | type: 'value', |
| | | name: yname, |
| | | // max: function (value) { |
| | | // var max_val_list = [] // 所有显示折线的标准值 |
| | | // let 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] |
| | | // let 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: { |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | .tab-scroll { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .time-select { |
| | | //margin: 0 10px; |
| | | cursor: pointer; |
| | | padding: 5px; |
| | | border: 1px solid #2b87c8; |
| | | border-radius: 4px; |
| | | text-align: center; |
| | | color: #fff; |
| | | font-size: 11px; |
| | | width: 280px; |
| | | } |
| | | } |
| | | |
| | | .grid-content { |
| | | font-size: 8px; |
| | | background-color: #2e4967; |
| | |
| | | //margin: 10px 10px 10px 10px; |
| | | .from-search { |
| | | display: flex; |
| | | padding: 5px; |
| | | padding: 15px 0; |
| | | |
| | | > div { |
| | | margin-left: 10px |
| | | margin-left: 30px |
| | | } |
| | | |
| | | .pickerMon { |
| | |
| | | display: flex; |
| | | |
| | | > span { |
| | | line-height: 22px |
| | | line-height: 22px; |
| | | margin-right: 15px; |
| | | } |
| | | |
| | | .pickerTable { |