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

update adjust

Browse Source
This commit is contained in:
lb
2023-05-11 11:23:09 +08:00
parent 1bcd216487
commit 4e0f88c5ea
27 changed files with 281 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template> <template>
<!-- 窑底温度 --> <!-- 窑底温度 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="窑底温度" icon="oil" padding="17px"> <SubContainer title="窑底温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" /> <LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div> <div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
} }
.vertical-line { .vertical-line {
margin: 0 3px; margin: 0 adjust(3px);
width: 3px; width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,

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

@@ -1,7 +1,7 @@
<template> <template>
<!-- 风机运行情况 --> <!-- 风机运行情况 -->
<Container usage="Table"> <Container usage="Table">
<SubContainer title="风机运行情况" icon="docs" padding="17px"> <SubContainer title="风机运行情况" icon="docs" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<table class="table-1 flex-1 align-start"> <table class="table-1 flex-1 align-start">
<thead> <thead>
@@ -114,8 +114,8 @@ export default {
} }
.vertical-line { .vertical-line {
margin: 0 3px; margin: 0 adjust(3px);
width: 3px; width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,
@@ -126,7 +126,7 @@ export default {
} }
table { table {
border-spacing: 1px; border-spacing: adjust(1px);
} }
// tr, td, th { // tr, td, th {
@@ -134,7 +134,7 @@ table {
// } // }
.t-row { .t-row {
height: 13.88px; height: adjust(13.88px);
} }
.align-start { .align-start {
@@ -142,8 +142,8 @@ table {
} }
thead > tr th { thead > tr th {
font-size: 8px; font-size: adjust(8px);
padding: 1px 3px; padding: adjust(1px) adjust(3px);
font-weight: 400; font-weight: 400;
background: #044a8446; background: #044a8446;
} }
@@ -153,8 +153,8 @@ tbody > tr:nth-child(odd) {
} }
tbody > tr td { tbody > tr td {
font-size: 7px; font-size: adjust(7px);
padding: 1px 6px; padding: adjust(1px) adjust(6px);
font-weight: 400; font-weight: 400;
background: inherit; background: inherit;
} }

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

@@ -1,7 +1,7 @@
<template> <template>
<!-- 天然气流量 --> <!-- 天然气流量 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="天然气流量" icon="oil" padding="17px"> <SubContainer title="天然气流量" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" /> <LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div> <div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
} }
.vertical-line { .vertical-line {
margin: 0 3px; margin: 0 adjust(3px);
width: 3px; width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,

7
src/components/boxes/HistoryTemp.vue
View File

@@ -22,9 +22,8 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// .history-temp { @import "../../assets/styles/functions";
// }
.flex-1 { .flex-1 {
flex: 1; flex: 1;
@@ -35,8 +34,8 @@ h3 {
margin: 0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: adjust(10px);
letter-spacing: 1px; letter-spacing: adjust(1px);
color: #52fff8; color: #52fff8;
margin: 8px 0; margin: 8px 0;
} }

38
src/components/boxes/InWater.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<!-- 窑炉进口水温 --> <!-- 窑炉进口水温 -->
<Container usage="NumberAndChart"> <Container usage="NumberAndChart">
<SubContainer title="窑炉进口水温" icon="inWater" padding="17px"> <SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
<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">
@@ -52,10 +52,10 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
position: absolute; position: absolute;
top: 24px; top: adjust(24px);
right: 0; right: 0;
width: w(386px); width:adjust(w(386px));
height: h(364px); height: adjust(h(364px));
} }
.content { .content {
@@ -63,9 +63,9 @@ export default {
} }
.wave { .wave {
transform: translateX(-16px); transform: translateX(adjust(-16px));
width: w(793px); width: adjust(w(793px));
height: h(72px); height: adjust(h(72px));
background: url(../../assets/inwater.png) no-repeat; background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@@ -81,29 +81,29 @@ export default {
.time { .time {
// background: #eee; // background: #eee;
margin: 12px 0; margin: adjust(12px) 0;
padding-left: 14px; padding-left: adjust(14px);
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: 5px; margin-right: adjust(5px);
} }
.unit { .unit {
font-family: Ubuntu, monospace, sans-serif !important; font-family: Ubuntu, monospace, sans-serif !important;
font-size: 20px; font-size: adjust(20px);
letter-spacing: 1px; letter-spacing: adjust(1px);
align-self: flex-end; align-self: flex-end;
} }
.text { .text {
display: inline-block; display: inline-block;
margin-left: 24px; margin-left: adjust(24px);
margin-bottom: 10px; margin-bottom: adjust(10px);
padding: 12px 0; padding: adjust(12px) 0;
text-align: center; text-align: center;
font-size: 22px; font-size: adjust(22px);
letter-spacing: 1px; letter-spacing: adjust(1px);
position: relative; position: relative;
z-index: 10; z-index: 10;
user-select: none; user-select: none;
@@ -115,8 +115,8 @@ export default {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 0; left: 0;
bottom: 10px; bottom: adjust(10px);
height: 4px; height: adjust(4px);
width: 100%; width: 100%;
/* 渐变色 */ /* 渐变色 */
background: radial-gradient( background: radial-gradient(

20
src/components/boxes/KilnPressure.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<!-- 窑炉压力 --> <!-- 窑炉压力 -->
<Container usage="NumberOrDate"> <Container usage="NumberOrDate">
<SubContainer title="窑炉压力" icon="docs" padding="17px"> <SubContainer title="窑炉压力" icon="docs" padding="34px">
<div class="pressure flex flex-col flex-start"> <div class="pressure flex flex-col flex-start">
<div class="time flex flex-center"> <div class="time flex flex-center">
<DigitalBox <DigitalBox
@@ -46,17 +46,17 @@ export default {
.time { .time {
// background: #eee; // background: #eee;
margin: 12px 0; margin: adjust(12px) 0;
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: 4px; margin-right: adjust(4px);
} }
.unit { .unit {
font-family: sans-serif; font-family: sans-serif;
font-size: 20px; font-size: adjust(20px);
letter-spacing: 1px; letter-spacing: adjust(1px);
align-self: flex-end; align-self: flex-end;
} }
@@ -65,10 +65,10 @@ export default {
} }
.text { .text {
padding: 12px 0; padding: adjust(12px) 0;
text-align: center; text-align: center;
font-size: 23px; font-size: adjust(23px);
letter-spacing: 1px; letter-spacing: adjust(1px);
position: relative; position: relative;
z-index: 10; z-index: 10;
user-select: none; user-select: none;
@@ -80,8 +80,8 @@ export default {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 0; left: 0;
bottom: 10px; bottom: adjust(10px);
height: 4px; height: adjust(4px);
width: 100%; width: 100%;
/* 渐变色 */ /* 渐变色 */
background: radial-gradient( background: radial-gradient(

16
src/components/boxes/KilnRuntime.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<!-- 窑炉运行时间 --> <!-- 窑炉运行时间 -->
<Container usage="NumberOrDate"> <Container usage="NumberOrDate">
<SubContainer title="窑炉运行时间" icon="clock" padding="17px"> <SubContainer title="窑炉运行时间" icon="clock" padding="34px">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="time flex flex-center"> <div class="time flex flex-center">
<DigitalBox <DigitalBox
@@ -39,7 +39,7 @@ export default {
.time { .time {
// background: #eee; // background: #eee;
margin: 12px 0; margin: adjust(12px) 0;
} }
.flex-center { .flex-center {
@@ -48,14 +48,14 @@ export default {
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: 8px; margin-right: adjust(8px);
} }
.text { .text {
padding: 12px 0; padding: adjust(12px) 0;
text-align: center; text-align: center;
font-size: 23px; font-size: adjust(23px);
letter-spacing: 4px; letter-spacing: adjust(4px);
position: relative; position: relative;
z-index: 10; z-index: 10;
user-select: none; user-select: none;
@@ -67,8 +67,8 @@ export default {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 12%; left: 12%;
bottom: 10px; bottom: adjust(10px);
height: 4px; height: adjust(4px);
width: 76%; width: 76%;
/* 渐变色 */ /* 渐变色 */
background: radial-gradient( background: radial-gradient(

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

@@ -1,7 +1,7 @@
<template> <template>
<!-- 油流量 --> <!-- 油流量 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="油流量" icon="oil" padding="17px"> <SubContainer title="油流量" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" /> <LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div> <div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
} }
.vertical-line { .vertical-line {
margin: 0 3px; margin: 0 adjust(3px);
width: 3px; width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,

38
src/components/boxes/OutWater.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<!-- 窑炉出口水温 --> <!-- 窑炉出口水温 -->
<Container usage="NumberAndChart"> <Container usage="NumberAndChart">
<SubContainer title="窑炉出口水温" icon="inWater" padding="17px"> <SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
<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">
@@ -52,10 +52,10 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
position: absolute; position: absolute;
top: 24px; top: adjust(24px);
right: 0; right: 0;
width: w(386px); width: adjust(w(386px));
height: h(364px); height: adjust(h(364px));
} }
.content { .content {
@@ -63,9 +63,9 @@ export default {
} }
.wave { .wave {
transform: translateX(-16px); transform: translateX(adjust(-16px));
width: w(793px); width: adjust(w(793px));
height: h(72px); height: adjust(h(72px));
background: url(../../assets/inwater.png) no-repeat; background: url(../../assets/inwater.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@@ -81,29 +81,29 @@ export default {
.time { .time {
// background: #eee; // background: #eee;
margin: 12px 0; margin: adjust(12px) 0;
padding-left: 14px; padding-left: adjust(14px);
} }
.time--item:not(:last-child) { .time--item:not(:last-child) {
margin-right: 5px; margin-right: adjust(5px);
} }
.unit { .unit {
font-family: Ubuntu, monospace, sans-serif !important; font-family: Ubuntu, monospace, sans-serif !important;
font-size: 20px; font-size: adjust(20px);
letter-spacing: 1px; letter-spacing: adjust(1px);
align-self: flex-end; align-self: flex-end;
} }
.text { .text {
display: inline-block; display: inline-block;
margin-left: 24px; margin-left: adjust(24px);
margin-bottom: 10px; margin-bottom: adjust(10px);
padding: 12px 0; padding: adjust(12px) 0;
text-align: center; text-align: center;
font-size: 22px; font-size: adjust(22px);
letter-spacing: 1px; letter-spacing: adjust(1px);
position: relative; position: relative;
z-index: 10; z-index: 10;
user-select: none; user-select: none;
@@ -115,8 +115,8 @@ export default {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 0; left: 0;
bottom: 10px; bottom: adjust(10px);
height: 4px; height: adjust(4px);
width: 100%; width: 100%;
/* 渐变色 */ /* 渐变色 */
background: radial-gradient( background: radial-gradient(

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

@@ -1,7 +1,7 @@
<template> <template>
<!-- 窑顶温度 --> <!-- 窑顶温度 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="窑顶温度" icon="oil" padding="17px"> <SubContainer title="窑顶温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" /> <LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div> <div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
} }
.vertical-line { .vertical-line {
margin: 0 3px; margin: 0 adjust(3px);
width: 3px; width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,

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

@@ -1,7 +1,7 @@
<template> <template>
<!-- 锡槽温度 --> <!-- 锡槽温度 -->
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="锡槽温度" icon="oil" padding="17px"> <SubContainer title="锡槽温度" icon="oil" padding="34px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" /> <LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div> <div class="vertical-line"></div>
@@ -37,8 +37,8 @@ export default {
} }
.vertical-line { .vertical-line {
margin: 0 3px; margin: 0 adjust(3px);
width: 3px; width: adjust(3px);
background: radial-gradient( background: radial-gradient(
ellipse at center, ellipse at center,
#6fe2ff, #6fe2ff,

16
src/components/boxes/subcomponents/TableStatus.vue
View File

@@ -27,21 +27,21 @@ export default {
.table-status { .table-status {
/* font-family: Ubuntu, sans-serif !important; */ /* font-family: Ubuntu, sans-serif !important; */
color: #3984ff; color: #3984ff;
padding-left: 10px; padding-left: adjust(10px);
position: relative; position: relative;
} }
.table-status::after { .table-status::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 1px; left: adjust(1px);
top: 2px; top: adjust(2px);
display: inline-block; display: inline-block;
width: 4px; width: adjust(4px);
height: 4px; height: adjust(4px);
border-radius: 100px; border-radius: adjust(100px);
background: #3984ff; background: #3984ff;
box-shadow: 0px 0px 2px 2px rgba(39, 96, 255, 0.5); box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(39, 96, 255, 0.5);
} }
.invalid { .invalid {
@@ -50,6 +50,6 @@ export default {
.invalid::after { .invalid::after {
background: #ff0c0c; background: #ff0c0c;
box-shadow: 0px 0px 2px 2px rgba(255, 39, 39, 0.5); box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(255, 39, 39, 0.5);
} }
</style> </style>

27
src/components/charts/BarChart.vue
View File

@@ -27,6 +27,10 @@ echarts.use([
CanvasRenderer, CanvasRenderer,
]); ]);
function adjust(v) {
return v * 2
}
export default { export default {
name: "BarChart", name: "BarChart",
props: { props: {
@@ -50,10 +54,10 @@ 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: 28, top: adjust(28),
left: 28, left: adjust(28),
bottom: 18, bottom: adjust(18),
right: 12, right: adjust(12),
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@@ -62,7 +66,6 @@ export default {
.map((_, index) => index + 1), .map((_, index) => index + 1),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// width: 1,
color: "#5982b2a0", color: "#5982b2a0",
}, },
}, },
@@ -71,8 +74,8 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#ffffff", color: "#ffffff",
fontSize: 7, fontSize: adjust(7),
lineHeight: 1, lineHeight: adjust(1),
}, },
}, },
yAxis: { yAxis: {
@@ -80,7 +83,7 @@ export default {
name: "单位/℃", name: "单位/℃",
nameTextStyle: { nameTextStyle: {
color: "#fff9", color: "#fff9",
fontSize: 8, fontSize: adjust(8),
align: "right", align: "right",
}, },
axisLine: { axisLine: {
@@ -95,8 +98,8 @@ export default {
axisLabel: { axisLabel: {
formatter: "{value} ℃", formatter: "{value} ℃",
color: "#fff9", color: "#fff9",
fontSize: 7, fontSize: adjust(7),
lineHeight: 1, lineHeight: adjust(1),
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@@ -117,10 +120,10 @@ export default {
return v; return v;
}), }),
type: "bar", type: "bar",
barWidth: 4, barWidth: adjust(4),
label: { label: {
show: true, show: true,
fontSize: 6, fontSize: adjust(6),
color: "#eee8", color: "#eee8",
position: "top", position: "top",
}, },

75
src/components/charts/LineChart.vue
View File

@@ -3,7 +3,7 @@
<div class="line-chart__wrapper"> <div class="line-chart__wrapper">
<div class="line-chart__custom-legend flex"> <div class="line-chart__custom-legend flex">
<span>产线1 - 产线5</span> <span>产线1 - 产线5</span>
<ul style="margin-left: 8px; padding-left: 8px" class="flex"> <ul style="" class="flex">
<li>产线1</li> <li>产线1</li>
<li>产线2</li> <li>产线2</li>
<li>产线3</li> <li>产线3</li>
@@ -39,12 +39,16 @@ echarts.use([
CanvasRenderer, CanvasRenderer,
]); ]);
function adjust(v) {
return v * 2;
}
export default { export default {
name: "LineChart", name: "LineChart",
props: { props: {
id: { id: {
type: String, type: String,
default: 'line-chart' default: "line-chart",
}, },
config: { config: {
type: Object, type: Object,
@@ -78,16 +82,16 @@ export default {
methods: { methods: {
init() { init() {
if (!this.chart) if (!this.chart)
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption({ this.chart.setOption({
// title: { // title: {
// text: "ECharts 入门示例", // text: "ECharts 入门示例",
// }, // },
grid: { grid: {
top: 32, top: adjust(32),
left: 32, left: adjust(32),
bottom: 24, bottom: adjust(24),
right: 12, right: adjust(12),
}, },
// tooltip: { // tooltip: {
// trigger: "axis", // trigger: "axis",
@@ -112,8 +116,8 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#ffffff", color: "#ffffff",
fontSize: 6, fontSize: adjust(6),
lineHeight: 1, lineHeight: adjust(1),
}, },
}, },
yAxis: { yAxis: {
@@ -121,7 +125,7 @@ export default {
name: "单位/m³", name: "单位/m³",
nameTextStyle: { nameTextStyle: {
color: "#fff9", color: "#fff9",
fontSize: 6, fontSize: adjust(6),
// lineHeight: 6, // lineHeight: 6,
// height: 6, // height: 6,
// padding: 0, // padding: 0,
@@ -139,8 +143,8 @@ export default {
}, },
axisLabel: { axisLabel: {
color: "#fff9", color: "#fff9",
fontSize: 6, fontSize: adjust(6),
lineHeight: 1, lineHeight: adjust(1),
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
@@ -156,9 +160,9 @@ export default {
name: Math.random(), name: Math.random(),
type: "line", type: "line",
symbol: "circle", symbol: "circle",
symbolSize: 3, symbolSize: adjust(3),
lineStyle: { lineStyle: {
width: "1", width: adjust(1),
}, },
areaStyle: { areaStyle: {
// color: { // color: {
@@ -203,17 +207,17 @@ export default {
::-webkit-scrollbar { ::-webkit-scrollbar {
// display: none; // display: none;
height: 2px; height: adjust(2px);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
height: 2px; height: adjust(2px);
border-radius: 2px; border-radius: adjust(2px);
background: #ccc3; background: #ccc3;
} }
// ::-webkit-scrollbar-track { // ::-webkit-scrollbar-track {
// height: 1px; // height: adjust(1px);
// background: blue; // background: blue;
// } // }
@@ -222,7 +226,12 @@ li {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
min-width: 20px; min-width: adjust(20px);
}
ul {
margin-left: adjust(8px);
padding-left: adjust(8px);
} }
li { li {
@@ -232,11 +241,11 @@ li {
li::before { li::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 2px; top: adjust(2px);
left: -6px; left: adjust(-6px);
width: 4px; width: adjust(4px);
height: 4px; height: adjust(4px);
border-radius: 1px; border-radius: adjust(1px);
background: #eee6; background: #eee6;
} }
@@ -273,31 +282,31 @@ li:nth-child(10)::before {
ul { ul {
flex: 1; flex: 1;
width: 144px; width: adjust(154px);
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
padding-bottom: 2px; padding-bottom: adjust(2px);
} }
li:not(:last-child) { li:not(:last-child) {
margin-right: 8px; margin-right: adjust(8px);
} }
.line-chart__wrapper { .line-chart__wrapper {
position: relative; position: relative;
background: #7771; background: #7771;
border-radius: 3px; border-radius: adjust(3px);
backdrop-filter: blur(2px); backdrop-filter: blur(adjust(2px));
box-shadow: inset 0 0 10px 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%;
width: 1px; width: adjust(1px);
} }
.line-chart__custom-legend { .line-chart__custom-legend {
position: absolute; position: absolute;
top: -13px; top: adjust(-13px);
right: 0; right: 0;
font-size: 7px; font-size: adjust(7px);
font-family: Ubuntu, sans-serif; font-family: Ubuntu, sans-serif;
// background: #fff2; // background: #fff2;
padding: 0; padding: 0;

22
src/components/common/DigitalBox.vue
View File

@@ -35,34 +35,34 @@ export default {
.digit-box { .digit-box {
// height: h(80px); // height: h(80px);
// width: w(64px); // width: w(64px);
height: h(80px); height: adjust(h(80px));
width: w(56px); width: adjust(w(56px));
color: white; color: white;
background: url(../../assets/digit.png) no-repeat; background: url(../../assets/digit.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 2px; padding: adjust(2px);
text-align: center; text-align: center;
user-select: none; user-select: none;
} }
.digit { .digit {
font-family: "站酷庆科黄油体", sans-serif; font-family: "站酷庆科黄油体", sans-serif;
font-size: 32px; font-size: adjust(32px);
line-height: 39px; line-height: adjust(39px);
} }
.zhHans { .zhHans {
font-size: 18px; font-size: adjust(18px);
line-height: 48px; line-height: adjust(48px);
} }
.another-hw { .another-hw {
height: h(72px); height: adjust(h(72px));
width: w(62px); width: adjust(w(62px));
} }
.another-hw.digit { .another-hw.digit {
font-size: 32px; font-size: adjust(32px);
line-height: 32px; line-height: adjust(32px);
} }
</style> </style>

29
src/components/common/SmallBox2.vue
View File

@@ -56,38 +56,39 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
.small-box-2 { .small-box-2 {
padding: 14px; padding: adjust(14px);
// border: 1px solid gray; // border: 1px solid gray;
box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285); // box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
border-radius: 6px; box-shadow: inset 0 0 30px rgba($color: #fff, $alpha: 0.285);
border-radius: adjust(6px);
user-select: none; user-select: none;
// width: w(465px); // width: adjust(w(465px));
// height: h(200px); // height: adjust(h(200px));
width: w(528px); width: adjust(w(528px));
height: h(240px); height: adjust(h(240px));
display: flex; display: flex;
.icon { .icon {
width: h(128px); width: adjust(h(128px));
height: h(128px); height: adjust(h(128px));
} }
.info { .info {
font-family: "微软雅黑", Helvicate, sans-serif; font-family: "微软雅黑", Helvicate, sans-serif;
h2 { h2 {
font-size: 16px; font-size: adjust(16px);
opacity: 0.7; opacity: 0.7;
// line-height: 12px; // line-height: adjust(12px);
letter-spacing: 1px; letter-spacing: adjust(1px);
font-weight: 400; font-weight: 400;
color: hsla(0, 0%, 100%, 0.9); color: hsla(0, 0%, 100%, 0.9);
} }
.value { .value {
color: #fff; color: #fff;
font-size: 30px; font-size: adjust(30px);
line-height: 29px; line-height: adjust(29px);
} }
} }
} }

4
src/components/icons/clockSvg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="64px" width="adjust(64px)"
height="64px" height="adjust(64px)"
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"

4
src/components/icons/fireSvg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="64px" width="adjust(64px)"
height="64px" height="adjust(64px)"
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"

4
src/components/icons/sandSvg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="64px" width="adjust(64px)"
height="64px" height="adjust(64px)"
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"

4
src/components/icons/switchSvg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="64px" width="adjust(64px)"
height="64px" height="adjust(64px)"
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"

4
src/components/icons/tempSvg.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<svg <svg
width="64px" width="adjust(64px)"
height="64px" height="adjust(64px)"
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"

4
src/components/isolate-area-1/Area.vue
View File

@@ -31,12 +31,14 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../assets/styles/functions";
.isolate-area-1 { .isolate-area-1 {
display: flex; display: flex;
> .small-box-2:not(:last-child) { > .small-box-2:not(:last-child) {
margin: { margin: {
right: 15px; right: adjust(15px);
} }
} }
} }

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

@@ -45,8 +45,8 @@ export default {
.number-or-date { .number-or-date {
display: inline-block; display: inline-block;
width: w(800px); width: adjust(w(800px));
height: h(375px); height: adjust(h(375px));
background: url(../../assets/box-number.png); background: url(../../assets/box-number.png);
background-position: 0 0; /** top left */ background-position: 0 0; /** top left */
background-size: 100% 100%; background-size: 100% 100%;
@@ -54,8 +54,8 @@ export default {
.tables { .tables {
display: inline-block; display: inline-block;
width: w(800px); width: adjust(w(800px));
height: h(528px); height: adjust(h(528px));
background: url(../../assets/box-table.png); background: url(../../assets/box-table.png);
background-position: 0 0; /** top left */ background-position: 0 0; /** top left */
background-size: 100% 100%; background-size: 100% 100%;
@@ -63,8 +63,8 @@ export default {
.charts { .charts {
display: inline-block; display: inline-block;
width: w(1580px); width: adjust(w(1580px));
height: h(520px); height: adjust(h(520px));
background: url(../../assets/box-chart.png); background: url(../../assets/box-chart.png);
background-position: 0 0; /** top left */ background-position: 0 0; /** top left */
background-size: 100% 100%; background-size: 100% 100%;
@@ -72,8 +72,8 @@ export default {
.number-and-chart { .number-and-chart {
display: inline-block; display: inline-block;
width: w(800px); width: adjust(w(800px));
height: h(931px); height: adjust(h(931px));
background: url(../../assets/box-right.png); background: url(../../assets/box-right.png);
background-position: 0 0; /** top left */ background-position: 0 0; /** top left */
background-size: 100% 100%; background-size: 100% 100%;

30
src/components/layout/Header.vue
View File

@@ -24,29 +24,29 @@ export default {
header { header {
background: url(../../assets/header.png) center/contain no-repeat; background: url(../../assets/header.png) center/contain no-repeat;
background-size: 105%; background-size: 105%;
height: h(280px); height: adjust(h(280px));
width: $actual_width; width: adjust($actual_width);
display: grid; display: grid;
place-items: center; place-items: center;
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: adjust(20px);
.header--logo { .header--logo {
width: 56px; width: adjust(56px);
height: 56px; height: adjust(56px);
background: url(../../assets/logo.png) center/contain no-repeat; background: url(../../assets/logo.png) center/contain no-repeat;
} }
h1 { h1 {
margin-left: 20px; margin-left: adjust(20px);
font-size: 35px; font-size: adjust(35px);
// line-height: 100px; // line-height: adjust(100px);
// background: #eee; // background: #eee;
user-select: none; user-select: none;
letter-spacing: 8px; letter-spacing: adjust(8px);
font-weight: 600; font-weight: 600;
// color: #6bf2ff; // color: #6bf2ff;
color: $main-color; color: $main-color;
@@ -57,19 +57,19 @@ header {
.header--wing { .header--wing {
left: 0; left: 0;
bottom: 10px; bottom: adjust(10px);
height: h(78px); height: adjust(h(78px));
} }
.company { .company {
margin-left: w(1420px); margin-left: adjust(w(1420px));
width: w(1460px); width: adjust(w(1460px));
background: url("../../assets/company.png") center/cover no-repeat; background: url("../../assets/company.png") center/cover no-repeat;
} }
.datetime { .datetime {
margin-left: w(6050px); margin-left: adjust(w(6050px));
width: w(1407px); width: adjust(w(1407px));
background: url("../../assets/date.png") center/cover no-repeat; background: url("../../assets/date.png") center/cover no-repeat;
} }
</style> </style>

111
src/components/layout/Main.vue
View File

@@ -1,27 +1,11 @@
<template> <template>
<main class=""> <main class="">
<div class="eq-main absolute"> <div class="eq-main absolute">
<!-- style=" <div class="video-bottom" style="">
position: absolute;
top: 224px;
left: 59px;
transform: scale(1, 1.05);
width: 360px;
height: 100px;
" -->
<div
class="video-bottom"
style="
position: absolute;
bottom: 151px;
left: 64px;
transform: scale(1.02, 1.05);
"
>
<video <video
id="1" id="1"
preload="auto" preload="auto"
height="100" height="200"
muted muted
autoplay autoplay
loop loop
@@ -30,20 +14,12 @@
></video> ></video>
</div> </div>
<div <div class="video-top" style="">
class="video-bottom"
style="
position: absolute;
top: 131px;
left: 72px;
transform: scale(1.02, 1.05);
"
>
<video <video
id="2" id="2"
class="video-top" class="video-top"
preload="auto" preload="auto"
height="100" height="200"
muted muted
autoplay autoplay
loop loop
@@ -51,10 +27,9 @@
src="../../assets/videos/fire-to-bottom.mp4" src="../../assets/videos/fire-to-bottom.mp4"
></video> ></video>
</div> </div>
<!-- style="position: absolute; top: 0; left: 0; transform: scale(1, 1.05) width: 360px; height: 100px;" -->
</div> </div>
<AreaOne style="position: absolute; top: 160px; left: 1588px" /> <AreaOne class="area-one" />
<div class="absolute left kiln-runtime"> <div class="absolute left kiln-runtime">
<KilnRuntime /> <KilnRuntime />
@@ -139,73 +114,93 @@ main {
// background: #eee2; // background: #eee2;
} }
.area-one {
position: absolute;
top: adjust(160px);
left: adjust(1588px);
}
.video-bottom {
position: absolute;
bottom: adjust(153.5px);
left: adjust(63.5px);
transform: scale(1.02, 1.02);
}
.video-top {
position: absolute;
top: adjust(64px);
left: adjust(35px);
transform: scale(1.02, 1.02);
}
.eq-main { .eq-main {
width: w(7150px); width: adjust(w(7150px));
height: h(960px); height: adjust(h(960px));
background: url(../../assets/eq.png) no-repeat; background: url(../../assets/eq.png) no-repeat;
background-size: 100%; background-size: 100%;
top: 170px; top: adjust(170px);
left: 380px; left: adjust(380px);
position: relative; position: relative;
} }
.eq-main::after { .eq-main::after {
content: ""; content: "";
position: absolute; position: absolute;
right: 1000px; right: adjust(1000px);
top: 164px; top: adjust(164px);
width: 150px; width: adjust(150px);
height: 150px; 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%;
} }
.kiln-runtime { .kiln-runtime {
top: h(200px); top: adjust(h(200px));
left: w(60px); left: adjust(w(60px));
} }
.kiln-pressure { .kiln-pressure {
top: h(610px); top: adjust(h(610px));
left: w(60px); left: adjust(w(60px));
} }
.fan-runtime { .fan-runtime {
top: h(1020px); top: adjust(h(1020px));
left: w(60px); left: adjust(w(60px));
} }
.oil-flow { .oil-flow {
top: h(1588px); top: adjust(h(1588px));
left: w(60px); left: adjust(w(60px));
} }
.gas-flow { .gas-flow {
top: h(1588px); top: adjust(h(1588px));
left: w(1660px); left: adjust(w(1660px));
} }
.top-temp { .top-temp {
top: h(1588px); top: adjust(h(1588px));
left: w(3260px); left: adjust(w(3260px));
} }
.bottom-temp { .bottom-temp {
top: h(1588px); top: adjust(h(1588px));
left: w(4860px); left: adjust(w(4860px));
} }
.ou-temp { .ou-temp {
top: h(1588px); top: adjust(h(1588px));
left: w(6460px); left: adjust(w(6460px));
} }
.in-water { .in-water {
top: h(200px); top: adjust(h(200px));
left: w(8096px); left: adjust(w(8096px));
// left: w(5096px); // left: w(5096px);
z-index: 100; z-index: 100;
} }
.out-water { .out-water {
top: h(1177px); top: adjust(h(1177px));
left: w(8096px); left: adjust(w(8096px));
// left: w(5096px); // left: w(5096px);
z-index: 100; z-index: 100;
} }

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

@@ -31,17 +31,19 @@ export default {
data() { data() {
return { return {
iconClass: { iconClass: {
clock: 'icon-clock', clock: "icon-clock",
docs: 'icon-docs', docs: "icon-docs",
oil: 'icon-oil', oil: "icon-oil",
inWater: 'icon-water-in' inWater: "icon-water-in",
} },
}; };
} },
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
@import "../../assets/styles/functions";
.sub-container { .sub-container {
height: 100%; height: 100%;
display: flex; display: flex;
@@ -49,9 +51,9 @@ export default {
} }
.icon { .icon {
height: 16px; height: adjust(16px);
width: 16px; width: adjust(16px);
margin-right: 8px; margin-right: adjust(8px);
} }
.icon-clock { .icon-clock {
@@ -76,8 +78,8 @@ export default {
.title { .title {
/* margin: 12px 0; */ /* margin: 12px 0; */
margin-bottom: 12px; margin-bottom: adjust(12px);
font-size: 16px; font-size: adjust(16px);
color: #72f2ff; color: #72f2ff;
font-family: sans-serif; font-family: sans-serif;
user-select: none; user-select: none;

4
src/views/HomeView.vue
View File

@@ -28,8 +28,8 @@ export default {
.home-view { .home-view {
// width: 100vw; // width: 100vw;
// height: 100vh; // height: 100vh;
height: $actual_height; height: adjust($actual_height);
width: $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 ;
color: white; color: white;