eta_chart_front/src/views/chartShow/index.vue

<!--  -->
<template>
  <div class="chart-show">
    <header class="chart-header" @click="openNew">
      <span 
        class="chart-title" 
        @click.stop 
        @dblclick="copyText"
        :style="chartInfo.ChartThemeStyle?`
          text-align:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.align};
          font-size:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.fontSize}px;
          color:${JSON.parse(chartInfo.ChartThemeStyle).titleOptions.style.color}
        `:''"
      >
        {{ language === 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}
      </span>

    </header>
    <template v-if="haveData">
      <div
        class="chart-wrapper"
        id="chart-wrapper"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <chart 
          :options="options" 
          :chartId="chartInfo.ChartInfoId || 0" :chartInfo="chartInfo"
        />

        <div class="mark"></div>
      </div>
    </template>
    <div class="chart-wrapper notfound" v-else>
      <i class="el-icon-warning"></i>哎吆，你的图飞了，赶快去找管理员救命吧~
    </div>

    <!-- 图表来源说明 -->
    <div 
      class="chart-bottom-info bootom-source"
      v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow
    ">

      <!-- 图表说明 -->
      <div 
        class="chart-instruction text_oneLine" 
        v-text="JSON.parse(chartInfo.Instructions).text"
        :style="`
          color: ${JSON.parse(chartInfo.Instructions).color};
          font-size: ${ JSON.parse(chartInfo.Instructions).fontSize }px
        `"
      ></div>
    </div>

    <div class="bootom-source">

      <!-- 自定义来源 -->
      <div class="chart-source" 
        v-if="chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).isShow"
        :style="`
            color: ${ JSON.parse(chartInfo.SourcesFrom).color };
            font-size: ${ JSON.parse(chartInfo.SourcesFrom).fontSize }px;
        `"
      >
          source：<em>{{ JSON.parse(chartInfo.SourcesFrom).text}}</em>
      </div>

      <temeplate v-else>
        <div 
          v-if="$route.query.source=='smartReportGetImg'" 
          class="text_oneLine"
          :style="`
              color: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.color };
              font-size: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.fontSize }px;
          `"
        >
          source:<span style="display:inline">{{language === 'ch' ? chartInfo.ChartSource : chartInfo.ChartSourceEn}}</span>
        </div>
        <strong 
          v-else 
          class="text_oneLine" 
          :style="`
              flex:1;
              color: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.color };
              font-size: ${chartInfo.ChartThemeStyle&&JSON.parse(chartInfo.ChartThemeStyle).markerOptions.style.fontSize }px;
          `"
        >
          source:  <em> {{language === 'ch' ? chartInfo.ChartSource : chartInfo.ChartSourceEn}}</em>
        </strong>
      </temeplate>



      <ul class="right-action" @click.stop>
        <li v-if="$route.query.source==='ybxcx'"><collectBtn/></li>
        <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
        <li @click="refreshChart" v-if="chartInfo.UniqueCode&&$route.query.source!=='smartReportGetImg'"><i class="el-icon-refresh"/>刷新</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import _ from 'lodash';
import { useRoute } from 'vue-router';
import chart from '@/components/chart.vue';
import { IState } from './typing';
import { ChartApi } from '@/request/api';
import collectBtn from './components/collectBtn.vue'
import { useChartRender } from '@/hooks/chart/useChartRender';


export default defineComponent({
  components: {
    chart,
    collectBtn
  },
  setup() {
    const route = useRoute();
    const state = reactive<IState>({
      options: {},
      chartInfo: {},
      dataList: [],
      sourceName: ''
    });

    onMounted(() => {
      getChartInfo();
    });

    // 打开新窗口
    const openNew = (): void => {
			window.open(window.location.href,'_blank');
    }

    /* 获取图表数据信息 */
    const loading = ref(false);
    const haveData = ref(true);
    const code = ref(route.query.code);
    const isShare = ref(route.query.fromType === 'share');
    // 语言 中英文 ch en  默认中文
    const language = ref(route.query.lang || 'ch');
    const getChartInfo = async (type='') => {

      if(!code.value) {
        haveData.value = false; 
        return
      } 

      loading.value = true;
      try {
        const { Data } = await ChartApi.getChart({
          UniqueCode: code.value || '',
        });
        loading.value = false;
        state.chartInfo = Data.ChartInfo;
        state.dataList = Data.ChartInfo.Source === 1 ? Data.EdbInfoList : [Data.EdbInfoList[0]];

        //处理英文研报英文设置不全就展示中文
        setLangFromEnReport();
        document.title = language.value==='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;

        state.options = useChartRender(Data,language.value)
        
        haveData.value = true;
        type === 'refresh' && ElMessage.success('刷新成功');

        //水印配置
        const markDom = document.querySelector('.mark')
        Data.WaterMark&&(markDom.style.backgroundImage = `url(${Data.WaterMark})`)
      }catch (e) {
        loading.value = false;
        haveData.value = false; 
      }

    };


    //处理英文研报的图表英文设置不全的情况
    const setLangFromEnReport = () => {
      //来源于英文研报
      if(route.query.fromPage !== 'en') return
      let is_name_en = state.chartInfo.ChartNameEn ? true : false;//名称是否有英文
      let is_target_en = [2,9,10].includes(state.chartInfo.ChartType) ? true : state.dataList.every(_ => _.EdbNameEn);//指标是否有英文
      console.log(is_name_en,is_target_en)
      language.value = (is_name_en && is_target_en) ? 'en' : 'ch';
    }

    /* 复制标题 */
    const copyText = () => {
      const { chartInfo } = state;
      let input = document.createElement("input");
      input.value = chartInfo.ChartName;
      document.body.appendChild(input)
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      ElMessage.success('复制标题成功')
    }

    /* 分享链接 */
    const copyUrl = () => {
      let input = document.createElement("input");
      input.value = location.href;
      document.body.appendChild(input)
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      ElMessage.success('复制链接成功')
    }

    const refreshChart = _.debounce(async () => {
      loading.value = true;
      let res: any=null
      if([1,6,7,8,9,10].includes(state.chartInfo.Source)){
        res=await ChartApi.refreshChart({UniqueCode: state.chartInfo.UniqueCode})
      }else if([2,5].includes(state.chartInfo.Source)){
        res=await ChartApi.refreshCommordityChart({UniqueCode: state.chartInfo.UniqueCode});
      }else if([3,4].includes(state.chartInfo.Source)){
        res=await ChartApi.refreshRelevanceChart({UniqueCode: state.chartInfo.UniqueCode});
      }
      
      loading.value = false;
      res.Ret === 200 && getChartInfo('refresh');
    },400)

    return {
      ...toRefs(state),
      loading,
      haveData,
      getChartInfo,
      openNew,
      copyUrl,
      isShare,
      language,
      refreshChart,
      copyText
    };
  },
});
</script>
<style scoped lang="less">
@import './index.less';
</style>