[FEAT]:

1.编写设备管理 增删改查

PVDEMCSUI/.env.production

@@ -1,2 +1,4 @@
 # VITE_BASE_API=http://192.168.10.246:9001/smart
-VITE_BASE_API=http://10.34.48.206:9000/smart
+# VITE_BASE_API=http://10.34.48.206:9000/smart
+
+VITE_BASE_API=/api # XG

PVDEMCSUI/src/Utils/helper.ts

@@ -413,4 +413,21 @@ export default class helper {
     }
     return textStatus;
   };
+
+  // 设备状态,运行:Run，待机:Stop，报警:Alarm
+  static getEquipmentState = (val: any) => {
+    let textStatus = '';
+    switch (val) {
+      case 'Run':
+        textStatus = '运行';
+        break;
+      case 'Stop':
+        textStatus = '待机';
+        break;
+      case 'Alarm':
+        textStatus = '报警';
+        break;
+    }
+    return textStatus;
+  };
 }

PVDEMCSUI/src/api/equipment/equipmentApi.ts

@@ -0,0 +1,39 @@
+import { request } from '../../boot/axios';
+import { Pagination } from '../class';
+import { EquipmentSearchEntity, EquipmentEntity } from './model/equipment';
+const pathName = 'Equipment/';
+
+class EquipmentApi {
+  // 获取系统参数设置分页列表 configName: string, configKey: string, page: any, size: any
+  getPage = (val: Pagination<EquipmentSearchEntity>) => {
+    let format = `?page=${val.page}&size=${val.rowsPerPage}`;
+    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.activated) {
+      format += `&activated=${val.data.activated}`;
+    }
+    return request.get(`${pathName}GetEquipmentPageList${format}`);
+  };
+  // 添加
+  add = (val: EquipmentEntity) => {
+    return request.post(`${pathName}AddEquipment`, val);
+  };
+  // 修改
+  edit = (val: EquipmentEntity) => {
+    return request.post(`${pathName}UpdateEquipment`, val);
+  };
+  // 删除
+  delete = (val: any) => {
+    return request.post(`${pathName}DeleteEquipment`, val);
+  };
+}
+const equipmentApi = new EquipmentApi();
+
+export { equipmentApi };

PVDEMCSUI/src/api/equipment/model/equipment.ts

@@ -0,0 +1,16 @@
+export class EquipmentSearchEntity {
+  equipmentName!: string;
+  equipmentCode!: string;
+  equipmentType!: string;
+  activated!: boolean;
+}
+
+export class EquipmentEntity {
+  id!: string;
+  equipmentCode!: string;
+  equipmentName!: string;
+  equipmentType!: string;
+  state!: string;
+  activated!: string;
+  remark!: string;
+}

PVDEMCSUI/src/layouts/MainScreenLayout.vue

@@ -78,8 +78,13 @@
                                 <div class="text-subtitle2 q-mt-sm q-mb-sm">
                                     Hi! {{ user.userName }}
                                 </div>
-                                <q-btn color="primary" label="系统设置" push v-close-popup icon="settings"
-                                    :to="{ name: 'sysConfig' }">
+                                <q-btn color="primary" label="设备管理" push v-close-popup icon="device"
+                                    :to="{ name: 'equipment' }">
+                                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
+                                        content-style="font-size: 12px">设备管理</q-tooltip>
+                                </q-btn>
+                                <q-btn style="margin-top: 5px" color="primary" label="系统参数" push v-close-popup
+                                    icon="settings" :to="{ name: 'sysConfig' }">
                                     <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                         content-style="font-size: 12px">系统参数设置</q-tooltip>
                                 </q-btn>

PVDEMCSUI/src/pages/equipment/components/addOrEditDialog.vue

