bw/src/views/bim/bimHome/components/RealInfoDialog.vue

<template>
    <div class="realInfoDialog">
        <div class="top-div">
            <div>
                <span class="name">名称:</span>
                <span class="text">{{ deviceInfo && deviceInfo.name }}</span>
            </div>
            <div>
                <span class="name">类型:</span>
                <span class="text">{{ deviceInfo && deviceInfo.type }}</span>
            </div>
            <div>
                <span class="name">状态:</span>
                <span class="text">{{ deviceInfo && deviceInfo.status }}</span>
            </div>

        </div>
        <div class="bottom-div">
            <div class="left-div">
                <div id="echartDiv"></div>
                <div class="span-div">健康度</div>
            </div>
            <div class="right-div">
                <div class="select-date">
                    <el-date-picker v-model="value" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
                        :default-time="defaultTime" />
                </div>
                <div class="time-line">
                    <el-timeline class="timeline">
                        <el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top"
                            :icon="activity.icon" :type="activity.type" :size="activity.size"
                            :class="{ 'isoodClass': index % 2 == 0 }">
                            <slot name="timestamp">
                                <div class="timestamp">
                                    <span class="time">{{ activity.time }}</span>
                                    <span class="time-stamp">{{ activity.timestamp }}</span>
                                </div>

                            </slot>
                            <el-card :style="{ 'background': activity.color }">
                                {{ activity.content }}
                            </el-card>

                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from "echarts";
import 'echarts-liquidfill/src/liquidFill.js';
import bimStore from '@/store/modules/bim';
import { MoreFilled, Warning } from '@element-plus/icons-vue';
const value = ref(["2023-11-30T16:00:00.000Z", "2023-12-31T15:59:59.000Z"])
const defaultTime = ref([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])
const data = reactive({
    activities: [
        {
            content: '设备完成巡检计划',
            time: '2023年',
            timestamp: '12月3日',
            color: '#87efd0e9',
            icon: MoreFilled,
            type: 'primary',
            size: 'large'
        },
        {
            content: '设备发生故障：电流过大',
            time: '2023年',
            timestamp: '12月5日',
            color: '#f28680',
            type: 'danger',
            icon: Warning,
            size: 'large'
        },
        {
            content: '设备保养周期剩余3天',
            time: '2023年',
            timestamp: '12月6日',
            color: '#6eebe3',
            icon: MoreFilled,
            type: 'primary',
            size: 'large'
        },
        {
            content: '设备完成巡检计划',
            time: '2023年',
            timestamp: '12月20日',
            color: '#87efd0e9',
            icon: MoreFilled,
            type: 'primary',
            size: 'large'
        },
        {
            content: '设备发生故障：电流过大',
            time: '2023年',
            timestamp: '12月23日',
            color: '#f28680',
            type: 'danger',
            icon: Warning,
            size: 'large'
        },
    ]
});
const { activities } = toRefs(data);

const deviceInfo = computed(() =>
    bimStore().activateDevice.info
);

onMounted(() => {
    nextTick(() => {
        getEchart();
    })
})


const getEchart = () => {
    var dom = document.getElementById('echartDiv');
    if (dom) {
        var myChart = echarts.init(dom);
        const series = [
            {
                type: 'liquidFill',
                shape: 'circle',
                radius: '80%',
                center: ['50%', '50%'],
                data: [0.6, 0.5, 0.4],
                // 球体配置
                outline: {
                    borderDistance: 0,
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#3dfff6',
                        shadowBlur: 20,
                        shadowColor: '#12786f'
                    }
                },
                color: ['rgba(50, 255, 238, .6)', 'rgba(154, 255, 247, .6)'],
                backgroundStyle: {
                    color: 'transparent',
                },

                label: {
                    show: true,
                    textStyle: {
                        color: '#12786f',
                        insideColor: '#12786f',
                        fontSize: 28
                    }
                },
                label: {
                    show: true,
                    textStyle: {
                        color: '#12786f',
                        insideColor: '#12786f',
                        fontSize: 40
                    },
                    formatter: params => {
                        return `${(params.value * 100).toFixed(0)}%`
                    },
                    rich: {
                        a: {
                            fontSize: 24,
                        }
                    }
                }
            },
        ]
        const option = { series, backgroundColor: '#00174b' }
        option && myChart.setOption(option);
    }
}

</script>
<style lang="scss" scoped>
.realInfoDialog {
    height: 600px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    color:#fff;

    .top-div {
        width: 100%;
        height: 25%;
        border: 1px solid #2E6099;
        display: flex;
        flex-direction: column;
        align-items: center;

        >div {
            display: flex;
            line-height: 48px;
            width: 240px;
            justify-content: space-between;
        }

        .name {
            width: 45%;
            text-align: right;
        }

        .text {
            width: 45%;
            text-align: left;
        }
    }

    .bottom-div {
        width: 100%;
        height: 72%;
        display: flex;
        justify-content: space-between;

        .left-div {
            width: 20%;
            height: 100%;
            border: 1px solid #2E6099;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            #echartDiv {
                height: 60%;
                width:95%;
            }
            .span-div {
                padding: 5px 25px;
                background: #2E6099;
                border-radius: 15px;
                color:#fff;
            }
        }

        .right-div {
            width: 79%;
            height: 100%;
            border: 1px solid #2E6099;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            >div {
                padding: 10px;
            }

            .select-date {
                height: 10%;
                text-align: right;
            }

            .time-line {
                height: 88%;

                .timeline {
                    display: flex;
                    width: 95%;
                    margin: 150px auto;

                    .lineitem {
                        transform: translateX(50%);
                        width: 25%;
                    }
                    .timestamp {
                        color: #fff;;
                    }
                    :deep(.el-card) {
                        border: none;
                        margin-top:5px;
                    }
                    :deep(.el-card__body) {
                        color: #fff;
                    }
                }

                :deep(.el-timeline-item__tail) {
                    border-left: none;
                    border-top: 2px solid #e4e7ed;
                    width: 100%;
                    // position: absolute;
                    top: 6px;
                }

                :deep(.el-timeline-item__wrapper) {
                    padding-left: 0;
                    // position: absolute;
                    top: 20px;
                    transform: translateX(-50%);
                    text-align: center;
                    width: 150px;
                    margin: 0 10px;
                }

                .isoodClass {
                    :deep(.el-timeline-item__wrapper) {
                        top: -120px !important;
                    }
                }


                :deep(.el-timeline-item__timestamp) {
                    font-size: 14px;
                }

            }
        }
    }

}</style>