From 5caefa72b637a180ce89a460b1186b08b19e19da Mon Sep 17 00:00:00 2001
From: zhaohe <h_zhaohe@163.com>
Date: Fri, 13 Dec 2024 10:11:42 +0800
Subject: [PATCH] add ExtApiCurve responent processer

---
 src/components/ServiceConfigurationActionLog.vue | 143 ++++++++++++++---------
 1 file changed, 87 insertions(+), 56 deletions(-)

diff --git a/src/components/ServiceConfigurationActionLog.vue b/src/components/ServiceConfigurationActionLog.vue
index 6a4ecbd..d449758 100644
--- a/src/components/ServiceConfigurationActionLog.vue
+++ b/src/components/ServiceConfigurationActionLog.vue
@@ -6,7 +6,7 @@
 
     <div class="border rounded p-3 whitespace-pre bg-white mb-3">
       <div>参数列表：</div>
-      <div v-for="(item,index) of props.log.params" :key="index" class="mr-2">
+      <div v-for="(item, index) of props.log.params" :key="index" class="mr-2">
         {{ JSON.stringify(item, null, 2) }}
       </div>
     </div>
@@ -26,7 +26,7 @@ import * as echarts from 'echarts';
 import { ref, nextTick, watch } from 'vue';
 /** @var {Object} */
 const props = defineProps({
-    log: Object,
+  log: Object,
 });
 /** @var {Element} */
 const chartContainer = ref(null);
@@ -35,65 +35,96 @@ const chartEnable = ref(false);
 /** @var {echarts} */
 let chart = null;
 // watch log
-watch(() => props.log, handleLogChange, {deep:true});
+watch(() => props.log, handleLogChange, { deep: true });
 
 // handle log change
 async function handleLogChange() {
-    chartEnable.value = false;
-    if ( null !== chart ) {
-        chart.dispose();
-        chart = null;
-    }
+  chartEnable.value = false;
+  if (null !== chart) {
+    chart.dispose();
+    chart = null;
+  }
 
-    if ( null === props.log 
-    || undefined === props.log.response 
-    || null === props.log.response ) {
-        return ;
-    }
+  if (null === props.log
+    || undefined === props.log.response
+    || null === props.log.response) {
+    return;
+  }
 
-    if ( 'A8kScanCurve' === props.log.response.$dataType ) {
-        chartEnable.value = true;
-        let minY = Math.min(... props.log.response.scanDataCurve) - 100;
-        let maxY = Math.max(... props.log.response.scanDataCurve) + 100;
-        
-        let refLine = props.log.response.refLine.map((v,i) => [i,v]);
-        let scanDataCurve = props.log.response.scanDataCurve.map((v,i) => [i,v]);
-        let refCurve = props.log.response.refCurve || []; 
-        refCurve = refCurve.map(v => ({xAxis:v}));
+  if ('A8kScanCurve' === props.log.response.$dataType) {
+    chartEnable.value = true;
+    let minY = Math.min(...props.log.response.scanDataCurve) - 100;
+    let maxY = Math.max(...props.log.response.scanDataCurve) + 100;
 
-        await nextTick();
-        chart = echarts.init(chartContainer.value);
-        chart.setOption({
-            xAxis: {type: 'value', axisLabel : {show:true}},
-            yAxis: {type: 'value', axisLabel : {show:true}, min:minY, max:maxY},
-            grid: {left: '3%', right: '4%', bottom: '3%', top:'3%', containLabel: true},
-            dataZoom : [{type:'inside'},{type:'inside',orient:'vertical'}],
-            tooltip: {trigger:'axis'},
-            series: [{
-                name: 'RefLine',
-                type: 'line',
-                itemStyle : {normal:{lineStyle:{width:1},color:'#ffb2b3'}},
-                showSymbol : false,
-                data: refLine
-            }, {
-                name: 'ScanDataCurve',
-                type: 'line',
-                data: scanDataCurve,
-                itemStyle : {normal:{lineStyle:{width:1},color:'#4d90ff'}},
-                showSymbol : false,
-                markLine : {
-                    slient : true,
-                    symbol : 'none',
-                    data : refCurve,
-                    label:{show:false},
-                    lineStyle : {normal:{type:'solid'}}
-                },
-            }]
-        });
-    }
-    else if ( 'FileToBeDownload' === props.log.response.$dataType ) {
-        var url = process.env.NODE_ENV === 'production' ? `${props.log.response.url}` : `http://localhost:80${props.log.response.url}`;
-        window.open(url);
-    }
+    let refLine = props.log.response.refLine.map((v, i) => [i, v]);
+    let scanDataCurve = props.log.response.scanDataCurve.map((v, i) => [i, v]);
+    let refCurve = props.log.response.refCurve || [];
+    refCurve = refCurve.map(v => ({ xAxis: v }));
+
+    await nextTick();
+    chart = echarts.init(chartContainer.value);
+    chart.setOption({
+      xAxis: { type: 'value', axisLabel: { show: true } },
+      yAxis: { type: 'value', axisLabel: { show: true }, min: minY, max: maxY },
+      grid: { left: '3%', right: '4%', bottom: '3%', top: '3%', containLabel: true },
+      dataZoom: [{ type: 'inside' }, { type: 'inside', orient: 'vertical' }],
+      tooltip: { trigger: 'axis' },
+      series: [{
+        name: 'RefLine',
+        type: 'line',
+        itemStyle: { normal: { lineStyle: { width: 1 }, color: '#ffb2b3' } },
+        showSymbol: false,
+        data: refLine
+      }, {
+        name: 'ScanDataCurve',
+        type: 'line',
+        data: scanDataCurve,
+        itemStyle: { normal: { lineStyle: { width: 1 }, color: '#4d90ff' } },
+        showSymbol: false,
+        markLine: {
+          slient: true,
+          symbol: 'none',
+          data: refCurve,
+          label: { show: true },
+          lineStyle: { normal: { type: 'solid' } }
+        },
+      }]
+    });
+  }
+  else if ('FileToBeDownload' === props.log.response.$dataType) {
+    var url = process.env.NODE_ENV === 'production' ? `${props.log.response.url}` : `http://localhost:80${props.log.response.url}`;
+    window.open(url);
+  }
+  else if ('ExtApiCurve' === props.log.response.$dataType) {
+    let response = props.log.response;
+    chartEnable.value = true;
+    let curve = response.data;
+    let markLine = response.markLine || [];
+    markLine = markLine.map(v => ({ xAxis: v }));
+
+    await nextTick();
+    chart = echarts.init(chartContainer.value);
+    chart.setOption({
+      xAxis: { type: response.xtype, axisLabel: { show: true } },
+      yAxis: { type: response.ytype, axisLabel: { show: true }, min: response.minY, max: response.maxY },
+      grid: { left: '3%', right: '4%', bottom: '3%', top: '3%', containLabel: true },
+      dataZoom: [{ type: 'inside' }, { type: 'inside', orient: 'vertical' }],
+      tooltip: { trigger: 'axis' },
+      series: [{
+        name: response.name,
+        type: 'line',
+        data: curve,
+        itemStyle: { normal: { lineStyle: { width: 1 }, color: '#4d90ff' } },
+        showSymbol: false,
+        markLine: {
+          slient: true,
+          symbol: 'none',
+          data: markLine,
+          label: { show: true },
+          lineStyle: { normal: { type: 'solid' } }
+        },
+      }]
+    });
+  }
 }
 </script>
\ No newline at end of file