1.添加PLC控制器、PLC点位增删改查 功能
main
liuhr 2 years ago
parent dc67e252b7
commit aeb237470c

@ -433,4 +433,21 @@ export default class helper {
}
return textStatus;
};
static params = (obj: any) => {
let result = '';
let item;
for (item in obj) {
if (
(obj[item] && String(obj[item])) ||
(item == 'activated' && obj[item] != undefined)
) {
result += `&${item}=${obj[item]}`;
}
}
if (result) {
result = '?' + result.slice(1);
}
return result;
};
}

@ -0,0 +1,112 @@
import helper from 'src/Utils/helper';
import { request } from '../../boot/axios';
import { Pagination } from '../class';
import {
DeivceSearchEntity,
DeivceEntity,
DeivcePointSearchEntity,
DeivcePointEntity
} from './model/deivce';
const pathName = 'Device/';
class DeviceApi {
// PLC控制器 分页
getDevicePageList = (val: Pagination<DeivceSearchEntity>) => {
let format = `?page=${val.page}&size=${val.rowsPerPage}`;
if (val.data.deviceCode) {
format += `&deviceCode=${val.data.deviceCode}`;
}
if (val.data.deviceName) {
format += `&deviceName=${val.data.deviceName}`;
}
if (val.data.activated != undefined && val.data.activated != null) {
format += `&activated=${val.data.activated}`;
}
return request.get(`${pathName}GetDevicePageList${format}`);
};
// 添加PLC控制器
addDevice = (val: DeivceEntity) => {
return request.post(`${pathName}AddDevice`, val);
};
// 修改PLC控制器
updateDevice = (val: DeivceEntity) => {
return request.post(`${pathName}UpdateDevice`, val);
};
// 删除PLC控制器
deleteDevice = (val: any) => {
return request.post(`${pathName}DeleteDevice?id=${val}`);
};
// 获取PLC控制器列表
getDeviceInfoList = (val: DeivceSearchEntity) => {
const format = helper.params(val);
return request.get(`${pathName}GetDeviceInfoList${format}`);
};
// 获取PLC控制器明细
getDeviceDetail = (val: any) => {
return request.get(`${pathName}GetDeviceDetail?id=${val}`);
};
// PLC控制器点位 分页
getDevicePointPageList = (val: Pagination<DeivcePointSearchEntity>) => {
let format = `?page=${val.page}&size=${val.rowsPerPage}`;
if (val.data.deviceId) {
format += `&deviceId=${val.data.deviceId}`;
}
if (val.data.deviceCode) {
format += `&deviceCode=${val.data.deviceCode}`;
}
if (val.data.deviceName) {
format += `&deviceName=${val.data.deviceName}`;
}
if (val.data.equipmentName) {
format += `&equipmentName=${val.data.equipmentName}`;
}
if (val.data.equipmentCode) {
format += `&equipmentCode=${val.data.equipmentCode}`;
}
if (val.data.equipmentType) {
format += `&equipmentType=${val.data.equipmentType}`;
}
if (val.data.pointCode) {
format += `&pointCode=${val.data.pointCode}`;
}
if (val.data.pointName) {
format += `&pointName=${val.data.pointName}`;
}
if (val.data.activated != undefined && val.data.activated != null) {
format += `&activated=${val.data.activated}`;
}
return request.get(`${pathName}GetDevicePointPageList${format}`);
};
// 获取PLC控制器点位列表
getDevicePointList = (val: DeivcePointSearchEntity) => {
debugger;
const format = helper.params(val);
return request.get(`${pathName}GetDevicePointList${format}`);
};
// 获取PLC控制器点位明细
getDevicePointDetail = (val: any) => {
return request.get(`${pathName}GetDevicePointDetail?id=${val}`);
};
// 添加PLC控制器点位
addDevicePoint = (val: DeivcePointEntity) => {
return request.post(`${pathName}AddDevicePoint`, val);
};
// 修改PLC控制器点位
updateDevicePoint = (val: DeivcePointEntity) => {
return request.post(`${pathName}UpdateDevicePoint`, val);
};
// 删除PLC控制器点位
deleteDevicePoint = (val: any) => {
return request.post(`${pathName}DeleteDevicePoint?id=${val}`);
};
}
const deviceApi = new DeviceApi();
export { deviceApi };

