Merge branch 'master' into ETA1.9.5

src/hooks/chart/useChartRender.ts

@@ -11,6 +11,11 @@ import { defaultOpts, seasonOptions } from "@/utils/chartOptions";
 import moment from "moment";
 import router from '@/router'
 
+//获取RGBA的透明度
+const parseRgbaColor = (color='rgba(51, 51, 51, 1)') => {
+    const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
+    return parseFloat((arr[3]||1)+'')
+}
 // 散点x
 const scatterXAxis = {
   tickPosition: "inside",
@@ -97,7 +102,7 @@ export const useChartRender = (Data,lang='zh',) => {
 
   //eta图
   if ([1,11].includes(Data.ChartInfo.Source)) {
-    setLimitData(state.dataList)
+    setLimitData(state.dataList,Data)
     const typeMap = {
       1: setDefaultLineOptions,
       2: setSeasonOptions,
@@ -232,20 +237,21 @@ const setDefaultLineOptions = () => {
 
     //预测指标配置
     let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
-
+    //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let obj = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
       yAxis: sameSideIndex,
       name,
       color: item.ChartColor,
-      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth)||1,
-      marker:chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth)||1,
+      marker:chartTheme && chartTheme.lineOptionList[lineIndex].dataMark && chartTheme.lineOptionList[lineIndex].dataMark!='none'?{
         enabled:true,
-        symbol: chartTheme.lineOptionList[index].markType || 'circle',
-        fillColor:chartTheme.lineOptionList[index].markColor,
-        radius: chartTheme.lineOptionList[index].markSize
+        symbol: chartTheme.lineOptionList[lineIndex].markType || 'circle',
+        fillColor:chartTheme.lineOptionList[lineIndex].markColor,
+        radius: chartTheme.lineOptionList[lineIndex].markSize
       }:{},
       ...predict_params
     };
@@ -326,8 +332,8 @@ const setDefaultLineOptions = () => {
 
 /* 季节图 */
 const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
-const setSeasonOptions = () => {
-  
+const setSeasonOptions = (data:any) => {
+  const {RightAxis:SeasonRightConfig={}} = data.DataResp||{}
   const chartData = state.dataList[0];
   // 农历数据需要去除第一项 在ETA1.0.5之后，除了这里 农历和公历处理逻辑一样
   if(!chartData.DataList){
@@ -341,31 +347,40 @@ const setSeasonOptions = () => {
     seasonData:any[] = [];
 
     //获取对应轴的上下限
-    let minLimit = 0,maxLimit = 0
+    let minLimit = 0,maxLimit = 0,rightMin = 0,rightMax = 0
     minLimit = state.chartLimit.min||0
     maxLimit = state.chartLimit.max||0
+    if(SeasonRightConfig.IsShow){
+        rightMin = state.chartLimit.rightMin||0
+        rightMax = state.chartLimit.rightMax||0
+    }
 
     /* 主题样式*/
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
+  // 跟颜色对应
+  chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
 
-  /*处理数据列*/
+  /*处理数据列 常规左轴*/
   for (let index in chartDataHandle) {
+    console.log(index,'index');
+    
     let j = chartDataHandle[index]
     //预测指标配置
     let predict_params =  chartData.EdbInfoCategoryType === 1 ? getSeasonPredictParams(j.CuttingDataTimestamp) : {};
-
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? Number(index)%chartTheme.lineOptionList.length : index
     let serie_item = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || chartData.ChartStyle,
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || chartData.ChartStyle,
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
       yAxis: 0,
       name: j.ChartLegend,
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
-      marker:chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
+      marker:chartTheme && chartTheme.lineOptionList[lineIndex].dataMark && chartTheme.lineOptionList[lineIndex].dataMark!='none'?{
         enabled:true,
-        symbol: chartTheme.lineOptionList[index].markType || 'circle',
-        fillColor:chartTheme.lineOptionList[index].markColor,
-        radius: chartTheme.lineOptionList[index].markSize
+        symbol: chartTheme.lineOptionList[lineIndex].markType || 'circle',
+        fillColor:chartTheme.lineOptionList[lineIndex].markColor,
+        radius: chartTheme.lineOptionList[lineIndex].markSize
       }:{},
       ...predict_params
     };
@@ -376,7 +391,81 @@ const setSeasonOptions = () => {
       });
     seasonData.push(serie_item);
   }
-
+  //同期上下限/均线/标准差
+  const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = data.DataResp||{}
+  if(MaxMinLimits.IsShow&&MaxMinLimits.List&&MaxMinLimits.List.length){
+    let serieItem = {
+        type:'arearange',//上下限是一个范围
+        data:[] as any[],
+        name:MaxMinLimits.Legend||'同期上下限',
+        color:MaxMinLimits.Color||'#075EEE',
+        fillOpacity:parseRgbaColor(MaxMinLimits.Color||'')>0.75?0.75:parseRgbaColor(MaxMinLimits.Color||'') //透明度最高0.75 
+    }
+    console.log('serieItem?',serieItem.fillOpacity)
+    MaxMinLimits.List.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+    })
+    seasonData.push(serieItem)
+  }
+  if(SamePeriodAverage.IsShow&&SamePeriodAverage.List){
+    let serieItem = {
+        type:'line',
+        data:[] as any [],
+        lineWidth:SamePeriodAverage.LineWidth,
+        dashStyle:SamePeriodAverage.LineType,
+        name:SamePeriodAverage.Legend||'同期均值',
+        color:SamePeriodAverage.Color||'#075EEE'
+    }
+    SamePeriodAverage.List.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.Value])
+    })
+    seasonData.push(serieItem)
+  }
+  if(SamePeriodStandardDeviation.IsShow&&SamePeriodStandardDeviation.List){
+    let serieItem = {
+        type:'arearange',//标准差也是一个范围
+        data:[] as any [],
+        name:SamePeriodStandardDeviation.Legend||'同期标准差',
+        color:SamePeriodStandardDeviation.Color||'#075EEE',
+        fillOpacity:parseRgbaColor(SamePeriodStandardDeviation.Color||'')>0.75?0.75:parseRgbaColor(SamePeriodStandardDeviation.Color||'')
+    }
+    SamePeriodStandardDeviation.List.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+    })
+    seasonData.push(serieItem)
+  }
+  //右轴
+  if(SeasonRightConfig.IsShow){
+    //右轴的设置
+    let serieConfig = SeasonRightConfig.Style==='column'?{
+        //柱形
+        type:'column',
+        color:SeasonRightConfig.ChartColor
+    }:{
+        //标记点
+        type:'spline',
+        lineWidth:SeasonRightConfig.LineWidth,
+        dashStyle:SeasonRightConfig.LineStyle,
+        color:SeasonRightConfig.IsConnected?SeasonRightConfig.LineColor:'rgba(255, 255, 255, 0)',//没有连线颜色设置为透明
+        marker:{
+            enabled:true,
+            symbol:SeasonRightConfig.Shape,
+            fillColor:SeasonRightConfig.ChartColor,
+            radius:SeasonRightConfig.Size
+        },
+    }
+    let serieItem = {
+        ...serieConfig,
+        name:SeasonRightConfig.Legend||'右轴',
+        data:[] as any[],
+        yAxis:1,
+    }
+    const DataList = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0].DataList:state.dataList[1].DataList)||[]
+    DataList.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.Value])
+    })
+    seasonData.push(serieItem)
+  }
   //y轴
   const textZh = chartData.ConvertUnit||chartData.Unit
   const textEn = textZh?chartData.ConvertEnUnit||chartData.UnitEn||chartData.ConvertUnit||chartData.Unit:''
