<template>
|
<!-- <el-menu default-active="scene" ellipsis mode="horizontal" style="max-width: 600px">
|
<el-menu-item index="scene" @click="navPage">场景清单</el-menu-item>
|
<el-menu-item index="evaluate" @click="navPage">评估清单</el-menu-item>
|
<el-menu-item index="inspection" @click="navPage">巡查信息</el-menu-item>
|
<el-menu-item index="monitorData" @click="navPage">监测数据</el-menu-item>
|
</el-menu> -->
|
<!-- <a @click="navPage({ index: 'scene' })"><div>场景清单</div></a>
|
<a @click="navPage({ index: 'evaluate' })"><div>评估清单</div></a>
|
<a @click="navPage({ index: 'inspection' })"><div>巡查信息</div></a>
|
<a @click="navPage({ index: 'monitorData' })"><div>监测数据</div></a> -->
|
<el-space>
|
<template v-for="(item, index) in menu" :key="item.path">
|
<a :class="btnClz(item.selected)" @click="navTo(index)">
|
<div>{{ item.name }}</div>
|
</a>
|
</template>
|
</el-space>
|
<div>sssss</div>
|
<router-view v-slot="{ Component, route }">
|
<keep-alive>
|
<component
|
v-if="route.meta.keepAlive"
|
:is="Component"
|
:key="route.name"
|
/>
|
</keep-alive>
|
<component v-if="!route.meta.keepAlive" :is="Component" :key="route.name" />
|
</router-view>
|
</template>
|
<script setup>
|
import { ref, onMounted } from 'vue';
|
import { useRouter, useRoute } from 'vue-router';
|
|
const router = useRouter();
|
const route = useRoute();
|
|
const menu = ref([
|
{
|
name: '场景清单',
|
path: 'scene',
|
selected: true
|
},
|
{
|
name: '评估清单',
|
path: 'evaluate'
|
},
|
{
|
name: '巡查信息',
|
path: 'inspection'
|
},
|
{
|
name: '监测数据',
|
path: 'monitorData'
|
}
|
]);
|
// console.log(router);
|
// console.log(route.path);
|
|
const navPage = (item) => {
|
console.log(item);
|
if (item.index) {
|
router.push({
|
path: item.index
|
});
|
}
|
};
|
function btnClz(selected) {
|
return (
|
'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8'
|
);
|
}
|
|
function navTo(index) {
|
const m = this.menu;
|
m.forEach((e) => {
|
e.selected = false;
|
});
|
m[index].selected = true;
|
router.replace(m[index].path);
|
}
|
|
onMounted(() => {
|
console.log(route.path);
|
// router.push('/fysp/data-product/base/home/scene');
|
});
|
</script>
|
<style scoped>
|
.mode-btn {
|
padding: 8px 16px;
|
border-radius: 4px;
|
font-size: 14px;
|
color: #303133;
|
background-color: #f5f7fa;
|
border: 1px solid #dcdfe6;
|
cursor: pointer;
|
}
|
.btn-selected {
|
color: #fff;
|
background-color: #409eff;
|
border-color: #409eff;
|
}
|
.btn-unselected {
|
color: #303133;
|
background-color: #f5f7fa;
|
border-color: #dcdfe6;
|
}
|
</style>
|
