<template>
  <div id="home" class="layoutPadding" v-if="(this.$api.BASE_URL).indexOf('pudong') > -1 || (this.$api.BASE_URL).indexOf('211.136.105.193') > -1">
    <div class="topBox-l">
      <div class="inner" style="">
          <div>
            <p class="top-font" >小区数</p>
            <span class="top-count" >{{data.community}}</span>
          </div>
          <div class="align-center" >
            <img src="@/assets/icon/xqs.png" style="width:50px;" alt="">
          </div>
      </div>
      <div class="inner" style="">
          <div>
            <p class="top-font" >门牌幢数</p>
            <span class="top-count" >{{data.building}}</span>
          </div>
          <div class="align-center" >
            <img src="@/assets/icon/mpzs.png" style="width:50px;" alt="">
          </div>
      </div>
      <div class="inner" style="">
          <div>
            <p class="top-font" >物业企业数</p>
            <span class="top-count" >{{data.company}}</span>
          </div>
          <div class="align-center" >
            <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
          </div>
        </div>
      <div class="inner" style="">
          <div>
            <p class="top-font" >业委会数</p>
            <span class="top-count" >{{data.ic}}</span>
          </div>
          <div class="align-center" >
            <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
          </div>
      </div>
    </div>
    <div class="secBox">
      <IndustrySupervision  style="width:35%" />
      <ComplaintsTrain moduletitle="投诉直通车" style="width:48%" />
      <FileModule style="width:13%;" />
    </div>
    <div class="thirdBox">
      <ManagementModule moduletitle="信用" style="width:32.5%" />
      <ManagementModule moduletitle="风险" style="width:32.5%"  />
      <ManagementModule moduletitle="分类" style="width:32.5%"  />
    </div>
    <div class="fourthBox">
      <RiskDisposal style="width:30%" />
      <RetrofitElevator style="width:32%"  />
      <ComplaintsTrain moduletitle="应急报修" style="width:36%" />
    </div>

  </div>
  <!-- <div id="home" class="layoutPadding" v-if="(this.$api.BASE_URL).indexOf('xuhui') > -1 || (this.$api.BASE_URL).indexOf('31.0.161.39') > -1"> -->
    <div id="home" class="layoutPadding" v-else>
      <a-row type="flex"  class="align-stretch">
        <a-col :span="24">
          <a-row type="flex" style="height:100%;">
            <a-col :span="6">
              <div class="home-card topBox" style="margin-right:10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >小区数</p>
                    <span class="top-count" >{{data.community}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/xqs.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin:0px 10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >门牌幢数</p>
                    <span class="top-count" >{{data.building}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/mpzs.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin:0px 10px;">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >物业企业数</p>
                    <span class="top-count" >{{data.company}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="home-card topBox" style="margin-left:10px;">
                <a-row>
                  <a-col :span='6'>
                    <div class="justify-between topBox" >
                      <div>
                        <p class="top-font" >业委会数</p>
                        <span class="top-count" >{{data.ic}}</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span='13'>
                    <a-row style="border-left: 1px solid lightgrey; border-bottom: 1px solid lightgrey; padding-left: 10px; padding-bottom: 5px;">
                      <a-col :span='16'>
                        <span class="top-font" >已过期</span>
                      </a-col>
                      <a-col :span='8'>
                        <span class="top-count-extra" style="cursor: pointer;" @click="handleExpired">{{expired}}</span>
                      </a-col>
                    </a-row>
                    <a-row style="border-left: 1px solid lightgrey; padding-left: 10px;padding-top: 10px;">
                      <a-col :span='16'>
                        <span class="top-font" >5个月内到期</span>
                      </a-col>
                      <a-col :span='8'>
                        <span class="top-count-extra" style="cursor: pointer;" @click="handleWillExpire">{{expireInFiveMonth}}</span>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span='1'></a-col>
                  <a-col :span='4'>
                    <div class="align-center" style="margin-top: 10px">
                        <img src="@/assets/icon/ywhs.png" style="width:50px;" alt="">
                      </div>
                  </a-col>
                </a-row>
              </div>
            </a-col> 
          </a-row>
        </a-col>
        <!-- <a-col :span="4">
          <div class="home-card topBox" style="margin-left:0px 10px; cursor: pointer" @click="handleExpired">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >已过期</p>
                    <span class="top-count" >{{expired}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
        </a-col>
        <a-col :span="4">
          <div class="home-card topBox" style="margin-left:10px; cursor: pointer" @click="handleWillExpire">
                <div class="justify-between topBox" >
                  <div>
                    <p class="top-font" >未来5个月将到期</p>
                    <span class="top-count" >{{expireInFiveMonth}}</span>
                  </div>
                  <div class="align-center" >
                    <img src="@/assets/icon/wyqys.png" style="width:50px;" alt="">
                  </div>
                </div>
              </div>
        </a-col> -->
      </a-row>
      <a-row class="align-stretch" style="margin-top:20px;">
        <a-col :span="8">
          <div class="month">
            <div class="home-card monthTitle">
                <span>房办月查</span>
                <span>
                  <span style="font-size:12px;">{{nowMonth}} </span>
                  <span class="monthTitleNum">
                    {{checkStreet}} <span style="color:#000;">/{{totStreet}}</span>
                  </span>
                </span>
            </div>
            <div class="home-card monthBox">
              <span style="font-weight:600;">全年情况</span>
              <a-row>
                <a-col :span="4" class="hoverTest" v-for="item in mounth" :key="item.name">
                  <div v-if="item.check" @click="checkMonth(item)" :class="'monthImg green '+item.class" :style="'background:url('+ok+') no-repeat center center /cover; '">
                    {{item.name}}
                    <div class="monthHover" @click="hoverMonth(item)">
                      <div>
                        <span>明细</span>
                      </div>
                    </div>
                  </div>
                  <div v-else @click="checkMonth(item)" :class="'monthImg blue '+item.class" :style="'background:url('+nm+') no-repeat center center /cover; '">
                    {{item.name}}
                    <div class="monthHover" @click="hoverMonth(item)">
                      <div>
                        <span>明细</span>
                      </div>
                    </div>
                  </div> 
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
        <a-col :span="13" class="zxjc">
          <div class="jiancha">
              <div class="home-card jianchaTitle"> 
                <span>专项检查</span> 
                <img src="@/assets/icon/tp.png" @click="openOutUrl2" style="height:20px;" alt="">
              </div>
              <div style="height: calc(100% - 55px);">
                <a-row class="jianchaBox">
                  <a-col :span="12" class="home-card jianchaTheme">
                    <!-- <div class="justify-between" style="align-items:baseline;">
                      <span style="font-weight:600;">已查/应查</span>
                      <span style="font-size:20px;font-weight:600;"><span style="color:#0477FF;">68</span>/124</span>
                    </div>
                    <a-progress :percent="68/124*100" size="small" :showInfo="false" :strokeWidth="10" strokeColor="#11C3C4"/> -->
                    <a-row>
                      <a-col :span="16" :offset="2">
                        <span style="font-weight:600;"><img src="@/assets/icon/yyzt.png" alt="" style="width:20px;margin-right:3px;"> 已有主题</span>
                      </a-col>
                      <a-col :span="6">
                        <!-- <span class="jianchaThemeNum">{{theme}}</span> -->
                        <span class="jianchaThemeNum">0</span>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="16" :offset="2">
                        <span style="font-weight:600;"><img src="@/assets/icon/ywcjcxq.png" alt="" style="width:20px;margin-right:3px;"> 已完成检查小区</span>
                      </a-col>
                      <a-col :span="6">
                        <!-- <span class="jianchaThemeNum">{{sect}}</span> -->
                        <span class="jianchaThemeNum">0</span>
                      </a-col>
                    </a-row>
                    <a-row>
                      <a-col :span="16" :offset="2">
                        <span style="font-weight:600;"><img src="@/assets/icon/zt.png" alt="" style="width:20px;margin-right:3px;"> 已开整改单</span>
                      </a-col>
                      <a-col :span="6">
                        <!-- <span class="jianchaThemeNum">{{receipts}}</span> -->
                        <span class="jianchaThemeNum">0</span>
                      </a-col>
                    </a-row>
                  </a-col>

                  <a-col :span="12" class="home-card jianchaBoxRight">
                    <div>
                      <span class="jianchaPeopleTitle">当前检察人员</span>
                    </div>
                    <a-row style="height:calc(100% - 34px)">
                      <a-col :span="12" v-for="(item,i) in people" :key="i" style="font-size:14px;height: 25%;">
                        <img src="@/assets/icon/peoplebj.png" style="height:16px;margin-right: 5px; margin-top: -3px;"/>{{item.TE_NAME}}
                      </a-col>
                      <a-col v-if="people.length == 7" :span="12" style="font-size:14px;height: 25%;">
                        <img src="@/assets/icon/ddd.png" style="height:16px;margin-right: 5px; margin-top: -3px;"/>
                      </a-col>
                    </a-row>
                  </a-col>

                  <!-- <a-col :span="8" class="home-card justify-between" style="padding:0px 10px;height:100%;flex-direction:column;">
                    <div>
                      <span style="height:30px;display:inline-block;vertical-align: sub;font-weight:600;">已完成整改/已开整改单</span>
                    </div>
                    <div>
                      <div class="justify-between" style="align-items:baseline;font-weight:600;font-size:20px;">
                        <span style="color:#0477FF;">25%</span>
                        <span><span style="color:#0477FF;">4</span>/16</span>
                      </div>
                      <a-progress :percent="68/124*100" size="small" :showInfo="false" :strokeWidth="10" strokeColor="#11C3C4"/>
                    </div>
                    <div>
                      <div class="justify-between" style="align-items:baseline;">
                        <span style="font-weight:600;">整改率</span>
                        <span style="font-size:20px;font-weight:600;color:#0477FF;">16%</span>
                      </div>
                      <a-progress :percent="68/124*100" size="small" :showInfo="false" :strokeWidth="10" strokeColor="#11C3C4"/>
                    </div>
                  </a-col> -->
                </a-row>
              </div>
          </div>
        </a-col>
        <a-col :span="3">
          <div style="height:100%;margin-left:10px;">
            <a-row>
              <div class="home-card middle-right" style="margin-bottom: 20px" @click="toFangXunFangTai">
                <img src="@/assets/icon/fxft.png" style="width:40px;" alt="">
                <p>防汛防台</p>
              </div>
            </a-row>
            
            <a-row>
              <div class="home-card middle-right" @click="$router.push({path: '/houseData/basicInfo'})">
                <img src="@/assets/icon/xqda.png" style="width:40px;" alt="">
                <p>小区档案</p>
              </div>
            </a-row>

            <a-row>
              <div class="home-card middle-right" @click="$router.push({path: '/houseData/propertyInfo'})" style="margin-top:20px;">
                <img src="@/assets/icon/wyqyda.png" style="width:40px;" alt="">
                <p>物业企业档案</p>
              </div>
            </a-row>
          </div>
        </a-col>
      </a-row>
      <a-row class="align-stretch" style="margin-top:20px;">
        <a-col :span="8">
          <div class="fengxian">
            <div class="home-card fengxianTitle">
                <span>物业风险发现/处置</span> 
                <img src="@/assets/icon/qs.png" @click="openOutUrl1" style="height:20px;" alt=""> 
            </div>
            <div class="home-card fengxianBox">
              <a-row>
                <a-col class="justify-between">
                  <span style="font-size:16px;font-weight:600;">风险场景</span>
                  <!-- <img src="@/assets/icon/ddd.png" style="height:16px;" alt=""> -->
                </a-col>
              </a-row>
              <a-row class="align-stretch" style="padding:10px 0px;">
                <a-col :span="7">
                  <a-progress type="circle" :percent="disposal.alreadyDone/disposal.thisYearTotal*100" size="small" :showInfo="false" :strokeWidth="15" strokeColor="#46B3FF" :width="60" />
                </a-col>
                <a-col :span="16">
                  <div class="fengxianDisposalNum">
                    <span>已处置数/发现数</span>
                    <span style="color:#000;font-size:20px;font-weight:700;"><span style="color:#1890ff;">{{disposal.alreadyDone}}</span>/{{disposal.thisYearTotal}}</span>
                  </div>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <div style="height:100%">
                    <span>物业处置</span>
                    <span class="disposalDetailNum"> {{disposal.wyDone}} </span>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div style="height:100%">
                    <span>居委处置</span>
                    <span class="disposalDetailNum"> {{disposal.jwDone}} </span>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div style="height:100%">
                    <span>网格处置</span>
                    <span class="disposalDetailNum"> {{disposal.wgDone}} </span>
                  </div>
                </a-col>
              </a-row>
              <!-- <div class="gayLine" style="margin:10px 0px"></div>
              <a-row>
                <a-col style="display:flex;justify-content:space-between;">
                  <span style="font-weight:600;">其他委办局转派物业处置</span>
                  <img src="@/assets/icon/ddd.png" style="height:16px;" alt="">
                </a-col>
              </a-row>
              <a-row style="padding:10px 0px;display:flex;align-items:stretch;">
                <a-col :span="7">
                  <a-progress type="circle" :percent="12/58*100" size="small" :showInfo="false" :strokeWidth="15" strokeColor="#46B3FF" :width="60" />
                </a-col>
                <a-col :span="16">
                  <div style="display:flex;flex-direction:column;justify-content:space-around;height:100%">
                    <span>已处置数/转派总数</span>
                    <span style="color:#000;font-size:20px;font-weight:700;"><span style="color:#1890ff;">12</span>/58</span>
                  </div>
                </a-col>
              </a-row>  -->
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="baoxiu">
            <div class="home-card baoxiuTitle">
                <span>应急报修</span>
            </div>
            <div class="baoxiuBox">
              <div class="repair-top">
                <div class="baoxiuSecondTitle">
                  <p>转派区应急维修中心</p>
                  <img src="@/assets/icon/ddd.png" alt="" @click="toRepair('1', '2')">
                </div>
                <div class="baoxiuMiddleBox">
                  <div>
                    <a-progress type="circle" :percent="repair.yjwhcomplete/repair.yjwhtotal*100" size="small" :showInfo="false" :strokeWidth="15" strokeColor="#46B3FF" :width="40" />
                  </div> 
                  <div>
                    <span style="color:#555;">已完成数/已转派总数</span>
                    <span style="color:#000;font-size:1.3rem;font-weight:700;"><span style="color:#1890ff;">{{repair.yjwhcomplete}}</span>/{{repair.yjwhtotal}}</span>
                  </div>
                </div>
                <div class="baoxiuBottomBox">
                  <div>
                    <div class="baoxiuBottomBoxTitle"><span style="color:#555;">及时接单率</span><span style="color:#10C3C4;">{{repair.yjwhreceiveratio}}%</span></div>
                    <a-progress :percent="repair.yjwhreceiveratio" :showInfo="false" strokeColor="#96DDDE" :strokeWidth="7"/>
                  </div>
                  <div>
                    <div class="baoxiuBottomBoxTitle"><span style="color:#555;">及时处置率</span><span style="color:#10C3C4;">{{repair.yjwhhandleratio}}%</span></div>
                    <a-progress :percent="repair.yjwhhandleratio" :showInfo="false" strokeColor="#96DDDE" :strokeWidth="7"/>
                  </div>
                </div>
              </div>
              <div class="repair-btm">
                <div class="baoxiuSecondTitle">
                  <p>转派物业企业报修</p>
                  <img src="@/assets/icon/ddd.png" alt="" @click="toRepair('2', '1')">
                </div>
                <div class="baoxiuMiddleBox">
                  <div>
                    <a-progress type="circle" :percent="repair.wybxcomplete/repair.wybxtotal*100" size="small" :showInfo="false" :strokeWidth="15" strokeColor="#46B3FF" :width="40" />
                  </div> 
                  <div>
                    <span style="color:#555;">已完成数/已转派总数</span>
                    <span style="color:#000;font-size:1.3rem;font-weight:700;"><span style="color:#1890ff;">{{repair.wybxcomplete}}</span>/{{repair.wybxtotal}}</span>
                  </div>
                </div>
                <div class="baoxiuBottomBox">
                  <div>
                    <div class="baoxiuBottomBoxTitle"><span style="color:#555;">及时接单率</span><span style="color:#10C3C4;">{{repair.wybxreceiveratio}}%</span></div>
                    <a-progress :percent="repair.wybxreceiveratio" :showInfo="false" strokeColor="#96DDDE" :strokeWidth="7"/>
                  </div>
                  <div>
                    <div class="baoxiuBottomBoxTitle"><span style="color:#555;">及时处置率</span><span style="color:#10C3C4;">{{repair.wybxhandleratio}}%</span></div>
                    <a-progress :percent="repair.wybxhandleratio" :showInfo="false" strokeColor="#96DDDE" :strokeWidth="7"/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8">
          <div class="tousu">
            <img class="tousuIMG" src="@/assets/icon/sz.png" alt="" @click="toTousu">
            <a-tabs class="tousuQuestion" default-active-key="1" :activeKey="activeKey" @change="(key) => changeTabKey(key, 1)" style="height: 100%;" >
              <a-tab-pane key="1" tab="投诉问题"> 
                <a-tabs default-active-key="1" :activeKey="activeKey2" @change="(key) => changeTabKey(key, 2)" size="small">
                  <a-tab-pane key="1" tab="月排行"> 
                    <template v-if="tousuQuestionList.M&&tousuQuestionList.M.length>0">
                      <a-row class="tousuTabTitle">
                        <a-col :span="18">问题</a-col>
                        <a-col :span="4" :offset="2"> <span>数量</span> </a-col>
                      </a-row>
                      <a-row class="tousuContentRow" v-for="(item,i) in tousuQuestionList.M" :key="i">
                        <a-col class="tousuRankNum" :span="2">
                            <div class="row-number" :style="'background:'+(i>2?'#E5E6E7':'#000')+';line-height: 18px;color:'+(i>2?'#000':'#fff')">{{i+1}}</div>
                        </a-col>
                        <a-col :span="16">
                          <div class="tousuContent">
                            <a-tooltip>
                              <template slot="title">
                                {{item.name}}
                              </template>
                                {{item.name}}
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="4" :offset="2"> <span style="font-weight:600;">{{item.num}}</span></a-col>
                      </a-row>
                    </template>
                    <template v-else>
                      <div style="height: 100%;display:flex;align-items:center;justify-content:center;">
                        <div style="font-size:30px;font-weight:900;color:#ccc;">暂无数据</div>
                      </div>
                    </template>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="年度排行">
                    <template v-if="tousuQuestionList.Y&&tousuQuestionList.Y.length>0">
                      <a-row class="tousuTabTitle">
                        <a-col :span="18">问题</a-col>
                        <a-col :span="4" :offset="2"><span>数量</span></a-col>
                      </a-row>
                      <a-row v-for="(item,i) in tousuQuestionList.Y" :key="i" class="tousuContentRow">
                        <a-col :span="2" class="tousuRankNum">
                            <div class="row-number" :style="'background:'+(i>2?'#E5E6E7':'#000')+';line-height: 18px;color:'+(i>2?'#000':'#fff')">{{i+1}}</div>
                        </a-col>
                        <a-col :span="16">
                          <div class="tousuContent">
                            <a-tooltip>
                              <template slot="title">
                                {{item.name}}
                              </template>
                                {{item.name}}
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="4" :offset="2"> <span style="font-weight:600;">{{item.num}}</span></a-col>
                      </a-row>
                    </template>
                    <template v-else>
                      <div style="height: 100%;display:flex;align-items:center;justify-content:center;">
                        <div style="font-size:30px;font-weight:900;color:#ccc;">暂无数据</div>
                      </div>
                    </template>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="总排行">
                    <template v-if="tousuQuestionList.S&&tousuQuestionList.S.length>0">
                      <a-row class="tousuTabTitle">
                        <a-col :span="18">问题</a-col>
                        <a-col :span="4" :offset="2"><span>数量</span></a-col>
                      </a-row>
                      <a-row v-for="(item,i) in tousuQuestionList.S" :key="i" class="tousuContentRow">
                        <a-col :span="2" class="tousuRankNum">
                            <div class="row-number" :style="'background:'+(i>2?'#E5E6E7':'#000')+';line-height: 18px;color:'+(i>2?'#000':'#fff')">{{i+1}}</div>
                        </a-col>
                        <a-col :span="16">
                          <div class="tousuContent">
                            <a-tooltip>
                              <template slot="title">
                                {{item.name}}
                              </template>
                                {{item.name}}
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="4" :offset="2"> <span style="font-weight:600;">{{item.num}}</span></a-col>
                      </a-row>
                    </template>
                    <template v-else>
                      <div style="height: 100%;display:flex;align-items:center;justify-content:center;">
                        <div style="font-size:30px;font-weight:900;color:#ccc;">暂无数据</div>
                      </div>
                    </template>
                  </a-tab-pane>
                </a-tabs>
              </a-tab-pane>
              <a-tab-pane key="2" tab="投诉密度" >
                <a-tabs default-active-key="1" :activeKey="activeKey2" @change="(key) => changeTabKey(key, 2)" size="small">
                  <a-tab-pane key="1" tab="月排行">
                    <template v-if="tousuDensityList.M&&tousuDensityList.M.length>0">
                      <a-row class="tousuTabTitle">
                        <a-col :span="15">街道</a-col>
                        <a-col :span="7" :offset="2"><span>数量</span></a-col>
                      </a-row>
                      <a-row v-for="(item,i) in tousuDensityList.M" :key="i" class="tousuContentRow">
                        <a-col :span="2" class="tousuRankNum">
                            <div class="row-number" :style="'background:'+(i>2?'#E5E6E7':'#000')+';line-height: 18px;color:'+(i>2?'#000':'#fff')">{{i+1}}</div>
                        </a-col>
                        <a-col :span="13">
                          <div class="tousuContent">
                            <a-tooltip>
                              <template slot="title">
                                {{item.name}}
                              </template>
                                {{item.name}}
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="7" :offset="2"> <span style="font-weight:600;">{{Math.round(item.num)}}</span> <span>件/小区</span> </a-col>
                      </a-row>
                    </template>
                    <template v-else>
                      <div style="height: 100%;display:flex;align-items:center;justify-content:center;">
                        <div style="font-size:30px;font-weight:900;color:#ccc;">暂无数据</div>
                      </div>
                    </template>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="年度排行">
                    <template v-if="tousuDensityList.Y&&tousuDensityList.Y.length>0">
                      <a-row class="tousuTabTitle">
                        <a-col :span="15">街道</a-col>
                        <a-col :span="7" :offset="2"><span>数量</span></a-col>
                      </a-row>
                      <a-row v-for="(item,i) in tousuDensityList.Y" :key="i" class="tousuContentRow">
                        <a-col :span="2" class="tousuRankNum">
                            <div class="row-number" :style="'background:'+(i>2?'#E5E6E7':'#000')+';line-height: 18px;color:'+(i>2?'#000':'#fff')">{{i+1}}</div>
                        </a-col>
                        <a-col :span="13">
                          <div class="tousuContent">
                            <a-tooltip>
                              <template slot="title">
                                {{item.name}}
                              </template>
                                {{item.name}}
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="7" :offset="2"> <span style="font-weight:600;">{{Math.round(item.num)}}</span> <span>件/小区</span> </a-col>
                      </a-row>
                    </template>
                    <template v-else>
                      <div style="height: 100%;display:flex;align-items:center;justify-content:center;">
                        <div style="font-size:30px;font-weight:900;color:#ccc;">暂无数据</div>
                      </div>
                    </template>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="总排行">
                    <template v-if="tousuDensityList.S&&tousuDensityList.S.length>0">
                      <a-row class="tousuTabTitle">
                        <a-col :span="15">街道</a-col>
                        <a-col :span="7" :offset="2"><span>数量</span></a-col>
                      </a-row>
                      <a-row v-for="(item,i) in tousuDensityList.S" :key="i" class="tousuContentRow">
                        <a-col :span="2" class="tousuRankNum">
                            <div class="row-number" :style="'background:'+(i>2?'#E5E6E7':'#000')+';line-height: 18px;color:'+(i>2?'#000':'#fff')">{{i+1}}</div>
                        </a-col>
                        <a-col :span="13">
                          <div class="tousuContent">
                            <a-tooltip>
                              <template slot="title">
                                {{item.name}}
                              </template>
                                {{item.name}}
                            </a-tooltip>
                          </div>
                        </a-col>
                        <a-col :span="7" :offset="2"> <span style="font-weight:600;">{{Math.round(item.num)}}</span> <span>件/小区</span> </a-col>
                      </a-row>
                    </template>
                    <template v-else>
                      <div style="height: 100%;display:flex;align-items:center;justify-content:center;">
                        <div style="font-size:30px;font-weight:900;color:#ccc;">暂无数据</div>
                      </div>
                    </template>
                  </a-tab-pane>
                </a-tabs>
              </a-tab-pane>
            </a-tabs> 
          </div>
        </a-col>
      </a-row>
  </div>
</template>

<script>
import ok from '@/assets/icon/ok.png'
import nm from '@/assets/icon/nm.png' 
import qs from 'qs'
import axios from 'axios'

import ComplaintsTrain from '@/views/home/ComplaintsTrain' 
import EmergencyRepair from '@/views/home/EmergencyRepair' 
import IndustrySupervision from '@/views/home/IndustrySupervision' 
import ManagementModule from '@/views/home/ManagementModule' 
import RetrofitElevator from '@/views/home/RetrofitElevator' 
import RiskDisposal from '@/views/home/RiskDisposal' 
import FileModule from '@/views/home/FileModule' 

export default {
  name: 'HomePage',
  components: {
    ComplaintsTrain, 
    EmergencyRepair, 
    IndustrySupervision,
    ManagementModule, 
    RetrofitElevator,
    RiskDisposal,
    FileModule,
  },
  data() {
    return{
      ok,
      nm,
      date: new Date(),
      data: {},
      openConfig: false,
      disposal: {},
      nowMonth: '本月',
      checkStreet: 0,
      totStreet: 0,
      mounth: [
        {name: '1月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '2月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '3月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '4月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '5月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '6月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '7月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '8月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '9月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '10月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '11月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
        {name: '12月', check: false, hover: false, totStreet: 0, checkStreet: 0, class: '', }, 
      ],
      expired: 0,
      expireInFiveMonth: 0,
      theme: 0,
      sect: 0,
      receipts: 0,
      people: [],
      tousuQuestionList: {
        M: [],
        Y: [],
        S: [],
      },
      tousuDensityList: {
        M: [],
        Y: [],
        S: [],
      },
      repair: {
        yjwhtotal: 0, //应急维护总数
        yjwhcomplete: 0, //应急维护已完成数
        yjwhreceiveratio: 0, //应急维护接单率
        yjwhhandleratio: 0, //应急维护处置率
        wybxtotal: 0, //物业保修总数
        wybxcomplete: 0, //物业报修已完成率
        wybxreceiveratio: 0, //物业保修接单率
        wybxhandleratio: 0, //物业报修处置率
      },
      activeKey: '1',
      activeKey2: '1',
    }
  },
  created(){},
  mounted(){
    console.log('当前登录api: ' + this.$api.BASE_URL)
    this.getList()
    this.getConfig()
    this.getDisposal()
    this.getHouthMonth()
    this.getCheckData()
    this.getCheckPeople()
    this.getSectNum()
    this.getReceiptsNum()
    this.getRepair()
    this.getTousuQuestion('M')
    this.getTousuQuestion('Y')
    this.getTousuQuestion('S')
    this.getTousuDensity('M')
    this.getTousuDensity('Y')
    this.getTousuDensity('S')
  },
  methods: {
    /**
     * 点击月份
     */
    checkMonth(item){
      this.nowMonth = item.name
      this.checkStreet = item.checkStreet 
      for(let i=0;i<this.mounth.length;i++){
        if(this.mounth[i].name == item.name){
          this.mounth[i].class='hadCheckMonth'
        }else{
          this.mounth[i].class=''
        }
      }
    },
    hoverMonth(item){
      let time = new Date().getFullYear()
      // console.log(time+'-'+parseInt(item.name))
      this.$router.push({
        name: 'month',
        query: {
          month: time+'-'+parseInt(item.name)
        }
      })
    },
    /**
     * 获取dashboard数据
     */
    getList(){
      this.$ajax.get({
        url: this.$api.GET_RESOURE_LIST,
      }).then(res => {
        if (res.code === '200') {
          this.data = this.$com.confirm(res, 'data.content', []) 
        }
      })

      this.$ajax.get({
        url: this.$api.GET_ALREADY_OR_EXPIRE,
      }).then(res => {
        if (res.code === '200') {
          let inner = res.data.content
          this.expired = inner.willExpireCount
          this.expireInFiveMonth = inner.alreadyExpireCount
        }
      })
    },
    /**
     * 获取房办月查统计
     */
    getHouthMonth(){
      this.$ajax.get({
        url: this.$api.GET_HOUSE_MONTH,
      }).then(res => {
        if (res.code === '200') {
          let cont = this.$com.confirm(res, 'data.content', []) 
          this.totStreet = cont[0].totStreet
          for(let i=0;i<cont.length;i++){
            if(cont[i] && cont[i].month && cont[i].month>0){
              this.mounth[cont[i].month-1].check=true
              this.mounth[cont[i].month-1].checkStreet=cont[i].checkStreet
              this.mounth[cont[i].month-1].totStreet=cont[i].totStreet
            }
          } 
          let num = Number(this.$moment(this.date).format('MM'))
          this.mounth[num-1].class='hadCheckMonth'
          this.nowMonth = this.mounth[num-1].name
          this.checkStreet = this.mounth[num-1].checkStreet
        }
      })
    },
    /**
     * 获取以及报修统计
     */
    getRepair(){
      this.$ajax.get({
        url: this.$api.GET_REPAIR_STATISTICS,
      }).then(res => {
        if (res.code === '200') {
          this.repair = this.$com.confirm(res, 'data.content', [])
        }else{
          this.$message.error(res.msg, 10)
        }
      })
    },
    /**
     * 获取专项检查数据
     */
    getCheckData(){ 
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: this.$api.GET_CHWECK_DATA,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        flag: '0',
        someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => { 
          if (res.data.code === '200') {
            let data = this.$com.confirm(res, 'data.data.content', []) 
            this.theme=0
            for(let i=0;i<data.length;i++){
              if(data[i].THEMETYPE == '专项'){
                this.theme+=1
              }
            } 
          }
        }).catch(err => {
          this.$message.error(err.data.msg)
        })
    },
    /**
     * 获取检查人员数据
     */
    getCheckPeople(){ 
      let date= new Date()
      let startDate=this.$moment(date).format('YYYY-MM-DD')+' 00:00:00'
      let endDate=this.$moment(date).format('YYYY-MM-DD')+' 24:00:00'
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/getInspectors',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        startDate: startDate,
        endDate: endDate,
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => {  
          if (res.data.code === '200') {
            let data = this.$com.confirm(res, 'data.data.content', [])  
            if(data.lenght>8){
              this.people=data.slice(0, 7)
            }else{
              this.people=data
            }
          }
        }).catch(err => {
          this.$message.error(err.data.msg)
        })
    },
    /**
     * 获取已完成检查小区
     */
    getSectNum(){
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => {  
          this.sect =res.data.data.totalRows 
        }).catch(err => {
          this.$message.error(err.data.msg)
        }) 
    },
    /**
     * 获取已开整改单
     */
    getReceiptsNum(){ 
      const Axios = axios.create({
        baseURL: this.$api.BASE_URL,
        timeout: 15000,
      })
      let config = {
        method: 'post',
        url: 'http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/propertyinspector/api/v1/sharingplatform/sectListForOneDay',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        },
      }
      let params= {
        pageNo: 1,
        pageSize: 10000,
        isPublish: '1',
        someday: this.$moment(this.date).format('YYYY')+this.$moment(this.date).format('MM')+this.$moment(this.date).format('DD'),
        hpb_id: '310104000000'
      }
      config = Object.assign(config, { data: qs.stringify(params) })

      Axios(config)
        .then(res => {
          this.receipts =res.data.data.totalRows 
        }).catch(err => {
          this.$message.error(err.data.msg)
        }) 
    },
    /**
     * 获取处置单统计
     */
    getDisposal(){
      this.$ajax.get({
        url: this.$api.GET_HOME_DISPOSAL,
      }).then(res => {
        if (res.code === '200') {
          this.disposal = this.$com.confirm(res, 'data.content', [])
        }
      })
    },
    /**
     * 判断是否开启自定义字段
     */
    getConfig(){
      this.$ajax.get({
        url: this.$api.GET_CONFIG,
      }).then(res => {
        if (res.code === '200') {
          this.openConfig = this.$com.confirm(res, 'data.content', []).customKeyEnable
          // 是否开启自定义字段存入cookie
          this.$cookie.set('customKeyEnable', this.openConfig)
          let isXuHui = this.$com.confirm(res, 'data.content', [])
          this.$store.commit('CHANGE_ISXUHUI', isXuHui.projectArea == 'xuhui')
        }
      })
    },
    //调接口跳转专项检查页面
    toFangXunFangTai(){
      this.$ajax.get({
        url: this.$api.GET_JIANCHADIZHI,
      }).then(res => { 
        window.open(res)
      })
    },
    openOutUrl1(){
      window.open('http://962121.fgj.sh.gov.cn/wyweb/shanghaiwuye/web/dataV/riskmanagement/#/') 
    },
    openOutUrl2(){
      this.$ajax.get({
        url: this.$api.GET_WYGENERATE,
      }).then(res => {  
        window.open(res)
      })
    },
    /**
     * 去应急报修
     * @params {bxmaintainType} string
     */
    toRepair(bxmaintainType, signStatus){
      this.$router.push({
        name: 'repairList',
        query: {
          bxmaintainType: bxmaintainType,
          signStatus: signStatus
        }
      })
    },
    /**
     * 改变投诉的tab的key
     */
    changeTabKey(key, num){ 
      if(num == 1){
        this.activeKey = key
      }else if(num == 2){
        this.activeKey2 = key
      } 
    },
    /**
     * 获取投诉问题排行
     */
    getTousuQuestion(type){
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const params = {}
      if(type == 'M'){
        params.type = 'A' 
        params.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
      }else if(type == 'Y'){
        params.type = 'Y' 
        params.dateTime = year + ''
      }else if(type == 'S'){
        params.type = 'S' 
      }  
      params.tsNum_desc = 'desc'
      params.pageNo = 1
      params.pageSize = 8
      this.$ajax.get({
        url: this.$api.GET_TOUSUQUESTION_LIST,
        params: params
      }).then(res => {   
        if (res.code === '200') {
          this.tousuQuestionList[type] = this.$com.confirm(res, 'data.content.content', [])
        }
      })
    },
    /**
     * 获取投诉密度排行
     */
    getTousuDensity(type){
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const params = {}
      if(type == 'M'){
        params.type = 'A' 
        params.dateTime = year + '' + (String(month).length==1?'-0'+month:'-'+month)
      }else if(type == 'Y'){ 
        params.type = 'Y' 
        params.dateTime = year + ''
      }else if(type == 'S'){ 
        params.type = 'S' 
        params.dateTime = '20'
      } 
      params.pageNo = 1
      params.pageSize = 8
      this.$ajax.get({
        url: this.$api.GET_TOUSUDENSITY_LIST,
        params: params
      }).then(res => {  
        if (res.code === '200') {
          this.tousuDensityList[type] = this.$com.confirm(res, 'data.content.content', [])
        }
      })
    },
    handleExpired() {
      this.$router.push({name: 'indCous', query: {date: (this.$moment().format('L')).split('/').join('')}})
    },
    handleWillExpire() {
      this.$router.push({name: 'indCous', query: {date: (this.$moment().add('months', 5).format('L')).split('/').join('')}})
    },
    /**
     * 去投诉 
     */
    toTousu(){ 
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth()+1 
      const query = {}
      if(this.activeKey == '1'){
        if(this.activeKey2=='1'){
          query.type = 'M'
          query.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
        }else if(this.activeKey2=='2'){
          query.type = 'Y'
          query.dateTime = year + '' 
        }else if(this.activeKey2=='3'){
          query.type = 'S' 
        }
        this.$router.push({
          name: 'tousuQuestion',
          query: query
        })
      }else if(this.activeKey == '2'){
        if(this.activeKey2=='1'){
          query.type = 'M'
          query.tsMonthly = year + '' + (String(month).length==1?'-0'+month:'-'+month)
        }else if(this.activeKey2=='2'){
          query.type = 'Y'
          query.dateTime = year + '' 
        }else if(this.activeKey2=='3'){
          query.type = 'S' 
        }
        this.$router.push({
          name: 'tousuDensity',
          query: query
        })
      }
    },
  },
}
</script>

<style>

#home {
  width: 100%;
}
.home-card{
  background: #fff;
  padding: 15px;
}
.topBox{
  height: 100%;
}
.top-font{
  color:#818283;
  font-size:14px;
  margin-bottom:3px;
}
.top-count{
  color:#000;
  font-size:28px;
  font-weight:600;
  line-height:34px;
}

