健康管理模块修改

src/components/chart/line/simple-line-chart.vue

@@ -352,7 +352,9 @@ export default {
     },
   },
   created() {
-    this.id = "pie-chart-" + util.newGUID();
+    this.$nextTick(()=>{
+      this.id = "pie-chart-" + util.newGUID();
+    });
   },
   mounted() {
     this.$nextTick(() => {

src/router/index.js

@@ -64,7 +64,7 @@ const routes = [
     {
       path: 'boosterstation', // 升压站
       component: () => import(/* webpackChunkName: "boosterstation" */ '../views/WindSite/pages/BoosterStation.vue'),
-    },]
+    }]
   },
   {
     path: '/monitor/lightmatrix', // 光伏明细矩阵
@@ -154,6 +154,10 @@ const routes = [
   {
     path: '/health/health4',
     name: 'health4',
+    children: [{
+      path: 'healthLineChart', // 健康趋势
+      component: () => import(/* webpackChunkName: "healthLineChart" */ '../views/HealthControl/healthLineChart.vue'),
+    }],
     component: () => import('../views/HealthControl/Health4.vue'),
   },
   {

src/views/HealthControl/Health4.vue

@@ -1,35 +1,140 @@
 <template>
-  <div class="health-4">
-    <simple-line-chart :height="'100px'" />
-    <simple-line-chart :height="'100px'" :color="'yellow'" :title="'发电机'" />
-    <simple-line-chart :height="'100px'" :color="'purple'" :title="'变桨系统'" />
-    <simple-line-chart :height="'100px'" :color="'blue'" :title="'主控系统'" />
-    <simple-line-chart :height="'100px'" :color="'orange'" :title="'齿轮箱'" />
+  <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>
+          <div class="page-common-body-menu-item" v-for="(menuData, index) of menuDatas" :key="index" @click="clickMenu(index)" :class="{ active: activeIndex == index }">
+            <router-link :to="menuData.path">
+              <span class="svg-icon" :class="activeIndex == index ? 'svg-icon-yellow' : 'svg-icon-green'">
+                <SvgIcon :svgid="menuData.icon"></SvgIcon>
+              </span>
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import SimpleLineChart from "../../components/chart/line/simple-line-chart.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
   setup() {},
-  components: { SimpleLineChart },
+  components: { SvgIcon },
   data() {
-    return {};
+    return {
+      activeIndex:0,
+      menuDatas: [{
+        icon: "svg-agc",
+        path: "/health/health4/healthLineChart",
+      }]
+    };
   },
-  created() {},
+
+  created() {
+   
+  },
+  
+  methods:{
+    clickMenu: function(index) {
+      this.activeIndex = index;
+    },
+  }
 };
 </script>
 
-<style lang="less">
-.health-4 {
-  padding: 0 40px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  height: 100%;
+<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;
 
-  .chart {
-    flex: 0;
+            &::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>
+</style>

src/views/HealthControl/healthLineChart.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="pageBox">
+    <simple-line-chart :height="'100px'" />
+    <simple-line-chart :height="'100px'" :color="'yellow'" :title="'发电机'" />
+    <simple-line-chart :height="'100px'" :color="'purple'" :title="'变桨系统'" />
+    <simple-line-chart :height="'100px'" :color="'blue'" :title="'主控系统'" />
+    <simple-line-chart :height="'100px'" :color="'orange'" :title="'齿轮箱'" />
+  </div>
+</template>
+
+<script>
+import SimpleLineChart from "../../components/chart/line/simple-line-chart.vue";
+export default {
+  setup() {},
+  components: { SimpleLineChart },
+  data() {
+    return {};
+  },
+
+  created() {
+    
+  },
+  
+  methods:{
+   
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.pageBox {
+  width: 100%;
+  height:calc(100% - 1.481vh * 2);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin:1.481vh 0;
+
+  .chart{
+    width: 100%;
+    height:25%;
+  }
+}
+</style>

src/views/Home/Home.vue

@@ -421,7 +421,7 @@
     <el-dialog :title="dialogTitle" v-model="dialogShow" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
       <Table :data="dialogData" v-if="dialogType === 'table'" />
       <MultipleLineChart height="500px" :units="powerLineChartData.units" :list="powerLineChartData.value" :showLegend="true" v-if="dialogType === 'powerLineChart'" />
-      <multiple-bar-chart height="500px" :list="doneLineChartData.value" :units="doneLineChartData.units" v-if="dialogType === 'doneLineChart'" />
+      <multiple-bar-chart height="500px" :units="doneLineChartData.units" :list="doneLineChartData.value" v-if="dialogType === 'doneLineChart'" />
     </el-dialog>
   </div>
 </template>

src/views/layout/Menu.vue

@@ -124,7 +124,7 @@ export default {
             {
               text: "健康管理4",
               icon: "svg-wind-site",
-              path: "/health/health4",
+              path: "/health/health4/healthLineChart",
             },
             {
               text: "健康管理5",