<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel">

        <el-select
          v-model="houseTypes"
          @change="sysChange"
          style="width: 100px;margin-left:10px;"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <div class="titel-text">选择公司:</div>
        <div style="margin-left: 26px" v-if="selValue == 1">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            placeholder="默认为全部"
            clearable
            filterable
          >
            <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>
          <el-select
            v-model="choicValue"
            @change="valuechange"
            clearable
            filterable
            placeholder="默认为全部"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <!-- 二 -->
    <div class="app-box-er">
      <div class="container">
        <div class="grid-content">
          <div class="text1">服务期内项目总数</div>
          <div class="text2">{{ firstTab.houseQofEnough || 0 }}</div>
        </div>
        <div class="grid-content">
          <div class="text1">累计项目数</div>
          <div class="text2">{{ firstTab.houseQuantity || 0 }}</div>
        </div>
        <div class="grid-content">
          <div class="text1">试用项目数</div>
          <div class="text2">{{ firstTab.houseQuantityOfTryOut || 0 }}</div>
        </div>
        <div class="grid-content">
          <div class="text1">累计销售设备数</div>
          <div class="text2">{{ firstTab.equipmentQuantityWithSold || 0 }}</div>
        </div>
        <div class="grid-content">
          <div class="text1">累计接待量</div>
          <div class="text2">{{ firstTab.receptionQuantity || 0 }}</div>
        </div>
        <div class="grid-content">
          <div class="text1">累计接待客户</div>
          <div class="text2">
            {{ firstTab.customerQuantity || 0 }}
          </div>
        </div>
      </div>
    </div>

    <div class="app-box-er">
      <!-- <div style="line-height: 40px; font-weight: bold">今日实时状况</div> -->

      <div class="app_titile" style="margin-bottom: 10px">
        <div style="line-height: 40px; font-weight: bold">时段统计</div>
        <div>
          <div class="app-titel">
            <div class="toptimeqhuan">
              <div :class="{ tophove: dateType1 == 1 }" @click="tabtimetap1(1)">
                近7天
              </div>
              <div :class="{ tophove: dateType1 == 3 }" @click="tabtimetap1(3)">
                近15天
              </div>
              <div :class="{ tophove: dateType1 == 2 }" @click="tabtimetap1(2)">
                近30天
              </div>
            </div>
            <div style="margin-left: 26px">
              <el-date-picker
                @change="confirmtime1()"
                v-model="customtime1"
                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>
              <el-select
              v-model="echarValue1"
              @change="echarValue1Change"
              style="width: 100px; margin-left: 10px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>


      <div class="container" v-if="echarValue1 == 0">
        <div class="grid-content" style="cursor: pointer;" @click="secondChange('1')">
          <div class="text1" :class="{ tophovese: secindex == 1 }">接待量</div>
          <div class="text2" :class="{ tophovese: secindex == 1 }">
            {{ secondTab.receptionQuantityInToday || 0 }}
          </div>
        </div>
        <div class="grid-content" style="cursor: pointer;" @click="secondChange('2')">
          <div class="text1" :class="{ tophovese: secindex == 2 }">
            活跃用户
          </div>
          <div class="text2" :class="{ tophovese: secindex == 2 }">
            {{ secondTab.activeUserQuantity || 0 }}
          </div>
        </div>
        <div class="grid-content" style="cursor: pointer;" @click="secondChange('3')">
          <div class="text1" :class="{ tophovese: secindex == 3 }">
            活跃设备
          </div>
          <div class="text2" :class="{ tophovese: secindex == 3 }">
            {{ secondTab.activeEquipmentQuantity || 0 }}
          </div>
        </div>
      </div>
      <div id="main" v-if="echarValue1 == 0"></div>
      <div v-if="echarValue1 == 1">
        <el-table :data="echarList1" stripe style="width: 100%">
          <!-- <el-table-column type="index" label="序号" width="50">
        </el-table-column> -->
          <el-table-column prop="time" label="时间" align="center">
          </el-table-column>
          <el-table-column
            prop="receptionQuantityInToday"
            label="接待量"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="activeUserQuantity"
            label="活跃用户"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="activeEquipmentQuantity"
            label="活跃设备"
            align="center"
          >
          </el-table-column>
          <!--  scope -->
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="goDetail(row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="app-box-er">
      <div class="app_titile" style="margin-bottom: 10px">
        <div style="line-height: 30px; font-weight: bold">整体看板</div>
        <div>
          <div class="app-titel">
            <div class="toptimeqhuan">
              <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
                近7天
              </div>
              <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
                近15天
              </div>
              <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
                近30天
              </div>
            </div>
            <div style="margin-left: 26px">
              <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>
              <el-select
            v-model="echarValue"
            style="width: 100px;margin-left:10px;"
            placeholder="请选择"
            @change="echarChange"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          </div>
        </div>
      </div>
      <div class="container"  v-if="echarValue == 0">
        <!-- <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('1')">
          <div class="text1" :class="{ tophovese: cardindex == 1 }">
            购买服务项目数
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 1 }">
            {{ thirdTab.houseQuantity || 0 }}
          </div>
        </div> -->
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('1')">
            <div class="text1" :class="{ tophovese: cardindex == 1 }">购买服务项目数</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 1 }">{{ thirdTab.houseQuantity || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 1 }">
                  环比:{{ sysCompare.houseQuantity || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.houseQuantity > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.houseQuantity || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.houseQuantity < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.houseQuantity || 0 }}
                </span>
              </div>
            </div>
        </div>
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('4')">
            <div class="text1" :class="{ tophovese: cardindex == 4 }">活跃用户数</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 4 }">{{ thirdTab.activeUserQuantity || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 4 }">
                  环比:{{ sysCompare.activeUserQuantity || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.activeUserQuantity > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.activeUserQuantity || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.activeUserQuantity < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.activeUserQuantity || 0 }}
                </span>
              </div>
            </div>
        </div>
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('5')">
            <div class="text1" :class="{ tophovese: cardindex == 5 }">新增用户数</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 5 }">{{ thirdTab.userCountWithNewJoin || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 5 }">
                  环比:{{ sysCompare.userCountWithNewJoin || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.userCountWithNewJoin > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.userCountWithNewJoin || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.userCountWithNewJoin < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.userCountWithNewJoin || 0 }}
                </span>
              </div>
            </div>
        </div>
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('6')">
            <div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 6 }">{{ thirdTab.receptionQuantity || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 6 }">
                  环比:{{ sysCompare.receptionQuantity || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.receptionQuantity > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.receptionQuantity || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.receptionQuantity < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.receptionQuantity || 0 }}
                </span>
              </div>
            </div>
        </div>
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('7')">
            <div class="text1" :class="{ tophovese: cardindex == 7 }">平均接待时长</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 7 }">{{ thirdTab.receptionTimeWithAvg || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 7 }">
                  环比:{{ sysCompare.receptionTimeWithAvg || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.receptionTimeWithAvg > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.receptionTimeWithAvg || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.receptionTimeWithAvg < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.receptionTimeWithAvg || 0 }}
                </span>
              </div>
            </div>
        </div>
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('8')">
            <div class="text1" :class="{ tophovese: cardindex == 8 }">活跃设备数</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 8 }">{{ thirdTab.activeEquipmentQuantity || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 8 }">
                  环比:{{ sysCompare.activeEquipmentQuantity || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.activeEquipmentQuantity > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.activeEquipmentQuantity || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.activeEquipmentQuantity < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.activeEquipmentQuantity || 0 }}
                </span>
              </div>
            </div>
        </div>
        <div class="pagechen" style="cursor: pointer" @click="Overviewxlick('9')">
            <div class="text1" :class="{ tophovese: cardindex == 9 }">销售设备数</div>
            <div class="pageboxtitle2">
              <div class="span1" :class="{ tophovese: cardindex == 9 }">{{ thirdTab.buyEquipQuantity || 0 }}</div>
              <div class="span2">
                <span class="span2-1" :class="{ tophovese: cardindex == 9 }">
                  环比:{{ sysCompare.buyEquipQuantity || 0 }}</span
                >
                <span class="span2-2" v-if="orderBy.buyEquipQuantity > 0">
                  <i class="el-icon-top" style="color: red"></i>
                  {{ orderBy.buyEquipQuantity || 0 }}
                </span>
                <span class="span2-3" v-if="orderBy.buyEquipQuantity < 0">
                  <i class="el-icon-bottom" style="color: #25ceba"></i>
                  {{ orderBy.buyEquipQuantity || 0 }}
                </span>
              </div>
            </div>
        </div>
        <!-- <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('2')">
          <div class="text1" :class="{ tophovese: cardindex == 2 }">
            服务期内项目数
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 2 }">
            {{ thirdTab.houseQofEnough || 0 }}
          </div>
        </div> -->
        <!-- <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('4')">
          <div class="text1" :class="{ tophovese: cardindex == 4 }">
            活跃用户数
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 4 }">
            {{ thirdTab.activeUserQuantity || 0 }}
          </div>
        </div>
        <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('5')">
          <div class="text1" :class="{ tophovese: cardindex == 5 }">
            新增用户数
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 5 }">
            {{ thirdTab.userCountWithNewJoin || 0 }}
          </div>
        </div>
        <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('6')">
          <div class="text1" :class="{ tophovese: cardindex == 6 }">接待量</div>
          <div class="text2" :class="{ tophovese: cardindex == 6 }">
            {{ thirdTab.receptionQuantity || 0 }}
          </div>
        </div>
        <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('7')">
          <div class="text1" :class="{ tophovese: cardindex == 7 }">
            平均接待时长
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 7 }">
            {{ thirdTab.receptionTimeWithAvg || 0 }}
          </div>
        </div>
        <div class="grid-content" style="cursor: pointer;" @click="Overviewxlick('8')">
          <div class="text1" :class="{ tophovese: cardindex == 8 }">
            活跃设备数
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 8 }">
            {{ thirdTab.activeEquipmentQuantity || 0 }}
          </div>
        </div>
        <div
          class="grid-content"
          style="cursor: pointer"
          @click="Overviewxlick('9')"
        >
          <div class="text1" :class="{ tophovese: cardindex == 9 }">
            销售设备数
          </div>
          <div class="text2" :class="{ tophovese: cardindex == 9 }">
            {{ thirdTab.buyEquipQuantity || 0 }}
          </div>
        </div> -->
      </div>

      <div id="echar2"  v-if="echarValue == 0"></div>
      <div v-if="echarValue == 1">
        <el-table :data="echarList" stripe style="width: 100%">
          <!-- <el-table-column type="index" label="序号" width="50">
        </el-table-column> -->
          <el-table-column prop="date" label="日期" align="center">
          </el-table-column>
          <el-table-column
            prop="buyHouseQuantity"
            label="购买服务项目数"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '购买服务项目数', 0)"
                style="cursor: pointer"
                >{{ row.buyHouseQuantity || 0 }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="activeUserQuantity"
            label="活跃用户数"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '活跃用户数', 1)"
                style="cursor: pointer"
                >{{ row.activeUserQuantity }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="newJoinUserQuantity"
            label="新增用户数"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '新增用户数', 2)"
                style="cursor: pointer"
                >{{ row.newJoinUserQuantity || 0 }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="receptionQuantity"
            label="接待量"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '接待量', 3)"
                style="cursor: pointer"
                >{{ row.receptionQuantity || 0 }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="avgReceptionTime"
            label="平均接待时长"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '平均接待时长', 4)"
                style="cursor: pointer"
                >{{ row.avgReceptionTime || 0 }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="activeEquipmentQuantity"
            label="活跃设备数"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '活跃设备数', 5)"
                style="cursor: pointer"
                >{{ row.activeEquipmentQuantity || 0 }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="buyEquipQuantity"
            label="销售设备数"
            align="center"
          >
            <template slot-scope="{ row }">
              <span
                @click="goDetail1(row, '销售设备数', 6)"
                style="cursor: pointer"
                >{{ row.buyEquipQuantity || 0 }}</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="currentPage1"
            :page-sizes="[10, 30, 50]"
            :page-size="size1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          >
          </el-pagination>
        </div>
      </div>
    </div>
      <el-dialog :title="elTitle" :visible.sync="dialogVisible">
      <div class="cen-tab">
        <div style="font-size: 20px">{{ timeStr }}</div>
        <el-table :data="detailList" stripe style="width: 100%">
          <el-table-column
            v-if="visible1"
            prop="houseName"
            label="项目"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="visible1"
            prop="receptionQuantity"
            label="接待量"
            align="center"
          >
          </el-table-column>

          <el-table-column
            v-if="visible5"
            prop="imei"
            label="设备编号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="visible5"
            prop="agentName"
            label="代理商"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="visible5"
            prop="houseName"
            label="公司"
            align="center"
          >
          </el-table-column>
          <el-table-column
            v-if="visible5"
            prop="orgName"
            label="项目"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {},
      },
      firstTab: {},
      secondTab: {},
      thirdTab: {},
      sysCompare:{},
      orderBy:{},
      selValue: "1",
      houseTypes:'0,1',
      operaFlag: true,
      echarValue: "0",
      echarValue1: "0",
      choicValue: "",
      houseList: [],
      secindex: "1",
      dateType: 4,
      customtime: [],
      cardindex: "1",
      dateType1: 1,
      echarValue:'0',
      customtime1:[],
      options: [
        {
          label: "代理商",
          value: "0",
        },
        {
          label: "公司",
          value: "1",
        },
      ],
            options1: [
        {
          label: "趋势图",
          value: "0",
        },
        {
          label: "表格",
          value: "1",
        },
      ],
      options2: [
        {
          label: "正式数据",
          value: "0,1",
        },
        {
          label: "测试数据",
          value: "2,3",
        },
      ],
      echarList1: [],
      echarList: [],
      dialogVisible: false,
      dialogVisible1: false,
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      info: {},
      elTitle: "",
      timeStr: "",
      currentPage: 1,
      size: 10,
      total: 10,
      currentPage1: 1,
      size1: 10,
      total1: 10,
      detailList:[]
    };
  },
  mounted() {
    this.getList();
    // this.tabtimetap(4);
  },
  methods: {
    echarValue1Change(e){
      if(e==0){
        this.secindex = 1
        this.dataOverviewWithSystemWithDay()
      }
    },
    goDetail1(row, str, idx) {
      console.log(row);

      this.timeStr = "";
      this.elTitle = str;
      this.detailList = [];
      if (idx == 0) {
        // 跳转项目管理
        this.$router.push({
          path:'/building/index',
          query:{time:row.date}
        })
      } else if (idx == 1) {
      } else if (idx == 2) {
      } else if (idx == 3) {
      } else if (idx == 4) {
      } else if (idx == 5) {
        this.$router.push({
          path:'/Equipment/index',
          query:{time:row.date}
        })
      } else if (idx == 6) {
      this.visible1 = false;
      this.visible2 = false;
      this.visible3 = false;
      this.visible4 = false;
      this.visible5 = true;
        this.buyEquipmentQuantity(row.date);
         this.dialogVisible = true;
      }
    },
    buyEquipmentQuantity(date) {
      this.$api.api
        .buyEquipmentQuantity({
          agentId: this.selValue == 0 ? this.choicValue : null,
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          startDate: date,
          endDate: date,
          dateType: null,
          houseTypes: this.houseTypes,
          current: this.currentPage,
          size: this.size,
          queryOrgType:this.selValue/1+1,
        })
        .then((res) => {
          // console.log(res);
          this.detailList = res.data.records;
          this.total = res.data.total;
        });
    },
    echarChange(e) {
      if (e == 0) {
        this.dataOverviewWithSystemWithLook();
      } else {
        //获取表格数据
        this.dataOverviewWithSystemWithLookWithTable();
      }
    },
    dataOverviewWithSystemWithLookWithTable() {
      this.$api.api
        .dataOverviewWithSystemWithLookWithTable({
          agentId: localStorage.getItem('agentId'),
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          startDate: this.dateType1 ? "" : this.customtime1[0],
          endDate: this.dateType1 ? "" : this.customtime1[1],
          dateType: this.dateType1,
          houseTypes: this.houseTypes,
          current: this.currentPage1,
          size: this.size1,
          queryOrgType:this.selValue/1+1,
          // hour
        })
        .then((res) => {
          // console.log(res);
          this.echarList = res.data.records;
          this.total1 = res.data.total;
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      // this.correctFindbypage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      // this.correctFindbypage();
    },
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.size1 = val;
      // this.correctFindbypage();
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      // this.correctFindbypage();
    },
    goDetail(row) {
      this.dialogVisible = true;
      this.timeStr = row.time;
      this.elTitle = "项目实时统计";
      this.realTimeStatisticsOfTime(row.hour);
      this.visible1 = true;
      this.visible2 = false;
      this.visible3 = false;
      this.visible4 = false;
    },
    realTimeStatisticsOfTime(hour) {
      this.$api.api
        .realTimeStatisticsOfTime({
          agentId: this.selValue == 0 ? this.choicValue : null,
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          startDate: this.dateType1 ? "" : this.customtime1[0],
          endDate: this.dateType1 ? "" : this.customtime1[1],
          dateType: this.dateType1,
          houseTypes: this.houseTypes,
          queryOrgType:this.selValue/1+1,
          current: this.currentPage,
          size: this.size,
          hour,
        })
        .then((res) => {
          console.log(res);
          this.detailList = res.data.records;
          this.total = res.data.total;
        });
    },
      echarChange(e) {
      if (e == 0) {
        this.dataOverviewWithSystemWithLook();
      } else {
        //获取表格数据
        this.dataOverviewWithSystemWithLookWithTable();
      }
    },
    sysChange(){
      this.choicValue=''
      this.dateType = 4;
      this.dateType1 = 1;
      this.cardindex=1
      this.secindex=1
      this.echarValue1='0'
      this.echarValue='0'
      // this.selValue=this.options[0].value
      // this.houseList=[]
      this.getList();
      // this.dataOverViewWithSystem();
      // this.dataOverviewWithSystemWithDay();
      // this.dataOverviewWithSystemWithLook();
    },
    valuechange() {
      this.dateType = 4;
      this.dateType1 = 1;
      this.cardindex=1
      this.secindex=1
      this.echarValue1='0'
      this.echarValue='0'
      this.dataOverViewWithSystem();
      this.dataOverviewWithSystemWithDay();
      this.dataOverviewWithSystemWithLook();
    },
    // 当选择的代理商或者项目切换时
    selChange() {
      this.choicValue = "";
      this.dateType = 4;
      this.dateType1 = 1;
      this.cardindex=1
      this.secindex=1
      this.echarValue1='0'
      this.echarValue='0'
      this.getList();
    },
    // 获取下拉框数据
    getList() {
      console.log(this.selValue);
      // 当为项目选择时
      if (this.selValue == 1) {
        this.$api.api
          .findMyOrg({
            orgType: localStorage.getItem("orgType"),
            agentId: localStorage.getItem('agentId'),
          })
          .then((res) => {
            this.houseList = res.data;
            this.dataOverViewWithSystem();
            this.dataOverviewWithSystemWithDay();
            this.dataOverviewWithSystemWithLook();
          });
      } else {
        this.$api.api
          .findMyAgent({
            orgType: localStorage.getItem("orgType"),
          })
          .then((res) => {
            this.houseList = res.data;
            this.dataOverViewWithSystem();
            this.dataOverviewWithSystemWithDay();
            this.dataOverviewWithSystemWithLook();
          });
      }
    },
    dataOverviewWithSystemWithDay() {
      this.$api.api
        .dataOverviewWithSystemWithDay({
          // agentId: this.selValue == 0 ? this.choicValue : null,
          agentId: localStorage.getItem('agentId'),
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          startDate: this.dateType1 ? "" : this.customtime1[0],
          endDate: this.dateType1 ? "" : this.customtime1[1],
          dateType: this.dateType1,
          houseTypes:this.houseTypes,
          queryOrgType:this.selValue/1+1,
        })
        .then((res) => {
          console.log(res);
          // this.firstTab = res.data;
          // 对数据进行处理
          // 将数据给一个指定值然后设置一个方法还进行tab切换的时候调用
          this.secondTab = res.data;
          // 调用方法
          // 处理数据
          let arr = [];
          res.data.todayActiveUserList.map((item, index) => {
            let obj = {};
            if (index == 23) {
              obj.time =
                item.time.substring(11, 16) +
                "-" +
                res.data.todayActiveUserList[0].time.substring(11, 16);
              // return
            } else {
              // console.log(item.time,res.data.todayActiveUserList[index/1+1].time);
              obj.time =
                item.time.substring(11, 16) +
                "-" +
                res.data.todayActiveUserList[index / 1 + 1].time.substring(
                  11,
                  16
                );
            }
            obj.hour = index;
            // 接待量
            obj.receptionQuantityInToday =
              res.data.todayReceptionList[index].data;
            // 活跃用户
            obj.activeUserQuantity = res.data.todayActiveUserList[index].data;
            // 活跃设备
            obj.activeEquipmentQuantity =
              res.data.todayActiveEquipmentList[index].data;
            arr.push(obj);
          });
          // console.log(arr);
          this.echarList1 = arr;
          this.getChars1(1);
        });
    },
    // 整体看板
    dataOverviewWithSystemWithLook() {
      this.$api.api
        .dataOverviewWithSystemWithLook({
          startDate: this.dateType ? "" : this.customtime[0],
          endDate: this.dateType ? "" : this.customtime[1],
          dateType: this.dateType,
          // agentId: this.selValue == 0 ? this.choicValue : null,
          agentId: localStorage.getItem('agentId'),
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          houseTypes:this.houseTypes,
          queryOrgType:this.selValue/1+1,
        })
        .then((res) => {
          console.log(res);
          this.thirdTab = res.data.resultA;
          this.sysCompare = res.data.resultB;
          this.orderBy = res.data.contrast;
          this.getChars2(1);
        });
    },
    // echars生成
    getChars1(idx) {
      console.log(idx);
    //  let Strname = ["时段一", "时段二"];
      let timeDate = [];
      // 判断是第几个然后对数据进行渲染
      // 先处理时间
      let arr1 = [];
      let arr2 = [];
      // console.log(timeDate);
      if (idx == 1 ) {
        // 接待量
        this.secondTab.todayReceptionList.map((item) => {
          timeDate.push(item.time.substring(11, 16));
          arr1.push(item.data);
        });
        this.secondTab.yesterdayReceptionList.map((item) => {
          arr2.push(item.data);
        });
      }
      if (idx == 2) {
        // 活跃用户
        this.secondTab.todayActiveUserList.map((item) => {
          timeDate.push(item.time.substring(11, 16));
          arr1.push(item.data);
        });
        this.secondTab.yesterdayActiveUserList.map((item) => {
          arr2.push(item.data);
        });
      }
      if (idx == 3) {
        // 活跃设备
        this.secondTab.todayActiveEquipmentList.map((item) => {
          timeDate.push(item.time.substring(11, 16));
          arr1.push(item.data);
        });
        this.secondTab.yesterdayActiveEquipmentList.map((item) => {
          arr2.push(item.data);
        });
      }
      // let arr = [
      //   {
      //     name: Strname[0],
      //     data: arr1,
      //     type: "line",
      //     smooth: true,
      //   },
      //   {
      //     name: Strname[1],
      //     data: arr2,
      //     type: "line",
      //     smooth: true,
      //   },
      // ];
      let arr=[]
      let Strname = [];
      if(this.customtime1[0]){
         arr = [
        {
          name: Strname[0],
          data: arr1,
          type: "line",
          smooth: true,
        },

      ];
       Strname = ["时段一"];
      }else{
         arr = [
        {
          name: Strname[0],
          data: arr1,
          type: "line",
          smooth: true,
        },
        {
          name: Strname[1],
          data: arr2,
          type: "line",
          smooth: true,
        },
      ];
      Strname = ["时段一", "时段二"];
      }
      this.SwitchCARDS(arr, "main", timeDate, Strname);
    },
    getChars2(idx) {
      console.log(idx);
      let Strname = [];
      let timeDate = [];
      let arr1 = [];
      if (idx == 1) {
        Strname = ["购买服务项目数"];
        this.thirdTab.buyHouseList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      } else if (idx == 2) {
        Strname = ["服务期内项目数"];
        this.thirdTab.houseQofEnoughList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      } else if (idx == 4) {
        Strname = ["活跃用户数"];
        this.thirdTab.activeUserList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      } else if (idx == 5) {
        Strname = ["新增用户数"];
        this.thirdTab.newJoinUserList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      } else if (idx == 6) {
        Strname = ["接待量"];
        this.thirdTab.receptionList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      } else if (idx == 7) {
        Strname = ["平均接待时长"];
        this.thirdTab.avgReceptionList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      } else if (idx == 8) {
        Strname = ["活跃设备数"];
        this.thirdTab.activeEquipmentList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      }else if (idx == 9) {
        Strname = ["销售设备数"];
        this.thirdTab.buyEquipQuantityList.map((item) => {
          timeDate.push(item.time.substring(5, 10));
          arr1.push(item.data);
        });
      }
      let arr = [
        {
          name: Strname[0],
          data: arr1,
          type: "line",
          smooth: true,
        }
      ];
      this.SwitchCARDS(arr, "echar2", timeDate, Strname);
    },
    // 获取总览数据
    dataOverViewWithSystem() {
      this.$api.api
        .dataOverViewWithSystem({
          // agentId: this.selValue == 0 ? this.choicValue : null,
          agentId: localStorage.getItem('agentId'),
          orgCode: this.selValue == 1 ? this.choicValue : null,
          orgType: localStorage.getItem("orgType"),
          houseTypes:this.houseTypes,
          queryOrgType:this.selValue/1+1,
        })
        .then((res) => {
          // console.log(res);
          this.firstTab = res.data;
        });
    },
    Overviewxlick(i) {
      this.cardindex = i;
      this.getChars2(i);
    },
    secondChange(i) {
      this.secindex = i;
      this.getChars1(i);
    },
    confirmtime(e) {
      this.dateType = null;
      this.dataOverviewWithSystemWithLook();
    },
    tabtimetap(i) {
      this.dateType = i;
      this.customtime=[]
      this.dataOverviewWithSystemWithLook();
    },
      confirmtime1(e) {
      this.dateType1 = null;
      this.dataOverviewWithSystemWithDay();
    },
    tabtimetap1(i) {
      this.dateType1 = i;
      this.customtime1 = [];
      this.dataOverviewWithSystemWithDay();
    },
    //卡片下折线图
    SwitchCARDS(arr, str, timeDate, Strname) {
      // console.log(arr,str,timeDate,Strname);
      var chartDom = document.getElementById(str);
      echarts.init(chartDom).dispose();
      var myChart = echarts.init(chartDom);
      var option;

      option = {
          color: [
              "#6F8EDC",
              "#EE6666",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#66AFF5",
              "#FABD2B",
              "#FFCF8F",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: Strname,
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          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: arr,
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
   min-width:1000px;
  padding-bottom: 100px;
}

.container {
  display: grid;
  grid-template-columns: repeat(6, 16%);
  grid-column-gap: 8px;
  grid-row-gap: 18px;
  .pagechen {
    background: #ffffff;
    border-radius: 4px;
    padding: 15px;
    border: 1px solid #e0e0e0;

    .pageboxtitle1 {
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
    }
    .pageboxtitle2 {
      width: 100%;
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      .span1 {
        width: 100px;
        height: 30px;
        font-size: 30px;
        font-weight: normal;
        color: #32363d;
        line-height: 30px;
      }
      .span2 {
        height: 30px;
        font-size: 16px;
        display: flex;
        align-items: flex-end;
        .span2-1 {
          color: #424d64;
          margin-right: 15px;
          font-weight: 400;
        }
        .span2-2 {
          font-weight: 600;
          color: #e6273a;
        }
        .span2-3 {
          font-weight: 600;
          color: #25ceba;
        }
      }
    }
    .pageboxtitle3 {
      text-align: center;
      font-size: 30px;
      line-height: 44px;
    }
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 20px;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
  }
  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    text-indent: 20px;
  }
}

#main {
  width: 100%;
  height: 380px;
}
#echar2 {
  width: 100%;
  height: 380px;
}
#Brokenline1 {
  width: 100%;
  height: 350px;
}
#Brokenline2 {
  width: 100%;
  height: 350px;
}
#Pinspeak1 {
  width: 100%;
  height: 350px;
}
#Pinspeak2 {
  width: 100%;
  height: 350px;
}
.app-box-san {
  width: 100%;
  // height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo {
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.app-box-er {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding: 15px;
}
.grid-content {
  background: #ffffff;
  height: 90px;
  border: 1px solid #e0e0e0;
  .text1 {
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 20px;
    margin-top: 20px;
  }
  .text2 {
    height: 32px;
    font-size: 32px;
    font-weight: normal;
    line-height: 32px;
    text-indent: 20px;
    margin-top: 10px;
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.tophovese {
  color: #2671e2 !important;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}
.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  margin-top: 15px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}
.app_titile {
  display: flex;
  justify-content: space-between;
}
</style>
