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:
trp
2023-12-15 02:43:19 +08:00
parent 1884ad3db6
commit 02d9ba3ef1
5 changed files with 201 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,38 +2,46 @@
<div id="bad-gas-info">
<div class="title">有害气体</div>
<div class="info-list">
<gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
<gas-info-item
v-for="item in badGasList"
:key="item.equipmentId"
:gasInfo="item"
@click="handleOpenChart"
/>
</div>
<el-dialog v-model="isVisited" title="有害气体监控数据" width="1996px" :modal="false">
<el-dialog
v-model="isVisited"
title="有害气体监控数据"
width="1996px"
:modal="false"
>
<div class="left-icon"></div>
<div class="right-icon"></div>
<div id="container" ref="chart" @click.stop></div>
<div class="time-select">
</div>
<div class="time-select"></div>
</el-dialog>
</div>
</template>
<script setup>
import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from 'echarts';
import * as echarts from "echarts";
const props = defineProps({
list: Array,
badGasData: Array
badGasData: Array,
});
const isVisited = ref(false);
const badGasList = ref([])
const badGasList = ref([]);
const chart = ref(null);
let myEcharts = reactive({});
const option = reactive({
//图例
legend: {
left: 0,
textStyle:{
color:'#FFFFFF',
fontSize:28
textStyle: {
color: "#FFFFFF",
fontSize: 28,
},
// itemWidth: 20,
// itemHeight: 20
@@ -49,116 +57,131 @@ const option = reactive({
//提示框组件
tooltip: {
show: true,
trigger: 'axis'
trigger: "axis",
},
//X轴
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
textStyle: {
fontSize: 24,
color:'#D6F1FA'
color: "#D6F1FA",
},
},
},
//Y轴
yAxis: {
type: 'value',
type: "value",
axisLabel: {
textStyle: {
fontSize: 24,
color:'#D6F1FA'
color: "#D6F1FA",
},
},
},
//配置项
series: [
{
name: '二氧化碳',
name: "二氧化碳",
data: [5, 9, 10, 7, 8, 15, 12],
type: 'line',
type: "line",
smooth: true,
symbolSize:24,
lineStyle:{
width:5
}
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: '一氧化碳',
name: "一氧化碳",
data: [8, 15, 5, 9, 10, 7, 12],
type: 'line',
type: "line",
smooth: true,
symbolSize:24,
lineStyle:{
width:5
}
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: '二氧化氮',
name: "二氧化氮",
data: [5, 15, 1, 9, 10, 7, 8],
type: 'line',
type: "line",
smooth: true,
symbolSize:24,
lineStyle:{
width:5
}
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: '二氧化硫',
name: "二氧化硫",
data: [8, 15, 12, 5, 9, 2, 7],
type: 'line',
type: "line",
smooth: true,
symbolSize:24,
lineStyle:{
width:5
}
symbolSize: 24,
lineStyle: {
width: 5,
},
},
{
name: '硫化氢',
data: [2, 9, 10, 15, 12, 7, 8,],
type: 'line',
name: "硫化氢",
data: [2, 9, 10, 15, 12, 7, 8],
type: "line",
smooth: true,
symbolSize:24,
lineStyle:{
width:5
}
symbolSize: 24,
lineStyle: {
width: 5,
},
},
]
})
],
});
watch(() => props.list, (now) => {
badGasList.value.forEach(item => {
now.forEach(newItem => {
if (item.equipmentId === newItem.equipmentId) {
item.value = newItem.value
}
})
})
}, {deep: true});
watch(
() => props.list,
(now) => {
badGasList.value.forEach((item) => {
now.forEach((newItem) => {
if (item.equipmentId === newItem.equipmentId) {
item.value = newItem.value;
}
});
});
},
{ deep: true }
);
watch(() => props.badGasData, (now) => {
getBadGasInfo(now.sensorList)
}, {deep: true});
watch(
() => props.badGasData,
(now) => {
getBadGasInfo(now.sensorList);
},
{ deep: true }
);
onMounted(() => {
nextTick(() => {
initChart()
})
})
initChart();
});
});
const getBadGasInfo = (now) => {
let windPressureObj = {}
let windPressureArr = []
now.map(item => {
if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") {
windPressureObj = changeData(item)
windPressureArr.push(windPressureObj)
let windPressureObj = {};
let windPressureArr = [];
now.map((item) => {
if (
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
) {
windPressureObj = changeData(item);
windPressureArr.push(windPressureObj);
}
})
badGasList.value = windPressureArr
}
});
badGasList.value = windPressureArr;
};
const changeData = (item) => {
return {
equipmentId: item.equipmentId,
@@ -166,14 +189,14 @@ const changeData = (item) => {
max: 120,
value: item.value,
point: item.valueThreshold,
unit: item.unit
}
}
unit: item.unit,
};
};
const handleOpenChart = () => {
console.log('有害气体弹窗')
isVisited.value = true
initChart()
}
console.log("有害气体弹窗");
isVisited.value = true;
initChart();
};
/**
* 初始化echarts实例方法
*/
@@ -185,9 +208,8 @@ const initChart = () => {
//图表大小自适应窗口大小变化
window.onresize = () => {
myEcharts.resize();
}
}
};
};
</script>
<style lang="scss" scoped>
@@ -199,7 +221,7 @@ const initChart = () => {
}
:deep(.el-dialog) {
border: 2px solid #0F82AF;
border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78);
border-radius: 20px;
padding: 47px 30px;
@@ -212,11 +234,11 @@ const initChart = () => {
.el-dialog__title {
font-size: 32px;
font-weight: bold;
color: #D6F1FA;
color: #d6f1fa;
}
.el-dialog__close {
color: #05FEFF;
color: #05feff;
font-size: 35px;
}
}
@@ -249,16 +271,16 @@ const initChart = () => {
background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(90deg);
}
.time-select{
position: absolute;
top: 47px;
right: 119px;
//display: flex;
width: 204px;
height: 68px;
border-radius: 10px;
border: 2px solid #0F82AF;
}
.time-select {
position: absolute;
top: 47px;
right: 119px;
//display: flex;
width: 204px;
height: 68px;
border-radius: 10px;
border: 2px solid #0f82af;
}
.title {
width: 128px;
height: 45px;

3
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

@@ -284,4 +284,7 @@ const equipment = {
}
}
}
:deep(.el-select-dropdown__wrap) {
background: greenyellow !important;
}
</style>

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

