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

update bottom

Browse Source
This commit is contained in:
lb 2023-06-08 14:00:32 +08:00
parent b4a63e1c72
commit 270fd2d071
16 changed files with 79 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/box-chart.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 360 KiB

After

Width:  |  Height:  |  Size: 74 KiB

BIN
src/assets/box-table.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/fan-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/gas-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/kiln-bottom-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 890 B

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/kiln-top-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 905 B

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/menu-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1009 B

BIN
src/assets/oil.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

6
src/components/boxes/BottomTemp.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<!-- 窑底温度 --> <!-- 窑底温度 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="窑底温度" icon="kbtm" padding="34px"> <SubContainer title="窑底温度" icon="kbtm" padding="24px 32px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart <LineChart
key="1" key="1"
@ -59,8 +59,8 @@ export default {
width: adjust(3px); width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #3565ff,
#52cbef80, #3565ff51,
transparent, transparent,
transparent transparent
); );

2
src/components/boxes/FanRuntime.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<!-- 风机运行情况 --> <!-- 风机运行情况 -->
<Container usage="Table"> <Container usage="Table">
<SubContainer title="风机运行情况" icon="fan" padding="34px"> <SubContainer title="风机运行情况" icon="fan" padding="24px 32px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<div class="table-wrapper flex-1 align-start"> <div class="table-wrapper flex-1 align-start">
<div <div

32
src/components/boxes/GasFlow.vue
View File

