2025.9.18 数据产品（待完成）

riku

2025-09-18 c1d2051abc8ca88cd07f0d7c56c0dbf8165d5c33

 src/views/fysp/data-product/base-data-product/ProdManage.vue

@@ -1,23 +1,21 @@
<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"
    >
      <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 + 'px' }">
    <keep-alive>
      <component
        v-if="route.meta.keepAlive"
@@ -29,11 +27,16 @@
  </router-view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ref, onMounted, provide, inject, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const contentMaxHeight = inject('contentMaxHeight');

const router = useRouter();
const route = useRoute();

const menuRef = ref(null);
const height = ref(contentMaxHeight.value);

const menu = ref([
  {
@@ -46,7 +49,7 @@
    path: 'evaluate'
  },
  {
    name: '巡查信息',
    name: '整改清单',
    path: 'inspection'
  },
  {
@@ -54,55 +57,29 @@
    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 contentMaxHeight.value - h;
  // 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',
  computed(() => height.value)
);
</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>