handsontable.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874
  1. <template>
  2. <div id="handsontable" v-loading="isLoading">
  3. <el-row class="left">
  4. <div style="display: inline-block" v-show="zoneCode === 'OtherZone'">
  5. <!-- <div style="display: inline-block" v-show="!onlyRead && zoneCode === 'OtherZone'">-->
  6. <el-button @click="addZoneBtn" type="primary">添加分区</el-button>
  7. <el-select v-model="OtherValue" placeholder="请选择分区类型" @change="changeOtherZone">
  8. <el-option v-for="item in OtherList" :key="item.value" :label="item.label" :value="item.value">
  9. </el-option>
  10. </el-select>
  11. &nbsp;&nbsp; | &nbsp;&nbsp;
  12. </div>
  13. <el-select v-model="onlyRead" @change="getData(false)" style="width:100px;margin-right:20px;vertical-align:bottom;">
  14. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  15. </el-select>
  16. <el-select v-model="showType" @change="initHot" style="width:100px;margin-right:10px;vertical-align:bottom;">
  17. <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
  18. </el-select>
  19. <el-button v-show="!onlyRead" @click="addSp">添加</el-button>
  20. <el-button @click="reset">刷新</el-button>
  21. <el-button v-show="!onlyRead" @click="undo">撤销</el-button>
  22. <el-input v-model="zoneItemID" placeholder="请输入业务空间id" @keyup.enter.native="getData" style="display:inline-block;width:500px;margin-left:20px;">
  23. <i slot="suffix" class="el-input__icon el-icon-search" @click="getData"></i>
  24. </el-input>
  25. </el-row>
  26. <div v-show="main &&main.length" :id="id"></div>
  27. <div class="center" v-show="!main || !main.length" style="height: 400px;padding-top:140px;box-sizing:border-box;">
  28. <i class="icon-wushuju iconfont"></i>
  29. 暂无数据
  30. </div>
  31. <!-- <add-business :buildMess="buildMess" :dialog="dialog"></add-business> -->
  32. <el-pagination class="right" v-show="main && main.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
  33. :current-page="page.pageNumber" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
  34. :total="page.total">
  35. </el-pagination>
  36. <!-- <div class="right" v-show="main && main.length">
  37. <my-pagination :page="page" @change="pageChange"></my-pagination>
  38. </div> -->
  39. <!-- 二维码弹窗 -->
  40. <qrcode :dialog="dialog" :qrcodeUrl="qrcodeUrl" :addBody="true" ref="qrcode"></qrcode>
  41. <!-- 上传图片-->
  42. <upload-img-dialog :read="onlyRead" @changeFile="imgChange" :keysArr="imgsArr" :dialog="myDialog" />
  43. <dialogZone ref="zone" @createSuccess="getOtherType" />
  44. </div>
  45. </template>
  46. <script>
  47. // 引用handsontable插件
  48. import "@/assets/js/chosen.jquery.min";
  49. import tools from "@/utils/scan/tools";
  50. import "@/assets/js/handsontable-chosen-editor";
  51. import lStorage from '@/utils/localStorage'
  52. import myPagination from "@/components/common/myPagination";
  53. import addBusiness from "@/components/business_space/dialogs/addDialog/businessDialog"
  54. import showTools from "@/utils/handsontable/notShow"
  55. import handsonUtils from "@/utils/hasontableUtils"
  56. import Handsontable from "handsontable-pro"
  57. import buildFloor from '@/utils/handsontable/buildFloorData'
  58. import 'handsontable-pro/dist/handsontable.full.css'
  59. import uploadImgDialog from "@/components/business_space/dialogs/list/uploadImgDialog"
  60. import qrcode from "@/components/ledger/lib/qrcode";
  61. import {
  62. BeatchQueryParam,
  63. handleZoneUpdateBd,
  64. queryAllZoneType,
  65. zoneCreate,
  66. zoneDelete,
  67. zoneQuery,
  68. zoneUpdate
  69. } from "@/api/scan/request";
  70. import { mapGetters } from "vuex";
  71. import dialogZone from "../../ledger/addDialog/dialogZone";
  72. export default {
  73. props: {
  74. id: {},
  75. zoneCode: {}
  76. },
  77. components: {
  78. qrcode, //二维码页面
  79. myPagination,
  80. addBusiness,
  81. uploadImgDialog,
  82. dialogZone,
  83. },
  84. computed: {
  85. ...mapGetters("layout", ["projectId", "secret", "userId"]),
  86. showTypes() {
  87. return this.onlyRead ?
  88. [{ value: "Visible", label: '只看采集信息' }, { value: "all", label: '全部' }] :
  89. [{ value: "Visible", label: '只看采集信息' }, { value: "all", label: '全部' }]
  90. }
  91. },
  92. data() {
  93. return {
  94. dialog: {
  95. qrcode: false, //二维码弹窗
  96. addDevice: false
  97. },
  98. qrcodeUrl: "",//二维码图片地址
  99. headers: null,
  100. main: [],
  101. hot: null,
  102. isLoading: true,
  103. options: [{
  104. value: true,
  105. label: '只读模式'
  106. }, {
  107. value: false,
  108. label: '编辑模式'
  109. }],
  110. onlyRead: true,
  111. showType: "",
  112. page: {
  113. pageSize: 50,
  114. pageSizes: [10, 20, 50, 100],
  115. pageNumber: 1,
  116. total: 0
  117. },
  118. param: {
  119. ProjId: this.projectId, //项目id
  120. UserId: this.userId, //用户id
  121. secret: this.secret
  122. },
  123. buildMess: null,
  124. filtersArr: [], //表格数据被过滤后的下标
  125. copyMain: [], //深拷贝数组
  126. buildFloorData: [], //楼层数据
  127. zoneItemID: '',
  128. myDialog: {
  129. uploadImgs: false, //上传图片弹窗
  130. },
  131. imgsArr: [], //空间图片
  132. OtherList: [],//其他分区筛选框
  133. OtherValue: '',
  134. };
  135. },
  136. created() {
  137. this.setData()
  138. buildFloor.getData(this.buildFloorData)
  139. },
  140. mounted() {
  141. },
  142. methods: {
  143. setData() {
  144. this.param.ProjId = this.projectId
  145. this.param.UserId = this.userId
  146. this.param.secret = this.secret
  147. },
  148. //获取表格数据
  149. getHeader(headers, buildFloorSelectd) {
  150. this.headers = headers
  151. this.buildFloorSelectd = buildFloorSelectd
  152. this.page.pageNumber = 1
  153. this.getData()
  154. },
  155. getData() {
  156. this.zoneParam = {
  157. ZoneType: this.zoneCode,
  158. PageNumber: this.page.pageNumber,
  159. PageSize: this.page.pageSize,
  160. Orders: "createTime desc, RoomID asc"
  161. }
  162. if (this.buildFloorSelectd.length === 1) {
  163. switch (this.buildFloorSelectd[0]) {
  164. case 'noKnow':
  165. this.zoneParam.BuildingId = 'isnull';
  166. break;
  167. case 'all':
  168. // params.BuildingId = '';
  169. break
  170. }
  171. } else if (this.buildFloorSelectd.length === 2) {
  172. switch (this.buildFloorSelectd[1]) {
  173. case 'noKnow':
  174. this.zoneParam.BuildingId = this.buildFloorSelectd[0];
  175. this.zoneParam.FloorId = 'isnull';
  176. break;
  177. case 'all':
  178. this.zoneParam.BuildingId = this.buildFloorSelectd[0];
  179. // params.FloorId = '';
  180. break;
  181. default:
  182. this.zoneParam.BuildingId = this.buildFloorSelectd[0];
  183. this.zoneParam.FloorId = this.buildFloorSelectd[1]
  184. }
  185. }
  186. if (this.zoneItemID) {
  187. this.zoneParam.Filters = `RoomID="${this.zoneItemID}"`
  188. }
  189. if (this.zoneCode != 'OtherZone') {
  190. this.isLoading = true
  191. this.getZoneMessage(this.zoneParam)
  192. } else {
  193. // 其他分区类型查询表数据接口
  194. if (localStorage.getItem('otherZone')) {
  195. this.OtherValue = (localStorage.getItem('otherZone'))
  196. }
  197. if (this.OtherValue) {
  198. this.zoneParam.ZoneType = this.OtherValue;
  199. this.getZoneMessage(this.zoneParam)
  200. } else {
  201. this.main = []
  202. }
  203. this.isLoading = false
  204. this.getOtherType();
  205. }
  206. },
  207. //查询空间信息
  208. getZoneMessage(param) {
  209. zoneQuery(param, res => {
  210. this.page.total = res.Total;
  211. this.main = res.Content.map((item) => {
  212. if (item.hasOwnProperty("BuildingId") && item.hasOwnProperty("FloorId")) {
  213. item.flowBuild = item.BuildingId + "-" + item.FloorId
  214. } else if (item.hasOwnProperty("BuildingId") && !item.hasOwnProperty("FloorId")) {
  215. item.flowBuild = item.BuildingId
  216. }
  217. return item
  218. });
  219. if (this.main && this.main.length && this.main[0].RoomID) {
  220. this.copyMain = tools.deepCopy(this.main);
  221. if (this.onlyRead) {
  222. this.getBatch(this.main)
  223. }
  224. }
  225. this.isLoading = false;
  226. this.getMain()
  227. })
  228. },
  229. // getData() {
  230. // if (this.zoneCode != 'OtherZone') {
  231. // this.isLoading = true
  232. // let params = {
  233. // zone: this.zoneCode,
  234. // data: {
  235. // Filters: ``,
  236. // Orders: "createTime desc, RoomID asc",
  237. // PageNumber: this.page.pageNumber,
  238. // PageSize: this.page.pageSize
  239. // }
  240. // }
  241. // if (this.buildFloorSelectd[0] == "noKnow") {
  242. // params.data.Filters += `buildingId isNull`
  243. // } else if (this.buildFloorSelectd[0] && this.buildFloorSelectd[0] != "all") {
  244. // params.data.Filters += `buildingId='${this.buildFloorSelectd[0]}'`
  245. // }
  246. // if (this.buildFloorSelectd.length > 1) {
  247. // if (this.buildFloorSelectd[1] == "noKnow") {
  248. // params.data.Filters += `;floorId isNull`
  249. // } else if (this.buildFloorSelectd[1] && this.buildFloorSelectd[1] != "all") {
  250. // params.data.Filters += `;floorId='${this.buildFloorSelectd[1]}'`
  251. // }
  252. // }
  253. // if (this.zoneItemID) {
  254. // params.data.Filters += `;RoomID='${this.zoneItemID}'`
  255. // }
  256. // if (!params.data.Filters) {
  257. // delete params.data.Filters
  258. // }
  259. // // if (this.buildFloorSelectd.length && this.buildFloorSelectd[0] && this.buildFloorSelectd[1]) {
  260. // // params.data.Filters = `BuildingId='${this.buildFloorSelectd[0]}';FloorId='${this.buildFloorSelectd[1]}'`
  261. // // }
  262. // // else if (buildFloorSelectd.length && buildFloorSelectd[0] && !buildFloorSelectd[1]) {
  263. // // params.data.Filters = `BuildingId='${buildFloorSelectd[0]}'`
  264. // // } else {
  265. // // params.data.Filters = `BuildingId='';FloorId=''`
  266. // // }
  267. //
  268. // queryZone(params, res => {
  269. // this.page.total = res.Total
  270. // this.main = res.Content.map((item) => {
  271. // if (item.hasOwnProperty("BuildingId") && item.hasOwnProperty("FloorId")) {
  272. // item.flowBuild = item.BuildingId + "-" + item.FloorId
  273. // } else if (item.hasOwnProperty("BuildingId") && !item.hasOwnProperty("FloorId")) {
  274. // item.flowBuild = item.BuildingId
  275. // }
  276. // return item
  277. // });
  278. // if (this.main && this.main.length && this.main[0].RoomID) {
  279. // this.copyMain = tools.deepCopy(this.main);
  280. // if (this.onlyRead) {
  281. // this.getBatch(this.main)
  282. // }
  283. // }
  284. // this.isLoading = false
  285. // this.getMain()
  286. // })
  287. // } else {
  288. // // 其他分区类型查询表数据接口
  289. // this.isLoading = false
  290. // this.getOtherType();
  291. // }
  292. // },
  293. //获取表格主体内容
  294. getMain() {
  295. if (!!this.hot) {
  296. this.hot.destroy();
  297. this.hot = null;
  298. }
  299. this.$nextTick(() => {
  300. this.initHot();
  301. });
  302. },
  303. //初始化handsontable组件
  304. initHot() {
  305. var container = document.getElementById(this.id);
  306. let winHeight = document.documentElement.clientHeight;
  307. this.hot = new Handsontable(container, {
  308. data: this.main,
  309. colHeaders: this.delHeader(this.headers), //表头文案
  310. columns: this.getType(this.headers), //数据显示格式
  311. filters: true,
  312. fixedColumnsLeft: 4,
  313. maxRows: this.main ? this.main.length : '',
  314. height: winHeight - 100 - 50 - 176,
  315. columnSorting: true, //添加排序
  316. sortIndicator: true, //添加排序
  317. renderAllRows: true,
  318. autoColumnSize: true,
  319. observeChanges: false,
  320. language: "zh-CN",
  321. manualColumnResize: true,
  322. manualColumnMove: true,
  323. dropdownMenu: [
  324. "filter_by_condition",
  325. "filter_by_value",
  326. "filter_action_bar"
  327. ],
  328. contextMenu: this.onlyRead ? false : {
  329. items: {
  330. remove_row: {
  331. name: "删除该业务空间"
  332. }
  333. }
  334. },
  335. // 事件
  336. afterChange: this.tdChange, //修改后
  337. afterFilter: this.trimmedRows, //排序前
  338. afterRemoveRow: this.romoveFm, //右键删除
  339. afterOnCellMouseDown: this.eventClick //鼠标点击
  340. });
  341. let pro = document.getElementById("hot-display-license-info");
  342. if (!!pro) {
  343. pro.parentNode.removeChild(pro);
  344. }
  345. },
  346. //表格中的查看详情
  347. eventClick(el, rowArr) {
  348. let filter = this.filtersArr;
  349. //被筛选过后的数组
  350. let trimmedArr = this.trimmedRows();
  351. //是否启用了排序
  352. let isSort = this.hot.getPlugin("columnSorting").isSorted();
  353. //
  354. if (trimmedArr.length && isSort) {
  355. let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
  356. .__arrayMap;
  357. let infos = this.main[trimmedArr[sortArr[rowArr.row]]];
  358. this.getInfors(infos, rowArr);
  359. } else if (isSort) {
  360. //排序后的数组
  361. let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
  362. let infos = this.main[sortArr[rowArr.row]];
  363. this.getInfors(infos, rowArr);
  364. } else if (trimmedArr.length) {
  365. let infos = this.main[trimmedArr[rowArr.row]];
  366. this.getInfors(infos, rowArr);
  367. } else {
  368. let infos = this.main[rowArr.row];
  369. this.getInfors(infos, rowArr);
  370. }
  371. },
  372. getInfors(infos, row) {
  373. let val = this.hot.colToProp(row.col);
  374. this.row = row.row;
  375. lStorage.set('screen_data', { path: this.$route.path, data: { RoomID: infos.RoomID, zone: this.zoneCode } })
  376. if (val == "point") {
  377. let query = {
  378. RoomID: infos.RoomID,
  379. zone: this.zoneCode,
  380. isMyTab: 2,
  381. buildFloorSelectd: this.buildFloorSelectd
  382. }
  383. this.$router.push({
  384. path: "/ledger/spaceDetail",
  385. query: query
  386. })
  387. } else if (val == "RoomQRCode") {
  388. this.qrcodeUrl = this.main[row.row].RoomQRCode
  389. if (!!this.qrcodeUrl) {
  390. this.dialog.qrcode = true;
  391. } else {
  392. this.$message("此设备没有设备二维码")
  393. }
  394. } else if (val == "Pic") {
  395. let Picdata = tools.dataForKey(this.main[row.row], val);
  396. this.imgsArr = Picdata ? Picdata : [];
  397. if (!this.onlyRead || this.imgsArr.length) {
  398. this.myDialog.uploadImgs = true;
  399. }
  400. } else {
  401. return false;
  402. }
  403. },
  404. //表格发生更改
  405. tdChange(changeData, source) {
  406. if (!this.onlyRead) {
  407. if (changeData) {
  408. let trimmedArr = this.trimmedRows();
  409. let param = handsonUtils.getParam(changeData, source, this.hot, trimmedArr);
  410. let data = []
  411. for (let i = 0; i < param.length; i++) {
  412. if (param[i].RoomID) {
  413. data.push(param[i])
  414. } else {
  415. this.handleCreateZone(param[i])
  416. }
  417. }
  418. //如果data中包含/且data长度为1,将其转换成.
  419. if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
  420. changeData[0][1] = changeData[0][1].split("/").join(".")
  421. }
  422. // 存在data进行修改请求
  423. if (data && data.length) {
  424. this.updateBusiness(data, changeData)
  425. }
  426. }
  427. }
  428. },
  429. //右键删除
  430. romoveFm() {
  431. let params = tools.differenceArr(this.main, this.copyMain)
  432. if (params.length < 1 || this.main > this.copyMain) {
  433. return
  434. }
  435. let param = []
  436. params.map(item => {
  437. if (item.RoomID)
  438. param.push({ RoomID: item.RoomID })
  439. })
  440. params.map(i => i.ObjectType = this.zoneParam.ZoneType ? this.zoneParam.ZoneType : i.ObjectType);
  441. this.$confirm("此操作将删除业务空间,是否继续?", "提示", {
  442. confirmButtonText: '确定',
  443. cancelButtonText: '取消',
  444. type: 'warning'
  445. }).then(() => {
  446. zoneDelete(param, res => {
  447. this.$message.success("删除成功!")
  448. this.getData()
  449. })
  450. }).catch(() => {
  451. this.getData()
  452. this.$message("取消删除")
  453. })
  454. },
  455. //创建业务空间
  456. handleCreateZone(param) {
  457. let keys = Object.keys(param)
  458. keys.map((key) => { //将值为空字符串的属性删除
  459. if (param[key] == "") {
  460. delete param[key]
  461. }
  462. })
  463. if (!param.RoomLocalName) {
  464. this.$message("新增业务空间本地名称不能为空!")
  465. return
  466. }
  467. if (!Object.keys(param).length) {
  468. this.$message("新添加业务空间内容不能为空!")
  469. return
  470. }
  471. if (param.flowBuild) {
  472. param.BuildingId = param.flowBuild.split('-')[0]
  473. param.FloorId = param.flowBuild.split('-')[1] || null
  474. } else {
  475. if (this.buildFloorSelectd) {
  476. if (this.buildFloorSelectd[0] != 'all' && this.buildFloorSelectd[0] != 'noKnow') {
  477. param.BuildingId = this.buildFloorSelectd[0]
  478. }
  479. if (this.buildFloorSelectd[1] && this.buildFloorSelectd[1] != 'all' && this.buildFloorSelectd[1] != 'noKnow') {
  480. param.FloorId = this.buildFloorSelectd[1]
  481. }
  482. }
  483. }
  484. param.ObjectType = this.zoneParam.ZoneType ? this.zoneParam.ZoneType : this.zoneCode;
  485. let params = {
  486. Content: [param]
  487. };
  488. // let params = {
  489. // zone: this.zoneCode,
  490. // data: {
  491. // Content: [param]
  492. // }
  493. // }
  494. // createZone(params, res => {
  495. //
  496. // this.$message.success("添加成功!")
  497. // this.getData()
  498. // })
  499. zoneCreate(params, res => {
  500. this.$message.success("添加成功!")
  501. this.getData()
  502. })
  503. },
  504. // 修改
  505. updateBusiness(data, change) {
  506. let param = {
  507. data: {
  508. Content: [],
  509. Projection: []
  510. },
  511. zone: this.zoneCode
  512. };
  513. let keyList = [];
  514. //生成要修改字段列表
  515. change.map((item) => {
  516. let key = item[1].split(".")[0]
  517. if (key == "flowBuild" && keyList.indexOf(key) == -1) {
  518. keyList.push("BuildingId", "FloorId")
  519. param.data.Projection.push("BuildingId", "FloorId")
  520. }
  521. if (item[1] && keyList.indexOf(key) == -1) {
  522. keyList.push(key)
  523. }
  524. if (item[1] && item[3] == "" && param.data.Projection.indexOf(key) == -1) {
  525. param.data.Projection.push(key)
  526. }
  527. })
  528. //生成对应修改数据
  529. data.map((item, index) => {
  530. keyList.map(value => {
  531. if (value == "BuildingId") {
  532. let itemData = tools.dataForKey(item, "flowBuild")
  533. if (itemData == "") {
  534. tools.setDataForKey(item, "BuildingId", null)
  535. tools.setDataForKey(item, "FloorId", null)
  536. } else {
  537. let BuildingId = itemData.split("-")[0]
  538. let FloorId = itemData.split("-")[1]
  539. if (BuildingId && FloorId) {
  540. tools.setDataForKey(item, "BuildingId", BuildingId)
  541. tools.setDataForKey(item, "FloorId", FloorId)
  542. } else if (BuildingId && !FloorId) {
  543. tools.setDataForKey(item, "BuildingId", BuildingId)
  544. tools.setDataForKey(item, "FloorId", null)
  545. }
  546. }
  547. } else {
  548. let itemData = tools.dataForKey(item, value)
  549. tools.setDataForKey(item, value, itemData == "" ? null : itemData)
  550. }
  551. })
  552. param.data.Content.push(item);
  553. })
  554. if (param.data.Projection.indexOf('BuildingId') > -1) {
  555. let pa = param.data.Content.map(t => {
  556. return {
  557. Type: this.zoneCode,
  558. SpaceId: t.RoomID,
  559. Id: t.FloorId || t.BuildingId || null,
  560. }
  561. })
  562. handleZoneUpdateBd(pa, res => {
  563. this.$message.success('修改成功')
  564. })
  565. // updateRelateInSpAndBuild(pa, res => {
  566. // this.$message.success('修改成功')
  567. // })
  568. } else {
  569. // updateZone(param, (res) => {
  570. // })
  571. let obj = param.data.Content.map(i => {
  572. return {
  573. ...i,
  574. ObjectType: this.zoneParam.ZoneType || i.ObjectType
  575. }
  576. })
  577. let updateParam = {
  578. Content: obj
  579. };
  580. zoneUpdate(updateParam, res => {
  581. this.$message.success('更新成功')
  582. })
  583. }
  584. },
  585. //获取被筛选掉的行号
  586. trimmedRows() {
  587. // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
  588. var plugin = this.hot.getPlugin("trimRows").trimmedRows;
  589. let dataLength = this.main.length;
  590. let dataArr = new Array();
  591. for (let i = 0; i < dataLength; i++) {
  592. dataArr.push(i);
  593. }
  594. if (plugin.length <= 0) {
  595. dataArr = undefined;
  596. } else {
  597. dataArr = this.array_diff(dataArr, plugin);
  598. }
  599. this.filtersArr = dataArr;
  600. return dataArr || [];
  601. // var DataArray = new Array();
  602. // for (var i = 0; i < plugin.length; i++) {
  603. // // 通过行号获取数据
  604. // DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
  605. // }
  606. },
  607. //去除数组中相同的元素
  608. array_diff(a, b) {
  609. for (var i = 0; i < b.length; i++) {
  610. for (var j = 0; j < a.length; j++) {
  611. if (a[j] == b[i]) {
  612. a.splice(j, 1);
  613. j = j - 1;
  614. }
  615. }
  616. }
  617. return a;
  618. },
  619. //获取动态参数
  620. getBatch(data) {
  621. let param = {
  622. secret: this.secret,
  623. ProjId: this.projectId,
  624. data: {
  625. criterias: []
  626. }
  627. };
  628. this.headers.map(head => {
  629. if (
  630. head.InputMode == "L" ||
  631. head.InputMode == "L1" ||
  632. head.InputMode == "L2" ||
  633. head.InputMode == "M"
  634. ) {
  635. data.map(item => {
  636. let cur = tools.dataForKey(item, head.Path);
  637. if (cur) {
  638. param.data.criterias.push({
  639. id: item.RoomID,
  640. code: head.InfoPointCode
  641. });
  642. }
  643. });
  644. }
  645. });
  646. if (param.data.criterias.length) {
  647. BeatchQueryParam(param, res => {
  648. if (!this.onlyRead) {
  649. return false
  650. }
  651. this.main = data.map(item => {
  652. res.Content.map(child => {
  653. if (item.RoomID == child.id) {
  654. if (child.data || child.data == 0) {
  655. this.headers.map(head => {
  656. if (head.InfoPointCode == child.code) {
  657. tools.setDataForKey(item, head.Path, child.data);
  658. }
  659. });
  660. } else {
  661. this.headers.map(head => {
  662. if (head.InfoPointCode == child.code) {
  663. tools.setDataForKey(
  664. item,
  665. head.Path,
  666. // child.error ? "表号功能号格式错误" : "表号功能号不存在"
  667. child.error ? child.value ? "表号功能号格式错误" : "表号功能号不存在" : "暂未采集到实时数据"
  668. );
  669. }
  670. });
  671. }
  672. }
  673. });
  674. return item;
  675. });
  676. this.hot.loadData(this.main);
  677. });
  678. }
  679. },
  680. /**
  681. * 表头文案处理函数
  682. * @param list header数组数据
  683. *
  684. * @return 处理好的文案
  685. */
  686. delHeader(list) {
  687. let arr = tools.copyArr(list)
  688. let data = showTools.headerTextFilter(arr, "space", this.onlyRead, this.showType)
  689. data.unshift("是否关联平面图", "与空间相关联的设备");
  690. if (this.showType == "all") {
  691. data.splice(4, 0, "所属建筑楼层")
  692. }
  693. return data;
  694. },
  695. /**
  696. * 表头数据处理函数
  697. * @param arr header数组数据
  698. *
  699. * @return 处理好的数据格式
  700. */
  701. getType(list) {
  702. let arr = tools.copyArr(list)
  703. let data = showTools.headerTypeFilter(arr, "space", this.onlyRead, this.showType)
  704. data.unshift({
  705. data: "Outline",
  706. renderer: this.myRenderer,
  707. readOnly: true
  708. }, {
  709. data: "point",
  710. renderer: this.facilityRender,
  711. readOnly: true
  712. });
  713. if (this.showType == "all") {
  714. data.splice(4, 0, {
  715. data: "flowBuild",
  716. renderer: tools.customDropdownRenderer,
  717. editor: "chosen",
  718. chosenOptions: {
  719. data: this.buildFloorData
  720. },
  721. readOnly: this.onlyRead
  722. })
  723. }
  724. return data;
  725. },
  726. myRenderer(instance, td, row, col, prop, value, cellProperties) {
  727. if (value && value.length && value[0]) {
  728. td.innerHTML = "已关联"
  729. } else {
  730. td.innerHTML = "未关联"
  731. }
  732. return td;
  733. },
  734. facilityRender(instance, td, row, col, prop, value, cellProperties) {
  735. td.style.color = "#409EFF"
  736. td.style.cursor = "pointer"
  737. td.innerHTML = "点击查看"
  738. return td;
  739. },
  740. /** 页面中的按钮事件--------------------------- */
  741. addSp() {
  742. if (this.main && this.main.length && this.main[0].RoomID) {
  743. this.hot.destroy()
  744. this.hot = null
  745. this.main.unshift({})
  746. this.getMain()
  747. } else {
  748. if (this.main && this.main.length) {
  749. this.$message("请添加完成后继续添加")
  750. } else {
  751. this.main.unshift({})
  752. this.getMain()
  753. }
  754. }
  755. },
  756. //刷新
  757. reset() {
  758. this.getData()
  759. },
  760. //撤回操作
  761. undo() {
  762. this.hot.undo()
  763. },
  764. /** 分页事件------------------------ */
  765. //切换每页显示多少条数据
  766. handleSizeChange(val) {
  767. this.page.pageSize = val
  768. this.page.pageNumber = 1
  769. this.getData()
  770. },
  771. //切换页数
  772. handleCurrentChange(val) {
  773. this.page.pageNumber = val
  774. this.getData()
  775. },
  776. //上传图片弹窗触发事件
  777. imgChange(keys) {
  778. this.setDataToMain(keys, 'Pic', this.row);
  779. },
  780. //判断是否有值,有值赋值
  781. setDataToMain(data, key, row) {
  782. if (!!data && data != '--') {
  783. if (!!this.main[row]) {
  784. tools.setDataForKey(this.main[row], key, data);
  785. this.tdChange([[row, key, null, data]], "edit");
  786. } else {
  787. this.main[row] = {};
  788. tools.setDataForKey(this.main[row], key, data);
  789. }
  790. } else {
  791. tools.setDataForKey(this.main[row], key, "");
  792. }
  793. this.hot.render()
  794. },
  795. addZoneBtn() {
  796. this.$refs.zone.dialogFormVisible = true
  797. },
  798. // 其他分区类型查询
  799. getOtherType() {
  800. let param = {
  801. Cascade: [{ Name: 'zoneType', Filters: `ProjectId='${this.projectId}'` }],
  802. Filters: `Code="OtherZone"`
  803. }
  804. queryAllZoneType(param, res => {
  805. if (res.Content[0].ZoneType && res.Content[0].ZoneType.length) {
  806. this.OtherList = res.Content[0].ZoneType.map(t => {
  807. t.value = t.Code
  808. t.label = t.Name
  809. return t
  810. })
  811. } else {
  812. this.OtherList = []
  813. }
  814. })
  815. },
  816. // 其他类型下拉change
  817. changeOtherZone(val) {
  818. this.zoneParam.ZoneType = val;
  819. this.getZoneMessage(this.zoneParam);
  820. if (localStorage.getItem('otherZone')) {
  821. localStorage.setItem('otherZone', val)
  822. } else {
  823. localStorage.setItem('otherZone', val)
  824. }
  825. console.log(val)
  826. },
  827. },
  828. watch: {
  829. projectId() {
  830. this.buildFloorData = []
  831. buildFloor.getData(this.buildFloorData)
  832. this.setData()
  833. this.main = null
  834. },
  835. showTypes: {
  836. handler(newName, oldName) {
  837. if (newName && newName[0] && newName[0].value) {
  838. this.showType = newName[0].value
  839. } else {
  840. this.showType = ""
  841. }
  842. },
  843. immediate: true,
  844. deep: true
  845. }
  846. }
  847. };
  848. </script>
  849. <style lang="less" scoped>
  850. #handsontable {
  851. padding: 0 10px;
  852. .left {
  853. padding: 0;
  854. margin-bottom: 10px;
  855. }
  856. .no-data {
  857. height: 150px;
  858. line-height: 150px;
  859. text-align: center;
  860. color: gray;
  861. }
  862. }
  863. </style>