派生自 wuyushui/SewerAndRainNetwork
src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue
@@ -1,69 +1,65 @@ <!-- 日数据 --> <template> <div id="Tab"> <div class="animation"> <div class="infomation"> <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"></el-date-picker> </span> </div> <div class="pickerData"> <span >结束时间:</span> <span>结束时间:</span> <span class="pickerTable"> <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker> <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" @click="onSubmit">查询</div> <div class="detailbtn" @click="dialogVisible = true" >明细表</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> <!-- 明细弹框 --> <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> <!-- <!– 明细弹框 –>--> <!-- <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> </template> <script> import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' 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: { PublicDetailedList PublicDataStandard // PublicDetailedList }, data () { return { @@ -77,6 +73,47 @@ timeEnd: '' }, info: this.series, 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 } } ], JsonDayCharts: { id: 'mychartsDay', title: '加热炉烟气', @@ -123,8 +160,20 @@ ], 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: ['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'], @@ -132,7 +181,13 @@ zxcolor: '#9ACD32', bzz: null }, { 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 } { 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', @@ -150,19 +205,30 @@ this.onSubmit() }, methods: { async getWasteGasMonData () { const GasOnlinedata = { onLineMonEmissPointId: '23', monItemId: '28,31', beginTime: '2020-04-06 15:13:20', endTime: '2020-04-07 15:13:20', dataType: '1' } const data = await mapApi.getWasteGasMonData(GasOnlinedata) this.JsonDayCharts = data }, onSubmit () { console.log('submit!') 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) 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) }, CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { CreateCharts: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) { this.mychartDay = this.$echarts.init(this.$refs.main) this.mychartDay.clear() var dataUnit = '' if (datatype === 1) { dataUnit = '气量(m³/d)' dataUnit = '废气气量(m³/d)' } else { dataUnit = '气量(m³/h)' dataUnit = '废气气量(m³/h)' } var serLists = [] @@ -189,17 +255,17 @@ 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' // } // 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' // } }, lineStyle: { // 折线的颜色 color: ydatas[i].zxcolor, @@ -223,19 +289,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' // } // 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' // } }, lineStyle: { // 折线的颜色 color: ydatas[i].zxcolor, @@ -304,12 +370,12 @@ 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 === '二氧化硫') { maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>' @@ -322,7 +388,7 @@ } 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 } @@ -335,7 +401,8 @@ }, grid: { // 网格 top: '20%', left: '5%' left: '12%', bottom: '15%' // containLabel: true }, legend: { // 图例 @@ -476,15 +543,15 @@ // }) /** * 解决mychartDay.on('click',function(){...})事件重复触发的问题 * Date: 20200720 */ * 解决mychartDay.on('click',function(){...})事件重复触发的问题 * Date: 20200720 */ this.mychartDay.off('click') /** * 图标点击事件 * 20190426 add * */ * 图标点击事件 * 20190426 add * */ // this.mychartDay.on('click', function (params) { // // 获取当前时间，小时 // var nowHours = new Date().Format('hh') @@ -682,122 +749,89 @@ </script> <style scoped lang="less"> //.animation{ // padding: 0 1rem; // overflow: hidden; // //width: 1rem; // .infomation{ // display: flex; // //margin: 0 1rem; // overflow: hidden; // animation: move 1s linear 0s infinite; // @keyframes move { // 0% { // } // 100% { // transform: translateX(-10%); // } // } // /* 鼠标经过marquee 就停止动画 */ // &:hover { // //z-index: 9999999; // animation-play-state: paused; // } // } //} .grid-content { font-size: 8px; background-color: #2e4967; text-align: center; border-radius: 2px; margin-right: 10px; padding:0 10px } .animation { //width: 600px; //height: 0.06rem; .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{ 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:140px; background-color: #2e4967; color: #fff; 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; } input::-webkit-calendar-picker-indicator { opacity: 100; } .detailbtn{ background-color:#2e4967; text-align: center; padding: 0 7px; line-height: 20px; border-radius: 4px; margin-right: 6px; } } .el-dialog-div { //height: 50vh!important; overflow: auto; //overflow: hidden; .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 } #echarts { margin: 0; padding: 0; //height: 3rem; //border: 1px solid #396d83; //margin: 10px 10px 10px 10px; .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>
