screenFront/src/views/legionProducts/index.vue

<template>
    <div class="container">
        <header>
            <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`${title}${t('messages.IoT_System')}`"
                :titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
        </header>
        <main class="content">
            <el-row class="layout">
                <el-col :span="6">
                    <div class="flex-c">
                        <div style="height: 48%;width: 100%;margin: 0 auto;">
                            <border13>
                                <gatewayVue :data="gatwayList" :title="t('messages.GatewayStatus')"></gatewayVue>
                            </border13>
                        </div>
                        <div style="height: 48%;width: 100%;">
                            <border13>
                                <percentageVue :title="`${title} ${t('messages.finishSchedule')}`"
                                    :color="['#ee6666', '#a14646']" :percentage="percentage">
                                </percentageVue>
                            </border13>
                        </div>
                    </div>


                </el-col>
                <el-col :span="18">
                    <el-row style="width: 100%;height: 35%;">
                        <el-col :span="12">
                            <div class="p40">
                                <border13>
                                    <devStatus :data="deviceStatus"></devStatus>
                                </border13>
                            </div>

                        </el-col>
                        <el-col :span="12">
                            <div class="p40">
                                <border13>
                                    <ringChart :data="ringData"></ringChart>
                                </border13>
                            </div>

                        </el-col>
                    </el-row>
                    <el-row style="width: 100%;height: 65%;box">
                        <div class="center">
                            <border13>
                                <scrollBoard :config="scrollBoardConfig" :severdata="severdata"></scrollBoard>
                            </border13>
                        </div>
                    </el-row>
                </el-col>
            </el-row>
        </main>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import header2 from '@/components/headerBox/header2.vue'
import border13 from '@/components/border/Border13.vue'
import gatewayVue from "./chart/gateway.vue"
import ringChart from './chart/ringChart.vue'
import devStatus from './chart/devStatus.vue'
import percentageVue from "@/components/charts/percentage.vue"
import scrollBoard from './chart/scrollBoard.vue'
import { getDeviceInPlantList, getDeviceStatus } from '@/http/legionProducts'
import { getprogressOfCorps, gatewayOfCorps } from "@/http/InPlantProducts";
import { useI18n } from 'vue-i18n'
let { t } = useI18n();
const route = useRoute()
const router = useRouter()
let severdata = reactive([])
let percentage = ref(0)
//军团id
const deptId: any = route.params.deptId
const title = route.query.title
const gatwayList = ref([])
const deviceStatus = ref([])
let ringData = ref([])
let legion: any = {
    '5': '汽车军团',
    '3': '服装军团',
    '4': '家纺军团',
    '15': '医防军团'
}
let scrollBoardConfig = reactive({
    header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
    headerBGC: 'rgb(52, 105, 243)',
    oddRowBGC: '#100c2a',
    evenRowBGC: '#100c2a',
    rowNum: 10,
    columnWidth: [80, 170, 120, 120, 120, 120, 120, 120, 120, 100, 130],
    align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
    data: []
})
//获取设备列表
const getList = (deptId) => {
    getDeviceInPlantList({ deptId }).then((res: any) => {
        if (res.code == 200) {
            let ringObj = {}
            res.data.forEach((item: any, index: number) => {
                let status = JSON.parse(item.deviceStatus) == true ? '在线' : '离线'
                let temp = [index + 1, item.name, item.model, item.label, item.typeName, item.status, status, item.assemblyGroup, item.electricGroup, item.inspector, item.deliveryDate]
                scrollBoardConfig.data.push(temp)
                item.index = index + 1
                severdata.push(item)
                if (ringObj[item.type]) {
                    ringObj[item.type].value++;
                } else {
                    ringObj[item.type] = {
                        "value": 1,
                        "name": item.typeName,
                        "id": item.type
                    };
                }
            })
            console.log(ringObj);
            
            ringData.value = Object.values(ringObj)
        }
    })

}
//获取完成进度
const getprogressOfCorpsfun = () => {
    getprogressOfCorps().then((res: any) => {
        if (res.code == 200) {

            res.data.forEach((item: any) => {
                if (item.deptId == deptId) {
                    percentage.value = Math.floor((item.accomplish / item.counts) * 100)
                }
            })
        }
    })
}
//获取网关状态
const getWayStatus = () => {
    gatewayOfCorps().then((res: any) => {
        if (res.code == 200) {

            let index = res.data.findIndex((item: any) => {
                return item.name == legion[deptId]
            })
            gatwayList.value.push(res.data[index])
            gatwayList.value[0].name = title
        }

    })
}

//获取设备状态
const getDevStatus = () => {
    getDeviceStatus({ deptId }).then((res: any) => {
        if (res.code == 200) {
            deviceStatus.value = res.data

        }
    })
}
getDevStatus()
getWayStatus()
getprogressOfCorpsfun()
getList(deptId)
</script>

<style scoped>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
    box-sizing: border-box;
}

.flex-c {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 40px;
    font-size: 16px;
}

.p40 {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 40px;
    padding-bottom: 40px;
}

.line {
    width: 100%;
    height: 28%;
}


.content {
    width: 100%;
    height: 980px;
}

.content .layout {
    height: 100%;
}

:deep(.dv-scroll-board .rows .ceil) {
    font-size: 16px;
}
</style>
<style>
body {

    /* --content:calc(100vh - var(--header)) */
    overflow: hidden !important;
    -ms-overflow-style: none;
    /* IE + Edge */
    scrollbar-width: none;
    /* Firefox */
}

::-webkit-scrollbar {
    display: none;
}
</style>