leftAssembly.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. <template>
  2. <div class="leftAssembly">
  3. <el-select
  4. v-model="componentsValue"
  5. @change="changeSelect"
  6. class="saveColumn-select"
  7. >
  8. <el-option
  9. v-for="(item, index) in componentsSelect"
  10. :key="index"
  11. :label="item.lable"
  12. :value="item.model_id"
  13. ></el-option>
  14. </el-select>
  15. <div class="componentsBlock">
  16. <div
  17. class="moveBlock"
  18. :data-id="item.data_id"
  19. v-for="(item, index) in putCompArr"
  20. :key="index"
  21. draggable
  22. @dragstart="dragstart($event, item)"
  23. @dragend="dragend($event)"
  24. @drag="drag($event)"
  25. >
  26. <div class="moveBlock_titles">{{ item.title }}</div>
  27. <div class="moveBlock_img">
  28. <img
  29. :src="item.imgPng"
  30. :alt="item.title"
  31. />
  32. </div>
  33. <div class="moveBlock_icon">
  34. <img
  35. :src="item.imgIcon"
  36. :alt="item.title"
  37. />
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </template>
  43. <script>
  44. export default {
  45. data () {
  46. return {
  47. componentsSelect: [
  48. {
  49. model_id: 0,
  50. lable: '全部'
  51. },
  52. {
  53. model_id: 1,
  54. lable: '房产管理'
  55. },
  56. {
  57. model_id: 2,
  58. lable: '住户管理'
  59. },
  60. {
  61. model_id: 3,
  62. lable: '收费管理'
  63. },
  64. {
  65. model_id: 4,
  66. lable: '设备管理'
  67. },
  68. {
  69. model_id: 5,
  70. lable: '告警管理'
  71. },
  72. {
  73. model_id: 6,
  74. lable: '运维工单'
  75. },
  76. {
  77. model_id: 7,
  78. lable: '设备巡检'
  79. },
  80. {
  81. model_id: 8,
  82. lable: '安保巡更'
  83. },
  84. {
  85. model_id: 9,
  86. lable: '客服服务'
  87. },
  88. {
  89. model_id: 10,
  90. lable: '商业管理'
  91. },
  92. {
  93. model_id: 11,
  94. lable: '社区运营'
  95. },
  96. {
  97. model_id: 12,
  98. lable: '绩效管理'
  99. },
  100. {
  101. model_id: 13,
  102. lable: '流程管理'
  103. }
  104. ],
  105. componentsArrar: [
  106. {
  107. data_id: 1,
  108. title: '高德地图',
  109. type: 0,
  110. imgPng: require('@assets/img/formulation/img_ditu@2x.png'),
  111. imgIcon: require('@assets/img/formulation/tag_4x@2x.png'),
  112. isPosition: '2x2',
  113. compatible: true
  114. },
  115. {
  116. data_id: 2,
  117. type: 9,
  118. title: '投诉建议',
  119. imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
  120. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  121. isPosition: '1x1',
  122. compatible: true
  123. },
  124. {
  125. data_id: 3,
  126. type: 0,
  127. title: '常用功能',
  128. imgPng: require('@assets/img/formulation/img_changyonggongneng@2x.png'),
  129. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  130. isPosition: '1x1',
  131. compatible: false
  132. },
  133. {
  134. data_id: 4,
  135. title: '服务满意度趋势',
  136. type: 9,
  137. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  138. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  139. isPosition: '2x1',
  140. compatible: true
  141. },
  142. {
  143. data_id: 5,
  144. title: '设备告警趋势',
  145. type: 5,
  146. imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
  147. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  148. isPosition: '1x1',
  149. compatible: true
  150. },
  151. {
  152. data_id: 6,
  153. title: '房屋租售率',
  154. type: 10,
  155. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  156. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  157. isPosition: '1x1',
  158. compatible: true
  159. },
  160. {
  161. data_id: 7,
  162. title: '收款率分析',
  163. type: 3,
  164. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  165. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  166. isPosition: '1x1',
  167. compatible: true
  168. },
  169. {
  170. data_id: 8,
  171. title: '住户性别占比',
  172. type: 2,
  173. imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
  174. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  175. isPosition: '1x1',
  176. compatible: true
  177. },
  178. {
  179. data_id: 9,
  180. title: '住户身份占比',
  181. type: 2,
  182. imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
  183. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  184. isPosition: '1x1',
  185. compatible: true
  186. },
  187. {
  188. data_id: 10,
  189. title: '设备设施统计',
  190. type: 4,
  191. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  192. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  193. isPosition: '2x1',
  194. compatible: true
  195. },
  196. {
  197. data_id: 11,
  198. title: '业主审批',
  199. type: 2,
  200. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  201. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  202. isPosition: '2x1',
  203. compatible: false
  204. },
  205. {
  206. data_id: 12,
  207. title: '待处理投诉',
  208. type: 9,
  209. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  210. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  211. isPosition: '2x1',
  212. compatible: false
  213. },
  214. {
  215. data_id: 13,
  216. title: '投诉建议数量趋势',
  217. type: 9,
  218. imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
  219. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  220. isPosition: '2x1',
  221. compatible: true
  222. },
  223. {
  224. data_id: 14,
  225. title: '巡更人员任务执行时长',
  226. type: 8,
  227. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  228. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  229. isPosition: '2x1',
  230. compatible: true
  231. },
  232. {
  233. data_id: 15,
  234. title: '社区公告',
  235. type: 9,
  236. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  237. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  238. isPosition: '2x1',
  239. compatible: false
  240. },
  241. {
  242. data_id: 16,
  243. title: '运维人员评分',
  244. type: 12,
  245. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  246. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  247. isPosition: '2x1',
  248. compatible: true
  249. },
  250. {
  251. data_id: 17,
  252. title: '待收款账单',
  253. type: 3,
  254. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  255. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  256. isPosition: '2x1',
  257. compatible: false
  258. },
  259. {
  260. data_id: 18,
  261. title: '合同签约',
  262. type: 10,
  263. imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
  264. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  265. isPosition: '2x1',
  266. compatible: true
  267. },
  268. {
  269. data_id: 19,
  270. title: '待分派工单',
  271. type: 6,
  272. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  273. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  274. isPosition: '2x1',
  275. compatible: false
  276. },
  277. {
  278. data_id: 20,
  279. title: '巡检任务类型分布',
  280. type: 7,
  281. imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
  282. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  283. isPosition: '1x1',
  284. compatible: true
  285. },
  286. {
  287. data_id: 21,
  288. title: '设备告警信息',
  289. type: 5,
  290. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  291. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  292. isPosition: '2x1',
  293. compatible: false
  294. },
  295. {
  296. data_id: 22,
  297. title: '社区总体情况统计',
  298. type: 1,
  299. imgPng: require('@assets/img/formulation/img_liebiao@2x.png'),
  300. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  301. isPosition: '2x1',
  302. compatible: false
  303. },
  304. {
  305. data_id: 23,
  306. title: '本月房屋点击排名前十',
  307. type: 1,
  308. imgPng: require('@assets/img/formulation/img_tongji@2x.png'),
  309. imgIcon: require('@assets/img/formulation/tag_4x@2x.png'),
  310. isPosition: '2x2',
  311. compatible: false
  312. },
  313. {
  314. data_id: 24,
  315. title: '巡更人员任务执行情况',
  316. type: 8,
  317. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  318. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  319. isPosition: '2x1',
  320. compatible: true
  321. },
  322. {
  323. data_id: 25,
  324. title: '巡更任务完成率',
  325. type: 8,
  326. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  327. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  328. isPosition: '1x1',
  329. compatible: true
  330. },
  331. {
  332. data_id: 26,
  333. title: '巡更任务分布',
  334. type: 8,
  335. imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
  336. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  337. isPosition: '2x1',
  338. compatible: true
  339. },
  340. {
  341. data_id: 27,
  342. title: '运维人员任务执行情况',
  343. type: 6,
  344. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  345. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  346. isPosition: '2x1',
  347. compatible: true
  348. },
  349. {
  350. data_id: 28,
  351. title: '运维工单完成率',
  352. type: 6,
  353. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  354. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  355. isPosition: '1x1',
  356. compatible: true
  357. },
  358. {
  359. data_id: 29,
  360. title: '运维工单分类',
  361. type: 6,
  362. imgPng: require('@assets/img/formulation/img_bingzhuangtu@2x.png'),
  363. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  364. isPosition: '1x1',
  365. compatible: true
  366. },
  367. {
  368. data_id: 30,
  369. title: '巡检人员任务执行情况',
  370. type: 7,
  371. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  372. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  373. isPosition: '2x1',
  374. compatible: true
  375. },
  376. {
  377. data_id: 31,
  378. title: '巡检人员任务执行情况',
  379. type: 7,
  380. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  381. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  382. isPosition: '1x1',
  383. compatible: true
  384. },
  385. {
  386. data_id: 32,
  387. title: '收入方式占比',
  388. type: 3,
  389. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  390. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  391. isPosition: '1x1',
  392. compatible: true
  393. },
  394. {
  395. data_id: 33,
  396. title: '实收分析',
  397. type: 3,
  398. imgPng: require('@assets/img/formulation/img_zhexiantu@2x.png'),
  399. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  400. isPosition: '2x1',
  401. compatible: true
  402. },
  403. {
  404. data_id: 34,
  405. title: '住户年龄分布',
  406. type: 2,
  407. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  408. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  409. isPosition: '2x1',
  410. compatible: true
  411. }, {
  412. data_id: 35,
  413. title: '销售漏斗',
  414. type: 10,
  415. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  416. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  417. isPosition: '1x1',
  418. compatible: true
  419. },
  420. {
  421. data_id: 36,
  422. title: '商机来源',
  423. type: 10,
  424. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  425. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  426. isPosition: '1x1',
  427. compatible: true
  428. },
  429. {
  430. data_id: 37,
  431. title: '商铺租售情况',
  432. type: 10,
  433. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  434. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  435. isPosition: '1x1',
  436. compatible: true
  437. },
  438. {
  439. data_id: 38,
  440. title: '企业类型分布',
  441. type: 10,
  442. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  443. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  444. isPosition: '1x1',
  445. compatible: true
  446. },
  447. {
  448. data_id: 39,
  449. title: '人员销售任务分析',
  450. type: 10,
  451. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  452. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  453. isPosition: '1x1',
  454. compatible: true
  455. }, {
  456. data_id: 40,
  457. title: '投诉建议类型分布',
  458. type: 6,
  459. imgPng: require('@assets/img/formulation/img_bing+baifenbi@2x.png'),
  460. imgIcon: require('@assets/img/formulation/tag_1x@2x.png'),
  461. isPosition: '1x1',
  462. compatible: true
  463. },
  464. {
  465. data_id: 41,
  466. title: '运维人员评分系统',
  467. type: 6,
  468. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  469. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  470. isPosition: '1x1',
  471. compatible: true
  472. },
  473. {
  474. data_id: 42,
  475. title: '巡更问题数量分析',
  476. type: 8,
  477. imgPng: require('@assets/img/formulation/img_zhuzhuangtu@2x.png'),
  478. imgIcon: require('@assets/img/formulation/tag_2x@2x.png'),
  479. isPosition: '1x1',
  480. compatible: true
  481. },
  482. ],
  483. componentsValue: 0
  484. };
  485. },
  486. computed: {
  487. putCompArr () {
  488. let newArr = [];
  489. if (this.componentsValue == 0) {
  490. return this.componentsArrar;
  491. } else {
  492. this.componentsArrar.map((item) => {
  493. if (this.componentsValue == item.type) {
  494. newArr.push(item);
  495. }
  496. });
  497. }
  498. return newArr;
  499. }
  500. },
  501. watch: {},
  502. methods: {
  503. dragstart (e, item) {
  504. //拖拽开始时将item存入vuex
  505. this.$store.commit('setDragItem', item);
  506. },
  507. drag (e) {
  508. //拖拽中执行的事件
  509. // console.log('drag',e)s
  510. },
  511. dragend (e) {
  512. //拖拽结束执行的事件
  513. // console.log('dragend', e);
  514. }
  515. },
  516. destroyed () { },
  517. created () { }
  518. };
  519. </script>
  520. <style lang="scss" scoped>
  521. @import '@assets/css/public-style.scss';
  522. $BackColor: #171f32;
  523. .leftAssembly {
  524. width: 174px;
  525. background: $BackColor;
  526. border-radius: 4px;
  527. padding: rem(20) rem(8) rem(20) rem(20);
  528. .saveColumn-select {
  529. margin-bottom: rem(30);
  530. margin-right: rem(12);
  531. /deep/ .el-input__inner {
  532. background: transparent;
  533. color: white;
  534. border-color: rgba(255, 255, 255, 0.2);
  535. }
  536. }
  537. // 块级模块
  538. .componentsBlock {
  539. height: calc(100% - #{rem(62)});
  540. overflow-y: auto;
  541. overflow-x: hidden;
  542. &::-webkit-scrollbar {
  543. z-index: 11;
  544. width: rem(4);
  545. }
  546. &::-webkit-scrollbar-track,
  547. &::-webkit-scrollbar-corner {
  548. background: transparent;
  549. }
  550. &::-webkit-scrollbar-thumb {
  551. border-radius: 5px;
  552. width: rem(4);
  553. background: rgba(250, 250, 250, 0.09);
  554. }
  555. &::-webkit-scrollbar-track-piece {
  556. background: transparent;
  557. width: rem(4);
  558. }
  559. .moveBlock {
  560. font-size: 12px;
  561. width: rem(132);
  562. height: rem(132);
  563. background: rgba(0, 0, 0, 0.1);
  564. box-sizing: border-box;
  565. border-radius: 4px;
  566. border: 1px solid rgba(255, 255, 255, 0.2);
  567. padding: rem(10);
  568. margin-bottom: rem(20);
  569. text-align: center;
  570. position: relative;
  571. cursor: move;
  572. .moveBlock_titles {
  573. overflow: hidden;
  574. white-space: nowrap;
  575. text-overflow: ellipsis;
  576. width: 100%;
  577. }
  578. .moveBlock_img {
  579. width: rem(60);
  580. margin: auto;
  581. img {
  582. width: 100%;
  583. margin-top: rem(20);
  584. }
  585. }
  586. .moveBlock_icon {
  587. position: absolute;
  588. right: 0;
  589. bottom: 0;
  590. height: rem(20);
  591. img {
  592. width: rem(28);
  593. height: rem(20);
  594. }
  595. }
  596. }
  597. }
  598. }
  599. </style>