screenFront/src/views/Exhibition/Germany/components/TopRBox.vue

<template>
    <div class="r-box-container">
        <div class="pos-label">
            <div class="box-item">{{ tLang('messages', 'RackNum') }}：<div>{{ props.data?.label }}</div>
            </div>
        </div>
        <div class="box-item pos1">
            {{ tLang('messages', 'DevStatus') }}:
            <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
        </div>
        <div class="icon-box-item pos2">
            <div class="icon-div">
                <div class="iconfont icon-caijian"></div>

                <div>{{ props.data?.in3Count + tLang('messages','次') }}</div>
            </div>
            <span>{{ tLang('messages', '剪线次数') }}</span>
        </div>
        <div class="icon-box-item pos3">
            <div class="icon-div">
                <div class="iconfont icon-jizhenzhenshu"></div>
                <div>{{ props.data?.in4Count + tLang('messages','次') }}</div>
            </div>
            <span>{{ tLang('messages', '针数') }}</span>
        </div>
        <div class="icon-box-item pos4">
            <div class="icon-div">
                <div class="iconfont icon-zidongtaiyajiao"></div>
                <div>{{ props.data?.in2Count + tLang('messages','次') }}</div>
            </div>
            <span>{{ tLang('messages', '压脚次数') }}</span>
        </div>
        <v-chart class="chart-class" :option="gauge_option"></v-chart>
        <div class="image-div">
            <el-image :src="gyfrjImg" fit="contain"></el-image>
        </div>
        <div class="fill-box">
            <v-chart class="chart-class-fill" :option="fill_option"></v-chart>
            <data value="fill-title">{{ tLang('messages','能耗') }}(kW·h)</data>
        </div>

    </div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
import 'echarts-liquidfill'
const { proxy } = getCurrentInstance()

let gyfrjImg = require('./../images/gyfrj.png');
const props = defineProps<{
    data: any,
}>()

let statusObj = {
    0:'red',
    1:'yello',
    2:'green',
    3:'yello'
}
let gauge_option = ref({
    series: [
        {
            type: 'gauge',
            radius: '100%',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 3000,
            splitNumber: 8,
            itemStyle: {
                color: '#58D9F9',
                shadowColor: 'rgba(0,138,255,0.45)',
                shadowBlur: 5,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            },
            progress: {
                show: true,
                roundCap: true,
                width: 8
            },
            pointer: {
                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                length: '60%',
                width: 5,
                offsetCenter: [0, '5%']
            },
            axisLine: {
                roundCap: true,
                lineStyle: {
                    width: 8
                }
            },
            axisTick: {
                splitNumber: 2,
                lineStyle: {
                    width: 1,
                    color: '#999'
                }
            },
            splitLine: {
                length: 1,
                lineStyle: {
                    width: 2,
                    color: '#999'
                }
            },
            axisLabel: {
                distance: 20,
                color: '#999',
                fontSize: 8
            },
            title: {
                show: false
            },
            detail: {
                backgroundColor: '#fff',
                borderColor: '#999',
                borderWidth: 2,
                width: '80%',
                lineHeight: 24,
                height: 20,
                borderRadius: 8,
                offsetCenter: [0, '35%'],
                valueAnimation: true,
                formatter: function (value) {
                    return '{value|' + value.toFixed(0) + '}{unit|rpm}';
                },
                rich: {
                    value: {
                        fontSize: 14,
                        fontWeight: 'bolder',
                        color: '#777'
                    },
                    unit: {
                        fontSize: 12,
                        color: '#999',
                        padding: [0, 0, -1, 1]
                    }
                }
            },
            data: [
                {
                    value: 1000
                }
            ]
        }
    ]
})
let fill_option = ref({
    series: [{
        type: 'liquidFill',
        radius: '80%', //水球大小
        shape: 'rect',
        center: ['50%', '50%'],
        waveAnimation: true,
        color: [
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#138FE2',
                    },
                    {
                        offset: 1,
                        color: '#126ABC',
                    },
                ],
                globalCoord: false,
            },
        ],
        data: [0.7, 0.7], // data个数代表波浪数
        amplitude: 10, //振幅
        backgroundStyle: {
            borderWidth: 2, //边框大小
            borderColor: 'rgba(17, 94, 176, 0.8)',//边框颜色
            color: 'rgba(17, 94, 176, 0.4)',
        },
        label: {
            normal: {
                textStyle: {
                    fontSize: 24,
                    fontWeight: 'bold',
                    color: '#fff',
                },
                formatter: function (params) {
                    
                    return props.data?.consumption;
                }
            },

        },
        outline: {
            borderDistance: 0,
            itemStyle: {
                borderWidth: 4,
                borderColor: 'transparent',
            },
        },
    }],
})
</script>

<style lang="scss" scoped>
@import url("@/assets/css/iconfont/germany/iconfont.css");

.r-box-container {
    width: 100%;
    height: 100%;
    display: flex;

    .pos-label {
        position: absolute;
        top: 30px;
        right: 26px;
        width: 50%;
        height: 30px;

        .box-item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 10px;
            box-sizing: border-box;

            div {
                margin-left: 20px;
            }
        }
    }

    .box-item {
        position: absolute;
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        div {
            margin-left: 20px;
        }

        .icon-div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
    }

    .icon-box-item {
        position: absolute;
        width: 50%;

        div {
            margin-left: 20px;
        }

        span {
            text-align: center;
        }

        .icon-div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
    }

    .chart-class {
        position: absolute;
        right: 12px;
        top: 60px;
        width: 364px;
        height: 250px;
    }

    .fill-box {
        position: absolute;
        right: 0px;
        bottom: 13px;
        width: 180px;
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .chart-class-fill {
            width: 180px;
            height: 220px;
        }
        .fill-title {

        }
    }


    .image-div {
        position: absolute;
        right: 157px;
        top: 242px;
        width: 216px;
        height: 138px;
    }

    .pos1 {
        top: 100px;
        left: 24px;
    }

    .pos2 {
        top: 140px;
        left: 0;
    }

    .pos3 {
        top: 312px;
        left: -33px;
    }

    .pos4 {
        bottom: 14px;
        left: 163px;
    }

    .iconfont {
        font-size: 100px;
        color: #7BFEB1;
    }
}
</style>