addsystem.vue 13 KB

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