You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
14 KiB
Vue
277 lines
14 KiB
Vue
<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">【{{ deviceInfo.deviceCode }}】-【{{ deviceInfo.deviceName }}】-【{{
|
|
deviceInfo.protocol }}】 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">{{ helper.getEquipmentType(props.row.equipmentType)
|
|
}}</q-td>
|
|
<q-td key="actionType" :props="props">{{ helper.getActionType(props.row.actionType)
|
|
}}</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="address" :props="props">{{
|
|
props.row.address
|
|
}}</q-td>
|
|
<q-td key="dataType" :props="props">{{
|
|
props.row.dataType
|
|
}}</q-td>
|
|
<q-td key="objectValue" :props="props">{{
|
|
props.row.objectValue
|
|
}}</q-td>
|
|
<q-td key="activated" :props="props">
|
|
<q-badge size="" style="font-size: 18px;height:30px;"
|
|
:color="props.row.activated == true ? 'green' : 'red'"
|
|
:label="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">
|
|
<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: 'actionType', align: 'center', label: '点位所属动作', field: 'actionType', 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: 'address', align: 'center', label: '点位地址', field: 'address', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
{ name: 'dataType', align: 'center', label: '字段类型', field: 'dataType', headerStyle: 'background-color: #5186ec;color: white;font-weight: bold;font-size:20px;' },
|
|
{ name: 'objectValue', align: 'center', label: '当前值', field: 'objectValue', 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: '国产炉', value: 'Homegrown' },
|
|
{ label: '进口炉', value: 'Import' }
|
|
])
|
|
const activatedList = ref([
|
|
{ label: '启用', value: true },
|
|
{ label: '停用', value: false }
|
|
])
|
|
|
|
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.deviceName
|
|
}
|
|
} else {
|
|
e = JSON.parse(JSON.stringify(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> |