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 id="bad-gas-info">
<div class="title">有害气体</div> <div class="title">有害气体</div>
<div class="info-list"> <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> </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="left-icon"></div>
<div class="right-icon"></div> <div class="right-icon"></div>
<div id="container" ref="chart" @click.stop></div> <div id="container" ref="chart" @click.stop></div>
<div class="time-select"> <div class="time-select"></div>
</div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
import GasInfoItem from "./childComps/GasInfoItem.vue"; import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from 'echarts'; import * as echarts from "echarts";
const props = defineProps({ const props = defineProps({
list: Array, list: Array,
badGasData: Array badGasData: Array,
}); });
const isVisited = ref(false); const isVisited = ref(false);
const badGasList = ref([]) const badGasList = ref([]);
const chart = ref(null); const chart = ref(null);
let myEcharts = reactive({}); let myEcharts = reactive({});
const option = reactive({ const option = reactive({
//图例 //图例
legend: { legend: {
left: 0, left: 0,
textStyle:{ textStyle: {
color:'#FFFFFF', color: "#FFFFFF",
fontSize:28 fontSize: 28,
}, },
// itemWidth: 20, // itemWidth: 20,
// itemHeight: 20 // itemHeight: 20
@@ -49,116 +57,131 @@ const option = reactive({
//提示框组件 //提示框组件
tooltip: { tooltip: {
show: true, show: true,
trigger: 'axis' trigger: "axis",
}, },
//X轴 //X轴
xAxis: { xAxis: {
type: 'category', type: "category",
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 24, fontSize: 24,
color:'#D6F1FA' color: "#D6F1FA",
}, },
}, },
}, },
//Y轴 //Y轴
yAxis: { yAxis: {
type: 'value', type: "value",
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 24, fontSize: 24,
color:'#D6F1FA' color: "#D6F1FA",
}, },
}, },
}, },
//配置项 //配置项
series: [ series: [
{ {
name: '二氧化碳', name: "二氧化碳",
data: [5, 9, 10, 7, 8, 15, 12], data: [5, 9, 10, 7, 8, 15, 12],
type: 'line', type: "line",
smooth: true, smooth: true,
symbolSize:24, symbolSize: 24,
lineStyle:{ lineStyle: {
width:5 width: 5,
} },
}, },
{ {
name: '一氧化碳', name: "一氧化碳",
data: [8, 15, 5, 9, 10, 7, 12], data: [8, 15, 5, 9, 10, 7, 12],
type: 'line', type: "line",
smooth: true, smooth: true,
symbolSize:24, symbolSize: 24,
lineStyle:{ lineStyle: {
width:5 width: 5,
} },
}, },
{ {
name: '二氧化氮', name: "二氧化氮",
data: [5, 15, 1, 9, 10, 7, 8], data: [5, 15, 1, 9, 10, 7, 8],
type: 'line', type: "line",
smooth: true, smooth: true,
symbolSize:24, symbolSize: 24,
lineStyle:{ lineStyle: {
width:5 width: 5,
} },
}, },
{ {
name: '二氧化硫', name: "二氧化硫",
data: [8, 15, 12, 5, 9, 2, 7], data: [8, 15, 12, 5, 9, 2, 7],
type: 'line', type: "line",
smooth: true, smooth: true,
symbolSize:24, symbolSize: 24,
lineStyle:{ lineStyle: {
width:5 width: 5,
} },
}, },
{ {
name: '硫化氢', name: "硫化氢",
data: [2, 9, 10, 15, 12, 7, 8,], data: [2, 9, 10, 15, 12, 7, 8],
type: 'line', type: "line",
smooth: true, smooth: true,
symbolSize:24, symbolSize: 24,
lineStyle:{ lineStyle: {
width:5 width: 5,
} },
}, },
] ],
}) });
watch(() => props.list, (now) => { watch(
badGasList.value.forEach(item => { () => props.list,
now.forEach(newItem => { (now) => {
if (item.equipmentId === newItem.equipmentId) { badGasList.value.forEach((item) => {
item.value = newItem.value now.forEach((newItem) => {
} if (item.equipmentId === newItem.equipmentId) {
}) item.value = newItem.value;
}) }
}, {deep: true}); });
});
},
{ deep: true }
);
watch(() => props.badGasData, (now) => { watch(
getBadGasInfo(now.sensorList) () => props.badGasData,
}, {deep: true}); (now) => {
getBadGasInfo(now.sensorList);
},
{ deep: true }
);
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
initChart() initChart();
}) });
}) });
const getBadGasInfo = (now) => { const getBadGasInfo = (now) => {
let windPressureObj = {} let windPressureObj = {};
let windPressureArr = [] let windPressureArr = [];
now.map(item => { now.map((item) => {
if (item.equipmentType === "carbonDioxide" || item.equipmentType === "carbonMonoxide" || item.equipmentType === "hydrogenSulfide" || item.equipmentType === "sulfurDioxide" || item.equipmentType === "sulfurMonoxide" || item.equipmentType === "nitrogenDioxide") { if (
windPressureObj = changeData(item) item.equipmentType === "carbonDioxide" ||
windPressureArr.push(windPressureObj) 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) => { const changeData = (item) => {
return { return {
equipmentId: item.equipmentId, equipmentId: item.equipmentId,
@@ -166,14 +189,14 @@ const changeData = (item) => {
max: 120, max: 120,
value: item.value, value: item.value,
point: item.valueThreshold, point: item.valueThreshold,
unit: item.unit unit: item.unit,
} };
} };
const handleOpenChart = () => { const handleOpenChart = () => {
console.log('有害气体弹窗') console.log("有害气体弹窗");
isVisited.value = true isVisited.value = true;
initChart() initChart();
} };
/** /**
* 初始化echarts实例方法 * 初始化echarts实例方法
*/ */
@@ -185,9 +208,8 @@ const initChart = () => {
//图表大小自适应窗口大小变化 //图表大小自适应窗口大小变化
window.onresize = () => { window.onresize = () => {
myEcharts.resize(); myEcharts.resize();
} };
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -199,7 +221,7 @@ const initChart = () => {
} }
:deep(.el-dialog) { :deep(.el-dialog) {
border: 2px solid #0F82AF; border: 2px solid #0f82af;
background: rgba(6, 34, 71, 0.78); background: rgba(6, 34, 71, 0.78);
border-radius: 20px; border-radius: 20px;
padding: 47px 30px; padding: 47px 30px;
@@ -212,11 +234,11 @@ const initChart = () => {
.el-dialog__title { .el-dialog__title {
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
color: #D6F1FA; color: #d6f1fa;
} }
.el-dialog__close { .el-dialog__close {
color: #05FEFF; color: #05feff;
font-size: 35px; font-size: 35px;
} }
} }
@@ -249,16 +271,16 @@ const initChart = () => {
background-image: url(@/assets/images/badGasInfo/sp_jz.png); background-image: url(@/assets/images/badGasInfo/sp_jz.png);
transform: rotate(90deg); transform: rotate(90deg);
} }
.time-select{ .time-select {
position: absolute; position: absolute;
top: 47px; top: 47px;
right: 119px; right: 119px;
//display: flex; //display: flex;
width: 204px; width: 204px;
height: 68px; height: 68px;
border-radius: 10px; border-radius: 10px;
border: 2px solid #0F82AF; border: 2px solid #0f82af;
} }
.title { .title {
width: 128px; width: 128px;
height: 45px; 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> </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)) { if (child.isMesh && /^point+/.test(child.name)) {
this.points.push(child); this.points.push(child);
console.log(child.name);
// 改变为基础材质 // 改变为基础材质
child.material = new this.THREE.MeshBasicMaterial(); child.material = new this.THREE.MeshBasicMaterial();
child.scale.set(0.01, 0.01, 0.01); child.scale.set(0.01, 0.01, 0.01);
@@ -316,7 +317,7 @@ export default class Demo {
this.tag3CSS2DObj.element.style.display = "none"; this.tag3CSS2DObj.element.style.display = "none";
this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1); this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
this.tag2CSS2DObj.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.tag3CSS2DObj.position.set(10, 0, 10);
this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5); 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("结束");
// console.log(this.orbitControls.object.position); // 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 worldPosition.z
); );
this.isControlOrbit(false); this.isControlOrbit(false);
this.position = worldPosition;
this.tag3CSS2DObj.translateX(-3); if (/tr$/.test(targetPoint.name)) {
this.tag3CSS2DObj.translateZ(10); 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); this.scene.add(this.tag3CSS2DObj);
intoAnimation.call(this);
// 返回给编辑组件的回调函数 // 返回给编辑组件的回调函数
this.editDev(targetPoint); this.editDev(targetPoint);
} }
function intoAnimation() { function intoAnimation(x = -10, y = 3, z = -12) {
const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3()); const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
const positionOBj = this.camera.position; const positionOBj = this.camera.position;
const start = this.orbitControls.target; const start = this.orbitControls.target;
@@ -38,15 +61,21 @@ function intoAnimation() {
xTarget: start.x, xTarget: start.x,
yTarget: start.y, yTarget: start.y,
zTarget: start.z, zTarget: start.z,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 0,
}); });
this.intoPointAnimation.to( this.intoPointAnimation.to(
{ {
x: worldP.x - 10, x: worldP.x + x,
y: worldP.y + 3, y: worldP.y + y,
z: worldP.z - 12, z: worldP.z + z,
xTarget: worldP.x, xTarget: -5,
yTarget: worldP.y, yTarget: 8.814,
zTarget: worldP.z, zTarget: worldP.z + 30,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 120,
}, },
600 600
); );
@@ -54,6 +83,7 @@ function intoAnimation() {
this.intoPointAnimation.onUpdate((obj) => { this.intoPointAnimation.onUpdate((obj) => {
this.camera.position.set(obj.x, obj.y, obj.z); this.camera.position.set(obj.x, obj.y, obj.z);
this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget); 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); this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
}); });
} }