feat：chart比较添加显示隐藏的动画

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -20,6 +20,30 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="more1" unicode="&#59140;" d="M728.43042205 383.87533995C728.43042205 179.48184098000002 887.64999519 13.597261969999977 1083.89737647 13.597261969999977c196.49423301 0 355.71380687 165.884579 355.71380689 370.27807798 0 132.31270003-67.63746215 254.50446574-177.73347759 320.66081536a343.37120416 343.37120416 0 0 1-355.46695441-1e-8C796.06788421 638.37980497 728.43042205 516.1880392400001 728.43042205 383.87533995z m1495.92343402 0c0-204.39349897 158.97272142-370.27807799 355.46695444-370.27807798 196.49423301 0 355.46695443 165.884579 355.46695515 370.27807798 0 132.31270003-67.63746215 254.50446574-177.7334776 320.66081536a343.37120416 343.37120416 0 0 1-355.46695441-1e-8c-110.09601541-66.15634967-177.73347756-188.34811534-177.73347758-320.66081535z m1495.6765823 0c0-204.39349897 159.21957314-370.27807799 355.46695442-370.27807798C4271.99162582 13.597261969999977 4431.21119967 179.48184098000002 4431.21119967 383.87533995S4271.99162582 754.1534172 4075.74424523 754.1534172c-196.49423301 0-355.71380687-165.884579-355.71380686-370.27807725z"  horiz-adv-x="5120" />
+
+    
+    <glyph glyph-name="gerenzhongxin" unicode="&#59135;" d="M512 323.54360967a241.82556214 241.82556214 0 1 0 0.06045651 483.71157999A241.82556214 241.82556214 0 0 0 512 323.54360967z m0 409.28976345a167.52465781 167.52465781 0 0 1 0-334.92840343 167.52465781 167.52465781 0 0 1 0 334.92840343zM770.75335147-39.19473315000005H252.8234538C195.69216482-39.19473315000005 149.26165719 12.495480810000004 149.26165719 76.15605947999995c0 8.58480768 0.84638947 16.86733281 2.4787119 25.14985879C183.84271229 266.77505892 315.81901334 384.66501994 467.92729124 384h87.964048c152.04782221 0.90684598 284.02412244-116.98311587 316.36829167-282.69408173 12.39356028-62.27008228-22.79205908-123.9356003-78.71422036-137.47783178-7.67796171-2.11597366-15.11409738-3.02281964-22.79205908-3.02281964zM467.86683474 306.91810206c-119.945479 0.72547645-223.93047034-92.0750823-249.44306653-222.47951661-4.11103432-20.73654193 7.67796171-41.23125863 26.35898567-45.88640071 2.66008141-0.66501994 5.38061851-0.90684598 8.28252595-0.90684597h517.86944034c19.04376299-0.48365124 34.82288113 16.38368158 35.42744457 37.60387556a46.37005112 46.37005112 0 0 1-0.84638946 9.24982762c-25.4521405 130.3439778-129.43713183 223.32590608-249.38261002 222.47951662H467.86683474z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="gengduo" unicode="&#59136;" d="M391.39493333 413.16591667H208.42053333A91.7755 91.7755 0 0 0 116.93333333 504.60506667V687.57946667A91.7755 91.7755 0 0 0 208.42053333 779.06666667h182.9744a91.7755 91.7755 0 0 0 91.43915-91.4872v-182.9744a91.7755 91.7755 0 0 0-91.43915-91.43915zM208.42053333 718.04316667a30.5598 30.5598 0 0 1-30.51175-30.51175v-182.9744c0-16.76945 13.7423-30.4637 30.51175-30.4637h182.9744a30.5598 30.5598 0 0 1 30.4637 30.4637V687.57946667a30.5598 30.5598 0 0 1-30.4637 30.51175H208.42053333z m609.8506-304.9253h-182.9744a91.7755 91.7755 0 0 0-91.43915 91.43915V687.57946667A91.7755 91.7755 0 0 0 635.29673333 779.06666667h182.9744A91.7755 91.7755 0 0 0 909.75833333 687.57946667v-182.9744a91.7755 91.7755 0 0 0-91.4872-91.43915zM635.29673333 718.04316667a30.5598 30.5598 0 0 1-30.4637-30.51175v-182.9744c0-16.76945 13.69425-30.4637 30.4637-30.4637h182.9744a30.5598 30.5598 0 0 1 30.51175 30.4637V687.57946667a30.5598 30.5598 0 0 1-30.51175 30.51175h-182.9744zM391.39493333-13.758333330000028H208.42053333A91.7755 91.7755 0 0 0 116.93333333 77.72886667v182.9744a91.7755 91.7755 0 0 0 91.4872 91.43915h182.9744a91.7755 91.7755 0 0 0 91.43915-91.43915v-182.9744A91.7755 91.7755 0 0 0 391.39493333-13.758333330000028z m-182.9744 304.9253a30.5598 30.5598 0 0 1-30.51175-30.4637v-182.9744c0-16.8175 13.7423-30.51175 30.51175-30.51175h182.9744a30.5598 30.5598 0 0 1 30.4637 30.51175v182.9744a30.5598 30.5598 0 0 1-30.4637 30.4637H208.42053333zM818.27113333-13.758333330000028h-182.9744a91.7755 91.7755 0 0 0-91.43915 91.4872v182.9744a91.7755 91.7755 0 0 0 91.43915 91.43915h182.9744a91.7755 91.7755 0 0 0 91.4872-91.43915v-182.9744a91.7755 91.7755 0 0 0-91.4872-91.4872z m-182.9744 304.9253a30.5598 30.5598 0 0 1-30.4637-30.4637v-182.9744c0-16.8175 13.69425-30.51175 30.4637-30.51175h182.9744a30.5598 30.5598 0 0 1 30.51175 30.51175v182.9744a30.5598 30.5598 0 0 1-30.51175 30.4637h-182.9744z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tuichu" unicode="&#59137;" d="M675.65514702 649.10127247a37.60387474 37.60387474 0 0 0 38.5711764 64.32559943A394.41749129 394.41749129 0 0 0 904.96623587 375.23382360999994c0-217.82437455-175.92809597-394.41749129-392.96653839-394.41749129S119.03315992 157.40944824999997 119.03315992 375.23382360999994a394.4779478 394.4779478 0 0 0 191.10264985 338.43487351 37.36204953 37.36204953 0 0 0 51.38793223-12.87721151 37.66433124 37.66433124 0 0 0-12.87721151-51.56930094 319.2097418 319.2097418 0 0 1-154.76835931-274.04881756c0-176.29083421 142.43525555-319.2097418 318.1215263-319.2097418 175.68627075 0 318.12152631 142.91890679 318.12152713 319.2097418a319.2097418 319.2097418 0 0 1-154.46607759 273.86744885zM511.99969748 807.19473315a37.48296173 37.48296173 0 0 0 37.42250604-37.60387475v-300.46826053a37.48296173 37.48296173 0 1 0-74.84501125 0V769.5908584A37.48296173 37.48296173 0 0 0 511.99969748 807.19473315z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="view1" unicode="&#59138;" d="M1134.69837213 268.89536977c-117.54955097-158.7701601-289.4387478-259.17551542-481.37920001-259.17551543S289.41498305 110.12520964999999 171.93997294 268.89536977c-51.87982727 70.14212214-51.87982727 174.42355627 0 244.49113914C289.41498305 672.1566698199999 461.37872074 772.6365644 653.31917212 772.6365644s363.82964902-100.40535532 481.37920001-259.25005549c51.87982727-70.06758289 51.87982727-174.34901622 0-244.49113914z m-52.1779867 186.94627336C973.46839264 613.12100455 816.56173148 703.31438205 652.12653286 703.31438205S330.78467309 613.12100455 221.7326803 455.84164313a117.02777059 117.02777059 0 0 1 0-129.32686753c109.05199279-157.27936062 265.8841139-247.47273812 430.39385256-247.4727381s321.34185977 90.1933775 430.39385257 247.4727381a117.02777059 117.02777059 0 0 1 0 129.32686753zM653.61733234 148.51329993000002a242.85125957 242.85125957 0 1 0 0 485.70251914 242.85125957 242.85125957 0 0 0 0-485.70251914z m0 416.30579594a173.45453637 173.45453637 0 1 1 0-346.90907273 173.45453637 173.45453637 0 0 1 0 346.90907273z"  horiz-adv-x="1303" />
+
+    
+    <glyph glyph-name="yuyanqiehuan" unicode="&#59139;" d="M576.01387129 272.72245598999996L474.57560481 372.75511104l1.17134246 1.17134324a698.1201686 698.1201686 0 0 1 148.17483481 260.38945151h117.01712257V714.26003585H461.39800085V793.96989774H381.57100529v-79.70986189H102.03010226v-79.35845844h446.04724874a629.4209275 629.4209275 0 0 0-126.56356392-213.71145119 628.65955494 628.65955494 0 0 0-92.24322699 133.53305296H249.38499728a700.05288361 700.05288361 0 0 1 119.00840404-181.73379918l-203.05223307-200.29957905 56.4587114-56.45871141 199.71390743 199.36250478 124.16231177-123.98661084 30.33777244 81.11547251z m224.83920489 202.29086131h-79.88556282L541.28356447-3.3629861099999516h79.8855628l44.92098703 119.59407565h189.64036172l44.92098703-119.59407565H980.53702587l-179.68394969 478.37630341z m-104.83515934-279.07236587L760.91029516 368.77254655l64.89237832-172.77302788h-129.78475664z"  horiz-adv-x="1097" />
+
+    
+    <glyph glyph-name="zhongduan" unicode="&#59141;" d="M918.97153443 682.74641724v-620.03973389H168.70090952V682.74641724h750.27062491m0 62.00397338H168.70090952A62.22944238 62.22944238 0 0 1 106.15581055 682.74641724v-620.03973389c0-34.27128711 27.95815527-62.00397339 62.54509897-62.00397339h750.27062491a62.22944238 62.22944238 0 0 1 62.54509897 62.00397339V682.74641724c0 34.27128711-28.00324907 62.00397339-62.54509897 62.00397338zM148.99491943 502.01047154h771.10395996V444.87662842H148.99491943V502.01047154zM252.53028155 616.23306396h60.69625322v-57.13384311H252.53028155V616.23306396z m121.34741264 1e-8h60.69625322v-57.13384312H373.92278799V616.23306396z m121.39250645 0h60.69625322v-57.13384312H495.27020064V616.23306396zM786.21539068 230.68108398000004H539.95815527c-2.97619072 0-5.36616206-3.02128452-5.36616205-6.67388222v-40.17857476c0-3.69769151 2.38997134-6.71897603 5.36616205-6.71897602h246.3023292c2.97619072 0 5.36616206 3.02128452 5.36616207 6.71897602v40.13348096c0 3.69769151-2.38997134 6.71897603-5.36616206 6.71897602zM265.29182661 145.00286620999998a30.8892522 30.8892522 0 0 0-29.49134443 23.58405679 32.87337935 32.87337935 0 0 0 13.75360864 36.07503906l109.21718076 68.85823081-109.21718076 68.81313701a32.51262896 32.51262896 0 0 0-14.88095362 28.09343667 32.42244136 32.42244136 0 0 0 15.7377358 27.55231108 29.31096924 29.31096924 0 0 0 30.6186894-0.49603178L433.98772803 301.02741016000004a32.46753516 32.46753516 0 0 0 14.88095361-27.55231109 32.46753516 32.46753516 0 0 0-14.88095362-27.55231109L281.02956241 149.51224608999996a29.53643823 29.53643823 0 0 0-15.7828296-4.55447368z"  horiz-adv-x="1075" />
+
+    
+    <glyph glyph-name="tongbi" unicode="&#59134;" d="M215.25663296 480.73022508c0 4.99252809-0.56165961 9.92264861-1.56016455 14.79036328l94.98283953 76.26086066c21.59268278-10.29708808 46.92976099-8.61211009 66.96227839 4.36846176l85.68425724-51.61025549c-0.12481343-1.80979142-0.56165961-3.43236269-0.56165962-5.1797474a69.89538819 69.89538819 0 0 1 139.79077637 0c0 7.36397827-1.49775867 14.22870367-3.55717612 20.90620974l141.35094176 144.78330445a69.77057475 69.77057475 0 1 1-46.43050811 65.52692642c0-7.36397827 1.37294524-14.3535171 3.55717613-21.03102317l-141.35094091-144.78330445a67.39912456 67.39912456 0 0 1-23.52728764 4.36846176c-13.97907763 0-27.14686964-4.24364833-38.06802321-11.35800059L407.15691772 629.2579249600001c0.18722015 1.93460486 0.56165961 3.74439544 0.56165962 5.80381289a69.70816803 69.70816803 0 1 1-137.79376565-15.16480273L175.12919148 543.76088704a68.83447568 68.83447568 0 0 1-29.70553998 6.86472622 69.83298146 69.83298146 0 1 1 69.89538818-69.89538818z m662.00917702-122.69136962a69.89538819 69.89538819 0 0 1-69.83298147-69.89538818c0-7.48879171 1.49775867-14.3535171 3.61958201-21.21824249l-141.35094094-144.5960843a68.70966309 68.70966309 0 0 1-23.58969351 4.36846176c-7.92563789 0-15.28961616-1.56016455-22.27915498-4.05642901L519.30157155 227.23462947999997c2.49626363 6.98953882 3.9940223 14.41592382 3.9940223 22.27915499a69.89538819 69.89538819 0 0 1-139.66596291 0c0-5.17974739 0.74887892-10.29708808 1.80979141-15.16480274l-94.85802694-75.94882878a69.83298146 69.83298146 0 1 1 38.50487022-48.24029868l94.92043282 76.13604809c8.98654955-4.11883573 18.90919901-6.61509936 29.45591395-6.61509936 7.86323117 0 15.22720945 1.49775867 22.27915499 3.86920886l104.53104952-104.59345624a68.64725637 68.64725637 0 0 1-3.9940223-22.15434155 69.89538819 69.89538819 0 0 1 139.66596293 0c0 7.30157155-1.37294524 14.3535171-3.55717613 20.96861646l141.41334849 144.78330445c7.48879171-2.68348378 15.16480273-4.36846176 23.40247336-4.36846176a69.89538819 69.89538819 0 0 1 0.06240672 139.85318224z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="moban" unicode="&#58884;" d="M679-0.5H246.7c-39.7 0-72 31.8-72 70.9V614.3c0 39.1 32.3 70.9 72 70.9H679c39.7 0 72-31.8 72-70.9v-543.8c0-39.1-32.3-71-72-71zM246.7 637.9c-13.3 0-24-10.6-24-23.6v-543.8c0-13 10.8-23.6 24-23.6H679c13.3 0 24 10.6 24 23.6V614.3c0 13-10.8 23.6-24 23.6H246.7z m72.1-94.5H607v-23.6H318.8v23.6zM619 507.9H306.8v47.3H619v-47.3z m-288.2 23.7H595 330.8z m-12-82.8H607v-23.6H318.8v23.6zM619 413.3H306.8v47.3H619v-47.3zM330.8 437H595 330.8z m444.5-354.7v47.3c13.1 0 23.8 10.7 23.8 23.8V696.9c0 13.1-10.7 23.8-23.8 23.8H342.6c-13.1 0-23.8-10.7-23.8-23.8h-48c0 39.2 32.2 71.1 71.8 71.1h432.7c39.6 0 71.8-31.9 71.8-71.1v-543.5c0-39.2-32.2-71.1-71.8-71.1zM318.8 354.2H607v-23.6H318.8v23.6zM619 318.7H306.8V366H619v-47.3z m-288.2 23.7H595 330.8z"  horiz-adv-x="1024" />
 
     

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -1371,6 +1371,11 @@ export default {
       this.screenModal = true
       this.isGreyScreen = []
       this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
       this.$refs.pickTime.$refs.timePicker.setCustomTime(this.stableFilter)
       this.seriesItemScreen = this.seriesItem
       // this.seriesItemScreen = this.seriesItem;

nezha-fronted/src/components/common/multipleTime.vue

@@ -53,6 +53,37 @@
     margin-left: 4px;
   }
   .calendar-popover-text {}
