Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏修改

Browse Source
This commit is contained in:
“13713575202” 2025-04-15 14:02:17 +08:00
parent 91302d97cd
commit a4a41a9b16
3 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sub-government-screen-service/src/views/home/components/inputs.vue
View File

@ -50,12 +50,12 @@ let topTitle = ref('');
let pos = ref('');
const datalist = reactive([
{ label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
{ label: '种子使用(吨)', value: 4800, icon: 'provenance.png' },
{ label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
{ label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' },
{ label: '种源使用', value: 4800, icon: 'provenance.png' },
{ label: '兽药(吨)', value: 10, icon: 'animalm.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(() => {

12
sub-government-screen-service/src/views/trace/components/codeNumCharts.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="code-num-charts">
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg1.png') + ')' }">
<div class="num-txt-pos">
<template v-for="(n, index) in valData" :key="index">
<div class="num-txt-warp">
<div class="num-txt">
<div class="val">{{ n.value }}</div>
<div class="label">{{ n.name }}</div>
</div>
</template>
</div>
</template>
</div>
<div class="code-pie">
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
@ -271,13 +271,13 @@ div {
top: 50%;
width: 80%;
transform: translateY(-50%);
background-size: contain;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left center;
height: 100%;
.num-txt-pos {
height: 90%;
.num-txt-warp {
width: 100%;
height: 100%;
height: calc((100% - 4px) / 2);
display: inline-flex;
justify-content: center;
flex-direction: column;

29
sub-government-screen-service/src/views/trace/components/mainPartCharts.vue
View File

@ -1,19 +1,19 @@
<template>
<div class="main-part-charts">
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg2.png') + ')' }">
<div class="num-txt-pos">
<template v-for="(n, index) in valData" :key="index">
<div class="num-txt-warp">
<div class="num-txt">
<div class="label">
<span>{{ n.name }}</span>
<span class="label-val">{{ n.name }}</span>
</div>
<div class="val">
<span class="val-val">{{ n.value }}</span>
<span class="unit">{{ n.unit }}</span>
</div>
</div>
</template>
</div>
</template>
</div>
<div class="code-pie">
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
@ -265,26 +265,30 @@ div {
position: absolute;
right: 0;
top: 50%;
width: 80%;
width: 60%;
transform: translateY(-50%);
background-size: contain;
height: 90%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left center;
height: 100%;
padding: 10% 0 10% 18%;
.num-txt-pos {
display: inline-flex;
justify-content: space-around;
flex-direction: column;
gap: 4;
.num-txt-warp {
width: 100%;
height: 100%;
padding-left: 18%;
display: inline-flex;
justify-content: center;
flex-direction: column;
height: calc((100% - 8px) / 3);
}
.num-txt {
width: 72%;
display: inline-flex;
justify-content: space-between;
padding: 0 16px;
line-height: 30px;
.val,
.label {
vertical-align: middle;
@ -303,6 +307,10 @@ div {
}
}
.label {
display: inline-flex;
flex-direction: column;
justify-content: center;
.label-val {
font-size: 12px;
font-weight: bold;
display: inline-flex;
@ -313,6 +321,7 @@ div {
color: #fff;
text-shadow: -2px 0 0 1px #add8f1;
}
}
.unit {
font-size: 8px;