|
@@ -1,6 +1,7 @@
|
|
|
<script setup>
|
|
|
import {ref,reactive,watch} from 'vue'
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
+import EDBHistory from '@/views/dataEDB/components/EDBHistory.vue'
|
|
|
import SelectEDB from './SelectEDB.vue'
|
|
|
import SelectEDBClassify from '../../components/SelectEDBClassify.vue'
|
|
|
import SelectEDBUnit from '../../components/SelectEDBUnit.vue'
|
|
@@ -9,7 +10,9 @@ import SeeEDBDataList from './SeeEDBDataList.vue'
|
|
|
import {calculateTypeTipsMap} from '../../util/config'
|
|
|
import { showToast } from 'vant';
|
|
|
import apiDataEDB from '@/api/dataEDB'
|
|
|
+import { useWindowSize } from '@vueuse/core'
|
|
|
|
|
|
+const { width } = useWindowSize()
|
|
|
const route=useRoute()
|
|
|
const router=useRouter()
|
|
|
|
|
@@ -23,7 +26,7 @@ const props=defineProps({
|
|
|
watch(
|
|
|
()=>props.edbInfo,
|
|
|
()=>{
|
|
|
- if(route.query.type==='edit'){
|
|
|
+ if(['edit','preview'].includes(route.query.type)){
|
|
|
const fromEdbInfo=props.edbInfo.CalculateList[0]
|
|
|
const edbInfoData=props.edbInfo.EdbInfoDetail
|
|
|
searchEDBInfoByCode(fromEdbInfo.FromEdbCode)
|
|
@@ -45,8 +48,6 @@ watch(
|
|
|
if([8,12,13,35].includes(edbInfoData.Source)){
|
|
|
baseInfo.numberN=Number(edbInfoData.CalculateFormula)
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
|
|
|
setTimeout(() => {
|
|
|
selectEDBClassifyINS.value?.getSelectClassifyOpt(props.edbInfo.EdbInfoDetail.ClassifyId)//获取选择的分类目录
|
|
@@ -55,6 +56,9 @@ watch(
|
|
|
}
|
|
|
)
|
|
|
|
|
|
+// 预览页面
|
|
|
+const isPreview=ref(route.query.type==='preview'||false)
|
|
|
+
|
|
|
const moveTypeOpts=[{name:'领先',key:1},{name:'滞后',key:2}]
|
|
|
const moveUnitOpts=[
|
|
|
{name:'天',key:'天'},
|
|
@@ -290,13 +294,31 @@ function handleTabChange(){
|
|
|
|
|
|
}
|
|
|
|
|
|
+//点击选择的指标左侧图标查看指标详情
|
|
|
+const showEDBHistory=ref(false)// 显示指标溯源
|
|
|
+function handleShowEDBHistory(data){
|
|
|
+ //计算指标打开弹窗,基础指标打开新页面
|
|
|
+ if(data.EdbType===2){
|
|
|
+ showEDBHistory.value=true
|
|
|
+ }else{
|
|
|
+ const routerEl=router.resolve({
|
|
|
+ path:'/dataEDB/detail',
|
|
|
+ query:{
|
|
|
+ edbInfoId:data.EdbInfoId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ window.open(routerEl.href,'_blank')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="other-calculate-wrap">
|
|
|
<van-tabs
|
|
|
v-model:active="source"
|
|
|
- sticky
|
|
|
+ sticky
|
|
|
+ :offset-top="width>650?60:0"
|
|
|
border
|
|
|
title-active-color="#0052D9"
|
|
|
title-inactive-color="#333"
|
|
@@ -315,14 +337,15 @@ function handleTabChange(){
|
|
|
<van-field
|
|
|
:modelValue="selectEDBinfo?.EdbName"
|
|
|
label="选择指标"
|
|
|
- is-link
|
|
|
+ :right-icon="!isPreview?'arrow':''"
|
|
|
readonly
|
|
|
placeholder="请选择指标"
|
|
|
input-align="right"
|
|
|
@click-input="showSelectEDB=true"
|
|
|
+ :disabled="isPreview"
|
|
|
>
|
|
|
<template #left-icon>
|
|
|
- <div class="left-icon" v-if="selectEDBinfo">
|
|
|
+ <div class="left-icon" v-if="selectEDBinfo" @click="handleShowEDBHistory(selectEDBinfo)">
|
|
|
<svg-icon name="edb-history-tag" size="24px"/>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -357,16 +380,17 @@ function handleTabChange(){
|
|
|
label="移动方式"
|
|
|
required
|
|
|
v-if="source===22"
|
|
|
+ :disabled="isPreview"
|
|
|
>
|
|
|
<template #input>
|
|
|
<div class="move-type-box">
|
|
|
- <div class="btn" @click="showMoveType=true">
|
|
|
- <svg-icon name="swap"></svg-icon>
|
|
|
+ <div :class="['btn',isPreview?'disabled':'']" @click="()=>{if(isPreview)return false;showMoveType=true}">
|
|
|
+ <svg-icon name="swap" v-if="!isPreview"></svg-icon>
|
|
|
<span>{{getMoveTypeName(baseInfo.moveType)}}</span>
|
|
|
</div>
|
|
|
- <input class="input" type="number" :min="0" v-model="baseInfo.moveVal">
|
|
|
- <div class="btn" @click="showMoveUnit=true">
|
|
|
- <svg-icon name="swap"></svg-icon>
|
|
|
+ <input :disabled="isPreview" class="input" type="number" :min="0" v-model="baseInfo.moveVal">
|
|
|
+ <div :class="['btn',isPreview?'disabled':'']" @click="()=>{if(isPreview)return false;showMoveUnit=true}">
|
|
|
+ <svg-icon name="swap" v-if="!isPreview"></svg-icon>
|
|
|
<span>{{baseInfo.moveUnit}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -380,9 +404,10 @@ function handleTabChange(){
|
|
|
required
|
|
|
@focus="edbNameInputFocus=true"
|
|
|
@blur="edbNameInputFocus=false"
|
|
|
+ :disabled="isPreview"
|
|
|
>
|
|
|
<template #right-icon>
|
|
|
- <svg-icon class="edit-icon" name="edit" :color="edbNameInputFocus?'#0052D9':'#333333'"/>
|
|
|
+ <svg-icon v-if="!isPreview" class="edit-icon" name="edit" :color="edbNameInputFocus?'#0052D9':'#333333'"/>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
<van-field
|
|
@@ -391,10 +416,10 @@ function handleTabChange(){
|
|
|
label="单位"
|
|
|
placeholder="请选择单位"
|
|
|
input-align="right"
|
|
|
- right-icon="arrow"
|
|
|
+ :right-icon="!isPreview?'arrow':''"
|
|
|
required
|
|
|
@click-input="showSelectUnit=true"
|
|
|
- :disabled="!editEdbInfoId&&[6,7].includes(source)"
|
|
|
+ :disabled="!editEdbInfoId&&[6,7].includes(source)||isPreview"
|
|
|
/>
|
|
|
<van-field
|
|
|
:modelValue="classifyStr"
|
|
@@ -402,9 +427,10 @@ function handleTabChange(){
|
|
|
label="指标目录"
|
|
|
placeholder="请选择指标目录"
|
|
|
input-align="right"
|
|
|
- right-icon="arrow"
|
|
|
+ :right-icon="!isPreview?'arrow':''"
|
|
|
required
|
|
|
@click-input="showSelectClassify=true"
|
|
|
+ :disabled="isPreview"
|
|
|
/>
|
|
|
<van-field
|
|
|
:modelValue="baseInfo.frequency"
|
|
@@ -412,10 +438,10 @@ function handleTabChange(){
|
|
|
label="频度"
|
|
|
placeholder="请选择指标频度"
|
|
|
input-align="right"
|
|
|
- right-icon="arrow"
|
|
|
+ :right-icon="!isPreview?'arrow':''"
|
|
|
required
|
|
|
@click-input="showSelectFrequency=true"
|
|
|
- :disabled="[5,14,61,63].includes(source)||(!editEdbInfoId&&[6,7].includes(source))"
|
|
|
+ :disabled="[5,14,61,63].includes(source)||(!editEdbInfoId&&[6,7].includes(source))||isPreview"
|
|
|
/>
|
|
|
<van-field
|
|
|
v-if="[8,12,13,35].includes(source)"
|
|
@@ -426,9 +452,10 @@ function handleTabChange(){
|
|
|
required
|
|
|
@focus="numberNInputFocus=true"
|
|
|
@blur="numberNInputFocus=false"
|
|
|
+ :disabled="isPreview"
|
|
|
>
|
|
|
<template #right-icon>
|
|
|
- <svg-icon class="edit-icon" name="edit" :color="numberNInputFocus?'#0052D9':'#333333'"/>
|
|
|
+ <svg-icon v-if="!isPreview" class="edit-icon" name="edit" :color="numberNInputFocus?'#0052D9':'#333333'"/>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
<!-- 超季节性日历 -->
|
|
@@ -439,9 +466,10 @@ function handleTabChange(){
|
|
|
label="日历"
|
|
|
placeholder="请选择日历"
|
|
|
input-align="right"
|
|
|
- right-icon="arrow"
|
|
|
+ :right-icon="!isPreview?'arrow':''"
|
|
|
required
|
|
|
@click-input="showSelectCalendar=true"
|
|
|
+ :disabled="isPreview"
|
|
|
/>
|
|
|
<!-- 降频数据取值 -->
|
|
|
<van-field
|
|
@@ -451,8 +479,9 @@ function handleTabChange(){
|
|
|
label="数据取值"
|
|
|
placeholder="请选择"
|
|
|
input-align="right"
|
|
|
- right-icon="arrow"
|
|
|
+ :right-icon="!isPreview?'arrow':''"
|
|
|
@click-input="showDataValSelect=true"
|
|
|
+ :disabled="isPreview"
|
|
|
/>
|
|
|
</section>
|
|
|
|
|
@@ -460,7 +489,7 @@ function handleTabChange(){
|
|
|
<svg-icon class="icon" name="warning"></svg-icon>
|
|
|
<span>公式说明</span>
|
|
|
</div>
|
|
|
- <div class="opt-btns">
|
|
|
+ <div class="opt-btns" v-if="!isPreview">
|
|
|
<van-button class="primary2" @click="$router.back()">取消</van-button>
|
|
|
<van-button
|
|
|
type="primary"
|
|
@@ -498,6 +527,9 @@ function handleTabChange(){
|
|
|
<!-- 降频数据取值 -->
|
|
|
<van-action-sheet v-model:show="showDataValSelect" close-on-click-action :actions="[{name:'期末值'},{name:'平均值'}]" @select="e=>baseInfo.valueType=e.name" />
|
|
|
|
|
|
+ <!-- 指标溯源 -->
|
|
|
+ <EDBHistory v-model:show="showEDBHistory" :edbInfoId="edbHistoryId"/>
|
|
|
+
|
|
|
<!-- 公式说明 -->
|
|
|
<van-dialog
|
|
|
v-model:show="showTips"
|
|
@@ -568,6 +600,10 @@ function handleTabChange(){
|
|
|
background-color: #F2F3FF;
|
|
|
color: $theme-color;
|
|
|
}
|
|
|
+ .disabled{
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
}
|
|
|
.formula-intro-btn{
|
|
|
width: 180px;
|
|
@@ -599,6 +635,59 @@ function handleTabChange(){
|
|
|
justify-content: space-between;
|
|
|
.van-button{
|
|
|
width: 48%;
|
|
|
+ max-width: 300PX;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media screen and (min-width:$media-width){
|
|
|
+ .other-calculate-wrap{
|
|
|
+ padding-bottom: 105px;
|
|
|
+ }
|
|
|
+ .section{
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .edbinfo-box{
|
|
|
+ .info-box{
|
|
|
+ margin-top: 7px;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ .name{
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ .info-list{
|
|
|
+ gap: 5px 0;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .move-type-box{
|
|
|
+ gap: 10px;
|
|
|
+ .input{
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 65px;
|
|
|
+ height: 36px;
|
|
|
+ padding: 0 16px;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ width: 65px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .formula-intro-btn{
|
|
|
+ width: 90px;
|
|
|
+ height: 30px;
|
|
|
+ gap: 2px;
|
|
|
+ border-radius: 16px;
|
|
|
+ .icon{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .opt-btns{
|
|
|
+ padding: 24px;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 10px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|