simulation-front/src/views/workManagement/multimodeSimulation.vue

<template>
	<div class="container">
		<div class="select-map">
			地图选择：
			<el-select class="select-content" v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
		<div class="content">
			<div class="map"></div>
			<div class="table">
				<div class="table-operate">
					<el-button class="btn" type="primary">添加</el-button>
					<el-button class="btn" type="info">设为仿真视角</el-button>
				</div>
				<el-table class="table-content" ref="multipleTable" :data="tableData" tooltip-effect="dark"
					style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column label="选择车辆" width="120">
						<template slot-scope="scope">{{ scope.row.date }}</template>
					</el-table-column>
					<el-table-column prop="name" label="选择算法" width="120">
					</el-table-column>
					<el-table-column prop="address" label="选择轨迹" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button class="mini-btn" size="mini">编辑</el-button>
							<el-button size="mini-btn" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
				  <el-pagination
				    layout="prev, pager, next"
				    :total="1000">
				  </el-pagination>
				</div>
			</div>
		</div>
		<div class="operate">
			<el-button class="btn" type="primary">保存</el-button>
			<el-button class="btn" type="info">返回</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "MultimodeSimulation", // 工作管理
		components: {},
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '',
				tableData: [{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}],
				multipleSelection: []

			}

		},

		computed: {},

		methods: {},

		// mounted() {},
	};
</script>

<style lang='less' scoped>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.select-map {
		font-size: 1rem;
		color: #333333;
		letter-spacing: 0.05rem;
		padding-left: 1rem;
		width: 100%;
		padding: 1rem;
		background-color: red;
	}

	.content {
		height: 36.5rem;
		display: flex;
		flex-direction: row;

		.map {
			flex: 1;
			background-color: aqua;
		}

		.table {
			flex: 1;
			background-color: antiquewhite;
		}

	}


	.table-operate {
		height: 3.1rem;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.table-content {
		height: 30.5rem;
	}

	.operate {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn {
		color: #FFFFFF;
		height: 2.5rem;
		margin: 1rem;
	}
	
	::v-deep .mini-btn{
		width: 1rem !important;
	}
</style>