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

123

main
wljjp 2024-05-09 15:47:49 +08:00
parent 48dc219afc e66c6f116d
commit 5f77153757
9 changed files with 254 additions and 393 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/infoApi.js
View File

@ -57,7 +57,7 @@ const infoApi = {
},
// 更新模板
editMb(params) {
return postPBRequest('/template', params, 55200)
return postPBRequest('/template', params, 53200)
},
// 删除模板
delMb(params) {
@ -67,6 +67,10 @@ const infoApi = {
addP(params) {
return postPBRequest('/template', params, 53110, params.template_name)
},
// 编辑点位
editP(params) {
return postPBRequest('/template', params, 53210, params.template_name)
},
// 获取模板支持类型
getTemplateType(params) {
return postPBRequest('/template', params, 53001)
@ -110,6 +114,10 @@ const infoApi = {
addSet(params) {
return postPBRequest('/driver', params, 54110, params.driver_name)
},
// 更新设备
editSet(params) {
return postPBRequest('/driver', params, 54210, params.driver_name)
},
// 获取设备列表
getSet(params) {

251
src/components/AddPoint copy.vue
View File

@ -1,251 +0,0 @@
<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>

43
src/components/AddPoint.vue
View File

@ -2,10 +2,10 @@
<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-input v-model="addForm.name" placeholder="请输入点位名称" clearable :disabled="type !== 'I'" />
</el-form-item>
<el-form-item label="点位地址:" prop="address">
<el-input v-model="addForm.address" placeholder="请输入点位地址" clearable type="number"/>
<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="请选择点位类型">
@ -20,6 +20,17 @@
<el-form-item label="点位描述:" prop="description">
<el-input v-model="addForm.description" placeholder="请输入点位描述" clearable />
</el-form-item>
<el-form-item label="读写权限:" prop="permissions">
<el-select v-model="addForm.permissions" size="mini" placeholder="请选择读写权限">
<el-option v-for="item in perOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="缩放系数:" prop="multiplier">
<el-input v-model="addForm.multiplier" placeholder="请输入缩放系数" type="number" clearable />
</el-form-item>
<el-form-item label="点位单位:" prop="unit">
<el-input v-model="addForm.unit" placeholder="请输入点位单位" clearable />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -34,14 +45,12 @@ 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"],
props: ["formData", "dialogVisible", "pointData", "type"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const ruleFormRef = ref(null);
const state = reactive({
addForm: {
type: 1,
byte_order: 1
},
datatypeArr: [{
label: 'bool',
@ -120,11 +129,24 @@ export default {
label: 'LIT',
value: 13
}],
perOptions: [
{
label: '只读',
value: 1
},
{
label: '可写',
value: 2
}
],
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" }],
multiplier: [{ required: true, message: "请输入缩放系数", trigger: "blur" }],
unit: [{ required: true, message: "请输入点位单位", trigger: "blur" }],
permissions: [{ required: true, message: "请输入读写权限", trigger: "blur" }],
},
});
const visible = computed(() => {
@ -132,7 +154,7 @@ export default {
});
onMounted(() => {
state.addForm = props.pointData
});
const closeDialog = () => {
ctx.emit("dialogClose");
@ -149,14 +171,15 @@ export default {
const param = {
template_name: props.formData.name,
...state.addForm,
address: Number(state.addForm.address)
address: Number(state.addForm.address),
multiplier: Number(state.addForm.multiplier)
}
const res = await infoApi.addP(param);
const res = props.type === 'I' ? await infoApi.addP(param): await infoApi.editP(param);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
ctx.emit("dialogClose");
ctx.emit("dialogSuccess");
} else {
ElMessage.error(res.message);
ElMessage.error(res.data || res.message);
}
} else {
console.log("error submit!");

13
src/components/AddSet.vue
View File

@ -2,7 +2,7 @@
<el-dialog v-model="visible" title="设备管理" width="60%" :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-input v-model="addForm.name" placeholder="请输入点位名称" clearable :disabled="type!=='I'"/>
</el-form-item>
<el-form-item label="设备id:" prop="id">
<el-input v-model="addForm.id" placeholder="请输入设备id" clearable type="number" />
@ -31,16 +31,12 @@ 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"],
props: ["formData", "dialogVisible", "setData", "type"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const ruleFormRef = ref(null);
const state = reactive({
addForm: {
name: '',
template_name: '',
id: 1,
description: ''
},
modelArr: [],
rules: {
@ -54,6 +50,7 @@ export default {
});
onMounted(() => {
state.addForm = props.setData;
console.log(123, props.formData)
// 获取模板数据
getTxTemplate();
@ -97,10 +94,10 @@ export default {
...state.addForm,
id: Number(state.addForm.id)
}
const res = await infoApi.addSet(param);
const res = props.type === 'I' ? await infoApi.addSet(param): await infoApi.editSet(param);
if (res.code == 0) {
ElMessage.success(res.message || "请求成功");
ctx.emit("dialogClose");
ctx.emit("dialogSuccess");
} else {
ElMessage.error(res.message);
}

102
src/components/ViewPoint.vue
View File

@ -1,7 +1,24 @@
<template>
<el-dialog v-model="visible" title="点位管理" width="60%" :before-close="closeDialog">
<el-table :data="propertiesData" height="230" style="width: 100%" border stripe
<el-drawer size="65%" :modal-append-to-body="false" :destroy-on-close="true" :before-close="closeDialog"
v-model="visible" title="点位管理">
<el-card class="top-title">
<span>模板名称：{{ formData.name }}</span>
<span>模板描述：{{ formData.description }}</span>
<span>模板类型：{{ templateData[formData.type] }}</span>
<span>点位数量：{{ propertiesData.length }}</span>
</el-card>
<div class="top-btn">
<el-button type="primary" @click="manageData">
新增点位
</el-button>
<div>
<el-button type="primary" @click="importData"> 导入 </el-button>
<el-button type="primary" @click="exportData"> 导出 </el-button>
</div>
</div>
<el-table :data="propertiesData" height="740" 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="点位名称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="address" label="点位地址" align="center" show-overflow-tooltip>
@ -17,29 +34,49 @@
<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>
<el-table-column prop="multiplier" label="缩放系数" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="unit" label="点位单位" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="permissions" label="读写权限" align="center" show-overflow-tooltip>
<template #default="scope">
<span>{{ scope.row.permissions == 1 ? '只读' : '可写'}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180" show-overflow-tooltip>
<template #default="scope">
<el-button type="primary" @click="editData(scope.row)">
编辑
</el-button>
<el-button type="danger" @click="delData(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<AddPoint :type="type" :formData="formData1" :pointData="pointData" :dialogVisible="dialogVisible1" v-if="dialogVisible1"
@dialogClose="dialogVisible1 = false" @dialogSuccess="dialogSuccess1">
</AddPoint>
</el-drawer>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AddPoint from "@/components/AddPoint.vue";
export default {
props: ["formData", "dialogVisible"],
components: {
AddPoint
},
props: ["formData", "dialogVisible", "templateData"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const state = reactive({
pointData: {},
formData1: {},
dialogVisible1: false,
propertiesData: [],
typeData: {
1: 'bool',
@ -66,7 +103,8 @@ export default {
11: '1243',
12: 'BIG',
13: 'LIT'
}
},
type: 'I'
});
const visible = computed(() => {
return props.dialogVisible;
@ -119,12 +157,51 @@ export default {
});
}
const manageData = () => {
state.dialogVisible1 = true;
state.formData1 = props.formData;
state.type = 'I';
state.pointData = {
name: '',
address: 36,
type: 1,
byte_order: 1,
permissions: 1,
multiplier: 1,
unit: 'ppm'
}
}
const editData = (item) => {
state.dialogVisible1 = true;
state.formData1 = props.formData;
state.type = 'U';
state.pointData = JSON.parse(JSON.stringify(item));
}
const dialogSuccess1 = () => {
state.dialogVisible1 = false;
getPointList();
};
const importData = () => {
}
const exportData = () => {
}
return {
...toRefs(state),
visible,
closeDialog,
delData
delData,
manageData,
dialogSuccess1,
importData,
exportData,
editData
};
},
};
@ -142,6 +219,13 @@ export default {
}
}
.top-btn {
width: 100%;
margin: 10px 0;
display: flex;
justify-content: space-between;
}
.btns {
padding: 15px 0;
width: 100%;

85
src/components/ViewSet.vue
View File

@ -1,5 +1,21 @@
<template>
<el-dialog v-model="visible" title="设备管理" width="60%" :before-close="closeDialog">
<el-drawer size="65%" :modal-append-to-body="false" :destroy-on-close="true" :before-close="closeDialog"
v-model="visible" title="设备管理">
<el-card class="top-title">
<span>通讯名称：{{ formData.name }}</span>
<span>通讯描述：{{ formData.description }}</span>
<span>通信驱动：{{ qudongOptions[formData.type] }}</span>
<span>设备数量：{{ propertiesData.length }}</span>
</el-card>
<div class="top-btn">
<el-button type="primary" @click="manageData">
新增设备
</el-button>
<div>
<el-button type="primary" @click="importData"> 导入 </el-button>
<el-button type="primary" @click="exportData"> 导出 </el-button>
</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>
@ -12,26 +28,40 @@
<el-table-column prop="description" label="设备描述" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
<el-table-column label="操作" align="center" width="180" show-overflow-tooltip>
<template #default="scope">
<el-button type="primary" @click="editData(scope.row)">
编辑
</el-button>
<el-button type="danger" @click="delData(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<AddSet :type="type" :formData="formData1" :setData="setData" :dialogVisible="dialogVisible1" v-if="dialogVisible1"
@dialogClose="dialogVisible1 = false" @dialogSuccess="dialogSuccess1">
</AddSet>
</el-drawer>
</template>
<script>
import { onMounted, reactive, ref, toRefs, computed, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AddSet from "@/components/AddSet.vue";
export default {
props: ["formData", "dialogVisible"],
components: {
AddSet
},
props: ["formData", "dialogVisible", "qudongOptions"],
emits: ["dialogClose", "dialogSuccess"],
setup(props, ctx) {
const state = reactive({
propertiesData: [],
formData1: {},
setData: {},
dialogVisible1: false,
type: 'I'
});
const visible = computed(() => {
return props.dialogVisible;
@ -47,7 +77,7 @@ export default {
}
const res = await infoApi.getSet(parm);
if (res.code == 0) {
state.propertiesData = res.data;
state.propertiesData = res.data || [];
} else {
console.log(res);
}
@ -80,12 +110,48 @@ export default {
});
}
const manageData = () => {
state.dialogVisible1 = true;
state.formData1 = props.formData;
state.type = 'I';
state.setData = {
name: '',
id: 1,
description: ''
}
}
const editData = (item) => {
state.dialogVisible1 = true;
state.formData1 = props.formData;
state.type = 'U';
state.setData = JSON.parse(JSON.stringify(item));
}
const dialogSuccess1 = () => {
state.dialogVisible1 = false;
getSet();
};
const importData = () => {
}
const exportData = () => {
}
return {
...toRefs(state),
visible,
closeDialog,
delData
delData,
manageData,
dialogSuccess1,
importData,
exportData,
editData
};
},
};
@ -103,6 +169,13 @@ export default {
}
}
.top-btn {
width: 100%;
margin: 10px 0;
display: flex;
justify-content: space-between;
}
.btns {
padding: 15px 0;
width: 100%;

1
src/css/index.scss
View File

@ -64,7 +64,6 @@ s {
text-align: center;
}
.el-drawer {
width: 50% !important;
padding: 20px 15px;
}
.title-form {

33
src/views/Model.vue
View File

@ -10,17 +10,15 @@
<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>{{ templateData[scope.row.type]}}</span>
<span>{{ templateData[scope.row.type] }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="point_count" label="点位数量" width="240" align="center" show-overflow-tooltip />
<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)">
新增点位
</el-button>
<el-button type="info" @click="viewData(scope.row)">
点位查询
<el-button type="primary" @click="viewData(scope.row)">
点位
</el-button>
<el-button type="primary" @click="editData(scope.row)">
编辑
@ -32,13 +30,10 @@
</el-table-column>
</el-table>
</div>
<AddMb :type="type" :formData="formData" :templateData="templateData" :dialogVisible="dialogVisible" v-if="dialogVisible"
@dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
<AddMb :type="type" :formData="formData" :templateData="templateData" :dialogVisible="dialogVisible"
v-if="dialogVisible" @dialogClose="dialogClose" @dialogSuccess="dialogSuccess">
</AddMb>
<AddPoint :formData="formData1" :dialogVisible="dialogVisible1" v-if="dialogVisible1" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</AddPoint>
<ViewPoint :formData="formData1" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
<ViewPoint :formData="formData1" :templateData="templateData" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</ViewPoint>
</el-card>
@ -49,19 +44,17 @@ 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 AddPoint from "@/components/AddPoint.vue";
import ViewPoint from "@/components/ViewPoint.vue"
export default {
name: "model",
components: {
AddMb,
AddPoint,
ViewPoint
},
setup() {
const state = reactive({
dialogVisible: false,
dialogVisible1: false,
dialogVisible2: false,
tableData: [],
formData: {
@ -135,24 +128,17 @@ export default {
state.type = 'I';
};
const manageData = (item) => {
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();
};
@ -160,7 +146,6 @@ export default {
...toRefs(state),
editData,
delData,
manageData,
getTableData,
addData,
dialogSuccess,

109
src/views/Page.vue
View File

@ -4,39 +4,15 @@
<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' }"
>
<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="description"
label="通讯描述"
width="200"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="drive"
label="通讯驱动"
width="200"
align="center"
show-overflow-tooltip
>
<template #default="scope">
<span>{{ qudongOptions[scope.row.type]}}</span>
</template>
<el-table-column prop="name" 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="drive" label="通讯驱动" 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"
@ -45,40 +21,17 @@
align="center"
show-overflow-tooltip
/> -->
<el-table-column
prop="status"
label="通讯状态"
width="200"
align="center"
>
<el-table-column prop="status" label="通讯状态" width="200" align="center">
<template #default="scope">
<span
class="txStatusDiv"
:style="{
background: scope.row.status == 1 ? '#13ce66' : '#f8cecc',
}"
>{{ scope.row.status == 1 ? "正常" : "未连接" }}</span
>
<span class="txStatusDiv" :style="{
background: scope.row.status == 1 ? '#13ce66' : '#f8cecc',
}">{{ scope.row.status == 1 ? "正常" : "未连接" }}</span>
</template>
</el-table-column>
<el-table-column
prop="enable"
label="启用状态"
width="350"
align="center"
>
<el-table-column prop="enable" label="启用状态" width="350" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.enable"
inline-prompt
active-text="启用"
inactive-text="停用"
:active-value="false"
:inactive-value="true"
active-color="#13ce66"
inactive-color="red"
@change="changeStatus(scope.row)"
/>
<el-switch v-model="scope.row.enable" inline-prompt active-text="启用" inactive-text="停用" :active-value="false"
:inactive-value="true" active-color="#13ce66" inactive-color="red" @change="changeStatus(scope.row)" />
</template>
</el-table-column>
<el-table-column label="操作" align="center" show-overflow-tooltip>
@ -92,11 +45,8 @@
<el-button type="danger" @click="delData(scope.row)">
删除
</el-button>
<el-button type="info" @click="manageData(scope.row)">
新增设备
</el-button>
<el-button type="info" @click="viewData(scope.row)">
设备查询
<el-button type="primary" @click="viewData(scope.row)">
设备
</el-button>
</template>
</el-table-column>
@ -112,14 +62,6 @@
@dialogClose="dialogClose"
@dialogSuccess="dialogSuccess"
></AddData>
<AddSet
:formData="formData"
:dialogVisible="dialogVisible1"
v-if="dialogVisible1"
@dialogClose="dialogClose"
@dialogSuccess="dialogSuccess"
>
</AddSet>
<PzSet
:dialogVisible="dialogVisible3"
:formData="formData"
@ -129,8 +71,9 @@
@dialogClose="dialogClose3"
@dialogSuccess="dialogSuccess3"
>
</PzSet>
<ViewSet :formData="formData" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
<AddData :formData="formData" :type="type" :qudongOptions="qudongOptions" :dialogVisible="dialogVisible"
v-if="dialogVisible" @dialogClose="dialogClose" @dialogSuccess="dialogSuccess"></AddData>
<ViewSet :formData="formData" :qudongOptions="qudongOptions" :dialogVisible="dialogVisible2" v-if="dialogVisible2" @dialogClose="dialogClose"
@dialogSuccess="dialogSuccess">
</ViewSet>
</el-card>
@ -141,14 +84,12 @@ import { onMounted, reactive, ref, toRefs } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AddData from "@/components/AddData.vue";
import AddSet from "@/components/AddSet.vue";
import PzSet from "@/components/PzSet.vue";
import ViewSet from "@/components/ViewSet.vue";
export default {
name: "page",
components: {
AddData,
AddSet,
PzSet,
ViewSet
},
@ -172,14 +113,14 @@ export default {
});
// 获取通讯驱动
const getTxSupport = async () => {
const res = await infoApi.getTxSupport();
if (res.code == 0) {
state.qudongOptions = res.data;
console.log(123, state.qudongOptions)
}
};
const getTableData = async () => {
const param = {
@ -218,7 +159,7 @@ export default {
state.dialogVisible2 = false;
getTableData();
};
const addData = () => {
state.formData = {
@ -316,10 +257,12 @@ export default {
display: flex;
flex-direction: column;
}
.top-div {
display: flex;
justify-content: flex-end;
}
.txStatusDiv {
padding: 0 15px;
border-radius: 10px;