Merge remote-tracking branch 'origin/rmd-dev' into rmd-dev

pdaaphm-ui/src/components/Breadcrumb/index.vue

@@ -1,9 +1,12 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-          class="no-redirect">{{ item.meta.title }}</span>
+      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+        <span
+          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+          class="no-redirect"
+          >{{ item.meta.title }}</span
+        >
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -15,60 +18,60 @@ export default {
   data() {
     return {
       levelList: null,
-    }
+    };
   },
   watch: {
     $route(route) {
       // if you go to the redirect page, do not update the breadcrumbs
-      if (route.path.startsWith('/redirect/')) {
-        return
+      if (route.path.startsWith("/redirect/")) {
+        return;
       }
-      this.getBreadcrumb()
+      this.getBreadcrumb();
     },
   },
   created() {
-    this.getBreadcrumb()
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb() {
       // only show routes with meta.title
       let matched = this.$route.matched.filter(
-        item => item.meta && item.meta.title
-      )
-      const first = matched[0]
+        (item) => item.meta && item.meta.title
+      );
+      const first = matched[0];
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
+        matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched);
       }
 
       this.levelList = matched.filter(
-        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
-      )
+        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+      );
     },
     isDashboard(route) {
-      const name = route && route.name
+      const name = route && route.name;
       if (!name) {
-        return false
+        return false;
       }
-      return name.trim() === 'Index'
+      return name.trim() === "Index";
     },
     handleLink(item) {
-      const { redirect, path } = item
+      const { redirect, path } = item;
       if (redirect) {
-        this.$router.push(redirect)
-        return
+        this.$router.push(redirect);
+        return;
       }
-      this.$router.push(path)
+      this.$router.push(path);
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  line-height: 50px;
+  line-height: 59px;
   margin-left: 8px;
 
   .no-redirect {
@@ -85,7 +88,7 @@ export default {
       }
     }
   }
-  .el-breadcrumb__inner a{
+  .el-breadcrumb__inner a {
     color: white;
   }
 }

pdaaphm-ui/src/layout/components/AppMain.vue

@@ -10,26 +10,26 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index"
+import iframeToggle from "./IframeToggle/index";
 
 export default {
-  name: 'AppMain',
+  name: "AppMain",
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews
+      return this.$store.state.tagsView.cachedViews;
     },
     key() {
-      return this.$route.path
-    }
-  }
-}
+      return this.$route.path;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .app-main {
   /* 50= navbar  50  */
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 60px);
   width: 100%;
   // background-color: #08202b;
   background-color: #0b333f;
@@ -44,11 +44,11 @@ export default {
 .hasTagsView {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
-    min-height: calc(100vh - 84px);
+    min-height: calc(100vh - 94px);
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: 94px;
   }
 }
 </style>

pdaaphm-ui/src/layout/components/Navbar.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
-
+    <hamburger
+      id="hamburger-container"
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
+
+    <breadcrumb
+      id="breadcrumb-container"
+      class="breadcrumb-container"
+      v-if="!topNav"
+    />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
+    <div class="title">装备性能退化评估和故障预测健康管理软件</div>
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -14,12 +23,14 @@
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
-
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown
+        class="avatar-container right-menu-item hover-effect"
+        trigger="click"
+      >
         <div class="avatar-wrapper">
-          <img :src="avatar" class="user-avatar">
+          <img :src="avatar" class="user-avatar" />
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -39,15 +50,15 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
-import TopNav from '@/components/TopNav'
-import Hamburger from '@/components/Hamburger'
-import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
-import RuoYiGit from '@/components/RuoYi/Git'
-import RuoYiDoc from '@/components/RuoYi/Doc'
+import { mapGetters } from "vuex";
+import Breadcrumb from "@/components/Breadcrumb";
+import TopNav from "@/components/TopNav";
+import Hamburger from "@/components/Hamburger";
+import Screenfull from "@/components/Screenfull";
+import SizeSelect from "@/components/SizeSelect";
+import Search from "@/components/HeaderSearch";
+import RuoYiGit from "@/components/RuoYi/Git";
+import RuoYiDoc from "@/components/RuoYi/Doc";
 
 export default {
   components: {
@@ -58,68 +69,66 @@ export default {
     SizeSelect,
     Search,
     RuoYiGit,
-    RuoYiDoc
+    RuoYiDoc,
   },
   computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar',
-      'device'
-    ]),
+    ...mapGetters(["sidebar", "avatar", "device"]),
     setting: {
       get() {
-        return this.$store.state.settings.showSettings
+        return this.$store.state.settings.showSettings;
       },
       set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
+        this.$store.dispatch("settings/changeSetting", {
+          key: "showSettings",
+          value: val,
+        });
+      },
     },
     topNav: {
       get() {
-        return this.$store.state.settings.topNav
-      }
-    }
+        return this.$store.state.settings.topNav;
+      },
+    },
   },
   methods: {
     toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
+      this.$store.dispatch("app/toggleSideBar");
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/index';
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            location.href = "/index";
+          });
         })
