[Feat 0000] 模型缩略图选择器开发

src/router/guard/index.ts

@@ -2,6 +2,7 @@ import type { Router, RouteLocationNormalized } from 'vue-router';
 import { useAppStoreWithOut } from '/@/store/modules/app';
 import { useUserStoreWithOut } from '/@/store/modules/user';
 import { useVentStore } from '/@/store/modules/vent';
+import { useModelFileStore } from '/@/store/modules/modelFile';
 import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
 import { AxiosCanceler } from '/@/utils/http/axios/axiosCancel';
 import { Modal, notification } from 'ant-design-vue';
@@ -64,6 +65,7 @@ function createPageGuard(router: Router) {
 // Used to handle page loading status
 function createPageLoadingGuard(router: Router) {
   const ventStore = useVentStore();
+  const modelFileStore = useModelFileStore();
   const userStore = useUserStoreWithOut();
   const appStore = useAppStoreWithOut();
   const { getOpenPageLoading } = useTransitionSetting();
@@ -77,6 +79,9 @@ function createPageLoadingGuard(router: Router) {
     if (!ventStore.allTableHeaderColumns) {
       await ventStore.setAllTableHeaderColumns();
     }
+    if (!modelFileStore.modelFileData) {
+      await modelFileStore.fetchModelFileData();
+    }
     if (unref(getOpenPageLoading)) {
       appStore.setPageLoadingAction(true);
       return true;

src/views/vent/deviceManager/comment/DeviceReportInfo.vue

@@ -8,81 +8,103 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, inject, onBeforeMount } from 'vue';
-import { BasicForm, useForm } from '/@/components/Form/index';
-import { FormSchema } from '/@/components/Form';
-import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
-import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
-import { list, updateReportInfo, sysList, sysInput } from '../../monitorManager/comment/comment.api';
-const deviceData = inject('formData') as any;
-const emit = defineEmits(['close', 'register']);
-const FormRef = ref();
-const tabType = ref('');
+  import { onMounted, ref, defineEmits, onUnmounted, watch, PropType, nextTick, inject, onBeforeMount } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { FormSchema } from '/@/components/Form';
+  import { getFormSchemaColumns } from '/@/hooks/web/useWebColumns';
+  import { list as substationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
+  import { list, updateReportInfo, sysList, sysInput } from '../../monitorManager/comment/comment.api';
+  const deviceData = inject('formData') as any;
+  const emit = defineEmits(['close', 'register']);
+  const FormRef = ref();
+  const tabType = ref('');
 
-const formSchema = ref<any[]>([]);
-const formData = ref(deviceData);
-const deviceTypeName = ref(deviceData.devicekind ? deviceData.devicekind : deviceData.strtype);
+  const formSchema = ref<any[]>([]);
+  const formData = ref(deviceData);
+  const deviceTypeName = ref(deviceData.devicekind ? deviceData.devicekind : deviceData.strtype);
 
-const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
-  const columnList: any[] = [];
-  tableHeaderColumns.forEach((item: any) => {
-    let columnsItem;
-    if (item.type == 1 || item.type == 10) {
-      columnsItem = {
-        label: item.des, //_dictText
-        field: item.monitorcode,
-        component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
-      };
-    } else {
-      if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
-          component: 'ApiSelect',
-          componentProps: {
-            api: substationList,
-            labelField: 'strname',
-            valueField: 'id',
-          },
-        };
-      }
-      if (item.type == 3) {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
-          component: 'RadioGroup',
-          defaultValue: 1,
-          componentProps: () => {
-            return {
+  const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
+    const columnList: any[] = [];
+    tableHeaderColumns.forEach((item: any) => {
+      let columnsItem;
+      switch (item.type) {
+        case 1:
+          columnsItem = { label: item.des, field: item.monitorcode, component: 'Input' };
+          break;
+        case 10:
+          columnsItem = { label: item.des, field: item.monitorcode, component: 'InputTextArea' };
+          break;
+        case 2:
+          if (item.monitorcode !== 'nsubstationid') break;
+          columnsItem = {
+            label: item.des,
+            field: item.monitorcode,
+            component: 'ApiSelect',
+            componentProps: { api: substationList, labelField: 'strname', valueField: 'id' },
+          };
+          break;
+        case 3:
+          columnsItem = {
+            label: item.des,
+            field: item.monitorcode,
+            component: 'RadioGroup',
+            defaultValue: 1,
+            componentProps: () => ({
               options: [
                 { label: '是', value: 1, key: '1' },
                 { label: '否', value: 0, key: '2' },
               ],
               stringToNumber: true,
-            };
-          },
-        };
+            }),
+          };
+          break;
+        case 4:
+          columnsItem = {
+            label: item.des,
+            field: item.monitorcode,
+            component: 'JDictSelectTag',
+            componentProps: { dictCode: item.dict, placeholder: '请选择' },
+          };
+          break;
+      }
+      if (!!columnsItem) {
+        columnList.push(columnsItem);
       }
-      if (item.type == 4) {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
+    });
+    formSchema.value = columnList;
+    if (tabType.value === 'deviceInfo') {
+      formSchema.value.unshift(
+        {
+          label: '设备id', //_dictText
+          field: 'id',
+          component: 'Input',
+          componentProps: {
+            disabled: true,
+            show: false,
+          },
+        },
+        {
+          label: '点表',
+          field: 'strtype',
           component: 'JDictSelectTag',
           componentProps: {
-            dictCode: item.dict,
-            placeholder: '请选择',
-            // stringToNumber: false,
+            dictCode: `${devicetype.split('_')[0]}kind`,
+            placeholder: '请选择点表',
           },
-        };
-      }
-    }
-    columnList.push(columnsItem);
-  });
-  formSchema.value = columnList;
-  console.log(formSchema.value, 'sssssssssssssssssssss');
-  if (tabType.value === 'deviceInfo') {
-    formSchema.value.unshift(
-      {
+        }
+      );
+      formSchema.value.push({
+        label: '备用分站',
+        field: 'stationids',
+        component: 'ApiSelect',
+        componentProps: {
+          api: substationList,
+          labelField: 'strname',
+          valueField: 'id',
+        },
+      });
+    } else {
+      formSchema.value.unshift({
         label: '设备id', //_dictText
         field: 'id',
         component: 'Input',
@@ -90,87 +112,57 @@ const arrToFormColumns = (tableHeaderColumns = [], devicetype) => {
           disabled: true,
           show: false,
         },
-      },
-      {
-        label: '点表',
-        field: 'strtype',
-        component: 'JDictSelectTag',
-        componentProps: {
-          dictCode: `${devicetype.split('_')[0]}kind`,
-          placeholder: '请选择点表',
-        },
-      }
-    );
-    formSchema.value.push({
-      label: '备用分站',
-      field: 'stationids',
-      component: 'ApiSelect',
-      componentProps: {
-        api: substationList,
-        labelField: 'strname',
-        valueField: 'id',
-      },
-    });
-  } else {
-    formSchema.value.unshift({
-      label: '设备id', //_dictText
-      field: 'id',
-      component: 'Input',
-      componentProps: {
-        disabled: true,
-        show: false,
-      },
-    });
-  }
-};
+      });
+    }
+  };
 
