This commit is contained in:
hzz 2024-01-09 17:06:41 +08:00
parent f340f814f5
commit 1cb094d9e4
33 changed files with 213 additions and 105 deletions

View File

@ -0,0 +1,19 @@
@font-face {
font-family: "iconfont"; /* Project id 4404806 */
src: url('iconfont.woff2?t=1704785829971') format('woff2'),
url('iconfont.woff?t=1704785829971') format('woff'),
url('iconfont.ttf?t=1704785829971') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tvoc:before {
content: "\e753";
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -11,62 +11,68 @@
<div class="floating1" id="floating">
<div class="roate">
<div class="roate-item" id="roate-item">
<span class="data">{{ allData.data1 }}%</span>
<span class="data">{{ props.allData.data1 }}%</span>
</div>
</div>
<p class="title">{{ allData.title1 }}</p>
<p class="title">{{ props.allData.title1 }}</p>
</div>
<div class="floating2" id="floating">
<div class="roate">
<div class="roate-item2" id="roate-item">
<span class="data" :style="getData2Style(allData.data2)"
>{{
allData.data2 === "N1"
? "工作"
: allData.data2 === "N2"
? "待机"
: allData.data2 === "N3"
<span class="data" :style="getData2Style(props.allData.data2)">{{
props.allData.data2 === "N1"
? "工作"
: props.allData.data2 === "N2"
? "待机"
: props.allData.data2 === "N3"
? "停机"
: "未知状态"
}}
}}
</span>
</div>
</div>
<p class="title">{{ allData.title2 }}</p>
<p class="title">{{ props.allData.title2 }}</p>
</div>
<div class="floating3" id="floating">
<div class="roate">
<div class="roate-item3" id="roate-item">
<span class="data">{{ allData.data3 }}</span>
<span class="data">{{ props.allData.data3 }}</span>
</div>
</div>
<p class="title">{{ allData.title3 }}</p>
<p class="title">{{ props.allData.title3 }}</p>
</div>
<div class="floating4" id="floating">
<div class="roate">
<div class="roate-item4" id="roate-item">
<span class="data" style="margin: 20px 15px 0 0">{{ allData.data4 }}</span>
<span class="data" style="margin: 20px 15px 0 0">{{ props.allData.data4 }}</span>
</div>
</div>
<p class="title">{{ allData.title4 }}</p>
<p class="title">{{ props.allData.title4 }}</p>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, reactive, onMounted, computed } from "vue";
let allData = reactive({
data1: "95",
data2: "N3",
data3: "100",
data4: "下降",
title1: "稼动率",
title2: "设备状态",
title3: "钻头转速",
title4: "钻头状态",
});
const props = defineProps({
allData: {
type: Object,
default: () => {
return {
data1: "95",
data2: "N1",
data3: "100",
data4: "下降",
title1: "稼动率",
title2: "设备状态",
title3: "钻头转速",
title4: "钻头状态",
};
},
},
}); // props
const getData2Style = (data2Value: string) => {
switch (data2Value) {
case "N1":
@ -95,11 +101,13 @@ const getData2Style = (data2Value: string) => {
animation: float 5s linear infinite;
position: relative;
}
.roate-item {
bottom: 70%;
background: url(./../img/j1.png) no-repeat center;
animation: roate 6s linear infinite;
}
.floating2 {
top: -30%;
left: 25%;
@ -107,11 +115,13 @@ const getData2Style = (data2Value: string) => {
animation: float2 6s linear infinite;
position: relative;
}
.roate-item2 {
bottom: 80%;
background: url(./../img/j2.png) no-repeat center;
animation: roate 7s linear infinite;
}
.floating3 {
bottom: 90%;
left: 60%;
@ -119,11 +129,13 @@ const getData2Style = (data2Value: string) => {
animation: float2 6s linear infinite;
position: relative;
}
.roate-item3 {
bottom: 70%;
background: url(./../img/j3.png) no-repeat center;
animation: roate 7s linear infinite;
}
.floating4 {
bottom: 150%;
left: 80%;
@ -131,6 +143,7 @@ const getData2Style = (data2Value: string) => {
animation: float3 5s linear infinite;
position: relative;
}
.roate-item4 {
bottom: 90%;
background: url(./../img/j4.png) no-repeat center;
@ -145,6 +158,7 @@ const getData2Style = (data2Value: string) => {
position: relative;
background: url(./../img/j.png) no-repeat center;
}
#roate-item {
width: 100%;
right: 5px;
@ -155,11 +169,13 @@ const getData2Style = (data2Value: string) => {
justify-content: center;
align-items: center;
}
.data {
margin: 20px 0 0 10px;
font-size: 28px;
font-weight: 700;
}
.title {
bottom: 18%;
text-align: center;
@ -167,39 +183,49 @@ const getData2Style = (data2Value: string) => {
font-weight: 700;
position: relative;
}
.float {
width: 100%;
height: 40%;
}
@keyframes float {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(40%);
}
100% {
transform: translateY(0%);
}
}
@keyframes float2 {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(0%);
}
}
@keyframes roate {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(65%);
}
100% {
transform: translateY(0%);
}
@ -209,20 +235,25 @@ const getData2Style = (data2Value: string) => {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(50%);
}
100% {
transform: translateY(0%);
}
}
@keyframes roate2 {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(70%);
}
100% {
transform: translateY(0%);
}

View File

@ -10,7 +10,7 @@
<div class="sum">
<div class="deviceimg">
<!-- <img class="img" :src="allData.image" /> -->
<img class="img" src="./../img/device.png " />
<img class="img" :src="allData.image" />
</div>
<div class="cicle1"></div>
<div class="data1" id="data">
@ -21,7 +21,8 @@
</div>
<div class="data2" id="data">
<div class="qiu2" id="qiu">
<p>{{ allData.data2 }}<p style="padding-left:20%">{{ allData.data2s }}</p></p>
<p>{{ allData.data2 }}</p>
<p>{{ allData.data2s }}</p>
</div>
<span>{{ allData.title2 }}</span>
</div>
@ -52,19 +53,41 @@
<script setup lang="ts">
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import { imgurlAddXhr } from "@/utils/devSever";
let allData = reactive({
data1: "高速",
data2: "50cm",
data2s: "2cm/s",
data3: "正转",
data4: "50cm",
data5: "50cm",
title1: "设备状态",
title2: "平台X轴距原点位置和速度",
title3: "设备状态",
title4: "平台y轴距原点位置",
title5: "平台z轴距原点位置",
image: "",
// let allData = reactive({
// data1: "",
// data2: "50cm",
// data2s: "2cm/s",
// data3: "",
// data4: "50cm",
// data5: "50cm",
// title1: "",
// title2: "X",
// title3: "",
// title4: "y",
// title5: "z",
// image: "",
// });
const props = defineProps({
allData: {
type: Object,
default: () => {
return {
data1: "",
data2: "",
data2s: "",
data3: "",
data4: "",
data5: "",
title1: "",
title2: "",
title3: "",
title4: "",
title5: "",
image: "",
};
},
},
});
const { proxy } = getCurrentInstance() as any;
</script>
@ -128,6 +151,7 @@ img {
}
.qiu2 {
background: url(./../img/cicle03.png) no-repeat center;
}
.data3 {
@ -174,7 +198,10 @@ p {
background-size: 100%;
top: 20%;
margin: auto;
display: table;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#qiu::before {
content: "";

View File

@ -15,8 +15,8 @@
<div class="date">
<p class="date-time">{{ timeHtml }}</p>
</div>
<Float></Float>
<Sum></Sum>
<Float :allData="topData"></Float>
<Sum :allData="sumData"></Sum>
</div>
</div>
</template>
@ -31,6 +31,31 @@ let { timeHtml } = useNowTime();
let allData = reactive({
header: "炮塔铣床",
});
let topData = reactive({
data1: "95",
data2: "N1",
data3: "100",
data4: "下降",
title1: "稼动率",
title2: "设备状态",
title3: "钻头转速",
title4: "钻头状态",
});
let sumData = reactive({
data1: "高速",
data2: "50cm",
data2s: "2cm/s",
data3: "正转",
data4: "50cm",
data5: "50cm",
title1: "设备状态",
title2: "平台X轴距原点位置和速度",
title3: "设备状态",
title4: "平台y轴距原点位置",
title5: "平台z轴距原点位置",
image: "./../img/device.png",
});
</script>
<style scoped>
.container {
@ -38,6 +63,7 @@ let allData = reactive({
width: 1920px;
position: relative;
}
.bj {
width: 100%;
height: 100%;
@ -47,6 +73,7 @@ let allData = reactive({
background-size: cover;
background-position: center center;
color: #aeeefa;
.text {
position: absolute;
top: 25px;
@ -58,6 +85,7 @@ let allData = reactive({
font-family: "华文新魏", sans-serif;
}
}
.date {
font-size: 28px;
height: 6%;
@ -68,5 +96,4 @@ let allData = reactive({
.date-time {
margin-right: 125px;
}
</style>
}</style>

View File

@ -77,6 +77,7 @@ onUnmounted(() => {
<style scoped>
@import "@/assets/css/iconfont.css";
@import "@/assets/css/iconfont/iconfont.css";
.box {

View File

@ -45,12 +45,12 @@ const store = useSocketStore();
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",
@ -62,7 +62,7 @@ const sensor_config: any = {
'Noise_Reg': { 'icon': 'icon-shengyin', 'unit': 'dB', 'quota': 80, 'name': '噪声监测传感器', 'type': 'noise' },
'Smoke_Reg': { 'icon': 'icon-yanwubaojingqi', 'unit': 'ppm', 'quota': 100, 'name': '烟雾监测传感器', 'type': 'smoke' },
'CH2O': { 'icon': 'icon-app_icons--', 'unit': 'mg/m³', 'quota': 0.08, 'name': '甲醛监测传感器', 'type': 'CH2O' },
'TVOC': { 'icon': 'icon-TVOC-Outlined', 'unit': 'mg/m³', 'quota': 0.5, 'name': 'TVOC监测传感器', 'type': 'TVOC' },
'TVOC': { 'icon': 'icon-tvoc', 'unit': 'mg/m³', 'quota': 0.5, 'name': 'TVOC监测传感器', 'type': 'TVOC' },
'Methane_Reg': { 'icon': 'icon-ranqi', 'unit': '', 'quota': 0, 'name': '燃气监测传感器', 'type': 'Gas' },
}
let width = ref(1500)

View File

@ -52,12 +52,12 @@ let size = reactive({
});
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -271,7 +271,7 @@ function setcontentData(val) {
verticalNum4.value.setData(noise, 'icon-shengyin', 85, "dB")
verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "PPM")
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
verticalNum7.value.setData(TVOC, 'icon-tvoc', 0.5, "mg/m3")
verticalNum8.value.setData(val.Methane, 'icon-ranqi', 0, "")
// console.log(pmref.value);
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp, title: val.temp_humi[temp_humi_index].name })

View File

@ -130,6 +130,7 @@ defineExpose({
<style scoped>
@import "@/assets/css/iconfont.css";
@import "@/assets/css/iconfont/iconfont.css";
.box {

View File

@ -81,12 +81,12 @@ let size = reactive({
});
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -284,7 +284,7 @@ let temp_humi_index = 0
verticalNum4.value.setData(noise,'icon-shengyin',85,"dB")
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
verticalNum6.value.setData(CH2O,'icon-app_icons--',0.08,"mg/m3")
verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
verticalNum7.value.setData(TVOC,'icon-tvoc',0.5,"mg/m3")
// console.log(pmref.value);
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
if (val.temp_humi.length > 1) {

View File

@ -81,12 +81,12 @@ let size = reactive({
});
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -284,7 +284,7 @@ let temp_humi_index = 0
verticalNum4.value.setData(noise,'icon-shengyin',85,"dB")
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
verticalNum6.value.setData(CH2O,'icon-app_icons--',0.08,"mg/m3")
verticalNum7.value.setData(TVOC,'icon-TVOC-Outlined',0.5,"mg/m3")
verticalNum7.value.setData(TVOC,'icon-tvoc',0.5,"mg/m3")
// console.log(pmref.value);
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
if (val.temp_humi.length > 1) {

View File

@ -57,12 +57,12 @@ let {t} = useI18n();
});
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -284,7 +284,7 @@ function setcontentData(val) {
verticalNum4.value.setData(noise, 'icon-shengyin', 85, "dB")
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
verticalNum7.value.setData(TVOC, 'icon-tvoc', 0.5, "mg/m3")
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
if (val.temp_humi.length > 1) {

View File

@ -50,12 +50,12 @@ let {t} = useI18n();
});
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -283,7 +283,7 @@ function setcontentData(val) {
verticalNum4.value.setData(noise, 'icon-shengyin', 85, "dB")
// verticalNum5.value.setData(val.Smoke,'icon-yanwubaojingqi',200,"")
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
verticalNum7.value.setData(TVOC, 'icon-TVOC-Outlined', 0.5, "mg/m3")
verticalNum7.value.setData(TVOC, 'icon-tvoc', 0.5, "mg/m3")
// console.log(pmref.value);
humidityref.value.setData({ h: val.temp_humi[temp_humi_index].huim, c: val.temp_humi[temp_humi_index].temp })
if (val.temp_humi.length > 1) {

View File

@ -71,12 +71,12 @@ import { useI18n } from "vue-i18n";
let { t } = useI18n();
let titleTip = [
{
color: "#E43961",
name: t("messages.abnormal"),
color: "#20AEC5",
name: t("messages.normal_Tip"),
},
{
color: "#20AEC5",
name: t("messages.NoAbnormal"),
color: "#E43961",
name: t("messages.abnormal"),
},
{
color: "#A7A6BD",

View File

@ -81,12 +81,12 @@ let size = reactive({
});
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -41,7 +41,7 @@ onMounted(() => {
</style>
<style scoped>
@import '@/assets/css/iconfont.css';
@import "@/assets/css/iconfont/iconfont.css";
.box {
height: 100%;
width: 100%;

View File

@ -23,7 +23,7 @@
<border2 ref="ReffinishAir">
<template v-slot>
<div class="content-LR" ref="finishAir">
<verticalNum :title="`${t('messages.JingShiRoom')}TVOCmg/m3`" :data="0.1" :unit="'mg/m3'" :quota="1" :iconname="'icon-TVOC-Outlined'"></verticalNum>
<verticalNum :title="`${t('messages.JingShiRoom')}TVOCmg/m3`" :data="0.1" :unit="'mg/m3'" :quota="1" :iconname="'icon-tvoc'"></verticalNum>
</div>
</template>
</border2>

View File

@ -40,7 +40,7 @@ const initEchart = () => {
let series = [];
props.httpValue.listData.forEach((res) => {
if (res.years == 2023) {
if (res.years == 2024) {
for (let key in res.month) {
series.push({
name: key + "月",

View File

@ -113,7 +113,7 @@ const boxSize = reactive({
<style scoped>
@import "@/assets/css/iconfont.css";
@import "@/assets/css/iconfont/iconfont.css";
.box {
height: 50%;
width: 100%;

View File

@ -83,12 +83,12 @@ let deptIds = '6,7,9,10,11'
document.title = t('messages.环境 实时监测系统')
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",
@ -96,7 +96,7 @@ let titleTip = [
},
];
const verticalType = {
'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'TVOC': { icon: 'icon-tvoc', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: "ppm" },
'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
@ -263,7 +263,7 @@ async function getPower_data() {
if (result.code == 200) {
let series = [];
result.data.listData.forEach((res) => {
if (res.years == 2023) {
if (res.years == 2024) {
for (let key in res.month) {
series.push({
name: key + "月",

View File

@ -109,6 +109,7 @@ const boxSize = reactive({
<style scoped>
@import "@/assets/css/iconfont.css";
@import "@/assets/css/iconfont/iconfont.css";
.box {
height: 50%;

View File

@ -61,7 +61,7 @@ let perssure2 = ref()
let pipe1 = ref()
const verticalType = {
'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'TVOC': { icon: 'icon-tvoc', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: "ppm" },
'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },

View File

@ -44,12 +44,12 @@ import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",

View File

@ -154,6 +154,7 @@ defineExpose({
<style scoped>
@import "@/assets/css/iconfont.css";
@import "@/assets/css/iconfont/iconfont.css";
.container {
width: 100%;
height: 100%;

View File

@ -103,7 +103,7 @@ watch(
newVal.forEach((item: any, index: number) => {
if (item.value != oldVal[index].value) {
if (item.type == 'TVOC') {
verticalNum7.value.setData(item.value, 'icon-TVOC-Outlined', item.limit, "mg/m3")
verticalNum7.value.setData(item.value, 'icon-tvoc', item.limit, "mg/m3")
}
if (item.type == 'Smoke') {
verticalNum5.value.setData(item.value, 'icon-yanwubaojingqi', item.limit, "")
@ -124,7 +124,7 @@ watch(
{ deep: true, flush: "post" }
)
const verticalType = {
'TVOC': { icon: 'icon-TVOC-Outlined', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'TVOC': { icon: 'icon-tvoc', title: t('messages.TVOCDetection'), unit: 'mg/m³' },
'Smoke': { icon: 'icon-yanwubaojingqi', title: t('messages.smokeDetection'), unit: null },
'Methane': { icon: 'icon-ranqi', title: t('messages.gasDetection'), unit: null },
'CH2O': { icon: 'icon-app_icons--', title: t('messages.CH2ODetection'), unit: 'mg/m³' },
@ -169,7 +169,7 @@ async function getSafeWarningDatafun() {
handle_vertical.forEach(res => {
if (res.type == 'TVOC') {
verticalNum7.value.setData(res.value, 'icon-TVOC-Outlined', res.limit, "mg/m3")
verticalNum7.value.setData(res.value, 'icon-tvoc', res.limit, "mg/m3")
}
if (res.type == 'Smoke') {
verticalNum5.value.setData(res.value, 'icon-yanwubaojingqi', res.limit, "")

View File

@ -44,12 +44,12 @@ let headerref=ref()
let time = ref(null);
let titleTip = [
{
color: "#E43961",
name: t('messages.abnormal'),
color: "#20AEC5",
name: t('messages.normal_Tip'),
},
{
color: "#20AEC5",
name: t('messages.NoAbnormal'),
color: "#E43961",
name: t('messages.abnormal'),
},
{
color: "#A7A6BD",