-      }).catch(() => {});
-    }
-  }
-}
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .navbar {
-  height: 50px;
+  height: 60px;
   overflow: hidden;
   position: relative;
   background: #0b333f;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
-    line-height: 46px;
+    line-height: 56px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.025);
     }
   }
 
@@ -155,13 +164,12 @@ export default {
       vertical-align: text-bottom;
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background 0.3s;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.025);
         }
       }
-      
     }
 
     .avatar-container {
@@ -188,6 +196,36 @@ export default {
       }
     }
   }
-  
+}
+.title {
+  width: 800px;
+  position: absolute;
+  color: #fff;
+  left: 50%;
+  font-weight: 700;
+  font-size: 2.5rem;
+  margin-left: -400px;
+  background-image: -webkit-linear-gradient(
+    left,
+    #147b96,
+    #f9f08f 25%,
+    #147b96 50%,
+    #f9f08f 75%,
+    #147b96
+  );
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  background-size: 200% 100%;
+  animation: maskedAnimation 3s infinite linear;
+}
+
+@keyframes maskedAnimation {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
 }
 </style>

pdaaphm-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,45 +1,80 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark'
+          ? variables.menuBackground
+          : variables.menuLightBackground,
+    }"
+  >
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        class="sidebar-logo-link"
+        to="/"
+      >
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1
+          v-else
+          class="sidebar-title"
+          :style="{
+            color:
+              sideTheme === 'theme-dark'
+                ? variables.logoTitleColor
+                : variables.logoLightTitleColor,
+          }"
+        >
+          {{ title }}
+        </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1
+          class="sidebar-title"
+          :style="{
+            color:
+              sideTheme === 'theme-dark'
+                ? variables.logoTitleColor
+                : variables.logoLightTitleColor,
+          }"
+        >
+          {{ title }}
+        </h1>
       </router-link>
     </transition>
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
-import variables from '@/assets/styles/variables.scss'
+import logoImg from "@/assets/logo/logo.png";
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
   props: {
     collapse: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     variables() {
       return variables;
     },
     sideTheme() {
-      return this.$store.state.settings.sideTheme
-    }
+      return this.$store.state.settings.sideTheme;
+    },
   },
   data() {
     return {
-      title: 'PHM实验室',
-      logo: logoImg
-    }
-  }
-}
+      title: "",
+      logo: logoImg,
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>

pdaaphm-ui/src/layout/index.vue

@@ -1,111 +1,142 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar/>
-        <tags-view v-if="needTagsView"/>
+  <div
+    :class="classObj"
+    class="app-wrapper"
+    :style="{ '--current-color': theme }"
+  >
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <!-- <div class="headerTitle">
+          <div class="titleText">装备性能退化评估和故障预测健康管理软件</div>
+        </div> -->
+        <navbar />
+        <tags-view v-if="needTagsView" />
       </div>
-      <app-main/>
+      <app-main />
       <right-panel>
-        <settings/>
+        <settings />
       </right-panel>
     </div>
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
-import variables from '@/assets/styles/variables.scss'
+import RightPanel from "@/components/RightPanel";
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import { mapState } from "vuex";
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'Layout',
+  name: "Layout",
   components: {
     AppMain,
     Navbar,
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
-      theme: state => state.settings.theme,
-      sideTheme: state => state.settings.sideTheme,
-      sidebar: state => state.app.sidebar,
-      device: state => state.app.device,
-      needTagsView: state => state.settings.tagsView,
-      fixedHeader: state => state.settings.fixedHeader
+      theme: (state) => state.settings.theme,
+      sideTheme: (state) => state.settings.sideTheme,
+      sidebar: (state) => state.app.sidebar,
+      device: (state) => state.app.device,
+      needTagsView: (state) => state.settings.tagsView,
+      fixedHeader: (state) => state.settings.fixedHeader,
     }),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
