SignalList.vue 2.9 KB

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