smart-factory/web/src/views/large-screen/index.vue

<template>
    <div class="data-screen" element-loading-text="加载中请稍后...">
        <!-- v-loading="state.loading" -->
        <div class="topheader">
            <div class="gradient">
                智慧工地数据大屏
            </div>
        </div>
        <div class="main-box">
            <div class="top-box">
                <!-- 项目介绍 -->
                <div class="top-item">
                    <div class="boxtitle">项目介绍</div>
                    <div class="boxcontent" style="display: flex;flex-direction: column;">
                        <div class="displaybox" style="margin-bottom: 10px;">
                            <div class="diamond"></div>承包商：沈阳市某某某建筑公司
                        </div>
                        <div class="displaybox" style="margin-bottom: 15px;">
                            <div class="diamond" style="background-color: #FFAE3C;"></div>工地负责人：李海龙
                        </div>
                        <div class="chaochu" style="flex: 1;">
                            项目简介：本工程为综合性建筑项目，总建筑面积约XX平方米，建筑高度XX米，结构形式采用XX（如框架结构、剪力墙结构、钢结构等），设计使用年限为XX年。工程内
                            容包括以下分部分项工程：
                            地基与基础工程：包括基坑开挖、桩基施工、筏板基础浇筑及地下室结构施工。
                        </div>
                    </div>
                </div>
                <!-- 数据概览 -->
                <div class="top-item">
                    <div class="boxtitle">数据概览</div>
                    <div class="boxcontent">
                        <div class="overview-top">
                            <div class="data-font">
                                <span class="number-font">105<span>天</span></span>
                                <span>总工期</span>
                            </div>
                            <div class="data-font jbborder">
                                <span class="number-font">105<span>%</span></span>
                                <span>工程进度</span>
                            </div>
                            <div class="data-font jbborder">
                                <span class="number-font">105<span>天</span></span>
                                <span>已施工</span>
                            </div>
                        </div>
                        <div class="overview-top" style="grid-template-columns: repeat(2, 1fr);border-bottom: 0;">
                            <div class="data-font ">
                                <span class="number-font">5<span>人</span></span>
                                <span>施工人员</span>
                            </div>
                            <div class="data-font jbborder">
                                <span class="number-font">5<span>人</span></span>
                                <span>管理人员</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 智能资源调度 -->
                <div class="top-item">
                    <div class="boxtitle">智能资源调度</div>
                    <div class="boxcontent" style="display: flex;flex-direction: column;justify-content: space-around;">
                        <div>
                            <div class="jd-title">
                                <span style="margin-right: auto;">0#厂房建设</span>
                                <div>
                                    <span>进度</span>
                                    <span style="margin-left: 10px;font-weight: bold;">78%</span>
                                </div>
                            </div>
                            <div style="width: 100%;margin: 8px 0;"><el-progress class="jdt" color="#1FFFDA"
                                    :text-inside="true" :stroke-width="12" :percentage="50">
                                    <span></span>
                                </el-progress></div>
                            <div class="jgbox">
                                <img src="../../assets/images/jg.png" alt="">
                                工程滞后，建议增派人力投入
                            </div>
                        </div>
                        <div style="margin-top: 10px;">
                            <div class="jd-title">
                                <span style="margin-right: auto;">0#厂房建设</span>
                                <div>
                                    <span>进度</span>
                                    <span style="margin-left: 10px;font-weight: bold;">78%</span>
                                </div>
                            </div>
                            <div style="width: 100%;margin: 8px 0;"><el-progress class="jdt" color="#1FFFDA"
                                    :text-inside="true" :stroke-width="12" :percentage="50">
                                    <span></span>
                                </el-progress></div>
                            <div class="jgbox">
                                <img src="../../assets/images/jg.png" alt="">
                                工程滞后，建议增派人力投入
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 工程日志 -->
                <div class="top-item">
                    <div class="boxtitle">工程日志</div>
                    <div class="boxcontent"
                        style="display: flex;flex-direction: column;justify-content: space-around;padding: 15px 20px;">
                        <div class="log-top">
                            <div class="tq-box">
                                <img src="../../assets/images/riqi.png" alt="">
                                <span>日期</span>
                                <span>2025/05/06</span>
                            </div>
                            <div class="tq-box">
                                <img src="../../assets/images/riqi.png" alt="">
                                <span>温度</span>
                                <span>18℃</span>
                            </div>
                            <div class="tq-box">
                                <img src="../../assets/images/riqi.png" alt="">
                                <span>风力</span>
                                <span>轻风</span>
                            </div>
                            <div class="tq-box">
                                <img src="../../assets/images/riqi.png" alt="">
                                <span>天气</span>
                                <span>16-20℃ 多云</span>
                            </div>
                        </div>
                        <div>
                            <table class="construction-table">
                                <thead>
                                    <tr>
                                        <th width="23%">现场负责人</th>
                                        <th>联系方式</th>
                                        <th>施工情况</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>王大勇</td>
                                        <td>13512212323</td>
                                        <td>此处展示当日的一些简单施工情况描述...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom-box">
                <div></div>
                <!-- 门禁记录 -->
                <div></div>
                <!-- 施工人员工种分析  and   车辆机械设备统计 -->
                <div class="right-top-item">
                    <div class="top-item">
                        <div class="boxtitle">施工人员工种分析</div>
                        <div class="boxcontent" id="staff">

                        </div>
                    </div>
                    <div class="top-item">
                        <div class="boxtitle">车辆机械设备统计</div>
                        <div class="boxcontent" id="car">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { echartsZhu,echartsBing } from "./echartsOptions";
