jy2025-ui/src/views/risk/r6/index.vue

<template>
  <div class="app-container host-analysis">
    <div class="top-right-btn">
      <el-button type="primary" @click="handleIMap">指标映射</el-button>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="border-card" v-if="modelData.length">
      <el-tab-pane :label="item.modelName" :name="item.modelName" v-for="item in modelData" :key="item.modelId"/>
      <div class="tab-content">
        <div class="config-bar">
          <div v-for="item in configData" :key="item.hcId" :class="['c-row',{'active':item.metricsId === activeConfig}]"
               @click="changeConfig(item)">
            <span class="s-span"> > </span>
            {{ item.viewName }}
          </div>
        </div>
        <div class="tab-chart">
          <div ref="chartSort" :style="{height: !chartEmpty?'400px' : '0px' }"/>
          <el-empty description="暂无数据" v-if="chartEmpty"/>
        </div>
      </div>
    </el-tabs>
    <el-empty description="暂无数据" v-else/>
  </div>

  <el-dialog v-model="visible" title="指标映射" width="600">
    <index-mapping :configData="configData" @refresh="initConfig"/>
  </el-dialog>
</template>
<script setup lang="ts">
import {listConfig, listModel, listNetwork} from "@/api/risk/r5"
import {parseTime} from "@/utils/ruoyi"
import {onMounted} from "vue";
import * as echarts from "echarts";
import indexMapping from "./components/indexMapping.vue"

const modelData = ref([])
const activeName = ref('')
const configData = ref([])
const activeConfig = ref(null)
const chartSort = ref(null)
const visible = ref(false)
const chartEmpty = ref(false)

onMounted(() => {
  initConfig()
})

async function initConfig() {
  await getConfig()
  await getModelList()
}

function handleIMap() {
  visible.value = true
}

async function getModelList() {
  const res = await listModel()
  modelData.value = res.data
  activeName.value = modelData.value[0].modelName
  activeConfig.value = configData.value[0].metricsId
  await getNetwork(modelData.value[0].modelId, configData.value[0].metricsId)
}

async function getConfig() {
  const res = await listConfig({configType: 'network', pageNum: 1, pageSize: 100})
  configData.value = res.rows
}

function handleClick(tab) {
  activeConfig.value = configData.value[0].metricsId
  getNetwork(modelData.value[tab.index].modelId, configData.value[0].metricsId)
}

function changeConfig(item) {
  activeConfig.value = item.metricsId
  const modelId = modelData.value.find(p => p.modelName === activeName.value).modelId
  getNetwork(modelId, activeConfig.value)
}

async function getNetwork(modelId, metricsId) {
  const res = await listNetwork(modelId, metricsId)
  initChart(res.data)
}

function initChart(res) {
  const myChart = echarts.init(chartSort.value);
  if (res.length) {
    chartEmpty.value = false
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: res.map(p => p.name),
        textStyle: {
          color: "#849ac4"
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: res[0].data.map(p => parseTime(p.time, '{y}-{m}-{d}')),
        axisLine: {
          show: true,
          lineStyle: {
            color: "#849ac4",
            width: 0,
          }
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: "#849ac4",
            width: 0,
          }
        },
        splitLine: {
          lineStyle: {
            color: "#849ac480",
            type: 'dashed',
          }
        },
      },
      series: res.map(p => {
        return {
          name: p.name,
          type: 'line',
          smooth: true,
          symbolSize: 0,
          data: p.data.map(j => j.value)
        }
      })
    };
    myChart.setOption(option)
  } else {
    chartEmpty.value = true
    myChart.clear()
  }
}


</script>
<style lang="scss">
@import "../r5/css/style.scss";
</style>