| | |
| | | </div> |
| | | <div class="status"> |
| | | <div v-for="item in list"> |
| | | <div :style="{ color: item.color }" class="value">{{ jobStatistics[item.field] }}</div> |
| | | <div :style="{ color: item.color }" class="value"> |
| | | {{ jobStatistics[item.field] }} |
| | | </div> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import * as echarts from 'echarts'; |
| | | import { pxToRem } from '@/utils/rem'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import CommonDateTime from '@/components/CommonDateTime.vue'; |
| | | import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home'; |
| | | import dayjs from 'dayjs'; |
| | | import * as echarts from 'echarts' |
| | | import { pxToRem } from '@/utils/rem' |
| | | import CommonTitle from '@/components/CommonTitle.vue' |
| | | import CommonDateTime from '@/components/CommonDateTime.vue' |
| | | import { getJobNumBar, getJobStatistics, getTotalJobNum } from '@/api/home' |
| | | import dayjs from 'dayjs' |
| | | |
| | | const currenDate = dayjs().format('YYYY-MM-DD'); |
| | | const newTime = ref([currenDate, currenDate]); |
| | | const currenDate = dayjs().format('YYYY-MM-DD') |
| | | const newTime = ref([currenDate, currenDate]) |
| | | const list = ref([ |
| | | { name: '计划执行', value: 89, color: '#FFFFFF', field: 'planned_executions' }, |
| | | { name: '执行中', value: 100, color: '#FFA768', field: 'running_num' }, |
| | | { name: '待执行', value: 66, color: '#FFE17E', field: 'pending_executions' }, |
| | | { name: '已执行', value: 10, color: '#8EFFAC', field: 'executed' }, |
| | | { name: '执行失败', value: 10, color: '#FF8E8E', field: 'failed_executions' }, |
| | | ]); |
| | | ]) |
| | | const option = { |
| | | grid: { |
| | | top: '15%', |
| | |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: ['1',], |
| | | data: ['1'], |
| | | axisLine: { |
| | | show: false, // 隐藏轴线 |
| | | }, |
| | |
| | | ]), |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | |
| | | const detailsFun = () => { |
| | | console.log('details'); |
| | | }; |
| | | console.log('details') |
| | | } |
| | | |
| | | let chart = null; |
| | | let chart = null |
| | | |
| | | // TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR |
| | | const getData = (value,date_enum) => { |
| | |
| | | date_enum, |
| | | // start_date: newTime.value[0], |
| | | // end_date: newTime.value[1] |
| | | }; |
| | | } |
| | | getJobStatistics(params).then(res => { |
| | | jobStatistics.value = res.data?.data || {}; |
| | | }); |
| | | jobStatistics.value = res.data?.data || {} |
| | | }) |
| | | getJobNumBar(params).then(res => { |
| | | option.xAxis.data = res.data?.data.map(item => item.name); |
| | | option.series.data = res.data?.data.map(item => item.value); |
| | | chart.setOption(option); |
| | | }); |
| | | }; |
| | | option.xAxis.data = res.data?.data.map(item => item.name) |
| | | option.series.data = res.data?.data.map(item => item.value) |
| | | chart.setOption(option) |
| | | }) |
| | | } |
| | | |
| | | const chartRef = ref(null); |
| | | const total = ref(0); |
| | | const chartRef = ref(null) |
| | | const total = ref(0) |
| | | const jobStatistics = ref({ |
| | | planned_executions: 0, |
| | | executed: 0, |
| | | running_num: 0, |
| | | failed_executions: 0, |
| | | pending_executions: 0, |
| | | }); |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | chart = echarts.init(chartRef.value); |
| | | chart = echarts.init(chartRef.value) |
| | | // 监听窗口大小变化 |
| | | window.addEventListener('resize', () => { |
| | | chart.resize(); |
| | | }); |
| | | chart.resize() |
| | | }) |
| | | getTotalJobNum().then(res => { |
| | | total.value = res.data?.data || 0; |
| | | }); |
| | | getData(newTime.value, 'TODAY'); |
| | | }); |
| | | total.value = res.data?.data || 0 |
| | | }) |
| | | getData(newTime.value, 'TODAY') |
| | | }) |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | opacity: 0.85; |
| | | |
| | | .inspection-num { |
| | | background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% 100%; |
| | | background: url('@/assets/images/home/homeLeft/inspection-num.png') no-repeat center / 100% |
| | | 100%; |
| | | width: 360px; |
| | | height: 118px; |
| | | position: relative; |