Merge branch 'feature-001' of ssh://114.215.109.124:29418/supervision-vue i...

zmc

2023-12-18 6c74bf912e251347714099a84585f825b32a1c08

 src/components/core/SiderMenu.vue

@@ -10,20 +10,49 @@
    @close="handleClose"
    router
  >
    <!-- 标题 -->
    <el-row ref="headerRef" class="header">
      <el-space>
        <el-avatar size="default" icon="UserFilled" />
        <div>{{ collapse ? '' : title }}</div>
      </el-space>
    </el-row>
    <!-- 系统切换按钮 -->
    <el-popover
      ref="header2Ref"
      placement="right"
      trigger="click"
      effect="dark"
      :visible="popVisible"
    >
      <template #reference>
        <div class="fy-button-div" @click="popVisible = !popVisible">
          <div style="font-size: 12px; color: gray; margin-left: 24px; margin-bottom: 4px">
            当前系统
          </div>
          <el-row justify="space-between" align="middle">
            <el-space>
              <el-icon :size="16"><Open /></el-icon>
              <span>{{ sysName }}</span>
            </el-space>
            <el-icon><ArrowRight /></el-icon>
          </el-row>
        </div>
      </template>
      <div class="fy-button-div" v-for="(n, i) in sysNames" :key="i" @click="choseSys(i)">
        {{ n.name }}
      </div>
    </el-popover>
    <!-- 菜单 -->
    <el-scrollbar :height="menuHeight" v-if="!collapse">
      <MenuItems :routes="routes" @navPage="navPage"> </MenuItems>
      <MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
    </el-scrollbar>

    <template v-else>
      <MenuItems :routes="routes" @navPage="navPage"> </MenuItems>
      <MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
    </template>

    <!-- 商标 -->
    <el-row ref="subTitleRef" class="sub-title" justify="center">
      <el-space>{{ collapse ? '' : subTitle }}</el-space>
    </el-row>
@@ -31,175 +60,84 @@
</template>

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

export default {
  name: 'CoreSiderMenu',
  props: {
    collapse: {
      type: Boolean,
      default: false,
    },
      default: false
    }
  },
  emits: ['navPage'],
  data() {
    return {
      popVisible: false,
      menuHeight: '600px',
      title: '生态环境线上监管',
      subTitle: '©上海飞羽环保科技有限公司',
      routes: [
        {
          icon: 'Search',
          name: '巡查审核',
          children: [
            {
              path: '/procheck',
              icon: 'Search',
              name: '问题审核',
            },
            {
              path: '/changecheck',
              icon: 'Search',
              name: '整改审核',
            },
          ],
        },
        {
          path: '/ledger',
          icon: 'Search',
          name: '台账审核',
        },
        {
          icon: 'Search',
          name: '业务分析',
          children: [
            {
              path: '/analysis/profollow',
              icon: 'Search',
              name: '问题动态跟踪',
            },
            {
              path: '/analysis/proanalysis',
              icon: 'Search',
              name: '问题整改分析',
            },
            {
              path: '/analysis/standardjudge',
              icon: 'Search',
              name: '规范性评估',
            },
          ],
        },
        {
          path: '/dailyreport',
          icon: 'Search',
          name: '日报管理',
        },
        {
          icon: 'Search',
          name: '场景报告',
          children: [
            {
              path: '/scenereport/construction',
              icon: 'Search',
              name: '工地',
            },
            {
              path: '/scenereport/wharf',
              icon: 'Search',
              name: '码头',
            },
            {
              path: '/scenereport/mixing',
              icon: 'Search',
              name: '搅拌站',
            },
            {
              path: '/scenereport/storage',
              icon: 'Search',
              name: '堆场',
            },
          ],
        },
        {
          path: '/notice',
          icon: 'Search',
          name: '通知管理',
        },
        {
          icon: 'Search',
          name: '用户管理',
          children: [
            {
              group: true,
              name: '飞羽监管',
              children: [
                {
                  path: '/fysp/userInfo',
                  name: '账户信息',
                },
                {
                  path: '/fysp/sceneInfo',
                  name: '场景信息',
                },
              ],
            },
            {
              group: true,
              name: '飞羽环境',
              children: [
                {
                  path: '/fytz/userInfo',
                  name: '账户信息',
                },
              ],
            },
          ],
        },
        {
          path: '/scenereport/storage',
          icon: 'Search',
          name: '排污抽运',
        },
        {
          path: '/common/userMatch',
          icon: 'Connection',
          name: '账户匹配',
        },
      ],
    };
      sysIndex: 0,
      sysNames: [
        { name: '飞羽监管', des: '' },
        { name: '飞羽环境', des: '' },
        { name: '排污抽运', des: '' }
      ]
    }
  },
  computed: {
    homePage() {
      return this.routes[0].children
        ? this.routes[0].children[0].path
        : this.routes[0].path;
      const paths = this.menuPath(this.menus[0])
      return paths[paths.length - 1].path
    },
    sysName() {
      return this.sysNames[this.sysIndex].name
    },
    menus() {
      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
    },
    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.subTitleRef.$el.offsetHeight;
      return `calc(100vh - ${h1}px - ${h2}px)`;
      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)`
    },
    menuPath(m) {
      if (m.children) {
        const arr = this.menuPath(m.children)
        arr.shift(m)
        return arr
      } else {
        return [m]
      }
    }
  },
  created() {
    this.$router.push(this.homePage);
    const child = this.routes[0].children
      ? this.routes[0].children[0]
      : undefined;
    this.navPage(this.routes[0], child);
    this.$router.push(this.homePage)
    this.navPage(...this.menuPath(this.menus[0]))
  },
  mounted() {
    this.menuHeight = this.calMenuHeight();
  },
};
    this.menuHeight = this.calMenuHeight()
  }
}
</script>

<style scoped>
@@ -207,7 +145,7 @@
  color: white;
  background-color: #454f5a;
  padding: 10px;
  margin-bottom: 10px;
  /* margin-bottom: 10px; */
  box-shadow: 0 0.4rem 0.7rem 0 #5d656e;
  white-space: nowrap;
  overflow: hidden;