|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="dialog-h-content scroll-h">
|
|
|
|
|
<div v-if="initLoading" class="m-detail-main">
|
|
|
|
|
<div class="m-info">
|
|
|
|
|
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<div class="m-info-prop" style="flex: 0 0 50%;">
|
|
|
|
|
<span class="u-info-title-2">活动类型: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>绿色环保-垃圾分类</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-info-prop" style="flex: 0 0 50%;">
|
|
|
|
|
<span class="u-info-title-2">活动名称: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>要想环境好，垃圾要分类</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<div class="m-info-prop" style="flex: 0 0 50%;">
|
|
|
|
|
<span class="u-info-title-2">活动时间: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>2024-03-12 09:00至2024-03-12 12:00</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-info-prop" style="flex: 0 0 50%;">
|
|
|
|
|
<span class="u-info-title-2">协办方: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>{{ formData.unitName || "--" }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="m-info-prop">
|
|
|
|
|
<span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动内容: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="m-info-prop">
|
|
|
|
|
<span class="u-info-title-2">活动地点: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>{{ formData.address || "--" }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-info-prop">
|
|
|
|
|
<span class="u-info-title-2"></span>
|
|
|
|
|
<div class="div_map">
|
|
|
|
|
<div id="app_detail_unit"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-info-prop">
|
|
|
|
|
<span class="u-info-title-2">线上报名: </span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<el-switch v-model="online" :disabled="true"></el-switch>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<div class="m-info-prop" style="flex: 0 0 50%;">
|
|
|
|
|
<span class="u-info-title-2">报名截止时间：</span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>2024-03-1123:59</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="m-info-prop" style="flex: 0 0 50%;">
|
|
|
|
|
<span class="u-info-title-2">活动积分：</span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>3</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="m-info-prop">
|
|
|
|
|
<span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动总结：</span>
|
|
|
|
|
<span style="margin-right: 10px;"> </span>
|
|
|
|
|
<span>活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-info-prop" style="display: flex; flex-wrap: wrap; align-items: flex-start;">
|
|
|
|
|
<span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动图片：</span>
|
|
|
|
|
<div v-for="(image, index) in imageArray" :key="index">
|
|
|
|
|
<img style="width: 200px; height: 160px; margin-right: 30px;margin-bottom: 10px;"
|
|
|
|
|
:src="image.url" alt="Image" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="margin-top: 20px;">
|
|
|
|
|
<div style="font-size: 15px; color: black; margin-left: -30px;margin-bottom: 10px;">
|
|
|
|
|
报名名单
|
|
|
|
|
</div>
|
|
|
|
|
<el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column label="序号" header-align="center" align="center" type="index"
|
|
|
|
|
width="50"></el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="unitName" header-align="center" align="center" label="姓名"
|
|
|
|
|
min-width="80">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="agencyName" header-align="center" align="center" label="联系电话"
|
|
|
|
|
min-width="100">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="type" header-align="center" align="center" label="报名时间"
|
|
|
|
|
min-width="80">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="serviceMatterListShow" header-align="center" align="center"
|
|
|
|
|
label="备注说明" show-overflow-tooltip min-width="120">
|
|
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="contact" header-align="center" align="center" label="签到" width="80">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="contactMobile" header-align="center" align="center" label="签到地点"
|
|
|
|
|
width="120">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="margin-top: 20px;">
|
|
|
|
|
<div style="font-size: 15px; color: black; margin-left: -30px; margin-bottom: 10px;">
|
|
|
|
|
活动实况
|
|
|
|
|
</div>
|
|
|
|
|
<el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading"
|
|
|
|
|
style="width: 100%">
|
|
|
|
|
<el-table-column label="序号" header-align="center" align="center" type="index"
|
|
|
|
|
width="50"></el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column prop="unitName" header-align="center" align="center" label="姓名"
|
|
|
|
|
min-width="100">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="agencyName" header-align="center" align="center" label="联系电话"
|
|
|
|
|
min-width="80">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="type" header-align="center" align="center" label="实况内容"
|
|
|
|
|
min-width="280">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column prop="serviceMatterListShow" header-align="center" align="center"
|
|
|
|
|
label="活动照片" show-overflow-tooltip min-width="120">
|
|
|
|
|
</el-table-column> -->
|
|
|
|
|
<el-table-column prop="serviceMatterListShow" header-align="center" align="center"
|
|
|
|
|
label="活动照片" show-overflow-tooltip min-width="120">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<div v-for="(item, index) in scope.row.serviceMatterListShow" :key="index"
|
|
|
|
|
style="display: flex;">
|
|
|
|
|
<img :src="item.url"
|
|
|
|
|
style="max-width: 20px; max-height: 20px; margin-right: 10px;" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="m-detail-btn">
|
|
|
|
|
<el-button size="small" @click="handleCancle">关 闭</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Loading } from "element-ui"; // 引入Loading服务
|
|
|
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
|
|
|
import daiMap from "@/utils/dai-map";
|
|
|
|
|
|
|
|
|
|
var map;
|
|
|
|
|
var search;
|
|
|
|
|
var markers;
|
|
|
|
|
var infoWindowList;
|
|
|
|
|
var geocoder; // 新建一个正逆地址解析类
|
|
|
|
|
|
|
|
|
|
let loading; // 加载动画
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
formData: {},
|
|
|
|
|
initLoading: false,
|
|
|
|
|
online: true,
|
|
|
|
|
imageArray: [
|
|
|
|
|
{ url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
],
|
|
|
|
|
tableData: [
|
|
|
|
|
{ unitName: '张三', agencyName: '123456789', type: '内容1', serviceMatterListShow: [ { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },] },
|
|
|
|
|
{ unitName: '李四', agencyName: '987654321', type: '内容2', serviceMatterListShow: [ { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
|
|
|
|
|
{ url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },] },
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {},
|
|
|
|
|
created() { },
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
handleCancle() {
|
|
|
|
|
this.diaDestroy();
|
|
|
|
|
this.$emit("diaDetailClose");
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
diaDestroy() {
|
|
|
|
|
if (map) {
|
|
|
|
|
// map.destroy()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async initForm(row) {
|
|
|
|
|
this.startLoading();
|
|
|
|
|
this.formData = JSON.parse(JSON.stringify(row));
|
|
|
|
|
this.initLoading = true;
|
|
|
|
|
console.log(this.formData);
|
|
|
|
|
// await nextTick(200)
|
|
|
|
|
|
|
|
|
|
let { latitude, longitude } = this.$store.state.user;
|
|
|
|
|
console.log("lat" + latitude + ",lon" + longitude);
|
|
|
|
|
if (this.formData.latitude && this.formData.longitude) {
|
|
|
|
|
latitude = this.formData.latitude;
|
|
|
|
|
longitude = this.formData.longitude;
|
|
|
|
|
}
|
|
|
|
|
if (!latitude || latitude == "" || latitude == "0") {
|
|
|
|
|
latitude = 39.9088810666821;
|
|
|
|
|
longitude = 116.39743841556731;
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
if (!map) {
|
|
|
|
|
this.initMap(latitude, longitude);
|
|
|
|
|
} else {
|
|
|
|
|
map.setCenter(latitude, longitude);
|
|
|
|
|
map.setMarker(latitude, longitude);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.endLoading();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
|
|
|
|
|
initMap(latitude, longitude) {
|
|
|
|
|
map = new daiMap(
|
|
|
|
|
document.getElementById("app_detail_unit"),
|
|
|
|
|
{ latitude, longitude },
|
|
|
|
|
{
|
|
|
|
|
zoom: 16.2, // 设置地图缩放级别
|
|
|
|
|
pitch: 43.5, // 设置俯仰角
|
|
|
|
|
rotation: 45, // 设置地图旋转角度
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// // 监听地图平移结束
|
|
|
|
|
// map.on("dragend", (e) => {
|
|
|
|
|
// this.handleMoveCenter(e);
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
map.setCenter(latitude, longitude);
|
|
|
|
|
map.setMarker(latitude, longitude);
|
|
|
|
|
},
|
|
|
|
|
// 开启加载动画
|
|
|
|
|
startLoading() {
|
|
|
|
|
loading = Loading.service({
|
|
|
|
|
lock: true, // 是否锁定
|
|
|
|
|
text: "正在加载……", // 加载中需要显示的文字
|
|
|
|
|
background: "rgba(0,0,0,.7)", // 背景颜色
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 结束加载动画
|
|
|
|
|
endLoading() {
|
|
|
|
|
// clearTimeout(timer);
|
|
|
|
|
if (loading) {
|
|
|
|
|
loading.close();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
props: {},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "@/assets/scss/modules/management/detail-main.scss";
|
|
|
|
|
|
|
|
|
|
// span {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
// white-space: nowrap; /* 避免换行 */
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<style scoped></style>
|
