2023年4月6日 完善首页
This commit is contained in:
parent
ff0ab13d12
commit
aab9630324
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<a-layout-header>
|
<a-layout-header>
|
||||||
<!-- <BackTop/> -->
|
<!-- <BackTop/> -->
|
||||||
<div style="position: absolute;right: 1rem;top: 5rem;">
|
<div id="topDiv">
|
||||||
<div style="background: #c2c2c2;margin-bottom: 2rem;padding: 0.5rem;width: 4rem;font-size:3rem;">
|
<div class="topButton" @click="toTop">
|
||||||
<ArrowUpOutlined/>
|
<ArrowUpOutlined/>
|
||||||
</div>
|
</div>
|
||||||
<div style="background: #1c84c6;color:#FFF;font-size:1.5rem;padding: 0.5rem;width: 4rem;line-height: 2.1rem;">
|
<div class="topYiJianFanKui">
|
||||||
意见反馈
|
意见反馈
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,6 +38,21 @@
|
||||||
//用户相关
|
//用户相关
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
function smoothScroll(topNum){
|
||||||
|
setTimeout(() => {
|
||||||
|
if(topNum > 0){
|
||||||
|
topNum = topNum - 50;
|
||||||
|
document.body.scrollTop = topNum;
|
||||||
|
smoothScroll(topNum);
|
||||||
|
}
|
||||||
|
},1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toTop(){
|
||||||
|
let topNum = document.body.scrollTop;
|
||||||
|
smoothScroll(topNum);
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
#siteMain {
|
#siteMain {
|
||||||
|
@ -56,4 +71,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#topDiv {
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
top: 5rem;
|
||||||
|
z-index: 1;
|
||||||
|
.topButton {
|
||||||
|
background: #c2c2c2;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 4rem;
|
||||||
|
font-size:3rem;
|
||||||
|
}
|
||||||
|
.topYiJianFanKui {
|
||||||
|
background: #1c84c6;
|
||||||
|
color:#FFF;
|
||||||
|
font-size:1.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 4rem;
|
||||||
|
line-height: 2.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -1,28 +1,51 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="rowGutter">
|
<div class="rowGutter">
|
||||||
<a-carousel>
|
<!-- --{{ list }}-- -->
|
||||||
<div><h3>1</h3></div>
|
<a-carousel autoplay>
|
||||||
<div><h3>2</h3></div>
|
<div v-for="(item,index) in list" :key="index">
|
||||||
<div><h3>3</h3></div>
|
<AImage style="marginRight: 5px" :src="getFileAccessHttpUrl(item.picPath)" :width="'100%'"/>
|
||||||
<div><h3>4</h3></div>
|
<!-- <h3>{{ item.title }}-{{ item.picPath }}</h3> -->
|
||||||
|
</div>
|
||||||
</a-carousel>
|
</a-carousel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
|
import { Image as AImage } from 'ant-design-vue';
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||||
|
// import { useMessage } from "/@/hooks/web/useMessage";
|
||||||
|
// const { createConfirm } = useMessage();
|
||||||
|
enum Api {
|
||||||
|
list = '/kcTplb/kcTplb/list',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 列表接口
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const listApi = (params) => defHttp.get({ url: Api.list, params });
|
||||||
|
|
||||||
|
const list = ref<any>([]);
|
||||||
|
onMounted(() => {
|
||||||
|
listApi({ pageSize: 5 }).then(res => {
|
||||||
|
list.value = (res?.records) ?? [];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
/* For demo */
|
/* For demo */
|
||||||
.ant-carousel :deep(.slick-slide) {
|
// .ant-carousel :deep(.slick-slide) {
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
height: 160px;
|
// height: 160px;
|
||||||
line-height: 160px;
|
// line-height: 160px;
|
||||||
background: #364d79;
|
// background: #364d79;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.ant-carousel :deep(.slick-slide h3) {
|
// .ant-carousel :deep(.slick-slide h3) {
|
||||||
color: #fff;
|
// color: #fff;
|
||||||
}
|
// }
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -2,7 +2,7 @@
|
||||||
<a-card class="rowGutter">
|
<a-card class="rowGutter">
|
||||||
<template #title><span style="font-size: 24px;font-weight: bold;">任课教程</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
|
<template #title><span style="font-size: 24px;font-weight: bold;">任课教程</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
|
||||||
<!-- <template #extra></template> -->
|
<!-- <template #extra></template> -->
|
||||||
xxxx
|
<div></div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
|
@ -1,22 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card class="rowGutter">
|
<a-card class="rowGutter">
|
||||||
<template #title> <span style="font-size: 24px;font-weight: bold;">听课足迹</span><span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span></template>
|
<template #title>
|
||||||
|
<span style="font-size: 24px;font-weight: bold;">听课足迹</span>
|
||||||
|
<!-- <span style="margin-left: 10px;"><a href="javascript:void(0);">修改课程提醒</a></span> -->
|
||||||
|
</template>
|
||||||
<template #extra><a href="javascript:void(0);">查看更多</a></template>
|
<template #extra><a href="javascript:void(0);">查看更多</a></template>
|
||||||
<a-list item-layout="horizontal" :data-source="[{ title: '听了 计算机公共教研室 曹毅 主讲的《信息技术2(数据管理与分析)》', },{ title: 'Ant Design Title 2', }]">
|
<a-list item-layout="horizontal" :data-source="list">
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
<a-list-item>
|
<a-list-item>
|
||||||
<a-list-item-meta>
|
<a-list-item-meta>
|
||||||
<template #title>
|
<template #title>
|
||||||
<!-- <a href="https://www.antdv.com/">{{ item.title }}</a> -->
|
<div class="wenZiJiaCu">
|
||||||
{{ item.title }}
|
听了 {{ item.kkdw }} {{item.skjs}} {{ item.kcmc }}
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #description>
|
<template #description>
|
||||||
<span style="color: #337ab7;">已评分n分</span>
|
<span style="color: #337ab7;">已评分:5分</span>
|
||||||
</template>
|
</template>
|
||||||
<template #avatar>
|
<template #avatar>
|
||||||
<a-avatar src="https://joeschmoe.io/api/v1/random" />
|
<div class="wenZiJuZhong">
|
||||||
<div>08:32:49</div>
|
<!-- <a-avatar style="marginRight: 5px" :src="getFileAccessHttpUrl(item.picPath)" shape="square" :size="25"/> -->
|
||||||
<div style="color: #1ab394;">2023-03-15</div>
|
<!-- <a-avatar src="https://joeschmoe.io/api/v1/random" /> -->
|
||||||
|
<TeamOutlined/>
|
||||||
|
<div>08:32:49 {{ item.hhks }} - {{ item.hhjs }}</div>
|
||||||
|
<div style="color: #1ab394;">{{ item.skrq }}</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</a-list-item-meta>
|
</a-list-item-meta>
|
||||||
</a-list-item>
|
</a-list-item>
|
||||||
|
@ -25,8 +33,36 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
|
import { TeamOutlined } from '@ant-design/icons-vue';
|
||||||
|
// import { dateUtil, formatToDate } from '/@/utils/dateUtil';
|
||||||
|
import { getUserId } from '/@/views/site/utils/index';
|
||||||
|
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
enum Api {
|
||||||
|
list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 列表接口
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const listApi = (params) => defHttp.get({ url: Api.list, params });
|
||||||
|
|
||||||
|
const list = ref<any>([]);
|
||||||
|
onMounted(() => {
|
||||||
|
listApi({ pageSize: 4, isdeleted:0, userid: getUserId(), isOrderByNow: true }).then(res => {
|
||||||
|
list.value = (res?.records) ?? [];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.wenZiJuZhong {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.wenZiJiaCu {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -1,72 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
<a-row class="rowGutter" :gutter="[16,16]">
|
<a-row class="rowGutter maxRow" :gutter="gutter">
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 5 }">
|
||||||
<a-card title="今日课堂数">
|
<a-card class="cardDiv" title="今日课堂数">
|
||||||
--
|
<a-row class="" :gutter="gutter">
|
||||||
<a-row class="" :gutter="[16,16]">
|
<a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
<div class="numberBlob">
|
||||||
<Statistic title="总数" :value="tjData?.jinRiKeTang?.num"/>
|
<div class="numSpan">{{ tjData?.jinRiKeTang?.num }}</div>
|
||||||
|
<div>总数</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
<a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
||||||
<Statistic title="已下课" :value="tjData?.jinRiKeTang?.xkktnum"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan green">{{ tjData?.jinRiKeTang?.xkktnum }}</div>
|
||||||
|
<div class="numberName"><FallOutlined class="green"/>已下课</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
腾讯:{{ tjData?.jinRiKeTang?.txktnum }}
|
<a-divider class="divider"/>
|
||||||
钉钉:{{ tjData?.jinRiKeTang?.ddktnum }}
|
<div class="buttomDiv wenZiJiaCu">
|
||||||
其他:{{ tjData?.jinRiKeTang?.qtktnum }}
|
<FallOutlined class="green"/>
|
||||||
|
腾讯:{{ tjData?.jinRiKeTang?.txktnum }}
|
||||||
|
钉钉:{{ tjData?.jinRiKeTang?.ddktnum }}
|
||||||
|
其他:{{ tjData?.jinRiKeTang?.qtktnum }}
|
||||||
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 5 }" :lg="{ span: 3 }">
|
||||||
<a-card title="上课中">
|
<a-card class="cardDiv" title="上课中">
|
||||||
<a-row class="" :gutter="[16,16]">
|
<a-row class="" :gutter="gutter">
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 24 }" :lg="{ span: 24 }">
|
||||||
<Statistic title=" " :value="tjData?.jinRiKeTang?.zzsknum"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan orange">{{ tjData?.jinRiKeTang?.zzsknum }}</div>
|
||||||
|
<div class="numberName"> </div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
<a-divider />
|
||||||
|
<div class="buttomDiv"></div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 10 }">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 11 }" :lg="{ span: 9 }">
|
||||||
<a-card title="已开课堂数">
|
<a-card class="cardDiv" title="已开课堂数">
|
||||||
<a-row class="" :gutter="[16,16]">
|
<a-row class="" :gutter="gutter">
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
<a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
||||||
<Statistic title="总数" :value="tjData?.jinRiTingKe?.jcktnum"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan">{{ tjData?.jinRiTingKe?.jcktnum }}</div>
|
||||||
|
<div class="numberName">总数</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
<a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
||||||
<Statistic title="听课课堂" :value="tjData?.jinRiTingKe?.btkktnum"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan blue">{{ tjData?.jinRiTingKe?.btkktnum }}</div>
|
||||||
|
<div class="numberName"><StockOutlined class="blue"/>听课课堂</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
<a-col :xs="{ span: 8 }" :sm="{ span: 8 }" :lg="{ span: 8 }">
|
||||||
<Statistic title="听课人次" :value="tjData?.jinRiTingKe?.tkrcnum"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan orange">{{ tjData?.jinRiTingKe?.tkrcnum }}</div>
|
||||||
|
<div class="numberName"><RiseOutlined class="orange"/>听课人次</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
<a-divider />
|
||||||
|
<div class="buttomDiv"></div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 4 }">
|
||||||
<a-card title="今日听课">
|
<a-card class="cardDiv" title="今日听课">
|
||||||
<a-row class="" :gutter="[16,16]">
|
<a-row class="" :gutter="gutter">
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
<a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
||||||
<Statistic title="课堂数" :value="tjData?.yiKaiKeTang?.num"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan blue">{{ tjData?.yiKaiKeTang?.num }}</div>
|
||||||
|
<div class="numberName"><StockOutlined class="blue"/>课堂数</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
<a-col :xs="{ span: 12 }" :sm="{ span: 12 }" :lg="{ span: 12 }">
|
||||||
<Statistic title="听课人次" :value="tjData?.yiKaiKeTang?.zzsknum"/>
|
<div class="numberBlob">
|
||||||
|
<div class="numSpan orange">{{ tjData?.yiKaiKeTang?.zzsknum }}</div>
|
||||||
|
<div class="numberName"><RiseOutlined class="orange"/>听课人次</div>
|
||||||
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
<a-divider />
|
||||||
|
<div class="buttomDiv"></div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 2 }" :lg="{ span: 3 }">
|
||||||
<div style="margin: 0 auto;width: fit-content;font-size: 3.5rem;color: #cccccc8c;">
|
<div style="margin: 0 auto;width: fit-content;font-size: 6rem;font-weight: 700;color: #cccccc8c;padding: 29px 0;">
|
||||||
<!-- <a href="/dashboard/analysis"><PlusOutlined/></a> -->
|
<!-- <RouterLink class="plusButton" to="/dashboard/analysis"><PlusOutlined/></RouterLink> -->
|
||||||
<RouterLink class="plusButton" to="/dashboard/analysis"><PlusOutlined/></RouterLink>
|
<RouterLink class="plusButton" to="/dashboard/analysis">+</RouterLink>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, computed, onMounted } from 'vue';
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
import { Statistic } from 'ant-design-vue';
|
import { PlusOutlined, FallOutlined, RiseOutlined, StockOutlined } from '@ant-design/icons-vue';
|
||||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
|
||||||
import { dateUtil, formatToDate } from '/@/utils/dateUtil';
|
import { dateUtil, formatToDate } from '/@/utils/dateUtil';
|
||||||
|
|
||||||
|
|
||||||
import { defHttp } from '/@/utils/http/axios';
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
// import { useMessage } from "/@/hooks/web/useMessage";
|
// import { useMessage } from "/@/hooks/web/useMessage";
|
||||||
|
|
||||||
|
@ -75,14 +107,14 @@ enum Api {
|
||||||
list = '/ktgl/kcKetangbiao/getCountList',
|
list = '/ktgl/kcKetangbiao/getCountList',
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Data {
|
// interface Data {
|
||||||
num: Number,//【今日课堂数:总数】
|
// num: Number,//【今日课堂数:总数】
|
||||||
txktnum: Number,//【今日课堂数:腾讯】
|
// txktnum: Number,//【今日课堂数:腾讯】
|
||||||
ddktnum: Number,//【今日课堂数:钉钉】
|
// ddktnum: Number,//【今日课堂数:钉钉】
|
||||||
qtktnum: Number,//【今日课堂数:其他】
|
// qtktnum: Number,//【今日课堂数:其他】
|
||||||
xkktnum: Number,//【今日课堂数:已下课】
|
// xkktnum: Number,//【今日课堂数:已下课】
|
||||||
zzsknum: Number,//【上课中】
|
// zzsknum: Number,//【上课中】
|
||||||
}
|
// }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 列表接口
|
* 列表接口
|
||||||
|
@ -90,7 +122,9 @@ interface Data {
|
||||||
*/
|
*/
|
||||||
const list = (params) => defHttp.get({ url: Api.list, params });
|
const list = (params) => defHttp.get({ url: Api.list, params });
|
||||||
|
|
||||||
const tjData = ref<Data | any>({});
|
const gutter = ref([16,16]);
|
||||||
|
|
||||||
|
const tjData = ref<any>({});
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let skrq = formatToDate(new Date());
|
let skrq = formatToDate(new Date());
|
||||||
list({ skrq }).then(res => {
|
list({ skrq }).then(res => {
|
||||||
|
@ -103,6 +137,42 @@ onMounted(() => {
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.numberBlob {
|
||||||
|
text-align: center;
|
||||||
|
// height: 100px;
|
||||||
|
height: 4rem;
|
||||||
|
.numSpan {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.numberName {
|
||||||
|
font-size: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
color: #1ab394;
|
||||||
|
}
|
||||||
|
.orange {
|
||||||
|
color: #ed9535;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
color: #1c84c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardDiv :deep(.ant-divider-horizontal) {
|
||||||
|
margin: 12px 0;
|
||||||
|
}
|
||||||
|
.maxRow :deep(.ant-card-body) {
|
||||||
|
padding: 0 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttomDiv {
|
||||||
|
font-size: .4rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
.wenZiJiaCu {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.plusButton{
|
.plusButton{
|
||||||
& :hover,& :active{
|
& :hover,& :active{
|
||||||
color: #cccccc8c;
|
color: #cccccc8c;
|
||||||
|
|
|
@ -1,19 +1,60 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card class="rowGutter">
|
<a-card class="rowGutter">
|
||||||
<a-row>
|
<br/>
|
||||||
<a-col :span="12">
|
<a-row :gutter="[16,16]" class="rowSpan">
|
||||||
[图标][名称]<span style="color:#1ab394">[日期]</span>
|
<a-col :span="12" v-for="(item,index) in list" :key="index">
|
||||||
</a-col>
|
<a :href="item.nlink" target="_blank">
|
||||||
<a-col :span="12">
|
<span class="">
|
||||||
[图标][名称]<span style="color:#1ab394">[日期]</span>
|
<WifiOutlined :rotate="45" class="greenTxt"/>
|
||||||
|
</span>
|
||||||
|
<span class="title spanWord">
|
||||||
|
{{ item.ntitle }}
|
||||||
|
</span>
|
||||||
|
<span class="greenTxt spanWord">[{{ formatToDate(item.ndate) }}]</span>
|
||||||
|
</a>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<span style="color:red">[今日调课]</span>
|
<div style="color:red">[今日调课]</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
|
import { WifiOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
import { formatToDate } from '/@/utils/dateUtil';
|
||||||
|
// import { useMessage } from "/@/hooks/web/useMessage";
|
||||||
|
// const { createConfirm } = useMessage();
|
||||||
|
enum Api {
|
||||||
|
list = '/kcNotice/kcNotice/list',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 列表接口
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const listApi = (params) => defHttp.get({ url: Api.list, params });
|
||||||
|
|
||||||
|
const list = ref<any>([]);
|
||||||
|
onMounted(() => {
|
||||||
|
//ontop,修改时间,新增时间
|
||||||
|
listApi({ pageSize: 6, nstatus: 1 }).then(res => {
|
||||||
|
list.value = (res?.records) ?? [];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.rowSpan {
|
||||||
|
padding: 0 0 15px 0;
|
||||||
|
}
|
||||||
|
.spanWord {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
.greenTxt {
|
||||||
|
color: #1ab394;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -0,0 +1,3 @@
|
||||||
|
export const getUserId = () => {
|
||||||
|
return '2016900057';
|
||||||
|
}
|
|
@ -1,43 +1,41 @@
|
||||||
<template>
|
<template>
|
||||||
<a-card class="rowGutter">
|
<a-card class="rowGutter">
|
||||||
<template #title>
|
<template #title>
|
||||||
<span style="font-size: 24px;font-weight: bold;">预约课程</span>
|
<span class="titleName">预约课程</span>
|
||||||
<span style="padding: 15px;"><a href="javascript:void(0);">线上课堂评价表</a></span>
|
<span class="titleDownload"><a href="javascript:void(0);">线上课堂评价表</a></span>
|
||||||
<span style="padding: 15px;"><a href="javascript:void(0);">听课记录</a></span>
|
<span class="titleDownload"><a href="javascript:void(0);">听课记录</a></span>
|
||||||
<span style="padding: 15px;"><a href="javascript:void(0);">同行评价表</a></span>
|
<span class="titleDownload"><a href="javascript:void(0);">同行评价表</a></span>
|
||||||
</template>
|
</template>
|
||||||
<template #extra><a href="javascript:void(0);">查看更多</a></template>
|
<template #extra><a href="javascript:void(0);">查看更多</a></template>
|
||||||
<a-row class="rowGutter" :gutter="[16,16]">
|
<a-row class="rowGutter" :gutter="[16,16]">
|
||||||
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in 4" :key="index" style="margin-bottom: 40px;">
|
<a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in list" :key="index" class="itemBigBox">
|
||||||
<div style="border-radius: 25px;background: #cccccc8c;width: 70%;margin-bottom: 0.5rem;text-align: center;margin: 0 auto .5rem;padding: 0.5rem;">
|
<div class="itemDate">
|
||||||
时间{{ item }}
|
{{ item.skrq }} {{ formatTime(item.hhks) }}-{{ formatTime(item.hhjs) }}
|
||||||
</div>
|
</div>
|
||||||
<div style="border: 2px #eef1f2 solid;">
|
<div class="itemBox">
|
||||||
<div>
|
<div>
|
||||||
<div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
|
<div class="itemTitle"></div>
|
||||||
<div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
|
<div class="itemTtleName">{{ item.kcmc }}</div>
|
||||||
地理教育专业文献阅读与指导{{index}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<a-divider style="margin: 0px;color: #eef1f2;"/>
|
<a-divider class="itemDivider"/>
|
||||||
<div style="padding: 20px;font-weight: 600;">
|
<div class="itemInteriorBox">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="16">
|
<a-col :span="16">
|
||||||
<div style="height: 30px;font-size: 16px;">张继权</div>
|
<div class="itemSkSj">{{ item.skjs }}</div>
|
||||||
<div style="height: 30px;font-size: 14px;">环境学院环境</div>
|
<div class="itemKkDw">{{ item.kkdw }}</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="8" style="text-align: center;height: 70px;">
|
<a-col :span="8" class="itemInteriorRow">
|
||||||
<div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
|
<div class="itemXkrsNum">{{ item.xkrs }}</div>
|
||||||
<div style="font-size: 14px;">选课人数</div>
|
<div class="itemXkrs">选课人数</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<div style="height: 60px;">
|
<div>
|
||||||
环境学院107室
|
{{ item.skdd }}
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="24">
|
<a-col :span="24">
|
||||||
<a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
|
<a-button type="primary" class="itemYyButton">预约</a-button>
|
||||||
<a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
|
<a-button type="primary" class="itemBaoCuoButton">报错</a-button>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
|
@ -47,8 +45,120 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
|
import { TeamOutlined } from '@ant-design/icons-vue';
|
||||||
|
// import { dateUtil, formatToDate } from '/@/utils/dateUtil';
|
||||||
|
import { getUserId } from '/@/views/site/utils/index';
|
||||||
|
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
enum Api {
|
||||||
|
list = '/kcYuyue/kcYuyue/findTingkeZuJiByPage',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 列表接口
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const listApi = (params) => defHttp.get({ url: Api.list, params });
|
||||||
|
|
||||||
|
const list = ref<any>([]);
|
||||||
|
onMounted(() => {
|
||||||
|
listApi({ pageSize: 4, isdeleted:0, userid: getUserId(), isOrderByNow: true }).then(res => {
|
||||||
|
list.value = (res?.records) ?? [];
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 转换时间由【0012】转成【00:12】
|
||||||
|
* @param time 四个字符,时分,无分隔
|
||||||
|
*/
|
||||||
|
function formatTime(time: string) {
|
||||||
|
if(!time) return '';
|
||||||
|
let t_i_m_e = time.split('');
|
||||||
|
return [t_i_m_e[0],t_i_m_e[1],':',t_i_m_e[2],t_i_m_e[3]].join('');
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.titleName {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.titleDownload {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.itemBigBox {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.itemDate {
|
||||||
|
border-radius: 25px;
|
||||||
|
background: #cccccc8c;
|
||||||
|
width: 70%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto .5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.itemBox {
|
||||||
|
border: 2px #eef1f2 solid;
|
||||||
|
}
|
||||||
|
.itemTitle {
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #1c84c6;
|
||||||
|
}
|
||||||
|
.itemTtleName {
|
||||||
|
width:100%;
|
||||||
|
white-space:normal;
|
||||||
|
word-break:break-all;
|
||||||
|
overflow:hidden;
|
||||||
|
padding: 10px;
|
||||||
|
height: 70px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.itemDivider {
|
||||||
|
margin: 0px;
|
||||||
|
color: #eef1f2;
|
||||||
|
}
|
||||||
|
.itemInteriorBox {
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.itemSkSj {
|
||||||
|
height: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.itemKkDw {
|
||||||
|
height: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.itemInteriorRow {
|
||||||
|
text-align: center;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
.itemXkrsNum {
|
||||||
|
color: #1c84c6;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.itemXkrs {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.itemSkdd {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.itemYyButton {
|
||||||
|
background-color: #1c84c6;
|
||||||
|
float: left;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.itemBaoCuoButton {
|
||||||
|
background-color: #1c84c6;
|
||||||
|
float: right;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue