基本完成

This commit is contained in:
g7hoo 2023-05-10 19:36:44 +08:00
parent f2c01f2134
commit 21541e856f
8 changed files with 4212 additions and 4063 deletions

BIN
src/assets/eq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 MiB

BIN
src/assets/mirror.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

View File

@ -30,7 +30,7 @@ import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue";
import HistoryTrend from './HistoryTemp.vue'
import HistoryTrend from "./HistoryTemp.vue";
export default {
name: "XicaoTemp",

View File

@ -0,0 +1,132 @@
<template>
<!-- 窑炉出口水温 -->
<Container usage="NumberAndChart">
<SubContainer title="窑炉出口水温" icon="inWater" padding="17px">
<div class="pic" style=""></div>
<div class="content flex flex-col">
<div class="realtime">
<div class="time flex flex-center">
<DigitalBox
class="time--item"
v-for="(item, index) in '999'.split('')"
:key="index"
:value="item"
/>
<span class="unit"></span>
</div>
<div class="text">出口实时水温</div>
</div>
<div class="wave"></div>
<div class="graph flex-1">
<HistoryTrend />
</div>
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
import DigitalBox from "../common/DigitalBox.vue";
import HistoryTrend from "./HistoryTemp.vue";
export default {
name: "XicaoTemp",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.pic {
background: url(../../assets/out-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: 24px;
right: 0;
width: w(386px);
height: h(364px);
}
.content {
height: 100%;
}
.wave {
transform: translateX(-16px);
width: w(793px);
height: h(72px);
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
}
.graph {
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: 12px 0;
padding-left: 14px;
}
.time--item:not(:last-child) {
margin-right: 5px;
}
.unit {
font-family: Ubuntu, monospace, sans-serif !important;
font-size: 20px;
letter-spacing: 1px;
align-self: flex-end;
}
.text {
display: inline-block;
margin-left: 24px;
margin-bottom: 10px;
padding: 12px 0;
text-align: center;
font-size: 22px;
letter-spacing: 1px;
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: 10px;
height: 4px;
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
}
</style>

View File

@ -57,7 +57,7 @@ export default {
right: 12,
},
xAxis: {
type: 'category',
type: "category",
data: Array(31)
.fill(1)
.map((_, index) => index + 1),
@ -94,7 +94,7 @@ export default {
show: false,
},
axisLabel: {
formatter: '{value} ℃',
formatter: "{value} ℃",
color: "#fff9",
fontSize: 7,
lineHeight: 1,
@ -108,16 +108,33 @@ export default {
},
series: [
{
data: Array(31).fill(1).map(() => Math.ceil(Math.random() * 100)),
type: 'bar',
data: Array(31)
.fill(1)
.map(() => {
let v = Math.ceil(Math.random() * 100);
while (v < 60) {
v = Math.ceil(Math.random() * 100);
}
return v;
}),
type: "bar",
barWidth: 4,
label: {
show: true,
fontSize: 6,
color: '#eee8',
position: 'top',
}
}
]
color: "#eee8",
position: "top",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#A0FF49" },
{ offset: 0.35, color: "#49FF9A" },
{ offset: 0.7, color: "#49F2FF" },
{ offset: 1, color: "#0D6FFF" },
]),
},
},
],
});
},
initData() {},

View File

@ -1,5 +1,7 @@
<template>
<main class="">
<div class="eq-main absolute"></div>
<AreaOne style="position: absolute; top: 160px; left: 1588px" />
<div class="absolute left kiln-runtime">
@ -29,6 +31,9 @@
<div class="absolute in-water">
<InWater />
</div>
<div class="absolute out-water">
<OutWater />
</div>
</main>
</template>
@ -41,6 +46,7 @@ import TopTemp from "../boxes/TopTemp.vue";
import BottomTemp from "../boxes/BottomTemp.vue";
import XicaoTemp from "../boxes/XicaoTemp.vue";
import InWater from "../boxes/InWater.vue";
import OutWater from "../boxes/OutWater.vue";
import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue'
@ -58,6 +64,7 @@ export default {
BottomTemp,
XicaoTemp,
InWater,
OutWater,
},
props: {},
data() {
@ -75,6 +82,27 @@ main {
// background: #eee2;
}
.eq-main {
width: w(7150px);
height: h(960px);
background: url(../../assets/eq.png) no-repeat;
background-size: 100%;
top: 170px;
left: 380px;
position: relative;
}
.eq-main::after {
content: '';
position: absolute;
right: 1000px;
top: 164px;
width: 150px;
height: 150px;
background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%;
}
.kiln-runtime {
top: h(200px);
left: w(60px);
@ -113,8 +141,15 @@ main {
}
.in-water {
top: h(200px);
// left: w(8096px);
left: w(5096px);
left: w(8096px);
// left: w(5096px);
z-index: 100;
}
.out-water {
top: h(1177px);
left: w(8096px);
// left: w(5096px);
z-index: 100;
}
</style>

View File

@ -1,8 +1,8 @@
const { defineConfig } = require('@vue/cli-service')
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: '127.0.0.1',
port: 8000
}
})
host: "127.0.0.1",
port: 8000,
},
});

7557
yarn.lock

File diff suppressed because it is too large Load Diff