|
|
@@ -17,6 +17,7 @@
|
|
|
size="small"
|
|
|
style="width: 90px"
|
|
|
placeholder="选择月份"
|
|
|
+ @change="dataChange"
|
|
|
/>
|
|
|
<a-date-picker
|
|
|
v-if="activeBtn === 2"
|
|
|
@@ -31,6 +32,7 @@
|
|
|
@openChange="openChange"
|
|
|
@panelChange="panelChange"
|
|
|
@pressEnter="handleSaveOk()"
|
|
|
+ @change="dataChange"
|
|
|
/>
|
|
|
</span>
|
|
|
</span>
|
|
|
@@ -74,6 +76,7 @@ export default defineComponent({
|
|
|
year: moment().format('YYYY'),
|
|
|
yearShow: false,
|
|
|
timer: null,
|
|
|
+ loading: false,
|
|
|
});
|
|
|
const domRef = ref(null);
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
@@ -88,31 +91,96 @@ export default defineComponent({
|
|
|
return current && current > moment().endOf('year');
|
|
|
};
|
|
|
|
|
|
+ const dataChange = () => {
|
|
|
+ queryData();
|
|
|
+ };
|
|
|
+
|
|
|
/**
|
|
|
* 查询统计数据
|
|
|
*/
|
|
|
const queryData = async () => {
|
|
|
- const res = await queryApiUseCountDays();
|
|
|
let xAxisData = [],
|
|
|
seriesData = [];
|
|
|
-
|
|
|
- if (res.dateArr) {
|
|
|
- res.dateArr.map((item) => {
|
|
|
- const Arr = item.split('-');
|
|
|
- xAxisData.push(`${Arr[1]}/${Arr[2]}`);
|
|
|
- });
|
|
|
- res.list.map((item) => {
|
|
|
- seriesData.push(parseInt(item));
|
|
|
+ // const res = await queryApiUseCountDays();
|
|
|
+ // if (res.dateArr) {
|
|
|
+ // res.dateArr.map((item) => {
|
|
|
+ // const Arr = item.split('-');
|
|
|
+ // xAxisData.push(`${Arr[1]}/${Arr[2]}`);
|
|
|
+ // });
|
|
|
+ // res.list.map((item) => {
|
|
|
+ // seriesData.push(parseInt(item));
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ data.loading = true;
|
|
|
+ let params = null;
|
|
|
+ //生成查询条件
|
|
|
+ if (data.activeBtn === 1) {
|
|
|
+ //月类型统计
|
|
|
+ params = {
|
|
|
+ startCreateTimeStr: moment(data.month).startOf('months').format('YYYY-MM-DD'), //获取当月的一号
|
|
|
+ endCreateTimeStr: moment(data.month).endOf('months').format('YYYY-MM-DD'), //获取当月的最后一天
|
|
|
+ tjType: data.activeBtn,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ //年类型统计
|
|
|
+ params = {
|
|
|
+ startCreateTimeStr: moment(data.year + '-01-01')
|
|
|
+ .startOf('year')
|
|
|
+ .format('YYYY-MM-DD'), //获取年初第一天
|
|
|
+ endCreateTimeStr: moment(data.year + '-01-01')
|
|
|
+ .endOf('year')
|
|
|
+ .format('YYYY-MM-DD'), //获取年末最后一天
|
|
|
+ tjType: data.activeBtn,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ data.allTimes = 0;
|
|
|
+ if (!params) return;
|
|
|
+ const res = await queryIserverUseCountByType(params);
|
|
|
+ data.loading = false;
|
|
|
+ if (res) {
|
|
|
+ //如果是月类型统计,生成所有日期
|
|
|
+ if (data.activeBtn === 1) {
|
|
|
+ for (
|
|
|
+ let t = params.startCreateTimeStr;
|
|
|
+ moment(params.endCreateTimeStr).diff(moment(t), 'days') > 0;
|
|
|
+ t = moment(t).add(1, 'days').format('YYYY-MM-DD')
|
|
|
+ ) {
|
|
|
+ //如果日期大于当前日期,跳过
|
|
|
+ xAxisData.push(moment(t).format('MM/DD'));
|
|
|
+ if (res.length === 0) seriesData.push(0);
|
|
|
+ else {
|
|
|
+ const obj = res.find(
|
|
|
+ (item) => item['STATISTICS_START_TIME'] === moment(t).format(YYYYMMDD)
|
|
|
+ );
|
|
|
+ seriesData.push(obj ? parseInt(obj['SUM(COUNT)']) : 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (
|
|
|
+ let t = moment(params.startCreateTimeStr).format('YYYY-MM');
|
|
|
+ moment(params.endCreateTimeStr).diff(moment(t), 'months') > 0;
|
|
|
+ t = moment(t).add(1, 'months').format('YYYY-MM')
|
|
|
+ ) {
|
|
|
+ //如果日期大于当前日期,跳过
|
|
|
+ xAxisData.push(parseInt(moment(t).format('MM')) + '月');
|
|
|
+ if (res.length === 0) seriesData.push(0);
|
|
|
+ else {
|
|
|
+ const obj = res.find(
|
|
|
+ (item) => item['STATISTICS_START_TIME'] === moment(t).format(YYYYMM)
|
|
|
+ );
|
|
|
+ seriesData.push(obj ? parseInt(obj['SUM(COUNT)']) : 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let allTimes = 0;
|
|
|
+ res.map((item) => {
|
|
|
+ allTimes += parseInt(item['SUM(COUNT)']);
|
|
|
});
|
|
|
+ data.allTimes = allTimes;
|
|
|
}
|
|
|
if (seriesData.length < 1 || xAxisData.length < 1) return;
|
|
|
const option = getOption(seriesData, xAxisData);
|
|
|
mychart.value.setOption(option, true);
|
|
|
- // const res = await queryIserverUseCountByType({
|
|
|
- // endCreateTimeStr: '2023-01-30',
|
|
|
- // startCreateTimeStr: '2023-01-01',
|
|
|
- // tjType: 1,
|
|
|
- // });
|
|
|
};
|
|
|
|
|
|
const setEcharts = (option) => {
|
|
|
@@ -126,6 +194,7 @@ export default defineComponent({
|
|
|
|
|
|
const selectType = (type) => {
|
|
|
data.activeBtn = type;
|
|
|
+ queryData();
|
|
|
};
|
|
|
|
|
|
const getOption = (seriesData, xAxisData) => {
|
|
|
@@ -185,9 +254,11 @@ export default defineComponent({
|
|
|
type: 'none', // 'shadow',
|
|
|
},
|
|
|
formatter: (params) => {
|
|
|
- const names = params[0].name.split('/');
|
|
|
- const nameLable = `${parseInt(names[0])}月${parseInt(names[1])}`;
|
|
|
- return nameLable + ': ' + params[0].value + '次';
|
|
|
+ if (data.activeBtn === 1) {
|
|
|
+ const names = params[0].name.split('/');
|
|
|
+ const nameLable = `${parseInt(names[0])}月${parseInt(names[1])}`;
|
|
|
+ return nameLable + ': ' + params[0].value + '次';
|
|
|
+ } else return params[0].name + '月: ' + params[0].value + '次';
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
@@ -218,6 +289,7 @@ export default defineComponent({
|
|
|
axisTick: { show: false },
|
|
|
axisLine: { show: false },
|
|
|
axisLabel: { show: true },
|
|
|
+ minInterval: 1,
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
@@ -380,6 +452,7 @@ export default defineComponent({
|
|
|
openChange,
|
|
|
panelChange,
|
|
|
dateYearDisabledRule,
|
|
|
+ dataChange,
|
|
|
};
|
|
|
},
|
|
|
});
|