Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front

yangys

2024-01-13 f466ae4fdc645c66c9f25e2e4598b9809e2b41af

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-06 23:31:26
 * @LastEditTime: 2024-01-12 22:28:57
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -10,9 +10,9 @@
            <div class="table-tool" v-if="status !== 2">
                <el-button style="width: 150px;" type="primary" size="mini" @click="save">保存</el-button>
                <el-button style="width: 150px;" size="mini" @click="out">退出</el-button>
                <el-input v-show="status ===0 " v-model="rows" />
                <el-input v-show="status ===0" v-model="cols" />
                <el-button size="mini" v-show="status ===0" @click="createMap">生成地图</el-button>
                <el-input v-show="status !==2" v-model="rows" />
                <el-input v-show="status !==2" v-model="cols" />
                <el-button size="mini" v-show="status !==2" @click="createMap">生成地图</el-button>
                <div class="plant-name" v-if="status===2">{{plantName}}</div>
                <el-input class="plant-name" v-if="status!==2" v-model="plantName" placeholder="请输入厂名"/>
            </div>
@@ -28,79 +28,58 @@
                    <!-- <div>增加列</div> -->
                    <!-- <div>删除列</div> -->
                </div>
                <table :style="{ width: 20 * cols + 'px', height: 20 * rows + 'px' }">
                    <tr v-for="(item, index) in mapNew" :key="index">
                        <td v-if="v.rowspan !==0 && v.colspan!==0"
                        :style="{
                            'width': v.type ===1 ? '20px' : v.colspan * 20 + 'px!important',
                            'height': v.type ===1 ? '20px' : v.rowspan * 20+ 'px!important'
                        }"
                        :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" src="./img/+.png" alt="">
                        </td>
                        <!-- <td></td> -->
                    </tr>
                    <!-- <tr>
                        <td></td>
                    </tr> -->
                </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"
                                :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="">
                                <div  v-show="v.id" class="machine">
                                    <p>YKX123123213</p>
                                    <div>
                                        <div class="img">
                                            <img src="./img/machine.png" alt="">
                                        </div>
                                        <ul>
                                            <li>
                                                <img src="./img/sd.png" alt="">
                                                <div>
                                                    <p>0.00%</p>
                                                    <p>能力利用率</p>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="./img/sd.png" alt="">
                                                <div>
                                                    <p>0.00%</p>
                                                    <p>能力利用率</p>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="./img/sd.png" alt="">
                                                <div>
                                                    <p>0.00%</p>
                                                    <p>能力利用率</p>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                            </td>
                            <!-- <td></td> -->
                        </tr>
                        <!-- <tr>
                            <td></td>
                        </tr> -->
                    </table>
                </div>
            </div>
        </div>
        <div class="map-add" v-else>
            <div class="map-add-item">
                <span>统一编号</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>设备名称</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>设备型号</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>设备规格</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>使用单位</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>保养者</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>保养周期</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>保养类型</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>是否合格</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>计划开始时间</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>计划完成时间</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-item">
                <span>保养内容与存在问题</span>
                <el-input class="value"></el-input>
            </div>
            <div class="map-add-footer">
                <el-button size="mini" @click="close">关闭</el-button>
                <el-button type="primary"  size="mini" @click="saveDevice">保存</el-button>
            </div>
        </div>
        <addMachine :id="id" @setmachineId="setmachineId" v-else @close="close"/>
    </div>
    
