sagacloud
/
sagacloud-cwc-pages


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
							

<template>

    <div>

        <Head :headText='headText'></Head>

        <div class='nav-right'>

            <el-radio-group v-model='radio'>

                <el-radio label='1' @change='radioChange'>近30天</el-radio>

                <el-radio label='2' @change='radioChange' style='margin-right:10px;'>自定义</el-radio>

            </el-radio-group>

            <div class='count-top-right'>

                <span class='arrow-left' @click='daterangeLeft'></span>

                <span class='arrow-line arrow-line1' @click='daterangeLeft'></span>

                <el-date-picker

                    v-model='pickerVal2'

                    type='daterange'

                    format='yyyy.MM.dd'

                    value-format='timestamp'

                    range-separator='至'

                    start-placeholder='开始日期'

                    end-placeholder='结束日期'

                    :picker-options='pickerOptions'

                    @change='query(1)'

                ></el-date-picker>

                <span class='arrow-line' @click='daterangeRight'></span>

                <span class='arrow-right' @click='daterangeRight'></span>

            </div>

        </div>

        <div class='evaluateContainer'>

            <div class='ev-content'>

                <div class='ev-cont-div'>

                    <p class='ev-top Micbold'>室内温度满足率</p>

                    <div class='ev-bottom'>

                        <div class='ev-bottom-left'>

                            <div id='rate1' style='width:100%;height:100%;'></div>

                        </div>

                        <div class='ev-bottom-right MicrYaHei'>

                            <p></p>

                            <p>

                                <span>超限程度</span>

                                <span>{{tindoorOverrunDegree}}</span>

                                <span>°C</span>

                            </p>

                        </div>

                    </div>

                </div>

                <div class='ev-cont-div'>

                    <p class='ev-top'>节能率</p>

                    <div class='ev-bottom'>

                        <div class='ev-bottom-left'>

                            <div id='rate2' style='width:100%;height:100%;'></div>

                        </div>

                        <div class='ev-bottom-right'>

                            <p>

                                <span>节能量</span>

                                <span>{{energySaving}}</span>

                                <span>kWh</span>

                            </p>

                        </div>

                    </div>

                </div>

                <div class='ev-cont-div'>

                    <p class='ev-top'>策略执行率</p>

                    <div class='ev-bottom'>

                        <div class='ev-bottom-left'>

                            <div id='rate3' style='width:100%;height:100%;'></div>

                        </div>

                        <div class='ev-bottom-right'>

                            <p>

                                <span>执行数量</span>

                                <span>{{isExecutedNum}}</span>

                                <span>条</span>

                            </p>

                            <p>

                                <span>已发策略</span>

                                <span>{{allReceivedNum}}</span>

                                <span>条</span>

                            </p>

                        </div>

                    </div>

                </div>

            </div>

            <div class='ev-footer'>

                <ev-indoor-temperature v-if='energyDataList.length>=0' :energyDataList='energyDataList'></ev-indoor-temperature>

            </div>

        </div>

    </div>

</template>

<script>

import echarts from 'echarts'

import Head from '../main/index'

import EvIndoorTemperature from './evIndoorTemperature'

import { runDataQury } from '@/api/evaluate/evaluate.js'

import moment from 'moment'

import { timestamp2String } from '@/utils/helper.js'

import { mapGetters } from 'vuex'

