feat(ArrowComponent):箭头模型组件

ui/src/components/GeneralComponents/ArrowComponent.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="arrow_default" :style="arrowStyle" @click="handleClick">
+        <div class="arrow_text" :style="getFontSize" v-if="!iconFirst">{{ props.arrowText }}</div>
+        <i class="icon iconfont icon-rightArrow arrow_icon" :style="arrowIconStyle"
+            :class="{ can_click: !!props.specialCondition.linkUrl }"></i>
+        <div class="arrow_text" :style="getFontSize" v-if="iconFirst">{{ props.arrowText }}</div>
+    </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { computed } from 'vue'
+
+const router = useRouter()
+
+const props = defineProps({
+    arrowText: {
+        type: String,
+        default: '默认',
+    },
+    //图标大小
+    iconSize: {
+        type: Number,
+        default: 100,
+    },
+    specialCondition: {// 特殊条件
+        type: JSON,
+        default: () => ({})
+    }
+})
+
+// 箭头容器样式（flex布局）
+const arrowStyle = computed(() => ({
+    display: 'flex',
+    flexDirection: props.specialCondition.flexDir || 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+}))
+
+// 箭头文字位置
+const iconFirst = computed(() => {
+  const val = props.specialCondition?.iconFirst
+  if (typeof val === 'boolean') return val
+  if (typeof val === 'string') return val.toLowerCase() === 'true'
+  return true 
+})
+
+
+// 箭头方向转换
+const arrowIconStyle = computed(() => ({
+    fontSize: `${props.iconSize}px`,
+    transform: `rotate(${props.specialCondition.arrowRotate || 0}deg)`,
+}))
+
+// 字体大小
+const getFontSize = computed(() => ({
+    fontSize: `${props.iconSize * 0.2}px`,
+}))
+
+// 点击跳转
+const handleClick = () => {
+    if(props.specialCondition.linkUrl){
+        router.push(props.specialCondition.linkUrl)
+    }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.arrow_default {
+    position: absolute;
+    z-index: 15;
+
+    .arrow_icon {
+        font-size: 100px;
+        color: rgb(164, 161, 161);
+    }
+
+    //可点击
+    .can_click {
+        color: #fff;
+    }
+
+    .arrow_text {
+        color: #fff;
+    }
+}
+</style>

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

@@ -91,6 +91,12 @@
             <el-option v-for="dict in realFlowOptions" :key="dict.flowId" :label="dict.flowName"
               :value="dict.flowId"></el-option>
           </el-select>
+        </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-select>
         </el-form-item>
         <el-form-item label="x坐标" prop="x">
           <el-input v-model="form.x" placeholder="请输入x坐标,单位%" />
@@ -110,21 +116,33 @@
           <el-input-number v-model="form.height" placeholder="请输入高度,单位px" style="width: 100%;" controls-position="right"
             class="sizeInput" />
         </el-form-item>
-        <el-form-item label="是否反转" prop="isReverse">
+        <el-form-item label="是否反转" prop="isReverse" v-if="form.modelId == 2">
           <el-switch v-model="form.isReverse" :active-value="true" :inactive-value="false" active-text="反转"
             inactive-text="不反转" />
         </el-form-item>
 
-        <el-form-item label="旋转角度" prop="rotate">
+        <el-form-item label="旋转角度" prop="rotate" v-if="form.modelId !== 16">
           <el-input-number v-model="form.rotate" placeholder="请输入旋转角度" style="width: 100%;" controls-position="right"
             class="sizeInput" />
         </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-select>
+       
+        <el-form-item label="特殊条件" prop="specialCondition" v-if="form.modelId == 16">
+          <div v-for="(item, index) in keyValueList" :key="index" style="margin-bottom: 8px;">
+            <el-row :gutter="8">
+              <el-col :span="10">
+                <el-input v-model="item.key" placeholder="Key"></el-input>
+              </el-col>
+              <el-col :span="10">
+                <el-input v-model="item.value" placeholder="Value"></el-input>
+              </el-col>
+              <el-col :span="4">
+                <el-button type="danger" @click="removeItem(index)">删除</el-button>
+              </el-col>
+            </el-row>
+          </div>
+          <el-button type="primary" plain @click="addItem">添加条件</el-button>
         </el-form-item>
+
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
@@ -147,11 +165,11 @@
 </template>
 
 <script setup name="Extension">
-import { changeStatus, listExtension, getExtension, delExtension, addExtension, updateExtension, getEquipmentExtensionFormList } from "@/api/hnyz/extension";
+import { changeStatus, getExtension, delExtension, addExtension, updateExtension, getEquipmentExtensionFormList } from "@/api/hnyz/extension";
 import { getFlowList } from "@/api/hnyz/flow";
 import { getEquipmentList } from "@/api/hnyz/equipment";
 import { getModelSelectList } from "@/api/hnyz/modelComponent";
-import { onMounted } from "vue";
+import { onMounted, ref, watch } from "vue";
 onMounted(() => {
   getFlowOptions();
   getEquipmentOptions();
@@ -247,6 +265,27 @@ const data = reactive({
 
 const { queryParams, form, rules } = toRefs(data);
 
+const keyValueList = ref([])// 特殊条件列表
+watch(
+  keyValueList,
+  (list) => {
+    const obj = {}
+    list.forEach(({ key, value }) => {
+      if (key) obj[key] = value
+    })
+    form.value.specialCondition = JSON.stringify(obj) // 可改为 obj
+  },
+  { deep: true, immediate: true }
+)
+
+// 添加、删除方法
+const addItem = () => {
+  keyValueList.value.push({ key: '', value: '' })
+}
+const removeItem = (index) => {
+  keyValueList.value.splice(index, 1)
+}
+
 /** 查询设备拓展管理列表 */
 function getList() {
   loading.value = true;
@@ -275,8 +314,10 @@ function reset() {
     size: 50,
     modelId: 1,
     status: "0",
+    specialCondition: null,
     remark: null,
   };
+  keyValueList.value = [];
   proxy.resetForm("extensionRef");
   //下拉框重置
   realFlowOptions.value = flowOptions.value;
@@ -327,6 +368,12 @@ function handleUpdate(row) {
   const _id = row.id || ids.value
   getExtension(_id).then(response => {
     form.value = response.data;
+    if (form.value.specialCondition) {
+      const obj = JSON.parse(form.value.specialCondition)
+      Object.keys(obj).forEach(key => {
+        keyValueList.value.push({ key, value: obj[key] })
+      })
+    }
     open.value = true;
     title.value = "修改设备拓展管理";
   });