</template>
@@ -112,7 +91,14 @@
        return v
    }
}
import mixins  from '@/mixins/index'
import AddMachine from './addMachine.vue'
import  {mapGetters} from 'vuex'
export default {
    mixins: [mixins],
    components: {
        AddMachine
    },
    props: {
        status: {
            type: Number,
@@ -125,32 +111,24 @@
            type: String,
        },
        id: {
            type: Number
            type: [Number,String]
        }
    },
    computed: {
        mapNew () {
            if (this.currentMap.length > 0) return this.currentMap
            if (!this.map) return []
            let arr = this.map.filter(item => item.rowspan !== 0 || item.colspan !== 0)
            return arr
        },
        tableW () {
            this.mapNew
        },
    },
    data() {
        return {
            height: 0,
            plantName: '',
            rows: 10,
            cols: 10,
            rows: 20,
            cols: 50,
            map: null, // 地图数据
            addStatus: false,
            position: {},
            selection:[],
            showAction: false,
            tdMounseDown: false,
            selection: [],
            range: {x: '',x1: '',y: '',y1: ''}
            range: {x: '',x1: '',y: '',y1: ''},
            currentAdd: {},
            colgroups:[]
        }
    },
    watch: {
@@ -194,11 +172,17 @@
            },
            immediate: true
        },
        map: {
        currentMap: {
            handler () {

                if (!this.currentMap || this.currentMap.length === 0) return
                if (this.currentMap.length > 0) this.map = this.currentMap
                this.rows = this.currentMap.length;
                this.cols = this.currentMap[0].length;
            },
            deep: true
            immediate: true
        },
        map () {
            this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
        }
    },
    mounted() {
@@ -207,19 +191,27 @@
            if(this.status ===2) return 
            this.tdMounseDown = false
        })
        
        if (this.id) {
            this.getmachineList()
            this.map = this.currentMap
            this.rows = this.currentMap.length
            this.cols = this.currentMap[0].length
        try {
            this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
        } catch (error) {
            
        }
        
    },
    beforeUpdate() {
        this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
        try {
            this.$el.querySelector('table').removeEventListener('contextmenu', this.contextmenu)
        } catch (error) {
            
        }
        
    },
    updated() {
        this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
        try {
            this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu)
        } catch (error) {
            
        }
    },
    methods: {
        createMap() {
@@ -240,17 +232,26 @@
            this.map = data
        },
        contextmenu(e) {
            console.log(e)
            if(this.status ===2) return 
            // if (this.range.x !=='') return 
            e.preventDefault()
            e.stopPropagation()
            let { pageX: left, pageY: top } = e
            this.showAction = true
            let { top: t } = document.querySelector('.map').getBoundingClientRect()
            this.position = {
                left: left + 'px',
                top: top - t + 10 + 'px'
            let { top: t } = document.querySelector('.table').getBoundingClientRect()
            if (window.innerWidth - left < 100) {
                this.position = {
                    right: 0,
                    top: top - t + 10 + 'px'
                }
            } else {
                this.position = {
                    left: left + 'px',
                    top: top -t + 10 + 'px'
                }
            }
            
        },
        onMousedown(e, v) {
            if(this.status ===2) return 
@@ -306,9 +307,10 @@
                    }
                }
            }
            setData(layoutNew)
            setRange({x,y,x1:x,y1: y})
            setShowMenu(false)
            this.showAction = false
            // setData(layoutNew)
            // setRange({x,y,x1:x,y1: y})
            // setShowMenu(false)
        },
        sign (type) {
            const { x, x1, y, y1 } = this.range
@@ -326,24 +328,11 @@
            if(this.status ===2) return 
            e.stopPropagation()
            this.addStatus = true
        },
        close () {
            this.addStatus = false
        },
        saveDevice () {
            this.close()
        },
        getmachineList () {
            this.$http.post('/machine/list', {
                status: '',
                plantId: this.id
            }).then(res => {
                console.log(res)
            })
            this.currentAdd =  v
        },
        save () {
            if (this.status === 0) {
                this.$http.post('/plant/save',{
                this.$http.postJson('/plant/save',{
                    name: this.plantName,
                    gridSetting: JSON.stringify(this.map)
                }).then(res => {
@@ -351,7 +340,7 @@
                    console.log(res)
                })
            } else if(this.status === 1) {
                this.$http.post('/plant/modify',{
                this.$http.postJson('/plant/modify',{
                    name: this.plantName,
                    gridSetting: JSON.stringify(this.map),
                    id: this.id
@@ -364,6 +353,19 @@
        },
        out () {
            this.$emit('out')
        },
        close () {
            this.addStatus = false
        },
        setmachineId (id) {
            console.log(id)
            if (!id) return
            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.close()
        }
    },
}
@@ -376,42 +378,16 @@
    .map-container {
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 20px;
        overflow: hidden;
        position: relative;
    }
    .map-add {
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
        .map-add-item {
            margin-top: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
                width: 150px;
                font-size: 16px;
                color: #C6DCE0;
                text-align: right;
                margin-right: 16px;
            }
            .value {
                width: 400px;
            }
        }
        .map-add-footer {
            position: absolute;
            bottom: 0;
            text-align: right;
            padding-right: 30px;
            width: 100%;
        }
        display: flex;
        flex-direction: column;
    }
}

.table-tool {
    margin-top: 10px;
    padding-bottom: 50px;
    display: flex;
    justify-content: flex-start;

@@ -436,31 +412,34 @@
}

.table {
    padding: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    overflow: auto;
    

    // margin-top: 10px;
    // display: flex;
    // justify-content: flex-start;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: scroll;
    .table-action {
        position: absolute;
        z-index: 999;
        color: #fff;

        width: 100px;
        div {
            margin-top: 4px;
            cursor: pointer;
        }
        div:hover {
            color: #68D9FF;
        }
    }

    table {
        border: 1px solid #1662DB;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        word-wrap: break-word;
        // table-layout: fixed;
        // word-wrap: break-word;
        overflow: hidden;
        border-radius: 20px;
        // box-sizing: border-box;
        td {
            // width: 50px;
            // height: 50px;
@@ -468,10 +447,77 @@
            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 {
                    margin-top: 20px;
                    color: #E9FFFF;
                    text-shadow: 0px 1px 11px #549BD4;
                    background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-align: center;
                }
                & > div {
                    flex: 1 1 auto;
                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    
                    overflow: hidden;
                    .img {
                        width: 50%;
                        height: 100%;
                        margin-left: 20px;
                        border: 1px solid #444C55;
                        border-radius: 10px;
                        position: relative;
                        img {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 80%;
                        }
                    }
                    ul {
                        flex: 1 1 auto;
                        height: 100%;
                        margin-left: 20px;
                        list-style: none;
                        display: flex;
                        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;;
                            }
                            p {
                                color: #E9FFFF;
                                text-shadow: 0px 1px 11px #549BD4;
                            }
                            img {
                                width: 40px;
                                height: 40px;
                            }
                        }
                    }
                }
                
            }
        }
        td.active {
@@ -481,7 +527,26 @@
            // 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>