Merge branch 'dev' of https://git.mesalab.cn/cyber-narrator/cn-ui into dev

2022-04-24 18:17:46 +08:00
parent 4883c5c6d9 80f1468585
commit 01760c28a4
8 changed files with 464 additions and 131 deletions
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -6,7 +6,6 @@ export const storageKey = {
  i18n: 'cn-i18n',
  languages: 'cn-languages',
  language: 'cn-language',
-  timezone: 'cn-timezone',
  theme: 'cn-theme',
  dateFormat: 'cn-date-format',
  timezoneOffset: 'cn-timezone-offset',
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -21,6 +21,7 @@
        :entity="entity"
        @getChartData="getChartData"
        @showLoading="showLoading"
+        @finishOneMap="finishOneMap"
      ></chart-map>

      <chart-single-value
@@ -433,6 +434,9 @@ export default {
    showLoading (show) {
      this.$emit('showLoading', show)
    },
+    finishOneMap (show) {
+      this.$emit('handleSpecialChartFinishState', true)
+    },
    getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
      this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
    },
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -1,10 +1,37 @@
 <template>
-  <div style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" @scroll="wholeScreenScroll">
+  <div id="panelList" style="padding: 10px 10px 20px 10px; overflow: auto" v-if="!isEntityDetail" >  <!--  @scroll="wholeScreenScroll" -->
    <div id="cn-panel" class="cn-panel2">
      <div class="panel__time">
        <date-time-range class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
        <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
      </div>
+      <!--
+      <div v-if="panelType===3" class="nav">
+        <input type="radio" class="wholeScreenChekck" name="radio-set" checked id="nav1">
+        <input type="radio" class="wholeScreenChekck" name="radio-set"  id="nav2">
+        <div class="scroll">
+          <section class="panel" id="panel1">
+            <dns-screen id="dnsScreen" :copy-data-list="chartList"
+                        ref="dnsScreen"
+                        :time-filter="timeFilter"
+                        :entity="entity">
+            </dns-screen>
+          </section>
+          <section class="panel" id="panel2">
+            <dns-screen id="dnsScreen2" :copy-data-list="chartList"
+                        ref="dnsScreen"
+                        :time-filter="timeFilter"
+                        :entity="entity">
+            </dns-screen>
+            <div  style="width:100%;height:500px;border:solid 1px red;padding:10px 10px 20px;">
+              qqq
+            </div>
+          </section>
+
+        </div>
+
+      </div> -->
+
      <panel-chart-list
              ref="panelChartList"
              :time-filter="timeFilter"
@@ -12,6 +39,7 @@
              :panel-lock="panelLock"
              :entity="entity"
              :whole-screen-scroll="panel.params && panel.params.wholeScreenScroll"
+              @finish="finish"
      >
      </panel-chart-list>
    </div>
@@ -35,7 +63,7 @@
 <script>
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
-import { panelTypeAndRouteMapping } from '@/utils/constants'
+import { panelTypeAndRouteMapping, wholeScreenRouterMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
 import { scrollToTop } from '@/utils/tools'
@@ -45,8 +73,13 @@ import {
  getGroupHeight
 } from './charts/tools'
  
+import DnsScreen from '@/views/charts/wholeScreenScroll/DnsScreen'
+
 export default {
  name: 'Panel',
+  components: {
+    DnsScreen
+  },
  props: {
    entity: Object,
    isEntityDetail: Boolean,
@@ -64,7 +97,14 @@ export default {
      scroll: {
        prevent: false, // 阻止滚动
        prevScrollTop: 0 // 前一次滚动条位置
-      }
+      },
+      wholeScreenRouterMapping,
+      isFullScreen: true, // 当前是否为全屏滚动页面
+      // isSecondScreen:false,//当前是否为全屏滚动页面下面的页面
+      screenNum: 1, // 当前屏幕编号
+      wheel: null, // 鼠标滚动事件
+      allDone: false,
+      isReachSecond: false
    }
  },
  async mounted () {
@@ -74,6 +114,39 @@ export default {
    if (!this.$_.isEmpty(this.detailTabs)) {
      this.currentTab = this.detailTabs[0].id + ''
    }
+
+    this.$nextTick(() => {
+      if (this.panelType === 3) {
+        const self = this
+        const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+        self.wheel = function (event) {
+          event.stopPropagation()// 阻止冒泡事件
+          if (!self.allDone) {
+            if (event && event.preventDefault) {
+              event.preventDefault()
+            } else {
+              event.returnValue = false
+            }
+            return false
+          }
+          let delta = 0
+          if (!event)// for ie
+          { event = window.event }
+          if (event.wheelDelta) { // ie,opera
+            delta = event.wheelDelta / 120
+          } else if (event.detail) {
+            delta = -event.detail / 3
+          }
+          if (delta) {
+            self.handle(delta, self, event)
+          }
+        }
+        if (panelList.addEventListener) {
+          panelList.addEventListener('DOMMouseScroll', self.wheel, { passive: false })
+        }
+        panelList.onmousewheel = self.wheel
+      }
+    })
  },
  setup (props, ctx) {
    const panel = ref({})
@@ -123,6 +196,16 @@ export default {
      this.currentTab = this.detailTabs[index].id + ''
      this.detailChartList = this.detailTabs[index].children
    },
+    finish () {
+      this.allDone = true
+    },
+    preventWheel (event) {
+      if (event && event.preventDefault) {
+        event.preventDefault()
+      } else {
+        event.returnValue = false
+      }
+    },
    recursionParamsConvert (chart) {
      chart.params = chart.params ? JSON.parse(chart.params) : {}
      chart.firstShow = false
@@ -185,7 +268,7 @@ export default {
      this.$refs.panelChartList.groupParentCalcHeight(params.chart, params.childrenList)
    },
    wholeScreenScroll (e) {
-      if (this.scroll.prevent || !this.panel.params || !this.panel.params.wholeScreenScroll) {
+      if (this.scroll.prevent) {
        return
      }
      this.scroll.prevent = true
@@ -214,7 +297,195 @@ export default {
      setTimeout(() => {
        vm.scroll.prevent = false
      }, 210)
+    },
+    scrollIntoDown () {
+      const anchorEle = document.getElementById('gridLayout')
+      console.log('down....')
+      if (anchorEle) {
+        console.log('down')
+        anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      }
+    },
+    scrollIntoUp (id) {
+      const anchorEle = document.getElementById(id)
+      if (anchorEle) {
+        anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
+      }
+    },
+    scrollInto (id, event) {
+      const anchorEle = document.getElementById(id)
+      if (anchorEle) {
+        const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+        panelList.onmousewheel = null
+        panelList.removeEventListener('DOMMouseScroll', this.wheel)
+        anchorEle.scrollIntoView({ block: 'start', behavior: 'smooth' })
+        this.preventWheel(event)
+        console.log('scrolling。。。。')
+
+        setTimeout(() => {
+          const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+          if (panelList.addEventListener) {
+            panelList.addEventListener('DOMMouseScroll', this.wheel, { passive: false })
+          }
+          panelList.onmousewheel = this.wheel
+          console.log('add event。。。。')
+        }, 200)
+      }
+    },
+    preventDefault (event) {
+      if (event && event.preventDefault) {
+        event.preventDefault()
+      } else {
+        event.returnValue = false
+      }
+    },
+    handle (delta, self, event) {
+      const panelList = document.getElementById('panelList')// ie不兼容，换成id会成功
+      const currentScrollTop = panelList.scrollTop
+      console.log('****************开始******************')
+      console.log('self.screenNum=' + self.screenNum)
+      console.log('panelList.offsetHeight=' + panelList.offsetHeight)
+      console.log('self.isFullScreen=' + self.isFullScreen)
+      console.log('self.isReachSecond =' + self.isReachSecond)
+      console.log('currentScrollTop=' + currentScrollTop)
+      if (delta < 0) {
+        if (self.isFullScreen || self.screenNum === 1 || currentScrollTop < panelList.offsetHeight - 15) {
+          console.log('1下')
+          self.isFullScreen = false
+          self.screenNum = 2
+          self.scrollIntoDown()
+          self.preventWheel(event)
+          self.isReachSecond = true
+          // panelList.removeEventListener('DOMMouseScroll',self.wheel)
+          // panelList.onmousewheel=null
+        } else if (!self.isFullScreen || self.screenNum === 2 || currentScrollTop > panelList.offsetHeight - 10) {
+          console.log('else下')
+          self.screenNum = 3
+          self.isFullScreen = false
+          self.isReachSecond = false
+          // self.scrollIntoDown()
+        } else {
+          self.isReachSecond = false
+        }
+      } else if (delta > 0) {
+        if (self.screenNum === 3 || (currentScrollTop < panelList.offsetHeight + 100 && currentScrollTop > panelList.offsetHeight - 10)) {
+          console.log('上1')
+          self.isReachSecond = true
+          self.scrollIntoUp('gridLayout')
+          self.screenNum = 2
+          self.isFullScreen = false
+          self.preventWheel(event)
+        } else if (self.isFullScreen || self.screenNum === 2 || self.screenNum === 1 || currentScrollTop <= panelList.offsetHeight + 100) {
+          console.log('上2')
+          self.scrollIntoUp('dnsScreenAnchor')
+          self.screenNum = 1
+          self.isFullScreen = true
+          self.isReachSecond = false
+          self.preventWheel(event)
+        } else {
+          console.log('上3')
+          self.isFullScreen = false
+          self.isReachSecond = false
+        }
+      }
    }
  }
 }
 </script>
+
+<style scoped >
+  body{
+    -webkit-font-smoothing:antialiased;
+  }
+  .nav{
+    width:100%;
+    position:absolute;
+    left:0;
+    bottom:0;
+  }
+  .nav input{
+    opacity:0;
+    z-index:1000;
+  }
+  #nav1,#nav1 + a{
+    left:0%;
+  }
+  #nav2,#nav2 + a{
+    left:20%;
+  }
+  .nav input:checked + a:after{
+    content:"";
+    width:0;
+    height:0;
+    overflow:hidden;
+    border:20px solid transparent;
+    border-bottom-color:#821134;
+    position:absolute;
+    bottom:100%;
+    left:50%;
+    margin-left:-20px;
+  }
+  .scroll,.panel{
+    width:100%;
+    height:100%;
+    position:relative;
+    text-align:center;
+    padding-top:0px;
+  }
+  .scroll{
+    left:0;
+    top:0;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-transition: all 0.6s ease-in-out;
+    -moz-transition: all 0.6s ease-in-out;
+    -o-transition: all 0.6s ease-in-out;
+    transition: all 0.6s ease-in-out;
+    color:#e23a6e;
+    font-weight:bold;
+  }
+  .panel{
+    overflow: hidden;
+  }
+  #nav1:checked ~ .scroll{
+    -webkit-transform: translateY(100%);
+    -moz-transform: translateY(100%);
+    -ms-transform: translateY(100%);
+    -o-transform: translateY(100%);
+    transform: translateY(100%);
+  }
+  #nav2:checked ~ .scroll{
+    -webkit-transform: translateY(-20%);
+    -moz-transform: translateY(-20%);
+    -ms-transform: translateY(-20%);
+    -o-transform: translateY(-20%);
+    transform: translateY(-20%);
+  }
+  [data-icon]:after{
+    content:attr(data-icon);
+    width:200px;
+    height:200px;
+    color:#fff;
+    font-size:90px;
+    text-align:center;
+    line-height:200px;
+    position:absolute;
+    left:18%;
+    top:18%;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+  @media screen and (max-device-width: 520px){
+
+  }
+
+</style>
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -41,6 +41,7 @@
        :time-filter="timeFilter"
        @getChartData="getChartData"
        @showLoading="showLoading"
+        @handleSpecialChartFinishState="handleSpecialChartFinishState"
        :tabHandleClickType="tabHandleClickType"
    ></chart>
  </div>
@@ -150,7 +151,8 @@ export default {
          }
        ] // table的所有数据
      },
