baozhida-building-system/src/views/system/entranceguard/passable.vue

<template>
    <div class="person_box">
        <dv-border-box-1>
            <div class="box_monitoring">
                <div class="flex_spection box_tion_zx">
                    <div class="line_blue">
                        <div class="blue_dot"></div>
                    </div>
                    <div class="monit_title">应到岗</div>
                    <span class="monit_num">{{ resultData.Fault || 0 }}人</span>
                </div>
                <div class="camera">
                    <div class="entry-box">
                        <div class="entry-box-item">
                            <div class="item-center-line"></div>
                            <div class="item-center-pie"></div>
                        </div>
                    </div>
                    <div class="img_camera">
                        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
                    </div>
                </div>
                <div class="flex_spection box_tion_lx">
                    <div class="line_green">
                        <div class="green_dot"></div>
                    </div>
                    <div class="monit_title">实际到岗</div>
                    <span class="monit_num">{{ resultData.Offline || 0 }}人</span>
                </div>
            </div>
        </dv-border-box-1>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const chartDistrict = ref(null);
let chartDom = null;
const initAccess = (valueNum) => {
    if (!chartDom) {
        chartDom = echarts.init(chartDistrict.value);
    }
    let attendanceRate = valueNum
    let option = {
        graphic: {
            elements: [
                {
                    zlevel: 101,
                    type: 'rect',
                    left: 'center',
                    top: 396,
                    shape: {
                        x: 0, // 矩形的 x 坐标
                        y: 0, // 矩形的 y 坐标
                        width: 22, // 矩形的宽度
                        height: 3, // 矩形的高度
                    },
                    style: {
                        fill: '#005AFF', // 设置背景颜色为半透明白色
                        stroke: 'none',
                    },
                },
                {
                    zlevel: 101,
                    type: 'text',
                    left: 'center',
                    top: 110,
                    style: {
                        text: '出勤率',
                        textAlign: 'center',
                        fill: '#75AFFC',
                        fontSize: 12,
                    },
                },
            ],
        },
        series: [
            {
                title: {
                    show: false,
                    offsetCenter: [0, '10%'],
                    padding: [0, 0],
                    fontSize: 12,
                    color: '#E9F7FF',
                },
                zlevel: 100,
                name: '外部',
                type: 'gauge',
                radius: '95%',
                center: ['50%', '50%'],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#030C1D',
                        },
                        {
                            offset: 0.5,
                            color: '#005AFF',
                        },
                        {
                            offset: 1,
                            color: '#005AFF',
                        },
                    ]),
                },
                progress: {
                    show: true,
                    width: 5,
                    roundCap: false,
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        type: 'dashed',
                        color: [[1, '#a3b3d0']],
                    },
                },
                sartAngle: 225,
                endAngle: -45,
                clockwise: true,
                min: 0,
                max: 100,
                splitNumber: 10,
                axisLabel: {
                    textStyle: {
                        color: '#75AFFC',
                        fontSize: 12,
                    },
                },
                pointer: {
                    show: false,
                    icon: 'triangle',
                    width: '40%', //指针的宽度
                    length: '170%', //指针长度，按照半圆半径的百分比
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: [0, '-3%'],
                    fontSize: 20,
                    color: '#E9F7FF',
                    textStyle: {
                        fontFamily: 'MyFont2',
                    },
                    formatter: function (val) {
                        let str = val + '{a|%}'
                        return str
                    },
                    rich: {
                        a: {
                            color: '#E9F7FF',
                            fontSize: 10,
                            padding: [10, 0, 0, 0],
                        },
                    },
                },
                markPoint: {
                    symbol: 'circle',
                    symbolSize: 0,
                    data: [
                        {
                            x: 'center',
                            y: '50%',
                            itemStyle: {
                                color: ' rgba(23,39,90,0.54)', // 指针颜色，默认(auto)取数值所在的区间的颜色
                                borderWidth: 1, // 描边线宽,默认 0。为 0 时无描边。
                                borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                                borderColor: '#3375E8', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                                shadowBlur: 5, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                shadowColor: '#08398b',
                                opacity: 1,
                            },
                        },
                    ],
                },
                data: [
                    {
                        name: '完成率',
                        value: attendanceRate,
                    },
                ],
            },
            {
                name: '内部刻度',
                type: 'gauge',
                backgroundColor: '#071d3f',
                center: ['50%', '50%'],
                itemStyle: {
                    shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: '#08398b',
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#0548c3',
                        },
                        {
                            offset: 1,
                            color: '#005afe',
                        },
                    ]),
                },
                progress: {
                    show: true,
                    width: 2,
                },
                radius: '70%',
                axisTick: {
                    //一个一个的小刻度
                    show: false,
                },
                axisLabel: {
                    //周围刻度线的数字
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                detail: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                // 指针
                pointer: {
                    icon: 'triangle',
                    width: '90%', //指针的宽度
                    length: '66%', //指针长度，按照半圆半径的百分比
                },
                data: [
                    {
                        name: '',
                        value: attendanceRate,
                    },
                ],
            },
            {
                name: '内部圆圈',
                type: 'gauge',
                center: ['50%', '50%'],
                itemStyle: {
                    shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: '#08398b',
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#061d3e',
                        },
                        {
                            offset: 0.5,
                            color: '#073b97',
                        },
                    ]),
                },
                progress: {
                    show: true,
                    width: 2,
                },
                // 指针圆
                radius: '36%',
                axisTick: {
                    //一个一个的小刻度
                    show: false,
                },
                axisLabel: {
                    //周围刻度线的数字
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                detail: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: [
                    {
                        name: '',
                        value: 100,
                    },
                ],
            },
            {
                name: '遮罩',
                tooltip: {
                    show: false,
                },
                type: 'pie',
                radius: '36%',
                center: ['50%', '50%'], // 默认全局居中
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        color: '#071d3f',
                    },
                    emphasis: {
                        color: '#071d3f',
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                animation: false,
                data: [1.9],
            },
        ],
    };
    chartDom.setOption(option)
};

