WindSite.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <div class="wind-site">
  3. <div class="page-common-body">
  4. <div class="page-common-body-router">
  5. <router-view />
  6. </div>
  7. <div class="page-common-body-menu">
  8. <div class="page-common-body-menu-box">
  9. <div class="page-common-body-menu-border left top"></div>
  10. <div class="page-common-body-menu-border left bottom"></div>
  11. <div class="page-common-body-menu-border right top"></div>
  12. <div class="page-common-body-menu-border right bottom"></div>
  13. <router-link v-for="(menuData, index) of menuDatas" :key="index" :to="menuData.path">
  14. <div class="page-common-body-menu-item" @click="clickMenu(index)"
  15. :class="{ active: activeIndex == index }">
  16. <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
  17. <SvgIcon :svgid="menuData.icon"></SvgIcon>
  18. </span>
  19. </div>
  20. </router-link>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. import SvgIcon from "@com/coms/icon/svg-icon.vue";
  28. export default {
  29. // 名称
  30. name: "WindSite",
  31. // 使用组件
  32. components: {
  33. SvgIcon,
  34. },
  35. // 数据
  36. data() {
  37. return {
  38. windsitePath: '',
  39. activeIndex: 0,
  40. menuDatas: [{
  41. icon: "svg-s场站监视",
  42. path: "/monitor/windsite/home",
  43. },
  44. {
  45. icon: "svg-s指标列表",
  46. path: "/monitor/windsite/draughtfanlist",
  47. },
  48. // {
  49. // icon: "svg-agc",
  50. // path: "/monitor/windsite/matrix",
  51. // },
  52. // {
  53. // icon: "svg-agc",
  54. // path: "/monitor/windsite/lightmatrix",
  55. // },
  56. // {
  57. // icon: "svg-intranet-involvement",
  58. // path: "/monitor/windsite/box",
  59. // },
  60. // {
  61. // icon: "svg-matrix",
  62. // path: "/monitor/windsite/info",
  63. // },
  64. {
  65. icon: "svg-s测风塔",
  66. path: "/monitor/windsite/tower",
  67. },
  68. // {
  69. // icon: "svg-easy-compass",
  70. // path: "/monitor/windsite/Inverter-Info",
  71. // },
  72. // {
  73. // icon: "svg-easy-compass",
  74. // path: "/monitor/windsite/map",
  75. // },
  76. // {
  77. // icon: "svg-easy-compass",
  78. // path: "/monitor/windsite/map1",
  79. // },
  80. {
  81. icon: "svg-matrix",
  82. path: "/monitor/windsite/matrix",
  83. },
  84. {
  85. icon: "svg-s总貌",
  86. path: "/monitor/windsite/generalappearance",
  87. },
  88. {
  89. icon: "svg-s升压站",
  90. path: "/monitor/windsite/boosterstation",
  91. },
  92. {
  93. icon: "svg-s地图",
  94. path: "/monitor/windsite/map",
  95. },
  96. {
  97. icon: "svg-wind-site",
  98. path: this.windsitePath,
  99. },
  100. ],
  101. };
  102. },
  103. // 函数
  104. methods: {
  105. jumpUrl() {
  106. var p = this.$route.path.split('/');
  107. var pData = p[p.length - 1].split('_');
  108. var wpId = p[p.length - 1];
  109. if (wpId.indexOf("FDC") !== -1) {
  110. this.windsitePath = `/monitor/windsite/info/${wpId}/${pData[0] + '01_01'}`
  111. } else {
  112. this.windsitePath = `../../windsite/inverter-info/${wpId}/${pData[0] + '01_01'}`
  113. }
  114. },
  115. clickMenu: function(index) {
  116. if (index == 7) { //风场
  117. this.jumpUrl();
  118. this.menu(index);
  119. }
  120. this.activeIndex = index;
  121. },
  122. menu(index) {
  123. if(index){
  124. this.menuDatas[index].path = this.windsitePath;
  125. }else{
  126. this.menuDatas.forEach((ele) => {
  127. if (ele.icon == 'svg-wind-site') {
  128. ele.path = this.windsitePath
  129. } else {
  130. ele.path = ele.path + "/" + this.$route.params.wpId;
  131. }
  132. });
  133. }
  134. }
  135. },
  136. created() {
  137. this.jumpUrl();
  138. this.menu();
  139. },
  140. };
  141. </script>
  142. <style lang="less" scoped>
  143. .wind-site {
  144. .page-common-body {
  145. display: flex;
  146. flex-direction: row;
  147. margin-top: 0.741vh;
  148. .page-common-body-router {
  149. overflow: auto;
  150. overflow-x: hidden;
  151. height: calc(100vh - 7.037vh);
  152. flex: 1 1 auto;
  153. }
  154. .page-common-body-menu {
  155. width: 7.407vh;
  156. padding: 0 1.481vh 1.481vh 1.481vh;
  157. .page-common-body-menu-box {
  158. border: 0.093vh solid @darkgray;
  159. background-color: fade(@darkgray, 30%);
  160. padding: 2.222vh 0.185vh;
  161. position: relative;
  162. .page-common-body-menu-border {
  163. position: absolute;
  164. width: 0.37vh;
  165. height: 0.37vh;
  166. background-color: @write;
  167. border-radius: 50%;
  168. &.left {
  169. left: -0.185vh;
  170. }
  171. &.right {
  172. right: -0.185vh;
  173. }
  174. &.top {
  175. top: -0.185vh;
  176. }
  177. &.bottom {
  178. bottom: -0.185vh;
  179. }
  180. }
  181. .page-common-body-menu-item {
  182. border: 0.093vh solid fade(@green, 40%);
  183. width: 3.889vh;
  184. height: 3.889vh;
  185. border-radius: 0.278vh;
  186. margin-top: 0.741vh;
  187. display: flex;
  188. align-items: center;
  189. justify-content: center;
  190. cursor: pointer;
  191. a {
  192. line-height: 0;
  193. }
  194. // &:first-child {
  195. // margin-top: 0;
  196. // }
  197. &.active {
  198. border-color: fade(@yellow, 40%);
  199. position: relative;
  200. &::after {
  201. content: "";
  202. width: calc(100% - 0.37vh);
  203. height: calc(100% - 0.37vh);
  204. position: absolute;
  205. border: 0.093vh solid @yellow;
  206. box-shadow: 0 0 0.37vh @yellow;
  207. top: 0.093vh;
  208. left: 0.093vh;
  209. }
  210. }
  211. }
  212. }
  213. }
  214. }
  215. }
  216. </style>