2025.9.17 数据产品（待完成）

riku

2025-09-17 4aa86b1ec441c4e358e1cc488d8f021fb80f1355

 src/components/core/SiderMenu.vue

@@ -27,15 +27,18 @@
    >
      <template #reference>
        <div class="fy-button-div" @click="popVisible = !popVisible">
          <div style="font-size: 12px; color: gray; margin-left: 24px; margin-bottom: 4px">
          <div
            v-show="!collapse"
            style="font-size: 12px; color: gray; margin-left: 24px; margin-bottom: 4px;"
          >
            当前系统
          </div>
          <el-row justify="space-between" align="middle">
          <el-row justify="space-between" align="middle" style="flex-wrap: nowrap;">
            <el-space>
              <el-icon :size="16"><Open /></el-icon>
              <span>{{ sysName }}</span>
              <span v-show="!collapse">{{ sysName }}</span>
            </el-space>
            <el-icon><ArrowRight /></el-icon>
            <el-icon v-show="!collapse"><ArrowRight /></el-icon>
          </el-row>
        </div>
      </template>
@@ -53,14 +56,14 @@
    </template>

    <!-- 商标 -->
    <el-row ref="subTitleRef" class="sub-title" justify="center">
    <!-- <el-row ref="subTitleRef" class="sub-title" justify="center">
      <el-space>{{ collapse ? '' : subTitle }}</el-space>
    </el-row>
    </el-row> -->
  </el-menu>
</template>

<script>
import { MENU_FYSP, MENU_FYTZ, MENU_FYPW } from '../../constants/index'
import { MENU_FYSP, MENU_FYTZ, MENU_FYPW } from '@/constants/index';

export default {
  name: 'CoreSiderMenu',
@@ -74,70 +77,71 @@
  data() {
    return {
      popVisible: false,
      menuHeight: '600px',
      menuHeight: '80vh',
      title: '生态环境线上监管',
      subTitle: '©上海飞羽环保科技有限公司',
      sysIndex: 0,
      sysNames: [
        { name: '飞羽监管', des: '' },
        { name: '飞羽环境', des: '' },
        { name: '排污抽运', des: '' }
        // { name: '排污抽运', des: '' }
      ]
    }
    };
  },
  computed: {
    homePage() {
      const paths = this.menuPath(this.menus[0])
      return paths[paths.length - 1].path
      const paths = this.menuPath(this.menus[0]);
      return paths[paths.length - 1].path;
    },
    sysName() {
      return this.sysNames[this.sysIndex].name
      return this.sysNames[this.sysIndex].name;
    },
    menus() {
      return [MENU_FYSP, MENU_FYTZ, MENU_FYPW][this.sysIndex]
      return [MENU_FYSP, MENU_FYTZ, MENU_FYPW][this.sysIndex];
    }
  },
  methods: {
    handleOpen() {},
    handleClose() {},
    choseSys(i) {
      this.sysIndex = i
      const paths = this.menuPath(this.menus[0])
      this.navPage(...paths)
      const p = paths[paths.length - 1].path
      this.$router.push(p)
      this.popVisible = false
      this.sysIndex = i;
      const paths = this.menuPath(this.menus[0]);
      this.navPage(...paths);
      const p = paths[paths.length - 1].path;
      this.$router.push(p);
      this.popVisible = false;
    },
    navPage(...item) {
      const titles = item.map((value) => {
        return value.name
      })
      this.$emit('navPage', titles)
        return value.name;
      });
      this.$emit('navPage', titles);
    },
    calMenuHeight() {
      const h1 = this.$refs.headerRef.$el.offsetHeight
      const h2 = this.$refs.header2Ref.$el.offsetHeight
      const h3 = this.$refs.subTitleRef.$el.offsetHeight
      return `calc(100vh - ${h1}px - ${h2}px - ${h3}px)`
      const h1 = this.$refs.headerRef.$el.offsetHeight;
      const h2 = this.$refs.header2Ref.$el.offsetHeight;
      // const h3 = this.$refs.subTitleRef.$el.offsetHeight;
      const h3 = 0;
      return `calc(100vh - ${h1}px - ${h2}px - ${h3}px)`;
    },
    menuPath(m) {
      if (m.children) {
        const arr = this.menuPath(m.children)
        arr.shift(m)
        return arr
        const arr = this.menuPath(m.children);
        arr.shift(m);
        return arr;
      } else {
        return [m]
        return [m];
      }
    }
  },
  created() {
    this.$router.push(this.homePage)
    this.navPage(...this.menuPath(this.menus[0]))
    this.$router.push(this.homePage);
    this.navPage(...this.menuPath(this.menus[0]));
  },
  mounted() {
    this.menuHeight = this.calMenuHeight()
    this.menuHeight = this.calMenuHeight();
  }
}
};
</script>

<style scoped>
@@ -175,10 +179,14 @@
.el-menu-vertical-demo:not(.el-menu--collapse) {
  /* width: 200px; */
  min-height: 100vh;
  max-height: 100vh;
  /* max-height: 100vh; */
}

.el-menu--collapse {
  min-height: 100vh;
}

.fy-button-div {
  white-space: nowrap;
}
</style>