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

yangys

2024-01-13 f466ae4fdc645c66c9f25e2e4598b9809e2b41af

 src/container/Map/index.vue

@@ -1,86 +1,77 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-06 19:00:32
 * @LastEditTime: 2024-01-13 22:19:48
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
-->
<template>
    <div class="workshop">
        <Map v-if="status===0 || status === 1" :status="status" :currentMap="currentMap" :name="plantName" :id="id" @out="out" />
        <Map v-if="status===0 || status === 1 && id" :status="status" :currentMap="currentMap" :name="plantName" :id="id" @out="out" />
        <div v-else class="preview">
            <div class="left">
                <div v-if="id" @click="editMap" class="edit-btn">
                    进入编辑状态
                </div>
                <el-select size="mini" class="left-select" v-model="id" placeholder="请选择">
                    <el-option
                    v-for="item in mapList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <div class="left-item left-1">
                    <div>44%</div>
                    <div>开机率</div>
                </div>
                <div class="left-item left-2">
                    <div>44%</div>
                    <div>故障率</div>
                </div>
                <div class="left-item left-3">
                    <div>44%</div>
                    <div>切削率</div>
                </div>
                <div class="left-item left-4">
                    <div>44%</div>
                    <div>二班开工率</div>
                </div>
                <div class="left-item left-5">
                    <div>44%</div>
                    <div>三班开工率</div>
                </div>
            </div>
            <LeftStatus class="left" :info="info">
                <template>
                    <div @click="editMap" class="edit-btn">
                        {{id ? '进入编辑状态' : '新增'}}
                    </div>
                    <el-select clearable class="left-select" v-model="id" placeholder="请选择">
                        <el-option
                        v-for="item in mapList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </LeftStatus>
            <div class="right">
                <div class="top">
                    <div class="top-item top-1">
                        <div>16</div>
                        <div>停机状态</div>
                    </div>
                    <div class="top-item top-2">
                        <div>16</div>
                        <div>停机状态</div>
                    </div>
                    <div class="top-item top-3">
                        <div>16</div>
                        <div>停机状态</div>
                    </div>
                    <div class="top-item top-4">
                        <div>16</div>
                        <div>停机状态</div>
                    </div>
                    <div class="top-item top-5">
                        <div>16</div>
                        <div>停机状态</div>
                    </div>
                </div>
                <Status v-show="id" :info="info"/>
                <div class="preview-map">
                    <Map :status="2" :currentMap="currentMap"  @out="out" />
                    <Map v-if="id" :status="2" :currentMap="currentMap"  @out="out" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Map from './Map.vue'
    import Map from './Map.vue';
    import Status from '@/components/newComp/Status'
    import LeftStatus from './LeftStatus.vue'
    import { getRequest, getUrl } from '@/api/Api'
    export default {
        components: {
            Map
            Map,
            Status,
            LeftStatus
        },
        watch: {
            id () {
                this.currentMap = JSON.parse(this.mapList.find(item => item.id ===this.id).gridSetting)
                this.plantName = this.mapList.find(item => item.id ===this.id).name
            id (val) {
                if (!val) {
                    this.currentMap = ''
                    this.plantName = ''
                    return
                }
                try {
                    this.currentMap = JSON.parse(this.mapList.find(item => item.id ===this.id).gridSetting)
                    this.plantName = this.mapList.find(item => item.id ===this.id).name
                } catch (error) {
                    
                }
                getRequest('machineList', {
                    plantId: this.id,
                }).then(res => {
                    // this.list = res.data.list
                    this.info = {
                        runRate: res.data.runRate,
                        cutRate: res.data.cutRate,
                        alarmRate: res.data.alarmRate,
                        threeShiftRate: res.data.threeShiftRate,
                        twoShiftRate: res.data.twoShiftRate,
                        run: res.data.run,
                        alarm: res.data.alarm,
                        stop: res.data.stop,
                        idle: res.data.idle
                    }
                })
            }
        },
        data () {
@@ -89,12 +80,23 @@
                currentMap: [],
                plantName: '',
                mapList: [],
                status: 0, // 0 新增 1编辑 2查看
                status: 2, // 0 新增 1编辑 2查看
                info: {
                    runRate: '',
                    cutRate: '',
                    alarmRate: '',
                    threeShiftRate: '',
                    twoShiftRate: '',
                    run: '',
                    alarm: '',
                    stop: '',
                    idle: '',
                }
            }
        },
        methods: {
            getMapList() {
                this.$http.get('/plant/list').then(res => {
                this.$store.dispatch('GetPlanList', {}).then(res => {
                    this.mapList = res.data.filter (v => v.gridSetting && v.gridSetting!='{}')
                    if (this.mapList.length === 0) {
                        this.status = 0
@@ -104,12 +106,16 @@
                })
            },
            editMap () {
                console.log('--------')
                this.status = 1
                if (this.id) {
                    this.status = 1
                } else {
                    this.status = 0
                }
            },
            out () {
                this.status = 2
            }
                this.getMapList()
            },
        },
        mounted () {
            this.getMapList()
@@ -134,119 +140,17 @@
            width: 100%;
            height: 100%;
            display: flex;
            .left {
                flex: 0 0 auto;
                width: 194px;
                height: 100%;
                margin-left: 20px;
                background: url('./img//left_icon.png') 100% center no-repeat;
                .edit-btn {
                    margin-top: 20px;
                    color: #C6DCE0;
                    text-align: center;
                    line-height: 38px;
                    width: 150px;
                    height: 38px;
                    background: url('./img//btn.png') 100% center no-repeat;
                    background-size: contain;
                    font-size: 16px;
                }
                .left-select {
                    margin-top: 20px;
                    width: 150px;
                }
                .left-item:first-child {
                    margin-top: 138px;
                }
                .left-item {
                    margin-top: 20px;
                    width: 138px;
                    height: 138px;
                    background: url('./img/left_1.png') 0 0 no-repeat;
                    background-size: contain;
                    color: #D6EEEF;
                    position: relative;
                    & > div:first-child {
                        font-size: 23px;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%,-50%);
                    }
                    & > div:last-child {
                        font-size: 12px;
                        position: absolute;
                        left: 50%;
                        bottom: 25px;
                        transform: translate(-50%,-50%);
                    }
                }
                .left-2 {
                    background-image: url('./img/left_2.png');
                }
                .left-3 {
                    background-image: url('./img/left_3.png');
                }
                .left-4 {
                    background-image: url('./img/left_4.png');
                }
                .left-5 {
                    background-image: url('./img/left_5.png');
                }
            }
            .right {
                width: calc(100% -  194px);
                padding-top: 30px; 
                flex: 1 1 auto;
                .top {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .top-item {
                        font-size: 29px;
                        color: #F7F8FA;
                        div:first-child {
                            width: 99px;
                            height: 99px;
                            text-align: center;
                            line-height: 99px;
                            background: url('./img/1.png') 0 0 no-repeat;
                            background-size: contain;
                            color: #D6EEEF;
                        }
                        div:last-child {
                            margin-top: 20px;
                            font-size: 24px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 500;
                            color: #E4FFFE;
                            line-height: 29px;
                            text-shadow: 0px 1px 4px rgba(122,255,248,0.5);
                        }
                    }
                    .top-2 {
                        div:first-child {
                            background-image: url('./img/2.png')
                        }
                        
                    }
                    .top-3 {
                        div:first-child {
                            background-image: url('./img/3.png')
                        }
                    }
                    .top-4 {
                        div:first-child {
                            background-image: url('./img/4.png')
                        }
                    }
                    .top-5 {
                        div:first-child {
                            background-image: url('./img/5.png')
                        }
                    }
                    .top-item ~.top-item {
                        margin-left: 100px;
                    }
                flex: 0 1 auto;
                display: flex;
                flex-direction: column;
                
                .preview-map {
                    margin-top: 20px;
                    flex: 1 1 auto;
                    overflow: hidden;
                }
            }
        }