联调二级评估 参数字典维护页面
This commit is contained in:
guanj
272
src/views/setting/translate/configuration/component/setSms.vue
Normal file
272
src/views/setting/translate/configuration/component/setSms.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user