addsystem.vue 13 KB

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