<template>
  <div class="flatsIndex">
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span="colNum" class="mb-2">
          <el-card shadow="never">
            <div class="d-flex flex-wrap align-center justify-space-between">
              <img src="../../assets/img/zygl.svg" class="width-60-px mb-2" alt="" />
              <div class="flexLi d-inlie-block text-center hand-type">
                <div class="color-00000073 font-size-16 font-weight-700 color-03A9F4">总收入</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="sumTotal" class="color-03A9F4"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">元</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type">
                <div class="color-00000073 font-size-16 font-weight-700 color-03A9F4"
                  @click="goToPage('/userManagement')">总人数</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="sumCard" class="color-03A9F4"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">个</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type" v-for="(item, index) in leasesStaticList"
                :key="index" @click="goToPage('agreement', item.lable)">
                <div class="color-00000073 font-size-16 font-weight-700"
                  :class="item.lable === '已签约' ? 'color-03A9F4' : 'color-FF3D00'">{{ item.lable }}</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="item.total" :class="item.lable === '已签约' ? 'color-03A9F4' : 'color-FF3D00'">
                  </NumberGrow><span class="font-size-16 color-00000073 ml-1">个</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="colNum" class="mb-2">
          <el-card shadow="never">
            <div class="d-flex flex-wrap align-center justify-space-between">
              <img src="../../assets/img/roomNum.svg" class="width-60-px mb-2" alt="" />
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('/room')">
                <div class="color-00000073 font-size-16 font-weight-700 color-03A9F4">总小区数</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="sumProjects" class="color-03A9F4"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">个</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('/room')">
                <div class="color-00000073 font-size-16 font-weight-700 color-03A9F4">总房间数</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="sumRoom" class="color-03A9F4"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">间</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('/room')">
                <div class="color-00000073 font-size-16 font-weight-700 color-03A9F4">已入住数</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="occupied" class="color-03A9F4"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">间</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('/room')">
                <div class="color-00000073 font-size-16 font-weight-700 color-FF3D00">欠费房间</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="roomInArrears" class="color-FF3D00"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">间</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="colNum" class="mb-2">
          <el-card shadow="never">
            <div class="d-flex flex-wrap align-center justify-space-between">
              <img src="../../assets/img/loock.svg" class="width-60-px mb-2" alt="" />
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('/doorLock')">
                <div class="color-00000073 font-size-16 font-weight-700 color-03A9F4">总设备</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="statisticsDate.seriesData.total" class="color-03A9F4"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">个</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('doorLock', '异常数')">
                <div class="color-00000073 font-size-16 font-weight-700 color-FF3D00">异常数</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="statisticsDate.seriesData.isAppBind" class="color-FF3D00"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">间</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type" @click="goToPage('doorLock', '低电数')">
                <div class="color-00000073 font-size-16 font-weight-700 color-FF3D00">低电数</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="statisticsDate.seriesData.batteryLevel1" class="color-FF3D00"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">间</span>
                </div>
              </div>
              <div class="flexLi d-inlie-block text-center hand-type">
                <div class="color-00000073 font-size-16 font-weight-700 color-FF3D00">到期设备</div>
                <div class="font-size-24 mt-2">
                  <NumberGrow :value="0" class="color-FF3D00"></NumberGrow><span
                    class="font-size-16 color-00000073 ml-1">间</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="mt-4">
        <el-col :span="colNumOne" class="mb-2">
          <el-card shadow="never">
            <div id="myMiddleChart" :style="{ height: '400px', width: '100%' }"></div>
          </el-card>
        </el-col>
        <el-col :span="colNumOne" class="mb-2">
          <el-card shadow="never">
            <div id="myMiddleChartThree" :style="{ height: '400px', width: '100%' }"></div>
          </el-card>
        </el-col>
        <el-col :span="colNumOne" class="">
          <el-card shadow="never">
            <div id="myMiddleChartOne" :style="{ height: '400px', width: '100%' }"></div>
          </el-card>
        </el-col>
        <el-col :span="colNumOne" class="mb2">
          <el-card shadow="never" class="mb22">
            <!-- <div id="myMiddleChartTwo" :style="{ height: '400px', width: '100%' }"></div> -->
            <div class="gail" :style="{ height: '400px', width: '100%' }">
              <div class="ruzhu">
                <div class="ruzhu-title">房间入住率</div>
                <el-progress type="circle" :percentage="Occupancyrate" color="rgb(250, 142, 0)"></el-progress>
              </div>
              <div class="ruzhu">
                <div class="ruzhu-title">房间过期率</div>
                <el-progress type="circle" :percentage="expirerate" color="rgb(250, 142, 0)"></el-progress>
              </div>
            </div>
          </el-card>
          <el-card shadow="never" class="mb33">
            <!-- <div id="myMiddleChartTwo" :style="{ height: '400px', width: '100%' }"></div> -->
            <div class="leaseslog" :style="{ height: '400px', width: '100%' }">
              <div class="leases-title"><i class="gongyu gy-qianyuequerenqianyuedianziqianyue"></i>签约信息</div>
              <div class="leases-list">
                <div class="leases-item" v-for="item in leasesList" :key="item.id">
                  <span class="leases-ruzhu">{{ item.name }} 签约成功</span>
                  <span class="leases-date">{{ item.signingTime }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
import { httpGet, httpPost } from "../../api";
import NumberGrow from "../../components/visualizcomponent/NumberGrow.vue";
import echarts from 'echarts'
const xData = (function () {
  const data = []
  for (let i = 1; i < 13; i++) {
    data.push(i + '月')
  }
  return data
}())

const isFunction = (val) => typeof val === 'function';
export default {
  name: "flatsIndex",
  data() {
    return {
      leasesList: [],
      outroom: 0,
      Occupancyrate: 0,
      expirerate: 0,
      sumTotal: 0,
      colNumOne: 12,
      colNum: 8,
      middleChartExtendThree: {
        title: {
          text: '租金收入排行榜（¥）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          splitLine: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
        },
        series: [
          {
            name: '公寓',
            type: 'line',
            // itemStyle: {
            //   color: '#4CAF50'
            // },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            itemStyle: {
              color: '	#87CEEB'
            },
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#87CEEB'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255)'
                }
              ])
            },
          },
          {
            name: '房源',
            type: 'line',
            // itemStyle: {
            //   color: '#4CAF50'
            // },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            smooth: true,
            itemStyle: {
              color: '	#e54857'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#e54857'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255)'
                }
              ])
            },
          },
          {
            name: '平山村',
            type: 'line',
            // itemStyle: {
            //   color: '#4CAF50'
            // },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            smooth: true,
            itemStyle: {
              color: '	#FFD700'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFD700'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255)'
                }
              ])
            },
          }
        ]
      },
      // middleChartExtendTwo: {
      //   title: {
      //     text: '租金收入分析'
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'cross',
      //       crossStyle: {
      //         color: '#999'
      //       }
      //     }
      //   },
      //   toolbox: {
      //     feature: {
      //       magicType: { show: true, type: ['line', 'bar'] },
      //       restore: { show: true }
      //     }
      //   },
      //   legend: {},
      //   xAxis: [
      //     {
      //       type: 'category',
      //       data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      //       axisPointer: {
      //         type: 'shadow'
      //       },
      //       splitLine: {
      //         show: false
      //       }
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value',
      //       splitLine: {
      //         show: false
      //       }
      //     }
      //   ],
      //   series: [
      //     {
      //       name: '已收',
      //       type: 'bar',
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     },
      //     {
      //       name: '未收',
      //       type: 'bar',
      //       data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      //     }
      //   ]
      // },

      middleChartExtendOne: {
        title: {
          text: '楼栋入住率排行榜（%）'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          splitLine: {
            show: false
          },
        },
        yAxis: {
          type: 'category',
          data: [],
          splitLine: {
            show: false
          },
        },
        series: [
          {
            name: '入住率',
            type: 'bar',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            data: []
          }
        ]
      },
      middleChartExtend: {
        title: {
          x: '10',
          top: '10',
          text: '房间入住分析',
          textStyle: {
            color: '#333',
            fontSize: '22'
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
          }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
          }
        ],
        series: [
          {
            name: '已入住',
            type: 'bar',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: '#00FA9A'
            }
          },
          {
            name: '未入住',
            type: 'bar',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: '#1E90FF'
            }
          },
          {
            name: '总计',
            type: 'line',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: '#FFD700'
            }
          }
        ]
      },


      options: {},
      colors: [
        { color: '#01bd8d', percentage: 99 },
        { color: '#da0051', percentage: 1 },
      ],
      cdata: {
        xData: [
          "电量(0-20%)",
          "电量(20-40%)",
          "电量(40-60%)",
          "电量(60-80%)",
          "电量(80-100%)",
        ],
        seriesData: [
          { value: 0, name: "电量(0-20%)" },
          { value: 0, name: "电量(20-40%)" },
          { value: 0, name: "电量(40-60%)" },
          { value: 0, name: "电量(60-80%)" },
          { value: 0, name: "电量(80-100%)" },
        ],
      },
      collectUS: {},
      sumRoom: 0,
      roomInArrears: 0,
      occupied: 0,
      sumProjects: 0,
      sumOpenlock: 0,
      sumCard: 0,
      todayOpen: 0,
      statisticsDate: {
        seriesData: {
          openTotal: 0,
          closeTotal: 0,
          abnormalTotal: 0,
          offlineTotal: 0,
          onlineTotal: 0,
          isAppBind: 0,
          batteryLevel1: 0
        }
      },
      alertTotal: 0,
      showDom: true,
      timer: null,
      leasesStaticList: [],
      middleChartExtendOneShow: true,
      commonStatisticsList: [],
      statisticsDateDefault: {
        "cdata": ["0", "0", "0", "0", "0"],
        "seriesData": {
          "abnormalTotal": 0,
          "batteryLevel1": 0,
          "batteryLevel2": 0,
          "batteryLevel3": 0,
          "batteryLevel4": 0,
          "batteryLevel5": 0,
          "closeTotal": 0,
          "offlineTotal": 0,
          "onlineTotal": 0,
          "openTotal": 0,
          "projects": 0,
          "total": 0
        },
        "collectUS": {
          "card300": 0,
          "site200": 0,
          "card200": 0,
          "userCount": 0,
          "site300": 0,
          "lock300": 0,
          "site400": 0,
          "lock200": 0,
          "houseSensor400": 0
        },
        "collectOpenLock": {
          "week300": [{
            "count": 0,
            "order": "2022-05-15"
          }, {
            "count": 0,
            "order": "2022-05-16"
          }, {
            "count": 0,
            "order": "2022-05-17"
          }, {
            "count": 0,
            "order": "2022-05-18"
          }, {
            "count": 0,
            "order": "2022-05-19"
          }, {
            "count": 0,
            "order": "2022-05-20"
          }, {
            "count": 0,
            "order": "2022-05-21"
          }, {
            "count": 0,
            "order": "2022-05-22"
          }, {
            "count": 0,
            "order": "2022-05-23"
          }, {
            "count": 0,
            "order": "2022-05-24"
          }, {
            "count": 0,
            "order": "2022-05-25"
          }, {
            "count": 0,
            "order": "2022-05-26"
          }],
          "week200": [{
            "count": 0,
            "order": "2022-05-19"
          }, {
            "count": 0,
            "order": "2022-05-20"
          }, {
            "count": 0,
            "order": "2022-05-21"
          }, {
            "count": 0,
            "order": "2022-05-22"
          }, {
            "count": 0,
            "order": "2022-05-23"
          }, {
            "count": 0,
            "order": "2022-05-24"
          }, {
            "count": 0,
            "order": "2022-05-25"
          }, {
            "count": 0,
            "order": "2022-05-26"
          }],
          "allCount300": 0,
          "allCount200": 0
        },
        "weekopenlock": [{
          "order": "2022-05-19",
          "count": 0
        }, {
          "order": "2022-05-20",
          "count": 0
        }, {
          "order": "2022-05-21",
          "count": 0
        }, {
          "order": "2022-05-22",
          "count": 0
        }, {
          "order": "2022-05-23",
          "count": 0
        }, {
          "order": "2022-05-24",
          "count": 0
        }, {
          "order": "2022-05-25",
          "count": 0
        }, {
          "order": "2022-05-26",
          "count": 0
        }],
        "addDeviceWeek": [{
          "order": "2022/05/20",
          "count": 0
        }, {
          "order": "2022/05/21",
          "count": 0
        }, {
          "order": "2022/05/22",
          "count": 0
        }, {
          "order": "2022/05/23",
          "count": 0
        }, {
          "order": "2022/05/24",
          "count": 0
        }, {
          "order": "2022/05/25",
          "count": 0
        }, {
          "order": "2022-05-26",
          "count": 0
        }]
      }
    }
  },
  components: {
    NumberGrow
  },
  beforeCreate() {
    this.$store.commit('settenantid')
  },
  async created() {
    httpGet('', this.$api.getCommunityrentStatistics).then(res => { })
    this.$store.commit('setUser1')
    if (!localStorage.getItem('statisticsDate')) {
      let data = this.statisticsDateDefault
      localStorage.setItem('statisticsDate', JSON.stringify(data))
      this.reload()
    }
    let statisticsDate = JSON.parse(localStorage.getItem('statisticsDate'))
    this.statisticsDate = statisticsDate
    this.statisticsDate.abnormalTotal = this.statisticsDate.seriesData.abnormalTotal || 0
    this.statisticsDate.offlineTotal = this.statisticsDate.seriesData.offlineTotal || 0
    this.statisticsDate.onlineTotal = this.statisticsDate.seriesData.onlineTotal || 0
    this.statisticsDate.isAppBind = this.statisticsDate.seriesData.isAppBind || 0
    this.statisticsDate.batteryLevel1 = this.statisticsDate.seriesData.batteryLevel1 || 0
    this.collectUS = statisticsDate.collectUS
    this.sumProjects = statisticsDate.seriesData.projects
    for (let key in statisticsDate.collectOpenLock) {
      let i = key.indexOf('allCount')
      if (i != -1) {
        this.sumOpenlock += statisticsDate.collectOpenLock[key]
      }
    }
    for (let t in statisticsDate.collectUS) {
      let l = t.indexOf('card')
      if (l != -1) {
        this.sumCard += statisticsDate.collectUS[t]
      }
      let p = t.indexOf('site')
      if (p != -1) {
        this.sumRoom += statisticsDate.collectUS[t]
      }
      let q = t.indexOf('lock')
      if (q != -1) {
        this.alertTotal += statisticsDate.collectUS[t]
      }
    }
    httpGet('', this.$api.getCommonStatistics).then(async res => {
      console.log(res)
      if (res.success) {
        let list = res.data
        let occupied = 0, roomInArrears = 0
        list.map(li => {
          if (li.status === 0) {
            li.lable = '待签约'
          } else if (li.status === 1) {
            li.lable = '已签约'
            occupied += li.total
          } else if (li.status === 2) {
            li.lable = '已欠费'
            roomInArrears += li.total
          } else if (li.status === 3) {
            li.lable = '已退租'
            this.outroom += li.total
          } else if (li.status === 4) {
            li.lable = '已删除'
          } else {
            li.lable = ''
          }
        })
        this.commonStatisticsList = JSON.parse(JSON.stringify(list))
        this.occupied = occupied
        this.Occupancyrate = Number((this.occupied / this.sumRoom).toFixed(2))
        this.roomInArrears = roomInArrears
        this.expirerate = Number(((this.sumRoom - this.occupied - this.roomInArrears - this.outroom) / this.sumRoom).toFixed(2))
        this.leasesStaticList = await this.processingStatics(list, 'status') //list
        await this.getRoomOccupancy()
        await this.getSumTotal()
      }
    })
    if (statisticsDate.weekopenlock[statisticsDate.weekopenlock.length - 1]) {
      this.todayOpen = statisticsDate.weekopenlock[statisticsDate.weekopenlock.length - 1].count
    }
    if (document.documentElement.clientWidth < 1080) {
      this.colNumOne = 24
      this.colNum = 24
    } else {
      this.colNumOne = 12
      this.colNum = 8
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        if (document.documentElement.clientWidth < 1080) {
          this.colNumOne = 24
          this.colNum = 24
        } else {
          this.colNumOne = 12
          this.colNum = 8
        }
      })()
    }
    let data = {
      "orderBy": "create_time desc",
      "q": JSON.stringify({
        status: '1'
      })
    }
    httpPost(data, this.$api.postLeasesList).then(res => {
      if(res.success){
        res.data.list.map(li => {
          li.signingTime = moment().format("YYYY-MM-DD HH:mm:ss")
        })
        this.leasesList = res.data.list
      }
    })
  },
  methods: {
    // 获取所有收入
    getSumTotal() {
      let date = new Date();
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      httpGet('', this.$api.getTotalRevenue).then(res => {
        if (res.success) {
          this.sumTotal = res.data / 100
        }
      })
      httpGet('', this.$api.getStatisticsByMonth + year).then(res => {
        if (res.success) {
          let middleChartExtend = this.middleChartExtend
          let arr = new Array(0).fill(this.sumRoom)
          middleChartExtend.series[2].data = arr
          res.data.leases.map(li => {
            middleChartExtend.series[0].data[li.order] = li.count
          })
          res.data.site.map(li => {
            middleChartExtend.series[2].data[li.order] = li.count
          })
          arr.map((li, index) => {
            middleChartExtend.series[1].data[index] = middleChartExtend.series[2].data[index] - middleChartExtend.series[0].data[index]
          })
          let myMiddleChartObj = this.$echarts.init(
            document.getElementById("myMiddleChart")
          );
          myMiddleChartObj.setOption(middleChartExtend, true);
        }
      })
      // httpGet('', this.$api.getRevenueByMonth + year).then(res => {
      //   console.log(res)
      //   if (res.success) {
      //     let list = this.mergeMethods(res.data,['count','order'])
      //     let middleChartExtendTwo = this.middleChartExtendTwo
      //     res.data.map(li => {
      //       if (li.code == 1) {
      //         middleChartExtendTwo.series[0].data[li.order] = li.count
      //       } else if (li.code == 2) {
      //         middleChartExtendTwo.series[1].data[li.order] = li.count
      //       }
      //     })
      //     this.middleChartExtendTwo = middleChartExtendTwo
      //     let myMiddleChartObjTwo = this.$echarts.init(
      //       document.getElementById("myMiddleChartTwo")
      //     );
      //     // myMiddleChartObjTwo.on('updateAxisPointer', function (event) {
      //     //   const xAxisInfo = event.axesInfo[0];
      //     //   if (xAxisInfo) {
      //     //     const dimension = xAxisInfo.value + 1;
      //     //     myMiddleChartObjTwo.setOption({
      //     //       series: {
      //     //         id: 'pie',
      //     //         label: {
      //     //           formatter: '{b}: {@[' + dimension + ']} ({d}%)'
      //     //         },
      //     //         encode: {
      //     //           value: dimension,
      //     //           tooltip: dimension
      //     //         }
      //     //       }
      //     //     });
      //     //   }
      //     // })
      //     myMiddleChartObjTwo.setOption(middleChartExtendTwo, true);
      //   }
      // })
      httpGet('', this.$api.getStatisticsRevenueTop).then(res => {
        if (res.success) {
          let listQuarters = [], middleChartExtendThree = this.middleChartExtendThree
          // res.data.map(li => {
          //   if (li.month == month) {
          //     listQuarters.push(li)
          //   }
          // })
          // let listSort = listQuarters.sort((pre, cur) => pre.rent - cur.rent)
          // listSort.map(li => {
          res.data.map(li => {
            middleChartExtendThree.series.map(li2 => {
              if (li.name == li2.name) {
                li2.data[li.month - 1] = li.rent
              }
            })
            // middleChartExtendThree.yAxis.data.push(li.name)
            // middleChartExtendThree.series[0].data.push(li.rent)
          })
          let myMiddleChartObjThree = this.$echarts.init(
            document.getElementById("myMiddleChartThree")
          );
          myMiddleChartObjThree.setOption(middleChartExtendThree, true);
        }
      })
    },
    uniqueFunc(arr, uniId) {
      const res = new Map();
      return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
    },
    // 统计处理
    async processingStatics(list, key) {
      let result = this.uniqueFunc(list, key)
      result.map((li, index) => {
        let data = list.filter(item => item.status == li.status)
        if (data.length > 0) {
          let sum = data.reduce(function (prev, curr, idx, arr) {
            return prev.total + curr.total;
          });
          if (typeof (sum) == 'number') {
            li.total = sum
          }
        }
      })
      return result
    },
    // 获取社区入住率
    async getRoomOccupancy() {
      let _this = this
      let commonStatisticsList = this.commonStatisticsList
      let result = []
      httpGet('', this.$api.getRoomStatistics).then(async res => {
        if (res.code === 200) {
          let roomList = [], percentage = []
          res.data.map(async li => {
            roomList.push(li.name)
            let arr = commonStatisticsList.filter(item => item.status == 1 && item.name == li.name)
            if (arr && arr.length > 0) {
              let sum = arr.reduce((prev, item) => {
                prev += item.total * 1
                return prev
              }, 0)
              let jg = Number((parseInt(sum) / parseInt(li.total) * 100).toFixed(2))
              percentage.push(jg)
            } else {
              percentage.push(0)
            }
          })
          let middleChartExtendOne = this.middleChartExtendOne
          middleChartExtendOne.yAxis.data = roomList
          middleChartExtendOne.series[0].data = percentage
          this.middleChartExtendOne = middleChartExtendOne
          let myMiddleChartObjOne = this.$echarts.init(
            document.getElementById("myMiddleChartOne")
          );
          myMiddleChartObjOne.setOption(middleChartExtendOne, true);
        }
      })
    },
    // 前往路由
    goToPage(url, lable = '') {
      console.log(url, lable)
      if (lable == '已签约') {
        this.$router.push({
          name: url,
          params: {
            status: '1'
          }
        })
      } else if (lable == '已退租') {
        this.$router.push({
          name: url,
          params: {
            status: '3'
          }
        })
      } else if (lable == '在线数') {
        this.$router.push({
          name: url,
          params: {
            isOnline: '1'
          }
        })
      } else if (lable == '异常数') {
        this.$router.push({
          name: url,
          params: {
            isOnline: '2'
          }
        })
      } else if (lable == '低电数') {
        this.$router.push({
          name: url,
          params: {
            endBattery: '20'
          }
        })
      } else {
        this.$router.push(url)
      }
    }
  }
}
</script>

<style scoped>
.mb2 {
  display: flex;
}

.mb22 {
  margin-right: 10px;
  width: 40%;
}
.mb33{
  width: 60%;
}
.leaseslog{
  width: 100%;
}
.leases-title{
  width: 100%;
  height: 10%;
  font-size: 20px;
}
.leases-list{
  width: 100%;
  height: 90%;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.leases-item{
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  color: #999;
  display: flex;
  justify-content: space-between;
}

.gail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ruzhu {
  width: 100%;
  height: 50%;
  text-align: center;
}

.ruzhu-title {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 20px;
}
.gy-qianyuequerenqianyuedianziqianyue{
  margin-right: 10px;
  font-size: 22px;
  color: rgb(250, 142, 0);
}
</style>