@ -0,0 +1,52 @@
// PLC控制器
export class DeivceSearchEntity {
deviceCode!: string;
deviceName!: string;
activated!: boolean;
}
// PLC控制器
export class DeivceEntity {
id!: string;
deviceCode!: string; // 控制器编号
deviceName!: string; // 控制器名称
activated!: boolean; // 控制器状态,1启用0停用
protocol!: string; // 控制器协议:PLC,HTTP,Socket
host!: string; // 控制器主机地址
port!: number; // 控制器主机端口
remark!: string; // 备注
isConnected!: boolean; // 设备连接状态
}
// PLC控制器点位
export class DeivcePointSearchEntity {
deviceId!: string;
deviceCode!: string;
deviceName!: string;
equipmentName!: string;
equipmentCode!: string;
equipmentType!: string;
pointCode!: string;
pointName!: string;
activated!: boolean;
}
// PLC控制器点位
export class DeivcePointEntity {
id!: string;
deviceId!: string;
deviceCode!: string;
deviceName!: string;
equipmentId!: string;
equipmentCode!: string;
equipmentName!: string;
equipmentType!: string;
actionType!: string;
pointCode!: string;
pointName!: string;
address!: string;
dataType!: string;
activated!: boolean;
remark!: string;
objectValue!: string;
}

