From b71c3aef68f6f6a4def8dd90b5fc27acc9491541 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 23 Oct 2024 18:29:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E8=BF=87=E6=BB=A4=E5=99=A8=E4=B8=AD=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=80=BC=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/filter/TimeDialog.vue   | 150 +++++++-----------
 .../editor/filter/auth-tree/FilterFiled.vue   |  18 ++-
 2 files changed, 69 insertions(+), 99 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue b/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
index 7b90ba0184..9ec66a5b61 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
@@ -177,40 +177,31 @@ defineExpose({
 </script>
 
 <template>
-  <div class="time-dialog">
-    <div class="setting">
-      <div class="setting-label">时间粒度</div>
-      <div class="setting-value select">
-        <el-select
-          @change="timeGranularityChange"
-          placeholder="请选择时间粒度"
-          v-model="curComponent.timeGranularity"
-        >
-          <el-option
-            v-for="ele in timeList"
-            :key="ele.value"
-            :label="ele.label"
-            :value="ele.value"
-          />
-        </el-select>
-      </div>
-    </div>
-    <div class="setting">
-      <div class="setting-label">相对当前</div>
-      <div class="setting-value select">
-        <el-select v-model="curComponent.relativeToCurrent">
-          <el-option
-            v-for="item in relativeToCurrentList"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-      </div>
-    </div>
-    <div class="setting" v-if="curComponent.relativeToCurrent === 'custom'">
+  <el-form label-position="top">
+    <el-form-item label="时间粒度">
+      <el-select
+        @change="timeGranularityChange"
+        style="width: 100%"
+        placeholder="请选择时间粒度"
+        v-model="curComponent.timeGranularity"
+      >
+        <el-option v-for="ele in timeList" :key="ele.value" :label="ele.label" :value="ele.value" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="相对当前">
+      <el-select style="width: 100%" v-model="curComponent.relativeToCurrent">
+        <el-option
+          v-for="item in relativeToCurrentList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item v-if="curComponent.relativeToCurrent === 'custom'">
       <div
-        class="setting-input"
+        style="width: 100%"
+        class="no-with-date"
         :class="curComponent.timeGranularity === 'datetime' && 'with-date'"
       >
         <el-input-number v-model="curComponent.timeNum" :min="0" controls-position="right" />
@@ -236,73 +227,38 @@ defineExpose({
           v-model="curComponent.arbitraryTime"
         />
       </div>
-    </div>
-    <div class="setting">
-      <div class="setting-label">预览</div>
-      <div class="setting-value" style="width: 325px">
-        <DynamicTime style="width: 100%" :config="curComponent" isConfig></DynamicTime>
-      </div>
-    </div>
-  </div>
+    </el-form-item>
+    <el-form-item label="预览">
+      <DynamicTime style="width: 100%" :config="curComponent" isConfig></DynamicTime>
+    </el-form-item>
+  </el-form>
 </template>
 
 <style lang="less" scoped>
-.time-dialog {
-  .setting {
-    &.setting {
-      margin-top: 8px;
-    }
-    &.parameters {
-      width: 100%;
-      padding-left: 24px;
-      .ed-date-editor {
-        width: 325px !important;
-      }
-    }
-    margin-left: auto;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .setting-label {
-      width: 80px;
-      margin-right: 8px;
-    }
-
-    .setting-value {
-      margin: 8px 0;
-      &.select {
-        margin-top: 0;
-        .ed-select {
-          width: 325px;
-        }
-      }
-    }
-
-    .setting-input {
-      display: flex;
-      padding-left: 126px;
-      justify-content: flex-end;
-      align-items: center;
-      &.range {
-        padding-left: 0px;
-      }
-      & > div + div {
-        margin-left: 8px;
-      }
-
-      &.with-date {
-        .ed-input-number {
-          width: 71px;
-        }
-        .ed-select {
-          width: 62px;
-        }
-
-        .ed-date-editor.ed-input {
-          width: 106px;
-        }
-      }
-    }
+.no-with-date {
+  .ed-input-number {
+    width: 120px;
+  }
+  .ed-select {
+    width: 118px;
+    margin-left: 8px;
   }
 }
+.with-date {
+  .ed-input-number {
+    width: 80px;
+  }
+  .ed-select {
+    width: 80px;
+    margin-left: 8px;
+  }
+
+  .ed-date-editor.ed-input {
+    width: 106px;
+  }
+}
+
+:deep(.date-editor_granularity .ed-input__wrapper) {
+  width: 100%;
+}
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
index 52a1de767e..3ce9582533 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
@@ -473,9 +473,17 @@ const emits = defineEmits(['update:item', 'del'])
             <div class="bottom-line"></div>
           </template>
           <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              v-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate' && !item.timeValue"
+              @click="handleClick"
+              readonly
+              class="w70 mar5"
+              size="small"
+              v-model="item.timeValue"
+            />
             <el-tooltip
               class="item"
-              v-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate'"
+              v-else-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate'"
               effect="light"
               :content="item.timeValue"
               placement="top"
@@ -599,7 +607,13 @@ const emits = defineEmits(['update:item', 'del'])
         /></Icon>
       </el-icon>
     </div>
-    <el-dialog append-to-body v-model="dialogVisible" title="日期设置" width="500">
+    <el-dialog
+      class="create-dialog"
+      append-to-body
+      v-model="dialogVisible"
+      title="日期设置"
+      width="420"
+    >
       <TimeDialog ref="timeDialog"></TimeDialog>
       <template #footer>
         <div class="dialog-footer">