+        mobile: this.device === "mobile",
+      };
     },
     variables() {
       return variables;
-    }
+    },
   },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
-    }
-  }
-}
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/assets/styles/mixin.scss";
-  @import "~@/assets/styles/variables.scss";
-
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-  .fixed-header {
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$base-sidebar-width});
-    transition: width 0.28s;
   }
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px);
-  }
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .sidebarHide .fixed-header {
-    width: 100%;
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$base-sidebar-width});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.sidebarHide .fixed-header {
+  width: 100%;
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+
+.headerTitle {
+  width: 100%;
+  height: 50px;
+  background-color: #0b333f;
+  box-shadow: inset 0 -2px rgba(0, 21, 41, 0.35);
+}
+.titleText {
+  width: 500px;
+  height: 50px;
+  line-height: 50px;
+  font-size: 1.6rem;
+  margin-left: 50%;
+  transform: translate(-50%, 0);
+  color: #fff;
+  font-weight: 700;
+}
 </style>

pdaaphm-ui/src/views/dashboard/BarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="barChart" :class="className" :style="{height:height,width:width}" />
+  <div ref="barChart" :class="className" :style="{ height: height, width: width }" />
 </template>
 
 <script>
@@ -29,12 +29,12 @@ export default {
     return {
       chart: null,
       // 数量
-      estimate:0,
-      extract:0,
-      denoise:0,
-      fault:0,
-      completion:0,
-      expand:0
+      estimate: 0,
+      extract: 0,
+      denoise: 0,
+      fault: 0,
+      completion: 0,
+      expand: 0
     }
   },
   mounted() {
@@ -62,7 +62,11 @@ export default {
       option = {
         xAxis: {
           type: 'category',
-          data: ['去噪', '补全', '扩充', '特征提取', '退化评估', '故障预测'],
+          data: ['补全', '去噪', '扩充', '特征提取', '退化评估', '故障预测'],
+          axisLabel: {
+            show: true,
+            color: '#ffffff',
+          }
         },
         yAxis: {
           type: 'value',
@@ -72,13 +76,13 @@ export default {
             data: [
               {
                 // value: this.denoise,
-                value: 6,
+                value: 5,
                 itemStyle: {
                   color: '#5470c6',
                 },
               },
               {
-                value: 6,
+                value: 3,
                 itemStyle: {
                   color: '#5470c6',
                 },
@@ -90,7 +94,7 @@ export default {
                 },
               },
               {
-                value: 9,
+                value: 5,
                 itemStyle: {
                   color: '#9fe080',
                 },
@@ -102,14 +106,14 @@ export default {
                 },
               },
               {
-                value: 6,
+                value: 5,
                 itemStyle: {
-                  color: '#ffdc60',
+                  color: '#ff7070',
                 },
               }
             ],
             type: 'bar',
-            barWidth:50
+            barWidth: 50
           },
         ],
       }
@@ -117,23 +121,23 @@ export default {
     },
     // 获取
     getList(value) {
-      this.queryParams={pageNum:1,pageSize:100,type:value}
+      this.queryParams = { pageNum: 1, pageSize: 100, type: value }
       listSubType(this.queryParams).then(response => {
         // this.subTypeList = response.rows;
-        
-        if(value===1){
+
+        if (value === 1) {
           console.log(value);
           console.log(this.estimate);
-        }else if(value===2){
-          this.extract=response.total
-        }else if(value===3){
-          this.denoise=response.total
-        }else if(value===4){
-          this.fault=response.total
-        }else if(value===5){
-          this.completion=response.total
-        }else{
-          this.expand=response.total
+        } else if (value === 2) {
+          this.extract = response.total
+        } else if (value === 3) {
+          this.denoise = response.total
+        } else if (value === 4) {
+          this.fault = response.total
+        } else if (value === 5) {
+          this.completion = response.total
+        } else {
+          this.expand = response.total
         }
       });
     },

pdaaphm-ui/src/views/homePage/curveCharts.vue

@@ -0,0 +1,142 @@
+<template>
+  <div ref="curveRef" style="height: 400px; width: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "CurveCharts",
+  props: {
+    // chartRef: {
+    //   type: String,
+    //   required: true
+    // },
+    // width: {
+    //   type: String,
+    //   default: "100%",
+    // },
+    // height: {
+    //   type: String,
+    //   default: "400px",
+    // },
+    title: {
+      type: String,
+      default: "",
+    },
+    /**
+     * chartData包括：
+     * title:''
+     * legendData:[]
+     * xAxisData:{}
+     * yAxisData:{}
+     * seriesData:{}
+     */
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // color: [
+      //   "#5470c6",
+      //   "#91cc75",
+      //   "#fac858",
+      //   "#ee6666",
+      //   "#73c0de",
+      //   "#3ba272",
+      //   "#fc8452",
+      //   "#9a60b4",
+      //   "#ea7ccc",
+      // ],
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        // this.initChart()
+        this.$nextTick(() => {
+          this.initChart();
+          this.setOptions(val);
+        });
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+        this.chart = null;
+      }
+      this.$refs.curveRef.style.width =
+        window.innerWidth - window.innerWidth * 0.2 + "px";
+      this.chart = echarts.init(this.$refs.curveRef);
+      this.chart.showLoading();
+      this.setOptions(this.chartData);
+    },
+    setOptions({ legendData, xAxisData, yAxisData, seriesData } = {}) {
+      this.chart.setOption({
+        title: {
+          text: this.title,
+          textStyle: {
+            //文字颜色
+            color: "#fff",
+          },
+          left: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          // data: legendData,
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+          },
+          top: 30,
+        },
+        // color: this.color,
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+        },
+        yAxis: {
+          type: "value",
+          // data: yAxisData
+        },
+        dataZoom: [
+          {
+            type: "slider",
+            start: 0,
+            end: 100,
+          },
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+        ],
+        // series: series
+        series: seriesData,
+      });
+      this.chart.hideLoading();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>

pdaaphm-ui/src/views/homePage/preCharts.vue

@@ -0,0 +1,144 @@
+<template>
+  <div ref="preCurveRef" style="height: 400px; width: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "preCharts",
+  props: {
+    // chartRef: {
+    //   type: String,
+    //   required: true
+    // },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    /**
+     * chartData包括：
+     * title:''
+     * legendData:[]
+     * xAxisData:{}
+     * yAxisData:{}
+     * seriesData:{}
+     */
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      // color: [
+      //   "#5470c6",
+      //   "#91cc75",
+      //   "#fac858",
+      //   "#ee6666",
+      //   "#73c0de",
+      //   "#3ba272",
+      //   "#fc8452",
+      //   "#9a60b4",
+      //   "#ea7ccc",
+      // ],
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        // this.initChart()
+        this.$nextTick(() => {
+          this.initChart();
+          this.setOptions(val);
+        });
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      if (this.chart) {
+        this.chart.dispose();
+        this.chart = null;
+      }
+      // console.log('66', this.chartRef)
+      this.$refs.preCurveRef.style.width =
+        window.innerWidth - window.innerWidth * 0.2 + "px";
+      this.chart = echarts.init(this.$refs.preCurveRef);
+      this.chart.showLoading();
+      this.setOptions(this.chartData);
+    },
+    setOptions({ legendData, xAxisData, yAxisData, seriesData } = {}) {
+      console.log("seriesData", seriesData);
+      this.chart.setOption({
+        title: {
+          text: this.title,
+          textStyle: {
+            //文字颜色
+            color: "#fff",
+          },
+          left: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          // data: legendData,
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+          },
+          top: 30,
+        },
+        // color: this.color,
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+        },
+        yAxis: {
+          type: "value",
+          // data: yAxisData
+        },
+        dataZoom: [
+          {
+            type: "slider",
+            start: 0,
+            end: 100,
+          },
+          {
+            type: "inside",
+            start: 0,
+            end: 100,
+          },
+        ],
+        // series: series
+        series: seriesData,
+      });
+      this.chart.hideLoading();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>

pdaaphm-ui/src/views/homePage/ringChart.vue

@@ -39,13 +39,14 @@ export default {
         legend: {
           left: 'center',
           top:'top',
+          padding:[0,0,10,0],
           textStyle:{//图例文字的样式
             color:'#fff'
           }
         },
         title: {
           text: '算法总数',
-          subtext:this.total,
+          subtext:28,
           textStyle: {
             fontSize: 16, 
             color:'#fff',
@@ -80,9 +81,10 @@ export default {
               show: false,
             },
             data: [
-              { value: 17, name: '数据处理' },
-              { value: 9, name: '特征提取' },
-              { value: 11, name: '故障预测' },
+              { value: 13, name: '数据预处理' },
+              { value: 5, name: '特征提取' },
+              { value: 5, name: '退化评估' },
+              { value: 5, name: '故障预测' },
             ],
           },
         ],
@@ -97,7 +99,7 @@ export default {
 
       this.chart.on('mouseout',  () => {
         this.option.title.text = '算法总数'
-        this.option.title.subtext = this.total
+        this.option.title.subtext = 28
         this.chart.setOption(this.option)
       })
       this.option && this.chart.setOption(this.option)
@@ -108,7 +110,7 @@ export default {
       this.queryParams={pageNum:1,pageSize:100}
       listSubType(this.queryParams).then(response => {
         // this.subTypeList = response.rows;
-        this.total = response.total;
+        // this.total = response.total;
         this.loading = false;
         this.ringChart()
       });

pdaaphm-ui/vue.config.js

@@ -1,15 +1,16 @@
-'use strict'
-const path = require('path')
+"use strict";
+const path = require("path");
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const CompressionPlugin = require('compression-webpack-plugin')
+const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = process.env.VUE_APP_TITLE || '装备性能退化评估和故障预测健康管理系统' // 网页标题
+const name =
+  process.env.VUE_APP_TITLE || "装备性能退化评估和故障预测健康管理系统"; // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@@ -20,16 +21,16 @@ module.exports = {
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: 'dist',
+  outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: 'static',
+  assetsDir: "static",
   // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: process.env.NODE_ENV === "development",
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   // webpack-dev-server 相关配置
   devServer: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: port,
     open: true,
     proxy: {
@@ -38,97 +39,96 @@ module.exports = {
         target: `http://localhost:8088`,
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
-        }
-      }
+          ["^" + process.env.VUE_APP_BASE_API]: "",
+        },
+      },
     },
-    disableHostCheck: true
+    disableHostCheck: true,
   },
   css: {
     loaderOptions: {
       sass: {
-        sassOptions: { outputStyle: "expanded" }
-      }
-    }
+        sassOptions: { outputStyle: "expanded" },
+      },
+    },
   },
   configureWebpack: {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src')
-      }
+        "@": resolve("src"),
+      },
     },
     plugins: [
       // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
       new CompressionPlugin({
-        cache: false,                   // 不启用文件缓存
-        test: /\.(js|css|html)?$/i,     // 压缩文件格式
-        filename: '[path].gz[query]',   // 压缩后的文件名
-        algorithm: 'gzip',              // 使用gzip压缩
-        minRatio: 0.8                   // 压缩率小于1才会压缩
-      })
+        cache: false, // 不启用文件缓存
+        test: /\.(js|css|html)?$/i, // 压缩文件格式
+        filename: "[path].gz[query]", // 压缩后的文件名
+        algorithm: "gzip", // 使用gzip压缩
+        minRatio: 0.8, // 压缩率小于1才会压缩
+      }),
     ],
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    config.plugins.delete("preload"); // TODO: need test
+    config.plugins.delete("prefetch"); // TODO: need test
 
     // set svg-sprite-loader
