@@ -7,13 +7,13 @@ | |||
style=" | |||
position: absolute; | |||
top: 8px; | |||
left: -30px; | |||
left: -20px; | |||
width: 110%; | |||
height: 105%; | |||
background: #eee1; | |||
display: grid; | |||
place-items: center; | |||
font-size: 24px; | |||
font-size: 12px; | |||
color: #eee9; | |||
" | |||
> | |||
@@ -62,9 +62,9 @@ h3 { | |||
margin: 0; | |||
font-family: sans-serif; | |||
font-weight: 400; | |||
font-size: adjust(14px); | |||
letter-spacing: adjust(1px); | |||
color: #52fff8; | |||
margin: adjust(12px) 0; | |||
font-size: adjust(h(20px)); | |||
letter-spacing: 1px; | |||
color: #0c71ff; | |||
margin: adjust(h(12px)) 0; | |||
} | |||
</style> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<!-- 窑炉进口水温 --> | |||
<Container class="in-water" usage="NumberAndChart"> | |||
<SubContainer title="窑炉进口水温" icon="inWater" padding="20px"> | |||
<SubContainer title="进口实时水温" icon="inWater"> | |||
<div class="pic" style=""></div> | |||
<div class="content flex flex-col"> | |||
<div class="realtime"> | |||
@@ -9,7 +9,6 @@ | |||
<span class="temp-data">{{ waterInTemp }}</span> | |||
<span class="unit">℃</span> | |||
</div> | |||
<div class="text">进口实时水温</div> | |||
</div> | |||
<div class="wave"></div> | |||
<div class="graph flex-1"> | |||
@@ -49,17 +48,15 @@ export default { | |||
.in-water { | |||
position: absolute; | |||
top: adjust(h(430px)); | |||
left: adjust(w(5660px)); | |||
height: adjust(h(665px)); | |||
width: adjust(w(780px)); | |||
left: adjust(w(5630px)); | |||
height: adjust(h(620px)); | |||
width: adjust(w(880px)); | |||
} | |||
.pic { | |||
background: url(../../assets/in-water.png) no-repeat; | |||
background-size: 100% 100%; | |||
background-position: center; | |||
background: url(../../assets/in-water.png) top 0 left 0 / 90% no-repeat; | |||
position: absolute; | |||
top: adjust(24px); | |||
top: adjust(10px); | |||
right: 0; | |||
width: adjust(w(440px)); | |||
height: adjust(h(380px)); | |||
@@ -70,8 +67,8 @@ export default { | |||
} | |||
.wave { | |||
transform: translateX(adjust(-16px)); | |||
width: adjust(w(793px)); | |||
transform: translateX(adjust(-8px)); | |||
width: adjust(w(852px)); | |||
height: adjust(h(76px)); | |||
background: url(../../assets/inwater.png) no-repeat; | |||
background-size: 100% 100%; | |||
@@ -86,9 +83,10 @@ export default { | |||
// background: #eee; | |||
} | |||
.time { | |||
// background: #eee; | |||
margin: adjust(12px) 0; | |||
margin: adjust(4px) 0; | |||
padding-left: adjust(14px); | |||
} | |||
@@ -96,42 +94,20 @@ export default { | |||
margin-right: adjust(5px); | |||
} | |||
.unit { | |||
font-family: Ubuntu, monospace, sans-serif !important; | |||
font-size: adjust(20px); | |||
letter-spacing: adjust(1px); | |||
align-self: flex-end; | |||
.temp-data { | |||
color: #0068ff; | |||
font-size: adjust(h(88px)); | |||
letter-spacing: 1px; | |||
} | |||
.text { | |||
display: inline-block; | |||
margin-left: adjust(24px); | |||
margin-bottom: adjust(10px); | |||
padding: adjust(12px) 0; | |||
text-align: center; | |||
font-size: adjust(22px); | |||
letter-spacing: adjust(1px); | |||
position: relative; | |||
z-index: 10; | |||
user-select: none; | |||
} | |||
.text::after { | |||
content: ""; | |||
display: block; | |||
position: absolute; | |||
z-index: 0; | |||
left: 0; | |||
bottom: adjust(10px); | |||
height: adjust(4px); | |||
width: 100%; | |||
/* 渐变色 */ | |||
background: radial-gradient(ellipse at center, | |||
#6fe2ff, | |||
#6fe2ffc0, | |||
#52cbef80, | |||
#52cbef30, | |||
#52cbef00, | |||
transparent); | |||
.unit { | |||
font-family: sans-serif !important; | |||
font-size: adjust(h(48px)); | |||
font-weight: 400; | |||
letter-spacing: 1px; | |||
align-self: flex-end; | |||
margin-bottom: 4px; | |||
margin-left: 4px; | |||
color: #0068ff; | |||
} | |||
</style> |
@@ -1,44 +1,18 @@ | |||
<template> | |||
<!-- 窑炉出口水温 --> | |||
<Container usage="NumberAndChart"> | |||
<SubContainer title="窑炉出口水温" icon="inWater" padding="34px"> | |||
<Container class="out-water" usage="NumberAndChart"> | |||
<SubContainer title="出口实时水温" icon="inWater"> | |||
<div class="pic" style=""></div> | |||
<div class="content flex flex-col"> | |||
<div class="realtime"> | |||
<div class="time flex flex-center"> | |||
<template v-for="(item, index) in waterOutTemp.split('')"> | |||
<DigitalBox | |||
v-if="item !== '.'" | |||
class="time--item" | |||
:key="index" | |||
:value="item" | |||
:wider="true" | |||
/> | |||
<span | |||
:key="index" | |||
v-else | |||
style=" | |||
background: #fff; | |||
width: 10px; | |||
height: 10px; | |||
align-self: flex-end; | |||
margin-bottom: 9px; | |||
margin-right: 8px; | |||
" | |||
></span> | |||
<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> --> | |||
</template> | |||
<span class="temp-data">{{ waterOutTemp }}</span> | |||
<span class="unit">℃</span> | |||
</div> | |||
<div class="text">出口实时水温</div> | |||
</div> | |||
<div class="wave"></div> | |||
<div class="graph flex-1"> | |||
<HistoryTrend | |||
key="water-out" | |||
title="窑炉出口水温历史" | |||
:series="kilnWaterOut" | |||
/> | |||
<HistoryTrend key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" /> | |||
</div> | |||
</div> | |||
</SubContainer> | |||
@@ -67,16 +41,21 @@ export default { | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
@import "../../assets/styles/functions"; | |||
.out-water { | |||
position: absolute; | |||
top: adjust(h(1065px)); | |||
left: adjust(w(5630px)); | |||
height: adjust(h(620px)); | |||
width: adjust(w(880px)); | |||
} | |||
.pic { | |||
background: url(../../assets/out-water.png) no-repeat; | |||
background-size: 100% 100%; | |||
background-position: center; | |||
background: url(../../assets/out-water.png) top 0 left 0 / 90% no-repeat; | |||
position: absolute; | |||
top: adjust(24px); | |||
top: adjust(10px); | |||
right: 0; | |||
width: adjust(w(440px)); | |||
height: adjust(h(380px)); | |||
@@ -87,10 +66,10 @@ export default { | |||
} | |||
.wave { | |||
transform: translateX(adjust(-16px)) rotateY(0.5turn); | |||
width: adjust(w(793px)); | |||
transform: translateX(adjust(-8px)); | |||
width: adjust(w(852px)); | |||
height: adjust(h(76px)); | |||
background: url(../../assets/inwater.png) no-repeat; | |||
background: url(../../assets/outwater.png) no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
@@ -103,9 +82,10 @@ export default { | |||
// background: #eee; | |||
} | |||
.time { | |||
// background: #eee; | |||
margin: adjust(12px) 0; | |||
margin: adjust(4px) 0; | |||
padding-left: adjust(14px); | |||
} | |||
@@ -113,44 +93,20 @@ export default { | |||
margin-right: adjust(5px); | |||
} | |||
.unit { | |||
font-family: Ubuntu, monospace, sans-serif !important; | |||
font-size: adjust(20px); | |||
letter-spacing: adjust(1px); | |||
align-self: flex-end; | |||
} | |||
.text { | |||
display: inline-block; | |||
margin-left: adjust(24px); | |||
margin-bottom: adjust(10px); | |||
padding: adjust(12px) 0; | |||
text-align: center; | |||
font-size: adjust(22px); | |||
letter-spacing: adjust(1px); | |||
position: relative; | |||
z-index: 10; | |||
user-select: none; | |||
.temp-data { | |||
color: #0068ff; | |||
font-size: adjust(h(88px)); | |||
letter-spacing: 1px; | |||
} | |||
.text::after { | |||
content: ""; | |||
display: block; | |||
position: absolute; | |||
z-index: 0; | |||
left: 0; | |||
bottom: adjust(10px); | |||
height: adjust(4px); | |||
width: 100%; | |||
/* 渐变色 */ | |||
background: radial-gradient( | |||
ellipse at center, | |||
#6fe2ff, | |||
#6fe2ffc0, | |||
#52cbef80, | |||
#52cbef30, | |||
#52cbef00, | |||
transparent | |||
); | |||
.unit { | |||
font-family: sans-serif !important; | |||
font-size: adjust(h(48px)); | |||
font-weight: 400; | |||
letter-spacing: 1px; | |||
align-self: flex-end; | |||
margin-bottom: 4px; | |||
margin-left: 4px; | |||
color: #0068ff; | |||
} | |||
</style> |
@@ -75,17 +75,17 @@ export default { | |||
this.chart = echarts.init(document.getElementById(this.id)); | |||
this.chart.setOption({ | |||
grid: { | |||
top: adjust(20), | |||
left: adjust(28), | |||
bottom: adjust(18), | |||
right: adjust(12), | |||
top: adjust(0), | |||
left: adjust(10), | |||
bottom: adjust(10), | |||
right: adjust(0), | |||
}, | |||
xAxis: { | |||
type: "category", | |||
data: this.updateXAxis(), | |||
axisLine: { | |||
lineStyle: { | |||
color: "#5982b2a0", | |||
color: '#0068ff33' | |||
}, | |||
}, | |||
axisTick: { | |||
@@ -93,9 +93,9 @@ export default { | |||
}, | |||
axisLabel: { | |||
color: "#fff9", | |||
fontSize: adjust(8), | |||
lineHeight: adjust(1), | |||
margin: adjust(6), | |||
fontSize: adjust(4), | |||
lineHeight: adjust(0), | |||
margin: adjust(4), | |||
rotate: 30, | |||
}, | |||
}, | |||
@@ -110,7 +110,7 @@ export default { | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#5982b2a0", | |||
color: '#0068ff33' | |||
}, | |||
}, | |||
axisTick: { | |||
@@ -119,12 +119,13 @@ export default { | |||
axisLabel: { | |||
formatter: "{value} ℃", | |||
color: "#fff9", | |||
fontSize: adjust(8), | |||
lineHeight: adjust(1), | |||
fontSize: adjust(4), | |||
lineHeight: adjust(0), | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#5982b2a0", | |||
// color: "#5982b2a0", | |||
color: '#0068ff33' | |||
}, | |||
}, | |||
// data: [100, 200, 300, 400, 500], | |||
@@ -3,7 +3,7 @@ | |||
<div class="sub-container" :style="{ padding }"> | |||
<div class="title"> | |||
<span class="icon" :class="iconClass[icon]"></span> | |||
<span>{{ title }}</span> | |||
<span class="title_text">{{ title }}</span> | |||
</div> | |||
<div class="content"> | |||
<slot /> | |||
@@ -25,7 +25,7 @@ export default { | |||
}, | |||
padding: { | |||
type: String, | |||
default: "10px", | |||
default: "20px", | |||
}, | |||
}, | |||
data() { | |||
@@ -57,8 +57,8 @@ export default { | |||
.icon { | |||
height: adjust(17px); | |||
width: adjust(17px); | |||
margin-right: adjust(8px); | |||
width: adjust(16px); | |||
margin-right: 0; | |||
} | |||
.icon-clock { | |||
@@ -97,19 +97,23 @@ export default { | |||
} | |||
.icon-water-in { | |||
background: url(../../assets/water-temp.png); | |||
background-size: 100% 100%; | |||
background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75% no-repeat; | |||
} | |||
.title { | |||
font-size: adjust(h(52px)); | |||
color: #72f2ff; | |||
font-size: adjust(h(38px)); | |||
letter-spacing: 1px; | |||
color: #3565ff; | |||
font-family: sans-serif; | |||
user-select: none; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.title_text { | |||
line-height: 0; | |||
} | |||
.content { | |||
height: 1px; | |||
/* background: #eee; */ | |||
@@ -31,7 +31,7 @@ export default new Vuex.Store({ | |||
kilnPressure: '00', | |||
fireChangeTime: '00:00:00', | |||
lastFireChangeTime: '0分0秒', | |||
waterInTemp: '000', | |||
waterInTemp: '00.0', | |||
waterOutTemp: '000' | |||
}, | |||
getters: { | |||