完成指标修改

src/views/myETA/ChartDetail.vue

@@ -100,21 +100,21 @@ async function reloadChartInfo(){
     if(res.Ret!==200) return
     chartInfo.value=res.Data.ChartInfo
 
-    const beforeOptions = sessionStorage.getItem('myChartbeforeOptions')
-          ? JSON.parse(sessionStorage.getItem('myChartbeforeOptions'))
-          : '';
-    //合并缓存配置和新的数据
-    const newarr = res.Data.EdbInfoList.map((item, index) => {
-        if (beforeOptions) {
-            const DataList = item.DataList;
-            return {
-              ...beforeOptions[index],
-              DataList,
-            };
-        } else {
-            return item;
-        }
-    })
+    // const beforeOptions = sessionStorage.getItem('myChartbeforeOptions')
+    //       ? JSON.parse(sessionStorage.getItem('myChartbeforeOptions'))
+    //       : '';
+    // //合并缓存配置和新的数据
+    // const newarr = res.Data.EdbInfoList.map((item, index) => {
+    //     if (beforeOptions) {
+    //         const DataList = item.DataList;
+    //         return {
+    //           ...beforeOptions[index],
+    //           DataList,
+    //         };
+    //     } else {
+    //         return item;
+    //     }
+    // })
     chartRender({
         data:{
             ...res.Data,
@@ -122,7 +122,7 @@ async function reloadChartInfo(){
                 ...res.Data.ChartInfo,
                 Calendar:chartState.calendarType||'公历'
             },
-            EdbInfoList:newarr
+            // EdbInfoList:newarr
         },
         renderId:'chart-box',
         lang:'zh',
@@ -265,10 +265,62 @@ function handleConfirmLimitChange(){
 // 显示指标详情
 let showEDB=ref(false)
 let showEDBData=ref({})
+function handleShowEDBInfo(item){
+    if(sameOptionType.includes(chartInfo.value.ChartType) && chartInfo.value.ChartType!==5){
+        showEDBData.value=item
+        showEDB.value=true
+    }
+}
 
+// 获取指标数据
+async function getItemEDBInfo(item){
+    const params={
+        EdbInfoId: item.EdbInfoId,
+        DateType: chartState.yearVal,
+        StartDate: chartState.startTime,
+        EndDate: chartState.endTime,
+        EdbInfoType: item.EdbInfoType,
+        LeadValue: item.EdbInfoType ? 0 : item.LeadValue,
+        LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
+    }
+    return apiEDBInfo(params)
+}
 
-function handleUpdateRender(val){
+// 指标配置项修改更新图
+async function handleUpdateRender(val,isEdit){
+    
+    const index=edbList.value.findIndex(_=>_.EdbInfoId==val.EdbInfoId)
+    
+    // 如果修改过 领先指标\标准指标则重新获取指标数据
+    if(isEdit){
+        edbList.value[index]=val
+        const asyncTasks=edbList.value.map(_item=> getItemEDBInfo(_item))
+        const results=await Promise.all(asyncTasks)
+        console.log(results);
+        results.forEach((item,index)=>{
+            if(item.Ret==200){
+                edbList.value[index].DataList=item.Data.EdbInfo.DataList
+                if(item.Data.EdbInfo.EdbInfoCategoryType===1){
+                    edbList.value[index].LatestDate=item.Data.EdbInfo.LatestDate
+                }
+            }
+        })
+    }else{
+        edbList.value[index]=val
+    }
 
+    chartRender({
+        data:{
+            ...chartInfoData,
+            EdbInfoList:edbList.value
+        },
+        renderId:'chart-box',
+        lang:'zh',
+        changeLangIsCheck:false,
+        showChartTitle:false
+    })
+    showEDB.value=false
+    showEDBData.value={}
 }
 
 
@@ -365,6 +417,7 @@ function handleDeleteChart(){
 
 // 另存为
 let showSaveChartOther=ref(false)
+
 </script>
 
 <template>
@@ -408,7 +461,13 @@ let showSaveChartOther=ref(false)
         <!-- 指标模块 -->
         <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" @click="showEDB=true,showEDBData=item"/>
+            <van-cell 
+                :title="item.EdbName" 
+                :is-link="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5"
+                v-for="item in edbList" 
+                :key="item.EdbInfoId" 
+                @click="handleShowEDBInfo(item)"
+            />
         </div>
 
         <!-- 底部悬浮操作模块 -->
@@ -465,9 +524,13 @@ let showSaveChartOther=ref(false)
         v-model:show="showEDB"
         position="bottom"
         round
+        closeable
     >
-        <EDBInfo 
+        <EDBInfo
+            :show="showEDB"
             :data="showEDBData"
+            :tableData="edbList"
+            :chartInfo="chartInfo"
             @change="handleUpdateRender"
         />
     </van-popup>

src/views/myETA/components/EDBInfo.vue

@@ -1,15 +1,43 @@
 <script setup>
-import {ref,onMounted} from 'vue'
+import {ref,onMounted,watch,computed} from 'vue'
 import { V3ColorPicker } from "v3-color-picker-teleport"
-const porps=defineProps({
+import _ from 'lodash'
+
+const leadUnitOpt=[{text:'年'}, {text:'季'}, {text:'月'}, {text:'周'}, {text:'天'}]//领先指标频度配置
+
+const props=defineProps({
+    show:{
+        type:Boolean,
+        default:false
+    },
     data:{
         type:Object,
         default:{}
+    },
+    tableData:{
+        type:Array,
+        default:[]
+    },
+    chartInfo:{
+        type:Object,
+        default:{}
     }
 })
-
 const emit=defineEmits(['change'])
 
+const temData=ref(_.cloneDeep(props.data)||{})
+
+watch(
+    ()=>props.show,
+    (n)=>{
+        if(!n){
+            temData.value={}
+        }else{
+            temData.value=_.cloneDeep(props.data)
+        }
+    }
+)
+
 const list=[
     {
         name:"指标名称",
@@ -49,16 +77,48 @@ const list=[
     }
 ]
 
-const color = ref("#0ff");
+const showYOptionsHandle=computed(()=>{
+    let isShowOptions = true;
+    // 图表类型不是堆叠或组合 y轴配置显示
+    // 堆叠图类型第一个指标的y轴配置显示 其余不显示
+    // 组合图类型 组合样式不是堆叠 显示
+    //组合图类型 组合样式是堆叠 第一个堆叠的y轴配置显示 其余相同样式堆叠不显示
+    const index=props.tableData.findIndex(_=>_.EdbInfoId==props.data.EdbInfoId)
+    if([3,4].includes(props.chartInfo.ChartType) && index !== 0) {
+        isShowOptions = false
+    } else if(props.chartInfo.ChartType ===6 
+        && ['areaspline','column'].includes(item.ChartStyle) 
+        && index !== props.tableData.findIndex(_ => _.ChartStyle === item.ChartStyle)) {
+        isShowOptions = false
+    }
+
+    return isShowOptions;
+})
 
 let isMounted=ref(false)
 onMounted(()=>{
     isMounted.value=true
 })
 
+// 是否修改了指标
+const isEdit=computed(()=>{
+    let flag=false
+    if(temData.value.EdbInfoType!=props.data.EdbInfoType) flag=true
+    if(temData.value.LeadValue!=props.data.LeadValue) flag=true
+    if(temData.value.LeadUnit!=props.data.LeadUnit) flag=true
+
+    return flag
+})
+
 // 确定修改图
 function handleConfirmChange(){
-    emit('change',)
+    emit('change',temData.value,isEdit.value)
+
+}
+
+// 领先指标单位修改
+function handleLeadUnitChange(e){
+    temData.value.LeadUnit=e.text
 }
 
 </script>
@@ -66,9 +126,7 @@ function handleConfirmChange(){
 <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">
@@ -78,37 +136,109 @@ function handleConfirmChange(){
                 </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 class="lable">指标操作</div>
+                <div class="con">
+                    <div class="item-box" v-if="showYOptionsHandle">
+                        <div 
+                            :class="['radio-box',temData.IsOrder?'active':'']"
+                            @click="temData.IsOrder=!temData.IsOrder"
+                        >
+                            <div class="radius-box"></div>
+                            <div class="text">逆序</div>
+                        </div>
+                        <div class="btn-box" style="margin-left:20px">
+                            <span 
+                                :class="['btn',temData.IsAxis==1?'active':'']"
+                                @click="temData.IsAxis=1"
+                            >左轴</span>
+                            <span 
+                                :class="['btn',temData.IsAxis==0?'active':'']"
+                                @click="temData.IsAxis=0"
+                            >右轴</span>
+                            <span
+                                class="btn disabled"
+                                v-if="(tableData.findIndex(_ => _.IsAxis===0) === -1) 
+                                        || (temData.IsAxis==0&& tableData.filter(_ => _.IsAxis===0).length === 1)"
+                            >右2轴</span>
+                            <span 
+                                v-else
+                                :class="['btn',temData.IsAxis==2?'active':'']"
+                                @click="temData.IsAxis=2"
+                            >右2轴</span>
+                        </div>
+                    </div>
+                    <div class="item-box" style="display:block">
+                        <div 
+                            :class="['radio-box',temData.EdbInfoType==1?'active':'']"
+                            @click="temData.EdbInfoType=1"
+                        >
+                            <div class="radius-box"></div>
+                            <div class="text">标准指标</div>
+                        </div>
+
+                        <div style="display:flex;align-items: center;margin-top:10px">
+                            <div 
+                                :class="['radio-box',temData.EdbInfoType==0?'active':'']" 
+                                style="margin-right:20px"
+                                @click="temData.EdbInfoType=0"
+                            >
+                                <div class="radius-box"></div>
+                                <div class="text">领先指标</div>
+                            </div>
+                            <template v-if="temData.EdbInfoType==0">
+                            <div class="step-box">
+                                <van-stepper input-width="40px" min="0" integer v-model.number="temData.LeadValue" />
+                            </div>
+                            <van-popover 
+                                :actions="leadUnitOpt"
+                                placement="top"
+                                @select="handleLeadUnitChange"
+                            >
+                                <template #reference>
+                                    <span class="lead-unit">{{temData.LeadUnit||'无'}}</span>
+                                </template>
+                            </van-popover>
+                            </template>
+                            
+                        </div>
+                    </div>
+
+                    <div class="item-box">
+                        <span style="margin-right:20px">线条颜色</span>
+                        <v3-color-picker
+                            v-if="isMounted"
+                            :btn="true" 
+                            v-model:value="temData.ChartColor" 
+                            size="medium"
+                            theme="light"
+                            teleport='#select-color-box'
+                        ></v3-color-picker>
+                        <span id="select-color-box"></span>
+                    </div>
+                    <div class="item-box">
+                        <span style="margin-right:20px">线条粗细</span>
+                        <div class="step-box">
+                            <van-stepper input-width="40px" v-model.number="temData.ChartWidth" />
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
+        <div class="confirm-btn" @click="handleConfirmChange">确定</div>
     </div>
 </template>
 
 <style lang="scss" scoped>
 .edb-info-wrap{
     .top-box{
-        display: flex;
-        align-items: center;
         padding: 32px $page-padding;
+        border-bottom: 1px solid $border-color;
         .title{
-            flex: 1;
-            text-align: center;
             font-size: 32px;
+            font-weight: 600;
         }
     }
     .con-box{
-        padding: $page-padding;
         max-height: 60vh;
         overflow-y: auto;
         &::-webkit-scrollbar{
@@ -116,8 +246,8 @@ function handleConfirmChange(){
         }
     }
     .info-list{
+        padding: $page-padding;
         padding-bottom: 40px;
-        margin-bottom: 40px;
         .item{
             display: flex;
             justify-content: space-between;
@@ -133,7 +263,99 @@ function handleConfirmChange(){
             }
         }
     }
+
     .opt-box{
+        .lable{
+            padding-left: $page-padding;
+            padding-bottom: $page-padding;
+            font-weight: 600;
+            font-size: 36px;
+            border-bottom: 1px solid $border-color;
+        }
+        .con{
+            padding:0 $page-padding;
+            .radio-box{
+                display: flex;
+                align-items: center;
+                &.active{
+                    .radius-box::after{
+                        content:'';
+                        display: block;
+                        width: 16px;
+                        height: 16px;
+                        background-color: $theme-color;
+                        border-radius: 50%;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%,-50%);
+                    }
+                }
+                .radius-box{
+                    display: block;
+                    width: 32px;
+                    height: 32px;
+                    border-radius: 50%;
+                    border: 1px solid $theme-color;
+                    margin-right: 14px;
+                    position: relative;
+                }
+                .text{
+                    font-size: 32px;
+                }
+            }
+            .btn-box{
+                .btn{
+                    min-width: 140px;
+                    line-height: 56px;
+                    font-size: 28px;
+                    font-weight: 600;
+                    text-align: center;
+                    padding: 0 10px;
+                    display: inline-block;
+                    border: 1px solid $theme-color;
+                    color: $theme-color;
+                    &.active{
+                        color: #fff;
+                        background-color: $theme-color;
+                    }
+                    &.disabled{
+                        color: $font-grey_999;
+                        border-color: $border-color;
+                    }
+                }
+
+            }
+            .step-box{
+                display: inline-block;
+                :deep(.van-stepper){
+                    display: flex;
+                    justify-content: center;
+                }
+            }
+            
+            .item-box{
+                border-bottom: 1px solid $border-color;
+                padding: 44px 0;
+                display: flex;
+                align-items: center;
+                :deep(.v3-c-p .c-p-t){
+                    border: none;
+                }
+                :deep(.v3-c-p .c-p-c){
+                    border: none;
+                    border-radius: 50%;
+                    overflow: hidden;
+                }
+                :deep(.v3-c-p .c-p-i){
+                    display: none;
+                }
+
+            }
+            .lead-unit{
+                padding: 5px 10px;
+            }
+        }
 
         #select-color-box{
             display: inline-block;
@@ -145,5 +367,13 @@ function handleConfirmChange(){
         }
     }
 
+    .confirm-btn{
+        border-top: 20px solid #F2F6FA;
+        line-height: 112px;
+        text-align: center;
+        color: $theme-color;
+        font-size: 32px;
+    }
+
 }
 </style>