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 {
|
||||
|
||||
@ -21,7 +21,11 @@ export default {
|
||||
}
|
||||
|
||||
if (title) {
|
||||
vnodes.push(<span slot='title'>{(title)}</span>)
|
||||
vnodes.push(
|
||||
<el-tooltip slot='title' effect='dark' content={(title)} placement="bottom">
|
||||
<span>{(title)}</span>
|
||||
</el-tooltip>
|
||||
)
|
||||
}
|
||||
return vnodes
|
||||
}
|
||||
|
||||
@ -12,18 +12,23 @@
|
||||
: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>
|
||||
<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 == '健康'
|
||||
p => p.parentId == item.dictValue && p.name == '健康'
|
||||
)"
|
||||
:key="itemLy.id"
|
||||
>
|
||||
@ -31,7 +36,7 @@
|
||||
<div
|
||||
class="block"
|
||||
v-for="itemFzly in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemLy.id
|
||||
p => p.parentId == itemLy.id
|
||||
)"
|
||||
:key="itemFzly.id"
|
||||
>
|
||||
@ -41,7 +46,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"
|
||||
>
|
||||
@ -52,7 +57,7 @@
|
||||
<div
|
||||
class="checkbox-content"
|
||||
v-for="itemYs in assessmentcontentList.filter(
|
||||
(p) => p.parentId == itemMb.id
|
||||
p => p.parentId == itemMb.id
|
||||
)"
|
||||
:key="itemYs.id"
|
||||
>
|
||||
@ -65,7 +70,30 @@
|
||||
</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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
.el-tree{
|
||||
max-height: calc(100vh - 180px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.el-card {
|
||||
max-height: calc(100vh - 130px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24" :xs="24">
|
||||
<div>
|
||||
<div
|
||||
class="xs-height"
|
||||
:class="className"
|
||||
:style="{ height: height, width: width }"
|
||||
>
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
defaultView="dayGridMonth"
|
||||
@ -16,9 +17,6 @@
|
||||
@eventClick="handleEventClick"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -108,6 +106,9 @@ export default {
|
||||
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);
|
||||
@ -122,8 +123,7 @@ export default {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
}
|
||||
|
||||
.el-col {
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
@ -143,5 +143,18 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
@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