同步主题样式

src/assets/styles/common.scss

@@ -184,4 +184,19 @@ a[href="https://froala.com/wysiwyg-editor"], a[href="https://www.froala.com/wysi
     .edb-formula-tips-html-box{
         padding: 18px;
     }
+}
+
+//图表底部来源和图表说明
+.chart-bottom-insruction-info {
+    display: flex;
+    gap: 0 20px;
+    .chart-source {
+        width: 30%;
+        min-width: 150px;
+    }
+
+    .chart-instruction {
+        flex: 1;
+        text-align: right;
+    }
 }

src/views/chartETA/ChartDetail.vue

@@ -676,7 +676,14 @@ function openDateSelect(){
 
 <template>
     <div class="chart-detail-page" v-if="chartInfo">
-        <div class="chart-title">{{currentLang==='en'?(chartInfo.ChartNameEn||chartInfo.ChartName):chartInfo.ChartName}}</div>
+        <div 
+            class="chart-title"
+            :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}
+            `:''"
+        >{{currentLang==='en'?(chartInfo.ChartNameEn||chartInfo.ChartName):chartInfo.ChartName}}</div>
 
         <!-- 一般曲线图选择时间区间或者季节图选择日期 -->
         <div 
@@ -722,8 +729,35 @@ function openDateSelect(){
             <img class="pad-change-chart-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('prev')" v-if="chartSortListData.length>0">
             <img class="pad-change-chart-btn pad-change-chart-next-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('next')" v-if="chartSortListData.length>0">
             <div class="chart-box" id="chart-box"></div>
+
+             <!-- 底部来源，图表说明 -->
+            <div class="chart-bottom-insruction-info" 
+            v-if="(chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).isShow) || (chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow)">
+
+                <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;
+                    `"
+                >
+                    数据来源:{{JSON.parse(chartInfo.SourcesFrom).text}}
+                </div>
+                <!-- 图表说明 -->
+                <div 
+                class="chart-instruction text_oneLine"
+                v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
+                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="author-box" style="text-align:right">作者:{{chartInfo.SysUserRealName}}</div>
+            
         </div>
         <!-- 手机端选择时间区间模块 -->
         <div class="select-year-box" v-if="sameOptionType.includes(chartInfo.ChartType)">
@@ -1043,6 +1077,11 @@ function openDateSelect(){
         height: 700px;
     }
 
+    .chart-bottom-insruction-info {
+        width: 100%;
+        margin: 0 auto;
+    }
+
     .select-time-box{
         display: flex;
         align-items: center;
@@ -1274,6 +1313,10 @@ function openDateSelect(){
             height: 370px;
             margin: 0 auto;
         }
+        .chart-bottom-insruction-info {
+            width: 85%;
+            margin: 0 auto;
+        }
         .select-time-box,.select-year-box,.fix-bot-action-box{
             display: none;
         }

src/views/myETA/ChartDetail.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {ref,nextTick, reactive,computed} from 'vue'
+import apiChart from '@/api/chart'
 import apiETAChart from '@/api/chart'
 import apiFutureChart from '@/api/futureChart'
 import apiCorrelationChart from '@/api/correlationChart'
@@ -699,7 +700,16 @@ const isShowAddToMyETADialog=ref(false)
 
 <template>
     <div class="chart-detail-page" v-if="chartInfo">
-        <div class="chart-title">{{chartInfo.ChartName}}</div>
+        <div 
+            class="chart-title"
+            :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}
+            `:''"
+        >
+            {{chartInfo.ChartName}}
+        </div>
         <!-- 一般曲线图选择时间区间或者季节图选择日期 -->
         <div 
             class="select-time-box" 
@@ -747,6 +757,32 @@ const isShowAddToMyETADialog=ref(false)
             <img class="pad-change-chart-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('prev')" v-if="allChartList.length>0">
             <img class="pad-change-chart-btn pad-change-chart-next-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('next')" v-if="allChartList.length>0">
             <div class="chart-box" id="chart-box"></div>
+
+            <!-- 底部来源，图表说明 -->
+            <div class="chart-bottom-insruction-info" 
+            v-if="(chartInfo.SourcesFrom&&JSON.parse(chartInfo.SourcesFrom).isShow) || (chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow)">
+
+                <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;
+                    `"
+                >
+                    数据来源:{{JSON.parse(chartInfo.SourcesFrom).text}}
+                </div>
+                <!-- 图表说明 -->
+                <div 
+                class="chart-instruction text_oneLine"
+                v-if="chartInfo.Instructions&&JSON.parse(chartInfo.Instructions).isShow"
+                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>
 
         <!-- 一般曲线图选择时间区间 -->