odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

廖杰：完成预览模式下鼠标离开设备，面板自动消失，调整面板字体，设备选中的箭头优化

Browse Source
This commit is contained in:
Hcat
2024-03-18 19:26:45 +08:00
parent b90d5d5911
commit 9e3d896259
5 changed files with 100 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/content/badGasInfo/BadGasInfo.vue
View File

@@ -1,28 +1,16 @@
<template> <template>
<div <div id="bad-gas-info" :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
id="bad-gas-info"
:style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
<div class="title">有害气体</div> <div class="title">有害气体</div>
<div v-if="badGasList==null||badGasList.length===0" class="showNull"> <div v-if="badGasList == null || badGasList.length === 0" class="showNull">
<div class="loading" v-if="loading===0"></div> <div class="loading" v-if="loading === 0"></div>
{{ loading === 0 ? '加载中...' : '暂无数据~' }} {{ loading === 0 ? '加载中...' : '暂无数据~' }}
</div> </div>
<div v-else class="info-list" @click="handleOpenChart"> <div v-else class="info-list" @click="handleOpenChart">
<gas-info-item <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" />
v-for="item in badGasList"
:key="item.equipmentId"
:gasInfo="item"
/>
</div> </div>
<div class="digital-tunnel"> <div class="digital-tunnel">
<el-dialog <el-dialog :close-on-click-modal="false" v-model="isBadGasVisited" title="有害气体监控数据" width="2175px" :modal="false"
:close-on-click-modal="false" id="badDialog">
v-model="isBadGasVisited"
title="有害气体监控数据"
width="2175px"
:modal="false"
id="badDialog"
>
<div class="left-top-icon"></div> <div class="left-top-icon"></div>
<div class="right-top-icon"></div> <div class="right-top-icon"></div>
<div class="loading-block" v-if="showLoading"> <div class="loading-block" v-if="showLoading">
@@ -37,18 +25,14 @@
<div class="export-btn" @click="handleExport"> <div class="export-btn" @click="handleExport">
导出 导出
</div> </div>
<choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/> <choose-dates v-if="selectTimeButton === 2" ref="chooseDayRef" @select="daySelect" />
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/> <choose-month v-if="selectTimeButton === 1" ref="chooseMonthRef" @select="monthSelect" />
<time-range-btn <time-range-btn :buttonList="timeList" v-model="selectTimeButton" @select="timeSelect" />
:buttonList="timeList"
v-model="selectTimeButton"
@select="timeSelect"
/>
</div> </div>
<div class="change-screen"> <div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen" <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
v-if="isFullScreen"> v-if="isFullScreen">
<FullScreen/> <FullScreen />
</el-icon> </el-icon>
<div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div> <div v-else class="shrink-icon" title="缩小" @click.stop="shrinkScreen"></div>
</div> </div>
@@ -63,12 +47,12 @@
import GasInfoItem from "./childComps/GasInfoItem.vue"; import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"; import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
import {getBadGasEchartsInfo} from "@/api/largeScreen"; import { getBadGasEchartsInfo } from "@/api/largeScreen";
import ChooseDates from "@/components/chooseDates/index.vue" import ChooseDates from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue" import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector"; import elementResizeDetectorMaker from "element-resize-detector";
import {getNowFormatDate} from "@/utils/date.js"; import { getNowFormatDate } from "@/utils/date.js";
import CsvExportor from "csv-exportor"; import CsvExportor from "csv-exportor";
const props = defineProps({ const props = defineProps({
@@ -92,37 +76,37 @@ const clickMonth = ref('')
const clickDay = ref('') const clickDay = ref('')
const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png")); const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
watch( watch(
() => props.list, () => props.list,
(now) => { (now) => {
badGasList.value?.forEach((item) => { badGasList.value?.forEach((item) => {
now.forEach((newItem) => { now.forEach((newItem) => {
if (item.equipmentId === newItem.equipmentId) { if (item.equipmentId === newItem.equipmentId) {
item.value = newItem.value; item.value = newItem.value;
} }
});
}); });
}, });
{deep: true} },
{ deep: true }
); );
watch( watch(
() => props.badGasData, () => props.badGasData,
(now) => { (now) => {
if (now.sensorList === null) { if (now.sensorList === null) {
badGasList.value = [] badGasList.value = []
} else { } else {
getBadGasInfo(now.sensorList); getBadGasInfo(now.sensorList);
} }
}, },
{deep: true} { deep: true }
); );
watch( watch(
() => props.tunnelId, () => props.tunnelId,
(now) => { (now) => {
props.tunnelId = now props.tunnelId = now
}, },
{deep: true} { deep: true }
); );
//导出csv //导出csv
const handleExport = () => { const handleExport = () => {
@@ -135,23 +119,23 @@ const handleExport = () => {
let sulfurDioxideUnit let sulfurDioxideUnit
let hydrogenSulfideUnit let hydrogenSulfideUnit
badGasList.value.forEach((item) => { badGasList.value.forEach((item) => {
if(item.name==='粉尘'){ if (item.name === '粉尘') {
dustUnit=item.unit dustUnit = item.unit
}else if(item.name==='二氧化碳'){ } else if (item.name === '二氧化碳') {
carbonUnit=item.unit carbonUnit = item.unit
}else if(item.name==='一氧化碳'){ } else if (item.name === '一氧化碳') {
carbonMonoxideUnit=item.unit carbonMonoxideUnit = item.unit
}else if(item.name==='二氧化氮'){ } else if (item.name === '二氧化氮') {
nitrogenUnit=item.unit nitrogenUnit = item.unit
}else if(item.name==='一氧化氮'){ } else if (item.name === '一氧化氮') {
sulfurMonoxideUnit=item.unit sulfurMonoxideUnit = item.unit
}else if(item.name==='二氧化硫'){ } else if (item.name === '二氧化硫') {
sulfurDioxideUnit=item.unit sulfurDioxideUnit = item.unit
}else if(item.name==='硫化氢'){ } else if (item.name === '硫化氢') {
hydrogenSulfideUnit=item.unit hydrogenSulfideUnit = item.unit
} }
}); });
const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`,`二氧化氮(${nitrogenUnit})`,`一氧化氮(${sulfurMonoxideUnit})`,`二氧化硫(${sulfurDioxideUnit})`,`硫化氢(${hydrogenSulfideUnit})`]; const header = ['时间', `粉尘(${dustUnit})`, `二氧化碳(${carbonUnit})`, `一氧化碳(${carbonMonoxideUnit})`, `二氧化氮(${nitrogenUnit})`, `一氧化氮(${sulfurMonoxideUnit})`, `二氧化硫(${sulfurDioxideUnit})`, `硫化氢(${hydrogenSulfideUnit})`];
let newArray = [] let newArray = []
chartData.dates.forEach((item, index) => { chartData.dates.forEach((item, index) => {
let obj = { let obj = {
@@ -188,7 +172,7 @@ const handleExport = () => {
time = new Date().getFullYear() + '年' time = new Date().getFullYear() + '年'
} }
const name = '有害气体监控数据-' + time const name = '有害气体监控数据-' + time
CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`); CsvExportor.downloadCsv(newArray, { header }, `${name}.csv`);
} }
//放大弹窗 //放大弹窗
const handleFullScreen = () => { const handleFullScreen = () => {
@@ -224,11 +208,11 @@ const daySelect = (val) => {
if (val) { if (val) {
clickDay.value = val clickDay.value = val
if (isFullScreen.value) { if (isFullScreen.value) {
getBadGasChartInfo('day', '','', val[0], val[1]) getBadGasChartInfo('day', '', '', val[0], val[1])
} else { } else {
getBadGasChartInfo('day', '', true, val[0], val[1]) getBadGasChartInfo('day', '', true, val[0], val[1])
} }
}else { } else {
if (isFullScreen.value) { if (isFullScreen.value) {
getBadGasChartInfo('day', '') getBadGasChartInfo('day', '')
} else { } else {
@@ -267,13 +251,13 @@ const getBadGasInfo = (now) => {
let windPressureArr = []; let windPressureArr = [];
now?.map((item) => { now?.map((item) => {
if ( if (
item.equipmentType === "dust" || item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" || item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" || item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" || item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide" item.equipmentType === "nitrogenDioxide"
) { ) {
windPressureObj = changeData(item); windPressureObj = changeData(item);
windPressureArr.push(windPressureObj); windPressureArr.push(windPressureObj);
@@ -291,7 +275,7 @@ const changeData = (item) => {
unit: item.unit, unit: item.unit,
}; };
}; };
const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => { const getBadGasChartInfo = (type, time = '', flag, startTime, endTime) => {
showLoading.value = true showLoading.value = true
let id = props.tunnelId let id = props.tunnelId
nextTick(() => { nextTick(() => {
@@ -304,7 +288,7 @@ const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
} }
} }
}) })
getBadGasEchartsInfo(id, time, type,startTime,endTime).then(res => { getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) { if (res?.code === 1000) {
showLoading.value = false showLoading.value = false
chartData = res.data chartData = res.data
@@ -343,7 +327,7 @@ const handleOpenChart = () => {
}; };
const getImageUrl = (name) => { const getImageUrl = (name) => {
return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url) return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
.href; .href;
}; };
/** /**
* 初始化echarts实例方法 * 初始化echarts实例方法
@@ -407,15 +391,15 @@ const initChart = (type, values, top) => {
dataZoom: [{ dataZoom: [{
type: 'inside' type: 'inside'
}, },
{ {
type: 'slider', type: 'slider',
top: top, top: top,
height: 100, height: 100,
textStyle: { textStyle: {
fontSize: 45, fontSize: 45,
color: '#fffff' color: '#fffff'
}
} }
}
], ],
//X轴 //X轴
xAxis: { xAxis: {

8
src/components/content/tunnelScene/PreviewScene.vue
View File

@@ -88,10 +88,10 @@ let tunnelAlias = reactive('')
watch( watch(
() => params.largeScreen, () => params.largeScreen,
(now) => { (now) => {
console.log(params.largeScreen); // console.log(params.largeScreen);
params.largeScreen = now; params.largeScreen = now;
fanData = (toRaw(params.largeScreen.value)).frequencyChangerList; fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
console.log(fanData); // console.log(fanData);
}, },
{ deep: true } { deep: true }
); );
@@ -101,7 +101,7 @@ const getTunnel = () => {
getTunnelDetail(params.tunnelId).then((res) => { getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
form.value = res.data; form.value = res.data;
console.log(form.value.tunnelAlias); // console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias tunnelAlias = form.value.tunnelAlias
} }
}); });
@@ -232,7 +232,7 @@ function loadModel(path) {
}, },
(xhr) => { (xhr) => {
//这里可以拿到加载的进度条！！！ //这里可以拿到加载的进度条！！！
console.log(xhr); // console.log(xhr);
console.log((xhr.loaded / xhr.total) * 100 + "% loaded"); console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
}, },
(err) => { (err) => {

14
src/components/content/tunnelScene/preEquComp/preDialog.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div id="edit-dialog"> <div id="edit-dialog">
<div class="distance-back"> <!-- <div class="distance-back"> -->
<!-- <p>当前距离洞口： <!-- <p>当前距离洞口：
<span> <span>
{{ pointDistance_str }} {{ pointDistance_str }}
</span> </span>
</p> --> </p> -->
<img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> <!-- <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> -->
</div> <!-- </div> -->
<!-- <div class="equ-info">当前风压: <!-- <div class="equ-info">当前风压:
<span>{{ p }}Pa</span> <span>{{ p }}Pa</span>
</div> --> </div> -->
@@ -173,8 +173,8 @@ const equipment = {
<style lang="scss" scoped> <style lang="scss" scoped>
#edit-dialog { #edit-dialog {
// width: 540px; // width: 540px;
width: 300px; width: 190px;
height: 200px; height: 150px;
// min-height: 683px; // min-height: 683px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
@@ -235,7 +235,7 @@ const equipment = {
p { p {
width: 190px; width: 190px;
height: 35px; height: 35px;
font-size: 26px; font-size: 18px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #ffffff; color: #ffffff;
line-height: 35px; line-height: 35px;

21
src/components/content/tunnelScene/sceneClass/demo.js
View File

@@ -174,7 +174,7 @@ export default class Demo {
} }
// 模型加载完函数 // 模型加载完函数
_afterLoaded(scene, isedit) { _afterLoaded(scene, isedit) {
console.log(isedit); // console.log(isedit);
// 可以进行选中 // 可以进行选中
this._hoverModel(this.points, isedit); this._hoverModel(this.points, isedit);
// 可以进行点击 // 可以进行点击
@@ -254,9 +254,10 @@ export default class Demo {
this.preHover = intersects[0].object; this.preHover = intersects[0].object;
} else { } else {
if (isedit != true) { if (isedit != true) {
console.log(isedit); // console.log(isedit);
//附着点设置方框
this.setBoxHelper(intersects[0].object);
this._handleLHover(intersects[0].object); this._handleLHover(intersects[0].object);
} }
this.preHover.material.color.set("white"); this.preHover.material.color.set("white");
@@ -267,10 +268,17 @@ export default class Demo {
const tagP = intersects[0].object.getWorldPosition( const tagP = intersects[0].object.getWorldPosition(
new this.THREE.Vector3() new this.THREE.Vector3()
); );
// if (isedit != false) {
this._checkAnimation(tagP); this._checkAnimation(tagP);
// }
} else { } else {
if (!this.preHover) return; if (!this.preHover) return;
//当鼠标移出的时候，将轨道控制器打开，并且将面板关闭
if (isedit != true) {
this.isControlOrbit(true)
this.clearTagsObj(isedit)
}
this.preHover.material.color.set("white"); this.preHover.material.color.set("white");
} }
// this._handleLHover(intersects[0].object); // this._handleLHover(intersects[0].object);
@@ -374,7 +382,8 @@ export default class Demo {
// this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框 // this.tag3CSS2DObj.scale.set(0.001, 0.001, 0.001); //编辑框
// this.tag3CSS2DObj.position.set(1, 0, 1); // this.tag3CSS2DObj.position.set(1, 0, 1);
} }
clearTagsObj() { // 让面板消失的函数
clearTagsObj(isedit) {
if (this.preDBLModel) { if (this.preDBLModel) {
this.preDBLModel.remove(this.tagCSS2DObj); this.preDBLModel.remove(this.tagCSS2DObj);
} }
@@ -383,7 +392,7 @@ export default class Demo {
this.scene.remove(this.tag3CSS2DObj); this.scene.remove(this.tag3CSS2DObj);
this.tag3CSS2DObj.element.style.opacity = "0"; this.tag3CSS2DObj.element.style.opacity = "0";
// 删除标记动画 // 删除标记动画
this.scene.remove(this.group); // this.scene.remove(this.group);
} }
// 附着点选中线宽包围 // 附着点选中线宽包围

2
src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
View File

@@ -1,7 +1,7 @@
export function handleLHover(targetPoint) { export function handleLHover(targetPoint) {
// 保存进入状态 // 保存进入状态
this._saveState(); this._saveState();
this.clearTagsObj(); // this.clearTagsObj();
// 全局临时标记该选中的模型; // 全局临时标记该选中的模型;
this.targetPoint = targetPoint; this.targetPoint = targetPoint;
const worldPosition = new this.THREE.Vector3(); const worldPosition = new this.THREE.Vector3();