新增车辆轨迹

“dzb”

2022-11-02 d1275c89f3e4ed08ab33d0e06c04d6e9d4959654

新增车辆轨迹

 src/views/layout/components/Main/index.vue

@@ -26,6 +26,7 @@
  padding: 0;
  .content {
    padding: 11px;
    height: 100%;
  }
}
</style>

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

@@ -1,3 +1,95 @@
<template>
    <div class="law-car"></div>
</template>
    <div class="law-car">
        <div class="law-car-header">
            <span>基本信息</span>
        </div>
        <div class="law-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="law-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>
.law-car {
    color: #4b9bb7;
    padding: 20px;
    .law-car-header{
        line-height: 60px;
        text-align: left;
    }
    .law-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;
        }
    }
    .law-car-footer{
        div:nth-child(1){
            text-align: left;
            line-height: 40px;
        }
        .map-box{
            width: 100%;
            height: 55vh;
        }
    }
}
</style>

 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>