SignalList.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <draggable
  3. :style="{
  4. left:signalBorder[0].Left*Scale+'px',
  5. top:signalBorder[0].Top*Scale+'px',
  6. width:signalBorder[0].Width*Scale + 'px',
  7. height:signalBorder[0].Height*Scale + 'px',
  8. zIndex:signalBorder[0].ZIndex,
  9. display:signalBorder[0].IsVisibility ? 'block' : 'none',
  10. fontSize:signalBorder[0].FontSize*Scale + 'px',
  11. color:`#${signalBorder[0].ForegroundStr.slice(3)}`,
  12. position:'absolute',
  13. overflow:'auto',
  14. }"
  15. class="signal_body"
  16. element="div"
  17. v-model="signalListJson"
  18. :options="dragOptions1"
  19. :move="onMove"
  20. @start="isDragging=true"
  21. @end="isDragging=false"
  22. >
  23. <!--列表项-->
  24. <div class="signal_item" v-for="item in signalListJson" :key="item.ID">
  25. <div class="signal_item_bg">
  26. <div class="signal_item_bg_body">
  27. <div class="signal_item_bg_body_space"></div>
  28. <div class="signal_item_bg_body_font">{{item.showName}}</div>
  29. </div>
  30. </div>
  31. </div>
  32. </draggable>
  33. </template>
  34. <script>
  35. import {mapState} from 'vuex'
  36. import draggable from 'vuedraggable'
  37. export default {
  38. components: {
  39. draggable
  40. },
  41. methods: {
  42. // 移动信号源
  43. onMove({relatedContext, draggedContext}) {
  44. const relatedElement = relatedContext.element
  45. const draggedElement = draggedContext.element
  46. return (
  47. (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
  48. )
  49. },
  50. },
  51. computed: {
  52. ...mapState(['signalListJson','signalBorder','Scale']),
  53. dragOptions1() {
  54. return {
  55. animation: 0,
  56. group: {
  57. name: "description",
  58. pull: 'clone',
  59. put: false
  60. },
  61. ghostClass: "ghost",
  62. }
  63. },
  64. dragOptions2() {
  65. return {
  66. animation: 0,
  67. group: "description",
  68. }
  69. },
  70. }
  71. }
  72. </script>
  73. <style scoped>
  74. </style>