预览模式和编辑模式大致完成
This commit is contained in:
Hcat1314
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div id="input-num">
|
||||
<p>{{ params.name }}</p>
|
||||
<input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, onUnmounted } from "vue";
|
||||
const params = defineProps({
|
||||
name: String,
|
||||
placeholder: String,
|
||||
disabled: Boolean,
|
||||
});
|
||||
const emit = defineEmits(["inputValue"]);
|
||||
let timer = null;
|
||||
function handleChange(e) {
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
emit("inputValue", e.target.value);
|
||||
}, 200);
|
||||
}
|
||||
onUnmounted(handleUnmounted);
|
||||
function handleUnmounted() {
|
||||
clearInterval(timer);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#input-num {
|
||||
margin: 40px 30px 0px 30px;
|
||||
|
||||
P {
|
||||
width: 130px;
|
||||
height: 35px;
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 284px;
|
||||
height: 51px;
|
||||
border: 2px solid #0f82af;
|
||||
background: transparent;
|
||||
margin-top: 20px;
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 35px;
|
||||
padding: 0px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #0f82af;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
304
src/components/content/tunnelScene/preEquComp/preDialog.vue
Normal file
304
src/components/content/tunnelScene/preEquComp/preDialog.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<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="equipmentTypeInf.value" 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="equipmentNameInf.value" disabled>
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<input-num name="阈值" :placeholder="equipmentValueInf.value" @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>
|
||||
Reference in New Issue
Block a user