You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.5 KiB
99 lines
3.5 KiB
<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>
|