111

web

2025-07-07 9ce4e119fdc14459f5a9e2f40403d1755e17da8b

 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%;