| | |
| | | <el-option label="100" value="100"></el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="detailbtn" @click="onSubmit">查询</div> |
| | | <div class="detailbtn" @click="querySearch">查询</div> |
| | | </div> |
| | | <div style="width:5rem;height:1.5rem;" ref="echarts"></div> |
| | | </div> |
| | |
| | | // 开始 /结束 时间 和采样点值的绑定值数据 |
| | | formInline: { |
| | | region: '', |
| | | timeStart: '', |
| | | timeEnd: '' |
| | | }, |
| | | |
| | | // echarts的options数据传入 |
| | | echartsOptions: { |
| | | legend: [], |
| | | ydatas: [], |
| | | yname: ' 浓度(mg/m³)' |
| | | timeEnd: '', |
| | | timeStart: '' |
| | | }, |
| | | |
| | | // 实时数据列表 |
| | | RealTimeDataList: [], |
| | | EXHRealTimeDataList: [], |
| | | bzz: null, |
| | | bzzList: [] |
| | | exhbzz: [], |
| | | exhbzzList: [] |
| | | } |
| | | }, |
| | | mounted () { |
| | |
| | | }, |
| | | methods: { |
| | | // 点击查询按钮功能 |
| | | onSubmit () { |
| | | this.DrawEXHRealTimeDateChart() |
| | | querySearch () { |
| | | // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间 |
| | | this.formInline.timeEnd = dayjs().format('YYYYMMDD HHmmss') |
| | | this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss') |
| | | this.initEchartsData() |
| | | }, |
| | | // 初始化数据获取echarts的options数据 |
| | | async initEchartsData () { |
| | | // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间 |
| | | this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss') |
| | | const data = { |
| | | $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM', |
| | | $startTime: this.formInline.timeEnd, |
| | |
| | | // 处理数据开始 |
| | | const d = res |
| | | const nameList = [] // 存放图例 |
| | | // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} |
| | | let data = {} |
| | | // 存放data的数组 |
| | | let datalist |
| | | // var bzh = [] |
| | | |
| | | let data // 数据类型// let data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]} |
| | | let datalist // 存放data的数组 |
| | | // let bzh = [] |
| | | for (let i = 0; i < d.length; i++) { |
| | | if (d[i].ErrorMessage != null) { |
| | | continue |
| | | } |
| | | // const name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName |
| | | // 临时name数据 |
| | | const nameListTemp = [ |
| | | { |
| | | 'TJIP45.lscl2tbAIA-10505-1': '氮氧化物', |
| | | 'TJIP45.lscl2tbAIA-10505-2': '烟尘', |
| | | 'TJIP45.lscl2tb552AISA11202A': '二氧化磷', |
| | | 'TJIP45.lscl2tb552AISA11201B': 'ph', |
| | | 'TJIP45.lscl2tb552AI10710': '二氧化碳' |
| | | 'TJIP45.y2h508CEMS01NOX': '氮氧化物', |
| | | 'TJIP45.y2h508CEMS01SO2': '烟尘', |
| | | 'TJIP45.y2h508CEMS01F': '二氧化磷', |
| | | 'TJIP45.y2h508CEMS01PM': 'ph' |
| | | // 'TJIP45.lscl2tb552AI10710': '二氧化碳' |
| | | } |
| | | ] |
| | | |
| | | const name = nameListTemp[0][d[i].UnionTagCode] |
| | | |
| | | if (nameList.length === 0) { |
| | |
| | | name: name, |
| | | data: [data] |
| | | } |
| | | |
| | | this.RealTimeDataList.push(datalist) |
| | | // console.log(this.RealTimeDataList) |
| | | |
| | | // bzh.push(d[i].StdValue); |
| | | this.EXHRealTimeDataList.push(datalist) |
| | | } else if (nameList.indexOf(name) < 0) { |
| | | nameList.push(name) |
| | | // bzh.push(d[i].StdValue); |
| | | |
| | | const newdate = new Date(d[i].ReadTime) |
| | | |
| | | data = { |
| | | name: name, |
| | | value: [newdate, d[i].TagValue] |
| | |
| | | name: name, |
| | | data: [data] |
| | | } |
| | | this.RealTimeDataList.push(datalist) |
| | | this.EXHRealTimeDataList.push(datalist) |
| | | } else if (i === d.length - 1) { |
| | | if (nameList.indexOf(name) < 0) { |
| | | nameList.push(name) |
| | | // bzh.push(d[i].StdValue); |
| | | const newdate = new Date(d[i].ReadTime) |
| | | data = { |
| | | name: name, |
| | |
| | | name: name, |
| | | data: [data] |
| | | } |
| | | this.RealTimeDataList.push(datalist) |
| | | this.EXHRealTimeDataList.push(datalist) |
| | | } else { |
| | | const newdate = new Date(d[i].ReadTime) |
| | | data = { |
| | | name: name, |
| | | value: [newdate, d[i].TagValue] |
| | | } |
| | | for (var k = 0; k < this.RealTimeDataList.length; k++) { |
| | | if (this.RealTimeDataList[k].name === name) { |
| | | this.RealTimeDataList[k].data.push(data) |
| | | for (let k = 0; k < this.EXHRealTimeDataList.length; k++) { |
| | | if (this.EXHRealTimeDataList[k].name === name) { |
| | | this.EXHRealTimeDataList[k].data.push(data) |
| | | } |
| | | } |
| | | } |
| | |
| | | name: name, |
| | | value: [newdate, d[i].TagValue] |
| | | } |
| | | for (let k = 0; k < this.RealTimeDataList.length; k++) { |
| | | if (this.RealTimeDataList[k].name === name) { |
| | | this.RealTimeDataList[k].data.push(data) |
| | | for (let k = 0; k < this.EXHRealTimeDataList.length; k++) { |
| | | if (this.EXHRealTimeDataList[k].name === name) { |
| | | this.EXHRealTimeDataList[k].data.push(data) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | // console.log(this.EXHRealTimeDataList) |
| | | |
| | | const divid = 'mycharteff_second' |
| | | const divid = 'mychart_ss' |
| | | const title = name |
| | | |
| | | const lengList = [] |
| | | let objTemp = [] |
| | | // console.log(objTemp) |
| | | let objTemp |
| | | |
| | | for (let l = 0; l < nameList.length; l++) { |
| | | let obj |
| | |
| | | iconurl = 'image://../assets/imgs/legend/VOCs.png' |
| | | } |
| | | |
| | | if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后 |
| | | // eslint-disable-next-line no-const-assign |
| | | if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后 |
| | | objTemp = { |
| | | name: nameList[l], |
| | | icon: iconurl, |
| | |
| | | } |
| | | lengList.push(obj) |
| | | } |
| | | // console.log(lengList) |
| | | } |
| | | lengList.push(objTemp) |
| | | |
| | | const legend = lengList |
| | | // const xdata = dateList.reverse(); |
| | | const ydatas = [] |
| | | |
| | | for (let j = 0; j < nameList.length; j++) { |
| | |
| | | // 临时数据 |
| | | const BBZMAPPING = [ |
| | | { |
| | | COD: 35, |
| | | 废水流量: null, |
| | | 二氧化碳: 35, |
| | | ph: 9, |
| | | 总氮: 15, |
| | | 总磷: 0.3, |
| | | 黯淡: 3 |
| | | 氨氮: 3 |
| | | } |
| | | ] |
| | | for (let m = 0; m < this.RealTimeDataList.length; m++) { |
| | | for (let m = 0; m < this.EXHRealTimeDataList.length; m++) { |
| | | let stdValue = null |
| | | if (this.RealTimeDataList[m].name === nameList[j]) { |
| | | // for (let p in BBZMAPPING) { |
| | | // stdValue = BBZMAPPING[this.RealTimeDataList[m].name] |
| | | // } |
| | | BBZMAPPING.forEach((item) => { |
| | | stdValue = BBZMAPPING[this.RealTimeDataList[m].name] |
| | | }) |
| | | if (this.EXHRealTimeDataList[m].name === nameList[j]) { |
| | | for (const i in this.BBZMAPPING) { |
| | | console.log(i) |
| | | stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name] |
| | | } |
| | | |
| | | ydata = { |
| | | name: nameList[j], |
| | | data: this.RealTimeDataList[m].data, |
| | | data: this.EXHRealTimeDataList[m].data, |
| | | zdcbcolor: zdcbcolor, |
| | | zxcolor: zxcolor, |
| | | bzz: stdValue |
| | | } |
| | | this.bzz = { |
| | | this.exhbzz = { |
| | | name: nameList[j], |
| | | bzhui: stdValue |
| | | } |
| | | this.bzzList.push(this.bzz) |
| | | this.exhbzzList.push(this.exhbzz) |
| | | ydatas.push(ydata) |
| | | } |
| | | } |
| | | } |
| | | const yname = '浓度(mg/l)' |
| | | |
| | | const yname = '浓度(mg/m³)' |
| | | |
| | | this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname) |
| | | // |
| | | // this.IntervalRealTimeDate(id, unionTagCodeList, BBZMAPPING) |
| | | this.IntervalRealTimeDate() |
| | | } |
| | | }, |
| | | // 获取数据用于echarts图表绘制 |
| | | DrawRealTimeDateChart (id, title, legend, ydatas, yname) { |
| | | // console.log(ydatas) |
| | | this.myChart = this.$echarts.init(this.$refs.echarts) |
| | | const serLists = [] |
| | | let dataUnit |
| | |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | let biaozhuiz |
| | | for (var i = 0; i < this.bzzList.length; i++) { |
| | | for (let i = 0; i < this.bzzList.length; i++) { |
| | | if (this.bzzList[i].name === c.seriesName) { |
| | | biaozhuiz = this.bzzList[i].bzhui |
| | | } |
| | |
| | | } |
| | | } |
| | | |
| | | if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') { |
| | | if (ydatas[i].name === '氮氧化物' || ydatas[i].name === '废气') { |
| | | obj.yAxisIndex = 1 |
| | | } |
| | | // 临时 |
| | | const datatype = 1 |
| | | if (datatype === 1) { |
| | | dataUnit = '流量(m³/d)' |
| | | dataUnit = '废气流量(m³/d)' |
| | | } else { |
| | | dataUnit = '流量(m³/h)' |
| | | } |
| | |
| | | formatter: function (params) { |
| | | let s = params[0].name + '<br />' |
| | | for (let i = 0; i < params.length; i++) { |
| | | // var name = params[i].name |
| | | // let name = params[i].name |
| | | // 图表title名称 |
| | | const seriesName = params[i].seriesName |
| | | // 值 |
| | | const value = params[i].value[1] |
| | | |
| | | // var valueFliter = formatter(value) |
| | | // let valueFliter = formatter(value) |
| | | const valueFliter = parseFloat(value).toFixed(2) |
| | | |
| | | let maker = params[i].marker |
| | |
| | | yAxis: [{ |
| | | type: 'value', |
| | | name: yname, |
| | | max: function (value) { |
| | | return parseInt(value.max + 30) |
| | | }, |
| | | // max: function (value) { |
| | | // console.log(value) |
| | | // return parseInt(value.max + 30) |
| | | // }, |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | textStyle: { |