<template>
<div class
="addTaskModal" v-if
="visible">
<editAndAddPage
:router
="'/basicConfiguration'"
:title="
titles" @cancel
="cancel" @submit
="submit">
<template v-slot
:pageBody>
<div class
="main-body-box">
<a-form-model
:label-col
="{ span
: 2 }"
:wrapper-col
="{ span
: 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
('包含设备
:')">
<Transfer ref
="transferRef"
:hostModel
="modalData
.hostModel"></Transfer>
</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"
@change
="value
=> handleConfigTypeChange
(index, value)"
:placeholder
="$t
('请选择')"
>
<a-select-option
:value
="el
.configTypeCode"
v-for
="el in getAvailableOptions
(index)"
: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">
<span>{{ $t
('操作类型
:') }}</span>
<a-radio-group v-model
="
item.cmd" @change
="onChange">
<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">
<span>{{ $t
('时间范围
:') }}</span>
<a-time-picker
class
="mgb_12"
format
="HH
:mm"
valueFormat
="HH
:mm"
v-model
="
item.excTime"
:placeholder
="$t
('选择时间')"
/>
</div>
<div class
="week_info">
<span>{{ $t
('运行周期
:') }}</span>
<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
="triangle"></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>
</editAndAddPage>
</div>
</template>
<script>
import reg from '@/common/js/reg'
import factory from '
../factory'
import Transfer from '
./Transfer
.vue'
import editAndAddPage from '@/components/scfComponents/editAndAddPage/editAndAddPage
.vue'
export default {
components
: { Transfer, editAndAddPage },
data
() {
return {
titles: '新增空开定时任务',
visible
: false,
modalData
: {
taskName
: '',
hostModel
: undefined,
},
rules
: {
taskName
: [
{ required
: true, message
: '请输入任务名称', trigger
: 'blur' },
{ pattern
: reg
.name, message
: this
.$t
('仅允许输入汉字、字母、数字与_-
.@字符') },
],
},
selectedConfigTypes
: new Set
(), // 存储已选的配置类型编码
configArr
: [
{
cmd
: '',
excTime
: '',
weekList
: [
{ name
: '周日', value
: 0 },
{ name
: '周一', value
: 0 },
{ name
: '周二', value
: 0 },
{ name
: '周三', value
: 0 },
{ name
: '周四', value
: 0 },
{ name
: '周五', value
: 0 },
{ name
: '周六', value
: 0 },
],
},
],
}
},
computed
: {
allConfigOptions
() {
const arr
= []
for
(let i
= 0; i < 31; i++) {
const configTypeCode
= (1026 + i)
.toString
()
arr
.push
({
configTypeCode,
configTypeName
: this
.$t
('空开配置') + i,
})
}
return arr
},
},
mounted
() {},
methods
: {
// 打开弹窗
showModal
() {
this
.visible
= true
// 获取主机型号
this
.modalData
= {
taskName
: '',
hostModel
: undefined,
}
},
// 获取指定配置项可用的选项
getAvailableOptions
(index) {
const currentSelected
= this
.configArr[index]
.configTypeCode
return this
.allConfigOptions
.filter
(option
=> {
// 当前项已选中的配置始终可用
if
(option
.configTypeCode
=== currentSelected) return true
// 其他配置未被选中时可用
return !this
.selectedConfigTypes
.has
(option
.configTypeCode)
})
},
// 处理配置类型变更
handleConfigTypeChange
(index, value) {
const prevValue
= this
.configArr[index]
.configTypeCode
// 移除旧值
if
(prevValue) {
this
.selectedConfigTypes
.delete
(prevValue)
}
// 添加新值
if
(value) {
this
.selectedConfigTypes
.add
(value)
}
// 更新配置项的值
this
.$set
(this
.configArr, index, {
...this
.configArr[index],
configTypeCode
: value,
})
},
toggleDay
(day,
item) {
day
.value
= day
.value
== 0 ? 1
: 0
const values
= item.weekList
.map(day
=> day
.value)
item.configValue
.rept
= values
.join
('') + '00'
},
// 添加配置项
addConfig
() {
this
.configArr
.push
({
cmd
: '',
excTime
: '',
weekList
: [
{ name
: '周日', value
: 0 },
{ name
: '周一', value
: 0 },
{ name
: '周二', value
: 0 },
{ name
: '周三', value
: 0 },
{ name
: '周四', value
: 0 },
{ name
: '周五', value
: 0 },
{ name
: '周六', value
: 0 },
],
})
},
// 删除配置项
delConfig
(index) {
if
(this
.configArr
.length
== 1) {
this
.$message
.destroy
()
this
.$message
.warning
(this
.$t
('至少保留一个配置项'
))
} else {
// 移除该配置项占用的类型
const removedConfig
= this
.configArr[index]
if
(removedConfig
.configTypeCode) {
this
.selectedConfigTypes
.delete
(removedConfig
.configTypeCode)
}
this
.configArr
.splice
(index, 1)
}
},
// 取消
cancel
() {
this
.visible
= false
},
// 确定
submit
() {
this
.$refs
.ruleForm
.validate
(valid
=> {
if
(!valid) return
const detectorList
= this
.$refs
.transferRef
.getSelectedData
() || []
if
(detectorList
.length
=== 0) {
this
.$message
.destroy
()
this
.$message
.warning
(this
.$t
('请选择设备列表'
))
return
}
let errMsg
= ''
let configs
= this
.configArr
.filter
(item =>
item.isCheck)
if
(configs
.length
=== 0) {
errMsg
= this
.$t
('请选择配置定时开合闸')
} else {
for
(let i
= 0; i < configs
.length; i++) {
const { configValue, configTypeName, cmd, excTime }
= configs[i]
if
(cmd
== null || cmd
=== '' ||
(typeof cmd
=== 'string' && cmd
.trim
()
=== ''
)) {
errMsg
= `${this
.$t
('请选择')}${configTypeName}${this
.$t
('分合闸')}`
break
} else if
(!excTime) {
errMsg
= `${this
.$t
('请选择')}${configTypeName}${this
.$t
('时间')}`
break
} else if
(!configValue
.rept || configValue
.rept
== '000000000') {
errMsg
= `${this
.$t
('请选择')}${configTypeName}${this
.$t
('周期')}`
break
}
configValue
.cmd
= cmd
configValue
.excTime
= moment
(excTime, 'HH
:mm')
.valueOf
()
configValue
.time
= moment
()
.valueOf
()
}
}
if
(errMsg) {
this
.$message
.destroy
()
this
.$message
.warning
(errMsg)
return
}
let params
= {
commandMode
: '0', // 配置模式 主机0 探测器1
issueType
: '1', // 1为首次下发 2为重新下发
jobName
: this
.modalData
.taskName,
userCode
: localStorage
.get
Item('userId'),
detectorList
: detectorList
.map(item =>
({
...item,
channelNo
: `${
item.systemAddress}@${
item.partUnitLoopCode}@${
item.channelNo}`,
}
)),
configs,
}
console
.log
(params)
factory
.batchConfig
(params)
.then
(res
=> {
if
(res
.success) {
this
.$message
.destroy
()
this
.$message
.success
('操作成功')
this
.handleCancel
()
this
.$parent
.getTableList
()
}
})
})
},
},
}
</script>
<style lang
="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);
}
.triangle {
position
: absolute;
bottom
: 0;
right
: 0;
width
: 0;
height
: 0;
border-style
: solid;
border-width
: 0 0 24px 24px;
border-color
: transparent transparent #006fff transparent;
}
/* 对勾实现 */
.checkmark {
position
: absolute;
bottom
: 5px; /* 调整位置使其在三角形内居中 */
right
: 4px; /* 调整位置使其在三角形内居中 */
width
: 8px;
height
: 5px;
transform
: 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;
}
}
}
}
}
span {
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> 代码评审
本文介绍了一个使用JavaScript将数组元素转换为对象数组的例子。通过`map`函数遍历字符串数组，构造出具有`name`属性的对象数组，并展示了如何利用`console.log`输出最终结果。
扫一扫
2992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
