update

gaosp

2024-01-20 e49dcf5091fafc6aa8f91f631d9ef57c11a4500b

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 16:44:55
 * @LastEditTime: 2024-01-20 17:24:04
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -12,53 +12,51 @@
                <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 class="input" size="mini" type="primary" v-show="status !== 2" @click="createMap">生成地图</el-button>
                <span>行数:</span>
                <el-input style="width: 30px;" class="input" v-show="status !==2" v-model="rows" />
                <el-input style="width: 30px;" class="input" v-show="status !== 2" v-model="rows" />
                <span>列数:</span>
                <el-input style="width: 30px;" class="input" v-show="status !==2" v-model="cols" />
                <el-input style="width: 30px;" class="input" v-show="status !== 2" v-model="cols" />
                <!-- <div class="plant-name" v-if="status===2">{{plantName}}</div> -->
                <span>名称:</span>
                <el-input class="plant-name" v-model="plantName" placeholder="请输入厂名"/>
                <el-input class="plant-name" v-model="plantName" placeholder="请输入厂名" />
            </div>
            <div class="table" :class="$route.name ==='preview' ? 'active' : ''" >
            <div class="table" :class="$route.name === 'preview' ? 'active' : ''">
                <div class="table-action" :style="position" v-show="showAction && status !== 2">
                    <div @click="merge">合并</div>
                    <div @click="split">拆分</div>
                    <div @click="sign(1)">过道</div>
                    <div @click="sign(2)">机床</div>
                    <div @click="sign(0)">取消</div>
                    <div @click="sign(2)">设备</div>
                    <div @click="sign(0)">移除</div>
                </div>
                <div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}">
                    <table >
                <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'"
                            :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"
                            <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"
                                :rowspan="v.rowspan" :colspan="v.colspan" :key="v.rowIndex + '-' + v.colIndex">
                                <img @click="addDevice($event,v)" @mousedown="e => e.stopPropagation()" v-if="v.type ===2 && status!==2 && !v.id" src="./img/+.png" alt="添加机床" title="添加机床">
                                <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>
                                    :plantDeviceList="plantDeviceList" ::info="info"></Device>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <el-dialog
        title="添加设备"
        :close-on-click-modal="false"
        width="20%"
        :visible.sync="addStatus">
        <el-select class="wkshoplist" clearable v-model="deviceId" placeholder="请选择">
            <el-option 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 title="放置设备" :close-on-click-modal="false" width="20%" :visible.sync="addStatus">
            <el-select class="wkshoplist" clearable v-model="deviceId" placeholder="请选择">
                <el-option 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>
    </div>
