<!--工单情况--> <template> <panel-card title="工单分析"> <template slot="func"> <el-col :span="16"> <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" size="small" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" @change="refresh" /> </el-col> </template> <ve-bar :data="chartData" :extend="extend" :settings="chartSettings" /> </panel-card> </template> <script> import PanelCard from '@/components/BigData/Card/panelCard' import { getSearchLastWeekTime } from '@/utils/dateutils' import { jobStaticsByDept } from '@/api/data/dataStatics' export default { name: 'JobAnalysis', components: { PanelCard }, data() { return { listQuery: { beginTime: '', endTime: '' }, // 查询条件 timeRange: [], // 时间范围 chartSettings: { labelMap: { 'deptName': '权属单位', 'beforeGet': '待处理', 'beforeConfirm': '待确认', 'inHandle': '处理中', 'over': '已完成' }, stack: { 'xxx': ['beforeGet', 'beforeConfirm', 'inHandle', 'over'] } }, extend: { xAxis: { type: 'value', minInterval: 1 }, series: { barMaxWidth: 35 } }, chartData: { columns: ['deptName', 'beforeGet', 'beforeConfirm', 'inHandle', 'over'], rows: [] } } }, created() { this.timeRange = getSearchLastWeekTime() this.refresh() }, mounted() { }, methods: { refresh() { this.handleDateTime() this.fetchData() }, fetchData() { jobStaticsByDept(this.listQuery).then(response => { this.chartData.rows = response.data const maxValue = Math.max.apply(Math, response.data.map(function(item) { return parseInt(item.beforeGet) + parseInt(item.beforeConfirm) + parseInt(item.inHandle) + parseInt(item.over) })) if (maxValue < 10) { this.extend.xAxis = { type: 'value', minInterval: 1, max: 10 } } else { this.extend.xAxis = { type: 'value', minInterval: 1 } } }) }, // 处理时间 handleDateTime() { if (this.timeRange && this.timeRange.length > 0) { this.listQuery.beginTime = this.timeRange[0] this.listQuery.endTime = this.timeRange[1] } else { this.listQuery.beginTime = '' this.listQuery.endTime = '' } } } } </script> <style lang="scss" scoped> </style>