From 9ce4e119fdc14459f5a9e2f40403d1755e17da8b Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 07 七月 2025 17:29:38 +0800
Subject: [PATCH] 111

---
 src/views/screen/device.vue |  291 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 289 insertions(+), 2 deletions(-)

diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue
index 74184ac..04ae68b 100644
--- a/src/views/screen/device.vue
+++ b/src/views/screen/device.vue
@@ -1,13 +1,300 @@
 <template>
     <div class="device">
-        设备
+        <div class="device-l">
+            <div class="left">
+                <div class="left-item">
+                    <div class="item-t">设备时长</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 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">
+                        <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>
+                    <div class="item-c"></div>
+                </div>
+            </div>
+        </div>
+        <div class="device-c">
+            <div class="center">
+                <div class="center-item">
+                    <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>
+                    <div class="item-c"></div>
+                </div>
+            </div>
+        </div>
+        <div class="device-r">
+            <div class="right">
+                <div class="right-item">
+                    <div class="item-t">风机状态</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">
+                        <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>
     </div>
 </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">
-
+    .device{
+        height: 100%;
+        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: 29%;
+            height: 100%;
+            .left{
+                height: 100%;   
+                display: flex;
+                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');
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                    .item-t{
+                        width: 100%;
+                        height: 3rem;
+                        line-height: 3rem;
+                        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: 40%;
+            height: 100%;
+            .center{
+                height: 100%;   
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .center-item{
+                    height: 49%;
+                    background-image: url('@/assets/images/screen/ct-large.png');
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                    .item-t{
+                        height: 3rem;
+                        line-height: 3rem;
+                        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);
+                        padding: 0.5rem;
+                    }
+                }
+            }
+        }
+        &-r{
+            width: 29%;
+            height: 100%;
+            .right{
+                height: 100%;   
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .right-item{
+                    height: 49%;
+                    background-image: url('@/assets/images/screen/ct-default.png');
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
+                    .item-t{
+                        height: 3rem;
+                        line-height: 3rem;
+                        padding-left: 3rem;
+                    }
+                    .item-c{
+                        height: calc(100% - 3rem);
+                        padding: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3