.top-count-extra{
  color:#000;
  font-size:24px;
  font-weight:600;
  line-height:24px;
}

.middle-right{
  text-align:center;
  height: calc(50% - 10px);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  cursor: pointer;
}
.middle-right p{
  font-size:14px;
  margin:5px 0px 0px 0px;
  font-weight:600;
}

.month{
  height:100%;
  background:#fff;
  margin-right:10px;
}
.monthTitle>span:first-child{
  font-weight:600;
  font-size:16px;
}
.monthTitleNum{
  font-size:16px;
  color:#0E7CFF;
  font-weight:600;
  vertical-align: baseline;
}
.monthBox{
  height:calc(100% - 55px);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items: stretch;
}
.monthImg{
  margin:10%;
  padding-top: calc(40% - 11px);
  padding-bottom: calc(40% - 11px);
  text-align:center;
  cursor: pointer;
  border:1px solid transparent;
  border-radius: 14%;
  position: relative;
}
.monthHover{
  z-index:999;
  position:absolute;
  bottom:0px;
  left:0;
  height:50%;
  background: rgba(0,0,0,0.5);
  width: 100%;
  color: #fff;
  border-radius: 0 0 14% 14%;
  display:none;
  line-height:100%; 
}
.monthHover div{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monthImg:hover .monthHover{
  /* height: 50%;
  color:#000; */
  display: block;
}
.zxjc .ant-progress-inner{
  background: #F4F5F6;
}
#home .ant-progress-inner{
  border: none;

}
#home .ant-tabs-tab-active.ant-tabs-tab{
  line-height: 31px;
}
/* #home .ant-tabs-bar.ant-tabs-top-bar{
  margin: 0px;
} */
/* #home .ant-tabs-content.ant-tabs-content-animated.ant-tabs-top-content{
  height: calc(100% - 55px);
} */
#home .ant-tabs-tabpane{
  padding: 0px 15px 10px 15px;
}
.justify-between{
  display:flex;
  justify-content:space-between;
}
.align-center{
  display:flex;
  align-items:center;
}
.align-stretch{
  display:flex;
  align-items:stretch;
}
.row-number{
    height: 18px;
    width: 18px;
    border-radius: 50%;
    text-align: center;
}
.green{
  color: #579D1F;
}
.blue{
  color: #2B87FE;
}
.hadCheckMonth.green {
  border-color: #579D1F;
}
.hadCheckMonth.blue {
  border-color: #2B87FE;
}

