瓶中沙 2024-05-08 23:26:08 +08:00
commit 9959342a91
6 changed files with 579 additions and 281 deletions

View File

@ -80,14 +80,6 @@ const infoApi = {
detP(params) { detP(params) {
return postPBRequest('/template', params, 53310, params.template_name) return postPBRequest('/template', params, 53310, params.template_name)
}, },
// //
// getSet(params) {
// return postJsonRequest('/tx/info', params)
// },
// //
// addSet(params) {
// return putRequest('/tx/device', params)
// },
// //
getTx(params) { getTx(params) {
return postPBRequest('/driver', params, 54000) return postPBRequest('/driver', params, 54000)
@ -109,19 +101,33 @@ const infoApi = {
getTxSupport() { getTxSupport() {
return postPBRequest('/driver', null, 54001) return postPBRequest('/driver', null, 54001)
}, },
//
// //
getTxConfig(params) { getTxTemplate(params) {
return postPBRequest("/driver", params, 53002); return postPBRequest("/driver", params, 54011, params.driver_name);
},
//
addSet(params) {
return postPBRequest('/driver', params, 54110, params.driver_name)
}, },
// , //
startStatus(params) { getSet(params) {
return postPBRequest("/driver", params,53201); return postPBRequest('/driver', params, 54010, params.driver_name)
}, },
// //
stopStatus(params) { delSet(params) {
return postPBRequest("/driver", params,53202); return postPBRequest('/driver', params, 54310, params.driver_name)
} },
// ,
startStatus(params) {
return postPBRequest("/driver", params, 53201);
},
//
stopStatus(params) {
return postPBRequest("/driver", params, 53202);
}
// // // //
// getSc(params) { // getSc(params) {

View File

@ -0,0 +1,262 @@
<template>
<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.host }}</span>
</el-card>
<div class="btns">
<div>
<el-button type="primary" @click="saveSet"> </el-button>
<el-button @click="closeDialog"></el-button>
</div>
<div>
<el-button type="primary" @click="scanData"> </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
>
<template #default="scope">
<el-input
v-model="scope.row.name"
clearable
/>
</template>
</el-table-column>
<el-table-column
prop="ID"
label="设备id"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<el-input
v-model="scope.row.ID"
clearable
/>
</template>
</el-table-column>
<el-table-column
prop="template"
label="数据模板"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<el-select v-model="scope.row.template" clearable placeholder="请选择模板" size="mini">
<el-option
v-for="item in modelArr"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="description"
label="设备描述"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<el-input
v-model="scope.row.description"
clearable
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
<template #default="scope">
<el-button type="danger" @click="delData(scope.$index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="flex-center" @click="addRow">
+新增一行
</div>
</div>
</el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
// import { mb_list, tx_info, response, m_device, m_properties, tx_add_device} from '../proto/data/pd'
export default {
props: ["formData", "dialogVisible"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const state = reactive({
addForm: {},
propertiesData: [],
modelArr: []
});
const visible = computed(() => {
return props.dialogVisible;
});
onMounted(() => {
state.addForm = props.formData;
console.log(123, props.formData)
//
getMbData();
//
getSetList();
});
const getMbData = async () => {
const res = await infoApi.getMb();
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
//
state.modelArr = mb_list.decode(ret.data).mb;
console.log(mb_list.decode(ret.data).mb);
} else {
console.log(res);
}
};
const getSetList = async() => {
const parm = tx_info.encode({
name: state.addForm.name
}).finish();
//
const parm_data = parm.slice(0, parm.length);
const res = await infoApi.getSet(parm_data);
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
console.log(99, tx_info.decode(ret.data).device);
const propArr = tx_info.decode(ret.data).device;
state.propertiesData = [];
propArr.forEach(v => {
state.propertiesData.push({
name: v.name,
ID: v.properties[0].value,
template: v.properties[1].value,
description: v.properties[2].value,
})
})
} else {
console.log(res);
}
};
const closeDialog = () => {
ctx.emit("dialogClose");
};
const scanData = () => {};
const saveSet = async () => {
if (state.propertiesData.length < 1) {
return ElMessage.error("请至少添加一条数据");
}
const newArr = [];
state.propertiesData.forEach(item => {
newArr.push({
name: item.name,
properties: [
{
name: 'ID', value: item.ID
},{
name: 'template', value: item.template
},{
name: 'description', value: item.description
}]
})
})
const req_databuf = tx_add_device.encode({
name: state.addForm.name,
device: newArr
}).finish();
//
const req_data = req_databuf.slice(0, req_databuf.length);
const res = await infoApi.addSet(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) || "请求成功");
//
getSetList();
}
};
const addRow = () => {
let newRow = {
name: '',
address: '',
datatype: 'bool',
byteorder: 'null',
multplier: '',
unit: '',
description: ''
};
state.propertiesData.push(newRow);
}
const delData = (index) => {
state.propertiesData.splice(index, 1);
}
return {
...toRefs(state),
visible,
closeDialog,
scanData,
addRow,
saveSet,
delData,
getMbData
};
},
};
</script>
<style lang="scss" scoped>
.top-title {
width: 100%;
::v-deep .el-card__body {
width: 100%;
display: flex;
justify-content: space-between;
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;
padding: 10px 0;
cursor: pointer;
}
</style>

View File

@ -1,262 +1,150 @@
<template> <template>
<el-dialog <el-dialog v-model="visible" title="设备管理" width="60%" :before-close="closeDialog">
v-model="visible" <el-form :model="addForm" label-width="100px" :rules="rules" ref="ruleFormRef">
title="设备管理" <el-form-item label="设备名称:" prop="name">
width="60%" <el-input v-model="addForm.name" placeholder="请输入点位名称" clearable />
:before-close="closeDialog" </el-form-item>
> <el-form-item label="设备id:" prop="id">
<el-card class="top-title"> <el-input v-model="addForm.id" placeholder="请输入设备id" clearable type="number" />
<span>通讯名称{{ addForm.name }}</span> </el-form-item>
<span>通讯描述{{ addForm.description }}</span> <el-form-item label="模板名称:" prop="template_name">
<span>通讯主机{{ addForm.host }}</span> <el-select v-model="addForm.template_name" size="mini" placeholder="请选择模板名称">
</el-card> <el-option v-for="item in modelArr" :key="item.name" :label="item.name"
<div class="btns"> :value="item.name" />
<div> </el-select>
<el-button type="primary" @click="saveSet"> </el-button> </el-form-item>
<el-button @click="closeDialog"></el-button>
</div> <el-form-item label="设备描述:" prop="description">
<div> <el-input v-model="addForm.description" placeholder="请输入点位描述" clearable />
<el-button type="primary" @click="scanData"> </el-button> </el-form-item>
</el-form>
</div> <template #footer>
</div> <span class="dialog-footer">
<div> <el-button @click="closeDialog"></el-button>
<el-table <el-button type="primary" @click="saveSet"> </el-button>
:data="propertiesData" </span>
height="230" </template>
style="width: 100%" </el-dialog>
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
/>
</template>
</el-table-column>
<el-table-column
prop="ID"
label="设备id"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<el-input
v-model="scope.row.ID"
clearable
/>
</template>
</el-table-column>
<el-table-column
prop="template"
label="数据模板"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<el-select v-model="scope.row.template" clearable placeholder="请选择模板" size="mini">
<el-option
v-for="item in modelArr"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="description"
label="设备描述"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<el-input
v-model="scope.row.description"
clearable
/>
</template>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
<template #default="scope">
<el-button type="danger" @click="delData(scope.$index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="flex-center" @click="addRow">
+新增一行
</div>
</div>
</el-dialog>
</template> </template>
<script> <script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue"; import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js"; import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
// import { mb_list, tx_info, response, m_device, m_properties, tx_add_device} from '../proto/data/pd'
export default { export default {
props: ["formData", "dialogVisible"], props: ["formData", "dialogVisible"],
emits: ["dialogClose", "dialogSuccess"], emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) { setup(props, ctx) {
const state = reactive({ const ruleFormRef = ref(null);
addForm: {}, const state = reactive({
propertiesData: [], addForm: {
modelArr: [] name: '',
}); template_name: '',
const visible = computed(() => { id: 1,
return props.dialogVisible; description: ''
}); },
modelArr: [],
rules: {
name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
template_name: [{ required: true, message: "请选择模板名称", trigger: "blur" }],
id: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
},
});
const visible = computed(() => {
return props.dialogVisible;
});
onMounted(() => { onMounted(() => {
state.addForm = props.formData; console.log(123, props.formData)
console.log(123, props.formData) //
// getTxTemplate();
getMbData(); });
// const getTxTemplate = async () => {
getSetList(); const param = {
}); driver_name: props.formData.name
const getMbData = async () => { }
const res = await infoApi.getMb(); const res = await infoApi.getTxTemplate(param);
const ret = response.decode(new Uint8Array(res));
if (res.code == 0) {
if (ret.code == 0) { //
// state.modelArr = [];
state.modelArr = mb_list.decode(ret.data).mb; const data = res.data;
console.log(mb_list.decode(ret.data).mb); for (let i in data) {
let obj = {
key: Number(i),
name: data[i]
}
state.modelArr.push(obj);
console.log(33,state.modelArr);
}
console.log(state.modelArr);
state.addForm.template_name = state.modelArr[0].name;
} else { } else {
console.log(res); ElMessage.error(res.message || "请求失败");
} }
}; };
const getSetList = async() => { const closeDialog = () => {
const parm = tx_info.encode({ ctx.emit("dialogClose");
name: state.addForm.name };
}).finish();
//
const parm_data = parm.slice(0, parm.length);
const res = await infoApi.getSet(parm_data);
const ret = response.decode(new Uint8Array(res));
if (ret.code == 0) {
console.log(99, tx_info.decode(ret.data).device);
const propArr = tx_info.decode(ret.data).device;
state.propertiesData = [];
propArr.forEach(v => {
state.propertiesData.push({
name: v.name,
ID: v.properties[0].value,
template: v.properties[1].value,
description: v.properties[2].value,
})
})
} else {
console.log(res);
}
};
const closeDialog = () => {
ctx.emit("dialogClose");
};
const scanData = () => {}; const scanData = () => { };
const saveSet = async () => { const saveSet = async () => {
if (state.propertiesData.length < 1) { console.log(ruleFormRef.value);
return ElMessage.error("请至少添加一条数据"); await ruleFormRef.value.validate(async (valid) => {
} if (valid) {
const newArr = []; const param = {
state.propertiesData.forEach(item => { driver_name: props.formData.name,
newArr.push({ ...state.addForm,
name: item.name, id: Number(state.addForm.id)
properties: [ }
{ const res = await infoApi.addSet(param);
name: 'ID', value: item.ID if (res.code == 0) {
},{ ElMessage.success(res.message || "请求成功");
name: 'template', value: item.template ctx.emit("dialogClose");
},{ } else {
name: 'description', value: item.description ElMessage.error(res.message);
}] }
}) } else {
}) console.log("error submit!");
}
const req_databuf = tx_add_device.encode({ });
name: state.addForm.name,
device: newArr
}).finish(); };
return {
// ...toRefs(state),
const req_data = req_databuf.slice(0, req_databuf.length); visible,
const res = await infoApi.addSet(req_data); closeDialog,
const ret = response.decode(new Uint8Array(res)); saveSet,
ruleFormRef
if (ret.code == 0) { };
console.log(new TextDecoder().decode(ret.data)); },
ElMessage.success(new TextDecoder().decode(ret.data) || "请求成功");
//
getSetList();
}
};
const addRow = () => {
let newRow = {
name: '',
address: '',
datatype: 'bool',
byteorder: 'null',
multplier: '',
unit: '',
description: ''
};
state.propertiesData.push(newRow);
}
const delData = (index) => {
state.propertiesData.splice(index, 1);
}
return {
...toRefs(state),
visible,
closeDialog,
scanData,
addRow,
saveSet,
delData,
getMbData
};
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-title { .top-title {
width: 100%; width: 100%;
::v-deep .el-card__body {
width: 100%; ::v-deep .el-card__body {
display: flex; width: 100%;
justify-content: space-between; display: flex;
font-weight: 800; justify-content: space-between;
font-size: 16px; font-weight: 800;
} font-size: 16px;
} }
.btns {
padding: 15px 0;
width: 100%;
display: flex;
justify-content: space-between;
} }
.btns {
padding: 15px 0;
width: 100%;
display: flex;
justify-content: space-between;
}
.flex-center { .flex-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px 0; padding: 10px 0;
cursor: pointer; cursor: pointer;
} }
</style> </style>

120
src/components/ViewSet.vue Normal file
View File

@ -0,0 +1,120 @@
<template>
<el-dialog v-model="visible" title="设备管理" width="60%" :before-close="closeDialog">
<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-column>
<el-table-column prop="id" label="设备ID" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="template_name" label="设备的可用模板名称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="description" label="设备描述" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
<template #default="scope">
<el-button type="danger" @click="delData(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
props: ["formData", "dialogVisible"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const state = reactive({
propertiesData: [],
});
const visible = computed(() => {
return props.dialogVisible;
});
onMounted(() => {
getSet();
});
const getSet = async () => {
const parm = {
driver_name: props.formData.name
}
const res = await infoApi.getSet(parm);
if (res.code == 0) {
state.propertiesData = res.data;
} else {
console.log(res);
}
};
const closeDialog = () => {
ctx.emit("dialogClose");
};
const delData = (item) => {
ElMessageBox.confirm("确定删除该数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(async () => {
let param = {
driver_name: props.formData.name,
name: item.name
}
const res = await infoApi.delSet(param);
if (res.code == 0) {
ElMessage.success(res.message || "删除成功");
getSet();
} else {
ElMessage.error(res.message | "删除失败");
}
})
.catch(() => {
ElMessage.info("已取消删除");
});
}
return {
...toRefs(state),
visible,
closeDialog,
delData
};
},
};
</script>
<style lang="scss" scoped>
.top-title {
width: 100%;
::v-deep .el-card__body {
width: 100%;
display: flex;
justify-content: space-between;
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;
padding: 10px 0;
cursor: pointer;
}
</style>

View File

@ -56,14 +56,15 @@ axios.interceptors.response.use(
} }
); );
// post // post
export function postPBRequest(url, params, actionNum,template_name) { export function postPBRequest(url, params, actionNum,name) {
const title = url === '/driver' ? {'driver_name': name }: {'template_name': name}
return axios({ return axios({
method: "post", method: "post",
url: url, url: url,
data: params, data: params,
headers: { headers: {
"action": actionNum, "action": actionNum,
"template_name": template_name ...title
}, },
}); });
} }

