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

<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="card-echart">
        <div class="card-left">
          <div class="card-count">
            <div class="card-count-item">
              <div class="card-count-content">
                <div class="card-count-num">{{ vInfo.partyTotal || 0 }}</div>
                <div class="card-count-label">党员数量</div>
              </div>
            </div>
            <div class="card-count-item">
              <div class="card-count-content">
                <div class="card-count-num">{{ vInfo.resiTotal || 0 }}</div>
                <div class="card-count-label">居民数量</div>
              </div>
            </div>
          </div>
          <div class="echart-wr">
            <!-- <div class="echart-cicle"></div> -->
            <div id="echartService"
                 class="echart-org"></div>
          </div>

        </div>

      </div>

      <div class="card-echart">
        <div class="card-left">
          <div class="card-count">
            <div class="card-count-item">
              <div class="card-count-content">
                <div class="card-count-num">{{ vInfo.partyServiceTotal || 0 }}</div>
                <div class="card-count-label">党员数量</div>
              </div>
            </div>
            <div class="card-count-item">
              <div class="card-count-content">
                <div class="card-count-num">{{ vInfo.resiServiceTotal || 0 }}</div>
                <div class="card-count-label">居民数量</div>
              </div>
            </div>
          </div>
          <div class="echart-wr">
            <!-- <div class="echart-cicle"></div> -->
            <div id="echartCount"
                 class="echart-org"></div>
          </div>

        </div>

      </div>

    </cpt-card>
    <cpt-card class="card-wr card-wr-map">
      <div class="card-title">
        <img class="title-icon"
             src="../../../../assets/img/shuju/title-tip.png" />
        <div class="title-label">
          多元化治理平面图
        </div>
      </div>

      <div class="card-map">
        <screen-map class="map"
                    ref="map"
                    @clickFeature="clickProject"
                    :showIconLayer="true"></screen-map>
      </div>
      <div class="map-tips">

        <div class="map-tips-item"
             v-for="item in legendArray"
             :key="item.optionValue">

          <img class="title-icon"
               :src="item.url" />
          <div class="map-tips-label">{{item.optionLabel}}</div>
        </div>

      </div>

    </cpt-card>
  </div>
</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";
import screenMap from "@/views/modules/visual/components/screen-map";

