| | |
| | | <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="3" :sm="3" :xs="3"> |
| | | <a-col :md="2" :sm="2" :xs="2"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-col> |
| | | <a-col :md="2" :sm="2" :xs="2"> |
| | |
| | | containLabel: true |
| | | }, |
| | | legend:{ |
| | | selected:{ |
| | | "曲线":false, |
| | | }, |
| | | // selected:{ |
| | | // "曲线":false, |
| | | // }, |
| | | top:'0', |
| | | right:'10', |
| | | //设置单选多选模式 |
| | | selectedMode:'single', |
| | | // selectedMode:'single', |
| | | icon:"pin", |
| | | data:[ |
| | | { |
| | | name:'曲线', |
| | | textStyle:{ |
| | | padding:4, |
| | | color:'#e957ff', |
| | | // borderWidth:1, |
| | | fontSize:16, |
| | | // borderColor:'#50E6D7' |
| | | } |
| | | }, |
| | | // { |
| | | // name:'曲线', |
| | | // textStyle:{ |
| | | // padding:4, |
| | | // color:'#e957ff', |
| | | // // borderWidth:1, |
| | | // fontSize:16, |
| | | // // borderColor:'#50E6D7' |
| | | // } |
| | | // }, |
| | | { |
| | | name:'柱状图', |
| | | textStyle:{ |
| | |
| | | } |
| | | }, |
| | | series:[ |
| | | { |
| | | name:'曲线', |
| | | type: 'line', |
| | | smooth:true, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | label:{ |
| | | show:true, |
| | | position:"top", |
| | | textStyle:{ |
| | | color:'#000', |
| | | }, |
| | | formatter:"时长:{c}H" |
| | | }, |
| | | itemStyle: { |
| | | color: "rgb(87, 120, 225)", |
| | | borderColor: "#fff", |
| | | borderWidth: 2, |
| | | shadowColor: 'rgba(0, 0, 0, .3)', |
| | | }, |
| | | lineStyle: { |
| | | normal: { |
| | | color:"rgb(87, 120, 225)", |
| | | shadowColor: 'rgba(87, 120, 225, .4)', |
| | | shadowBlur: 8, |
| | | shadowOffsetY: 10, |
| | | shadowOffsetX: 0, |
| | | }, |
| | | }, |
| | | areaStyle: { |
| | | normal: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
| | | offset: 0, |
| | | color: 'rgba(87, 120, 225, .6)' |
| | | }, { |
| | | offset: 1, |
| | | color: 'rgba(87, 120, 225, .3)' |
| | | }]), |
| | | } |
| | | }, |
| | | data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong], |
| | | }, |
| | | // { |
| | | // name:'曲线', |
| | | // type: 'line', |
| | | // smooth:true, |
| | | // symbol: 'circle', |
| | | // symbolSize: 8, |
| | | // label:{ |
| | | // show:true, |
| | | // position:"top", |
| | | // textStyle:{ |
| | | // color:'#000', |
| | | // }, |
| | | // formatter:"时长:{c}H" |
| | | // }, |
| | | // itemStyle: { |
| | | // color: "rgb(87, 120, 225)", |
| | | // borderColor: "#fff", |
| | | // borderWidth: 2, |
| | | // shadowColor: 'rgba(0, 0, 0, .3)', |
| | | // }, |
| | | // lineStyle: { |
| | | // normal: { |
| | | // color:"rgb(87, 120, 225)", |
| | | // shadowColor: 'rgba(87, 120, 225, .4)', |
| | | // shadowBlur: 8, |
| | | // shadowOffsetY: 10, |
| | | // shadowOffsetX: 0, |
| | | // }, |
| | | // }, |
| | | // areaStyle: { |
| | | // normal: { |
| | | // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
| | | // offset: 0, |
| | | // color: 'rgba(87, 120, 225, .6)' |
| | | // }, { |
| | | // offset: 1, |
| | | // color: 'rgba(87, 120, 225, .3)' |
| | | // }]), |
| | | // } |
| | | // }, |
| | | // data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong], |
| | | // }, |
| | | { |
| | | name:'柱状图', |
| | | type: 'bar', |
| | | data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong], |
| | | // data:[22,3,5,6], |
| | | barWidth: 25, |
| | | label:{ |
| | | show:true, |
| | |
| | | textStyle:{ |
| | | color:'#000', |
| | | }, |
| | | formatter:"时长:{c}H" |
| | | // formatter:"时长:{c}H", |
| | | formatter:params=>{ |
| | | const value=String(params.value) |
| | | return value.length==2&&value[0]==='0'?`时长:${value.slice(1)}H`:`时长:${value}H` |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function(params) { |
| | | let colorList = [ |
| | | ["#6496e9","#6bded3"], |
| | | ["#ffbb65","#fdc68b"], |
| | | ["#849db8","#b4b8cc"], |
| | | ["#4fe1c5","#4ecee1"], |
| | | ["#9978fa","#88a1fa"], |
| | | // ["#9978fa","#88a1fa"], |
| | | ["#ffbb65","#fdc68b"], |
| | | ]; |
| | | // return colorList[params.dataIndex]; |
| | | let colorItem = colorList[params.dataIndex]; |
| | |
| | | { |
| | | type: 'bar', |
| | | data: [this.openingLong,this.totalLong], |
| | | // data:[22,22], |
| | | barWidth: 25, |
| | | label:{ |
| | | show:true, |
| | | position:"top", |
| | | textStyle:{ |
| | | color:'#000', |
| | | }, |
| | | // formatter:"时长:{c}H", |
| | | formatter:params=>{ |
| | | const value=String(params.value) |
| | | return value.length==2&&value[0]==='0'?`时长:${value.slice(1)}H`:`时长:${value}H` |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function(params) { |
| | | let colorList = [ |
| | | ["#6496e9","#6bded3"], |
| | | ["#ffbb65","#fdc68b"], |
| | | ["#9978fa","#88a1fa"], |
| | | ]; |
| | | // return colorList[params.dataIndex]; |
| | | let colorItem = colorList[params.dataIndex]; |
| | |
| | | series: [{ |
| | | type: 'bar', |
| | | data: [this.processLong,this.openingLong], |
| | | // data:[22,22], |
| | | barWidth: 25, |
| | | label:{ |
| | | show:true, |
| | | position:"top", |
| | | textStyle:{ |
| | | color:'#000', |
| | | }, |
| | | // formatter:"时长:{c}H", |
| | | formatter:params=>{ |
| | | const value=String(params.value) |
| | | return value.length==2&&value[0]==='0'?`时长:${value.slice(1)}H`:`时长:${value}H` |
| | | } |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | | color: function(params) { |
| | | let colorList = [ |
| | | ["#4fe1c5","#4ecee1"], |
| | | ["#9978fa","#88a1fa"], |
| | | ["#6496e9","#6bded3"], |
| | | ]; |
| | | // return colorList[params.dataIndex]; |
| | | let colorItem = colorList[params.dataIndex]; |
| | |
| | | StartupLine.setOption(StartupLine_option); |
| | | }, |
| | | queryStatistical(){ |
| | | if(this.queryParams.collectTime){ |
| | | getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{ |
| | | if(res.success){ |
| | | // console.log(res); |
| | | this.StatCharOpeningRate = res.result.openRate; |
| | | this.StatCharUsedRate = res.result.utilizationRate; |
| | | this.UtilizationHeight = res.result.openRate; |
| | | this.StatCharUsedopeningRate = res.result.StartupHeight; |
| | | this.StartupHeight = res.result.StartupHeight; |
| | | this.StatCharUsedopeningRate = res.result.usedOpenRate; |
| | | this.StartupHeight = res.result.usedOpenRate; |
| | | this.openingLong = this.getTime(res.result.openLong) |
| | | this.waitingLong = this.getTime(res.result.waitLong); |
| | | this.processLong = this.getTime(res.result.processLong); |
| | |
| | | this.draw(); |
| | | } |
| | | }) |
| | | }else{ |
| | | this.$notification.warning({ |
| | | message:'消息', |
| | | description:'请选择时间' |
| | | }) |
| | | } |
| | | }, |
| | | dataChange(val) { |
| | | this.queryParam.collectTime1 = ""; |
| | | this.queryParams.dateTime = val.format('YYYYMMDD') |
| | | this.queryParams.collectTime = val.format('YYYY-MM-DD'); |
| | | |
| | | if(val){ |
| | | this.queryParams.dateTime = val.format('YYYYMMDD') |
| | | this.queryParams.collectTime = val.format('YYYY-MM-DD'); |
| | | } |
| | | }, |
| | | initEquipmentNode(id) { |
| | | let _this = this |
| | | getAction(this.url.getBaseTree).then((res) => { |
| | | if (res.success) { |
| | | if(res.result[0]){ |
| | | _this.$set(this.queryParam, 'tierName', res.result[0].title) |
| | | } |
| | | // console.log(res.result[0].entity.tierName) |
| | | _this.$set(this.queryParam, 'tierName', res.result[0].title) |
| | | |
| | | } else { |
| | | // this.$message.warn(res.message) |
| | | this.$notification.warning({ |
| | |
| | | this.queryParam = {} |
| | | this.queryParams = {} |
| | | // this.dates = [] |
| | | this.queryStatistical() |
| | | // this.queryStatistical() |
| | | // this.onClearSelected() |
| | | }, |
| | | searchQuery(){ |
| | |
| | | this.$set(this.queryParam, 'equipmentId', val.equipmentId) |
| | | this.queryParams.parentId = '' |
| | | this.queryParams.equipmentId = val.equipmentId |
| | | this.searchQuery() |
| | | }else{ |
| | | this.queryParams.parentId = val.key |
| | | this.queryParams.equipmentId = '' |
| | | this.$set(this.queryParam, 'tierName', val.title) |
| | | this.searchQuery() |
| | | } |
| | | this.searchQuery() |
| | | } |
| | | // this.searchQuery(); |
| | | |
| | | |
| | | } |
| | | |
| | | } |