.jiancha{
  height:100%;
  background:#fff;
  margin:0px 10px;
}
.jianchaTitle>span{
  font-weight:600;
  font-size:16px;
}
.jianchaBox{
  padding:15px 0px ;
  height:100%;
}
.jianchaTheme{
  border-right:1px dashed #eee;
  padding:0px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  height:100%;
}

.jianchaThemeNum{
  color:#0477FF;
  font-weight:600;
}
.jianchaBoxRight{
  padding:0px 10px 0px 30px;
  height:100%;
}
.jianchaPeopleTitle{
  height:30px;
  display:inline-block;
  vertical-align: sub;
  font-weight:600;
}

.fengxian{
  height:100%;
  background:#fff;
  margin-right:10px;
}

.fengxianTitle>span{
  font-weight:600;
  font-size:16px;
}

.fengxianBox{
  display: flex;
  flex-direction: column;
  justify-content: space-around; 
  height: calc(100% - 55px);
}

.fengxianDisposalNum{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  height:100%;
}
 
.disposalDetailNum{
  color:#000;
  font-size:16px;
  font-weight:700;
  vertical-align:middle;
  color:#11C3C4;
}

.repair-top{
  margin: 0 0.7rem;
  padding-top: 0.7rem;
  padding-bottom: 0.3rem;
  flex:1;
  border-bottom: 1px dashed #eee;
}
.repair-btm{
  margin: 0 0.7rem;
  padding-top: 0.7rem;
  padding-bottom: 0.3rem;
  flex:1;
}
.baoxiu{
  height:100%;
  background:#fff;
  margin:0px 10px;
}

