SignalList.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <!--信号源列表组件-->
  2. <template>
  3. <!--信号源容器-->
  4. <draggable
  5. :style="{
  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. fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
  12. color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
  13. flexDirection: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? 'column' : 'row') : '',
  14. }"
  15. class="signal_body"
  16. element="div"
  17. v-model="signalListJson"
  18. :options="dragOptions1"
  19. :move="onMove"
  20. id="signalContainer"
  21. >
  22. <!--信号源列表项-->
  23. <div
  24. class="signal_item"
  25. v-for="item in signalListJson"
  26. :key="item.ID"
  27. :style="{
  28. width: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? (signalBorder[0].Width*bigScale*0.9 + 'px') : '200px') : '',
  29. height: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? '132px' : signalBorder[0].Height*bigScale*0.8 + 'px') : '',
  30. }"
  31. >
  32. <div class="signal_item_bg">
  33. <div class="signal_item_bg_body">
  34. <div class="signal_item_bg_body_space"></div>
  35. <div class="signal_item_bg_body_font">{{item.deviceID}}</div>
  36. </div>
  37. </div>
  38. </div>
  39. </draggable>
  40. </template>
  41. <script>
  42. import {mapState} from 'vuex'
  43. import draggable from 'vuedraggable'
  44. import {getStaticFile} from "../../utils/tools"
  45. export default {
  46. data() {
  47. return {
  48. signalBorder:[]
  49. }
  50. },
  51. components: {
  52. draggable
  53. },
  54. async beforeCreate() {
  55. this.signalBorder = await getStaticFile('EnitySignalPreviewList.Data')
  56. },
  57. updated() {
  58. const flag = this.signalBorder[0] ? (this.signalBorder[0].Orientation === 0 ? 'column' : 'row') : ''
  59. if(flag === 'column'){
  60. document.getElementById('signalContainer').style.alignItems = 'center'
  61. }
  62. },
  63. methods: {
  64. // 移动信号源
  65. onMove({relatedContext, draggedContext}) {
  66. const signalLength = this.$store.state.signalPreList.length
  67. this.$store.dispatch('updatePositionNum',relatedContext.index-signalLength)
  68. const relatedElement = relatedContext.element
  69. const draggedElement = draggedContext.element
  70. return (
  71. (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
  72. )
  73. }
  74. },
  75. computed: {
  76. ...mapState(['signalListJson','bigScale','signalPreList']),
  77. dragOptions1() {
  78. return {
  79. animation: 0,
  80. group: {
  81. name: "description",
  82. pull: 'clone',
  83. put: false
  84. },
  85. sort:false,
  86. ghostClass: "ghost",
  87. }
  88. },
  89. dragOptions2() {
  90. return {
  91. animation: 0,
  92. group: "description",
  93. }
  94. },
  95. }
  96. }
  97. </script>