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

Merge pull request 'dengjie' (#404) from dengjie into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/404
This commit is contained in:
odjbin
2025-01-03 13:16:50 +00:00
parent c3109bbdad 56bdf6ee1e
commit de8820bf11
29 changed files with 2385 additions and 913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -3,5 +3,5 @@
VITE_BASE_URL='/api'
# VITE_BASE_URL='http://192.168.101.7:8000'
#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
VITE_BASE_WSURL='/websocket'

2
.env.production
View File

@@ -4,5 +4,5 @@ VITE_TITLE='fateverse'
VITE_BASE_URL='/api'
#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
VITE_BASE_WSURL='/websocket'

2
package.json
View File

@@ -10,7 +10,7 @@
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"autofit.js": "^3.0.4",
"autofit.js": "^3.2.1",
"axios": "^1.4.0",
"csv-exportor": "^1.0.2",
"echarts": "^5.4.2",

58
src/api/largeScreen.js
View File

@@ -38,7 +38,7 @@ export const getEchartsInfo = (id,time,type,startTime,endTime) => {
// 有害气体echarts数据
export const getBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
return request({
url: '/tunnel/large/screen/echarts/gas/sensor/',
url: '/tunnel/large/screen/echarts/gas/sensor',
method: 'get',
params: {
id: id,
@@ -128,3 +128,59 @@ export const deleteAlarmSate = (tunnelAlarmIdList) => {
method: 'delete'
})
}
// 传感器模拟echarts数据
export const getSimulationEchartsInfo = (id,time,type,startTime,endTime) => {
return request({
url: '/tunnel/simulation/large/screen/echarts/sensor',
method: 'get',
params: {
id: id,
time: time,
type: type,
startTime:startTime,
endTime:endTime,
}
})
}
// 有害气体模拟echarts数据
export const getSimulationBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
return request({
url: '/tunnel/simulation/large/screen/echarts/gas/sensor',
method: 'get',
params: {
id: id,
time: time,
type: type,
startTime:startTime,
endTime:endTime,
}
})
}
//开始 模拟
export const startSimulation = (projectId) => {
return request({
url: `/tunnel/simulation/start/${projectId}`,
method: 'get'
})
}
//模拟状态
export const simulationState = (projectId) => {
return request({
url: `/tunnel/simulation/state/${projectId}`,
method: 'get'
})
}
// 结束模拟
export const endSimulation = (projectId) => {
return request({
url: `/tunnel/simulation/stop/${projectId}`,
method: 'get'
})
}
//模拟爆破
export const blastingSimulation = (projectId,level) => {
return request({
url: `/tunnel/simulation/blasting/${projectId}/${level}`,
method: 'get'
})
}

51
src/api/tunnelManage.js
View File

@@ -84,3 +84,54 @@ export const getSerialNumberOnUse = (tunnelId) => {
}
})
}
//模拟隧道
export const getSimulateTunnelList = (params) => {
return request({
url: '/tunnel/simulate',
method: 'get',
params
})
}
export const getSimulateTunnelDetail = (projectId) => {
return request({
url: `/tunnel/simulate/${projectId}`,
method: 'get'
})
}
export const addSimulateTunnel = (data) => {
return request({
url: '/tunnel/simulate',
method: 'post',
data
})
}
export const editSimulateTunnel = (data) => {
return request({
url: '/tunnel/simulate/edit',
method: 'post',
data
})
}
export const editSimulateEquipment = (data) => {
return request({
url: '/tunnel/simulate',
method: 'put',
data
})
}
export const deleteSimulateTunnel = (projectIdList) => {
return request({
url: `/tunnel/simulate/${projectIdList}`,
method: 'delete'
})
}
export const getScreenSimulateTunnel = (projectId) => {
return request({
url: `/tunnel/simulate/equipment/${projectId}`,
method: 'get'
})
}

86
src/components/content/airInfo/AirInfo.vue
View File

@@ -36,10 +36,10 @@
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-day v-if="isSimulate?selectTimeButton === 0:selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
:buttonList="timeList"
:buttonList="isSimulate?timeSimulateList:timeList"
v-model="selectTimeButton"
@select="timeSelect"
/>
@@ -62,7 +62,7 @@
import ItemInfo from "./childComps/ItemInfo.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts';
import {getEchartsInfo} from "@/api/largeScreen";
import {getEchartsInfo, getSimulationEchartsInfo} from "@/api/largeScreen";
import ChooseDay from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector";
@@ -74,13 +74,15 @@ let myEcharts = reactive({});
const props = defineProps({
list: Array,
windSpeed: Array,
airData: Array
airData: Array,
isSimulate: Boolean,
});
const isFullScreen = ref(false);
let dataZoomTop = reactive('87%')
let chartData = reactive([])
const chooseDayRef = ref();
const chooseMonthRef = ref();
const itemInfo = ref();
const windSpeed = ref(0)
const windSpeedUnit = ref('m/s')
const windDirection = ref(null)
@@ -94,11 +96,12 @@ const dialogTitle = ref('风速')
const openDialogId = ref(0)
const airList = ref([])
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const timeSimulateList = ref(["日"]);
const isWindSpeedVisited = ref(false);
const showSpeedLoading = ref(false)
const clickMonth = ref('')
const clickDay = ref('')
const selectTimeButton = ref(props.isSimulate?0:2);
watch(() => props.windSpeed, (now) => {
now.forEach(newItem => {
windSpeed.value =newItem.value
@@ -107,7 +110,7 @@ watch(() => props.windSpeed, (now) => {
watch(() => props.list, (now) => {
airList.value?.forEach(item => {
now.forEach(newItem => {
if (newItem.equipmentId === 11) {//风向传感器
if (newItem.equipmentType === "windDirection") {//风向传感器
windDirection.value = newItem.value
}
if (item.equipmentId === newItem.equipmentId) {
@@ -248,29 +251,56 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag, startTime, end
}
}
})
getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showSpeedLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('containerWind')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('airDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data.values, dataZoomTop)
if(props.isSimulate){
getSimulationEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showSpeedLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('containerWind')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('airDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data.values, dataZoomTop)
}
} else {
shrinkScreen()
}
} else {
shrinkScreen()
}
})
} else {
loadingText.value = res.msg
}
})
})
} else {
loadingText.value = res.msg
}
})
}else{
getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showSpeedLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('containerWind')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('airDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data.values, dataZoomTop)
}
} else {
shrinkScreen()
}
})
} else {
loadingText.value = res.msg
}
})
}
nextTick(() => {
loadingText.value = '加载中...'
})

21
src/components/content/airInfo/childComps/ItemInfo.vue
View File

@@ -24,9 +24,9 @@ const length = ref(null);
const value = ref(null);
const point = ref(null);
const isWaring = ref();
// watch(() => params.wp.value, () => {
// setValue();
// });
watch(() => params.wp.value, () => {
setValue(params.wp.value);
});
onMounted(() => {
if (params.wp !== undefined) {
setValue();
@@ -36,8 +36,14 @@ onMounted(() => {
const getImageUrl = (name) => {
return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
}
const setValue = () => {
let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
const setValue = (realValue) => {
let newValue=''
if(realValue){
newValue=realValue
}else{
newValue=params.wp.value
}
let width = (newValue * length.value.offsetWidth) / params.wp.max;
value.value.style.width = `${width}px`;
let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
point.value.style.left = `${flag}px`;
@@ -51,7 +57,7 @@ const setValue = () => {
value.value.style.background =
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
}
isWaring.value = params.wp.value < params.wp.point;
isWaring.value = newValue < params.wp.point;
}else {
if (width >= flag) {
value.value.style.background =
@@ -60,14 +66,13 @@ const setValue = () => {
value.value.style.background =
"linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
}
isWaring.value = params.wp.value >= params.wp.point;
isWaring.value = newValue >= params.wp.point;
}
}
// let isWaring = computed(() => {
// return params.wp.value >= params.wp.point;
// });
</script>
<style lang="scss" scoped>

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

@@ -25,9 +25,9 @@
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-dates v-if="selectTimeButton === 2" ref="chooseDayRef" @select="daySelect" />
<choose-dates v-if="isSimulate?selectTimeButton === 0:selectTimeButton===2" ref="chooseDayRef" @select="daySelect" />
<choose-month v-if="selectTimeButton === 1" ref="chooseMonthRef" @select="monthSelect" />
<time-range-btn :buttonList="timeList" v-model="selectTimeButton" @select="timeSelect" />
<time-range-btn :buttonList="isSimulate?timeSimulateList:timeList" v-model="selectTimeButton" @select="timeSelect" />
</div>
<div class="change-screen">
<el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
@@ -47,7 +47,7 @@
import GasInfoItem from "./childComps/GasInfoItem.vue";
import * as echarts from "echarts";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
import { getBadGasEchartsInfo } from "@/api/largeScreen";
import {getBadGasEchartsInfo, getSimulationBadGasEchartsInfo} from "@/api/largeScreen";
import ChooseDates from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector";
@@ -60,11 +60,13 @@ const props = defineProps({
badGasData: Array,
tunnelId: Number,
loading: Number,
isSimulate: Boolean,
});
const chooseDayRef = ref();
const chooseMonthRef = ref();
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const timeSimulateList = ref(["日"]);
const selectTimeButton = ref(props.isSimulate?0:2);
const isBadGasVisited = ref(false);
const showLoading = ref(false)
const isFullScreen = ref(false);
@@ -75,6 +77,7 @@ let myEcharts = reactive({});
const clickMonth = ref('')
const clickDay = ref('')
const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
watch(
() => props.list,
(now) => {
@@ -288,27 +291,52 @@ const getBadGasChartInfo = (type, time = '', flag, startTime, endTime) => {
}
}
})
getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('containerBad')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('badDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data, dataZoomTop)
if(props.isSimulate){
getSimulationBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('containerBad')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('badDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data, dataZoomTop)
}
} else {
shrinkScreen()
}
} else {
shrinkScreen()
}
})
}
})
})
}
})
}else{
getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('containerBad')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('badDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data, dataZoomTop)
}
} else {
shrinkScreen()
}
})
}
})
}
}
const handleOpenChart = () => {
clickMonth.value = ''

9
src/components/content/fanInfo/FanInfo.vue
View File

@@ -12,7 +12,7 @@
<div class="echart"></div>
<div class="fan-name">{{ changeNum(item) }}号风机</div>
<div class="option-nav">
<div class="state">
<div class="state" v-if="!isSimulate">
<!-- :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
<div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}">
<div class="state-icon"></div>
@@ -36,7 +36,7 @@
</div>
</div>
<div class="power">
<div class="check-box">
<div class="check-box" v-if="!isSimulate">
<!-- <div style="display: flex;">-->
<!-- <el-radio :label="true" @click="changeModel(item)">自动</el-radio>-->
@@ -46,7 +46,7 @@
<el-radio :label="false" @click.prevent ="changeModel(item,false)">手动</el-radio>
</el-radio-group>
</div>
<div class="edit-power" title="输入完成后, 请回车进行修改">
<div class="edit-power" title="输入完成后, 请回车进行修改" v-if="!isSimulate">
<span style="color: white">给定频率</span>
<!-- <span class="units"-->
<!-- ><input-->
@@ -68,7 +68,7 @@
</div>
</div>
</div>
<div class="current" @click="handleOpenChart(item)">
<div class="current" @click="handleOpenChart(item)" v-if="!isSimulate">
<fan-info-item :wp="transducerData[index]"/>
</div>
<div class="line" v-if="index!=socketData.length-1"></div>
@@ -152,6 +152,7 @@ const props = defineProps({
fanData: Array,
transducerData: Array,
loading: Number,
isSimulate: Boolean,
});
const chooseDayRef = ref();
const chooseMonthRef = ref();

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

