LiLongLong
/
graphite_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

溶液容量小浮层

master
zhangjiming 5 months ago
parent
01d8848da8
commit
e83beb36d7
3 changed files with 42 additions and 160 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/addLiquid/addLiquid.vue
  2. 21
      src/views/components/Footer.vue
  3. 177
      src/views/components/Liquid.vue

2
src/views/addLiquid/addLiquid.vue
View File

@ -71,7 +71,7 @@ function liquidOptionDisabled(liquidId: number) {
return !!settingStore.heatContainers.find(h => h.solutionId !== 0 && h.solutionId === liquidId); return !!settingStore.heatContainers.find(h => h.solutionId !== 0 && h.solutionId === liquidId);
} }
</script> </script>
<style lang="scss">
<style lang="scss" scoped>
.liquid-container { .liquid-container {
background-image: url("@/assets/container.svg"); background-image: url("@/assets/container.svg");
background-size: cover; background-size: cover;

21
src/views/components/Footer.vue
View File

@ -5,27 +5,12 @@
<span class="ins_text text_size">等待指令</span> <span class="ins_text text_size">等待指令</span>
</div> </div>
<div class="footer_waste">
<van-popover v-model:show="showContainerPopover" placement="top-end">
<template #reference>
<div class="footer_container">
<div class="circle" style="background-color: #f2652d"></div>
<div class="waste_status text_size" style="color: #f2652d">碱中和容器余量低</div>
<div class="waste_detail">
<button class="text_size"><van-icon name="arrow" /></button>
</div>
</div>
</template>
<Liquid></Liquid>
</van-popover>
</div>
<div class="footer_normal"> <div class="footer_normal">
<van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover"> <van-popover v-model:show="showWastePopover" placement="top-end" class="waste_popover">
<template #reference> <template #reference>
<div class="footer_container"> <div class="footer_container">
<div class="circle"></div> <div class="circle"></div>
<div class="waste_status text_size">溶液正常</div>
<div class="waste_status text_size font-medium underline text-primary">溶液正常</div>
<div class="waste_detail"> <div class="waste_detail">
<button class="text_size"><van-icon name="arrow" /></button> <button class="text_size"><van-icon name="arrow" /></button>
</div> </div>
@ -64,7 +49,7 @@ const showWastePopover = ref(false);
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 5px; border-radius: 5px;
width: 13.4375rem;
min-width: 13.4375rem;
height: 2.5rem; height: 2.5rem;
background: #ffffff; background: #ffffff;
margin-left: 1.5rem; margin-left: 1.5rem;
@ -88,7 +73,7 @@ const showWastePopover = ref(false);
.circle { .circle {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
background-color: green;
background-color: #26D574;
border-radius: 50%; border-radius: 50%;
margin-left: 10px; margin-left: 10px;
} }

177
src/views/components/Liquid.vue
View File

@ -1,147 +1,44 @@
<template> <template>
<div class="liquid">
<div class="liquid_status">废液回收状态</div>
<div class="liquid_pos">
<div class="contail_percentage"></div>
<div class="liquid_percent" style="height: 50%;"></div>
<div class="percent_num">50%</div>
</div>
<div class="container_water_name">
碱中和容器
</div>
<br/>
<div>
<div class="liquid_status">溶液容器状态</div>
<div class="solu_list">
<div v-for="solu in solutionList" :key="solu.id">
<div class="liquid_pos">
<div class="contail_percentage"></div>
<div class="liquid_percent" :style="`height: ${solu.percentage};background-color:${solu.color}`"></div>
<div class="percent_num">{{ solu.percentage }}</div>
<div class="w-[340px] py-4">
<div>
<div class="text-sm font-medium text-text px-6">溶液容器状态</div>
<div class="flex flex-wrap px-6 py-3 gap-x-8 gap-y-4">
<div
v-for="container in settingStore.heatContainerWithLiquid"
:key="container.id"
class="flex flex-col items-center justify-center">
<div class="liquid-container relative w-[42px] h-[58px] rounded-lg overflow-hidden">
<div
class="absolute left-0 w-full bottom-0 bg-[#26D574]"
:style="`height: ${
((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100
}%; background: ${
container.capacityTotal - container.capacityUsed <
(settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
? '#EE8223'
: '#26D574'
}`"></div>
<span class="absolute text-xs left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white">{{
`${
((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100
}%`
}}</span>
</div> </div>
<div class="solu_name">
{{ solu.name }}
</div>
</div>
</div>
</div>
</div>
<div class="text-xs text-[#666] mt-2">{{ container.solution.name }}</div>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'
const solutionList = ref([{
id : 1,
name: '硫酸',
percentage: '10%',
color: 'red'
},{
id : 2,
name: '硫酸',
percentage: '20%',
color:"#07a16e"
},{
id : 3,
name: '硫酸',
percentage: '30%',
color:"#07a16e"
},{
id : 4,
name: '硫酸',
percentage: '40%',
color:"#aa8538"
},{
id : 5,
name: '硫酸',
percentage: '50%',
color:"#cf67e7"
},{
id : 6,
name: '硫酸',
percentage: '10%',
color:"#cf67e7"
},{
id : 7,
name: '硫酸',
percentage: '20%',
color:"#07a16e"
},{
id : 8,
name: '硫酸',
percentage: '30%',
}])
import { useSettingStore } from "@/stores/setting";
const settingStore = useSettingStore();
</script> </script>
<style lang="css" scoped>
.liquid{
background: #EEEFF8;
width: 680px;
height: 690px;
.liquid_pos{
position: relative;
width: 100px;
height: 116px;
margin-top: 36px;
margin-left: 50px;
}
.liquid_status{
height: 29px;
font-family: Source Han Sans;
font-size: 30px;
font-weight: 500;
color: #40474E;
padding-top: 19px;
}
.contail_percentage{
position: absolute;
width: 83px;
height: 116px;
background-image: url('@/assets/container.svg');
background-size: cover;
background-position: center;
z-index: 1;
border-radius: 10px;
}
.liquid_percent {
position: absolute;
bottom: 0;
width: 83px;
background-color: blue;
opacity: 0.5;
z-index: 2;
border-radius: 0 0 10px 10px;
}
.container_water_name{
font-family: 思源黑体;
font-size: 26px;
font-weight: 500;
color: #9E9E9E;
margin-left: 45px;
}
}
.solu_list{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap:2px
}
.solu_name{
font-family: 思源黑体;
font-size: 26px;
font-weight: 500;
color: #9E9E9E;
margin-left: 65px;
}
.percent_num{
font-size: 30px;
position: relative;
z-index: 2;
top: 60px;
left: 20px;
}
<style lang="scss" scoped>
.liquid-container {
background-image: url("@/assets/container.svg");
background-size: cover;
background-position: center;
}
</style> </style>
Write Preview
Loading…
Cancel
Save