合并冲突

src/assets/scss/modules/visual/people.scss

@@ -6,6 +6,8 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    margin-top: 5px;
+
     .g-l {
         width: 850px;
         margin-bottom: 20px;
@@ -177,7 +179,7 @@
 .m-pop {
     @include shield;
     background-color: rgba(#000, 0.9);
-    overflow-y: scroll;
+    overflow-y: auto;
 
     .wrap {
         position: relative;
@@ -288,7 +290,7 @@
 
 .m-relation {
     position: relative;
-    margin-top: 20px;
+    margin-top: 10px;
 
     .title {
         padding: 10px;
@@ -455,7 +457,7 @@
     }
     .tb {
         height: 300px;
-        overflow-y: scroll;
+        overflow-y: auto;
         @include scrollBar;
     }
 }
@@ -463,7 +465,7 @@
 .m-row {
     display: flex;
     justify-content: space-between;
-    margin-top: 20px;
+    margin-top: 10px;
 
     .m-list {
         width: calc(50% - 3px);
@@ -484,11 +486,124 @@
             span {
                 display: block;
             }
+
+            a {
+                display: block;
+                color: rgba(#fff, 0.5);
+                font-size: 22px;
+                font-family: PingFang SC;
+                font-weight: 800;
+                margin-right: 10px;
+                cursor: pointer;
+
+                &.z-on {
+                    color: #fff;
+                    cursor: default;
+
+                    &:hover {
+                        color: #fff;
+                        text-decoration: none;
                     }
-        .list {
+                }
+
+                &:hover {
+                    color: rgba(#fff, 0.5);
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        .list-wrap {
             height: 480px;
-            overflow-y: scroll;
+            overflow-y: auto;
             @include scrollBar;
+
+            .list {
+                .item {
+                    position: relative;
+                    background-color: #104ba4;
+                    padding: 10px 20px;
+                    margin-bottom: 4px;
+                    cursor: pointer;
+                    transition: all ease 0.1s;
+
+                    .item-row {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .item-l {
+                            width: 25%;
+                        }
+                        .item-r {
+                            width: 75%;
+                        }
+
+                        &:hover {
+                            &::before {
+                                content: "";
+                                position: absolute;
+                                display: block;
+                                left: 0;
+                                top: 0;
+                                bottom: 0;
+                                width: 6px;
+                                background: linear-gradient(270deg, #0336ff, #01b4ff);
+                                border-radius: 2px;
+                            }
+
+                            &::after {
+                                content: "";
+                                position: absolute;
+                                display: block;
+                                left: 15px;
+                                top: 0;
+                                bottom: 0;
+                                margin: auto 0;
+                                width: 0;
+                                height: 0;
+                                border-width: 10px;
+                                border-style: solid;
+                                border-color: transparent transparent transparent #20edff;
+                            }
+                        }
+                    }
+
+                    .item-point {
+                        text-align: center;
+                        padding-left: 10%;
+                        height: 16px;
+                        font-size: 22px;
+                        font-family: PingFang SC;
+                        font-weight: bold;
+                        color: #ffffff;
+                        line-height: 12px;
+                    }
+
+                    .item-title {
+                        padding: 10px 0;
+                        font-size: 18px;
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        line-height: 24px;
+                    }
+
+                    .item-date {
+                        padding: 10px 0;
+                        border-top: 1px dashed #8398d9;
+                        font-size: 14px;
+                        font-family: PingFang SC;
+                        font-weight: 400;
+                        color: #ffffff;
+                        opacity: 0.67;
+                    }
+                    &:hover {
+                        box-shadow: 0 0 30px 5px inset #22f;
+                        background-color: darken(#104ba4, 12);
+                    }
+                }
+            }
         }
     }
 }

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

@@ -0,0 +1,503 @@
+<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
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <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">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "demandInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  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() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  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() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              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
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        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) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>

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

@@ -0,0 +1,503 @@
+<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
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <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">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "demandInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  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() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  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() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              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
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        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) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>

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

@@ -0,0 +1,503 @@
+<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
+          :key="'fieldSubList' + index"
+          v-for="(fieldSubList, index) in fieldList"
+        >
+          <div class="list">
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属网格：</span>
+              <span>{{ gridName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属小区：</span>
+              <span>{{ xiaoquName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属楼宇：</span>
+              <span>{{ louName }}-{{ danyuanName }}</span>
+            </div>
+            <div class="item" v-if="index == 0">
+              <span class="item-field">所属家庭：</span>
+              <span>{{ homeName }}</span>
+            </div>
+            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
+              <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">
+          <div
+            class="tab-btn"
+            @click="subStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
+            class="tab"
+            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
+            :key="'tab' + index"
+            @click="groupIndex = index"
+            v-for="(item, index) in groupList"
+          >
+            {{ item.label }}
+          </div>
+          <div
+            class="tab-btn"
+            @click="addStartGroupIndex"
+            v-if="groupList.length > 9"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div
+          :key="'group' + index"
+          v-show="groupIndex % groupList.length == index"
+          v-for="(group, index) in groupList"
+        >
+          <div v-if="group.tableName == 'ic_resi_demand' && Array.isArray(allInfo.ic_resi_demand) && allInfo.ic_resi_demand.length>0">
+            <div
+              class="list"
+              :key="'ic_resi_demand' + infoIndex"
+              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
+            >
+              <div
+                class="item"
+                :key="field.itemId"
+                v-for="field in group.itemList"
+              >
+                <span class="item-field">{{ field.label }}：</span>
+                <span
+                  v-if="
+                    field.itemType == 'select' ||
+                    field.itemType == 'radio' ||
+                    field.itemType == 'checkbox' ||
+                    field.itemType == 'cascader'
+                  "
+                  >{{
+                    infoItem[field.columnName] == null
+                      ? "--"
+                      : getOptionLabel(
+                          field.options,
+                          infoItem[field.columnName],
+                          field.itemType
+                        )
+                  }}</span
+                >
+
+                <span v-else>{{
+                  infoItem[field.columnName] == null
+                    ? "--"
+                    : infoItem[field.columnName]
+                }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="list" v-else>
+            <div
+              class="item"
+              :key="field.itemId"
+              v-for="field in group.itemList"
+            >
+              <span class="item-field">{{ field.label }}：</span>
+              <span
+                v-if="
+                  field.itemType == 'select' ||
+                  field.itemType == 'radio' ||
+                  field.itemType == 'checkbox' ||
+                  field.itemType == 'cascader'
+                "
+                >{{
+                  !allInfo[group.tableName] ||
+                  allInfo[group.tableName][0][field.columnName] == null
+                    ? "--"
+                    : getOptionLabel(
+                        field.options,
+                        allInfo[group.tableName][0][field.columnName],
+                        field.itemType
+                      )
+                }}</span
+              >
+
+              <span v-else>{{
+                !allInfo[group.tableName] ||
+                allInfo[group.tableName][0][field.columnName] == null
+                  ? "--"
+                  : allInfo[group.tableName][0][field.columnName]
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "demandInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      info: {},
+      allInfo: {},
+
+      xiaoquList: [],
+      louList: [],
+      danyuanList: [],
+      homeList: [],
+    };
+  },
+
+  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() {
+      this.getApiData();
+    },
+  },
+
+  mounted() {
+    this.getApiData();
+  },
+
+  methods: {
+    addStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex < groupList.length - 9) {
+        this.startGroupIndex = startGroupIndex + 1;
+      } else {
+        this.startGroupIndex = groupList.length - 9;
+      }
+    },
+    subStartGroupIndex() {
+      const { startGroupIndex, groupList } = this;
+      if (startGroupIndex > 0) {
+        this.startGroupIndex = startGroupIndex - 1;
+      } else {
+        this.startGroupIndex = 0;
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+
+    async getApiData() {
+      await this.getField();
+      await this.getInfo();
+      this.getXiaoquList();
+      this.getLouList();
+      this.getDanyuanList();
+      this.getHomeList();
+    },
+
+    getOptionLabel(options, value, type = "") {
+      if (Array.isArray(options)) {
+        let valueArr = value.split(",");
+        if (type == "cascader") {
+          if (valueArr.length > 0) {
+            let level1 = options.find((item) => item.value == valueArr[0]);
+            if (level1) {
+              if (valueArr.length > 1 && level1.children) {
+                let level2 = level1.children.find(
+                  (item) => item.value == valueArr[1]
+                );
+                if (level2) {
+                  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() {
+      const url = "/oper/customize/icform/getcustomerform";
+
+      const { data, code, msg } = await requestPost(url, {
+        dynamic: true,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.groupList = data.groupList;
+        this.fieldList = (function (arr) {
+          let col = [];
+          let ele = [];
+          for (let i = 0; i < arr.length; i++) {
+            let item = arr[i];
+            if (item.itemType == "divider" || i == arr.length - 1) {
+              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
+              );
+            }
+          });
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async getInfo() {
+      const url = "/epmetuser/icresiuser/detail";
+
+      const { data, code, msg } = await requestPost(url, {
+        icResiUserId: this.userId,
+        formCode: "resi_base_info",
+      });
+
+      if (code === 0) {
+        this.info = data.ic_resi_user[0];
+        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) {
+      if (!url) return [];
+
+      const { data, code, msg } = await requestPost(url, {});
+
+      if (code === 0) {
+        return data;
+      } else {
+        return [];
+      }
+    },
+
+    async getXiaoquList() {
+      const url = "/gov/org/icneighborhood/neighborhoodoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        agencyId: this.info.AGENCY_ID,
+        gridId: this.info.GRID_ID,
+      });
+
+      if (code === 0) {
+        this.xiaoquList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getLouList() {
+      const url = "/gov/org/icbuilding/buildingoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        neighborHoodId: this.info.VILLAGE_ID,
+      });
+
+      if (code === 0) {
+        this.louList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getDanyuanList() {
+      const url = "/gov/org/icbuildingunit/unitoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        buildingId: this.info.BUILD_ID,
+      });
+
+      if (code === 0) {
+        this.danyuanList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    async getHomeList() {
+      const url = "/gov/org/ichouse/houseoption";
+
+      const { data, code, msg } = await requestPost(url, {
+        unitId: this.info.UNIT_ID,
+      });
+
+      if (code === 0) {
+        this.homeList = data;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>

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

@@ -304,16 +304,17 @@
               :loading="demand.loading"
               :header="demand.header"
               :list="demand.list"
+              @operate="handleOperateDemandList"
             ></cpt-tb>
 
-            <div class="m-pagination">
+            <div class="m-pagination" v-if="demand.total > demand.pageSize">
               <el-pagination
                 :current-page="demand.pageNo"
                 :page-size="demand.pageSize"
                 :total="demand.total"
                 background
                 layout="prev, pager, next"
-                @current-change="handlePageNoChange_demand"
+                @current-change="handlePageNoChangeDemand"
               >
               </el-pagination>
             </div>
@@ -326,9 +327,71 @@
           <cpt-card>
             <div class="title">
               <img src="@/assets/img/shuju/title-tip.png" />
-              <span>上报事件</span>
+              <a
+                :class="{ 'z-on': showedIncidentOrTopic == 'incident' }"
+                @click="showedIncidentOrTopic = 'incident'"
+                >上报事件</a
+              >
+              <a
+                :class="{ 'z-on': showedIncidentOrTopic == 'topic' }"
+                @click="showedIncidentOrTopic = 'topic'"
+                >发布话题</a
+              >
+            </div>
+            <div class="list-wrap" v-show="showedIncidentOrTopic == 'incident'">
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'incident' + index"
+                  v-for="(item, index) in incident.list"
+                  @click="handleClickIncident(index)"
+                >
+                  <div class="item-title">{{ item.eventContent }}</div>
+                  <div class="item-date">{{ item.reportTime }}</div>
+                </div>
+              </div>
+
+              <div
+                class="m-pagination"
+                v-if="incident.total > incident.pageSize"
+              >
+                <el-pagination
+                  :current-page="incident.pageNo"
+                  :page-size="incident.pageSize"
+                  :total="incident.total"
+                  background
+                  layout="prev, pager, next"
+                  @current-change="handlePageNoChangeIncident"
+                >
+                </el-pagination>
+              </div>
+            </div>
+
+            <div class="list-wrap" v-show="showedIncidentOrTopic == 'topic'">
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'topic' + index"
+                  v-for="(item, index) in topic.list"
+                  @click="handleClickTopic(index)"
+                >
+                  <div class="item-title">{{ item.eventContent }}</div>
+                  <div class="item-date">{{ item.reportTime }}</div>
+                </div>
+              </div>
+
+              <div class="m-pagination" v-if="topic.total > topic.pageSize">
+                <el-pagination
+                  :current-page="topic.pageNo"
+                  :page-size="topic.pageSize"
+                  :total="topic.total"
+                  background
+                  layout="prev, pager, next"
+                  @current-change="handlePageNoChangeTopic"
+                >
+                </el-pagination>
+              </div>
             </div>
-            <div class="list"></div>
           </cpt-card>
         </div>
 
@@ -338,11 +401,67 @@
               <img src="@/assets/img/shuju/title-tip.png" />
               <span>积分记录</span>
             </div>
-            <div class="list"></div>
+
+            <div class="list-wrap">
+              <div class="list">
+                <div
+                  class="item"
+                  :key="'point' + index"
+                  v-for="(item, index) in point.list"
+                  @click="handleClickPoint(index)"
+                >
+                  <div class="item-row">
+                    <div class="item-l">
+                      <div class="item-point">{{ item.point }}</div>
+                    </div>
+                    <div class="item-r">
+                      <div class="item-title">{{ item.title }}</div>
+                      <div class="item-date">{{ item.dateTime }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="m-pagination" v-if="point.total > point.pageSize">
+                <el-pagination
+                  :current-page="point.pageNo"
+                  :page-size="point.pageSize"
+                  :total="point.total"
+                  background
+                  layout="prev, pager, next"
+                  @current-change="handlePageNoChangePoint"
+                >
+                </el-pagination>
+              </div>
+            </div>
           </cpt-card>
         </div>
       </div>
     </div>
+
+    <demand-info
+      v-show="showedDemandInfo"
+      v-if="userId"
+      :userId="userId"
+      :gridName="info.gridName"
+      @close="showedDemandInfo = false"
+    />
+
+    <incident-info
+      v-show="incident.showedInfo"
+      v-if="userId"
+      :userId="userId"
+      :gridName="info.gridName"
+      @close="incident.showedInfo = false"
+    />
+
+    <topic-info
+      v-show="topic.showedInfo"
+      v-if="userId"
+      :userId="userId"
+      :gridName="info.gridName"
+      @close="topic.showedInfo = false"
+    />
   </div>
 </template>
 
@@ -351,6 +470,9 @@ import { Loading } from "element-ui"; //引入Loading服务
 import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+import demandInfo from "@/views/modules/visual/basicinfo/cpts/demand-info";
+import incidentInfo from "@/views/modules/visual/basicinfo/cpts/incident-info";
+import topicInfo from "@/views/modules/visual/basicinfo/cpts/topic-info";
 import cptTb from "@/views/modules/visual/cpts/tb";
 
 export default {
@@ -358,10 +480,12 @@ export default {
   data() {
     return {
       showedMoreInfo: false,
+      showedDemandInfo: false,
 
       userId: "",
 
       info: {
+        epmetUserId: "",
         financialSituation: { monthlyIncome: "", retirementAmount: "" },
         gridName: "",
         houseInfo: [],
@@ -413,10 +537,44 @@ export default {
         ],
         header: ["序号", "服务时间", "需求类型", "需求内容", "状态", "操作"],
         list: [],
+        srcList: [],
+        currentIndex: 0,
         pageSize: 5,
         pageNo: 1,
         total: 0,
       },
+
+      showedIncidentOrTopic: "incident",
+
+      incident: {
+        loading: false,
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        showedInfo: false,
+        currentIndex: 0,
+      },
+
+      topic: {
+        loading: false,
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        showedInfo: false,
+        currentIndex: 0,
+      },
+
+      point: {
+        loading: false,
+        list: [],
+        pageSize: 10,
+        pageNo: 1,
+        total: 0,
+        showedInfo: false,
+        currentIndex: 0,
+      },
     };
   },
 
@@ -434,6 +592,9 @@ export default {
     cptCard,
     peopleMore,
     cptTb,
+    demandInfo,
+    incidentInfo,
+    topicInfo
   },
 
   watch: {
@@ -454,10 +615,13 @@ export default {
   methods: {
     handleSearch() {},
 
-    getApiData() {
+    async getApiData() {
-      this.getInfo();
+      await this.getInfo();
       this.getHouseInfo();
       this.getDemandData();
+      this.getIncidentData();
+      this.getTopicData();
+      this.getPointData();
     },
 
     toUserInfo(uid) {
@@ -496,16 +660,23 @@ export default {
       }
     },
 
-    handlePageNoChange_demand(val) {
+    handlePageNoChangeDemand(val) {
       this.demand.pageNo = val;
       this.getDemandData();
     },
 
+    handleOperateDemandList(index, type) {
+      if (type == "查看") {
+        this.showedDemandInfo = true;
+        this.demand.currentIndex = index;
+      }
+    },
+
     //加载组织数据
     async getDemandData() {
-      const url =
+      const url = "/heart/userdemand/mydemand";
-        "http://yapi.elinkservice.cn/mock/245/heart/userdemand/mydemand";
       let params = {
+        epmetUserId: this.info.epmetUserId,
         userId: this.userId,
         pageNo: this.demand.pageNo,
         pageSize: this.demand.pageSize,
@@ -520,12 +691,109 @@ export default {
           return [
             { type: "index" },
             item.wantServiceTime,
-            item.content,
             item.categoryName,
+            item.content,
             item.statusName,
             { type: "operate", list: ["查看"] },
           ];
         });
+        this.demand.srcList = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChangeIncident(val) {
+      this.incident.pageNo = val;
+      this.getIncidentData();
+    },
+
+    handleClickIncident(index) {
+      this.incident.showedInfo = true;
+      this.incident.currentIndex = index;
+    },
+
+    //加载组织数据
+    async getIncidentData() {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/gov/project/resievent/pageuserreported";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.incident.pageNo,
+        pageSize: this.incident.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.incident.loading = false;
+
+      if (code === 0) {
+        this.incident.total = data.total;
+        this.incident.list = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChangeTopic(val) {
+      this.topic.pageNo = val;
+      this.getTopicData();
+    },
+
+    handleClickTopic(index) {
+      this.topic.showedInfo = true;
+      this.topic.currentIndex = index;
+    },
+
+    //加载组织数据
+    async getTopicData() {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/gov/project/resievent/pageuserreported";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.topic.pageNo,
+        pageSize: this.topic.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.topic.loading = false;
+
+      if (code === 0) {
+        this.topic.total = data.total;
+        this.topic.list = data.list;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    handlePageNoChangePoint(val) {
+      this.point.pageNo = val;
+      this.getPointData();
+    },
+
+    handleClickPoint(index) {
+      this.point.showedInfo = true;
+      this.point.currentIndex = index;
+    },
+
+    //加载组织数据
+    async getPointData() {
+      const url =
+        "http://yapi.elinkservice.cn/mock/245/point/resi/point/pageuserpoint";
+      let params = {
+        epmetUserId: this.info.epmetUserId,
+        userId: this.userId,
+        pageNo: this.point.pageNo,
+        pageSize: this.point.pageSize,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      this.point.loading = false;
+
+      if (code === 0) {
+        this.point.total = data.total;
+        this.point.list = data.list;
       } else {
         this.$message.error(msg);
       }

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

@@ -1,5 +1,5 @@
 
-export function pieOption () {
+export function pieOption (_charts) {
 const center= ['50%', '250px']
   return {
     title: {
@@ -47,19 +47,14 @@ const center= ['50%', '250px']
         center: center,
         radius: ['55%', '55.3%'],
         label: {
-          normal: {
           show: false
-          }
         },
         labelLine: {
-          normal: {
           show: false
-          }
         },
         data: [{
           value: 360,
           itemStyle: {
-            normal: {
             color: 'rgba(40, 101, 250, 0)',
             width:0,
             borderColor: 'rgba(40, 101, 250, 0.5)',
@@ -67,7 +62,6 @@ const center= ['50%', '250px']
             borderType: 'dotted'
           }
         }
-        }
         ]
       },
 
@@ -85,33 +79,55 @@ const center= ['50%', '250px']
         left: 'center',
         width: 400,
         label: {
-           position: 'outer',
+          // show: false,
-          // alignTo: 'edge',
+          position: 'outside',
-          formatter: '{a|{c}}\n\n{name|{b}}',
+          alignTo: 'edge',
-          // minMargin: 100,
+          // formatter: '{a|{c}}\n\n{name|{b}}',
-          // edgeDistance: 0,
+          formatter: '{a|{c}}\n{r|}\n{name|{b}}',
-          // lineHeight: 20,
+          minMargin: 5,
+          edgeDistance: 1,
+          lineHeight: 15,
           color: '#fff',
           fontSize: 12,
-           distanceToLabelLine: -60,
+          // distanceToLabelLine: -60,
           rich: {
-            a: {
+            name: {
-              fontSize: '30px',
+              padding: [0, 6, 0, 6]
-              color: ' #00F5FE',
-              
             },
-            b: {
+            a: {
-              lineHeight: 0,
+              fontSize: 30,
-              fontSize: '20px',
+              color: '#fff',
-              color: ' #FFFFFF'
+              padding: [0, 6, 6, 6]
-
+            },
+            r: {
+              backgroundColor: 'auto',
+              borderRadius: 6,
+              width: 6,
+              height: 6,
+              // padding: [3, 3, 0, -12]
             }
           }
         },
         labelLine: {
+          show: false,
           smooth: 0.2,
           length: 30,
-          length2: 90
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          if (points) {
+            points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          }
+          
+          return {
+            labelLinePoints: points
+          };
         },
         itemStyle: {
           // color:function(params) {

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

@@ -172,6 +172,7 @@ export default {
         pageSize: 10,
         pageNo: 1,
         total: 0,
+        pieChartS: null
       },
 
       casOptions: [],
@@ -229,8 +230,10 @@ export default {
       }
     },
 
-    pieInitOk () {
+    methods: {
-      console.log('pie准备好了')
+      pieInitOk (dom) {
+        console.log('pie准备好了', dom)
+        this.pieChartS = dom
         this.pieInitState = true
 
       },
@@ -256,6 +259,10 @@ export default {
         };
 
         const { data, code, msg } = await requestPost(url, params);
+        // 获取pieChart配置
+        this.pieOption = pieOption(this.pieChartS)
+        this.pieOption.title.text = this.pieTotal
+        this.pieOption.series[1].data = this.pieData
 
         if (code === 0) {
           // 获取pieChart配置
@@ -309,6 +316,19 @@ export default {
               }
 
             };
+            console.log('zhilma')
+            // element.labelLayout = (params) => {
+            //   const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
+            //   const points = params.labelLinePoints;
+            //   console.log('isLeft', isLeft, points)
+            //   // Update the end point.
+            //   points[2][0] = isLeft
+            //     ? params.labelRect.x
+            //     : params.labelRect.x + params.labelRect.width;
+            //   return {
+            //     labelLinePoints: points
+            //   };
+            // }
 
           } else {
             element.label = {

src/views/modules/visual/communityParty/community.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="warning-box">
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          区域化党建
+        </div>
+      </div>
+      <div class="second-title">
+        <div class="second-title-label">党建单位分类统计</div>
+        <div class="second-select">
+          <el-select v-model="value2" clearable placeholder="请选择">
+            <el-option
+              v-for="item in headerList"
+              :key="item.coulmn"
+              :label="item.title"
+              :value="item.coulmn">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="second-select">
+          <el-date-picker
+            v-model="value2"
+            type="date"
+            prefix-icon="el-icon-caret-bottom"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd">
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="box-wr box-wr-400">
+        <div class="box-left">
+          <div class="box-left-item">
+            <div class="box-label">组织单位</div>
+            <div class="box-num">1233</div>
+          </div>
+          <div class="box-left-item">
+            <div class="box-label">组织活动</div>
+            <div class="box-num">1233</div>
+          </div>
+        </div>
+        <div class="box-right">
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerList"
+              :tableData="tableData"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="pageNo"
+                :page-size="pageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandleNew"
+                @current-change="pageCurrentChangeHandleNew"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="second-title">
+        <div class="second-title-label">党建单位分类统计</div>
+      </div>
+
+      <div class="box-wr">
+        <div class="box-left box-left-w400">
+          <div v-for="item in partyItem" :key="item.value" class="box-left-item">
+            <div class="box-label">{{ item.name }}</div>
+            <div class="box-num" :style="'color:' + item.color">{{ item.value }}</div>
+          </div>
+          
+        </div>
+        <div class="box-right">
+         <div class="box-map">这是地图容器</div>
+         <div class="map-tips">
+            <div v-for="item in partyItem" :key="item.value" class="map-tips-item">
+              <div class="map-tips-icon">
+                <img :src="item.icon" />
+              </div>
+              <div class="map-tips-label">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable,
+  },
+  data() {
+    return {
+      warningList: [],
+      headerList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "需求类型", coulmn: 'gridName' },
+        { title: "具体内容", coulmn: 'buildingName' },
+        { title: "上报情况", coulmn: 'neighborhoodName' },
+        { title: "上报人", coulmn: 'residentNames' },
+        { title: "上报时间", coulmn: 'residentNames' },
+        { title: "是否认领", coulmn: 'residentNames' },
+        { title: "认领方", coulmn: 'residentNames' },
+        { title: "认领时间", coulmn: 'residentNames' }
+      ],
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      value2: '',
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+      partyItem: [
+        {
+          name: '楼宇党建',
+          value: 1,
+          color: 'rgba(250, 32, 10, 1)',
+          icon: require('../../../../assets/img/shuju/measure/ly@2x.png')
+        }, {
+          name: '机关直属部门',
+          value: 2,
+          color: 'rgba(65, 181, 104, 1)',
+          icon: require('../../../../assets/img/shuju/measure/jgzs@2x.png')
+        }, {
+          name: '两新党建',
+          value: 3,
+          color: 'rgba(251, 177, 4, 1)',
+          icon: require('../../../../assets/img/shuju/measure/lxdj@2x.png')
+        }, {
+          name: '辖区单位',
+          value: 4,
+          color: 'rgba(80, 194, 237, 1)',
+          icon: require('../../../../assets/img/shuju/measure/xq@2x.png')
+        }, {
+          name: '其他',
+          value: 5,
+          color: 'rgba(192, 21, 195, 1)',
+          icon: require('../../../../assets/img/shuju/measure/qita.png')
+        }
+      ],
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    this.getBuildingwarnlist();
+  },
+  methods: {
+    
+    
+    onClickList(index, level) {
+      this.activeIndex = index;
+      this.activeLevel = level;
+      this.pageNo = 1;
+      this.getUserwarnlist();
+    },
+    //具体人员列表
+    async getUserwarnlist() {
+      const { activeIndex, activeLevel, warningList } = this;
+      const reqItem = warningList[activeIndex];
+      let tableData = [];
+      const url = "/epmetuser/statsresiwarn/userwarnlist";
+      let params = {
+        configId: reqItem.configId,
+        buildingIdList: reqItem["buildingIdList" + activeLevel],
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1,
+            residentNames: item.residentNames || "暂无"
+          }
+        });
+        this.tableData = tableData;
+        this.total = data.total;
+      } else {
+      }
+    },
+    // 【人员预警】 楼宇预警数量列表
+    async getBuildingwarnlist() {
+      const url = "/epmetuser/statsresiwarn/buildingwarnlist";
+      let params = {
+        agencyId: this.$store.state.user.agencyId,
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.warningList = data;
+        this.visibleLoading = false;
+        this.getUserwarnlist();
+      } else {
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getUserwarnlist();
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.warning-box {
+  display: flex;
+  .card-wr {
+    flex: 1;
+  }
+  .card-wr:last-child {
+    margin-left: 20px;
+  }
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 16px;
+    font-weight: 800;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+  
+}
+.second-title {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  .second-title-label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .second-title-label::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865FA;
+    border-radius: 50%;
+  }
+  .second-select {
+    margin: 0 10px 0 40px;
+    ::v-deep .el-input {
+      width: 120px;
+      height: 36px;
+      .el-input__inner {
+        height: 100%;
+        padding: 0 10px;
+        color: #fff;
+        line-height: 36px;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+      }
+      
+      .el-icon-arrow-up:before {
+        content: "\e78f"
+      }
+      // .el-select__caret:before {
+      //   content: '\E790'
+      // }
+    }
+    ::v-deep .el-date-editor {
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
+  }
+  .second-select:last-child {
+    margin-left: 0;
+  }
+}
+
+.box-wr {
+  display: flex;
+  box-sizing: border-box;
+  .box-left {
+    flex-shrink: 0;
+    display: flex;
+    .box-left-item {
+      .box-label {
+        font-size: 16px;
+        color: rgba(255, 255, 255, .72);
+      }
+      .box-num {
+        font-size: 32px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+  .box-right {
+    flex: 1;
+    .box-map {
+      height: 400px;
+      border: 1px solid #2865FA;
+    }
+  }
+  .box-left-w400 {
+    flex-wrap: wrap;
+    width: 400px;
+    box-sizing: border-box;
+    padding-top: 60px;
+    padding-left: 100px;
+    .box-left-item {
+      width: 50%;
+    }
+  }
+}
+.box-wr-400 {
+  height: 400px;
+  .box-left {
+    width: 300px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .box-left-item:last-child {
+      margin-top: 100px;
+    }
+  }
+}
+
+
+.map-tips {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  .map-tips-item {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-right: 40px;
+    .map-tips-icon {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      margin-right: 10px;
+      // background: #DD2719;
+      // border-radius: 2px;
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .map-tips-label {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+
+</style>

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

@@ -29,7 +29,7 @@
         </div>
       </div>
 
-      <div class="card-echart">
+      <!-- <div class="card-echart">
         <div class="card-left">
           <div class="echart-wr">
             <div class="echart-cicle"></div>
@@ -106,6 +106,10 @@
             </div>
           </div>
         </div>
+      </div> -->
+
+      <div class="echarts-container">
+        <div id="echartsBox" class="echarts-boxs"></div>
       </div>
 
       <div class="warning-box-bottom">
@@ -173,218 +177,125 @@ export default {
   async mounted() {
     await nextTick(100);
     this.initCharts()
-    this.initChartType()
+    // this.initChartType()
     this.getBuildingwarnlist();
   },
   methods: {
     initCharts() {
-      const eId = document.getElementById('echartOrg')
+      const eId = document.getElementById('echartsBox')
       let _charts = echarts.init(eId)
+
       let option = {
         tooltip: {
-          show: false,
+          trigger: 'axis',
-          trigger: 'item'
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+          }
         },
         legend: {
-          show: false,
+          top: 'bottom',
-          orient: 'vertical',
+          bottom: 'bottom',
-          top: '40%',
-          left: 'right',
           textStyle: {
             color: '#fff'
           }
         },
-        title: {
+        grid: {
-          text: '12000',  //图形标题，配置在中间对应效果图的80%
+          left: '3%',
-          subtext: '总数',
+          right: '4%',
-          left: "center",
+          bottom: '10%',
-          top: "center",
+          containLabel: true
-          textStyle: {
-            color: "#fff",
-            fontSize: 28,
-            align: "center"
         },
-          subtextStyle: {
+        xAxis: {
-            fontSize: 16,
+          type: 'category',
+          axisLabel: {
             color: '#fff'
-          }
+          },
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false
+          },
+          axisLabel: {
+            color: '#fff'
+          },
+          // axisLine: false
         },
         series: [
           {
-            // name: 'Access From',
+            name: '区域化党建单位',
-            type: 'pie',
+            type: 'bar',
-            // center: ['10%', '50%'],
+            stack: 'total',
-            radius: ['40%', '60%'],
+            // barWidth: 20,
-            avoidLabelOverlap: false,
-            // top: top + '%',
-            // height: '80%',
-            left: 'center',
-            width: 400,
             label: {
-              show: true,
+              show: true
-              position: 'outer',
-              alignTo: 'edge',
-              formatter: '{a|{c}}\n{r|}\n{name|{b}}',
-              minMargin: 5,
-              edgeDistance: 20,
-              lineHeight: 15,
-              color: '#fff',
-              fontSize: 12,
-              // padding: [5],
-              distanceToLabelLine: 10,
-              rich: {
-                name: {
-                  padding: [0, 6, 0, 6]
-                },
-                a: {
-                  fontSize: 15,
-                  color: '#fff',
-                  padding: [0, 6, 0, 6]
-                },
-                r: {
-                  backgroundColor: 'auto',
-                  borderRadius: 6,
-                  width: 6,
-                  height: 6,
-                  // padding: [3, 3, 0, -12]
-                }
-              }
             },
             emphasis: {
+              focus: 'series'
+            },
+            data: [320, 302, 301, 334, 390, 330, 320]
+          },
+          {
+            name: '社会组织',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
             label: {
-                show: true,
+              show: true
-                fontSize: '14',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: true,
-              length: 20,
-              length2: 0,
-              maxSurfaceAngle: 80,
-              lineStyle: {
-                cap: 'round'
-              }
-            },
-            labelLayout: function (params) {
-              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
-              const points = params.labelLinePoints;
-              // Update the end point.
-              points[2][0] = isLeft
-                ? params.labelRect.x
-                : params.labelRect.x + params.labelRect.width;
-              return {
-                labelLinePoints: points
-              };
             },
-            data: [
+            emphasis: {
-              { value: 1048, name: 'Search Engine' },
+              focus: 'series'
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ]
-          }
-        ]
-      }
-      option && _charts.setOption(option);
-
             },
-    initChartType() {
+            data: [120, 132, 101, 134, 90, 230, 210]
-      const eId = document.getElementById('echartType')
-      let _charts = echarts.init(eId)
-      let option = {
-        tooltip: {
-          trigger: 'item'
           },
-        legend: {
+          {
-          show: false,
+            name: '社区自组织',
-          orient: 'vertical',
+            type: 'bar',
-          top: '40%',
+            stack: 'total',
-          left: 'right',
+            // barWidth: 20,
-          textStyle: {
+            label: {
-            color: '#fff'
+              show: true
-          }
             },
-        title: {
+            emphasis: {
-          text: '12000',  //图形标题，配置在中间对应效果图的80%
+              focus: 'series'
-          subtext: '总数',
-          left: "center",
-          top: "center",
-          textStyle: {
-            color: "#fff",
-            fontSize: 28,
-            align: "center"
             },
-          subtextStyle: {
+            data: [220, 182, 191, 234, 290, 330, 310]
-            fontSize: 16,
-            color: '#fff'
-          }
           },
-        series: [
           {
-            // name: 'Access From',
+            name: '志愿者',
-            type: 'pie',
+            type: 'bar',
-            // center: ['10%', '50%'],
+            stack: 'total',
-            radius: ['40%', '60%'],
+            // barWidth: 20,
-            avoidLabelOverlap: false,
-            // top: top + '%',
-            // height: '80%',
-            left: 'center',
-            width: 400,
             label: {
-              position: 'outer',
+              show: true
-              alignTo: 'labelLine',
-              formatter: '{name|{b}}\n{time|{c} 小时}',
-              minMargin: 5,
-              edgeDistance: 20,
-              lineHeight: 15,
-              color: '#fff',
-              fontSize: 15,
-              rich: {
-                time: {
-                  fontSize: 10,
-                  color: '#fff'
-                }
-              }
             },
             emphasis: {
+              focus: 'series'
+            },
+            data: [150, 212, 201, 154, 190, 330, 410]
+          },
+          {
+            name: '未完成',
+            type: 'bar',
+            stack: 'total',
+            // barWidth: 20,
             label: {
-                show: true,
+              show: true
-                fontSize: '14',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: true,
-              length: 20,
-              length2: 0,
-              maxSurfaceAngle: 80
-            },
-            labelLayout: function (params) {
-              const isLeft = params.labelRect.x < _charts.getWidth() / 2;
-              const points = params.labelLinePoints;
-              // Update the end point.
-              points[2][0] = isLeft
-                ? params.labelRect.x
-                : params.labelRect.x + params.labelRect.width;
-              return {
-                labelLinePoints: points
-              };
             },
-            data: [
+            emphasis: {
-              { value: 1048, name: 'Search Engine' },
+              focus: 'series'
-              { value: 735, name: 'Direct' },
+            },
-              { value: 580, name: 'Email' },
+            data: [820, 832, 901, 934, 1290, 1330, 1320]
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ]
           }
         ]
-      }
+      };
+
       option && _charts.setOption(option);
 
     },
+    
     onClickList(index, level) {
       this.activeIndex = index;
       this.activeLevel = level;
@@ -597,4 +508,12 @@ export default {
     }
   }
 }
+
+
+.echarts-boxs {
+  width: 100%;
+  height: 400px;
+}
+
+
 </style>