派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/WasteGas/DayData.vue
@@ -1,184 +1,321 @@ <!-- 日数据 --> <template> <div id="Tab"> <div class="animation"> <div class="infomation"> <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i> 标准 : <i style="color: #e8ee0b">100</i> </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 class="echarts-box"> <div class="tab-scroll"> <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard> <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span> </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"></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>--> <!-- 采样点数:--> <!-- <el-select v-model="formInline.region" placeholder="50">--> <!-- <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 hover-bottom" @click="onSubmit">查询</div> <div class="detailbtn hover-bottom" @click="dialogVisible = true" >明细表</div> </div> <div style="width:5rem;height:1.5rem;" id="echarts" ref="main"> </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"> </el-date-picker> <span class="demonstration">结束时间：</span> <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"> </el-date-picker> <span class="demonstration">采样点数：</span> <el-select v-model="formData.region" placeholder="请选择" style="width: 80px"> <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>明细表</el-button> </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">--> <!-- <public-detailed-list v-bind="$attrs"></public-detailed-list>--> <!-- </div>--> <!-- </el-dialog>--> <div class="echarts-chart"> <div style="width:5rem;height:1.5rem;" ref="wastegasday"></div> </div> </div> </template> <script> // import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' import PublicDataStandard from '../PublicDataStandard' import 'dayjs/locale/es' import dayjs from 'dayjs' import mapApi from '@/api/mapApi' export default { name: 'DayData', components: { // PublicDetailedList PublicDataStandard }, data () { return { watchData: [], dialogVisible: false, myChar: null, value: '', formInline: { region: '', timeStart: '', timeEnd: '' }, info: this.series, JsonDayCharts: { id: 'mychartsDay', 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: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'], ydatas: [ { name: '氮氧化物', data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 100 }, { name: '二氧化硫', data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 }, { name: '废气流量', data: ['2827518.25', '2763525.75', '2776435.50', '2742003.50', '2856001.75', '2890287.00', '2832898.25', '2803715.50', '2513925.75', '2753303.50', '2749836.00', '2786188.50', '2738838.00', '2733660.25', '2815521.25', '2830217.25', '2798918.00', '2803543.50', '2770175.25', '2823321.25', '2856329.25', '2801588.00', '2798103.50', '2766343.00', '2750489.50', '2697786.25', '2796775.50', '2808028.50', '2813561.75', '2757129.25', '2720755.50'], zdcbcolor: 'red', zxcolor: '#9ACD32', bzz: null }, { current: { name: '二氧化硫', val: 17.34 }, { name: '烟尘', data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 30 } ], yname: ' 浓度(mg/m³)', // id:'mychartDay', datatype: 1 } 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') }, dataType: 1, myChart: null, exhbzz: null, jcdID: 1, exhbzzList: [], bzz: null, bzzList: [] } }, mounted () { this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss') this.formInline.timeStart = dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss') this.onSubmit() // this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype) }, updated () { this.onSubmit() this.$nextTick(() => { this.initnData() }) }, methods: { onSubmit () { console.log('submit!') this.CreateCharts(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype) querySearch () { this.initnData() }, 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 = [] // 存放时间 const dataList = [] // 存放数据 let data const bzh = [] CreateCharts: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { this.mychartDay = this.$echarts.init(this.$refs.main) this.mychartDay.clear() var dataUnit = '' // 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 strDate if (d1[1] > 9) { // if(d2[0]>9){ strDate = MonTimeStr.substring(8, 10) + '日' // }else { // strDate=MonTimeStr.substring(8,9)+"日"; // } } else { // if(d2[0]>9){ strDate = MonTimeStr.substring(7, 9) + '日' // }else { // strDate=MonTimeStr.substring(7,8)+"日"; // } } if (nameList.length === 0) { nameList.push(d[i].PoltmtrlName.trim()) dateList.push(strDate) bzh.push(d[i].StdValue) data = { name: d[i].PoltmtrlName.trim(), data: [d[i].MonQty] } dataList.push(data) } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) { nameList.push(d[i].PoltmtrlName) bzh.push(d[i].StdValue) data = { name: d[i].PoltmtrlName.trim(), data: [d[i].MonQty] } dataList.push(data) } else { if (dateList.indexOf(strDate) < 0) { dateList.push(strDate) } for (var j = 0; j < dataList.length; j++) { if (d[i].PoltmtrlName.trim() === dataList[j].name) { dataList[j].data.push(d[i].MonQty) } } } } // 处理数据结束 var divid = 'mychart1eff' var title = name 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) } this.bzz = { name: nameList[l], bzhui: bzh[l] } this.bzzList.push(this.bzz) } lengList.push(objTemp) const legend = lengList const xdata = dateList.reverse() const ydatas = [] for (let 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 = '#70ff49' } else { zdcbcolor = 'red' zxcolor = '#d9f2f4' } let sdata = [] for (let k = 0; k < dataList.length; k++) { if (nameList[j].trim() === dataList[k].name.trim()) { sdata = dataList[k].data.reverse() } } const ydata = { name: nameList[j], data: sdata, zdcbcolor: zdcbcolor, zxcolor: zxcolor, bzz: bzh[j] } ydatas.push(ydata) } const yname = '浓度(mg/l)' this.CreateChart(divid, 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.wastegasday) 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 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 const bzzList = this.bzzList 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, @@ -189,17 +326,19 @@ 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 // } // } // if (c.value > 999999999999) { // return zdcbcolor // } else { // return '#33c95f' // } 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, @@ -223,19 +362,19 @@ 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 // } // } // if (c.value > biaozhuiz) { // return zdcbcolor // } else if (c.value > biaozhuiz * 0.9) { // return '#FFA500' // } else { // return '#33c95f' // } 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, @@ -253,19 +392,19 @@ symbol: 'none', data: [ /* { type: 'average', name: '日平均值', label: { normal: { position: 'end', //显示位置 formatter: ydatas[i].name+'\n日平均值'+'{c}' //显示样式 type: 'average', name: '日平均值', label: { normal: { position: 'end', //显示位置 formatter: ydatas[i].name+'\n日平均值'+'{c}' //显示样式 } }, lineStyle:{ // 颜色 color: 'yellow', type:'solid' } }, lineStyle:{ // 颜色 color: 'yellow', type:'solid' } }, */ { }, */ { label: { normal: { position: 'end', @@ -287,7 +426,7 @@ serLists.push(obj) } var option = { const option = { tooltip: { // 提示框 trigger: 'axis', axisPointer: { @@ -297,20 +436,21 @@ } }, 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 === '氮氧化物') { @@ -319,10 +459,10 @@ 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 { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#4ec99c;"></span>' } else if (seriesName === '废气流量') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#70ff49;"></span>' } s += maker + seriesName + ':' + value + '<br />' s += maker + seriesName + ':' + valueFliter + '<br />' } return s } @@ -335,8 +475,7 @@ }, grid: { // 网格 top: '20%', left: '12%', bottom: '15%' left: '15%' // containLabel: true }, legend: { // 图例 @@ -364,8 +503,8 @@ type: 'category', boundaryGap: false, axisLabel: { // x轴全部显示 rotate: 20, interval: 0, // rotate: 20, // interval: 0, textStyle: { color: '#fff' } @@ -391,7 +530,7 @@ type: 'value', name: yname, // max: function (value) { // var max_val_list = [] // 所有显示折线的标准值 // let max_val_list = [] // 所有显示折线的标准值 // if (exhbzzList && exhbzzList.length > 0) { // if (value.max != '-Infinity') { // 获取所有监测指标的max值 2020/12/31 // valMax = parseInt(value.max + 5) @@ -402,8 +541,10 @@ // } // }) // } // 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] // 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: { @@ -428,7 +569,7 @@ type: 'value', name: dataUnit, max: function (value) { var ma = value.max > 120 ? value.max : 120 const ma = value.max > 12 ? value.max : 120 return parseInt(ma) }, axisLabel: { @@ -452,320 +593,11 @@ }], series: serLists } this.mychartDay.setOption(option) // this.mychartDay.on('legendselectchanged', function (params) { // var StdVal = null // var op = { yAxis: {} } // var 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.mychartDay.setOption(op) // }) /** * 解决mychartDay.on('click',function(){...})事件重复触发的问题 * Date: 20200720 */ this.mychartDay.off('click') /** * 图标点击事件 * 20190426 add * */ // this.mychartDay.on('click', function (params) { // // 获取当前时间，小时 // var nowHours = new Date().Format('hh') // // 点击折线图折点对应的时间 // // 需要传的时间为 // var _date = null // if (params.name.indexOf('时') !== -1) { // var hours = params.name.substring(0, params.name.indexOf('时')) // if (parseInt(hours) < parseInt(nowHours)) { // _date = 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') // _date = stringDate + ' ' + hours + ':00:00' // } // } else if (params.name.indexOf('日') !== -1) { // var day = params.name.substring(0, params.name.indexOf('日') - 1) // _date = 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.mychartDay.getDom().style.height = 3 + 'rem' this.mychartDay.getDom().style.width = 6 + 'rem' } else { this.mychartDay.getDom().style.height = 3 + 'rem' this.mychartDay.getDom().style.width = 6 + 'rem' } this.mychartDay.resize() } this.myChart.setOption(option) } // initOptions: function (dateDate, series) { // var options = { // title: { // // text: '折线图堆叠' // }, // color: ['#446cdc', '#c4c916', '#c1187e'], // tooltip: { // trigger: 'axis', // axisPointer: { // type: 'cross', // label: { // color: '#1a4245' // } // } // }, // legend: { // x: '200px', // y: '30px', // data: [{ // name: 'COD', // textStyle: { // color: '#00d0f9' // } // }, // { // name: '氨氮', // textStyle: { // color: '#00d0f9' // } // }, // { // name: '废水流量', // textStyle: { // color: '#00d0f9' // } // }] // }, // grid: { // left: '3%', // right: '3%', // bottom: '3%', // containLabel: true // }, // toolbox: {}, // // 图标缩放设置 // dataZoom: [{ // type: 'inside', // start: 0, // end: 100 // }, { // start: 0, // end: 100, // show: false, // handleSize: '80%', // handleStyle: { // color: '#fff', // shadowBlur: 3, // shadowColor: 'rgba(0, 0, 0, 0.6)', // shadowOffsetX: 2, // shadowOffsetY: 2 // } // }], // // x轴的设置 // xAxis: { // type: 'category', // boundaryGap: false, // data: dateDate, // axisLabel: { // x轴全部显示 // rotate: 20, // interval: 0, // textStyle: { // color: '#fff', // fontSize: 10 // } // }, // splitLine: { // 网格垂直线为虚线 // show: true, // lineStyle: { // type: 'dashed' // } // }, // axisTick: { // x 轴刻度显示 // show: false // }, // axisLine: { // lineStyle: { // color: '#FFFFFF', // width: 1 // 这里是为了突出显示加上的 // } // } // }, // // Y 轴的设置 // yAxis: [{ // type: 'value', // position: 'left', // 多 Y 轴使用 // name: '浓度(mg/m³)', // axisLabel: { // formatter: '{value}', // textStyle: { // color: '#fff' // 坐标的字体颜色 // } // }, // axisPointer: { // snap: true // 自动吸附最近的点 // }, // splitLine: { // show: false // y轴 网格线不显示 // }, // axisLine: { // lineStyle: { // color: '#ffffff', // 坐标轴的颜色 // width: 1 // } // } // }, // { // type: 'value', // position: 'right', // 多 Y 轴使用 // name: '流量(m³/h³)', // axisLabel: { // formatter: '{value}', // textStyle: { // color: '#fff' // 坐标的字体颜色 // } // }, // axisPointer: { // snap: true // 自动吸附最近的点 // }, // splitLine: { // show: false // y轴 网格线不显示 // }, // axisLine: { // lineStyle: { // color: '#ffffff', // 坐标轴的颜色 // width: 1 // } // } // }], // series: series // } // return options // } } } </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; text-align: center; z-index: 9999; //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>
