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>

    <a-modal v-model:open="reultDisplay" title="" width="90%" @ok="reultDisplay = false">
      <div class="border rounded p-3 whitespace-pre bg-white mb-3 h-0 grow overflow-y-auto" style="height:600px;">
        <vue-json-pretty :data="resultContent" :deep="1"></vue-json-pretty>
      </div>
    </a-modal>

    <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';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
/** @var {Object} */
const props = defineProps({
  log: Object,
});
/** @var {Element} */
const chartContainer = ref(null);
/** @var {Boolean} */
const chartEnable = ref(false);
const reultDisplay = ref(false);
const resultContent = ref({});
/** @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: 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: 'slider',  // 滑动条缩放
        show: true,
        xAxisIndex: [0],  // 只作用于x轴

      }, {
        type: 'slider',  // 滑动条缩放
        show: true,
        yAxisIndex: [0],  // 只作用于y轴
      }],
      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' } }
        },
      }]
    });
  } else {
    resultContent.value = props.log.response;
    reultDisplay.value = true;
  }
}
</script>