hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加3D拓扑图页

Browse Source 
修改3D分布图WIFI大小
开发传感器趋势图页面
修改安全大屏 和机械分厂安全大屏
This commit is contained in:
hzz 2023-06-06 18:07:59 +08:00
parent 06519920b9
commit 8410121fc9
12 changed files with 1879 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
View File

@ -45,4 +45,17 @@ nav a {
nav a.router-link-exact-active {
color: #42b983;
}
body {
/* --content:calc(100vh - var(--header)) */
overflow: hidden !important;
-ms-overflow-style: none;
/* IE + Edge */
scrollbar-width: none;
/* Firefox */
}
::-webkit-scrollbar {
display: none;
}
</style>

16
src/router/index.ts
View File

@ -160,6 +160,11 @@ const routes: Array<RouteRecordRaw> = [
name: "FactoryView",
component: () => import("../views/FactoryView/index.vue"),
},
{
path: "/FactoryViewTopo",
name: "FactoryViewTopo",
component: () => import("../views/FactoryViewTopo/index.vue"),
},
{
path: "/FactoryView/:type",
name: "FactoryViewEdit",
@ -231,6 +236,17 @@ const routes: Array<RouteRecordRaw> = [
name: "OffsiteDevList",
component: () => import("../views/Temp/OffsiteDevList/index.vue"),
},
{
path: "/TrendChart",
name: "TrendChart",
component: () => import("../views/TrendChart/index.vue"),
},
//理论二级
{
path: "/Mechanics/:id",

2
src/store/moduleSocket.ts
View File

@ -341,7 +341,7 @@ export const useSocketStore = defineStore(Names.socket, {
let pIndex = this.newVerticalNum.findIndex(item => item.type == val.type)
let cIndex = null
if (pIndex != -1) {
cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.name == val.data.name)
cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.devId == val.data.devId)
}
if (cIndex != -1) {
if (val.data.val > this.newVerticalNum[pIndex].limit) {

5
src/store/moduleSocketjixie.ts
View File

@ -320,11 +320,13 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
},
//更新 新的安全检测数据
changeNewVerticalNum(val) {
console.log(val);
//{"type":"Smoke","data":{"name":"精饰车间烟雾传感器","val":"100"}}
let pIndex = this.newVerticalNum.findIndex(item => item.type == val.type)
let cIndex = null
if (pIndex != -1) {
cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.name == val.data.name)
cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.devId == val.data.devId)
}
if (cIndex != -1) {
if (val.data.val>this.newVerticalNum[pIndex].limit) {
@ -343,6 +345,7 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
this.newVerticalNum[pIndex].value[cIndex].time = null
}
this.newVerticalNum[pIndex].value[cIndex].val = val.data.val
this.newVerticalNum[pIndex].value[cIndex].status = true
}
}
}

24
src/views/FactoryView/threeMap.vue
View File

@ -414,22 +414,22 @@ const init = () => {
/*创建wifi */
//机加
createWifi({ x: -46.96, y: 2, z: 156.57 })
createWifi({ x: -46.96, y: 3, z: 156.57 })
//大件
createWifi({ x: 52.60, y: 2, z: 96.44 })
createWifi({ x: 52.60, y: 2, z: 157.07 })
createWifi({ x: 52.60, y: 3, z: 96.44 })
createWifi({ x: 52.60, y: 3, z: 157.07 })
//精饰
createWifi({ x: 133.14, y: 2, z: 107.43 })
createWifi({ x: 133.14, y: 2, z: 156.25 })
createWifi({ x: 133.14, y: 3, z: 107.43 })
createWifi({ x: 133.14, y: 3, z: 156.25 })
//焊接
createWifi({ x: 305.73, y: 2, z: 110.45 })
createWifi({ x: 305.73, y: 2, z: 238.67 })
createWifi({ x: 305.73, y: 3, z: 110.45 })
createWifi({ x: 305.73, y: 3, z: 238.67 })
//服装
createWifi({ x: -89.13, y: 4, z: -245.33 })
createWifi({ x: -132.07, y: 2, z: -245.33 })
createWifi({ x: -222.31, y: 2, z: -245.33 })
createWifi({ x: -119.3, y: 2, z: -114.15 })
createWifi({ x: -176.45, y: 2, z: -114.40 })
createWifi({ x: -132.07, y: 3, z: -245.33 })
createWifi({ x: -222.31, y: 3, z: -245.33 })
createWifi({ x: -119.3, y: 3, z: -114.15 })
createWifi({ x: -176.45, y: 3, z: -114.40 })
//家纺 医防
createWifi({ x: 140.83, y: 2, z: -197.34 })
@ -771,7 +771,7 @@ function createWifi(position: positionType) {
loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
const mesh = gltf.scene.children[0];
const s = 0.3;
const s = 0.5;
mesh.scale.set(s, s, s);
mesh.position.set(position.x, position.y, position.z);
// mesh.rotation.x = THREE.MathUtils.degToRad(270)

138
src/views/FactoryViewTopo/index.vue Normal file
View File

@ -0,0 +1,138 @@
<template>
<div :class="$style['container']" ref="Acontent">
<threeMap ref="mapdomref"/>
<!-- <statusBar :width="size.oWidth" :height="size.oHeight" :iconList="store.iconList" :devList="store.devList"></statusBar> -->
</div>
</template>
<script setup lang='ts'>
import {ref,reactive,onMounted,onUnmounted} from 'vue'
import { calcWH } from "@/components/ts/selfAdaption";
import threeMap from './threeMap.vue';
import { getSensorInfodata , deviceDistributeInMachineryFactorydata} from "@/http/AerialView";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { useFactoryStore } from '@/store/module/Factory';
import statusBar from './statusBar.vue';
const store = useFactoryStore();
let Acontent = ref();
let mapdomref=ref()
let size = reactive({
oWidth: 0,
oHeight: 0,
});
let timer = null
function WH(div: HTMLElement) {
let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 5, 0);
size.oWidth = a.oWidth;
size.oHeight = a.oHeight;
if(mapdomref.value){
mapdomref.value.reset({oWidth:size.oWidth*5,oHeight:size.oHeight})
}
}
//获取传感器列表
async function getSensorInfodatafun() {
let result: any = await getSensorInfodata();
if (result.code == 200) {
store.setDataList(result.data);
}
}
//获取设备列表
async function deviceDistributeInMachineryFactorydatafun() {
let result: any = await deviceDistributeInMachineryFactorydata();
if (result.code == 200) {
store.setdevList(result.data);
}
}
function getWebsocket(val) {
// try{
let data = null
try{
data = JSON.parse(val);
}catch(e){
console.log(e);
return
}
if (data.type == "SensorInfo") {
// console.log(data.msg,"传感器数据");
store.updateSensorList(data.msg);
// store.changedevList(data.msg)
// store.changepaintingGas(data.msg);
}
// }catch(err){
// console.log(err,"报错了大哥");
// }
}
// getSensorInfodatafun()
// deviceDistributeInMachineryFactorydatafun()
function errWebsocket(val) {
// console.log(val);
}
onMounted(()=>{
// // todo 屏幕适应
// windowDraw()
// calcRate()
let contentBox = Acontent.value;
// let Timedombox=Timedom.value
window.document.title = "传感器分布图";
WH(contentBox);
window.addEventListener("resize", () => {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
WH(contentBox);
}, 1000);
});
// connectWebsocket(null, null, getWebsocket, errWebsocket);
})
onUnmounted(()=>{// todo 屏幕适应
// unWindowDraw()
clearTimeout(timer)
closeWebsocket();
})
</script>
<style module>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
}
</style>
<style scoped></style>
<style>
body {
/* --content:calc(100vh - var(--header)) */
overflow: hidden !important;
-ms-overflow-style:none; /* IE + Edge */
scrollbar-width: none; /* Firefox */
}
::-webkit-scrollbar {
display: none;
}
</style>

