大屏滚动

gaosp

2024-01-20 c3d5a56a83a8ab420bff5ed01437a806259fa5ef

大屏滚动

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:24:04
 * @LastEditTime: 2024-01-20 19:40:37
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -14,12 +14,12 @@
                <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>
                <span>行数:</span>
                <el-input style="width: 30px;" class="input" v-show="status !== 2" v-model="rows" />
                <el-input style="width: 70px;" 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: 70px;" 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 style="width: 70px;" class="input"  v-model="plantName" placeholder="请输入厂名" />
            </div>
            <div class="table" :class="$route.name === 'preview' ? 'active' : ''">
                <div class="table-action" :style="position" v-show="showAction && status !== 2">
@@ -500,8 +500,6 @@
    align-items: center;

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


 src/container/Map/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:23:08
 * @LastEditTime: 2024-01-20 19:41:22
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
-->
<template>
@@ -10,7 +10,7 @@
            <template slot="tool">
                <div class="workshop-tool">
                    <span v-show="id">车间地图:</span>
                    <el-select v-show="id" class="wkshoplist" clearable v-model="id" placeholder="请选择">
                    <el-select style="width: 100px" v-show="id" class="wkshoplist" clearable v-model="id" placeholder="请选择">
                        <el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>

 src/container/mapPreview/Map.vue

@@ -1,23 +1,22 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:05:37
 * @LastEditTime: 2024-01-20 20:37:45
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/Map.vue
-->
<template>
    <div class="map">
        <div class="map-container" v-if="!addStatus">
        <div class="map-container">
            <div class="table" :class="$route.name ==='preview' ? 'active' : ''" >
                <div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}">
                <div :style="{width: (cols * height + 'px'),height: rows * height + 'px',marginLeft: -marginLeft + 'px'}">
                    <table >
                        <tr v-for="(item, index) in map" :key="index">
                            <td v-if="v.rowspan !==0 && v.colspan!==0"
                            :class="{aisle: v.type === 1 }"
                            :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"
                            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="">
                                <!-- <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"></Device> -->
                                <Device @click.native="toDetail(v)" v-if="v.id" :id="v.id" style="width: 100%;height: 100%;" :deviceList="deviceList"
:plantDeviceList="plantDeviceList" ::info="info"></Device>
                            </td>
@@ -30,6 +29,7 @@
    
