From becfb5b1200f23a295ead60dd57c9eb985442dda Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 23 Jun 2021 15:57:34 +0800
Subject: [PATCH] =?UTF-8?q?CN-38=20feat=EF=BC=9A=20=E6=B7=BB=E5=8A=A0=20ch?=
 =?UTF-8?q?art=20type=2031?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/EchartsFrame.vue        |  24 ++--
 src/components/charts/PieTable.vue            | 103 ++++++++++++++++
 src/components/charts/chart-options.js        | 114 ++++++++++++++++--
 src/components/common/Pagination.vue          |   2 +-
 .../common/TimeRange/DateTimeRange.vue        |   2 +-
 src/components/layout/LeftMenu.vue            |   3 +-
 src/components/rightBox/settings/RoleBox.vue  |   4 +-
 src/components/table/ColumnCustomize.vue      |  14 +--
 .../table/settings/OperationLogTable.vue      |   2 +-
 src/components/table/settings/RoleTable.vue   |   2 +-
 src/components/table/settings/UserTable.vue   |   3 +-
 src/i18n/cn.js                                |   8 ++
 src/i18n/en.js                                |   8 ++
 src/i18n/index.js                             |   7 +-
 src/mixins/common.js                          |   2 +-
 src/mixins/table.js                           |  17 ++-
 src/store/modules/user.js                     |   4 +-
 src/utils/tools.js                            |   2 +-
 src/views/charts/Chart.vue                    |  55 ++++++++-
 src/views/charts/Panel.vue                    |   6 +-
 src/views/settings/OperationLog.vue           |   1 +
 src/views/settings/Roles.vue                  |   1 +
 src/views/settings/User.vue                   |   1 +
 23 files changed, 334 insertions(+), 51 deletions(-)
 create mode 100644 src/components/charts/PieTable.vue

diff --git a/src/components/charts/EchartsFrame.vue b/src/components/charts/EchartsFrame.vue
index 3f9f02f0..7a570868 100644
--- a/src/components/charts/EchartsFrame.vue
+++ b/src/components/charts/EchartsFrame.vue
@@ -8,26 +8,27 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body">
+    <div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}">
       <slot></slot>
     </div>
-    <div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1">
+    <div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{'pie-with-table': isPieWithTable}">
       <slot name="footer"></slot>
     </div>
   </div>
 </template>
 
 <script>
