| | |
| | | <!-- 小时数据 --> |
| | | <template> |
| | | <div id="Tab"> |
| | | <div class="infomation"> |
| | | <div> |
| | | <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i> 标准 : 100</span> |
| | | <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span> |
| | | <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span> |
| | | <span class="grid-content">废气流量 : <i style="color: #e8ee0b">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="formInline.timeStart" @click="pickerBtn"></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 class="detailbtn" @click="onSubmit">查询</div> |
| | | <div class="detailbtn" @click="dialogVisible = true" >明细表</div> |
| | | </div> |
| | | <div style="width:5rem;height:1.5rem;" id="echarts" ref="main"></div> |
| | | </div> |
| | | <!-- 明细弹框 --> |
| | | <el-dialog :visible.sync="dialogVisible" |
| | | :append-to-body="true" |
| | | 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 class="echarts-box"> |
| | | <div class="tab-scroll"> |
| | | <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> |
| | | </div> |
| | | <div class="echarts-form"> |
| | | <span class="demonstration">开始时间:</span> |
| | | <el-date-picker v-model="formData.timeStart" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker> |
| | | <span class="demonstration">结束时间:</span> |
| | | <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker> |
| | | <span class="demonstration">采样点数:</span> |
| | | <el-select v-model="formData.region" placeholder="请选择" size="mini" > |
| | | <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option> |
| | | </el-select> |
| | | <el-button @click="querySearch">查询</el-button> |
| | | <el-button @click="ScheduleShow">明细表</el-button> |
| | | </div> |
| | | <div class="echarts-chart"> |
| | | <div ref="wastegashour"></div> |
| | | </div> |
| | | <span class="time-select">{{ formData.timeStart }}时—{{ formData.timeEnd }}时</span> |
| | | <!-- 明细弹框--> |
| | | <el-dialog :visible.sync="showSchedule" :modal="false" v-dialogDrag> |
| | | <div class="el-dialog-div" style="height: 200px"> |
| | | <Scheduleof></Scheduleof> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' |
| | | import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof' |
| | | import PublicDataStandard from '../PublicDataStandard' |
| | | |
| | | import 'dayjs/locale/es' |
| | | import dayjs from 'dayjs' |
| | | import mapApi from '@/api/mapApi' |
| | | |
| | | export default { |
| | | name: 'HourData', |
| | | components: { |
| | | PublicDetailedList |
| | | // PublicDetailedList |
| | | PublicDataStandard, |
| | | Scheduleof |
| | | }, |
| | | data () { |
| | | return { |
| | | watchData: [], |
| | | dialogVisible: false, |
| | | myChar: null, |
| | | value: '', |
| | | formInline: { |
| | | timeStart: null, |
| | | timeEnd: null |
| | | }, |
| | | myChart: null, |
| | | JsonCtarts: { |
| | | id: 'mychart', |
| | | title: '加热炉烟气', |
| | | legend: [ |
| | | { |
| | | icon: 'image://../assets/imgs/legend/NOX.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | textStyle: { |
| | | color: '#CCC' |
| | | }, |
| | | name: '氮氧化物' |
| | | // tab栏传递接收数据 |
| | | dataStandard: [ |
| | | { |
| | | current: { |
| | | name: '氮氧化物', |
| | | val: 29.93 |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/SO2.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '二氧化硫', |
| | | textStyle: { |
| | | color: '#CCC' |
| | | } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/YanChen.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '烟尘', |
| | | textStyle: { color: '#ccc' } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/WenDu.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '温度', |
| | | textStyle: { color: '#ccc' } |
| | | }, |
| | | { |
| | | icon: 'image://../assets/imgs/legend/VOCs.png', |
| | | itemHeight: 5, |
| | | itemWidth: 20, |
| | | name: '废气流量', |
| | | textStyle: { color: '#ccc' } |
| | | standard: { |
| | | name: '标准', |
| | | val: 100 |
| | | } |
| | | ], |
| | | xdata: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时'], |
| | | ydatas: [ |
| | | { name: '氮氧化物', data: ['34.44', '36.91', '37.65', '37.16', '38.03', '38.23', '37.21', '37.67', '37.97', '37.58', '36.61', '37.76', '37.27', '37.24', '35.86', '36.61', '37.21'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 50 }, |
| | | { name: '二氧化硫', data: ['4.98', '4.57', '4.19', '3.14', '3.80', '3.62', '3.33', '2.80', '3.13', '2.54', '3.08', '2.48', '1.97', '1.76', '0.82', '1.01', '1.5'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 35 }, |
| | | { name: '废气流量', data: ['381907.22', '376474.19', '378572.31', '379369.44', '385225.72', '388657.56', '330667.31', '26560.98', '0.00', '0.00', '49567.43', '357837.31', '376972.66', '379693.50', '379982.22', '379693.50', '379982.22'], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, |
| | | { name: '烟尘', data: ['4.02', '4.17', '4.31', '4.00', '4.45', '4.40', '4.40', '4.25', '4.26', '4.18', '4.58', '4.21', '3.96', '3.83', '3.78', '3.83', '3.78'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 10 }, |
| | | { name: '温度', data: ['46.55', '46.70', '46.47', '46.56', '46.57', '46.58', '46.56', '46.58', '46.69', '46.47', '46.58', '46.60', '46.54', '46.55', '46.60', '46.55', '46.60'], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: null } |
| | | ], |
| | | yname: ' 浓度(mg/m³)', |
| | | // id:'mychart', |
| | | datatype: 2 |
| | | } |
| | | }, |
| | | { |
| | | current: { |
| | | name: '二氧化硫', |
| | | val: 17.34 |
| | | }, |
| | | standard: { |
| | | name: '标准', |
| | | val: 50 |
| | | } |
| | | }, |
| | | { |
| | | current: { |
| | | name: '烟尘', |
| | | val: 6.93 |
| | | }, |
| | | standard: { |
| | | name: '标准', |
| | | val: 30 |
| | | } |
| | | }, |
| | | { |
| | | current: { |
| | | name: '废气流量', |
| | | val: 120 |
| | | }, |
| | | standard: { |
| | | name: '', |
| | | val: null |
| | | } |
| | | }], |
| | | formData: { |
| | | region: '25', |
| | | regionList: [25, 50, 75, 100], |
| | | timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'), |
| | | timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | }, |
| | | showSchedule: false, |
| | | dataType: 2, |
| | | myChart: null, |
| | | exhbzz: null, |
| | | jcdID: 1, |
| | | exhbzzList: [] |
| | | } |
| | | }, |
| | | created () { |
| | | }, |
| | | mounted () { |
| | | this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') |
| | | this.formInline.timeStart = dayjs().subtract(12, 'hour').format('YYYY-MM-DD HH:mm:ss') |
| | | this.onSubmit() |
| | | this.$nextTick(() => { |
| | | this.initnData() |
| | | }) |
| | | }, |
| | | methods: { |
| | | pickerBtn () { |
| | | this.formInline.timeEnd = '' |
| | | this.formInline.timeStart = '' |
| | | console.log(1) |
| | | ScheduleShow () { |
| | | this.showSchedule = !this.showSchedule |
| | | }, |
| | | onSubmit () { |
| | | this.CreateChart() |
| | | querySearch () { |
| | | console.log('查询') |
| | | }, |
| | | CreateChart () { |
| | | // var id = this.JsonCtarts.id |
| | | // var title = this.JsonCtarts.title |
| | | var legend = this.JsonCtarts.legend |
| | | var xdata = this.JsonCtarts.xdata |
| | | var ydatas = this.JsonCtarts.ydatas |
| | | var yname = this.JsonCtarts.yname |
| | | // var jcdId = this.JsonCtarts.jcdID |
| | | var datatype = this.JsonCtarts.datatype |
| | | async initnData () { |
| | | const data = { |
| | | onLineMonEmissPointId: 23, |
| | | monItemId: 28, |
| | | beginTime: this.formData.timeStart, |
| | | endTime: this.formData.timeEnd, |
| | | dataType: this.dataType |
| | | } |
| | | const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo |
| | | // console.log(result) |
| | | this.get24HourDate(result) |
| | | }, |
| | | get24HourDate (res) { |
| | | if (res.length > 0) { |
| | | // 处理数据开始 |
| | | const d = res |
| | | const nameList = [] // 存放图例 |
| | | const dateList = [] // 存放时间 |
| | | let dataList = [] // 存放数据 |
| | | const bzh = [] // 标准值 |
| | | let data = [] |
| | | // wrwIDS = [] |
| | | for (let i = 0; i < d.length; i++) { |
| | | const MonTimeStr = d[i].MonTimeStr |
| | | |
| | | this.myChart = this.$echarts.init(this.$refs.main) |
| | | this.myChart.clear() |
| | | var dataUnit = '' |
| | | // 20190430 add 获取监测点id 污染物id 检测项id |
| | | // getWRW(d[i]) |
| | | /* if(i==0){ |
| | | let wrw ={ |
| | | name: d[0].PoltmtrlName, |
| | | id:d[0].PoltmtrlId |
| | | } |
| | | wrwIDS.push(wrw); |
| | | }else { |
| | | let flag=true; |
| | | wrwIDS.forEach(item=>{ |
| | | if(d[i].PoltmtrlId==item.id){ |
| | | flag=false; |
| | | } |
| | | }) |
| | | |
| | | if(flag){ |
| | | let wrw ={ |
| | | name: d[i].PoltmtrlName, |
| | | id:d[i].PoltmtrlId |
| | | } |
| | | wrwIDS.push(wrw); |
| | | } |
| | | } |
| | | */ |
| | | |
| | | let strDate |
| | | const d1 = MonTimeStr.split('/') |
| | | const d2 = d1[2].split(' ') |
| | | const t = MonTimeStr.split(' ') |
| | | const hlist = t[1].split(':') |
| | | const h = hlist[0] |
| | | if (d1[1] > 9) { |
| | | // strDate=MonTimeStr.substring(8,10)+"日"; |
| | | if (d2[0] > 9) { |
| | | strDate = '' |
| | | if (h > 9) { |
| | | strDate += MonTimeStr.substring(11, 13) + '时' |
| | | } else { |
| | | strDate += MonTimeStr.substring(11, 12) + '时' |
| | | } |
| | | } else { |
| | | strDate = '' |
| | | if (h > 9) { |
| | | strDate += MonTimeStr.substring(10, 12) + '时' |
| | | } else { |
| | | strDate += MonTimeStr.substring(10, 11) + '时' |
| | | } |
| | | } |
| | | } else { |
| | | if (d2[0] > 9) { |
| | | strDate = '' |
| | | if (h > 9) { |
| | | strDate += MonTimeStr.substring(10, 12) + '时' |
| | | } else { |
| | | strDate += MonTimeStr.substring(10, 11) + '时' |
| | | } |
| | | } else { |
| | | strDate = '' |
| | | if (h > 9) { |
| | | strDate += MonTimeStr.substring(9, 11) + '时' |
| | | } else { |
| | | strDate += MonTimeStr.substring(9, 10) + '时' |
| | | } |
| | | } |
| | | } |
| | | |
| | | // console.log("时间",strDate); |
| | | |
| | | if (nameList.length === 0) { |
| | | nameList.push(d[i].PoltmtrlName.trim()) |
| | | dateList.push(strDate) |
| | | if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) { |
| | | d[i].MonQty = 0 |
| | | } |
| | | data.push(d[i].MonQty) |
| | | bzh.push(d[i].StdValue) |
| | | } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) { |
| | | nameList.push(d[i].PoltmtrlName) |
| | | bzh.push(d[i].StdValue) |
| | | dataList.push(data) |
| | | data = [] |
| | | if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) { |
| | | d[i].MonQty = 0 |
| | | } |
| | | data.push(d[i].MonQty) |
| | | } else if (i === d.length - 1) { |
| | | if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) { |
| | | d[i].MonQty = 0 |
| | | } |
| | | data.push(d[i].MonQty) |
| | | dataList.push(data) |
| | | } else { |
| | | if (dateList.indexOf(strDate) < 0) { |
| | | dateList.push(strDate) |
| | | } |
| | | if ((d[i].PoltmtrlName === '废气流量' || d[i].PoltmtrlName === '废气') && d[i].MonQty < 0) { |
| | | d[i].MonQty = 0 |
| | | } |
| | | data.push(d[i].MonQty) |
| | | } |
| | | } |
| | | // 处理数据结束 |
| | | |
| | | // dateList=get24DateTime(); |
| | | |
| | | const newList = [] |
| | | |
| | | for (let i = 0; i < dataList.length; i++) { |
| | | const list = dataList[i].reverse() |
| | | newList.push(list) |
| | | } |
| | | dataList = newList |
| | | |
| | | const id = 'containerDomId' || 'mychart' |
| | | const title = '加热炉烟气' |
| | | |
| | | const lengList = [] |
| | | let objTemp |
| | | |
| | | for (let l = 0; l < nameList.length; l++) { |
| | | let obj |
| | | let iconurl |
| | | if (nameList[l] === '二氧化硫') { |
| | | iconurl = 'image://../assets/imgs/legend/SO2.png' |
| | | } else if (nameList[l] === '氮氧化物') { |
| | | iconurl = 'image://../assets/imgs/legend/NOX.png' |
| | | } else if (nameList[l] === '烟尘') { |
| | | iconurl = 'image://../assets/imgs/legend/YanChen.png' |
| | | } else if (nameList[l] === '非甲烷总烃') { |
| | | iconurl = 'image://../assets/imgs/legend/grn.png' |
| | | } else if (nameList[l] === '温度') { |
| | | iconurl = 'image://../assets/imgs/legend/WenDu.png' |
| | | } else if (nameList[l] === '废气流量') { |
| | | iconurl = 'image://../assets/imgs/legend/VOCs.png' |
| | | } |
| | | |
| | | if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后 |
| | | objTemp = { |
| | | name: nameList[l], |
| | | icon: iconurl, |
| | | textStyle: { |
| | | color: '#ccc' |
| | | }, |
| | | itemWidth: 20, |
| | | itemHeight: 5 |
| | | } |
| | | } else { |
| | | obj = { |
| | | name: nameList[l], |
| | | icon: iconurl, |
| | | textStyle: { |
| | | color: '#ccc' |
| | | }, |
| | | itemWidth: 20, |
| | | itemHeight: 5 |
| | | } |
| | | lengList.push(obj) |
| | | } |
| | | } |
| | | lengList.push(objTemp) |
| | | |
| | | const legend = lengList |
| | | const xdata = dateList.reverse() |
| | | const ydatas = [] |
| | | |
| | | for (let j = 0; j < nameList.length; j++) { |
| | | let zdcbcolor, zxcolor |
| | | if (nameList[j] === '二氧化硫') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#fff21c' |
| | | } else if (nameList[j] === '氮氧化物') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#00B0F0' |
| | | } else if (nameList[j] === '烟尘') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#f48183' |
| | | } else if (nameList[j] === '废气流量') { |
| | | zdcbcolor = 'red' |
| | | zxcolor = '#8fdc6e' |
| | | } |
| | | const ydata = { |
| | | name: nameList[j], |
| | | data: dataList[j], |
| | | zdcbcolor: zdcbcolor, |
| | | zxcolor: zxcolor, |
| | | bzz: bzh[j] |
| | | } |
| | | this.exhbzz = { |
| | | name: nameList[j], |
| | | bzhui: bzh[j] |
| | | } |
| | | this.exhbzzList.push(this.exhbzz) |
| | | |
| | | ydatas.push(ydata) |
| | | } |
| | | |
| | | const yname = '浓度(mg/m³)' |
| | | |
| | | this.CreateChart(id, title, legend, xdata, ydatas, yname, this.jcdID, this.datatype) |
| | | } |
| | | }, |
| | | CreateChart (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { |
| | | this.myChart = this.$echarts.init(this.$refs.wastegashour) |
| | | // this.myChart .clear() |
| | | let dataUnit = '' |
| | | if (datatype === 1) { |
| | | dataUnit = '废气气量(m³/d)' |
| | | dataUnit = '气量(m³/d)' |
| | | } else { |
| | | dataUnit = '废气气量(m³/h)' |
| | | dataUnit = '气量(m³/h)' |
| | | } |
| | | |
| | | var serLists = [] |
| | | for (var j = 0; j < ydatas.length; j++) { |
| | | var len = ydatas[j].data.length |
| | | for (var k = 0; k < len; k++) { |
| | | var it = ydatas[j].data[k] |
| | | var it2 = parseFloat(it).toFixed(2) |
| | | const bzzList = this.exhbzzList |
| | | |
| | | const serLists = [] |
| | | for (let j = 0; j < ydatas.length; j++) { |
| | | const len = ydatas[j].data.length |
| | | for (let k = 0; k < len; k++) { |
| | | const it = ydatas[j].data[k] |
| | | const it2 = parseFloat(it).toFixed(2) |
| | | ydatas[j].data[k] = it2 |
| | | } |
| | | } |
| | | |
| | | for (var i = 0; i < ydatas.length; i++) { |
| | | // var zdcbcolor = ydatas[i].zdcbcolor |
| | | var bzz = ydatas[i].bzz |
| | | var obj |
| | | for (let i = 0; i < ydatas.length; i++) { |
| | | const zdcbcolor = ydatas[i].zdcbcolor |
| | | const bzz = ydatas[i].bzz |
| | | let obj |
| | | if (bzz == null) { |
| | | obj = { |
| | | name: ydatas[i].name, |
| | |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | /* var biaozhuiz |
| | | for (var i = 0; i < exhbzzList.length; i++) { |
| | | if (exhbzzList[i].name == c.seriesName) { |
| | | biaozhuiz = exhbzzList[i].bzhui |
| | | let biaozhuiz |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name === c.seriesName) { |
| | | biaozhuiz = bzzList[i].bzhui |
| | | } |
| | | } |
| | | if (c.value > 999999999999) { |
| | | 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, |
| | |
| | | itemStyle: { |
| | | normal: { |
| | | color: function (c) { // 根据value 显示不同的折点颜色 |
| | | /* var biaozhuiz |
| | | for (var i = 0; i < exhbzzList.length; i++) { |
| | | if (exhbzzList[i].name == c.seriesName) { |
| | | biaozhuiz = exhbzzList[i].bzhui |
| | | let biaozhuiz |
| | | for (let i = 0; i < bzzList.length; i++) { |
| | | if (bzzList[i].name === c.seriesName) { |
| | | biaozhuiz = bzzList[i].bzhui |
| | | } |
| | | } |
| | | if (c.value > biaozhuiz) { |
| | | if (c.value[1] > biaozhuiz) { |
| | | return zdcbcolor |
| | | } else if (c.value > biaozhuiz * 0.9) { |
| | | } else if (c.value[1] > biaozhuiz * 0.9) { |
| | | return '#FFA500' |
| | | } else { |
| | | return '#33c95f' |
| | | } |
| | | */ |
| | | }, |
| | | lineStyle: { // 折线的颜色 |
| | | color: ydatas[i].zxcolor, |
| | |
| | | serLists.push(obj) |
| | | } |
| | | |
| | | var option = { |
| | | const option = { |
| | | tooltip: { // 提示框 |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | |
| | | } |
| | | }, |
| | | formatter: function (params) { |
| | | var s = params[0].name + '<br/>' |
| | | for (var i = 0; i < params.length; i++) { |
| | | let s = params[0].name + '<br/>' |
| | | for (let i = 0; i < params.length; i++) { |
| | | // const name = params[i].name |
| | | // 图表title名称 |
| | | var seriesName = params[i].seriesName |
| | | const seriesName = params[i].seriesName |
| | | // 值 |
| | | var value = params[i].value |
| | | // var valueFliter |
| | | // if (value === 'NaN') { |
| | | // valueFliter = '' |
| | | // } else { |
| | | // valueFliter = this.formatter(value) |
| | | // } |
| | | var maker = params[i].marker |
| | | const value = params[i].value |
| | | let valueFliter |
| | | if (value === 'NaN') { |
| | | valueFliter = '' |
| | | } else { |
| | | // valueFliter = formatter(value) |
| | | valueFliter = value |
| | | } |
| | | let maker = params[i].marker |
| | | if (seriesName === '二氧化硫') { |
| | | 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:#f48183;"></span>' |
| | | } else if (seriesName === '温度') { |
| | | maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#F206FF;"></span>' |
| | | } else { |
| | | } else if (seriesName === '废气流量') { |
| | | maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' |
| | | } |
| | | s += maker + seriesName + ':' + value + '<br />' |
| | | s += maker + seriesName + ':' + valueFliter + '<br />' |
| | | } |
| | | return s |
| | | } |
| | |
| | | }, |
| | | grid: { // 网格 |
| | | top: '20%', |
| | | left: '6%', |
| | | bottom: '15%' |
| | | left: '15%' |
| | | // containLabel: true |
| | | }, |
| | | legend: { // 图例 |
| | |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | axisLabel: { // x轴全部显示 |
| | | rotate: 20, |
| | | interval: 0, |
| | | // rotate: 20, |
| | | // interval: 0, |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | |
| | | yAxis: [{ |
| | | type: 'value', |
| | | name: yname, |
| | | /* max: function (value) { |
| | | var max_val_list = [] // 所有显示折线的标准值 |
| | | // if(exhbzzList && exhbzzList.length>0){ |
| | | // if (value.max != "-Infinity") { // 获取所有监测指标的max值 2020/12/31 |
| | | // valMax = parseInt(value.max + 5); |
| | | // } |
| | | // $.each(exhbzzList, function (index, item) { |
| | | // if (item.bzhui != null) { |
| | | // 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) |
| | | }, */ |
| | | // max: function (value) { |
| | | // let max_val_list = [] // 所有显示折线的标准值 |
| | | // if (exhbzzList && exhbzzList.length > 0) { |
| | | // if (value.max != '-Infinity') { // 获取所有监测指标的max值 2020/12/31 |
| | | // valMax = parseInt(value.max + 5) |
| | | // } |
| | | // $.each(exhbzzList, function (index, item) { |
| | | // if (item.bzhui != null) { |
| | | // max_val_list.push(item.bzhui) |
| | | // } |
| | | // }) |
| | | // } |
| | | // max_val_list = max_val_list.sort(function (a, b) { |
| | | // return a - b |
| | | // }) // 排序 |
| | | // const 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: { |
| | |
| | | type: 'value', |
| | | name: dataUnit, |
| | | max: function (value) { |
| | | var ma = value.max > 120 ? value.max : 120 |
| | | const ma = value.max > 12 ? value.max : 12 |
| | | return parseInt(ma) |
| | | }, |
| | | axisLabel: { |
| | |
| | | }], |
| | | series: serLists |
| | | } |
| | | // console.log(option) |
| | | this.myChart.setOption(option) |
| | | /* |
| | | this.myChart.on('legendselectchanged', function (params) { |
| | | var StdVal = null |
| | | var op = { yAxis: {} } |
| | | const max_val_list = [] // 所有显示折线的标准值 |
| | | if (exhbzzList && exhbzzList.length > 0) { |
| | | max_val_list.push(valMax) // 将监测指标的max值也放入数组 2020/12/31 |
| | | $.each(exhbzzList, function (index, item) { |
| | | params.selected[item.name] ? max_val_list.push(item.bzhui) : '' |
| | | if (item.name == params.name) { |
| | | item.name == 'VOCs' ? StdVal = 20 : StdVal = item.bzhui |
| | | } |
| | | }) |
| | | } |
| | | max_val_list = max_val_list.sort(function (a, b) { return a - b }) // 排序 |
| | | op.yAxis.max = function (value) { |
| | | var ma = value.max < StdVal ? StdVal : Math.ceil(value.max) |
| | | max_val_list ? ma = max_val_list[max_val_list.length - 1] : ''// 选择最大值 |
| | | return ma |
| | | } |
| | | this.myChart.setOption(op) |
| | | }) |
| | | */ |
| | | |
| | | /** |
| | | * 解决myChart.on('click',function(){...})事件重复触发的问题 |
| | | * Date: 20200720 |
| | | */ |
| | | this.myChart.off('click') |
| | | |
| | | /** |
| | | * 图标点击事件 |
| | | * 20190426 add |
| | | * */ |
| | | /* this.myChart.on('click', function (params) { |
| | | // 获取当前时间,小时 |
| | | var nowHours = new Date().Format('hh') |
| | | // 点击折线图折点对应的时间 |
| | | // 需要传的时间为 |
| | | const dates = null |
| | | if (params.name.indexOf('时') !== -1) { |
| | | var hours = params.name.substring(0, params.name.indexOf('时')) |
| | | if (parseInt(hours) < parseInt(nowHours)) { |
| | | dates = 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') |
| | | dates = stringDate + ' ' + hours + ':00:00' |
| | | } |
| | | } else if (params.name.indexOf('日') !== -1) { |
| | | var day = params.name.substring(0, params.name.indexOf('日') - 1) |
| | | dates = 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 { |
| | | .infomation { |
| | | padding: 0.02rem 0.04rem; |
| | | .grid-content { |
| | | font-size: 0.08rem; |
| | | background-color: #2e4967; |
| | | text-align: center; |
| | | border-radius: 0.01rem; |
| | | height: 0.15rem; |
| | | line-height: 0.15rem; |
| | | margin-right: 0.04rem; |
| | | padding:0 0.04rem |
| | | } |
| | | } |
| | | } |
| | | .form-echrts { |
| | | width: 100%; |
| | | border-top: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | .from-search{ |
| | | display: flex; |
| | | padding:0.02rem; |
| | | >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:1rem; |
| | | background-color: #2e4967; |
| | | color: #fff; |
| | | font-size: 0.08rem; |
| | | height: 0.15rem; |
| | | padding: 0; |
| | | border:none; |
| | | z-index: 9999; |
| | | text-align: center; |
| | | //padding-left:20px ; |
| | | //padding: 0!important; |
| | | } |
| | | /deep/.el-input__icon{ |
| | | display: block; |
| | | width:1rem; |
| | | height: 0.15rem; |
| | | line-height: 0.15rem; |
| | | cursor: pointer; |
| | | font-size: 0; |
| | | } |
| | | |
| | | input::-webkit-calendar-picker-indicator { |
| | | opacity: 100; |
| | | } |
| | | .detailbtn{ |
| | | background-color:#2e4967; |
| | | text-align: center; |
| | | padding: 0 7px; |
| | | height: 0.15rem; |
| | | line-height: 0.15rem; |
| | | border-radius: 4px; |
| | | margin-right: 6px; |
| | | } |
| | | } |
| | | .el-dialog-div { |
| | | overflow: auto; |
| | | } |
| | | #echarts { |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | } |
| | | </style> |