@@ -164,6 +164,7 @@ export default class Demo {
// 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
if (child.isMesh && /^point+/.test(child.name)) {
this.points.push(child);
console.log(child.name);
// 改变为基础材质
child.material = new this.THREE.MeshBasicMaterial();
child.scale.set(0.01, 0.01, 0.01);
@@ -316,7 +317,7 @@ export default class Demo {
this.tag3CSS2DObj.element.style.display = "none";
this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
this.tag3CSS2DObj.scale.set(0.025, 0.025, 0.025); //编辑框
this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
this.tag3CSS2DObj.position.set(10, 0, 10);
this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
}

36
src/components/content/tunnelScene/sceneClass/handleOrbitControlsChange/index.js
View File

@@ -6,4 +6,40 @@ export function handleEndChange(e) {
// 围绕点到照相机的位置
// console.log("结束");
// console.log(this.orbitControls.object.position);
// console.log(this.camera.position, this.position);
// console.log(
// this.camera.position.x - this.position.x,
// this.camera.position.y - this.position.y,
// this.camera.position.z - this.position.z
// );
// const cx =
// (this.scene
// .getObjectByName("point_001_br")
// .getWorldPosition(new this.THREE.Vector3()).x +
// this.scene
// .getObjectByName("point_001_bl")
// .getWorldPosition(new this.THREE.Vector3()).x) /
// 2;
// const cy =
// (this.scene
// .getObjectByName("point_001_br")
// .getWorldPosition(new this.THREE.Vector3()).y +
// this.scene
// .getObjectByName("point_001_bl")
// .getWorldPosition(new this.THREE.Vector3()).y) /
// 2;
// const cz =
// (this.scene
// .getObjectByName("point_001_br")
// .getWorldPosition(new this.THREE.Vector3()).z +
// this.scene
// .getObjectByName("point_001_bl")
// .getWorldPosition(new this.THREE.Vector3()).z) /
// 2;
// console.log(cx, cy, cz);
// console.log(
// this.scene
// .getObjectByName("point_001_tr")
// .getWorldPosition(new this.THREE.Vector3())
// );
}

52
src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
View File

@@ -17,17 +17,40 @@ export function handleRClick(targetPoint) {
worldPosition.z
);
this.isControlOrbit(false);
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.position = worldPosition;
if (/tr$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this, 4.31, -2.55, -10);
} else if (/tl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-5);
intoAnimation.call(this, -4.31, -2.55, -10);
} else if (/tc$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(0);
this.tag3CSS2DObj.translateZ(10);
this.tag3CSS2DObj.translateY(-8);
intoAnimation.call(this, 0, -2.55, -10);
} else if (/br$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(4);
this.tag3CSS2DObj.translateZ(6);
this.tag3CSS2DObj.translateY(5);
intoAnimation.call(this, 4.31, 5, -11);
} else if (/bl$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateX(-4);
this.tag3CSS2DObj.translateZ(6);
this.tag3CSS2DObj.translateY(5);
intoAnimation.call(this, -4.31, 5, -11);
}
this.scene.add(this.tag3CSS2DObj);
intoAnimation.call(this);
// 返回给编辑组件的回调函数
this.editDev(targetPoint);
}
function intoAnimation() {
function intoAnimation(x = -10, y = 3, z = -12) {
const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
const positionOBj = this.camera.position;
const start = this.orbitControls.target;
@@ -38,15 +61,21 @@ function intoAnimation() {
xTarget: start.x,
yTarget: start.y,
zTarget: start.z,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 0,
});
this.intoPointAnimation.to(
{
x: worldP.x - 10,
y: worldP.y + 3,
z: worldP.z - 12,
xTarget: worldP.x,
yTarget: worldP.y,
zTarget: worldP.z,
x: worldP.x + x,
y: worldP.y + y,
z: worldP.z + z,
xTarget: -5,
yTarget: 8.814,
zTarget: worldP.z + 30,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 120,
},
600
);
@@ -54,6 +83,7 @@ function intoAnimation() {
this.intoPointAnimation.onUpdate((obj) => {
this.camera.position.set(obj.x, obj.y, obj.z);
this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
// this.orbitControls.target.set(obj.x, obj.y, -obj.z);
this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
});
}