@ -1,3 +1,4 @@
import helper from 'src/Utils/helper';
import { request } from '../../boot/axios';
import { Pagination } from '../class';
import { EquipmentSearchEntity, EquipmentEntity } from './model/equipment';
@ -16,11 +17,24 @@ class EquipmentApi {
if (val.data.equipmentType) {
format += `&equipmentType=${val.data.equipmentType}`;
}
if (val.data.activated) {
if (val.data.activated != undefined && val.data.activated != null) {
format += `&activated=${val.data.activated}`;
}
return request.get(`${pathName}GetEquipmentPageList${format}`);
};
// 获取设备列表
getEquipmentList = (val: EquipmentSearchEntity) => {
debugger;
const format = helper.params(val);
return request.get(`${pathName}GetEquipmentList${format}`);
};
// 获取设备明细
getEquipmentDetail = (val: any) => {
return request.get(`${pathName}GetEquipmentDetail?id=${val}`);
};
// 添加
add = (val: EquipmentEntity) => {
return request.post(`${pathName}AddEquipment`, val);

@ -78,10 +78,10 @@
<div class="text-subtitle2 q-mt-sm q-mb-sm">
Hi! {{ user.userName }}
</div>
<q-btn color="primary" label="设备管理" push v-close-popup icon="img:statics/icons/PLC.png"
:to="{ name: 'equipment' }">
<q-btn color="primary" label="PLC管理" push v-close-popup icon="img:statics/icons/PLC.png"
:to="{ name: 'device' }">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">设备管理</q-tooltip>
content-style="font-size: 12px">PLC控制器管理</q-tooltip>
</q-btn>
<q-btn style="margin-top: 5px" color="primary" label="设备管理" push v-close-popup icon="apps"
:to="{ name: 'equipment' }">

@ -0,0 +1,147 @@
<template>
<q-dialog v-model="visible">
<q-card class="shadow-24" style="max-width: 40vw">
<q-card-section class="no-padding">
<q-card-actions class="bg-light-blue-10 text-white">
<q-card-actions class="text-h6">{{ addOrEditFormTitle }}</q-card-actions>
<q-space />
<q-btn dense flat round icon="close" @click="clickForm()">
<q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section>
<q-card-section style="max-width: 40vw" class="scroll">
<q-form ref="myForm">
<div class="row q-col-gutter-md">
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.deviceCode" disable
label="控制器编号" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.deviceName" disable
label="控制器名称" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined label="设备编码" readonly
v-model.trim="addOrEditFormData.equipmentCode" ref="equipmentCodeRef" :rules="[
(val) => (val !== null && val !== '' && val != undefined) || '请选择设备编码',
]">
<template v-slot:append>
<q-btn icon="search" round flat color="primary" @click="equipmentClick">
<q-tooltip>选择设备</q-tooltip>
</q-btn>
</template>
</q-input>
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.equipmentName" disable
label="设备名称" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.pointCode" label="点位编号"
:rules="[(val) => (val && val.length > 0) || '请填写点位编号']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.pointName" label="点位名称"
:rules="[(val) => (val && val.length > 0) || '请填写点位名称']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-select class="text-h6" outlined v-model="addOrEditFormData.activated"
:options="activatedList" emit-value map-options label="PLC点位是否启用" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.remark" label="备注"
:rules="[(val) => (val && val.length > 0) || '请填写备注']" />
</div>
</div>
</q-form>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn color="white" text-color="black" style="margin-right: 25px" @click="clickForm()">{{ '' }}</q-btn>
<q-btn color="primary" @click="submitForm()"></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<!-- 设备选择 -->
<equipmentDialog ref="selectEquipmentRef" @returnEquipment="returnEquipment" />
</template>
<script lang="ts" setup>
import { deviceApi } from 'src/api/device/deviceApi';
import { DeivcePointEntity } from 'src/api/device/model/device';
import { ref } from 'vue';
import equipmentDialog from './equipmentDialog.vue'
// const props = defineProps<{
// areaPropertyList: any[];
// warehouseList: any[];
// }>();
const emit = defineEmits(['refresh']);
const activatedList = ref([
{ label: '停用', value: false },
{ label: '启用', value: true },
])
//
const visible = ref(false);
const addOrEditFormTitle = ref('');
const addOrEditFormData = ref(new DeivcePointEntity());
const clickForm = (e?: any) => {
if (visible.value) {
addOrEditFormData.value = new DeivcePointEntity();
} else {
if (e.id) {
//class /
addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // ;
addOrEditFormTitle.value = '修改PLC点位';
} else {
addOrEditFormTitle.value = '新增PLC点位';
addOrEditFormData.value.deviceId = e.id;
addOrEditFormData.value.deviceCode = e.deviceCode
addOrEditFormData.value.deviceName = e.deviceName
addOrEditFormData.value.activated = true;
}
}
visible.value = !visible.value;
};
const myForm = ref();
const submitForm = () => {
myForm.value.validate().then((success: any) => {
if (success) {
if (addOrEditFormData.value.id !== undefined) {
deviceApi.updateDevicePoint(addOrEditFormData.value).then(() => {
clickForm();
emit('refresh');
});
} else {
deviceApi.addDevicePoint(addOrEditFormData.value).then(() => {
clickForm();
emit('refresh');
});
}
}
});
};
const selectEquipmentRef = ref();
const equipmentClick = () => {
selectEquipmentRef.value.clickForm();
}
//
const returnEquipment = (row: any) => {
addOrEditFormData.value.equipmentId = row.id
addOrEditFormData.value.equipmentCode = row.equipmentCode
addOrEditFormData.value.equipmentName = row.equipmentName
addOrEditFormData.value.equipmentType = row.equipmentType
}
defineExpose({
clickForm,
});
</script>

@ -0,0 +1,120 @@
<template>
<q-dialog v-model="visible">
<q-card class="shadow-24" style="max-width: 40vw">
<q-card-section class="no-padding">
<q-card-actions class="bg-light-blue-10 text-white">
<q-card-actions class="text-h6">{{ addOrEditFormTitle }}</q-card-actions>
<q-space />
<q-btn dense flat round icon="close" @click="clickForm()">
<q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section>
<q-card-section style="max-width: 40vw" class="scroll">
<q-form ref="myForm">
<div class="row q-col-gutter-md">
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.deviceCode" label="控制器编号"
:rules="[(val) => (val && val.length > 0) || '请填写控制器编号']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.deviceName" label="控制器名称"
:rules="[(val) => (val && val.length > 0) || '请填写控制器名称']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.host" label="控制器主机地址"
:rules="[(val) => (val && val.length > 0) || '请填写控制器主机地址']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" type="number" outlined v-model="addOrEditFormData.port" label="控制器主机端口"
:rules="[(val) => (val != null && val != undefined && val != '') || '请填写控制器主机端口']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-select class="text-h6" outlined v-model="addOrEditFormData.protocol" :options="protocolList"
emit-value map-options label="控制器协议"
:rules="[(val) => (val && val.length > 0) || '请选择控制器协议']" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-select class="text-h6" outlined v-model="addOrEditFormData.activated"
:options="activatedList" emit-value map-options label="控制器状态" />
</div>
<div class="col-xl-6 col-lg-12 col-sm-12">
<q-input class="text-h6" outlined v-model="addOrEditFormData.remark" label="备注"
:rules="[(val) => (val && val.length > 0) || '请填写备注']" />
</div>
</div>
</q-form>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn color="white" text-color="black" style="margin-right: 25px" @click="clickForm()">{{ '' }}</q-btn>
<q-btn color="primary" @click="submitForm()"></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script lang="ts" setup>
import { deviceApi } from 'src/api/device/deviceApi';
import { DeivceEntity } from 'src/api/device/model/device';
import { ref } from 'vue';
// const props = defineProps<{
// areaPropertyList: any[];
// warehouseList: any[];
// }>();
const emit = defineEmits(['refresh']);
const protocolList = ref([
{ label: 'PLC', value: 'PLC' },
{ label: 'HTTP', value: 'HTTP' },
{ label: 'Socket', value: 'Socket' },
])
const activatedList = ref([
{ label: '停用', value: false },
{ label: '启用', value: true },
])
//
const visible = ref(false);
const addOrEditFormTitle = ref('');
const addOrEditFormData = ref(new DeivceEntity());
const clickForm = (e?: any) => {
if (visible.value) {
addOrEditFormData.value = new DeivceEntity();
} else {
if (e) {
//class /
addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // ;
addOrEditFormTitle.value = '修改PLC控制器';
} else {
addOrEditFormTitle.value = '新增PLC控制器';
addOrEditFormData.value.activated = true;
}
}
visible.value = !visible.value;
};
const myForm = ref();
const submitForm = () => {
myForm.value.validate().then((success: any) => {
if (success) {
if (addOrEditFormData.value.id !== undefined) {
deviceApi.updateDevice(addOrEditFormData.value).then(() => {
clickForm();
emit('refresh');
});
} else {
deviceApi.addDevice(addOrEditFormData.value).then(() => {
clickForm();
emit('refresh');
});
}
}
});
};
defineExpose({
clickForm,
});
</script>

@ -0,0 +1,262 @@
<template>
<q-dialog v-model="visible" persistent>
<q-card style="max-width: 90vw">
<q-card-section class="no-padding">
<q-card-actions class="bg-light-blue-10 text-white">
<q-card-actions class="text-h6">PLC点位详情</q-card-actions>
<q-space />
<q-btn dense flat round icon="close" v-close-popup>
<q-tooltip content-class="bg-amber text-black shadow-4">{{
$t('index.close')
}}</q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section>
<q-card-section>
<div class="row q-col-gutter-md">
<!-- 刷新 查询 -->
<div class="col-xl-3 col-lg-3 col-sm-12">
<q-btn-group push glossy>
<q-btn push label="新增" icon="add" @click="addOrEditForm(null)">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">{{
'新增一条数据' }}</q-tooltip>
</q-btn>
<q-btn push label="刷新" icon="refresh" @click="reFresh()">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">清空所有条件并刷新数据</q-tooltip>
</q-btn>
<q-btn push label="查询" icon="search" @click="getPage()">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">按条件查询数据</q-tooltip>
</q-btn>
</q-btn-group>
</div>
<!-- 搜索条件 -->
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="控制器编号" outlined v-model="pagination.data.deviceCode" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="控制器名称" outlined v-model="pagination.data.deviceName" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="设备编号" outlined v-model="pagination.data.equipmentCode" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="设备名称" outlined v-model="pagination.data.equipmentName" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-select dense outlined v-model="pagination.data.equipmentType" :options="equipmentTypeList"
emit-value map-options label="设备类型" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="点位编码" outlined v-model="pagination.data.pointCode" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="点位名称" outlined v-model="pagination.data.pointName" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-select dense outlined v-model="pagination.data.activated" :options="activatedList" emit-value
map-options label="PLC点位是否启用" />
</div>
</div>
</q-card-section>
<q-separator />
<q-card-section style="width: 90vw" class="scroll">
<q-table class="my-sticky-header-column-table" :rows="tableData" row-key="id" separator="cell"
:loading="loading" :columns="columns" v-model:pagination="pagination" :table-style="{ height: '500px' }"
@request="onRequest" flat bordered>
<template v-slot:body="props">
<q-tr :props="props" class="tr_hover">
<q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
}}</q-td>
<q-td key="deviceCode" :props="props">{{
props.row.deviceCode
}}</q-td>
<q-td key="deviceName" :props="props">{{
props.row.deviceName
}}</q-td>
<q-td key="equipmentCode" :props="props">{{ props.row.equipmentCode }}</q-td>
<q-td key="equipmentName" :props="props">{{ props.row.equipmentName }}</q-td>
<q-td key="equipmentType" :props="props">{{ props.row.equipmentType }}</q-td>
<q-td key="pointCode" :props="props">
{{ props.row.pointCode }}
</q-td>
<q-td key="pointName" :props="props">{{
props.row.pointName
}}</q-td>
<q-td key="activated" :props="props">{{
props.row.activated
}}</q-td>
<q-td key="storageSapFlag" :props="props">{{
props.row.storageSapFlag
}}</q-td>
<q-td key="remark" :props="props">{{
props.row.remark
}}</q-td>
<q-td key="action" :props="props" style="width: 100px">
<q-btn round flat push color="info" icon="edit" @click="addOrEditForm(props.row)">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">编辑这条数据</q-tooltip>
</q-btn>
<q-btn round flat push color="negative" icon="delete" @click="openDelDialog(props.row)">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">删除这条数据</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn color="white" text-color="black" v-close-popup>关闭</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<!-- 添加修改 PLC点位 -->
<addOrEditDevicePointDialog ref="addOrEditDevicePointDialogRef" @refresh="getPage" />
<!-- 删除弹窗 -->
<customDialog ref="deleteDialogRef" @func="delFunc" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Pagination, cconvert } from 'src/api/class';
import { DeivcePointSearchEntity } from 'src/api/device/model/device';
import { deviceApi } from 'src/api/device/deviceApi';
import addOrEditDevicePointDialog from './addOrEditDevicePointDialog.vue'
import customDialog from 'src/components/customDialog.vue';
import helper from 'src/Utils/helper';
//
const visible = ref(false);
let loading = ref(false);
let tableData: any = ref([]);
const columns: any = ref([
{
name: 'index',
label: '#',
field: 'index',
align: 'center',
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
},
{
name: 'deviceCode',
align: 'center',
label: '控制器编号',
field: 'deviceCode',
headerClasses: 'text-h4 text-weight-bold',
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
},
{ name: 'deviceName', align: 'center', label: '控制器名称', field: 'deviceName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'equipmentCode', align: 'center', label: '设备编码', field: 'equipmentCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'equipmentName', align: 'center', label: '设备名称', field: 'equipmentName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'equipmentType', align: 'center', label: '设备类型', field: 'equipmentType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'pointCode', align: 'center', label: '点位编号', field: 'pointCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'pointName', align: 'center', label: '点位名称', field: 'pointName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'activated', align: 'center', label: 'PLC点位是否启用', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
]);
const pagination = ref(new Pagination(new DeivcePointSearchEntity()));
//
const deviceInfo = ref();
const equipmentTypeList = ref([
{ label: 'Ionbond', value: 'Ionbond' },
{ label: 'Balzers', value: 'Balzers' },
{ label: 'Cemecon', value: 'Cemecon' },
])
const activatedList = ref([
{ label: '停用', value: false },
{ label: '启用', value: true },
])
const clickForm = (e: any) => {
visible.value = true;
deviceInfo.value = JSON.parse(JSON.stringify(e)); // ;
pagination.value.data.deviceId = e.id;
getPage();
}
const getPage = () => {
loading.value = true;
deviceApi.getDevicePointPageList(pagination.value).then((res: any) => {
tableData.value = res.data;
cconvert(pagination.value, res);
}).finally(() => {
loading.value = false;
});
};
const onRequest = (props: any) => {
const { page, rowsPerPage, rowsNumber } = props.pagination;
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
getPage();
};
const reFresh = () => {
pagination.value.data.deviceCode = undefined
pagination.value.data.deviceName = undefined
pagination.value.data.equipmentCode = undefined
pagination.value.data.equipmentName = undefined
pagination.value.data.equipmentType = undefined
pagination.value.data.pointCode = undefined
pagination.value.data.pointName = undefined
pagination.value.data.activated = undefined
getPage();
};
const addOrEditDevicePointDialogRef = ref();
const addOrEditForm = (row: any) => {
let e = {};
if (row == null) {
e = {
devicdeId: deviceInfo.value.deviceId,
deviceCode: deviceInfo.value.deviceCode,
deviceName: deviceInfo.value.deviceCode
}
} else {
e = row
}
addOrEditDevicePointDialogRef.value.clickForm(e);
};
const deleteDialogRef = ref();
const openDelDialog = (row: any) => {
deleteDialogRef.value.open(row);
}
const delFunc = (e: any) => {
deviceApi.deleteDevicePoint(e.id).then(() => {
getPage();
});
};
defineExpose({
clickForm
})
</script>
<style scoped>
/* .tr_hover {
background: #aaaaaa;
} */
.tr_hover:hover {
background: #e8e8e8;
}
.click-hover {
cursor: pointer;
color: #1976d2;
}
.click-hover:hover {
color: #2196f3;
/* background-color: yellow; */
}
</style>

@ -0,0 +1,205 @@
<template>
<q-dialog v-model="visible" persistent>
<q-card style="max-width: 80vw">
<q-card-section class="no-padding">
<q-card-actions class="bg-light-blue-10 text-white">
<q-card-actions class="text-h6">选择设备</q-card-actions>
<q-space />
<q-btn dense flat round icon="close" v-close-popup>
<q-tooltip content-class="bg-amber text-black shadow-4">{{
$t('index.close')
}}</q-tooltip>
</q-btn>
</q-card-actions>
</q-card-section>
<q-card-section>
<div class="row q-col-gutter-md items-center">
<!-- 搜索条件 -->
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="设备编码" outlined v-model="equipmentSearchEntity.equipmentCode" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="设备名称" outlined v-model="equipmentSearchEntity.equipmentName" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-select dense outlined v-model="equipmentSearchEntity.equipmentType" :options="equipmentTypeList"
emit-value map-options label="设备类型" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-select dense outlined v-model="equipmentSearchEntity.activated" :options="activatedList"
emit-value map-options label="设备启停用" />
</div>
<div class="col-xl-3 col-lg-3 col-sm-12">
<q-btn label="查询" glossy rounded size="lg" color="primary" icon="search" class=" q-mr-md"
@click="getPage()" />
<q-btn label="重置" glossy rounded size="lg" icon="youtube_searched_for" @click="reFresh()">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">清空所有条件并刷新数据</q-tooltip>
</q-btn>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-section style="width: 80vw" class="scroll">
<!-- <div class="text-subtitle1 q-pb-md">
TIPS双击行自动带出物料凭证
TIPS选中行后<kbd>双击</kbd>
</div> -->
<!-- @rowDblclick="rowDoubleClick" -->
<q-table class="my-sticky-header-column-table" :rows="tableData" row-key="id" separator="cell"
:loading="loading" :columns="columns" :table-style="{ height: '520px' }" flat bordered>
<template v-slot:body="props">
<q-tr :props="props" class="tr_hover">
<q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
}}</q-td>
<q-td key="equipmentCode" :props="props">{{ props.row.equipmentCode }}</q-td>
<q-td key="equipmentName" :props="props">{{ props.row.equipmentName }}</q-td>
<q-td key="equipmentType" :props="props">{{ props.row.equipmentType }}</q-td>
<q-td key="state" :props="props">{{ helper.getEquipmentState(props.row.state) }}</q-td>
<q-td style="font-size: 16px;" key="activated" :props="props">{{ props.row.activated ==
true ? '启用' : '停用'
}}</q-td>
<q-td key="remark" :props="props">{{ props.row.remark }}</q-td>
<q-td key="action" :props="props" style="width: 100px, position:sticky">
<q-btn round flat push color="positive" icon="done" @click="select(props.row)">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">选择</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn color="white" text-color="black" v-close-popup>关闭</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { EquipmentSearchEntity } from 'src/api/equipment/model/equipment';
import { equipmentApi } from 'src/api/equipment/equipmentApi';
import helper from 'src/Utils/helper';
const emit = defineEmits(['returnEquipment']);
//
const equipmentTypeList = ref([
{ label: 'Ionbond', value: 'Ionbond' },
{ label: 'Balzers', value: 'Balzers' },
{ label: 'Cemecon', value: 'Cemecon' },
])
const activatedList = ref([
{ label: '停用', value: false },
{ label: '启用', value: true },
])
const visible = ref(false);
let loading = ref(false);
let tableData: any = ref();
const columns: any = ref([
{
name: 'index',
label: '#',
field: 'index',
align: 'center',
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
},
{ name: 'equipmentCode', align: 'center', label: '设备编码', field: 'equipmentCode', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'equipmentName', align: 'center', label: '设备名称', field: 'equipmentName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'equipmentType', align: 'center', label: '设备类型', field: 'equipmentType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'state', align: 'center', label: '设备状态', field: 'state', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'activated', align: 'center', label: '设备启停用', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
]);
const equipmentSearchEntity = ref(new EquipmentSearchEntity());
//
const clickForm = () => {
visible.value = true;
getPage();
}
const rowDoubleClick = (evt, row, index) => {
// if (row.executeFlag == 1) {
// Notify.create({
// position: 'top',
// message: '',
// icon: 'close',
// color: 'negative',
// })
// return
// }
visible.value = false;
emit('returnEquipment', row)
}
const select = (row: any) => {
// if (row.executeFlag == 1) {
// Notify.create({
// position: 'top',
// message: '',
// icon: 'close',
// color: 'negative',
// })
// return
// }
visible.value = false;
emit('returnEquipment', row)
}
const getPage = () => {
loading.value = true;
equipmentApi.getEquipmentList(equipmentSearchEntity.value).then((res) => {
tableData.value = res;
}).finally(() => {
loading.value = false;
});
};
const reFresh = () => {
equipmentSearchEntity.value = new EquipmentSearchEntity();
getPage();
};
defineExpose({
clickForm
})
</script>
<style scoped>
/* .tr_hover {
background: #aaaaaa;
} */
.tr_hover:hover {
background: #e8e8e8;
}
.click-hover {
cursor: pointer;
color: #1976d2;
}
.click-hover:hover {
color: #2196f3;
/* background-color: yellow; */
}
kbd {
white-space: nowrap;
display: inline-block;
padding: 2px 4px 4px;
line-height: 1;
font-size: 0.8em;
color: #616161;
background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
border-radius: 4px;
box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff,
0 1px 2px 1px #1e235a66;
margin: 0 0.2em;
}
</style>

@ -0,0 +1,209 @@
<template>
<transition appear enter-active-class="animated fadeIn">
<q-card class="shadow-24">
<!-- 搜索条件 -->
<q-card-section>
<div class="row q-col-gutter-md">
<!-- 刷新 查询 -->
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-btn-group push glossy>
<q-btn push label="新增" icon="add" @click="addOrEditForm()">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">{{
'新增一条数据' }}</q-tooltip>
</q-btn>
<q-btn push label="刷新" icon="refresh" @click="reFresh()">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">清空所有条件并刷新数据</q-tooltip>
</q-btn>
<q-btn push label="查询" icon="search" @click="getPage()">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">按条件查询数据</q-tooltip>
</q-btn>
</q-btn-group>
</div>
<!-- 搜索条件 -->
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="控制器编号" outlined v-model="pagination.data.deviceCode" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-input dense label="控制器名称" outlined v-model="pagination.data.deviceName" />
</div>
<div class="col-xl-2 col-lg-2 col-sm-12">
<q-select dense outlined v-model="pagination.data.activated" :options="activatedList" emit-value
map-options label="控制器状态" />
</div>
</div>
</q-card-section>
<q-card-section style="padding:0 10px 15px 10px;">
<div class="row q-col-gutter-md">
<div class="col-xl-12 col-lg-12 col-sm-12">
<q-table class="my-sticky-header-column-table" :rows="list" row-key="id" separator="cell"
:loading="loading" :columns="columns" @request="onRequest" v-model:pagination="pagination"
:table-style="{ height: Screen.height - 190 + 'px' }" flat bordered
:rows-per-page-options="[20, 30, 40, 50, 100]">
<template v-slot:body="props">
<q-tr :props="props" class="tr_hover">
<q-td style="font-size: 16px;" key="index" :props="props">{{ props.rowIndex + 1
}}</q-td>
<q-td style="font-size: 16px;" key="deviceCode" :props="props">{{
props.row.deviceCode
}}</q-td>
<q-td style="font-size: 16px;" key="deviceName" :props="props">{{
props.row.deviceName
}}</q-td>
<q-td style="font-size: 16px;" key="protocol" :props="props">{{
props.row.protocol
}}</q-td>
<q-td style="font-size: 16px;" key="host" :props="props">{{
props.row.host
}}</q-td>
<q-td style="font-size: 16px;" key="port" :props="props">{{
props.row.port
}}</q-td>
<q-td style="font-size: 16px;" key="activated" :props="props">{{ props.row.activated ==
true ? '启用' : '停用'
}}</q-td>
<q-td style="font-size: 16px;" key="remark" :props="props">{{ props.row.remark }}</q-td>
<q-td key="action" :props="props" style="width: 100px">
<q-btn round flat push color="accent" icon="menu" @click="toDetail(props.row)"
class="text-weight-bold click-hover">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">查看PLC点位</q-tooltip>
</q-btn>
<q-btn round flat push color="info" icon="edit" @click="addOrEditForm(props.row)">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">编辑这条数据</q-tooltip>
</q-btn>
<q-btn round flat push color="negative" icon="delete"
@click="openDelDialog(props.row)">
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
content-style="font-size: 12px">删除这条数据</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</div>
</div>
</q-card-section>
</q-card>
</transition>
<!-- PLC点位 -->
<devicePointDialog ref="devicePointDialogRef" />
<!-- 系统参数设置 -->
<addOrEditDialog ref="addOrEdit" @refresh="getPage" />
<!-- 删除弹窗 -->
<customDialog ref="deleteDialogRef" @func="delFunc" />
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { Notify, Screen } from 'quasar';
import { deviceApi } from 'src/api/device/deviceApi';
import { DeivceSearchEntity } from '../../api/device/model/device';
import { Pagination, cconvert } from 'src/api/class';
import customDialog from 'src/components/customDialog.vue';
import addOrEditDialog from 'src/pages/device/components/addOrEditDialog.vue'
import devicePointDialog from './components/devicePointDialog.vue'
import helper from 'src/Utils/helper';
//
const activatedList = ref([
{ label: '停用', value: false },
{ label: '启用', value: true },
])
const pagination = ref(new Pagination(new DeivceSearchEntity()));
const loading = ref(false);
const columns = ref([
{
name: 'index',
label: '#',
field: 'index',
align: 'center',
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
},
{
name: 'deviceCode',
align: 'center',
label: '控制器编号',
field: 'deviceCode',
headerClasses: 'text-h4 text-weight-bold',
headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;',
},
{ name: 'deviceName', align: 'center', label: '控制器名称', field: 'deviceName', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'protocol', align: 'center', label: '控制器协议', field: 'protocol', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'host', align: 'center', label: '控制器主机地址', field: 'host', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'port', align: 'center', label: '控制器主机端口', field: 'port', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'activated', align: 'center', label: '控制器状态', field: 'activated', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'remark', align: 'center', label: '备注', field: 'remark', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
{ name: 'action', align: 'center', label: '操作', field: 'action', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' }
])
const list = ref([]);
onMounted(() => {
getPage();
})
const reFresh = () => {
pagination.value.data = new DeivceSearchEntity();
getPage();
};
const onRequest = (props: any) => {
const { page, rowsPerPage, rowsNumber } = props.pagination;
pagination.value.page = page;
pagination.value.rowsPerPage = rowsPerPage != 0 ? rowsPerPage : rowsNumber;
getPage();
};
const getPage = () => {
deviceApi.getDevicePageList(pagination.value).then((res: any) => {
list.value = res.data;
cconvert(pagination.value, res);
});
}
const addOrEdit = ref();
const addOrEditForm = (row?: any) => {
addOrEdit.value.clickForm(row);
};
const deleteDialogRef = ref();
const openDelDialog = (row: any) => {
deleteDialogRef.value.open(row);
}
const delFunc = (e: any) => {
deviceApi.deleteDevice(e.id).then(() => {
getPage();
});
};
const devicePointDialogRef = ref();
const toDetail = (row: any) => {
devicePointDialogRef.value.clickForm(row);
}
</script>
<style scoped>
/* .tr_hover {
background: #aaaaaa;
} */
.tr_hover:hover {
background: #e8e8e8;
}
.click-hover {
cursor: pointer;
color: #1976d2;
}
.click-hover:hover {
color: #2196f3;
/* background-color: yellow; */
}
</style>

@ -1,4 +1,4 @@
<template>
<!-- <template>
<q-page>
<q-card-section class="q-pa-md flex flex-top">
<q-tabs v-model="detaillink">
@ -26,4 +26,4 @@
import { ref } from 'vue';
const detaillink = ref('screen1');
</script>
-->

@ -51,6 +51,12 @@ const routes: RouteRecordRaw[] = [
component: () => import('pages/screen/screen4/index.vue'),
children: []
},
{
path: 'device',
name: 'device',
component: () => import('pages/device/index.vue'),
children: []
},
{
path: 'equipment',
name: 'equipment',

Loading…
Cancel
Save