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

    <div class="app-top">
      <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">
        <div class="titel-text">项目选择:</div>
        <div style="margin-left: 26px">
          <el-select
            v-model="houseId"
            placeholder="请选择"
            filterable
            @change="houseChange"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel">
        <div style="text-indent: 30px; min-width: 100px">接待时间:</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            v-model="customtime"
            :clearable="false"
            @change="confirmtime()"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="app-titel">
        <div style="margin-left: 26px; margin-top: 12px" class="div-lab">
          <div class="label">顾问</div>
          <el-select
            v-model="consultantlistid"
            @change="consultanttap"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in consultantlist"
              :key="item.createUser"
              :label="item.accountName"
              :value="item.createUser"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 26px" class="div-lab">
          <div class="label">对比</div>
          <el-select
            v-model="Pklistid"
            @change="packtap"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in Pklist"
              :key="item.createUser"
              :label="item.accountName"
              :value="item.createUser"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div v-if="consultantlistid">
      <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">接待量</div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ consultantname }}</div>
              <div class="text1-2">{{ datalistobj1.avgA }}次</div>
            </div>
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ Packname }}</div>
              <div class="text1-2">{{ datalistobj1.avgB }}次</div>
            </div>
          </div>
          <div style="height: 350px; width: 94%; margin: 0 auto">
            <div id="data1" style="min-height: 350px"></div>
          </div>
        </div>
        <div class="zuo">
          <div class="title">
            <div class="text1">接待时长</div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ consultantname }}</div>
              <div class="text1-2">{{ datalistobj2.avgA }}分钟</div>
            </div>
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ Packname }}</div>
              <div class="text1-2">{{ datalistobj2.avgB }}分钟</div>
            </div>
          </div>
          <div style="height: 350px; width: 94%; margin: 0 auto">
            <div id="data2" style="min-height: 350px"></div>
          </div>
        </div>
      </div>

      <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">平均执行率趋势</div>
            <div class="text2">
              <el-select
                @change="teamAllLevelidtap()"
                style="width: 90%; margin: 0 auto"
                v-model="teamAllLevelid"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in teamAllLevel"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ consultantname }}</div>
              <div class="text1-2">{{ datalistobj3.avgA }}%</div>
            </div>
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ Packname }}</div>
              <div class="text1-2">{{ datalistobj3.avgB }}%</div>
            </div>
          </div>
          <div style="height: 350px; width: 94%; margin: 0 auto">
            <div id="data3" style="height: 350px"></div>
          </div>
        </div>
        <div class="zuo">
          <div class="title">
            <div class="text1">销讲能力雷达图</div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">&nbsp;</div>
              <div class="text1-2">&nbsp;</div>
            </div>
          </div>
          <div v-if="data4flag" style="height: 350px; width: 94%; margin: 0 auto">
            <div id="data4" style="height: 350px"></div>
          </div>
          <div v-else  style="height: 350px; width: 94%; margin: 0 auto;text-align:center;color: #999999;">
          <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
          <div class="nulltext">暂无数据</div>
        </div>
        </div>
      </div>

      <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">违禁接待次数</div>
            <div class="text2">
              <el-select
                @change="teamAllLeve2tap()"
                style="width: 90%; margin: 0 auto"
                v-model="teamAllLeve2id"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in teamAllLeve2"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ consultantname }}</div>
              <div class="text1-2">{{ datalistobj5.avgA }}次</div>
            </div>
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">{{ Packname }}</div>
              <div class="text1-2">{{ datalistobj5.avgB }}次</div>
            </div>
          </div>
          <div style="height: 350px; width: 94%; margin: 0 auto">
            <div id="data5" style="height: 350px"></div>
          </div>
        </div>
        <div class="zuo">
          <div class="title">
            <div class="text1">违禁话术雷达图</div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%">
              <div class="text1-1">&nbsp;</div>
              <div class="text1-2">&nbsp;</div>
            </div>
          </div>
          <div v-if="data6flag" style="height: 350px; width: 94%; margin: 0 auto">
            <div  id="data6" style="height: 350px"></div>
          </div>
          <div v-else  style="height: 350px; width: 94%; margin: 0 auto;text-align:center;color: #999999;">
          <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
          <div class="nulltext">暂无数据</div>
        </div>

        </div>
      </div>
      <!-- 表格 -->
      <div class="cen-tab">
        <div class="app-titel1">
          <div class="toptimeqhuan">
            <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
              销讲统计
            </div>
            <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
              违禁统计
            </div>
          </div>
          <div
            style="margin-left: auto; margin-right: 10px"
            v-if="sta_men_downLoad"
          >
            <el-button @click="downLoad">导出</el-button>
          </div>
        </div>
        <el-table max-height="300" :data="tableData" stripe style="width: 100%">
          <el-table-column prop="statDate" label="日期" align="center">
            <template slot-scope="scope">
              {{
                scope.$index == tableData.length - 1
                  ? "合计/平均"
                  : scope.row.statDate.substring(0, 10)
              }}
              <!-- {{scope.$index}} -->
            </template>
          </el-table-column>
          <el-table-column prop="activeCustomer" label="接待量" align="center">
            <template slot-scope="{ row }">
              {{ row.activeCustomer }}次
            </template>
          </el-table-column>
          <el-table-column
            v-if="tabFlag == 1"
            prop="prohibitedCustomer"
            label="违禁接待次数"
            align="center"
          >
            <template slot-scope="{ row }">
              {{ row.prohibitedCustomer }}次
            </template>
          </el-table-column>
          <el-table-column
            v-if="tabFlag == 1"
            prop="prohibitedZb"
            label="违禁接待占比"
            align="center"
          >
            <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
            <!-- </el-table-column>
          <el-table-column
          v-if="tabFlag == 1"
          prop="receivableEquipmentCount"
          label="返现次数"
          align="center"
        >
        </el-table-column>
          <el-table-column
          v-if="tabFlag == 1"
          prop="receivableEquipmentCount"
          label="过度保证次数"
          align="center"
        > -->
          </el-table-column>
          <el-table-column
            v-if="tabFlag == 0"
            prop="realityEquipmentCount"
            label="接待时长"
            align="center"
          >
            <template slot-scope="{ row }">
              {{ row.sumDuration }}分钟
            </template>
          </el-table-column>
          <!-- <el-table-column v-if="tabFlag == 0" prop="acceptanceNum" label="品牌介绍执行率" align="center">
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 0"
          prop="createTime"
          label="区位介绍执行率"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="remark" v-if="tabFlag == 0" label="...执行性率" align="center">
        </el-table-column>
        <el-table-column prop="remark" v-if="tabFlag == 1" label="...执行性次数" align="center">
        </el-table-column> -->
          <el-table-column
            v-if="tabFlag == 0"
            prop="fraction"
            label="平均执行率"
            align="center"
          >
            <template slot-scope="{ row }"> {{ row.fraction }}% </template>
          </el-table-column>
          <el-table-column
            v-for="(item, idx) in tablist"
            :key="idx"
            :prop="item.props"
            :label="item.label"
            align="center"
          >
            <template slot-scope="{ row }">
              <span v-if="tabFlag == 1"> {{ row[item.props] }}次</span>
              <span v-else> {{ row[item.props] }}%</span>
              <!-- {{row[item.props]}}% -->
            </template>
          </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="current"
            :page-sizes="[10, 30, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div v-else class="noData">
      <div class="imgboxc">
        <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
        <div class="nulltext">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
