FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/deviceListOne.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-two" v-for="(item,index) in listZnmj" :key="index">
          <p class="for-title-p">{{subjectData.room}}-智能门禁{{index+1}}</p>
          <div class="for-text-box">
            <p>锁编号：</p>
            <el-tooltip class="item" effect="dark" :content="item.lockCode" placement="top">
              <p style="flex:2;">{{item.lockCode}}</p>
            </el-tooltip>
          </div>
          <div class="for-text-box">
            <p>房间名称：</p>
            <p style="flex:2;">{{item.roomName}}</p>
          </div>
          <div class="for-text-box">
            <p>管理员：</p>
            <p style="flex:2;">{{item.safeUserName}}</p>
          </div>
          <div class="for-button-box">
            <p @click="delLockRoom(item)"><i class="el-icon-delete" style="color:#ff6868;margin-right:10px;"></i>删除</p>
          </div>
        </div>
        <p class="add-for-p-two" style="height:188px;line-height:188px;" @click="listLockRoom"><i class="el-icon-plus"></i>添加智能门禁</p>
      </div>
    <!--
    lockCode锁编号
    roomName房间名称

    -->
      <!--<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
                 :close-on-click-modal="false">
        <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="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>
      <el-dialog :title="titleOne" :visible.sync="addTypeOne" v-if="addTypeOne" width="800px" append-to-body
                 :close-on-click-modal="false">
        <div style="height:500px;overflow: hidden;display: flex;flex-direction: column">
          <el-table  border :data="tableList" @select-all="handleSelectionChange" @select="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
            <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
            <el-table-column label="房间名称" align="center" prop="roomname" width="123px"/>
            <el-table-column label="门锁编号" align="center" prop="roomcode2" show-overflow-tooltip/>
            <el-table-column label="位置" align="center" prop="roomlocation" show-overflow-tooltip/>
            <el-table-column label="管理员" align="center" prop="roomlocation">
              <template slot-scope="scope">
                <el-select v-model="scope.row.safeUserId" placeholder="请选择">
                  <el-option
                    v-for="item in userListOption"
                    :key="item.id"
                    :label="item.user"
                    :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <!--
            房间名称：  roomname  门锁编号：roomcode2  位置：roomlocation
            -->
          </el-table>
          <pagination :page-sizes="[20, 30, 40, 50]"
                      v-show="total>0"
                      :total="total"
                      style="margin:0;"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="listLockRoom"
          />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelOne">取 消</el-button>
          <el-button type="primary" @click="submitFormOne">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import { listBySubjectId,addSensor,putSensor,delSensor,addHardware,putHardware,
  delHardware,subjectRelationList,listLockRoom,subjectRelation,delSubjectRelation } 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:[],   //摄像头
          listZnmj:[],//智能门禁
          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: [],
          titleOne:'新增智能门禁',
          addTypeOne:false,
          queryParams: {
            pageNumber: 1,
            pageSize:20,
          },
          tableList:[],
          total:0,
          //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
          selectedNum:0,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          multipleTableList:[],
          //智能门禁管理员数据列表
          userListOption:[],
        }
      },
      created() {
        this.listBySubjectId();
        this.subjectRelationList();
        this.getSensorList();
      },
      mounted(){
        this.getUserData();
      },
      methods:{
        getUserData(){
          let self = this;
          let list = [];
          let userNewList = this.subjectData.safeUserNameAdminPhone.split(',');
          for(let i=0;i<userNewList.length;i++){
            let minList = userNewList[i].split('@');
            let obj = {
              id:self.subjectData.safeUserId[i],
              user:minList[0],
              phone:minList[1],
            };
            list.push(obj);
          }
          this.$set(this,'userListOption',list);
        },
        // 取消按钮
        cancel() {
          this.addType = false;
        },
        cancelOne() {
          this.addTypeOne = false;
        },
        submitFormOne(){
          let self = this;
          if(!this.multipleTableList[0]){
            this.msgError("请勾选智能门禁")
            return
          }
          let obj = {
            slSubjectList:[],
          };
          for(let i=0;i<self.multipleTableList.length;i++){
            if(!self.multipleTableList[i].safeUserId){
              this.msgError("请选择管理员")
              return
            }
            let minObj = {
              subjectId:self.subjectData.id,
              subjectName:self.subjectData.name,
              lockRoomId:self.multipleTableList[i].roomid,
              lockCode:self.multipleTableList[i].roomcode2,
              roomLocation:self.multipleTableList[i].roomlocation,
              roomName:self.multipleTableList[i].roomname,
            }
            for(let o=0;o<self.userListOption.length;o++){
              if(self.multipleTableList[i].safeUserId == self.userListOption[o].id){
                minObj.safeUserId = self.userListOption[o].id;
                minObj.safeUserName = self.userListOption[o].user;
                minObj.safeUserPhone = self.userListOption[o].phone;
              }
            }
            obj.slSubjectList.push(minObj);
          }
          subjectRelation(obj).then(response => {
            this.addTypeOne = false;
            this.$set(this,'multipleTableList',[]);
            this.$set(this.queryParams,'pageNumber',1);
            this.subjectRelationList();
            this.msgSuccess(response.msg);
          });
        },
        listLockRoom(){
          this.$set(this,'multipleTableList',[]);
          this.$set(this.queryParams,'pageNumber',1);
          this.addTypeOne = true;
          let obj = JSON.parse(JSON.stringify(this.queryParams))
          obj.subjectId = this.subjectData.id;
          listLockRoom(this.queryParams).then(response => {
            for(let i=0;i<response.rows.length;i++){

            }
            this.$set(this,'tableList',response.rows);
            this.$set(this,'total',response.total);
          });
        },
        //删除门禁
        delLockRoom(item){
          this.$confirm('确认要删除该智能门禁?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            //  确定
            delSubjectRelation(item.id).then((response) => {
              this.msgSuccess(response.msg)
              this.addType = false;
              this.subjectRelationList();
            });
          }).catch(function() {
            //  取消
          });
        },
        // 提交
        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 = {
            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,
            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;
        },
        //获取锁列表
        subjectRelationList(){
          let obj = {
            subjectId:this.subjectData.id
          };
          subjectRelationList(obj).then(response => {
            this.$set(this,'listZnmj',response.rows);
          });
        },
        //获取列表
        listBySubjectId(){
          let obj = {
            subjectId:this.subjectData.id
          };
          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;
          });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          let self = this;
          this.$refs.multipleTable.clearSelection();
          let list = [];
          for(let i=0;i<selection.length;i++){
            if(i>3){
              self.$refs.multipleTable.toggleRowSelection(selection[i],false);
            }else{
              list.push(selection[i])
              self.$refs.multipleTable.toggleRowSelection(selection[i],true);
            }
          }
          this.$set(this,'multipleTableList',list);
          if (selection.length>4){
            this.msgError("一次最多勾选4个智能门禁")
          }
        },
        /*===记录勾选数据===
          需要再el-table 添加  :row-key="getRowKeys"
          需要在selection 添加 :reserve-selection="true"
        */
        getRowKeys(row) {
          return row.id
        },
      }
    }
</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 15px 15px 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;
            }
          }
        }
      }
      .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 15px 15px 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 15px 15px 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 15px 15px 0;
        i{
          margin-right:10px;
        }
      }
    }
  }
</style>