From b9e11f18c961df43f632b85c04cd730bde21fc76 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 19 四月 2021 13:10:58 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue | 494 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 432 insertions(+), 62 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue b/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue index c7d73cf..927e8a3 100644 --- a/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue +++ b/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue @@ -1,21 +1,14 @@ <!-- 灏忔椂鏁版嵁 --> <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"> @@ -25,16 +18,6 @@ </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> @@ -43,12 +26,11 @@ <!-- 鏄庣粏寮规 --> <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> @@ -56,27 +38,44 @@ </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: '鍔犵儹鐐夌儫姘�', @@ -136,26 +135,22 @@ } }, 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.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.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.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 @@ -169,9 +164,9 @@ this.myChart.clear() var dataUnit = '' if (datatype === 1) { - dataUnit = '姘旈噺(m鲁/d)' + dataUnit = '搴熸皵姘旈噺(m鲁/d)' } else { - dataUnit = '姘旈噺(m鲁/h)' + dataUnit = '搴熸皵姘旈噺(m鲁/h)' } var serLists = [] @@ -314,12 +309,11 @@ 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 === '浜屾哀鍖栫~') { @@ -333,7 +327,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 } @@ -346,7 +340,8 @@ }, grid: { // 缃戞牸 top: '20%', - left: '5%' + left: '6%', + bottom: '15%' // containLabel: true }, legend: { // 鍥句緥 @@ -462,7 +457,7 @@ }], series: serLists } - console.log(option) + // console.log(option) this.myChart.setOption(option) /* this.myChart.on('legendselectchanged', function (params) { @@ -535,6 +530,395 @@ // 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 鑾峰彇鐩戞祴鐐筰d 姹℃煋鐗﹊d 妫�娴嬮」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 鑾峰彇鐩戞祴鐐筰d 姹℃煋鐗﹊d 妫�娴嬮」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// 鑾峰彇灞忓箷鐨勯珮搴� @@ -554,21 +938,6 @@ </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; @@ -603,6 +972,7 @@ height: 0.15rem; padding: 0; border:none; + z-index: 9999; text-align: center; //padding-left:20px ; //padding: 0!important; -- Gitblit v1.8.0