123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805 |
- <template>
- <div class="menu" v-if="currentMenu.length">
- <ul class="menu-list">
- <li
- class="menu-item"
- v-for="(menu, index) of currentMenu"
- :key="menu"
- @click="click(index)"
- :class="{ active: activeIndex == index }"
- @mouseenter="subMenuShow(menu.children, index)"
- >
- <router-link v-if="!menu.children" :to="menu.path">
- <el-tooltip
- class="item"
- effect="dark"
- :content="menu.text"
- placement="bottom"
- :show-after="500"
- :enterable="false"
- hide-after="10"
- >
- <div
- class="menu-icon svg-icon"
- :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'"
- >
- <SvgIcon :svgid="menu.icon"></SvgIcon>
- </div>
- </el-tooltip>
- </router-link>
- <el-tooltip
- v-else
- class="item"
- effect="dark"
- :content="menu.text"
- placement="bottom"
- :show-after="500"
- :enterable="false"
- hide-after="10"
- >
- <div
- class="menu-icon svg-icon"
- :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'"
- >
- <SvgIcon :svgid="menu.icon"></SvgIcon>
- </div>
- </el-tooltip>
- <!-- <div v-if="menu.children" class="sub-menu-item">
- <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
- <SvgIcon :svgid="menu.icon"></SvgIcon>
- </div>
- </div> -->
- </li>
- </ul>
- </div>
- <div
- class="sub-menu"
- v-show="isShowSubMenu"
- @mouseleave="subMenuHide"
- v-if="$store.state.themeName === 'dark'"
- >
- <ul class="menu-list">
- <li
- v-show="!menu.path.includes('decision1Mx')"
- class="menu-item"
- v-for="(menu, index) of subMenu"
- @click="subclick(index)"
- :key="menu"
- :class="{ active: subIndex == index }"
- >
- <router-link :to="menu.path">
- <div class="menu-icon svg-icon">
- <!-- <SvgIcon :svgid="menu.icon"></SvgIcon> -->
- </div>
- <div
- class="sub-menu-text"
- :class="subIndex == index ? 'green' : 'gray'"
- >
- {{ menu.text }}
- </div>
- </router-link>
- </li>
- </ul>
- </div>
- </template>
- <script>
- import SvgIcon from "@com/coms/icon/svg-icon.vue";
- import { fillterMenuRoutes } from "@/utills/handleRoutes.js";
- export default {
- components: {
- SvgIcon,
- },
- props: {},
- data() {
- return {
- currRoot: "home",
- menuData: [
- {
- id: "stateMonitor",
- text: "安全监视",
- data: [],
- },
- {
- id: "economicsOperation",
- text: "经济运行",
- data: [],
- },
- {
- id: "health",
- text: "智慧检修",
- data: [],
- },
- {
- id: "others",
- text: "其他",
- data: [
- // {
- // text: "自定制报表管理",
- // icon: "svg-自定制报表管理",
- // path: "/others/report",
- // children: [
- // {
- // text: "日报表",
- // icon: "",
- // path: "/others/report/gjyrbb",
- // },
- // {
- // text: "风电场站自定义",
- // icon: "",
- // path: "/others/report/fdczzdy",
- // },
- // {
- // text: "风电项目自定义",
- // icon: "",
- // path: "/others/report/fdxmzdy",
- // },
- // ],
- // },
- // {
- // text: "统计分析",
- // icon: "svg-统计分析",
- // path: "/others/tjfx",
- // children: [
- // {
- // text: "统计分析",
- // icon: "svg-matrix",
- // path: "/others/tjfx",
- // },
- // {
- // text: "表底值查询",
- // icon: "svg-matrix",
- // path: "/others/bdzcx",
- // },
- // ],
- // },
- // {
- // text: "报表管理",
- // icon: "svg-报表管理",
- // path: "/others/oafd",
- // children: [
- // {
- // text: "OA日报",
- // icon: "svg-matrix",
- // path: "/others/oafd",
- // },
- // {
- // text: "OA日报(光伏)",
- // icon: "svg-matrix",
- // path: "/others/oagf",
- // },
- // {
- // text: "新能源日报",
- // icon: "svg-matrix",
- // path: "/others/xnyrb",
- // },
- // {
- // text: "国电MIS日报(风电)",
- // icon: "svg-matrix",
- // path: "/others/missfdrb",
- // },
- // {
- // text: "国电MIS日报(光伏)",
- // icon: "svg-matrix",
- // path: "/others/missgfrb",
- // },
- // {
- // text: "新能源风电生产月报",
- // icon: "svg-matrix",
- // path: "/others/xnyfdscyb",
- // },
- // {
- // text: "麻黄山生产月报",
- // icon: "svg-matrix",
- // path: "/others/mhsscyb",
- // },
- // {
- // text: "牛首山生产月报",
- // icon: "svg-matrix",
- // path: "/others/nssscyb",
- // },
- // {
- // text: "青山生产月报",
- // icon: "svg-matrix",
- // path: "/others/qsscyb",
- // },
- // {
- // text: "石板泉生产月报",
- // icon: "svg-matrix",
- // path: "/others/sbqscyb",
- // },
- // {
- // text: "香山生产月报",
- // icon: "svg-matrix",
- // path: "/others/xsscyb",
- // },
- // {
- // text: "新能源光伏生产月报",
- // icon: "svg-matrix",
- // path: "/others/xnygfscyb",
- // },
- // {
- // text: "大武口生产月报",
- // icon: "svg-matrix",
- // path: "/others/dwkscyb",
- // },
- // {
- // text: "平罗生产月报",
- // icon: "svg-matrix",
- // path: "/others/plscyb",
- // },
- // {
- // text: "宣和生产月报",
- // icon: "svg-matrix",
- // path: "/others/xhscyb",
- // },
- // ],
- // },
- // {
- // text: "原始数据查询",
- // icon: "svg-报表首页",
- // path: "/others/realSearch",
- // children: [
- // {
- // text: "测点数据查询",
- // icon: "svg-wind-site",
- // path: "/others/realSearch",
- // },
- // {
- // text: "测点历史数据查询",
- // icon: "svg-wind-site",
- // path: "/others/historySearch",
- // },
- // {
- // text: "气象历史数据",
- // icon: "svg-wind-site",
- // path: "/others/weather",
- // },
- // {
- // text: "数据导出",
- // icon: "svg-wind-site",
- // path: "/others/ExportExcel",
- // },
- // {
- // text: "设备管理",
- // icon: "svg-wind-site",
- // path: "/device/device",
- // },
- // ],
- // },
- // {
- // text: "预警记录",
- // icon: "svg-预警记录",
- // path: "/others/alarmCenter/alarmcenter",
- // children: [
- // {
- // text: "预警管理",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/alarmcenter",
- // },
- // {
- // text: "停机事件管理",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/tjsj",
- // },
- // {
- // text: "限电管理",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/xdgl",
- // },
- // {
- // text: "升压站报警",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/boosterAlarm",
- // },
- // {
- // text: "SCADA报警",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/scadaAlarm",
- // },
- // {
- // text: "自定义报警",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/customAlarm",
- // },
- // {
- // text: "自定义报警统计",
- // icon: "svg-wind-site",
- // path: "/others/alarmCenter/customStatistics",
- // },
- // ],
- // },
- // {
- // text: "专家知识",
- // icon: "svg-专家知识",
- // path: "/others/knowledge/knowledge",
- // children: [
- // {
- // text: "故障知识列表",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge",
- // },
- // {
- // text: "安全措施知识",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge2",
- // },
- // {
- // text: "排查检修方案",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge6",
- // },
- // {
- // text: "预警知识",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge7",
- // },
- // {
- // text: "特征参数",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge5",
- // },
- // {
- // text: "风险辨识知识",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge3",
- // },
- // {
- // text: "作业指导知识",
- // icon: "svg-matrix",
- // path: "/others/knowledge/knowledge4",
- // },
- // ],
- // },
- // {
- // text: "样本库",
- // icon: "svg-报表管理",
- // path: "/others/fault",
- // children: [
- // {
- // text: "故障训练样本库",
- // icon: "svg-matrix",
- // path: "/others/fault",
- // },
- // {
- // text: "性能下降样本库",
- // icon: "svg-matrix",
- // path: "/others/performance",
- // },
- // {
- // text: "预警分析样本库",
- // icon: "svg-matrix",
- // path: "/others/warning",
- // },
- // {
- // text: "性能预警综合分析",
- // icon: "svg-matrix",
- // path: "/others/analysis",
- // },
- // // {
- // // text: "功率曲线综合分析",
- // // icon: "svg-matrix",
- // // path: "/others/powerline/analysis",
- // // },
- // {
- // text: "知识库",
- // icon: "svg-matrix",
- // path: "/others/knowledgeBase",
- // },
- // // {
- // // text: "发电能力分析",
- // // icon: "svg-matrix",
- // // path: "/others/abilityAnalysis",
- // // },
- // // {
- // // text: "风电营销样本库",
- // // icon: "svg-matrix",
- // // path: "/others/market",
- // // }
- // {
- // text: "风机检修规则",
- // icon: "svg-matrix",
- // path: "/others/overhaulRule",
- // },
- // {
- // text: "故障手册",
- // icon: "svg-matrix",
- // path: "/others/faultManual",
- // },
- // ],
- // },
- ],
- },
- {
- id: "save",
- text: "安全管控",
- data: [
- {
- text: "安全管控",
- icon: "svg-安全管控",
- path: "/save/personnel",
- children: [
- {
- text: "人员矩阵",
- icon: "svg-wind-site",
- path: "/save/personnel",
- },
- {
- text: "全局监视",
- icon: "svg-wind-site",
- path: "/globalMonitor",
- },
- ],
- },
- ],
- },
- // {
- // id: "znbb",
- // text: "智能报表",
- // data: [
- // {
- // text: '报表首页',
- // icon: 'svg-wind-site',
- // path: '/reportPandect'
- // },
- // // 统计分析
- // {
- // text: "统计分析",
- // icon: "svg-matrix",
- // path: "/tjfx",
- // children: [
- // {
- // text: "统计分析",
- // icon: "svg-matrix",
- // path: "/tjfx",
- // },
- // {
- // text: "表底值查询",
- // icon: "svg-matrix",
- // path: "/bdzcx",
- // },
- // ],
- // },
- // {
- // text: "报表管理",
- // icon: "svg-matrix",
- // path: "/bdzcx",
- // children: [
- // {
- // text: "OA日报",
- // icon: "svg-matrix",
- // path: "/oafd",
- // },
- // {
- // text: "OA日报(光伏)",
- // icon: "svg-matrix",
- // path: "/oagf",
- // },
- // {
- // text: "新能源日报",
- // icon: "svg-matrix",
- // path: "/xnyrb",
- // },
- // {
- // text: "山西晋能MISS日报(风电)",
- // icon: "svg-matrix",
- // path: "/missfdrb",
- // },
- // {
- // text: "山西晋能MISS日报(光伏)",
- // icon: "svg-matrix",
- // path: "/missgfrb",
- // },
- // {
- // text: "新能源风电生产月报",
- // icon: "svg-matrix",
- // path: "/xnyfdscyb",
- // },
- // {
- // text: "麻黄山生产月报",
- // icon: "svg-matrix",
- // path: "/mhsscyb",
- // },
- // {
- // text: "牛首山生产月报",
- // icon: "svg-matrix",
- // path: "/nssscyb",
- // },
- // {
- // text: "青山生产月报",
- // icon: "svg-matrix",
- // path: "/qsscyb",
- // },
- // {
- // text: "石板泉生产月报",
- // icon: "svg-matrix",
- // path: "/sbqscyb",
- // },
- // {
- // text: "香山生产月报",
- // icon: "svg-matrix",
- // path: "/xsscyb",
- // },
- // {
- // text: "新能源光伏生产月报",
- // icon: "svg-matrix",
- // path: "/xnygfscyb",
- // },
- // {
- // text: "大武口生产月报",
- // icon: "svg-matrix",
- // path: "/dwkscyb",
- // },
- // {
- // text: "平罗生产月报",
- // icon: "svg-matrix",
- // path: "/plscyb",
- // },
- // {
- // text: "宣和生产月报",
- // icon: "svg-matrix",
- // path: "/xhscyb",
- // },
- // ],
- // },
- // {
- // text: "自定制报表管理",
- // icon: "svg-matrix",
- // path: "/fdczzdy",
- // children: [
- // {
- // text: "风电场站自定义",
- // icon: "svg-matrix",
- // path: "/fdczzdy",
- // },
- // {
- // text: "风电项目自定义",
- // icon: "svg-matrix",
- // path: "/fdxmzdy",
- // },
- // {
- // text: "光伏场站自定义",
- // icon: "svg-matrix",
- // path: "/gfczzdy",
- // },
- // {
- // text: "光伏项目自定义",
- // icon: "svg-matrix",
- // path: "/gfxmzdy",
- // },
- // ],
- // },
- // ],
- // },
- ],
- activeIndex: 0,
- isShowSubMenu: false,
- parentIndex: null,
- subMenu: [],
- subIndex: null,
- };
- },
- methods: {
- fillterMenuRoutes,
- click(index) {
- this.activeIndex = index;
- this.subIndex = null;
- },
- subMenuShow(children, index) {
- if (children) {
- this.isShowSubMenu = true;
- this.parentIndex = index;
- } else {
- this.isShowSubMenu = false;
- this.parentIndex = null;
- }
- this.subMenu = children;
- },
- subMenuHide() {
- this.isShowSubMenu = false;
- this.parentIndex = null;
- // this.subMenu = [];
- },
- subclick(index) {
- this.activeIndex = this.parentIndex;
- this.subIndex = index;
- },
- },
- computed: {
- currentMenu() {
- let stateRoutes = this.$store.state.routes.routes;
- if (stateRoutes.length) {
- let routeObj = this.$store.state.routes.routes.find(
- (i) => i.path == "/" + this.currRoot
- );
- let currData = [];
- if (Object.keys(routeObj).length) {
- let a = JSON.parse(JSON.stringify(routeObj));
- if (a.children) {
- a.children.forEach((path) => {
- if (!path.hidden) {
- if (path.children) {
- currData.push({
- text: path.meta.title,
- icon: path.meta.icon,
- path: `/${this.currRoot}/${path.path}`,
- children: [],
- });
- let cu = currData.find((i) => i.text == path.meta.title);
- path.children.forEach((cputh) => {
- let caputh = "";
- if (cputh.path.includes(":")) {
- caputh = `${cputh.path.substring(
- 0,
- cputh.path.indexOf("/:")
- )}/SXJ_KGDL_GJY_FDC_STA/SXJ_KGDL_GJY_F_WT_0001_EQ`;
- } else {
- caputh = cputh.path;
- }
- cu["children"].push({
- text: cputh.meta.title,
- icon: cputh.meta.icon,
- path: `/${this.currRoot}/${path.path}/${caputh}`,
- });
- });
- cu.path = cu.children[0].path;
- } else {
- currData.push({
- text: path.meta.title,
- icon: path.meta.icon,
- path: `/${this.currRoot}/${path.path}`,
- });
- }
- }
- });
- this.$store.dispatch("changeMenuData", currData);
- return currData;
- } else {
- this.$store.dispatch("changeMenuData", []);
- return [];
- }
- } else {
- this.$store.dispatch("changeMenuData", []);
- return [];
- }
- } else {
- this.$store.dispatch("changeMenuData", []);
- return [];
- }
- },
- },
- watch: {
- // 监听路由
- $route: {
- handler: function (val, oldVal) {
- this.menuData.some((element, index) => {
- if (val.path.includes(element.id)) {
- this.$nextTick(() => {
- this.currRoot = element.id;
- this.$nextTick(() => {
- this.currentMenu.some((element, index) => {
- if (val.path == element.path) {
- this.activeIndex = index;
- }
- });
- });
- });
- return true;
- } else {
- this.currRoot = "home";
- this.activeIndex = 0;
- }
- });
- },
- //深度观察监听
- deep: true,
- },
- },
- };
- </script>
- <style lang="less">
- .menu {
- padding-top: 1.481vh;
- z-index: 3001;
- .menu-list {
- margin: 0;
- padding: 0;
- list-style: none;
- .menu-item {
- padding: 1.481vh 0;
- text-align: center;
- .menu-icon {
- display: flex;
- justify-content: center;
- }
- &.active i {
- color: #05bb4c;
- transition: color 1s;
- }
- }
- }
- i {
- font-size: 2.222vh;
- color: rgba(255, 255, 255, 50%);
- }
- }
- .sub-menu {
- position: absolute;
- top: 0;
- left: 5.3704vh;
- width: 158px;
- height: 100%;
- padding-top: 1.481vh;
- background: fade(#192a26, 75);
- border-right: 1px solid fade(@green, 50);
- box-shadow: inset 11px 0px 20px 0px fade(#021412, 60);
- .menu-list {
- margin: 0;
- padding: 0;
- list-style: none;
- .menu-item {
- display: flex;
- text-align: center;
- line-height: 1.5;
- padding: 8px 0;
- background: #121d1c;
- a {
- display: flex;
- width: 100%;
- height: 100%;
- padding: 0 1.4815vh;
- font-size: @fontsize-s;
- text-decoration: unset;
- .menu-icon {
- display: flex;
- align-items: center;
- svg {
- width: 14px;
- height: 14px;
- use {
- fill: fade(@green, 75);
- }
- }
- }
- }
- &.active {
- background: #323e70;
- .menu-icon {
- display: flex;
- svg use {
- fill: fade(@white, 75);
- }
- }
- }
- .sub-menu-text {
- margin-left: 1.1111vh;
- color: @gray-l;
- }
- & + .menu-item {
- border-top: 1px solid fade(@darkgray, 40);
- }
- }
- }
- i {
- font-size: 2.222vh;
- color: rgba(255, 255, 255, 50%);
- }
- }
- </style>
|