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

优化容器显示（瓶嘴以下）

master
zhangjiming 5 months ago
parent
11841d614d
commit
e3618983c7
2 changed files with 36 additions and 70 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. 42
      src/views/addLiquid/addLiquid.vue
  2. 18
      src/views/components/Liquid.vue

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

@ -22,8 +22,8 @@
</el-select> </el-select>
</div> </div>
<div class="flex-auto flex flex-col items-center justify-center gap-[.625rem]"> <div class="flex-auto flex flex-col items-center justify-center gap-[.625rem]">
<!-- <div
class="bg-[url(@/assets/container.svg)] bg-cover relative w-[5rem] h-[7.125rem] rounded-lg overflow-hidden">
<div class="bg-[url(@/assets/container.svg)] bg-cover relative w-[5rem] h-[7.125rem]">
<div class="absolute top-[1rem] bottom-0 w-full rounded-lg overflow-hidden">
<div <div
class="absolute left-0 w-full bottom-0 bg-[#26D574]" class="absolute left-0 w-full bottom-0 bg-[#26D574]"
:style="`height: ${ :style="`height: ${
@ -37,43 +37,7 @@
<span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white">{{ <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-white">{{
container.capacityTotal - container.capacityUsed container.capacityTotal - container.capacityUsed
}}</span> }}</span>
</div> -->
<div class="relative self-center">
<svg
:key="container.id"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
fill="none"
width="59"
height="82.99996948242188"
viewBox="0 0 59 82.99996948242188">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop
:offset="`${(container.capacityUsed / container.capacityTotal) * 100}%`"
style="stop-color: #ccc; stop-opacity: 1" />
<stop
:offset="`${(container.capacityUsed / container.capacityTotal) * 100}%`"
style="stop-color: #26D574; stop-opacity: 1" />
<stop
offset="100%"
:style="`stop-color: ${
container.capacityTotal - container.capacityUsed <
(settingStore.liquidWarningSetting ? +settingStore.liquidWarningSetting.value : 0)
? '#EE8223'
: '#26D574'
}; stop-opacity: 1`" />
</linearGradient>
</defs>
<g>
<path
d="M0,19.6804L0,23.3883C0,23.7034,0.253993,23.9588,0.567308,23.9588C0.880623,23.9588,1.13462,24.2142,1.13462,24.5292L1.13462,26.811C1.13462,27.126,0.880623,27.3814,0.567308,27.3814C0.253993,27.3814,0,27.6368,0,27.9519L0,33.0859C0,33.4009,0.253993,33.6563,0.567308,33.6563C0.880623,33.6563,1.13462,33.9117,1.13462,34.2268L1.13462,36.5086C1.13462,36.8236,0.880623,37.079,0.567308,37.079C0.253993,37.079,0,37.3344,0,37.6495L0,44.4948C0,44.8099,0.253993,45.0653,0.567308,45.0653C0.880623,45.0653,1.13462,45.3207,1.13462,45.6357L1.13462,47.9175C1.13462,48.2326,0.880623,48.488,0.567308,48.488C0.253993,48.488,0,48.7434,0,49.0584L0,55.9038C0,56.2188,0.253993,56.4742,0.567308,56.4742C0.880623,56.4742,1.13462,56.7296,1.13462,57.0446L1.13462,59.3264C1.13462,59.6415,0.880623,59.8969,0.567308,59.8969C0.253993,59.8969,0,60.1523,0,60.4673L0,66.7422C0,67.0573,0.253993,67.3127,0.567308,67.3127C0.880623,67.3127,1.13462,67.5681,1.13462,67.8831L1.13462,70.4501C1.13462,70.7652,0.880623,71.0206,0.567308,71.0206C0.253993,71.0206,0,71.276,0,71.591L0,75.0137C0,79.4244,3.55589,83,7.94231,83L51.0577,83C55.4441,83,59,79.4244,59,75.0137L59,71.591C59,71.276,58.746,71.0206,58.4327,71.0206C58.1194,71.0206,57.8654,70.7652,57.8654,70.4501L57.8654,67.8831C57.8654,67.5681,58.1194,67.3127,58.4327,67.3127C58.746,67.3127,59,67.0573,59,66.7422L59,60.4673C59,60.1523,58.746,59.8969,58.4327,59.8969C58.1194,59.8969,57.8654,59.6415,57.8654,59.3264L57.8654,57.0446C57.8654,56.7296,58.1194,56.4742,58.4327,56.4742C58.746,56.4742,59,56.2188,59,55.9038L59,49.0584C59,48.7434,58.746,48.488,58.4327,48.488C58.1194,48.488,57.8654,48.2326,57.8654,47.9175L57.8654,45.6357C57.8654,45.3207,58.1194,45.0653,58.4327,45.0653C58.746,45.0653,59,44.8099,59,44.4948L59,37.6495C59,37.3344,58.746,37.079,58.4327,37.079C58.1194,37.079,57.8654,36.8236,57.8654,36.5086L57.8654,34.2268C57.8654,33.9117,58.1194,33.6563,58.4327,33.6563C58.746,33.6563,59,33.4009,59,33.0859L59,27.9519C59,27.6368,58.746,27.3814,58.4327,27.3814C58.1194,27.3814,57.8654,27.126,57.8654,26.811L57.8654,24.5292C57.8654,24.2142,58.1194,23.9588,58.4327,23.9588C58.746,23.9588,59,23.7034,59,23.3883L59,19.6804C59,15.2697,55.4441,11.6942,51.0577,11.6942L49.0186,11.6942C48.2009,11.6942,47.7915,10.7001,48.3696,10.1188C50.0908,8.38809,51.0577,6.04079,51.0577,3.59325L51.0577,1.71134C51.0577,0.766193,50.2957,0,49.3558,0L9.64423,0C8.70429,0,7.94231,0.766193,7.94231,1.71134L7.94231,3.59325C7.94231,6.04079,8.90924,8.38809,10.6304,10.1188C11.2086,10.7001,10.7991,11.6942,9.98143,11.6942L7.94231,11.6942C3.55589,11.6942,0,15.2697,0,19.6804Z"
fill="url(#grad1)"
fill-opacity="1" />
</g>
</svg>
<p class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white">XX</p>
</div>
</div> </div>
<div class="h-6 bg-white rounded-full px-3 flex justify-center items-center text-xs min-w-20"> <div class="h-6 bg-white rounded-full px-3 flex justify-center items-center text-xs min-w-20">
<span class="font-bold">{{ container.capacityTotal - container.capacityUsed }}</span <span class="font-bold">{{ container.capacityTotal - container.capacityUsed }}</span

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

@ -7,10 +7,11 @@
v-for="container in settingStore.heatContainerWithLiquid" v-for="container in settingStore.heatContainerWithLiquid"
:key="container.id" :key="container.id"
class="flex flex-col items-center justify-center"> class="flex flex-col items-center justify-center">
<div class=" bg-[url(@/assets/container.svg)] bg-cover relative w-[42px] h-[58px] rounded-lg overflow-hidden">
<div class="bg-[url(@/assets/container.svg)] bg-cover relative w-[42px] h-[58px]">
<div class="absolute top-[8px] bottom-0 w-full rounded overflow-hidden">
<div <div
class="absolute left-0 w-full bottom-0 bg-[#26D574]" class="absolute left-0 w-full bottom-0 bg-[#26D574]"
:style="`height: ${
:style="`height:${
((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100 ((container.capacityTotal - container.capacityUsed) / container.capacityTotal) * 100
}%; background: ${ }%; background: ${
container.capacityTotal - container.capacityUsed < container.capacityTotal - container.capacityUsed <
@ -18,11 +19,13 @@
? '#EE8223' ? '#EE8223'
: '#26D574' : '#26D574'
}`"></div> }`"></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>
<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>
<div class="text-xs text-[#666] mt-2">{{ container.solution.name }}</div> <div class="text-xs text-[#666] mt-2">{{ container.solution.name }}</div>
</div> </div>
@ -35,4 +38,3 @@ import { useSettingStore } from "@/stores/setting";
const settingStore = useSettingStore(); const settingStore = useSettingStore();
</script> </script>
Write Preview
Loading…
Cancel
Save