Compare commits

...

22 Commits

Author SHA1 Message Date
lb
c0dc47895e update header 2023-07-10 16:54:49 +08:00
lb
01aa8be033 update fanruntime 2023-07-07 16:56:11 +08:00
lb
18c08ca42d update 2023-07-07 16:14:41 +08:00
lb
de41e7e547 update linechart oilflow 2023-07-07 11:30:10 +08:00
lb
133d2d6e23 update oil flow 2023-07-07 11:00:24 +08:00
lb
eb4a81b7b9 update 2023-06-09 14:24:50 +08:00
lb
d66f0b1e05 update 2023-06-09 09:35:48 +08:00
lb
5f2ad448aa update 2023-06-08 16:54:34 +08:00
lb
bd0f7986a9 almost done 2023-06-08 15:13:22 +08:00
lb
270fd2d071 update bottom 2023-06-08 14:00:32 +08:00
lb
b4a63e1c72 update dots 2023-06-08 11:04:06 +08:00
lb
dd1383950c update inwater outwater 2023-06-08 10:56:36 +08:00
lb
1778ac8848 update inwater 2023-06-07 17:03:15 +08:00
lb
7cdf283aca update eq 2023-06-07 16:18:06 +08:00
lb
90a70d7d1a update data monitor2 2023-06-07 15:40:59 +08:00
lb
4f8e0396ad update monitor group2 group3 2023-06-07 15:14:46 +08:00
lb
6a53a6630c update environ 2023-06-07 15:01:20 +08:00
lb
868e14a41b update fault 2023-06-07 14:48:05 +08:00
lb
eeba8714f7 update Jiankongzu 1 2023-06-07 14:26:16 +08:00
lb
f694c8ebf4 update Header 2023-06-07 13:56:42 +08:00
lb
7c4903f463 update area 2023-06-06 16:58:44 +08:00
lb
95809c226d update header & area-one 2023-06-06 16:41:21 +08:00
61 changed files with 4812 additions and 4573 deletions

View File

@ -1,9 +1,5 @@
<template> <template>
<div id="app"> <div id="app">
<!-- <nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav> -->
<router-view /> <router-view />
</div> </div>
</template> </template>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 360 KiB

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 331 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/digitbox1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 748 B

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/header-wings.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 899 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 890 B

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 905 B

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 52 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1009 B

BIN
src/assets/middle-under.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/middle1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 321 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/right-wing.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1,14 +1,17 @@
// variables // variables
// $design_width: 4480px; // $design_width: 4480px
$design_width: 8960px; $design_width: 21120px;
$design_height: 2160px; $design_height: 4320px;
$actual_width: 3840px; $actual_width: 3840px;
$actual_height: 1080px; $actual_height: 1080px;
// /4 /5.5
// 字体按照纵向调整
$height: 1080px; $height: 1080px;
$default_ratio: 0.875; $default_ratio: 0.875;
// colors // colors
$main-color: #6bf2ff; $main-color: #3565FF;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/top-middle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

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
); );

View File

