fix:处理系统时区

2020-10-16 19:26:50 +08:00
parent dff9bd4f02
commit 5efaa21baf
16 changed files with 492 additions and 323 deletions
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -84,6 +84,8 @@
            <span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span>
            <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
          </span>
+          <span v-else-if="item.prop == 'startAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+          <span v-else-if="item.prop == 'endAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
          <template v-else-if="item.prop == 'labels'" class="labels">
            <span v-for="(item,i) in labelsSort(scope.row.labels)">
              <span
@@ -231,6 +233,7 @@
      'alertRuleInfo':alertRuleInfo,
      'alertLabel':alertLabel,
    },
+    mixins:[bus],
    props:{
      tableData:{},
      loading:{},
--- a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -11,8 +11,7 @@
      <!--</div>-->
      <div class="alert-rule-box">
        <div class="alert-rule-title">Expression</div>
-        <div class="alert-rule-value" v-if="alertRuleData.buildIn!==1">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):'-'}}</div>
-        <div class="alert-rule-value" v-if="alertRuleData.buildIn===1">-</div>
+        <div class="alert-rule-value">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
      </div>
      <div class="alert-rule-box">
        <div class="alert-rule-title">Level</div>
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -476,8 +476,8 @@
        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);

        if(this.searchTime&& this.searchTime.length>1){
-          this.$set(this.searchLabel, "startAt", bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'));
-          this.$set(this.searchLabel, "endAt", bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'));
+          this.$set(this.searchLabel, "startAt", this.timezoneToUtcTimeStr(this.searchTime[0]));
+          this.$set(this.searchLabel, "endAt", this.timezoneToUtcTimeStr(this.searchTime[1]));
        }else{
          delete this.searchLabel.startAt
          delete this.searchLabel.endAt
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -887,6 +887,17 @@ const cn = {
      requiredName:'名称不能为空'
    },
  },
+  date:{
+    week:{
+      one:'星期一',
+      two:'星期二',
+      three:'星期三',
+      four:'星期四',
+      five:'星期五',
+      six:'星期六',
+      seven:'星期日',
+    }
+  },
  el: {
    colorpicker: {
      confirm: "确定",
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -894,6 +894,17 @@ const en = {
      requiredName:'The name of the required'
    },
  },
+  date:{
+    week:{
+      one:'MON',
+      two:'TUE',
+      three:'WED',
+      four:'THU',
+      five:'FRI',
+      six:'SAT',
+      seven:'SUN',
+    }
+  },
  ...enLocale
 }

--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -334,8 +334,8 @@
        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
        if(this.searchTime&& this.searchTime.length>1){
-          this.$set(this.searchLabel, "startAt", bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'));
-          this.$set(this.searchLabel, "endAt", bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'));
+          this.$set(this.searchLabel, "startAt", this.timezoneToUtcTimeStr(this.searchTime[0]));
+          this.$set(this.searchLabel, "endAt", this.timezoneToUtcTimeStr(this.searchTime[1]));
        }else{
          delete this.searchLabel.startAt
          delete this.searchLabel.endAt
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -628,7 +628,7 @@
        }
        let ds='-';
        let ts=':';
-        let time=new Date(str);
+        let time=new Date(bus.UTCTimeToConfigTimezone(str));
        let year=time.getFullYear();
        let month=time.getMonth()+1 > 9 ? time.getMonth()+1 : ('0'+(time.getMonth()+1));
        let day=time.getDate() > 9 ? time.getDate():('0'+time.getDate());
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -79,6 +79,7 @@
                              @change="(val)=>{statusChange(scope.row)}">
                            </el-switch>
                        </span>
+            <span v-else-if="item.prop == 'createTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
            <span v-else>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -73,6 +73,7 @@
                </el-scrollbar>
              </div>
            </template>
+            <span v-else-if="item.prop == 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
            <div v-else-if="item.prop == 'option'" class="content-right-options">
              <span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="nz-icon nz-icon-download1"></i></span>
              &nbsp;
--- a/nezha-fronted/src/components/page/config/operationlog.vue
+++ b/nezha-fronted/src/components/page/config/operationlog.vue
@@ -50,6 +50,7 @@
          <span v-if="item.prop == 'time'">
            {{scope.row[item.prop]}} ms
          </span>
+          <span v-else-if="item.prop == 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -48,8 +48,9 @@
                {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}-->
              {{findServerType(scope.row[item.prop]).text}}
            </span>
+            <span v-else-if="item.prop == 'checkTime'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
            <span v-else-if="item.prop == 'status'">
-              <el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?scope.row.checkTime:$t('asset.assetStatDown'))">
+              <el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?utcTimeToTimezoneStr(scope.row.checkTime):$t('asset.assetStatDown'))">
                <div slot="reference" style="width: 20px">
                  <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
                </div>
--- a/nezha-fronted/src/components/page/config/terminallog.vue
+++ b/nezha-fronted/src/components/page/config/terminallog.vue
@@ -51,6 +51,7 @@
                          {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
                          {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
                      </span>
+          <span v-else-if="item.prop == 'time'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
          <template v-else-if="item.prop == 'status'">
            <span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span>
          </template>
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.scss
@@ -356,4 +356,13 @@
  top: 50%;
  transform: translate(100%, -50%);
 }
-
+.overview-loading{
+  width: 35px;
+  height: 35px;
+  position: relative;
+}
+.overview-loading .el-loading-spinner{
+  transform: scale(0.5);
+  top: -5px;
+  left: 0px;
+}
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
@@ -3,6 +3,7 @@
    <!--标题-->
    <div class="overview-content-header">
      <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
+      <div class="overview-loading"><loading ref="overviewLoading" ></loading></div>
      <div class="header-tool">
        <div class="tool-container">
          <div class="time">{{sysTime}}</div>
@@ -187,7 +188,7 @@

 <script>
  import chart from "./chart";
-  import chartDataFormat from "../../../charts/chartDataFormat";
+  import i18n from '../../../../components/common/i18n'
  import axios from 'axios';
  import bus from '../../../../libs/bus';
  import timePicker from '../../../common/timePicker';
@@ -257,6 +258,9 @@
          asset: 10,
          module: 10
        },
+        system_server_time:null,
+        freshDateTimer:null,
+        freshDataTimer:null
      }
    },
    filters: {
@@ -299,20 +303,48 @@
    methods: {
      /*初始化数据 start*/
      initData() {
-        this.queryAssetData();
-        this.queryProjectData();
-        this.queryModuleData();
-        this.queryEndpointData();
-        this.queryAlertMessageData();
-        this.queryAlertRuleData();
-        this.queryAlertTrendData();
+        return [
+          this.querySystemState(),
+          this.queryAssetData(),
+          this.queryProjectData(),
+          this.queryModuleData(),
+          this.queryEndpointData(),
+          this.queryAlertMessageData(),
+          this.queryAlertRuleData(),
+          this.queryAlertTrendData(),
          // this.queryMapChartGeoJson();
-        this.initMap();
-        this.queryAlertStatByRule();
-        this.queryAlertStatByAsset();
-        this.getDcTrafficData();
+          this.initMap(),
+          this.queryAlertStatByRule(),
+          this.queryAlertStatByAsset(),
+          this.getDcTrafficData()
+        ]
+      },
+      setFreshDataTimer:function(){
+        this.freshDataTimer=setInterval(()=>{
+          if(this.$refs.overviewLoading){
+            this.$refs.overviewLoading.startLoading();
+          }
+          Promise.all(this.initData()).then(()=>{
+            if(this.$refs.overviewLoading){
+              this.$refs.overviewLoading.endLoading();
+            }
+          })
+        },60*1000)
+      },
+      querySystemState:function(){
+        return new Promise(resolve => {
+          this.$get('/healthy').then(response=>{
+            if(response.code==200){
+              this.system_server_time=this.utcTimeToTimezone(response.time)
+            }else{
+              this.system_server_time=bus.computeTimezone(new Date().getTime())
+            }
+            resolve();
+          })
+        })
      },
      queryAssetData() {
+        return new Promise(resolve => {
          this.assetLoading = true;
          this.$refs.assetTypePie.startLoading();
          this.$get('overview/assetStat').then(response => {
@@ -401,52 +433,71 @@
              this.$refs.assetTypePie.setSeries(series, legend, legendData);
              this.$refs.assetTypePie.endLoading();
            }
+            resolve()
+          })
        })
      },
      queryProjectData() {
+        return new Promise(resolve => {
          this.projectLoading = true;
          this.$get('overview/projectStat').then(response => {
            this.projectLoading = false;
            if (response.code === 200) {
              this.projectData = response.data;
            }
+            resolve();
+          })
        })
      },
      queryModuleData() {
+        return new Promise(resolve => {
          this.moduleLoading = true;
          this.$get('overview/moduleStat').then(response => {
            this.moduleLoading = false;
            if (response.code === 200) {
              this.moduleData = response.data;
            }
+            resolve();
+          })
        })
      },
      queryEndpointData() {
+        return new Promise(resolve => {
          this.endpointLoading = true;
          this.$get('overview/endpointStat').then(response => {
            this.endpointLoading = false;
            if (response.code === 200) {
              this.endpointData = response.data;
            }
+            resolve();
+          })
        })
      },
      queryAlertMessageData() {
+        return new Promise(resolve => {
          this.alertMessageLoading = true;
          this.$get('overview/alertMessageStat').then(response => {
            this.alertMessageLoading = false;
            if (response.code === 200) {
              this.alertMessageData = response.data;
            }
+            resolve();
+          })
        })
      },
      queryAlertRuleData() {
+        return new Promise(resolve => {
          this.$get('overview/alertRuleStat').then(response => {
            if (response.code === 200) {
              this.alertRuleData = response.data;
            }
+            resolve();
+          })
        })
      },
      queryAlertTrendData() {
+        return new Promise(res => {
+
          this.$refs.chartbox.startLoading();
          this.chartSeries = [];
          let rxPromise = new Promise((resolve, reject) => {
@@ -530,9 +581,12 @@
          });
          Promise.all([rxPromise, txPromise]).then(resolve => {
            this.$refs.chartbox.endLoading();
+            res()
          }, reject => {
            this.$refs.chartbox.endLoading();
+            res()
          });
+        })
      },
      trendParamHandle(t) {
        let before;
@@ -667,11 +721,13 @@
        return params;
      },
      initMap() {
+        let loadPromise;
        this.loadMapConfig().then((mapConfig)=>{
          if(mapConfig&&this.map){
-            this.loadDataCenterMapData()
+            loadPromise=this.loadDataCenterMapData()
          }
        })
+        return loadPromise;
      },
      loadMapConfig:function(){
        return new Promise(resolve => {
@@ -685,8 +741,8 @@
            if(response.code == 200){
              let mapConfig=JSON.parse(response.data.paramKey.map_center_config);
              let map = L.map("map",{
-                minZoom:2,
-                maxZoom:7,
+                minZoom:mapConfig.minZoom,
+                maxZoom:mapConfig.maxZoom,
                attributionControl:false,
                zoomControl:false,
              }).setView([mapConfig.longitude,mapConfig.latitude],mapConfig.zoom);
@@ -744,6 +800,8 @@
        setTimeout(()=>{this.queryDataCenterMapData();},1500)
      },
      loadDataCenterMapData:function(){
+        return new Promise(res=>{
+
          let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
          let requests=[axios.get('/idc?pageSize=-1'),axios.get('/overview/datacenterStat')];
          axios.all(requests).then((result)=>{
@@ -802,7 +860,9 @@
                }
              }
            }
+            res();
          });
+        })
      },
      queryDataCenterMapData() {
        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
@@ -888,6 +948,8 @@
        })
      },
      queryAlertStatByRule() {
+        return new Promise(resolve=>{
+
          this.$refs.ruleMessage.startLoading();
          this.$get('overview/alertStatByRule', {top: this.topFilter.rule}).then(response => {
            if (response.code === 200) {
@@ -918,9 +980,13 @@
              this.$refs.ruleMessage.setSeries(this.messageByRuleSeries);
              this.$refs.ruleMessage.endLoading();
            }
+            resolve()
          });
+        })
      },
      queryAlertStatByAsset() {
+        return new Promise(resolve => {
+
          this.$refs.assetMessage.startLoading();
          this.$get('overview/alertStatByAsset', {top: this.topFilter.asset}).then(response => {
            if (response.code === 200) {
@@ -951,9 +1017,13 @@
              this.$refs.assetMessage.setSeries(this.messageByAssetSeries);
              this.$refs.assetMessage.endLoading();
            }
+            resolve();
          });
+        })
      },
      queryAlertStatByModule() {
+        return new Promise(resolve => {
+
          this.$refs.moduleMessage.startLoading();
          this.$get('overview/alertStatByModule', {top: this.topFilter.module}).then(response => {
            if (response.code === 200) {
@@ -974,7 +1044,9 @@
              this.$refs.moduleMessage.setSeries(this.messageByModuleSeries);
              this.$refs.moduleMessage.endLoading();
            }
+            resolve();
          });
+        })
      },
      getDcTrafficData() {
        this.$get('idc/trafficSetting', {pageSize: -1}).then(response => {
@@ -1194,46 +1266,43 @@
      },
      /*header 时间处理 start*/
      initDate:function(){
-        this.sysTime=this.getTime();
-        this.sysDate=this.getDate();
-        this.sysWeek=this.getWeek();
+        this.sysTime=this.getTime(0);
+        this.sysDate=this.getDate(0);
+        this.sysWeek=this.getWeek(0);
        this.freshTime();
      },
      freshTime:function(){
        let $temp=this;
-        setInterval(function(){
-          $temp.sysTime=$temp.getTime()
-          $temp.sysDate=$temp.getDate();
-          $temp.sysWeek=$temp.getWeek();
+        let counter=0;
+        this.freshDateTimer=setInterval(function(){
+          counter ++;
+          $temp.sysTime=$temp.getTime(counter)
+          $temp.sysDate=$temp.getDate(counter);
+          $temp.sysWeek=$temp.getWeek(counter);
        },1000)
      },
-      getTime:function(){
-        let date=new Date();
+      getTime:function(counter){
+        let date=new Date(this.system_server_time);
+        date.setSeconds(date.getSeconds()+counter)
        let hours=date.getHours()>9?date.getHours():'0'+date.getHours();
        let minutes=date.getMinutes()>9?date.getMinutes():'0'+date.getMinutes();
        let seconds=date.getSeconds()>9?date.getSeconds():'0'+date.getSeconds();
        return hours+':'+minutes+':'+seconds;
      },
-      getDate:function(){
-        let date=new Date();
+      getDate:function(counter){
+        let date=new Date(this.system_server_time);
+        date.setSeconds(date.getSeconds()+counter)
        let years=date.getFullYear();
        let months=date.getMonth()+1>9?date.getMonth()+1:'0'+(date.getMonth()+1);
        let days=date.getDate()>9?date.getDate():'0'+date.getDate();
        return years+'-'+months+'-'+days;
      },
-      getWeek:function(){
-        let language=localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en';
-        let enWeeks=['SUN','MON','TUE','WED','THU','FRI','SAT'];
-        let cnWeeks=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
-        let date=new Date();
+      getWeek:function(counter){
+        let weeks=[i18n.t('date.week.seven'),i18n.t('date.week.one'),i18n.t('date.week.two'),i18n.t('date.week.three'),i18n.t('date.week.four'),i18n.t('date.week.five'),i18n.t('date.week.six')]
+        let date=new Date(this.system_server_time);
+        date.setSeconds(date.getSeconds()+counter)
        let day=date.getDay();
-        if(language == 'en'){
-          return enWeeks[day];
-        }else if(language == 'cn'){
-          return cnWeeks[day];
-        }else{
-          return enWeeks[day];
-        }
+        return weeks[day]
      },
      dateFormat:function(fmt, date) {
        let ret;
@@ -1454,16 +1523,21 @@
    },
    mounted() {
      this.initData();
+      this.querySystemState().then(()=>{
        this.initDate();
+        this.setFreshDataTimer();
+      })
+
      /*window.onresize = () => {
        setTimeout(() => {
          this.$parent.$parent.update();
        }, 100);
      }*/
    },
-    /*destroyed() {
-      window.onresize = null;
-    }*/
+    destroyed() {
+      clearInterval(this.freshDataTimer)
+      clearInterval(this.freshDateTimer)
+    }
  }
 </script>

--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -255,6 +255,7 @@ export default new Vue({
      }
      return statisticsRlt;
    },
+    //将本地时区转为系统配置的时区
    computeTimezone:function(sourceTime){
      let offset=localStorage.getItem('nz-sys-timezone');
      if(offset&& offset != 'undefined' && offset != null){
@@ -290,7 +291,34 @@ export default new Vue({
        }, delay);
      }
    },
+    UTCTimeToConfigTimezone:function(utcTime){
+      let offset=localStorage.getItem('nz-sys-timezone');
+      if(offset&& offset != 'undefined' && offset != null){
+        let time = utcTime;
+        if(typeof time == 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)){
+          time = new Date(time).getTime();
+        }
+        offset=Number.parseInt(offset);
+        return time += offset * 60*60*1000

+      }else{
+        return utcTime;
+      }
+    },
+    configTimezoneToUTCTime:function(configTime){
+      let offset=localStorage.getItem('nz-sys-timezone');
+      if(offset&& offset != 'undefined' && offset != null){
+        let time = configTime;
+        if(typeof time == 'string' && /(\d+?-){2}\d+?\s(\d+?:)*\d+/.test(time)){
+          time = new Date(time).getTime();
+        }
+        offset=Number.parseInt(offset);
+        return time -= offset * 60*60*1000
+
+      }else{
+        return configTime;
+      }
+    }
  },
  created() {
    this.getDefaultDate();
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -44,6 +44,7 @@ import loading from "./components/common/loading";
 import mibBox from "./components/common/rightBox/mibBox";
 import leftMenu from "./components/common/leftMenu";
 import pickTime from "./components/common/pickTime";
+import bus from "./libs/bus";

 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -88,6 +89,34 @@ Vue.prototype.$tableHeight = { //列表页表格的高度
  noPagination: 'calc(100% - 60px)', //特例：没有翻页组件
 };

+Vue.mixin({
+    methods: {
+      utcTimeToTimezone:function(time){
+        if(time){
+          return bus.UTCTimeToConfigTimezone(time)
+        }
+      },
+      utcTimeToTimezoneStr:function(time,format='yyyy-MM-dd hh:mm:ss'){
+        if(time){
+          return bus.timeFormate(bus.UTCTimeToConfigTimezone(time),format)
+        }else{
+          return '-'
+        }
+      },
+      timezoneToUtcTime:function(time){
+        if(time){
+          return bus.configTimezoneToUTCTime(time)
+        }
+      },
+      timezoneToUtcTimeStr:function(time,format='yyyy-MM-dd hh:mm:ss'){
+        if(time){
+          return bus.timeFormate(this.timezoneToUtcTime(time),format)
+        }
+      }
+    }
+})
+
+
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
 Vue.use(Vuex);