<template>
  <div id="mapDiv">
    <Map @mapView="getMap"></Map>
    <div id="control">
      <div class="map-control">
        <div class="map-type-button" v-if="!isHot" @click="changeHotMap">
          <img class="map-img" src="../../../static/img/hot.png" />
        </div>
        <div class="map-type-button" v-else @click="changeHotMap">
          <img class="map-img" src="../../../static/img/vec.png" />
        </div>
      </div>
    </div>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
    >
      <div v-show="collapsed" id="leftPanel">
        <div>
          <!--展开折叠开关-->
          <div @click.prevent="collapse" id="toLeft">
            <i
              v-if="collapsed"
              class="el-icon-arrow-left"
              title="收起"
              style="margin-top: 13px; color: #264672"
            ></i>
            <i
              v-else
              class="el-icon-arrow-right"
              title="展开"
              style="margin-top: 13px; color: #264672"
            ></i>
          </div>
        </div>
        <div id="leftPanelScroll">
            <el-tabs v-model="activeName">
              <el-tab-pane label="任务进度" name="first">
                <el-select
                  v-model="task"
                  size="small"
                  style="width: 45%; margin-bottom: 15px"
                  placeholder="请选择任务"
                  @change="changeTask()"
                >
                  <el-option
                    v-for="item in taskoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select
                  id="sTable"
                  v-model="table"
                  size="small"
                  style="width: 45%; margin-bottom: 15px"
                  placeholder="请选择表"
                  @focus="getTables()"
                  @change="changeTable1()"
                >
                  <el-option
                    v-for="item in tableoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-date-picker
                  size="small"
                  style="width: 91% !important; margin-bottom: 15px"
                  v-model="date"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
                <div style="width: 70%; margin-left: auto; margin-right: auto">
                  <el-radio v-model="radio" label="day" style="width: 20%"
                    >日</el-radio
                  >
                  <el-radio v-model="radio" label="month" style="width: 20%"
                    >月</el-radio
                  >
                  <el-button
                    size="small"
                    icon="el-icon-search"
                    @click="getEChart()"
                    class="dateBtn"
                  ></el-button>
                </div>
                <el-radio-group
                  v-model="echartRadio"
                  size="mini"
                  v-show="isEchartShow"
                >
                  <el-radio-button :label="1">任务采集总量</el-radio-button>
                  <el-radio-button :label="2">任务采集进度</el-radio-button>
                </el-radio-group>
                <div style="display: flex; justify-content: center">
                  <div
                    id="myChart1"
                    style="margin-top: 20px; width: 350px; height: 600px"
                    v-show="echartRadio == '1'"
                  ></div>
                </div>
                <div style="display: flex; justify-content: center">
                  <div
                    id="myChart2"
                    style="width: 350px; height: 600px"
                    v-show="echartRadio == '2'"
                  ></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="任务报告" name="second">
                <p>
                  任务：
                  <el-select
                    v-model="ReportTask"
                    size="small"
                    style="width: 60%; margin-bottom: 15px"
                    placeholder="请选择任务"
                    @change="table = ''"
                  >
                    <el-option
                      v-for="item in reportoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </p>
                <el-button size="small" @click="getReport()" class="dateBtn"
                  >查看报告</el-button
                >
              </el-tab-pane>
              <el-tab-pane label="异常监管" name="third">
                <el-form
                  ref="warningform"
                  :model="warningform"
                  label-width="100px"
                >
                  <el-form-item label="任务:" style="margin-bottom: 10px">
                    <el-select
                      style="width: 90%; margin-left: -30px"
                      v-model="warningform.task"
                      size="small"
                      placeholder="请选择任务"
                      @change="getWarningTables"
                    >
                      <el-option
                        v-for="item in wTaskOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="表:" style="margin-bottom: 10px">
                    <el-select
                      style="width: 90%; margin-left: -30px"
                      v-model="warningform.table"
                      size="small"
                      placeholder="请选择表"
                    >
                      <el-option
                        v-for="item in WTableOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="异常上限比例:"
                    style="margin-bottom: 10px"
                  >
                    <el-tooltip
                      effect="light"
                      content="异常上限值为小数，如1.5，代表对于采集平均量的比例。根据异常上限值统计采集量高于采集平均量乘以异常上限值的异常情况。"
                      placement="right"
                    >
                      <!-- <el-input
                        style="width: 90%; margin-left: -30px"
                        type="number"
                        v-model="warningform.maxratio"
                        placeholder="默认1.33"
                        clearable
                      ></el-input> -->
                      <el-input-number
                        style="width: 90%; margin-left: -30px"
                        v-model="warningform.maxratio"
                        :precision="2"
                        :step="0.1"
                        :max="10"
                        :min="0"
                        placeholder="默认1.33"
                      >
                      </el-input-number>
                    </el-tooltip>
                  </el-form-item>
                  <el-form-item
                    label="异常下限比例:"
                    style="margin-bottom: 10px"
                  >
                    <el-tooltip
                      effect="light"
                      content="异常下限值为小数，如0.5，代表对于采集平均量的比例。根据异常下限值统计采集量低于采集平均量乘以异常下限值的异常情况。"
                      placement="right"
                    >
                      <el-input-number
                        style="width: 90%; margin-left: -30px"
                        v-model="warningform.minratio"
                        :precision="2"
                        :step="0.1"
                        :max="10"
                        :min="0"
                        placeholder="默认0.67"
                      >
                      </el-input-number>
                      <!-- <el-input
                        style="width: 90%; margin-left: -30px"
                        type="number"
                        v-model="warningform.minratio"
                        placeholder="默认0.67"
                        clearable
                      ></el-input> -->
                    </el-tooltip>
                  </el-form-item>
                </el-form>
                <el-button size="small" @click="getWarning()" class="dateBtn"
                  >查看详情</el-button
                >
                <!-- <div style="text-align: left">
                  注：异常上限值和异常下限值均输入带小数的数字，如（1.5和0.5），代表对于采集平均量的比例。根据上限值统计采集量超出平均量*上限比例的异常情况，根据下限值统计低于平均量*下限比例的异常情况。
                </div> -->
                <div v-show="IsWarningShow">
                  <div style="text-align: left">
                    <p
                      style="
                        font-size: 15px !important;
                        font-weight: bold;
                        text-indent: 2em;
                      "
                    >
                      该任务的平均采集为{{ averageNum }}，异常上限采集量为{{
                        highLimitNum
                      }}，异常下限采集量为{{ lowLimitNum }}。共有{{
                        warningWorkerNum
                      }}人工作完成情况异常，详情如下：
                    </p>
                  </div>
                  <el-table
                    :data="warningData"
                    border
                    row-key="id"
                    :tree-props="{ children: 'children' }"
                    height="650px"
                    style="width: 98%; margin-top: 5px"
                  >
                    <el-table-column
                      prop="username"
                      label="姓名"
                      min-width="100"
                    ></el-table-column>
                    <el-table-column
                      prop="date"
                      label="日期"
                      min-width="120"
                    ></el-table-column>
                    <el-table-column
                      prop="count"
                      label="采集量"
                      min-width="60"
                    ></el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="人员统计" name="fourth">
                <span>任务:</span>
                <el-select
                  style="width: 80%; margin-bottom: 20px"
                  v-model="workersTask"
                  size="small"
                  placeholder="请选择任务"
                >
                  <el-option
                    v-for="item in wTaskOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button size="small" @click="getWorkers()" class="dateBtn"
                  >查看详情</el-button
                >
              </el-tab-pane>
            </el-tabs>
        </div>
      </div>
    </transition>
    <el-card class="ReportCard" v-show="this.IsCardShow">
      <div slot="header" class="clearfix">
        <span>任务报告</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="IsCardShow = false"
          >关闭</el-button
        >
      </div>
      <el-tabs v-model="activeName1" style="height: 100%">
        <el-tab-pane
          label="任务信息统计报告"
          name="first"
          style="height: 100%; overflow: scroll"
        >
          <div class="reportPage" v-show="this.taskMessage == true">
            <div v-for="i in tableStatNum" :key="i">
              <p style="font-size: 17px !important; font-weight: bold">
                {{ i }} {{ tableName[i - 1] }}
              </p>
              <p
                style="
                  font-size: 16px !important;
                  font-weight: bold;
                  margin-left: 10px;
                "
              >
                {{ i }}.1 每日采集量
              </p>
              <div
                style="height: 300px; width: 600px; margin: 0 auto"
                :id="'dailyDataEchart' + (i - 1)"
              ></div>
              <p style="font-size: 15px !important; margin-left: 20px">
                其中，采集总量为{{ tableCount[i - 1] }}，平均每天的采集量为{{
                  tableDailyAvg[i - 1]
                }}，{{ tableMaxDaily[i - 1] }}采集量最多，为{{
                  tableMaxDailyNum[i - 1]
                }}；{{ tableMinDaily[i - 1] }}采集量最少，为{{
                  tableMinDailyNum[i - 1]
                }}。
              </p>
              <p
                style="
                  font-size: 16px !important;
                  font-weight: bold;
                  margin-left: 10px;
                "
              >
                {{ i }}.2 每日采集进度
              </p>
              <div
                style="height: 300px; width: 600px; margin: 0 auto"
                :id="'dailyRatioEchart' + (i - 1)"
              ></div>
              <p
                style="
                  font-size: 16px !important;
                  font-weight: bold;
                  margin-left: 10px;
                "
              >
                {{ i }}.3 每月采集量
              </p>
              <div
                style="height: 300px; width: 600px; margin: 0 auto"
                :id="'monthlyDataEchart' + (i - 1)"
              ></div>
              <p style="font-size: 15px !important; margin-left: 20px">
                其中，平均每月的采集量为{{ tableMonthlyAvg[i - 1] }}，{{
                  tableMaxMonthly[i - 1]
                }}采集量最多，为{{ tableMaxMonthlyNum[i - 1] }}；{{
                  tableMinMonthly[i - 1]
                }}采集量最少，为{{ tableMinMonthlyNum[i - 1] }}。
              </p>
              <p
                style="
                  font-size: 16px !important;
                  font-weight: bold;
                  margin-left: 10px;
                "
              >
                {{ i }}.4 每月采集进度
              </p>
              <div
                style="height: 300px; width: 600px; margin: 0 auto"
                :id="'monthlyRatioEchart' + (i - 1)"
              ></div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="人员信息统计报告"
          name="second"
          style="height: 100%; overflow: scroll"
        >
          <div class="reportPage" v-show="this.workerMessage == true">
            <p style="font-size: 17px !important; font-weight: bold">
              一、工作人员列表
            </p>
            <el-table :data="workerInfo" style="width: 100%">
              <el-table-column
                prop="name"
                label="工作人员"
                min-width="180"
              ></el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                min-width="180"
              ></el-table-column>
              <el-table-column prop="email" label="邮箱"></el-table-column>
            </el-table>
            <!--对于表统计-->
            <p style="font-size: 17px !important; font-weight: bold">
              二、下面分别对子任务下工作人员完成任务的情况进行统计
            </p>
            <div v-for="(j, m) in tableNum" :key="m">
              <p
                style="
                  font-size: 16px !important;
                  font-weight: bold;
                  margin-left: 10px;
                "
              >
                2.{{ j }} {{ TableList[j - 1] }}
              </p>
              <p style="font-size: 15px !important; margin-left: 10px">
                2.{{ j }}.1 每人完成工作任务总量统计图
              </p>
              <div
                style="height: 300px; width: 600px; margin: 0 auto"
                :id="'workLoad' + (j - 1)"
              ></div>
              <p style="font-size: 15px !important; margin-left: 10px">
                2.{{ j }}.2 每人每天完成工作任务平均量统计图
              </p>
              <div
                style="height: 300px; width: 600px; margin: 0 auto"
                :id="'avgWorkLoad' + (j - 1)"
              ></div>
            </div>
            <div>
              <p style="font-size: 17px !important; font-weight: bold">
                三、下面分别对每人每天完成的工作任务量进行统计
              </p>
              <div v-for="(k, m) in workerNum" :key="m">
                <p
                  style="
                    font-size: 16px !important;
                    font-weight: bold;
                    margin-left: 10px;
                  "
                >
                  3.{{ k }} {{ WorkerList[k - 1] }}
                </p>
                <div v-for="(j, m) in tableNum" :key="m">
                  <p style="font-size: 15px !important; margin-left: 20px">
                    3.{{ k }}.{{ j }} {{ TableList[j - 1] }}
                  </p>
                  <div
                    style="height: 300px; width: 600px; margin: 0 auto"
                    :id="
                      'workLoadDaily' + (j - 1).toString() + (k - 1).toString()
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="人员统计情况" :visible.sync="IsWorkersShow">
      <el-table
        :data="workersData"
        border
        height="450px"
        style="width: 98%; margin-top: 5px"
        show-summary
      >
        <el-table-column
          prop="realName"
          label="用户"
          min-width="60"
        ></el-table-column>
        <el-table-column
          prop="reviewerTotalWorkload"
          label="分配任务量"
          min-width="50"
        ></el-table-column>
        <el-table-column
          prop="collectedDataCount"
          label="采集数据量"
          min-width="50"
        ></el-table-column>
        <el-table-column
          prop="invalidDataCount"
          label="未通过审核的数据量"
          min-width="90"
        ></el-table-column>
        <el-table-column
          prop="toBeReviewedDataCount"
          label="待审核的数据量"
          min-width="70"
        ></el-table-column>
        <el-table-column
          prop="validDataCount"
          label="通过审核的数据量"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="newDataCount"
          label="新增数据量"
          min-width="60"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      class="infoDialog2"
      title="数据信息"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
    >
      <p>
        请选择查看数据：
        <el-select
          v-model="currentFeatureId"
          style="width: 55%"
          placeholder="请选择数据id"
        >
          <el-option
            v-for="item in FeaturesId"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </p>
      <featureInfo :data="Info" style="margin: 0 auto" />
    </el-dialog>
  </div>
