<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="queryParams.deviceName"
          placeholder="请输入设备名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
          <el-option
            v-for="dict in dict.type.device_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工作状态" prop="workingStatus">
        <el-select v-model="queryParams.workingStatus" placeholder="工作状态" clearable>
          <el-option
            v-for="dict in dict.type.device_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['camera:device:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['camera:device:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['camera:device:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['camera:device:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :visible.sync="loading" :data="deviceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="设备名称" align="center" prop="deviceName"/>
      <el-table-column label="品牌" align="center" prop="brand"/>
      <el-table-column label="是否告警" align="center" prop="openWarn">
        <template slot-scope="scope">
          <el-switch
            v-if="scope.row.deviceType != 6"
            v-model="scope.row.openWarn"
            active-value="1"
            inactive-value="0"
            @change="handleIsOpenWarnChange(scope.row)"
          ></el-switch>
          <el-switch
            v-if="scope.row.deviceType == 6"
            v-model="scope.row.openWarn"
            active-value="1"
            inactive-value="0"
            @change="sendWaterPressCommand(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="charger"/>
      <el-table-column label="电话" align="center" prop="chargerTel"/>
      <el-table-column prop="deviceType" label="设备类型" width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.device_type" :value="scope.row.deviceType"/>
        </template>
      </el-table-column>
      <el-table-column prop="workingStatus" label="工作状态" width="100" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.device_status" :value="scope.row.workingStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.deviceType != 8"
            size="mini"
            type="text"
            icon="el-icon-link"
            @click="handleDataMonitor(scope.row)"
            v-hasPermi="['camera:device:data']"
          >监测数据
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-management"
            @click="handleCameraDept(scope.row)"
            v-hasPermi="['aidevicedept:aidevicedept:list']"
          >部门管理
          </el-button>
          <el-button
            v-if="scope.row.deviceType != 4 && scope.row.deviceType != 6 && scope.row.deviceType != 8"
            size="mini"
            type="text"
            icon="el-icon-odometer"
            @click="handleUpdateThreshold(scope.row)"
            v-hasPermi="['camera:device:threshold']"
          >调整阈值
          </el-button>
          <el-button
            v-show="scope.row.deviceType == 6"
            size="mini"
            type="text"
            icon="el-icon-odometer"
            @click="sendWaterPressCommand(scope.row)"
            v-hasPermi="['camera:device:instruct']"
          >指令下发
          </el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                       v-hasPermi="['camera:device:edit', 'camera:device:remove']"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-sort el-icon--right"></i>操作
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleUpdate" icon="el-icon-circle-check"
                                v-hasPermi="['camera:device:edit']"
              >修改
              </el-dropdown-item>
              <el-dropdown-item command="handleDelete" icon="el-icon-user"
                                v-hasPermi="['camera:device:remove']"
              >删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListByDept"
    />

    <!-- 添加或修改监测设备对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" maxlength="20" placeholder="请输入设备名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand" maxlength="20" placeholder="请输入品牌"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编码" prop="deviceCode">
              <el-input v-model="form.deviceCode" :disabled="deviceCodeDisabled" maxlength="20"
                        placeholder="请输入设备编码"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="双击此处选择经纬度" @dblclick.native="showMap"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="双击此处选择经纬度" @dblclick.native="showMap"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备状态" prop="deviceStatus">
              <el-select v-model="form.workingStatus" placeholder="设备状态" clearable>
                <el-option
                  v-for="dict in dict.type.device_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="charger">
              <el-input v-model="form.charger" placeholder="请输入负责人"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="chargerTel">
              <el-input v-model="form.chargerTel" placeholder="请输入电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-select v-model="form.deviceType" placeholder="设备类型" clearable>
                <el-option
                  v-for="dict in dict.type.device_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="可用系统" prop="forSystem">
              <el-select v-model="form.forSystem" multiple placeholder="请选择可用系统">
                <el-option
                  v-for="dict in dict.type.camera_system"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="摄像头" prop="cameraCodeList">
              <el-select v-model="form.cameraCodeList" multiple  filterable  placeholder="请选择摄像头" style="width:560px"
                         @change="onChange"
              >
                <el-option
                  v-for="item in cameraList"
                  :key="item.index"
                  :label="item.cameraName"
                  :value="item.cameraCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属区域" prop="address">
              <el-input v-model="form.address" placeholder="请输入所属区域"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="图片" prop="deviceImagesList">
              <image-upload v-model="form.deviceImagesList"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 超图弹框 -->
    <ISuperMap ref="ISuperMap" v-if="ISuperMapvisible" @send="send"/>

    <!--<el-dialog :title="titleLongitude" :visible.sync="showLongitude">-->
    <!--经度-->
    <!--<el-input v-model="form.longitude"></el-input>-->
    <!--纬度-->
    <!--<el-input v-model="form.latitude"></el-input>-->
    <!--<supermap style="width: 100%;height: 500px;" :mapDiv="'deviceMap'" :mapSite="{doubleClickZoom:false}"-->
    <!--:codes="['9fa5']" :isSideBySide="false" :showLatLng="showLatLng"></supermap>-->
    <!--<el-button type="primary" @click="showLongitude=false">确 定</el-button>-->
    <!--</el-dialog>-->

    <!-- 监测数据弹窗 -->
    <el-dialog :title="titleWaterMonitor" :visible.sync="showMonitor" v-if="showMonitor" @close="closeDialog">
      <WaterVelocityMonitor :visible.sync="showWaterVelocityMonitor" v-if="showWaterVelocityMonitor"
                            ref="WaterVelocityMonitor" :ST="deviceCode" :deviceType="deviceType"
                            style="width: 100%;height: 100%;"
      ></WaterVelocityMonitor>

      <WaterQualityMonitor :visible.sync="showWaterQualityMonitor" v-if="showWaterQualityMonitor"
                           ref="WaterQualityMonitor" :deviceType="deviceType" :deviceCode="deviceCode"
                           style="width: 100%;height: 100%;"
      ></WaterQualityMonitor>

      <SoilMoistureMonitoring :visible.sync="showSoilMoistureMonitor" v-if="showSoilMoistureMonitor"
                              ref="SoilMoistureMonitor" :deviceType="deviceType" :deviceCode="deviceCode"
                              style="width: 100%;height: 100%;"
      ></SoilMoistureMonitoring>

      <AtmosphereMonitoring :visible.sync="showAtmosphereMonitor" v-if="showAtmosphereMonitor" ref="AtmosphereMonitor"
                            :deviceType="deviceType" :deviceCode="deviceCode"
                            style="width: 100%;height: 100%;"
      ></AtmosphereMonitoring>

      <WaterPressureMonitoring :visible.sync="showWaterPressureMonitor" v-if="showWaterPressureMonitor"
                               ref="WaterPressureMonitor" :IMEI="deviceCode" :deviceType="deviceType"
                               style="width: 100%;height: 100%;"
      ></WaterPressureMonitoring>

      <InsectPestsMonitoring :visible.sync="showInsectPestsMonitor" v-if="showInsectPestsMonitor"
                             ref="InsectPestsMonitor" :deviceNumber="deviceCode" :deviceType="deviceType"
                             style="width: 100%;height: 100%;"
      ></InsectPestsMonitoring>

    </el-dialog>
    <!-- 部门管理弹框 -->
    <el-dialog :title="titleMonitorDept" :visible.sync="showMonitorDept" @close="closeDialog">
      <monitordevicedept v-if="showMonitorDept" ref="monitorDept" :deviceCode="deviceCode" :monId="monIdValue"
                         style="width: 100%;height: 100%;"
      ></monitordevicedept>
    </el-dialog>
    <!-- 水流速传感器调整阈值弹框 -->
    <el-dialog :title="thresholdTitle" :visible.sync="showWaterVelocityThreshold" width="600px" append-to-body>
      <el-form ref="waterVelocityThresholdForm" :model="waterVelocityThresholdForm" label-width="120px"
               class="sj-input-context"
      >
        <el-row>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="waterVelocityThresholdForm.deviceName" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="设备编码" prop="deviceCode">
            <el-input v-model="waterVelocityThresholdForm.deviceCode" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="流量(m3/s)" prop="qthreshold">
            <el-input-number v-model="waterVelocityThresholdForm.qthreshold" :precision="2" :step="0.01" :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="流速(m/s)" prop="vthreshold">
            <el-input-number v-model="waterVelocityThresholdForm.vthreshold" :precision="2" :step="0.01" :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitWaterVelocityThresholdForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 大气传感器调整阈值弹框 -->
    <el-dialog :title="AtmospherethresholdTitle" :visible.sync="showAtmosphereThreshold" width="700px" append-to-body>
      <el-form ref="AtmosphereThresholdForm" :model="AtmosphereThresholdForm" label-width="130px"
               class="sj-input-context"
      >
        <el-row>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="AtmosphereThresholdForm.deviceName" maxlength="20" :disabled="true"
                      placeholder="未查询到设备名称"
            />
          </el-form-item>
          <el-form-item label="设备编码" prop="deviceCode">
            <el-input v-model="AtmosphereThresholdForm.deviceCode" maxlength="20" :disabled="true"
                      placeholder="未查询到设备编码"
            />
          </el-form-item>
          <el-form-item label="pm2.5(ug/m3)" prop="fineParticleThreshold">
            <el-input-number v-model="AtmosphereThresholdForm.fineParticleThreshold" :precision="2" :step="1"
                             :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="pm10(ug/m3)" prop="suctionParticleThreshold">
            <el-input-number v-model="AtmosphereThresholdForm.suctionParticleThreshold" :precision="2" :step="1"
                             :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="臭氧(ug/m3)" prop="ozoneThreshold">
            <el-input-number v-model="AtmosphereThresholdForm.ozoneThreshold" :precision="2" :step="1" :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="一氧化碳(mg/m3)" prop="carbonMonoxideThreshold">
            <el-input-number v-model="AtmosphereThresholdForm.carbonMonoxideThreshold" :precision="2" :step="1"
                             :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="二氧化氮(ug/m3)" prop="nitrogenDioxideThreshold">
            <el-input-number v-model="AtmosphereThresholdForm.nitrogenDioxideThreshold" :precision="2" :step="1"
                             :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="二氧化硫(ug/m3)" prop="sulfurDioxideThreshold">
            <el-input-number v-model="AtmosphereThresholdForm.sulfurDioxideThreshold" :precision="2" :step="0.01"
                             :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="温度上限(℃)" prop="temperatureThresholdUp">
              <el-input-number v-model="AtmosphereThresholdForm.temperatureThresholdUp" :precision="2" :step="0.01"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="湿度上限(%RH)" prop="humidityThresholdUp">
              <el-input-number v-model="AtmosphereThresholdForm.humidityThresholdUp" :precision="2" :step="0.01"
                               :max="999"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温度下限(℃)" prop="temperatureThresholdDown">
              <el-input-number v-model="AtmosphereThresholdForm.temperatureThresholdDown" :precision="2" :step="0.01"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="湿度下限(%RH)" prop="humidityThresholdDown">
              <el-input-number v-model="AtmosphereThresholdForm.humidityThresholdDown" :precision="2" :step="0.01"
                               :max="999"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAtmosphereThresholdForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 土壤传感器调整阈值弹框 -->
    <el-dialog :title="SoilMoisturethresholdTitle" :visible.sync="showSoilMoistureThreshold" width="800px"
               append-to-body
    >
      <el-form ref="SoilMoistureThresholdForm" :model="SoilMoistureThresholdForm" label-width="140px"
               class="sj-input-context"
      >
        <el-row>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="SoilMoistureThresholdForm.deviceName" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="设备编码" prop="deviceCode">
            <el-input v-model="SoilMoistureThresholdForm.deviceCode" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="温度上限(℃)" prop="temperatureThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.temperatureThresholdUp" :precision="2" :step="0.1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="湿度上限(%RH)" prop="humidityThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.humidityThresholdUp" :precision="2" :step="0.1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="ph值上限(PH)" prop="phThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.phThresholdUp" :precision="2" :step="0.01" :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="电导率上限(us/cm)" prop="conductivityThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.conductivityThresholdUp" :precision="2" :step="1"
                               :max="9999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="氮含量上限(mg/kg)" prop="nitrogenThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.nitrogenThresholdUp" :precision="2" :step="1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="磷含量上限(mg/kg)" prop="phosphorusThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.phosphorusThresholdUp" :precision="2" :step="1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="钾含量上限(mg/kg)" prop="potassiumThresholdUp">
              <el-input-number v-model="SoilMoistureThresholdForm.potassiumThresholdUp" :precision="2" :step="1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温度下限(℃)" prop="temperatureThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.temperatureThresholdDown" :precision="2" :step="0.1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="湿度下限(%RH)" prop="humidityThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.humidityThresholdDown" :precision="2" :step="0.1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="ph值下限(PH)" prop="phThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.phThresholdDown" :precision="2" :step="0.01"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="电导率下限(us/cm)" prop="conductivityThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.conductivityThresholdDown" :precision="2" :step="1"
                               :max="9999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="氮含量下限(mg/kg)" prop="nitrogenThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.nitrogenThresholdDown" :precision="2" :step="1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="磷含量下限(mg/kg)" prop="phosphorusThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.phosphorusThresholdDown" :precision="2" :step="1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="钾含量下限(mg/kg)" prop="potassiumThresholdDown">
              <el-input-number v-model="SoilMoistureThresholdForm.potassiumThresholdDown" :precision="2" :step="1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSoilMoistureThresholdForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 水质传感器调整阈值弹框 -->
    <el-dialog :title="WaterQualitythresholdTitle" :visible.sync="showWaterQualityThreshold" width="720px"
               append-to-body
    >
      <el-form ref="WaterQualityThresholdForm" :model="WaterQualityThresholdForm" label-width="140px"
               class="sj-input-context"
      >
        <el-row>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="WaterQualityThresholdForm.deviceName" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="设备编码" prop="deviceCode">
            <el-input v-model="WaterQualityThresholdForm.deviceCode" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="水质浊度(mg/L)" prop="waterQualitySuspensionThreshold">
            <el-input-number v-model="WaterQualityThresholdForm.waterQualitySuspensionThreshold" :precision="2"
                             :step="1" :max="9999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="氨氮(mg/L)" prop="ammoniaNitrogenThreshold">
            <el-input-number v-model="WaterQualityThresholdForm.ammoniaNitrogenThreshold" :precision="2" :step="0.1"
                             :max="9999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-form-item label="化学需氧量(mg/L)" prop="codThreshold">
            <el-input-number v-model="WaterQualityThresholdForm.codThreshold" :precision="2" :step="1" :max="999"
            ></el-input-number>
            <el-tag size="medium" style="font-size: 14px;margin-left: 5px" type="warning">
              当采集值大于该值时会触发传感器告警
            </el-tag>
          </el-form-item>
          <el-col :span="12">
            <el-form-item label="ph上限(PH)" prop="waterPhThresholdUp">
              <el-input-number v-model="WaterQualityThresholdForm.waterPhThresholdUp" :precision="2" :step="0.1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="水温上限(℃)" prop="waterTemperatureThresholdUp">
              <el-input-number v-model="WaterQualityThresholdForm.waterTemperatureThresholdUp" :precision="2"
                               :step="0.1" :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="电导率上限(us/cm)" prop="conductivityThresholdUp">
              <el-input-number v-model="WaterQualityThresholdForm.conductivityThresholdUp" :precision="2" :step="1"
                               :max="9999"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ph下限(PH)" prop="waterPhThresholdDown">
              <el-input-number v-model="WaterQualityThresholdForm.waterPhThresholdDown" :precision="2" :step="0.1"
                               :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="水温下限(℃)" prop="waterTemperatureThresholdDown">
              <el-input-number v-model="WaterQualityThresholdForm.waterTemperatureThresholdDown" :precision="2"
                               :step="0.1" :max="999"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="电导率下限(us/cm)" prop="conductivityThresholdDown">
              <el-input-number v-model="WaterQualityThresholdForm.conductivityThresholdDown" :precision="2" :step="1"
                               :max="9999"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitWaterQualityThresholdForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 水压传感器指令下发弹框 -->
    <el-dialog :title="sendWaterPressCommandTitle" :visible.sync="showSendWaterPressCommand" width="720px"
               append-to-body
    >
      <el-form ref="SendWaterPressCommandForm" :model="SendWaterPressCommandForm" label-width="140px"
               class="sj-input-context"
      >
        <el-row>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="SendWaterPressCommandForm.deviceName" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="设备编码" prop="deviceCode">
            <el-input v-model="SendWaterPressCommandForm.deviceCode" maxlength="20" :disabled="true"
                      placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-form-item label="指令类型" prop="commandType">
            <el-select v-model="SendWaterPressCommandForm.commandType" placeholder="指令类型">
              <el-option
                v-for="dict in dict.type.water_pressure_instruct"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="指令参数" prop="commandValue">
            <el-tooltip class="item" effect="dark"
                        content="压力报警无需传参;心跳周期参数范围为0-100;水压阈值参数范围为0-10" placement="right"
            >
              <el-input-number v-model="SendWaterPressCommandForm.commandValue" :step="1" :max="100" :min="0"/>
            </el-tooltip>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSendWaterPressCommandForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {
  listDevice,
  listDeviceByDept,
  listDeviceAll,
  getDevice,
  delDevice,
  addDevice,
  updateDevice,
  selectWaterVelocityThresholdByCode,
  updateDeviceThreshold,
  addDeviceThreshold,
  selectAtmosphereThresholdByCode,
  updateDeviceAtmosphereThreshold,
  addDeviceAtmosphereThreshold,
  changeWarn,
  selectSoilMoistureThresholdByCode,
  updateDeviceSoilMoistureThreshold,
  addDeviceSoilMoistureThreshold,
  selectWaterQualityThresholdByCode,
  updateDeviceWaterQualityThreshold,
  addDeviceWaterQualityThreshold,
  SendWaterPressCommand,
  selectAllCameraList
} from '@/api/centerMonitor/device/device'
import Treeselect from '@riophae/vue-treeselect'
// import supermap from '@/views/components/supermap'
import ISuperMap from '@/views/components/ISuperMap'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { treeselect } from '@/api/system/dept'
import WaterQualityMonitor from '@/views/centerMonitor/device/waterqualitydata.vue'
import WaterVelocityMonitor from '@/views/centerMonitor/device/watervelocitydata.vue'
import SoilMoistureMonitoring from '@/views/centerMonitor/device/soilmoisture.vue'
import AtmosphereMonitoring from '@/views/centerMonitor/device/atmosphere.vue'
import WaterPressureMonitoring from '@/views/centerMonitor/device/waterpressuredata.vue'
import InsectPestsMonitoring from './insectpestsdata'
import monitordevicedept from '@/views/centerMonitor/aidevicedept/monitordevicedept'

