feat:图表全屏时添加定时刷新，修改图表legend交互等

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

@@ -20,6 +20,12 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="unlock" unicode="&#59113;" d="M439.44650239 141.46849166000004a33.32868125 33.32868125 0 0 1 35.31474761 35.25268364V282.66541904999997a35.31474761 35.31474761 0 0 1-70.62949614 0v-105.94424375a33.32868125 33.32868125 0 0 1 35.31474853-35.25268364zM577.1678125 517.8281253H222.40665386A145.231125 145.231125 0 0 1 77.54791636 372.96938780000005V83.37604166000006a145.231125 145.231125 0 0 1 144.8587375-144.8587375h434.45208364A145.231125 145.231125 0 0 1 801.65541011 83.37604166000006V372.96938780000005A145.231125 145.231125 0 0 1 656.8587375 517.8281253H577.1678125z m152.05822886-144.8587375V83.37604166000006a72.6155625 72.6155625 0 0 0-72.36730386-72.36730386h-434.45208364A72.6155625 72.6155625 0 0 0 149.97728511 83.37604166000006V372.96938780000005a72.6155625 72.6155625 0 0 0 72.42936875 72.42936875h434.45208364A72.6155625 72.6155625 0 0 0 729.22604136 372.96938780000005zM884.3875 641.95729166a124.12916636 124.12916636 0 0 1-247.94801011 9.3096875L636.12916636 641.95729166v-124.12916636H574.06458364V641.95729166a186.19375 186.19375 0 1 0 372.3875 0v-31.03229136a31.03229136 31.03229136 0 1 0-62.06458364 0V641.95729166z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="lock" unicode="&#59112;" d="M522.84441845 152.13515832999997a33.32868125 33.32868125 0 0 1 35.31474853 35.25268364V293.33208572a35.31474761 35.31474761 0 0 1-70.62949614 0v-105.94424375a33.32868125 33.32868125 0 0 1 35.31474761-35.25268364zM660.56572948 528.49479197H305.80457084A145.231125 145.231125 0 0 1 160.94583334 383.63605447V94.04270832999998a145.231125 145.231125 0 0 1 144.8587375-144.8587375h434.45208364A145.231125 145.231125 0 0 1 885.05332709 94.04270832999998V383.63605447A145.231125 145.231125 0 0 1 740.25665448 528.49479197H660.56572948z m152.05822886-144.8587375V94.04270832999998a72.6155625 72.6155625 0 0 0-72.36730386-72.36730386h-434.45208364A72.6155625 72.6155625 0 0 0 233.37520209 94.04270832999998V383.63605447a72.6155625 72.6155625 0 0 0 72.42936875 72.42936875h434.45208364A72.6155625 72.6155625 0 0 0 812.62395834 383.63605447zM533.33333334 838.81770833a186.19375 186.19375 0 0 0 186.19375-186.19375v-124.12916636H657.4624997V652.62395833a124.12916636 124.12916636 0 0 1-247.94801011 9.3096875L409.20416698 652.62395833v-124.12916636H347.13958334V652.62395833a186.19375 186.19375 0 0 0 186.19375 186.19375z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="batch-edit" unicode="&#58880;" d="M744.7552 374.88127999999995l-58.71616-58.7264-174.92992-174.91968c-0.34816-0.28672-0.7424-0.4352-1.08544-0.73728-1.42848-1.28-3.01568-2.37056-4.736-3.20512-0.5888-0.25088-1.18784-0.64512-1.87904-0.8448-2.22208-0.83456-4.63872-1.3824-7.15264-1.3824H437.59104a21.06368 21.06368 0 0 0-21.07392 21.0688v58.72128c0.0512 2.46272 0.50176 4.87936 1.3824 7.15264 0.25088 0.58368 0.59392 1.22368 0.93696 1.8688 0.8448 1.72544 1.87392 3.30752 3.15904 4.736l-0.05632-0.0512c0.30208 0.35328 0.39936 0.78848 0.74752 1.13664l174.96576 174.9248 58.71616 58.72128a21.04832 21.04832 0 0 0 29.75744 0.0512l58.6752-58.7264a21.00224 21.00224 0 0 0-0.04608-29.78816z m-132.29056-14.90944l-145.17248-145.16224 28.96384-28.91776 145.27488 145.17248-28.96384 28.96384-0.1024-0.05632z m29.8496 29.80352l28.96384-28.90752 28.91776 28.90752-28.91776 28.91264-28.96384-28.91264zM862.44352 659.54304H304.91648c-41.18528 0-75.05408-33.86368-75.05408-75.04896v-557.65504c0-41.1904 33.86368-75.05408 75.05408-75.05408h557.65504c41.1904 0 75.05408 33.86368 75.05408 75.05408V584.4940799999999c-0.13312 41.3184-33.86368 75.04896-75.18208 75.04896z m-4.18304-584.84736c0-24.05888-19.74272-43.80672-43.80672-43.80672H352.768c-24.05888 0-43.8016 19.74272-43.8016 43.80672V536.50944c0 24.05888 19.74272 43.8016 43.8016 43.8016h461.81376c24.05888 0 43.8016-19.74272 43.8016-43.8016v-461.81376h-0.12288zM263.33696 156.93312000000003h-20.00384c-24.05888 0-43.8016 19.74272-43.8016 43.8016V662.42048c0 24.05888 19.7376 43.8016 43.8016 43.8016h461.81376c24.05888 0 43.8016-19.74272 43.8016-43.8016v-38.57408h79.24224V710.4102399999999c0 41.18528-33.86368 75.04896-75.05408 75.04896H195.34336c-41.18528 0-75.04896-33.86368-75.04896-75.04896v-557.66016c0-41.18528 33.86368-75.04896 75.04896-75.04896h67.9936v79.232z"  horiz-adv-x="1024" />
 
     