@ -1,25 +1,13 @@
<template> <template>
<!-- 天然气流量 --> <!-- 天然气流量 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="天然气流量" icon="gas" padding="34px"> <SubContainer title="天然气流量" icon="gas" padding="24px 32px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart <LineChart key="1" id="line-chart-3" class="flex-1" unit="单位 m³/h" :legend="Object.keys(gasTable1)"
key="1" :series="gasTable1" />
id="line-chart-3"
class="flex-1"
unit="单位 m³/h"
:legend="Object.keys(gasTable1)"
:series="gasTable1"
/>
<div class="vertical-line"></div> <div class="vertical-line"></div>
<LineChart <LineChart key="2" id="line-chart-4" class="flex-1" unit="单位 m³/h" :legend="Object.keys(gasTable2)"
key="2" :series="gasTable2" />
id="line-chart-4"
class="flex-1"
unit="单位 m³/h"
:legend="Object.keys(gasTable2)"
:series="gasTable2"
/>
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
@ -57,12 +45,10 @@ export default {
.vertical-line { .vertical-line {
margin: 0 adjust(3px); margin: 0 adjust(3px);
width: adjust(3px); width: adjust(3px);
background: radial-gradient( background: radial-gradient(ellipse at center,
ellipse at center, #3565ff,
#6fe2ff, #3565ff51,
#52cbef80,
transparent, transparent,
transparent transparent);
);
} }
</style> </style>

32
src/components/boxes/OilFlow.vue
View File

@ -1,25 +1,13 @@
<template> <template>
<!-- 油流量 --> <!-- 油流量 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="油流量" icon="oil" padding="34px"> <SubContainer title="油流量" icon="oil" padding="24px 32px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart <LineChart key="1" id="line-chart-1" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable1)"
key="1" :series="oilTable1" />
id="line-chart-1"
class="flex-1"
unit="单位 kg/h"
:legend="Object.keys(oilTable1)"
:series="oilTable1"
/>
<div class="vertical-line"></div> <div class="vertical-line"></div>
<LineChart <LineChart key="2" id="line-chart-2" class="flex-1" unit="单位 kg/h" :legend="Object.keys(oilTable2)"
key="2" :series="oilTable2" />
id="line-chart-2"
class="flex-1"
unit="单位 kg/h"
:legend="Object.keys(oilTable2)"
:series="oilTable2"
/>
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
@ -57,12 +45,10 @@ export default {
.vertical-line { .vertical-line {
margin: 0 adjust(3px); margin: 0 adjust(3px);
width: adjust(3px); width: adjust(3px);
background: radial-gradient( background: radial-gradient(ellipse at center,
ellipse at center, #3565ff,
#6fe2ff, #3565ff51,
#52cbef80,
transparent, transparent,
transparent transparent);
);
} }
</style> </style>

32
src/components/boxes/TopTemp.vue
View File

@ -1,25 +1,13 @@
<template> <template>
<!-- 窑顶温度 --> <!-- 窑顶温度 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="窑顶温度" icon="ktop" padding="34px"> <SubContainer title="窑顶温度" icon="ktop" padding="24px 32px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart <LineChart key="1" id="line-chart-5" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop1)"
key="1" :series="kilnTop1" />
id="line-chart-5"
class="flex-1"
unit="单位/℃"
:legend="Object.keys(kilnTop1)"
:series="kilnTop1"
/>
<div class="vertical-line"></div> <div class="vertical-line"></div>
<LineChart <LineChart key="2" id="line-chart-6" class="flex-1" unit="单位/℃" :legend="Object.keys(kilnTop2)"
key="2" :series="kilnTop2" />
id="line-chart-6"
class="flex-1"
unit="单位/℃"
:legend="Object.keys(kilnTop2)"
:series="kilnTop2"
/>
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
@ -65,12 +53,10 @@ export default {
.vertical-line { .vertical-line {
margin: 0 adjust(3px); margin: 0 adjust(3px);
width: adjust(3px); width: adjust(3px);
background: radial-gradient( background: radial-gradient(ellipse at center,
ellipse at center, #3565ff,
#6fe2ff, #3565ff51,
#52cbef80,
transparent, transparent,
transparent transparent);
);
} }
</style> </style>

28
src/components/groups/data.vue
View File

@ -1,16 +1,32 @@
<template> <template>
<section class="data-group"> <section class="data-group absolute">
<OilFlow />
<GasFlow />
<TopTemp />
<BottomTemp />
<OilFlow />
<FanRuntime />
</section> </section>
</template> </template>
<script> <script>
import OilFlow from "../boxes/OilFlow.vue";
import GasFlow from "../boxes/GasFlow.vue";
import TopTemp from "../boxes/TopTemp.vue";
import BottomTemp from "../boxes/BottomTemp.vue";
import FanRuntime from "../boxes/FanRuntime.vue";
// import { mapState } from "vuex"; // import { mapState } from "vuex";
export default { export default {
name: "DataGroup", name: "DataGroup",
props: {}, props: {},
components: {}, components: {
FanRuntime,
OilFlow,
GasFlow,
TopTemp,
BottomTemp,
},
data() { data() {
return {}; return {};
}, },
@ -42,4 +58,10 @@ section::before {
top: 0; top: 0;
left: 0; left: 0;
} }
.data-group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
</style> </style>

8
src/components/layout/Container.vue
View File

@ -50,8 +50,8 @@ export default {
.tables { .tables {
display: inline-block; display: inline-block;
width: adjust(w(800px)); width: adjust(w(1115px));
height: adjust(h(528px)); height: adjust(h(700px));
background: url(../../assets/box-table.png); background: url(../../assets/box-table.png);
background-position: 0 0; background-position: 0 0;
/** top left */ /** top left */
@ -60,8 +60,8 @@ export default {
.charts { .charts {
display: inline-block; display: inline-block;
width: adjust(w(1580px)); width: adjust(w(2440px));
height: adjust(h(520px)); height: adjust(h(700px));
background: url(../../assets/box-chart.png); background: url(../../assets/box-chart.png);
background-position: 0 0; background-position: 0 0;
/** top left */ /** top left */

25
src/components/layout/SubContainer.vue
View File

@ -72,28 +72,33 @@ export default {
} }
.icon-oil { .icon-oil {
background: url(../../assets/oil.png); background: url(../../assets/oil.png) top 15% left 0 / 95% 85% no-repeat;
background-size: 100% 100%; margin-right: 6px;
} }
.icon-gas { .icon-gas {
background: url(../../assets/gas-icon.png); background: url(../../assets/gas-icon.png) top 15% left 0 / 95% 85% no-repeat;
background-size: 100% 100%; margin-right: 6px;
} }
.icon-xc { .icon-xc {
background: url(../../assets/xicao-icon.png); background: url(../../assets/xicao-icon.png);
background-size: 100% 100%; background-size: 100% 100%;
} }
.icon-fan { .icon-fan {
background: url(../../assets/fan-icon.png); background: url(../../assets/fan-icon.png) top 15% left 0 / 95% 85% no-repeat;
background-size: 100% 100%; margin-right: 6px;
} }
.icon-kiln-top { .icon-kiln-top {
background: url(../../assets/kiln-top-icon.png); background: url(../../assets/kiln-top-icon.png) top 15% left 0 / 95% 85% no-repeat;
background-size: 100% 100%; margin-right: 6px;
} }
.icon-kiln-bottom { .icon-kiln-bottom {
background: url(../../assets/kiln-bottom-icon.png); background: url(../../assets/kiln-bottom-icon.png) top 15% left 0 / 95% 85% no-repeat;
background-size: 100% 100%; margin-right: 6px;
} }
.icon-water-in { .icon-water-in {