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>{{ speed }}</span>
                                <span>rpm</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 :data="device_data" :imgSrc="getImgSrc"></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'
import { scatteredLayoutExhibitionDevice, cismaDeviceInfo } from '@/http/Exhibition/CIFM'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import { useRouter, useRoute } from 'vue-router'

let route = useRoute()
let timer = null
let xData = ref(['订单任务量', '任务完成量'])
let series = ref([{
    name: '完成量',
    type: 'bar',
    label: {
        show: true,
        position: 'outside',
        formatter: '{@score}'
    },
    data: [200, 300],
    barWidth: '35%',
}])
let device_data = ref([
    { key: '设备名称', value: '床笠裙边机', value_style: { fontSize: '26px' } },
    { key: '设备状态', value: 2 },
    { key: '机架号', value: '123456' },
    { key: '工作时长', value: '0min' },
])

let getImgSrc = computed(() => {
    let name: string = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name;
    let imgSrc = {
        '床笠裙边机': require('./images/qbj.png'),
        '电脑绗绣机': require('./images/hxj.png'),
        '电脑绣花机': require('./images/xhj.png'),
        '零等待皮革缝纫机': require('./images/ldd.png')
    }
    return imgSrc[name]
})

//转速
let speed = ref(200)
function scatteredLayoutExhibitionDeviceFun() {
    scatteredLayoutExhibitionDevice({ s: 'WME' }).then((res: any) => {
        if (res.code == 200) {
            let data = res.data
            let name: string = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name;
            let device_info = data[name]
            device_data.value = [
                { key: '设备名称', value: device_info['name'], value_style: { fontSize: '26px' } },
                { key: '设备状态', value: device_info['status'] },
                { key: '机架号', value: device_info['label'] },
                { key: '工作时长', value: device_info['workTime'] },
            ]
            
            if (name == '电脑绗绣机') {
                device_data.value.push({ key: '花型编号', value: device_info['fileName'] })
            }
            if (device_info['status'] == 2) {
                speed.value = 200
            } else {
                speed.value = 0
            }
            cismaDeviceInfoFun(device_info['id'])
        }
    })
}

function cismaDeviceInfoFun(id) {
    cismaDeviceInfo({ s: id }).then((res: any) => {
        if (res.code == 200) {
            let data = res.data
            optionData.series = [{
                name: '完成量',
                type: 'bar',
                label: {
                    show: true,
                    position: 'outside',
                    formatter: '{@score} ' + unit[Array.isArray(route.params.name) ? route.params.name[0] : route.params.name]
                },
                data: [data.dingdan.renwu, data.dingdan.wancheng],
                barWidth: '35%',
            }]
            let config_data = data.weihu.map((item, index) => {
                return [index + 1, item.taskType, item.date, item.status, item.name]
            })
            config.value = {
                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: config_data
            }
        }
    })
}

let config = ref({
    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 unit = {
    '床笠裙边机': '床',
    '电脑绗绣机': 'cm',
    '电脑绣花机': '件',
    '零等待皮革缝纫机': '件'
}
//echarts
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: '订单任务：\r\n单位(' + unit[Array.isArray(route.params.name) ? route.params.name[0] : route.params.name] + ")",
            axisLabel: {
                fontSize: 14
            }
        }
    ],
    series: series.value
})


//socket
function getWebsocket(val) {
    try {
        let data = JSON.parse(val)


        if (data.type == 'WorkingState') {
            let { RackNumber, WorkingState } = data.msg


            if (device_data.value[2].value == RackNumber) {
                
                device_data.value[1].value = WorkingState
                speed.value = data.msg?.speed
            }
        }

    } catch (err) {
        console.log(err);
    }

}
function errWebsocket(val) {
    // console.log(val);
}
onMounted(() => {
    scatteredLayoutExhibitionDeviceFun()
    timer = setInterval(() => {
        scatteredLayoutExhibitionDeviceFun()
    }, 60000)
    connectWebsocket(null, null, getWebsocket, errWebsocket)
})
onUnmounted(() => {
    clearInterval(timer)
    closeWebsocket()
})
</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>