From 0cbf795f21d787db7d6b29a59d81579a7a736ab8 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期五, 16 四月 2021 14:40:09 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue | 603 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 487 insertions(+), 116 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue b/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue index 8ec3a47..c23fb93 100644 --- a/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue +++ b/src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue @@ -15,7 +15,7 @@ <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"> @@ -37,7 +37,7 @@ 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> @@ -45,6 +45,7 @@ </template> <script> +// import mapApi from '@/api/mapApi' import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList' import dayjs from 'dayjs' export default { @@ -54,16 +55,13 @@ }, data () { return { - value1: '', - value2: '', watchData: [], dialogVisible: false, myChar: null, value: '', formInline: { - region: '', - timeStart: '', - timeEnd: '' + timeStart: null, + timeEnd: null }, myChart: null, JsonCtarts: { @@ -125,26 +123,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 @@ -158,9 +152,9 @@ this.myChart.clear() var dataUnit = '' if (datatype === 1) { - dataUnit = '姘旈噺(m鲁/d)' + dataUnit = '搴熸皵姘旈噺(m鲁/d)' } else { - dataUnit = '姘旈噺(m鲁/h)' + dataUnit = '搴熸皵姘旈噺(m鲁/h)' } var serLists = [] @@ -303,12 +297,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 === '浜屾哀鍖栫~') { @@ -322,7 +315,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 } @@ -452,7 +445,7 @@ }], series: serLists } - console.log(option) + // console.log(option) this.myChart.setOption(option) /* this.myChart.on('legendselectchanged', function (params) { @@ -525,6 +518,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// 鑾峰彇灞忓箷鐨勯珮搴� @@ -544,99 +926,88 @@ </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{ - display: flex; - >div:first-child { - margin-right: 10px; + .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 } - .pickerData{ - flex: 1; + } + } + .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; - >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> -- Gitblit v1.8.0