<template>
  <div id="mapDiv">
    <Map @mapView="getMap"></Map>
    <div id="startPng">
      <img v-show="isStartShow" src="../../assets/icon/start.png" alt="起点" />
    </div>
    <div id="endPng">
      <img v-show="isEndShow" src="../../assets/icon/end.png" alt="终点" />
    </div>
    <el-switch
      class="mySwitch"
      v-model="isTextShow"
      active-text="显示注记"
      inactive-text=""
    >
    </el-switch>
    <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-collapse v-model="activeItem" accordion>
              <el-collapse-item name="1">
                <template slot="title">
                  <img
                    src="../../assets/icon/ViewTask.png"
                    style="height: 20px; padding-right: 8px"
                  />
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>工作监管</el-breadcrumb-item>
                    <el-breadcrumb-item>查看任务</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <el-collapse v-model="activeName1" accordion>
                  <el-collapse-item name="1">
                    <template slot="title">
                      <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item
                          >查看任务总体情况</el-breadcrumb-item
                        >
                      </el-breadcrumb>
                    </template>
                    <div style="margin: 4px 0px 4px 0px">
                      <div class="taskChoser">
                        <span class="mylabel">
                          <span class="label-text">任务：</span>
                          <el-select
                            v-model="taskValue"
                            style="width: 80%; margin-bottom: 10px"
                            placeholder="请选择任务"
                            clearable
                            filterable
                            @change="taskChange"
                          >
                            <el-option
                              v-for="(item, index) in list"
                              :key="index"
                              :label="item.label"
                              :value="item"
                            ></el-option>
                          </el-select>
                        </span>
                      </div>
                      <div class="taskChoser">
                        <span class="mylabel">
                          <span class="label-text">表：</span>
                          <el-select
                            v-model="ctaskValue"
                            style="width: 80%; margin-bottom: 10px"
                            placeholder="请选择表"
                            clearable
                            @change="ctaskChange"
                          >
                            <el-option
                              v-for="item in taskValue.tableNames"
                              :key="item.tableKey"
                              :label="item.tableName"
                              :value="item.tableKey"
                            ></el-option>
                          </el-select>
                        </span>
                      </div>

                      <div style="margin-left: 50px">
                        <p>
                          <el-checkbox v-model="range" @change="showRange()"
                            >查看任务覆盖范围</el-checkbox
                          >
                          <el-checkbox
                            v-model="distribute"
                            @change="showDistribute()"
                          >
                            查看任务分布情况</el-checkbox
                          >
                        </p>
                      </div>
                      <div class="taskChoser">
                        <span class="mylabel">
                          <span class="label-text">字段：</span>
                          <el-select
                            v-model="FieldValue"
                            placeholder="请选择字段"
                            style="width: 80%; margin-bottom: 10px"
                            @focus="getFieldValue()"
                            @change="ctableChange"
                            clearable
                          >
                            <el-option
                              v-for="item in FiledOptions"
                              :key="item.key"
                              :label="item.name"
                              :value="item.key"
                            ></el-option>
                          </el-select>
                        </span>
                      </div>
                      <div class="taskChoser">
                        <span class="mylabel">
                          <span class="label-text">内容：</span>
                          <el-input
                            :disabled="taskInput"
                            style="width: 80%; margin-bottom: 10px"
                            placeholder="请输入内容"
                            v-model="TaskPOI"
                            clearable
                          >
                            <i
                              slot="suffix"
                              class="el-input__icon el-icon-search"
                              @click="getTaskPOI()"
                            ></i>
                          </el-input>
                        </span>
                      </div>
                      <div class="taskChoser">
                        <el-button
                          v-show="getList == false"
                          type="text"
                          @click="getList = true"
                          style="
                            margin-right: -75%;
                            font-family: PingFangSC-Regular;
                            color: #264672 !important;
                          "
                          >返回列表</el-button
                        >
                        <div v-show="isSearch == true">
                          <div v-show="getList == true">
                            <div
                              :key="i"
                              v-for="(item, i) in examData"
                              style="
                                border: 1px solid #cfcece;
                                text-align: left;
                              "
                            >
                              {{ i + 1 }}.
                              <el-row
                                v-for="(val, key) in examData[i]"
                                :key="key"
                                @click.native="getExamInfo(i)"
                              >
                                <el-col>
                                  <div>
                                    {{ key }}:
                                    <span style="color: #409eff">{{
                                      val
                                    }}</span>
                                    <br />
                                  </div>
                                </el-col>
                              </el-row>
                            </div>
                            <el-pagination
                              v-show="isSearch == true"
                              layout="prev, pager, next"
                              :page-count="dataPageNum"
                              @current-change="pageChange"
                            ></el-pagination>
                          </div>
                          <div v-show="getList == false">
                            <featureInfo
                              :data="examInfo"
                              style="margin-bottom: 20px"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item name="2">
                    <template slot="title">
                      <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item
                          >查看任务抽查情况</el-breadcrumb-item
                        >
                      </el-breadcrumb>
                    </template>
                    <el-form>
                      <el-form-item
                        label="源任务："
                        style="margin-bottom: 15px; margin-left: 15px"
                      >
                        <el-select
                          style="margin-left: -13px; width: 73%"
                          v-model="srcTask"
                          placeholder="请选择源任务"
                          clearable
                          @change="srcTable = ''"
                        >
                          <el-option
                            v-for="(item, index) in list"
                            :key="index"
                            :label="item.label"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="源表："
                        style="margin-bottom: 15px; margin-left: 15px"
                      >
                        <el-select
                          style="margin-left: 2px; width: 73%"
                          v-model="srcTable"
                          placeholder="请选择源表"
                          clearable
                          @change="ctaskChange"
                        >
                          <el-option
                            v-for="item in srcTask.tableNames"
                            :key="item.tableKey"
                            :label="item.tableName"
                            :value="item.tableKey"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="目标任务："
                        style="margin-bottom: 15px; margin-left: 15px"
                      >
                        <el-select
                          style="margin-left: -25px; width: 73%"
                          v-model="destTask"
                          placeholder="请选择目标任务"
                          clearable
                          @change="destTable = ''"
                        >
                          <el-option
                            v-for="(item, index) in list"
                            :key="index"
                            :label="item.label"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="目标表："
                        style="margin-bottom: 15px; margin-left: 15px"
                      >
                        <el-select
                          style="margin-left: -13px; width: 73%"
                          v-model="destTable"
                          placeholder="请选择目标表"
                          clearable
                          @change="ctaskChange"
                        >
                          <el-option
                            v-for="item in destTask.tableNames"
                            :key="item.tableKey"
                            :label="item.tableName"
                            :value="item.tableKey"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <el-button
                      class="dateBtn"
                      size="small"
                      @click="getDataSelect"
                      >查看</el-button
                    >
                  </el-collapse-item>
                </el-collapse>
              </el-collapse-item>

              <el-collapse-item name="2">
                <template slot="title">
                  <img
                    src="../../assets/icon/ViewTask.png"
                    style="height: 20px; padding-right: 8px"
                  />
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>工作监管</el-breadcrumb-item>
                    <el-breadcrumb-item>查看位置</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <!--wy add -->
                <el-collapse v-model="activePositionType" accordion>
                  <el-collapse-item name="historyTrack">
                    <template slot="title">
                      <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>查看历史轨迹</el-breadcrumb-item>
                      </el-breadcrumb>
                    </template>
                    <el-row>
                      <el-col :span="6">
                        <div class="search-item-wrap">
                          <span class="search-item-label">请选择任务</span>
                        </div>
                      </el-col>
                      <el-col :span="18">
                        <el-select
                          v-model="listQuery.taskId"
                          placeholder="请选择任务"
                          clearable
                          @change="chooseTask"
                        >
                          <el-option
                            v-for="(item, index) in taskList"
                            :key="index"
                            :label="item.taskName"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">
                        <div class="search-item-wrap">
                          <span class="search-item-label">请选择人员</span>
                        </div>
                      </el-col>
                      <el-col :span="18">
                        <div class="search-worker">
                          <el-select
                            v-model="listQuery.userId"
                            placeholder="请选择人员"
                            clearable
                            @change="changeTaskUser"
                            @clear="clearTaskUser"
                          >
                            <el-option
                              v-for="item in userList"
                              :key="item.userId"
                              :label="item.userName"
                              :value="item.userId"
                            ></el-option>
                          </el-select>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="6">
                        <div class="search-item-wrap">
                          <span class="search-item-label">查询时间</span>
                        </div>
                      </el-col>
                      <el-col :span="18">
                        <div class="search-time-wrap">
                          <el-date-picker
                            v-model="searchRangeTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            size="small"
                            type="datetimerange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            style="width: 100%"
                          ></el-date-picker>
                        </div>
                      </el-col>
                    </el-row>
                    <el-button class="dateBtn" size="small" @click="getTrack"
                      >查看</el-button
                    >
                  </el-collapse-item>
                  <el-collapse-item name="realPosition">
                    <template slot="title">
                      <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>查看实时位置</el-breadcrumb-item>
                      </el-breadcrumb>
                    </template>
                    <div>
                      <div
                        v-show="!isSockConnect"
                        class="el-button"
                        style="background-color: #304156; color: white"
                        type="primary"
                        @click="getRealPoint"
                      >
                        开始获取实时位置
                      </div>
                      <el-button
                        v-show="isSockConnect == 'connect'"
                        style="background-color: #304156; color: white"
                        type="primary"
                        disabled
                      >
                        正在连接中...
                      </el-button>
                      <div
                        v-show="isSockConnect == 'connected'"
                        class="el-button"
                        style="background-color: #304156; color: white"
                        type="primary"
                        @click="
                          disconnect();
                          clearTrackLine();
                          trackLayerOverLay.setPosition(undefined);
                        "
                      >
                        结束获取实时位置
                      </div>
                      <div class="team-legend" @click="setTrackPointCenter()">
                        <div
                          class="team-legend-item"
                          v-for="(team, index) in realPointsData"
                          :key="team.teamId"
                        >
                          <span
                            class="team-legend-mark"
                            v-if="team.workers && team.workers.length"
                            :style="{ background: colorArray[index] }"
                          ></span>
                          <span
                            class="team-legend-text"
                            v-if="team.workers && team.workers.length"
                            >队伍ID:{{ team.teamId }}</span
                          >
                        </div>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <!--wy add -->
              </el-collapse-item>
              <el-collapse-item name="3">
                <template slot="title">
                  <img
                    src="../../assets/icon/ViewTask.png"
                    style="height: 20px; padding-right: 8px"
                  />
                  <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>工作监管</el-breadcrumb-item>
                    <el-breadcrumb-item>路线优化</el-breadcrumb-item>
                  </el-breadcrumb>
                </template>
                <div style="margin: 4px 0px 4px 0px; height: 100%">
                  <div class="taskChoser">
                    <label>起点：</label>
                    <el-select
                      v-model="startType"
                      placeholder="请选择起点"
                      @change="selectStartType"
                    >
                      <el-option
                        v-for="(item, index) in options"
                        :key="index"
                        :label="item.label"
                        :value="item"
                      ></el-option>
                    </el-select>
                    <el-input
                      v-show="startInput"
                      class="searchInput"
                      placeholder="请输入内容"
                      v-model="startPOI"
                      clearable
                      v-on:input="startInputChange"
                    ></el-input>
                    <div class="searchResult" v-show="startSearchResult">
                      <div
                        v-for="(item, index) in startSearchResultItems"
                        :key="index"
                        style="height: 34px; line-height: 34px; font-size: 12px"
                        @click="selectStartPosition(index)"
                      >
                        <img
                          src="../../assets/icon/search.png"
                          style="
                            width: 12px;
                            height: 12px;
                            float: left;
                            margin-left: 2px;
                            margin-top: 11px;
                          "
                        />
                        <span style="float: left">{{
                          startSearchResultItems[index].name
                        }}</span>
                        <span
                          style="
                            float: right;
                            color: #999999;
                            margin-right: 2px;
                          "
                          >{{ startSearchResultItems[index].city
                          }}{{ startSearchResultItems[index].district }}</span
                        >
                      </div>
                    </div>
                    <div v-show="startTask">
                      <el-select
                        v-model="routetaskValue"
                        placeholder="请选择任务"
                        style="
                          width: 220px;
                          margin: 10px 0px 0px 40px;
                          color: white !important;
                        "
                        @change="
                          tableValue = '';
                          FieldValue1 = '';
                          sTaskPOI = '';
                          startInput2 = true;
                        "
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in routelist"
                          :key="index"
                          :label="item.label"
                          :value="item"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="tableValue"
                        placeholder="请选择表"
                        @change="
                          FieldValue1 = '';
                          sTaskPOI = '';
                          startInput2 = true;
                        "
                        style="
                          width: 220px;
                          margin: 10px 0px 0px 40px;
                          color: white !important;
                        "
                        clearable
                      >
                        <el-option
                          v-for="item in routetaskValue.tableNames"
                          :key="item.tableKey"
                          :label="item.tableName"
                          :value="item.tableKey"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="FieldValue1"
                        placeholder="请选择字段"
                        style="
                          width: 220px;
                          margin: 10px 0px 0px 40px;
                          color: white !important;
                        "
                        @focus="getFieldValue1()"
                        @change="stableChange"
                        clearable
                      >
                        <el-option
                          v-for="item in startFiledOptions"
                          :key="item.key"
                          :label="item.name"
                          :value="item.key"
                        ></el-option>
                      </el-select>
                      <el-input
                        :disabled="startInput2"
                        style="
                          width: 165px;
                          margin: 10px 0px 10px 40px;
                          color: white !important;
                        "
                        placeholder="请输入内容"
                        v-model="sTaskPOI"
                        clearable
                      >
                        <!--                      需要添加sTaskPOI的数据选择-->
                      </el-input>
                      <el-button
                        type="primary"
                        @click="getStartPOI()"
                        size="small"
                        style="background-color: #304156; color: #fff"
                        >搜索</el-button
                      >
                    </div>
                    <el-button
                      v-show="getList1 == false"
                      type="text"
                      @click="getList1 = true"
                      style="color: #409eff !important; margin-left: -250px"
                      >返回列表</el-button
                    >
                    <div v-show="isSearch1 == true">
                      <div v-show="getList1 == true" id="searchList">
                        <div
                          :key="i"
                          v-for="(item, i) in examData1"
                          :class="i % 2 == 0 ? 'backcolor' : 'nonecolor'"
                        >
                          {{ i + 1 }}.
                          <el-row
                            style="margin-left: 10px"
                            v-for="(val, key) in examData1[i]"
                            :key="key"
                            @click.native="getExamInfo1(i)"
                          >
                            <el-col>
                              <div>
                                {{ key }}:
                                <span style="color: #409eff">{{ val }}</span>
                                <br />
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                      <el-pagination
                        v-show="getList1 == true && isSearch1 == true"
                        layout="prev, pager, next"
                        :page-count="dataPageNum1"
                        @current-change="pageChange1"
                      ></el-pagination>
                      <div v-show="getList1 == false">
                        <featureInfo
                          :data="examInfo1"
                          style="margin-bottom: 20px"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="taskChoser" style="clear: both">
                    <label>终点：</label>
                    <el-select
                      v-model="endType"
                      placeholder="请选择终点"
                      @change="selectEndType"
                    >
                      <el-option
                        v-for="(item, index) in options"
                        :key="index"
                        :label="item.label"
                        :value="item"
                      ></el-option>
                    </el-select>
                    <el-input
                      v-show="endInput"
                      class="searchInput"
                      placeholder="请输入内容"
                      v-model="endPOI"
                      clearable
                      v-on:input="endInputChange"
                    ></el-input>
                    <div class="searchResult" v-show="endSearchResult">
                      <div
                        v-for="(item, index) in endSearchResultItems"
                        :key="index"
                        style="height: 34px; line-height: 34px; font-size: 12px"
                        @click="selectEndPosition(index)"
                      >
                        <img
                          src="../../assets/icon/search.png"
                          style="
                            width: 12px;
                            height: 12px;
                            float: left;
                            margin-left: 2px;
                            margin-top: 11px;
                          "
                        />
                        <span style="float: left">{{
                          endSearchResultItems[index].name
                        }}</span>
                        <span
                          style="
                            float: right;
                            color: #999999;
                            margin-right: 2px;
                          "
                          >{{ endSearchResultItems[index].city
                          }}{{ endSearchResultItems[index].district }}</span
                        >
                      </div>
                    </div>
                    <div v-show="endTask">
                      <el-select
                        v-model="routetaskValue2"
                        placeholder="请选择任务"
                        @change="
                          tableValue2 = '';
                          FieldValue2 = '';
                          eTaskPOI = '';
                          endInput2 = true;
                        "
                        style="width: 220px; margin: 10px 0px 0px 40px"
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in routelist2"
                          :key="index"
                          :label="item.label"
                          :value="item"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="tableValue2"
                        placeholder="请选择表"
                        @change="
                          FieldValue2 = '';
                          eTaskPOI = '';
                          endInput2 = true;
                        "
                        style="width: 220px; margin: 10px 0px 0px 40px"
                        clearable
                      >
                        <el-option
                          v-for="item in routetaskValue2.tableNames"
                          :key="item.tableKey"
                          :label="item.tableName"
                          :value="item.tableKey"
                        ></el-option>
                      </el-select>
                      <el-select
                        v-model="FieldValue2"
                        placeholder="请选择字段"
                        style="width: 220px; margin: 10px 0px 0px 40px"
                        @change="etableChange"
                        @focus="getFieldValue2"
                        clearable
                      >
                        <el-option
                          v-for="item in endFiledOptions"
                          :key="item.key"
                          :label="item.name"
                          :value="item.key"
                        ></el-option>
                      </el-select>
                      <el-input
                        :disabled="endInput2"
                        style="width: 165px; margin: 10px 0px 10px 40px"
                        placeholder="请输入内容"
                        v-model="eTaskPOI"
                        clearable
                      ></el-input>
                      <el-button
                        type="primary"
                        @click="getEndPOI()"
                        size="small"
                        style="background-color: #304156; color: #fff"
                        >搜索</el-button
                      >
                      <p></p>
                    </div>
                    <el-button
                      v-show="getList2 == false"
                      type="text"
                      @click="getList2 = true"
                      style="color: #409eff !important; margin-left: -250px"
                      >返回列表</el-button
                    >
                    <div v-show="isSearch2 == true">
                      <div v-show="getList2 == true">
                        <div
                          :key="i"
                          v-for="(item, i) in examData2"
                          id="searchList"
                        >
                          {{ i + 1 }}.
                          <el-row
                            v-for="(val, key) in examData2[i]"
                            :key="key"
                            @click.native="getExamInfo2(i)"
                          >
                            <el-col>
                              <div>
                                {{ key }}:
                                <span style="color: #409eff">{{ val }}</span>
                                <br />
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <el-pagination
                          v-show="isSearch2 == true"
                          layout="prev, pager, next"
                          :page-count="dataPageNum2"
                          @current-change="pageChange2"
                        ></el-pagination>
                      </div>
                      <div v-show="getList2 == false">
                        <featureInfo
                          :data="examInfo2"
                          style="margin-bottom: 20px"
                        />
                      </div>
                    </div>
                  </div>
                  <div style="margin-top: 20px">
                    <el-button @click="cancelNavigate" size="small"
                      >清空</el-button
                    >
                    <el-button
                      type="primary"
                      @click="startNavigate"
                      size="small"
                      class="dateBtn"
                      >导航</el-button
                    >
                  </div>
                </div>
                <el-tabs v-show="showPlans" v-model="currentPlan" class="plans">
                  <el-tab-pane
                    label="公交"
                    name="bus"
                    style="margin-left: 10px"
                  >
                    <el-collapse v-model="currentItem" class="planItems">
                      <div
                        v-for="(item, i) in busPlanItems"
                        :key="i"
                        @click="selectBusItem(i)"
                      >
                        <el-collapse-item :title="item.name" :name="i">
                          <span style="color: #409eff">{{
                            item.duration
                          }}</span>
                          <span style="color: #409eff">{{
                            item.distance
                          }}</span>
                          <span style="color: #409eff">{{
                            item.stepsTotal
                          }}</span>
                          <div
                            v-for="(m, k) in item.details"
                            :key="k"
                            style="
                              text-align: left;
                              cursor: pointer;
                              padding: 5px;
                            "
                            @click.stop="selectCurrentBusPath(i, k)"
                          >
                            <div v-if="item.details[k].direction == ''">
                              {{ item.details[k].instruction }}
                            </div>
                            <div v-else>
                              {{ item.details[k].on_station }}上车
                              <br />
                              <span style="margin-left: 30px"
                                >乘{{ item.details[k].line_name }}({{
                                  item.details[k].first_time
                                }}-{{ item.details[k].last_time }})({{
                                  item.details[k].stop_num
                                }}站)</span
                              >
                              <br />
                              {{ item.details[k].off_station }}下车
                            </div>
                          </div>
                        </el-collapse-item>
                      </div>
                    </el-collapse>
                  </el-tab-pane>
                  <el-tab-pane label="骑行" name="riding">
                    <el-collapse v-model="currentItem" class="planItems">
                      <div
                        v-for="(item, i) in ridingPlanItems"
                        :key="i"
                        @click="selectRidingItem(i)"
                      >
                        <el-collapse-item
                          :title="item.duration + ' ' + item.distance"
                          :name="i"
                        >
                          <div
                            v-for="(m, k) in item.details"
                            :key="k"
                            style="
                              text-align: left;
                              cursor: pointer;
                              padding: 5px;
                            "
                            @click.stop="selectCurrentBikePath(i, k)"
                          >
                            <span style="color: #409eff">{{
                              item.details[k].duration
                            }}</span>
                            <span style="color: #409eff">{{
                              item.details[k].distance
                            }}</span>
                            <div>
                              {{ item.details[k].direction }}度进入{{
                                item.details[k].instruction
                              }}
                              <br />
                              {{ item.details[k].turntype }}
                            </div>
                          </div>
                        </el-collapse-item>
                      </div>
                    </el-collapse>
                  </el-tab-pane>
                  <el-tab-pane label="驾车" name="driving">
                    <el-collapse v-model="currentItem" class="planItems">
                      <div
                        v-for="(item, i) in drivingPlanItems"
                        :key="i"
                        @click="selectDrivingItem(i)"
                      >
                        <el-collapse-item
                          :title="item.duration + ' ' + item.distance"
                          :name="i"
                        >
                          <div
                            v-for="(m, k) in item.details"
                            :key="k"
                            style="
                              text-align: left;
                              cursor: pointer;
                              padding: 5px;
                            "
                            @click.stop="selectCurrentDrivingPath(i, k)"
                          >
                            <span style="color: #409eff">{{
                              item.details[k].distance
                            }}</span>
                            <div>
                              {{ item.details[k].roadname }}({{
                                item.details[k].roadtype
                              }})
                              <br />
                            </div>
                          </div>
                        </el-collapse-item>
                      </div>
                    </el-collapse>
                  </el-tab-pane>
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
        </div>
      </div>
    </transition>
    <el-dialog
      v-dialogDrag
      class="infoDialog2"
      title="数据信息"
      :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 class="view-popup" ref="trackPointPopup">
      <div
        id="popup-content"
        ref="popupContent"
        style="width: 50px; height: 50px"
      >
        <img class="worker-img" src="../../../static/img/worker.png" />
        {{ trackWorkerName }}
      </div>
    </div>
    <!--实时位置人员查看end-->
    <el-dialog
      v-dialogDrag
      class="infoDialog"
      title="数据信息"
      :visible.sync="SdialogVisible"
    >
      <featureInfo :data="StartInfo" style="margin: 0 auto" />
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="infoDialog"
      title="数据信息"
      :visible.sync="EdialogVisible"
    >
      <featureInfo :data="EndInfo" style="margin: 0 auto" />
    </el-dialog>
    <!--轨迹属性查看-->
    <div class="view-popup" ref="trackLayerPopup">
      <div
        ref="popupContent"
        style="width: 235px; height: 65px"
        v-if="Object.keys(trackLayerAttr)"
      >
        <!-- <div class="trackLayerAttr" v-for="(value,key) in trackLayerAttr" :key="key">{{value}}</div> -->
        <div>上传人：{{ trackLayerAttr.name }}</div>
        <div>上传起始时间：{{ trackLayerAttr.begindate }}</div>
        <div>上传终止时间：{{ trackLayerAttr.stopdate }}</div>
      </div>
    </div>
  </div>
