<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" style="padding-right:10px;">
        <div style="text-indent: 30px; min-width: 104px">接待时间:</div>
        <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>
        <div style="margin-left: 20px">
          <el-date-picker
            @change="confirmtime"
            v-model="customtime"
            :clearable="false"
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 20px">
          <el-checkbox v-model="checked" @change="radioChange"
            >对比时间段</el-checkbox
          >
        </div>
        <div
          v-if="checked"
          style="
            margin-left: 20px;
            border: 1px solid #dcdfe6;
            min-width: 220px;
            height: 30px;
            border-radius: 4px;
            max-width: 360px;
            font-size: 13px;
            line-height: 30px;
            text-indent: 8px;
            cursor: pointer;
          "
          @click="show"
        >
          <!-- {{ selectTime1 ? "时段二： " : "请选择： " }}
          <span v-if="selectTime1">{{ selectTime + "-" + selectTime1 }}</span> -->
          <div style="display: flex">
            <div style="min-width: 60px">
              {{ selectTime1 ? "时段二： " : "请选择： " }}
            </div>
            <div v-if="selectTime1" style="display: flex">
              <!-- {{ selectTime+ "-" + selectTime1}} -->
              <div style="min-width: 120px; text-align: center">
                {{ selectTime }}
              </div>
              <span>-</span>
              <div
                style="min-width: 120px; text-align: center; margin-right: 32px"
              >
                {{ selectTime1 }}
              </div>
            </div>
          </div>
          <el-date-picker
            style="opacity: 0"
            v-model="time"
            @change="timeChange"
            ref="time"
            type="date"
            :clearable="false"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>
    </div>

    <!-- //卡片 -->
    <div class="kapian-box">
      <div class="kayi">
        <div class="shang">
          <div class="zuo">
            <div class="text1">有效接待</div>
            <div class="text2">{{ cardobj.startSumCustomer || 0 }}次</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves1.png" alt="" />
          </div>
        </div>
        <div v-if="Confirmthecontrast" class="xia">
          <span class="span1">对比:{{ cardobj.endSumCustomer || 0 }}次</span>
          <!-- <span class="span2">{{cardobj.contrastSumCustomer ||0}}%</span> -->
          <span class="span2" v-if="cardobj.contrastSumCustomer == 0">{{
            cardobj.contrastSumCustomer
          }}</span>
          <span
            class="span2"
            v-else-if="cardobj.contrastSumCustomer > 0"
            style="color: red"
            >{{ cardobj.contrastSumCustomer }}</span
          >
          <span
            class="span2"
            v-else-if="cardobj.contrastSumCustomer < 0"
            style="color: #25ceba"
            >{{ cardobj.contrastSumCustomer }}</span
          >
        </div>
      </div>

      <div class="kayi">
        <div class="shang">
          <div class="zuo">
            <div class="text1">平均执行率</div>
            <div class="text2">{{ cardobj.startFraction || 0 }}%</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves2.png" alt="" />
          </div>
        </div>
        <div v-if="Confirmthecontrast" class="xia">
          <span class="span1">对比:{{ cardobj.endFraction || 0 }}%</span>
          <!-- <span class="span2">{{cardobj.contrastFraction ||0}}%</span> -->
          <span class="span2" v-if="cardobj.contrastFraction == 0"
            >{{ cardobj.contrastFraction }}%</span
          >
          <span
            class="span2"
            v-else-if="cardobj.contrastFraction > 0"
            style="color: red"
            >{{ cardobj.contrastFraction }}%</span
          >
          <span
            class="span2"
            v-else-if="cardobj.contrastFraction < 0"
            style="color: #25ceba"
            >{{ cardobj.contrastFraction }}%</span
          >
        </div>
      </div>

      <div class="kayi" style="margin: 0px">
        <div class="shang">
          <div class="zuo">
            <div class="text1">平均接待时长/min</div>
            <div class="text2">{{ cardobj.startSumDuration || 0 }}</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves3.png" alt="" />
          </div>
        </div>
        <div v-if="Confirmthecontrast" class="xia">
          <span class="span1">对比:{{ cardobj.endSumDuration || 0 }}</span>
          <!-- <span class="span2">{{cardobj.contrastSumDuration ||0}}%</span> -->
          <span class="span2" v-if="cardobj.contrastSumDuration == 0">{{
            cardobj.contrastSumDuration
          }}</span>
          <span
            class="span2"
            v-else-if="cardobj.contrastSumDuration > 0"
            style="color: red"
            >{{ cardobj.contrastSumDuration }}</span
          >
          <span
            class="span2"
            v-else-if="cardobj.contrastSumDuration < 0"
            style="color: #25ceba"
            >{{ cardobj.contrastSumDuration }}</span
          >
        </div>
      </div>
    </div>

    <!-- 图表 -->
    <div class="app-box-er">
      <div class="titletab" style="cursor: pointer">
        <div :class="{ claindex: aliasclass == 1 }" @click="tapChange(1)">
          平均执行率
        </div>
        <div :class="{ claindex: aliasclass == 2 }" @click="tapChange(2)">
          团队执行率
        </div>
        <div :class="{ claindex: aliasclass == 3 }" @click="tapChange(3)">
          顾问销讲能力
        </div>
        <div :class="{ claindex: aliasclass == 4 }" @click="tapChange(4)">
          销讲一级执行
        </div>
        <div :class="{ claindex: aliasclass == 5 }" @click="tapChange(5)">
          销讲二级执行
        </div>
      </div>
      <!-- 团队选部门 -->
      <div
        v-if="aliasclass == 2"
        style="display: flex; align-items: center; margin-top: 26px"
      >
        部门：
        <el-select
          @change="departmenttap()"
          v-model="departmentid"
          placeholder="请选择"
        >
          <el-option
            v-for="item in departmentlist"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 选择顾问 -->
      <div
        v-if="aliasclass == 3"
        style="display: flex; align-items: center; margin-top: 26px"
      >
        顾问：
        <el-select
          @change="consultanttap()"
          v-model="consultantid"
          placeholder="请选择"
        >
          <el-option
            v-for="item in consultantlist"
            :key="item.accountId"
            :label="item.accountName"
            :value="item.accountId"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 一二级 -->
      <div
        v-if="aliasclass == 5"
        style="display: flex; align-items: center; margin-top: 26px"
      >
        一级：
        <el-select
          @change="Level1tap()"
          v-model="Level1id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in Level1"
            :key="item.marketingId"
            :label="item.name"
            :value="item.marketingId"
          >
          </el-option>
        </el-select>
        &nbsp; &nbsp; 二级：
        <el-select
          @change="Level2tap()"
          v-model="Level2id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in Level2"
            :key="item.marketingId"
            :label="item.name"
            :value="item.marketingId"
          >
          </el-option>
        </el-select>
      </div>
        <div class="noData" v-if="departmentlist.length==0&&aliasclass == 2">
        <div class="imgboxc">
        <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
        <div class="nulltext">暂无数据</div>
      </div>
      </div>
        <div class="noData" v-if="consultantlist.length==0&&aliasclass == 3">
        <div class="imgboxc">
        <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
        <div class="nulltext">暂无数据</div>
      </div>
      </div>
      <div v-if="mainFlag"  id="main"></div>
      <div class="flag" style="text-align:center;" v-if="!mainFlag">
        <div class="imgboxc">
        <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
        <div class="nulltext">暂无数据</div>
      </div>
      </div>
      </div>

    <!-- 表格 -->
    <div
      class="app-box-san"
      v-if="Confirmthecontrast && aliasclass != 3 && aliasclass != 4"
    >
      <div class="santitle">对比报表</div>
      <div class="santab">
        <el-table :data="tableData" height="400" border style="width: 100%">
          <el-table-column prop="name" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="shiduan1" label="时段1" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.shiduan1 }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="shiduan2" label="时段2" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.shiduan2 }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="heji" label="变化" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.heji > 0">
                <i class="el-icon-top" style="color: red"></i
                >{{ scope.row.heji }}%</span
              >
              <span v-if="scope.row.heji == 0">{{ scope.row.heji }}%</span>
              <span v-if="scope.row.heji < 0">
                <i class="el-icon-bottom" style="color: #25ceba"></i
                >{{ scope.row.heji }}%</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div
      v-if="(aliasclass == 3 || aliasclass == 4)&&tablelist1.length > 0"
      class="app-box-san"
      style="padding: 12px"
    >
      <div style="overflow: auto">
        <table class="table">
          <tbody class="tbody">
            <tr v-if="tablelist1.length != 0">
              <td
                class="theadtd"
                v-for="(item, index) in tablelist1"
                :key="index"
              >
                {{ item.name }}
              </td>
            </tr>
            <tr v-if="tablelist2.length != 0">
              <td
                class="theadtd"
                v-for="(item, index) in tablelist2"
                :key="index"
              >
                {{ item.name }}
              </td>
            </tr>
            <tr v-if="tablelist3.length != 0">
              <td
                class="theadtd"
                v-for="(item, index) in tablelist3"
                :key="index"
              >
                {{ item.name }}
              </td>
            </tr>
            <tr v-if="tablelist4.length != 0">
              <td
                class="theadtd"
                v-for="(item, index) in tablelist4"
                :key="index"
              >
                <span v-if="item.name == '变化'">{{ item.name }}</span>
                <span v-else-if="item.name == 0">{{ item.name }}%</span>
                <span v-else-if="item.name > 0" style="color: red"
                  >{{ item.name }}%</span
                >
                <span v-else-if="item.name < 0" style="color: #25ceba"
                  >{{ item.name }}%</span
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost} from "@/util/util";
export default {
  data() {
    return {
      timeType: 4,
      pickerOptions: {
        disabledDate(time) {
          // return time.getTime() > Date.now();
        },
      },
      time: "", //对比时间的数组
      page: {
        openTime: "",
        closeTime: "",
      },
      customtime: [], //自定义时间
      selectTime1: "", //对比时间
      selectTime: "", //对比时间
      aliasclass: 1, //tab下标
      houseId: "", //项目id
      options: [],
      value: "",
      checked: false, //是否对比
      Confirmthecontrast: false,
      tableData: [], //表格数据
      cardobj: {},
      departmentlist: [],
      departmentid: "",
      echartsisshow: true,
      consultantlist: [],
      consultantid: "",
      tablelist1: [],
      tablelist2: [],
      tablelist3: [],
      tablelist4: [],
      Level1: [],
      Level2: [],
      Level1id: "",
      Level2id: "",
      houseList: [],
      role: "",
      mainFlag:true,
    };
  },
    computed: {
    ...mapGetters(["permissions"]),
  },
    created() {
    this.sta_tre_downLoad = this.permissions["sta_tre_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.tabtimetap(4);
      this.overviewfindList();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    downLoad(){

    //  exportMethodPost()
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.selectTime1 = ""; //对比时间
      this.selectTime = ""; //对比时间
      this.aliasclass = 1; //tab下标
      this.page.openTime = "";
      this.page.closeTime = "";
      this.checked = false;
      this.tabtimetap(4);
      this.overviewfindList();
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.tabtimetap(4);
          this.overviewfindList();
        });
    },
    //销讲二级
    trendAnalysisLevel2() {
      let pamaet = {
        showStatus: "",
        houseId: this.houseId,
        timeType: 0,
        firstStartDate: this.page.openTime,
        firstEndDate: this.page.closeTime,
        lastStartDate: this.selectTime,
        lastEndDate: this.selectTime1,
        marketingId: this.Level2id,
      };

      if (this.timeType == -1) {
        pamaet.timeType = null;
      } else {
        pamaet.timeType = this.timeType;
      }
      if (this.checked == true) {
        pamaet.showStatus = 1;
        pamaet.timeType = null;
      } else {
        pamaet.showStatus = 0;
      }
      this.$api.http.trendAnalysisLevel2(pamaet).then((res) => {
        if (this.Confirmthecontrast == false) {
          let newlist = res.data.startList || [];
          var newline = [];
          var newline2 = [];
          newlist.map((item) => {
            newline.push(item.zxl);
            newline2.push(item.statDate.slice(5, 10));
          });
          this.SwitchCARDS(newline, newline2);
        } else {
          let newlist = res.data.startList || [];
          let newlist2 = res.data.endList || [];
          let hejilist = res.data.comparedList || [];
          var newline = []; //起始数据
          var newline2 = []; //对比数据
          var newline1 = []; //时间

          let arr = [];
          newlist.map((item) => {
            newline.push(item.zxl);
          });
          newlist2.map((item) => {
            newline1.push(item.zxl);
          });
          newlist.forEach((item, sdf) => {
            newlist2.forEach((child, zxc) => {
              if (sdf == zxc) {
                newline2.push(
                  item.statDate.substring(5, 10) +
                    "vs" +
                    child.statDate.substring(5, 10)
                );
                arr.push({
                  name:
                    item.statDate.substring(5, 10) +
                    "vs" +
                    child.statDate.substring(5, 10),
                  shiduan1: item.zxl,
                  shiduan2: child.zxl,
                });
              }
            });
          });
          hejilist.forEach((acd, xdx) => {
            arr.forEach((che, ind) => {
              if (xdx == ind) {
                che.heji = acd.zxl;
              }
            });
          });
          arr.unshift({
            name: "项目合计",
            shiduan1: res.data.startSum,
            shiduan2: res.data.endSum,
            heji: res.data.comparedSum,
          });

          this.SwitchCARDS2(newline, newline1, newline2);
          this.tableData = arr;
          console.log(this.tableData);
        }
      });
    },
    //切换一级
    Level1tap() {
      this.Level1.forEach((item, index) => {
        if (this.Level1id == item.marketingId) {
          this.Level2 = item.children || [];
          this.Level2id = item.children[0].marketingId || "";
        }
      });
      this.trendAnalysisLevel2();
    },
    //切换er级
    Level2tap() {
      this.trendAnalysisLevel2();
    },
    //一二级
    trendAnalysisAllLevel() {
      let pamaet = {
        showStatus: "",
        houseId: this.houseId,
        timeType: 0,
        firstStartDate: this.page.openTime,
        firstEndDate: this.page.closeTime,
        lastStartDate: this.selectTime,
        lastEndDate: this.selectTime1,
      };

      if (this.timeType == -1) {
        pamaet.timeType = null;
      } else {
        pamaet.timeType = this.timeType;
      }
      if (this.checked == true) {
        pamaet.showStatus = 1;
        pamaet.timeType = null;
      } else {
        pamaet.showStatus = 0;
      }
      this.$api.http.trendAnalysisAllLevel(pamaet).then((res) => {
        this.Level1 = res.data || [];
        if(res.data.length!=0){
          this.Level1id = res.data[0].marketingId || "";
          this.Level2 = res.data[0].children || [];
          this.Level2id = res.data[0].children[0].marketingId || "";
        }else{
          this.Level1id =  "";
          this.Level2 = [];
          this.Level2id = "";
        }

        this.trendAnalysisLevel2();
      });
    },

    //切换顾问
    consultanttap() {
      this.trendAnalysisAccount();
    },
    // 获取顾问
    trendAnalysisAllAccount(pamaet) {
      this.$api.http.trendAnalysisAllAccount(pamaet).then((res) => {
        this.consultantlist = res.data || [];
        this.tablelist1=[]
        this.tablelist2 = [];
        this.tablelist3 = [];
        this.tablelist4 = [];
        if (this.consultantlist.length != 0) {
          this.consultantid = res.data[0].accountId;
          this.trendAnalysisAccount();
        } else {
          echarts.init(document.getElementById("main")).dispose();
          this.echartsisshow = false;
          this.tableData = [];
        }
      });
    },
    trendAnalysisAccount() {
      // console.log("snsnsnsnsnsnsnnswn")
      this.tablelist1=[]
      this.tablelist2 = [];
      this.tablelist3 = [];
      this.tablelist4 = [];
      // console.log('处理')
      var that = this;
      let pamaet = {
        showStatus: "",
        houseId: this.houseId,
        timeType: 0,
        firstStartDate: this.page.openTime,
        firstEndDate: this.page.closeTime,
        lastStartDate: this.selectTime,
        lastEndDate: this.selectTime1,
      };
      if (this.aliasclass == 3) {
        pamaet.accountId = this.consultantid;
      }
      if (this.timeType == -1) {
        pamaet.timeType = null;
      } else {
        pamaet.timeType = this.timeType;
      }
      if (this.checked == true) {
        pamaet.showStatus = 1;
        pamaet.timeType = null;
      } else {
        pamaet.showStatus = 0;
      }
      this.$api.http.trendAnalysisAccount(pamaet).then((res) => {
        if (this.Confirmthecontrast == false) {
          let newlist = res.data.firstList || [];
          var newline = []; //起始数据
          var newlinename = [];
          let tablist = [{ name: "时间" }];
          let tablist2 = [
            {
              name:
                that.customtime[0].substring(5, 10) +
                "/" +
                that.customtime[1].substring(5, 10),
            },
          ];
          newlist.map((item) => {
            newline.push(item.zxl);
            newlinename.push({ name: item.name, max: 100 });
            tablist.push({ name: item.name });
            tablist2.push({ name: item.zxl + "%" });
          });
          this.tablelist1 = tablist;
          this.tablelist2 = tablist2;
          this.tablelist3 = [];
          this.tablelist4 = [];
          this.piechart(newline, newlinename);
        } else {
          let newlist = res.data.firstList || [];
          let newlist2 = res.data.secondList || [];
          let newlist4 = res.data.thirdList || [];

          var newline = []; //起始数据
          let newline2 = []; //对比数据
          var newlinename = [];

          let tablist1 = [{ name: "时间" }];
          let tablist2 = [
            {
              name:
                that.customtime[0].substring(5, 10) +
                "/" +
                that.customtime[1].substring(5, 10),
            },
          ];
          let tablist3 = [
            {
              name:
                that.selectTime.substring(5, 10) +
                "/" +
                that.selectTime1.substring(5, 10),
            },
          ];
          let tablist4 = [{ name: "变化" }];

          newlist.map((item) => {
            newline.push(item.zxl);
            newlinename.push({ name: item.name, max: 100 });
            tablist1.push({ name: item.name });
            tablist2.push({ name: item.zxl + "%" });
          });
          newlist2.map((item) => {
            newline2.push(item.zxl);
            tablist3.push({ name: item.zxl + "%" });
          });
          newlist4.map((item) => {
            tablist4.push({ name: item.zxl });
          });

          this.tablelist1 = tablist1;
          this.tablelist2 = tablist2;
          this.tablelist3 = tablist3;
          this.tablelist4 = tablist4;
          this.piechart2(newline, newlinename, newline2);
        }
      });
    },
    //获取卡片
    trendtrendAnalysis() {
      let pamaet = {
        showStatus: "",
        houseId: this.houseId,
        timeType: 0,
        firstStartDate: this.page.openTime,
        firstEndDate: this.page.closeTime,
        lastStartDate: this.selectTime,
        lastEndDate: this.selectTime1,
      };

      if (this.timeType == -1) {
        pamaet.timeType = -1;
      } else {
        pamaet.timeType = this.timeType;
      }
      if (this.checked == true) {
        pamaet.showStatus = 1;
        pamaet.timeType = -1;
      } else {
        pamaet.showStatus = 0;
      }
      this.$api.http.trendtrendAnalysis(pamaet).then((res) => {
        this.cardobj = res.data;
        if (this.aliasclass == 1) {
          this.echartsisshow = true;
          this.trendtrendAnalysisProject(pamaet);
        } else if (this.aliasclass == 2) {
          if (this.departmentid != "") {
            pamaet.deptId = this.departmentid;
            this.trendtrendAnalysisProject(pamaet);
          } else {
            echarts.init(document.getElementById("main")).dispose();
            this.echartsisshow = false;
            this.tableData = [];
          }
        } else if (this.aliasclass == 3) {
          if (this.consultantid.length == 0) {
            this.trendAnalysisAllAccount(pamaet);
          } else {
            this.trendAnalysisAccount();
          }
        } else if (this.aliasclass == 4) {
          this.trendAnalysisAccount();
        } else {
          this.trendAnalysisAllLevel();
        }
      });
    },
    //项目
    trendtrendAnalysisProject(pamaet) {
      this.$api.http.trendtrendAnalysisProject(pamaet).then((res) => {
        if (this.Confirmthecontrast == false) {
          let newlist = res.data.startList || [];
          var newline = [];
          var newline2 = [];
          newlist.map((item) => {
            newline.push(item.fraction);
            newline2.push(item.statDate.slice(5, 10));
          });
          this.SwitchCARDS(newline, newline2);
        } else {
          let newlist = res.data.startList || [];
          let newlist2 = res.data.endList || [];
          let hejilist = res.data.comparedList || [];
          var newline = []; //起始数据
          var newline2 = []; //对比数据
          var newline1 = []; //时间

          let arr = [];
          newlist.map((item) => {
            newline.push(item.fraction);
          });
          newlist2.map((item) => {
            newline1.push(item.fraction);
          });
          newlist.forEach((item, sdf) => {
            newlist2.forEach((child, zxc) => {
              if (sdf == zxc) {
                newline2.push(
                  item.statDate.substring(5, 10) +
                    "vs" +
                    child.statDate.substring(5, 10)
                );
                arr.push({
                  name:
                    item.statDate.substring(5, 10) +
                    "vs" +
                    child.statDate.substring(5, 10),
                  shiduan1: item.fraction,
                  shiduan2: child.fraction,
                });
              }
            });
          });
          hejilist.forEach((acd, xdx) => {
            arr.forEach((che, ind) => {
              if (xdx == ind) {
                che.heji = acd.fraction;
              }
            });
          });
          arr.unshift({
            name: "项目合计",
            shiduan1: res.data.startSum,
            shiduan2: res.data.endSum,
            heji: res.data.comparedSum,
          });

          this.SwitchCARDS2(newline, newline1, newline2);
          this.tableData = arr;
          console.log(this.tableData);
        }
      });
    },
    //获取部门下拉菜单
    overviewfindList() {
      this.$api.http
        .overviewfindList({
          houseId: this.houseId,
        })
        .then((res) => {
          this.departmentlist = res.data || [];
          if (this.departmentlist.length != 0) {
            this.departmentid = res.data[0].deptId;
          } else {
            this.departmentid = "";
          }
        });
    },
    //切换部门
    departmenttap() {
      this.trendtrendAnalysis();
    },

    //选项卡切换
    tapChange(idx) {
      this.aliasclass = idx;
      this.mainFlag=true
      this.trendtrendAnalysis();
    },
    //时间tab切换
    tabtimetap(i) {
      this.timeType = i;
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      //给时间选择器赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (this.timeType == 4) {
        num = 24 * 3600 * 1000 * 7;
      }
      if (this.timeType == 5) {
        num = 24 * 3600 * 1000 * 15;
      }
      if (this.timeType == 6) {
        num = 24 * 3600 * 1000 * 30;
      }
      this.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()-24 * 3600 * 1000),
      ];
      this.$set(this, "time", null);
      this.Confirmthecontrast = false;
      this.trendtrendAnalysis();
    },
    // 对比时间选择弹框显示
    show() {
      this.$refs.time.pickerVisible = true;
    },
    //选择对比时间
    timeChange(e) {
      //	对数据进行处理
      //	当当前选择的为自定义时间时
      this.selectTime = "";
      this.selectTime1 = "";
      this.timeSelect(e);
      console.log(e, "asdasdajdasjdgasdghasdgsajdggh");
    },
    timeSelect(e) {
      if (this.timeType == -1) {
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(
          new Date(e).getTime() +
            new Date(this.page.closeTime).getTime() -
            new Date(this.page.openTime).getTime()
        );
      } else {
        //	获取今天昨天近一周
        //	获取一天的时间戳
        let num = 24 * 3600 * 1000;
        //	获取当前时间戳转换为日期格式
        if (this.timeType == 4) {
          num = 24 * 3600 * 1000 * 6;
        }
        if (this.timeType == 5) {
          num = 24 * 3600 * 1000 * 14;
        }
        if (this.timeType == 6) {
          num = 24 * 3600 * 1000 * 29;
        }
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
      this.Confirmthecontrast = true;
      this.page.openTime = this.customtime[0];
      this.page.closeTime = this.customtime[1];
      this.trendtrendAnalysis();
    },
    radioChange() {
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!this.checked) {
        this.trendtrendAnalysis();
        this.Confirmthecontrast = false;
      }
    },
    //选择自定义时间
    confirmtime(e) {
      this.timeType = "-1";
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!e) return;
      this.page.openTime = this.customtime[0];
      this.page.closeTime = this.customtime[1];
      this.Confirmthecontrast = false;
      this.trendtrendAnalysis();
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var yyyy = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var dd = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      return yyyy + MM + dd;
    },

    SwitchCARDS(newline, newline2) {
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

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

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: newline2,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        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,
          },
        },
        series: [
          {
            name: "起始时间",
            data: newline,
            type: "line",
            smooth: true,
          },
        ],
      };

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

    },
    SwitchCARDS2(newline, newline1, newline2) {
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      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;
          },
        },
          color: [
              "#6F8EDC",
              "#EE6666",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#66AFF5",
              "#FABD2B",
              "#FFCF8F",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
        legend: {
          data: ["起始时间", "对比时间"],
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: newline2,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        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,
          },
        },
        series: [
          {
            name: "起始时间",
            data: newline,
            type: "line",
            smooth: true,
          },
          {
            name: "对比时间",
            data: newline1,
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    piechart2(newline, newlinename, newline2) {
      // console.log("aerqwrewqwq")
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      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: ["起始时间", "对比时间"],
          right: "10",
          top: "10",
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          // shape: 'circle',
          indicator: newlinename,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: [
              {
                value: newline,
                name: "起始时间",
              },
              {
                value: newline2,
                name: "对比时间",
              },
            ],
          },
        ],
      };
      try{
          option && myChart.setOption(option);
          window.addEventListener("resize", () => {
            myChart.resize();
          });
          this.mainFlag=true
      }
      catch(err){
        this.mainFlag=false
        console.log(err,'234');
        echarts.init(document.getElementById("main")).dispose();
      }

    },
    piechart(newline, newlinename) {
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      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: ["起始时间"],
          right: "10",
          top: "10",
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          // shape: 'circle',
          indicator: newlinename,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: [
              {
                value: newline,
                name: "起始时间",
              },
            ],
          },
        ],
      };
      // option && myChart.setOption(option);
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
            try{
          option && myChart.setOption(option);
          window.addEventListener("resize", () => {
            myChart.resize();
          });
          this.mainFlag=true
      }
      catch(err){
        this.mainFlag=false
        echarts.init(document.getElementById("main")).dispose();
        console.log(err,'123');
      }
    },
  },
};
</script>

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

