<template>
<div class="addTaskModal" v-if="visible">
<edit
AndAddPage :router="'/basicConfiguration'" :title="titles" @c
ancel="c
ancel" @submit="submit">
<template v-slot:pageBody>
<div class="main-body-box">
<a-form-model
:label-col="{ sp
an: 2 }"
:wrapper-col="{ sp
an: 22 }"
ref="ruleForm"
:rules="rules"
:model="modalData"
>
<a-form-model-item label=""></a-form-model-item>
<a-form-model-item :label="$t('任务名称:')" prop="taskName">
<a-input :placeholder="$t('请输入任务名称')" v-model="modalData.taskName" maxLength="25"> </a-input>
</a-form-model-item>
<a-form-model-item :label="$t('包含设备:')">
<Tr
ansfer ref="tr
ansferRef" :hostModel="modalData.hostModel"></Tr
ansfer>
</a-form-model-item>
<a-form-model-item :label="$t('空开配置:')">
<div class="config_content">
<div class="config_item" v-for="(item, index) in configArr" :key="index">
<div class="config_title">
<a-select
v-model="item.configTypeCode"
@ch
ange="h
andleConfigTypeCh
ange($event, index)"
:placeholder="$t('请选择')"
>
<a-select-option
:value="el.configTypeCode"
v-for="el in configTypeOptions"
:disabled="el.disabled"
:key="el.configTypeCode"
:title="$t(el.configTypeName)"
>
{{ $t(el.configTypeName) }}
</a-select-option>
</a-select>
<hd-icon type="delete" @click="delConfig(index)" />
</div>
<div class="config_main">
<div class="type_info">
<sp
an>{{ $t('操作类型:') }}</sp
an>
<a-radio-group v-model="item.cmd">
<a-radio-button value="0"> {{ $t('分闸') }}</a-radio-button>
<a-radio-button value="1"> {{ $t('合闸') }} </a-radio-button>
</a-radio-group>
</div>
<div class="time_info">
<sp
an>{{ $t('时间范围:') }}</sp
an>
<a-time-picker
class="mgb_12"
format="HH:mm"
valueFormat="HH:mm"
v-model="item.excTime"
:placeholder="$t('选择时间')"
/>
</div>
<div class="
week_info">
<sp
an>{{ $t('运行周期:') }}</sp
an>
<div class="
week_list">
<div
class="
week_item"
v-for="(day, indx) in item.
weekList"
:key="indx"
@click="toggleDay(day, item)"
:class="{ selected: day.value == 1 }"
>
<div>{{ day.name }}</div>
<div v-show="day.value == 1" class="tri
angle"></div>
<div v-show="day.value == 1" class="checkmark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="addBtn" @click="addConfig">
<hd-icon type="add" />
{{ $t('新增空开配置') }}
</div>
</a-form-model-item>
</a-form-model>
</div>
</template>
</edit
AndAddPage>
</div>
</template>
<script>
import reg from '@/common/js/reg'
import factory from '../factory'
import Tr
ansfer from './Tr
ansfer.vue'
import edit
AndAddPage from '@/components/scfComponents/edit
AndAddPage/edit
AndAddPage.vue'
export default {
components: { Tr
ansfer, edit
AndAddPage },
data() {
return {
titles: '新增空开定时任务',
visible: false,
modalData: {
taskName: '',
hostModel: undefined,
},
rules: {
taskName: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
{ pattern: reg.name, message:
this.$t('仅允许输入汉字、字母、数字与_-.@字符') },
],
},
configTypeOptions: [],
configArr: [],
}
},
computed: {},
mounted() {},
methods: {
// 打开弹窗
showModal() {
this.visible = true
// 获取主机型号
this.modalData = {
taskName: '',
hostModel: undefined,
}
// 获取配置项
this.getConfigOptions()
this.configArr = [
{
configTypeCode: undefined,
configTypeName: '',
cmd: '',
excTime: '',
rept: '000000000',
weekList: [
{ name:
this.$t('周日'), value: 0 },
{ name:
this.$t('周一'), value: 0 },
{ name:
this.$t('周二'), value: 0 },
{ name:
this.$t('周三'), value: 0 },
{ name:
this.$t('周四'), value: 0 },
{ name:
this.$t('周五'), value: 0 },
{ name:
this.$t('周六'), value: 0 },
],
},
]
},
getConfigOptions() {
this.configTypeOptions = []
for (let i = 0; i < 31; i++) {
const configTypeCode = (1026 + i).toString()
this.configTypeOptions.push({
configTypeCode,
disabled: false,
configTypeName:
this.$t('空开配置') + i,
})
}
},
// 处理配置类型变更
h
andleConfigTypeCh
ange(value, index) {
const selectConfigCodes = new Set(
this.configArr.map(item => item.configTypeCode))
this.configTypeOptions.forEach(option => {
option.disabled = selectConfigCodes.has(option.configTypeCode)
})
if (value) {
const selectedOption =
this.configTypeOptions.find(opt => opt.configTypeCode == value)
if (selectedOption) {
this.configArr[index].configTypeName = selectedOption.configTypeName
}
}
},
toggleDay(day, item) {
day.value = day.value == 0 ? 1 : 0
const values = item.
weekList.map(d => d.value)
item.rept = values.join('') + '00'
},
// 添加配置项
addConfig() {
this.configArr.push({
configTypeCode: undefined,
configTypeName: '',
cmd: '',
excTime: '',
rept: '000000000',
weekList: [
{ name:
this.$t('周日'), value: 0 },
{ name:
this.$t('周一'), value: 0 },
{ name:
this.$t('周二'), value: 0 },
{ name:
this.$t('周三'), value: 0 },
{ name:
this.$t('周四'), value: 0 },
{ name:
this.$t('周五'), value: 0 },
{ name:
this.$t('周六'), value: 0 },
],
})
},
// 删除配置项
delConfig(index) {
if (
this.configArr.length == 1) {
this.$message.warning(
this.$t('至少保留一个配置项'))
} else {
this.configArr.splice(index, 1)
this.h
andleConfigTypeCh
ange()
}
},
// 取消
c
ancel() {
this.visible = false
},
// 确定
submit() {
this.$refs.ruleForm.validate(valid => {
console.log(
this.$refs.tr
ansferRef)
if (!valid) return
const detectorList =
this.$refs.tr
ansferRef.rightData || []
if (detectorList.length === 0) {
this.$message.destroy()
this.$message.warning(
this.$t('请选择设备列表'))
return
}
let errMsg = ''
// 检查所有配置项
for (let i = 0; i <
this.configArr.length; i++) {
const item =
this.configArr[i]
// 检查配置类型是否已选择
if (!item.configTypeCode) {
errMsg =
this.$t('请选择空开配置类型')
break
}
// 检查操作类型
if (item.cmd === '' || item.cmd === null || item.cmd === undefined) {
errMsg = `${
this.$t('请选择')}${item.configTypeName}${
this.$t('分合闸')}`
break
}
// 检查时间
if (!item.excTime) {
errMsg = `${
this.$t('请选择')}${item.configTypeName}${
this.$t('时间')}`
break
}
// 检查周期
if (!item.rept || item.rept === '000000000') {
errMsg = `${
this.$t('请选择')}${item.configTypeName}${
this.$t('周期')}`
break
}
}
if (errMsg) {
this.$message.destroy()
this.$message.warning(errMsg)
return
}
// 准备参数
const configs =
this.configArr.map(item => ({
configTypeCode: item.configTypeCode,
configTypeName: item.configTypeName,
configValue: {
cid: (item.configTypeCode - 1026).toString(),
cmd: item.cmd,
excTime: item.excTime,
time: moment().value
Of(),
rept: item.rept,
uid: '',
type: '0',
},
}))
const params = {
comm
andMode: '0', // 配置模式 主机0 探测器1
issueType: '1', // 1为首次下发 2为重新下发
jobName:
this.modalData.taskName,
userCode: localStorage.getItem('userId'),
detectorList: detectorList.map(item => ({
...item,
ch
annelNo: `${item.systemAddress}@${item.partUnitLoopCode}@${item.ch
annelNo}`,
})),
configs,
}
console.log(params)
factory.batchConfig(params).then(res => {
if (res.success) {
this.$message.destroy()
this.$message.success('操作成功')
this.h
andleC
ancel()
this.$parent.getTableList()
}
})
})
},
},
}
</script>
<style l
ang="less" scoped>
.addTaskModal {
width: 100%;
height: 100%;
text-align: left;
box-sizing: border-box;
}
.main-body-box {
.config_content {
border-radius: 4px;
border: 1px solid #ebedef;
.config_title {
height: 48px;
display: flex;
align-items: center;
padding: 0 16px;
border-bottom: 1px solid rgb(229, 231, 234);
background: rgb(242, 243, 244);
justify-content: space-between;
}
.config_main {
height: 176px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
color: rgb(105, 118, 136);
font-family: '阿里巴巴普惠体';
font-size: 14px;
font-weight: 400;
background: rgb(255, 255, 255);
.type_info {
display: flex;
align-items: center;
}
.
week_info {
display: flex;
align-items: center;
.
week_list {
display: flex;
.
week_item {
height: 40px;
width: 82px;
display: flex;
cursor: default;
align-items: center;
justify-content: center;
position: relative;
border: 1px solid rgb(217, 220, 224);
border-radius: 4px;
margin-right: 12px;
color: rgb(105, 118, 136);
font-family: '阿里巴巴普惠体';
font-size: 14px;
font-weight: 400;
&.selected {
color: #006fff;
border: 1px solid rgb(0, 111, 255);
}
.tri
angle {
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 24px 24px;
border-color: tr
ansparent tr
ansparent #006fff tr
ansparent;
}
/* 对勾实现 */
.checkmark {
position: absolute;
bottom: 5px; /* 调整位置使其在三角形内居中 */
right: 4px; /* 调整位置使其在三角形内居中 */
width: 8px;
height: 5px;
tr
ansform: rotate(-45deg);
&::before {
content: '';
position: absolute;
width: 2px;
height: 5px;
background-color: white;
left: 0;
top: 0;
}
&::after {
content: '';
position: absolute;
width: 6px;
height: 2px;
background-color: white;
right: 0;
bottom: 0;
}
}
}
}
}
sp
an {
margin-right: 8px;
}
}
}
.addBtn {
width: 100%;
height: 32px;
cursor: default;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
margin-top: 12px;
color: rgb(41, 141, 255);
border: 1px dashed rgb(41, 141, 255);
background: rgba(41, 141, 255, 0.1);
}
}
</style>代码评审
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
