Merge branch 'master' of http://8.136.199.33:3000/eta_front/eta_chart_front

src/hooks/chart/useChartRender.ts

@@ -235,12 +235,18 @@ const setDefaultLineOptions = () => {
 
     let obj = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: sameSideIndex,
       name,
       color: item.ChartColor,
-      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptions.lineWidth)||1,
+      lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth)||1,
+      marker:chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+        enabled:true,
+        symbol: chartTheme.lineOptionList[index].markType || 'circle',
+        fillColor:chartTheme.lineOptionList[index].markColor,
+        radius: chartTheme.lineOptionList[index].markSize
+      }:{},
       ...predict_params
     };
     item.DataList = item.DataList || []
@@ -343,17 +349,24 @@ const setSeasonOptions = () => {
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
 
   /*处理数据列*/
-  for (let j of chartDataHandle) {
+  for (let index in chartDataHandle) {
+    let j = chartDataHandle[index]
     //预测指标配置
     let predict_params =  chartData.EdbInfoCategoryType === 1 ? getSeasonPredictParams(j.CuttingDataTimestamp) : {};
 
     let serie_item = {
       data: [] as any[],
-      type: (chartTheme&&chartTheme.lineOptions.lineType) || chartData.ChartStyle,
-      dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || chartData.ChartStyle,
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: 0,
       name: j.ChartLegend,
-      lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
+      marker:chartTheme && chartTheme.lineOptionList[index].dataMark && chartTheme.lineOptionList[index].dataMark!='none'?{
+        enabled:true,
+        symbol: chartTheme.lineOptionList[index].markType || 'circle',
+        fillColor:chartTheme.lineOptionList[index].markColor,
+        radius: chartTheme.lineOptionList[index].markSize
+      }:{},
       ...predict_params
     };
     const data_array = _.cloneDeep(j.DataList);
@@ -727,7 +740,7 @@ const setScatterChartOptions = () => {
     color: ChartColor,
     chartType: 'linear',
     marker: {
-      radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+      radius: (chartTheme&&chartTheme.lineOptionList[0].radius)||5,
     },
   }
   real_data.forEach(_ => {
@@ -957,7 +970,7 @@ const setSectionScatterChart = () => {
 
     //数据列
     let series: any[] = [];
-    DataList.forEach(item => {
+    DataList.forEach((item:any,index:number) => {
         //数据列
         let series_item = {
             data: [] as any[],
@@ -968,7 +981,7 @@ const setSectionScatterChart = () => {
             chartType: 'linear',
             zIndex:1,
             marker: {
-              radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
+              radius: (chartTheme&&chartTheme.lineOptionList[index].radius)||5,
             },
             visible: true
         }
@@ -1155,19 +1168,19 @@ const setCommodityChart = () => {
   }
 
   //数据列
-  data.forEach((item: { Value: number[]; Name: string; Date: string; Color: string;NameEn: string,XEdbInfoIdList: number[],NoDataEdbList: number[] }) => {
+  data.forEach((item: { Value: number[]; Name: string; Date: string; Color: string;NameEn: string,XEdbInfoIdList: number[],NoDataEdbList: number[] },index:number) => {
     //处理首或/尾全是无效数据的以null填充
     let filterData = filterInvalidData(item)
 
     let serie_item = {
       data: filterData,
-      type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: 0,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1328,16 +1341,16 @@ const initRelevanceChartData=(data)=>{
 
   //处理series
   let seriesData:any[]=[]
-  data.YDataList.forEach(item=>{
+  data.YDataList.forEach((item:any,index:number)=>{
     let serie_item = {
       data: item.Value,
-      type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
-      dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
       yAxis: 0,
       name: language.value=='zh'?item.Name:item.NameEn||item.Name,
       color: item.Color,
       chartType: 'linear',
-      lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 3,
       marker: {
         enabled: false
       }
@@ -1439,12 +1452,12 @@ const setStatisticFrequency = () => {
 
     let series_item = {
       data: item.Value.map(_ =>[_.X,_.Y]),
-      dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
-      type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
+      dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
+      type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'spline',
       yAxis: index,
       name: language.value === 'zh' ? item.Name : item.NameEn,
       color: item.Color,
-      lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth)||3,
+      lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth)||3,
       chartType: 'linear',
       zIndex:1
     }
@@ -1715,16 +1728,16 @@ const setRadarChart = () => {
 
     //系列
     let series:any[] = [];
-    YDataList.forEach(item => {
+    YDataList.forEach((item,index) => {
       let serie_item = {
         data: item.Value,
         pointPlacement: 'on',
-        type: (chartTheme&&chartTheme.lineOptions.lineType) || 'line',
-        dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
+        type: (chartTheme&&chartTheme.lineOptionList[index].lineType) || 'line',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[index].dashStyle)||'Solid',
         yAxis: 0,
         name: language.value==='zh' ? (item.Name || item.Date) : item.Date,
         color: item.Color,
-        lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
+        lineWidth: (chartTheme&&chartTheme.lineOptionList[index].lineWidth) || 1,
         chartType: 'linear'
       };
       series.push(serie_item)

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

@@ -20,6 +20,17 @@ interface InfoType extends IUnknowObject {
 const showData = ref(false);
 const info = ref<InfoType|any>({});
 const loading = ref(false);
+
+
+const setDefaultSource=(sourceText:string)=>{
+  return JSON.stringify({
+    isShow: true,
+    text: sourceText,
+    color: "#606266",
+    fontSize: 9
+  })
+}
+
 const getInfo = async(type='') => {
   loading.value = true;
   const { Data,Ret } = await SheetApi.getInfo({  UniqueCode: code.value, FromScene: Number(route.query.fromScene||'') });
@@ -28,6 +39,9 @@ const getInfo = async(type='') => {
   if(Ret !== 200) return
 
   info.value = Data;
+  if(!info.value.SourcesFrom){
+    info.value.SourcesFrom = Data.ExcelSource?setDefaultSource(Data.ExcelSource):''
+  }
   showData.value = true; 
   type==='refresh'&&ElMessage.success('刷新成功')
   nextTick(() => {
@@ -67,8 +81,19 @@ const refreshSheet = async()=>{
     <h3 class="title">{{info.ExcelName}}</h3>
     
     <sheet :data="info.TableInfo.TableDataList" :config="info.Config"/>
-    <div class="tool">
-        <span @click="refreshSheet">刷新</span>
+    <div class="tool sheet-bottom">
+      <div class="sheet-source" 
+        v-if="info.SourcesFrom&&JSON.parse(info.SourcesFrom).isShow"
+        :style="`
+            color: ${ JSON.parse(info.SourcesFrom).color };
+            font-size: ${ JSON.parse(info.SourcesFrom).fontSize }px;
+        `"
+      >
+          source：<em>{{ JSON.parse(info.SourcesFrom).text}}</em>
+      </div>
+      <!-- 占位 -->
+      <div v-else></div>
+      <span @click="refreshSheet" style="color: #666;">刷新</span>
     </div>
   </div>
 </template>
@@ -88,11 +113,24 @@ const refreshSheet = async()=>{
     margin-bottom: 8px;
   }
   .tool{
-    text-align: right;
+    // text-align: right;
     margin-top: 5px;
     span{
         cursor: pointer;
     }
   }
+  .sheet-bottom{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    white-space: nowrap;
+    padding: 0 10px;
+    .sheet-source{
+      width: 30%;
+      min-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 }
 </style>