新增车辆轨迹

“dzb”

2022-11-02 d1275c89f3e4ed08ab33d0e06c04d6e9d4959654

 src/views/operate/car/soilCar/index.vue

@@ -1,3 +1,103 @@
<template>
    <div class="soil-car"></div>
</template>
    <div class="soil-car">
        <div class="soil-car-header">
            <span>基本信息</span>
        </div>
        <div class="soil-car-main">
            <el-form :inline="true" :model="car">
                <div class="car-item">
                    <el-form-item label="输入查询:" class="car-item-container">
                        <el-input v-model="car.carNumber" placeholder="请输入车牌号"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆使用人员:" class="car-item-container car-item-box">
                        <div>{{ car.carOwner }}</div>
                    </el-form-item>
                    <el-form-item label="联系方式:" class="car-item-container car-item-box">
                        <div>{{ car.carPhone }}</div>
                    </el-form-item>
                </div>
                <div class="car-item">
                    <el-form-item label="施工单位:" class="car-item-container">
                        <div>{{ car.carDept }}</div>
                    </el-form-item>
                    <el-form-item label="施工地址:" class="car-item-container car-item-box">
                        <div>{{ car.carTeam }}</div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="soil-car-footer">
            <div>车辆轨迹分析图</div>
            <div class="map-box">
                <MyMap></MyMap>
            </div>
        </div>
    </div>
</template>
<script>
import MyMap from '@/components/map'
export default {
    components: {
        MyMap
    },
    data() {
        return {
            carNumber: '',
            car: {

            }
        }
    }
}
</script>
<style lang="scss" scoped>
.soil-car {
    color: #4b9bb7;
    padding: 20px;

    .soil-car-header {
        line-height: 60px;
        text-align: left;
    }

    .soil-car-main {
        display: flex;
        flex-direction: column;

        .car-item {
            line-height: 60px;
            display: flex;
            flex: 1;
            text-align: left;

            .car-item-box {
                margin-left: 10%;
            }

            .car-item-container {
                width: 26%;
            }
        }

        ::v-deep .el-form-item__label {
            color: #4b9bb7;
        }

        ::v-deep .el-form-item {
            line-height: 40px;
        }
    }

    .soil-car-footer {
        div:nth-child(1) {
            text-align: left;
            line-height: 40px;
        }

        .map-box {
            width: 100%;
            height: 55vh;
        }
    }
}
</style>