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

。。

main
wangqiujuan0808 2024-05-07 19:26:46 +08:00
parent 972993be58
commit e7d50d77bf
5 changed files with 547 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/infoApi.js
View File

@ -82,6 +82,10 @@ const infoApi = {
getP(params) {
return postPBRequest('/template', params, 56000)
},
// 删除点位
detP(params) {
return postPBRequest('/template', params, 56300)
},
// // 获取设备列表
// getSet(params) {
// return postJsonRequest('/tx/info', params)

251
src/components/AddPoint copy.vue Normal file
View File

@ -0,0 +1,251 @@
<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>模板类型：{{ templateData[1] }}</span>
</el-card>
<div class="btns">
<div>
<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>
</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="address" label="点位地址" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input v-model="scope.row.address" clearable />
</template>
</el-table-column>
<el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
<template #default="scope">
<el-select v-model="scope.row.type" size="mini">
<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="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
<template #default="scope">
<el-select v-model="scope.row.byte_order" size="mini">
<el-option v-for="item in byte_orderArr" :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>
<template #default="scope">
<el-input v-model="scope.row.multplier" clearable />
</template>
</el-table-column>
<el-table-column prop="unit" label="点位单位" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input v-model="scope.row.unit" clearable />
</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 { m_point, m_properties, mb_info, response} from '../proto/data/pd'
export default {
props: ["formData", "dialogVisible","templateData"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const state = reactive({
addForm: {},
propertiesData: [],
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'
}],
byte_orderArr: [{
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'
}]
});
const visible = computed(() => {
return props.dialogVisible;
});
onMounted(() => {
state.addForm = props.formData;
// 获取点位列表
getPointList();
});
const getPointList = async () => {
const parm = {
name: state.addForm.name
}
const res = await infoApi.getP(parm);
if (res.code == 0) {
const propArr = res.data || [];
state.propertiesData = [];
propArr.forEach(v => {
state.propertiesData.push({
name: v.name,
address: v.properties[0].value,
type: v.properties[1].value,
byte_order: v.properties[2].value,
multplier: v.properties[3].value,
unit: v.properties[4].value,
description: v.properties[5].value,
})
})
} else {
console.log(res);
}
};
const closeDialog = () => {
ctx.emit("dialogClose");
};
const importData = () => { };
const exportData = () => { };
const saveP = async () => {
if (state.propertiesData.length < 1) {
return ElMessage.error("请添加一条点位");
}
// const newArr = [];
// state.propertiesData.forEach(item => {
// })
// console.log(123, newArr)
const param = {
name: state.addForm.name,
type: state.addForm.type,
description: state.addForm.description,
points: state.propertiesData
}
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: '',
type: 'bool',
byte_order: 'null',
multplier: '',
unit: '',
description: ''
};
state.propertiesData.push(newRow);
}
const delData = (index) => {
state.propertiesData.splice(index, 1);
}
return {
...toRefs(state),
visible,
closeDialog,
importData,
exportData,
addRow,
saveP,
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>

275
src/components/AddPoint.vue
View File

@ -1,166 +1,139 @@
<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>模板类型：{{ templateData[1] }}</span>
</el-card>
<div class="btns">
<div>
<el-button type="primary" @click="saveP"> 保存 </el-button>
<el-dialog v-model="visible" title="点位管理" width="40%" :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 />
</el-form-item>
<el-form-item label="点位地址:" prop="address">
<el-input v-model="addForm.address" placeholder="请输入点位地址" clearable type="number"/>
</el-form-item>
<el-form-item label="点位类型:" prop="type">
<el-select v-model="addForm.type" size="mini" placeholder="请选择点位类型">
<el-option v-for="item in datatypeArr" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="字节顺序:" prop="byte_order">
<el-select v-model="addForm.byte_order" size="mini" placeholder="请选择字节顺序">
<el-option v-for="item in byte_orderArr" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="点位描述:" prop="description">
<el-input v-model="addForm.description" placeholder="请输入点位描述" clearable />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="closeDialog">取消</el-button>
</div>
<!-- <div>
<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>
<template #default="scope">
<el-input v-model="scope.row.name" clearable />
</template>
</el-table-column>
<el-table-column prop="address" label="点位地址" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input v-model="scope.row.address" clearable />
</template>
</el-table-column>
<el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
<template #default="scope">
<el-select v-model="scope.row.type" size="mini">
<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="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
<template #default="scope">
<el-select v-model="scope.row.byte_order" size="mini">
<el-option v-for="item in byte_orderArr" :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>
<template #default="scope">
<el-input v-model="scope.row.multplier" clearable />
</template>
</el-table-column>
<el-table-column prop="unit" label="点位单位" align="center" show-overflow-tooltip>
<template #default="scope">
<el-input v-model="scope.row.unit" clearable />
</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-button type="primary" @click="saveP"> 保存 </el-button>
</span>
</template>
</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 { m_point, m_properties, mb_info, response} from '../proto/data/pd'
export default {
props: ["formData", "dialogVisible","templateData"],
props: ["formData", "dialogVisible"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const ruleFormRef = ref(null);
const state = reactive({
addForm: {},
propertiesData: [],
addForm: {
type: 1,
byte_order: 1
},
datatypeArr: [{
label: 'bool',
value: 'bool'
value: 1
}, {
label: 'int16',
value: 'int16'
value: 2
}, {
label: 'int32',
value: 'int32'
value: 3
}, {
label: 'int64',
value: 4
},
{
label: 'unit16',
value: 'unit16'
value: 5
}, {
label: 'unit32',
value: 'unit32'
value: 6
},
{
label: 'unit64',
value: 7
}, {
label: 'float32',
value: 'float32'
value: 8
}, {
label: 'float64',
value: 'float64'
value: 9
}],
byte_orderArr: [{
label: 'null',
value: 'null'
value: 1
}, {
label: '12',
value: '12'
value: 2
}, {
label: '21',
value: '21'
}, {
label: '1234',
value: '1234'
value: 3
}, {
label: '4321',
value: '4321'
value: 4
},
{
label: '2143',
value: 5
},
{
label: '1234',
value: 6
},
{
label: '3412',
value: 7
}, {
label: 'ABCD',
value: 'ABCD'
label: '4312',
value: 8
}, {
label: 'DCBA',
value: 'DCBA'
}]
label: '3421',
value: 9
},
{
label: '2134',
value: 10
},
{
label: '1243',
value: 11
},
{
label: 'BIG',
value: 12
},
{
label: 'LIT',
value: 13
}],
rules: {
name: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
address: [{ required: true, message: "请输入点位地址", trigger: "blur" }],
type: [{ required: true, message: "请选择点位类型", trigger: "blur" }],
byte_order: [{ required: true, message: "请选择字节顺序", trigger: "blur" }],
},
});
const visible = computed(() => {
return props.dialogVisible;
});
onMounted(() => {
state.addForm = props.formData;
// 获取点位列表
getPointList();
});
const getPointList = async () => {
const parm = {
name: state.addForm.name
}
const res = await infoApi.getP(parm);
if (res.code == 0) {
const propArr = res.data || [];
state.propertiesData = [];
propArr.forEach(v => {
state.propertiesData.push({
name: v.name,
address: v.properties[0].value,
type: v.properties[1].value,
byte_order: v.properties[2].value,
multplier: v.properties[3].value,
unit: v.properties[4].value,
description: v.properties[5].value,
})
})
} else {
console.log(res);
}
};
const closeDialog = () => {
ctx.emit("dialogClose");
};
@ -170,54 +143,40 @@ export default {
const exportData = () => { };
const saveP = async () => {
if (state.propertiesData.length < 1) {
return ElMessage.error("请添加一条点位");
}
// const newArr = [];
// state.propertiesData.forEach(item => {
// })
// console.log(123, newArr)
const param = {
name: state.addForm.name,
type: state.addForm.type,
description: state.addForm.description,
points: state.propertiesData
}
const res = await infoApi.addP(param);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
// 获取数据
getPointList();
} else {
ElMessage.error(res.message);
}
console.log(ruleFormRef.value);
await ruleFormRef.value.validate(async (valid) => {
if (valid) {
const param = {
point_name: props.formData.name + '/' + state.addForm.name,
point: {
description: state.addForm.description,
address: Number(state.addForm.address),
type: state.addForm.type,
byte_order: state.addForm.byte_order
}
}
const res = await infoApi.addP(param);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
ctx.emit("dialogClose");
} else {
ElMessage.error(res.message);
}
} else {
console.log("error submit!");
}
});
};
const addRow = () => {
let newRow = {
name: '',
address: '',
type: 'bool',
byte_order: 'null',
multplier: '',
unit: '',
description: ''
};
state.propertiesData.push(newRow);
}
const delData = (index) => {
state.propertiesData.splice(index, 1);
}
return {
...toRefs(state),
visible,
closeDialog,
importData,
exportData,
addRow,
saveP,
delData
ruleFormRef
};
},
};