@@ -44,10 +44,8 @@ import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import PreDialog from "./preEquComp/preDialog.vue";
// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
@@ -126,7 +124,6 @@ const getDevDetail = async (devId) => {
};
// console.log(load);
let isedit = ref(params.isedit);
let fanData;
let tunnelAlias = reactive("");
@@ -210,7 +207,6 @@ const getTunnel = () => {
getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
// console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias;
}
});
@@ -315,7 +311,7 @@ async function handleMounted() {
demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf"
"/tunnelModel/chanel-have-wall-now-use.gltf",
);
demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN);
@@ -346,6 +342,7 @@ async function handleMounted() {
// console.log(modelList.value);
// console.log("init", params.tunnelId);
demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
console.log("prew",modelList.value,fanData)
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));

477
src/components/content/tunnelScene/TunnelSceneSimulate-back.vue Normal file
View File

@@ -0,0 +1,477 @@
<template>
<div id="scene">
<div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 -->
<!-- <edit-dialog-->
<!-- ref="edit"-->
<!-- @addEquipment="handleAddEqu"-->
<!-- @removeEquipment="handleRemoveEqu"-->
<!-- @cancel="handleCancel"-->
<!-- :hasDev="hasDevice"-->
<!-- :pointNum="pointNum"-->
<!-- :tunnelId="params.tunnelId"-->
<!-- :position="targetP?.name"-->
<!-- :hasEquipment="hasDevice"-->
<!-- :pointGap="pointGap"-->
<!-- :form="params.form"-->
<!-- />-->
<!-- <el-dialog-->
<!-- v-model="centerDialogVisible"-->
<!-- width="30%"-->
<!-- destroy-on-close-->
<!-- center-->
<!-- :show-close="false"-->
<!-- style="-->
<!-- margin: 20% auto;-->
<!-- width: 569px;-->
<!-- height: 330px;-->
<!-- background: rgba(7, 35, 72, 0.79);-->
<!-- border-radius: 20px;-->
<!-- border: 2px solid #0f82af;-->
<!-- "-->
<!-- >-->
<!-- <p id="remove-title">是否确定删除该设备</p>-->
<!-- <div class="btn">-->
<!-- <button @click="centerDialogVisible = false">取消</button>-->
<!-- <button @click="handleConfirmAddEqu">确定</button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</div>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import EditDialog from "./editEquComp/editDialog.vue";
// 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
CSS3DRenderer,
CSS3DSprite,
} from "three/addons/renderers/CSS3DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import {
onMounted,
reactive,
ref,
toRaw,
watch,
defineProps,
defineExpose,
} from "vue";
import { ElMessage } from "element-plus";
import { useModelSceneStore } from "@/store/modelSceneStore";
import { getScreenSimulateTunnel } from "@/api/tunnelManage";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
let modelList = ref(null);
let demo; //定义demo对象
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore();
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"deviceData",
"devRealtimeData",
"simulateData",
"tunnelAlias",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId);
watch(
() => params.tunnelLength,
(now) => {
params.tunnelLength = now;
// console.log(params.tunnelLength);
pointGap = now / 20;
// console.log(params.form.tunnelName);
},
{ deep: true }
);
let pointGap = reactive(params.tunnelLength);
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el];//edit.value.$el
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
// "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
demo.isedit =false;
const loaded = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf",
true,
);
demo.addOrbitControls(OrbitControls, true);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
demo.setDistance(10);
// lClickCallback(demo); //绑定左键回调
// rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
// 初始化设备模型
try {
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
demo.initDevicesModel(map);
// 初始化渲染设备
// modelList.value = await modelStore.initModelData(
// params.tunnelId,
// params.form
// );
modelList.value = [
{
typeKey: "frequency",
position: "point_001_tr",
threshold: "",
equipmentId: 3048,
equipmentName: "温度传感器",
equipmentType: "sensor",
data: 100, //实时数据
unit: "℃", //单位
},
{
typeKey: "temperature",
position: "point_020_tr",
threshold: "",
equipmentId: 10,
equipmentName: "1度传感器",
equipmentType: "sensor",
data: 10, //实时参数
unit: "%", //单位
},
];
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
data:'10',
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
console.log('modeData',modeData)
demo.editTunnelInit(modeData);
// 初始化标牌信息
demo.SignsInf(params.tunnelAlias, String(params.tunnelLength));
} catch (err) {}
}
// 从新渲染数据
async function rerender() {
try {
// 初始化仿真參數
const { data } = await getScreenSimulateTunnel(params.tunnelId);
console.log(data);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData);
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (error) {
ElMessage({
message: "获取仿真数据异常！",
type: "warning",
});
}
}
// 随机生成1-20的随机数
function randomNum(max = 20) {
const nums = new Set();
while (nums.size < max) {
nums.add(Math.floor(Math.random() * max + 1).toString());
}
return [...nums];
}
//随机定位
function randomPosition(simulateData) {
const mid = Math.floor(simulateData.length / 2);
const lrIndex = Math.floor(Math.random() * 2);
const lr_position = ["tl", "tr"];
const leftPosition = randomNum();
const rightPosition = randomNum();
const leftData = simulateData.slice(0, mid).map((item, index) => ({
...item,
position: `point_0${leftPosition[index].padStart(2, 0)}_${
lr_position[lrIndex]
}`,
}));
const rightData = simulateData
.slice(mid, simulateData.length)
.map((item, index) => ({
...item,
position: `point_0${rightPosition[index].padStart(2, 0)}_${
lr_position[1 - lrIndex]
}`,
}));
return [...leftData, ...rightData];
}
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {},
(err) => {
reject(err);
}
);
});
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
name: "无",
state: "无",
position: "无",
});
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
) {
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
}
//左键/双击左键回调函数
function lClickCallback(demo) {
// console.log('左键点击查看信息');
//demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
editDevInfo(targetPoint.info);
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
}
let pointNum = ref(0);
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
) - 1
);
if (!targetPoint.info) return;
editDevInfo(targetPoint.info);
}
demo.addFunction("editDev", editDev);
}
// function streetSigns(){
// }
// 场景添加设备
function handleAddEqu(formInfo) {
demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击
// for (let line = 1; line <= 20; line++) {
// if (line < 10) {
// let wall = 'wall_' + '0' + line
// this.scene.getObjectByName(wall).layers.set(0)
// } else if (line >= 10) {
// let wall = 'wall_' + line
// this.scene.getObjectByName(wall).layers.set(0)
// }
// }
}
const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
if (!targetP.value.hasDevice) {
ElMessage({
message: "该点位不存在设备！",
type: "warning",
});
return;
}
centerDialogVisible.value = true;
}
// 对话框确认删除
function handleConfirmAddEqu() {
console.log("target:", targetP.value.info);
modelStore
.deleteEquipment(targetP.value.info.equipmentId, pointGap)
.then((res) => {
demo.removeEquipment(targetP.value);
centerDialogVisible.value = false;
handleCancel();
ElMessage({
message: "删除成功！",
type: "success",
});
})
.catch((res) => {
console.log(res);
ElMessage({
message: "删除失败！",
type: "warning",
});
});
}
// 处理取消关闭编辑框事件
function handleCancel() {
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
}
//现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
//我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
//因为没获取到接口，我们先写死！！！
//需要参考接口的数据结构！！！，主要是传入函数的参数应该是什么结构？？？
const ThreeConfig = {
code: 0,
data: {
tunnelThreeConfig: [
{
equipmentId: "fan_01", //传感器id
equipmentName: "01", //设备名称
pointName: "point_005_tl", //附着点名称(定位)
equipmentType: "fan", //设备类型(类型可根据后端
equipmentValue: 23, //设备存的值
},
{
equipmentId: "sensors_01", //传感器id
equipmentName: "01", //设备名称
pointName: "point_009_bl", //附着点名称(定位)
equipmentType: "sensors", //设备类型(类型可根据后端
equipmentValue: 67, //设备存的值
},
],
},
msg: "dda",
};
//=================实时更新数据
watch(params.devRealtimeData, () => {
// console.log("devRealtimeData：", params.devRealtimeData);
});
defineExpose({
rerender,
});
</script>
<style lang="scss" scoped>
#scene {
position: relative;
height: 100%;
width: 100%;
#cvs {
height: 100%;
}
}
#remove-title {
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
}
.btn {
display: flex;
justify-content: center;
gap: 80px;
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
}
</style>

481
src/components/content/tunnelScene/TunnelSceneSimulate.vue Normal file
View File

