left_toolbar.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  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(item)"
  90. v-for="(items,indexs) in item.GraphElements"
  91. :key="indexs"
  92. >
  93. <img
  94. class="item"
  95. src="http://192.168.200.87:8088/topology-wanda/Picture/query/5a011ab5b9fe465cbe35bbdb3fce6c86"
  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. };
  247. },
  248. computed: {
  249. ...mapState({
  250. GraphCategoryIds: "GraphCategoryIds"
  251. })
  252. },
  253. methods: {
  254. // 触入
  255. mouseoverActive(item) {
  256. item.isHover = true;
  257. },
  258. mouseoutActive(item) {
  259. item.isHover = false;
  260. },
  261. toolActionClick(item) {
  262. this.visible = false;
  263. this.baseChoice.forEach(item => {
  264. item.isChoice = false;
  265. });
  266. this.systemChoice.forEach(a => {
  267. a.isChoice = false;
  268. });
  269. item.isChoice = true;
  270. this.$emit("setCmdType", item.type);
  271. },
  272. showDrawer(item) {
  273. this.isExtract = false;
  274. if (item.isChoice) {
  275. this.systemChoice.forEach(a => {
  276. a.isChoice = false;
  277. });
  278. this.visible = false;
  279. } else {
  280. this.systemChoice.forEach(a => {
  281. a.isChoice = false;
  282. });
  283. item.isChoice = true;
  284. if (this.visible) {
  285. this.visible = false;
  286. setTimeout(() => {
  287. this.visible = true;
  288. }, 300);
  289. } else {
  290. this.visible = true;
  291. }
  292. // 打开侧边框
  293. // 接口请求
  294. const arr = {
  295. GraphCategoryIds: ["NTXT"],
  296. Type: item.type
  297. };
  298. queryGroup(arr).then(res => {
  299. this.itemList = res.Data;
  300. });
  301. }
  302. },
  303. onClose() {
  304. this.visible = false;
  305. this.systemChoice.forEach(a => {
  306. a.isChoice = false;
  307. });
  308. },
  309. getexampleItem(item) {
  310. this.visible = false;
  311. this.$emit("toolActionClick", item);
  312. },
  313. // 提取元素
  314. extractItem() {
  315. // 打开提取元素列表
  316. this.isExtract = true;
  317. this.visible = !this.visible;
  318. bus.$emit("extractItem");
  319. },
  320. getBus() {
  321. bus.$on("exportItem", data => {
  322. this.data = data;
  323. });
  324. },
  325. pickUp(text, record, index) {
  326. bus.$emit("exportByKey", record);
  327. }
  328. },
  329. watch: {
  330. cmdType(cmd) {
  331. this.baseChoice.forEach(item => {
  332. item.isChoice = false;
  333. if (item.cmd == cmd) {
  334. item.isChoice = true;
  335. }
  336. });
  337. }
  338. },
  339. mounted() {
  340. const ele = document.getElementById("drawer-model");
  341. ele.style.width = document.body.offsetWidth - 70 + "px";
  342. this.getBus();
  343. console.log(this.GraphCategoryIds);
  344. },
  345. created() {}
  346. };
  347. </script>
  348. <style lang="less">
  349. #left_toolbar {
  350. min-width: 68px;
  351. height: 100%;
  352. background: rgba(255, 255, 255, 1);
  353. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  354. padding: 0 0 12px 0;
  355. box-sizing: border-box;
  356. position: relative;
  357. ul,
  358. li {
  359. padding: 0;
  360. margin: 0;
  361. list-style: none;
  362. }
  363. .list-1 {
  364. padding-top: 1px;
  365. box-sizing: border-box;
  366. border-bottom: 1px solid #c3c7cb;
  367. li {
  368. width: 64px;
  369. min-height: 42px;
  370. margin: 6px auto;
  371. display: flex;
  372. align-items: center;
  373. justify-content: center;
  374. position: relative;
  375. .item {
  376. margin: 0 auto;
  377. display: flex;
  378. flex-direction: column;
  379. position: relative;
  380. cursor: pointer;
  381. font-size: 12px;
  382. img {
  383. width: 25px;
  384. height: 25px;
  385. }
  386. }
  387. &:hover {
  388. background: #e1f2ff;
  389. border-radius: 8px;
  390. opacity: 0.89;
  391. color: #fff;
  392. }
  393. .tooltip {
  394. position: absolute;
  395. left: 90px;
  396. top: 0;
  397. }
  398. }
  399. }
  400. .list-2 {
  401. padding-top: 1px;
  402. box-sizing: border-box;
  403. li {
  404. width: 64px;
  405. min-height: 42px;
  406. margin: 6px auto;
  407. display: flex;
  408. align-items: center;
  409. justify-content: center;
  410. position: relative;
  411. .item {
  412. margin: 0 auto;
  413. height: 54px;
  414. display: flex;
  415. flex-direction: column;
  416. position: relative;
  417. cursor: pointer;
  418. align-items: center;
  419. font-size: 12px;
  420. img {
  421. width: 25px;
  422. height: 25px;
  423. margin-top: 6px;
  424. }
  425. }
  426. &:hover {
  427. background: #e1f2ff;
  428. border-radius: 8px;
  429. opacity: 0.89;
  430. color: #0091ff;
  431. }
  432. .tooltip {
  433. position: absolute;
  434. left: 90px;
  435. top: 0;
  436. }
  437. }
  438. }
  439. .bottom-item {
  440. position: absolute;
  441. font-size: 18px;
  442. width: 100%;
  443. bottom: 12px;
  444. height: 54px;
  445. left: 0;
  446. display: flex;
  447. align-items: center;
  448. justify-content: center;
  449. flex-direction: column;
  450. cursor: pointer;
  451. span {
  452. font-size: 12px;
  453. }
  454. &:hover {
  455. background: #e1f2ff;
  456. border-radius: 8px;
  457. opacity: 0.89;
  458. color: #0091ff;
  459. height: 54px;
  460. }
  461. }
  462. .actives {
  463. background: #e1f2ff;
  464. border-radius: 8px;
  465. opacity: 0.89;
  466. color: #0091ff;
  467. }
  468. .fade-enter,
  469. .fade-leave-to {
  470. transition: all 0.3s ease;
  471. }
  472. .drawer-model {
  473. position: absolute;
  474. left: 70px;
  475. top: 0;
  476. overflow: hidden;
  477. width: 100%;
  478. height: 100%;
  479. .drawer-model-body {
  480. width: 100%;
  481. .btn-list {
  482. margin: 0 auto;
  483. }
  484. .list {
  485. .title {
  486. font-size: 18px;
  487. border-left: 4px solid #0091ff;
  488. margin-top: 20px;
  489. }
  490. .example {
  491. width: 100%;
  492. display: flex;
  493. li {
  494. width: 72px;
  495. height: 60px;
  496. display: flex;
  497. justify-content: center;
  498. flex-direction: column;
  499. cursor: pointer;
  500. &:hover {
  501. background: #e1f2ff;
  502. }
  503. .item {
  504. width: 54px;
  505. height: 32px;
  506. margin: 0 auto;
  507. }
  508. .item-pip {
  509. width: 28px;
  510. height: 16px;
  511. border: #0091ff solid 1px;
  512. margin: 0 auto;
  513. background: #fff;
  514. }
  515. .text {
  516. font-size: 12px;
  517. margin: 0 auto;
  518. }
  519. }
  520. }
  521. }
  522. }
  523. .drawer-model-body-extract {
  524. padding: 0;
  525. position: absolute;
  526. left: 0;
  527. right: 0;
  528. .ant-table-small {
  529. border: none !important;
  530. }
  531. }
  532. }
  533. .border-top {
  534. border-top: 1px solid #c3c7cb;
  535. }
  536. }
  537. </style>