cart公共组件动画优化。

src/components/chart/LineChart.vue

@@ -2,12 +2,11 @@
   <div id="lineChart" ref="line"></div>
 </template>
 <script>
-import * as echarts from "echarts";
 export default {
   name: "LineChart",
   data() {
     return {
-      lineChart: null,
+      lineChart: null
     };
   },
   props: {
@@ -15,21 +14,21 @@ export default {
       type: Array,
       default() {
         return [];
-      },
+      }
     },
     valueData: {
       type: Array,
       default() {
         return [];
-      },
-    },
+      }
+    }
   },
   watch: {
     valueData: {
       handler(val) {
         this.initEchart(this.categoryData, this.valueData);
       },
-      immediate: false,
+      immediate: false
     }
   },
   mounted() {
@@ -40,43 +39,39 @@ export default {
   methods: {
     initEchart(xData, seriesData) {
       if (!this.lineChart) {
-        this.lineChart = echarts.init(this.$refs.line);
+        this.lineChart = this.$Echarts.init(this.$refs.line);
       }
       let option = {
         tooltip: {
           show: true,
-          trigger: "axis",
+          trigger: "axis"
         },
         grid: {
           left: "3%",
           right: "4%",
           bottom: "3%",
           top: "20px",
-          containLabel: true,
+          containLabel: true
         },
         xAxis: {
           type: "category",
           data: xData,
           axisTick: {
-            show: false, // 不显示坐标轴刻度线
+            show: false // 不显示坐标轴刻度线
           },
           axisLine: {
             show: true,
             lineStyle: {
               color: "rgba(219,225,255,1)",
               width: 1,
-              type: "solid",
-            },
+              type: "solid"
+            }
           },
           axisLabel: {
             //x轴文字的配置
             show: true,
-            color: "rgba(219,225,255,1)",
-            // 旧版textStyle写法
-            // textStyle: {
-            //   color: "rgba(219,225,255,1)"
-            // }
-          },
+            color: "rgba(219,225,255,1)"
+          }
         },
         yAxis: {
           // min: 1000,
@@ -90,54 +85,47 @@ export default {
           type: "value",
           scale: true,
           splitLine: {
-            show: false, // 不显示网格线
+            show: false // 不显示网格线
           },
           axisLine: {
-            show: false, // 不显示坐标轴线
+            show: false // 不显示坐标轴线
           },
           axisLabel: {
             //y轴文字的配置
             color: "rgba(219,225,255,1)",
-            margin: 15,
-            // 旧版textStyle写法
-            // textStyle: {
-            //   color: "rgba(219,225,255,1)",
-            //   margin: 15
-            // }
-            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
-          },
+            margin: 15
+          }
         },
         series: [
           {
             data: seriesData,
-            // data: this.seriesData,
             type: "line",
             smooth: true,
             itemStyle: {
-              color: "#00aaff",
+              color: "#00aaff"
             },
             areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              color: new this.$Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: "#00aaff",
+                  color: "#00aaff"
                 },
                 {
                   offset: 1,
-                  color: "#00aaff00",
-                },
-              ]),
-            },
-          },
-        ],
+                  color: "#00aaff00"
+                }
+              ])
+            }
+          }
+        ]
       };
       this.lineChart.setOption(option);
-    },
-  },
+    }
+  }
 };
 </script>
 <style>
-#lineChart {
+#lineChart {      
   width: 100%;
   height: 100%;
 }

src/components/common/BottomMenus.vue

@@ -17,6 +17,8 @@
     />
     <!-- 上传数据弹窗 -->
     <UploadingData @changeShowBottomMenusStatus="changeShowBottomMenusStatus" />
+    <!-- 报告输出弹窗 -->
+    <ReportOutput @changeShowBottomMenusStatus="changeShowBottomMenusStatus"/>
     <!-- 自定义模型 -->
     <CustomModelDialog />
     <!-- 底部菜单主体 -->
