<template>
|
<div style="height: 100%">
|
<div class="left-top" style="margin-bottom: 20px">
|
<span>新建仿真方案</span>
|
<span class="clickable-text" @click="goBack">返回列表</span>
|
</div>
|
<el-tabs
|
style="height: calc(100% - 40px)"
|
v-model="activeName"
|
type="card"
|
class="demo-tabs"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane label="行政区划仿真" name="first">
|
<city-sim />
|
</el-tab-pane>
|
<el-tab-pane label="重点区域仿真" name="second">
|
<city-sim />
|
</el-tab-pane>
|
<el-tab-pane label="重点沟仿真" name="third">
|
<kg-sim />
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, defineEmits } from "vue";
|
import citySim from "./CitySim.vue";
|
import kgSim from "./KGSim.vue";
|
|
import { useSimStore } from "@/store/simulation";
|
|
const simStore = useSimStore();
|
|
// 定义返回事件
|
const emits = defineEmits(["back"]);
|
|
// 当前激活的标签页
|
const activeName = ref("first");
|
|
// 点击值
|
const clickValue = ref("");
|
|
// 标签点击事件
|
const handleClick = (tab) => {
|
simStore.handleClickTab(tab.props.label);
|
};
|
|
// 返回上一级
|
const goBack = () => {
|
emits("back", clickValue.value);
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.demo-tabs > .el-tabs__content {
|
padding: 32px;
|
color: #6b778c;
|
font-size: 32px;
|
font-weight: 600;
|
height: 100%;
|
}
|
/deep/.el-tabs__header {
|
margin: 0px !important;
|
}
|
/deep/ .el-tabs__item.is-active,
|
/deep/ .el-tabs__item:hover {
|
color: #fff;
|
}
|
|
/deep/ .el-tabs__item {
|
padding: 0 18px;
|
color: #fff;
|
background-color: #009688;
|
}
|
.clickable-text {
|
margin-left: 85px;
|
cursor: pointer;
|
font-size: 14px;
|
color: #61f7d4;
|
}
|
.el-tab-pane {
|
height: 100%;
|
}
|
</style>
|
