feat: 过滤组件样式调整

frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'buttonSureWidget',
-  icon: null,
+  icon: 'iconfont icon-chaxunsousuo',
   label: '确定',
   style: {
     width: 100,
@@ -17,6 +17,7 @@ const defaultOptions = {
     color: '',
     backgroundColor: ''
   },
+  defaultClass: 'time-filter',
   component: 'de-button',
   options: {
     refId: '1234567890',

frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'textInputWidget',
-  icon: null,
+  icon: 'iconfont icon-shuru',
   label: '文本搜索',
   style: {
     width: 100,
@@ -17,6 +17,7 @@ const defaultOptions = {
     color: '',
     backgroundColor: ''
   },
+  defaultClass: 'text-filter',
   component: 'de-input-search',
   options: {
     refId: '1234567890',
@@ -43,6 +44,16 @@ class TextInputServiceImpl extends WidgetService {
   beforeToDraw() {
 
   }
+  dynamicStype() {
+    return {
+      'background-color': 'rgba(35,190,239,.1)'
+    }
+  }
+//   dynamicIconStype() {
+//     return {
+//       color: '#23beef'
+//     }
+//   }
 }
 const textInputServiceImpl = new TextInputServiceImpl({ name: 'textInputWidget' })
 export default textInputServiceImpl

frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'textSelectWidget',
-  icon: null,
+  icon: 'iconfont icon-xialakuang',
   label: '文本下拉',
   style: {
     width: 200,
@@ -43,6 +43,7 @@ const defaultOptions = {
     },
     value: ''
   },
+  defaultClass: 'text-filter',
   component: 'de-select'
 }
 

frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'timeDateRangeWidget',
-  icon: null,
+  icon: 'iconfont icon-riqi',
   label: '日期范围',
   style: {
     width: 200,
@@ -23,6 +23,7 @@ const defaultOptions = {
     },
     value: ''
   },
+  defaultClass: 'time-filter',
   component: 'de-date'
 }
 

frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'timeDateWidget',
-  icon: null,
+  icon: 'iconfont icon-ri',
   label: '日期',
   style: {
     width: 200,
@@ -21,6 +21,8 @@ const defaultOptions = {
     },
     value: ''
   },
+
+  defaultClass: 'time-filter',
   component: 'de-date'
 }
 

frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'timeMonthWidget',
-  icon: null,
+  icon: 'iconfont icon-yue',
   label: '年月',
   style: {
     width: 200,
@@ -21,6 +21,7 @@ const defaultOptions = {
     },
     value: ''
   },
+  defaultClass: 'time-filter',
   component: 'de-date'
 }
 

frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'timeQuarterWidget',
-  icon: null,
+  icon: 'iconfont icon-jidu',
   label: '季度',
   style: {
     width: 200,
@@ -21,6 +21,7 @@ const defaultOptions = {
     },
     value: ''
   },
+  defaultClass: 'time-filter',
   component: 'de-quarter'
 }
 

frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js

 import { WidgetService } from '../service/WidgetService'
 const defaultOptions = {
   name: 'timeYearWidget',
-  icon: null,
+  icon: 'iconfont icon-nian',
   label: '年份',
   style: {
     width: 200,
@@ -21,6 +21,7 @@ const defaultOptions = {
     },
     value: ''
   },
+  defaultClass: 'time-filter',
   component: 'de-date'
 }
 

frontend/src/styles/deicon/iconfont.css

+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1617248036081'); /* IE9 */
+  src: url('iconfont.eot?t=1617248036081#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1617248036081') format('woff'),
+  url('iconfont.ttf?t=1617248036081') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('/@/icons/svg/iconfont.svg?t=1617248036081#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shuru:before {
+  content: "\e6ab";
+}
+
+.icon-tree:before {
+  content: "\e628";
+}
+
+.icon-chaxunsousuo:before {
+  content: "\e615";
+}
+
+.icon-jidu:before {
+  content: "\e624";
+}
+
+.icon-shuzishunxu:before {
+  content: "\e7de";
+}
+
+.icon-Group-:before {
+  content: "\e6a6";
+}
+
+.icon-riqi:before {
+  content: "\e639";
+}
+
+.icon-zuoce-qujian:before {
+  content: "\e6dd";
+}
+
+.icon-liebiao:before {
+  content: "\e66f";
+}
+
+.icon-xialakuang:before {
+  content: "\e8ca";
+}
+
+.icon-xialashu:before {
+  content: "\e8d0";
+}
+
+.icon-zhongzhi:before {
+  content: "\e611";
+}
+
+.icon-ri:before {
+  content: "\e691";
+}
+
+.icon-nian:before {
+  content: "\e692";
+}
+
+.icon-yue:before {
+  content: "\e695";
+}
+

frontend/src/styles/index.scss

