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

修改echarts

master
maochaoying 2 years ago
parent
4f246e49cf
commit
b9552ee25b
3 changed files with 106 additions and 55 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. 140
      src/components/Progress.vue
  2. 18
      src/components/info/EnvironmentInfo.vue
  3. 3
      src/pages/Home.vue

140
src/components/Progress.vue
View File

@ -10,6 +10,7 @@
: `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}` : `${time_To_hhmmss(operatorStore.estimatedRemainingTimeS)}`
}} }}
</p> </p>
<p class="pre_time">预热时间约5分钟</p>
<!-- <div class="progress_bg"> <!-- <div class="progress_bg">
<div <div
class="pro" class="pro"
@ -120,7 +121,7 @@ const binOption = ref({
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -131,7 +132,10 @@ const binOption = ref({
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: Object.keys(echartsStore.binCharts),
data: Array.from(
Array(Object.keys(echartsStore.binCharts).length),
(v, k) => k,
),
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -150,13 +154,13 @@ const binOption = ref({
data: echartsStore.binHumidity, data: echartsStore.binHumidity,
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line', type: 'line',
stack: 'binHP', stack: 'binHP',
data: echartsStore.binHP, data: echartsStore.binHP,
}, },
{ {
name: '过氧化氢相对饱和度',
name: 'H2O2饱和度',
type: 'line', type: 'line',
stack: 'binSaturation', stack: 'binSaturation',
data: echartsStore.binSaturation, data: echartsStore.binSaturation,
@ -168,7 +172,7 @@ const envir1Option = ref({
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -188,19 +192,25 @@ const envir1Option = ref({
{ {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total',
stack: '1',
data: [], data: [],
}, },
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
stack: 'Total',
stack: '2',
data: [], data: [],
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line', type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [], data: [],
}, },
], ],
@ -210,7 +220,7 @@ const envir2Option = ref({
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -230,19 +240,25 @@ const envir2Option = ref({
{ {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total',
stack: '1',
data: [], data: [],
}, },
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: 'H2O2浓度',
type: 'line',
stack: '3',
data: [], data: [],
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2饱和度',
type: 'line', type: 'line',
stack: 'Total',
stack: '4',
data: [], data: [],
}, },
], ],
@ -293,7 +309,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -304,7 +320,10 @@ onMounted(() => {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: Object.keys(echartsStore.binCharts),
data: Array.from(
Array(Object.keys(echartsStore.binCharts).length),
(v, k) => k,
),
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -323,13 +342,13 @@ onMounted(() => {
data: echartsStore.binHumidity, data: echartsStore.binHumidity,
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line', type: 'line',
stack: 'binHP', stack: 'binHP',
data: echartsStore.binHP, data: echartsStore.binHP,
}, },
{ {
name: '过氧化氢相对饱和度',
name: 'H2O2饱和度',
type: 'line', type: 'line',
stack: 'binSaturation', stack: 'binSaturation',
data: echartsStore.binSaturation, data: echartsStore.binSaturation,
@ -341,7 +360,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -361,19 +380,25 @@ onMounted(() => {
{ {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total',
stack: '1',
data: [], data: [],
}, },
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
stack: 'Total',
stack: '2',
data: [], data: [],
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line', type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [], data: [],
}, },
], ],
@ -383,7 +408,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -403,19 +428,25 @@ onMounted(() => {
{ {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total',
stack: '1',
data: [], data: [],
}, },
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: 'H2O2浓度',
type: 'line',
stack: '3',
data: [], data: [],
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2饱和度',
type: 'line', type: 'line',
stack: 'Total',
stack: '4',
data: [], data: [],
}, },
], ],
@ -428,7 +459,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度', '过氧化氢相对饱和度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -439,7 +470,10 @@ onMounted(() => {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: Object.keys(echartsStore.binCharts),
data: Array.from(
Array(Object.keys(echartsStore.binCharts).length),
(v, k) => k,
),
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -458,13 +492,13 @@ onMounted(() => {
data: echartsStore.binHumidity, data: echartsStore.binHumidity,
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line', type: 'line',
stack: 'binHP', stack: 'binHP',
data: echartsStore.binHP, data: echartsStore.binHP,
}, },
{ {
name: '过氧化氢相对饱和度',
name: 'H2O2饱和度',
type: 'line', type: 'line',
stack: 'binSaturation', stack: 'binSaturation',
data: echartsStore.binSaturation, data: echartsStore.binSaturation,
@ -476,7 +510,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -496,19 +530,25 @@ onMounted(() => {
{ {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total',
stack: '1',
data: [], data: [],
}, },
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
stack: 'Total',
stack: '2',
data: [], data: [],
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2浓度',
type: 'line', type: 'line',
stack: 'Total',
stack: '3',
data: [],
},
{
name: 'H2O2饱和度',
type: 'line',
stack: '4',
data: [], data: [],
}, },
], ],
@ -518,7 +558,7 @@ onMounted(() => {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: ['温度', '湿度', '过氧化氢浓度'],
data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -538,19 +578,25 @@ onMounted(() => {
{ {
name: '温度', name: '温度',
type: 'line', type: 'line',
stack: 'Total',
stack: '1',
data: [], data: [],
}, },
{ {
name: '湿度', name: '湿度',
type: 'line', type: 'line',
stack: 'Total',
stack: '2',
data: [],
},
{
name: 'H2O2浓度',
type: 'line',
stack: '3',
data: [], data: [],
}, },
{ {
name: '过氧化氢浓度',
name: 'H2O2饱和度',
type: 'line', type: 'line',
stack: 'Total',
stack: '4',
data: [], data: [],
}, },
], ],
@ -607,6 +653,7 @@ const continueDisinfect = () => {
padding: 0 23px; padding: 0 23px;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative;
.left_time_tag { .left_time_tag {
width: 158.66px; width: 158.66px;
height: 45px; height: 45px;
@ -635,6 +682,15 @@ const continueDisinfect = () => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.pre_time {
position: absolute;
font-family: Source Han Sans CN;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
color: red;
left: 214px;
}
.progress_bg { .progress_bg {
width: 396px; width: 396px;
height: 14px; height: 14px;

18
src/components/info/EnvironmentInfo.vue
View File

@ -22,24 +22,20 @@
</div> </div>
<div class="content"> <div class="content">
<div class="line"> <div class="line">
<p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}温度</p>
<p class="num">{{ getTemperature() }}℃</p>
<p class="title">温度</p>
<p class="num">{{ getTemperature() }}°C</p>
</div> </div>
<div class="line"> <div class="line">
<p class="title">{{ props.cardType == 1 ? '仓内' : '环境' }}湿度</p>
<p class="title">相对湿度</p>
<p class="num">{{ getHumidity() }} {{ '%RH' }}</p> <p class="num">{{ getHumidity() }} {{ '%RH' }}</p>
</div> </div>
<div class="line"> <div class="line">
<p class="title">
{{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢浓度
</p>
<p class="num">{{ getHP() }} PPM</p>
<p class="title">相对饱和度</p>
<p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
</div> </div>
<div class="line"> <div class="line">
<p class="title">
{{ props.cardType == 1 ? '仓内' : '环境' }}过氧化氢相对饱和度
</p>
<p class="num">{{ getSaturation() }} {{ '%RS' }}</p>
<p class="title">汽化过氧化氢浓度</p>
<p class="num">{{ getHP() }} ppm</p>
</div> </div>
</div> </div>
</div> </div>

3
src/pages/Home.vue
View File

@ -152,8 +152,7 @@
<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" />
<Setting />
<!-- <Setting v-if="activeTab == 5" /> -->
<Setting v-if="activeTab == 5" />
<div class="other_info"> <div class="other_info">
<p>IP {{ settingStore.deviceIp }}</p> <p>IP {{ settingStore.deviceIp }}</p>
<p class="time">{{ nowTime }}</p> <p class="time">{{ nowTime }}</p>

Write Preview
Loading…
Cancel
Save