188
src/views/FactoryViewTopo/statusBar.vue Normal file
View File

@ -0,0 +1,188 @@
<!--
* @FilePath: \screenFront\src\views\FactoryView\statusBar.vue
* @Author: 王路平
* @文件版本: V1.0.0
* @Date: 2023-04-04 08:11:07
* @Description:
*
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
<div ref="statusbarref" :key="numkey">
<div class="tip-box-border" :class="{show}" @click="rtract" :style="{width: mapSize.width+'px',height:mapSize.height+'px'}" >
<!-- <div class="DirectionalSign">
</div> -->
<div class="iconTip">
<ul>
<li v-for="item in prop.iconList" :key="item.id" >
<i :class="'iconfont ' + item.name + ' icon-logo'"></i
>{{ "&nbsp&nbsp&nbsp" + item.value }}
<div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
</li>
<li v-for="item in prop.devList" :key="item.id" >
<i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
>{{ "&nbsp&nbsp&nbsp" + item.value }}
<div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
</li>
<li>
<i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp;
WIFI
<div> &nbsp; 16/16</div>
</li>
<li>
<i class="iconfont icon-guangmao icon-logo"></i> &nbsp;&nbsp;&nbsp;
光猫
<div> &nbsp; 9/9</div>
</li>
<li>
<i class="iconfont icon-zhongduananquanjierukongzhiqi icon-logo"></i> &nbsp;&nbsp;&nbsp;
AC
<div> &nbsp; 3/3</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { number } from "echarts/core";
import {reactive, ref, watch,defineProps} from "vue"
const prop = defineProps({
iconList: {
type: Object,
default: {},
},
devList: {
type: Object,
default: {},
},
width: {
type: Number,
default: 0,
},
height: {
type: Number,
default: 0,
},
});
const afterDisplay = ref("none")
const beforeDisplay = ref("block")
const show = ref(true)
let numkey=ref(0)
let statusbarref=ref()
let mapSize = reactive({
width: 0,
height: 0,
});
function rtract() {
show.value = !show.value;
if (show.value) {
afterDisplay.value = "none";
beforeDisplay.value = "block";
} else {
afterDisplay.value = "block";
beforeDisplay.value = "none";
}
}
watch(
() => prop,
(newVal, oldVal) => {
//监听父组件宽高变化，随时重置本组件尺寸
reset(newVal);
},
{ immediate: true, deep: true, flush: "post" }
);
function reset(val: any) {
//宽高为0时跳出该方法
if (!val.width && !val.height) return;
mapSize.width=val.width
mapSize.height=val.height
numkey.value++
// statusbarref.value.style.width=val.width
// statusbarref.value.style.height=val.height
//重置盒子尺寸
}
</script>
<style scoped>
@import url("@/assets/css/iconfont.css");
@import url("@/assets/css/newicon/iconfont.css");
.tip-box-border{
position: fixed;
top: 0;
bottom: 0;
left: 0;
height: 97%;
width: 99%;
padding-top: 100px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
z-index: 999;
background-color:rgba(0,0,0,0.5);
transition: transform 0.5s;
}
.show {
transform: translateX(-90%);
}
.tip-box-border::after{
content: "\e84f";
position: absolute;
top: 50%;
right: 0;
font-size: 24px;
font-family: 'iconfont' !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: v-bind(afterDisplay);
color: #fff;
box-sizing: border-box;
}
.tip-box-border::before{
content: '\e84e';
/* content: "\e84e"; */
position: absolute;
top: 50%;
right: 0;
font-size: 24px;
font-family: 'iconfont' !important;
font-style: normal;
display: v-bind(beforeDisplay);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #fff;
box-sizing: border-box;
}
.DirectionalSign{
width: 60%;
height: 20%;
background-image: url(@/assets/img/AerialView/direction.png);
background-size: 100% 100%;
}
.iconTip{
width: 100%;
height: 80%;
}
.iconTip>ul>li{
padding-left: 10%;
margin-top: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 1.5rem;
color: #fff;
}
.iconTip>ul>li>i{
font-size: 1.5rem;
}
</style>

