<template>
  <div class="box-center">
    <div class="titlebox1" v-if="orgType != 3">
      <div style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        ">
        <el-select v-model="houseTypes" @change="sysChange" style="width: 100px; margin-right: 10px" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <span class="demonstration">项目名称：</span> -->
        <el-select v-model="selValue" @change="selChange" style="width: 100px" placeholder="请选择">
          <el-option label="代理商" v-if="orgType == 0" value="0"></el-option>
          <el-option label="公司" v-if="orgType != 2" value="1"></el-option>
          <el-option label="项目" value="2"></el-option>
        </el-select>
        <!-- <div style="width: 200px">
          <el-select
            v-model="houseId"
            filterable
            placeholder="请选择"
            @change="change"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div> -->
        <div style="margin-left: 26px" v-if="selValue == 1">
          <el-select v-model="houseId" filterable placeholder="默认为全部" @change="change">
            <el-option v-for="item in houseList" :key="item.orgCode" :label="item.name" :value="item.orgCode">
            </el-option>
          </el-select>
        </div>
        <!-- 项目 -->
        <div style="margin-left: 26px" v-else-if="selValue == 2">
          <el-select v-model="houseId" filterable placeholder="默认为全部" @change="change">
            <el-option v-for="item in houseList" :key="item.id" :label="item.propertyName" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 26px" v-else>
          <el-select v-model="houseId" filterable placeholder="默认为全部" @change="change">
            <el-option v-for="item in houseList" :key="item.id" :label="item.agentName" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: auto; margin-right: 10px" v-if="equ_ed_download">
          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
        </div>
      </div>
      <div style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
          padding-right: 18px;
        ">
        <span style="min-width: 80px" class="demonstration">使用时间：</span>
        <div style="margin-left:15px">
          <!-- <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">
            近30天
          </div> -->
          <el-button
                :class="{ 'el-button--primary': timeType == 4 }"
                @click="tabtimetap(4)"
                >近7天</el-button
              >
              <el-button
                :class="{ 'el-button--primary': timeType == 5 }"
                @click="tabtimetap(5)"
                >近15天</el-button
              >
              <el-button
              style="margin-right:15px"
                :class="{ 'el-button--primary': timeType == 6 }"
                @click="tabtimetap(6)"
                >近30天</el-button
              >
        </div>
        <el-date-picker @change="confirmtime" v-model="customtime" type="daterange" range-separator="-"
          :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd" start-placeholder="开始日期"
          end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
        <div style="margin-left: 10px; margin-top: 8px">
          <el-checkbox v-model="checked" @change="radioChange">对比时间段</el-checkbox>
        </div>
        <div v-if="checked" style="
            margin-left: 20px;
            border: 1px solid #dcdfe6;
            min-width: 220px;
            height: 32px;
            border-radius: 4px;
            max-width: 360px;
            font-size: 13px;
            line-height: 32px;
            text-indent: 8px;
            cursor: pointer;
          " @click="show">
          <div style="display: flex">
            <div style="min-width: 60px">
              {{ selectTime1 ? "时段二： " : "请选择： " }}
            </div>
            <div v-if="selectTime1" style="display: flex">
              <!-- {{ selectTime+ "-" + selectTime1}} -->
              <div style="min-width: 120px; text-align: center">
                {{ selectTime }}
              </div>
              <span>-</span>
              <div style="min-width: 120px; text-align: center; margin-right: 32px">
                {{ selectTime1 }}
              </div>
            </div>
          </div>
          <el-date-picker style="opacity: 0" v-model="time" @change="timeChange" ref="time" :validate-event="false"
            type="date" placeholder="选择日期" format="yyyy - MM - dd " value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </div>
    </div>

    <div class="titlebox" :style="{ 'marginTop': orgType != 3 ? '120px' : '0px' }">


      <div class="kapiannox">
        <div class="alllistbox tabcard">

          <el-card shadow="hover" :class="compareFlag == 0 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(0, '设备总数')">
              <div class="text1">
                设备总数
              </div>
              <div class="text2">
                {{ details.equipmentQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.equipmentQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.equipmentQuantity > 0">
                  +{{ compare.equipmentQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.equipmentQuantity < 0">
                  {{ compare.equipmentQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 1 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(1, '在线设备数')">
              <div class="text1">
                在线设备数
                <el-tooltip effect="light" content="筛选时间内，联网的设备；" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.onlineQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.onlineQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.onlineQuantity > 0">
                  +{{ compare.onlineQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.onlineQuantity < 0">
                  {{ compare.onlineQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 2 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(2, '在线设备平均占比')">
              <div class="text1">
                在线设备占比
              </div>
              <div class="text2">
                {{ details.onlineRate || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.onlineRate || 0 }}</span>
                <span class="textUp" v-if="compare.onlineRate > 0">
                  +{{ compare.onlineRate || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.onlineRate < 0">
                  {{ compare.onlineRate || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 3 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(3, '活跃设备数')">
              <div class="text1">
                活跃设备数
                <el-tooltip effect="light" content="筛选时间内，有接待并上传录音的设备；" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.activeQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.activeQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.activeQuantity > 0">
                  +{{ compare.activeQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.activeQuantity < 0">
                  {{ compare.activeQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 4 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(4, '活跃设备平均占比')">
              <div class="text1">
                活跃设备占比
              </div>
              <div class="text2">
                {{ details.activeRate || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.activeRate || 0 }}</span>
                <span class="textUp" v-if="compare.activeRate > 0">
                  +{{ compare.activeRate || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.activeRate < 0">
                  {{ compare.activeRate || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 5 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(5, '指派次数')">
              <div class="text1">
                指派次数
                <el-tooltip effect="light" content="筛选时间内，指派给设备的接待数，不包含接待中；" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.assignQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.assignQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.assignQuantity > 0">
                  +{{ compare.assignQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.assignQuantity < 0">
                  {{ compare.assignQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 6 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(6, '完整录音次数')">
              <div class="text1">
                完整录音次数
                <el-tooltip effect="light" content="筛选时间内，接待中录音正常开启（指派时间与录音开启时间相差小于5分钟）和录音正常关闭（结束录音时间晚于结束接待时间）的接待数；"
                  placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.normalRecordQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.normalRecordQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.normalRecordQuantity > 0">
                  +{{ compare.normalRecordQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.normalRecordQuantity < 0">
                  {{ compare.normalRecordQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 7 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(7, '完整录音占比')">
              <div class="text1">完整录音占比
                <el-tooltip effect="light" content="筛选时间内，完整录音次数/指派次数*100%;" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.fullRecordRate || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.fullRecordRate || 0 }}</span>
                <span class="textUp" v-if="compare.fullRecordRate > 0">
                  +{{ compare.fullRecordRate || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.fullRecordRate < 0">
                  {{ compare.fullRecordRate || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 8 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(8, '部分录音')">
              <div class="text1">部分录音次数
                <el-tooltip effect="light" content="筛选时间内，接待中录音未及时开启（指派时间与录音开启时间相差大于于5分钟）或录音提前关闭（未结束，就关闭了录音）的接待数；"
                  placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.snippetRecordQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.snippetRecordQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.snippetRecordQuantity > 0">
                  +{{ compare.snippetRecordQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.snippetRecordQuantity < 0">
                  {{ compare.snippetRecordQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 9 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(9, '未录音')">
              <div class="text1">未录音次数
                <el-tooltip effect="light" content="筛选时间内，指派的接待，没有录音的接待；" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.noRecordQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.noRecordQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.noRecordQuantity > 0">
                  +{{ compare.noRecordQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.noRecordQuantity < 0">
                  {{ compare.noRecordQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 10 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(10, '正常关机次数')">
              <div class="text1">正常关机次数
                <el-tooltip effect="light" content="筛选时间内，手动关机的次数;" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.normalShutdownQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.normalShutdownQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.normalShutdownQuantity > 0">
                  +{{ compare.normalShutdownQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.normalShutdownQuantity < 0">
                  {{ compare.normalShutdownQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 11 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(11, '低电关机次数')">
              <div class="text1">低电关机次数
                <el-tooltip effect="light" content="筛选时间内，由于电量用完关机的次数;" placement="bottom-end">
                  <i class="pop"></i>
                </el-tooltip>
              </div>
              <div class="text2">
                {{ details.lowElectricityQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.lowElectricityQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.lowElectricityQuantity > 0">
                  +{{ compare.lowElectricityQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.lowElectricityQuantity < 0">
                  {{ compare.lowElectricityQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
          <el-card shadow="hover" :class="compareFlag == 12 ? 'tophovese' : 'noactive'">
            <div @click="compareChange(12, '异常关机次数')">
              <div class="text1">异常关机次数
              </div>
              <div class="text2">
                {{ details.abnormalShutdownQuantity || 0 }}
              </div>
              <div class="text3" v-if="selectTime1">
                <span>环比 {{ details1.abnormalShutdownQuantity || 0 }}</span>
                <span class="textUp" v-if="compare.abnormalShutdownQuantity > 0">
                  +{{ compare.abnormalShutdownQuantity || 0 }}
                  <i class="up"></i>
                </span>
                <span class="textDown" v-if="compare.abnormalShutdownQuantity < 0">
                  {{ compare.abnormalShutdownQuantity || 0 }}
                  <i class="down"></i>
                </span>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!-- v-if="selectTime1" -->
    <div style="margin-top: 15px">
      <div class="zgutteruo">
        <div class="zgutteruo-tit">对比</div>
        <div id="compare" style="width: 100%; height: 360px"></div>
      </div>
    </div>
    <div style="margin-top: 15px" v-if="!selectTime1">
      <el-row :gutter="40">
        <el-col :span="12">
          <div class="zgutteruo">
            <div class="zgutteruo-tit">录音结果占比</div>
            <img v-if="odata1" style="width: 260px; height: 260px;margin: 50px auto;display: block;"
              src="/img/Elementcircle.png" alt="" />
            <div v-else id="mane" style="width: 100%; height: 360px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="zgutteruo">
            <div class="zgutteruo-tit">关机类型占比</div>
            <img v-if="odata2" style="width: 260px; height: 260px;margin: 50px auto;display: block;"
              src="/img/Elementcircle.png" alt="" />
            <div v-else id="mane2" style="width: 100%; height: 360px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="tablebox" v-if="!selectTime1">
      <template>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#333333'}">
          <el-table-column prop="createTime" label="日期" width="100" align="center">
          </el-table-column>
          <el-table-column prop="equipmentQuantity" label="设备总数" align="center">
          </el-table-column>
          <el-table-column prop="onlineQuantity " label="在线设备" align="center">
            <template slot-scope="scope">
              {{ scope.row.onlineQuantity || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="onlineRate" label="在线设备占比" align="center">
            <template slot-scope="scope">
              {{ (scope.row.onlineRate || 0) + "%" }}
            </template>
          </el-table-column>
          <el-table-column prop="activeQuantity" label="活跃设备" align="center">
          </el-table-column>
          <el-table-column prop="activeRate" label="活跃设备占比" align="center">
            <template slot-scope="scope">
              {{ (scope.row.activeRate || 0) + "%" }}
            </template>
          </el-table-column>
          <el-table-column prop="assignQuantity" label="指派次数" align="center">
          </el-table-column>
          <el-table-column prop="normalRecordQuantity" label="完整录音次数" align="center">
          </el-table-column>
          <el-table-column prop="fullRecordRate" label="完整录音占比" align="center">
            <template slot-scope="scope">
              {{ (scope.row.fullRecordRate || 0) + "%" }}
            </template>
          </el-table-column>
          <el-table-column prop="snippetRecordQuantity" label="部分录音" align="center">
          </el-table-column>
          <el-table-column prop="noRecordQuantity" label="未录音" align="center">
          </el-table-column>
          <el-table-column prop="normalShutdownQuantity" label="正常关机次数" align="center">
          </el-table-column>
          <el-table-column prop="lowElectricityQuantity" label="低电关机次数" align="center">
          </el-table-column>
          <el-table-column prop="abnormalShutdownQuantity" label="异常关机次数" align="center">
          </el-table-column>
          <el-table-column v-if="equ_ed_online" prop="" label="操作" fixed="right" width="200" align="center">
            <template slot-scope="{ row }">
              <el-button @click.native.prevent="goinfo(row, 0)" type="text" size="small">在线记录</el-button>
              <el-button @click.native.prevent="goinfo(row, 1)" type="text" size="small">指派记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[10, 30, 50]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </div>
    </div>

    <div class="tablebox" v-if="selectTime1">
      <template>
        <el-table :data="compareList" style="width: 100%" height="640" :header-cell-style="{background:'#F5F7FA',color:'#333333'}">
          <el-table-column prop="name" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="time" label="时段一" align="center">
            <template slot-scope="{ row }">
              <span v-if="compareFlag == 4 || compareFlag == 7 || compareFlag == 2">
                {{ row.time }}%</span>
              <span v-else> {{ row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time1" label="时段二" align="center">
            <template slot-scope="{ row }">
              <span v-if="compareFlag == 4 || compareFlag == 7 || compareFlag == 2">
                {{ row.time1 }}%</span>
              <span v-else> {{ row.time1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="time2" label="变化" align="center">
            <template slot-scope="scope">
              <span :style="
                scope.row.time2.substring(0, 1) == '-' ||
                  scope.row.time2.substring(0, 1) == '0'
                  ? 'color:green;'
                  : 'color:red;'
              ">{{ scope.row.time2 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="pageSize"
          :page-sizes="[10, 30, 50]" :page-size="pageNum" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
import colorTheme from "@/util/theme.color"
export default {
  data() {
    return {
      houseId: "",
      timeType: 0,
      orgType: localStorage.getItem("orgType"),
      selValue:
        localStorage.getItem("orgType") == 0
          ? "0"
          : localStorage.getItem("orgType") == 1
            ? "1"
            : "2",
      time: "",
      compareFlag: "0",
      selectTime: "",
      selectTime1: "",
      customtime: [],
      tableData: [],
      currentPage4: 1,
      currentPage3: 1,
      checked: false,
      houseList: [],
      compareList: [],
      flag: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total: 10,
        recording: "",
      },
      pickerOptions: {
        disabledDate(time) {
          //根据当前日期 --- 禁止选中之后的日期
          // return time.getTime() > Date.now();
        },
      },
      details: {
        equipmentQuantity: "",
        onlineQuantity: "",
        onlineRate: "",
        activeQuantity: "",
        activeRate: "",
        assignQuantity: "",
        normalRecordQuantity: "",
        fullRecordRate: "",
        snippetRecordQuantity: "",
        noRecordQuantity: "",
        normalShutdownQuantity: "",
        lowElectricityQuantity: "",
        abnormalShutdownQuantity: "",
      },
      details1: {
        equipmentQuantity: "",
        onlineQuantity: "",
        onlineRate: "",
        activeQuantity: "",
        activeRate: "",
        assignQuantity: "",
        normalRecordQuantity: "",
        fullRecordRate: "",
        snippetRecordQuantity: "",
        noRecordQuantity: "",
        normalShutdownQuantity: "",
        lowElectricityQuantity: "",
        abnormalShutdownQuantity: "",
      },
      compare: {
        equipmentQuantity: "",
        onlineQuantity: "",
        onlineRate: "",
        activeQuantity: "",
        activeRate: "",
        assignQuantity: "",
        normalRecordQuantity: "",
        fullRecordRate: "",
        snippetRecordQuantity: "",
        noRecordQuantity: "",
        normalShutdownQuantity: "",
        lowElectricityQuantity: "",
        abnormalShutdownQuantity: "",
      },
      pageSize: 30,
      pageNum: 1,
      total: 10,
      allCompare: {},
      options: [
        {
          value: "0",
          label: "无录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
      ],
      options2: [
        {
          label: "正式数据",
          value: "0,1",
        },
        {
          label: "测试数据",
          value: "2,3",
        },
      ],
      houseTypes: "0,1",
      odata1: false,
      odata2: false,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.equ_ed_online = this.permissions["equ_ed_online"];
    this.equ_ed_download = this.permissions["equ_ed_download"];
  },
  mounted() {
    // return;
    let theRequest = this.$route.query;
    console.log(theRequest, '123') //此时的theRequest就是我们需要的参数；
    if (theRequest.houseId) {
      this.flag = true;
      this.houseId = theRequest.houseId;
      this.timeType = theRequest.timeType || -1;
      this.selValue = "2"
    } else {
      this.flag = false;
      // console.log(1);
      this.timeType = 4;
    }
    if (theRequest.startDate) {
      this.page.openTime = theRequest.startDate;
      this.page.closeTime = theRequest.endDate;
      this.customtime = [theRequest.startDate, theRequest.endDate];
      // console.log(this.customtime);
      this.$forceUpdate();
    }
    this.getHouseList();
    // this.customtime=[] ;
    this.tableData = [];
    this.tableData1 = [];
    // this.getTableList()
  },
  methods: {
    downLoad() {
      // this.searchForm
      let obj = {
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        agentId:
          localStorage.getItem("orgType") == 1
            ? localStorage.getItem("agentId")
            : this.selValue == 0
              ? this.houseId
              : null,
        orgCode:
          localStorage.getItem("orgType") == 2
            ? localStorage.getItem("orgCode")
            : this.selValue == 1
              ? this.houseId
              : null,
        houseId:
          localStorage.getItem("orgType") == 3
            ? localStorage.getItem("houseId")
            : this.selValue == 2
              ? this.houseId
              : null,
        timeType: this.timeType,
        orgType: localStorage.getItem("orgType"),
        queryOrgType: this.selValue / 1 + 1,
        houseTypes: this.houseTypes,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      exportMethodPost(
        "autoSR/zk/equipment/detail/equipmentCountDetailExport",
        "设备使用统计",
        obj
      );
    },
    sysChange() {
      this.selValue = "0";
      this.choicValue = "";
      this.timeType = 4;
      this.houseId = "";
      this.getHouseList();
    },
    selChange() {
      this.choicValue = "";
      this.timeType = 4;
      this.houseId = "";
      this.getHouseList();
      // this.getTableList();
      // this.getdetail();
      // // 获取对比列表
      // this.getcompare();
    },
    // 没有对比时的折线图
    getNoCompare() {
      this.compareFlag = 0;
      let obj = {
        // current: this.pageNum,
        // pageSize: this.pageNum,
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        agentId:
          localStorage.getItem("orgType") == 1
            ? localStorage.getItem("agentId")
            : this.selValue == 0
              ? this.houseId
              : null,
        orgCode:
          localStorage.getItem("orgType") == 2
            ? localStorage.getItem("orgCode")
            : this.selValue == 1
              ? this.houseId
              : null,
        houseId:
          localStorage.getItem("orgType") == 3
            ? localStorage.getItem("houseId")
            : this.selValue == 2
              ? this.houseId
              : null,
        timeType: this.timeType,
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
        orgType: localStorage.getItem("orgType"),
        queryOrgType: this.selValue / 1 + 1,
        houseTypes: this.houseTypes,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `autoSR/zk/equipment/detail/usageTrendContrast`,
        method: "get",
        params: obj,
      }).then((res) => {
        console.log(res);
      });
    },
    radioChange() {
      this.selectTime = "";
      this.selectTime1 = "";
      this.compareList = [];
      this.$set(this, "time", null);
      this.getcompare();
    },
    goinfo(row, idx) {
      console.log(row, "信息");
      this.$router.push({
        path: "/Equipment/equipmentOnlineRecordList",
        query: {
          houseId: this.houseId,
          startDate: row.createTime,
          endDate: row.createTime,
          flag: idx,
        },
      });
    },
    compareChange(idx, str) {
      // if (!this.selectTime1) return;
      this.compareFlag = idx;
      this.tabChange(idx, str);
    },
    timeChange(e) {
      this.selectTime = "";
      this.selectTime1 = "";
      this.pageNum = 1;
      // this.page.pageNum=1
      this.timeSelect(e);
      this.getdetail();
      this.getcompare();
    },
    timeSelect(e) {
      console.log(this.$refs.time);
      if (this.timeType == -1) {
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(
          new Date(e).getTime() +
          new Date(this.page.closeTime).getTime() -
          new Date(this.page.openTime).getTime()
        );
      } else {
        //	获取今天昨天近一周
        //	获取一天的时间戳
        let num = 24 * 3600 * 1000;
        //	获取当前时间戳转换为日期格式
        if (this.timeType == 4) {
          num = 24 * 3600 * 1000 * 6;
        }
        if (this.timeType == 5) {
          num = 24 * 3600 * 1000 * 14;
        }
        if (this.timeType == 6) {
          num = 24 * 3600 * 1000 * 29;
        }
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
    },
    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;
    },
    change() {
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.getTableList();
      this.getdetail();
      // 获取对比列表
      this.getcompare();
    },
    show() {
      this.$refs.time.pickerVisible = true;
    },
    //时间补0
    Zeropadding(s) {
      return s < 10 ? "0" + s : s;
    },
    tabtimetap(i) {
      this.timeType = i;
      // this.getTableList()
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.pageNum = 1;
      this.page.pageNum = 1;
      //给时间选择器赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (this.timeType == 4) {
        num = 24 * 3600 * 1000 * 7;
      }
      if (this.timeType == 5) {
        num = 24 * 3600 * 1000 * 15;
      }
      if (this.timeType == 6) {
        num = 24 * 3600 * 1000 * 30;
      }
      console.log('ashjdklasjkldasjdlks')
      if (i != -1) {
        this.customtime = [
          this.timestampToTime(new Date().getTime() - num),
          this.timestampToTime(new Date().getTime() - 24 * 3600 * 1000),
        ];
      }

      this.$set(this, "time", null);
      this.getTableList();
      this.getdetail();
      this.getcompare();
    },
    screening() {
      this.page.pageNum = 1;
      this.page.pageSize = 10;
      this.getTableList();
    },
    empty() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total: "",
      };
      this.customtime = "";
      this.getTableList();
    },
    //时间选择
    confirmtime(e) {
      this.timeType = "-1";
      this.checked = false;
      this.selectTime = "";
      this.pageNum = 1;
      this.page.pageNum = 1;
      this.selectTime1 = "";
      this.$set(this, "time", null);
      console.log(e);
      if (!e) return;
      this.page.openTime = this.customtime[0];
      this.page.closeTime = this.customtime[1];
      this.getTableList();
      this.getdetail();
      this.getcompare();
    },
    //获取项目数据
    getHouseList() {
      if (this.selValue == 1) {
        this.$api.api
          .findMyOrg({
            orgType: localStorage.getItem("orgType"),
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.tabtimetap(this.timeType);
            this.getTableList();
          });
      } else if (this.selValue == 2) {
        this.$api.api
          .findHouseByUser({
            orgType: localStorage.getItem("orgType"),
            houseId: localStorage.getItem("houseId"),
            houseTypes: this.houseTypes,
          })
          .then((res) => {
            this.houseList = res.data;
            this.tabtimetap(this.timeType);
            this.getTableList();
          });
      } else {
        this.$api.api
          .findMyAgent({
            orgType: localStorage.getItem("orgType"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.tabtimetap(this.timeType);
            this.getTableList();
          });
      }

      // this.$api.api.findHouseByUser({
      //     orgType: localStorage.getItem("orgType"),
      //     agentId: localStorage.getItem("agentId"),
      //   })
      //   .then((res) => {
      //     this.houseList = res.data;
      //     if (!this.flag) {
      //       if (localStorage.getItem("orgType") == 3) {
      //         this.houseId = localStorage.getItem("houseId");
      //       } else {
      //         this.houseId = res.data[0].id;
      //       }
      //     }
      //     this.tabtimetap(this.timeType);
      //     this.getTableList();
      //   });
    },
    handleSizeChange(val) {
      console.log("每页条" + val);
      this.page.pageSize = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      console.log("当前页" + val);
      this.page.pageNum = val;
      this.getTableList();
    },
    handleSizeChange1(val) {
      console.log("每页条" + val);
      this.pageSize = val;
      this.getcompare();
    },
    handleCurrentChange1(val) {
      console.log("当前页" + val);
      this.pageNum = val;
      this.getcompare();
    },
    //获取对比列表接口
    getcompare() {
      this.compareFlag = 0;
      let obj = {
        current: this.pageNum,
        size: this.pageSize,
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        agentId:
          localStorage.getItem("orgType") == 1
            ? localStorage.getItem("agentId")
            : this.selValue == 0
              ? this.houseId
              : null,
        orgCode:
          localStorage.getItem("orgType") == 2
            ? localStorage.getItem("orgCode")
            : this.selValue == 1
              ? this.houseId
              : null,
        houseId:
          localStorage.getItem("orgType") == 3
            ? localStorage.getItem("houseId")
            : this.selValue == 2
              ? this.houseId
              : null,
        timeType: this.timeType,
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
        orgType: localStorage.getItem("orgType"),
        queryOrgType: this.selValue / 1 + 1,
        houseTypes: this.houseTypes,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `autoSR/zk/equipment/detail/usageTrendContrast`,
        method: "get",
        params: obj,
      })
        .then((res) => {
          console.log(res, "获取数据");
          this.allCompare = res;
          this.total = res.data.firstPage.total;
          //	数据处理
          let arr = [];
          if (this.pageNum == 1) {
            let obj1 = {
              name: "项目合计",
              first: this.details,
              second: this.details1,
              contrast: res.data.total,
              // time:'',
              // time1:''
            };
            arr.push(obj1);
          }
          res.data.firstPage.records.map((item, index) => {
            let obj = {};
            //当他为0的时候
            obj.name =
              res.data.firstPage.records[index].createTime.substring(5, 10) +
              "VS" +
              res.data.secondPage.records[index].createTime.substring(5, 10);
            obj.first = res.data.firstPage.records[index];
            obj.second = res.data.secondPage.records[index];
            obj.contrast = res.data.contrast[index];
            // obj.time=''
            // obj.time1=''
            arr.push(obj);
          });
          this.compareList = arr;
          // console.log(this.compareList,'123')
          this.tabChange(0, "设备总数");
        })
        .catch((err) => {
          // console.log(err)
          this.compareList = [];
          this.tabChange(0, "设备总数");
        });
    },
    //处理数据
    tabChange(idx, str1) {
      //首先获取到给定的标志，对数据进行操作和赋值
      //判断情况
      // 	console.log(idx)
      let str = "";
      if (idx == 0) {
        str = "equipmentQuantity";
      }
      if (idx == 1) {
        str = "onlineQuantity";
      }
      if (idx == 2) {
        str = "onlineRate";
      }
      if (idx == 3) {
        str = "activeQuantity";
      }
      if (idx == 4) {
        str = "activeRate";
      }
      if (idx == 5) {
        str = "assignQuantity";
      }
      if (idx == 6) {
        str = "normalRecordQuantity";
      }
      if (idx == 7) {
        str = "fullRecordRate";
      }
      if (idx == 8) {
        str = "snippetRecordQuantity";
      }
      if (idx == 9) {
        str = "noRecordQuantity";
      }
      if (idx == 10) {
        str = "normalShutdownQuantity";
      }
      if (idx == 11) {
        str = "lowElectricityQuantity";
      }
      if (idx == 12) {
        str = "abnormalShutdownQuantity";
      }
      //	获取到数据后对数据进行操作
      //	循环大数组，赋值
      if (this.selectTime1) {
        let timeDate = [];
        let arr1 = [];
        let arr2 = [];
        this.compareList.map((item, index) => {
          item.time = item.first[str];
          item.time1 = item.second[str];
          item.time2 = item.contrast[str] + "";

          // if (index > 0) {
          //   timeDate.push(item.name);
          //   arr1.push(item.first[str]);
          //   arr2.push(item.second[str]);
          // }
        });
        this.allCompare.data.first.map((item, idx) => {
          timeDate.push(
            item.createTime.substring(5) +
            "VS" +
            this.allCompare.data.second[idx].createTime.substring(5)
          );
          arr1.push(item[str]);
          arr2.push(this.allCompare.data.second[idx][str]);
        });
        this.compareList = Object.assign([], this.compareList);
        this.$forceUpdate();
        var chartDom = document.getElementById("compare");
        echarts.init(chartDom).dispose();
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          color: colorTheme.colorArr,
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["时段一", "对比时段"],
            bottom: "10",
          icon:"roundRect"
          },
          grid: {
            left: 10,
            right: 10,
          bottom:18,
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: timeDate,
            axisLabel: {
              //重点在这一块，其余可以忽略
              textStyle: {
                color: "#212121", //更改坐标轴文字颜色
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#DDE1EE", //x线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
          yAxis: {
            type: "value",
            splitNumber: 4,
            axisLabel: {
              //重点在这一块，其余可以忽略
              textStyle: {
                color: "#212121", //更改坐标轴文字颜色
              },
            },
            axisLine: {
              lineStyle: {
                ype: "solid",
                color: "#DDE1EE", //x线的颜色
                width: "1", //坐标线的宽度
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed", // y轴分割线类型
              },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
          },
          series: [
            {
              name: "时段一",
              data: arr1,
              type: "line",
              smooth: true,
            },
            {
              name: "对比时段",
              data: arr2,
              type: "line",
              smooth: true,
            },
          ],
        };
        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      } else {
        // console.log(this.allCompare,"第一种");
        let timeDate = [];
        let arr1 = [];
        this.allCompare.data.first.map((item) => {
          timeDate.push(item.createTime.substring(5));
          arr1.push(item[str]);
        });
        // console.log(timeDate,arr1);
        var chartDom = document.getElementById("compare");
        echarts.init(chartDom).dispose();
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          color: colorTheme.colorArr[0],
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: [str1],
            top: "10",
          icon:"roundRect"
          },
          grid: {
            left: 10,
            right: 10,
          bottom:18,
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: timeDate,
            axisLabel: {
              //重点在这一块，其余可以忽略
              textStyle: {
                color: "#212121", //更改坐标轴文字颜色
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#DDE1EE", //x线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
          yAxis: {
            type: "value",
            splitNumber: 4,
            axisLabel: {
              //重点在这一块，其余可以忽略
              textStyle: {
                color: "#212121", //更改坐标轴文字颜色
              },
            },
            axisLine: {
              lineStyle: {
                ype: "solid",
                color: "#DDE1EE", //x线的颜色
                width: "1", //坐标线的宽度
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed", // y轴分割线类型
              },
            },
            axisTick: {
              //y轴刻度线
              show: false,
            },
          },
          series: [
            {
              name: str1,
              data: arr1,
              type: "line",
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: colorTheme.colorArr[0] },
                    { offset: 1, color: "#fff" }
                  ]
                ),
                opacity: 0.1
              }
            },
          ],
        };
        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    },
    //获取统计数据
    getdetail() {
      let obj = {
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        agentId:
          localStorage.getItem("orgType") == 1
            ? localStorage.getItem("agentId")
            : this.selValue == 0
              ? this.houseId
              : null,
        orgCode:
          localStorage.getItem("orgType") == 2
            ? localStorage.getItem("orgCode")
            : this.selValue == 1
              ? this.houseId
              : null,
        houseId:
          localStorage.getItem("orgType") == 3
            ? localStorage.getItem("houseId")
            : this.selValue == 2
              ? this.houseId
              : null,
        timeType: this.timeType,
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
        orgType: localStorage.getItem("orgType"),
        queryOrgType: this.selValue / 1 + 1,
        houseTypes: this.houseTypes,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `autoSR/zk/equipment/detail/usageTrend`,
        method: "get",
        params: obj,
      }).then((res) => {
        // console.log(res)
        if (res.code == 0) {
          this.details = res.data.first;
          if (res.data.second) {
            this.details1 = res.data.second;
            this.compare = res.data.contrast;
          }
          let itemobj = {
            objopts: [
              {
                value: this.details.normalRecordQuantity || 0,
                name: "完整录音",
              },
              {
                value: this.details.snippetRecordQuantity || 0,
                name: "部分录音",
              },
              { value: this.details.noRecordQuantity || 0, name: "未录音" },
            ],
          };
          this.odata1 = itemobj.objopts.every(i => {
            if (i.value == 0) {
              return true
            }
          })
          let arr = itemobj.objopts.filter((item) => {
            return item.value;
          });
          // console.log(arr,'123')
          if (arr.length > 0) {
            itemobj.objopts = arr;
          }
          let itemobj1 = {
            objopts: [
              {
                value: this.details.normalShutdownQuantity || 0,
                name: "正常关机",
              },
              {
                value: this.details.lowElectricityQuantity || 0,
                name: "低电关机",
              },
              {
                value: this.details.abnormalShutdownQuantity || 0,
                name: "异常关机",
              },
            ],
          };
          this.odata2 = itemobj1.objopts.every(i => {
            if (i.value == 0) {
              return true
            }
          })
          let arr1 = itemobj1.objopts.filter((item) => {
            return item.value;
          });
          if (arr1.length > 0) {
            itemobj1.objopts = arr1;
          }
          var myChart = echarts.init(document.getElementById("mane"));
          var myChart1 = echarts.init(document.getElementById("mane2"));
          var option = {
            color: colorTheme.colorArr,
            tooltip: {
              trigger: "item",
            },
            legend: {
              bottom: "1%",
          icon:"roundRect",
              left: "center",
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                data: itemobj.objopts,
              },
            ],
          };
          var option1 = {
            color: colorTheme.colorArr,
            tooltip: {
              trigger: "item",
            },
            legend: {
              bottom: "1%",
          icon:"roundRect",
              left: "center",
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                data: itemobj1.objopts,
              },
            ],
          };
          myChart.setOption(option);
          myChart1.setOption(option1);
        }
      });
    },
    //获取table数据、
    getTableList() {
      var url = "";
      this.tableData = [];
      let obj = {
        current: this.page.pageNum,
        pageSize: this.page.pageSize,
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        agentId:
          localStorage.getItem("orgType") == 1
            ? localStorage.getItem("agentId")
            : this.selValue == 0
              ? this.houseId
              : null,
        orgCode:
          localStorage.getItem("orgType") == 2
            ? localStorage.getItem("orgCode")
            : this.selValue == 1
              ? this.houseId
              : null,
        houseId:
          localStorage.getItem("orgType") == 3
            ? localStorage.getItem("houseId")
            : this.selValue == 2
              ? this.houseId
              : null,
        timeType: this.timeType,
        orgType: localStorage.getItem("orgType"),
        queryOrgType: this.selValue / 1 + 1,
        houseTypes: this.houseTypes,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `autoSR/zk/equipment/detail/equipmentCountDetail`,
        method: "get",
        params: obj,
      }).then((res) => {
        if (res.code == 0) {
          res.data.records.forEach((item, index) => {
            item.index = index + 1;
          });
          this.tableData = res.data.records;
          this.page.total = res.data.total;
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.box-center {
  width: 100%;
  padding: 5px 15px 20px;
  min-width: 1000px;
}

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

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

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

.titlebox1 {
  // width: 100%;
  width: calc(100% - 270px);
  position: fixed;
  z-index: 999;
  margin-top: -16px;
  background: #ffffff;
  // box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0px 10px 0px #dadada;
  border-radius: 8px;
  padding-bottom: 18px;
}

.titlebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-top: 120px;
  padding: 10px 0;
}

.tablebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-top: 10px;
  padding: 15px;
}

.kapiannox {
  width: 98%;
  margin-top: 20px;
}

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

  /deep/ .el-card__body {
    padding: 8px;
    cursor: pointer;
  }

  .text1 {
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 20px;
    margin-top: 10px;
    color: #666666;
            display: flex;
            align-items: center;
  }

  .text2 {
    height: 32px;
    font-size: 32px;
    font-weight: normal;
    line-height: 32px;
    text-indent: 20px;
    margin-top: 10px;
  }

  .text3 {
    font-size: 14px;
    margin: 10px 0;
    width: 100%;
    text-indent: 20px;
    display: flex;
    align-items: center;


    .textUp {
      font-size: 14px;
      display: flex;
      font-weight: 600;
      color: rgba(231, 72, 60, 1);
      background: rgba(253, 240, 239, 1);
      align-items: center;
      padding: 3px 12px 3px 0;
      border-radius: 3px;
      margin-left: 8px;

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

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

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

  .tophovese {
    border: 1px solid #2671e2 !important;
    background: rgba(38, 113, 226, 0.04);
    color: #666 !important;
  }
}

.alllistbox {
  width: 98%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.alllist {
  width: 16.66%;
  border: 1px solid #e0e0e0;
  padding-bottom: 2px;
  padding-top: 4px;
  cursor: pointer;
}

.alllist-text1 {
  width: 100%;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 26px;
  /*text-align: center;*/
  padding: 5px 10px;
}

.zgutteruo {
  width: 100%;
  padding-bottom: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

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

.active {
  background: #eef1f4;
  // border: 1px solid #2671E2;
}

.timeSel {
  margin-top: 8px;
  margin-left: 20px;
  border: 1px solid #ccc;
  padding: 0 5px;
  cursor: pointer;
  color: #606266;
}

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

.alllist-f1 {
  font-size: 22px;
  font-weight: bold;
}

.alllist-f2 {
  font-size: 12px;
}

.demonstration {
  line-height: 36px;
}

/deep/ .el-table__header-wrapper {
  thead {
    tr {
      th {
        background: #F5F7FA;
        color: #333333;
      }
    }
  }
}
.pop{
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('../../../public/img/pop.png') no-repeat;
  background-size: 100%;
  margin-left: 6px;
}
/deep/ .el-button--text{
  color: #2671E2;
}
/deep/ .el-button--primary{
  background: #2671E2 !important;
  border: 1px solid #2671E2 !important;
}
</style>
