|
|
@@ -1,322 +1,816 @@
|
|
|
<template>
|
|
|
- <div style="width: 100%; height: calc(100vh - 200px); display: flex; justify-content: center; align-items: center">
|
|
|
- <a-spin :spinning="loading" />
|
|
|
- <div id="damper3D" v-show="!loading"> </div>
|
|
|
+ <div class="zl-box">
|
|
|
+ <div id="content" class="modal-box"></div>
|
|
|
+ <div class="zl-container-box">
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="left-box lr-box">
|
|
|
+ <div class="analysis-box">
|
|
|
+ <div class="item-top-title">通风网络分析</div>
|
|
|
+ <BorderBox1 backgroundColor="#00bfff05">
|
|
|
+ <div class="pie-group">
|
|
|
+ <div class="item-pie">
|
|
|
+ <div class="pie">
|
|
|
+ <div class="qiu qiu1">
|
|
|
+ <p>{{ totalEnterNum }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pie-data">
|
|
|
+ <span class="data-text">总进风量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-pie">
|
|
|
+ <div class="pie">
|
|
|
+ <div class="qiu qiu2">
|
|
|
+ <p>{{ totalToNum }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pie-data">
|
|
|
+ <span class="data-text">总回风量</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-data-group">
|
|
|
+ <div class="container-item" v-for="(data, index) in analysisDetailDataList" :key="index">
|
|
|
+ <div class="item-icon">
|
|
|
+ <SvgIcon class="icon-style" size="18" :name="data.icon" />
|
|
|
+ </div>
|
|
|
+ <div class="item-name">{{ data.name }}</div>
|
|
|
+ <div v-if="data.code !== 'level' && data.code !== 'resistance'" class="item-value">{{ data.value }}</div>
|
|
|
+ <div v-if="data.code == 'level'" class="item-value">
|
|
|
+ <span class="signal-round signal-round-run"></span>
|
|
|
+ </div>
|
|
|
+ <div v-if="data.code == 'resistance'" class="item-value">{{ totalPa }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-group">
|
|
|
+ <div class="feature-item">
|
|
|
+ <div class="pie">
|
|
|
+ <Progress
|
|
|
+ type="circle"
|
|
|
+ :width="50"
|
|
|
+ :stroke-color="{
|
|
|
+ '0%': '#FC9C1D',
|
|
|
+ '100%': '#1FF8FB',
|
|
|
+ }"
|
|
|
+ :percent="Number(rate1)"
|
|
|
+ ></Progress>
|
|
|
+ </div>
|
|
|
+ <div class="data">可靠度</div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-item">
|
|
|
+ <div class="pie">
|
|
|
+ <Progress
|
|
|
+ type="circle"
|
|
|
+ :width="50"
|
|
|
+ :stroke-color="{
|
|
|
+ '0%': '#A02EFF',
|
|
|
+ '100%': '#1FF8FB',
|
|
|
+ }"
|
|
|
+ :percent="Number(rate2)"
|
|
|
+ ></Progress>
|
|
|
+ </div>
|
|
|
+ <div class="data">风阻合理度</div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-item">
|
|
|
+ <div class="pie">
|
|
|
+ <Progress
|
|
|
+ type="circle"
|
|
|
+ :width="50"
|
|
|
+ :stroke-color="{
|
|
|
+ '0%': '#108ee9',
|
|
|
+ '100%': '#1FF8FB',
|
|
|
+ }"
|
|
|
+ :percent="Number(rate3)"
|
|
|
+ ></Progress>
|
|
|
+ </div>
|
|
|
+ <div class="data">有效风量率</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </BorderBox1>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="right-box lr-box">
|
|
|
+ <div class="sensor-box">
|
|
|
+ <div class="item-top-title">传感器实时数据</div>
|
|
|
+ <BorderBox1 class="table-box">
|
|
|
+ <div class="table-container">
|
|
|
+ <a-table :columns="sensorColumns" :data-source="sensorDataList" :pagination="false" size="small" />
|
|
|
+ </div>
|
|
|
+ </BorderBox1>
|
|
|
+ </div>
|
|
|
+ <div class="warning-box">
|
|
|
+ <div class="item-top-title">预警报警信息</div>
|
|
|
+ <BorderBox1 class="table-box">
|
|
|
+ <div class="table-container">
|
|
|
+ <a-table :columns="warningColumns" :data-source="warningDataList" :pagination="false" size="small" >
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <div v-if="column.dataIndex == 'level'">
|
|
|
+ <span class="signal-round" :class="{ 'signal-round-red': record['level'] == 1, 'signal-round-orange': record['level'] == 2, 'signal-round-yellow': record['level'] == 3 }"></span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+ </BorderBox1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-box">
|
|
|
+ <div class="bottom-left bottom-lr-box">
|
|
|
+ <BorderBox11 title="实时网络解算" :color="['#00FFFF']">
|
|
|
+ <div class="network-top">
|
|
|
+ <div class="network-top-left">
|
|
|
+ <div>
|
|
|
+ 准确率：
|
|
|
+ <span class="accuracy-rate">95%</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 迭代误差：
|
|
|
+ <span class="error-rate">0.0941%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="network-top-right">
|
|
|
+ 本次解算时间：
|
|
|
+ <span class="time">{{ currentTime }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-container">
|
|
|
+ <a-table :columns="networkColumns" :data-source="networkDataList" :pagination="false" size="small" />
|
|
|
+ </div>
|
|
|
+ </BorderBox11>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-right bottom-lr-box">
|
|
|
+ <BorderBox11 title="最大阻力路线">
|
|
|
+ <div class="zl-top">
|
|
|
+ <div>
|
|
|
+ <span class="btn active">1号回风斜井</span>
|
|
|
+ <span class="btn">2号回风斜井</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 路线阻力
|
|
|
+ <span class="data">{{ totalPa }}</span>
|
|
|
+ Pa
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-container">
|
|
|
+ <div class="zl-path-item position1">
|
|
|
+ <div class="title">副平硐</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position2">
|
|
|
+ <div class="title">5煤组盘区辅运巷</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position3">
|
|
|
+ <div class="title">1521辅运顺槽</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position4">
|
|
|
+ <div class="title">15212综采工作面</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position5">
|
|
|
+ <div class="title">15211辅运顺槽</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position6">
|
|
|
+ <div class="title">15212胶运顺槽</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position7">
|
|
|
+ <div class="title">15212回风顺槽回风联巷</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position8">
|
|
|
+ <div class="title">5煤组盘曲回风大巷</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position9">
|
|
|
+ <div class="title">回风斜井联络巷</div>
|
|
|
+ </div>
|
|
|
+ <div class="zl-path-item position10">
|
|
|
+ <div class="title">1盘曲回风斜井</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </BorderBox11>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
- import UseThree from '../../../utils/threejs/useThree';
|
|
|
- import * as THREE from 'three';
|
|
|
- import gsap from 'gsap';
|
|
|
+ import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import { Progress } from 'ant-design-vue';
|
|
|
+ import { BorderBox11, BorderBox1 } from '@kjgl77/datav-vue3';
|
|
|
+ import { sensorColumns, sensorData, networkColumns, networkData, warningColumns, warningData } from './network.data'
|
|
|
+ import dayjs from 'dayjs'
|
|
|
|
|
|
- const loading = ref(false);
|
|
|
- let model;
|
|
|
+ // import { registerApps } from '/@/qiankun';
|
|
|
+ // import { useGlobSetting } from '/@/hooks/setting';
|
|
|
|
|
|
- const setCustomMaterial = (group) => {
|
|
|
- const cityMaterial = model.track(
|
|
|
- new THREE.MeshBasicMaterial({
|
|
|
- color: new THREE.Color(0x0c016f),
|
|
|
- })
|
|
|
- );
|
|
|
- group?.traverse((item: THREE.Mesh) => {
|
|
|
- if (item.type === 'Mesh') {
|
|
|
- item.material = cityMaterial;
|
|
|
- setMaterial(item);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
+ // const globSetting = useGlobSetting();
|
|
|
+ // const openQianKun = globSetting.openQianKun;
|
|
|
|
|
|
- /* 自定义材质 */
|
|
|
- const setMaterial = (obj) => {
|
|
|
- obj.geometry.computeBoundingBox();
|
|
|
- const { max, min } = obj.geometry.boundingBox;
|
|
|
- const distance = max.y - min.y + 2;
|
|
|
+ const sensorDataList = ref<any[]>([])
|
|
|
+ const networkDataList = ref<any[]>([])
|
|
|
+ const warningDataList = ref<any[]>([])
|
|
|
+ const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
|
|
|
|
|
|
- obj.material.onBeforeCompile = (shader) => {
|
|
|
- shader.uniforms.uDistance = {
|
|
|
- value: distance,
|
|
|
- };
|
|
|
- shader.uniforms.uTopColor = {
|
|
|
- value: new THREE.Color(0xaaaeff),
|
|
|
- };
|
|
|
- addGrad(shader);
|
|
|
- addRadiusSpread(shader);
|
|
|
- addLineSpread(shader);
|
|
|
- addToSpread(shader);
|
|
|
- };
|
|
|
- };
|
|
|
- /* 自定义着色器 */
|
|
|
- const addGrad = (shader) => {
|
|
|
- shader.vertexShader = shader.vertexShader.replace(
|
|
|
- '#include <common>',
|
|
|
- `
|
|
|
+ const totalEnterNum = ref(23855+'')
|
|
|
+ const totalToNum = ref(244436+'')
|
|
|
+ const totalPa = ref(1640+'')
|
|
|
+ const rate1 = ref(95+'')
|
|
|
+ const rate2 = ref(95+'')
|
|
|
+ const rate3 = ref(95+'')
|
|
|
|
|
|
- #include <common>
|
|
|
- varying vec3 vPosition;
|
|
|
- `
|
|
|
- );
|
|
|
- shader.vertexShader = shader.vertexShader.replace(
|
|
|
- '#include <fog_vertex>',
|
|
|
- `
|
|
|
|
|
|
- #include <fog_vertex>
|
|
|
- vPosition = position;
|
|
|
- `
|
|
|
- );
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '#include <common>',
|
|
|
- `
|
|
|
- #include <common>
|
|
|
- uniform vec3 uTopColor;
|
|
|
- uniform float uDistance;
|
|
|
- varying vec3 vPosition;
|
|
|
+ const analysisDetailDataList = ref([
|
|
|
+ {
|
|
|
+ code:'',
|
|
|
+ name: '通风巷道规模（m）',
|
|
|
+ value: '21000',
|
|
|
+ icon: 'path-icon1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'level',
|
|
|
+ name: '通风难易程度',
|
|
|
+ value: '21000',
|
|
|
+ icon: 'path-icon2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: 'resistance',
|
|
|
+ name: '总阻力',
|
|
|
+ value: totalPa.value,
|
|
|
+ icon: 'path-icon3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: '',
|
|
|
+ name: '等积孔（㎡）',
|
|
|
+ value: '11.27',
|
|
|
+ icon: 'path-icon4'
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
|
|
|
- `
|
|
|
- );
|
|
|
-
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '#include <dithering_fragment>',
|
|
|
- `
|
|
|
- #include <dithering_fragment>
|
|
|
-
|
|
|
- vec4 distGradColor = gl_FragColor;
|
|
|
- // 设置混合的百分比
|
|
|
- float gradMix = (vPosition.y + (uDistance / 2.0)) / uDistance / 5.0;
|
|
|
- // 设置混合颜色
|
|
|
- vec3 colorMix = mix(distGradColor.xyz, uTopColor, gradMix);
|
|
|
- gl_FragColor = vec4(colorMix, 1.0);
|
|
|
- //#end#
|
|
|
- `
|
|
|
- );
|
|
|
- };
|
|
|
- /* 自定义着色器 */
|
|
|
- const addRadiusSpread = (shader) => {
|
|
|
- // 设置扩散中心店
|
|
|
- shader.uniforms.uRadiusSpreadCenter = {
|
|
|
- value: new THREE.Vector2(0, 0),
|
|
|
- };
|
|
|
- // 扩散时间
|
|
|
- shader.uniforms.uRadiusSpreadTime = {
|
|
|
- value: 0,
|
|
|
- };
|
|
|
-
|
|
|
- shader.uniforms.uRadiusSpreadWidth = {
|
|
|
- value: 20,
|
|
|
- };
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '#include <common>',
|
|
|
- `
|
|
|
- #include <common>
|
|
|
- uniform vec2 uRadiusSpreadCenter;
|
|
|
- uniform float uRadiusSpreadTime;
|
|
|
- uniform float uRadiusSpreadWidth;
|
|
|
-
|
|
|
- `
|
|
|
- );
|
|
|
-
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '//#end#',
|
|
|
- `
|
|
|
- float spreadRadius = distance(vPosition.xz + vec2(-720, -550), uRadiusSpreadCenter);
|
|
|
- // 扩散范围
|
|
|
- float spreadIndex = -(spreadRadius - uRadiusSpreadTime) * (spreadRadius - uRadiusSpreadTime ) + uRadiusSpreadWidth;
|
|
|
- if(spreadIndex > 0.0){
|
|
|
- gl_FragColor = mix(gl_FragColor, vec4(1.0, 1.0, 1.0, 1.0), spreadIndex / uRadiusSpreadWidth );
|
|
|
- }
|
|
|
- //#end#
|
|
|
- `
|
|
|
- );
|
|
|
- gsap.to(shader.uniforms.uRadiusSpreadTime, {
|
|
|
- value: 250,
|
|
|
- duration: 1,
|
|
|
- ease: 'none',
|
|
|
- repeat: -1,
|
|
|
- });
|
|
|
- };
|
|
|
- /* 自定义着色器 */
|
|
|
- const addLineSpread = (shader) => {
|
|
|
- // 设置扩散中心店
|
|
|
- shader.uniforms.uLineSpreadCenter = {
|
|
|
- value: new THREE.Vector2(0, 0),
|
|
|
- };
|
|
|
- // 扩散时间
|
|
|
- shader.uniforms.uLineSpreadTime = {
|
|
|
- value: 0,
|
|
|
- };
|
|
|
-
|
|
|
- shader.uniforms.uLineSpreadWidth = {
|
|
|
- value: 20,
|
|
|
- };
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '#include <common>',
|
|
|
- `
|
|
|
- #include <common>
|
|
|
- uniform vec2 uLineSpreadCenter;
|
|
|
- uniform float uLineSpreadTime;
|
|
|
- uniform float uLineSpreadWidth;
|
|
|
-
|
|
|
- `
|
|
|
- );
|
|
|
-
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '//#end#',
|
|
|
- `
|
|
|
- float spreadLine = vPosition.x - 400.0;
|
|
|
- // 扩散范围
|
|
|
- float spreadLineIndex = -(spreadLine - uLineSpreadTime * 5.0) * (spreadLine - uLineSpreadTime * 5.0) + uLineSpreadWidth;
|
|
|
- if(spreadLineIndex > 0.0){
|
|
|
- gl_FragColor = mix(gl_FragColor, vec4(1.0, 1.0, 1.0, 1.0), spreadLineIndex / uLineSpreadWidth );
|
|
|
- }
|
|
|
- //#end#
|
|
|
- `
|
|
|
- );
|
|
|
- gsap.to(shader.uniforms.uLineSpreadTime, {
|
|
|
- value: 150,
|
|
|
- duration: 2,
|
|
|
- ease: 'none',
|
|
|
- repeat: -1,
|
|
|
- });
|
|
|
- };
|
|
|
- /* 自定义着色器 */
|
|
|
- const addToSpread = (shader) => {
|
|
|
- // 设置扩散中心店
|
|
|
- shader.uniforms.uTopSpreadCenter = {
|
|
|
- value: new THREE.Vector2(0, 0),
|
|
|
- };
|
|
|
- // 扩散时间
|
|
|
- shader.uniforms.uTopSpreadTime = {
|
|
|
- value: 0,
|
|
|
- };
|
|
|
-
|
|
|
- shader.uniforms.uTopSpreadWidth = {
|
|
|
- value: 20,
|
|
|
- };
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '#include <common>',
|
|
|
- `
|
|
|
- #include <common>
|
|
|
- uniform vec2 uTopSpreadCenter;
|
|
|
- uniform float uTopSpreadTime;
|
|
|
- uniform float uTopSpreadWidth;
|
|
|
-
|
|
|
- `
|
|
|
- );
|
|
|
-
|
|
|
- shader.fragmentShader = shader.fragmentShader.replace(
|
|
|
- '//#end#',
|
|
|
- `
|
|
|
- float spreadTopLine = vPosition.y * 2.0;
|
|
|
- // 扩散范围uTopSpreadWidth
|
|
|
- float spreadTopIndex = -(spreadTopLine - uTopSpreadTime) * (spreadTopLine - uTopSpreadTime) + uTopSpreadWidth;
|
|
|
- if(spreadTopIndex > 0.0){
|
|
|
- gl_FragColor = mix(gl_FragColor, vec4(0.0, 1.0, 1.0, 1.0), spreadTopIndex / uTopSpreadWidth / uTopSpreadTime * 2.0);
|
|
|
- }
|
|
|
- //#end#
|
|
|
- `
|
|
|
- );
|
|
|
- gsap.to(shader.uniforms.uTopSpreadTime, {
|
|
|
- value: 200,
|
|
|
- duration: 5,
|
|
|
- ease: 'none',
|
|
|
- repeat: -1,
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- /* 模型线框 */
|
|
|
- const addLine = (geometry) => {
|
|
|
- const edges = new THREE.EdgesGeometry(geometry);
|
|
|
- const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0xff0000 }));
|
|
|
- (model.scene as THREE.Scene).add(line);
|
|
|
- };
|
|
|
-
|
|
|
- const addLight = (scene) => {
|
|
|
- const light = new THREE.PointLight(0xffffff, 1, 1000);
|
|
|
- light.position.set(50, 10, 50);
|
|
|
- // scene.add( light );
|
|
|
-
|
|
|
- const pointLight = new THREE.PointLight(0xffffff, 1, 200);
|
|
|
- pointLight.position.set(0, 0, 10);
|
|
|
- // scene.add( pointLight );
|
|
|
-
|
|
|
- const pointLight2 = new THREE.PointLight(0xffffff, 1, 100);
|
|
|
- pointLight2.position.set(0, 3, 10);
|
|
|
- // light2.castShadow = true
|
|
|
- pointLight2.shadow.bias = 0.05;
|
|
|
- scene.add(pointLight2);
|
|
|
- // const pointLightHelper2 = new THREE.PointLightHelper( pointLight2, 1 );
|
|
|
- // scene.add( pointLightHelper2 );
|
|
|
-
|
|
|
- const pointLight3 = new THREE.PointLight(0xffffff, 1, 100);
|
|
|
- pointLight3.position.set(-80, 3, 10);
|
|
|
- // light2.castShadow = true
|
|
|
- pointLight3.shadow.bias = 0.05;
|
|
|
- scene.add(pointLight3);
|
|
|
- // const pointLightHelper = new THREE.PointLightHelper( pointLight3, 1 );
|
|
|
- // scene.add( pointLightHelper );
|
|
|
|
|
|
- const pointLight4 = new THREE.PointLight(0xffffff, 1, 100);
|
|
|
- pointLight4.position.set(37, 3, 10);
|
|
|
- // light2.castShadow = true
|
|
|
- pointLight4.shadow.bias = 0.05;
|
|
|
- scene.add(pointLight4);
|
|
|
- // const pointLightHelper4 = new THREE.PointLightHelper( pointLight4, 1 );
|
|
|
- // scene.add( pointLightHelper4 );
|
|
|
+ let timer: null | NodeJS.Timeout = null;
|
|
|
+ function getMonitorData() {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
|
|
|
- const pointLight5 = new THREE.PointLight(0xffffff, 1, 100);
|
|
|
- pointLight5.position.set(100, 3, 10);
|
|
|
- // light2.castShadow = true
|
|
|
- pointLight5.shadow.bias = 0.05;
|
|
|
- scene.add(pointLight5);
|
|
|
- // const pointLightHelper5 = new THREE.PointLightHelper( pointLight5, 1 );
|
|
|
- // scene.add( pointLightHelper5 );
|
|
|
|
|
|
- pointLight2.shadow.mapSize.width = 10; // default
|
|
|
- pointLight2.shadow.mapSize.height = 10; // default
|
|
|
- pointLight2.shadow.camera.near = -0.0000001; // default
|
|
|
- pointLight2.shadow.camera.far = 20; // default
|
|
|
|
|
|
- const spotLight = new THREE.SpotLight();
|
|
|
- spotLight.angle = Math.PI / 16;
|
|
|
- spotLight.penumbra = 0;
|
|
|
- spotLight.castShadow = true;
|
|
|
- spotLight.intensity = 2;
|
|
|
- spotLight.position.set(-400, 400, 400);
|
|
|
- scene.add(spotLight);
|
|
|
+ timer = setTimeout(async () => {
|
|
|
+ sensorDataList.value = sensorData()
|
|
|
+ networkDataList.value = networkData()
|
|
|
+ warningDataList.value = warningData()
|
|
|
+ currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ totalEnterNum.value = Number(Math.random() * 200 - 100 + 23855).toFixed(0)
|
|
|
+ totalToNum.value = Number(Math.random() * 200 - 100 + 244436).toFixed(0)
|
|
|
+ totalPa.value = Number(Math.random() * 50 - 25 + 1640).toFixed(0)
|
|
|
+ rate1.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
|
|
|
+ rate2.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
|
|
|
+ rate3.value = Number(Math.random() * 4 - 2 + 95).toFixed(0)
|
|
|
+ sensorDataList.value = sensorData()
|
|
|
+ networkDataList.value = networkData()
|
|
|
+ warningDataList.value = warningData()
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitorData();
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- spotLight.shadow.mapSize.width = 2000; // default
|
|
|
- spotLight.shadow.mapSize.height = 1000; // default
|
|
|
- spotLight.shadow.camera.near = 0.5; // default
|
|
|
- spotLight.shadow.camera.far = 800; // default
|
|
|
- spotLight.shadow.focus = 1;
|
|
|
- spotLight.shadow.bias = -0.000001;
|
|
|
- };
|
|
|
- const resetCamera = () => {
|
|
|
- model.camera.position.setZ(200);
|
|
|
- model.camera.position.setY(120);
|
|
|
- model.camera?.lookAt(-100, 0.1, 50);
|
|
|
- model.camera.updateProjectionMatrix();
|
|
|
- model.orbitControls.update();
|
|
|
- };
|
|
|
|
|
|
onMounted(() => {
|
|
|
- model = new UseThree('#damper3D');
|
|
|
- model.setEnvMap('test1');
|
|
|
- model.setCustomMaterial = setCustomMaterial;
|
|
|
- loading.value = true;
|
|
|
- model.setModel('9f-processed').then(() => {
|
|
|
- addLight(model.scene);
|
|
|
- resetCamera();
|
|
|
- // 模型加载成功
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
+ getMonitorData()
|
|
|
+ if (document.body.getAttribute('class')?.includes('style-styleTwo')) document.body.removeAttribute('class', 'style-styleTwo');
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
- if (model) {
|
|
|
- model.deleteModal();
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+<style scoped lang="less">
|
|
|
+ .zl-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #fff;
|
|
|
+ // background: url('/@/assets/images/vent/path/bg.png') no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: cover;
|
|
|
+ .modal-box{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zl-container-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99;
|
|
|
+ pointer-events: none;
|
|
|
+ .top-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: calc(70% - 20px);
|
|
|
+ .lr-box{
|
|
|
+ width: 374px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .left-box{
|
|
|
+ .analysis-box{
|
|
|
+ position: relative;
|
|
|
+ .pie-group{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding-top: 30px;
|
|
|
+ .item-pie{
|
|
|
+ flex: 1;
|
|
|
+ padding: 5px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .pie{
|
|
|
+ width: 140px;
|
|
|
+ height: 80px;
|
|
|
+ background: url('/@/assets/images/vent/path/di.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .qiu1{
|
|
|
+ background: url('/@/assets/images/vent/path/cicle01.png') no-repeat center;
|
|
|
+ }
|
|
|
+ .qiu2{
|
|
|
+ background: url('/@/assets/images/vent/path/cicle04.png') no-repeat center;
|
|
|
+ }
|
|
|
+ .qiu{
|
|
|
+ position: relative;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background-size: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 18px;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid rgba(255, 255, 255, 0.5);
|
|
|
+ animation: scale 2s linear infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pie-data{
|
|
|
+ width: 140px;
|
|
|
+ height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ background: url('/@/assets/images/vent/path/pie-line.png');
|
|
|
+ .data-text{
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-data-group{
|
|
|
+ width: 100%;;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ .container-item {
|
|
|
+ width: 307px;
|
|
|
+ height: 63px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ background: url('/@/assets/images/vent/plane-bottom.png') no-repeat;
|
|
|
+ background-size: auto;
|
|
|
+ background-position: bottom;
|
|
|
+ padding: 10px 30px;
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 5px;
|
|
|
+ position: absolute;
|
|
|
+ top: 62px;
|
|
|
+ left: 0;
|
|
|
+ background-color: #73f4ff66;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ }
|
|
|
+ .item-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 45px;
|
|
|
+ background: url('/@/assets/images/vent/plane-icon-bg.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .icon-style {
|
|
|
+ margin: 10px 0 0 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-name {
|
|
|
+ width: 180px;
|
|
|
+ line-height: 60px;
|
|
|
+ margin-left: 5px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .item-value {
|
|
|
+ position: relative;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 15px 0;
|
|
|
+ text-align: center;
|
|
|
+ width: 80px;
|
|
|
+ border: 1px solid #00f5fe;
|
|
|
+ border-radius: 13px;
|
|
|
+ background: linear-gradient(to right, #00f5fe44, #0090ff44);
|
|
|
+ &::before {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: -3px;
|
|
|
+ top: 8px;
|
|
|
+ background: #ffa500;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .feature-group{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 15px;
|
|
|
+ .feature-item{
|
|
|
+ width: 108px;
|
|
|
+ height: 120px;
|
|
|
+ background: url('/@/assets/images/vent/path/path-feature-bg.png');
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // justify-content: center;
|
|
|
+
|
|
|
+ .pie{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .data{
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ scale: 0.9;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-box{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .sensor-box, .warning-box{
|
|
|
+ position: relative;
|
|
|
+ // min-height: 220px;
|
|
|
+ // max-height: 250px;
|
|
|
+ .table-box{
|
|
|
+ height: 280px;
|
|
|
+ position: relative;
|
|
|
+ .table-container{
|
|
|
+ margin: 25px 20px 20px;
|
|
|
+ height: 250px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sensor-box{
|
|
|
+ .item-top-title{
|
|
|
+ &::after{
|
|
|
+ left: 110px;
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ left: 265px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .warning-box{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-box{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(30% - 20px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+ .bottom-lr-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .bottom-left{
|
|
|
+ margin-right: 10px;
|
|
|
+ .network-top{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ top: 55px;
|
|
|
+ padding: 0 30px;
|
|
|
+ .network-top-left{
|
|
|
+ display: flex;
|
|
|
+ div{
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ .accuracy-rate{
|
|
|
+ color: #FFA500;
|
|
|
+ }
|
|
|
+ .error-rate{
|
|
|
+ color: #00f5fe;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ color: #949494;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-container{
|
|
|
+ height: 150px;
|
|
|
+ margin-top: 55px;
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom-right{
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .zl-top{
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ padding: 0 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ top: 35px;
|
|
|
+ z-index: 99;
|
|
|
+ margin: 10px;
|
|
|
+ border-bottom: 1px solid #00f5fe;
|
|
|
+ .btn{
|
|
|
+ padding: 3px 10px;
|
|
|
+ border-top: 1px solid #c6c6c6;
|
|
|
+ background-image: linear-gradient(#c2c2c2aa, #b3b3b388 20%, #5a5a5a88);
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 5px;
|
|
|
+ &:hover, &:active{
|
|
|
+ border-top: 1px solid #00f5fe;
|
|
|
+ background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ border-top: 1px solid #00f5fe;
|
|
|
+ background-image: linear-gradient(#00f5feaa, #1adce288 20%, #00848988);
|
|
|
+ }
|
|
|
+ .data{
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #FFA500;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zl-container{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 15px;
|
|
|
+ background: url('/@/assets/images/vent/path/zl-bg1.png') no-repeat;
|
|
|
+ background-size: 920px 190px;
|
|
|
+ position: relative;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 85px;
|
|
|
+ background: url('/@/assets/images/vent/path/zl-bg2.png') no-repeat;
|
|
|
+ background-size: 920px 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zl-path-item{
|
|
|
+ height: 67px;
|
|
|
+ background: url('/@/assets/images/vent/path/zl-path-item-bg.png') no-repeat;
|
|
|
+ background-size: auto;
|
|
|
+ background-position:center bottom;
|
|
|
+ position: absolute;
|
|
|
+ scale: 0.9;
|
|
|
+ .title{
|
|
|
+ position: relative;
|
|
|
+ top: -20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ background: #00f5fe33;
|
|
|
+ padding: 3px 5px;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .position10{
|
|
|
+ top: 130px;
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ .position9{
|
|
|
+ top: 52px;
|
|
|
+ left: 100px;
|
|
|
+ }
|
|
|
+ .position8{
|
|
|
+ top: 132px;
|
|
|
+ left: 220px;
|
|
|
+ }
|
|
|
+ .position7{
|
|
|
+ top: 128px;
|
|
|
+ left: 420px;
|
|
|
+ }
|
|
|
+ .position6{
|
|
|
+ top: 60px;
|
|
|
+ left: 320px;
|
|
|
+ }
|
|
|
+ .position5{
|
|
|
+ top: 120px;
|
|
|
+ left: 580px;
|
|
|
+ }
|
|
|
+ .position4{
|
|
|
+ top: 123px;
|
|
|
+ left: 690px;
|
|
|
+ }
|
|
|
+ .position3{
|
|
|
+ top: 103px;
|
|
|
+ left: 830px;
|
|
|
+ }
|
|
|
+ .position2{
|
|
|
+ top: 90px;
|
|
|
+ left: 740px;
|
|
|
+ }
|
|
|
+ .position1{
|
|
|
+ top: 80px;
|
|
|
+ left: 535px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-top-title{
|
|
|
+ width: 374px;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fafafa;
|
|
|
+ position: absolute;
|
|
|
+ padding-top: 0px;
|
|
|
+ top: -9px;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 40px;
|
|
|
+ height: 1px;
|
|
|
+ position: absolute;
|
|
|
+ left: 255px;
|
|
|
+ top:50%;
|
|
|
+ transform:translateY(-50%);
|
|
|
+ -webkit-transform:translate(-50%,-50%);
|
|
|
+ background-color: #00d4fe88;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 40px;
|
|
|
+ height: 1px;
|
|
|
+ position: absolute;
|
|
|
+ left: 120px;
|
|
|
+ top:50%;
|
|
|
+ transform:translateY(-50%);
|
|
|
+ -webkit-transform:translate(-50%,-50%);
|
|
|
+ background-color: #00d4fe88;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .signal-round{
|
|
|
+ display: inline-block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+ &::after {
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: -2px;
|
|
|
+ left: -2px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #daffc044;
|
|
|
+ box-shadow: 0 0 1px 1px #c6ff7722;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .signal-round-run {
|
|
|
+ background-color: #67fc00;
|
|
|
+ &::after {
|
|
|
+ background-color: #daffc044;
|
|
|
+ box-shadow: 0 0 1px 1px #c6ff7722;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .signal-round-red {
|
|
|
+ background-color: #FF3823;
|
|
|
+ &::after {
|
|
|
+ background-color: #FF382344;
|
|
|
+ box-shadow: 0 0 1px 1px #FF382333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .signal-round-orange {
|
|
|
+ background-color: #FF9B17;
|
|
|
+ &::after {
|
|
|
+ background-color: #FF9B1744;
|
|
|
+ box-shadow: 0 0 1px 1px #FF9B1733;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .signal-round-yellow {
|
|
|
+ background-color: #FFFF00;
|
|
|
+ &::after {
|
|
|
+ background-color: #FFFF0044;
|
|
|
+ box-shadow: 0 0 1px 1px #FFFF0033;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-container{
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+ pointer-events: auto;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #f5f5f500;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ background-color: #ffffff33;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #cccccc44;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes scale {
|
|
|
+ 0% {
|
|
|
+ transform: translate(-50%, -50%) scale(0.9);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate(-50%, -50%) scale(1.5);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+:deep(.ant-progress-text){
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+:deep(.ant-table-thead){
|
|
|
+ background-color: transparent !important;
|
|
|
+ & > tr{
|
|
|
+ border: 1px solid #00f5fe !important;
|
|
|
+ }
|
|
|
+ & > tr > th{
|
|
|
+ // border: none !important;
|
|
|
+ color: #00f5fe !important;
|
|
|
+ border-top: 1px solid #00f5fe !important;
|
|
|
+ border-bottom: 1px solid #00f5fe !important;
|
|
|
+ border-left: none !important;
|
|
|
+ border-right: none !important;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.ant-table-tbody){
|
|
|
+ & > tr > td{
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.ant-table-small){
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+:deep(.ant-layout){
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+</style>
|
hongrunxia