export default {

    data() {

        return {

            headText: '运行评价',

            pickerOptions: {

                onPick: ({ maxDate, minDate }) => {

                    this.pickerMinDate = minDate.getTime()

                    if (maxDate) {

                        this.pickerMinDate = ''

                    }

                },

                disabledDate(time) {

                    return time.getTime() > Date.now() - 8.64e7

                }

            },

            date: '2',

            pickerVal2: [new Date().getTime() - 24 * 60 * 60 * 1000 * 30, new Date().getTime() - 24 * 60 * 60 * 1000],

            radio: '1',

            tindoorFillRate: '', //室内温度满足率

            energySavingRate: '', //节能率

            chillerExecuteRate: '', //略执行率

            energySaving: '', //节能量

            isExecutedNum: '', //已执行数量

            allReceivedNum: '', //共收到数量

            tindoorOverrunDegree: '', //超限程度

            energyDataList: [] //图标数据

        }

    },

    components: {

        Head,

        EvIndoorTemperature

    },

    mounted() {

        this.query(0)

    },

    computed: {

        ...mapGetters(['projects', 'projectId'])

    },

    methods: {

        rate(pieData, box, colors) {

            const myChart = echarts.init(document.querySelector(box))

            const data = pieData

            const option = {

                grid: {

                    top: 5,

                    bottom: 5

                },

                color: colors,

                series: [

                    {

                        name: 'valueOfMarket',

                        type: 'pie',

                        center: ['50%', '50%'],

                        radius: ['60%', '70%'],

                        avoidLabelOverlap: false,

                        hoverAnimation: false,

                        label: {

                            normal: {

                                show: true,

                                position: 'center',

                                color: '#000000',

                                fontSize: 20,

                                lineHeight: 0,

                                formatter: '{b}\n{c}%'

                            }

                        },

                        data: [

                            {

                                value: data,

                                label: {

                                    normal: {

                                        show: true

                                    }

                                }

                            },

                            {

                                value: 100 - data,

                                name: '',

                                label: {

                                    normal: {

                                        show: false

                                    }

                                }

                            }

                        ]

                    }

                ]

            }

            myChart.setOption(option)

        },

        formatter(date) {

            return moment.unix(date / 1000).format('YYYYMMDD')

        },

        radioChange(val) {

            if (this.radio == '1') {

                this.pickerVal2 = [new Date().getTime() - 24 * 60 * 60 * 1000 * 30, new Date().getTime() - 24 * 60 * 60 * 1000]

            }

            this.query(0)

        },

        query(type) {

            if (type == '1') {

                this.radio = '2'

            }

            this.runDataQuryArr = []

            let getParams = {

                begin: timestamp2String(this.pickerVal2[0]).slice(0, 8),

                end: timestamp2String(this.pickerVal2[1]).slice(0, 8)

            }

            runDataQury(null, { getParams }).then(res => {

                if (res.result == 'success') {

                    this.tindoorFillRate = res.tindoorFillRate != undefined && res.tindoorFillRate != -9999 ? res.tindoorFillRate.toFixed(1) : 0 //室内温度满足率

                    console.log('室内温度满足率', this.tindoorFillRate)

                    this.energySavingRate = res.energySavingRate != undefined && res.energySavingRate != -9999 ? res.energySavingRate.toFixed(1) : 0 //节能率

                    console.log('节能率', this.energySavingRate)

                    this.chillerExecuteRate =

                        res.chillerExecuteRate != undefined && res.chillerExecuteRate != -9999 ? res.chillerExecuteRate.toFixed(1) : 0 //略执行率

                    console.log('略执行率', this.chillerExecuteRate)

                    this.energySaving = res.energySaving != undefined && res.energySaving != -9999 ? res.energySaving.toFixed(0) : 0 //节能量

                    console.log('节能量', this.energySaving)

                    this.isExecutedNum = res.isExecutedNum //已执行数量

                    console.log('已执行数量', this.isExecutedNum)

                    this.allReceivedNum = res.allReceivedNum //共收到数量

                    console.log('共收到数量', this.allReceivedNum)

                    this.tindoorOverrunDegree =

                        res.tindoorOverrunDegree != undefined && res.tindoorOverrunDegree != -9999 ? res.tindoorOverrunDegree.toFixed(1) : 0 //超限程度

                    console.log('超限程度', this.tindoorOverrunDegree)

                    this.energyDataList = res.dataList ? res.dataList : []

                    this.queryRate()

                }

            })

        },

        queryRate() {

            if (this.tindoorFillRate) {

                this.rate(this.tindoorFillRate, '#rate1', ['#0091FF', '#E1F2FF'])

            }

            if (this.energySavingRate) {

                this.rate(this.energySavingRate, '#rate2', ['#FFBA6B', '#FEE9D2'])

            }

            if (this.chillerExecuteRate) {

                this.rate(this.chillerExecuteRate, '#rate3', ['#00D6B9', '#D5F6F2'])

            }

        },

        daterangeLeft() {

            if (this.pickerVal2.length > 0) {

                this.pickerVal2[0] = this.pickerVal2[0] - 24 * 60 * 60 * 1000

                this.pickerVal2[1] = this.pickerVal2[1] - 24 * 60 * 60 * 1000

                this.pickerVal2 = [this.pickerVal2[0], this.pickerVal2[1]]

                this.query(0)

            }

        },

        daterangeRight() {

            if (this.pickerVal2.length > 0) {

                let end = this.formatter(new Date().getTime() - 24 * 60 * 60 * 1000)

                if (this.formatter(this.pickerVal2[1]) == end) {

                    this.pickerVal2[1] = new Date().getTime() - 24 * 60 * 60 * 1000

                } else {

                    this.pickerVal2[0] = this.pickerVal2[0] + 24 * 60 * 60 * 1000

                    this.pickerVal2[1] = this.pickerVal2[1] + 24 * 60 * 60 * 1000

                }

                this.pickerVal2 = [this.pickerVal2[0], this.pickerVal2[1]]

                this.query(0)

            }

        }

    }

}

