mky-vent-base/src/views/vent/home/fireHome/components/workJc.vue

<template>
    <div class="workJc">
        <div class="echart-workJc" :style="{height:heightT}">
            <div class="workJc-l">
                <div class="echart-yh"></div>
                <div class="echart-line"></div>
                <div class="echart-boxs" ref="ring"></div>
            </div>
            <div class="workJc-r">
                <div class="fx-box" v-for="(item, index) in fxLenged" :key="index">
                    <div class="fx-label">
                        <div class="fx-label-l">
                            <div class="bg-pie"></div>
                        </div>
                        <div class="fx-label-r">{{ item.label }}</div>
                    </div>
                    <div class="fx-val">{{ item.val }}</div>
                </div>
            </div>

        </div>
        <div class="card-workJc" :style="{height:heightB}">
            <div class="scroll-card">
                <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
                    <div class="card-l-label">{{ ite.title }}</div>
                    <div class="card-l-val">{{ ite.val }}</div>

                    <div class="card-r-label">{{ ite.label }}</div>
                    <div class="card-r-content">
                        <span>{{ `${ite.title1} : ` }}</span>
                        <span>{{ `${ite.val1}°C` }}</span>
                    </div>
                    <div class="card-r-content1">
                        <span>{{ `${ite.title2} : ` }}</span>
                        <span>{{ ite.val2 }}</span>
                    </div>


                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick,defineProps } from 'vue'
import * as echarts from 'echarts';

let props=defineProps({
    heightT:{
        type:String,
        default:'0%',
    },
    heightB:{
        type:String,
        default:'0%'
    }
})

//获取dom节点
let ring = ref()

let fxLenged = reactive([
    {
        label: '低风险',
        val: 1,
    },
    {
        label: '中风险',
        val: 2,
    },
    {
        label: '高风险',
        val: 3
    },
    {
        label: '报警',
        val: 4
    },
    {
        label: '正常',
        val: 5
    }
])

let cardList = reactive([
    {
        title: '风险',
        val: '低',
        label: '81202综放工作面',
        title1: '温度最大值',
        val1: '30',
        title2: '预测风险区域',
        val2: '散热带，氧化带，窒息带'
    },
    {
        title: '风险',
        val: '中',
        label: '81202综放工作面',
        title1: '温度最大值',
        val1: '30',
        title2: '预测风险区域',
        val2: '散热带，氧化带，窒息带'
    },
    {
        title: '风险',
        val: '低',
        label: '81202综放工作面',
        title1: '温度最大值',
        val1: '30',
        title2: '预测风险区域',
        val2: '散热带，氧化带，窒息带'
    },
    {
        title: '风险',
        val: '低',
        label: '81202综放工作面',
        title1: '温度最大值',
        val1: '30',
        title2: '预测风险区域',
        val2: '散热带，氧化带，窒息带'
    },
    {
        title: '风险',
        val: '中',
        label: '81202综放工作面',
        title1: '温度最大值',
        val1: '30',
        title2: '预测风险区域',
        val2: '散热带，氧化带，窒息带'
    },
    {
        title: '风险',
        val: '高',
        label: '81202综放工作面',
        title1: '温度最大值',
        val1: '30',
        title2: '预测风险区域',
        val2: '散热带，氧化带，窒息带'
    },
])

