Karsa 2 年之前
父節點
當前提交
e22ff83e97
共有 2 個文件被更改,包括 80 次插入57 次删除
  1. 1 0
      .gitignore
  2. 79 57
      src/views/chartShow/index.vue

+ 1 - 0
.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 horz_chart
 horz_chart.zip
+package-lock.json

+ 79 - 57
src/views/chartShow/index.vue

@@ -1,3 +1,33 @@
+<!--  -->
+<template>
+  <div class="chart-show">
+    <header class="chart-header" @click="openNew">
+      <span class="chart-title" @click.stop @dblclick="copyText">{{ language == 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}</span>
+    </header>
+    <template v-if="haveData">
+      <div
+        class="chart-wrapper"
+        id="chart-wrapper"
+        v-loading="loading"
+        element-loading-spinner="el-icon-loading"
+        element-loading-text="加载中..."
+      >
+        <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
+        <div class="mark"></div>
+      </div>
+    </template>
+    <div class="chart-wrapper notfound" v-else>
+      <i class="el-icon-warning"></i>哎吆,你的图飞了,赶快去找管理员救命吧~
+    </div>
+    <div class="bootom-source">
+      <strong style="flex-shrink: 0;">source:  <em> {{sourceName}}弘则研究</em></strong>
+      <ul class="right-action" @click.stop>
+        <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
+        <li @click="refreshChart"><i class="el-icon-refresh"/>刷新</li>
+      </ul>
+    </div>
+  </div>
+</template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
@@ -50,6 +80,8 @@ export default defineComponent({
 
     const code = ref(route.query.code);
     const isShare = ref(route.query.fromType === 'share');
+    // 语言 中英文 ch en  默认中文
+    const language = ref(route.query.lang || 'ch');
     const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
 
     const state = reactive<IState>({
@@ -97,7 +129,7 @@ export default defineComponent({
         loading.value = false;
         state.chartInfo = Data.ChartInfo;
         state.dataList = Data.EdbInfoList;
-        document.title = Data.ChartInfo.ChartName;
+        document.title = language.value=='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;
         haveData.value = true;
         dealSourceHandle();
         setOptions();
@@ -150,6 +182,7 @@ export default defineComponent({
         let MaxlabelLen = getLabelMaxLen(item.DataList) + item.Unit.length
 
         //y轴
+        let textEn = item.Unit?item.UnitEn:''
         let yItem = {
           ...basicYAxis,
           labels: {
@@ -164,7 +197,7 @@ export default defineComponent({
             },
           },
           title: {
-            text: sameSideIndex !== index ? '' : `${item.Unit}`,
+            text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
             // text: null,
             align: 'high',
             rotation: 0,
@@ -188,16 +221,19 @@ export default defineComponent({
 
         // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
         let dynamic_tag = concatDynamicTag(item)
-
+        // 英文后缀
+        let dynamic_tag_en = concatDynamicTag(item,'en')
         //数据列
+        let nameCh:String = dynamic_arr.length > 1
+              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
+              : `${item.EdbName}${dynamic_tag}`
+        let nameEn:String=item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:''
+        let name :String=language.value == 'ch'?nameCh:nameEn
         let obj = {
           data: [] as any[],
           type:  'spline',
           yAxis: sameSideIndex,
-          name:
-            dynamic_arr.length > 1
-              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-              : `${item.EdbName}${dynamic_tag}`,
+          name,
           color: item.ChartColor,
           lineWidth: Number(item.ChartWidth)
         };
@@ -320,6 +356,7 @@ export default defineComponent({
         let MaxlabelLen = getLabelMaxLen(item.DataList) + item.Unit.length
 
         //y轴
+        let textEn = item.Unit?item.UnitEn:''
         let yItem = {
           ...basicYAxis,
           labels: {
@@ -334,7 +371,7 @@ export default defineComponent({
             },
           },
           title: {
-            text: sameSideIndex !== index ? '' : `${item.Unit}`,
+            text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
             // text: null,
             align: 'high',
             rotation: 0,
@@ -358,16 +395,19 @@ export default defineComponent({
 
         // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
         let dynamic_tag = concatDynamicTag(item)
-
+        // 英文后缀
+        let dynamic_tag_en = concatDynamicTag(item,'en')
         //数据列
+        let nameCh:String = dynamic_arr.length > 1
+              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
+              : `${item.EdbName}${dynamic_tag}`
+        let nameEn:String=item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:''
+        let name :String=language.value == 'ch'?nameCh:nameEn
         let obj = {
           data: [] as any[],
           type: chartStyle || item.ChartStyle,
           yAxis: serie_yIndex,
-          name:
-            dynamic_arr.length > 1
-              ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
-              : `${item.EdbName}${dynamic_tag}`,
+          name,
           color: item.ChartColor,
           lineWidth: (chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
           fillColor: (chartInfo.ChartType === 3 || (chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
@@ -450,6 +490,7 @@ export default defineComponent({
           const index = chartData.DataList.findIndex(
             (item: ISeasonDataItemProps) => item.Year === j.Year
           );
+          let textEn = chartData.Unit?chartData.UnitEn:''
           const s_yItem = {
             labels: {
               formatter: function (ctx: any) {
@@ -463,7 +504,7 @@ export default defineComponent({
               x: -5,
             },
             title: {
-              text:  `${chartData.Unit}`,
+               text:language.value=='ch'?`${chartData.Unit}`:textEn,
               // text: null,
               align: 'high',
               rotation: 0,
@@ -501,7 +542,7 @@ export default defineComponent({
           const index = filterArr.findIndex(
             (item: ILunarItem) => item.Year === j.Year
           );
-
+          let textEn = chartData.Unit?chartData.UnitEn:''
           const s_yItem = {
             labels: {
               formatter: function (ctx: any) {
@@ -515,7 +556,7 @@ export default defineComponent({
               x: -5,
             },
             title: {
-              text:  `${chartData.Unit}`,
+              text:language.value=='ch'?`${chartData.Unit}`:textEn,
               // text: null,
               align: 'high',
               rotation: 0,
@@ -643,9 +684,14 @@ export default defineComponent({
       let tooltip = {
         formatter: function() {
           const that: any = this;
-          return `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
+          return language.value=='ch'?
+          `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
           ${dataList[0].EdbName}: <span style="font-weight: 600">	${that.x}</span><br>
           ${dataList[1].EdbName}: <span style="font-weight: 600">	${that.y}</span>
+          `:
+          `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
+          ${dataList[0].EdbNameEn}: <span style="font-weight: 600">	${that.x}</span><br>
+          ${dataList[1].EdbNameEn}: <span style="font-weight: 600">	${that.y}</span>
           `
         }
       }
@@ -654,7 +700,7 @@ export default defineComponent({
       //y轴
       let yAxis = {
         title: {
-          text:  `${dataList[1].Unit}`,
+          text: language.value=='ch'?`${dataList[1].Unit}`:dataList[1].Unit?dataList[1].UnitEn:'',
           // text: null,
           align: 'high',
           rotation: 0,
@@ -690,7 +736,7 @@ export default defineComponent({
       let series: any = {
         data: [],
         type: 'scatter',
-        name: `${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
+        name: language.value == 'ch'?`${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`:`${chartInfo.ChartNameEn}${IsOrder ? '(reserve)' : ''}`,
         color: ChartColor,
         lineWidth: 0
       }
@@ -707,7 +753,7 @@ export default defineComponent({
         xAxis: {
           ...scatterXAxis,
           title: {
-            text:  `${dataList[0].Unit}`,
+            text: language.value=='ch'?`${dataList[0].Unit}`:dataList[0].Unit?dataList[0].UnitEn:'',
             // text: null,
             align: 'high',
             rotation: 0,
@@ -737,19 +783,26 @@ export default defineComponent({
     };
 
     /* 拼接动态的指标名称小标签 */
-    const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps ): string => {
+    const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps,lang:String='ch'): string => {
       // IsAxis左轴1 右轴0 2右2轴 
       //IsOrder正序false 逆序true 
       //EdbInfoType是否是领先指标
-      const axisLabelMap:any = {
+      const axisLabelMap:any = lang=='ch'?{
         0: '右轴',
         2: '右2轴'
+      }:{
+        0: 'right axis',
+        2: 'second right axis'
       }
-      const orderLabelMap:any = {
+      const orderLabelMap:any = lang=='ch'?{
         1: '逆序'
+      }:{
+        1: 'reverse'
       }
-      const edbInfoMap:any = {
+      const edbInfoMap:any = lang=='ch'?{
         0: '领先'
+      }:{
+        0: 'lead'
       }
       
       let axis_tag = axisLabelMap[IsAxis] || '';
@@ -765,7 +818,7 @@ export default defineComponent({
     const copyText = () => {
       const { chartInfo } = state;
       let input = document.createElement("input");
-      input.value = chartInfo.ChartName;
+      input.value = language.value == 'ch'?chartInfo.ChartName:chartInfo.ChartNameEn;
       document.body.appendChild(input)
       input.select();
       document.execCommand('copy');
@@ -798,44 +851,13 @@ export default defineComponent({
       openNew,
       copyUrl,
       isShare,
+      language,
       refreshChart,
       copyText
     };
   },
 });
 </script>
-
-<!--  -->
-<template>
-  <div class="chart-show">
-    <header class="chart-header" @click="openNew">
-      <span class="chart-title" @click.stop @dblclick="copyText">{{ chartInfo.ChartName }}</span>
-    </header>
-    <template v-if="haveData">
-      <div
-        class="chart-wrapper"
-        id="chart-wrapper"
-        v-loading="loading"
-        element-loading-spinner="el-icon-loading"
-        element-loading-text="加载中..."
-      >
-        <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
-        <div class="mark"></div>
-      </div>
-    </template>
-    <div class="chart-wrapper notfound" v-else>
-      <i class="el-icon-warning"></i>哎吆,你的图飞了,赶快去找管理员救命吧~
-    </div>
-    <div class="bootom-source">
-      <strong style="flex-shrink: 0;">source:  <em> {{sourceName}}弘则研究</em></strong>
-      <ul class="right-action" @click.stop>
-        <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
-        <li @click="refreshChart"><i class="el-icon-refresh"/>刷新</li>
-      </ul>
-    </div>
-  </div>
-</template>
-
 <style scoped lang="less">
 @import './index.less';
 </style>