154 lines
3.5 KiB
Vue
154 lines
3.5 KiB
Vue
<template>
|
|
<div class="home-inputs-warp">
|
|
<div class="data-item-row">
|
|
<div
|
|
v-for="(n, index) in datalist"
|
|
:key="index"
|
|
class="data-item"
|
|
:style="{
|
|
height: 'calc((100% - 20px)' + ' / ' + datalist.length / 2 + ')',
|
|
'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg2.png') + ')',
|
|
}"
|
|
>
|
|
<div class="data-warp">
|
|
<div class="data-pos">
|
|
<div class="data-pos-center">
|
|
<div class="c">
|
|
<span class="label">{{ n.label }}</span>
|
|
<span class="value">{{ n.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="small-bg">
|
|
<img :src="getAssetsFile('images/vsualized/home/partbg3.png')" />
|
|
<img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { useApp } from '@/hooks';
|
|
|
|
const router = useRouter();
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '统计分析',
|
|
},
|
|
postion: {
|
|
type: String,
|
|
default: 'left',
|
|
},
|
|
});
|
|
|
|
let topTitle = ref('');
|
|
let pos = ref('');
|
|
|
|
const datalist = reactive([
|
|
{ label: '种子使用(吨)', value: 4800, icon: 'provenance.png' },
|
|
{ label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
|
|
{ label: '化肥使用(吨)', value: 9000, icon: 'fertilizer.png' },
|
|
{ label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
|
|
{ label: '兽药(吨)', value: 10, icon: 'animalm.png' },
|
|
{ label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
|
|
]);
|
|
|
|
onMounted(() => {
|
|
if (datalist.length) {
|
|
datalist.forEach((m, index) => {
|
|
let num = 100;
|
|
m.value = (m.value + Math.random() + num).toFixed(2);
|
|
});
|
|
}
|
|
});
|
|
|
|
watch(
|
|
() => (props.title, props.postion),
|
|
() => {
|
|
topTitle.value = props.title;
|
|
pos.value = props.postion;
|
|
},
|
|
{
|
|
deep: true,
|
|
immediate: true,
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.home-inputs-warp {
|
|
height: 100%;
|
|
.data-item-row {
|
|
height: 100%;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
.data-item {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
width: calc((100% - 20px) / 2);
|
|
}
|
|
.data-warp {
|
|
padding: 8px;
|
|
text-align: center;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
padding-left: 20px;
|
|
.small-bg,
|
|
.data-pos {
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
.data-pos-center {
|
|
display: inline-flex;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
.pos-center {
|
|
}
|
|
}
|
|
}
|
|
.small-bg {
|
|
width: 45px;
|
|
height: 45px;
|
|
position: relative;
|
|
.img-icon {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 38%;
|
|
height: 38%;
|
|
}
|
|
}
|
|
.data-pos {
|
|
width: calc(100% - 54px);
|
|
.label,
|
|
.value {
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.label {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
.value {
|
|
color: #6beff9;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|