-const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
-  schemas: <FormSchema[]>formSchema.value,
-  showActionButtonGroup: false,
-});
+  const [registerForm, { resetSchema, getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: <FormSchema[]>formSchema.value,
+    showActionButtonGroup: false,
+  });
 
-function getColumns() {
-  let formSchemaArr = getFormSchemaColumns(`${deviceData.devicekind ? deviceData.devicekind : deviceData.strtype}_input`) || [];
-  if (formSchemaArr && formSchemaArr.length < 1) {
-    const arr = deviceTypeName.value.split('_');
-    formSchemaArr = getFormSchemaColumns(arr[0] + '_input') || [];
+  function getColumns() {
+    let formSchemaArr = getFormSchemaColumns(`${deviceData.devicekind ? deviceData.devicekind : deviceData.strtype}_input`) || [];
+    if (formSchemaArr && formSchemaArr.length < 1) {
+      const arr = deviceTypeName.value.split('_');
+      formSchemaArr = getFormSchemaColumns(arr[0] + '_input') || [];
+    }
+    arrToFormColumns(formSchemaArr, deviceTypeName.value);
+    resetSchema(formSchema.value);
   }
-  arrToFormColumns(formSchemaArr, deviceTypeName.value);
-  resetSchema(formSchema.value);
-}
 
-async function onReset() {
-  await resetFields();
-  await setFieldsValue({ ...deviceData });
-}
+  async function onReset() {
+    await resetFields();
+    await setFieldsValue({ ...deviceData });
+  }
 
-async function handleSubmit() {
-  const data = await getFieldsValue();
-  if (!deviceData.devicekind) {
-    await sysInput(data);
-  } else {
-    await updateReportInfo(data);
+  async function handleSubmit() {
+    const data = await getFieldsValue();
+    if (!deviceData.devicekind) {
+      await sysInput(data);
+    } else {
+      await updateReportInfo(data);
+    }
   }
-}
 
-onBeforeMount(async () => {});
+  onBeforeMount(async () => {});
 
-onMounted(async () => {
-  getColumns();
-  let result;
-  if (!deviceData.devicekind) {
-    result = await sysList({ id: deviceData.id });
-  } else {
-    result = await list({ id: deviceData.id });
-  }
-  formData.value = result['records'][0] || [];
-  await setFieldsValue({
-    ...formData.value,
+  onMounted(async () => {
+    getColumns();
+    let result;
+    if (!deviceData.devicekind) {
+      result = await sysList({ id: deviceData.id });
+    } else {
+      result = await list({ id: deviceData.id });
+    }
+    formData.value = result['records'][0] || [];
+    await setFieldsValue({
+      ...formData.value,
+    });
   });
-});
-onUnmounted(() => {});
+  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-@import '/@/design/theme.less';
-@import '/@/design/vent/modal.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
 </style>

src/views/vent/deviceManager/deviceTable/index.vue

@@ -44,82 +44,72 @@
     const columnList: any[] = [];
     tableHeaderColumns.forEach((item: any) => {
       let columnsItem;
-      if (item.type == 1 || item.type == 10) {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
-          component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
-        };
-      } else {
-        if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
+      switch (item.type) {
+        case 1:
+          columnsItem = { label: item.des, field: item.monitorcode, component: 'Input' };
+          break;
+        case 10:
+          columnsItem = { label: item.des, field: item.monitorcode, component: 'InputTextArea' };
+          break;
+        case 2:
+          if (item.monitorcode !== 'nsubstationid') break;
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'ApiSelect',
-            componentProps: {
-              api: substationList,
-              labelField: 'strname',
-              valueField: 'id',
-            },
+            componentProps: { api: substationList, labelField: 'strname', valueField: 'id' },
           };
-        }
-        if (item.type == 3) {
+          break;
+        case 3:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'RadioGroup',
             defaultValue: 1,
-            componentProps: () => {
-              return {
-                options: [
-                  { label: '是', value: 1, key: '1' },
-                  { label: '否', value: 0, key: '2' },
-                ],
-                stringToNumber: true,
-              };
-            },
+            componentProps: () => ({
+              options: [
+                { label: '是', value: 1, key: '1' },
+                { label: '否', value: 0, key: '2' },
+              ],
+              stringToNumber: true,
+            }),
           };
-        }
-        if (item.type == 4) {
+          break;
+        case 4:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'JDictSelectTag',
-            componentProps: {
-              dictCode: item.dict,
-              placeholder: '请选择',
-              // stringToNumber: true,
-            },
+            componentProps: { dictCode: item.dict, placeholder: '请选择' },
           };
-        }
-        // date日期
-        if (item.type == 8) {
+          break;
+        case 8:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'DatePicker',
-            componentProps: {
-              showTime: false,
-              valueFormat: 'YYYY-MM-DD',
-              getPopupContainer: getAutoScrollContainer,
-            },
+            componentProps: { showTime: false, valueFormat: 'YYYY-MM-DD', getPopupContainer: getAutoScrollContainer },
           };
-        }
-        // 日期+时间
-        if (item.type == 9) {
+          break;
+        case 9:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'DatePicker',
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
+            componentProps: { showTime: true, valueFormat: 'YYYY-MM-DD HH:mm:ss', getPopupContainer: getAutoScrollContainer },
           };
-        }
+          break;
+        case 11:
+          columnsItem = {
+            label: item.des,
+            field: item.monitorcode,
+            component: 'ModelSelect',
+            componentProps: { deviceType: deviceType.value },
+          };
+      }
+      if (!!columnsItem) {
+        columnList.push(columnsItem);
       }