.table {
  border-collapse: collapse;
  width: 100%;
}
.tbody {
  display: block;
  // width: 100%;
  // overflow-x: auto;
  // overflow-y: auto;
  height: 220px;
}
.tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  // word-break: break-all;
}

#main {
  width: 100%;
  height: 380px;
}

.app-box-san {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding-bottom: 15px;
  .santitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    text-indent: 15px;
  }
  .santab {
    width: 100%;
    height: 400px;
    padding: 15px;
  }
}
.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;
  .titletab {
    width: 100%;
    height: 42px;
    display: flex;
    // border: 1px solid red;
  }
  .titletab div {
    width: 130px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: 1px solid #e0e0e0;
    font-size: 14px;
  }
  .claindex {
    background: #2671e2;
    color: #ffffff;
    border: none;
  }
}

.kapian-box {
  width: 100%;
  height: 144px;
  margin-top: 15px;
  display: flex;
  .kayi {
    flex: 1;
    margin-right: 15px;
    height: 144px;
    background: #ffffff;
    border-radius: 4px;
    .shang {
      width: 100%;
      display: flex;
      .zuo {
        width: 50%;
        .text1 {
          font-size: 16px;
          font-weight: 400;
          color: #666666;
          margin-left: 30px;
          margin-top: 24px;
        }
        .text2 {
          font-size: 32px;
          font-weight: normal;
          color: #32363d;
          margin-left: 30px;
          margin-top: 18px;
        }
      }
      .you {
        width: 50%;
        display: flex;
        align-items: center;
        .youimg {
          width: 90%;
          height: 60px;
        }
      }
    }
    .xia {
      width: 100%;
      font-size: 14px;
      text-indent: 30px;
      margin-top: 10px;
      .span1 {
        color: #333333;
        font-weight: 400;
      }
      .span2 {
        color: #e6273a;
        font-weight: 400;
        margin-left: 16px;
      }
    }
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.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;
  }
}
.timeSel {
  margin-top: 8px;
  margin-left: 20px;
  border: 1px solid #ccc;
  padding: 0 5px;
  cursor: pointer;
  color: #606266;
}
.theadtd {
  width: 140px;
  height: 48px;
  border: 1px solid #e0e0e0;
  text-align: center;
  line-height: 48px;
  font-size: 16px;
  color: #32363d;
}
.noData{
      width: 100%;
    // height: 60vh;
    height: 500px;
    background: #fff;
    text-align: center;
    margin-top: 20px;
    overflow: hidden;
}
.imgboxc{
  margin-top: 100px;
  color: #999999;
}
</style>
