You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

736 lines
34 KiB

<template>
<CommonBox title="心理建设" class="psychic-build-style">
<a-spin class="psychic-build-content-style" :spinning="spinning">
<div class="psychic-img-box-style">
<div class="img-change-box-style">
<div class="title-box-style">
<div class="img-style">
<img src="../../../assets/images/moralEducationWork/u4216.png"
style="width: 100%;height: 100%"/>
</div>
<div class="text-style">心理咨询室</div>
</div>
<div class="img-list-style">
<swiper v-if="showCounsellingRoom && counsellingRoomList.length > 0" class="banner"
:options="swiperOption01"
ref="mySwiper">
<swiper-slide v-for="(item, index) in counsellingRoomList" :key="index"
class="community-box-style">
<div class="img-box-style">
<img :src="item.imgUrl"/>
</div>
</swiper-slide>
</swiper>
<div v-if="showCounsellingRoom && counsellingRoomList.length === 0"
class="no-data-content-style">
<!--<a-empty description="暂无数据"/>-->
暂无数据~
</div>
</div>
<div class="img-change-style">
<!--<a-icon type="right" :style="{fontSize: '30px', color: '#31a8fa'}"/>-->
<div v-if="counsellingRoomList.length > 0" class="swiper-button-next" slot="button-next"
@click="prev"></div>
</div>
</div>
<div class="img-change-box-style">
<div class="img-change-style">
<div v-if="psychicClassroomList.length > 0" class="swiper-button-prev" slot="button-next"
@click="next"></div>
</div>
<div class="img-list-style">
<swiper v-if="showPsychicClassroom && psychicClassroomList.length > 0" class="banner"
:options="swiperOption02"
ref="classRoomSwiper">
<swiper-slide v-for="(item, index) in psychicClassroomList" :key="index"
class="community-box-style">
<div class="img-box-style">
<img :src="item.imgUrl"/>
</div>
</swiper-slide>
</swiper>
<div v-if="showPsychicClassroom && psychicClassroomList.length === 0"
class="no-data-content-style">
<!--<a-empty description="暂无数据"/>-->
暂无数据~
</div>
</div>
<div class="title-box-style">
<div class="img-style">
<img src="../../../assets/images/moralEducationWork/u4518.png"
style="width: 100%;height: 100%"/>
</div>
<div class="text-style">心理课堂</div>
</div>
</div>
</div>
<div class="psychic-img-box-style">
<div class="select-top-style">
<span :class="'select-item-style border-right-style' + (selectType === 1?' select-style':'')"
@click="typeChange(1)">心育活动</span>
<span :class="'select-item-style' + (selectType === 2?' select-style':'')"
@click="typeChange(2)">心育精选</span>
</div>
<div class="tab-content-style">
<a-tabs :activeKey="paneKey">
<a-tab-pane :key="1" tab="Tab 1">
<div class="activity-table-box-style">
<a-row class="table-header-style">
<a-col class="header-box-style border-right-style" :span="4">日期</a-col>
<a-col class="header-box-style border-right-style" :span="7">课程</a-col>
<a-col class="header-box-style border-right-style" :span="3">主讲人</a-col>
<a-col class="header-box-style border-right-style" :span="7">地点</a-col>
<a-col class="header-box-style" :span="3">参与人员</a-col>
</a-row>
<vue-scroll v-if="showPsychicActivity && psychicActivityList.length > 0"
class="table-boday-style" :ops="listScroll"
style="height:calc(100% - 40px)">
<a-row class="table-row-style" v-for="item,index in psychicActivityList"
:key="'psychicActivity_'+index">
<a-col class="header-box-style border-right-style light-style" :span="4"
:title="coverTime(item.course_date)">{{coverTime(item.course_date)}}
</a-col>
<a-col class="header-box-style border-right-style light-style italic-style"
:span="7">
<div class="overflow-style" :title="item.course_name">{{item.course_name}}
</div>
</a-col>
<a-col class="header-box-style border-right-style light-style italic-style"
:span="3">
<div class="overflow-style" :title="item.course_speaker">
{{item.course_speaker}}
</div>
</a-col>
<a-col class="header-box-style border-right-style light-style italic-style"
:span="7">
<div class="overflow-style" :title="item.course_place">
{{item.course_place}}
</div>
</a-col>
<a-col class="header-box-style light-style" :span="3">
<div class="overflow-style" :title="item.attendees">{{item.attendees}}</div>
</a-col>
</a-row>
</vue-scroll>
<div v-if="showPsychicActivity && psychicActivityList.length === 0"
class="no-data-content-style">
<a-empty description="暂无数据" style="font-size: 10px"/>
<!--暂无数据~-->
</div>
</div>
</a-tab-pane>
<a-tab-pane :key="2" tab="Tab 2">
<div class="selected-content-style">
<div v-if="showSelectedData && selectedDataList.length > 0"
class="copywriting-list-style">
<a-row class="table-row-style" v-for="item,index in selectedDataList"
:key="'selectednews_'+index">
<a-col class="header-box-style" :span="24" @click="showInfo(item)">{{'• ' +
item.info_title}}
</a-col>
</a-row>
</div>
<div v-if="showSelectedData && selectedImgDataList.length > 0"
class="copywriting-img-style">
<div class="img-box-style" v-for="item,index in selectedImgDataList"
:key="'selected_img_'+ index">
<div class="img-style">
<img-preview :imgObj="item.imgObj"/>
<!--<img src="../../../assets/images/moralEducationWork/u4203.svg"-->
<!--style="width: 100%;height: 100%"/>-->
</div>
<div class="text-style" @click="showInfo(item)">
{{item.info_title}}
</div>
</div>
</div>
<div v-if="showSelectedData && selectedDataList.length === 0 && selectedImgDataList.length === 0"
class="no-data-content-style">
<a-empty description="暂无数据" style="font-size: 10px"/>
<!--暂无数据~-->
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
</div>
</a-spin>
<common-info :infoObj="infoObj" :show="visible" @cancel="closeInfo"/>
</CommonBox>
</template>
<script>
/*
* 德育工作
* */
import CommonBox from '../../secondPages/commonBox.vue';
import {Icon, Tabs, row, col, Empty, Spin} from 'ant-design-vue';
import {swiper, swiperSlide} from "vue-awesome-swiper";
// import "swiper/dist/css/swiper.css";
import moment from 'moment';
import ImgPreview from '../../../common/imgPreview.vue';
import CommonInfo from '../../../common/commonInfo.vue';
export default {
data() {
return {
spinning: false,
selectType: 1,//1 周历 2 校历
paneKey: 1,
listScroll: this.StaticParams.scrollOption,
swiperOption01: {
speed: 1000,
loop: true,
slidesPerView: 3,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
},
},
swiperOption02: {
speed: 1000,
loop: true,
slidesPerView: 3,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-prev',
},
},
showCounsellingRoom: false,
counsellingRoomList: [],
showPsychicClassroom: false,
psychicClassroomList: [],
showPsychicActivity: false,
psychicActivityList: [],
showSelectedData: false,
selectedDataList: [],
selectedImgDataList: [],
visible: false,
infoObj: {},
}
},
mounted() {
//获取心理咨询室数据
this.getPsychologyCounsellingRoom();
//获取心理课堂数据
this.getPsychologyClassroom();
//获取心育活动数据
this.getMentalEducationActivities();
//获取心育精选数据
this.getMentalEducationSelected();
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
},
classRoomSwiper() {
return this.$refs.classRoomSwiper.$swiper
}
},
methods: {
//获取心理咨询室数据
getPsychologyCounsellingRoom: function () {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_deyu_xinli",
"query_param": [
this.BaseConfig.person_info_my.bureau_id + ""
// "900008135"
]
},
"query_cache": 0,
"query_count": [],
"query_format": "json",
"query_group": []
}
this.showCounsellingRoom = false;
this.counsellingRoomList = [];
this.DataexReportInterface.callInterface([{
params: param,
method: "post",
}], (result) => {
// console.log('获取心理咨询室数据', result)
this.showCounsellingRoom = true;
if (result[0].data.success) {
let res = result[0].data.result;
if (res !== "") {
let dataList = JSON.parse(res);
if (dataList && dataList.length > 0) {
this.counsellingRoomList.push(...dataList);
}
}
}
})
},
//获取心理课堂数据
getPsychologyClassroom: function () {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_deyu_xinli2",
"query_param": [
this.BaseConfig.person_info_my.bureau_id + ""
// "900008135"
]
},
"query_cache": 0,
"query_count": [],
"query_format": "json",
"query_group": []
}
this.showPsychicClassroom = false;
this.psychicClassroomList = [];
this.DataexReportInterface.callInterface([{
params: param,
method: "post",
}], (result) => {
// console.log('获取心理课堂数据', result)
this.showPsychicClassroom = true;
if (result[0].data.success) {
let res = result[0].data.result;
if (res !== "") {
let dataList = JSON.parse(res);
if (dataList && dataList.length > 0) {
this.psychicClassroomList.push(...dataList);
}
}
}
})
},
getMentalEducationActivities: function () {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_deyu_xinyu",
"query_param": [
this.BaseConfig.person_info_my.bureau_id + ""
]
},
"query_cache": 0,
"query_count": [],
"query_format": "json",
"query_group": []
}
this.spinning = true;
this.showPsychicActivity = false;
this.psychicActivityList = [];
this.DataexReportInterface.callInterface([{
params: param,
method: "post",
}], (result) => {
this.spinning = false;
this.showPsychicActivity = true;
if (result[0].data.success) {
let res = result[0].data.result;
if (res !== "") {
let dataList = JSON.parse(res);
if (dataList && dataList.length > 0) {
this.psychicActivityList.push(...dataList);
}
}
}
})
},
getMentalEducationSelected: function () {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_deyu_xinli3",
"query_param": [
this.BaseConfig.person_info_my.bureau_id + ""
]
},
"query_cache": 0,
"query_count": [],
"query_format": "json",
"query_group": []
}
this.showSelectedData = false;
this.selectedDataList = [];
this.DataexReportInterface.callInterface([{
params: param,
method: "post",
}], (result) => {
this.showSelectedData = true;
if (result[0].data.success) {
let res = result[0].data.result;
if (res !== "") {
let dataList = JSON.parse(res);
if (dataList && dataList.length > 0) {
for (let i = 0; i < 5; i++) {
let dataInfo = dataList[i];
if (dataInfo) {
let cover_json = dataList[i].cover_json;
if (cover_json !== "") {
let imgObj = JSON.parse(cover_json);
dataList[i]["imgObj"] = imgObj[0];
}
this.selectedDataList.push(dataList[i]);
}
}
for (let i = 5; i < 7; i++) {
let dataInfo = dataList[i];
if (dataInfo) {
let cover_json = dataList[i].cover_json;
if (cover_json !== "") {
let imgObj = JSON.parse(cover_json);
dataList[i]["imgObj"] = imgObj[0];
}
this.selectedImgDataList.push(dataList[i]);
}
}
}
}
}
})
},
prev() {
this.swiper.slidePrev();
},
next() {
this.classRoomSwiper.slideNext();
},
changeType: function () {
this.timing = setInterval(() => {
let paneKey = this.paneKey === 1 ? 2 : 1;
this.typeChange(paneKey)
}, 12000)
},
typeChange: function (type) {
if (this.selectType !== type) {
this.selectType = type;
this.paneKey = type;
}
},
coverTime: function (time) {
return moment(time.replace('T', ' ').replace('Z', '')).format("YYYY-MM-DD");
},
showInfo: function (item) {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_dangjian_xiangxi",
"query_param": [
item.info_id + ""
]
},
"query_cache": 0,
"query_count": [],
"query_format": "json",
"query_group": []
}
this.DataexReportInterface.callInterface([{
params: param,
method: "post",
}], (result) => {
if (result[0].data.success) {
let dataInfo = JSON.parse(result[0].data.result);
if (dataInfo && dataInfo.length > 0) {
let info = dataInfo[0];
let infoObj = {
title: info.info_title,
infoArr: [
{"title": "发布单位", "value": info.ORG_NAME},
{"title": "发布人", "value": info.person_name},
{"title": "发布时间", "value": info.create_time.replace('T', ' ').replace('Z', '')},
],
content: info.info_content
}
this.infoObj = infoObj;
this.visible = true;
}
}
})
},
closeInfo: function () {
this.visible = false;
}
},
components: {
CommonBox,
AIcon: Icon,
swiper,
swiperSlide,
ATabs: Tabs,
ATabPane: Tabs.TabPane,
ARow: row,
ACol: col,
AEmpty: Empty,
ASpin: Spin,
ImgPreview,
CommonInfo
}
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/style";
.psychic-build-style {
width: 600px !important;
height: 380px !important;
display: flex;
.psychic-build-content-style {
width: 100%;
height: 345px;
/deep/ .ant-spin-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.psychic-img-box-style {
width: 100%;
height: calc(50% - 5px);
display: flex;
flex-direction: column;
.img-change-box-style {
width: 100%;
height: 50%;
display: flex;
.title-box-style {
width: 80px;
height: 100%;
border-radius: 5px;
background-color: #3a4670;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.img-style {
width: 30px;
height: 30px;
}
.text-style {
margin-top: 5px;
}
}
.img-list-style {
width: calc(100% - 130px);
height: 100%;
display: flex;
justify-content: space-between;
.banner {
.community-box-style {
display: flex;
justify-content: center;
align-items: center;
}
}
.no-data-content-style {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
/deep/ .ant-empty {
.ant-empty-image {
height: 60px !important;
}
.ant-empty-description {
color: white;
}
}
}
}
.img-change-style {
width: 50px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.swiper-button-next {
position: relative !important;
top: auto !important;
margin-top: 0 !important;
right: auto !important;
}
.swiper-button-prev {
position: relative !important;
top: auto !important;
margin-top: 0 !important;
left: auto !important;
}
}
}
.select-top-style {
width: 100%;
height: 20px;
.select-item-style {
color: #1379c8;
padding: 0 10px;
font-size: 16px;
cursor: pointer;
}
.border-right-style {
border-right: 1px solid #1379c8;
}
.select-style {
color: $color-default-bright;
cursor: default;
}
}
.tab-content-style {
width: 100%;
height: 100%;
.ant-tabs {
height: 100%;
.ant-tabs-content {
width: 100%;
height: 100%;
}
.ant-tabs-bar {
display: none !important;
}
}
.activity-table-box-style {
width: 100%;
height: 100%;
.table-header-style {
width: 100%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid $color-default-bright;
background-color: #18356a;
color: white;
.header-box-style {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.border-right-style {
border-right: 1px solid $color-default-bright;
}
}
.table-boday-style {
width: 100%;
height: calc(100% - 50px);
display: flex;
flex-direction: column;
.table-row-style {
width: 100%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid $color-default-bright;
.header-box-style {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.border-right-style {
border-right: 1px solid $color-default-bright;
}
.light-style {
color: $color-default-bright;
.overflow-style {
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.default-style {
color: #F59A23;
}
.danger-style {
color: #EC808D;
}
.italic-style {
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.no-data-content-style {
width: 100%;
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
color: white;
.ant-empty {
.ant-empty-image {
height: 60px !important;
}
.ant-empty-description {
color: white;
}
}
}
}
.selected-content-style {
width: 100%;
height: 100%;
display: flex;
.copywriting-list-style {
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
color: $color-default-bright;
.table-row-style {
.header-box-style {
cursor: pointer;
}
}
}
.copywriting-img-style {
width: 40%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.img-box-style {
width: 100%;
height: calc(50% - 5px);
border-radius: 5px;
display: flex;
.img-style {
width: 50%;
height: 100%;
}
.text-style {
width: 50%;
height: 100%;
background-color: #333333;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
}
}
}
.no-data-content-style {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
/deep/ .ant-empty {
.ant-empty-image {
height: 60px !important;
}
.ant-empty-description {
color: white;
}
}
}
}
}
}
}
}
}
</style>