273 lines
9.1 KiB
Vue
273 lines
9.1 KiB
Vue
<template>
|
||
<div>
|
||
<el-card class="default-main mb10 mr0">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>短信配置</span>
|
||
</div>
|
||
</template>
|
||
<div :style="height">
|
||
<div>
|
||
<div class="title">短信发送设置</div>
|
||
<el-form :model="form" inline label-width="100px" class="mb10 ml30 mt20">
|
||
<el-form-item label="短信发送功能">
|
||
<el-select v-model="form.sms" style="width: 100px">
|
||
<el-option
|
||
v-for="item in list[0]"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="事件扫描间隔">
|
||
<el-select v-model="form.interval" style="width: 100px">
|
||
<el-option
|
||
v-for="item in list[1]"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="离线数据时间">
|
||
<el-select v-model="form.time" style="width: 100px">
|
||
<el-option
|
||
v-for="item in list[2]"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div>
|
||
<div class="title">短信发送时间段设置</div>
|
||
<div class="mb20 ml30 checkbox">
|
||
<el-checkbox-group v-model="form.sendTime">
|
||
<el-checkbox
|
||
v-for="item in timePeriod"
|
||
class="mt10"
|
||
:key="item.start + item.end"
|
||
:label="`${item.start} - ${item.end}`"
|
||
border
|
||
/>
|
||
</el-checkbox-group>
|
||
<el-button type="primary" icon="el-icon-Plus" @click="addTime" class="mt10"></el-button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="title">类型设置</div>
|
||
<div class="mb20 ml30 checkbox">
|
||
<el-checkbox-group v-model="form.type">
|
||
<el-checkbox
|
||
v-for="item in typeList"
|
||
class="mt10"
|
||
:key="item.label"
|
||
:label="item.label"
|
||
border
|
||
/>
|
||
</el-checkbox-group>
|
||
<el-button type="primary" icon="el-icon-Plus" @click="addType" class="mt10"></el-button>
|
||
</div>
|
||
</div>
|
||
<el-divider />
|
||
<div style="text-align: center">
|
||
<el-button type="primary" icon="el-icon-Tools" @click="addTime" class="mt10">设置</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<!-- 时间范围 -->
|
||
<el-dialog draggable v-model="timeFlag" title="添加时间范围模版" width="300">
|
||
<div>
|
||
<span class="mr10">起始时间</span>
|
||
<el-time-select
|
||
v-model="startTime"
|
||
style="width: 200px"
|
||
:max-time="endTime"
|
||
placeholder="起始时间"
|
||
start="00:00"
|
||
step="1:00"
|
||
end="23:00"
|
||
/>
|
||
</div>
|
||
<div class="mt10">
|
||
<span class="mr10">结束时间</span>
|
||
<el-time-select
|
||
v-model="endTime"
|
||
style="width: 200px"
|
||
:min-time="startTime"
|
||
placeholder="结束时间"
|
||
start="00:00"
|
||
step="1:00"
|
||
end="23:00"
|
||
/>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="timeFlag = false">取消</el-button>
|
||
<el-button type="primary" @click="determineTheTime">确定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 添加类型模版 -->
|
||
<el-dialog draggable v-model="typeFlag" title="添加类型模版" width="300">
|
||
<div>
|
||
<span class="mr10"> 类型名称</span>
|
||
<el-input v-model="typeName" style="width: 200px" placeholder="请输入类型名称"></el-input>
|
||
</div>
|
||
<div class="mt10">
|
||
<span class="mr10">临界最小值</span>
|
||
<el-input-number
|
||
v-model="minType"
|
||
:min="0"
|
||
@change="minChange"
|
||
style="width: 200px"
|
||
placeholder="请输入临界最小值"
|
||
></el-input-number>
|
||
</div>
|
||
<div class="mt10">
|
||
<span class="mr10">临界最大值</span>
|
||
<el-input-number
|
||
v-model="maxType"
|
||
:min="minType + 1"
|
||
style="width: 200px"
|
||
placeholder="请输入临界最大值"
|
||
></el-input-number>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="timeFlag = false">取消</el-button>
|
||
<el-button type="primary" @click="addAType">确定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { mainHeight } from '@/utils/layout'
|
||
import { ElMessage } from 'element-plus'
|
||
defineOptions({
|
||
name: 'smsConfiguration'
|
||
})
|
||
const list = [
|
||
[
|
||
{ label: '关闭', value: 0 },
|
||
{ label: '启动', value: 1 }
|
||
],
|
||
[
|
||
{ label: '2分钟', value: 2 },
|
||
{ label: '3分钟', value: 3 },
|
||
{ label: '5分钟', value: 5 },
|
||
{ label: '10分钟', value: 10 },
|
||
{ label: '30分钟', value: 30 }
|
||
],
|
||
[
|
||
{ label: '1天', value: 1 },
|
||
{ label: '2天', value: 2 },
|
||
{ label: '3天', value: 3 },
|
||
{ label: '4天', value: 4 },
|
||
{ label: '5天', value: 5 },
|
||
{ label: '6天', value: 6 },
|
||
{ label: '7天', value: 7 }
|
||
]
|
||
]
|
||
const typeList = ref([{ label: '暂降', min: 0, max: 0 }])
|
||
const timeFlag = ref(false)
|
||
const typeFlag = ref(false)
|
||
const startTime = ref('')
|
||
const endTime = ref('')
|
||
const timePeriod = ref([
|
||
{ start: '08:00', end: '12:00' },
|
||
{ start: '13:00', end: '18:00' }
|
||
])
|
||
const typeName = ref('')
|
||
const minType = ref(0)
|
||
const maxType = ref(0)
|
||
|
||
const height = mainHeight(105)
|
||
const form = reactive({
|
||
sms: 0,
|
||
interval: 3,
|
||
time: 1,
|
||
sendTime: [],
|
||
type: []
|
||
})
|
||
|
||
const addTime = () => {
|
||
startTime.value = ''
|
||
endTime.value = ''
|
||
timeFlag.value = true
|
||
// 这里可以添加逻辑来处理时间范围的添加
|
||
}
|
||
const addType = () => {
|
||
typeName.value = ''
|
||
minType.value = 0
|
||
maxType.value = 0
|
||
typeFlag.value = true
|
||
// 这里可以添加逻辑来处理时间范围的添加
|
||
|
||
}
|
||
// 确定时间
|
||
const determineTheTime = () => {
|
||
if (!startTime.value || !endTime.value) {
|
||
ElMessage({
|
||
message: '请选择时间',
|
||
type: 'warning'
|
||
})
|
||
return
|
||
}
|
||
timePeriod.value.push({
|
||
start: startTime.value,
|
||
end: endTime.value
|
||
})
|
||
timeFlag.value = false
|
||
}
|
||
// 确定设置类型
|
||
const addAType = () => {
|
||
if (!typeName.value) {
|
||
ElMessage({
|
||
message: '请输入类型名称',
|
||
type: 'warning'
|
||
})
|
||
return
|
||
}
|
||
typeList.value.push({
|
||
label: typeName.value,
|
||
min: minType.value,
|
||
max: maxType.value
|
||
})
|
||
typeFlag.value = false
|
||
}
|
||
const minChange = (val: number) => {
|
||
if (val >= maxType.value) {
|
||
maxType.value = val + 1
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.title {
|
||
background-color: #f2f2f2;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
font-weight: 600;
|
||
padding-left: 10px;
|
||
margin-bottom: 10px;
|
||
border-left: 10px solid var(--el-color-primary);
|
||
}
|
||
:deep(.el-card__body) {
|
||
padding: 10px !important;
|
||
}
|
||
:deep(.el-select) {
|
||
min-width: 80px !important;
|
||
}
|
||
.checkbox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style>
|