left_toolbar.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  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. >
  50. <div class="item">
  51. <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
  52. <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
  53. <div>{{item.name}}</div>
  54. </div>
  55. </li>
  56. </ul>
  57. <div class="bottom-item">
  58. <a-icon type="ellipsis" />
  59. <span>选择原件</span>
  60. </div>
  61. <!-- 打开弹窗 -->
  62. <transition name="fade">
  63. <div class="drawer-model" id="drawer-model" v-show="visible">
  64. <a-drawer
  65. placement="left"
  66. :closable="false"
  67. :visible="visible"
  68. :wrap-style="{ position: 'absolute',}"
  69. @close="onClose"
  70. :getContainer="false"
  71. >
  72. <div class="drawer-model-body">
  73. <div class="btn-list">
  74. <a-button-group>
  75. <a-button type="primary">绘制</a-button>
  76. <a-button>点选</a-button>
  77. </a-button-group>
  78. </div>
  79. <div class="list" v-show="activeItem ==1">
  80. <div class="title">消防系统</div>
  81. <ul class="example">
  82. <li @click="getexampleItem">
  83. <div class="item"></div>
  84. <div class="text">防火风区</div>
  85. </li>
  86. </ul>
  87. </div>
  88. <div class="list" v-show="activeItem ==2">
  89. <div class="title">消防系统</div>
  90. <ul class="example">
  91. <li @click="getexampleItem">
  92. <div class="item-pip"></div>
  93. <div class="text">防火风区</div>
  94. </li>
  95. </ul>
  96. </div>
  97. </div>
  98. </a-drawer>
  99. </div>
  100. </transition>
  101. </div>
  102. </template>
  103. <script>
  104. export default {
  105. props: {
  106. cmd: {
  107. type: Number,
  108. default: 0,
  109. required: false
  110. }
  111. },
  112. data() {
  113. return {
  114. // 基础选择
  115. baseChoice: [
  116. {
  117. img: "t-select.png", //logo
  118. hoverImg: "t-select-hover.png", //hoverlogo
  119. isHover: true, //是否hover
  120. isChoice: true,
  121. name: "选择", //类型
  122. cmd: 0
  123. },
  124. {
  125. img: "t-line.png", //logo
  126. hoverImg: "t-line-hover.png", //hoverlogo
  127. isHover: false, //是否hover
  128. isChoice: false,
  129. name: "画线", //类型
  130. cmd: 1
  131. },
  132. {
  133. img: "t-text.png", //logo
  134. hoverImg: "t-text-hover.png", //hoverlogo
  135. isHover: false, //是否hover
  136. isChoice: false,
  137. name: "画文字", //类型
  138. cmd: 2
  139. },
  140. {
  141. img: "t-img.png", //logo
  142. hoverImg: "t-img-hover.png", //hoverlogo
  143. isHover: false, //是否hover
  144. isChoice: false,
  145. name: "画图片", //类型
  146. cmd: 3
  147. }
  148. ],
  149. // 系统选择
  150. systemChoice: [
  151. {
  152. img: "t-position.png", //logo
  153. hoverImg: "t-position-hover.png", //hoverlogo
  154. isHover: false, //是否hover
  155. isChoice: false,
  156. name: "位置区域" //类型
  157. },
  158. {
  159. img: "t-equipment.png", //logo
  160. hoverImg: "t-equipment-hover.png", //hoverlogo
  161. isHover: false, //是否hover
  162. isChoice: false,
  163. name: "设备设施" //类型
  164. },
  165. {
  166. img: "t-papeline.png", //logo
  167. hoverImg: "t-papeline-hover.png", //hoverlogo
  168. isHover: false, //是否hover
  169. isChoice: false,
  170. name: "管线桥架" //类型
  171. }
  172. ],
  173. visible: false,
  174. activeItem: 1,
  175. //提取
  176. extractChoice: [
  177. {
  178. img: "t-slices.png", //logo
  179. hoverImg: "t-slices-hover.png", //hoverlogo
  180. isHover: false, //是否hover
  181. name: "提取" //类型
  182. }
  183. ]
  184. };
  185. },
  186. methods: {
  187. // 触入
  188. mouseoverActive(item) {
  189. item.isHover = true;
  190. },
  191. mouseoutActive(item) {
  192. item.isHover = false;
  193. },
  194. toolActionClick(item) {
  195. this.visible = false;
  196. this.baseChoice.forEach(item => {
  197. item.isChoice = false;
  198. });
  199. this.systemChoice.forEach(a => {
  200. a.isChoice = false;
  201. });
  202. item.isChoice = true;
  203. this.$emit("setCmd", item.cmd);
  204. },
  205. showDrawer(item) {
  206. if (item.isChoice) {
  207. this.systemChoice.forEach(a => {
  208. a.isChoice = false;
  209. });
  210. this.visible = false;
  211. } else {
  212. this.systemChoice.forEach(a => {
  213. a.isChoice = false;
  214. });
  215. item.isChoice = true;
  216. if (this.visible) {
  217. this.visible = false;
  218. setTimeout(() => {
  219. if (item.name == "管线桥架") {
  220. this.activeItem = 2;
  221. } else {
  222. this.activeItem = 1;
  223. }
  224. this.visible = true;
  225. }, 300);
  226. } else {
  227. if (item.name == "管线桥架") {
  228. this.activeItem = 2;
  229. } else {
  230. this.activeItem = 1;
  231. }
  232. this.visible = true;
  233. }
  234. }
  235. },
  236. onClose() {
  237. this.visible = false;
  238. this.systemChoice.forEach(a => {
  239. a.isChoice = false;
  240. });
  241. },
  242. getexampleItem() {
  243. this.visible = false;
  244. let item =5
  245. if (this.activeItem == 1) {
  246. item =4
  247. } else {
  248. item = 5
  249. }
  250. this.$emit("toolActionClick", item);
  251. }
  252. },
  253. watch: {
  254. cmd(cmd) {
  255. this.baseChoice.forEach(item => {
  256. item.isChoice = false;
  257. if (item.cmd == cmd) {
  258. item.isChoice = true;
  259. }
  260. });
  261. }
  262. },
  263. mounted() {
  264. const ele = document.getElementById("drawer-model");
  265. ele.style.width = document.body.offsetWidth - 70 + "px";
  266. }
  267. };
  268. </script>
  269. <style lang="less">
  270. #left_toolbar {
  271. min-width: 68px;
  272. height: 100%;
  273. background: rgba(255, 255, 255, 1);
  274. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
  275. padding: 0 0 12px 0;
  276. box-sizing: border-box;
  277. position: relative;
  278. ul,
  279. li {
  280. padding: 0;
  281. margin: 0;
  282. list-style: none;
  283. }
  284. .list-1 {
  285. padding-top: 1px;
  286. box-sizing: border-box;
  287. border-bottom: 1px solid #c3c7cb;
  288. li {
  289. width: 64px;
  290. min-height: 42px;
  291. margin: 6px auto;
  292. display: flex;
  293. align-items: center;
  294. justify-content: center;
  295. position: relative;
  296. .item {
  297. margin: 0 auto;
  298. display: flex;
  299. flex-direction: column;
  300. position: relative;
  301. cursor: pointer;
  302. font-size: 12px;
  303. img {
  304. width: 25px;
  305. height: 25px;
  306. }
  307. }
  308. &:hover {
  309. background: #e1f2ff;
  310. border-radius: 8px;
  311. opacity: 0.89;
  312. color: #fff;
  313. }
  314. .tooltip {
  315. position: absolute;
  316. left: 90px;
  317. top: 0;
  318. }
  319. }
  320. }
  321. .list-2 {
  322. padding-top: 1px;
  323. box-sizing: border-box;
  324. li {
  325. width: 64px;
  326. min-height: 42px;
  327. margin: 6px auto;
  328. display: flex;
  329. align-items: center;
  330. justify-content: center;
  331. position: relative;
  332. .item {
  333. margin: 0 auto;
  334. height: 54px;
  335. display: flex;
  336. flex-direction: column;
  337. position: relative;
  338. cursor: pointer;
  339. align-items: center;
  340. font-size: 12px;
  341. img {
  342. width: 25px;
  343. height: 25px;
  344. margin-top: 6px;
  345. }
  346. }
  347. &:hover {
  348. background: #e1f2ff;
  349. border-radius: 8px;
  350. opacity: 0.89;
  351. color: #0091ff;
  352. }
  353. .tooltip {
  354. position: absolute;
  355. left: 90px;
  356. top: 0;
  357. }
  358. }
  359. }
  360. .bottom-item {
  361. position: absolute;
  362. font-size: 18px;
  363. width: 100%;
  364. bottom: 12px;
  365. height: 54px;
  366. left: 0;
  367. display: flex;
  368. align-items: center;
  369. justify-content: center;
  370. flex-direction: column;
  371. cursor: pointer;
  372. span {
  373. font-size: 12px;
  374. }
  375. &:hover {
  376. background: #e1f2ff;
  377. border-radius: 8px;
  378. opacity: 0.89;
  379. color: #0091ff;
  380. height: 54px;
  381. }
  382. }
  383. .actives {
  384. background: #e1f2ff;
  385. border-radius: 8px;
  386. opacity: 0.89;
  387. color: #0091ff;
  388. }
  389. .fade-enter,
  390. .fade-leave-to {
  391. transition: all 0.3s ease;
  392. }
  393. .drawer-model {
  394. position: absolute;
  395. left: 70px;
  396. top: 0;
  397. overflow: hidden;
  398. width: 100%;
  399. height: 100%;
  400. .drawer-model-body {
  401. width: 100%;
  402. .btn-list {
  403. margin: 0 auto;
  404. }
  405. .list {
  406. .title {
  407. font-size: 18px;
  408. border-left: 4px solid #0091ff;
  409. margin-top: 20px;
  410. }
  411. .example {
  412. width: 100%;
  413. display: flex;
  414. li {
  415. width: 72px;
  416. height: 60px;
  417. display: flex;
  418. justify-content: center;
  419. flex-direction: column;
  420. cursor: pointer;
  421. &:hover {
  422. background: #e1f2ff;
  423. }
  424. .item {
  425. width: 28px;
  426. height: 16px;
  427. background: #bbdfff;
  428. border: #0091ff solid 1px;
  429. margin: 0 auto;
  430. }
  431. .item-pip {
  432. width: 28px;
  433. height: 16px;
  434. border: #0091ff solid 1px;
  435. margin: 0 auto;
  436. background: #fff;
  437. }
  438. .text {
  439. font-size: 12px;
  440. margin: 0 auto;
  441. }
  442. }
  443. }
  444. }
  445. }
  446. }
  447. .border-top {
  448. border-top: 1px solid #c3c7cb;
  449. }
  450. }
  451. </style>