FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/deviceList.vue

<!--物联设备配置-->
<template>
  <div class="deviceList scrollbar-box">
      <div class="title-box">
        <p class="left-title">传感器</p>
        <p class="right-button reset-button-one" @click="backPage">返回</p>
      </div>
      <div class="for-max-box">
        <div class="for-big-box" v-for="(item,index) in listCgq" :key="index">
          <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
          <div class="for-text-box">
            <p>网关编号：</p>
            <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
              <p>{{item.gatewayId}}</p>
            </el-tooltip>
          </div>
          <div class="for-button-box">
            <p @click="editData(5,item)"><i class="el-icon-edit-outline"></i>编辑</p>
            <p></p>
            <p @click="delSensor(item)"><i class="el-icon-delete"></i>删除</p>
          </div>
        </div>
        <p class="add-for-p" @click="addData(1)"><i class="el-icon-plus"></i>添加传感器</p>
      </div>
      <div class="title-box">
        <p class="left-title">一体机</p>
      </div>
      <div class="for-max-box">
        <div class="for-big-box" v-for="(item,index) in listYtj" :key="index">
          <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>
          <div class="for-text-box">
            <p>一体机编号：</p>
            <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
              <p>{{item.hardwareNum}}</p>
            </el-tooltip>
          </div>
          <div class="for-button-box">
            <p @click="editData(6,item)"><i class="el-icon-edit-outline"></i>编辑</p>
            <p></p>
            <p @click="delHardware(item)"><i class="el-icon-delete"></i>删除</p>
          </div>
        </div>
        <p class="add-for-p" @click="addData(2)"><i class="el-icon-plus"></i>添加一体机</p>
      </div>
      <div class="title-box">
        <p class="left-title">控制设备</p>
      </div>
      <div class="for-max-box">
        <div class="for-big-box-two" v-for="(item,index) in listkzsb" :key="index">
          <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
          <div class="for-text-box">
            <p>设备编号：</p>
            <el-tooltip class="item" effect="dark" :content="item.relayCode" placement="top">
              <p>{{item.relayCode}}</p>
            </el-tooltip>
          </div>
          <div class="for-text-box">
            <p>设备路由：</p>
            <p>{{item.bit}}</p>
          </div>
          <div class="for-button-box">
            <p @click="editData(7,item)"><i class="el-icon-edit-outline"></i>编辑</p>
            <p></p>
            <p @click="delHardwareTwo(item)"><i class="el-icon-delete"></i>删除</p>
          </div>
        </div>
        <p class="add-for-p-two" @click="addData(3)"><i class="el-icon-plus"></i>添加控制设备</p>
      </div>
      <div class="title-box">
        <p class="left-title">摄像头</p>
      </div>
      <div class="for-max-box">
        <div class="for-big-box" v-for="(item,index) in listSpjk" :key="index">
          <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>
          <div class="for-text-box">
            <p>摄像头编号：</p>
            <p></p>
          </div>
          <div class="for-text-box">
            <p></p>
            <el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">
              <p>{{item.hardwareNum}}</p>
            </el-tooltip>
          </div>
          <div class="for-button-box">
            <p @click="editData(8,item)"><i class="el-icon-edit-outline"></i>编辑</p>
            <p></p>
            <p @click="delHardwareThree(item)"><i class="el-icon-delete"></i>删除</p>
          </div>
        </div>
        <p class="add-for-p-two" @click="addData(4)"><i class="el-icon-plus"></i>添加摄像头</p>
      </div>
      <el-dialog :title="title" :visible.sync="addType" v-if="addType" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <div v-if="upType == 1 || upType == 5">
            <el-form-item label="传感器类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择传感器类型" style="width:320px;">
                <el-option
                  v-for="item in sensorAddOptions"
                  :key="item.enumName"
                  :label="item.name"
                  :value="item.enumName">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="网关编号" prop="gatewayId">
              <el-input v-model="form.gatewayId" placeholder="请输入网关编号"
                        maxlength="30" style="width:320px;"/>
            </el-form-item>
            <el-form-item label="路由" prop="routeNum">
              <el-input v-model="form.routeNum" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
            </el-form-item>
            <el-form-item label="传感器参数" prop="configName">
              <el-input v-model="form.configName"  placeholder="请输入传感器参数"
                        maxlength="30" style="width:320px;"></el-input>
            </el-form-item>
            <el-form-item label="状态参数" prop="configStatus">
              <el-input v-model="form.configStatus"  placeholder="请输入状态参数"
                        maxlength="30" style="width:320px;"></el-input>
            </el-form-item>
          </div>
          <div v-if="upType == 2 || upType == 6">
            <el-form-item label="一体机名称" prop="name">
              <el-input
                style="width:320px;"
                v-model="form.name"
                placeholder="请输入一体机名称"
                maxlength="8"
                size="small"
              />
            </el-form-item>
            <el-form-item label="一体机类型" prop="pcType">
              <el-select v-model="form.pcType" placeholder="请选择一体机类型" style="width:320px;">
                <el-option label="管控一体机" value="0" />
                <el-option label="学习一体机" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="一体机编号" prop="hardwareNum">
              <el-input
                style="width:320px;"
                v-model="form.hardwareNum"
                placeholder="请输入一体机编号"
                maxlength="30"
                size="small"
              />
            </el-form-item>
          </div>
          <div v-if="upType == 3 || upType == 7">
            <el-form-item label="硬件名称"  prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入名称"
                clearable
                size="small"
                maxLength="8"
              />
            </el-form-item>
            <el-form-item label="设备类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择设备类型" style="width:320px;" :disabled="disabledType">
                <el-option key="1" label="电源开关" value="1"></el-option>
                <el-option key="2" label="智能通风" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备版本" prop="hardwareType">
              <el-radio-group v-model="form.hardwareType">
                <el-radio :label="1">老继电器</el-radio>
                <el-radio :label="2">新继电器</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="设备编号" prop="relayCode">
              <el-input v-model="form.relayCode" placeholder="请输入设备编号"
                        maxlength="30" style="width:320px;"/>
            </el-form-item>
            <el-form-item label="设备路由" prop="bit">
              <el-input v-model="form.bit" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
            </el-form-item>
            <el-form-item label="设备参数" prop="configName" v-if="form.hardwareType == 2">
              <el-input v-model="form.configName" maxlength="30" placeholder="请输入设备参数" style="width:320px;"></el-input>
            </el-form-item>
            <el-form-item label="参数状态" prop="configStatus" v-if="form.hardwareType == 2">
              <el-input v-model="form.configStatus" maxlength="30" placeholder="请输入参数状态" style="width:320px;"></el-input>
            </el-form-item>
          </div>
          <div v-if="upType == 4 || upType == 8">
            <el-form-item label="摄像头编号" prop="hardwareNum">
              <el-input v-model="form.hardwareNum" placeholder="摄像头编号"
                        maxlength="30" style="width:320px;"/>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { listBySubjectId,addSensor,putSensor,delSensor,addHardware,putHardware,delHardware } from "@/api/laboratory/subject";
