mt-fe-group/dezhou-screen
8
0
Fork 0
程式碼 問題 合併請求 版本發布 Wiki 動態

基本完成

瀏覽代碼
This commit is contained in:
g7hoo 2023-05-10 19:36:44 +08:00
父節點 f2c01f2134
當前提交 21541e856f
共有 8 個檔案被更改，包括 4212 行新增 和 4063 行删除
顯示統計資料 下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

二進制
src/assets/eq.png Normal file
查看文件

未顯示二進位檔案。
並列

之後

寬度:  |  高度:  |  大小: 5.6 MiB

二進制
src/assets/mirror.png Normal file
查看文件

未顯示二進位檔案。
並列

之後

寬度:  |  高度:  |  大小: 123 KiB

172
src/components/boxes/InWater.vue
查看文件

@ -1,28 +1,28 @@
<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>
<!-- 窑炉进口水温 -->
<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>
@ -30,17 +30,17 @@ 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",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
name: "XicaoTemp",
props: {},
components: { Container, SubContainer, LineChart, DigitalBox, HistoryTrend },
data() {
return {
chartConfig: {},
};
},
};
</script>
@ -48,85 +48,85 @@ export default {
@import "../../assets/styles/functions";
.pic {
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute;
top: 24px;
right: 0;
width: w(386px);
height: h(364px);
background: url(../../assets/in-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%;
height: 100%;
}
.wave {
transform: translateX(-16px);
width: w(793px);
height: h(72px);
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
transform: translateX(-16px);
width: w(793px);
height: h(72px);
background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%;
}
.graph {
// background: #ccc3;
// background: #ccc3;
}
.flex-1 {
flex: 1;
// background: #eee;
flex: 1;
// background: #eee;
}
.time {
// background: #eee;
margin: 12px 0;
padding-left: 14px;
// background: #eee;
margin: 12px 0;
padding-left: 14px;
}
.time--item:not(:last-child) {
margin-right: 5px;
margin-right: 5px;
}
.unit {
font-family: Ubuntu, monospace, sans-serif !important;
font-size: 20px;
letter-spacing: 1px;
align-self: flex-end;
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;
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
);
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>

132
src/components/boxes/OutWater.vue Normal 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
查看文件

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

175
src/components/layout/Main.vue
查看文件

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

10
vue.config.js
查看文件

@ -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
查看文件

檔案差異因為檔案過大而無法顯示 載入差異