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