aida_front/src/component/Administrator/recentActiveChart.vue

<template>
    <div class="recentActiveChart admin_page">
		<div class="admin_table_search">
			<div class="admin_state">
			
				<div class="admin_state_item">
					<span>State Time:</span>
					<a-range-picker
						style="width:280px"
						class="range_picker"
						v-model:value="rangePickerValue"
						:allowClear="false"
						: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 class="admin_state_item">
					<span>User:</span>
					<a-select
						v-model:value="userIdList"
						mode="multiple"
						style="width: 280px"
						:filter-option="filterOption"
						placeholder="Select Item..."
						max-tag-count="responsive"
						:options="dataList"
					></a-select>
				</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')">Last 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:[],
			userIdList:[]
		})
        //查询列表
        let searchHistoryList = ()=> {
            gettrialList();
        }
		let getUserIDName = ()=>{
			let allUserList:any = sessionStorage.getItem('allUserList');
			if(allUserList){
				filter.dataList = JSON.parse(allUserList)
			}
			// Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
			// 	if (rv) {
			// 		let username = sessionStorage.getItem('allUserList');
			// 		sessionStorage.setItem('allUserList',rv);
			// 		filter.dataList = rv
			// 	}
			// })
		}
		//获取列表
        let gettrialList = async () =>{
			filter.tableLoading = true
			let startDate: any = filterData.rangePickerValue?.[0]
				? filterData.rangePickerValue[0]+' '+'00:00:00'
				: "";
			let endDate: any = filterData.rangePickerValue?.[1]
				? filterData.rangePickerValue[1]+' '+'00:00:00'
				: "";
			let data = {
				endTime:endDate,
				startTime:startDate,
				userIdList:filterData.userIdList.join(','),
			}
			Https.axiosGet(Https.httpUrls.getActiveUserFunc,{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)
					});
					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: ['40%', '70%'],
						avoidLabelOverlap: false,
						
						itemStyle: {
							borderRadius: 10
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
							show: true,
							fontSize: 30,
							fontWeight: 'bold'
							},
						},
						labelLine: {
							show: false
						},
						stillShowZeroSum:true,
						data: data
						}
					]
				};

				option && myChart.setOption(option);
			}
			
		}
		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 pageChartDom:any = ref()
		let filterOption = (input:any, option:any)=>{
			// 使用 option.label 进行搜索
			return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		}
		onMounted(()=>{
			lastGeTrialList('month')
			getUserIDName()
		})
        return {
			...toRefs(filter),
			...toRefs(filterData),
			searchHistoryList,
			gettrialList,
			pageChartDom,
			lastGeTrialList,
			filterOption,
        };
    },
    data() {
        return {
        };
    },
  
    methods: {
        
    },
});
</script>