index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. <!--应急管理-疏散硬件-->
  2. <template>
  3. <div class="app-container sparseHardware">
  4. <div class="sparseHardware-page" v-if="pageType == 1">
  5. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
  6. <el-form-item label="设备类型" prop="type">
  7. <el-select v-model="queryParams.type" placeholder="请选择设备类型" clearable>
  8. <el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.value" />
  9. </el-select>
  10. </el-form-item>
  11. <el-form-item label="楼栋" prop="buildId">
  12. <el-select v-model="queryParams.buildId" placeholder="请选择楼栋" clearable @change="deptChange">
  13. <el-option v-for="(item,index) in buildsDataList" :key="index" :label="item.deptName" :value="item.deptId" />
  14. </el-select>
  15. </el-form-item>
  16. <!--<el-form-item label="实验室" prop="type">-->
  17. <!--<el-select v-model="queryParams.type" placeholder="请选择实验室" clearable>-->
  18. <!--<el-option label="请选择字典生成" value="" />-->
  19. <!--</el-select>-->
  20. <!--</el-form-item>-->
  21. <el-form-item label="设备状态" prop="operate">
  22. <el-select v-model="queryParams.operate" placeholder="请选择设备状态" clearable>
  23. <el-option v-for="(item,index) in operate" :key="index" :label="item.name" :value="item.value" />
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item style="float: right;">
  27. <el-col :span="1.5" style="margin-right:20px;">
  28. <!--@click="handleAdd"-->
  29. <p class="add-button-one-120"
  30. @click="pageTypeClick(2)"
  31. v-hasPermi="['laboratory:sparseHardware:add']"
  32. ><i class="el-icon-plus"></i>新增疏散设备</p>
  33. </el-col>
  34. </el-form-item>
  35. <el-form-item>
  36. <p class="inquire-button-one" @click="handleQuery">查询</p>
  37. <p class="reset-button-one" @click="resetQuery">重置</p>
  38. </el-form-item>
  39. </el-form>
  40. <el-table v-loading="loading" border :data="sparseHardwareList" >
  41. <el-table-column label="设备名称" align="center" prop="name" />
  42. <el-table-column label="设备类型" align="center" prop="type">
  43. <template slot-scope="scope">
  44. {{scope.row.type == 1 ? '摄像头' : (scope.row.type == 2 ? '喇叭' : '')}}
  45. </template>
  46. </el-table-column>
  47. <el-table-column label="设备编号" align="center" prop="hardwareNum" />
  48. <el-table-column label="楼栋" align="center" prop="floorName" >
  49. <template slot-scope="scope">{{scope.row.floorName?scope.row.floorName:'--'}}</template>
  50. </el-table-column>
  51. <el-table-column label="楼层" align="center" prop="buildName" >
  52. <template slot-scope="scope">{{scope.row.buildName?scope.row.buildName:'--'}}</template>
  53. </el-table-column>
  54. <el-table-column label="实验室" align="center" prop="subjectName">
  55. <template slot-scope="scope">{{scope.row.subjectName?scope.row.subjectName:'--'}}</template>
  56. </el-table-column>
  57. <el-table-column label="状态" align="center" prop="operate">
  58. <template slot-scope="scope">
  59. {{scope.row.operate == 0 ? '离线' : (scope.row.operate == 1 ? '异常' : (scope.row.operate == 2 ? '在线' : (scope.row.operate == 3 ? '开启' : (scope.row.operate == 4 ? '关闭' : ''))))}}
  60. </template>
  61. </el-table-column>
  62. <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160" v-if="tableButtonType">
  63. <template slot-scope="scope">
  64. <div class="table-button-box">
  65. <p class="table-button-null"></p>
  66. <p class="table-button-p"
  67. @click="pageTypeClick(3,scope.row)"
  68. v-hasPermi="['laboratory:sparseHardware:edit']">编辑</p>
  69. <p class="table-button-p"
  70. @click="handleDelete(scope.row)"
  71. v-hasPermi="['laboratory:sparseHardware:remove']">删除</p>
  72. <p class="table-button-null"></p>
  73. </div>
  74. </template>
  75. </el-table-column>
  76. </el-table>
  77. <pagination :page-sizes="[20, 30, 40, 50]"
  78. v-show="total>0"
  79. :total="total"
  80. :page.sync="queryParams.pageNum"
  81. :limit.sync="queryParams.pageSize"
  82. @pagination="getList"
  83. />
  84. </div>
  85. <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
  86. <!-- 添加或修改疏散硬件对话框 -->
  87. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  88. <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  89. <el-form-item label="设备编码" prop="hardwareNum">
  90. <el-input v-model="form.hardwareNum" placeholder="请输入设备编码" />
  91. </el-form-item>
  92. <el-form-item label="设备名称" prop="name">
  93. <el-input v-model="form.name" placeholder="请输入设备名称" />
  94. </el-form-item>
  95. <el-form-item label="设备类型(1 摄像头,2 喇叭)" prop="type">
  96. <el-select v-model="form.type" placeholder="请选择设备类型(1 摄像头,2 喇叭)">
  97. <el-option label="请选择字典生成" value="" />
  98. </el-select>
  99. </el-form-item>
  100. <el-form-item label="楼栋表楼层id" prop="floorId">
  101. <el-input v-model="form.floorId" placeholder="请输入楼栋表楼层id" />
  102. </el-form-item>
  103. <el-form-item label="楼栋ID" prop="buildId">
  104. <el-input v-model="form.buildId" placeholder="请输入楼栋ID" />
  105. </el-form-item>
  106. <el-form-item label="设备状态" prop="operate">
  107. <el-input v-model="form.operate" placeholder="请输入设备状态" />
  108. </el-form-item>
  109. <el-form-item label="功能状态">
  110. <el-radio-group v-model="form.functionStatus">
  111. <el-radio label="1">请选择字典生成</el-radio>
  112. </el-radio-group>
  113. </el-form-item>
  114. <el-form-item label="备注" prop="remark">
  115. <el-input v-model="form.remark" placeholder="请输入备注" />
  116. </el-form-item>
  117. </el-form>
  118. <div slot="footer" class="dialog-footer">
  119. <el-button type="primary" @click="submitForm">确 定</el-button>
  120. <el-button @click="cancel">取 消</el-button>
  121. </div>
  122. </el-dialog>
  123. </div>
  124. </template>
  125. <script>
  126. import { listSparseHardware, getSparseHardware, delSparseHardware, addSparseHardware, updateSparseHardware,buildsList,getNoAdminSubjectListNopage } from "@/api/laboratory/sparseHardware";
  127. import addPage from "./addPage.vue"
  128. export default {
  129. name: "SparseHardware",
  130. components: {
  131. addPage,
  132. },
  133. data() {
  134. return {
  135. tableButtonType:this.hasPermiDom(['laboratory:sparseHardware:edit','laboratory:sparseHardware:remove']),
  136. //页面状态
  137. pageType:1,
  138. //传参数据
  139. propsData:{},
  140. // 遮罩层
  141. loading: true,
  142. // 选中数组
  143. ids: [],
  144. // 非单个禁用
  145. single: true,
  146. // 非多个禁用
  147. multiple: true,
  148. // 显示搜索条件
  149. showSearch: true,
  150. // 总条数
  151. total: 0,
  152. // 疏散硬件表格数据
  153. sparseHardwareList: [],
  154. // 弹出层标题
  155. title: "",
  156. // 是否显示弹出层
  157. open: false,
  158. // 查询参数
  159. queryParams: {
  160. pageNum: 1,
  161. pageSize:20,
  162. type: '',
  163. buildId: '',
  164. operate: '',
  165. },
  166. // 表单参数
  167. form: {},
  168. // 表单校验
  169. rules: {
  170. type: [
  171. { required: true, message: "设备类型(1 摄像头,2 喇叭)不能为空", trigger: "change" }
  172. ],
  173. },
  174. // 设备类型
  175. typeList:[
  176. { name:"摄像头",value:"1", },
  177. { name:"喇叭",value:"2", },
  178. ],
  179. //楼栋数据
  180. buildsDataList:[],
  181. //设备状态
  182. operate:[
  183. { name:"离线",value:"0"},{ name:"异常",value:"1"},{ name:"在线",value:"2"},{ name:"开启",value:"3"},{ name:"关闭",value:"4"},
  184. ]
  185. };
  186. },
  187. created() {
  188. this.getList();
  189. this.buildsList();
  190. },
  191. methods: {
  192. //页面状态切换
  193. pageTypeClick(type,item){
  194. if(this.pageType != type){
  195. if(type == 1){
  196. this.getList();
  197. this.pageType = type;
  198. }else if(type == 2){
  199. this.$set(this,'propsData',null)
  200. this.pageType = type;
  201. }else if(type == 3){
  202. console.log('item',item);
  203. this.$set(this,'propsData',item)
  204. this.pageType = 2;
  205. }
  206. }
  207. },
  208. deptChange(e){
  209. console.log("e",e)
  210. this.getSubjectDict(e);
  211. },
  212. //查询楼栋
  213. buildsList(){
  214. buildsList().then( response => {
  215. this.buildsDataList = response.data;
  216. });
  217. },
  218. //选择学院获取实验室
  219. getSubjectDict(id){
  220. console.log(id)
  221. let obj = {
  222. deptId:id,
  223. }
  224. getNoAdminSubjectListNopage(obj).then(response => {
  225. console.log("response",response);
  226. });
  227. },
  228. /** 查询疏散硬件列表 */
  229. getList() {
  230. this.loading = true;
  231. listSparseHardware(this.queryParams).then( response => {
  232. this.sparseHardwareList = response.rows;
  233. this.total = response.total;
  234. this.loading = false;
  235. });
  236. },
  237. // 取消按钮
  238. cancel() {
  239. this.open = false;
  240. this.reset();
  241. },
  242. // 表单重置
  243. reset() {
  244. this.form = {
  245. id: null,
  246. hardwareNum: null,
  247. name: null,
  248. type: null,
  249. floorId: null,
  250. buildId: null,
  251. operate: null,
  252. functionStatus: "0",
  253. deptId: null,
  254. deptName: null,
  255. createTime: null,
  256. userId: null,
  257. createBy: null,
  258. updateTime: null,
  259. updateBy: null,
  260. remark: null
  261. };
  262. this.resetForm("form");
  263. },
  264. /** 搜索按钮操作 */
  265. handleQuery() {
  266. this.queryParams.pageNum = 1;
  267. this.getList();
  268. },
  269. /** 重置按钮操作 */
  270. resetQuery() {
  271. // this.resetForm("queryForm");
  272. this.$set(this,'queryParams',{
  273. pageNum: 1,
  274. pageSize:20,
  275. type:"",
  276. floorId: '',
  277. operate: '',
  278. });
  279. this.handleQuery();
  280. },
  281. // 多选框选中数据
  282. handleSelectionChange(selection) {
  283. this.ids = selection.map(item => item.id)
  284. this.single = selection.length!==1
  285. this.multiple = !selection.length
  286. },
  287. /** 新增按钮操作 */
  288. handleAdd() {
  289. this.reset();
  290. this.open = true;
  291. this.title = "添加疏散硬件";
  292. },
  293. /** 修改按钮操作 */
  294. handleUpdate(row) {
  295. this.reset();
  296. const id = row.id || this.ids
  297. getSparseHardware(id).then( response => {
  298. this.form = response.data;
  299. this.open = true;
  300. this.title = "修改疏散硬件";
  301. });
  302. },
  303. /** 提交按钮 */
  304. submitForm() {
  305. this.$refs["form"].validate(valid => {
  306. if (valid) {
  307. if (this.form.id != null) {
  308. updateSparseHardware(this.form).then( response => {
  309. this.msgSuccess("修改成功");
  310. this.open = false;
  311. this.getList();
  312. });
  313. } else {
  314. addSparseHardware(this.form).then( response => {
  315. this.msgSuccess("新增成功");
  316. this.open = false;
  317. this.getList();
  318. });
  319. }
  320. }
  321. });
  322. },
  323. /** 删除按钮操作 */
  324. handleDelete(row) {
  325. const ids = row.id || this.ids;
  326. this.$confirm('是否确认删除?', "警告", {
  327. confirmButtonText: "确定",
  328. cancelButtonText: "取消",
  329. type: "warning"
  330. }).then(function() {
  331. return delSparseHardware(ids);
  332. }).then(() => {
  333. this.getList();
  334. this.msgSuccess("删除成功");
  335. }).catch(() => {});
  336. },
  337. /** 导出按钮操作 */
  338. handleExport() {
  339. this.download('laboratory/sparseHardware/export', {
  340. ...this.queryParams
  341. }, `laboratory_sparseHardware.xlsx`)
  342. }
  343. }
  344. };
  345. </script>
  346. <style scoped lang="scss">
  347. .sparseHardware{
  348. flex:1;
  349. display: flex;
  350. flex-direction: column;
  351. overflow: hidden !important;
  352. .sparseHardware-page {
  353. flex: 1;
  354. display: flex;
  355. flex-direction: column;
  356. overflow: hidden !important;
  357. padding:20px;
  358. box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  359. border-radius: 10px;
  360. .button-box{
  361. display: flex;
  362. height:30px;
  363. width:190px;
  364. margin:0 auto;
  365. }
  366. }
  367. }
  368. </style>