comit

src/views/chartETA/ChartDetail.vue

@@ -2,7 +2,7 @@
 import {nextTick, onMounted,ref,reactive} from 'vue'
 import apiChart from '@/api/chart'
 import { useRoute } from 'vue-router'
-import {sameOptionType} from '@/hooks/chart/config'
+import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
 import {useChartRender} from '@/hooks/chart/render'
 import moment from 'moment'
 
@@ -77,6 +77,30 @@ let chartState=reactive({
         <!-- 图渲染区域 -->
         <div class="chart-render-wrap">
             <div class="chart-box" id="chart-box"></div>
+            <!-- 作者 -->
+            <div class="author-box" style="text-align:right">作者:{{chartInfo.SysUserRealName}}</div>
+        </div>
+
+        <!-- 一般曲线图选择时间区间 -->
+        <div class="select-year-box" v-if="sameOptionType.includes(chartInfo.ChartType)">
+            <span :class="['item',chartState.yearVal==''?'active':'']" @click="handleYearChange({value:''})">全部</span>
+            <span 
+                :class="['item',chartState.yearVal==item.value?'active':'']"
+                v-for="item in yearSelectOpt" 
+                :key="item.value"
+                @click="handleYearChange(item)"
+            >{{item.name}}</span>
+        </div>
+        <!-- 季节图切换公/农历 -->
+        <div class="calendar-type-box" v-if="chartInfo.ChartType === 2">
+            <span 
+                :class="chartState.calendarType=='公历'?'active':''"
+                @click="handleSeasonTypeChange('公历')"
+            >公历</span>
+            <span 
+                :class="chartState.calendarType=='农历'?'active':''"
+                @click="handleSeasonTypeChange('农历')"
+            >农历</span>
         </div>
 
     </div>
@@ -99,6 +123,8 @@ let chartState=reactive({
     .select-time-box{
         display: flex;
         align-items: center;
+        padding-bottom: 32px;
+        border-bottom: 1px solid $border-color;
         .left-icon{
             width: 48px;
             height: 48px;
@@ -114,5 +140,66 @@ let chartState=reactive({
             }
         }
     }
+
+    .select-year-box{
+        width: 100vw;
+        position: relative;
+        left: -$page-padding;
+        margin-top: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
+        height: 88px;
+        display: flex;
+        align-items: center;
+        overflow-y: auto;
+        padding: 0 $page-padding;
+        &::-webkit-scrollbar{
+            height: 0;
+        }
+        .item{
+            line-height: 88px;
+            position: relative;
+            height: 100%;
+            flex-shrink: 0;
+            display: inline-block;
+            margin-right: 40px;
+            font-size: 32px;
+            color: $font-grey_999;
+            &.active{
+                color: #333;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 50px;
+                    height: 6px;
+                    border-radius: 3px;
+                    background-color: $theme-color;
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+    }
+    .calendar-type-box{
+        width: 404px;
+        margin: 30px auto;
+        text-align: center;
+        border: 1px solid $theme-color;
+        border-radius: 12px;
+        overflow: hidden;
+        span{
+            display: inline-block;
+            width: 200px;
+            height: 80px;
+            line-height: 80px;
+            color: $theme-color;
+            font-weight: bold;
+            &.active{
+                background-color: $theme-color;
+                color: #fff;
+            }
+        }
+    }
 }
 </style>