refactor(components):组件调整

feat(modelComponent):模型类型引入字典
feat(equipmentExtension):设备拓展选取设备模型时新增预览

ui/src/components/GeneralComponents/BeltFilterComponent.vue

@@ -16,7 +16,7 @@
             }"></div>
         </div>
         <!-- 工作模式 -->
-        <div class="work_mode" :class="{ 'running': isRunning }">工作模式：{{ isRunning ? '运行中' : '停止' }}</div>
+        <div class="work_mode" v-if="isRunning" :class="{ 'running': isRunning }">工作模式：{{ isRunning ? '运行中' : '停止' }}</div>
     </div>
 </template>
 

ui/src/components/GeneralComponents/PumpComponent.vue

@@ -1,7 +1,6 @@
 <template>
     <!-- 泵组件 -->
-    <div class="pump" :style="{ width: `${props.iconSize}px`, height: `${props.iconSize}px` }" v-if="props.title"
-        ref="pumpRef">
+    <div class="pump" :style="{ width: `${props.iconSize}px`, height: `${props.iconSize}px` }" ref="pumpRef">
         <i class="icon iconfont-colour icon_pump" :class="getPumpClass"
             :style="{ fontSize: `${props.iconSize}px` }"></i>
         <div class="pump_title zIndex10" :style="[getPumpTitleStyle, getOutTextRotateStyle]">

ui/src/hooks/useComponentHelper.js

@@ -40,6 +40,16 @@ const componentMap = {
     Arrow2 : lazyComponent(() => import('@/components/GeneralComponents/Arrow2Component.vue')),//箭头2
 };
 