export default {
  name: 'Device',
  dicts: ['device_status', 'device_type', 'camera_system', 'water_pressure_instruct'],
  components: {
    InsectPestsMonitoring, Treeselect, ISuperMap, WaterVelocityMonitor, WaterQualityMonitor,
    SoilMoistureMonitoring, AtmosphereMonitoring, WaterPressureMonitoring, monitordevicedept
  },
  data() {
    return {
      //设备编码是否可编辑
      deviceCodeDisabled: true,
      showMonitor: false,
      titleLongitude: '',
      // 超图
      showLongitude: false,
      sign: 1,
      ISuperMapvisible: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      deviceCode: null,
      deviceName: null,
      // 水流速数据列表
      showWaterVelocityMonitor: false,
      deviceType: null,
      titleWaterMonitor: null,
      // 水质速数据列表
      showWaterQualityMonitor: false,
      // 土壤速数据列表
      showSoilMoistureMonitor: false,
      // 大气速数据列表
      showAtmosphereMonitor: false,
      // 水压数据列表
      showWaterPressureMonitor: false,
      // 病虫害数据列表
      showInsectpestsMonitor: false,
      // 监测设备表格数据
      deviceList: [],
      deviceSystemList: [],
      //传递到子页面摄像头ID
      monIdValue: null,

      //水流速传感器阈值调整属性 - title
      thresholdTitle: '',
      //水流速传感器阈值调整属性 - 显示隐藏
      showWaterVelocityThreshold: false,
      //水流速传感器阈值调整属性 - 数据表单
      waterVelocityThresholdForm: {},

      //大气传感器阈值调整属性 - title
      AtmospherethresholdTitle: '',
      //大气传感器阈值调整属性 - 显示隐藏
      showAtmosphereThreshold: false,
      //大气传感器阈值调整属性 - 数据表单
      AtmosphereThresholdForm: {},

      //土壤传感器阈值调整属性 - title
      SoilMoisturethresholdTitle: '',
      //土壤传感器阈值调整属性 - 显示隐藏
      showSoilMoistureThreshold: false,
      //土壤传感器阈值调整属性 - 数据表单
      SoilMoistureThresholdForm: {},

      //水质传感器阈值调整属性 - title
      WaterQualitythresholdTitle: '',
      //水质传感器阈值调整属性 - 显示隐藏
      showWaterQualityThreshold: false,
      //水质传感器阈值调整属性 - 数据表单
      WaterQualityThresholdForm: {},

      //水压传感器指令下发属性 - title
      sendWaterPressCommandTitle: '',
      //水压传感器指令下发属性 - 显示隐藏
      showSendWaterPressCommand: false,
      //水压传感器指令下发属性 - 数据表单
      SendWaterPressCommandForm: {
        commandValue: 0
      },

      //部门
      showMonitorDept: false,
      titleMonitorDept: '',
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceStatus: null,
        deviceName: null,
        brand: null,
        workingStatusText: null,
        deviceCode: null,
        longitude: null,
        latitude: null,
        deptId: null,
        deptName: null,
        workingStatus: null,
        deviceType: null,
        warnLine: null,
        charger: null,
        chargerTel: null
      },
      // 水流速查询参数
      queryWaterMonitorParams: {
        pageNum: 1,
        pageSize: 10,
        ST: null,
        FUN: null,
        TT: null,
        TYPE: null,
        BAT: null,
        Q: null,
        Q1: null,
        CQ1: null
      },
      // 水质查询参数
      queryWaterQualityParams: {
        pageNum: 1,
        pageSize: 10,
        waterQualitySuspension: null,
        cod: null,
        ammoniaNitrogen: null,
        waterPh: null,
        bod: null,
        waterTemperature: null,
        signalStrength: null
      },
      // 土壤查询参数
      querySoilMoistureParams: {
        pageNum: 1,
        pageSize: 10,
        temperature: null,
        humidity: null,
        ph: null,
        conductivity: null,
        nitrogen: null,
        phosphorus: null,
        potassium: null
      },
      // 大气查询参数
      queryAtmosphereParams: {
        pageNum: 1,
        pageSize: 10,
        fineParticle: null,
        suctionParticle: null,
        sulfurDioxide: null,
        nitrogenDioxide: null,
        ozone: null,
        carbonMonoxide: null,
        tvoc: null,
        tsp: null,
        temperature: null,
        humidity: null,
        windSpeed: null,
        windDirection: null
      },
      // 水压查询参数
      queryWaterPressureParams: {
        pageNum: 1,
        pageSize: 10,
        IMEI: null,
        thresholdLowEnable: null,
        thresholdHighEnable: null,
        signalPower: null,
        hydraulicValue: null,
        hydraulicThresholdMin: null,
        heartbeatTime: null,
        deviceType: null
      },
      //病虫害查询参数
      queryInsectPestsParams: {
        pageNum: 1,
        pageSize: 10,
        downloadUrl: null,
        downloadUrlCompress: null,
        taggingImgUrl: null,
        taggingImgUrlCompress: null,
        deviceNumber: null,
        newTime: null,
        results: null,
        newCount: null,
        typeCount: null,
        oldCount: null,
        oldTime: null,
        oldResults: null,
        oldTypeCount: null,
        oldDownloadUrl: null,
        oldTaggingImgUrl: null,
        oldDownloadUrlCompress: null,
        oldTaggingImgUrlCompress: null
      },
      // 表单参数
      form: {
        deviceImages: [],
        deviceImagesList: [],
        cameras: []
      },
      // 表单校验
      rules: {
        deviceName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        deviceCode: [
          { required: true, message: '设备编码', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '经纬度不能为空', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '经纬度不能为空', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '所属部门不能为空', trigger: 'blur' }
        ],
        deviceType: [
          { required: true, message: '请选择设备类型', trigger: 'blur' }
        ],
        forSystem: [
          { required: true, message: '请选择可用系统', trigger: 'blur' }
        ],
        chargerTel: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        warnLine: [
          {
            pattern: /^[+]?((\d*(\.\d{1,1})$)|([1-9]\d*$))/,
            message: '阈值只能输入正整数或一位小数',
            trigger: 'blur'
          }
        ],
        cameraList: [],
        selectedOptions: [],
      }
    }
  },
  mounted() {
    this.deviceSystemList = this.dict.type.camera_system
  },
  activated: function() {
    this.queryParams.workingStatus = this.$route.query.workingStatus
    this.queryParams.deptId = this.$route.query.deptId
    if (this.queryParams.workingStatus != null && this.queryParams.deptId != null) {
      this.queryParams.pageNum = 1
      this.getListByDept()
      this.getTreeselect()
    } else {
      this.getList()
    }
  },
  created() {
    //此处必须第二次调用  防止组件注册后直接F5刷新页面 导致不走getList方法
    this.getList()
    this.selectAllCameraList()
  },
  methods: {
    onChange(e) {
      this.form.cameras = this.cameraList.filter((item) =>
        e.includes(item.cameraCode)
      )

    },
    selectAllCameraList() {
      selectAllCameraList().then(response => {
        this.cameraList = response.data
      })
    },
    /** 查询监测设备列表 */
    getList() {
      this.loading = true
      listDeviceAll(this.queryParams).then(response => {
        this.deviceList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 查询监测设备列表 */
    getListByDept() {
      if (this.queryParams.workingStatus != null && this.queryParams.deptId != null) {
        // this.queryParams.pageNum = 1;
        this.loading = true
        listDeviceByDept(this.queryParams).then(response => {
          this.deviceList = response.rows
          this.total = response.total
          this.loading = false
        })
      } else {
        // 执行查询所有列表的逻辑
        this.getList()
      }
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      }
    },
    /** 数据列表 */
    handleDataMonitor(row) {
      this.deviceCode = row.deviceCode
      if (row.deviceType == 7) {
        this.showMonitor = true
        this.showWaterVelocityMonitor = true
        this.showWaterQualityMonitor = false
        this.showSoilMoistureMonitor = false
        this.showAtmosphereMonitor = false
        this.showWaterPressureMonitor = false
        this.showInsectPestsMonitor = false
        this.titleWaterMonitor = '水流速数据列表'

      } else if (row.deviceType == 1) {
        this.showWaterQualityMonitor = true
        this.showWaterVelocityMonitor = false
        this.showSoilMoistureMonitor = false
        this.showAtmosphereMonitor = false
        this.showWaterPressureMonitor = false
        this.showInsectPestsMonitor = false
        this.showMonitor = true
        this.titleWaterMonitor = '水质数据列表'

      } else if (row.deviceType == 2) {
        this.showSoilMoistureMonitor = true
        this.showWaterVelocityMonitor = false
        this.showAtmosphereMonitor = false
        this.showWaterQualityMonitor = false
        this.showWaterPressureMonitor = false
        this.showInsectPestsMonitor = false
        this.showMonitor = true
        this.titleWaterMonitor = '土壤数据列表'

      } else if (row.deviceType == 5) {
        this.showAtmosphereMonitor = true
        this.showWaterPressureMonitor = false
        this.showWaterQualityMonitor = false
        this.showWaterVelocityMonitor = false
        this.showSoilMoistureMonitor = false
        this.showInsectPestsMonitor = false
        this.showMonitor = true
        this.titleWaterMonitor = '大气数据列表'

      } else if (row.deviceType == 6) {
        this.showMonitor = true
        this.showWaterPressureMonitor = true
        this.showAtmosphereMonitor = false
        this.showWaterQualityMonitor = false
        this.showWaterVelocityMonitor = false
        this.showSoilMoistureMonitor = false
        this.showInsectPestsMonitor = false
        this.titleWaterMonitor = '水压数据列表'
      } else if (row.deviceType == 4) {
        this.showMonitor = true
        this.showInsectPestsMonitor = true
        this.showWaterPressureMonitor = false
        this.showAtmosphereMonitor = false
        this.showWaterQualityMonitor = false
        this.showWaterVelocityMonitor = false
        this.showSoilMoistureMonitor = false
        this.titleWaterMonitor = '病虫害数据列表'
      }
    },
    /** 部门管理列表 */
    handleCameraDept(row) {
      const id = row.id
      this.monIdValue = id
      this.deviceCode = row.deviceCode
      this.showMonitorDept = true
      this.titleMonitorDept = '部门管理列表'
    },
    closeDialog() {
      this.showMonitor = false
      this.showMonitorDept = false
    },
    // showMap() {
    //   this.showLongitude = true
    // },
    showMap() {
      this.ISuperMapvisible = true
      this.$nextTick(() => {
        this.$refs.ISuperMap.init(this.sign, {
          id: this.form.id,
          longitude: this.form.longitude,
          latitude: this.form.latitude,
          xiantude: this.form.longitude//this.form.longitude换成每个页面对应线或者面对应的字段
        })
      })
    },
    send(val) {
      if (val === true) {
        this.ISuperMapvisible = false
        return
      }
      if (this.sign === 1) {
        this.form.longitude = val.longitude
        this.form.latitude = val.latitude
      }
      if (this.sign === 2 || this.sign === 3) this.form.longitude = val.xiantude//this.form.longitude 换成对应的线或区域的字段
      this.ISuperMapvisible = false
    },
    showLatLng: function(lat, lng) {
      this.form.latitude = lat
      this.form.longitude = lng
    },
    // 取消按钮
    cancel() {
      this.open = false
      //水流速传感器阈值调整窗口关闭
      this.showWaterVelocityThreshold = false
      //大气传感器阈值调整窗口关闭
      this.showAtmosphereThreshold = false
      //土壤传感器阈值调整窗口关闭
      this.showSoilMoistureThreshold = false
      //水质传感器阈值调整窗口关闭
      this.showWaterQualityThreshold = false
      //水压传感器指令下发窗口关闭
      this.showSendWaterPressCommand = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        deviceName: null,
        brand: null,
        deviceCode: null,
        longitude: null,
        latitude: null,
        deptId: null,
        deptName: null,
        workingStatus: '0',
        warnLine: null,
        remark: null,
        forSystem: null,
        charger: null,
        chargerTel: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleUpdate':
          this.handleUpdate(row)
          break
        case 'handleDelete':
          this.handleDelete(row)
          break
        default:
          break
      }

    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    //部门ID、部门名称赋值
    hx(node) {
      this.form.deptId = node.id
      this.form.deptName = node.label
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      //设置新增时可以改设备编码
      this.deviceCodeDisabled = false
      this.open = true
      this.title = '添加监测设备'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      //设置修改时不能改设备编码
      this.deviceCodeDisabled = true
      const id = row.id || this.ids
      getDevice(id).then(response => {
        this.form = response.data
        const updateList = []
        for (let index in this.form.forSystem) {
          updateList.push(this.form.forSystem[index].type)
        }
        this.form.forSystem = updateList
        this.open = true
        this.title = '修改监测设备'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let old_form_list = this.form.forSystem
          const list = []
          for (let item in this.form.forSystem) {
            for (let items in this.deviceSystemList) {
              if (this.deviceSystemList[items].value == this.form.forSystem[item]) {
                const type = {}
                type.type = this.deviceSystemList[items].value
                type.typeName = this.deviceSystemList[items].label
                list.push(type)
              }
            }
          }
          let that = this
          that.form.forSystem = list
          if (this.form.id != null) {
            that.form.deviceImages = this.form.deviceImagesList ? typeof this.form.deviceImagesList == 'string' ? this.form.deviceImagesList.split(',') : this.form.deviceImagesList : []
            that.form.deviceImagesList = []
            updateDevice(this.form).then(response => {
              that.$modal.msgSuccess('修改成功')
              that.open = false
              that.getList()
            }).catch((error) => {
              //如果后台报错：比如IP重复，需要将原来的form.list 赋值回去，否则再次点击保存时，form.list值已经改变，上面的双层for循环会出问题
              that.form.forSystem = old_form_list
            })
          } else {
            that.form.deviceImages = this.form.deviceImagesList ? typeof this.form.deviceImagesList == 'string' ? this.form.deviceImagesList.split(',') : this.form.deviceImagesList : []
            that.form.deviceImagesList = []
            addDevice(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            }).catch((error) => {
              //如果后台报错：比如IP重复，需要将原来的form.list 赋值回去，否则再次点击保存时，form.list值已经改变，上面的双层for循环会出问题
              this.form.forSystem = old_form_list
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('该操作将会删除传感器，同时将会清除所有设置及监测数据，确认删除吗？').then(function() {
        return delDevice(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('sooka-sponest-center-monitor/device/export', {
        ...this.queryParams
      }, `device_${new Date().getTime()}.xlsx`)
    },
    //修改传感器是否开启告警功能
    handleIsOpenWarnChange(row) {
      let text = row.openWarn === '1' ? '开启告警功能' : '关闭告警功能'
      this.$modal.confirm('确认要"' + text + '"吗？').then(function() {
        return changeWarn(row.id, row.openWarn)
      }).then(() => {
        this.$modal.msgSuccess(text + '成功')
      }).catch(function() {
        row.openWarn = row.openWarn === '0' ? '1' : '0'
      })
    },
    /**各类传感器阈值调整窗口打开**/
    handleUpdateThreshold(row) {
      this.deviceCode = row.deviceCode
      this.deviceName = row.deviceName
      let type = row.deviceType
      if (type == 1) {//水质
        selectWaterQualityThresholdByCode(this.deviceCode).then(response => {
          this.WaterQualityThresholdForm = response.data
          this.WaterQualitythresholdTitle = '设置水质传感器阈值'
          if (this.WaterQualityThresholdForm.deviceCode == null) {
            this.WaterQualityThresholdForm.deviceCode = this.deviceCode
          }
          this.WaterQualityThresholdForm.deviceName = this.deviceName
          this.showWaterQualityThreshold = true
        })
      } else if (type == 2) {//土壤墒情
        selectSoilMoistureThresholdByCode(this.deviceCode).then(response => {
          this.SoilMoistureThresholdForm = response.data
          this.SoilMoisturethresholdTitle = '设置土壤传感器阈值'
          if (this.SoilMoistureThresholdForm.deviceCode == null) {
            this.SoilMoistureThresholdForm.deviceCode = this.deviceCode
          }
          this.SoilMoistureThresholdForm.deviceName = this.deviceName
          this.showSoilMoistureThreshold = true
        })
      } else if (type == 3) {//污染源
      } else if (type == 4) {//病虫害监测
      } else if (type == 5) {//大气监测
        selectAtmosphereThresholdByCode(this.deviceCode).then(response => {
          this.AtmosphereThresholdForm = response.data
          this.AtmospherethresholdTitle = '设置大气传感器阈值'
          if (this.AtmosphereThresholdForm.deviceCode == null) {
            this.AtmosphereThresholdForm.deviceCode = this.deviceCode
          }
          this.AtmosphereThresholdForm.deviceName = this.deviceName
          this.showAtmosphereThreshold = true
        })
      } else if (type == 6) {//水压监测
      } else if (type == 7) {//水流速
        selectWaterVelocityThresholdByCode(this.deviceCode).then(response => {
          this.waterVelocityThresholdForm = response.data
          this.thresholdTitle = '设置水流速传感器阈值'
          if (this.waterVelocityThresholdForm.deviceCode == null) {
            this.waterVelocityThresholdForm.deviceCode = this.deviceCode
          }
          this.waterVelocityThresholdForm.deviceName = this.deviceName
          this.showWaterVelocityThreshold = true
        })
      }
    },
    sendWaterPressCommand(row) {
      this.deviceCode = row.deviceCode
      this.deviceName = row.deviceName
      this.sendWaterPressCommandTitle = '水压传感器指令下发'
      this.SendWaterPressCommandForm.deviceCode = this.deviceCode
      this.SendWaterPressCommandForm.deviceName = this.deviceName
      this.showSendWaterPressCommand = true
    },
    /**提交水压传感器指令表单**/
    submitSendWaterPressCommandForm() {
      SendWaterPressCommand(this.SendWaterPressCommandForm).then(response => {
        this.$modal.msgSuccess(response.msg)
        this.showSendWaterPressCommand = false
      })
    },
    /**提交水流速传感器阈值表单**/
    submitWaterVelocityThresholdForm() {
      this.$refs['waterVelocityThresholdForm'].validate(valid => {
        if (valid) {
          if (this.waterVelocityThresholdForm.id != null) {
            updateDeviceThreshold(this.waterVelocityThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showWaterVelocityThreshold = false
            })
          } else {
            addDeviceThreshold(this.waterVelocityThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showWaterVelocityThreshold = false
            })
          }
        }
      })
    },
    /**提交水质传感器阈值表单**/
    submitWaterQualityThresholdForm() {
      this.$refs['WaterQualityThresholdForm'].validate(valid => {
        if (valid) {
          if (this.WaterQualityThresholdForm.id != null) {
            updateDeviceWaterQualityThreshold(this.WaterQualityThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showWaterQualityThreshold = false
            })
          } else {
            addDeviceWaterQualityThreshold(this.WaterQualityThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showWaterQualityThreshold = false
            })
          }
        }
      })
    },
    /**提交大气传感器阈值表单**/
    submitAtmosphereThresholdForm() {
      this.$refs['AtmosphereThresholdForm'].validate(valid => {
        if (valid) {
          if (this.AtmosphereThresholdForm.id != null) {
            updateDeviceAtmosphereThreshold(this.AtmosphereThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showAtmosphereThreshold = false
            })
          } else {
            addDeviceAtmosphereThreshold(this.AtmosphereThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showAtmosphereThreshold = false
            })
          }
        }
      })
    },
    /**提交土壤传感器阈值表单**/
    submitSoilMoistureThresholdForm() {
      this.$refs['SoilMoistureThresholdForm'].validate(valid => {
        if (valid) {
          if (this.SoilMoistureThresholdForm.id != null) {
            updateDeviceSoilMoistureThreshold(this.SoilMoistureThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showSoilMoistureThreshold = false
            })
          } else {
            addDeviceSoilMoistureThreshold(this.SoilMoistureThresholdForm).then(response => {
              this.$modal.msgSuccess('保存成功')
              this.showSoilMoistureThreshold = false
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.sj-input-context {
  width: 100%;

  .el-form-item {
    width: 100%;
  }

  .el-form-item__content {
    display: flex;
    align-items: center;

    span {
      white-space: nowrap;
    }
  }
}
</style>
