v1.7_EDB

src/api/dataEDB.js

@@ -124,7 +124,47 @@ export default{
      */
     edbRelationEdbList(params){
         return get('/datamanage/edb_info/relation/edbinfo_list',params)
-    }
+    },
 
+    /**
+     * 指标曲线图的数据
+     * @param EdbInfoId
+     * @param DateType
+     * @param StartDate
+     * @param EndDate
+     */
+    edbLineChartData(params){
+        return get('/datamanage/edb_info/data',params)
+    },
+
+    /**
+     * 指标季节性图的数据
+     * @param EdbInfoId
+     * @param Calendar
+     * @param StartDate
+     * @param EndDate
+     */
+    edbSeasonChartData(params){
+        return get('/datamanage/edb_info/data/seasonal',params)
+    },
+
+    /**
+     * 指标同比图的数据
+     * @param EdbInfoId
+     * @param DateType
+     * @param StartDate
+     * @param EndDate
+     */
+    edbTBChartData(params){
+        return get('/datamanage/edb_info/data/tb',params)
+    },
+
+    /**
+     * 计算指标详情
+     * @param EdbInfoId
+     */
+    getCalculateEdbInfo(params){
+        return get('/datamanage/edb_info/calculate/detail',params)
+    }
 
 }

src/views/dataEDB/Detail.vue

@@ -1,10 +1,26 @@
 <script setup name="DataEDBDetail">
 import {ref} from 'vue'
+import apiDataEDB from '@/api/dataEDB'
 import EDBChartDetailVue from './components/EDBChartDetail.vue'
 import EDBDataDetailVue from './components/EDBDataDetail.vue'
+import { useRoute } from 'vue-router'
+
+const route=useRoute()
 
 const activeType=ref('chart')
 
+// 获取指标详情
+const edbInfo=ref(null)
+async function getEDBInfo(){
+    const res=route.query.edbType==1
+        ? await apiDataEDB.getBaseEdbInfo({EdbInfoId:Number(route.query.edbInfoId)})
+        : await apiDataEDB.getCalculateEdbInfo({EdbInfoId:Number(route.query.edbInfoId)})
+    if(res.Ret===200){
+        edbInfo.value=res.Data
+    }
+}
+getEDBInfo()
+
 
 
 
@@ -12,14 +28,40 @@ const activeType=ref('chart')
 </script>
 
 <template>
-    <div class="edb-detail-page">
+    <div class="edb-detail-page" v-if="edbInfo">
         <div class="top-box">
-            <div class="van-multi-ellipsis--l2 edb-name-box">指标名指标名指标名指标名指标名指标名指标名指标名指标名指标名指标名指标名指标名指标名</div>
+            <div class="van-multi-ellipsis--l2 edb-name-box">{{edbInfo.EdbName}}</div>
         </div>
         <van-tabs v-model:active="activeType" sticky line-width="16" title-active-color="#0052D9" title-inactive-color="#333">
-            <van-tab title="图表详情" name="chart"><EDBChartDetailVue /></van-tab>
-            <van-tab title="数据详情" name="data"><EDBDataDetailVue /></van-tab>
+            <van-tab title="图表详情" name="chart">
+                <EDBChartDetailVue 
+                    :edbInfo="edbInfo"
+                />
+            </van-tab>
+            <van-tab title="数据详情" name="data">
+                <EDBDataDetailVue 
+                    :edbInfo="edbInfo"
+                />
+            </van-tab>
         </van-tabs>
+        <div class="fix-bottom-box">
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/report/icon_refresh.png" alt="">
+                <span>刷新</span>
+            </div>
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/dataEDB/icon_edit.png" alt="">
+                <span>编辑</span>
+            </div>
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
+                <div>上下限</div>
+            </div>
+            <div class="item">
+                <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
+                <div>更多</div>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -29,6 +71,31 @@ const activeType=ref('chart')
 }
 .top-box{
     padding: $page-padding $page-padding 10px;
-    font-size: 36px;
+    .edb-name-box{
+        font-size: 36px;
+        line-height: 52px;
+    }
+}
+.fix-bottom-box{
+    position: fixed;
+    height: 112px;
+    border-top: 1px solid $border-color;
+    z-index: 99;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    .item{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .icon{
+            width: 40px;
+            height: 40px;
+        }
+    }
+
 }
 </style>

src/views/dataEDB/Index.vue

