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="$t('message.devManage.devNo')"></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"
                  ></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.workerId"
                      :label="item.workerName"
                      :value="item.workerId"
                    ></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.workerId"
                      :label="item.workerName"
                      :value="item.workerId"
                    ></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.workerId"
                      :label="item.workerName"
                      :value="item.workerId"
                    ></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.workerId"
                      :label="item.workerName"
                      :value="item.workerId"
                    ></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
                    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(",")
            .map(Number),
          promptAlarmPushWorkerId: val.promptAlarmPushWorkerId
            .split(",")
            .map(Number),
          secondaryAlarmPushWorkerId: val.secondaryAlarmPushWorkerId
            .split(",")
            .map(Number),
          urgentAlarmPushWorkerId: val.urgentAlarmPushWorkerId
            .split(",")
            .map(Number),
          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>