| | |
| | | <div class="df mb50" > |
| | | <div class="wrap static1"> |
| | | <div class="header" style="text-align: center"> |
| | | <div class="home_title" style="text-align: center;width: 100%">各类型工单占比统计</div> |
| | | <div class="home_title" style="text-align: center;width: 80%">各类型工单占比统计({{searchForm.timeName}})</div> |
| | | <div style="text-align: right;width: 150px;font-size: 12px;height: 25px"> |
| | | <el-form :model="searchForm" label-width="100px" inline > |
| | | <el-select v-model="searchForm.timeType" :popper-append-to-body="true" clearable placeholder="时间范围" @change="reloadDataByType()"> |
| | | <el-option value="0" label="本周"/> |
| | | <el-option value="1" label="本月"/> |
| | | <el-option value="2" label="本季度"/> |
| | | <el-option value="3" label="本年"/> |
| | | </el-select> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | <div class="echart" style="height: 400px" > |
| | | <div id="circleChart0"></div> |
| | |
| | | }, |
| | | data () { |
| | | return { |
| | | searchForm: { |
| | | timeType: null, |
| | | timeName: '全部' |
| | | }, |
| | | colors, |
| | | nowDate: '', |
| | | nowWeek: '', |
| | | headerData: {}, |
| | | headerData1: {}, |
| | | staticData0: {}, |
| | | staticData01: {}, |
| | | staticData1: {}, |
| | |
| | | this.getWorkBody2() |
| | | this.getWorkBody3() |
| | | // this.getWorkBody() |
| | | }, |
| | | reloadDataByType () { |
| | | getIndexData({timeType: this.searchForm.timeType }).then(res => { |
| | | if (this.searchForm.timeType == '0') { |
| | | this.searchForm.timeName = '本周' |
| | | } else if (this.searchForm.timeType =='1') { |
| | | this.searchForm.timeName = '本月' |
| | | } else if (this.searchForm.timeType =='2') { |
| | | this.searchForm.timeName = '本季度' |
| | | } else if (this.searchForm.timeType == '3') { |
| | | this.searchForm.timeName = '本年' |
| | | } else { |
| | | this.searchForm.timeName = '全部' |
| | | } |
| | | this.headerData1 =res || [] |
| | | this.initAllData() |
| | | }) |
| | | }, |
| | | getWorkBody0 () { |
| | | getWorkOrderData({ queryType: 0, orderType: 0 }).then(res => { |
| | |
| | | getWorkHead () { |
| | | getIndexData({ }).then(res => { |
| | | this.headerData = res || {} |
| | | var cdata = [] |
| | | cdata.push({ name: '跌绊滑事件', value: res.dbhNum || 0 }) |
| | | cdata.push({ name: 'DCA事件', value: res.dcaChildNum || 0 }) |
| | | cdata.push({ name: 'SHE事件', value: res.sheNum || 0 }) |
| | | this.initEchartCircleDo('circleChart0', '各类型事件工单上报统计', '', cdata) |
| | | var xdata = ['SHE事件', '跌绊滑事件', 'DCA事件'] |
| | | var ydata = [] |
| | | ydata.push({ name: '已解决', stack: 'cateNum', type: 'bar', unit: '项', color: '#f07e6f', data: [res.sheNum || 0, res.dbhYesNum || 0, res.dcaChildYesNum || 0] }) |
| | | ydata.push({ name: '未解决', stack: 'cateNum', type: 'bar', unit: '项', color: '#8383ff', data: [0, res.dbhNoNum || 0, res.dcaChildNoNum || 0] }) |
| | | ydata.push({ name: '总单量', type: 'bar', unit: '次', color: '#29aeff', data: [res.sheNum || 0, res.dbhNum || 0, res.dcaChildNum || 0] }) |
| | | this.initEchartDataDo('各类型事件状态统计', 'circleChart1', xdata, ydata) |
| | | this.headerData1 = res || {} |
| | | this.initAllData() |
| | | }) |
| | | }, |
| | | initAllData(){ |
| | | var cdata = [] |
| | | cdata.push({ name: '跌绊滑事件', value: this.headerData1.dbhNum || 0 }) |
| | | cdata.push({ name: 'DCA事件', value: this.headerData1.dcaChildNum || 0 }) |
| | | cdata.push({ name: 'SHE事件', value: this.headerData1.sheNum || 0 }) |
| | | this.initEchartCircleDo('circleChart0', '各类型事件工单上报统计', '', cdata) |
| | | var xdata = ['SHE事件', '跌绊滑事件', 'DCA事件'] |
| | | var ydata = [] |
| | | ydata.push({ name: '已解决', stack: 'cateNum', type: 'bar', unit: '项', color: '#f07e6f', data: [this.headerData1.sheNum || 0, this.headerData1.dbhYesNum || 0, this.headerData1.dcaChildYesNum || 0] }) |
| | | ydata.push({ name: '未解决', stack: 'cateNum', type: 'bar', unit: '项', color: '#8383ff', data: [0, this.headerData1.dbhNoNum || 0, this.headerData1.dcaChildNoNum || 0] }) |
| | | ydata.push({ name: '总单量', type: 'bar', unit: '次', color: '#29aeff', data: [this.headerData1.sheNum || 0, this.headerData1.dbhNum || 0, this.headerData1.dcaChildNum || 0] }) |
| | | this.initEchartDataDo('各类型事件状态统计', 'circleChart1', xdata, ydata) |
| | | }, |
| | | updateDate () { |
| | | this.nowDate = dayjs().format('YYYY年M月D日') |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | ::v-deep .el-input--small .el-input__inner { |
| | | height: 30px !important; // 这里就是修改默认高度 |
| | | width: 120px; |
| | | } |
| | | div { |
| | | box-sizing: border-box; |
| | | } |