<template>
  <div>
    <div class="titlebox">
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <span style="line-height: 40px" class="demonstration">楼盘名称：</span>
        <div style="width: 200px">
          <!--				<el-input  v-model="page.accountName"></el-input>-->
          <el-select v-model="houseId" 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: 20px">
				<el-button @click="screening()" style="background: #2671e2; color: #ffffff">筛选</el-button>
			</div>
			<div style="margin-left: 20px">
				<el-button @click="empty()">清空筛选条件</el-button>
			</div>-->
      </div>
    </div>

    <div class="titlebox">
      <div
        style="
          background: #ffffff;
          padding-left: 18px;
          display: flex;
          padding-top: 18px;
        "
      >
        <span style="line-height: 40px" class="demonstration">使用趋势：</span>
        <div class="toptimeqhuan">
          <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>
        </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="结束日期"
        >
        </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">
          <div class="demonstration timeSel" @click="show">
            {{ selectTime1 ? "时段二： " : "请选择： "
            }}<span v-if="selectTime1">{{
              selectTime + "-" + selectTime1
            }}</span>
          </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"
          >
          </el-date-picker>
        </div>
        <!--			<div style="margin-left: 10px" id="rankketcct" >-->
        <!--				<input  type="text" autocomplete="off" id="dt" placeholder="与其他时间段对比">-->
        <!--				<div id="dd"></div>-->
        <!--			</div>-->
      </div>

      <div class="kapiannox">
        <div class="alllistbox">
          <div
            class="alllist"
            @click="compareChange(0)"
            :class="compareFlag == 0 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">设备总数</div>
            <div class="alllist-text1">
              <span class="alllist-f1">{{ details.equipmentQuantity }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.equipmentQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.equipmentQuantity > 0
                      ? 'color:red;'
                      : 'color:green;'
                  "
                  >{{ compare.equipmentQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(1)"
            :class="compareFlag == 1 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">在线设备数</div>
            <div class="alllist-text1">
              <span class="alllist-f1">{{ details.onlineQuantity }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.onlineQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.onlineQuantity > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.onlineQuantity + "%" }}</span
                >
                <!--						{{details.onlineQuantity}}-->
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(2)"
            :class="compareFlag == 2 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">在线设备平均占比</div>
            <div class="alllist-text1">
              <!--						{{(details.onlineRate||0)+'%'}}-->
              <span class="alllist-f1">{{
                (details.onlineRate || 0) + "%"
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ (details1.onlineRate || 0) + "%" }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.onlineRate > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.onlineRate + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(3)"
            :class="compareFlag == 3 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">活跃设备数</div>
            <div class="alllist-text1">
              <!--						{{details.activeQuantity}}-->
              <span class="alllist-f1">{{ details.activeQuantity }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.activeQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.activeQuantity > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.activeQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(4)"
            :class="compareFlag == 4 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">活跃设备平均占比</div>
            <div class="alllist-text1">
              <!--						{{(details.activeRate||0)+'%'}}-->
              <span class="alllist-f1">{{
                (details.activeRate || 0) + "%"
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ (details1.activeRate || 0) + "%" }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.activeRate > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.activeRate + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(5)"
            :class="compareFlag == 5 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">指派次数</div>
            <div class="alllist-text1">
              <!--						{{details.assignQuantity}}-->
              <span class="alllist-f1">{{ details.assignQuantity }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.assignQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.assignQuantity > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.assignQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(6)"
            :class="compareFlag == 6 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">完整录音次数</div>
            <div class="alllist-text1">
              <!--						{{details.normalRecordQuantity}}-->
              <span class="alllist-f1">{{ details.normalRecordQuantity }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.normalRecordQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.normalRecordQuantity > 0
                      ? 'color:red;'
                      : 'color:green;'
                  "
                  >{{ compare.normalRecordQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(7)"
            :class="compareFlag == 7 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">完整录音占比</div>
            <div class="alllist-text1">
              <!--						{{(details.fullRecordRate||0)+'%'}}-->
              <span class="alllist-f1">{{
                (details.fullRecordRate || 0) + "%"
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ (details1.fullRecordRate || 0) + "%" }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.fullRecordRate > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.fullRecordRate + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(8)"
            :class="compareFlag == 8 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">部分录音</div>
            <div class="alllist-text1">
              <!--						{{details.snippetRecordQuantity}}-->
              <span class="alllist-f1">{{
                details.snippetRecordQuantity
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.snippetRecordQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.snippetRecordQuantity > 0
                      ? 'color:red;'
                      : 'color:green;'
                  "
                  >{{ compare.snippetRecordQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(9)"
            :class="compareFlag == 9 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">未录音</div>
            <div class="alllist-text1">
              <!--						{{details.noRecordQuantity}}-->
              <span class="alllist-f1">{{ details.noRecordQuantity }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.noRecordQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.noRecordQuantity > 0 ? 'color:red;' : 'color:green;'
                  "
                  >{{ compare.noRecordQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(10)"
            :class="compareFlag == 10 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">正常关机次数</div>
            <div class="alllist-text1">
              <!--						{{details.normalShutdownQuantity}}-->
              <span class="alllist-f1">{{
                details.normalShutdownQuantity
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.normalShutdownQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.normalShutdownQuantity > 0
                      ? 'color:red;'
                      : 'color:green;'
                  "
                  >{{ compare.normalShutdownQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(11)"
            :class="compareFlag == 11 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">低电关机次数</div>
            <div class="alllist-text1">
              <!--						{{details.lowElectricityQuantity}}-->
              <span class="alllist-f1">{{
                details.lowElectricityQuantity
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.lowElectricityQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.lowElectricityQuantity > 0
                      ? 'color:red;'
                      : 'color:green;'
                  "
                  >{{ compare.lowElectricityQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="alllist"
            @click="compareChange(12)"
            :class="compareFlag == 12 && selectTime1 ? 'active' : 'noactive'"
          >
            <div class="alllist-text1">异常关机次数</div>
            <div class="alllist-text1">
              <!--						{{details.abnormalShutdownQuantity}}-->
              <span class="alllist-f1">{{
                details.abnormalShutdownQuantity
              }}</span>
              <div class="alllist-text2">
                <span class="alllist-f2" v-if="selectTime1"
                  >对比时段:{{ details1.abnormalShutdownQuantity }}</span
                >
                <span
                  class="alllist-f2"
                  v-if="selectTime1"
                  :style="
                    compare.abnormalShutdownQuantity > 0
                      ? 'color:red;'
                      : 'color:green;'
                  "
                  >{{ compare.abnormalShutdownQuantity + "%" }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-row :gutter="40">
        <el-col :span="12">
          <div class="zgutteruo">
            <div class="zgutteruo-tit">录音结果占比</div>
            <div id="mane" style="width: 100%; height: 360px"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="zgutteruo">
            <div class="zgutteruo-tit">关机类型占比</div>
            <div id="mane2" style="width: 100%; height: 360px"></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="tablebox">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <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
            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="currentPage4"
          :page-sizes="[6, 10, 14, 20]"
          :page-size="6"
          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%">
          <el-table-column prop="name" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="time" label="时段一" align="center">
          </el-table-column>
          <el-table-column prop="time1" label="时段二" align="center">
          </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="currentPage3"
          :page-sizes="[6, 10, 14, 20]"
          :page-size="6"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      houseId: "",
      timeType: 0,
      time: "",
      compareFlag: "0",
      selectTime: "",
      selectTime1: "",
      customtime: [],
      tableData: [],
      currentPage4: 1,
      currentPage3: 1,
      checked: false,
      houseList: [],
      compareList: [],
      flag: false,
      page: {
        pageNum: 1,
        pageSize: 6,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total:10,
        recording: "",
      },
      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: "6",
      pageNum: "1",
      total:10,
      options: [
        {
          value: "0",
          label: "无录音",
        },
        {
          value: "1",
          label: "部分录音",
        },
        {
          value: "2",
          label: "完整录音",
        },
      ],
    };
  },
  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;
      } else {
        this.flag = false;
        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: {
    //情空时间选择器
    clearTime() {
      // let str=''
      if (this.selectTime1) {
        this.$refs.time.valueOnOpen = "";
        console.log(this.$refs.time);
      }
    },
    radioChange() {
      this.clearTime();
      this.selectTime = "";
      this.selectTime1 = "";
      this.compareList = [];
    },
    goinfo(row, idx) {
      console.log(row, "信息");
      // location.href =
      //   "${jypath}/equipment/onlinerecord/index?houseId=" +
      //   this.houseId +
      //   "&startDate=" +
      //   row.createTime +
      //   "&endDate=" +
      //   row.createTime +
      //   "&flag=" +
      //   idx;
        this.$router.push({
          url:'',
          query:{
            houseId:this.houseId,
            startDate: row.createTime,
            endDate:row.createTime,
            flag:idx
          }
        })
    },
    compareChange(idx) {
      this.compareFlag = idx;
      this.tabChange(idx);
    },
    timeChange(e) {
      // console.log(e)
      // this.selectTime=e
      //	对数据进行处理
      //	当当前选择的为自定义时间时
      this.selectTime = "";
      this.selectTime1 = "";
      this.timeSelect(e);
      this.getdetail();
      this.getcompare();
    },
    timeSelect(e) {
      console.log(this.$refs.time);
      if (this.timeType == -1) {
        //	将两者的时间戳相减，然后在在选择的自定义时间的时间戳想加
        // 	console.log(e,this.page.openTime,this.page.closeTime)
        // console.log(new Date(e).getTime(),new Date(this.page.openTime).getTime(),new Date(this.page.closeTime).getTime(),'时间戳')
        // console.log(this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime()))
        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;
        }
        // 	console.log(-this.timeType*num)
        // 	this.selectTime=this.timestampToTime(new Date().getTime()-this.timeType*num)
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var  date = new Date(timestamp * 1000);//时间戳为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() + ' ';
      var dd =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

      // var HH = date.getHours() + ':';
      // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':';
      //
      // // var mm = date.getMinutes() + ':';
      // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':';
      //
      // // var ss = date.getSeconds();
      // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());

      // return yyyy+MM+dd+HH+mm+ss;
      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 = "";
      //给时间选择器赋值
      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.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()),
      ];
      this.$set(this, "time", null);
      console.log(this.customtime);
      this.getTableList();
      this.getdetail();
    },
    screening() {
      this.page.pageNum = 1;
      this.page.pageSize = 6;
      this.getTableList();
    },
    empty() {
      this.page = {
        pageNum: 1,
        pageSize: 6,
        openTime: "",
        closeTime: "",
        houseName: "",
        accountName: "",
        imei: "",
        total: "",
      };
      this.customtime = "";
      this.getTableList();
    },
    //时间选择
    confirmtime() {
      this.timeType = "-1";
      // if(this.customtime==''){ }else{
      // 	const d = new Date(this.customtime[0])
      // 	this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate())
      // 	const c = new Date(this.customtime[1])
      // 	this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate())
      // }
      this.checked = false;
      this.selectTime = "";
      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();
    },
    //获取楼盘数据
    getHouseList() {
      axios({
        url: `${jypath}/equipment/onlinerecord/findAllProperties`,
        method: "get",
      }).then((res) => {
        // console.log(res.data.obj)
        if (res.data.res == 1) {
          this.houseList = res.data.obj;
          if (!this.flag) {
            // console.log(this.flag.'12')
            this.houseId = res.data.obj[0].id;
          }
          // console.log(this.flag,'12')
          this.tabtimetap(this.timeType);
          this.getTableList();
          // this.getdetail()
          // res.data.obj.results.forEach((item,index)=>{
          // 	item.index=index+1
          // })
          // this.tableData=res.data.obj.results;
          // this.page.total = res.data.obj.totalRecord;
        }
      });
    },
    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 = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        houseId: this.houseId,
        timeType: this.timeType,
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `${jypath}/zk/equipment/detail/usageTrendContrast`,
        method: "get",
        params: obj,
      })
        .then((res) => {
          // console.log(res)
          this.total = res.data.obj.first.totalRecord;
          //	数据处理
          let arr = [];
          if (this.pageNum == 1) {
            let obj1 = {
              name: "项目合计",
              first: this.details,
              second: this.details1,
              contrast: res.data.obj.total,
              // time:'',
              // time1:''
            };
            arr.push(obj1);
          }
          res.data.obj.first.results.map((item, index) => {
            let obj = {};
            //当他为0的时候
            obj.name =
              res.data.obj.first.results[index].createTime.substring(5, 10) +
              "VS" +
              res.data.obj.second.results[index].createTime.substring(5, 10);
            obj.first = res.data.obj.first.results[index];
            obj.second = res.data.obj.second.results[index];
            obj.contrast = res.data.obj.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 = [];
        });
    },
    //处理数据
    tabChange(idx) {
      //首先获取到给定的标志，对数据进行操作和赋值
      //判断情况
      // 	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";
      }
      //	获取到数据后对数据进行操作
      //	循环大数组，赋值
      // 	console.log(str)
      this.compareList.map((item) => {
        item.time = item.first[str];
        item.time1 = item.second[str];
        item.time2 = item.contrast[str] + "";
      });
      // console.log(this.compareList)
      this.compareList = Object.assign([], this.compareList);
      this.$forceUpdate();
    },
    //获取统计数据
    getdetail() {
      let obj = {
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        houseId: this.houseId,
        timeType: this.timeType,
        contrastStartDate: this.selectTime,
        contrastEndDate: this.selectTime1,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `${jypath}/zk/equipment/detail/usageTrend`,
        method: "get",
        params: obj,
      }).then((res) => {
        // console.log(res)
        if (res.data.res == 1) {
          this.details = res.data.obj.first;
          if (res.data.obj.second) {
            this.details1 = res.data.obj.second;
            this.compare = res.data.obj.contrast;
          }
          let itemobj = {
            objopts: [
              {
                value: this.details.normalRecordQuantity || 0,
                name: "完整录音",
              },
              {
                value: this.details.snippetRecordQuantity || 0,
                name: "部分录音",
              },
              { value: this.details.noRecordQuantity || 0, name: "未录音" },
            ],
          };
          let arr = itemobj.objopts.filter((item) => {
            return item.value;
          });
          // console.log(arr,'123')
          if (arr.length > 0) {
            itemobj.objopts = arr;
          }
          let itemobj1 = {
            // total:'50',
            // total:this.detail.normalRecordQuantity,
            objopts: [
              {
                value: this.details.normalShutdownQuantity || 0,
                name: "正常关机",
              },
              {
                value: this.details.lowElectricityQuantity || 0,
                name: "低电关机",
              },
              {
                value: this.details.abnormalShutdownQuantity || 0,
                name: "异常关机",
              },
            ],
          };
          let arr1 = itemobj1.objopts.filter((item) => {
            return item.value;
          });
          // console.log(arr1,'123')
          if (arr1.length > 0) {
            itemobj1.objopts = arr1;
          }
          var myChart = echarts.init(document.getElementById("mane"));
          var myChart1 = echarts.init(document.getElementById("mane2"));
          var option = {
            tooltip: {
              trigger: "item",
            },
            legend: {
              bottom: "1%",
              left: "center",
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                data: itemobj.objopts,
              },
            ],
          };
          var option1 = {
            tooltip: {
              trigger: "item",
            },
            legend: {
              bottom: "1%",
              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 = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        startDate: this.page.openTime,
        endDate: this.page.closeTime,
        houseId: this.houseId,
        timeType: this.timeType,
      };
      obj.timeType == -1 ? (obj.timeType = "") : (obj.timeType = obj.timeType);
      axios({
        url: `${jypath}/zk/equipment/detail/equipmentCountDetail`,
        method: "get",
        params: obj,
      }).then((res) => {
        // console.log(res)
        if (res.data.res == 1) {
          res.data.obj.results.forEach((item, index) => {
            item.index = index + 1;
          });
          this.tableData = res.data.obj.results;
          this.page.total = res.data.obj.totalRecord;
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.toptimeqhuan {
  width: 230px;
  height: 40px;
  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: 40px;
  font-size: 16px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.titlebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-top: 20px;
  padding-bottom: 18px;
}
.tablebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  margin-top: 20px;
  padding: 18px;
}
.kapiannox {
  width: 100%;
  margin-top: 20px;
}
.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;
}
.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: 8px;
}
.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: blue;*/
  border: 1px solid #409eff;
}
.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;
}
</style>
