deviceListOne.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961
  1. <!--物联设备配置-->
  2. <template>
  3. <div class="deviceList scrollbar-box">
  4. <div class="title-box">
  5. <p class="left-title">传感器</p>
  6. <p class="right-button reset-button-one" @click="backPage">返回</p>
  7. </div>
  8. <div class="for-max-box">
  9. <div class="for-big-box" v-for="(item,index) in listCgq" :key="index">
  10. <p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>
  11. <div class="for-text-box">
  12. <p>网关编号:</p>
  13. <el-tooltip class="item" effect="dark" :content="item.gatewayId" placement="top">
  14. <p>{{item.gatewayId}}</p>
  15. </el-tooltip>
  16. </div>
  17. <div class="for-button-box">
  18. <p @click="editData(5,item)"><i class="el-icon-edit-outline"></i>编辑</p>
  19. <p></p>
  20. <p @click="delSensor(item)"><i class="el-icon-delete"></i>删除</p>
  21. </div>
  22. </div>
  23. <p class="add-for-p" @click="addData(1)"><i class="el-icon-plus"></i>添加传感器</p>
  24. </div>
  25. <div class="title-box">
  26. <p class="left-title">智能门禁</p>
  27. </div>
  28. <div class="for-max-box">
  29. <div class="for-big-box-two" v-for="(item,index) in listZnmj" :key="index">
  30. <p class="for-title-p">{{subjectData.room}}-智能门禁{{index+1}}</p>
  31. <div class="for-text-box">
  32. <p>锁编号:</p>
  33. <el-tooltip class="item" effect="dark" :content="item.lockCode" placement="top">
  34. <p>{{item.lockCode}}</p>
  35. </el-tooltip>
  36. </div>
  37. <div class="for-text-box">
  38. <p>房间名称:</p>
  39. <p>{{item.roomName}}</p>
  40. </div>
  41. <div class="for-button-box">
  42. <p @click="delLockRoom(item)"><i class="el-icon-delete" style="color:#ff6868;margin-right:10px;"></i>删除</p>
  43. </div>
  44. </div>
  45. <p class="add-for-p-two" @click="listLockRoom"><i class="el-icon-plus"></i>添加智能门禁</p>
  46. </div>
  47. <!--
  48. lockCode锁编号
  49. roomName房间名称
  50. -->
  51. <!--<div class="title-box">-->
  52. <!--<p class="left-title">一体机</p>-->
  53. <!--</div>-->
  54. <!--<div class="for-max-box">-->
  55. <!--<div class="for-big-box" v-for="(item,index) in listYtj" :key="index">-->
  56. <!--<p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>-->
  57. <!--<div class="for-text-box">-->
  58. <!--<p>一体机编号:</p>-->
  59. <!--<el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">-->
  60. <!--<p>{{item.hardwareNum}}</p>-->
  61. <!--</el-tooltip>-->
  62. <!--</div>-->
  63. <!--<div class="for-button-box">-->
  64. <!--<p @click="editData(6,item)"><i class="el-icon-edit-outline"></i>编辑</p>-->
  65. <!--<p></p>-->
  66. <!--<p @click="delHardware(item)"><i class="el-icon-delete"></i>删除</p>-->
  67. <!--</div>-->
  68. <!--</div>-->
  69. <!--<p class="add-for-p" @click="addData(2)"><i class="el-icon-plus"></i>添加一体机</p>-->
  70. <!--</div>-->
  71. <!--<div class="title-box">-->
  72. <!--<p class="left-title">控制设备</p>-->
  73. <!--</div>-->
  74. <!--<div class="for-max-box">-->
  75. <!--<div class="for-big-box-two" v-for="(item,index) in listkzsb" :key="index">-->
  76. <!--<p class="for-title-p">{{subjectData.room}}-{{item.type.name}}传感器{{index+1}}</p>-->
  77. <!--<div class="for-text-box">-->
  78. <!--<p>设备编号:</p>-->
  79. <!--<el-tooltip class="item" effect="dark" :content="item.relayCode" placement="top">-->
  80. <!--<p>{{item.relayCode}}</p>-->
  81. <!--</el-tooltip>-->
  82. <!--</div>-->
  83. <!--<div class="for-text-box">-->
  84. <!--<p>设备路由:</p>-->
  85. <!--<p>{{item.bit}}</p>-->
  86. <!--</div>-->
  87. <!--<div class="for-button-box">-->
  88. <!--<p @click="editData(7,item)"><i class="el-icon-edit-outline"></i>编辑</p>-->
  89. <!--<p></p>-->
  90. <!--<p @click="delHardwareTwo(item)"><i class="el-icon-delete"></i>删除</p>-->
  91. <!--</div>-->
  92. <!--</div>-->
  93. <!--<p class="add-for-p-two" @click="addData(3)"><i class="el-icon-plus"></i>添加控制设备</p>-->
  94. <!--</div>-->
  95. <!--<div class="title-box">-->
  96. <!--<p class="left-title">摄像头</p>-->
  97. <!--</div>-->
  98. <!--<div class="for-max-box">-->
  99. <!--<div class="for-big-box" v-for="(item,index) in listSpjk" :key="index">-->
  100. <!--<p class="for-title-p">{{subjectData.room}}-{{item.type.name}}{{index+1}}</p>-->
  101. <!--<div class="for-text-box">-->
  102. <!--<p>摄像头编号:</p>-->
  103. <!--<p></p>-->
  104. <!--</div>-->
  105. <!--<div class="for-text-box">-->
  106. <!--<p></p>-->
  107. <!--<el-tooltip class="item" effect="dark" :content="item.hardwareNum" placement="top">-->
  108. <!--<p>{{item.hardwareNum}}</p>-->
  109. <!--</el-tooltip>-->
  110. <!--</div>-->
  111. <!--<div class="for-button-box">-->
  112. <!--<p @click="editData(8,item)"><i class="el-icon-edit-outline"></i>编辑</p>-->
  113. <!--<p></p>-->
  114. <!--<p @click="delHardwareThree(item)"><i class="el-icon-delete"></i>删除</p>-->
  115. <!--</div>-->
  116. <!--</div>-->
  117. <!--<p class="add-for-p-two" @click="addData(4)"><i class="el-icon-plus"></i>添加摄像头</p>-->
  118. <!--</div>-->
  119. <el-dialog :title="title" :visible.sync="addType" v-if="addType" width="500px" append-to-body>
  120. <el-form ref="form" :model="form" :rules="rules" label-width="110px">
  121. <div v-if="upType == 1 || upType == 5">
  122. <el-form-item label="传感器类型" prop="type">
  123. <el-select v-model="form.type" placeholder="请选择传感器类型" style="width:320px;">
  124. <el-option
  125. v-for="item in sensorAddOptions"
  126. :key="item.enumName"
  127. :label="item.name"
  128. :value="item.enumName">
  129. </el-option>
  130. </el-select>
  131. </el-form-item>
  132. <el-form-item label="网关编号" prop="gatewayId">
  133. <el-input v-model="form.gatewayId" placeholder="请输入网关编号"
  134. maxlength="30" style="width:320px;"/>
  135. </el-form-item>
  136. <el-form-item label="路由" prop="routeNum">
  137. <el-input v-model="form.routeNum" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
  138. </el-form-item>
  139. <el-form-item label="传感器参数" prop="configName">
  140. <el-input v-model="form.configName" placeholder="请输入传感器参数"
  141. maxlength="30" style="width:320px;"></el-input>
  142. </el-form-item>
  143. <el-form-item label="状态参数" prop="configStatus">
  144. <el-input v-model="form.configStatus" placeholder="请输入状态参数"
  145. maxlength="30" style="width:320px;"></el-input>
  146. </el-form-item>
  147. </div>
  148. <div v-if="upType == 2 || upType == 6">
  149. <el-form-item label="一体机名称" prop="name">
  150. <el-input
  151. style="width:320px;"
  152. v-model="form.name"
  153. placeholder="请输入一体机名称"
  154. maxlength="8"
  155. size="small"
  156. />
  157. </el-form-item>
  158. <el-form-item label="一体机类型" prop="pcType">
  159. <el-select v-model="form.pcType" placeholder="请选择一体机类型" style="width:320px;">
  160. <el-option label="管控一体机" value="0" />
  161. <el-option label="学习一体机" value="1" />
  162. </el-select>
  163. </el-form-item>
  164. <el-form-item label="一体机编号" prop="hardwareNum">
  165. <el-input
  166. style="width:320px;"
  167. v-model="form.hardwareNum"
  168. placeholder="请输入一体机编号"
  169. maxlength="30"
  170. size="small"
  171. />
  172. </el-form-item>
  173. </div>
  174. <div v-if="upType == 3 || upType == 7">
  175. <el-form-item label="设备类型" prop="type">
  176. <el-select v-model="form.type" placeholder="请选择设备类型" style="width:320px;" :disabled="disabledType">
  177. <el-option key="1" label="电源开关" value="1"></el-option>
  178. <el-option key="2" label="智能通风" value="2"></el-option>
  179. </el-select>
  180. </el-form-item>
  181. <el-form-item label="设备版本" prop="hardwareType">
  182. <el-radio-group v-model="form.hardwareType">
  183. <el-radio :label="1">老继电器</el-radio>
  184. <el-radio :label="2">新继电器</el-radio>
  185. </el-radio-group>
  186. </el-form-item>
  187. <el-form-item label="设备编号" prop="relayCode">
  188. <el-input v-model="form.relayCode" placeholder="请输入设备编号"
  189. maxlength="30" style="width:320px;"/>
  190. </el-form-item>
  191. <el-form-item label="设备路由" prop="bit">
  192. <el-input v-model="form.bit" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="2" placeholder="请输入路由" style="width:320px;"></el-input>
  193. </el-form-item>
  194. <el-form-item label="设备参数" prop="configName" v-if="form.hardwareType == 2">
  195. <el-input v-model="form.configName" maxlength="30" placeholder="请输入设备参数" style="width:320px;"></el-input>
  196. </el-form-item>
  197. <el-form-item label="参数状态" prop="configStatus" v-if="form.hardwareType == 2">
  198. <el-input v-model="form.configStatus" maxlength="30" placeholder="请输入参数状态" style="width:320px;"></el-input>
  199. </el-form-item>
  200. </div>
  201. <div v-if="upType == 4 || upType == 8">
  202. <el-form-item label="摄像头编号" prop="hardwareNum">
  203. <el-input v-model="form.hardwareNum" placeholder="摄像头编号"
  204. maxlength="30" style="width:320px;"/>
  205. </el-form-item>
  206. </div>
  207. </el-form>
  208. <div slot="footer" class="dialog-footer">
  209. <el-button @click="cancel">取 消</el-button>
  210. <el-button type="primary" @click="submitForm">确 定</el-button>
  211. </div>
  212. </el-dialog>
  213. <el-dialog :title="titleOne" :visible.sync="addTypeOne" v-if="addTypeOne" width="800px" append-to-body>
  214. <div style="height:500px;overflow: hidden;display: flex;flex-direction: column">
  215. <el-table border :data="tableList" @select-all="handleSelectionChange" @select="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
  216. <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
  217. <el-table-column label="房间名称" align="center" prop="roomname" width="123px"/>
  218. <el-table-column label="门锁编号" align="center" prop="roomcode2" show-overflow-tooltip/>
  219. <el-table-column label="位置" align="center" prop="roomlocation" show-overflow-tooltip/>
  220. <!--
  221. 房间名称: roomname 门锁编号:roomcode2 位置:roomlocation
  222. -->
  223. </el-table>
  224. <pagination :page-sizes="[20, 30, 40, 50]"
  225. v-show="total>0"
  226. :total="total"
  227. style="margin:0;"
  228. :page.sync="queryParams.pageNum"
  229. :limit.sync="queryParams.pageSize"
  230. @pagination="listLockRoom"
  231. />
  232. </div>
  233. <div slot="footer" class="dialog-footer">
  234. <el-button @click="cancelOne">取 消</el-button>
  235. <el-button type="primary" @click="submitFormOne">确 定</el-button>
  236. </div>
  237. </el-dialog>
  238. </div>
  239. </template>
  240. <script>
  241. import { listBySubjectId,addSensor,putSensor,delSensor,addHardware,putHardware,
  242. delHardware,subjectRelationList,listLockRoom,subjectRelation,delSubjectRelation } from "@/api/laboratory/subject";
  243. import { getSensorList } from "@/api/laboratory/sensor";
  244. export default {
  245. name: "deviceList",
  246. props:{
  247. subjectData:{},
  248. },
  249. data() {
  250. return {
  251. title:"",
  252. addType:false,
  253. listCgq:[], //传感器
  254. listYtj:[], //一体机
  255. listkzsb:[],
  256. listSpjk:[], //摄像头
  257. listZnmj:[],//智能门禁
  258. form:{},
  259. // 表单校验
  260. rules: {
  261. name:[
  262. {required: true, message: '一体机名称不能为空', trigger: 'blur'},
  263. { required: true, message: "一体机名称不能为空", validator: this.spaceJudgment, trigger: "blur" }
  264. ],
  265. type:[
  266. {required: true, message: '类型不能为空', trigger: 'blur'}
  267. ],
  268. gatewayId:[
  269. {required: true, message: '网关不能为空', trigger: 'blur'},
  270. { required: true, message: "网关不能为空", validator: this.spaceJudgment, trigger: "blur" }
  271. ],
  272. hardwareNum:[
  273. { required: true, message: "请输入编号", trigger: "blur" },
  274. { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
  275. ],
  276. pcType: [
  277. { required: true, message: "请选择类型", trigger: "blur" },
  278. ],
  279. hardwareType: [
  280. { required: true, message: "请选择设备版本", trigger: "blur" },
  281. ],
  282. relayCode: [
  283. { required: true, message: "请输入网关编号", trigger: "blur" },
  284. { required: true, message: "请输入网关编号", validator: this.spaceJudgment, trigger: "blur" }
  285. ],
  286. bit: [
  287. { required: true, message: "请输入路由", trigger: "blur" },
  288. { required: true, message: "请输入路由", validator: this.spaceJudgment, trigger: "blur" }
  289. ],
  290. },
  291. //提交类型
  292. upType:"",
  293. //传感器类型
  294. sensorAddOptions: [],
  295. titleOne:'新增智能门禁',
  296. addTypeOne:false,
  297. queryParams: {
  298. pageNumber: 1,
  299. pageSize:20,
  300. },
  301. tableList:[],
  302. total:0,
  303. //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
  304. selectedNum:0,
  305. // 选中数组
  306. ids: [],
  307. // 非单个禁用
  308. single: true,
  309. // 非多个禁用
  310. multiple: true,
  311. multipleTableList:[],
  312. }
  313. },
  314. created() {
  315. this.listBySubjectId();
  316. this.subjectRelationList();
  317. this.getSensorList();
  318. },
  319. mounted(){
  320. },
  321. methods:{
  322. // 取消按钮
  323. cancel() {
  324. this.addType = false;
  325. },
  326. cancelOne() {
  327. this.addTypeOne = false;
  328. },
  329. submitFormOne(){
  330. let self = this;
  331. if(!this.multipleTableList[0]){
  332. this.msgError("请勾选智能门禁")
  333. return
  334. }
  335. let obj = {
  336. slSubjectList:[],
  337. };
  338. for(let i=0;i<self.multipleTableList.length;i++){
  339. let minObj = {
  340. subjectId:self.subjectData.id,
  341. subjectName:self.subjectData.name,
  342. lockRoomId:self.multipleTableList[i].roomid,
  343. lockCode:self.multipleTableList[i].roomcode2,
  344. roomLocation:self.multipleTableList[i].roomlocation,
  345. roomName:self.multipleTableList[i].roomname,
  346. }
  347. obj.slSubjectList.push(minObj);
  348. }
  349. subjectRelation(obj).then(response => {
  350. this.addTypeOne = false;
  351. this.$set(this,'multipleTableList',[]);
  352. this.$set(this.queryParams,'pageNumber',1);
  353. this.subjectRelationList();
  354. this.msgSuccess(response.msg);
  355. });
  356. },
  357. listLockRoom(){
  358. this.$set(this,'multipleTableList',[]);
  359. this.$set(this.queryParams,'pageNumber',1);
  360. this.addTypeOne = true;
  361. let obj = JSON.parse(JSON.stringify(this.queryParams))
  362. obj.subjectId = this.subjectData.id;
  363. listLockRoom(this.queryParams).then(response => {
  364. this.$set(this,'tableList',response.rows);
  365. this.$set(this,'total',response.total);
  366. });
  367. },
  368. //删除门禁
  369. delLockRoom(item){
  370. this.$confirm('确认要删除该智能门禁?', "警告", {
  371. confirmButtonText: "确定",
  372. cancelButtonText: "取消",
  373. type: "warning"
  374. }).then(() => {
  375. // 确定
  376. delSubjectRelation(item.id).then((response) => {
  377. this.msgSuccess(response.msg)
  378. this.addType = false;
  379. this.subjectRelationList();
  380. });
  381. }).catch(function() {
  382. // 取消
  383. });
  384. },
  385. // 提交
  386. submitForm() {
  387. this.$refs["form"].validate(valid => {
  388. if (valid) {
  389. if(this.upType == 1){
  390. //新增传感器
  391. this.addSensor();
  392. }else if(this.upType == 5){
  393. //编辑传感器
  394. this.putSensor();
  395. }else if(this.upType == 2){
  396. //新增一体机
  397. this.addHardware();
  398. }else if(this.upType == 6){
  399. //编辑一体机
  400. this.putHardware();
  401. }else if(this.upType == 3){
  402. //新增控制设备
  403. this.addHardwareTwo();
  404. }else if(this.upType == 7){
  405. //编辑控制设备
  406. this.putHardwareTwo();
  407. }else if(this.upType == 4){
  408. //新增控制设备
  409. this.addHardwareThree();
  410. }else if(this.upType == 8){
  411. //编辑控制设备
  412. this.putHardwareThree();
  413. }
  414. }
  415. });
  416. },
  417. //新增摄像头
  418. addHardwareThree(){
  419. let obj = {
  420. type:4,
  421. hardwareNum:this.form.hardwareNum,
  422. subjectId:this.subjectData.id,
  423. deptId:this.subjectData.deptId,
  424. deptName:this.subjectData.deptName,
  425. }
  426. addHardware(obj).then(response => {
  427. this.msgSuccess("提交成功")
  428. this.addType = false;
  429. this.listBySubjectId();
  430. });
  431. },
  432. //编辑摄像头
  433. putHardwareThree(){
  434. let obj = {
  435. id:this.form.id,
  436. hardwareNum:this.form.hardwareNum,
  437. subjectId:this.form.subjectId,
  438. deptId:this.form.deptId,
  439. deptName:this.form.deptName,
  440. }
  441. putHardware(obj).then(response => {
  442. this.msgSuccess("提交成功")
  443. this.addType = false;
  444. this.listBySubjectId();
  445. });
  446. },
  447. //删除摄像头
  448. delHardwareThree(item){
  449. this.$confirm('确认要删除该摄像头?', "警告", {
  450. confirmButtonText: "确定",
  451. cancelButtonText: "取消",
  452. type: "warning"
  453. }).then(() => {
  454. // 确定
  455. delHardware(item.id).then((response) => {
  456. this.msgSuccess("提交成功")
  457. this.addType = false;
  458. this.listBySubjectId();
  459. });
  460. }).catch(function() {
  461. // 取消
  462. });
  463. },
  464. //新增控制设备
  465. addHardwareTwo(){
  466. let obj = {
  467. type:this.form.type,
  468. hardwareType:this.form.hardwareType,
  469. relayCode:this.form.relayCode,
  470. bit:this.form.bit,
  471. configName:this.form.configName,
  472. configStatus:this.form.configStatus,
  473. subjectId:this.subjectData.id,
  474. deptId:this.subjectData.deptId,
  475. deptName:this.subjectData.deptName,
  476. }
  477. addHardware(obj).then(response => {
  478. this.msgSuccess("提交成功")
  479. this.addType = false;
  480. this.listBySubjectId();
  481. });
  482. },
  483. //编辑控制设备
  484. putHardwareTwo(){
  485. let obj = {
  486. id:this.form.id,
  487. hardwareType:this.form.hardwareType,
  488. relayCode:this.form.relayCode,
  489. bit:this.form.bit,
  490. configName:this.form.configName,
  491. configStatus:this.form.configStatus,
  492. subjectId:this.form.subjectId,
  493. deptId:this.form.deptId,
  494. deptName:this.form.deptName,
  495. }
  496. putHardware(obj).then(response => {
  497. this.msgSuccess("提交成功")
  498. this.addType = false;
  499. this.listBySubjectId();
  500. });
  501. },
  502. //删除控制设备
  503. delHardwareTwo(item){
  504. this.$confirm('确认要删除该一体机?', "警告", {
  505. confirmButtonText: "确定",
  506. cancelButtonText: "取消",
  507. type: "warning"
  508. }).then(() => {
  509. // 确定
  510. delHardware(item.id).then((response) => {
  511. this.msgSuccess("提交成功")
  512. this.addType = false;
  513. this.listBySubjectId();
  514. });
  515. }).catch(function() {
  516. // 取消
  517. });
  518. },
  519. //添加一体机
  520. addHardware(){
  521. let obj = {
  522. type:0,
  523. name:this.form.name,
  524. pcType:this.form.pcType,
  525. hardwareNum:this.form.hardwareNum,
  526. subjectId:this.subjectData.id,
  527. deptId:this.subjectData.deptId,
  528. deptName:this.subjectData.deptName,
  529. }
  530. addHardware(obj).then(response => {
  531. this.msgSuccess("提交成功")
  532. this.addType = false;
  533. this.listBySubjectId();
  534. });
  535. },
  536. //编辑一体机
  537. putHardware(){
  538. let obj = {
  539. id:this.form.id,
  540. name:this.form.name,
  541. pcType:this.form.pcType,
  542. hardwareNum:this.form.hardwareNum,
  543. }
  544. putHardware(obj).then(response => {
  545. this.msgSuccess("提交成功")
  546. this.addType = false;
  547. this.listBySubjectId();
  548. });
  549. },
  550. //删除一体机
  551. delHardware(item){
  552. this.$confirm('确认要删除该一体机?', "警告", {
  553. confirmButtonText: "确定",
  554. cancelButtonText: "取消",
  555. type: "warning"
  556. }).then(() => {
  557. // 确定
  558. delHardware(item.id).then((response) => {
  559. this.msgSuccess("提交成功")
  560. this.addType = false;
  561. this.listBySubjectId();
  562. });
  563. }).catch(function() {
  564. // 取消
  565. });
  566. },
  567. //添加传感器
  568. addSensor(){
  569. let obj = {
  570. type:this.form.type,
  571. gatewayId:this.form.gatewayId,
  572. routeNum:this.form.routeNum,
  573. configName:this.form.configName,
  574. configStatus:this.form.configStatus,
  575. subjectId:this.subjectData.id
  576. }
  577. addSensor(obj).then(response => {
  578. this.msgSuccess("提交成功")
  579. this.addType = false;
  580. this.listBySubjectId();
  581. });
  582. },
  583. //编辑传感器
  584. putSensor(){
  585. let obj = {
  586. type:this.form.type,
  587. id:this.form.id,
  588. gatewayId:this.form.gatewayId,
  589. routeNum:this.form.routeNum,
  590. configName:this.form.configName,
  591. configStatus:this.form.configStatus,
  592. }
  593. putSensor(obj).then(response => {
  594. this.msgSuccess("提交成功")
  595. this.addType = false;
  596. this.listBySubjectId();
  597. });
  598. },
  599. //删除传感器
  600. delSensor(item){
  601. this.$confirm('确认要删除该传感器?', "警告", {
  602. confirmButtonText: "确定",
  603. cancelButtonText: "取消",
  604. type: "warning"
  605. }).then(() => {
  606. // 确定
  607. delSensor(item.id).then((response) => {
  608. this.msgSuccess("提交成功")
  609. this.addType = false;
  610. this.listBySubjectId();
  611. });
  612. }).catch(function() {
  613. // 取消
  614. });
  615. },
  616. //添加
  617. addData(type){
  618. // this.resetForm("form");
  619. if(type == 1){
  620. this.title = '新增传感器';
  621. this.$set(this,'form',{
  622. type:"",
  623. gatewayId:"",
  624. routeNum:"",
  625. configName:"",
  626. configStatus:"",
  627. });
  628. }else if(type == 2){
  629. this.title = '新增一体机';
  630. this.$set(this,'form',{
  631. name:"",
  632. pcType:"",
  633. hardwareNum:"",
  634. });
  635. }else if(type == 3){
  636. this.title = '新增控制设备';
  637. this.form.hardwareType = 1;
  638. this.disabledType = false;
  639. this.$set(this,'form',{
  640. type:"",
  641. hardwareType:"",
  642. relayCode:"",
  643. bit:"",
  644. configName:"",
  645. configStatus:"",
  646. });
  647. }else if(type == 4){
  648. this.title = '新增摄像头';
  649. this.$set(this,'form',{
  650. hardwareNum:"",
  651. });
  652. }
  653. this.addType = true;
  654. this.upType = type;
  655. },
  656. //编辑
  657. editData(type,row){
  658. if(type == 5){
  659. this.title = '编辑传感器';
  660. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  661. this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.enumName)));
  662. }else if(type == 6){
  663. this.title = '编辑一体机';
  664. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  665. this.$set(this.form,'pcType',JSON.parse(JSON.stringify(row.pcType+'')));
  666. }else if(type == 7){
  667. this.title = '编辑控制设备';
  668. this.disabledType = true;
  669. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  670. this.$set(this.form,'type',JSON.parse(JSON.stringify(row.type.code+'')));
  671. }else if(type == 8){
  672. this.title = '编辑摄像头';
  673. this.$set(this,'form',JSON.parse(JSON.stringify(row)));
  674. }
  675. this.addType = true;
  676. this.upType = type;
  677. },
  678. //获取锁列表
  679. subjectRelationList(){
  680. let obj = {
  681. subjectId:this.subjectData.id
  682. };
  683. subjectRelationList(obj).then(response => {
  684. this.$set(this,'listZnmj',response.rows);
  685. });
  686. },
  687. //获取列表
  688. listBySubjectId(){
  689. let obj = {
  690. subjectId:this.subjectData.id
  691. };
  692. console.log("obj",obj)
  693. listBySubjectId(obj).then(response => {
  694. this.$set(this,'listCgq',response.data.listCgq);
  695. this.$set(this,'listYtj',response.data.listYtj);
  696. this.$set(this,'listkzsb',response.data.listkzsb);
  697. this.$set(this,'listSpjk',response.data.listSpjk);
  698. });
  699. },
  700. //返回上一页
  701. backPage(){
  702. this.$parent.clickPage(1);
  703. },
  704. //传感器类型
  705. getSensorList(){
  706. getSensorList().then(response => {
  707. this.sensorAddOptions = response.data;
  708. });
  709. },
  710. // 多选框选中数据
  711. handleSelectionChange(selection) {
  712. let self = this;
  713. this.$refs.multipleTable.clearSelection();
  714. let list = [];
  715. for(let i=0;i<selection.length;i++){
  716. if(i>3){
  717. self.$refs.multipleTable.toggleRowSelection(selection[i],false);
  718. }else{
  719. list.push(selection[i])
  720. self.$refs.multipleTable.toggleRowSelection(selection[i],true);
  721. }
  722. }
  723. this.$set(this,'multipleTableList',list);
  724. if (selection.length>4){
  725. this.msgError("一次最多勾选4个智能门禁")
  726. }
  727. },
  728. /*===记录勾选数据===
  729. 需要再el-table 添加 :row-key="getRowKeys"
  730. 需要在selection 添加 :reserve-selection="true"
  731. */
  732. getRowKeys(row) {
  733. return row.id
  734. },
  735. }
  736. }
  737. </script>
  738. <style scoped lang="scss">
  739. .deviceList{
  740. flex:1;
  741. display: flex;
  742. flex-direction: column;
  743. padding-bottom:20px;
  744. border-radius:10px!important;
  745. margin:5px 20px 20px 10px!important;
  746. box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
  747. *{
  748. margin:0;
  749. }
  750. .title-box{
  751. display: flex;
  752. margin:0 20px;
  753. .left-title{
  754. flex:1;
  755. height:80px;
  756. line-height:80px;
  757. color:#0045AF;
  758. font-size:18px;
  759. }
  760. .right-button{
  761. margin:20px 0;
  762. }
  763. }
  764. .for-max-box{
  765. margin:0 40px;
  766. font-weight:500;
  767. .for-big-box{
  768. border: 1px solid #E0E0E0;
  769. display: inline-block;
  770. overflow: hidden;
  771. width:280px;
  772. min-height:130px;
  773. padding-bottom:10px;
  774. border-radius: 6px;
  775. margin:0 15px 15px 0;
  776. .for-title-p{
  777. background: rgba(182,214,254,1);
  778. color:#0183FA;
  779. font-size:16px;
  780. line-height:40px;
  781. display:block;
  782. overflow:hidden;
  783. text-overflow:ellipsis;
  784. white-space:nowrap;
  785. padding:0 16px;
  786. margin-bottom:10px;
  787. font-weight:700;
  788. }
  789. .for-text-box{
  790. display: flex;
  791. padding:0 23px;
  792. p{
  793. font-size:14px;
  794. line-height:30px;
  795. flex:1;
  796. }
  797. p:nth-child(1){
  798. text-align: left;
  799. color:#999;
  800. }
  801. p:nth-child(2){
  802. text-align: right;
  803. color:#333;
  804. overflow:hidden;
  805. text-overflow:ellipsis;
  806. white-space:nowrap;
  807. }
  808. }
  809. .for-button-box{
  810. display: flex;
  811. line-height:26px;
  812. margin-top:10px;
  813. p{
  814. text-align: center;
  815. font-size:14px;
  816. color:#666666;
  817. }
  818. p:nth-child(1){
  819. flex:1;
  820. cursor: pointer;
  821. i{
  822. color:#1151b4;
  823. margin-right:10px;
  824. }
  825. }
  826. p:nth-child(2){
  827. width:2px;
  828. height:14px;
  829. margin:6px 0;
  830. background: #CCCCCC;
  831. }
  832. p:nth-child(3){
  833. flex:1;
  834. cursor: pointer;
  835. i{
  836. color:#ff6868;
  837. margin-right:10px;
  838. }
  839. }
  840. }
  841. }
  842. .for-big-box-two{
  843. border: 1px solid #E0E0E0;
  844. display: inline-block;
  845. overflow: hidden;
  846. width:280px;
  847. min-height:158px;
  848. padding-bottom:10px;
  849. border-radius: 6px;
  850. margin:0 15px 15px 0;
  851. .for-title-p{
  852. background: rgba(182,214,254,1);
  853. color:#0183FA;
  854. font-size:16px;
  855. line-height:40px;
  856. display:block;
  857. overflow:hidden;
  858. text-overflow:ellipsis;
  859. white-space:nowrap;
  860. padding:0 16px;
  861. margin-bottom:10px;
  862. font-weight:700;
  863. }
  864. .for-text-box{
  865. display: flex;
  866. padding:0 23px;
  867. p{
  868. font-size:14px;
  869. line-height:30px;
  870. flex:1;
  871. }
  872. p:nth-child(1){
  873. text-align: left;
  874. color:#999;
  875. }
  876. p:nth-child(2){
  877. text-align: right;
  878. color:#333;
  879. overflow:hidden;
  880. text-overflow:ellipsis;
  881. white-space:nowrap;
  882. }
  883. }
  884. .for-button-box{
  885. display: flex;
  886. line-height:26px;
  887. margin-top:10px;
  888. p{
  889. text-align: center;
  890. font-size:14px;
  891. color:#666666;
  892. }
  893. p:nth-child(1){
  894. flex:1;
  895. cursor: pointer;
  896. i{
  897. color:#1151b4;
  898. margin-right:10px;
  899. }
  900. }
  901. p:nth-child(2){
  902. width:2px;
  903. height:14px;
  904. margin:6px 0;
  905. background: #CCCCCC;
  906. }
  907. p:nth-child(3){
  908. flex:1;
  909. cursor: pointer;
  910. i{
  911. color:#ff6868;
  912. margin-right:10px;
  913. }
  914. }
  915. }
  916. }
  917. .add-for-p{
  918. font-size:14px;
  919. border: 1px solid #E0E0E0;
  920. display: inline-block;
  921. overflow: hidden;
  922. width:280px;
  923. height:130px;
  924. line-height:130px;
  925. text-align: center;
  926. border-radius: 6px;
  927. color:#999999;
  928. cursor: pointer;
  929. margin:0 15px 15px 0;
  930. i{
  931. margin-right:10px;
  932. }
  933. }
  934. .add-for-p-two{
  935. font-size:14px;
  936. border: 1px solid #E0E0E0;
  937. display: inline-block;
  938. overflow: hidden;
  939. width:280px;
  940. height:158px;
  941. line-height:158px;
  942. text-align: center;
  943. border-radius: 6px;
  944. color:#999999;
  945. cursor: pointer;
  946. margin:0 15px 15px 0;
  947. i{
  948. margin-right:10px;
  949. }
  950. }
  951. }
  952. }
  953. </style>