import { echart } from "../../echarts";
const state = reactive({
    echartsBing,
    echartsZhu,
    echart,
    loading: false
})
onMounted(() => {
    getEcharts()
})
function getEcharts() {
    nextTick(() => {
        let staff = state.echart({
            id: 'staff',
            grid: state.echartsZhu({
                ydata: [20, 35, 40, 20, 30, 25, 25, 25],
                xdata: ["力工", "木工", "瓦工", "电工", "油漆工", "钢筋工", "防水工", "其他"]
            }),
        });
        let car = state.echart({
            id: 'car',
            grid: state.echartsBing({
               
            }),
        });
        
    })
}
</script>
<style scoped lang='scss'>
.right-top-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
}

.bottom-box {
    width: 100%;
    height: calc(66.66% - 20px);
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 20px;
}

.construction-table {
    width: 100%;
    border-collapse: collapse;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    background-color: #08223b;
    /* 深蓝色背景，可根据实际需求调整颜色值 */
}

.construction-table th,
.construction-table td {
    border: 1px solid #103B54;
    /* 蓝色边框，可根据实际需求调整颜色值 */
    text-align: left;
    padding: 8px 10px;

}

.construction-table th {
    background: rgba(50, 165, 210, 0.4);
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    /* 表头背景色，可根据实际需求调整颜色值 */
}

.log-top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    // height: 50%;
}

.tq-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;

    >img {
        width: 24px;
        height: 24px;
    }

    >span:nth-child(2) {
        margin-top: 5px;
        margin-bottom: 8px;
    }
}

:deep(.jdt .el-progress-bar__inner),
:deep(.jdt .el-progress-bar__outer) {
    border-radius: 0 !important;
}

.jd-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
}

.jgbox {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    display: flex;
    align-items: center;

    >img {
        height: 20px;
        width: 20px;
        margin-right: 5px
    }
}

.chaochu {
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
}

.overview-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    height: 50%;
}

.jbborder {
    border-left: 1px solid transparent !important;
    /* 必须设置边框宽度 */
    border-image-source: linear-gradient(to bottom, transparent, white, transparent);
    border-image-width: 1;
    /* 边框图像宽度与 border-width 匹配 */
    border-image-slice: 1;
    /* 切片参数 */
}

.data-font {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
}

.number-font {
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 10px;
    color: #19F7FF;
}

.displaybox {
    display: flex;
    align-items: center;
}

.diamond {
    width: 5px;
    height: 5px;
    background-color: #3CFFB1;
    transform: rotate(45deg);
    transform-origin: top left;
    margin-right: 5px;
}

.boxcontent {
    width: 100%;
    height: calc(100% - 47px);
    padding: 20px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    background: url('../../assets/images/datacontentbj.png') no-repeat;
    background-size: 100% 100%;
    color: #FFFFFF;
    margin-top: 7px;
}

.boxtitle {
    width: 100%;
    height: 40px;
    background: url('../../assets/images/datatitle.png') no-repeat;
    background-size: 100% 100%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 25px;
}

.top-item {
    height: 100%;
    overflow: hidden;
}

.top-box {
    width: 100%;
    height: 33.33%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    overflow: hidden;
}

.main-box {
    width: 100%;
    height: calc(100% - 158px);
    padding: 0 37px;
    padding-bottom: 28px;
}

.topheader {
    width: 100%;
    height: 158px;
    background: url('../../assets/images/datatopbj.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    font-weight: 400;
    font-size: 52px;
    padding-top: 20px;
}

.gradient {
    background: linear-gradient(270.0000000000008deg, #F2F7FF 0%, #D4F7FF 50%, #F2F7FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.data-screen {
    width: 100%;
    // height: 100vh;
    background: #040614;
    height: 1080px;
}
</style>