wangqiujuan0808
/
dataControl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模板管理

main
wangqiujuan0808 2024-04-16 14:48:50 +08:00
parent 20a20f8d5e
commit 88bcff5741
9 changed files with 221 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/api/infoApi.js
View File

@ -6,7 +6,7 @@ const infoApi = {
getSys() {
return postPBRequest("/info", null, 51000);
},
// // 获取网络信息
// 获取网络信息
getNet(params) {
return postPBRequest("/net", params, 52000);
},
@ -31,7 +31,7 @@ const infoApi = {
// },
// 获取支持的通讯驱动
getTxSupport() {
return postPBRequest('/driver', null,53001)
return postPBRequest('/driver', null, 53001)
},
// // 获取所有串口列表api/com
@ -53,26 +53,26 @@ const infoApi = {
// delTc(params) {
// return deleteRequest("/tc", params);
// },
// // 模板列表
// getMb(params) {
// return getRequest('/tx/mb/list', params)
// },
// // 新增模板
// addMb(params) {
// return postJsonRequest('/tx/mb', params)
// },
// // 编辑模板
// editMb(params) {
// return putRequest('/tx/mb', params)
// },
// // 删除模板
// delMb(params) {
// return deleteRequest('/tx/mb', params)
// },
// // 新增点位
// addP(params) {
// return putRequest('/tx/mb', params)
// },
// 模板列表
getMb(params) {
return postPBRequest('/template', params, 54000)
},
// 新增模板
addMb(params) {
return postPBRequest('/template', params, 54100)
},
// 编辑模板
editMb(params) {
return postPBRequest('/template', params, 54200)
},
// 删除模板
delMb(params) {
return postPBRequest('/template', params, 54300)
},
// 新增点位
addP(params) {
return postPBRequest('/tx/mb', params)
},
// // 获取点位
// getP(params) {
@ -86,14 +86,22 @@ const infoApi = {
// addSet(params) {
// return putRequest('/tx/device', params)
// },
// 通讯列表
getTx(params) {
return postPBRequest('/driver', params, 53000)
},
// // 新增通讯列表
// saveTx(params) {
// return postJsonRequest("/tx", params);
// },
// 驱动列表查询
getTx(params) {
return postPBRequest('/driver', params, 53000)
},
// 添加查询
saveTx(params) {
return postPBRequest("/driver", params, 53100);
},
// 查询支持的驱动列表
getSupportTx(params) {
return postPBRequest("/driver", params, 53001);
},
// 查询驱动配置项
getTxConfig(params) {
return postPBRequest("/driver", params, 53002);
}
// // 通讯服务启用,停用
// changeStatus(params) {

8
src/components/AddData.vue
View File

@ -206,7 +206,7 @@ export default {
stop_bits_select: [1, 2],
timeout_select: [0, 100, 200, 500, 1000, 2000],
rules: {
name: [
index: [
{ required: true, message: "请输入通讯名称", trigger: "blur" },
{ required: true, validator: validName, trigger: "blur" },
],
@ -319,10 +319,8 @@ export default {
// 获取com
const getCom = async () => {
const res = await infoApi.getCom();
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
const infodata = com_list.decode(ret.data);
state.comArr = infodata.com;
if (res.code == 0) {
state.comArr = res.data.com;
console.log('comlist',state.comArr)
state.com_select = [];
infodata.com.forEach(e => {

90
src/components/AddMb.vue
View File

@ -1,42 +1,23 @@
<template>
<el-dialog
v-model="visible"
:title="type === 'I' ? '新增模板': '编辑模板'"
width="30%"
:before-close="closeDialog"
>
<el-form
:model="addForm"
label-width="100px"
:rules="rules"
ref="ruleFormRef"
>
<el-dialog v-model="visible" :title="type === 'I' ? '新增模板' : '编辑模板'" width="30%" :before-close="closeDialog">
<el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef">
<el-form-item label="模板名称:" prop="name">
<el-input
v-model="addForm.name"
placeholder="请输入模板名称"
clearable
:disabled="type === 'I' ? false: true"
/>
<el-input v-model="addForm.name" placeholder="请输入模板名称" clearable :disabled="type === 'I' ? false : true" />
</el-form-item>
<el-form-item label="模板描述:" prop="description">
<el-input
v-model="addForm.description"
placeholder="请输入模板描述"
clearable
/>
<el-input v-model="addForm.description" placeholder="请输入模板描述" clearable />
</el-form-item>
<el-form-item label="模板类型:" prop="type">
<el-input
v-model="addForm.type"
disabled
/>
<el-select v-model="addForm.type" clearable placeholder="请选择模板类型" @change="driveChange" :disabled="type!=='I'">
<el-option v-for="(item, index) of typeOptions" :key="index" :label="item.name" :value="item.key" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveFormData"> 保存 </el-button>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveFormData"> 保存 </el-button>
</span>
</template>
</el-dialog>
@ -45,12 +26,12 @@
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { mb_list, mb_info, response} from '../proto/data/pd'
// import { mb_list, mb_info, response} from '../proto/data/pd'
export default {
props: ["formData", "dialogVisible", "type"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const ruleFormRef = ref(null);
setup(props, ctx) {
const ruleFormRef = ref(null);
const state = reactive({
addForm: {},
rules: {
@ -64,6 +45,16 @@ export default {
{ required: true, message: "请选择类型", trigger: "blur" }
],
},
typeOptions: [
{
key: 1,
name: 'MODBUS'
},
{
key: 2,
name: 'PLC'
}
]
});
const visible = computed(() => {
return props.dialogVisible;
@ -72,35 +63,28 @@ export default {
return props.type;
});
onMounted(() => {
state.addForm = props.formData;
state.addForm = props.formData;
});
const closeDialog = () => {
ctx.emit("dialogClose");
};
const importData = () => {};
const importData = () => { };
const exoportData = () => {};
const exoportData = () => { };
const saveFormData = () => {
ruleFormRef.value.validate(async (valid) => {
if (valid) {
const req_databuf = mb_info.encode(state.addForm).finish();
// 截取有效长度
const req_data = req_databuf.slice(0, req_databuf.length);
const res = props.type === 'I' ? await infoApi.addMb(req_data) : await infoApi.editMb(req_data);
console.log(555, res)
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
// 获取数据
console.log(new TextDecoder().decode(ret.data));
ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
// 关闭弹框
ctx.emit("dialogSuccess");
const res = props.type === 'I' ? await infoApi.addMb(state.addForm) : await infoApi.editMb(state.addForm);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
// 关闭弹框
ctx.emit("dialogSuccess");
} else {
console.log(res);
ElMessage.error(res.message);
}
} else {
console.log("error submit!");
@ -126,42 +110,50 @@ export default {
line-height: 40px;
display: flex;
> div {
>div {
width: 15%;
span {
margin-right: 10px;
}
}
}
.tree-div {
height: 780px;
display: flex;
justify-content: space-between;
.tree {
width: 20%;
border: 1px solid #f2f2f2;
height: 100%;
padding: 10px;
}
.table {
height: 100%;
width: 79%;
display: flex;
flex-direction: column;
justify-content: space-between;
.point-table {
border: 1px solid #f2f2f2;
padding: 10px;
}
.propertie-table {
padding: 10px;
border: 1px solid #f2f2f2;
}
}
.custom-tree-node {
display: flex;
justify-content: space-between;
width: 100%;
.add-icon {
padding-right: 15px;
}

222
src/components/AddPoint.vue
View File

@ -1,132 +1,61 @@
<template>
<el-dialog
v-model="visible"
title="点位管理"
width="60%"
:before-close="closeDialog"
>
<el-dialog v-model="visible" title="点位管理" width="60%" :before-close="closeDialog">
<el-card class="top-title">
<span>模板名称：{{ addForm.name }}</span>
<span>模板描述：{{ addForm.description }}</span>
<span>模板类型：{{ addForm.type }}</span>
<span>模板类型：{{ addForm.type == 1 ? 'MODBUS' : 'PLC' }}</span>
</el-card>
<div class="btns">
<div>
<el-button type="primary" @click="saveP"> 保存 </el-button>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="saveP"> 保存 </el-button>
<el-button @click="closeDialog">取消</el-button>
</div>
<div>
<el-button type="primary" @click="importData"> 导入 </el-button>
<el-button type="primary" @click="exportData"> 导出 </el-button>
<el-button type="primary" @click="importData"> 导入 </el-button>
<el-button type="primary" @click="exportData"> 导出 </el-button>
</div>
</div>
<div>
<el-table
:data="propertiesData"
height="230"
style="width: 100%"
border
stripe
:header-cell-style="{ background: '#F6F7FC' }"
>
<el-table-column
prop="name"
label="点位名称"
align="center"
show-overflow-tooltip
>
<el-table :data="propertiesData" height="230" style="width: 100%" border stripe
:header-cell-style="{ background: '#F6F7FC' }">
<el-table-column prop="name" label="点位名称" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input
v-model="scope.row.name"
clearable
/>
<el-input v-model="scope.row.name" clearable />
</template>
</el-table-column>
<el-table-column
prop="address"
label="点位地址"
align="center"
show-overflow-tooltip
>
<el-table-column prop="address" label="点位地址" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input
v-model="scope.row.address"
clearable
/>
<el-input v-model="scope.row.address" clearable />
</template>
</el-table-column>
<el-table-column
prop="datatype"
label="点位类型"
align="center"
show-overflow-tooltip
>
<el-table-column prop="datatype" label="点位类型" align="center" show-overflow-tooltip>
<template #default="scope">
<el-select v-model="scope.row.datatype" size="mini">
<el-option
v-for="item in datatypeArr"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column
prop="byteorder"
label="字节顺序"
align="center"
show-overflow-tooltip
>
<el-table-column prop="byteorder" label="字节顺序" align="center" show-overflow-tooltip>
<template #default="scope">
<el-select v-model="scope.row.byteorder" size="mini">
<el-option
v-for="item in byteorderArr"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in byteorderArr" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column
prop="multplier"
label="缩放系数"
align="center"
show-overflow-tooltip
>
<el-table-column prop="multplier" label="缩放系数" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input
v-model="scope.row.multplier"
clearable
/>
<el-input v-model="scope.row.multplier" clearable />
</template>
</el-table-column>
<el-table-column
prop="unit"
label="点位单位"
align="center"
show-overflow-tooltip
>
<el-table-column prop="unit" label="点位单位" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input
v-model="scope.row.unit"
clearable
/>
<el-input v-model="scope.row.unit" clearable />
</template>
</el-table-column>
<el-table-column
prop="description"
label="点位描述"
align="center"
show-overflow-tooltip
>
<el-table-column prop="description" label="点位描述" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input
v-model="scope.row.description"
clearable
/>
<el-input v-model="scope.row.description" clearable />
</template>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
@ -147,7 +76,7 @@
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { m_point, m_properties, mb_info, response} from '../proto/data/pd'
// import { m_point, m_properties, mb_info, response} from '../proto/data/pd'
export default {
props: ["formData", "dialogVisible"],
emits: ["dialogClose", "dialogSuccess"],
@ -158,44 +87,44 @@ export default {
datatypeArr: [{
label: 'bool',
value: 'bool'
},{
}, {
label: 'int16',
value: 'int16'
},{
}, {
label: 'int32',
value: 'int32'
},{
}, {
label: 'unit16',
value: 'unit16'
},{
}, {
label: 'unit32',
value: 'unit32'
},{
}, {
label: 'float32',
value: 'float32'
},{
}, {
label: 'float64',
value: 'float64'
}],
byteorderArr: [{
label: 'null',
value: 'null'
},{
}, {
label: '12',
value: '12'
},{
}, {
label: '21',
value: '21'
},{
}, {
label: '1234',
value: '1234'
},{
}, {
label: '4321',
value: '4321'
},{
}, {
label: 'ABCD',
value: 'ABCD'
},{
}, {
label: 'DCBA',
value: 'DCBA'
}]
@ -210,9 +139,9 @@ export default {
// 获取点位列表
getPointList();
});
const getPointList = async() => {
const getPointList = async () => {
const parm = mb_info.encode({
name: state.addForm.name
name: state.addForm.name
}).finish();
// 截取有效长度
const parm_data = parm.slice(0, parm.length);
@ -223,29 +152,29 @@ export default {
state.propertiesData = [];
propArr.forEach(v => {
state.propertiesData.push({
name: v.name,
address: v.properties[0].value,
datatype: v.properties[1].value,
byteorder: v.properties[2].value,
multplier: v.properties[3].value,
unit: v.properties[4].value,
description: v.properties[5].value,
name: v.name,
address: v.properties[0].value,
datatype: v.properties[1].value,
byteorder: v.properties[2].value,
multplier: v.properties[3].value,
unit: v.properties[4].value,
description: v.properties[5].value,
})
})
} else {
console.log(res);
console.log(res);
}
};
const closeDialog = () => {
ctx.emit("dialogClose");
};
const importData = () => {};
const importData = () => { };
const exportData = () => {};
const exportData = () => { };
const saveP = async () => {
if (state.propertiesData.length<1) {
if (state.propertiesData.length < 1) {
return ElMessage.error("请添加一条点位");
}
const newArr = [];
@ -254,55 +183,53 @@ export default {
name: item.name,
properties: [
m_properties.create({
name: 'address',value:item.address
name: 'address', value: item.address
}),
m_properties.create({
name: 'datatype',value:item.datatype
name: 'datatype', value: item.datatype
}),
m_properties.create({
name: 'byteorder',value:item.byteorder
name: 'byteorder', value: item.byteorder
}),
m_properties.create({
name: 'multplier',value:item.multplier
name: 'multplier', value: item.multplier
}),
m_properties.create({
name: 'unit',value:item.unit
name: 'unit', value: item.unit
}),
m_properties.create({
name: 'description',value:item.description
name: 'description', value: item.description
})
]
}))
})
console.log(123, newArr)
const req_databuf = mb_info.encode({
name: state.addForm.name,
type: state.addForm.type,
description: state.addForm.description,
points: newArr
}).finish();
// 截取有效长度
const req_data = req_databuf.slice(0, req_databuf.length);
const res = await infoApi.addP(req_data);
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
console.log(new TextDecoder().decode(ret.data));
ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
const param = {
name: state.addForm.name,
type: state.addForm.type,
description: state.addForm.description,
points: newArr
}
const res = await infoApi.addP(param);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
// 获取数据
getPointList();
} else {
ElMessage.error(res.message);
}
};
const addRow = () => {
let newRow = {
name: '',
address: '',
let newRow = {
name: '',
address: '',
datatype: 'bool',
byteorder: 'null',
multplier: '',
byteorder: 'null',
multplier: '',
unit: '',
description: ''
};
};
state.propertiesData.push(newRow);
}
const delData = (index) => {
@ -324,6 +251,7 @@ export default {
<style lang="scss" scoped>
.top-title {
width: 100%;
::v-deep .el-card__body {
width: 100%;
display: flex;
@ -331,13 +259,15 @@ export default {
font-weight: 800;
font-size: 16px;
}
}
}
.btns {
padding: 15px 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.flex-center {
display: flex;
justify-content: center;

2
src/components/Sidebar.vue
View File

@ -90,7 +90,7 @@ export default {
},
{
id: 3 - 2,
name: "通讯管理",
name: "驱动管理",
index: "/page",
},
// {

40
src/router/index.js
View File

@ -32,26 +32,26 @@ const router = createRouter({
name: 'page',
component: () => import('../views/Page.vue')
},
{
path: '/data',
name: 'data',
component: () => import('../views/Data.vue')
},
{
path: '/report',
name: 'report',
component: () => import('../views/Report.vue')
},
{
path: '/transparent',
name: 'transparent',
component: () => import('../views/Transparent.vue')
},
{
path: '/rules',
name: 'rules',
component: () => import('../views/Rules.vue')
}
// {
// path: '/data',
// name: 'data',
// component: () => import('../views/Data.vue')
// },
// {
// path: '/report',
// name: 'report',
// component: () => import('../views/Report.vue')
// },
// {
// path: '/transparent',
// name: 'transparent',
// component: () => import('../views/Transparent.vue')
// },
// {
// path: '/rules',
// name: 'rules',
// component: () => import('../views/Rules.vue')
// }
]
})

2
src/utils/axios.js
View File

@ -48,7 +48,7 @@ axios.interceptors.response.use(
},
(error) => {
ElMessage.closeAll();
ElMessage.error(error);
ElMessage.error("请求错误");
// router.push({
// path: "/login"
// });

96
src/views/Model.vue
View File

@ -3,37 +3,17 @@
<div class="all-content">
<div class="top-div">
<el-button type="primary" @click="addData">新增</el-button>
</div>
<el-table
:data="tableData"
height="730"
style="width: 100%"
border
stripe
:header-cell-style="{ background: '#F6F7FC' }"
>
</div>
<el-table :data="tableData" height="730" style="width: 100%" border stripe
:header-cell-style="{ background: '#F6F7FC' }">
<el-table-column type="index" label="序号" width="80" align="center" />
<el-table-column
prop="name"
label="模板名称"
width="200"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="type"
label="模板类型"
width="200"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="description"
label="模板描述"
width="200"
align="center"
show-overflow-tooltip
/>
<el-table-column prop="name" label="模板名称" width="240" align="center" show-overflow-tooltip />
<el-table-column prop="type" label="模板类型" width="240" align="center" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row.type === 1 ? 'MODBUS' : 'PLC' }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="模板描述" width="600" align="center" show-overflow-tooltip />
<el-table-column label="模板管理" align="center" show-overflow-tooltip>
<template #default="scope">
<el-button type="info" @click="manageData(scope.row)">
@ -49,32 +29,21 @@
</el-table-column>
</el-table>
</div>
<AddMb
:type="type"
:formData="formData"
:dialogVisible="dialogVisible"
v-if="dialogVisible"
@dialogClose="dialogClose"
@dialogSuccess="dialogSuccess"
>
<AddMb :type="type" :formData="formData" :dialogVisible="dialogVisible" v-if="dialogVisible"
@dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
</AddMb>
<AddPoint
:formData="formData1"
:dialogVisible="dialogVisible1"
v-if="dialogVisible1"
@dialogClose="dialogClose"
@dialogSuccess="dialogSuccess"
>
<AddPoint :formData="formData1" :dialogVisible="dialogVisible1" v-if="dialogVisible1" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</AddPoint>
</el-card>
</template>
<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import AddMb from "@/components/AddMb.vue";
import infoApi from "@/api/infoApi.js";
import { response, mb_info, mb_list } from '../proto/data/pd'
// import { response, mb_info, mb_list } from '../proto/data/pd'
import AddPoint from "@/components/AddPoint.vue";
export default {
name: "model",
@ -101,14 +70,11 @@ export default {
});
const getTableData = async () => {
const res = await infoApi.getMb();
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
// 获取数据
state.tableData = mb_list.decode(ret.data).mb;
console.log(mb_list.decode(ret.data).mb);
if (res.code == 0) {
// 获取数据
state.tableData = res.data;
} else {
console.log(res);
console.log(res);
}
};
const editData = (item) => {
@ -124,19 +90,12 @@ export default {
type: "warning",
})
.then(async () => {
const req_databuf = mb_info.encode({
name: item.name,
}).finish();
// 截取有效长度
const req_data = req_databuf.slice(0, req_databuf.length);
const res = await infoApi.delMb(req_data);
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
ElMessage.success(res.msg || "请求成功");
const res = await infoApi.delMb(item);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
getTableData();
} else {
ElMessage.error(res.msg);
ElMessage.error(res.message);
}
})
.catch(() => {
@ -150,7 +109,7 @@ export default {
state.formData = {
name: '',
description: '',
type: 'modbus'
type: 1
}
state.type = 'I';
};
@ -186,7 +145,8 @@ export default {
.all-content {
display: flex;
flex-direction: column;
}
}
.top-div {
display: flex;
justify-content: flex-end;

25
src/views/Page.vue
View File

@ -33,7 +33,11 @@
width="200"
align="center"
show-overflow-tooltip
/>
>
<template #default="scope">
<span>{{ qudongOptions[scope.row.type]}}</span>
</template>
</el-table-column>
<el-table-column
prop="host"
label="主机地址"
@ -200,18 +204,15 @@ export default {
type: "warning",
})
.then(async () => {
const req_databuf = tx_info.encode({
name: state.formData.name,
}).finish();
// 截取有效长度
const req_data = req_databuf.slice(0, req_databuf.length);
const res = await infoApi.delTx(req_data);
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
ElMessage.success(res.msg || "删除成功");
let param = {
name: state.formData.name
}
const res = await infoApi.delTx(param);
if (res.code == 0) {
ElMessage.success(res.message || "删除成功");
getTableData();
} else {
ElMessage.error(res.msg | "删除失败");
ElMessage.error(res.message | "删除失败");
}
})
.catch(() => {
@ -249,7 +250,7 @@ export default {
dialogSuccess,
changeStatus,
dialogClose1,
dialogSuccess1,
dialogSuccess1
};
},
};