1
0

Menu.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805
  1. <template>
  2. <div class="menu" v-if="currentMenu.length">
  3. <ul class="menu-list">
  4. <li
  5. class="menu-item"
  6. v-for="(menu, index) of currentMenu"
  7. :key="menu"
  8. @click="click(index)"
  9. :class="{ active: activeIndex == index }"
  10. @mouseenter="subMenuShow(menu.children, index)"
  11. >
  12. <router-link v-if="!menu.children" :to="menu.path">
  13. <el-tooltip
  14. class="item"
  15. effect="dark"
  16. :content="menu.text"
  17. placement="bottom"
  18. :show-after="500"
  19. :enterable="false"
  20. hide-after="10"
  21. >
  22. <div
  23. class="menu-icon svg-icon"
  24. :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'"
  25. >
  26. <SvgIcon :svgid="menu.icon"></SvgIcon>
  27. </div>
  28. </el-tooltip>
  29. </router-link>
  30. <el-tooltip
  31. v-else
  32. class="item"
  33. effect="dark"
  34. :content="menu.text"
  35. placement="bottom"
  36. :show-after="500"
  37. :enterable="false"
  38. hide-after="10"
  39. >
  40. <div
  41. class="menu-icon svg-icon"
  42. :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'"
  43. >
  44. <SvgIcon :svgid="menu.icon"></SvgIcon>
  45. </div>
  46. </el-tooltip>
  47. <!-- <div v-if="menu.children" class="sub-menu-item">
  48. <div class="menu-icon svg-icon" :class="activeIndex == index ? 'svg-icon-green' : 'svg-icon-gray'">
  49. <SvgIcon :svgid="menu.icon"></SvgIcon>
  50. </div>
  51. </div> -->
  52. </li>
  53. </ul>
  54. </div>
  55. <div
  56. class="sub-menu"
  57. v-show="isShowSubMenu"
  58. @mouseleave="subMenuHide"
  59. v-if="$store.state.themeName === 'dark'"
  60. >
  61. <ul class="menu-list">
  62. <li
  63. v-show="!menu.path.includes('decision1Mx')"
  64. class="menu-item"
  65. v-for="(menu, index) of subMenu"
  66. @click="subclick(index)"
  67. :key="menu"
  68. :class="{ active: subIndex == index }"
  69. >
  70. <router-link :to="menu.path">
  71. <div class="menu-icon svg-icon">
  72. <!-- <SvgIcon :svgid="menu.icon"></SvgIcon> -->
  73. </div>
  74. <div
  75. class="sub-menu-text"
  76. :class="subIndex == index ? 'green' : 'gray'"
  77. >
  78. {{ menu.text }}
  79. </div>
  80. </router-link>
  81. </li>
  82. </ul>
  83. </div>
  84. </template>
  85. <script>
  86. import SvgIcon from "@com/coms/icon/svg-icon.vue";
  87. import { fillterMenuRoutes } from "@/utills/handleRoutes.js";
  88. export default {
  89. components: {
  90. SvgIcon,
  91. },
  92. props: {},
  93. data() {
  94. return {
  95. currRoot: "home",
  96. menuData: [
  97. {
  98. id: "stateMonitor",
  99. text: "安全监视",
  100. data: [],
  101. },
  102. {
  103. id: "economicsOperation",
  104. text: "经济运行",
  105. data: [],
  106. },
  107. {
  108. id: "health",
  109. text: "智慧检修",
  110. data: [],
  111. },
  112. {
  113. id: "others",
  114. text: "其他",
  115. data: [
  116. // {
  117. // text: "自定制报表管理",
  118. // icon: "svg-自定制报表管理",
  119. // path: "/others/report",
  120. // children: [
  121. // {
  122. // text: "日报表",
  123. // icon: "",
  124. // path: "/others/report/gjyrbb",
  125. // },
  126. // {
  127. // text: "风电场站自定义",
  128. // icon: "",
  129. // path: "/others/report/fdczzdy",
  130. // },
  131. // {
  132. // text: "风电项目自定义",
  133. // icon: "",
  134. // path: "/others/report/fdxmzdy",
  135. // },
  136. // ],
  137. // },
  138. // {
  139. // text: "统计分析",
  140. // icon: "svg-统计分析",
  141. // path: "/others/tjfx",
  142. // children: [
  143. // {
  144. // text: "统计分析",
  145. // icon: "svg-matrix",
  146. // path: "/others/tjfx",
  147. // },
  148. // {
  149. // text: "表底值查询",
  150. // icon: "svg-matrix",
  151. // path: "/others/bdzcx",
  152. // },
  153. // ],
  154. // },
  155. // {
  156. // text: "报表管理",
  157. // icon: "svg-报表管理",
  158. // path: "/others/oafd",
  159. // children: [
  160. // {
  161. // text: "OA日报",
  162. // icon: "svg-matrix",
  163. // path: "/others/oafd",
  164. // },
  165. // {
  166. // text: "OA日报(光伏)",
  167. // icon: "svg-matrix",
  168. // path: "/others/oagf",
  169. // },
  170. // {
  171. // text: "新能源日报",
  172. // icon: "svg-matrix",
  173. // path: "/others/xnyrb",
  174. // },
  175. // {
  176. // text: "国电MIS日报(风电)",
  177. // icon: "svg-matrix",
  178. // path: "/others/missfdrb",
  179. // },
  180. // {
  181. // text: "国电MIS日报(光伏)",
  182. // icon: "svg-matrix",
  183. // path: "/others/missgfrb",
  184. // },
  185. // {
  186. // text: "新能源风电生产月报",
  187. // icon: "svg-matrix",
  188. // path: "/others/xnyfdscyb",
  189. // },
  190. // {
  191. // text: "麻黄山生产月报",
  192. // icon: "svg-matrix",
  193. // path: "/others/mhsscyb",
  194. // },
  195. // {
  196. // text: "牛首山生产月报",
  197. // icon: "svg-matrix",
  198. // path: "/others/nssscyb",
  199. // },
  200. // {
  201. // text: "青山生产月报",
  202. // icon: "svg-matrix",
  203. // path: "/others/qsscyb",
  204. // },
  205. // {
  206. // text: "石板泉生产月报",
  207. // icon: "svg-matrix",
  208. // path: "/others/sbqscyb",
  209. // },
  210. // {
  211. // text: "香山生产月报",
  212. // icon: "svg-matrix",
  213. // path: "/others/xsscyb",
  214. // },
  215. // {
  216. // text: "新能源光伏生产月报",
  217. // icon: "svg-matrix",
  218. // path: "/others/xnygfscyb",
  219. // },
  220. // {
  221. // text: "大武口生产月报",
  222. // icon: "svg-matrix",
  223. // path: "/others/dwkscyb",
  224. // },
  225. // {
  226. // text: "平罗生产月报",
  227. // icon: "svg-matrix",
  228. // path: "/others/plscyb",
  229. // },
  230. // {
  231. // text: "宣和生产月报",
  232. // icon: "svg-matrix",
  233. // path: "/others/xhscyb",
  234. // },
  235. // ],
  236. // },
  237. // {
  238. // text: "原始数据查询",
  239. // icon: "svg-报表首页",
  240. // path: "/others/realSearch",
  241. // children: [
  242. // {
  243. // text: "测点数据查询",
  244. // icon: "svg-wind-site",
  245. // path: "/others/realSearch",
  246. // },
  247. // {
  248. // text: "测点历史数据查询",
  249. // icon: "svg-wind-site",
  250. // path: "/others/historySearch",
  251. // },
  252. // {
  253. // text: "气象历史数据",
  254. // icon: "svg-wind-site",
  255. // path: "/others/weather",
  256. // },
  257. // {
  258. // text: "数据导出",
  259. // icon: "svg-wind-site",
  260. // path: "/others/ExportExcel",
  261. // },
  262. // {
  263. // text: "设备管理",
  264. // icon: "svg-wind-site",
  265. // path: "/device/device",
  266. // },
  267. // ],
  268. // },
  269. // {
  270. // text: "预警记录",
  271. // icon: "svg-预警记录",
  272. // path: "/others/alarmCenter/alarmcenter",
  273. // children: [
  274. // {
  275. // text: "预警管理",
  276. // icon: "svg-wind-site",
  277. // path: "/others/alarmCenter/alarmcenter",
  278. // },
  279. // {
  280. // text: "停机事件管理",
  281. // icon: "svg-wind-site",
  282. // path: "/others/alarmCenter/tjsj",
  283. // },
  284. // {
  285. // text: "限电管理",
  286. // icon: "svg-wind-site",
  287. // path: "/others/alarmCenter/xdgl",
  288. // },
  289. // {
  290. // text: "升压站报警",
  291. // icon: "svg-wind-site",
  292. // path: "/others/alarmCenter/boosterAlarm",
  293. // },
  294. // {
  295. // text: "SCADA报警",
  296. // icon: "svg-wind-site",
  297. // path: "/others/alarmCenter/scadaAlarm",
  298. // },
  299. // {
  300. // text: "自定义报警",
  301. // icon: "svg-wind-site",
  302. // path: "/others/alarmCenter/customAlarm",
  303. // },
  304. // {
  305. // text: "自定义报警统计",
  306. // icon: "svg-wind-site",
  307. // path: "/others/alarmCenter/customStatistics",
  308. // },
  309. // ],
  310. // },
  311. // {
  312. // text: "专家知识",
  313. // icon: "svg-专家知识",
  314. // path: "/others/knowledge/knowledge",
  315. // children: [
  316. // {
  317. // text: "故障知识列表",
  318. // icon: "svg-matrix",
  319. // path: "/others/knowledge/knowledge",
  320. // },
  321. // {
  322. // text: "安全措施知识",
  323. // icon: "svg-matrix",
  324. // path: "/others/knowledge/knowledge2",
  325. // },
  326. // {
  327. // text: "排查检修方案",
  328. // icon: "svg-matrix",
  329. // path: "/others/knowledge/knowledge6",
  330. // },
  331. // {
  332. // text: "预警知识",
  333. // icon: "svg-matrix",
  334. // path: "/others/knowledge/knowledge7",
  335. // },
  336. // {
  337. // text: "特征参数",
  338. // icon: "svg-matrix",
  339. // path: "/others/knowledge/knowledge5",
  340. // },
  341. // {
  342. // text: "风险辨识知识",
  343. // icon: "svg-matrix",
  344. // path: "/others/knowledge/knowledge3",
  345. // },
  346. // {
  347. // text: "作业指导知识",
  348. // icon: "svg-matrix",
  349. // path: "/others/knowledge/knowledge4",
  350. // },
  351. // ],
  352. // },
  353. // {
  354. // text: "样本库",
  355. // icon: "svg-报表管理",
  356. // path: "/others/fault",
  357. // children: [
  358. // {
  359. // text: "故障训练样本库",
  360. // icon: "svg-matrix",
  361. // path: "/others/fault",
  362. // },
  363. // {
  364. // text: "性能下降样本库",
  365. // icon: "svg-matrix",
  366. // path: "/others/performance",
  367. // },
  368. // {
  369. // text: "预警分析样本库",
  370. // icon: "svg-matrix",
  371. // path: "/others/warning",
  372. // },
  373. // {
  374. // text: "性能预警综合分析",
  375. // icon: "svg-matrix",
  376. // path: "/others/analysis",
  377. // },
  378. // // {
  379. // // text: "功率曲线综合分析",
  380. // // icon: "svg-matrix",
  381. // // path: "/others/powerline/analysis",
  382. // // },
  383. // {
  384. // text: "知识库",
  385. // icon: "svg-matrix",
  386. // path: "/others/knowledgeBase",
  387. // },
  388. // // {
  389. // // text: "发电能力分析",
  390. // // icon: "svg-matrix",
  391. // // path: "/others/abilityAnalysis",
  392. // // },
  393. // // {
  394. // // text: "风电营销样本库",
  395. // // icon: "svg-matrix",
  396. // // path: "/others/market",
  397. // // }
  398. // {
  399. // text: "风机检修规则",
  400. // icon: "svg-matrix",
  401. // path: "/others/overhaulRule",
  402. // },
  403. // {
  404. // text: "故障手册",
  405. // icon: "svg-matrix",
  406. // path: "/others/faultManual",
  407. // },
  408. // ],
  409. // },
  410. ],
  411. },
  412. {
  413. id: "save",
  414. text: "安全管控",
  415. data: [
  416. {
  417. text: "安全管控",
  418. icon: "svg-安全管控",
  419. path: "/save/personnel",
  420. children: [
  421. {
  422. text: "人员矩阵",
  423. icon: "svg-wind-site",
  424. path: "/save/personnel",
  425. },
  426. {
  427. text: "全局监视",
  428. icon: "svg-wind-site",
  429. path: "/globalMonitor",
  430. },
  431. ],
  432. },
  433. ],
  434. },
  435. // {
  436. // id: "znbb",
  437. // text: "智能报表",
  438. // data: [
  439. // {
  440. // text: '报表首页',
  441. // icon: 'svg-wind-site',
  442. // path: '/reportPandect'
  443. // },
  444. // // 统计分析
  445. // {
  446. // text: "统计分析",
  447. // icon: "svg-matrix",
  448. // path: "/tjfx",
  449. // children: [
  450. // {
  451. // text: "统计分析",
  452. // icon: "svg-matrix",
  453. // path: "/tjfx",
  454. // },
  455. // {
  456. // text: "表底值查询",
  457. // icon: "svg-matrix",
  458. // path: "/bdzcx",
  459. // },
  460. // ],
  461. // },
  462. // {
  463. // text: "报表管理",
  464. // icon: "svg-matrix",
  465. // path: "/bdzcx",
  466. // children: [
  467. // {
  468. // text: "OA日报",
  469. // icon: "svg-matrix",
  470. // path: "/oafd",
  471. // },
  472. // {
  473. // text: "OA日报(光伏)",
  474. // icon: "svg-matrix",
  475. // path: "/oagf",
  476. // },
  477. // {
  478. // text: "新能源日报",
  479. // icon: "svg-matrix",
  480. // path: "/xnyrb",
  481. // },
  482. // {
  483. // text: "山西晋能MISS日报(风电)",
  484. // icon: "svg-matrix",
  485. // path: "/missfdrb",
  486. // },
  487. // {
  488. // text: "山西晋能MISS日报(光伏)",
  489. // icon: "svg-matrix",
  490. // path: "/missgfrb",
  491. // },
  492. // {
  493. // text: "新能源风电生产月报",
  494. // icon: "svg-matrix",
  495. // path: "/xnyfdscyb",
  496. // },
  497. // {
  498. // text: "麻黄山生产月报",
  499. // icon: "svg-matrix",
  500. // path: "/mhsscyb",
  501. // },
  502. // {
  503. // text: "牛首山生产月报",
  504. // icon: "svg-matrix",
  505. // path: "/nssscyb",
  506. // },
  507. // {
  508. // text: "青山生产月报",
  509. // icon: "svg-matrix",
  510. // path: "/qsscyb",
  511. // },
  512. // {
  513. // text: "石板泉生产月报",
  514. // icon: "svg-matrix",
  515. // path: "/sbqscyb",
  516. // },
  517. // {
  518. // text: "香山生产月报",
  519. // icon: "svg-matrix",
  520. // path: "/xsscyb",
  521. // },
  522. // {
  523. // text: "新能源光伏生产月报",
  524. // icon: "svg-matrix",
  525. // path: "/xnygfscyb",
  526. // },
  527. // {
  528. // text: "大武口生产月报",
  529. // icon: "svg-matrix",
  530. // path: "/dwkscyb",
  531. // },
  532. // {
  533. // text: "平罗生产月报",
  534. // icon: "svg-matrix",
  535. // path: "/plscyb",
  536. // },
  537. // {
  538. // text: "宣和生产月报",
  539. // icon: "svg-matrix",
  540. // path: "/xhscyb",
  541. // },
  542. // ],
  543. // },
  544. // {
  545. // text: "自定制报表管理",
  546. // icon: "svg-matrix",
  547. // path: "/fdczzdy",
  548. // children: [
  549. // {
  550. // text: "风电场站自定义",
  551. // icon: "svg-matrix",
  552. // path: "/fdczzdy",
  553. // },
  554. // {
  555. // text: "风电项目自定义",
  556. // icon: "svg-matrix",
  557. // path: "/fdxmzdy",
  558. // },
  559. // {
  560. // text: "光伏场站自定义",
  561. // icon: "svg-matrix",
  562. // path: "/gfczzdy",
  563. // },
  564. // {
  565. // text: "光伏项目自定义",
  566. // icon: "svg-matrix",
  567. // path: "/gfxmzdy",
  568. // },
  569. // ],
  570. // },
  571. // ],
  572. // },
  573. ],
  574. activeIndex: 0,
  575. isShowSubMenu: false,
  576. parentIndex: null,
  577. subMenu: [],
  578. subIndex: null,
  579. };
  580. },
  581. methods: {
  582. fillterMenuRoutes,
  583. click(index) {
  584. this.activeIndex = index;
  585. this.subIndex = null;
  586. },
  587. subMenuShow(children, index) {
  588. if (children) {
  589. this.isShowSubMenu = true;
  590. this.parentIndex = index;
  591. } else {
  592. this.isShowSubMenu = false;
  593. this.parentIndex = null;
  594. }
  595. this.subMenu = children;
  596. },
  597. subMenuHide() {
  598. this.isShowSubMenu = false;
  599. this.parentIndex = null;
  600. // this.subMenu = [];
  601. },
  602. subclick(index) {
  603. this.activeIndex = this.parentIndex;
  604. this.subIndex = index;
  605. },
  606. },
  607. computed: {
  608. currentMenu() {
  609. let stateRoutes = this.$store.state.routes.routes;
  610. if (stateRoutes.length) {
  611. let routeObj = this.$store.state.routes.routes.find(
  612. (i) => i.path == "/" + this.currRoot
  613. );
  614. let currData = [];
  615. if (Object.keys(routeObj).length) {
  616. let a = JSON.parse(JSON.stringify(routeObj));
  617. if (a.children) {
  618. a.children.forEach((path) => {
  619. if (!path.hidden) {
  620. if (path.children) {
  621. currData.push({
  622. text: path.meta.title,
  623. icon: path.meta.icon,
  624. path: `/${this.currRoot}/${path.path}`,
  625. children: [],
  626. });
  627. let cu = currData.find((i) => i.text == path.meta.title);
  628. path.children.forEach((cputh) => {
  629. let caputh = "";
  630. if (cputh.path.includes(":")) {
  631. caputh = `${cputh.path.substring(
  632. 0,
  633. cputh.path.indexOf("/:")
  634. )}/SXJ_KGDL_GJY_FDC_STA/SXJ_KGDL_GJY_F_WT_0001_EQ`;
  635. } else {
  636. caputh = cputh.path;
  637. }
  638. cu["children"].push({
  639. text: cputh.meta.title,
  640. icon: cputh.meta.icon,
  641. path: `/${this.currRoot}/${path.path}/${caputh}`,
  642. });
  643. });
  644. cu.path = cu.children[0].path;
  645. } else {
  646. currData.push({
  647. text: path.meta.title,
  648. icon: path.meta.icon,
  649. path: `/${this.currRoot}/${path.path}`,
  650. });
  651. }
  652. }
  653. });
  654. this.$store.dispatch("changeMenuData", currData);
  655. return currData;
  656. } else {
  657. this.$store.dispatch("changeMenuData", []);
  658. return [];
  659. }
  660. } else {
  661. this.$store.dispatch("changeMenuData", []);
  662. return [];
  663. }
  664. } else {
  665. this.$store.dispatch("changeMenuData", []);
  666. return [];
  667. }
  668. },
  669. },
  670. watch: {
  671. // 监听路由
  672. $route: {
  673. handler: function (val, oldVal) {
  674. this.menuData.some((element, index) => {
  675. if (val.path.includes(element.id)) {
  676. this.$nextTick(() => {
  677. this.currRoot = element.id;
  678. this.$nextTick(() => {
  679. this.currentMenu.some((element, index) => {
  680. if (val.path == element.path) {
  681. this.activeIndex = index;
  682. }
  683. });
  684. });
  685. });
  686. return true;
  687. } else {
  688. this.currRoot = "home";
  689. this.activeIndex = 0;
  690. }
  691. });
  692. },
  693. //深度观察监听
  694. deep: true,
  695. },
  696. },
  697. };
  698. </script>
  699. <style lang="less">
  700. .menu {
  701. padding-top: 1.481vh;
  702. z-index: 3001;
  703. .menu-list {
  704. margin: 0;
  705. padding: 0;
  706. list-style: none;
  707. .menu-item {
  708. padding: 1.481vh 0;
  709. text-align: center;
  710. .menu-icon {
  711. display: flex;
  712. justify-content: center;
  713. }
  714. &.active i {
  715. color: #05bb4c;
  716. transition: color 1s;
  717. }
  718. }
  719. }
  720. i {
  721. font-size: 2.222vh;
  722. color: rgba(255, 255, 255, 50%);
  723. }
  724. }
  725. .sub-menu {
  726. position: absolute;
  727. top: 0;
  728. left: 5.3704vh;
  729. width: 158px;
  730. height: 100%;
  731. padding-top: 1.481vh;
  732. background: fade(#192a26, 75);
  733. border-right: 1px solid fade(@green, 50);
  734. box-shadow: inset 11px 0px 20px 0px fade(#021412, 60);
  735. .menu-list {
  736. margin: 0;
  737. padding: 0;
  738. list-style: none;
  739. .menu-item {
  740. display: flex;
  741. text-align: center;
  742. line-height: 1.5;
  743. padding: 8px 0;
  744. background: #121d1c;
  745. a {
  746. display: flex;
  747. width: 100%;
  748. height: 100%;
  749. padding: 0 1.4815vh;
  750. font-size: @fontsize-s;
  751. text-decoration: unset;
  752. .menu-icon {
  753. display: flex;
  754. align-items: center;
  755. svg {
  756. width: 14px;
  757. height: 14px;
  758. use {
  759. fill: fade(@green, 75);
  760. }
  761. }
  762. }
  763. }
  764. &.active {
  765. background: #323e70;
  766. .menu-icon {
  767. display: flex;
  768. svg use {
  769. fill: fade(@white, 75);
  770. }
  771. }
  772. }
  773. .sub-menu-text {
  774. margin-left: 1.1111vh;
  775. color: @gray-l;
  776. }
  777. & + .menu-item {
  778. border-top: 1px solid fade(@darkgray, 40);
  779. }
  780. }
  781. }
  782. i {
  783. font-size: 2.222vh;
  784. color: rgba(255, 255, 255, 50%);
  785. }
  786. }
  787. </style>