更改echarts展示bug，更改软件名称位置、增加算法指标

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 - 100px);
   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 - 134px);
   }
 
   .fixed-header + .app-main {
-    padding-top: 84px;
+    padding-top: 134px;
   }
 }
 </style>

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

@@ -13,7 +13,7 @@
       v-if="!topNav"
     />
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
-    <div class="title">装备性能退化评估和故障预测健康管理软件</div>
+    <!-- <div class="title">装备性能退化评估和故障预测健康管理软件</div> -->
     <div class="right-menu">
       <template v-if="device !== 'mobile'">
         <search id="header-search" class="right-menu-item" />

pdaaphm-ui/src/layout/index.vue

@@ -15,6 +15,9 @@
       class="main-container"
     >
       <div :class="{ 'fixed-header': fixedHeader }">
+        <div class="headerTitle">
+          <div class="titleText">装备性能退化评估和故障预测健康管理软件</div>
+        </div>
         <navbar />
         <tags-view v-if="needTagsView" />
       </div>
@@ -120,14 +123,20 @@ export default {
   width: 100%;
 }
 
-.headTitle {
+.headerTitle {
+  width: 100%;
+  height: 50px;
+  background-color: #0b333f;
+  box-shadow: inset 0 -2px rgba(0, 21, 41, 0.35);
+}
+.titleText {
   width: 500px;
-  position: absolute;
+  height: 50px;
+  line-height: 50px;
+  font-size: 1.6rem;
+  margin-left: 50%;
+  transform: translate(-50%, 0);
   color: #fff;
-  left: 50%;
-  font-size: 1.5rem;
-  margin-left: -250px;
-  top: 50%;
-  margin-top: -20px;
+  font-weight: 700;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="curveRef" :style="{ height: height, width: width }"></div>
+  <div ref="curveRef" style="height: 400px; width: 100%"></div>
 </template>
 
 <script>
@@ -11,14 +11,14 @@ export default {
     //   type: String,
     //   required: true
     // },
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "400px",
-    },
+    // width: {
+    //   type: String,
+    //   default: "100%",
+    // },
+    // height: {
+    //   type: String,
+    //   default: "400px",
+    // },
     title: {
       type: String,
       default: "",
@@ -83,13 +83,13 @@ export default {
         this.chart.dispose();
         this.chart = null;
       }
-      // console.log('66', this.chartRef)
+      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 } = {}) {
-      console.log("seriesData", seriesData);
       this.chart.setOption({
         title: {
           text: this.title,

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="curveRef" :style="{ height: height, width: width }"></div>
+  <div ref="preCurveRef" style="height: 400px; width: 100%"></div>
 </template>
 
 <script>
@@ -84,7 +84,9 @@ export default {
         this.chart = null;
       }
       // console.log('66', this.chartRef)
-      this.chart = echarts.init(this.$refs.curveRef);
+      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);
     },

pdaaphm-ui/src/views/index.vue

@@ -499,9 +499,12 @@
         style="width: 100%; height: 400px"
       ></div> -->
       <ImagePreview
+        class="image-preview"
         v-if="['4', '5'].includes(fileType)"
         :src="imgPreviewUrl"
       ></ImagePreview>
+
+      <div class="remark">指标结果：{{ agloRemark }}</div>
     </el-dialog>
   </div>
 </template>
@@ -561,6 +564,7 @@ export default {
       resultChartData: {},
       nowRow: {},
       nowTypeNum: null,
+      agloRemark: "",
     };
   },
   created() {
@@ -670,6 +674,7 @@ export default {
       this.loading = true;
       if (typeNum === 5 || typeNum === 6) {
         getData(row.resultDataId).then((res) => {
+          this.agloRemark = res.data.remark;
           this.imgPreviewUrl = res.data.imagePath;
           this.loading = false;
           this.fileShowVisible = true;
@@ -699,6 +704,7 @@ export default {
         getData(row.resultDataId)
           .then((resultRes) => {
             const resData = resultRes.data;
+            this.agloRemark = resData.remark;
             const url = process.env.VUE_APP_BASE_API + resData.dataPath;
             this.fetchLogFile(url).then((text) => {
               let data, content, head;
@@ -721,32 +727,32 @@ export default {
         case "0":
           this.fileShowVisible = true;
           this.handleResultChartOption(content, head, true);
-          this.loading = false;
+          // this.loading = false;
           break;
         case "1":
           this.fileShowVisible = true;
           this.handleResultChartOption(content, head, false);
-          this.loading = false;
+          // this.loading = false;
           break;
         case "2":
           this.fileShowVisible = true;
           this.$nextTick(() => {
             this.handleResultChartOption(content, head, false);
-            this.loading = false;
+            // this.loading = false;
           });
           break;
         case "3":
           this.fileShowVisible = true;
           this.$nextTick(() => {
             this.handleResultChartOption(content, head, false);
-            this.loading = false;
+            // this.loading = false;
           });
           break;
         case "4":
           this.fileShowVisible = true;
           this.$nextTick(() => {
             this.handleResultChartOption(content, head, false);
-            this.loading = false;
+            // this.loading = false;
           });
           break;
         case "5":
@@ -903,6 +909,7 @@ export default {
       }
       this.resultChartData.seriesData = series;
       this.resultChartData.xAxisData = content[0].map((_, index) => index);
+      this.loading = false;
     },
     // 切换表格/曲线展示
     changeShow() {
@@ -945,7 +952,7 @@ export default {
 <style scoped lang="scss">
 .home {
   width: 100%;
-  min-height: calc(100vh - 84px);
+  min-height: calc(100vh - 134px);
   overflow: hidden;
 }
 
@@ -1175,4 +1182,15 @@ export default {
   background-color: #1e262f;
   color: white;
 }
+.remark {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  color: #fff;
+  margin-left: 10%;
+}
+
+.image-preview {
+  margin-left: 50%;
+  transform: translate(-50%, 0);
+}
 </style>