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

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

@ -1,7 +1,7 @@
<template>
<!-- 风机运行情况 -->
<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="table-wrapper flex-1 align-start">
<div

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

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

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

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

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

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

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

@ -1,16 +1,32 @@
<template>
<section class="data-group">
<section class="data-group absolute">
<OilFlow />
<GasFlow />
<TopTemp />
<BottomTemp />
<OilFlow />
<FanRuntime />
</section>
</template>
<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";
export default {
name: "DataGroup",
props: {},
components: {},
components: {
FanRuntime,
OilFlow,
GasFlow,
TopTemp,
BottomTemp,
},
data() {
return {};
},
@ -24,7 +40,7 @@ export default {
@import "../../assets/styles/functions";
section {
background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat, #fcc7;
background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat, #fcc7;
width: adjust(w(13700px));
// width: adjust(w(13500px));
height: adjust(h(960px));
@ -42,4 +58,10 @@ section::before {
top: 0;
left: 0;
}
.data-group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
</style>

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

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

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

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