水放大屏 添加单位
机械分厂设备大屏 提醒添加无数据状态
This commit is contained in:
hzz
parent
7fa4b866f1
commit
7d4dab8429
@ -11,10 +11,12 @@
|
|||||||
<div style="height: 100%; width: 100%">
|
<div style="height: 100%; width: 100%">
|
||||||
<h2 class="components-header">{{ title }}</h2>
|
<h2 class="components-header">{{ title }}</h2>
|
||||||
<div class="components-content" :key="keynum">
|
<div class="components-content" :key="keynum">
|
||||||
<swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0" direction="vertical" :autoplay="{
|
<swiper-container :slidesPerView="props.per_view" :loop="true" :initialSlide="0" :spaceBetween="0"
|
||||||
delay: 3000,
|
direction="vertical" :autoplay="{
|
||||||
disableOnInteraction: false,
|
delay: 3000,
|
||||||
}" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
|
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">
|
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
|
||||||
<div class="itemclass">
|
<div class="itemclass">
|
||||||
<el-row :gutter="5" class="row-flex">
|
<el-row :gutter="5" class="row-flex">
|
||||||
@ -29,32 +31,38 @@
|
|||||||
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
||||||
</p>
|
</p>
|
||||||
</el-col>
|
</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>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</swiper-slide>
|
</swiper-slide>
|
||||||
<template v-if="props.tipList.length>=props.per_view && props.tipList.length<props.per_view*2">
|
<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">
|
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
|
||||||
<div class="itemclass">
|
<div class="itemclass">
|
||||||
<el-row :gutter="5" class="row-flex">
|
<el-row :gutter="5" class="row-flex">
|
||||||
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
|
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18" class="col-flex"
|
<el-col :span="18" class="col-flex"
|
||||||
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
||||||
<p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
|
<p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
|
||||||
<p style="margin-top: 10px 0;">
|
<p style="margin-top: 10px 0;">
|
||||||
<span>{{ label.date }}：</span><span>{{ res.date }}</span>
|
<span>{{ label.date }}：</span><span>{{ res.date }}</span>
|
||||||
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
||||||
</p>
|
</p>
|
||||||
</el-col>
|
</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;"
|
||||||
</el-row>
|
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"> {{ res.status }} </el-col>
|
||||||
</div>
|
</el-row>
|
||||||
</swiper-slide>
|
</div>
|
||||||
</template>
|
</swiper-slide>
|
||||||
|
</template>
|
||||||
</swiper-container>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -64,18 +72,18 @@ import { register } from "swiper/element/bundle";
|
|||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
let { t } = useI18n();
|
let { t } = useI18n();
|
||||||
register();
|
register();
|
||||||
const props:any = defineProps({
|
const props: any = defineProps({
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
tipList: {
|
tipList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: [{name:'',date:'',duration:'',status:''}],
|
default: [{ name: '', date: '', duration: '', status: '' }],
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: { name: "设备名称", date: "保养日期", duration: "保养时长"}
|
default: { name: "设备名称", date: "保养日期", duration: "保养时长" }
|
||||||
},
|
},
|
||||||
per_view: {
|
per_view: {
|
||||||
type: Number,
|
type: Number,
|
||||||
@ -83,11 +91,11 @@ const props:any = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
let compare = {
|
let compare = {
|
||||||
'进行中':'#83C710',
|
'进行中': '#83C710',
|
||||||
'未开始':'#E44610',
|
'未开始': '#E44610',
|
||||||
'未进行':'#E54711',
|
'未进行': '#E54711',
|
||||||
'故障':'#DA0F10',
|
'故障': '#DA0F10',
|
||||||
'维修中':'#83C710',
|
'维修中': '#83C710',
|
||||||
}
|
}
|
||||||
let useSwiper: any = ref(null);
|
let useSwiper: any = ref(null);
|
||||||
let swiperRef = ref(null);
|
let swiperRef = ref(null);
|
||||||
@ -144,6 +152,5 @@ swiper-container {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -88,9 +88,9 @@ document.title = t('messages.南门水房物联监测系统')
|
|||||||
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
||||||
//进水量 出水量 用电量 最大值 最小值 平均值
|
//进水量 出水量 用电量 最大值 最小值 平均值
|
||||||
let mathList = reactive([
|
let mathList = reactive([
|
||||||
{ color: '#5470C6', name: '进水量', max: 100, min: 0, avg: 50 },
|
{ color: '#5470C6', name: '进水量（m³）', max: 100, min: 0, avg: 50 },
|
||||||
{ color: '#91CC75', name: '出水量', max: 100, min: 0, avg: 50 },
|
{ color: '#91CC75', name: '出水量（m³）', max: 100, min: 0, avg: 50 },
|
||||||
{ color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
|
{ color: '#EE6666', name: '用电量（kW·h）', max: 100, min: 0, avg: 50 }
|
||||||
])
|
])
|
||||||
|
|
||||||
function initChart(date,inChart, outChart, currentChart) {
|
function initChart(date,inChart, outChart, currentChart) {
|
||||||
@ -123,11 +123,11 @@ function initChart(date,inChart, outChart, currentChart) {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '水量',
|
name: '水量（m³）',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '电量',
|
name: '电量（kW·h）',
|
||||||
position: 'right',
|
position: 'right',
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user