1264
src/views/FactoryViewTopo/threeMap.vue Normal file
View File

File diff suppressed because it is too large Load Diff

98
src/views/TrendChart/index.vue Normal file
View File

@ -0,0 +1,98 @@
<template>
<div :class="$style['container']">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'传感器24H趋势图'" :titleTip="[]" :typeFun="['time']"
:alarmType="[]"></header2>
</div>
</div>
<div class="content">
<lineChart v-for="(calc, index) in calcArr" :style="{width:width+'px',height:height+'px','min-width':'calc(25% - 20px)'}" :calc="calc">
</lineChart>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted } from "vue"
import Header2 from "@/components/headerBox/header2.vue"
import lineChart from "./lineChart.vue";
type calcType = {
name: string,
type: string,
max: number,
min: number,
avg: number,
data: any[]
}
let calcArr = ref<calcType[]>()
let width = ref(1500)
let height = ref(700)
function ajax() {
setTimeout(() => {
let data = []
let length = 2
let element = {
name: '甲醛',
type: 'CH2O',
max: 0.1,
min: 0.01,
avg: 0.05,
data: [
['2021-06-01 00:00:00', 10],
['2021-06-01 00:00:10', 20],
['2021-06-01 00:00:40', 50],
['2021-06-01 00:01:20', 90],
['2021-06-01 00:01:30', 100],
['2021-06-01 00:01:40', 110],
['2021-06-01 00:01:50', 120],
['2021-06-01 00:02:30', 160],
['2021-06-01 00:02:40', 170],
['2021-06-01 00:03:10', 200],
['2021-06-01 00:03:20', 210],
['2021-06-01 00:03:30', 220],
['2021-06-01 00:04:20', 270]
]
}
for (let index = 0; index < length; index++) {
data.push(element)
}
calcArr.value = data
if (data.length<=4) {
width.value = 1900 / data.length-(data.length-1)*20;
} else if (data.length>4&&data.length<=8) {
width.value = width.value / 4-3*20;
height.value = 950 / 2-40;
} else {
width.value = width.value / 4-3*20;
height.value = 950 / 3-60;
}
})
}
onMounted(() => {
ajax()
})
</script>
<style module>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
box-sizing: border-box;
}
</style>
<style scoped>
.content {
height: 980px;
width: 1920px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
padding: 5px;
}
</style>

