1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <!--信号源列表组件-->
- <template>
- <draggable
- :style="{
- position:'absolute',
- left:signalBorder[0] ? signalBorder[0].Left*bigScale+'px' : '',
- top:signalBorder[0] ? signalBorder[0].Top*bigScale+'px' : '',
- width:signalBorder[0] ? signalBorder[0].Width*bigScale + 'px' : '',
- height:signalBorder[0] ? signalBorder[0].Height*bigScale + 'px' : '',
- zIndex:signalBorder[0] ? signalBorder[0].ZIndex : '',
- display:signalBorder[0] ? (signalBorder[0].IsVisibility ? 'block' : 'none') : '',
- fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
- color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
- }"
- class="signal_body"
- element="div"
- v-model="signalListJson"
- :options="dragOptions1"
- :move="onMove"
- >
- <!--列表项-->
- <div class="signal_item" v-for="item in signalListJson" :key="item.ID">
- <div class="signal_item_bg">
- <div class="signal_item_bg_body">
- <div class="signal_item_bg_body_space"></div>
- <div class="signal_item_bg_body_font">{{item.deviceID}}</div>
- </div>
- </div>
- </div>
- </draggable>
- </template>
- <script>
- import {mapState} from 'vuex'
- import draggable from 'vuedraggable'
- import {getStaticFile} from "../../utils/tools"
- export default {
- data() {
- return {
- signalBorder:[]
- }
- },
- components: {
- draggable
- },
- async beforeCreate() {
- this.signalBorder = await getStaticFile('EnitySignalPreviewList.Data')
- },
- methods: {
- // 移动信号源
- onMove({relatedContext, draggedContext}) {
- const signalLength = this.$store.state.signalPreList.length
- this.$store.dispatch('updatePositionNum',relatedContext.index-signalLength)
- const relatedElement = relatedContext.element
- const draggedElement = draggedContext.element
- return (
- (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
- )
- }
- },
- computed: {
- ...mapState(['signalListJson','bigScale','signalPreList']),
- dragOptions1() {
- return {
- animation: 0,
- group: {
- name: "description",
- pull: 'clone',
- put: false
- },
- ghostClass: "ghost",
- }
- },
- dragOptions2() {
- return {
- animation: 0,
- group: "description",
- }
- },
- }
- }
- </script>
|