hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

水放大屏 添加单位

Browse Source 
机械分厂设备大屏 提醒添加无数据状态
This commit is contained in:
hzz 2023-06-21 16:58:51 +08:00
parent 7fa4b866f1
commit 7d4dab8429
2 changed files with 47 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/Mechanics/components/devStatusTip.vue
View File

@ -11,10 +11,12 @@
<div style="height: 100%; width: 100%">
<h2 class="components-header">{{ title }}</h2>
<div class="components-content" :key="keynum">
<swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0" direction="vertical" :autoplay="{
delay: 3000,
disableOnInteraction: false,
}" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
<swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0"
direction="vertical" :autoplay="{
delay: 3000,
disableOnInteraction: false,
}" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1"
@slidechange="onSlideChange" v-if="props.tipList.length > 0">
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
<div class="itemclass">
<el-row :gutter="5" class="row-flex">
@ -29,32 +31,38 @@
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
</p>
</el-col>
<el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </el-col>
<el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;"
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"> {{ res.status }} </el-col>
</el-row>
</div>
</swiper-slide>
<template v-if="props.tipList.length>=props.per_view && props.tipList.length<props.per_view*2">
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
<div class="itemclass">
<el-row :gutter="5" class="row-flex">
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
{{ index + 1 }}
</el-col>
<el-col :span="18" class="col-flex"
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
<p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
<p style="margin-top: 10px 0;">
<span>{{ label.date }}：</span><span>{{ res.date }}</span> &nbsp;
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
</p>
</el-col>
<el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </el-col>
</el-row>
</div>
</swiper-slide>
</template>
<template v-if="props.tipList.length >= props.per_view && props.tipList.length < props.per_view * 2">
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
<div class="itemclass">
<el-row :gutter="5" class="row-flex">
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
{{ index + 1 }}
</el-col>
<el-col :span="18" class="col-flex"
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
<p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
<p style="margin-top: 10px 0;">
<span>{{ label.date }}：</span><span>{{ res.date }}</span> &nbsp;
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
</p>
</el-col>
<el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;"
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"> {{ res.status }} </el-col>
</el-row>
</div>
</swiper-slide>
</template>
</swiper-container>
<div v-else style="display: flex; align-items: center;width: 100%;height: 100%;justify-content: center;">
<el-empty :image-size="120" />
</div>
</div>
</div>
</template>
@ -64,18 +72,18 @@ import { register } from "swiper/element/bundle";
import { useI18n } from "vue-i18n";
let { t } = useI18n();
register();
const props:any = defineProps({
const props: any = defineProps({
title: {
type: String,
default: "",
},
tipList: {
type: Array,
default: [{name:'',date:'',duration:'',status:''}],
default: [{ name: '', date: '', duration: '', status: '' }],
},
label: {
type: Object,
default: { name: "设备名称", date: "保养日期", duration: "保养时长"}
default: { name: "设备名称", date: "保养日期", duration: "保养时长" }
},
per_view: {
type: Number,
@ -83,11 +91,11 @@ const props:any = defineProps({
},
});
let compare = {
'进行中':'#83C710',
'未开始':'#E44610',
'未进行':'#E54711',
'故障':'#DA0F10',
'维修中':'#83C710',
'进行中': '#83C710',
'未开始': '#E44610',
'未进行': '#E54711',
'故障': '#DA0F10',
'维修中': '#83C710',
}
let useSwiper: any = ref(null);
let swiperRef = ref(null);
@ -144,6 +152,5 @@ swiper-container {
width: 100%;
height: 100%;
display: inline-block !important;
}
</style>
}</style>

10
src/views/Waterhouse/index.vue
View File

@ -88,9 +88,9 @@ document.title = t('messages.南门水房物联监测系统')
const colors = ['#5470C6', '#91CC75', '#EE6666'];
//进水量 出水量 用电量 最大值 最小值 平均值
let mathList = reactive([
{ color: '#5470C6', name: '进水量', max: 100, min: 0, avg: 50 },
{ color: '#91CC75', name: '出水量', max: 100, min: 0, avg: 50 },
{ color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
{ color: '#5470C6', name: '进水量（m³）', max: 100, min: 0, avg: 50 },
{ color: '#91CC75', name: '出水量（m³）', max: 100, min: 0, avg: 50 },
{ color: '#EE6666', name: '用电量（kW·h）', max: 100, min: 0, avg: 50 }
])
function initChart(date,inChart, outChart, currentChart) {
@ -123,11 +123,11 @@ function initChart(date,inChart, outChart, currentChart) {
yAxis: [
{
type: 'value',
name: '水量',
name: '水量（m³）',
},
{
type: 'value',
name: '电量',
name: '电量（kW·h）',
position: 'right',
axisLine: {
show: true,