Merge branch 'v1.5_chartETA_jw' into v1.5_chartETA

src/views/chartETA/ChartDetail.vue

@@ -5,32 +5,53 @@ import { useRoute } from 'vue-router'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
 import {useChartRender} from '@/hooks/chart/render'
 import moment from 'moment'
+import _ from 'lodash';
+import { useWindowSize } from '@vueuse/core'
 
+const { width, height } = useWindowSize()
 const {options,axisLimitState,chartRender}=useChartRender()
 
 const route=useRoute()
 
 //获取图详情
+let chartInfoData=null
 let chartInfo=ref(null)
-async function getChartDetail(){
+let edbList=ref([])//指标数据
+async function getChartDetail(e){
     const params=sameOptionType.includes(Number(route.query.chartType))?{
         ChartInfoId:Number(route.query.id),
-        DateType:'',
-        StartDate:'',
-        EndDate:''
+        DateType: chartState.yearVal,
+        StartDate: chartState.startTime,
+        EndDate: chartState.endTime,
     }:{
         ChartInfoId:Number(route.query.id),
-        Calendar:'',
-        SeasonStartDate:'',
-        SeasonEndDate:''
+        Calendar: chartState.calendarType,//this.calendar_type
+        SeasonStartDate: chartState.startTime,
+        SeasonEndDate:chartState.endTime ,
     }
     const res=await apiChart.chartInfoById(params)
     if(res.Ret!==200) return
+    chartInfoData=res.Data
     chartInfo.value=res.Data.ChartInfo
 
+    if(res.Data.ChartInfo.Source===2){
+        edbList.value=[res.Data.EdbInfoList[0]]
+    }else{
+        edbList.value=res.Data.EdbInfoList
+    }
+    if(e==='init'){
+        chartState.yearVal=res.Data.ChartInfo.DateType
+    }
+
     nextTick(()=>{
         chartRender({
-            data:res.Data,
+            data:{
+                ...res.Data,
+                ChartInfo:{
+                    ...res.Data.ChartInfo,
+                    Calendar:chartState.calendarType||'公历'
+                },
+            },
             renderId:'chart-box',
             lang:'zh',
             changeLangIsCheck:false,
@@ -40,7 +61,7 @@ async function getChartDetail(){
     
 }
 onMounted(() => {
-    getChartDetail()
+    getChartDetail('init')
 })
 
 const minDate=new Date(1970, 0, 1)
@@ -56,6 +77,121 @@ let chartState=reactive({
     yearVal:'',
     calendarType:'公历'
 })
+// 切换年份选项
+function handleYearChange(item){
+    chartState.yearVal=item.value
+    chartState.startTime=''
+    chartState.endTime=''
+    getChartDetail()
+}
+// 确定日期筛选
+function handleTimeChange(){
+    chartState.startTime=temStartTime.value.join('-')
+    chartState.endTime=temEndTime.value.join('-')
+    chartState.yearVal=6
+    getChartDetail()
+    chartState.showTimePop=false
+}
+
+// 季节图公历\农历切换
+function handleSeasonTypeChange(type){
+    chartState.calendarType=type
+    getChartDetail()
+}
+
+// 上下限调整
+let showLimitPop=ref(false)
+let axisLimitDataTem=reactive({//左右轴极值
+    min:'-99999999999999999',
+    leftMin:0,
+    leftMax:0,
+    rightMin:0,
+    rightMax:0,
+    rightTwoMin:0,
+    rightTwoMax:0,
+    xMin:0,
+    xMax:0,
+})
+function handleShowAxisLimitOpt(){
+    axisLimitDataTem.leftMin=axisLimitState.leftMin
+    axisLimitDataTem.leftMax=axisLimitState.leftMax
+
+    axisLimitDataTem.rightMin=axisLimitState.rightMin
+    axisLimitDataTem.rightMax=axisLimitState.rightMax
+
+    axisLimitDataTem.rightTwoMin=axisLimitState.rightTwoMin
+    axisLimitDataTem.rightTwoMax=axisLimitState.rightTwoMax
+
+    axisLimitDataTem.xMin=axisLimitState.xMin
+    axisLimitDataTem.xMax=axisLimitState.xMax
+
+    showLimitPop.value=true
+}
+// 极限修改确定
+function handleConfirmLimitChange(){
+    const data=_.cloneDeep(chartInfoData)
+
+    // 修改左轴极限
+    if(axisLimitState.hasLeftAxis){
+        if(axisLimitState.leftIndex!==-1){
+            data.EdbInfoList[axisLimitState.leftIndex].MinData=axisLimitDataTem.leftMin
+            data.EdbInfoList[axisLimitState.leftIndex].MaxData=axisLimitDataTem.leftMax
+        }else{
+            // 柱形图 取的ChartInfo中的极值
+            if(data.ChartInfo.ChartType ===7){
+                data.ChartInfo.LeftMin=axisLimitDataTem.leftMin
+                data.ChartInfo.LeftMax=axisLimitDataTem.leftMax
+            }
+            // 商品价格曲线
+            if(data.ChartInfo.ChartType ===8){
+                data.ChartInfo.LeftMin=axisLimitDataTem.leftMin
+                data.ChartInfo.LeftMax=axisLimitDataTem.leftMax
+            }
+
+
+            // 截面散点 取的DataResp
+            if(data.ChartInfo.ChartType ===10){
+                data.DataResp.YMinValue=axisLimitDataTem.leftMin
+                data.DataResp.YMaxValue=axisLimitDataTem.leftMax
+            }
+        }
+    }
+
+    // 修改右轴极限
+    if(axisLimitState.hasRightAxis){
+        if(axisLimitState.rightIndex!==-1){
+            data.EdbInfoList[axisLimitState.rightIndex].MinData=axisLimitDataTem.rightMin
+            data.EdbInfoList[axisLimitState.rightIndex].MaxData=axisLimitDataTem.rightMax
+        }
+    }
+
+    //修改右2轴极限
+    if(axisLimitState.hasRightTwoAxis){
+        if(axisLimitState.rightTwoIndex!==-1){
+            data.EdbInfoList[axisLimitState.rightTwoIndex].MinData=axisLimitDataTem.rightTwoMin
+            data.EdbInfoList[axisLimitState.rightTwoIndex].MaxData=axisLimitDataTem.rightTwoMax
+        }
+    }
+
+    // 修改X轴极限
+    if(axisLimitState.hasXAxis){
+        // 截面散点 取的DataResp
+        if(data.ChartInfo.ChartType ===10){
+            data.DataResp.XMinValue=axisLimitDataTem.xMin
+            data.DataResp.XMaxValue=axisLimitDataTem.xMax
+        }
+    }
+
+    chartRender({
+        data:data,
+        renderId:'chart-box',
+        lang:'zh',
+        changeLangIsCheck:false,
+        showChartTitle:false
+    })
+
+    showLimitPop.value=false
+}
 
 </script>
 
@@ -103,7 +239,158 @@ let chartState=reactive({
             >农历</span>
         </div>
 
+        <!-- 指标数据模块 -->
+        <ul class="edb-list-box">
+            <li 
+                class="item" 
+                v-for="item in edbList"
+                :key="item.EdbInfoId"
+            >
+                <span class="time">{{moment(item.LatestDate).format('YYYY-MM-DD')}}</span>
+                <span class="name" :style="{color:item.ChartColor}">{{item.EdbName}}</span>
+                <span class="laste-val">{{item.LatestValue}}</span>
+            </li>
+        </ul>
+
+        <!-- 底部悬浮操作模块 -->
+        <div class="fix-bot-action-box">
+            <div class="item" @click="handleSwitchChart('prev')">
+                <img class="icon" src="@/assets/imgs/icon_arrow.png" alt="">
+                <div>上一张</div>
+            </div>
+            <div class="item" @click="handleSwitchChart('next')">
+                <img class="icon" style="transform: rotate(180deg);" src="@/assets/imgs/icon_arrow.png" alt="">
+                <div>下一张</div>
+            </div>
+            <div class="item" @click="handleShowAxisLimitOpt" v-if="chartInfo.Source!=3&&chartInfo.ChartType!=8">
+                <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
+                <div>上下限</div>
+            </div>
+            <div class="item" @click="showMoreAction=true">
+                <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
+                <div>更多</div>
+            </div>
+        </div>
     </div>
+
+    <!-- 选择日期弹窗 -->
+    <van-popup 
+        v-model:show="chartState.showTimePop"
+        :position="width>650?'center':'bottom'"
+        :style="width>650?{ width: '400px'}:''"
+    >
+        <div class="time-picker-wrap">
+            <van-picker-group
+                title="选择起始时间"
+                :tabs="['开始时间', '结束时间']"
+                @cancel="chartState.showTimePop=false"
+                @confirm="handleTimeChange"
+            >
+                <van-date-picker
+                    v-model="temStartTime"
+                    :min-date="minDate"
+                    :max-date="maxDate"
+                    :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
+                />
+                <van-date-picker 
+                    v-model="temEndTime" 
+                    :min-date="minDate" 
+                    :max-date="maxDate"
+                    :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
+                />
+            </van-picker-group>
+        </div>
+    </van-popup>
+
+    <!-- 上下限调整弹窗 -->
+    <van-popup 
+        v-model:show="showLimitPop"
+        :position="width>650?'center':'bottom'"
+        round
+        closeable
+        :style="width>650?{ width: '400px'}:''"
+    >
+        <div class="global-pop-wrap_mobile chart-set-limit-wrap">
+            <div class="head-box">
+                <div class="title">上下限设置</div>
+            </div>
+            <div class="content">
+                <!-- 左轴 -->
+                <div class="item-box" v-if="axisLimitState.hasLeftAxis">
+                    <span class="lable-text">左轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.leftMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.leftMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右轴 -->
+                <div class="item-box" v-if="axisLimitState.hasRightAxis">
+                    <span class="lable-text">右轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右二轴 -->
+                <div class="item-box" v-if="axisLimitState.hasRightTwoAxis">
+                    <span class="lable-text">右2轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightTwoMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightTwoMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- x轴 -->
+                <div class="item-box" v-if="axisLimitState.hasXAxis">
+                    <span class="lable-text">X轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.xMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.xMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bot-btn-box" @click="handleConfirmLimitChange">确定</div>
+        </div>
+    </van-popup>
 </template>
 
 <style scoped lang="scss">
@@ -201,5 +488,97 @@ let chartState=reactive({
             }
         }
     }
+    .edb-list-box{
+        padding-top: 20px;
+        .item{
+            display: flex;
+            padding: 19px 0;
+            border-bottom: 1px solid $border-color;
+            font-size: 32px;
+            .time,.laste-val{
+                flex-shrink: 0;
+            }
+            .laste-val{
+                font-weight: 600;
+            }
+            .name{
+                margin: 0 20px;
+                flex: 1;
+            }
+        }
+    }
+    .fix-bot-action-box{
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 99;
+        background-color: #fff;
+        border-top: 1px solid $border-color;
+        height: 112px;
+        display: flex;
+        align-items: center;
+        .item{
+            height: 100%;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+            .icon{
+                width: 40px;
+                height: 40px;
+                margin-bottom: 5px;
+            }
+        }
+    }
+}
+
+.chart-set-limit-wrap{
+    .head-box{
+        .title{
+            padding: 0 $page-padding;
+            font-size: 36px;
+            font-weight: 600;
+            line-height: 120px;
+        }
+    }
+    .bot-btn-box{
+        line-height: 112px;
+        text-align: center;
+        color: $theme-color;
+        font-size: 32px;
+    }
+    .content{
+        padding: $page-padding;
+        .item-box{
+            display: flex;
+            align-items: flex-end;
+            margin-bottom: 30px;
+            .lable-text{
+                width: 100px;
+            }
+            .input-box{
+                flex: 1;
+                display: flex;
+                .item{
+                    flex: 1;
+                    text-align: center;
+                    .type-text{
+                        margin-bottom: 40px;
+                    }
+                    .step-box{
+                        display: inline-block;
+                        :deep(.van-stepper){
+                            display: flex;
+                            justify-content: center;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
 }
 </style>