<template>
  <div class="payoff">
    <el-row type="flex" style="width: 100%; height: 100%">
      <el-col class="left-col">
        <vue-scroll>
          <div class="scroll">
            <div class="list-wrapper">
              <div
                v-for="(item, index) in operationList"
                :key="item.id"
                :class="['list-item', { 'is-active': activeIndex == index }]"
                @click="handleItemClick(index)"
              >
                <span class="title">{{ item.operationName }}</span>
              </div>
            </div>
          </div>
        </vue-scroll>
      </el-col>
      <el-col class="right-col">
        <el-row style="width: 100%; height: 100%">
          <el-col class="top-col" :span="4" :class="styleType == 3 ? 'changeStyle' : ''">
            <el-form
              size="medium"
              :model="queryParams"
              ref="queryForm"
              :inline="true"
            >
            <el-form-item label="选择设备" prop="devSn">
                <el-select
                  v-model="queryParams.devSn"
                  placeholder="请选择"
                  clearable
                  filterable
                >
                <el-option
              v-for="(item, index) in allUfaceDev"
              :key="item.id"
              :label="item.equipmentName"
              :value="item.devSn"
            ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间" prop="uploadTime">
                <el-date-picker
                  v-model="queryParams.uploadTime"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="handleQuery">查询</el-button>
                <el-button type="warning" plain @click="handleRefresh">刷新</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  v-permission="{
                    key: 'demonGeneration',
                    menuPath:
                      '/project/operationManagement/mechanicalEquipmentPositioning',
                  }"
                  type="primary"
                  @click="ruleConfigDialog"
                  >演示数据生成</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  v-permission="{
                    key: 'datchDelete',
                    menuPath:
                      '/project/operationManagement/mechanicalEquipmentPositioning',
                  }"
                  type="primary"
                  @click="deleteAttendanceBatch"
                  >批量删除</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col
            class="bottom-col"
            :span="20"
            :class="styleType == 3 ? 'bottomTwo' : ''"
          >
            <div class="scroll" :class="styleType == 3 ? 'boxBottom' : ''">
              <el-table
                :max-height="570"
                :height="570"
                ref="multipleTable"
                v-loading="loading"
                :data="userList"
                class="tables table-box"
                :key="activeIndex"
                :class="{'scrollbar-exists': scrollbarFlag}"
              >
                                <template slot="empty">
                    <el-empty :image="require('@/assets/images/noData4.png')" :image-size="100" description="暂无数据"></el-empty>
                </template>
                <el-table-column type="selection" align="center" width="55"></el-table-column>
                <el-table-column label="设备名称" align="center" prop="equipmentName">
                  <template #default="{ row }">
                    <span>{{ row.equipmentName }}</span>
                  </template>
                </el-table-column>
                <template v-if="activeIndex == 0">
                  <el-table-column label="上报时间" align="center" prop="uploadTime" />
                  <el-table-column
                    label="设备电量"
                    align="center"
                    prop="equipmentPower"
                  />
                  <el-table-column
                    label="设备电压"
                    align="center"
                    prop="equipmentVoltage"
                  />
                  <el-table-column label="当前位置维度x" align="center" prop="latitude" />
                  <el-table-column
                    label="当前位置经度y"
                    align="center"
                    prop="longitude"
                  />
                  <el-table-column label="速度" align="center" prop="speed" />
                  <el-table-column label="工作状态" align="center" prop="workStatus">
                    <template #default="{ row }">
                      <span>{{ workStatusUp(row.workStatus) }}</span>
                    </template>
                  </el-table-column>
                </template>
                <template v-if="activeIndex == 1">
                  <el-table-column label="上报时间" align="center" prop="alarmTime" />
                  <el-table-column label="报警信息" align="center" prop="alarmInfo">
                    <template #default="{ row }">
                      <span>{{ row.alarmInfo }}</span>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column label="操作" align="center">
                  <template #default="{ row }">
                    <el-button
                      v-permission="{
                        key: 'edit',
                        menuPath:
                          '/project/operationManagement/mechanicalEquipmentPositioning',
                      }"
                      style="border: 0 !important"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleUpdate(row)"
                      >编辑</el-button
                    >
                    <el-button
                      v-permission="{
                        key: 'delete',
                        menuPath:
                          '/project/operationManagement/mechanicalEquipmentPositioning',
                      }"
                      style="border: 0 !important; color: #f56c6c"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-row type="flex" justify="center">
                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNo"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                  :pageSizes="[...$store.state.PAGESIZRS, 100, 200, 500, 1000]"
                  layout="total,sizes, prev, pager, next, jumper"
                />
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="open" width="600px" append-to-body title="编辑">
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editFormRules"
        size="medium"
        label-width="200px"
      >
        <el-form-item label="选择设备" prop="devSn">
          <el-select v-model="editForm.devSn" placeholder="请选择" clearable filterable>
            <el-option
              v-for="(item, index) in allUfaceDev"
              :key="item.id"
              :label="item.equipmentName"
              :value="item.devSn"
            ></el-option>
          </el-select>
        </el-form-item>
        <template v-if="activeIndex == 1">
          <el-form-item label="报警时间" prop="alarmTime">
            <el-date-picker
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="报警时间"
              v-model="editForm.alarmTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="报警信息" prop="alarmInfo">
            <el-input
              type="textarea"
              v-model="editForm.alarmInfo"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </template>
        <template v-if="activeIndex == 0">
          <el-form-item label="当前位置维度x" prop="latitude">
            <el-input-number
              :controls="false"
              v-model="editForm.latitude"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="当前位置经度y" prop="longitude">
            <el-input-number
              :controls="false"
              v-model="editForm.longitude"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="设备电量" prop="equipmentPower">
            <el-input-number
              :controls="false"
              v-model="editForm.equipmentPower"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="设备电压" prop="equipmentVoltage">
            <el-input-number
              :controls="false"
              v-model="editForm.equipmentVoltage"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="速度" prop="speed">
            <el-input-number :controls="false" v-model="editForm.speed"></el-input-number>
          </el-form-item>
          <el-form-item label="工作状态" prop="workStatus">
            <el-select
              v-model="editForm.workStatus"
              placeholder="请选择"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in deviceStateList"
                :key="item.deviceStateId"
                :label="item.deviceStateName"
                :value="item.deviceStateId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传时间" prop="uploadTime">
            <el-date-picker
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="上传时间"
              v-model="editForm.uploadTime"
            ></el-date-picker>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
    <!-- 下载模拟数据弹窗 -->
    <el-dialog
      :visible.sync="downSimulateShow"
      width="600px"
      append-to-body
      title="下载模拟数据"
    >
      <el-radio-group class="simulate_box" v-model="staffSimulateRadio">
        <el-radio
          :label="item.staffSimulateId"
          v-for="item in staffSimulateList"
          :key="item.staffSimulateId"
          >{{ item.staffSimulateName }}</el-radio
        >
      </el-radio-group>
      <div slot="footer">
        <el-button @click="downSimulateShow = false">取消</el-button>
        <el-button type="primary" @click="submitDownSimulate">确定</el-button>
      </div>
    </el-dialog>
    <!-- 演示数据生成弹窗 -->
    <el-dialog
      :visible.sync="ruleConfigShow"
      width="800px"
      append-to-body
      title="规则配置"
      class="ruleConfig_box"
    >
      <el-form
        ref="ruleConfigForm"
        :model="ruleConfigForm"
        :rules="ruleConfigFormRules"
        size="medium"
        label-width="160px"
      >
        <el-form-item label="选择设备" prop="devSns">
          <el-checkbox-group v-model="ruleConfigForm.devSns">
            <el-checkbox
              :label="item.devSn"
              v-for="item in allUfaceDev"
              :key="item.devSn"
              >{{ item.equipmentName }}</el-checkbox
            >
          </el-checkbox-group>
          <!-- <el-select
            v-model="ruleConfigForm.devSns"
            placeholder="请选择"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="(item, index) in personList"
              :key="item.id"
              :label="`${item.workerName}(${item.devSn})`"
              :value="item.devSn"
            ></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="数据量" prop="devGenerateNum">
          <span class="mr_8">所选设备每个设备随机生成</span
          ><el-input-number
            v-model="ruleConfigForm.devGenerateNum"
            :min="0"
            :max="999"
          ></el-input-number
          ><span class="ml_8">条数据</span>
        </el-form-item>
        <el-form-item
          :label="activeIndex == 0 ? '模拟报警时间范围' : '模拟报警时间范围'"
          prop="startTime"
        >
          <div class="flex">
            <el-form-item prop="startTime">
              <el-date-picker
                :picker-options="handleTimeChange(ruleConfigForm.endTime, 'startTime')"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="开始时间"
                v-model="ruleConfigForm.startTime"
              ></el-date-picker>
            </el-form-item>
            <span class="mr_8 ml_8">至</span>
            <el-form-item prop="endTime">
              <el-date-picker
                :picker-options="handleTimeChange(ruleConfigForm.startTime, 'endTime')"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="结束时间"
                v-model="ruleConfigForm.endTime"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item v-if="activeIndex == 0" label="数据范围" prop="rangeType">
          <div class="ruleconfig_staff">
            <el-form-item
              label-width="120px"
              :label="item.label"
              v-for="item in scopeData"
              :key="item.id"
            >
              <el-input-number
                placeholder="小"
                :controls="false"
                v-model="item.minValue"
                :max="item.maxValue ? item.maxValue : Infinity"
                controls-position="right"
              ></el-input-number>
              <span class="mr_8 ml_8">~</span>
              <el-input-number
                :controls="false"
                :min="item.minValue ? item.minValue : -Infinity"
                v-model="item.maxValue"
                controls-position="right"
                placeholder="大"
              ></el-input-number>
            </el-form-item>
          </div>
          <el-form-item label-width="120px" label="工作状态" prop="workStatuses">
            <el-checkbox-group v-model="ruleConfigForm.workStatuses">
              <el-checkbox
                v-for="item in deviceStateList"
                :key="item.deviceStateId"
                :label="item.deviceStateId.toString()"
                >{{ item.deviceStateName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label-width="120px" label="经纬度">
            <el-button @click="selectionAreaDialog" type="primary" plain
              >框选区域</el-button
            >
            {{ selectionAreaInfo.rangeType == 1 ? "标准区域" : "自定义区域" }}
          </el-form-item>
        </el-form-item>
        <el-form-item v-else-if="activeIndex == 1" label="报警信息" prop="alarmInfo">
          <el-input
            type="textarea"
            v-model="ruleConfigForm.alarmInfo"
            placeholder="请输入内容"
          ></el-input>
          <!-- <el-checkbox-group v-model="ruleConfigForm.alarmTypes">
            <el-checkbox
              :label="item.value.toString()"
              v-for="item in safetyHatAlarmTypeList"
              :key="item.value"
              >{{ item.desc }}</el-checkbox
            >
          </el-checkbox-group>
          <el-form-item prop="rangeType">
            经纬度
            <el-button @click="selectionAreaDialog" type="primary" plain
              >框选区域</el-button
            >
            {{ selectionAreaInfo.rangeType == 1 ? "标准区域" : "自定义区域" }}
          </el-form-item> -->
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button
          :loading="ruleConfigLoading"
          type="primary"
          @click="submitRuleConfigForm"
          >{{ ruleConfigLoading ? "正在生成数据，请耐心等待!" : "开始生成" }}</el-button
        >
        <el-button type="primary" @click="ruleConfigReset">重置配置</el-button>
        <el-button @click="ruleConfigCancel">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="positioningMapDialog"
      width="1100px"
      append-to-body
      title="定位地图"
      class="ruleConfig_box"
    >
      <div class="map-top">
        <div class="map-box" id="mapContainer"></div>
        <div class="wei-lan" v-if="checked === 1">
          <!-- @click="openFence" -->
          <div class="icon-off" v-if="!fenceShow" @click="openFenceCreate">
            <img src="@/assets/images/carPosition/iconOff.png" alt="" />
            <div>围栏</div>
          </div>
          <div class="icon-on" v-if="fenceShow" @click="fenceShow = false">
            <img src="@/assets/images/carPosition/iconOn.png" alt="" />
            <div>围栏</div>
          </div>
          <!-- **********************围栏弹窗******************************** -->
          <div class="fenceDialog" v-if="fenceShow || fenceCreateShow">
            <!-- <div class="fence-dialog-modal" v-if="fenceCreateShow"></div> -->
            <!-- <div class="fence-box">
                <div class="close-icon" @click="closeFence">
                  <i
                    class="el-icon-close"
                    style="font-size: 22px; color: #919398"
                  ></i>
                </div>
                <div class="fence-title">围栏</div>
                <div class="fence-tool">
                  <div class="tool" @click="openFenceCreate">创建围栏</div>
                  <div class="tool" @click="deleteFence">删除围栏</div>
                </div>
                <div class="fence-select">
                  <el-input
                    v-model="fenceSearch"
                    placeholder="请输入"
                    size="small"
                    clearable
                    @change="fenceNameChange"
                  ></el-input>
                </div>
                <div class="fence-radio" v-if="fenceList.length > 0">
                  <el-checkbox
                    :indeterminate="isIndeterminateFence"
                    v-model="checkAllFence"
                    @change="fenceAllChange"
                    >全选</el-checkbox
                  >
                  <vue-scroll>
                    <div style="margin: 5px 0"></div>
                    <el-checkbox-group
                      v-model="checkedFence"
                      @change="fenceCitiesChange"
                    >
                      <div v-for="item in fenceList" :key="item.id">
                        <el-checkbox :label="item.id" :key="item.id"
                          >{{ item.fenceName }}
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </vue-scroll>
                </div>
                <div v-else style="text-align: center; margin-top: 100px">
                  暂无围栏
                </div>
              </div> -->
            <!-- 创建围栏弹窗 -->
            <div class="fenceCreate" v-if="fenceCreateShow">
              <!-- <div class="fence-modal"></div> -->
              <div class="fenceCrete-box">
                <div class="close-icon" @click="closeFenceCreate">
                  <i class="el-icon-close" style="font-size: 22px; color: #919398"></i>
                </div>
                <div class="fence-title">创建围栏</div>
                <el-form
                  size="medium"
                  :model="addForm"
                  ref="addForm"
                  label-width="80px"
                  :rules="formFenceRules"
                >
                  <!-- <el-form-item label="围栏名称" prop="fenceName">
                      <el-input
                        v-model="addForm.fenceName"
                        placeholder="请输入"
                      ></el-input>
                    </el-form-item> -->

                  <el-form-item label="范围类型" prop="rangeType">
                    <el-radio-group
                      v-model="addForm.rangeType"
                      style="
                        display: flex;
                        justify-content: space-between;
                        padding-top: 10px;
                        padding-right: 10px;
                      "
                      @change="changeAreaType"
                    >
                      <el-radio :label="1">标准区域</el-radio>
                      <el-radio :label="2">自定义</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="区域半径"
                    prop="areaRadius"
                    v-if="addForm.rangeType === 1"
                  >
                    <el-input
                      type="number"
                      v-model="addForm.areaRadius"
                      placeholder="请输入"
                      :maxlength="5"
                      @input="areaRadiusChange"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="围栏形状"
                    prop="fenceShape"
                    v-if="addForm.rangeType === 2"
                  >
                    <div class="fence-shape">多边形</div>
                  </el-form-item>
                  <div class="create-footer">
                    <el-button
                      class="cancleBtn"
                      @click="handleCancel"
                      icon="el-icon-circle-close"
                      size="medium"
                      >{{ $t("message.alarmValueSet.cancel") }}
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-circle-check"
                      @click="submitFence"
                      size="medium"
                      >{{ $t("message.alarmValueSet.save") }}
                    </el-button>
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </div>
        <!-- **********************围栏弹窗******************************** -->

        <div class="start-track" @click="startAnimation" v-if="checked === 2">
          开始轨迹动画
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  enterpriseList,
  teamList,
  departmentList,
  payrollRecord,
  exportSalaryPdf,
  exportSalaryExcel,
  updateWorkerWagesPayment,
} from "@/assets/js/api/laborManagement/payoff";

import {
  exportAttendanceExcel,
  deleteBatchMechanicalEquipmentPositionDataApi,
  editMechanicalEquipmentPositionDataApi,
  mockDataMechanicalEquipmentPositionDataApi,
  getDepartmentAndTeamListApi,
  getMockMechanicalEquipmentPositionDataConfigApi,
  saveMockSafetyHatDataConfigApi,
  resetMockMechanicalEquipmentPositionDataConfigApi,
  saveMockSafetyHatAlarmConfigApi,
  resetMockMechanicalEquipmentPositionAlarmConfigApi,
  getMockMechanicalEquipmentPositionAlarmConfigApi,
  editMechanicalEquipmentPositionAlarmApi,
  deleteBatchMechanicalEquipmentPositionAlarmApi,
  mockDataMechanicalEquipmentPositionAlarmApi,
  getSafetyHatAlarmTypeApi,
} from "@/assets/js/api/operationManagement";
import {
  getWorkerInfoList,
  getPageListApi,
  getEnterpriseInfoList,
} from "@/assets/js/api/laborPerson";
import {
  getSafeHatPayDataPageApi,
  getSafeHatAlarmRecordPageApi,
  getSafeHatEquipmentCentralPageApi,
} from "@/assets/js/api/smartSafeHat/smartSafeHat.js";
import {
  getEquipmentPayDataPageApi,
  getEquipmentListApi,
  getEquipmentAlarmRecordPageApi,
} from "@/assets/js/api/devicePosition/equipmentPosition";
// 围栏相关API
import {
  getFenceTypeTotal,
  getVehiclePositionFence,
  addVehiclePositionFence,
  editVehiclePositionFence,
  deleteVehiclePositionFence,
  deleteBatchVehiclePositionFence,
  getAlarmRecordInfo,
} from "@/assets/js/api/carManage";
import dayjs from "dayjs";
import { nowDate } from "@/util";
import { isJSON } from "@/util/nowDate";
var mouseTool;
var marker;
var lineArr;
var mapInstance;
var map;
export default {
  data: () => ({
    // 定位地图
    circleMapData: [], // 圆形围栏存放
    shapeMapData: [], // 多边形围栏存放
    devTypeTotal: {},
    fenceCreateShow: false, //创建围栏弹窗
    fenceList: ["围栏1", "围栏2", "围栏3", "围栏4", "围栏5"],
    fenceSearch: "", // 围栏搜索
    fenceShow: false, //打开围栏弹窗
    dayValue: new Date(),
    nameOptions: [],
    checkAll: false,
    checkAllFence: false,
    checkedCities: [],
    checkedFence: [],
    devList: ["鲁U6675", "刘江", "蒋东", "鲁U9675"],
    isIndeterminate: true,
    isIndeterminateFence: true,
    checked: 1,
    devName: "",
    carStateType: "",
    locationList: [],
    addForm: {
      areaRadius: 100, //区域半径
      fenceName: "", //围栏名称
      addr: "",
      rangeType: 1,
      locationList: [
        {
          fenceId: 0,
          id: 0,
          latitude: "",
          longitude: "",
          sortNum: 0,
        },
      ],
      projectSn: "",
      enterpriseId: "",
    },
    formFenceRules: {
      // fenceName: [
      //     {
      //     required: true,
      //     message: this.$t('message.personnelPosition.required'),
      //     trigger: 'blur'
      //     },
      //     { min: 1, max: 20, message: this.$t('message.alarmValueSet.message1'), trigger: 'blur' }
      // ], // 长度在 1 到 20 个字符
      // areaRadius: [
      //     {
      //     required: true,
      //     message: this.$t('message.personnelPosition.required'),
      //     trigger: 'change'
      //     }
      // ]
    },
    selectionAreaInfo: {},
    pagInfo: {
      pageNo: 1, //页数
      pageSize: 10, //条数
      total: 0, //总条数
    },
    positioningMapDialog: false,
    // 模拟数据下载弹窗
    downSimulateShow: false,
    staffSimulateRadio: 50,
    staffSimulateList: [
      {
        staffSimulateId: 50,
        staffSimulateName: "人员模拟数据(50)人.zip",
      },
      {
        staffSimulateId: 100,
        staffSimulateName: "人员模拟数据(100)人.zip",
      },
      {
        staffSimulateId: 500,
        staffSimulateName: "人员模拟数据(500)人.zip",
      },
      {
        staffSimulateId: 1000,
        staffSimulateName: "人员模拟数据(1000)人.zip",
      },
    ],
    checkAll: false,
    isIndeterminate: true,
    ruleConfigLoading: false,
    isDepartmentTeamList: [],
    personList: [],
    allUfaceDev: [],
    // 演示数据生成弹窗
    ruleConfigShow: false,
    ruleConfigForm: {
      devSns: [],
      devGenerateNum: "",
      startTime: "",
      endTime: "",
      rangeType: "",
      alarmInfo: "",
      workStatuses: [],
      alarmTypes: [],
    },
    ruleConfigFormRules: {
      devSns: [
        {
          type: "array",
          required: true,
          message: "请至少选择一个设备",
          trigger: "change",
        },
      ],
      devGenerateNum: [{ required: true, message: "请输入数据量", trigger: "blur" }],
      startTime: [
        {
          required: true,
          message: "请选择模拟开始时间",
          trigger: "change",
        },
      ],
      endTime: [
        {
          required: true,
          message: "请选择模拟结束时间",
          trigger: "change",
        },
      ],
      alarmTypes: [
        {
          type: "array",
          required: true,
          message: "请至少选择一个报警状态",
          trigger: "change",
        },
      ],
      rangeType: [
        {
          required: true,
          message: "请选择数据范围",
          trigger: "blur",
        },
      ],
    },
    deviceStateList: [
      {
        deviceStateId: 1,
        deviceStateName: "ACC开(工作状态)",
      },
      {
        deviceStateId: 2,
        deviceStateName: "ACC关(怠速状态)",
      },
    ],
    scopeData: [
      {
        id: 1,
        label: "设备电量",
        minValue: "",
        maxValue: "",
      },
      {
        id: 2,
        label: "设备电压",
        minValue: "",
        maxValue: "",
      },
      {
        id: 3,
        label: "速度",
        minValue: "",
        maxValue: "",
      },
    ],
    // 3 衢州版 2 星璇版 1 正常版本
    styleType: "",
    // 项目SN
    projectSn: "",
    // 弹窗标题
    title: "",
    // 控制弹窗的打开与关闭
    open: false,
    // 遮罩层
    loading: false,
    // 当前激活的项目
    activeIndex: 0,
    // 项目列表
    operationList: [
      {
        operationId: 1,
        operationName: "实时数据",
      },
      {
        operationId: 2,
        operationName: "报警数据",
      },
    ],
    // 总条数
    total: 1,
    // 用户数据
    userList: [],
    // 班组列表选项
    teamOptions: [],
    // 部门列表选项
    departmentOptions: [],
    // 查询参数
    queryParams: {
      pageNo: 1,
      pageSize: 10,
      projectSn: undefined, // 项目SN
      enterpriseId: undefined, // 企业ID

      teamName: undefined,
      departmentId: undefined,
      payStatus: undefined,
      payMonth: undefined,
      workerName: undefined,
      idCard: undefined,
      uploadTime: [], // 报警时间
      devSn: "",
    },
    editForm: {},
    editFormRules: {
      devSn: [{ required: true, message: "请选择设备", trigger: "change" }],
      latitude: [{ required: true, message: "请输入维度", trigger: "blue" }],
      longitude: [{ required: true, message: "请输入经度", trigger: "blue" }],
      alarmType: [{ required: true, message: "请选择报警类型", trigger: "change" }],
      alarmTime: [{ required: true, message: "请选择报警时间", trigger: "change" }],
      uploadTime: [{ required: true, message: "请选择上传时间", trigger: "change" }],
      workStatus: [{ required: true, message: "请选择工作状态", trigger: "change" }],
    },
    enterpriseListData: [],
    safetyHatAlarmTypeList: [],
    scrollbarFlag: false,
  }),
  computed: {
    headers() {
      return { Authorization: this.$store.state.userInfo.token };
    },
    alarmTypeUp() {
      return (alarmType) => {
        const resultList = [...this.safetyHatAlarmTypeList];
        const find = resultList.find((item) => item.value == alarmType);
        return find ? find.desc : "";
      };
    },
    workStatusUp() {
      return (workStatus) => {
        const resultList = [...this.deviceStateList];
        const find = resultList.find((item) => item.deviceStateId == workStatus);
        return find ? find.deviceStateName : "";
      };
    },
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.queryParams.payMonth = nowDate();
    this.styleType = this.$store.state.userInfo.styleType;
    // 查询企业列表
    this.getEnterpriseList();
    this.getPersonListFn();
    this.getMachineList();
    this.getCompanyList();
    this.getFenceList();
    // this.getSafetyHatAlarmType();
  },
  methods: {
    handleTimeChange(diffTime, type) {
      return {
        disabledDate: (time) => {
          // console.log(time, diffTime, type)
          const date1 = dayjs(time);
          const date2 = dayjs(diffTime);
          if (type == "startTime") {
            return date1.diff(date2) > 0 ? true : false;
          } else if (type == "endTime") {
            return date2.diff(date1) > 0 ? true : false;
          }
          return false;
        },
      };
    },
    getSafetyHatAlarmType() {
      getSafetyHatAlarmTypeApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.safetyHatAlarmTypeList = res.result;
      });
    },
    selectionAreaDialog() {
      this.addForm.areaRadius = this.selectionAreaInfo.areaRadius
        ? this.selectionAreaInfo.areaRadius
        : 100;
      this.addForm.rangeType = this.selectionAreaInfo.rangeType
        ? this.selectionAreaInfo.rangeType
        : 1;
      this.$nextTick(() => {
        setTimeout(() => {
          this.initMap();
          if (this.selectionAreaInfo.rangeType === 1) {
            this.echoCircle(this.selectionAreaInfo);
            // this.drawCircle();
          } else if (this.selectionAreaInfo.rangeType === 2) {
            this.echoDrawPolygon(this.selectionAreaInfo);
            // this.drawPolygon();
          }
        }, 10);
      });
      this.positioningMapDialog = true;
    },
    // 定位地图
    handleCancel() {
      this.fenceCreateShow = false;
      this.closeFenceCreate();
    },

    // 获取围栏列表
    getFenceList() {
      let data = {
        fenceName: this.fenceSearch,
        projectSn: this.$store.state.projectSn,
      };
      getVehiclePositionFence(data).then((res) => {
        if (res.success) {
          this.fenceList = res.result;
          this.circleMapData = res.result.filter((item) => item.rangeType === 1);
          this.shapeMapData = res.result.filter((item) => item.rangeType === 2);
          console.log("围栏", this.circleMapData, this.shapeMapData);
        }
      });
    },
    areaRadiusChange() {
      if (this.addForm.locationList.length === 1) {
        this.drawCircle();
      }
    },
    submitFence() {
      if (this.locationList.length == 0) {
        this.$message.error("未设置围栏区域!");
        return;
      }
      this.addForm.locationList = this.locationList;
      console.log("新增围栏", this.addForm);
      let latitude = "";
      let longitude = "";
      let fenceShape = "";
      if (this.addForm.locationList.length === 1) {
        latitude = this.addForm.locationList[0].latitude;
        longitude = this.addForm.locationList[0].longitude;
      }
      if (this.addForm.locationList.length > 1) {
        for (let index = 0; index < this.addForm.locationList.length; index++) {
          const element = this.addForm.locationList[index];
          let currentStr = element.latitude + "|" + element.longitude;
          if (this.addForm.locationList.length - 1 > index) {
            currentStr = currentStr + ",";
          }
          fenceShape = fenceShape + currentStr;
        }
      }
      console.log("多边形", fenceShape);
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          let params = {
            fenceName: this.addForm.fenceName,
            areaRadius: this.addForm.areaRadius,
            fenceShapeArr: JSON.stringify(this.addForm.locationList),
            fenceShape: fenceShape,
            latitude: latitude,
            longitude: longitude,
            rangeType: this.addForm.rangeType,
            projectSn: this.$store.state.projectSn,
          };
          // params.alarmPushWorkerId = this.addForm.alarmPushWorkerId.join(',');

          this.selectionAreaInfo = params;
          this.ruleConfigForm.rangeType = this.addForm.rangeType;
          console.log("新增信息", params);
          // addVehiclePositionFence(params).then((res) => {
          //   if (res.success) {
          //     this.$message.success(res.message);
          //     this.getFenceList();
          //   }
          // });
          this.positioningMapDialog = false;
          this.closeFenceCreate();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //清空地图
    clearFn() {
      map.clearMap();
    },
    changeAreaType(e) {
      // console.log("切换选项",e);
      if (e === 1) {
        this.drawCircle();
      } else {
        this.drawPolygon();
      }
      this.locationList = [];
    },
    //添加点标记
    addMarker() {
      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(25, 34),
        // 图标取图偏移量
        // imageOffset: new AMap.Pixel(-9, -3)
      });
      var marker = new AMap.Marker({
        icon: startIcon,
        position: [this.locationList[0].longitude, this.locationList[0].latitude],
        size: new AMap.Size(25, 34),
        // offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(map);
    },
    exitEditFn() {
      mouseTool.close();
    },
    //画圆
    drawCircle() {
      if (this.locationList.length == 0) {
        return;
      }
      this.clearFn();
      this.addMarker();
      var circle = new AMap.Circle({
        center: [this.locationList[0].longitude, this.locationList[0].latitude],
        radius: this.addForm.areaRadius, //半径
        borderWeight: 2,
        strokeColor: "#6caffc",
        strokeOpacity: 1,
        strokeWeight: 2,
        fillOpacity: 0.6,
        strokeStyle: "solid",
        // strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: "#6caffc",
        zIndex: 50,
      });

      circle.setMap(map);
      // 缩放地图到合适的视野级别
      map.setFitView([circle]);
    },
    //绘制多边形
    drawPolygon() {
      this.clearFn();
      console.log("自定义绘制");
      mouseTool.polygon({
        strokeColor: "#6caffc",
        strokeOpacity: 1,
        strokeWeight: 2,
        // strokeOpacity: 0.2,
        fillColor: "#6caffc",
        fillOpacity: 0.6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      });
    },
    // 圆
    echoCircle(item) {
      // console.log("画圆",item)
      // 创建纯文本标记
      let text = new AMap.Text({
        text: item.fenceName,
        anchor: "center", // 设置文本标记锚点
        // draggable: true, // 是否拖拽
        cursor: "pointer",
        angle: 10,
        style: {
          padding: "10px",
          "border-radius": "10px",
          "background-color": "white",
          "border-width": 0,
          "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
          "text-align": "center",
          "font-size": "20px",
          color: "blue",
        },
        position: [item.longitude, item.latitude],
      });

      let circle = new AMap.Circle({
        center: [item.longitude, item.latitude],
        radius: item.areaRadius, //半径
        borderWeight: 2,
        strokeColor: "#6caffc",
        strokeOpacity: 1,
        strokeWeight: 2,
        fillOpacity: 0.6,
        strokeStyle: "solid",
        // strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: "#6caffc",
        zIndex: 50,
      });
      text.setMap(map);
      circle.setMap(map);
      // 缩放地图到合适的视野级别
      map.setFitView([circle]);
    },
    echoDrawPolygon(item) {
      // console.log("画多边形",item)
      let polygonPath = [];
      let polygonArr = JSON.parse(item.fenceShapeArr);
      for (let index = 0; index < polygonArr.length; index++) {
        const element = polygonArr[index];
        polygonPath.push([element.longitude, element.latitude]);
      }
      // console.log("多边形位置",polygonPath)

      // let path = [
      //   [116.403322, 39.920255],
      //   [116.410703, 39.897555],
      //   [116.402292, 39.892353],
      //   [116.389846, 39.891365]
      // ]
      let path = polygonPath;

      // 创建纯文本标记
      let text = new AMap.Text({
        text: item.fenceName,
        anchor: "center", // 设置文本标记锚点
        // draggable: true, // 是否拖拽
        cursor: "pointer",
        angle: 10,
        style: {
          padding: "10px",
          "border-radius": "10px",
          "background-color": "white",
          "border-width": 0,
          "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
          "text-align": "center",
          "font-size": "20px",
          color: "blue",
        },
        position: path[0],
      });

      let polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        zIndex: 50,
      });
      text.setMap(map);
      map.add(polygon);
      // 缩放地图到合适的视野级别
      map.setFitView([polygon]);
    },
    echoCarMarker(item) {
      //初始化地图对象，加载地图
      // let map = new AMap.Map("mapContainer", {resizeEnable: true});
      let lnglats = [[item.longitude, item.latitude]];

      function createMarkerAndInfoWindow() {
        for (let i = 0; i < lnglats.length; i++) {
          marker = new AMap.Marker({
            position: lnglats[i],
            map: map,
            icon: "https://webapi.amap.com/images/car.png", // 自定义图标
          });
          // marker.content = '我是第' + (i + 1) + '个Marker';
          marker.on("click", markerClick);
          marker.emit("click", { target: marker });
        }
      }

      // 使用逆地理编码获取地址信息
      let address = "未知";
      AMap.plugin("AMap.Geocoder", function () {
        let geocoder = new AMap.Geocoder();

        geocoder.getAddress(lnglats[0], function (status, result) {
          if (status === "complete" && result.info === "OK") {
            address = result.regeocode.formattedAddress; // 获取中文地址名称
            console.log("位置", address);
            createMarkerAndInfoWindow();
          } else {
            console.log("获取地址信息失败");
            createMarkerAndInfoWindow();
          }
        });
      });

      function markerClick(e) {
        let lnglat = e.target.getPosition();

        //构建信息窗体中显示的内容
        // console.log(e)
        let info = [];

        info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
        info.push('<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>");
        info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
        info.push('<p style="padding:7px;">位置: ' + address + "</p>");

        let infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(30, -30),
          content: info.join(""), //使用默认信息窗体框样式，显示信息内容
        });
        // console.log("信息窗体",infoWindow)
        infoWindow.open(map, e.target.getPosition());
      }
      map.setFitView();
    },
    echoPersonMarker(item) {
      let lnglats = [[item.longitude, item.latitude]];

      function createMarkerAndInfoWindow() {
        for (let i = 0; i < lnglats.length; i++) {
          let marker = new AMap.Marker({
            position: lnglats[0],
            map: map,
            icon: personOn, // 自定义图标
          });
          marker.on("click", markerClick);
          marker.emit("click", { target: marker });
        }
      }

      // 使用逆地理编码获取地址信息
      let address = "未知";
      AMap.plugin("AMap.Geocoder", function () {
        let geocoder = new AMap.Geocoder();

        geocoder.getAddress(lnglats[0], function (status, result) {
          if (status === "complete" && result.info === "OK") {
            address = result.regeocode.formattedAddress; // 获取中文地址名称
            console.log("位置", address);
            createMarkerAndInfoWindow();
          } else {
            console.log("获取地址信息失败");
            createMarkerAndInfoWindow();
          }
        });
      });

      function markerClick(e) {
        let lnglat = e.target.getPosition();

        //构建信息窗体中显示的内容
        console.log(e);
        let info = [];

        info.push('<p style="padding:7px;">设备序号:  ' + item.devSn + "</p>");
        info.push('<p style="padding:7px;">车辆/人员名称: ' + item.personName + "</p>");
        info.push('<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>");
        info.push('<p style="padding:7px;">位置: ' + address + "</p>");

        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(10, -30),
          content: info.join(""), //使用默认信息窗体框样式，显示信息内容
        });

        infoWindow.open(map, lnglat);
      }
      map.setFitView();
    },
    fenceAllChange(val) {
      this.clearFn();
      let nameArr = this.fenceList.map((item) => item.id);
      this.checkedFence = val ? nameArr : [];
      this.isIndeterminateFence = false;
      console.log("全选", val, this.checkedFence);
      if (val) {
        this.drawAllFencePoint();
      }
      this.pointSelectChange();
      map.setFitView();
    },
    fenceCitiesChange(value) {
      this.clearFn();
      let checkedCount = value.length;
      this.checkAllFence = checkedCount === this.fenceList.length;
      this.isIndeterminateFence =
        checkedCount > 0 && checkedCount < this.fenceList.length;
      this.drawFencePoint();
      this.pointSelectChange();
      // this.circleMapData =
      console.log("选中", value);
    },
    drawFencePoint() {
      for (let index = 0; index < this.checkedFence.length; index++) {
        const element = this.checkedFence[index];
        let currentRecord = this.fenceList.filter((item) => item.id === element)[0];
        // console.log('选中某条', currentRecord)
        if (currentRecord.rangeType === 1) {
          this.echoCircle(currentRecord);
        }
        if (currentRecord.rangeType === 2) {
          this.echoDrawPolygon(currentRecord);
        }
      }
    },
    pointSelectChange() {
      let warnDevSn = "";
      for (let index = 0; index < this.checkedCities.length; index++) {
        const element = this.checkedCities[index];
        let currentRecord = this.devList.filter((item) => item.devSn === element)[0];
        console.log("选中某条", currentRecord);
        if (currentRecord.type === 1) {
          this.getRealTimeData(currentRecord);
        }
        if (currentRecord.type === 2) {
          this.getRealTimeData(currentRecord);
        }
        if (this.checkedCities.length - 1 > index) {
          warnDevSn = warnDevSn + element + ",";
        } else {
          warnDevSn = warnDevSn + element;
        }
      }
      this.alarmDevSn = warnDevSn;
      console.log("当前devSn");
      // this.getProgressListData();
    },
    //获取报警列表数据
    getProgressListData() {
      let data = {
        pageNo: this.pagInfo.pageNo,
        pageSize: this.pagInfo.pageSize,
        devSns: this.alarmDevSn,
        projectSn: this.$store.state.projectSn,
      };
      getAlarmRecordInfo(data).then((res) => {
        if (res.code == 200) {
          this.listData = res.result.records;
          this.pagInfo.total = res.result.total;
          console.log("报警列表", res);
        }
      });
    },
    // 打开创建围栏弹窗
    openFenceCreate() {
      if (this.addForm.rangeType === 1) {
        // this.echoCircle(this.selectionAreaInfo);
        this.drawCircle();
      } else if (this.addForm.rangeType === 2) {
        // this.echoDrawPolygon(this.selectionAreaInfo);
        this.drawPolygon();
      }
      this.fenceCreateShow = true;
    },
    deleteFence() {
      if (this.checkedFence.length === 0) {
        this.$message({
          type: "info",
          message: "请选择删除围栏",
        });
        return;
      }
      console.log("删除围栏", this.checkedFence);
      this.$confirm("此操作将永久删除该围栏, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let idString = "";
          for (let index = 0; index < this.checkedFence.length; index++) {
            const element = this.checkedFence[index];
            if (this.checkedFence.length - 1 > index) {
              idString = idString + element + ",";
            } else {
              idString = idString + element;
            }
          }
          this.deleteFenceInfo(idString);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除围栏
    deleteFenceInfo(idGroups) {
      console.log("删除id", idGroups);
      let data = {
        ids: idGroups,
      };
      deleteBatchVehiclePositionFence(data).then((res) => {
        if (res.success) {
          // console.log('删除成功', res)
          this.getFenceList();
          this.checkedFence = "";
          this.fenceCitiesChange(this.checkedFence);
          this.$message.success("删除成功");
        }
      });
    },
    // 关闭创建围栏弹窗
    closeFenceCreate() {
      this.fenceCreateShow = false;
      this.addForm = {
        areaRadius: 100, //区域半径
        fenceName: "", //围栏名称
        addr: "",
        rangeType: 1,
        locationList: [
          {
            fenceId: 0,
            id: 0,
            latitude: "",
            longitude: "",
            sortNum: 0,
          },
        ],
        projectSn: "",
        enterpriseId: "",
      };
      this.exitEditFn();
      this.clearFn();
    },
    // 打开围栏弹窗
    openFence() {
      this.fenceShow = true;
    },
    // 关闭围栏弹窗
    closeFence() {
      this.fenceShow = false;
    },
    fenceNameChange(e) {
      console.log("围栏名称", e);
      this.fenceSearch = e;
      this.getFenceList();
    },
    // 围栏定位地图
    initMap() {
      var that = this;
      //地图加载
      map = new AMap.Map("mapContainer", {
        resizeEnable: true,
      });
      var geocoder = new AMap.Geocoder({});
      //输入提示
      var autoOptions = {
        input: "tipinput",
      };
      this.auto = new AMap.Autocomplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch({
        map: map,
      }); //构造地点查询类
      AMap.event.addListener(this.auto, "select", this.select); //注册监听，当选中某条记录时会触发
      mouseTool = new AMap.MouseTool(map);
      mouseTool.on("draw", function (event) {
        // event.obj 为绘制出来的覆盖物对象
        console.log("覆盖物对象绘制完成", event.obj.getPath());

        let overlaysList = map.getAllOverlays("polygon");

        if (overlaysList.length > 1) {
          map.remove(overlaysList[0]);
        }

        that.locationList = [];
        var pathArr = event.obj.getPath();
        pathArr.forEach((element) => {
          that.locationList.push({
            longitude: element.lng,
            latitude: element.lat,
          });
        });
      });
      geocoder.getLocation(this.addForm.addr, function (status, result) {
        if (status === "complete" && result.geocodes.length) {
          var lnglat = result.geocodes[0].location;
          console.log(result.geocodes[0]);
          // var arr = lnglat.split(',')
          that.locationList = [
            {
              longitude: lnglat.lng,
              latitude: lnglat.lat,
            },
          ];
          that.drawCircle();
        } else {
          console.log("获取绘制", status, result);
        }
      });
      map.on("click", (e) => {
        if (!this.fenceCreateShow) {
          console.log("还未到创建围栏弹窗");
          return;
        }
        console.log(
          "您在 [ " +
            e.lnglat.getLng() +
            "," +
            e.lnglat.getLat() +
            " ] 的位置单击了地图！"
        );
        if (this.addForm.rangeType == 1) {
          this.locationList = [];
          this.locationList.push({
            longitude: e.lnglat.getLng(),
            latitude: e.lnglat.getLat(),
          });
          var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
          geocoder.getAddress(lnglatXY, function (status, result) {
            console.log(status, result);
            that.addForm.addr = result.regeocode.formattedAddress;
          });
          this.drawCircle();
        } else {
          this.locationList.push({
            longitude: e.lnglat.getLng(),
            latitude: e.lnglat.getLat(),
          });
        }
        console.log("当前位置列表", this.locationList);
      });
    },
    enterpriseChange(enterpriseIds, departmentTeamIds, type) {
      getDepartmentAndTeamListApi({
        projectSn: this.projectSn,
        enterpriseIds:
          enterpriseIds instanceof Array ? enterpriseIds.join(",") : enterpriseIds,
      }).then((res) => {
        if (res.success) {
          this.isDepartmentTeamList = res.result;
          if (type != 1) {
            this.ruleConfigForm.departmentTeamIds = [];
            this.editForm.departmentTeamId = "";
          }
          this.departmentTeamChange(enterpriseIds, departmentTeamIds, type);
        }
      });
    },
    departmentTeamChange(enterpriseIds, departmentTeamIds, type) {
      let reqeustData = {
        projectSn: this.$store.state.projectSn,
      };
      if (enterpriseIds instanceof Array && departmentTeamIds instanceof Array) {
        reqeustData.enterpriseIds = enterpriseIds;
        reqeustData.departmentTeamIds = departmentTeamIds;
      } else {
        reqeustData.enterpriseId = enterpriseIds;
        reqeustData.departmentTeamId = departmentTeamIds;
      }
      getWorkerInfoList(reqeustData).then((res) => {
        this.personList = res.result.records;
        if (type != 1) {
          this.ruleConfigForm.personSns = [];
          this.editForm.personSn = "";
        }
      });
    },
    // 演示数据生成弹窗
    ruleConfigDialog() {
      //   this.ruleConfigReset();
      const objFn = {
        0: getMockMechanicalEquipmentPositionDataConfigApi,
        1: getMockMechanicalEquipmentPositionAlarmConfigApi,
      };
      objFn[this.activeIndex]({
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.success) {
          if (res.result instanceof Array && res.result.length > 0) {
            const result = res.result[0];
            this.ruleConfigForm = {
              ...result,
              devSns: result.devSns ? result.devSns.split(",") : [],
              alarmTypes: result.alarmTypes ? result.alarmTypes.split(",") : [],
              workStatuses: result.workStatuses ? result.workStatuses.split(",") : [],
            };
            this.selectionAreaInfo = {
              fenceName: result.fenceName,
              areaRadius: result.areaRadius,
              fenceShapeArr: result.fenceShapeArr,
              fenceShape: result.fenceShape,
              latitude: result.latitude,
              longitude: result.longitude,
              rangeType: result.rangeType,
              projectSn: this.$store.state.projectSn,
            };
            this.setScopeDataListFn(result);
          }
          this.$nextTick(() => {
            this.$refs["ruleConfigForm"].clearValidate();
          });
        }
      });
      this.ruleConfigShow = true;
    },
    submitRuleConfigForm() {
      this.$refs["ruleConfigForm"].validate((valid) => {
        if (!valid) return;
        this.ruleConfigLoading = true;
        const resultScope = this.initScopeDataListFn();
        const params = {
          ...this.ruleConfigForm,
          ...this.selectionAreaInfo,
          ...resultScope,
          devSns: this.ruleConfigForm.devSns.join(","),
          alarmTypes: this.ruleConfigForm.alarmTypes.join(","),
          workStatuses: this.ruleConfigForm.workStatuses.join(","),
          projectSn: this.projectSn,
        };
        const objFn = {
          0: mockDataMechanicalEquipmentPositionDataApi,
          1: mockDataMechanicalEquipmentPositionAlarmApi,
        };
        console.log(params);

        objFn[this.activeIndex](params)
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.getList();
              this.ruleConfigShow = false;
            }
          })
          .finally(() => {
            this.ruleConfigLoading = false;
          });
      });
    },
    initScopeDataListFn() {
      const equipmentPower = this.scopeData.find((item) => item.label == "设备电量");
      const equipmentVoltage = this.scopeData.find((item) => item.label == "设备电压");
      const speed = this.scopeData.find((item) => item.label == "速度");
      return {
        equipmentPowerBegin: equipmentPower ? equipmentPower.minValue : "",
        equipmentPowerEnd: equipmentPower ? equipmentPower.maxValue : "",
        equipmentVoltageBegin: equipmentVoltage ? equipmentVoltage.minValue : "",
        equipmentVoltageEnd: equipmentVoltage ? equipmentVoltage.maxValue : "",
        speedBegin: speed ? speed.minValue : "",
        speedEnd: speed ? speed.maxValue : "",
      };
    },
    setScopeDataListFn(row) {
      const equipmentPower = this.scopeData.find((item) => item.label == "设备电量");
      if (equipmentPower) {
        equipmentPower.minValue = row.equipmentPowerBegin;
        equipmentPower.maxValue = row.equipmentPowerEnd;
      }
      const equipmentVoltage = this.scopeData.find((item) => item.label == "设备电压");
      if (equipmentVoltage) {
        equipmentVoltage.minValue = row.equipmentVoltageBegin;
        equipmentVoltage.maxValue = row.equipmentVoltageEnd;
      }
      const speed = this.scopeData.find((item) => item.label == "速度");
      if (speed) {
        speed.minValue = row.speedBegin;
        speed.maxValue = row.speedEnd;
      }
    },
    ruleConfigCancel() {
      //   this.ruleConfigReset();
      this.ruleConfigShow = false;
    },
    // 表单重置
    ruleConfigReset() {
      //   this.ruleConfigForm = {
      //     devSns: [],
      //     devGenerateNum: "",
      //     startTime: "",
      //     endTime: "",
      //     winddirections: []
      //   };
      //   this.resetForm("ruleConfigForm");
      const params = {
        // ...this.ruleConfigForm,
        // ...this.selectionAreaInfo,
        // devSns: this.ruleConfigForm.devSns.join(","),
        // alarmTypes: this.ruleConfigForm.alarmTypes.join(","),
        projectSn: this.projectSn,
      };
      const objFn = {
        // 0: saveMockSafetyHatDataConfigApi,
        // 1: saveMockSafetyHatAlarmConfigApi
        0: resetMockMechanicalEquipmentPositionDataConfigApi,
        1: resetMockMechanicalEquipmentPositionAlarmConfigApi,
      };
      objFn[this.activeIndex](params).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          // this.ruleConfigShow = false;
          this.ruleConfigDialog();
        }
      });
    },
    // 打卡人员模拟数据弹窗
    downSimulateDialog() {
      this.downSimulateShow = true;
    },
    // 下载人员模拟数据
    submitDownSimulate() {
      this.downSimulateShow = false;
      const find = this.staffSimulateList.find(
        (item) => item.staffSimulateId === this.staffSimulateRadio
      );
      exportAttendanceExcel({
        workerNum: this.staffSimulateRadio,
        projectSn: this.projectSn,
        fetchName: find ? find.staffSimulateName : "",
        url: "xmgl/workerInfo/downloadMockWorkerInfo",
      }).then((res) => {
        window.open(res.result);
      });
    },
    getPersonListFn() {
      let reqeustData = {
        projectSn: this.$store.state.projectSn,
        enterpriseId: "",
        pageNo: 1,
        pageSize: -1,
      };
      getSafeHatEquipmentCentralPageApi(reqeustData).then((res) => {
        this.personList = res.result.records;
      });
    },
    //获取所有的闸机设备
    getMachineList() {
      getEquipmentListApi({ projectSn: this.$store.state.projectSn }).then((list) => {
        this.allUfaceDev = list.result;
      });
    },
    // 批量删除考勤人员
    deleteAttendanceBatch() {
      if (this.$refs.multipleTable.selection.length === 0)
        return this.$message.warning("请勾选需要删除的数据！");
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.multipleTable.selection.map((item) => item.id).join(",");
          console.log(this.$refs.multipleTable.selection);
          const objFn = {
            0: deleteBatchMechanicalEquipmentPositionDataApi,
            1: deleteBatchMechanicalEquipmentPositionAlarmApi,
          };
          objFn[this.activeIndex]({ ids }).then((res) => {
            this.getList();
          });
        })
        .catch(() => {});
    },
    /** 查询企业列表 */
    getEnterpriseList() {
      const params = {
        projectSn: this.projectSn,
        enterpriseName: undefined,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
        enterpriseTypeId: undefined,
      };
      enterpriseList(params).then((res) => {
        // 查询数据
        this.getList();
        // 查询班组列表
        this.getTeamList();
        // 查询部门列表
        this.getDepartmentList();
      });
    },
    /** 查询用户数据 */
    getList() {
      this.loading = true;
      this.queryParams.projectSn = this.projectSn;
      const objFn = {
        0: getEquipmentPayDataPageApi,
        1: getEquipmentAlarmRecordPageApi,
      };
      const params = {
        projectSn: this.projectSn,
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        devSn: this.queryParams.devSn,
        mockDesc: 1,
      }
      if(this.activeIndex == 0) {
        params.uploadTime_begin = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[0]).format("YYYY-MM-DD 00:00:00") : "";
        params.uploadTime_end = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[1]).format("YYYY-MM-DD 23:59:59") : "";
      } else if (this.activeIndex == 1) {
        params.alarmTime_begin = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[0]).format("YYYY-MM-DD 00:00:00") : "";
        params.alarmTime_end = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[1]).format("YYYY-MM-DD 23:59:59") : "";
      }
      objFn[this.activeIndex]({
        ...params
        // isMock: this.queryParams.enterpriseId == 2 ? 1 : "",
      }).then(({ result }) => {
        console.log("查询用户数据: ", result);
        this.userList = result.records;
        this.total = result.total - 0;
        this.$nextTick(() => {
            this.scrollbarFn();
        });
        this.loading = false;
      });
    },
    scrollbarFn() {
        const div = document.querySelector('.table-box .el-table__body-wrapper');
        if (div.scrollHeight > div.clientHeight) {
            this.scrollbarFlag = true;
        } else {
            this.scrollbarFlag = false;
        }
    },
    //获取所属 企业下拉
    getCompanyList() {
      let data = {
        projectSn: this.projectSn,
        enterpriseName: "",
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      };
      getEnterpriseInfoList(data).then((res) => {
        this.enterpriseListData = res.result;
      });
    },
    /** 查询班组列表 */
    getTeamList() {
      const params = {
        // enterpriseId: this.queryParams.enterpriseId,
        projectSn: this.projectSn,
      };
      teamList(params).then((res) => {
        console.log("查询班组列表: ", res);
        this.teamOptions = res.result.list;
        // this.isDepartmentTeamList = [...this.isDepartmentTeamList, ...res.result.list];
      });
    },
    /** 查询部门列表 */
    getDepartmentList() {
      const params = {
        // enterpriseId: this.queryParams.enterpriseId,
        projectSn: this.projectSn,
      };
      departmentList(params).then((res) => {
        console.log("查询部门列表: ", res);
        this.departmentOptions = res.result.list;
        // this.isDepartmentTeamList = [...this.isDepartmentTeamList, ...res.result.list];
      });
    },
    /** 项目列表 点击操作 */
    handleItemClick(index) {
      if (this.activeIndex == index) return;

      this.activeIndex = index;
      this.queryParams.pageNo = 1;
      this.queryParams.payMonth = nowDate();
      this.queryParams.enterpriseId = this.operationList[index].operationId;
      this.getList();
      //   this.getTeamList();
      //   this.getDepartmentList();
    },
    // 表单重置
    reset() {
      this.editForm = {
        devSn: "",
        latitude: "",
        longitude: "",
        alarmType: "",
        alarmTime: "",
        alarmInfo: "",
        uploadTime: "",
        equipmentPower: "",
        equipmentVoltage: "",
        speed: "",
        workStatus: "",
      };
      this.resetForm("editForm");
    },
  /** 查询 */
  handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    handleRefresh() {
      this.queryParams.pageNo = 1;
      this.queryParams.devSn = "";
      this.queryParams.uploadTime = [];
      this.getList();
    },
    /** 导出 */
    handleExport() {
      let params = {
        projectSn: this.projectSn,
        teamName: this.queryParams.teamName,
        departmentId: this.queryParams.departmentId,
        payStatus: this.queryParams.payStatus,
        payMonth: this.queryParams.payMonth,
        enterpriseId: this.queryParams.enterpriseId,
      };
      exportSalaryPdf(params);
    },
    /** 导出Excel */
    handleExportExcel() {
      let params = {
        projectSn: this.projectSn,
        teamName: this.queryParams.teamName,
        departmentId: this.queryParams.departmentId,
        payStatus: this.queryParams.payStatus,
        payMonth: this.queryParams.payMonth,
        enterpriseId: this.queryParams.enterpriseId,
      };
      // console.log('导出参数',params)
      exportSalaryExcel(params);
    },
    handleUploadSuccess(res) {
      console.log("导入成功");
      if (res.code == 200) {
        this.$message.success(res.message);
        this.getEnterpriseList();
        this.$refs.upload.clearFiles();
      } else {
        this.$message.error(res.message);
      }
    },
    handleUploadError() {
      this.$message.error("导入失败");
    },
    // 删除人员考勤
    handleDelete(row) {
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const objFn = {
            0: deleteBatchMechanicalEquipmentPositionDataApi,
            1: deleteBatchMechanicalEquipmentPositionAlarmApi,
          };
          objFn[this.activeIndex]({ ids: row.id }).then((res) => {
            this.getList();
          });
        })
        .catch(() => {});
    },
    /** 编辑 || 更新 */
    handleUpdate(row) {
      this.reset();
      this.editForm = Object.assign(this.editForm, row);
      console.log("this.editForm: ", this.editForm);
      this.open = true;
    },
    /** 取消按钮 */
    cancel() {
      this.reset();
      this.open = false;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) return;
        const params = {
          ...this.editForm,
          projectSn: this.projectSn,
        };
        const objFn = {
          0: editMechanicalEquipmentPositionDataApi,
          1: editMechanicalEquipmentPositionAlarmApi,
        };
        objFn[this.activeIndex](params).then((res) => {
          this.getList();
          this.cancel();
        });
      });
    },
    handleAvatarSuccess(res, file) {
      if (res.status == "SUCCESS") {
        this.editForm.fileList.push({
          name: file.response.data[0].imageUrl,
          url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
        });
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        this.$t("message.docManage.dialog_upload_files.limitingChoice")
      );
    },
    handleDeleteDialog(file, fileList) {
      this.editForm.fileList = fileList;
    },
  },
  watch: {
    positioningMapDialog: {
      handler(newVal) {
        if (!newVal) {
          this.fenceCreateShow = false;
        }
      },
    },
  },
};
</script>
<style lang="scss">
.text_hint {
  width: 280px;
}
</style>
<style lang="scss" scoped>
:deep(.el-table__empty-block) {
  width: 100% !important;
  .el-empty__description {
    margin-top: 0px;
    p {
        line-height: 30px;
    }
  }
}
.el-textarea {
  width: 220px !important;
}
#mapContainer {
  width: 100%;
  height: 100%;
}
.map-top {
  background: #fff;
  position: relative;
  height: 580px;
  .wei-lan {
    .icon-off {
      position: absolute;
      padding-top: 5px;
      top: 8%;
      left: 1%;
      width: 48px;
      height: 48px;
      cursor: pointer;
      font-size: 14px;
      background: #ffffff;
      text-align: center;
      border-radius: 2px 2px 2px 2px;
      img {
        width: 20px;
        height: 20px;
        margin: 0 auto;
      }
    }
    .icon-on {
      position: absolute;
      padding-top: 5px;
      top: 8%;
      left: 1%;
      text-align: center;
      width: 48px;
      height: 48px;
      cursor: pointer;
      font-size: 14px;
      background: #ffffff;
      color: #5181f6;
      border-radius: 2px 2px 2px 2px;
      img {
        width: 20px;
        height: 20px;
        margin: 0 auto;
      }
    }
  }
  .start-track {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    font-size: 14px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
    bottom: 3%;
    right: 3%;
  }
}
// 围栏弹窗
.fenceDialog {
  position: absolute;
  background: #fff;
  box-sizing: border-box;
  padding: 25px;
  left: 5%;
  top: 20px;
  width: 330px;
  height: 380px;
  .fence-dialog-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 3;
    background: rgba(39, 45, 69, 0.5);
  }
  .close-icon {
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
  }
  .fence-title {
    border-left: 4px solid #5c81ee;
    font-size: 15px;
    color: #272d45;
    padding-left: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    font-family: Source Han Sans CN, Source Han Sans CN;
  }
}
.fenceCreate {
  position: absolute;
  background: #fff;
  box-sizing: border-box;
  padding: 25px;
  width: 330px;
  height: 380px;
  // left: 40px;
  // top: 40px;
  left: 0;
  top: 0;
  z-index: 5;
  // .fence-modal {
  //   position: absolute;
  //   width: 330px;
  //   height: 90px;
  //   top: -90px;
  //   left: 0%;
  //   background: rgba(39, 45, 69, 0.5);
  // }
  .fenceCrete-box {
    position: relative;
    .create-footer {
      margin: 100px 0 0 50px;
    }
  }
}
.fence-box {
  position: relative;
  .fence-tool {
    display: flex;
    justify-content: space-around;
    padding: 0 25px;
    .tool {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 33px;
      font-size: 14px;
      cursor: pointer;
      background: #ffffff;
      color: #5181f6;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #5181f6;
    }
  }
  .fence-select {
    margin: 15px 0;
  }
  .fence-radio {
    height: 160px;
  }
}
:deep(.el-table__fixed-right) {
  bottom: 0 !important;
  right: 0 !important;
}
.scrollbar-exists :deep(.el-table__fixed-right) {
    right: 4px !important;
}
.flex {
  display: flex;
}