watch(() => props.resultData, (newVal) => {
    if (chartDom) {
        initAccess(newVal.Abnormal)
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    initAccess(0)
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    // padding: 0px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-right: 10px;
}

.box_monitoring {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 20px;
}

.line_blue {
    position: relative;
    height: 5px;
    width: 70%;
    background-color: rgba(5, 125, 230, .5);
    margin-bottom: 10px;
}

.blue_dot {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 20px;
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    background-color: rgba(5, 125, 230, 1);
}

.line_green {
    position: relative;
    height: 5px;
    width: 70%;
    background-color: rgba(5, 227, 227, .5);
    margin-bottom: 10px;
}

.green_dot {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 20px;
    border-left: 5px solid #000;
    border-right: 5px solid #000;
    background-color: rgba(5, 227, 227, 1);
}

.img_camera {
    position: absolute;
    width: 200px;
    height: 200px;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    border-radius: 50%;
    border: 1px solid rgb(15, 39, 66);
    // box-shadow: inset 0px 0px 20px 2px rgb(78, 207, 220);
}

.flex_spection {
    flex: 1;
}

.box_tion_zx {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box_tion_lx {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.camera {
    width: 240px;
    height: 100%;
    display: flex;
    position: relative;

    .entry-box {
        width: 100%;
        height: 100%;
        object-fit: fill;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .entry-box-item {
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background: radial-gradient(circle,
                rgba(51, 149, 233, 0) 100px,
                rgba(51, 149, 233, 0) 100px);

        .item-center-line {
            width: 240px;
            height: 240px;
            background-color: transparent;
            border-top: 3px solid rgb(22, 110, 191);
            border-bottom: 3px solid rgb(22, 110, 191);
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: calc(50% - 120px);
            left: calc(50% - 120px);
            animation: rotate 8s infinite linear;
        }

        .item-center-pie {
            width: 210px;
            height: 210px;
            background-color: transparent;
            border-top: 2px solid rgb(22, 110, 191);
            border-bottom: 2px solid rgb(22, 110, 191);
            border-radius: 50%;
            box-sizing: border-box;
            position: absolute;
            top: calc(50% - 105px);
            left: calc(50% - 105px);
            animation: rotate1 8s infinite linear;
        }
    }
}

/* 定义中间球体顺时针转动 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 定义中间圆逆时针转动 */
@keyframes rotate1 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

.monit_title {
    font-size: 16px;
    background-image: -webkit-linear-gradient(bottom, rgb(120, 173, 221), rgb(229, 232, 236));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 6px 0px;
}

.monit_num {
    font-size: 30px;
    font-weight: bold;
}
</style>