fix：修改设备配置详情页样式，wip:待修改场景联动样式

fengtao
1 parent ea4a0db1
Showing 7 changed files with 134 additions and 125 deletions
src/views/device/profile/deviceConfigDetail.vue
src/views/device/profile/step/DeviceProfileStep1.vue
src/views/ruleengine/scenelinkage/addForm/condition.vue
src/views/ruleengine/scenelinkage/addForm/doaction.vue
src/views/ruleengine/scenelinkage/addForm/trigger.vue
src/views/ruleengine/scenelinkage/config.d.ts
src/views/ruleengine/scenelinkage/useDrawer.vue
--- a/src/views/device/profile/deviceConfigDetail.vue
View file @00f9d3f
+++ b/src/views/device/profile/deviceConfigDetail.vue
View file @00f9d3f
@@ -21,8 +21,9 @@
         /></TabPane>
         <TabPane key="3" tab="报警规则">
           <div style="padding-top: 10px">
-            <div style="border-radius: 10px; border: 1px solid #f0f0f0">
-              <div style="margin-left: 15px">
+            <div style="border-radius: 10px">
+              <p style="font-weight: 900">报警规则</p>
+              <div class="input-style" style="margin-left: 15px">
                 <BasicForm
                   :showSubmitButton="false"
                   :showResetButton="false"
@@ -60,9 +61,9 @@
                 />
               </div>
             </div>
-            <div style="border-radius: 10px; border: 1px solid #f0f0f0; margin-top: 15px">
-              <p>清除报警规则</p>
-              <div style="margin-left: 15px">
+            <div style="border-radius: 10px; margin-top: 15px">
+              <p style="font-weight: 900">清除报警规则</p>
+              <div class="clear-input-style" style="margin-left: 15px">
                 <BasicForm
                   :showSubmitButton="false"
                   :showResetButton="false"
@@ -359,3 +360,35 @@
     },
   });
 </script>
+
+<style scoped lang="less">
+  .input-style {
+    /deep/ .ant-form-item-control-input {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-height: 02px;
+    }
+    /deep/.ant-col-24 {
+      display: block;
+      flex: 0 0 100%;
+      max-width: 100%;
+      margin-top: -20px;
+    }
+  }
+
+  .clear-input-style {
+    /deep/ .ant-form-item-control-input {
+      position: relative;
+      display: flex;
+      align-items: center;
+      min-height: 02px;
+    }
+    /deep/.ant-col-24 {
+      display: block;
+      flex: 0 0 100%;
+      max-width: 100%;
+      margin-top: -20px;
+    }
+  }
+</style>
--- a/src/views/device/profile/step/DeviceProfileStep1.vue
View file @00f9d3f
+++ b/src/views/device/profile/step/DeviceProfileStep1.vue
View file @00f9d3f
@@ -12,7 +12,7 @@
         "
       >
         <div style="width: 4vw; height: 24vh">请上传图片</div>
-        <div style="width: 8vw; height: 24vh">
+        <div class="device-icon-style" style="width: 8vw; height: 24vh">
           <Upload
             style="width: 20vw"
             name="avatar"
@@ -23,20 +23,20 @@
             :before-upload="beforeUploadqrcodePic"
           >
             <img
-              style="text-align: center; border-radius: 50%; width: 10vw; height: 15vh"
+              style="text-align: center; width: 13vw; height: 15vh"
               v-if="peresonalPic"
               :src="peresonalPic"
               alt="avatar"
             />
             <div v-else>
               <div style="margin-top: 30px">
-                <PlusOutlined style="font-size: 30px" />
+                <PlusOutlined style="font-size: 30px; margin-left: -166px" />
               </div>
               <div
                 class="ant-upload-text flex"
-                style="width: 280px; height: 130px; align-items: center"
+                style="width: 280px; height: 130px; align-items: center; margin-left: 43px"
               >
-                支持.PNG、.JPG、.JPEG格式，建议大小不超过2M。</div
+                请上传图片</div
               >
             </div>
           </Upload>
@@ -166,6 +166,21 @@
     p {
       color: @text-color;
     }
