spaceList.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481
  1. <!-- 空间列表 -->
  2. <template>
  3. <div class="space-list">
  4. <!-- 筛选 -->
  5. <div class="clp">
  6. <Input
  7. class="baseItemInput"
  8. :width="188"
  9. iconType="search"
  10. placeholder="搜索空间名称"
  11. v-model="getPressMsg"
  12. @pressEnter="pressEnter"
  13. @clear="pressEnter"
  14. @input="pressEnter"
  15. />
  16. </div>
  17. <!-- 空间 list -->
  18. <div ref="localDom" class="box-profess">
  19. <div class="profess" v-show="!pressMsgData.length" v-for="items in spaceList" :key="items.classCode">
  20. <!-- 空间类名称 -->
  21. <div @click="collapse(items)" class="profess-title">
  22. <i v-bind:class="[items.isShow ? 'caret-icon-active' : 'caret-icon', 'el-icon-caret-bottom ']"></i>
  23. <span class="code-name">{{ items.codeName }}</span>
  24. <div class="action">
  25. <Icon class="equip-edit" name="edit" @click.stop.native="editSpace(items)" />
  26. <Icon class="equip-delete" name="delete" @click.stop.native="deleteSpace(items)" />
  27. </div>
  28. </div>
  29. <!-- 空间实例列表 -->
  30. <el-collapse-transition>
  31. <div v-show="items.isShow">
  32. <div
  33. class="equipType"
  34. @click="chioceItem(item)"
  35. v-for="(item, i) in items.children"
  36. :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
  37. :key="i"
  38. >
  39. <!-- 本地名称-本地编码 -->
  40. <span
  41. class="local-name"
  42. :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
  43. >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
  44. </span>
  45. <!-- hover行显示小眼睛 -->
  46. <div class="toggle-eyes">
  47. <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
  48. </div>
  49. </div>
  50. </div>
  51. </el-collapse-transition>
  52. </div>
  53. <!-- 筛选显示的空间类,空间实例 -->
  54. <div class="choice-equip" v-show="pressMsgData.length">
  55. <div
  56. class="equipType"
  57. @click="chioceItem(item)"
  58. v-for="item in pressMsgData"
  59. :key="item.id"
  60. :class="[item.visible ? 'equip-visible' : 'equip-hidden', item.selected ? 'equip-selected' : '']"
  61. >
  62. <span class="local-name" :title="`${item.legendData.localName}${item.legendData.localId ? '-' + item.legendData.localId : ''}`"
  63. >{{ item.legendData.localName }}<span class="local-id">-{{ item.legendData.localId || "-" }}</span>
  64. </span>
  65. <div class="toggle-eyes">
  66. <Icon :name="item.visible ? 'preview' : 'hide'" @click.native.stop="toggleItemVisible(item)" />
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <!-- 添加空间 -->
  72. <div class="addbtn" @click="openAddSpaceDialog"><i class="el-icon-plus"></i>添加显示空间</div>
  73. <edit-info-point type="space" @closeModal="showEditInfoPoint = false" :code="classCode" :showDialog="showEditInfoPoint" />
  74. </div>
  75. </template>
  76. <script>
  77. import { mapState, mapMutations } from "vuex";
  78. import bus from "@/bus/bus";
  79. import editInfoPoint from "./editInfoPoint";
  80. import { ruleCreate } from "@/api/labsl";
  81. export default {
  82. data() {
  83. return {
  84. cascaderData6: [], // 筛选待定
  85. hoverIndex: -1,
  86. getPressMsg: "", //搜索框
  87. pressMsgData: [], //搜索对应得数组
  88. spaceList: [], //空间列表 二维数组
  89. local: null, //table loading
  90. classCode: "",
  91. showEditInfoPoint: false,
  92. };
  93. },
  94. components: { editInfoPoint },
  95. computed: {
  96. ...mapState(["zoneIteMap", "zoneItemNum", "id", "graphId"]),
  97. },
  98. watch: {
  99. zoneItemNum(newV) {
  100. this.getSpaceList();
  101. },
  102. },
  103. mounted() {
  104. this.getSpaceList();
  105. },
  106. methods: {
  107. ...mapMutations(["ADDRULE"]),
  108. // 打开添加弹窗
  109. openAddSpaceDialog() {
  110. this.$emit("openAddSpaceDialog");
  111. },
  112. /**
  113. * 查新空间列表
  114. */
  115. getSpaceList() {
  116. // TODO: 获取vuex中空间列表数据
  117. const arr = Object.values(this.zoneIteMap);
  118. const obj = this._(arr).groupBy("legendData.classCode").value();
  119. const spaceList = [];
  120. for (const key in obj) {
  121. const element = obj[key];
  122. spaceList.push({
  123. classCode: element[0].legendData.classCode,
  124. codeName: element[0].legendData.codeName,
  125. children: element,
  126. isShow: true,
  127. });
  128. }
  129. this.spaceList = spaceList;
  130. /* const spaceArr = [
  131. {
  132. classCode: "GeneralZone",
  133. codeName: "通用分区",
  134. isShow: true,
  135. children: [
  136. {
  137. id: "Eq11010500290353e50d583840c6a0b34d739dd0949b123123",
  138. visible: true,
  139. legendData: {
  140. localName: "风井",
  141. localId: "123sdf",
  142. id: "Eq11010500290353e50d583840c6a0b34d739dd0949b",
  143. },
  144. },
  145. {
  146. id: "Eq11010500290353e50d583840c6a0b34d739dd0949b123123eqwrrw",
  147. visible: true,
  148. legendData: {
  149. localName: "hhh",
  150. localId: "43qwasdfa",
  151. id: "Eq11010500290353e50d583840c6a0b34d739dd0949brweqrqer",
  152. },
  153. },
  154. ],
  155. },
  156. ];
  157. this.spaceList = spaceArr; */
  158. },
  159. /**
  160. * 编辑空间类
  161. */
  162. editSpace(items) {
  163. this.classCode = items.classCode;
  164. this.showEditInfoPoint = true;
  165. },
  166. deleteSpace(items) {
  167. this.$confirm(`此操作将删除${items.codeName}, 是否继续?`, "提示", {
  168. confirmButtonText: "确定",
  169. cancelButtonText: "取消",
  170. type: "warning",
  171. }).then(async () => {
  172. const postParams = {
  173. content: [
  174. {
  175. graphCoding: this.id,
  176. graphId: this.graphId,
  177. returnType: "zone", // 返回类型(equip: 设备, equipGroup: 设备组, zone: 空间)
  178. commond: "delete", // 命令类型(query: 查询, delete: 删除)
  179. params: {
  180. classCode: items.classCode,
  181. },
  182. },
  183. ],
  184. };
  185. const res = await ruleCreate(postParams);
  186. if (res.result === "success") {
  187. this.$message.success("删除成功");
  188. if (res.entityList && res.entityList[0]) {
  189. // 在vuex中添加 删除的规则
  190. this.ADDRULE(res.entityList[0]);
  191. // 发出删除设备指令
  192. bus.$emit("removeZone", items.classCode, true);
  193. }
  194. } else {
  195. this.$message.error(res.message || "删除失败");
  196. }
  197. });
  198. },
  199. /**
  200. * 点击空间,更改图chioceItem
  201. */
  202. chioceItem(item) {
  203. bus.$emit("chioceItem", item);
  204. },
  205. /**
  206. * 切换空间显隐状态
  207. */
  208. toggleItemVisible(item) {
  209. // console.log(item);
  210. item.visible = !item.visible;
  211. },
  212. // 删除Item
  213. deleteItem(a) {
  214. bus.$emit("deleteItem", a);
  215. },
  216. // 折叠
  217. collapse(item) {
  218. item.isShow = !item.isShow;
  219. },
  220. // 搜索回车操作
  221. pressEnter() {
  222. const list = [];
  223. if (!this.getPressMsg) {
  224. this.pressMsgData = [];
  225. return;
  226. }
  227. // 对信息点相同得提取出来
  228. this.spaceList.map((item) => {
  229. item.children.map((space) => {
  230. const localName = space?.legendData?.localName?.toLowerCase();
  231. const localId = space?.legendData?.localId?.toLowerCase();
  232. const msg = this.getPressMsg.toLowerCase();
  233. if (localName.includes(msg) || localId.includes(msg)) {
  234. list.push(space);
  235. }
  236. });
  237. });
  238. this.pressMsgData = list;
  239. },
  240. },
  241. };
  242. </script>
  243. <style lang="less" scoped>
  244. div {
  245. -moz-user-select: none; /*火狐*/
  246. -webkit-user-select: none; /*webkit浏览器*/
  247. -ms-user-select: none; /*IE10*/
  248. -khtml-user-select: none; /*早期浏览器*/
  249. user-select: none;
  250. }
  251. .space-list {
  252. width: 100%;
  253. height: 100%;
  254. position: relative;
  255. display: flex;
  256. flex-direction: column;
  257. // background-color: #fff;
  258. .clp {
  259. display: flex;
  260. align-items: center;
  261. justify-content: space-between;
  262. padding-top: 12px;
  263. padding-right: 6px;
  264. .shaixuan {
  265. cursor: pointer;
  266. }
  267. }
  268. .box-profess {
  269. // min-height: 500px;
  270. flex: 1;
  271. overflow-y: scroll;
  272. padding: 12px 0;
  273. }
  274. .profess {
  275. .profess-title {
  276. width: 100%;
  277. height: 40px;
  278. line-height: 40px;
  279. display: flex;
  280. padding: 0 10px 0 16px;
  281. display: flex;
  282. align-items: center;
  283. cursor: pointer;
  284. font-size: 14px;
  285. font-weight: 600;
  286. color: #1f2429;
  287. .code-name {
  288. margin-left: 10px;
  289. flex: 1;
  290. }
  291. .action {
  292. // width: 100px;
  293. display: none;
  294. .equip-delete {
  295. // cursor: not-allowed;
  296. }
  297. }
  298. &:hover {
  299. .action {
  300. display: flex;
  301. align-items: center;
  302. }
  303. }
  304. }
  305. .equipType {
  306. padding: 0 10px 0 40px;
  307. display: flex;
  308. align-items: center;
  309. .toggle-eyes {
  310. width: 20px;
  311. padding-left: 4px;
  312. display: flex;
  313. align-items: center;
  314. .p-icon {
  315. display: none;
  316. }
  317. }
  318. &:hover {
  319. background-color: #f5f6f7;
  320. .p-icon {
  321. display: inline-block;
  322. }
  323. }
  324. .local-name {
  325. flex: 1;
  326. height: 40px;
  327. line-height: 40px;
  328. font-size: 14px;
  329. font-weight: 600;
  330. color: #1f2429;
  331. overflow: hidden;
  332. text-overflow: ellipsis;
  333. white-space: nowrap;
  334. .local-id {
  335. font-weight: 500;
  336. color: #8d9399;
  337. line-height: 16px;
  338. }
  339. }
  340. .equipType-title {
  341. margin: 20px 0 20px 18px;
  342. cursor: pointer;
  343. }
  344. }
  345. // 选中的空间样式
  346. .equip-selected {
  347. background-color: #f5f6f7;
  348. }
  349. // 隐藏的空间列表样式
  350. .equip-hidden {
  351. .local-name {
  352. color: #8d9399;
  353. .local-id {
  354. color: #8d9399;
  355. }
  356. }
  357. }
  358. }
  359. .addbtn {
  360. width: 100%;
  361. height: 40px;
  362. display: flex;
  363. align-items: center;
  364. justify-content: center;
  365. box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.11);
  366. cursor: pointer;
  367. &:hover {
  368. color: #0091ff;
  369. }
  370. }
  371. .caret-icon {
  372. animation: nowhirling 0.2s linear forwards;
  373. }
  374. .caret-icon-active {
  375. animation: whirling 0.2s linear forwards;
  376. }
  377. }
  378. .choice-equip {
  379. .equipType {
  380. padding: 0 10px 0 20px;
  381. display: flex;
  382. align-items: center;
  383. .toggle-eyes {
  384. width: 20px;
  385. padding-left: 4px;
  386. display: flex;
  387. align-items: center;
  388. .p-icon {
  389. display: none;
  390. }
  391. }
  392. &:hover {
  393. background-color: #f5f6f7;
  394. .p-icon {
  395. display: inline-block;
  396. }
  397. }
  398. .local-name {
  399. flex: 1;
  400. height: 40px;
  401. line-height: 40px;
  402. font-size: 14px;
  403. font-weight: 600;
  404. color: #1f2429;
  405. overflow: hidden;
  406. text-overflow: ellipsis;
  407. white-space: nowrap;
  408. .local-id {
  409. font-weight: 500;
  410. color: #8d9399;
  411. line-height: 16px;
  412. }
  413. }
  414. .equipType-title {
  415. margin: 20px 0 20px 18px;
  416. cursor: pointer;
  417. }
  418. }
  419. // 选中的空间样式
  420. .equip-selected {
  421. background-color: #f5f6f7;
  422. }
  423. // 隐藏的空间列表样式
  424. .equip-hidden {
  425. .local-name {
  426. color: #8d9399;
  427. .local-id {
  428. color: #8d9399;
  429. }
  430. }
  431. }
  432. }
  433. .reset {
  434. position: absolute;
  435. bottom: 16px;
  436. left: 24px;
  437. }
  438. @keyframes whirling {
  439. 0% {
  440. transform: rotate(-90deg);
  441. -ms-transform: rotate(-90deg); /* Internet Explorer */
  442. -moz-transform: rotate(-90deg); /* Firefox */
  443. -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
  444. -o-transform: rotate(-90deg); /* Opera */
  445. }
  446. 100% {
  447. transform: rotate(0deg);
  448. -ms-transform: rotate(0deg); /* Internet Explorer */
  449. -moz-transform: rotate(0deg); /* Firefox */
  450. -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
  451. -o-transform: rotate(0deg); /* Opera */
  452. }
  453. }
  454. @keyframes nowhirling {
  455. 0% {
  456. transform: rotate(0deg);
  457. -ms-transform: rotate(0deg); /* Internet Explorer */
  458. -moz-transform: rotate(0deg); /* Firefox */
  459. -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
  460. -o-transform: rotate(0deg); /* Opera */
  461. }
  462. 100% {
  463. transform: rotate(-90deg);
  464. -ms-transform: rotate(-90deg); /* Internet Explorer */
  465. -moz-transform: rotate(-90deg); /* Firefox */
  466. -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
  467. -o-transform: rotate(-90deg); /* Opera */
  468. }
  469. }
  470. </style>