| | |
| | | <!-- 小时数据 --> |
| | | <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> |
| | | <public-data-standard :dataStandard = "dataStandard"></public-data-standard> |
| | | <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> |
| | | <el-date-picker type="datetime" v-model="formInline.timeStart" @click="pickerBtn"></el-date-picker> |
| | | </span> |
| | | </div> |
| | | <div class="pickerData"> |
| | |
| | | </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> |
| | |
| | | <!-- 明细弹框 --> |
| | | <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: 500px"> |
| | | <div class="el-dialog-div"> |
| | | <public-detailed-list v-bind="$attrs"></public-detailed-list> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | // import mapApi from '@/api/mapApi' |
| | | import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' |
| | | |
| | | import dayjs from 'dayjs' |
| | | import PublicDataStandard from '@components/BaseNav/PublicBounced/common/PublicDataStandard' |
| | | export default { |
| | | name: 'ECharts', |
| | | components: { |
| | | PublicDataStandard, |
| | | PublicDetailedList |
| | | }, |
| | | data () { |
| | | return { |
| | | value1: '', |
| | | value2: '', |
| | | watchData: [], |
| | | dialogVisible: false, |
| | | myChar: null, |
| | | value: '', |
| | | formInline: { |
| | | region: '', |
| | | timeStart: '', |
| | | timeEnd: '' |
| | | timeStart: null, |
| | | timeEnd: null |
| | | }, |
| | | myChart: null, |
| | | dataStandard: [{ |
| | | current: { name: '氮氧化物1', val: 29.93 }, |
| | | standard: { name: '标准', val: 100 } |
| | | }, |
| | | { |
| | | current: { name: '二氧化硫', val: 17.34 }, |
| | | standard: { name: '标准', val: 50 } |
| | | }, |
| | | { |
| | | current: { name: '烟尘', val: 6.93 }, |
| | | standard: { name: '标准', val: 30 } |
| | | }, |
| | | { |
| | | current: { name: '废气流量', val: 120343.18 }, |
| | | standard: { name: '', val: null } |
| | | } |
| | | ], |
| | | JsonCtarts: { |
| | | id: 'mychart', |
| | | title: '加热炉烟气', |
| | |
| | | ], |
| | | 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', 'NaN', 'NaN'], 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', 'NaN', 'NaN'], 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', 'NaN', 'NaN'], 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', 'NaN', 'NaN'], 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', 'NaN', 'NaN'], zdcbcolor: 'red', zxcolor: '#F206FF', bzz: null } |
| | | { 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', |
| | |
| | | } |
| | | }, |
| | | created () { |
| | | // this.$nextTick(() => { |
| | | // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype) |
| | | // } |
| | | }, |
| | | mounted () { |
| | | this.onSubmit() |
| | | // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype) |
| | | }, |
| | | updated () { |
| | | 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() |
| | | }, |
| | | methods: { |
| | | pickerBtn () { |
| | | this.formInline.timeEnd = '' |
| | | this.formInline.timeStart = '' |
| | | console.log(1) |
| | | }, |
| | | onSubmit () { |
| | | this.CreateChart() |
| | | // console.log(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype) |
| | | // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype) |
| | | }, |
| | | CreateChart: function () { |
| | | CreateChart () { |
| | | // var id = this.JsonCtarts.id |
| | | // var title = this.JsonCtarts.title |
| | | var legend = this.JsonCtarts.legend |
| | |
| | | this.myChart.clear() |
| | | var dataUnit = '' |
| | | if (datatype === 1) { |
| | | dataUnit = '气量(m³/d)' |
| | | dataUnit = '废气气量(m³/d)' |
| | | } else { |
| | | dataUnit = '气量(m³/h)' |
| | | dataUnit = '废气气量(m³/h)' |
| | | } |
| | | |
| | | var serLists = [] |
| | |
| | | var seriesName = params[i].seriesName |
| | | // 值 |
| | | var value = params[i].value |
| | | var valueFliter |
| | | if (value === 'NaN') { |
| | | valueFliter = '' |
| | | } |
| | | // else { |
| | | // // valueFliter = formatter(value) |
| | | // var valueFliter |
| | | // if (value === 'NaN') { |
| | | // valueFliter = '' |
| | | // } else { |
| | | // valueFliter = this.formatter(value) |
| | | // } |
| | | var maker = params[i].marker |
| | | if (seriesName === '二氧化硫') { |
| | |
| | | } else { |
| | | maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' |
| | | } |
| | | s += maker + seriesName + ':' + valueFliter + '<br />' |
| | | s += maker + seriesName + ':' + value + '<br />' |
| | | } |
| | | return s |
| | | } |
| | |
| | | }, |
| | | grid: { // 网格 |
| | | top: '20%', |
| | | left: '5%' |
| | | left: '6%', |
| | | bottom: '15%' |
| | | // containLabel: true |
| | | }, |
| | | legend: { // 图例 |
| | |
| | | }], |
| | | series: serLists |
| | | } |
| | | console.log(option) |
| | | // console.log(option) |
| | | this.myChart.setOption(option) |
| | | /* |
| | | this.myChart.on('legendselectchanged', function (params) { |
| | |
| | | // createDivByMouse("s",params.event); |
| | | }) */ |
| | | } |
| | | // 废气按天查询小时数据 |
| | | // queryZDYDate_24 (id) { |
| | | // this.formInline.timeStart |
| | | // this.formInline.timeEnd |
| | | // // var date = $('#riqi_24').val() |
| | | // // if (date) { |
| | | // // var date1 = new Date(date) |
| | | // // date1 = new Date(date1.getTime() - (8 * 3600000)) |
| | | // // console(date1) |
| | | // // var dateUtil = new DateUtil() |
| | | // // var datePkg = dateUtil.getTowDate(date1, 'a', 24 * 3600000 - 1) |
| | | // // var dateTime1FullStr = |
| | | // var datatype = 2 |
| | | // console(datePkg) |
| | | // |
| | | // if (CFG_Model.production) { |
| | | // get24HourDate(datePkg.dateTime1FullStr, datePkg.dateTime2FullStr, id, datatype, '28,31,226', function (res) { |
| | | // // 处理数据开始 |
| | | // var d = res |
| | | // var nameList = [] // 存放图例 |
| | | // var dateList = [] // 存放时间 |
| | | // var dataList = [] // 存放数据 |
| | | // var bzh = [] // 标准值 |
| | | // var data = [] |
| | | // wrwIDS = [] |
| | | // for (var i = 0; i < d.length; i++) { |
| | | // var MonTimeStr = d[i].MonTimeStr |
| | | // |
| | | // // 20190430 add 获取监测点id 污染物id 检测项id |
| | | // getWRW(d[i]) |
| | | // |
| | | // var strDate |
| | | // var d1 = MonTimeStr.split('/') |
| | | // var d2 = d1[2].split(' ') |
| | | // var t = MonTimeStr.split(' ') |
| | | // var hlist = t[1].split(':') |
| | | // var 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) + '时' |
| | | // } |
| | | // } |
| | | // } |
| | | // |
| | | // 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 = new Array() |
| | | // 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(); |
| | | // |
| | | // var newList = [] |
| | | // for (var i = 0; i < dataList.length; i++) { |
| | | // var list = dataList[i].reverse() |
| | | // newList.push(list) |
| | | // } |
| | | // dataList = newList |
| | | // |
| | | // var id = 'mychart' |
| | | // var title = '加热炉烟气' |
| | | // var lengList = [] |
| | | // var objTemp |
| | | // |
| | | // for (var l = 0; l < nameList.length; l++) { |
| | | // var obj |
| | | // var 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 { |
| | | // 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) |
| | | // |
| | | // var legend = lengList |
| | | // var xdata = dateList.reverse() |
| | | // var ydatas = [] |
| | | // |
| | | // for (var j = 0; j < nameList.length; j++) { |
| | | // var 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 = '#F206FF' |
| | | // } else { |
| | | // zdcbcolor = 'red' |
| | | // zxcolor = '#9ACD32' |
| | | // } |
| | | // var ydata = { |
| | | // name: nameList[j], |
| | | // data: dataList[j], |
| | | // zdcbcolor: zdcbcolor, |
| | | // zxcolor: zxcolor, |
| | | // bzz: bzh[j] |
| | | // } |
| | | // exhbzz = { |
| | | // name: nameList[j], |
| | | // bzhui: bzh[j] |
| | | // } |
| | | // exhbzzList.push(exhbzz) |
| | | // |
| | | // ydatas.push(ydata) |
| | | // } |
| | | // |
| | | // var yname = '浓度(mg/m³)' |
| | | // CreateChart(id, title, legend, xdata, ydatas, yname, id, datatype) |
| | | // console.log(123323) |
| | | // console.log(id, title, legend, xdata, ydatas, yname, id, datatype) |
| | | // }) |
| | | // } else { |
| | | // get24HourDate1(datePkg.dateTime1FullStr, datePkg.dateTime2FullStr, id, datatype, '28,31', function (res) { |
| | | // // 处理数据开始 |
| | | // var d = res |
| | | // var nameList = [] // 存放图例 |
| | | // var dateList = [] // 存放时间 |
| | | // var dataList = [] // 存放数据 |
| | | // var bzh = [] // 标准值 |
| | | // var data = [] |
| | | // wrwIDS = [] |
| | | // for (var i = 0; i < d.length; i++) { |
| | | // var MonTimeStr = d[i].MonTimeStr |
| | | // |
| | | // // 20190430 add 获取监测点id 污染物id 检测项id |
| | | // getWRW(d[i]) |
| | | // |
| | | // var strDate |
| | | // var d1 = MonTimeStr.split('/') |
| | | // var t = MonTimeStr.split(' ') |
| | | // var hlist = t[1].split(':') |
| | | // var h = hlist[0] |
| | | // if (d1[1] > 9) { |
| | | // // strDate=MonTimeStr.substring(8,10)+"日"; |
| | | // strDate = '' |
| | | // if (h > 9) { |
| | | // strDate += MonTimeStr.substring(11, 13) + '时' |
| | | // } else { |
| | | // strDate += MonTimeStr.substring(11, 12) + '时' |
| | | // } |
| | | // } else { |
| | | // // strDate=MonTimeStr.substring(7,9)+"日"; |
| | | // strDate = '' |
| | | // if (h > 9) { |
| | | // strDate += MonTimeStr.substring(10, 12) + '时' |
| | | // } else { |
| | | // strDate += MonTimeStr.substring(10, 11) + '时' |
| | | // } |
| | | // } |
| | | // |
| | | // 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 = new Array() |
| | | // 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() |
| | | // dateList.reverse() |
| | | // var newList = [] |
| | | // |
| | | // for (var i = 0; i < dataList.length; i++) { |
| | | // var list = dataList[i].reverse() |
| | | // newList.push(list) |
| | | // } |
| | | // dataList = newList |
| | | // |
| | | // var id = 'mychart' |
| | | // var title = '加热炉烟气' |
| | | // var lengList = [] |
| | | // var objTemp |
| | | // |
| | | // for (var l = 0; l < nameList.length; l++) { |
| | | // var obj |
| | | // var 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 { |
| | | // 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) |
| | | // |
| | | // var legend = lengList |
| | | // var xdata = dateList.reverse() |
| | | // var ydatas = [] |
| | | // |
| | | // for (var j = 0; j < nameList.length; j++) { |
| | | // var 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 = '#F206FF' |
| | | // } else { |
| | | // zdcbcolor = 'red' |
| | | // zxcolor = '#9ACD32' |
| | | // } |
| | | // var ydata = { |
| | | // name: nameList[j], |
| | | // data: dataList[j], |
| | | // zdcbcolor: zdcbcolor, |
| | | // zxcolor: zxcolor, |
| | | // bzz: bzh[j] |
| | | // } |
| | | // exhbzz = { |
| | | // name: nameList[j], |
| | | // bzhui: bzh[j] |
| | | // } |
| | | // exhbzzList.push(exhbzz) |
| | | // ydatas.push(ydata) |
| | | // } |
| | | // |
| | | // var yname = '浓度(mg/m³)' |
| | | // CreateChart(id, title, legend, xdata, ydatas, yname, id, datatype) |
| | | // onsole.log(id, title, legend, xdata, ydatas, yname, id, datatype) |
| | | // }) |
| | | // } |
| | | // $('.btm span:nth-child(2)').empty() |
| | | // var html = '监测时间 (' + datePkg.dateTime1FullStr + ' 至 ' + datePkg.dateTime2FullStr + ')' |
| | | // $('.btm span:nth-child(2)').html(html) |
| | | // |
| | | // fore24Time = datePkg.dateTime1FullStr |
| | | // back24Time = datePkg.dateTime2FullStr |
| | | // } else { |
| | | // alert('查询时间不能为空!') |
| | | // } |
| | | // } |
| | | // drawChart: function () { |
| | | // window.onresize = function () { |
| | | // var h1 = document.documentElement.clientHeight// 获取屏幕的高度 |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | .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{ |
| | | .form-echrts { |
| | | width: 100%; |
| | | border-top: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | .from-search{ |
| | | display: flex; |
| | | >div:first-child { |
| | | margin-right: 10px; |
| | | } |
| | | .pickerData{ |
| | | flex: 1; |
| | | padding:0.02rem; |
| | | >div{margin-left: 10px} |
| | | .pickerMon{ |
| | | display: flex; |
| | | >span{line-height: 22px} |
| | | .pickerTable { |
| | | margin-left: 3px; |
| | | >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; |
| | | } |
| | | /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; |
| | | } |
| | | |
| | | #echarts { |
| | | margin: 0; |
| | | padding: 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> |