CZC/operationSupport/src/views/workbench/index.vue

<template>
  <div class="workbench">
    <!-- 头部开始部分 -->
    <div class="header">
      <ul>
        <li
          style="background: linear-gradient(135deg, #488fff 0%, #65dcff 100%)"
          @click="goPath('/communityManagement/index')"
        >
          <!-- <router-link to="sc-operation/propertyManagement/inform.vue" tag="a" target="_blank"> -->
          <div class="header-left">
            <div class="header-left-top">
              <div class="header-icon"></div>
              <div>社区</div>
            </div>
          </div>
          <div class="header-number">{{ houseData.communityTotal }}</div>
          <div class="header-right">
            <img
              src="../../assets/img/img_shequ.png"
              alt=""
            />
          </div>
          <!-- </router-link> -->
        </li>
        <li
          style="background: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%)"
          @click="goPath('/buildingManagement/index')"
        >
          <div class="header-left">
            <div class="header-left-top">
              <div class="header-icon"></div>
              <div>楼栋</div>
            </div>
          </div>
          <div class="header-number">{{ houseData.buildingTotal }}</div>
          <div class="header-right">
            <img
              src="../../assets/img/img_loudong.png"
              alt=""
            />
          </div>
        </li>
        <li
          style="background: linear-gradient(135deg, #f0646c 0%, #f4994e 100%)"
          @click="goPath('/assetManagement/housingManagement/index')"
        >
          <div class="header-left">
            <div class="header-left-top">
              <div class="header-icon"></div>
              <div>房屋</div>
            </div>
          </div>
          <div class="header-number">{{ houseData.houseTotal }}</div>
          <div class="header-right">
            <img
              src="../../assets/img/img_fangwu.png"
              alt=""
            />
          </div>
        </li>
        <li
          style="background: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%)"
          @click="goPath('/assetManagement/shopManagement/index')"
        >
          <div class="header-left">
            <div class="header-left-top">
              <div class="header-icon"></div>
              <div>商铺</div>
            </div>
          </div>
          <div class="header-number">{{ houseData.shopsTotal }}</div>
          <div class="header-right">
            <img
              src="../../assets/img/img_shangpu.png"
              alt=""
            />
          </div>
        </li>
        <li
          style="background: linear-gradient(135deg, #884dd2 0%, #df63cc 100%)"
          @click="goPath('/ownerManagement/index')"
        >
          <div class="header-left">
            <div class="header-left-top">
              <div class="header-icon"></div>
              <div>住户</div>
            </div>
          </div>
          <div class="header-number">{{ houseData.residentTotal }}</div>
          <div class="header-right">
            <img
              src="../../assets/img/img_zhuhu.png"
              alt=""
            />
          </div>
        </li>
      </ul>
    </div>
    <!-- 头部结束部分 -->

    <!-- 中间开始部分 -->
    <div class="center">
      <div class="center-left">
        <div class="center-left-text">快速操作</div>
        <ul>
          <!-- <li @click="goPath('/communityManagement/pageJump/AddOrEdit')"> -->
          <li @click="goPathBack('/communityManagement/index', true)">
            <div>
              <img
                src="../../assets/img/icon_shequ.png"
                alt=""
              />
            </div>
            <span>添加社区</span>
          </li>
          <li @click="goPathBack('/buildingManagement/index', true)">
            <div>
              <img
                src="../../assets/img/icon_loudong.png"
                alt=""
              />
            </div>
            <span>添加楼栋</span>
          </li>
          <li @click="goPathBack('/assetManagement/housingManagement/index', true)">
            <div>
              <img
                src="../../assets/img/icon_fangwu.png"
                alt=""
              />
            </div>
            <span>添加房屋</span>
          </li>
          <li @click="goPathBack('/assetManagement/shopManagement/index', true)">
            <div>
              <img
                src="../../assets/img/icon_shangpu.png"
                alt=""
              />
            </div>
            <span>添加商铺</span>
          </li>
          <li @click="goPathBack('/ownerManagement/index', true)">
            <div>
              <img
                src="../../assets/img/icon_zhuhu.png"
                alt=""
              />
            </div>
            <span>添加住户</span>
          </li>
        </ul>
      </div>
      <div class="center-left center-right">
        <div class="center-left-text">待处理事项</div>
        <ul>
          <li @click="goPath('/ownerManagement/ownerReview/index', true)">
            <div>
              <div class="header-left">
                <div class="header-left-top">
                  <div class="header-icon center-icon"></div>
                  <div class="center-right-text">待审核业主</div>
                </div>
              </div>
              <div class="header-number center-number">{{ pendData.ownerReviewedTotal }}</div>
              <div class="center-right-image">
                <div></div>
              </div>
            </div>
          </li>
          <li @click="goPath('/propertyManagement/index', true)">
            <div>
              <div class="header-left">
                <div class="header-left-top">
                  <div class="header-icon center-icon"></div>
                  <div class="center-right-text">待处理投诉</div>
                </div>
              </div>
              <div class="header-number center-number">{{ pendData.complaintsTotal }}</div>
              <div class="center-right-image">
                <div></div>
              </div>
            </div>
          </li>
          <li @click="goPath('/workOrders/index', true)">
            <div>
              <div class="header-left">
                <div class="header-left-top">
                  <div class="header-icon center-icon"></div>
                  <div class="center-right-text">待处理工单</div>
                </div>
              </div>
              <div class="header-number center-number">{{ pendData.workOrderTotal }}</div>
              <div class="center-right-image">
                <div></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 中间结束部分 -->

    <!-- 底部开始部分 -->
    <div class="footer">
      <div class="footer-left">
        <div class="footer-left-text">
          <div>社区公告</div>
          <div @click="goPath('/propertyManagement/inform')">查看更多&nbsp;></div>
        </div>
        <ul v-if="informData.length > 0">
          <li
            v-for="(item, index) in informData"
            :key="index"
            @click="clickDatail(item.id)"
          >
            <div class="footer-content">
              <div>[{{ item.title }}]</div>
              <div>{{ item.content | filterHtml }}</div>
              <!-- <div v-html="item.content"></div> -->
            </div>
            <div>{{ item.pubDate }}</div>
          </li>
        </ul>
        <div
          v-else
          class="no-data"
        >暂无公告</div>
      </div>
      <div
        class="footer-left"
        style="margin-right: 0"
      >
        <div class="footer-left-text">
          <div>告警信息</div>
          <div @click="goPath('/alarmManagement/details')">查看更多&nbsp;></div>
        </div>
        <div v-if="warnData.length > 0">
          <ul>
            <li
              @click="goPath('/alarmManagement/details', true, item.id)"
              v-for="(item, index) in warnData"
              :key="index"
            >
              <div class="footer-content">
                <div>[{{ item.name }}]</div>
                <div>{{ item.alarmContent }}</div>
              </div>
              <div>{{ item.alarmStartTime }}</div>
            </li>
          </ul>
        </div>
        <div
          v-else
          class="no-data"
        >暂无告警信息</div>
      </div>
    </div>
    <!-- 底部结束部分 -->
    <!-- 详情显示 -->
    <div class="dialog-info">
      <el-dialog
        :visible.sync="showRight"
        width="1086px"
        :title="rowDetail.type == 0 ? '物业通知详情' : '社区活动详情'"
        :close-on-press-escape="true"
        :close-on-click-modal="true"
        @close="handleDialogClose"
      >
        <previe-inform
          :dataDetail="rowDetail"
          :filePath="filePath"
          :successImageLists="successImageLists"
          :houseData="houseData"
          :peopleData="peopleData"
          :houseDataNames="houseDataNames"
          :houseDataNamesPeople="houseDataNamesPeople"
          ref="previeInform"
          :showrightPhone="showrightPhone"
          :userType="userType"
        ></previe-inform>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import previeInform from '../propertyManagement/common/previeInform';

