mt-fe-group
/
dezhou-screen
7
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Bläddra i källkod

基本完成

master
g7hoo 1 år sedan
förälder
f2c01f2134
incheckning
21541e856f
8 ändrade filer med 4918 tillägg och 4769 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. Binär
      src/assets/eq.png
  2. Binär
      src/assets/mirror.png
  3. +86
    -86
      src/components/boxes/InWater.vue
  4. +132
    -0
      src/components/boxes/OutWater.vue
  5. +123
    -106
      src/components/charts/BarChart.vue
  6. +105
    -70
      src/components/layout/Main.vue
  7. +5
    -5
      vue.config.js
  8. +4467
    -4502
      yarn.lock

Binär
src/assets/eq.png Visa fil

Före Efter
Bredd: 7417  |  Höjd: 1121  |  Storlek: 5.6 MiB

Binär
src/assets/mirror.png Visa fil

Före Efter
Bredd: 305  |  Höjd: 325  |  Storlek: 123 KiB

+ 86
- 86
src/components/boxes/InWater.vue Visa fil

@@ -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
- 0
src/components/boxes/OutWater.vue Visa fil

@@ -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>

+ 123
- 106
src/components/charts/BarChart.vue Visa fil

@@ -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>



+ 105
- 70
src/components/layout/Main.vue Visa fil

@@ -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>

+ 5
- 5
vue.config.js Visa fil

@@ -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,
},
});

+ 4467
- 4502
yarn.lock
Filskillnaden har hållits tillbaka eftersom den är för stor
Visa fil


Skriv Förhandsgranska
Laddar…
Avbryt
Spara