@@ -0,0 +1,481 @@
<template>
<div id="scene">
<div id="cvs" ref="content"></div>
<!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog
ref="edit"
@addEquipment="handleAddEqu"
@removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:tunnelId="params.tunnelId"
:position="targetP?.name"
:hasEquipment="hasDevice"
:pointGap="pointGap"
:form="params.form"
/>
<pre-dialog
ref="info"
:pointNum="50"
:pointGap="50"
:equipmentType="equipmentType"
:equipmentName="equipmentName"
:equipmentValue="50"
:devRealtimeDetail="devRealtimeDetail"
/>
</div>
</template>
<script setup>
import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue";
import EditDialog from "./editEquComp/editDialog.vue";
import PreDialog from "./preEquComp/preDialog.vue";
// 导入模模型加载器
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from "three/examples/jsm/libs/tween.module";
import {
CSS2DRenderer,
CSS2DObject,
} from "three/addons/renderers/CSS2DRenderer.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader";
import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader";
import {
onMounted,
reactive,
ref,
watch,
defineProps,
defineExpose,
} from "vue";
import {ElMessage} from "element-plus";
import {getScreenSimulateTunnel} from "@/api/tunnelManage";
// 获取html标签跟随组件dom
const content = ref(null);
const info = ref(null);
const edit = ref(null);
const realtimeData = ref([]);
let modelList = ref(null);
let demo; //定义demo对象
const loader = new OBJLoader();
let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding;
const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"deviceData",
"devRealtimeData",
"simulateData",
"tunnelAlias",
]);
// hover到设备回显参数
let equipmentName = ref("");
let equipmentType = ref("");
let pointValue = ref({});
let devRealtimeDetail = ref({
equipmentType: "",
value: "",
unit: "",
});
watch(
() => params.tunnelLength,
(now) => {
params.tunnelLength = now;
pointGap = now / 20;
},
{deep: true}
);
let pointGap = reactive(params.tunnelLength);
onMounted(handleMounted);
// 挂载后回调
async function handleMounted() {
const doms = [info.value.$el, info.value.$el];
demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
// "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
demo.isedit = false;
const loaded = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf"
);
demo.addOrbitControls(OrbitControls, true);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
demo.setDistance(10);
lClickCallback(demo); //绑定左键回调
rClickCallback(demo); //绑定右键回调
//加载HDR背景图片
demo.loadBackground(hdrLoader, backColorSet);
// 初始化设备模型
try {
const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
demo.initDevicesModel(map);
modelList.value = [
{
typeKey: "frequency",
position: "point_001_tr",
threshold: "",
equipmentId: 3048,
equipmentName: "温度传感器",
equipmentType: "sensor",
data: 100, //实时数据
unit: "℃", //单位
},
{
typeKey: "temperature",
position: "point_020_tr",
threshold: "",
equipmentId: 10,
equipmentName: "1度传感器",
equipmentType: "sensor",
data: 10, //实时参数
unit: "%", //单位
},
];
// 初始化仿真參數
const {data} = await getScreenSimulateTunnel(params.tunnelId);
demo.enableLeftBtn = false; //关闭左键
demo.pointsVisible(false); //隐藏附着点
TunnelSceneSimulateRender(data);
// 初始化标牌信息
renderRoadPlane({nickname: params.tunnelAlias, length: params.tunnelLength});
} catch (err) {
}
}
// 从新渲染数据
async function rerender() {
try {
// 初始化仿真參數
const {data} = await getScreenSimulateTunnel(params.tunnelId);
console.log(data);
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData);
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (error) {
ElMessage({
message: "获取仿真数据异常！",
type: "warning",
});
}
}
// 随机生成1-20的随机数
function randomNum(max = 20) {
const nums = new Set();
while (nums.size < max) {
nums.add(Math.floor(Math.random() * max + 1).toString());
}
return [...nums];
}
//随机定位
function randomPosition(simulateData) {
const mid = Math.floor(simulateData.length / 2);
const lrIndex = Math.floor(Math.random() * 2);
const lr_position = ["tl", "tr"];
const leftPosition = randomNum();
const rightPosition = randomNum();
const leftData = simulateData.slice(0, mid).map((item, index) => ({
...item,
position: `point_0${leftPosition[index].padStart(2, 0)}_${
lr_position[lrIndex]
}`,
}));
const rightData = simulateData
.slice(mid, simulateData.length)
.map((item, index) => ({
...item,
position: `point_0${rightPosition[index].padStart(2, 0)}_${
lr_position[1 - lrIndex]
}`,
}));
return [...leftData, ...rightData];
}
// 每个模型加载回调
function loadModel(path) {
return new Promise((resolve, reject) => {
loader.load(
path,
(obj) => {
resolve(obj);
},
(xhr) => {
},
(err) => {
reject(err);
}
);
});
}
let hasDevice = ref(true);
let devInfo = reactive({
meshId: null,
name: "无",
state: "无",
position: "无",
});
// 对象建构赋值功能
function editDevInfo(
value = {
meshId: null,
name: "无",
state: "无",
position: "无",
}
) {
devInfo.meshId = value.meshId;
devInfo.name = value.name;
devInfo.state = value.state;
devInfo.position = value.position;
}
//左键/双击左键回调函数
function lClickCallback(demo) {
// demo动态添加函数，为操作组件内部
function displayDevInfo(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
if (!targetPoint.info) {
editDevInfo();
return;
}
editDevInfo(targetPoint.info);
}
// 传给内部使用
demo.addFunction("displayDevInfo", displayDevInfo);
}
let pointNum = ref(0);
let targetP = ref({});
// 右键点击附着点后调函数
function rClickCallback(demo) {
function editDev(targetPoint = null) {
hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint;
pointNum.value = Number(
targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1,
targetPoint.name.lastIndexOf("_")
) - 1
);
if (!targetPoint.info) return;
pointValue.value = targetPoint.info
hoverDevEquipmentCallback(targetPoint.info);
editDevInfo(targetPoint.info);
}
demo.addFunction("editDev", editDev);
}
// 场景添加设备
function handleAddEqu(formInfo) {
demo.addEquipment(targetP.value, formInfo);
// //将墙壁设置为可以穿透点击
for (let line = 1; line <= 20; line++) {
if (line < 10) {
let wall = "wall_" + "0" + line;
this.scene.getObjectByName(wall).layers.set(0);
} else if (line >= 10) {
let wall = "wall_" + line;
this.scene.getObjectByName(wall).layers.set(0);
}
}
}
const centerDialogVisible = ref(false);
// 删除设备
function handleRemoveEqu() {
if (!targetP.value.hasDevice) {
ElMessage({
message: "该点位不存在设备！",
type: "warning",
});
return;
}
centerDialogVisible.value = true;
}
// 处理取消关闭编辑框事件
function handleCancel() {
if (!demo) return;
// 关闭标签
demo.isControlOrbit(true);
demo._resetState();
demo.clearTagsObj();
}
//现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
//我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
//因为没获取到接口，我们先写死！！！
//需要参考接口的数据结构！！！，主要是传入函数的参数应该是什么结构？？？
const ThreeConfig = {
code: 0,
data: {
tunnelThreeConfig: [
{
equipmentId: "fan_01", //传感器id
equipmentName: "01", //设备名称
pointName: "point_005_tl", //附着点名称(定位)
equipmentType: "fan", //设备类型(类型可根据后端
equipmentValue: 23, //设备存的值
},
{
equipmentId: "sensors_01", //传感器id
equipmentName: "01", //设备名称
pointName: "point_009_bl", //附着点名称(定位)
equipmentType: "sensors", //设备类型(类型可根据后端
equipmentValue: 67, //设备存的值
},
],
},
msg: "dda",
};
//=============隧模型道数据仿真====================
/**
* @description: 隧道中的设备重新模拟渲染
* @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
*/
function TunnelSceneSimulateRender(data) {
if (!demo) return;
const modeData = randomPosition([
...data.frequencyChangerList,
...data.windPressureSensorList,
...data.sensorList,
]).map((item) => ({
...item,
equipmentType: item.equipmentType.startsWith("frequency")
? "frequency"
: "sensor",
}));
demo.editTunnelInit(modeData); //渲染设备数据
}
/**
* @description: 鼠标悬浮在设备上时回调函数
*/
function hoverDevEquipmentCallback(targetPointInfo) {
const {
equipmentId,
equipmentName: eName,
equipmentType: eType,
typeKey,
unit: u,
value
} = targetPointInfo;
//请求到的实时数据进行渲染
//业务代码....获取设备实时数据
equipmentType.value = eType;
equipmentName.value = eName;
devRealtimeDetail.value.equipmentType = typeKey;
devRealtimeDetail.value.unit = u;
devRealtimeDetail.value.value = value; //1000替换为value
}
/**
* @description: 渲染隧道入口提示板信息
* @param {Object} data 隧道信息 {nickname,length}
*/
function renderRoadPlane(data) {
if (!demo) return;
const {nickname, length} = data; //隧道名称，长度
demo.SignsInf(nickname, length + "");
}
const changePointValue = (item) => {
if (item.equipmentId == pointValue.value.equipmentId) {
pointValue.value.value = item.value
}
hoverDevEquipmentCallback(pointValue.value)
}
defineExpose({
rerender, TunnelSceneSimulateRender, changePointValue
});
</script>
<style lang="scss" scoped>
#scene {
position: relative;
height: 100%;
width: 100%;
#cvs {
height: 100%;
}
}
#remove-title {
height: 42px;
font-size: 32px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #08b7b8;
line-height: 42px;
letter-spacing: 3px;
text-align: center;
margin: 65px 0px 70px 0px;
}
.btn {
display: flex;
justify-content: center;
gap: 80px;
:nth-child(1) {
width: 190px;
height: 60px;
border-radius: 11px;
border: 2px solid #0f82af;
font-size: 28px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 37px;
background: transparent;
}
:nth-child(2) {
width: 190px;
height: 60px;
background: #08b7b8;
border-radius: 11px;
font-size: 28px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 37px;
}
}
</style>

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

@@ -10,11 +10,11 @@ import {
import { saveState, resetState } from "./viewBack";
import addFunction from "./addEvent";
import { editTunnelInit } from "./editTunnelInit";
import { addEquipment, removeEquipment } from "./editEquipment";
import { addEquipment, removeEquipment,clearTunnelEquipments } from "./editEquipment";
import previewtunnelModeInit from "./previewTunnelInit";
import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
// import { fa } from "element-plus/es/locale/index.js";
// import { ref } from "vue";
import { realTimeRenderData } from "./realTimeRerender";
export default class Demo {
// 摄像机看向位置s
origin = null;
@@ -35,7 +35,8 @@ export default class Demo {
this.removeEquipment = removeEquipment;
this.previewtunnelModeInit = previewtunnelModeInit;
this.editTunnelInit = editTunnelInit;
this.realTimeRenderData = realTimeRenderData;
this.clearTunnelEquipments = clearTunnelEquipments;
// 外部可添加函数
this.addFunction = addFunction;
this.THREE = three;
@@ -205,7 +206,12 @@ export default class Demo {
// child.material.emissive = child.material.color
// child.material.emissiveMap = child.material.map
}
//是否显示附着点
pointsVisible(isEnable = true) {
this.points.forEach((element) => {
element.material.visible = isEnable;
});
}
// 添加轨道控制器
/**
* @param {Object} OrbitControls 轨道控制器
@@ -253,7 +259,9 @@ export default class Demo {
const raycaster = new this.THREE.Raycaster();
raycaster.setFromCamera(mouse, this.camera);
const intersects = raycaster.intersectObjects(hoverModels);
if (intersects.length > 0) {
if(Object.keys(intersects[0].object).includes('enableHover') && !intersects[0].object.enableHover)return;
if (!this.preHover) {
this.preHover = intersects[0].object;
} else {
@@ -328,6 +336,7 @@ export default class Demo {
// 处理点击左右键触发的事件
__handleListenerClickRLEvent(isClickModels, e) {
e.preventDefault();
if (!this.enableLeftBtn) return;
clearTimeout(this.EventTimer);
this.EventTimer = setTimeout(() => {
const mouse = new this.THREE.Vector2();
@@ -354,7 +363,6 @@ export default class Demo {
this.CSS2Renderer = new CSS2Renderer();
this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight - 100);
this.CSS2Renderer.render(this.scene, this.camera);
this.mountedElement.appendChild(this.CSS2Renderer.domElement);
// 初始化html标签

66
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -1,4 +1,4 @@
import Demo from "../demo";
import { eq } from "lodash";
import EquipmentTag from "../utils/EquipmentTag";
/**
*
@@ -34,7 +34,7 @@ function addEquipment(targetPoint, formInfo, fanData) {
}
//判断墙是否已经存在，如果存在的话，就不管，添加则无效嘛(就是说只能添加一面墙，如果存在一面墙，则不管了)
let hasWall = false
let hasWall = false;
let wallHang = 0;
// function handleValveEqu(targetPoint, equipmentInfo) {
@@ -49,8 +49,15 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
equMesh.position.copy(worldP);
//设备添加标签
const tag = EquipmentTag(equipmentInfo.equipmentName);
const param = `${equipmentInfo.data || "--"} ${equipmentInfo.unit || "-"}`; //渲染设备参数(data)和单位（unit）
const tag = EquipmentTag(equipmentInfo.equipmentName, param);
equMesh.getObjectByName("tag").material = tag;
this.deviceModels.push({
tagSpriteId: equMesh.getObjectByName("tag").id,
equipmentId: equipmentInfo.equipmentId,
objId: equMesh.id,
});
this.realTimeRenderData(231321);
if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2;
equMesh.rotation.y -= Math.PI / 4;
@@ -195,11 +202,10 @@ function handleFanEqu(
if (item.isMesh) {
item.material = item.material.clone();
}
})
});
// equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
// console.log(equMesh);
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
equMesh.position.copy(worldP);
equMesh.translateY(-0.6);
@@ -213,15 +219,13 @@ function handleFanEqu(
...equipmentInfo,
};
//我们把风机的附着点挂在原型上，这样应该可以进行处理
if (targetPoint.info.equipmentName.slice(0, 1) == '1') {
this.scene.Fan1targetPoint = targetPoint
if (targetPoint.info.equipmentName.slice(0, 1) == "1") {
this.scene.Fan1targetPoint = targetPoint;
} else {
this.scene.Fan2targetPoint = targetPoint
this.scene.Fan2targetPoint = targetPoint;
}
//这里感觉情况改变风机的颜色
changeFanColor(fanData, targetPoint, this.scene)
changeFanColor(fanData, targetPoint, this.scene);
// 定义风机旋转
const fanLeaf = equMesh.getObjectByName("fan_leafs");
@@ -233,6 +237,11 @@ function handleFanEqu(
fanLeaf.rotation.z = obj.rotation;
});
this.fanSpinArray.push(fanSpin);
this.deviceModels.push({
tagSpriteId: "",
equipmentId: equipmentInfo.equipmentId,
objId: equMesh.id,
});
}
// 删除传感器
@@ -240,7 +249,6 @@ function removeEquipment(targetPoint) {
//删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
if (!targetPoint.hasDevice) return;
//删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
//如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用
@@ -286,8 +294,6 @@ function removeEquipment(targetPoint) {
// }
// deleteItem(Allhang, Number(lineIndex))
console.log("测试是不是删除了");
const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh);
@@ -298,13 +304,12 @@ function removeEquipment(targetPoint) {
}
export { addEquipment, removeEquipment };
function deleteItem(array, item) {
let index = array.indexOf(item);
if (index !== -1) {
array.splice(index, 1);
}
return array
return array;
}
// 这里是改变风机颜色的代码
@@ -315,7 +320,7 @@ function changeFanColor(fanData, targetPoint, scene) {
//if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) {
//先做匹配操作
let fanType = fanData[i].equipmentType
let fanType = fanData[i].equipmentType;
//有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了
@@ -327,9 +332,9 @@ function changeFanColor(fanData, targetPoint, scene) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0xFF0000)
obj.material.color.set(0xff0000);
}
})
});
}
});
} else {
@@ -342,9 +347,9 @@ function changeFanColor(fanData, targetPoint, scene) {
// console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) {
obj.material.color.set(0x008000)
obj.material.color.set(0x008000);
}
})
});
}
});
} else {
@@ -356,4 +361,21 @@ function changeFanColor(fanData, targetPoint, scene) {
}
}
}
}
}
export function clearTunnelEquipments() {
if (this.group) this.scene.remove(this.group);
if (this.scene.getObjectByName("boxHelper")) {
const preModel = this.scene.getObjectByName("boxHelper");
this.scene.remove(preModel);
}
this.scene.traverse(function (point) {
if (/^point/.test(point.name)) {
point.hasDevice = false;
}
});
this.deviceModels.forEach((deviceModel) => {
this.scene.remove(this.scene.getObjectById(deviceModel.objId));
});
this.deviceModels = [];
}

12
src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js
View File

@@ -1,6 +1,16 @@
export function editTunnelInit(equipmentList) {
// 清空设备
this.clearTunnelEquipments();
//初始化将墙壁隐藏起来
equipmentList.forEach((item) => {
this.addEquipment(this.scene.getObjectByName(item.position), item, 1);
// 根据定位获取附着点信息
const target = this.scene.getObjectByName(item.position);
this.addEquipment(target, item, 1);
});
this.scene.traverse(function (point) {
if (/^point/.test(point.name)) {
point.enableHover =
equipmentList.findIndex((item) => item.position === point.name) >= 0;
}
});
}

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

@@ -1,4 +1,5 @@
export function handleLHover(targetPoint) {
// if(Object.keys(targetPoint).includes('enableHover') && !targetPoint.enableHover)return;
if (this.tag3CSS2DObj.element.style.opacity != '1') {
// 保存进入状态
this._saveState();

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

@@ -1,6 +1,5 @@
import toImg from "../utils/EquipmentTag";
export function handleRClick(targetPoint) {
return;
this.clearTagsObj();
const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系

1
src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js
View File

@@ -11,7 +11,6 @@ export default function previewtunnelModeInit(equipmentList, fanData) {
// }
// }
// console.log(equipmentList);
equipmentList.forEach((item) => {
this.addEquipment(this.scene.getObjectByName(item.position), item, fanData);
});

5
src/components/content/tunnelScene/sceneClass/realTimeRerender/index.js Normal file
View File

@@ -0,0 +1,5 @@
export function realTimeRenderData(realTimeData) {
this.deviceModels.forEach((deviceModel) => {
this.scene.getObjectById(deviceModel.tagSpriteId);
});
}

9
src/components/content/usedEle/UsedEle.vue
View File

@@ -233,20 +233,21 @@ const changeNum = (item) => {
}
}
const setValueA = () => {
if (electricityConsumptionMonthly.value === 0 || length.value === null) {
if (electricityConsumptionMonthly.value === 0 || length.value === null||electricityConsumptionMonthly.value<0) {
valueA.value.style.height = `0px`;
}
let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 200000;
let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 1000000;
valueA.value.style.height = `${width}px`;
}
const setValueB = () => {
if (monthlySavings.value === 0 || length.value === null) {
if (monthlySavings.value === 0 || length.value === null||monthlySavings.value<0) {
valueB.value.style.height = `0px`;
}
let width = (monthlySavings.value * length.value?.offsetHeight) / 200000;
let width = (monthlySavings.value * length.value?.offsetHeight) / 1000000;
valueB.value.style.height = `${width}px`;
}
const getBasicData = (data) => {
if(!data)return;
electricityConsumptionMonthly.value = data.electricityConsumptionCount
monthlySavings.value = data.conserveElectricityCount
}

82
src/components/content/windPressure/WindPressureList.vue
View File

@@ -26,10 +26,10 @@
<div class="export-btn" @click="handleExport">
导出
</div>
<choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-day v-if="isSimulate?selectTimeButton === 0:selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
<choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
<time-range-btn
:buttonList="timeList"
:buttonList="isSimulate?timeSimulateList:timeList"
v-model="selectTimeButton"
@select="timeSelect"
/>
@@ -52,7 +52,7 @@
import WindPressureItem from "./childComps/WindPressureItem.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts';
import {getEchartsInfo} from "@/api/largeScreen";
import {getEchartsInfo, getSimulationEchartsInfo} from "@/api/largeScreen";
import ChooseDay from "@/components/chooseDates/index.vue"
import ChooseMonth from "@/components/chooseMonth/index.vue"
import elementResizeDetectorMaker from "element-resize-detector";
@@ -63,6 +63,7 @@ const props = defineProps({
list: Array,
winData: Array,
loading: Number,
isSimulate: Boolean,
});
const loadingText = ref('加载中...')
const chooseDayRef = ref();
@@ -70,7 +71,7 @@ const chooseMonthRef = ref();
const windSort = ref(1)
const windSortId = ref(1)
const timeList = ref(["年", "月", "日"]);
const selectTimeButton = ref(2);
const timeSimulateList = ref(["日"]);
const isVisited = ref(false);
const isFullScreen = ref(false);
let chartData = reactive([])
@@ -80,6 +81,7 @@ let myEcharts = reactive({});
const wpList = ref([]);
const clickMonth = ref('')
const clickDay = ref('')
const selectTimeButton = ref(props.isSimulate?0:2);
watch(() => props.list, (now) => {
wpList.value.forEach(item => {
now.forEach(newItem => {
@@ -201,29 +203,57 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag, startTime, endT
}
}
})
getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('container')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('windDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data.values, dataZoomTop)
if(props.isSimulate) {
getSimulationEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('container')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('windDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data.values, dataZoomTop)
}
} else {
shrinkScreen()
}
} else {
shrinkScreen()
}
})
} else {
loadingText.value = res.msg
}
})
})
} else {
loadingText.value = res.msg
}
})
}else{
getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
if (res?.code === 1000) {
showLoading.value = false
chartData = res.data
nextTick(() => {
if (flag) {
const fanChart = document.getElementById('container')
const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById('windDialog'), (element) => {
fanChart.style.height = element.offsetHeight - 140 + 'px'
myEcharts.resize();
});
if (isFullScreen.value) {
initChart(res.data.dates, res.data.values, dataZoomTop)
}
} else {
shrinkScreen()
}
})
} else {
loadingText.value = res.msg
}
})
}
nextTick(() => {
loadingText.value = '加载中...'
})

738
src/components/deviceManage/index.vue Normal file
View File

@@ -0,0 +1,738 @@
<template>
<div class="device-content">
<div class="device-box">
<div class="box-left">
<el-menu
default-active="1"
@select="handleChangeMenu"
>
<el-menu-item index="1">
<span>风机</span>
</el-menu-item>
<el-menu-item index="2">
<span>风压</span>
</el-menu-item>
<el-menu-item index="3">
<span>其他传感器</span>
</el-menu-item>
<!-- <el-menu-item index="4">-->
<!-- <span>分流器</span>-->
<!-- </el-menu-item>-->
</el-menu>
</div>
<div class="box-right" v-if="changeIndex==1">
<div class="device-title">
<span>风机设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="fanFrequency">
<template #suffix>
<span>秒/次</span>
</template>
</el-input>
</div>
</div>
<div class="device-table">
<el-table stripe
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
table-layout="auto"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<!-- <el-table-column prop="ratedPower" label="额定功率" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="额定功率" v-model="scope.row.ratedPower"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>-->
<!-- <el-table-column prop="acurrentValue" label="A电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="A电流" v-model="scope.row.acurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>-->
<!-- <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>-->
<!-- <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">-->
<!-- <template #default="scope">-->
<!-- <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"-->
<!-- ></el-input>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch">
<div
:class="{ active: scope.row.state }"
@click="scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0; "
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="emit('cancel')">
取消
</div>
<div class="sure-btn" @click="editEquip">
开始模拟
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==2">
<div class="device-title">
<span>风压设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="windFrequency">
<template #suffix>
<span>秒/次</span>
</template>
</el-input>
</div>
</div>
<div class="device-table">
<el-table stripe table-layout="auto"
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<!-- <el-table-column prop="offset" label="偏移量" align="center"/>-->
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
></el-input>
</template>
</el-table-column>
<el-table-column prop="miniRange" label="最小范围" align="center">
<template #default="scope">
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="maxRange" label="最大范围" align="center">
<template #default="scope">
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch wind-switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0; "
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="emit('cancel')">
取消
</div>
<div class="sure-btn" @click="editEquip">
开始模拟
</div>
</div>
</div>
<div class="box-right" v-if="changeIndex==3">
<div class="device-title">
<span>其他传感器设备管理</span>
<div class="collection-frequency">
<span>采集频率</span>
<el-input type="number" v-model="otherFrequency">
<template #suffix>
<span>秒/次</span>
</template>
</el-input>
</div>
</div>
<div class="device-table">
<el-table stripe table-layout="auto"
style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
:header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
:cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
<el-table-column prop="equipmentName" label="设备名称" align="center"/>
<!-- <el-table-column prop="offset" label="偏移量" align="center"/>-->
<el-table-column prop="unit" label="单位" align="center">
<template #default="scope">
<el-input placeholder="单位" v-model="scope.row.unit"></el-input>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="阈值" align="center">
<template #default="scope">
<el-input placeholder="阈值" v-model="scope.row.alarmValue"
></el-input>
</template>
</el-table-column>
<el-table-column prop="miniRange" label="最小范围" align="center">
<template #default="scope">
<el-input placeholder="最小范围" v-model="scope.row.miniRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="maxRange" label="最大范围" align="center">
<template #default="scope">
<el-input placeholder="最大范围" v-model="scope.row.maxRange"
></el-input>
</template>
</el-table-column>
<el-table-column prop="state" label="状态" align="center" width="200">
<template #default="scope">
<div class="switch wind-switch">
<div
:class="{ active: scope.row.state }"
@click=" scope.row.state = 1; "
>
启用
</div>
<div
:class="{ active: ! scope.row.state }"
@click=" scope.row.state = 0; "
>
停用
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="btns">
<div class="cancel-btn" @click="emit('cancel')">
取消
</div>
<div class="sure-btn" @click="editEquip">
开始模拟
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ElLoading, ElMessage} from "element-plus";
import {
getEquipmentList,
editEquipment,
getTunnelDetail,
getOtherSensorSerialNumberOptions,
getWindPressureSerialNumberOptions, getSimulateTunnelDetail, editSimulateEquipment
} from "@/api/tunnelManage";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {debounce} from 'lodash'
import {defineEmits} from "vue";
import {startSimulation} from "@/api/largeScreen.js";
const router = useRouter()
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
const userId = reactive(router.currentRoute.value.params.userId)
const type = reactive(router.currentRoute.value.params.type)
const fanFrequency = ref(0)
const windFrequency = ref(0)
const otherFrequency = ref(0)
const changeIndex = ref(1)
const fanData = ref([])
const winData = ref([])
const windPressureDataSerialNumberOptions = ref([])
const otherSensorSerialNumberOptions = ref([])
const otherData = ref([])
const winDataSelectedOption = ref([])
const fenLiuData = ref([])
const siteId = ref(0)
const emit = defineEmits([
"cancel"
]);
const changeData = (item) => {
return {
equipmentId: item.equipmentId,
unit: item.unit,
alarmValue: item.alarmValue,
serialNumber: item.serialNumber,
miniRange: parseInt(item.miniRange),
maxRange: parseInt(item.maxRange),
state: item.state,
}
}
const editEquip = debounce(() => {
const loading = ElLoading.service({
lock: true,
text: '开始模拟中',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
let newFrequency = [{
acquisitionPeriod: fanFrequency.value * 1000,
tunnelId: parseInt(tunnelId),
typeKey: 'frequency'
}, {
acquisitionPeriod: windFrequency.value * 1000,
tunnelId: parseInt(tunnelId),
typeKey: 'windPressure'
}, {
acquisitionPeriod: otherFrequency.value * 1000,
tunnelId: parseInt(tunnelId),
typeKey: 'sensor'
}]
let newFan = []
let newWind = []
let newSensor = []
fanData.value.forEach(item => {
let obj = {
equipmentId: item.equipmentId,
ratedPower: parseInt(item.ratedPower),
acurrentValue: parseInt(item.acurrentValue),
bcurrentValue: parseInt(item.bcurrentValue),
ccurrentValue: parseInt(item.ccurrentValue),
serialNumber: item.serialNumber,
state: parseInt(item.state)
}
newFan.push(obj)
})
winData.value.forEach(item => {
newWind.push(changeData(item))
})
otherData.value.forEach(item => {
newSensor.push(changeData(item))
})
const basicData = {
projectId: tunnelId,
acquisitionList: newFrequency,
frequencyChangerList: newFan,
windPressureSensorList: newWind,
sensorList: newSensor,
}
editSimulateEquipment(basicData).then(async res => {
if (res.code === 1000) {
loading.close()
let res = await startSimulation(tunnelId)
// console.log('res', res)
if (res.code === 1000) {
ElMessage.success('开始模拟')
}else{
ElMessage.warning(res.msg)
}
emit('submit')
} else {
ElMessage.error(res.msg)
loading.close()
}
})
}, 100)
const handleChangeMenu = (e) => {
changeIndex.value = e
}
const getList = async () => {
const loading = ElLoading.service({
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
await getSimulateTunnelDetail(tunnelId).then(res => {
if (res.code === 1000) {
fanData.value = res.data.equipmentList.frequencyChangerList
res.data.equipmentList.windPressureSensorList?.forEach(item => {
item.offset = item.offset + 4000
})
winData.value = res.data.equipmentList.windPressureSensorList
res.data.equipmentList.sensorList?.forEach(item => {
item.offset = item.offset + 4000
})
otherData.value = res.data.equipmentList.sensorList
res.data.equipmentList.acquisitionList?.map(item => {
item.acquisitionPeriod = item.acquisitionPeriod / 1000
if (item.typeKey === 'frequency') {
fanFrequency.value = item.acquisitionPeriod
} else if (item.typeKey === 'windPressure') {
windFrequency.value = item.acquisitionPeriod
} else if (item.typeKey === 'sensor') {
otherFrequency.value = item.acquisitionPeriod
}
})
}
loading.close()
})
}
getList()
</script>
<style lang="scss">
.serialNumber {
.el-input {
width: 570px !important;
}
.el-select__suffix {
.el-icon {
width: 3em !important;
height: 3em !important;
color: #fff !important;
svg {
width: 3em !important;
height: 3em !important;
}
}
}
.el-input__suffix-inner {
.el-icon {
width: 3em !important;
height: 3em !important;
color: #fff !important;
svg {
width: 3em !important;
height: 3em !important;
}
}
}
}
.el-select.serialNumber {
width: 580px !important;
border-radius: 6px !important;
border: 1px solid #05FEFF !important;
background-color: transparent !important;
.el-select__wrapper {
height: 54px !important;
color: #FFFFFF !important;
font-size: 40px !important;
//height: auto!important;
line-height: normal !important;
border-radius: 6px !important;
border: 1px solid #05FEFF !important;
background-color: transparent !important;
}
.el-select__placeholder {
height: 54px;
line-height: 54px;
color: #FFFFFF;
}
}
.serialNumber-select.el-popper {
background: #064B66 !important;
border: 2px solid #05FEFF !important;
.el-select-dropdown {
min-width: 130px !important;
}
.el-select-dropdown__item.is-hovering {
background-color: #064B66 !important;
}
.el-select-dropdown__item {
color: #FFFFFF;
border-bottom: 1px solid #05FEFF;
&:last-child {
border-bottom: none;
}
}
.el-select-dropdown__item.is-selected {
color: #F7B500 !important;
}
.el-select-dropdown__item.selected {
background-color: transparent !important;
color: #F7B500;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: transparent !important;
color: #F7B500;
}
.el-select-dropdown__item.is-disabled {
background-color: transparent !important;
color: #fff !important;
}
}
</style>
<style scoped lang="scss">
.box-top {
display: flex;
justify-content: flex-start;
.tunnel-name {
margin-left: 120px;
height: 61px;
font-size: 46px;
font-weight: bold;
color: #FFFFFF;
line-height: 61px;
}
.back-tunnel {
cursor: pointer;
margin: 0 0 0 70px;
display: flex;
align-items: center;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
font-size: 38px;
color: #FFFFFF;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
}
.device-content {
display: flex;
justify-content: center;
padding-top: 300px;
.device-box {
z-index: 9999;
display: flex;
width: 2500px;
height: 1600px;
background: #064B66;
border-radius: 20px;
border: 2px solid #05FEFF;
box-sizing: border-box;
.box-left {
padding-left: 24px;
width: 300px;
height: 1596px;
background: #0D5A7A;
border-radius: 20px 0px 0px 20px;
:deep(.el-menu) {
border-right: none;
margin-top: 261px;
background-color: #0D5A7A;
.el-menu-item.is-active {
background-image: url(../../assets/images/device/sdgl_xz.png);
}
.el-menu-item {
color: #fff;
height: 90px;
font-size: 40px;
&:hover {
background-color: #0D5A7A;
}
&:first-child {
letter-spacing: 120px;
}
&:nth-child(2) {
letter-spacing: 120px;
}
//&:nth-child(4) {
// letter-spacing: 40px;
//}
}
}
}
.box-right {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
.device-title {
margin-top: 60px;
line-height: 61px;
color: #FFFFFF;
display: flex;
justify-content: center;
> span:first-child {
font-size: 46px;
font-weight: bold;
}
.collection-frequency {
height: 60px;
display: flex;
align-items: center;
position: absolute;
right: 102px;
> span:first-child {
font-size: 38px !important;
white-space: pre;
margin-right: 15px;
}
:deep(.el-input__wrapper) {
width: 166px;
height: 56px;
background-color: transparent;
box-shadow: none;
border-radius: 6px;
border: 1px solid #05FEFF;
transform: none;
transition: none;
.el-input__inner {
height: 54px;
font-size: 30px;
color: #FFFFFF;
}
.el-input__suffix-inner {
font-size: 30px;
color: #08B7B8;
line-height: 40px;
}
}
}
}
}
.btns {
width: 100%;
margin: 0 auto;
position: absolute;
bottom: 70px;
}
.device-table {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
.active {
color: #FFFFFF;
background: #0f7da9;
}
.wind-switch {
//margin-left: 26px;
}
.switch {
margin-top: 22px;
display: flex;
width: 200px;
height: 50px;
border-radius: 6px;
border: 1px solid #05FEFF;
overflow: hidden;
color: #51A2B3;
line-height: 40px;
font-size: 36px;
& > div {
flex: 1;
text-align: center;
cursor: pointer;
}
}
:deep(.el-table--fit) {
//width: 1780px !important;
width: auto;
}
:deep(.cell) {
height: 80px;
line-height: 80px;
color: #fff;
font-size: 38px;
}
:deep(.el-table tr) {
background-color: #1C5971;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
background-color: #1C5971;
}
:deep(.el-table__row--striped) {
background-color: #13849C !important;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
background-color: #13849C !important;
}
:deep(.el-table__cell) {
.el-input {
width: 180px;
height: 53px;
}
.el-input__wrapper {
border-radius: 6px;
border: 1px solid #05FEFF;
background-color: transparent;
.el-input__inner {
color: #FFFFFF;
font-size: 40px;
height: auto;
line-height: normal;
}
}
}
:deep(.el-table__inner-wrapper::before) {
display: none;
}
}
}
}
</style>

9
src/components/manageBtn/index.vue
View File

@@ -51,10 +51,11 @@ const btnList = ref([
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
{
route: '/simulate',
icon: 'sp_icon_mngl.png',
name: '模拟仿真'
},
])
const newList=ref([])
const selectButton = ref(props.modelValue);

2
src/store/modelSceneStore.js
View File

@@ -44,7 +44,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
return new Promise((resolve, reject) => {
initSceneData(tunnelId)
.then((res) => {
console.info("🚀 ~method:initSceneData -----", res)
// console.info("🚀 ~method:initSceneData -----", res)
serialNumber.value=res.data.serialNumber
serialNumberPrefix.value=res.data.serialNumberPrefix
tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList

2
src/views/debug/index.vue
View File

@@ -76,7 +76,7 @@ const handleSend = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}`
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
console.log(wsUrl)
socket = new WebSocket(wsUrl)
//连接发生错误的回调方法

790
src/views/tunnel-simulate/index.vue
View File

@@ -1,13 +1,14 @@
<template>
<div id="main">
<tunnel-title v-if="showTunnelTitle"/>
<div class="box-top">
<!-- <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
<tunnel-title v-if="showTunnelTitle" />
<div class="back-tunnel" @click="router.push('/simulate/tunnel/list')">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="top-length">
<span>隧道总长度: {{ tunnelLength }}米</span>
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
>开始模拟</span
>
<span class="all-btn" @click="startSimulate" v-if="isStartSimulate">开始模拟</span>
<div v-else>
<span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
<span class="all-btn" @click="endSimulate">结束模拟</span>
@@ -15,37 +16,19 @@
<!-- <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
</div>
<div class="top-right" v-if="isPreview">
<div class="current-site">
当前站点：<span>{{ currentSite }}</span>
<el-dropdown
trigger="click"
@command="handleChangeSite"
popper-class="dropdown-style"
>
<div class="toggle"></div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="item in siteList"
:key="item.value"
:command="item"
>{{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-icon
size="50"
color="#0BE9FA"
style="margin-left: 50px; cursor: pointer"
@click="
isVisited = true;
getAlarmList();
"
>
<Bell />
</el-icon>
</div>
<!-- <div class="current-site">-->
<!-- <el-icon-->
<!-- size="50"-->
<!-- color="#0BE9FA"-->
<!-- style="margin-left: 50px; cursor: pointer"-->
<!-- @click="-->
<!-- isVisited = true;-->
<!-- getAlarmList();-->
<!-- "-->
<!-- >-->
<!-- <Bell/>-->
<!-- </el-icon>-->
<!-- </div>-->
<div class="current-user">
你好！<span>{{ currentUser }}</span>
<span>今天是：{{ currentDate }}</span>
@@ -53,348 +36,148 @@
</div>
</div>
</div>
<!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
<preview-scene
id="tunnel-box"
:isedit="false"
:tunnelId="tunnelId"
:key="tunnelId"
:tunnelLen="tunnelLen"
:largeScreen="largeScreen"
:fanList="socketData.leftData"
></preview-scene>
<device-manage
v-if="showDevice"
@cancel="cancelDeviceManage"
@submit="submitDevice"
/>
<!-- 模拟隧道模式-->
<preview-scene-simulate
ref="previewRef"
id="tunnel-box"
:isedit="false"
:device-data="largeScreenData"
:tunnelLength="tunnelLength"
:tunnelId="tunnelId"
:tunnelAlias="tunnelAlias"
:devRealtimeData="socketData"
></preview-scene-simulate>
<div class="left" v-if="isPreview">
<el-drawer
v-model="drawerLeft"
direction="ltr"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="drawerLeft"
direction="ltr"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<fan-info
v-if="showFan"
:list="socketData.leftData"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
/>
<used-ele
v-if="showFan"
:list="socketData.leftData"
:loading="showUsedLoading"
:ele-data="largeScreenData"
v-if="showFan"
:list="socketData.leftData"
:isSimulate="true"
:fan-data="largeScreenData"
:transducer-data="largeScreenData"
:loading="showFanLoading"
:tunnel-id="tunnelId"
/>
<!-- <used-ele-->
<!-- v-if="showFan"-->
<!-- :list="socketData.leftData"-->
<!-- :loading="showUsedLoading"-->
<!-- :ele-data="largeScreenData"-->
<!-- />-->
</el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div>
</div>
<div class="right" v-if="isPreview">
<el-drawer
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="drawerRight"
direction="rtl"
modal-class="modal-box"
:modal="false"
:show-close="false"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<wind-pressure-list
v-if="showFan"
:list="socketData.windPressure"
:win-data="largeScreenData"
:loading="showWindLoading"
v-if="showFan"
:list="socketData.windPressure"
:isSimulate="true"
:win-data="largeScreenData"
:loading="showWindLoading"
/>
<air-info
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:air-data="largeScreenData"
v-if="showFan"
:list="socketData.sensor"
:windSpeed="socketData.windSpeed"
:isSimulate="true"
:air-data="largeScreenData"
/>
<bad-gas-info
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:tunnelId="tunnelId"
:loading="showBadLoading"
v-if="showFan"
:list="socketData.sensor"
:bad-gas-data="largeScreenData"
:isSimulate="true"
:tunnelId="tunnelId"
:loading="showBadLoading"
/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
</div>
<div class="switch-btn">
<div class="arrow" @click="previousBtn"></div>
<el-carousel
height="150px"
type="card"
ref="tunnelBtn"
:autoplay="false"
:initial-index="initialIndex"
@change="changeTunnel"
>
<div class="btn">
<el-carousel-item v-for="item in tunnelList" :key="item.value">
{{ item.label }}
</el-carousel-item>
</div>
</el-carousel>
<div class="arrow right" @click="nextBtn"></div>
</div>
</div>
<div class="alarm-dialog alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isDetailVisited"
title="报警信息详情"
width="1500px"
>
<div class="detail">
<div>报警时间：</div>
{{ alarmDetail.alarmTime }}
</div>
<div class="detail">
<div>报警内容：</div>
{{ alarmDetail.alarmContent }}
</div>
</el-dialog>
</div>
<div class="alarm-tunnel">
<el-dialog
:close-on-click-modal="false"
v-model="isVisited"
title="报警信息"
width="2175px"
:modal="false"
>
<div class="left-top-icon"></div>
<div class="right-top-icon"></div>
<el-form
:model="queryParams"
inline
class="query-form"
ref="queryForm"
@submit.prevent="getAlarmList"
v-if="roleKey !== 'administrator'"
>
<el-form-item label="查阅状态" prop="lookupStatus">
<el-select
v-model="queryParams.lookupStatus"
placeholder="请选择查阅状态"
:fit-input-width="true"
:teleported="false"
clearable
filterable
>
<el-option label="已读" :value="true" />
<el-option label="未读" :value="false" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getAlarmList">搜索</el-button>
<el-button @click="handleReset">重置</el-button>
</el-form-item>
</el-form>
<div
class="device-table"
:style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
>
<el-table
stripe
v-loading="loading"
:empty-text="tableEmptyText"
style="background-color: #011c29; --el-table-border-color: none"
:header-cell-style="{
backgroundColor: '#064B66',
color: '#fff',
fontSize: '40px',
borderBottom: 'none',
}"
:data="alarmList"
>
<el-table-column
prop="tunnelName"
label="隧道名称"
align="center"
width="400px"
/>
<el-table-column
prop="alarmContent"
label="告警信息"
align="center"
/>
<el-table-column
prop="alarmTime"
label="告警时间"
align="center"
width="480px"
/>
<el-table-column
prop="lookupStatus"
label="查阅状态"
align="center"
width="200px"
v-if="roleKey !== 'administrator'"
>
<template #default="scope">
<el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
>{{ scope.row.lookupStatus ? "已读" : "未读" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300px">
<template #default="scope">
<el-button
type="primary"
size="mini"
style="font-weight: bold"
@click="handleView(scope.row)"
link
>详情
</el-button>
<el-button
type="danger"
size="mini"
v-if="roleKey !== 'administrator'"
@click="handleDelete(scope.row)"
link
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<div
class="pagination"
:style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
>
<el-pagination
background
v-model:current-page="pageInfo.pageNum"
v-model:page-size="pageInfo.pageSize"
:total="total"
prev-text="上一页"
next-text="下一页"
layout="prev, pager, next"
@current-change="handleCurrentChange"
:hide-on-single-page="true"
/>
</div>
</div>
<div class="left-bottom-icon"></div>
<div class="right-bottom-icon"></div>
</el-dialog>
</div>
</template>
<script setup>
import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
import PreviewSceneSimulate from "@/components/content/tunnelScene/TunnelSceneSimulate.vue";
import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
import UsedEle from "@/components/content/usedEle/UsedEle.vue";
import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import { dateFormat } from "@/utils/date.js";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import {dateFormat} from "@/utils/date.js";
import {getToken} from "@/utils/auth";
import {useAuthStore} from "@/store/userstore.js";
import {
getLargeScreen,
getLargeScreenInfo,
getTunnelBySiteId,
getAlarmInfo,
deleteAlarmSate,
getAlarmDetail,
updateAlarmState,
endSimulation,
blastingSimulation, simulationState,
} from "@/api/largeScreen";
import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
import { getUserInfo } from "@/api/login";
import { initSceneData } from "@/api/tunnelScene";
import { getTunnelList } from "@/api/tunnelManage";
import { debounce } from "lodash";
import {ElMessage, ElMessageBox} from "element-plus";
import {getUserInfo} from "@/api/login";
import {
getScreenSimulateTunnel,
getSimulateTunnelDetail,
} from "@/api/tunnelManage";
let largeScreen = computed(() => largeScreenData);
const authStore = useAuthStore();
const router = useRouter();
const previewId = reactive(router.currentRoute.value.params.tunnelId);
const siteId = reactive(router.currentRoute.value.params.siteId);
const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId);
const selectIndex = ref(-1);
const isVisited = ref(false);
const isDetailVisited = ref(false);
const previewRef = ref();
const showFan = ref(false);
const showDevice = ref(false);
const drawerLeft = ref(true);
const showTunnelTitle = ref(true);
const isPreview = ref(true);
const loading = ref(false);
const tableEmptyText = ref("加载中~");
const initialIndex = ref(0);
const showFanLoading = ref(0);
const showUsedLoading = ref(0);
const showWindLoading = ref(0);
const showBadLoading = ref(0);
const isStartSimulate = ref(true);
const drawerRight = ref(true);
const showMenu = ref(false);
const currentSiteId = ref(0);
const currentSite = ref("");
const siteList = ref([]);
const alarmList = ref([]);
const alarmDetail = ref([]);
const totalTunnelList = ref([]);
const currentUser = ref("");
const currentUserId = ref(0);
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([]);
const tunnelId = ref(0);
const tunnelLength = ref(0);
const tunnelAlias = ref('');
const constructionLength = ref(0);
const routeList = ref([]);
let socket = reactive("");
let pattern = reactive(new RegExp("[A-Za-z]+"));
let isTunnel = reactive(false);
// const equipmentOption = ref([])
const btnList = ref([
{
route: "/site",
icon: "sp_icon_zdgl.png",
name: "站点管理",
},
{
route: "/tunnel",
icon: "sp_icon_sdgl.png",
name: "隧道管理",
},
{
route: "/user",
icon: "sp_icon_yhgl.png",
name: "用户管理",
},
// {
// route: '/system',
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
]);
const serialNumber = ref("");
const roleKey = ref("");
let token = getToken();
let send = {
type: "ping",
};
const pageInfo = reactive({
pageNum: 1,
pageSize: 10,
});
const queryForm = ref();
const form = ref();
const total = ref(10);
const largeScreenData = ref(null);
const socketData = reactive({
leftData: [],
@@ -403,102 +186,43 @@ const socketData = reactive({
windSpeed: [],
});
let tunnelLen = computed(() => tunnelLength);
const queryParams = reactive({
equipmentId: "",
lookupStatus: "",
});
onMounted(() => {
getList();
getUser();
getOtherInfo();
getScreenInfo(previewId);
getBasicData(previewId);
nextTick(() => {
showFan.value = true;
});
});
const startSimulate = () => {
isStartSimulate.value = false;
showDevice.value = true;
};
const endSimulate = () => {
const cancelDeviceManage = () => {
isStartSimulate.value = true;
showDevice.value = false;
};
const changeName = (id) => {
for (let item of equipmentOption.value) {
if (item.value === id) {
return item.label;
}
}
return "";
const submitDevice = () => {
isStartSimulate.value = false;
showDevice.value = false;
getScreenInfo(previewId, true);
};
const handleReset = () => {
queryForm.value.resetFields();
getAlarmList();
};
//点击页码进行分页功能
const handleCurrentChange = (val) => {
pageInfo.pageNum = val;
getAlarmList();
};
const handleDelete = (row) => {
ElMessageBox.confirm(`确认删除该报警信息吗？`, "系统提示", {
type: "warning",
closeOnClickModal: false,
const simulatedBlasting = () => {
ElMessageBox.confirm(`是否确定模拟爆破`, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteAlarmSate(row.alarmId).then((res) => {
if (res.code === 1000) {
ElMessage.success("删除成功");
getAlarmList();
}
});
});
blastingSimulation(previewId, 10);
})
};
//查看报警信息详情
const handleView = (row) => {
getAlarmDetail(row.alarmId).then((res) => {
if (res.code === 1000) {
isDetailVisited.value = true;
alarmDetail.value = res.data;
if (roleKey.value !== "administrator") {
if (!row.lookupStatus) {
handleChangeState(row);
}
}
}
});
};
const handleChangeState = (row) => {
updateAlarmState([
{
alarmId: row.alarmId,
lookupStatus: true,
userId: currentUserId.value,
},
]).then((res) => {
if (res.code === 1000) {
// ElMessage.success(res.msg);
getAlarmList();
} else {
// ElMessage.error(res.msg);
}
});
};
const getAlarmList = () => {
loading.value = true;
getAlarmInfo({
tunnelId: tunnelId.value,
lookupStatus: queryParams.lookupStatus,
...pageInfo,
}).then((res) => {
if (res.code === 1000) {
loading.value = false;
if (res.data.rows.length === 0) {
tableEmptyText.value = "暂无数据~";
} else {
tableEmptyText.value = "";
}
alarmList.value = res.data.rows;
total.value = res.data.total;
}
});
const endSimulate = async () => {
isStartSimulate.value = true;
await endSimulation(previewId);
ElMessage.success("结束模拟成功");
};
const getUser = () => {
getUserInfo().then((res) => {
@@ -509,74 +233,60 @@ const getUser = () => {
localStorage.setItem("userId", currentUserId.value);
});
};
const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
let routeArr = [];
res.data.routeList.forEach((item) => {
for (let btn of btnList.value) {
if (item === btn.route) {
routeArr.push(btn);
}
const getSimulationState = () => {
simulationState(previewId).then((res) => {
if (res.code === 1000) {
if (res.data) {
if (res.data.state) {
isStartSimulate.value = false
}
});
routeList.value = routeArr;
showMenu.value = true;
siteList.value = res.data.siteOption;
tunnelList.value = res.data.tunnelOption;
if (siteId) {
currentSiteId.value = siteId;
currentSite.value = localStorage.getItem("site");
showTunnelTitle.value = false;
nextTick(() => {
showTunnelTitle.value = true;
});
getTunnel(siteId);
} else {
getTunnel(res.data.siteOption[0].value);
currentSiteId.value = res.data.siteOption[0].value;
currentSite.value = res.data.siteOption[0].label;
localStorage.setItem("site", currentSite.value);
localStorage.setItem("currentSiteId", currentSiteId.value);
isStartSimulate.value = true
}
}
});
};
const getScreenInfo = (id) => {
getSimulationState()
const getBasicData = (id) => {
getSimulateTunnelDetail(id).then((res) => {
if (res?.code === 1000) {
tunnelLength.value = res.data.totalLength;
tunnelAlias.value = res.data.tunnelAlias;
serialNumber.value = res.data.serialNumber;
constructionLength.value = res.data.constructionLength;
initWebSocket()
} else {
ElMessage.warning(res.msg);
}
});
};
const getScreenInfo = (id, flag) => {
if (id) {
tunnelId.value = id;
// equipmentOption.value = []
getLargeScreen(id).then((res) => {
getScreenSimulateTunnel(id).then((res) => {
if (res?.code === 1000) {
if (res.data.frequencyChangerList.length !== 0) {
showFanLoading.value = 0;
showFanLoading.value = 1;
} else {
showFanLoading.value = 1;
}
if (res.data.windPressureSensorList.length !== 0) {
showWindLoading.value = 0;
showWindLoading.value = 1;
} else {
showWindLoading.value = 1;
}
if (res.data.sensorList.length !== 0) {
// res.data.sensorList.forEach((item) => {
// option = {
// value: item.equipmentId,
// label: item.equipmentName,
// }
// equipmentOption.value.push(option)
// })
res.data.sensorList.forEach((item) => {
if (
item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
item.equipmentType === "dust" ||
item.equipmentType === "carbonDioxide" ||
item.equipmentType === "carbonMonoxide" ||
item.equipmentType === "hydrogenSulfide" ||
item.equipmentType === "sulfurDioxide" ||
item.equipmentType === "sulfurMonoxide" ||
item.equipmentType === "nitrogenDioxide"
) {
showBadLoading.value = 0;
} else {
@@ -587,127 +297,22 @@ const getScreenInfo = (id) => {
showBadLoading.value = 1;
}
largeScreenData.value = res.data;
getSimulationState()
if (flag) {
nextTick(() => {
previewRef.value.TunnelSceneSimulateRender(res.data)
})
}
// console.log("largeScreenData.value", largeScreenData.value);
} else {
ElMessage.warning(res.msg);
}
});
initSceneData(id).then((res) => {
tunnelLength.value = res.data.tunnelLength;
constructionLength.value = res.data.constructionLength;
// serialNumber.value = res.data.serialNumber.slice(0, -2)
serialNumber.value = res.data.serialNumberPrefix;
initWebSocket();
});
}
};
//这里可以获取隧道简称
const getList = () => {
getTunnelList({
siteId: siteId,
}).then((res) => {
if (res.code === 1000) {
if (res.data.rows.length !== 0) {
isTunnel = true;
totalTunnelList.value = res.data.rows;
} else {
isTunnel = false;
}
}
});
};
let largeScreen = computed(() => largeScreenData);
const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) {
if (res.data.length === 0) {
if (isTunnel) {
ElMessage.warning("该站点下没有隧道可展示, 请添加设备后再试!");
} else {
ElMessage.warning("该站点下没有隧道, 请新增隧道后再试!");
}
} else {
if (!pattern.test(previewId)) {
getScreenInfo(previewId);
tunnelList.value.forEach((item, index) => {
if (item.value == previewId) {
initialIndex.value = index;
tunnelBtn.value.setActiveItem(index);
}
});
} else {
tunnelList.value = res.data;
getScreenInfo(res.data[0]?.value);
}
}
}
});
};
const changeTunnel = (e) => {
if (socket) {
socket.close();
}
let newObj = {};
tunnelList.value.forEach((item, index) => {
if (index === e) {
newObj = item;
}
});
showFan.value = false;
showBadLoading.value = 0;
showWindLoading.value = 0;
showFanLoading.value = 0;
// showUsedLoading.value = 0
pageInfo.pageNum = 1;
getScreenInfo(newObj.value);
nextTick(() => {
showFan.value = true;
});
};
const manageSelect = (index) => {
if (index === "站点管理") {
if (currentUserId.value) {
router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
}
} else if (index === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
localStorage.getItem("currentSiteId") +
"/byHome/" +
currentUserId.value
);
}
} else if (index === "用户管理") {
if (currentSiteId.value) {
router.push("/user/" + localStorage.getItem("currentSiteId"));
}
}
if (socket) {
socket.close();
}
};
const handleChangeSite = debounce((item) => {
if (socket) {
socket.close();
}
currentSite.value = item.label;
currentSiteId.value = item.value;
getTunnel(item.value);
showFan.value = false;
nextTick(() => {
showFan.value = true;
});
localStorage.setItem("site", currentSite.value);
localStorage.setItem("currentSiteId", currentSiteId.value);
if (tunnelIdFlag) {
router.push("/" + tunnelIdFlag + "/" + currentSiteId.value);
}
showTunnelTitle.value = false;
nextTick(() => {
showTunnelTitle.value = true;
});
}, 100);
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value;
};
@@ -724,18 +329,14 @@ const handleLogout = () => {
router.push("/login");
});
};
const previousBtn = () => {
tunnelBtn.value.prev();
};
const nextBtn = () => {
tunnelBtn.value.next();
};
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
// let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
// let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`;
// let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
let wsUrl = import.meta.env.VITE_BASE_WSURL + `/${token}/${serialNumber.value}`;
// let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
// let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
socket = new WebSocket(wsUrl);
//连接发生错误的回调方法
socket.onerror = function () {
@@ -750,11 +351,10 @@ const initWebSocket = () => {
// console.log("服务器返回的信息: ", JSON.parse(event.data));
const type = JSON.parse(event.data).type;
const data = JSON.parse(event.data).data;
if (type === "equipment") {
if (type === "simulate") {
data.forEach((item) => {
if (item.typeKey === "frequency") {
socketData.leftData = data;
// console.log(socketData.leftData);
} else if (item.typeKey === "windPressure") {
socketData.windPressure = data;
} else if (item.typeKey === "sensor") {
@@ -762,6 +362,9 @@ const initWebSocket = () => {
} else if (item.typeKey === "windSpeed") {
socketData.windSpeed = data;
}
nextTick(() => {
previewRef.value.changePointValue(item)
})
});
}
};
@@ -834,20 +437,55 @@ const initWebSocket = () => {
</style>
<style lang="scss" scoped>
.all-btn {
cursor: pointer;
padding: 10px 20px;
border-radius: 11px;
border: 2px solid #08b7b8;
color: #0be9fa;
text-align: center;
margin-left: 40px;
font-size: 38px;
&:hover {
color: #f7b500;
.box-top {
//display: flex;
//justify-content: space-between;
position: relative;
.all-btn {
cursor: pointer;
padding: 10px 20px;
border-radius: 11px;
border: 2px solid #08b7b8;
color: #0be9fa;
text-align: center;
margin-left: 40px;
font-size: 38px;
&:hover {
color: #f7b500;
}
}
.back-tunnel {
position: absolute;
top: 46px;
cursor: pointer;
margin: 0 0 0 70px;
display: flex;
align-items: center;
width: 178px;
height: 70px;
line-height: 70px;
border-radius: 11px;
border: 2px solid #08B7B8;
font-size: 38px;
color: #FFFFFF;
z-index: 9999;
.back-icon {
margin-right: 20px;
margin-left: 23px;
width: 33px;
height: 33px;
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
}
}
}
#main {
height: 100%;
width: 100%;

262
src/views/tunnel-simulate/tunnel-list.vue
View File

@@ -1,13 +1,10 @@
<template>
<div class="tunnel-bgc">
<div class="box-top">
<div class="back-tunnel" @click="handleGoSiteOrIndex">
<div class="back-tunnel" @click="router.push('/')">
<div class="back-icon"></div>
<span>返回</span>
</div>
<div class="site-name">
{{ siteName }}
</div>
<tunnel-title/>
<div class="all-del-btn" v-if="showOperation">
<div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
@@ -21,8 +18,8 @@
</div>
</div>
</div>
<div class="box-content" >
<div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
<div class="box-content">
<div class="site-box" v-for="item in tunnelList" :key="item.projectId">
<div class="top">
<span>{{ item.tunnelName }}</span>
<span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
@@ -31,10 +28,13 @@
</div>
<div class="box-center">
<div>
<!-- @click="handlePreview(item.tunnelId)"-->
<div class="left-img"></div>
<div style="display: flex;justify-content: center">
<div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.tunnelId)">
<div style="display: flex;justify-content: space-around">
<div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">
<div class="edit-icon"></div>
<div>编辑</div>
</div>
<div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.projectId)">
<div class="edit-icon"></div>
<div>去模拟</div>
</div>
@@ -44,7 +44,7 @@
<div class="icons-block">
<div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
<div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
<span>{{ equItem.name }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
<span>{{ equItem.name }}：0</span>
</div>
</div>
</div>
@@ -52,7 +52,7 @@
</div>
<div class="site-box add-box" @click="handleAdd" v-if="showOperation">
<div class="add-icon"></div>
<div style="cursor: pointer">添加隧道</div>
<div style="cursor: pointer">添加模拟隧道</div>
</div>
</div>
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
@@ -72,17 +72,8 @@
<el-form-item label="施工长度" prop="constructionLength">
<el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
</el-form-item>
<el-form-item label="风机初始频率" prop="fanInitialFrequency">
<el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>
</el-form-item>
<el-form-item label="爆破量级" prop="burstLevel">
<el-input type="number" v-model="form.burstLevel" placeholder="请输入爆破量级"/>
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="form.isDefault">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
<el-form-item label="序列号" prop="serialNumber">
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
</el-form-item>
<el-form-item label="隧道备注">
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
@@ -109,19 +100,15 @@
<script setup>
import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
import {getSiteDrawing, getSiteDetail} from "@/api/site";
import {
deleteSimulateTunnel,
addSimulateTunnel,
getSimulateTunnelList,
getSimulateTunnelDetail, editSimulateTunnel
} from "@/api/tunnelManage";
import TunnelTitle from "@/components/tunnelTitle/index.vue";
import {getTunnelBySiteId} from "@/api/largeScreen";
import {debounce} from 'lodash'
const serialNumberList = ref([
{
serialNumber: '',
serialNumberType: ''
}
])
const validateNumber = (rule, value) => {
const reg = /^[A-Za-z0-9]+$/;
return reg.test(value);
@@ -130,7 +117,6 @@ const validateSerialNumberPrefix = (rule, value) => {
return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
}
const router = useRouter()
const siteImage = ref()
const showAddIcon = ref(false)
const params = router.currentRoute.value.params;
const siteId = reactive(params.siteId)
@@ -141,6 +127,7 @@ const formRules = ref({
tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
serialNumber: [{required: true, message: '请输入序列号', trigger: ['blur', 'change']}],
})
const showFirst = ref(false)
const showOperation = ref(true)
@@ -196,28 +183,16 @@ const iconsList = ref([
num: 0
},
])
const title = ref('新增隧道')
const showNull = ref(false);
const title = ref('新增模拟隧道')
const isVisited = ref(false);
const tunnelIds = ref([])
const tunnelNameList = ref([])
const siteName = ref(localStorage.getItem('site'))
const projectIds = ref([])
const form = ref({
tunnelName: '',
tunnelAlias: '',
serialNumberPrefix: '',
serialNumber: '',
// serialNumberOne: '',
totalLength: '',
referenceFrequency: '',
upTime: 0,
upFrequency: '',
dropTime: 0,
dropFrequency: 0,
remarks: '',
isDefault: false
});
const isEdit = ref(false)
const pageInfo = reactive({
pageNum: 1,
pageSize: 12
@@ -226,67 +201,9 @@ const total = ref(0);
onMounted(() => {
showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
})
const handleGoToSimulateTunnel = (tunnelId) => {
router.push('/simulate/' + tunnelId)
const handleGoToSimulateTunnel = (projectId) => {
router.push('/simulate/' + projectId)
}
const addSerialNumber = () => {
serialNumberList.value.push({
serialNumber: '',
serialNumberType: '',
})
}
const delSerialNumber = (index) => {
serialNumberList.value.splice(index, 1)
}
const getSiteImg = () => {
showNull.value = false
getSiteDrawing(siteId).then((res) => {
if (res.code === 1000) {
if (res.data.drawingData === null) {
// ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
// }).catch(()=>{
showNull.value = true
// })
} else {
showNull.value = false
siteImage.value = res.data.drawingData
}
}
});
}
const clickHot = (id) => {
console.log('点击热区===============')
router.push('/' + id + '/' + siteId)
}
// const testArr=[]
const clickHandler = (id) => {
// let obj=e.offsetX+','+e.offsetY
// testArr.push(obj)
// console.log('正确数值',testArr.map(item=>item).join())
// console.log('点击',e.offsetX+','+e.offsetY+',')
// console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
}
const handleGoSiteOrIndex = () => {
if (type === 'bySite') {
router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
} else if (type === 'byHome') {
router.push('/' + 'siteToHome/' + siteId)
}
}
//根据站点id获取隧道信息
const getTunnel = (id) => {
getSiteDetail(id).then((res) => {
if (res?.code === 1000) {
siteName.value = res.data.siteName
}
});
}
getTunnel(1)
const getList = () => {
const loading = ElLoading.service({
lock: true,
@@ -294,8 +211,7 @@ const getList = () => {
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
getTunnelList({
siteId: 1,
getSimulateTunnelList({
...pageInfo
}).then(res => {
if (res.code === 1000) {
@@ -303,7 +219,6 @@ const getList = () => {
tunnelList.value = res.data.rows
showFirst.value = (total.value / pageInfo.pageSize) > 1;
showAddIcon.value = (total.value / pageInfo.pageSize) == 1;
// siteName.value = res.data.siteName
} else {
ElMessage.warning(res.msg)
}
@@ -325,97 +240,76 @@ const handleCurrentChange = (val) => {
getList()
}
const handleSubmit = debounce((instance) => {
if (serialNumberList.value?.length > 0 && !serialNumberList.value[0].serialNumber && !serialNumberList.value[0].serialNumberType) {
serialNumberList.value = []
}
if (!instance) return
instance.validate(async (valid) => {
if (!valid) return
const data = {
siteId: siteId,
...form.value,
tunnelGatewayDtoList: serialNumberList.value
let res = null
if (title.value === '新增模拟隧道') {
res = await addSimulateTunnel(form.value)
} else {
res = await editSimulateTunnel(form.value)
}
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
isVisited.value = false
} else {
ElMessage.warning(res.msg)
}
// console.info("🚀 ~method:data -----", data)
addTunnel(data).then(res => {
if (res.code === 1000) {
ElMessage.success('新增成功')
getList()
isVisited.value = false
} else {
ElMessage.warning(res.msg)
}
})
})
}, 100)
//预览隧道
const handlePreview = (id) => {
if (id) {
getTunnelBySiteId(siteId).then((res) => {
if (res?.code === 1000) {
if (res.data.filter((item) => item.value == id).length === 0) {
ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
} else {
router.push('/' + id + '/' + siteId)
}
}
});
}
}
const handleGoToEditTunnel = (tunnelId) => {
isEdit.value = true
if (type === 'bySite') {
router.push('/edit/' + tunnelId + '/bySite/' + userId)
} else if (type === 'byHome') {
router.push('/edit/' + tunnelId + '/byHome/' + userId)
}
}
const handleChooseAll = debounce(() => {
tunnelList.value.map(item => {
item.checked = !item.checked
if (item.checked && !item.isDefault) {
tunnelIds.value.push(item.tunnelId)
projectIds.value.push(item.projectId)
} else if (!item.checked && !item.isDefault) {
tunnelIds.value.map((newItem, index) => {
if (newItem === item.tunnelId) {
tunnelIds.value.splice(index, 1)
projectIds.value.map((newItem, index) => {
if (newItem === item.projectId) {
projectIds.value.splice(index, 1)
}
})
}
})
}, 100)
const handleEditDevice = (tunnelId) => {
if (type === 'bySite') {
router.push('/device/' + tunnelId + '/bySite/' + userId)
} else if (type === 'byHome') {
router.push('/device/' + tunnelId + '/byHome/' + userId)
}
}
const restFrom = () => {
form.value = {
tunnelName: '',
tunnelAlias: '',
serialNumber: '',
totalLength: '',
referenceFrequency: '',
upTime: 0,
upFrequency: '',
dropTime: 0,
dropFrequency: '',
remarks: '',
isDefault: false
}
}
const getTunnelDetail = async (projectId) => {
const loading = ElLoading.service({
lock: true,
text: '正在加载系统资源...',
background: 'rgba(0, 0, 0, 0.7)',
customClass: 'allLoading'
})
await getSimulateTunnelDetail(projectId).then((res) => {
if (res?.code === 1000) {
form.value = res.data;
}
loading.close()
});
};
const handleGoToEditTunnel = (projectId) => {
restFrom()
title.value = '编辑模拟隧道'
getTunnelDetail(projectId)
isVisited.value = true
nextTick(() => {
// 清空校验
formInstance.value.clearValidate()
})
}
const handleAdd = () => {
restFrom()
title.value = '新增隧道'
title.value = '新增模拟隧道'
isVisited.value = true
serialNumberList.value = [
// {
// serialNumber: '',
// serialNumberType:''
// }
]
nextTick(() => {
// 清空校验
formInstance.value.clearValidate()
@@ -426,23 +320,18 @@ const getImageUrl = (name) => {
}
const handleClickSite = (type) => {
if (type.checked) {
tunnelIds.value.push(type.tunnelId)
tunnelNameList.value.push(type.tunnelName)
projectIds.value.push(type.projectId)
} else {
tunnelIds.value.map((item, index) => {
if (item === type.tunnelId) {
tunnelIds.value.splice(index, 1)
}
})
tunnelNameList.value.map((item, index) => {
if (item === type.tunnelName) {
tunnelNameList.value.splice(index, 1)
projectIds.value.map((item, index) => {
if (item === type.projectId) {
projectIds.value.splice(index, 1)
}
})
}
}
const handleMoreDelete = debounce(() => {
if (tunnelIds.value.length === 0) {
if (projectIds.value.length === 0) {
ElMessage.warning('请先选择隧道进行删除')
} else {
ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
@@ -451,12 +340,11 @@ const handleMoreDelete = debounce(() => {
type: 'warning',
customClass: 'delBox'
}).then(() => {
deleteTunnel(tunnelIds.value).then(res => {
deleteSimulateTunnel(projectIds.value).then(res => {
if (res.code === 1000) {
ElMessage.success(res.msg)
getList()
tunnelIds.value = []
tunnelNameList.value = []
projectIds.value = []
} else {
ElMessage.error(res.msg)
}

24
src/views/tunnel/index.vue
View File

@@ -336,10 +336,11 @@ const btnList = ref([
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
{
route: '/simulate',
icon: 'sp_icon_mngl.png',
name: '模拟仿真'
},
]);
const serialNumber = ref("");
const roleKey = ref("");
@@ -466,6 +467,7 @@ const getOtherInfo = () => {
getLargeScreenInfo().then((res) => {
if (res?.code === 1000) {
let routeArr = [];
res.data.routeList.push('/simulate')
res.data.routeList.forEach((item) => {
for (let btn of btnList.value) {
if (item === btn.route) {
@@ -620,12 +622,12 @@ const changeTunnel = (e) => {
showFan.value = true;
});
};
const manageSelect = (index) => {
if (index === "站点管理") {
const manageSelect = (name) => {
if (name === "站点管理") {
if (currentUserId.value) {
router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
}
} else if (index === "隧道管理") {
} else if (name === "隧道管理") {
if (currentSiteId.value && currentUserId.value) {
router.push(
"/tunnel/" +
@@ -634,10 +636,14 @@ const manageSelect = (index) => {
currentUserId.value
);
}
} else if (index === "用户管理") {
} else if (name === "用户管理") {
if (currentSiteId.value) {
router.push("/user/" + localStorage.getItem("currentSiteId"));
}
} else if (name === "模拟仿真") {
if (tunnelId.value) {
router.push("/simulate/tunnel/list");
}
}
if(socket){
socket.close()
@@ -689,7 +695,7 @@ const nextBtn = () => {
const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
// let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
// let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
socket = new WebSocket(wsUrl);

2
vite.config.js
View File

@@ -74,7 +74,7 @@ export default defineConfig({
// rewrite: (path) => path.replace(/^\/api/, ''),
// },
'/api': {
target: 'http://web-tunnel.feashow.com/api',
target: 'http://tunnel.feashow.com/api',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},