@ -1,63 +1,63 @@
<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 relative" style="height: 100%">
<div class="table-wrapper flex-1 align-start"> <div class="table-wrapper flex-1 align-start">
<div <div
v-if="tableData1 && tableData1.length === 0" v-if="tableData1 && tableData1.length === 0"
style=" style="
position: absolute; position: absolute;
top: 0; width: 100%;
left: 0; height: 100%;
width: 100%; background: #eee1;
height: 100%; font-size: 18px;
background: #eee1; letter-spacing: 2px;
display: grid; color: #3c4e8b;
place-items: center; display: grid;
font-size: 24px; place-items: center;
color: #eee9; user-select: none;
" "
>无数据</div> >
<table class="table-1"> 无数据
<thead> </div>
<!-- <tr style="font-size: 8px; background: #044a84; opacity: 19%"> --> <table class="table-1">
<tr class="t-row"> <thead>
<th>序号</th> <tr class="t-row">
<th>设备名称</th> <th style="width: 90px">序号</th>
<th>运行频率</th> <!-- <th style="width: 180px">设备名称</th>
<th>设备状态</th> <th style="width: 180px">运行频率</th>
</tr> <th style="width: 180px">设备状态</th> -->
</thead> <th style="width: 220px">设备名称</th>
<!-- <tbody> --> <th style="width: 160px">运行频率</th>
<!-- <tr <th style="width: 160px">设备状态</th>
v-for="(row, index) in tableData1" </tr>
:key="index" </thead>
style="font-size: 7px; background: #0b5499; opacity: 35%" <transition-group name="fan-list" tag="tbody" mode="out-in">
> --> <tr
<transition-group name="fan-list" tag="tbody" mode="out-in"> class="t-row"
<tr v-for="row in tableData1"
class="t-row" :key="row && 'length' in row ? row[0] : Math.random()"
v-for="row in tableData1" >
:key="row && 'length' in row ? row[0] : Math.random()" <td v-for="(d, idx) in row" :key="idx">
> <template v-if="idx === 2">
<td v-for="(d, idx) in row" :key="idx"> <FrequentComp :value="d" />
<template v-if="idx === 2"> </template>
<FrequentComp :value="d" /> <template v-else-if="idx === 3">
</template> <StatusComp :value="d" />
<template v-else-if="idx === 3"> </template>
<StatusComp :value="d" /> <template v-else>
</template> <!-- <el-tooltip effect="light" :content="d" placement="top"> -->
<template v-else> <span>{{ d }}</span>
{{ d }} <!-- </el-tooltip> -->
</template> </template>
</td> </td>
</tr> </tr>
</transition-group> </transition-group>
<!-- </tbody> --> <!-- </tbody> -->
</table> </table>
</div> </div>
<!-- <!--
<div class="vertical-line"></div> <div class="vertical-line"></div>
<table class="table-2 flex-1 align-start"> <table class="table-2 flex-1 align-start">
<thead> <thead>
@ -84,9 +84,9 @@
</tr> </tr>
</tbody> </tbody>
</table> --> </table> -->
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>
</template> </template>
<script> <script>
@ -97,61 +97,61 @@ import StatusComp from "./subcomponents/TableStatus.vue";
import { mapState } from "vuex"; import { mapState } from "vuex";
export default { export default {
name: "KilnPressure", name: "KilnPressure",
props: {}, props: {},
components: { Container, SubContainer, FrequentComp, StatusComp }, components: { Container, SubContainer, FrequentComp, StatusComp },
data() { data() {
return { return {
tableHead: ["序号", "设备名称", "运行频率", "设备状态"], tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
tableCache: [ tableCache: [
// [11, "11", "", "" /**or 0,1*/], [11, "风机11", "未运行", "正常" /**or 0,1*/],
// [12, "12", "", "" /**or 0,1*/], [12, "风机12", "未运行", "正常" /**or 0,1*/],
// [13, "13", "73Hz", "" /**or 0,1*/], [13, "风机13", "73Hz", "正常" /**or 0,1*/],
], ],
tableData1: [ tableData1: [
// [1, "1", "2332Hz", "" /**or 0,1*/], [1, "风机1", "2332Hz", "正常" /**or 0,1*/],
// [2, "2", "", "" /**or 0,1*/], [2, "2#风机水电费款经典款", "未运行", "故障" /**or 0,1*/],
// [3, "3", "333Hz", "" /**or 0,1*/], [3, "风机3", "333Hz", "正常" /**or 0,1*/],
// [4, "4", "100Hz", "" /**or 0,1*/], [4, "风机4", "100Hz", "正常" /**or 0,1*/],
// [5, "5", "", "" /**or 0,1*/], [5, "风机5", "未运行", "正常" /**or 0,1*/],
// [6, "6", "", "" /**or 0,1*/], [6, "风机6", "未运行", "故障" /**or 0,1*/],
// [7, "7", "3000Hz", "" /**or 0,1*/], [7, "风机7", "3000Hz", "正常" /**or 0,1*/],
// [8, "8", "", "" /**or 0,1*/], [8, "风机8", "未运行", "正常" /**or 0,1*/],
// [9, "9", "", "" /**or 0,1*/], [9, "风机9", "未运行", "正常" /**or 0,1*/],
// [10, "10", "86423Hz", "" /**or 0,1*/], [10, "风机10", "86423Hz", "正常" /**or 0,1*/],
], ],
}; };
}, },
computed: { computed: {
...mapState(["fan"]), // ...mapState(["fan"]),
}, },
watch: { watch: {
fan: { // fan: {
handler: function (data) { // handler: function (data) {
if (!data) return; // if (!data) return;
let idx = 0; // let idx = 0;
this.tableData1 = data.slice(0, 10).map((item, index) => { // this.tableData1 = data.slice(0, 10).map((item, index) => {
idx += 1; // idx += 1;
return [idx, ...item]; // return [idx, ...item];
}); // });
this.tableCache = data // this.tableCache = data
.slice(10) // .slice(10)
.map((item, index) => [index + 1 + idx, ...item]); // .map((item, index) => [index + 1 + idx, ...item]);
}, // },
deep: true, // deep: true,
immediate: true, // immediate: true,
}, // },
}, },
mounted() { mounted() {
setInterval(() => { setInterval(() => {
const inData = this.tableCache.shift(); const inData = this.tableCache.shift();
const outData = this.tableData1.shift(); const outData = this.tableData1.shift();
setTimeout(() => { setTimeout(() => {
if (inData) this.tableData1.splice(this.tableData1.length, 0, inData); if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
}, 200); }, 200);
if (outData) this.tableCache.push(outData); if (outData) this.tableCache.push(outData);
}, 3000); }, 3000);
}, },
}; };
</script> </script>
@ -159,19 +159,19 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
background: #eee1; background: #eee1;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
width: 6px; width: 6px;
border-radius: 8px; border-radius: 8px;
background: #eee3; background: #eee3;
} }
.fan-list-enter-active, .fan-list-enter-active,
.fan-list-leave-active { .fan-list-leave-active {
transition: all 0.5s; transition: all 0.5s;
} }
// .fan-list-leave-move { // .fan-list-leave-move {
@ -180,79 +180,86 @@ export default {
.fan-list-enter, .fan-list-enter,
.fan-list-leave-to { .fan-list-leave-to {
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
} }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
} }
.vertical-line {
margin: 0 adjust(3px);
width: adjust(3px);
background: radial-gradient(
ellipse at center,
#6fe2ff,
#52cbef80,
transparent,
transparent
);
}
.table-wrapper { .table-wrapper {
// padding-right: 6px; height: 400px;
height: 400px; overflow: hidden;
// overflow-y: auto; // background: #f001;
overflow: hidden;
} }
table { table {
width: 100%; width: 100%;
border-spacing: adjust(1px); border-spacing: adjust(1px);
} }
// .table-1 {
// background: #00f3;
// }
// tr, td, th { // tr, td, th {
// max-height: 13.88px !important; // max-height: 13.88px !important;
// } // }
.t-row { .t-row {
height: adjust(14px); height: adjust(14px);
}
.tables {
overflow: hidden;
} }
.tables > table { .tables > table {
overflow-y: auto; overflow-y: auto;
} }
.align-start { .align-start {
align-self: flex-start; align-self: flex-start;
} }
thead > tr th:first-child { thead > tr th:first-child {
text-align: center; text-align: center;
} }
thead > tr th { thead > tr th {
font-size: adjust(10px); font-size: adjust(8px);
line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
padding: adjust(3px) adjust(8px); Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
font-weight: 400; "微软雅黑", Arial, Helvetica, sans-serif;
background: #044a8446; line-height: 1.25;
text-align: left; letter-spacing: 1px;
padding: adjust(3px) adjust(8px);
font-weight: 600;
background: #4288df23;
color: #030609d6;
text-align: left;
} }
tbody > tr:nth-child(odd) { tbody > tr:nth-child(even) {
background: #0b549960; background: #4288df13;
} }
tbody > tr td { tbody > tr td {
font-size: adjust(10px); font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
line-height: 1.25; Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
padding: adjust(2px) adjust(8px); "微软雅黑", Arial, Helvetica, sans-serif;
font-weight: 400; color: #030609d6;
background: inherit; font-size: adjust(8px);
height: adjust(8px * 1.2);
line-height: 1.2;
padding: adjust(2px) adjust(8px);
font-weight: 400;
overflow: hidden;
background: inherit;
} }
tbody > tr td:first-child { tbody > tr td:first-child {
text-align: center; text-align: center;
} }
</style> </style>

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>

View File

@ -7,13 +7,13 @@
style=" style="
position: absolute; position: absolute;
top: 8px; top: 8px;
left: -30px; left: -20px;
width: 110%; width: 110%;
height: 105%; height: 105%;
background: #eee1; background: #eee1;
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 24px; font-size: 12px;
color: #eee9; color: #eee9;
" "
> >
@ -62,9 +62,9 @@ h3 {
margin: 0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
font-weight: 400; font-weight: 400;
font-size: adjust(14px); font-size: adjust(h(20px));
letter-spacing: adjust(1px); letter-spacing: 1px;
color: #52fff8; color: #0c71ff;
margin: adjust(12px) 0; margin: adjust(h(12px)) 0;
} }
</style> </style>

View File