import { getSensorList } from "@/api/laboratory/sensor";
    export default {
      name: "deviceList",
      props:{
        subjectData:{},
      },
      data() {
        return {
          title:"",
          addType:false,
          listCgq:[],  //传感器
          listYtj:[],  //一体机
          listkzsb:[],
          listSpjk:[],   //摄像头
          form:{},
          // 表单校验
          rules: {
            name:[
              {required: true, message: '名称不能为空', trigger: 'blur'},
              { required: true, message: "名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
            ],
            type:[
              {required: true, message: '类型不能为空', trigger: 'blur'}
            ],
            gatewayId:[
              {required: true, message: '网关不能为空', trigger: 'blur'},
              { required: true, message: "网关不能为空", validator: this.spaceJudgment, trigger: "blur" }
            ],
            hardwareNum:[
              { required: true, message: "请输入编号", trigger: "blur" },
              { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
            ],
            pcType: [
              { required: true, message: "请选择类型", trigger: "blur" },
            ],
            hardwareType: [
              { required: true, message: "请选择设备版本", trigger: "blur" },
            ],
            relayCode: [
              { required: true, message: "请输入设备编号", trigger: "blur" },
              { required: true, message: "请输入设备编号", validator: this.spaceJudgment, trigger: "blur" }
            ],
            bit: [
              { required: true, message: "请输入路由", trigger: "blur" },
              { required: true, message: "请输入路由", validator: this.spaceJudgment, trigger: "blur" }
            ],
          },
          //提交类型
          upType:"",
          //传感器类型
          sensorAddOptions: [],
        }
      },
      created() {
        this.listBySubjectId();
        this.getSensorList();
      },
      mounted(){

      },
      methods:{
        // 取消按钮
        cancel() {
          this.addType = false;
        },
        // 提交
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if(this.upType == 1){
                //新增传感器
                this.addSensor();
              }else if(this.upType == 5){
                //编辑传感器
                this.putSensor();
              }else if(this.upType == 2){
                //新增一体机
                this.addHardware();
              }else if(this.upType == 6){
                //编辑一体机
                this.putHardware();
              }else if(this.upType == 3){
                //新增控制设备
                this.addHardwareTwo();
              }else if(this.upType == 7){
                //编辑控制设备
                this.putHardwareTwo();
              }else if(this.upType == 4){
                //新增控制设备
                this.addHardwareThree();
              }else if(this.upType == 8){
                //编辑控制设备
                this.putHardwareThree();
              }
            }
          });
        },
        //新增摄像头
        addHardwareThree(){
          let obj = {
            type:4,
            hardwareNum:this.form.hardwareNum,
            subjectId:this.subjectData.id,
            deptId:this.subjectData.deptId,
            deptName:this.subjectData.deptName,
          }
          addHardware(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //编辑摄像头
        putHardwareThree(){
          let obj = {
            id:this.form.id,
            hardwareNum:this.form.hardwareNum,
            subjectId:this.form.subjectId,
            deptId:this.form.deptId,
            deptName:this.form.deptName,
          }
          putHardware(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //删除摄像头
        delHardwareThree(item){
          this.$confirm('确认要删除该摄像头?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            delHardware(item.id).then((response) => {
              this.msgSuccess(response.msg)
              this.addType = false;
              this.listBySubjectId();
            });
          }).catch(function() {
            //  取消
          });
        },
        //新增控制设备
        addHardwareTwo(){
          let obj = {
            name:this.form.name,
            type:this.form.type,
            hardwareType:this.form.hardwareType,
            relayCode:this.form.relayCode,
            bit:this.form.bit,
            configName:this.form.configName,
            configStatus:this.form.configStatus,
            subjectId:this.subjectData.id,
            deptId:this.subjectData.deptId,
            deptName:this.subjectData.deptName,
          }
          addHardware(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //编辑控制设备
        putHardwareTwo(){
          let obj = {
            id:this.form.id,
            name:this.form.name,
            hardwareType:this.form.hardwareType,
            relayCode:this.form.relayCode,
            bit:this.form.bit,
            configName:this.form.configName,
            configStatus:this.form.configStatus,
            subjectId:this.form.subjectId,
            deptId:this.form.deptId,
            deptName:this.form.deptName,
          }
          putHardware(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //删除控制设备
        delHardwareTwo(item){
          this.$confirm('确认要删除该一体机?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            delHardware(item.id).then((response) => {
              this.msgSuccess(response.msg)
              this.addType = false;
              this.listBySubjectId();
            });
          }).catch(function() {
            //  取消
          });
        },
        //添加一体机
        addHardware(){
          let obj = {
            type:0,
            name:this.form.name,
            pcType:this.form.pcType,
            hardwareNum:this.form.hardwareNum,
            subjectId:this.subjectData.id,
            deptId:this.subjectData.deptId,
            deptName:this.subjectData.deptName,
          }
          addHardware(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //编辑一体机
        putHardware(){
          let obj = {
            id:this.form.id,
            name:this.form.name,
            pcType:this.form.pcType,
            hardwareNum:this.form.hardwareNum,
          }
          putHardware(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //删除一体机
        delHardware(item){
          this.$confirm('确认要删除该一体机?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            delHardware(item.id).then((response) => {
              this.msgSuccess(response.msg)
              this.addType = false;
              this.listBySubjectId();
            });
          }).catch(function() {
            //  取消
          });
        },
        //添加传感器
        addSensor(){
          let obj = {
            type:this.form.type,
            gatewayId:this.form.gatewayId,
            routeNum:this.form.routeNum,
            configName:this.form.configName,
            configStatus:this.form.configStatus,
            subjectId:this.subjectData.id
          }
          addSensor(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //编辑传感器
        putSensor(){
          let obj = {
            type:this.form.type,
            id:this.form.id,
            gatewayId:this.form.gatewayId,
            routeNum:this.form.routeNum,
            configName:this.form.configName,
            configStatus:this.form.configStatus,
          }
          putSensor(obj).then(response => {
            this.msgSuccess(response.msg)
            this.addType = false;
            this.listBySubjectId();
          });
        },
        //删除传感器
        delSensor(item){
          this.$confirm('确认要删除该传感器?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            delSensor(item.id).then((response) => {
              this.msgSuccess(response.msg)
              this.addType = false;
              this.listBySubjectId();
            });
          }).catch(function() {
            //  取消
          });
        },
        //添加
        addData(type){
          // this.resetForm("form");
          if(type == 1){
            this.title = '新增传感器';
            this.$set(this,'form',{
              type:"",
              gatewayId:"",
              routeNum:"",
              configName:"",
              configStatus:"",
            });
          }else if(type == 2){
            this.title = '新增一体机';
            this.$set(this,'form',{
              name:"",
              pcType:"",
              hardwareNum:"",
            });
          }else if(type == 3){
            this.title = '新增控制设备';
            this.form.hardwareType = 1;
            this.disabledType = false;
            this.$set(this,'form',{
              type:"",
              hardwareType:"",
              relayCode:"",
              bit:"",
              configName:"",
              configStatus:"",
            });
          }else if(type == 4){
            this.title = '新增摄像头';
            this.$set(this,'form',{
              hardwareNum:"",
            });
          }
          this.addType = true;
          this.upType = type;
        },
        //编辑
        editData(type,row){
          if(type == 5){
            this.title = '编辑传感器';
            this.$set(this,'form',JSON.parse(JSON.stringify(row)));
            this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.enumName)));
          }else if(type == 6){
            this.title = '编辑一体机';
            this.$set(this,'form',JSON.parse(JSON.stringify(row)));
            this.$set(this.form,'pcType',JSON.parse(JSON.stringify(row.pcType+'')));
          }else if(type == 7){
            this.title = '编辑控制设备';
            this.disabledType = true;
            this.$set(this,'form',JSON.parse(JSON.stringify(row)));
            this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.code+'')));
          }else if(type == 8){
            this.title = '编辑摄像头';
            this.$set(this,'form',JSON.parse(JSON.stringify(row)));
          }
          this.addType = true;
          this.upType = type;
        },
        //获取列表
        listBySubjectId(){
          let obj = {
            subjectId:this.subjectData.id
          };
          console.log("obj",obj)
          listBySubjectId(obj).then(response => {
            this.$set(this,'listCgq',response.data.listCgq);
            this.$set(this,'listYtj',response.data.listYtj);
            this.$set(this,'listkzsb',response.data.listkzsb);
            this.$set(this,'listSpjk',response.data.listSpjk);
          });
        },
        //返回上一页
        backPage(){
          this.$parent.clickPage(1);
        },
        //传感器类型
        getSensorList(){
          getSensorList().then(response => {
            this.sensorAddOptions = response.data;
          });
        },
      }
    }