+  .multiple-time-box{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tongbi-box{
+    line-height: 50px;
+    margin-right: 20px;
+  }
+  .nz-icon-tongbi{
+    background: #FFFFFF;
+    border: 1px solid #DEDEDE;
+    border-radius: 2px;
+    padding: 6px 8px;
+  }
+  .multiple-time-datepicker-enter-active {
+    transform-origin: 100% 50%;
+    animation: bounce-in .6s;
+  }
+  .multiple-time-datepicker-leave-active {
+    transform-origin: 100% 50%;
+    animation: bounce-in .6s reverse;
+  }
+  @keyframes bounce-in {
+    0% {
+      transform: scaleX(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
 </style>
 <style lang="scss">
   .panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
@@ -75,7 +106,10 @@
   }
 </style>
 <template>
-  <div class="calendar top-tools" id="panel-calender">
+  <div class="multiple-time-box">
+    <div :class="showDropdown?'tongbi-box':''"><i class="nz-icon nz-icon-tongbi" @click="changeShowDropdown" /></div>
+    <transition name="multiple-time-datepicker">
+      <div class="calendar top-tools" id="panel-calender" v-show="showDropdown">
       <el-date-picker prefix-icon=" " size="mini" ref="calendar"
                       format="yyyy/MM/dd HH:mm:ss" class="panel-time-picker-hidden" @change="dateChange" v-model="startTime" type="datetime"
                       popper-class="panel-time-picker-popper"
@@ -128,6 +162,8 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    </transition>
+  </div>
 </template>
 
 <script>
@@ -145,11 +181,11 @@ export default {
     return {
       startTime: '',
       searchTime: [],
-      showSelect: false,
+      showDropdown: false,
       step: '',
       showTime: {
-        id: 4,
+        id: 12,
-        text: this.$t('dashboard.panel.beforeOneHour')
+        text: this.$t('dashboard.panel.noDate')
       },
       timeData: [
         {
@@ -297,23 +333,6 @@ export default {
             } */
       this.$emit('change', this.searchTime)
     },
-    setCustomTime (timeGroup) {
-      if (timeGroup.length === 2) {
-        this.$set(this.searchTime, 0, timeGroup[0])
-        this.$set(this.searchTime, 1, timeGroup[1])
-
-        this.nowTimeType = {
-          id: 4,
-          text: this.$t('dashboard.panel.beforeOneHour'),
-          type: 'hour',
-          value: 1
-        }
-        this.$set(this.showTime, 'id', this.nowTimeType.id)
-        this.$set(this.showTime, 'value', this.nowTimeType.value)
-        this.$set(this.showTime, 'type', this.nowTimeType.type)
-        this.$set(this.showTime, 'text', this.nowTimeType.text)
-      }
-    },
     // left(){},
     // right(){},
     timeChange (val, from) {
@@ -406,6 +425,17 @@ export default {
       } else {
         this.isPopoverDisabled = false
       }
+    },
+    changeShowDropdown () {
+      this.showDropdown = !this.showDropdown
+      if (!this.showDropdown) {
+        this.searchTime = []
+        this.showTime = this.nowTimeType = {
+          id: 12,
+          text: this.$t('dashboard.panel.noDate')
+        }
+        this.$emit('change', this.searchTime)
+      }
     }
   }
 }

nezha-fronted/src/components/common/pickTime.vue

@@ -171,6 +171,6 @@ export default {
     margin-top: -1px;
   }
   .multiple-time{
-    margin-right: 10px;
+    margin-right: 20px;
   }
 </style>