|
@@ -0,0 +1,323 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import i_up from '~/assets/img/home/up.png'
|
|
|
+import i_down from '~/assets/img/home/down.webp'
|
|
|
+import i_user from '~/assets/img/home/user.webp'
|
|
|
+
|
|
|
+const selectedDate = $ref()
|
|
|
+
|
|
|
+const list_czrz = ref([
|
|
|
+ '2011-12-23 11:12 用户29345612在用户中心/学校与教师/教师管理中设置名师',
|
|
|
+ '2011-12-23 12:12 用户369984在内容管理/文件公告/文件通知中编辑了关于组织山东育知中编辑了关于组织山东育知中编辑了关于组织山东育',
|
|
|
+ '2011-12-23 14:12 用户36988589登录一次',
|
|
|
+])
|
|
|
+
|
|
|
+type IRow = any
|
|
|
+let tableData = $ref<IRow[]>([])
|
|
|
+Promise.resolve([{ name: '山东省蒙阴县实验中学' }, { name: '山东省蒙阴县实验中学' }, { name: '山东省蒙阴县实验中学' }]).then((res: IRow[]) => {
|
|
|
+ tableData = res
|
|
|
+})
|
|
|
+
|
|
|
+type EChartsOption = echarts.EChartsOption
|
|
|
+
|
|
|
+const echartRef = $ref()
|
|
|
+
|
|
|
+const option: EChartsOption = {
|
|
|
+ color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['累计在线人数', '总观看人数'],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '累计在线人数',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ },
|
|
|
+ showSymbol: false,
|
|
|
+ symbolSize: 9,
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#3f8cff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#96caff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: '#f6faff',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: [140, 232, 101, 264, 90, 340, 250],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '总观看人数',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 0,
|
|
|
+ },
|
|
|
+ showSymbol: false,
|
|
|
+ symbolSize: 9,
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: '#ff611f',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.5,
|
|
|
+ color: '#ffb697',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: '#fcf4f3',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'series',
|
|
|
+ },
|
|
|
+ data: [120, 282, 111, 234, 220, 340, 310],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ const myChart = echarts.init(echartRef)
|
|
|
+ option && myChart.setOption(option)
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="text-base flex h-full">
|
|
|
+ <div class="w-15/25 bg-white card py-6 px-8 flex flex-col justify-between">
|
|
|
+ <div class="flex justify-between items-end">
|
|
|
+ <div class="text-hex-333539 font-semibold tracking-wide">
|
|
|
+ 操作日志
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="bg-hex-eff3fb rounded-lg text-hex-4d4d4d text-xs font-normal flex_center px-2.5 py-1 cursor-pointer"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ <i:material-symbols:arrow-forward-ios />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-hex-ebf3ff rounded-2xl p-4 my-4">
|
|
|
+ <ul class="divide-y divide-dashed text-sm text-hex-61657e font-semibold tracking-wide">
|
|
|
+ <li v-for="item in list_czrz" :key="item" class="truncate py-2">
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-hex-333539 font-semibold tracking-wide mt-7">
|
|
|
+ 数据
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex justify-between text-white my-4">
|
|
|
+ <div class="card bg-hex-E8523F w-3/10 py-3 px-5 rounded-3xl">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img :src="i_up" alt="" class="w-8 h-8">
|
|
|
+ <span class="text-sm ml-2">上传资源数量</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col items-center">
|
|
|
+ <i:mdi:arrow-down-thin class="text-2xl" />
|
|
|
+ <span class="text-xs">+8%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 今日
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 23
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 本周
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 本月
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 2113
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card bg-hex-3F8CFF w-3/10 py-3 px-5 rounded-3xl">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img :src="i_down" alt="" class="w-8 h-8">
|
|
|
+ <span class="text-sm ml-2">上传资源数量</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col items-center">
|
|
|
+ <i:mdi:arrow-down-thin class="text-2xl" />
|
|
|
+ <span class="text-xs">+8%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 今日
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 23
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 本周
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 本月
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 2113
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card bg-hex-F8B849 w-3/10 py-3 px-5 rounded-3xl">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img :src="i_user" alt="" class="w-8 h-8">
|
|
|
+ <span class="text-sm ml-2">上传资源数量</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col items-center">
|
|
|
+ <i:mdi:arrow-up-thin class="text-2xl" />
|
|
|
+ <span class="text-xs">+8%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 今日
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 23
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 本周
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-end mt-2">
|
|
|
+ <div class="text-xs leading-none">
|
|
|
+ 本月
|
|
|
+ </div>
|
|
|
+ <div class="text-xl ml-2 leading-none">
|
|
|
+ 2113
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between items-baseline mt-7 mb-4">
|
|
|
+ <div class="text-hex-333539 font-semibold tracking-wide">
|
|
|
+ 高校资源数据
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="bg-hex-eff3fb rounded-lg text-hex-4d4d4d text-xs font-normal flex_center px-2.5 py-1 cursor-pointer"
|
|
|
+ >
|
|
|
+ 查看更多
|
|
|
+ <i:material-symbols:arrow-forward-ios />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table class="_" :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column prop="name" label="学校名称" show-overflow-tooltip width="auto" />
|
|
|
+ <el-table-column prop="name" label="上传资源数" show-overflow-tooltip width="110" />
|
|
|
+ <el-table-column prop="name" label="资源下载数" show-overflow-tooltip width="110" />
|
|
|
+ <el-table-column prop="name" label="听课教室数" show-overflow-tooltip width="110" />
|
|
|
+ <el-table-column prop="name" label="主讲教室数" show-overflow-tooltip width="110" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="w-8/25 min-w-400px ml-1/25 h-full flex flex-col justify-between">
|
|
|
+ <div class="card flex-auto mb-9 flex flex-col justify-between">
|
|
|
+ <div class="text-hex-333539 font-medium tracking-wide">
|
|
|
+ 日历
|
|
|
+ </div>
|
|
|
+ <div class="flex_center flex-auto">
|
|
|
+ <el-calendar v-model="selectedDate" class="_" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card flex flex-col justify-between">
|
|
|
+ <div class="text-hex-333539 font-medium tracking-wide mb-3">
|
|
|
+ 课堂在线情况
|
|
|
+ </div>
|
|
|
+ <div ref="echartRef" class="w-full h-300px" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@use "~/styles/calendar.scss";
|
|
|
+@use "~/styles/table2.scss";
|
|
|
+</style>
|