| | |
| | | |
| | | <script> |
| | | |
| | | import {getInspectPerson, getInspectTask} from "../../../../../../api/inspectStatistics"; |
| | | |
| | | export default { |
| | | name: 'index', |
| | | data(){ |
| | | return{ |
| | | numData:[], |
| | | claimedData:[], |
| | | timeData:[], |
| | | completedData:[], |
| | | uncompletedData:[], |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.drawTodayLine() |
| | | }, |
| | | methods:{ |
| | | async updateData(val) { |
| | | let res = await getInspectTask(val) |
| | | if(res.data.code === '200'){ |
| | | this.claimedData = res.data.data.claimed.map(item =>{ |
| | | return item.num |
| | | }) |
| | | this.completedData = res.data.data.completed.map(item =>{ |
| | | return item.num |
| | | }) |
| | | this.uncompletedData = res.data.data.uncompleted.map(item =>{ |
| | | return item.num |
| | | }) |
| | | this.timeData = res.data.data.claimed.map(item =>{ |
| | | return item.taskDate |
| | | }) |
| | | }else{ |
| | | this.$message({ |
| | | type:'warning', |
| | | message:res.data.message |
| | | }) |
| | | } |
| | | await this.drawTodayLine() |
| | | }, |
| | | async drawTodayLine(){ |
| | | this.myChart = this.$echarts.init(document.getElementById('todayUnusual')) |
| | | this.myChart.setOption({ |
| | |
| | | trigger: 'item' |
| | | }, |
| | | legend: { |
| | | left: 'center', |
| | | top: '5%', |
| | | left: 'center' |
| | | data:['当日认领数量','当日完成数量','累计领取未完成数量'] |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: this.timeData |
| | | }, |
| | | color:['#0180ff','#91cc75','#ee6666',], |
| | | yAxis: { |
| | | type: 'value' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | avoidLabelOverlap: false, |
| | | itemStyle: { |
| | | borderRadius: 10, |
| | | borderColor: '#fff', |
| | | borderWidth: 2 |
| | | }, |
| | | label: { |
| | | show: false, |
| | | position: 'center' |
| | | }, |
| | | emphasis: { |
| | | label: { |
| | | show: true, |
| | | fontSize: '40', |
| | | fontWeight: 'bold' |
| | | data: this.claimedData, |
| | | type: 'bar', |
| | | name:'当日认领数量', |
| | | showBackground: true, |
| | | backgroundStyle: { |
| | | color: '#91cc75' |
| | | } |
| | | }, |
| | | color:['#91cc75','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4'], |
| | | labelLine: { |
| | | show: false |
| | | { |
| | | data: this.completedData, |
| | | type: 'bar', |
| | | name:'当日完成数量', |
| | | showBackground: true, |
| | | backgroundStyle: { |
| | | color: '#fac858' |
| | | } |
| | | }, |
| | | data: [ |
| | | { value: 1048, name: '今日完成' }, |
| | | { value: 735, name: '今日异常' }, |
| | | { |
| | | data: this.uncompletedData, |
| | | type: 'bar', |
| | | name:'累计领取未完成数量', |
| | | showBackground: true, |
| | | backgroundStyle: { |
| | | color: '#ee6666' |
| | | } |
| | | }, |
| | | ] |
| | | } |
| | | ] |
| | | }) |
| | | } |
| | | } |