index.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865
  1. <!--智能锁-->
  2. <template>
  3. <div class="app-container smartAlarm">
  4. <div class="smartAlarm-min-page" v-if="pageType == 1">
  5. <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
  6. <el-form-item label="关键字" prop="searchValue">
  7. <el-input
  8. style="width:210px;"
  9. maxLength="30"
  10. v-model="queryParamsData.searchValue"
  11. placeholder="设备编号/名称/实验室/化学品柜"
  12. clearable
  13. size="small"
  14. />
  15. </el-form-item>
  16. <el-form-item label="学院" prop="deptId">
  17. <el-select v-model="queryParamsData.deptId" clearable placeholder="请选择学院" style="width:160px;">
  18. <el-option
  19. v-for="item in optionsListOne"
  20. :key="item.deptId"
  21. :label="item.deptName"
  22. :value="item.deptId">
  23. </el-option>
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item label="设备状态" prop="operate">
  27. <el-select v-model="queryParamsData.operate" clearable placeholder="请选择状态" style="width:160px;">
  28. <el-option
  29. v-for="item in optionsListTwo"
  30. :key="item.id"
  31. :label="item.name"
  32. :value="item.id">
  33. </el-option>
  34. </el-select>
  35. </el-form-item>
  36. <el-form-item label="关联状态" prop="joinCabinetLock">
  37. <el-select v-model="queryParamsData.joinCabinetLock" clearable placeholder="请选择状态" style="width:160px;">
  38. <el-option label="已关联" :value="1"></el-option>
  39. <el-option label="未关联" :value="0"></el-option>
  40. </el-select>
  41. </el-form-item>
  42. <el-form-item>
  43. <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
  44. <p class="reset-button-one" @click="resetQuery">重置</p>
  45. </el-form-item>
  46. <el-form-item style="float: right;">
  47. <el-col :span="1.5" v-hasPermi="['laboratory:hardware9:add']">
  48. <p class="add-button-one-90"
  49. @click="pageToggle(1)"
  50. ><i class="el-icon-plus"></i>新增</p>
  51. </el-col>
  52. </el-form-item>
  53. <!--<el-form-item style="float: right;">-->
  54. <!--<el-col :span="1.5" v-hasPermi="['']">-->
  55. <!--<p class="add-button-one-90"-->
  56. <!--@click="pageToggle(6)"-->
  57. <!--&gt;柜锁设置</p>-->
  58. <!--</el-col>-->
  59. <!--</el-form-item>-->
  60. <el-form-item style="float: right;">
  61. <el-col :span="1.5" v-hasPermi="['laboratory:hardware9:joinCabinet']">
  62. <p class="add-button-one-120"
  63. @click="pageToggle(5)"
  64. >关联化学品柜</p>
  65. </el-col>
  66. </el-form-item>
  67. <el-form-item style="float: right;">
  68. <el-dropdown @command="importButton" v-hasPermi="['laboratory:hardware9:import']">
  69. <div class="form-dropdown-box">
  70. <img src="@/assets/ZDimages/personnelManagement/icon_jzgxx_dr.png">
  71. <p>导入</p>
  72. <img src="@/assets/ZDimages/personnelManagement/icon_jzggl_xljt.png">
  73. </div>
  74. <el-dropdown-menu slot="dropdown">
  75. <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">下载模板</el-dropdown-item>
  76. <el-dropdown-item style="margin:0 10px;color:#666;" :command="{command:2}">导入数据</el-dropdown-item>
  77. </el-dropdown-menu>
  78. </el-dropdown>
  79. </el-form-item>
  80. </el-form>
  81. <el-table border :data="tableList" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="getRowKeys">
  82. <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
  83. <el-table-column label="智能柜锁编号" align="center" prop="hardwareNum" width="280"/>
  84. <el-table-column label="柜锁名称" align="center" prop="name" width="180" show-overflow-tooltip/>
  85. <el-table-column label="学院" align="center" prop="deptName" width="160" show-overflow-tooltip/>
  86. <el-table-column label="位置" align="center" prop="posi" width="250" show-overflow-tooltip/>
  87. <!--sass后放开-->
  88. <!--<el-table-column label="设备状态" align="center" prop="status" width="100">-->
  89. <!--<template slot-scope="scope">{{scope.row.status == 3||scope.row.status == 4?'在线':'离线'}}</template>-->
  90. <!--</el-table-column>-->
  91. <el-table-column label="关联化学品柜" align="center" prop="cabinetName" width="160"/>
  92. <el-table-column label="锁柜ID/mac地址" align="center" prop="lockId" width="140">
  93. <template slot-scope="scope">{{scope.row.lockType==1?scope.row.lockId:scope.row.lockMac}}</template>
  94. </el-table-column>
  95. <el-table-column label="摄像头IP" align="center" prop="ipAddress" width="200"/>
  96. <el-table-column label="采集器编号" align="center" prop="relayCode" width="200"/>
  97. <!--<el-table-column label="操作最大时长" align="center" prop="operateTime" width="120">-->
  98. <!--<template slot-scope="scope">{{scope.row.operateTime?scope.row.operateTime+'分钟':''}}</template>-->
  99. <!--</el-table-column>-->
  100. <el-table-column label="创建时间" align="center" prop="createTime" width="160"/>
  101. <el-table-column label="创建人" align="center" prop="createBy" width="120"/>
  102. <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" v-if="tableButtonType">
  103. <template slot-scope="scope">
  104. <div class="button-box">
  105. <p class="table-min-button" v-hasPermi="['chemical:locklog:list']" @click="pageToggle(4,scope.row)">操作记录</p>
  106. <el-dropdown @command="moreClick" v-hasPermi="['laboratory:hardware9:edit','laboratory:hardware9:remove']">
  107. <p class="table-min-button">更多>></p>
  108. <el-dropdown-menu slot="dropdown">
  109. <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{row:scope.row,command:1}" v-hasPermi="['laboratory:hardware9:edit']">编辑</el-dropdown-item>
  110. <el-dropdown-item style="margin:0 10px;" :command="{row:scope.row,command:2}" v-hasPermi="['laboratory:hardware9:remove']">删除</el-dropdown-item>
  111. </el-dropdown-menu>
  112. </el-dropdown>
  113. </div>
  114. </template>
  115. </el-table-column>
  116. </el-table>
  117. <div style="display: flex;height:32px;margin:15px 0;">
  118. <!--<p style="flex:4;"></p>-->
  119. <p style="text-align: left;margin:0;line-height:32px;margin-right:20px;font-size:14px;color:#999;">
  120. <i class="el-icon-warning" style="color:#0183FA;"></i>
  121. 已选择 {{selectedNum}} 项
  122. </p>
  123. <div style="flex:5;">
  124. <pagination :page-sizes="[20, 30, 40, 50]"
  125. v-show="total>0"
  126. :total="total"
  127. style="margin:0;"
  128. :page.sync="queryParams.pageNum"
  129. :limit.sync="queryParams.pageSize"
  130. @pagination="getList"
  131. />
  132. </div>
  133. </div>
  134. </div>
  135. <!--导入窗口-->
  136. <el-dialog title="导入数据" :visible.sync="importOpen" @close="importOpenOff" width="600px" append-to-body class="import-dialog-box">
  137. <div class="el-upload__text" style="margin:0 0 20px 58px;">提示:导入后的数据将覆盖原有数据</div>
  138. <el-upload
  139. class="import-dialog-upLoad-box"
  140. :drag="true"
  141. :data="upImportData"
  142. :action="uploadImgUrl"
  143. :show-file-list="false"
  144. :on-success="handleAvatarSuccess"
  145. :headers="headers"
  146. :before-upload="beforeAvatarUpload">
  147. <i class="el-icon-upload"></i>
  148. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  149. <!--<div class="el-upload__tip" slot="tip">-->
  150. <!--<el-checkbox v-model="upImportData.upDate">是否更新已经存在的数据</el-checkbox>-->
  151. <!--</div>-->
  152. <div class="el-upload__tip" slot="tip">数据导入模板.xlsx<span style="color:#0183FA;cursor: pointer" @click="importTemplate">下载</span></div>
  153. <div class="el-upload-text-box" slot="tip" v-if="getImportData.downFile">
  154. <div class="img-text-box">
  155. <img src="@/assets/ZDimages/personnelManagement/icon_dr_wj.png">
  156. <p>{{getImportData.textName}}</p>
  157. </div>
  158. <p class="text-p">数据导入成功 <span style="color:#0183FA;">{{getImportData.successNum}}</span> 条,失败 <span style="color:#FF6464 ;">{{getImportData.failureNum}}</span> 条</p>
  159. <div class="img-text-box">
  160. <img src="@/assets/ZDimages/personnelManagement/icon_dr_sj.png">
  161. <p style="color:#0183FA;cursor: pointer;" @click="failureExcel">点击下载失败数据报表</p>
  162. </div>
  163. </div>
  164. </el-upload>
  165. <div slot="footer" class="teacher-import-dialog-button-box">
  166. <p class="inquire-button-one" @click="importOpenOff">确定</p>
  167. </div>
  168. <div class="teacher-import-dialog-position-box" v-if="loading"></div>
  169. </el-dialog>
  170. <!--新增/编辑-->
  171. <el-dialog :title="dialogTitle" :visible.sync="addDialogType" v-if="addDialogType" width="540px" append-to-body class="add-dialog-box">
  172. <el-form ref="form" :model="form" :rules="rules" label-width="130px">
  173. <el-form-item label="智能柜锁编号:" prop="hardwareNum">
  174. <el-input v-model="form.hardwareNum" placeholder="最大20个字符,包含大小写字母、数字" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="20" style="width:360px;"/>
  175. </el-form-item>
  176. <el-form-item label="智能柜锁名称:" prop="name">
  177. <el-input v-model="form.name" placeholder="最大10个字符,包含汉字、大小写字母、数字、符号" maxlength="10" style="width:360px;"/>
  178. </el-form-item>
  179. <el-form-item label="实验室:" prop="subjectId">
  180. <el-select
  181. style="width:360px;"
  182. v-model="form.subjectId"
  183. filterable
  184. remote
  185. clearable
  186. @focus="selectFocus"
  187. reserve-keyword
  188. @clear="clearClick"
  189. placeholder="搜索选择实验室"
  190. :remote-method="getSelectList"
  191. :loading="loading">
  192. <el-option
  193. v-for="item in selectList"
  194. :key="item.id"
  195. :label="item.name"
  196. :value="item.id">
  197. </el-option>
  198. </el-select>
  199. </el-form-item>
  200. <el-form-item label="摄像头IP:" prop="ipAddress">
  201. <el-input v-model="form.ipAddress" placeholder="请输入摄像头IP" maxlength="20" style="width:360px;"/>
  202. </el-form-item>
  203. <el-form-item label="柜锁类型" prop="lockType">
  204. <el-select v-model="form.lockType" placeholder="请选择柜锁类型" style="width:360px;">
  205. <el-option label="485" :value="1"></el-option>
  206. <el-option label="蓝牙" :value="2"></el-option>
  207. </el-select>
  208. </el-form-item>
  209. <el-form-item label="锁柜ID:" prop="lockId">
  210. <el-input v-model="form.lockId" placeholder="0-253" maxlength="3" style="width:360px;" onkeyup="value=value.replace(/[^\d]/g,'')"/>
  211. </el-form-item>
  212. <el-form-item label="采集器编号:" prop="relayCode" v-if="form.lockType == 1">
  213. <el-input v-model="form.relayCode" placeholder="请输入采集器编号" maxlength="20" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" style="width:360px;"/>
  214. </el-form-item>
  215. <el-form-item label="mac地址:" prop="lockMac" v-if="form.lockType == 2">
  216. <el-input v-model="form.lockMac" placeholder="请输入mac地址,多个请用逗号隔开如:8.8.8.8,9.9.9.9" maxlength="200" style="width:360px;"/>
  217. </el-form-item>
  218. <el-form-item label="蓝牙网关" prop="gatewayId" v-if="form.lockType == 2">
  219. <el-select v-model="form.gatewayId" placeholder="请选择蓝牙网关" style="width:360px;">
  220. <el-option v-for="(item,index) in optionsLockGateway" :key="index" :label="item.gatewayName" :value="item.id"></el-option>
  221. </el-select>
  222. </el-form-item>
  223. </el-form>
  224. <div slot="footer" class="dialog-footer">
  225. <el-button type="primary" @click="submitForm">确 定</el-button>
  226. <el-button @click="cancel">取 消</el-button>
  227. </div>
  228. </el-dialog>
  229. <!--柜锁设置-->
  230. <el-dialog title="柜锁设置" :visible.sync="setUpType" v-if="setUpType" width="520px" append-to-body class="add-dialog-box">
  231. <el-form ref="setUpForm" :model="setUpForm" :rules="rules" label-width="100px">
  232. <el-form-item label="操作时长:" prop="operateTime">
  233. <el-input v-model="setUpForm.operateTime" placeholder="请输入操作时长" min="1" max="999" maxlength="3" style="width:360px;">
  234. <template slot="append">分钟</template>
  235. </el-input>
  236. </el-form-item>
  237. <p style="font-size:14px;line-height:20px;color:#999;">
  238. <i class="el-icon-warning" style="color:#FFA312;font-size:16px;margin-left:100px;"></i>
  239. 设置开锁后操作的最大有效时长
  240. </p>
  241. </el-form>
  242. <div slot="footer" class="dialog-footer">
  243. <el-button type="primary" @click="setUpFormSubmitForm">确 定</el-button>
  244. <el-button @click="setUpFormCancel">取 消</el-button>
  245. </div>
  246. </el-dialog>
  247. <!--操作记录-->
  248. <operation-record v-if="pageType == 4" :operationRecordPropsData="operationRecordPropsData"></operation-record>
  249. <!--关联化学品柜-->
  250. <associated-cabinet-lock v-if="pageType == 5" :associatedCabinetLockPropsData="associatedCabinetLockPropsData"></associated-cabinet-lock>
  251. </div>
  252. </template>
  253. <script>
  254. import { hxpSmartTerminal,filterDept,getSubList,addHxpSmartTerminal,putHxpSmartTerminal,getHxpSmartTerminal,delHxpSmartTerminal } from "@/api/medicUniversity-3_1/index";
  255. import { listHardware, delHardware, addHardware, updateHardware,setLock,getCabinetLockList,laboratoryLockGatewayGetList } from "@/api/medicUniversity-3_1/index";
  256. import { listDepartments } from "@/api/system/dept";
  257. import { getToken } from "@/utils/auth";
  258. import associatedCabinetLock from "./associatedCabinetLock.vue"
  259. import operationRecord from "./operationRecord.vue"
  260. export default {
  261. name: "smartAlarm",
  262. components: {
  263. associatedCabinetLock,
  264. operationRecord
  265. },
  266. data() {
  267. let digitalJudgment = (rule, value, callback) => {
  268. if(value>253||value<0){
  269. return callback(new Error(''));
  270. }else{
  271. callback()
  272. }
  273. }
  274. return {
  275. client:{},
  276. // table操作按钮校验
  277. tableButtonType:this.hasPermiDom(['chemical:locklog:list','laboratory:hardware5:edit','laboratory:hardware5:remove']),
  278. //上传相关配置
  279. uploadImgUrl: window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/laboratory/hardware/importData", // 上传地址
  280. headers: {
  281. Authorization: "Bearer " + getToken(),
  282. },
  283. // 遮罩层
  284. loading:false,
  285. //页面状态
  286. pageType:1,
  287. // 搜索数据
  288. queryParamsData:{
  289. pageNum:1,
  290. pageSize:20,
  291. },
  292. // 搜索实际发送数据
  293. queryParams:{
  294. pageNum:1,
  295. pageSize:20,
  296. },
  297. //数据数量
  298. total:0,
  299. //数据数组
  300. tableList:[],
  301. //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
  302. selectedNum:0,
  303. // 选中数组
  304. ids: [],
  305. // 非单个禁用
  306. single: true,
  307. // 非多个禁用
  308. multiple: true,
  309. //学院列表
  310. optionsListOne:[],
  311. //状态列表
  312. optionsListTwo:[{id:"ONLINE",name:"在线"},{id:"OFFLINE",name:"离线"}],
  313. //导入弹层开关
  314. importOpen:false,
  315. //导入数据
  316. upImportData:{
  317. sysUserEnable:true,
  318. upDate:false,
  319. terminalType:"AI_CABINETLOCK",
  320. },
  321. getImportData:{
  322. downFile:false,
  323. successNum:0,
  324. failureNum:0,
  325. textName:"",
  326. },
  327. //编辑新增相关
  328. dialogTitle:"",
  329. addDialogType:false,
  330. form:{},
  331. selectList:[],
  332. selectListData:[],
  333. rules:{
  334. hardwareNum: [
  335. { required: true, trigger: "blur", message: "最大20个字符,包含大小写字母、数字" },
  336. { required: true, message: "最大20个字符,包含大小写字母、数字", validator: this.spaceJudgment, trigger: "blur" }
  337. ],
  338. name: [
  339. { required: true, trigger: "blur", message: "最大10个字符,包含汉字、大小写字母、数字、符号" },
  340. { required: true, message: "最大10个字符,包含汉字、大小写字母、数字、符号", validator: this.spaceJudgment, trigger: "blur" }
  341. ],
  342. subjectId: [
  343. { required: true, trigger: "blur", message: "搜索选择实验室" },
  344. ],
  345. lockType: [
  346. { required: true, trigger: "blur", message: "请选择柜锁类型" },
  347. ],
  348. gatewayId: [
  349. { required: true, trigger: "blur", message: "请选择蓝牙网关" },
  350. ],
  351. operateTime: [
  352. { required: true, trigger: "blur", message: "请输入操作时长" },
  353. { required: true, message: "请输入操作时长", validator: this.spaceJudgment, trigger: "blur" },
  354. { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
  355. ],
  356. lockId: [
  357. { required: true, trigger: "blur", message: "请输入0-253之间的数字" },
  358. { required: true, message: "请输入0-253之间的数字", validator: this.spaceJudgment, trigger: "blur" },
  359. { required: true, message: "请输入0-253之间的数字", validator: digitalJudgment, trigger: "blur" }
  360. ],
  361. ipAddress: [
  362. { required: true, trigger: "blur", message: "请输入摄像头ip" },
  363. { required: true, message: "请输入摄像头ip", validator: this.spaceJudgment, trigger: "blur" }
  364. ],
  365. // lockMac: [
  366. // { required: true, trigger: "blur", message: "请输入mac地址" },
  367. // { required: true, message: "请输入mac地址", validator: this.spaceJudgment, trigger: "blur" }
  368. // ],
  369. relayCode: [
  370. { required: true, trigger: "blur", message: "请输入采集器编号" },
  371. { required: true, message: "请输入采集器编号", validator: this.spaceJudgment, trigger: "blur" }
  372. ],
  373. },
  374. //锁柜设置
  375. setUpType:false,
  376. setUpForm:{},
  377. //操作记录传参数据
  378. operationRecordPropsData:{},
  379. //关联记录传参数据
  380. associatedCabinetLockPropsData:{},
  381. //柜锁MAC列表
  382. optionsLockGateway:[],
  383. };
  384. },
  385. created() {
  386. },
  387. mounted(){
  388. this.laboratoryLockGatewayGetList();
  389. this.filterDept();
  390. this.listDepartments();
  391. this.getList();
  392. },
  393. methods: {
  394. laboratoryLockGatewayGetList(){
  395. laboratoryLockGatewayGetList().then(response => {
  396. this.$set(this,'optionsLockGateway',response.data);
  397. });
  398. },
  399. selectFocus(){
  400. if(!this.selectList[0]){
  401. this.filterDept();
  402. }
  403. },
  404. //更多按钮
  405. moreClick(data){
  406. let self = this;
  407. if(data.command == 1){
  408. this.pageToggle(2,data.row);
  409. }else if(data.command == 2){
  410. this.pageToggle(3,data.row);
  411. }
  412. },
  413. //获取学院列表
  414. listDepartments(){
  415. listDepartments().then(response => {
  416. this.optionsListOne = response.data;
  417. });
  418. },
  419. pageToggle(type,item){
  420. let self = this;
  421. if(type == 0){
  422. this.pageType = 1;
  423. this.getList();
  424. }else if(type == 1){
  425. //新增
  426. this.dialogTitle = '新增';
  427. this.$set(this,'form',{
  428. subjectId:'',
  429. name:'',
  430. hardwareNum:'',
  431. lockId:'',
  432. ipAddress:'',
  433. relayCode:'',
  434. lockType:'',
  435. gatewayId:'',
  436. lockMac:'',
  437. });
  438. this.clearClick();
  439. this.addDialogType = true;
  440. }else if(type == 2){
  441. // 编辑
  442. this.dialogTitle = '编辑';
  443. let obj = {
  444. id:item.id,
  445. subjectId:item.subjectId,
  446. name:item.name,
  447. hardwareNum:item.hardwareNum,
  448. lockId:item.lockId,
  449. ipAddress:item.ipAddress,
  450. relayCode:item.relayCode,
  451. lockType:item.lockType,
  452. lockMac:item.lockMac,
  453. gatewayId:item.gatewayId,
  454. };
  455. this.$set(this,'form',obj);
  456. this.clearClick();
  457. this.addDialogType = true;
  458. }else if(type == 3){
  459. // 删除
  460. if(item.joinCabinetId){
  461. this.msgError('已关联化学品柜,无法删除')
  462. return
  463. }
  464. this.$confirm('确认要删除吗?', "警告", {
  465. confirmButtonText: "确定",
  466. cancelButtonText: "取消",
  467. type: "warning"
  468. }).then(function() {
  469. delHardware(item.id).then(response => {
  470. if (response.code == 200){
  471. self.msgSuccess(response.msg);
  472. self.getList();
  473. }
  474. });
  475. }).then(() => {
  476. }).catch(() => {});
  477. }else if (type == 4){
  478. //操作记录
  479. this.operationRecordPropsData = item;
  480. this.pageType = 4;
  481. }else if (type == 5){
  482. //关联化学品柜
  483. if(self.ids.length>0) {
  484. let obj = {
  485. ids:this.ids+'',
  486. }
  487. getCabinetLockList(obj).then(response => {
  488. this.associatedCabinetLockPropsData = response.rows;
  489. this.pageType = 5;
  490. });
  491. }else{
  492. this.msgError('请选择要关联的锁柜')
  493. }
  494. }else if (type == 6){
  495. //锁柜设置
  496. if(self.ids.length>0) {
  497. this.setUpForm = {
  498. operateTime:"",
  499. }
  500. this.setUpType = true;
  501. }else{
  502. this.msgError('请选择要设置的锁柜')
  503. }
  504. }
  505. },
  506. //查询当前院系
  507. filterDept(){
  508. filterDept().then(response => {
  509. let idText = "";
  510. for(let i=0;i<response.data.length;i++){
  511. if(i==0){
  512. idText = idText + response.data[i].deptId;
  513. }else{
  514. idText = idText +','+ response.data[i].deptId;
  515. }
  516. }
  517. //查询院系下实验室
  518. getSubList(idText).then(response => {
  519. //当前列表
  520. this.selectList = JSON.parse(JSON.stringify(response.data));
  521. //原始列表数据
  522. this.selectListData = JSON.parse(JSON.stringify(response.data));
  523. });
  524. });
  525. },
  526. /** 实验室-本地懒加载 */
  527. getSelectList(val) {
  528. let self = this;
  529. let list = [];
  530. for(let i=0;i<self.selectListData.length;i++){
  531. if(self.selectListData[i].name.indexOf(val) != -1){
  532. list.push(self.selectListData[i]);
  533. }
  534. }
  535. this.selectList = JSON.parse(JSON.stringify(list))
  536. },
  537. //实验室选中清除
  538. clearClick(){
  539. this.selectList = JSON.parse(JSON.stringify(this.selectListData))
  540. },
  541. submitForm(){
  542. this.$refs["form"].validate((valid) => {
  543. if (valid) {
  544. if(this.form.id){
  545. //编辑
  546. let obj = {
  547. id:this.form.id,
  548. type:'AI_CABINETLOCK',
  549. subjectId:this.form.subjectId,
  550. name:this.form.name,
  551. hardwareNum:this.form.hardwareNum,
  552. lockId:this.form.lockId,
  553. ipAddress:this.form.ipAddress,
  554. relayCode:this.form.relayCode,
  555. lockType:this.form.lockType,
  556. }
  557. if(obj.lockType == 1){
  558. obj.lockId=this.form.lockId;
  559. obj.relayCode=this.form.relayCode;
  560. obj.gatewayId='';
  561. obj.lockMac='';
  562. }else if(obj.lockType == 2){
  563. obj.gatewayId=this.form.gatewayId;
  564. obj.lockMac=this.form.lockMac;
  565. obj.lockId=this.form.lockId;
  566. obj.relayCode='';
  567. }
  568. updateHardware(obj).then(response => {
  569. if (response.code == 200){
  570. this.addDialogType = false;
  571. this.msgSuccess(response.msg);
  572. this.getList();
  573. }
  574. });
  575. }else{
  576. //新增
  577. let obj = {
  578. type:'AI_CABINETLOCK',
  579. subjectId:this.form.subjectId,
  580. name:this.form.name,
  581. hardwareNum:this.form.hardwareNum,
  582. lockId:this.form.lockId,
  583. ipAddress:this.form.ipAddress,
  584. relayCode:this.form.relayCode,
  585. lockType:this.form.lockType,
  586. }
  587. if(obj.lockType == 1){
  588. obj.lockId=this.form.lockId;
  589. obj.relayCode=this.form.relayCode;
  590. obj.gatewayId='';
  591. obj.lockMac='';
  592. }else if(obj.lockType == 2){
  593. obj.gatewayId=this.form.gatewayId;
  594. obj.lockMac=this.form.lockMac;
  595. obj.lockId=this.form.lockId;
  596. obj.relayCode='';
  597. }
  598. addHardware(obj).then(response => {
  599. if (response.code == 200){
  600. this.addDialogType = false;
  601. this.msgSuccess(response.msg);
  602. this.resetQuery();
  603. }
  604. });
  605. }
  606. }
  607. })
  608. },
  609. cancel(){
  610. this.addDialogType = false;
  611. },
  612. //柜锁设置
  613. setUpFormSubmitForm(){
  614. this.$refs["setUpForm"].validate((valid) => {
  615. if (valid) {
  616. let obj = {
  617. ids:this.ids,
  618. operateTime:parseInt(this.setUpForm.operateTime),
  619. }
  620. setLock(obj).then(response => {
  621. if(response.code == 200){
  622. this.setUpType = false;
  623. this.msgSuccess(response.msg);
  624. this.getList();
  625. }
  626. });
  627. }
  628. })
  629. },
  630. setUpFormCancel(){
  631. this.setUpType = false;
  632. },
  633. //获取数据列表
  634. getList(){
  635. this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
  636. this.queryParamsData.type = 'AI_CABINETLOCK';
  637. listHardware(this.queryParamsData).then(response => {
  638. this.selectedNum = 0;
  639. this.ids = [];
  640. this.total = response.total;
  641. this.tableList = response.rows;
  642. });
  643. },
  644. /** 搜索按钮操作 */
  645. handleQuery() {
  646. this.queryParamsData.pageNum = 1;
  647. this.queryParamsData.pageSize = 20;
  648. this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
  649. this.getList();
  650. },
  651. /** 重置按钮操作 */
  652. resetQuery() {
  653. this.$set(this,'queryParamsData',{});
  654. this.$set(this,'queryParams',{});
  655. this.handleQuery();
  656. },
  657. //导入页面关闭
  658. importOpenOff(){
  659. this.importOpen = false;
  660. this.getImportData.downFile = false;
  661. this.getImportData.successNum = 0;
  662. this.getImportData.failureNum = 0;
  663. this.getImportData.textName = "";
  664. },
  665. /** 导入按钮操作 */
  666. importButton(item){
  667. if(item.command == 1){
  668. // 下载模板
  669. this.download('/laboratory/hardware/importTemplate', {}, `导入模板.xlsx`)
  670. }else if(item.command == 2){
  671. // 导入数据
  672. console.log('导入数据');
  673. this.importOpen = true;
  674. }
  675. },
  676. /** 下载模板操作 */
  677. importTemplate() {
  678. this.download('/laboratory/hardware/importTemplate', {}, `导入模板.xlsx`)
  679. },
  680. /*下载失败列表*/
  681. failureExcel(){
  682. this.download('/laboratory/hardware/importErrorData', {}, `失败报表.xlsx`)
  683. },
  684. //****************************************导入功能**************************************
  685. handleAvatarSuccess(res, file) {
  686. if(res.code == 200){
  687. if(res.data.downFile){
  688. this.getImportData.downFile = res.data.downFile
  689. this.getImportData.successNum = res.data.successNum
  690. this.getImportData.failureNum = res.data.failureNum
  691. }else{
  692. this.msgSuccess(res.msg);
  693. this.importOpen = false;
  694. this.resetQuery();
  695. }
  696. // this.getImportData.downFile = res.data.downFile
  697. // this.getImportData.successNum = res.data.successNum
  698. // this.getImportData.failureNum = res.data.failureNum
  699. // this.importOpen = false;
  700. // this.getList();
  701. }else{
  702. this.msgError(res.msg);
  703. }
  704. this.loading = false;
  705. },
  706. beforeAvatarUpload(file) {
  707. let type = false;
  708. console.log('file',file);
  709. if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
  710. this.getImportData.textName = file.name;
  711. type = true;
  712. this.loading = true;
  713. }else{
  714. this.msgError('只能上传xls/xlsx格式文件')
  715. type = false;
  716. }
  717. return type;
  718. },
  719. // 多选框选中数据
  720. handleSelectionChange(selection) {
  721. this.selectedNum = selection.length;
  722. this.ids = selection.map(item => item.id);
  723. this.single = selection.length != 1;
  724. this.multiple = !selection.length;
  725. },
  726. /*===记录勾选数据===
  727. 需要再el-table 添加 :row-key="getRowKeys"
  728. 需要在selection 添加 :reserve-selection="true"
  729. */
  730. getRowKeys(row) {
  731. return row.id
  732. },
  733. },
  734. }
  735. </script>
  736. <style scoped lang="scss">
  737. .smartAlarm{
  738. flex:1;
  739. display: flex;
  740. flex-direction: column;
  741. overflow: hidden!important;
  742. .smartAlarm-min-page{
  743. flex: 1;
  744. display: flex;
  745. flex-direction: column;
  746. overflow: hidden;
  747. padding:20px !important;
  748. }
  749. p{
  750. margin:0;
  751. padding:0;
  752. }
  753. .form-box{
  754. .form-dropdown-box{
  755. display: flex;
  756. margin:0;
  757. padding:0 10px;
  758. cursor: pointer;
  759. height:40px;
  760. img:nth-child(1){
  761. width:16px;
  762. height:16px;
  763. margin-top:12px;
  764. }
  765. p{
  766. width:47px;
  767. text-align: center;
  768. font-size:14px;
  769. margin:0;
  770. line-height:40px;
  771. }
  772. img:nth-child(3){
  773. width:10px;
  774. height:6px;
  775. margin-top:17px;
  776. }
  777. }
  778. }
  779. .button-box{
  780. display: flex;
  781. }
  782. }
  783. </style>
  784. <style lang="scss">
  785. .import-dialog-box{
  786. .import-dialog-upLoad-box{
  787. .el-upload{
  788. width:450px;
  789. margin:0 55px;
  790. .el-upload-dragger{
  791. width:450px;
  792. .el-icon-upload{
  793. font-size:100px;
  794. color:#CBE6FE;
  795. }
  796. .el-upload__text{
  797. margin-top:20px;
  798. }
  799. }
  800. }
  801. .el-upload__tip{
  802. margin-left:60px;
  803. font-size:14px;
  804. margin-top:10px;
  805. }
  806. .el-upload-text-box{
  807. background: #F5F5F5;
  808. border-radius: 10px;
  809. margin:15px 30px 0;
  810. padding:0 20px 15px;
  811. overflow: hidden;
  812. *{
  813. margin:0;
  814. }
  815. .img-text-box{
  816. display: flex;
  817. margin-top:15px;
  818. img{
  819. width:16px;
  820. height:16px;
  821. margin-right:13px;
  822. }
  823. p{
  824. height:16px;
  825. line-height:16px;
  826. font-size:12px;
  827. }
  828. }
  829. .text-p{
  830. margin-top:15px;
  831. margin-left:29px;
  832. height:16px;
  833. line-height:16px;
  834. font-size:12px;
  835. }
  836. }
  837. }
  838. .teacher-import-dialog-button-box{
  839. display: flex;
  840. width:190px;
  841. margin:0 auto;
  842. p{
  843. width:70px;
  844. height:30px;
  845. line-height:30px;
  846. font-size:14px;
  847. margin:0 auto;
  848. }
  849. }
  850. .teacher-import-dialog-position-box{
  851. width:100%;
  852. height:100%;
  853. position: absolute;
  854. top:0;
  855. left:0;
  856. z-index: 999;
  857. background: rgba(255,255,255,0.4);
  858. border-radius:20px;
  859. }
  860. }
  861. </style>