sagacloud-cwc-pages/src/views/evaluate/evCard.vue

<template>
    <div>
        <div class='count-card-box' v-if='cardList.length>0'>
            <div class='count-card' v-for='(item,index) in cardList' :key='index'>
                <div class='card-div1' v-if='item.recommend.onTime'>执行时间：{{item.recommend?formatterStr2(item.recommend.onTime):'--'}}</div>
                <div class='card-div1' v-else-if='item.recommend.offTime'>执行时间：{{item.recommend?formatterStr2(item.recommend.offTime):'--'}}</div>
                <div class='card-div1' v-else>执行时间：{{item.recommend?formatterStr2(item.recommend.time):'--'}}</div>
                <div class='card-div2 MicrYaHei'>
                    <span>策略建议</span>
                    <span>冷机台数</span>
                    <span>
                        <b class='recommend-b'>{{formatterRes(item.recommend.chillerNumSetL,1,0)}}</b>
                        大
                        <b class='recommend-b'>{{formatterRes(item.recommend.chillerNumSetS,1,0)}}</b>小
                    </span>
                    <span>冷机出水温度</span>
                    <span>
                        <b class='recommend-b'>{{formatterRes(item.recommend.chillWaterOutTempSet,0,1)}}</b> °C
                    </span>
                </div>
                <div class='card-div3 MicrYaHei'>
                    <span>实际执行</span>
                    <span>冷机台数</span>
                    <span>
                        <b
                            class='recommend-b'
                            v-if='item.real'
                            :class='item.recommend.chillerNumSetL==item.real.chillerNumSetLOrg?"":"red"'
                        >{{formatterRes(item.real.chillerNumSetLOrg,1,0)}}</b>大
                        <b
                            class='recommend-b'
                            v-if='item.real'
                            :class='item.recommend.chillerNumSetS==item.real.chillerNumSetSOrg?"":"red"'
                        >{{formatterRes(item.real.chillerNumSetSOrg,1,0)}}</b> 小
                    </span>
                    <span>冷机出水温度</span>
                    <span>
                        <b
                            class='recommend-b'
                            v-if='item.real'
                            :class='item.recommend.chillWaterOutTempSet==item.real.chillWaterOutTempSetOrg?"":"red"'
                        >{{formatterRes(item.real.chillWaterOutTempSetOrg,0,1)}}</b>°C
                    </span>
                </div>

                <div class='card-div4'>备注：{{item.recommend.remarks||'--'}}</div>
                <div class='card-div5'>
                    <span class='card-div7' v-if='item.recommend.isExecuted'>
                        <img src='../../assets/completed.png' alt />
                        已按策略执行
                    </span>
                    <template v-else-if='item.recommend.appealId' v-for='(item1,index) in titles'>
                        <template v-if='item1.id==item.recommend.appealId'>
                            <span class='card-div8' v-if='item1.status==302' :key='"l"+index'>
                                <img src='../../assets/processing.png' alt />
                                申诉中
                            </span>
                            <span class='card-div6' v-else :key='"l"+index'>
                                <img src='../../assets/error.png' alt />
                                未按策略执行
                            </span>
                        </template>
                    </template>
                    <template v-else>
                        <span class='card-div6' :key='"l"+index'>
                            <img src='../../assets/error.png' alt />
                            未按策略执行
                        </span>
                    </template>
                    <span></span>
                    <span class='MicrYaHei' @click='lookQuickData(item)' style>查看快照</span>
                </div>
            </div>
            <div class='view-dialog'>
                <el-dialog title='策略推出时状况' :visible.sync='viewSnapshots' :close-on-click-modal='false' width='1260px'>
                    <ev-snapshots-dialog v-if='date && time' :appDate='date' :time='time'></ev-snapshots-dialog>
                </el-dialog>
            </div>
        </div>
        <div class='no-data' v-else>暂无数据</div>
    </div>
</template>
<script>
import EvSnapshotsDialog from './evSnapshotsDialog'
import { queryWorkflow } from '@/api/appeal/appeal.js'
import { formatterRes } from '@/utils/moment.js'

