<template>
|
<div class="home">
|
<!-- 虚化盒子 -->
|
<div class="blurBox"></div>
|
<!-- 顶部菜单占位符 -->
|
<div class="home-t"></div>
|
<div class="home-content">
|
<div class="hc-position">
|
<div class="point" v-for="(item, index) in pointData" :key="index"
|
:style="{left: `${item.left}%`, top: `${item.top}%`, backgroundImage: `url(${getPointImg(item.facilityState)})`}"
|
@click.self="changeShow(index)"
|
>
|
<div class="msg-l" v-if="item.showMask && item.boxType === '0'">
|
<div class="msg-item">
|
<span class="name">设备名称：</span>
|
<span class="val">{{ item.facilityName }}</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">设备状态：</span>
|
<span class="val">{{ item.facilityState }}</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">甲烷浓度：</span>
|
<span class="val">{{ item.methaneValue }}%</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">室内温度：</span>
|
<span class="val">{{ item.temperature }}°</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">风机状态：</span>
|
<span class="val">{{ item.facilityFanState }}</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">硫化氢浓度：</span>
|
<span class="val">{{ item.hyrothionValue }}ppm</span>
|
</div>
|
</div>
|
<div class="msg-r" v-if="item.showMask && item.boxType === '1'">
|
<div class="msg-item">
|
<span class="name">设备名称：</span>
|
<span class="val">{{ item.facilityName }}</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">设备状态：</span>
|
<span class="val">{{ item.facilityState }}</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">甲烷浓度：</span>
|
<span class="val">{{ item.methaneValue }}%</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">室内温度：</span>
|
<span class="val">{{ item.temperature }}°</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">风机状态：</span>
|
<span class="val">{{ item.facilityFanState }}</span>
|
</div>
|
<div class="msg-item">
|
<span class="name">硫化氢浓度：</span>
|
<span class="val">{{ item.hyrothionValue }}ppm</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="hc-info">
|
<div class="shebei item">
|
<div class="item-t">辖区内设备数统计</div>
|
<div class="item-c">
|
<el-table
|
:data="facityData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="pointName" label="辖区位置" align="center" />
|
<el-table-column prop="methaneCount" label="甲烷传感器" align="center" />
|
<el-table-column prop="hyrothionCount" label="硫化氢传感器" min-width="100" align="center" />
|
<el-table-column prop="boxCount" label="终端控制器" align="center" />
|
<el-table-column prop="facilityFanCount" label="风机设备" align="center" />
|
<el-table-column prop="sumCount" label="总设备数" align="center" />
|
</el-table>
|
</div>
|
</div>
|
<div class="gongdan item">
|
<div class="item-t">未处理工单统计</div>
|
<div class="item-c">
|
<el-table
|
:data="orderData"
|
:header-cell-style="headerStyle"
|
:cell-style="rowStyle"
|
style="height: 100%;"
|
>
|
<el-table-column prop="code" label="工单号" align="center" />
|
<el-table-column label="工单类型" align="center">
|
<template #default="scope">
|
<div v-if="scope.row.type === 1">设备维护</div>
|
<div v-else>设备维修</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTimeView" label="上报时间" align="center" min-width="100" />
|
<el-table-column prop="createUserName" label="上报人" align="center" />
|
<el-table-column prop="address" label="所属地址" align="center" min-width="120" />
|
<el-table-column label="工单状态" align="center">
|
<template #default="scope">
|
<div v-if="scope.row.executeState === 100" style="color: #ccc;">未执行</div>
|
<div v-else style="color: #36fc0e;">已执行</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
<script setup>
|
import { onMounted, ref } from 'vue'
|
import { getPointFacityList, staticFacity, staticOrder } from '@/api/screen/home'
|
import postRun from '@/assets/images/screen/pos-run.png'
|
import warnStop from '@/assets/images/screen/pos-stop.png'
|
import warnWarn from '@/assets/images/screen/pos-warn.png'
|
|
const headerStyle = {
|
"background-color": '#041025 !important'
|
}
|
const rowStyle = {
|
"background-color": '#081C3F !important'
|
}
|
|
const pointData = ref([])
|
const facityData = ref([])
|
const orderData = ref([])
|
|
// 显示隐藏弹窗
|
const changeShow = (index) => {
|
pointData.value[index].showMask = !pointData.value[index].showMask
|
}
|
|
/*
|
获取图标
|
0停止 1运行 2一级报警 3二级报警
|
*/
|
const getPointImg = (status) => {
|
if(status === '运行中') {
|
return postRun
|
}else if(status === '一级报警' || status === '二级报警'){
|
return warnWarn
|
}else{
|
return warnStop
|
}
|
}
|
|
const getPointData = () => {
|
getPointFacityList().then(res => {
|
pointData.value = res.data.map(item => {
|
return {
|
...item,
|
showMask: false
|
}
|
})
|
})
|
}
|
|
const getFacity = () => {
|
staticFacity().then(res => {
|
facityData.value = res.data
|
})
|
}
|
|
const getOrder = () => {
|
const searchdata = {
|
limit: 100,
|
page: 1
|
}
|
staticOrder(searchdata).then(res => {
|
orderData.value = res.data.list
|
})
|
}
|
|
|
onMounted(() => {
|
getPointData()
|
getFacity()
|
getOrder()
|
})
|
|
</script>
|
|
|
<style scoped lang="scss">
|
.home{
|
position: absolute;
|
left: 0;
|
top: 7%;
|
width: 100%;
|
height: 93%;
|
background-image: url('@/assets/images/map-bg.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
z-index: 10;
|
.blurBox{ //模糊背景盒子覆盖图片
|
position: absolute;
|
top: -1rem;
|
left: 0;
|
width: 100%;
|
height: 3%;
|
background-color: #000;
|
filter: blur(10px);
|
}
|
&-t{
|
height: 1%;
|
}
|
&-content{
|
height: 99%;
|
padding: 1rem 1.5rem 0;
|
position: relative;
|
display: flex;
|
.hc-position{
|
width: 70%;
|
height: 100%;
|
position: relative;
|
.point{
|
position: absolute;
|
width: 32px;
|
height: 80px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
.msg-l{
|
width: 250px;
|
height: 160px;
|
position: absolute;
|
left: -245px;
|
top: 0;
|
background-image: url('@/assets/images/screen/msg-box-l.png');
|
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;
|
height: 160px;
|
position: absolute;
|
left: 30px;
|
top: 0;
|
background-image: url('@/assets/images/screen/msg-box-r.png');
|
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;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
.hc-info{
|
width: 30%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
gap: 1rem;
|
.item{
|
width: 100%;
|
height: 50%;
|
background-image: url("@/assets/images/screen/ct-default.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
&-t{
|
color: #fff;
|
height: 3rem;
|
line-height: 3rem;
|
padding-left: 2.5rem;
|
}
|
&-c{
|
color: #fff;
|
height: calc(100% - 3rem);
|
padding: 1rem 0.5rem;
|
}
|
}
|
}
|
}
|
}
|
|
:deep(.el-table){
|
--el-table-border-color: #000;
|
--el-table-bg-color: transparent;
|
th{
|
font-size: 12px;
|
color: #fff;
|
}
|
tr{
|
font-size: 12px;
|
color: #fff;
|
}
|
.el-table__cell{
|
border: none;
|
}
|
}
|
</style>
|