nezha-fronted/src/components/charts/chart-alert-list.vue

@@ -20,7 +20,7 @@
               <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartInfo.title}}</span>
@@ -61,8 +61,9 @@
           <div slot="title">
             <span class="nz-dialog-title">{{data.title}}</span>
             <div class="float-right panel-calendar dialog-tool">
+              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :show-time-picker="false" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
             </div>
-            <span class="float-right  dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
+<!--            <span class="float-right  dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <alertMessageTable
             :tableData="storedScreanTableData"
@@ -103,13 +104,13 @@
           <div slot="title">
             {{$t("project.endpoint.dialogTitle")}}
             <div class="float-right panel-calendar dialog-tool" style="display: flex">
-              <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
+              <pick-time :refresh-data-func="queryChartDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
             </div>
           </div>
           <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit" ></chart>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable&&!isLock"></span>
     </div>
   </div>
 </template>
@@ -150,7 +151,8 @@ export default {
       default: 0,
     },
     chartInfo:{},
-    id:''
+    id:'',
+    isLock:{type:Boolean,default:false}
   },
   data() {
     return {
@@ -548,7 +550,7 @@ export default {
         if(this.searchLabel.orderBy){
           queryParam.orderBy=this.searchLabel.orderBy;
         }
-        this.startLoading(filterType);
+        // this.startLoading(filterType);
         this.$get('/alert/message', queryParam).then(response => {
           if (response.code == 200) {
             this.storedTableData = response.data.list;
@@ -784,7 +786,9 @@ export default {
         this.tableHeight = `calc(100% - 34px)`;
         this.$nextTick(() => {
           this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
+          if(this.ps){
             this.ps.update();
+          }
         });
       },
       showLoad(chartItem) {
@@ -817,7 +821,6 @@ export default {
         //this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
         //this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
         //this.showTable = false;
-        this.searchTime = [...time];
         this.seriesItemScreen = [];
         for(let i=0;i<8;i++){
           this.seriesItemScreen.push({//表格数据
@@ -828,7 +831,7 @@ export default {
             value: '',//数值
           });
         }
-        this.startLoading('screen');
+        // this.startLoading('screen');
         //this.tableLoading = true;
         //this.firstShow = false;
         this.$emit('on-search-data', this.data.id, this.searchTime);

nezha-fronted/src/components/charts/chart-detail.vue

@@ -7,7 +7,7 @@
     <div class="resize-box" ref="resizeBox">
       <div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
         <loading :ref="'localLoading' + chartIndex"></loading>
-        <div class="clearfix chart-title" :class="{'drag-disabled': !data.draggable}" :id="'chartTitle' + chartIndex">
+        <div class="clearfix chartTitle" :class="{'drag-disabled': !data.draggable,}" :id="'chartTitle' + chartIndex">
           <el-popover
             v-if="isError"
             :close-delay="10"
@@ -20,7 +20,8 @@
               <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
+          <span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span></span>
+
         </div>
         <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
           <div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
@@ -250,7 +251,7 @@
           </div>
         </div>
       </div>
-      <span v-if="data.resizable" class="vue-resizable-handle" @mousedown="startResize"></span>
+      <span v-if="data.resizable&&!isLock" class="vue-resizable-handle" @mousedown="startResize"></span>
     </div>
     <!--preview -->
     <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
@@ -286,7 +287,8 @@
       chartIndex:{
         type: Number,
         default: 0,
-      }
+      },
+      isLock:{type:Boolean,default:false}
     },
     data() {
       return {

nezha-fronted/src/components/charts/chart-list.vue

@@ -51,7 +51,7 @@
 
     <span class="temp-dom"></span>
 
-    <draggable v-model="dataList" @start="start" @end="end" :move="move" :key
+    <draggable v-model="dataList" @start="start" @end="end" :move="move" :key :disabled="panelLock"
                :scroll-sensitivity="150"
                :options="{
                  group:{name:'chartGroup',pull:'false'},
@@ -75,6 +75,7 @@
                           @on-drag-chart="editChartForDrag"
                           @on-edit-chart-block="editData"
                           :panel-id="filter.panelId"
+                          :is-lock="panelLock"
                           :chart-index="index"
                           :chart-data="item"></line-chart-block>
 
@@ -86,6 +87,7 @@
                      @on-drag-chart="editChartForDrag"
                      @on-edit-chart-block="editData"
                      :chart-data="item"
+                     :is-lock="panelLock"
                      :panel-id="filter.panelId"
                      :chart-index="index"></chart-single-stat>
 
@@ -96,6 +98,7 @@
                       @on-duplicate-chart-block="duplicateChart"
                       @on-drag-chart="editChartForDrag"
                       @on-edit-chart-block="editData"
+                      :is-lock="panelLock"
                       :panel-id="filter.panelId"
                       :chart-data="item"
                       :chart-index="index"></chart-table>
@@ -106,6 +109,7 @@
                      @on-remove-chart-block="removeChart"
                      @on-duplicate-chart-block="duplicateChart"
                      @on-drag-chart="editChartForDrag"
+                    :is-lock="panelLock"
                      @on-edit-chart-block="editData"
                      :panel-id="filter.panelId"
                      :chart-data="item"
@@ -115,6 +119,7 @@
                           :from="from" :panel-id="filter.panelId"
                           :chart-index="index"
                           @on-refresh-data="refreshChart"
+                          :is-lock="panelLock"
                           :chart-data="item"
                           :editChartId="'editChartId' + item.id"
         ></chart-detail>
@@ -125,6 +130,7 @@
                     @on-duplicate-chart-block="duplicateChart"
                     @on-drag-chart="editChartForDrag"
                     @on-edit-chart-block="editData"
+                    :is-lock="panelLock"
                     :panel-id="filter.panelId"
                     :chart-data="item"
                     :chart-index="index"
@@ -135,6 +141,7 @@
                           :chart-index="index"
                           v-if="item.type  === 'alertList'"
                           :editChartId="'editChartId' + item.id"
+                           :is-lock="panelLock"
                           :chart-info="item"
                           @on-refresh-data="refreshChart"
                           @on-search-data="searchData"
@@ -170,7 +177,8 @@
       additionalInfo:{},
       draggable: {type: Boolean, default: true},
       detail: Object,
-      from: {type: String}
+      from: {type: String},
+      panelLock:{type:Boolean,default:false}
     },
 
     components: {
@@ -219,7 +227,7 @@
         this.tempDom.width = span.offsetWidth;
       },
       start (event) {
-        //console.log('start', event, this.dataList);
+        // console.log('start', event, this.dataList);
         event.item.querySelector('.chartTitle').style.background = '#d8dce1';
         let projectAndAssetFeatureInfos = event.item.querySelectorAll(".feature-content");
         if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -20,7 +20,7 @@
               <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
@@ -53,9 +53,10 @@
           <div slot="title">
             <span class="nz-dialog-title">{{data.title}}</span>
             <div class="float-right panel-calendar dialog-tool">
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
+<!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
+              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
             </div>
-            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
+<!--            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <div class="single-stat-screen-container"  >
             <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}"  class="single-stat-content" id="chartScreenContainer" ref="chartScreenContainer">
@@ -66,7 +67,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
     </div>
   </div>
 </template>
@@ -100,7 +101,8 @@ export default {
     chartIndex:{
       type: Number,
       default: 0,
-    }
+    },
+    isLock:{type:Boolean,default:false}
   },
   data() {
     return {
@@ -343,7 +345,6 @@ export default {
       },
       //全屏时间条件查询
       dateChange(time) {
-        this.searchTime = [...time];
         this.seriesItemScreen = [];
         this.serieSingleStat = "";
         this.startLoading('screen');
@@ -383,7 +384,7 @@ export default {
           this.searchTime = [];
           this.$set(this.searchTime, 0, this.oldSearchTime[0]);
           this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-          this.$refs.calendarPanel.setCustomTime(this.searchTime);
+          // this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
           this.seriesItemScreen = this.seriesItem;
           this.screenModal = true;

nezha-fronted/src/components/charts/chart-table.vue

@@ -21,7 +21,7 @@
                 <span class="panel-info-corner-inner"></span>
             </span>
           </el-popover>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
@@ -78,10 +78,11 @@
           <div slot="title">
             <span class="nz-dialog-title">{{data.title}}</span>
             <div class="float-right panel-calendar dialog-tool">
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
+<!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"-->
-                           @change="dateChange"></time-picker>
+<!--                           @change="dateChange"></time-picker>-->
+              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
             </div>
-            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
+<!--            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
                     @sort-change="tableDataSortScreen" tooltip-effect="light">
@@ -105,7 +106,7 @@
                       @pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
           <loading :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
-        <span class="vue-resizable-handle" @mousedown="startResize"></span>
+        <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
       </div>
     </div>
   </div>
@@ -140,7 +141,8 @@
       chartIndex: {
         type: Number,
         default: 0,
-      }
+      },
+      isLock:{type:Boolean,default:false}
     },
     data() {
       return {
@@ -314,7 +316,6 @@
       },
       //全屏时间条件查询
       dateChange(time) {
-        this.searchTime = [...time];
         this.seriesItemScreen = [];
         for (let i = 0; i < 8; i++) {
           this.seriesItemScreen.push({//表格数据
@@ -361,7 +362,7 @@
         this.searchTime = [];
         this.$set(this.searchTime, 0, this.oldSearchTime[0]);
         this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-        this.$refs.calendarPanel.setCustomTime(this.searchTime);
+        // this.$refs.calendarPanel.setCustomTime(this.searchTime);
 
         this.seriesItemScreen = this.seriesItem;
         this.screenModal = true;

nezha-fronted/src/components/charts/chart-url.vue

@@ -8,7 +8,7 @@
       <div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
         <loading  :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
@@ -51,7 +51,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
     </div>
   </div>
 </template>
@@ -86,7 +86,7 @@ export default {
       type: Number,
       default: 0,
     },
-
+    isLock:{type:Boolean,default:false}
   },
   data() {
     return {

nezha-fronted/src/components/charts/chart.scss

@@ -276,13 +276,13 @@
     height: 100%;
     position: relative;
     background-color: white;
-    .chart-title:hover {
+    .chartTitle:hover {
       background-color:#d8dce1;
     }
-    .chart-title:not(.drag-disabled) {
+    //.chartTitle:not(.drag-disabled) {
-      cursor: move;
+    //  cursor: move;
-    }
+    //}
-    .chart-title {
+    .chartTitle {
       text-align: center;
       width: 100%;
       line-height: 30px;
@@ -291,7 +291,7 @@
       .nz-chart-top{
         width:100%;
       }
-      .el-dropdown-link {
+      .move-able .el-dropdown-link {
         cursor: move;
       }
       .nz-icon-arrow-down {
@@ -505,7 +505,7 @@
       .nz-chart-top{
         width:100%;
       }
-      .el-dropdown-link {
+      .move-able .el-dropdown-link {
         cursor: move;
       }
       .nz-icon-arrow-down {

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

@@ -34,7 +34,7 @@
            </span>
           </el-popover>
           </span>
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
@@ -130,10 +130,10 @@
             <span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
             <div class="float-right panel-calendar dialog-tool">
 
-              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>
+<!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"  @change="dateChange"></time-picker>-->
-              <!--<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>-->
+              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
             </div>
-            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
+<!--            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
           <div class="chart-no-data" v-show="noData">No Data</div>
@@ -174,7 +174,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'&&!isLock"></span>
     </div>
   </div>
 </template>
@@ -218,7 +218,8 @@
         default:false,
       },
       tempDom: Object,
-      from: {type: String}
+      from: {type: String},
+      isLock:{type:Boolean,default:false}
     },
     computed: {
       getButtonCode() {
@@ -344,8 +345,25 @@
           })
         }
       },
-
       clickLegend(legendName,index){
+        let curIsGrey=this.isGrey[index];
+        let echart=getChart(this.chartIndex)
+        if(echart) {
+          if(curIsGrey){
+            echart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            })
+          }else{
+            echart.dispatchAction({
+              type: 'legendUnSelect',
+              name: legendName
+            })
+          }
+          this.$set(this.isGrey,index,!curIsGrey)
+        }
+      },
+      clickLegend2(legendName,index){
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGrey[index];
         if(getChart(this.chartIndex)){
@@ -393,6 +411,23 @@
         }
       },
       clickScreenLegend(legendName,index){
+        let curIsGrey=this.isGreyScreen[index];
+        if(this.echartModalStore) {
+          if(curIsGrey){
+            this.echartModalStore.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            })
+          }else{
+            this.echartModalStore.dispatchAction({
+              type: 'legendUnSelect',
+              name: legendName
+            })
+          }
+          this.$set(this.isGreyScreen,index,!curIsGrey)
+        }
+      },
+      clickScreenLegend2(legendName,index){
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGreyScreen[index];
         if(this.echartModalStore){
@@ -645,8 +680,7 @@
                 if(i===0){
                   let value=item.data[0];
                   let t_date = new Date(value);
-                  str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                  str += bus.timeFormate(t_date)
-                    + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
                   str +=`<br/>`;
                 }
                 let val =item.data[1]?parseFloat(Number(item.data[1]).toFixed(2)):'';
@@ -879,8 +913,7 @@
                           if(i===0){
                             let value=item.data[0];
                             let t_date = new Date(value);
-                            str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                            str += bus.timeFormate(t_date)
-                              + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
                             str +=`<br/>`;
                           }
                           let val = parseFloat(Number(item.data[1]).toFixed(2));
@@ -1043,8 +1076,7 @@
                         if(i===0){
                           let value=item.data[0];
                           let t_date = new Date(value);
-                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                          str += bus.timeFormate(t_date)
-                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
                           str +=`<br/>`;
                         }
                         let val = parseFloat(Number(item.data[1]).toFixed(2));
@@ -1262,7 +1294,7 @@
         //this.searchTime = this.oldSearchTime;
         this.$set(this.searchTime, 0, this.oldSearchTime[0]);
         this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-        this.$refs.calendarPanel.setCustomTime(this.searchTime);
+        // this.$refs.calendarPanel.setCustomTime(this.searchTime);
         this.screenModal = true;
         this.isGreyScreen=[];
 
@@ -1300,7 +1332,6 @@
         });
       },
       dateChange(time) {
-        this.searchTime = [...time];
         this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
         this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
         this.echartModalStore.clear();

nezha-fronted/src/components/charts/richTextEditor.vue

@@ -11,7 +11,7 @@
   export default {
     name: "richTextEditor",
     props:{
-      editData:String
+      editData:String,
     },
     data(){
       return {

nezha-fronted/src/components/charts/text-chart.vue

@@ -8,7 +8,7 @@
       <div class="chart-text"  :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading  :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
-          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
@@ -52,7 +52,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
     </div>
   </div>
 </template>
@@ -83,7 +83,8 @@
       chartIndex:{
         type: Number,
         default: 0,
-      }
+      },
+      isLock:{type:Boolean,default:false}
     },
     data() {
       return {

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -55,6 +55,9 @@
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
         </template>
+
+        <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light " style="margin-left: 20px;" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model"  @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
+
         <button :title="$t('overall.syncChart')" @click="syncChart" style="margin-left: 20px;" v-has="['model_chart_sync', 'asset_chart_sync']" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-sync nz-icon"></i>
@@ -84,7 +87,7 @@
       <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
         <div class="box-content">
           <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
-                      @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
+                      @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
         </div>
       </div>
     </div>
@@ -112,6 +115,7 @@
     },
     data() {
       return {
+        panelLock:true,
         showTopBtn: false, //top按钮
         visible: false,
         rightBox: { //面板弹出框相关

nezha-fronted/src/components/common/js/tools.js

@@ -614,3 +614,9 @@ export const tableSet = {
 export function blankPromise() {
   return new Promise(resolve => {resolve();});
 }
+
+export function clickLegend(echart,legendName,index){
+  if(echart){
+
+  }
+}

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

@@ -25,6 +25,9 @@
           <i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>
         </div>
       </div>
+      <div class="login-foot-buildOn">
+        <span><a target="_blank" rel="noopener norefferrer" href='https://prometheus.io'>@build on prometheus</a></span>
+      </div>
     </div>
   </div>
 </template>
@@ -225,6 +228,15 @@ export default {
   left: 50%;
   transform: translateX(-50%);
 }
+.login-foot-buildOn{
+  width: 460px;
+  text-align: center;
+  padding-top: 45px;
+  a{
+    color: white;
+    text-decoration: none;
+  }
+}
 .nz-icon-arrow-down, .nz-icon-arrow-up {
   position: absolute;
   font-size: 18px;

nezha-fronted/src/components/common/project/popData/lineChart.vue

@@ -279,6 +279,24 @@
         }
       },
       clickLegend(legendName,index){
+        let curIsGrey=this.isGrey[index];
+        let echart = getChart(this.chartIndex)
+        if(echart){
+          if(curIsGrey){
+            echart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            });
+          }else{
+            echart.dispatchAction({
+              type: 'legendUnSelect',
+              name: legendName
+            });
+          }
+          this.$set(this.isGrey,index,!curIsGrey)
+        }
+      },
+      clickLegend2(legendName,index){
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGrey[index];
         if(getChart(this.chartIndex)){
@@ -326,6 +344,23 @@
         }
       },
       clickScreenLegend(legendName,index){
+        let curIsGrey=this.isGreyScreen[index];
+        if(this.echartModalStore) {
+          if(curIsGrey){
+            this.echartModalStore.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            })
+          }else{
+            this.echartModalStore.dispatchAction({
+              type: 'legendUnSelect',
+              name: legendName
+            })
+          }
+          this.$set(this.isGreyScreen,index,!curIsGrey)
+        }
+      },
+      clickScreenLegend2(legendName,index){
         //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
         let curIsGrey=this.isGreyScreen[index];
         if(this.echartModalStore){

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -153,13 +153,14 @@
         dropDownVisible:function(n,o){
           if (this.styleType == 1) {
             if (n) {
-              this.metricOptions = this.$parent.$parent.getMetricOptions();
+              this.metricOptions = this.$parent.getMetricOptions();
             } else {
               this.metricOptions = [];
             }
           } else if (this.styleType == 2) {
             if (n) {
-              this.metricOptions = this.$parent.$parent.$parent.$parent.getMetricOptions();
+              console.log(this.$parent.$parent)
+              this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
             } else {
               this.metricOptions = [];
             }

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -247,6 +247,23 @@
         return color;
       },
       clickLegend(legendName,index){
+        let curIsGrey=this.legend[index].isGray;
+        if(this.chart){
+          if(curIsGrey){
+            this.chart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            });
+          }else{
+            this.chart.dispatchAction({
+              type: 'legendUnSelect',
+              name: legendName
+            });
+          }
+          this.$set(this.legend,index,!curIsGrey)
+        }
+      },
+      clickLegend2(legendName,index){
         let curIsGrey=this.legend[index].isGray;
         if(this.chart){
           this.legend.forEach((item,i)=>{

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -67,6 +67,7 @@
               export: 'panel_chart_export'
             }"
             @afterImport="dateChange"
+            class="margin-r-20"
           >
             <template slot="optionZone">
               <button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_toAdd'"
@@ -75,13 +76,16 @@
               </button>
             </template>
           </export-excel>
+          <div class="relative-position ">
+            <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light "  @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
+          </div>
         </div>
       </template>
     </div>
     <div class="table-list" id="tableList">
       <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
         <div class="box-content">
-          <chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
+          <chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
         </div>
       </div>
     </div>
@@ -108,6 +112,7 @@
     name: "panel",
     data() {
       return {
+        panelLock:true,
         showTopBtn: false, //top按钮
         visible: false,
         rightBox: { //面板弹出框相关

nezha-fronted/src/libs/bus.js

@@ -66,7 +66,7 @@ export default new Vue({
       }
       return `${yy}${mm}${dd}`;
     },
-    timeFormate(date, fmt) {
+    timeFormate(date, fmt='yyyy-MM-dd hh:mm:ss') {
       const time = new Date(date);
       let fm = fmt;
       // fmt 自定义格式,如：yy-MM-dd