1

gaosp

2024-01-12 70a87a18cca12dd0e43360f91a5be9754dc4cb37

 src/container/Map/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-06 23:10:19
 * @LastEditTime: 2024-01-11 22:50:23
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
-->
<template>
@@ -10,7 +10,7 @@
        <div v-else class="preview">
            <div class="left">
                <div @click="editMap" class="edit-btn">
                    进入编辑状态
                    {{id ? '进入编辑状态' : '新增'}}
                </div>
                <el-select clearable class="left-select" v-model="id" placeholder="请选择">
                    <el-option
@@ -42,28 +42,7 @@
                </div>
            </div>
            <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 />
                <div class="preview-map">
                    <Map :status="2" :currentMap="currentMap"  @out="out" />
                </div>
@@ -73,9 +52,11 @@
</template>
<script>
    import Map from './Map.vue'
    import Status from '@/components/newComp/Status'
    export default {
        components: {
            Map
            Map,
            Status
        },
        watch: {
            id (val) {
@@ -99,7 +80,7 @@
        },
        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
@@ -118,7 +99,7 @@
            out () {
                this.status = 2
                this.getMapList()
            }
            },
        },
        mounted () {
            this.getMapList()
@@ -205,58 +186,16 @@
                }
            }
            .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;
                }
            }
        }