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