唐润平：上线版,功能为待完善
This commit is contained in:
trp
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div id="input-num">
|
||||
<p>{{ params.name }}</p>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="params.placeholder"
|
||||
@input="handleChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits, onUnmounted } from "vue";
|
||||
const params = defineProps({
|
||||
name: String,
|
||||
placeholder: String,
|
||||
});
|
||||
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: 1px 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>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div id="select-input">
|
||||
<p>{{ params.name }}</p>
|
||||
<div class="select">
|
||||
<div class="value">
|
||||
<span>{{ value }}</span>
|
||||
<img
|
||||
src="/images/htmlEditDialog/select-icon.png"
|
||||
alt=""
|
||||
@click="isShowList = !isShowList"
|
||||
/>
|
||||
</div>
|
||||
<ul v-show="isShowList">
|
||||
<li
|
||||
v-for="(item, index) of params.options"
|
||||
:key="index"
|
||||
@click="handleClickItem(index)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, defineEmits, defineProps } from "vue";
|
||||
const params = defineProps({
|
||||
name: String,
|
||||
options: Array,
|
||||
placeholder: String,
|
||||
});
|
||||
const emit = defineEmits(["selected"]);
|
||||
let isShowList = ref(false);
|
||||
const value = ref(params.placeholder);
|
||||
function handleClickItem(index) {
|
||||
value.value = params.options[index].label;
|
||||
isShowList.value = false;
|
||||
emit("selected", params.options[index]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#select-input {
|
||||
margin: 40px 30px 0px 30px;
|
||||
P {
|
||||
width: 130px;
|
||||
height: 35px;
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 35px;
|
||||
}
|
||||
.select {
|
||||
position: relative;
|
||||
.value {
|
||||
width: 284px;
|
||||
height: 51px;
|
||||
border: 1px solid #0f82af;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #08b7b8;
|
||||
line-height: 51px;
|
||||
margin-top: 20px;
|
||||
padding: 0px 0px 0px 10px;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
img:active {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
position: absolute;
|
||||
width: 284px;
|
||||
background: #072247;
|
||||
border-radius: 0px 0px 20px 20px;
|
||||
border: 1px solid #0f82af;
|
||||
z-index: 10000;
|
||||
li {
|
||||
height: 37px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 37px;
|
||||
margin: 20px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
li:hover {
|
||||
color: #08b7b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
src/components/content/tunnelScene/editEquComp/editDialog.vue
Normal file
194
src/components/content/tunnelScene/editEquComp/editDialog.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<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="dev-info"></div>
|
||||
+
|
||||
<div class="setting">
|
||||
<select-input
|
||||
name="传感器类型"
|
||||
placeholder="请选择传感器类型"
|
||||
:options="options"
|
||||
@selected="handelSelectType"
|
||||
/>
|
||||
<select-input
|
||||
name="设备选择"
|
||||
placeholder="请选择设备"
|
||||
:options="options"
|
||||
@selected="handelSelectEquipment"
|
||||
/>
|
||||
<input-num
|
||||
name="阈值"
|
||||
placeholder="请输入阈值"
|
||||
@inputValue="handelInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button @click="removeEquipment">删除</button>
|
||||
<button @click="addEquipment">添加</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, defineEmits, defineProps } from "vue";
|
||||
|
||||
import SelectInput from "./childComps/SelectInput.vue";
|
||||
import InputNum from "./childComps/InputNum.vue";
|
||||
import { remove } from "three/examples/jsm/libs/tween.module";
|
||||
|
||||
// 定义事件发射器，父组件监听
|
||||
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
|
||||
const params = defineProps(["pointNum", "pointGap"]); //隧道第几个锚点
|
||||
|
||||
//计算锚点之间距离
|
||||
const pointDistance_str = computed(
|
||||
() =>
|
||||
`${params.pointGap}米*${params.pointNum}=${
|
||||
params.pointGap * params.pointNum
|
||||
}米`
|
||||
);
|
||||
|
||||
// 请求数据模型
|
||||
const equipmentSetting = reactive({
|
||||
equipmentType: "", //设备类型
|
||||
chooseEquipment: "", //设备选择(设备名称)
|
||||
threshold: "", //阈值
|
||||
});
|
||||
|
||||
// 选项参数
|
||||
const options = reactive([
|
||||
{ label: "风机1", id: "321321" },
|
||||
{ label: "风机2", id: "321321" },
|
||||
{ label: "风机3", id: "321321" },
|
||||
{ label: "风机4", id: "321321" },
|
||||
]);
|
||||
// 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 handelSelectType(e) {
|
||||
equipmentSetting.equipmentType = e;
|
||||
}
|
||||
function handelSelectEquipment(e) {
|
||||
equipmentSetting.chooseEquipment = e;
|
||||
}
|
||||
function handelInput(e) {
|
||||
equipmentSetting.threshold = e;
|
||||
console.log(equipmentSetting);
|
||||
}
|
||||
|
||||
// 处理取消事件
|
||||
function handleCancel() {
|
||||
// 发射事件给tunnel父组件
|
||||
emit("cancel");
|
||||
}
|
||||
|
||||
// 删除模型
|
||||
function removeEquipment() {
|
||||
emit("removeEquipment");
|
||||
}
|
||||
// 添加设备
|
||||
function addEquipment() {
|
||||
emit("addEquipment");
|
||||
}
|
||||
</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: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 35px;
|
||||
}
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
img:active {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
.setting {
|
||||
.dev-type {
|
||||
margin: 30px 30px;
|
||||
P {
|
||||
width: 130px;
|
||||
height: 35px;
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #ffffff;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin: 100px 40px 40px 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
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