72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
||
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
default: () => '',
|
||
|
|
validator: (items) => {
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
showImage: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
imageList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-card style="border-radius: 16px; min-height: 316px">
|
||
|
|
<div class="my-card-title" style="">{{ title }}</div>
|
||
|
|
<div v-for="(item, index) in data" :key="index" class="show-data-box">
|
||
|
|
<div class="left-title">{{ item.title }}:</div>
|
||
|
|
<div :style="{ color: item.status == '0' ? '#FE4066' : '#25BF82' }">{{ item.statusText }}</div>
|
||
|
|
</div>
|
||
|
|
<div v-if="showImage">
|
||
|
|
<p style="font-size: 14px; text-align: left; color: #000000; margin-bottom: 10px">灌溉记录:</p>
|
||
|
|
<el-image
|
||
|
|
style="width: 100%"
|
||
|
|
:src="imageList[0]"
|
||
|
|
:zoom-rate="1.2"
|
||
|
|
:max-scale="7"
|
||
|
|
:min-scale="0.2"
|
||
|
|
:preview-src-list="imageList"
|
||
|
|
show-progress
|
||
|
|
:initial-index="4"
|
||
|
|
fit="cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.my-card-title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
text-align: left;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.show-data-box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 7px 0;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
</style>
|