修改地图操作

gaosp

2024-02-03 4145f51803841d33fa68673f2b6aa6e451bf9461

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-31 21:10:02
 * @LastEditTime: 2024-02-03 00:01:53
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -9,17 +9,18 @@
        <div class="map-container">
            <div class="table-tool">
                <slot name="tool"></slot>
                <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" />
                <!-- <el-button v-show="!id" class="input" type="ghost" size="mini" @click="out">退出</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: 150px;" class="input"  v-model="plantName" placeholder="请输入地图名称" />
                <el-button class="input" size="mini" type="primary" v-show="status !== 2" @click="createMap">生成地图</el-button>
                <el-input style="width: 150px;" class="input" v-model="plantName" placeholder="请输入地图名称" />
                <el-button class="input" type="ghost" size="mini" @click="save">保存</el-button>
                <!-- <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">
@@ -34,18 +35,18 @@
                <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">
                                <div class="td-div" :style="{width:v.colspan * height - 2 + 'px',height: v.rowspan * height - 2 + 'px',overflow:'hidden'}">
                                <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>
                                        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>
                                </div>
                            </td>
                        </tr>
@@ -53,14 +54,31 @@
                </div>
            </div>
        </div>
        <el-dialog class="add-device" title="放置设备" top="94px" :close-on-click-modal="false" width="400px" :visible.sync="addStatus" >
        <el-dialog class="add-device" title="放置设备" top="94px" :close-on-click-modal="false" width="400px"
            :visible.sync="addStatus" @close="addStatus = false">
            <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">
                <el-option v-show="!hasPushed.includes(item.machineId)" v-for="item in deviceList" :key="item.machineId"
                    :label="item.machineName" :value="item.machineId">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" style="background-color: #409EFF;" @click="saveDevice">保存</el-button>
            </span>
        </el-dialog>
        <el-dialog class="add-device" title="生成地图" top="94px" :close-on-click-modal="false" width="400px"
            :visible.sync="showMapSet" :show-close="false">
            <div>
                <p>
                    <span>行数:</span>
                    <el-input style="width: 100px;" class="input" v-show="status !== 2" v-model="rows" />
                </p>
                <p style="margin-top: 20px;">
                    <span>列数:</span>
                    <el-input style="width: 100px;" class="input" v-show="status !== 2" v-model="cols" />
                </p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" style="background-color: #409EFF;" @click="createMap">生成地图</el-button>
            </span>
        </el-dialog>
    </div>
@@ -76,6 +94,7 @@
import mixins from '@/mixins/index'
import Device from '../workshop/device.vue'
import { mapGetters } from 'vuex'
import { getRequest, getUrl } from '@/api/Api'
export default {
    mixins: [mixins],
    components: {
@@ -83,10 +102,6 @@
        Device
    },
    props: {
        status: {
            type: Number,
            default: 0
        },
        currentMap: {
            default: []
        },
@@ -188,14 +203,14 @@
            if (!val) {
                this.map = []
            } else {
                // getRequest('machineList',{plantId: val}).then(res => {
                //         this.plantDeviceList = res.list.map(item => {
                //             return {
                //                 machineId: item.id,
                //                 machineName: item.machineName
                //             }
                //         }) || []
                //     })
                getRequest('machineList',{plantId: val}).then(res => {
                        this.plantDeviceList = res.list.map(item => {
                            return {
                                machineId: item.id,
                                machineName: item.machineName
                            }
                        }) || []
                    })
            }
        },
        currentMap: {
@@ -219,6 +234,11 @@
        },
        map() {
            this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
        }
    },
    created () {
        if (!this.id) {
            this.showMapSet = true
        }
    },
    mounted() {
@@ -249,10 +269,15 @@
        }
    },
    methods: {
        back() {
            this.$router.push({
                name: 'mapList'
            })
        },
        addRow() {
            this.rows +=1
            this.rows += 1
            let row = []
            for(var i=0;i<this.cols;i++) {
            for (var i = 0; i < this.cols; i++) {
                row.push({
                    rowspan: 1,
                    colspan: 1,
@@ -267,13 +292,13 @@
        },
        addCol() {
            this.cols += 1
            for(var i=0;i<this.rows;i++) {
            for (var i = 0; i < this.rows; i++) {
                this.map[i].push(
                    {
                        rowspan: 1,
                        colspan: 1,
                        rowIndex: this.rows - 1,
                        colIndex: i,
                        rowIndex: i,
                        colIndex: this.cols - 1,
                        type: ''
                    }
                )
@@ -306,6 +331,7 @@
                    data.push(arr)
                }
                this.map = data
                this.showMapSet = false
            }
        },
        contextmenu(e) {
@@ -332,7 +358,7 @@

        },
        onMousedown(e, v) {
            console.log('-----',v)
            console.log('-----', v)
            if (e.button !== 0) return
            this.tdMounseDown = true
            this.showAction = false
@@ -407,8 +433,8 @@
            e.stopPropagation()
            this.addStatus = true
            let hasPushed = []
            this.map.forEach(item  => {
                item.forEach(v =>  {
            this.map.forEach(item => {
                item.forEach(v => {
                    if (v.id) {
                        hasPushed.push(v.id)
                    }
@@ -457,7 +483,6 @@
                        message: '操作成功'
                    })
                    this.$emit('out')
                    console.log(res)
                })
            } else {
                this.$http.postJson('/plant/modify', {
@@ -470,7 +495,6 @@
                        message: '操作成功'
                    })
                    this.$emit('out')
                    console.log(res)
                })
            }

@@ -591,10 +615,11 @@
        z-index: 999;
        color: #fff;
        width: 100px;
        background: rgba(22,26,25,.8);
        background: rgba(22, 26, 25, .8);
        border: 2px solid #416071;
        color: #ADAEAE;
        text-align: center;

        div {
            cursor: pointer;
            padding: 8px 0;
@@ -613,6 +638,7 @@
        overflow: hidden;
        border-radius: 10px;
        display: table;

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

            .td-div {
                display: flex;
                align-items: center;
                justify-content: center;

                &>img {
                    width: 20px;
                    height: 20px;
                    cursor: pointer;
                }
            }
            


            .machine {
                width: 100%;