| | |
| | | </a-col> |
| | | <a-col :md="4" :sm="4" :xs="4"> |
| | | <a-form-item label="日期"> |
| | | <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange"/> |
| | | <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange" :allowClear="false"/> |
| | | </a-form-item> |
| | | </a-col> |
| | | <a-col :md="3" :sm="3" :xs="3"> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | </a-col> |
| | | <a-col :md="2" :sm="2" :xs="2"> |
| | | <a-button type="primary" @click="searchReset" icon="reload">重置</a-button> |
| | | <a-space> |
| | | <a-button type="primary" @click="searchQuery" icon="search">查询</a-button> |
| | | <a-button type="primary" @click="searchReset" icon="reload">重置</a-button> |
| | | </a-space> |
| | | </a-col> |
| | | </a-row> |
| | | </a-form> |
| | |
| | | import moment from 'moment' |
| | | import { putAction, getAction } from '@/api/manage' |
| | | import $ from 'jquery' |
| | | import AFormItem from 'ant-design-vue/es/form/FormItem' |
| | | import * as echarts from 'echarts' |
| | | export default { |
| | | name: 'StatisticsLegend', |
| | | components:{ |
| | | AFormItem |
| | | |
| | | }, |
| | | props: { equip: {} }, |
| | | data(){ |
| | | return{ |
| | |
| | | } |
| | | }, |
| | | created(){ |
| | | |
| | | |
| | | let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD'); |
| | | |
| | | |
| | | this.queryParams.collectTime = collectTime; |
| | | |
| | | this.queryParams.dateTime = this.queryParams.collectTime.format('YYYYMMDD') |
| | | this.initEquipmentNode('-1') |
| | | this.queryStatistical(); |
| | | this.queryParams.collectTime = moment().add(-1,'d').format('YYYY-MM-DD') |
| | | this.queryParams.dateTime = moment().add(-1,'d').format('YYYYMMDD') |
| | | this.initEquipmentNode() |
| | | // this.queryStatistical(); |
| | | // this.getTime(37800); |
| | | }, |
| | | |
| | |
| | | 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(){ |
| | | 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.openingLong = this.getTime(res.result.openLong) |
| | | this.waitingLong = this.getTime(res.result.waitLong); |
| | | this.processLong = this.getTime(res.result.processLong); |
| | | this.closedLong = this.getTime(res.result.closeLong); |
| | | this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong); |
| | | this.draw(); |
| | | } |
| | | }) |
| | | getAction(this.url.dayStatisticalRate,this.queryParams).then(res =>{ |
| | | if(res.success){ |
| | | this.StatCharOpeningRate = res.result.openRate; |
| | | this.StatCharUsedRate = res.result.utilizationRate; |
| | | this.UtilizationHeight = res.result.openRate; |
| | | 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.closedLong = this.getTime(res.result.closeLong); |
| | | this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong); |
| | | this.draw(); |
| | | } |
| | | }) |
| | | }, |
| | | 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) { |
| | | initEquipmentNode() { |
| | | 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) |
| | | _this.$set(this.queryParams, 'parentId', res.result[0].key) |
| | | } |
| | | this.queryStatistical() |
| | | // console.log(res.result[0].entity.tierName) |
| | | _this.$set(this.queryParam, 'tierName', res.result[0].title) |
| | | } else { |
| | | this.$message.warn(res.message) |
| | | // this.$message.warn(res.message) |
| | | this.$notification.warning({ |
| | | message:'消息', |
| | | description:res.message |
| | | }); |
| | | } |
| | | }).finally(() => { |
| | | this.loading = false |
| | |
| | | }, |
| | | searchReset() { |
| | | this.queryParam = {} |
| | | this.queryParams = {} |
| | | this.queryParams = { |
| | | collectTime:moment().add(-1,'d').format('YYYY-MM-DD'), |
| | | dateTime:moment().add(-1,'d').format('YYYYMMDD') |
| | | } |
| | | this.initEquipmentNode() |
| | | // this.dates = [] |
| | | this.queryStatistical() |
| | | // this.queryStatistical() |
| | | // this.onClearSelected() |
| | | }, |
| | | searchQuery(){ |
| | |
| | | this.$set(this.queryParam, 'tierName', val.title) |
| | | this.$set(this.queryParam, 'equipmentId', val.equipmentId) |
| | | this.queryParams.parentId = '' |
| | | this.queryParams.equipmentIds = val.equipmentId |
| | | this.searchQuery() |
| | | this.queryParams.equipmentId = val.equipmentId |
| | | }else{ |
| | | this.queryParams.parentId = val.key |
| | | this.queryParams.equipmentIds = '' |
| | | this.queryParams.equipmentId = '' |
| | | this.$set(this.queryParam, 'tierName', val.title) |
| | | this.searchQuery() |
| | | } |
| | | this.searchQuery() |
| | | } |
| | | // this.searchQuery(); |
| | | |
| | | |
| | | } |
| | | |
| | | } |