</template>
<script>
let timer;
const getParent = (v, layout) => {
    if (v.rowspan === 0) {
        return getParent(layout[v.parent[0]][v.parent[1]], layout)
@@ -59,112 +59,48 @@
            type: [Number,String]
        }
    },
    computed: {
        showEdit() {
            try {
                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
                }
            } catch (error) {
                return false
            }
        },
        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) {
                        return start.id
                    } else {
                        return ''
                    }
                }
            } catch (error) {
                return ''
            }
        }
    },
    data() {
        return {
            height: 0,
            plantName: '',
            rows: 20,
            cols: 50,
            map: null, // 地图数据
            addStatus: false,
            position: {},
            selection:[],
            showAction: false,
            tdMounseDown: false,
            range: {x: '',x1: '',y: '',y1: ''},
            currentAdd: {},
            colgroups:[]
            leftMax: 0,
            move: false,
            marginLeft: 0
        }
    },
    watch: {
        selection(val) {
            let select = this.selection
            let range = {}
            if (val.length === 0) {
                range = {}
            } else if (val.length === 1) {
                let x = select[0].rowIndex
                let y = select[0].colIndex
                let x1 = select[0].rowIndex + select[0].rowspan - 1
                let y1 = select[0].colIndex + select[0].colspan - 1
                range = { x, y, x1, y1 }
            } else {
                // 起始行号 不包含合并
                let x = Math.min(select[0].rowIndex, select[1].rowIndex)
                let x1 = Math.max(select[0].rowIndex + select[0].rowspan - 1, select[1].rowIndex + select[1].rowspan - 1)
                let y = Math.min(select[0].colIndex, select[1].colIndex)
                let y1 = Math.max(select[0].colIndex + select[0].colspan - 1, select[1].colIndex + select[1].colspan - 1)
                // 范围内碰到合并格
                for (var i = x; i <= x1; i++) {
                    for (var j = y; j <= y1; j++) {
                        let v = getParent(this.map[i][j], this.map)
                        x = Math.min(x, v.rowIndex)
                        y = Math.min(y, v.colIndex)
                        x1 = Math.max(x1, v.rowIndex + v.rowspan - 1)
                        y1 = Math.max(y1, v.colIndex + v.colspan - 1)
                    }
                }
                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)
        },
        name: {
            handler () {
                this.plantName = this.name
            },
            immediate: true
        },
        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;
                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: })
                    })
                }
               
            },
            immediate: true
        },
        map () {
            this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20
        },
        id: {
            handler () {
                this.$nextTick(() => {
                    let {width} = document.querySelector('.table div').getBoundingClientRect()
                    let {width: tableW} = document.querySelector('.table').getBoundingClientRect()
                    console.log(width, '>>>>>>>', tableW)
                    if (width > tableW) {
                        this.move = true
                        this.leftMax = width - tableW
                        clearTimeout(timer)
                        this.moveFn()
                    } else {
                        this.move = false
                        this.leftMax = 0
                    }
                })
            },
            immediate: true
        }
    },
    mounted() {
@@ -174,8 +110,23 @@
        }
    },
    methods: {
        moveFn () {
            if (this.marginLeft < this.leftMax) {
                this.marginLeft += 5
                timer = setTimeout(() => {
                    this.moveFn()
                }, 30)
            } else if (this.marginLeft >= this.leftMax){
                this.marginLeft = 0
                timer = setTimeout(() => {
                    this.moveFn()
                }, 30)
            }
        },
        animationFn () {

        },
        toDetail (v) {
            alert(1)
            this.$router.push({
                name: 'mapPreviewDetail',
                query: {
@@ -183,12 +134,6 @@
                }
            })
        },
        out () {
            this.$emit('out')
        },
        close () {
            this.addStatus = false
        }
    },
}
</script>
@@ -196,14 +141,20 @@

@keyframes move {
    0% {
        // left: 100%;
        // transform: translate(0,0);
        // scrollTop: 0
        transform: translate(0,0);
    }
    100% {
        // left: 100%;
        // transform: translate(-100%,0);
        // scrollTop: 100%
        transform: translate(-100%,0);
    }
}
.preview-container {
    .table {
        overflow: hidden;
        overflow-y: auto;
        // margin-left: 100%;
    }
    .table div {
        // animation: move 12s infinite alternate;
    }
}
.map {
@@ -259,7 +210,9 @@
    height: 100%;
    position: relative;
    overflow-x: scroll;
   
    & > div {
        
    }
    .table-action {
        position: fixed;
        z-index: 999;

 src/container/mapPreviewDetail/index.vue

@@ -1,14 +1,14 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:12:15
 * @LastEditTime: 2024-01-20 19:36:45
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreviewDetail/index.vue
-->
<template>
    <div class="workshop">
        <div class="nav">
            车间列表 / 2厂 / YYYYYYYYss
            <span>返回车间地图</span>
            <span @click="back">返回车间地图</span>
        </div>
        <div class="workshop-box">
            <div class="left">1</div>
@@ -36,7 +36,9 @@
        }
    },
    methods: {
        
        back () {
            this.$router.go(-1)
        }
    },
    mounted() {
        

 src/container/preview/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 19:32:59
 * @LastEditTime: 2024-01-20 20:12:55
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/preview/index.vue
-->
<template>
@@ -32,7 +32,7 @@
                    </template>
                </Status>
                <div class="preview-map">
                    <Map v-if="id" :id="id" :status="2" :currentMap="currentMap"  @out="out" />
                    <Map class="preview-container" v-if="id" :id="id" :status="2" :currentMap="currentMap" />
                </div>
            </div>
        </div>

 src/container/workshop/device.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-13 20:46:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-17 23:06:46
 * @LastEditTime: 2024-01-20 20:13:21
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
-->
<template>
@@ -20,21 +20,21 @@
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ efficiency}}</p>
                        <p>{{ efficiency }}</p>
                        <p>能力利用率</p>
                    </div>
                </li>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ utilizationDaily}}</p>
                        <p>{{ utilizationDaily }}</p>
                        <p>日利用率</p>
                    </div>
                </li>
                <li>
                    <img src="./img/sd.png" alt="">
                    <div>
                        <p>{{ info.cycleCount}}</p>
                        <p>{{ info.cycleCount }}</p>
                        <p>完工件数</p>
                    </div>
                </li>
