合并
This commit is contained in:
Hcat
@@ -2,25 +2,39 @@
|
||||
<div id="edit-dialog">
|
||||
<div class="distance-back">
|
||||
<p>当前距离洞口：{{ pointDistance_str }}</p>
|
||||
<img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
|
||||
<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="请选择设备类型">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<select-input
|
||||
:options="options"
|
||||
@selectChange="handleTypeChange"
|
||||
placeholder="请选择传感器类型"
|
||||
ref="equipmentType"
|
||||
/>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<p>设备选择</p>
|
||||
<el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
|
||||
placeholder="请选择设备类型">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<select-input
|
||||
:options="options2"
|
||||
@selectChange="handleEquipmentChange"
|
||||
placeholder="请选择设备"
|
||||
ref="equipment"
|
||||
/>
|
||||
</div>
|
||||
<input-num name="阈值" placeholder="请输入阈值" @inputValue="handelInput" :disabled="isDisabledInputNum" />
|
||||
<input-num
|
||||
name="阈值"
|
||||
placeholder="请输入阈值"
|
||||
@inputValue="handelInput"
|
||||
:disabled="isDisabledInputNum"
|
||||
/>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button @click="removeEquipment">删除</button>
|
||||
@@ -31,84 +45,81 @@
|
||||
|
||||
<script setup>
|
||||
import InputNum from "./childComps/InputNum.vue";
|
||||
import SelectInput from "./childComps/SelectInput.vue";
|
||||
import { getEquipmentType, getEquipment } from "@/api/tunnelScene";
|
||||
import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
|
||||
import { useModelSceneStore } from "@/store/modelSceneStore";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import {
|
||||
reactive,
|
||||
computed,
|
||||
defineEmits,
|
||||
defineProps,
|
||||
watch,
|
||||
nextTick,
|
||||
ref,
|
||||
} from "vue";
|
||||
|
||||
// 定义事件发射器，父组件监听
|
||||
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
|
||||
const params = defineProps(["pointNum", "pointGap"]); //隧道第几个锚点
|
||||
const params = defineProps([
|
||||
"pointNum",
|
||||
"pointGap",
|
||||
"tunnelId",
|
||||
"position",
|
||||
"hasEquipment",
|
||||
]);
|
||||
|
||||
// 当前风压
|
||||
let p = ref(57);
|
||||
|
||||
const equipment = ref(null);
|
||||
const equipmentType = ref(null);
|
||||
const store = useModelSceneStore();
|
||||
//计算锚点之间距离
|
||||
const pointDistance_str = computed(
|
||||
() =>
|
||||
`${params.pointGap}米*${params.pointNum}=${params.pointGap * params.pointNum
|
||||
`${params.pointGap}米*${params.pointNum}=${
|
||||
params.pointGap * params.pointNum
|
||||
}米`
|
||||
);
|
||||
|
||||
// 请求数据模型
|
||||
const equipmentSetting = reactive({
|
||||
equipmentType: "", //设备类型
|
||||
chooseEquipment: "", //设备选择(设备名称)
|
||||
chooseEquipment: null, //设备选择(设备名称)
|
||||
threshold: "", //阈值
|
||||
});
|
||||
|
||||
// 绑定选择的设备类型
|
||||
function handleTypeChange(optionItem) {
|
||||
equipmentSetting.equipmentType = optionItem.value;
|
||||
}
|
||||
function handleEquipmentChange(equipmentItem) {
|
||||
equipmentSetting.chooseEquipment = equipmentItem;
|
||||
}
|
||||
// 设备类型选项参数
|
||||
const options = reactive([
|
||||
{ label: "风机", value: "fan" },
|
||||
{ label: "风压传感器", value: "sensors" },
|
||||
{ label: "普通传感器", value: "sensors_2" },
|
||||
]);
|
||||
let options = reactive([{ label: "暂无数据", value: "" }]);
|
||||
|
||||
// 设备编号参数
|
||||
let options2 = reactive([]);
|
||||
let options2 = reactive([{ equipmentId: 0, label: "暂无数据", value: "" }]);
|
||||
|
||||
let isDisabledInputNum = ref(false);
|
||||
// 模拟生成option2
|
||||
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}` });
|
||||
}
|
||||
(newVal) => {
|
||||
console.log(params.tunnelId, newVal);
|
||||
equipment.value.reset();
|
||||
getEquipment(params.tunnelId, newVal, 1).then((res) => {
|
||||
options2.splice(0, options2.length);
|
||||
options2.push(
|
||||
...res.data.map((item) => {
|
||||
return {
|
||||
equipmentId: item.equipmentId,
|
||||
label: item.equipmentName,
|
||||
value: item.equipmentType,
|
||||
};
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// 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);
|
||||
// 设备类型请求
|
||||
getEquipmentType()
|
||||
.then((res) => {
|
||||
options.splice(0, options.length);
|
||||
options.push(...res.data);
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
|
||||
function handelInput(e) {
|
||||
equipmentSetting.threshold = e;
|
||||
@@ -116,6 +127,11 @@ function handelInput(e) {
|
||||
|
||||
// 处理取消事件
|
||||
function handleCancel() {
|
||||
equipmentSetting.equipmentType = "";
|
||||
equipmentSetting.chooseEquipment = null;
|
||||
equipmentSetting.threshold = "";
|
||||
equipment.value.reset();
|
||||
equipmentType.value.reset();
|
||||
// 发射事件给tunnel父组件
|
||||
emit("cancel");
|
||||
}
|
||||
@@ -127,20 +143,44 @@ function removeEquipment() {
|
||||
|
||||
// 添加设备
|
||||
function addEquipment() {
|
||||
emit("addEquipment", equipmentSetting);
|
||||
equipmentSetting.chooseEquipment = "";
|
||||
equipmentSetting.equipmentType = "";
|
||||
equipmentSetting.threshold = "";
|
||||
if (params.hasEquipment) {
|
||||
ElMessage({
|
||||
message: "该点位已存在设备！",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!equipmentSetting.equipmentType || !equipmentSetting.chooseEquipment) {
|
||||
ElMessage({
|
||||
message: "选项不能为空！",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
equipmentSetting.position = params.position;
|
||||
// 合法请求
|
||||
store
|
||||
.saveSceneData(10000, 1, equipmentSetting)
|
||||
.then((res) => {
|
||||
emit("addEquipment", equipmentSetting);
|
||||
equipmentSetting.chooseEquipment = null;
|
||||
equipmentSetting.equipmentType = "";
|
||||
equipmentSetting.threshold = "";
|
||||
equipment.value.reset();
|
||||
equipmentType.value.reset();
|
||||
ElMessage({
|
||||
message: "添加成功！",
|
||||
type: "success",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage({
|
||||
message: "请求异常！",
|
||||
type: "warning",
|
||||
});
|
||||
});
|
||||
}
|
||||
const equipmentType = {
|
||||
label: String, //传感器类型
|
||||
typeId: String, //传感器类型ID(方便查找该类型的所有设备)
|
||||
};
|
||||
// 通过以上选项请求以下具体哪个设备
|
||||
const equipment = {
|
||||
label: String, //传感器编号加名称
|
||||
equId: String, // 传感器Id
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -203,40 +243,6 @@ const equipment = {
|
||||
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 {
|
||||
@@ -244,16 +250,9 @@ const equipment = {
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user