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>
|