128
src/views/TrendChart/lineChart.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div class="container">
<div class="chart" ref="chart"></div>
<ul>
<li><text class="key">最大值</text><text>{{ calc.max }}</text></li>
<li><text class="key">最小值</text><text>{{ calc.min }}</text></li>
<li><text class="key">平均值</text><text>{{ calc.avg }}</text></li>
</ul>
</div>
</template>
<script setup lang='ts'>
import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
const prop = defineProps<{
calc: {
name: string,
type: string,
max: number,
min: number,
avg: number,
data: number[]
}
}>()
const { proxy } = getCurrentInstance() as any
const chart = ref()
let myChart = null
let data = prop.calc.data
function init() {
myChart = proxy.$echarts.init(chart.value, 'dark');
const option = {
title: {
text: prop.calc.name,
top: "5%",
left: "5%"
},
tooltip: {
trigger: 'axis',
},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
},
series: [
{
name: prop.calc.type,
type: 'line',
showSymbol: false,
data: data,
smooth: true,
}
]
};
myChart.setOption(option);
}
watch(() => prop.calc.data, (newVal) => {
data = newVal
myChart.setOption({
series: [
{
data: data
}
]
})
})
onMounted(() => {
init()
})
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
box-sizing: border-box;
font-size: 16px;
color: #fff;
box-shadow: rgb(2, 106, 181) 0px 8px 8px;
}
.container:hover {
box-shadow: rgb(2, 106, 181) 0px 8px 16px;
}
.chart {
height: calc(100% - 60px);
width: 100%;
}
ul {
height: 60px;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
ul li {
height: 100%;
width: 33%;
display: flex;
justify-content: space-around;
align-items: center;
}
ul>li:nth-child(2) {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.key {
color: #ff6e40;
}
</style>

14
src/views/realtimeSecurity/index.vue
View File

@ -77,7 +77,7 @@ function getWebsocket(val) {
//精饰车间燃气监测
if (data.type == "paintingGas") {
store.changepaintingGas(data.msg);
let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value}
let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Methane',data:verticalData})
}
@ -85,7 +85,7 @@ function getWebsocket(val) {
if (data.type == "boilerGas") {
// store.changePM(data.msg)
store.changeboilerGas(data.msg.boilerGas);
let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value}
let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Methane',data:verticalData})
}
@ -93,15 +93,15 @@ function getWebsocket(val) {
if (data.type == "canteenGas") {
// store.changeHumiture(data.msg)
store.changecanteenGas(data.msg.canteenGas);
let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value}
let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Methane',data:verticalData})
}
//甲醛TVOC
if (data.type == "TVOC_CH2O") {
store.changeTVOC_CH2O(data.msg);
let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value}
let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value,devId:data.msg.TVOC.devId}
store.changeNewVerticalNum({type:'TVOC',data:verticalData_TVOC})
let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value}
let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value,devId:data.msg.CH2O.devId}
store.changeNewVerticalNum({type:'CH2O',data:verticalData_CH2O})
}
@ -109,7 +109,7 @@ function getWebsocket(val) {
if (data.type == "flame") {
// store.changeHumiture(data.msg)
store.changeflame(data.msg.flame);
let verticalData = {name:data.msg.devName,val:data.msg.flame.value}
let verticalData = {name:data.msg.devName,val:data.msg.flame.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'FIRE',data:verticalData})
@ -119,7 +119,7 @@ function getWebsocket(val) {
// store.changeHumiture(data.msg)
// store.changepaintingGas(data.msg)
store.changesmoke(data.msg.smoke);
let verticalData = {name:data.msg.devName,val:data.msg.smoke.value}
let verticalData = {name:data.msg.devName,val:data.msg.smoke.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Smoke',data:verticalData})
// console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
}

18
src/views/realtimeSecurityJixiefenchang/index.vue
View File

@ -77,7 +77,7 @@ function getWebsocket(val) {
//精饰车间燃气监测
if (data.type == "paintingGas") {
store.changepaintingGas(data.msg);
let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value}
let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Methane',data:verticalData})
}
@ -85,7 +85,7 @@ function getWebsocket(val) {
if (data.type == "boilerGas") {
// store.changePM(data.msg)
store.changeboilerGas(data.msg.boilerGas);
let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value}
let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Methane',data:verticalData})
}
@ -93,15 +93,17 @@ function getWebsocket(val) {
if (data.type == "canteenGas") {
// store.changeHumiture(data.msg)
store.changecanteenGas(data.msg.canteenGas);
let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value}
let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Methane',data:verticalData})
}
//甲醛TVOC
if (data.type == "TVOC_CH2O") {
if (data.type == "TVOC_CH2O") {
console.log(data.msg,"TVOC_CH2O");
store.changeTVOC_CH2O(data.msg);
let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value}
let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value,devId:data.msg.TVOC.devId}
store.changeNewVerticalNum({type:'TVOC',data:verticalData_TVOC})
let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value}
let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value,devId:data.msg.CH2O.devId}
store.changeNewVerticalNum({type:'CH2O',data:verticalData_CH2O})
}
@ -109,7 +111,7 @@ function getWebsocket(val) {
if (data.type == "flame") {
// store.changeHumiture(data.msg)
store.changeflame(data.msg.flame);
let verticalData = {name:data.msg.devName,val:data.msg.flame.value}
let verticalData = {name:data.msg.devName,val:data.msg.flame.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'FIRE',data:verticalData})
@ -119,7 +121,7 @@ function getWebsocket(val) {
// store.changeHumiture(data.msg)
// store.changepaintingGas(data.msg)
store.changesmoke(data.msg.smoke);
let verticalData = {name:data.msg.devName,val:data.msg.smoke.value}
let verticalData = {name:data.msg.devName,val:data.msg.smoke.value,devId:data.msg.devId}
store.changeNewVerticalNum({type:'Smoke',data:verticalData})
// console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
}