|
|
@@ -1,60 +1,293 @@
|
|
|
+
|
|
|
+ <!-- <div>
|
|
|
+ <el-card shadow="never">
|
|
|
+ <el-skeleton :loading="loading" animated>
|
|
|
+ <el-row :gutter="16" justify="space-between">
|
|
|
+ <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-avatar :src="avatar" :size="70" class="mr-16px">
|
|
|
+ <img src="@/assets/imgs/avatar.gif" alt="" />
|
|
|
+ </el-avatar>
|
|
|
+ <div>
|
|
|
+ <div class="text-20px">
|
|
|
+ {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
|
|
|
+ </div>
|
|
|
+ <div class="mt-10px text-14px text-gray-500">
|
|
|
+ {{ t('workplace.toady') }}，20℃ - 32℃！
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
+ <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
|
|
|
+ <div class="px-8px text-right">
|
|
|
+ <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
|
|
|
+ <CountTo class="text-20px" :start-val="0" :end-val="totalSate.project" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" />
|
|
|
+ <div class="px-8px text-right">
|
|
|
+ <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
|
|
|
+ <CountTo class="text-20px" :start-val="0" :end-val="totalSate.todo" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" border-style="dashed" />
|
|
|
+ <div class="px-8px text-right">
|
|
|
+ <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
|
|
|
+ <CountTo class="text-20px" :start-val="0" :end-val="totalSate.access" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-skeleton>
|
|
|
+ </el-card>
|
|
|
+ </div> -->
|
|
|
+ <!-- 日期
|
|
|
+ <div class="mt-16px text-12px text-gray-400">
|
|
|
+ {{ formatTime(item.date, 'yyyy-MM-dd') }}
|
|
|
+ </div> -->
|
|
|
+ <!-- 更多<el-link type="primary" :underline="false" href="https://github.com/yudaocode" target="_blank"> {{
|
|
|
+ t('action.more') }}
|
|
|
+ </el-link> -->
|
|
|
+
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-card shadow="never">
|
|
|
- <el-skeleton :loading="loading" animated>
|
|
|
- <el-row :gutter="16" justify="space-between">
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="flex items-center">
|
|
|
- <el-avatar :src="avatar" :size="70" class="mr-16px">
|
|
|
- <img src="@/assets/imgs/avatar.gif" alt="" />
|
|
|
- </el-avatar>
|
|
|
- <div>
|
|
|
- <div class="text-20px">
|
|
|
- {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
|
|
|
+ <el-skeleton :loading="loading" animated>
|
|
|
+ <el-row :gutter="8">
|
|
|
+ <!-- 第一部分 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
|
|
|
+ <el-card style="height: 99%;">
|
|
|
+ <el-card shadow="never" class="h-100% ">
|
|
|
+
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>基本信息</span>
|
|
|
</div>
|
|
|
- <div class="mt-10px text-14px text-gray-500">
|
|
|
- {{ t('workplace.toady') }}，20℃ - 32℃！
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <el-row style="flex-wrap: wrap; ">
|
|
|
+ <el-col v-for="(item, index) in projects" :key="`card-${index}`" :xs="24" :sm="24" :md="24" :lg="8"
|
|
|
+ :xl="8">
|
|
|
+ <el-card shadow="hover" class="mr-5px mt-5px " style="background-color:#2585a6 ">
|
|
|
+ <div class="flex items-center h-90px ">
|
|
|
+ <!-- <Icon :icon="item.icon" :size="25" class="mr-8px" /> -->
|
|
|
+ <Icon :icon="item.icon" :size="38" class="mr-8px " />
|
|
|
+
|
|
|
+ <span class="text-17px c-white">{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mb-18px text-32px c-white ml-20px text-center">{{ t(item.message) }}</div>
|
|
|
+ <!-- <div class="mt-12px flex justify-between text-12px text-gray-400">
|
|
|
+
|
|
|
+ <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
|
|
|
+ </div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="never" class=" h-100% mt-20px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>出勤统计</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
|
- <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
|
|
|
- <CountTo
|
|
|
- class="text-20px"
|
|
|
- :start-val="0"
|
|
|
- :end-val="totalSate.project"
|
|
|
- :duration="2600"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" />
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
|
|
|
- <CountTo
|
|
|
- class="text-20px"
|
|
|
- :start-val="0"
|
|
|
- :end-val="totalSate.todo"
|
|
|
- :duration="2600"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <el-divider direction="vertical" border-style="dashed" />
|
|
|
- <div class="px-8px text-right">
|
|
|
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
|
|
|
- <CountTo
|
|
|
- class="text-20px"
|
|
|
- :start-val="0"
|
|
|
- :end-val="totalSate.access"
|
|
|
- :duration="2600"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-skeleton>
|
|
|
- </el-card>
|
|
|
+ </template>
|
|
|
+ <el-card shadow="never" class="ml-2px pr-10px mt-10px" style="background-color:#33a3dc ;opacity: 0.8; ">
|
|
|
+ <div class="h-70px flex items-center justify-center flex-wrap mt-10px c-white">
|
|
|
+ <div class="px-8px text-right">
|
|
|
+ <div class="mb-10px text-20px text-white ">当日出勤情况</div>
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" style="border-left-black" />
|
|
|
+ <div class="px-25px text-center">
|
|
|
+ <div class="mb-16px text-18px text-white ">正常人数</div>
|
|
|
+ <CountTo class="text-20px" :start-val="0" :end-val="totalSate.normal" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" border-style="dashed" />
|
|
|
+ <div class="px-8px text-center">
|
|
|
+ <div class="mb-16px text-18px text-white ">异常人数</div>
|
|
|
+ <CountTo class="text-20px" :start-val="0" :end-val="totalSate.unusual" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="hover" class="mb-8px mt-30px">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>实时人数统计</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-skeleton :loading="loading" animated>
|
|
|
+ <Echart :options="pieOptionsData" :height="250" />
|
|
|
+ </el-skeleton>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <!-- 第二部分 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="10" :lg="14" :xl="10">
|
|
|
+ <!-- 第一个el-row -->
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :xs="24" :sm="24" :md="10" :lg="12" :xl="12">
|
|
|
+ <el-card shadow="never" class="ml-10px h-480px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>周出勤情况</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-card shadow="hover" class="mt-1px h-380px ">
|
|
|
+ <el-skeleton :loading="loading" animated>
|
|
|
+ <Echart :options="barOptionsData" :height="350" />
|
|
|
+ </el-skeleton>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="24" :md="10" :lg="12" :xl="10">
|
|
|
+ <el-card shadow="never">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>实时打卡状态</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="demo">
|
|
|
+ <vue3ScrollSeamless class="scroll-wrap text-color" :classOptions="classOptions" :dataList="list">
|
|
|
+ <div v-if="list.length > 0">
|
|
|
+ <el-row v-for="(item, i) of list" :key="i" class="shouye"
|
|
|
+ style="margin-bottom: 10px; display: flex; justify-content: center;">
|
|
|
+ <el-col :span="7" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.trainNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.destination }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.departureTime }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.status }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div v-if="list.length == 0"
|
|
|
+ style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
+ 暂无预测记录
|
|
|
+ </div>
|
|
|
+ </vue3ScrollSeamless>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 第二个el-row -->
|
|
|
+ <el-row class="mt-12px" :gutter="15" align="center">
|
|
|
+ <el-col :xs="24" :sm="24" :md="12" :lg="13" :xl="7">
|
|
|
+ <el-card shadow="never" class="mt-1px h-480px ml-10px" style="border: none;"> <!-- 移除 el-card 的边框 -->
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>缺勤预警</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="demos">
|
|
|
+ <!-- <div class="table-header">
|
|
|
+ <div class="header">
|
|
|
+ <el-row class="shouye" style="border: none;">
|
|
|
+ <el-col :span="8" class="center text-18px" style="border: none;">
|
|
|
+ <div>学生学号</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
+ <div>工作间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center text-18px" style="border: none;">
|
|
|
+ <div>导师</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="center text-18px" style="border: none;">
|
|
|
+ <div>缺勤时间段</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <vue3ScrollSeamless class="scroll-wraps text-color" :classOptions="class2Options" :dataList="list2">
|
|
|
+ <div v-if="list2.length > 0">
|
|
|
+ <el-row v-for="(item, i) of list2" :key="i" class="shouye">
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.ID }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.destination }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.trainNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.departureTime }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div v-if="list2.length == 0"
|
|
|
+ style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
+ 暂无预测记录
|
|
|
+ </div>
|
|
|
+ </vue3ScrollSeamless>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :xs="24" :sm="24" :md="9" :lg="11" :xl="7">
|
|
|
+ <el-card shadow="never" class="mr-8px mt-1px h-480px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>学生毕业条件达成率</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="demoss">
|
|
|
+ <!-- <div class="table-header">
|
|
|
+ <div class="header">
|
|
|
+ <el-row class="shouye">
|
|
|
+ <el-col :span="12" class="center text-18px">
|
|
|
+ <div>工作间</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="center text-18px ">
|
|
|
+ <div>学生毕业条件达成率</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <vue3ScrollSeamless class="scroll-wrapss text-color" :classOptions="list1Options" :dataList="list1">
|
|
|
+ <div v-if="list1.length > 0">
|
|
|
+ <el-row v-for="(item, i) of list1" :key="i" class="shouye" :style="{ marginBottom: '10px' }">
|
|
|
+ <!-- 增加行与行之间的间距 -->
|
|
|
+ <el-col :span="12" class="center" style="padding: 8px;"> <!-- 增加内边距 -->
|
|
|
+ <div>{{ item.destination }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center" style="padding: 8px;">
|
|
|
+ <div>{{ item.departureNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div v-if="list1.length == 0"
|
|
|
+ style="width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; color: white; font-size: 18px;">
|
|
|
+ 暂无预测记录
|
|
|
+ </div>
|
|
|
+ </vue3ScrollSeamless>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-skeleton>
|
|
|
</div>
|
|
|
+<<<<<<< HEAD
|
|
|
+=======
|
|
|
|
|
|
<el-row class="mt-8px" :gutter="8" justify="space-between">
|
|
|
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
|
|
|
@@ -169,10 +402,12 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+>>>>>>> c6f00b261b83e3eedb2918f7c41cf0d99d2b0052
|
|
|
</template>
|
|
|
+
|
|
|
<script lang="ts" setup>
|
|
|
import { set } from 'lodash-es'
|
|
|
-import { EChartsOption } from 'echarts'
|
|
|
+import { EChartsOption, List } from 'echarts'
|
|
|
import { formatTime } from '@/utils'
|
|
|
|
|
|
import { useUserStore } from '@/store/modules/user'
|
|
|
@@ -180,6 +415,14 @@ import { useWatermark } from '@/hooks/web/useWatermark'
|
|
|
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
|
|
import { pieOptions, barOptions } from './echarts-data'
|
|
|
|
|
|
+import { center } from "diagram-js/lib/util/PositionUtil";
|
|
|
+
|
|
|
+import { reactive, onMounted, watchEffect } from "vue";
|
|
|
+import { vue3ScrollSeamless } from "vue3-scroll-seamless";
|
|
|
+
|
|
|
+import * as UserApi from '@/api/system/user'
|
|
|
+import { on } from 'events'
|
|
|
+
|
|
|
defineOptions({ name: 'Home' })
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
@@ -188,7 +431,7 @@ const { setWatermark } = useWatermark()
|
|
|
const loading = ref(true)
|
|
|
const avatar = userStore.getUser.avatar
|
|
|
const username = userStore.getUser.nickname
|
|
|
-const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
+let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
// 获取统计数
|
|
|
let totalSate = reactive<WorkplaceTotal>({
|
|
|
project: 0,
|
|
|
@@ -196,11 +439,20 @@ let totalSate = reactive<WorkplaceTotal>({
|
|
|
todo: 0
|
|
|
})
|
|
|
|
|
|
+const detail = reactive({
|
|
|
+ "deptNum": undefined,
|
|
|
+ "teacherNum": undefined,
|
|
|
+ "studentNum": undefined
|
|
|
+})
|
|
|
+
|
|
|
const getCount = async () => {
|
|
|
const data = {
|
|
|
project: 40,
|
|
|
access: 2340,
|
|
|
- todo: 10
|
|
|
+ todo: 10,
|
|
|
+ college: 80,
|
|
|
+ normal: 125,
|
|
|
+ unusual: 5
|
|
|
}
|
|
|
totalSate = Object.assign(totalSate, data)
|
|
|
}
|
|
|
@@ -208,49 +460,29 @@ const getCount = async () => {
|
|
|
// 获取项目数
|
|
|
let projects = reactive<Project[]>([])
|
|
|
const getProject = async () => {
|
|
|
+ // console.log("getProject",detail.deptNum);
|
|
|
+
|
|
|
const data = [
|
|
|
{
|
|
|
- name: 'ruoyi-vue-pro',
|
|
|
- icon: 'akar-icons:github-fill',
|
|
|
- message: 'https://github.com/YunaiV/ruoyi-vue-pro',
|
|
|
- personal: 'Spring Boot 单体架构',
|
|
|
- time: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'yudao-ui-admin-vue3',
|
|
|
- icon: 'logos:vue',
|
|
|
- message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
|
|
|
- personal: 'Vue3 + element-plus',
|
|
|
- time: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'yudao-ui-admin-vben',
|
|
|
- icon: 'logos:vue',
|
|
|
- message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
|
|
|
- personal: 'Vue3 + vben(antd)',
|
|
|
- time: new Date()
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'yudao-cloud',
|
|
|
- icon: 'akar-icons:github',
|
|
|
- message: 'https://github.com/YunaiV/yudao-cloud',
|
|
|
- personal: 'Spring Cloud 微服务架构',
|
|
|
+ name: '学院工作间数量',
|
|
|
+ icon: 'svg-icon:gzs',
|
|
|
+
|
|
|
+ message: String(detail.deptNum) + '个',
|
|
|
time: new Date()
|
|
|
},
|
|
|
{
|
|
|
- name: 'yudao-ui-mall-uniapp',
|
|
|
- icon: 'logos:vue',
|
|
|
- message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
|
|
|
- personal: 'Vue3 + uniapp',
|
|
|
+ name: '导师数量',
|
|
|
+ icon: 'svg-icon:ds',
|
|
|
+ message: String(detail.teacherNum) + '人',
|
|
|
time: new Date()
|
|
|
},
|
|
|
{
|
|
|
- name: 'yudao-ui-admin-vue2',
|
|
|
- icon: 'logos:vue',
|
|
|
- message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
|
|
|
- personal: 'Vue2 + element-ui',
|
|
|
+ name: '在校生数量',
|
|
|
+ icon: 'svg-icon:zxs',
|
|
|
+ message: String(detail.studentNum) + '人',
|
|
|
time: new Date()
|
|
|
}
|
|
|
+
|
|
|
]
|
|
|
projects = Object.assign(projects, data)
|
|
|
}
|
|
|
@@ -287,6 +519,46 @@ const getNotice = async () => {
|
|
|
notice = Object.assign(notice, data)
|
|
|
}
|
|
|
|
|
|
+// 获取基本信息
|
|
|
+let basic = reactive<Basic[]>([])
|
|
|
+const getBasic = async () => {
|
|
|
+ const data = [
|
|
|
+ {
|
|
|
+ title: '学院工作间数量',
|
|
|
+ type: '通知',
|
|
|
+ keys: ['通知', '8', '17', '21', '2', '3'],
|
|
|
+ date: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '硕士研究生数量',
|
|
|
+ type: '公告',
|
|
|
+ keys: ['公告', 'Boot', 'Cloud'],
|
|
|
+ date: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '博士研究生数量',
|
|
|
+ type: '通知',
|
|
|
+ keys: ['通知', '无需授权'],
|
|
|
+ date: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '硕士研究生导师数量',
|
|
|
+ type: '公告',
|
|
|
+ keys: ['公告', '最广泛'],
|
|
|
+ date: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '博士生导师数量',
|
|
|
+ type: '公告',
|
|
|
+ keys: ['公告', '最广泛'],
|
|
|
+ date: new Date()
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ basic = Object.assign(basic, data)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
// 获取快捷入口
|
|
|
let shortcut = reactive<Shortcut[]>([])
|
|
|
|
|
|
@@ -329,56 +601,222 @@ const getShortcut = async () => {
|
|
|
// 用户来源
|
|
|
const getUserAccessSource = async () => {
|
|
|
const data = [
|
|
|
- { value: 335, name: 'analysis.directAccess' },
|
|
|
- { value: 310, name: 'analysis.mailMarketing' },
|
|
|
- { value: 234, name: 'analysis.allianceAdvertising' },
|
|
|
- { value: 135, name: 'analysis.videoAdvertising' },
|
|
|
- { value: 1548, name: 'analysis.searchEngines' }
|
|
|
- ]
|
|
|
+ { value: 1048, name: '在线人数' },
|
|
|
+ { value: 735, name: '离线人数' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const options = {
|
|
|
+ title: {
|
|
|
+ text: null,
|
|
|
+ left: 'center',
|
|
|
+ top: '20px'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '10%', // 顶部位置
|
|
|
+ left: 'left', // 左侧位置
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['120px', '70px'], // 设定内圈和外圈半径
|
|
|
+ center: ['50%', '90%'], // 中心位置
|
|
|
+ startAngle: 180,
|
|
|
+ endAngle: 360,
|
|
|
+ data: data.map(v => ({
|
|
|
+ value: v.value,
|
|
|
+ name: t(v.name),
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside', // 拉出标注
|
|
|
+ formatter: '{b}: {c}', // 显示名称和数值
|
|
|
+ // 可以自定义引线的样式
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 自定义引线样式
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ length: 75, // 引线长度
|
|
|
+ length2: 10, // 后半段引线的长度
|
|
|
+ smooth: true, // 引线是否平滑
|
|
|
+ lineDash: [5, 5], // 引线虚线样式
|
|
|
+ },
|
|
|
+ })),
|
|
|
+ itemStyle: {
|
|
|
+ // 设置饼图的颜色
|
|
|
+ color: function (params) {
|
|
|
+ const colorList = ['#94d6da', '#00a6ac']; // 定义颜色数组
|
|
|
+ return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
set(
|
|
|
pieOptionsData,
|
|
|
'legend.data',
|
|
|
data.map((v) => t(v.name))
|
|
|
- )
|
|
|
- pieOptionsData!.series![0].data = data.map((v) => {
|
|
|
- return {
|
|
|
- name: t(v.name),
|
|
|
- value: v.value
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
|
|
+ );
|
|
|
+
|
|
|
+ pieOptionsData = Object.assign(pieOptionsData, options);
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
|
|
|
|
|
// 周活跃量
|
|
|
const getWeeklyUserActivity = async () => {
|
|
|
const data = [
|
|
|
- { value: 13253, name: 'analysis.monday' },
|
|
|
- { value: 34235, name: 'analysis.tuesday' },
|
|
|
- { value: 26321, name: 'analysis.wednesday' },
|
|
|
- { value: 12340, name: 'analysis.thursday' },
|
|
|
- { value: 24643, name: 'analysis.friday' },
|
|
|
- { value: 1322, name: 'analysis.saturday' },
|
|
|
- { value: 1324, name: 'analysis.sunday' }
|
|
|
- ]
|
|
|
+ { value: 13253, name: '异常人数' },
|
|
|
+ { value: 34235, name: '正常人数' },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const options = {
|
|
|
+ title: {
|
|
|
+ text: null,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '80px',
|
|
|
+ top: '10px', // 上方偏移
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '人数',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '40%', // 设置柱子的宽度为40%
|
|
|
+ data: data.map((v) => v.value), // 设置Y轴数据
|
|
|
+ itemStyle: {
|
|
|
+ // 设置每个柱状的颜色
|
|
|
+ color: function (params) {
|
|
|
+ const colorList = ['#145b7d', '#33a3dc']; // 定义颜色数组
|
|
|
+ return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
set(
|
|
|
barOptionsData,
|
|
|
'xAxis.data',
|
|
|
data.map((v) => t(v.name))
|
|
|
- )
|
|
|
- set(barOptionsData, 'series', [
|
|
|
- {
|
|
|
- name: t('analysis.activeQuantity'),
|
|
|
- data: data.map((v) => v.value),
|
|
|
- type: 'bar'
|
|
|
- }
|
|
|
- ])
|
|
|
+ );
|
|
|
+
|
|
|
+ barOptionsData = Object.assign(barOptionsData, options);
|
|
|
+};
|
|
|
+
|
|
|
+//打卡滚动列表
|
|
|
+const list = reactive([
|
|
|
+ { trainNumber: '张一', destination: '101', departureTime: '09:00', status: '准点' },
|
|
|
+ { trainNumber: '张二', destination: '102', departureTime: '09:15', status: '准点' },
|
|
|
+ { trainNumber: '张三', destination: '103', departureTime: '09:30', status: '晚点' },
|
|
|
+ { trainNumber: '张四', destination: '104', departureTime: '09:45', status: '准点' },
|
|
|
+ { trainNumber: '张五', destination: '105', departureTime: '10:00', status: '准点' },
|
|
|
+ { trainNumber: '李一', destination: '201', departureTime: '10:15', status: '准点' },
|
|
|
+ { trainNumber: '李二', destination: '202', departureTime: '10:30', status: '晚点' },
|
|
|
+ { trainNumber: '李三', destination: '203', departureTime: '10:45', status: '准点' },
|
|
|
+ { trainNumber: '李四', destination: '204', departureTime: '11:00', status: '晚点' },
|
|
|
+ { trainNumber: '李五', destination: '205', departureTime: '11:15', status: '准点' },
|
|
|
+ { trainNumber: '王一', destination: '301', departureTime: '11:30', status: '准点' },
|
|
|
+ { trainNumber: '王二', destination: '302', departureTime: '11:45', status: '准点' },
|
|
|
+ { trainNumber: '王三', destination: '303', departureTime: '12:00', status: '晚点' },
|
|
|
+ { trainNumber: '王四', destination: '304', departureTime: '12:15', status: '准点' },
|
|
|
+ { trainNumber: '王五', destination: '305', departureTime: '12:30', status: '准点' },
|
|
|
+ { trainNumber: '王六', destination: '306', departureTime: '12:45', status: '准点' },
|
|
|
+ { trainNumber: '王七', destination: '307', departureTime: '13:00', status: '晚点' }
|
|
|
+
|
|
|
+]);
|
|
|
+const classOptions = reactive({
|
|
|
+ step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
+ limitMoveNum: list.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+//在线情况滚动列表
|
|
|
+const list1 = reactive([
|
|
|
+ { destination: '101', departureNumber: '98%' },
|
|
|
+ { destination: '102', departureNumber: '94%' },
|
|
|
+ { destination: '103', departureNumber: '96%' },
|
|
|
+ { destination: '104', departureNumber: '98%' },
|
|
|
+ { destination: '105', departureNumber: '93%' },
|
|
|
+ { destination: '201', departureNumber: '97%' },
|
|
|
+ { destination: '202', departureNumber: '95%' },
|
|
|
+ { destination: '203', departureNumber: '98%' },
|
|
|
+ { destination: '204', departureNumber: '96%' },
|
|
|
+ { destination: '205', departureNumber: '94%' },
|
|
|
+ { destination: '301', departureNumber: '97%' },
|
|
|
+ { destination: '302', departureNumber: '96%' },
|
|
|
+ { destination: '303', departureNumber: '95%' },
|
|
|
+ { destination: '304', departureNumber: '97%' },
|
|
|
+ { destination: '305', departureNumber: '98%' },
|
|
|
+ { destination: '306', departureNumber: '99%' },
|
|
|
+ { destination: '307', departureNumber: '96%' }
|
|
|
+
|
|
|
+]);
|
|
|
+const list1Options = reactive({
|
|
|
+ step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
+ limitMoveNum: list1.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+const list2 = reactive([
|
|
|
+ { trainNumber: '张一', destination: '101', departureTime: '09:00', ID: '10' },
|
|
|
+ { trainNumber: '张二', destination: '102', departureTime: '09:15', ID: '15' },
|
|
|
+ { trainNumber: '张三', destination: '103', departureTime: '09:30', ID: '13' },
|
|
|
+ { trainNumber: '张四', destination: '104', departureTime: '09:45', ID: '18' },
|
|
|
+ { trainNumber: '张五', destination: '105', departureTime: '10:00', ID: '19' },
|
|
|
+ { trainNumber: '李一', destination: '201', departureTime: '10:15', ID: '12' },
|
|
|
+ { trainNumber: '李二', destination: '202', departureTime: '10:30', ID: '02' },
|
|
|
+ { trainNumber: '李三', destination: '203', departureTime: '10:45', ID: '09' },
|
|
|
+ { trainNumber: '李四', destination: '204', departureTime: '11:00', ID: '16' },
|
|
|
+ { trainNumber: '李五', destination: '205', departureTime: '11:15', ID: '20' },
|
|
|
+ { trainNumber: '王一', destination: '301', departureTime: '11:30', ID: '28' },
|
|
|
+ { trainNumber: '王二', destination: '302', departureTime: '11:45', ID: '36' },
|
|
|
+ { trainNumber: '王三', destination: '303', departureTime: '12:00', ID: '07' },
|
|
|
+ { trainNumber: '王四', destination: '304', departureTime: '12:15', ID: '41' },
|
|
|
+ { trainNumber: '王五', destination: '305', departureTime: '12:30', ID: '15' },
|
|
|
+ { trainNumber: '王六', destination: '306', departureTime: '12:45', ID: '22' },
|
|
|
+ { trainNumber: '王七', destination: '307', departureTime: '13:00', ID: '27' }
|
|
|
+
|
|
|
+]);
|
|
|
+const class2Options = reactive({
|
|
|
+ step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
|
|
|
+ limitMoveNum: list2.length,//无缝滚动列表元素的长度，一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+const getDetail = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const D = await UserApi.getDetail();
|
|
|
+ detail.deptNum = D.deptNum
|
|
|
+ detail.studentNum = D.studentNum
|
|
|
+ detail.teacherNum = D.teacherNum
|
|
|
+
|
|
|
+
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const getAllApi = async () => {
|
|
|
await Promise.all([
|
|
|
+ await getDetail(),
|
|
|
getCount(),
|
|
|
getProject(),
|
|
|
getNotice(),
|
|
|
+ getBasic(),
|
|
|
getShortcut(),
|
|
|
getUserAccessSource(),
|
|
|
getWeeklyUserActivity()
|
|
|
@@ -386,5 +824,129 @@ const getAllApi = async () => {
|
|
|
loading.value = false
|
|
|
}
|
|
|
|
|
|
+// watchEffect(detail => {
|
|
|
+// console.log('detail', detail)
|
|
|
+// getBasic()
|
|
|
+// })
|
|
|
+
|
|
|
+// onMounted(() => {
|
|
|
+
|
|
|
+// })
|
|
|
+
|
|
|
getAllApi()
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.center {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动列表 */
|
|
|
+.title-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 20px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 19px;
|
|
|
+}
|
|
|
+
|
|
|
+.demo {
|
|
|
+ width: 99%;
|
|
|
+ height: 362px;
|
|
|
+}
|
|
|
+
|
|
|
+.demos {
|
|
|
+ width: 95%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.demoss {
|
|
|
+ width: 95%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-wrap {
|
|
|
+ width: 95%;
|
|
|
+ height: 330px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ /* background-color: #feeeed; */
|
|
|
+ opacity: 0.6;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-left: 18px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-wraps {
|
|
|
+ width: 101%;
|
|
|
+ height: 350px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ opacity: 0.6;
|
|
|
+ font-size: 15px;
|
|
|
+ border: none;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-wrapss {
|
|
|
+ width: 90%;
|
|
|
+ height: 350px;
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ /* background-color: rgba(198, 204, 238, 0.3); */
|
|
|
+ /* background-color: #feeeed; */
|
|
|
+ opacity: 0.6;
|
|
|
+ font-size: 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/* 轮播图的导航条
|
|
|
+.table-header {
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid;
|
|
|
+ width: 280px;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ width: 660px;
|
|
|
+ font-size: 16px;
|
|
|
+} */
|
|
|
+
|
|
|
+.border {
|
|
|
+ border: 1px solid;
|
|
|
+}
|
|
|
+
|
|
|
+.center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/* .text-color {
|
|
|
+ color: rgb(15, 131, 233);
|
|
|
+} */
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.shouye {
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ border-bottom: 1px solid;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-divider.el-divider--vertical {
|
|
|
+ border-left: 1px solid white;
|
|
|
+}
|
|
|
+</style>
|