export default {
  components: { previeInform },
  data () {
    return {
      houseData: [],
      warnData: [],
      informData: [],
      pendData: [],
      // 详情显示数据
      rowDetail: [],
      showrightPhone: false,
      showRight: false,
      PeopleNames: '',
      houseDataNames: '',
      userType: '',
      houseDataNamesPeople: ''
    };
  },
  created () {
    this.getHouseData();
    this.getWarnData();
    this.getInformData();
    this.getPendData();
  },

  methods: {
    // 弹框关闭事件
    handleDialogClose (e) {
      console.log('弹框关闭事件', e);
      this.$refs.previeInform.closeDialog();
    },
    /** 查看通知公告详情*/
    clickDatail (val) {
      // this.rowDetail = [];
      this.$http.get('/czc-community/notice/find/' + val).then((res) => {
        if (res.status === 0) {
          this.rowDetail = res.data;
          let treeData = JSON.parse(res.data.treeData);
          this.rowDetail.treeData = JSON.parse(treeData[0]);
          this.rowDetail.treeDataPeople = JSON.parse(treeData[1]);
          let userType = '';
          let arr1 = this.rowDetail.treeData;
          let arr2 = this.rowDetail.treeDataPeople;
          if (arr1.length > 0 && arr2.length > 0) {
            userType = 2;
          } else if (arr1.length > 0) {
            userType = 0;
          } else {
            userType = 1;
          }
          this.userType = userType;
          if (userType == 0) {
            this.getOrgTreeList();
          } else if (userType == 1) {
            this.getPeopleList();
          } else {
            this.getOrgTreeList();
            this.getPeopleList();
          }
          this.filePath = JSON.parse(res.data.filePath);
          this.successImageLists = JSON.parse(res.data.themePictrue);

          this.showRight = true;
          this.showrightPhone = true;
        } else {
          return this.$message('获取详情失败！请稍后重试');
        }
      });
    },
    filterPeople (arr) {
      arr.map((item, index) => {
        if (item.children && item.children.length > 0) {
          this.filterPeople(item.children);
        } else if (item.children == null) {
          this.filterArrPeople(arr, item, index);
        }
      });
    },
    filterArrPeople (arr, item, index) {
      if (!this.rowDetail.treeDataPeople.includes(Number(item.id))) {
        arr.splice(index, 1);
        arr.map((item) => {
          this.filterArrPeople(arr, item, index);
        });
      }
    },
    filterPeopleName (array) {
      console.log('====================================');
      console.log(' filterPeopleName(array', array);
      console.log('====================================');
      var that = this;
      // array.map((item) => {
      //     if (item.children && item.children.length > 0) {
      //         that.filterName(item.children);
      //         that.houseNames.push(item.name);
      //     } else if (item.type == 'room') {
      //         that.houseNames.push(item.name);
      //     }
      // });
      array.map((item) => {
        if (item.children) {
          that.filterPeopleName(item.children);
        } else if (item.children == null) {
          that.PeopleNames.push(item.value);
        }
      });
    },
    // 获取人员
    getPeopleList () {
      this.PeopleNames = [];
      this.$http.get('/czc-user-center/user/findUserList').then(({ status, data, msg }) => {
        if (status === 0) {
          this.peopleData = data;
          this.filterPeople(this.peopleData);
          this.filterPeopleName(this.peopleData);
          this.clearTreeChildrenPeople(data);
          this.houseDataNamesPeople = this.PeopleNames.toString();
        } else {
          this.$message(warning, msg);
        }
      });
    },
    clearTreeChildrenPeople (arr) {
      arr.map((item, index) => {
        if (!!item.children && item.children.length > 0) {
          this.clearTreeChildrenPeople(item.children);
        } else {
          if (!!item.children && item.children.length == 0) {
            this.clearTreeChildrenPeopleArr(arr, index);
          }
        }
      });
    },
    clearTreeChildrenPeopleArr (arr, index) {
      arr.splice(index, 1);
      arr.map((item, indexs) => {
        if (!!item.children && item.children.length == 0) {
          this.clearTreeChildrenPeopleArr(arr, indexs);
        }
      });
    },
    dimension (arr) {
      arr.map((item, index) => {
        if (item.children) {
          this.dimension(item.children);
        } else if (item.type == 'room') {
          this.filterArr(arr, item, index);
        }
      });
    },
    filterArr (arr, item, index) {
      if (!this.rowDetail.treeData.includes(Number(item.value))) {
        arr.splice(index, 1);
        arr.map((item) => {
          this.filterArr(arr, item, index);
        });
      }
    },
    filterName (array) {
      var that = this;
      array.map((item) => {
        if (item.children && item.children.length > 0) {
          that.houseNames.push(item.name);
          that.filterName(item.children);
        } else if (item.type == 'room') {
          that.houseNames.push(item.name);
        }
      });
    },
    clearTreeChildren (arr) {
      arr.map((item, index) => {
        if (!!item.children && item.children.length > 0) {
          this.clearTreeChildren(item.children);
        } else {
          if (!!item.children) {
            arr.splice(index, 1);
          }
        }
      });
    },

    // 获取房间
    getOrgTreeList () {
      this.houseNames = [];
      this.$http
        .get('/czc-community/assets/tree/community/find', { buildingType: this.buildingType })
        .then(({ status, data, msg }) => {
          if (status === 0 && data) {
            var arr = data.filter((item) => {
              return item.id == this.rowDetail.communityId;
            });

            if (arr.length > 0) {
              this.dimension(arr);
              this.clearTreeChildren(arr);
              this.houseData = arr;
              this.filterName(this.houseData);
              this.houseDataNames = this.houseNames.toString();
            }
          }
        });
    },

    // 打开新页  跳转的路径
    goPath (path, showDialog, id) {
      this.$router.push({ path, query: { showDialog: showDialog, id: id } });
      // let routeData = this.$router.resolve({
      //     path: path,
      //     query: {
      //         showDialog: showDialog,
      //         id: id
      //     }
      // });
      // window.open(routeData.href, '_blank');
    },
    // 跳转路由页面 返回
    goPathBack (path, showDialog, id) {
      this.$router.push({ path, query: { showDialog: showDialog, id: id } });
    },

    // 获取待处理事项
    getPendData () {
      this.$http.get('/czc-community/Workbench/pendingMatters').then((res) => {
        if (res.status == 0) {
          this.pendData = res.data;
        } else {
          this.$message.warning('获取待处理事项失败');
        }
      });
    },
    // 获取房屋信息
    getHouseData () {
      this.$http.get('/czc-community/Workbench/totalHouseInfo').then((res) => {
        if (res.status == 0) {
          this.houseData = res.data;
        } else {
          this.$message.warning('获取房屋信息失败');
        }
      });
    },
    // 获取告警信息
    getWarnData () {
      this.$http.get('/czc-community/Workbench/getWaringInfo').then((res) => {
        if (res.status == 0) {
          this.warnData = res.data;
        } else {
          this.$message.warning('获取告警信息失败');
        }
      });
    },

    // 获取通知信息
    getInformData () {
      this.$http.get('/czc-community/Workbench/getNoticeInfo').then((res) => {
        if (res.status == 0) {
          let data = res.data;
          this.informData = data;
        } else {
          this.$message.warning('获取通知信息失败');
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
/deep/ .el-dialog__body {
    padding: 0;
}
.el-dialog__header {
    background-color: #f8fcff;
}
/deep/ .detail .prev-detail-right {
    left: 11% !important;
}
</style>