eta_forum_front/src/views/etaChart/components/ChartWrap.vue

<script setup>
import { watch, nextTick, ref } from "vue"
import { apiETAChart } from '@/api/etaChart'
import { useChartRender } from '@/hooks/chart/render'
import { useRouter } from "vue-router"

const router = useRouter()

const { options, axisLimitState, chartRender, setLimitData, isUseSelfLimit } = useChartRender()

const props = defineProps({
  chartInfoId: {
    type: [Number, String],
    default: ''
  }
})

watch(
  () => props.chartInfoId,
  (n) => {
    if (!n) {
      tableData.value = []
      intro.value = ''
      chartInfo.value = null
      return
    }
    getChartDetail()
  }
)

const columns = [
  {
    colKey: 'EdbName',
    title: '指标名称',
    align: 'center'
  },
  {
    colKey: 'Frequency',
    title: '更新频度',
    width: '100',
    align: 'center'
  },
  {
    colKey: 'LatestDate',
    title: '最新日期',
    width: '120',
    align: 'center'
  },
  {
    colKey: 'LatestValue',
    title: '最新值',
    width: '100',
    align: 'center'
  },
  {
    colKey: 'SourceName',
    title: '数据来源',
    width: '150',
    align: 'center'
  }
]
const tableData = ref([])
const intro = ref('')
const chartInfo = ref(null)
const calendarType = ref('公历')
async function getChartDetail() {

  const res = await apiETAChart.chartDetail({
    ChartInfoId: props.chartInfoId,
    Calendar: calendarType.value,
  })
  if (res.Ret === 200) {
    tableData.value = res.Data.EdbInfoList || []
    intro.value = res.Data.ChartInfo.Description
    chartInfo.value = res.Data.ChartInfo

    //初始化上下限
    isUseSelfLimit.value = true
    setLimitData(res.Data)
    nextTick(() => {
      chartRender({
        data: {
          ...res.Data,
          ChartInfo: {
            ...res.Data.ChartInfo,
            Calendar: calendarType.value||'公历'
          },
        },
        renderId: 'chart-box',
        // lang:currentLang.value,
        changeLangIsCheck: false,
        showChartTitle: true,
        shouldUseSelfLimit:true,
      })
    })
  }
}


// 跳转指标溯源
function handleGoEdbSource(data) {
  const href = router.resolve({
    path: '/EDBSource',
    query: {
      code: data.UniqueCode
    }
  }).href
  window.open(href, "_blank")
}



</script>

<template>
  <div class="bg-white chart-wrap">
    <template v-if="props.chartInfoId">
      <div class="chart-render-wrap">
        <div class="chart-box" id="chart-box"></div>
        <div style="text-align: center">
          <!-- 季节图 公历农历切换 -->
          <t-radio-group
            variant="primary-filled"
            v-model="calendarType"
            @change="getChartDetail"
            v-if="chartInfo?.ChartType === 2"
          >
            <t-radio-button value="公历">公历</t-radio-button>
            <t-radio-button value="农历">农历</t-radio-button>
          </t-radio-group>
        </div>

        <div class="chart-source" v-if="chartInfo">
          <span
            v-if="
              chartInfo.SourcesFrom && JSON.parse(chartInfo.SourcesFrom).isShow
            "
            :style="`color: ${
              JSON.parse(chartInfo.SourcesFrom).color
            };fontSize: ${JSON.parse(chartInfo.SourcesFrom).fontSize}px;
                          `"
            >来源:{{ JSON.parse(chartInfo.SourcesFrom).text }}</span
          >
        </div>
      </div>
      <div class="table-wrap">
        <t-table
          row-key="index"
          :data="tableData"
          :columns="columns"
          bordered
          hover
          max-height="300"
          cell-empty-content="-"
          resizable
        >
          <template #SourceName="{ row }">
            <span>{{ row.SourceName }}</span>
            <!-- 指标溯源 -->
            <svg-icon
              v-if="row.EdbType === 2"
              style="
                font-size: 20px;
                cursor: pointer;
                position: relative;
                top: 5px;
                color:#0052D9
              "
              name="edb_source"
              @click="handleGoEdbSource(row)"
            ></svg-icon>
          </template>
        </t-table>
      </div>
      <div class="instructions-wrap" v-if="intro">
        <p>逻辑简述:</p>
        <p>{{ intro }}</p>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.chart-wrap {
  flex: 1;
  min-width: 600px;
  border: 1px solid #dcdfe6;
  padding: 30px;
  .chart-render-wrap {
    margin-bottom: 20px;
    .chart-box {
      height: 600px;
    }
  }
  .instructions-wrap {
    margin-top: 20px;
    line-height: 1.7;
  }
}
</style>