feat: 新增app的部分交互和样式

2022-07-21 15:06:19 +08:00
parent 556ddfb95e
commit 68539bee94
4 changed files with 603 additions and 515 deletions
--- a/src/assets/css/components/views/charts2/networkOverviewApps.scss
+++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss
@@ -72,6 +72,24 @@
      border-radius: 4px;
      display: flex;
      flex-direction: column;
+
+      &.app-card--create {
+        background-color: #F7F7F7;
+        justify-content: center;
+        align-items: center;
+
+        .cn-icon {
+          padding-bottom: 2px;
+          font-size: 17px;
+          color: #38ACD2;
+          cursor: pointer;
+        }
+        span {
+          font-size: 12px;
+          color: #353636;
+          cursor: pointer;
+        }
+      }
      .app-card-title {
        display: flex;
        padding: 0 12px;
@@ -112,7 +130,6 @@
          }
        }
        .app-card__body-content-percent {
-          font-family: NotoSansHans-Medium;
          font-size: 12px;
          font-weight: 500;
          height: 20px;
@@ -144,6 +161,94 @@
      }
    }
  }
+  .add-app-drawer {
+    height: 526px !important;
+
+    .add-app {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .add-app__header {
+        display: flex;
+        justify-content: space-between;
+        height: 46px;
+        background-color: white;
+
+        .header__title {
+          padding-left: 20px;
+          font-size: 16px;
+          font-weight: bold;
+          line-height: 46px;
+          color: #353636;
+        }
+        .header__operations {
+          display: flex;
+          align-items: center;
+
+          .header__operation {
+            width: 80px;
+            height: 30px;
+            margin-right: 20px;
+            line-height: 30px;
+            border-radius: 4px;
+            text-align: center;
+            cursor: pointer;
+
+            &.header__operation--cancel {
+              border: 1px solid rgba(0,0,0,0.15);
+              color: #333;
+            }
+            &.header__operation--save {
+              background-color: #38ACD2;
+              color: white;
+            }
+          }
+        }
+      }
+      .add-app__body {
+        position: relative;
+        flex: 1;
+        background-color: #EBF1F4;
+
+        .body__searcher {
+          position: absolute;
+          right: 20px;
+          top: 15px;
+        }
+        .el-tabs__nav-wrap::after {
+          height: 0;
+        }
+        .el-tabs__header {
+          padding-left: 20px;
+        }
+        .body__apps {
+          height: 420px;
+          padding: 0 20px;
+          overflow: auto;
+          display: grid;
+          grid-template-rows: repeat(auto-fill, 120px);
+          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+          grid-gap: 20px;
+
+          &::-webkit-scrollbar-thumb {
+            background-color: #c5c5c5;
+            border-radius: 5px;
+          }
+          &::-webkit-scrollbar-thumb:hover {
+            background-color: #a0a0a0;
+            border-radius: 5px;
+          }
+          .body__app {
+            height: 120px;
+            background: #FFFFFF;
+            border: 1px solid #E2E5EC;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
 }
 .app-dropdown.el-popper.is-pure {
  top: 720px !important;
--- a/src/components/advancedSearch/TagMode.vue
+++ b/src/components/advancedSearch/TagMode.vue
@@ -391,7 +391,6 @@ export default {
      deep: true,
      handler (n) {
        if (!_.isEmpty(n)) {
-          console.info(n)
          this.metaList = n
        }
      }
--- a/src/views/charts/charts/IpBasicInfo.vue
+++ b/src/views/charts/charts/IpBasicInfo.vue
@@ -16,21 +16,11 @@
        <el-descriptions-item :label="$t('overall.dnsServerInfo.protocol') + ':'">{{detectionIpSupporting(detectionsData)}}</el-descriptions-item>
      </el-descriptions>
    </div>
-<!--    <div class="chart-location">
-      <el-descriptions :column="1">
-        <el-descriptions-item :label="$t('overall.location') + ':'">{{location}}</el-descriptions-item>
-      </el-descriptions>
-      <div class="chart-drawing" style="padding: 0 36px 30px 0;" :id="`chart${chartInfo.id}`"></div>
-    </div>-->
  </div>
 </template>

 <script>
 import chartMixin from '@/views/charts/charts/chart-mixin'
-/*import * as L from 'leaflet'
-import icon from 'leaflet/dist/images/marker-icon.png'
-import iconShadow from 'leaflet/dist/images/marker-shadow.png'
-import 'leaflet/dist/leaflet.css'*/
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 export default {
@@ -91,48 +81,6 @@ export default {
    }
  },
  methods: {
-    /*initMap (id) {
-      L.Marker.prototype.options.icon = L.icon({
-        iconUrl: icon,
-        shadowUrl: iconShadow
-      })
-      const map = L.map(`chart${this.chartInfo.id}`, {
-        minZoom: 3,
-        maxZoom: 7,
-        zoom: 5,
-        attributionControl: false,
-        zoomControl: false,
-        maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
-      })
-      L.tileLayer(
-        this.mapPictureUrl,
-        { noWrap: true }
-      ).addTo(map)
-
-      const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
-      attribution.addAttribution(' © OpenStreetMap contributors')
-      attribution.addTo(map)
-
-      /!* L.control.zoom({
-        position: 'bottomright',
-        zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
-        zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
-        zoomInTitle: '',
-        zoomOutTitle: ''
-      }).addTo(map) *!/
-
-      this.myChart = map
-      this.loadLeafletMap()
-    },
-    loadLeafletMap () {
-      if (this.chartData.latitude && this.chartData.longitude) {
-        this.myChart.setView([this.chartData.latitude, this.chartData.longitude], 5)
-        const myIcon = L.divIcon({
-          className: 'cn-icon cn-icon-position2 position-icon'
-        })
-        L.marker([this.chartData.latitude, this.chartData.longitude], { icon: myIcon }).addTo(this.myChart)
-      }
-    },*/
    queryDetection () {
      get(this.entityDetectionsIpUrl, this.queryParams).then(response => {
        if (response.code === 200) {
@@ -145,14 +93,6 @@ export default {
    this.$nextTick(() => {
      this.queryDetection()
    })
-  },
-  /*watch: {
-    chartData: {
-      deep: true,
-      handler (n) {
-        this.initMap(`chart${this.chartInfo.id}`)
  }
 }
-  }*/
-}
 </script>
--- a/src/views/charts2/charts/NetworkOverviewApps.vue
+++ b/src/views/charts2/charts/NetworkOverviewApps.vue
@@ -58,8 +58,46 @@
          <div class="chart__drawing" :id="`chart${app.name}`"></div>
        </div>
      </div>
+      <div class="app-card app-card--create">
+        <i class="cn-icon cn-icon-add1" @click="addApp"></i>
+        <span @click="addApp">{{$t('overall.add')}}</span>
      </div>
    </div>
+    <el-drawer
+        v-model="showAddApp"
+        direction="btt"
+        custom-class="add-app-drawer"
+        :with-header="false"
+        :show-close="false"
+    >
+      <div class="add-app">
+        <div class="add-app__header">
+          <div class="header__title">{{$t('overall.add')}}</div>
+          <div class="header__operations">
+            <div class="header__operation header__operation--cancel">{{$t('overall.cancel')}}</div>
+            <div class="header__operation header__operation--save">{{$t('overall.save')}}</div>
+          </div>
+        </div>
+        <div class="add-app__body">
+          <el-tabs v-model="appTypeTab">
+            <el-tab-pane :label="$t('networkOverview.appType.provider')" :name="0">
+              <div class="body__apps">
+                <div class="body__app" v-for="app in providerOptions" :key="app.name">{{app.name}},{{app.desc}}</div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane :label="$t('networkOverview.appType.app')" :name="1">
+              <div class="body__apps">
+                <div class="body__app" v-for="app in appOptions" :key="app.name">{{app.name}},{{app.desc}}</div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+          <div class="body__searcher">
+            <el-input size="mini"></el-input>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
 </template>

 <script>
@@ -83,7 +121,9 @@ export default {
      metricFilter: '',
      metricOptions: [],
      chartOption: [],
-      appData: [
+      appData: [],
+      // 假数据
+      appTempData: [
        { value: 1.3912, number: 684600000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-mining-pool' },
        { value: 1.8934, number: 382100000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-fraudulent-ip' },
        { value: 1.2054, number: 184600000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-debug' },
@@ -91,19 +131,21 @@ export default {
        { value: 1.6415, number: 734100000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-authoritative-domain' }
      ],
      unitTypes,
-      unitConvert,
      timer: null,
-      showEdit: ''
+      showAddApp: false,
+      // add弹框中的可选项
+      providerOptions: [],
+      appOptions: [],
+      appTypeTab: 0
    }
  },
  methods: {
-    init (obj) {
-      const dom = document.getElementById(`chart${obj.name}`)
-      this.myChart = echarts.init(dom)
-      this.chartOption = appListChartOption
-      const result = [
-        {
-          values: [
+    unitConvert,
+    init () {
+      this.appData.forEach((app, i) => {
+        // 根据app.name和app.type查除接口，获取数据
+        this.appData[i] = { ...app, ...this.appTempData[i] }
+        this.appData[i].lineData = [
          [
            '1658128320',
            '0'
@@ -508,14 +550,18 @@ export default {
            '1658214720',
            '0'
          ]
-          ]
-        }
-      ]
+        ].map(v => [Number(v[0]) * 1000, Number(v[1]), 'time'])
+        this.initChart(app)
+      })
+    },
+    initChart (obj) {
+      const dom = document.getElementById(`chart${obj.name}`)
+      this.myChart = echarts.init(dom)
+      this.chartOption = appListChartOption
      const seriesTemplate = this.chartOption.series[0]
-      this.chartOption.series = result.map((r, i) => {
-        return {
+      this.chartOption.series = [{
        ...seriesTemplate,
-          data: r.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), 'time']),
+        data: obj.lineData,
        lineStyle: {
          color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
        },
@@ -532,35 +578,33 @@ export default {
            }
          ])
        }
-        }
-      })
+      }]
      this.myChart.setOption(this.chartOption)
    },
+    addApp () {
+      this.showAddApp = true
+      const letter = 'abcdefghijklmnopqrstuvwxyz'
+      for (let i = 0; i < 100; i++) {
+        this.appOptions.push({
+          name: letter[i % 26] + i,
+          desc: 'this is a really nice app'
+        })
+        this.providerOptions.push({
+          name: letter[i % 26] + i,
+          desc: 'this is a really nice provider'
+        })
+      }
+    },
    resize () {
      this.myChart.resize()
-    },
-    editChange () {
-      this.showEdit = !this.showEdit
    }
  },
  mounted () {
    if (this.chart.params.app) {
-      this.appData = this.appData.map((e, i) => {
-        return {
-          name: this.chart.params.app[i],
-          value: e.value,
-          number: e.number,
-          previous: e.previous,
-          number1: e.number1,
-          trend: e.trend
-        }
-      })
+      this.appData = this.chart.params.app
    }
    this.timer = setTimeout(() => {
-      this.appData.forEach(t => {
-        this.appName = t.name
-        this.init(t)
-      })
+      this.init()
    }, 100)
    window.addEventListener('resize', this.resize)
  }