@@ -8,7 +8,7 @@
 @import "~fit2cloud-ui/src/styles/index.scss";
 @import './vdrr/common-temp.scss';
 @import '~umy-ui/lib/theme-chalk/index.css';// 引入样式
-
+@import './deicon/iconfont.css';
 // @import '../metersphere/common/css/index.css';
 
 

frontend/src/views/panel/filter/index.vue

@@ -27,7 +27,14 @@
       </div>
 
       <div class="filter-widget-content">
-        <div v-for="(widget, index) in item" :key="widget.name+index" :data-id="widget.name" draggable :data-index="index" class="filter-widget">
+        <div
+          v-for="(widget, index) in item"
+          :key="widget.name+index"
+          :data-id="widget.name"
+          draggable
+          :data-index="index"
+          :class="'filter-widget '+ (widget.defaultClass || '')"
+        >
           <div class="filter-widget-icon">
             <i :class="(widget.icon || 'el-icon-setting') + ' widget-icon-i'" />
           </div>
@@ -92,17 +99,17 @@ export default {
 <style lang="scss" scoped>
 
   .filter-container {
-      width: 240px;
-        overflow: hidden auto;
-        min-height: 24px;
-        padding-top: 0px;
-        padding-bottom: 0px;
-        position: relative;
-        height: 940px;
-        max-height: 976px;
+    width: 240px;
+    overflow: hidden auto;
+    min-height: 24px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    position: relative;
+    height: 940px;
+    max-height: 976px;
   }
   .filter-header {
-      overflow: hidden;
+    overflow: hidden;
     position: relative;
     margin-top: 24px;
     margin-left: 15px;
@@ -115,9 +122,9 @@ export default {
   }
 
   .filter-header-text {
-      font-size: 14px;
-      max-width: 100%;
-      color: gray;
+    font-size: 14px;
+    max-width: 100%;
+    color: gray;
     text-align: left;
     white-space: pre;
     text-overflow: ellipsis;
@@ -131,30 +138,68 @@ export default {
   }
 
   .filter-widget-content {
-      position: relative;
-      margin-left: 5px;
+    position: relative;
+    margin-left: 5px;
   }
 
   .filter-widget {
-      width: 100px;
-      height: 36px;
-      position: relative;
+    width: 100px;
+    height: 36px;
+    position: relative;
     float: left;
     margin-top: 10px;
     margin-left: 10px;
-    background-color: rgba(54,133,242,.1);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a3685f2,endColorstr=#1a3685f2);
     font-size: 12px;
-    border-radius: 2px;
+    border-radius: 10px;
     cursor: pointer;
-    :hover {
+    overflow: hidden;
+  }
+
+  .time-filter {
+    background-color: rgba(54,133,242,.1);
+    .filter-widget-icon {
+        color: #3685f2;
+    }
+    .filter-widget-text {
+        color: #3d4d66;
+    }
+  }
+  .time-filter:hover {
+    background-color: #3685f2;
+    color: #fff;
+    .filter-widget-icon {
         background-color: #3685f2;
         color: #fff;
     }
+    .filter-widget-text {
+        color: #fff;
+    }
+  }
+
+  .text-filter {
+    background-color: rgba(35,190,239,.1);
+    .filter-widget-icon {
+        color: #23beef;
+    }
+    .filter-widget-text {
+        color: #3d4d66;
+    }
+  }
+  .text-filter:hover {
+    background-color: #23beef;
+    color: #fff;
+    .filter-widget-icon {
+        background-color: #23beef;
+        color: #fff;
+    }
+    .filter-widget-text {
+        color: #fff;
+    }
   }
 
   .filter-widget-icon {
-      width: 40px;
+    width: 40px;
     height: 36px;
     text-align: center;
     line-height: 1;
@@ -169,21 +214,22 @@ export default {
     display: flex;
 
     .widget-icon-i {
-        width: 24px;
-        height: 24px;
-        position: relative;
-        flex-shrink: 0;
-        font-size: 24px;
-        margin: auto;
-        font-family: fineui;
-        font-style: normal;
-        -webkit-font-smoothing: antialiased;
-        text-align: center;
+      width: 24px;
+      height: 24px;
+      position: relative;
+      flex-shrink: 0;
+      font-size: 24px;
+      margin: auto;
+      font-family: fineui;
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+      text-align: center;
+
     }
   }
   .filter-widget-text {
-      font-size: 14px;
-      height: 36px;
+    font-size: 14px;
+    height: 36px;
     line-height: 36px;
     text-align: left;
     white-space: pre;
@@ -196,12 +242,11 @@ export default {
     overflow-y: hidden;
     word-break: break-all;
     cursor: pointer;
-    color: #3d4d66;
 
   }
 
   .widget-subject {
-      display: flow-root;
+    display: flow-root;
   }
 
 </style>