|
@@ -479,7 +479,13 @@ let showSaveChartOther=ref(false)
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="chart-box" id="chart-box"></div>
|
|
|
+ <!-- 图渲染区域 -->
|
|
|
+ <div class="chart-render-wrap">
|
|
|
+ <!-- pad 切换上一张\下一张 -->
|
|
|
+ <img class="pad-change-chart-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('prev')">
|
|
|
+ <img class="pad-change-chart-btn pad-change-chart-next-btn" src="@/assets/imgs/icon_arrow2.png" alt="" @click="handleSwitchChart('next')">
|
|
|
+ <div class="chart-box" id="chart-box"></div>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 一般曲线图选择时间区间 -->
|
|
|
<div class="select-year-box" v-if="sameOptionType.includes(chartInfo.ChartType)">
|
|
@@ -505,6 +511,8 @@ let showSaveChartOther=ref(false)
|
|
|
|
|
|
<!-- 指标模块 -->
|
|
|
<div class="edb-list-box">
|
|
|
+ <!-- pad 设置上下限按钮 -->
|
|
|
+ <span class="pad-limit-set-btn" @click="handleShowAxisLimitOpt" v-if="chartInfo.Source!=3&&chartInfo.ChartType!=8">设置上下限</span>
|
|
|
<div class="list-lable">指标信息</div>
|
|
|
<div class="list-box">
|
|
|
<van-cell
|
|
@@ -515,7 +523,6 @@ let showSaveChartOther=ref(false)
|
|
|
@click="handleShowEDBInfo(item)"
|
|
|
/>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部悬浮操作模块 -->
|
|
@@ -543,6 +550,7 @@ let showSaveChartOther=ref(false)
|
|
|
<van-popup
|
|
|
v-model:show="chartState.showTimePop"
|
|
|
:position="width>650?'center':'bottom'"
|
|
|
+ :style="width>650?{ width: '400px'}:''"
|
|
|
>
|
|
|
<div class="time-picker-wrap">
|
|
|
<van-picker-group
|
|
@@ -587,9 +595,10 @@ let showSaveChartOther=ref(false)
|
|
|
<!-- 上下限调整弹窗 -->
|
|
|
<van-popup
|
|
|
v-model:show="showLimitPop"
|
|
|
- position="bottom"
|
|
|
+ :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">
|
|
@@ -742,6 +751,13 @@ let showSaveChartOther=ref(false)
|
|
|
font-size: 36px;
|
|
|
margin-bottom: 56px;
|
|
|
}
|
|
|
+
|
|
|
+ .chart-render-wrap{
|
|
|
+ .pad-change-chart-btn{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.chart-box{
|
|
|
width: 100%;
|
|
|
height: 700px;
|
|
@@ -832,6 +848,9 @@ let showSaveChartOther=ref(false)
|
|
|
}
|
|
|
|
|
|
.edb-list-box{
|
|
|
+ .pad-limit-set-btn{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
.list-lable{
|
|
|
font-size: 36px;
|
|
|
color: #000;
|
|
@@ -985,8 +1004,30 @@ let showSaveChartOther=ref(false)
|
|
|
font-size: 16px;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
+
|
|
|
+ .chart-render-wrap{
|
|
|
+ position: relative;
|
|
|
+ .pad-change-chart-btn{
|
|
|
+ display: block;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ left: 0px;
|
|
|
+ &.pad-change-chart-next-btn{
|
|
|
+ right: 0;
|
|
|
+ left: auto;
|
|
|
+ transform: translateY(-50%) rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
.chart-box{
|
|
|
+ width: 85%;
|
|
|
height: 370px;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
.select-time-box{
|
|
|
display: none;
|
|
@@ -994,6 +1035,16 @@ let showSaveChartOther=ref(false)
|
|
|
.select-year-box{
|
|
|
display: none;
|
|
|
}
|
|
|
+ .calendar-type-box{
|
|
|
+ width: 224px;
|
|
|
+ margin: 20px auto;
|
|
|
+ border-radius: 4px;
|
|
|
+ span{
|
|
|
+ width: 110px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.edb-list-box{
|
|
|
position: relative;
|
|
@@ -1001,6 +1052,13 @@ let showSaveChartOther=ref(false)
|
|
|
border-top: 1px solid $border-color;
|
|
|
width: 100vw;
|
|
|
padding: 0 30px;
|
|
|
+ .pad-limit-set-btn{
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 20px;
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
.list-lable{
|
|
|
margin-top: 20px;
|
|
|
font-size: 16px;
|
|
@@ -1070,6 +1128,37 @@ let showSaveChartOther=ref(false)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .chart-set-limit-wrap{
|
|
|
+ .head-box{
|
|
|
+ .title{
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 50px;
|
|
|
+ padding-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bot-btn-box{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 56px;
|
|
|
+ border-top-width: 8px;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ max-height: 500px;
|
|
|
+ padding: 30px;
|
|
|
+ .item-box{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .lable-text{
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ .input-box{
|
|
|
+ .item{
|
|
|
+ .type-text{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.chart-copyto-wrap{
|
|
|
width: 375px;
|
|
|
.head-box{
|