update
This commit is contained in:
parent
de41af9613
commit
eb0b7aa27e
@ -543,7 +543,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
.time {
|
.time {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 20rem;
|
width: 350px;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
bottom: 30%;
|
bottom: 30%;
|
||||||
left: 4.2rem;
|
left: 4.2rem;
|
||||||
|
@ -281,8 +281,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "MicroExhibitionChild",
|
name: "MicroExhibitionChild",
|
||||||
component: () => import("../views/MicroExhibition/child/index.vue"),
|
component: () => import("../views/MicroExhibition/child/index.vue"),
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -295,6 +294,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "Hazardous",
|
name: "Hazardous",
|
||||||
component: () => import("../views/Hazardous/index.vue"),
|
component: () => import("../views/Hazardous/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/stuffCrownBlock",
|
||||||
|
name: "stuffCrownBlock",
|
||||||
|
component: () => import("../views/CrownBlock/stuffCrownBlock/index.vue"),
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -72,6 +72,9 @@ export const useSocketStore = defineStore(Names.socketMechanics, {
|
|||||||
"pm10": "7"
|
"pm10": "7"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
pmcq: [
|
||||||
|
{}
|
||||||
|
],
|
||||||
newVerticalNum: [
|
newVerticalNum: [
|
||||||
{
|
{
|
||||||
"type": "TVOC",
|
"type": "TVOC",
|
||||||
|
123
src/views/CrownBlock/stuffCrownBlock/index.vue
Normal file
123
src/views/CrownBlock/stuffCrownBlock/index.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'大件车间天车位置监测平台'" :titleTip="''"
|
||||||
|
:typeFun="['time']" :alarmType="[]"></header2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="corwn-block ">
|
||||||
|
<div class="content-name">
|
||||||
|
<span class="name">西侧</span>
|
||||||
|
<span class="name">大件车间</span>
|
||||||
|
<span class="name">东侧</span>
|
||||||
|
</div>
|
||||||
|
<div class="block" :style="{right: position + 'px'}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import {ref, onMounted, onUnmounted} from 'vue'
|
||||||
|
import header2 from '@/components/headerBox/header2.vue'
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
|
|
||||||
|
let magn = 0.18;
|
||||||
|
let position = ref(0)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 请求接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function getWebsocket(val) {
|
||||||
|
try {
|
||||||
|
let data = JSON.parse(val);
|
||||||
|
|
||||||
|
if (data.type == "ceju") {
|
||||||
|
position.value = data.msg.distance * magn;
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
closeWebsocket();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
/* background-color: #0E0E0E; */
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 100px;
|
||||||
|
width: 1920px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 980px;
|
||||||
|
width: 1920px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.corwn-block {
|
||||||
|
position: relative;
|
||||||
|
width: 1746px;
|
||||||
|
height: 360px;
|
||||||
|
background-color: #666464;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 100%;
|
||||||
|
/*背景渐变 */
|
||||||
|
background-image: linear-gradient(to bottom, #c02525, #c14242 40%, #c14242 70%, #c02525 100%);
|
||||||
|
/* 透明度 */
|
||||||
|
opacity: 0.8;
|
||||||
|
top: 0;
|
||||||
|
/* transform: translate(-50%,0); */
|
||||||
|
transition: all 0.5s linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-name {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 60px;
|
||||||
|
color: #bfa;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -12,7 +12,7 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
|
||||||
<verticalNum ref="verticalNum3" :title="t('messages.flameDetection')"></verticalNum>
|
<!-- <verticalNum ref="verticalNum3" :title="t('messages.flameDetection')"></verticalNum> -->
|
||||||
<verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
|
<verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
|
||||||
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
||||||
<verticalNum ref="verticalNum6" :title="t('messages.CH2ODetection')"></verticalNum>
|
<verticalNum ref="verticalNum6" :title="t('messages.CH2ODetection')"></verticalNum>
|
||||||
|
@ -13,6 +13,9 @@
|
|||||||
<verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
|
<verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
|
||||||
:limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
|
:limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="top-box-item" @click="gotoTrendChart(store.pmcq, 'μg/m3',{PM25:75,PM10:150})">
|
||||||
|
<pm :pm10limit="150" :pm25limit="75"></pm>
|
||||||
|
</div> -->
|
||||||
<div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3',{PM25:75,PM10:150})">
|
<div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3',{PM25:75,PM10:150})">
|
||||||
<pm :pm10limit="150" :pm25limit="75"></pm>
|
<pm :pm10limit="150" :pm25limit="75"></pm>
|
||||||
</div>
|
</div>
|
||||||
@ -224,8 +227,8 @@ watch(() => store.humiture, (newVal, oldVal) => {
|
|||||||
let pmindex = ref(0);
|
let pmindex = ref(0);
|
||||||
|
|
||||||
async function getPmData() {
|
async function getPmData() {
|
||||||
let resulttwo: any = await getPmtwoData({ deptIds: '6,7,9,10,11' })
|
let resulttwo: any = await getPmtwoData({ deptIds: '6,7,9,10,11,23' })
|
||||||
let resultten: any = await getPmtenData({ deptIds: '6,7,9,10,11' })
|
let resultten: any = await getPmtenData({ deptIds: '6,7,9,10,11,23' })
|
||||||
let data = {}
|
let data = {}
|
||||||
if (resulttwo) {
|
if (resulttwo) {
|
||||||
resulttwo.data.forEach(ele => {
|
resulttwo.data.forEach(ele => {
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
<!-- <div class="topTip">
|
<!-- <div class="topTip">
|
||||||
<toptip ref="toptip1"></toptip>
|
<toptip ref="toptip1"></toptip>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div style="display: flex;">
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||||
<div
|
<div
|
||||||
style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
|
style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
|
||||||
v-for="item in store.newVerticalNum">
|
v-for="item in store.newVerticalNum">
|
||||||
|
Loading…
Reference in New Issue
Block a user