123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <!--信号源列表组件-->
- <template>
- <!--信号源容器-->
- <draggable
- :style="{
- 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 : '',
- fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
- color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
- flexDirection: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? 'column' : 'row') : '',
- }"
- class="signal_body"
- element="div"
- v-model="signalListJson"
- :options="dragOptions1"
- :move="onMove"
- id="signalContainer"
- >
- <!--信号源列表项-->
- <div
- class="signal_item"
- v-for="item in signalListJson"
- :key="item.ID"
- :style="{
- width: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? (signalBorder[0].Width*bigScale*0.9 + 'px') : '200px') : '',
- height: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? '132px' : signalBorder[0].Height*bigScale*0.8 + 'px') : '',
- }"
- >
- <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')
- },
- updated() {
- const flag = this.signalBorder[0] ? (this.signalBorder[0].Orientation === 0 ? 'column' : 'row') : ''
- if(flag === 'column'){
- document.getElementById('signalContainer').style.alignItems = 'center'
- }
- },
- 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
- },
- sort:false,
- ghostClass: "ghost",
- }
- },
- dragOptions2() {
- return {
- animation: 0,
- group: "description",
- }
- },
- }
- }
- </script>
|