left_toolbar.vue 14 KB

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