</template>

<script>
const Map = () => import("../Mapview/Map");
const featureInfo = () => import("../DataManagement/featureInfo");
import { store } from "@/components/vuex/store.js";
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 Select from "ol/interaction/Select";
import Overlay from "ol/Overlay";
import { Circle as CircleStyle, Stroke, Style, Fill, Text } from "ol/style";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature.js";
import * as api from "../../api/track";
import LineString from "ol/geom/LineString";
import "ol/ol.css";
const Stomp = require("stompjs");
let that = null;

export default {
  name: "ViewTask",
  data() {
    return {
      srctskId: "",
      srctabName: "",
      desttskId: "",
      desttabName: "",
      srcTask: {},
      srcTable: "",
      destTask: {},
      destTable: "",
      activeName1: "1",
      isSearch1: false,
      dataInfo1: [],
      dataCoordinates1: [],
      examData1: {},
      examInfo1: {},
      dataPageNum1: 1,
      getList1: true,

      isSearch2: false,
      dataInfo2: [],
      dataCoordinates2: [],
      examData2: {},
      examInfo2: {},
      dataPageNum2: 1,
      getList2: true,
      isSearch: false,

      dataInfo: [],
      dataCoordinates: [],
      pageLayer: null,
      pageSource: null,
      selectclick1: null,
      examData: {},
      examInfo: {},
      dataPageNum: 1,
      getList: true,

      isStartShow: false,
      isEndShow: false,
      StartInfo: {},
      EndInfo: {},
      SdialogVisible: false,
      EdialogVisible: false,
      minSize: "",
      maxSize: "",
      clusters: null,
      vectorLayer: null,

      dialogVisible: false,
      cellLayer: null,
      selectclick: null,

      minStartSize: "",
      maxStartSize: "",
      minEndSize: "",
      maxEndSize: "",

      Info: {},
      currentFeatureId: "",
      vectorSource: null,
      feature: null,
      FeaturesId: [],

      collapsed: true,
      activeItem: "1",
      taskValue: "",
      list: [],
      ctaskValue: "",
      range: false,
      distribute: false,
      realPointsData: [],
      activePositionType: "historyTrack",
      olCesium: null,
      map: null,
      socket: null,
      stompClient: null,
      styleCache: {},
      taskList: [],
      userList: [],
      listQuery: {},
      searchRangeTime: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      trackPointLayer: null,
      trackLayer: null,
      trackPointOverLay: null,
      trackWorkerName: "",
      trackLayerAttr: {},
      trackLayerOverLay: null,
      colorArray: [
        "#0089FA",
        "#5856D6",
        "#FF9500",
        "#a85607",
        "#7c3824",
        "#a72429",
        "#899f54",
        "#9f9e61",
      ],
      isSockConnect: false,
      startOverlay: null,
      endOverlay: null,
      selectclick2: null,
      startPOILayer: null,
      endPOILayer: null,
      currentLocation: undefined,
      currentItem: 0,
      busPlanItems: [],
      ridingPlanItems: [],
      drivingPlanItems: [],
      currentPlan: "bus",
      showPlans: false,
      startSearchResult: false,
      startSearchResultItems: [],
      endSearchResult: false,
      endSearchResultItems: [],
      startType: {},
      endType: {},
      currentPosition: undefined,
      startPosition: undefined,
      endPosition: undefined,
      options: [
        {
          value: "p2",
          label: "搜索位置",
        },
        {
          value: "p3",
          label: "搜索任务位置",
        },
      ],
      startInput: false,
      endInput: false,
      startPOI: "",
      endPOI: "",
      startTask: false,
      endTask: false,
      routetaskValue: {},
      routelist: [],
      tableValue: "",
      routetaskValue2: {},
      routelist2: [],
      tableValue2: "",
      startInput2: true,
      endInput2: true,
      sTaskPOI: "",
      eTaskPOI: "",
      coor1: [],
      FieldValue: "",
      FiledOptions: [],
      TaskPOI: "",
      cFieldValue: "",
      cTaskPOI: "",
      taskInput: true,
      FieldValue1: "",
      startFiledOptions: [],

      FieldValue2: "",
      endFiledOptions: [],
      isTextShow: true,
    };
  },
  components: {
    Map,
    featureInfo,
  },
  created() {
    that = this;
    this.initList();
  },
  methods: {
    getMap(val) {
      this.map = val;
      this.addTackPointOVerLay();
      /*2d 鼠标move事件*/
      let selected = null;
      let highLightPointStyle = new Style({
        image: new CircleStyle({
          radius: 10,
          fill: new Fill({
            color: "#0edeee",
          }),
        }),
        text: new Text({
          text: "",
          fill: new Fill({
            color: "rgba(255,255,255,0)",
          }),
          textAlign: "left",
          offsetX: 5,
          textBaseline: "middle",
        }),
      });
      let hightLightLineStyle = new Style({
        fill: new Fill({
          color: "rgba(1,1,1,0)",
        }),
        text: new Text({
          text: "",
          font: "14px ",
          fill: new Fill({
            color: "#000",
          }),
          stroke: new Stroke({
            color: "#000",
            width: 1,
          }),
        }),
        stroke: new Stroke({
          color: "#03a2f9",
          width: 5,
        }),
      });
      this.map.on("pointermove", function (e) {
        if (
          selected !== null &&
          !this.isSearch &&
          !this.isSearch1 &&
          !this.isSearch2
        ) {
          selected.setStyle(undefined);
          selected = null;
          that.trackPointOverLay.setPosition(undefined);
        }
        var coordinate = e.coordinate;
        that.map.forEachFeatureAtPixel(e.pixel, function (f, layer) {
          if (layer.type != "VECTOR") {
            return;
          }
          if (layer.get("id") === "trackPointLayer") {
            selected = f;
            f.setStyle(highLightPointStyle);
            that.trackWorkerName = f.getProperties().name;
            that.trackPointOverLay.setPosition(coordinate);
          } else if (layer.get("id") === "trackLayer") {
            selected = f;
            f.setStyle(hightLightLineStyle);
          }
          return true;
        });
      });

      let that = this;

      this.map.on("moveend", function (e) {
        //移除所有
        if (that.clusters) {
          that.map.removeLayer(that.clusters);
          that.clusters = null;
        }
        if (that.vectorLayer) {
          that.map.removeLayer(that.vectorLayer);
          that.map.removeInteraction(that.selectclick);
          that.selectclick = null;
          that.vectorLayer = null;
        }
        if (that.distribute) {
          if (that.activeName1 == "1" && that.cellLayer) {
            that.debounce(that.getClusters(), 500);
          } else if (that.activeName1 == "2") {
            that.debounce(that.getSelectClusters(), 500);
          }
        }
      });
      this.map.on("click", function (e) {
        if (selected !== null) {
          selected.setStyle(undefined);
          selected = null;
          that.trackPointOverLay.setPosition(undefined);
          that.trackLayerOverLay.setPosition(undefined);
        }
        var coordinate = e.coordinate;
        that.map.forEachFeatureAtPixel(e.pixel, function (f, layer) {
          if (layer.type != "VECTOR") {
            return;
          }
          selected = f;
          if (layer.get("id") === "trackLayer") {
            let attr = f.getProperties();
            that.trackLayerAttr = Object.assign({}, attr);
            that.trackLayerOverLay.setPosition(coordinate);
          }
          return true;
        });
      });
      this.startOverlay = new Overlay({
        element: document.getElementById("startPng"),
      });
      this.map.addOverlay(this.startOverlay);
      this.endOverlay = new Overlay({
        element: document.getElementById("endPng"),
      });
      this.map.addOverlay(this.endOverlay);

      this.map.on("click", function (e) {
        if (selected !== null) {
          selected.setStyle(undefined);
          selected = null;
          that.trackPointOverLay.setPosition(undefined);
          that.trackLayerOverLay.setPosition(undefined);
        }
        var coordinate = e.coordinate;
        that.map.forEachFeatureAtPixel(e.pixel, function (f, layer) {
          if (layer.type != "VECTOR") {
            return;
          }
          selected = f;
          if (layer.get("id") === "trackLayer") {
            selected = f;
            f.setStyle(hightLightLineStyle);
            let attr = f.getProperties();
            delete attr.geometry;
            that.trackLayerAttr = Object.assign({}, attr);
            that.trackLayerOverLay.setPosition(coordinate);
          }
          return true;
        });
      });
    },
    debounce(fn, delay) {
      let timer = null; //借助闭包
      return function () {
        if (timer) {
          clearTimeout(timer);
          timer = setTimeout(fn, delay);
        } else {
          timer = setTimeout(fn, delay);
        }
      };
    },
    getView(view) {
      //监听cesium，暂时不做了
      this.olCesium = view;
      /*3d 鼠标move事件*/
      let selected = null;
      let highLightPointStyle = new Style({
        image: new CircleStyle({
          radius: 10,
          fill: new Fill({
            color: "#0edeee",
          }),
        }),
        text: new Text({
          text: "",
          fill: new Fill({
            color: "rgba(255,255,255,0",
          }),
          textAlign: "left",
          offsetX: 5,
          textBaseline: "middle",
        }),
      });
      let hightLightLineStyle = new Style({
        fill: new Fill({
          color: "rgba(1,1,1,0)",
        }),
        text: new Text({
          text: "",
          font: "14px ",
          fill: new Fill({
            color: "#000",
          }),
          stroke: new Stroke({
            color: "#000",
            width: 1,
          }),
        }),
        stroke: new Stroke({
          color: "#37eed0",
          width: 5,
        }),
      });
    },
    addTackPointOVerLay() {
      this.trackPointOverLay = new Overlay({
        element: this.$refs.trackPointPopup,
        autoPan: true,
        autoPanAnimation: {
          duration: 250, // 当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
        },
      });
      this.map.addOverlay(this.trackPointOverLay);
      //轨迹属性弹框
      this.trackLayerOverLay = new Overlay({
        element: this.$refs.trackLayerPopup,
        autoPan: true,
        autoPanAnimation: {
          duration: 250, // 当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
        },
      });
      this.map.addOverlay(this.trackLayerOverLay);
    },
    // 初始化任务清单 - 从 store 获取数据
    initList() {
      that.routelist = [];
      that.routelist2 = [];
      // 从 store 获取数据
      const taskData = that.$store.state.taskData.selectAllWithTableName || [];
            // 把数据装入下拉菜单中
      for (let i = 0; i < taskData.length; i++) {
              let newData = {
          value: taskData[i].databaseName,
          label: taskData[i].taskName,
          id: taskData[i].id,
          tableNames: taskData[i].tableNames,
              };
              that.routelist.push(newData);
              that.list.push(newData);
              that.routelist2.push(newData);
            }
    },
    // 左侧面板收缩动画
    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();
    },
    // 切换任务时
    taskChange() {
      this.range = false;
      this.distribute = false;
      this.ctaskValue = "";
      this.FieldValue = "";
      this.TaskPOI = "";
      // 清空地图画布
      if (this.vectorLayer) {
        this.map.removeLayer(this.vectorLayer);
        this.map.removeInteraction(this.selectclick);
        this.vectorLayer = null;
        this.selectclick = null;
      }
      if (this.clusters) {
        this.map.removeLayer(this.clusters);
        this.clusters = null;
      }
      if (this.cellLayer) {
        this.map.removeLayer(this.cellLayer);

        this.cellLayer = null;
      }
    },
    // 切换子任务
    ctaskChange() {
      if (this.vectorLayer) {
        if (this.isVectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);
        }
        this.selectclick = null;
        this.vectorLayer = null;
      }
      if (this.clusters) {
        this.map.removeLayer(this.clusters);
        this.clusters = null;
      }
      this.distribute = false;
      this.FieldValue = "";
      this.TaskPOI = "";
      // 清空地图画布
    },
    // 绘制任务范围
    showRange() {
      if (this.range == true) {
        if (this.taskValue === "") {
          this.$alert("请选择任务！", "提示", {
            confirmButtonText: "确定",
          });
          this.range = false;
          return;
        }
        this.getRange(1);
      } else if (this.cellLayer) {
        this.map.removeLayer(this.cellLayer);
      }
    },
    getRange(addToMap) {
      if (this.cellLayer) {
        this.map.removeLayer(this.cellLayer);
        this.cellLayer = null;
      }
      let that = this;
      request({
        url: "/allocation/info/cell/all",
        method: "post",
        params: {
          taskId: that.taskValue.id,
        },
      }).then(function (response) {
        // 获取数据存入config
        if (response.data.status === 200) {
          var result = response.data.data;
          if (result.features.length == 0) {
            //  if (addToMap == 1) {
            that.$message.info("获取任务范围失败，未上传数据！");
            //  }
          } else {
            that.drawCellLayer(result);
            if (that.cellLayer) {
              that.map.getView().fit(that.cellLayer.getSource().getExtent());
            }
            //缩放至图层
            if (addToMap == 1) {
              that.map.addLayer(that.cellLayer);
            } else {
              that.getClusters();
            }
          }
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    drawClusterLayer(geojsonObject) {
      if (this.clusters) {
        this.map.removeLayer(this.clusters);

        this.clusters = null;
      }
      if (this.vectorLayer) {
        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),
      });
      let that = this;
      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);
    },
    drawVectorLayer(geojsonObject) {
      if (this.clusters) {
        this.map.removeLayer(this.clusters);

        this.clusters = null;
      }
      if (this.vectorLayer) {
        this.map.removeLayer(this.vectorLayer);
        this.map.removeInteraction(this.selectclick);

        this.vectorLayer = null;
        this.selectclick = null;
      }
      this.vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      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,
      });
      this.vectorLayer.setZIndex(4);
      this.isTextShow = true;
      this.vectorLayer.setStyle(this.styleFunction1);

      this.map.addLayer(this.vectorLayer);
      this.isVectorLayer = true;

      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,
          }),
        }),
      });
      let this1 = this;
      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);
    },
    styleFunction1(feature) {
      // 20210719和后台商量后 增加了_upload_name字段
      // let names = feature.getKeys();
      // let name = "";
      // for (let i = 0; i < names.length; i++) {
      //   if (names[i] != "id" && names[i] != "geometry") {
      //     name = names[i];
      //     break;
      //   }
      // }
      // if (name != "") {
      //   name = feature.get(name).toString();
      // }
      // 安全获取 _upload_name，如果不存在则使用空字符串
      let uploadName = feature.get("_upload_name");
      let name = uploadName != null && uploadName !== undefined ? uploadName.toString() : "";
      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,
            }),
          }),
          text: new Text({
            text: name,
            font: "14px Microsoft YaHei",
            fill: new Fill({
              color: "#000",
            }),
            offsetY: 20,
          }),
          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: "rgba(173,216,230)",
            width: 3,
          }),
          text: new Text({
            text: name,
            font: "14px Microsoft YaHei",
            fill: new Fill({
              color: "#000",
            }),
            placement: "line",
          }),
        }),
        Polygon: new Style({
          stroke: new Stroke({
            color: "blue",
            lineDash: [4],
            width: 3,
          }),
          fill: new Fill({
            color: "rgba(0, 0, 255, 0.1)",
          }),
          text: new Text({
            text: name,
            font: "14px Microsoft YaHei",
            fill: new Fill({
              color: "#000",
            }),
          }),
        }),
      };
      return styles[feature.getGeometry().getType()];
    },
    styleFunction2(feature) {
      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: "rgba(173,216,230)",
            width: 3,
          }),
        }),
        Polygon: new Style({
          stroke: new Stroke({
            color: "blue",
            lineDash: [4],
            width: 3,
          }),
          fill: new Fill({
            color: "rgba(0, 0, 255, 0.1)",
          }),
        }),
      };
      return styles[feature.getGeometry().getType()];
    },
    setCurrentStyle() {
      if (this.currentFeatureId !== "") {
        if (this.activeName1 !== "2") {
          this.getFeatureData();
        } else {
          this.getSelectFeatureData();
        }
        //改变样式
        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.taskValue.id,
            tableName: that.ctaskValue,
            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" });
          }
        });
      }
    },
    getSelectFeatureData() {
      if (this.currentFeatureId !== "") {
        let that = this;
        //获取数据
        request({
          url: "/get/getDataById",
          method: "post",
          params: {
            taskId: that.srctskId,
            tableName: that.srctabName,
            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" });
          }
        });
      }
    },
    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,
        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: "rgba(173,216,230, 0.5)",
            }),
            text: new Text({
              text: "任务总量：" + count,
              font: "16px Microsoft YaHei",
              fill: new Fill({
                color: "#000",
              }),
            }),
          });
          return [style];
        },
      });
      this.cellLayer.setZIndex(5);
    },
    // 绘制任务数据分布
    showDistribute() {
      if (this.distribute == true) {
        this.currentFeatureId = "";
        if (this.taskValue === "") {
          this.$alert("请选择任务！", "提示", {
            confirmButtonText: "确定",
          });
          this.distribute = false;
          return;
        }
        if (this.ctaskValue === "") {
          this.$alert("请选择表！", "提示", {
            confirmButtonText: "确定",
          });
          this.distribute = false;
          return;
        }
        //清空
        if (this.vectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.vectorLayer = null;
        }
        if (this.clusters) {
          this.map.removeLayer(this.clusters);
          this.clusters = null;
        }
        if (this.cellLayer == null) {
          this.getRange(0);
        } else {
          this.map.getView().fit(this.cellLayer.getSource().getExtent());
          this.getClusters();
        }
      } else {
        if (this.clusters) this.map.removeLayer(this.clusters);
        if (this.vectorLayer) this.map.removeLayer(this.vectorLayer);
      }
    },
    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;
      }
      var tskId = this.taskValue.id;
      var tabName = this.ctaskValue;
      if (this.distribute) {
        if (zoom < 15) {
          //请求聚类图层
          let that = this;
          that.minSize = 0;
          that.maxSize = 0;
          request({
            url: "/base/getCountByGeoHash",
            method: "post",
            params: {
              taskId: tskId,
              tableName: tabName,
              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: tskId,
              tableName: tabName,
              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" });
            }
          });
        }
      }
    },
    // wy add
    // 获取实时位置
    getRealPoint() {
      //
      if (this.stompClient) {
        return;
      }
      this.socket = new SockJS("/api/gs-guide-websocket");
      this.isSockConnect = "connect";
      this.stompClient = Stomp.over(this.socket);
      this.stompClient.connect({}, function (frame) {
        console.log("Connected: " + frame);
        that.isSockConnect = "connected";
        that.stompClient.subscribe(
          "/location-broker/sharing/common",
          function (greeting) {
            that.realPointsData = JSON.parse(greeting.body);
            that.drawTrackPoint(that.realPointsData);
          }
        );
      });
    },
    setTrackPointCenter() {
      this.map.getView().fit(this.trackPointLayer.getSource().getExtent());
      this.map.getView().setZoom(14);
    },
    disconnect() {
      if (this.stompClient !== null) {
        this.stompClient.disconnect();
        this.stompClient = null;
      }
      if (this.trackPointLayer) {
        this.trackPointLayer.getSource().clear();
      }
      that.isSockConnect = false;
      this.realPointsData = [];
      console.log("Disconnected");
    },
    drawTrackPoint(data) {
      if (this.trackPointLayer != null) {
        // this.trackLayer.setSource()
        let sources = this.trackPointLayer.getSource();
        sources.clear();
        for (let i = 0; i < data.length; i++) {
          let workers = data[i].workers.length ? data[i].workers : [];
          for (let j = 0; j < workers.length; j++) {
            let feature = new Feature(
              new Point([workers[j].position.x, workers[j].position.y])
            );
            let attribute = workers[j];
            attribute.teamIndex = i;
            feature.setProperties(attribute);
            sources.addFeature(feature);
          }
        }
        // that.map.getView().fit(sources.getExtent(), { constrainResolution: false })
      } else {
        let sources = new VectorSource();
        for (let i = 0; i < data.length; i++) {
          let workers = data[i].workers.length ? data[i].workers : [];
          for (let j = 0; j < workers.length; j++) {
            let feature = new Feature(
              new Point([workers[j].position.x, workers[j].position.y])
            );
            let attribute = workers[j];
            attribute.teamIndex = i;
            feature.setProperties(attribute);
            sources.addFeature(feature);
          }
        }
        this.styleCache = {};
        this.trackPointLayer = new VectorLayer({
          source: sources,
          id: "trackPointLayer",
          style: function (feat) {
            var teamIndex = Number(feat.getProperties().teamIndex);
            var teamId = that.realPointsData[teamIndex].teamId;
            var style = that.styleCache[teamId];
            var color =
              teamIndex < that.colorArray.length
                ? that.colorArray[teamIndex]
                : that.getRandomColor();
            if (!style) {
              if (!that.colorArray.includes(color)) {
                that.colorArray.push(color);
              }
              style = new Style({
                image: new CircleStyle({
                  radius: 5,
                  fill: new Fill({
                    color: color,
                  }),
                }),
                text: new Text({
                  text: feat.getProperties().name
                    ? feat.getProperties().name
                    : "",
                  fill: new Fill({
                    color: "rgba(255,255,255,0)",
                  }),
                  textAlign: "left",
                  offsetX: 5,
                  textBaseline: "middle",
                }),
              });
              that.styleCache[teamId] = style;
            }
            return style;
          },
        });
        this.map.addLayer(this.trackPointLayer);
        let index = this.map.getLayers().getLength() - 1;
        this.trackPointLayer.setZIndex(index);
        // this.map.getView().fit(this.trackPointLayer.getSource().getExtent(), { constrainResolution: false })
      }
    },
    getRandomColor() {
      // return (
      //   "#" +
      //   ("00000" + ((Math.random() * 0x1000000) << 0).toString(16))
      //     .slice(-6)
      //     .toUpperCase()
      // );
      var co = "";
      co += parseInt(Math.random() * (255 - 0 + 1) + 0) + ",";
      co += parseInt(Math.random() * (255 - 0 + 1) + 0) + ",";
      co += parseInt(Math.random() * (255 - 0 + 1) + 0);
      return "rgb(" + co + ")";
    },
    // 获得历史轨迹
    chooseTask(id) {
      api
        .getTaskWorker(this.listQuery)
        .then((res) => {
          if (res.data) {
            that.userList = res.data;
            if (that.userList.length)
              that.listQuery.userId = that.userList[0].userId;
          } else {
            that.userList = [];
            that.listQuery.userId = "";
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    getTrack() {
      if (this.trackLayer) {
        let sources = this.trackLayer.getSource();
        sources.clear();
      }
      if (!this.listQuery.taskId) {
        this.$message.info("请选择任务");
        return;
      }
      if (!this.listQuery.userId) {
        this.$message.info("请选择人员");
        return;
      }
      if (!this.searchRangeTime || this.searchRangeTime.length < 2) {
        //可以允许缺省时间
        this.$message.info("请选择查询时间");
        return;
      } else {
        this.listQuery.beginTime = this.searchRangeTime[0];
        this.listQuery.stopTime = this.searchRangeTime[1];
      }

      api
        .getRoute(this.listQuery)
        .then((res) => {
          if (res.success) {
            let trackData = res.data;
            if (trackData.length) {
              that.drawTrackLine(trackData);
            } else {
              that.$message.info("获取历史轨迹为空！");
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((error) => {
          this.$message.error(error);
        });
    },
    drawTrackLine(data) {
      if (this.trackLayer != null) {
        // this.trackLayer.setSource()
        let sources = this.trackLayer.getSource();
        sources.clear();
        sources.addFeatures(this.getFeatureLineFromGeoJSON(data));
        that.map
          .getView()
          .fit(sources.getExtent(), { constrainResolution: false });
      } else {
        this.trackLayer = new VectorLayer({
          source: new VectorSource({
            features: this.getFeatureLineFromGeoJSON(data),
          }),
          id: "trackLayer",
          style: new Style({
            fill: new Fill({
              color: "rgba(1,1,1,0)",
            }),
            text: new Text({
              text: "",
              font: "14px ",
              fill: new Fill({
                color: "#000",
              }),
              stroke: new Stroke({
                color: "#000",
                width: 1,
              }),
            }),
            stroke: new Stroke({
              color: "#43ee61",
              width: 4,
            }),
          }),
        });
        this.map.addLayer(this.trackLayer);
        let index = this.map.getLayers().getLength() - 1;
        this.trackLayer.setZIndex(index);
        this.map.getView().fit(this.trackLayer.getSource().getExtent(), {
          constrainResolution: false,
        });
      }
    },
    getFeatureLineFromGeoJSON(data) {
      let features = [];
      for (let i = 0; i < data.length; i++) {
        let feature = new GeoJSON().readFeature(data[i].polyline);
        let attribute = data[i];
        delete attribute["polyline"];
        feature.setProperties(attribute);
        features.push(feature);
      }
      return features;
    },
    clearTrackLine() {
      if (this.trackLayer != null) {
        // this.trackLayer.setSource()
        let sources = this.trackLayer.getSource();
        sources.clear();
      }
    },
    //wy add end

    transformGCJ2WGS(gcjLat, gcjLon) {
      var PI = 3.14159265358979324;
      let d = this.delta(gcjLat, gcjLon);
      return {
        lat: gcjLat - d.lat,
        lon: gcjLon - d.lon,
      };
    },
    transformLat(x, y) {
      var PI = 3.14159265358979324;
      let ret =
        -100.0 +
        2.0 * x +
        3.0 * y +
        0.2 * y * y +
        0.1 * x * y +
        0.2 * Math.sqrt(Math.abs(x));
      ret +=
        ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },
    transformLon(x, y) {
      var PI = 3.14159265358979324;
      let ret =
        300.0 +
        x +
        2.0 * y +
        0.1 * x * x +
        0.1 * x * y +
        0.1 * Math.sqrt(Math.abs(x));
      ret +=
        ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((x / 12.0) * PI) +
          300.0 * Math.sin((x / 30.0) * PI)) *
          2.0) /
        3.0;
      return ret;
    },
    delta(lat, lon) {
      var PI = 3.14159265358979324;
      let a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
      let ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
      let dLat = this.transformLat(lon - 105.0, lat - 35.0);
      let dLon = this.transformLon(lon - 105.0, lat - 35.0);
      let radLat = (lat / 180.0) * PI;
      let magic = Math.sin(radLat);
      magic = 1 - ee * magic * magic;
      let sqrtMagic = Math.sqrt(magic);
      dLat = (dLat * 180.0) / (((a * (1 - ee)) / (magic * sqrtMagic)) * PI);
      dLon = (dLon * 180.0) / ((a / sqrtMagic) * Math.cos(radLat) * PI);
      return {
        lat: dLat,
        lon: dLon,
      };
    },
    //起点类型选择
    selectStartType() {
      this.dataInfo1 = [];
      this.dataCoordinates1 = [];
      this.examInfo1 = {};
      this.examData1 = [];
      this.dataPageNum1 = 1;
      this.getList1 = true;
      this.isSearch1 = false;
      this.dataInfo2 = [];
      this.dataCoordinates2 = [];
      this.examInfo2 = {};
      this.examData2 = [];
      this.dataPageNum2 = 1;
      this.getList2 = true;
      this.isSearch2 = false;
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);
      }

      switch (this.startType.value) {
        case "p2":
          this.routetaskValue = {};
          this.tableValue = "";
          this.FieldValue1 = "";
          this.sTaskPOI = "";
          this.startInput = true;
          this.startTask = false;
          if (
            this.$store.state.LocalLocation.currentPosition != "" &&
            this.$store.state.LocalLocation.currentLocation != ""
          ) {
            this.currentLocation =
              this.$store.state.LocalLocation.currentLocation;
            this.currentPosition =
              this.$store.state.LocalLocation.currentPosition;
          } else {
            this.$alert(
              "位置权限未及时打开，不可使用搜索位置，请重新选择起点类型！"
            );
          }
          this.startOverlay.setPosition(undefined);
          this.isStartShow = false;
          break;
        case "p3":
          this.startTask = true;
          this.startInput = false;
          break;
      }
    },
    //终点类型选择
    selectEndType() {
      // alert(this.endType.value);
      this.currentFeatureId = "";
      this.dataInfo1 = [];
      this.dataCoordinates1 = [];
      this.examInfo1 = {};
      this.examData1 = [];
      this.dataPageNum1 = 1;
      this.getList1 = true;
      this.isSearch1 = false;
      this.dataInfo2 = [];
      this.dataCoordinates2 = [];
      this.examInfo2 = {};
      this.examData2 = [];
      this.dataPageNum2 = 1;
      this.getList2 = true;
      this.isSearch2 = false;
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);
      }
      switch (this.endType.value) {
        case "p2":
          this.routetaskValue2 = {};
          this.tableValue2 = "";
          this.FieldValue2 = "";
          this.eTaskPOI = "";
          this.endInput = true;
          this.endTask = false;
          if (this.endPOILayer) {
            this.map.removeLayer(this.endPOILayer);
            this.map.removeInteraction(this.endPOILayer);
          }
          this.endOverlay.setPosition(undefined);
          this.isEndShow = false;
          if (
            this.$store.state.LocalLocation.currentPosition != "" &&
            this.$store.state.LocalLocation.currentLocation != ""
          ) {
            this.currentLocation =
              this.$store.state.LocalLocation.currentLocation;
            this.currentPosition =
              this.$store.state.LocalLocation.currentPosition;
          } else {
            this.$alert(
              "位置权限未及时打开，不可使用搜索位置，请重新选择起点类型！"
            );
          }
          break;
        case "p3":
          this.endTask = true;
          this.endInput = false;
          break;
      }
    },
    //获取当前位置

    getCurrentLocation() {
      if (this.currentLocation == undefined) {
        this.geoLocation = new BMap.Geolocation();
        var that = this;
        this.geoLocation.getCurrentPosition(function (res) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            that.currentPosition = res.point;
            that.currentLocation = res.address;
            that.$store.dispatch("updateLocation", {
              location: that.currentLocation,
            });
            that.$store.dispatch("updatePosition", {
              position: that.currentPosition,
            });
          } else {
            that.$alert("位置权限未打开，请重新操作！");
          }
        });
      }
    },
    //搜索起点
    startInputChange() {
      if (this.startPOI !== "") {
        // 假设搜索的地点在当前位置同市内
        if (
          this.$store.state.LocalLocation.currentPosition != "" &&
          this.$store.state.LocalLocation.currentLocation != ""
        ) {
          this.currentLocation =
            this.$store.state.LocalLocation.currentLocation;
          this.currentPosition =
            this.$store.state.LocalLocation.currentPosition;
        } else {
          this.$alert(
            "位置权限未及时打开，不可使用搜索位置，请重新选择起点类型！"
          );
        }
        if (!this.currentLocation) {
          return;
        }
        console.log(this.currentLocation);
        var region = this.currentLocation.city;
        var url =
          "https://api.map.baidu.com/place/v2/suggestion?query=" +
          this.startPOI +
          "&region=" +
          region +
          "&city_limit=true&output=json&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5";
        var result = {};
        this.$jsonp(url).then((res) => {
          result = res;
          if (result.result.length) {
            this.startSearchResult = true;
            this.startSearchResultItems = result.result;
          } else {
            this.startSearchResult = false;
            this.startSearchResultItems = [];
          }
        });
      } else {
        this.startSearchResult = false;
        this.startSearchResultItems = [];
      }
    },
    //搜索终点
    endInputChange() {
      console.log(this.currentLocation);
      // 连接后台测试：
      if (this.endPOI != "") {
        var result = {};
        if (
          this.$store.state.LocalLocation.currentPosition != "" &&
          this.$store.state.LocalLocation.currentLocation != ""
        ) {
          this.currentLocation =
            this.$store.state.LocalLocation.currentLocation;
          this.currentPosition =
            this.$store.state.LocalLocation.currentPosition;
        } else {
          this.$alert(
            "位置权限未及时打开，不可使用搜索位置，请重新选择终点类型！"
          );
        }
        if (!this.currentLocation) {
          return;
        }
        var region = this.currentLocation.city;
        var url =
          "https://api.map.baidu.com/place/v2/suggestion?query=" +
          this.endPOI +
          "&region=" +
          region +
          "&city_limit=true&output=json&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5";
        this.$jsonp(url).then((res) => {
          result = res;
          if (result.result.length) {
            this.endSearchResult = true;
            this.endSearchResultItems = result.result;
          } else {
            this.endSearchResult = false;
            this.endSearchResultItems = [];
          }
        });
      } else {
        this.endSearchResult = false;
        this.endSearchResultItems = [];
      }
    },
    ctableChange() {
      this.TaskPOI = "";
      if (this.FieldValue === "") {
        this.taskInput = true;
      } else {
        this.taskInput = false;
      }
    },
    stableChange() {
      this.sTaskPOI = "";
      if (this.startPOILayer) {
        this.map.removeLayer(this.startPOILayer);
        this.map.removeInteraction(this.selectclick);
      }
      if (this.FieldValue1 === "") {
        this.startInput2 = true;
      } else {
        this.startInput2 = false;
      }
    },
    etableChange() {
      this.eTaskPOI = "";
      if (this.endPOILayer) {
        this.map.removeLayer(this.endPOILayer);
        this.map.removeInteraction(this.selectclick2);
      }
      if (this.endClusters) {
        this.map.removeLayer(this.endClusters);
      }
      if (this.FieldValue2 === "") {
        this.endInput2 = true;
      } else {
        this.endInput2 = false;
      }
    },
    //选择起点
    selectStartPosition(index) {
      this.startPosition = this.startSearchResultItems[index].location;
      this.startPOI = this.startSearchResultItems[index].name;
      this.startSearchResult = false;
      this.startSearchResultItems = [];
    },
    //选择终点
    selectEndPosition(index) {
      this.endPosition = this.endSearchResultItems[index].location;
      this.endPOI = this.endSearchResultItems[index].name;
      this.endSearchResult = false;
      this.endSearchResultItems = [];
    },
    selectCurrentBusPath(i, k) {
      this.highlightSelectedPath(this.busPlanItems[i].details[k].path);
    },
    selectCurrentBikePath(i, k) {
      this.highlightSelectedPath(this.ridingPlanItems[i].details[k].path);
    },
    selectCurrentDrivingPath(i, k) {
      this.highlightSelectedPath(this.drivingPlanItems[i].details[k].path);
    },
    //开始导航
    startNavigate() {
      this.currentFeatureId = "";
      this.dataInfo1 = [];
      this.dataCoordinates1 = [];
      this.examInfo1 = {};
      this.examData1 = [];
      this.dataPageNum1 = 1;
      this.getList1 = true;
      this.isSearch1 = false;
      this.dataInfo2 = [];
      this.dataCoordinates2 = [];
      this.examInfo2 = {};
      this.examData2 = [];
      this.dataPageNum2 = 1;
      this.getList2 = true;
      this.isSearch2 = false;
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);
      }

      if (this.startPosition == undefined) {
        alert("请选择起点！");
        return;
      }
      if (this.endPosition == undefined) {
        alert("请选择终点！");
        return;
      }
      if (
        this.startPosition.lat == this.endPosition.lat &&
        this.startPosition.lng == this.endPosition.lng
      ) {
        alert("建议原地旋转360度！");
      } else {
        // 拼接起始坐标以及出行方式
        // 公交出行http://api.map.baidu.com/direction/v2/transit?origin=30.626204,114.283614&destination=30.543803,114.372921&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5
        // 骑车出行http://api.map.baidu.com/direction/v2/riding?origin=30.626204,114.283614&destination=30.543803,114.372921&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5
        // 驾车出行http://api.map.baidu.com/direction/v2/driving?origin=30.626204,114.283614&destination=30.543803,114.372921&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5
        var url =
          "http://api.map.baidu.com/direction/v2/transit?origin=" +
          this.startPosition.lat +
          "," +
          this.startPosition.lng +
          "&destination=" +
          this.endPosition.lat +
          "," +
          this.endPosition.lng +
          "&ret_coordtype=gcj02" +
          "&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5";
        this.showPlans = true;
        this.$jsonp(url).then((res) => {
          var busPlans = res;
          this.getBusPlans(busPlans.result.routes);
          this.addPlanItemOnMap(this.busPlanItems[0]);
        });

        //骑车出行
        var ridingurl =
          "http://api.map.baidu.com/direction/v2/riding?origin=" +
          this.startPosition.lat +
          "," +
          this.startPosition.lng +
          "&destination=" +
          this.endPosition.lat +
          "," +
          this.endPosition.lng +
          "&ret_coordtype=gcj02" +
          "&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5";
        this.$jsonp(ridingurl).then((res) => {
          var ridingPlans = res;
          this.getRidingPlans(ridingPlans.result.routes);
        });

        //驾车出行
        var drivingurl =
          "http://api.map.baidu.com/direction/v2/driving?origin=" +
          this.startPosition.lat +
          "," +
          this.startPosition.lng +
          "&destination=" +
          this.endPosition.lat +
          "," +
          this.endPosition.lng +
          "&ret_coordtype=gcj02" +
          "&ak=DQiaygtuw2BwwKLoxEQC2FpVv3DQKuA5";
        this.$jsonp(drivingurl).then((res) => {
          var drivingPlans = res;
          this.getDrivingPlans(drivingPlans.result.routes);
        });
      }
    },
    //获取公交路线信息
    getBusPlans(routes) {
      var plans = [];
      for (var i = 0; i < routes.length; i++) {
        var route = routes[i];
        var stepsTotal = 0;
        var details = [];
        var names = []; // 公交线路名集合
        for (var j = 0; j < route.steps.length; j++) {
          //提示信息
          var instruction = route.steps[j][0].instructions;
          var direction = "";
          //公交车信息
          var vehicle_info = route.steps[j][0].vehicle_info;
          var path = route.steps[j][0].path;
          var on_station = "";
          var off_station = "";
          var stop_num = "";
          var first_time = "";
          var last_time = "";
          var line_name = "";
          if (vehicle_info.detail != null) {
            names.push(vehicle_info.detail.name);
            //起始站
            on_station = vehicle_info.detail.on_station;
            //终点站
            off_station = vehicle_info.detail.off_station;
            //经过几站
            stop_num = vehicle_info.detail.stop_num;
            //第一班车时间
            first_time = vehicle_info.detail.first_time;
            //最后一班车时间
            last_time = vehicle_info.detail.last_time;
            //车名
            line_name = vehicle_info.detail.name;
          }
          //是否为步行
          if (instruction.indexOf("步行") != -1) {
            var step = instruction.substr(instruction.indexOf("步行") + 2);
            if (step.indexOf("米") > -1) {
              step = step.substr(0, step.indexOf("米"));
            }
            if (step.indexOf("公里") > -1) {
              step = parseFloat(step.substr(0, step.indexOf("公里"))) * 1000;
            }
            stepsTotal += parseInt(step);
          } else {
            // 得到公交方向
            var regex = /\((.+?)\)/g;
            var directions = instruction.match(regex);
            if (directions) {
              for (var m = 0; m < directions.length; m++) {
                if (directions[m].indexOf("方向") != -1) {
                  direction = directions[m].substr(1, directions[m].length - 2);
                }
              }
            }
          } // 得到步行距离or公交方向
          details.push({
            instruction: instruction, //
            direction: direction,
            on_station: on_station,
            off_station: off_station,
            stop_num: stop_num,
            first_time: first_time,
            last_time: last_time,
            line_name: line_name,
            path: path, //
          });
        }
        var name = "";
        for (var k = 0; k < names.length; k++) {
          name += names[k];
          if (k != names.length - 1) {
            name += "  →  ";
          }
        }
        if (stepsTotal > 1000) {
          stepsTotal =
            "步行" + (parseFloat("" + stepsTotal) / 1000).toFixed(1) + "公里";
        } else {
          if (stepsTotal != 0) {
            stepsTotal = "步行" + stepsTotal + "米";
          } else {
            stepsTotal = "";
          }
        }
        var distance = "";
        if (route.distance > 1000) {
          distance =
            (parseFloat("" + route.distance) / 1000).toFixed(1) + "公里";
        } else {
          distance = route.distance + "米";
        }
        var duration = parseInt("" + route.duration / 60);
        if (duration > 60) {
          var hour = parseInt("" + duration / 60);
          var minute = duration % 60;
          duration = hour + "小时" + minute + "分钟";
        } else {
          var second = route.duration - duration * 60;
          duration = duration + "分钟" + second + "秒";
        }
        var plan = {
          name: name,
          stepsTotal: stepsTotal,
          distance: distance,
          duration: duration,
          details: details,
        };
        plans.push(plan);
      }
      this.busPlanItems = plans;
    },
    getRidingPlans(routes) {
      var plans = [];
      //总耗时 距离
      for (var i = 0; i < routes.length; i++) {
        var route = routes[i];
        var names = [];
        var steps = [];
        var distance = "";
        if (route.distance > 1000) {
          distance =
            (parseFloat("" + route.distance) / 1000).toFixed(1) + "公里";
        } else {
          distance = route.distance + "米";
        }
        var duration = parseInt("" + route.duration / 60);
        if (duration > 60) {
          var hour = parseInt("" + duration / 60);
          var minute = duration % 60;
          duration = hour + "小时" + minute + "分钟";
        } else {
          var second = route.duration - duration * 60;
          duration = duration + "分钟" + second + "秒";
        }
        for (var j = 0; j < route.steps.length; j++) {
          var distance1 = "";
          var duration1 = "";
          if (route.steps[j].distance > 1000) {
            distance1 =
              (parseFloat("" + route.steps[j].distance) / 1000).toFixed(1) +
              "公里";
          } else {
            distance1 = route.steps[j].distance + "米";
          }
          var duration1 = parseInt("" + route.steps[j].duration / 60);
          if (duration1 > 60) {
            var hour1 = parseInt("" + route.steps[j].duration / 60);
            var minute1 = route.steps[j].duration % 60;
            duration1 = hour1 + "小时" + minute1 + "分钟";
          } else {
            var second1 = route.steps[j].duration - duration1 * 60;
            duration1 = duration1 + "分钟" + second1 + "秒";
          }
          var instruction = route.steps[j].instructions.replace("</b>", "");
          instruction = instruction.replace("<b>", "");
          var turntype = route.steps[j].turn_type;
          var path = route.steps[j].path;
          var direction1 = "";
          steps.push({
            instruction: instruction,
            direction: route.steps[j].direction,
            distance: distance1,
            duration: duration1,
            turntype: turntype,
            path: path,
            name: route.steps[j].name,
          });
          names.push(route.steps[j].name);
        }
        var plan = {
          name: names,
          distance: distance,
          duration: duration,
          details: steps,
        };
        plans.push(plan);
      }
      this.ridingPlanItems = plans;
    },
    getDrivingPlans(routes) {
      var plans = [];
      for (var i = 0; i < routes.length; i++) {
        var route = routes[i];
        var names = [];
        var steps = [];
        var distance = "";

        //总时间 距离
        if (route.distance > 1000) {
          distance =
            (parseFloat("" + route.distance) / 1000).toFixed(1) + "公里";
        } else {
          distance = route.distance + "米";
        }
        var duration = parseInt("" + route.duration / 60);
        if (duration > 60) {
          var hour = parseInt("" + duration / 60);
          var minute = duration % 60;
          duration = hour + "小时" + minute + "分钟";
        } else {
          var second = route.duration - duration * 60;
          duration = duration + "分钟" + second + "秒";
        }

        //具体每一个路线
        for (var j = 0; j < route.steps.length; j++) {
          //路线距离 事件
          var distance1 = "";
          if (route.steps[j].distance > 1000) {
            distance1 =
              (parseFloat("" + route.steps[j].distance) / 1000).toFixed(1) +
              "公里";
          } else {
            distance1 = route.steps[j].distance + "米";
          }
          //序号
          var index = route.steps[j].leg_index;
          //路径名字
          var roadname = route.steps[j].road_name;
          //路径
          var path = route.steps[j].path;
          //路径类型
          var roadtype = "";
          switch (route.steps[j].road_type) {
            case 0:
              roadtype = "高速公路";
              break;
            case 1:
              roadtype = "城市高速路";
              break;
            case 2:
              roadtype = "国道";
              break;
            case 3:
              roadtype = "省道";
              break;
            case 4:
              roadtype = "县道";
              break;
            case 5:
              roadtype = "乡镇村道";
              break;
            case 6:
              roadtype = "其他道路";
              break;
            case 7:
              roadtype = "九级路";
              break;
            case 8:
              roadtype = "航线（轮渡）";
              break;
            case 9:
              roadtype = "行人道路";
              break;
          }
          steps.push({
            instruction: "",
            direction: "",
            distance: distance1,
            roadname: roadname,
            path: path,
            roadtype: roadtype,
          });
          names.push(route.steps[j].name);
        }
        var plan = {
          name: names,
          distance: distance,
          duration: duration,
          details: steps,
        };
        plans.push(plan);
      }
      this.drivingPlanItems = plans;
    },
    //重新绘制路线 路线内容包括公交 步行 骑行
    addPlanItemOnMap(item) {
      if (item) {
        this.removePlanLayers();
        var details = [];
        if (item.details) {
          details = item.details;
        }
        var walkFeatures = [];
        var vehicleFeatures = [];
        var firstPoint = undefined;
        for (var i = 0; i < details.length; i++) {
          var points = [];
          var instruction = details[i].instruction;
          var path = details[i].path;
          var steps = path.split(";");
          for (var j = 0; j < steps.length; j++) {
            var point = [
              parseFloat(steps[j].split(",")[0]),
              parseFloat(steps[j].split(",")[1]),
            ];
            var changePoint = this.transformGCJ2WGS(point[1], point[0]);
            point[0] = changePoint.lon;
            point[1] = changePoint.lat;
            if (i == 0 && j == 0) {
              firstPoint = point;
            }
            points.push(point);
          }
          var line = new LineString(points);
          var feature = new Feature({
            geometry: line,
          });
          var style = undefined;
          if (instruction.indexOf("步行") != -1) {
            style = new Style({
              stroke: new Stroke({
                width: 6,
                color: [77, 220, 38, 1],
              }),
            });
            feature.setStyle(style);
            walkFeatures.push(feature);
          } else {
            style = new Style({
              stroke: new Stroke({
                width: 6,
                color: [82, 152, 255, 1],
              }),
            });
            feature.setStyle(style);
            vehicleFeatures.push(feature);
          }
        }
        var vectorWalkSource = new VectorSource({
          features: walkFeatures,
        });
        this.walkLayer = new VectorLayer({
          source: vectorWalkSource,
        });
        this.walkLayer.setZIndex(100);
        this.map.addLayer(this.walkLayer);
        var vectorVehicleSource = new VectorSource({
          features: vehicleFeatures,
        });
        this.vehicleLayer = new VectorLayer({
          source: vectorVehicleSource,
        });
        this.map.addLayer(this.vehicleLayer);
        this.vehicleLayer.setZIndex(101);
        this.map.getView().setCenter(firstPoint);
        this.map.getView().setZoom(14);
      } else {
        return;
      }
    },
    //高亮选择路线路线
    highlightSelectedPath(path) {
      this.removeHighlightLayer();
      var points = [];
      var steps = path.split(";");
      for (var j = 0; j < steps.length; j++) {
        var point = [
          parseFloat(steps[j].split(",")[0]),
          parseFloat(steps[j].split(",")[1]),
        ];
        var changePoint = this.transformGCJ2WGS(point[1], point[0]);
        point[0] = changePoint.lon;
        point[1] = changePoint.lat;
        points.push(point);
      }
      var line = new LineString(points);
      var feature = new Feature({
        geometry: line,
      });
      var style = new Style({
        stroke: new Stroke({
          width: 5,
          color: [255, 0, 0, 1],
        }),
      });
      feature.setStyle(style);
      var features = [];
      features.push(feature);
      var vectorSource = new VectorSource({
        features: features,
      });
      this.highlightLayer = new VectorLayer({
        id: "highlightLayer",
        source: vectorSource,
      });
      this.highlightLayer.setZIndex(1000);
      this.map.addLayer(this.highlightLayer);
      this.map.getView().setCenter(points[0]);
      this.map.getView().setZoom(16);
    },
    //切换公交、骑行、驾车面板
    //重新绘制选中bus路线
    selectBusItem(i) {
      this.currentItem = i;
      this.addPlanItemOnMap(this.busPlanItems[i]);
    },
    selectRidingItem(i) {
      this.currentItem = i;
      this.addPlanItemOnMap(this.ridingPlanItems[i]);
    },
    selectDrivingItem(i) {
      this.currentItem = i;
      this.addPlanItemOnMap(this.drivingPlanItems[i]);
    },
    //清除导航信息
    cancelNavigate() {
      this.examInfo1 = {};
      this.examData1 = [];
      this.dataPageNum1 = 1;
      this.getList1 = true;
      this.isSearch1 = false;
      this.dataInfo1 = [];
      this.dataCoordinates1 = [];
      this.dataInfo2 = [];
      this.dataCoordinates2 = [];
      this.examInfo2 = {};
      this.examData2 = [];
      this.dataPageNum2 = 1;
      this.getList2 = true;
      this.isSearch2 = false;
      this.startPosition = undefined;
      this.endPosition = undefined;
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);
        this.pageLayer = null;
        this.selectclick1 = null;
      }
      this.currentFeatureId = "";
      this.startSearchResult = false;
      this.endSearchResult = false;
      if (this.startOverlay) {
        this.startOverlay.setPosition(undefined);
      }
      if (this.endOverlay) {
        this.endOverlay.setPosition(undefined);
      }
      this.isStartShow = false;
      this.isEndShow = false;

      this.startPOILayer = null;
      this.endPosition = null;
      this.selectclick = null;
      this.selectclick2 = null;

      this.startPOI = "";
      this.endPOI = "";
      this.startType = {};
      this.endType = {};
      this.routetaskValue = {};
      this.routetaskValue2 = {};
      this.FieldValue1 = "";
      this.tableValue = "";
      this.tableValue2 = "";
      this.FieldValue2 = "";
      this.sTaskPOI = "";
      this.eTaskPOI = "";

      this.startInput = false;
      this.startTask = false;
      this.endInput = false;
      this.endTask = false;
      this.showPlans = false;
      this.removePlanLayers();
      this.removeHighlightLayer();
    },
    //移除所有所得路线包括步行、车、公共交通
    removePlanLayers() {
      if (this.walkLayer) {
        this.map.removeLayer(this.walkLayer);
        this.walkLayer = undefined;
      }
      if (this.vehicleLayer) {
        this.map.removeLayer(this.vehicleLayer);
        this.vehicleLayer = undefined;
      }
      this.removeHighlightLayer();
    },
    //移除高亮路线
    removeHighlightLayer() {
      if (this.highlightLayer) {
        this.map.removeLayer(this.highlightLayer);
        this.highlightLayer = undefined;
      }
    },
    getTaskPOI() {
      this.getList = true;
      this.isSearch = false;
      this.dataInfo = [];
      this.dataCoordinates = [];
      this.examData = [];
      this.examInfo = {};
      this.currentFeatureId = "";
      this.distribute = false;
      if (this.clusters) {
        this.map.removeLayer(this.clusters);
        this.clusters = null;
      }
      if (this.vectorLayer) {
        this.map.removeLayer(this.vectorLayer);
        this.map.removeInteraction(this.selectclick);

        this.vectorLayer = null;
        this.selectclick = null;
      }
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);

        this.pageLayer = null;
        this.selectclick1 = null;
      }
      if (this.TaskPOI !== "") {
        this.cFieldValue = this.FieldValue;
        this.cTaskPOI = this.TaskPOI;
        let that = this;
        //缩放至区域
        request({
          url: "/get/getFuzzySearchDataByPageNum",
          method: "post",
          params: {
            taskId: that.taskValue.id,
            tableName: that.ctaskValue,
            fieldName: that.cFieldValue,
            searchKey: that.cTaskPOI,
            pageNum: 1,
          },
        }).then(function (response) {
          if (response.data.data) {
            that.isSearch = true;
            that.dataInfo = response.data.data.dataInfo;
            that.dataCoordinates = response.data.data.dataCoordinates;
            that.dataPageNum = response.data.data.dataPageNum;
            that.initPage();
            that.initPageLayer();
          } else {
            that.$message.info("无搜索数据！");
          }
        });
      } else {
        this.$message.info("请输入内容！");
      }
    },
    getEndPOI() {
      this.getList1 = true;
      this.isSearch1 = false;
      this.showPlans = false;

      this.getList2 = true;
      this.isSearch2 = false;
      this.dataInfo2 = [];
      this.dataCoordinates2 = [];
      this.examData2 = [];
      this.examInfo2 = {};
      this.currentFeatureId = "";
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);
        this.pageLayer = null;
        this.selectclick1 = null;
      }
      if (this.eTaskPOI !== "") {
        this.cFieldValue = this.FieldValue2;
        this.cTaskPOI = this.eTaskPOI;
        let that = this;
        //缩放至区域
        request({
          url: "/get/getAllFuzzySearchDataCenterPoint",
          method: "post",
          params: {
            taskId: that.routetaskValue2.id,
            tableName: that.tableValue2,
            fieldName: that.cFieldValue,
            searchKey: that.cTaskPOI,
            pageNum: 1,
          },
        }).then(function (response) {
          if (response.data.data) {
            that.isSearch2 = true;
            that.dataInfo2 = response.data.data.dataInfo;
            that.dataCoordinates2 = response.data.data.dataCoordinates;
            that.dataPageNum2 = response.data.data.dataPageNum;
            that.initPage2();
            that.initPageLayer2();
          } else {
            that.$message.info("无搜索数据！");
          }
        });
      } else {
        this.$message.info("请输入内容！");
      }
    },
    getStartPOI() {
      this.getList1 = true;
      this.isSearch1 = false;
      this.showPlans = false;

      this.getList2 = true;
      this.isSearch2 = false;

      this.dataInfo1 = [];
      this.dataCoordinates1 = [];
      this.examData1 = [];
      this.examInfo1 = {};
      this.currentFeatureId = "";
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.map.removeInteraction(this.selectclick1);
        this.pageLayer = null;
        this.selectclick1 = null;
      }
      if (this.sTaskPOI !== "") {
        this.cFieldValue = this.FieldValue1;
        this.cTaskPOI = this.sTaskPOI;
        let that = this;
        //缩放至区域
        request({
          url: "/get/getAllFuzzySearchDataCenterPoint",
          method: "post",
          params: {
            taskId: that.routetaskValue.id,
            tableName: that.tableValue,
            fieldName: that.cFieldValue,
            searchKey: that.cTaskPOI,
            pageNum: 1,
          },
        }).then(function (response) {
          if (response.data.data) {
            that.isSearch1 = true;
            that.dataInfo1 = response.data.data.dataInfo;
            that.dataCoordinates1 = response.data.data.dataCoordinates;
            that.dataPageNum1 = response.data.data.dataPageNum;
            that.initPage1();
            that.initPageLayer1();
          } else {
            that.$message.info("无搜索数据！");
          }
        });
      } else {
        this.$message.info("请输入内容！");
      }
    },
    wgs84togcj02tobd09(lng, lat) {
      const xPI = (3.14159265358979324 * 3000.0) / 180.0;
      const PI = 3.1415926535897932384626;
      const a = 6378245.0;
      const ee = 0.00669342162296594323;
      // WGS84转GCj02
      let dlat = this.transformlat(lng - 105.0, lat - 35.0);
      let dlng = this.transformlng(lng - 105.0, lat - 35.0);
      let radlat = (lat / 180.0) * PI;
      let magic = Math.sin(radlat);
      magic = 1 - ee * magic * magic;
      let sqrtmagic = Math.sqrt(magic);
      dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
      dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
      let mglat = lat + dlat;
      let mglng = lng + dlng;
      // 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
      let z =
        Math.sqrt(mglng * mglng + mglat * mglat) +
        0.00002 * Math.sin(mglat * xPI);
      let theta = Math.atan2(mglat, mglng) + 0.000003 * Math.cos(mglng * xPI);
      let bdlng = z * Math.cos(theta) + 0.0065;
      let bdlat = z * Math.sin(theta) + 0.006;
      // return [bdlng, bdlat]
      return { lng: bdlng, lat: bdlat };
    },
    transformlat(lng, lat) {
      const PI = 3.1415926535897932384626;
      let ret =
        -100.0 +
        2.0 * lng +
        3.0 * lat +
        0.2 * lat * lat +
        0.1 * lng * lat +
        0.2 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((lat / 12.0) * PI) +
          320 * Math.sin((lat * PI) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },
    transformlng(lng, lat) {
      const PI = 3.1415926535897932384626;
      let ret =
        300.0 +
        lng +
        2.0 * lat +
        0.1 * lng * lng +
        0.1 * lng * lat +
        0.1 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((lng / 12.0) * PI) +
          300.0 * Math.sin((lng / 30.0) * PI)) *
          2.0) /
        3.0;
      return ret;
    },
    getEndClusters() {
      let that = this;
      request({
        url: "/get/getAllFuzzySearchData",
        method: "post",
        params: {
          taskId: that.routetaskValue2.id,
          tableName: that.tableValue2,
          fieldName: that.FieldValue2,
          searchKey: that.eTaskPOI,
        },
      }).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.drawendPOILayer(geojsonObject);
          } else {
            that.$message.info("搜索数据为空！");
          }
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else {
          that.$alert(response.data.message);
        }
      });
    },
    getFieldValue() {
      if (this.taskValue != {} && this.ctaskValue != "") {
        let that = this;
        request({
          url: "/get/getFieldNames",
          method: "post",
          params: {
            taskId: that.taskValue.id,
            tableName: that.ctaskValue,
          },
        }).then(function (response) {
          that.FiledOptions = response.data.data;
          if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          }
        });
      } else {
        this.FiledOptions = [];
      }
    },
    getFieldValue1() {
      if (this.routetaskValue != {} && this.tableValue != "") {
        let that = this;
        request({
          url: "/get/getFieldNames",
          method: "post",
          params: {
            taskId: that.routetaskValue.id,
            tableName: that.tableValue,
          },
        }).then(function (response) {
          that.startFiledOptions = response.data.data;
          if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          }
        });
      } else {
        this.startFiledOptions = [];
      }
    },
    getFieldValue2() {
      if (this.routetaskValue2 != {} && this.tableValue2 != "") {
        let that = this;
        request({
          url: "/get/getFieldNames",
          method: "post",
          params: {
            taskId: that.routetaskValue2.id,
            tableName: that.tableValue2,
          },
        }).then(function (response) {
          that.endFiledOptions = response.data.data;
          if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          }
        });
      } else {
        this.endFiledOptions = [];
      }
    },
    changeTaskUser(val) {
      this.$set(this.listQuery, "userId", val);
      this.listQuery = Object.assign({}, this.listQuery);
    },
    clearTaskUser() {
      this.$set(this.listQuery, "userId", "");
    },
    getExamInfo(i) {
      this.getList = false;
      var jsondata = this.dataInfo[i];
      if (jsondata.id.toString() != this.currentFeatureId) {
        this.examInfo = {};
        this.currentFeatureId = jsondata.id.toString();
      }
    },
    getExamInfo1(i) {
      this.getList1 = false;
      var jsondata = this.dataInfo1[i];
      if (jsondata.id.toString() != this.currentFeatureId) {
        this.examInfo1 = {};
        this.currentFeatureId = jsondata.id.toString();
      }
    },
    getExamInfo2(i) {
      this.getList2 = false;
      var jsondata = this.dataInfo2[i];
      if (jsondata.id.toString() != this.currentFeatureId) {
        this.examInfo2 = {};
        this.currentFeatureId = jsondata.id.toString();
      }
    },
    pageChange(val) {
      let that = this;
      request({
        url: "/get/getFuzzySearchDataByPageNum",
        method: "post",
        params: {
          taskId: that.taskValue.id,
          tableName: that.ctaskValue,
          fieldName: that.cFieldValue,
          searchKey: that.cTaskPOI,
          pageNum: val,
        },
      }).then(function (response) {
        if (response.data.data) {
          that.dataInfo = response.data.data.dataInfo;
          that.dataCoordinates = response.data.data.dataCoordinates;
          that.dataPageNum = response.data.data.dataPageNum;
          that.initPage();
          that.initPageLayer();
        }
      });
    },
    pageChange1(val) {
      let that = this;
      request({
        url: "/get/getAllFuzzySearchDataCenterPoint",
        method: "post",
        params: {
          taskId: that.routetaskValue.id,
          tableName: that.tableValue,
          fieldName: that.cFieldValue,
          searchKey: that.cTaskPOI,
          pageNum: val,
        },
      }).then(function (response) {
        if (response.data.data) {
          that.dataInfo1 = response.data.data.dataInfo;
          that.dataCoordinates1 = response.data.data.dataCoordinates;
          that.dataPageNum1 = response.data.data.dataPageNum;
          that.initPage1();
          that.initPageLayer1();
        }
      });
    },

    pageChange2(val) {
      let that = this;
      request({
        url: "/get/getAllFuzzySearchDataCenterPoint",
        method: "post",
        params: {
          taskId: that.routetaskValue2.id,
          tableName: that.tableValue2,
          fieldName: that.cFieldValue,
          searchKey: that.cTaskPOI,
          pageNum: val,
        },
      }).then(function (response) {
        if (response.data.data) {
          that.dataInfo2 = response.data.data.dataInfo;
          that.dataCoordinates2 = response.data.data.dataCoordinates;
          that.dataPageNum2 = response.data.data.dataPageNum;
          that.initPage2();
          that.initPageLayer2();
        }
      });
    },
    initPageLayer() {
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.pageLayer = null;
        this.map.removeInteraction(this.selectclick1);
        this.selectclick1 = null;
      }
      if (this.clusters) {
        this.map.removeLayer(this.clusters);

        this.clusters = null;
      }
      if (this.vectorLayer) {
        this.map.removeLayer(this.vectorLayer);
        this.map.removeInteraction(this.selectclick);

        this.vectorLayer = null;
        this.selectclick = null;
      }
      var geojsonObject = {
        type: "FeatureCollection",
        features: this.dataCoordinates,
        crs: { type: "EPSG", properties: { code: "4326" } },
      };
      this.pageSource = 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.pageSource.getFeatures();
      for (var i = 0; i < allfearures.length; i++) {
        allfearures[i].setId(allfearures[i].get("id"));
      }

      this.pageLayer = new VectorLayer({
        source: this.pageSource,
        style: styleFunction,
      });
      this.pageLayer.setZIndex(5);
      this.map.addLayer(this.pageLayer);
      this.map.getView().fit(this.pageLayer.getSource().getExtent());

      this.selectclick1 = new Select({
        layers: [this.pageLayer],
      });
      let that = this;
      this.selectclick1.on("select", function (e) {
        var features = e.selected;
        if (features.length > 0) {
          var feature = features[0];
          that.currentFeatureId = feature.get("id");
          this.getFeatures().clear();
        }
      });
      this.map.addInteraction(this.selectclick1);
    },
    initPage() {
      this.examData = [];
      for (var i = 0; i < this.dataInfo.length; i++) {
        var maxcount = 0;
        var dataInfo1 = {};
        for (var key in this.dataInfo[i]) {
          if (
            key != "mediaFileURLs" &&
            key != "id" &&
            this.dataInfo[i][key].toString().substring(0, 4) != "http"
          ) {
            if (maxcount < 3) {
              maxcount = maxcount + 1;
              dataInfo1[key] = this.dataInfo[i][key];
            } else if (key == "数据状态") {
              dataInfo1[key] = this.dataInfo[i][key];
            }
          }
        }
        this.examData.push(dataInfo1);
      }
    },
    initPageLayer1() {
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.pageLayer = null;
        this.map.removeInteraction(this.selectclick1);
        this.selectclick1 = null;
      }
      var geojsonObject = {
        type: "FeatureCollection",
        features: this.dataCoordinates1,
        crs: { type: "EPSG", properties: { code: "4326" } },
      };
      this.pageSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      var styles = {
        Point: new Style({
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "rgba(255,128,106,0.8)",
            }),
            stroke: new Stroke({
              lineDash: [1, 2, 3, 4, 5, 6],
              color: "rgba(70,130,180)",
              width: 1,
            }),
          }),
          stroke: new Stroke({
            lineDash: [1, 2, 3, 4, 5, 6],
            color: "rgba(70,130,180)",
            width: 1,
          }),
          fill: new Fill({
            color: "rgba(255,128,106,0.8)",
          }),
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: "rgba(255,128,106, 1)",
            width: 2,
          }),
        }),
        Polygon: new Style({
          stroke: new Stroke({
            color: "blue",
            lineDash: [4],
            width: 2,
          }),
          fill: new Fill({
            color: "rgba(255,128,106, 0.1)",
          }),
        }),
      };
      var styleFunction = function (feature) {
        return styles[feature.getGeometry().getType()];
      };
      var allfearures = this.pageSource.getFeatures();
      for (var i = 0; i < allfearures.length; i++) {
        allfearures[i].setId(allfearures[i].get("id"));
      }

      this.pageLayer = new VectorLayer({
        source: this.pageSource,
        style: styleFunction,
      });
      this.pageLayer.setZIndex(5);
      this.map.addLayer(this.pageLayer);
      this.map.getView().fit(this.pageLayer.getSource().getExtent());

      this.selectclick1 = new Select({
        layers: [this.pageLayer],
      });
      let that = this;
      this.selectclick1.on("select", function (e) {
        var features = e.selected;
        if (features.length > 0) {
          var features = e.selected;
          if (features.length > 0) {
            var feature = features[0];
            var geometry = feature.getGeometry();
            var coordinate = geometry.getCoordinates();
            if (coordinate[0][0]) {
              coordinate = e.mapBrowserEvent.coordinate;
            }
            //转换坐标
            that.startPosition = that.wgs84togcj02tobd09(
              coordinate[0],
              coordinate[1]
            );
            that.startOverlay.setOffset([-14, -25]);
            that.startOverlay.setPosition(coordinate);
            that.isStartShow = true;
            that.currentFeatureId = feature.get("id");
            this.getFeatures().clear();
          }
        }
      });
      this.map.addInteraction(this.selectclick1);
    },
    initPage1() {
      this.examData1 = [];
      for (var i = 0; i < this.dataInfo1.length; i++) {
        var maxcount = 0;
        var dataInfo1 = {};
        for (var key in this.dataInfo1[i]) {
          if (
            key != "mediaFileURLs" &&
            key != "id" &&
            this.dataInfo1[i][key].toString().substring(0, 4) != "http" &&
            maxcount < 3
          ) {
            maxcount = maxcount + 1;
            dataInfo1[key] = this.dataInfo1[i][key];
          }
        }
        this.examData1.push(dataInfo1);
      }
    },
    initPageLayer2() {
      if (this.pageLayer) {
        this.map.removeLayer(this.pageLayer);
        this.pageLayer = null;
        this.map.removeInteraction(this.selectclick1);
        this.selectclick1 = null;
      }
      var geojsonObject = {
        type: "FeatureCollection",
        features: this.dataCoordinates2,
        crs: { type: "EPSG", properties: { code: "4326" } },
      };
      this.pageSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      var styles = {
        Point: new Style({
          image: new CircleStyle({
            radius: 7,
            fill: new Fill({
              color: "rgba(255,128,106,0.8)",
            }),
            stroke: new Stroke({
              lineDash: [1, 2, 3, 4, 5, 6],
              color: "rgba(70,130,180)",
              width: 1,
            }),
          }),
          stroke: new Stroke({
            lineDash: [1, 2, 3, 4, 5, 6],
            color: "rgba(70,130,180)",
            width: 1,
          }),
          fill: new Fill({
            color: "rgba(255,128,106,0.8)",
          }),
        }),
        LineString: new Style({
          stroke: new Stroke({
            color: "rgba(255,128,106, 1)",
            width: 2,
          }),
        }),
        Polygon: new Style({
          stroke: new Stroke({
            color: "blue",
            lineDash: [4],
            width: 2,
          }),
          fill: new Fill({
            color: "rgba(255,128,106, 0.1)",
          }),
        }),
      };
      var styleFunction = function (feature) {
        return styles[feature.getGeometry().getType()];
      };
      var allfearures = this.pageSource.getFeatures();
      for (var i = 0; i < allfearures.length; i++) {
        allfearures[i].setId(allfearures[i].get("id"));
      }

      this.pageLayer = new VectorLayer({
        source: this.pageSource,
        style: styleFunction,
      });
      this.pageLayer.setZIndex(5);
      this.map.addLayer(this.pageLayer);
      this.map.getView().fit(this.pageLayer.getSource().getExtent());

      this.selectclick1 = new Select({
        layers: [this.pageLayer],
      });
      let that = this;
      this.selectclick1.on("select", function (e) {
        var features = e.selected;
        if (features.length > 0) {
          var feature = features[0];
          var geometry = feature.getGeometry();
          var coordinate = geometry.getCoordinates();
          that.endPosition = that.wgs84togcj02tobd09(
            coordinate[0],
            coordinate[1]
          );
          that.endOverlay.setOffset([-14, -25]);
          that.endOverlay.setPosition(coordinate);
          that.isEndShow = true;
          that.currentFeatureId = feature.get("id");
        }
      });
      this.map.addInteraction(this.selectclick1);
    },
    initPage2() {
      this.examData2 = [];
      for (var i = 0; i < this.dataInfo2.length; i++) {
        var maxcount = 0;
        var dataInfo1 = {};
        for (var key in this.dataInfo2[i]) {
          if (
            key != "mediaFileURLs" &&
            key != "id" &&
            this.dataInfo2[i][key].toString().substring(0, 4) != "http" &&
            maxcount < 3
          ) {
            maxcount = maxcount + 1;
            dataInfo1[key] = this.dataInfo2[i][key];
          }
        }
        this.examData2.push(dataInfo1);
      }
    },
    setCurrentStyle1() {
      if (this.currentFeatureId !== "") {
        this.getList = false;
        this.getExamInfoById(this.currentFeatureId);
        //改变样式
        if (this.feature) {
          this.feature.setStyle(undefined);
        }
        this.feature = this.pageSource.getFeatureById(this.currentFeatureId);
        //缩放至要素
        /* this.map.getView().setCenter(this.feature.getGeometry().getExtent());
        this.map.getView().setZoom(15);*/
        var type = this.feature.getGeometry().getType();
        if (type == "Point") {
          this.map.getView().setCenter(this.feature.getGeometry().getExtent());
          this.map.getView().setZoom(15);
        } else {
          var extent = this.feature.getGeometry().getExtent();
          var center = [
            (extent[0] + extent[2]) / 2,
            (extent[1] + extent[3]) / 2,
          ]; //获取边界区域的中心位置
          this.map.getView().setCenter(center); //设置当前地图的显示中心位置
          this.map.getView().setZoom(14);
        }

        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;
        }
      }
    },
    setCurrentStyle2() {
      if (this.currentFeatureId !== "") {
        this.getList1 = false;
        this.getExamInfoById1(this.currentFeatureId);
        //改变样式
        if (this.feature) {
          this.feature.setStyle(undefined);
        }
        this.feature = this.pageSource.getFeatureById(this.currentFeatureId);
        var geometry = this.feature.getGeometry();
        var coordinate = geometry.getCoordinates();
        this.startPosition = this.wgs84togcj02tobd09(
          coordinate[0],
          coordinate[1]
        );
        this.startOverlay.setOffset([-14, -25]);
        this.startOverlay.setPosition(coordinate);
        this.isStartShow = true;
        //缩放至要素
        this.map.getView().setCenter(this.feature.getGeometry().getExtent());
        this.map.getView().setZoom(15);

        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;
        }
      }
    },
    setCurrentStyle3() {
      if (this.currentFeatureId !== "") {
        this.getList2 = false;
        this.getExamInfoById2(this.currentFeatureId);
        //改变样式
        if (this.feature) {
          this.feature.setStyle(undefined);
        }
        this.feature = this.pageSource.getFeatureById(this.currentFeatureId);
        var geometry = this.feature.getGeometry();
        var coordinate = geometry.getCoordinates();
        this.endPosition = this.wgs84togcj02tobd09(
          coordinate[0],
          coordinate[1]
        );
        this.endOverlay.setOffset([-14, -25]);
        this.endOverlay.setPosition(coordinate);
        this.isEndShow = true;
        //缩放至要素
        this.map.getView().setCenter(this.feature.getGeometry().getExtent());
        this.map.getView().setZoom(16);

        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;
        }
      }
    },
    getExamInfoById(id) {
      var jsondata = {};
      for (var k = 0; k < this.dataInfo.length; k++) {
        if (this.dataInfo[k].id.toString() == id) {
          jsondata = JSON.parse(JSON.stringify(this.dataInfo[k]));
          break;
        }
      }
      this.examInfo = {};
      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;
      delete jsondata.mediaFileURLs;
      delete jsondata.id;
      this.examInfo = jsondata;
    },
    getExamInfoById1(id) {
      var jsondata = {};
      for (var k = 0; k < this.dataInfo1.length; k++) {
        if (this.dataInfo1[k].id.toString() == id) {
          jsondata = JSON.parse(JSON.stringify(this.dataInfo1[k]));
          break;
        }
      }
      this.examInfo1 = {};
      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;
      delete jsondata.mediaFileURLs;
      delete jsondata.id;
      this.examInfo1 = jsondata;
    },
    getExamInfoById2(id) {
      var jsondata = {};
      for (var k = 0; k < this.dataInfo2.length; k++) {
        if (this.dataInfo2[k].id.toString() == id) {
          jsondata = JSON.parse(JSON.stringify(this.dataInfo2[k]));
          break;
        }
      }
      this.examInfo2 = {};
      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;
      delete jsondata.mediaFileURLs;
      delete jsondata.id;
      this.examInfo2 = jsondata;
    },
    getDataSelect() {
      if (this.srcTask == "") {
        this.$message.info("源任务不可为空！");
        return;
      }
      if (this.srcTable == "") {
        this.$message.error("源表不可为空！");
        return;
      }
      if (this.destTask == "") {
        this.$message.error("目标任务不可为空！");
        return;
      }

      if (this.destTable == "") {
        this.$message.error("目标表不可为空！");
        return;
      }
      if (this.srcTask == this.destTask) {
        this.$message.error("源任务和目标任务不可重复！");
        return;
      }
      this.srctskId = this.srcTask.id;
      this.srctabName = this.srcTable;
      this.desttskId = this.destTask.id;
      this.desttabName = this.destTable;
      this.getSelectClusters();
    },
    getSelectClusters() {
      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;
      }
      this.distribute = true;
      if (zoom < 15) {
        //请求聚类图层
        let that = this;
        that.minSize = 0;
        that.maxSize = 0;
        request({
          url: "/base/getCountByGeoHash",
          method: "post",
          params: {
            taskId: that.srctskId,
            tableName: that.srctabName,
            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/getDataSelectOrderByRangeIntersection",
          method: "post",
          params: {
            srcTaskId: that.srctskId,
            srcTableName: that.srctabName,
            longitudeMin: coordinates[0],
            latitudeMin: coordinates[1],
            longitudeMax: coordinates[2],
            latitudeMax: coordinates[3],
            destTaskId: that.desttskId,
            destTableName: that.desttabName,
          },
        }).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.drawSelectLayer(geojsonObject);
            } else {
              that.$message.info("获取当前范围内数据为空！");
            }
          } else if (response.data.status == "401") {
            that.$alert(response.data.message);
            that.$router.push({ path: "/login" });
          }
        });
      }
    },
    drawSelectLayer(geojsonObject) {
      if (this.clusters) {
        this.map.removeLayer(this.clusters);
        this.clusters = null;
      }
      if (this.vectorLayer) {
        this.map.removeLayer(this.vectorLayer);
        this.map.removeInteraction(this.selectclick);
        this.vectorLayer = null;
        this.selectclick = null;
      }
      this.vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
      });
      var allfearures = this.vectorSource.getFeatures();
      for (var i = 0; i < allfearures.length; i++) {
        allfearures[i].setId(allfearures[i].get("id"));
      }
      var selectNum = 0;
      var styleAll = [];
      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: "rgba(173,216,230)",
            width: 3,
          }),
        }),
        Polygon: new Style({
          stroke: new Stroke({
            color: "blue",
            lineDash: [4],
            width: 3,
          }),
          fill: new Fill({
            color: "rgba(0, 0, 255, 0.1)",
          }),
        }),
      };
      styleAll.push(styles);
      if (allfearures.length > 0) {
        selectNum = allfearures[0].get("selectNum");
      }
      for (var i = 0; i < selectNum; i++) {
        var randomnum1 = Math.random();
        var randomnum2 = Math.random();
        var randomnum3 = Math.random();
        var stylerandom = {
          Point: new Style({
            image: new CircleStyle({
              radius: 7,
              fill: new Fill({
                color: [
                  255 * randomnum1,
                  255 * randomnum2,
                  255 * randomnum3,
                  0.8,
                ],
              }),
              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: [
                255 * randomnum1,
                255 * randomnum2,
                255 * randomnum3,
                0.8,
              ],
            }),
            text: new Text({
              text: (i + 1).toString(),
              font: "16px Microsoft YaHei",
              fill: new Fill({
                color: "#fff",
              }),
              stroke: new Stroke({
                color: "rgba(0, 0, 0, 0.6)",
                width: 3,
              }),
            }),
          }),
          LineString: new Style({
            stroke: new Stroke({
              color: [
                255 * randomnum1,
                255 * randomnum2,
                255 * randomnum3,
                0.8,
              ],
              width: 3,
            }),
            text: new Text({
              text: (i + 1).toString(),
              font: "16px Microsoft YaHei",
              fill: new Fill({
                color: "#fff",
              }),
              stroke: new Stroke({
                color: "rgba(0, 0, 0, 0.6)",
                width: 3,
              }),
            }),
          }),
          Polygon: new Style({
            stroke: new Stroke({
              color: "blue",
              lineDash: [4],
              width: 3,
            }),
            fill: new Fill({
              color: [
                255 * randomnum1,
                255 * randomnum2,
                255 * randomnum3,
                0.8,
              ],
            }),
            text: new Text({
              text: (i + 1).toString(),
              font: "16px Microsoft YaHei",
              fill: new Fill({
                color: "#fff",
              }),
              stroke: new Stroke({
                color: "rgba(0, 0, 0, 0.6)",
                width: 3,
              }),
            }),
          }),
        };
        styleAll.push(stylerandom);
      }
      var styleFunction = function (feature) {
        return styleAll[parseInt(feature.get("selectOrder"))][
          feature.getGeometry().getType()
        ];
      };
      this.vectorLayer = new VectorLayer({
        id: "vectorlayer",
        source: this.vectorSource,
        style: styleFunction,
      });
      this.vectorLayer.setZIndex(4);
      this.map.addLayer(this.vectorLayer);
      this.isVectorLayer = true;

      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,
          }),
        }),
      });
      let this1 = this;
      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);
    },
  },
  mounted() {
    // 从 store 获取数据
    const taskData = this.$store.state.taskData.selectAll || [];
    that.taskList = taskData;
        if (that.taskList.length) that.listQuery.taskId = that.taskList[0].id;
        that.chooseTask(that.listQuery.taskId);
  },
  watch: {
    activeItem: {
      handler() {
        if (this.activeItem != "2") {
          this.disconnect();
          this.clearTrackLine();
          this.trackLayerOverLay.setPosition(undefined);
        } else if (
          this.activeItem == 2 &&
          this.activePositionType === "realPosition"
        )
          if (this.activeItem != "3") {
            this.cancelNavigate();
          }
        if (this.activeItem != "1") {
          if (this.pageLayer) {
            this.map.removeLayer(this.pageLayer);
            this.map.removeInteraction(this.selectclick1);
            this.pageLayer = null;
            this.selectclick1 = null;
          }
          this.currentFeatureId = "";
          this.dataInfo = [];
          this.dataCoordinates = [];
          this.examInfo = {};
          this.examData = [];
          this.dataPageNum = 1;
          this.getList = true;
          this.isSearch = false;
          this.dialogVisible = false;
          this.range = false;
          this.distribute = false;
          if (this.vectorLayer) {
            if (this.isVectorLayer) {
              this.map.removeLayer(this.vectorLayer);
              this.map.removeInteraction(this.selectclick);
            }
            this.vectorLayer = null;
            this.Info = {};
          }
          if (this.cellLayer) {
            this.map.removeLayer(this.cellLayer);
            this.cellLayer = null;
          }
          if (this.clusters) {
            this.map.removeLayer(this.clusters);
            this.clusters = null;
          }
        }
      },
    },
    activePositionType: {
      handler() {
        if (
          this.activeItem === "2" &&
          this.activePositionType === "realPosition"
        ) {
          // this.getRealPoint();
        } else {
          this.disconnect();
        }
      },
    },
    currentPlan: {
      handler() {
        if (this.currentPlan == "bus") {
          this.addPlanItemOnMap(this.busPlanItems[0]);
        } else if (this.currentPlan == "riding") {
          this.addPlanItemOnMap(this.ridingPlanItems[0]);
        } else if (this.currentPlan == "driving") {
          this.addPlanItemOnMap(this.drivingPlanItems[0]);
        }
      },
    },
    dialogVisible: {
      handler() {
        if (this.dialogVisible == false) {
          if (this.activeName1 == "1") {
            this.getClusters();
          } else if (this.activeName1 == "2") {
            this.getSelectClusters();
          }
          this.clearAll();
        }
      },
    },
    activeName1: {
      handler() {
        if (this.clusters) {
          this.map.removeLayer(this.clusters);

          this.clusters = null;
        }
        if (this.vectorLayer) {
          this.map.removeLayer(this.vectorLayer);
          this.map.removeInteraction(this.selectclick);

          this.vectorLayer = null;
          this.selectclick = null;
        }
        this.distribute = false;
        this.currentFeatureId = "";
      },
    },
    currentFeatureId: {
      handler() {
        if (this.vectorLayer && this.currentFeatureId !== "") {
          this.setCurrentStyle();
        }
        if (this.pageLayer && this.currentFeatureId !== "" && this.isSearch) {
          this.setCurrentStyle1();
        }
        if (this.pageLayer && this.currentFeatureId !== "" && this.isSearch1) {
          this.setCurrentStyle2();
        }
        if (this.pageLayer && this.currentFeatureId !== "" && this.isSearch2) {
          this.setCurrentStyle3();
        }
      },
    },
    distribute: {
      handler() {
        if (this.distribute == true) {
          if (this.pageLayer) {
            this.map.removeLayer(this.pageLayer);
            this.map.removeInteraction(this.selectclick1);
            this.pageLayer = null;
            this.selectclick1 = null;
          }
          this.currentFeatureId = "";
          this.examInfo = {};
          this.examData = [];
          this.dataPageNum = 1;
          this.getList = true;
          this.isSearch = false;
        } else {
          this.isTextShow = false;
        }
      },
    },
    isTextShow: {
      handler() {
        if (this.distribute) {
          if (this.isTextShow) {
            this.vectorLayer.setStyle(this.styleFunction1);
          } else {
            this.vectorLayer.setStyle(this.styleFunction2);
          }
        } else {
          this.isTextShow = false;
        }
      },
      immediate: true,
    },
  },
  store,
};
</script>

