NEZ-2162 feat： 添加 保留打开底部弹窗的状态

nezha-fronted/build/webpack.dev.conf.js

@@ -25,12 +25,14 @@ devWebpackConfig = merge(baseWebpackConfig, {
   // these devServer options should be customized in /config/index.js
   devServer: {
     clientLogLevel: 'warning',
-    historyApiFallback: {
+    historyApiFallback: true,
-      index: indexHtml,
+    // historyApiFallback: {
-      rewrites: [
+    //   // rewrites: [
-        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, indexHtml) }
+    //   //   // { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, indexHtml) }
-      ]
+    //   //   { from: /.*/, to: '/ui' },
-    },
+    //   //   { from: '/ui', to: path.posix.join(config.dev.assetsPublicPath, indexHtml) },
+    //   // ]
+    // },
     hot: true,
     inline: true,
     contentBase: false, // since we use CopyWebpackPlugin.

nezha-fronted/config/index.js

@@ -3,7 +3,8 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 
 const path = require('path')
-
+const devStart = process.env.npm_lifecycle_event
+const indexHtml = devStart === 'dev' ? '/src/entrance/app/index.html' : '/src/entrance/exportHtml/exportHtml.html'
 module.exports = {
   dev: {
     // Paths

nezha-fronted/src/components/chart/chart/chartTimeSeries.vue

@@ -146,10 +146,10 @@ export default {
       /* 使用setTimeout延迟渲染图表，避免样式错乱 */
       setTimeout(() => {
         const myChart = this.isInit ? echarts.init(document.getElementById(`chart-canvas-${this.chartId}`)) : getChart(this.chartId)
-        myChart.clear()
         if (!myChart) {
           return
         }
+        myChart.clear()
         myChart.setOption(chartOption)
         this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
 

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -698,7 +698,6 @@ export default {
       if (this.fromTopologyDialog && !this.isPreview) {
         setTimeout(() => {
           this.topologyLoading = false
-          console.log(data)
           getTopology(this.topologyIndex).open(data || {})
           getTopology(this.topologyIndex).centerView()
           getTopology(this.topologyIndex).resize()

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

@@ -95,9 +95,11 @@ import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import scrapeEndpoint from '@/components/common/bottomBox/tabs/scrapeEndpoint'
 import IpDetails from '@/components/common/bottomBox/tabs/IpDetails'
 import recordRuleEvalLog from '@/components/common/bottomBox/tabs/recordRuleEvalLog'
+import routerPathParams from '@/components/common/mixin/routerPathParams'
 
 export default {
   name: 'bottomBox',
+  mixins: [routerPathParams],
   components: {
     scrapeEndpoint,
     LogBottomTab,
@@ -314,6 +316,9 @@ export default {
     },
     changeTab (tab) {
       this.$emit('update:targetTab', tab)
+      this.$nextTick(() => {
+        this.updatePath(this.$route.query, this.$route.path, 'bottomBox')
+      })
     },
     afterResize () {
       if (this.from === this.fromRoute.endpoint && this.targetTab === 'endpointQuery') {

nezha-fronted/src/components/common/detailView/view/detailViewRight.vue

@@ -64,9 +64,11 @@ import assetTab from '@/components/common/bottomBox/tabs/assetTab'
 import { fromRoute } from '@/components/common/js/constants'
 import LogBottomTab from '@/components/common/bottomBox/tabs/logBottomTab'
 import detailRightTop from './detailRightTop/detailRightTop'
+import routerPathParams from "@/components/common/mixin/routerPathParams";
 
 export default {
   name: 'detailViewRight',
+  mixins: [routerPathParams],
   components: {
     LogBottomTab,
     cabinetTab,
@@ -276,6 +278,9 @@ export default {
     },
     changeTab (tab) {
       this.targetTab = tab
+      this.$nextTick(() => {
+        this.updatePath(this.$route.query, this.$route.path, 'bottomBox')
+      })
     },
     afterResize () {
       if (this.from === this.fromRoute.endpoint && this.targetTab === 'endpointQuery') {
@@ -290,6 +295,10 @@ export default {
       this.$emit('getTableData')
     },
     setTargetTab () {
+      if (this.$route.query.targetTab) {
+        this.targetTab = this.$route.query.targetTab
+        return
+      }
       if (this.from === fromRoute.asset) {
         this.targetTab = 'panelTab'
       } else if (this.from === fromRoute.endpoint) {

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

@@ -76,7 +76,6 @@ export default {
         maxBounds: [[-179, -85], [179, 85]],
         hash: false,
         transformRequest: function (url, resourceType) {
-          console.log(resourceType)
           if (resourceType === 'Tile' && url.indexOf('https://api.maptiler.com/tiles/v3') > -1) {
             const urlParams = url.split('.pbf')[0].split('/')
             const z = urlParams[urlParams.length - 3]
@@ -161,7 +160,6 @@ export default {
       })
       // const marker = L.marker([this.mapParam.latitude, this.mapParam.longitude]).addTo(map)
       this.map.on('click', function (e) {
-        console.log(e, e.lngLat)
         const coords = e.lngLat
         geoJSON.features[0].geometry.coordinates = [coords.lng, coords.lat]
         self.map.getSource('centerMarker').setData(geoJSON)

nezha-fronted/src/components/common/mixin/detailViewMixin.js

@@ -1,5 +1,14 @@
 export default {
   props: {},
+  watch: {
+    detailViewRightObj: {
+      handler (n) {
+        if (n) {
+          this.updatePath(this.$route.query, this.$route.path, 'nzDetailList')
+        }
+      }
+    }
+  },
   data () {
     return {
       detailType: localStorage.getItem('detail-view-' + this.tableId) || 'list',
@@ -21,6 +30,7 @@ export default {
       //   this.detailViewRightObj = ''
       // }
       this.detailType = flag
+      this.$router.replace({ query: { ...this.$route.query, detailType: flag } }).catch(err => {})
       let dataList = ''
       localStorage.setItem('detail-view-' + this.tableId, this.detailType)
       if (this.detailType === 'view') {

nezha-fronted/src/components/common/mixin/routerPathParams.js

@@ -27,16 +27,79 @@ export default {
         }, 200)
         qv && this.$set(val.target, val.propertyName, qv)
       })
+      if (q.bottomBox && JSON.parse(q.bottomBox)) {
+        this.$nextTick(() => {
+          this.detailType = q.detailType
+          const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
+          this.$refs[detailType].bottomBox.showSubList = JSON.parse(q.bottomBox)
+          this.$refs[detailType].bottomBox.targetTab = q.targetTab
+          this.$refs[detailType].bottomBox.object = JSON.parse(q.selectObj)
+        })
+      } else if (this.detailType === 'view') {
+        this.detailType = q.detailType
+        this.detailViewRightObj = JSON.parse(q.selectObj)
+        this.$store.commit('setGlobalSearchId', this.detailViewRightObj.id)
+      }
     },
     // 更新path，包含请求参数
-    updatePath (param, path) {
+    updatePath (param, path, from) {
       const params = lodash.cloneDeep(param)
       Object.keys(params).forEach(key => {
         if (!params[key]) {
           delete params[key]
         }
       })
-      this.$router.replace({ path: path, query: params }).catch(err => {})
+      if (!from) {
+        const detailType = this.detailType === 'list' ? 'dataList' : 'detailList'
+        localStorage.setItem('detail-view-' + this.tableId, this.detailType)
+        params.detailType = this.detailType
+        params.bottomBox = this.$refs[detailType].bottomBox.showSubList
+        if (this.detailType === 'list') {
+          params.targetTab = this.$refs[detailType].bottomBox.targetTab
+        } else {
+          params.targetTab = this.$route.query.targetTab
+        }
+        if (this.detailType === 'list') {
+          params.selectObj = JSON.stringify({
+            id: this.$refs[detailType].bottomBox.object.id,
+            name: this.$refs[detailType].bottomBox.object.name,
+            config: this.$refs[detailType].bottomBox.object.config || '',
+            childrenNum: this.$refs[detailType].bottomBox.object.childrenNum || ''
+          })
+        } else {
+          this.$nextTick(() => {
+            params.selectObj = JSON.stringify({
+              id: this.$refs[detailType].detailViewRightObj.id,
+              name: this.$refs[detailType].detailViewRightObj.name,
+              config: this.$refs[detailType].detailViewRightObj.config || '',
+              childrenNum: this.$refs[detailType].detailViewRightObj.childrenNum || ''
+            })
+          })
+        }
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      } else if (from === 'nzDatalist') {
+        params.bottomBox = this.bottomBox.showSubList
+        params.targetTab = this.bottomBox.targetTab
+        params.selectObj = JSON.stringify({
+          id: this.bottomBox.object.id,
+          name: this.bottomBox.object.name,
+          config: this.bottomBox.object.config || '',
+          childrenNum: this.bottomBox.object.childrenNum || ''
+        })
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      } else if (from === 'nzDetailList') {
+        params.targetTab = this.$route.query.targetTab
+        params.selectObj = JSON.stringify({
+          id: this.detailViewRightObj.id,
+          name: this.detailViewRightObj.name,
+          config: this.detailViewRightObj.config || '',
+          childrenNum: this.detailViewRightObj.childrenNum || ''
+        })
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      } else if (from === 'bottomBox') {
+        params.targetTab = this.targetTab
+        this.$router.replace({ path: path, query: params }).catch(err => {})
+      }
     },
     setSearchInput (val, qv) {
       let dataList = ''

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -106,8 +106,11 @@ import bottomBox from '@/components/common/bottomBox/bottomBox'
 import { bottomBoxWindow } from '@/components/common/js/tools'
 import panelChart from '@/components/chart/panelChart'
 import bus from '@/libs/bus'
+import routerPathParams from "@/components/common/mixin/routerPathParams";
+import lodash from "lodash";
 export default {
   name: 'nzDataList',
+  mixins: [routerPathParams],
   components: {
     bottomBox,
     panelChart
@@ -217,6 +220,7 @@ export default {
       this.bottomBox.targetTab = targetTab
       this.bottomBox.object = JSON.parse(JSON.stringify(row))
       this.bottomBox.showSubList = true
+      this.updatePath(this.$route.query, this.$route.path, 'nzDatalist')
     },
     search (searchObj) {
       this.$emit('search', searchObj)

nezha-fronted/src/entrance/app/App.vue

@@ -22,7 +22,6 @@ export default {
     // }
     const Timestamp = new Date().getTime()
     const url = '/static/config.json?Timestamp=' + Timestamp
-    console.log(url)
     const result = await this.$http.get(url) // 获取本地的config.json 判断是否需要清空localStorage 以及设备的宽 和 axios的baseUrl
     this.$axios.defaults.baseURL = result.body.baseUrl
     const version = result.body.version

nezha-fronted/src/http.js

@@ -40,7 +40,7 @@ axios.interceptors.request.use(
 )
 const accountErrorCode = [518003, 518004, 518005, 518006, 518007, 518008] // 账号锁定等
 const licenceErrorCode = [711001]
-const noJumpPath = ['#/', '#/login']
+const noJumpPath = ['/', '/login', '/ui/login']
 
 // 若get请求的url中带问号，则将url上的参数截取，改为对象形式传参
 axios.interceptors.request.use(
@@ -81,10 +81,10 @@ axios.interceptors.response.use(
       removePending(response.config)
       return response
     }
-    if (licenceErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.hash) == -1) {
+    if (licenceErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.pathname) == -1) {
       window.location.href = '/'
     } else if (response.status === 200) {
-      if (accountErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.hash) == -1) {
+      if (accountErrorCode.indexOf(response.data.code) !== -1 && noJumpPath.indexOf(window.location.pathname) == -1) {
         sessionStorage.setItem('nz-previous-page', router.currentRoute.fullPath)
         window.location.href = '/'
       }

nezha-fronted/src/store/user.js

@@ -5,6 +5,7 @@ import { returnMenuCode, sortByOrderNum } from '@/permission'
 import moment from 'moment-timezone'
 import { theme } from '@/components/common/js/constants'
 
+const noJumpPath = ['/', '/login', '/ui/login']
 const user = {
   state: {
     menuList: [],
@@ -143,7 +144,7 @@ const user = {
           })
         }
         // 登录成功后跳回到原来页面
-        if (sessionStorage.getItem('nz-previous-page')) {
+        if (sessionStorage.getItem('nz-previous-page') && noJumpPath.indexOf(sessionStorage.getItem('nz-previous-page')) === -1) {
           const route = sessionStorage.getItem('nz-previous-page')
           router.push({
             path: route
@@ -151,6 +152,7 @@ const user = {
             sessionStorage.removeItem('nz-previous-page')
           })
         } else {
+          sessionStorage.removeItem('nz-previous-page')
           router.push({
             path: path[0],
             query: {