export default {
  data() {
    return {
      houseId: "",
      buildingoptions: [],
      TimetoAhoose: 4,
      tabFlag: 0,
      customtime: [],
      tableData: [],
      current: 1,
      size: 10,
      total: 20,
      statDateStart: "",
      statDateEnd: "",
      consultantlist: [],
      consultantlistid: "",
      consultantname: "",

      Pklist: [],
      Pklistid: "",
      Packname: "",

      teamAllLevel: [],
      teamAllLevelid: "",

      teamAllLeve2: [],
      teamAllLeve2id: "",

      datalistobj1: {
        avgA: "",
        avgB: "",
        listA: [],
        listB: [],
      },
      datalistobj2: {
        avgA: "",
        avgB: "",
        listA: [],
        listB: [],
      },
      datalistobj3: {
        avgA: "",
        avgB: "",
        listA: [],
        listB: [],
      },
      datalistobj4: {
        listA: [],
        listB: [],
      },
      datalistobj5: {
        avgA: "",
        avgB: "",
        listA: [],
        listB: [],
      },
      datalistobj6: {
        listA: [],
        listB: [],
      },
      tablist: [],
      houseList: [],
      role: "",
      data6flag:true,
      data4flag:true
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_men_downLoad = this.permissions["sta_men_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.init();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    downLoad() {
      let obj = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        accountId: this.consultantlistid,
        dateType: this.TimetoAhoose == 7 ? null : this.TimetoAhoose,
      };
      exportMethodPost('autoSR/cusStageStatistics/prohibitedStatisticsExport','顾问能力',obj)
    },
    init() {
      this.getAccount();
      this.teamAllLeve();
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.init();
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.init();
        });
    },
    accountData1() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        userA: this.consultantlistid,
        userB: this.Pklistid,
        type: 1,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.accountData(pamaet).then((res) => {
        this.datalistobj1 = {
          avgA: res.data.avgA || 0,
          avgB: res.data.avgB || 0,
          listA: res.data.listA || [],
          listB: res.data.listB || [],
        };
        let arr1 = [];
        let arr2 = [];
        let timelist = [];
        this.datalistobj1.listA.map((item, index) => {
          timelist.push(item.statDate.substring(5, 10));
        });
        this.datalistobj1.listA.map((item, index) => {
          arr1.push(item.activeCustomer);
        });
        this.datalistobj1.listB.map((item, index) => {
          arr2.push(item.activeCustomer);
        });
        this.SwitchCARDS1(arr1, arr2, timelist, "data1");
      });
    },
    prohibitedStatistics() {
      this.$api.api
        .prohibitedStatistics({
          houseId: this.houseId,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
          current: this.current,
          size: this.size,
          accountId: this.consultantlistid,
          dateType: this.TimetoAhoose == 7 ? null : this.TimetoAhoose,
        })
        .then((res) => {
          this.tableData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate();
          this.total = res.data.total;
        });
    },
    deailDate() {
      this.tablist = [];
      // 当他是第一个 小将
      if (this.tabFlag == 0) {
        console.log("第一个");
        this.tableData[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      } else {
        console.log("第二个");
        this.tableData[0].sensitiveWordsList.map((item, idx) => {
          let obj = {};
          obj.label = item.words;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.sensitiveWordsList[idx].num;
          });
        });
      }

      // console.log(this.tableData);
    },
    accountData2() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        userA: this.consultantlistid,
        userB: this.Pklistid,
        type: 2,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.accountData(pamaet).then((res) => {
        this.datalistobj2 = {
          avgA: Math.floor(res.data.avgA) || 0,
          avgB: Math.floor(res.data.avgB) || 0,
          listA: res.data.listA || [],
          listB: res.data.listB || [],
        };
        let arr1 = [];
        let arr2 = [];
        let timelist = [];
        this.datalistobj2.listA.map((item, index) => {
          timelist.push(item.statDate.substring(5, 10));
        });
        this.datalistobj2.listA.map((item, index) => {
          arr1.push(Math.floor(item.sumDuration) || 0);
        });
        this.datalistobj2.listB.map((item, index) => {
          arr2.push(Math.floor(item.sumDuration) || 0);
        });
        this.SwitchCARDS1(arr1, arr2, timelist, "data2");
      });
    },
    accountData3() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        userA: this.consultantlistid,
        userB: this.Pklistid,
        type: 3,
        marketingId: this.teamAllLevelid,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.accountData(pamaet).then((res) => {
        this.datalistobj3 = {
          avgA: res.data.avgA || 0,
          avgB: res.data.avgB || 0,
          listA: res.data.listA || [],
          listB: res.data.listB || [],
        };
        let arr1 = [];
        let arr2 = [];
        let timelist = [];
        this.datalistobj3.listA.map((item, index) => {
          timelist.push(item.statDate.substring(5, 10));
        });
        this.datalistobj3.listA.map((item, index) => {
          arr1.push(item.fraction);
        });
        this.datalistobj3.listB.map((item, index) => {
          arr2.push(item.fraction);
        });
        this.SwitchCARDS1(arr1, arr2, timelist, "data3");
      });
    },
    teamAllLevelidtap() {
      this.accountData3();
    },
    accountData4() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        userA: this.consultantlistid,
        userB: this.Pklistid,
        type: 4,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.accountData(pamaet).then((res) => {
        this.datalistobj4 = {
          listA: res.data.listA || [],
          listB: res.data.listB || [],
        };
        let arr1 = [];
        let arr2 = [];
        let timelist = [];
        this.datalistobj4.listA.map((item, index) => {
          timelist.push({ name: item.name, max: 100 });
        });
        this.datalistobj4.listA.map((item, index) => {
          arr1.push(item.zxl);
        });
        this.datalistobj4.listB.map((item, index) => {
          arr2.push(item.zxl);
        });
        this.piechart2(arr1, arr2, timelist, "data4");
      });
    },
    accountData5() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        userA: this.consultantlistid,
        userB: this.Pklistid,
        type: 5,
        words: this.teamAllLeve2id,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.accountData(pamaet).then((res) => {
        this.datalistobj5 = {
          avgA: res.data.avgA || 0,
          avgB: res.data.avgB || 0,
          listA: res.data.listA || [],
          listB: res.data.listB || [],
        };
        let arr1 = [];
        let arr2 = [];
        let timelist = [];
        this.datalistobj5.listA.map((item, index) => {
          timelist.push(item.statDate.substring(5, 10));
        });
        this.datalistobj5.listA.map((item, index) => {
          arr1.push(item.prohibitedCustomer);
        });
        this.datalistobj5.listB.map((item, index) => {
          arr2.push(item.prohibitedCustomer);
        });
        this.SwitchCARDS1(arr1, arr2, timelist, "data5");
      });
    },
    accountData6() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        userA: this.consultantlistid,
        userB: this.Pklistid,
        type: 6,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.accountData(pamaet).then((res) => {
        console.log(res.data,'数据');
        this.datalistobj6 = {
          listA: res.data.listA || [],
          listB: res.data.listB || [],
        };
        let arr1 = [];
        let arr2 = [];
        let timelist = [];
        this.datalistobj6.listA.map((item, index) => {
          timelist.push({ name: item.words, max: 100 });
        });
        this.datalistobj6.listA.map((item, index) => {
          arr1.push(item.num);
        });
        this.datalistobj6.listB.map((item, index) => {
          arr2.push(item.num);
        });
        this.piechart2(arr1, arr2, timelist, "data6");
      });
    },
    teamAllLeve2tap() {
      this.accountData5();
    },
    //切换顾问
    consultanttap() {
      this.consultantlist.map((item) => {
        if (item.createUser == this.consultantlistid) {
          this.consultantname = item.accountName;
        }
      });
      this.accountData1();
      this.accountData2();
      this.accountData3();
      this.accountData4();
      this.accountData5();
      this.accountData6();
      this.prohibitedStatistics();
    },
    //对比切换
    packtap() {
      this.Pklist.map((item) => {
        if (item.createUser == this.Pklistid) {
          this.Packname = item.accountName;
        }
      });
      this.accountData1();
      this.accountData2();
      this.accountData3();
      this.accountData4();
      this.accountData5();
      this.accountData6();
    },

    // 获取一级
    teamAllLeve() {
      this.teamAllLevel = [{ name: "平均执行", value: "" }];
      this.teamAllLeve2 = [{ name: "总次数", value: "" }];
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamAllLevel(pamaet).then((res) => {
        let arr1 = res.data.resultsList || [];
        let arr2 = res.data.sensitiveWordsList || [];
        arr1.map((item) => {
          this.teamAllLevel.push({
            name: item.name,
            value: item.marketingId,
          });
        });
        arr2.map((item) => {
          this.teamAllLeve2.push({
            name: item.words,
            value: item.words,
          });
        });
        this.teamAllLevelid = "";
        this.teamAllLeve2id = "";
      });
    },
    getAccount() {
      let pamaet = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.getAccount(pamaet).then((res) => {
        let list = res.data || [];

        if (list.length == 0) {
          this.consultantlist = list
           this.consultantlistid=''
          this.datalistobj1 = {
            avgA: "",
            avgB: "",
            listA: [],
            listB: [],
          };
          this.datalistobj2 = {
            avgA: "",
            avgB: "",
            listA: [],
            listB: [],
          };
          this.datalistobj3 = {
            avgA: "",
            avgB: "",
            listA: [],
            listB: [],
          };
          this.datalistobj4 = {
            listA: [],
            listB: [],
          };
          this.datalistobj5 = {
            avgA: "",
            avgB: "",
            listA: [],
            listB: [],
          };
          this.datalistobj6 = {
            listA: [],
            listB: [],
          };
          // this.SwitchCARDSsha("data4");
          // this.SwitchCARDSsha("data6");
          // this.SwitchCARDSsha("data1");
          // this.SwitchCARDSsha("data2");
          // this.SwitchCARDSsha("data3");
          // this.SwitchCARDSsha("data5");

          // this.tablist = [];
        } else {
          this.consultantlist = list;
          this.consultantlistid = list[0].createUser;
          this.consultantname = list[0].accountName;
          let arr = [
            {
              accountName: "案场平均",
              createUser: "",
            },
          ];
          list.forEach((element) => {
            arr.push({
              accountName: element.accountName,
              createUser: element.createUser,
            });
          });
          this.Pklist = arr;
          this.Pklistid = "";
          this.Packname = this.Pklist[0].accountName;
          this.accountData1();
          this.accountData2();
          this.accountData3();
          this.accountData4();
          this.accountData5();
          this.accountData6();
          this.prohibitedStatistics();
        }
        // 代码绝了
      });
    },
    SwitchCARDSsha(data1) {
      echarts.init(document.getElementById(data1)).dispose();
    },
    SwitchCARDS1(arr1, arr2, timelist, data1) {
      echarts.init(document.getElementById(data1)).dispose();
      var chartDom = document.getElementById(data1);
      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",
        ],
        legend: {
          data: [this.consultantname, this.Packname],
          top: "6",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: timelist,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        series: [
          {
            name: this.consultantname,
            data: arr1,
            type: "line",
            smooth: true,
          },
          {
            name: this.Packname,
            data: arr2,
            type: "line",
            smooth: true,
          },
        ],
      };
      if (data1 == "data3") {
        option.tooltip = {
          trigger: "axis",
          formatter: function (params) {
            let src =
              "<p>" +
              params[0].seriesName +
              ":" +
              params[0].data +
              "%" +
              "</p>" +
              "<p>" +
              params[1].seriesName +
              ":" +
              params[1].data +
              "%" +
              "</p>";
            return src;
          },
        };
        option.yAxis = {
          type: "value",
          splitNumber: 5,
          max: 100,
          min: 0,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        };
      } else {
        option.tooltip = {
          trigger: "axis",
        };
        option.yAxis = {
          type: "value",
          splitNumber: 5,
          min: 0,
          minInterval: 1,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        };
      }

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    piechart2(arr1, arr2, timelist, data1) {
      echarts.init(document.getElementById(data1)).dispose();
      var chartDom = document.getElementById(data1);
      var myChart = echarts.init(chartDom);
      // try{
      //   var myChart = echarts.init(chartDom);
      // }catch(err){
      //   console.log(err,data1);
      // }
      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: [this.consultantname, this.Packname],
          right: "10",
          top: "10",
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          indicator: timelist,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: [
              {
                value: arr1,
                name: this.consultantname,
              },
              {
                value: arr2,
                name: this.Packname,
              },
            ],
          },
        ],
      };
      try{
         option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
        this[data1+'flag']=true
      });
      }
      catch(err){
        console.log(err,data1);
        this[data1+'flag']=false
        echarts.init(document.getElementById(data1)).dispose();
        console.log(this[data1+'flag']);
      }

    },
    handleCurrentChange(e) {
      this.current = e;
      this.prohibitedStatistics();
    },
    handleSizeChange(e) {
      this.size = e;
      this.prohibitedStatistics();
    },
    confirmtime() {
      this.TimetoAhoose = 7;
      this.statDateStart = this.customtime[0];
      this.statDateEnd = this.customtime[1];
      this.init();
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.init();
    },
    tabFlagChange(idx) {
      this.tabFlag = idx;
      this.deailDate();
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel1 {
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #32363d;
    line-height: 70px;
    margin-left: 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: 16px;
  }
}

.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;
    }
  }
}

.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;
      }
    }
  }
}

.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 10px;
  .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: 50px;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
.noData{
      width: 100%;
    // height: 60vh;
    height: 500px;
    background: #fff;
    text-align: center;
    margin-top: 20px;
    overflow: hidden;
}
.imgboxc{
  margin-top: 100px;
  color: #999999;
}
</style>
