mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

基本完成

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/eq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 MiB

BIN
src/assets/mirror.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

172
src/components/boxes/InWater.vue
View File

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

132
src/components/boxes/OutWater.vue Normal file
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>

229
src/components/charts/BarChart.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- bar chart --> <!-- bar chart -->
<div class="bar-chart" :id="id"></div> <div class="bar-chart" :id="id"></div>
</template> </template>
<script> <script>
@ -8,9 +8,9 @@ import * as echarts from "echarts/core";
import { BarChart } from "echarts/charts"; import { BarChart } from "echarts/charts";
import { import {
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
GridComponent, GridComponent,
} from "echarts/components"; } from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features"; import { LabelLayout, UniversalTransition } from "echarts/features";
@ -18,110 +18,127 @@ import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
echarts.use([ echarts.use([
TitleComponent, TitleComponent,
TooltipComponent, TooltipComponent,
GridComponent, GridComponent,
BarChart, BarChart,
LabelLayout, LabelLayout,
UniversalTransition, UniversalTransition,
CanvasRenderer, CanvasRenderer,
]); ]);
export default { export default {
name: "BarChart", name: "BarChart",
props: { props: {
config: { config: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
}, },
data() { data() {
return { return {
id: Math.random().toString(), id: Math.random().toString(),
chart: null, chart: null,
config: {}, config: {},
}; };
}, },
mounted() { mounted() {
this.init(); this.init();
}, },
methods: { methods: {
init() { init() {
if (!this.chart) if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id)); this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({ this.chart.setOption({
grid: { grid: {
top: 28, top: 28,
left: 28, left: 28,
bottom: 18, bottom: 18,
right: 12, right: 12,
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: Array(31) data: Array(31)
.fill(1) .fill(1)
.map((_, index) => index + 1), .map((_, index) => index + 1),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// width: 1, // width: 1,
color: "#5982b2a0", color: "#5982b2a0",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#ffffff", color: "#ffffff",
fontSize: 7, fontSize: 7,
lineHeight: 1, lineHeight: 1,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位/℃", name: "单位/℃",
nameTextStyle: { nameTextStyle: {
color: "#fff9", color: "#fff9",
fontSize: 8, fontSize: 8,
align: "right", align: "right",
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#5982b2a0", color: "#5982b2a0",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
formatter: '{value} ℃', formatter: "{value} ℃",
color: "#fff9", color: "#fff9",
fontSize: 7, fontSize: 7,
lineHeight: 1, lineHeight: 1,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#5982b2a0", color: "#5982b2a0",
}, },
}, },
// data: [100, 200, 300, 400, 500], // data: [100, 200, 300, 400, 500],
}, },
series: [ series: [
{ {
data: Array(31).fill(1).map(() => Math.ceil(Math.random() * 100)), data: Array(31)
type: 'bar', .fill(1)
label: { .map(() => {
show: true, let v = Math.ceil(Math.random() * 100);
fontSize: 6, while (v < 60) {
color: '#eee8', v = Math.ceil(Math.random() * 100);
position: 'top', }
} return v;
} }),
] type: "bar",
}); barWidth: 4,
}, label: {
initData() {}, show: true,
}, fontSize: 6,
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() {},
},
}; };
</script> </script>

175
src/components/layout/Main.vue
View File

@ -1,35 +1,40 @@
<template> <template>
<main class=""> <main class="">
<AreaOne style="position: absolute; top: 160px; left: 1588px" /> <div class="eq-main absolute"></div>
<div class="absolute left kiln-runtime"> <AreaOne style="position: absolute; top: 160px; left: 1588px" />
<KilnRuntime />
</div> <div class="absolute left kiln-runtime">
<div class="absolute left kiln-pressure"> <KilnRuntime />
<KilnPressure /> </div>
</div> <div class="absolute left kiln-pressure">
<div class="absolute left fan-runtime"> <KilnPressure />
<FanRuntime /> </div>
</div> <div class="absolute left fan-runtime">
<div class="absolute left oil-flow"> <FanRuntime />
<OilFlow /> </div>
</div> <div class="absolute left oil-flow">
<div class="absolute left gas-flow"> <OilFlow />
<GasFlow /> </div>
</div> <div class="absolute left gas-flow">
<div class="absolute left top-temp"> <GasFlow />
<TopTemp /> </div>
</div> <div class="absolute left top-temp">
<div class="absolute left bottom-temp"> <TopTemp />
<BottomTemp /> </div>
</div> <div class="absolute left bottom-temp">
<div class="absolute left ou-temp"> <BottomTemp />
<XicaoTemp /> </div>
</div> <div class="absolute left ou-temp">
<div class="absolute in-water"> <XicaoTemp />
<InWater /> </div>
</div> <div class="absolute in-water">
</main> <InWater />
</div>
<div class="absolute out-water">
<OutWater />
</div>
</main>
</template> </template>
<script> <script>
@ -41,28 +46,30 @@ import TopTemp from "../boxes/TopTemp.vue";
import BottomTemp from "../boxes/BottomTemp.vue"; import BottomTemp from "../boxes/BottomTemp.vue";
import XicaoTemp from "../boxes/XicaoTemp.vue"; import XicaoTemp from "../boxes/XicaoTemp.vue";
import InWater from "../boxes/InWater.vue"; import InWater from "../boxes/InWater.vue";
import OutWater from "../boxes/OutWater.vue";
import FanRuntime from "../boxes/FanRuntime.vue"; import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue"; import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue' // import Container from './Container.vue'
export default { export default {
name: "Main", name: "Main",
components: { components: {
AreaOne, AreaOne,
KilnRuntime, KilnRuntime,
KilnPressure, KilnPressure,
FanRuntime, FanRuntime,
OilFlow, OilFlow,
GasFlow, GasFlow,
TopTemp, TopTemp,
BottomTemp, BottomTemp,
XicaoTemp, XicaoTemp,
InWater, InWater,
}, OutWater,
props: {}, },
data() { props: {},
return {}; data() {
}, return {};
},
}; };
</script> </script>
@ -70,51 +77,79 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
main { main {
height: 1px; height: 1px;
flex: 1; flex: 1;
// background: #eee2; // 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 { .kiln-runtime {
top: h(200px); top: h(200px);
left: w(60px); left: w(60px);
} }
.kiln-pressure { .kiln-pressure {
top: h(610px); top: h(610px);
left: w(60px); left: w(60px);
} }
.fan-runtime { .fan-runtime {
top: h(1020px); top: h(1020px);
left: w(60px); left: w(60px);
} }
.oil-flow { .oil-flow {
top: h(1588px); top: h(1588px);
left: w(60px); left: w(60px);
} }
.gas-flow { .gas-flow {
top: h(1588px); top: h(1588px);
left: w(1660px); left: w(1660px);
} }
.top-temp { .top-temp {
top: h(1588px); top: h(1588px);
left: w(3260px); left: w(3260px);
} }
.bottom-temp { .bottom-temp {
top: h(1588px); top: h(1588px);
left: w(4860px); left: w(4860px);
} }
.ou-temp { .ou-temp {
top: h(1588px); top: h(1588px);
left: w(6460px); left: w(6460px);
} }
.in-water { .in-water {
top: h(200px); top: h(200px);
// left: w(8096px); left: w(8096px);
left: w(5096px); // left: w(5096px);
z-index: 100; z-index: 100;
}
.out-water {
top: h(1177px);
left: w(8096px);
// left: w(5096px);
z-index: 100;
} }
</style> </style>

10
vue.config.js
View File

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

7557
yarn.lock
View File

File diff suppressed because it is too large Load Diff