调整管理员页面

src/component/Administrator/recentActiveUserChart.vue

@@ -0,0 +1,195 @@
+<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>
+			<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:[],
+		})
+        //查询列表
+        let searchHistoryList = ()=> {
+            gettrialList();
+        }
+		//获取列表
+        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,
+			}
+			Https.axiosGet(Https.httpUrls.recentActiveUserChart,{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: '10%',
+					left: 'center'
+				},
+				series: [
+					{
+						type: 'pie',
+						radius: ['30%', '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()
+		onMounted(()=>{
+			lastGeTrialList('month')
+		})
+        return {
+			...toRefs(filter),
+			...toRefs(filterData),
+			searchHistoryList,
+			gettrialList,
+			pageChartDom,
+			lastGeTrialList,
+        };
+    },
+    data() {
+        return {
+        };
+    },
+  
+    methods: {
+        
+    },
+});
+</script>