修改一些问题

gaosp

2024-01-31 6db7de7f92352106774f7cdcf6c5cf2ac6257b7f

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-29 22:46:03
 * @LastEditTime: 2024-01-31 21:10:02
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -9,22 +9,24 @@
        <div class="map-container">
            <div class="table-tool">
                <slot name="tool"></slot>
                <el-button v-show="!id" class="input" type="primary" size="mini" @click="out">退出</el-button>
                <el-button class="input" type="primary" size="mini" @click="save">保存</el-button>
                <el-button v-show="id" class="input" type="primary" size="mini" @click="del">删除</el-button>
                <el-button class="input" size="mini" type="primary" v-show="status !== 2" @click="createMap">生成地图</el-button>
                <el-button v-show="!id" class="input" type="ghost" size="mini" @click="out">退出</el-button>
                <el-button class="input" type="ghost" size="mini" @click="save">保存</el-button>
                <el-button v-show="id" class="input" type="ghost" size="mini" @click="del">删除</el-button>
                <span>行数:</span>
                <el-input style="width: 70px;" class="input" v-show="status !== 2" v-model="rows" />
                <span>列数:</span>
                <el-input style="width: 70px;" class="input" v-show="status !== 2" v-model="cols" />
                <!-- <div class="plant-name" v-if="status===2">{{plantName}}</div> -->
                <span>名称:</span>
                <el-input style="width: 70px;" class="input"  v-model="plantName" placeholder="请输入厂名" />
                <el-input style="width: 150px;" class="input"  v-model="plantName" placeholder="请输入厂名" />
                <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 @click="merge">合并</div>
                    <div @click="split">拆分</div>
                    <div @click="addRow">增加行</div>
                    <div @click="addCol">增加列</div>
                    <div @click="sign(1)">过道</div>
                    <div @click="sign(2)">设备</div>
                    <div @click="sign(0)">移除</div>
@@ -32,22 +34,26 @@
                <div :style="{ width: (cols * height + 'px'), height: rows * height + 'px' }">
                    <table>
                        <tr v-for="(item, index) in map" :key="index">
                            <td v-if="v.rowspan !== 0 && v.colspan !== 0" :width="v.colspan * height + 'px'"
                            <td v-if="v.rowspan !== 0 && v.colspan !== 0" 
                                :width="v.colspan * height + 'px'"
                                :height="v.rowspan * height + 'px'"
                                :class="{ 'active': (range.x !== '' && v.rowIndex >= range.x && v.rowIndex <= range.x1 && v.colIndex >= range.y && v.colIndex <= range.y1), aisle: v.type === 1 }"
                                @mousedown="e => onMousedown(e, v)" @mousemove="e => onMouseMove(e, v)" v-for="v in item"
                                @mousedown="e => onMousedown(e, v)" 
                                @mousemove="e => onMouseMove(e, v)" v-for="v in item"
                                :rowspan="v.rowspan" :colspan="v.colspan" :key="v.rowIndex + '-' + v.colIndex">
                                <img @click="addDevice($event, v)" @mousedown="e => e.stopPropagation()"
                                <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="添加机床" title="添加机床">
                                <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;" :deviceList="deviceList"
                                    :plantDeviceList="plantDeviceList" ::info="info"></Device>
                                    <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;" :deviceList="deviceList"
                                        :plantDeviceList="plantDeviceList" ::info="info"></Device>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <el-dialog title="放置设备" top="94px" :close-on-click-modal="false" width="100%" :visible.sync="addStatus" >
        <el-dialog class="add-device" title="放置设备" top="94px" :close-on-click-modal="false" width="400px" :visible.sync="addStatus" >
            <el-select class="wkshoplist" clearable v-model="deviceId" placeholder="请选择">
                <el-option v-show="!hasPushed.includes(item.machineId)" v-for="item in deviceList" :key="item.machineId" :label="item.machineName"
                    :value="item.machineId">
@@ -243,6 +249,37 @@
        }
    },
    methods: {
        addRow() {
            this.rows +=1
            let row = []
            for(var i=0;i<this.cols;i++) {
                row.push({
                    rowspan: 1,
                    colspan: 1,
                    rowIndex: this.rows - 1,
                    colIndex: i,
                    type: ''
                })
            }
            this.map.push(row)
            this.showAction = false
            this.$forceUpdate()
        },
        addCol() {
            this.cols += 1
            for(var i=0;i<this.rows;i++) {
                this.map[i].push(
                    {
                        rowspan: 1,
                        colspan: 1,
                        rowIndex: this.rows - 1,
                        colIndex: i,
                        type: ''
                    }
                )
            }
            this.showAction = false
        },
        async createMap() {
            let res = true
            if (this.id) {
@@ -295,7 +332,7 @@

        },
        onMousedown(e, v) {
            if (this.status === 2) return
            console.log('-----',v)
            if (e.button !== 0) return
            this.tdMounseDown = true
            this.showAction = false
@@ -470,6 +507,11 @@
    },
}
</script>
<style lang="scss">
#app .add-device .el-dialog {
    height: 300px;
}
</style>
<style lang="scss" scoped>
@keyframes move {
    0% {
@@ -566,11 +608,11 @@
    table {
        width: 100%;
        border-collapse: collapse;
        // table-layout: fixed;
        // word-wrap: break-word;
        table-layout: fixed;
        word-wrap: break-word;
        overflow: hidden;
        border-radius: 10px;

        display: table;
        // box-sizing: border-box;
        td {
            // width: 50px;
@@ -579,12 +621,17 @@
            border: 1px solid #1662DB;
            vertical-align: middle;
            text-align: center;

            &>img {
                width: 20px;
                height: 20px;
                cursor: pointer;
            .td-div {
                display: flex;
                align-items: center;
                justify-content: center;
                &>img {
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                }
            }
            

            .machine {
                width: 100%;