screenFront/src/views/Exhibition/CIFM/child.vue

<template>
    <div class="container">
        <div class="header">
            <div class="title">
                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
                    :typeFun="['time','comback']" :alarmType="[]"></header2>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <div class="ltop">
                    <BorderView :title="'工作速度'">
                        <div class="box-lt">
                            <div class="pie">
                                <span>200</span>
                                <span>rpm/min</span>
                            </div>
                        </div>

                    </BorderView>
                </div>
                <div class="lbottom">
                    <BorderView :title="'订单完成量'">
                        <DynamicChart style="width: 100%;height: 100%;" :optionData="optionData">
                        </DynamicChart>
                    </BorderView>
                </div>
            </div>
            <div class="center">
                <BorderView :title="'设备状态总览'">
                    <ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
                </BorderView>
            </div>
            <div class="right">
                <div class="rtop">
                    <BorderView :title="'维护保养'">
                        <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
                    </BorderView>
                </div>
                <div class="rbottom">
                    <BorderView :title="'生产报警'">
                        <div class="rb-box">
                            <div class="svg-box">
                                <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1024 1024"
                                    data-v-ea893728="" class="WarnTriangleFilled">
                                    <path fill="currentColor"
                                        d="M928.99 755.83 574.6 203.25c-12.89-20.16-36.76-32.58-62.6-32.58s-49.71 12.43-62.6 32.58L95.01 755.83c-12.91 20.12-12.9 44.91.01 65.03 12.92 20.12 36.78 32.51 62.59 32.49h708.78c25.82.01 49.68-12.37 62.59-32.49 12.91-20.12 12.92-44.91.01-65.03M554.67 768h-85.33v-85.33h85.33zm0-426.67v298.66h-85.33V341.32z">
                                    </path>
                                </svg>
                            </div>
                            <div>暂无报警信息</div>

                        </div>
                    </BorderView>
                </div>
            </div>
        </div>
        <div class="left-tip-type">
            <div class="left-tip-type-item">
                <div class="yuan green"></div>
                <div class="left-tip-type-item-text">工作</div>
            </div>
            <div class="left-tip-type-item">
                <div class="yuan yello"></div>
                <div class="left-tip-type-item-text">待机</div>
            </div>
            <div class="left-tip-type-item">
                <div class="yuan red"></div>
                <div class="left-tip-type-item-text">停机</div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
import ZdScrollBoard from "@/components/data-view/index.vue";
import header2 from './components/header2.vue'
import BorderView from './components/Border.vue'
import DynamicChart from './components/DynamicChart.vue'
import ItemCard from './components/ItemCard.vue'

let xData = ref(['订单任务量', '任务完成量'])
let series = ref([{
    name: '完成量',
    type: 'bar',
    data: [200, 300]
}])
let mjxhj_data = reactive([
    { key: '机架号', value: '102014422' },
    { key: '设备状态', value: 2 },
    { key: '稼动率', value: '90%' },
    { key: '工作时长', value: '0min' },
])
let config = reactive({
    header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率'
    headerBGC: 'transparent',
    oddRowBGC: 'transparent',
    evenRowBGC: 'transparent',
    wrap: [false, false, false, false, false],
    columnWidth: [80, 150, 145, 110, 110, 185],
    align: ['center', 'center', 'center', 'center', 'center', 'center'],
    rowNum: 5,
    waitTime: 3000,
    data: [
        [1, '保养', '2024-03-10', '完成', '1001'],
        [2, '机头保养', '2024-03-08', '完成', '1002'],
        [3, '电机保养', '2024-03-01', '完成', '1003'],
        [4, '保养', '2024-02-26', '完成', '1001'],
        [5, '机头保养', '2024-02-20', '完成', '1002'],
        [6, '维护', '2024-02-08', '完成', '1001'],
    ]
})
let optionData = reactive({
    backgroundColor: 'transparent',
    legend: {
        data: ['计划完成', '实际完成'],
        textStyle: {
            fontSize: 14
        },

    },
    textStyle: {
        fontSize: 14

    },
    grid: {
        left: '80',
        right: '0',
        bottom: '40',
    },
    color: ['#2FC5D4', '#FEDA81'],
    xAxis: {
        type: 'category',
        data: xData.value,
        axisLabel: {
            interval: 0, //控制X轴刻度全部显示
            // rotate: 45, //倾斜角度
        },
    },
    yAxis: [
        {
            type: 'value',
            name: '产量',
            axisLabel: {
                fontSize: 14
            }
        }
    ],
    series: series.value
})
</script>

<style scoped>
.container {
    height: 1080px;
    width: 1920px;
    color: #FFFFFF;
    background: url('./../../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
    background-color: #0E0E0E;
    position: relative;

}

.header {
    height: 100px;
    width: 1920px;
}

.content {
    height: 980px;
    width: 1920px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
}

.left,
.right {
    height: 980px;
    width: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center {
    width: 830px;
    height: 980px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.ltop {
    width: 100%;
    height: 340px;
}

.box-lt {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie {
    width: 160px;
    height: 160px;
    border: #05FCD0 30px solid;
    border-radius: 50%;
    color: #C6E4E2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.lbottom {
    width: 100%;
    height: calc(100% - 345px);
}


.rtop {
    width: 100%;
    height: 485px;
}

.rbottom {
    width: 100%;
    height: 470px;
}

.rb-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #A3DDDE;
}

.svg-box {
    width: 205px;
    height: 205px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: #CAD1D9 2px solid;
    border-radius: 20px;
    margin-bottom: 20px;
}

.WarnTriangleFilled {
    width: 200px;
    height: 200px;


}

.dev-list {
    width: 100%;
    height: 100%;
}

.left-tip-type {
    position: absolute;
    top: 50px;
    left: 462px;
    width: 160px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
}

.left-tip-type-item {
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.yuan {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.green {
    background-color: #7CFFB2;
}

.yello {
    background-color: #FDDD60;
}

.red {
    background-color: #FF6E76;
}

.blue {
    color: #20AEC5;
}

.err {
    color: #FF6E76;
}
</style>