@@ -87,6 +89,7 @@ import MyMission from "./BottomForm/MyMission.vue";
 import SameScreenComparison from "./BottomForm/SameScreenComparison.vue";
 import UploadingData from "./BottomForm/UploadingData.vue";
 import CustomModelDialog from "./BottomForm/CustomModelDialog.vue";
+import ReportOutput from "./BottomForm/ReportOutput.vue";
 export default {
   name: "BottomMenus",
   components: {
@@ -96,6 +99,7 @@ export default {
     SameScreenComparison,
     UploadingData,
     CustomModelDialog,
+    ReportOutput
   },
   data() {
     return {
@@ -151,7 +155,7 @@ export default {
           index: 2,
           width: "94px",
           title: "疑点报告",
-          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc" }],
+          subMenu: [{ index: 0, title: "报告输出", bgImage: "bgsc",clickEmit: "ReportOutput" }],
         },
         {
           index: 3,

src/components/common/ChartCard.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 组合chart外边框 -->
-  <div>
+  <div style="width: 100%;height: 100%;">
     <!-- 上部倾斜方块、标题和分割线 -->
     <div class="displayFlex">
       <div class="borders2"></div>

src/components/layout/MenuCard.vue

@@ -77,7 +77,11 @@
           :echartData="menuData.topSolt.commonData"
           @changeMousemoveIndex="changeMousemoveIndex"
         />
-        <div class="menuCardFlex" v-if="menuData.topSolt.commonName == 'TagCard'" :style="{justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center'}">
+        <div
+          class="menuCardFlex"
+          v-if="menuData.topSolt.commonName == 'TagCard'"
+          :style="{ justifyContent: menuData.topSolt.commonData.length > 1 ? 'space-between' : 'center' }"
+        >
           <TagCard
             v-for="(item, index) in menuData.topSolt.commonData"
             :data="item"
@@ -191,8 +195,8 @@ export default {
     changeMenu() {
       if (this.menuData != undefined && this.menuData.index != undefined && this.menuData.title != undefined) {
         this.$store.commit("changeLeftMenuTitle", this.menuData.title);
-        if(this.menuData.menuIndex != undefined && this.menuData.subMenuIndex != undefined) {
-          this.$store.commit("changeBackMenu", {index: this.menuData.menuIndex,subIndex: this.menuData.subMenuIndex});
+        if (this.menuData.menuIndex != undefined && this.menuData.subMenuIndex != undefined) {
+          this.$store.commit("changeBackMenu", { index: this.menuData.menuIndex, subIndex: this.menuData.subMenuIndex });
         }
       }
       if (this.menuData != undefined && this.menuData.gotoPageInfo != undefined) {
@@ -214,17 +218,18 @@ export default {
         if (this.$ifMenu(this.menuData.menuIndex, this.menuData.subMenuIndex)) {
           // 立即修改display为block
           this.$refs.menuCard.style.display = "block";
+          this.$refs.menuCard.style.opacity = "0";
           setTimeout(() => {
             this.$refs.menuCard.style.transform = "translate(0,0)";
             this.$refs.menuCard.style.opacity = "0.9";
-          });
+          },300);
         } else {
           // 延迟0.3s后修改display为none
           this.$refs.menuCard.style.transform = this.positionTotransform();
           this.$refs.menuCard.style.opacity = "0";
-          setTimeout(() => {
+          // setTimeout(() => {
             this.$refs.menuCard.style.display = "none";
-          }, 300);
+          // }, 300);
         }
       }
     },

src/main.js

@@ -17,9 +17,11 @@ import { post, postform } from "./utils/request.js";
 import urls from "./api/url";
 // 引入dayjs库
 import dayjs from 'dayjs';
+import * as echarts from "echarts";
 
 Vue.directive("drag", drag);
 Vue.prototype.$Post = post;
+Vue.prototype.$Echarts = echarts;
 Vue.prototype.$dayjs = dayjs;
 Vue.prototype.$PostForm = postform
 Vue.prototype.urlsCollection = urls;