handsontable.vue 32 KB

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