feat: 初始化仓库
This commit is contained in:
395
src/hybrid/html/calender.html
Normal file
395
src/hybrid/html/calender.html
Normal file
@@ -0,0 +1,395 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>FullCalendar H5 Page</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut icon" href="./images/favicon.ico" />
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<script src="./js/axios.js"></script>
|
||||
<script src="./js/element-plus-zh-cn.min.js"></script>
|
||||
<script src="./js/element-plus-index.full.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
<style>
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.fc-col-header-cell-cushion {
|
||||
font-size: 12px;
|
||||
}
|
||||
.fc .fc-toolbar.fc-header-toolbar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.fc-timegrid-event .fc-event-main{
|
||||
font-size: 8px;
|
||||
}
|
||||
.el-card__body{
|
||||
padding: 5px;
|
||||
}
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-col {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.centered-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.centered-form {
|
||||
text-align: center;
|
||||
}
|
||||
.centered-form-item {
|
||||
text-align: center;
|
||||
}
|
||||
.form-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.card-item {
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.form-row {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.card-item {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-card style="height: 100vh" shadow="never">
|
||||
<el-card style="margin-top:20px;" shadow="never">
|
||||
|
||||
<el-form label-position="left" class="centered-form" label-width="80px">
|
||||
<el-row
|
||||
:gutter="20"
|
||||
justify="space-around"
|
||||
align="middle"
|
||||
class="form-row"
|
||||
>
|
||||
<el-text type="primary" size="large" style="text-align: center;">教室课表查询</el-text>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="card-item centered-content">
|
||||
<el-form-item label="校区" class="centered-form-item">
|
||||
<el-select
|
||||
v-model="campusId"
|
||||
placeholder="请选择需要查询的校区~"
|
||||
filterable
|
||||
placement="bottom"
|
||||
@change="getBuildList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in campusList"
|
||||
:key="item"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="card-item centered-content">
|
||||
<el-form-item label="教学楼" class="centered-form-item">
|
||||
<el-select
|
||||
v-model="buildId"
|
||||
placeholder="请选择需要查询的教学楼~"
|
||||
filterable
|
||||
placement="bottom"
|
||||
@change="getClassroomList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in buildList"
|
||||
:key="item"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="6">
|
||||
<div class="card-item centered-content">
|
||||
<el-form-item label="教室" class="centered-form-item">
|
||||
<el-select
|
||||
v-model="classroomId"
|
||||
placeholder="请选择需要查询的教室~"
|
||||
filterable
|
||||
placement="bottom"
|
||||
@change="getClassroomCourseList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classroomList"
|
||||
:key="item"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</el-header>
|
||||
<el-card shadow="never">
|
||||
<div id="calendar"></div>
|
||||
</el-card>
|
||||
</el-container>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const app = Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
startDate: '',
|
||||
campusId: '',
|
||||
campusList: [],
|
||||
buildId: '',
|
||||
buildList: [],
|
||||
classroomId: '',
|
||||
classroomList: [],
|
||||
courseList: [],
|
||||
currentEvents: [],
|
||||
week: 0,
|
||||
calendarApi: null,
|
||||
// Your existing data properties here
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initCalendar() {
|
||||
const calendarEl = document.getElementById('calendar')
|
||||
this.calendarApi = new FullCalendar.Calendar(calendarEl, {
|
||||
// 自定义按钮
|
||||
customButtons: {
|
||||
preWeekCustom: {
|
||||
text: '上周',
|
||||
click: () => this.prevWeek(),
|
||||
},
|
||||
nextWeekCustom: {
|
||||
text: '下周',
|
||||
click: () => this.nextWeek(),
|
||||
},
|
||||
},
|
||||
/** 修改headerToolbar */
|
||||
headerToolbar: {
|
||||
left: 'preWeekCustom',
|
||||
center: 'title', // 显示日历标题
|
||||
right: 'nextWeekCustom',
|
||||
},
|
||||
dayHeaderFormat: {
|
||||
weekday: 'short', // 显示周几，如"周日"
|
||||
month: '2-digit', // 显示两位数的月份
|
||||
day: '2-digit', // 显示两位数的日期
|
||||
omitCommas: true, // 去除逗号
|
||||
},
|
||||
contentHeight: 500, // 动态计算高度
|
||||
/** 设置日历高度 */
|
||||
timeZone: 'Asia/Shanghai',
|
||||
/** 默认视图 (月:dayGridMonth,周:timeGridWeek,日:timeGridDay) */
|
||||
initialView: 'timeGridWeek', // 默认显示周视图
|
||||
firstDay: 1, // 一周的第一天，0表示星期天，1表示星期一
|
||||
slotMinTime: '08:00', // 最小时间段，08:00
|
||||
slotMaxTime: '22:10', // 最大时间段，22:10
|
||||
slotDuration: '00:15', // 时间间隔，5分钟
|
||||
slotLabelFormat: {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
omitZeroMinute: false, // 忽略零分钟
|
||||
hour12: false, // 24小时制
|
||||
meridiem: 'short',
|
||||
},
|
||||
eventTimeFormat: {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false, // 24小时制
|
||||
},
|
||||
eventColor: '#3BB2E3', // 全部日历日程背景色
|
||||
themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
|
||||
events: [], // 事件列表
|
||||
editable: false, // 是否可以拖动修改事件
|
||||
allDaySlot: false, // 是否显示全天事件区域
|
||||
nowIndicator: true, // 是否显示当前时间线
|
||||
selectable: false, // 是否可以选择时间段
|
||||
selectMirror: false, // 是否在选择时间段时显示虚影
|
||||
handleWindowResize: true, // 是否在窗口大小变化时调整日历
|
||||
navLinks: false, // 是否可以通过点击日期导航
|
||||
fixedWeekCount: true, // 每月显示固定周数
|
||||
showNonCurrentDates: true, // 是否显示非当前月的日期
|
||||
dayMaxEvents: true, // 每天最大事件数，超过则显示更多按钮
|
||||
weekends: true, // 是否显示周末
|
||||
/** 切换语言 */
|
||||
locale: 'zh-cn', // 语言设置为简体中文
|
||||
buttonText: {
|
||||
today: '今天',
|
||||
week: '周视图',
|
||||
day: '日',
|
||||
list: '周列表',
|
||||
},
|
||||
// dateClick: (info) => {
|
||||
// // 点击日期时跳转到天视图
|
||||
// this.calendarApi.changeView('listDay', info.dateStr);
|
||||
// },
|
||||
eventContent(arg) {
|
||||
// 自定义事件内容
|
||||
const eventTitle = arg.event.title
|
||||
const customHtml = `
|
||||
<div style="text-align:center;">
|
||||
<strong>${arg.timeText}</strong><br />
|
||||
<span>${eventTitle}</span>
|
||||
</div>
|
||||
`
|
||||
return { html: customHtml }
|
||||
},
|
||||
eventClick(info) {
|
||||
let html = `
|
||||
<div style="text-align:center;">
|
||||
<div>上课时间: ${info.event.extendedProps.startTime.replace('T', ' ').replace('Z', '')}</div>
|
||||
<div>下课时间: ${info.event.extendedProps.endTime.replace('T', ' ').replace('Z', '')}</div>
|
||||
<div>课程名称: ${info.event.extendedProps.course}</div>
|
||||
<div>上课教师: ${info.event.extendedProps.teacher}</div>
|
||||
<div>上课教室: ${info.event.extendedProps.classroom}</div>
|
||||
<b>----------上课班级---------</b>
|
||||
</div>
|
||||
`
|
||||
info.event.extendedProps.classnames.forEach((element) => {
|
||||
html += `<div>${element}</div>`
|
||||
})
|
||||
// 处理点击事件
|
||||
ElementPlus.ElMessageBox.alert(html, '课程信息', {
|
||||
confirmButtonText: '确认',
|
||||
type: 'info',
|
||||
center: true,
|
||||
dangerouslyUseHTMLString: true,
|
||||
})
|
||||
// 你可以在这里实现更多逻辑，比如显示一个模态框或导航到一个新页面
|
||||
},
|
||||
})
|
||||
this.calendarApi.render()
|
||||
},
|
||||
prevWeek() {
|
||||
this.calendarApi.prev()
|
||||
this.getClassroomCourseList()
|
||||
},
|
||||
nextWeek() {
|
||||
this.calendarApi.next()
|
||||
this.getClassroomCourseList()
|
||||
},
|
||||
today() {
|
||||
this.calendarApi.today()
|
||||
},
|
||||
getTermSetting() {
|
||||
axios
|
||||
.get('http://101.200.126.63:9000/getTermSetting')
|
||||
.then((response) => {
|
||||
this.startDate = response.data.data.startDate
|
||||
localStorage.setItem('termSetting', JSON.stringify(response.data.data))
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
getCampusList() {
|
||||
axios.get('http://101.200.126.63:9000/getCampusList').then((response) => {
|
||||
if (response.data.code === 200) {
|
||||
this.campusList = response.data.data
|
||||
localStorage.setItem('campusSetting', JSON.stringify({ campusId: this.campusId, campusList: response.data.data }))
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
})
|
||||
},
|
||||
getBuildList() {
|
||||
if (!this.campusId)
|
||||
return
|
||||
axios.get(`http://101.200.126.63:9000/getBuilds/${this.campusId}`).then((response) => {
|
||||
if (response.data.code === 200) {
|
||||
this.buildList = response.data.data
|
||||
localStorage.setItem('buildSetting', JSON.stringify({ campusId: this.campusId, buildList: response.data.data }))
|
||||
}
|
||||
}).catch((error) => { console.error(error) })
|
||||
},
|
||||
getClassroomList() {
|
||||
if (!this.campusId || !this.buildId)
|
||||
return
|
||||
axios.get(`http://101.200.126.63:9000/getClassroomList/${this.buildId}`).then((response) => {
|
||||
if (response.data.code === 200) {
|
||||
this.classroomList = response.data.data
|
||||
localStorage.setItem('classroomSetting', JSON.stringify({ buildId: this.buildId, classroomList: response.data.data }))
|
||||
}
|
||||
}).catch((error) => { console.error(error) })
|
||||
},
|
||||
getClassroomCourseList() {
|
||||
const week = new Date(this.calendarApi.view.activeStart).getTime()
|
||||
this.week = Math.floor((week - new Date(this.startDate).getTime()) / (1000 * 60 * 60 * 24 * 7))
|
||||
if (!this.classroomId || !this.week)
|
||||
return
|
||||
axios.get('http://101.200.126.63:9000/getClassroomCourses', {
|
||||
params: { classroom_id: this.classroomId, week: this.week + 1 },
|
||||
}).then((response) => {
|
||||
this.calendarApi.removeAllEvents()
|
||||
if (response.data.code === 200) {
|
||||
this.currentEvents = response.data.data.map(data => ({
|
||||
id: data.id,
|
||||
title: `${data.course} - ${data.teacher}`,
|
||||
start: data.startTime.replace('T', ' ').replace('Z', ''),
|
||||
end: data.endTime.replace('T', ' ').replace('Z', ''),
|
||||
extendedProps: {
|
||||
...data,
|
||||
},
|
||||
}))
|
||||
localStorage.setItem('currentEventSetting', JSON.stringify({ classroomId: this.classroomId, week: this.week, currentEvents: this.currentEvents }))
|
||||
}
|
||||
// 清空现有事件，并添加新的事件源
|
||||
this.calendarApi.addEventSource(this.currentEvents)
|
||||
this.calendarApi.render()
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (localStorage.getItem('termSetting'))
|
||||
this.startDate = JSON.parse(localStorage.getItem('termSetting')).startDate
|
||||
|
||||
if (localStorage.getItem('campusSetting')) {
|
||||
this.campusId = JSON.parse(localStorage.getItem('campusSetting')).campusId
|
||||
this.campusList = JSON.parse(localStorage.getItem('campusSetting')).campusList
|
||||
}
|
||||
if (localStorage.getItem('buildSetting')) {
|
||||
this.campusId = JSON.parse(localStorage.getItem('buildSetting')).campusId
|
||||
this.buildList = JSON.parse(localStorage.getItem('buildSetting')).buildList
|
||||
}
|
||||
if (localStorage.getItem('classroomSetting')) {
|
||||
this.buildId = JSON.parse(localStorage.getItem('classroomSetting')).buildId
|
||||
this.classroomList = JSON.parse(localStorage.getItem('classroomSetting')).classroomList
|
||||
}
|
||||
if (localStorage.getItem('currentEventSetting')) {
|
||||
this.classroomId = JSON.parse(localStorage.getItem('currentEventSetting')).classroomId
|
||||
this.currentEvents = JSON.parse(localStorage.getItem('currentEventSetting')).currentEvents
|
||||
this.week = JSON.parse(localStorage.getItem('currentEventSetting')).week
|
||||
}
|
||||
this.initCalendar()
|
||||
this.getTermSetting()
|
||||
this.getCampusList()
|
||||
this.calendarApi.addEventSource(this.currentEvents)
|
||||
this.calendarApi.render()
|
||||
},
|
||||
})
|
||||
|
||||
// 使用 Element Plus 并指定语言
|
||||
app.use(ElementPlus, {
|
||||
locale: ElementPlusLocaleZhCn,
|
||||
})
|
||||
app.mount('#app')
|
||||
</script>
|
||||
</html>
|
||||
1
src/hybrid/html/css/index.css
Normal file
1
src/hybrid/html/css/index.css
Normal file
File diff suppressed because one or more lines are too long
BIN
src/hybrid/html/images/favicon.ico
Normal file
BIN
src/hybrid/html/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
2990
src/hybrid/html/js/axios.js
Normal file
2990
src/hybrid/html/js/axios.js
Normal file
File diff suppressed because it is too large
Load Diff
78
src/hybrid/html/js/element-plus-index.full.min.js
vendored
Normal file
78
src/hybrid/html/js/element-plus-index.full.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
src/hybrid/html/js/element-plus-zh-cn.min.js
vendored
Normal file
2
src/hybrid/html/js/element-plus-zh-cn.min.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/*! Element Plus v2.4.0 */(function(u,e){typeof exports=="object"&&typeof module!="undefined"?module.exports=e():typeof define=="function"&&define.amd?define(e):(u=typeof globalThis!="undefined"?globalThis:u||self,u.ElementPlusLocaleZhCn=e())})(this,function(){"use strict";var u={name:"zh-cn",el:{colorpicker:{confirm:"\u786E\u5B9A",clear:"\u6E05\u7A7A"},datepicker:{now:"\u6B64\u523B",today:"\u4ECA\u5929",cancel:"\u53D6\u6D88",clear:"\u6E05\u7A7A",confirm:"\u786E\u5B9A",selectDate:"\u9009\u62E9\u65E5\u671F",selectTime:"\u9009\u62E9\u65F6\u95F4",startDate:"\u5F00\u59CB\u65E5\u671F",startTime:"\u5F00\u59CB\u65F6\u95F4",endDate:"\u7ED3\u675F\u65E5\u671F",endTime:"\u7ED3\u675F\u65F6\u95F4",prevYear:"\u524D\u4E00\u5E74",nextYear:"\u540E\u4E00\u5E74",prevMonth:"\u4E0A\u4E2A\u6708",nextMonth:"\u4E0B\u4E2A\u6708",year:"\u5E74",month1:"1 \u6708",month2:"2 \u6708",month3:"3 \u6708",month4:"4 \u6708",month5:"5 \u6708",month6:"6 \u6708",month7:"7 \u6708",month8:"8 \u6708",month9:"9 \u6708",month10:"10 \u6708",month11:"11 \u6708",month12:"12 \u6708",weeks:{sun:"\u65E5",mon:"\u4E00",tue:"\u4E8C",wed:"\u4E09",thu:"\u56DB",fri:"\u4E94",sat:"\u516D"},months:{jan:"\u4E00\u6708",feb:"\u4E8C\u6708",mar:"\u4E09\u6708",apr:"\u56DB\u6708",may:"\u4E94\u6708",jun:"\u516D\u6708",jul:"\u4E03\u6708",aug:"\u516B\u6708",sep:"\u4E5D\u6708",oct:"\u5341\u6708",nov:"\u5341\u4E00\u6708",dec:"\u5341\u4E8C\u6708"}},select:{loading:"\u52A0\u8F7D\u4E2D",noMatch:"\u65E0\u5339\u914D\u6570\u636E",noData:"\u65E0\u6570\u636E",placeholder:"\u8BF7\u9009\u62E9"},cascader:{noMatch:"\u65E0\u5339\u914D\u6570\u636E",loading:"\u52A0\u8F7D\u4E2D",placeholder:"\u8BF7\u9009\u62E9",noData:"\u6682\u65E0\u6570\u636E"},pagination:{goto:"\u524D\u5F80",pagesize:"\u6761/\u9875",total:"\u5171 {total} \u6761",pageClassifier:"\u9875",page:"\u9875",prev:"\u4E0A\u4E00\u9875",next:"\u4E0B\u4E00\u9875",currentPage:"\u7B2C {pager} \u9875",prevPages:"\u5411\u524D {pager} \u9875",nextPages:"\u5411\u540E {pager} \u9875",deprecationWarning:"\u4F60\u4F7F\u7528\u4E86\u4E00\u4E9B\u5DF2\u88AB\u5E9F\u5F03\u7684\u7528\u6CD5\uFF0C\u8BF7\u53C2\u8003 el-pagination \u7684\u5B98\u65B9\u6587\u6863"},messagebox:{title:"\u63D0\u793A",confirm:"\u786E\u5B9A",cancel:"\u53D6\u6D88",error:"\u8F93\u5165\u7684\u6570\u636E\u4E0D\u5408\u6CD5!"},upload:{deleteTip:"\u6309 delete \u952E\u53EF\u5220\u9664",delete:"\u5220\u9664",preview:"\u67E5\u770B\u56FE\u7247",continue:"\u7EE7\u7EED\u4E0A\u4F20"},table:{emptyText:"\u6682\u65E0\u6570\u636E",confirmFilter:"\u7B5B\u9009",resetFilter:"\u91CD\u7F6E",clearFilter:"\u5168\u90E8",sumText:"\u5408\u8BA1"},tree:{emptyText:"\u6682\u65E0\u6570\u636E"},transfer:{noMatch:"\u65E0\u5339\u914D\u6570\u636E",noData:"\u65E0\u6570\u636E",titles:["\u5217\u8868 1","\u5217\u8868 2"],filterPlaceholder:"\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",noCheckedFormat:"\u5171 {total} \u9879",hasCheckedFormat:"\u5DF2\u9009 {checked}/{total} \u9879"},image:{error:"\u52A0\u8F7D\u5931\u8D25"},pageHeader:{title:"\u8FD4\u56DE"},popconfirm:{confirmButtonText:"\u786E\u5B9A",cancelButtonText:"\u53D6\u6D88"}}};return u});
|
||||
//# sourceMappingURL=zh-cn.min.js.map
|
||||
6
src/hybrid/html/js/index.js
Normal file
6
src/hybrid/html/js/index.js
Normal file
File diff suppressed because one or more lines are too long
15361
src/hybrid/html/js/vue.global.js
Normal file
15361
src/hybrid/html/js/vue.global.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user