.baoxiuTitle, .fengxianTitle, .monthTitle, .jianchaTitle{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #eee;
}

.baoxiuTitle>span{
  font-weight:600;
  font-size:16px
}

.baoxiuBox{
  height:calc(100% - 55px);
  display:flex;
  flex-direction:column;
  font-size:0.8rem;
}

.baoxiuSecondTitle{
  display:flex;
  justify-content:space-between;
}

.baoxiuSecondTitle>p{
  font-size:0.8rem;
  color:#000;
  margin-bottom:0.3rem;
}

.baoxiuSecondTitle>img{
  height:1.2rem;
  margin-top:-0.3rem;
  cursor:pointer;
}

.baoxiuMiddleBox{
  display:flex;
}

.baoxiuMiddleBox>div:first-child{
  margin-right:0.5rem;
  display:flex;
  align-items:center;
}

.baoxiuMiddleBox>div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  height:100%;
}

.baoxiuBottomBox{
  display:flex;
  margin-top:0.3rem;
  justify-content:space-between;
}

.baoxiuBottomBox>div{
  width:45%;
}

.baoxiuBottomBoxTitle{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

#home .tousuQuestion>div {
  margin:0;
}

.tousu{
  height:100%;
  background:#fff;
  margin-left:10px;
  position:relative;
}

.tousuIMG{
  height:1.2rem;
  cursor:pointer;
  position:absolute;
  right:1rem;
  top:1rem;
  z-index: 10;
}
.tousuTabTitle{
  font-weight:600;
  margin-bottom:5px;
} 
.tousuContentRow{
  font-size:12px;
  display:flex;
  align-items:stretch;
  padding:3px 0px;
  text-align:left;
}

.tousuRankNum{
  display:flex;
  align-items:center;
}

.tousuContent{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topBox-l .inner{
  padding:1rem;
  width: 24%;
  display:flex;
  justify-content: space-between;
  background: #fff;
}

.topBox-l{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
}

/* 第二行 */
.secBox{
  margin-top: 1rem;
  width: 100%;
  display:flex;
  justify-content: space-between;
}
/* 第3行 */

.thirdBox{
  margin-top: 1rem;
  width: 100%;
  display:flex;
  justify-content: space-between;
}
/* 第四行 */
.fourthBox{
  margin-top: 1rem;
  width: 100%;
  display:flex;
  justify-content: space-between;
}

</style>
