Quellcode durchsuchen

修改图表问题

chenbaoxin vor 4 Monaten
Ursprung
Commit
63612956c0

+ 11 - 2
src/components/LineChart/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, watchEffect, defineProps,PropType } from "vue";
+import { ref, onMounted, onBeforeUnmount, watchEffect, defineProps,PropType,defineExpose } from "vue";
 import * as echarts from "echarts";
 
 // Define props
@@ -105,7 +105,16 @@ const initChart = () => {
   };
   myChart.setOption(option,true);
 };
-
+const saveChartAndSend = async () => {
+  const imgData = myChart.getDataURL({
+    type: 'png',
+    pixelRatio: 2,
+    backgroundColor: '#fff'
+  });
+  console.log(imgData);
+  
+  };
+ defineExpose({ saveChartAndSend });
 onMounted(() => {
   initChart();
   window.addEventListener("resize", () => {

+ 16 - 18
src/views/HealthStatusAnalysis/index.vue

@@ -722,7 +722,6 @@ const workChange = () => {
     let result = workParamsAllRef.value.filter((obj: DataPoint) => {
      return  obj.x >= Number(sDate) && obj.x <= Number(eDate)&&(hlQueryParams.value.tStatus=='all'?true:obj.type==hlQueryParams.value.tStatus);
     });
-    debugger
     lastResult=result
   }
   if (!!!hlQueryParams.value.sDate || !!!hlQueryParams.value.eDate) {
@@ -784,47 +783,46 @@ const healthyMessage = (data: Object) => {
   }]
 };
 
-// 提示信息
 const gridData = [
   {
-    date: ">75",
+    date: "<0.10",
     name: "10%",
     address: "健康",
   },
   {
-    date: "50-75",
+    date: "0.10-0.25",
     name: "25%",
     address: "轻微异常",
   },
-  // {
-  //   date: "50-75",
-  //   name: "75%",
-  //   address: "故障",
-  // },
   {
-    date: "<50",
+    date: "0.25-0.75",
+    name: "75%",
+    address: "故障",
+  },
+  {
+    date: ">0.75",
     name: "75%",
     address: "严重异常",
   },
 ];
 const determineHealthStatus = (avgNum:any) => {
   let value=avgNum/100
-  if (value >0.75) {
+  if (value < 0.10) {
     return  {
       name:`健康(${avgNum}%)`,
       color:''
     };
-  } else if (value >= 0.50 && value <= 0.75) {
+  } else if (value >= 0.10 && value <= 0.25) {
     return {
       name:`轻微异常(${avgNum}%)`,
       color:'warn'
     };
-  // } else if (value > 0.25 && value <= 0.75) {
-  //      return {
-  //     name:`故障(${avgNum}%)`,
-  //     color:'danger'
-  //   };
-  } else if (value < 0.5) {
+  } else if (value > 0.25 && value <= 0.75) {
+       return {
+      name:`故障(${avgNum}%)`,
+      color:'danger'
+    };
+  } else if (value > 0.75) {
        return {
       name:`严重异常(${avgNum}%)`,
       color:'error'

+ 11 - 6
src/views/OperationalReliabilityPrediction/index.vue

@@ -83,6 +83,7 @@
         <div class="chart">
           <!-- 图表组件 -->
           <LineChart
+          ref="lineChartRef"
             :xAxisData="xAxisData"
             :seriesData="seriesData"
             :showLegend="showLegend"
@@ -149,13 +150,16 @@ const { proxy } = getCurrentInstance()!;
 const router = useRouter();
 const route = useRoute(); // 获取当前路由对象
 // 可靠性预测导出
-const getAllDomElements = () => {
+const lineChartRef = ref(null);
+let serviceDataRef=ref(null)
+const getAllDomElements = async () => {
   // this.$nextTick(() => {
-  const htmlContent = document.documentElement.outerHTML;
-  const cleanedHtmlContent = htmlContent.replace(/[\r\n]+/g, "");
-  console.log(cleanedHtmlContent);
-  downloadFile(downloadStrategy(), "预测结果", { content: cleanedHtmlContent });
-  // });
+   let imgBase64=lineChartRef.value.saveChartAndSend();
+   serviceDataRef.value={
+    ...serviceDataRef.value,
+    imgBase64:imgBase64
+   }
+   
 };
 const goAdvice = (name: string) => {
   router.push({
@@ -223,6 +227,7 @@ onMounted(() => {
       proxy.$loading.stop();
 
       const result: any = res.data;
+      serviceDataRef.value=result;
       xAxisData.value = result.chart.x;
       forecast_result.value = result.forecast_result;
       devicesArr.value = result.devices;