left_toolbar.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526
  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-show="activeItem ==1 || activeItem ==2">
  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-show="activeItem ==1">
  86. <div class="title">消防系统</div>
  87. <ul class="example">
  88. <li @click="getexampleItem">
  89. <div class="item"></div>
  90. <div class="text">防火风区</div>
  91. </li>
  92. </ul>
  93. </div>
  94. <div class="list" v-show="activeItem ==2">
  95. <div class="title">消防系统</div>
  96. <ul class="example">
  97. <li @click="getexampleItem">
  98. <div class="item-pip"></div>
  99. <div class="text">防火风区</div>
  100. </li>
  101. </ul>
  102. </div>
  103. </div>
  104. <div class="drawer-model-body drawer-model-body-extract" v-show="activeItem ==3">
  105. <a-table :columns="columns" :data-source="data" size="small" :pagination="false" />
  106. </div>
  107. </a-drawer>
  108. </div>
  109. </transition>
  110. </div>
  111. </template>
  112. <script>
  113. import itemTree from "./leftbar_components/itemTree";
  114. import {queryByGroup} from "@/api/editer.js"
  115. import bus from "@/bus";
  116. const columns = [
  117. {
  118. title: "名称",
  119. dataIndex: "name"
  120. },
  121. {
  122. title: "图例",
  123. dataIndex: "age"
  124. },
  125. {
  126. title: "数量",
  127. dataIndex: "number"
  128. },
  129. {
  130. title: "操作",
  131. dataIndex: "address"
  132. }
  133. ];
  134. const data = [
  135. {
  136. key: "1",
  137. name: "电梯",
  138. age: 32,
  139. number: 123,
  140. address: "提取"
  141. },
  142. {
  143. key: "2",
  144. name: "防火风区",
  145. age: 42,
  146. number: 123,
  147. address: "提取"
  148. }
  149. ];
  150. export default {
  151. components: { itemTree },
  152. props: {
  153. cmd: {
  154. type: Number,
  155. default: 0,
  156. required: false
  157. }
  158. },
  159. data() {
  160. return {
  161. // 基础选择
  162. baseChoice: [
  163. {
  164. img: "t-select.png", //logo
  165. hoverImg: "t-select-hover.png", //hoverlogo
  166. isHover: true, //是否hover
  167. isChoice: true,
  168. name: "选择", //类型
  169. cmd: 0
  170. },
  171. {
  172. img: "t-line.png", //logo
  173. hoverImg: "t-line-hover.png", //hoverlogo
  174. isHover: false, //是否hover
  175. isChoice: false,
  176. name: "画线", //类型
  177. cmd: 1
  178. },
  179. {
  180. img: "t-text.png", //logo
  181. hoverImg: "t-text-hover.png", //hoverlogo
  182. isHover: false, //是否hover
  183. isChoice: false,
  184. name: "画文字", //类型
  185. cmd: 2
  186. },
  187. {
  188. img: "t-img.png", //logo
  189. hoverImg: "t-img-hover.png", //hoverlogo
  190. isHover: false, //是否hover
  191. isChoice: false,
  192. name: "画图片", //类型
  193. cmd: 3
  194. }
  195. ],
  196. // 系统选择
  197. systemChoice: [
  198. {
  199. img: "t-position.png", //logo
  200. hoverImg: "t-position-hover.png", //hoverlogo
  201. isHover: false, //是否hover
  202. isChoice: false,
  203. name: "位置区域" //类型
  204. },
  205. {
  206. img: "t-equipment.png", //logo
  207. hoverImg: "t-equipment-hover.png", //hoverlogo
  208. isHover: false, //是否hover
  209. isChoice: false,
  210. name: "设备设施" //类型
  211. },
  212. {
  213. img: "t-papeline.png", //logo
  214. hoverImg: "t-papeline-hover.png", //hoverlogo
  215. isHover: false, //是否hover
  216. isChoice: false,
  217. name: "管线桥架" //类型
  218. }
  219. ],
  220. visible: false,
  221. activeItem: 1,
  222. //提取
  223. extractChoice: [
  224. {
  225. img: "t-slices.png", //logo
  226. hoverImg: "t-slices-hover.png", //hoverlogo
  227. isHover: false, //是否hover
  228. name: "提取" //类型
  229. }
  230. ],
  231. data,
  232. columns
  233. };
  234. },
  235. methods: {
  236. // 触入
  237. mouseoverActive(item) {
  238. item.isHover = true;
  239. },
  240. mouseoutActive(item) {
  241. item.isHover = false;
  242. },
  243. toolActionClick(item) {
  244. this.visible = false;
  245. this.baseChoice.forEach(item => {
  246. item.isChoice = false;
  247. });
  248. this.systemChoice.forEach(a => {
  249. a.isChoice = false;
  250. });
  251. item.isChoice = true;
  252. this.$emit("setCmd", item.cmd);
  253. },
  254. showDrawer(item) {
  255. if (item.isChoice) {
  256. this.systemChoice.forEach(a => {
  257. a.isChoice = false;
  258. });
  259. this.visible = false;
  260. } else {
  261. this.systemChoice.forEach(a => {
  262. a.isChoice = false;
  263. });
  264. item.isChoice = true;
  265. if (this.visible) {
  266. this.visible = false;
  267. setTimeout(() => {
  268. if (item.name == "管线桥架") {
  269. this.activeItem = 2;
  270. } else {
  271. this.activeItem = 1;
  272. }
  273. this.visible = true;
  274. }, 300);
  275. } else {
  276. if (item.name == "管线桥架") {
  277. this.activeItem = 2;
  278. } else {
  279. this.activeItem = 1;
  280. }
  281. this.visible = true;
  282. }
  283. }
  284. },
  285. onClose() {
  286. this.visible = false;
  287. this.systemChoice.forEach(a => {
  288. a.isChoice = false;
  289. });
  290. },
  291. getexampleItem() {
  292. this.visible = false;
  293. let item = 5;
  294. if (this.activeItem == 1) {
  295. item = 4;
  296. } else {
  297. item = 5;
  298. }
  299. this.$emit("toolActionClick", item);
  300. },
  301. // 提取元素
  302. extractItem() {
  303. this.visible = !this.visible;
  304. this.activeItem = 3;
  305. bus.$emit("extractItem")
  306. },
  307. getBus(){
  308. bus.$on("exportItem", data => {
  309. this.data = data;
  310. })
  311. }
  312. },
  313. watch: {
  314. cmd(cmd) {
  315. this.baseChoice.forEach(item => {
  316. item.isChoice = false;
  317. if (item.cmd == cmd) {
  318. item.isChoice = true;
  319. }
  320. });
  321. }
  322. },
  323. mounted() {
  324. const ele = document.getElementById("drawer-model");
  325. ele.style.width = document.body.offsetWidth - 70 + "px";
  326. this.getBus();
  327. }
  328. };
  329. </script>
  330. <style lang="less">
  331. #left_toolbar {
  332. min-width: 68px;
  333. height: 100%;
  334. background: rgba(255, 255, 255, 1);
  335. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  336. padding: 0 0 12px 0;
  337. box-sizing: border-box;
  338. position: relative;
  339. ul,
  340. li {
  341. padding: 0;
  342. margin: 0;
  343. list-style: none;
  344. }
  345. .list-1 {
  346. padding-top: 1px;
  347. box-sizing: border-box;
  348. border-bottom: 1px solid #c3c7cb;
  349. li {
  350. width: 64px;
  351. min-height: 42px;
  352. margin: 6px auto;
  353. display: flex;
  354. align-items: center;
  355. justify-content: center;
  356. position: relative;
  357. .item {
  358. margin: 0 auto;
  359. display: flex;
  360. flex-direction: column;
  361. position: relative;
  362. cursor: pointer;
  363. font-size: 12px;
  364. img {
  365. width: 25px;
  366. height: 25px;
  367. }
  368. }
  369. &:hover {
  370. background: #e1f2ff;
  371. border-radius: 8px;
  372. opacity: 0.89;
  373. color: #fff;
  374. }
  375. .tooltip {
  376. position: absolute;
  377. left: 90px;
  378. top: 0;
  379. }
  380. }
  381. }
  382. .list-2 {
  383. padding-top: 1px;
  384. box-sizing: border-box;
  385. li {
  386. width: 64px;
  387. min-height: 42px;
  388. margin: 6px auto;
  389. display: flex;
  390. align-items: center;
  391. justify-content: center;
  392. position: relative;
  393. .item {
  394. margin: 0 auto;
  395. height: 54px;
  396. display: flex;
  397. flex-direction: column;
  398. position: relative;
  399. cursor: pointer;
  400. align-items: center;
  401. font-size: 12px;
  402. img {
  403. width: 25px;
  404. height: 25px;
  405. margin-top: 6px;
  406. }
  407. }
  408. &:hover {
  409. background: #e1f2ff;
  410. border-radius: 8px;
  411. opacity: 0.89;
  412. color: #0091ff;
  413. }
  414. .tooltip {
  415. position: absolute;
  416. left: 90px;
  417. top: 0;
  418. }
  419. }
  420. }
  421. .bottom-item {
  422. position: absolute;
  423. font-size: 18px;
  424. width: 100%;
  425. bottom: 12px;
  426. height: 54px;
  427. left: 0;
  428. display: flex;
  429. align-items: center;
  430. justify-content: center;
  431. flex-direction: column;
  432. cursor: pointer;
  433. span {
  434. font-size: 12px;
  435. }
  436. &:hover {
  437. background: #e1f2ff;
  438. border-radius: 8px;
  439. opacity: 0.89;
  440. color: #0091ff;
  441. height: 54px;
  442. }
  443. }
  444. .actives {
  445. background: #e1f2ff;
  446. border-radius: 8px;
  447. opacity: 0.89;
  448. color: #0091ff;
  449. }
  450. .fade-enter,
  451. .fade-leave-to {
  452. transition: all 0.3s ease;
  453. }
  454. .drawer-model {
  455. position: absolute;
  456. left: 70px;
  457. top: 0;
  458. overflow: hidden;
  459. width: 100%;
  460. height: 100%;
  461. .drawer-model-body {
  462. width: 100%;
  463. .btn-list {
  464. margin: 0 auto;
  465. }
  466. .list {
  467. .title {
  468. font-size: 18px;
  469. border-left: 4px solid #0091ff;
  470. margin-top: 20px;
  471. }
  472. .example {
  473. width: 100%;
  474. display: flex;
  475. li {
  476. width: 72px;
  477. height: 60px;
  478. display: flex;
  479. justify-content: center;
  480. flex-direction: column;
  481. cursor: pointer;
  482. &:hover {
  483. background: #e1f2ff;
  484. }
  485. .item {
  486. width: 28px;
  487. height: 16px;
  488. background: #bbdfff;
  489. border: #0091ff solid 1px;
  490. margin: 0 auto;
  491. }
  492. .item-pip {
  493. width: 28px;
  494. height: 16px;
  495. border: #0091ff solid 1px;
  496. margin: 0 auto;
  497. background: #fff;
  498. }
  499. .text {
  500. font-size: 12px;
  501. margin: 0 auto;
  502. }
  503. }
  504. }
  505. }
  506. }
  507. .drawer-model-body-extract {
  508. padding: 0;
  509. position: absolute;
  510. left: 0;
  511. right: 0;
  512. .ant-table-small {
  513. border: none !important;
  514. }
  515. }
  516. }
  517. .border-top {
  518. border-top: 1px solid #c3c7cb;
  519. }
  520. }
  521. </style>