|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <Navbar title="设备信息" :is-go-back="false" />
|
|
|
+ <a-card>
|
|
|
+ <a-form ref="formRef" :model="formState">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item name="name" :label="'查询条件'">
|
|
|
+ <a-input v-model:value="formState.condition" placeholder="请输入终端名称或位置" @press-enter="searchDatas" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="2">
|
|
|
+ <a-button type="primary" :icon="h(SearchOutlined)" @click="searchDatas">搜索</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-card>
|
|
|
+ <CommonTable
|
|
|
+ ref="table" :data-source="dataSource" :columns="columns" :is-loading="isLoading" :total="total"
|
|
|
+ @get-pager="getPageParams"
|
|
|
+ >
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'status'">
|
|
|
+ <a-tag v-if="record.status" color="success">在线</a-tag>
|
|
|
+ <a-tag v-if="record.status === false" color="warning">离线</a-tag>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </CommonTable>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, h, onMounted } from 'vue';
|
|
|
+import { message } from 'ant-design-vue';
|
|
|
+import Common from '../common/Common.js';
|
|
|
+import CommonTable from '../common/CommonTable.vue';
|
|
|
+import { ajaxApi } from '../api/workflow/workflow.js';
|
|
|
+import { SearchOutlined } from '@ant-design/icons-vue';
|
|
|
+
|
|
|
+const table = ref();
|
|
|
+const isLoading = ref(false);
|
|
|
+const dataSource = ref([]);
|
|
|
+
|
|
|
+const formState = ref({
|
|
|
+ condition: '',
|
|
|
+});
|
|
|
+
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+const pagination = ref({
|
|
|
+ start: 1,
|
|
|
+ length: 20,
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ searchDatas();
|
|
|
+});
|
|
|
+
|
|
|
+// 查询,回到第一页
|
|
|
+const searchDatas = () => {
|
|
|
+ table.value.backFirstPage();
|
|
|
+};
|
|
|
+
|
|
|
+// 获取分页参数
|
|
|
+const getPageParams = (start, length) => {
|
|
|
+ pagination.value.start = (start - 1) * length;
|
|
|
+ pagination.value.length = length;
|
|
|
+ queryDevice();
|
|
|
+};
|
|
|
+
|
|
|
+// 查询终端数据
|
|
|
+const queryDevice = () => {
|
|
|
+ const params = {
|
|
|
+ condition: formState.value.condition,
|
|
|
+ range: { ...pagination.value },
|
|
|
+ };
|
|
|
+ isLoading.value = true;
|
|
|
+ const url = 'api/DeviceManagementResource/queryDeviceManagementDtoByNameAndPosition';
|
|
|
+ ajaxApi(url, params).then(
|
|
|
+ success => {
|
|
|
+ if (success.dataList && success.dataList.length > 0) {
|
|
|
+ dataSource.value = success.dataList;
|
|
|
+ total.value = success.totalSize;
|
|
|
+ } else {
|
|
|
+ total.value = 0;
|
|
|
+ dataSource.value = [];
|
|
|
+ }
|
|
|
+ isLoading.value = false;
|
|
|
+ },
|
|
|
+ error => {
|
|
|
+ isLoading.value = false;
|
|
|
+ Common.processException(error);
|
|
|
+ },
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+const columns = ref([
|
|
|
+ {
|
|
|
+ title: '终端名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '终端类型',
|
|
|
+ dataIndex: 'terminalTypeName',
|
|
|
+ key: 'terminalTypeName',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '终端位置',
|
|
|
+ dataIndex: 'position',
|
|
|
+ key: 'position',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+// 清空查询条件
|
|
|
+const clearInfo = () => {
|
|
|
+ formState.value.name = '';
|
|
|
+ formState.value.position = '';
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+:deep(.ant-card .ant-card-body) {
|
|
|
+ padding-bottom: 0px !important;
|
|
|
+}
|
|
|
+</style>
|
liuyanpeng