<template>
  <div class="foundationPit-config">
    <div class="left-menu">
      <div class="menu-title">
        <!-- 高边坡列表 -->
        钢结构列表
      </div>
      <div class="add-btn">
        <!-- 新增高边坡 -->
        <el-button icon="el-icon-circle-plus-outline" @click="addProject">新增钢结构</el-button>
      </div>
      <vue-scroll style="height: calc(100% - 120px)">
        <div class="menu-box" v-if="deepExcavationList.length > 0">
          <div
            class="menu-item"
            :class="{ 'active-item': activeDeep == index }"
            v-for="(item, index) in deepExcavationList"
            :key="index"
            @click="checkDeep(item, index)"
          >
            <div class="menu-h2">{{ item.slopeName }}</div>
            <!-- 安全等级 -->
            <p>
              {{ $t('message.deepFoundConfig.saveLv') }}：{{
                filterLeave(item.safetyLevel)
              }}
            </p>
            <!-- 完工状态 进行中  修复-->
            <p>
              {{ $t('message.deepFoundConfig.finishStatus') }}：
              <span
                :class="{
                  'status-underway': item.status == 1,
                  'status-finish': item.status == 0
                }"
                >{{ projectStatusEnum[item.status] }}</span
              >
            </p>
            <!-- 测点分布 -->
            <el-button type="text" @click="showMap(item)">{{
              $t('message.deepFoundConfig.pointDistribution')
            }}</el-button>
            <div class="actions-box">
              <el-button type="text">
                <i class="el-icon-edit" @click="editProject(item)"></i>
              </el-button>
              <el-button type="text">
                <i
                  class="el-icon-delete"
                  @click="deleteDeepExcavation(item)"
                ></i>
              </el-button>
            </div>
          </div>
        </div>
        <div class="no-data" v-else>
          <img src="@/assets/images/noData2.png" />
          <!-- 暂无数据 -->
          <p>{{ $t('message.deepFoundConfig.noData') }}</p>
        </div>
      </vue-scroll>
    </div>
    <div class="foundationPit-content">
      <div class="foundationPit-table">
        <div class="table-title">
          <!-- 监测信息 -->
          {{ $t('message.deepFoundConfig.monitorInfo') }}
        </div>
        <el-table class="tables" :data="tableData" height="550">
          <!-- 监测内容 -->
          <el-table-column
            prop="monitorTypeName"
            :label="$t('message.deepFoundConfig.monitorContent')"
          >
            <!-- <template slot-scope="scope">
                <div class="a-detail" @click="previewDetail(scope.row)">{{scope.row.projectName}}</div>
            </template>-->
          </el-table-column>
          <!-- 测点数量 -->
          <el-table-column
            prop="measurePointNum"
            :label="$t('message.deepFoundConfig.pointNum')"
          >
            <template slot-scope="scope">
              <span style="color: rgba(42, 46, 63, 0.6)">{{
                scope.row.measurePointNum
              }}</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column :label="$t('message.deepFoundConfig.actions')">
            <template slot-scope="scope">
              <el-button
                type="text"
                class="detail-btn"
                style="margin-right: 58px"
                size="small"
                @click="previewDetail(scope.row, 1)"
              >
                <img
                  style="margin-right: 6px; width: 12px; height: 10px"
                  src="@/assets/images/deepFoundationPitManage/addressManger.png"
                />
                <!-- 测点管理 -->
                {{ $t('message.deepFoundConfig.pointManage') }}
              </el-button>
              <el-button
                type="text"
                class="detail-btn"
                size="small"
                @click="previewDetail(scope.row, 2)"
              >
                <img
                  style="margin-right: 6px; width: 12px; height: 10px"
                  src="@/assets/images/deepFoundationPitManage/chart.png"
                />
                <!-- 实时数据 -->
                {{ $t('message.deepFoundConfig.realData') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pagerBox"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pagInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pagInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pagInfo.total)"
          background
        ></el-pagination>
      </div>
      <!-- 添加高边坡 编辑高边坡-->
      <el-dialog
        class="dialog dialog-center"
        :title="
          formType == 1
            ? $t('message.deepFoundConfig.addDeepFound')
            : $t('message.deepFoundConfig.editDeepFound')
        "
        :modal-append-to-body="false"
        :visible.sync="dialogVisible"
        width="55%"
        @close="closeDialog"
      >
        <div class="dialog-content">
          <vue-scroll>
            <el-form
              ref="form"
              :model="dialogdata"
              :rules="rules"
              label-width="136px"
              size="medium"
              class="dialogFormBox"
            >
              <!-- 高边坡名称 -->
              <el-form-item
                label="钢结构名称"
                prop="slopeName"
              >
                <el-input
                  v-model="dialogdata.slopeName"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="监测设备" prop="projectAddress">
                <el-input
                  v-model="dialogdata.projectAddress"
                  placeholder=""
                  disabled
                >
                <el-button slot="append" @click="innerVisible = true">选择</el-button>
                </el-input>
              </el-form-item>-->
              <!-- 开工日期 -->
              <el-form-item
                :label="$t('message.deepFoundConfig.startBuilTime')"
                prop="startTime"
              >
                <el-date-picker
                  v-model="dialogdata.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('message.deepFoundConfig.changeTime')"
                ></el-date-picker>
              </el-form-item>
              <!-- 完工日期 -->
              <el-form-item
                :label="$t('message.deepFoundConfig.finishBuildTime')"
                prop="endTime"
              >
                <el-date-picker
                  v-model="dialogdata.endTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :placeholder="$t('message.deepFoundConfig.changeTime')"
                ></el-date-picker>
              </el-form-item>
              <!-- 安全等级 -->
              <!-- <el-form-item
                :label="$t('message.deepFoundConfig.saveLv')"
                prop="safetyLevel"
              >
                <el-select
                  v-model="dialogdata.safetyLevel"
                  :placeholder="$t('message.deepFoundConfig.placeholderText2')"
                >
                  <el-option
                    v-for="item in $t('message.deepFoundConfig.safeLvList')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <!-- 高边坡深度 -->
              <!-- <el-form-item
                :label="$t('message.deepFoundConfig.deepFoundDepth') + '(m)'"
                prop="foundationDitchDepth"
              >
                <el-input
                  v-model="dialogdata.foundationDitchDepth"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                  onkeyup="if(isNaN(value))execCommand('undo')"
                  onafterpaste="if(isNaN(value))execCommand('undo')"
                ></el-input>
              </el-form-item> -->
              <!-- 高边坡周长 设置只能输入正数-->
              <!-- <el-form-item
                :label="
                  $t('message.deepFoundConfig.deepFoundPerimeter') + '(m)'
                "
                prop="foundationDitchGirth"
              >
                <el-input
                  v-model="dialogdata.foundationDitchGirth"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                  onkeyup="if(isNaN(value))execCommand('undo')"
                  onafterpaste="if(isNaN(value))execCommand('undo')"
                ></el-input>
              </el-form-item> -->
              <!-- 支护形式 -->
              <!-- <el-form-item
                :label="$t('message.deepFoundConfig.shoringType')"
                prop="supportPattern"
              >
                <el-input
                  v-model="dialogdata.supportPattern"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                ></el-input>
              </el-form-item> -->
              <!-- 监测负责人 -->
              <el-form-item
                :label="$t('message.deepFoundConfig.monitorDutyPeople')"
                prop="surveyDirector"
              >
                <el-input
                  v-model="dialogdata.surveyDirector"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                ></el-input>
              </el-form-item>
              <!-- 监测人员 -->
              <el-form-item
                :label="$t('message.deepFoundConfig.monitorPeople')"
                prop="surveyPersonnel"
              >
                <el-input
                  v-model="dialogdata.surveyPersonnel"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                ></el-input>
              </el-form-item>
              <!-- 当前开挖深度 -->
              <!-- <el-form-item
                :label="$t('message.deepFoundConfig.currentDepth') + '(m)'"
                prop="excavationDepth"
              >
                <el-input
                  v-model="dialogdata.excavationDepth"
                  :placeholder="$t('message.deepFoundConfig.placeholderText')"
                  onkeyup="if(isNaN(value))execCommand('undo')"
                  onafterpaste="if(isNaN(value))execCommand('undo')"
                ></el-input>
              </el-form-item> -->
              <!-- 底板浇策时间 -->
              <!-- <el-form-item
                :label="$t('message.deepFoundConfig.floorBuildTime')"
                prop="floorPourTime"
              >
                <el-date-picker
                  v-model="dialogdata.floorPourTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :placeholder="$t('message.deepFoundConfig.floorBuildTime')"
                ></el-date-picker>
              </el-form-item> -->
              <!-- 监测方案 -->
              <div style="display: flex">
                <el-form-item
                  :label="$t('message.deepFoundConfig.monitorPlan')"
                >
                  <el-upload
                    class="upload-demo"
                    name="files"
                    :action="$store.state.UPLOADURL"
                    :on-remove="
                      (file, fileList) => handleRemove(file, fileList, 1)
                    "
                    :multiple="false"
                    :on-success="(res, file) => handleSuccess(res, file, 1)"
                    :file-list="surveySchemeList"
                    accept=".doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf"
                  >
                    <el-button size="medium" type="primary">
                      <!-- 点击上传 -->
                      {{ $t('message.deepFoundConfig.upload') }}
                    </el-button>
                  </el-upload>
                </el-form-item>
                <!-- 地勘报告 -->
                <el-form-item
                  :label="$t('message.deepFoundConfig.geologicalReport')"
                >
                  <el-upload
                    class="upload-demo"
                    name="files"
                    :action="$store.state.UPLOADURL"
                    :on-remove="
                      (file, fileList) => handleRemove(file, fileList, 2)
                    "
                    :multiple="false"
                    :on-success="(res, file) => handleSuccess(res, file, 2)"
                    :file-list="prospectingReportList"
                    accept=".doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf"
                  >
                    <el-button size="medium" type="primary">
                      <!-- 点击上传 -->
                      {{ $t('message.deepFoundConfig.upload') }}
                    </el-button>
                  </el-upload>
                </el-form-item>
              </div>
              <div style="display: flex">
                <!-- 高边坡设计图纸 -->
                <el-form-item
                  label="钢结构设计图纸"
                  :style="{ width: formType == 1 ? '50%' : '100%' }"
                >
                  <div
                    class="img_box"
                    v-for="(item, index) in deviseDrawingList"
                    :key="index"
                  >
                    <el-image
                      :src="item.url"
                      :preview-src-list="[item.url]"
                    ></el-image>
                    <i
                      class="el-icon-error"
                      @click="deviseDrawingList.splice(index, 1)"
                    ></i>
                  </div>
                  <el-upload
                    :action="$store.state.UPLOADURL"
                    name="files"
                    style="display: inline"
                    list-type="picture-card"
                    accept=".png, .jpg, .jpeg"
                    :on-preview="handlePictureCardPreview"
                    :show-file-list="false"
                    :before-upload="handleBeforeUpload"
                    :on-remove="
                      (file, fileList) => handleRemove(file, fileList, 3)
                    "
                    :on-success="(res, file) => handleSuccess(res, file, 3)"
                    :file-list="deviseDrawingList"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
                <!-- 监测内容 -->
                <el-form-item
                  :label="$t('message.deepFoundConfig.monitorContent')"
                  required
                  v-if="formType == 1"
                >
                  <!-- 全选 -->
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    >{{ $t('message.deepFoundConfig.allCheck') }}</el-checkbox
                  >
                  <el-checkbox-group
                    class="check_group"
                    v-model="checkedContent"
                    @change="handleCheckedCitiesChange"
                  >
                    <el-checkbox
                      v-for="(item, index) in contentList"
                      :label="item.id"
                      :key="index"
                      >{{ item.monitorTypeName }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
              </div>
            </el-form>
          </vue-scroll>
        </div>

        <div class="btn-box">
          <!-- 确定 -->
          <el-button type="primary" @click="submitForm">{{
            $t('message.deepFoundConfig.confirm')
          }}</el-button>
          <!-- 取消 -->
          <el-button @click="closeDialog">{{
            $t('message.deepFoundConfig.cancel')
          }}</el-button>
        </div>
      </el-dialog>
      <!-- <el-dialog
            width="50%"
            title="选择监测设备"
            :visible.sync="innerVisible"
            :modal-append-to-body="false">
        <el-table class="tables" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="num"
            label="设备编号"
            >
          </el-table-column>
          <el-table-column
            prop="projectName"
            label="设备名称"
            >
          </el-table-column>
        </el-table>
      </el-dialog>-->
      <el-dialog
        class="dialog-center"
        :modal-append-to-body="false"
        :visible.sync="dialogVisible2"
        width="50%"
        title="查看大图"
      >
        <img width="100%" :src="dialogImageUrl" alt />
      </el-dialog>
      <!-- 测点管理 -->
      <el-dialog
        width="80%"
        :title="$t('message.deepFoundConfig.pointManage')"
        class="dialog-center"
        :visible.sync="showDetail"
        :modal-append-to-body="false"
        @close="closeDetail"
      >
        <div class="dialog-content">
          <div class="search-box">
            <div class="search-item">
              <!-- 测点编号 -->
              <span class="search-label" style="margin-right: 10px">{{
                $t('message.deepFoundConfig.pointNo')
              }}</span>
              <el-input
                v-model="devNum"
                :placeholder="$t('message.deepFoundConfig.placeholderText')"
              ></el-input>
            </div>
            <div class="search-item">
              <!-- 报警状态 -->
              <span class="search-label" style="margin-right: 10px">{{
                $t('message.deepFoundConfig.alarmStatus')
              }}</span>
              <el-select
                v-model="alarmStatus"
                clearable
                :placeholder="$t('message.deepFoundConfig.placeholderText2')"
              >
                <el-option
                  v-for="item in $t('message.deepFoundConfig.safeLvList')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <!-- 查询 -->
            <el-button type="primary" plain @click="selectMeasurePointList">{{
              $t('message.deepFoundConfig.search')
            }}</el-button>
            <!-- 刷新 -->
            <el-button
              type="warning"
              plain
              @click="selectMeasurePointList(1)"
              >{{ $t('message.deepFoundConfig.refresh') }}</el-button
            >
            <!-- 新增 -->
            <el-button
              type="primary"
              icon="el-icon-document-add"
              @click="addTestPoint"
              >{{ $t('message.deepFoundConfig.add') }}</el-button
            >
          </div>
          <el-table :data="surveyPointDetail" class="tables" height="560">
            <!-- 测点编号 -->
            <el-table-column
              prop="measurePointNumber"
              :label="$t('message.deepFoundConfig.pointNo')"
            ></el-table-column>
            <!-- 测点名称 -->
            <el-table-column
              prop="measurePointName"
              :label="$t('message.deepFoundConfig.pointName')"
            ></el-table-column>
            <!-- 测点位置 -->
            <el-table-column
              prop="measurePointAddr"
              :label="$t('message.deepFoundConfig.pointLocation')"
            ></el-table-column>
            <!-- 传感器编号 -->
            <!-- <el-table-column prop="sensorSn" label="传感器编号"></el-table-column> -->
            <!-- <el-table-column label="工作状态">
              <template slot-scope="scope">
                <span>{{scope.row.workStatus ? scope.row.workStatus == 1 ? "正常":"异常":""}}</span>
              </template>
            </el-table-column>-->
            <!-- 报警状态 -->
            <el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
              <template slot-scope="scope">
                <!-- <span
                  :class="{'alarm_status1': scope.row.alarmState == '0',
                'alarm_status2': scope.row.alarmState == 2,
                'alarm_status3': scope.row.alarmState == 1,
                'alarm_status4': scope.row.alarmState == 3}"
                >
                  {{ scope.row.alarmState == '0' ? $t('message.deepFoundConfig.normal'): scope.row.alarmState == 2
                  ? $t('message.deepFoundConfig.warning'):scope.row.alarmState == 1
                  ? $t('message.deepFoundConfig.alarm'):scope.row.alarmState == 3
                  ? $t('message.deepFoundConfig.control'):""}}
                </span>-->
                <span
                  :class="{
                    alarm_status1: scope.row.alarmState == 1,
                    alarm_status2: scope.row.alarmState == 2,
                    alarm_status3: scope.row.alarmState == 3,
                    alarm_status4: scope.row.alarmState == 4
                  }"
                >
                  {{
                    scope.row.alarmState == 1
                      ? '正常'
                      : scope.row.alarmState == 2
                      ? '超报警'
                      : scope.row.alarmState == 3
                      ? '超控制'
                      : scope.row.alarmState == 4
                      ? '变化速率报警'
                      : ''
                  }}
                </span>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              align="center"
              :label="$t('message.deepFoundConfig.actions')"
            >
              <template slot-scope="scope">
                <!-- 编辑 -->
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="preViewPointData(scope.row, 1)"
                  >{{ '编辑' }}</el-button
                >
                <!-- 详情 -->
                <el-button
                  type="text"
                  icon="el-icon-document"
                  @click="preViewPointData(scope.row, 2)"
                  >{{ $t('message.deepFoundConfig.details') }}</el-button
                >
                <!-- 删除 -->
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="color: #f56c6c"
                  @click="deletePointData(scope.row)"
                  >{{ $t('message.deepFoundConfig.remove') }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="pager"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(total)"
            background
          ></el-pagination>
        </div>
      </el-dialog>
      <!-- 实时数据 -->
      <el-dialog
        width="80%"
        :title="$t('message.deepFoundConfig.realData')"
        class="dialog-center"
        :visible.sync="showActiveDetail"
        :modal-append-to-body="false"
        @close="closeActiveDetail"
      >
        <div class="dialog-content">
          <div class="search-box">
            <div class="search-item">
              <!-- 测点编号 -->
              <span class="search-label" style="margin-right: 10px">{{
                $t('message.deepFoundConfig.pointNo')
              }}</span>
              <el-input
                v-model="exportData.measurePointNumber"
                :placeholder="$t('message.deepFoundConfig.placeholderText')"
              ></el-input>
            </div>
            <div class="search-item">
              <!-- 报警状态 -->
              <span class="search-label" style="margin-right: 10px">{{
                $t('message.deepFoundConfig.alarmStatus')
              }}</span>
              <el-select
                v-model="exportData.alarmState"
                clearable
                :placeholder="$t('message.deepFoundConfig.placeholderText2')"
              >
                <el-option
                  v-for="item in $t('message.deepFoundConfig.safeLvList')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
            <div class="search-item">
              <!-- 采集时间 -->
              <span class="search-label" style="margin-right: 10px">{{
                $t('message.deepFoundConfig.gatherTime')
              }}</span>
              <!-- <el-date-picker
                    v-model="acquisitionTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
              </el-date-picker>-->
              <!--  :default-time="['00:00:00', '23:59:59']" -->
              <el-date-picker
                v-model="acquisitionTime"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :range-separator="$t('message.deepFoundConfig.to')"
                :start-placeholder="$t('message.deepFoundConfig.startTime')"
                :end-placeholder="$t('message.deepFoundConfig.endTime')"
                align="right"
              ></el-date-picker>
            </div>
            <!-- 查询 -->
            <el-button
              type="primary"
              plain
              @click="selectDeepExcavationCurrentData"
              >{{ $t('message.deepFoundConfig.search') }}</el-button
            >
            <el-button type="primary" plain @click="exportDataFn"
              >导出</el-button
            >
          </div>
          <el-table :data="currentPointDetail" class="tables" height="560">
            <el-table-column
              prop="measurePointNumber"
              :label="$t('message.deepFoundConfig.pointNo')"
            ></el-table-column>
            <el-table-column
              prop="sensorSn"
              label="传感器编号"
            ></el-table-column>
            <el-table-column
              prop="fiducialValue"
              label="初始值"
              align="center"
              width="80"
            ></el-table-column>
            <!-- 采集时间 -->
            <el-table-column
              width="220"
              align="center"
              prop="receiveTime"
              :label="$t('message.deepFoundConfig.gatherTime')"
            ></el-table-column>
            <el-table-column
              prop="lastTimeData"
              label="上次值"
            ></el-table-column>
            <el-table-column prop="data" label="本次值">
              <template slot-scope="scope">{{
                scope.row.data + scope.row.unit
              }}</template>
            </el-table-column>
            <el-table-column prop="dataThis" label="本次变化量">
              <template slot-scope="scope">{{
                scope.row.dataThis + scope.row.unit
              }}</template>
            </el-table-column>
            <el-table-column prop="dataTotal" label="累计值">
              <template slot-scope="scope">{{
                scope.row.dataTotal + scope.row.unit
              }}</template>
            </el-table-column>
            <el-table-column
              prop="alarmValue"
              label="累计预警值"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="dataRate"
              label="变化速率"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="rateAlarmValue"
              label="变化速率预警值"
              align="center"
              width="120"
            ></el-table-column>
            <!-- 测点编号 -->
            <!-- <el-table-column
              prop="measurePointNumber"
              :label="$t('message.deepFoundConfig.pointNo')"
            ></el-table-column> -->
            <!-- 测点名称 -->
            <!-- <el-table-column prop="measurePointName" label="测点名称"></el-table-column>
            <el-table-column prop="sensorSn" label="传感器编号"></el-table-column>
            <el-table-column prop="sensorTypeName" label="传感器类型"></el-table-column>
            <el-table-column prop="data" label="值">
              <template slot-scope="scope">{{scope.row.data + scope.row.unit}}</template>
            </el-table-column>
            <el-table-column
              v-for="(item,index) in currentTableData"
              :key="index"
              :prop="item.targetField"
              :label="item.targetName"
            ></el-table-column> -->
            <!-- 采集时间 -->
            <!-- <el-table-column prop="receiveTime" :label="$t('message.deepFoundConfig.gatherTime')"></el-table-column> -->
            <!-- 报警状态 -->
            <el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
              <template slot-scope="scope">
                <span
                  :class="{
                    alarm_status1: scope.row.alarmState == 1,
                    alarm_status2: scope.row.alarmState == 2,
                    alarm_status3: scope.row.alarmState == 3,
                    alarm_status4: scope.row.alarmState == 4
                  }"
                >
                  {{
                    scope.row.alarmState == 1
                      ? '正常'
                      : scope.row.alarmState == 2
                      ? '超报警'
                      : scope.row.alarmState == 3
                      ? '超控制'
                      : scope.row.alarmState == 4
                      ? '变化速率报警'
                      : ''
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="pager"
            @size-change="changeSize"
            @current-change="changeCurrent"
            :current-page="pagInfo2.pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="pagInfo2.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(pagInfo2.total)"
            background
          ></el-pagination>
        </div>
      </el-dialog>
      <!-- '详情':'新增测点' -->
      <!-- :title="isPreview ? $t('message.deepFoundConfig.details'):$t('message.deepFoundConfig.addPoint')" -->
      <el-dialog
        width="45%"
        :title="isPreviewTitle"
        class="dialog-center"
        :visible.sync="showTestPoint"
        :modal-append-to-body="false"
        @close="closeDialog2"
      >
        <div class="dialog-content">
          <div class="form-wrap">
            <vue-scroll style="height: 90%; margin-bottom: 50px">
              <el-form
                size="medium"
                class="formBox"
                :model="testPointForm"
                ref="testPointForm"
                label-width="120px"
                :rules="$t('message.deepFoundConfig.rules2')"
              >
                <!-- 测点编号 -->
                <el-form-item
                  :label="$t('message.deepFoundConfig.pointNo')"
                  prop="measurePointNumber"
                >
                  <el-input
                    :disabled="isPreview"
                    v-model="testPointForm.measurePointNumber"
                    :placeholder="$t('message.deepFoundConfig.placeholderText')"
                  ></el-input>
                </el-form-item>
                <!-- 测点名称 -->
                <el-form-item
                  :label="$t('message.deepFoundConfig.pointName')"
                  prop="measurePointName"
                >
                  <el-input
                    :disabled="isPreview"
                    v-model="testPointForm.measurePointName"
                    :placeholder="$t('message.deepFoundConfig.placeholderText')"
                  ></el-input>
                </el-form-item>
                <!-- 测点位置 -->
                <el-form-item
                  :label="$t('message.deepFoundConfig.pointLocation')"
                  prop="measurePointAddr"
                >
                  <el-input
                    :disabled="isPreview"
                    v-model="testPointForm.measurePointAddr"
                    :placeholder="$t('message.deepFoundConfig.placeholderText')"
                  ></el-input>
                </el-form-item>
                <!-- 采集仪编号 -->
                <!-- <el-form-item :label="$t('message.deepFoundConfig.devNo')" prop="sensorSn">
                  <el-input :disabled="isPreview" v-model="testPointForm.sensorSn" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
                </el-form-item>-->
                <!-- 传感器编号 -->
                <!-- <el-form-item :label="'传感器编号'" prop="sensorSn">
                  <el-input :disabled="isPreview" v-model="testPointForm.sensorSn" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
                </el-form-item>-->
                <!-- 传感器类型 -->
                <!-- <el-form-item :label="$t('message.deepFoundConfig.devType')" prop="highSlopeSensorTypeId"> -->
                <!-- <el-input v-model="testPointForm.highSlopeSensorTypeId"></el-input> -->
                <!-- <el-select style="width: 100%" :disabled="isPreview" v-model="testPointForm.highSlopeSensorTypeId" :placeholder="$t('message.deepFoundConfig.placeholderText2')">
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.id"
                      :label="item.sensorTypeName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>-->
                <!-- 2022-09-27 此处开始注释 是因为更改了添加的字段 预警值报警值控制值-->
                <!-- <div class="sensor" v-for="(item,index) in testPointForm.sensorList" :key="index">
                  <div class="sensorDel">
                    <i
                      v-if="testPointForm.sensorList.length > 1 && show"
                      :disabled="isPreview"
                      @click="deleteRow(index)"
                      class="el-icon-close"
                    ></i>
                  </div>
                  <el-form-item
                    :label="`传感器编号${index +1}`"
                    :prop="item.sensorSn"
                    :rules="{ required: true, message: '请输入传感器编号', trigger: 'blur'}"
                  >
                    <el-input
                      :disabled="isPreview"
                      v-model="item.sensorSn"
                      :placeholder="$t('message.deepFoundConfig.placeholderText')"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="`传感器类型${index +1}`"
                    :prop="item.highSlopeSensorTypeId"
                    :rules="{ required: true, message: '请输入传感器类型', trigger: 'blur'}"
                  >
                    <el-select
                      style="width: 100%"
                      :disabled="isPreview"
                      v-model="item.highSlopeSensorTypeId"
                      :placeholder="$t('message.deepFoundConfig.placeholderText2')"
                    >
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.sensorTypeName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        label-width="120px"
                        :label="`预警${index +1}`"
                        :prop="item.earlyWarningValue"
                        :rules="{ required: true, message: '请输入预警数', trigger: 'blur'}"
                      >
                        <el-input
                          maxlength="10"
                          :disabled="isPreview"
                          v-model.trim="item.earlyWarningValue"
                          :placeholder="$t('message.deepFoundConfig.placeholderText')"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        :label="`报警${index +1}`"
                        :prop="item.alarmValue"
                        :rules="{ required: true, message: '请输入报警数', trigger: 'blur'}"
                      >
                        <el-input
                          :disabled="isPreview"
                          v-model.trim="item.alarmValue"
                          :placeholder="$t('message.deepFoundConfig.placeholderText')"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        :label="`控制${index +1}`"
                        :prop="item.controlValue"
                        :rules="{ required: true, message: '请输入控制数', trigger: 'blur'}"
                      >
                        <el-input
                          :disabled="isPreview"
                          v-model.trim="item.controlValue"
                          :placeholder="$t('message.deepFoundConfig.placeholderText')"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div> -->
                <!-- 此处结束 -->
                <div
                  class="sensor"
                  v-for="(item, index) in testPointForm.sensorList"
                  :key="index"
                >
                  <div class="sensorDel">
                    <i
                      v-if="testPointForm.sensorList.length > 1 && show"
                      :disabled="isPreview"
                      @click="deleteRow(item, index)"
                      class="el-icon-close"
                    ></i>
                  </div>
                  <el-form-item
                    :label="`传感器编号${index + 1}`"
                    :prop="'sensorList.' + index + '.sensorSn'"
                    :rules="sensorRules.sensorSn"
                  >
                    <el-input
                      :disabled="isPreview"
                      v-model="item.sensorSn"
                      :placeholder="
                        $t('message.deepFoundConfig.placeholderText')
                      "
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="`传感器名称${index + 1}`"
                    :prop="'sensorList.' + index + '.sensorName'"
                    :rules="sensorRules.sensorName"
                  >
                    <el-input
                      :disabled="isPreview"
                      v-model="item.sensorName"
                      :placeholder="
                        $t('message.deepFoundConfig.placeholderText')
                      "
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="`传感器类型${index + 1}`"
                    :prop="'sensorList.' + index + '.highSlopeSensorTypeId'"
                    :rules="sensorRules.highSlopeSensorTypeId"
                  >
                    <el-select
                      style="width: 100%"
                      :disabled="isPreview"
                      v-model="item.highSlopeSensorTypeId"
                      :placeholder="
                        $t('message.deepFoundConfig.placeholderText2')
                      "
                    >
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.id"
                        :label="item.sensorTypeName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item
                        label-width="130px"
                        :label="`累计值告警阈值${index + 1}`"
                        :prop="'sensorList.' + index + '.alarmValue'"
                        :rules="sensorRules.alarmValue"
                      >
                        <el-input
                          maxlength="10"
                          :disabled="isPreview"
                          v-model.trim="item.alarmValue"
                          type="number"
                          :placeholder="
                            $t('message.deepFoundConfig.placeholderText')
                          "
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        label-width="130px"
                        :label="`变化速率报警值${index + 1}`"
                        :prop="'sensorList.' + index + '.rateAlarmValue'"
                        :rules="sensorRules.rateAlarmValue"
                      >
                        <el-input
                          :disabled="isPreview"
                          v-model.trim="item.rateAlarmValue"
                          type="number"
                          :placeholder="
                            $t('message.deepFoundConfig.placeholderText')
                          "
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item
                        :label="`基准值${index + 1}`"
                        :prop="'sensorList.' + index + '.fiducialValue'"
                        :rules="sensorRules.fiducialValue"
                      >
                        <el-input
                          :disabled="isPreview"
                          v-model.trim="item.fiducialValue"
                          type="number"
                          :placeholder="
                            $t('message.deepFoundConfig.placeholderText')
                          "
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>

                <el-button
                  type="primary"
                  v-if="show"
                  @click="addRow()"
                  size="medium"
                  plain
                  >添加</el-button
                >
                <!-- v-if="testPointForm.sensorList.length > 1" -->
                <!-- <el-button type="primary" v-if="testPointForm.sensorList.length > 1" @click="deleteRow()" size="medium" plain>删除</el-button> -->
              </el-form>
            </vue-scroll>
            <div class="btn-box" v-if="!isPreview">
              <!-- 确认 -->
              <el-button
                type="primary"
                icon="el-icon-circle-check"
                @click="addPointData"
                >{{ $t('message.deepFoundConfig.confirm') }}</el-button
              >
              <!-- 取消 -->
              <el-button icon="el-icon-circle-close" @click="closeDialog2">{{
                $t('message.deepFoundConfig.cancel')
              }}</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 测点分布 -->
      <el-dialog
        width="95%"
        :title="$t('message.deepFoundConfig.pointDistribution')"
        class="dialog-center"
        :visible.sync="showPointMap"
        :modal-append-to-body="false"
        @close="closePointMap"
      >
        <div class="dialog-content map-box">
          <div class="map-left">
            <vue-scroll>
              <div class="add-btn" @click="openAddImgDialog">
                <i class="el-icon-circle-plus-outline"></i>
                <!-- 添加布置图 -->
                <div>{{ $t('message.deepFoundConfig.addLayoutImg') }}</div>
              </div>
              <ul>
                <li
                  v-for="(item, index) in deepImgList"
                  :key="index"
                  :class="{ 'img-active': activeImgIndex == index }"
                >
                  <img :src="item.imageUrl" @click="checkImg(item, index)" />
                  <div class="actions-box">
                    <span>{{ item.planeFigureName }}</span>
                    <!-- 编辑 -->
                    <el-button
                      type="text"
                      style="color: #84b2fa"
                      icon="el-icon-edit"
                      @click="editDeepimg(item)"
                    ></el-button>
                    <!-- 删除 -->
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      style="color: #f56c6c"
                      @click="deleteDeepImg(item)"
                    ></el-button>
                    <!-- {{$t('message.deepFoundConfig.remove')}} -->
                  </div>
                </li>
              </ul>
            </vue-scroll>
          </div>
          <div class="map-right">
            <div class="action-box" v-if="activeImgUrl">
              <div v-show="!isEditPoint" class="btn-item" @click="editPoint">
                <img
                  src="@/assets/images/deepFoundationPitManage/address.png"
                />
                <!-- 布点 -->
                {{ $t('message.deepFoundConfig.stationing') }}
              </div>
              <div v-show="isEditPoint" class="btn-item" @click="savePoint">
                <img src="@/assets/images/deepFoundationPitManage/save.png" />
                <!-- 保存 -->
                {{ $t('message.deepFoundConfig.save') }}
              </div>
              <div class="btn-item" @click="changeImgSize(1)">
                <i class="el-icon-zoom-in"></i>
                <!-- 放大 -->
                {{ $t('message.deepFoundConfig.zoomIN') }}
              </div>
              <div class="btn-item" @click="changeImgSize(2)">
                <i class="el-icon-zoom-out"></i>
                <!-- 缩小 -->
                {{ $t('message.deepFoundConfig.zoomOut') }}
              </div>
            </div>
            <div ref="mapbox">
              <vue-scroll style="height: 780px">
                <div
                  class="img-box"
                  :style="{
                    width: imgWidth + 'px',
                    height: imgHeight + 'px',
                    transform: 'scale(' + imgZoom + ')'
                  }"
                >
                  <img
                    ref="map"
                    v-if="activeImgUrl"
                    style="border: 1px solid #eee"
                    :style="{
                      width: imgWidth + 'px',
                      height: imgHeight + 'px'
                    }"
                    :src="activeImgUrl"
                  />
                  <ul class="point-list" v-if="activeImgUrl">
                    <li
                      v-for="(item, index) in pointList"
                      :key="index"
                      :ref="'point' + index"
                      :style="{
                        top: item.mapY + 'px',
                        left: item.mapX + 'px',
                        display: item.status,
                        transform:
                          'scale(' + 1 / imgZoom + ')' + ' ' + item.transform
                      }"
                    >
                      <div
                        class="point-dialog"
                        :class="{
                          right_detail:
                            item.mapY < 110 + item.detailList.length * 24 ||
                            item.mapX < 108
                        }"
                        :style="{ display: item.showDetail ? 'block' : 'none' }"
                      >
                        <i
                          class="el-icon-error"
                          @click="item.showDetail = false"
                        ></i>
                        <div class="point-title">
                          {{ item.measurePointName }}
                        </div>
                        <div class="point-content">
                          <!-- <div v-for="(item2,index2) in item.detailList" :key="index2">
                                <p>传感器编号：{{item2.sensorSn}}</p>
                                <p>传感器名称：{{item2.sensorTypeName == null ? '无' : item2.sensorTypeName }}</p>
                                <p>采集时间：{{item2.receiveTime == null ? '无' : item2.receiveTime}}</p>
                          </div>-->
                          <p
                            v-for="(item2, index2) in item.detailList"
                            :key="index2"
                          >
                            {{ item2.keyName }}：{{
                              item.currentdata[item2.key]
                            }}
                          </p>
                          <!-- 采集时间： -->
                          <!-- <p>{{$t('message.deepFoundConfig.gatherTime')}}：{{item.currentdata['receiveTime']}}</p> -->
                        </div>
                      </div>
                      <div
                        class="point-dialog point-title2"
                        :class="{
                          right_title: item.mapY < 47 || item.mapX < 22
                        }"
                        :style="{ display: item.showDetail ? 'none' : 'block' }"
                        @click="item.showDetail = true"
                      >
                        <span>{{ item.measurePointName }}</span>
                      </div>
                      <img
                        @mousedown.prevent="move(index, $event)"
                        @mouseup="up(index, $event)"
                        style="width: 70px; height: 70px"
                        src="@/assets/images/deepFoundationPitManage/ljz.png"
                      />
                    </li>
                  </ul>
                </div>
                <div
                  class="pointFixed"
                  ref="pointFixed"
                  :style="{
                    top: pointTop + 'px',
                    left: pointLeft + 'px',
                    display: pointStatus
                  }"
                >
                  <img
                    style="width: 70px; height: 70px"
                    src="@/assets/images/deepFoundationPitManage/ljz.png"
                  />
                </div>
              </vue-scroll>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 添加平面图 -->
      <!-- :title="$t('message.deepFoundConfig.addImg')" -->
      <el-dialog
        width="35%"
        :title="title"
        class="dialog-center"
        :visible.sync="showAddImg"
        @close="closeAddImg"
        :modal-append-to-body="false"
      >
        <div class="dialog-content" style="height: 368px">
          <el-form
            size="medium"
            class="formBox"
            style="margin-bottom: 68px"
            :model="testPointImgForm"
            ref="testPointImgForm"
            label-width="120px"
            :rules="$t('message.deepFoundConfig.rules3')"
          >
            <!-- 平面图名称 -->
            <el-form-item
              :label="$t('message.deepFoundConfig.imgName')"
              prop="planeFigureName"
            >
              <el-input
                v-model="testPointImgForm.planeFigureName"
                :placeholder="$t('message.deepFoundConfig.placeholderText')"
              ></el-input>
            </el-form-item>
            <!-- 测点 -->
            <el-form-item
              :label="$t('message.deepFoundConfig.point')"
              prop="measurePointIds"
            >
              <el-select
                style="width: 100%"
                v-model="testPointImgForm.measurePointIds"
                multiple
                :placeholder="$t('message.deepFoundConfig.placeholderText2')"
              >
                <el-option
                  v-for="item in testPointOptions"
                  :key="item.id"
                  :label="item.measurePointName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 示意图 -->
            <el-form-item
              :label="$t('message.deepFoundConfig.img')"
              prop="fileList"
            >
              <div
                class="img_box"
                v-for="(item, index) in testPointImgForm.fileList"
                :key="index"
              >
                <el-image
                  :src="item.url"
                  :preview-src-list="[item.url]"
                  style="width: 148px; height: 148px; margin-right: 20px"
                ></el-image>
                <i
                  class="el-icon-error"
                  @click="testPointImgForm.fileList.splice(index, 1)"
                ></i>
              </div>
              <el-upload
                :action="$store.state.UPLOADURL"
                name="files"
                style="display: inline"
                list-type="picture-card"
                :show-file-list="false"
                :on-preview="handlePictureCardPreview"
                :on-remove="(file, fileList) => handleRemove(file, fileList, 4)"
                :on-success="(res, file) => handleSuccess(res, file, 4)"
                :file-list="testPointImgForm.fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button icon="el-icon-circle-close" @click="closeAddImg">{{
              $t('message.deepFoundConfig.cancel')
            }}</el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submitImgConfig"
              >{{ $t('message.deepFoundConfig.confirm') }}</el-button
            >
          </div>
        </div>
      </el-dialog>
      <!-- 提示 -->
      <el-dialog
        width="35%"
        :title="$t('message.deepFoundConfig.hint')"
        class="dialog-center"
        :visible.sync="deleteInfo"
        :modal-append-to-body="false"
      >
        <p style="font-size: 18px; display: flex; align-items: center">
          <i
            class="el-icon-warning"
            style="color: #e6a23c; font-size: 28px; margin-right: 10px"
          ></i>
          <!-- 此操作将永久删除该文件, 是否继续? -->
          {{ $t('message.deepFoundConfig.hintContent') }}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeMsg(1)">{{
            $t('message.deepFoundConfig.cancel')
          }}</el-button>
          <el-button type="primary" @click="checkMsg">{{
            $t('message.deepFoundConfig.confirm')
          }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  addDeepExcavationEngineeringApi,
  editDeepExcavationEngineeringApi,
  queryByIdDeepExcavationEngineeringApi,
  deleteDeepExcavationEngineeringApi,
  selectDeepExcavationListApi,
  getDefaultMonitorTypeListApi,
  selectDeepExcavationMonitorTypeListApi,
  selectMeasurePointListApi,
  selectDeepExcavationSensorTypeListApi,
  addDeepExcavationMeasurePointApi,
  editDeepExcavationMeasurePointApi,
  deleteDeepExcavationMeasurePointApi,
  selectDeepExcavationCurrentDataListApi,
  selectDeepExcavationCurrentDataApi,
  addDeepExcavationPlaneFigureApi,
  editDeepExcavationPlaneFigureApi,
  selectDeepExcavationPlaneFigureListApi,
  selectDeepExcavationPlaneFigureCoordinateApi,
  selectDeepExcavationAllMeasurePointListApi,
  deleteDeepExcavationPlaneFigureApi,
  editDeepExcavationPlaneFigureCoordinateApi,
  getDetailDeepExcavationApi
} from '@/assets/js/api/highSlopeMonitor.js'
export default {
  data() {
    return {
      // 完工状态枚举
      projectStatusEnum: {
        0: "未开工",
        1: "进行中",
        2: "已完成",
      },

      pickerOptions: {
          disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7;
          }
      },
      show: true,
      deleteInfo: false,
      isPreview: false,
      isPreviewTitle: '', //标题
      testPointOptions: [],
      sensorRules: {
        sensorSn: [{ required: true, message: '必填', trigger: 'blur' }],
        sensorName: [{ required: true, message: '必填', trigger: 'blur' }],
        highSlopeSensorTypeId: [{ required: true, message: '必填', trigger: 'change' }],
        alarmValue: [{ required: true, message: '必填', trigger: 'blur' }],
        rateAlarmValue: [{ required: true, message: '必填', trigger: 'blur' }],
        fiducialValue: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      rules3: {
        planeFigureName: [
          { required: true, message: '请输入平面图名称', trigger: 'blur' }
        ],
        measurePointIds: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个测点',
            trigger: 'change'
          }
        ],
        fileList: [
          {
            type: 'array',
            required: true,
            message: '请上传示意图',
            trigger: 'blur'
          },
          {
            type: 'array',
            required: true,
            message: '请上传示意图',
            trigger: 'change'
          }
        ]
      },
      testPointImgForm: {
        planeFigureName: '',
        fileList: [],
        measurePointIds: []
      },
      activeImgIndex: 0,
      typeOptions: [],
      deepImgList: [],
      currentTableData: [],
      activeDeep: 0,
      deepExcavationList: [],
      currentPointDetail: [],
      pointList: [],
      pointStatus: 'none',
      pointTop: 0,
      pointLeft: 0,
      imgWidth: 0,
      imgHeight: 0,
      imgStartWidth: 0,
      imgStartHeight: 0,
      imgZoom: 1,
      pointIndex: '',
      showPointMap: false,
      showTestPoint: false,
      testPointData: [],
      showDetail: false,
      surveyPointDetail: [],
      tableData: [],
      pagInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 1
      },
      pagInfo2: {
        pageNo: 1,
        pageSize: 10,
        total: 1
      },
      testPointForm: {
        measurePointNumber: '', // 测点编号
        measurePointName: '', // 测点名称
        measurePointAddr: '', // 测点位置
        // sensorSn: '',
        // highSlopeSensorTypeId: '',
        sensorList: [
          {
            sensorSn: '', // 传感器编号
            highSlopeSensorTypeId: '', // 传感器类型
            earlyWarningValue: '', // 预警
            alarmValue: '', //报警
            controlValue: '' //控制
          }
        ] // 传感器编号类型数组
      },
      dialogVisible: false,
      dialogVisible2: false,
      formTitle: '',
      innerVisible: false,
      dialogImageUrl: '',
      // safeLvList: [
      //   {
      //     label: "一级",
      //     value: 1
      //   },
      //   {
      //     label: "二级",
      //     value: 2
      //   },
      //   {
      //     label: "三级",
      //     value: 3
      //   },
      //   {
      //     label: "四级",
      //     value: 4
      //   }
      // ],
      rules: {
        slopeName: [
          { required: true, message: '请输入边坡名称', trigger: 'blur' }
        ],
        startTime: [
          {
            type: 'string',
            required: true,
            message: '请选择开工日期',
            trigger: 'change'
          }
        ],
        endTime: [
          {
            type: 'string',
            required: true,
            message: '请选择完工日期',
            trigger: 'change'
          }
        ],
        // foundationDitchDepth: [
        //   { required: true, message: '请输入高边坡深度', trigger: 'blur' }
        // ],
        // foundationDitchGirth: [
        //   { required: true, message: '请输入高边坡周长', trigger: 'blur' }
        // ],
        // excavationDepth: [
        //   { required: true, message: '请输入开挖深度', trigger: 'blur' }
        // ]
      },
      rules2: {
        measurePointNumber: [
          { required: true, message: '请输入测点编号', trigger: 'blur' }
        ],
        measurePointName: [
          { required: true, message: '请输入测点名称', trigger: 'blur' }
        ],
        measurePointAddr: [
          { required: true, message: '请输入测点位置', trigger: 'blur' }
        ],
        sensorSn: [
          { required: true, message: '请输入采集仪编号', trigger: 'blur' }
        ],
        highSlopeSensorTypeId: [
          { required: true, message: '请选择传感器类型', trigger: 'change' }
        ]
      },
      dialogdata: {
        slopeName: '',
        // projectAddress: "",
        startTime: '',
        endTime: '',
        safetyLevel: 1,
        foundationDitchDepth: '',
        foundationDitchGirth: '',
        supportPattern: '',
        surveyDirector: '',
        surveyPersonnel: '',
        excavationDepth: '',
        floorPourTime: ''
      },
      // fileList:[],
      deviseDrawingList: [],
      surveySchemeList: [],
      prospectingReportList: [],
      dialogTitle: '监测项管理',
      checkAll: false,
      isIndeterminate: false,
      checkedContent: [],
      contentList: [],
      devNum: '',
      alarmStatus: '',
      statusList: [
        {
          value: '0',
          label: '正常'
        },
        {
          value: '1',
          label: '预警'
        },
        {
          value: '2',
          label: '报警'
        },
        {
          value: '3',
          label: '控制'
        }
      ],
      showActiveDetail: false,
      acquisitionTime: [],
      exportData: {
        alarmState: '',
        measurePointNumber: '',
        startTime: '',
        endTime: ''
      },
      startX: '',
      startY: '',
      ratio: 1,
      projectSn: '',
      formType: '', // 1.新增高边坡 2.编辑高边坡
      editId: '',
      monitorTypeId: '',
      relaId: '',
      deepExcavationId: '',
      activeImgUrl: '',
      showAddImg: false,
      isEditPoint: false,
      removeData: '',
      removeType: '',
      total: 0,
      pageNo: 1,
      pageSize: 10,
      title: '',
      dialogType: 1, // 1添加 2 编辑
      id: '',
    }
  },
  created() {
    this.projectSn = this.$store.state.projectSn
    this.getDefaultMonitorTypeList()
    this.selectDeepExcavationList()
    this.selectDeepExcavationSensorTypeList()
  },
  mounted() {},
  methods: {
    addRow() {
      let obj = {
        sensorSn: '',
        sensorName: '', //传感器名称
        highSlopeSensorTypeId: '',
        alarmValue: '', //累计值告警阈值
        rateAlarmValue: '', //变化速率报警值
        fiducialValue: '' //基准值
        // earlyWarningValue: "", // 预警
        // alarmValue: "", //报警
        // controlValue: "" //控制
      }
      // console.log('--------------',this.testPointForm.sensorList)
      this.testPointForm.sensorList.push(obj)
    },
    deleteRow(val, index) {
      if (val.id != '') {
        this.$confirm(
          '此操作将永久删除当前传感器以及相关联的数据, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            this.testPointForm.sensorList.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    checkMsg() {
      // 1、布置图 2、测点
      if (this.removeType == 1) {
        deleteDeepExcavationPlaneFigureApi({ id: this.removeData.id }).then(
          (res) => {
            if (res.code == 200) {
              // 删除成功！
              this.$message.success(
                this.$t('message.deepFoundConfig.removeSuccess')
              )
              this.activeImgUrl = ''
              this.pointList = []
              this.selectDeepExcavationPlaneFigureList()
            }
          }
        )
      } else if (this.removeType == 2) {
        deleteDeepExcavationMeasurePointApi({
          measurePointNumber: this.removeData.measurePointNumber
        }).then((res) => {
          if (res.code == 200 && res.success) {
            this.$message.success(
              this.$t('message.deepFoundConfig.removeSuccess')
            )
            this.selectMeasurePointList()
          }
        })
      }
      this.deleteInfo = false
    },
    closeMsg(val) {
      if (val == 1) {
        // 已取消删除
        this.$message.info(this.$t('message.deepFoundConfig.cancelRemove'))
      }
      this.removeType = ''
      this.removeData = ''
      this.deleteInfo = false
    },
    closeActiveDetail() {
      this.exportData.measurePointNumber = ''
      this.exportData.alarmState = ''
      this.showActiveDetail = false
      this.selectDeepExcavationMonitorTypeList()
    },
    closeDetail() {
      this.selectDeepExcavationMonitorTypeList()
      this.devNum = ''
      this.alarmStatus = ''
      this.showDetail = false
    },
    closePointMap() {
      this.activeImgUrl = ''
      this.showPointMap = false
    },
    filterLeave(val) {
      console.log(val)
      let text = ''
      // 一级 二级 三级 四级 五级
      switch (val) {
        case '1':
          text = this.$t('message.deepFoundConfig.lv1')
          break
        case '2':
          text = this.$t('message.deepFoundConfig.lv2')
          break
        case '3':
          text = this.$t('message.deepFoundConfig.lv3')
          break
        case '4':
          text = this.$t('message.deepFoundConfig.lv4')
          break
        case '5':
          text = this.$t('message.deepFoundConfig.lv5')
          break
      }
      console.log(text)
      return text
    },
    editPoint() {
      this.isEditPoint = true
      // 成功 请开始移动点位！
      this.$notify({
        title: this.$t('message.deepFoundConfig.success'),
        message: this.$t('message.deepFoundConfig.notifyMsg'),
        type: 'success'
      })
    },
    savePoint() {
      console.log(this.pointList)
      let arr = []
      this.pointList.forEach((item) => {
        arr.push({
          id: item.id,
          mapX: item.mapX,
          mapY: item.mapY,
          pointId: item.pointId,
          planeFigureId: item.planeFigureId
        })
      })
      // let data ={
      //   list: arr
      // }
      editDeepExcavationPlaneFigureCoordinateApi(arr).then((res) => {
        console.log(res)
        if (res.code && res.success) {
          // 保存成功！
          this.$message.success(this.$t('message.deepFoundConfig.saveSuccess'))
        }
      })
      this.isEditPoint = false
    },
    // 关闭添加图片弹窗
    closeAddImg() {
      this.showAddImg = false
      this.testPointImgForm = {
        planeFigureName: '',
        fileList: [],
        measurePointIds: []
      }
      this.$refs['testPointImgForm'].resetFields()
    },

    // 列表查询所有测点
    selectDeepExcavationAllMeasurePointList() {
      selectDeepExcavationAllMeasurePointListApi({
        deepExcavationId: this.deepExcavationId
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.testPointOptions = res.result
        }
      })
    },
    // 添加布置图
    openAddImgDialog() {
      this.title = '添加平面图'
      this.dialogType = 1
      this.showAddImg = true
      this.selectDeepExcavationAllMeasurePointList()
    },
    // 编辑布置图
    editDeepimg(val) {
      console.log('编辑', val)
      this.title = '编辑平面图'
      this.dialogType = 2
      this.showAddImg = true
      this.id = val.id
      this.selectDeepExcavationAllMeasurePointList()
      this.testPointImgForm.planeFigureName = val.planeFigureName
      this.testPointImgForm.measurePointIds = val.measurePointIds.split(',')
      this.testPointImgForm.fileList = [{ url: val.imageUrl }]
    },
    // 添加编辑保存
    submitImgConfig() {
      this.$refs['testPointImgForm'].validate((valid) => {
        if (valid) {
          let data = {
            planeFigureName: this.testPointImgForm.planeFigureName,
            measurePointIds: this.testPointImgForm.measurePointIds.join(','),
            imageUrl: this.testPointImgForm.fileList[0].url,
            projectSn: this.projectSn,
            deepExcavationId: this.deepExcavationId
          }
          console.log(data)
          if (this.dialogType == 1) {
            addDeepExcavationPlaneFigureApi(data).then((res) => {
              console.log(res)
              if (res.code == 200) {
                this.$message.success(
                  this.$t('message.deepFoundConfig.addSuccess')
                )
                this.selectDeepExcavationPlaneFigureList()
                this.showAddImg = false
              }
            })
          } else {
            ;(data.id = this.id),
              editDeepExcavationPlaneFigureApi(data).then((res) => {
                // console.log("--------编辑成功了吗", res);
                if (res.code == 200) {
                  this.$message.success('编辑成功')
                  this.showAddImg = false
                  this.testPointImgForm.measurePointIds = []
                  console.log('编辑旺盛之后', this.testPointImgForm.measurePointIds)
                  let val = {
                    id: res.result.id,
                    deepExcavationId: res.result.deepExcavationId
                  }
                  this.selectDeepExcavationPlaneFigureCoordinate(val)
                }
              })
          }
        }
      })
    },
    // 删除布置图
    deleteDeepImg(val) {
      this.removeType = 1
      this.removeData = val
      this.deleteInfo = true
    },
    // 获取点位位置信息
    selectDeepExcavationPlaneFigureCoordinate(val) {
      selectDeepExcavationPlaneFigureCoordinateApi({
        planeFigureId: val.id,
        deepExcavationId: val.deepExcavationId
      }).then((res) => {
        console.log('点点点', res)
        if (res.code == 200) {
          res.result.forEach((item) => {
            item.status = 'block'
            ;(item.transform = ''), (item.showDetail = false)
            let arr = []
            // let obj = JSON.parse(item.dataField);
            // let obj = item.sensorlist
            // for (let key in obj) {
            //   arr.push({
            //     key: key,
            //     keyName: obj[key]
            //   });
            // }
            item.detailList = arr
          })
          this.pointList = res.result
          console.log(this.pointList)
        }
      })
    },
    // 切换平面图
    checkImg(val, index) {
      console.log(val)
      this.imgZoom = 1
      this.activeImgIndex = index
      this.activeImgUrl = val.imageUrl
      this.isEditPoint = false
      this.selectDeepExcavationPlaneFigureCoordinate(val)
      this.$nextTick(() => {
        this.getNaturalSize()
      })
    },
    selectDeepExcavationPlaneFigureList() {
      let data = {
        deepExcavationId: this.deepExcavationId,
        projectSn: this.projectSn
      }
      selectDeepExcavationPlaneFigureListApi(data).then((res) => {
        if (res.code == 200) {
          console.log('布点图的信息', res)
          this.deepImgList = res.result
          if (this.deepImgList.length > 0) {
            this.checkImg(this.deepImgList[0], 0)
          }
        }
        console.log(res)
      })
    },
    selectDeepExcavationCurrentData() {
      let data = this.exportData
      ;(data.startTime =
      this.acquisitionTime !== null && this.acquisitionTime !== undefined && this.acquisitionTime !== '' ? this.acquisitionTime[0] : ''),
        (data.endTime =
        this.acquisitionTime !== null && this.acquisitionTime !== undefined && this.acquisitionTime !== '' ? this.acquisitionTime[1] : ''),
        (data.pageNo = this.pagInfo2.pageNo),
        (data.pageSize = this.pagInfo2.pageSize),
        (data.relaId = this.relaId)
      selectDeepExcavationCurrentDataListApi(data).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.currentPointDetail = res.result.data.records
          console.log('分页信息', res)
          this.pagInfo2.total = res.result.data.total
        }
      })
    },
    // 导出数据
    exportDataFn() {
      ;(this.exportData.startTime =
        this.acquisitionTime != '' ? this.acquisitionTime[0] : ''),
        (this.exportData.endTime =
          this.acquisitionTime != '' ? this.acquisitionTime[1] : ''),
        console.log('=======导出传进去的参数', this.exportData)
      window.location.href =
        this.$http.defaults.baseURL +
        'xmgl/deepExcavationCurrentData/exportData?alarmState=' +
        this.exportData.alarmState +
        '&measurePointNumber=' +
        this.exportData.measurePointNumber +
        '&projectSn=' +
        this.projectSn +
        '&relaId=' +
        this.relaId +
        '&startTime=' +
        this.exportData.startTime +
        '&endTime=' +
        this.exportData.endTime
    },
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
      minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
      seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
      var timer =
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      console.log(timer)
      return timer
    },
    // 提交测点数据   测点新增按钮
    addPointData() {
      if (this.isPreview) {
        this.closeDialog2()
        return
      }
      this.$refs['testPointForm'].validate((valid) => {
        if (valid) {
          let data = this.testPointForm
          data.relaId = this.relaId
          data.deepExcavationId = this.deepExcavationId // 深高边坡id
          if (this.isPreviewTitle == '新增测点') {
            addDeepExcavationMeasurePointApi(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(
                  this.$t('message.deepFoundConfig.addSuccess2')
                )
                this.selectMeasurePointList()
                this.showTestPoint = false
              }
            })
          } else {
            console.log('=====编辑的参数', data)
            editDeepExcavationMeasurePointApi(data).then((res) => {
              if (res.code == 200) {
                this.$message.success('编辑成功')
                this.selectMeasurePointList()
                this.showTestPoint = false
              }
            })
          }
        }
      })
    },

    // 1编辑 2详情  else新增
    preViewPointData(val, type) {
      console.log('查询详情', val)
      if (type == 1) {
        this.isPreview = false
        this.show = true
        this.isPreviewTitle = '编辑'
        console.log('======', this.isPreviewTitle)
      } else {
        this.isPreview = true
        this.show = false
        this.isPreviewTitle = '详情'
      }
      this.showTestPoint = true
      let data = {}
      // this.testPointForm = val
      data.measurePointNumber = val.measurePointNumber
      data.relaId = val.relaId
      getDetailDeepExcavationApi(data).then((res) => {
        console.log('--------------查询的结果', res.result)
        res.result.sensorList.map((item) => {
          console.log('item', item)
          item.earlyWarningValue = String(item.earlyWarningValue)
          item.alarmValue = String(item.alarmValue)
          item.controlValue = String(item.controlValue)
          item.rateAlarmValue = String(item.rateAlarmValue)
          item.fiducialValue = String(item.fiducialValue)
          item.highSlopeSensorTypeId = String(item.highSlopeSensorTypeId)
          return
        })
        console.log('转换类型', res.result.sensorList)
        this.testPointForm = res.result
        this.testPointForm.thresholdList = res.result.sensorList
      })

      // this.testPointData = val.thresholdList
    },
    // 删除测点数据
    deletePointData(val) {
      console.log('sssss', val)
      // deleteDeepExcavationMeasurePointApi({id: val.id}).then(res=>{
      //   if(res.code == 200 && res.success){
      //     this.$message.success('删除成功！')
      //     this.selectMeasurePointList()
      //   }
      // })
      this.removeData = val
      this.removeType = 2
      this.deleteInfo = true
    },
    // 关闭新增测点弹窗
    closeDialog2() {
      this.testPointForm = {
        measurePointNumber: '',
        measurePointName: '',
        measurePointAddr: '',
        sensorList: [
          {
            sensorSn: '', // 传感器编号
            highSlopeSensorTypeId: '', // 传感器类型
            earlyWarningValue: '', // 预警
            alarmValue: '', //报警
            controlValue: '' //控制
          }
        ]
      }
      this.isPreview = false
      this.$refs['testPointForm'].resetFields()
      this.testPointForm.sensorList.forEach((item) => {
        item.alarmValue = ''
        item.earlyWarningValue = ''
        item.controlValue = ''
      })
      this.selectMeasurePointList()
      // this.testPointData = this.testPointData
      this.showTestPoint = false
    },
    // 查询传感器类型
    selectDeepExcavationSensorTypeList() {
      selectDeepExcavationSensorTypeListApi().then((res) => {
        console.log(res)
        if (res.code == 200 && res.result) {
          this.typeOptions = res.result
        }
      })
    },
    // 查询高边坡监测内容
    selectDeepExcavationMonitorTypeList() {
      if (this.deepExcavationList.length > 0) {
        let data = {
          deepExcavationId: this.deepExcavationList[this.activeDeep].id,
          pageNo: this.pagInfo.pageNo,
          pageSize: this.pagInfo.pageSize,
          projectSn: this.projectSn
        }
        selectDeepExcavationMonitorTypeListApi(data).then((res) => {
          if (res.code == 200) {
            console.log(res.result.records)
            console.log('监测信息', res)
            this.tableData = res.result.records
            this.pagInfo.total = res.result.total
          }
        })
      }
    },
    // 选中高边坡
    checkDeep(item, index) {
      this.activeDeep = index
      this.pagInfo.pageNo = 1
      this.pagInfo.pageSize = 10
      this.selectDeepExcavationMonitorTypeList()
    },
    // 查询高边坡列表
    selectDeepExcavationList() {
      selectDeepExcavationListApi({ projectSn: this.projectSn }).then((res) => {
        console.log(res, '----高边坡列表')
        if (res.code == 200 && res.result) {
          this.deepExcavationList = res.result
          this.activeDeep = 0
          this.selectDeepExcavationMonitorTypeList()
        }
      })
    },
    // 获取监测内容选项列表
    getDefaultMonitorTypeList() {
      getDefaultMonitorTypeListApi().then((res) => {
        // console.log(res, '---监测内容')
        this.contentList = res.result
      })
    },
    changeImgSize(val) {
      if (val == 1) {
        this.imgZoom = this.imgZoom + 0.5
        console.log(this.imgZoom)
        // this.pointList.forEach(item=>{
        //   item.x = Math.ceil(item.x)*1.5
        //   item.y = Math.ceil(item.y)*1.6
        // })
      } else if (val == 2) {
        this.imgZoom =
          this.imgZoom - 0.5 <= 0 ? this.imgZoom : this.imgZoom - 0.5
        console.log(this.imgZoom)
        // if((this.imgZoom - 0.5) > 0){
        //   this.pointList.forEach(item=>{
        //     item.x = Math.ceil(item.x)/1.5
        //     item.y = Math.ceil(item.y)/1.5
        //   })
        // }
      }
    },
    showMap(val) {
      this.showPointMap = true
      this.deepExcavationId = val.id
      this.selectDeepExcavationPlaneFigureList()
    },
    // 新增测点
    addTestPoint() {
      this.show = true
      this.isPreviewTitle = '新增测点'
      this.showTestPoint = true
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    handleCheckAllChange(val) {
      let arr = []
      this.contentList.forEach((item) => {
        arr.push(item.id)
      })
      console.log(arr)
      this.checkedContent = val ? arr : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      let checkedCount = value.length
      this.checkAll = checkedCount === this.contentList.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.contentList.length
    },
    SizeChange(val) {
      console.log(val)
      this.pagInfo.pageSize = val
      this.selectDeepExcavationMonitorTypeList()
    },
    CurrentChange(val) {
      console.log(val)
      this.pagInfo.pageNo = val
      this.selectDeepExcavationMonitorTypeList()
    },
    changeSize(val) {
      console.log(val)
      this.pagInfo2.pageSize = val
      this.selectDeepExcavationCurrentData()
    },
    changeCurrent(val) {
      console.log(val)
      this.pagInfo2.pageNo = val
      this.selectDeepExcavationCurrentData()
    },
    addProject() {
      this.formType = 1
      this.dialogVisible = true
    },
    // 编辑获取高边坡详情
    editProject(data) {
      this.formType = 2
      this.dialogVisible = true
      this.editId = data.id
      queryByIdDeepExcavationEngineeringApi({ id: data.id }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.dialogdata = {
            slopeName: res.result.slopeName,
            startTime: res.result.startTime,
            endTime: res.result.endTime,
            safetyLevel: Number(res.result.safetyLevel),
            foundationDitchDepth: res.result.foundationDitchDepth,
            foundationDitchGirth: res.result.foundationDitchGirth,
            supportPattern: res.result.supportPattern,
            surveyDirector: res.result.surveyDirector,
            surveyPersonnel: res.result.surveyPersonnel,
            excavationDepth: res.result.excavationDepth,
            floorPourTime: res.result.floorPourTime
          }
          this.deviseDrawingList = res.result.deviseDrawing
            ? JSON.parse(res.result.deviseDrawing)
            : []
          this.surveySchemeList = res.result.surveyScheme
            ? JSON.parse(res.result.surveyScheme)
            : []
          this.prospectingReportList = res.result.prospectingReport
            ? JSON.parse(res.result.prospectingReport)
            : []
        }
      })
    },
    // 删除文件
    handleRemove(file, fileList, type) {
      console.log(file, fileList, type)
      if (type == 1) {
        this.surveySchemeList = fileList
        console.log(this.surveySchemeList)
      } else if (type == 2) {
        this.prospectingReportList = fileList
        console.log(this.prospectingReportList)
      } else if (type == 3) {
        this.deviseDrawingList = fileList
        console.log(this.deviseDrawingList)
      } else if (type == 4) {
        this.testPointImgForm.fileList = fileList
      }
      // this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleBeforeUpload(file) {
      console.log(file)
      if (
        file.type != 'image/png' &&
        file.type != 'image/jpg' &&
        file.type != 'image/jpeg'
      ) {
        // 请上传图片！
        this.$message.error(this.$t('message.deepFoundConfig.uploadError'))
        return false
      }
    },
    // 上传文件
    handleSuccess(res, file, type) {
      //  type   1、监测方案 2、地勘报告 3、高边坡设计图纸 4.示意图
      console.log(res, file, type)
      if (res.status == 'SUCCESS') {
        // 上传成功！
        this.$message.success(this.$t('message.deepFoundConfig.uploadSuccess'))
        if (type == 1) {
          this.surveySchemeList.push({
            name: file.name,
            url: this.$store.state.FILEURL + file.response.data[0].imageUrl
          })
          console.log(this.surveySchemeList)
        } else if (type == 2) {
          this.prospectingReportList.push({
            name: file.name,
            url: this.$store.state.FILEURL + file.response.data[0].imageUrl
          })
          console.log(this.prospectingReportList)
        } else if (type == 3) {
          this.deviseDrawingList.push({
            name: file.name,
            url: this.$store.state.FILEURL + file.response.data[0].imageUrl
          })
          console.log(this.deviseDrawingList)
        } else if (type == 4) {
          this.testPointImgForm.fileList = [
            {
              name: file.name,
              url: this.$store.state.FILEURL + file.response.data[0].imageUrl
            }
          ]
          this.$refs['testPointImgForm'].clearValidate()
          console.log(this.testPointImgForm.fileList)
        }
      }
    },
    // 查看大图
    handlePictureCardPreview(file, fileList) {
      console.log(21)
      this.dialogImageUrl = file.url
      this.dialogVisible2 = true
    },
    // 添加、编辑高边坡
    submitForm() {
      console.log(this.dialogdata)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.checkedContent.length == 0 && this.formType == 1) {
            // 请选择监测内容
            this.$message.error(
              this.$t('message.deepFoundConfig.placeholderText2') +
                this.$t('message.deepFoundConfig.monitorContent')
            )
            return
          }
          let data = this.dialogdata
          data.deviseDrawing =
            this.deviseDrawingList.length > 0
              ? JSON.stringify(this.deviseDrawingList)
              : ''
          data.surveyScheme =
            this.surveySchemeList.length > 0
              ? JSON.stringify(this.surveySchemeList)
              : ''
          data.prospectingReport =
            this.prospectingReportList.length > 0
              ? JSON.stringify(this.prospectingReportList)
              : ''
          data.projectSn = this.projectSn
          // this.safeLvList.forEach(item=>{
          //   if(item.value == this.dialogdata.safeLv){
          //     data.safetyLevel = item.label
          //   }
          // })
          // deviseDrawingList:[],
          // surveySchemeList:[],
          // prospectingReportList: [],
          if (this.formType == 1) {
            data.status = 1
            data.highSlopeMonitorTypeIds = this.checkedContent.join(',')
            addDeepExcavationEngineeringApi(data).then((res) => {
              console.log(res)
              if (res.code == 200) {
                // 新增成功！
                this.$message.success(
                  this.$t('message.deepFoundConfig.addSuccess2')
                )
                this.closeDialog()
                this.selectDeepExcavationList()
              }
            })
          } else if (this.formType == 2) {
            data.id = this.editId
            editDeepExcavationEngineeringApi(data).then((res) => {
              console.log(res)
              if (res.code == 200) {
                // 编辑成功！
                this.$message.success(
                  this.$t('message.deepFoundConfig.editSuccess')
                )
                this.closeDialog()
                this.selectDeepExcavationList()
              }
            })
          }
        }
      })
      // this.closeDialog()
    },
    // 删除高边坡
    deleteDeepExcavation(data) {
      // 此操作将永久删除该高边坡, 是否继续?
      // 提示
      // 确定
      // 取消
      this.$confirm(
        this.$t('message.deepFoundConfig.hintContent'),
        this.$t('message.deepFoundConfig.hint'),
        {
          confirmButtonText: this.$t('message.deepFoundConfig.confirm'),
          cancelButtonText: this.$t('message.deepFoundConfig.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          deleteDeepExcavationEngineeringApi({ id: data.id }).then((res) => {
            if (res.code == 200) {
              this.tableData = []
              this.selectDeepExcavationList()
              // '删除成功!'
              this.$message({
                type: 'success',
                message: this.$t('message.deepFoundConfig.removeSuccess')
              })
            }
          })
        })
        .catch(() => {
          // '已取消删除'
          this.$message({
            type: 'info',
            message: this.$t('message.deepFoundConfig.cancelRemove')
          })
        })
    },
    // 重置高边坡提交表单
    resetForm() {
      this.dialogdata = {
        slopeName: '',
        // projectAddress: "",
        startTime: '',
        endTime: '',
        safetyLevel: 1,
        foundationDitchDepth: '',
        foundationDitchGirth: '',
        supportPattern: '',
        surveyDirector: '',
        surveyPersonnel: '',
        excavationDepth: '',
        floorPourTime: ''
      }
      this.editId = ''
      this.checkedContent = []
      this.deviseDrawingList = []
      this.surveySchemeList = []
      this.prospectingReportList = []
      this.checkAll = false
      this.isIndeterminate = false
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs['form'].resetFields()
      this.resetForm()
    },
    previewDetail(val, type) {
      this.relaId = val.id
      this.deepExcavationId = val.deepExcavationId
      console.log(val)
      if (type == 1) {
        this.selectMeasurePointList()
        this.showDetail = true
        this.testPointData = []
        if (val.dataField) {
          console.log(JSON.parse(val.dataField))
          let obj = JSON.parse(val.dataField)
          for (var key in obj) {
            this.testPointData.push({
              targetField: key,
              targetName: obj[key],
              openType: 2,
              warningValue: 0,
              alarmValue: 0,
              controlValue: 0
            })
          }
        }
      } else if (type == 2) {
        if (val.dataField) {
          console.log(JSON.parse(val.dataField))
          let obj = JSON.parse(val.dataField)
          this.currentTableData = []
          for (var key in obj) {
            this.currentTableData.push({
              targetField: key,
              targetName: obj[key]
            })
          }
          console.log(this.currentTableData)
        }
        let nowTime = this.selectNowDate();
        this.acquisitionTime = [nowTime.split(' ')[0] + ' ' + '00:00:00',nowTime]
        this.selectDeepExcavationCurrentData()
        this.showActiveDetail = true
      }
    },
    // 列表查询深高边坡-测点信息
    selectMeasurePointList(val) {
      if (val == 1) {
        this.alarmStatus = ''
        this.devNum = ''
      }
      let data = {
        alarmState: this.alarmStatus ? this.alarmStatus : '',
        measurePointNumber: this.devNum,
        relaId: this.relaId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      console.log('参数', data)
      selectMeasurePointListApi(data).then((res) => {
        console.log(res)
        if (res.code == 200) {
          console.log('====查询测点管理的列表', res)
          this.surveyPointDetail = res.result.records
          this.total = res.result.total
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.selectMeasurePointList()
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.selectMeasurePointList()
    },

    // 获取高边坡布置图图片大小
    getNaturalSize(callback) {
      let Domlement = this.$refs['map']
      console.dir(Domlement)
      var natureSize = {}
      if (window.naturalWidth && window.naturalHeight) {
        natureSize.width = Domlement.naturalWidth
        natureSize.height = Domlement.naturalHeight
        // let heightRatio = natureSize.height / 569
        // this.mapDate.width = natureSize.width*heightRatio
      } else {
        console.log(213)
        let _this = this
        var img = new Image()
        img.src = Domlement.src
        img.onload = function () {
          natureSize.width = img.width
          natureSize.height = img.height
          console.log('------', natureSize)
          _this.imgWidth = natureSize.width
          _this.imgHeight = natureSize.height
          _this.imgStartWidth = img.width
          _this.imgStartHeight = img.width
          console.log(
            _this.$refs['mapbox'].clientWidth,
            _this.$refs['mapbox'].clientHeight
          )

          // let heightRatio = 780 / natureSize.height
          // let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width
          // if(heightRatio < widthRatio){
          //     // _this.imgWidth = natureSize.width*heightRatio
          //     // _this.imgHeight = natureSize.height*heightRatio
          //     _this.imgZoom = heightRatio
          // } else {
          //     // _this.imgWidth = natureSize.width*widthRatio
          //     // _this.imgHeight = natureSize.height*widthRatio
          //     _this.imgZoom = widthRatio
          // }
          // _this.mapDate.width = natureSize.width*heightRatio
          if (callback) {
            return callback(natureSize)
          }
        }
      }
      console.log(natureSize)
      // return natureSize;
    },
    // 添加鼠标监听事件
    move(val, e) {
      console.log(val, e.pageX, e.pageY)
      this.ratio = window.localStorage.getItem('zoom')
      this.startX = e.pageX
      this.startY = e.pageY
      this.pointIndex = val
      // console.dir(this.$refs['point'+val])
      // this.$refs['point'+val].style.opacity = '0'
      let _this = this
      console.log(this.pointList[val])
      if (this.isEditPoint) {
        this.pointList[val].status = 'none'
        // this.$refs['point'+ val].style.display = 'none'
        document.body.addEventListener('mousemove', this.movePoint, false)
        document.body.addEventListener('mouseup', this.removeUp, false)
      }

      // document.body.addEventListener('mousemove',(e)=>{
      //   _this.movePoint(e,val,ratio,a,b)
      // },false)
      // document.body.addEventListener('mouseup',()=>{
      //     // _this.movePoint(e,val,ratio,a,b,')
      //     window.removeEventListener('mousemove',(e)=>{
      //       // console.log(1232)
      //       _this.movePoint(e,val,ratio,a,b)
      //     },false)
      // })
    },
    // 清除鼠标监听时间
    removeUp(e) {
      let top = (e.pageY - this.startY) / this.imgZoom,
        left = (e.pageX - this.startX) / this.imgZoom
      console.log(top, left)
      this.pointStatus = 'none'
      let x = Math.ceil(
          Number(
            this.pointList[this.pointIndex].mapX
              ? this.pointList[this.pointIndex].mapX
              : 0
          ) +
            left / this.ratio
        ),
        y = Math.ceil(
          Number(
            this.pointList[this.pointIndex].mapY
              ? this.pointList[this.pointIndex].mapY
              : 0
          ) +
            top / this.ratio
        )
      console.log(x, y, this.imgWidth, this.imgHeight)
      if (y <= this.imgHeight && y >= 0) {
        this.pointList[this.pointIndex].mapY = y
      }
      if (x <= this.imgWidth && x >= 0) {
        this.pointList[this.pointIndex].mapX = x
      }
      this.pointList[this.pointIndex].status = 'block'
      console.log(this.pointList)
      this.$forceUpdate()
      // this.pointList[this.pointIndex].transform = 'translate(-150%, -150%)'
      // this.$refs['point'+this.pointIndex].style.transform = 'translate(-150%, -150%)'
      // this.$refs['point'+ this.pointIndex].style.display = 'block'
      document.body.removeEventListener('mousemove', this.movePoint, false)
      document.body.removeEventListener('mouseup', this.removeUp, false)
    },
    // 移动鼠标
    movePoint(target) {
      // console.log(target)
      // console.log(window.localStorage.getItem('zoom'))

      // console.dir(document.getElementById('app'))
      let bodyWidth = document.body.clientWidth,
        bodyHeight = document.body.clientHeight,
        appWidth = document.getElementById('app').clientWidth * this.ratio,
        appHeight = document.getElementById('app').clientHeight * this.ratio,
        a = bodyWidth - appWidth,
        b = bodyHeight - appHeight
      // console.log(document.body.clientHeight,document.body.clientWidth)
      // this.$refs['pointFixed'].style.top = ((target.pageY)/ratio - (b*0.5)/ratio)-15/ratio + 'px'
      // this.$refs['pointFixed'].style.left = ((target.pageX)/ratio - (a*0.5)/ratio)-15/ratio+ 'px'
      if (this.ratio != 1) {
        this.$refs['pointFixed'].style.transform = 'translate(0px, -75px)'
        this.pointTop = target.pageY / this.ratio - (b * 0.5) / this.ratio
        this.pointLeft = target.pageX / this.ratio - (a * 0.5) / this.ratio - 60
      } else {
        this.pointTop = target.pageY
        this.pointLeft = target.pageX - 60
      }

      this.pointStatus = 'block'

      // console.log(target)
    },
    // 鼠标抬起
    up(val, e) {
      let _this = this
      if (this.isEditPoint) {
        window.removeEventListener('mousemove', function (e) {
          _this.movePoint()
        })
      }
      // this.$refs['point'+val].style.display = '1'
    }
  }
}
</script>

<style lang="less" scoped>
.sensor {
  border: 1px solid #e7e8eb;
  margin-bottom: 10px;
  padding: 20px 30px 10px 25px;
  border-radius: 10px;
  .sensorDel {
    position: absolute;
    right: 68px;
  }
}
.foundationPit-config {
  // background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
}
.menu-title {
  font-size: 15px;
  font-weight: 600;
  position: relative;
  padding: 15px 0;
  padding-left: 10px;
}
.menu-title::before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 13px;
  background: #5181f6;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.left-menu {
  width: 320px;
  margin-right: 3px;
  background: #fff;
  padding: 15px;
  padding-top: 0;
  .add-btn {
    margin-top: 10px;
    margin-bottom: 23px;
    /deep/.el-button {
      background: rgba(#5181f6, 0.1);
      border: 0;
      color: #262d48;
      width: 280px;
      height: 36px;
      line-height: 36px;
      padding: 0;
      display: block;
      margin: 0 auto;
      .el-icon-circle-plus-outline {
        color: #5181f6;
      }
    }
  }
  .no-data {
    text-align: center;
    padding-top: 50px;
    img {
      margin-bottom: 20px;
    }
  }
  .menu-box {
    .menu-item {
      width: 280px;
      margin: 0 auto;
      background: #fbfbfb;
      border: 1px solid #eaeaea;
      padding: 20px 25px 15px;
      box-sizing: border-box;
      margin-bottom: 20px;
      border-radius: 3px;
      cursor: pointer;
      .menu-h2 {
        color: #2a2e3f;
        font-weight: 600;
        margin-bottom: 9px;
        font-size: 16px;
        width: 100%;
        word-break: break-all;
      }
      p {
        font-size: 14px;
        color: rgba(#2a2e3f, 0.8);
        margin-bottom: 7px;
        span {
          padding: 3px 6px;
          border-radius: 10px;
        }
        .status-underway {
          color: #44d7b6;
          background: rgba(#44d7b6, 0.15);
        }
        .status-finish {
          color: #5484f6;
          background: rgba(#5484f6, 0.15);
        }
      }
      /deep/.el-button {
        padding: 0;
        margin-bottom: 14px;
      }
      .actions-box {
        /deep/.el-button {
          padding: 0;
          margin-bottom: 0px;
          .el-icon-delete {
            color: #f24c32;
          }
        }
      }
    }
    .active-item {
      background: #fff;
      border: 0;
      box-shadow: 0px 2px 10px 0px rgba(42, 46, 63, 0.18);
      border: 1px solid #409eff;
    }
  }
}
.foundationPit-content {
  background: #fff;
  flex: 1;
}
.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .search-item {
    display: flex;
    align-items: center;
    padding: 20px;
    .search-label {
      // width: 80px;
      white-space: nowrap;
    }
  }
}
.foundationPit-table {
  padding: 0 26px;
  padding-top: 60px;
  .table-title {
    color: #262d48;
    font-weight: 600;
    margin-bottom: 26px;
  }
  // .tables{
  //   height: 660px;
  // }
  .a-detail {
    color: #409eff;
    cursor: pointer;
  }
  .detail-btn {
    // border-color: #409EFF;
    color: rgba(#2a2e3f, 0.6);
    border-radius: 3px;
  }
  .detail-btn:hover {
    color: #5181f6;
  }
}
.dialogFormBox {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  // margin-bottom: 80px;
  /deep/.el-form-item {
    display: inline-block;
    width: 50%;
    .el-select {
      width: 260px !important;
    }
    .el-date-picker {
      width: 260px !important;
    }
    .el-cascader {
      width: 260px !important;
    }
    .el-input {
      width: 260px !important;
    }
  }
}
.dialog-content {
  height: 650px;
  margin-bottom: 30px;
}
.btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.backText {
  padding: 10px;
}
.alarm_status1 {
  padding: 4px 6px;
  // background: #44d7b6;
  color: #44d7b6;
  border-radius: 3px;
}
.alarm_status2 {
  padding: 4px 6px;
  // background: #7953f6;
  color: #f76462;
  border-radius: 3px;
}
.alarm_status3 {
  padding: 4px 6px;
  // background: #f67f52;
  color: #f76462;
  border-radius: 3px;
}
.alarm_status4 {
  padding: 4px 6px;
  // background: #5484f6;
  color: #f76462;
  border-radius: 3px;
}
.formBox {
  width: 85%;
  margin: 0 auto;
  .tables {
    min-height: 0;
  }
}
.form-wrap {
  height: 620px;
}
.map-box {
  display: flex;
  height: 820px;
  .map-left {
    width: 300px;
    height: 802px;
    .uploadBox {
      width: 250px;
      margin: 0 auto;
      margin-bottom: 16px;
    }
    .add-btn {
      width: 250px;
      margin: 0 auto;
      margin-bottom: 16px;
      text-align: center;
      background: rgba(#d8d8d8, 0.3);
      height: 132px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .el-icon-circle-plus-outline {
        margin-bottom: 8px;
        font-size: 26px;
        color: #b4c8f3;
      }
    }
    ul {
      width: 250px;
      margin: 0 auto;
      li {
        width: 100%;
        margin-bottom: 16px;
        cursor: pointer;
        border: 1px solid #cdcdcd;
        padding: 0 10px;
        padding-top: 10px;
        box-sizing: border-box;
        img {
          width: 100%;
          margin: 0 auto;
          display: block;
          height: 132px;
          // border: 1px solid #CDCDCD;
        }
        .actions-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 10px;
          span {
            flex: 1;
          }
        }
      }
      .img-active {
        border-color: #4a8bff;
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
      }
    }
  }
  .map-right {
    // flex: 1;
    width: calc(100% - 300px);
    border: 1px solid #e6e6e6;
    padding: 14px;
    height: 802px;
    .action-box {
      display: flex;
      margin-bottom: 10px;
      .btn-item {
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5181f6;
        border: 1px solid #5181f6;
        border-radius: 3px;
        cursor: pointer;
        width: 62px;
        height: 24px;
        img {
          margin-right: 4px;
        }
        i {
          margin-right: 4px;
        }
      }
    }
    .img-box {
      // margin: 0 auto;
      // height: 100%;
      // position: relative;
      // top: 50%;
      // transform: translateY(-50%);
      transform-origin: left top;
      position: relative;
      .point-list {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        li {
          display: inline-block;
          position: absolute;
        }
        .point-dialog {
          background: rgba(#2a2e3f, 0.9);
          color: #fff;
          width: 238px;
          height: auto;
          box-sizing: border-box;
          padding: 0 16px;
          padding-bottom: 18px;
          position: absolute;
          left: 50%;
          top: -8px;
          transform: translate(-50%, -100%);
          font-size: 12px;
          .el-icon-error {
            position: absolute;
            right: 12px;
            top: 10px;
            cursor: pointer;
          }
          .point-title {
            // height: 40px;
            line-height: 20px;
            border-bottom: 1px solid rgba(254, 255, 255, 1);
            margin-bottom: 13px;
            font-size: 14px;
            word-break: break-all;
            padding: 10px 0;
          }
          .point-content {
            font-size: 14px;
            p {
              line-height: 24px;
            }
          }
        }
        .point-title2 {
          width: auto;
          height: auto;
          white-space: nowrap;
          font-size: 16px;
          padding: 10px 20px;
        }
        .right_detail {
          left: 30px;
          top: 0;
          transform: translate(0, 0);
        }
        .right_title {
          left: 30px;
          top: -8px;
          transform: translate(0, 0);
        }
      }
      img {
        // display: block;
        // margin: 0 auto;
        // position: relative;
        // top: 50%;
        // transform: translateY(-50%);
      }
    }
  }
}
.dialog-center {
  overflow: auto;
  /deep/.el-dialog {
    margin: 0 !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.check_group {
  /deep/.el-checkbox {
    width: 50%;
    margin: 0;
  }
}
.pointFixed {
  position: fixed;
}
.pagerBox2 {
  margin-top: 20px;
}
/deep/.el-upload-list__item-name {
  width: 300px;
}
/deep/.el-dialog__title {
  font-weight: bold;
}
.img_box {
  width: 148px;
  height: 148px;
  margin-right: 20px;
  display: inline-block;
  position: relative;
  .el-icon-error {
    position: absolute;
    right: -9px;
    top: -9px;
    font-size: 18px;
    color: #f56c6c;
    cursor: pointer;
  }
  .el-image {
    width: 100%;
    height: 100%;
  }
}
.pager {
  margin-top: 5px;
  text-align: center;
  .el-pager li.active {
    background-color: @--bg-color-primary!important;
  }
  button:disabled,
  .btn-next,
  .btn-prev {
    background-color: transparent !important;
  }
}
</style>