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
        prop="devName"
        :label="$t('message.devManage.devName')"
      ></el-table-column>
      <el-table-column
        prop="devSn"
        label="设备id"
      ></el-table-column>
      <!-- 监控点位数（个） -->
      <el-table-column
        prop="pointNum"
        :label="$t('message.devManage.montorLocation')"
      ></el-table-column>
      <!-- 操作 -->
      <el-table-column :label="$t('message.safeMangeCheck.operate')">
        <template slot-scope="scope">
          <div class="flex">
            <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>
  </div>
</template>
<script>
import {
  addConcreteMonitorDevApi,
  getConcreteMonitorDevListApi,
  getDevDetailApi,
  editConcreteMonitorDevApi,
  deleteConcreteMonitorDevApi
} from '@/assets/js/api/concreteMonitoring.js'
import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'
export default {
  data() {
    return {
      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: {
    //获取设备列表
    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;
}
.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>