</script>

<style scoped lang="scss">
  .deviceList{
    flex:1;
    display: flex;
    flex-direction: column;
    padding-bottom:20px;
    border-radius:10px!important;
    margin:5px 20px 20px 10px!important;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
    *{
      margin:0;
    }
    .title-box{
      display: flex;
      margin:0 20px;
      .left-title{
        flex:1;
        height:80px;
        line-height:80px;
        color:#0045AF;
        font-size:18px;
      }
      .right-button{
        margin:20px 0;
      }
    }
    .for-max-box{
      margin:0 40px;
      font-weight:500;
      .for-big-box{
        border: 1px solid #E0E0E0;
        display: inline-block;
        overflow: hidden;
        width:280px;
        min-height:130px;
        padding-bottom:10px;
        border-radius: 6px;
        margin:0 20px 20px 0;
        .for-title-p{
          background: rgba(182,214,254,1);
          color:#0183FA;
          font-size:16px;
          line-height:40px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          padding:0 16px;
          margin-bottom:10px;
          font-weight:700;
        }
        .for-text-box{
          display: flex;
          padding:0 23px;
          p{
            font-size:14px;
            line-height:30px;
            flex:1;
          }
          p:nth-child(1){
            color:#333;
            text-align: left;
          }
          p:nth-child(2){
            color:#999;
            text-align: right;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .for-button-box{
          display: flex;
          line-height:26px;
          margin-top:10px;
          p{
            text-align: center;
            font-size:14px;
            color:#666666;
          }
          p:nth-child(1){
            flex:1;
            cursor: pointer;
            i{
              color:#1151b4;
              margin-right:10px;
            }
          }
          p:nth-child(2){
            width:2px;
            height:14px;
            margin:6px 0;
            background: #CCCCCC;
          }
          p:nth-child(3){
            flex:1;
            cursor: pointer;
            i{
              color:#ff6868;
              margin-right:10px;
            }
          }
        }
      }
      .for-big-box-two{
        border: 1px solid #E0E0E0;
        display: inline-block;
        overflow: hidden;
        width:280px;
        min-height:158px;
        padding-bottom:10px;
        border-radius: 6px;
        margin:0 20px 20px 0;
        .for-title-p{
          background: rgba(182,214,254,1);
          color:#0183FA;
          font-size:16px;
          line-height:40px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          padding:0 16px;
          margin-bottom:10px;
          font-weight:700;
        }
        .for-text-box{
          display: flex;
          padding:0 23px;
          p{
            font-size:14px;
            line-height:30px;
            flex:1;
          }
          p:nth-child(1){
            text-align: left;
            color:#333;
          }
          p:nth-child(2){
            color:#999;
            text-align: right;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .for-button-box{
          display: flex;
          line-height:26px;
          margin-top:10px;
          p{
            text-align: center;
            font-size:14px;
            color:#666666;
          }
          p:nth-child(1){
            flex:1;
            cursor: pointer;
            i{
              color:#1151b4;
              margin-right:10px;
            }
          }
          p:nth-child(2){
            width:2px;
            height:14px;
            margin:6px 0;
            background: #CCCCCC;
          }
          p:nth-child(3){
            flex:1;
            cursor: pointer;
            i{
              color:#ff6868;
              margin-right:10px;
            }
          }
        }
      }
      .add-for-p{
        font-size:14px;
        border: 1px solid #E0E0E0;
        display: inline-block;
        overflow: hidden;
        width:280px;
        height:130px;
        line-height:130px;
        text-align: center;
        border-radius: 6px;
        color:#999999;
        cursor: pointer;
        margin:0 20px 20px 0;
        i{
          margin-right:10px;
        }
      }
      .add-for-p-two{
        font-size:14px;
        border: 1px solid #E0E0E0;
        display: inline-block;
        overflow: hidden;
        width:280px;
        height:158px;
        line-height:158px;
        text-align: center;
        border-radius: 6px;
        color:#999999;
        cursor: pointer;
        margin:0 20px 20px 0;
        i{
          margin-right:10px;
        }
      }
    }
  }
</style>