|
|
@@ -1,203 +1,203 @@
|
|
|
-<template>
|
|
|
- <div class="wind-site">
|
|
|
- <div class="page-common-body">
|
|
|
- <div class="page-common-body-router">
|
|
|
- <router-view />
|
|
|
- </div>
|
|
|
- <div class="page-common-body-menu">
|
|
|
- <div class="page-common-body-menu-box">
|
|
|
- <div class="page-common-body-menu-border left top"></div>
|
|
|
- <div class="page-common-body-menu-border left bottom"></div>
|
|
|
- <div class="page-common-body-menu-border right top"></div>
|
|
|
- <div class="page-common-body-menu-border right bottom"></div>
|
|
|
- <router-link v-for="(menuData, index) of menuDatas" :key="index" :to="menuData.path">
|
|
|
- <div class="page-common-body-menu-item" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
|
|
|
- <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
|
|
|
- <SvgIcon :svgid="menuData.icon"></SvgIcon>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </router-link>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import SvgIcon from "@com/coms/icon/svg-icon.vue";
|
|
|
-export default {
|
|
|
- // 名称
|
|
|
- name: "WindSite",
|
|
|
- // 使用组件
|
|
|
- components: {
|
|
|
- SvgIcon,
|
|
|
- },
|
|
|
- // 数据
|
|
|
- data() {
|
|
|
- return {
|
|
|
- activeIndex: 0,
|
|
|
- menuDatas: [
|
|
|
- {
|
|
|
- icon: "svg-agc",
|
|
|
- path: "/monitor/windsite/home",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-matrix",
|
|
|
- path: "/monitor/windsite/draughtfanlist",
|
|
|
- },
|
|
|
- // {
|
|
|
- // icon: "svg-agc",
|
|
|
- // path: "/monitor/windsite/matrix",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // icon: "svg-agc",
|
|
|
- // path: "/monitor/windsite/lightmatrix",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // icon: "svg-intranet-involvement",
|
|
|
- // path: "/monitor/windsite/box",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // icon: "svg-matrix",
|
|
|
- // path: "/monitor/windsite/info",
|
|
|
- // },
|
|
|
- {
|
|
|
- icon: "svg-easy-compass",
|
|
|
- path: "/monitor/windsite/tower",
|
|
|
- },
|
|
|
- // {
|
|
|
- // icon: "svg-easy-compass",
|
|
|
- // path: "/monitor/windsite/Inverter-Info",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // icon: "svg-easy-compass",
|
|
|
- // path: "/monitor/windsite/map",
|
|
|
- // },
|
|
|
- // {
|
|
|
- // icon: "svg-easy-compass",
|
|
|
- // path: "/monitor/windsite/map1",
|
|
|
- // },
|
|
|
- {
|
|
|
- icon: "svg-matrix",
|
|
|
- path: "/monitor/windsite/matrix",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-matrix",
|
|
|
- path: "/monitor/windsite/generalappearance",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-matrix",
|
|
|
- path: "/monitor/windsite/boosterstation",
|
|
|
- },
|
|
|
- {
|
|
|
- icon: "svg-matrix",
|
|
|
- path: "/monitor/windsite/map",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- // 函数
|
|
|
- methods: {
|
|
|
- clickMenu: function(index) {
|
|
|
- this.activeIndex = index;
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- created() {
|
|
|
- this.menuDatas.forEach((ele) => {
|
|
|
- ele.path = ele.path + "/" + this.$route.params.wpId;
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {},
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.wind-site {
|
|
|
- .page-common-body {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- margin-top: 0.741vh;
|
|
|
-
|
|
|
- .page-common-body-router {
|
|
|
- overflow: auto;
|
|
|
- overflow-x: hidden;
|
|
|
- height: calc(100vh - 7.037vh);
|
|
|
- flex: 1 1 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .page-common-body-menu {
|
|
|
- width: 7.407vh;
|
|
|
- padding: 0 1.481vh 1.481vh 1.481vh;
|
|
|
-
|
|
|
- .page-common-body-menu-box {
|
|
|
- border: 0.093vh solid @darkgray;
|
|
|
- background-color: fade(@darkgray, 30%);
|
|
|
- padding: 2.222vh 0.185vh;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .page-common-body-menu-border {
|
|
|
- position: absolute;
|
|
|
- width: 0.37vh;
|
|
|
- height: 0.37vh;
|
|
|
- background-color: @write;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- &.left {
|
|
|
- left: -0.185vh;
|
|
|
- }
|
|
|
-
|
|
|
- &.right {
|
|
|
- right: -0.185vh;
|
|
|
- }
|
|
|
-
|
|
|
- &.top {
|
|
|
- top: -0.185vh;
|
|
|
- }
|
|
|
-
|
|
|
- &.bottom {
|
|
|
- bottom: -0.185vh;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .page-common-body-menu-item {
|
|
|
- border: 0.093vh solid fade(@green, 40%);
|
|
|
- width: 3.889vh;
|
|
|
- height: 3.889vh;
|
|
|
- border-radius: 0.278vh;
|
|
|
- margin-top: 0.741vh;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- a {
|
|
|
- line-height: 0;
|
|
|
- }
|
|
|
-
|
|
|
- // &:first-child {
|
|
|
- // margin-top: 0;
|
|
|
- // }
|
|
|
-
|
|
|
- &.active {
|
|
|
- border-color: fade(@yellow, 40%);
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- width: calc(100% - 0.37vh);
|
|
|
- height: calc(100% - 0.37vh);
|
|
|
- position: absolute;
|
|
|
- border: 0.093vh solid @yellow;
|
|
|
- box-shadow: 0 0 0.37vh @yellow;
|
|
|
- top: 0.093vh;
|
|
|
- left: 0.093vh;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div class="wind-site">
|
|
|
+ <div class="page-common-body">
|
|
|
+ <div class="page-common-body-router">
|
|
|
+ <router-view />
|
|
|
+ </div>
|
|
|
+ <div class="page-common-body-menu">
|
|
|
+ <div class="page-common-body-menu-box">
|
|
|
+ <div class="page-common-body-menu-border left top"></div>
|
|
|
+ <div class="page-common-body-menu-border left bottom"></div>
|
|
|
+ <div class="page-common-body-menu-border right top"></div>
|
|
|
+ <div class="page-common-body-menu-border right bottom"></div>
|
|
|
+ <router-link v-for="(menuData, index) of menuDatas" :key="index" :to="menuData.path">
|
|
|
+ <div class="page-common-body-menu-item" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
|
|
|
+ <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
|
|
|
+ <SvgIcon :svgid="menuData.icon"></SvgIcon>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
|
|
|
+export default {
|
|
|
+ // 名称
|
|
|
+ name: "WindSite",
|
|
|
+ // 使用组件
|
|
|
+ components: {
|
|
|
+ SvgIcon,
|
|
|
+ },
|
|
|
+ // 数据
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeIndex: 0,
|
|
|
+ menuDatas: [
|
|
|
+ {
|
|
|
+ icon: "svg-s场站监视",
|
|
|
+ path: "/monitor/windsite/home",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-s指标列表",
|
|
|
+ path: "/monitor/windsite/draughtfanlist",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // icon: "svg-agc",
|
|
|
+ // path: "/monitor/windsite/matrix",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "svg-agc",
|
|
|
+ // path: "/monitor/windsite/lightmatrix",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "svg-intranet-involvement",
|
|
|
+ // path: "/monitor/windsite/box",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "svg-matrix",
|
|
|
+ // path: "/monitor/windsite/info",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ icon: "svg-s测风塔",
|
|
|
+ path: "/monitor/windsite/tower",
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // icon: "svg-easy-compass",
|
|
|
+ // path: "/monitor/windsite/Inverter-Info",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "svg-easy-compass",
|
|
|
+ // path: "/monitor/windsite/map",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // icon: "svg-easy-compass",
|
|
|
+ // path: "/monitor/windsite/map1",
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ icon: "svg-matrix",
|
|
|
+ path: "/monitor/windsite/matrix",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-s总貌",
|
|
|
+ path: "/monitor/windsite/generalappearance",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-s升压站",
|
|
|
+ path: "/monitor/windsite/boosterstation",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: "svg-s地图",
|
|
|
+ path: "/monitor/windsite/map",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 函数
|
|
|
+ methods: {
|
|
|
+ clickMenu: function(index) {
|
|
|
+ this.activeIndex = index;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.menuDatas.forEach((ele) => {
|
|
|
+ ele.path = ele.path + "/" + this.$route.params.wpId;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.wind-site {
|
|
|
+ .page-common-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 0.741vh;
|
|
|
+
|
|
|
+ .page-common-body-router {
|
|
|
+ overflow: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ height: calc(100vh - 7.037vh);
|
|
|
+ flex: 1 1 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-common-body-menu {
|
|
|
+ width: 7.407vh;
|
|
|
+ padding: 0 1.481vh 1.481vh 1.481vh;
|
|
|
+
|
|
|
+ .page-common-body-menu-box {
|
|
|
+ border: 0.093vh solid @darkgray;
|
|
|
+ background-color: fade(@darkgray, 30%);
|
|
|
+ padding: 2.222vh 0.185vh;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .page-common-body-menu-border {
|
|
|
+ position: absolute;
|
|
|
+ width: 0.37vh;
|
|
|
+ height: 0.37vh;
|
|
|
+ background-color: @write;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ &.left {
|
|
|
+ left: -0.185vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ right: -0.185vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.top {
|
|
|
+ top: -0.185vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bottom {
|
|
|
+ bottom: -0.185vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-common-body-menu-item {
|
|
|
+ border: 0.093vh solid fade(@green, 40%);
|
|
|
+ width: 3.889vh;
|
|
|
+ height: 3.889vh;
|
|
|
+ border-radius: 0.278vh;
|
|
|
+ margin-top: 0.741vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ a {
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ // &:first-child {
|
|
|
+ // margin-top: 0;
|
|
|
+ // }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: fade(@yellow, 40%);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: calc(100% - 0.37vh);
|
|
|
+ height: calc(100% - 0.37vh);
|
|
|
+ position: absolute;
|
|
|
+ border: 0.093vh solid @yellow;
|
|
|
+ box-shadow: 0 0 0.37vh @yellow;
|
|
|
+ top: 0.093vh;
|
|
|
+ left: 0.093vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