+    .device-icon-style {
+      /deep/ .ant-upload-select-picture-card {
+        display: inherit;
+        float: none;
+        width: 8.6vw;
+        height: 17vh;
+        margin-right: 8px;
+        text-align: center;
+        vertical-align: top;
+        background-color: #fafafa;
+        border: 1px dashed #d9d9d9;
+        cursor: pointer;
+        transition: border-color 0.3s ease;
+      }
+    }
   }
   .pay-select {
--- a/src/views/ruleengine/scenelinkage/addForm/condition.vue
View file @00f9d3f
+++ b/src/views/ruleengine/scenelinkage/addForm/condition.vue
View file @00f9d3f
@@ -261,7 +261,7 @@
         appendSchemaByField(
           {
-            field: `compare${n.value}`,
+            field: `compareWendu${n.value}`,
             label: '',
             component: 'Select',
             componentProps: {
@@ -282,7 +282,7 @@
         );
         appendSchemaByField(
           {
-            field: `value${n.value}`,
+            field: `valueWendu${n.value}`,
             component: 'Input',
             label: '',
             componentProps: {
@@ -322,8 +322,8 @@
           `wu${field}`,
           `compare${field}`,
           `value${field}`,
-          `compare${field}`,
-          `value${field}`,
+          `compareWendu${field}`,
+          `valueWendu${field}`,
           `${field}`,
         ]);
         n.value--;
--- a/src/views/ruleengine/scenelinkage/addForm/doaction.vue
View file @00f9d3f
+++ b/src/views/ruleengine/scenelinkage/addForm/doaction.vue
View file @00f9d3f
@@ -204,6 +204,22 @@
         );
         appendSchemaByField(
           {
+            field: 'wu3',
+            label: '',
+            component: 'Input',
+            componentProps: {
+              placeholder: '无',
+              style: {
+                visibility: 'hidden',
+              },
+            },
+            colProps: { span: 12 },
+            ifShow: ({ values }) => isMsg(Reflect.get(values, 'outTarget')),
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
             field: `sceneLinkageId${n.value}`,
             label: '',
             component: 'ApiSelect',
@@ -223,6 +239,22 @@
           },
           ''
         );
+        appendSchemaByField(
+          {
+            field: 'wu4',
+            label: '',
+            component: 'Input',
+            componentProps: {
+              placeholder: '无',
+              style: {
+                visibility: 'hidden',
+              },
+            },
+            colProps: { span: 12 },
+            ifShow: ({ values }) => isScene(Reflect.get(values, 'outTarget')),
+          },
+          ''
+        );
         appendSchemaByField(
           {
@@ -247,7 +279,9 @@
           `command${field}`,
           `wu1${field}`,
           `wu2${field}`,
+          `wu3${field}`,
           `sceneLinkageId${field}`,
+          `wu4${field}`,
           `${field}`,
         ]);
         n.value--;
--- a/src/views/ruleengine/scenelinkage/addForm/trigger.vue
View file @00f9d3f
+++ b/src/views/ruleengine/scenelinkage/addForm/trigger.vue
View file @00f9d3f
@@ -12,26 +12,26 @@
           <template #add="{ field }">
             <Button
               style="margin-left: -99px; margin-top: 0px; display: inline-block"
+              :style="addHideButton > 1 ? 'display:none' : 'display:inline-block'"
               v-if="Number(field) === 0"
               @click="add"
               type="primary"
               >+新增触发器</Button
             >
-            <!-- <Button
-              style="margin-left: 20px; margin-top: -60px"
-              v-if="Number(field) === 0"
-              type="primary"
-              @click="del(field)"
-              >删除</Button
-            > -->
             <Button
               style="margin-left: 5px; margin-top: 35px"
-              v-if="field > 0"
+              :style="addHideButton >= 2 ? 'display:inline-block' : 'display:none'"
+              v-if="Number(field) > 0"
               @click="add"
               type="primary"
               >+新增触发器</Button
             >
-            <Button style="margin-left: 10px" v-if="field > 0" @click="del(field)" type="primary"
+            <Button
+              style="margin-left: 10px"
+              :style="addHideButton >= 2 ? 'display:inline-block' : 'display:none'"
+              v-if="Number(field) > 0"
+              @click="del(field)"
+              type="primary"
               >删除</Button
             >
           </template>
@@ -62,7 +62,8 @@
     setup(props) {
       const getValueData: any = ref({});
       const getPushValueData: any = ref([]);
-      // const newMapGetPushValueData: any = ref([]);
+      const addHideButton = ref(1);
+      const addHideButtonTemp: any = ref(null);
       const [
         registerTrigger,
         {
@@ -118,13 +119,6 @@
           },
         });
       };
-      // //去除字符串的数字
-      // function trimNumber(str) {
-      //   return str.replace(/\d+/g, '');
-      // }
-      // function unique(arr) {
-      //   return Array.from(new Set(arr));
-      // }
       const clearGetPushValueDataEmpty = () => {
         getPushValueData.value.length = 0;
       };
@@ -143,15 +137,14 @@
       const n = ref(1);
       function add() {
-        // const values = getFieldsValue();
-        // getPushValueData.value.push(values);
-        // newMapGetPushValueData.value = getPushValueData.value.map((m) => {
-        //   const getKeys = Object.keys(m);
-        //   getKeys.map((f) => {
-        //     return unique(trimNumber(f));
-        //   });
-        // });
-        // console.log(newMapGetPushValueData.value);
+        addHideButton.value++;
+        addHideButtonTemp.value = addHideButton.value;
+        addHideButtonTemp.value--;
+        const getS = document.getElementById('1') as HTMLElement;
+        // getS.setAttribute('style', 'display:none');
+        console.log(getS);
+        getS.hidden = true;
+
         appendSchemaByField(
           {
             field: `kong${n.value}`,
@@ -199,7 +192,7 @@
         );
         appendSchemaByField(
           {
-            field: `${n.value}no1`,
+            field: `no1${n.value}`,
             component: 'Input',
             label: '',
             componentProps: {
@@ -234,7 +227,7 @@
         );
         appendSchemaByField(
           {
-            field: `${n.value}no2`,
+            field: `no2${n.value}`,
             label: '',
             component: 'Select',
             componentProps: {
@@ -342,7 +335,7 @@
         );
         appendSchemaByField(
           {
-            field: `${n.value}no3`,
+            field: `no3${n.value}`,
             label: '',
             component: 'ApiSelect',
             colProps: {
@@ -371,23 +364,26 @@
       }
       function del(field) {
+        addHideButton.value--;
         removeSchemaByFiled([
           `kong${field}`,
           `tiggerEvent${field}`,
           `deviceId${field}`,
-          `${field}no1`,
+          `no1${field}`,
           `touchWay${field}`,
-          `${field}no2`,
+          `no2${field}`,
           `attributeChoose${field}`,
           `compare${field}`,
           `value${field}`,
           `sceneLinkageId${field}`,
-          `${field}no3`,
+          `no3${field}`,
           `${field}`,
         ]);
         n.value--;
       }
       return {
+        addHideButtonTemp,
+        addHideButton,
         editSelectDevice,
         clearSelectDevice,
         clearGetPushValueDataEmpty,
--- a/src/views/ruleengine/scenelinkage/config.d.ts
View file @00f9d3f
+++ b/src/views/ruleengine/scenelinkage/config.d.ts
View file @00f9d3f
@@ -295,9 +295,6 @@ export const useTriggerDrawerSchema: FormSchema[] = [
     componentProps: {
       placeholder: '请选择设备',
     },
-    // componentProps: {
-    //   placeholder: '请选择设备',
-    // },
     ifShow: ({ values }) =>
       !isTime(Reflect.get(values, 'triggerEvent')) &&
       !isScene(Reflect.get(values, 'triggerEvent')) &&
@@ -307,27 +304,13 @@ export const useTriggerDrawerSchema: FormSchema[] = [
     },
   },
   {
-    field: '',
+    field: 'no1',
     component: 'Input',
     label: '',
     componentProps: {
       maxLength: 255,
       placeholder: '请输入Cron表达式',
     },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 255) {
-              return Promise.reject('字数不超过255个字');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
-
     colProps: {
       span: 12,
     },
@@ -351,7 +334,7 @@ export const useTriggerDrawerSchema: FormSchema[] = [
     colProps: { span: 12 },
   },
   {
-    field: '',
+    field: 'no2',
     label: '',
     component: 'Select',
     componentProps: {
@@ -417,19 +400,6 @@ export const useTriggerDrawerSchema: FormSchema[] = [
       maxLength: 16,
       placeholder: '请输入比较值',
     },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 16) {
-              return Promise.reject('字数不超过16个字');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
     ifShow: ({ values }) =>
       isWenDu(Reflect.get(values, 'attributeChoose')) &&
@@ -546,7 +516,7 @@ export const useConditionDrawerSchema: FormSchema[] = [
     colProps: { span: 12 },
   },
   {
-    field: '',
+    field: 'wu',
     label: '',
     component: 'Input',
     componentProps: {
@@ -583,19 +553,6 @@ export const useConditionDrawerSchema: FormSchema[] = [
       maxLength: 16,
       placeholder: '请输入比较值',
     },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 16) {
-              return Promise.reject('字数不超过16个字');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
     ifShow: ({ values }) =>
       isShiDu(Reflect.get(values, 'property')) && !isTimeAll(Reflect.get(values, 'status')),
@@ -605,7 +562,7 @@ export const useConditionDrawerSchema: FormSchema[] = [
   },
   {
-    field: 'compare',
+    field: 'compareWendu',
     label: '',
     component: 'Select',
     componentProps: {
@@ -623,26 +580,13 @@ export const useConditionDrawerSchema: FormSchema[] = [
     colProps: { span: 12 },
   },
   {
-    field: 'value',
+    field: 'valueWendu',
     component: 'Input',
     label: '',
     componentProps: {
       maxLength: 16,
       placeholder: '请输入比较值',
     },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 16) {
-              return Promise.reject('字数不超过16个字');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
     ifShow: ({ values }) =>
       isWenDu(Reflect.get(values, 'property')) && !isTimeAll(Reflect.get(values, 'status')),
     colProps: {
@@ -696,19 +640,6 @@ export const useActionDrawerSchema: FormSchema[] = [
       maxLength: 255,
       placeholder: '请输入下发指定',
     },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 255) {
-              return Promise.reject('字数不超过255个字');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
     ifShow: ({ values }) =>
       !isScene(Reflect.get(values, 'outTarget')) && !isMsg(Reflect.get(values, 'outTarget')),
     colProps: {
@@ -716,7 +647,7 @@ export const useActionDrawerSchema: FormSchema[] = [
     },
   },
   {
-    field: '',
+    field: 'wu1',
     label: '',
     component: 'Input',
     componentProps: {
@@ -728,7 +659,7 @@ export const useActionDrawerSchema: FormSchema[] = [
     colProps: { span: 12 },
   },
   {
-    field: '',
+    field: 'wu2',
     component: 'Input',
     label: '',
     componentProps: {
@@ -740,7 +671,7 @@ export const useActionDrawerSchema: FormSchema[] = [
     ifShow: ({ values }) => isMsg(Reflect.get(values, 'outTarget')),
   },
   {
-    field: '',
+    field: 'wu3',
     label: '',
     component: 'Input',
     componentProps: {
@@ -771,7 +702,7 @@ export const useActionDrawerSchema: FormSchema[] = [
     ifShow: ({ values }) => isScene(Reflect.get(values, 'outTarget')),
   },
   {
-    field: '',
+    field: 'wu4',
     label: '',
     component: 'Input',
     componentProps: {
--- a/src/views/ruleengine/scenelinkage/useDrawer.vue
View file @00f9d3f
+++ b/src/views/ruleengine/scenelinkage/useDrawer.vue
View file @00f9d3f
@@ -71,6 +71,7 @@
         isUpdate.value = !!data?.isUpdate;
         if (!unref(isUpdate)) {
+          proxy.$refs.getTriggerChildData.clearGetPushValueDataEmpty();
           proxy.$refs.getTriggerChildData.clearSelectDevice();
           proxy.$refs.getChildData.clearSelectDevice();
           proxy.$refs.getConditionChildData.clearSelectDevice();
@@ -144,7 +145,6 @@
           }
         } else {
           await resetFields();
-          proxy.$refs.getTriggerChildData.clearGetPushValueDataEmpty();
         }
       });
       const getTitle = computed(() => (!unref(isUpdate) ? '新增场景联动' : '编辑场景联动'));