<template>
  <div class="sec-left app-container card-page" style="height: 100%">
    <div class="sec-line">
      <div class="search">
        <el-input
          placeholder="搜索设备类型、设备部位"
          icon="el-icon-search"
          v-model="inputSearch"
        ></el-input>
        <el-button
          class="button"
          type="primary"
          icon="el-icon-search"
          @click="searchTable1"
        ></el-button>
      </div>
      <div class="sec-a2">
        <el-tree
          node-key="areaid"
          class="xg_tree"
          @current-change="handleAreaTreeCurrentNodeChange"
          ref="areaTree"
          :data="areaList"
          :props="defaultPropsArea"
          @node-click="handleAreaList"
        ></el-tree>
      </div>
    </div>
    <div class="wid" style="flex: 1">
      <div class="form" style="padding-top: 10px" ref="form">
        <el-alert
          title="提示"
          style="margin-bottom: 10px"
          type="info"
          :description="description"
          show-icon
        >
        </el-alert>
        <div class="line">
          <div>
            <el-button
              type="primary"
              @click="addAlertShow1"
              :disabled="
                currentTreeNode === null || currentTreeNode.deviceId === null
              "
              size="small"
              icon="el-icon-plus"
              >添加</el-button
            >
            <el-button
              type="danger"
              @click="deleteMul1"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
            <el-button type="primary" size="small" @click="eventUpload"
              >机器人预置位上传</el-button
            >
          </div>
          <div class="search">
            <el-input
              placeholder="搜索设备类型、设备部位"
              icon="el-icon-search"
              v-model="inputSearch"
            ></el-input>
            <el-button
              class="button"
              type="primary"
              icon="el-icon-search"
              @click="searchTable1"
            ></el-button>
          </div>
          <el-button
            class="button btn-site"
            size="small"
            @click="pointConfiguration"
            >点位配置</el-button
          >
        </div>

        <div class="site-table-wrap">
          <el-table
            v-loading="loading"
            @selection-change="handleSelect1"
            highlight-current-row
            @row-click="handleCurrentChange"
            ref="multipleTable"
            height="100%"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
          <el-table-column type="selection" align="center" width="50" fixed>
          </el-table-column>
          <el-table-column
            prop="patrolpointName"
            header-align="center"
            label="点位名称"
            width="220"
            fixed
          >
            <template #header>
              <span>点位名称 <span style="color: red">*</span> </span>
            </template>
            <template slot-scope="scope">
              <el-tooltip :content="scope.row.patrolpointName">
                <el-input
                  v-model="scope.row.patrolpointName"
                  @change="handleChangePointCode(scope.row)"
                  placeholder="请输入点位名称"
                ></el-input>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            prop="algSubtypeName"
            label="算法类型"
            align="center"
          >
            <template slot-scope="scope">
              <!-- <el-button
                  style="width: 50px"
                  class="nowarp"
                  size="small"
                  @click="chooseAlgorithm(scope.row)"
                  :title="scope.row.algSubtypeName"
                >
                  {{
                    scope.row.algSubtypeName ? scope.row.algSubtypeName : "选择"
                  }}</el-button
                > -->
              <a
                style="color: #1890ff"
                class="nowarp"
                @click="chooseAlgorithm(scope.row)"
                :title="scope.row.algSubtypeName"
              >
                {{
                  scope.row.algSubtypeName ? scope.row.algSubtypeName : "设置"
                }}
              </a>
            </template>
          </el-table-column>
          <!-- <el-table-column
              align="center"
              prop="patrolContent"
              header-align="center"
              label="算法类型"
               width="150"
              style="text-align: center"
            >
              <template slot-scope="">
                <el-button
                  style="padding-left: 10px; padding-right: 10px"
                  @click="algorithmClick()"
                  type="text"
                  size="small"
                  >选择</el-button
                >
              </template>
            </el-table-column> -->
          <el-table-column
            align="center"
            prop="patrolContent"
            header-align="center"
            label="预置位选择"
            width="150"
          >
            <!-- @click="visibleShow1"  scope-->
            <template slot-scope="">
              <el-button
                style="padding-left: 10px; padding-right: 10px"
                @click="pointConfiguration"
                type="text"
                size="small"
                class="btn-site"
                >选择</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="purpose"
            header-align="center"
            label="用途"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column prop="code" width="220" align="center">
            <template #header>
              <span>监控预置位编号 <span style="color: red">*</span> </span>
            </template>
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.patrolpointCode"
                @change="handleChangePointCode(scope.row)"
                placeholder="请输入监控预置位编号"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="巡检类型"
            width="220"
            align="center"
          >
            <template #header>
              <span>巡检类型 <span style="color: red">*</span> </span>
            </template>
            <template slot-scope="scope">
              <treeselect
                :append-to-body="true"
                @select="
                  (node) => {
                    handleSelectPointCode(node, scope.row);
                  }
                "
                @deselect="
                  (node) => {
                    handleDeSelectPointCode(node, scope.row);
                  }
                "
                :defaultExpandLevel="2"
                :limit="1"
                :disable-branch-nodes="true"
                :limitText="(count) => `+${count}`"
                multiple
                flat
                v-model="scope.row.patrolTypeId"
                :options="listPatroltype"
                :show-count="true"
                placeholder="请选择巡检类型"
              />
            </template>
          </el-table-column>
          <el-table-column prop="code" width="220" align="center">
            <template #header>
              <span>重要等级 <span style="color: red">*</span> </span>
            </template>
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.pointImptLevel"
                @change="handleChangePointCode(scope.row)"
              >
                <el-option
                  v-for="dict in dict.type.point_impt_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column
              header-align="center"
              prop="scope.row.positionX"
              align="center"
              label="三维坐标"
              width="280"
            >
              <template slot-scope="scope">
                <div class="input_group_position">
                  <el-input
                    class="input_group_item"
                    v-model="scope.row.positionX"
                    @change="handleChangePointCode(scope.row)"
                    placeholder="X(-20,20)"
                  />
                  <el-input
                    class="input_group_item"
                    v-model="scope.row.positionY"
                    @change="handleChangePointCode(scope.row)"
                    placeholder="Y(66)"
                  />
                  <el-input
                    class="input_group_item"
                    v-model="scope.row.positionZ"
                    @change="handleChangePointCode(scope.row)"
                    placeholder="Z(-6,20)"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="scope.row.originalDeviceId"
              label="上报设备编号"
              width="200"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="scope.row.originalAlgSubtypeIds"
              label="上报识别类型"
              width="200"
            >
            </el-table-column> -->

          <el-table-column header-align="center" label="阈值上限" width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.upperValue"
                @change="handleChangePointCode(scope.row)"
                placeholder="请输入监控点位名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="阈值下限" width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.lowerValue"
                @change="handleChangePointCode(scope.row)"
                placeholder="请输入监控点位名称"
              ></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column
              header-align="center"
              prop="scope.row.originalAlgSubtypeIds"
              label="判别基准图片"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="padding-left: 10px; padding-right: 10px"
                  @click.native.stop="handleUploadPicture(scope.row)"
                  >上传(已传{{ rowPicCount(scope.row) }}张)</el-button
                >
              </template>
            </el-table-column> -->
          <el-table-column
            fixed="right"
            label="操作"
            width="125"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                style="padding-left: 10px; padding-right: 10px"
                @click.native.prevent="editRows1(scope.$index, scope.row)"
                :disabled="scope.row.stdparolPointId != null"
                type="text"
                size="small"
                class="btn-site"
                >修改</el-button
              >
              <el-button
                style="padding-left: 10px; padding-right: 10px"
                @click.native.prevent="deleteRows1(scope.$index, scope.row)"
                :disabled="scope.row.stdparolPointId != null"
                type="text"
                size="small"
                class="btn-site"
                >移除</el-button
              >
            </template>
          </el-table-column>
          </el-table>
        </div>
        <el-dialog
          class="card-dialog"
          :title="titleAlert"
          :visible.sync="showAdd"
          width="60%"
          append-to-body
          :close-on-click-modal="false"
          style="height: 85vh"
          :lock-scroll="false"
        >
          <el-form
            ref="formAdd"
            class="card-page"
            :model="formAdd"
            :rules="formAddRules"
            label-width="120px"
          >
            <el-form-item label="监控点位名称" prop="patrolpointName">
              <el-input
                v-model="formAdd.patrolpointName"
                placeholder="请输入监控点位名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="监控点位编号" prop="patrolpointCode">
              <el-input
                v-model="formAdd.patrolpointCode"
                placeholder="请输入监控编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="监控内容" prop="patrolContent">
              <el-input
                type="textarea"
                placeholder="请输入监控内容"
                v-model="formAdd.patrolContent"
                maxlength="200"
                resize="none"
                show-word-limit
              ></el-input>
            </el-form-item>
            <el-form-item label="巡检类型" prop="patrolTypeId">
              <treeselect
                :zIndex="110000"
                :append-to-body="true"
                :defaultExpandLevel="2"
                :limit="100"
                :disable-branch-nodes="true"
                :limitText="(count) => `+${count}`"
                multiple
                flat
                v-model="formAdd.patrolTypeId"
                :options="listPatroltype"
                :show-count="true"
                placeholder="请选择巡检类型"
              />
            </el-form-item>
            <el-form-item label="重要等级" prop="pointImptLevel">
              <el-select v-model="formAdd.pointImptLevel">
                <el-option
                  v-for="dict in dict.type.point_impt_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用途">
              <el-input
                placeholder="请输入用途"
                v-model="formAdd.purpose"
                show-word-limit
                disabled
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="x坐标">
                <el-input-number
                  v-model="formAdd.positionX"
                  :precision="2"
                  :step="0.1"
                  :min="-20"
                  :max="20"
                  placeholder="请输入x坐标-20,20"
                ></el-input-number>
                <div>（建议最小值-20，最大值20）</div>
              </el-form-item>
              <el-form-item label="y坐标">
                <el-input-number
                  v-model="formAdd.positionY"
                  :precision="2"
                  :step="0.1"
                  :min="66"
                  :max="80"
                  placeholder="请输入y坐标66.07"
                ></el-input-number>
                <div>（建议66）</div>
              </el-form-item>
              <el-form-item label="z坐标">
                <el-input-number
                  v-model="formAdd.positionZ"
                  :precision="2"
                  :step="0.1"
                  :min="-6"
                  :max="20"
                  placeholder="请输入z坐标-6,20"
                ></el-input-number>
                <div>（建议最小值-6，最大值20）</div>
              </el-form-item> -->
            <div class="add-btn">
              <el-button
                @click="alertConfirm1"
                :loading="formAddLoading"
                type="primary"
                >确定</el-button
              >
              <el-button @click="alertCancel1">取消</el-button>
            </div>
          </el-form>
        </el-dialog>
      </div>
      <div class="right" style="display: none" ref="right">
        <div class="eq">
          <img class="eq-img" src="@/assets/images/eq.png" />
          <div class="eq-a1">
            <div class="eq-a1-d1">请选中左点位查看监控点或监测设备</div>
          </div>
          <img
            class="collect"
            @click="collectPoint"
            src="@/assets/images/collect.png"
          />
          <el-tabs v-model="activeTab" :stretch="true" style="width: 100%">
            <el-tab-pane label="视频设备预置点" name="first" width="33%">
              <div class="eq-a2">
                <el-button
                  class="btn-site"
                  @click="visibleShow1"
                  title="一个监控点位只允许绑定一个预置点"
                  :disabled="
                    currentRow != null && currentRow.bindPoints.length > 0
                  "
                  >绑定可见光监测点</el-button
                >
                <el-button
                  class="btn-site"
                  @click="infraredShow1"
                  title="一个监控点位只允许绑定一个预置点"
                  :disabled="
                    currentRow != null && currentRow.bindPoints.length > 0
                  "
                  >绑定热成像监控点</el-button
                >
              </div>
              <el-table
                v-loading="pointLoading"
                v-if="currentRow != null"
                :height="533"
                :data="currentRow.bindPoints"
              >
                <el-table-column
                  label="设备名称"
                  align="center"
                  min-width="100"
                  prop="patroldeviceName"
                ></el-table-column>
                <el-table-column
                  label="预置点名称"
                  align="center"
                  min-width="100"
                  prop="presetPosName"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  width="150"
                  fixed="right"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      style="padding-left: 10px; padding-right: 10px"
                      type="text"
                      size="small"
                      @click="handleUnbindPoint(scope.row, scope.$index)"
                      >解绑</el-button
                    >

                    <!-- <el-image  :src="scope.row.channelImg" >
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image> -->

                    <el-button
                      style="padding-left: 10px; padding-right: 10px"
                      type="text"
                      size="small"
                      :loading="scope.row.loading"
                      v-if="
                        scope.row.channelImg && scope.row.channelImg.length > 0
                      "
                      @click="handleViewImages(scope.row, scope.$index)"
                      >查看快照</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="监测设备" name="second">
              <div class="eq-a2">
                <el-button
                  class="btn-site"
                  v-if="currentRow != null && currentRow.patrolpointId != null"
                  @click="showChooseDevices = true"
                  title="一个监控点位只允许绑定一个预置点"
                  :disabled="
                    currentRow != null && currentRow.bindDevices.length > 0
                  "
                  >绑定监测设备</el-button
                >
                <div v-else>
                  <el-tooltip content="请先在中间的列表中补全点位信息">
                    <el-button
                      @click="
                        $message.warning('请先在中间的列表中补全点位信息')
                      "
                      >绑定监测设备</el-button
                    >
                  </el-tooltip>
                </div>
              </div>
              <el-table
                v-loading="pointLoading"
                v-if="currentRow != null"
                :height="533"
                :data="currentRow.bindDevices"
              >
                <el-table-column
                  label="设备名称"
                  align="center"
                  min-width="100"
                  prop="patroldeviceName"
                ></el-table-column>
                <el-table-column
                  label="设备编码"
                  align="center"
                  min-width="100"
                  prop="patroldeviceCode"
                ></el-table-column>
                <el-table-column
                  label="操作"
                  width="150"
                  fixed="right"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-button
                      style="padding-left: 10px; padding-right: 10px"
                      type="text"
                      size="small"
                      @click="handleUnbindDevice(scope.row, scope.$index)"
                      >解绑</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <UploadDialog
        class="card-dialog"
        :show.sync="showUploader"
        @confirm="handleUploaderConfirm"
        :filePath="currentRow != null ? currentRow.disRefPicturePath : ''"
      />
      <UploadDialog
        class="card-dialog"
        :showConfirmBtn="false"
        :updata="updata"
        :accept="'.xml'"
        :action="rebotUploadUrl"
        :title="'机器人离线点位文件上传'"
        :show.sync="showRebotUploader"
        @confirm="handleRebotUploaderConfirm"
        :filePath="''"
      />
      <AsyncImage
        ref="asyncImage"
        errorTips=""
        class="xg_image_viewer"
        @imgload="handleImageLoad"
        @imgloaderror="handleImageLoadError"
        :src="currentSrc"
        :srcList="currentSrcList"
      />
      <el-dialog
        class="card-dialog"
        :title="titleLightTitle"
        :close-on-click-modal="false"
        :visible.sync="monitorShow"
        width="1200px"
        @close="handleCloseVL"
        append-to-body
        :lock-scroll="false"
      >
        <div class="horizontal-tabs-container">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="摄像头" name="home">
              <div class="box card-page">
                <div class="left">
                  <el-tree
                    :data="monitorList"
                    :props="defaultPropsMonitor"
                    @node-click="handleMonitor"
                  ></el-tree>
                </div>
                <div class="middle">
                  <VideoPlayerPlatform
                    ref="playerPlayform"
                    @changeIndex="handleChangeIndex"
                    :showBottomToolBar="false"
                    :defaultLayout="'1x1'"
                  >
                    <template slot-scope="scope">
                      <DrawShape
                        @drawComplete="
                          (shape) => {
                            handleDrawComplete(scope, shape);
                          }
                        "
                      />
                    </template>
                  </VideoPlayerPlatform>
                </div>
                <div class="right">
                  <div class="r-ti1">云台</div>
                  <div class="r-box">
                    <div class="r-ti2">
                      <img src="@/assets/images/yuntai1.png" />
                      <div class="r-ti2-pos">
                        <div
                          @mousedown="controlEquip1('UP')"
                          @mouseup="controlEquip1('UP_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('UP_RIGHT')"
                          @mouseup="controlEquip1('UP_RIGHT_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('RIGHT')"
                          @mouseup="controlEquip1('RIGHT_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('DOWN_RIGHT')"
                          @mouseup="controlEquip1('DOWN_RIGHT_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('DOWN')"
                          @mouseup="controlEquip1('DOWN_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('DOWN_LEFT')"
                          @mouseup="controlEquip1('DOWN_LEFT_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('LEFT')"
                          @mouseup="controlEquip1('LEFT_STOP')"
                        ></div>
                        <div
                          @mousedown="controlEquip1('UP_LEFT')"
                          @mouseup="controlEquip1('UP_LEFT_STOP')"
                        ></div>
                        <div @mousedown="controlEquip1('UP_LEFT')"></div>
                      </div>
                    </div>
                    <div class="r-ti3">
                      <div class="r-ti3-d1">
                        <img src="@/assets/images/r1.png" />
                        <div class="r-ti3-d2">
                          <div
                            @mousedown="controlEquip1('ZOOM_OUT')"
                            @mouseup="controlEquip1('ZOOM_OUT_STOP')"
                          ></div>
                          <div
                            @mousedown="controlEquip1('ZOOM_IN')"
                            @mouseup="controlEquip1('ZOOM_IN_STOP')"
                          ></div>
                        </div>
                      </div>
                      <div class="r-ti3-d1">
                        <img src="@/assets/images/r2.png" />
                        <div class="r-ti3-d2">
                          <div
                            @mousedown="controlEquip2('nearfocus')"
                            @mouseup="controlEquip2('nearfocusstop')"
                          ></div>
                          <div
                            @mousedown="controlEquip2('farfocus')"
                            @mouseup="controlEquip2('farfocusstop')"
                          ></div>
                        </div>
                      </div>
                      <div class="r-ti3-d1">
                        <img src="@/assets/images/r3.png" />
                        <div class="r-ti3-d2">
                          <div
                            @mousedown="controlEquip2('apertureoff')"
                            @mouseup="controlEquip2('apertureoffstop')"
                          ></div>
                          <div
                            @mousedown="controlEquip2('apertureon')"
                            @mouseup="controlEquip2('apertureonstop')"
                          ></div>
                        </div>
                      </div>
                      <div class="r-ti3-d1">
                        <img src="@/assets/images/r4.png" />
                        <div class="r-ti3-d2">
                          <div
                            @mousedown="controlEquip1('ZOOM_OUT')"
                            @mouseup="controlEquip1('ZOOM_OUT_STOP')"
                          ></div>
                          <div
                            @mousedown="controlEquip1('ZOOM_IN')"
                            @mouseup="controlEquip1('ZOOM_IN_STOP')"
                          ></div>
                        </div>
                      </div>
                      <div class="r-ti3-d1">
                        <img src="@/assets/images/r5.png" />
                        <div class="r-ti3-d2">
                          <div
                            @mousedown="controlEquip1('ZOOM_OUT')"
                            @mouseup="controlEquip1('ZOOM_OUT_STOP')"
                          ></div>
                          <div
                            @mousedown="controlEquip1('ZOOM_IN')"
                            @mouseup="controlEquip1('ZOOM_IN_STOP')"
                          ></div>
                        </div>
                      </div>
                    </div>
                    <div class="r-ti4">
                      <div style="display: flex">
                        <el-select
                          v-model="presetDotNum"
                          placeholder="请选择预置点"
                          @change="presetDotChange1"
                          :disabled="presetDotDis"
                        >
                          <el-option
                            v-for="item in presetArr"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                          ></el-option>
                        </el-select>
                        <img
                          class="alert1_img1"
                          @click="convertPresetDot1"
                          src="@/assets/images/r6.png"
                          title="转到预置点"
                        />
                        <el-popover
                          placement="top"
                          width="300"
                          v-model="popovervisible"
                          trigger="click"
                        >
                          <el-input
                            v-model="newpresetName"
                            placeholder="请输入内容"
                            style="background-color: #222f3d"
                            :disabled="presetDotDis"
                          ></el-input>
                          <div
                            style="text-align: right; margin-top: 10px"
                            class="card-page"
                          >
                            <el-button
                              size="mini"
                              type="primary"
                              @click="popovervisible = false"
                              >取消</el-button
                            >
                            <el-button
                              type="primary"
                              size="mini"
                              @click="setPresetDot1"
                              >确定</el-button
                            >
                          </div>
                          <img
                            slot="reference"
                            class="alert1_img1"
                            src="@/assets/images/r7.png"
                            title="添加预置点"
                          />
                        </el-popover>
                      </div>
                      <div style="display: flex">
                        <el-input
                          v-model="presetName"
                          placeholder="请输入内容"
                        ></el-input>
                        <img
                          class="alert1_img1"
                          @click="editPresetDot1"
                          src="@/assets/images/r8.png"
                          title="编辑预置点名称"
                        />
                      </div>
                      <div style="display: flex; margin: 10px 0px; width: 92%">
                        <el-input
                          v-model="presetNumber"
                          placeholder="预置位编号"
                        ></el-input>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>动作列表</div>
              <div class="card-page">
                <el-table
                  :data="presetData.presetActionList"
                  style="margin-top: 10px; width: 100%"
                  height="200px"
                  border
                >
                  <el-table-column
                    align="center"
                    label="动作类型"
                    min-width="100"
                  >
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.actionType">
                        <el-option
                          v-for="dict in dict.type.video_action_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="录像时长(秒)"
                    min-width="100"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.videoTime"
                        v-if="scope.row.actionType == 2"
                        class="centered-input"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="拍照次数"
                    min-width="100"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.photoCount"
                        v-if="scope.row.actionType == 1"
                        class="centered-input"
                      ></el-input>
                      <!-- <span v-if="scope.row.actionType == 1">1</span> -->
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="拍照间隔(秒)"
                    min-width="100"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.photoSeper"
                        v-if="scope.row.actionType == 1"
                        class="centered-input"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作" width="100">
                    <template #header>
                      <el-button type="primary" size="small" @click="addAction"
                        >添加</el-button
                      >
                    </template>
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="removeAction(scope.$index)"
                        >移除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 动作列表结束 -->
            </el-tab-pane>
            <!-- 摄像头结束 -->
            <el-tab-pane
              label="无人机"
              name="solutions"
              v-if="monitorType == 'ir'"
            >
              <div class="box card-page" style="height: 570px">
                <!-- <div class="left"> -->
                <!-- 左边无人机树 -->
                <!-- <el-tree
                      :data="monitorList"
                      :props="defaultPropsMonitor"
                      @node-click="handleMonitor"
                    ></el-tree> -->
                <!-- </div> -->
                <div class="middle">
                  <!-- 中间图片 imageSrc http://192.168.1.116:18891/shaoxing/videoMonitor/app/htjc6/htjcImage-->
                  <div>
                    <ImageAnnotation
                      :image-src="
                        '/lingzhou/videoMonitor/xunshiht/htjcImage' + imageUrl
                      "
                      ref="checkItemSetRef"
                    />
                    <!-- <ImageAnnotation
                        :image-src="'/app/htjc6/htjcImage' + imageUrl"
                        ref="checkItemSetRef"
                      /> -->
                  </div>
                </div>
                <!-- <div class="right"></div> -->
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- tab标签结束 -->

        <template #footer>
          <div
            class="add-btn add-bth1 card-page"
            v-if="activeName !== 'solutions'"
          >
            <el-button
              type="primary"
              v-if="monitorType == 'vl'"
              :loading="loadingBind"
              @click="saveDot1"
              >确定</el-button
            >
            <el-button type="primary" v-else @click="nextStep1"
              >下一步，配置测温位</el-button
            >
            <el-button @click="monitorShow = false">取消</el-button>
          </div>
          <div
            class="add-btn add-bth1 card-page"
            v-if="activeName == 'solutions'"
          >
            <el-button type="primary" @click="uavComplete()">完成</el-button>
            <el-button @click="monitorShow = false">取消</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
        :visible.sync="monitorSecShow"
        :close-on-click-modal="false"
        width="1200px"
        append-to-body
        @close="handleCloseIR"
        :lock-scroll="false"
      >
        <div class="sec-left card-page">
          <div class="fl">
            <div class="toollist1-a1">
              <div
                :class="drawShapIndex == 3 ? 'on1' : ''"
                @click="chooseDrawShape1(3, ShapeEnum['rect'])"
              >
                <img src="@/assets/images/ic04.png" />
              </div>
              <div
                :class="drawShapIndex == 2 ? 'on1' : ''"
                @click="chooseDrawShape1(2, ShapeEnum['polygon'])"
              >
                <img src="@/assets/images/ic03.png" />
              </div>
              <div
                :class="drawShapIndex == 1 ? 'on1' : ''"
                @click="chooseDrawShape1(1, ShapeEnum['brokenline'])"
              >
                <img src="@/assets/images/ic02.png" />
              </div>
              <div
                :class="drawShapIndex == 0 ? 'on1' : ''"
                @click="chooseDrawShape1(0, ShapeEnum['point'])"
              >
                <img src="@/assets/images/ic01.png" />
              </div>
            </div>
            <VideoPlayerPlatform
              ref="playerPlayform2"
              @changeIndex="handleChangeIndex"
              :showBottomToolBar="false"
              :defaultLayout="'1x1'"
            >
              <template slot-scope="scope">
                <DrawShape
                  @drawComplete="
                    (shape) => {
                      handleDrawComplete(scope, shape);
                    }
                  "
                />
              </template>
            </VideoPlayerPlatform>
          </div>
          <div class="fr">
            <div class="fr-ti1">
              <span>{{ patroldeviceName }}</span>
              <span v-if="monitorType == 'vl'">可见光</span>
              <span v-else>热成像</span>
              <span>/{{ presetName }}</span>
              <span v-if="monitorType == 'vl'">位置</span>
              <span v-else>测温位</span>
              <span>配置</span>
            </div>
            <div class="fr-ti2">
              点击画面右上方按钮配置测温位，最多配置10个测温点、1条测温线、10个测温框写
            </div>
            <!-- 绘制区域列表 -->
            <el-table
              :data="presetData.presetParamList"
              style="width: 100%"
              max-height="250"
            >
              <el-table-column
                fixed
                prop="measureName"
                :label="monitorType == 'vl' ? '位置' : '测温位'"
                width="150"
              >
                <!-- <template slot-scope="scope">
                  <el-input v-model="scope.row.measureName" placeholder="请输入测温区域名"></el-input>
                </template> -->
              </el-table-column>
              <el-table-column
                prop="measureAreaType"
                label="类型"
                width="120"
              ></el-table-column>
              <el-table-column fixed="right" label="操作" width="80">
                <template slot-scope="scope">
                  <i
                    class="el-icon-delete fss"
                    title="删除"
                    @click.prevent="deleteDot1(scope.$index, scope.row)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer card-page">
          <el-button type="primary" :loading="loadingBind" @click="saveDot1"
            >保存</el-button
          >
          <el-button @click="prevStep">上一步</el-button>
          <el-button @click="monitorSecShow = false">取消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="title2"
        :close-on-click-modal="false"
        :visible.sync="presetDataShow"
        @close="handleCloseTemptrueModel"
        width="65%"
        append-to-body
        :lock-scroll="false"
      >
        <el-form
          ref="formTemptrue"
          class="card-page"
          :model="testobj"
          :rules="formTemptrueRules"
          label-width="120px"
        >
          <el-row>
            <el-col :span="24">基本信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="名称" prop="measureName">
                <el-input
                  v-model="testobj.measureName"
                  placeholder="请输入名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规则编号" prop="presetParamCode">
                <el-input
                  v-model="testobj.presetParamCode"
                  placeholder="请输入编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="测温距离" prop="measureDistance">
                <el-input v-model="testobj.measureDistance"
                  ><i slot="suffix" class="input_slot_a1">m</i></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="辐射系数" prop="radioRate">
                <el-input v-model="testobj.radioRate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="反射温度" prop="reflexTemp">
                <el-input v-model="testobj.reflexTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" prop="reflexTemp">
                <el-checkbox
                  v-model="testobj.isEnable"
                  :true-label="1"
                  :false-label="0"
                >
                  {{ testobj.isEnable == "1" ? "已启用" : "已停用" }}
                </el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">预警配置</el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="最高温度" prop="warnMaxTemp">
                <el-input v-model="testobj.warnMaxTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最低温度" prop="warnMinTemp">
                <el-input v-model="testobj.warnMinTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="平均温度" prop="warnAverageTemp">
                <el-input v-model="testobj.warnAverageTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="温差" prop="warnDifferenceTemp">
                <el-input v-model="testobj.warnDifferenceTemp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">告警配置</el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="最高温度" prop="alarmMaxTemp">
                <el-input v-model="testobj.alarmMaxTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最低温度" prop="alarmMinTemp">
                <el-input v-model="testobj.alarmMinTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="平均温度" prop="alarmAverageTemp">
                <el-input v-model="testobj.alarmAverageTemp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="温差" prop="alarmDifferenceTemp">
                <el-input v-model="testobj.alarmDifferenceTemp"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="add-bth add-bth1 card-page" slot="footer">
          <el-button type="primary" @click="aletrSecConfirm1">确定</el-button>
          <el-button @click="aletrSecCancel1">取消</el-button>
        </div>
      </el-dialog>
    </div>
    <ChooseAlg
      :listPatroltype="listPatroltype"
      :alarmThreshold="currentRow != null ? currentRow.alarmThreshold : ''"
      :show.sync="showChooseAlg"
      @confirm="handleChooseAlgOk"
    />
    <ChooseDevices
      :show.sync="showChooseDevices"
      @confirm="handleChooseDevicesOk"
    ></ChooseDevices>
    <el-dialog
      class="card-dialog"
      title="算法配置"
      :visible.sync="algorithmShow"
      width="1200px"
      style="height: 95%"
      :lock-scroll="false"
    >
      <Algorith></Algorith>
    </el-dialog>
    <el-dialog
      title="图片预览"
      :visible.sync="showPreviewImages"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      custom-class="card-dialog card-page"
      width="70%"
      append-to-body
      :lock-scroll="false"
    >
      <ImagePreview
        v-if="showPreviewImages"
        :imageUrls="currentSrcList"
        :selectImgPosition="previewImagePos"
        :showTemperatureTool="false"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  listPatrolpointpreset,
  addPatrolpointpreset,
  delPatrolpointpreset,
} from "@/api/basedata/patrolpointmnt/patrolpointpreset.js";
import ChooseDevices from "./components/chooseDevices.vue";
import UploadDialog from "./components/uploadDialog.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import CardBox from "@/components/cardBox.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {
  proDotManTable,
  proDotTableDeleteSin,
  proDotTableAddSin,
  proDotTableEditSin,
  bindingMonitorDotList,
  presetDotDistribute,
  convertPresetDot,
  cloudControl,
  focalAperture,
  bindingPreset,
  issueUpdate,
} from "@/api/basedata/area/area";
import VideoPlayerPlatform from "@/components/VideoPlayerPlatform";
import DrawShape, {
  toTargetRect,
  ShapeEnum,
} from "@/components/Canvas/DrawShape.vue";
import linq from "linq";
import {
  listPatroltype,
  getDeviceList,
} from "@/api/basedata/patrolpointmnt/patroltype";
import {
  getAreaDeviceTree,
  getPatroPointDevicePoints,
  unbindPoint,
  getBdconfigMainsystem,
} from "@/api/basedata/patrolpointmnt/patrolpoint";
import AsyncImage from "@/components/AsyncImage";
import lodash from "lodash";
import { editPoint } from "@/api/basedata/patrolpointmnt/patrolpointpreset";
import {
  capturePicture,
  irUavImg,
} from "@/api/basedata/patrolpointmnt/patrolpointpreset";
import ChooseAlg from "./components/chooseAlg.vue";
import Algorith from "./algorithm.vue";
import ImageAnnotation from "./components/ImageAnnotation.vue";
// 临时接口
import axios from "axios";
export default {
  name: "site_management",
  dicts: ["video_action_type", "point_impt_level", "system_type"],
  data() {
    return {
      // 图片标注
      imageUrl: "",
      imagePath: "",
      // 图片标注结束
      activeName: "home", //tab切换
      // channelId: "", //无人机树ID
      // channelCode: "", //无人机树code
      algorithmShow: false,
      activeTab: "first",
      showChooseDevices: false,
      showChooseAlg: false,
      showUploader: false,
      showRebotUploader: false,
      rebotUploadUrl:
        process.env.VUE_APP_BASE_API +
        "/basedata/patrolpointmnt/patrolpoint/uploadXml",
      updata: {},
      showPreviewImages: false,
      previewImagePos: 0,
      currentSrc: "",
      currentSrcList: [],
      currentImageRow: {},
      formAddLoading: false,
      currentTreeNode: null,
      currentRow: null,
      loading: false,
      pointLoading: false,
      loadingBind: false,
      treeobj: null /* 左侧列表树点击后获取相关信息的暂存区 */,
      areaList: [] /* 左侧数据列表 */,
      defaultPropsArea: {
        children: "children",
        label: "deviceName",
      } /* 左侧数据列表对应字段设置 */,
      monitorList: [] /* 中间数据列表 */,
      defaultPropsMonitor: {
        children: "children",
        label: "name",
      } /* 中间数据列表对应字段设置 */,
      description:
        "一个监控对象（区域、主设备），最多支持绑定16个不同摄像头；一个监控对象（区域、主设备），最多添加200个监控点位；一个监控点位绑定监控点不超过9个预置位（无论是否同一监控点）；" /* 警告提示的文案 */,
      showAdd: false /* 添加、修改弹窗控制开关 */,
      titleAlert: "" /* 添加、修改弹窗标题 */,
      tableData: [] /* 监控点位数据数组 */,
      filters: [{ "filter-multiple": false }] /* 数据是否多选 */,
      mulSelect: [] /* 监控点位多选数据数组 */,
      inputSearch: "" /* 监控点位数据搜索框输入值 */,
      bindingStyle: 1 /* 选择手动、平台 手动1、平台2 */,
      monitorShow: false /* 可见光、热成像弹窗显示状态值 */,
      titleLightTitle: "" /* 可见光、热成像弹窗标题 */,
      monitorType: "" /* 绑定监控点位类型 可见光值为:vl，热成像值为:ir */,
      equipobj: {} /* 监控设备相应的数据 */,
      patroldeviceName: "" /* 绑定监控设备名称 */,
      presetDotNum: "" /* 当前选择的预置点 */,
      presetDotDis: "" /* 预置点是否可选 */,
      presetArr: [] /* 预置点下拉点位数组 0——255 */,
      presetName: "" /* 选到的预置点名字 */,
      presetNumber: "", //预置位编号
      is_convert: false /* 是否转到预置点 */,
      is_set: false /* 是否设置预置点 */,
      monitorSecShow: false /* 下一步弹窗显示状态 */,
      formTemptrueRules: {
        measureName: [{ required: true, message: "必填", trigger: "blur" }], //区域名称
        measureDistance: [{ required: true, message: "必填", trigger: "blur" }], //距离
        radioRate: [{ required: true, message: "必填", trigger: "blur" }], //辐射率
        reflexTemp: [{ required: true, message: "必填", trigger: "blur" }], //反射温度
        warnMaxTemp: [{ required: true, message: "必填", trigger: "blur" }], //预警最高温度
        warnMinTemp: [{ required: true, message: "必填", trigger: "blur" }], //预警最低温度
        alarmMaxTemp: [{ required: true, message: "必填", trigger: "blur" }], //告警最高温度
        alarmMinTemp: [{ require: true, message: "必填", trigger: "blur" }], //告警最低温度
        warnAverageTemp: [{ required: true, message: "必填", trigger: "blur" }], //预警平均温度
        alarmAverageTemp: [
          { required: true, message: "必填", trigger: "blur" },
        ], //	告警平均温度
        warnDifferenceTemp: [
          { required: true, message: "必填", trigger: "blur" },
        ], //预警温差
        alarmDifferenceTemp: [
          { required: true, message: "必填", trigger: "blur" },
        ], //告警温差
        presetParamCode: [{ required: true, message: "必填", trigger: "blur" }], //测温编号
      },

      presetData: {
        presetPosCode: "",
        channelId: "",
        eqpbookId: "",
        patrolpointId: "",
        stdparolPointId: "",
        deviceId: "",
        presetPosName: "",
        stopTime: "",
        channelImg: "",
        description: "",
        presetActionList: [],
        presetParamList: [],
        presetPointList: [],
      } /* 预置点相关参数 */,
      presetDataShow: false /* 监控区域温度弹窗状态值 */,
      drawShapIndex: -1 /* 选择绘制类型索引值 */,
      ShapeEnum: {
        rect: "Rectangle",
        brokenline: "BrokenLine",
        polygon: "Polygon",
        point: "Point",
      } /* 绘制方式 */,
      testobj: {
        measureAreaType: "", //区域类型
        measureName: "", //区域名称
        measureDistance: "", //距离
        radioRate: "", //辐射率
        warnMaxTemp: "", //预警最高温度
        warnMinTemp: "", //预警最低温度
        alarmMaxTemp: "", //告警最高温度
        alarmMinTemp: "", //告警最低温度
        warnAverageTemp: "", //预警平均温度
        alarmAverageTemp: "", //	告警平均温度
        warnDifferenceTemp: "", //预警温差
        alarmDifferenceTemp: "", //告警温差
        coordinate: "", //坐标
        reflexTemp: "",
        presetParamCode: "", //测温编号
        isEnable: 1, //启用停用
      } /* 测温参数,和画框数据 */,
      popovervisible: false,
      newpresetName: "",
      title2: "测温位配置",
      show1: true,
      value: "",
      formAdd: {
        patrolpointName: "",
        patrolContent: "",
        purpose: "在线监视",
        areaId: "",
        mainDeviceId: "",
        deviceId: "",
        patrolpointCode: "",
        patrolTypeId: null,
        pointImptLevel: null,
        positionX: null,
        positionY: null,
        positionZ: null,
      },
      formAddRules: {
        patrolpointName: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        patrolContent: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        patrolpointCode: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        patrolTypeId: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        pointImptLevel: [
          {
            required: true,
            message: "必填",
            trigger: "blur",
          },
        ],
        purpose: "在线监视",
        areaId: "",
        mainDeviceId: "",
        deviceId: "",
      },
      listPatroltype: [],
      patroldeviceCode: null,
      channelCode: null,
      cssClass: false,
    };
  },
  components: {
    Algorith,
    CardBox,
    ChooseDevices,
    UploadDialog,
    VideoPlayerPlatform,
    DrawShape,
    Treeselect,
    AsyncImage,
    ChooseAlg,
    ImagePreview,
    ImageAnnotation,
  },
  created() {
    this.testobjBackup = lodash.cloneDeep(this.testobj);
    this.presetDataBackup = lodash.cloneDeep(this.presetData);
    listPatroltype().then((res) => {
      const list = [];
      let childs = [];
      let ptype = {};
      linq
        .from(res.rows)
        .where((x) => x.parentId === 0)
        .toArray()
        .forEach((node) => {
          childs = linq
            .from(res.rows)
            .where((c) => c.parentId === node.patrolTypeId)
            .select((q) => {
              return {
                id: q.patrolTypeId,
                label: q.patrolTypeName,
              };
            })
            .toArray();
          ptype = {
            id: node.patrolTypeId,
            isOpen: true,
            label: node.patrolTypeName,
            // isDisabled: false
          };
          if (childs.length > 0) {
            ptype.children = childs;
            // ptype.isDisabled = true
          }
          list.push(ptype);
        });
      this.listPatroltype = list;
    });
    this.getAreaList1();
    // for (let i = 1; i <= 255; i++) {
    //   this.presetArr.push(i);
    // }
    getBdconfigMainsystem().then((res) => {
      const config = res.data.find((x) => x.systemType.includes("xsxt"));
      if (config) {
        this.updata = {
          sendCode: config.mainSystemCode,
        };
      }
    });
  },
  methods: {
    //获取无人机图片
    getUavImg() {
      var data = {
        patrolPointId: this.currentRow.patrolpointId,
      };
      irUavImg(data)
        .then((response) => {
          this.imageUrl = response.data;
          this.imagePath = response.data;
          // if (response.code == 200) {
          //   this.monitorShow = false;
          // }
        })
        .catch(() => {
          item.loading = false;
        });
      // axios
      //   .post("http://192.168.1.87:18530/ir/channelImg?patrolPointId="+ this.currentRow.patrolpointId)
      //   .then((response) => {
      //     console.log(response.data);
      //     this.imageUrl ="http://192.168.1.116:33333" + response.data
      //     this.imagePath =  response.data
      //   })
      //   .catch((error) => {
      //     console.error("There was an error!", error);
      //   });
    },

    // 无人机画框完成
    uavComplete() {
      var all_data = JSON.parse(localStorage.getItem("drawData"));
      var imgElement = JSON.parse(localStorage.getItem("imgElement"));
      const data = {
        coordinates: all_data,
        filePath: this.imagePath,
        imgWidth: imgElement.width,
        imgHeight: imgElement.height,
        imgType: "infra_yu3",
        // channelCode: this.equipobj.channelCode,
        // channelId: this.equipobj.channelId,
        patrolPointCode: this.currentRow.patrolpointCode,
        patrolPointId: this.currentRow.patrolpointId,
      };
      capturePicture(data)
        .then((response) => {
          // console.log('2222222',response)
          if (response.code == 200) {
            this.monitorShow = false;
          }
        })
        .catch(() => {
          item.loading = false;
        });
      // axios
      //   .post("http://192.168.1.116:18530/simulator/ir/capturePicture", JSON.stringify(data))
      //   .then((response) => {
      //     console.log(response);
      //     if (response.data.code == 200) {
      //        this.monitorShow = false;
      //     }
      //   })
      //   .catch((error) => {
      //     console.error("There was an error!", error);
      //   });
    },
    // tab切换
    handleClick(tab, event) {
      console.log("切换到标签:", tab.name);
      if (tab.name != "home") {
        this.$refs.checkItemSetRef.clearAll();
      }
      this.activeName = tab.name;
    },
    algorithmClick() {
      this.algorithmShow = true;
    },
    //选择完设备后调用
    handleChooseDevicesOk(device) {
      addPatrolpointpreset({
        patroldeviceCode: device.patroldeviceCode,
        eqpbookId: device.eqpbookId,
        patrolpointId: this.currentRow.patrolpointId,
      }).then(() => {
        this.$message.success("绑定成功");
        this.loadPointDevices();
      });
    },
    //显示上传
    eventUpload() {
      this.showRebotUploader = true;
    },
    handleRebotUploaderConfirm() {},
    // 选择算法完毕
    handleChooseAlgOk(result) {
      const noTopList = linq
        .from(lodash.cloneDeep(result))
        .where((x) => x.parent)
        .toArray();
      this.currentRow.algSubtypeIds = linq
        .from(noTopList)
        .select((x) => x.sourceId)
        .toArray()
        .join(",");
      this.currentRow.algSubtypeName = linq
        .from(noTopList)
        .select((x) => x.name)
        .toArray()
        .join(",");
      noTopList.forEach((node) => {
        delete node.parent;
        delete node.checked;
        delete node.isIndeterminate;
        delete node.lowerFlag;
        delete node.upperFlag;
        delete node.name;
        delete node.sourceId;
      });
      this.currentRow.alarmThreshold = JSON.stringify(noTopList);
      this.handleChangePointCode(this.currentRow);
    },
    //点位列表，更换智能识别类型
    chooseAlgorithm(row) {
      this.currentRow = row;
      this.showChooseAlg = true;
    },
    //点击图片上传按钮
    handleUploadPicture(row) {
      this.currentRow = row;
      this.$nextTick(() => {
        this.showUploader = true;
      });
    },
    // 显示基准判别图片数量
    rowPicCount(row) {
      if (row.disRefPicturePath && row.disRefPicturePath.length > 0) {
        return row.disRefPicturePath.split(",").length;
      }
      return 0;
    },
    // 图片上传弹窗，点击确定
    handleUploaderConfirm(fileList) {
      if (fileList.length > 0) {
        this.currentRow.disRefPicturePath = linq
          .from(fileList)
          .select((x) => x.url)
          .toArray()
          .join(",");
      } else {
        this.currentRow.disRefPicturePath = "";
      }
      this.handleChangePointCode(this.currentRow);
    },
    handleCloseTemptrueModel() {
      this.resetForm("formTemptrue");
      const drawRefs = linq
        .from(this.$refs.playerPlayform2.$children)
        .where((x) => x.$vnode.componentOptions.tag === "DrawShape")
        .toArray();
      const drawRef = drawRefs[0];
      drawRef.clearShapes();
    },
    handleCloseVL() {
      this.$refs.playerPlayform.handleCloseAllChannel();
    },
    handleCloseIR() {
      this.$refs.playerPlayform2.handleCloseAllChannel();
    },
    handleLoading(isLoading) {
      this.currentImageRow.loading = isLoading;
    },
    handleImageLoad() {
      this.currentImageRow.loading = false;
      this.$refs.asyncImage.$el.querySelector("img").click();
    },
    handleImageLoadError() {
      this.currentImageRow.loading = false;
      // this.$message.warning('图片预览失败请稍后再试');
    },
    handleViewImages(row) {
      this.currentSrc = "";
      this.currentSrcList = [];
      // this.currentImageRow.loading = false;
      this.showPreviewImages = false;
      console.log("当前查看行数据为", row);
      this.$nextTick(() => {
        this.currentImageRow = row;
        const srcs = row.channelImg.split(",");
        this.currentSrc = srcs[0];
        this.currentSrcList = srcs;
        this.showPreviewImages = true;
        // console.log("11111", this.currentSrcList);
        // this.currentImageRow.loading = false;
      });
    },

    handleAreaTreeCurrentNodeChange(data) {
      this.currentTreeNode = data;
    },
    handleChangePointCode(row) {
      const postData = lodash.cloneDeep(row);
      postData.areaId = this.currentTreeNode.areaId;
      postData.deviceId = this.currentTreeNode.deviceId;
      if (postData.patrolTypeId && postData.patrolTypeId.length > 0) {
        postData.patrolTypeId = postData.patrolTypeId.join(",");
      } else {
        postData.patrolTypeId = "";
      }

      if (row.patrolpointId) {
        proDotTableEditSin(postData);
      } else {
        proDotTableAddSin(postData).then((res) => {
          row.patrolpointId = res.data;
        });
      }
    },
    handleSelectPointCode(node, row) {
      row.patrolTypeId.push(node.id);
      this.handleChangePointCode(row);
    },
    handleDeSelectPointCode(node, row) {
      if (row.patrolTypeId.indexOf(node.id) != -1) {
        row.patrolTypeId.splice(row.patrolTypeId.indexOf(node.id), 1);
        this.handleChangePointCode(row);
      }
    },
    addAction() {
      this.presetData.presetActionList.push({
        actionType: "",
        videoTime: "",
        photoCount: "1",
        photoSeper: "",
      });
    },
    removeAction(index) {
      this.presetData.presetActionList.splice(index, 1);
    },
    mapTree(nodes) {
      nodes.forEach((node) => {
        if (!node.deviceName) {
          node.deviceName = node.areaName;
          if (node.children) {
            this.mapTree(node.children);
          }
        }
      });
    },
    /* 初始化左侧列表数据 */
    getAreaList1() {
      getAreaDeviceTree().then((res) => {
        this.mapTree(res.data);

        this.areaList = res.data;
        let data = {
          deviceId: res.data[0].deviceId,
          mainDeviceId: res.data[0].mainDeviceId,
          areaId: res.data[0].areaId,
          patrolpointName: res.data[0].patrolpointName,
          pageNum: "",
          pageSize: "",
        };
        this.treeobj = data;
        // return proDotManTable(data)
        this.loadList();
      });
      //   .then(res => {
      //     this.tableData = res.rows
      //   })
    },
    /* 点击左侧获取响应节点数据 */
    handleAreaList(e) {
      this.treeobj = {
        deviceId: e.deviceId,
        mainDeviceId: e.mainDeviceId,
        areaId: e.areaId,
        patrolpointName: e.patrolpointName,
        pageNum: "",
        pageSize: "",
      };
      this.formAdd.deviceId = e.deviceId;
      this.formAdd.mainDeviceId = e.mainDeviceId;
      this.formAdd.areaId = e.areaId;
      this.currentRow = null;
      this.loadList();
    },
    loadList(data) {
      this.loading = true;
      proDotManTable(data || this.treeobj)
        .then((res) => {
          this.loading = false;
          res.rows.forEach((row) => {
            row.bindPoints = [];
            row.bindDevices = [];
            if (row.patrolTypeId && /^\d/.test(row.patrolTypeId) == false) {
              var id = row.patrolTypeId;
              row.patrolTypeId = id.substring(1);
            }
            if (row.patrolTypeId && row.patrolTypeId.length > 0) {
              row.patrolTypeId = linq
                .from(row.patrolTypeId.split(","))
                .select((x) => {
                  return parseInt(x);
                })
                .toArray();
            } else {
              row.patrolTypeId = [];
            }
          });
          this.tableData = res.rows;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /* 修改单条监控点位数据 */
    editRows1(index, row) {
      this.showAdd = true;
      this.titleAlert = "修改监控点位";
      this.formAdd = lodash.cloneDeep(row);
    },
    /* 删除单条监控点位数据 */
    deleteRows1(index, row) {
      this.$confirm("确定要删除数据吗？").then((res) => {
        proDotTableDeleteSin(row.patrolpointId).then((res) => {
          this.loadList();
        });
      });
    },
    /* 新增单条监控点位数据t弹窗展示 */
    addAlertShow1() {
      this.showAdd = true;
      this.titleAlert = "添加监控点位";
      this.formAdd.patrolpointName = "";
      this.formAdd.patrolContent = "";
      this.patrolpointCode = "";
    },
    /* 新增、修改单条监控点位数据取消 */
    alertCancel1() {
      this.showAdd = false;
      this.formAdd.patrolpointName = "";
      this.formAdd.patrolContent = "";
    },
    /* 新增、修改单条监控点位数据确认 */
    alertConfirm1() {
      this.$refs.formAdd.validate((valid) => {
        if (valid) {
          this.formAddLoading = true;
          const postData = lodash.cloneDeep(this.formAdd);
          postData.areaId = this.currentTreeNode.areaId;
          postData.deviceId = this.currentTreeNode.deviceId;
          if (postData.patrolTypeId && postData.patrolTypeId.length > 0) {
            postData.patrolTypeId = postData.patrolTypeId.join(",");
          } else {
            postData.patrolTypeId = "";
          }
          if (this.titleAlert == "添加监控点位") {
            proDotTableAddSin(postData)
              .then(() => {
                this.showAdd = false;
                this.resetForm("formAdd");
                this.formAddLoading = false;
                this.loadList();
              })
              .catch(() => {
                this.formAddLoading = false;
              });
          } else {
            proDotTableEditSin(postData)
              .then((res) => {
                this.showAdd = false;
                this.resetForm("formAdd");
                this.formAddLoading = false;
                this.loadList();
              })
              .catch(() => {
                this.formAddLoading = false;
              });
          }
        }
      });
    },
    /* 选择多条监控点位数据 */
    handleSelect1(val) {
      this.mulSelect = val;
    },
    //选中一条巡检点位
    handleCurrentChange(row) {
      this.currentRow = row;
      this.loadDevicePoints();
      this.loadPointDevices();
      // proDotManTable
    },
    // 加载巡检点位绑定的巡检设备 （机器人或者无人机）
    loadPointDevices() {
      if (!this.currentRow.patrolpointId) {
        return;
      }
      this.pointLoading = true;
      listPatrolpointpreset({
        patrolpointId: this.currentRow.patrolpointId,
        noVideo: true,
      })
        .then((res) => {
          this.pointLoading = false;
          this.currentRow.bindDevices = res.rows;
        })
        .catch(() => {
          this.pointLoading = false;
        });
    },

    //加载巡检点位绑定的预置点
    loadDevicePoints() {
      this.pointLoading = true;
      getPatroPointDevicePoints(this.currentRow.patrolpointId)
        .then((res) => {
          this.pointLoading = false;
          res.data.forEach((row) => {
            row.currentSrc = "";
            row.currentSrcList = [];
            row.loading = false;
          });
          this.currentRow.bindPoints = res.data;
        })
        .catch(() => {
          this.pointLoading = false;
        });
    },
    handleEnablePoint(item, index) {
      item.loading = true;
      const postData = lodash.cloneDeep(item);
      postData.isEnable = postData.isEnable == 1 ? 0 : 1;
      editPoint(postData)
        .then(() => {
          item.loading = false;
          item.isEnable = item.isEnable == 1 ? 0 : 1;
          this.$message.success(
            "操作成功：点位已" + (item.isEnable ? "启用" : "停用")
          );
        })
        .catch(() => {
          item.loading = false;
        });
    },
    //解绑预置点
    handleUnbindPoint(item, index) {
      this.$confirm("确定解绑预置点吗？").then((res) => {
        unbindPoint(item.presetPosId).then(() => {
          this.$message.success("解绑预置点成功");
          this.currentRow.bindPoints.splice(index, 1);
        });
      });
    },
    //解绑巡检设备
    handleUnbindDevice(item, index) {
      this.$confirm("确定解绑巡检设备吗？").then((res) => {
        delPatrolpointpreset(item.patrolpointPresetId).then(() => {
          this.$message.success("解设巡检设备绑成功");
          this.currentRow.bindDevices.splice(index, 1);
        });
      });
    },
    /* 删除多条监控点位数据 */
    deleteMul1() {
      this.$confirm("标准点位会被自动过滤，确定要删除点位吗？").then(() => {
        let arr = [];
        if (this.mulSelect.length) {
          for (let v of this.mulSelect) {
            if (!v.stdparolPointId) {
              arr.push(v.patrolpointId);
            }
          }
          if (arr.length == 0) {
            this.$message.warning("您的操作执行失败：没有可删除的点位。");
            return;
          }
          proDotTableDeleteSin(arr.join(",")).then((res) => {
            this.$message.success("操作成功！");
            this.loadList();
          });
        }
      });
    },
    /* 搜索相关名称的监控点位数据 */
    searchTable1() {
      let data = {
        deviceId: this.treeobj.deviceId,
        mainDeviceId: this.treeobj.mainDeviceId,
        areaId: this.treeobj.areaId,
        patrolpointName: this.inputSearch,
        pageNum: "",
        pageSize: "",
      };
      this.loadList(data);
    },
    // 点位配置，弹出框
    pointConfiguration() {
      this.$refs.form.style.width = "72%";
      this.$refs.right.style.display = "inline-block";
    },
    // 点位配置收起
    collectPoint() {
      this.$refs.form.style.width = "100%";
      this.$refs.right.style.display = "none";
    },
    // 可见光弹窗展示
    visibleShow1() {
      if (this.currentRow === null) {
        this.$modal.msgWarning("请先选择在列表中点击一条点位数据!");
        return;
      }
      this.presetDotNum = "";
      this.presetName = "";
      this.presetNumber = "";
      this.is_convert = false;
      this.is_set = false;
      this.monitorShow = true;
      this.monitorType = "vl";
      this.titleLightTitle = "预置位配置";
      bindingMonitorDotList(this.monitorType).then((res) => {
        this.monitorList = res.data;
      });
    },
    // 红外光弹窗展示
    infraredShow1() {
      this.getUavImg();
      // if (this.currentRow == null) {
      //   this.$modal.msgWarning("请先选择在列表中点击一条点位数据!");
      //   return;
      // }
      this.presetDotNum = "";
      this.presetName = "";
      this.presetNumber = "";
      this.is_set = false;
      this.monitorShow = true;
      this.monitorType = "ir";
      this.titleLightTitle = "绑定热成像监控点";
      bindingMonitorDotList(this.monitorType).then((res) => {
        this.monitorList = res.data;
      });
    },
    // 监控点位弹窗获取左侧点位数据
    handleMonitor(e) {
      // console.log(e)
      this.presetDotNum = "";
      this.presetDotDis = true;
      if (e.eqpbookId) {
        this.presetDotDis = false;
        this.equipobj = {
          eqpbookId: e.eqpbookId,
          channelCode: e.channelCode,
          patroldeviceCode: e.patroldeviceCode,
          channelId: e.channelId,
        };
        this.patroldeviceName = e.patroldeviceName;
        let data = {
          patroldeviceCode: e.patroldeviceCode,
          channelId: e.channelId,
          channelCode: e.channelCode,
        };
        this.presetData.patrolpointId = this.currentRow.patrolpointId;
        this.presetData.stdparolPointId = this.currentRow.stdparolPointId;
        this.presetData.deviceId = this.currentRow.deviceId;
        this.presetData.eqpbookId = e.eqpbookId;
        this.presetData.channelId = e.channelId;
        this.handleOpenChannel(data);
      }
    },
    // 云台控制
    controlEquip1(a1) {
      let data = {
        patroldeviceCode: this.equipobj.patroldeviceCode,
        channelCode: this.equipobj.channelCode,
        speed: 5,
        ptzControlType: a1,
      };
      cloudControl(data).then((res) => {
        console.log(res);
      });
    },
    controlEquip2(a1) {
      let data = {
        patroldeviceCode: this.equipobj.patroldeviceCode,
        channelCode: this.equipobj.channelCode,
        speed: 5,
        ptzControlType: a1,
      };
      focalAperture(data).then((res) => {
        console.log(res);
      });
    },
    // 选择预置点 0——255
    presetDotChange1(e) {
      this.cssClass = false;
      this.presetData.presetPosCode = e;
      var obj = this.presetArr.find((item) => {
        return item.dictValue == e;
      });
      if (obj) {
        this.presetName = obj.dictLabel;
        this.presetNumber = obj.dictValue;
        if (obj.cssClass == 1) {
          this.cssClass = true;
        }
      } else {
        this.presetName = "";
        this.presetNumber = "";
      }
    },
    // 转换预置点
    convertPresetDot1() {
      convertPresetDot({
        patroldeviceCode: this.equipobj.patroldeviceCode,
        channelCode: this.equipobj.channelCode,
        presetCode: this.presetDotNum,
        name: this.presetDotNum,
      }).then((res) => {
        this.is_convert = true;
        this.$modal.msgSuccess("转到预置点成功!");
      });
    },
    // 设置预置点
    setPresetDot1() {
      if (this.presetDotDis) {
        this.$modal.msgWarning("请选择通道!");
        return;
      }
      if (this.newpresetName.trim().length === 0) {
        this.$modal.msgWarning("请先输入预置点名称!");
        return;
      }
      var obj = this.presetArr.find((item) => {
        return item.dictLabel == this.newpresetName.trim();
      });
      if (obj) {
        this.$modal.msgWarning("预置点名称重复!");
        return;
      }
      presetDotDistribute({
        patroldeviceCode: this.equipobj.patroldeviceCode,
        channelCode: this.equipobj.channelCode,
        presetCode: this.presetDotNum,
        name: this.newpresetName,
      }).then((res) => {
        this.is_set = true;
        this.$modal.msgSuccess("设置预置点成功!");
        this.popovervisible = false;
        this.getDeviceList();
      });
    },
    //删除预置点
    delPresetDot1() {
      if (this.presetDotNum) {
        this.$confirm("此操作将永久删除该预置点, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.popovervisible = false;
            this.getDeviceList();
          })
          .catch(() => {});
      } else {
        this.$modal.msgWarning("请选择预置点!");
      }
    },
    //编辑预置点
    editPresetDot1() {
      // if (this.cssClass == false) {
      //   this.$modal.msgWarning("该预置点名称不可以修改!");
      //   return;
      // }
      if (this.presetName.trim().length === 0) {
        this.$modal.msgWarning("请先输入预置点名称!");
        return;
      }
      var obj = this.presetArr.find((item) => {
        return item.dictLabel == this.presetName.trim();
      });
      if (obj && obj.dictValue != this.presetDotNum) {
        this.$modal.msgWarning("预置点名称重复!");
        return;
      }
      // console.log('2222222',this.equipobj.patroldeviceCode,this.equipobj.channelCode, this.presetDotNum,this.presetName)
      issueUpdate({
        patrolDeviceCode: this.equipobj.patroldeviceCode,
        channelCode: this.equipobj.channelCode,
        presetCode: this.presetDotNum,
        name: this.presetName,
      }).then((res) => {
        this.is_set = true;
        this.getDeviceList();
        this.$modal.msgSuccess("设置预置点成功!");
      });
    },
    //上一步
    prevStep() {
      this.monitorShow = true;
      this.monitorSecShow = false;
    },
    // 下一步弹窗显示
    nextStep1() {
      if (
        this.presetName === null ||
        this.presetName === undefined ||
        this.presetName.length === 0
      ) {
        this.$modal.msgWarning("请先设置预置点及预置点名称!");
        return;
      }
      // if (!this.is_set) {
      //   this.$modal.msgWarning("请完成设置预置点!");
      //   return false;
      // }
      this.monitorShow = false;
      this.monitorSecShow = true;
      this.drawShapIndex = 0;
      this.presetData.presetPosName = this.presetName;
      this.handleOpenChannel(this.equipobj, true);
    },
    // 选择绘制方式
    chooseDrawShape1(a1, a2) {
      this.drawShapIndex = a1;
      this.startDraw(0, a2);
    },
    // 追加点位数据
    addDot1(shape) {
      //重置testobj参数
      this.testobj = lodash.cloneDeep(this.testobjBackup);
      this.testobj.measureAreaType = shape.type; // 画框形状类型
      this.testobj.coordinate = shape.getData().data;
      this.presetDataShow = true;
    },
    // 删除点位数据
    deleteDot1(index) {
      this.presetData.presetParamList.splice(index, 1);
    },
    // 保存点位数据
    saveDot1() {
      this.presetData.presetPosName = this.presetName;
      this.loadingBind = true;
      bindingPreset(Object.assign({}, this.presetData))
        .then((res) => {
          this.presetData = {
            presetPosCode: "",
            channelId: "",
            eqpbookId: "",
            patrolpointId: "",
            stdparolPointId: "",
            deviceId: "",
            presetPosName: "",
            stopTime: "",
            channelImg: "",
            description: "",
            presetActionList: [],
            presetParamList: [],
          };
          this.testobj = lodash.cloneDeep(this.testobjBackup);
          this.loadingBind = false;
          this.currentRow.patrolpointId = res.data;
          // res.data
          this.monitorSecShow = false;
          this.monitorShow = false;
          this.$message.success("绑定成功");
          this.loadDevicePoints();
        })
        .catch(() => {
          this.loadingBind = false;
        });
      //   } else {
      //     this.$modal.msgWarning('至少绑定一条数据!')
      //   }
    },
    // 下一步弹窗确定
    aletrSecConfirm1() {
      const me = this;
      this.$refs.formTemptrue.validate((valid) => {
        if (valid) {
          me.presetData.presetParamList.push(lodash.cloneDeep(me.testobj));
          me.presetDataShow = false;
        }
      });
    },
    // 下一步弹窗取消
    aletrSecCancel1() {
      this.measureName = "";
      this.measureDistance = "";
      this.radioRate = "";
      this.warnMaxTemp = "";
      this.warnMinTemp = "";
      this.warnAverageTemp = "";
      this.warnDifferenceTemp = "";
      this.alarmMaxTemp = "";
      this.alarmMinTemp = "";
      this.alarmAverageTemp = "";
      this.alarmDifferenceTemp = "";
      this.presetDataShow = false;
    },
    // 绘板框和录像
    startDraw(index, type) {
      const drawRefs = linq
        .from(this.$refs.playerPlayform2.$children)
        .where((x) => x.$vnode.componentOptions.tag === "DrawShape")
        .toArray();
      const drawRef = drawRefs[index];
      drawRef.show();
      this.$nextTick(() => {
        drawRef.init();
        drawRef.startDraw(type || ShapeEnum.rect);
      });
    },
    handleDrawComplete(scope, shape) {
      setTimeout(() => {
        this.addDot1(shape);
      }, 100);
    },
    handleChangeIndex(e) {
      this.currentPlayer = e.player;
      // console.log(this.currentPlayer)
    },
    getDeviceList() {
      getDeviceList(this.patroldeviceCode, this.channelCode).then(
        ({ data }) => {
          this.presetArr = data;
        }
      );
    },
    handleOpenChannel(row, next) {
      this.patroldeviceCode = row.patroldeviceCode;
      this.channelCode = row.channelCode;
      this.presetName = "";
      this.presetNumber = "";
      this.getDeviceList();
      this.$nextTick(() => {
        this.$refs[next ? "playerPlayform2" : "playerPlayform"]
          .openChannel({
            deviceId: 1,
            deviceCode: row.patroldeviceCode,
            channelId: row.channelId,
            channelCode: row.channelCode,
            playerType: "zl",
          })
          .then(() => {});
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.vue-treeselect__menu-container .vue-treeselect__menu {
  // background: #274a58;
}

.vue-treeselect__option--highlight {
  // background: #222f3d;
}

.el-select-dropdown {
  // background-color: #274a58;
}

.el-picker-panel,
.el-select-dropdown,
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: #40486a;
}

.el-input__inner,
.el-textarea__inner,
.el-range-input {
  border-color: #40486a;
}

.el-input.is-disabled .el-input__inner {
  background-color: transparent;
}
.el-input-number--medium .el-input-number__increase,
.el-input-number--medium .el-input-number__decrease {
  background-color: transparent;
}

.el-popover {
  background-color: #222f3d;
  border-color: #222f3dff;
}
</style>
<style lang="scss" scoped>
// tab切换开始
.horizontal-tabs-container {
  margin-bottom: 20px;
}

.tab-content {
  padding: 20px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-top: none;
  min-height: 200px;
}
::v-deep .el-tabs__item {
  // width: 558px;
  text-align: center;
}

/* 自定义标签样式 */
.el-tabs__item {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}
// tab切换结束
::v-deep .el-table .nowarp {
  white-space: nowrap;
  min-width: 50px;
  width: 130px;
  text-overflow: ellipsis;
}

.box {
  display: flex;
  height: 400px;
  width: 100%;
  flex-direction: row;

  .left {
    width: 300px;
    margin-right: 10px;
    height: 100%;
    overflow-y: scroll;
  }

  .middle {
    flex: 1;
  }

  .right {
    width: 290px;
    padding-left: 10px;
  }
}

.el-form-item__content {
  margin-left: 0 !important;
}

.search {
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}

.search input {
  width: 242px;
}

.search .button {
  position: absolute;
  bottom: 0;
  right: 0;
}

.sec-left {
  width: 100%;
  display: flex;
  height: 500px;
}

.sec-left.app-container.card-page {
  height: 100% !important;
  min-height: 0;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.sec-line {
  width: 260px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .sec-a2 {
    height: calc(100% - 58px);
    overflow-y: auto;
  }
}

.sec-left.app-container.card-page > .sec-line {
  flex: 0 0 260px;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #0f124a;
  border: 1px solid #0b2567;
  overflow: hidden;

  .sec-a2 {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
}

.wid {
  width: calc(100% - 260px);
  // width:100%;
  display: flex;

  .right {
    width: 27%;
    border: 2px solid #0b374e;
    position: relative;
    // display: none;
    .collect {
      position: absolute;
      top: 40%;
      left: 0px;
      cursor: pointer;
      z-index: 1;
    }
  }
}

.sec-left.app-container.card-page > .wid {
  flex: 1 1 auto !important;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding-left: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.form {
  // width: 72%;
  width: 100%;
}

.sec-left.app-container.card-page > .wid > .form {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px !important;
  box-sizing: border-box;
  background: #0f124a;
  border: 1px solid #0b2567;
  overflow: hidden;
}

.sec-left.app-container.card-page > .wid > .form > .el-alert,
.sec-left.app-container.card-page > .wid > .form > .line {
  flex: 0 0 auto;
}

.site-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  overflow: hidden;
}

.form > div {
  width: 100%;
}

.el-alert--info.is-light {
  // background-color: #0b374e;
}

.el-alert--info.is-light {
  color: #1890ff;
}

.line {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
}

.line > div span {
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}

.line .search {
  width: 300px;
  margin-bottom: 0;
}

.eq {
  padding-top: 30px;
  padding-left: 10px;
  box-sizing: border-box;
}

.eq-img {
  display: block;
  margin: 0 auto;
  width: 110px;
}

.eq-a1 {
  text-align: center;
  padding-top: 30px;
}

.eq-a1 .eq-a1-d1 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #ffffff;
}

.eq-a1 .eq-a1-d2 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #999;
}

.eq-a2 {
  text-align: center;
  margin-bottom: 10px;

  .el-button {
    display: inline-block;
  }
}

.add-btn {
  display: flex;
  justify-content: flex-end;
}

.r-ti1 {
  line-height: 30px;
  // background: #eee;
  // margin-bottom: 10px;
  padding: 0 20px;
}
.r-box {
  // background-color: #1a77ce2b;
  padding: 10px 5px;
  padding-bottom: 32px;
}

.r-ti2 {
  width: 170px;
  position: relative;
  margin: 0 auto;
}

.r-ti2 img {
  width: 100%;
}

.r-ti2-pos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.r-ti2-pos div {
  width: 20px;
  height: 15px;
  position: absolute;
  cursor: pointer;
  z-index: 2;
}

.r-ti2-pos div:nth-child(1) {
  top: 45px;
  left: 75px;
}

.r-ti2-pos div:nth-child(2) {
  top: 57px;
  left: 99px;
}

.r-ti2-pos div:nth-child(3) {
  top: 79px;
  right: 42px;
}

.r-ti2-pos div:nth-child(4) {
  bottom: 59px;
  left: 99px;
}

.r-ti2-pos div:nth-child(5) {
  bottom: 47px;
  left: 75px;
}

.r-ti2-pos div:nth-child(6) {
  bottom: 59px;
  right: 99px;
}

.r-ti2-pos div:nth-child(7) {
  bottom: 80px;
  left: 42px;
}

.r-ti2-pos div:nth-child(8) {
  top: 57px;
  right: 99px;
}
.r-ti2-pos div:nth-child(9) {
  width: 28px;
  height: 28px;
  top: 71px;
  right: 72px;
}

.r-ti3 {
  width: 100%;
  display: flex;
  padding-top: 20px;
  justify-content: space-between;
}

.r-ti3 .r-ti3-d1 {
  width: 34;
  position: relative;
}

.r-ti3 .r-ti3-d1 img {
  width: 100%;
}

.r-ti3-d2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 97%;
  height: 83%;
}

.r-ti3-d2 div:nth-child(1) {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.r-ti3-d2 div:nth-child(2) {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.r-ti4 {
  padding-top: 5px;
}

.r-ti4 .el-select {
  width: 82%;
  margin-bottom: 10px;
}

.r-ti4 span {
  font-size: 22px;
  margin-left: 3px;
  color: #999;
  cursor: pointer;
}

.right .add-bth1 {
  margin-top: 20px;
}

.fr .add-bth1 {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.fl {
  width: 68%;
}

.fr {
  width: 30%;
  margin-left: 2%;
}

.fr-ti1 {
  color: #454545;
  font-size: 16px;
  margin-bottom: 10px;
}

.fr-ti2 {
  color: #999;
  font-size: 14px;
  margin-bottom: 12px;
}

.fss {
  font-size: 16px;
  cursor: pointer;
  margin-right: 10px;
}

.position {
  width: 100%;
}

.position .position-a1 {
  width: 30%;
  margin-right: 10px;
}

.position .position-a1:last-child {
  margin-right: 0;
}

.position-ti1 {
  margin-bottom: 10px;
}

.position-a1 {
  font-size: 16px;
  color: #454545;
}

.position-a1 div {
  margin-bottom: 10px;
}

.position-a1 div span {
  color: #fa3239;
}

.el-form-item__label {
  white-space: nowrap;
}

.toollist1-a1 {
  width: 100%;
  height: 40px;
  background: rgb(68, 68, 68);
  overflow: hidden;
}

.toollist1-a1 > div {
  width: 60px;
  height: 40px;
  float: right;
  position: relative;
  cursor: pointer;

  &:hover {
    background-color: black;
  }
}

.toollist1-a1 img {
  max-width: 16px;
  max-height: 16px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.el-dialog__body {
  height: 500px;
}

.el-dialog__body .video-box-warp {
  height: 400px;
}

.alert1_img1 {
  width: 24px;
  height: 24px;
  position: relative;
  top: 6px;
  cursor: pointer;
}

.input_slot_a1 {
  line-height: 36px;
  color: #999;
  margin-right: 10px;
}
.card-page .el-table td {
  text-align: center !important;
}

::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: #274a58;
  color: rgb(54, 53, 53);

  .el-button.is-disabled {
    color: rgb(94, 92, 92);
  }
}

::v-deep .el-table__body tr.hover-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body
  tr.hover-row.el-table__row--striped.current-row
  > td.el-table__cell {
  background-color: #274a5855;
}

::v-deep .vue-treeselect__control {
  // background: #274a58;
}

::v-deep .vue-treeselect__multi-value-item {
  // background: #274a58;
}

::v-deep .vue-treeselect__menu-container .vue-treeselect__menu {
  // background: #274a58;
}

// ::v-deep .vue-treeselect__control
// ::v-deep .el-table__body tr.current-row > td.el-table__cell {
//   background-color: #46a6ff87;
//   color: rgb(54, 53, 53);
//   .el-button.is-disabled {
//     color: rgb(94, 92, 92);
//   }
// }
.xg_image_viewer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
}

.input_group_position {
  display: flex;
  width: 100%;

  .input_group_item {
    flex: 1;
    text-align: center;
  }
}

.page-content {
  width: 100%;
  height: 856px;
}

::v-deep .el-table__fixed::before {
  height: 0;
  // background-color: #40486a !important;
}

::v-deep .el-table__fixed-right::before {
  height: 0;
}

::v-deep .el-tabs__item {
  // color: #ffffff;
}

::v-deep .el-tabs__item.is-active {
  color: #1890ff;
}

// ::v-deep .el-tabs__active-bar{
//   background-color: #1890ff;
// }
::v-deep .el-input__count {
  background: none;
}
.centered-input ::v-deep.el-input__inner {
  text-align: center;
}
// 修改添加监控点位行的间隔
.el-form-item {
  margin-bottom: 40px;
}
.btn-site {
  color: #fff !important;
}
</style>