View File

@ -93,7 +93,10 @@
删除 删除
</el-button> </el-button>
<el-button type="info" @click="manageData(scope.row)"> <el-button type="info" @click="manageData(scope.row)">
设备 新增设备
</el-button>
<el-button type="info" @click="viewData(scope.row)">
设备查询
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -112,17 +115,20 @@
:formData="formData" :formData="formData"
:dialogVisible="dialogVisible1" :dialogVisible="dialogVisible1"
v-if="dialogVisible1" v-if="dialogVisible1"
@dialogClose="dialogClose1" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess1" @dialogSuccess="dialogSuccess"
> >
</AddSet> </AddSet>
<PzSet <PzSet
:dialogVisible="dialogVisible2" :dialogVisible="dialogVisible3"
v-if="dialogVisible2" v-if="dialogVisible3"
@dialogClose="dialogClose2" @dialogClose="dialogClose3"
@dialogSuccess="dialogSuccess2" @dialogSuccess="dialogSuccess3"
> >
</PzSet> </PzSet>
<ViewSet :formData="formData" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</ViewSet>
</el-card> </el-card>
</template> </template>
@ -133,12 +139,14 @@ import { ElMessage, ElMessageBox } from "element-plus";
import AddData from "@/components/AddData.vue"; import AddData from "@/components/AddData.vue";
import AddSet from "@/components/AddSet.vue"; import AddSet from "@/components/AddSet.vue";
import PzSet from "@/components/PzSet.vue"; import PzSet from "@/components/PzSet.vue";
import ViewSet from "@/components/ViewSet.vue";
export default { export default {
name: "page", name: "page",
components: { components: {
AddData, AddData,
AddSet, AddSet,
PzSet PzSet,
ViewSet
}, },
setup() { setup() {
const state = reactive({ const state = reactive({
@ -147,8 +155,9 @@ export default {
formData: {}, formData: {},
dialogVisible: false, dialogVisible: false,
dialogVisible1: false, dialogVisible1: false,
dialogVisible2: false,// dialogVisible2: false,
type: '0', // 0 1 dialogVisible3: false,
type: '0' // 0 1
}); });
onMounted(() => { onMounted(() => {
@ -176,6 +185,8 @@ export default {
}; };
const dialogClose = () => { const dialogClose = () => {
state.dialogVisible = false; state.dialogVisible = false;
state.dialogVisible1 = false;
state.dialogVisible2 = false;
}; };
const dialogSuccess = () => { const dialogSuccess = () => {
@ -186,18 +197,22 @@ export default {
const dialogClose1 = () => { const dialogClose1 = () => {
state.dialogVisible1 = false; state.dialogVisible1 = false;
}; };
const dialogClose2 = () => {
state.dialogVisible2 = false; const dialogClose3 = () => {
state.dialogVisible3 = false;
}; };
const dialogSuccess3 = () => {
state.dialogVisible3 = false;
getTableData();
};
const dialogSuccess1 = () => { const dialogSuccess1 = () => {
state.dialogVisible1 = false; state.dialogVisible1 = false;
getTableData();
};
const dialogSuccess2 = () => {
state.dialogVisible2 = false; state.dialogVisible2 = false;
getTableData(); getTableData();
}; };
const addData = () => { const addData = () => {
state.formData = { state.formData = {
name: '', name: '',
@ -243,6 +258,11 @@ export default {
state.dialogVisible1 = true; state.dialogVisible1 = true;
}; };
const viewData = (item) => {
state.dialogVisible2 = true;
state.formData = JSON.parse(JSON.stringify(item));
}
const changeStatus = async (item) => { const changeStatus = async (item) => {
console.log(item.enable); console.log(item.enable);
const param = { const param = {
@ -258,7 +278,7 @@ export default {
}; };
const openPz = (item) => { const openPz = (item) => {
state.dialogVisible2 = true; state.dialogVisible3 = true;
} }
return { return {
@ -272,9 +292,10 @@ export default {
changeStatus, changeStatus,
dialogClose1, dialogClose1,
dialogSuccess1, dialogSuccess1,
dialogClose2, dialogClose3,
dialogSuccess2, dialogSuccess3,
openPz openPz,
viewData
}; };
}, },
}; };