import * as echarts from 'echarts';
export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    screenMap
  },
  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",

      //地图相关数据
      isfirstInit: true,//记录是否是首次加载地图
      agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
      distributionsList: [],

      legendArray: [],

      iconUrlArray: [
        require('../../../../assets/img/shuju/volunteer1.png'),//文化队伍
        require('../../../../assets/img/shuju/volunteer2.png'),//楼委会
        require('../../../../assets/img/shuju/volunteer3.png'),//能人达人
        require('../../../../assets/img/shuju/volunteer4.png'),//老友俱乐部
        require('../../../../assets/img/shuju/volunteer5.png'),//代办员
        require('../../../../assets/img/shuju/volunteer6.png'),//调解员
        require('../../../../assets/img/shuju/volunteer7.png'),//采集员
        require('../../../../assets/img/shuju/volunteer8.png'),//治安巡逻
        require('../../../../assets/img/shuju/volunteer9.png'),//其他
      ],
      vPersonal: [],
      vCount: [],
      vpTotal: 0,
      vcTotal: 0,
      vInfo: {}
    };
  },
  async mounted () {
    await nextTick(100);
    this.getPie()
    // this.initCharts()
    // this.initCount()

    await this.getWorkUserInfo()
    await this.getMapUnitList()
  },
  methods: {
    initCharts (total, data) {
      const eId = document.getElementById('echartService')
      let _charts = echarts.init(eId)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: true,
          top: 'bottom',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        title: {
          text: total,  //图形标题，配置在中间对应效果图的80%
          subtext: '志愿者总数',
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: 28,
            align: "center"
          },
          subtextStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            left: 'center',
            width: 400,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },

            data: data
          }
        ]
      }
      option && _charts.setOption(option);

    },
    initCount (total, data) {
      const eId = document.getElementById('echartCount')
      let _charts = echarts.init(eId)
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          show: true,
          top: 'bottom',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        title: {
          text: total,  //图形标题，配置在中间对应效果图的80%
          subtext: '志愿者服务总数',
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: 28,
            align: "center"
          },
          subtextStyle: {
            fontSize: 16,
            color: '#fff'
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            // center: ['10%', '50%'],
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            // top: top + '%',
            // height: '80%',
            left: 'center',
            width: 400,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },

            data: data
          }
        ]
      }
      option && _charts.setOption(option);

    },
    async getPie () {
      const url = "/data/report/heart/demand/volunteer/service";
      // let params = {
      //   agencyId: this.$store.state.user.agencyId,
      // };
      const { data, code, msg } = await requestPost(url);
      if (code === 0) {
        console.log('data-ddd', data)
        this.vInfo = data
        const arr = [{ 
          name: '党员数量',
          value: data.partyTotal,
          itemStyle: {
            color: 'rgba(26, 178, 255, 1)'
          }
        }, { 
          name: '居民数量',
          value: data.resiTotal,
          itemStyle: {
            color: 'rgba(250, 193, 38, 1)'
          }
        }]
        const arr1 = [{ 
          name: '党员数量',
          value: data.partyServiceTotal,
          itemStyle: {
            color: 'rgba(26, 178, 255, 1)'
          }
        }, { 
          name: '居民数量',
          value: data.resiServiceTotal,
          temStyle: {
            color: 'rgba(250, 193, 38, 1)'
          }
        }]
        this.vPersonal = [ ...arr ]
        this.vCount = [ ...arr1 ]
        this.vpTotal = data.volunteerTotal
        this.vcTotal = data.serviceTotal
        this.initCharts(data.volunteerTotal, arr)
        this.initCount(data.serviceTotal, arr1)
      } else {
        this.$message.error(msg)
      }
    },
    // 【人员预警】 楼宇预警数量列表
    pageSizeChangeHandleNew (val) {
      this.pageNo = 1;
      this.pageSize = val;
    },
    pageCurrentChangeHandleNew (val) {
      this.pageNo = val;
    },

    // 获取当前管理员信息
    getWorkUserInfo () {
      const url = '/epmetuser/customerstaff/staffbasicinfo'
      let params = {}
      window.app.ajax.post(
        url,
        params,
        (data, rspMsg) => {
          this.agencyInfo = data
          if (!data.latitude) {
            this.agencyInfo.latitude = 36.072227
          }
          if (!data.longitude) {
            this.agencyInfo.longitude = 120.389455
          }
          if (!data.level) {
            this.agencyInfo.level = 'street'
          }

        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        }
      )

    },



    //获取联建单位分布图
    async getMapUnitList () {
      const url = "/epmetuser/volunteer/distribution"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"

      let params = {
        customerId: this.$store.state.user.customerId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.legendArray = data.legends

        this.legendArray.forEach((legendTtem, index) => {
          if (index < this.iconUrlArray.length) {
            legendTtem.url = this.iconUrlArray[index]
          } else {//超过原型数量的都默认为第一个图标
            legendTtem.url = this.iconUrlArray[0]
          }

        });
        this.legendArray.push({
          optionValue: 'other',
          optionLabel: '其他',
          url: this.iconUrlArray[8]
        })

        this.distributionsList = data.distributions

        this.distributionsList.forEach(item => {
          let typeShow = ''
          if (item.volunteerCategories.length > 0) {
            typeShow = item.volunteerCategories[0]
          } else {
            typeShow = 'other'
          }
          item.urlIndex = 0
          for (let i = 0; i < this.legendArray.length; i++) {
            if (typeShow === this.legendArray[i].optionValue) {
              item.urlIndex = i
              break;
            }
          }

        });
        console.log(this.distributionsList)

        //第一次加载完置为false
        this.loadMap()
        this.isfirstInit = false

      } else {
        this.$message.error(msg)
      }

    },


    //加载地图数据
    loadMap () {
      if (this.isfirstInit) {
        //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
        this.$refs.map.loadMap(this.agencyInfo, null, null, this.distributionsList, this.iconUrlArray, null)
      } else {
        this.$refs.map.refreshMap(null, this.unitMapList)

      }
    },

    //点击项目
    clickProject (feature) {
      console.log('标注信息', feature.values_.properties)
    },
  },
};
</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;
  }
  padding: 25px 21px 15px 24px;
}
.card-title {
  display: flex;
  align-items: center;
  cursor: pointer;
  .title-icon {
    display: block;
    width: 36px;
    height: 29px;
    box-sizing: border-box;
    margin-right: 3px;
  }
  .title-label {
    font-size: 16px;
    font-weight: 800;
  }
  ::v-deep .el-dropdown {
    font-size: 16px;
    color: #fff;
    font-weight: 800;
  }
}
.card-echart {
  display: flex;
  margin-top: 40px;

  .card-left {
    position: relative;
    flex: 1;
    display: flex;
  }
}
.card-echart:last-child {
  padding-bottom: 40px;
}
.echart-wr {
  position: relative;
  flex-shrink: 0;
  width: 50%;
  height: 320px;
  box-sizing: border-box;
  .echart-org {
    width: 100%;
    height: 100%;
  }
  .echart-cicle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    box-sizing: border-box;
    margin-top: -120px;
    margin-left: -120px;
    border: 1px dashed rgba(0, 96, 240, 1);
    border-radius: 50%;
  }
}
.card-count {
  flex: 1;
  .card-count-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 418px;
    height: 124px;
    box-sizing: border-box;
    margin-top: 20px;
    // padding-left: 192px;
    background: url("../../../../assets/img/shuju/measure/dangyuan.png") center
      no-repeat;
    background-size: cover;
    .card-count-content {
      position: relative;
      box-sizing: border-box;
      padding-left: 30px;
      color: #fff;
      cursor: pointer;
      .card-count-num {
        font-size: 32px;
        font-weight: bold;
      }
      .card-count-label {
        margin-top: 6px;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.72);
      }
    }
    .card-count-content::after {
      position: absolute;
      top: 50%;
      left: 0;
      content: "";
      width: 1px;
      height: 50px;
      margin-top: -25px;
      background: rgba(98, 162, 205, 1);
    }
  }
  .card-count-item:last-child {
    background: url("../../../../assets/img/shuju/measure/jumin.png") center
      no-repeat;
  }
}

.map-tips {
  width: 700px;
  display: flex;
  // justify-content: start;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 20px;

  .map-tips-item {
    display: flex;

    align-items: center;
    margin-top: 10px;
    margin-right: 40px;

    .map-tips-icon {
      width: 20px;
      height: 10px;
      box-sizing: border-box;
      margin-right: 10px;
      background: #dd2719;
      border-radius: 2px;
    }
    .map-tips-label {
      font-size: 16px;
      color: #fff;
    }
  }
}

.card-wr-map {
  height: calc(100vh - 150px);
  text-align: center;

  .card-map {
    margin-top: 10px;
    width: 100%;
    // height: calc(100vh - 285px);
    height: calc(100vh - 315px);

    .map {
      width: 100%;
      height: 100%;
    }
  }
}
</style>