comit

src/assets/styles/common.scss

@@ -59,4 +59,15 @@ img {
     width: 400px;
     display: block;
     margin: 0 auto;
+}
+
+// 全局公共弹窗
+.global-pop-wrap_mobile{
+    background-color: #fff;
+    .head-box{
+        border-bottom: 1px solid $border-color;
+    }
+    .bot-btn-box{
+        border-top: 20px solid #F2F6FA;
+    }
 }

src/views/myETA/ChartDetail.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {ref,nextTick, reactive} from 'vue'
 import {apiChartInfoByCode,apiChartInfoById,apiEDBInfo} from '@/api/chart'
+import {apiMyChartList} from '@/api/myETA'
 import { useRoute } from 'vue-router'
 import {chartRender} from '@/hooks/chart/render'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
@@ -8,7 +9,34 @@ import EDBInfo from './components/EDBInfo.vue'
 import moment from 'moment'
 
 const route=useRoute()
-const chartCode=route.query.code
+let chartCode=route.query.code
+
+// 获取当前图表所在分类下的所有图表数据 用于上一张下一张切换
+let allChartList=ref([])
+async function getAllChartList(){
+    if(!route.query.cid) return
+    const res=await apiMyChartList({
+        CurrentIndex:1,
+        PageSize:1000000,
+        MyChartClassifyId:Number(route.query.cid)
+    })
+    if(res.Ret===200){
+        allChartList.value=res.Data.List||[]
+    }
+}
+getAllChartList()
+// 切换图上一张下一张
+function handleSwitchChart(type){
+    const index=allChartList.value.findIndex((item)=>item.UniqueCode==chartCode)
+    let item=null
+    if(type==='prev'){
+        item=index===0?allChartList.value[allChartList.value.length-1]:allChartList.value[index-1]
+    }else{
+        item=index===allChartList.value.length-1?allChartList.value[0]:allChartList.value[index+1]
+    }
+    chartCode=item.UniqueCode
+    getChartInfo()
+}
 
 // 获取图详情
 let chartInfo=ref(null)
@@ -123,17 +151,34 @@ function handleSeasonTypeChange(type){
     reloadChartInfo()
 }
 
+// 上下限调整
+let showLimitPop=ref(false)
+let axisLimitData=reactive({//左右轴极值
+    min:'-99999999999999999',
+    leftMin:0,
+    leftMax:0,
+    rightMin:0,
+    rightMax:0,
+    rightTwoMin:0,
+    rightTwoMax:0,
+    xMin:0,
+    xMax:0,
+})
+
 
 // 显示指标详情
 let showEDB=ref(false)
 let showEDBData=ref({})
 
 
-
 function handleUpdateRender(val){
 
 }
 
+
+// 更多操作弹窗
+let showMoreAction=ref(false)
+
 </script>
 
 <template>
@@ -182,19 +227,19 @@ function handleUpdateRender(val){
 
         <!-- 底部悬浮操作模块 -->
         <div class="fix-bot-action-box">
-            <div class="item">
+            <div class="item" @click="handleSwitchChart('prev')">
                 <img class="icon" src="@/assets/imgs/icon_arrow.png" alt="">
                 <div>上一张</div>
             </div>
-            <div class="item">
+            <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">
+            <div class="item" @click="showLimitPop=true">
                 <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
                 <div>上下限</div>
             </div>
-            <div class="item">
+            <div class="item" @click="showMoreAction=true">
                 <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
                 <div>更多</div>
             </div>
@@ -240,6 +285,121 @@ function handleUpdateRender(val){
             @change="handleUpdateRender"
         />
     </van-popup>
+
+    <!-- 上下限调整弹窗 -->
+    <van-popup 
+        v-model:show="showLimitPop"
+        position="bottom"
+        round
+        closeable
+    >
+        <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">
+                    <span class="lable-text">左轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.leftMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.leftMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右轴 -->
+                <div class="item-box">
+                    <span class="lable-text">右轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 右二轴 -->
+                <div class="item-box">
+                    <span class="lable-text">右2轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightTwoMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightTwoMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- x轴 -->
+                <div class="item-box">
+                    <span class="lable-text">X轴</span>
+                    <div class="input-box">
+                        <div class="item">
+                            <div class="type-text">上限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.xMax" />
+                            </div>
+                        </div>
+                        <div class="item">
+                            <div class="type-text">下限</div>
+                            <div class="step-box">
+                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.xMin" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bot-btn-box">确定</div>
+        </div>
+    </van-popup>
+
+    <!-- 更多操作弹窗 -->
+    <van-popup 
+        v-model:show="showMoreAction"
+        position="bottom"
+        round
+    >
+        <div class="more-action-wrap">
+            <div class="item">
+                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+                <span>复制到</span>
+            </div>
+            <div class="item">
+                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+                <span>另存为</span>
+            </div>
+            <div class="item">
+                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+                <span>移出</span>
+            </div>
+            <div class="item">
+                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+                <span>删除</span>
+            </div>
+        </div>
+    </van-popup>
 </template>
 
 <style lang="scss" scoped>
@@ -380,4 +540,64 @@ function handleUpdateRender(val){
         }
     }
 }
+.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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+}
+.more-action-wrap{
+    .item{
+        display: flex;
+        align-items: center;
+        padding: 32px 34px;
+        border-bottom: 1px solid $border-color;
+        font-size: 32px;
+        img{
+            width: 48px;
+            height: 48px;
+            margin-right: 20px;
+        }
+    }
+}
 </style>

src/views/myETA/ChartList.vue

@@ -68,7 +68,7 @@ function goChartDetail(item){
         path:"/myETA/chartdetail",
         query:{
             code:item.UniqueCode,
-            
+            cid:cid.value
         }
     })
 }