left_toolbar.vue 15 KB

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