| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <CommonDateTime :style="{ top: pxToRem(19) }" v-model="newTime" @change="dateChange" /> |
| | | <CommonDateTime :style="{ top: pxToRem(19) }" v-model="newTime" @change="getData" /> |
| | | <div class="chart-container" ref="chartRef"></div> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | 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' }, |
| | |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: [ |
| | | '1', |
| | | '2', |
| | | '3', |
| | | '4', |
| | | '5', |
| | | '6', |
| | | '7', |
| | | '8', |
| | | '9', |
| | | '10', |
| | | '11', |
| | | '12', |
| | | '13', |
| | | '14', |
| | | '15', |
| | | '16', |
| | | '17', |
| | | '18', |
| | | '19', |
| | | '20', |
| | | '21', |
| | | '22', |
| | | '23', |
| | | '24', |
| | | '25', |
| | | '26', |
| | | '27', |
| | | '28', |
| | | '29', |
| | | '30', |
| | | ], |
| | | data: ['1',], |
| | | axisLine: { |
| | | show: false, // 隐藏轴线 |
| | | }, |
| | |
| | | }, |
| | | }, |
| | | series: { |
| | | data: [ |
| | | 10, 15, 8, 20, 12, 18, 15, 22, 16, 19, 14, 17, 21, 13, 16, 18, 15, 20, 17, 22, 19, 16, 14, 18, |
| | | 21, 15, 17, 20, 16, 18, |
| | | ], |
| | | data: [10], |
| | | type: 'bar', |
| | | barWidth: '60%', |
| | | itemStyle: { |
| | |
| | | console.log('details'); |
| | | }; |
| | | |
| | | const dateChange = value => { |
| | | newTime.value = value; |
| | | getData(); |
| | | }; |
| | | let chart = null; |
| | | const getData = () => { |
| | | |
| | | // TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR |
| | | const getData = (value,date_enum) => { |
| | | const params = { |
| | | date_enum: 'TODAY', |
| | | date_enum, |
| | | // start_date: newTime.value[0], |
| | | // end_date: newTime.value[1] |
| | | }; |
| | |
| | | getTotalJobNum().then(res => { |
| | | total.value = res.data?.data || 0; |
| | | }); |
| | | getData(); |
| | | getData(newTime.value, 'TODAY'); |
| | | }); |
| | | </script> |
| | | |