zhgdyun/src/views/projectFront/concreteMonitoring/devManage.vue

<template>
  <!-- 设备管理 -->
  <div class="devManage">
    <el-form :inline="true" size="medium" class="demo-form-inline whiteBlock" style="padding: 15px 0 15px 18px">
      <el-form-item style="margin: 0">
        <!-- 新增设备 -->
        <el-button type="primary" @click="addDevice">{{ $t('message.devManage.addDev') }}</el-button>
      </el-form-item>
    </el-form>
    <div style="height: 12px; background: #f3f5fd; width: 100%"></div>
    <el-table ref="multipleTable" :data="devListData" style="width: 100%" class="tables">
      <!-- 设备名称 设备编号 -->
      <el-table-column align="center" prop="devName" :label="$t('message.devManage.devName')"></el-table-column>
      <el-table-column align="center" prop="devSn" label="设备id"></el-table-column>
      <!-- 监控点位数（个） -->
      <el-table-column align="center" prop="pointNum" :label="$t('message.devManage.montorLocation')"></el-table-column>
      <!-- 操作 -->
      <el-table-column :label="$t('message.safeMangeCheck.operate')" align="center">
        <template slot-scope="scope">
          <div class="flex">
            <div @click="showPlanConfig(scope.row)" class="operationText">
              <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
              <!-- 编辑 -->
              <span>测点分布</span>
            </div>
            <div @click="editDevInfo(scope.row)" class="operationText">
              <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
              <!-- 编辑 -->
              <span>{{ $t('message.safeMangeCheck.edit') }}</span>
            </div>
            <div @click="deteleDev(scope.row)" class="operationText">
              <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
              <!-- 删除 -->
              <span>{{ $t('message.safeMangeCheck.delete') }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagerBox"
      style="margin-top: 10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="Number(total)"
      background
    ></el-pagination>

    <!-- 新增 编辑 弹窗 -->
    <el-dialog :modal-append-to-body="false" :title="dialogTitle" :close-on-click-modal="false" :visible.sync="devFormDialog" width="860px">
      <div class="dialog_content" style="height: 600px">
        <vue-scroll style="height: 88%">
          <!-- 基本信息 -->
          <div class="title">{{ '·' + $t('message.devManage.baseInfo') }}</div>
          <el-form size="small" ref="devForm" :model="devForm" label-width="130px" :inline="true" class="devFormBox">
            <el-row :gutter="24">
              <el-col :span="12">
                <!-- 设备ID -->
                <el-form-item
                  prop="devSn"
                  :label="$t('message.devManage.deviceId')"
                  :rules="[
                    {
                      required: true,
                      message: $t('message.safeManage.placeholder'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-input
                    v-model="devForm.devSn"
                    style="width: 215px"
                    :placeholder="$t('message.safeManage.placeholder')"
                    :disabled="dialogType == 2"
                    onKeyUp="value=value.replace(/[\W]/g,'')"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 设备名称 -->
                <el-form-item
                  prop="devName"
                  :label="$t('message.devManage.devName')"
                  :rules="[
                    {
                      required: true,
                      message: $t('message.safeManage.placeholder'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-input v-model="devForm.devName" style="width: 215px" :placeholder="$t('message.safeManage.placeholder')"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <!-- 紧急报警推送人 -->
                <el-form-item
                  prop="urgentAlarmPushWorkerId"
                  :label="$t('message.devManage.emergencyAlarmPusher')"
                  :rules="[
                    {
                      required: true,
                      message: $t('message.safeMangeCheck.pleaseChoose'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-select
                    v-model="devForm.urgentAlarmPushWorkerId"
                    :placeholder="$t('message.laborMange.pleaseChoose')"
                    @change="changeWorkerType"
                    multiple
                    collapse-tags
                    style="width: 100%"
                  >
                    <el-option v-for="item in workerInfoList" :key="item.userId" :label="item.workerName" :value="item.userId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 重要报警推送人 -->
                <el-form-item
                  prop="importantAlarmPushWorkerId"
                  :label="$t('message.devManage.imporentAlarmPusher')"
                  :rules="[
                    {
                      required: true,
                      message: $t('message.safeMangeCheck.pleaseChoose'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-select
                    multiple
                    collapse-tags
                    v-model="devForm.importantAlarmPushWorkerId"
                    :placeholder="$t('message.laborMange.pleaseChoose')"
                    @change="changeWorkerType"
                    style="width: 100%"
                  >
                    <el-option v-for="item in workerInfoList" :key="item.userId" :label="item.workerName" :value="item.userId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <!-- 次要报警推送人 -->
                <el-form-item
                  prop="secondaryAlarmPushWorkerId"
                  :label="$t('message.devManage.minorAlarmPusher')"
                  :rules="[
                    {
                      required: true,
                      message: $t('message.safeMangeCheck.pleaseChoose'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-select
                    multiple
                    collapse-tags
                    v-model="devForm.secondaryAlarmPushWorkerId"
                    :placeholder="$t('message.laborMange.pleaseChoose')"
                    @change="changeWorkerType"
                    style="width: 100%"
                  >
                    <el-option v-for="item in workerInfoList" :key="item.userId" :label="item.workerName" :value="item.userId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <!-- 提示报警推送人 -->
                <el-form-item
                  prop="promptAlarmPushWorkerId"
                  :label="$t('message.devManage.tipAlarmPusher')"
                  :rules="[
                    {
                      required: true,
                      message: $t('message.safeMangeCheck.pleaseChoose'),
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-select
                    multiple
                    collapse-tags
                    v-model="devForm.promptAlarmPushWorkerId"
                    :placeholder="$t('message.laborMange.pleaseChoose')"
                    @change="changeWorkerType"
                    style="width: 100%"
                  >
                    <el-option v-for="item in workerInfoList" :key="item.userId" :label="item.workerName" :value="item.userId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- ·监测点信息 -->
            <el-row class="title">{{ '·' + $t('message.devManage.montorInfo') }}</el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <!-- 监测点位数量 -->
                <el-form-item :label="$t('message.devManage.montorLocationNum')" prop="teamId">
                  <el-select
                    v-model="devForm.pointNum"
                    :placeholder="$t('message.laborMange.pleaseChoose')"
                    @change="changePointsNumber"
                    style="width: 100%"
                    :disabled="dialogType == 2"
                  >
                    <el-option label="8" :value="8"></el-option>
                    <el-option label="16" :value="16"></el-option>
                    <el-option label="32" :value="32"></el-option>
                    <el-option label="64" :value="64"></el-option>
                    <el-option label="128" :value="128"></el-option>
                    <el-option label="256" :value="256"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" v-for="(item, index) in devForm.pointList" :key="index">
              <el-col :span="3">
                <el-form-item prop="teamId"> {{ $t('message.devManage.serialNum') + '：' }}{{ item.pointNo }} </el-form-item>
              </el-col>
              <el-col :span="11">
                <!-- 监测点名称 -->
                <el-form-item :label="$t('message.devManage.montorName')" prop="teamId">
                  <el-input v-model="item.pointName" style="width: 160px" :placeholder="$t('message.safeManage.placeholder')" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <!-- 温度报警阈值 -->
                <el-form-item :label="$t('message.devManage.temperatureAlarm')" prop="teamId">
                  <el-input
                    type="number"
                    oninput="if(value.length>5)value=value.slice(0,5)"
                    v-model="item.temperatureThreshold"
                    style="width: 120px"
                    :placeholder="$t('message.safeManage.placeholder')"
                  />℃
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </vue-scroll>
        <div class="dialog-footer">
          <!-- 确认 取消 -->
          <el-button class="cancleBtn" icon="el-icon-circle-close" size="medium" @click="cancleBtn('devForm')">{{
            $t('message.safeMangeCheck.dialog.cancel')
          }}</el-button>
          <el-button type="primary" icon="el-icon-circle-check" size="medium" @click="submitForm('devForm')">{{
            $t('message.safeMangeCheck.dialog.confirm')
          }}</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      v-if="showDialog"
      :modal-append-to-body="false"
      title="测点分布"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
      width="1300px"
      style="height: 900px"
      :destroy-on-close="true"
    >
      <div class="formDialog">
        <formDialog :pointConfig="pointConfig"> </formDialog>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addConcreteMonitorDevApi,
  getConcreteMonitorDevListApi,
  getDevDetailApi,
  editConcreteMonitorDevApi,
  deleteConcreteMonitorDevApi
} from '@/assets/js/api/concreteMonitoring.js'
import formDialog from '@/views/projectFront/concreteMonitoring/planConfig.vue'

import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'
export default {
  components: {
    formDialog
  },
  data() {
    return {
      pointConfig: [],
      showDialog: false,
      projectSn: '',
      page: 1,
      pageSize: 10,
      total: 0,
      devListData: [],
      devFormDialog: false,
      dialogTitle: this.$t('message.devManage.addDev'),
      dialogType: 1,
      workerInfoList: [], //推送人员列表
      devForm: {
        devName: '',
        devSn: '',
        pointNum: 8,
        pointList: [],
        importantAlarmPushWorkerId: [],
        promptAlarmPushWorkerId: [],
        secondaryAlarmPushWorkerId: [],
        urgentAlarmPushWorkerId: []
      }
    }
  },

  created() {
    this.projectSn = this.$store.state.projectSn
    this.getDevList()
  },

  methods: {
    // 打开测点分布弹窗
    showPlanConfig(item) {
      this.showDialog = true
      this.pointConfig = item.devSn
    },
    //获取设备列表
    getDevList() {
      let data = {
        projectSn: this.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getConcreteMonitorDevListApi(data).then(res => {
        if (res.code == 200) {
          this.devListData = res.result.records
          this.total = res.result.total
        }
      })
    },

    //新增设备
    addDevice() {
      this.devFormDialog = true
      this.dialogTitle = this.$t('message.devManage.addDev')
      this.dialogType = 1
      this.devForm.pointList = []
      this.devForm = {
        devName: '',
        devSn: '',
        pointNum: 8,
        pointList: [],
        importantAlarmPushWorkerId: [],
        promptAlarmPushWorkerId: [],
        secondaryAlarmPushWorkerId: [],
        urgentAlarmPushWorkerId: []
      }
      //渲染点位
      for (let i = 0; i < this.devForm.pointNum; i++) {
        let obj = { pointName: '', pointNo: i + 1, temperatureThreshold: '' }
        this.devForm.pointList.push(obj)
      }
      //获取通知人
      this.getNotifierList()
    },
    //切换监控点数量
    changePointsNumber(val) {
      this.devForm.pointNum = val
      this.devForm.pointList = []
      for (let i = 0; i < val; i++) {
        let obj = { pointName: '', pointNo: i + 1, temperatureThreshold: '' }
        this.devForm.pointList.push(obj)
        if (i == val - 1) {
          this.$message.success({
            // 切换点位数量成功
            message: this.$t('message.devManage.numChangeSuccess')
          })
        }
      }
    },
    //获取通知人员列表
    getNotifierList() {
      let data = {
        projectSn: this.projectSn
      }
      getProjectChilderSystemUserListApi(data).then(res => {
        this.workerInfoList = res.result
      })
    },

    //保存
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.devForm))
          data.importantAlarmPushWorkerId = data.importantAlarmPushWorkerId.join(',')
          data.promptAlarmPushWorkerId = data.promptAlarmPushWorkerId.join(',')
          data.secondaryAlarmPushWorkerId = data.secondaryAlarmPushWorkerId.join(',')
          data.urgentAlarmPushWorkerId = data.urgentAlarmPushWorkerId.join(',')
          data.projectSn = this.projectSn
          //新增
          if (this.dialogType == 1) {
            addConcreteMonitorDevApi(data).then(res => {
              if (res.code == 200) {
                // 保存成功
                this.$message.success(this.$t('message.devManage.saveSuccess'))
                this.devFormDialog = false
                this.$refs[formName].resetFields()
                this.getDevList()
              } else {
                this.$message.success(res.message)
              }
            })
          } else {
            //编辑
            editConcreteMonitorDevApi(data).then(res => {
              if (res.code == 200) {
                this.$message.success(this.$t('message.devManage.editSuccess'))
                this.devFormDialog = false
                this.$refs[formName].resetFields()
                this.getDevList()
              } else {
                this.$message.success(res.message)
              }
            })
          }
        } else {
          return false
        }
      })
    },

    //取消按钮
    cancleBtn(formName) {
      this.$refs[formName].resetFields()
      this.devFormDialog = false
    },

    //删除按钮
    deteleDev(val) {
      this.$confirm(this.$t('message.devManage.tipText') + '?', this.$t('message.devManage.tip'), {
        confirmButtonText: this.$t('message.safeMangeCheck.dialog.confirm'),
        cancelButtonText: this.$t('message.safeMangeCheck.dialog.cancel'),
        type: 'warning'
      })
        .then(() => {
          let data = {
            id: val.id
          }
          deleteConcreteMonitorDevApi(data).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: this.$t('message.devManage.deleteSuccess') + '!'
              })
              this.getDevList()
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('message.devManage.cancelDeleteSuccess') + '!'
          })
        })
    },

    //编辑设备
    editDevInfo(val) {
      this.dialogTitle = this.$t('message.devManage.editDev')
      this.dialogType = 2
      this.getNotifierList()
      this.getDevDetail(val.id)
      this.devFormDialog = true
    },
    //获取单个设备详情
    getDevDetail(id) {
      let data = {
        id
      }
      getDevDetailApi(data).then(res => {
        let val = res.result
        this.devForm = {
          devName: val.devName,
          devSn: val.devSn,
          pointNum: val.pointNum,
          pointList: val.pointList,
          importantAlarmPushWorkerId: val.importantAlarmPushWorkerId.split(','),
          promptAlarmPushWorkerId: val.promptAlarmPushWorkerId.split(','),
          secondaryAlarmPushWorkerId: val.secondaryAlarmPushWorkerId.split(','),
          urgentAlarmPushWorkerId: val.urgentAlarmPushWorkerId.split(','),
          id: id
        }
      })
    },

    //切换条数
    handleSizeChange(e) {
      this.pageSize = e
      this.getDevList()
    },
    //切换分页
    handleCurrentChange(e) {
      this.page = e
      this.getDevList()
    },
    changeWorkerType() {}
  }
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  margin-left: 155px;
}
.title {
  margin: 14px 0;
  font-weight: 900;
}
.devManage {
  background: #fff;
  height: 100%;
  width: 100%;
}
.operationText {
  margin-right: 30px;
}
.devFormBox {
  /deep/.el-select {
    .el-input {
      width: 215px;
    }
  }
}
</style>