update 页面优化
This commit is contained in:
wangxinbo
parent
b662833522
commit
3bbd9d4570
@ -212,7 +212,7 @@ aside {
|
||||
}
|
||||
|
||||
&.align-center {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.justify-center {
|
||||
|
||||
@ -1,29 +1,33 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
functional: true,
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
render(h, context) {
|
||||
const { icon, title } = context.props
|
||||
const vnodes = []
|
||||
|
||||
if (icon) {
|
||||
vnodes.push(<svg-icon icon-class={icon}/>)
|
||||
}
|
||||
|
||||
if (title) {
|
||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
||||
}
|
||||
return vnodes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
name: 'MenuItem',
|
||||
functional: true,
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
render(h, context) {
|
||||
const { icon, title } = context.props
|
||||
const vnodes = []
|
||||
|
||||
if (icon) {
|
||||
vnodes.push(<svg-icon icon-class={icon}/>)
|
||||
}
|
||||
|
||||
if (title) {
|
||||
vnodes.push(
|
||||
<el-tooltip slot='title' effect='dark' content={(title)} placement="bottom">
|
||||
<span>{(title)}</span>
|
||||
</el-tooltip>
|
||||
)
|
||||
}
|
||||
return vnodes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -12,60 +12,88 @@
|
||||
:label="item.dictLabel"
|
||||
:name="item.dictLabel"
|
||||
>
|
||||
<div>
|
||||
<h2 class="result-title">综合评估结果</h2>
|
||||
<div class="comprehensive">
|
||||
<radar-chart :psMsg="item.dictValue" />
|
||||
</div>
|
||||
<div>
|
||||
<radar-chart_jk :psMsg="item.dictValue" />
|
||||
</div>
|
||||
<div class="block">
|
||||
<h2 class="block-item-title flex align-center">教育建议</h2>
|
||||
<div
|
||||
class="block"
|
||||
v-for="itemLy in assessmentcontentList.filter(
|
||||
(p) => p.parentId == item.dictValue && p.name == '健康'
|
||||
)"
|
||||
:key="itemLy.id"
|
||||
>
|
||||
{{ itemLy.name }}
|
||||
<div
|
||||
class="block"
|
||||
v-for="itemFzly in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemLy.id
|
||||
)"
|
||||
:key="itemFzly.id"
|
||||
>
|
||||
<h2 class="block-item-title flex align-center">
|
||||
{{ itemFzly.name }}
|
||||
</h2>
|
||||
<ul class="block-content">
|
||||
<li
|
||||
v-for="itemMb in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemFzly.id
|
||||
<h2 class="result-title">各项评估结果</h2>
|
||||
<el-tabs
|
||||
v-model="childTab"
|
||||
@tab-click="handleTabClick"
|
||||
>
|
||||
<el-tab-pane label="健康" name="one">
|
||||
<radar-chart_jk :psMsg="item.dictValue" v-if="childTab === 'one'" />
|
||||
<div class="block">
|
||||
<h2 class="block-item-title flex align-center">教育建议</h2>
|
||||
<div
|
||||
class="block"
|
||||
v-for="itemLy in assessmentcontentList.filter(
|
||||
p => p.parentId == item.dictValue && p.name == '健康'
|
||||
)"
|
||||
:key="itemLy.id"
|
||||
>
|
||||
{{ itemLy.name }}
|
||||
<div
|
||||
class="block"
|
||||
v-for="itemFzly in assessmentcontentList.filter(
|
||||
p => p.parentId == itemLy.id
|
||||
)"
|
||||
:key="itemMb.id"
|
||||
:key="itemFzly.id"
|
||||
>
|
||||
<p class="block-content-title">
|
||||
<span class="num">{{ itemMb.sort }}. </span
|
||||
>{{ itemMb.name }}
|
||||
</p>
|
||||
<div
|
||||
class="checkbox-content"
|
||||
v-for="itemYs in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemMb.id
|
||||
)"
|
||||
:key="itemYs.id"
|
||||
>
|
||||
<p class="checkbox-item flex align-center">
|
||||
{{ itemYs.jyjy }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="block-item-title flex align-center">
|
||||
{{ itemFzly.name }}
|
||||
</h2>
|
||||
<ul class="block-content">
|
||||
<li
|
||||
v-for="itemMb in assessmentcontentList.filter(
|
||||
p => p.parentId == itemFzly.id
|
||||
)"
|
||||
:key="itemMb.id"
|
||||
>
|
||||
<p class="block-content-title">
|
||||
<span class="num">{{ itemMb.sort }}. </span
|
||||
>{{ itemMb.name }}
|
||||
</p>
|
||||
<div
|
||||
class="checkbox-content"
|
||||
v-for="itemYs in assessmentcontentList.filter(
|
||||
p => p.parentId == itemMb.id
|
||||
)"
|
||||
:key="itemYs.id"
|
||||
>
|
||||
<p class="checkbox-item flex align-center">
|
||||
{{ itemYs.jyjy }}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="语言" name="two">
|
||||
<radar-chart_yy :psMsg="item.dictValue" v-if="childTab === 'two'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="社会" name="three">
|
||||
<radar-chart_sh
|
||||
:psMsg="item.dictValue"
|
||||
v-if="childTab === 'three'"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="科学" name="four">
|
||||
<radar-chart_kx
|
||||
:psMsg="item.dictValue"
|
||||
v-if="childTab === 'four'"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="艺术" name="five">
|
||||
<radar-chart_ys
|
||||
:psMsg="item.dictValue"
|
||||
v-if="childTab === 'five'"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- <div>
|
||||
<radar-chart_yy :psMsg="item.dictValue" />
|
||||
</div>
|
||||
<div>
|
||||
@ -76,7 +104,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<radar-chart_ys :psMsg="item.dictValue" />
|
||||
</div>
|
||||
</div> -->
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@ -100,7 +128,7 @@ export default {
|
||||
RadarChart_yy,
|
||||
RadarChart_sh,
|
||||
RadarChart_kx,
|
||||
RadarChart_ys,
|
||||
RadarChart_ys
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -113,6 +141,7 @@ export default {
|
||||
activeName: "",
|
||||
// 评估内容表格数据
|
||||
assessmentcontentList: [],
|
||||
childTab: "one"
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -127,13 +156,13 @@ export default {
|
||||
methods: {
|
||||
/** 查询幼儿未评估内容列表 */
|
||||
getNoAssessmentList() {
|
||||
listNoAssessmentcontentByChild(this.childId).then((response) => {
|
||||
listNoAssessmentcontentByChild(this.childId).then(response => {
|
||||
// console.log("rows:" + response.rows);
|
||||
this.assessmentcontentList = response.rows;
|
||||
});
|
||||
},
|
||||
getChild(childId) {
|
||||
getChildByAssessment(childId).then((response) => {
|
||||
getChildByAssessment(childId).then(response => {
|
||||
// console.log(response);
|
||||
if (response.code == "200") {
|
||||
this.childName = response.data.name;
|
||||
@ -143,7 +172,7 @@ export default {
|
||||
},
|
||||
/** 查询评估内容列表 */
|
||||
getList(childId) {
|
||||
getAssessmentDictData(childId).then((response) => {
|
||||
getAssessmentDictData(childId).then(response => {
|
||||
// console.log("rows:" + response.dictdata.length);
|
||||
if (response.dictdata.length > 0) {
|
||||
this.activeName = response.dictdata[0].dictLabel;
|
||||
@ -157,7 +186,10 @@ export default {
|
||||
// this.activeName = tab.name;
|
||||
// console.log(tab.name);
|
||||
},
|
||||
},
|
||||
handleTabClick(tab) {
|
||||
this.childTab = tab.name;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -170,6 +202,14 @@ div {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.comprehensive {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
@ -231,4 +271,4 @@ div {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="flex align-center justify-between">
|
||||
<div class="flex align-center justify-between student-main-title">
|
||||
<p class="title flex align-center">
|
||||
<span>姓名：{{ this.childName }} </span>
|
||||
<span>出生日期：{{ this.childCsrq }} </span>
|
||||
@ -39,16 +39,17 @@
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
v-for="itemLy in assessmentcontentList.filter(
|
||||
(p) => p.parentId == this.assessmentscope
|
||||
p => p.parentId == this.assessmentscope
|
||||
)"
|
||||
:key="itemLy.id"
|
||||
:label="itemLy.name"
|
||||
:name="itemLy.name"
|
||||
>
|
||||
<div v-loading="loading"
|
||||
<div
|
||||
v-loading="loading"
|
||||
class="block"
|
||||
v-for="itemFzly in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemLy.id
|
||||
p => p.parentId == itemLy.id
|
||||
)"
|
||||
:key="itemFzly.id"
|
||||
>
|
||||
@ -58,7 +59,7 @@
|
||||
<ul class="block-content">
|
||||
<li
|
||||
v-for="itemMb in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemFzly.id
|
||||
p => p.parentId == itemFzly.id
|
||||
)"
|
||||
:key="itemMb.id"
|
||||
>
|
||||
@ -68,7 +69,7 @@
|
||||
<div
|
||||
class="checkbox-content"
|
||||
v-for="itemYs in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemMb.id
|
||||
p => p.parentId == itemMb.id
|
||||
)"
|
||||
:key="itemYs.id"
|
||||
>
|
||||
@ -158,13 +159,13 @@ import {
|
||||
delAssessmentcontent,
|
||||
addAssessmentcontent,
|
||||
updateAssessmentcontent,
|
||||
exportAssessmentcontent,
|
||||
exportAssessmentcontent
|
||||
} from "@/api/benyi/assessmentcontent";
|
||||
|
||||
import { getChildByAssessment } from "@/api/benyi/child";
|
||||
import {
|
||||
addAssessmentchild,
|
||||
updateAssessmentchild,
|
||||
updateAssessmentchild
|
||||
} from "@/api/benyi/assessmentchild";
|
||||
|
||||
export default {
|
||||
@ -194,11 +195,11 @@ export default {
|
||||
name: undefined,
|
||||
iselement: undefined,
|
||||
scope: undefined,
|
||||
sort: undefined,
|
||||
sort: undefined
|
||||
},
|
||||
activeName: "健康",
|
||||
checked: false,
|
||||
checkList: [],
|
||||
checkList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -210,7 +211,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getChild(childId) {
|
||||
getChildByAssessment(childId).then((response) => {
|
||||
getChildByAssessment(childId).then(response => {
|
||||
// console.log(response);
|
||||
if (response.code == "200") {
|
||||
this.childName = response.data.name;
|
||||
@ -219,7 +220,7 @@ export default {
|
||||
this.bjmc = response.data.bjmc;
|
||||
this.classid = response.data.classid;
|
||||
this.zbjsxm = response.data.zbjsmc;
|
||||
response.ByAssessmentchild.forEach((item) =>
|
||||
response.ByAssessmentchild.forEach(item =>
|
||||
this.checkList.push(item.contentid)
|
||||
);
|
||||
if (response.isAssessment == "0") {
|
||||
@ -236,7 +237,7 @@ export default {
|
||||
/** 查询评估内容列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listAssessmentcontent(this.queryParams).then((response) => {
|
||||
listAssessmentcontent(this.queryParams).then(response => {
|
||||
// console.log("rows:" + response.rows);
|
||||
this.assessmentcontentList = response.rows;
|
||||
this.loading = false;
|
||||
@ -257,16 +258,16 @@ export default {
|
||||
// this.resetForm("form");
|
||||
// },
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
submitForm: function() {
|
||||
this.$confirm("确认生成图表数据?生成后数据不能取消", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
callback: (action) => {
|
||||
callback: action => {
|
||||
if (action === "confirm") {
|
||||
// console.log('按下 确定')
|
||||
var items = "";
|
||||
this.checkList.forEach((item) => {
|
||||
this.checkList.forEach(item => {
|
||||
//当全选被选中的时候，循环遍历源数据，把数据的每一项加入到默认选中的数组去
|
||||
items = items + item + ",";
|
||||
});
|
||||
@ -281,7 +282,7 @@ export default {
|
||||
this.form.type = "Y";
|
||||
this.form.xn = this.trem;
|
||||
this.form.scope = this.assessmentscope;
|
||||
addAssessmentchild(this.form).then((response) => {
|
||||
addAssessmentchild(this.form).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess("评估成功");
|
||||
}
|
||||
@ -289,7 +290,7 @@ export default {
|
||||
}
|
||||
} else {
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
@ -302,8 +303,8 @@ export default {
|
||||
// items = items + item + ",";
|
||||
// });
|
||||
// console.log(items);
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -319,9 +320,12 @@ div {
|
||||
.title {
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
flex-wrap: wrap;
|
||||
padding-right: 10px;
|
||||
line-height: 20px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
padding: 2px;
|
||||
padding: 0 4px;
|
||||
// &:nth-of-type(2) {
|
||||
// font-size: 14px;
|
||||
// font-weight: normal;
|
||||
@ -375,6 +379,18 @@ div {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.el-checkbox {
|
||||
display: flex;
|
||||
white-space: normal;
|
||||
.el-checkbox__input {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@media (max-width: 768.98px) {
|
||||
.title span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="20" type="flex">
|
||||
<el-col :span="8" :xs="24">
|
||||
<div class="head-container">
|
||||
<el-input
|
||||
@ -11,8 +11,6 @@
|
||||
prefix-icon="el-icon-search"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
:data="treeOptions"
|
||||
:props="defaultProps"
|
||||
@ -43,7 +41,7 @@
|
||||
import {
|
||||
treeselectstudy,
|
||||
getAssessmentcontent,
|
||||
getAssessmentcontentbyparentid,
|
||||
getAssessmentcontentbyparentid
|
||||
} from "@/api/benyi/assessmentcontent";
|
||||
import { listAssessmentintroduce } from "@/api/benyi/assessmentintroduce";
|
||||
|
||||
@ -62,19 +60,19 @@ export default {
|
||||
// 树结构
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
label: "label"
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
id: undefined,
|
||||
},
|
||||
id: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 根据名称筛选部门树
|
||||
name(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getTreeselect();
|
||||
@ -83,7 +81,7 @@ export default {
|
||||
methods: {
|
||||
/** 查询部门下拉树结构 */
|
||||
getTreeselect() {
|
||||
treeselectstudy().then((response) => {
|
||||
treeselectstudy().then(response => {
|
||||
this.treeOptions = response.data;
|
||||
});
|
||||
},
|
||||
@ -105,22 +103,22 @@ export default {
|
||||
},
|
||||
/**查询评估介绍 */
|
||||
getNote() {
|
||||
listAssessmentintroduce(null).then((response) => {
|
||||
listAssessmentintroduce(null).then(response => {
|
||||
// console.log("评估介绍:" + response.rows[0].content);
|
||||
this.note = response.rows[0].content;
|
||||
});
|
||||
},
|
||||
/** 查询一日流程任务列表 */
|
||||
getTaskList() {
|
||||
getAssessmentcontentbyparentid(this.queryParams.id).then((response) => {
|
||||
getAssessmentcontentbyparentid(this.queryParams.id).then(response => {
|
||||
var tmp = "";
|
||||
response.data.forEach((element) => {
|
||||
response.data.forEach(element => {
|
||||
tmp = tmp + element.sort + ". " + element.name + "</br>";
|
||||
});
|
||||
this.note = tmp;
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@ -190,4 +188,12 @@ div {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
.el-tree{
|
||||
max-height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-card {
|
||||
max-height: calc(100vh - 130px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,147 +1,160 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24" :xs="24">
|
||||
<div>
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
defaultView="dayGridMonth"
|
||||
locale="zh-cn"
|
||||
:buttonText="buttonText"
|
||||
:plugins="calendarPlugins"
|
||||
:events="calendarEvents"
|
||||
:eventLimit="true"
|
||||
:displayEventEnd="true"
|
||||
eventLimitText="更多"
|
||||
@eventClick="handleEventClick"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FullCalendar from "@fullcalendar/vue";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import { getAllSchoolCalendars } from "@/api/benyi/calendar";
|
||||
export default {
|
||||
name: "fullcalendar_page",
|
||||
components: {
|
||||
FullCalendar
|
||||
},
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart"
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "480px"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
header: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth, listWeek"
|
||||
},
|
||||
buttonText: {
|
||||
today: "今天",
|
||||
month: "月",
|
||||
list: "周列表"
|
||||
},
|
||||
calendarPlugins: [
|
||||
// plugins must be defined in the JS
|
||||
dayGridPlugin,
|
||||
//timeGridPlugin,
|
||||
//interactionPlugin, // needed for dateClick
|
||||
listPlugin
|
||||
],
|
||||
calendarWeekends: true,
|
||||
calendarEvents: [
|
||||
// initial event data
|
||||
// {
|
||||
// title: 'Event Now',
|
||||
// start: new Date(),
|
||||
// color: '#A61000'
|
||||
// }
|
||||
],
|
||||
calendarApi: null,
|
||||
calendarData: [],
|
||||
queryParams: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getAllSchoolCalendars(this.queryParams).then(response => {
|
||||
this.calendarEvents = response.calendarData;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleEventClick(info) {
|
||||
this.msgSuccess("活动: " + info.event.title);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calendarApi = this.$refs.fullCalendar.getApi();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
// you must include each plugins' css
|
||||
// paths prefixed with ~ signify node_modules
|
||||
@import "~@fullcalendar/core/main.css";
|
||||
@import "~@fullcalendar/daygrid/main.css";
|
||||
@import "~@fullcalendar/timegrid/main.css";
|
||||
@import "~@fullcalendar/list/main.css";
|
||||
.calendar {
|
||||
width: 820px;
|
||||
height: 100%;
|
||||
}
|
||||
.fc-widget-content {
|
||||
.fc-sun,
|
||||
.fc-sat {
|
||||
background: rgba(245, 246, 248, 0.6);
|
||||
//background: rgba(109, 113, 121, 0.6);
|
||||
}
|
||||
}
|
||||
.xs-btns-style {
|
||||
@media screen and (max-width: 768px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.el-col {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
}
|
||||
.el-col {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 96px;
|
||||
}
|
||||
.no-border-btn {
|
||||
border: none;
|
||||
}
|
||||
.fc-header-toolbar {
|
||||
@media screen and (max-width: 768px) {
|
||||
.fc-left > .fc-today-button,
|
||||
.fc-right > .fc-listWeek-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="xs-height"
|
||||
:class="className"
|
||||
:style="{ height: height, width: width }"
|
||||
>
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
defaultView="dayGridMonth"
|
||||
locale="zh-cn"
|
||||
:buttonText="buttonText"
|
||||
:plugins="calendarPlugins"
|
||||
:events="calendarEvents"
|
||||
:eventLimit="true"
|
||||
:displayEventEnd="true"
|
||||
eventLimitText="更多"
|
||||
@eventClick="handleEventClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FullCalendar from "@fullcalendar/vue";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import { getAllSchoolCalendars } from "@/api/benyi/calendar";
|
||||
export default {
|
||||
name: "fullcalendar_page",
|
||||
components: {
|
||||
FullCalendar
|
||||
},
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart"
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "480px"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
header: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth, listWeek"
|
||||
},
|
||||
buttonText: {
|
||||
today: "今天",
|
||||
month: "月",
|
||||
list: "周列表"
|
||||
},
|
||||
calendarPlugins: [
|
||||
// plugins must be defined in the JS
|
||||
dayGridPlugin,
|
||||
//timeGridPlugin,
|
||||
//interactionPlugin, // needed for dateClick
|
||||
listPlugin
|
||||
],
|
||||
calendarWeekends: true,
|
||||
calendarEvents: [
|
||||
// initial event data
|
||||
// {
|
||||
// title: 'Event Now',
|
||||
// start: new Date(),
|
||||
// color: '#A61000'
|
||||
// }
|
||||
],
|
||||
calendarApi: null,
|
||||
calendarData: [],
|
||||
queryParams: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getAllSchoolCalendars(this.queryParams).then(response => {
|
||||
this.calendarEvents = response.calendarData;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleEventClick(info) {
|
||||
this.msgSuccess("活动: " + info.event.title);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calendarApi = this.$refs.fullCalendar.getApi();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scope>
|
||||
// you must include each plugins' css
|
||||
// paths prefixed with ~ signify node_modules
|
||||
@import "~@fullcalendar/core/main.css";
|
||||
@import "~@fullcalendar/daygrid/main.css";
|
||||
@import "~@fullcalendar/timegrid/main.css";
|
||||
@import "~@fullcalendar/list/main.css";
|
||||
.calendar {
|
||||
width: 820px;
|
||||
height: 100%;
|
||||
}
|
||||
.fc-widget-content {
|
||||
.fc-scroller.fc-day-grid-container {
|
||||
height: 100% !important;
|
||||
}
|
||||
.fc-sun,
|
||||
.fc-sat {
|
||||
background: rgba(245, 246, 248, 0.6);
|
||||
//background: rgba(109, 113, 121, 0.6);
|
||||
}
|
||||
}
|
||||
.xs-btns-style {
|
||||
@media screen and (max-width: 768px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.el-col {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.el-col {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 96px;
|
||||
}
|
||||
.no-border-btn {
|
||||
border: none;
|
||||
}
|
||||
.fc-header-toolbar {
|
||||
@media screen and (max-width: 768px) {
|
||||
.fc-left > .fc-today-button,
|
||||
.fc-right > .fc-listWeek-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 768.98px) {
|
||||
.xs-height {
|
||||
height: 100% !important;
|
||||
.fc button {
|
||||
height: 30px;
|
||||
}
|
||||
.fc-toolbar h2 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
<bar-chart/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -88,6 +88,7 @@ export default {
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
|
||||
.el-card.is-always-shadow {
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
@ -95,7 +96,7 @@ export default {
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
padding: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
@ -113,8 +114,14 @@ export default {
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.chart-wrapper {
|
||||
.dashboard-editor-container .chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768.98px) {
|
||||
.dashboard-editor-container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user