| | |
| | | import * as echarts from 'echarts'; |
| | | import { jobEventBar } from '@/api/home/task'; |
| | | import dayjs from 'dayjs'; |
| | | import useEchartsResize from '@/hooks/useEchartsResize' |
| | | import useEchartsResize from '@/hooks/useEchartsResize'; |
| | | import { useStore } from 'vuex'; |
| | | |
| | | const store = useStore(); |
| | | |
| | | // const setTaskSearchParams = computed(() => store.state.task.setTaskSearchParams); |
| | | |
| | | // 日期 |
| | | const currenDate = dayjs().format('YYYY-MM-DD'); |
| | |
| | | |
| | | const option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: '{b}: {c} 件' |
| | | }, |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow', |
| | | }, |
| | | }, |
| | | legend: { |
| | | data: ['任务', '事件'], |
| | | top: '2%', |
| | |
| | | containLabel: true |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | color: '#fff', |
| | | interval: 0, |
| | | rotate: 30 |
| | | } |
| | | }, |
| | | type: 'category', |
| | | // data: ['1月', '2月', '3月', '4月', '5月', '6月'], |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#fff', |
| | | }, |
| | | }, |
| | | axisLabel: { |
| | | color: '#fff', |
| | | }, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '单位:件', |
| | |
| | | series: [ |
| | | { |
| | | name: '任务', |
| | | type: 'bar', |
| | | barWidth: '6px', |
| | | type: 'bar', |
| | | barWidth: '20%', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#1EE7C5' }, |
| | |
| | | { |
| | | name: '事件', |
| | | type: 'bar', |
| | | barWidth: '6px', |
| | | barWidth: '20%', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#69BCFF' }, |
| | |
| | | }; |
| | | |
| | | // 获取行业统计数据 |
| | | const getJobEventBar = (value,date_enum) => { |
| | | jobEventBar({date_enum}).then(res => { |
| | | const getJobEventBar = (value) => { |
| | | jobEventBar(value).then(res => { |
| | | if (res.data.code !== 0) return; |
| | | option.xAxis.data = res.data.data.map(item => item.name); |
| | | option.series[0].data = res.data?.data.map(item => item.data[0].value); |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 添加监听 |
| | | watch(() => store.state.task.taskSearchParams, (newVal) => { |
| | | if (newVal) { |
| | | getJobEventBar(newVal); |
| | | } |
| | | }, { deep: true }); |
| | | |
| | | onMounted(() => { |
| | | getJobEventBar(newTime.value, 'CURRENT_YEAR'); |
| | | getJobEventBar({date_enum: 'TODAY'}); |
| | | }); |
| | | |
| | | </script> |