aida_front/src/component/Administrator/trialUserCountry.vue

<template>
    <div class="recentNewUserChart admin_page">
        <div class="admin_table_search">
			<div class="admin_state">
				<div class="admin_state_item">
					<span>Select Time:</span>
					<a-range-picker
						style="width:250px"
						class="range_picker"
						v-model:value="rangePickerValue"
						:placeholder="[
							$t('HistoryPage.StartDate'),
							$t('HistoryPage.EndDate'),
						]"
						valueFormat="YYYY-MM-DD"
					>
						<template #suffixIcon>
							<span
								class="icon iconfont range_picker_icon icon-rili"
							></span>
						</template>
					</a-range-picker>
				</div>
            </div>
			<div class="admin_search">
				<div class="admin_search_item" @click="searchHistoryList">Search</div>
			</div>
			<div class="admin_state_list">
				<div class="admin_state_list_item" @click="lastGeTrialList('year')">Nearly a year</div>
				<div class="admin_state_list_item" @click="lastGeTrialList('month')">Last month</div>
				<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
			</div>
        </div>

        <div class="admin_table_content" ref="pageChartDom"></div>
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    ref,
    createVNode,
    computed,
    reactive,
    toRefs,
    onMounted,
} from "vue";
import { Https } from "@/tool/https";
import { formatTime } from "@/tool/util";
import * as echarts from "echarts/core";
import { TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
export default defineComponent({
    components: {},
    setup() {
        let filter: any = reactive({
            dataList: {},
        });

        let filterData: any = reactive({
            rangePickerValue: [],
            userType: "",
        });
        let state: any = ref([
            {
                label: "all",
                value: "",
            },
            {
                label: "visitor",
                value: "visitor",
            },
            {
                label: "trial",
                value: "trial",
            },
            {
                label: "official",
                value: "official",
            },
        ]);
        //查询列表
        let searchHistoryList = () => {
            gettrialList();
        };
		let lastGeTrialList = (str:string)=>{
			let currentDate = new Date();
			let currentTimestamp = Math.floor(currentDate.getTime()  / 1000);
			// 计算30天前的时间戳
			let thirtyDaysAgoTimestamp
			if(str == 'year'){
				thirtyDaysAgoTimestamp = currentTimestamp - (360 * 24 * 60 * 60);
			}else if(str == 'month'){
				thirtyDaysAgoTimestamp = currentTimestamp - (30 * 24 * 60 * 60);
			}else if(str == 'week'){
				thirtyDaysAgoTimestamp = currentTimestamp - (7 * 24 * 60 * 60);
			}
			filterData.rangePickerValue = [formatTime(thirtyDaysAgoTimestamp,'YYYY-MM-DD'),formatTime(currentTimestamp,'YYYY-MM-DD')]
			gettrialList();
		}
        //获取列表
        let gettrialList = async () => {
			let startDate: any = filterData.rangePickerValue?.[0]
                ? filterData.rangePickerValue[0]+' '+'00:00:00'
                : "";
            let endDate: any = filterData.rangePickerValue?.[1]
                ? filterData.rangePickerValue[1]+' '+'23:59:59'
                : "";
			let data = {
				endTime:endDate,
				startTime:startDate,
			}
            Https.axiosGet(Https.httpUrls.trialUserCountry,{params:data}).then((rv: any) => {
                if (rv) {
                    let data: any = [];
                    rv.names.forEach((item: any, index: number) => {
                        let obj = {
                            name: item,
                            value: rv.values[index],
                        };
                        data.push(obj);
                    });
                    filter.dataList = data;
                    setEcharts(data);
                    // this.workspaceItem.position = this.singleTypeList[0].label
                }
            });
        };
        let myChart: any;
        let setEcharts = (data: any) => {
            if (myChart) {
                myChart.setOption({
                    series: [
                        {
                            data: data,
                        },
                    ],
                });
            } else {
                echarts.use([
                    TooltipComponent,
                    LegendComponent,
                    PieChart,
                    CanvasRenderer,
                    LabelLayout,
                ]);
                var chartDom = pageChartDom.value;
                myChart = echarts.init(chartDom);
                var option;

                option = {
                    tooltip: {
                        trigger: "item",
                    },
					legend: {
						top: '5%',
						left: 'center'
					},
                    series: [
                        {
                            type: "pie",
                            radius: "55%",
                            center: ["50%", "55%"],
                            data: data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };

                option && myChart.setOption(option);
            }
        };
       
        let pageChartDom: any = ref();
        onMounted(() => {
            gettrialList();
        });
        return {
            ...toRefs(filter),
            ...toRefs(filterData),
			lastGeTrialList,
            state,
            searchHistoryList,
            gettrialList,
            pageChartDom,
        };
    },
    data() {
        return {};
    },

    methods: {},
});
</script>