<template>
|
<el-dialog title="数据点" v-model="visible" :width="'100%'" destroy-on-close @closed="$emit('closed')">
|
<p style="margin-bottom: 14px;display: flex;align-items: center;">
|
<span style="margin-right: 8px;">类型</span>
|
<el-select v-model="type" placeholder="类型" size="small" style="width: 240px" @change="changeType">
|
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
|
</el-select>
|
<span style="margin-right: 8px;margin-left: auto;">IOT应用ID</span>
|
<el-input v-model="appId" placeholder="IOT应用ID" style="width: 240px"></el-input>
|
</p>
|
|
<scFormTable v-show="type" ref="table1" v-model="tabledata" stripe hideDelete :hideAdd="!type"
|
:addTemplate="addTemplate">
|
<el-table-column label="操作" prop="state" width="200" fixed="left">
|
<template #default="scope">
|
<el-button-group>
|
<el-button text type="primary" size="small" @click="table_edit(scope.row)">编辑</el-button>
|
<el-button text type="primary" size="small" @click="copy(scope.row)">复制</el-button>
|
<el-popconfirm width="220" title="确定将选择的数据删除" @confirm="del(scope.$index)">
|
<template #reference>
|
<el-button text type="primary" size="small">删除</el-button>
|
</template>
|
</el-popconfirm>
|
</el-button-group>
|
|
</template>
|
</el-table-column>
|
<el-table-column width="200" v-for="item in cols" :key="item.prop" :prop="item.prop" :label="item.label">
|
<template #header="scope">
|
<span v-show="item.isRequired" style="color: red;">*</span>
|
<span>{{ scope.column.label }}</span>
|
<el-tooltip class="box-item" effect="dark" placement="top-start">
|
<template #content>
|
<p v-html="item.describe"></p>
|
</template>
|
<el-icon v-show="item.describe"><el-icon-question-filled /></el-icon>
|
</el-tooltip>
|
|
</template>
|
<template #default="scope">
|
<el-select :disabled="!scope.row.status || (item.disabledFn && item.disabledFn(scope.row))"
|
v-model="scope.row[item.prop]" @change="change($event, scope.row, scope.$index, item)"
|
placeholder="" size="small" v-if="item.type === 'option'">
|
<el-option v-for="item in item.options" :key="item.value || item" :label="(item?.label || item)"
|
:value="(item.value || item)" />
|
</el-select>
|
<el-switch :disabled="!scope.row.status" size="small" v-model="scope.row[item.prop]"
|
v-else-if="item.type === 'boolean'" />
|
<el-input size="small" v-model="scope.row[item.prop]" placeholder="" v-else-if="scope.row.status"
|
:disabled="(['dpLabel', 'dpName'].includes(item.prop) && 'Other' !== scope.row.dpCategory)"></el-input>
|
<span v-else>{{ scope.row[item.prop] }}</span>
|
</template>
|
</el-table-column>
|
|
|
</scFormTable>
|
<template #footer>
|
<el-button @click="visible = false">取 消</el-button>
|
<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import addOptions from './addOptions'
|
export default {
|
name: 'CollDialog',
|
emits: ['success', 'closed'],
|
mixins: [addOptions],
|
props: {
|
option: {
|
type: Object
|
}
|
},
|
computed: {
|
|
},
|
data() {
|
return {
|
mode: "add",
|
visible: false,
|
isSaveing: false,
|
params: {},
|
tabledata: [],
|
apiObj: null,
|
addTemplate: {
|
status: '2' // 不存在已保存 1: 正在编辑 2: 新增
|
},
|
type: '',
|
typeList: [],
|
appId: ''
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
change(e, row, index, { prop, options }) {
|
console.log(e, options)
|
if (prop === 'dpCategory' && e !== 'Other') {
|
const label = options.find(v => v.value === e).label
|
this.tabledata[index].dpLabel = label
|
this.tabledata[index].dpName = e
|
this.tabledata[index].paramChartType = 'distribute'
|
} else if (prop === 'dpCategory' && e === 'Other') {
|
this.tabledata[index].dpLabel = ''
|
this.tabledata[index].dpName = ''
|
}
|
// 点位分类为非其他时 过程参数展示方式为分布图
|
},
|
changeType(val) {
|
if (this.tabledata.length > 0) {
|
this.$confirm(`切换类型将删除所有已配置数据点`, '提示', {
|
type: 'warning'
|
}).then(() => {
|
try {
|
this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
|
this.addOptions(this.cols)
|
this.tabledata = []
|
} catch (error) {
|
this.cols = []
|
}
|
}).catch(() => {
|
|
})
|
} else {
|
try {
|
this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
|
this.addOptions(this.cols)
|
|
} catch (error) {
|
this.cols = []
|
}
|
}
|
console.log('default')
|
this.setAddTemp()
|
|
},
|
setAddTemp() {
|
this.cols.forEach(v => {
|
if (v.type === 'boolean') {
|
this.addTemplate[v.prop] = false
|
}
|
v.default && (this.addTemplate[v.prop] = v.default)
|
|
})
|
},
|
//显示
|
open(mode = 'add', params) {
|
this.isSaveing = false;
|
this.mode = mode;
|
this.visible = true;
|
this.params = params
|
this.getDetailList({
|
workstationId: this.params.id,
|
})
|
return this
|
},
|
getDetailList(params) {
|
this.$HTTP.get(`/api/smart-collect/tpl/typelist`, {}, { params }).then(res => {
|
|
this.typeList = res.data || [];
|
// return res
|
}).finally(() => {
|
this.getList(params)
|
})
|
|
},
|
// addOptions() {
|
// if (this.cols.filter(v => v.prop === 'isProcessParam').length === 0) {
|
// this.cols.unshift(
|
// {
|
// label: "过程参数",
|
// prop: "isProcessParam",
|
// isRequired: true,
|
// type: 'boolean',
|
// }
|
// )
|
// }
|
// if (this.cols.filter(v => v.prop === 'dpLabel').length === 0) {
|
// this.cols.unshift(
|
// {
|
// label: "显示名称",
|
// prop: "dpLabel",
|
// isRequired: true,
|
// }
|
// )
|
// }
|
// if (this.cols.filter(v => v.prop === 'dpCategory').length === 0) {
|
// this.cols.unshift(
|
// {
|
// label: "点位分类",
|
// prop: "dpCategory",
|
// isRequired: true,
|
// type: 'option',
|
// options: [{
|
// label: '程序名',
|
// value: 'ProgName'
|
// }, {
|
// label: '程序内容',
|
// value: 'ProgContent'
|
// }, {
|
// label: '刀具号',
|
// value: 'ToolNo'
|
// }, {
|
// label: '状态',
|
// value: 'DeviceStatus'
|
// }, {
|
// label: '产量',
|
// value: 'Output'
|
// }, {
|
// label: '告警',
|
// value: 'Alarm'
|
// }, {
|
// label: '其他',
|
// value: 'Other'
|
// }]
|
// }
|
// )
|
// }
|
// },
|
getList(params) {
|
this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
|
try {
|
this.cols = JSON.parse(res.data.dpHead)
|
this.addOptions(this.cols)
|
} catch (error) {
|
this.cols = []
|
}
|
try {
|
this.tabledata = JSON.parse(res.data.dpConfig).map(v => {
|
v.status = null
|
return v
|
}) || [];
|
} catch (error) {
|
this.tabledata = []
|
}
|
this.type = res.data.type
|
this.appId = res.data.appId
|
this.setAddTemp()
|
// return res
|
})
|
},
|
table_edit(row) {
|
console.log('bianji', row)
|
row.status = '1'
|
},
|
del(index) {
|
this.tabledata.splice(index, 1)
|
},
|
copy(row) {
|
this.tabledata.push(Object.assign({}, row, { status: '1' }))
|
},
|
//表单提交方法
|
submit() {
|
let isRequiredKey = this.cols.filter(v => v.isRequired).map(v => v.prop)
|
let flag = this.tabledata.every(item => {
|
return isRequiredKey.every(v => {
|
return item[v] !== undefined && item[v] !== null && item[v] !== ''
|
})
|
})
|
if (!flag) {
|
return this.$message.warning('请校验必填项')
|
}
|
let len = [...new Set(this.tabledata.map(v => v.dpName))].length
|
if (len != this.tabledata.length) {
|
return this.$message.warning('数据点名称不能重复')
|
}
|
this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', {
|
dpConfig: JSON.stringify(this.tabledata.map(v => {
|
delete v.status
|
return v
|
})),
|
workstationId: this.params.id,
|
type: this.type,
|
appId: this.appId
|
}).then(res => {
|
if (res.code === 200) {
|
this.getList({
|
workstationId: this.params.id,
|
})
|
this.visible = false
|
this.$emit('success')
|
} else {
|
this.$message.error(res.msg)
|
}
|
}).finally(() => {
|
|
})
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.workbranch {
|
list-style: none;
|
padding-left: 50px;
|
|
li {
|
margin-top: 8px;
|
|
span {
|
display: inline-block;
|
width: 25px;
|
height: 25px;
|
line-height: 25px;
|
text-align: center;
|
border-radius: 50%;
|
background: #ccc;
|
margin-right: 8px;
|
}
|
|
|
}
|
}
|
</style>
|
