eta_front/src/views/predictEdb_manage/components/edbDetail.vue

<template>
    <div class="edb-detail-wrap" v-show="edbData.DataList">
        <chartInfo
            :edbData="edbData"
            :lang="lang"
            @refreshData="refreshData"
            ref="chartInfo"
        />
        <div class="info" style="display: flex;justify-content: space-between;">
            <span>数据来源：{{edbData.EdbInfo.SourceName}}</span>
            <span>添加人：{{edbData.EdbInfo.SysUserRealName}}</span>
        </div>
        <ul
            class="value-ul"
            v-show="showData&&dataList.length"
            >
            <li class="value-item">
                <!-- <span>日期（频度：{{EdbData.Frequency}}）</span> -->
                <span>频度</span>
                <span>日期</span>
                <span style="min-width:200px;text-align:center;">值</span>
            </li>
            <li
                class="value-item"
                v-for="item in dataList.slice(0,3)"
                :key="item.EdbDataId"
            >
            <span>{{EdbData.Frequency}}</span>
                <span class="value-label">
                    <span>
                        <i class="new-tag" v-if="EdbData.LatestDate===item.DataTime"></i>
                        {{ item.DataTime }}
                    </span>
                </span>
                <span
                    :class="['value-label',{'predict-act': item.isPredic}]"
                    style="min-width: 200px; text-align: center"
                >
                    <span :class="['value-style',{'predict-act': item.isPredic}]">{{item.Value}}</span>
                </span
                >
            </li>
            <li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
        </ul>

    </div>
</template>

<script>
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import { dataBaseInterface } from '@/api/api.js';
import chartInfo from './chartInfo.vue'
export default {
    props:{
        id: Number,
        lang: String
    },
    components:{chartInfo},
    watch:{
        id:{
            handler(n){
                if(n){
                    this.$nextTick(()=>{
                        this.getDetail()
                    })
                }
            },
            immediate:true
        },
        lang(newval){
            this.$emit('updateTit',{
                edb_name: this.edbData.EdbInfo.EdbName,
                edb_nameEn: this.edbData.EdbInfo.EdbNameEn,
                userid: this.edbData.EdbInfo.SysUserId
            })
        }
    },
    data() {
        return {
            edbData:{
                DataList:null,
                EdbInfo:{}
            },
            showData:false,
            dataList: [],
            EdbData:{}
        }
    },
    methods: {
        getDetail(type=''){
            preDictEdbInterface.edbChartInfo({
				EdbInfoId: this.id,
                DateType: this.$refs.chartInfo.year_select,
				StartDate: this.$refs.chartInfo.select_date[0]||'',
				EndDate: this.$refs.chartInfo.select_date[1]||'',
                ChartType:this.$refs.chartInfo.chartInfo.ChartType,
                SeasonStartDate:this.$refs.chartInfo.season_year[0]||'',
                SeasonEndDate:this.$refs.chartInfo.season_year[1]||'',
                Calendar:this.$refs.chartInfo.calendar_type
			}).then(res=>{
                if(res.Ret!=200) return
                this.edbData.DataList=res.Data.DataList||[]
                this.edbData.EdbInfo={
                    ...res.Data.EdbInfo,
                    ChartColor:'',
                    ChartStyle:'',
                    ChartType:0,
                    ChartWidth:0,
                    MaxData:type==='saveLimit' ? this.$refs.chartInfo.tableData[0].MaxData : res.Data.EdbInfo.MaxValue,
                    MinData:type==='saveLimit' ? this.$refs.chartInfo.tableData[0].MinData : res.Data.EdbInfo.MinValue,
                    EdbInfoCategoryType:1,
                    EdbInfoType:1,
                    EdbName:res.Data.EdbInfo.EdbName,
                    IsAxis:1
                }
                this.$emit('updateTit',{
                    edb_name: res.Data.EdbInfo.EdbName,
                    edb_nameEn: res.Data.EdbInfo.EdbNameEn,
                    userid: res.Data.EdbInfo.SysUserId
                })
                this.$emit('setOpera',res.Data.Button)

                this.$emit('setCurrentClassify',res.Data.EdbInfo.ClassifyId)
                //更新图片
                if(type==='updateImg' || !res.Data.EdbInfo.ChartImage) {
                    console.log(type);
                    console.log(res.Data.EdbInfo.ChartImage);
                    this.$nextTick(() => {
                        this.setChartImage()
                    })
                }
                this.getData()
            })
        },
        refreshData(type=''){
            this.getDetail(type)
        },
        changeEnOptions() {
            this.$emit('openEnNameDia',this.edbData.EdbInfo)
        },

        /* 关联图片 */
        setChartImage() {
            let svg = this.$refs.chartInfo.$refs.chartRef.chart.getSVG({
                chart:{
                width: 340,
                height: 230,
                }
            });
            let form = new FormData();
            form.append('Img', svg);
            this.setImageHandle(form);
        },

        async setImageHandle(form) {
            let { Data } = await dataBaseInterface.uploadImgSvg(form);
            await preDictEdbInterface.setImg({
                EdbInfoId: this.id,
                ImageUrl: Data.ResourceUrl,
            });
        },
        getData(){
            preDictEdbInterface.edbDataInfo({
                EdbInfoId: this.id,
                CurrentIndex: 1
            }).then(res => {
                this.showData = true;
                if(res.Ret!==200) return 
                const {Item} = res.Data
                Item.PredictDataList && Item.PredictDataList.forEach(_ => {
                    _.isPredic = true;
                })
                this.EdbData = Item
                this.dataList = [...Item.PredictDataList,...Item.DataList]
            })
        },

    },

}
</script>

<style lang="scss" scoped>
.value-ul {
    margin-top: 10px;
    border-bottom: 1px solid #dcdfe6;
    .value-item {
        padding: 14px 0;
        border: 1px solid #dcdfe6;
        border-bottom: none;
        display: flex;
        justify-content: space-around;
        span{
            flex: 1;
            text-align: center;
        }
        .value-label {
            position: relative;
            color: #666;
            .value-style{
                background-color: #ECF2FE;
                color: #0052D9;
                padding:5px;
                border-radius: 4px;
                &.predict-act {
                    color: orange;
                }
            }
        }
        .predict-act {
            color: orange;
        }
        .new-tag {
            width: 6px;
            height: 6px;
            display: inline-block;
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            background: #f00;
        }
    }
    .nodata {
        text-align: center;
        padding: 40px 0;
        color: #999;
    }
}
</style>