111

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;
+}
+
+
+
+

src/views/modules/communityParty/regionalParty/units.vue

@@ -285,9 +285,9 @@
                width="950px"
                top="5vh"
                class="dialog-h"
-               @closed="diaClose">
+               @closed="diaDetailClose">
       <units-detail ref="ref_detail"
-                    @diaClose="diaClose"></units-detail>
+                    @diaDetailClose="diaDetailClose"></units-detail>
     </el-dialog>
 
     <!-- 完成情况 -->
@@ -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)
       })
     },
 

src/views/modules/communityParty/regionalParty/unitsDetail.vue

@@ -2,86 +2,66 @@
   <div>
     <div class="dialog-h-content scroll-h">
 
-      <el-form ref="ref_form"
-               :inline="true"
-               :model="formData"
-               class="form">
-
-        <el-form-item label="单位名称："
-                      prop="unitName"
-                      label-width="150px"
-                      style="display: block">
-          <span class="detail_span">{{formData.unitName}}</span>
-
-        </el-form-item>
-        <el-form-item label="分类："
-                      prop="type"
-                      label-width="150px"
-                      style="display: block">
-
-          <span class="detail_span">{{formData.type}}</span>
-
-        </el-form-item>
-        <el-form-item label="服务事项："
-                      prop="serviceMatterList"
-                      label-width="150px"
-                      style="display: block">
-          <p class="detail_span"
-             v-for="(item,index) in formData.serviceMatterList"
-             :key="index">{{item}}</p>
-
-        </el-form-item>
-        <el-form-item label="联系人："
-                      prop="contact"
-                      label-width="150px"
-                      style="display: block">
-          <span class="detail_span">{{formData.contact}}</span>
-
-        </el-form-item>
-        <el-form-item label="联系电话："
-                      prop="contactMobile"
-                      label-width="150px"
-                      style="display: block">
-          <span class="detail_span">{{formData.contactMobile}}</span>
-        </el-form-item>
-        <el-form-item label="在职党员："
-                      style="display: block"
-                      prop="memberCount"
-                      label-width="150px">
-          <span class="detail_span">{{formData.memberCount}}</span>
-        </el-form-item>
-        <el-form-item label="备注："
-                      prop="remark"
-                      label-width="150px"
-                      style="display: block">
-          <span class="detail_span">{{formData.remark?formData.remark:'无'}}</span>
-        </el-form-item>
-        <el-form-item label="地理位置："
-                      prop="address"
-                      label-width="150px"
-                      style="display: block">
-          <span class="detail_span">{{formData.address}}</span>
-
-        </el-form-item>
-        <el-form-item label="位置坐标："
-                      prop="longitude"
-                      label-width="150px"
-                      style="display: block">
-          <div style="width:500px">
-
-            <div id="app">
+      <div v-if="initLoading"
+           class="m-row">
+        <div class="m-info">
+          <div class="info-prop">
+            <span class="info-title-2">单位名称：</span>
+            <span>{{ formData.unitName }}</span>
+          </div>
 
-            </div>
+          <div class="info-prop">
+            <span class="info-title-2">分类：</span>
+            <span>{{ formData.type }}</span>
+          </div>
+
+          <div class="info-prop">
+            <span class="info-title-2">单位名称：</span>
+            <span>{{ formData.unitName }}</span>
+          </div>
+
+          <div class="info-prop">
+            <span class="info-title-2">服务事项：</span>
+            <span>{{ formData.serviceMatterList.join(',') }}</span>
+          </div>
 
+          <div class="info-prop">
+            <span class="info-title-2">联系人：</span>
+            <span>{{ formData.contact }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-2">联系电话：</span>
+            <span>{{ formData.contactMobile }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-2">在职党员：</span>
+            <span>{{ formData.memberCount }}</span>
           </div>
-        </el-form-item>
+          <div class="info-prop">
+            <span class="info-title-2">备注：</span>
+            <span>{{ formData.remark?formData.remark:'--' }}</span>
+          </div>
+          <div class="info-prop">
+            <span class="info-title-2">地理位置：</span>
+            <span>{{ formData.address }}</span>
+          </div>
+
+          <div class="info-prop">
+            <span class="info-title-2">地图位置：</span>
+            <div style="width:500px;padding-top:10px">
 
-      </el-form>
+              <div id="app_detail"></div>
+
+            </div>
+          </div>
+
+        </div>
+      </div>
 
     </div>
-    <div class="div_btn">
+    <div class="div-btn">
       <el-button size="small"
-                 @click="handleCancle">取 消</el-button>
+                 @click="handleCancle">关 闭</el-button>
 
     </div>
   </div>
@@ -90,6 +70,7 @@
 <script>
 
 import { Loading } from 'element-ui' // 引入Loading服务
+import nextTick from 'dai-js/tools/nextTick'
 
 var map
 var search
@@ -102,27 +83,40 @@ export default {
   data () {
     return {
       formData: {},
-
+      initLoading: false,
     }
   },
   components: {},
   created () {
-    this.initMap()
+
   },
 
   methods: {
     handleCancle () {
+      this.diaDestroy()
+      this.$emit('diaDetailClose')
 
-      this.$emit('diaClose')
+    },
 
+    diaDestroy () {
+      if (map) {
+        map.destroy()
+      }
     },
 
     async initForm (row) {
 
       this.startLoading()
       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
+      console.log(this.formData)
+      await nextTick(200)
+      // this.$nextTick(() => {
+      this.initMap()
+      // })
+
+      // map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
+
 
       this.endLoading()
 
@@ -131,9 +125,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_detail'), {
         center: center, // 设置地图中心点坐标
         zoom: 17.2, // 设置地图缩放级别
         pitch: 43.5, // 设置俯仰角
@@ -262,8 +256,8 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped >
-@import "@/assets/scss/modules/visual/communityManageForm.scss";
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/management/detail-main.scss";
 </style>
 <style scoped>
 .detail_span {
@@ -279,4 +273,3 @@ export default {
 }
 </style>
 
-

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 = {