addsystem.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  1. <template>
  2. <div id="deviceList">
  3. <el-row class="right">
  4. <span style="float:left;">当前选择的系统类型:{{ category.categoryName }}</span>
  5. <el-select v-model="showType" @change="initTable" style="width:125px;margin-right:10px;vertical-align:bottom;">
  6. <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
  7. </el-select>
  8. <span>增加</span>
  9. <el-input-number v-model="addNum" :controls="false" style="width:50px;" :min="1" :max="50"></el-input-number>
  10. <span>个{{ category.categoryName }}</span>
  11. <el-button @click="handleAddTableRow">增加</el-button>
  12. </el-row>
  13. <div class="tableBox">
  14. <div class="center middle_sty" style="flex:2;" v-show="tableData && !tableData.length">
  15. <p>
  16. <i class="icon-wushuju iconfont"></i>
  17. 暂无数据
  18. </p>
  19. </div>
  20. <div class="tableLeft" v-show="tableData && tableData.length">
  21. <handson-table ref="table"></handson-table>
  22. </div>
  23. </div>
  24. <el-row class="center">
  25. <el-button type="primary" size="medium" @click="handleCreateTableData" class="create_button" :disabled="createDisable">创建系统</el-button>
  26. </el-row>
  27. <!-- 关联楼层 -->
  28. <editSysfloor ref="editFloor" @relateSuccess="relateSuccess" :isCreate="true"></editSysfloor>
  29. </div>
  30. </template>
  31. <script>
  32. import tools from "@/utils/scan/tools";
  33. import handsonUtils from "@/utils/hasontableUtils";
  34. import showTools from "@/utils/handsontable/notShow";
  35. import text from "@/utils/handsontable/mainText";
  36. import session from "@/framework/utils/storage";
  37. import editSysfloor from "@/components/ledger/lib/editSysFloor";
  38. import handsonTable from "@/components/common/handsontable";
  39. import { getDataDictionary } from "@/api/dict";
  40. import {
  41. // getDataDictionary,
  42. createSystemBuildFloor,
  43. // buildingQuery
  44. } from "@/api/scan/request";
  45. import { mapGetters, mapActions } from "vuex";
  46. import { buildingQuery } from '@/api/object/build';
  47. import qrcode from "@/components/ledger/lib/qrcode";
  48. export default {
  49. components: {
  50. handsonTable,
  51. editSysfloor
  52. },
  53. data() {
  54. return {
  55. addNum: 1,
  56. onlyRead: false,
  57. showTypes: [
  58. { value: "Visible", label: '只看采集信息' },
  59. { value: "all", label: '全部' }
  60. ],
  61. tableHeader: [],
  62. tableData: session.get("systemAddData")
  63. ? session.get("systemAddData").length
  64. ? session.get("systemAddData")
  65. : [{}]
  66. : [{}],
  67. copyTableData: [],
  68. category: "", //当前设备类
  69. myDialog: {
  70. qrcode: false, //二维码弹窗
  71. uploadFiles: false, //上传文件
  72. uploadImgs: false, //上传单个图片
  73. pic: false, //多个图片
  74. addDevice: false,
  75. systemType: false,
  76. details: false, //详情页
  77. changeRea: false,
  78. lookPic: false //图片查看
  79. },
  80. inputMap: {
  81. flowBuild: {
  82. editable: true,
  83. code: "flowBuild",
  84. name: "建筑楼层",
  85. path: "flowBuild",
  86. category: 'STATIC',
  87. dataType: "ENUM"
  88. }
  89. }, //信息点和输入方式映射表
  90. qrcodeUrl: "", //二维码图片地址
  91. filesArr: [], //保存临时的文件key
  92. imgsArr: [], //临时保存的图片key数组
  93. picsArr: [], //临时设备图片keys数组
  94. systemId: null,
  95. graphyId: null,
  96. id: 0,
  97. showType: this.$route.query.showType,
  98. EquipmentList: [],
  99. createDisable: false
  100. };
  101. },
  102. computed: {
  103. ...mapGetters("layout", ["projectId", "secret", "userId"])
  104. },
  105. created() {
  106. this.category = this.$route.query;
  107. this.getBuildData();
  108. this.getTableHeader();
  109. },
  110. methods: {
  111. //获取建筑数据
  112. getBuildData() {
  113. let param = {
  114. pageNumber: 1,
  115. pageSize: 1000,
  116. projection: [
  117. "id",
  118. "localName"
  119. ]
  120. }
  121. buildingQuery(param, res => {
  122. let data = res.content.map(t => {
  123. return {
  124. Code: t.id,
  125. Name: t.localName,
  126. }
  127. })
  128. data.unshift({ Code: '', Name: '未明确建筑' })
  129. this.buildingData = data;
  130. })
  131. },
  132. // 获取表头数据(初始化表格)
  133. async getTableHeader() {
  134. let params = {
  135. orders: "sort asc, name desc",
  136. pageNumber: 1,
  137. pageSize: 1000,
  138. type: this.category.category
  139. };
  140. await getDataDictionary(params, res => {
  141. this.tableHeader = res.content;
  142. this.tableHeader.forEach(item => {
  143. if (item.path) {
  144. this.inputMap[item.path] = item;
  145. }
  146. })
  147. this.initTable();
  148. });
  149. },
  150. // 创建设备数据
  151. async handleCreateTableData() {
  152. let params = {}
  153. let newData = this.tableData.filter(item => {
  154. let keys = Object.keys(item);
  155. keys.map(key => {
  156. //将值为空字符串的属性删除
  157. if (item[key] == "") {
  158. delete item[key];
  159. }
  160. });
  161. let newK = Object.keys(item)
  162. if (newK.length) {
  163. return item;
  164. }
  165. });
  166. if (!newData.length) {
  167. this.$message("创建信息为空,请录入信息后再创建!");
  168. return;
  169. }
  170. let flag = false;
  171. newData.map(item => {
  172. if (!item.localName) {
  173. flag = true;
  174. }
  175. item.classCode = this.category.category
  176. })
  177. if (flag) {
  178. this.$message.info("存在系统的本地名称为空,请检查")
  179. return;
  180. }
  181. params.content = newData
  182. this.createDisable = true;
  183. createSystemBuildFloor(params, res => {
  184. this.createDisable = false;
  185. this.$message.success('创建成功')
  186. session.remove("systemAddData")
  187. this.$router.push({
  188. name: "systemlist",
  189. params: { SysType: this.category.category }
  190. });
  191. })
  192. },
  193. // 删除表格行
  194. handleDeleteTableRow(a,b,c,d) {
  195. if (d && d === 'ContextMenu.removeRow') {
  196. this.$message.success("删除成功");
  197. this.formaTableData();
  198. }
  199. },
  200. // 添加行
  201. handleAddTableRow() {
  202. let addRowLength = this.addNum;
  203. for (let i = 0; i < addRowLength; i++) {
  204. this.tableData.push({});
  205. }
  206. this.initTable();
  207. this.formaTableData();
  208. },
  209. //修改
  210. handleUpdataTable(changeData, source) {
  211. this.formaTableData();
  212. },
  213. //保存去掉空字段的新增数据
  214. formaTableData() {
  215. let newData = this.tableData.filter(item => {
  216. let keys = Object.keys(item);
  217. keys.map(key => {
  218. //将值为空字符串的属性删除
  219. if (item[key] == "") {
  220. delete item[key];
  221. }
  222. });
  223. if (keys.length && Object.keys(item).length) {
  224. return item;
  225. }
  226. });
  227. session.set("systemAddData", newData);
  228. },
  229. //格式化表头显示的数据
  230. formatHeaderData(list) {
  231. let arr = tools.copyArr(list);
  232. let data = showTools.headerTextFilter(arr, 'system', this.onlyRead, this.showType);
  233. data.unshift("所属建筑楼层");
  234. return data;
  235. },
  236. formatHeaderType(list) {
  237. //格式化表头头映射的数据
  238. let arr = tools.copyArr(list);
  239. let data = showTools.headerTypeFilter(arr, 'system', this.onlyRead, this.showType);
  240. data.unshift({
  241. data: "buildingFloorInfoList",
  242. renderer: text.sysInBuildFloor
  243. });
  244. return data;
  245. },
  246. initTable() {
  247. //实例化表格
  248. let settings = {
  249. data: this.tableData,
  250. colHeaders: this.formatHeaderData(this.tableHeader),
  251. columns: this.formatHeaderType(this.tableHeader),
  252. rowHeights: 30,
  253. fillHandle: 'vertical', //允许纵向填充
  254. maxRows: this.tableData.length,
  255. contextMenu: this.onlyRead ? false : {
  256. items: {
  257. remove_row: {
  258. name: "删除该系统"
  259. }
  260. }
  261. },
  262. autoColumnSize: true,
  263. language: "zh-CN",
  264. manualColumnResize: true,
  265. manualColumnMove: true,
  266. // 事件
  267. afterChange: this.handleUpdataTable, //修改后
  268. afterFilter: this.trimmedRows, //排序前
  269. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  270. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  271. };
  272. this.$nextTick(() => {
  273. this.tableExample = this.$refs.table.init(settings);
  274. });
  275. },
  276. //去除数组中相同的元素
  277. array_diff(a, b) {
  278. for (var i = 0; i < b.length; i++) {
  279. for (var j = 0; j < a.length; j++) {
  280. if (a[j] == b[i]) {
  281. a.splice(j, 1);
  282. j = j - 1;
  283. }
  284. }
  285. }
  286. return a;
  287. },
  288. //表格点击事件
  289. handleTdClick(el, rowArr) {
  290. //点击的是表头
  291. if (rowArr.row < 0) {
  292. return;
  293. }
  294. //被筛选过后的数组
  295. let trimmedArr = this.trimmedRows();
  296. //是否启用了排序
  297. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  298. if (trimmedArr.length && isSort) {
  299. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  300. .__arrayMap;
  301. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  302. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  303. } else if (isSort) {
  304. //排序后的数组
  305. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
  306. .__arrayMap;
  307. let infos = this.tableData[sortArr[rowArr.row]];
  308. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  309. } else if (trimmedArr.length) {
  310. let infos = this.tableData[trimmedArr[rowArr.row]];
  311. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  312. } else {
  313. let infos = this.tableData[rowArr.row];
  314. this.getInfors(infos, rowArr);
  315. }
  316. },
  317. //获取被筛选掉的行号
  318. trimmedRows() {
  319. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  320. let dataLength = this.tableData.length;
  321. let dataArr = new Array();
  322. for (let i = 0; i < dataLength; i++) {
  323. dataArr.push(i);
  324. }
  325. if (plugin.length <= 0) {
  326. dataArr = undefined;
  327. } else {
  328. dataArr = this.array_diff(dataArr, plugin);
  329. }
  330. return dataArr || [];
  331. },
  332. getInfors(infos, row) {
  333. let val = this.tableExample.colToProp(row.col);
  334. let inputData = this.inputMap[val];
  335. this.row = row.row;
  336. this.messKey = val;
  337. switch (val) {
  338. //操作
  339. case 'caozuo':
  340. // window.open(`http://adm.sagacloud.cn:8058/spread?id=${infos.EquipID}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
  341. this.$message("开发中...")
  342. break;
  343. //设备二维码图片
  344. // case 'EquipQRCode':
  345. // case "defaultQRCode":
  346. // this.qrcodeUrl = this.tableData[row.row].EquipQRCode;
  347. // if (!!this.qrcodeUrl) {
  348. // this.myDialog.qrcode = true;
  349. // } else {
  350. // this.$message("此设备没有设备二维码");
  351. // }
  352. // break;
  353. //关联设备数量
  354. case 'count':
  355. if (!this.onlyRead) {
  356. this.myDialog.relevance = true
  357. }
  358. break;
  359. //所属建筑楼层
  360. case 'buildingFloorInfoList':
  361. if (!this.onlyRead) {
  362. this.$refs.editFloor.showDialog(this.tableData[row.row]);
  363. }
  364. break;
  365. default:
  366. break;
  367. }
  368. if (!this.onlyRead && !inputData.editable) {
  369. this.$confirm('该信息点的值为自动生成,不可人工维护!', '提示', {
  370. confirmButtonText: '我知道了',
  371. showCancelButton: false,
  372. type: 'warning',
  373. center: true
  374. }).then(() => {
  375. return false;
  376. });
  377. }
  378. },
  379. //建筑楼层
  380. relateSuccess(data) {
  381. this.tableData[this.row].buildingFloorInfoList = data
  382. this.tableExample.render()
  383. }
  384. }
  385. };
  386. </script>
  387. <style lang="less" scoped>
  388. #deviceList {
  389. overflow: hidden;
  390. height: 100%;
  391. background-color: #fff;
  392. padding: 10px;
  393. position: relative;
  394. .right {
  395. background: #fff;
  396. }
  397. .search-header {
  398. overflow: hidden;
  399. padding: 0 10px 10px 10px;
  400. border-bottom: 1px solid #bcbcbc;
  401. }
  402. .tableBox {
  403. display: flex;
  404. height: calc(100% - 100px);
  405. margin-top: 10px;
  406. .tableLeft {
  407. flex: 1;
  408. }
  409. }
  410. .create_button {
  411. margin-top: 10px;
  412. }
  413. }
  414. </style>