|
@@ -0,0 +1,257 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import _request from '../utils/request';
|
|
|
+
|
|
|
+import bar from './txwxComponents/bar.vue'
|
|
|
+import lines from './txwxComponents/lines.vue'
|
|
|
+
|
|
|
+import geo from '~/assets/images/geo.png'
|
|
|
+import under from '~/assets/images/under.webp'
|
|
|
+import stu from '~/assets/images/stu.webp'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+// const b1data = $ref([
|
|
|
+// { title: '教师数量', num: '4366', unit: '人' },
|
|
|
+// { title: '学生数量', num: '111', unit: '人' },
|
|
|
+// { title: '学校数量', num: '111', unit: '人' },
|
|
|
+// { title: '名师总数', num: '11', unit: '所' },
|
|
|
+// { title: '上传资源总数', num: '111', unit: '人' },
|
|
|
+// { title: '教师直播次数', num: '111', unit: '次' },
|
|
|
+// ])
|
|
|
+
|
|
|
+// const b3data = $ref([
|
|
|
+// ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+// ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+// ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+// ['桐乡市第十中学桐乡市第十中学桐乡市第十中学桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+// ['桐乡市第十中学', '第一名', '2345人', '1.5W'],
|
|
|
+// ])
|
|
|
+
|
|
|
+// const b4data = $ref([
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ])
|
|
|
+
|
|
|
+// const b7data = $ref([
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ])
|
|
|
+// const b8data = $ref([
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ['张大大', '桐乡市第十中学', '第一名', '1.5W'],
|
|
|
+// ])
|
|
|
+
|
|
|
+
|
|
|
+const b1data = ref("");
|
|
|
+const b3data = ref("");
|
|
|
+const b4data = ref("");
|
|
|
+const b7data = ref("");
|
|
|
+const b8data = ref("");
|
|
|
+const barEchartsData = ref('');
|
|
|
+const lineEchartsData = ref('');
|
|
|
+const initData = () => {
|
|
|
+ _request({
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ },
|
|
|
+ baseURL:window.GLOBAL_CONFIG.api,
|
|
|
+ url: "/openapi/chart/index_data.php",
|
|
|
+ data:{},
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == '1') {
|
|
|
+ b1data.value = res.data.b1data;
|
|
|
+ b3data.value = res.data.b3data;
|
|
|
+ b4data.value = res.data.b4data;
|
|
|
+ b7data.value = res.data.b7data;
|
|
|
+ b8data.value = res.data.b8data;
|
|
|
+ barEchartsData.value = res.data.barEchartsData;
|
|
|
+ lineEchartsData.value = res.data.lineEchartsData;
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error=>{console.log(error)})
|
|
|
+}
|
|
|
+ initData();
|
|
|
+
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+function go(name: string) {
|
|
|
+ router.push({ name })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="flex flex-col justify-between space-y-4">
|
|
|
+ <div class="h-520px flex justify-between">
|
|
|
+ <div
|
|
|
+ class="border border-hex-0A337E bg-block px-27px py-44px gap-x-33px gap-y-37px h-full grid grid-rows-3 grid-cols-2"
|
|
|
+ style="width:40%;">
|
|
|
+ <div v-for="({ title, num, unit }) in b1data" :key="title"
|
|
|
+ class="b1-item flex justify-center space-y-3 items-center flex-col">
|
|
|
+ <div class="text-30px font-bold text-hex-6ff">
|
|
|
+ {{ num }}<span class="text-20px">{{ unit }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-18px font-bold opacity-80">
|
|
|
+ {{ title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="py-2 px-2 flex_center">
|
|
|
+ <img :src="geo" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="w-560px h-full flex flex-col justify-between">
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full">
|
|
|
+ <div>学校平均积分全市排名</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="b-table">
|
|
|
+ <div v-for="(row, i) in b3data" :key="i" class="b-table-row">
|
|
|
+ <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 0 ? '55%' : '15%'}`">
|
|
|
+ {{ col }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full">
|
|
|
+ <div>学生积分排名</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="b-table">
|
|
|
+ <div v-for="(row, i) in b4data" :key="i" class="b-table-row">
|
|
|
+ <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 1 ? '55%' : '15%'}`">
|
|
|
+ {{ col }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="h-430px flex justify-between">
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 h-full" style="width:33%;">
|
|
|
+ <div class="flex">
|
|
|
+ <div>
|
|
|
+ <div>课程浏览点赞统计</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="b-btn flex_center ml-8" @click="go('txwx-detail')">
|
|
|
+ 点击查看详情
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="w-full h-400px">
|
|
|
+ <bar v-if="barEchartsData" :echarts-data="barEchartsData" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 h-full" style="width:33%;">
|
|
|
+ <div>用户登录趋势</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="w-full h-400px">
|
|
|
+ <lines v-if="lineEchartsData" :echarts-data="lineEchartsData" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class=" h-full flex flex-col justify-between" style="width:33%;">
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full h-207px">
|
|
|
+ <div>教师积分排名</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+ <div class="b-table">
|
|
|
+ <div v-for="(row, i) in b7data" :key="i" class="b-table-row">
|
|
|
+ <div v-for="(col, j) in row" :key="j" class="b-table-cell" :style="`width:${j === 1 ? '55%' : '15%'}`">
|
|
|
+ {{ col }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border border-hex-0A337E bg-block p-3 w-full h-207px">
|
|
|
+ <div>今日访问用户</div>
|
|
|
+ <div class="mt-2 mb-4">
|
|
|
+ <img class="h-7px" :src="under">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <div v-for="(row, i) in b8data" :key="i"
|
|
|
+ class="flex items-center h-42px justify-start text-14px px-18px text-20px">
|
|
|
+ <img :src="stu" alt="" class="h-20px mr-4">
|
|
|
+ <div class="w-100px tracking-1px">
|
|
|
+ {{ row[0] }}
|
|
|
+ </div>
|
|
|
+ <div class="cell flex-auto tracking-1px max-w-400px">
|
|
|
+ {{ row[1] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style>
|
|
|
+.b-btn {
|
|
|
+ width: 137px;
|
|
|
+ height: 32px;
|
|
|
+ background: #0d5bf7;
|
|
|
+ border: 1px solid #1bced7;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.b1-item {
|
|
|
+ width: 180px;
|
|
|
+ height: 114px;
|
|
|
+ background: linear-gradient(90deg, rgba(0, 224, 219, 0.40) 3%, rgba(79, 248, 247, 0.09) 25%, rgba(102, 255, 255, 0.00) 52%, rgba(78, 248, 247, 0.10) 75%, rgba(0, 224, 219, 0.42));
|
|
|
+ border: 1px solid;
|
|
|
+ border-image: linear-gradient(270deg, #00d2d5, rgba(0, 210, 213, 0.18) 13%, rgba(0, 210, 213, 0.00) 50%, rgba(0, 210, 213, 0.20) 90%, rgba(0, 210, 213, 0.75)) 1 1;
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-row {
|
|
|
+ width: 100%;
|
|
|
+ height: 42px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ letter-spacing: .5px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-row:nth-child(2n+1) {
|
|
|
+ background: rgba(35, 160, 226, 0.20);
|
|
|
+ border-radius: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-row:nth-child(2n) {
|
|
|
+ background: transparent
|
|
|
+}
|
|
|
+
|
|
|
+.b-table .b-table-cell {
|
|
|
+ padding: 0 5px;
|
|
|
+ /* 超过一行省略号 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.cell {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+</style>
|