@@ -0,0 +1,116 @@
+<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.equipmentCode" 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.equipmentName" 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.equipmentType"
+                                :options="equipmentTypeList" 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="设备启停用"
+                                :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.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 { equipmentApi } from 'src/api/equipment/equipmentApi';
+import { EquipmentEntity } from 'src/api/equipment/model/equipment';
+import { ref } from 'vue';
+
+// const props = defineProps<{
+//   areaPropertyList: any[];
+//   warehouseList: any[];
+// }>();
+const emit = defineEmits(['refresh']);
+
+const equipmentTypeList = ref([
+    { label: 'Ionbond', value: 'Ionbond' },
+    { label: 'Balzers', value: 'Balzers' },
+    { label: 'Cemecon', value: 'Cemecon' },
+])
+
+const activatedList = ref([
+    { label: '停用', value: '0' },
+    { label: '启用', value: '1' },
+])
+
+//新增或修改
+const selectVis = ref(false);
+const visible = ref(false);
+const addOrEditFormTitle = ref('');
+
+const addOrEditFormData = ref(new EquipmentEntity());
+const clickForm = (e?: any) => {
+    if (visible.value) {
+        addOrEditFormData.value = new EquipmentEntity();
+    } else {
+        if (e) {
+            //获取class 添加弹窗文本（新增/编辑）
+            addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
+            addOrEditFormTitle.value = '修改设备';
+            selectVis.value = true;
+        } else {
+            addOrEditFormTitle.value = '新增设备';
+            addOrEditFormData.value.activated = '1';
+            selectVis.value = false;
+        }
+    }
+    visible.value = !visible.value;
+};
+
+const myForm = ref();
+const submitForm = () => {
+    myForm.value.validate().then((success: any) => {
+        if (success) {
+            if (addOrEditFormData.value.id !== undefined) {
+                equipmentApi.edit(addOrEditFormData.value).then(() => {
+                    clickForm();
+                    emit('refresh');
+                });
+            } else {
+                equipmentApi.add(addOrEditFormData.value).then(() => {
+                    clickForm();
+                    emit('refresh');
+                });
+            }
+        }
+    });
+};
+defineExpose({
+    clickForm,
+});
+</script>

PVDEMCSUI/src/pages/equipment/index.vue

@@ -0,0 +1,201 @@
+<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.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-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="equipmentCode" :props="props">{{
+                                        props.row.equipmentCode
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="equipmentName" :props="props">{{
+                                        props.row.equipmentName
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="equipmentType" :props="props">{{
+                                        props.row.equipmentType
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="state" :props="props">{{ helper.getEquipmentState(
+                                        props.row.state)
+                                    }}</q-td>
+                                    <q-td style="font-size: 16px;" key="activated" :props="props">{{ props.row.activated
+                                    }}</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="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>
+
+    <!-- 系统参数设置 -->
+    <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 { equipmentApi } from '../../api/equipment/equipmentApi';
+import { EquipmentSearchEntity } from '../../api/equipment/model/equipment';
+import { Pagination, cconvert } from 'src/api/class';
+import customDialog from 'src/components/customDialog.vue';
+import addOrEditDialog from 'src/pages/equipment/components/addOrEditDialog.vue'
+import helper from 'src/Utils/helper';
+
+//公共
+const equipmentTypeList = ref([
+    { label: 'Ionbond', value: 'Ionbond' },
+    { label: 'Balzers', value: 'Balzers' },
+    { label: 'Cemecon', value: 'Cemecon' },
+])
+const activatedList = ref([
+    { label: '停用', value: '0' },
+    { label: '启用', value: '1' },
+])
+const pagination = ref(new Pagination(new EquipmentSearchEntity()));
+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: 'equipmentCode',
+        align: 'center',
+        label: '设备编码',
+        field: 'equipmentCode',
+        headerClasses: 'text-h4 text-weight-bold',
+        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: 'configType', align: 'center', label: '是否系统内置', field: 'configType', 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 list = ref([]);
+
+onMounted(() => {
+    getPage();
+})
+
+const reFresh = () => {
+    pagination.value.data = new EquipmentSearchEntity();
+    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 = () => {
+    equipmentApi.getPage(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) => {
+    equipmentApi.delete(e.id).then(() => {
+        getPage();
+    });
+};
+
+</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>

PVDEMCSUI/src/pages/sysConfig/components/addOrEditDialog.vue

@@ -46,17 +46,9 @@
     </q-dialog>
 </template>
 <script lang="ts" setup>
-import { init } from 'src/Utils/filterUtils';
 import { sysConfigApi } from 'src/api/sysConfig/sysConifgApi';
 import { SysConfigEntity } from 'src/api/sysConfig/model/sysConfig';
 import { ref } from 'vue';
-import {
-    filterFunction,
-    filterOption,
-    filterLabel,
-    filterValue,
-} from 'src/Utils/filterUtils';
-
 
 // const props = defineProps<{
 //   areaPropertyList: any[];
@@ -74,8 +66,6 @@ const selectVis = ref(false);
 const visible = ref(false);
 const addOrEditFormTitle = ref('');
 
-init();
-
 const addOrEditFormData = ref(new SysConfigEntity());
 const clickForm = (e?: any) => {
     if (visible.value) {

PVDEMCSUI/src/router/routes.ts

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