</template>
<script>
@@ -69,10 +67,9 @@
        return v
    }
}
import mixins  from '@/mixins/index'
// import AddMachine from './addMachine.vue'
import mixins from '@/mixins/index'
import Device from '../workshop/device.vue'
import  {mapGetters} from 'vuex'
import { mapGetters } from 'vuex'
export default {
    mixins: [mixins],
    components: {
@@ -91,7 +88,7 @@
            type: String,
        },
        id: {
            type: [Number,String]
            type: [Number, String]
        }
    },
    computed: {
@@ -100,18 +97,18 @@
                const { x, x1, y, y1 } = this.range
                if (this.range && x && x1 && y && y1) {
                    let start = this.map[x][y]
                    return this.map[x][y].id && (start.rowIndex + start.rowspan -1) === x1 && (start.colIndex + start.colspan -1) === y1
                    return this.map[x][y].id && (start.rowIndex + start.rowspan - 1) === x1 && (start.colIndex + start.colspan - 1) === y1
                }
            } catch (error) {
                return false
            }
        },
        machineid () {
        machineid() {
            try {
                const { x, x1, y, y1 } = this.range
                if (this.range && x && x1 && y && y1) {
                    let start = this.map[x][y]
                     if (this.map[x][y].id && (start.rowIndex + start.rowspan -1) === x1 && (start.colIndex + start.colspan -1) === y1) {
                    if (this.map[x][y].id && (start.rowIndex + start.rowspan - 1) === x1 && (start.colIndex + start.colspan - 1) === y1) {
                        return start.id
                    } else {
                        return ''
@@ -131,12 +128,12 @@
            map: null, // 地图数据
            addStatus: false,
            position: {},
            selection:[],
            selection: [],
            showAction: false,
            tdMounseDown: false,
            range: {x: '',x1: '',y: '',y1: ''},
            range: { x: '', x1: '', y: '', y1: '' },
            currentAdd: {},
            colgroups:[]
            colgroups: []
        }
    },
    watch: {
@@ -169,21 +166,21 @@
                }
                range = { x, y, x1, y1 }
            }
            this.$set(this.range,'x',range.x)
            this.$set(this.range,'x1',range.x1)
            this.$set(this.range,'y',range.y)
            this.$set(this.range,'y1',range.y1)
            this.$set(this.range, 'x', range.x)
            this.$set(this.range, 'x1', range.x1)
            this.$set(this.range, 'y', range.y)
            this.$set(this.range, 'y1', range.y1)
        },
        name: {
            handler () {
            handler() {
                this.plantName = this.name
            },
            immediate: true
        },
        id (val) {
        id(val) {
            if (!val) {
                this.map = []
            }else {
            } else {
                // getRequest('machineList',{plantId: val}).then(res => {
                //         this.plantDeviceList = res.list.map(item => {
                //             return {
@@ -195,7 +192,7 @@
            }
        },
        currentMap: {
            handler () {
            handler() {
                console.log(this.currentMap)
                if (!this.currentMap || this.currentMap.length === 0) return
                if (this.currentMap.length > 0) this.map = this.currentMap
@@ -203,24 +200,24 @@
                this.cols = this.currentMap[0].length;
                if (this.$route.name === 'preview') {
                    this.$nextTick(() => {
                            let {width} = document.querySelector('.table div').getBoundingClientRect()
                            console.log(document.querySelector('.table div').getBoundingClientRect())
                                // document.querySelector('.table').scrollLeft
                                // document.querySelector('.table').scrollTo({left: })
                        let { width } = document.querySelector('.table div').getBoundingClientRect()
                        console.log(document.querySelector('.table div').getBoundingClientRect())
                        // document.querySelector('.table').scrollLeft
                        // document.querySelector('.table').scrollTo({left: })
                    })
                }
               

            },
            immediate: true
        },
        map () {
        map() {
            this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
        }
    },
    mounted() {
        this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
        this.$el.addEventListener('mouseup',e => {
            if(this.status ===2) return 
        this.$el.addEventListener('mouseup', e => {
            if (this.status === 2) return
            this.tdMounseDown = false
        })
        try {
@@ -233,20 +230,20 @@
        try {
            this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
        } catch (error) {
            

        }
        

    },
    updated() {
        try {
            this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
        } catch (error) {
            

        }
    },
    methods: {
        async createMap() {
            let res=true
            let res = true
            if (this.id) {
                res = await this.$confirm('生成地图将覆盖当前所有设置，确定重新生成?', '提示', {
                    confirmButtonText: '确定',
@@ -275,7 +272,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()
@@ -294,19 +291,19 @@
                    top: top + 10 + 'px'
                }
            }
            

        },
        onMousedown(e, v) {
            if(this.status ===2) return 
            if (this.status === 2) return
            if (e.button !== 0) return
            this.tdMounseDown = true
            this.showAction = false
            this.selection = [v]
        },
        onMouseMove(e,v) {
            if(this.status ===2) return 
            if(!this.tdMounseDown) return
            this.$set(this.selection,1,v)
        onMouseMove(e, v) {
            if (this.status === 2) return
            if (!this.tdMounseDown) return
            this.$set(this.selection, 1, v)
        },
        merge(e) {
            const { x, x1, y, y1 } = this.range
@@ -316,37 +313,37 @@
                        let arr = [...(this.map[i])]
                        arr[j].rowspan = x1 - x + 1
                        arr[j].colspan = y1 - y + 1
                        this.$set(this.map,i,arr)
                        this.$set(this.map, i, arr)
                    } else {
                        let arr = [...(this.map[i])]
                        arr[j].rowspan = 0
                        arr[j].colspan = 0
                        arr[j].parent = [x, y]
                        this.$set(this.map,i,arr)
                        this.$set(this.map, i, arr)
                    }
                }
            }
            this.$set(this.range,'x',this.range.x)
            this.$set(this.range,'x1',this.range.x)
            this.$set(this.range,'y',this.range.y)
            this.$set(this.range,'y1',this.range.y)
            this.$set(this.range, 'x', this.range.x)
            this.$set(this.range, 'x1', this.range.x)
            this.$set(this.range, 'y', this.range.y)
            this.$set(this.range, 'y1', this.range.y)
            this.showAction = false
        },
        split () {
        split() {
            const { x, x1, y, y1 } = this.range
            for(var i=x;i<=x1;i++) {
                for(var j=y;j<=y1;j++) {
                    if (i==x && j==y) {
            for (var i = x; i <= x1; i++) {
                for (var j = y; j <= y1; j++) {
                    if (i == x && j == y) {
                        let arr = [...(this.map[i])]
                        arr[j].rowspan = 1
                        arr[j].colspan = 1
                        this.$set(this.map,i,arr)
                        this.$set(this.map, i, arr)
                    } else {
                        let arr = [...(this.map[i])]
                        arr[j].rowspan = 1
                        arr[j].colspan = 1
                        arr[j].parent = ''
                        this.$set(this.map,i,arr)
                        this.$set(this.map, i, arr)
                    }
                }
            }
@@ -355,32 +352,32 @@
            // setRange({x,y,x1:x,y1: y})
            // setShowMenu(false)
        },
        sign (type) {
        sign(type) {
            const { x, x1, y, y1 } = this.range
            for(var i=x;i<=x1;i++) {
                for(var j=y;j<=y1;j++) {
            for (var i = x; i <= x1; i++) {
                for (var j = y; j <= y1; j++) {
                    let arr = [...(this.map[i])]
                    arr[j].type = type
                    arr[j].id = undefined
                    this.$set(this.map,i,arr)
                    this.$set(this.map, i, arr)
                }
            }
            this.showAction = false
            this.$forceUpdate()
        },
        addDevice (e,v) {
        addDevice(e, v) {
            e.stopPropagation()
            this.addStatus = true
            this.deviceId = ''
            this.currentAdd =  v
            this.currentAdd = v
        },
        del () {
        del() {
            this.$confirm('确定要永久删除此厂房，关联的设备将重置?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                this.$http.postJson('/plant/delete',{
                this.$http.postJson('/plant/delete', {
                    ids: [this.id]
                }).then(res => {
                    this.$message({
@@ -400,54 +397,54 @@
                    message: '取消删除'
                })
            })
            

        },
        save () {
        save() {
            if (!this.id) {
                this.$http.postJson('/plant/save',{
                this.$http.postJson('/plant/save', {
                    name: this.plantName,
                    gridSetting: JSON.stringify(this.map)
                }).then(res => {
                    this.$message({
                    type: 'info',
                        type: 'info',
                        message: '操作成功'
                    })
                    this.$emit('out')
                    console.log(res)
                })
            } else {
                this.$http.postJson('/plant/modify',{
                this.$http.postJson('/plant/modify', {
                    name: this.plantName,
                    gridSetting: JSON.stringify(this.map),
                    id: this.id
                }).then(res => {
                    this.$message({
                    type: 'info',
                        type: 'info',
                        message: '操作成功'
                    })
                    this.$emit('out')
                    console.log(res)
                })
            }
            

        },
        out () {
        out() {
            this.$emit('out')
        },
        close () {
        close() {
            this.addStatus = false
        },
        saveDevice () {
        saveDevice() {
            this.setmachineId(this.deviceId)
        },
        setmachineId (id) {
        setmachineId(id) {
            if (!id) return
            try {
                let i = this.currentAdd.rowIndex
                let j = this.currentAdd.colIndex
                let arr = [...(this.map[i])];
                arr[j].id = id
                this.$set(this.map,i,arr)
                this.$set(this.map, i, arr)
                this.$message({
                    type: 'info',
                    message: '操作成功'
@@ -464,23 +461,25 @@
}
</script>
<style lang="scss" scoped>

@keyframes move {
    0% {
        // left: 100%;
        // transform: translate(0,0);
        // scrollTop: 0
    }

    100% {
        // left: 100%;
        // transform: translate(-100%,0);
        // scrollTop: 100%
    }
}

.map {
    width: 100%;
    height: 100%;
    position: relative;

    .map-container {
        width: 100%;
        height: 100%;
@@ -499,18 +498,20 @@
    color: #fff;
    font-size: 12px;
    align-items: center;

    &>.input {
        min-width: 80px;
        max-width: 200px;
        margin-inline: 10px;
    }

    .plant-name {
        width: 120px;
        margin-left: 20px;
        // margin-right: 30px;
        text-align: center;
        line-height: 28px;
        background: rgba(23,38,67,0.6);
        background: rgba(23, 38, 67, 0.6);
        border-radius: 14px;
        overflow: hidden;
        color: #F7F8FA;
@@ -525,6 +526,7 @@
    // left: 100%;
    // animation: move 6s infinite alternate;
}

.table {
    // margin-top: 10px;
    // display: flex;
@@ -533,16 +535,18 @@
    height: 100%;
    position: relative;
    overflow-x: scroll;
   

    .table-action {
        position: fixed;
        z-index: 999;
        color: #fff;
        width: 100px;

        div {
            margin-top: 4px;
            cursor: pointer;
        }

        div:hover {
            color: #68D9FF;
        }
@@ -555,6 +559,7 @@
        // word-wrap: break-word;
        overflow: hidden;
        border-radius: 10px;

        // box-sizing: border-box;
        td {
            // width: 50px;
@@ -563,17 +568,20 @@
            border: 1px solid #1662DB;
            vertical-align: middle;
            text-align: center;
            & > img {

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

            .machine {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                & > p {

                &>p {
                    margin-top: 20px;
                    color: #E9FFFF;
                    text-shadow: 0px 1px 11px #549BD4;
@@ -582,14 +590,16 @@
                    -webkit-text-fill-color: transparent;
                    text-align: center;
                }
                & > div {

                &>div {
                    flex: 1 1 auto;
                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    

                    overflow: hidden;

                    .img {
                        width: 50%;
                        height: 100%;
@@ -597,6 +607,7 @@
                        border: 1px solid #444C55;
                        border-radius: 10px;
                        position: relative;

                        img {
                            position: absolute;
                            top: 50%;
@@ -605,6 +616,7 @@
                            width: 80%;
                        }
                    }

                    ul {
                        flex: 1 1 auto;
                        height: 100%;
@@ -614,18 +626,23 @@
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-around;

                        li {
                            width: 100%;
                            display: flex;
                            font-size: 12px;
                            align-items: center;
                            & > div {
                                margin-left: 20px;;

                            &>div {
                                margin-left: 20px;
                                ;
                            }

                            p {
                                color: #E9FFFF;
                                text-shadow: 0px 1px 11px #549BD4;
                            }

                            img {
                                width: 40px;
                                height: 40px;
@@ -633,36 +650,42 @@
                        }
                    }
                }
                

            }
        }

        td.active {
            background: #68D9FF!important;
            background: #68D9FF !important;
        }

        td.aisle {
            // width: 20px;
            // height: 20px;
            background: #1662DB;

            div {
                // width: 20px;
                // height: 20px;
            }
        }

        td.device {
            // width: 400px;
            // height: 400px;
            overflow: hidden;

            div {
                // width: 400px;
            }
        }
    }
}

.grid {
    width: 100%;
    height: 100%;

    div {
        border: 1px solid red;
    }
}
</style>
}</style>