diff --git a/src/assets/scss/modules/management/detail-main.scss b/src/assets/scss/modules/management/detail-main.scss new file mode 100644 index 000000000..fdea6a5bd --- /dev/null +++ b/src/assets/scss/modules/management/detail-main.scss @@ -0,0 +1,383 @@ + +@import "@/assets/scss/c/config.scss"; +@import "@/assets/scss/c/function.scss"; + + + +.cell-width-area{ + width: 450px +} + + +.div_searchmap { + z-index: 1000; + position: absolute; + top: 5px; + left: 5px; +} + +.div-btn{ + margin-top:50px; + display: flex; + justify-content: center; + + .item_btn { + font-size: 14px; + padding: 8px 16px; + cursor: pointer; + color:#fff; + + border: 1px dashed #0c81fe; + border-radius: 6px; + background-color: #0c81fe; + } + + .mgl { + margin-left: 20px; + } +} +.cell-width-1{ + width: 250px +} +.cell-width-long{ + width: 450px +} +.cell-width-2{ + width: 350px +} + +.cell-width-map { + width: 200px; +} +.item_width_3 { + margin-left: 10px; + width: 150px; +} + +.process-form{ + margin-top:20px; + + .process-title { + margin-bottom: 25px; + margin-left: -5px; + font-size: 16px; + font-family: PingFang SC; + font-weight: bold; + color: #333; + line-height: 18px; + } + + .process-title-vis{ + color: #fff; + } +} + +.m-card { + overflow-x: auto; +} + + +.m-btns { + display: flex; + justify-content: center; +} + + +.m-info { + padding-left: 30px; + font-size: 14px; + font-family: PingFang SC; + font-weight: 400; + color: #333; + line-height: 24px; + // width: 500px; + + .info-title { + margin-top: 30px; + font-size: 20px; + font-family: PingFang SC; + font-weight: bold; + color: #333; + line-height: 30px; + } + .info-content { + margin: 20px 0; + } + .info-pics { + display: flex; + margin: 20px 0; + img { + display: block; + width: 32%; + height: 90px; + margin-right: 9px; + object-fit: cover; + } + } + + .info-prop { + position: relative; + margin: 10px 0; + display: flex; + padding-left: 15px; + + .line{ + text-decoration:underline; + color: #3e8ef7; + } + .line:hover{ + cursor:pointer + } + .info-title-2 { + + flex: 0 0 100px; + font-size: 14px; + } + + > span, + > div { + display: block; + // max-width: 300px; + } + + &::before { + content: ""; + display: block; + position: absolute; + top: 9px; + left: 0; + width: 7px; + height: 7px; + background: #0c81fe; + border-radius: 3px; + margin-right: 10px; + } + + .div_map { + width:500px; + padding-top:10px + } + } + .info-prop-vis{ + color:#fff; + } +} + +.m-case { + height: 600px; + padding: 20px 0 20px 0; + overflow-y: auto; +} + +.m-row { + // display: flex; + justify-content: space-between; + width:100%; + padding-left:50px; +} + +.m-hint { + position: relative; + height: 300px; + + // 暂无数据 + img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + } +} + +.m-line { + min-width: 400px; + + .stat { + margin: 20px 0 10px; + display: flex; + .stat-item { + width: 33%; + text-align: center; + + div { + font-size: 17px; + font-family: Source Han Serif SC; + font-weight: 500; + color: rgba(#000, 0.5); + line-height: 24px; + &.z-weak { + font-size: 12px; + font-family: Source Han Serif SC; + font-weight: 500; + color: rgba(#000, 0.5); + line-height: 24px; + } + } + } + } +} + +.m-process { + margin-top: 30px; + margin-left: 15px; + width: 400px; + + .process-title { + margin-bottom: 25px; + margin-left: -5px; + font-size: 16px; + font-family: PingFang SC; + font-weight: bold; + color: #333; + line-height: 18px; + } + + .process-title-vis{ + color: #fff; + } + + .list { + position: relative; + box-sizing: border-box; + margin-top: 30px/2; + margin-left: 50px/2; + padding: 0 0 0 30px/2; + width: 680px/2; + border-left: 3px solid #0c81fe; + padding-right: 10px; + + &::before { + content: ""; + position: absolute; + z-index: 1; + display: block; + top: -2px/2; + left: -2px/2; + width: 5px/2; + height: 20px/2; + background-color: #333; + } + + .item { + position: relative; + z-index: 2; + margin-bottom: 8px; + padding-bottom: 8px; + font-size: 16px; + font-family: PingFang SC; + font-weight: 400; + color: #333; + line-height: 24px; + padding-left: 20px; + padding-top: 1px; + + &::before { + content: ""; + display: block; + position: absolute; + top: -5px; + left: -11px; + width: 18px; + height: 18px; + background: #0c81fe; + border: 4px solid lighten(#0c81fe, 15); + border-radius: 100%; + } + + &.z-on { + &::before { + background: #e08400; + border-color: lighten(#e08400, 15); + } + } + + &:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; + } + + .item-row { + margin-top: -10px; + margin-bottom: 10px; + display: flex; + } + + .name { + position: relative; + padding: 0 10px; + font-size: 12px; + font-family: PingFang SC; + font-weight: 500; + color: #fff; + line-height: 22px; + height: 22px; + border-radius: 10px 0 10px 0; + background-color: #0c81fe; + // background-color: #e08400; + } + + .date { + margin-left: 10px; + font-size: 12px; + font-family: PingFang SC; + font-weight: 500; + color: #7ca1d2; + line-height: 25px; + } + + .detail { + @include cs; + font-size: 14px; + line-height: 20px; + margin-bottom: 5px; + display: flex; + + .detail-field { + flex:0 0 100px; + + text-align: justify; + text-align-last: justify; + } + .detail-value { + // width: 78%; + .detail-link { + display: inline; + } + } + } + + .attachement-list { + padding-left: 80px; + a { + display: block; + cursor: pointer; + color: #4df0ff; + font-size: 14px; + + i { + color: #333; + } + } + } + } + + .item-vis{ + color:#fff + } + } +} + +.m-top { + display: flex; +} + +.m-chart { + min-height: 200px; +} + + + + diff --git a/src/views/modules/communityParty/regionalParty/activitys.vue b/src/views/modules/communityParty/regionalParty/activitys.vue index 75a4d178b..b47e6d116 100644 --- a/src/views/modules/communityParty/regionalParty/activitys.vue +++ b/src/views/modules/communityParty/regionalParty/activitys.vue @@ -434,16 +434,19 @@ export default { }, detailClosed () { + console.log(this.$refs.ref_detail) + this.$refs.ref_detail.diaDestroy() this.detailShow = false }, + handleDetail (row) { - // this.detailShow = true + this.detailShow = true this.formTitle = '详情' - this.formShow = true + this.$nextTick(() => { - // this.$refs.ref_detail.initForm(row) - this.$refs.ref_form.initForm('detail', row.id) + this.$refs.ref_detail.initForm(row) + // this.$refs.ref_form.initForm('detail', row.id) }) }, diff --git a/src/views/modules/communityParty/regionalParty/activitysDetail.vue b/src/views/modules/communityParty/regionalParty/activitysDetail.vue index d40e4accf..d54cc8df2 100644 --- a/src/views/modules/communityParty/regionalParty/activitysDetail.vue +++ b/src/views/modules/communityParty/regionalParty/activitysDetail.vue @@ -2,117 +2,65 @@
- - - - - - - - - - {{formData.serviceMatterShow}} - - - - - {{formData.unitName}} - - - - - {{formData.title}} - - - - - {{formData.target}} - - - -

- -
- - - {{formData.peopleCount}} - - - - {{formData.activityTime}} - - - - - {{formData.address}} - - - - - -
- -
- -
+
+
+
+ 所属网格: + {{ formData.gridName }} +
+
+ 服务事项: + {{ formData.serviceMatterShow }} +
+
+ 活动标题: + {{ formData.title }} +
+
+ 活动目标: + {{ formData.target }} +
+
+ 活动内容: +

+
+ 服务人数: + {{ formData.peopleCount }} +
+
+ 活动时间: + {{ formData.activityTime }} +
+
+ 活动地址: + {{ formData.address }} +
+
+ 活动地图: +
- +
- +
+
+
+ 活动成果: +

-

+
+
+
- -
-
+
取 消 + @click="handleCancle">关 闭
@@ -134,6 +82,7 @@ export default { data () { return { formData: {}, + initLoading: false } }, components: {}, @@ -142,11 +91,19 @@ export default { }, methods: { - handleCancle () { + handleCancle () { + this.diaDestroy() this.$emit('diaClose') }, + + diaDestroy () { + if (map) { + map.destroy() + } + }, + async initForm (row) { this.startLoading() @@ -160,8 +117,11 @@ export default { } this.formData = { ...row } - map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) - this.setMarker(this.formData.latitude, this.formData.longitude) + this.initLoading = true + + this.$nextTick(() => { + this.initMap() + }) this.endLoading() @@ -170,9 +130,9 @@ export default { // 地图初始化函数,本例取名为init,开发者可根据实际情况定义 initMap () { // 定义地图中心点坐标 - var center = new window.TMap.LatLng(36.0722275, 120.38945519) + var center = new window.TMap.LatLng(this.formData.latitude, this.formData.longitude) // 定义map变量,调用 TMap.Map() 构造函数创建地图 - map = new window.TMap.Map(document.getElementById('app'), { + map = new window.TMap.Map(document.getElementById('app_act_detail'), { center: center, // 设置地图中心点坐标 zoom: 17.2, // 设置地图缩放级别 pitch: 43.5, // 设置俯仰角 @@ -308,17 +268,10 @@ export default { - diff --git a/src/views/modules/communityParty/regionalParty/unitsForm.vue b/src/views/modules/communityParty/regionalParty/unitsForm.vue index f6de440b1..79f801e2a 100644 --- a/src/views/modules/communityParty/regionalParty/unitsForm.vue +++ b/src/views/modules/communityParty/regionalParty/unitsForm.vue @@ -204,7 +204,7 @@ export default { components: {}, mounted () { - this.initMap() + // this.initMap() }, methods: { @@ -234,8 +234,13 @@ export default { } - map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) - this.setMarker(this.formData.latitude, this.formData.longitude) + this.$nextTick(() => { + this.initMap() + + this.setMarker(this.formData.latitude, this.formData.longitude) + }) + + this.endLoading() @@ -283,8 +288,6 @@ export default { } }, - - async handleComfirm () { this.btnDisable = true @@ -328,6 +331,7 @@ export default { message: '操作成功' }) this.resetData() + this.$emit('dialogOk') this.btnDisable = false } else { @@ -456,6 +460,10 @@ export default { resetData () { + if (map) { + console.log(map) + map.destroy() + } this.unitId = '' this.keyWords = '' this.formData = {