IndexChart.vue

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="12">
      <a-col :sm="24" :md="8" :xl="4" :style="{ marginBottom: '12px' }">
        <div class="statistics">
          <div class="icon" style="color:#1890ff;"><a-icon type="home" color="#1890ff" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">入驻物业公司数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.settledNum}}
              <span v-if="statistical.monthSettledNum > 0"><a-icon type="arrow-up"
                  color="#1890ff" />{{ statistical.monthSettledNum }}</span>
            </p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="8" :xl="4" :style="{ marginBottom: '12px' }">
        <div class="statistics">
          <div class="icon" style="color:#7262fd;"><a-icon type="bank" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">累计物业社区数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.communityNum}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="8" :xl="4" :style="{ marginBottom: '12px' }">
        <div class="statistics">
          <div class="icon" style="color:#ffaa00;"><a-icon type="bar-chart" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">累计小区数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.communityNum}}</p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="8" :xl="4" :style="{ marginBottom: '12px' }">
        <div class="statistics">
          <div class="icon" style="color:#52c41a;"><a-icon type="line-chart" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">累计业主数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.ownerNum}}
              <span v-if="statistical.monthOwnerNum > 0"><a-icon type="arrow-up"
                  color="#1890ff" />{{ statistical.monthOwnerNum }}</span>
            </p>
          </div>
        </div>
      </a-col>

      <a-col :sm="24" :md="8" :xl="4" :style="{ marginBottom: '12px' }">
        <div class="statistics">
          <div class="icon" style="color:#de3840;"><a-icon type="team" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">合作伙伴数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.partnersNum}}
              <span v-if="statistical.monthPartnersNum > 0"><a-icon type="arrow-up"
                  color="#1890ff" />{{ statistical.monthPartnersNum }}</span>
            </p>
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="8" :xl="4" :style="{ marginBottom: '12px' }">
        <div class="statistics">
          <div class="icon" style="color:#9C27B0;"><a-icon type="shop" /></div>
          <div>
            <p style="color:#666;margin-bottom:5px;">推广商铺数量</p>
            <p style="margin-bottom:0;color:#333;font-size:28px;line-height:1;">{{statistical.shopNum}}
              <span v-if="statistical.monthShopNum > 0"><a-icon type="arrow-up"
                  color="#1890ff" />{{ statistical.monthShopNum }}</span>
            </p>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="wait-box" style="margin-bottom: 12px;">
      <h3 class="box-title">待处理事务（入驻待审核）</h3>
      <div class="content" v-if="waitAuditList.length > 0">
        <div class="item" v-for="(item, index) in waitAuditList" :key="index">
          <template v-if="item.creditCode">
            <p>入驻物业集团名称：{{ item.propertyName }}</p>
            <p>申请入驻小区数量：{{ item.empowerCommunityNum }}</p>
            <p>申请入驻物业时间：{{ item.createTime }}</p>
            <p>添加人：{{ item.createBy }}</p>
            <a-button type="primary" size="small" @click="toOperation(item, 1)">审核</a-button>
          </template>
          <template v-else>
            <p>入驻社区名称：{{ item.councilsName }}</p>
            <p>申请入驻小区数量：{{ item.empowerCommunityNum }}</p>
            <p>申请入驻社区时间：{{ item.createTime }}</p>
            <p>添加人：{{ item.createBy }}</p>
            <a-button type="primary" size="small" @click="toOperation(item, 2)">审核</a-button>
          </template>
        </div>
      </div>
      <div class="content" v-else>
        <a-empty />
      </div>
    </div>

    <div class="map-box">
      <h3 class="box-title">社区分布数量图</h3>
      <div ref="mapEcharts" class="map-echart" style="height: 500px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chinaData from '@/assets/china.json' //地图包
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getDataStatisticsApi, getLoginfo, getVisitInfo, auditPropertyApi } from '@/api/api'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100,
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  })
}
export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
  },
  data() {
    return {
      statistical: {},
      mapData: [],
      waitAuditList: [],
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 12px" spin />,
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
    this.getDataStatistics()
  },
  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then((res) => {
        if (res.success) {
          this.visitInfo = res.result
        }
      })
    },
    async getDataStatistics() {
      let { result } = await getDataStatisticsApi()
      // this.statistical = {
      //   settledNum: result.settledNum,
      //   communityNum: result.communityNum,
      //   ownerNum: result.ownerNum,
      //   monthOwnerNum: result.monthOwnerNum,
      //   monthSettledNum: result.monthSettledNum,
      // }
      this.statistical = {...result}
      let propertyList = result.waitAuditList[0] || []
      let communityList = result.waitAuditList[1] || []
      this.waitAuditList = propertyList.concat(communityList)
      this.mapData =
        result.propertySettledList.map((item) => {
          return {
            name: item.propertyName,
            value: [item.longitude, item.latitude],
            text: { ...item },
          }
        }) || []
      this.mapEcharts()
    },
    toOperation(record, type) {
      if(type === 1) {
        this.$router.push({
          path: '/settled/propertyDetails?type=audit&id=' + record.id,
        })
      } else {
        this.$router.push({
          path: '/settled/communityDetails?type=audit&id=' + record.id,
        })
      }
    },
    //地图
    mapEcharts() {
      // 获取地图数据
      // 使用数据注册地图
      echarts.registerMap('china', chinaData)
      this.$nextTick(() => {
        // 初始化地图
        this.map = echarts.init(this.$refs['mapEcharts'])
        // 设置基础配置项
        const option = {
          areaColor: '#97bff7',
          // 悬浮窗
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return `物业名称：${params.data.name}</br>统一社会信用代码：${
                params.data.text.creditCode
              }</br>注册地址：${params.data.text.cityName}${params.data.text.countyName}</br>详细地址：${
                params.data.text.addressInfo
              }</br>联系人：${params.data.text.contactName}</br>联系电话：${
                params.data.text.contactPhone
              }</br>授权物业数量：${params.data.text.ontrialCommunityNum || 0}`
            },
            borderColor: '#fff',
            textStyle: {
              //color: "#fff",
              fontSize: '13',
            },
          },
          geo: {
            type: 'map',
            map: 'china',
            //height: "100%",
            top: 0,
            width: '50%',
            roam: true,
            zoom: 1,
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 0.6, //最小的缩放值
              max: 20,
            },
            // 地图区域的样式设置
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1,
              areaColor: '#c1dbff',
            },
          },
          // 要显示的散点数据
          series: [
            {
              name: '社区分布数量图',
              type: 'scatter',
              coordinateSystem: 'geo', //设置坐标系为 geo
              data: this.mapData,
              itemStyle: {
                color: function (params) {
                  //根据不同数据显示不同颜色的标记
                  if (params.data.text.customerAccount >= 100) {
                    return '#67c23a'
                  } else {
                    return '#409eff'
                  }
                },
              },
            },
          ],
        }
        // 将配置应用到地图上
        this.map.setOption(option)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.page-header-index-wide {
  // padding: 16px;
  .statistics {
    // flex: none;
    background: #fff;
    width: 100%;
    height: 90px;
    box-sizing: border-box;
    border: 1px solid #e0dfdf;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      margin-right: 12px;
      .anticon {
        font-size: 36px;
      }
    }
    span {
      font-size: 14px;
      color: #1890ff;
    }
  }
}
.map-box {
  background-color: #fff;
  padding: 20px;

  .dealt-with {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: flex;

    .box {
      border: 1px solid #f5f5f5;
    }
  }
}
.box-title {
  font-weight: bold;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.wait-box {
  background-color: #fff;
  padding: 20px;
  .content {
    width: 100%;
    //height: 400px;
    max-height: 400px;
    overflow-y: auto;
    .item {
      padding: 10px 15px;
      box-sizing: border-box;
      border-radius: 5px;
      border: 1px solid #f1f1f1;
      width: 31.33%;
      margin: 1%;
      float: left;
      p {
        margin-bottom: 0.4em;
      }
    }
  }
}
</style>