riku
2025-09-17 4aa86b1ec441c4e358e1cc488d8f021fb80f1355
src/views/fysp/data-product/base-data-product/ProdManage.vue
@@ -1,23 +1,22 @@
<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 }">
  <el-affix>
    <el-menu
      ref="menuRef"
      default-active="scene"
      ellipsis
      mode="horizontal"
      style="max-width: 600px; background-color: aliceblue"
    >
      <el-menu-item
        v-for="item in menu"
        :key="item.path"
        :index="item.path"
        @click="navPage"
        >{{ item.name }}</el-menu-item
      >
    </el-menu>
  </el-affix>
  <router-view v-slot="{ Component, route }" :style="'height: ' + height">
    <keep-alive>
      <component
        v-if="route.meta.keepAlive"
@@ -29,11 +28,14 @@
  </router-view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const menuRef = ref(null);
const height = ref('calc(100vh - 64px)');
const menu = ref([
  {
@@ -54,55 +56,25 @@
    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);
function calcTableHeight() {
  const h = menuRef.value.$el.offsetHeight;
  return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
}
onMounted(() => {
  console.log(route.path);
  // router.push('/fysp/data-product/base/home/scene');
  height.value = calcTableHeight();
});
// 提供给内部组件视图最大高度
provide('viewHeight', height);
</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>
<style scoped></style>