| | |
| | | <!-- <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 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> |
| | |
| | | methods: { |
| | | 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 = [] |
| | |
| | | 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>' |
| | |
| | | } 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 |
| | | } |
| | |
| | | </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; |
| | | 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 { |
| | |
| | | //margin: 10px 10px 10px 10px; |
| | | .from-search{ |
| | | display: flex; |
| | | padding:5px; |
| | | padding:0.02rem; |
| | | >div{margin-left: 10px} |
| | | .pickerMon{ |
| | | display: flex; |
| | |
| | | } |
| | | /deep/.el-input__inner{ |
| | | position: relative; |
| | | width:140px; |
| | | width:1rem; |
| | | background-color: #2e4967; |
| | | color: #fff; |
| | | font-size: 12px; |
| | | height: 24px; |
| | | font-size: 0.08rem; |
| | | height: 0.15rem; |
| | | padding: 0; |
| | | border-color:#00fff6; |
| | | text-align: center; |
| | | border:none; |
| | | text-align: center; |
| | | z-index: 9999; |
| | | //padding-left:20px ; |
| | | //padding: 0!important; |
| | | } |
| | | /deep/.el-input__icon{ |
| | | display: block; |
| | | width: 140px; |
| | | height: 22px; |
| | | line-height: 22px; |
| | | width:1rem; |
| | | height: 0.15rem; |
| | | line-height: 0.15rem; |
| | | 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; |
| | | } |
| | |
| | | background-color:#2e4967; |
| | | text-align: center; |
| | | padding: 0 7px; |
| | | line-height: 20px; |
| | | height: 0.15rem; |
| | | line-height: 0.15rem; |
| | | border-radius: 4px; |
| | | margin-right: 6px; |
| | | } |
| | | } |
| | | .el-dialog-div { |
| | | //height: 50vh!important; |
| | | overflow: auto; |
| | | //overflow: hidden; |
| | | } |
| | | |
| | | #echarts { |
| | | margin: 0; |
| | | padding: 0; |
| | | //height: 3rem; |
| | | //border: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | } |
| | | } |
| | | </style> |