-      columnList.push(columnsItem);
     });
     formSchema.value = columnList;
     formSchema.value.unshift(

src/views/vent/deviceManager/workingFace/index.vue

@@ -36,44 +36,40 @@
     if (tableHeaderColumns.length > 0) {
       tableHeaderColumns.forEach((item: any) => {
         let columnsItem;
-        if (item.type == 1 || item.type == 10) {
-          columnsItem = {
-            label: item.des, //_dictText
-            field: item.monitorcode,
-            component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
-          };
-        } else {
-          if (item.type == 3) {
+        switch (item.type) {
+          case 1:
+            columnsItem = { label: item.des, field: item.monitorcode, component: 'Input' };
+            break;
+          case 10:
+            columnsItem = { label: item.des, field: item.monitorcode, component: 'InputTextArea' };
+            break;
+          case 3:
             columnsItem = {
-              label: item.des, //_dictText
+              label: item.des,
               field: item.monitorcode,
               component: 'RadioGroup',
               defaultValue: 1,
-              componentProps: () => {
-                return {
-                  options: [
-                    { label: '是', value: 1, key: '1' },
-                    { label: '否', value: 0, key: '2' },
-                  ],
-                  stringToNumber: true,
-                };
-              },
+              componentProps: () => ({
+                options: [
+                  { label: '是', value: 1, key: '1' },
+                  { label: '否', value: 0, key: '2' },
+                ],
+                stringToNumber: true,
+              }),
             };
-          }
-          if (item.type == 4) {
+            break;
+          case 4:
             columnsItem = {
-              label: item.des, //_dictText
+              label: item.des,
               field: item.monitorcode,
               component: 'JDictSelectTag',
-              componentProps: {
-                dictCode: item.dict,
-                placeholder: '请选择',
-                stringToNumber: true,
-              },
+              componentProps: { dictCode: item.dict, placeholder: '请选择', stringToNumber: true },
             };
-          }
+            break;
+        }
+        if (!!columnsItem) {
+          columnList.push(columnsItem);
         }
-        columnList.push(columnsItem);
         formSchema.value = [...commentFormSchema(strtype), ...columnList];
       });
     } else {

src/views/vent/monitorManager/comment/components/DeviceBaseInfo.vue

@@ -145,82 +145,73 @@
     const columnList: any[] = [];
     tableHeaderColumns.forEach((item: any) => {
       let columnsItem;
-      if (item.type == 1 || item.type == 10) {
-        columnsItem = {
-          label: item.des, //_dictText
-          field: item.monitorcode,
-          component: item.type == 1 ? 'Input' : item.type == 10 ? 'InputTextArea' : '',
-        };
-      } else {
-        if (item.type == 2 && item['monitorcode'] == 'nsubstationid') {
+      switch (item.type) {
+        case 1:
+          columnsItem = { label: item.des, field: item.monitorcode, component: 'Input' };
+          break;
+        case 10:
+          columnsItem = { label: item.des, field: item.monitorcode, component: 'InputTextArea' };
+          break;
+        case 2:
+          if (item.monitorcode !== 'nsubstationid') break;
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'ApiSelect',
-            componentProps: {
-              api: substationList,
-              labelField: 'strname',
-              valueField: 'id',
-            },
+            componentProps: { api: substationList, labelField: 'strname', valueField: 'id' },
           };
-        }
-        if (item.type == 3) {
+          break;
+        case 3:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'RadioGroup',
             defaultValue: 1,
-            componentProps: () => {
-              return {
-                options: [
-                  { label: '是', value: 1, key: '1' },
-                  { label: '否', value: 0, key: '2' },
-                ],
-                stringToNumber: true,
-              };
-            },
+            componentProps: () => ({
+              options: [
+                { label: '是', value: 1, key: '1' },
+                { label: '否', value: 0, key: '2' },
+              ],
+              stringToNumber: true,
+            }),
           };
-        }
-        if (item.type == 4) {
+          break;
+        case 4:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'JDictSelectTag',
-            componentProps: {
-              dictCode: item.dict,
-              placeholder: '请选择',
-              // stringToNumber: true,
-            },
+            componentProps: { dictCode: item.dict, placeholder: '请选择' },
           };
-        }
-        // date日期
-        if (item.type == 8) {
+          break;
+        case 8:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'DatePicker',
-            componentProps: {
-              showTime: false,
-              valueFormat: 'YYYY-MM-DD',
-              getPopupContainer: getAutoScrollContainer,
-            },
+            componentProps: { showTime: false, valueFormat: 'YYYY-MM-DD', getPopupContainer: getAutoScrollContainer },
           };
-        }
-        // 日期+时间
-        if (item.type == 9) {
+          break;
+        case 9:
           columnsItem = {
-            label: item.des, //_dictText
+            label: item.des,
             field: item.monitorcode,
             component: 'DatePicker',
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
+            componentProps: { showTime: true, valueFormat: 'YYYY-MM-DD HH:mm:ss', getPopupContainer: getAutoScrollContainer },
           };
-        }
+          break;
+        case 11:
+          columnsItem = {
+            label: item.des,
+            field: item.monitorcode,
+            component: 'ModelSelect',
+            componentProps: { deviceType: props.deviceType },
+          };
+          break;
+      }
+      if (!!columnsItem) {
+        columnList.push(columnsItem);
       }
-      columnList.push(columnsItem);
     });
     formSchema.value = columnList;
     formSchema.value.unshift(