@@ -43,11 +43,11 @@
    </div>
</template>
<script>
import { getRequest,getUrl } from '@/api/Api'
import { getRequest, getUrl } from '@/api/Api'
export default {
    props: {
        id: {
            type: [String,Number]
            type: [String, Number]
        },
        info: {
            type: Object,
@@ -57,41 +57,50 @@
        },
        deviceList: {
            type: Array,
            default: function() {
            default: function () {
                return []
            }
        },
        plantDeviceList: {
            type: Array,
            default: function() {
            default: function () {
                return []
            }
        }
    },
    data () {
    data() {
        return {
            care: false,
            item: {}
        }
    },
    computed: {
        efficiency () {
        efficiency() {
            return this.info.efficiency || 0
        },
        utilizationDaily () {
        utilizationDaily() {
            return this.info.utilizationDaily || 0
        },
        cycleCount () {
        cycleCount() {
            return this.info.cycleCount || 0
        },
        machineName () {
        machineName() {
            let machineName = ''
            try {
                machineName =  this.deviceList.find(item => item.machineId=== this.id).machineName
            } catch (error) {console.error(error)}
            try {
                machineName =  this.plantDeviceList.find(item => item.machineId=== this.id).machineName
            } catch (error) {console.error(error)}
            if (this.deviceList.length > 0) {
                try {
                    machineName = this.deviceList.find(item => item.machineId === this.id).machineName
                } catch (error) { 
                    // console.info(error) 
                }
            }
            if (this.plantDeviceList.length > 0) {
                try {
                    machineName = this.plantDeviceList.find(item => item.machineId === this.id).machineName
                } catch (error) { 
                    // console.info(error) 
                }
            }

            if (machineName) {
                return machineName
            }
@@ -99,13 +108,13 @@
        }
    },
    methods: {
        change (val) {
        change(val) {
            console.log(val)
            getRequest('machineConcern',{concern: val ? 1 : 0,id: this.id}).then(res => {
            getRequest('machineConcern', { concern: val ? 1 : 0, id: this.id }).then(res => {
                console.log(res)
            })
        },
        getInfo () {
        getInfo() {
            this.item = {}
        }
    },
@@ -121,12 +130,14 @@
    display: flex;
    flex-direction: column;
    position: relative;

    .care {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 999;
    }

    &>p {
        color: #E9FFFF;
        text-shadow: 0px 1px 11px #549BD4;
@@ -136,6 +147,7 @@
        text-align: center;
        position: relative;
    }

    &>p:before {
        content: '';
        position: absolute;
@@ -145,8 +157,9 @@
        transform: translateY(-50%);
        width: 30px;
        height: 1px;
        background: linear-gradient(270deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
        background: linear-gradient(270deg, #65A5D6 0%, rgba(11, 70, 115, 0) 100%);
    }

    &>p:after {
        content: '';
        position: absolute;
@@ -155,8 +168,9 @@
        transform: translateY(-50%);
        width: 30px;
        height: 1px;
        background: linear-gradient(90deg, #65A5D6 0%, rgba(11,70,115,0) 100%);
        background: linear-gradient(90deg, #65A5D6 0%, rgba(11, 70, 115, 0) 100%);
    }

    &>div.device-item-box {
        flex: 1 1 auto;
        margin-top: 20px;
@@ -172,26 +186,31 @@
            border: 1px solid #444C55;
            border-radius: 10px;
            position: relative;

            .img-status {
                position: absolute;
                font-size: 12px;
                right: 10px;
                top: 10px;
                background: rgba(216,216,216,0.09);
                background: rgba(216, 216, 216, 0.09);
                border-radius: 11px;
                // border: 1px solid #FFFFFF;
                padding: 5px 10px;
            }

            .img-status.standby {
                background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
            }

            .img-status.run {
                background: linear-gradient(130deg, #EAF224 0%, #3DF297 100%);
            }

            .img-status.alerm {
                background: #FF3333;
                color: #fff;
            }

            img {
                position: absolute;
                top: 50%;