export default {
    data() {
        return {
            formatterRes,
            viewSnapshots: false,
            ids: [],
            titles: [],
            time: ''
        }
    },
    props: ['cardList', 'date'],
    components: {
        EvSnapshotsDialog
    },
    methods: {
        lookQuickData(item) {
            this.time = item.recommend.time;
            this.date=item.recommend&&item.recommend.date ;
            this.viewSnapshots = true;
        },
        formatterStr2(str) {
            if (str) {
                return str.substring(0, 2) + ':' + str.substring(2, 4)
            }
        },
        queryFlow(ids) {
            let postParams = {
                criteria: {
                    id: ids
                }
            }
            queryWorkflow({ postParams }).then(res => {
                this.titles = res.content
            })
        },
        getAppealId() {
            this.cardList.forEach(el => {
                if (!el.recommend.isExecuted) {
                    this.ids.push(el.recommend.appealId)
                }
            })
            this.queryFlow(this.ids)
        }
    },
    mounted() {
        this.getAppealId()
    },
    watch: {
        cardList: {
            handler(n){
                this.cardList=n;
                this.getAppealId()
            },
            deep:true
        },
        date(n){
            this.date=n;
        }
    }
}
</script>
<style lang="scss" scoped>
// 执行率
.count-card-box {
    display: flex;
    flex-wrap: wrap;
    .count-card {
        width: 530px;
        // min-width: 436px;
        // max-width: 510px;
        margin-right: 6px;
        margin-top: 16px;
        padding: 16px 20px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 12px -2px rgba(31, 36, 41, 0.1);
        border-radius: 4px;
        border: 1px solid rgba(228, 230, 231, 1);
        .card-div1,
        .card-div2,
        .card-div3,
        .card-div4,
        .card-div5 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            // width: 480px;
        }
        .card-div1 {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(31, 36, 41, 1);
            line-height: 22px;
            margin-bottom: 14px;
        }
        .card-div2,
        .card-div3 {
            height: 40px;
            background: rgba(245, 246, 247, 1);
            border-radius: 1px;
            padding-left: 16px;
            padding-right: 34px;
            span:nth-of-type(1) {
                height: 19px;
                font-size: 14px;
                color: rgba(31, 36, 41, 1);
                line-height: 19px;
                margin-right: 36px;
            }
            span:nth-of-type(2) {
                height: 18px;
                font-size: 12px;
                color: rgba(141, 147, 153, 1);
                line-height: 22px;
                margin-right: 8px;
            }
            span:nth-of-type(3) {
                height: 19px;
                font-size: 14px;
                color: rgba(31, 36, 41, 1);
                line-height: 19px;
                margin-right: 36px;
            }
            span:nth-of-type(4) {
                height: 18px;
                font-size: 12px;
                color: rgba(141, 147, 153, 1);
                line-height: 22px;
                margin-right: 8px;
            }
            span:nth-of-type(5) {
                height: 21px;
                font-size: 16px;
                color: rgba(31, 36, 41, 1);
                line-height: 21px;
            }
        }
        .card-div2 {
            margin-bottom: 4px;
        }
        .card-div3 {
            margin-bottom: 16px;
        }
        .card-div4 {
            // height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(100, 108, 115, 1);
            line-height: 22px;
            margin-bottom: 26px;
        }
        .recommend-b {
            width: 50px;
            display: inline-block;
            text-align: center;
        }

        .card-div5 {
            span:nth-of-type(1) {
                justify-content: flex-start;
                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 4px;
                    vertical-align: middle;
                }
                padding: 0 12px;
                display: flex;
                align-items: center;
                height: 22px;
                line-height: 22px;
                border-radius: 12px;
                font-size: 14px;
                font-family: MicrosoftYaHeiSemibold;
            }
            span:last-child {
                cursor: pointer;
                height: 22px;
                font-size: 14px;
                color: rgba(31, 35, 41, 1);
                line-height: 22px;
                background: rgba(255, 255, 255, 1);
                border-radius: 4px;
                border: 1px solid rgba(195, 199, 203, 1);
                padding: 0 12px;
            }
        }
        .card-div6 {
            color: rgba(245, 78, 69, 1);
            background: rgba(253, 227, 226, 1);
        }
        .card-div7 {
            color: rgba(52, 199, 36, 1);
            background: rgba(217, 245, 214, 1);
        }
        .card-div8 {
            border-radius: 12px;
            color: rgba(0, 145, 255, 1);
            background: rgba(225, 242, 255, 1);
        }
    }
}
.no-data {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(100, 108, 115, 1);
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
</style>
<style lang="scss">
.view-dialog {
    .el-dialog__header {
        padding: 16px 28px 0 32px;
        .el-dialog__title {
            height: 24px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(31, 36, 41, 1);
            line-height: 24px;
        }
    }
    .el-dialog__body {
        padding-top: 0;
    }
}
</style>