epmet-work-pc-chengyang/src/views/modules/visual/plugin/power/organization.vue

<template>
  <div class="warning-box">
    <cpt-card>
      <div class="card-title">
        <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          组织架构
        </div> 
      </div>
      <div class="card-panel">
        <div class="card-left">
          <!-- <div class="card-item-title">小标题</div> -->
          <div class="card-left-top">
            <screen-org-tree :list="list" @onClickNode="onClickNode"></screen-org-tree>
          </div>
          <div class="card-left-bottom">
            <screen-table :headerStyle="headerStyle"
                          :headerList="headerList"
                          :tableContentStyle="headerStyle"
                          :tableData="tableData"
                          :visibleLoading="visibleLoading"
                          :operate="true"
                          @look="handleLook"></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 class="card-right">
          <div class="card-right-top">
            <screen-top-count :colorIndex="item.index" v-for="(item, key) in countList" :key="key">
                <template v-slot:number>{{item.value}}</template>
                <template v-slot:title>{{item.title}}</template>
            </screen-top-count>
          </div>
          <div class="card-title" style="margin-left: 20px; margin-bottom: 20px; margin-top: 20px;">
            <img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
            <div class="title-label">
              网格分布
            </div> 
          </div>
          <div class="card-right-bottom">
            <screen-org-map></screen-org-map>
            <div class="legend">
              <div class="legend-item">
                <img src="../../../../../assets/img/plugins/danghui.png" class="legend-item-icon">
                <div class="legend-item-text">党群服务站</div>
              </div>
              <div class="legend-item">
                <img src="../../../../../assets/img/plugins/louyuanxiaozu.png" class="legend-item-icon">
                <div class="legend-item-text">楼院党小组</div>
              </div>
              <div class="legend-item">
                <img src="../../../../../assets/img/plugins/dangyuanzhongxinhu.png" class="legend-item-icon">
                <div class="legend-item-text">党员中心户</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </cpt-card>
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick"
import cptCard from "@/views/modules/visual/cpts/card"
import screenMap from "@/views/modules/visual/components/screen-map"
import screenTable from "../../components/screen-table/index"
import screenOrgMap from './components/screen-org-map.vue'
import screenOrgTree from './components/screen-org-tree.vue'
import screenTopCount from './components/screen-top-count.vue'
import { requestPost } from "@/js/dai/request"

export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    screenMap,
    screenOrgMap,
    screenOrgTree,
    screenTopCount
  },
  data() {
    return {
      headerList: [
        { title: "序号", coulmn: 'index', width: '100px' },
        { title: "党员", coulmn: 'ownerName' },
        { title: "地址", coulmn: 'address' }
      ],
      headerStyle: [
        { width: '100px' },
        { width: '200px' },
        { width: '400px' }
      ],
      tableData: [
        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
      ],
      agencyId: '',
      noInit: false,
      visibleLoading: true,
      pageNo: 1,
      pageSize: 5,
      total: 0,
      list: [],
      countList: {
        gridNum: { index: 0, title: '网格党支部', value: '0' },
        groupNum: { index: 1, title: '楼院党小组', value: '0' },
        kernelHouseHoldNum: { index: 2, title: '党员中心户', value: '0' },
        partyMemberNum: { index: 3, title: '党员数', value: '0' },
        serviceStationNum: { index: 4, title: '网格党群服务站实体阵地数', value: '0' },
        volunteerTeamNum: { index: 5, title: '志愿者队伍', value: '0' }
      },
      axisStructId: '', // 动力主轴节点
    }
  },
  async mounted() {
    this.showInfo = false
    // const { user } = this.$store.state
    // this.agencyId = user.agencyId
    // console.log('agencyId-------', this.agencyId)
    this.agencyId = '1495655378069753857'
    this.axisStructId = '1517389077596463106'
    await nextTick(100)
    this.getStructTree()
    this.getCount()
    this.getMapData()
  },
  methods: {
    onClickNode (e) {
      this.axisStructId = e.id
      this.getList()
    },
    async handleLook (val) {
      console.log(val.id)
    },
    pageSizeChangeHandleNew (val) {
      this.pageNo = 1
      this.pageSize = val
      this.getList()
    },
    pageCurrentChangeHandleNew (val) {
      this.pageNo = val
      this.getList()
    },
    getList() {
      this.tableData = []
      this.visibleLoading = true
      let params = {
        axisStructId: this.axisStructId,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      }
      const url = "/pli/power/data/kernelHousehold/list"
      this.$http.post(url, params).then(res => {
        this.total = parseInt(res.data.total)
        this.tableData = res.data.data.map((item, index) => {
          return {
            ...item,
            index: index + 1
          }
        })
        this.visibleLoading = false
      }).catch(err => {
        this.$message.error(err)
      })
    },
    async getCount() {
      const url = "/pli/power/data/axis/statistics"
      let params = {
        agencyId: this.agencyId
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        Object.keys(this.countList).forEach(item => {
          this.countList[item].value = data[item]
        })
      } else {
        this.$message.error(msg)
      }
    },
    async getStructTree() {
      const url = "/pli/power/data/axis/structTree"
      let params = {
        agencyId: this.agencyId
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.list = data
        this.axisStructId = this.list[0].id
        this.getList()
      } else {
        this.$message.error(msg)
      }
    },
    getMapData() {
      let params = {
        axisStructId: this.axisStructId,
        limit: 99
      }
      const url = "/pli/power/data/kernelHousehold/listPosition"
      this.$http.post(url, params).then(res => {
        console.log(res.data.data)
      }).catch(err => {
        this.$message.error(err)
      })
    },
    // handleClickRow(val) {
    //   console.log('click-row----', val)
    //   this.$router.push({
    //     path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
    //   })
    // },
  },
}
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style lang="scss" scoped>
.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: 20px;
    font-weight: 800;
    ::v-deep .el-input {
      width: 180px;
      .el-input__inner {
        font-size: 18px;
        color: #fff;
        background: #06186d;
        border: 1px solid #1a64cc;
      }
      .el-icon-arrow-down::before {
          content: "\e790";
      }
    }
  }
}
.card-panel {
  display: flex;
  margin-top: 10px;
  height: 100%;
  .card-left {
    position: relative;
    flex: 1;
    height: 100%;
    &-top {
      width: 100%;
      height: 550px;
      display: flex;
    }
    &-bottom {
      width: 100%;
      height: calc(100% - 550px);
      box-sizing: border-box;
      margin: 0;
      margin-top: 30px;
      .pagination {
        box-sizing: border-box;
        margin-top: 20px;
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background: #0266d1;
          color: #000d3f;
        }

        /deep/ .el-pagination .el-pager li {
          background: #002e74;
        }

        /deep/ .el-pagination .btn-prev {
          background: #002e74;
        }

        /deep/ .el-pagination .btn-next {
          background: #002e74;
        }
      }
      /deep/ .warning-table .table {
        min-height: 300px;
      }
    }
  }
  .card-right {
    position: relative;
    flex: 1;
    height: 100%;
    &-top {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    &-bottom {
      height: 700px;
      width: 100%;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      padding-left: 30px;
      .legend {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        &-item {
          width: 150px;
          display: flex;
          align-items: center;
          &-text {
            margin-left: 4px;
          }
        }
      }
    }
  }
}
.card-item-title {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.card-item-title::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  margin-top: -6px;
  background: #2865FA;
  border-radius: 50%;
}
</style>