<style scoped lang="scss">
// .el-input__inner {
//   >>> &::placeholder {
//     font-family: PingFangSC-Regular;
//     font-size: 14px;
//     color: #ffffff !important;
//   }
// }
// >>> .el-input--suffix .el-input__inner {
//   background: #9dbbe7 !important;
//   color: #fff;
// }
// >>> .el-input__prefix,
// .el-input__suffix {
//   color: #fff !important;
// }
// >>> .el-input.is-disabled .el-input__icon {
//   color: #fff;
// }
// >>> .el-select .el-input .el-select__caret {
//   color: #fff;
// }

.taskChoser {
  margin: 2px 0px 2px 0px;
}
.searchInput {
  width: 220px !important;
  margin: 10px 0px 10px 40px;
}
.searchResult {
  width: 280px;
  height: auto;
  border: 1px solid #ebebeb;
  margin-left: 20%;
  margin-top: -10px;
  cursor: pointer;
}
.plans {
  width: 95%;
  height: auto;
  border: 1px solid #ebebeb;
  margin: auto;
  /*cursor: pointer;*/
}
.searchResult div:hover {
  background-color: #ebebeb;
}
.planItems div:hover {
  background-color: #ebf1fb;
}

.search-item-wrap {
  margin-top: 6px;
  margin-bottom: 14px;
}
.search-item-label {
  font-size: 14px;
}
.search-time-wrap {
  width: 217px;
  margin: 0 auto;
}
.view-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 9px;
  border-radius: 18px;
  border: 1px solid #cccccc;
  bottom: 11px;
  left: -35px;
  text-align: center;
}
.view-popup:after,
.view-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.view-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 25px;
}
.view-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 25px;
}
.team-legend {
  display: flex;
  align-items: center;
  flex-flow: column;
}
.el-checkbox {
  margin-right: 0px;
  padding-bottom: 5px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #264672;
  width: 45%;
}

