|
@@ -1,7 +1,11 @@
|
|
<template>
|
|
<template>
|
|
<div class="header-menu">
|
|
<div class="header-menu">
|
|
<ul class="header-menu-list">
|
|
<ul class="header-menu-list">
|
|
- <li class="header-menu-item" v-for="(menu, index) of menus" :key="menu" @click="click(index, menu)" :class="{ active: activeIndex == index }">
|
|
|
|
|
|
+ <li class="header-menu-item"
|
|
|
|
+ v-for="(menu, index) of menus"
|
|
|
|
+ :key="menu"
|
|
|
|
+ @click="click(index, menu)"
|
|
|
|
+ :class="{ active: activeIndex == index }">
|
|
{{ menu.text }}
|
|
{{ menu.text }}
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
@@ -24,35 +28,22 @@ export default {
|
|
return {
|
|
return {
|
|
menus: [
|
|
menus: [
|
|
{
|
|
{
|
|
- id: "monitor",
|
|
|
|
- text: "状态监视",
|
|
|
|
- path: "/monitor/home",
|
|
|
|
- isActive: true,
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- {
|
|
|
|
- id: "performanceAnalysis",
|
|
|
|
- text: "增发分析",
|
|
|
|
- path: "/performanceAnalysis",
|
|
|
|
- isActive: false,
|
|
|
|
|
|
+ id: 'monitor',
|
|
|
|
+ text: '状态监视',
|
|
|
|
+ path: '/monitor/home',
|
|
|
|
+ isActive: true
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- id: "ztfx",
|
|
|
|
- text: "降损分析",
|
|
|
|
- path: "/new/ztfx",
|
|
|
|
- isActive: false,
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: "realSearch",
|
|
|
|
- text: "数据支撑",
|
|
|
|
- path: "/realSearch",
|
|
|
|
- isActive: false,
|
|
|
|
|
|
+ id: 'decision1',
|
|
|
|
+ text: '经济运行',
|
|
|
|
+ path: '/decision1',
|
|
|
|
+ isActive: false
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- id: "health",
|
|
|
|
- text: "健康管理",
|
|
|
|
- path: "/health",
|
|
|
|
- isActive: false,
|
|
|
|
|
|
+ id: 'health',
|
|
|
|
+ text: '智慧检修',
|
|
|
|
+ path: '/health',
|
|
|
|
+ isActive: false
|
|
},
|
|
},
|
|
// {
|
|
// {
|
|
// id: "decision",
|
|
// id: "decision",
|
|
@@ -61,19 +52,25 @@ export default {
|
|
// isActive: false,
|
|
// isActive: false,
|
|
// },
|
|
// },
|
|
{
|
|
{
|
|
- id: "personnel",
|
|
|
|
- text: "安措管控",
|
|
|
|
- path: "/new/personnel",
|
|
|
|
- isActive: false,
|
|
|
|
|
|
+ id: 'personnel',
|
|
|
|
+ text: '安全管控',
|
|
|
|
+ path: '/new/personnel',
|
|
|
|
+ isActive: false
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- id: "bdzcx",
|
|
|
|
- text: "智能报表",
|
|
|
|
- path: "/bdzcx",
|
|
|
|
- isActive: false,
|
|
|
|
|
|
+ id: 'bdzcx',
|
|
|
|
+ text: '智能报表',
|
|
|
|
+ path: '/bdzcx',
|
|
|
|
+ isActive: false
|
|
},
|
|
},
|
|
|
|
+ {
|
|
|
|
+ id: 'realSearch',
|
|
|
|
+ text: '其他',
|
|
|
|
+ path: '/realSearch',
|
|
|
|
+ isActive: false
|
|
|
|
+ }
|
|
],
|
|
],
|
|
- activeIndex: 0,
|
|
|
|
|
|
+ activeIndex: 0
|
|
// menusDropdown: [
|
|
// menusDropdown: [
|
|
// {
|
|
// {
|
|
// text: "子菜单1",
|
|
// text: "子菜单1",
|
|
@@ -89,39 +86,39 @@ export default {
|
|
// },
|
|
// },
|
|
// ],
|
|
// ],
|
|
// dropdown: false,
|
|
// dropdown: false,
|
|
- };
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
click(index, data) {
|
|
click(index, data) {
|
|
- this.activeIndex = index;
|
|
|
|
- this.$router.push(data.path);
|
|
|
|
|
|
+ this.activeIndex = index
|
|
|
|
+ this.$router.push(data.path)
|
|
},
|
|
},
|
|
clickSubMenu(index, code) {
|
|
clickSubMenu(index, code) {
|
|
- console.log(index, code);
|
|
|
|
|
|
+ console.log(index, code)
|
|
},
|
|
},
|
|
clickMenu() {
|
|
clickMenu() {
|
|
- this.dropdown = !this.dropdown;
|
|
|
|
- },
|
|
|
|
|
|
+ this.dropdown = !this.dropdown
|
|
|
|
+ }
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
activeClass(data) {
|
|
activeClass(data) {
|
|
- return data.isActive ? "active" : "";
|
|
|
|
- },
|
|
|
|
|
|
+ return data.isActive ? 'active' : ''
|
|
|
|
+ }
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
$route: {
|
|
$route: {
|
|
handler: function(val, oldVal) {
|
|
handler: function(val, oldVal) {
|
|
this.menus.some((t, index) => {
|
|
this.menus.some((t, index) => {
|
|
if (val.path.includes(t.id)) {
|
|
if (val.path.includes(t.id)) {
|
|
- this.activeIndex = index;
|
|
|
|
|
|
+ this.activeIndex = index
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ })
|
|
},
|
|
},
|
|
//深度观察监听
|
|
//深度观察监听
|
|
- deep: true,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ deep: true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
@@ -158,7 +155,7 @@ export default {
|
|
transition: color 0.2s ease-in-out;
|
|
transition: color 0.2s ease-in-out;
|
|
|
|
|
|
&::after {
|
|
&::after {
|
|
- content: "";
|
|
|
|
|
|
+ content: '';
|
|
position: absolute;
|
|
position: absolute;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 0.463vh;
|
|
height: 0.463vh;
|
|
@@ -215,7 +212,7 @@ export default {
|
|
background-color: fade(@write, 5%);
|
|
background-color: fade(@write, 5%);
|
|
|
|
|
|
&::after {
|
|
&::after {
|
|
- content: "";
|
|
|
|
|
|
+ content: '';
|
|
position: absolute;
|
|
position: absolute;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 0.463vh;
|
|
height: 0.463vh;
|