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

src/hooks/chart/render.js

@@ -338,7 +338,7 @@ function setChartTitle(showChartTitle){
 
 //曲线图
 function setSplineOpt(e){
-    const data=e.EdbInfoList
+    const data=e.ChartInfo.Source===6?[e.DataResp]:e.EdbInfoList
     let series=[]
     let yAxis=[]
     let xAxis = {}

src/router/chartETA.js

@@ -19,5 +19,14 @@ export const chartETARoutes=[
             keepAlive:true,
             hasBackTop:true,
         },
-    }
+    },
+    {
+        path:"/chartETA/chartdetail",
+        name:"ChartETAChartDetail",
+        component: () => import("@/views/chartETA/ChartDetail.vue"),
+        meta: { 
+            title: "ETA图库",
+            keepAlive:false,
+        },
+    },
 ]

src/views/chartETA/ChartDetail.vue

@@ -1,12 +1,118 @@
-<script setup>
+<script setup name="ChartETAChartDetail">
+import {nextTick, onMounted,ref,reactive} from 'vue'
+import apiChart from '@/api/chart'
+import { useRoute } from 'vue-router'
+import {sameOptionType} from '@/hooks/chart/config'
+import {useChartRender} from '@/hooks/chart/render'
+import moment from 'moment'
+
+const {options,axisLimitState,chartRender}=useChartRender()
+
+const route=useRoute()
+
+//获取图详情
+let chartInfo=ref(null)
+async function getChartDetail(){
+    const params=sameOptionType.includes(Number(route.query.chartType))?{
+        ChartInfoId:Number(route.query.id),
+        DateType:'',
+        StartDate:'',
+        EndDate:''
+    }:{
+        ChartInfoId:Number(route.query.id),
+        Calendar:'',
+        SeasonStartDate:'',
+        SeasonEndDate:''
+    }
+    const res=await apiChart.chartInfoById(params)
+    if(res.Ret!==200) return
+    chartInfo.value=res.Data.ChartInfo
+
+    nextTick(()=>{
+        chartRender({
+            data:res.Data,
+            renderId:'chart-box',
+            lang:'zh',
+            changeLangIsCheck:false,
+            showChartTitle:false
+        })
+    })
+    
+}
+onMounted(() => {
+    getChartDetail()
+})
+
+const minDate=new Date(1970, 0, 1)
+const maxDate=new Date(2050, 11, 31)
+const cYear=moment().format('YYYY')
+const cMonth=moment().format('MM')
+let temStartTime=ref([cYear,cMonth])
+let temEndTime=ref([cYear,cMonth])
+let chartState=reactive({
+    showTimePop:false,
+    startTime:'',
+    endTime:'',
+    yearVal:'',
+    calendarType:'公历'
+})
+
 </script>
 
 <template>
-    <div>
+    <div class="chart-detail-page" v-if="chartInfo">
+        <div class="chart-title">{{chartInfo.ChartName}}</div>
+
+        <!-- 一般曲线图选择时间区间或者季节图选择日期 -->
+        <div 
+            class="select-time-box" 
+            v-if="sameOptionType.includes(chartInfo.ChartType)||chartInfo.ChartType===2" 
+            @click="chartState.showTimePop=true"
+        >
+            <img class="left-icon" src="@/assets/imgs/icon_calendar.png" alt="">
+            <span :class="['val-box',!chartState.startTime?'val-box_grey':'']">{{chartState.startTime||'开始日期'}} ~ {{chartState.endTime||'结束日期'}}</span>
+            <van-icon class="right-icon" name="arrow" />
+        </div>
+
+        <!-- 图渲染区域 -->
+        <div class="chart-render-wrap">
+            <div class="chart-box" id="chart-box"></div>
+        </div>
 
     </div>
 </template>
 
 <style scoped lang="scss">
+.chart-detail-page{
+    padding: $page-padding;
+    padding-bottom: 120px;
+    .chart-title{
+        font-size: 36px;
+        margin-bottom: 56px;
+    }
+
+    .chart-box{
+        width: 100%;
+        height: 700px;
+    }
 
+    .select-time-box{
+        display: flex;
+        align-items: center;
+        .left-icon{
+            width: 48px;
+            height: 48px;
+        }
+        .right-icon{
+            margin-left: auto;
+        }
+        .val-box{
+            margin-left: 32px;
+            font-size: 32px;
+            &.val-box_grey{
+                color: $font-grey_999;
+            }
+        }
+    }
+}
 </style>

src/views/myETA/components/EDBInfo.vue

@@ -137,7 +137,7 @@ function handleLeadUnitChange(e){
                     <span class="text">{{data[item.key]}}</span>
                 </li>
             </ul>
-            <div class="opt-box" v-if="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5">
+            <div class="opt-box" v-if="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5 && chartInfo.Source===1">
                 <div class="lable">指标操作</div>
                 <div class="con">
                     <div class="item-box" v-if="showYOptionsHandle">