307 lines
7.1 KiB
Vue
307 lines
7.1 KiB
Vue
<template>
|
||
<div id="edit-dialog">
|
||
<div class="distance-back">
|
||
<p>当前距离洞口：{{ pointDistance_str }}</p>
|
||
<img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
|
||
</div>
|
||
<div class="equ-info">当前风压:{{ p }}Pa</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>
|
||
</div>
|
||
<div class="setting-item">
|
||
<p>设备选择</p>
|
||
<el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
|
||
:placeholder="params.equipmentValue" disabled>
|
||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
|
||
:disabled="isDisabledInputNum" />
|
||
</div>
|
||
<div class="btn">
|
||
<button @click="removeEquipment" disabled>删除</button>
|
||
<button @click="addEquipment" disabled>添加</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import InputNum from "./childComps/InputNum.vue";
|
||
|
||
import {
|
||
reactive,
|
||
computed,
|
||
defineEmits,
|
||
defineProps,
|
||
watch,
|
||
nextTick,
|
||
ref,
|
||
} from "vue";
|
||
|
||
// 定义事件发射器，父组件监听
|
||
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment", "EquInf"]);
|
||
const params = defineProps(["pointNum", "pointGap", "equipmentType", "equipmentName", "equipmentValue"]); //隧道第几个锚点
|
||
|
||
// 当前风压
|
||
let p = ref(57);
|
||
|
||
// 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: 540px;
|
||
// 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: 388px;
|
||
height: 35px;
|
||
font-size: 24px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
line-height: 35px;
|
||
}
|
||
|
||
img {
|
||
cursor: pointer;
|
||
}
|
||
|
||
img:active {
|
||
transform: scale(0.9);
|
||
}
|
||
}
|
||
|
||
.equ-info {
|
||
width: 190px;
|
||
height: 35px;
|
||
font-size: 26px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #f7b500;
|
||
line-height: 35px;
|
||
margin: 20px 30px 0px 30px;
|
||
}
|
||
|
||
.setting {
|
||
.setting-item {
|
||
padding: 30px 30px 10px 30px;
|
||
|
||
p {
|
||
width: 130px;
|
||
height: 35px;
|
||
font-size: 26px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
line-height: 35px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
: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 {
|
||
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.9);
|
||
}
|
||
}
|
||
}
|
||
</style>
|