冲突

.env.development

@@ -1,6 +1,6 @@
 NODE_ENV=development
-VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
-# VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  http://192.168.1.140/api
 # VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
 VUE_APP_NODE_ENV=dev 

.env.production.sit

@@ -1,5 +1,5 @@
 NODE_ENV=production
-VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
+# VUE_APP_API_SERVER =  https://epmet-test.elinkservice.cn/api
-# VUE_APP_API_SERVER =  http://192.168.1.140/api
+VUE_APP_API_SERVER =  http://192.168.1.140/api
 VUE_APP_NODE_ENV=prod:sit
 VUE_APP_PUBLIC_PATH=epmet-oper

public/index.html

@@ -6,6 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
   <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=LWBBZ-TIGC3-VFP3L-YNMWH-FJB7T-JFBLO"></script>
+  <!-- f2图表 -->
+  <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>
 
   <!-- 站点配置 -->
   <script>

src/assets/scss/modules/visual/distributionAnalyze.scss

@@ -77,6 +77,7 @@
         .el-range-input {
           color: #fff;
           background: #06186d;
+          margin-left: 10px;
         }
         .el-range-separator {
           color: #fff;
@@ -191,3 +192,20 @@
     }
   }
 }
+
+.table-status {
+  position: relative;
+  height: 300px;
+
+  // 暂无数据
+  .no-data {
+    &-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+}

src/assets/scss/modules/visual/incident-info.scss

@@ -10,7 +10,7 @@
     .wrap {
         position: relative;
         margin: 120px auto;
-        width: 1000px;
+        width: 1020px;
 
         .title {
             padding: 10px;
@@ -144,7 +144,7 @@
 
 .m-case {
     @include scrollBar;
-    height: 400px;
+    height: 600px;
     padding: 20px 0 20px 0;
     overflow-y: auto;
 }
@@ -154,6 +154,55 @@
     justify-content: space-between;
 }
 
+.m-yanpan {
+    padding-left: 62px;
+    padding-right: 0;
+    min-height: 300px;
+}
+
+.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(#fff, 0.5);
+                line-height: 24px;
+                &.z-weak {
+                    font-size: 12px;
+                    font-family: Source Han Serif SC;
+                    font-weight: 500;
+                    color: rgba(#fff, 0.5);
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+}
+
 .m-tb {
     padding-left: 62px;
     padding-right: 40px;

src/assets/scss/modules/visual/issue-info.scss

@@ -0,0 +1,135 @@
+@import '../../c/config';
+@import '../../c/function';
+@import './c/common';
+
+.m-pop {
+  @include shield;
+  background-color: rgba(#000, 0.9);
+  overflow-y: auto;
+
+  .wrap {
+    position: relative;
+    margin: 120px auto;
+    width: 1020px;
+
+    .title {
+      padding: 10px;
+      font-size: 22px;
+      font-family: PingFang SC;
+      font-weight: 800;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+
+      img {
+        display: block;
+        margin-right: 5px;
+      }
+      span {
+        display: block;
+      }
+    }
+
+    .btn-close {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      cursor: pointer;
+    }
+
+    .line {
+      margin: 20px auto;
+      width: 900px;
+      height: 1px;
+      border: 1px dashed #1257c9;
+    }
+  }
+}
+
+.m-content {
+  display: flex;
+}
+
+.m-info {
+  padding-left: 62px;
+  font-size: 16px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 24px;
+  width: 50%;
+
+  .info-title {
+    margin-top: 30px;
+    font-size: 20px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 30px;
+  }
+
+  .info-prop {
+    position: relative;
+    margin: 10px 0;
+    display: flex;
+    padding-left: 15px;
+
+    .info-pics {
+      display: flex;
+      margin: 20px 0;
+      img {
+        display: block;
+        width: 32%;
+        height: 90px;
+        margin-right: 9px;
+        object-fit: cover;
+      }
+    }
+    > 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;
+    }
+  }
+}
+
+.m-line {
+  width: 50%;
+
+  .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(#fff, 0.5);
+        line-height: 24px;
+        &.z-weak {
+          font-size: 12px;
+          font-family: Source Han Serif SC;
+          font-weight: 500;
+          color: rgba(#fff, 0.5);
+          line-height: 24px;
+        }
+      }
+    }
+  }
+}

src/assets/scss/modules/visual/processAnalyze.scss

@@ -293,3 +293,9 @@
     }
   }
 }
+
+.table-status {
+  position: relative;
+  width: 600px;
+  margin: auto;
+}

src/assets/scss/modules/visual/resibuzz.scss

@@ -66,35 +66,36 @@
   flex-direction: row;
   // flex-wrap: wrap;
   // justify-content: center;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 180px);
 
   .g-l {
     flex-shrink: 0;
     width: 600px;
-    height: calc(100vh - 190px);
+    height: calc(100vh - 180px);
   }
 
   .g-r {
     text-align: center;
-    margin: 40px 19px 20px;
+    margin: 40px 0 0 19px;
     width: calc(100vw - 60px - 600px);
-    height: calc(100vh - 140px - 20px);
+    // height: calc(100vh - 170px - 20px);
   }
 }
 
 .g-r {
-  .tb {
+  .m-tb {
     position: relative;
-    height: calc(100vh - 220px);
+    height: 100%;
-    overflow-y: auto;
+    .tb {
-    @include scrollBar;
+      height: calc(100vh - 170px - 50px - 50px);
-
+      overflow-y: auto;
+      @include scrollBar;
+    }
     .m-pagination {
-      position: absolute;
       box-sizing: border-box;
-      right: 0;
+      position: absolute;
-      bottom: 0;
+      right: 5px;
-
+      bottom: 5px;
       width: 100%;
       height: 40px;
       display: flex;
@@ -133,3 +134,10 @@
     height: 90%;
   }
 }
+
+.table-status {
+  position: relative;
+  width: 600px;
+  margin: auto;
+  margin-top: 200px;
+}

src/assets/scss/modules/visual/typeAnalyze.scss

@@ -66,35 +66,37 @@
   flex-direction: row;
   // flex-wrap: wrap;
   // justify-content: center;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 180px);
 
   .g-l {
     flex-shrink: 0;
     width: 600px;
-    height: calc(100vh - 190px);
+    height: calc(100vh - 180px);
   }
 
   .g-r {
     text-align: center;
-    margin: 40px 19px 20px;
+    margin: 40px 0 0 19px;
     width: calc(100vw - 60px - 600px);
-    height: calc(100vh - 140px - 20px);
+    // height: calc(100vh - 140px - 20px);
   }
 }
 
 .g-r {
-  .tb {
+  .m-tb {
     position: relative;
-    height: calc(100vh - 220px);
+    height: 100%;
-    overflow-y: auto;
+    .tb {
-    @include scrollBar;
+      height: calc(100vh - 170px - 50px - 50px);
+      overflow-y: auto;
+      @include scrollBar;
+    }
 
     .m-pagination {
       position: absolute;
       box-sizing: border-box;
-      right: 0;
+      right: 5px;
-      bottom: 0;
+      bottom: 5px;
-
       width: 100%;
       height: 40px;
       display: flex;

src/views/components/foldText.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="m-fold_text" :class="initOk ? '' : 'z-init'">
+    <div
+      id="cnt"
+      ref="foldSlot"
+      class="fold_text-cnt"
+      :class="isFolded ? 'z-fold-' + row : ''"
+    >
+      <slot></slot>
+    </div>
+    <div v-if="!noNeedFold" class="fold_text-btn" @click="shiftFold">
+      {{ isFolded ? "展开" : "收起" }}
+    </div>
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+
+export default {
+  name: "ResiSearch",
+  props: {
+    row: {
+      type: Number,
+      default: 2,
+    },
+    lineHeight: {
+      type: Number,
+      default: 24,
+    },
+  },
+  data() {
+    return {
+      initOk: false,
+
+      isFolded: false,
+
+      noNeedFold: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      await nextTick();
+
+      const height = await this.$refs.foldSlot.offsetHeight;
+      const { row, lineHeight } = this;
+
+      let noNeedFold = height / row < lineHeight;
+
+      this.noNeedFold = noNeedFold;
+      this.isFolded = !noNeedFold;
+      this.initOk = true;
+    },
+
+    shiftFold() {
+      let { isFolded } = this;
+      this.isFolded = !isFolded;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scope>
+// 清除容器自身浮动
+@mixin cs {
+  &::after {
+    display: block;
+    visibility: hidden;
+    clear: both;
+    overflow: hidden;
+    height: 0;
+    content: "";
+  }
+}
+
+// 不换行显示省略号
+@mixin toe {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+}
+
+// 强制文本换行 多行
+@mixin toeM($num) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+
+.m-fold_text {
+  @include cs;
+
+  &.z-init {
+    background-color: rgba(#000, 0.05);
+    > view {
+      visibility: hidden;
+    }
+  }
+
+  .fold_text-cnt {
+    &.z-fold-1 {
+      @include toe;
+    }
+    &.z-fold-2 {
+      @include toeM(2);
+    }
+    &.z-fold-3 {
+      @include toeM(3);
+    }
+    &.z-fold-4 {
+      @include toeM(4);
+    }
+    &.z-fold-5 {
+      @include toeM(5);
+    }
+  }
+
+  .fold_text-btn {
+    float: right;
+    margin-right: -4px;
+    padding: 0 5px;
+    line-height: 20px;
+    color: #0c81fe;
+    cursor: pointer;
+  }
+}
+</style>

src/views/modules/visual/basicinfo/cpts/incident-info.vue

@@ -15,7 +15,12 @@
           <div class="info-title">事件内容</div>
           <div class="info-content">{{ info.eventContent }}</div>
           <div class="info-pics">
-            <img :src="src" :key="src" v-for="src in info.eventImgs" />
+            <img
+              :src="src"
+              :key="src"
+              v-for="src in info.eventImgs"
+              @click="watchImg(src)"
+            />
           </div>
           <div class="info-prop">
             <span>提交时间：</span>
@@ -63,6 +68,26 @@
         </div>
 
         <div class="m-case">
+          <div class="m-yanpan" v-if="groupIndex == 0">
+            <div v-if="info.projectId">
+              <analyse
+                v-if="yanPan.loading"
+                singleTitle="智能随手拍"
+                :userList="yanPan.houseUserList"
+                :userName="yanPan.icUserName"
+                :singleList="yanPan.categoryList"
+                @user="toUserInfo"
+                @project="toProjectInfo"
+              />
+              <screen-loading v-else>加载中</screen-loading>
+            </div>
+            <div v-else class="m-hint">
+              <img
+                src="@/assets/img/modules/visual/noData.png"
+                class="no-data-img"
+              />
+            </div>
+          </div>
           <div class="m-tb" v-if="groupIndex == 1">
             <cpt-tb
               :col-list="comment.colList"
@@ -72,98 +97,108 @@
             ></cpt-tb>
           </div>
 
-          <div class="m-row" v-if="groupIndex == 2">
+          <div v-if="groupIndex == 2">
-            <div class="m-info">
+            <div class="m-row" v-if="info.projectId">
-              <div class="info-prop">
+              <div class="m-info">
-                <span>项目标题：</span>
+                <div class="info-prop">
-                <span>{{ projectInfo.projectTitle }}</span>
+                  <span>项目标题：</span>
-              </div>
+                  <span>{{ projectInfo.projectTitle }}</span>
-              <div class="info-prop">
-                <span>项目方案：</span>
-                <span>{{ projectInfo.projectTitle }}</span>
-              </div>
-              <div class="info-prop">
-                <span>内部备注：</span>
-                <span>{{ projectInfo.internalRemark || "--" }}</span>
-              </div>
-              <div class="info-prop">
-                <span>当前处理部门：</span>
-                <span>{{ projectInfo.departmentNameList.join("、") }}</span>
-              </div>
-              <div class="info-prop">
-                <span>分类：</span>
-                <div>
-                  <div :key="item" v-for="item in projectCate">
-                    {{ item.name }}
-                  </div>
                 </div>
-              </div>
+                <div class="info-prop">
-              <div class="info-prop">
+                  <span>项目方案：</span>
-                <span>标签：</span>
+                  <span>{{ projectInfo.projectTitle }}</span>
-                <div>
+                </div>
-                  <div :key="item" v-for="item in projectTag">
+                <div class="info-prop">
-                    {{ item.name }}
+                  <span>内部备注：</span>
-                  </div>
+                  <span>{{ projectInfo.internalRemark || "--" }}</span>
+                </div>
+                <div class="info-prop">
+                  <span>当前处理部门：</span>
+                  <span>{{ projectInfo.departmentNameList.join("、") }}</span>
+                </div>
+                <div class="info-prop" v-if="projectCate.length > 0">
+                  <span>分类：</span>
+                  <fold-text :row="3">
+                    <div :key="item.name" v-for="item in projectCate">
+                      {{ item.name }}
+                    </div>
+                  </fold-text>
+                </div>
+                <div class="info-prop" v-if="projectTag.length > 0">
+                  <span>标签：</span>
+                  <fold-text :row="3">
+                    <div :key="item.name" v-for="item in projectTag">
+                      {{ item.name }}
+                    </div>
+                  </fold-text>
                 </div>
               </div>
-            </div>
 
-            <div class="m-process" v-if="projectProcess.length > 0">
+              <div class="m-process" v-if="projectProcess.length > 0">
-              <div class="process-title">处理进展</div>
+                <div class="process-title">处理进展</div>
-              <div class="list">
+                <div class="list">
-                <div
+                  <div
-                  class="item"
+                    class="item"
-                  :class="index === 0 ? 'z-on' : ''"
+                    :class="index === 0 ? 'z-on' : ''"
-                  :key="item.processId"
+                    :key="item.processId"
-                  v-for="(item, index) in projectProcess"
+                    v-for="(item, index) in projectProcess"
-                >
+                  >
-                  <div class="item-row">
+                    <div class="item-row">
-                    <div class="name">{{ item.processName }}</div>
+                      <div class="name">{{ item.processName }}</div>
-                    <div class="date">
+                      <div class="date">
-                      {{ item.processTime }}
+                        {{ item.processTime }}
+                      </div>
                     </div>
-                  </div>
 
-                  <div class="detail">
+                    <div class="detail">
-                    <div class="detail-field">处理部门：</div>
+                      <div class="detail-field">处理部门：</div>
-                    <div class="detail-value">{{ item.departmentName }}</div>
+                      <div class="detail-value">{{ item.departmentName }}</div>
-                  </div>
+                    </div>
 
-                  <div
+                    <div
-                    class="detail"
+                      class="detail"
-                    v-if="item.processName != '转项目' && item.publicReply"
+                      v-if="item.processName != '转项目' && item.publicReply"
-                  >
+                    >
-                    <div class="detail-field">说 明：</div>
+                      <div class="detail-field">说 明：</div>
-                    <div class="detail-value">
+                      <div class="detail-value">
-                      <fold-text :row="3">{{ item.publicReply }}</fold-text>
+                        <fold-text :row="3">{{ item.publicReply }}</fold-text>
+                      </div>
                     </div>
-                  </div>
 
-                  <div
+                    <div
-                    class="detail"
+                      class="detail"
-                    v-if="item.processName != '转项目' && item.internalRemark"
+                      v-if="item.processName != '转项目' && item.internalRemark"
-                  >
+                    >
-                    <div class="detail-field">内部备注：</div>
+                      <div class="detail-field">内部备注：</div>
-                    <div class="detail-value">
+                      <div class="detail-value">
-                      <fold-text :row="3">{{ item.internalRemark }}</fold-text>
+                        <fold-text :row="3">{{
+                          item.internalRemark
+                        }}</fold-text>
+                      </div>
                     </div>
-                  </div>
+                    <div class="detail">
-                  <div class="detail">
+                      <div class="attachement-list">
-                    <div class="attachement-list">
+                        <a
-                      <a
+                          :href="att.url"
-                        :href="att.url"
+                          target="_blank"
-                        target="_blank"
+                          :key="att.url"
-                        :key="att.url"
+                          v-for="att in item.internalFile"
-                        v-for="att in item.internalFile"
+                        >
-                      >
+                          <i class="el-icon-folder-opened"></i>
-                        <i class="el-icon-folder-opened"></i>
+                          {{ att.name }}
-                        {{ att.name }}
+                        </a>
-                      </a>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
+            <div v-else class="m-hint">
+              <img
+                src="@/assets/img/modules/visual/noData.png"
+                class="no-data-img"
+              />
+            </div>
           </div>
         </div>
       </cpt-card>
@@ -173,10 +208,115 @@
 
 <script>
 import cptCard from "@/views/modules/visual/cpts/card";
+import screenLoading from "@/views/modules/visual/cpts/loading";
 import { requestPost } from "@/js/dai/request";
 import cptTb from "@/views/modules/visual/cpts/tb";
+import analyse from "@/views/modules/visual/cpts/analyse";
+import foldText from "@/views/components/foldText";
 import dateFormat from "dai-js/tools/dateFormat";
 
+function iniData() {
+  return {
+    groupList: [
+      { label: "研判分析" },
+      { label: "查看回复" },
+      { label: "查看项目" },
+    ],
+    groupIndex: 0,
+    startGroupIndex: 0,
+
+    info: {
+      eventTime: "",
+      eventContent: "",
+      eventAddress: "",
+      gridName: "",
+      isClosed: true,
+      isResolve: true,
+      isRollback: true,
+      eventImgs: [],
+      eventPerson: [],
+      eventOrg: [],
+      eventPeopleName: "",
+      projectInfo: {
+        projectId: "",
+        operationName: "",
+        operationTime: "",
+        projectDeclare: "",
+      },
+    },
+
+    comment: {
+      loading: true,
+      colList: [
+        {
+          align: "center",
+          width: "20%",
+        },
+        {
+          align: "center",
+          width: "30%",
+        },
+        {
+          align: "left",
+          width: "50%",
+        },
+      ],
+      header: ["回复者", "回复时间", "回复内容"],
+      list: [],
+    },
+
+    projectProcess: [],
+
+    projectInfo: {
+      backGround: "",
+      departmentList: [
+        //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
+      ],
+      departmentNameList: [],
+      internalRemark: "",
+      isSend: false,
+      locateAddress: "",
+      locateDimension: "",
+      locateLongitude: "",
+      origin: "",
+      originId: "",
+      platformIds: [],
+      processable: false,
+      projectId: "",
+      projectStatus: "pending",
+      projectTitle: "",
+      publicReply: "",
+      returnable: false,
+    },
+
+    projectCate: [],
+    projectTag: [],
+
+    yanPan: {
+      loading: false,
+
+      icResiUserId: "",
+      houseId: "",
+      icUserName: "",
+      epmetUserIdList: [],
+      houseUserList: [
+        // {
+        //   icResiUserId: '',
+        //   icUserName: '',
+        // }
+      ],
+      categoryList: [],
+      projectData: [
+        // {
+        //   firstCategoryCode: '',
+        //   firstCategoryName: '',
+        //   projectList: [],
+        // }
+      ],
+    },
+  };
+}
+
 export default {
   name: "demandInfo",
   props: {
@@ -184,96 +324,34 @@ export default {
       type: String,
       default: "",
     },
+    epmetUserIdList: {
+      type: Array,
+      default: [],
+    },
+    icResiUserId: {
+      type: String,
+      default: "",
+    },
   },
 
   components: {
     cptCard,
     cptTb,
+    analyse,
+    screenLoading,
+    foldText,
   },
 
-  data() {
+  data: iniData,
-    return {
-      groupList: [
-        { label: "研判分析" },
-        { label: "查看回复" },
-        { label: "查看项目" },
-      ],
-      groupIndex: 0,
-      startGroupIndex: 0,
-
-      info: {
-        eventTime: "",
-        eventContent: "",
-        eventAddress: "",
-        gridName: "",
-        isClosed: true,
-        isResolve: true,
-        isRollback: true,
-        eventImgs: [],
-        eventPerson: [],
-        eventOrg: [],
-        eventPeopleName: "",
-        projectInfo: {
-          projectId: "",
-          operationName: "",
-          operationTime: "",
-          projectDeclare: "",
-        },
-      },
-
-      comment: {
-        loading: true,
-        colList: [
-          {
-            align: "center",
-            width: "20%",
-          },
-          {
-            align: "center",
-            width: "30%",
-          },
-          {
-            align: "left",
-            width: "50%",
-          },
-        ],
-        header: ["回复者", "回复时间", "回复内容"],
-        list: [],
-      },
-
-      projectProcess: [],
-
-      projectInfo: {
-        backGround: "",
-        departmentList: [
-          //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
-        ],
-        departmentNameList: [],
-        internalRemark: "",
-        isSend: false,
-        locateAddress: "",
-        locateDimension: "",
-        locateLongitude: "",
-        origin: "",
-        originId: "",
-        platformIds: [],
-        processable: false,
-        projectId: "",
-        projectStatus: "pending",
-        projectTitle: "",
-        publicReply: "",
-        returnable: false,
-      },
-
-      projectCate: [],
-      projectTag: [],
-    };
-  },
 
   computed: {},
 
   watch: {
     resiEventId() {
+      let data = iniData();
+      Object.keys(data).forEach((k) => {
+        this[k] = data[k];
+      });
       this.getApiData();
     },
   },
@@ -283,6 +361,10 @@ export default {
   },
 
   methods: {
+    watchImg(src) {
+      window.open(src);
+    },
+
     addStartGroupIndex() {
       const { startGroupIndex, groupList } = this;
       if (startGroupIndex < groupList.length - 9) {
@@ -309,6 +391,7 @@ export default {
       this.getProjectProcess();
       this.getProjectInfo();
       this.getProjectCate();
+      this.getYanPan();
     },
 
     //加载组织数据
@@ -358,7 +441,10 @@ export default {
 
       if (code === 0) {
         this.projectProcess = data.map((item) => {
-          item.processTime = dateFormat(new Date(item.processTime * 1000), "yyyy-MM-dd hh:mm");
+          item.processTime = dateFormat(
+            new Date(item.processTime * 1000),
+            "yyyy-MM-dd hh:mm"
+          );
           return item;
         });
       } else {
@@ -403,6 +489,53 @@ export default {
         this.$message.error(msg);
       }
     },
+
+    //加载组织数据
+    async getYanPan() {
+      const url = "/gov/project/resievent/research-analysis";
+
+      const { data, code, msg } = await requestPost(url, {
+        resiEventId: this.resiEventId,
+        epmetUserIdList: this.epmetUserIdList,
+        icResiUserId: this.icResiUserId,
+        projectId: this.info.projectId,
+      });
+
+      if (code === 0) {
+        data.categoryList = data.projectData.map((item) => {
+          return {
+            categoryCode: item.firstCategoryCode,
+            categoryName: item.firstCategoryName,
+            showItem: true,
+            projectList: item.projectList.map((subItem) => {
+              return {
+                title: subItem.projectTitle,
+                status: subItem.projectStatus,
+                statusName:
+                  subItem.projectStatus == "pending" ? "待处理" : "结案",
+                projectId: subItem.projectId,
+                resiEventId: subItem.resiEventId,
+              };
+            }),
+          };
+        });
+        this.yanPan = { ...this.yanPan, ...data };
+        this.yanPan.loading = true;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    toUserInfo(item) {
+      this.$router.push({
+        path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
+      });
+    },
+
+    toProjectInfo(item) {
+      console.log(item);
+      this.resiEventId = item.resiEventId;
+    },
   },
 };
 </script>

src/views/modules/visual/basicinfo/cpts/topic-info.vue

@@ -4,62 +4,36 @@
       <cpt-card>
         <div class="title">
           <img src="@/assets/img/shuju/title-tip.png" />
-          <span>更多信息</span>
+          <span>话题详情</span>
         </div>
 
         <div class="btn-close" @click="handleClose">
           <img src="@/assets/img/shuju/people/close.png" />
         </div>
 
-        <div
+        <div class="m-info">
-          :key="'fieldSubList' + index"
+          <div class="info-title">话题内容</div>
-          v-for="(fieldSubList, index) in fieldList"
+          <div class="info-content">{{ info.topicContent }}</div>
-        >
+          <div class="info-pics">
-          <div class="list">
+            <img
-            <div class="item" v-if="index == 0">
+              :src="src"
-              <span class="item-field">所属网格：</span>
+              :key="src"
-              <span>{{ gridName }}</span>
+              v-for="src in info.topicImgs"
-            </div>
+              @click="watchImg(src)"
-            <div class="item" v-if="index == 0">
+            />
-              <span class="item-field">所属小区：</span>
+          </div>
-              <span>{{ xiaoquName }}</span>
+          <div class="info-prop">
-            </div>
+            <span>发布时间：</span>
-            <div class="item" v-if="index == 0">
+            <span>{{ info.releaseTime }}</span>
-              <span class="item-field">所属楼宇：</span>
+          </div>
-              <span>{{ louName }}-{{ danyuanName }}</span>
+          <div class="info-prop">
-            </div>
+            <span>话题地址：</span>
-            <div class="item" v-if="index == 0">
+            <span>{{ info.releaseAddress }}</span>
-              <span class="item-field">所属家庭：</span>
+          </div>
-              <span>{{ homeName }}</span>
+          <div class="info-prop">
-            </div>
+            <span>所属网格：</span>
-            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+            <span>{{ info.gridName }}</span>
-              <span class="item-field">{{ field.label }}：</span>
-
-              <span
-                v-if="
-                  field.itemType == 'select' ||
-                  field.itemType == 'radio' ||
-                  field.itemType == 'checkbox' ||
-                  field.itemType == 'cascader'
-                "
-                >{{
-                  info[field.columnName] == null
-                    ? "--"
-                    : getOptionLabel(
-                        field.options,
-                        info[field.columnName],
-                        field.itemType
-                      )
-                }}</span
-              >
-
-              <span v-else>{{
-                info[field.columnName] == null ? "--" : info[field.columnName]
-              }}</span>
-            </div>
           </div>
-
-          <div class="line"></div>
         </div>
 
         <div class="tabs">
@@ -89,81 +63,201 @@
           </div>
         </div>
 
-        <div
+        <div class="m-case">
-          :key="'group' + index"
+          <div class="m-yanpan" v-if="groupIndex == 0">
-          v-show="groupIndex % groupList.length == index"
+            <div v-if="issueInfo.projectId">
-          v-for="(group, index) in groupList"
+              <analyse
-        >
+                v-if="yanPan.loading"
-          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+                singleTitle="楼院小组"
-            <div
+                :userList="yanPan.houseUserList"
-              class="list"
+                :userName="yanPan.icUserName"
-              :key="'ic_resi_demand' + infoIndex"
+                :singleList="yanPan.categoryList"
-              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+                @user="toUserInfo"
-            >
+                @project="toProjectInfo"
-              <div
+              />
-                class="item"
+              <screen-loading v-else>加载中</screen-loading>
-                :key="field.itemId"
+            </div>
-                v-for="field in group.itemList"
+            <div v-else class="m-hint">
-              >
+              <img
-                <span class="item-field">{{ field.label }}：</span>
+                src="@/assets/img/modules/visual/noData.png"
-                <span
+                class="no-data-img"
-                  v-if="
+              />
-                    field.itemType == 'select' ||
+            </div>
-                    field.itemType == 'radio' ||
+          </div>
-                    field.itemType == 'checkbox' ||
+          <div class="m-tb" v-if="groupIndex == 1">
-                    field.itemType == 'cascader'
+            <cpt-tb
-                  "
+              :col-list="comment.colList"
-                  >{{
+              :loading="comment.loading"
-                    infoItem[field.columnName] == null
+              :header="comment.header"
-                      ? "--"
+              :list="comment.list"
-                      : getOptionLabel(
+              @operate="checkTopicCommentImg"
-                          field.options,
+            ></cpt-tb>
-                          infoItem[field.columnName],
+          </div>
-                          field.itemType
+
-                        )
+          <div v-if="groupIndex == 2">
-                  }}</span
+            <div class="m-row" v-if="info.issueId">
-                >
+              <div class="m-info">
-
+                <div class="info-prop">
-                <span v-else>{{
+                  <span>议题标题：</span>
-                  infoItem[field.columnName] == null
+                  <span>{{ issueInfo.issueTitle }}</span>
-                    ? "--"
+                </div>
-                    : infoItem[field.columnName]
+                <div class="info-prop">
-                }}</span>
+                  <span>议题建议：</span>
+                  <span>{{ issueInfo.issueSuggestion }}</span>
+                </div>
+                <div class="info-prop">
+                  <span>所属网格：</span>
+                  <span>{{ issueInfo.belongsGridName || "--" }}</span>
+                </div>
+                <div class="info-prop">
+                  <span>议题发起人：</span>
+                  <span>{{ issueInfo.issueInitiator }}</span>
+                </div>
+                <div class="info-prop">
+                  <span>议题来源：</span>
+                  <span>{{ issueInfo.topicInfo.groupName }}</span>
+                </div>
+                <div class="info-prop">
+                  <span>转议题时间：</span>
+                  <span>{{ issueInfo.shiftIssueTime }}</span>
+                </div>
+              </div>
+
+              <div class="m-line">
+                <div class="stat">
+                  <div class="stat-item">
+                    <div>
+                      {{ issueTrend.realityVoteCount }}/{{
+                        issueTrend.shouldVoteCount
+                      }}
+                    </div>
+                    <div class="z-weak">已表决/应表决</div>
+                  </div>
+                  <div class="stat-item">
+                    <div>{{ issueTrend.supportAmount }}</div>
+                    <div class="z-weak">支持</div>
+                  </div>
+                  <div class="stat-item">
+                    <div>{{ issueTrend.oppositionAmount }}</div>
+                    <div class="z-weak">反对</div>
+                  </div>
+                </div>
+
+                <line-chart
+                  v-if="issueChartData.length > 0"
+                  :list="issueChartData"
+                />
               </div>
             </div>
+            <div v-else class="m-hint">
+              <img
+                src="@/assets/img/modules/visual/noData.png"
+                class="no-data-img"
+              />
+            </div>
           </div>
-          <div class="list" v-else>
+
-            <div
+          <div v-if="groupIndex == 3">
-              class="item"
+            <div class="m-row" v-if="issueInfo.projectId">
-              :key="field.itemId"
+              <div class="m-info">
-              v-for="field in group.itemList"
+                <div class="info-prop">
-            >
+                  <span>项目标题：</span>
-              <span class="item-field">{{ field.label }}：</span>
+                  <span>{{ projectInfo.projectTitle }}</span>
-              <span
+                </div>
-                v-if="
+                <div class="info-prop">
-                  field.itemType == 'select' ||
+                  <span>项目方案：</span>
-                  field.itemType == 'radio' ||
+                  <span>{{ projectInfo.projectTitle }}</span>
-                  field.itemType == 'checkbox' ||
+                </div>
-                  field.itemType == 'cascader'
+                <div class="info-prop">
-                "
+                  <span>内部备注：</span>
-                >{{
+                  <span>{{ projectInfo.internalRemark || "--" }}</span>
-                  !allInfo[group.tableName] ||
+                </div>
-                  allInfo[group.tableName][0][field.columnName] == null
+                <div class="info-prop">
-                    ? "--"
+                  <span>当前处理部门：</span>
-                    : getOptionLabel(
+                  <span>{{ projectInfo.departmentNameList.join("、") }}</span>
-                        field.options,
+                </div>
-                        allInfo[group.tableName][0][field.columnName],
+                <div class="info-prop" v-if="projectCate.length > 0">
-                        field.itemType
+                  <span>分类：</span>
-                      )
+                  <fold-text :row="3">
-                }}</span
+                    <div :key="item.name" v-for="item in projectCate">
-              >
+                      {{ item.name }}
-
+                    </div>
-              <span v-else>{{
+                  </fold-text>
-                !allInfo[group.tableName] ||
+                </div>
-                allInfo[group.tableName][0][field.columnName] == null
+                <div class="info-prop" v-if="projectTag.length > 0">
-                  ? "--"
+                  <span>标签：</span>
-                  : allInfo[group.tableName][0][field.columnName]
+                  <fold-text :row="3">
-              }}</span>
+                    <div :key="item.name" v-for="item in projectTag">
+                      {{ item.name }}
+                    </div>
+                  </fold-text>
+                </div>
+              </div>
+
+              <div class="m-process" v-if="projectProcess.length > 0">
+                <div class="process-title">处理进展</div>
+                <div class="list">
+                  <div
+                    class="item"
+                    :class="index === 0 ? 'z-on' : ''"
+                    :key="item.processId"
+                    v-for="(item, index) in projectProcess"
+                  >
+                    <div class="item-row">
+                      <div class="name">{{ item.processName }}</div>
+                      <div class="date">
+                        {{ item.processTime }}
+                      </div>
+                    </div>
+
+                    <div class="detail">
+                      <div class="detail-field">处理部门：</div>
+                      <div class="detail-value">{{ item.departmentName }}</div>
+                    </div>
+
+                    <div
+                      class="detail"
+                      v-if="item.processName != '转项目' && item.publicReply"
+                    >
+                      <div class="detail-field">说 明：</div>
+                      <div class="detail-value">
+                        <fold-text :row="3">{{ item.publicReply }}</fold-text>
+                      </div>
+                    </div>
+
+                    <div
+                      class="detail"
+                      v-if="item.processName != '转项目' && item.internalRemark"
+                    >
+                      <div class="detail-field">内部备注：</div>
+                      <div class="detail-value">
+                        <fold-text :row="3">{{
+                          item.internalRemark
+                        }}</fold-text>
+                      </div>
+                    </div>
+                    <div class="detail">
+                      <div class="attachement-list">
+                        <a
+                          :href="att.url"
+                          target="_blank"
+                          :key="att.url"
+                          v-for="att in item.internalFile"
+                        >
+                          <i class="el-icon-folder-opened"></i>
+                          {{ att.name }}
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="m-hint">
+              <img
+                src="@/assets/img/modules/visual/noData.png"
+                class="no-data-img"
+              />
             </div>
           </div>
         </div>
@@ -174,16 +268,153 @@
 
 <script>
 import cptCard from "@/views/modules/visual/cpts/card";
+import screenLoading from "@/views/modules/visual/cpts/loading";
 import { requestPost } from "@/js/dai/request";
+import cptTb from "@/views/modules/visual/cpts/tb";
+import lineChart from "@/views/modules/visual/cpts/line-chart";
+import analyse from "@/views/modules/visual/cpts/analyse";
+import foldText from "@/views/components/foldText";
+import dateFormat from "dai-js/tools/dateFormat";
+
+function iniData() {
+  return {
+    groupList: [
+      { label: "研判分析" },
+      { label: "话题评论" },
+      { label: "查看议题" },
+      { label: "查看项目" },
+    ],
+    groupIndex: 0,
+    startGroupIndex: 0,
+
+    info: {
+      badgeList: [],
+      closeDetail: {
+        closeUserName: "",
+        closeDateTime: "-1",
+        closeReason: "",
+        closeUserHeadPhoto: "",
+      },
+      dimension: "",
+      hiddenDetail: null,
+      issueId: "",
+      longitude: "",
+      releaseAddress: "",
+      releaseTime: "",
+      releaseUserHeadPhoto: "",
+      releaseUserName: "",
+      shiftIssueFlag: true,
+      topicContent: "",
+      topicId: "",
+      topicImgs: [],
+      topicStatus: "discussing",
+    },
+
+    comment: {
+      loading: true,
+      colList: [
+        {
+          align: "center",
+          width: "20%",
+        },
+        {
+          align: "center",
+          width: "20%",
+        },
+        {
+          align: "left",
+          width: "50%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+      ],
+      header: ["评论者", "评论时间", "评论内容", "评论图片"],
+      list: [],
+    },
+
+    issueInfo: {
+      attitude: "",
+      belongsGridName: "",
+      issueIdea: "",
+      issueInitiator: "",
+      issueStatus: "",
+      issueSuggestion: "",
+      issueTitle: "",
+      joinVote: true,
+      projectId: "",
+      projectStatus: false,
+      publishIdeaFlag: false,
+    },
+
+    issueTrend: {},
+    issueChartData: [],
+
+    projectProcess: [],
+
+    projectInfo: {
+      backGround: "",
+      departmentList: [
+        //   { departmentName: "南宁社区-南宁第二网格", staffList: ["周相成"] },
+      ],
+      departmentNameList: [],
+      internalRemark: "",
+      isSend: false,
+      locateAddress: "",
+      locateDimension: "",
+      locateLongitude: "",
+      origin: "",
+      originId: "",
+      platformIds: [],
+      processable: false,
+      projectId: "",
+      projectStatus: "pending",
+      projectTitle: "",
+      publicReply: "",
+      returnable: false,
+    },
+
+    projectCate: [],
+    projectTag: [],
+
+    yanPan: {
+      loading: false,
+
+      icResiUserId: "",
+      houseId: "",
+      icUserName: "",
+      epmetUserIdList: [],
+      houseUserList: [
+        // {
+        //   icResiUserId: '',
+        //   icUserName: '',
+        // }
+      ],
+      categoryList: [],
+      projectData: [
+        // {
+        //   firstCategoryCode: '',
+        //   firstCategoryName: '',
+        //   projectList: [],
+        // }
+      ],
+    },
+  };
+}
 
 export default {
   name: "demandInfo",
   props: {
-    userId: {
+    topicId: {
       type: String,
       default: "",
     },
-    gridName: {
+    epmetUserIdList: {
+      type: Array,
+      default: [],
+    },
+    icResiUserId: {
       type: String,
       default: "",
     },
@@ -191,94 +422,23 @@ export default {
 
   components: {
     cptCard,
+    cptTb,
+    analyse,
+    screenLoading,
+    lineChart,
+    foldText,
   },
 
-  data() {
+  data: iniData,
-    return {
-      fieldList: [],
-      groupList: [],
-      groupIndex: 0,
-      startGroupIndex: 0,
-      info: {},
-      allInfo: {},
-
-      xiaoquList: [],
-      louList: [],
-      danyuanList: [],
-      homeList: [],
-    };
-  },
 
-  computed: {
+  computed: {},
-    xiaoquName() {
-      const {
-        xiaoquList,
-        info: { VILLAGE_ID },
-      } = this;
-      if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
-        let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
-        if (item) {
-          return item.label;
-        }
-      }
-      return "";
-    },
-    louName() {
-      const {
-        louList,
-        info: { BUILD_ID },
-      } = this;
-      if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
-        let item = louList.find((item) => item.value == BUILD_ID);
-        if (item) {
-          return item.label;
-        }
-      }
-      return "";
-    },
-    danyuanName() {
-      const {
-        danyuanList,
-        info: { UNIT_ID },
-      } = this;
-      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
-        let item = danyuanList.find((item) => item.value == UNIT_ID);
-        if (item) {
-          return item.label;
-        }
-      }
-      return "";
-    },
-    danyuanName() {
-      const {
-        danyuanList,
-        info: { UNIT_ID },
-      } = this;
-      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
-        let item = danyuanList.find((item) => item.value == UNIT_ID);
-        if (item) {
-          return item.label;
-        }
-      }
-      return "";
-    },
-    homeName() {
-      const {
-        homeList,
-        info: { HOME_ID },
-      } = this;
-      if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
-        let item = homeList.find((item) => item.value == HOME_ID);
-        if (item) {
-          return item.label;
-        }
-      }
-      return "";
-    },
-  },
 
   watch: {
-    userId() {
+    topicId() {
+      let data = iniData();
+      Object.keys(data).forEach((k) => {
+        this[k] = data[k];
+      });
       this.getApiData();
     },
   },
@@ -288,6 +448,10 @@ export default {
   },
 
   methods: {
+    watchImg(src) {
+      window.open(src);
+    },
+
     addStartGroupIndex() {
       const { startGroupIndex, groupList } = this;
       if (startGroupIndex < groupList.length - 9) {
@@ -309,195 +473,234 @@ export default {
     },
 
     async getApiData() {
-      await this.getField();
+      this.getComment();
       await this.getInfo();
-      this.getXiaoquList();
+      await this.getIssueInfo();
-      this.getLouList();
+      this.getIssueTrend();
-      this.getDanyuanList();
+      this.getProjectProcess();
-      this.getHomeList();
+      this.getProjectInfo();
+      this.getProjectCate();
+      this.getYanPan();
     },
 
-    getOptionLabel(options, value, type = "") {
+    //加载组织数据
-      if (Array.isArray(options)) {
+    async getInfo() {
-        let valueArr = value.split(",");
+      const url = "/resi/group/topic/gettopicdetail";
-        if (type == "cascader") {
+
-          if (valueArr.length > 0) {
+      const { data, code, msg } = await requestPost(url, {
-            let level1 = options.find((item) => item.value == valueArr[0]);
+        topicId: this.topicId,
-            if (level1) {
+      });
-              if (valueArr.length > 1 && level1.children) {
+
-                let level2 = level1.children.find(
+      if (code === 0) {
-                  (item) => item.value == valueArr[1]
+        this.info = data;
-                );
+      } else {
-                if (level2) {
+        this.$message.error(msg);
-                  return level1.label + "-" + level2.label;
-                }
-              }
-              return level1.label;
-            }
-          }
-        } else {
-          return valueArr
-            .map((val) => {
-              let item = options.find((item) => item.value == val);
-              if (item && item.label) {
-                return item.label;
-              }
-              return "--";
-            })
-            .join("、");
-        }
       }
-      return "--";
     },
 
     //加载组织数据
-    async getField() {
+    async getComment() {
-      const url = "/oper/customize/icform/getcustomerform";
+      const url = "/resi/group/comment/getcommentlistoftopic";
 
       const { data, code, msg } = await requestPost(url, {
-        dynamic: true,
+        topicId: this.topicId,
-        formCode: "resi_base_info",
+        pageNo: 1,
+        pageSize: 100,
       });
+      this.comment.loading = false;
 
       if (code === 0) {
-        this.groupList = data.groupList;
+        this.comment.list = data.map((item) => {
-        this.fieldList = (function (arr) {
+          return [
-          let col = [];
+            item.commentUserName,
-          let ele = [];
+            item.commentTime,
-          for (let i = 0; i < arr.length; i++) {
+            item.commentContent,
-            let item = arr[i];
+            item.imageList.length > 0
-            if (item.itemType == "divider" || i == arr.length - 1) {
+              ? { type: "operate", list: ["查看"] }
-              col.push([...ele]);
+              : "",
-              ele = [];
+          ];
-            } else {
-              ele.push(item);
-            }
-          }
-          return col;
-        })(data.itemList);
-
-        this.fieldList.forEach((subList, index) => {
-          subList.forEach(async (item, subIndex) => {
-            if (item.optionSourceType == "remote" && item.optionSourceValue) {
-              this.fieldList[index][subIndex].options = await this.getOptions(
-                item.optionSourceValue
-              );
-            }
-          });
         });
+        this.comment.srcList = data;
       } else {
         this.$message.error(msg);
       }
     },
 
+    checkTopicCommentImg(index) {
+      const {
+        comment: { srcList },
+      } = this;
+      if (srcList[index] && srcList[index].imageList) {
+        this.watchImg(srcList[index].imageList[0].url);
+      }
+    },
+
     //加载组织数据
-    async getInfo() {
+    async getIssueInfo() {
-      const url = "/epmetuser/icresiuser/detail";
+      const {
+        info: { issueId },
+      } = this;
+      if (!issueId) return;
+      const url = "/resi/hall/issue/detail";
 
       const { data, code, msg } = await requestPost(url, {
-        icResiUserId: this.userId,
+        issueId,
-        formCode: "resi_base_info",
       });
 
       if (code === 0) {
-        this.info = data.ic_resi_user[0];
+        this.issueInfo = data;
-        this.allInfo = data;
-
-        this.fieldList.forEach((subList, index) => {
-          subList.forEach((item, subIndex) => {
-            if (
-              item.itemType == "radio" &&
-              item.childGroup &&
-              this.allInfo[item.tableName] &&
-              this.allInfo[item.tableName][0][item.columnName] == "1"
-            ) {
-              this.groupList = [...this.groupList, item.childGroup];
-            }
-          });
-        });
-        console.log("1111111111111111111111111", this.groupList);
-
-        this.groupList.forEach((subList, index) => {
-          subList.itemList.forEach(async (item, subIndex) => {
-            if (item.optionSourceType == "remote" && item.optionSourceValue) {
-              this.groupList[index].itemList[subIndex].options =
-                await this.getOptions(item.optionSourceValue);
-            }
-          });
-        });
       } else {
         this.$message.error(msg);
       }
     },
 
     //加载组织数据
-    async getOptions(url) {
+    async getIssueTrend() {
-      if (!url) return [];
+      const {
+        info: { issueId },
+      } = this;
+      if (!issueId) return;
+      const url = "/resi/hall/issue/votingtrend";
 
-      const { data, code, msg } = await requestPost(url, {});
+      const { data, code, msg } = await requestPost(url, {
+        issueId,
+      });
 
       if (code === 0) {
-        return data;
+        this.issueTrend = data;
+        let chartData = [];
+        data.polyLine.forEach((item) => {
+          let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd");
+          console.log("date:" + date);
+          chartData.push(
+            {
+              date,
+              value: item.supportIncrement,
+              type: "支持",
+            },
+            {
+              date,
+              value: item.oppositionIncrement,
+              type: "反对",
+            }
+          );
+        });
+        this.issueChartData = chartData;
       } else {
-        return [];
+        this.$message.error(msg);
       }
     },
 
-    async getXiaoquList() {
+    //加载组织数据
-      const url = "/gov/org/icneighborhood/neighborhoodoption";
+    async getProjectProcess() {
+      const { issueInfo } = this;
+      if (!issueInfo || !issueInfo.projectId) return;
+      const url = "/gov/project/trace/processlist-v2";
 
       const { data, code, msg } = await requestPost(url, {
-        agencyId: this.info.AGENCY_ID,
+        projectId: issueInfo.projectId,
-        gridId: this.info.GRID_ID,
       });
 
       if (code === 0) {
-        this.xiaoquList = data;
+        this.projectProcess = data.map((item) => {
+          item.processTime = dateFormat(
+            new Date(item.processTime * 1000),
+            "yyyy-MM-dd hh:mm"
+          );
+          return item;
+        });
       } else {
         this.$message.error(msg);
       }
     },
-    async getLouList() {
+
-      const url = "/gov/org/icbuilding/buildingoption";
+    //加载组织数据
+    async getProjectInfo() {
+      const { issueInfo } = this;
+      if (!issueInfo || !issueInfo.projectId) return;
+      const url = "/gov/project/trace/projectdetail";
 
       const { data, code, msg } = await requestPost(url, {
-        neighborHoodId: this.info.VILLAGE_ID,
+        projectId: issueInfo.projectId,
       });
 
       if (code === 0) {
-        this.louList = data;
+        this.projectInfo = data;
       } else {
         this.$message.error(msg);
       }
     },
-    async getDanyuanList() {
+
-      const url = "/gov/org/icbuildingunit/unitoption";
+    async getProjectCate() {
+      const { issueInfo } = this;
+      if (!issueInfo || !issueInfo.projectId) return;
+      const url = "/gov/project/projectcategory/categorytaglist";
 
       const { data, code, msg } = await requestPost(url, {
-        buildingId: this.info.BUILD_ID,
+        projectId: issueInfo.projectId,
       });
 
       if (code === 0) {
-        this.danyuanList = data;
+        this.projectCate = data.categoryList;
+        this.projectTag = data.tagList;
       } else {
         this.$message.error(msg);
       }
     },
-    async getHomeList() {
+
-      const url = "/gov/org/ichouse/houseoption";
+    //加载组织数据
+    async getYanPan() {
+      const url = "/gov/project/project/topic-research-analysis";
+
+      if (!this.issueInfo.projectId) return;
 
       const { data, code, msg } = await requestPost(url, {
-        unitId: this.info.UNIT_ID,
+        epmetUserIdList: this.epmetUserIdList,
+        icResiUserId: this.icResiUserId,
+        projectId: this.issueInfo.projectId,
       });
 
       if (code === 0) {
-        this.homeList = data;
+        data.categoryList = data.projectData.map((item) => {
+          return {
+            categoryCode: item.firstCategoryCode,
+            categoryName: item.firstCategoryName,
+            showItem: true,
+            projectList: item.projectList.map((subItem) => {
+              return {
+                title: subItem.projectTitle,
+                status: subItem.projectStatus,
+                statusName:
+                  subItem.projectStatus == "pending" ? "待处理" : "结案",
+                projectId: subItem.projectId,
+                topicId: subItem.topicId,
+              };
+            }),
+          };
+        });
+        this.yanPan = { ...this.yanPan, ...data };
+        this.yanPan.loading = true;
       } else {
         this.$message.error(msg);
       }
     },
+
+    toUserInfo(item) {
+      this.$router.push({
+        path: `/main-shuju/visual-basicinfo-people/${item.icResiUserId}`,
+      });
+    },
+
+    toProjectInfo(item) {
+      console.log(item);
+      this.topicId = item.topicId;
+    },
   },
 };
 </script>
 
-<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/incident-info.scss"
+  scoped
+></style>

src/views/modules/visual/basicinfo/people.vue

@@ -448,17 +448,18 @@
     />
 
     <incident-info
-      v-show="incident.showedInfo"
+      v-if="incident.list.length > 0 && incident.showedInfo"
-      v-if="incident.list.length > 0"
       :resiEventId="incident.list[incident.currentIndex].resiEventId"
+      :epmetUserIdList="info.epmetUserIdList"
+      :icResiUserId="userId"
       @close="incident.showedInfo = false"
     />
 
     <topic-info
-      v-show="topic.showedInfo"
+      v-if="topic.list.length > 0 && topic.showedInfo"
-      v-if="userId"
+      :topicId="topic.list[topic.currentIndex].topicId"
-      :userId="userId"
+      :epmetUserIdList="info.epmetUserIdList"
-      :gridName="info.gridName"
+      :icResiUserId="userId"
       @close="topic.showedInfo = false"
     />
   </div>

src/views/modules/visual/communityGovern/cpt/issue-info.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>议题详情</span>
+        </div>
+
+        <div class="btn-close"
+             @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+        <div class="m-content">
+          <div class="m-info">
+
+            <div class="info-prop">
+              <span>议题标题：</span>
+              <span>{{ info.issueTitle }}</span>
+            </div>
+            <div class="info-prop">
+              <span>议题建议：</span>
+              <span>{{ info.issueSuggestion }}</span>
+            </div>
+
+            <div class="info-prop">
+              <span>话题内容：</span>
+              <div>{{ info.topicInfo.topicContent }}</div>
+              <div v-if="info.topicInfo.topicImgs&&info.topicInfo.topicImgs.length>0"
+                   class="info-pics">
+                <img :src="src"
+                     :key="src"
+                     v-for="src in info.topicInfo.topicImgs" />
+              </div>
+            </div>
+            <div class="info-prop">
+              <span>转议题时间：</span>
+              <span>{{ info.shiftIssueTime}}</span>
+            </div>
+            <div class="info-prop">
+              <span>所属网格：</span>
+              <span>{{ info.belongsGridName}}</span>
+            </div>
+            <div class="info-prop">
+              <span>话题发表人：</span>
+              <span>{{ info.topicInfo.publishedUser}}</span>
+            </div>
+            <div class="info-prop">
+              <span>议题发起人：</span>
+              <span>{{ info.issueInitiator}}</span>
+            </div>
+            <div class="info-prop">
+              <span>话题来源：</span>
+              <span>{{ info.topicInfo.groupName}}</span>
+            </div>
+            <div class="info-prop">
+              <span>话题发表时间：</span>
+              <span>{{ info.topicInfo.publishedTimeShow}}</span>
+            </div>
+          </div>
+          <div class="m-line">
+            <div class="stat">
+              <div class="stat-item">
+                <div>
+                  {{ issueTrend.realityVoteCount }}/{{
+                        issueTrend.shouldVoteCount
+                      }}
+                </div>
+                <div class="z-weak">已表决/应表决</div>
+              </div>
+              <div class="stat-item">
+                <div>{{ issueTrend.supportAmount }}</div>
+                <div class="z-weak">支持</div>
+              </div>
+              <div class="stat-item">
+                <div>{{ issueTrend.oppositionAmount }}</div>
+                <div class="z-weak">反对</div>
+              </div>
+            </div>
+
+            <line-chart :list="issueChartData" />
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import screenLoading from "@/views/modules/visual/cpts/loading";
+import { requestPost } from "@/js/dai/request";
+import lineChart from "@/views/modules/visual/cpts/line-chart";
+import dateFormat from "dai-js/tools/dateFormat";
+
+export default {
+  name: "demandInfo",
+  props: {
+    issueId: {
+      type: String,
+      default: "",
+    },
+
+  },
+
+  components: {
+    cptCard,
+    lineChart,
+    screenLoading,
+  },
+
+  data () {
+    return {
+      info: {
+        attitude: "",
+        belongsGridName: "",
+        issueIdea: "",
+        issueInitiator: "",
+        issueStatus: "",
+        issueSuggestion: "",
+        issueTitle: "",
+        joinVote: false,
+        projectId: "",
+        projectStatus: true,
+        publishIdeaFlag: false,
+        shiftIssueTime: "",
+        topicInfo: {
+          groupId: "",
+          groupName: "",
+          groupType: "",
+          publishedTime: "",
+          publishedUser: "",
+          topicContent: "",
+          topicId: "",
+          topicImgs: null,
+        },
+      },
+      issueTrend: {},
+      issueChartData: [],
+
+    };
+  },
+
+  computed: {},
+
+  watch: {
+    issueId () {
+      this.getApiData();
+    },
+  },
+
+  mounted () {
+    this.getApiData();
+  },
+
+  methods: {
+
+    handleClose () {
+      this.$emit("close");
+    },
+
+    async getApiData () {
+
+      await this.getInfo();
+      await this.getIssueTrend()
+    },
+
+    //加载组织数据
+    async getInfo () {
+      const url = "/resi/hall/issue/detail";
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
+      let params = {
+        issueId: this.issueId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.info = data
+
+        this.info.topicInfo.publishedTimeShow = dateFormat(new Date(this.info.topicInfo.publishedTime * 1000), "yyyy-MM-dd")
+
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getIssueTrend () {
+      const url = "/resi/hall/issue/votingtrend";
+
+      const { data, code, msg } = await requestPost(url, {
+        issueId: this.issueId,
+      });
+
+      if (code === 0) {
+        this.issueTrend = data;
+        let chartData = [];
+        data.polyLine.forEach((item) => {
+          let date = dateFormat(new Date(item.voteDate * 1000), "yyyy-MM-dd");
+          console.log("date:" + date);
+          chartData.push(
+            {
+              date,
+              value: item.supportIncrement,
+              type: "支持",
+            },
+            {
+              date,
+              value: item.oppositionIncrement,
+              type: "反对",
+            }
+          );
+        });
+        this.issueChartData = chartData;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/issue-info.scss"
+  scoped
+></style>

src/views/modules/visual/communityGovern/distributionAnalyze.vue

@@ -15,8 +15,8 @@
                        :key="iscascaderShow"
                        :options="casOptions"
                        :props="optionProps"
-                       @change="handleChangeAgency"
+                       :show-all-levels="false"
-                       clearable></el-cascader>
+                       @change="handleChangeAgency"></el-cascader>
         </div>
         <div class="second-select">
           <el-date-picker v-model="timeRange"
@@ -39,6 +39,17 @@
         <screen-echarts-frame class="echart-line"
                               @myChartMethod="lineInitOk"
                               ref="lineChart"></screen-echarts-frame>
+        <!-- <div class="table-status"
+             v-if="loading">
+          <screen-loading>加载中</screen-loading>
+        </div>
+        <div class="table-status"
+             v-if="lineList.length == 0 && !loading">
+          <div class="no-data">
+            <img src="../../../../assets/img/modules/visual/noData.png"
+                 class="no-data-img" />
+          </div>
+        </div> -->
 
       </div>
       <div class="g-r">
@@ -73,7 +84,8 @@ import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts
 import screenMap from "@/views/modules/visual/components/screen-map";
 import { lineOption } from './distributionLineOption.js'
 import * as echarts from 'echarts'
-
+import nextTick from 'dai-js/tools/nextTick'
+import ScreenLoading from "@/views/modules/visual/components/screen-loading";
 
 export default {
   name: "HomeMap",
@@ -104,57 +116,57 @@ export default {
       legend: [],
       lineData: [820, 932, 901, 934, 1290, 1330, 1320],
       lineList: [
-        {
+        //   {
-          time: '4:00',
+        //     time: '4:00',
-          categoryList: [
+        //     categoryList: [
-            {
+        //       {
-              categoryCode: '001',
+        //         categoryCode: '001',
-              count: 100,
+        //         count: 100,
-              color: '#1B51FF',
+        //         color: '#1B51FF',
-              name: '分类1'
+        //         name: '分类1'
-            },
+        //       },
-            {
+        //       {
-              categoryCode: '002',
+        //         categoryCode: '002',
-              count: 200,
+        //         count: 200,
-              color: '#00E5ED',
+        //         color: '#00E5ED',
-              name: '分类2'
+        //         name: '分类2'
-            }
+        //       }
-          ]
+        //     ]
-        },
+        //   },
-        {
+        //   {
-          time: '5:00',
+        //     time: '5:00',
-          categoryList: [
+        //     categoryList: [
-            {
+        //       {
-              categoryCode: '001',
+        //         categoryCode: '001',
-              count: 20,
+        //         count: 20,
-              color: '#1B51FF',
+        //         color: '#1B51FF',
-              name: '分类1'
+        //         name: '分类1'
-            },
+        //       },
-            {
+        //       {
-              categoryCode: '002',
+        //         categoryCode: '002',
-              count: 400,
+        //         count: 400,
-              color: '#00E5ED',
+        //         color: '#00E5ED',
-              name: '分类2'
+        //         name: '分类2'
-            }
+        //       }
-          ]
+        //     ]
-        },
+        //   },
-        {
+        //   {
-          time: '6:00',
+        //     time: '6:00',
-          categoryList: [
+        //     categoryList: [
-            {
+        //       {
-              categoryCode: '001',
+        //         categoryCode: '001',
-              count: 50,
+        //         count: 50,
-              color: '#1B51FF',
+        //         color: '#1B51FF',
-              name: '分类1'
+        //         name: '分类1'
-            },
+        //       },
-            {
+        //       {
-              categoryCode: '002',
+        //         categoryCode: '002',
-              count: 10,
+        //         count: 10,
-              color: '#00E5ED',
+        //         color: '#00E5ED',
-              name: '分类2'
+        //         name: '分类2'
-            }
+        //       }
-          ]
+        //     ]
-        }
+        //   }
       ],
 
       timeRange: [],
@@ -194,8 +206,10 @@ export default {
     this.userId = this.uid;
     this.initData()
     await this.getAgencylist()//获取组织级别
+    await nextTick(500)
     await this.loadOrgData()
-    this.getApiData();
+    await this.getApiData();
+
   },
 
   methods: {
@@ -241,31 +255,46 @@ export default {
       await this.loadMapData();
     },
 
-    async getAgencylist () {
+    // 获取当前登录人员信息及组织信息
-      const url = '/gov/org/customeragency/agencylist'
+    getAgencylist () {
-      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
+      const url = '/gov/org/customeragency/staffinagencylist'
+      let params = {}
+      window.app.ajax.post(
+        url,
+        params,
+        (data, rspMsg) => {
+          this.agencyInfo = data.agencyList
+          this.orgId = this.agencyInfo.agencyId
+          if (!this.agencyInfo.latitude) {
+            this.agencyInfo.latitude = 36.072227
+          }
+          if (!this.agencyInfo.longitude) {
+            this.agencyInfo.longitude = 120.389455
+          }
+          if (!this.agencyInfo.level) {
+            this.agencyInfo.level = 'street'
+          }
 
-      const params = {
+          //组织级联数据
-        // customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
+          ++this.iscascaderShow
-        customerId: '0c41b272ee9ee95ac6f184ad548a30eb'
+          this.casOptions = []
-      }
+          this.agencyIdArray.length = []
-      const { data, code, msg } = await requestPost(url, params)
-      if (code === 0) {
-        ++this.iscascaderShow
-        this.casOptions = []
-        this.agencyIdArray.length = []
 
-        if (data) {
+          if (data.subAgencyList) {
-          this.casOptions.push(data)
+            data.agencyList.subAgencyList = data.subAgencyList
+            this.casOptions.push(data.agencyList)
+            this.agencyIdArray.push(this.orgId)
+          }
+
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
         }
+      )
 
-      } else {
-        this.$message.error(msg)
-      }
     },
 
     handleChangeDate (value) {
-
       this.dateId = value
       this.getApiData()
     },
@@ -283,16 +312,16 @@ export default {
 
       if (code === 0) {
 
-        this.agencyInfo = data
+        // this.agencyInfo = data
-        if (!data.latitude) {
+        // if (!data.latitude) {
-          this.agencyInfo.latitude = 36.072227
+        //   this.agencyInfo.latitude = 36.072227
-        }
+        // }
-        if (!data.longitude) {
+        // if (!data.longitude) {
-          this.agencyInfo.longitude = 120.389455
+        //   this.agencyInfo.longitude = 120.389455
-        }
+        // }
-        if (!data.level) {
+        // if (!data.level) {
-          this.agencyInfo.level = 'street'
+        //   this.agencyInfo.level = 'street'
-        }
+        // }
         this.subAgencyArray = []
         if (data.children && data.children.length > 0) {
           this.subAgencyArray = data.children
@@ -307,12 +336,10 @@ export default {
     },
 
     async loadMapData () {
-      this.$refs.lineChart.clear()
-
       const _that = this
       // this.$refs.lineChart.showLoading()
-      //  const url ="/gov/project/project/projectdistributionanalysisright";
+      const url = "/gov/project/project/projectdistributionanalysisright";
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisright";
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisright";
       let params = {
         orgId: this.orgId,
         startDate: this.timeRange.length > 0 && this.timeRange[0] || '',
@@ -349,7 +376,7 @@ export default {
           )
         }
         if (data.list && data.list.length > 0) {
-          // this.mapList = data.list
+          this.mapList = data.list
 
 
         } else {
@@ -357,7 +384,7 @@ export default {
         }
 
         this.mapList.forEach(item => {
-          // debugger
+
           for (let i = 0; i < this.subAgencyArray.length; i++) {
             let agencyItem = this.subAgencyArray[i]
             if (item.orgId === agencyItem.id) {
@@ -409,10 +436,7 @@ export default {
       }
     },
 
-
     lineInitOk (dom) {
-
-
       this.lineInitState = true
 
     },
@@ -428,11 +452,10 @@ export default {
     // 获取折线图
     async getLineChart () {
       this.$refs.lineChart.clear()
-
       const _that = this
-      // this.$refs.lineChart.showLoading()
+      this.$refs.lineChart.showLoading()
-      //  const url ="/gov/project/project/projectdistributionanalysisleft";
+      const url = "/gov/project/project/projectdistributionanalysisleft";
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisleft";
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/projectdistributionanalysisleft";
       let params = {
         orgId: this.orgId,
         startDate: this.timeRange.length > 0 && this.timeRange[0] || '',
@@ -440,24 +463,27 @@ export default {
       };
 
       const { data, code, msg } = await requestPost(url, params);
-
+      this.$refs.lineChart.hideLoading()
       if (code === 0) {
         // 获取pieChart配置
         this.lineOption = lineOption()
 
         if (data && data.length > 0) {
-
+          this.lineList = data
           this.loadCategoryData()
 
-        } else {
 
+
+          this.$refs.lineChart.setOption(this.lineOption, true)
+          this.$refs.lineChart.setOption({
+            xAxis: { data: this.xaxis },
+            legend: { data: this.legend },
+            series: this.series
+          }, true)
+        } else {
+          this.lineList = []
         }
-        this.$refs.lineChart.setOption(this.lineOption, true)
+
-        this.$refs.lineChart.setOption({
-          xAxis: { data: this.xaxis },
-          legend: { data: this.legend },
-          series: this.series
-        }, true)
 
 
       } else {
@@ -548,7 +574,8 @@ export default {
     cptCard,
     cptTb,
     screenEchartsFrame,
-    screenMap
+    screenMap,
+    ScreenLoading
   },
 
   watch: {

src/views/modules/visual/communityGovern/processAnalyze.vue

@@ -12,17 +12,17 @@
                        :key="iscascaderShow"
                        :options="casOptions"
                        :props="optionProps"
-                       @change="handleChangeAgency"
+                       :show-all-levels="false"
-                       clearable></el-cascader>
+                       @change="handleChangeAgency"></el-cascader>
         </div>
         <div class="second-select">
-          <el-date-picker v-model="dateId"
+          <el-date-picker v-model="dateIdShow"
                           type="date"
                           :clearable="false"
                           @change="handleChangeDate"
                           prefix-icon="el-icon-caret-bottom"
                           placeholder="选择日期"
-                          value-format="yyyyMMdd">
+                          value-format="yyyy-MM-dd">
           </el-date-picker>
         </div>
       </div>
@@ -41,7 +41,8 @@
               <span class="c_today">{{monthIncr}}</span>
             </div>
           </div>
-          <div class="g-pie">
+          <div v-if="!pieNoData && !dataLoading"
+               class="g-pie">
             <screen-echarts-frame class="echart-wr"
                                   @myChartMethod="pieInitOk"
                                   ref="pieChart"></screen-echarts-frame>
@@ -60,12 +61,26 @@
             </div>
 
           </div>
+          <screen-nodata class="nodata"
+                         v-if="pieNoData&& !dataLoading"></screen-nodata>
+          <div class="table-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
+
         </div>
         <div class="l_bottom">
           <div class="bottom_label">近12月新增项目数</div>
-          <screen-echarts-frame class="echart-line"
+          <screen-echarts-frame v-if="!lineNoData&& !dataLoading"
+                                class="echart-line"
                                 @myChartMethod="lineInitOk"
                                 ref="lineChart"></screen-echarts-frame>
+          <screen-nodata class="nodata"
+                         v-if="lineNoData&& !dataLoading"></screen-nodata>
+          <div class="table-status"
+               v-if="dataLoading">
+            <screen-loading>加载中</screen-loading>
+          </div>
         </div>
       </div>
       <div class="g-r">
@@ -105,18 +120,22 @@ import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
 import screenMap from "@/views/modules/visual/components/screen-map";
+import ScreenLoading from "@/views/modules/visual/components/screen-loading";
+import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
 
 import { pieOption } from './processPieOption.js'
 import { lineOption } from './processLineOption.js'
+import nextTick from 'dai-js/tools/nextTick'
 
 
 export default {
   name: "HomeMap",
   data () {
     return {
-      showNoData: false,
+      dataLoading: true,
-      timer: null,
+      pieNoData: false,
-      isfirstInit: true,
+      lineNoData: false,
+      isfirstInit: true,//记录地图是否第一次加载
 
       projectTotal: 0,
       dateIncr: 0,
@@ -126,7 +145,9 @@ export default {
       lineOption: {},
       lineInitState: false,
       lineColorArray: [],
-      lineData: [820, 932, 901, 934, 1290, 1330, 1320],
+      lineData: [],
+      lineXaxis: [],
+      lineSeriesData: [],
 
       pieChartS: null,
       pieChart: '',
@@ -135,9 +156,8 @@ export default {
       pieTotal: 0,
       colorArray: [],
       pieData: [
-        { value: 1048, name: '未结案', color: '#FAC126', selected: true },
+        // { value: 1048, name: '未结案', color: '#FAC126', selected: true },
-        { value: 735, name: '已结案', color: '#3DDA83' },
+        // { value: 735, name: '已结案', color: '#3DDA83' },
-
       ],
 
       legendArray: [
@@ -156,6 +176,7 @@ export default {
       ],
 
       dateId: '',
+      dateIdShow: '',
       agencyId: '',
       status: 'pending',//状态:待处理 pending，结案closed
       agencyInfo: {},
@@ -180,26 +201,7 @@ export default {
           title: "南宁第二网格",
         }
       ],
-      projectList2: [
+
-        {
-          agencyId: '',
-          projectId: '',
-          origin: '',
-          status: 'pending',
-          title: '山东路山东路',
-          latitude: 36.062227,
-          longitude: 120.379455,
-        },
-        {
-          agencyId: '',
-          projectId: '',
-          origin: '',
-          status: 'closed',
-          latitude: 36.082227,
-          longitude: 120.379455,
-          title: "山东路",
-        }
-      ],
       iconUrlArray: [],
       iconTextStyle: {},
 
@@ -220,97 +222,99 @@ export default {
   },
   // mixins: [animate]
   beforeDestroy () {
-    this.timer && clearInterval(this.timer)
+
+  },
+  async created () {
+
   },
 
   async mounted () {
-    this.userId = this.uid;
+    this.dataLoading = true
+    //初始化时间、各组件
     this.initData()
-    await this.getWorkUserInfo()
     await this.getAgencylist()//获取组织级别
-    this.getApiData();
+    //获取服务器数据
+    await this.getProjectTotal()
+    await this.getLineChart()
+    await this.loadProjectlist()
+    this.dataLoading = false
+
+    this.assignData()
+
   },
 
   methods: {
-    initData () {
-      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
-      this.dateId = new Date(time); // 获取的是前一天日期
-
-    },
     async getApiData () {
       await this.getProjectTotal()
+      await this.getLineChart()
       await this.loadProjectlist()
-      await this.getLine()
 
     },
 
-    handleChangeDate (value) {
+    assignData () {
-      this.dateId = value
+      this.getPie()
-      this.getApiData()
+      this.getLine()
     },
 
-    // 获取当前管理员信息
+    handleChangeDate (value) {
-    getWorkUserInfo () {
+      this.dateIdShow = value
-      const url = '/epmetuser/customerstaff/staffbasicinfo'
+      this.getApiData()
-      let params = {}
-      window.app.ajax.post(
-        url,
-        params,
-        (data, rspMsg) => {
-          this.agencyInfo = data
-          if (!data.latitude) {
-            this.agencyInfo.latitude = 36.072227
-          }
-          if (!data.longitude) {
-            this.agencyInfo.longitude = 120.389455
-          }
-          if (!data.level) {
-            this.agencyInfo.level = 'street'
-          }
-
-        },
-        (rspMsg, data) => {
-          this.$message.error(rspMsg)
-        }
-      )
-
     },
 
+    // 获取当前登录人员信息及组织信息
     async getAgencylist () {
-      const url = '/gov/org/customeragency/agencylist'
+      const url = "/gov/org/customeragency/agencygridtree";
-      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
 
-      const params = {
+      let params = {};
-        // customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
+
-        customerId: '0c41b272ee9ee95ac6f184ad548a30eb'
+      const { data, code, msg } = await requestPost(url, params);
-      }
-      const { data, code, msg } = await requestPost(url, params)
       if (code === 0) {
+        this.agencyInfo = data
+        this.agencyId = this.agencyInfo.agencyId
+        if (!this.agencyInfo.latitude) {
+          this.agencyInfo.latitude = 36.072227
+        }
+        if (!this.agencyInfo.longitude) {
+          this.agencyInfo.longitude = 120.389455
+        }
+        if (!this.agencyInfo.level) {
+          this.agencyInfo.level = 'street'
+        }
+
+        //组织级联数据
         ++this.iscascaderShow
         this.casOptions = []
         this.agencyIdArray.length = []
 
         if (data) {
           this.casOptions.push(data)
+          this.agencyIdArray.push(this.agencyId)
         }
 
       } else {
-        this.$message.error(msg)
+        this.$message.error(msg);
       }
+
     },
 
     //加载项目
     async getProjectTotal () {
-      // const url = "/data/aggregator/project/projecttotal";
+      if (this.$refs.pieChart) {
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
+        this.$refs.pieChart.showLoading()
+        this.$refs.pieChart.clear()
+      }
+
+      const url = "/data/aggregator/project/projecttotal";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
       let params = {
-        agencyId: '',
+        agencyId: this.agencyId,
         dateId: this.dateId,
       };
 
       const { data, code, msg } = await requestPost(url, params);
-
+      if (this.$refs.pieChart) {
-
+        this.$refs.pieChart.hideLoading()
+      }
       if (code === 0) {
         this.projectTotal = data.projectTotal
         this.dateIncr = data.dateIncr
@@ -329,9 +333,6 @@ export default {
           }
         ]
 
-        this.getPie()
-
-
       } else {
         this.$message.error(msg);
       }
@@ -339,10 +340,10 @@ export default {
 
     //加载项目
     async loadProjectlist () {
-      // const url = "/data/aggregator/project/projectstatuslist";
+      const url = "/data/aggregator/project/projectstatuslist";
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectstatuslist";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectstatuslist";
       let params = {
-        agencyId: '',
+        agencyId: this.agencyId,
         dateId: this.dateId,
         status: this.status
       };
@@ -352,13 +353,13 @@ export default {
 
       if (code === 0) {
 
-        // this.projectList = [...data]
+        this.projectList = [...data]
-        if (this.status === 'closed') {
+        // if (this.status === 'closed') {
-          this.projectList = this.projectList1
+        //   this.projectList = this.projectList1
-        } else {
+        // } else {
-          this.projectList = this.projectList2
+        //   this.projectList = this.projectList2
 
-        }
+        // }
         this.projectList.forEach(item => {
           item.values_ = {
             name: item.title
@@ -407,14 +408,11 @@ export default {
     },
 
     loadMap () {
-
       if (this.isfirstInit) {
         //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
-        this.$refs.map.loadMap(this.agencyInfo, null, null, this.projectList, this.iconUrlArray, this.iconTextStyle)
+        this.$refs.map.loadMap(this.agencyInfo, null, null, this.projectList, this.iconUrlArray, this.iconTextStyle, 3000)
       } else {
         this.$refs.map.refreshMap(null, this.projectList)
-
-
       }
     },
 
@@ -424,10 +422,8 @@ export default {
     },
 
     pieInitOk (dom) {
-
       this.pieChartS = dom
       this.pieInitState = true
-
     },
     lineInitOk () {
 
@@ -436,7 +432,7 @@ export default {
     },
     getLine () {
       if (this.lineInitState) {
-        this.getLineChart()
+        this.assignLineChart()
       } else {
         setTimeout(() => {
           this.getLine()
@@ -445,12 +441,14 @@ export default {
     },
     // 获取折线图
     async getLineChart () {
-      this.$refs.lineChart.clear()
+      if (this.$refs.lineChart) {
-
+        this.$refs.lineChart.clear()
+        this.$refs.lineChart.showLoading()
+      }
       const _that = this
       // this.$refs.pieChart.showLoading()
-      //  const url ="/data/aggregator/project/projectmonthincr";
+      const url = "/data/aggregator/project/projectmonthincr";
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
       let params = {
         agencyId: this.agencyId,
         dateId: this.dateId,
@@ -460,28 +458,24 @@ export default {
 
       if (code === 0) {
         // 获取pieChart配置
-        this.lineOption = lineOption()
+
-        let xaxis = []
+        this.lineXaxis = []
-        let totalIndexData = []
+        this.lineSeriesData = []
         if (data && data.length > 0) {
+          this.lineNoData = false
           data.forEach(item => {
-            xaxis.push(item.type)
+            this.lineXaxis.push(item.type)
-            totalIndexData.push(item.value)
+            this.lineSeriesData.push(item.value)
           });
-          // this.lineData = data
+          this.lineData = data
 
         } else {
-
+          this.lineNoData = true
         }
-        this.$refs.lineChart.setOption(this.lineOption, true)
-        this.$refs.lineChart.setOption({
-          xAxis: { data: xaxis },
-          series: [
-            { data: totalIndexData },
-
-          ]
-        }, true)
 
+        if (this.$refs.lineChart) {
+          this.$refs.lineChart.hideLoading()
+        }
 
       } else {
         this.$message.error(msg);
@@ -490,9 +484,21 @@ export default {
 
     },
 
+    assignLineChart () {
+      this.lineOption = lineOption()
+      this.$refs.lineChart.setOption(this.lineOption, true)
+      this.$refs.lineChart.setOption({
+        xAxis: { data: this.lineXaxis },
+        series: [
+          { data: this.lineSeriesData },
+
+        ]
+      }, true)
+    },
+
     getPie () {
       if (this.pieInitState) {
-        this.getPieChart()
+        this.assignPieChart()
       } else {
         setTimeout(() => {
           this.getPie()
@@ -500,11 +506,10 @@ export default {
       }
     },
     // 获取饼状图
-    async getPieChart () {
+    async assignPieChart () {
-      this.$refs.pieChart.clear()
+
       this.pieTotal = 0
       const _that = this
-      // this.$refs.pieChart.showLoading()
 
       // 获取pieChart配置
       this.pieOption = pieOption(this.pieChartS)
@@ -573,7 +578,15 @@ export default {
       console.log(this.agencyIdArray)
     },
 
-
+    //初始化时间
+    initData () {
+      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
+      var nowdate = new Date(time); // 获取的是前一天日期
+      var y = nowdate.getFullYear();
+      var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1;
+      var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate();
+      this.dateIdShow = y + '-' + m + '-' + d;
+    },
 
     toUserInfo (uid) {
       this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
@@ -594,9 +607,16 @@ export default {
     cptTb,
     screenEchartsFrame,
     screenMap,
+    ScreenLoading,
+    ScreenNodata
   },
 
   watch: {
+    dateIdShow () {
+
+      let dataArray = this.dateIdShow.split('-')
+      this.dateId = dataArray.join('')
+    },
     uid (id) {
       this.userId = id;
     },

src/views/modules/visual/communityGovern/processLineOption.js

@@ -2,7 +2,15 @@ import * as echarts from 'echarts'
 export function lineOption () {
 
   return {
-   
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
     xAxis: {
       type: 'category',
       // boundaryGap: false,
@@ -54,6 +62,7 @@ export function lineOption () {
       {
         name: '项目数',
         type: 'line',
+        smooth: true,
         barWidth: 15,
         areaStyle: {},
         itemStyle: {

src/views/modules/visual/communityGovern/resibuzz.vue

@@ -12,8 +12,8 @@
                      :key="iscascaderShow"
                      :options="casOptions"
                      :props="optionProps"
-                     @change="handleChangeAgency"
+                     :show-all-levels="false"
-                     clearable></el-cascader>
+                     @change="handleChangeAgency"></el-cascader>
       </div>
       <div class="second-select status-select">
         <el-select v-model="status"
@@ -31,10 +31,16 @@
 
     <div class="g-cpt-resi">
       <div class="g-l">
-        <screen-echarts-frame class="echart-wr"
+        <screen-echarts-frame v-if="!pieNoData && !dataLoading"
+                              class="echart-wr"
                               @myChartMethod="pieInitOk"
                               ref="pieChart"></screen-echarts-frame>
-
+        <screen-nodata class="nodata"
+                       v-if="pieNoData && !dataLoading"></screen-nodata>
+        <div class="table-status"
+             v-if="dataLoading">
+          <screen-loading>加载中</screen-loading>
+        </div>
       </div>
       <div class="g-r">
         <div class="m-tb">
@@ -43,23 +49,28 @@
             <cpt-tb :col-list="demand.colList"
                     :loading="demand.loading"
                     :header="demand.header"
-                    :list="demand.list"></cpt-tb>
+                    :list="demand.list"
-
+                    @operate="toIssueInfo"></cpt-tb>
-            <div class="m-pagination">
-              <el-pagination :current-page="demand.pageNo"
-                             :page-size="demand.pageSize"
-                             :total="demand.total"
-                             background
-                             layout="prev, pager, next"
-                             @current-change="handlePageNoChange_demand">
-              </el-pagination>
-            </div>
-          </div>
 
+          </div>
+          <div class="m-pagination">
+            <el-pagination :current-page="demand.pageNo"
+                           :page-size="demand.pageSize"
+                           :total="demand.total"
+                           background
+                           layout="prev, pager, next"
+                           @current-change="handlePageNoChange_demand">
+            </el-pagination>
+          </div>
         </div>
 
       </div>
     </div>
+
+    <issue-info v-if="showIssue"
+                :issueId="issueId"
+                @close="showIssue = false" />
+
   </cpt-card>
 </template>
 
@@ -69,16 +80,20 @@ import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
-
+import ScreenLoading from "@/views/modules/visual/components/screen-loading";
+import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
 import { pieOption } from './resiPieOption.js'
+import nextTick from 'dai-js/tools/nextTick'
+import issueInfo from "./cpt/issue-info";
 
 
 export default {
   name: "HomeMap",
   data () {
     return {
-      showNoData: false,
+      dataLoading: true,
-      timer: null,
+      pieNoData: false,
+
       pieChartS: null,
       pieChart: '',
       pieOption: {},
@@ -86,18 +101,18 @@ export default {
       pieTotal: 0,
       colorArray: [],
       pieData: [
-        { count: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
+        // { count: 1048, categoryName: '城市管理', color: '#1B51FF', selected: true },
-        { count: 735, categoryName: '为民服务', color: '#00E5ED' },
+        // { count: 735, categoryName: '为民服务', color: '#00E5ED' },
-        { count: 580, categoryName: '安全监管', color: '#7800FF' },
+        // { count: 580, categoryName: '安全监管', color: '#7800FF' },
-        { count: 484, categoryName: '民政', color: '#16D783' },
+        // { count: 484, categoryName: '民政', color: '#16D783' },
-        { count: 300, categoryName: '环境保护', color: '#FF7800' },
+        // { count: 300, categoryName: '环境保护', color: '#FF7800' },
-        { count: 1048, categoryName: '建设管理', color: '#FFBA00' },
+        // { count: 1048, categoryName: '建设管理', color: '#FFBA00' },
-        { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
+        // { count: 735, categoryName: '街道吹哨部门报到', color: '#FFD685' },
-        { count: 1580, categoryName: '社会治安综合', color: '#2A00FF' },
+        // { count: 1580, categoryName: '社会治安综合', color: '#2A00FF' },
-        { count: 484, categoryName: '公安交通管理', color: '#C600FF' },
+        // { count: 484, categoryName: '公安交通管理', color: '#C600FF' },
-        { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
+        // { count: 300, categoryName: '卫生计生监管执法', color: '#FF2A00' },
-        { count: 484, categoryName: '民生', color: '#3DDA83' },
+        // { count: 484, categoryName: '民生', color: '#3DDA83' },
-        { count: 300, categoryName: '街道安全', color: '#FAC126' }
+        // { count: 300, categoryName: '街道安全', color: '#FAC126' }
       ],
       //voting 已转项目：shift_project 已关闭：closed，全部：all
       stateArray: [
@@ -121,6 +136,8 @@ export default {
 
       status: 'all',
       orgId: '',
+      orgTypeSel: '',
+      tableList: [],
       demand: {
         loading: true,
         colList: [
@@ -174,8 +191,9 @@ export default {
         pageSize: 10,
         pageNo: 1,
         total: 0,
-
       },
+      showIssue: true,
+      issueId: 'cf48b7dc70ef4c319fd9c71890d9dbbb',
 
       casOptions: [],
       agencyIdArray: [],
@@ -184,7 +202,7 @@ export default {
 
       optionProps: {
         multiple: false,
-        value: 'agencyId',
+        value: 'orgLevel',
         label: 'agencyName',
         children: 'subAgencyList',
         checkStrictly: true
@@ -194,127 +212,116 @@ export default {
   },
   // mixins: [animate]
   beforeDestroy () {
-    this.timer && clearInterval(this.timer)
+
   },
 
   async mounted () {
-    this.userId = this.uid;
+    this.dataLoading = true
-    this.getApiData();
+    await this.getAgencylist()//获取组织级别
+    await this.getApiData()
+
+    this.dataLoading = false
+
+    this.getPie()
   },
 
   methods: {
 
     async getApiData () {
-      await this.getAgencylist()//获取组织级别
+      await this.getPieChart()
-      await this.getPie()
       await this.getTable();
     },
 
+    // 获取当前登录人员信息及组织信息
     async getAgencylist () {
-      const url = '/gov/org/customeragency/agencylist'
+      const url = "/gov/org/customeragency/agencygridtree";
-      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
+      let params = {};
 
-      const params = {
+      const { data, code, msg } = await requestPost(url, params);
-        // customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
-        customerId: '0c41b272ee9ee95ac6f184ad548a30eb'
-      }
-      const { data, code, msg } = await requestPost(url, params)
       if (code === 0) {
+        this.agencyInfo = data
+        this.orgId = this.agencyInfo.agencyId
+        this.orgType = this.agencyInfo.level === 'grid' ? 'grid' : 'agency'
+
+
+        if (!this.agencyInfo.latitude) {
+          this.agencyInfo.latitude = 36.072227
+        }
+        if (!this.agencyInfo.longitude) {
+          this.agencyInfo.longitude = 120.389455
+        }
+        if (!this.agencyInfo.level) {
+          this.agencyInfo.level = 'street'
+        }
+
+        //组织级联数据
         ++this.iscascaderShow
         this.casOptions = []
         this.agencyIdArray.length = []
 
         if (data) {
           this.casOptions.push(data)
+          this.agencyIdArray.push(this.agencyInfo.orgLevel)
         }
 
       } else {
-        this.$message.error(msg)
+        this.$message.error(msg);
       }
-    },
 
 
-    pieInitOk (dom) {
-      console.log('pie准备好了', dom)
-      this.pieChartS = dom
-      this.pieInitState = true
-
-    },
-    getPie () {
-      if (this.pieInitState) {
-        this.getPieChart()
-      } else {
-        setTimeout(() => {
-          this.getPie()
-        }, 500)
-      }
     },
     // 获取饼状图
     async getPieChart () {
-      this.$refs.pieChart.clear()
+      if (this.$refs.pieChart) {
-      this.pieTotal = 0
+        this.$refs.pieChart.clear()
-      const _that = this
+        this.$refs.pieChart.showLoading()
-      // this.$refs.pieChart.showLoading()
+      }
-      //  const url ="/gov/issue/issue/resibuzz-leftpiechart";
+
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
+      const url = "/gov/issue/issue/resibuzz-leftpiechart";
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
       let params = {
         orgId: this.orgId,
+        orgType: this.orgType,
+
       };
 
       const { data, code, msg } = await requestPost(url, params);
-      // 获取pieChart配置
-
-
 
       if (code === 0) {
-        // 获取pieChart配置
-        this.pieOption = pieOption(this.pieChartS)
         if (data && data.length > 0) {
-          // this.pieData = data
 
-        } else {
+          this.pieData = data
-          this.pieData = [{ count: 0, categoryName: '无分类', color: '#00E5ED' }]
-        }
-
-        let maxValue = this.pieData[0].count
-        let maxIndex = 0
-        this.pieData[0].selected = true
-
-        this.pieData.forEach((item, index) => {
-          item.name = item.categoryName
-          item.value = item.count
-          this.colorArray.push(item.color)
-          this.pieTotal = this.pieTotal + item.value
-
-          if (item.value > maxValue) {
-            maxValue = item.value
-            maxIndex = index
-            item.selected = true
-          } else if (index !== 0) {
-            item.selected = false
-          }
-
-        });
 
+        } else {
+          this.pieData = []
 
-        this.pieOption.title.text = this.pieTotal
-        this.pieOption.series[1].itemStyle = {
-          color: function (params) {
-            return _that.colorArray[params.dataIndex]
-          }
         }
-        this.clickPie(maxIndex)
 
-        let fun = function (params) {
+        if (this.$refs.pieChart) {
-          _that.clickPie(params.dataIndex)
+          this.$refs.pieChart.hideLoading()
         }
-        this.$refs.pieChart.handleClick(fun)
+
       } else {
         this.$message.error(msg);
       }
 
+    },
+
+    pieInitOk (dom) {
+      console.log('pie准备好了', dom)
+      this.pieChartS = dom
+      this.pieInitState = true
 
     },
+    getPie () {
+      if (this.pieInitState) {
+        this.assignPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
 
     clickPie (seriesIndex) {
       this.pieData.forEach((element, index) => {
@@ -349,29 +356,87 @@ export default {
         }
       });
       this.pieOption.series[1].data = this.pieData
-      // this.$refs.pieChart.hideLoading()
+
       this.$refs.pieChart.setOption(this.pieOption)
 
     },
 
+    assignPieChart () {
+
+      this.pieTotal = 0
+
+      if (this.pieData.length > 0) {
+        this.pieNoData = false
+        const _that = this
+        let maxIndex = 0
+        let maxValue = this.pieData[0].count
+
+        this.pieData[0].selected = true
+
+        this.pieData.forEach((item, index) => {
+          item.name = item.categoryName
+          item.value = item.count
+          this.colorArray.push(item.color)
+          this.pieTotal = this.pieTotal + item.value
+
+          if (item.value > maxValue) {
+            maxValue = item.value
+            maxIndex = index
+            item.selected = true
+          } else if (index !== 0) {
+            item.selected = false
+          }
+
+        });
+        // 获取pieChart配置
+        this.pieOption = pieOption(this.pieChartS)
+        this.pieOption.title.text = this.pieTotal
+        this.pieOption.series[1].itemStyle = {
+          color: function (params) {
+            return _that.colorArray[params.dataIndex]
+          }
+        }
+        this.clickPie(maxIndex)
+
+        let fun = function (params) {
+          _that.clickPie(params.dataIndex)
+        }
+        this.$refs.pieChart.handleClick(fun)
+      } else {
+        this.pieNoData = true
+      }
+
+    },
+
     handleChangeState (index) {
       this.getTable()
     },
 
-    handleChangeAgency (value) {
+    async handleChangeAgency (value) {
-      console.log(value)
+      let orgArray = []
-      this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
+      let key = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
-      this.orgId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
+      if (key) {
-      console.log(this.agencyIdArray)
+        orgArray = key.split('-')
+        this.orgId = orgArray[0]
+        this.orgType = orgArray[1] === 'grid' ? 'grid' : 'agency'
+      } else {
+        this.orgId = ''
+        this.orgType = ''
+      }
+
+      await this.getApiData()
+      this.assignPieChart()
+
     },
 
     //加载组织数据
     async getTable () {
-      // const url = "/gov/issue/issue/resibuzz";
+      const url = "/gov/issue/issue/resibuzz";
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz";
       let params = {
         status: this.status,
         orgId: this.orgId,
+        orgType: this.orgType,
         pageNo: this.demand.pageNo,
         pageSize: this.demand.pageSize,
       };
@@ -381,18 +446,19 @@ export default {
 
       if (code === 0) {
         this.demand.total = data.total;
+        this.tableList = data.list
         this.demand.list = data.list.map((item) => {
           return [
             { type: "index" },
-            item.issueTitle,
+            item.issueTitle ? item.issueTitle : '',
-            item.suggestion,
+            item.suggestion ? item.suggestion : '',
-            item.categoryName,
+            item.categoryName.join(','),
-            item.status,
+            item.status ? item.status : '',
-            item.createdTime,
+            item.createdTime ? item.createdTime : '',
-            item.issueOriginator,
+            item.issueOriginator ? item.issueOriginator : '',
-            item.voteAccount,
+            item.voteAccount ? item.voteAccount : '',
-            item.supportCount,
+            item.supportCount ? item.supportCount : '',
-            item.oppositionCount,
+            item.oppositionCount ? item.oppositionCount : '',
             { type: "operate", list: ["查看"] },
           ];
         });
@@ -405,8 +471,12 @@ export default {
       this.demand.pageNo = val;
       this.getTable();
     },
-    toUserInfo (uid) {
+
-      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
+    async toIssueInfo (index) {
+      const { tableList } = this;
+      this.issueId = tableList[index].issueId
+      this.showIssue = true
+
     },
   },
   props: {
@@ -423,6 +493,9 @@ export default {
     cptCard,
     cptTb,
     screenEchartsFrame,
+    ScreenLoading,
+    ScreenNodata,
+    issueInfo
   },
 
   watch: {

src/views/modules/visual/communityGovern/typeAnalyze.vue

@@ -12,18 +12,18 @@
                      :key="iscascaderShow"
                      :options="casOptions"
                      :props="optionProps"
-                     @change="handleChangeAgency"
+                     :show-all-levels="false"
-                     clearable></el-cascader>
+                     @change="handleChangeAgency"></el-cascader>
       </div>
       <div class="second-select ">
 
-        <el-date-picker v-model="dateId"
+        <el-date-picker v-model="dateIdShow"
                         type="date"
                         :clearable="false"
                         @change="handleChangeDate"
                         prefix-icon="el-icon-caret-bottom"
                         placeholder="选择日期"
-                        value-format="yyyyMMdd">
+                        value-format="yyyy-MM-dd">
         </el-date-picker>
 
       </div>
@@ -45,15 +45,16 @@
                     :header="demand.header"
                     :list="demand.list"></cpt-tb>
 
-            <div class="m-pagination">
+          </div>
-              <el-pagination :current-page="demand.pageNo"
+
-                             :page-size="demand.pageSize"
+          <div class="m-pagination">
-                             :total="demand.total"
+            <el-pagination :current-page="demand.pageNo"
-                             background
+                           :page-size="demand.pageSize"
-                             layout="prev, pager, next"
+                           :total="demand.total"
-                             @current-change="handlePageNoChange_demand">
+                           background
-              </el-pagination>
+                           layout="prev, pager, next"
-            </div>
+                           @current-change="handlePageNoChange_demand">
+            </el-pagination>
           </div>
 
         </div>
@@ -71,7 +72,7 @@ import cptTb from "@/views/modules/visual/cpts/tb";
 import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
 
 import { pieOption } from './typePieOption.js'
-
+import nextTick from 'dai-js/tools/nextTick'
 
 export default {
   name: "HomeMap",
@@ -100,6 +101,7 @@ export default {
         { total: 300, categoryName: '街道安全', color: '#FAC126' }
       ],
 
+      dateIdShow: '',
       agencyId: '',
       dateId: '',
       categoryCode: '',
@@ -160,6 +162,7 @@ export default {
         multiple: false,
         value: 'agencyId',
         label: 'agencyName',
+        orgType: 'orgType',
         children: 'subAgencyList',
         checkStrictly: true
       },
@@ -175,48 +178,60 @@ export default {
     this.userId = this.uid;
     this.initData()
     await this.getAgencylist()//获取组织级别
-    this.getApiData();
+    await nextTick(500)
+    await this.getPie()
   },
 
   methods: {
     initData () {
       var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
-      this.dateId = new Date(time); // 获取的是前一天日期
+      var nowdate = new Date(time); // 获取的是前一天日期
-
+      var y = nowdate.getFullYear();
-    },
+      var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1;
-    async getApiData () {
+      var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate();
+      this.dateIdShow = y + '-' + m + '-' + d;
 
-      await this.getPie()
-      await this.getTable();
     },
 
+    // 获取当前登录人员信息及组织信息
     async getAgencylist () {
-      const url = '/gov/org/customeragency/agencylist'
+      const url = "/gov/org/customeragency/agencygridtree";
-      // const url = 'http://yapi.elinkservice.cn/mock/102/gov/org/agency/agencylist'
 
-      const params = {
+      let params = {};
-        // customerId: '613cc61a6b8ce4c70d21bd413dac72cc'
+
-        customerId: '0c41b272ee9ee95ac6f184ad548a30eb'
+      const { data, code, msg } = await requestPost(url, params);
-      }
-      const { data, code, msg } = await requestPost(url, params)
       if (code === 0) {
+        this.agencyInfo = data
+        this.agencyId = this.agencyInfo.agencyId
+        if (!this.agencyInfo.latitude) {
+          this.agencyInfo.latitude = 36.072227
+        }
+        if (!this.agencyInfo.longitude) {
+          this.agencyInfo.longitude = 120.389455
+        }
+        if (!this.agencyInfo.level) {
+          this.agencyInfo.level = 'street'
+        }
+
+        //组织级联数据
         ++this.iscascaderShow
         this.casOptions = []
         this.agencyIdArray.length = []
 
         if (data) {
           this.casOptions.push(data)
+          this.agencyIdArray.push(this.agencyId)
         }
 
       } else {
-        this.$message.error(msg)
+        this.$message.error(msg);
       }
+
     },
 
     handleChangeDate (value) {
-
+      this.dateIdShow = value
-      this.dateId = value
+      this.getPie()
-      this.getApiData()
     },
 
 
@@ -241,8 +256,8 @@ export default {
       this.pieTotal = 0
       const _that = this
       // this.$refs.pieChart.showLoading()
-      //  const url ="/data/aggregator/project/projectcategorylist";
+      const url = "/data/aggregator/project/projectcategorylist";
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectcategorylist";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectcategorylist";
       let params = {
         agencyId: this.agencyId,
         dateId: this.dateId,
@@ -255,7 +270,7 @@ export default {
         // 获取pieChart配置
         this.pieOption = pieOption(this.pieChartS)
         if (data && data.length > 0) {
-          // this.pieData = data
+          this.pieData = data
 
         } else {
           this.pieData = [{ total: 0, categoryName: '无分类', color: '#00E5ED' }]
@@ -274,14 +289,13 @@ export default {
             maxValue = item.value
             maxIndex = index
             item.selected = true
+            this.categoryCode = item.categoryCode
           } else if (index !== 0) {
             item.selected = false
           }
 
         });
 
-
-
         this.pieOption.title.text = this.pieTotal
         this.pieOption.series[1].itemStyle = {
           color: function (params) {
@@ -293,8 +307,6 @@ export default {
         let fun = function (params) {
           _that.clickPie(params.dataIndex)
 
-          _that.categoryCode = _that.pieData[params.dataIndex].categoryCode
-          _that.getTable()
         }
         this.$refs.pieChart.handleClick(fun)
         this.clickPie(maxIndex)
@@ -304,7 +316,7 @@ export default {
 
     },
 
-    clickPie (seriesIndex) {
+    async clickPie (seriesIndex) {
       this.pieData.forEach((element, index) => {
         if (index === seriesIndex) {
           element.label = {
@@ -340,20 +352,22 @@ export default {
       // this.$refs.pieChart.hideLoading()
       this.$refs.pieChart.setOption(this.pieOption)
 
+      this.categoryCode = this.pieData[seriesIndex].categoryCode
+      this.getTable()
     },
 
     handleChangeAgency (value) {
 
       this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
       this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
-      this.getApiData()
+      this.getPie()
       console.log(this.agencyIdArray)
     },
 
     //加载组织数据
     async getTable () {
-      // const url = "/data/aggregator/project/categoryprojectlist";
+      const url = "/data/aggregator/project/categoryprojectlist";
-      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/categoryprojectlist";
+      // const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/categoryprojectlist";
       let params = {
         dateId: this.dateId,
         agencyId: this.agencyId,
@@ -375,13 +389,13 @@ export default {
           item.statusShow = item.status === 'pending' ? '待处理' : '已结案'
           return [
             { type: "index" },
-            item.projectCode,
+            item.projectCode ? item.projectCode : '',
             item.categoryNames.join(','),
-            item.originShow,
+            item.originShow ? item.originShow : '',
-            item.gridName,
+            item.gridName ? item.gridName : '',
-            item.statusShow,
+            item.statusShow ? item.statusShow : '',
-            item.title,
+            item.title ? item.title : '',
-            item.time,
+            item.time ? item.time : '',
             { type: "operate", list: ["查看"] },
           ];
         });
@@ -415,11 +429,15 @@ export default {
   },
 
   watch: {
+    dateIdShow () {
+      let dataArray = this.dateIdShow.split('-')
+      this.dateId = dataArray.join('')
+    },
     uid (id) {
       this.userId = id;
     },
     userId () {
-      this.getApiData();
+      this.getPie()
       window.scrollTo(0, 0);
     },
   },

src/views/modules/visual/components/screen-map/index.vue

@@ -24,6 +24,7 @@ import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/int
 import { getCenter, boundingExtent } from 'ol/extent.js';
 import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
 import { altKeyOnly, click, pointerMove } from 'ol/events/condition';
+import { getDistance } from 'ol/sphere';
 
 import { mapGetters } from "vuex";
 import { Loading } from 'element-ui'; //引入Loading服务
@@ -48,10 +49,6 @@ let iconSource; // icon
 let select;//选中标注
 
 
-//url图标
-
-
-
 let polygonColorArray = [
   'rgba(210, 2, 2, 0.24)',
   'rgba(43, 231, 253, 0.25)',
@@ -59,8 +56,7 @@ let polygonColorArray = [
 ];
 
 
-//变电站标注样式
+//多边形标注样式
-
 var polygonStyleFunction = (function () {
   return function (feature) {
     return new Style({
@@ -134,6 +130,7 @@ const vueGis = {
       //icon图标样式
       iconUrlArray: [],
       iconTextColor: '#ffffff',
+      distanceMax: null,//显示的坐标距离中心点的范围
 
     }
   },
@@ -143,13 +140,14 @@ const vueGis = {
   },
   methods: {
     //加载地图:地图基本信息，多边形区域信息，多边形icon
-    loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle) {
+    loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle, distanceMax) {
       this.mapInfo = mapInfo
       this.polygonArray = polygonArray
       this.polIconUrlArray = polIconUrlArray
       this.iconArrays = iconArrays
       this.iconUrlArray = iconUrlArray
       this.iconTextStyle = iconTextStyle
+      this.distanceMax = distanceMax
 
       //初始化地图
       this.initMap()
@@ -302,11 +300,12 @@ const vueGis = {
     //加载icon图标
     loadIcon () {
       iconSource.clear()//清空多边形标注
+
       if (this.iconArrays && this.iconArrays.length > 0) {
 
         let iconFeatures = [];
+        let iconArraysNew = []
         this.iconArrays.forEach((oneIcon, index) => {
-          let urlNum = this.getRndBetween(1, 3)
           //添加标注
           let iconItem = new Feature({
             geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
@@ -328,7 +327,16 @@ const vueGis = {
           });
 
           iconItem.setStyle(iconStyle);
-          iconFeatures.push(iconItem);
+          if (this.distanceMax) {
+            if (this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)) {
+              iconFeatures.push(iconItem);
+            }
+          } else {
+            iconFeatures.push(iconItem);
+          }
+
+
+
 
         });
 
@@ -349,6 +357,22 @@ const vueGis = {
 
     },
 
+    //计算和中心点距离
+    computedDistance (lon, lat, max) {
+      let c1 = [2]; c1[0] = lon; c1[1] = lat;
+      let distance = getDistance(this.centerPoint, c1);
+      console.log(distance)
+      return (distance < max || distance === max)
+
+
+
+
+      // debugger
+      //   return 
+      // var wgs84Sphere = new ol.Sphere(6378137); 
+      // wgs84Sphere.haversineDistance([120.21592590991689, 30.210793016606],[120.21670777384473, 30.211168525868086]);
+    },
+
     //初始化地图
     initMap () {
       this.setMapLocation()

src/views/modules/visual/components/screen-nodata/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="empty">
+    <div class="icon"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss" rel="stylesheet/scss">
+.empty {
+  width: 100%;
+  height: calc(100% - 37px);
+  margin: 15px 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .icon {
+    width: 100%;
+    height: 160px;
+    background: url("../../../../../assets/img/modules/visual/noData.png")
+      no-repeat;
+    background-size: contain;
+    background-position: 50% 50%;
+  }
+}
+</style>

src/views/modules/visual/cpts/line-chart.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="m-chart">
+    <canvas id="myChart" :width="width" :height="height" />
+  </div>
+</template>
+
+<script>
+import nextTick from "dai-js/tools/nextTick";
+// ios下字体渲染有bug
+const fontFamily = "PingFang SC";
+const fontSize = 14;
+
+let chart;
+let srcData = [];
+
+let textShapeList = [];
+const addTextShape = () => {
+  if (textShapeList.length > 0) {
+    textShapeList.forEach((item) => {
+      item.remove(true);
+    });
+    textShapeList = [];
+  }
+  // 添加折线上文本
+  const canvas = chart.get("canvas");
+  const group = canvas.addGroup();
+  const shapes = {};
+
+  function addFn(list) {
+    const listLength = list.length;
+    list.forEach(function (obj, index) {
+      // 避免显示太多，乱七八糟
+      if (listLength > 7 && index > 0 && index < listLength - 1) {
+        if (index % Math.ceil(listLength / 5) != 0) {
+          return;
+        }
+      }
+
+      const offsetX = 6;
+      const offsetY = 1;
+      const point = chart.getPosition(obj);
+      const text = group.addShape("text", {
+        attrs: {
+          x: obj.type === "支持" ? point.x + 2 * offsetX : point.x - offsetX,
+          y: point.y + offsetY,
+          text: obj.value,
+          textAlign: "center",
+          textBaseline: "bottom",
+          fill: "#333",
+          fontWeight: 500,
+          fontFamily,
+          fontSize,
+        },
+      });
+
+      textShapeList.push(text); // 缓存该 shape, 便于后续查找
+    });
+  }
+  srcData.sort((a, b) => {
+    return new Date(a.date).getTime() - new Date(b.date).getTime();
+  });
+  let supData = srcData.filter((item) => item.type == "支持");
+  let oppData = srcData.filter((item) => item.type == "反对");
+  addFn(supData);
+  addFn(oppData);
+};
+
+const iniChart = function (config, srcData) {
+  chart = new window.F2.Chart({
+    id: "myChart",
+    ...config,
+  });
+
+  const supColor = "#FFDA0E";
+  const oppColor = "#00E5ED";
+
+  chart.source(srcData, {
+    date: {
+      range: [0, 1],
+      type: "timeCat",
+      mask: "MM-DD",
+    },
+    value: {
+      // type: "linear",
+    },
+  });
+  // 设置坐标轴
+  chart.axis("date", {
+    line: {
+      lineWidth: 1,
+      stroke: "#E7EEEE",
+    },
+    label: {
+      fontWeight: 500,
+      fontSize,
+      fill: "#B5B7BF",
+      textBaseline: "middle",
+    },
+    labelOffset: 25,
+    country: {
+      range: [0.1, 0.9], // 配置 range 范围，使左右两边不留边距
+    },
+    grid: null,
+  });
+  chart.axis("value", {
+    line: {
+      lineWidth: 1,
+      stroke: "#E7EEEE",
+    },
+    labelOffset: 20,
+    label: {
+      fontWeight: 500,
+      fontSize,
+      fill: "#B5B7BF",
+    },
+  });
+  // 类别标识区
+  chart.legend({
+    position: "bottom",
+    align: "center",
+    offsetY: -30,
+    custom: true,
+    nameStyle: {
+      fill: "#999",
+      fontWeight: 500,
+      fontSize,
+    },
+    itemWidth: 150,
+    wordSpace: 25,
+    items: [
+      {
+        name: "支持",
+        marker(x, y, r, ctx) {
+          ctx.lineWidth = 10;
+          ctx.strokeStyle = supColor;
+          ctx.moveTo(x - r - 15, y);
+          ctx.lineTo(x + r + 15, y);
+          ctx.stroke();
+          ctx.fill();
+        },
+      },
+      {
+        name: "反对",
+        marker(x, y, r, ctx) {
+          ctx.lineWidth = 10;
+          ctx.strokeStyle = oppColor;
+          ctx.moveTo(x - r - 15, y);
+          ctx.lineTo(x + r + 15, y);
+          ctx.stroke();
+          ctx.fill();
+        },
+      },
+    ],
+  });
+  // 添加折线
+  chart
+    .line()
+    .position("date*value")
+    .color("type", (type) => {
+      if (type === "支持") {
+        return supColor;
+      }
+      return oppColor;
+    })
+    .style("type", {
+      lineWidth: 1,
+    })
+    .animate();
+  chart.render();
+
+  addTextShape();
+
+  // 注意：需要把chart return 出来
+  return chart;
+};
+
+export default {
+  name: "chart",
+  props: {
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    width: {
+      type: Number,
+      default: 400,
+    },
+    height: {
+      type: Number,
+      default: 260,
+    },
+  },
+  data() {
+    return {
+      iniLoading: false,
+    };
+  },
+  watch: {
+    list(data) {
+      chart.changeData(data);
+      srcData = data;
+      addTextShape();
+    },
+  },
+  async created() {
+    await nextTick(200);
+    iniChart(this.config, this.list);
+    await nextTick(200);
+    this.iniLoading = true;
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/modules/visual/measure/volunteer.vue

@@ -71,35 +71,24 @@
         </div>
       </div>
 
-      <div class="map-tips">
-        <div class="map-tips-item">
-          <div class="map-tips-icon"></div>
-          <div class="map-tips-label">调解员</div>
-        </div>
-        <div class="map-tips-item">
-          <div class="map-tips-icon"></div>
-          <div class="map-tips-label">调解员</div>
-        </div>
-        <div class="map-tips-item">
-          <div class="map-tips-icon"></div>
-          <div class="map-tips-label">能人达人</div>
-        </div>
-        <div class="map-tips-item">
-          <div class="map-tips-icon"></div>
-          <div class="map-tips-label">治安巡逻</div>
-        </div>
-        <div class="map-tips-item">
-          <div class="map-tips-icon"></div>
-          <div class="map-tips-label">代办员</div>
-        </div>
-      </div>
-
       <div class="card-map">
         <screen-map class="map"
                     ref="map"
                     @clickFeature="clickProject"
                     :showIconLayer="true"></screen-map>
       </div>
+      <div class="map-tips">
+
+        <div class="map-tips-item"
+             v-for="item in legendArray"
+             :key="item.optionValue">
+
+          <img class="title-icon"
+               :src="item.url" />
+          <div class="map-tips-label">{{item.optionLabel}}</div>
+        </div>
+
+      </div>
 
     </cpt-card>
   </div>
@@ -148,44 +137,20 @@ export default {
       //地图相关数据
       isfirstInit: true,//记录是否是首次加载地图
       agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
-      unitMapList: [],
+      distributionsList: [],
-      unitMapList1: [
+
-        {
+      legendArray: [],
-          type: '党建楼宇',
+
-          name: '建联单位1',
+      iconUrlArray: [
-          latitude: 36.062227,
+        require('../../../../assets/img/shuju/volunteer1.png'),//文化队伍
-          longitude: 120.389455,
+        require('../../../../assets/img/shuju/volunteer2.png'),//楼委会
-        },
+        require('../../../../assets/img/shuju/volunteer3.png'),//能人达人
-        {
+        require('../../../../assets/img/shuju/volunteer4.png'),//老友俱乐部
-          type: '党建楼宇',
+        require('../../../../assets/img/shuju/volunteer5.png'),//代办员
-          name: '建联单位2',
+        require('../../../../assets/img/shuju/volunteer6.png'),//调解员
-          latitude: 36.082227,
+        require('../../../../assets/img/shuju/volunteer7.png'),//采集员
-          longitude: 120.389455,
+        require('../../../../assets/img/shuju/volunteer8.png'),//治安巡逻
-        },
+        require('../../../../assets/img/shuju/volunteer9.png'),//其他
-        {
-          type: '机关直属部门',
-          name: '建联单位3',
-          latitude: 36.062227,
-          longitude: 120.379455,
-        },
-        {
-          type: '两新党建',
-          name: '建联单位4',
-          latitude: 36.082227,
-          longitude: 120.379455,
-        },
-        {
-          type: '辖区单位',
-          name: '建联单位5',
-          latitude: 36.092227,
-          longitude: 120.379455,
-        },
-        {
-          type: '其他',
-          name: '建联单位6',
-          latitude: 36.102227,
-          longitude: 120.379455,
-        }
       ],
       vPersonal: [],
       vCount: [],
@@ -400,49 +365,58 @@ export default {
 
     },
 
+
+
     //获取联建单位分布图
     async getMapUnitList () {
-      // const url = "/heart/icpartyunit/distribution"
+      const url = "/epmetuser/volunteer/distribution"
-      const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
 
       let params = {
-        agencyId: this.$store.state.user.agencyId
+        customerId: this.$store.state.user.customerId
       }
 
       const { data, code, msg } = await requestPost(url, params)
 
       if (code === 0) {
-        // this.unitMapList = data
+        this.legendArray = data.legends
-        this.unitMapList = this.unitMapList1
-
-        this.unitMapList.forEach(item => {
-
-          if (item.type === '党建楼宇') {
-            item.urlIndex = 0
-          } else if (item.type === '两新党建') {
-            item.urlIndex = 1
-          } else if (item.type === '辖区单位') {
-            item.urlIndex = 2
-          } else if (item.type === '机关直属部门') {
-            item.urlIndex = 3
-          } else if (item.type === '其他') {
-            item.urlIndex = 4
-          }
-        });
 
+        this.legendArray.forEach((legendTtem, index) => {
+          if (index < this.iconUrlArray.length) {
+            legendTtem.url = this.iconUrlArray[index]
+          } else {//超过原型数量的都默认为第一个图标
+            legendTtem.url = this.iconUrlArray[0]
+          }
 
-        this.iconUrlArray = [
+        });
-          require('../../../../assets/img/shuju/measure/ly@2x.png'),//未处理
+        this.legendArray.push({
-          require('../../../../assets/img/shuju/measure/jgzs@2x.png'),//已处理
+          optionValue: 'other',
-          require('../../../../assets/img/shuju/measure/lxdj@2x.png'),//已处理
+          optionLabel: '其他',
-          require('../../../../assets/img/shuju/measure/xq@2x.png'),//已处理
+          url: this.iconUrlArray[8]
-          require('../../../../assets/img/shuju/measure/qita.png')//已处理
+        })
-        ]
+
+        this.distributionsList = data.distributions
+
+        this.distributionsList.forEach(item => {
+          let typeShow = ''
+          if (item.volunteerCategories.length > 0) {
+            typeShow = item.volunteerCategories[0]
+          } else {
+            typeShow = 'other'
+          }
+          item.urlIndex = 0
+          for (let i = 0; i < this.legendArray.length; i++) {
+            if (typeShow === this.legendArray[i].optionValue) {
+              item.urlIndex = i
+              break;
+            }
+          }
 
+        });
+        console.log(this.distributionsList)
 
         //第一次加载完置为false
         this.loadMap()
-
         this.isfirstInit = false
 
       } else {
@@ -456,7 +430,7 @@ export default {
     loadMap () {
       if (this.isfirstInit) {
         //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
-        this.$refs.map.loadMap(this.agencyInfo, null, null, this.unitMapList, this.iconUrlArray, null)
+        this.$refs.map.loadMap(this.agencyInfo, null, null, this.distributionsList, this.iconUrlArray, null)
       } else {
         this.$refs.map.refreshMap(null, this.unitMapList)
 
@@ -485,6 +459,7 @@ export default {
   .card-wr:last-child {
     margin-left: 20px;
   }
+  padding: 25px 21px 15px 24px;
 }
 .card-title {
   display: flex;
@@ -492,10 +467,10 @@ export default {
   cursor: pointer;
   .title-icon {
     display: block;
-    width: 46px;
+    width: 36px;
-    height: 34px;
+    height: 29px;
     box-sizing: border-box;
-    margin-right: 6px;
+    margin-right: 3px;
   }
   .title-label {
     font-size: 16px;
@@ -591,17 +566,20 @@ export default {
 }
 
 .map-tips {
-  width: 100%;
+  width: 700px;
   display: flex;
+  justify-content: start;
   flex-wrap: wrap;
   padding-top: 10px;
   padding-bottom: 20px;
 
   .map-tips-item {
     display: flex;
+
     align-items: center;
-    margin-top: 20px;
+    margin-top: 10px;
     margin-right: 40px;
+
     .map-tips-icon {
       width: 20px;
       height: 10px;
@@ -619,10 +597,13 @@ export default {
 
 .card-wr-map {
   height: calc(100vh - 140px);
+  text-align: center;
 
   .card-map {
+    margin-top: 10px;
     width: 100%;
     height: calc(100vh - 285px);
+    // height: calc(100vh - 295px);
 
     .map {
       width: 100%;