Merge branch 'dev' of http://gogs.langye.net:3000/wangyifang/sz-kjsxy-web into dev
linyongLynn
3 months ago
commit
950953b512
@ -0,0 +1,10 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function home(params,isLoading) {
|
||||
return request({
|
||||
url: '/api/admin/other/home',
|
||||
method: 'get',
|
||||
params,
|
||||
isLoading: true
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 32 KiB |
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="admin-calendar">
|
||||
<div class="admin-main">
|
||||
<!-- 数据拉取区 -->
|
||||
<div class="admin-panel" style="max-width: 350px;">
|
||||
<el-button type="success" icon="el-icon-plus" style="width:100%;margin-top:10px;"
|
||||
@click="openCreateModal('add')">新建日历事件</el-button>
|
||||
</div>
|
||||
<!-- 日历预览区 -->
|
||||
<div class="admin-panel" style="min-width:0;flex:2;">
|
||||
<div class="admin-panel-title"><i class="el-icon-view"></i> 日历预览区</div>
|
||||
<el-calendar v-model="calendarDate">
|
||||
<template slot="dateCell" slot-scope="{date}">
|
||||
<div class="cell-content">
|
||||
<span>{{ date.getDate() }}</span>
|
||||
<div v-for="ev in eventsForDate(date)" :key="ev._id" class="event-dot" :title="ev.title"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
<div class="mt-4">
|
||||
<h3 class="mb-2"><i class="el-icon-menu"></i> 当月事件列表</h3>
|
||||
<el-empty v-if="list.length === 0" description="本月暂无事件" />
|
||||
<el-timeline v-else>
|
||||
<el-timeline-item v-for="ev in list" :key="ev._id" :timestamp="ev.start | formatDateTime"
|
||||
:color="'#409EFF'">
|
||||
<div>
|
||||
<b>{{ ev.title }}</b>
|
||||
<el-tag size="mini" style="margin-left:8px;">{{ typeText(ev.type) }}</el-tag>
|
||||
<span style="font-size:13px;"> {{ ev.start_time | formatDateTime }} ~ {{ ev.end_time | formatDateTime }}</span>
|
||||
|
||||
</div>
|
||||
<div style="margin-top:4px;">
|
||||
<el-button size="mini" type="primary" icon="el-icon-edit" @click="openCreateModal('editor',ev.id)">编辑</el-button>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<addCalendar ref="addCalendar" @refresh="getList"></addCalendar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import addCalendar from './components/addCalendar.vue'
|
||||
import {
|
||||
index
|
||||
} from '@/api/calendars/index.js'
|
||||
export default {
|
||||
components: {
|
||||
addCalendar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
calendarDate: new Date()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectMonth() {
|
||||
const now = this.calendarDate instanceof Date ? this.calendarDate : new Date(this.calendarDate)
|
||||
const month = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
|
||||
const year = now.getFullYear()
|
||||
return year + '-' + month
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
async getList() {
|
||||
const res = await index({
|
||||
month: this.selectMonth
|
||||
})
|
||||
this.list = res
|
||||
},
|
||||
openCreateModal(type, id) {
|
||||
if (type === 'editor') {
|
||||
this.$refs.addCalendar.id = id
|
||||
}
|
||||
this.$refs.addCalendar.type = type
|
||||
this.$refs.addCalendar.isShow = true
|
||||
},
|
||||
|
||||
eventsForDate(date) {
|
||||
const d = new Date(date)
|
||||
return this.list.filter(ev => {
|
||||
const evDate = new Date(ev.start_time)
|
||||
return evDate.getFullYear() === d.getFullYear() && evDate.getMonth() === d.getMonth() && evDate.getDate() === d.getDate()
|
||||
})
|
||||
},
|
||||
typeText(className) {
|
||||
if (!className) return ''
|
||||
if (className === 1) return '课程'
|
||||
if (className === 3) return '自定义事件'
|
||||
if (className === 4) return '资讯'
|
||||
return ''
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatDateTime(val) {
|
||||
if (!val) return ''
|
||||
return val.replace('T', ' ')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-calendar {
|
||||
background: #f4f6fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 30px 30px 0 30px;
|
||||
min-height: 90vh;
|
||||
}
|
||||
|
||||
.admin-panel {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
padding: 24px 18px;
|
||||
flex: 1 1 0;
|
||||
min-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.admin-panel-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
position: relative;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.event-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #409EFF;
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.admin-main {
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
padding: 18px 6px 0 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="jsc" :style="bgStyle">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import {
|
||||
getChartsHome
|
||||
} from "../../api/dashboard.js"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PanelGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
screenWidth: 0,
|
||||
screenHeight: 0,
|
||||
bgStyle: {
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
col: '',
|
||||
line: '',
|
||||
business_data: [],
|
||||
collect_data: [],
|
||||
list: {},
|
||||
customerArr: [],
|
||||
orderArr: [],
|
||||
chartData: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// chartData(val, newval) {
|
||||
// if (newval){
|
||||
// this.init();
|
||||
// }
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.$store.dispatch('app/closeSideBar', {
|
||||
withoutAnimation: false
|
||||
})
|
||||
this.calculateScreenSize()
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
},
|
||||
methods: {
|
||||
calculateScreenSize() {
|
||||
this.screenWidth = window.innerWidth
|
||||
this.screenHeight = window.innerHeight
|
||||
this.bgStyle = {
|
||||
width: this.screenWidth - 56 + 'px',
|
||||
height: this.screenHeight + 'px',
|
||||
position: 'relative',
|
||||
left: '-20px',
|
||||
top: '-50px',
|
||||
'z-index': 999
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .app-main {
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
::v-deep .hideSidebar .fixed-header {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.jsc {
|
||||
height: 100%;
|
||||
background: url(../../assets/dashboard.png) no-repeat center top;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue