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

Merge pull request 'trp_dev' (#382) from trp_dev into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/382
This commit is contained in:
trp-ironman
2024-09-02 15:59:52 +00:00
parent 6bed6482a2 aadef41fff
commit d7bcd3d4d6
6 changed files with 1353 additions and 972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/tunnel.js
View File

@@ -1,8 +1,17 @@
import request from '@/utils/request.js' import request from "@/utils/request.js";
export const getTunnelOption = (siteId) => { export const getTunnelOption = (siteId) => {
return request({ return request({
url: `/tunnel/tunnel/option/${siteId}`, url: `/tunnel/tunnel/option/${siteId}`,
method: 'get' method: "get",
}) });
} };
// 数据3d隧道模拟接口渲染数据源
export const getTunnelSimulateData = (siteId) => {
return request({
url: `/tunnel/tunnel/data/${siteId}`,
method: "get",
params,
});
};

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

@@ -2,25 +2,40 @@
<div id="scene"> <div id="scene">
<div id="cvs" ref="content"></div> <div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" /> <dev-info ref="info" :devInfo="devInfo" />
<pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel" <pre-dialog
:hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType" ref="edit"
:equipmentName="equipmentName" :equipmentValue="equipmentValue" /> @addEquipment="handleAddEqu"
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style=" @removeEquipment="handleRemoveEqu"
@cancel="handleCancel"
:hasDev="hasDevice"
:pointNum="pointNum"
:pointGap="pointGap"
:equipmentType="equipmentType"
:equipmentName="equipmentName"
:equipmentValue="equipmentValue"
:devRealtimeDetail="crtDevDetail"
/>
<el-dialog
v-model="centerDialogVisible"
width="30%"
destroy-on-close
center
:show-close="false"
style="
margin: 20% auto; margin: 20% auto;
width: 569px; width: 569px;
height: 330px; height: 330px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
"> "
>
<p id="remove-title">是否确定删除该设备</p> <p id="remove-title">是否确定删除该设备</p>
<div class="btn"> <div class="btn">
<button @click="centerDialogVisible = false">取消</button> <button @click="centerDialogVisible = false">取消</button>
<button @click="handleConfirmAddEqu">确定</button> <button @click="handleConfirmAddEqu">确定</button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@@ -28,8 +43,7 @@
import * as three from "three"; import * as three from "three";
import ThreeDScene from "./sceneClass/demo.js"; import ThreeDScene from "./sceneClass/demo.js";
import DevInfo from "./displayInfoComp/DevInfo.vue"; import DevInfo from "./displayInfoComp/DevInfo.vue";
import PreDialog from "./preEquComp/preDialog.vue" import PreDialog from "./preEquComp/preDialog.vue";
// 导入模模型加载器 // 导入模模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -54,6 +68,9 @@ import { ElMessage } from "element-plus";
import { editTunnel, getTunnelDetail } from "@/api/tunnelManage"; import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
import { useModelSceneStore } from "@/store/modelSceneStore"; import { useModelSceneStore } from "@/store/modelSceneStore";
import { getLargeScreen } from "@/api/largeScreen";
// 获取html标签跟随组件dom // 获取html标签跟随组件dom
const content = ref(null); const content = ref(null);
const info = ref(null); const info = ref(null);
@@ -65,11 +82,11 @@ const form = ref({
tunnelName: "", tunnelName: "",
serialNumber: "", serialNumber: "",
totalLength: "", totalLength: "",
referenceFrequency: '', referenceFrequency: "",
upTime: '', upTime: "",
upFrequency: '', upFrequency: "",
dropTime: '', dropTime: "",
dropFrequency: '', dropFrequency: "",
isDefault: false, isDefault: false,
remarks: "", remarks: "",
}); });
@@ -77,13 +94,41 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader(); let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding; let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore(); const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 const params = defineProps([
"isedit",
"tunnelId",
"tunnelLen",
"largeScreen",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
// 根据设备ID获取当前设备实时数据
const crtDevDetail = ref({
equipmentName: "--",
unit: "-",
value: "-",
});
const getDevDetail = async (devId) => {
crtDevDetail.value = {
equipmentName: "--",
unit: "-",
value: "-",
};
const res = await getLargeScreen(params.tunnelId);
const devList = [
...res.data.frequencyChangerList,
...res.data.sensorList,
...res.data.windPressureSensorList,
];
crtDevDetail.value =
devList.find((sensor) => sensor.equipmentId == devId) || crtDevDetail.value;
};
// console.log(load); // console.log(load);
let isedit = ref(params.isedit) let isedit = ref(params.isedit);
let fanData; let fanData;
let tunnelAlias = reactive('') let tunnelAlias = reactive("");
watch( watch(
() => params.largeScreen, () => params.largeScreen,
@@ -92,7 +137,7 @@ watch(
params.largeScreen = now; params.largeScreen = now;
// console.log(toRaw(params.largeScreen.value).frequencyChangerList); // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
// console.log(params.fanList); // console.log(params.fanList);
fanData = (toRaw(params.largeScreen.value)).frequencyChangerList; fanData = toRaw(params.largeScreen.value).frequencyChangerList;
// console.log(fanData); // console.log(fanData);
// 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态 // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
watch( watch(
@@ -105,40 +150,51 @@ watch(
if (fanList[0].autoMode !== undefined) { if (fanList[0].autoMode !== undefined) {
// console.log(fanData); // console.log(fanData);
// console.log(fanList); // console.log(fanList);
fanList.map(item => { fanList.map((item) => {
if (item.equipmentId == fanData[0].equipmentId) { if (item.equipmentId == fanData[0].equipmentId) {
// console.log(item.equipmentId); // console.log(item.equipmentId);
//第一个符合条件 //第一个符合条件
fanData[0].breakdown = item.breakdown fanData[0].breakdown = item.breakdown;
fanData[0].running = item.running fanData[0].running = item.running;
// console.log(demo.scene); // console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) { if (
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene) demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[0].equipmentId
) {
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
// console.log('111'); // console.log('111');
} } else if (
else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) { demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[0].equipmentId
) {
// console.log("222"); // console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene) changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
} }
// console.log(item); // console.log(item);
// console.log(fanData[0]); // console.log(fanData[0]);
} else { } else {
// 第二个符合条件 // 第二个符合条件
// console.log(item.equipmentId); // console.log(item.equipmentId);
fanData[1].breakdown = item.breakdown fanData[1].breakdown = item.breakdown;
fanData[1].running = item.running fanData[1].running = item.running;
// console.log(demo.scene); // console.log(demo.scene);
if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) { if (
demo.scene.Fan1targetPoint.info.equipmentId ==
fanData[1].equipmentId
) {
// console.log('111'); // console.log('111');
changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene) changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
} else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) { } else if (
demo.scene.Fan2targetPoint.info.equipmentId ==
fanData[1].equipmentId
) {
// console.log("222"); // console.log("222");
changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene) changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
} }
// console.log(item); // console.log(item);
// console.log(fanData[1]); // console.log(fanData[1]);
} }
}) });
} }
// console.log(fanData); // console.log(fanData);
@@ -149,15 +205,13 @@ watch(
{ deep: true } { deep: true }
); );
const getTunnel = () => { const getTunnel = () => {
if (params.tunnelId !== 0) { if (params.tunnelId !== 0) {
getTunnelDetail(params.tunnelId).then((res) => { getTunnelDetail(params.tunnelId).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
form.value = res.data; form.value = res.data;
// console.log(form.value.tunnelAlias); // console.log(form.value.tunnelAlias);
tunnelAlias = form.value.tunnelAlias tunnelAlias = form.value.tunnelAlias;
} }
}); });
} }
@@ -190,17 +244,16 @@ watch(
{ deep: true } { deep: true }
); );
watch( watch(
() => params.tunnelId, () => params.tunnelId,
(now) => { (now) => {
params.tunnelId = now params.tunnelId = now;
console.log(params.tunnelId); console.log(params.tunnelId);
// getTunnelPreview(); // getTunnelPreview();
// console.log(form.value); // console.log(form.value);
}, },
{ deep: true } { deep: true }
) );
//这里是改变风机颜色的代码 //这里是改变风机颜色的代码
function changeFanColor(fanData, targetPoint, scene) { function changeFanColor(fanData, targetPoint, scene) {
@@ -210,7 +263,7 @@ function changeFanColor(fanData, targetPoint, scene) {
//if保证存在风机（即有长度再进行遍历） //if保证存在风机（即有长度再进行遍历）
for (let i = 0; i < fanData.length; i++) { for (let i = 0; i < fanData.length; i++) {
//先做匹配操作 //先做匹配操作
let fanType = fanData[i].equipmentType let fanType = fanData[i].equipmentType;
//有符合条件的风机进来了 //有符合条件的风机进来了
if (targetPoint.info.typeKey == fanType) { if (targetPoint.info.typeKey == fanType) {
//下面进行变色需要的逻辑判断了 //下面进行变色需要的逻辑判断了
@@ -222,9 +275,9 @@ function changeFanColor(fanData, targetPoint, scene) {
// console.log(obj); // console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色 // 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) { if (obj.isMesh) {
obj.material.color.set(0xFF0000) obj.material.color.set(0xff0000);
} }
}) });
} }
}); });
} else { } else {
@@ -237,9 +290,9 @@ function changeFanColor(fanData, targetPoint, scene) {
// console.log(obj); // console.log(obj);
// 判断子对象是否是物体，如果是，更改其颜色 // 判断子对象是否是物体，如果是，更改其颜色
if (obj.isMesh) { if (obj.isMesh) {
obj.material.color.set(0x008000) obj.material.color.set(0x008000);
} }
}) });
} }
}); });
} else { } else {
@@ -260,7 +313,10 @@ async function handleMounted() {
demo = new ThreeDScene(three, content.value); demo = new ThreeDScene(three, content.value);
//看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行) //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
demo.isedit = params.isedit; demo.isedit = params.isedit;
let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf"); let tunnelasync = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf"
);
demo.addOrbitControls(OrbitControls); demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN); demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms); demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
@@ -279,7 +335,6 @@ async function handleMounted() {
// ); // );
// 初始化设备模型 // 初始化设备模型
try { try {
//在这加载隧道 //在这加载隧道
const map = new Map(); const map = new Map();
map.set("equ_fan", await loadModel("/devicesModel/model2.obj")); map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
@@ -293,22 +348,19 @@ async function handleMounted() {
demo.previewtunnelModeInit(toRaw(modelList.value), fanData); demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
// setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000") // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
demo.SignsInf(tunnelAlias, String(params.tunnelLen.value)) demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));
} catch (err) { } catch (err) {
if (err == undefined) { if (err == undefined) {
return return;
} else { } else {
console.log(err);
ElMessage({ ElMessage({
message: "场景初始化异常---！", message: "场景初始化异常！",
type: "warning", type: "warning",
}); });
} }
} }
} }
// function checkTunnelInit(equipmentList) { // function checkTunnelInit(equipmentList) {
// equipmentList.forEach((item) => { // equipmentList.forEach((item) => {
// let equipment = toRaw(item) // let equipment = toRaw(item)
@@ -385,10 +437,10 @@ function rClickCallback(demo) {
hasDevice.value = targetPoint.hasDevice; hasDevice.value = targetPoint.hasDevice;
targetP.value = targetPoint; targetP.value = targetPoint;
//这里是初始化必经之路！！！ //这里是初始化必经之路！！！
const equipmentList = modelStore.initModelDataPreview(params.tunnelId) const equipmentList = modelStore.initModelDataPreview(params.tunnelId);
equipmentList.then((result) => { equipmentList.then((result) => {
previewEquInfProcess(result, targetP.value) previewEquInfProcess(result, targetP.value);
}) });
pointNum.value = Number( pointNum.value = Number(
targetPoint.name.substring( targetPoint.name.substring(
targetPoint.name.indexOf("_") + 1, targetPoint.name.indexOf("_") + 1,
@@ -412,8 +464,8 @@ function throttle(fn, delay) {
timer = setTimeout(function () { timer = setTimeout(function () {
fn.apply(_this, args); fn.apply(_this, args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器 timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}, delay) }, delay);
} };
} }
// 添加设备 // 添加设备
@@ -434,7 +486,7 @@ function handleAddEqu(formInfo) {
const centerDialogVisible = ref(false); const centerDialogVisible = ref(false);
// 删除设备 // 删除设备
function handleRemoveEqu() { function handleRemoveEqu() {
if (!targetP.hasDevice) { if (!targetP.value.hasDevice) {
ElMessage({ ElMessage({
message: "该点位不存在设备！", message: "该点位不存在设备！",
type: "warning", type: "warning",
@@ -472,39 +524,35 @@ function handleCancel() {
demo.clearTagsObj(); demo.clearTagsObj();
} }
let equipmentType = ref(0) let equipmentType = ref(0);
let equipmentName = ref(0) let equipmentName = ref(0);
let equipmentValue = ref(0) let equipmentValue = ref(0);
async function previewEquInfProcess(equipmentList, targetP) {
function previewEquInfProcess(equipmentList, targetP) {
for (const equipment of equipmentList) { for (const equipment of equipmentList) {
if (equipment.position == targetP.name) { if (equipment.position == targetP.name) {
equipmentType.value = equipment.equipmentType equipmentType.value = equipment.equipmentType;
//需要将获取到的设备列表进行序列化 //需要将获取到的设备列表进行序列化
equipmentName.value = equipment.equipmentName equipmentName.value = equipment.equipmentName;
equipmentValue.value = equipment.threshold equipmentValue.value = equipment.threshold;
if (equipmentType.value == 'frequency') { if (equipmentType.value == "frequency") {
equipmentType.value = '风机' equipmentType.value = "风机";
} }
if (equipmentType.value == 'windPressure') { if (equipmentType.value == "windPressure") {
equipmentType.value = '风压传感器' equipmentType.value = "风压传感器";
} }
if (equipmentType.value == 'sensor') { if (equipmentType.value == "sensor") {
equipmentType.value = '其他传感器' equipmentType.value = "其他传感器";
} }
// console.log(equipmentType.value); const { equipmentId } = targetP.info;
// console.log(equipmentName.value); getDevDetail(equipmentId);
// console.log(equipmentValue.value);
} }
} }
} }
watch(params.devRealtimeData, () => {
console.log("devRealtimeData：", devRealtimeData);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

48
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -3,17 +3,34 @@
<div id="cvs" ref="content"></div> <div id="cvs" ref="content"></div>
<dev-info ref="info" :devInfo="devInfo" /> <dev-info ref="info" :devInfo="devInfo" />
<!-- 这里的预览模式需要做成不能修改的模式 --> <!-- 这里的预览模式需要做成不能修改的模式 -->
<edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel" <edit-dialog
:hasDev="hasDevice" :pointNum="pointNum" :tunnelId="params.tunnelId" :position="targetP?.name" ref="edit"
:hasEquipment="hasDevice" :pointGap="pointGap" :form="params.form" /> @addEquipment="handleAddEqu"
<el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style=" @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; margin: 20% auto;
width: 569px; width: 569px;
height: 330px; height: 330px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
border: 2px solid #0f82af; border: 2px solid #0f82af;
"> "
>
<p id="remove-title">是否确定删除该设备</p> <p id="remove-title">是否确定删除该设备</p>
<div class="btn"> <div class="btn">
<button @click="centerDialogVisible = false">取消</button> <button @click="centerDialogVisible = false">取消</button>
@@ -61,7 +78,13 @@ const loader = new OBJLoader();
let hdrLoader = new RGBELoader(); let hdrLoader = new RGBELoader();
let backColorSet = three.sRGBEncoding; let backColorSet = three.sRGBEncoding;
const modelStore = useModelSceneStore(); const modelStore = useModelSceneStore();
const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理 const params = defineProps([
"isedit",
"tunnelId",
"tunnelLength",
"form",
"devRealtimeData",
]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
let isedit = ref(params.isedit); let isedit = ref(params.isedit);
let tunnelId = reactive(params.tunnelId); let tunnelId = reactive(params.tunnelId);
@@ -116,11 +139,10 @@ async function handleMounted() {
// modelList.value = await initData(params.tunnelId, params.form); // modelList.value = await initData(params.tunnelId, params.form);
console.log("test", modelList.value); console.log("test", modelList.value);
demo.editTunnelInit(toRaw(modelList.value)); demo.editTunnelInit(toRaw(modelList.value));
demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength)) demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
} catch (err) { } catch (err) {
console.log(err);
ElMessage({ ElMessage({
message: "场景初始化异常---！", message: "场景初始化异常！",
type: "warning", type: "warning",
}); });
} }
@@ -247,8 +269,7 @@ function handleConfirmAddEqu() {
type: "success", type: "success",
}); });
}) })
.catch( .catch((res) => {
(res) => {
console.log(res); console.log(res);
ElMessage({ ElMessage({
message: "删除失败！", message: "删除失败！",
@@ -291,6 +312,11 @@ const ThreeConfig = {
}, },
msg: "dda", msg: "dda",
}; };
//=================实时更新数据
watch(devRealtimeData, () => {
console.log("devRealtimeData：", devRealtimeData);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@@ -26,35 +26,32 @@
:placeholder="params.equipmentName" disabled> :placeholder="params.equipmentName" disabled>
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
</el-select> --> </el-select> -->
<p>{{ params.equipmentName }}</p> <p>{{ params.devRealtimeDetail.equipmentName }}</p>
</div> </div>
<div class="setting-item"> <div class="setting-item">
<p>参数:</p> <p>{{ getDevParam + ":" }}</p>
<p>31.3%</p> <p>
{{
params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
"--"
}}
</p>
</div> </div>
<!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput" <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
:disabled="isDisabledInputNum" /> :disabled="isDisabledInputNum" />
<p>{{ params.equipmentValue }}</p> --> <p>{{ params.equipmentValue }}</p> -->
</div> </div>
<div class="btn"> <!-- <div class="btn">
<!-- <button @click="removeEquipment" disabled>删除</button> --> <button @click="removeEquipment">删除</button>
<!-- <button @click="addEquipment" disabled>添加</button> --> <button @click="addEquipment" disabled>添加</button>
</div> </div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import InputNum from "./childComps/InputNum.vue"; import InputNum from "./childComps/InputNum.vue";
import { import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
reactive,
computed,
defineEmits,
defineProps,
watch,
nextTick,
ref,
} from "vue";
// 定义事件发射器，父组件监听 // 定义事件发射器，父组件监听
const emit = defineEmits([ const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
"equipmentType", "equipmentType",
"equipmentName", "equipmentName",
"equipmentValue", "equipmentValue",
"devRealtimeDetail",
]); //隧道第几个锚点 ]); //隧道第几个锚点
// 当前风压 // 当前风压
let p = ref(57); let p = ref(57);
const getDevParam = computed(() => {
if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
return "风压";
} else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
return "频率";
}
switch (params.devRealtimeDetail.equipmentType) {
case "windDirection":
return "风向";
case "temperature":
return "温度";
case "windSpeed":
return "风速";
case "humidness":
return "湿度";
default:
return "浓度";
}
});
// function EquInf() { // function EquInf() {
// // 发射事件给tunnel父组件 // // 发射事件给tunnel父组件
// emit("EquInf"); // emit("EquInf");
@@ -171,22 +187,22 @@ function addEquipment() {
equipmentSetting.equipmentType = ""; equipmentSetting.equipmentType = "";
equipmentSetting.threshold = ""; equipmentSetting.threshold = "";
} }
const equipmentType = { // const equipmentType = {
label: String, //传感器类型 // label: String, //传感器类型
typeId: String, //传感器类型ID(方便查找该类型的所有设备) // typeId: String, //传感器类型ID(方便查找该类型的所有设备)
}; // };
// 通过以上选项请求以下具体哪个设备 // // 通过以上选项请求以下具体哪个设备
const equipment = { // const equipment = {
label: String, //传感器编号加名称 // label: String, //传感器编号加名称
equId: String, // 传感器Id // equId: String, // 传感器Id
}; // };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#edit-dialog { #edit-dialog {
// width: 540px; // width: 540px;
width: 230px; width: 240px;
height: 120px; // height: 120px;
// min-height: 683px; // min-height: 683px;
background: rgba(7, 35, 72, 0.79); background: rgba(7, 35, 72, 0.79);
border-radius: 20px; border-radius: 20px;
@@ -203,7 +219,7 @@ const equipment = {
margin: 20px 20px 0px 30px; margin: 20px 20px 0px 30px;
p { p {
width: 388px; width: 400px;
height: 35px; height: 35px;
font-size: 24px; font-size: 24px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
@@ -243,19 +259,21 @@ const equipment = {
padding: 15px 15px 5px 15px; padding: 15px 15px 5px 15px;
display: flex; display: flex;
gap: 10px; gap: 10px;
p {
width: 190px;
height: 35px;
line-height: 35px; line-height: 35px;
font-size: 18px; font-size: 18px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
p:nth-child(1) {
width: 80px;
height: 35px;
color: #ffffff; color: #ffffff;
text-align: right; text-align: right;
} }
p:nth-child(2) { p:nth-child(2) {
color: #f7b500; color: #f7b500;
height: 35px;
text-align: left; text-align: left;
flex: 2;
} }
} }
@@ -295,7 +313,25 @@ const equipment = {
} }
.btn { .btn {
margin: 100px 40px 40px 40px; display: flex;
justify-content: flex-end;
button {
cursor: pointer;
transition: transform 0.1s linear 0s;
}
& :nth-child(1) {
width: 95px;
height: 39px;
border-radius: 11px;
border: 2px solid #0f82af;
background: transparent;
font-size: 20px;
font-family: MicrosoftYaHei;
color: #08b7b8;
line-height: 39px;
margin: 15px;
}
/* margin: 100px 40px 40px 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -331,10 +367,10 @@ const equipment = {
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
line-height: 60px; line-height: 60px;
} }*/
button:active { button:active {
transform: scale(0.9); transform: scale(0.98);
} }
} }
} }

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

File diff suppressed because it is too large Load Diff

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

File diff suppressed because it is too large Load Diff