@@ -409,6 +498,44 @@ const setSeasonOptions = () => {
     plotBands: setAxisPlotAreas(1),
     plotLines: setAxisPlotLines(1)
   }];
+  //如果有右轴,seasonYdata加上右轴
+  if(SeasonRightConfig.IsShow){
+    const rightEdb = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0]:state.dataList[1])||{unit:''}
+    //左轴同比：text为空或% 右轴指标：取指标单位
+    if(SeasonRightConfig.IndicatorType===1){
+        rightEdb.Unit = SeasonRightConfig.NumFormat===1?'%':''
+    }else{
+        rightEdb.Unit = state.dataList[1]&&(state.dataList[1].ConvertUnit||state.dataList[1].Unit)||''
+    }
+    seasonYdata.push({
+        ...defaultOpts.yAxis,
+        opposite: true,//右轴
+        labels: {
+            formatter: function (ctx: any) {
+                let val = ctx.value;
+                return val;
+            },
+            align: 'center',
+            style: {
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            }
+          },
+          title: {
+            text: rightEdb.Unit||'',
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
+            align: 'high',
+            rotation: 0,
+            y: -12,
+            x: 0 ,
+            textAlign: 'right',
+            reserveSpace: false,
+          },
+          max: Number(rightMax),
+          min: Number(rightMin),
+    })
+  }
 
   // 季节图x轴显示月/日
   const xAxis = {
@@ -566,14 +693,15 @@ const setStackOrCombinChart = () => {
 
     //预测指标配置
     let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item,chartStyle) : {};
-
+    //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let obj = {
       data: [] as any[],
       type: chartStyle || item.ChartStyle,
       yAxis: serie_yIndex,
       name,
       color: item.ChartColor,
-      lineWidth:  Number(item.ChartWidth),
+      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
       fillColor: (chartInfo.ChartType === 3 || (chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
       zIndex: (chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
       borderWidth: 1,
@@ -971,6 +1099,8 @@ const setSectionScatterChart = () => {
     //数据列
     let series: any[] = [];
     DataList.forEach((item:any,index:number) => {
+        // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+        const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
         //数据列
         let series_item = {
             data: [] as any[],
@@ -981,7 +1111,7 @@ const setSectionScatterChart = () => {
             chartType: 'linear',
             zIndex:1,
             marker: {
-              radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
+              radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
             },
             visible: true
         }
@@ -1171,16 +1301,17 @@ const setCommodityChart = () => {
   data.forEach((item: { Value: number[]; Name: string; Date: string; Color: string;NameEn: string,XEdbInfoIdList: number[],NoDataEdbList: number[] },index:number) => {
     //处理首或/尾全是无效数据的以null填充
     let filterData = filterInvalidData(item)
-
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let serie_item = {
       data: filterData,
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
       yAxis: 0,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1351,15 +1482,17 @@ const initRelevanceChartData=(data)=>{
   //处理series
   let seriesData:any[]=[]
   data.YDataList.forEach((item:any,index:number)=>{
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let serie_item = {
       data: item.Value,
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
       yAxis: 0,
-      name: language.value=='zh'?data.ChartInfo.ChartName:data.ChartInfo.ChartNameEn,
+      name: language.value=='zh'?item.Name:item.NameEn||item.Name,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1458,15 +1591,16 @@ const setStatisticFrequency = () => {
       max: index===0? Number(LeftMaxValue):Number(RightMaxValue),
       tickWidth: 1,
     }
-
+    // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+    const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
     let series_item = {
       data: item.Value.map(_ =>[_.X,_.Y]),
-      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
-      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
       yAxis: index,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
-      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth)||3,
       chartType: 'linear',
       zIndex:1
     }
@@ -1738,15 +1872,17 @@ const setRadarChart = () => {
     //系列
     let series:any[] = [];
     YDataList.forEach((item,index) => {
+      // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+      const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
       let serie_item = {
         data: item.Value,
         pointPlacement: 'on',
-        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'line',
-        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+        type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'line',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
         yAxis: 0,
         name: language.value==='zh' ? (item.Name || item.Date) : item.Date,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
+        lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
         chartType: 'linear'
       };
       series.push(serie_item)
@@ -2014,7 +2150,7 @@ const setAxisPlotAreas = (axis: number, axisType: any = null) => {
 };
 
 /* ----自定义上下限相关--- */
-const setLimitData = (tableData:any=[])=>{
+const setLimitData = (tableData:any=[],data:{DataResp:any})=>{
     const {
         //左右轴极值字段 
         LeftMin=0,LeftMax=0,
@@ -2032,7 +2168,7 @@ const setLimitData = (tableData:any=[])=>{
         //若用户修改过，则检测轴的上下限是否为空，若为空，则需要计算对应轴的上下限
         checkLimit(tableData)
     }else{
-        calcYAxislimit(tableData)
+        calcYAxislimit(tableData,data.DataResp?data.DataResp:{})
     }
 }
 const checkLimit = (tableData:any=[])=>{
@@ -2082,7 +2218,7 @@ const checkLimit = (tableData:any=[])=>{
     }
 }
 /* 计算y轴上下限 */
-const calcYAxislimit = (tableData:any=[])=>{
+const calcYAxislimit = (tableData:any=[],DataResp:any={})=>{
     //散点图单独处理
     if(state.chartInfo.ChartType===5){
         if(tableData[1]){
@@ -2129,6 +2265,19 @@ const calcYAxislimit = (tableData:any=[])=>{
         state.chartLimit.rightTwoMin = 0
         state.chartLimit.rightTwoMax = 0
     }
+    //季节性图-右轴单独处理
+    if(state.chartInfo.ChartType===2){
+        if(DataResp.RightAxis&&DataResp.RightAxis.IsAdd&&DataResp.RightAxis.IsShow){
+            if(DataResp.RightAxis.IndicatorType===1){
+                state.chartLimit.rightMin = DataResp.RightAxis.EdbInfoList[0].MinData||0
+                state.chartLimit.rightMax = DataResp.RightAxis.EdbInfoList[0].MaxData||0
+            }else{
+                state.chartLimit.rightMin = tableData[1].MinData||0
+                state.chartLimit.rightMax = tableData[1].MaxData||0
+            }
+            
+        }
+    }
 }
 const calcLimit = (arr:any)=>{
     return {

src/request/api.ts

@@ -53,6 +53,19 @@ export const ChartApi = {
 	refreshCrossVarietyChart: (params:IRefreshParams) => {
 		return get('/cross_variety/chart_info/refresh',params)
 	},
+
+	/**
+	 * 图表取消收藏
+	 */
+	chartCollectCancel:params=>{
+		return post('/chart/dw/collectCancel',params)
+	},
+	/**
+	 * 图表收藏
+	 */
+	chartCollect:params=>{
+		return post('/chart/dw/collect',params)
+	}
 }
 
 /* 表格模块 */

src/router/index.ts

@@ -18,6 +18,11 @@ export const routes: AppRouteRecordRaw[] = [
     component: () => import('@/views/chartShow/index.vue'),
     name: '图表详情',
   },
+  {
+    path: '/chart/preview',
+    component: () => import('@/views/chartShow/preview.vue'),
+    name: '图表预览',
+  },
   {
     path: '/sheetshow',
     component: () => import('@/views/sheetShow/index.vue'),

src/views/chartShow/index.less

@@ -147,8 +147,10 @@
 	}
 	@media (min-width: 980px) {
 		.mark {
-			width: 580px;
-			height: 60px;
+			// width: 580px;
+			// height: 60px;
+			width: 80%;
+			height: 80%;
 		}
 		.chart-show .notfound {
 			font-size: 24px;
@@ -156,8 +158,10 @@
 	}
 	@media (max-width: 979px) {
 		.mark {
-			width: 242px;
-			height: 25px;
+			// width: 242px;
+			// height: 25px;
+			width: 80%;
+			height: 80%;
 		}
 		.chart-show .notfound {
 			font-size: 14px;

src/views/chartShow/index.vue

@@ -70,6 +70,8 @@
 
       <ul class="right-action" @click.stop>
         <li v-if="$route.query.source==='ybxcx'"><collectBtn/></li>
+        <!-- eta小程序报告详情中的有收藏 -->
+        <li v-if="$route.query.source==='etamini'" @click="handleChangeChartCollect">{{IsCollect?'取消收藏':'收藏'}}</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>
@@ -119,6 +121,7 @@ export default defineComponent({
     const isShare = ref(route.query.fromType === 'share');
     // 语言 中英文 ch en  默认中文
     const language = ref(route.query.fromPage || route.query.lang || 'zh');
+    const IsCollect=ref(false)//图表是否收藏
     const getChartInfo = async (type='') => {
 
       if(!code.value) {
@@ -128,11 +131,18 @@ export default defineComponent({
 
       loading.value = true;
       try {
-        const { Data } = await ChartApi.getChart({
+        let params={
           UniqueCode: code.value || '',
-        });
+        }
+        // 如果是来自etamini 也就是eta小程序的报告详情
+        if(route.query.source==='etamini'){
+          params.Source=1
+          params.Token=route.query.token
+        }
+        const { Data } = await ChartApi.getChart(params);
         loading.value = false;
         state.chartInfo = Data.ChartInfo;
+        IsCollect.value=Data.IsCollect
         state.dataList = Data.ChartInfo.Source === 1 ? Data.EdbInfoList : [Data.EdbInfoList[0]];
 
         //处理英文研报英文设置不全就展示中文
@@ -194,6 +204,21 @@ export default defineComponent({
       res.Ret === 200 && getChartInfo('refresh');
     },400)
 
+
+    // 点击收藏\取消收藏
+    const handleChangeChartCollect=async ()=>{
+      const params={
+        UniqueCode:code.value || '',
+        Token:route.query.token,
+      }
+      const res=IsCollect.value?await ChartApi.chartCollectCancel(params):await ChartApi.chartCollect(params)
+      if(res.Ret===200){
+        ElMessage.success(IsCollect.value?'取消收藏成功':'收藏成功')
+        IsCollect.value=!IsCollect.value
+      }
+      
+    }
+
     return {
       ...toRefs(state),
       loading,
@@ -204,7 +229,9 @@ export default defineComponent({
       isShare,
       language,
       refreshChart,
-      copyText
+      copyText,
+      handleChangeChartCollect,
+      IsCollect
     };
   },
 });

src/views/chartShow/preview.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { reactive, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import chart from '@/components/chart.vue';
+import { ChartApi } from '@/request/api';
+import { useChartRender } from '@/hooks/chart/useChartRender';
+
+const route=useRoute()
+
+const state = reactive({
+  options: {},
+  chartInfo: {},
+  dataList: [],
+  sourceName: ''
+});
+
+/* 获取图表数据信息 */
+const loading = ref(false);
+const haveData = ref(false);
+const code = ref(route.query.code);
+
+// 语言 中英文 ch en  默认中文
+const language = ref('zh');
+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]];
+
+    state.options = useChartRender(Data, language.value)
+
+    haveData.value = true;
+
+
+  } catch (e) {
+    loading.value = false;
+    haveData.value = false;
+  }
+
+};
+
+onMounted(() => {
+  getChartInfo();
+});
+</script>
+
+<template>
+  <div class="chart-detail-preivew-page">
+    <chart
+      :options="state.options"
+      :chartId="state.chartInfo.ChartInfoId || 0"
+      :chartInfo="state.chartInfo"
+    />
+  </div>
+</template>

src/views/sheetShow/index.vue

@@ -78,7 +78,7 @@ const refreshSheet = async()=>{
     element-loading-spinner="el-icon-loading"
     element-loading-text="加载中..."
   >
-    <h3 class="title">{{info.ExcelName}}</h3>
+    <!-- <h3 class="title">{{info.ExcelName}}</h3> -->
     
     <sheet :data="info.TableInfo.TableDataList" :config="info.Config"/>
     <div class="tool sheet-bottom">