.ruleConfig_box {
  .el-select {
    width: 250px;
  }
  :deep(.el-dialog__title) {
    font-weight: bold;
  }
}
.mr_8 {
  margin-right: 8px;
}
.ml_8 {
  margin-left: 8px;
}
.ruleconfig_staff1 {
  .el-input-number {
    width: 70px;
  }
}
.ruleconfig_staff {
  display: flex;
  //   flex-direction: column;
  flex-wrap: wrap;
  //   align-content: center;
  .el-input-number {
    width: 70px;
  }
  > div:nth-child(n + 3) {
    margin-top: 12px;
  }
}
.simulate_box {
  display: flex;
  flex-direction: column;
  padding-left: 80px;
  .el-radio {
    line-height: 30px;
  }
}

.el-icon-question {
  margin-left: 5px;
}
.payoff {
  display: flex;
  width: 100%;
  height: 100%;
  .left-col {
    width: calc(10% - 20px);
    padding-top: 20px;
    margin-right: 20px;
    height: 100%;
    background-color: #fff;
    // 工程列表
    .list-wrapper {
      box-sizing: border-box;

      height: 100%;
      border-top: 2px solid #f3f5fd;
    }

    .list-item {
      box-sizing: border-box;

      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 45px;
      padding: 10px 20px;
      cursor: pointer;
      transition: all 0.3s ease-in;
      background-color: #fff;
      border-left: 3px solid transparent;
      border-bottom: 2px solid #f3f5fd;
    }
    .list-item.is-active {
      width: 100%;
      box-sizing: border-box;
      // border-left-color: #0e74d6;
      // background-color: #f3f6fd;
      border-left-color: #4e7cff;
      color: #4e7cff;
      background-color: rgba(78, 124, 255, 0.25) !important;
    }
  }

  .right-col {
    width: 90%;
    height: 100%;
    .top-col,
    .bottom-col {
      background: #fff;
    }
    .top-col {
      padding: 20px 25px;
      width: 100%;
      height: 10%;
      margin-bottom: 20px;
    }
    .bottom-col {
      width: 100%;
      height: calc(90% - 20px);
    }
  }
}
/* 查询表单 按钮样式 */
// .right-col ::v-deep .el-button {
//   border-color: #4e7cff;
// }

.scroll {
  overflow-y: auto;
}
.boxBottom {
  margin-top: 30px;
}
::v-deep .el-input__inner {
  line-height: 1px !important;
}
</style>
