zkPCproject/src/page/wel.vue

<template>
  <div class="box-center">
    <div class="app-title projectBackend">
      <div class="titel-text">筛选日期：</div>
      <div class="">
        <el-button
          :class="{ 'el-button--primary': TimetoAhoose == 0 }"
          @click="tabtimetap(0)"
          >今天</el-button
        >
        <el-button
          :class="{ 'el-button--primary': TimetoAhoose == 1 }"
          @click="tabtimetap(1)"
          >近7天</el-button
        >
        <el-button
          :class="{ 'el-button--primary': TimetoAhoose == 2 }"
          @click="tabtimetap(2)"
          >近30天</el-button
        >
      </div>
      <div style="margin-left: 26px">
        <el-date-picker
          @change="confirmtime()"
          v-model="customtime"
          :clearable="false"
          type="daterange"
          range-separator="-"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="house-only" v-if="role == 3 && info.userRoleType != 6">
      <!-- 项目后台 -->

      <!-- 卡片部分 -->
      <div class="page-container grid5 xxx">
        <div class="nopagechen projectCardItem">
          <div>
            <div class="pageboxtitle1">正在接待</div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span1">
                {{ cardlist.datalist.receivingCustomer || 0 }}
              </div>
            </div>
          </div>

          <div class="cardicon">
            <img src="../../public/img/indexIcon/indexCardIcon14.png" alt="" />
          </div>
        </div>
        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(1), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>接待量 (次)</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，已经结束的接待条数，不包含待接单；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.receptionCount || 0 }}
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon4.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.receptionCount || 0 }}</span
                >

                <span
                  class="span2-2"
                  v-if="cardlist.liftlist.receptionCount > 0"
                >
                  +{{ cardlist.liftlist.receptionCount || 0 }}
                  <i class="up"></i>
                </span>
                <span
                  class="span2-3"
                  v-if="cardlist.liftlist.receptionCount < 0"
                >
                  {{ cardlist.liftlist.receptionCount || 0 }}
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.receptionCount > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.receptionCount < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(2), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>有效接待(次)</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，标记为有效的接待数，不包含待接单；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.activeCustomer || 0 }}
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon5.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.activeCustomer || 0 }}</span
                >

                <span
                  class="span2-2"
                  v-if="cardlist.liftlist.activeCustomer > 0"
                >
                  +{{ cardlist.liftlist.activeCustomer || 0 }}
                  <i class="up"></i>
                </span>
                <span
                  class="span2-3"
                  v-if="cardlist.liftlist.activeCustomer < 0"
                >
                  {{ cardlist.liftlist.activeCustomer || 0 }}
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.activeCustomer > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.activeCustomer < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          class="pagechen projectCardItem"
          @click="
            toDetail(
              '/Statistics/ConsultantBrand',
              nowSelectTime(3),
              '顾问排名'
            )
          "
        >
          <div>
            <div class="pageboxtitle1">顾问(人)</div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span1">{{ cardlist.datalist.accountNum || 0 }}</div>
              <!-- <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.accountNum || 0 }}</span>
                <span class="span2-2" v-if="cardlist.liftlist.accountNum > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ cardlist.liftlist.accountNum || 0 }}
                </span>
                <span class="span2-3" v-if="cardlist.liftlist.accountNum < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ cardlist.liftlist.accountNum || 0 }}
                </span>
              </div> -->
            </div>
          </div>
          <div class="cardicon">
            <img src="../../public/img/indexIcon/indexCardIcon21.png" alt="" />
          </div>
        </div>
        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(2), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>平均执行率</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，有效接待（不包含待接单）的平均执行率；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">{{ cardlist.datalist.fraction || 0 }}%</div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon11.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.fraction || 0 }}</span
                >

                <span class="span2-2" v-if="cardlist.liftlist.fraction > 0">
                  +{{ cardlist.liftlist.fraction || 0 }}%
                  <i class="up"></i>
                </span>
                <span class="span2-3" v-if="cardlist.liftlist.fraction < 0">
                  {{ cardlist.liftlist.fraction || 0 }}%
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.fraction > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.fraction < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(2), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>平均接待时长(分钟)</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.avgDuration || 0 }}
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon7.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.avgDuration || 0 }}</span
                >

                <span class="span2-2" v-if="cardlist.liftlist.avgDuration > 0">
                  +{{ cardlist.liftlist.avgDuration || 0 }}
                  <i class="up"></i>
                </span>
                <span class="span2-3" v-if="cardlist.liftlist.avgDuration < 0">
                  {{ cardlist.liftlist.avgDuration || 0 }}
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.avgDuration > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.avgDuration < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- validInvalid;//是否为有效接待 0：有效  1：无效 -->

        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(4), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>违禁接待次数(次)</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.prohibitedCustomer || 0 }}
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon6.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.prohibitedCustomer || 0 }}</span
                >

                <span
                  class="span2-2"
                  v-if="cardlist.liftlist.prohibitedCustomer > 0"
                >
                  +{{ cardlist.liftlist.prohibitedCustomer || 0 }}
                  <i class="up"></i>
                </span>
                <span
                  class="span2-3"
                  v-if="cardlist.liftlist.prohibitedCustomer < 0"
                >
                  {{ cardlist.liftlist.prohibitedCustomer || 0 }}
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.prohibitedCustomer > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.prohibitedCustomer < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(4), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>违禁接待占比</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，违禁接待次数/有效接待*100%"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.prohibitedZb || 0 }}%
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon20.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.prohibitedZb || 0 }}</span
                >

                <span class="span2-2" v-if="cardlist.liftlist.prohibitedZb > 0">
                  +{{ cardlist.liftlist.prohibitedZb || 0 }}%
                  <i class="up"></i>
                </span>
                <span class="span2-3" v-if="cardlist.liftlist.prohibitedZb < 0">
                  {{ cardlist.liftlist.prohibitedZb || 0 }}%
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.prohibitedZb > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.prohibitedZb < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>

        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(4), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>平均挖掘执行率</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，已标记的有效接待需求挖掘执行的平均值；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.wordFraction || 0 }}%
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon11.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.wordFractionHb || 0 }}</span
                >

                <span class="span2-2" v-if="cardlist.liftlist.wordFractionHb > 0">
                  +{{ cardlist.liftlist.wordFractionHb || 0 }}%
                  <i class="up"></i>
                </span>
                <span class="span2-3" v-if="cardlist.liftlist.wordFractionHb < 0">
                  {{ cardlist.liftlist.wordFractionHb || 0 }}%
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.wordFractionHb > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.wordFractionHb < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          class="pagechen"
          @click="
            toDetail('/ReceivingRecords/index', nowSelectTime(4), '接待记录')
          "
        >
          <div style="width: 100%">
            <div class="pageboxtitle1 projectCardItem">
              <div class="sum">
                <div class="sum-top">
                  <div>平均挖掘成功率</div>
                  <el-tooltip
                    effect="light"
                    content="筛选时间内，已标记的有效接待需求挖掘率成功的平均值；"
                    placement="bottom-end"
                  >
                    <i class="pop"></i>
                  </el-tooltip>
                </div>
                <div class="span1">
                  {{ cardlist.datalist.wordFinishFraction || 0 }}%
                </div>
              </div>

              <div class="cardicon">
                <img
                  src="../../public/img/indexIcon/indexCardIcon11.png"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="pageboxtitle2 projectColumn">
              <div class="span2">
                <span class="span2-1">
                  环比:{{ cardlist.sequential.wordFinishFractionHb || 0 }}</span
                >

                <span class="span2-2" v-if="cardlist.liftlist.wordFinishFractionHb > 0">
                  +{{ cardlist.liftlist.wordFinishFractionHb || 0 }}%
                  <i class="up"></i>
                </span>
                <span class="span2-3" v-if="cardlist.liftlist.wordFinishFractionHb < 0">
                  {{ cardlist.liftlist.wordFinishFractionHb || 0 }}%
                  <i class="down"></i>
                </span>

                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.wordFinishFractionHb > 0"
                  >数据有所增长</span
                >
                <span
                  style="margin-left: 15px"
                  v-if="cardlist.liftlist.wordFinishFractionHb < 0"
                  >数据有所下降</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">
              场景执行分析
              <el-tooltip
                effect="light"
                content="筛选时间内，场景触达率=有效接待的场景执行率的之和/有效接待数，例如：品牌介绍，第1次接待执行了100%，第2次接待没有执行，场景触达率=（100+0）/2=50%；"
                placement="bottom-end"
              >
                <i class="pop"></i>
              </el-tooltip>
            </div>
          </div>
          <div
            v-if="indexZxllist.length == 0"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 60%;
              text-align: center;
              color: #909399;
            "
          >
            <div class="imgboxc" style="margin-top: 40px">
              <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
              <div class="nulltext" style="font-size: 14px">暂无数据</div>
            </div>
          </div>
          <div
            v-else
            class="tabbox"
            style="display: flex; flex-wrap: wrap; width: 90%; margin: 0 auto"
          >
            <div
              v-for="(item, index) in indexZxllist"
              :key="index"
              style="width: 33.3%; margin-top: 10px; cursor: pointer"
            >
              <div style="width: 130px; height: 100px; margin: 0 auto">
                <el-progress
                  :stroke-width="12"
                  :width="130"
                  type="circle"
                  :percentage="item.zxl"
                  :color="RandomColor(index)"
                ></el-progress>
              </div>
              <div style="width: 100%; text-align: center; margin-top: 20px">
                <el-tooltip :content="item.name" placement="top">
                  <div
                    style="
                      width: 80%;
                      text-align: center;
                      margin: 0 auto;
                      padding-top: 18px;
                    "
                  >
                    {{ item.name.substring(0, 6) }}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">顾问执行率排名(TOP10)</div>
          </div>

          <div
            v-if="employeeExecutionRatelist.list.length == 0"
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 60%;
              text-align: center;
              color: #909399;
            "
          >
            <div class="imgboxc" style="margin-top: 40px">
              <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
              <div class="nulltext" style="font-size: 14px">暂无数据</div>
            </div>
          </div>
          <div
            class="hejisan"
            v-if="employeeExecutionRatelist.list.length != 0"
          >
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">顾问</div>
              <div class="text1-2">
                {{ employeeExecutionRatelist.num || "" }}
              </div>
            </div>
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">平均执行</div>
              <div class="text1-2">
                {{ employeeExecutionRatelist.fraction || "" }}%
              </div>
            </div>
          </div>
          <div class="tabbox" v-if="employeeExecutionRatelist.list.length != 0">
            <div style="width: 94%; margin: 0 auto">
              <div
                class="jinbox"
                v-for="(item, i) in employeeExecutionRatelist.list"
                :key="i"
              >
                <div class="jinboxtit">
                  <span
                    class="sequenceNum"
                    :style="{
                      background:
                        i + 1 == 1
                          ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)'
                          : i + 1 == 2
                          ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)'
                          : i + 1 == 3
                          ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)'
                          : '#E5F0FF',
                      color:
                        i + 1 == 1
                          ? '#FFF'
                          : i + 1 == 2
                          ? '#FFF'
                          : i + 1 == 3
                          ? '#FFF'
                          : '#333',
                      'box-shadow':
                        i + 1 == 1
                          ? '0px 0px 6px 1px #F54D3F'
                          : i + 1 == 2
                          ? '0px 0px 6px 1px #FF981E'
                          : i + 1 == 3
                          ? '0px 0px 6px 1px #FFCC00'
                          : '#E5F0FF',
                      border:
                        i + 1 == 1
                          ? '1px solid #FFCAC6'
                          : i + 1 == 2
                          ? '1px solid #FFD6AA'
                          : i + 1 == 3
                          ? '1px solid #FFEEAC'
                          : 'none',
                    }"
                    >{{ i + 1 }}</span
                  ><span class="name">{{ item.accountName }}</span>
                </div>
                <div class="jinbox-box">
                  <div
                    class="boxbaifenbi"
                    :style="{
                      background:
                        i + 1 == 1
                          ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)'
                          : i + 1 == 2
                          ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)'
                          : i + 1 == 3
                          ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)'
                          : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)',
                      width: item.fraction + '%',
                    }"
                  ></div>
                </div>
                <div class="jinboxbott">{{ item.fraction }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">违禁提醒</div>
          </div>

          <div class="tabbox">
            <el-table
              :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
              :data="prohibitedlist"
              height="320"
              style="width: 100%; font-size: 14px"
            >
              <el-table-column prop="agentName" label="顾问" align="center">
              </el-table-column>

              <el-table-column prop="name" label="客户" align="center">
              </el-table-column>

              <el-table-column prop="staTime" label="接待时间" align="center">
              </el-table-column>

              <el-table-column prop="date" label="操作" align="center">
                <template slot-scope="{ row }">
                  <div
                    @click="goinfo(row)"
                    style="color: #2671e2; cursor: pointer"
                  >
                    查看
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="you">
          <div class="title" style="cursor: pointer">
            <el-badge
              :value="equNum"
              class="item"
              style="margin-right: 10px"
              :hidden="equNum == 0 ? true : false"
            >
              <div
                class="text1"
                @click="tabclick('1')"
                :class="{ colostyle: classatec == 1 }"
              >
                离线工牌
              </div>
            </el-badge>
            <el-badge
              :value="equNum1"
              class="item"
              :hidden="equNum1 == 0 ? true : false"
            >
              <div
                class="text1"
                @click="tabclick('0')"
                :class="{ colostyle: classatec == 0 }"
              >
                低电工牌
              </div>
            </el-badge>
          </div>
          <div class="tabbox" v-if="classatec == 0">
            <el-table
              :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
              :data="equipmentList"
              height="320"
              style="width: 100%; font-size: 14px"
              >>
              <el-table-column prop="accName" label="顾问" align="center">
              </el-table-column>

              <el-table-column prop="accPhone" label="电话" align="center">
              </el-table-column>
              <el-table-column prop="imei" label="设备号" align="center">
              </el-table-column>
              <el-table-column prop="address" label="录音状态" align="center">
                <template slot-scope="scope" style="">
                  <span v-if="scope.row.recCmd == 'start'">开启</span>
                  <span v-if="scope.row.recCmd == 'stop'">关闭</span>
                </template>
              </el-table-column>

              <el-table-column prop="electricity" label="电量" align="center">
              </el-table-column>
            </el-table>
          </div>
          <div class="tabbox" v-if="classatec == 1">
            <el-table
              :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
              :data="equipmentList"
              height="320"
              style="width: 100%; font-size: 14px"
            >
              <el-table-column prop="accName" label="顾问" align="center">
              </el-table-column>
              <el-table-column prop="accPhone" label="电话" align="center">
              </el-table-column>
              <el-table-column prop="imei" label="设备号" align="center">
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="离线时间"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <div v-if="role != 3 && info.userRoleType != 6" style="margin-top: 52px">
      <!-- 系统后台 -->
      <div style="margin-bottom: 10px; cursor: pointer" v-if="role != 2">
        <div style="font-weight: bold; font-size: 18px; margin-bottom: -5px">
          待处理
        </div>
        <div class="page-container" style="width: 100%">
          <div
            class="pagechen"
            style="margin-right: 14px"
            @click="jumpto('1')"
            v-if="role == 0"
          >
            <div class="pageboxtitle1">45天到期的代理商</div>
            <div class="pageboxtitle3">
              {{ sysTop.matuityOfAgent || 0 }}
            </div>
          </div>

          <div class="pagechen" style="margin-right: 14px" @click="jumpto('2')">
            <div class="pageboxtitle1">45天到期的项目</div>
            <div class="pageboxtitle3">
              {{ sysTop.matuityOfHouse || 0 }}
            </div>
          </div>

          <div class="pagechen" style="margin-right: 14px" @click="jumpto('3')">
            <div class="pageboxtitle1">离线设备</div>
            <div class="pageboxtitle3">
              {{ sysTop.offlineEquipmentQUantity || 0 }}
            </div>
          </div>

          <div class="pagechen" @click="jumpto('4')">
            <div class="pageboxtitle1">
              <div class="sum-top">
                <div>低电量设备</div>
                <el-tooltip
                  effect="light"
                  content="电量低于20%的设备"
                  placement="bottom-end"
                >
                  <i class="pop"></i>
                </el-tooltip>
              </div>
            </div>
            <div class="pageboxtitle3">
              {{ sysTop.lowElectricityEquipmentQuantity || 0 }}
            </div>
          </div>
        </div>
      </div>
      <div style="font-weight: bold; font-size: 18px; margin-bottom: -5px">
        数据简报
      </div>
      <!-- <div class="app-title projectBackend">
        <div class="titel-text">筛选日期：</div>
        <div class="">
          <el-button :class="{ 'el-button--primary': TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</el-button>
          <el-button :class="{ 'el-button--primary': TimetoAhoose == 1 }" @click="tabtimetap(1)">近7天</el-button>
          <el-button :class="{ 'el-button--primary': TimetoAhoose == 2 }" @click="tabtimetap(2)">近30天</el-button>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker @change="confirmtime()" v-model="customtime" :clearable="false" type="daterange"
            range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div> -->
      <div v-if="role != 2">
        <!-- 卡片部分 -->
        <div class="page-container grid4">
          <div
            class="pagechen"
            @click="toDetail('/building/index', getTimes(), '楼盘管理')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  新增项目数
                  <div class="span1">{{ sysSec.newAddHouseQuantity || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon8.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.newAddHouseQuantity || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.newAddHouseQuantity > 0">
                    +{{ orderBy.newAddHouseQuantity || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.newAddHouseQuantity < 0">
                    {{ orderBy.newAddHouseQuantity || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.newAddHouseQuantity > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.newAddHouseQuantity < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  活跃项目数
                  <div class="span1">{{ sysSec.activeHouseQuantity || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon1.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeHouseQuantity || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.activeHouseQuantity > 0">
                    +{{ orderBy.activeHouseQuantity || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.activeHouseQuantity < 0">
                    {{ orderBy.activeHouseQuantity || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeHouseQuantity > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeHouseQuantity < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>活跃设备数</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，有接待并上传录音的设备；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">
                    {{ sysSec.activeEquipmentQuantity || 0 }}
                  </div>
                </div>
                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon2.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeEquipmentQuantity || 0 }}</span
                  >

                  <span
                    class="span2-2"
                    v-if="orderBy.activeEquipmentQuantity > 0"
                  >
                    +{{ orderBy.activeEquipmentQuantity || 0 }}
                    <i class="up"></i>
                  </span>
                  <span
                    class="span2-3"
                    v-if="orderBy.activeEquipmentQuantity < 0"
                  >
                    {{ orderBy.activeEquipmentQuantity || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeEquipmentQuantity > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeEquipmentQuantity < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  录音总时长(小时)
                  <div class="span1">{{ sysSec.receptionTime || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon19.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.receptionTime || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.receptionTime > 0">
                    +{{ orderBy.receptionTime || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTime < 0">
                    {{ orderBy.receptionTime || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTime > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTime < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>接待量</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，已经结束的接待条数，不包含待接单；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>

                  <div class="span1">{{ sysSec.receptionCount || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon4.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.receptionCount || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.receptionCount > 0">
                    +{{ orderBy.receptionCount || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionCount < 0">
                    {{ orderBy.receptionCount || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionCount > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionCount < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="
              toDetail('/ReceivingRecords/index', 'validInvalid,0', '接待记录')
            "
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>有效接待</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，标记为有效的接待数，不包含待接单；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">{{ sysSec.activeCustomer || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon5.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeCustomer || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.activeCustomer > 0">
                    +{{ orderBy.activeCustomer || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.activeCustomer < 0">
                    {{ orderBy.activeCustomer || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeCustomer > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeCustomer < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="
              toDetail(
                '/ReceivingRecords/index',
                'taboo,1,dateType,0,validInvalid,0',
                '接待记录'
              )
            "
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>违禁接待次数</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">{{ sysSec.prohibitedCount || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon6.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.prohibitedCount || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.prohibitedCount > 0">
                    +{{ orderBy.prohibitedCount || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.prohibitedCount < 0">
                    {{ orderBy.prohibitedCount || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.prohibitedCount > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.prohibitedCount < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="
              toDetail('/ReceivingRecords/index', nowSelectTime(2), '接待记录')
            "
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>平均接待时长(分钟)</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">
                    {{ sysSec.receptionTimeWithAvg || 0 }}
                  </div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon7.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.receptionTimeWithAvg || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.receptionTimeWithAvg > 0">
                    +{{ orderBy.receptionTimeWithAvg || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTimeWithAvg < 0">
                    {{ orderBy.receptionTimeWithAvg || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTimeWithAvg > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTimeWithAvg < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- <div class="pagechen" @click="toDetail('/Equipment/index', '', '设备管理')">

            <div style="width:100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">销售设备数
                  <el-tooltip effect="light" content="筛选时间内，绑定正式+测试的楼盘的设备数;" placement="bottom-end">
                   <i class="pop"></i>
                  </el-tooltip>
                  <div class="span1">{{ sysSec.equipmentQuantityWithSold || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img src="../../public/img/indexIcon/indexCardIcon4.png" alt="" srcset="">
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.equipmentQuantityWithSold || 0 }}</span>

                  <span class="span2-2" v-if="orderBy.equipmentQuantityWithSold > 0">
                    +{{ orderBy.equipmentQuantityWithSold || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.equipmentQuantityWithSold < 0">
                    {{ orderBy.equipmentQuantityWithSold || 0 }}
                    <i class="down"></i>
                  </span>

                  <span style="margin-left:15px;" v-if="orderBy.equipmentQuantityWithSold > 0">数据有所增长</span>
                  <span style="margin-left:15px;" v-if="orderBy.equipmentQuantityWithSold < 0">数据有所下降</span>

                </div>
              </div>
            </div>

          </div> -->

          <!-- <div class="pagechen">

            <div style="width:100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">活跃用户数
                  <el-tooltip effect="light" content="筛选时间内，登录过系统的用户数;" placement="bottom-end">
                    <i class="pop"></i>
                  </el-tooltip>
                  <div class="span1">{{ sysSec.activeUserQuantity || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img src="../../public/img/indexIcon/indexCardIcon4.png" alt="" srcset="">
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeUserQuantity || 0 }}</span>

                  <span class="span2-2" v-if="orderBy.activeUserQuantity > 0">
                    +{{ orderBy.activeUserQuantity || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.activeUserQuantity < 0">
                    {{ orderBy.activeUserQuantity || 0 }}
                    <i class="down"></i>
                  </span>

                  <span style="margin-left:15px;" v-if="orderBy.activeUserQuantity > 0">数据有所增长</span>
                  <span style="margin-left:15px;" v-if="orderBy.activeUserQuantity < 0">数据有所下降</span>

                </div>
              </div>
            </div>


          </div> -->
        </div>
      </div>
      <div v-if="role == 2">
        <!-- 卡片部分 -->
        <div class="page-container grid4">
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>接待量</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，已经结束的接待条数，不包含待接单；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">{{ sysSec.receptionCount || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon4.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.receptionCount || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.receptionCount > 0">
                    +{{ orderBy.receptionCount || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionCount < 0">
                    {{ orderBy.receptionCount || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionCount > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionCount < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>有效接待</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，标记为有效的接待数，不包含待接单；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">{{ sysSec.activeCustomer || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon5.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeCustomer || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.activeCustomer > 0">
                    +{{ orderBy.activeCustomer || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.activeCustomer < 0">
                    {{ orderBy.activeCustomer || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeCustomer > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeCustomer < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>平均执行率</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，有效接待（不包含待接单）的平均执行率；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">{{ sysSec.avgFration || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon11.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.avgFration || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.avgFration > 0">
                    +{{ orderBy.avgFration || 0 }}%
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.avgFration < 0">
                    {{ orderBy.avgFration || 0 }}%
                    <i class="down"></i>
                  </span>

                  <span style="margin-left: 15px" v-if="orderBy.avgFration > 0"
                    >数据有所增长</span
                  >
                  <span style="margin-left: 15px" v-if="orderBy.avgFration < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>平均接待时长(分钟)</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">
                    {{ sysSec.receptionTimeWithAvg || 0 }}
                  </div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon7.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.receptionTimeWithAvg || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.receptionTimeWithAvg > 0">
                    +{{ orderBy.receptionTimeWithAvg || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTimeWithAvg < 0">
                    {{ orderBy.receptionTimeWithAvg || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTimeWithAvg > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTimeWithAvg < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>违禁接待次数</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">{{ sysSec.prohibitedCount || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon6.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.prohibitedCount || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.prohibitedCount > 0">
                    +{{ orderBy.prohibitedCount || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.prohibitedCount < 0">
                    {{ orderBy.prohibitedCount || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.prohibitedCount > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.prohibitedCount < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  接待时长(小时)
                  <div class="span1">{{ sysSec.receptionTime || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon16.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.receptionTime || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.receptionTime > 0">
                    +{{ orderBy.receptionTime || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTime < 0">
                    {{ orderBy.receptionTime || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTime > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.receptionTime < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  活跃项目数
                  <div class="span1">{{ sysSec.activeHouseQuantity || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon1.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeHouseQuantity || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.activeHouseQuantity > 0">
                    +{{ orderBy.activeHouseQuantity || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.activeHouseQuantity < 0">
                    {{ orderBy.activeHouseQuantity || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeHouseQuantity > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeHouseQuantity < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div
            class="pagechen"
            @click="toDetail('/building/Count', '', '项目统计')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  无效接待
                  <div class="span1">{{ sysSec.invalidCustomer || 0 }}</div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon8.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.invalidCustomer || 0 }}</span
                  >

                  <span class="span2-2" v-if="orderBy.invalidCustomer > 0">
                    +{{ orderBy.invalidCustomer || 0 }}
                    <i class="up"></i>
                  </span>
                  <span class="span2-3" v-if="orderBy.invalidCustomer < 0">
                    {{ orderBy.invalidCustomer || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.invalidCustomer > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.invalidCustomer < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div
            class="pagechen"
            @click="toDetail('/Equipment/state', '', '设备监控')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>活跃设备数</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，有接待并上传录音的设备;"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">
                    {{ sysSec.activeEquipmentQuantity || 0 }}
                  </div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon2.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeEquipmentQuantity || 0 }}</span
                  >

                  <span
                    class="span2-2"
                    v-if="orderBy.activeEquipmentQuantity > 0"
                  >
                    +{{ orderBy.activeEquipmentQuantity || 0 }}
                    <i class="up"></i>
                  </span>
                  <span
                    class="span2-3"
                    v-if="orderBy.activeEquipmentQuantity < 0"
                  >
                    {{ orderBy.activeEquipmentQuantity || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeEquipmentQuantity > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeEquipmentQuantity < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>

          <div
            class="pagechen"
            @click="toDetail('/Equipment/state', '', '设备监控')"
          >
            <div style="width: 100%">
              <div class="pageboxtitle1 projectCardItem">
                <div class="sum">
                  <div class="sum-top">
                    <div>活跃设备占比</div>
                    <el-tooltip
                      effect="light"
                      content="筛选时间内，活跃设备/总设备*100%；"
                      placement="bottom-end"
                    >
                      <i class="pop"></i>
                    </el-tooltip>
                  </div>
                  <div class="span1">
                    {{ sysSec.activeEquipmentQuantityZB || 0 }}%
                  </div>
                </div>

                <div class="cardicon">
                  <img
                    src="../../public/img/indexIcon/indexCardIcon13.png"
                    alt=""
                    srcset=""
                  />
                </div>
              </div>
              <div class="pageboxtitle2 projectColumn">
                <div class="span2">
                  <span class="span2-1">
                    环比:{{ sysCompare.activeEquipmentQuantityZB || 0 }}</span
                  >

                  <span
                    class="span2-2"
                    v-if="orderBy.activeEquipmentQuantityZB > 0"
                  >
                    +{{ orderBy.activeEquipmentQuantityZB || 0 }}
                    <i class="up"></i>
                  </span>
                  <span
                    class="span2-3"
                    v-if="orderBy.activeEquipmentQuantityZB < 0"
                  >
                    {{ orderBy.activeEquipmentQuantityZB || 0 }}
                    <i class="down"></i>
                  </span>

                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeEquipmentQuantityZB > 0"
                    >数据有所增长</span
                  >
                  <span
                    style="margin-left: 15px"
                    v-if="orderBy.activeEquipmentQuantityZB < 0"
                    >数据有所下降</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="app-box-san">
        <div class="zuo">
          <div class="title1">
            <div>
              {{ role == 2 ? "项目排名（TOP10）" : "公司排名（TOP10）" }}
            </div>
            <div style="display: flex; cursor: pointer">
              <div
                class="text1"
                style="margin-right: 10px"
                @click="chooseCompanyRank('classatec1', 0)"
                :class="{ colostyle: classatec1 == 0 }"
              >
                接待量
              </div>
              <div
                class="text1"
                @click="chooseCompanyRank('classatec1', 1)"
                :class="{ colostyle: classatec1 == 1 }"
              >
                平均执行率
              </div>
            </div>
          </div>
          <div class="tabbox">
            <el-table
              :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
              :data="companyRank"
              style="width: 100%; font-size: 14px"
            >
              <el-table-column
                prop="companyName"
                :label="role == 2 ? '项目名称' : '公司名称'"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ role != 2 ? row.companyName : row.houseName }}
                </template>
              </el-table-column>

              <el-table-column
                v-if="classatec1 == 0"
                prop="receptionCount"
                label="接待量"
                align="center"
              >
              </el-table-column>
              <el-table-column
                v-if="classatec1 == 0"
                prop="receptionTime"
                label="接待时长（小时）"
                align="center"
              >
              </el-table-column>
              <el-table-column
                v-if="classatec1 == 1"
                prop="avgFration"
                label="平均执行率"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ row.avgFration || 0 }}%
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="you">
          <div class="title1" style="cursor: pointer">
            <div>
              {{ role == 2 ? "顾问排名（TOP10）" : "项目排名（TOP10）" }}
            </div>
            <div style="display: flex">
              <div
                class="text1"
                style="margin-right: 10px"
                @click="chooseCompanyRank('classatec2', 0)"
                :class="{ colostyle: classatec2 == 0 }"
              >
                接待量
              </div>
              <div
                class="text1"
                @click="chooseCompanyRank('classatec2', 1)"
                :class="{ colostyle: classatec2 == 1 }"
              >
                平均执行率
              </div>
            </div>
          </div>

          <div class="tabbox">
            <el-table
              :header-cell-style="{ background: '#F5F7FA', color: '#333333' }"
              :data="houseRank"
              style="width: 100%; font-size: 14px; cursor: pointer"
              >>
              <el-table-column
                prop="houseName"
                :label="role == 2 ? '顾问名称' : '项目名称'"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ role != 2 ? row.houseName : row.accountName }}
                </template>
              </el-table-column>

              <el-table-column
                prop="receptionCount"
                v-if="classatec2 == 0"
                label="接待量"
                align="center"
              >
              </el-table-column>

              <el-table-column
                v-if="classatec2 == 0"
                prop="receptionTime"
                label="接待时长（小时）"
                align="center"
              >
              </el-table-column>
              <el-table-column
                v-if="classatec2 == 1"
                prop="avgFration"
                label="平均执行率"
                align="center"
              >
                <template slot-scope="{ row }">
                  {{ row.avgFration || 0 }}%
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="info.userRoleType == 6"
      style="text-align: center; font-size: 30px; margin: 300px auto"
    >
      欢迎光临
    </div>
  </div>
</template>

<script>
import { getStore, setStore } from "@/util/store";
import { mapGetters } from "vuex";
export default {
  name: "Wel",
  data() {
    return {
      role: "",
      houseId: "",
      houseList: [],
      houseRank: [],
      allHouseRank: {}, // 全部的项目排名
      companyRank: [],
      allCompanyRank: {}, // 全部的排名列表
      classatec: 1,
      classatec1: 0,
      classatec2: 0,
      customtime: [],
      statDateStart: "",
      statDateEnd: "",
      TimetoAhoose: 1,
      equNum: 0,
      equNum1: 0,
      cardlist: {
        datalist: {},
        liftlist: {},
        sequential: {},
      },
      sysData: {},
      orderBy: {},
      sysCompare: {},
      sysTop: {},
      sysSec: {},
      tableData: [],
      equipmentList: [],
      prohibitedlist: [],
      indexZxllist: [],
      employeeExecutionRatelist: {
        num: "",
        list: [],
        fraction: "",
      },
    };
  },

  computed: {
    ...mapGetters(["permissions"]),
    info() {
      return this.$store.state.user.userInfo;
    },
    RandomColor() {
      return (index) => {
        switch (index) {
          case 0:
            return "#5B8FF9";
            break;
          case 1:
            return "#07B79D";
            break;
          case 2:
            return "#9B6BDF";
            break;
          case 3:
            return "#F6BD16";
            break;
          case 4:
            return "#E6625B";
            break;
          case 5:
            return "#88AA9D";
            break;
          case 6:
            return "#F575AB";
            break;
          case 7:
            return "#29689A";
            break;
          case 8:
            return "#9A4329";
            break;
          case 9:
            return "#9A6BE0";
            break;
          case 10:
            return "#1E89B7";
            break;
          case 11:
            return "#0D9A31";
            break;
          case 12:
            return "#92F512";
            break;
          case 13:
            return "#F5D312";
            break;
          case 14:
            return "#12F5C8";
            break;
          case 15:
            return "#B967E3";
            break;
          case 16:
            return "#7379FB";
            break;
          case 17:
            return "#FB7385";
            break;
          case 18:
            return "#FBF973";
            break;
          default:
            return "#138BFB";
        }
      };
    },
  },

  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");

      this.getgicd();
      // 获取维度占比
      this.getindexZxllist();
      // 员工执行率
      this.getemployeeExecutionRatelist();
      // 违禁提醒列表
      this.findProhibitedRecord();
      // 获取设备
      this.findAllZkEquipment();
    } else {
      // 公司
      this.waitingForOperation();
    }
  },
  methods: {
    // 当前选中时间类型之接待记录
    /**
     * 1、接待量跳转
     * 2、有效接待、平均执行率、平均接待时长：打开接待页面，筛选条件：日期+有效接待
     * 3、顾问：打开顾问排名，筛选条件：时间；
     * 4、违禁接待次数、违禁接待占比：打开接待记录，筛选条件：日期+违禁是+有效接待；
     * */
    nowSelectTime(type) {
      let str = "";
      switch (type) {
        case 1:
          if (this.TimetoAhoose == 0) {
            str = `dateType,${this.TimetoAhoose}`;
          } else if (this.TimetoAhoose == 1) {
            str = `dateType,${2}`;
          } else {
            str = "";
          }
          break;
        case 2:
          if (this.TimetoAhoose == 0) {
            str = `dateType,${this.TimetoAhoose}&validInvalid,0`;
          } else if (this.TimetoAhoose == 1) {
            str = `dateType,${2}&validInvalid,0`;
          } else {
            str = "validInvalid,0";
          }
          break;
        case 3:
          if (this.TimetoAhoose == 0) {
            str = `dateType,0`;
          } else if (this.TimetoAhoose == 1) {
            str = `dateType,4`;
          } else {
            str = "dateType,6";
          }
          break;
        case 4:
          if (this.TimetoAhoose == 0) {
            str = `dateType,${this.TimetoAhoose}&taboo,1&validInvalid,0`;
          } else if (this.TimetoAhoose == 1) {
            str = `dateType,${2}&taboo,1&validInvalid,0`;
          } else {
            str = "taboo,1&validInvalid,0";
          }
          break;
      }

      return str;
    },

    // 跳转详情
    toDetail(path, params2 = "", name) {
      if (path == "") return;
      if (!this.hasRoute(name, this.$router.options.routes)) {
        this.$message.error("您没有此权限，请联系管理员添加该菜单权限");
        return;
      }
      this.$router.push({
        path: path,
        query: {
          date: this.customtime.join(","), // 筛选时间
          types: params2, // 类型
        },
      });
    },

    // 是否存在此路由
    hasRoute(name, routeList) {
      !routeList &&
        ((routeList = this.$router.options.routes), console.log("执行"));
      for (let i = 0; i < routeList.length; i++) {
        if (routeList[i].name === name) {
          return true;
        }
        if (routeList[i].children) {
          let flag = this.hasRoute(name, routeList[i].children);
          if (flag) {
            return flag;
          }
        }
      }
      return false;
    },

    goinfo(row) {
      this.$api.http.findByCusIdcusId({ cusId: row.id }).then((res) => {
        if (res.data.length == 0) {
          this.$message({
            message: "无录音",
            type: "warning",
          });
        } else {
          this.$router.push({
            path: "/Receive/index",
            query: { flag: row.id, AudioIdx: 0 },
          });
        }
      });
    },
    // 获取时间段
    getTimes() {
      let str = "";
      let time = new Date().getTime();
      if (this.TimetoAhoose == 0) {
        str = `${new Date(time).getFullYear()}-${
          new Date(time).getMonth() + 1
        }-${new Date(time).getDate()}`;
      }
      if (this.TimetoAhoose == 1) {
        let starTime = new Date().getTime() - 24 * 60 * 60 * 1000 * 7;
        let startDate = `${new Date(starTime).getFullYear()}-${
          new Date(starTime).getMonth() + 1
        }-${new Date(starTime).getDate()}`;
        let endTime = new Date().getTime() - 24 * 60 * 60 * 1000;
        let endDate = `${new Date(endTime).getFullYear()}-${
          new Date(endTime).getMonth() + 1
        }-${new Date(endTime).getDate()}`;
        str = `${startDate},${endDate}`;
      }
      if (this.TimetoAhoose == 2) {
        let starTime = new Date().getTime() - 24 * 60 * 60 * 1000 * 30;
        let startDate = `${new Date(starTime).getFullYear()}-${
          new Date(starTime).getMonth() + 1
        }-${new Date(starTime).getDate()}`;
        let endTime = new Date().getTime() - 24 * 60 * 60 * 1000;
        let endDate = `${new Date(endTime).getFullYear()}-${
          new Date(endTime).getMonth() + 1
        }-${new Date(endTime).getDate()}`;
        str = `${startDate},${endDate}`;
      }
      return str;
    },

    jumpto(ind) {
      let num = 24 * 3600 * 1000 * 29;
      let dang = this.getCurrentTime();
      let timevt = this.timestampToTime(new Date(dang).getTime() + num);
      let newtime = [dang, timevt];
      if (ind == 1) {
        this.$router.push({
          path: "/Customer/AgentManagement",
          query: { residueTime: newtime, serviceStatus: 0 },
        });
      } else if (ind == 2) {
        this.$router.push({
          path: "/building/index",
          query: { residueTime: newtime, serviceStatus: 0 },
        });
      } else if (ind == 3) {
        this.$router.push({
          path: "/Equipment/state",
          query: { flag: 1, selValue: 2 },
        });
      } else {
        this.$router.push({
          path: "/Equipment/state",
          query: { flag: 2, electricity: 20 },
        });
      }
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var yyyy = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var dd = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return yyyy + MM + dd;
    },
    getCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      if (mm < 10) {
        mm = "0" + mm;
      }
      let dd = new Date().getDate();
      // console.log(dd,'时间')
      if (dd < 10) {
        dd = "0" + dd;
      }
      let gettime = yy + "-" + mm + "-" + dd;
      return gettime;
    },
    //切换项目
    houseChange() {
      this.TimetoAhoose = 0;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.getgicd();
      this.findProhibitedRecord();
    },
    // 系统获取第一个数据
    waitingForOperation() {
      let obj = {
        dateType: this.TimetoAhoose == 5 ? null : this.TimetoAhoose,
        // dateType: 1,
        orderBy: 1,
        startDate: this.statDateStart,
        endDate: this.statDateEnd,
        orgType: localStorage.getItem("orgType"),
      };
      if (this.role == 1) {
        obj.agentId = localStorage.getItem("agentId") / 1;
      }
      if (this.role == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.waitingForOperation(obj).then((res) => {
        // console.log(res);
        // this.sysData=res.data
        this.sysTop = res.data.top;
        this.sysSec = res.data.midA;
        this.sysCompare = res.data.midB;
        this.orderBy = res.data.midC;
        if (this.role == 2) {
          this.houseRank = res.data.accountRank.avgFraction;
          this.companyRank = res.data.houseRank.avgFraction;
          this.allHouseRank = res.data.houseRank;
          this.allCompanyRank = res.data.accountRank;
        } else {
          this.houseRank = res.data.houseRank.avgFraction || [];
          this.allHouseRank = res.data.houseRank;
          this.allCompanyRank = res.data.companyRank;
          this.companyRank = res.data.companyRank.avgFraction || [];
        }
      });
    },

    // 选择公司类型切换 classatec1 公司/项目   classatec2 项目/顾问
    chooseCompanyRank(keys, index) {
      this[keys] = index;
      console.log(keys);
      console.log(this.role, "123891273892178937129837");
      if (this.role != 2) {
        if (keys == "classatec1") {
          if (index == 0) {
            this.companyRank = this.allCompanyRank.receptionCount;
          } else {
            this.companyRank = this.allCompanyRank.avgFraction;
          }
        } else {
          if (index == 0) {
            this.houseRank = this.allHouseRank.receptionCount;
          } else {
            this.houseRank = this.allHouseRank.avgFraction;
          }
        }
      } else {
        if (keys == "classatec1") {
          if (index == 0) {
            this.houseRank = this.allCompanyRank.avgFraction;
          } else {
            this.houseRank = this.allCompanyRank.receptionCount;
          }
        } else {
          if (index == 0) {
            this.companyRank = this.allHouseRank.avgFraction;
          } else {
            this.companyRank = this.allHouseRank.receptionCount;
          }
        }
      }
    },

    //获取项目
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.getgicd();
          this.getindexZxllist();
          this.getemployeeExecutionRatelist();
          this.findProhibitedRecord();
          this.findAllZkEquipment();
        });
    },
    //获取卡片数据
    getgicd() {
      let obj = {
        houseId: this.houseId,
        dateType: this.TimetoAhoose == 5 ? null : this.TimetoAhoose,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      this.$api.http.houseIndex(obj).then((res) => {
        this.cardlist.datalist = {
          receptionCount: res.data.todayStat.receptionCount,
          activeCustomer: res.data.todayStat.activeCustomer,
          receivingCustomer: res.data.todayStat.receivingCustomer,
          avgDuration: res.data.todayStat.avgDuration,
          fraction: res.data.todayStat.fraction,
          prohibitedCustomer: res.data.todayStat.prohibitedCustomer,
          prohibitedZb: res.data.todayStat.prohibitedZb,
          accountNum: res.data.todayStat.accountNum,
        };
        this.cardlist.liftlist = {
          receptionCount: res.data.comparedStat.receptionCount,
          activeCustomer: res.data.comparedStat.activeCustomer,
          receivingCustomer: res.data.comparedStat.receivingCustomer,
          avgDuration: res.data.comparedStat.avgDuration,
          fraction: res.data.comparedStat.fraction,
          prohibitedCustomer: res.data.comparedStat.prohibitedCustomer,
          prohibitedZb: res.data.comparedStat.prohibitedZb,
          accountNum: res.data.comparedStat.accountNum,
        };
        this.cardlist.sequential = {
          receptionCount: res.data.yesterdayStat.receptionCount,
          activeCustomer: res.data.yesterdayStat.activeCustomer,
          receivingCustomer: res.data.yesterdayStat.receivingCustomer,
          avgDuration: res.data.yesterdayStat.avgDuration,
          fraction: res.data.yesterdayStat.fraction,
          prohibitedCustomer: res.data.yesterdayStat.prohibitedCustomer,
          prohibitedZb: res.data.yesterdayStat.prohibitedZb,
          accountNum: res.data.yesterdayStat.accountNum,
        };
      });
    },
    //获取设备
    findAllZkEquipment() {
      this.equipmentList = [];
      this.$api.http
        .findAllZkEquipment({
          onLine: this.classatec,
          houseId: this.houseId,
        })
        .then((res) => {
          // 在这里赋值 低电
          this.equNum = res.data.offline;
          this.equNum1 = res.data.lowpower;
          this.equipmentList = res.data.list;
        });
    },
    //获取违禁提醒列表
    findProhibitedRecord() {
      this.prohibitedlist = [];
      this.$api.http
        .findProhibitedRecord({
          houseId: this.houseId,
          dateType: this.TimetoAhoose == 5 ? null : this.TimetoAhoose,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
        })
        .then((res) => {
          this.prohibitedlist = res.data;
        });
    },
    getindexZxllist() {
      this.indexZxllist = [];
      this.$api.http
        .getindexZxllist({
          houseId: this.houseId,
          dateType: this.TimetoAhoose == 5 ? null : this.TimetoAhoose,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
        })
        .then((res) => {
          this.indexZxllist = res.data.list || [];
        });
    },
    getemployeeExecutionRatelist() {
      this.employeeExecutionRatelist = {
        num: "",
        list: [],
        fraction: "",
      };
      this.$api.http
        .getemployeeExecutionRatelist({
          houseId: this.houseId,
          dateType: this.TimetoAhoose == 5 ? null : this.TimetoAhoose,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
        })
        .then((res) => {
          this.employeeExecutionRatelist = res.data;
        });
    },

    tabclick(i) {
      this.classatec = i;
      this.findAllZkEquipment();
    },
    tabclick2(e) {
      console.log(e);
    },
    tabclick1(e) {
      console.log(e);
    },
    tabtimetap(i) {
      this.statDateStart = "";
      this.statDateEnd = "";
      this.customtime = [];
      this.TimetoAhoose = i;
      console.log(this.role);
      if (this.role == 3) {
        this.getgicd();
        this.getindexZxllist();
        this.getemployeeExecutionRatelist();
        this.findProhibitedRecord();
      } else {
        this.waitingForOperation();
      }
    },
    //切换时间
    confirmtime() {
      this.statDateStart = this.customtime[0];
      this.statDateEnd = this.customtime[1];
      console.log(this.customtime);
      this.TimetoAhoose = 5;
      if (this.role == 3) {
        this.getgicd();
        this.getindexZxllist();
        this.getemployeeExecutionRatelist();
        this.findProhibitedRecord();
      } else {
        this.waitingForOperation();
      }
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.imgboxc-img {
  width: 120px;
  height: 120px;
}

.box-center {
  width: 100%;
  padding: 20px 15px 40px;
  // min-width: 1000px;
}

.house-only {
  .pagechen {
    cursor: pointer;
  }
}

.xxx {
  margin-top: 55px !important;
}

.grid4 {
  display: grid !important;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 12px;
  grid-row-gap: 18px;
}

.grid5 {
  display: grid !important;
  grid-template-columns: repeat(5, 20%);
  grid-column-gap: 12px;
  grid-row-gap: 18px;
}

.page-container {
  width: 97%;
  display: flex;
  margin-top: 16px;

  .projectCardItem {
    display: flex;
    justify-content: space-between;

    .cardicon {
      width: 54px;
      height: 54px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .nopagechen {
    flex: 1;
    // min-width: 190px;
    background: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    // margin-right: 20px;
    padding: 12px;
    border-bottom: 3px solid #fff;
    transition: all 0.3s linear;

    .pageboxtitle1 {
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
    }

    .projectCardItem {
      .sum {
        .sum-top {
          display: flex;
          align-items: center;
        }
        .span1 {
          width: 100px;
          height: 30px;
          font-size: 30px;
          font-weight: normal;
          color: #32363d;
          line-height: 30px;
          margin-top: 10px;
        }
      }
    }

    .projectColumn {
      display: flex;
      flex-direction: column;

      .span2 {
        font-size: 14px !important;
        align-items: center !important;

        .span2-2 {
          display: flex;
          font-weight: 600;
          color: rgba(231, 72, 60, 1);
          background: rgba(253, 240, 239, 1);
          align-items: center;
          padding: 3px 12px;
          border-radius: 3px;

          .up {
            display: block;
            width: 20px;
            height: 15px;
            background: url("../../public/img/indexIcon/indexCardUp.png")
              no-repeat;
            background-size: 100%;
            margin-left: 8px;
          }
        }

        .span2-3 {
          display: flex;
          font-weight: 600;
          color: rgba(7, 183, 157, 1);
          background: rgba(235, 250, 246, 1);
          align-items: center;
          padding: 3px 12px;
          border-radius: 3px;

          .down {
            display: block;
            width: 20px;
            height: 15px;
            background: url("../../public/img/indexIcon/indexCardDown.png")
              no-repeat;
            background-size: 100%;
            margin-left: 8px;
          }
        }
      }
    }

    .pageboxtitle2 {
      width: 100%;
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;

      .span1 {
        width: 100px;
        height: 30px;
        font-size: 30px;
        font-weight: normal;
        color: #32363d;
        line-height: 30px;
      }

      .span2 {
        height: 30px;
        font-size: 16px;
        display: flex;
        align-items: flex-end;

        .span2-1 {
          color: #424d64;
          margin-right: 15px;
          font-weight: 400;
        }

        .span2-2 {
          display: flex;
          font-weight: 600;
          color: rgba(231, 72, 60, 1);
        }

        .span2-3 {
          display: flex;
          font-weight: 600;
          color: rgba(7, 183, 157, 1);
        }
      }
    }

    .pageboxtitle3 {
      text-align: center;
      font-size: 30px;
      line-height: 44px;
    }
  }

  .pagechen {
    flex: 1;
    // min-width: 190px;
    background: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    // margin-right: 20px;
    padding: 12px;
    border-bottom: 3px solid #fff;
    transition: all 0.3s linear;
    cursor: pointer;

    &:hover {
      border-bottom: 3px solid #2671e2;
    }

    .pageboxtitle1 {
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
      .sum-top {
        display: flex;
        align-items: center;
      }
    }

    .projectCardItem {
      .sum {
        .sum-top {
          display: flex;
          align-items: center;
        }
        .span1 {
          width: 100px;
          height: 30px;
          font-size: 30px;
          font-weight: normal;
          color: #32363d;
          line-height: 30px;
          margin-top: 10px;
        }
      }
    }

    .projectColumn {
      display: flex;
      flex-direction: column;

      .span2 {
        font-size: 14px !important;
        align-items: center !important;

        .span2-2 {
          display: flex;
          font-weight: 600;
          color: rgba(231, 72, 60, 1);
          background: rgba(253, 240, 239, 1);
          align-items: center;
          padding: 3px 12px;
          border-radius: 3px;

          .up {
            display: block;
            width: 20px;
            height: 15px;
            background: url("../../public/img/indexIcon/indexCardUp.png")
              no-repeat;
            background-size: 100%;
            margin-left: 8px;
          }
        }

        .span2-3 {
          display: flex;
          font-weight: 600;
          color: rgba(7, 183, 157, 1);
          background: rgba(235, 250, 246, 1);
          align-items: center;
          padding: 3px 12px;
          border-radius: 3px;

          .down {
            display: block;
            width: 20px;
            height: 15px;
            background: url("../../public/img/indexIcon/indexCardDown.png")
              no-repeat;
            background-size: 100%;
            margin-left: 8px;
          }
        }
      }
    }

    .pageboxtitle2 {
      width: 100%;
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;

      .span1 {
        width: 100px;
        height: 30px;
        font-size: 30px;
        font-weight: normal;
        color: #32363d;
        line-height: 30px;
      }

      .span2 {
        height: 30px;
        font-size: 16px;
        display: flex;
        align-items: flex-end;

        .span2-1 {
          color: #424d64;
          margin-right: 15px;
          font-weight: 400;
        }

        .span2-2 {
          display: flex;
          font-weight: 600;
          color: rgba(231, 72, 60, 1);
        }

        .span2-3 {
          display: flex;
          font-weight: 600;
          color: rgba(7, 183, 157, 1);
        }
      }
    }

    .pageboxtitle3 {
      text-align: center;
      font-size: 30px;
      line-height: 44px;
    }
  }
}

.colostyle {
  color: #2671e2;
  // font-size: 18px;
  font-weight: 600;
}

.table-box {
  width: 98.8%;
  height: 400px;
  background: #ffffff;
  border-radius: 4px;
  margin-top: 24px;

  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-indent: 30px;
    font-weight: 500;
    color: #32363d;
    // border-bottom: 1px solid #E6E6E6;
  }

  .tabbox {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    min-height: 320px;
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.app-box-san {
  width: 100%;
  min-height: 350px;
  display: flex;
  margin-top: 15px;

  .zuo {
    padding: 0 15px 15px;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    width: 48.7%;
    flex-grow: 1;

    .title {
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;

      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        align-items: center;
      }
    }
  }

  .you {
    flex-grow: 1;
    width: 49%;
    background: #ffffff;
    border-radius: 4px;
    padding: 0 15px 15px;

    .title {
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;

      .text1 {
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}

.projectBackend {
  background: #ffffff;
  padding: 12px 15px;
  border-radius: 5px;
}

.app-title {
  position: fixed;
  z-index: 999;
  margin-top: -16px;
  box-shadow: 0px 0px 10px 0px #dadada;
  display: flex;
  align-items: center;
  left: 255px;
  right: 15px;

  .titel-text {
    height: 100%;
    font-size: 16px;
    color: #32363d;
  }

  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }

  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 24px;
  align-items: center;

  .jinboxtit {
    width: 20%;
    height: 18px;
    padding-right: 6px;

    display: flex;
    align-items: center;

    .sequenceNum {
      display: flex;
      width: 24px;
      height: 24px;
      justify-content: center;
      align-items: center;
      background: #e5f0ff;
      border-radius: 15px;
      color: #333333;
    }

    .name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-left: 10px;
    }
  }

  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }

  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
    max-width: 100%;
  }

  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
    max-width: 100%;
  }

  .jinboxbott {
    width: 16%;
    text-indent: 50px;
  }
}

.hejisan {
  width: 100%;
  margin: 15px auto;
  display: flex;

  .sanbox1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .text1-1 {
    color: #666666;
  }

  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}

.title1 {
  width: 100%;
  height: 55px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  line-height: 55px;
}

/deep/ .el-badge__content {
  top: 10px;
}
/deep/ .el-table::before {
  background: #fff;
}
.pop {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../../public/img/pop.png");
  background-size: 100%;
  margin-left: 6px;
}
/deep/ .el-button--primary {
  background: #2671e2 !important;
  border: 1px solid #2671e2 !important;
}
</style>