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