2025.9.17 数据产品模块（待完成）

feiyu02

2025-09-17 b330e57051e54789eb83d10dc58c4d9d10c608e1

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

@@ -1,22 +1,18 @@
<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>
  <el-menu
    default-active="scene"
    ellipsis
    mode="horizontal"
    style="max-width: 600px"
  >
    <el-menu-item
      v-for="item in menu"
      :key="item.path"
      :index="item.path"
      @click="navPage"
      >{{ item.name }}</el-menu-item
    >
  </el-menu>
  <router-view v-slot="{ Component, route }">
    <keep-alive>
      <component
@@ -54,55 +50,13 @@
    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>
<style scoped></style>