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></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 legion:any = {
    '5': '汽车军团',
    '3': '服装军团',
    '4': '家纺军团',
    '15': '医防军团'
}
let scrollBoardConfig = reactive({
    header: [t('messages.SerialNum'), t('messages.DevName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.DevStatus'), 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) {
            res.data.forEach((item: any, index: number) => {
                let temp = [index + 1, item.name, t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.DevStatus'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), item.deliveryDate]
                scrollBoardConfig.data.push(temp)
                item.index = index+1
                severdata.push(item)
            })
        }
    })

}
//获取完成进度
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>