Merge pull request #11730 from dataease/pr@dev-v2@refactor_outerparams

refactor(仪表板、数据大屏): 外部参数样式逻辑调整

core/core-backend/src/main/resources/mybatis/ExtVisualizationOuterParamsMapper.xml

@@ -141,7 +141,7 @@
       </select>
 
        <select id="getDsFieldInfo"  resultType="io.dataease.api.dataset.vo.CoreDatasetTableFieldVO">
-          select cdtf.*,cdtf.id as attachId from core_dataset_table_field cdtf where cdtf.dataset_group_id = #{dataset_group_id}
+          select cdtf.*,cdtf.id as attachId from core_dataset_table_field cdtf where cdtf.dataset_group_id = #{dataset_group_id} order by cdtf.de_type, cdtf.origin_name
       </select>
 
       <select id="getViewInfo"  resultType="io.dataease.api.chart.vo.ChartBaseVO">

core/core-frontend/src/assets/svg/filter-params.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6666 7.62068L14.3571 5.4177C14.4233 5.37816 14.4799 5.32854 14.526 5.27196C14.6111 5.21156 14.6666 5.11225 14.6666 4.99998V4.93547C14.6717 4.88918 14.6717 4.84219 14.6666 4.79537V1.99998C14.6666 1.81588 14.592 1.64922 14.4713 1.52858C14.3507 1.40793 14.184 1.33331 13.9999 1.33331H1.99992C1.63173 1.33331 1.33325 1.63179 1.33325 1.99998V4.99998C1.33325 5.10043 1.37769 5.19051 1.44797 5.25162C1.49886 5.32643 1.56644 5.3916 1.64913 5.44103L5.33325 7.64343V12.4606C5.33325 12.5869 5.40459 12.7023 5.51751 12.7588L10.1842 15.0921C10.4058 15.2029 10.6666 15.0418 10.6666 14.794V7.62068Z"/>
+</svg>

core/core-frontend/src/assets/svg/outer-params-filter.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6666 7.62068L14.3571 5.4177C14.4233 5.37816 14.4799 5.32854 14.526 5.27196C14.6111 5.21156 14.6666 5.11225 14.6666 4.99998V4.93547C14.6717 4.88918 14.6717 4.84219 14.6666 4.79537V1.99998C14.6666 1.81588 14.592 1.64922 14.4713 1.52858C14.3507 1.40793 14.184 1.33331 13.9999 1.33331H1.99992C1.63173 1.33331 1.33325 1.63179 1.33325 1.99998V4.99998C1.33325 5.10043 1.37769 5.19051 1.44797 5.25162C1.49886 5.32643 1.56644 5.3916 1.64913 5.44103L5.33325 7.64343V12.4606C5.33325 12.5869 5.40459 12.7023 5.51751 12.7588L10.1842 15.0921C10.4058 15.2029 10.6666 15.0418 10.6666 14.794V7.62068Z" fill="#3370FF"/>
+</svg>

core/core-frontend/src/components/visualization/OuterParamsSet.vue

@@ -11,7 +11,7 @@
     <el-row style="height: 550px">
       <el-row v-loading="state.loading">
         <el-row class="preview">
-          <el-col :span="8" style="height: 100%; overflow-y: hidden">
+          <el-col :span="8" class="preview-left">
             <el-row class="tree-head">
               <span class="head-text">参数列表</span>
               <span class="head-filter">
@@ -158,7 +158,7 @@
                         </div>
                         <span>{{ baseDatasetInfo.name }}</span>
                       </div>
-                      <div style="flex: 1">
+                      <div style="flex: 1; margin-left: -16px">
                         <el-select
                           v-model="baseDatasetInfo.fieldIdSelected"
                           filterable
@@ -168,7 +168,6 @@
                         >
                           <template #header>
                             <el-tabs
-                              stretch
                               class="params-select--header"
                               v-model="baseDatasetInfo.activelist"
                             >
@@ -210,9 +209,9 @@
                           >
                         </div>
                       </div>
-                      <div style="display: flex; width: 100%">
+                      <div style="display: flex; flex-wrap: wrap; width: 100%">
                         <div
-                          style="display: flex; width: 50%; line-height: 32px"
+                          class="view-item"
                           v-for="viewInfo in baseDatasetInfo.datasetViews"
                           :key="viewInfo"
                         >
@@ -635,6 +634,7 @@ defineExpose({
   line-height: 40px;
   font-size: 12px;
   color: #3d4d66;
+  border-bottom: 1px solid #e6e6e6;
   .head-text {
     margin-left: 16px;
     font-weight: 500;
@@ -696,6 +696,7 @@ defineExpose({
   height: 100%;
   width: 100%;
   overflow-y: auto;
+  background: none;
 }
 
 .custom-tree-node {
@@ -908,4 +909,27 @@ defineExpose({
   height: 14px;
   background: rgba(31, 35, 41, 0.15);
 }
+
+.preview-left {
+  background: rgba(245, 246, 247, 1);
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.view-item {
+  display: flex;
+  width: 50%;
+  line-height: 32px;
+}
+
+.ed-select-dropdown__header {
+  padding: 0 8px;
+  .params-select--header {
+    --ed-tabs-header-height: 32px;
+    .ed-tabs__item {
+      font-weight: 400;
+      font-size: 15px;
+    }
+  }
+}
 </style>