</template>

<script>
import Map from "../Mapview/Map";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import { ajax as request } from "@/request.js";
import featureInfo from "../DataManagement/featureInfo";
import Select from "ol/interaction/Select";
import "ol/ol.css";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import HeatmapLayer from "ol/layer/heatmap";
import { Cluster } from "ol/source";
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style";
let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/dataZoom");
require("echarts/lib/component/legend");

export default {
  name: "ViewTask",
  data() {
    return {
      workerMessage: false,
      taskMessage: false,
      isHot: false,
      heatmapLayer: null,
      IsWarningShow: false,
      sameCount: [],
      WarningTask: "",
      warningData: [],
      warningWorkerNum: 0,

      activeName1: "first",

      ///人员统计
      workerNum: [],
      tableNum: [],

      workerInfo: [],

      //放表名 一个表 一个每人统计数据 统计 每人的工作总量 每人的平均工作量
      TableList: [],
      //工作人员
      WorkerList: [],
      //工作总总量 数组 数组 按照table顺序排列[按照人员排列]
      workLoadList: [],
      //平均工作量 上同
      avgWorkLoadList: [],

      //选择人 选择表 数组 数组 按照table顺序排列 按照人员排列 天及其对应的工作量
      workLoadDaily: [],
      myWorkLoadEchart: [],
      myAvgWorkLoadEchart: [],
      myWorkLoadDailyEchart: [],

      myTableDailyDataEchart: [],
      myTableDailyRatioEchart: [],
      myTableMonthlyRatioEchart: [],
      myTableMonthlyDataEchart: [],
      //表数
      tableStatNum: [],
      //表名字、采集总量
      tableName: [],
      tableCount: [],
      tableDailyAvg: [],
      tableMonthlyAvg: [],

      //对象数组数组 包含所有表的按天统计数据
      dailyTableData: [],
      //对象数组数组 包含所有表的按月统计数据
      monthlyTableData: [],

      //对象数组数组 包含所有表的按天统计比率
      dailyTableRatio: [],
      //对象数组数组 包含所有表的按月统计比率
      monthlyTableRatio: [],

      //最大采集量日
      tableMaxDaily: [],
      tableMaxDailyNum: [],
      //最大采集量月
      tableMaxMonthly: [],
      tableMaxMonthlyNum: [],
      //最小采集量日
      tableMinDaily: [],
      tableMinDailyNum: [],
      //最小采集量月
      tableMinMonthly: [],
      tableMinMonthlyNum: [],
      ReportTask: "",
      reportoptions: [],

      IsCardShow: false,

      collapsed: true,
      drawer: false,
      activeName: "first",
      total: "",
      myChart1: null,
      myChart2: null,
      data: [],
      ratio: [],
      task: "",
      table: "",
      date: "",
      radio: "day",
      value: "",
      taskoptions: [],
      tableoptions: [],
      myChart: null,
      min: [],
      max: [],
      avg: [],
      count: [],
      sum: [],
      distribute: false,
      minSize: "",
      maxSize: "",
      clusters: null,
      isClusters: false,
      vectorLayer: null,
      isVectorLayer: false,
      cellLayer: null,
      dialogVisible: false,
      selectclick: null,
      Info: {},
      currentFeatureId: "",
      FeaturesId: [],
      vectorSource: null,
      feature: null,
      warningform: { task: "", table: "", maxratio: "1.33", minratio: "0.67" },
      wTaskOptions: [],
      WTableOptions: [],
      averageNum: "",
      lowLimitNum: "",
      highLimitNum: "",
      echartRadio: "1",
      isEchartShow: false,
      workersTask: "",
      IsWorkersShow: false,
      workersData: [],
    };
  },
  components: {
    Map,
    featureInfo,
  },
  created() {
    this.initList();
  },
  watch: {
    dialogVisible: {
      handler() {
        if (this.dialogVisible == false) {
          this.getClusters();
          this.clearAll();
        }
      },
    },
    currentFeatureId: {
      handler() {
        if (this.vectorLayer && this.currentFeatureId !== "") {
          this.setCurrentStyle();
        }
      },
    },
    activeName: {
      handler() {
        this.IsWarningShow = false;
        this.IsWorkersShow = false;
      },
    },
  },
  methods: {
    getMap(val) {
      this.map = val;
      let that = this;
      this.map.on("moveend", function (e) {
        //移除所有
        if (that.clusters) {
          if (that.isClusters) {
            that.map.removeLayer(that.clusters);
            that.isClusters = false;
          }
          that.clusters = null;
        }
        if (that.vectorLayer) {
          if (that.isVectorLayer) {
            that.map.removeLayer(that.vectorLayer);
            that.map.removeInteraction(that.selectclick);
            that.isVectorLayer = false;
          }
          that.vectorLayer = null;
          that.selectclick = null;
        }
        if (that.distribute && that.cellLayer) {
          that.debounce(that.getClusters(), 500);
        }
      });
    },
    debounce(fn, delay) {
      let timer = null; //借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer);
          timer = setTimeout(fn, delay);
        } else {
          timer = setTimeout(fn, delay);
        }
      };
    },
    // 初始化任务清单
    initList() {
      this.reportoptions = [];
      this.taskoptions = [];

      this.wTaskOptions = [];
      let that = this;
      // 从 store 获取数据
      const taskData = that.$store.state.taskData.selectTaskHasCreated || [];
      for (var i = 0; i < taskData.length; i++) {
            that.reportoptions.push({
          value: taskData[i].id,
          label: taskData[i].taskName,
            });
            that.taskoptions.push({
          value: taskData[i].id,
          label: taskData[i].taskName,
            });
            that.wTaskOptions.push({
          value: taskData[i].id,
          label: taskData[i].taskName,
            });
          }
    },
    getWarningTables() {
      if (this.warningform.task != "") {
        this.WTableOptions = [];
        var taskname = "";
        for (var i = 0; i < this.wTaskOptions.length; i++) {
          if (this.warningform.task == this.wTaskOptions[i].value) {
            taskname = this.wTaskOptions[i].label;
            break;
          }
        }
        this.tableoptions = [];
        let that = this;
        request({
          url: "/statistic/getTables",
          method: "post",
          params: {
            tskName: taskname,
          },
        }).then(function (response) {
          // 获取数据存入config
          if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          } else if (response.status === 200) {
            var json = response.data;
            that.warningform.table = "mmoo";
            that.WTableOptions.push({
              value: "mmoo",
              label: "默认",
            });
            for (var key in json) {
              that.WTableOptions.push({
                value: key,
                label: json[key],
              });
            }
          }
        });
      }
    },
    // 左侧面板收缩动画
    collapse() {
      this.collapsed = !this.collapsed;
    },
    beforeEnter: function (el) {
      el.style.transform = "translate(410px,0px)";
    },
    enter: function (el, done) {
      el.style.transform = "translate(0px,0px)";
      el.style.transition = "all 0.6s ease";
      done();
    },
    beforeLeave: function (el) {
      el.style.transform = "translate(0px,0px)";
    },
    leave: function (el, done) {
      el.style.transform = "translate(-425px,0px)";
      el.style.transition = "all 0.6s ease";
      // done();
    },
    handleClose(done) {
      done();
    },
    changeTask() {
      this.table = "";
      if (this.myChart1) {
        this.myChart1.clear();
        this.myChart2.clear();
        this.isEchartShow = false;
      }
      //清空
      //清空
      if (this.clusters) {
        if (this.isClusters) {
          this.map.removeLayer(this.clusters);
          this.isClusters = false;
        }
        this.clusters = null;
      }
      if (this.vectorLayer) {
        if (this.isVectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);
          this.isVectorLayer = false;
        }
        this.vectorLayer = null;
        this.selectclick = null;
      }
      this.cellLayer = null;
      this.distribute = false;
      if (this.isHot) {
        this.isHot = false;
        this.removeHeatmapLayer();
        this.heatmapLayer = null;
      } else {
        this.heatmapLayer = null;
      }
    },
    changeTable1() {
      //清空
      if (this.myChart1) {
        this.myChart1.clear();
        this.myChart2.clear();
        this.isEchartShow = false;
      }
      //清空
      //清空
      if (this.clusters) {
        if (this.isClusters) {
          this.map.removeLayer(this.clusters);
          this.isClusters = false;
        }
        this.clusters = null;
      }
      if (this.vectorLayer) {
        if (this.isVectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);
          this.isVectorLayer = false;
        }
        this.vectorLayer = null;
        this.selectclick = null;
      }
      this.cellLayer = null;

      this.distribute = true;
      this.getRange(0);
      this.initHeatmapLayer();
      this.isHot = false;
    },
    getRange(addToMap) {
      let that = this;
      request({
        url: "/allocation/info/cell/all",
        method: "post",
        params: {
          taskId: that.task,
        },
      }).then(function (response) {
        // 获取数据存入config
        if (response.data.status === 200) {
          var result = response.data.data;
          if (result.features.length != 0) {
            that.drawCellLayer(result);
            that.map.getView().fit(that.cellLayer.getSource().getExtent());
            that.getClusters();
          } else {
            that.$message.info("获取任务范围失败，未上传数据！");
          }
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    getClusters() {
      var zoom = 0;
      zoom = this.map.getView().getZoom();
      //获取地图范围
      var coordinates = this.map.getView().calculateExtent(this.map.getSize());
      var geoHashLength = "";
      switch (zoom) {
        case 8:
        case 9:
          geoHashLength = 4;
          break;
        case 10:
        case 11:
        case 12:
          geoHashLength = 5;
          break;
        case 13:
        case 14:
        case 15:
        case 16:
          geoHashLength = 6;
          break;
        case 17:
        case 18:
        case 19:
        case 20:
          geoHashLength = 7;
          break;
        default:
          geoHashLength = 3;
      }
      if (this.distribute) {
        if (zoom < 15) {
          //请求聚类图层
          let that = this;
          that.minSize = 0;
          that.maxSize = 0;
          request({
            url: "/base/getCountByGeoHash",
            method: "post",
            params: {
              taskId: that.task,
              tableName: that.table,
              accuracy: geoHashLength,
              longitudeMin: coordinates[0],
              latitudeMin: coordinates[1],
              longitudeMax: coordinates[2],
              latitudeMax: coordinates[3],
            },
          }).then(function (response) {
            if (response.data.success) {
              if (response.data.data) {
                var result = response.data.data;
                var geojson = [];
                for (var i = 0; i < result.length; i++) {
                  var count = result[i].count;
                  if (i == 0) {
                    that.minSize = count;
                    that.maxSize = count;
                  } else {
                    if (count < that.minSize) {
                      that.minSize = count;
                    }
                    if (count > that.maxSize) {
                      that.maxSize = count;
                    }
                  }
                  //存入count
                  var geojson1 = result[i].feature;
                  geojson1.properties = {};
                  geojson1.properties.count = count;
                  geojson.push(result[i].feature);
                }
                var geojsonObject = {
                  type: "FeatureCollection",
                  features: geojson,
                  crs: { type: "EPSG", properties: { code: "4326" } },
                };
                that.drawClusterLayer(geojsonObject);
              } else {
                that.$message.info("获取范围内数据为空！");
              }
            } else if (response.data.status == "401") {
              that.$alert(response.data.message);
              that.$router.push({ path: "/login" });
            }
          });
        } else {
          let that = this;
          request({
            url: "/get/getDataByRangeIntersection",
            method: "post",
            params: {
              taskId: that.task,
              tableName: that.table,
              longitudeMin: coordinates[0],
              latitudeMin: coordinates[1],
              longitudeMax: coordinates[2],
              latitudeMax: coordinates[3],
            },
          }).then(function (response) {
            if (response.data.success) {
              if (response.data.data) {
                var geojson = response.data.data;
                var geojsonObject = {
                  type: "FeatureCollection",
                  features: geojson,
                  crs: { type: "EPSG", properties: { code: "4326" } },
                };
                that.drawVectorLayer(geojsonObject);
              } else {
                that.$message.info("获取范围内数据为空！");
              }
            } else if (response.data.status == "401") {
              that.$alert(response.data.message);
              that.$router.push({ path: "/login" });
            }
          });
        }
      }
    },
    drawCellLayer(geojsonObject) {
      //
      if (this.cellLayer) {
        this.map.removeLayer(this.cellLayer);
      }
      var vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      this.cellLayer = new VectorLayer({
        source: vectorSource,
      });
      this.cellLayer.setZIndex(5);
    },
    drawClusterLayer(geojsonObject) {
      if (this.clusters) {
        if (this.isClusters) {
          this.map.removeLayer(this.clusters);
          this.isClusters = false;
        }
        this.clusters = null;
      }
      if (this.vectorLayer) {
        if (this.isVectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);
        }
        this.vectorLayer = null;
        this.selectclick = null;
      }
      var vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });

      this.clusters = new VectorLayer({
        source: vectorSource,
        style: function (feature) {
          let count = feature.get("count").toString();
          let style = new Style({
            stroke: new Stroke({
              lineDash: [1, 2, 3, 4, 5, 6],
              color: "rgba(70,130,180, 0.9)",
              width: 2,
            }),
            fill: new Fill({
              color: [255, 153, 0, 0.8],
            }),
            text: new Text({
              text: feature.get("count").toString(),
              font: "16px Microsoft YaHei",
              fill: new Fill({
                color: "#fff",
              }),
              stroke: new Stroke({
                color: "rgba(0, 0, 0, 0.6)",
                width: 3,
              }),
            }),
          });
          return [style];
        },
      });
      this.clusters.setZIndex(4);
      this.map.addLayer(this.clusters);
      this.isClusters = true;
    },
    drawVectorLayer(geojsonObject) {
      if (this.clusters) {
        if (this.isClusters) {
          this.map.removeLayer(this.clusters);
          this.isClusters = false;
        }
        this.clusters = null;
      }
      if (this.vectorLayer) {
        if (this.isVectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);
          this.isVectorLayer = false;
        }
        this.vectorLayer = null;
        this.selectclick = null;
      }
      this.vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      var styles = {
        Point: new Style({
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "rgba(173,216,230)",
            }),
            stroke: new Stroke({
              lineDash: [1, 2, 3, 4, 5, 6],
              color: "rgba(70,130,180)",
              width: 2,
            }),
          }),
          stroke: new Stroke({
            lineDash: [1, 2, 3, 4, 5, 6],
            color: "rgba(70,130,180)",
            width: 2,
          }),
          fill: new Fill({
            color: "rgba(173,216,230)",
          }),
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: "green",
            width: 3,
          }),
        }),
        Polygon: new Style({
          stroke: new Stroke({
            color: "blue",
            lineDash: [4],
            width: 3,
          }),
          fill: new Fill({
            color: "rgba(0, 0, 255, 0.1)",
          }),
        }),
      };
      var styleFunction = function (feature) {
        return styles[feature.getGeometry().getType()];
      };
      var allfearures = this.vectorSource.getFeatures();
      for (var i = 0; i < allfearures.length; i++) {
        allfearures[i].setId(allfearures[i].get("id"));
      }
      this.vectorLayer = new VectorLayer({
        id: "vectorlayer",
        source: this.vectorSource,
        style: styleFunction,
      });
      this.vectorLayer.setZIndex(4);
      this.map.addLayer(this.vectorLayer);
      this.isVectorLayer = true;
      let this1 = this;
      this.selectclick = new Select({
        layers: [this.vectorLayer],
        style: new Style({
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "yellow",
            }),
            stroke: new Stroke({
              color: "#37eed0",
              width: 3,
            }),
          }),
          fill: new Fill({
            color: "yellow",
          }),
          stroke: new Stroke({
            color: "#37eed0",
            width: 3,
          }),
        }),
      });
      this.selectclick.on("select", function (e) {
        this1.FeaturesId = [];
        var features = e.selected;
        if (features.length > 0) {
          this1.dialogVisible = true;
          let that = this1;
          var feature = features[0];
          var type = feature.getGeometry().getType();
          var tmp = 1;
          if (type == "LineString" || type == "Point") {
            that.FeaturesId.push({
              value: feature.get("id"),
              label: feature.get("id"),
            });
            that.currentFeatureId = feature.get("id");
            tmp = 0;
          }
          this.getFeatures().clear();
          var coordinate = e.mapBrowserEvent.coordinate;
          var Features = that.vectorSource.getFeaturesAtCoordinate(coordinate);
          for (var i = 0; i < Features.length; i++) {
            that.FeaturesId.push({
              value: Features[i].get("id"),
              label: Features[i].get("id"),
            });
            if (i == 0 && tmp == 1) {
              that.currentFeatureId = Features[i].get("id");
            }
          }
        }
      });
      this.map.addInteraction(this.selectclick);
    },
    initEchart() {
      if (this.myChart1) {
        this.myChart1.clear();
        this.myChart2.clear();
        this.isEchartShow = false;
      }
      var selectDate = [];
      var selectCount = [];
      var selectRatio = [];
      if (this.data) {
        if (this.data.length) {
          for (var i = 0; i < this.data.length; i++) {
            selectDate.push(this.data[i].date);
            selectCount.push(this.data[i].count);
          }
        } else {
          this.$alert("无任务采集进度信息！", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }

        if (this.ratio.length) {
          for (var j = 0; j < this.ratio.length; j++) {
            selectRatio.push(this.ratio[j].ratio);
          }
        } else {
          this.$alert("无任务采集进度信息！", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
      } else {
        this.$alert("无任务采集进度信息！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      this.myChart1 = echarts.init(document.getElementById("myChart1"));
      this.myChart2 = echarts.init(document.getElementById("myChart2"));
      this.isEchartShow = true;

      // 绘制图表
      var myColor = [
        "#eb2100",
        "#eb3600",
        "#d0570e",
        "#d0a00e",
        "#34da62",
        "#00e9db",
        "#00c0e9",
        "#0096f3",
        "#33CCFF",
        "#33FFCC",
      ];
      var gridWidth = 350; //可以根据canvas的宽度和grid的right,left,width进行计算
      var fontsize = 14; //字体大小
      var wordNum = parseInt(gridWidth / selectDate.length / fontsize);
      var option1 = {
        title: { text: "采集总量：" + this.total },
        xAxis: {
          data: selectDate,
          axisLabel: {
            interval: 0,
            formatter: function (value, index) {
              var strs = value.split("");
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                str += s;
                if (!(i % wordNum)) str += "\n";
              }
              return str;
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#999",
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              show: true,
              position: "top",
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#eb2100" },
                  { offset: 0.7, color: "#d0570e" },
                  { offset: 1, color: "#d0a00e" },
                ]),
              },
            },
            data: selectCount,
          },
        ],
      };
      this.myChart1.setOption(option1);
      this.myChart1.on("datazoom", function (params) {
        if (params.batch) {
          var start = params.batch[0].start;
          var end = params.batch[0].end;
        } else {
          var start = params.start;
          var end = params.end;
        }
        var cur_col_num = ((end - start) / 100) * selectDate.length; //计算缩放后可以显示几个柱子
        wordNum = parseInt(Math.ceil(gridWidth / cur_col_num) / 14); //重新计算wordNum
      });

      var option2 = {
        xAxis: {
          data: selectDate,
          axisLabel: {
            interval: 0,
            formatter: function (value, index) {
              var strs = value.split("");
              var str = "";
              for (var i = 0, s; (s = strs[i++]); ) {
                str += s;
                if (!(i % wordNum)) str += "\n";
              }
              return str;
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#999",
            },
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              show: true,
              position: "top",
              formatter: function (params) {
                var str = Number(params.value * 100).toFixed(2);
                str += "%";
                return str;
              },
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#eb2100" },
                  { offset: 0.7, color: "#d0570e" },
                  { offset: 1, color: "#d0a00e" },
                ]),
              },
            },
            data: selectRatio,
          },
        ],
      };
      this.myChart2.setOption(option2);
      this.myChart2.on("datazoom", function (params) {
        if (params.batch) {
          var start = params.batch[0].start;
          var end = params.batch[0].end;
        } else {
          var start = params.start;
          var end = params.end;
        }
        var cur_col_num = ((end - start) / 100) * selectDate.length; //计算缩放后可以显示几个柱子
        wordNum = parseInt(Math.ceil(gridWidth / cur_col_num) / 14); //重新计算wordNum
      });

      // var option = {
      //   title: { text: "任务采集进度" },
      //   xAxis: [
      //     {
      //       show: false,
      //     },
      //   ],
      //   yAxis: {
      //     axisLine: {
      //       show: false,
      //     },
      //     axisLabel: {
      //       margin: 2,
      //     },
      //     nameTextStyle: {
      //       color: "#ffffff",
      //       fontSize: "10",
      //     },
      //     data: selectDate,
      //   },
      //   grid: {
      //     left: 35,
      //   },
      //   series: [
      //     {
      //       name: "条",
      //       type: "bar",
      //       yAxisIndex: 0,
      //       data: selectRatio,
      //       label: {
      //         show: true,
      //         position: "right",
      //         formatter: function (params) {
      //           var str = Number(params.value * 100).toFixed(2);
      //           str += "%";
      //           return str;
      //         },
      //       },
      //       barWidth: 15,
      //       itemStyle: {
      //         normal: {
      //           color: function (params) {
      //             var num = myColor.length;
      //             return myColor[params.dataIndex % num];
      //           },
      //         },
      //       },
      //       z: 2,
      //     },
      //   ],
      // };
      // this.myChart2.setOption(option);
    },
    getWorkers() {
      if (this.workersTask == "") {
        this.$alert("请先选择任务！", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        let that = this;
        request({
          url: "/report/workloadByUser",
          method: "get",
          params: {
            taskId: that.workersTask,
          },
        }).then(function (response) {
          // 获取数据存入config
          if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          } else if (response.data.status === 200) {
            that.IsWorkersShow = true;
            that.workersData = response.data.data;
          }
        });
      }
    },
    getTables() {
      if (this.task === "") {
        this.$alert("请先选择任务！", "提示", {
          confirmButtonText: "确定",
        });
        document.getElementById("sTable").blur();
      } else {
        var taskname = "";
        for (var i = 0; i < this.taskoptions.length; i++) {
          if (this.task == this.taskoptions[i].value) {
            taskname = this.taskoptions[i].label;
            break;
          }
        }
        this.tableoptions = [];
        let that = this;
        request({
          url: "/statistic/getTables",
          method: "get",
          params: {
            tskName: taskname,
          },
        }).then(function (response) {
          // 获取数据存入config
          if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          } else if (response.status === 200) {
            var json = response.data;
            for (var key in json) {
              that.tableoptions.push({
                value: key,
                label: json[key],
              });
            }
          }
        });
      }
    },
    getEChart() {
      if (this.task === "") {
        this.$alert("请选择任务！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.table === "") {
        this.$alert("请选择表！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.date.length < 2) {
        this.$alert("请选择日期！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.date[0] == this.date[1]) {
        this.$message.info("查询时间重复！");
        return;
      }
      var taskname = "";
      for (var i = 0; i < this.taskoptions.length; i++) {
        if (this.task == this.taskoptions[i].value) {
          taskname = this.taskoptions[i].label;
          break;
        }
      }
      let that = this;
      request({
        url: "statistic/stat",
        method: "post",
        params: {
          tblName: that.table,
          operation: that.radio,
          startTime: that.date[0],
          endTime: that.date[1],
          tskName: taskname,
        },
      }).then(function (response) {
        // 获取数据存入config
        if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else if (response.status === 200) {
          that.data = response.data.data;
          that.ratio = response.data.ratio;
          that.total = response.data.total;
          that.initEchart();
        }
      });
    },

    getReport() {
      if (this.ReportTask === "") {
        this.$alert("请先选择查看的任务！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }

      //组织数据格式
      let that = this;
      request({
        url: "/report/featuresInfo",
        method: "get",
        params: {
          taskId: that.ReportTask,
        },
      }).then(function (response) {
        //先清空
        that.tableStatNum = [];
        that.tableName = [];
        that.tableCount = [];
        that.tableDailyAvg = [];
        that.tableMonthlyAvg = [];
        that.dailyTableRatio = [];
        that.dailyTableData = [];
        that.monthlyTableRatio = [];
        that.monthlyTableData = [];
        that.tableMaxDaily = [];
        that.tableMaxDailyNum = [];
        that.tableMaxMonthly = [];
        that.tableMaxMonthlyNum = [];
        that.tableMinDaily = [];
        that.tableMinDailyNum = [];
        that.tableMinMonthly = [];
        that.tableMinMonthlyNum = [];

        if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else if (response.status === 200) {
          if (response.data.length) {
            var result = response.data;
            var tableStatNum1 = result.length;
            for (var i = 0; i < tableStatNum1; i++) {
              that.tableStatNum.push(i + 1);
            }
            for (var j = 0; j < result.length; j++) {
              var onetabledata = result[j];
              that.tableName.push(onetabledata.name_ch);
              that.tableCount.push(onetabledata.count);

              //读取每天
              var statDaily = onetabledata.statDaily;
              that.tableDailyAvg.push(statDaily.avg);
              var dailydata = [];
              var dailyratio = [];
              for (var k = 0; k < statDaily.data.length; k++) {
                dailydata.push(statDaily.data[k]);
              }
              that.dailyTableData.push(dailydata);

              for (var k = 0; k < statDaily.ratio.length; k++) {
                dailyratio.push(statDaily.ratio[k]);
              }
              that.dailyTableRatio.push(dailyratio);

              var maxdailyJson = statDaily.maxDay;
              for (var key in maxdailyJson) {
                that.tableMaxDaily.push(key);
                that.tableMaxDailyNum.push(maxdailyJson[key]);
              }

              var mindailyJson = statDaily.minDay;
              for (var key in mindailyJson) {
                that.tableMinDaily.push(key);
                that.tableMinDailyNum.push(mindailyJson[key]);
              }

              //读取每月
              var statMonthly = onetabledata.statMonthly;
              that.tableMonthlyAvg.push(statMonthly.avg);
              var monthlydata = [];
              var monthlyratio = [];
              for (var k = 0; k < statMonthly.data.length; k++) {
                monthlydata.push(statMonthly.data[k]);
              }
              that.monthlyTableData.push(monthlydata);
              for (var k = 0; k < statMonthly.ratio.length; k++) {
                monthlyratio.push(statMonthly.ratio[k]);
              }
              that.monthlyTableRatio.push(monthlyratio);

              var maxmonthlyJson = statMonthly.maxMonth;
              for (var key in maxmonthlyJson) {
                that.tableMaxMonthly.push(key);
                that.tableMaxMonthlyNum.push(maxmonthlyJson[key]);
              }

              var minmonthlyJson = statMonthly.minMonth;
              for (var key in minmonthlyJson) {
                that.tableMinMonthly.push(key);
                that.tableMinMonthlyNum.push(minmonthlyJson[key]);
              }
            }
            that.IsCardShow = true;
            that.tableStatNum = that.tableStatNum.slice(0);
            setTimeout(function () {
              for (var i = 0; i < that.tableStatNum.length; i++) {
                that.initTableDaliyData(i);
                that.initTableDaliyRatio(i);
                that.initTableMonthlyData(i);
                that.initTableMonthlyRatio(i);
              }
            }, 50);
            that.taskMessage = true;
          } else {
            that.$message.info("数据为空，无法生成任务信息统计报告！");
            that.taskMessage = false;
          }
        }
      });

      request({
        url: "/report/collectorsInfo",
        method: "post",
        params: {
          taskId: that.ReportTask,
        },
      }).then(function (response) {
        if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else {
          //先清空
          that.workerNum = [];
          that.tableNum = [];
          that.workerInfo = [];
          that.TableList = [];
          that.WorkerList = [];
          that.workLoadList = [];
          that.avgWorkLoadList = [];

          if (response.status === 200) {
            if (response.data.length) {
              var result = response.data;
              if (result.length > 0) {
                var workerNum1 = result.length;
                var tableNum1 = 0;
                for (var key in result[0]) {
                  if (key != "name" && key != "phone" && key != "email") {
                    that.TableList.push(key);
                    tableNum1 = tableNum1 + 1;
                  }
                }
                for (var i = 0; i < workerNum1; i++) {
                  that.workerNum.push(i + 1);
                }
                for (var i = 0; i < tableNum1; i++) {
                  that.tableNum.push(i + 1);
                }
                for (var i = 0; i < result.length; i++) {
                  var oneworkerdata = result[i];
                  that.workerInfo.push({
                    name: oneworkerdata.name,
                    phone: oneworkerdata.phone,
                    email: oneworkerdata.email,
                  });
                  that.WorkerList.push(oneworkerdata.name);

                  //读取表信息
                  var tablesinfo = [];
                  for (var key in oneworkerdata) {
                    if (key != "name" && key != "phone" && key != "email") {
                      tablesinfo.push(oneworkerdata[key]);
                    }
                  }

                  for (var j = 0; j < that.tableNum.length; j++) {
                    var onetabledata = tablesinfo[j];
                    if (that.workLoadList[j]) {
                      that.workLoadList[j].push(onetabledata.workLoad);
                      that.avgWorkLoadList[j].push(onetabledata.avgWorkLoad);
                      that.workLoadDaily[j].push(onetabledata.workLoadDaily);
                    } else {
                      var workLoadList1 = [];
                      var avgWorkLoadList1 = [];
                      var workLoadDaily1 = [];
                      workLoadList1.push(onetabledata.workLoad);
                      avgWorkLoadList1.push(onetabledata.avgWorkLoad);
                      workLoadDaily1.push(onetabledata.workLoadDaily);

                      that.workLoadList[j] = workLoadList1;
                      that.avgWorkLoadList[j] = avgWorkLoadList1;
                      that.workLoadDaily[j] = workLoadDaily1;
                    }
                  }
                }
                that.IsCardShow = true;
                that.tableNum = that.tableNum.slice(0);
                that.workerNum = that.workerNum.slice(0);
                setTimeout(function () {
                  for (var k = 0; k < that.tableNum.length; k++) {
                    that.initWorkLoad(k);
                    that.initAvgWorkLoad(k);
                    for (var j = 0; j < that.workerNum.length; j++) {
                      that.initWorkLoadDaily(k, j);
                    }
                  }
                }, 50);
                that.workerMessage = true;
              } else {
                that.$message.info("数据为空，无法生成人员信息统计报告！");
                that.workerMessage = false;
              }
            } else {
              that.$message.info("数据为空，无法生成人员信息统计报告！");
            }
          }
        }
      });
    },
    //i表示第几个表
    initTableDaliyData(i) {
      if (this.myTableDailyDataEchart[i])
        this.myTableDailyDataEchart[i].clear();

      var dates = [];
      var counts = [];
      for (let j = 0; j < this.dailyTableData[i].length; j++) {
        dates.push(this.dailyTableData[i][j].date);
        counts.push(this.dailyTableData[i][j].count);
      }
      this.myTableDailyDataEchart[i] = echarts.init(
        document.getElementById("dailyDataEchart" + i)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集量"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集量",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#fccb05",
                  },
                  {
                    offset: 1,
                    color: "#f5804d",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: counts,
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        that.myTableDailyDataEchart[i].dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        that.myTableDailyDataEchart[i].dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.myTableDailyDataEchart[i].dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);
      this.myTableDailyDataEchart[i].setOption(option);
    },
    //i表示第几个表
    initTableDaliyRatio(i) {
      if (this.myTableDailyRatioEchart[i])
        this.myTableDailyRatioEchart[i].clear();

      var dates = [];
      var counts = [];
      var j = 0;
      for (j; j < this.dailyTableRatio[i].length; j++) {
        dates.push(this.dailyTableRatio[i][j].date);
        counts.push(this.dailyTableRatio[i][j].ratio);
      }
      this.myTableDailyRatioEchart[i] = echarts.init(
        document.getElementById("dailyRatioEchart" + i)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集进度"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集进度",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#8bd46e",
                  },
                  {
                    offset: 1,
                    color: "#09bcb7",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: counts,
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        that.myTableDailyRatioEchart[i].dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        that.myTableDailyRatioEchart[i].dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.myTableDailyRatioEchart[i].dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);

      this.myTableDailyRatioEchart[i].setOption(option);
    },
    //i表示第几个表
    initTableMonthlyData(i) {
      if (this.myTableMonthlyDataEchart[i])
        this.myTableMonthlyDataEchart[i].clear();

      var dates = [];
      var counts = [];
      var j = 0;
      for (j; j < this.monthlyTableData[i].length; j++) {
        dates.push(this.monthlyTableData[i][j].date);
        counts.push(this.monthlyTableData[i][j].count);
      }
      this.myTableMonthlyDataEchart[i] = echarts.init(
        document.getElementById("monthlyDataEchart" + i)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集量"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集量",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#fccb05",
                  },
                  {
                    offset: 1,
                    color: "#f5804d",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: counts,
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        that.myTableMonthlyDataEchart[i].dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        that.myTableMonthlyDataEchart[i].dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.myTableMonthlyDataEchart[i].dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);

      this.myTableMonthlyDataEchart[i].setOption(option);
    },
    //i表示第几个表
    initTableMonthlyRatio(i) {
      if (this.myTableMonthlyRatioEchart[i])
        this.myTableMonthlyRatioEchart[i].clear();

      var dates = [];
      var counts = [];
      var j = 0;
      for (j; j < this.monthlyTableRatio[i].length; j++) {
        dates.push(this.monthlyTableRatio[i][j].date);
        counts.push(this.monthlyTableRatio[i][j].ratio);
      }
      this.myTableMonthlyRatioEchart[i] = echarts.init(
        document.getElementById("monthlyRatioEchart" + i)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集进度"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集进度",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#8bd46e",
                  },
                  {
                    offset: 1,
                    color: "#09bcb7",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: counts,
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        that.myTableMonthlyRatioEchart[i].dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        that.myTableMonthlyRatioEchart[i].dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.myTableMonthlyRatioEchart[i].dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);

      this.myTableMonthlyRatioEchart[i].setOption(option);
    },

    initWorkLoad(i) {
      if (this.myWorkLoadEchart[i]) this.myWorkLoadEchart[i].clear();

      this.myWorkLoadEchart[i] = echarts.init(
        document.getElementById("workLoad" + i)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集量"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: this.WorkerList,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集量",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#fccb05",
                  },
                  {
                    offset: 1,
                    color: "#f5804d",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: this.workLoadList[i],
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        that.myWorkLoadEchart[i].dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        that.myWorkLoadEchart[i].dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.myWorkLoadEchart[i].dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);

      this.myWorkLoadEchart[i].setOption(option);
    },
    initAvgWorkLoad(i) {
      if (this.myAvgWorkLoadEchart[i]) this.myAvgWorkLoadEchart[i].clear();

      this.myAvgWorkLoadEchart[i] = echarts.init(
        document.getElementById("avgWorkLoad" + i)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集量"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: this.WorkerList,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集量",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#33CCFF",
                  },
                  {
                    offset: 1,
                    color: "#0096f3",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: this.avgWorkLoadList[i],
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        that.myAvgWorkLoadEchart[i].dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        that.myAvgWorkLoadEchart[i].dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.myAvgWorkLoadEchart[i].dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);

      this.myAvgWorkLoadEchart[i].setOption(option);
    },
    initWorkLoadDaily(i, j) {
      if (this.myWorkLoadDailyEchart[i]) {
        if (this.myWorkLoadDailyEchart[i][j])
          this.myWorkLoadDailyEchart[i][j].clear();
      }
      var dates = [];
      var counts = [];
      var k = 0;
      for (k; k < this.workLoadDaily[i][j].length; k++) {
        dates.push(this.workLoadDaily[i][j][k].date);
        counts.push(this.workLoadDaily[i][j][k].count);
      }
      var myWorkLoadDailyEchart1 = echarts.init(
        document.getElementById("workLoadDaily" + i + j)
      );

      //绘制
      var option = {
        backgroundColor: "#323a5e",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["采集量"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {},
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            start: 10,
            end: 90,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "采集量",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#8bd46e",
                  },
                  {
                    offset: 1,
                    color: "#09bcb7",
                  },
                ]),
                barBorderRadius: 12,
              },
            },
            data: counts,
          },
        ],
      };

      var app = {
        currentIndex: -1,
      };
      let that = this;
      setInterval(function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myWorkLoadDailyEchart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;

        // 高亮当前图形
        myWorkLoadDailyEchart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        myWorkLoadDailyEchart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 1000);
      myWorkLoadDailyEchart1.setOption(option);
      var sub1 = [];
      if (this.myWorkLoadDailyEchart[i]) {
        sub1 = this.myWorkLoadDailyEchart[i];
        sub1.push(myWorkLoadDailyEchart1);
        this.myWorkLoadDailyEchart[i] = sub1;
      } else {
        sub1.push(myWorkLoadDailyEchart1);
        this.myWorkLoadDailyEchart.push(sub1);
      }
    },
    getWarning() {
      if (this.warningform.task == "") {
        this.$alert("请先选择查看的任务！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      } else if (this.warningform.table == "") {
        this.$alert("请先选择查看的表！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      // 给个默认值0.67-1.33
      // else if (this.warningform.maxratio == "") {
      //   this.$alert("请先输入异常上限值！", "提示", {
      //     confirmButtonText: "确定",
      //   });
      //   return;
      // } else if (this.warningform.minratio == "") {
      //   this.$alert("请先输入异常下限值！", "提示", {
      //     confirmButtonText: "确定",
      //   });
      //   return;
      // }
      else {
        let that = this;
        this.warningData = [];
        let low =
          this.warningform.minratio == "" ? 0.67 : this.warningform.minratio;
        let high =
          this.warningform.maxratio == "" ? 1.33 : this.warningform.maxratio;
        request({
          url: "/base/getWarningForUser",
          method: "post",
          params: {
            taskId: that.warningform.task,
            tableName: that.warningform.table,
            lowLimit: low,
            highLimit: high,
          },
        }).then(function (response) {
          if (response.data.status == 200) {
            if (response.data.data) {
              var result = response.data.data.unusualData;
              that.warningWorkerNum = result.length;
              that.averageNum = response.data.data.averageNum;
              that.lowLimitNum = response.data.data.lowLimitNum;
              that.highLimitNum = response.data.data.highLimitNum;
              var idcount = 0;
              for (var i = 0; i < result.length; i++) {
                var user = result[i].userName;
                var dataaaa = {
                  id: "",
                  username: user,
                  date: "",
                  count: "",
                  children: [],
                };
                for (var j = 0; j < result[i].unusualDay.length; j++) {
                  if (j == 0) {
                    dataaaa.id = (idcount + 1).toString();
                    dataaaa.date = result[i].unusualDay[j].day;
                    dataaaa.count = result[i].unusualDay[j].num;
                  } else {
                    dataaaa.children.push({
                      id: (idcount + 1).toString(),
                      username: user,
                      date: result[i].unusualDay[j].day,
                      count: result[i].unusualDay[j].num,
                    });
                  }
                  idcount = idcount + 1;
                }
                that.warningData.push(dataaaa);
              }
              //that.getSameCount();
              that.IsWarningShow = true;
            } else {
              that.IsWarningShow = false;
              that.$alert("该任务目前无工作异常情况~");
            }
          } else if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          } else {
            that.IsWarningShow = false;
            that.$alert(response.data.message);
          }
        });
      }
    },
    getSameCount() {
      if (this.warningData.length > 0) {
        this.sameCount = [];
        var j = 0;
        for (var i = 0; i < this.warningData.length; i++) {
          this.sameCount.push(1);
        }
        for (var i = 1; i < this.warningData.length; i++) {
          if (this.warningData[j].username == this.warningData[i].username) {
            this.sameCount[j] = this.sameCount[j] + 1;
            this.sameCount[i] = 0;
          } else {
            j = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        var _row = this.sameCount[rowIndex];
        var _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    getClusterData(geojsonObject) {
      var Features = new GeoJSON().readFeatures(geojsonObject);
      var features = new Array(Features.length);
      for (var i = 0; i < Features.length; i++) {
        var geometry = Features[i].getGeometry();
        var coordinates = geometry.getCoordinates();
        var coordinate = [];
        if (coordinates[0][0]) {
          if (coordinates[0][0][0]) {
            coordinate = coordinates[0][0];
          } else {
            coordinate = coordinates[0];
          }
        } else {
          coordinate = coordinates;
        }
        features[i] = new Feature(new Point(coordinate));
      }
      var clusterSource = new VectorSource({
        features: features,
      });
      var cluster = new Cluster({
        distance: 40,
        source: clusterSource,
      });
      var styleCache = {};
      this.clusters = new VectorLayer({
        id: "clusterlayer",
        source: cluster,
        style: function (feature) {
          if (feature.get("features")) {
            var size = feature.get("features").length;
            var style = styleCache[size];
            if (!style) {
              style = new Style({
                image: new CircleStyle({
                  radius: 10,
                  stroke: new Stroke({
                    color: "#fff",
                  }),
                  fill: new Fill({
                    color: "#3399CC",
                  }),
                }),
                text: new Text({
                  text: size.toString(),
                  fill: new Fill({
                    color: "#fff",
                  }),
                }),
              });
              styleCache[size] = style;
            }
            return style;
          }
        },
      });
      //聚类图层
      this.clusters.setZIndex(4);
      this.map.addLayer(this.clusters);
      this.isClusters = true;
    },
    setCurrentStyle() {
      if (this.currentFeatureId !== "") {
        this.getFeatureData();
        //改变样式
        if (this.feature) {
          this.feature.setStyle(undefined);
        }
        this.feature = this.vectorSource.getFeatureById(this.currentFeatureId);
        var style = new Style({
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "yellow",
            }),
            stroke: new Stroke({
              color: "#37eed0",
              width: 3,
            }),
          }),
          fill: new Fill({
            color: "yellow",
          }),
          stroke: new Stroke({
            color: "#37eed0",
            width: 3,
          }),
        });
        this.feature.setStyle(style);
      } else {
        if (this.feature) {
          this.feature.setStyle(undefined);
          this.feature = null;
        }
      }
    },
    clearAll() {
      this.currentFeatureId = "";
      this.Info = {};
      this.FeaturesId = [];
    },
    getFeatureData() {
      if (this.currentFeatureId !== "") {
        let that = this;
        //获取数据
        request({
          url: "/get/getDataById",
          method: "post",
          params: {
            taskId: that.task,
            tableName: that.table,
            polygonId: that.currentFeatureId,
            requestor: "browser",
          },
        }).then(function (response) {
          if (response.data.success == true) {
            var jsondata = response.data.data;
            var imagedata = [];
            var videodata = [];
            for (var i = 0; i < jsondata.mediaFileURLs.length; i++) {
              if (
                jsondata.mediaFileURLs[i].substring(
                  jsondata.mediaFileURLs[i].length - 3
                ) == "jpg"
              ) {
                imagedata.push(jsondata.mediaFileURLs[i]);
              } else if (
                jsondata.mediaFileURLs[i].substring(
                  jsondata.mediaFileURLs[i].length - 3
                ) == "avi"
              ) {
                videodata.push(jsondata.mediaFileURLs[i]);
              }
            }
            jsondata.imagedata = imagedata;
            jsondata.videodata = videodata;
            that.Info = jsondata;
          } else if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          }
        });
      }
    },
    changeHotMap() {
      if (!this.isHot) {
        if (this.task && this.table) {
          if (this.heatmapLayer) {
            this.isHot = !this.isHot;
            this.addHeatmapLayer();
          } else {
            this.$alert("该任务暂无热力图统计数据！");
          }
        } else {
          this.$alert("请先在任务进度中选择生成热力图的任务和表！");
        }
      } else {
        this.isHot = !this.isHot;
        this.removeHeatmapLayer();
      }
    },
    addHeatmapLayer() {
      if (this.clusters) {
        if (this.isClusters) {
          this.map.removeLayer(this.clusters);
          this.isClusters = false;
        }
        this.clusters = null;
      }
      if (this.vectorLayer) {
        if (this.isVectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);
          this.isVectorLayer = false;
        }
        this.vectorLayer = null;
        this.selectclick = null;
      }
      this.distribute = false;
      if (this.heatmapLayer) {
        this.heatmapLayer.setVisible(true);
      }
    },
    removeHeatmapLayer() {
      this.distribute = true;
      this.getClusters();
      if (this.heatmapLayer) {
        this.heatmapLayer.setVisible(false);
      }
    },
    initHeatmapLayer() {
      let that = this;
      request({
        url: "base/getHeatData",
        method: "post",
        params: {
          taskId: that.task,
          tableName: that.table,
        },
      }).then(function (response) {
        // 获取数据存入config
        if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else if (response.data.status === 200) {
          if (response.data.data) {
            var features = [];
            var max = 1;
            var datas = response.data.data;
            if (datas.length == 0) return;
            else {
              max = Math.max.apply(
                Math,
                datas.map(function (o) {
                  return o.count;
                })
              );
            }
            for (var i = 0; i < datas.length; i++) {
              var data = datas[i];
              var center = [
                data.feature.geometry.coordinates[0],
                data.feature.geometry.coordinates[1],
              ];
              var geometry = new Point(center);
              var feature = new Feature({
                geometry: geometry,
                weight: parseFloat(data.count) / max.toFixed(10),
              });
              features.push(feature);
            }
            var vectorSource = new VectorSource({
              features: features,
            });
            that.heatmapLayer = new HeatmapLayer({
              source: vectorSource,
              weight: "weight",
            });
            that.heatmapLayer.setZIndex(8);
            that.heatmapLayer.setVisible(false);
            that.map.addLayer(that.heatmapLayer);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.el-input__inner {
  >>> &::placeholder {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #c0c4cc;
  }
}
>>> .el-card__body {
  height: calc(100% - 74px);
  padding: 20px;
}

>>> .el-tabs__content {
  height: calc(100% - 40px);
}
>>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #264672;
  border-color: #264672;
}
#map {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
body {
  overflow: hidden;
  height: 100%;
}

.map-text {
  background-color: #304156;
  color: white;
  font-size: 14px;
}
@media screen and (min-width: 1401px) {
  #control {
    margin-top: 5px;
  }
}
@media screen and (min-width: 840px) and (max-width: 1401px) {
  #control {
    margin-top: 55px;
  }
}
@media screen and (min-width: 420px) and (max-width: 840px) {
  #control {
    margin-top: 105px;
  }
}
@media screen and (max-width: 420px) {
  #control {
    margin-top: 155px;
  }
}
.taskChoser {
  margin: 5px 0px 5px 0px;
}
.el-card__body {
  padding: 20px;
  height: 90% !important;
}
.el-tabs__content {
  overflow: auto !important;
  position: relative !important;
  height: 90% !important;
}
.el-table .success-row {
  background: #f0f9eb;
}
#control {
  z-index: 1;
  position: absolute;
  display: flex;
  flex-flow: row;
  align-items: center;
  bottom: 20px;
  right: 192px;
}
.map-img {
  width: 80px;
  height: 100px;
}
.map-type-button {
  width: 50px;
  display: inline-block;
  text-align: center;
}
.map-control .map-type-button {
  margin-right: 35px;
}
.demo-table-expand {
  font-size: 0;
}
>>> .demo-table-expand label {
  width: 150px;
  font-weight: bold;
}
>>> .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>
