a8k_webui/src/components/ServiceConfigurationActionLog.vue

<template>
  <div v-if="null !== props.log" class="h-full flex flex-col">
    <div class="border rounded p-3 whitespace-pre bg-white mb-3">
      执行动作 : {{ props.log.action }}
    </div>

    <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">
        {{ JSON.stringify(item, null, 2) }}
      </div>
    </div>

    <div class="border rounded p-3 whitespace-pre bg-white mb-3 h-0 grow overflow-y-auto">
      <div>响应内容：</div>
      <div class="select-all">{{ JSON.stringify(props.log.response, null, 2) }}</div>
    </div>

    <a-modal v-model:open="chartEnable" title="曲线" width="90%" @ok="chartEnable = false">
      <div ref="chartContainer" class="w-full bg-white mb-3 border rounded" style="height:600px;"></div>
    </a-modal>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, nextTick, watch } from 'vue';
/** @var {Object} */
const props = defineProps({
    log: Object,
});
/** @var {Element} */
const chartContainer = ref(null);
/** @var {Boolean} */
const chartEnable = ref(false);
/** @var {echarts} */
let chart = null;
// watch log
watch(() => props.log, handleLogChange, {deep:true});

// handle log change
async function handleLogChange() {
    chartEnable.value = false;
    if ( null !== chart ) {
        chart.dispose();
        chart = null;
    }

    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}));

        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);
    }
}
</script>