|
@@ -48,7 +48,7 @@
|
|
|
:collapse="isCollapse"
|
|
|
:collapse-transition="false"
|
|
|
text-color="#fff"
|
|
|
- background-color="#000"
|
|
|
+ background-color="#132444"
|
|
|
active-text-color="#fff"
|
|
|
:style="`height:100%;${
|
|
|
showMenuData?.[0]?.width && !isCollapse
|
|
@@ -74,13 +74,14 @@
|
|
|
<div v-html="menu.svg" class="svgSty"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <!-- :class="getSelectState(menuitem)" -->
|
|
|
<el-menu-item-group
|
|
|
v-for="(menuitem, index) in menu.children"
|
|
|
:key="index"
|
|
|
class="elsubMenu"
|
|
|
>
|
|
|
<el-menu-item :index="menuitem.index" class="grounpItem">
|
|
|
- <span class="grounpItemSty"></span>
|
|
|
+ <!-- <span class="grounpItemSty"></span> -->
|
|
|
<span class="grounpItemSpan">{{ menuitem.name }}</span>
|
|
|
</el-menu-item>
|
|
|
</el-menu-item-group>
|
|
@@ -95,9 +96,7 @@
|
|
|
>
|
|
|
<div class="elMenuTitle elMenuTitleAll" v-if="!isCollapse">
|
|
|
<div v-html="menu.svg" class="svgSty"></div>
|
|
|
- <span class="titspan">{{
|
|
|
- menu.name
|
|
|
- }}</span>
|
|
|
+ <span class="titspan">{{ menu.name }}</span>
|
|
|
</div>
|
|
|
<div class="elMenuTitle" v-else>
|
|
|
<div v-html="menu.svg" style="display: flex"></div>
|
|
@@ -131,7 +130,7 @@ import { getAllStation } from "@/api/common.js";
|
|
|
import SvgIcon from "@com/coms/icon/svg-icon.vue";
|
|
|
import { GetDeviceTableData } from "@/api/zhbj/index.js";
|
|
|
import { ElNotification } from "element-plus";
|
|
|
-import dayjs from "dayjs";
|
|
|
+import dayjs, { locale } from "dayjs";
|
|
|
import $ from "jquery";
|
|
|
export default {
|
|
|
components: {
|
|
@@ -616,8 +615,7 @@ export default {
|
|
|
// });
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
- this.initMenu()
|
|
|
+ this.initMenu();
|
|
|
let that = this;
|
|
|
that.setScale();
|
|
|
/*窗口改变事件*/
|
|
@@ -629,17 +627,26 @@ export default {
|
|
|
console.log("离开标记", this.socketLeaveFlag);
|
|
|
},
|
|
|
methods: {
|
|
|
+ getSelectState() {
|
|
|
+ // routepath === $route.path ? 'isSelect' : ''
|
|
|
+ const href = window.location.href;
|
|
|
+ const path = this.$route.path;
|
|
|
+
|
|
|
+ const reg = new RegExp(path);
|
|
|
+
|
|
|
+ return path !== "/" && reg.test(href) ? "isSelect" : "";
|
|
|
+ },
|
|
|
initMenu() {
|
|
|
- let str = window.location.href;
|
|
|
- if (str.indexOf("integratedAlarm") > -1) {
|
|
|
+ let str = window.location.href;
|
|
|
+ if (str.indexOf("integratedAlarm") > -1) {
|
|
|
this.showMenuData = this.warnDatas;
|
|
|
- } else if (str.indexOf("economicsOperation") > -1) {
|
|
|
+ } else if (str.indexOf("economicsOperation") > -1) {
|
|
|
this.showMenuData = this.economyDatas;
|
|
|
- } else if (str.indexOf("nxreport") > -1) {
|
|
|
+ } else if (str.indexOf("nxreport") > -1) {
|
|
|
this.showMenuData = this.reportDatas;
|
|
|
- } else {
|
|
|
+ } else {
|
|
|
this.showMenuData = this.warnDatas;
|
|
|
- }
|
|
|
+ }
|
|
|
},
|
|
|
pagestyFn(path) {
|
|
|
let str = "";
|
|
@@ -1037,7 +1044,7 @@ export default {
|
|
|
$route(to, from) {
|
|
|
// 当路由发生变化时,更新 currentPath
|
|
|
this.routepath = to.path;
|
|
|
- this.initMenu()
|
|
|
+ this.initMenu();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -1238,8 +1245,8 @@ body {
|
|
|
line-height: 45px;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .chSpna{
|
|
|
- color: #757575 !important;
|
|
|
+ .chSpna {
|
|
|
+ color: #a5b7df !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1275,7 +1282,7 @@ body {
|
|
|
.el-menu {
|
|
|
border-radius: 0 0 8px 8px;
|
|
|
padding: 10px 0 10px 0;
|
|
|
- background: #001d53;
|
|
|
+ background: #132444;
|
|
|
|
|
|
.elsubMenu {
|
|
|
width: 130px;
|
|
@@ -1283,6 +1290,7 @@ body {
|
|
|
margin: 10px 0;
|
|
|
position: relative;
|
|
|
left: 50px;
|
|
|
+ // background: #1c69bb;
|
|
|
|
|
|
.grounpItem {
|
|
|
height: 30px;
|
|
@@ -1305,6 +1313,7 @@ body {
|
|
|
}
|
|
|
|
|
|
// .is-active {
|
|
|
+ // max-width: 160px !important;
|
|
|
// background: rgba(0, 70, 199, 0.4);
|
|
|
// border: 1px solid #115fc8;
|
|
|
|
|
@@ -1334,31 +1343,30 @@ body {
|
|
|
position: relative;
|
|
|
}
|
|
|
}
|
|
|
- .elMenuTitle{
|
|
|
- height: 45px;
|
|
|
+ .elMenuTitle {
|
|
|
+ height: 45px;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ .svgSty {
|
|
|
position: relative;
|
|
|
- top: 5px;
|
|
|
- .svgSty{
|
|
|
- position: relative;
|
|
|
- top: 3px;
|
|
|
- left: 5px;
|
|
|
- }
|
|
|
- .titspan{
|
|
|
- margin-left: 10px;
|
|
|
- color: #757575;
|
|
|
- position: relative;
|
|
|
- top: 4px;
|
|
|
- left: 6px;
|
|
|
- }
|
|
|
- &.is-active{
|
|
|
+ top: 3px;
|
|
|
+ left: 5px;
|
|
|
+ }
|
|
|
+ .titspan {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #a5b7df;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ left: 6px;
|
|
|
+ }
|
|
|
+ &.is-active {
|
|
|
background: #001d53;
|
|
|
border-radius: 8px;
|
|
|
padding: 5px;
|
|
|
position: relative;
|
|
|
top: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.is-active {
|
|
@@ -1390,54 +1398,53 @@ body {
|
|
|
.el-menu {
|
|
|
.el-sub-menu {
|
|
|
.el-sub-menu__title {
|
|
|
- color: #757575;
|
|
|
+ color: #a5b7df;
|
|
|
|
|
|
svg {
|
|
|
path {
|
|
|
- fill: #757575;
|
|
|
+ fill: #a5b7df;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-sub-menu__title:hover,
|
|
|
.is-active {
|
|
|
- color: #1c99ff;
|
|
|
+ color: #a5b7df;
|
|
|
|
|
|
- .chSpna{
|
|
|
- color: #1c99ff !important;
|
|
|
- }
|
|
|
+ .chSpna {
|
|
|
+ color: #a5b7df !important;
|
|
|
+ }
|
|
|
|
|
|
svg {
|
|
|
path {
|
|
|
- fill: #1c99ff;
|
|
|
+ fill: #a5b7df;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-menu-item {
|
|
|
- color: #757575;
|
|
|
+ color: #a5b7df;
|
|
|
|
|
|
svg {
|
|
|
path {
|
|
|
- fill: #757575;
|
|
|
+ fill: #a5b7df;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-menu-item:hover,
|
|
|
.is-active {
|
|
|
- color: #1c99ff;
|
|
|
+ color: #1c69bb;
|
|
|
background: transparent !important;
|
|
|
|
|
|
-
|
|
|
- .titspan{
|
|
|
- color: #1c99ff !important;
|
|
|
- }
|
|
|
+ .titspan {
|
|
|
+ color: #1c69bb !important;
|
|
|
+ }
|
|
|
|
|
|
svg {
|
|
|
path {
|
|
|
- fill: #1c99ff;
|
|
|
+ fill: #1c69bb;
|
|
|
}
|
|
|
}
|
|
|
}
|