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 | 186 ++++++++++++++++++++++++++++++++++--
src/assets/images/screen/bg-air.png | 0
src/assets/images/screen/CH4.png | 0
src/assets/images/screen/H2S.png | 0
src/views/screen/index.vue | 7 +
src/views/screen/components/dataItem.vue | 103 ++++++++++++++++++++
6 files changed, 283 insertions(+), 13 deletions(-)
diff --git a/src/assets/images/screen/CH4.png b/src/assets/images/screen/CH4.png
new file mode 100644
index 0000000..d5ef106
--- /dev/null
+++ b/src/assets/images/screen/CH4.png
Binary files differ
diff --git a/src/assets/images/screen/H2S.png b/src/assets/images/screen/H2S.png
new file mode 100644
index 0000000..515738d
--- /dev/null
+++ b/src/assets/images/screen/H2S.png
Binary files differ
diff --git a/src/assets/images/screen/bg-air.png b/src/assets/images/screen/bg-air.png
new file mode 100644
index 0000000..bc56b57
--- /dev/null
+++ b/src/assets/images/screen/bg-air.png
Binary files differ
diff --git a/src/views/screen/components/dataItem.vue b/src/views/screen/components/dataItem.vue
new file mode 100644
index 0000000..20a0085
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue
index 6e39e63..04ae68b 100644
--- a/src/views/screen/device.vue
+++ b/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%;
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 7916c9d..255484b 100644
--- a/src/views/screen/index.vue
+++ b/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;
--
Gitblit v1.9.3