水放大屏 添加单位

机械分厂设备大屏 提醒添加无数据状态
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

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="{
<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">
}" 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,7 +31,8 @@
<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>
@ -48,14 +51,19 @@
<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>
</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>
<script setup lang="ts">
@ -144,6 +152,5 @@ swiper-container {
width: 100%;
height: 100%;
display: inline-block !important;
}
</style>
}</style>

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: '进水量', max: 100, min: 0, avg: 50 },
{ color: '#91CC75', name: '出水量', 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: '水量',
},
{
type: 'value',
name: '电量',
name: '电量kW·h',
position: 'right',
axisLine: {
show: true,