chenjinliang
/
disinfection_high_front_end
forked from maochaoying/disinfection_high_front_end
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

progress header

master
maochaoying 2 years ago
parent
7a71077c3f
commit
308cfa4acf
3 changed files with 80 additions and 133 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. BIN
      src/assets/img/operator/time.png
  2. 176
      src/components/Progress.vue
  3. 5
      src/pages/Home.vue

BIN
src/assets/img/operator/time.png
View File

Side by Side

After

Width: 377  |  Height: 61  |  Size: 4.6 KiB

176
src/components/Progress.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<div class="progress_container"> <div class="progress_container">
<div class="header_wrap"> <div class="header_wrap">
<div class="left_progress">
<div class="left_time_tag">剩余时间</div>
<div class="left_time">
<p class="time"> <p class="time">
{{ {{
operatorStore.estimatedRemainingTimeS == 0 operatorStore.estimatedRemainingTimeS == 0
@ -10,52 +9,49 @@
: `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}` : `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
}} }}
</p> </p>
<p class="pre_time">预热时间约5分钟</p>
<!-- <div class="progress_bg">
<div
class="pro"
:style="{
'--width': '325px',
}"
></div>
</div> -->
</div> </div>
<div class="right_btns">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="none"
version="1.1"
width="181"
height="52"
viewBox="0 0 181 52"
>
<g>
<g>
<g>
<path
d="M82.64,13.3438C81.84,15.7875,80.28,18.9925,79.12,21.0362L83.28,22.5987C84.52000000000001,20.6756,86,17.8306,87.28,15.0263L82.64,13.3438ZM62.72,15.4269C64.28,17.7506,65.84,20.8756,66.36,22.8794L70.72,20.8356C70.08,18.7925,68.4,15.8275,66.8,13.6244L62.72,15.4269ZM52,16.1481C54.480000000000004,17.4706,57.56,19.5537,59,21.0762L61.96,17.35C60.4,15.8675,57.24,13.9444,54.8,12.7825L52,16.1481ZM50.12,26.76C52.68,28.08,55.88,30.2,57.32,31.72L60.24,27.96C58.6,26.48,55.36,24.56,52.84,23.36L50.12,26.76ZM51.24,46.76L55.480000000000004,49.84C57.6,45.8,59.84,41.12,61.68,36.84L58.16,33.92C55.96,38.64,53.2,43.68,51.24,46.76ZM68.68,35.08L80.88,35.08L80.88,38.08L68.68,38.08L68.68,35.08ZM68.68,31.04L68.68,28.08L80.88,28.08L80.88,31.04L68.68,31.04ZM72.48,12.4225L72.48,23.64L64,23.64L64,49.9606L68.68,49.9606L68.68,42.12L80.88,42.12L80.88,44.76C80.88,45.28,80.68,45.48,80.03999999999999,45.52C79.44,45.52,77.32,45.52,75.48,45.4C76.12,46.64,76.76,48.64,76.92,49.92C79.96000000000001,49.92,82.08,49.88,83.6,49.12C85.12,48.4,85.56,47.12,85.56,44.84L85.56,23.64L77.32,23.64L77.32,12.4225L72.48,12.4225ZM121.2,33.76L121.08,35.92L114.16,35.92L115.16,35.36C115,34.88,114.64,34.32,114.16,33.76L121.2,33.76ZM100.72,30.32C100.6,32.08,100.44,34,100.24000000000001,35.92L94.28,35.92L94.28,39.44L99.88,39.44C99.6,41.56,99.36,43.52,99.08,45.12L119.96,45.12C119.8,45.6,119.64,45.88,119.48,46.08C119.12,46.52,118.76,46.6,118.08,46.6C117.36,46.64,115.8,46.6,114.08,46.44C114.6,47.36,115.08,48.84,115.12,49.8C117.2,49.8812,119.2,49.9219,120.44,49.72C121.72,49.6,122.8,49.28,123.68,48.2C124.12,47.64,124.52,46.68,124.84,45.12L129.44,45.12L129.44,41.68L125.36,41.68L125.56,39.44L131.72,39.44L131.72,35.92L125.84,35.92L126.04,32.16C126.08,31.6,126.12,30.32,126.12,30.32L100.72,30.32ZM110.08,34.24C110.56,34.72,111,35.32,111.4,35.92L104.96000000000001,35.92L105.16,33.76L111,33.76L110.08,34.24ZM120.84,39.44L120.6,41.68L113.68,41.68L114.96,41C114.76,40.52,114.4,39.96,113.96,39.44L120.84,39.44ZM109.75999999999999,39.88C110.28,40.4,110.8,41.04,111.16,41.68L104.32,41.68L104.6,39.44L110.6,39.44L109.75999999999999,39.88ZM110.52000000000001,12.4262L110.52000000000001,15.36L97.2,15.36L97.2,18.72L110.52000000000001,18.72L110.52000000000001,20.36L99.88,20.36L99.88,23.68L110.52000000000001,23.68L110.52000000000001,25.4L95.36,25.4L95.36,28.88L130.64,28.88L130.64,25.4L115.44,25.4L115.44,23.68L126.64,23.68L126.64,20.36L115.44,20.36L115.44,18.72L129.36,18.72L129.36,15.36L115.44,15.36L115.44,12.4262L110.52000000000001,12.4262ZM154.36,12.4231L154.36,19.4L140.51999999999998,19.4L140.51999999999998,39.6838L145.32,39.6838L145.32,37.48L154.36,37.48L154.36,50.0187L159.44,50.0187L159.44,37.48L168.51999999999998,37.48L168.51999999999998,39.4831L173.56,39.4831L173.56,19.4L159.44,19.4L159.44,12.4231L154.36,12.4231ZM145.32,32.76L145.32,24.12L154.36,24.12L154.36,32.76L145.32,32.76ZM168.51999999999998,32.76L159.44,32.76L159.44,24.12L168.51999999999998,24.12L168.51999999999998,32.76Z"
fill="#17F179"
fill-opacity="1"
/>
</g>
<g transform="matrix(0,1,-1,0,52,-22)">
<path
d="M61.3114,50.5847L56.491,45.7322C62.778400000000005,44.923500000000004,67.8084,39.8689,67.8084,33.8033C67.8084,27.9399,63.1976,22.88525,57.1198,21.87432L52.7186,17.62841L54.6048,17.62841C64.24549999999999,17.62841,72,24.9071,72,33.8033C72,39.8689,68.2276,45.3279,62.988,47.9563L62.988,52L61.3114,50.5847ZM56.7006,49.776C56.0719,49.776,55.2335,49.9781,54.3952,49.9781C44.75449,49.9781,37,42.6995,37,33.8033C37,27.7377,40.77246,22.27869,46.01198,19.650280000000002L46.01198,15L48.7365,17.62842L52.9281,21.67213C46.43114,22.27869,41.4012,27.5355,41.4012,33.8033C41.4012,39.8689,46.22156,44.923500000000004,52.509,45.7322L56.7006,49.776Z"
fill="#17F179"
fill-opacity="1"
/>
</g>
</g>
</g>
</svg>
<div <div
:class="
[1, 2].includes(operatorStore.disinfectStatus)
? 'btn active'
: 'btn'
"
class="btn"
v-if="[1, 2].includes(operatorStore.disinfectStatus)" v-if="[1, 2].includes(operatorStore.disinfectStatus)"
@click="stopDisinfect" @click="stopDisinfect"
> >
停止消毒
结束消毒
</div> </div>
<div <div
:class="
[0].includes(operatorStore.disinfectStatus) ? 'btn active' : 'btn'
"
class="btn"
v-if="operatorStore.disinfectStatus == 0" v-if="operatorStore.disinfectStatus == 0"
@click="showDetail" @click="showDetail"
> >
返回 返回
</div> </div>
<!-- <div
:class="
operatorStore.disinfectStatus == 1 ? 'btn active ml' : 'btn ml'
"
@click="pauseDisinfect"
>
暂停消毒
</div>
<div
:class="operatorStore.disinfectStatus == 2 ? 'btn active' : 'btn'"
@click="continueDisinfect"
>
继续消毒
</div> -->
</div>
</div> </div>
<div class="echarts_wrap"> <div class="echarts_wrap">
<div class="single_wrap"> <div class="single_wrap">
@ -628,104 +624,54 @@ const continueDisinfect = () => {
box-sizing: border-box; box-sizing: border-box;
background: #ffffff; background: #ffffff;
border-radius: 16px; border-radius: 16px;
padding: 20px;
padding-bottom: 30px; padding-bottom: 30px;
.header_wrap { .header_wrap {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 49px;
.left_progress {
// width: 860px;
flex: 1;
height: 80px;
border-radius: 14px;
background: #f6f6f6;
justify-content: space-between;
margin-bottom: 34px;
height: 107px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 23px;
display: flex;
align-items: center;
padding: 13px 36px 13px 20px;
background: #f6f6f6;
border-radius: 16px 16px 0 0;
.left_time {
position: relative; position: relative;
.left_time_tag {
width: 158.66px;
height: 45px;
border-radius: 23px;
opacity: 1;
background: #06518b;
display: flex;
align-items: center;
justify-content: center;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.1em;
color: #ffffff;
}
width: 377px;
height: 61px;
background: url(../assets/img/operator/time.png) no-repeat;
background-size: 100% 100%;
.time { .time {
// width: 90px;
flex: 1;
height: 20px;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
}
.pre_time {
position: absolute;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
font-size: 28px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: red;
left: 214px;
}
.progress_bg {
width: 396px;
height: 14px;
border-radius: 7px;
background: #ffffff;
position: relative;
overflow: hidden;
.pro {
color: #ffffff;
position: absolute; position: absolute;
left: 0;
top: 0;
height: 14px;
border-radius: 7px;
background: #06518b;
width: var(--width);
}
left: 165px;
top: 9px;
width: 178px;
height: 41px;
text-align: center;
} }
} }
.right_btns {
display: flex;
align-items: center;
box-sizing: border-box;
margin-left: 20px;
.btn { .btn {
padding: 12px 28px;
box-sizing: border-box;
width: 140px; width: 140px;
height: 45px;
border-radius: 23px;
background: #f6f6f6;
height: 50px;
border-radius: 25px;
background: #06518b;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.1em;
color: #d8d8d8;
}
.active {
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.07em;
color: #ffffff; color: #ffffff;
background: #06518b;
}
.ml {
margin: 0 20px;
}
} }
} }
.echarts_wrap { .echarts_wrap {

5
src/pages/Home.vue
View File

@ -170,10 +170,11 @@
:hideKeyBoard="hideKeyBoard" :hideKeyBoard="hideKeyBoard"
:input="input" :input="input"
/> />
<Progress
<!-- <Progress
v-if="activeTab == 1 && !showOpertor" v-if="activeTab == 1 && !showOpertor"
:changeShowOperator="changeShowOperator" :changeShowOperator="changeShowOperator"
/>
/> -->
<Progress :changeShowOperator="changeShowOperator" />
<LiquidHandle v-if="activeTab == 2" :tabType="1" /> <LiquidHandle v-if="activeTab == 2" :tabType="1" />
<LiquidHandle v-if="activeTab == 3" :tabType="2" /> <LiquidHandle v-if="activeTab == 3" :tabType="2" />
<Test v-if="activeTab == 4" /> <Test v-if="activeTab == 4" />

Write Preview
Loading…
Cancel
Save