洋浦学校八大中心 德育管理前端

init
gongdi 3 years ago
parent 1f087691ca
commit 014ffb6fef

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

@ -1,6 +1,7 @@
<template>
<div class="img-preview-box-style">
<img :src="getImgURL()" style="width: 100%;height: 100%" @click="previewData">
<!--:style="{fontSize: '16px', color: '#31a8fa',marginLeft:'0.5rem'}"-->
<img :src="getImgURL()" :style="{width: '100%',height: '100%',borderRadius:isBorderRadius?'5px':''}" @click="previewData">
<preview-box ref="previewBox"/>
</div>
</template>
@ -16,6 +17,10 @@
type: Object,
default: () => {
}
},
isBorderRadius:{
type:Boolean,
default:true
}
},
data(){
@ -34,6 +39,7 @@
return this.BaseConfig.url_path_down + this.img.key;
} else {
//
return require("../assets/images/noImg.png");
}
},
previewData: function () {

@ -59,12 +59,8 @@
* */
import {List, Icon, Avatar, Row, Col, Modal,Spin} from 'ant-design-vue';
import CommonBox from '../secondPages/commonBox.vue';
import axios from 'axios';
const querystring = require('querystring');
import Upload from '../../../../components/common/uploader/Upload.vue';
import ImgPreview from '../../common/imgPreview.vue';
import PreviewBox from '../../../../components/common/preview/PreviewBox';
import PreviewManager from '../../../../components/common/preview/previewManager';
export default{
data(){
return {
@ -133,7 +129,6 @@
},
methods: {
getDataexReport: function () {
let url = "http://10.10.14.186:9009/dataex/report/QuerySimpleGP";
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
@ -179,8 +174,6 @@
}
this.dataList.push(info);
}
console.log("imgList:",this.imgList);
console.log("dataList:",this.dataList);
}
})
},
@ -189,10 +182,6 @@
return this.BaseConfig.url_path_down + img.key;
}
},
previewData: function (item) {
console.log("item",item)
PreviewManager.analysisPreview(item,this.$refs.previewBox)
},
},
components: {
CommonBox,
@ -205,7 +194,6 @@
AModal: Modal,
ASpin:Spin,
Upload,
PreviewBox,
ImgPreview
},
}

@ -2,18 +2,25 @@
<CommonBox title="队建风采" class="party-center-team-building-style">
<div class="teamBuild">
<div class="topPic">
<div class="swiperBox">
<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i" alt="">
<!--<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-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="teamBuildList">
<a-list item-layout="horizontal" :data-source="dataList">
<a-list-item slot="renderItem" slot-scope="item" class="teamListLi">
<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.content}}</p>
{{item.info_title}}</p>
</a-list-item>
</a-list>
</vue-scroll>
@ -27,9 +34,12 @@
* */
import CommonBox from '../secondPages/commonBox.vue';
import {List, Icon, Avatar, Row, Col} from 'ant-design-vue';
import ImgPreview from '../../common/imgPreview.vue';
export default{
data(){
return {
dataList:[],
imgList:[],
//
imgArr: [
{src: require("./images/listPic1.png")},
@ -59,6 +69,9 @@
]
}
},
mounted(){
this.getDataexReport();
},
components: {
CommonBox,
ARow: Row,
@ -66,8 +79,48 @@
AList: List,
AListItem: List.Item,
AAvatar: Avatar,
ImgPreview
},
methods: {}
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])
}
}
}
}
})
},
}
}
</script>
<style scoped lang="scss" type="text/scss">
@ -96,11 +149,21 @@
width: 100%;
height: 100%;
animation: mySwiper 6s ease infinite;
.swiperImg {
height: 100%;
width: 30%;
margin-right: 38px;
}
}
.swiperImg {
.img-no-swiper-box {
display: inherit;
width: 100%;
height: 100%;
width: 30%;
margin-right: 38px;
.swiperImg {
height: 100%;
width: 30%;
margin-right: 38px;
}
}
}
/*文字*/

@ -4,18 +4,22 @@
<div class="leftList">
<vue-scroll :ops="listScroll" :style="showPage?'height:21rem':'height:22rem'"
class="score-list-div">
<a-list item-layout="horizontal" :data-source="teamList">
<a-list item-layout="horizontal" :data-source="dataList">
<a-list-item slot="renderItem" slot-scope="item" class="teamListLi">
<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.content}}</p>
{{item.info_title}}</p>
</a-list-item>
</a-list>
</vue-scroll>
</div>
<div class="rightAnimate">
<div class="swiperBox">
<img class="swiperImg" v-for="(item,i) in imgArr" :src="item.src" :key="i">
<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-help-'+i" :imgObj="item" />
</div>
<div class="img-no-swiper-box" v-else>
<img-preview class="swiperImg" v-for="(item,i) in imgList" :key="'team-help-'+i" :imgObj="item" />
</div>
</div>
</div>
@ -27,6 +31,7 @@
* */
import {Carousel, List, Icon, Avatar, Row, Col} from 'ant-design-vue';
import CommonBox from '../secondPages/commonBox.vue';
import ImgPreview from '../../common/imgPreview.vue';
export default{
data(){
return {
@ -56,10 +61,15 @@
}, {
content: '【和谐经开·智慧洋浦】凝聚青春力量 筑牢青春底色 --洋浦学校团支部成立大会纪实'
},
]
],
dataList:[],
imgList:[],
}
},
watch: {},
mounted(){
this.getDataexReport();
},
components: {
CommonBox,
ACarousel: Carousel,
@ -68,10 +78,46 @@
AList: List,
AListItem: List.Item,
AAvatar: Avatar,
ImgPreview
},
methods: {
imgChange: function (index) {
this.currentIndex = index;
getDataexReport: function () {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_dangjian_tuandui",
"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])
}
}
}
}
})
},
}
}
@ -80,15 +126,14 @@
.party-center-team-help-style {
width: 605px !important;
height: 400px !important;
.teamBoost {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
.leftList {
margin-right: 23px;
width: 66%;
/*margin-right: 23px;*/
width: calc(70% - 5px);
.ant-list-split .ant-list-item {
border-bottom: none;
padding: 0;
@ -110,7 +155,7 @@
}
}
.rightAnimate {
width: 30%;
width: calc(30% - 5px);
margin: 0 auto;
overflow: hidden;
@keyframes mySwiper {
@ -132,7 +177,16 @@
margin-bottom: 15px;
}
}
.img-no-swiper-box {
display: inherit;
width: 100%;
height: 100%;
.swiperImg {
height: 30%;
width: 100%;
margin-bottom: 15px;
}
}
}
}

Loading…
Cancel
Save