111

web

2025-07-07 9ce4e119fdc14459f5a9e2f40403d1755e17da8b

111

 src/assets/images/screen/CH4.png

 src/assets/images/screen/H2S.png

 src/assets/images/screen/bg-air.png

 src/views/screen/components/dataItem.vue

对比新文件
@@ -0,0 +1,103 @@
<template>
    <div class="item">
        <div class="item-air">
            <div class="gas">
                <div class="gas-t">CH₄</div>
                <div class="gas-CH">
                    <img src="@/assets/images/screen/CH4.png" alt="" />
                </div>
                <div class="gas-data"><span>1.1</span>%LEL</div>
            </div>
            <div class="gas">
                <div class="gas-t">H₂S</div>
                <div class="gas-H2">
                    <img src="@/assets/images/screen/H2S.png" alt="" />
                </div>
                <div class="gas-data"><span>1.2</span>%LEL</div>
            </div>
        </div>
        <div class="item-address">
            安装位置：重庆市丰都县龙城大道435号安装位置：重庆市丰都县龙城大道435号
        </div>
        <div class="status">
            <span>运行状态：</span>
            <span class="val">正常运行</span>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.item{
    width: 144px;
    height: 164px;
    border-radius: 10px;
    background: radial-gradient( rgba(50,154,196,0.5) 0%, rgba(21,74,131,0.5) 100%);
    box-shadow: inset 0px 0px 10px 0px rgba(50,154,196,0.8);
    padding: 8px;
    box-sizing: border-box;
    .item-air{
        display: flex;
        justify-content: center;
        gap: 0.3rem;
        .gas{
            width: 60px;
            height: 67px;
            background-image: url('@/assets/images/screen/bg-air.png');
            background-repeat: no-repeat;
            background-size: cover;
            padding: 0.2rem;
            box-sizing: border-box;
            font-size: 0.6rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .gas-CH{
                height: 30px;
                line-height: 30px;
                text-align: center;
                img{
                    width: 28px;
                    height: 30px;
                }
            }
            .gas-H2{
                height: 30px;
                line-height: 40px;
                text-align: center;
                img{
                    width: 25px;
                    height: 16px;
                }
            }
            .gas-data{
                text-align: center;
                span{
                    font-size: 0.7rem;
                }
            }
        }
    }
    .item-address{
        font-size: 0.8rem;
        margin-top: 0.6rem;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .status{
        font-size: 0.8rem;
        margin-top: 0.6rem;
        .val{
            color: rgb(40, 250, 40);
            font-size: 0.8rem;
        }
    }
}
</style>

 src/views/screen/device.vue

@@ -4,15 +4,60 @@
            <div class="left">
                <div class="left-item">
                    <div class="item-t">设备时长</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" label="异常类型" />
                            <el-table-column prop="device" label="异常设备" />
                            <el-table-column prop="address" label="异常位置" />
                            <el-table-column prop="time" label="累计时长" />
                        </el-table>
                    </div>
                </div>
                <div class="left-item">
                    <div class="item-t">风机管理</div>
                    <div class="item-t">
                        <div class="title-left">风机管理</div>
                        <div class="title-right">
                            <el-select
                                v-model="value"
                                size="small"
                                style="width: 120px"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                            <el-button type="success" size="small">一键启动</el-button>
                        </div>
                    </div>
                    <div class="item-c"></div>
                </div>
                <div class="left-item">
                    <div class="item-t">工单处理</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" label="工单号" />
                            <el-table-column prop="device" label="工单类型" />
                            <el-table-column prop="device" label="上报时间" />
                            <el-table-column prop="time" label="上报人" />
                            <el-table-column prop="address" label="所属地址" />
                            <el-table-column prop="options" label="工单状态">
                                <el-button type="primary">已处理</el-button>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="left-item">
                    <div class="item-t">设备状态</div>
@@ -23,8 +68,40 @@
        <div class="device-c">
            <div class="center">
                <div class="center-item">
                    <div class="item-t">实时数据</div>
                    <div class="item-c"></div>
                    <div class="item-t">
                        <div class="title-left">实时数据</div>
                        <div class="title-right">
                            <el-select
                                v-model="value"
                                size="small"
                                style="width: 120px"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                             <el-select
                                v-model="value"
                                size="small"
                                style="width: 120px"
                            >
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                    <div class="item-c">
                        <div class="data-list">
                            <dataItem />
                        </div>
                    </div>
                </div>
                <div class="center-item">
                    <div class="item-t">终端监控分类曲线</div>
@@ -36,11 +113,35 @@
            <div class="right">
                <div class="right-item">
                    <div class="item-t">风机状态</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" label="风机编号" />
                            <el-table-column prop="device" label="单次运行时长" />
                            <el-table-column prop="address" label="运行地址" />
                            <el-table-column prop="time" label="总运行时长" />
                        </el-table>
                    </div>
                </div>
                <div class="right-item">
                    <div class="item-t">设备报警</div>
                    <div class="item-c"></div>
                    <div class="item-c">
                        <el-table 
                            :data="timeData" 
                            :header-cell-style="headerStyle"
                            :cell-style="rowStyle"
                            style="height: 100%;"
                        >
                            <el-table-column prop="type" label="设备编号" />
                            <el-table-column prop="device" label="报警类型" />
                            <el-table-column prop="address" label="报警地址" />
                            <el-table-column prop="time" label="报警时间" />
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
@@ -48,7 +149,33 @@
</template>

<script setup>
    import dataItem from './components/dataItem.vue'

    const timeData = ref([
        { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
        { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
        { type: '甲烷浓度异常', device: '风机', address: '重庆市丰都县龙城大道435号', time: '2.9小时' },
    ])

    const headerStyle = { 
        "background-color": '#041025 !important'
    }
    const rowStyle = {
        "background-color": '#081C3F !important'
    }

    const value = ref('')

    const options = [
        {
            value: 1,
            label: 'Option1',
        },
        {
            value: 2,
            label: 'Option2',
        }
    ]
</script>

<style scoped lang="scss">
@@ -57,8 +184,24 @@
        color: #fff;
        display: flex;
        justify-content: space-between;
        :deep(.el-table){
            th{
                font-size: 12px;
                color: #fff;
            }
            tr{
                font-size: 12px;
                color: #fff;
            }
            .el-table__cell{
                border: none;
            }
        }
        :deep(.el-scrollbar__wrap--hidden-default){
            background-color: #000 !important;
        }
        &-l{
            width: 25%;
            width: 29%;
            height: 100%;
            .left{
                height: 100%;   
@@ -66,6 +209,7 @@
                flex-direction: column;
                justify-content: space-between;
                .left-item{
                    flex-shrink: 0;
                    width: 100%;
                    height: 24%;
                    background-image: url('@/assets/images/screen/ct-small.png');
@@ -75,17 +219,28 @@
                        width: 100%;
                        height: 3rem;
                        line-height: 3rem;
                        padding-left: 3.5rem;
                        padding: 0 5rem 0 3.5rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .title-right{
                            display: flex;
                            gap: 1rem;
                        }
                    }
                    .item-c{
                        height: calc(100% - 3rem);
                        padding: 0.5rem;
                        // overflow-y: scroll;
                        // &::-webkit-scrollbar{
                        //     display: none;
                        // }
                    }
                }
            }
        }
        &-c{
            width: 49%;
            width: 40%;
            height: 100%;
            .center{
                height: 100%;   
@@ -100,7 +255,14 @@
                    .item-t{
                        height: 3rem;
                        line-height: 3rem;
                        padding-left: 4.5rem;
                        padding: 0  6rem 0 4.2rem;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .title-right{
                            display: flex;
                            gap: 1rem;
                        }
                    }
                    .item-c{
                        height: calc(100% - 3rem);
@@ -110,7 +272,7 @@
            }
        }
        &-r{
            width: 25%;
            width: 29%;
            height: 100%;
            .right{
                height: 100%;   

 src/views/screen/index.vue

@@ -182,6 +182,9 @@
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .msg-r{
                    width: 250px;
@@ -193,11 +196,13 @@
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .msg-item{
                    width: 100%;
                    color: #fff;
                    padding: 0.3rem 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;