mirror of https://gitee.com/lmlz_0/dc-ui.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
8.1 KiB
255 lines
8.1 KiB
<template>
|
|
<div class="app-container"
|
|
v-loading="loading">
|
|
<!-- 添加或修改设备模型信息对话框 -->
|
|
<div class="marginbottom50px">
|
|
<el-steps :active="currentStep">
|
|
<el-step title="选择设备" description="告警设备" />
|
|
<el-step title="选择参数" description="该设备告警参数选择" />
|
|
<el-step title="选择策略" description="参数告警的策略配置" />
|
|
<el-step title="选择通知方式" description="告警的提醒方式配置" />
|
|
</el-steps>
|
|
</div>
|
|
<div class="overflowscroll">
|
|
<el-form ref="devicemodelRef" :model="form" :rules="rules" label-width="100px" class="textaligncenter">
|
|
<el-carousel ref="carousel" :autoplay="false" :arrow="never" pause-on-hover="false" class="customCarousel" :style="{ height: windowHeight + 'px' }">
|
|
<el-carousel-item :key="1" name="1" class="textaligncenter overflowscroll height300">
|
|
<div class="width80percent textaligncenter displayinlineblock">
|
|
<noalertdevices ref="devicealert"/>
|
|
</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item :key="2" name="2" class="textaligncenter overflowscroll height300">
|
|
<div class="width80percent textaligncenter displayinlineblock">
|
|
<noalertparams ref="paramalert"/>
|
|
</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item :key="3" name="3" class="textaligncenter overflowscroll height300">
|
|
<div class="width80percent textaligncenter">
|
|
</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item :key="4" name="4" class="textaligncenter overflowscroll height300">
|
|
<div class="width80percent textaligncenter">
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<el-form-item class="displayinlineblock divsonmarginleft0 margintop20">
|
|
<el-button type="primary" v-if="prevStepButtonShow" @click="prevStep" style="display: inline-block !important" >上一步</el-button>
|
|
<el-button type="primary" v-if="submitButtonShow" @click="submitForm" style="display: inline-block !important">提交</el-button>
|
|
<el-button @click="cancel" style="display: inline-block !important">取 消</el-button>
|
|
<el-button type="primary" v-if="nextStepButtonShow" @click="nextStep" style="display: inline-block !important">下一步</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-dialog :title="title" v-model="addParamModelShow" width="800px" append-to-body :dc_device_partion="dc_device_partion" :dc_class_type="dc_class_type">
|
|
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss">
|
|
@import "@/assets/styles/self-defined.scss";
|
|
.customCarousel {
|
|
>div{
|
|
>button {
|
|
display: none !important;
|
|
}
|
|
}
|
|
ul{
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
<script setup name="addalert">
|
|
import { required } from "@vee-validate/rules";
|
|
import noalertdevices from "./noalertdevices";
|
|
import noalertparams from "./noalertparams";
|
|
import { onMounted } from "vue";
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
const { proxy } = getCurrentInstance();
|
|
const {dc_class_type, dc_device_partion, dc_model_type} = proxy.useDict('dc_class_type', 'dc_device_partion','dc_model_type');
|
|
const router = useRouter();
|
|
const open = ref(false);
|
|
const loading = ref(false);
|
|
const currentStep = ref(1);
|
|
const nextStepButtonShow = ref(true);
|
|
const prevStepButtonShow = ref(false);
|
|
const submitButtonShow = ref(false);
|
|
const addParamModelShow = ref(false);
|
|
const navber = ref(0);
|
|
const tagsViewContainer = ref(0);
|
|
const marginbottom50px = ref(0);
|
|
const windowHeight = ref(0);
|
|
const selectDeviceId = ref("");
|
|
const data = reactive({
|
|
form: {
|
|
},
|
|
queryParams: {
|
|
modelName: null,
|
|
modelCode: null,
|
|
sort: null,
|
|
modelTypeId: null,
|
|
pid: null,
|
|
note: null
|
|
},
|
|
rules: {
|
|
|
|
},
|
|
validations: {
|
|
inputValue: { required }
|
|
}
|
|
});
|
|
|
|
const { queryParams, form, rules } = toRefs(data);
|
|
|
|
// 取消按钮
|
|
function cancel() {
|
|
open.value = false;
|
|
reset();
|
|
}
|
|
|
|
// 表单重置
|
|
function reset() {
|
|
form.value = {
|
|
tentantId: null,
|
|
version: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
deptId: null,
|
|
userId: null,
|
|
deleteBy: null,
|
|
deleteTime: null,
|
|
id: null,
|
|
modelName: null,
|
|
modelCode: null,
|
|
sort: null,
|
|
modelTypeId: null,
|
|
pid: null,
|
|
note: null
|
|
};
|
|
proxy.resetForm("devicemodelRef");
|
|
}
|
|
|
|
/** 提交按钮 */
|
|
function submitForm() {
|
|
|
|
}
|
|
|
|
|
|
function nextStep(){
|
|
proxy.$nextTick(() => {
|
|
if(currentStep.value==1){
|
|
const selectDevice = proxy.$refs["devicealert"].$refs.addAlertTable.getSelectionRows();
|
|
if(!valideToAddDevice(selectDevice)){
|
|
return;
|
|
}else{
|
|
proxy.$refs["paramalert"].deviceUuid = selectDevice.uuid;
|
|
proxy.$refs["paramalert"].getParamsNoAlertList();
|
|
}
|
|
currentStep.value = currentStep.value + 1;
|
|
proxy.$refs.carousel.next();
|
|
submitButtonShow.value = true;
|
|
nextStepButtonShow.value = true;
|
|
prevStepButtonShow.value = true;
|
|
}else if(currentStep.value == 2){
|
|
currentStep.value = currentStep.value + 1;
|
|
proxy.$refs.carousel.next();
|
|
submitButtonShow.value = true;
|
|
nextStepButtonShow.value = true;
|
|
prevStepButtonShow.value = true;
|
|
}else{
|
|
currentStep.value = currentStep.value + 1;
|
|
proxy.$refs.carousel.next();
|
|
submitButtonShow.value = true;
|
|
nextStepButtonShow.value = false;
|
|
prevStepButtonShow.value = true;
|
|
}
|
|
});
|
|
|
|
}
|
|
function prevStep(){
|
|
if(currentStep.value==4){
|
|
currentStep.value = currentStep.value - 1;
|
|
proxy.$refs.carousel.prev();
|
|
submitButtonShow.value = true;
|
|
nextStepButtonShow.value = true;
|
|
prevStepButtonShow.value = true;
|
|
}else if(currentStep.value == 3){
|
|
currentStep.value = currentStep.value - 1;
|
|
proxy.$refs.carousel.prev();
|
|
submitButtonShow.value = true;
|
|
nextStepButtonShow.value = true;
|
|
prevStepButtonShow.value = true;
|
|
}else if(currentStep.value == 2){
|
|
currentStep.value = currentStep.value - 1;
|
|
proxy.$refs.carousel.prev();
|
|
submitButtonShow.value = false;
|
|
nextStepButtonShow.value = true;
|
|
prevStepButtonShow.value = false;
|
|
}
|
|
}
|
|
|
|
|
|
function submit(){
|
|
|
|
}
|
|
|
|
function updateWindowHeight(){
|
|
navber.value=document.querySelector('.navbar').clientHeight;
|
|
tagsViewContainer.value=document.querySelector('.tags-view-container').clientHeight;
|
|
marginbottom50px.value=document.querySelector('.marginbottom50px').clientHeight;
|
|
windowHeight.value = window.innerHeight - navber.value - tagsViewContainer.value - marginbottom50px.value - 160;
|
|
};
|
|
|
|
onMounted(() => {
|
|
updateWindowHeight();
|
|
window.addEventListener('resize', updateWindowHeight);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', updateWindowHeight);
|
|
});
|
|
|
|
function valideToAddDevice(selectDevice){
|
|
console.log("---------------");
|
|
|
|
if(selectDevice.length==1){
|
|
selectDeviceId.value = selectDevice.uuid;
|
|
return true;
|
|
}else if(selectDevice.length > 1){
|
|
ElMessageBox.alert('请确保只选择一条设备', '提示', {
|
|
confirmButtonText: '确定',
|
|
center: true,
|
|
})
|
|
return false;
|
|
}else if(selectDevice.length < 1){
|
|
ElMessageBox.alert('请选择设备', '提示', {
|
|
confirmButtonText: '确定',
|
|
})
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function valideToAddParams(){
|
|
console.log("---------------");
|
|
// let selectDevice = proxy.$refs["paramalert"].$refs.addAlertTable.getSelectionRows();
|
|
// if(selectDevice.length==1){
|
|
// selectDeviceId.value = selectDevice.uuid;
|
|
// return true;
|
|
// }else if(selectDevice.length > 1){
|
|
// ElMessageBox.alert('请确保只选择一条设备', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// center: true,
|
|
// })
|
|
// return false;
|
|
// }else if(selectDevice.length < 1){
|
|
// ElMessageBox.alert('请选择设备', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// })
|
|
// return false;
|
|
// }
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|