@ -1,44 +1,18 @@
<template> <template>
<!-- 窑炉进口水温 --> <!-- 窑炉进口水温 -->
<Container usage="NumberAndChart"> <Container class="in-water" usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px"> <SubContainer title="进口实时水温" icon="inWater">
<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">
<template v-for="(item, index) in waterInTemp.split('')"> <span class="temp-data">{{ waterInTemp }}</span>
<DigitalBox
v-if="item !== '.'"
class="time--item"
:key="index"
:value="item"
:wider="true"
/>
<span
:key="index"
v-else
style="
background: #fff;
width: 10px;
height: 10px;
align-self: flex-end;
margin-bottom: 9px;
margin-right: 8px;
"
></span>
<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
</template>
<span class="unit"></span> <span class="unit"></span>
</div> </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 key="water-in" title="窑炉进口水温历史" :series="kilnWaterIn" />
key="water-in"
title="窑炉进口水温历史"
:series="kilnWaterIn"
/>
</div> </div>
</div> </div>
</SubContainer> </SubContainer>
@ -71,12 +45,18 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.pic { .in-water {
background: url(../../assets/in-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute; position: absolute;
top: adjust(24px); top: adjust(h(430px));
left: adjust(w(5630px));
height: adjust(h(620px));
width: adjust(w(880px));
}
.pic {
background: url(../../assets/in-water.png) top 0 left 0 / 90% no-repeat;
position: absolute;
top: adjust(10px);
right: 0; right: 0;
width: adjust(w(440px)); width: adjust(w(440px));
height: adjust(h(380px)); height: adjust(h(380px));
@ -87,8 +67,8 @@ export default {
} }
.wave { .wave {
transform: translateX(adjust(-16px)); transform: translateX(adjust(-8px));
width: adjust(w(793px)); width: adjust(w(852px));
height: adjust(h(76px)); height: adjust(h(76px));
background: url(../../assets/inwater.png) no-repeat; background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -103,9 +83,10 @@ export default {
// background: #eee; // background: #eee;
} }
.time { .time {
// background: #eee; // background: #eee;
margin: adjust(12px) 0; margin: adjust(6px) 0 0;
padding-left: adjust(14px); padding-left: adjust(14px);
} }
@ -113,44 +94,20 @@ export default {
margin-right: adjust(5px); margin-right: adjust(5px);
} }
.temp-data {
color: #0068ff;
font-size: adjust(h(88px));
letter-spacing: 1px;
}
.unit { .unit {
font-family: Ubuntu, monospace, sans-serif !important; font-family: sans-serif !important;
font-size: adjust(20px); font-size: adjust(h(48px));
letter-spacing: adjust(1px); font-weight: 400;
letter-spacing: 1px;
align-self: flex-end; align-self: flex-end;
} margin-bottom: 4px;
margin-left: 4px;
.text { color: #0068ff;
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
} }
</style> </style>

View File

@ -1,7 +1,7 @@
<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" key="1"
@ -30,6 +30,7 @@ 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 { mapState } from "vuex"; import { mapState } from "vuex";
import { randomInt } from "@/utils";
export default { export default {
name: "OilFlow", name: "OilFlow",
@ -38,10 +39,62 @@ export default {
data() { data() {
return { return {
chartConfig: {}, chartConfig: {},
oilTable1: {
FT111: Array(24)
.fill(1)
.map((_) => randomInt()),
FT112: Array(24)
.fill(1)
.map((_) => randomInt()),
FT113: Array(24)
.fill(1)
.map((_) => randomInt()),
FT114: Array(24)
.fill(1)
.map((_) => randomInt()),
FT115: Array(24)
.fill(1)
.map((_) => randomInt()),
},
oilTable2: {
OT001: Array(24)
.fill(1)
.map((_) => randomInt()),
OT002: Array(24)
.fill(1)
.map((_) => randomInt()),
OT004: Array(24)
.fill(1)
.map((_) => randomInt()),
OT003: Array(24)
.fill(1)
.map((_) => randomInt()),
OT005: Array(24)
.fill(1)
.map((_) => randomInt()),
OT006: Array(24)
.fill(1)
.map((_) => randomInt()),
OT007: Array(24)
.fill(1)
.map((_) => randomInt()),
OT008: Array(24)
.fill(1)
.map((_) => randomInt()),
OT009: Array(24)
.fill(1)
.map((_) => randomInt()),
OT000: Array(24)
.fill(1)
.map((_) => randomInt()),
OT011: Array(24)
.fill(1)
.map((_) => randomInt()),
},
}; };
}, },
computed: { computed: {
...mapState(["oilTable1", "oilTable2"]), // ...mapState(["oilTable1", "oilTable2"]),
}, },
}; };
</script> </script>
@ -59,8 +112,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
); );

View File

@ -1,44 +1,18 @@
<template> <template>
<!-- 窑炉出口水温 --> <!-- 窑炉出口水温 -->
<Container usage="NumberAndChart"> <Container class="out-water" usage="NumberAndChart">
<SubContainer title="窑炉出口水温" icon="inWater" padding="34px"> <SubContainer title="出口实时水温" icon="inWater">
<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">
<template v-for="(item, index) in waterOutTemp.split('')"> <span class="temp-data">{{ waterOutTemp }}</span>
<DigitalBox
v-if="item !== '.'"
class="time--item"
:key="index"
:value="item"
:wider="true"
/>
<span
:key="index"
v-else
style="
background: #fff;
width: 10px;
height: 10px;
align-self: flex-end;
margin-bottom: 9px;
margin-right: 8px;
"
></span>
<!-- <span :key="index" v-else style="background: red; margin-right: 8px; line-height: 1; font-size: 88px; font-family: 'zcoolqingkehuangyouti-Regular'"></span> -->
</template>
<span class="unit"></span> <span class="unit"></span>
</div> </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 key="water-out" title="窑炉出口水温历史" :series="kilnWaterOut" />
key="water-out"
title="窑炉出口水温历史"
:series="kilnWaterOut"
/>
</div> </div>
</div> </div>
</SubContainer> </SubContainer>
@ -67,16 +41,21 @@ export default {
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.pic { .out-water {
background: url(../../assets/out-water.png) no-repeat;
background-size: 100% 100%;
background-position: center;
position: absolute; position: absolute;
top: adjust(24px); top: adjust(h(1065px));
left: adjust(w(5630px));
height: adjust(h(620px));
width: adjust(w(880px));
}
.pic {
background: url(../../assets/out-water.png) top 0 left 0 / 90% no-repeat;
position: absolute;
top: adjust(10px);
right: 0; right: 0;
width: adjust(w(440px)); width: adjust(w(440px));
height: adjust(h(380px)); height: adjust(h(380px));
@ -87,10 +66,10 @@ export default {
} }
.wave { .wave {
transform: translateX(adjust(-16px)) rotateY(0.5turn); transform: translateX(adjust(-8px));
width: adjust(w(793px)); width: adjust(w(852px));
height: adjust(h(76px)); height: adjust(h(76px));
background: url(../../assets/inwater.png) no-repeat; background: url(../../assets/outwater.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -103,9 +82,10 @@ export default {
// background: #eee; // background: #eee;
} }
.time { .time {
// background: #eee; // background: #eee;
margin: adjust(12px) 0; margin: adjust(4px) 0 0;
padding-left: adjust(14px); padding-left: adjust(14px);
} }
@ -113,44 +93,20 @@ export default {
margin-right: adjust(5px); margin-right: adjust(5px);
} }
.temp-data {
color: #0068ff;
font-size: adjust(h(88px));
letter-spacing: 1px;
}
.unit { .unit {
font-family: Ubuntu, monospace, sans-serif !important; font-family: sans-serif !important;
font-size: adjust(20px); font-size: adjust(h(48px));
letter-spacing: adjust(1px); font-weight: 400;
letter-spacing: 1px;
align-self: flex-end; align-self: flex-end;
} margin-bottom: 4px;
margin-left: 4px;
.text { color: #0068ff;
display: inline-block;
margin-left: adjust(24px);
margin-bottom: adjust(10px);
padding: adjust(12px) 0;
text-align: center;
font-size: adjust(22px);
letter-spacing: adjust(1px);
position: relative;
z-index: 10;
user-select: none;
}
.text::after {
content: "";
display: block;
position: absolute;
z-index: 0;
left: 0;
bottom: adjust(10px);
height: adjust(4px);
width: 100%;
/* 渐变色 */
background: radial-gradient(
ellipse at center,
#6fe2ff,
#6fe2ffc0,
#52cbef80,
#52cbef30,
#52cbef00,
transparent
);
} }
</style> </style>

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>

View File

@ -75,27 +75,27 @@ export default {
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: adjust(20), top: adjust(0),
left: adjust(28), left: adjust(10),
bottom: adjust(18), bottom: adjust(10),
right: adjust(12), right: adjust(0),
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: this.updateXAxis(), data: this.updateXAxis(),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#5982b2a0", color: '#0068ff33'
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff9", color: "#3C4E8B",
fontSize: adjust(8), fontSize: adjust(4),
lineHeight: adjust(1), lineHeight: adjust(0),
margin: adjust(6), margin: adjust(4),
rotate: 30, rotate: 30,
}, },
}, },
@ -110,7 +110,7 @@ export default {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#5982b2a0", color: '#0068ff33'
}, },
}, },
axisTick: { axisTick: {
@ -118,13 +118,13 @@ export default {
}, },
axisLabel: { axisLabel: {
formatter: "{value} ℃", formatter: "{value} ℃",
color: "#fff9", color: "#3C4E8B",
fontSize: adjust(8), fontSize: adjust(4),
lineHeight: adjust(1), lineHeight: adjust(0),
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#5982b2a0", color: '#0068ff33'
}, },
}, },
// data: [100, 200, 300, 400, 500], // data: [100, 200, 300, 400, 500],