+    config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
     config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
-    config.module
-      .rule('icons')
+      .rule("icons")
       .test(/\.svg$/)
-      .include.add(resolve('src/assets/icons'))
+      .include.add(resolve("src/assets/icons"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: "icon-[name]",
       })
-      .end()
+      .end();
 
-    config.when(process.env.NODE_ENV !== 'development', config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
+    config.when(process.env.NODE_ENV !== "development", (config) => {
+      config
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
+          {
             // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
+            inline: /runtime\..*\.js$/,
+          },
+        ])
+        .end();
 
-          config.optimization.splitChunks({
-            chunks: 'all',
-            cacheGroups: {
-              libs: {
-                name: 'chunk-libs',
-                test: /[\\/]node_modules[\\/]/,
-                priority: 10,
-                chunks: 'initial' // only package third parties that are initially dependent
-              },
-              elementUI: {
-                name: 'chunk-elementUI', // split elementUI into a single package
-                test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
-                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-              },
-              commons: {
-                name: 'chunk-commons',
-                test: resolve('src/components'), // can customize your rules
-                minChunks: 3, //  minimum common number
-                priority: 5,
-                reuseExistingChunk: true
-              }
-            }
-          })
+      config.optimization.splitChunks({
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: "initial", // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: "chunk-elementUI", // split elementUI into a single package
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+          },
+          commons: {
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true,
+          },
+        },
+      });
 
-          config.optimization.runtimeChunk('single'),
-          {
-             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-             to: './' //到根目录下
-          }
-    })
-  }
-}
+      config.optimization.runtimeChunk("single"),
+        {
+          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+          to: "./", //到根目录下
+        };
+    });
+  },
+};