282 lines
9.6 KiB
Vue
282 lines
9.6 KiB
Vue
<template>
|
|
<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.template_name }}</span>
|
|
<!-- <span>模板描述：{{ formData.template_description }}</span>
|
|
<span>模板类型：{{ templateData[formData.template_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="640" style="width: 100%" border stripe
|
|
:header-cell-style="{ background: '#F6F7FC' }" size="large">
|
|
<el-table-column type="index" label="序号" width="80" align="center" />
|
|
<el-table-column prop="point_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="point_type" label="点位类型" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span>{{ typeData[scope.row.point_type] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="register" label="寄存器" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span>{{ registerData[scope.row.register] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="point_description" label="点位描述" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="multiplier" label="缩放系数" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="point_unit" label="点位单位" align="center" show-overflow-tooltip>
|
|
</el-table-column>
|
|
<el-table-column prop="point_permissions" label="读写权限" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span>{{ scope.row.point_permissions == 1 ? '只读' : '可写' }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="200" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<el-button size="large" @click="editData(scope.row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button type="danger" size="large" @click="delData(scope.row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<AddPoint :type="type" :formData="formData1" :pointData="pointData" :dialogVisible="dialogVisible1"
|
|
v-if="dialogVisible1" @dialogClose="dialogVisible1 = false" @dialogSuccess="dialogSuccess1">
|
|
</AddPoint>
|
|
<ExportPoint :formData="formData1" :dialogVisible="dialogVisible2" v-if="dialogVisible2"
|
|
@dialogClose="dialogVisible2 = false" @dialogSuccess="dialogSuccess2"></ExportPoint>
|
|
</el-drawer>
|
|
</template>
|
|
<script>
|
|
import axios from "axios";
|
|
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";
|
|
import ExportPoint from "@/components/ExportPoint.vue";
|
|
export default {
|
|
components: {
|
|
AddPoint,
|
|
ExportPoint
|
|
},
|
|
props: ["formData", "dialogVisible", "templateData"],
|
|
emits: ["dialogClose", "dialogSuccess"],
|
|
setup(props, ctx) {
|
|
const state = reactive({
|
|
pointData: {},
|
|
formData1: {},
|
|
dialogVisible1: false,
|
|
dialogVisible2: false,
|
|
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'
|
|
},
|
|
registerData: {
|
|
1: 'coil_status',
|
|
2: 'input_status',
|
|
3: 'input_register',
|
|
4: 'holding_register'
|
|
},
|
|
type: 'I'
|
|
});
|
|
const visible = computed(() => {
|
|
return props.dialogVisible;
|
|
});
|
|
|
|
onMounted(() => {
|
|
getPointList();
|
|
});
|
|
|
|
const getPointList = async () => {
|
|
const parm = {
|
|
template_name: props.formData.template_name
|
|
}
|
|
const res = await infoApi.getP(parm);
|
|
if (res.code == 0) {
|
|
state.propertiesData = [];
|
|
const pointData = res.data.points;
|
|
for (let i in pointData) {
|
|
state.propertiesData.push(pointData[i]);
|
|
}
|
|
state.propertiesData = state.propertiesData.sort((a, b) => {
|
|
return (a.point_name > b.point_name ? 1 : -1)
|
|
});
|
|
} else {
|
|
ElMessage.error(res.data || res.message);
|
|
}
|
|
};
|
|
const closeDialog = () => {
|
|
ctx.emit("dialogClose");
|
|
};
|
|
|
|
const delData = (item) => {
|
|
ElMessageBox.confirm("确定删除该数据?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(async () => {
|
|
let param = {
|
|
template_name: props.formData.template_name,
|
|
point_name: item.point_name
|
|
}
|
|
const res = await infoApi.detP(param);
|
|
if (res.code == 0) {
|
|
ElMessage.success(res.message || "删除成功");
|
|
getPointList();
|
|
} else {
|
|
ElMessage.error(res.message | "删除失败");
|
|
}
|
|
})
|
|
.catch(() => {
|
|
ElMessage.info("已取消删除");
|
|
});
|
|
}
|
|
|
|
const manageData = () => {
|
|
state.dialogVisible1 = true;
|
|
state.formData1 = props.formData;
|
|
state.type = 'I';
|
|
state.pointData = {
|
|
point_name: '',
|
|
address: 36,
|
|
point_type: 1,
|
|
point_permissions: 1,
|
|
multiplier: 1,
|
|
point_unit: 'on',
|
|
register: 1
|
|
}
|
|
}
|
|
|
|
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 dialogSuccess2 = () => {
|
|
state.dialogVisible2 = false;
|
|
getPointList();
|
|
}
|
|
|
|
const importData = () => {
|
|
state.formData1 = props.formData;
|
|
state.dialogVisible2 = true;
|
|
}
|
|
|
|
const exportData = async () => {
|
|
|
|
axios({
|
|
method: "post",
|
|
url: '/template',
|
|
headers: {
|
|
"action": 53211,
|
|
'template_name': props.formData.template_name
|
|
},
|
|
responseType: 'blob',
|
|
}).then((response) => {
|
|
let fileName = response.headers['content-disposition'].split('filename=')[1];
|
|
const url = window.URL.createObjectURL(new Blob([response.data]));
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', `${decodeURI(fileName.split('"')[1])}`);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
}).catch();
|
|
}
|
|
|
|
return {
|
|
...toRefs(state),
|
|
visible,
|
|
closeDialog,
|
|
delData,
|
|
manageData,
|
|
dialogSuccess1,
|
|
dialogSuccess2,
|
|
importData,
|
|
exportData,
|
|
editData
|
|
};
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
}
|
|
|
|
.top-btn {
|
|
width: 100%;
|
|
margin: 10px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.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>
|
|
|