|
@@ -0,0 +1,609 @@
|
|
|
+<template>
|
|
|
+ <el-skeleton :loading="loading" animated>
|
|
|
+ <el-row :gutter="8">
|
|
|
+ <!-- 第一部分 -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
|
|
|
+ <el-card>
|
|
|
+ <el-card shadow="never" class="h-100% ">
|
|
|
+
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>基本信息</span>
|
|
|
+ </div>
|
|
|
+ </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-75px ">
|
|
|
+ <!-- <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"> </div> -->
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="never" class=" h-100% mt-10px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-5 flex justify-between fw-800 text-20px">
|
|
|
+ <span>实时出勤统计</span>
|
|
|
+ </div>
|
|
|
+ </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-25px text-center" style="margin: auto;">
|
|
|
+ <div class="mb-16px text-18px text-white ">打卡人数</div>
|
|
|
+ <CountTo class="text-28px" :start-val="0" :end-val="totalSate.normalNum" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" border-style="dashed" />
|
|
|
+ <div class="px-8px text-center" style="margin: auto;">
|
|
|
+ <div class="mb-16px text-18px text-white ">未打卡人数</div>
|
|
|
+ <CountTo class="text-28px" :start-val="0" :end-val="totalSate.errorNum" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ <el-divider direction="vertical" border-style="dashed" />
|
|
|
+ <div class="px-8px text-center" style="margin: auto;">
|
|
|
+ <div class="mb-16px text-18px text-white ">请假人数</div>
|
|
|
+ <CountTo class="text-28px" :start-val="0" :end-val="totalSate.excuseNum" :duration="2600" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card shadow="hover" class=" mt-10px">
|
|
|
+ <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="24" :lg="10" :xl="7">
|
|
|
+ <!-- 第一个el-row -->
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
|
|
+ <el-card shadow="never" class=" mb-10px h-480px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 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="24" :lg="24" :xl="24">
|
|
|
+ <el-card shadow="never" class="mb-10px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>实时打卡状态</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="demo">
|
|
|
+ <div class="table-header">
|
|
|
+ <div class="header">
|
|
|
+ <el-row class="shouye" style="border: none;">
|
|
|
+ <el-col :span="6" 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="6" 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-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="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.studentName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.userNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ item.daptName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center"
|
|
|
+ style="display: flex; justify-content: center; align-items: center; padding: 6px;">
|
|
|
+ <div>{{ formatDate(item.clockInTime) }}</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-col>
|
|
|
+ <!-- 第二个el-row -->
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="7">
|
|
|
+ <el-row :gutter="15" align="center">
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
|
|
|
+ <el-card shadow="never" class=" h-480px mb-10px "> <!-- 移除 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="6" 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="6" 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.studentName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.userNumber }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.deptName }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="center" style="padding: 10px; border: none;">
|
|
|
+ <div>{{ item.supervisor }}</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="24" :lg="12" :xl="24">
|
|
|
+ <el-card shadow="never" class=" mt-1px h-480px ">
|
|
|
+ <template #header>
|
|
|
+ <div class="h-7 flex justify-between fw-800 text-20px">
|
|
|
+ <span>学生毕业条件达成率</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="demoss">
|
|
|
+ <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.name }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="center" style="padding: 8px;">
|
|
|
+ <div>{{ item.graduationRate }}%</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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { EChartsOption, List } from 'echarts'
|
|
|
+import { formatTime } from '@/utils'
|
|
|
+import {formatDate} from "@/utils/formatTime";
|
|
|
+import { useUserStore } from '@/store/modules/user'
|
|
|
+import { useWatermark } from '@/hooks/web/useWatermark'
|
|
|
+import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
|
|
|
+import { pieOptions, barOptions } from './echarts-data'
|
|
|
+import { reactive, onMounted, watchEffect } from "vue";
|
|
|
+import { vue3ScrollSeamless } from "vue3-scroll-seamless";
|
|
|
+import * as UserApi from '@/api/system/user'
|
|
|
+import * as DeptApi from '@/api/system/dept'
|
|
|
+import { StudentAttendanceApi } from '@/api/system/studentAttendance'
|
|
|
+
|
|
|
+defineOptions({ name: 'Home' })
|
|
|
+
|
|
|
+const { t } = useI18n()
|
|
|
+const userStore = useUserStore()
|
|
|
+const { setWatermark } = useWatermark()
|
|
|
+const loading = ref(true)
|
|
|
+const avatar = userStore.getUser.avatar
|
|
|
+const username = userStore.getUser.nickname
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/*基本信息*/
|
|
|
+const detail = reactive({
|
|
|
+ deptNum: undefined,
|
|
|
+ teacherNum: undefined,
|
|
|
+ studentNum: undefined
|
|
|
+})
|
|
|
+const getDetail = async () => {
|
|
|
+ const data = await UserApi.getDetail()
|
|
|
+ console.log("基本信息", data);
|
|
|
+ detail.deptNum = data.deptNum
|
|
|
+ detail.teacherNum = data.teacherNum
|
|
|
+ detail.studentNum = data.studentNum
|
|
|
+}
|
|
|
+// 获取项目数
|
|
|
+let projects = reactive<Project[]>([])
|
|
|
+const getProject = async () => {
|
|
|
+ const data = [
|
|
|
+ {
|
|
|
+ name: '学院工作间数量',
|
|
|
+ icon: 'svg-icon:gzs',
|
|
|
+ message: String(detail.deptNum) + '个',
|
|
|
+ time: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '导师数量',
|
|
|
+ icon: 'svg-icon:ds',
|
|
|
+ message: String(detail.teacherNum) + '人',
|
|
|
+ time: new Date()
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '在校生数量',
|
|
|
+ icon: 'svg-icon:zxs',
|
|
|
+ message: String(detail.studentNum) + '人',
|
|
|
+ time: new Date()
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ projects = Object.assign(projects, data)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/**实时出勤统计 */
|
|
|
+// 获取统计数
|
|
|
+let totalSate = reactive<WorkplaceTotal>({
|
|
|
+ normalNum: 0,
|
|
|
+ errorNum: 0,
|
|
|
+ excuseNum: 0,
|
|
|
+})
|
|
|
+const getCount = async () => {
|
|
|
+ const data = await StudentAttendanceApi.getDayAttendance()
|
|
|
+ console.log("实时出勤统计", data);
|
|
|
+ totalSate = Object.assign(totalSate, data)
|
|
|
+}
|
|
|
+
|
|
|
+// /**毕业达成统计 */
|
|
|
+let pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
|
+const getGraduateCount = async () => {
|
|
|
+ const data = await UserApi.getGraduateCount()
|
|
|
+ console.log("毕业达成统计", data);
|
|
|
+ const studentNum = data.studentNum;
|
|
|
+ const graduateNum = data.graduateNum;
|
|
|
+ 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%', '85%'], // 中心位置
|
|
|
+ startAngle: 180,
|
|
|
+ endAngle: 360,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: graduateNum, // 畢業生数量
|
|
|
+ name: '已达成', // 国际化名称或直接用字符串 '毕业生'
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside', // 拉出标注
|
|
|
+ formatter: '{b}: {c}', // 显示名称和数值
|
|
|
+ emphasis: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ length: 75,
|
|
|
+ length2: 10,
|
|
|
+ smooth: true,
|
|
|
+ lineDash: [5, 5],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: studentNum, // 在校生数量(总在校生减去毕业生)
|
|
|
+ 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 = ['#2585a6','#5cb5e3' ]; // 定义颜色数组
|
|
|
+ return colorList[params.dataIndex]; // 根据数据索引返回对应的颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ pieOptionsData = Object.assign(pieOptionsData, options);
|
|
|
+};
|
|
|
+
|
|
|
+/**周出勤情况 */
|
|
|
+let barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
|
|
|
+const getWeekend = async () => {
|
|
|
+ const data = await StudentAttendanceApi.getWeekendAttendance();
|
|
|
+ console.log("周出勤情况", data);
|
|
|
+ const normalData = data.dailyNormalList
|
|
|
+ const errorData = data.dailyErrorList;
|
|
|
+ const excuseData = data.dailyExcuseList;
|
|
|
+ barOptionsData.series[0].data = normalData;
|
|
|
+ barOptionsData.series[1].data = errorData;
|
|
|
+ barOptionsData.series[2].data = excuseData;
|
|
|
+};
|
|
|
+
|
|
|
+/**缺勤预警 */
|
|
|
+let list2 = reactive([]);
|
|
|
+const getStudentAttendanceError = async () => {
|
|
|
+ const data = await StudentAttendanceApi.getDayStudentErrorAttendance()
|
|
|
+ console.log("缺勤列表", data);
|
|
|
+ list2.splice(0, list2.length, ...data);
|
|
|
+}
|
|
|
+const class2Options = reactive({
|
|
|
+ step: 0.5,//滚动速度值越大越快,但是值太小会卡顿
|
|
|
+ limitMoveNum: list2.length,//无缝滚动列表元素的长度,一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+});
|
|
|
+
|
|
|
+/**实时打卡状态 */
|
|
|
+//打卡滚动列表
|
|
|
+const list = reactive([]);
|
|
|
+const getStudentAttendance = async () => {
|
|
|
+ const data = await StudentAttendanceApi.getDayStudentAttendance()
|
|
|
+ console.log("打卡列表", data);
|
|
|
+ list.splice(0, list.length, ...data);
|
|
|
+}
|
|
|
+const classOptions = reactive({
|
|
|
+ step: 0.5,//滚动速度值越大越快,但是值太小会卡顿
|
|
|
+ limitMoveNum: list.length,//无缝滚动列表元素的长度,一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+/** 学生毕业条件达成率 */
|
|
|
+//在线情况滚动列表
|
|
|
+const list1 = reactive([]);
|
|
|
+const getGraduationSource = async () => {
|
|
|
+ const data = await DeptApi.getGraduationSource()
|
|
|
+ console.log("毕业条件达成率", data);
|
|
|
+ list1.splice(0, list1.length, ...data);
|
|
|
+}
|
|
|
+const list1Options = reactive({
|
|
|
+ step: 0.5,//滚动速度值越大越快,但是值太小会卡顿
|
|
|
+ limitMoveNum: list1.length,//无缝滚动列表元素的长度,一般设置为列表的长度
|
|
|
+ direction: 1,//方向: 0 往下 1 往上 2 向左 3 向右。
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getDetail()
|
|
|
+ getWeekend()
|
|
|
+ getProject()
|
|
|
+ getCount()
|
|
|
+ getStudentAttendanceError()
|
|
|
+ getStudentAttendance()
|
|
|
+ getGraduationSource()
|
|
|
+ getGraduateCount()
|
|
|
+})
|
|
|
+
|
|
|
+const getAllApi = async () => {
|
|
|
+ await Promise.all([
|
|
|
+ await getDetail(),
|
|
|
+ getCount(),
|
|
|
+ getProject(),
|
|
|
+ getWeekend(),
|
|
|
+ getStudentAttendanceError(),
|
|
|
+ getStudentAttendance(),
|
|
|
+ getGraduationSource(),
|
|
|
+ getGraduateCount(),
|
|
|
+ // getNotice(),
|
|
|
+ // getBasic(),
|
|
|
+ // getShortcut(),
|
|
|
+ // getUserAccessSource(),
|
|
|
+ // getWeeklyUserActivity()
|
|
|
+ ])
|
|
|
+ loading.value = false
|
|
|
+}
|
|
|
+
|
|
|
+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>
|