-      tabHandleClickType: ''
+      tabHandleClickType: '',
+      isFinish: false
    }
  },
  computed: {
@@ -264,21 +266,38 @@ export default {
            }
          }).finally(() => {
            this.loading = false
+            this.handleFinishState()
          })
        } else if (this.isGroup || this.isTabs) {
          this.$refs.chart.$refs.chart.reload()
+          this.handleFinishState()
        } else if (this.isBlock) {
          if (!this.chartInfo.firstShow) {
            this.chartInfo.firstShow = true
          } else {
            this.$refs.chart.$refs.chart.reload()
          }
+          this.handleFinishState()
        }
      } catch (e) {
        console.error(e)
        setTimeout(() => {
          this.loading = false
+          this.handleFinishState()
        }, 200)
+      } finally {
+        this.handleFinishState()
+      }
+    },
+    handleSpecialChartFinishState () {
+      this.$emit('finishOne')
+    },
+    handleFinishState () {
+      if (!this.isMap) {
+        if (!this.isFinish) {
+          this.isFinish = true
+          this.$emit('finishOne')
+        }
      }
    },
    handleQueryParams () {
@@ -400,9 +419,9 @@ export default {
    const dateRangeValue = 60
    const { startTime, endTime } = getNowTime(dateRangeValue)
    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
-    const table = ref({})
+    let table = {}
    if (isBasicTable(props.chartInfo.type)) {
-      table.value = {
+      table = {
        pageSize: chartTableDefaultPageSize,
        limit: chartTableTopOptions[0], // top-n
        orderBy: props.chartInfo.params.columns.order[0],
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -1,14 +1,16 @@
 <template>
-  <div style="height: calc(100vh - 70px);width: 100%;" v-if="wholeScreenScroll">
+   <div style="height: calc(100vh - 70px);width: 100%;" v-if="isWholeScreenScroll" id="dnsScreenAnchor">
     <dns-screen v-if="currentPath === wholeScreenRouterMapping.dns"
                 :copy-data-list="copyDataList"
                 ref="dnsScreen"
                 :time-filter="timeFilter"
+                 @finishOne="finishOne"
                 :entity="entity">
     </dns-screen>
   </div>
  <div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" ref="layoutBox">
    <grid-layout
+            id="gridLayout"
        ref="layout"
        v-if="gridLayoutShow"
        v-model:layout="normalCopyDataList"
@@ -42,6 +44,7 @@
            :entity="entity"
            @groupShow="groupShow"
            @showFullscreen="showFullscreen"
+            @finishOne="finishOne"
        ></panel-chart>
      </grid-item>
    </grid-layout>
@@ -114,7 +117,10 @@ export default {
      },
      scrollTop: 0,
      scrollTopTimer: null,
-      wholeScreenRouterMapping
+      wholeScreenRouterMapping,
+      isWholeScreenScroll: false,
+      haveDoneChartNum: 0,
+      allDone: false
    }
  },
  methods: {
@@ -137,6 +143,16 @@ export default {
      this.fullscreen.chartInfo = chartInfo
      this.fullscreen.visible = show
    },
+    finishOne () {
+      this.haveDoneChartNum++
+      // console.log("this.haveDoneChartNum="+this.haveDoneChartNum)
+      if (this.haveDoneChartNum >= this.copyDataList.length) {
+        // this.allDone = true
+        setTimeout(() => {
+          this.$emit('finish')
+        }, 200)
+      }
+    },
    groupShow (chart) {
      this.copyDataList.forEach((item, index) => {
        if (item.id === chart.id) {
@@ -194,8 +210,12 @@ export default {
      handler (n, o) {
        this.gridLayoutShow = false
        this.gridLayoutLoading = true
+
+        this.isWholeScreenScroll = false
+
        // const arr = this.$_.cloneDeep(n)
        this.noData = !n || n.length < 1
+        if (n) {
          const tempList = n.map(item => {
            if (item.params) {
              item.params.showHeader = true
@@ -219,7 +239,9 @@ export default {
            })
            setTimeout(() => {
              this.gridLayoutShow = true
+              this.isWholeScreenScroll = this.wholeScreenScroll// 为了解决加载页面时，滚动条先长后短的问题，即 数据要一起显示
            })
+
            setTimeout(() => {
              this.copyDataList.forEach(item => {
                if (isGroup(item.type) && !item.firstShow) {
@@ -237,5 +259,6 @@ export default {
        }
      }
    }
+  }
 }
 </script>
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -157,16 +157,19 @@ export default {
  methods: {
    unitConvert,
    initMap (id) {
+      try {
+        // 初始化插件
        const chart = am4Core.create(id, am4Maps.MapChart)
        chart.geodata = getGeoData(storageKey.iso36112WorldLow)
        chart.projection = new am4Maps.projections.Miller()
        this.myChart = shallowRef(chart)
+        // 初始化多边形series（即地图series）
        this.polygonSeries = shallowRef(this.polygonSeriesFactory())
-
+        // 如果是散点地图，再初始化散点series。DNS dashboard的地图是散点地图
        if (this.isMapPoint) {
          this.worldImageSeries = shallowRef(this.imageSeriesFactory())
        }
-
+        // 渲染
        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)

        // 地图点击事件
@@ -220,6 +223,9 @@ export default {
            })
          })
        }
+      } finally {
+        this.$emit('finishOneMap')
+      }
    },
    polygonSeriesFactory () {
      const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
@@ -238,12 +244,14 @@ export default {
    },
    imageSeriesFactory (dataField) {
      const vm = this
+      // emcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
      const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+      // 指定接口数据中哪个字段名代表数值
      imageSeries.dataFields.value = dataField || 'count'
-
+      // 取出图案的默认模板，用来接下来做自定义更改
      const imageTemplate = imageSeries.mapImages.template
      imageTemplate.nonScaling = true
-
+      // 通过地区ID来获取经纬度，设置后无需自己提供经纬度
      imageTemplate.adapter.add('latitude', function (latitude, target) {
        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
        if (polygon) {
@@ -251,7 +259,6 @@ export default {
        }
        return latitude
      })
-
      imageTemplate.adapter.add('longitude', function (longitude, target) {
        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
        if (polygon) {
@@ -260,6 +267,7 @@ export default {
        return longitude
      })

+      // 设置图案样式
      const circle = imageTemplate.createChild(am4Core.Circle)
      circle.propertyFields.fill = 'color'
      circle.propertyFields.stroke = 'border'
@@ -313,6 +321,7 @@ export default {
          const sorted = seriesData.sort((a, b) => b.value - a.value)
          const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0

+          // 左下角热力图
          polygonSeries.heatRules.push({
            property: 'fill',
            target: polygonSeries.mapPolygons.template,
@@ -331,6 +340,7 @@ export default {
          heatLegend.marginLeft = 15
          heatLegend.valign = 'bottom'

+          // 计算热力图的最大值最小值
          const minRange = heatLegend.valueAxis.axisRanges.create()
          minRange.value = heatLegend.minValue
          minRange.label.text = minRange.value === 0 ? 0 : unitConvert(heatLegend.minValue, chartParams.unitType).join(' ')
--- a/src/views/charts/charts/ChartTablePagination.vue
+++ b/src/views/charts/charts/ChartTablePagination.vue
@@ -58,7 +58,10 @@ export default {
    this.emitter.on('chart-pageNo', function () {
      _this.resetPageNo()
    })
+    // console.log('this.$el==='+this.$el)
+    if (this.$el.querySelector) {
      this.$el.querySelector('.el-pagination__jump').childNodes[0].nodeValue = ''
    }
+  }
 }
 </script>
--- a/src/views/charts/wholeScreenScroll/DnsScreen.vue
+++ b/src/views/charts/wholeScreenScroll/DnsScreen.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="chart-list" style="display:grid;height:calc(100vh - 70px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
-    <div v-for="item in copyDataList"
+  <div class="chart-list scroll-hide" style="display:grid;height:calc(100vh - 70px);width:100%;grid-template-columns:repeat(30,1fr);grid-template-rows:repeat(19,1fr);grid-gap:10px;padding-left: 10px;padding-right: 10px;">
+    <div v-for="item in dnsScreenDataList"
          :key="item.id"
          :ref="'grid-item' + item.id"
          class="dns-screen"
@@ -11,6 +11,7 @@
                :chart-info="item"
                :time-filter="timeFilter"
                :entity="entity"
+                @finishOne="finishOne"
        ></panel-chart>
    </div>
  </div>
@@ -31,15 +32,18 @@ export default {
  },
  methods: {
    reload () {
-      this.copyDataList.forEach(item => {
+      this.dnsScreenDataList.forEach(item => {
        if (this.$refs['chart' + item.id]) {
          this.$refs['chart' + item.id].getChartData()
        }
      })
+    },
+    finishOne () {
+      this.$emit('finishOne')
    }
  },
  computed: {
-    copyDataList: function () {
+    dnsScreenDataList: function () {
      return this.copyDataList.filter(function (item) {
        return item.y < 0
      })