<template>
<div id="main" class="h-all">
<el-dialog
@close="close"
v-dialogDrag
:title="$t('CollectTaskCommands.copyCollectTask')"
style="font-size: 10px;" width='830px'
:visible.sync="createCollectTask">
<el-row>
<el-form :model="form" inline="true" ref="form">
<el-form-item style="margin-bottom: -10px; float:left">
<el-form-item :label="'*'+ $t('CollectTask.taskName') + ':'" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
<el-input size='mini' :placeholder="$t('common.placeholder1')" v-model="form.taskName"
autocomplete="off" style="width:200px" v-on:blur="taskNameCheck"></el-input>
</el-form-item>
<el-form-item :label="'*'+ $t('CollectTask.collectPeriod')+':'"
:label-width="formLabelWidth"
style="margin-bottom: -10px;margin-top: -10px;"
prop="string">
<el-select clearable
size="mini"
@change="collectPeriodCheck(form.collectPeriod)"
v-model="form.collectPeriod"
style="width:210px"
filterable @blur="selectBlur"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item1 in periodList"
:key="item1.key"
:label="item1.label"
:value="item1.label">
</el-option>
</el-select>
<span>min</span>
</el-form-item>
</el-form-item>
<el-form-item style="float:left;margin-bottom: -10px">
<el-form-item :label="$t('DeviceConfigurationManagement.nodeDesc')+':'" :label-width="formLabelWidth">
<el-input type="textarea" :rows="3" size="mini" :placeholder="$t('common.placeholder')" v-model="form.description"
autocomplete="off" style="width: 550px; margin-top: 0px; margin-bottom: 10px"></el-input>
</el-form-item>
</el-form-item>
<el-form-item style="float:left;margin-bottom: -10px">
<el-form-item :label="'*'+ $t('CollectTask.useTime')+':'" :label-width="formLabelWidth" style="margin-bottom: 10px">
<el-radio-group v-model="form.radio" @change="startChange(form.radio)" style="margin-bottom: -5px">
<el-radio label=0>{{$t("CollectTask.useImmediate")}}</el-radio>
<el-radio label=1 style="margin-left: -20px">{{$t("CollectTask.useTimer")}}</el-radio>
</el-radio-group>
<el-date-picker
v-model="beginTimestamp"
type="datetime"
size="mini"
style="width: 175px"
:disabled="timeFlag"
format="yyyy-MM-dd HH:mm:ss"
:clearable="true"
align="center"
:picker-options="startDatePicker"
:placeholder="$t('Performance.startTimePlaceholder')">
</el-date-picker>
<span> - </span>
<el-date-picker
v-model="endTimestamp"
type="datetime"
size="mini"
style="width: 175px"
:disabled="timeFlag"
format="yyyy-MM-dd HH:mm:ss"
:clearable="true"
align="center"
:picker-options="endDatePicker"
:placeholder="$t('Performance.endTimePlaceholder')">
</el-date-picker>
</el-form-item>
</el-form-item>
<el-form-item style="float:left;margin-bottom: -10px">
<el-form-item :label="'*'+ $t('CollectTask.indexTemplate')+':'"
:label-width="formLabelWidth"
style="margin-bottom: -10px;margin-top: -10px;"
prop="string">
<el-select clearable
size="mini"
style="width:200px"
@change="indexTemplateChange"
v-model="form.indexTemplate"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item in indexTemplateList"
:key="item.performTemplateKey"
:label="item.performTemplateName"
:value="item.performTemplateKey">
</el-option>
</el-select>
</el-form-item>
<el-form-item :label="'*'+ $t('CollectTask.subnet')+':'"
:label-width="formLabelWidth"
style="margin-bottom: -10px;margin-top: -10px;"
prop="string">
<el-select clearable
size="mini"
style="width:210px"
@change="subnetCheck(form.subnet)"
v-model="form.subnet"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item1 in subnetList"
:key="item1.subnetKey"
:label="item1.subnetName"
:value="item1.subnetKey">
</el-option>
</el-select>
</el-form-item>
</el-form-item>
<el-form-item style="float:left;margin-bottom: -10px">
<el-form-item :label="'*'+ $t('CollectTask.monitorObject')+':'"
:label-width="formLabelWidth"
style="margin-bottom: -10px;margin-top: -10px;">
<el-radio-group v-model="monitorObject" style="margin-top: 10px;margin-bottom: 20px;margin-left: 0px">
<el-radio :label=0>{{$t("DeviceConfigurationManagement.nodeType")}}</el-radio>
<el-select clearable
size="mini"
style="width:200px"
multiple
collapse-tags
v-model="form.deviceType"
:disabled="monitorObjectFlag0"
@change="deviceTypeCheck(form.deviceType)"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item in deviceTypeList1"
:key="item.deviceTypeKey"
:label="item.deviceType"
:value="item.deviceTypeKey"></el-option>
</el-select>
<br>
<el-radio :label=1>{{$t("DeviceConfigurationManagement.nodeModel")}}</el-radio>
<el-select clearable
size="mini"
style="width:200px"
multiple
collapse-tags
@change="deviceModelCheck(form.deviceModel)"
v-model="form.deviceModel"
:disabled="monitorObjectFlag1"
:placeholder="$t('common.pleaseSelect')">
<el-option v-for="item in deviceModelList1"
:key="item.deviceModel"
:label="item.deviceModel"
:value="item.deviceModel">
</el-option>
</el-select>
</el-radio-group>
<!-- <el-form-item>-->
<!-- <el-form-item style="width: 100px">-->
<!-- </el-form-item>-->
<!-- </el-form-item>-->
</el-form-item>
</el-form-item>
<el-form-item style="float:left;margin-bottom: -10px">
<el-form-item :label-width="formLabelWidth" style="margin-right:135px; margin-top: -8px;">
<el-radio v-model='monitorObject' :label=2>{{$t("DeviceConfigurationManagement.nodeName")}}</el-radio>
<el-input
style="width: 200px;margin-left: -6px"
size="mini"
v-on:blur="deviceNameCheck"
:placeholder="$t('common.placeholder')"
disabled
v-model="form.deviceNameList">
</el-input>
<el-button size='mini'
type="primary"
:disabled="chooseDeviceFlag"
@click="chooseDevice">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xuanze"></use>
</svg>
{{$t("common.clickSelect")}}
</el-button>
</el-form-item>
<el-form-item style="margin-left: 300px">
</el-form-item>
</el-form-item>
<el-form-item style="float:left">
<el-form-item :label="'*'+ $t('CollectTask.taskStatus')+':'"
:label-width="formLabelWidth"
style="margin-top: -40px;">
<el-switch
v-model="form.value"
:active-value=0
:inactive-value=1>
</el-switch>
</el-form-item>
</el-form-item>
</el-form>
</el-row>
<el-row style="margin-top: -50px;margin-right: 150px" slot="footer">
<el-button icon="el-icon-circle-check" type="primary" size="mini" @click="onSubmit">{{$t("common.ok")}}</el-button>
<el-button icon='el-icon-circle-close' size="mini" @click="close">{{$t("common.cancel")}}</el-button>
</el-row>
</el-dialog>
<ChooseDeviceDialog :innerVisible.sync="innerVisible"
:passSubnet="passSubnet"
:indexTemplate="form.indexTemplate"
:deviceNameList.sync="form.deviceNameList">
</ChooseDeviceDialog>
</div>
</template>
<script>
import DeviceService from '../../../domain/services/DeviceService'
import SubnetService from '../../../domain/services/SubnetService'
import HelperUtil from '../../../utils/HelperUtil'
import legitimacyCheck from '../../../utils/legitimacyCheck'
import ChooseDeviceDialog from '../../DialogComponents/CollectTaskDialog/ChooseDeviceDialog'
import CollectTaskService from '../../../domain/services/CollectTaskService'
import loading from '../../../utils/Loading'
import IndexTeplateService from '../../../domain/services/IndexTeplateService'
export default {
name: 'CopyCollTaskDialog',
props: ['command'],
data: function () {
return {
createCollectTask: false,
initList: this.command.target,
check: null,
flag: true,
deviceTypeList1: [],
deviceModelList1: [],
subnetList: [],
subnetList1: {},
deviceList: [],
passSubnet: {},
deviceModelList: [],
indexTemplateList: [],
indexTemplateList1: {},
deviceTypeList: [],
monitorObjectFlag0: false,
monitorObjectFlag1: true,
monitorObjectFlag2: true,
monitorObject: 0,
chooseDeviceFlag: true,
beginTimestamp: '',
endTimestamp: '',
monitorObjectInit: '',
form: {
taskName: '',
collectPeriod: '',
description: '',
value: 0,
radio: '0',
indexTemplate: '',
subnet: '',
deviceType: '',
deviceModel: '',
deviceNameList: ''
},
periodList: [
{
key: '0',
label: '10'
},
{
key: '1',
label: '15'
},
{
key: '2',
label: '30'
}
],
startUseFlag: false,
timeFlag: true,
startDatePicker: this.beginDate(),
endDatePicker: this.endDate(),
commandContext: {},
innerVisible: false,
tableHeight: window.innerHeight * 0.7,
formLabelWidth: '120px'
}
},
methods: {
/**
* @Description : indexTemplateChange
* @author : ls
* @date : 2021/1/25 16:44
* @param :
* @return :
*/
indexTemplateChange: function () {
this.form.deviceType = ''
let unitList = this.indexTemplateList1[this.form.indexTemplate].unitList
this.deviceTypeList1 = []
let obj = {}
for (let t = 0; t < unitList.length; t++) {
if (!obj[unitList[t].deviceTypeKey]) {
this.deviceTypeList1.push(unitList[t])
obj[unitList[t].deviceTypeKey] = true
}
}
this.form.deviceModel = ''
let unitListModel = this.indexTemplateList1[this.form.indexTemplate].unitList
this.deviceModelList1 = []
let obj1 = {}
for (let n = 0; n < unitListModel.length; n++) {
if (!obj1[unitListModel[n].deviceTypeKey]) {
this.deviceModelList1.push(unitListModel[n])
obj1[unitListModel[n].deviceModel] = true
}
}
},
/**
* @Description : 开始时间
* @author : ls
* @date : 2020/4/29 14:50
* @param :
* @return :
*/
beginDate: function () {
let self = this
return {
disabledDate (time) {
if (self.endTimestamp === '') {
return time.getTime() < Date.now()
} else {
return time.getTime() > self.endTimestamp.getTime() || time.getTime() < Date.now()
}
}
}
},
/**
* @Description : 结束时间
* @author : ls
* @date : 2020/4/29 14:50
* @param :
* @return :
*/
endDate: function () {
let self = this
return {
disabledDate (time) {
if (self.beginTimestamp === '') {
return time.getTime() < Date.now()
} else {
return time.getTime() < (self.beginTimestamp.getTime()) || time.getTime() < Date.now()
}
}
}
},
/**
* @Description : 确认
* @author : ls
* @date : 2020/4/23 15:08
* @param :
* @return :
*/
onSubmit: function () {
if (!this.totalCheck()) {
return
}
this.monitorObjectInit = ''
if (this.monitorObject === 0) {
this.monitorObjectInit = this.form.deviceType.toString()
}
if (this.monitorObject === 1) {
this.monitorObjectInit = this.form.deviceModel.toString()
}
if (this.monitorObject === 2) {
var arr = this.form.deviceNameList.split(',')
var l = arr.length
if (l === 1) {
for (let t = 0; t < this.deviceList.length; t++) {
if (this.deviceList[t].displayName === arr[0]) {
this.monitorObjectInit = this.monitorObjectInit.concat(this.deviceList[t].deviceKey)
break
}
}
} else {
for (let j = 0; j < l; j++) {
for (let k = 0; k < this.deviceList.length; k++) {
if (this.deviceList[k].displayName === arr[j]) {
if (j !== l - 1) {
this.monitorObjectInit = this.monitorObjectInit.concat(this.deviceList[k].deviceKey).concat(',')
break
} else {
this.monitorObjectInit = this.monitorObjectInit.concat(this.deviceList[k].deviceKey)
}
}
}
}
}
}
let formTask = {
performTaskName: this.form.taskName,
period: parseInt(this.form.collectPeriod),
description: this.form.description,
status: this.form.value,
startTime: (this.beginTimestamp === '' || this.beginTimestamp === null) ? '' : HelperUtil.dateToString(this.beginTimestamp).concat('.000'),
endTime: (this.endTimestamp === '' || this.endTimestamp === null) ? '' : HelperUtil.dateToString(this.endTimestamp).concat('.000'),
performTemplateKey: this.form.indexTemplate,
subnetKey: this.form.subnet,
monitorType: this.monitorObject,
monitorObject: this.monitorObjectInit
}
let _this = this
let loadingInstance = _this.Loading.openLoading()
CollectTaskService.createCollectTask(formTask).then(result => {
_this.Loading.closeLoading(loadingInstance)
_this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.ADD_CODE))
_this.close()
}).catch(err => {
_this.Loading.closeLoading(loadingInstance)
this.InfoTip.errorTip(this, err)
})
},
/**
* @Description : 任务名称校验
* @author : ls
* @date : 2020/4/28 13:55
* @param :
* @return :
*/
taskNameCheck: function () {
if (!this.check.textNullCheck(this.form.taskName)) {
this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.taskName'))
return false
}
if (!this.check.textLengthCheck(this.form.taskName)) return false
return true
},
selectBlur: function (e) {
this.form.collectPeriod = e.target.value
},
/**
* @Description : 采集周期校验
* @auor : ls
* @date : 2020/4/28 13:58
* @param :
* @return :
*/
collectPeriodCheck: function (val) {
var result = this.check.textNullCheck(val)
if (!result) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.collectPeriod'))
return false
}
return true
},
/**
* @Description : 立即启用设置
* @author : ls
* @date : 2020/4/28 14:02
* @param :
* @return :
*/
useDisableOrNo: function (val) {
if (val === 1) {
this.startUseFlag = true
}
if (val === 0) {
this.startUseFlag = false
}
this.timeFlag = true
},
/**
* @Description : 时间校验
* @author : ls
* @date : 2020/4/28 14:19
* @param :
* @return :
*/
startChange: function (val) {
if (val === '0') {
this.timeFlag = true
this.beginTimestamp = ''
this.endTimestamp = ''
}
if (val === '1') {
this.timeFlag = false
var arr = HelperUtil.setDefaultDateTime()
this.beginTimestamp = arr[1]
}
},
/**
* @Description : 指标模板校验
* @author : ls
* @date : 2020/4/28 14:35
* @param :
* @return :
*/
indexTemplateCheck: function (val) {
var result = this.check.textNullCheck(val)
if (!result) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.indexTemplate'))
return false
}
return true
},
/**
* @Description : 所属子网
* @author : ls
* @date : 2020/4/28 14:37
* @param :
* @return :
*/
subnetCheck: function (val) {
var result = this.check.textNullCheck(val)
if (!result) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.subnet'))
return false
}
return true
},
/**
* @Description : 网元类型
* @author : ls
* @date : 2020/4/28 14:41
* @param :
* @return :
*/
deviceTypeCheck: function (val) {
var result = this.check.textNullCheck(val)
if (!result) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeType'))
return false
}
return true
},
/**
* @Description : 网元型号
* @author : ls
* @date : 2020/4/28 14:42
* @param :
* @return :
*/
deviceModelCheck: function (val) {
var result = this.check.textNullCheck(val)
if (!result) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeModel'))
return false
}
return true
},
/**
* @Description : 选择网元校验
* @author : ls
* @date : 2020/4/29 14:46
* @param :
* @return :
*/
chooseCheck: function () {
if (!this.indexTemplateCheck(this.form.indexTemplate)) {
return false
}
if (!this.subnetCheck(this.form.subnet)) {
return false
}
return true
},
/**
* @Description : xianshi
* @author : ls
* @date : 2020/4/28 15:28
* @param :
* @return :
*/
chooseDevice: function () {
if (!this.chooseCheck()) {
return
}
this.form.deviceNameList = ''
this.passSubnet = this.subnetList1[this.form.subnet]
this.innerVisible = true
},
/**
* @Description : 网元名称
* @author : ls
* @date : 2020/4/28 15:03
* @param :
* @return :
*/
deviceNameCheck: function () {
var result = this.check.textNullCheck(this.form.deviceNameList)
if (!result) {
this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeName'))
return false
}
return true
},
/**
* @Description : 获取网元类型
* @author : ls
* @date : 2020/4/28 13:50
* @param :
* @return :
*/
getAllDeviceType: function () {
let _this = this
DeviceService.getAllDeviceTypeCollection().then(result => {
_this.deviceTypeList = Object.values(result)
}).catch(err => {
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取网元型号
* @author : ls
* @date : 2020/4/28 13:27
* @param :
* @return :
*/
getAllDeviceModel: function () {
let _this = this
DeviceService.getAllDeviceModelCollection().then(result => {
_this.deviceModelList = Object.values(result)
}).catch(err => {
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取指标模板
* @author : ls
* @date : 2020/5/25 10:16
* @param :
* @return :
*/
getAllIndexTemplate: function () {
let _this = this
let loadingInstance = loading.openLoading()
IndexTeplateService.getAllIndexTemplateCollection().then(result => {
_this.indexTemplateList = Object.values(result)
_this.indexTemplateList1 = result
this.openTemplateInit()
loadingInstance.close()
}).catch(err => {
this.InfoTip.errorTip(this, err)
loadingInstance.close()
})
},
/**
* @Description : 提交校验
* @author : ls
* @date : 2020/4/28 14:46
* @param :
* @return :
*/
totalCheck: function () {
if (!this.taskNameCheck(this.form.taskName)) {
return false
}
if (!this.collectPeriodCheck(this.form.collectPeriod)) {
return false
}
if (!this.indexTemplateCheck(this.form.indexTemplate)) {
return false
}
if (!this.subnetCheck(this.form.subnet)) {
return false
}
switch (this.monitorObject) {
case 0:
if (!this.deviceTypeCheck(this.form.deviceType)) {
return false
}
break
case 1:
if (!this.deviceModelCheck(this.form.deviceModel)) {
return false
}
break
case 2:
if (!this.deviceNameCheck(this.form.deviceNameList)) {
return false
}
break
}
return true
},
/**
* @Description : 关闭
* @author : ls
* @date : 2020/4/23 12:34
* @param :
* @return :
*/
close: function () {
this.command.done()
},
/**
* @Description : 日期转换
* @author : ls
* @date : 2020/5/26 10:54
* @param :
* @return :
*/
stringToDate: function (str) {
let date = null
if (str !== '' && str !== null) {
if (str.length !== 19) {
} else {
let timeList = str.split('.')
let time = timeList[0].substring(0, 4) + '-' + timeList[0].substring(4, 6) + '-' + timeList[0].substring(6, 8) + ' '
time = time + timeList[1].substring(0, 2) + ':' + timeList[1].substring(2, 4) + ':' + timeList[1].substring(4, 6)
date = new Date(time)
return date
}
} else {
return ''
}
},
openTemplateInit: function () {
this.form.taskName = this.initList.performTaskName
this.form.collectPeriod = this.initList.period
this.form.description = this.initList.description
this.form.value = this.initList.status
var a = this.initList.startTime !== '' && this.initList.startTime !== null
var b = this.initList.endTime !== '' && this.initList.endTime !== null
if (a || b) {
this.form.radio = '1'
} else {
this.form.radio = '0'
}
this.startChange(this.form.radio)
this.beginTimestamp = HelperUtil.stringToDate(this.initList.startTime.substring(0, 15))
this.endTimestamp = HelperUtil.stringToDate(this.initList.endTime.substring(0, 15))
this.form.indexTemplate = this.initList.performTemplateKey
this.indexTemplateChange()
this.form.subnet = this.initList.subnetKey
this.monitorObject = this.initList.monitorType
switch (this.initList.monitorType) {
case 0:
this.form.deviceType = this.initList.monitorObject.split(',')
break
case 1:
this.form.deviceModel = this.initList.monitorObject.split(',')
break
case 2:
this.form.deviceNameList = this.initList.monitorObjectName
break
}
},
/**
* @Description : 获取所属子网
* @author : ls
* @date : 2020/4/28 15:12
* @param :
* @return :
*/
getAllSubnet: function () {
let _this = this
SubnetService.getAllSubnetCollection().then(result => {
_this.subnetList1 = result
_this.subnetList = Object.values(result)
}).catch(err => {
_this.InfoTip.errorTip(_this, err)
})
},
/**
* @Description : 获取所有网元
* @author : ls
* @date : 2020/11/26 11:21
* @param :
* @return :
*/
getAllDevice: function () {
DeviceService.getAllDeviceCollection().then(result => {
this.deviceList = Object.values(result)
}).catch(err => {
this.InfoTip.errorTip(this, err)
})
}
},
created: function () {
this.check = legitimacyCheck()
this.getAllSubnet()
this.getAllDevice()
// this.getAllDeviceType()
// this.getAllDeviceModel()
this.getAllIndexTemplate()
// this.openTemplateInit()
},
// 初始化函数，加载数据
mounted () {
this.createCollectTask = true
},
components: {
ChooseDeviceDialog
},
watch: {
innerVisible (newVal, oldVal) {
},
monitorObject (newVal) {
switch (newVal) {
case 0:
this.monitorObjectFlag0 = false
this.monitorObjectFlag1 = true
this.monitorObjectFlag2 = true
this.chooseDeviceFlag = true
break
case 1:
this.monitorObjectFlag0 = true
this.monitorObjectFlag1 = false
this.monitorObjectFlag2 = true
this.chooseDeviceFlag = true
break
case 2:
this.monitorObjectFlag0 = true
this.monitorObjectFlag1 = true
this.monitorObjectFlag2 = false
this.chooseDeviceFlag = false
break
}
}
}
}
</script>
<style scoped lang="scss">
/*!* 外层布局容器样式 *!*/
.el-header {
background-color: #f9fafc;
color: #333;
line-height: 40px;
}
#box{
width:100%;
height:100%;
overflow:hidden;
}
.el-card__header {
background-color: greenyellow;
}
/* .el-input {
width: 330px;
}*/
/deep/ .el-textarea__inner{
font-size: 12px;
}
</style>