+//获取注册组件
+export function getComponentByName(equipmentName){
+    const comp = componentMap[equipmentName];
+    if (!comp) {
+        console.warn(`组件未注册: ${equipmentName}`);
+        return 'div';
+    }
+    return comp;
+}
+
 export function useComponentHelper(modelMapRef) {
 
     //获取组件名称，用于组件渲染

ui/src/views/dcsForm2/equipmentExtension/index.vue

@@ -94,17 +94,26 @@
         </el-form-item>
         <el-form-item label="模型名称" prop="modelId">
           <el-select v-model="form.modelId" placeholder="请选择对应模型" filterable>
-            <el-option v-for="dict in modelOptions" :key="dict.modelId" :label="dict.modelName"
-              :value="dict.modelId"></el-option>
+            <el-option v-for="dict in modelOptions" :key="dict.modelId" :label="dict.modelName" :value="dict.modelId">
+              <div class="option-preview">
+                <span class="model-name">{{ dict.modelName }}</span>
+                <span class="component-wrapper">
+                  <component :is="getComponentByName(dict.componentName)" class="preview-component" :iconSize="20"
+                    :sensorSize="20" :sensorHeight="20" :sensorWidth="4" :iconClass="dict.iconClass" />
+                </span>
+              </div>
+            </el-option>
           </el-select>
         </el-form-item>
-        <!-- TODO 改为数值输入框，且限定范围 -->
+        <!-- x 坐标 -->
         <el-form-item label="x坐标" prop="x">
-          <el-input v-model="form.x" placeholder="请输入x坐标,单位%" />
+          <el-input-number v-model="form.x" :min="0" :max="100" :step="0.1" style="width: 100%;" placeholder="请输入x坐标" />
         </el-form-item>
+        <!-- y 坐标 -->
         <el-form-item label="y坐标" prop="y">
-          <el-input v-model="form.y" placeholder="请输入y坐标,单位%" />
+          <el-input-number v-model="form.y" :min="0" :max="100" :step="0.1" style="width: 100%;" placeholder="请输入y坐标" />
         </el-form-item>
+
         <el-form-item label="尺寸" prop="size">
           <el-input-number v-model="form.size" placeholder="请输入尺寸,单位px" style="width: 100%;" controls-position="right"
             class="sizeInput" />
@@ -142,7 +151,7 @@
                 <!-- 颜色选择器 -->
                 <template v-if="item.key === 'bgColor'">
                   <el-color-picker v-model="item.value" show-alpha
-                    :predefine="['#c69f03','#409EFF', '#67C23A', '#ff6200', '#F56C6C','#cdcdcd']" />
+                    :predefine="['#c69f03', '#409EFF', '#67C23A', '#ff6200', '#F56C6C', '#cdcdcd']" />
                 </template>
 
                 <!-- 数字输入框 -->
@@ -173,8 +182,6 @@
           </el-row>
         </el-form-item>
 
-
-
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -196,13 +203,25 @@
     </el-dialog>
   </div>
 </template>
-//TODO 选设备时可预览设备模型select Slots
 <script setup name="Extension">
 import { changeStatus, getExtension, delExtension, addExtension, updateExtension, getEquipmentExtensionFormList } from "@/api/hnyz/extension";
 import { getPageList } from "@/api/hnyz/pageControl";
 import { getEquipmentList } from "@/api/hnyz/equipment";
 import { getModelSelectList } from "@/api/hnyz/modelComponent";
-import { onMounted, ref, watch } from "vue";
+import { getComponentByName } from '@/hooks/useComponentHelper';
+import { onMounted, ref, watch, nextTick } from "vue";
+
+const scale = ref(1);
+
+onMounted(() => {
+  nextTick(() => {
+    const el = document.querySelector(".scale-preview");
+    if (el) {
+      const originalHeight = el.offsetHeight;
+      scale.value = 20 / originalHeight; // 目标高度 20px
+    }
+  });
+});
 onMounted(() => {
   getPageOptions();
   getEquipmentOptions();
@@ -285,10 +304,30 @@ const data = reactive({
       { required: true, message: "流程不能为空", trigger: "change" }
     ],
     x: [
-      { required: true, message: "x坐标不能为空", trigger: "blur" }
+      { required: true, message: '请输入x坐标', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value < 0 || value > 100) {
+            callback(new Error('x坐标超界限'));
+          } else {
+            callback();
+          }
+        },
+        trigger: 'change'
+      }
     ],
     y: [
-      { required: true, message: "y坐标不能为空", trigger: "blur" }
+      { required: true, message: '请输入y坐标', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value < 0 || value > 100) {
+            callback(new Error('y坐标超界限'));
+          } else {
+            callback();
+          }
+        },
+        trigger: 'change'
+      }
     ],
     modelId: [
       { required: true, message: "模型不能为空", trigger: "change" }
@@ -495,4 +534,49 @@ function formatNumber(val) {
 .add_condition {
   width: -webkit-fill-available;
 }
+
+/* 下拉项容器允许自适应高度 */
+.el-select-dropdown__item {
+  height: auto !important;
+  line-height: normal !important;
+  padding: 6px 10px !important;
+}
+
+/* 下拉滚动容器：去掉默认高度限制 */
+.el-select-dropdown__wrap {
+  max-height: none !important;
+  overflow: visible !important;
+}
+
+/* option 内布局：左文字 + 右组件 */
+.option-preview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+/* 模型名称 */
+.model-name {
+  flex: 1;
+  white-space: nowrap;
+}
+
+/* 组件容器：自然高度，不裁切 */
+.component-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: auto !important;
+  overflow: visible !important;
+  margin-right: 50px;
+}
+
+/* 组件预览：保持原始大小 */
+.preview-component {
+  display: inline-block;
+  transform: none !important;
+  height: auto !important;
+  width: auto !important;
+}
 </style>

ui/src/views/dcsForm2/modelComponent/index.vue

@@ -68,7 +68,10 @@
           <el-input v-model="form.modelName" placeholder="请输入模型名称" />
         </el-form-item>
         <el-form-item label="模型类型" prop="modelType">
-          <el-input v-model="form.modelType" placeholder="请输入模型类型" />
+          <el-select v-model="form.modelType" placeholder="请选择模型类型">
+            <el-option v-for="dict in model_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="组件名" prop="componentName">
           <el-input v-model="form.componentName" placeholder="请输入前端组件名" />
@@ -101,12 +104,12 @@
     </el-dialog>
   </div>
 </template>
-
+//TODO 模型类型改用字典---完成
 <script setup name="ModelComponent">
 import { listModelComponent, getModelComponent, delModelComponent, addModelComponent, updateModelComponent } from "@/api/hnyz/modelComponent";
 
 const { proxy } = getCurrentInstance();
-const { sys_normal_disable } = proxy.useDict('sys_normal_disable');
+const { sys_normal_disable, model_type } = proxy.useDict('sys_normal_disable','model_type');
 
 const modelComponentList = ref([]);
 const open = ref(false);