-import { layoutConstant } from '@/components/charts/chart-options'
-
+import { layoutConstant, isEchartsWithTable } from '@/components/charts/chart-options'
 export default {
   name: 'EchartsFrame',
   props: {
-    layout: Array
+    layout: Array,
+    chartInfo: {}
   },
-  setup () {
+  setup (props) {
     return {
-      layoutConstant
+      layoutConstant,
+      isPieWithTable: isEchartsWithTable(props.chartInfo.type)
     }
   },
   mounted () {
@@ -35,6 +36,9 @@ export default {
 }
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style scoped>
+.cn-panel .cn-chart__echarts .pie-with-table{
+  flex: 1;
+  padding: 10px;
+}
+</style>
diff --git a/src/components/charts/PieTable.vue b/src/components/charts/PieTable.vue
new file mode 100644
index 00000000..f3c6c83a
--- /dev/null
+++ b/src/components/charts/PieTable.vue
@@ -0,0 +1,103 @@
+<template>
+    <el-table
+            v-loading="loading"
+            class="pie-table"
+            :data="tableData"
+            style="width: 100%;border: 1px solid #E7EAED"
+            :size="'mini'"
+            :height="'100%'">
+        <el-table-column type="expand" :min-width="'5%'">
+            <template #default="props">
+                <el-table
+                        class="expand-table"
+                        :data=" props.row.children"
+                        style="width: 100%;"
+                        :show-header="false"
+                        :size="'mini'"
+                        :height="'100%'">
+                    <el-table-column
+                            min-width="5%">
+                    </el-table-column>
+                    <el-table-column
+                            v-for="(item, index) in tableTitles"
+                            :key="index"
+                            :min-width="item.width"
+                            :label="item.label"
+                            :prop="item.prop">
+                    </el-table-column>
+                </el-table>
+            </template>
+        </el-table-column>
+        <el-table-column
+                v-for="(item, index) in tableTitles"
+                :key="index"
+                :min-width="item.width"
+                :label="item.label"
+                :prop="item.prop">
+        </el-table-column>
+    </el-table>
+</template>
+
+<script>
+export default {
+  name: 'PieTable',
+  props: {
+    tableData: Array
+  },
+  watch: {
+    tableData: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        console.log(n)
+      }
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      tableTitles: [
+        {
+          label: this.$t('chart.pieTable.domain'),
+          prop: 'domain',
+          width: '20%'
+        },
+        {
+          label: this.$t('chart.pieTable.sessions'),
+          prop: 'sessions',
+          width: '25%'
+        },
+        {
+          label: this.$t('chart.pieTable.packets'),
+          prop: 'packets',
+          width: '25%'
+        },
+        {
+          label: this.$t('chart.pieTable.bytes'),
+          prop: 'bytes',
+          width: '25%'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/ .el-table__expanded-cell[class*=cell]{
+    padding: 0;
+}
+    .expand-table /deep/ .el-table__body .el-table__row:last-of-type td{
+        border: none;
+    }
+    .pie-table{
+        font-family: Roboto-Medium;
+        font-size: 14px;
+        color: #333333;
+        font-weight: 500;
+    }
+    .expand-table{
+        font-weight: 400;
+        color: #606266;
+    }
+</style>
diff --git a/src/components/charts/chart-options.js b/src/components/charts/chart-options.js
index f147edc6..a91cb1a7 100644
--- a/src/components/charts/chart-options.js
+++ b/src/components/charts/chart-options.js
@@ -15,16 +15,105 @@ const pieData = [
   { value: 4, name: 'sessions' },
   { value: 5, name: 'fqdn_category_name' },
   { value: 1, name: 'uniq_domain1' },
-  { value: 2, name: 'bytes2' },
-  { value: 3, name: 'packets3' },
-  { value: 4, name: 'sessions4' },
-  { value: 5, name: 'fqdn_category_name5' },
-  { value: 1, name: 'uniq_domain6' },
-  { value: 2, name: 'bytes7' },
-  { value: 3, name: 'packets8' },
-  { value: 4, name: 'sessions9' },
-  { value: 5, name: 'fqdn_category_name10' }
+  { value: 2, name: 'bytes1' },
+  { value: 3, name: 'packets1' },
+  { value: 4, name: 'sessions1' },
+  { value: 5, name: 'fqdn_category_name1' }
+  // { value: 1, name: 'uniq_domain2' },
+  // { value: 2, name: 'bytes2' },
+  // { value: 3, name: 'packets2' },
+  // { value: 4, name: 'sessions2' },
+  // { value: 5, name: 'fqdn_category_name2' },
+  // { value: 1, name: 'uniq_domain3' },
+  // { value: 2, name: 'bytes3' },
+  // { value: 3, name: 'packets3' },
+  // { value: 4, name: 'sessions3' },
+  // { value: 5, name: 'fqdn_category_name3' },
+  // { value: 1, name: 'uniq_domain4' },
+  // { value: 2, name: 'bytes4' },
+  // { value: 3, name: 'packets4' },
+  // { value: 4, name: 'sessions4' },
+  // { value: 5, name: 'fqdn_category_name4' }
 ]
+export const pieTableDatas = [
+  {
+    domain: '12306.com',
+    bytes: '170537133646',
+    packets: '123454646',
+    sessions: '26682',
+    children: [
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      },
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      },
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      }
+    ]
+  },
+  {
+    domain: '12306.com',
+    bytes: '170537133646',
+    packets: '123454646',
+    sessions: '26682',
+    children: [
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      },
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      },
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      }
+    ]
+  },
+  {
+    domain: '12306.com',
+    bytes: '170537133646',
+    packets: '123454646',
+    sessions: '26682',
+    children: [
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      },
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      },
+      {
+        domain: '192.168.36.120',
+        bytes: '170537133646',
+        packets: '123454646',
+        sessions: '26682'
+      }
+    ]
+  }]
 const line = {
   xAxis: {
     type: 'time'
@@ -141,18 +230,21 @@ const pieWithTable = {
   },
   legend: {
     orient: 'vertical',
-    right: '0%',
+    type: 'plain',
+    right: '5%',
     top: '30%',
     height: '50%',
+    width: '40%',
     icon: 'circle',
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
+    itemGap: 20
   },
   series: [
     {
       type: 'pie',
       radius: ['50%', '80%'],
-      center: ['30%', '50%'],
+      center: ['25%', '50%'],
       data: pieData,
       emphasis: {
         itemStyle: {
diff --git a/src/components/common/Pagination.vue b/src/components/common/Pagination.vue
index 6eb7968a..14399080 100644
--- a/src/components/common/Pagination.vue
+++ b/src/components/common/Pagination.vue
@@ -208,7 +208,7 @@ export default {
       this.pageSize = this.postPageSizes[0]
       this.resetPageSizes()
     } else {
-      const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
+      const pageSize = localStorage.getItem('cn-pageSize-' + localStorage.getItem('cn-username') + '-' + this.tableId)
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageSize = parseInt(pageSize)
       }
diff --git a/src/components/common/TimeRange/DateTimeRange.vue b/src/components/common/TimeRange/DateTimeRange.vue
index 2790fb9b..895fc6fd 100644
--- a/src/components/common/TimeRange/DateTimeRange.vue
+++ b/src/components/common/TimeRange/DateTimeRange.vue
@@ -98,7 +98,7 @@ export default {
     const myEndTime = ref(props.endTime)
     const timeArr = ref([myStartTime.value, myEndTime.value])
     const address = localStorage.getItem('cn-sys-timezone')
-    const utc = localStorage.getItem('timezone-offset')
+    const utc = localStorage.getItem('cn-timezone-offset')
     const rangeHistory = ref(localStorage.getItem('date-range-history') ? JSON.parse(localStorage.getItem('date-range-history')) : [])
     const dateRangeValue = ref(60)
     dateRangeValue.value = 60
diff --git a/src/components/layout/LeftMenu.vue b/src/components/layout/LeftMenu.vue
index 0e108081..875e01fe 100644
--- a/src/components/layout/LeftMenu.vue
+++ b/src/components/layout/LeftMenu.vue
@@ -112,7 +112,8 @@ export default {
   methods: {
     jump (route) {
       if (route === this.route) {
-        this.refresh()
+        // this.refresh()
+        return
       }
       this.$router.push({
         path: route,
diff --git a/src/components/rightBox/settings/RoleBox.vue b/src/components/rightBox/settings/RoleBox.vue
index 95605587..5efc0042 100644
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -20,8 +20,8 @@
 
           <el-form-item :label="$t('config.roles.permission')">
             <!--<div class="tree-option">
-              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
-              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button>
+              <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
+              <button type="button" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="cn-icon cn-icon-delete"></i></span></button>
             </div>-->
             <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
               <template #default="{ data }">
diff --git a/src/components/table/ColumnCustomize.vue b/src/components/table/ColumnCustomize.vue
index 6c158d98..5e60983f 100644
--- a/src/components/table/ColumnCustomize.vue
+++ b/src/components/table/ColumnCustomize.vue
@@ -19,17 +19,17 @@
       </div>
     </div>
     <div class="custom-bottom-btns">
-      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
+      <button v-if="isCancel" :id="tableId+'-element-set-none'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new is-cancel" type="button" @click="batchHandler(false)">
         <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
       </button>
-      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="batchHandler(true)">
+      <button v-if="!isCancel" :id="tableId+'-element-set-all'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="batchHandler(true)">
         <span class="top-tool-btn-txt">{{$t('overall.all')}}</span>
       </button>
       <div>
-        <button :id="tableId+'-element-set-esc'" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new" type="button" @click="esc">
+        <button :id="tableId+'-element-set-esc'" class="cn-btn cn-btn-size-small-new cn-btn-style-light-new" type="button" @click="esc">
           <span class="top-tool-btn-txt">{{$t('overall.esc')}}</span>
         </button>
-        <button :id="tableId+'-element-set-save'" class="nz-btn nz-btn-size-small-new nz-btn-style-normal-new" type="button" @click="save">
+        <button :id="tableId+'-element-set-save'" class="cn-btn cn-btn-size-small-new cn-btn-style-normal-new" type="button" @click="save">
           <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
         </button>
       </div>
@@ -51,9 +51,9 @@ export default {
     }
   },
   created () {
-    const localStorageTitle = JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId))
+    const localStorageTitle = JSON.parse(localStorage.getItem('cn-tableTitle-' + localStorage.getItem('cn-username') + '-' + this.tableId))
     if (localStorageTitle) {
-      localStorage.setItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
+      localStorage.setItem('cn-tableTitle-' + localStorage.getItem('cn-username') + '-' + this.tableId, JSON.stringify(localStorageTitle))
     }
   },
   watch: {
@@ -93,7 +93,7 @@ export default {
     save () {
       this.$emit('update', this.custom)
       localStorage.setItem(
-        'nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.tableId,
+        'cn-tableTitle-' + localStorage.getItem('cn-username') + '-' + this.tableId,
         JSON.stringify(this.custom)
       )
       this.esc()
diff --git a/src/components/table/settings/OperationLogTable.vue b/src/components/table/settings/OperationLogTable.vue
index bb611ca3..f751423c 100644
--- a/src/components/table/settings/OperationLogTable.vue
+++ b/src/components/table/settings/OperationLogTable.vue
@@ -17,7 +17,7 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="(item, index) in customTableTitle"
+      v-for="(item, index) in customTableTitles"
       :key="`col-${index}`"
       :fixed="item.fixed"
       :label="item.label"
diff --git a/src/components/table/settings/RoleTable.vue b/src/components/table/settings/RoleTable.vue
index 5e41b962..2cb4dbdd 100644
--- a/src/components/table/settings/RoleTable.vue
+++ b/src/components/table/settings/RoleTable.vue
@@ -16,7 +16,7 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="(item, index) in customTableTitle"
+      v-for="(item, index) in customTableTitles"
       :key="`col-${index}`"
       :fixed="item.fixed"
       :label="item.label"
diff --git a/src/components/table/settings/UserTable.vue b/src/components/table/settings/UserTable.vue
index 67b6c4ad..a21ac962 100644
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -16,7 +16,7 @@
       width="55">
     </el-table-column>
     <el-table-column
-      v-for="(item, index) in customTableTitle"
+      v-for="(item, index) in customTableTitles"
       :key="`col-${index}`"
       :fixed="item.fixed"
       :label="item.label"
@@ -102,7 +102,6 @@ export default {
           label: this.$t('config.user.name'),
           prop: 'name',
           show: true,
-          width: 150,
           sortable: 'custom'
         }, {
           label: this.$t('config.user.username'),
diff --git a/src/i18n/cn.js b/src/i18n/cn.js
index 49c03c30..6fc91090 100644
--- a/src/i18n/cn.js
+++ b/src/i18n/cn.js
@@ -258,6 +258,14 @@ const cn = {
       },
       response: '响应'
     }
+  },
+  chart: {
+    pieTable: {
+      domain: '域名',
+      bytes: '字节数',
+      packets: '包数',
+      sessions: '会话数'
+    }
   }
 }
 
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 82cdf578..da49b1bd 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -259,6 +259,14 @@ const en = {
         logout: 'logout'
       }
     }
+  },
+  chart: {
+    pieTable: {
+      domain: 'Domain',
+      bytes: 'Bytes',
+      packets: 'Packets',
+      sessions: 'Sessions'
+    }
   }
 }
 export default en
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 2d1e60d1..2dee617d 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,10 +1,15 @@
 import { createI18n } from 'vue-i18n'
 import { storageKey } from '@/utils/constants'
 import { getI18n } from '@/utils/api'
+import cn from './cn'
+import en from './en'
 
 const i18n = createI18n({
   locale: localStorage.getItem(storageKey.language) || 'en',
-  messages: {}
+  messages: {
+    cn: cn,
+    en: en
+  }
 })
 export async function loadI18n () {
   const items = await getI18n()
diff --git a/src/mixins/common.js b/src/mixins/common.js
index ccdd13a4..534f9018 100644
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -42,7 +42,7 @@ export default {
     utcTimeToSysTime (str) { // utc 0 到系统设置的时区
       let date = ''
       if (isNaN(str)) {
-        date = window.$dayJs(str).valueOf() + localStorage.getItem('timezone-local-offset') * 60 * 60 * 1000
+        date = window.$dayJs(str).valueOf() + localStorage.getItem('cn-timezone-local-offset') * 60 * 60 * 1000
       } else {
         date = str
       }
diff --git a/src/mixins/table.js b/src/mixins/table.js
index a5e7a175..d15f9462 100644
--- a/src/mixins/table.js
+++ b/src/mixins/table.js
@@ -17,9 +17,24 @@ export default {
       type: String
     }
   },
+  computed: {
+    customTableTitles () {
+      return this.customTableTitle.filter(item => item.show)
+    }
+  },
+  watch: {
+    customTableTitle (n) {
+      if (n) {
+        setTimeout(() => {
+          this.$refs.dataTable.doLayout()
+        }, 100)
+      }
+    }
+  },
   data () {
     return {
-      operationWidth: '165' // 操作列宽
+      operationWidth: '165', // 操作列宽
+      show: true
     }
   },
   methods: {
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 1d145424..4e56ecbc 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -51,8 +51,8 @@ const user = {
         localStorage.setItem('cn-sys-logo', res.data.systemLogo)
       }
       localStorage.setItem('cn-sys-timezone', res.data.timezone)
-      localStorage.setItem('timezone-offset', dayjs.tz().utcOffset() / 60)
-      localStorage.setItem('timezone-local-offset', dayjs().utcOffset() / 60)
+      localStorage.setItem('cn-timezone-offset', dayjs.tz().utcOffset() / 60)
+      localStorage.setItem('cn-timezone-local-offset', dayjs().utcOffset() / 60)
       post('/sys/user/permissions', { token: res.data.token }).then(res => {
         const menuList = sortByOrderNum(res.data.menus)
         store.commit('setMenuList', menuList)
diff --git a/src/utils/tools.js b/src/utils/tools.js
index 94c6e5b5..bf2ce90d 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -246,7 +246,7 @@ export const tableSort = {
 export const cancelWithChange = {
   mounted (el, binding) {
     if (!binding.value || !binding.value.object) return
-    const unsavedChange = localStorage.getItem('nz-unsaved-change')
+    const unsavedChange = localStorage.getItem('cn-unsaved-change')
     const oldValue = JSON.parse(JSON.stringify(binding.value.object))
     function domClick (e) {
       const newValue = JSON.parse(JSON.stringify(binding.value.object))
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index 4f922102..8b860818 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -4,6 +4,7 @@
       v-if="isEcharts"
       :layout="layout"
       :style="computePosition"
+      :chartInfo="chartInfo"
   >
     <template #title v-if="layout.indexOf(layoutConstant.HEADER) > -1">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</template>
     <template #operations v-if="layout.indexOf(layoutConstant.HEADER) > -1">
@@ -12,9 +13,12 @@
     <template #default>
       <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
     </template>
-    <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1">
+    <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1" :class="{}">
       <!-- 带Table的饼图，展示Table -->
       <template v-if="isEchartsWithTable">
+          <div style="height: 100%">
+              <PieTable :tableData="pieTableData" ref="pieTable"/>
+          </div>
       </template>
     </template>
   </echarts-frame>
@@ -80,10 +84,11 @@
 
 <script>
 import * as echarts from 'echarts'
-import { isEcharts, isSingleValue, isTable, getOption, getTypeCategory, getLayout, layoutConstant, heightUnit, isEchartsWithTable } from '@/components/charts/chart-options'
+import { isEcharts, isSingleValue, isTable, getOption, getTypeCategory, getLayout, layoutConstant, heightUnit, isEchartsWithTable, pieTableDatas } from '@/components/charts/chart-options'
 import EchartsFrame from '@/components/charts/EchartsFrame'
 import SingleValue from '@/components/charts/ChartSingleValue'
 import Table from '@/components/charts/ChartTable'
+import PieTable from '@/components/charts/PieTable'
 import ChartTablePagination from '@/components/charts/ChartTablePagination'
 import { chartTableDefaultPageSize, chartTableTopOptions } from '@/utils/constants'
 import { get } from '@/utils/http'
@@ -93,13 +98,20 @@ let myChart // echarts实例
 export default {
   name: 'Chart',
   props: {
-    chart: Object // 图表对象，包括id、name、type等数据
+    chart: Object, // 图表对象，包括id、name、type等数据
+    startTime: {
+      type: Number
+    },
+    endTime: {
+      type: Number
+    }
   },
   components: {
     EchartsFrame,
     SingleValue,
     ChartTablePagination,
-    'chart-table': Table
+    'chart-table': Table,
+    PieTable
   },
   data () {
     return {
@@ -110,16 +122,46 @@ export default {
         tableColumns: [], // table字段
         tableData: [], // table的所有数据
         currentPageData: [] // table当前页的数据
-      }
+      },
+      pieTableData: []
     }
   },
   methods: {
     initChart () {
-      const now = new Date().getTime()
+      const self = this
+      const now = this.dayJs.tz().valueOf()
       const params = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null
+      console.log(params)
       if (this.isEcharts) {
         myChart = echarts.init(document.getElementById(`chart${this.chartInfo.id}`))
         myChart.setOption(this.chartOption)
+        if (this.isEchartsWithTable) {
+          if (this.chartOption.series[0].data.length > 10) { // pieWithTable 图例超过10个改为滚动显示
+            this.chartOption.legend.type = 'scroll'
+            myChart.setOption(this.chartOption)
+          }
+          if (params.url.split('?').length > 1) {
+            params.url = params.url.split('?')[0]
+          }
+          if (params.urlTable.split('?').length > 1) {
+            params.urlTable = params.urlTable.split('?')[0]
+          }
+          /* get(params.url, { startTime: now - 3600000, endTime: now, order: params.order ? params.order : null, limit: params.limit ? params.limit : '20' }).then(response => {
+            console.log(response)
+          }) */
+          // 获取pieTable的 table数据
+          /* get(params.urlTable, { startTime: this.startTime, endTime: this.endTime, fqdnCategoryName: echartParams.name }).then(response => {
+              console.log(response)
+            }) */
+          self.pieTableData = pieTableDatas
+          myChart.on('click', function (echartParams) {
+            console.log(echartParams)
+            /* get(params.urlTable, { startTime: this.startTime, endTime: this.endTime, fqdnCategoryName: echartParams.name }).then(response => {
+              console.log(response)
+            }) */
+            self.pieTableData = pieTableDatas
+          })
+        }
         this.$nextTick(() => {
           myChart.resize()
         })
@@ -169,6 +211,7 @@ export default {
   },
   mounted () {
     this.initChart()
+    console.log(this.layout)
   },
   setup (props) {
     const chartInfo = JSON.parse(JSON.stringify(props.chart))
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 9ce7acdd..48ce53fa 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -5,7 +5,7 @@
         <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="endTime"/>
         <DateTimeRange class="date-time-range" :start-time="startTime" :end-time="endTime" ref="dateTimeRange" @change="reload"/>
       </div>
-      <chart v-for="(chart, index) in chartList" :key="index" :chart="chart"></chart>
+      <chart v-for="(chart, index) in chartList" :key="index" :chart="chart" :start-time="startTime" :end-time="endTime"></chart>
       <!--    <grid-layout v-model:layout="chartList"
                        :col-num="12"
                        :row-height="30"
@@ -52,14 +52,16 @@ export default {
   },
   async mounted () {
     const panels = await getPanelList({ type: this.panelType })
+    console.log(panels)
     if (panels && panels.length > 0) {
       this.panel = panels[0]
     }
     if (this.panel.id) {
-      this.chartList = (await getChartList({ panelId: this.panel.id })).map(chart => {
+      this.chartList = (await getChartList({ panelId: this.panel.id })).map(chart => { // 记得改回mao
         chart.i = chart.id
         return chart
       })
+      console.log(this.chartList)
     }
   },
   setup (props, ctx) {
diff --git a/src/views/settings/OperationLog.vue b/src/views/settings/OperationLog.vue
index fe0a2539..7897290a 100644
--- a/src/views/settings/OperationLog.vue
+++ b/src/views/settings/OperationLog.vue
@@ -3,6 +3,7 @@
     <cn-data-list
       ref="dataList"
       :api="url"
+      :tableId="tableId"
       :layout="['searchInput', 'elementSet']"
       v-model:custom-table-title="tools.customTableTitle"
       :from="fromRoute.operationLog"
diff --git a/src/views/settings/Roles.vue b/src/views/settings/Roles.vue
index e02fdff2..7db3cc82 100644
--- a/src/views/settings/Roles.vue
+++ b/src/views/settings/Roles.vue
@@ -2,6 +2,7 @@
   <div>
     <cn-data-list
             ref="dataList"
+            :tableId="tableId"
             v-model:custom-table-title="tools.customTableTitle"
             :api="url"
             :from="fromRoute.roles"
diff --git a/src/views/settings/User.vue b/src/views/settings/User.vue
index fdc3f361..403eb882 100644
--- a/src/views/settings/User.vue
+++ b/src/views/settings/User.vue
@@ -2,6 +2,7 @@
   <div>
     <cn-data-list
       ref="dataList"
+      :tableId="tableId"
       v-model:custom-table-title="tools.customTableTitle"
       :api="url"
       :from="fromRoute.user"