update

gaosp

2024-03-10 7e98689ab81048d65bbbc4a9eb007ab1718ace78

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-03-08 09:11:52
 * @LastEditTime: 2024-03-10 21:13:23
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -20,14 +20,17 @@
                <span>名称:</span>
                <el-input style="width: 150px;" class="input" v-model="plantName" placeholder="请输入地图名称" />
                <el-button class="input" type="ghost" size="mini" @click="save">保存</el-button>
            <span class="tiptext" >放置设备的单元格至少为8行9列</span>
                <!-- <el-button class="input" size="mini" type="primary" v-show="status !== 2" @click="createMap">生成地图</el-button> -->
            </div>
            <div class="table" :class="$route.name === 'preview' ? 'active' : ''">
                <div class="table-actions" :style="position" v-show="showAction && status !== 2">
                <div class="table-actions" :style="position" v-show="showAction">
                    <div @click="merge">合并</div>
                    <div @click="split">拆分</div>
                    <div @click="addRow">增加行</div>
                    <div @click="addCol">增加列</div>
                    <div @click="delRow">删除行</div>
                    <div @click="delCol">删除列</div>
                    <div @click="sign(1)">过道</div>
                    <div @click="sign(2)">设备</div>
                    <div @click="sign(0)">移除</div>
@@ -43,7 +46,7 @@
                                <div class="td-div"
                                    :style="{ width: v.colspan * height - 2 + 'px', height: v.rowspan * height - 2 + 'px', overflow: 'hidden' }">
                                    <img @click="addDevice($event, v)" @mousedown="e => e.stopPropagation()"
                                        v-if="v.type === 2 && status !== 2 && !v.id" src="./img/+.png" alt="添加机床"
                                        v-if="v.type === 2 && !v.id" src="./img/+.png" alt="添加机床"
                                        title="添加机床">
                                    <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"
                                        :deviceList="deviceList" :plantDeviceList="plantDeviceList" ::info="info"></Device>
@@ -245,7 +248,7 @@
    mounted() {
        this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
        this.$el.addEventListener('mouseup', e => {
            if (this.status === 2) return
            // if (this.status === 2) return
            this.tdMounseDown = false
        })
        try {
@@ -270,6 +273,63 @@
        }
    },
    methods: {
        delRow ()  {
            console.log(this.selection,this.select,this.map)
            if (this.selection.length  == 1 && this.selection[0].rowspan ==1 && this.selection[0].colspan == 1) {
                let rowIndex = this.selection[0].rowIndex
                let flag = this.map[rowIndex].some(v => v.rowspan != 1 || v.colspan != 1)
                if (flag) {
                    this.$message({
                        type: 'error',
                        message: '有合并行不可删除'
                    });
                } else {
                    this.map.splice(rowIndex,1)
                    this.map.forEach((v,i) =>  {
                        if (i>=rowIndex) {
                            v.forEach((c,j) => {
                                c.rowIndex -= 1
                            })
                        }
                    })
                    this.showAction = false
                }
            } else {
                this.$message({
                        type: 'error',
                        message: '有合并行不可删除'
                    });
            }
        },
        delCol ()  {
            if (this.selection.length  == 1 && this.selection[0].rowspan ==1 && this.selection[0].colspan == 1) {
                let colIndex = this.selection[0].colIndex
                let flag = this.map.some(v => v[colIndex].rowspan != 1 || v[colIndex].colspan != 1)
                if (flag) {
                    this.$message({
                        type: 'error',
                        message: '有合并行不可删除'
                    });
                } else {
                    this.map.forEach(v=>{
                        v.splice(colIndex,1)
                    })
                    this.map.forEach((v,i) =>  {
                        v.forEach((c,j) => {
                            if (j >= colIndex) {
                                c.colIndex -= 1
                            }
                        })
                    })
                    this.showAction = false
                }
            } else {
                this.$message({
                        type: 'error',
                        message: '有合并行不可删除'
                    });
            }
        },
        back() {
            this.$router.push({
                name: 'mapList'
@@ -345,7 +405,7 @@
        },
        contextmenu(e) {
            console.log(e)
            if (this.status === 2) return
            // if (this.status === 2) return
            if (this.range.x === undefined) return
            // if (this.range.x !=='') return 
            e.preventDefault()
@@ -364,7 +424,9 @@
                    top: top + 10 + 'px'
                }
            }

            if (window.innerHeight - top < 300) {
                this.position.top = window.innerHeight -  300 + 'px'
            }
        },
        onMousedown(e, v) {
            console.log('-----', v)
@@ -374,7 +436,7 @@
            this.selection = [v]
        },
        onMouseMove(e, v) {
            if (this.status === 2) return
            // if (this.status === 2) return
            if (!this.tdMounseDown) return
            this.$set(this.selection, 1, v)
        },
@@ -429,20 +491,36 @@
         //if(type == 2){//2:设备
            //console.log('hh',this);
            const { x, x1, y, y1 } = this.range
            //console.log(x1-x,y1-y);
            //10*10单元格才可以放设备
            var line = x1-x + 1;//行数
            var col = y1-y + 1;//列数
				
            console.log('行数=',line)
            console.log('列数=',col)
            if(type == 2 && (line < 8 || col<9)){
               this.$message({
                        type: 'error',
                        message: '单元格较小，无法展示设备，请至少合并8行9列单元格.当前为'+line+'行'+col+'列'
                     });
               return;
            }
            console.log('contnuye le');
            
            for (var i = x; i <= x1; i++) {
               for (var j = y; j <= y1; j++) {
                  
                  let arr = [...(this.map[i])]
                  /*
                  if (type == 2 && (arr[j].colspan < 4 || arr[j].rowspan  <  4)) { //x1-x<3 || y1-y<3
                     
                     return this.$message({
                        type: 'error',
                        message: '单元格较小，无法展示设备，请至少合并4行4列单元格'
                        message: '单元格较小，无法展示设备，请至少合并4行4列单元格。'
                     })
                     
                  }
						
                  */
                  arr[j].type = type
                  arr[j].id = undefined
                  this.$set(this.map, i, arr)
@@ -450,6 +528,7 @@
               }
               
            }
				
         //}
            this.showAction = false
            this.$forceUpdate()
@@ -619,6 +698,17 @@
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(154, 254, 254, 1), rgba(75, 120, 205, 1)) 1 1;
    }
	
   .tiptext {
        
        margin-left: 20px;
      
        line-height: 28px;
        border-radius: 14px;
        color: red;
        font-size: 18px;
        
    }
}

.table.active {