0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(iot): 添加设备功能控制接口、物模型添加事件配置 

- 新增 setFunctionControl 函数用于设备功能控制
- 优化型号列表展示，增加型号名称的链接
- 物模型添加事件配置
- 优化数据加载和提交逻辑
This commit is contained in:
fhysy 2025-05-21 17:40:43 +08:00
parent c1ab37bfc1
commit e2ee83dae8
9 changed files with 1740 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/iot/device.js
View File

@ -265,3 +265,11 @@ export function deviceSendTimingConfig(data) {
data: data data: data
}); });
} }
// 功能下发
export function setFunctionControl(data) {
return request({
url: "/iot/dev/opt/function",
method: "post",
data: data
});
}

63
src/views/iot/device/profile/functionWrap.vue
View File

@ -333,7 +333,7 @@
</div> </div>
</template> </template>
<script> <script>
import { updateDevice, resetPssword, setSwitchControl } from "@/api/iot/device"; import { updateDevice, resetPssword, setSwitchControl, setFunctionControl } from "@/api/iot/device";
import DialogTemplate from "@/components/DialogTemplate"; import DialogTemplate from "@/components/DialogTemplate";
import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig"; import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig"; import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
@ -589,11 +589,16 @@ export default {
processedData[key] = value; processedData[key] = value;
} }
} }
let params = {
// 模拟API调用 input: processedData,
setTimeout(() => { deviceKey: this.deviceInfo.deviceKey,
funcId:item.id
};
setFunctionControl(params).then(response => {
console.log("下发事件", response);
this.loading = false; this.loading = false;
if (response?.code == 200) {
this.msgSuccess("添加成功");
// 添加执行结果 // 添加执行结果
const result = { const result = {
time: new Date().toLocaleString(), time: new Date().toLocaleString(),
@ -608,21 +613,51 @@ export default {
if (this.executionResults.length > 20) { if (this.executionResults.length > 20) {
this.executionResults.pop(); this.executionResults.pop();
} }
// 显示执行结果提示
if (result.success) {
this.$message.success("功能执行成功");
} else {
this.$message.error("功能执行失败");
}
// 滚动到顶部 // 滚动到顶部
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.resultContent) { if (this.$refs.resultContent) {
this.$refs.resultContent.scrollTop = 0; this.$refs.resultContent.scrollTop = 0;
} }
}); });
}, 1000); } else {
this.$message.error("功能执行失败");
}
});
// 模拟API调用
// setTimeout(() => {
// this.loading = false;
//
// // 添加执行结果
// const result = {
// time: new Date().toLocaleString(),
// functionName: item.name,
// success: Math.random() > 0.2, // 模拟成功/失败
// data: JSON.stringify(processedData, null, 2)
// };
//
// this.executionResults.unshift(result);
//
// // 控制结果列表最大数量
// if (this.executionResults.length > 20) {
// this.executionResults.pop();
// }
//
// // 显示执行结果提示
// if (result.success) {
// this.$message.success("功能执行成功");
// } else {
// this.$message.error("功能执行失败");
// }
//
// // 滚动到顶部
// this.$nextTick(() => {
// if (this.$refs.resultContent) {
// this.$refs.resultContent.scrollTop = 0;
// }
// });
// }, 1000);
} }
}); });
}else{ }else{

273
src/views/iot/model/index.vue
View File

@ -93,7 +93,13 @@
label="型号名称" label="型号名称"
prop="modelName" prop="modelName"
width="200px" width="200px"
/> >
<template slot-scope="scope">
<el-button type="text" @click="handleUpdate(scope.row)">{{
scope.row.modelName
}}</el-button>
</template>
</el-table-column>
<el-table-column <el-table-column
align="left" align="left"
label="厂商名称" label="厂商名称"
@ -120,9 +126,9 @@
prop="deviceTypeName" prop="deviceTypeName"
width="120px" width="120px"
> >
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- <span v-text="deviceTypeList[scope.row.deviceType]"></span>--> <!-- <span v-text="deviceTypeList[scope.row.deviceType]"></span>-->
<!-- </template>--> <!-- </template>-->
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -199,7 +205,13 @@
width="1000px" width="1000px"
@close="open = false" @close="open = false"
> >
<el-form ref="form" slot="dialog-center" :model="form" :rules="rules" label-width="100px"> <el-form
ref="form"
slot="dialog-center"
:model="form"
:rules="rules"
label-width="100px"
>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="厂商：" prop="vendorId"> <el-form-item label="厂商：" prop="vendorId">
@ -232,7 +244,11 @@
<el-input <el-input
v-if="form.protocolType === 'OFFICIAL'" v-if="form.protocolType === 'OFFICIAL'"
v-model="form.prodKey" v-model="form.prodKey"
:disabled="form.modelId !== undefined && form.modelId !== null && form.modelId !== ''" :disabled="
form.modelId !== undefined &&
form.modelId !== null &&
form.modelId !== ''
"
placeholder="请填写产品PK" placeholder="请填写产品PK"
></el-input> ></el-input>
<el-input <el-input
@ -250,7 +266,9 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style=" <el-col
:span="24"
style="
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
height: 0; height: 0;
@ -258,8 +276,20 @@
position: relative; position: relative;
top: -10px;" top: -10px;"
> >
<el-button icon="el-icon-s-platform" style="height: 40px;" type="primary" @click="openModelDialog">物模型</el-button> <el-button
<el-button icon="el-icon-menu" style="height: 40px;" type="primary" @click="openTableSelectScriesDialog">选择型号系列</el-button> icon="el-icon-s-platform"
style="height: 40px;"
type="primary"
@click="openModelDialog"
>物模型</el-button
>
<el-button
icon="el-icon-menu"
style="height: 40px;"
type="primary"
@click="openTableSelectScriesDialog"
>选择型号系列</el-button
>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
@ -372,7 +402,7 @@
:other="{ :other="{
action: '', action: '',
prodPK: form.prodKey, prodPK: form.prodKey,
cmdKey: '', cmdKey: ''
}" }"
:paramIdx="childOpt.paramIdx" :paramIdx="childOpt.paramIdx"
:paramsList="functionList" :paramsList="functionList"
@ -408,7 +438,7 @@
:other="{ :other="{
action: '', action: '',
prodPK: this.form.prodKey, prodPK: this.form.prodKey,
cmdKey: '', cmdKey: ''
}" }"
:paramsList="modelValue" :paramsList="modelValue"
></params-json-wrap> ></params-json-wrap>
@ -425,7 +455,7 @@ import {
updateModel, updateModel,
exportModel, exportModel,
listProductList, listProductList,
listModelType, listModelType
} from "@/api/iot/model"; } from "@/api/iot/model";
import { listVendor } from "@/api/iot/vendor"; import { listVendor } from "@/api/iot/vendor";
import { listDeviceTypeList } from "@/api/iot/device"; import { listDeviceTypeList } from "@/api/iot/device";
@ -443,7 +473,7 @@ import ParamsJsonWrap from "@/views/profile/attribute/paramsJson";
const deviceStartsOpt = { const deviceStartsOpt = {
0: "禁用", 0: "禁用",
1: "启用", 1: "启用"
}; };
export default { export default {
@ -465,7 +495,7 @@ export default {
componectVal: "attributeForm", componectVal: "attributeForm",
childOpt: { childOpt: {
type: "add", type: "add",
paramIdx: 0, paramIdx: 0
}, },
protocolTypeOpt: {}, protocolTypeOpt: {},
AttributeViewShow: false, AttributeViewShow: false,
@ -503,28 +533,28 @@ export default {
prodSecret: null, prodSecret: null,
protocolType: null, protocolType: null,
orderByColumn: "createTime", orderByColumn: "createTime",
isAsc: "desc", isAsc: "desc"
}, },
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
vendorId: [ vendorId: [
{ required: true, message: "厂商不能为空", trigger: "change" }, { required: true, message: "厂商不能为空", trigger: "change" }
], ],
prodKey: [ prodKey: [
{ required: true, message: "产品PK不能为空", trigger: "change" }, { required: true, message: "产品PK不能为空", trigger: "change" }
], ],
modelName: [ modelName: [
{ required: true, message: "型号名称不能为空", trigger: "blur" }, { required: true, message: "型号名称不能为空", trigger: "blur" }
], ],
deviceType: [ deviceType: [
{ required: true, message: "设备类型不能为空", trigger: "blur" }, { required: true, message: "设备类型不能为空", trigger: "blur" }
], ]
}, },
functionList: [], functionList: [],
deviceTypeList: {}, deviceTypeList: {},
componentTitle: "", componentTitle: ""
}; };
}, },
created() { created() {
@ -541,8 +571,8 @@ export default {
this.AttributeViewShow = true; this.AttributeViewShow = true;
this.functionList = JSON.parse( this.functionList = JSON.parse(
JSON.stringify({ JSON.stringify({
properties:this.$store.getters.attributeList, properties: this.$store.getters.attributeList,
functions:this.$store.getters.groupList, functions: this.$store.getters.groupList
}) })
); );
this.componectVal = data.component; this.componectVal = data.component;
@ -563,14 +593,14 @@ export default {
this.$refs.attributeref.forceUpdate(this.componectVal); this.$refs.attributeref.forceUpdate(this.componectVal);
}, },
getModelTypeList() { getModelTypeList() {
listModelType().then((res) => { listModelType().then(res => {
this.protocolTypeOpt = res.data; this.protocolTypeOpt = res.data;
}); });
}, },
sortChange(column) { sortChange(column) {
const sort = { const sort = {
isAsc: column.order === "descending" ? "desc" : "asc", isAsc: column.order === "descending" ? "desc" : "asc",
orderByColumn: column.prop, orderByColumn: column.prop
}; };
this.queryParams = Object.assign(this.queryParams, sort); this.queryParams = Object.assign(this.queryParams, sort);
this.handleQuery(); this.handleQuery();
@ -582,7 +612,7 @@ export default {
}, },
// 查询设备类型列表 // 查询设备类型列表
getDeviceTypeList() { getDeviceTypeList() {
listDeviceTypeList().then((response) => { listDeviceTypeList().then(response => {
this.deviceTypeList = response.data; this.deviceTypeList = response.data;
}); });
}, },
@ -590,21 +620,21 @@ export default {
this.selectResult = {}; this.selectResult = {};
this.tableSelectOption = { this.tableSelectOption = {
otherOption: { otherOption: {
tableType: "product", tableType: "product"
}, },
queryOpt: { queryOpt: {
disable: false, disable: false,
labelWidth: "68px", labelWidth: "68px",
params: { params: {
protocolType: this.form.protocolType, protocolType: this.form.protocolType
}, },
page: { page: {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
total: 0, total: 0
}, },
inline: true, inline: true,
queryChilds: [], queryChilds: []
}, },
tableOpt: { tableOpt: {
loading: false, loading: false,
@ -620,7 +650,7 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, },
{ {
style: "", style: "",
@ -630,23 +660,24 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, }
], ],
tableList: { tableList: {
type: Array, type: Array
}
}, },
}, tableList: []
tableList: [],
}; };
this.selectTableShow = true; this.selectTableShow = true;
}, },
openModelDialog() { openModelDialog() {
this.modelOpen=true; this.modelOpen = true;
this.modelValue = JSON.parse( this.modelValue = JSON.parse(
JSON.stringify({ JSON.stringify({
properties:this.$store.getters.attributeList, properties: this.$store.getters.attributeList,
functions:this.$store.getters.functionList, functions: this.$store.getters.functionList,
events: this.$store.getters.eventList
}) })
); );
}, },
@ -654,19 +685,19 @@ export default {
this.selectResult = {}; this.selectResult = {};
this.tableSelectOption = { this.tableSelectOption = {
otherOption: { otherOption: {
tableType: "scries", tableType: "scries"
}, },
queryOpt: { queryOpt: {
disable: false, disable: false,
labelWidth: "68px", labelWidth: "68px",
params: { params: {
seriesName: "", seriesName: "",
prodKey: "", prodKey: ""
}, },
page: { page: {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
total: 0, total: 0
}, },
inline: true, inline: true,
queryChilds: [ queryChilds: [
@ -678,7 +709,7 @@ export default {
type: "input", type: "input",
key: "seriesName", key: "seriesName",
size: "small", size: "small",
value: "", value: ""
}, },
{ {
style: "", style: "",
@ -688,9 +719,9 @@ export default {
type: "input", type: "input",
key: "prodKey", key: "prodKey",
size: "small", size: "small",
value: "", value: ""
}, }
], ]
}, },
tableOpt: { tableOpt: {
loading: false, loading: false,
@ -706,7 +737,7 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, },
{ {
style: "", style: "",
@ -716,7 +747,7 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, },
{ {
style: "", style: "",
@ -726,14 +757,14 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, }
], ],
tableList: { tableList: {
type: Array, type: Array
}
}, },
}, tableList: []
tableList: [],
}; };
this.selectTableShow = true; this.selectTableShow = true;
}, },
@ -742,7 +773,7 @@ export default {
this.selectResult = {}; this.selectResult = {};
this.tableSelectOption = { this.tableSelectOption = {
otherOption: { otherOption: {
tableType: "vendor", tableType: "vendor"
}, },
queryOpt: { queryOpt: {
disable: false, disable: false,
@ -750,12 +781,12 @@ export default {
params: { params: {
vendorName: "", vendorName: "",
vendorAddress: "", vendorAddress: "",
vendorContact: "", vendorContact: ""
}, },
page: { page: {
pageSize: 10, pageSize: 10,
pageNum: 1, pageNum: 1,
total: 0, total: 0
}, },
inline: true, inline: true,
queryChilds: [ queryChilds: [
@ -767,7 +798,7 @@ export default {
type: "input", type: "input",
key: "vendorName", key: "vendorName",
size: "small", size: "small",
value: "", value: ""
}, },
{ {
style: "", style: "",
@ -777,7 +808,7 @@ export default {
type: "input", type: "input",
key: "vendorAddress", key: "vendorAddress",
size: "small", size: "small",
value: "", value: ""
}, },
{ {
style: "", style: "",
@ -787,9 +818,9 @@ export default {
type: "input", type: "input",
key: "vendorContact", key: "vendorContact",
size: "small", size: "small",
value: "", value: ""
}, }
], ]
}, },
tableOpt: { tableOpt: {
loading: false, loading: false,
@ -805,7 +836,7 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, },
{ {
style: "", style: "",
@ -815,7 +846,7 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, },
{ {
style: "", style: "",
@ -825,29 +856,29 @@ export default {
align: "left", align: "left",
width: "", width: "",
"show-overflow-tooltip": false, "show-overflow-tooltip": false,
tempType: "span", tempType: "span"
}, }
], ],
tableList: { tableList: {
type: Array, type: Array
}
}, },
}, tableList: []
tableList: [],
}; };
this.selectTableShow = true; this.selectTableShow = true;
}, },
// 查询回调 // 查询回调
childGetList(data) { childGetList(data) {
switch(data.otherOption.tableType) { switch (data.otherOption.tableType) {
case 'vendor': case "vendor":
this.vendorChildList(data); this.vendorChildList(data);
break; break;
case 'product': case "product":
this.productChildList(data); this.productChildList(data);
break; break;
case 'scries': case "scries":
this.scriesChildList(data); this.scriesChildList(data);
break; break;
} }
@ -855,44 +886,42 @@ export default {
productChildList(data) { productChildList(data) {
listProductList( listProductList(
Object.assign(data.page, data.param, { selected: 1 }) Object.assign(data.page, data.param, { selected: 1 })
).then((response) => { ).then(response => {
this.tableSelectOption.tableList = response.data; this.tableSelectOption.tableList = response.data;
// this.tableSelectOption.queryOpt.page.total = Number(response.total); // this.tableSelectOption.queryOpt.page.total = Number(response.total);
}); });
}, },
vendorChildList(data) { vendorChildList(data) {
listVendor(Object.assign(data.page, data.param, { selected: 1 })).then( listVendor(Object.assign(data.page, data.param, { selected: 1 })).then(
(response) => { response => {
this.tableSelectOption.tableList = response.rows; this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total); this.tableSelectOption.queryOpt.page.total = Number(response.total);
} }
); );
}, },
scriesChildList(data) { scriesChildList(data) {
listModelSeries(Object.assign(data.page, data.param)).then( listModelSeries(Object.assign(data.page, data.param)).then(response => {
(response) => {
this.tableSelectOption.tableList = response.rows; this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total); this.tableSelectOption.queryOpt.page.total = Number(response.total);
} });
);
}, },
// 点击或者双击数据回调 // 点击或者双击数据回调
returnEvent(data) { returnEvent(data) {
console.log('弹窗回调',data) console.log("弹窗回调", data);
this.selectResult = {}; this.selectResult = {};
if (data.type === "dblclick") { if (data.type === "dblclick") {
switch(data.otherOption.tableType) { switch (data.otherOption.tableType) {
case 'vendor': case "vendor":
this.form.vendorId = data.value.vendorId; this.form.vendorId = data.value.vendorId;
this.form.vendorName = data.value.vendorName; this.form.vendorName = data.value.vendorName;
break; break;
case 'product': case "product":
this.form.prodKey = data.value.prodId; this.form.prodKey = data.value.prodId;
this.form.prodSecret = data.value.prodSecret; this.form.prodSecret = data.value.prodSecret;
break; break;
case 'scries': case "scries":
this.form.prodJson = data.value.prodJson; this.form.prodJson = data.value.prodJson;
this.form.remark = data.value.remark; this.form.remark = data.value.remark;
this.form.deviceType = data.value.deviceType; this.form.deviceType = data.value.deviceType;
@ -906,28 +935,26 @@ export default {
setTimeout(() => { setTimeout(() => {
_this.$refs.paramWrap.setList(_this.form.paramList || []); _this.$refs.paramWrap.setList(_this.form.paramList || []);
_this.$refs.attributeref.handleInitData(); _this.$refs.attributeref.handleInitData();
_this.$refs.attributeref.forceUpdateList('groupForm'); _this.$refs.attributeref.forceUpdateList("groupForm");
_this.$refs.attributeref.forceUpdateList('attributeForm'); _this.$refs.attributeref.forceUpdateList("attributeForm");
}, 100); }, 100);
break; break;
} }
this.selectTableShow = false; this.selectTableShow = false;
} else if (data.type === "click") { } else if (data.type === "click") {
switch (data.otherOption.tableType) {
switch(data.otherOption.tableType) { case "vendor":
case 'vendor':
this.selectResult.vendorId = data.value.vendorId; this.selectResult.vendorId = data.value.vendorId;
this.selectResult.vendorName = data.value.vendorName; this.selectResult.vendorName = data.value.vendorName;
break; break;
case 'product': case "product":
this.selectResult.prodKey = data.value.prodId; this.selectResult.prodKey = data.value.prodId;
this.selectResult.prodSecret = data.value.prodSecret; this.selectResult.prodSecret = data.value.prodSecret;
break; break;
case 'scries': case "scries":
this.selectResult.prodJson = data.value.prodJson; this.selectResult.prodJson = data.value.prodJson;
this.selectResult.remark = data.value.remark; this.selectResult.remark = data.value.remark;
this.selectResult.deviceType = data.value.deviceType; this.selectResult.deviceType = data.value.deviceType;
@ -937,7 +964,7 @@ export default {
} catch (error) { } catch (error) {
this.selectResult.paramList = []; this.selectResult.paramList = [];
} }
console.log('row:', data.value) console.log("row:", data.value);
break; break;
} }
@ -946,30 +973,30 @@ export default {
}, },
// 点击确定按钮 // 点击确定按钮
resuleClick() { resuleClick() {
debugger debugger;
switch(this.selectResult.tableType) { switch (this.selectResult.tableType) {
case 'vendor': case "vendor":
this.form.vendorId = this.selectResult.vendorId; this.form.vendorId = this.selectResult.vendorId;
this.form.vendorName = this.selectResult.vendorName; this.form.vendorName = this.selectResult.vendorName;
break; break;
case 'product': case "product":
this.form.prodKey = this.selectResult.prodKey; this.form.prodKey = this.selectResult.prodKey;
this.form.prodSecret = this.selectResult.prodSecret; this.form.prodSecret = this.selectResult.prodSecret;
break; break;
case 'scries': case "scries":
this.form.prodJson = this.selectResult.prodJson; this.form.prodJson = this.selectResult.prodJson;
this.form.remark = this.selectResult.remark; this.form.remark = this.selectResult.remark;
this.form.deviceType = this.selectResult.deviceType; this.form.deviceType = this.selectResult.deviceType;
this.form.paramList = this.selectResult.paramList this.form.paramList = this.selectResult.paramList;
let _this = this; let _this = this;
setTimeout(() => { setTimeout(() => {
_this.$refs.paramWrap.setList(_this.form.paramList || []); _this.$refs.paramWrap.setList(_this.form.paramList || []);
_this.$refs.attributeref.handleInitData(); _this.$refs.attributeref.handleInitData();
_this.$refs.attributeref.forceUpdateList('groupForm'); _this.$refs.attributeref.forceUpdateList("groupForm");
_this.$refs.attributeref.forceUpdateList('attributeForm'); _this.$refs.attributeref.forceUpdateList("attributeForm");
_this.$refs.attributeref.forceUpdateList('functionForm'); _this.$refs.attributeref.forceUpdateList("functionForm");
}, 100); }, 100);
break; break;
@ -979,7 +1006,7 @@ export default {
/** 查询型号列表 */ /** 查询型号列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listModel(this.queryParams).then((response) => { listModel(this.queryParams).then(response => {
this.modelList = response.rows; this.modelList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
@ -1001,7 +1028,7 @@ export default {
paramList: [], paramList: [],
protocolType: "OFFICIAL", protocolType: "OFFICIAL",
prodJson: "", prodJson: "",
seriesKey:"" seriesKey: ""
}; };
this.resetForm("form"); this.resetForm("form");
}, },
@ -1017,7 +1044,7 @@ export default {
}, },
// 多选框选中数据 // 多选框选中数据
handleSelectionChange(selection) { handleSelectionChange(selection) {
this.ids = selection.map((item) => item.modelId); this.ids = selection.map(item => item.modelId);
this.single = selection.length !== 1; this.single = selection.length !== 1;
this.multiple = !selection.length; this.multiple = !selection.length;
}, },
@ -1032,7 +1059,7 @@ export default {
this.reset(); this.reset();
const modelId = row.modelId || this.ids; const modelId = row.modelId || this.ids;
const _this = this; const _this = this;
getModel(modelId).then((response) => { getModel(modelId).then(response => {
_this.form = response.data; _this.form = response.data;
_this.open = true; _this.open = true;
_this.title = "修改型号"; _this.title = "修改型号";
@ -1043,7 +1070,7 @@ export default {
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
this.$refs["form"].validate((valid) => { this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
if (this.form.protocolType === "OFFICIAL") { if (this.form.protocolType === "OFFICIAL") {
let attrList = []; let attrList = [];
@ -1051,7 +1078,7 @@ export default {
this.$store.getters.attributeList && this.$store.getters.attributeList &&
this.$store.getters.attributeList.length > 0 this.$store.getters.attributeList.length > 0
) { ) {
attrList = this.$store.getters.attributeList.map((v) => { attrList = this.$store.getters.attributeList.map(v => {
v["sourceId"] = this.form.prodKey; v["sourceId"] = this.form.prodKey;
return v; return v;
}); });
@ -1063,7 +1090,7 @@ export default {
this.$store.getters.groupList && this.$store.getters.groupList &&
this.$store.getters.groupList.length > 0 this.$store.getters.groupList.length > 0
) { ) {
groupList = this.$store.getters.groupList.map((v) => { groupList = this.$store.getters.groupList.map(v => {
v["sourceId"] = this.form.prodKey; v["sourceId"] = this.form.prodKey;
return v; return v;
}); });
@ -1086,23 +1113,24 @@ export default {
eventList = this.$store.getters.eventList; eventList = this.$store.getters.eventList;
} }
this.form.prodJson = JSON.stringify({ this.form.prodJson =
properties:attrList, JSON.stringify({
functions:functionList, properties: attrList,
events:eventList functions: functionList,
events: eventList
}) || null; }) || null;
this.form.remark = JSON.stringify(groupList) || null; this.form.remark = JSON.stringify(groupList) || null;
} }
this.form.paramList = this.$refs.paramWrap.getResult(); this.form.paramList = this.$refs.paramWrap.getResult();
if (this.form.modelId != null ) { if (this.form.modelId != null) {
updateModel(this.form).then((response) => { updateModel(this.form).then(response => {
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
this.open = false; this.open = false;
this.getList(); this.getList();
}); });
} else { } else {
addModel(this.form).then((response) => { addModel(this.form).then(response => {
this.msgSuccess("新增成功"); this.msgSuccess("新增成功");
this.open = false; this.open = false;
this.getList(); this.getList();
@ -1117,9 +1145,9 @@ export default {
this.$confirm("是否删除该选项?", "警告", { this.$confirm("是否删除该选项?", "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning"
}) })
.then(function () { .then(function() {
return delModel(modelIds); return delModel(modelIds);
}) })
.then(() => { .then(() => {
@ -1133,23 +1161,22 @@ export default {
this.$confirm("是否确认导出所有型号数据项?", "警告", { this.$confirm("是否确认导出所有型号数据项?", "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning"
}) })
.then(function () { .then(function() {
return exportModel(queryParams); return exportModel(queryParams);
}) })
.then((response) => { .then(response => {
this.download(response.msg); this.download(response.msg);
}); });
}, }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.iot-model { .iot-model {
.eldialog-wrap { .eldialog-wrap {
.el-dialog__header { .el-dialog__header {
} }
.el-dialog__body { .el-dialog__body {
padding: 0px; padding: 0px;

721
src/views/profile/attribute/eventFormModel.vue Normal file
View File

@ -0,0 +1,721 @@
<template>
<div class="attribute-form-view">
<el-dialog
:close-on-click-modal="false"
:modal="false"
:title="title"
:visible.sync="visible"
class="params-eldialog"
top="5vh"
width="800px">
<el-form
ref="form"
:model="form"
:rules="rules"
label-position="top"
style="padding: 10px"
>
<el-form-item label="标识:" prop="id">
<el-input
v-model="form.id"
placeholder="请输入标识"
@input="inputChange"
/>
</el-form-item>
<el-form-item label="名称:" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item label="事件级别:" prop="level">
<el-select v-model="form.expands.level" placeholder="请选择事件级别" style="width: 100%">
<el-option
v-for="(dice, value) in eventLevel"
:key="value"
:label="dice"
:value="value"
/>
</el-select>
</el-form-item>
<el-form-item label="输出参数:" prop="inputs">
<el-table :data="form.valueType.properties" height="300px">
<el-table-column align="left" label="标识" prop="id" />
<el-table-column align="left" label="名称" prop="name" />
<el-table-column align="left" label="数据类型" prop="type" >
<template slot-scope="scope">
<span>{{ dataTypeOption[scope.row.valueType.type] }}</span>
</template>
</el-table-column>
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
width="100px"
>
<template slot-scope="scope">
<el-button
icon="el-icon-edit"
size="mini"
type="text"
@click="handleInputUpdate(scope.row, scope.$index)"
>修改</el-button
>
<el-button
icon="el-icon-delete"
size="mini"
type="text"
@click="handleInputDelete(scope.row, scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-button
icon="el-icon-plus"
style="width: 100%;margin-top: 10px"
type="info"
@click="addParam"
>新增输出参数</el-button>
</el-form-item>
<!-- <el-form-item label="是否异步:" prop="async">-->
<!-- <el-switch v-model="form.async"/>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="$emit('update:visible', false)">取 消</el-button>
</div>
</el-dialog>
<!-- 输入参数弹窗 -->
<el-dialog
:close-on-click-modal="false"
:visible.sync="inputParamOpen"
append-to-body
class="params-eldialog"
title="输入参数"
width="600px"
>
<el-form
ref="inputForm"
:model="inputFormObj.form"
:rules="inputFormRules"
label-position="top"
label-width="100px"
>
<el-form-item label="标识:" prop="id">
<el-input v-model="inputFormObj.form.id" placeholder="请输入标识" />
</el-form-item>
<el-form-item label="参数名称:" prop="name">
<el-input v-model="inputFormObj.form.name" placeholder="请输入参数名称" />
</el-form-item>
<el-form-item label="数据类型:" prop="type">
<el-select v-model="inputFormObj.form.valueType.type" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange">
<el-option
v-for="(dice, value) in dataTypeOption"
:key="value"
:label="dice"
:value="value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="inputFormObj.form.valueType.type === 'enum'" label="枚举值:">
<div class="enum-box">
<div class="enum-header">
<el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button>
</div>
<el-table :data="inputFormObj.form.valueType.elements" border style="width: 100%">
<el-table-column align="center" label="序号" type="index" width="60"></el-table-column>
<el-table-column label="值" prop="value" width="180">
<template slot-scope="scope">
<el-input
v-model="scope.row.value"
:class="{ 'is-error': scope.row.value }"
placeholder="请输入值"
></el-input>
<div v-if="scope.row.value===''" class="el-form-item__error">值不能为空</div>
</template>
</el-table-column>
<el-table-column label="描述" prop="text">
<template slot-scope="scope">
<el-input
v-model="scope.row.text"
:class="{ 'is-error': scope.row.text }"
placeholder="请输入描述"
></el-input>
<div v-if="scope.row.text===''" class="el-form-item__error">描述不能为空</div>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="80">
<template slot-scope="scope">
<el-button
circle
icon="el-icon-delete"
size="mini"
type="danger"
@click="removeEnumItem(scope.$index)"
></el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
<!-- <el-form-item label="是否必选:" prop="required">-->
<!-- <el-switch v-model="inputFormObj.form.expands.required" />-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitInputForm">确 定</el-button>
<el-button @click="inputParamOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import JsonEditor from "./jsonEditor";
const dataTypeOption = {
int: 'int(整数型)',
long: 'long(长整数型)',
float: 'float(单精度浮点型)',
double: 'double(双精度浮点数)',
string: 'text(字符串)',
boolean: 'boolean(布尔型)',
date: 'date(时间型)',
enum: 'enum(枚举)',
array: 'array(数组)',
object: 'object(结构体)',
file: 'file(文件)',
password: 'password(密码)',
geoPoint: 'geoPoint(地理位置)',
};
const eventLevel = {
ordinary:'普通',
warn:'警告',
urgent:'紧急',
}
const defaultenumForm = {
value: '',
text: ''
}
const defaultForm = {
id: "",
name: "",
expands: {
level: "ordinary"
},
async: false,
valueType: {
type: "object",
properties: [
]
}
};
const defaultInputForm = {
id: "",
name: "",
expands: {
required: false
},
valueType: {
expands: {},
type: "int",
elements: []
}
};
export default {
name: "EventFormModel",
components: { JsonEditor },
props: {
visible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: '新增',
},
row: {
type: Object,
default: () => {},
},
tempType: {
type: String,
default: "add",
},
paramIdx: {
type: Number,
default: -1
}
},
computed: {
...mapGetters(["groupList"]),
},
data() {
return {
dataTypeOption,
eventLevel,
inputParamOpen: false,
form: {
id: "",
name: "",
expands: {
level: "ordinary"
},
async: false,
valueType: {
type: "object",
properties: [
]
}
},
inputFormObj: {
isEdit: false,
index: -1,
form: JSON.parse(JSON.stringify(defaultInputForm))
},
inputFormRules: {
id: [
{ required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
],
name: [
{ required: true, message: "名称不能为空", trigger: "blur" }
]
},
// 表单校验
rules: {
name: [
{ required: true, message: "名称不能为空", trigger: "blur" },
],
id: [
{ required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
],
type: [
{ required: true, message: "数据类型不能为空", trigger: "blur" },
]
},
};
},
created() {
console.log("this.paramIdx", this.paramIdx, this.tempType);
if (this.tempType === "update" && this.paramIdx >= 0) {
this.form = JSON.parse(JSON.stringify(this.row));
} else {
// 新增时初始化表单
this.form = JSON.parse(JSON.stringify(defaultForm));
}
},
watch: {
visible(val) {
if (val) {
// 当弹窗打开时
if (this.tempType === "update" && this.paramIdx >= 0) {
// 编辑模式，复制传入的数据
this.form = JSON.parse(JSON.stringify(this.row));
} else {
// 新增模式，重置表单数据
this.form = JSON.parse(JSON.stringify(defaultForm));
}
// 确保输入参数表单也被重置
this.inputFormObj = {
isEdit: false,
index: -1,
form: JSON.parse(JSON.stringify(defaultInputForm))
};
}
}
},
methods: {
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
// 新增和修改操作
if (this.tempType === "add") {
this.$store.dispatch("AddEvent", this.form).then(() => {
this.$message.success("添加成功");
this.$emit("ok");
}).catch(err => {
this.$message.error("添加失败：" + err);
});
} else if (this.tempType === "update") {
this.$store.dispatch("EditEvent", {
item: this.form,
idx: this.paramIdx,
}).then(() => {
this.$message.success("修改成功");
this.$emit("ok");
}).catch(err => {
this.$message.error("修改失败：" + err);
});
}
}
});
},
inputDataTypeChange(val) {
// 根据选择的数据类型设置valueType的type属性
if (val === 'int') {
this.inputFormObj.form.valueType.type = 'int';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'long') {
this.inputFormObj.form.valueType.type = 'long';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'float') {
this.inputFormObj.form.valueType.type = 'float';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'double') {
this.inputFormObj.form.valueType.type = 'double';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'string') {
this.inputFormObj.form.valueType.type = 'string';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'boolean') {
this.inputFormObj.form.valueType.type = 'boolean';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'date') {
this.inputFormObj.form.valueType.type = 'date';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'enum') {
this.inputFormObj.form.valueType.type = 'enum';
if (!this.inputFormObj.form.valueType.elements || this.inputFormObj.form.valueType.elements.length === 0) {
this.inputFormObj.form.valueType.elements = [];
// 默认添加一个空的枚举项
this.addEnumItem();
}
} else if (val === 'array') {
this.inputFormObj.form.valueType.type = 'array';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'object') {
this.inputFormObj.form.valueType.type = 'object';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'file') {
this.inputFormObj.form.valueType.type = 'file';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'password') {
this.inputFormObj.form.valueType.type = 'password';
this.inputFormObj.form.valueType.elements = [];
} else if (val === 'geoPoint') {
this.inputFormObj.form.valueType.type = 'geoPoint';
this.inputFormObj.form.valueType.elements = [];
}
},
addEnumItem() {
// 确保elements数组已初始化
if (!this.inputFormObj.form.valueType.elements) {
this.inputFormObj.form.valueType.elements = [];
}
// 添加一个新的枚举项
const newEnumItem = JSON.parse(JSON.stringify(defaultenumForm));
newEnumItem.value = '';
newEnumItem.text = '';
this.inputFormObj.form.valueType.elements.push(newEnumItem);
},
// 修改提交方法，增加枚举项验证
submitInputForm() {
// 验证表单
this.$refs.inputForm.validate(valid => {
if (valid) {
// 如果是枚举类型，确保至少有一个枚举项
if (this.inputFormObj.form.valueType.type === 'enum' &&
(!this.inputFormObj.form.valueType.elements ||
this.inputFormObj.form.valueType.elements.length === 0)) {
this.$message.warning('枚举类型至少需要一个枚举项');
return;
}
// 验证枚举项的值和描述不能为空
if (this.inputFormObj.form.valueType.type === 'enum') {
let hasError = false;
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) {
const item = this.inputFormObj.form.valueType.elements[i];
let value = !item.value;
let text = !item.text;
if (value || text) {
hasError = true;
}
}
if (hasError) {
this.$message.warning('请完善枚举项的值和描述');
return;
}
}
// 如果是编辑模式
if (this.inputFormObj.isEdit) {
// 更新现有输入参数
this.$set(this.form.valueType.properties, this.inputFormObj.index, this.inputFormObj.form);
} else {
// 添加新的输入参数
this.form.valueType.properties.push(JSON.parse(JSON.stringify(this.inputFormObj.form)));
}
// 关闭弹窗
this.inputParamOpen = false;
// 提示成功
this.$message.success(this.inputFormObj.isEdit ? '修改成功' : '添加成功');
}
});
},
addParam(){
this.inputFormObj = {
isEdit: false,
index: -1,
form: JSON.parse(JSON.stringify(defaultInputForm))
};
this.inputParamOpen = true;
},
/**
* 修改输入参数
* @param {Object} row 行数据
* @param {Number} index 行索引
*/
handleInputUpdate(row, index) {
this.inputFormObj = {
isEdit: true,
index: index,
form: JSON.parse(JSON.stringify(row))
};
this.inputParamOpen = true;
},
/**
* 删除输入参数
* @param {Object} row 行数据
* @param {Number} index 行索引
*/
handleInputDelete(row, index) {
this.$confirm('是否确认删除该输入参数?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.form.valueType.properties.splice(index, 1);
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}, inputChange() {
this.$forceUpdate();
},
cmdChange(val) {
let newArr = this.groupList.filter((v) => {
if (v["cmdKey"] === val) {
return v["cmdType"];
}
});
this.form.funRwType = newArr[0] || this.form.funRwType;
},
getParamIten(idx) {
this.$store.dispatch("GetAttributeItem", idx).then((res) => {
console.log("GetAttributeItem",res,idx);
this.form = {show: true, sort: 100,dataFormat: {
type: null,
list: {}
}, ...JSON.parse(JSON.stringify(res))};
});
},
/** 提交验证 */
// submitForm: function () {
// this.$refs["form"].validate((valid) => {
// if (valid) {
// // 新增和修改操作
// if (this.tempType === "add") {
// this.$store.dispatch("AddEvent", this.form).then(() => {
// this.$message.success("添加成功");
// this.$emit("ok");
// }).catch(err => {
// this.$message.error("添加失败：" + err);
// });
// } else if (this.tempType === "update") {
// this.$store.dispatch("EditEvent", {
// item: this.form,
// idx: this.paramIdx,
// }).then(() => {
// this.$message.success("修改成功");
// this.$emit("ok");
// }).catch(err => {
// this.$message.error("修改失败：" + err);
// });
// }
// }
// });
// },
// 回调 ok
//数据类型值变化出发方法
funDataTypeChange(val) {
this.form.funValAcc = null;
this.form.funValidType = "";
},
addJsonObj() {
this.$refs["jsonEditors"].addHandel();
},
jsonEvent(data) {
this.form.funObj = data;
},
addEnumJsonObj() {
this.$refs["enumJsonEditors"].addHandel();
},
enumJsonEvent(data) {
this.form.dataFormat.list = data;
},
// 校验方式发生变化的方法
funValidTypeChange(val) {
this.form.funValidType = val;
this.form.funValMax = "";
this.form.funValMin = "";
this.form.funObj = "";
if (val === "ENUM") {
this.form.funObj = '{"0":""}';
}
this.$forceUpdate()
},
dataFormatTypeChange(val) {
this.form.dataFormat.type = val;
this.form.dataFormat.list = '';
if (val === "ENUM") {
this.form.dataFormat.list = '{"0":""}';
}
this.$forceUpdate()
},
},
};
</script>
<style lang="scss">
.attribute-form-view {
.item-title-wrap {
font-size: 15px;
font-weight: 600;
height: 30px;
}
.custom-wrap {
border: 1px solid #d8d7d7;
padding-top: 20px;
margin-top: 10px;
background: #f0f0f0;
padding-right: 10px;
.el-form-item {
border-bottom: 1px dashed #bdbdbd;
padding-bottom: 12px;
margin-bottom: 10px;
margin-left: 10px;
}
.el-form-item--medium .el-form-item__label {
width: 90px !important;
}
.el-form-item--medium .el-form-item__content {
margin-left: 90px !important;
}
.enumTypeDiv {
display: flex;
justify-content: flex-end;
max-height: 200px;
overflow: auto;
.enum-item {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
.enum-box{
border: 1px solid #d8d7d7;
padding: 10px;
margin-bottom: 10px;
.enumTypeDiv{
margin-top: 10px;
}
}
.el-select {
width: 100%;
}
.el-input-number {
width: 100%;
}
.enumTypeDiv {
display: flex;
justify-content: flex-end;
max-height: 200px;
overflow: auto;
.enum-item {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
</style>
.enum-box {
border: 1px solid #d8d7d7;
padding: 10px;
margin-bottom: 10px;
.enum-header {
margin-bottom: 10px;
}
}
.is-error input {
border-color: #F56C6C;
}
.el-form-item__error {
color: #F56C6C;
font-size: 12px;
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
}
</style>

440
src/views/profile/attribute/eventView.vue Normal file
View File

@ -0,0 +1,440 @@
<template>
<div class="app-container product-customparams-wrap">
<el-row v-show="isOption" :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
icon="el-icon-plus"
size="mini"
type="primary"
@click="handleAdd"
>新增</el-button
>
</el-col>
</el-row>
<el-table v-loading="loading" :data="eventList" height="300px">
<el-table-column align="center" label="序号" type="index" width="75" />
<el-table-column align="left" label="名称" prop="name" />
<el-table-column align="left" label="标识符" prop="id" />
<el-table-column align="center" label="事件级别" prop="expands">
<template slot-scope="scope">
<span>{{ eventLevel[scope.row.expands.level] }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="输出参数数量" prop="inputs">
<template slot-scope="scope">
<span>{{
scope.row.valueType ? scope.row.valueType.properties.length : 0
}}</span>
</template>
</el-table-column>
<el-table-column
v-if="isOption"
align="center"
class-name="small-padding fixed-width"
label="操作"
width="180px"
>
<template slot-scope="scope">
<el-button
icon="el-icon-edit"
size="mini"
type="text"
@click="handleUpdate(scope.row, scope.$index)"
>修改</el-button
>
<el-button
icon="el-icon-delete"
size="mini"
type="text"
@click="handleDelete(scope.row, scope.$index)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
/>
<event-form-model
ref="eventForm"
:paramIdx="eventFormObj.paramIdx"
:row="eventFormObj.eventForm"
:tempType="eventFormObj.modelType"
:title="eventFormObj.modelType == 'add' ? '新增' : '编辑'"
:visible.sync="eventOpen"
@ok="handleFormOk"
></event-form-model>
</div>
</template>
<script>
import JsonEditor from "./jsonEditor.vue";
import ParamsJsonWrap from "./paramsJson";
import eventFormModel from "@/views/profile/attribute/eventFormModel";
const eventLevel = {
ordinary: "普通",
warn: "警告",
urgent: "紧急"
};
export default {
name: "EventView",
components: {
JsonEditor,
ParamsJsonWrap,
eventFormModel
},
props: {
sourceId: {
type: [Number, String],
default: ""
},
isOption: {
type: Boolean,
default: true
}
},
data() {
return {
eventLevel,
eventOpen: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 功能定义表格数据
eventList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
attributeopen: false,
// 查询参数
queryParams: {},
// 表单参数
form: {},
// 表单校验
rules: {
funName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
funKey: [
{ required: true, message: "标识符不能为空", trigger: "blur" }
],
funDataType: [
{ required: true, message: "数据类型不能为空", trigger: "blur" }
],
funRwType: [
{ required: true, message: "传输类型不能为空", trigger: "blur" }
],
funValidType: [
{ required: true, message: "校验方式不能为空", trigger: "blur" }
]
},
baseModelId: "",
tempType: "",
eventFormObj: {
id: "",
name: "",
expands: {
level: "ordinary"
},
async: false,
valueType: {
type: "object",
properties: []
}
}
};
},
created() {
this.getList();
},
methods: {
//数据类型值变化出发方法
funDataTypeChange(val) {
this.form.funValAcc = null;
this.form.funValidType = "";
},
addJsonObj() {
this.$refs["jsonEditors"].addHandel();
},
jsonEvent(data) {
this.form.funObj = data;
},
// 校验方式发生变化的方法
funValidTypeChange(val) {
this.form.funValMax = "";
this.form.funValMin = "";
this.form.funObj = "";
if (val === "ENUM") {
this.form.funObj = '{"0":""}';
}
},
/** 查询功能定义列表 */
getList() {
this.loading = true;
this.eventList = [];
setTimeout(() => {
this.$store.dispatch("GetEventList").then(res => {
console.log("功能列表数据", res);
this.eventList = res;
this.$forceUpdate();
this.loading = false;
});
}, 50);
},
setList(list) {
this.loading = true;
this.eventList = [];
setTimeout(() => {
this.eventList = list;
this.$forceUpdate();
this.loading = false;
}, 50);
},
// 取消按钮
cancel() {
this.attributeopen = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
sourceId: this.sourceId,
mainId: undefined,
funName: undefined,
funKey: undefined,
funDataType: undefined,
funValAcc: undefined,
funRwType: undefined,
funValidType: undefined,
funValMin: undefined,
funValMax: undefined,
funObj: {},
unitName: ""
};
this.resetForm("form");
},
handleParams() {
this.$emit("handleClick", { type: "param", idx: 0 });
},
/** 新增按钮操作 */
handleAdd() {
this.eventFormObj = {
modelType: "add",
paramIdx: -1,
eventForm: {
id: "",
name: "",
expands: {
level: "ordinary"
},
async: false,
valueType: {
type: "object",
properties: []
}
}
};
this.eventOpen = true;
},
/** 修改按钮操作 */
handleUpdate(row, idx) {
this.eventFormObj = {
modelType: "update",
paramIdx: idx,
eventForm: JSON.parse(JSON.stringify(row))
};
this.eventOpen = true;
},
/** 删除按钮操作 */
handleDelete(row, idx) {
this.$confirm("是否确认删除该功能?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
// 执行删除数据
this.$store
.dispatch("DeleteEvent", idx)
.then(() => {
this.$message({
type: "success",
message: "删除成功!"
});
this.getList();
})
.catch(err => {
this.$message.error("删除失败：" + err);
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
/** 表单确认回调 */
handleFormOk() {
this.eventOpen = false;
this.getList();
}
}
};
</script>
<style lang="scss">
.product-customparams-wrap {
.nl-dialog .el-dialog:not(.is-fullscreen) {
margin-top: 3vh !important;
}
.eldialog-wrap {
.el-dialog__header {
border-bottom: 1px solid #bdbdbd;
}
.el-dialog__body {
padding: 0px;
}
.form-button-div {
margin-top: 20px;
height: 60px;
border-top: 1px solid #bdbdbd;
text-align: right;
width: 100%;
padding-top: 15px;
.el-button + .el-button {
margin-right: 10px;
}
.el-button {
padding-top: 8px;
}
}
.el-select {
width: 100%;
}
.el-input-number {
width: 100%;
}
.item-title-wrap {
font-size: 15px;
font-weight: 600;
height: 30px;
}
.custom-wrap {
border: 1px solid #d8d7d7;
padding-top: 20px;
background: #f0f0f0;
padding-right: 10px;
.el-form-item {
border-bottom: 1px dashed #bdbdbd;
padding-bottom: 12px;
margin-bottom: 10px;
margin-left: 10px;
}
.el-form-item--medium .el-form-item__label {
width: 90px !important;
}
.el-form-item--medium .el-form-item__content {
margin-left: 90px !important;
}
.enumTypeDiv {
display: flex;
justify-content: flex-end;
max-height: 200px;
overflow: auto;
.enum-item {
width: 90%;
display: flex;
justify-content: space-around;
align-items: center;
}
}
.max-min-row {
width: 90%;
padding: 0;
margin-left: 5% !important;
margin-right: 0 !important;
.el-form-item {
border: 0;
margin-left: 0;
}
.el-form-item--medium .el-form-item__content {
margin-left: 0px !important;
}
}
}
}
.params-eldialog {
.el-dialog__header {
}
.el-dialog__body {
height: 100%;
max-height: calc(100vh - 200px);
overflow: auto;
padding: 20px 5px;
}
}
}
.enumTypeDiv .enumTypeDiv::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 3px;
}
.enumTypeDiv::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px #9e9d9d;
background: #ffffff;
}
.enumTypeDiv::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px #f6f6f6;
border-radius: 10px;
background: #ffffff;
}
.product-customparams-wrap
.params-eldialog
.el-dialog__body::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}
.product-customparams-wrap
.params-eldialog
.el-dialog__body::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px #c4c4c4;
background: #dededea6;
}
.product-customparams-wrap
.params-eldialog
.el-dialog__body::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px #f6f6f6;
border-radius: 10px;
background: #ffffff;
}
.product-customparams-wrap .nl-dialog .form-button-div {
margin-top: 0;
}
</style>

35
src/views/profile/attribute/functionFormModel.vue
View File

@ -35,9 +35,9 @@
<span>{{ scope.row.expands.required ? '是' : '否'}}</span> <span>{{ scope.row.expands.required ? '是' : '否'}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="数据类型" prop="funDataType" > <el-table-column align="left" label="数据类型" prop="type" >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ funDataTypeOption[scope.row.funDataType] }}</span> <span>{{ dataTypeOption[scope.row.valueType.type] }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -105,17 +105,17 @@
<el-input v-model="inputFormObj.form.name" placeholder="请输入参数名称" /> <el-input v-model="inputFormObj.form.name" placeholder="请输入参数名称" />
</el-form-item> </el-form-item>
<el-form-item label="数据类型:" prop="funDataType"> <el-form-item label="数据类型:" prop="type">
<el-select v-model="inputFormObj.form.funDataType" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange"> <el-select v-model="inputFormObj.form.valueType.type" placeholder="请选择数据类型" style="width: 100%" @change="inputDataTypeChange">
<el-option <el-option
v-for="(dice, value) in funDataTypeOption" v-for="(dice, value) in dataTypeOption"
:key="value" :key="value"
:label="dice" :label="dice"
:value="value" :value="value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="inputFormObj.form.funDataType === 'enum'" label="枚举值:"> <el-form-item v-if="inputFormObj.form.valueType.type === 'enum'" label="枚举值:">
<div class="enum-box"> <div class="enum-box">
<div class="enum-header"> <div class="enum-header">
<el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button> <el-button size="mini" type="primary" @click="addEnumItem">添加枚举项</el-button>
@ -170,7 +170,7 @@
<script> <script>
import { mapGetters, mapState } from "vuex"; import { mapGetters, mapState } from "vuex";
import JsonEditor from "./jsonEditor"; import JsonEditor from "./jsonEditor";
const funDataTypeOption = { const dataTypeOption = {
int: 'int(整数型)', int: 'int(整数型)',
long: 'long(长整数型)', long: 'long(长整数型)',
float: 'float(单精度浮点型)', float: 'float(单精度浮点型)',
@ -214,7 +214,6 @@ const defaultInputForm = {
expands: { expands: {
required:false required:false
}, },
funDataType: 'int',
valueType: { valueType: {
expands: {}, expands: {},
type: 'int', type: 'int',
@ -252,7 +251,7 @@ export default {
}, },
data() { data() {
return { return {
funDataTypeOption, dataTypeOption,
funRwTypeOption, funRwTypeOption,
funValidTypeOption, funValidTypeOption,
dataFormatTypeOption, dataFormatTypeOption,
@ -278,9 +277,6 @@ export default {
name: [ name: [
{ required: true, message: "参数名称不能为空", trigger: "blur" } { required: true, message: "参数名称不能为空", trigger: "blur" }
], ],
funDataType: [
{ required: true, message: "数据类型不能为空", trigger: "blur" }
]
}, },
// 表单校验 // 表单校验
rules: { rules: {
@ -292,18 +288,9 @@ export default {
{ required: true, message: "标识不能为空", trigger: "blur" }, { required: true, message: "标识不能为空", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"} { pattern: /^[a-zA-Z0-9_\-]+$/,message: '标识只能由数字、字母、下划线、中划线组成',trigger: "blur"}
], ],
funDataType: [ type: [
{ required: true, message: "数据类型不能为空", trigger: "blur" }, { required: true, message: "数据类型不能为空", trigger: "blur" },
], ],
funRwType: [
{ required: true, message: "传输类型不能为空", trigger: "blur" },
],
funValidType: [
{ required: true, message: "校验方式不能为空", trigger: "blur" },
],
sort: [
{ required: true, message: "排序不能为空", trigger: "blur" },
],
}, },
}; };
}, },
@ -444,7 +431,7 @@ export default {
this.$refs.inputForm.validate(valid => { this.$refs.inputForm.validate(valid => {
if (valid) { if (valid) {
// 如果是枚举类型，确保至少有一个枚举项 // 如果是枚举类型，确保至少有一个枚举项
if (this.inputFormObj.form.funDataType === 'enum' && if (this.inputFormObj.form.valueType.type === 'enum' &&
(!this.inputFormObj.form.valueType.elements || (!this.inputFormObj.form.valueType.elements ||
this.inputFormObj.form.valueType.elements.length === 0)) { this.inputFormObj.form.valueType.elements.length === 0)) {
this.$message.warning('枚举类型至少需要一个枚举项'); this.$message.warning('枚举类型至少需要一个枚举项');
@ -452,7 +439,7 @@ export default {
} }
// 验证枚举项的值和描述不能为空 // 验证枚举项的值和描述不能为空
if (this.inputFormObj.form.funDataType === 'enum') { if (this.inputFormObj.form.valueType.type === 'enum') {
let hasError = false; let hasError = false;
for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) { for (let i = 0; i < this.inputFormObj.form.valueType.elements.length; i++) {
const item = this.inputFormObj.form.valueType.elements[i]; const item = this.inputFormObj.form.valueType.elements[i];

151
src/views/profile/attribute/functionView.vue
View File

@ -2,7 +2,11 @@
<div class="app-container product-customparams-wrap"> <div class="app-container product-customparams-wrap">
<el-row v-show="isOption" :gutter="10" class="mb8"> <el-row v-show="isOption" :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAdd" <el-button
icon="el-icon-plus"
size="mini"
type="primary"
@click="handleAdd"
>新增</el-button >新增</el-button
> >
</el-col> </el-col>
@ -12,12 +16,12 @@
<el-table-column align="center" label="序号" type="index" width="75" /> <el-table-column align="center" label="序号" type="index" width="75" />
<el-table-column align="left" label="参数名称" prop="name" /> <el-table-column align="left" label="参数名称" prop="name" />
<el-table-column align="left" label="标识符" prop="id" /> <el-table-column align="left" label="标识符" prop="id" />
<el-table-column align="left" label="是否异步" prop="async" > <el-table-column align="left" label="是否异步" prop="async">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.async ? '是' : '否'}}</span> <span>{{ scope.row.async ? "是" : "否" }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="left" label="输入参数数量" prop="inputs" > <el-table-column align="left" label="输入参数数量" prop="inputs">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.inputs ? scope.row.inputs.length : 0 }}</span> <span>{{ scope.row.inputs ? scope.row.inputs.length : 0 }}</span>
</template> </template>
@ -62,16 +66,14 @@
:paramIdx="functionFormObj.paramIdx" :paramIdx="functionFormObj.paramIdx"
:row="functionFormObj.functionForm" :row="functionFormObj.functionForm"
:tempType="functionFormObj.modelType" :tempType="functionFormObj.modelType"
:title="functionFormObj.modelType == 'add'?'新增':'编辑'" :title="functionFormObj.modelType == 'add' ? '新增' : '编辑'"
:visible.sync="functionOpen" :visible.sync="functionOpen"
@ok="handleFormOk" @ok="handleFormOk"
></function-form-model> ></function-form-model>
</div> </div>
</template> </template>
<script> <script>
import JsonEditor from "./jsonEditor.vue"; import JsonEditor from "./jsonEditor.vue";
import ParamsJsonWrap from "./paramsJson"; import ParamsJsonWrap from "./paramsJson";
import functionFormModel from "@/views/profile/attribute/functionFormModel"; import functionFormModel from "@/views/profile/attribute/functionFormModel";
@ -79,19 +81,19 @@ const funDataTypeOption = {
INT32: "整数型", INT32: "整数型",
FLOAT: "浮点型", FLOAT: "浮点型",
TEXT: "字符串", TEXT: "字符串",
BOOL: "布尔型", BOOL: "布尔型"
}; };
const funRwTypeOption = { const funRwTypeOption = {
READWRITE: "可上报可下发", READWRITE: "可上报可下发",
READ: "只上报", READ: "只上报",
WRITE: "只下发", WRITE: "只下发"
}; };
const funValidTypeOption = { const funValidTypeOption = {
ENUM: "枚举", ENUM: "枚举",
RANGE: "范围", RANGE: "范围",
LENGTH: "长度", LENGTH: "长度",
NOT: "不校验", NOT: "不校验"
}; };
export default { export default {
@ -99,17 +101,17 @@ export default {
components: { components: {
JsonEditor, JsonEditor,
ParamsJsonWrap, ParamsJsonWrap,
functionFormModel, functionFormModel
}, },
props: { props: {
sourceId: { sourceId: {
type: [Number, String], type: [Number, String],
default: "", default: ""
}, },
isOption: { isOption: {
type: Boolean, type: Boolean,
default: true, default: true
}, }
}, },
data() { data() {
return { return {
@ -139,27 +141,36 @@ export default {
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
funName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }], funName: [
funKey: [{ required: true, message: "标识符不能为空", trigger: "blur" }], { required: true, message: "参数名称不能为空", trigger: "blur" }
funDataType: [{ required: true, message: "数据类型不能为空", trigger: "blur" }], ],
funRwType: [{ required: true, message: "传输类型不能为空", trigger: "blur" }], funKey: [
funValidType: [{ required: true, message: "校验方式不能为空", trigger: "blur" }], { required: true, message: "标识符不能为空", trigger: "blur" }
],
funDataType: [
{ required: true, message: "数据类型不能为空", trigger: "blur" }
],
funRwType: [
{ required: true, message: "传输类型不能为空", trigger: "blur" }
],
funValidType: [
{ required: true, message: "校验方式不能为空", trigger: "blur" }
]
}, },
baseModelId: "", baseModelId: "",
tempType: "", tempType: "",
functionFormObj:{ functionFormObj: {
modelType:'add', modelType: "add",
paramIdx:0, paramIdx: 0,
functionForm:{ functionForm: {
id: '', id: "",
name: '', name: "",
expands: {}, expands: {},
async: false, async: false,
inputs: [], inputs: [],
output: {}, output: {}
} }
} }
}; };
}, },
created() { created() {
@ -188,25 +199,25 @@ export default {
}, },
/** 查询功能定义列表 */ /** 查询功能定义列表 */
getList() { getList() {
this.loading = true this.loading = true;
this.functionList = [] this.functionList = [];
setTimeout(() => { setTimeout(() => {
this.$store.dispatch("GetFunctionList").then((res) => { this.$store.dispatch("GetFunctionList").then(res => {
console.log('功能列表数据', res) console.log("功能列表数据", res);
this.functionList = res this.functionList = res;
this.$forceUpdate() this.$forceUpdate();
this.loading = false this.loading = false;
}); });
}, 50) }, 50);
}, },
setList(list) { setList(list) {
this.loading = true this.loading = true;
this.functionList = [] this.functionList = [];
setTimeout(() => { setTimeout(() => {
this.functionList = list this.functionList = list;
this.$forceUpdate() this.$forceUpdate();
this.loading = false this.loading = false;
}, 50) }, 50);
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
@ -227,21 +238,21 @@ export default {
funValMin: undefined, funValMin: undefined,
funValMax: undefined, funValMax: undefined,
funObj: {}, funObj: {},
unitName: "", unitName: ""
}; };
this.resetForm("form"); this.resetForm("form");
}, },
handleParams() { handleParams() {
this.$emit('handleClick', { type: 'param', idx: 0 }) this.$emit("handleClick", { type: "param", idx: 0 });
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.functionFormObj = { this.functionFormObj = {
modelType: 'add', modelType: "add",
paramIdx: -1, paramIdx: -1,
functionForm: { functionForm: {
id: '', id: "",
name: '', name: "",
expands: {}, expands: {},
async: false, async: false,
inputs: [], inputs: [],
@ -254,7 +265,7 @@ export default {
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row, idx) { handleUpdate(row, idx) {
this.functionFormObj = { this.functionFormObj = {
modelType: 'update', modelType: "update",
paramIdx: idx, paramIdx: idx,
functionForm: JSON.parse(JSON.stringify(row)) functionForm: JSON.parse(JSON.stringify(row))
}; };
@ -263,29 +274,30 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row, idx) { handleDelete(row, idx) {
this.$confirm( this.$confirm("是否确认删除该功能?", "警告", {
"是否确认删除该功能?",
"警告",
{
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning"
} })
).then(() => { .then(() => {
// 执行删除数据 // 执行删除数据
this.$store.dispatch('DeleteFunction', idx).then(() => { this.$store
.dispatch("DeleteFunction", idx)
.then(() => {
this.$message({ this.$message({
type: 'success', type: "success",
message: '删除成功!' message: "删除成功!"
}); });
this.getList(); this.getList();
}).catch(err => { })
this.$message.error('删除失败：' + err); .catch(err => {
this.$message.error("删除失败：" + err);
}); });
}).catch(() => { })
.catch(() => {
this.$message({ this.$message({
type: 'info', type: "info",
message: '已取消删除' message: "已取消删除"
}); });
}); });
}, },
@ -295,7 +307,7 @@ export default {
this.functionOpen = false; this.functionOpen = false;
this.getList(); this.getList();
} }
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@ -382,7 +394,6 @@ export default {
} }
.params-eldialog { .params-eldialog {
.el-dialog__header { .el-dialog__header {
} }
.el-dialog__body { .el-dialog__body {
height: 100%; height: 100%;
@ -410,18 +421,24 @@ export default {
background: #ffffff; background: #ffffff;
} }
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar { .product-customparams-wrap
.params-eldialog
.el-dialog__body::-webkit-scrollbar {
/*滚动条整体样式*/ /*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px; height: 5px;
} }
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-thumb { .product-customparams-wrap
.params-eldialog
.el-dialog__body::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/ /*滚动条里面小方块*/
border-radius: 10px; border-radius: 10px;
box-shadow: inset 0 0 5px #c4c4c4; box-shadow: inset 0 0 5px #c4c4c4;
background: #dededea6; background: #dededea6;
} }
.product-customparams-wrap .params-eldialog .el-dialog__body::-webkit-scrollbar-track { .product-customparams-wrap
.params-eldialog
.el-dialog__body::-webkit-scrollbar-track {
/*滚动条里面轨道*/ /*滚动条里面轨道*/
box-shadow: inset 0 0 5px #f6f6f6; box-shadow: inset 0 0 5px #f6f6f6;
border-radius: 10px; border-radius: 10px;

65
src/views/profile/attribute/index.vue
View File

@ -28,7 +28,15 @@
ref="functionref" ref="functionref"
:sourceId="sourceId" :sourceId="sourceId"
/> />
<!-- @handleClick="functionEvent"--> </div>
</el-tab-pane>
<el-tab-pane label="事件" name="event">
<div class="tabs-body">
<event-view
v-if="activeName === 'event'"
ref="eventref"
:sourceId="sourceId"
/>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -38,23 +46,24 @@
import attributeView from "./attributeView"; import attributeView from "./attributeView";
import groupView from "./groupView"; import groupView from "./groupView";
import FunctionView from "./functionView"; import FunctionView from "./functionView";
import EventView from "./eventView";
// this.$store.state.tagsView.visitedViews // this.$store.state.tagsView.visitedViews
// this.$store.dispatch("Login", this.loginForm) // this.$store.dispatch("Login", this.loginForm)
export default { export default {
components: { FunctionView, attributeView, groupView }, components: { FunctionView, attributeView, groupView, EventView },
props: { props: {
groupList: { groupList: {
type: String, type: String,
default: "[]", default: "[]"
}, },
arttributeList: { arttributeList: {
type: String, type: String,
default: "[]", default: "[]"
}, },
sourceId: { sourceId: {
type: String, type: String,
default: "", default: ""
}, }
}, },
name: "attribute", name: "attribute",
created() { created() {
@ -63,7 +72,7 @@ export default {
}, },
data() { data() {
return { return {
activeName: "attribute", activeName: "attribute"
}; };
}, },
methods: { methods: {
@ -75,7 +84,7 @@ export default {
type: data.type, type: data.type,
title: "新增参数", title: "新增参数",
component: "attributeForm", component: "attributeForm",
paramIdx: null, paramIdx: null
}); });
break; break;
@ -85,7 +94,7 @@ export default {
title: "修改参数", title: "修改参数",
component: "attributeForm", component: "attributeForm",
paramIdx: data.idx, paramIdx: data.idx,
row:data.row row: data.row
}); });
break; break;
@ -98,7 +107,7 @@ export default {
type: data.type, type: data.type,
title: "物模型", title: "物模型",
component: "paramsJson", component: "paramsJson",
paramIdx: null, paramIdx: null
}); });
break; break;
} }
@ -111,7 +120,7 @@ export default {
type: data.type, type: data.type,
title: "新增分组", title: "新增分组",
component: "groupForm", component: "groupForm",
paramIdx: null, paramIdx: null
}); });
break; break;
@ -120,7 +129,7 @@ export default {
type: data.type, type: data.type,
title: "修改分组", title: "修改分组",
component: "groupForm", component: "groupForm",
paramIdx: data.idx, paramIdx: data.idx
}); });
break; break;
@ -137,7 +146,7 @@ export default {
type: data.type, type: data.type,
title: "新增参数", title: "新增参数",
component: "functionForm", component: "functionForm",
paramIdx: null, paramIdx: null
}); });
break; break;
@ -147,7 +156,7 @@ export default {
title: "修改参数", title: "修改参数",
component: "functionForm", component: "functionForm",
paramIdx: data.idx, paramIdx: data.idx,
row:data.row row: data.row
}); });
break; break;
@ -160,7 +169,7 @@ export default {
type: data.type, type: data.type,
title: "物模型", title: "物模型",
component: "paramsJson", component: "paramsJson",
paramIdx: null, paramIdx: null
}); });
break; break;
} }
@ -182,17 +191,21 @@ export default {
arttributeList = JSON.parse(this.arttributeList); arttributeList = JSON.parse(this.arttributeList);
groupList = JSON.parse(this.groupList); groupList = JSON.parse(this.groupList);
} catch (error) { } catch (error) {
arttributeList = [], (arttributeList = []), (groupList = []);
groupList = [];
console.log(error); console.log(error);
} }
if (component === "groupForm") { if (component === "groupForm") {
this.$refs.groupref && this.$refs.groupref.setList(groupList); this.$refs.groupref && this.$refs.groupref.setList(groupList);
} else if (component === "attributeForm") { } else if (component === "attributeForm") {
this.$refs.attributeref && this.$refs.attributeref.setList(arttributeList.properties); this.$refs.attributeref &&
this.$refs.attributeref.setList(arttributeList.properties);
} else if (component === "functionForm") { } else if (component === "functionForm") {
this.$refs.functionref && this.$refs.functionref.setList(arttributeList.functions); this.$refs.functionref &&
this.$refs.functionref.setList(arttributeList.functions);
} else if (component === "eventForm") {
this.$refs.eventref &&
this.$refs.eventref.setList(arttributeList.events);
} }
}, },
handleInitData() { handleInitData() {
@ -203,12 +216,12 @@ export default {
try { try {
let json = JSON.parse(this.arttributeList); let json = JSON.parse(this.arttributeList);
if(json.properties){ if (json.properties) {
arttributeList = json.properties; arttributeList = json.properties;
groupList = JSON.parse(this.groupList); groupList = JSON.parse(this.groupList);
functionList = json.functions; functionList = json.functions;
eventList = json.events; eventList = json.events;
}else{ } else {
arttributeList = json; arttributeList = json;
groupList = JSON.parse(this.groupList); groupList = JSON.parse(this.groupList);
functionList = json.functions; functionList = json.functions;
@ -222,15 +235,15 @@ export default {
console.log(error); console.log(error);
} }
console.log(arttributeList, groupList) console.log(arttributeList, groupList);
this.$store.dispatch("InitAttributeAndGroup", { this.$store.dispatch("InitAttributeAndGroup", {
attrList: arttributeList, attrList: arttributeList,
groupList: groupList, groupList: groupList,
functionList:functionList, functionList: functionList,
eventList:eventList eventList: eventList
}); });
}, }
}, }
}; };
</script> </script>

125
src/views/profile/attribute/paramsJson.vue
View File

@ -1,85 +1,88 @@
<template> <template>
<div class="prod-params-json"> <div class="prod-params-json">
<!-- <div class="left-cmds">--> <!-- <div class="left-cmds">-->
<!-- <el-form v-if="paramsList.properties && paramsList.properties.length > 0" ref="loginForm" :model="form.data.params" label-width="120px">--> <!-- <el-form v-if="paramsList.properties && paramsList.properties.length > 0" ref="loginForm" :model="form.data.params" label-width="120px">-->
<!-- &lt;!&ndash;" 不校验的判断　&ndash;&gt;--> <!-- &lt;!&ndash;" 不校验的判断　&ndash;&gt;-->
<!-- <el-form-item--> <!-- <el-form-item-->
<!-- v-for="paramsItem in paramsList.properties"--> <!-- v-for="paramsItem in paramsList.properties"-->
<!-- :key="paramsItem.funId"--> <!-- :key="paramsItem.funId"-->
<!-- :label="paramsItem.funName +　'：'"--> <!-- :label="paramsItem.funName +　'：'"-->
<!-- :prop="paramsItem.funKey"--> <!-- :prop="paramsItem.funKey"-->
<!-- >--> <!-- >-->
<!-- &lt;!&ndash; :rules="retrunRules(paramsItem)" 验证 &ndash;&gt;--> <!-- &lt;!&ndash; :rules="retrunRules(paramsItem)" 验证 &ndash;&gt;-->
<!-- <el-select--> <!-- <el-select-->
<!-- v-if="paramsItem.funValidType === 'ENUM'"--> <!-- v-if="paramsItem.funValidType === 'ENUM'"-->
<!-- v-model="form.data.params[paramsItem.funKey]"--> <!-- v-model="form.data.params[paramsItem.funKey]"-->
<!-- clearable--> <!-- clearable-->
<!-- style="width: 85%;"--> <!-- style="width: 85%;"-->
<!-- >--> <!-- >-->
<!-- <el-option--> <!-- <el-option-->
<!-- v-for="(keys, valus) in strtoJson(paramsItem.funObj)"--> <!-- v-for="(keys, valus) in strtoJson(paramsItem.funObj)"-->
<!-- :key="valus"--> <!-- :key="valus"-->
<!-- :label="keys"--> <!-- :label="keys"-->
<!-- :value="valus"--> <!-- :value="valus"-->
<!-- ></el-option>--> <!-- ></el-option>-->
<!-- </el-select>--> <!-- </el-select>-->
<!-- <el-input-number--> <!-- <el-input-number-->
<!-- v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"--> <!-- v-else-if="paramsItem.funValidType === 'RANGE' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"-->
<!-- v-model="form.data.params[paramsItem.funKey]"--> <!-- v-model="form.data.params[paramsItem.funKey]"-->
<!-- :max="Number(paramsItem.funValMax) || 0"--> <!-- :max="Number(paramsItem.funValMax) || 0"-->
<!-- :min="Number(paramsItem.funValMin) || 0"--> <!-- :min="Number(paramsItem.funValMin) || 0"-->
<!-- clearable--> <!-- clearable-->
<!-- style="width: 85%;"--> <!-- style="width: 85%;"-->
<!-- ></el-input-number>--> <!-- ></el-input-number>-->
<!-- <el-input-number--> <!-- <el-input-number-->
<!-- v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"--> <!-- v-else-if="paramsItem.funValidType === 'NOT' && (paramsItem.funDataType === 'FLOAT' || paramsItem.funDataType === 'INT32')"-->
<!-- v-model="form.data.params[paramsItem.funKey]"--> <!-- v-model="form.data.params[paramsItem.funKey]"-->
<!-- clearable--> <!-- clearable-->
<!-- style="width: 85%;"--> <!-- style="width: 85%;"-->
<!-- ></el-input-number>--> <!-- ></el-input-number>-->
<!-- <el-input--> <!-- <el-input-->
<!-- v-else-if="paramsItem.funDataType === 'TEXT'"--> <!-- v-else-if="paramsItem.funDataType === 'TEXT'"-->
<!-- v-model="form.data.params[paramsItem.funKey]"--> <!-- v-model="form.data.params[paramsItem.funKey]"-->
<!-- clearable--> <!-- clearable-->
<!-- style="width: 85%;"--> <!-- style="width: 85%;"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- </el-form>--> <!-- </el-form>-->
<!-- <span v-else>暂无数据</span>--> <!-- <span v-else>暂无数据</span>-->
<!-- </div>--> <!-- </div>-->
<div class="right-json"> <div class="right-json">
<div style="border: 1px solid #ccc; margin-top: -15px;width: 100%; height: 600px; overflow: scroll"> <div
style="border: 1px solid #ccc; margin-top: -15px;width: 100%; height: 600px; overflow: scroll"
>
<json-viewer :expand-depth="10" :value="paramsList" copyable> <json-viewer :expand-depth="10" :value="paramsList" copyable>
<template v-slot:copy>复制</template> <template v-slot:copy>复制</template>
</json-viewer> </json-viewer>
</div> </div>
<!-- <div class="option-wrap">--> <!-- <div class="option-wrap">-->
<!-- <el-button type="text" @click="copeText">复制</el-button>--> <!-- <el-button type="text" @click="copeText">复制</el-button>-->
<!-- </div>--> <!-- </div>-->
<!-- <pre>{{paramsList}}</pre>--> <!-- <pre>{{paramsList}}</pre>-->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import JsonViewer from 'vue-json-viewer'; import JsonViewer from "vue-json-viewer";
import 'vue-json-viewer/style.css'; import "vue-json-viewer/style.css";
export default { export default {
name: "ParamsJson", name: "ParamsJson",
props: { props: {
other: { other: {
type: Object, type: Object,
default: { default: {
action: '', action: "",
prodPK: '', prodPK: "",
cmdKey: '' cmdKey: ""
} }
}, },
paramsList: { paramsList: {
type: Object, type: Object,
default: { default: {
properties:[], properties: [],
functions:[], functions: [],
events: []
} }
} }
}, },
@ -97,7 +100,7 @@ export default {
} }
}; };
}, },
components:{ JsonViewer }, components: { JsonViewer },
created() { created() {
if (this.paramsList) { if (this.paramsList) {
this.form.action = this.other.action; this.form.action = this.other.action;
@ -115,7 +118,7 @@ export default {
}, },
handelList() { handelList() {
var result = {}; var result = {};
console.log("this.paramsList.properties",this.paramsList) console.log("this.paramsList.properties", this.paramsList);
this.paramsList.properties.forEach(v => { this.paramsList.properties.forEach(v => {
if (!result[v.funKey]) { if (!result[v.funKey]) {
result[v.funKey] = ""; result[v.funKey] = "";