Merge remote-tracking branch 'origin/main' into main

2021-04-01 14:42:57 +08:00 · 2021-04-01 14:42:57 +08:00 · 10feea18a9
commit 10feea18a9
parent 31b291a3ec 7fe40040a2
16 changed files with 257 additions and 45 deletions
--- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
@ -1,7 +1,7 @@
 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',
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@ -1,7 +1,7 @@
 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
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
@ -1,7 +1,7 @@
 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'
 }

--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
@ -1,7 +1,7 @@
 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'
 }

--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
@ -1,7 +1,7 @@
 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'
 }

--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@ -1,7 +1,7 @@
 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'
 }

--- a/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeQuarterServiceImpl.js
@ -1,7 +1,7 @@
 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'
 }

--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@ -1,7 +1,7 @@
 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'
 }

--- a/frontend/src/icons/svg/iconfont.svg
+++ b/frontend/src/icons/svg/iconfont.svg
--- a/frontend/src/styles/deicon/iconfont.css
+++ b/frontend/src/styles/deicon/iconfont.css
@ -0,0 +1,77 @@
+@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";
+}
+
--- a/frontend/src/styles/deicon/iconfont.eot
+++ b/frontend/src/styles/deicon/iconfont.eot
--- a/frontend/src/styles/deicon/iconfont.ttf
+++ b/frontend/src/styles/deicon/iconfont.ttf
--- a/frontend/src/styles/deicon/iconfont.woff
+++ b/frontend/src/styles/deicon/iconfont.woff
--- a/frontend/src/styles/deicon/iconfont.woff2
+++ b/frontend/src/styles/deicon/iconfont.woff2
--- a/frontend/src/styles/index.scss
+++ b/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';


--- a/frontend/src/views/panel/filter/index.vue
+++ b/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>