update

gaosp

2024-01-20 cdf34288f7529ab84d2b47183e8ed17911a17c7c

update

 src/container/mapPreview/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:21:10
 * @LastEditTime: 2024-01-20 19:30:32
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/index.vue
-->
<template>
@@ -17,9 +17,13 @@
            </LeftStatus>
            <div class="right">
                <Status v-show="id" :info="info">
                    <template slot="before">
                        <div style="margin-right: auto;">
                        </div>
                    </template>
                    <template slot="after">
                        <div class="work-list">
                            <span v-for="item in mapList">{{item.name}}</span>
                            <span :class="id===item.id ? 'active' : ''" v-for="item in mapList" @click="select(item)">{{item.name}}</span>
                        </div>
                    </template>
                </Status>
@@ -98,6 +102,9 @@
        }
    },
    methods: {
        select (v) {
            this.id = v.id
        },
        getMapList() {
            this.$store.dispatch('GetPlanList', {}).then(res => {
                try {
@@ -129,16 +136,27 @@
<style lang="scss" scoped>
.work-list {
    display: flex;
    justify-items: flex-end;
    margin-left: auto;
    margin-right: 20px;
    span {
        min-width: 68px;
        width: 68px;
        text-align: center;
        line-height: 28px;
        background: rgba(23,38,67,0.6);
        border-radius: 50px;
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(154, 254, 254, 1), rgba(75, 120, 205, 1)) 1 1;
        overflow: hidden;
        border-radius: 14px;
        border: 2px solid #66676E;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        color: #F7F8FA;
        cursor: pointer;
    }
    span.active {
        border: 2px solid #2D487D;
        color: #6BAFCF;
    }
    span ~ span {
        margin-left: 20px;
    }
}
.workshop {

 src/container/preview/index.vue

@@ -1,14 +1,14 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 17:25:05
 * @LastEditTime: 2024-01-20 19:32:59
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/preview/index.vue
-->
<template>
    <div class="workshop">
        <div class="preview">
            <LeftStatus class="left" :info="info">
                <template>
                <!-- <template>
                    <el-select clearable class="left-select" v-model="id" placeholder="请选择">
                        <el-option
                        v-for="item in mapList"
@@ -17,10 +17,20 @@
                        :value="item.id">
                        </el-option>
                    </el-select>
                </template>
                </template> -->
            </LeftStatus>
            <div class="right">
                <Status v-show="id" :info="info"/>
                <Status v-show="id" :info="info">
                    <template slot="before">
                        <div style="margin-right: auto;">
                        </div>
                    </template>
                    <template slot="after">
                        <div class="work-list">
                            <span :class="id===item.id ? 'active' : ''" v-for="item in mapList" @click="select(item)">{{item.name}}</span>
                        </div>
                    </template>
                </Status>
                <div class="preview-map">
                    <Map v-if="id" :id="id" :status="2" :currentMap="currentMap"  @out="out" />
                </div>
@@ -95,6 +105,9 @@
            }
        },
        methods: {
            select(v) {
                this.id =v.id
            },
            getMapList() {
                try {
                    this.mapList = this.workshopList.filter (v => v.gridSetting && v.gridSetting!='{}')
@@ -123,6 +136,31 @@
    
</style>
<style lang="scss" scoped>
    .work-list {
    display: flex;
    margin-left: auto;
    margin-right: 20px;
    span {
        width: 68px;
        text-align: center;
        line-height: 28px;
        background: rgba(23,38,67,0.6);
        overflow: hidden;
        border-radius: 14px;
        border: 2px solid #66676E;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        color: #F7F8FA;
        cursor: pointer;
    }
    span.active {
        border: 2px solid #2D487D;
        color: #6BAFCF;
    }
    span ~ span {
        margin-left: 20px;
    }
}
    .workshop {
        width: 100%;
        height: 100%;