View File

@ -3,7 +3,7 @@
<div class="line-chart__wrapper"> <div class="line-chart__wrapper">
<div class="line-chart__custom-legend flex" v-if="legend.length"> <div class="line-chart__custom-legend flex" v-if="legend.length">
<!-- <span>产线1 - 产线5</span> --> <!-- <span>产线1 - 产线5</span> -->
<ul style="" class="flex"> <ul style="" class="">
<li v-for="(v, i) in legend" :key="i">{{ v }}</li> <li v-for="(v, i) in legend" :key="i">{{ v }}</li>
</ul> </ul>
</div> </div>
@ -19,8 +19,9 @@
height: 100%; height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
font-size: 24px; font-size: 18px;
color: #eee8; letter-spacing: 2px;
color: #3C4E8B;
user-select: none; user-select: none;
" "
> >
@ -95,9 +96,11 @@ export default {
"#7138FF", "#7138FF",
"#F318D8", "#F318D8",
"#C0F318", "#C0F318",
"#f77", "#ff7777",
"#19f", "#1199ff",
"#98f", "#9988ff",
"#3388ff",
"#337788",
], ],
data: [], data: [],
legendtext: [ legendtext: [
@ -142,11 +145,12 @@ export default {
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: adjust(32), top: adjust(22),
left: adjust(32), left: adjust(22),
bottom: adjust(24), bottom: adjust(20),
right: adjust(12), right: adjust(8),
}, },
tooltip: {},
xAxis: { xAxis: {
data: this.updateXAxis(), data: this.updateXAxis(),
axisLine: { axisLine: {
@ -158,20 +162,21 @@ export default {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff9", color: "#3C4E8Baa",
fontSize: adjust(8), fontSize: adjust(6),
lineHeight: adjust(1), lineHeight: adjust(0),
margin: adjust(8), margin: adjust(4),
rotate: 30, rotate: 45,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: this.unit, name: this.unit,
nameTextStyle: { nameTextStyle: {
color: "#fff9", color: "#3C4E8Baa",
fontSize: adjust(9), fontSize: adjust(8),
align: "", lineHeight: adjust(12),
align: "center",
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -184,9 +189,9 @@ export default {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff9", color: "#3C4E8Baa",
fontSize: adjust(8), fontSize: adjust(7),
lineHeight: adjust(1), lineHeight: adjust(0),
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@ -229,7 +234,7 @@ export default {
name: lgd, name: lgd,
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: adjust(3), symbolSize: adjust(2),
lineStyle: { lineStyle: {
width: adjust(1), width: adjust(1),
}, },
@ -276,50 +281,47 @@ li {
} }
ul { ul {
// padding: 0 adjust(8px); // background: #0005;
display: flex; width: 100%;
flex-wrap: wrap; height: adjust(14px);
justify-content: flex-end;
align-items: center;
height: adjust(28px);
// background: #eeec;
// overflow-x: hidden;
white-space: pre-wrap; white-space: pre-wrap;
padding-bottom: adjust(2px); padding-bottom: 0;
padding-left: adjust(6px);
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: 6px;
// column-span: none;
justify-items: end;
align-items: end;
} }
li { li {
text-align: right; padding-left: adjust(1px);
position: relative; position: relative;
min-width: 40px; // background: #f003;
margin-right: adjust(9px); user-select: none;
padding: 0 adjust(2px);
}
li:not(:last-child) {
// margin-right: adjust(16px);
} }
.line-chart__custom-legend { .line-chart__custom-legend {
position: absolute; position: absolute;
top: adjust(-32px); top: adjust(-20px);
right: 0; right: 0;
font-size: adjust(9px); font-size: adjust(5px);
font-family: Ubuntu, sans-serif; font-family: Ubuntu, sans-serif;
padding: 0; padding: 0;
// max-width: 100%; // max-width: 100%;
width: 65%; width: 75%;
align-items: flex-start; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
} }
li::before { li::before {
content: ""; content: "";
position: absolute; position: absolute;
top: adjust(2px); top: adjust(.5px);
left: adjust(-8px); left: adjust(-5px);
width: adjust(8px); width: adjust(5px);
height: adjust(8px); height: adjust(5px);
border-radius: adjust(1px); border-radius: adjust(1px);
background: #eee6; background: #eee6;
} }
@ -357,11 +359,14 @@ li:nth-child(10)::before {
li:nth-child(11)::before { li:nth-child(11)::before {
background: #98f; background: #98f;
} }
li:nth-child(12)::before {
background: #38f;
}
.line-chart__wrapper { .line-chart__wrapper {
position: relative; position: relative;
background: #7771; background: #3564ff0f;
border-radius: adjust(3px); border-radius: adjust(4px);
backdrop-filter: blur(adjust(2px)); backdrop-filter: blur(adjust(2px));
box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1); box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
height: 100%; height: 100%;

View File

@ -56,39 +56,41 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.small-box-2 { .small-box-2 {
padding: adjust(14px); flex-shrink: 0;
// border: 1px solid gray; padding: 0;
// box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
box-shadow: inset 0 0 30px rgba($color: #fff, $alpha: 0.285);
border-radius: adjust(6px);
user-select: none; user-select: none;
// width: adjust(w(465px)); width: adjust(w(820px));
// height: adjust(h(200px)); height: adjust(h(350px));
width: adjust(w(528px));
height: adjust(h(240px));
display: flex; display: flex;
background: url(../../assets/top-middle.png) no-repeat;
background-size: 100% 100%;
background-position: bottom;
.icon { .icon {
width: adjust(h(128px)); margin-top: adjust(h(56px));
height: adjust(h(128px)); margin-left: adjust(w(24px));
width: adjust(h(172px));
height: adjust(h(172px));
} }
.info { .info {
margin-top: adjust(h(56px));
flex: 1 auto;
font-family: "微软雅黑", sans-serif; font-family: "微软雅黑", sans-serif;
padding-left: adjust(5px);
h2 { h2 {
font-size: adjust(16px); font-size: adjust(12px);
opacity: 0.7; opacity: 0.7;
// line-height: adjust(12px);
letter-spacing: adjust(1px); letter-spacing: adjust(1px);
font-weight: 400; font-weight: 400;
color: hsla(0, 0%, 100%, 0.9); color: hsla(0, 0%, 0%, 0.9);
} }
.value { .value {
color: #fff; color: #030609;
font-size: adjust(30px); font-size: adjust(18px);
line-height: adjust(29px); line-height: adjust(22px);
} }
} }
} }

View File

@ -0,0 +1,71 @@
<template>
<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: {
FanRuntime,
OilFlow,
GasFlow,
TopTemp,
BottomTemp,
},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
section {
background: url('../../assets/middle-under.png') left 110px top 4px / 380px 22px no-repeat;
width: adjust(w(13700px));
height: adjust(h(830px));
// width: adjust(w(13500px));
// height: adjust(h(960px));
position: absolute;
top: adjust(h(3390px));
// top: adjust(h(3265px));
left: adjust(w(3700px));
}
section::before {
content: '数据组';
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-size: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
}
.data-group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
</style>

View File

@ -0,0 +1,47 @@
<template>
<section class="environ-analysis">
</section>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "EnviroAnalysis",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
section {
background: url('../../assets/fault-analysis.png') left 144px top 4px / 79% 54% no-repeat, #ccc7;
width: adjust(w(1900px));
height: adjust(h(1260px));
position: absolute;
top: adjust(h(430px));
// left: adjust(w(15300px));
left: adjust(w(15500px));
}
section::before {
content: '环境浓度';
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-size: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
}
</style>

View File

@ -0,0 +1,46 @@
<template>
<section class="fault-analysis">
</section>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "FaultAnalysis",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
section {
background: url('../../assets/fault-analysis.png') left 144px top 4px / 79% 54% no-repeat, #ccc7;
width: adjust(w(1900px));
height: adjust(h(1260px));
position: absolute;
top: adjust(h(430px));
left: adjust(w(3700px));
}
section::before {
content: '缺陷分析';
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-size: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
}
</style>

View File

@ -0,0 +1,46 @@
<template>
<section class="monitor-group">
</section>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "MonitorGroup",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
section {
background: url('../../assets/monitor-group.png') left 144px top 4px / 1152px 80% no-repeat, #ccc7;
width: adjust(w(3570px));
height: adjust(h(3790px));
position: absolute;
top: adjust(h(430px));
left: adjust(w(80px));
}
section::before {
content: '监控组 1';
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-size: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
}
</style>

View File

@ -0,0 +1,48 @@
<template>
<section class="monitor-group-2">
</section>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "MonitorGroup-2",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
section {
background: url('../../assets/middle1.png') left 144px top 4px / 97% 420px no-repeat, #ccc7;
width: adjust(w(13700px));
height: adjust(h(1600px));
// width: adjust(w(13500px));
// height: adjust(h(1470px));
position: absolute;
top: adjust(h(1740px));
left: adjust(w(3700px));
}
section::before {
content: '监控组 2';
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-size: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
}
</style>

View File

@ -0,0 +1,47 @@
<template>
<section class="monitor-group">
</section>
</template>
<script>
// import { mapState } from "vuex";
export default {
name: "MonitorGroup-3",
props: {},
components: {},
data() {
return {};
},
computed: {
// ...mapState(["kilnWaterIn", "waterInTemp"]),
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
section {
background: url('../../assets/monitor-group.png') left 144px top 4px / 1152px 80% no-repeat, #ccc7;
width: adjust(w(3570px));
height: adjust(h(3790px));
position: absolute;
top: adjust(h(430px));
// left: adjust(w(17264px));
left: adjust(w(17464px));
}
section::before {
content: '监控组 3';
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
font-size: adjust(h(64px));
font-weight: 400;
letter-spacing: 1px;
position: absolute;
color: $main-color;
top: 0;
left: 0;
}
</style>

View File

@ -1,8 +1,8 @@
<template> <template>
<svg <svg
:width="adjust('64px')" :width="adjust('46px')"
:height="adjust('64px')" :height="adjust('46px')"
viewBox="0 0 94 96" viewBox="0 0 96 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
:width="adjust('64px')" :width="adjust('46px')"
:height="adjust('64px')" :height="adjust('46px')"
viewBox="0 0 95 96" viewBox="0 0 95 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
:width="adjust('64px')" :width="adjust('46px')"
:height="adjust('64px')" :height="adjust('46px')"
viewBox="0 0 122 122" viewBox="0 0 122 122"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

View File

@ -1,7 +1,7 @@
<template> <template>
<svg <svg
:width="adjust('64px')" :width="adjust('46px')"
:height="adjust('64px')" :height="adjust('46px')"
viewBox="0 0 94 96" viewBox="0 0 94 96"
version="1.1" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

View File

@ -1,12 +1,20 @@
<template> <template>
<DragabbleContainer class="isolate-area-1"> <DragabbleContainer class="isolate-area-1">
<SmallBox2 <div class="data pressure">
v-for="rd in rdata" <span></span>
:key="rd.icon" <span></span>
:icon="rd.icon" <span v-for="press, index in pressure" :key="index"
:title="rd.title" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ press
:value="rd.value" }}</span>
></SmallBox2> <span>Pa</span>
</div>
<SmallBox2 class="data-center" v-for="rd in rdata" :key="rd.icon" :icon="rd.icon" :title="rd.title" :value="rd.value"></SmallBox2>
<div class="data runtime">
<span></span>
<span></span>
<span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
<span></span>
</div>
</DragabbleContainer> </DragabbleContainer>
</template> </template>
@ -22,22 +30,24 @@ export default {
components: { DragabbleContainer, SmallBox2 }, components: { DragabbleContainer, SmallBox2 },
data() { data() {
return { return {
pressure: '10.1'.split(''),
runtime: '0012'.split(''),
rdata: [ rdata: [
// { icon: "temp", title: "", value: "27" }, // { icon: "temp", title: "", value: "27" },
{ icon: "fire", title: "当前火向", value: "" }, { icon: "fire", title: "当前火向", value: "" },
{ icon: "clock", title: "换火时间", value: "20分" }, { icon: "clock", title: "换火时间", value: "20分" },
{ icon: "sand", title: "剩余时间", value: "0" }, { icon: "sand", title: "剩余时间", value: "19分20" },
], ],
}; };
}, },
watch: { watch: {
fireDirection: function(val) { fireDirection: function (val) {
this.$set(this.rdata[0], 'value', val) this.$set(this.rdata[0], 'value', val)
}, },
fireChangeTime: function(val) { fireChangeTime: function (val) {
this.$set(this.rdata[1], 'value', val) this.$set(this.rdata[1], 'value', val)
}, },
lastFireChangeTime: function(val) { lastFireChangeTime: function (val) {
let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒') let [_, min, sec] = /(\d+)分(\d+)秒/.exec(val || '0分0秒')
if (timeFun) clearInterval(timeFun) if (timeFun) clearInterval(timeFun)
timeFun = setInterval(() => { timeFun = setInterval(() => {
@ -56,25 +66,6 @@ export default {
}, },
computed: { computed: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]), ...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
// rdata() {
// let [_, min, sec] = /(\d+)(\d+)/.exec(this.lastFireChangeTime)
// min = +min
// sec = +sec
// let interTime = `${min}${sec}`
// let timer = setInterval(() => {
// if (sec) sec -= 1
// else {
// sec = 59
// min -= 1
// }
// }, 1000);
// return [
// // { icon: "temp", title: "", value: "27" },
// { icon: "fire", title: "", value: this.fireDirection },
// { icon: "clock", title: "", value: this.fireChangeTime },
// { icon: "sand", title: "", value: interTime },
// ];
// },
}, },
}; };
</script> </script>
@ -84,11 +75,42 @@ export default {
.isolate-area-1 { .isolate-area-1 {
display: flex; display: flex;
color: $main-color;
min-width: 300px;
align-items: center;
> .small-box-2:not(:last-child) { > *:not(:last-child) {
margin: { margin: {
right: adjust(15px); right: adjust(10px);
} }
} }
> .data {
flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: flex-end;
}
> .data > span:not(.dot) {
/** 边框 */
background: url('../../assets/digitbox1.png') no-repeat;
background-size: 100% 100%;
display: inline-block;
width: adjust(w(220px));
height: adjust(h(260px));
color: #0068ffaa;
font-size: h(200px);
line-height: h(600px);
text-align: center;
vertical-align: bottom;
}
> .data > span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: h(360px);
line-height: h(540px);
}
} }
</style> </style>

View File

@ -33,8 +33,8 @@ export default {
}, },
}; };
}, },
created() {}, created() { },
mounted() {}, mounted() { },
methods: {}, methods: {},
}; };
</script> </script>
@ -44,39 +44,35 @@ export default {
@import "../../assets/styles/variables"; @import "../../assets/styles/variables";
.number-or-date { .number-or-date {
display: inline-block; display: inline-block;
width: adjust(w(800px)); // background: url(../../assets/box-number.png) 0 0 / 100% 100% no-repeat;
height: adjust(h(375px));
background: url(../../assets/box-number.png);
background-position: 0 0; /** top left */
background-size: 100% 100%;
} }
.tables { .tables {
display: inline-block; display: inline-block;
width: adjust(w(800px)); // width: adjust(w(1115px));
height: adjust(h(528px)); width: adjust(w(1400px));
background: url(../../assets/box-table.png); height: adjust(h(700px));
background-position: 0 0; /** top left */ background: url(../../assets/box-table.png);
background-size: 100% 100%; background-position: 0 0;
/** top left */
background-size: 100% 100%;
} }
.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; /** top left */ background-position: 0 0;
background-size: 100% 100%; /** top left */
background-size: 100% 100%;
} }
.number-and-chart { .number-and-chart {
display: inline-block; display: inline-block;
width: adjust(w(800px)); width: adjust(w(800px));
height: adjust(h(931px)); height: adjust(h(931px));
background: url(../../assets/box-right.png); background: url(../../assets/box-right.png) 0 0 / 100% 100% no-repeat;
background-position: 0 0; /** top left */
background-size: 100% 100%;
} }
</style> </style>

View File

@ -6,9 +6,13 @@
</span> </span>
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1> <h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
</div> </div>
<span class="header--wing absolute company"></span> <span class="header--wing absolute company">
设计单位: 中建材智能自动化研究院
</span>
<span class="header--wing absolute datetime"> <span class="header--wing absolute datetime">
{{ moment(today).format('YYYY.M.D dddd HH:mm:ss') }} {{ moment(today).format('YYYY.M.D dddd') }}
&nbsp;&nbsp;
{{ moment(today).format('HH:mm:ss') }}
</span> </span>
</header> </header>
</template> </template>
@ -66,60 +70,69 @@ export default {
@import "../../assets/styles/variables"; @import "../../assets/styles/variables";
header { header {
background: url(../../assets/header.png) center/contain no-repeat; background: url(../../assets/header.png) center / 65% 100% no-repeat;
background-size: 100%; // background-size: 100% 100%;
height: adjust(h(280px)); // background-size: 13515px 634px;
width: adjust($actual_width); // background-position: bottom;
height: adjust(h(580px));
width: adjust(w(21120px));
display: grid; display: grid;
place-items: center; place-items: center;
// padding-bottom: adjust(2px);
> div { >div {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: adjust(10px); margin-bottom: adjust(10px);
margin-left: adjust(64px);
.header--logo { .header--logo {
width: adjust(102px); width: adjust(128px);
height: adjust(56px); height: adjust(h(337px));
background: url(../../assets/logo.png) center/contain no-repeat; background: url(../../assets/logo.png) center/contain no-repeat;
} }
h1 { h1 {
margin-left: adjust(20px); margin-left: adjust(20px);
font-size: adjust(35px); font-size: adjust(42px);
// line-height: adjust(100px);
// background: #eee;
user-select: none; user-select: none;
letter-spacing: adjust(8px); letter-spacing: adjust(6px);
font-weight: 600; font-weight: 600;
// color: #6bf2ff;
color: $main-color; color: $main-color;
font-family: "微软雅黑", sans-serif; font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
} }
} }
} }
.header--wing { .header--wing {
top: adjust(h(128px));
left: 0; left: 0;
bottom: adjust(10px); bottom: adjust(10px);
height: adjust(h(78px)); height: adjust(h(130px));
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
} }
.company { .company {
margin-left: adjust(w(1460px)); margin-left: adjust(w(4035px));
width: adjust(w(1320px)); height: adjust(h(130px));
height: adjust(h(48px)); // font-weight: 600;
background: url("../../assets/company.png") center/cover no-repeat; text-align: center;
color: lighten($main-color, 8);
font-size: adjust(h(90px));
letter-spacing: unset;
// background: red;
// width: adjust(w(1320px));
// background: url("../../assets/company.png") center/cover no-repeat;
} }
.datetime { .datetime {
color: $main-color; color: $main-color;
font-size: adjust(26px); font-size: adjust(h(90px));
text-align: center; text-align: center;
// display: inline-block; margin-left: adjust(w(15420px));
margin-left: adjust(w(6150px)); color: lighten($main-color, 8);
width: adjust(w(1320px)); height: adjust(h(130px));
height: adjust(h(48px)); // width: adjust(w(1764px));
background: url("../../assets/date.png") center/cover no-repeat; // background: url("../../assets/date.png") center/cover no-repeat;
} }
</style> </style>

View File

@ -1,81 +1,70 @@
<template> <template>
<main class=""> <main class="">
<!-- 监控组 -->
<MonitorGroup />
<!-- 缺陷分析 -->
<FaultAnalysis />
<!-- 环境浓度 -->
<Environ />
<!-- 监控组 2 -->
<MonitorGroup2 />
<!-- 监控组 3 -->
<MonitorGroup3 />
<!-- 数据组 -->
<DataGroup />
<div class="video-crash" v-if="false"></div> <div class="video-crash" v-if="false"></div>
<div class="eq-main absolute"> <div class="eq-main absolute">
<div <div class="arrow ar-top-left" :class="topLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
class="arrow ar-top-left" <div class="arrow ar-top-right" :class="topRightArrowRolling === '运行' ? 'ar-running' : ''"></div>
:class="topLeftArrowRolling === '运行' ? 'ar-running' : ''" <div class="arrow ar-bottom-left" :class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"></div>
></div> <div class="arrow ar-bottom-right" :class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"></div>
<div
class="arrow ar-top-right"
:class="topRightArrowRolling === '运行' ? 'ar-running' : ''"
></div>
<div
class="arrow ar-bottom-left"
:class="bottomLeftArrowRolling === '运行' ? 'ar-running' : ''"
></div>
<div
class="arrow ar-bottom-right"
:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"
></div>
<div class="swd onekb"> <div class="swd onekb">
<div class="swd-box"> <div class="swd-box">
<p>1#卡脖</p> <p>1#卡脖</p>
<p class="swd-value">{{Number(onekb).toFixed(1)}}</p> <p class="swd-value">{{ Number(onekb).toFixed(1) }}</p>
</div> </div>
</div> </div>
<div class="swd onesp"> <div class="swd onesp">
<div class="swd-box"> <div class="swd-box">
<p>1#搅拌</p> <p>1#搅拌</p>
<p class="swd-value">{{Number(onesp).toFixed(1)}}</p> <p class="swd-value">{{ Number(onesp).toFixed(1) }}</p>
</div> </div>
</div> </div>
<div class="swd twokb"> <div class="swd twokb">
<div class="swd-box"> <div class="swd-box">
<p>2#卡脖</p> <p>2#卡脖</p>
<p class="swd-value">{{Number(twokb).toFixed(1)}}</p> <p class="swd-value">{{ Number(twokb).toFixed(1) }}</p>
</div> </div>
</div> </div>
<div class="swd twosp"> <div class="swd twosp">
<div class="swd-box"> <div class="swd-box">
<p>2#搅拌</p> <p>2#搅拌</p>
<p class="swd-value">{{Number(twosp).toFixed(1)}}</p> <p class="swd-value">{{ Number(twosp).toFixed(1) }}</p>
</div> </div>
</div> </div>
<div class="video-bottom" v-show="fireDirection === '北火'" style=""> <div class="video-bottom--wrapper" v-show="true || fireDirection === '北火'" style="">
<video <video class="video-bottom" id="1" preload="auto" height="130" muted autoplay loop disablepictureinpicture
id="1" src="../../assets/videos/fire-to-top.mp4"></video>
preload="auto"
height="260"
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-top.mp4"
></video>
</div> </div>
<div class="video-top" v-show="fireDirection === '南火'" style=""> <div class="video-top--wrapper" v-show="true || fireDirection === '南火'" style="">
<video <video id="2" class="video-top" preload="auto" height="130" muted autoplay loop disablepictureinpicture
id="2" src="../../assets/videos/fire-to-bottom.mp4"></video>
class="video-top"
preload="auto"
height="260"
muted
autoplay
loop
disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"
></video>
</div> </div>
</div> </div>
<AreaOne class="area-one" /> <AreaOne class="area-one" />
<div class="absolute left kiln-runtime"> <!-- <div class="absolute left kiln-runtime">
<KilnRuntime /> <KilnRuntime />
</div> </div>
<div class="absolute left kiln-pressure"> <div class="absolute left kiln-pressure">
@ -98,28 +87,33 @@
</div> </div>
<div class="absolute left ou-temp"> <div class="absolute left ou-temp">
<XicaoTemp /> <XicaoTemp />
</div> </div> -->
<div class="absolute in-water">
<InWater />
</div> <InWater />
<div class="absolute out-water"> <OutWater />
<OutWater />
</div>
</main> </main>
</template> </template>
<script> <script>
import KilnRuntime from "../boxes/KilnRuntime.vue"; // import KilnRuntime from "../boxes/KilnRuntime.vue";
import KilnPressure from "../boxes/KilnPressure.vue"; // import KilnPressure from "../boxes/KilnPressure.vue";
import OilFlow from "../boxes/OilFlow.vue"; // import OilFlow from "../boxes/OilFlow.vue";
import GasFlow from "../boxes/GasFlow.vue"; // import GasFlow from "../boxes/GasFlow.vue";
import TopTemp from "../boxes/TopTemp.vue"; // 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 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 MonitorGroup from '../groups/monitor.vue'
import MonitorGroup2 from '../groups/monitor2.vue'
import MonitorGroup3 from '../groups/monitor3.vue'
import DataGroup from '../groups/data.vue'
import FaultAnalysis from '../groups/fault.vue'
import Environ from '../groups/environ.vue'
// import Container from './Container.vue' // import Container from './Container.vue'
import { mapMutations, mapState } from "vuex"; import { mapMutations, mapState } from "vuex";
@ -128,15 +122,21 @@ import WsClient from "../../utils/wsClass";
export default { export default {
name: "Main", name: "Main",
components: { components: {
DataGroup,
MonitorGroup,
MonitorGroup2,
MonitorGroup3,
Environ,
FaultAnalysis,
AreaOne, AreaOne,
KilnRuntime, // KilnRuntime,
KilnPressure, // KilnPressure,
FanRuntime, // FanRuntime,
OilFlow, // OilFlow,
GasFlow, // GasFlow,
TopTemp, // TopTemp,
BottomTemp, // BottomTemp,
XicaoTemp, // XicaoTemp,
InWater, InWater,
OutWater, OutWater,
}, },
@ -174,19 +174,19 @@ export default {
main { main {
height: 1px; height: 1px;
flex: 1; flex: 1;
// background: #eee2; // background: #f2e2;
} }
.area-one { .area-one {
position: absolute; position: absolute;
top: adjust(160px); top: adjust(150px);
left: adjust(1588px); left: adjust(1310px);
} }
.video-crash { .video-crash {
height: adjust(h(424px)); height: adjust(h(424px));
width: adjust(w(800px)); width: adjust(w(800px));
background: url(../../assets/tv.png) no-repeat; // background: url(../../assets/tv.png) no-repeat;
background-size: 100%; background-size: 100%;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -196,9 +196,9 @@ main {
.video-bottom { .video-bottom {
position: absolute; position: absolute;
bottom: adjust(200.5px); bottom: adjust(207px);
left: adjust(48px); left: adjust(29px);
transform: scale(0.9); transform: scale(0.95);
} }
.video-top { .video-top {
@ -209,8 +209,8 @@ main {
} }
.arrow { .arrow {
width: adjust(20px); width: adjust(12px);
height: adjust(20px); height: adjust(12px);
display: inline-block; display: inline-block;
position: absolute; position: absolute;
background: #ff5757; background: #ff5757;
@ -221,116 +221,95 @@ main {
background: #1bff3a; background: #1bff3a;
} }
// .ar-top-left.arrow,
// .ar-top-right.arrow {
// animation: none;
// background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
// }
// .ar-bottom-left.arrow,
// .ar-bottom-right.arrow {
// animation: none;
// background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
// no-repeat;
// }
// .ar-top-left.arrow.ar-running,
// .ar-top-right.arrow.ar-running {
// background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
// animation: clock-direction 1.15s linear infinite forwards;
// }
// .ar-bottom-left.arrow.ar-running,
// .ar-bottom-right.arrow.ar-running {
// background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
// animation: reverse-clock-direction 1.15s linear infinite forwards;
// }
.ar-top-right { .ar-top-right {
top: 145px; top: 66px;
left: 65px; left: 38px;
}
.ar-top-left {
top: 175px;
left: 985px;
}
.ar-bottom-left {
top: 445px;
left: 960px;
}
.ar-bottom-right {
top: 460px;
left: 20px;
} }
// @keyframes clock-direction { .ar-top-left {
// 0% { top: 88px;
// transform: rotate(0deg); left: 515px;
// } }
// 100% {
// transform: rotate(360deg); .ar-bottom-left {
// } top: 232px;
// } left: 500px;
// @keyframes reverse-clock-direction { }
// 0% {
// transform: rotate(0deg); .ar-bottom-right {
// } top: 258px;
// 100% { left: 14px;
// transform: rotate(-360deg); }
// }
// }
.swd { .swd {
background-size: 100%; // background-size: 100% 10px;
width: adjust(w(276px)); width: adjust(w(376px));
height: adjust(h(156px)); height: adjust(h(218px));
position: absolute; position: absolute;
transform: rotateY(180deg); transform: rotateY(180deg);
p { p {
margin: 0; margin: 0;
margin-top: adjust(12px); color: #0008;
margin-top: adjust(8px);
} }
.swd-box { .swd-box {
margin-left: adjust(21px); margin-left: adjust(8px);
font-size: adjust(15px); font-size: adjust(8px);
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif;
.swd-value { .swd-value {
color: #00f4ff; color: #ff2020;
margin-top: adjust(6px); margin-top: adjust(3px);
font-size: adjust(26px); font-size: adjust(14px);
overflow: hidden; /*超出部分隐藏*/ overflow: hidden;
white-space: nowrap; /*禁止换行*/ /*超出部分隐藏*/
text-overflow: ellipsis; /*省略号*/ white-space: nowrap;
/*禁止换行*/
text-overflow: ellipsis;
/*省略号*/
} }
} }
} }
.onekb, .onesp{ .onekb,
background: url(../../assets/tem-bottom.png) no-repeat;
}
.onekb {
top: adjust(300px);
left: adjust(350px)
}
.onesp { .onesp {
top: adjust(270px); background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat;
left: adjust(520px)
} }
.twokb, .twosp{
background: url(../../assets/tem-top.png) no-repeat; .onekb {
top: adjust(158px);
left: adjust(180px)
} }
.twokb {
top: adjust(-20px); .onesp {
left: adjust(370px) top: adjust(135px);
left: adjust(275px)
} }
.twokb,
.twosp { .twosp {
top: adjust(10px); background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat;
left: adjust(540px) }
.twokb {
top: adjust(-10px);
left: adjust(188px)
}
.twosp {
top: adjust(6px);
left: adjust(275px)
} }
.eq-main { .eq-main {
width: adjust(w(7150px)); width: adjust(w(8800px));
height: adjust(h(960px)); height: adjust(h(1400px));
background: url(../../assets/eq.png) no-repeat; background: url(../../assets/eq.png) no-repeat;
background-size: 100%; background-size: 100%;
top: adjust(170px); top: adjust(h(220px));
left: adjust(380px); left: adjust(w(6600px));
position: relative; position: relative;
transform: rotateY(0.5turn); transform: rotateY(0.5turn);
} }
@ -338,53 +317,54 @@ main {
.eq-main::before { .eq-main::before {
content: ""; content: "";
position: absolute; position: absolute;
// right: adjust(1200px);
opacity: 0; opacity: 0;
top: adjust(105px); top: adjust(55px);
width: adjust(150px); width: adjust(75px);
height: adjust(150px); height: adjust(75px);
background: url(../../assets/mirror.png) no-repeat; background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
animation: 10s linear 0.3s infinite mirror-to-left-2; // animation: 10s linear 0.3s infinite mirror-to-left-2;
} }
.eq-main::after { .eq-main::after {
content: ""; content: "";
position: absolute; position: absolute;
// right: adjust(1200px);
opacity: 0; opacity: 0;
top: adjust(105px); top: adjust(55px);
// top: adjust(125px); width: adjust(75px);
width: adjust(150px); height: adjust(75px);
height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat; background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
animation: 10s linear 5s infinite mirror-to-left; // animation: 10s linear 5s infinite mirror-to-left;
} }
@keyframes mirror-to-left { @keyframes mirror-to-left {
0% { 0% {
right: adjust(1200px); right: adjust(700px);
opacity: 1; opacity: 1;
} }
90% { 90% {
opacity: 1; opacity: 1;
} }
100% { 100% {
right: adjust(60px); right: adjust(30px);
} }
} }
@keyframes mirror-to-left-2 { @keyframes mirror-to-left-2 {
0% { 0% {
right: adjust(1200px); right: adjust(700px);
opacity: 1; opacity: 1;
} }
90% { 90% {
opacity: 1; opacity: 1;
} }
100% { 100% {
right: adjust(60px); right: adjust(30px);
} }
} }
@ -436,20 +416,4 @@ main {
left: adjust(w(7330px)); left: adjust(w(7330px));
// left: adjust(w(6460px)); // left: adjust(w(6460px));
} }
.in-water {
top: adjust(h(200px));
left: adjust(w(40px));
// left: adjust(w(8096px));
// // left: w(5096px);
z-index: 100;
}
.out-water {
top: adjust(h(1177px));
left: adjust(w(40px));
// left: adjust(w(8096px));
// left: w(5096px);
z-index: 100;
}
</style> </style>

View File

@ -3,7 +3,7 @@
<div class="sub-container" :style="{ padding }"> <div class="sub-container" :style="{ padding }">
<div class="title"> <div class="title">
<span class="icon" :class="iconClass[icon]"></span> <span class="icon" :class="iconClass[icon]"></span>
<span>{{ title }}</span> <span class="title_text">{{ title }}</span>
</div> </div>
<div class="content"> <div class="content">
<slot /> <slot />
@ -25,7 +25,7 @@ export default {
}, },
padding: { padding: {
type: String, type: String,
default: "10px", default: "20px",
}, },
}, },
data() { data() {
@ -57,8 +57,8 @@ export default {
.icon { .icon {
height: adjust(17px); height: adjust(17px);
width: adjust(17px); width: adjust(16px);
margin-right: adjust(8px); margin-right: 0;
} }
.icon-clock { .icon-clock {
@ -72,46 +72,59 @@ export default {
} }
.icon-oil { .icon-oil {
background: url(../../assets/oil.png); background: url(../../assets/oil.png) top 0 left 0 / 90% 75% 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 0 left 0 / 90% 75% 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 0 left 0 / 90% 75% 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 0 left 0 / 90% 75% 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 0 left 0 / 90% 75% no-repeat;
background-size: 100% 100%; margin-right: 6px;
} }
.icon-water-in { .icon-water-in {
background: url(../../assets/water-temp.png); background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75% no-repeat;
background-size: 100% 100%;
} }
.title { .title {
/* margin: 12px 0; */ font-size: adjust(h(40px));
margin-bottom: adjust(12px); letter-spacing: 1px;
font-size: adjust(17px); color: #3565ff;
color: #72f2ff;
font-family: sans-serif; font-family: sans-serif;
user-select: none; user-select: none;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.title_text {
line-height: 0;
margin-bottom: 10px;
}
.out-water .title,
.in-water .title {
font-size: adjust(h(40px));
}
.content { .content {
height: 1px; height: 1px;
/* background: #eee; */ /* background: #eee; */

View File

@ -31,7 +31,7 @@ export default new Vuex.Store({
kilnPressure: '00', kilnPressure: '00',
fireChangeTime: '00:00:00', fireChangeTime: '00:00:00',
lastFireChangeTime: '0分0秒', lastFireChangeTime: '0分0秒',
waterInTemp: '000', waterInTemp: '00.0',
waterOutTemp: '000' waterOutTemp: '000'
}, },
getters: { getters: {

11
src/utils/index.js Normal file
View File

@ -0,0 +1,11 @@
export function randomInt(min, max, closeRight = false) {
min = min ?? 0
max = max ?? 100
if (min >= max) { min = max - 100 > 0 ? max - 100 : 0 }
const fn = closeRight ? Math.ceil : Math.floor
let val = fn(Math.random() * max)
while (val < min) {
val = fn(Math.random() * max)
}
return val
}

View File

@ -26,12 +26,10 @@ export default {
@import '../assets/styles/functions'; @import '../assets/styles/functions';
.home-view { .home-view {
// width: 100vw;
// height: 100vh;
height: adjust($actual_height); height: adjust($actual_height);
width: adjust($actual_width); width: adjust($actual_width);
overflow: hidden; overflow: hidden;
background: url(../assets/bg.png) center/cover no-repeat ; background: url(../assets/bg.png) center/cover no-repeat, #E0E3F6;
color: white; color: white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

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

7565
yarn.lock

File diff suppressed because it is too large Load Diff