zksy-device-management/src/views/device/manhole/index.vue

<script setup>
import { ref } from "vue";
import {
  Menu as IconMenu,
  House,
  Monitor,
  Bell,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import HomeIndex from "./home/home-index.vue";
//资产管理
import znzdgl from "./zcgl/znzdgl.vue";
import qxda from "./zcgl/qxda.vue";
import jgzcgl from "./zcgl/jgzcgl.vue";

//联动指挥
import jgkl from "./ldzh/jgkl.vue";
import bjgl from "./ldzh/bjgl.vue";
import angz from "./ldzh/ajgz.vue";
import sgpb from "./ldzh/sgpb.vue";

//案件办理
import ajlzgl from "./ajbl/ajlzgl.vue";
import gdczgl from "./ajbl/gdczgl.vue";
import jbgd from "./ajbl/jbgd.vue";
import bjgd from "./ajbl/bjgd.vue";
//终端运维
import ywrwgl from "./zdyw/ywrwgl.vue";
import gzgl from "./zdyw/gzgl.vue";
import sjtj from "./zdyw/sjtj.vue";
//数据分析
import tjfx from "./sjfx/tjfx.vue";

const componentsMap = {
  HomeIndex,
  znzdgl,
  qxda,
  jgzcgl,
  jgkl,
  bjgl,
  angz,
  sgpb,
  ajlzgl,
  gdczgl,
  jbgd,
  bjgd,
  ywrwgl,
  gzgl,
  sjtj,
  tjfx,
};

const isCollapse = ref(false);
const currentComponent = ref(HomeIndex);

const componentMapping = {
  1: "HomeIndex",
  "2-1": "znzdgl",
  "2-2": "qxda",
  "2-3": "jgzcgl",
  "3-1": "jgkl",
  "3-2": "bjgl",
  "3-3": "angz",
  "3-4": "sgpb",
  "4-1": "ajlzgl",
  "4-2": "gdczgl",
  "4-3": "jbgd",
  "4-4": "bjgd",
  "5-1": "ywrwgl",
  "5-2": "gzgl",
  "5-3": "sjtj",
  "6-1": "tjfx",
};

const handleSelect = (key) => {
  const componentName = componentMapping[key];
  if (componentName) {
    currentComponent.value = componentsMap[componentName];
  }
};
</script>

<template>
  <div class="flex h-screen bg-gray-100">
    <!-- Sidebar -->
    <div
      class="bg-dark transition-all duration-300 text-white"
      :class="isCollapse ? 'w-16' : 'w-64'"
    >
      <div class="p-4 flex items-center justify-between border-b border-gray-700">
        <h1 v-if="!isCollapse" class="text-xl font-bold">智能井盖管理</h1>
        <el-button type="text" @click="isCollapse = !isCollapse" class="text-white">
          <el-icon>
            <IconMenu />
          </el-icon>
        </el-button>
      </div>

      <el-menu
        default-active="0"
        class="border-none"
        :collapse="isCollapse"
        background-color="#1f2937"
        text-color="#fff"
        active-text-color="#409EFF"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <el-icon>
            <location />
          </el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <!-- <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <location />
            </el-icon>
            <span>资产管理</span>
          </template>
          <el-menu-item index="2-1">智能终端管理</el-menu-item>
          <el-menu-item index="2-2">全息档案</el-menu-item>
          <el-menu-item index="2-3">井盖资产管理</el-menu-item>
        </el-sub-menu> -->

        <el-sub-menu index="3">
          <template #title
            ><el-icon>
              <location />
            </el-icon>
            <span>联动指挥</span>
          </template>
          <el-menu-item index="3-1">井盖概览</el-menu-item>
          <el-menu-item index="3-2">报警管理</el-menu-item>
          <el-menu-item index="3-3">案件跟踪</el-menu-item>
          <el-menu-item index="3-4">施工屏蔽</el-menu-item>
        </el-sub-menu>

        <!-- <el-sub-menu index="4">
          <template #title
            ><el-icon>
              <location />
            </el-icon>
            <span>案件办理</span>
          </template>
          <el-menu-item index="4-1">案件流转管理</el-menu-item>
          <el-menu-item index="4-2">工单处置管理</el-menu-item>
          <el-menu-item index="4-3">经办工单</el-menu-item>
          <el-menu-item index="4-4">办结工单</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title
            ><el-icon>
              <location />
            </el-icon>
            <span>终端运维</span>
          </template>
          <el-menu-item index="5-1">运维任务管理</el-menu-item>
          <el-menu-item index="5-2">故障管理</el-menu-item>
          <el-menu-item index="5-3">数据统计</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="6">
          <template #title
            ><el-icon>
              <location />
            </el-icon>
            <span>数据分析</span>
          </template>
          <el-menu-item index="6-1">统计分析</el-menu-item>
        </el-sub-menu> -->
      </el-menu>
    </div>

    <!-- Main Content -->
    <div class="flex-1 overflow-auto">
      <div class="">
        <component :is="currentComponent"></component>
      </div>
    </div>
  </div>
</template>