</script>

<style lang="scss" scoped>

.nav-right {

    height: 48px;

    position: fixed;

    right: 24px;

    top: 53px;

    z-index: 1;

    display: flex;

    align-items: center;

    .count-top-right {

        width: 264px;

        height: 32px;

        background: rgba(255, 255, 255, 1);

        border-radius: 4px;

        border: 1px solid rgba(195, 198, 203, 1);

        display: flex;

        align-items: center;

        .arrow-left {

            width: 16px;

            height: 16px;

            background: url('../../assets/left.png');

            margin-right: 5px;

            margin-left: 7px;

            cursor: pointer;

        }

        .arrow-right {

            margin-right: 7px;

            margin-left: 5px;

            width: 16px;

            height: 16px;

            background: url('../../assets/right.png');

            cursor: pointer;

        }

        .arrow-line {

            display: inline-block;

            width: 2px;

            height: 16px;

            background: rgba(228, 229, 231, 1);

        }

        .arrow-line1 {

            margin-right: 3.5px;

        }

    }

}

.evaluateContainer {

    padding: 0 24px;

    background: #fff;

    .ev-content {

        margin-top: 20px;

        display: flex;

        .ev-cont-div {

            padding: 16px 20px;

            background: rgba(248, 249, 250, 1);

            border-radius: 6px;

            border: 1px solid rgba(238, 238, 238, 1);

            margin-right: 12px;

            flex: 1;

            .ev-top {

                margin: 0;

                height: 24px;

                font-size: 16px;

                color: rgba(31, 36, 41, 1);

                line-height: 21px;

            }

            .ev-bottom {

                display: flex;

                align-items: center;


                p {

                    margin: 0;

                }

                .ev-bottom-left {

                    width: 124px;

                    height: 124px;

                    justify-content: flex-start;

                    margin: 0;

                }

                .ev-bottom-right {

                    p {

                        font-size: 14px;

                        color: rgba(100, 108, 115, 1);

                        line-height: 19px;

                        span {

                            display: inline-block;

                        }

                        span:nth-of-type(1) {

                            margin-right: 12px;

                        }

                        span:nth-of-type(2) {

                            font-size: 18px;

                            font-family: Persagy;

                            color: rgba(32, 35, 42, 1);

                            line-height: 22px;

                        }

                        span:nth-of-type(3) {

                            font-size: 10px;

                        }

                    }

                    p:nth-of-type(1) {

                        margin-bottom: 10px;

                    }

                }

            }

        }

    }

    .ev-footer {

        width: 100%;

        height: 430px;

        margin-top: 36px;

    }

}

</style>

<style lang="scss">

.count-top-right {

    .count-top-right .el-input__inner {

        margin: 7px 0;

    }

    .el-input__inner {

        width: 210px;

        margin: 7px 6px;

        height: 22px;

        line-height: 22px;

        font-size: 12px;

        border: none;

    }

    .el-input__icon {

        display: none;

    }

    .el-range-editor.el-input__inner {

        padding: 3px 0;

    }

    .el-input--prefix .el-input__inner {

        padding-left: 5px;

    }

    .el-input--suffix .el-input__inner {

        padding-right: 5px;

    }

    .el-date-editor .el-range-input {

        width: 65%;

    }

    .el-date-editor .el-range-separator {

        line-height: 18px;

        color: #8d9399;

    }

    .el-date-editor .el-range-input {

        color: #1f2329;

    }

    .el-date-editor .el-range-separator {

        padding: 0 15px;

    }

    .el-radio__label {

        height: 22px;

        font-size: 14px;

        font-family: MicrosoftYaHei;

        color: rgba(31, 36, 41, 1);

        line-height: 19px;

        padding-left: 5px;

    }

    .el-radio {

        margin-right: 20px !important;

    }

}

</style>