screenFront/src/views/MicroExhibition/components/BoardBar.vue

<template>
    <div class="board-bar">
        <div class="bb-top">
            <div class="dev-title">
                <div class="title-item" v-for="(item, index) in header" :style="{ width: computedWidth(columnWidth[index]) }">
                    <text>{{ item }}</text></div>
            </div>
            <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
        </div>
        <div class="bb-bottom">
            <BarChart style="width: 100%;height: 100%;"></BarChart>
        </div>
    </div>
</template>

<script setup lang='ts'>
import ZdScrollBoard from "@/components/data-view/index.vue";
import BarChart from './BarChart.vue'

import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "vue";


const devList = ref(null);
const prop = defineProps({
    data: {
        type: Array,
        default: [[1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
        [2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
        [3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
        [4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
        [5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],
        [6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
        [7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
        [8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
        [9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
        [10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],]
    }
})
let header = ['序号', '设备名称', '设备编码', '稼动率', '状态']
let columnWidth = [90, 290, 140, 120, 120, 120];
let sum = 850;

let computedWidth = (width: number) => {
    return width / sum * 100 + '%'
}
let config = reactive({
    // header: ['序号', '设备名称', '设备编码', '稼动率', '状态'],//, '故障率'
    headerBGC: '#0E0E0E',
    oddRowBGC: '#000F1D',
    evenRowBGC: '#000F1D',
    wrap: [false, false, false, false, false],
    columnWidth: [80, 290, 120, 120, 120, 120],
    align: ['center', 'center', 'center', 'center', 'center', 'center'],
    rowNum: 2,
    waitTime: 300000,
    data: [
    ]
})
const handleData = () => {

    config.data = prop.data.map((items: any) => {
        return items.map((item: any, index: number) => {
            if (index == (items.length - 1)) {
                return statusHtml(status_color[item])
            }
            return item
        })
    })
}


const status_color = {
    '0': '#FF6E76',
    '1': '#FDDD60',
    '2': '#7CFFB2',
    '3': '#FDDD60',
}

let statusHtml = (color) => {
    return `<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"><div style="width:24px;height:24px;border-radius: 50%;background-color:${color}"></div></div>`
    // return `<div style="display: inline-block;width:20px;height:20px;border-radius: 50%;background-color:${color}"></div>`
}


onMounted(() => {
    handleData()
})
</script>

<style scoped>
.board-bar {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

}

.dev-title {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-item {
    height: 100%;
    box-sizing: border-box;
}

.title-item text {
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding: 5px 10px;
    background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
}

.bb-top {
    width: 100%;
    height: 35%;
}

.dev-list {
    width: 100%;
    height: calc(100% - 50px);
}

.bb-bottom {
    width: 100%;
    height: 65%;

}</style>