File was renamed from src/components/BaseNav/WasteWater/DayData.vue |
| | |
| | | <div class="echarts-box"> |
| | | <div class="tab-scroll"> |
| | | <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> |
| | | <span class="time-select">{{ formData.timeStart }}—{{ formData.timeEnd }}</span> |
| | | <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span> |
| | | </div> |
| | | <div class="echarts-form"> |
| | | <span class="demonstration">开始时间:</span> |
| | |
| | | <el-button>明细表</el-button> |
| | | </div> |
| | | <div class="echarts-chart"> |
| | | <div style="width:5rem;height:1.5rem;" ref="echartsday"></div> |
| | | <div style="width:5rem;height:1.5rem;" ref="echartsDay"></div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import mapApi from '@/api/mapApi' |
| | | |
| | | export default { |
| | | name: 'DayData', |
| | | name: 'WasteWaterDayChart', |
| | | components: { |
| | | // PublicDetailedList |
| | | PublicDataStandard |
| | | }, |
| | | data () { |
| | |
| | | let data |
| | | const bzh = [] |
| | | |
| | | // wrwIDS = [] |
| | | |
| | | for (let i = 0; i < d.length; i++) { |
| | | if (d[i].MonItemId === '29') { |
| | | continue |
| | | } |
| | | // 20190430 add 获取监测点id 污染物id 检测项id |
| | | // getWRW(d[i]) |
| | | const MonTimeStr = d[i].MonTimeStr |
| | | |
| | | const d1 = MonTimeStr.split('/') |
| | | // var d2=d1[2].split(' '); |
| | | // let d2=d1[2].split(' '); |
| | | let strDate |
| | | if (d1[1] > 9) { |
| | | // if(d2[0]>9){ |
| | |
| | | if (dateList.indexOf(strDate) < 0) { |
| | | dateList.push(strDate) |
| | | } |
| | | for (var j = 0; j < dataList.length; j++) { |
| | | for (let j = 0; j < dataList.length; j++) { |
| | | if (d[i].PoltmtrlName.trim() === dataList[j].name) { |
| | | dataList[j].data.push(d[i].MonQty) |
| | | } |
| | |
| | | } |
| | | // 处理数据结束 |
| | | |
| | | var divid = 'mychart1eff' |
| | | const lengList = [] |
| | | let objTemp |
| | | |
| | | var title = name |
| | | |
| | | var lengList = [] |
| | | var objTemp |
| | | |
| | | for (var l = 0; l < nameList.length; l++) { |
| | | var obj |
| | | var iconurl |
| | | for (let l = 0; l < nameList.length; l++) { |
| | | let obj |
| | | let iconurl |
| | | if (nameList[l] === 'COD') { |
| | | iconurl = 'image://../assets/imgs/legend/SO2.png' |
| | | } else if (nameList[l] === '氨氮') { |
| | |
| | | const ydatas = [] |
| | | |
| | | for (let j = 0; j < nameList.length; j++) { |
| | | var zdcbcolor, zxcolor |
| | | let zdcbcolor, zxcolor |
| | | if (nameList[j] === 'COD') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#fff21c' |
| | |
| | | } |
| | | |
| | | const yname = '浓度(mg/l)' |
| | | this.effChartShow(divid, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) |
| | | this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype) |
| | | } |
| | | }, |
| | | effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) { |
| | | this.chart = this.$echarts.init(this.$refs.echartsday) |
| | | effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) { |
| | | this.chart = this.$echarts.init(this.$refs.echartsDay) |
| | | this.chart.clear() |
| | | // console.log(this.chart) |
| | | this.chart.clear() |
| | | var dataUnit = '' |
| | | let dataUnit = '' |
| | | if (datatype === 1) { |
| | | dataUnit = '流量(m³/d)' |
| | | } else { |
| | | dataUnit = '流量(m³/h)' |
| | | } |
| | | const bzzList = this.bzzList |
| | | var serLists = [] |
| | | for (var i = 0; i < ydatas.length; i++) { |
| | | var zdcbcolor = ydatas[i].zxcolor |
| | | var bz = ydatas[i].bzz |
| | | var obj |
| | | const serLists = [] |
| | | for (let i = 0; i < ydatas.length; i++) { |
| | | const zdcbcolor = ydatas[i].zxcolor |
| | | const bz = ydatas[i].bzz |
| | | let obj |
| | | if (bz) { |
| | | obj = { |
| | | name: ydatas[i].name, |
| | |
| | | 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' |
| | | // } |
| | | // }, |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | let biaozhuiz |
| | | for (let 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' |
| | | } else { |
| | | return '#33c95f' |
| | | } |
| | | }, |
| | | lineStyle: { // 折线的颜色 |
| | | color: ydatas[i].zxcolor, |
| | | width: 5 |
| | |
| | | } |
| | | 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 = parseFloat(value).toFixed(2) |
| | | // 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 === '氨氮') { |
| | |
| | | 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: { |