|
|
<template>
|
|
|
<CommonBox title="队建风采" class="party-center-team-building-style">
|
|
|
<a-spin class="teamBuild" :spinning="spinning">
|
|
|
<div class="topPic">
|
|
|
<!--<div class="swiperBox">-->
|
|
|
<!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i" alt="">-->
|
|
|
<!--</div>-->
|
|
|
<div class="swiperBox" v-if="imgList.length > 3">
|
|
|
<!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i">-->
|
|
|
<img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-building-'+i"
|
|
|
:imgObj="item"/>
|
|
|
</div>
|
|
|
<div class="img-no-swiper-box" v-else>
|
|
|
<!--<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i">-->
|
|
|
<img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-building-'+i"
|
|
|
:imgObj="item"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="botText">
|
|
|
<vue-scroll :ops="listScroll" :style="showPage?'height:14rem':'height:14rem'"
|
|
|
class="score-list-div">
|
|
|
<a-list item-layout="horizontal" :data-source="dataList" :locale="{emptyText:'暂无数据'}">
|
|
|
<a-list-item slot="renderItem" slot-scope="item" class="teamListLi" @click="showInfo(item)">
|
|
|
<p class="contentText">
|
|
|
<span style="width: 7px;height: 7px;margin-right:5px;border-radius: 50%;background: #fff;margin-left: -5px;display: inline-block;"></span>
|
|
|
{{item.info_title}}</p>
|
|
|
</a-list-item>
|
|
|
</a-list>
|
|
|
</vue-scroll>
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
<CommonInfo commonQueryId="query_dangjian_tuandui" :infoObj="infoObj" :commonId="infoId" :show="visible"
|
|
|
@cancel="closeInfo"/>
|
|
|
</CommonBox>
|
|
|
</template>
|
|
|
<script>
|
|
|
/*
|
|
|
* 品牌创建
|
|
|
* */
|
|
|
import CommonBox from '../secondPages/commonBox.vue';
|
|
|
import {List, Icon, Avatar, Row, Col, Spin} from 'ant-design-vue';
|
|
|
import ImgPreview from '../../common/imgPreview.vue';
|
|
|
import CommonInfo from '../../common/centerCommonInfo.vue';
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
spinning: false,
|
|
|
dataList: [],
|
|
|
imgList: [],
|
|
|
//轮播图图片-弃
|
|
|
imgArr: [
|
|
|
{src: require("./images/listPic1.png")},
|
|
|
{src: require("./images/listPic6.png")},
|
|
|
{src: require("./images/listPic3.png")},
|
|
|
],
|
|
|
//滚动条
|
|
|
showPage: true,
|
|
|
listScroll: this.StaticParams.scrollOption,
|
|
|
teamBuildList: [
|
|
|
{
|
|
|
content: '【红心向党·凝聚动力】“青春向党·奋斗强国” ——洋浦学校2021（下）入团仪式暨“青年之家”揭牌仪式纪实'
|
|
|
}, {
|
|
|
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
|
|
|
}, {
|
|
|
content: '【和谐经开·智慧洋浦】 “童年再见·青春你好” ——洋浦学校团委、少工委庆祝建党百年系列活动（五）暨2019级离队仪式'
|
|
|
}, {
|
|
|
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
|
|
|
}, {
|
|
|
content: '【红心向党·凝聚动力】“青春向党·奋斗强国” ——洋浦学校2021（下）入团仪式暨“青年之家”揭牌仪式纪实'
|
|
|
}, {
|
|
|
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
|
|
|
},
|
|
|
],
|
|
|
visible: false,
|
|
|
modalTitle: '查看详情',
|
|
|
infoId: "",
|
|
|
infoObj: {}
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getDataexReport();
|
|
|
},
|
|
|
components: {
|
|
|
CommonBox,
|
|
|
ARow: Row,
|
|
|
ACol: Col,
|
|
|
AList: List,
|
|
|
AListItem: List.Item,
|
|
|
AAvatar: Avatar,
|
|
|
ImgPreview,
|
|
|
ASpin: Spin,
|
|
|
CommonInfo
|
|
|
},
|
|
|
methods: {
|
|
|
getDataexReport: function () {
|
|
|
let param = {
|
|
|
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
|
|
|
"query": {
|
|
|
"query_id": "query_dangjian_duijian",
|
|
|
"query_param": [
|
|
|
this.BaseConfig.person_info_my.bureau_id + ""
|
|
|
]
|
|
|
},
|
|
|
"query_cache": 0,
|
|
|
"query_count": [],
|
|
|
"query_format": "json",
|
|
|
"query_group": []
|
|
|
}
|
|
|
this.spinning = true;
|
|
|
this.DataexReportInterface.callInterface([{
|
|
|
params: param,
|
|
|
method: "post",
|
|
|
}], (result) => {
|
|
|
this.spinning = false;
|
|
|
if (result[0].data.success) {
|
|
|
this.dataList = [];
|
|
|
this.imgList = [];
|
|
|
let dataList = JSON.parse(result[0].data.result);
|
|
|
//console.log("队建数据：",dataList);
|
|
|
this.dataList.push(...dataList);
|
|
|
for (let i = 0, len = dataList.length; i < len; i++) {
|
|
|
let item = dataList[i];
|
|
|
let coverJson = JSON.parse(item.cover_json);
|
|
|
if (coverJson && coverJson.length > 0) {
|
|
|
for (let j = 0, jLen = coverJson.length; j < jLen; j++) {
|
|
|
this.imgList.push(coverJson[j])
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
let imgLen = this.imgList.length;
|
|
|
if (imgLen < 3) {
|
|
|
for (let i = 0; i < 3 - imgLen; i++) {
|
|
|
this.imgList.push(null)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
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.create_time.replace('T', ' ').replace('Z', '')},
|
|
|
{"title": "上传人", "value": info.person_name},
|
|
|
],
|
|
|
content: info.info_content
|
|
|
}
|
|
|
this.infoObj = infoObj;
|
|
|
this.visible = true;
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
closeInfo: function () {
|
|
|
this.infoId = "";
|
|
|
this.visible = false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss" type="text/scss">
|
|
|
.party-center-team-building-style {
|
|
|
width: 605px !important;
|
|
|
height: 400px !important;
|
|
|
.teamBuild {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
/deep/ .ant-spin-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
/*图片*/
|
|
|
.topPic {
|
|
|
height: 30%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
overflow: hidden;
|
|
|
@keyframes mySwiper {
|
|
|
0% {
|
|
|
transform: translateX(0)
|
|
|
}
|
|
|
100% {
|
|
|
transform: translateX(-104%);
|
|
|
}
|
|
|
}
|
|
|
.swiperBox {
|
|
|
display: inherit;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
animation: mySwiper 6s ease infinite;
|
|
|
.swiperImg {
|
|
|
height: 112px;
|
|
|
width: 172px;
|
|
|
margin-right: 38px;
|
|
|
img {
|
|
|
height: 112px !important;
|
|
|
width: 172px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.img-no-swiper-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.swiperImg {
|
|
|
height: 112px;
|
|
|
width: 172px;
|
|
|
/*margin-right: 30px;*/
|
|
|
img {
|
|
|
display: inline-block;
|
|
|
height: 112px !important;
|
|
|
width: 172px !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
/*文字*/
|
|
|
.botText {
|
|
|
height: 60%;
|
|
|
.ant-list-split .ant-list-item {
|
|
|
border-bottom: none;
|
|
|
padding: 0;
|
|
|
margin-left: 5px !important;
|
|
|
color: #fff;
|
|
|
cursor: pointer;
|
|
|
> > > p {
|
|
|
font-size: 16px;
|
|
|
margin-bottom: 18px !important;
|
|
|
}
|
|
|
}
|
|
|
.score-list-div {
|
|
|
width: 100%;
|
|
|
height: 23rem;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-top: 15px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
