377 lines
8.8 KiB
Vue
377 lines
8.8 KiB
Vue
<template>
|
||
<div id="edit-dialog">
|
||
<!-- <div class="distance-back"> -->
|
||
<!-- <p>当前距离洞口：
|
||
<span>
|
||
{{ pointDistance_str }}
|
||
</span>
|
||
</p> -->
|
||
<!-- <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" /> -->
|
||
<!-- </div> -->
|
||
<!-- <div class="equ-info">当前风压:
|
||
<span>{{ p }}Pa</span>
|
||
</div> -->
|
||
<div class="setting">
|
||
<!-- <div class="setting-item"> -->
|
||
<!-- <p>传感器类型</p> -->
|
||
<!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
|
||
:placeholder="params.equipmentType" disabled>
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select> -->
|
||
<!-- <p>{{ params.equipmentType }}</p> -->
|
||
<!-- </div> -->
|
||
<div class="setting-item">
|
||
<p>设备名称:</p>
|
||
<!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
|
||
:placeholder="params.equipmentName" disabled>
|
||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select> -->
|
||
<p>{{ params.devRealtimeDetail.equipmentName }}</p>
|
||
</div>
|
||
<div class="setting-item">
|
||
<p>{{ getDevParam + ":" }}</p>
|
||
<p>
|
||
{{
|
||
params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
|
||
"--"
|
||
}}
|
||
</p>
|
||
</div>
|
||
<!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
|
||
:disabled="isDisabledInputNum" />
|
||
<p>{{ params.equipmentValue }}</p> -->
|
||
</div>
|
||
<!-- <div class="btn">
|
||
<button @click="removeEquipment">删除</button>
|
||
<button @click="addEquipment" disabled>添加</button>
|
||
</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import InputNum from "./childComps/InputNum.vue";
|
||
|
||
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
|
||
|
||
// 定义事件发射器，父组件监听
|
||
const emit = defineEmits([
|
||
"cancel",
|
||
"removeEquipment",
|
||
"addEquipment",
|
||
"EquInf",
|
||
]);
|
||
const params = defineProps([
|
||
"pointNum",
|
||
"pointGap",
|
||
"equipmentType",
|
||
"equipmentName",
|
||
"equipmentValue",
|
||
"devRealtimeDetail",
|
||
]); //隧道第几个锚点
|
||
|
||
// 当前风压
|
||
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() {
|
||
// // 发射事件给tunnel父组件
|
||
// emit("EquInf");
|
||
// }
|
||
|
||
// console.log(params.equipmentType);
|
||
// console.log(params.equipmentName);
|
||
// console.log(params.equipmentValue);
|
||
|
||
// let equipmentTypeInf = ref(params.equipmentType)
|
||
// let equipmentNameInf = ref(params.equipmentName)
|
||
// let equipmentValueInf = ref(params.equipmentValue)
|
||
|
||
//计算锚点之间距离
|
||
const pointDistance_str = computed(
|
||
() =>
|
||
`${params.pointGap}米*${params.pointNum}=${
|
||
params.pointGap * params.pointNum
|
||
}米`
|
||
);
|
||
|
||
// 请求数据模型
|
||
const equipmentSetting = reactive({
|
||
equipmentType: "", //设备类型
|
||
chooseEquipment: "", //设备选择(设备名称)
|
||
threshold: "", //阈值
|
||
});
|
||
|
||
// 设备类型选项参数
|
||
const options = reactive([
|
||
{ label: "风机", value: "fan" },
|
||
{ label: "风压传感器", value: "sensors" },
|
||
{ label: "普通传感器", value: "sensors_2" },
|
||
]);
|
||
|
||
// 设备编号参数
|
||
let options2 = reactive([]);
|
||
|
||
let isDisabledInputNum = ref(false);
|
||
watch(
|
||
() => equipmentSetting.equipmentType,
|
||
() => {
|
||
let label;
|
||
options2 = [];
|
||
equipmentSetting.chooseEquipment = "";
|
||
isDisabledInputNum = false;
|
||
if (equipmentSetting.equipmentType === "fan") {
|
||
label = "风机";
|
||
isDisabledInputNum = true;
|
||
}
|
||
if (equipmentSetting.equipmentType === "windPressure") label = "风压传感器";
|
||
if (equipmentSetting.equipmentType === "sensors") label = "普通传感器";
|
||
for (let i = 1; i < 11; i++) {
|
||
options2.push({ label: `${i}号${label}`, value: `${label}_${i}` });
|
||
}
|
||
}
|
||
);
|
||
|
||
// const obj = {
|
||
// equipmentId: String, //传感器id
|
||
// equipmentName: String, //设备名称
|
||
// pointName: String, //附着点名称（定位）
|
||
// equipmentType: String, //设备类型（类型可根据后端）
|
||
// equipmentOnline: Boolean, //是否在线
|
||
// isFan: Boolean, //是不是风机
|
||
// fanSpeed: Number, //F
|
||
// };
|
||
|
||
// const tunnel = {
|
||
// tunnelId: "",
|
||
// };
|
||
|
||
// 显示锚点距离
|
||
let point_num = ref(0);
|
||
|
||
function handelInput(e) {
|
||
equipmentSetting.threshold = e;
|
||
}
|
||
|
||
// 处理取消事件
|
||
function handleCancel() {
|
||
// 发射事件给tunnel父组件
|
||
emit("cancel");
|
||
}
|
||
|
||
// 删除模型
|
||
function removeEquipment() {
|
||
emit("removeEquipment");
|
||
}
|
||
|
||
// 添加设备
|
||
function addEquipment() {
|
||
emit("addEquipment", equipmentSetting);
|
||
equipmentSetting.chooseEquipment = "";
|
||
equipmentSetting.equipmentType = "";
|
||
equipmentSetting.threshold = "";
|
||
}
|
||
// const equipmentType = {
|
||
// label: String, //传感器类型
|
||
// typeId: String, //传感器类型ID(方便查找该类型的所有设备)
|
||
// };
|
||
// // 通过以上选项请求以下具体哪个设备
|
||
// const equipment = {
|
||
// label: String, //传感器编号加名称
|
||
// equId: String, // 传感器Id
|
||
// };
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
#edit-dialog {
|
||
width: 240px;
|
||
// height: 120px;
|
||
// min-height: 683px;
|
||
background: rgba(7, 35, 72, 0.79);
|
||
border-radius: 20px;
|
||
border: 2px solid #0f82af;
|
||
position: absolute;
|
||
z-index: 999;
|
||
display: block;
|
||
opacity: 0;
|
||
|
||
.distance-back {
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 20px 20px 0px 30px;
|
||
|
||
p {
|
||
width: 400px;
|
||
height: 35px;
|
||
font-size: 24px;
|
||
font-family: MicrosoftYaHei;
|
||
color: white;
|
||
line-height: 35px;
|
||
}
|
||
|
||
span {
|
||
color: #f7b500;
|
||
}
|
||
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
|
||
img:active {
|
||
transform: scale(0.9);
|
||
}
|
||
}
|
||
|
||
.equ-info {
|
||
width: 190px;
|
||
height: 35px;
|
||
font-size: 26px;
|
||
font-family: MicrosoftYaHei;
|
||
color: white;
|
||
line-height: 35px;
|
||
margin: 20px 30px 0px 30px;
|
||
}
|
||
|
||
.equ-info span {
|
||
color: #f7b500;
|
||
}
|
||
|
||
.setting {
|
||
.setting-item {
|
||
padding: 15px 15px 5px 15px;
|
||
display: flex;
|
||
gap: 10px;
|
||
line-height: 35px;
|
||
font-size: 18px;
|
||
font-family: MicrosoftYaHei;
|
||
p:nth-child(1) {
|
||
width: 80px;
|
||
height: 35px;
|
||
color: #ffffff;
|
||
text-align: right;
|
||
}
|
||
|
||
p:nth-child(2) {
|
||
color: #f7b500;
|
||
height: 35px;
|
||
text-align: left;
|
||
flex: 2;
|
||
}
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
width: 284px;
|
||
//height: 51px;
|
||
border: transparent;
|
||
}
|
||
|
||
:deep(.el-input--suffix) {
|
||
width: 284px;
|
||
height: 51px;
|
||
background: rgba(7, 35, 72, 0.79);
|
||
border: 2px solid #0f82af;
|
||
}
|
||
|
||
:deep(.el-input__wrapper) {
|
||
background: transparent;
|
||
border: none !important;
|
||
padding: 0px 12px 0px 10px;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:deep(.el-input__wrapper input) {
|
||
background: transparent;
|
||
height: 100%;
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #08b7b8;
|
||
line-height: 37px;
|
||
}
|
||
|
||
:deep(.el-icon) {
|
||
color: #05feff;
|
||
font-size: 34px;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
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;
|
||
justify-content: space-between;
|
||
|
||
button[disabled] {
|
||
color: grey !important;
|
||
opacity: 1;
|
||
}
|
||
|
||
button {
|
||
cursor: pointer;
|
||
transition: transform 0.1s linear 0s;
|
||
}
|
||
|
||
& :nth-child(1) {
|
||
width: 190px;
|
||
height: 60px;
|
||
border-radius: 11px;
|
||
border: 2px solid #0f82af;
|
||
background: transparent;
|
||
font-size: 28px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #08b7b8;
|
||
line-height: 60px;
|
||
}
|
||
|
||
& :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: 60px;
|
||
}*/
|
||
|
||
button:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
</style>
|