left_toolbar.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  1. <template>
  2. <div id="left_toolbar">
  3. <ul class="list-1">
  4. <li
  5. v-on:mouseout="mouseoutActive(item)"
  6. v-on:mouseover="mouseoverActive(item)"
  7. v-for="(item,i) in baseChoice"
  8. :key="i"
  9. @click="toolActionClick(item)"
  10. :class="{ actives:item.isChoice}"
  11. >
  12. <div class="item">
  13. <img v-show="!item.isHover && !item.isChoice" :src="require(`./../../assets/images/${item.img}`)" alt />
  14. <img v-show="item.isHover || item.isChoice " :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
  15. </div>
  16. </li>
  17. </ul>
  18. <ul class="list-2">
  19. <li
  20. v-on:mouseout="mouseoutActive(item)"
  21. v-on:mouseover="mouseoverActive(item)"
  22. v-for="(item,i) in systemChoice"
  23. @click="showDrawer(item)"
  24. :key="i"
  25. v-bind:class="{ actives:item.isChoice}"
  26. >
  27. <div class="item">
  28. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
  29. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
  30. <div>{{item.name}}</div>
  31. </div>
  32. </li>
  33. </ul>
  34. <ul class="list1">
  35. <Button @click="addEquip(1)">添加设备</Button>
  36. <hr />
  37. <Button @click="addEquip(2)">加载设备</Button>
  38. </ul>
  39. <!-- 提取-->
  40. <ul class="list-2 border-top">
  41. <li
  42. v-on:mouseout="mouseoutActive(item)"
  43. v-on:mouseover="mouseoverActive(item)"
  44. v-for="(item,i) in extractChoice"
  45. :key="i"
  46. @click="extractItem"
  47. >
  48. <div class="item">
  49. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
  50. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
  51. <div>{{item.name}}</div>
  52. </div>
  53. </li>
  54. </ul>
  55. <a-popover trigger="click" placement="rightBottom" v-model="drawerVisible">
  56. <template slot="content">
  57. <itemTree @getSelectId="getSelectId" :drawerVisible="drawerVisible" :categoryIdS="categoryIdS"></itemTree>
  58. </template>
  59. <div class="bottom-item">
  60. <a-icon type="ellipsis" />
  61. <span>选择原件</span>
  62. </div>
  63. </a-popover>
  64. <!-- 打开弹窗 -->
  65. <transition name="fade">
  66. <div class="drawer-model" id="drawer-model" v-show="visible">
  67. <a-drawer
  68. placement="left"
  69. :closable="false"
  70. :visible="visible"
  71. :wrap-style="{ position: 'absolute',}"
  72. @close="onClose"
  73. :getContainer="false"
  74. :mask="false"
  75. >
  76. <a-spin :spinning="spinning">
  77. <div class="drawer-model-body" v-if="!isExtract">
  78. <div class="btn-list">
  79. <a-radio-group
  80. v-show="showDrawerItem.type == 'Zone'"
  81. default-value="draw"
  82. button-style="solid"
  83. @change="changeDrawType"
  84. >
  85. <a-radio-button value="draw">绘制</a-radio-button>
  86. <a-radio-button value="select">点选</a-radio-button>
  87. </a-radio-group>
  88. </div>
  89. <div class="list" v-for="(item,index) in itemList" :key="index">
  90. <div class="title">{{item.Name}}</div>
  91. <ul class="example">
  92. <li @click="getexampleItem(items)" v-for="(items,indexs) in item.GraphElements" :key="indexs">
  93. <img :class="['item',`item-${items.Type}`]" :src="'/serve/topology-wanda/Picture/query/'+ items.Url" alt />
  94. <div class="text">{{items.Name}}</div>
  95. </li>
  96. </ul>
  97. </div>
  98. </div>
  99. <div v-else class="drawer-model-body drawer-model-body-extract">
  100. <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
  101. <a-tag
  102. slot="address"
  103. slot-scope="text, record, index"
  104. :color="'geekblue'"
  105. @click="pickUp(text, record, index)"
  106. >{{ text }}</a-tag>
  107. </a-table>
  108. </div>
  109. </a-spin>
  110. </a-drawer>
  111. </div>
  112. </transition>
  113. </div>
  114. </template>
  115. <script>
  116. import itemTree from "./leftbar_components/itemTree";
  117. import { graphElementGroup } from "@/api/editer.js";
  118. import bus from "@/bus";
  119. import { queryGroup } from "@/api/editer.js";
  120. import { mapState, mapActions } from "vuex";
  121. const columns = [
  122. {
  123. title: "名称",
  124. dataIndex: "name"
  125. },
  126. {
  127. title: "图例",
  128. dataIndex: "age"
  129. },
  130. {
  131. title: "数量",
  132. dataIndex: "number"
  133. },
  134. {
  135. title: "操作",
  136. dataIndex: "address",
  137. scopedSlots: { customRender: "address" }
  138. }
  139. ];
  140. const data = [
  141. {
  142. key: "1",
  143. name: "电梯",
  144. age: 32,
  145. number: 123,
  146. address: "提取"
  147. },
  148. {
  149. key: "2",
  150. name: "防火风区",
  151. age: 42,
  152. number: 123,
  153. address: "提取"
  154. }
  155. ];
  156. export default {
  157. components: { itemTree },
  158. props: {
  159. cmdType: {
  160. type: String,
  161. default: "",
  162. required: false
  163. }
  164. },
  165. data() {
  166. return {
  167. // 基础选择
  168. baseChoice: [
  169. {
  170. img: "t-select.png", //logo
  171. hoverImg: "t-select-hover.png", //hoverlogo
  172. isHover: true, //是否hover
  173. isChoice: true,
  174. name: "选择", //类型
  175. type: "choice"
  176. },
  177. {
  178. img: "t-line.png", //logo
  179. hoverImg: "t-line-hover.png", //hoverlogo
  180. isHover: false, //是否hover
  181. isChoice: false,
  182. name: "画线", //类型
  183. type: "baseLine"
  184. },
  185. {
  186. img: "t-text.png", //logo
  187. hoverImg: "t-text-hover.png", //hoverlogo
  188. isHover: false, //是否hover
  189. isChoice: false,
  190. name: "画文字", //类型
  191. type: "baseText"
  192. },
  193. {
  194. img: "t-img.png", //logo
  195. hoverImg: "t-img-hover.png", //hoverlogo
  196. isHover: false, //是否hover
  197. isChoice: false,
  198. name: "画图片", //类型
  199. type: "baseImage"
  200. }
  201. ],
  202. // 系统选择
  203. systemChoice: [
  204. {
  205. img: "t-position.png", //logo
  206. hoverImg: "t-position-hover.png", //hoverlogo
  207. isHover: false, //是否hover
  208. isChoice: false,
  209. name: "位置区域", //类型
  210. type: "Zone"
  211. },
  212. {
  213. img: "t-equipment.png", //logo
  214. hoverImg: "t-equipment-hover.png", //hoverlogo
  215. isHover: false, //是否hover
  216. isChoice: false,
  217. name: "设备设施", //类型
  218. type: "Image"
  219. },
  220. {
  221. img: "t-papeline.png", //logo
  222. hoverImg: "t-papeline-hover.png", //hoverlogo
  223. isHover: false, //是否hover
  224. isChoice: false,
  225. name: "管线桥架", //类型
  226. type: "Line"
  227. }
  228. ],
  229. visible: false,
  230. //提取
  231. extractChoice: [
  232. {
  233. img: "t-slices.png", //logo
  234. hoverImg: "t-slices-hover.png", //hoverlogo
  235. isHover: false, //是否hover
  236. name: "提取" //类型
  237. }
  238. ],
  239. isExtract: false, //是否为提取框
  240. data,
  241. columns,
  242. itemList: [], //图例数组
  243. categoryIdS: [],
  244. categoryId: "",
  245. activeIndex: -1,
  246. drawerVisible: false,
  247. spinning: false,
  248. showDrawerItem: {}
  249. };
  250. },
  251. computed: {
  252. ...mapState({
  253. GraphCategoryIds: "GraphCategoryIds",
  254. TypeIdToGraphElement: "TypeIdToGraphElement"
  255. })
  256. },
  257. methods: {
  258. // 添加设备
  259. /**
  260. * @param type 1添加设备 ,2:加载设备
  261. */
  262. addEquip(type) {
  263. // TODO: 画设备图例
  264. // 画设备图例
  265. type === 1 && this.$emit("setCmdType", "equipment");
  266. type === 2 && bus.$emit("addEquip", event);
  267. },
  268. // 触入
  269. mouseoverActive(item) {
  270. item.isHover = true;
  271. },
  272. mouseoutActive(item) {
  273. item.isHover = false;
  274. },
  275. toolActionClick(item) {
  276. this.visible = false;
  277. this.baseChoice.forEach(item => {
  278. item.isChoice = false;
  279. });
  280. this.systemChoice.forEach(a => {
  281. a.isChoice = false;
  282. });
  283. item.isChoice = true;
  284. this.$emit("setCmdType", item.type);
  285. },
  286. showDrawer(item) {
  287. this.showDrawerItem = item;
  288. console.log("showDrawerItem", this.showDrawerItem);
  289. this.isExtract = false;
  290. if (item.isChoice) {
  291. this.systemChoice.forEach(a => {
  292. a.isChoice = false;
  293. });
  294. this.visible = false;
  295. } else {
  296. this.systemChoice.forEach(a => {
  297. a.isChoice = false;
  298. });
  299. item.isChoice = true;
  300. if (this.visible) {
  301. this.visible = false;
  302. setTimeout(() => {
  303. this.visible = true;
  304. }, 300);
  305. } else {
  306. this.visible = true;
  307. }
  308. // 打开侧边框
  309. // 接口请求
  310. this.itemList = [];
  311. this.spinning = true;
  312. const data = {
  313. GraphCategoryIds: this.categoryId,
  314. Type: item.type
  315. };
  316. queryGroup(data).then(res => {
  317. this.itemList = res.Data;
  318. });
  319. const arr = {
  320. InfoSystems: this.categoryIdS,
  321. Type: item.type
  322. };
  323. graphElementGroup(arr).then(res => {
  324. this.spinning = false;
  325. res.Data.map(item => {
  326. this.itemList.push(item);
  327. });
  328. });
  329. }
  330. console.log(this.itemList);
  331. },
  332. getSelectId(data) {
  333. this.categoryIdS = data;
  334. this.drawerVisible = false;
  335. },
  336. onClose() {
  337. this.visible = false;
  338. this.systemChoice.forEach(a => {
  339. a.isChoice = false;
  340. });
  341. },
  342. // TODO:
  343. getexampleItem(item) {
  344. this.$emit("toolActionClick", item);
  345. },
  346. // 提取元素
  347. extractItem() {
  348. // 打开提取元素列表
  349. this.isExtract = true;
  350. this.visible = !this.visible;
  351. bus.$emit("extractItem");
  352. },
  353. getBus() {
  354. bus.$on("exportItem", data => {
  355. this.data = data.map(t => {
  356. (t.name = this.TypeIdToGraphElement[t.key].Name), (t.properties = this.TypeIdToGraphElement[t.key]);
  357. return t;
  358. });
  359. });
  360. },
  361. pickUp(text, record, index) {
  362. console.log("exportByKey");
  363. bus.$emit("exportByKey", record);
  364. },
  365. changeDrawType(v) {
  366. bus.$emit("changeDrawType", v.target.value);
  367. }
  368. },
  369. watch: {
  370. cmdType(cmd) {
  371. this.baseChoice.forEach(item => {
  372. item.isChoice = false;
  373. if (item.cmd == cmd) {
  374. item.isChoice = true;
  375. }
  376. });
  377. },
  378. drawerVisible(val) {
  379. if (this.visible) {
  380. this.showDrawer(this.showDrawerItem);
  381. }
  382. }
  383. },
  384. mounted() {
  385. const ele = document.getElementById("drawer-model");
  386. ele.style.width = "256px";
  387. this.getBus();
  388. },
  389. created() {
  390. const href = window.location.href;
  391. // 路由
  392. // const route = href.split("?")[0];
  393. // 参数处理
  394. let params = href.split("?")[1];
  395. if (!params) {
  396. // 参数有问题
  397. return false;
  398. }
  399. params = decodeURIComponent(params);
  400. // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
  401. const paramsArr = params.split("&");
  402. const obj = {};
  403. paramsArr.map(item => {
  404. const arr = item.split("=");
  405. obj[arr[0]] = arr[1];
  406. });
  407. this.categoryId = obj.categoryId;
  408. this.categoryIdS.push(obj.categoryId);
  409. }
  410. };
  411. </script>
  412. <style lang="less" scoped>
  413. /deep/ .ant-spin-nested-loading {
  414. height: 100% !important;
  415. .ant-spin-container {
  416. height: 100% !important;
  417. }
  418. }
  419. /deep/ .ant-drawer-body {
  420. height: 100% !important;
  421. }
  422. #left_toolbar {
  423. min-width: 68px;
  424. height: 100%;
  425. background: rgba(255, 255, 255, 1);
  426. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  427. padding: 0 0 12px 0;
  428. box-sizing: border-box;
  429. position: relative;
  430. ul,
  431. li {
  432. padding: 0;
  433. margin: 0;
  434. list-style: none;
  435. }
  436. .list-1 {
  437. padding-top: 1px;
  438. box-sizing: border-box;
  439. border-bottom: 1px solid #c3c7cb;
  440. li {
  441. width: 64px;
  442. min-height: 42px;
  443. margin: 6px auto;
  444. display: flex;
  445. align-items: center;
  446. justify-content: center;
  447. position: relative;
  448. cursor: pointer;
  449. .item {
  450. margin: 0 auto;
  451. display: flex;
  452. flex-direction: column;
  453. position: relative;
  454. cursor: pointer;
  455. font-size: 12px;
  456. img {
  457. width: 25px;
  458. height: 25px;
  459. }
  460. }
  461. &:hover {
  462. background: #e1f2ff;
  463. border-radius: 8px;
  464. opacity: 0.89;
  465. color: #fff;
  466. }
  467. .tooltip {
  468. position: absolute;
  469. left: 90px;
  470. top: 0;
  471. }
  472. }
  473. }
  474. .list-2 {
  475. padding-top: 1px;
  476. box-sizing: border-box;
  477. li {
  478. width: 64px;
  479. min-height: 42px;
  480. margin: 6px auto;
  481. display: flex;
  482. align-items: center;
  483. justify-content: center;
  484. position: relative;
  485. .item {
  486. margin: 0 auto;
  487. height: 54px;
  488. display: flex;
  489. flex-direction: column;
  490. position: relative;
  491. cursor: pointer;
  492. align-items: center;
  493. font-size: 12px;
  494. img {
  495. width: 25px;
  496. height: 25px;
  497. margin-top: 6px;
  498. }
  499. }
  500. &:hover {
  501. background: #e1f2ff;
  502. border-radius: 8px;
  503. opacity: 0.89;
  504. color: #0091ff;
  505. }
  506. .tooltip {
  507. position: absolute;
  508. left: 90px;
  509. top: 0;
  510. }
  511. }
  512. }
  513. .bottom-item {
  514. position: absolute;
  515. font-size: 18px;
  516. width: 100%;
  517. bottom: 12px;
  518. height: 54px;
  519. left: 0;
  520. display: flex;
  521. align-items: center;
  522. justify-content: center;
  523. flex-direction: column;
  524. cursor: pointer;
  525. span {
  526. font-size: 12px;
  527. }
  528. &:hover {
  529. background: #e1f2ff;
  530. border-radius: 8px;
  531. opacity: 0.89;
  532. color: #0091ff;
  533. height: 54px;
  534. }
  535. }
  536. .actives {
  537. background: #e1f2ff;
  538. border-radius: 8px;
  539. opacity: 0.89;
  540. color: #0091ff;
  541. }
  542. .fade-enter,
  543. .fade-leave-to {
  544. transition: all 0.3s ease;
  545. }
  546. .drawer-model {
  547. position: absolute;
  548. left: 70px;
  549. top: 0;
  550. overflow: hidden;
  551. width: 100%;
  552. height: 100%;
  553. .drawer-model-body {
  554. width: 100%;
  555. .btn-list {
  556. margin: 0 auto;
  557. }
  558. .list {
  559. .title {
  560. font-size: 18px;
  561. border-left: 4px solid #0091ff;
  562. margin-top: 20px;
  563. }
  564. .example {
  565. width: 100%;
  566. display: flex;
  567. flex-wrap: wrap;
  568. li {
  569. width: 66px;
  570. height: 60px;
  571. display: flex;
  572. justify-content: center;
  573. flex-direction: column;
  574. cursor: pointer;
  575. &:hover {
  576. background: #e1f2ff;
  577. }
  578. .item {
  579. width: 54px;
  580. height: 32px;
  581. margin: 0 auto;
  582. }
  583. .item-Image {
  584. width: 28px;
  585. height: 28px;
  586. margin: 0 auto;
  587. }
  588. .item-Line {
  589. width: 40px;
  590. height: 30px;
  591. margin: 0 auto;
  592. }
  593. .item-pip {
  594. width: 28px;
  595. height: 16px;
  596. border: #0091ff solid 1px;
  597. margin: 0 auto;
  598. background: #fff;
  599. }
  600. .text {
  601. font-size: 12px;
  602. margin: 0 auto;
  603. }
  604. }
  605. .active-li {
  606. background: #e1f2ff;
  607. }
  608. }
  609. }
  610. }
  611. .drawer-model-body-extract {
  612. padding: 0;
  613. position: absolute;
  614. left: 0;
  615. right: 0;
  616. .ant-table-small {
  617. border: none !important;
  618. }
  619. <<<<<<< HEAD
  620. =======
  621. }
  622. .active-li {
  623. background: #e1f2ff;
  624. }
  625. >>>>>>> 4409220714b34bc8a4ee05f63e1ff80af76a9f55
  626. }
  627. }
  628. .border-top {
  629. border-top: 1px solid #c3c7cb;
  630. }
  631. <<<<<<< HEAD
  632. =======
  633. }
  634. .border-top {
  635. /*border-top: 1px solid #c3c7cb;*/
  636. }
  637. .border-line{
  638. width: 48px;
  639. height: 2px;
  640. background: #C3C7CB ;
  641. margin: 0 auto;
  642. }
  643. >>>>>>> 4409220714b34bc8a4ee05f63e1ff80af76a9f55
  644. }
  645. </style>