function getOption() {
    nextTick(() => {
        let color = [
            '#0CD2E6',
            '#3751E6',
            '#FFC722',
            '#886EFF',
            '#008DEC',
            '#114C90',
            '#00BFA5',
        ];

        let seriesData = [
            { "name": "低风险", "value": 30 },
            { "name": "中风险", "value": 10 },
            { "name": "高风险", "value": 15 },
            { "name": "报警", "value": 23 },
            { "name": "正常", "value": 10 },
        ]


        let myChart = echarts.init(ring.value);
        let option = {
            color: color,
            grid: {
                top: '15%',
                left: 0,
                right: '1%',
                bottom: 5,
                containLabel: true,
            },

            series: [{
                name: '风险占比',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['65%', '85%'],
                label: {
                    normal: {
                        show: false,
                        position: 'center',
                        formatter: '{value|{c}}\n{label|{b}}',
                        rich: {
                            value: {
                                padding: 5,
                                align: 'center',
                                verticalAlign: 'middle',
                                fontSize: 16,
                            },
                            label: {
                                align: 'center',
                                verticalAlign: 'middle',
                                fontSize: 14,
                            },
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '10',
                        },
                    },
                },
                labelLine: {
                    show: false,
                    length: 0,
                    length2: 0,
                },
                data: seriesData,
            }],
        };
        myChart.setOption(option);
        window.onresize = function () {
            myChart.resize();
        };
    });
}

onMounted(() => {
    getOption()
})

</script>

<style lang="less" scoped>
@font-face {
    font-family: 'douyuFont';
    src: url('../../../../../assets/font/douyuFont.otf');
}

.workJc {
    width: 100%;
    height: 100%;

    .echart-workJc {
        width: 100%;
        // height: 45%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .workJc-l {
            position: relative;
            width: 180px;
            height: 100%;

            .echart-yh {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100px;
                height: 100px;
                background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
                background-size: 100% 100%;
            }

            .echart-line {
                position: absolute;
                top: 8%;
                left: 15%;
                width: 125px;
                height: 125px;
                background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
                background-size: 100% 100%;
                animation: rotationLine 10s linear infinite;
            }

            @keyframes rotationLine {
                0% {
                    transform: rotate(0deg);
                }

                100% {
                    transform: rotate(360deg);
                }
            }

            .echart-boxs {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 90px;
                height: 90px;
            }
        }

        .workJc-r {
            width: calc(100% - 180px);
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .fx-box {
                height: 80px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                color: #a1b6c2;

                .fx-label {
                    height: 28px;
                    display: flex;
                    align-items: center;

                    .fx-label-l {
                        position: relative;
                        width: 14px;
                        height: 14px;
                        padding: 1px;
                        box-sizing: border-box;
                        border: 1px solid #1fb3f7;
                        margin-right: 5px;

                        .bg-pie {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                            background-color: #1fb3f7;
                        }
                    }
                }

                .fx-val {
                    font-family: 'douyuFont';
                    font-size: 18px;
                }
            }
        }


    }

    .card-workJc {
        position: relative;
        // height: 55%;
        overflow: hidden;

        // overflow-y: auto;
        .scroll-card {
            width: 100%;
            position: absolute;

            animation: scrollCards 12s linear infinite;

            @keyframes scrollCards {
                0% {
                    left: 0;
                    top: 0%;
                }

                50% {
                    left: 0;
                    top: -50%;
                }

                100% {
                    left: 0;
                    top: -100%;
                }
            }

            .card-box {
                position: relative;
                width: 100%;
                height: 100px;
                background: url('../../../../../assets/images/fire/firehome/work-jc.png') no-repeat center;
                background-size: 100% 100%;

                .card-l-label {
                    position: absolute;
                    left: 6%;
                    top: 8%;
                    color: #a1b6c2;
                    letter-spacing: 2px;
                }

                .card-l-val {
                    position: absolute;
                    left: 7%;
                    top: 50%;
                    color: #a3d5e5;
                    font-size: 18px;
                }

                .card-r-label {
                    position: absolute;
                    left: 20%;
                    top: 4%;
                    font-size: 16px;
                    border-bottom: 1px solid #d0d2d3;
                    color: #d0d2d3;
                }

                .card-r-content {
                    position: absolute;
                    left: 20%;
                    top: 42%;
                    color: #9da5aa;
                }

                .card-r-content1 {
                    position: absolute;
                    left: 20%;
                    top: 68%;
                    color: #9da5aa;
                }
            }
        }


    }
}</style>