addsystem.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  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.prevent.once="handleCreateTableData" class="create_button">创建系统</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. };
  100. },
  101. computed: {
  102. ...mapGetters("layout", ["projectId", "secret", "userId"])
  103. },
  104. created() {
  105. this.category = this.$route.query;
  106. this.getBuildData();
  107. this.getTableHeader();
  108. },
  109. methods: {
  110. //获取建筑数据
  111. getBuildData() {
  112. let param = {
  113. pageNumber: 1,
  114. pageSize: 1000,
  115. projection: [
  116. "id",
  117. "localName"
  118. ]
  119. }
  120. buildingQuery(param, res => {
  121. let data = res.content.map(t => {
  122. return {
  123. Code: t.id,
  124. Name: t.localName,
  125. }
  126. })
  127. data.unshift({ Code: '', Name: '未明确建筑' })
  128. this.buildingData = data;
  129. })
  130. },
  131. // 获取表头数据(初始化表格)
  132. async getTableHeader() {
  133. let params = {
  134. orders: "sort asc, name desc",
  135. pageNumber: 1,
  136. pageSize: 1000,
  137. type: this.category.category
  138. };
  139. await getDataDictionary(params, res => {
  140. this.tableHeader = res.content;
  141. this.tableHeader.forEach(item => {
  142. if (item.path) {
  143. this.inputMap[item.path] = item;
  144. }
  145. })
  146. this.initTable();
  147. });
  148. },
  149. // 创建设备数据
  150. async handleCreateTableData() {
  151. let params = {}
  152. let newData = this.tableData.filter(item => {
  153. let keys = Object.keys(item);
  154. keys.map(key => {
  155. //将值为空字符串的属性删除
  156. if (item[key] == "") {
  157. delete item[key];
  158. }
  159. });
  160. let newK = Object.keys(item)
  161. if (newK.length) {
  162. return item;
  163. }
  164. });
  165. if (!newData.length) {
  166. this.$message("创建信息为空,请录入信息后再创建!");
  167. return;
  168. }
  169. let flag = false;
  170. newData.map(item => {
  171. if (!item.localName) {
  172. flag = true;
  173. }
  174. item.classCode = this.category.category
  175. })
  176. if (flag) {
  177. this.$message.info("存在系统的本地名称为空,请检查")
  178. return;
  179. }
  180. params.content = newData
  181. createSystemBuildFloor(params, res => {
  182. this.$message.success('创建成功')
  183. session.remove("systemAddData")
  184. this.$router.push({
  185. name: "systemlist",
  186. params: { SysType: this.category.category }
  187. });
  188. })
  189. },
  190. // 删除表格行
  191. handleDeleteTableRow(a,b,c,d) {
  192. if (d && d === 'ContextMenu.removeRow') {
  193. this.$message.success("删除成功");
  194. this.formaTableData();
  195. }
  196. },
  197. // 添加行
  198. handleAddTableRow() {
  199. let addRowLength = this.addNum;
  200. for (let i = 0; i < addRowLength; i++) {
  201. this.tableData.push({});
  202. }
  203. this.initTable();
  204. this.formaTableData();
  205. },
  206. //修改
  207. handleUpdataTable(changeData, source) {
  208. this.formaTableData();
  209. },
  210. //保存去掉空字段的新增数据
  211. formaTableData() {
  212. let newData = this.tableData.filter(item => {
  213. let keys = Object.keys(item);
  214. keys.map(key => {
  215. //将值为空字符串的属性删除
  216. if (item[key] == "") {
  217. delete item[key];
  218. }
  219. });
  220. if (keys.length && Object.keys(item).length) {
  221. return item;
  222. }
  223. });
  224. session.set("systemAddData", newData);
  225. },
  226. //格式化表头显示的数据
  227. formatHeaderData(list) {
  228. let arr = tools.copyArr(list);
  229. let data = showTools.headerTextFilter(arr, 'system', this.onlyRead, this.showType);
  230. data.unshift("所属建筑楼层");
  231. return data;
  232. },
  233. formatHeaderType(list) {
  234. //格式化表头头映射的数据
  235. let arr = tools.copyArr(list);
  236. let data = showTools.headerTypeFilter(arr, 'system', this.onlyRead, this.showType);
  237. data.unshift({
  238. data: "buildingFloorInfoList",
  239. renderer: text.sysInBuildFloor
  240. });
  241. return data;
  242. },
  243. initTable() {
  244. //实例化表格
  245. let settings = {
  246. data: this.tableData,
  247. colHeaders: this.formatHeaderData(this.tableHeader),
  248. columns: this.formatHeaderType(this.tableHeader),
  249. rowHeights: 30,
  250. maxRows: this.tableData.length,
  251. contextMenu: this.onlyRead ? false : {
  252. items: {
  253. remove_row: {
  254. name: "删除该系统"
  255. }
  256. }
  257. },
  258. autoColumnSize: true,
  259. language: "zh-CN",
  260. manualColumnResize: true,
  261. manualColumnMove: true,
  262. // 事件
  263. afterChange: this.handleUpdataTable, //修改后
  264. afterFilter: this.trimmedRows, //排序前
  265. afterRemoveRow: this.handleDeleteTableRow, //右键删除
  266. afterOnCellMouseDown: this.handleTdClick //鼠标点击
  267. };
  268. this.$nextTick(() => {
  269. this.tableExample = this.$refs.table.init(settings);
  270. });
  271. },
  272. //去除数组中相同的元素
  273. array_diff(a, b) {
  274. for (var i = 0; i < b.length; i++) {
  275. for (var j = 0; j < a.length; j++) {
  276. if (a[j] == b[i]) {
  277. a.splice(j, 1);
  278. j = j - 1;
  279. }
  280. }
  281. }
  282. return a;
  283. },
  284. //表格点击事件
  285. handleTdClick(el, rowArr) {
  286. //点击的是表头
  287. if (rowArr.row < 0) {
  288. return;
  289. }
  290. //被筛选过后的数组
  291. let trimmedArr = this.trimmedRows();
  292. //是否启用了排序
  293. let isSort = this.tableExample.getPlugin("columnSorting").isSorted();
  294. if (trimmedArr.length && isSort) {
  295. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  296. .__arrayMap;
  297. let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
  298. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  299. } else if (isSort) {
  300. //排序后的数组
  301. let sortArr = this.tableExample.getPlugin("columnSorting").rowsMapper
  302. .__arrayMap;
  303. let infos = this.tableData[sortArr[rowArr.row]];
  304. this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
  305. } else if (trimmedArr.length) {
  306. let infos = this.tableData[trimmedArr[rowArr.row]];
  307. this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
  308. } else {
  309. let infos = this.tableData[rowArr.row];
  310. this.getInfors(infos, rowArr);
  311. }
  312. },
  313. //获取被筛选掉的行号
  314. trimmedRows() {
  315. var plugin = this.tableExample.getPlugin("trimRows").trimmedRows;
  316. let dataLength = this.tableData.length;
  317. let dataArr = new Array();
  318. for (let i = 0; i < dataLength; i++) {
  319. dataArr.push(i);
  320. }
  321. if (plugin.length <= 0) {
  322. dataArr = undefined;
  323. } else {
  324. dataArr = this.array_diff(dataArr, plugin);
  325. }
  326. return dataArr || [];
  327. },
  328. getInfors(infos, row) {
  329. let val = this.tableExample.colToProp(row.col);
  330. let inputData = this.inputMap[val];
  331. this.row = row.row;
  332. this.messKey = val;
  333. switch (val) {
  334. //操作
  335. case 'caozuo':
  336. // window.open(`http://adm.sagacloud.cn:8058/spread?id=${infos.EquipID}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
  337. this.$message("开发中...")
  338. break;
  339. //设备二维码图片
  340. // case 'EquipQRCode':
  341. // case "defaultQRCode":
  342. // this.qrcodeUrl = this.tableData[row.row].EquipQRCode;
  343. // if (!!this.qrcodeUrl) {
  344. // this.myDialog.qrcode = true;
  345. // } else {
  346. // this.$message("此设备没有设备二维码");
  347. // }
  348. // break;
  349. //关联设备数量
  350. case 'count':
  351. if (!this.onlyRead) {
  352. this.myDialog.relevance = true
  353. }
  354. break;
  355. //所属建筑楼层
  356. case 'buildingFloorInfoList':
  357. if (!this.onlyRead) {
  358. this.$refs.editFloor.showDialog(this.tableData[row.row]);
  359. }
  360. break;
  361. default:
  362. break;
  363. }
  364. if (!this.onlyRead && !inputData.editable) {
  365. this.$message("该信息点的值为自动生成,不可人工维护!");
  366. return false;
  367. }
  368. },
  369. //建筑楼层
  370. relateSuccess(data) {
  371. this.tableData[this.row].buildingFloorInfoList = data
  372. this.tableExample.render()
  373. }
  374. }
  375. };
  376. </script>
  377. <style lang="less" scoped>
  378. #deviceList {
  379. overflow: hidden;
  380. height: 100%;
  381. background-color: #fff;
  382. padding: 10px;
  383. position: relative;
  384. .right {
  385. background: #fff;
  386. }
  387. .search-header {
  388. overflow: hidden;
  389. padding: 0 10px 10px 10px;
  390. border-bottom: 1px solid #bcbcbc;
  391. }
  392. .tableBox {
  393. display: flex;
  394. height: calc(100% - 100px);
  395. margin-top: 10px;
  396. .tableLeft {
  397. flex: 1;
  398. }
  399. }
  400. .create_button {
  401. margin-top: 10px;
  402. }
  403. }
  404. </style>