addsystem.vue 13 KB

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