@@ -114,6 +114,14 @@ function handleEDBOpt(type,data){
         if(data.EdbType === 2 && ![27,40,58,59].includes(data.Source)){
             showToast('待开发，计算指标请在pc端操作')
         }
+        //代码运算
+        if(item.Source===27){
+            showToast('代码运算指标请在pc端操作')
+        }
+        //数据调整
+        if(item.Source===40){
+            showToast('数据调整指标请在pc端操作')
+        }
     }
 
     // 删除
@@ -202,10 +210,30 @@ async function handleConfirmEDBMove(){
 
 // 跳转详情
 function handleEDBDetail(item){
+    let edbType=1// 1基础指标 2计算指标
+    // 基础指标
+    if(item.EdbType===1 || [58,59,67,68].includes(item.Source)){
+        edbType=1
+    }
+    // 计算指标
+    if(item.EdbType === 2 && ![27,40,58,59].includes(item.Source)){
+        edbType=2
+    }
+    //代码运算
+    if(item.Source===27){
+        showToast('代码运算指标请在pc端操作')
+        return
+    }
+    //数据调整
+    if(item.Source===40){
+        showToast('数据调整指标请在pc端操作')
+        return
+    }
     router.push({
         path:'/dataEDB/detail',
         query:{
-            edbInfoId:item.EdbInfoId
+            edbInfoId:item.EdbInfoId,
+            edbType:edbType
         }
     })
 }

src/views/dataEDB/components/EDBChartDetail.vue

@@ -1,57 +1,198 @@
 <script setup>
+import {ref} from 'vue'
+import moment from 'moment'
+import {yearSelectOpt} from '@/hooks/chart/config'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+
+const props=defineProps({
+    edbInfo:{
+        type:Object||null,
+        default:null,
+        require:true
+    }
+})
+
+// 图表类型
+const chartTypeOpts=[
+    {
+        name:'曲线图'
+    },
+    {
+        name:'同比图'
+    },
+    {
+        name:'季节性图'
+    }
+]
+const chartType=ref('曲线图')
+const showChartType=ref(false)
+function onChartTypeSelect(e){
+    chartType.value=e.name
+    showChartType.value=false
+}
+
+
+// 自定义时间段数据
+const minDate=new Date(1970, 0, 1)
+const maxDate=new Date(2050, 11, 31)
+const temStartDate=ref([moment().format('YYYY'),moment().format('MM')])
+const temEndDate=ref([moment().format('YYYY'),moment().format('MM')])
+const showSelectDate=ref(false)
+const selectStartDate=ref('')
+const selectEndDate=ref('')
+function handleConfrimSelectDate(e){
+    selectStartDate.value=e[0].selectedValues.join('-')
+    selectEndDate.value=e[1].selectedValues.join('-')
+    showSelectDate.value=false
+}
+
+// 时间选项
+const yearOpts=ref([{name: '全部',value:10},...yearSelectOpt])
+const selectYear=ref(10)
+
 
 </script>
 
 <template>
-    <div class="edb-chart-detail-wrap">
-        
-        
-        <div class="fix-bottom-box">
-            <div class="item">
-                <img class="icon" src="@/assets/imgs/report/icon_refresh.png" alt="">
-                <span>刷新</span>
-            </div>
-            <div class="item">
-                <img class="icon" src="@/assets/imgs/dataEDB/icon_edit.png" alt="">
-                <span>编辑</span>
-            </div>
-            <div class="item">
-                <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
-                <div>上下限</div>
+    <div class="edb-chart-detail-page">
+        <div class="top-filter-box">
+
+            <!-- 选择日期 -->
+            <div class="select-date-box" @click="showSelectDate=true">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                    <path d="M20 6H12L12 3H10L10 6H6C4.89543 6 4 6.89543 4 8V26C4 27.1046 4.89543 28 6 28H26C27.1046 28 28 27.1046 28 26V8C28 6.89543 27.1046 6 26 6H22V3H20L20 6ZM10 10L12 10L12 8H20L20 10L22 10V8H26V12H6V8H10L10 10ZM6 14H26V26H6L6 14Z" fill="#999999"/>
+                </svg>
+                <span :style="{color:!selectStartDate?'#999':'#333'}">{{selectStartDate||'开始日期'}}</span>
+                <span style="display:inline-block;margin:0 5px">-</span>
+                <span :style="{color:!selectEndDate?'#999':'#333'}">{{selectEndDate||'结束日期'}}</span>
             </div>
-            <div class="item">
-                <img class="icon" src="@/assets/imgs/myETA/icon_menu.png" alt="">
-                <div>更多</div>
+            <!-- 图类型切换 -->
+            <div class="chart-type-box" @click="showChartType=true">
+                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                    <path d="M2.50049 11.9999L26.0165 11.9999L18.3281 4.50217L19.7244 3.07031L29.0668 12.181C29.7475 12.8447 29.2776 13.9999 28.3268 13.9999L2.50049 13.9999V11.9999Z" fill="#0052D9"/>
+                    <path d="M29.5 19.9999L6.04053 19.9999L13.6611 27.2007L12.2874 28.6544L2.94908 19.8303C2.2522 19.1718 2.71812 17.9999 3.6771 17.9999L29.5 17.9999V19.9999Z" fill="#0052D9"/>
+                </svg>
+                <span>曲线图</span>
             </div>
         </div>
+        <!-- 图表渲染区域 -->
+        <div class="chart-render-box">
+            <div class="chart-box" id="chart-box"></div>
+        </div>
+        <!-- 来源和作者 -->
+        <div class="data-source-auth">
+            <span>数据来源：{{props.edbInfo.SourceName}}</span>
+            <span>作者：{{props.edbInfo.SysUserRealName}}</span>
+        </div>
+        <!-- 选择时间选项 -->
+        <van-tabs 
+            v-model:active="selectYear"
+            title-active-color="#0052D9"
+            title-inactive-color="#333"
+            line-width="16"
+        >
+            <van-tab 
+                :title="item.name" 
+                :name="item.value" 
+                v-for="item in yearOpts" 
+                :key="item.value" 
+            />
+        </van-tabs>
+
     </div>
+
+    <!-- 选择时间段 -->
+    <van-popup 
+        v-model:show="showSelectDate"
+        :position="width>650?'center':'bottom'"
+        :style="width>650?{ width: '400px'}:''"
+    >
+        <div class="time-picker-wrap">
+            <van-picker-group
+                title="选择起始时间"
+                :tabs="['开始时间', '结束时间']"
+                next-step-text="下一步"
+                @cancel="showSelectDate=false"
+                @confirm="handleConfrimSelectDate"
+            >
+                <van-date-picker
+                    v-model="temStartDate"
+                    :min-date="minDate"
+                    :max-date="maxDate"
+                    :columns-type="['year','month']"
+                />
+                <van-date-picker
+                    v-model="temEndDate"
+                    :min-date="minDate" 
+                    :max-date="maxDate"
+                    :columns-type="['year','month']"
+                />
+            </van-picker-group>
+        </div>
+    </van-popup>
+
+    <!-- 图表类型 -->
+    <van-action-sheet 
+        v-model:show="showChartType" 
+        :actions="chartTypeOpts" 
+        @select="onChartTypeSelect" 
+    />
+
 </template>
 
 <style lang="scss" scoped>
-.fix-bottom-box{
-    position: fixed;
-    height: 112px;
-    border-top: 1px solid $border-color;
-    z-index: 99;
-    left: 0;
-    right: 0;
-    bottom: 0;
+.edb-chart-detail-page{
+    .chart-render-box{
+        .chart-box{
+            width: 100%;
+            height: 700px;
+        }
+    }
+}
+.top-filter-box{
+    padding: $page-padding;
     display: flex;
-    .item{
-        flex: 1;
+    align-items: center;
+    .select-date-box{
         display: flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
+        background-color: $page-bg-grey;
+        padding: 0 32px;
+        border-radius: 12px;
+        flex: 1;
+        height: 72px;
         .icon{
-            width: 40px;
-            height: 40px;
+            width: 32px;
+            height: 32px;
+            margin-right: 10px;
+        }
+    }
+    .chart-type-box{
+        margin-left: 20px;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        height: 72px;
+        padding: 0 16px;
+        color: $theme-color;
+        background-color: #F2F3FF;
+        border-radius: 12px;
+        .icon{
+            width: 32px;
+            height: 32px;
+            margin-right: 10px;
         }
     }
-
 }
-.edb-chart-detail-wrap{
-    padding: $page-padding;
+.data-source-auth{
+    padding: 0 $page-padding;
+    display: flex;
+    justify-content: space-between;
+    color: $font-grey;
+    margin-bottom: 20px;
 }
 
 </style>