.team-legend-item {
  justify-content: center;
}
.team-legend-mark {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #000000;
  display: inline-block;
  margin-right: 13px;
}
.team-legend-text {
  color: #000000;
  font-size: 13px;
  position: relative;
  top: 1px;
  line-height: 13px;
}
.mylabel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 8px 0;
  padding: 4px 14px;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1B5E20;
  border-radius: 12px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.mylabel .label-text {
  display: inline-block;
  min-width: 60px;
  flex-shrink: 0;
  text-align: right;
}

.mylabel ::v-deep .el-select,
.mylabel ::v-deep .el-input {
  flex: 1;
  min-width: 220px;
}

#leftPanelScroll :deep(.el-collapse-item__content) {
  padding: 0 !important;
}

#leftPanelScroll :deep(.el-collapse .el-collapse-item__content) {
  padding: 0 !important;
}

#leftPanelScroll :deep(.el-collapse-item__wrap .el-collapse-item__content) {
  padding: 0 !important;
}
</style>

<style lang="scss">
/* 全局样式：覆盖 ViewTask 页面中的 collapse content padding */
#leftPanelScroll .el-collapse-item__content {
  padding: 0 !important;
}

#leftPanelScroll .el-collapse .el-collapse-item__wrap .el-collapse-item__content {
  padding: 0 !important;
}

#leftPanelScroll .el-collapse-item__wrap .el-collapse-item__content {
  padding: 0 !important;
}
</style>
