This commit is contained in:
lb 2023-05-10 16:02:34 +08:00
parent ba7118349b
commit cdc8425cda
17 changed files with 294 additions and 1 deletions

BIN
src/assets/bottom-temp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 815 B

BIN
src/assets/gas.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/in-water.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/inwater.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/ou-temp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 458 B

BIN
src/assets/out-water.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/outwater.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/temp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 B

BIN
src/assets/water-temp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/wind.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 858 B

View File

@ -0,0 +1,50 @@
<template>
<!-- 窑底温度 -->
<Container usage="Charts">
<SubContainer title="窑底温度" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-8" class="flex-1" :config="chartConfig" />
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
export default {
name: "BottomTemp",
props: {},
components: { Container, SubContainer, LineChart },
data() {
return {
chartConfig: {},
};
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 3px;
width: 3px;
background: radial-gradient(
ellipse at center,
#6fe2ff,
#52cbef80,
transparent,
transparent
);
}
</style>

View File

@ -0,0 +1,50 @@
<template>
<!-- 天然气流量 -->
<Container usage="Charts">
<SubContainer title="天然气流量" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-4" class="flex-1" :config="chartConfig" />
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
export default {
name: "GasFlow",
props: {},
components: { Container, SubContainer, LineChart },
data() {
return {
chartConfig: {},
};
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 3px;
width: 3px;
background: radial-gradient(
ellipse at center,
#6fe2ff,
#52cbef80,
transparent,
transparent
);
}
</style>

View File

@ -0,0 +1,50 @@
<template>
<!-- 窑炉进口水温 -->
<Container usage="Charts">
<SubContainer title="窑炉进口水温" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
export default {
name: "XicaoTemp",
props: {},
components: { Container, SubContainer, LineChart },
data() {
return {
chartConfig: {},
};
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 3px;
width: 3px;
background: radial-gradient(
ellipse at center,
#6fe2ff,
#52cbef80,
transparent,
transparent
);
}
</style>

View File

@ -0,0 +1,50 @@
<template>
<!-- 窑顶温度 -->
<Container usage="Charts">
<SubContainer title="窑顶温度" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-6" class="flex-1" :config="chartConfig" />
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
export default {
name: "TopTemp",
props: {},
components: { Container, SubContainer, LineChart },
data() {
return {
chartConfig: {},
};
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 3px;
width: 3px;
background: radial-gradient(
ellipse at center,
#6fe2ff,
#52cbef80,
transparent,
transparent
);
}
</style>

View File

@ -0,0 +1,50 @@
<template>
<!-- 锡槽温度 -->
<Container usage="Charts">
<SubContainer title="锡槽温度" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%">
<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div>
<LineChart key="2" id="line-chart-10" class="flex-1" :config="chartConfig" />
</div>
</SubContainer>
</Container>
</template>
<script>
import LineChart from "../charts/LineChart.vue";
import Container from "../layout/Container.vue";
import SubContainer from "../layout/SubContainer.vue";
export default {
name: "XicaoTemp",
props: {},
components: { Container, SubContainer, LineChart },
data() {
return {
chartConfig: {},
};
},
};
</script>
<style scoped lang="scss">
@import "../../assets/styles/functions";
.flex-1 {
flex: 1;
// background: #eee;
}
.vertical-line {
margin: 0 3px;
width: 3px;
background: radial-gradient(
ellipse at center,
#6fe2ff,
#52cbef80,
transparent,
transparent
);
}
</style>

View File

@ -14,6 +14,18 @@
<div class="absolute left oil-flow">
<OilFlow />
</div>
<div class="absolute left gas-flow">
<GasFlow />
</div>
<div class="absolute left top-temp">
<TopTemp />
</div>
<div class="absolute left bottom-temp">
<BottomTemp />
</div>
<div class="absolute left ou-temp">
<XicaoTemp />
</div>
<div class="right absolute"></div>
</main>
</template>
@ -22,13 +34,27 @@
import KilnRuntime from "../boxes/KilnRuntime.vue";
import KilnPressure from "../boxes/KilnPressure.vue";
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 XicaoTemp from "../boxes/XicaoTemp.vue";
import FanRuntime from "../boxes/FanRuntime.vue";
import AreaOne from "../isolate-area-1/Area.vue";
// import Container from './Container.vue'
export default {
name: "Main",
components: { AreaOne, KilnRuntime, KilnPressure, FanRuntime, OilFlow },
components: {
AreaOne,
KilnRuntime,
KilnPressure,
FanRuntime,
OilFlow,
GasFlow,
TopTemp,
BottomTemp,
XicaoTemp,
},
props: {},
data() {
return {};
@ -64,4 +90,21 @@ main {
top: h(1588px);
left: w(60px);
}
.gas-flow {
top: h(1588px);
left: w(1660px);
}
.top-temp {
top: h(1588px);
left: w(3260px);
}
.bottom-temp {
top: h(1588px);
left: w(4860px);
}
.ou-temp {
top: h(1588px);
left: w(6460px);
}
</style>