Merge branch 'v1.5_chartETA' of http://8.136.199.33:3000/jwyu/hongze_ETA_mobile into v1.5_chartETA

src/views/chartETA/ChartDetail.vue

@@ -8,41 +8,50 @@ import {useChartRender} from '@/hooks/chart/render'
 import moment from 'moment'
 import EdbInfo from './components/EdbInfo.vue'
 import SourceDetail from './components/SourceDetail.vue'
-
+import _ from 'lodash';
 const {options,axisLimitState,chartRender}=useChartRender()
 const { width } = useWindowSize()
 
 const route=useRoute()
 
 //获取图详情
+let chartInfoData=null
 let chartInfo=ref(null)
-//指标数据
-let edbList=ref([])
-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
+    }
 
-    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,
@@ -52,7 +61,7 @@ async function getChartDetail(){
     
 }
 onMounted(() => {
-    getChartDetail()
+    getChartDetail('init')
 })
 
 const minDate=new Date(1970, 0, 1)
@@ -68,58 +77,123 @@ let chartState=reactive({
     yearVal:'',
     calendarType:'公历'
 })
-
 // 切换年份选项
 function handleYearChange(item){
     chartState.yearVal=item.value
     chartState.startTime=''
     chartState.endTime=''
-    reloadChartInfo()
+    getChartDetail()
 }
 // 确定日期筛选
 function handleTimeChange(){
     chartState.startTime=temStartTime.value.join('-')
     chartState.endTime=temEndTime.value.join('-')
     chartState.yearVal=6
-    reloadChartInfo()
+    getChartDetail()
     chartState.showTimePop=false
 }
+
 // 季节图公历\农历切换
 function handleSeasonTypeChange(type){
     chartState.calendarType=type
-    reloadChartInfo()
+    getChartDetail()
 }
-// 选择项发生变化时 非配置项 获取新的图表数据
-async function reloadChartInfo(){
-    const params=sameOptionType.includes(chartInfo.value.ChartType)?{
-        ChartInfoId: chartInfo.value.ChartInfoId,
-        DateType: chartState.yearVal,
-        StartDate: chartState.startTime,
-        EndDate: chartState.endTime,
-    }:{
-        ChartInfoId: chartInfo.value.ChartInfoId,
-        Calendar: chartState.calendarType,//this.calendar_type
-        SeasonStartDate: chartState.startTime,
-        SeasonEndDate:chartState.endTime ,
+
+// 上下限调整
+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
+            }
+        }
     }
-    const res=await apiChart.chartInfoById(params)
-    if(res.Ret!==200) return
-    chartInfo.value=res.Data.ChartInfo
+
+    // 修改右轴极限
+    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:{
-            ...res.Data,
-            ChartInfo:{
-                ...res.Data.ChartInfo,
-                Calendar:chartState.calendarType||'公历'
-            },
-        },
+        data:data,
         renderId:'chart-box',
         lang:'zh',
         changeLangIsCheck:false,
         showChartTitle:false
     })
+
+    showLimitPop.value=false
 }
 
+
 // 显示指标详情
 let showEDB=ref(false)
 let showEDBData=ref({})
@@ -178,6 +252,8 @@ function handleShowSourceDetail(){
         <!-- 图渲染区域 -->
         <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)">
@@ -289,6 +365,97 @@ function handleShowSourceDetail(){
             />
         </van-popup>
     </div>
+
+
+    <!-- 上下限调整弹窗 -->
+    <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">
@@ -308,6 +475,8 @@ function handleShowSourceDetail(){
     .select-time-box{
         display: flex;
         align-items: center;
+        padding-bottom: 32px;
+        border-bottom: 1px solid $border-color;
         .left-icon{
             width: 48px;
             height: 48px;