From 43a618f6a0b480490cea17ea12e7f3b9b9bce3ff Mon Sep 17 00:00:00 2001 From: jiangyy Date: Mon, 19 Sep 2022 10:54:24 +0800 Subject: [PATCH 1/2] 111 --- .../scss/modules/management/detail-main.scss | 380 ++++++++++++++++++ .../communityParty/regionalParty/units.vue | 15 +- .../regionalParty/unitsDetail.vue | 159 ++++---- .../regionalParty/unitsForm.vue | 18 +- 4 files changed, 479 insertions(+), 93 deletions(-) create mode 100644 src/assets/scss/modules/management/detail-main.scss 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..f1a9cdca1 --- /dev/null +++ b/src/assets/scss/modules/management/detail-main.scss @@ -0,0 +1,380 @@ + +@import "@/assets/scss/c/config.scss"; +@import "@/assets/scss/c/function.scss"; + + + +.cell-width-area{ + width: 450px +} + +.div_map { + position: relative; +} +.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; + } + } + .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/units.vue b/src/views/modules/communityParty/regionalParty/units.vue index f5eb946e4..8a8f7b422 100644 --- a/src/views/modules/communityParty/regionalParty/units.vue +++ b/src/views/modules/communityParty/regionalParty/units.vue @@ -285,9 +285,9 @@ width="950px" top="5vh" class="dialog-h" - @closed="diaClose"> + @closed="diaDetailClose"> + @diaDetailClose="diaDetailClose"> @@ -475,12 +475,17 @@ export default { this.finishDiaShow = false this.scoreDiaShow = false }, + diaDetailClose () { + console.log(this.$refs.ref_detail) + this.$refs.ref_detail.diaDestroy() + this.detailShow = false + }, handleDetail (row) { - this.formTitle = '详情' - this.formShow = true + // this.formTitle = '详情' + this.detailShow = true this.$nextTick(() => { - this.$refs.ref_form.initForm('detail', row.id) + this.$refs.ref_detail.initForm(row) }) }, diff --git a/src/views/modules/communityParty/regionalParty/unitsDetail.vue b/src/views/modules/communityParty/regionalParty/unitsDetail.vue index b9f18486b..5b25992e2 100644 --- a/src/views/modules/communityParty/regionalParty/unitsDetail.vue +++ b/src/views/modules/communityParty/regionalParty/unitsDetail.vue @@ -2,86 +2,66 @@
- - - - {{formData.unitName}} - - - - - {{formData.type}} - - - -

{{item}}

- - - - {{formData.contact}} - - - - {{formData.contactMobile}} - - - {{formData.memberCount}} - - - {{formData.remark?formData.remark:'无'}} - - - {{formData.address}} - - - -
- -
+
+
+
+ 单位名称： + {{ formData.unitName }} +
-
+
+ 分类： + {{ formData.type }} +
+ +
+ 单位名称： + {{ formData.unitName }} +
+ +
+ 服务事项： + {{ formData.serviceMatterList.join(',') }} +
+
+ 联系人： + {{ formData.contact }} +
+
+ 联系电话： + {{ formData.contactMobile }} +
+
+ 在职党员： + {{ formData.memberCount }}
- +
+ 备注： + {{ formData.remark?formData.remark:'--' }} +
+
+ 地理位置： + {{ formData.address }} +
+ +
+ 地图位置： +
- +
+ +
+
+ +
+
-
+
取 消 + @click="handleCancle">关 闭
@@ -90,6 +70,7 @@ - - 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 = { From c7ce352eff8724cdc778311349aa9fa6aeb53645 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Mon, 19 Sep 2022 11:11:56 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E8=81=94=E5=BB=BA=E6=B4=BB=E5=8A=A8?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/modules/management/detail-main.scss | 9 +- .../regionalParty/activitys.vue | 11 +- .../regionalParty/activitysDetail.vue | 183 +++++++----------- .../regionalParty/unitsDetail.vue | 26 +-- 4 files changed, 86 insertions(+), 143 deletions(-) diff --git a/src/assets/scss/modules/management/detail-main.scss b/src/assets/scss/modules/management/detail-main.scss index f1a9cdca1..fdea6a5bd 100644 --- a/src/assets/scss/modules/management/detail-main.scss +++ b/src/assets/scss/modules/management/detail-main.scss @@ -8,9 +8,7 @@ width: 450px } -.div_map { - position: relative; -} + .div_searchmap { z-index: 1000; position: absolute; @@ -154,6 +152,11 @@ border-radius: 3px; margin-right: 10px; } + + .div_map { + width:500px; + padding-top:10px + } } .info-prop-vis{ color:#fff; 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 {