comit

package.json

@@ -22,6 +22,7 @@
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "pptxgenjs": "^3.12.0",
+    "v3-color-picker-teleport": "^1.0.9",
     "vant": "^4.1.2",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"

src/api/chart.js

@@ -18,4 +18,30 @@ export function apiChartInfoByCode(params){
  */
 export function apiPubChartList(params){
     return get('/my_chart/chart/list',params)
+}
+
+/**
+ * 通过id获取图表详情
+ * @param ChartInfoId 
+ * @param Calendar 
+ * @param DateType
+ * @param StartDate
+ * @param EndDate
+ */
+export function apiChartInfoById(params){
+    return get('/datamanage/chart_info/detail',params)
+}
+
+/**
+ * 获取指标详情
+ * @param EdbInfoId 
+ * @param DateType  1:00年至今,2:10年至今,3:15年至今，4：21年至今，5:自定义时间
+ * @param StartDate 
+ * @param EndDate 
+ * @param EdbInfoType 1:标准指标,0:领先指标
+ * @param LeadValue 
+ * @param LeadUnit 
+ */
+export function apiEDBInfo(params){
+    return get('/datamanage/chart_info/edb_info/detail',params)
 }

src/views/myETA/ChartDetail.vue

@@ -1,9 +1,10 @@
 <script setup>
 import {ref,nextTick, reactive} from 'vue'
-import {apiChartInfoByCode} from '@/api/chart'
+import {apiChartInfoByCode,apiChartInfoById,apiEDBInfo} from '@/api/chart'
 import { useRoute } from 'vue-router'
 import {chartRender} from '@/hooks/chart/render'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
+import EDBInfo from './components/EDBInfo.vue'
 
 const route=useRoute()
 const chartCode=route.query.code
@@ -20,6 +21,10 @@ async function getChartInfo(){
     }else{
         edbList.value=res.Data.EdbInfoList
     }
+
+    chartState.yearVal=res.Data.ChartInfo.DateType
+
+
     nextTick(()=>{
         chartRender({
             data:res.Data,
@@ -32,15 +37,48 @@ async function getChartInfo(){
 }
 getChartInfo()
 
+// 选择项发生变化时 非配置项 获取新的图表数据
+async function reloadChartInfo(){
+    const params=sameOptionType.includes(chartInfo.value.ChartType)?{
+        ChartInfoId: chartInfo.value.ChartInfoId,
+        DateType: chartState.yearVal,
+        StartDate:'' ,//[5, 6].includes(this.year_select)?this.select_date[0]: ''
+        EndDate: '',//this.year_select === 5 ? this.select_date[1] : ''
+    }:{
+        ChartInfoId: chartInfo.value.ChartInfoId,
+        Calendar: '',//this.calendar_type
+        SeasonStartDate: '',//this.season_year ? this.season_year[0] : ''
+        SeasonEndDate:'' ,//this.season_year ? this.season_year[1] : ''
+    }
+    const res=await apiChartInfoById(params)
+    if(res.Ret!==200) return
+}
 
-let timeState=reactive({
+const minDate=new Date(1970, 0, 1)
+const maxDate=new Date(2050, 11, 31)
+let chartState=reactive({
     showTimePop:false,
     startTime:['2022', '06', '01'],
     endTime:['2023', '06', '01'],
-    minDate: new Date(1970, 0, 1),
-    maxDate: new Date(2050, 11, 31),
+    yearVal:''
 })
 
+// 切换年份选项
+function handleYearChange(item){
+    chartState.yearVal=item.value
+    reloadChartInfo()
+}
+
+
+// 显示指标详情
+let showEDB=ref(false)
+let showEDBData=ref({})
+
+
+
+function handleUpdateRender(val){
+
+}
 </script>
 
 <template>
@@ -50,7 +88,7 @@ let timeState=reactive({
         <div 
             class="select-time-box" 
             v-if="sameOptionType.includes(chartInfo.ChartType)||chartInfo.ChartType===2" 
-            @click="timeState.showTimePop=true"
+            @click="chartState.showTimePop=true"
         >
             <span>开始日期</span>
             <span>至</span>
@@ -62,9 +100,10 @@ let timeState=reactive({
         <!-- 一般曲线图选择时间区间 -->
         <div class="select-year-box" v-if="sameOptionType.includes(chartInfo.ChartType)">
             <span 
-                :class="['item']"
+                :class="['item',chartState.yearVal==item.value?'active':'']"
                 v-for="item in yearSelectOpt" 
                 :key="item.value"
+                @click="handleYearChange(item)"
             >{{item.name}}</span>
             <span class="item">全部</span>
         </div>
@@ -77,51 +116,69 @@ let timeState=reactive({
         <!-- 指标模块 -->
         <div class="edb-list-box">
             <div class="list-lable">指标信息</div>
-            <van-cell :title="item.EdbName" is-link v-for="item in edbList" :key="item.EdbInfoId"/>
+            <van-cell :title="item.EdbName" is-link v-for="item in edbList" :key="item.EdbInfoId" @click="showEDB=true,showEDBData=item"/>
         </div>
     </div>
 
     <!-- 选择日期弹窗 -->
     <van-popup 
-        v-model:show="timeState.showTimePop"
+        v-model:show="chartState.showTimePop"
         position="bottom"
     >
         <div class="time-picker-wrap">
             <van-picker-group
                 title="选择起始时间"
                 :tabs="['开始时间', '结束时间']"
-                @cancel="timeState.showTimePop=false"
+                @cancel="chartState.showTimePop=false"
             >
                 <van-date-picker
-                    v-model="timeState.startTime"
-                    :min-date="timeState.minDate"
-                    :max-date="timeState.maxDate"
+                    v-model="chartState.startTime"
+                    :min-date="minDate"
+                    :max-date="maxDate"
                     :columns-type="chartInfo.ChartType==2?['year']:['year','month']"
                 />
                 <van-date-picker 
-                    v-model="timeState.endTime" 
-                    :min-date="timeState.minDate" 
-                    :max-date="timeState.maxDate"
+                    v-model="chartState.endTime" 
+                    :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="showEDB"
+        position="bottom"
+        round
+    >
+        <EDBInfo 
+            :data="showEDBData"
+            @change="handleUpdateRender"
+        />
+    </van-popup>
 </template>
 
 <style lang="scss" scoped>
 .chart-detail-page{
     padding: $page-padding;
+    .chart-title{
+        font-size: 36px;
+        margin-bottom: 56px;
+    }
     .chart-box{
         width: 100%;
         height: 700px;
     }
     .select-year-box{
+        margin: 20px 0;
         .item{
             display: inline-block;
             margin-right: 20px;
+            &.active{
+                color: $theme-color;
+            }
         }
     }
 }

src/views/myETA/ChartList.vue

@@ -89,7 +89,7 @@ function goChartDetail(item){
             :finished-text="listState.list.length>0?'没有更多了':'暂无图表'"
             @load="onLoad"
         >
-            <img v-if="listState.list.length==0&&listState.finished" class="empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
+            <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
             <template v-for="item,index in listState.list" :key="item.ChartInfoId">
                 <van-swipe-cell :disabled="isCommon">
                     <div class="list-item" @click="goChartDetail(item)">

src/views/myETA/components/EDBInfo.vue

@@ -0,0 +1,141 @@
+<script setup>
+import {ref,onMounted} from 'vue'
+import { V3ColorPicker } from "v3-color-picker-teleport"
+const porps=defineProps({
+    data:{
+        type:Object,
+        default:{}
+    }
+})
+
+const emit=defineEmits(['change'])
+
+const list=[
+    {
+        name:"指标名称",
+        key:"EdbName"
+    },
+    {
+        name:"指标ID",
+        key:"EdbCode"
+    },
+    {
+        name:"更新频度",
+        key:"Frequency"
+    },
+    {
+        name:"单位",
+        key:"Unit"
+    },
+    {
+        name:"起始时间",
+        key:""
+    },
+    {
+        name:"最新日期",
+        key:"StartDate"
+    },
+    {
+        name:"最新值",
+        key:"LatestValue"
+    },
+    {
+        name:"最近更新",
+        key:"LatestDate"
+    },
+    {
+        name:"数据来源",
+        key:"SourceName"
+    }
+]
+
+const color = ref("#0ff");
+
+let isMounted=ref(false)
+onMounted(()=>{
+    isMounted.value=true
+})
+
+// 确定修改图
+function handleConfirmChange(){
+    emit('change',)
+}
+
+</script>
+
+<template>
+    <div class="edb-info-wrap">
+        <div class="top-box">
+            <span>取消</span>
+            <span class="title">指标详情</span>
+            <span @click="handleConfirmChange">确定</span>
+        </div>
+        <div class="con-box">
+            <ul class="info-list">
+                <li class="item" v-for="item in list" :key="item.key">
+                    <span class="lable">{{item.name}}:</span>
+                    <span class="text">{{data[item.key]}}</span>
+                </li>
+            </ul>
+            <div class="opt-box">
+                <div>
+                    <span>线条颜色:</span>
+                    <span id="select-color-box"></span>
+                    <v3-color-picker
+                        v-if="isMounted"
+                        :btn="true" 
+                        v-model:value="color" 
+                        size="medium" 
+                        theme="light"
+                        teleport='#select-color-box'
+                    ></v3-color-picker>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.edb-info-wrap{
+    .top-box{
+        display: flex;
+        padding: 20px $page-padding;
+        .title{
+            flex: 1;
+            text-align: center;
+        }
+    }
+    .con-box{
+        padding: $page-padding;
+    }
+    .info-list{
+        border-bottom: 1px solid $border-color;
+        padding-bottom: 40px;
+        margin-bottom: 40px;
+        .item{
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            .lable{
+                flex-shrink: 0;
+            }
+            .text{
+                width: 70%;
+                text-align: right;
+            }
+        }
+    }
+    .opt-box{
+
+        #select-color-box{
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            :deep(.color-picker){
+                box-sizing: content-box;
+            }
+        }
+    }
+
+}
+</style>