outfireDevice.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. <!--智能灭火设备-->
  2. <template>
  3. <div class="app-container approval_handle">
  4. <div class="approval_handle-page" v-if="pageType == 1">
  5. <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true">
  6. <el-form-item label="关键字" prop="name">
  7. <el-input
  8. v-model="queryParams.searchValue"
  9. placeholder="设备名称\关联实验室"
  10. clearable
  11. maxLength="30"
  12. size="small"
  13. />
  14. </el-form-item>
  15. <el-form-item>
  16. <p class="inquire-button-one" @click="handleQuery">查询</p>
  17. <p class="reset-button-one" @click="resetQuery">重置</p>
  18. </el-form-item>
  19. <el-form-item style="float: right;">
  20. <el-col :span="1.5">
  21. <el-button
  22. type="primary"
  23. plain
  24. icon="el-icon-plus"
  25. size="mini"
  26. @click="handleClick('','','add')"
  27. v-hasPermi="['algorithm:firedevice:add']"
  28. >新增</el-button>
  29. </el-col>
  30. </el-form-item>
  31. </el-form>
  32. <el-table border v-loading="loading" :data="tableData">
  33. <el-table-column label="设备名称" align="left" prop="deviceName"/>
  34. <el-table-column label="继电器编号" align="left" prop="deviceCode"/>
  35. <el-table-column label="设备地址" align="left" prop="deviceUrl"></el-table-column>
  36. <el-table-column label="关联实验室" align="left" prop="subjectName"></el-table-column>
  37. <el-table-column label="状态" align="left" prop="deviceStatus">
  38. <template slot-scope="scope">
  39. <span v-if="scope.row.deviceStatus==1">离线</span>
  40. <span v-if="scope.row.deviceStatus==2">在线</span>
  41. <span v-if="scope.row.deviceStatus==3">异常</span>
  42. <span v-if="scope.row.deviceStatus==3" style="color: #E6A23C"> {{'('+scope.row.describe+')'}}</span>
  43. </template>
  44. </el-table-column>
  45. <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="180">
  46. <template slot-scope="scope">
  47. <div class="button-box">
  48. <p class="table-min-button" v-hasPermi="['algorithm:firedevice:edit']" @click="handleClick('',scope.row,'edit')">编辑</p>
  49. <p class="table-min-button" v-hasPermi="['algorithm:firedevice:remove']" @click="handleClick('',scope.row,'delete')">删除</p>
  50. </div>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54. <pagination
  55. :total="total"
  56. layout="total, prev, pager, next, sizes, jumper"
  57. :page.sync="queryParams.pageNum"
  58. :limit.sync="queryParams.pageSize"
  59. @pagination="getList"
  60. />
  61. </div>
  62. <!--弹框-->
  63. <el-dialog :title='dialogTitle' @close="handleClose" :visible.sync="dialogVisible" width="600px" append-to-body>
  64. <el-form :model="dialogForm" ref="dialogForm" :rules="rules" :inline="true" label-width="140px">
  65. <el-form-item label="设备名称:" prop="deviceName" >
  66. <el-input
  67. style="width: 400px"
  68. v-model="dialogForm.deviceName"
  69. placeholder="请输入设备名称"
  70. maxLength="20"
  71. clearable
  72. size="small"
  73. />
  74. </el-form-item>
  75. <el-form-item label="继电器编号:" prop="relayCode" >
  76. <el-input
  77. style="width: 400px"
  78. v-model="dialogForm.relayCode"
  79. placeholder="请输入继电器编号"
  80. maxLength="20"
  81. clearable
  82. size="small"
  83. />
  84. </el-form-item>
  85. <el-form-item label="采集器编号:" prop="deviceCode" >
  86. <el-input
  87. style="width: 400px"
  88. v-model="dialogForm.deviceCode"
  89. placeholder="请输入采集器编号"
  90. maxLength="20"
  91. clearable
  92. size="small"
  93. />
  94. </el-form-item>
  95. <el-form-item label="设备地址:" prop="deviceUrl" >
  96. <el-input
  97. style="width: 400px"
  98. v-model="dialogForm.deviceUrl"
  99. placeholder="请输入设备地址"
  100. maxLength="30"
  101. clearable
  102. size="small"
  103. />
  104. </el-form-item>
  105. <el-form-item label="实验地点" prop="subjectId">
  106. <el-select
  107. style="width:400px;"
  108. v-model="dialogForm.location"
  109. filterable
  110. remote
  111. clearable
  112. reserve-keyword
  113. @focus="selectFocus"
  114. @change="selectChange"
  115. placeholder="请选择实验地点"
  116. :remote-method="userSelectList"
  117. :loading="loading">
  118. <el-option
  119. v-for="item in laboratoryOptions"
  120. :key="item.id"
  121. :label="item.name"
  122. :value="item.id">
  123. </el-option>
  124. </el-select>
  125. </el-form-item>
  126. <el-form-item label="灭火倒计时:" prop="deviceCountDown" >
  127. <el-input
  128. :min="0"
  129. oninput="if(value<0 || value>30)value=0"
  130. style="width: 400px"
  131. v-model="dialogForm.deviceCountDown"
  132. placeholder="请输入倒计时秒数,仅能输入0-30之间的数字"
  133. clearable
  134. size="small"
  135. >
  136. <template slot="append">秒</template>
  137. </el-input>
  138. </el-form-item>
  139. </el-form>
  140. <div slot="footer" class="dialog-footer">
  141. <el-button @click="cancel">取 消</el-button>
  142. <el-button type="primary" @click="submitForm">确 定</el-button>
  143. </div>
  144. </el-dialog>
  145. </div>
  146. </template>
  147. <script>
  148. import { subjectList, } from '@/api/gasManage3_0/gasManage'
  149. import { firedeviceAdd, firedeviceDle, firedeviceEdit, firedeviceList } from '@/api/laboratory/subject'
  150. export default {
  151. name: "Approval",
  152. components: {
  153. },
  154. data() {
  155. return {
  156. dialogVisible :false,
  157. //页面状态
  158. pageType:1,
  159. dialogTitle:'新增智能灭火设备',
  160. loading:false,
  161. // 查询参数
  162. queryParams: {
  163. pageNum: 1,
  164. pageSize:20,
  165. searchValue:'',
  166. },
  167. total:0,
  168. tableData:[],
  169. dialogForm:{
  170. id:'',
  171. deviceName:'',
  172. deviceCode:'',
  173. relayCode:'',
  174. deviceUrl:'',
  175. deviceCountDown:'',
  176. subjectId:'',
  177. location:'',
  178. },
  179. laboratoryOptions:[],
  180. // 表单校验
  181. rules: {
  182. deviceName: [
  183. { required: true, message: "请输入设备名称", trigger: "blur" }
  184. ],
  185. relayCode: [
  186. { required: true, message: "请输入继电器编号", trigger: "blur" }
  187. ],
  188. deviceCode: [
  189. { required: true, message: "请输入采集器编号", trigger: "blur" }
  190. ],
  191. deviceUrl: [
  192. { required: true, message: "请输入设备地址", trigger: "blur" }
  193. ],
  194. deviceCountDown: [
  195. { required: true, message: "请输入倒计时秒数", trigger: "blur" }
  196. ],
  197. subjectId: [
  198. { required: true, message: "请选择实验地点", trigger: "blur" }
  199. ],
  200. },
  201. };
  202. },
  203. methods: {
  204. //监听关联记录弹窗关闭
  205. handleClose(){
  206. },
  207. selectFocus(){
  208. if(!this.laboratoryOptions[0]){
  209. this.userSelectList("");
  210. }
  211. },
  212. //实验室选择
  213. selectChange(e){
  214. let self = this;
  215. for(let i=0;i<self.laboratoryOptions.length;i++){
  216. if(self.laboratoryOptions[i].id == e){
  217. //this.$set(this.dialogForm,"subject",self.laboratoryOptions[i]);
  218. this.$set(this.dialogForm,"location",self.laboratoryOptions[i].name);
  219. }
  220. }
  221. this.$set(this.dialogForm,"subjectId",e);
  222. },
  223. //懒加载实验室
  224. userSelectList(e){
  225. subjectList({name:e,deptId:this.dialogForm.deptId}).then(response => {
  226. this.laboratoryOptions = response.data;
  227. });
  228. },
  229. // 取消按钮
  230. cancel() {
  231. this.dialogVisible = false;
  232. },
  233. handleClick(index,row,doType){
  234. let _this=this;
  235. if(doType=='add'){//添加
  236. _this.dialogTitle='新增智能灭火设备';
  237. _this.dialogVisible=true;
  238. _this.dialogForm.deviceCountDown=30
  239. _this.dialogForm.id='';
  240. _this.dialogForm.deviceName='';
  241. _this.dialogForm.deviceCode='';
  242. _this.dialogForm.relayCode='';
  243. _this.dialogForm.deviceUrl='';
  244. _this.dialogForm.subjectId='';
  245. _this.dialogForm.location='';
  246. }else if(doType=='edit'){//编辑
  247. _this.dialogTitle='编辑智能灭火设备';
  248. _this.dialogVisible=true;
  249. _this.dialogForm.id=row.id;
  250. _this.dialogForm.deviceName=row.deviceName;
  251. _this.dialogForm.deviceCode=row.deviceCode;
  252. _this.dialogForm.relayCode=row.relayCode;
  253. _this.dialogForm.deviceUrl=row.deviceUrl
  254. _this.dialogForm.deviceCountDown=row.deviceCountDown;
  255. _this.dialogForm.subjectId=row.subjectId;
  256. _this.dialogForm.location=row.subjectName;
  257. }else if(doType=='delete'){//删除
  258. this.$confirm('是否确认删除当前数据项?', "警告", {
  259. confirmButtonText: "确定",
  260. cancelButtonText: "取消",
  261. type: "warning"
  262. }).then(function() {
  263. firedeviceDle(row.id).then( response => {
  264. if(response.code==200){
  265. _this.getList();
  266. _this.msgSuccess("删除成功");
  267. }
  268. });
  269. }).then(() => {
  270. }).catch(() => {});
  271. }
  272. },
  273. /** 搜索按钮操作 */
  274. handleQuery() {
  275. this.queryParams.pageNum = 1;
  276. this.getList();
  277. },
  278. /** 重置按钮操作 */
  279. resetQuery() {
  280. this.queryParams.searchValue = "";
  281. this.handleQuery();
  282. },
  283. getList(){
  284. let _this=this;
  285. firedeviceList(_this.queryParams).then( response => {
  286. let res=response.rows;
  287. _this.tableData=res;
  288. _this.total=response.total;
  289. });
  290. },
  291. //提交
  292. submitForm(){
  293. let _this = this;
  294. this.$refs['dialogForm'].validate((valid) => {
  295. if (valid) {
  296. _this.dialogForm.deviceUrl=Number( _this.dialogForm.deviceUrl)
  297. _this.dialogForm.deviceCountDown=Number( _this.dialogForm.deviceCountDown)
  298. if(!this.dialogForm.id){//新增
  299. firedeviceAdd(_this.dialogForm).then(res => {
  300. this.$message({
  301. type: 'success',
  302. message: '操作成功!',
  303. duration:2000,
  304. onClose:function(){
  305. _this.getList();
  306. _this.loading = false;
  307. _this.dialogVisible = false;
  308. }
  309. });
  310. });
  311. }else{//编辑
  312. firedeviceEdit(_this.dialogForm).then(res => {
  313. this.$message({
  314. type: 'success',
  315. message: '操作成功!',
  316. duration:2000,
  317. onClose:function(){
  318. _this.getList();
  319. _this.loading = false;
  320. _this.dialogVisible = false;
  321. }
  322. });
  323. });
  324. }
  325. } else {
  326. return false;
  327. }
  328. });
  329. },
  330. },
  331. mounted() {
  332. this.getList();
  333. }
  334. };
  335. </script>
  336. <style scoped lang="scss">
  337. .approval_handle {
  338. display: flex!important;
  339. flex-direction: column;
  340. overflow: hidden;
  341. .approval_handle-page{
  342. flex:1;
  343. display: flex!important;
  344. flex-direction: column;
  345. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  346. padding:20px 20px 20px!important;
  347. border-radius:10px;
  348. overflow: hidden;
  349. .button-box{
  350. width:200px;
  351. display: flex;
  352. }
  353. }
  354. .entering_t{
  355. font-size: 16px;
  356. font-family: Microsoft YaHei;
  357. font-weight: 400;
  358. color: #333333;
  359. line-height: 16px;
  360. margin: 36px auto 25px;
  361. text-align: center;
  362. }
  363. .entering_img{
  364. width: 288px;
  365. height: 140px;
  366. }
  367. .entering_input{
  368. width: 288px;
  369. }
  370. }
  371. </style>