1. 修改问题整改界面中左侧列表的状态图标

riku

2024-11-21 0bd8b4947527f0d1a3fe445d84fb776ce021507e

 src/components/core/SiderMenu.vue

@@ -10,173 +10,107 @@
    @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
            v-show="!collapse"
            style="font-size: 12px; color: gray; margin-left: 24px; margin-bottom: 4px;"
          >
            当前系统
          </div>
          <el-row justify="space-between" align="middle" style="flex-wrap: nowrap;">
            <el-space>
              <el-icon :size="16"><Open /></el-icon>
              <span v-show="!collapse">{{ sysName }}</span>
            </el-space>
            <el-icon v-show="!collapse"><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-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';

export default {
  name: 'CoreSiderMenu',
  props: {
    collapse: {
      type: Boolean,
      default: false,
    },
      default: false
    }
  },
  emits: ['navPage'],
  data() {
    return {
      menuHeight: '600px',
      popVisible: false,
      menuHeight: '80vh',
      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;
@@ -185,20 +119,28 @@
    },
    calMenuHeight() {
      const h1 = this.$refs.headerRef.$el.offsetHeight;
      const h2 = this.$refs.subTitleRef.$el.offsetHeight;
      return `calc(100vh - ${h1}px - ${h2}px)`;
      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;
      } 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.navPage(...this.menuPath(this.menus[0]));
  },
  mounted() {
    this.menuHeight = this.calMenuHeight();
  },
  }
};
</script>

@@ -207,7 +149,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;
@@ -237,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>