154
src/components/ViewPoint.vue Normal file
View File

@ -0,0 +1,154 @@
<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="address" label="点位地址" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="type" label="点位类型" align="center" show-overflow-tooltip>
<template #default="scope">
<span>{{ typeData[scope.row.type] }}</span>
</template>
</el-table-column>
<el-table-column prop="byte_order" label="字节顺序" align="center" show-overflow-tooltip>
<template #default="scope">
<span>{{ byteData[scope.row.byte_order] }}</span>
</template>
</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: [],
typeData: {
1: 'bool',
2: 'int16',
3: 'int32',
4: 'int64',
5: 'unit16',
6: 'unit32',
7: 'unit64',
8: 'float32',
9: 'float64'
},
byteData: {
1: 'null',
2: '12',
3: '21',
4: '4321',
5: '2143',
6: '1234',
7: '3412',
8: '4312',
9: '3421',
10: '2134',
11: '1243',
12: 'BIG',
13: 'LIT'
}
});
const visible = computed(() => {
return props.dialogVisible;
});
onMounted(() => {
getPointList();
});
const getPointList = async () => {
const parm = {
name: props.formData.name
}
const res = await infoApi.getP(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 = {
point_name: item.name
}
const res = await infoApi.detP(param);
if (res.code == 0) {
ElMessage.success(res.message || "删除成功");
getPointList();
} 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>

26
src/views/Model.vue
View File

@ -17,7 +17,10 @@
<el-table-column label="模板管理" align="center" show-overflow-tooltip>
<template #default="scope">
<el-button type="info" @click="manageData(scope.row)">
点位
新增点位
</el-button>
<el-button type="info" @click="viewData(scope.row)">
点位查询
</el-button>
<el-button type="primary" @click="editData(scope.row)">
编辑
@ -32,9 +35,12 @@
<AddMb :type="type" :formData="formData" :dialogVisible="dialogVisible" v-if="dialogVisible"
@dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
</AddMb>
<AddPoint :formData="formData1" :templateData="templateData" :dialogVisible="dialogVisible1" v-if="dialogVisible1" @dialogClose="dialogClose"
<AddPoint :formData="formData1" :dialogVisible="dialogVisible1" v-if="dialogVisible1" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</AddPoint>
<ViewPoint :formData="formData1" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</ViewPoint>
</el-card>
</template>
@ -43,18 +49,20 @@ 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 AddPoint from "@/components/AddPoint.vue";
import ViewPoint from "@/components/ViewPoint.vue"
export default {
name: "model",
components: {
AddMb,
AddPoint
AddPoint,
ViewPoint
},
setup() {
const state = reactive({
dialogVisible: false,
dialogVisible1: false,
dialogVisible2: false,
tableData: [],
formData: {
name: '',
@ -131,14 +139,21 @@ export default {
state.dialogVisible1 = true;
state.formData1 = item;
};
const viewData = (item) => {
state.dialogVisible2 = true;
state.formData1 = item;
}
const dialogClose = () => {
state.dialogVisible = false;
state.dialogVisible1 = false;
state.dialogVisible2 = false;
};
const dialogSuccess = () => {
state.dialogVisible = false;
state.dialogVisible1 = false;
state.dialogVisible2 = false;
getTableData();
};
return {
@ -149,7 +164,8 @@ export default {
getTableData,
addData,
dialogSuccess,
dialogClose
dialogClose,
viewData
};
},
};