From 1272119cbb5d10351ade61b7d9280ed895db93dc Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 22 Jul 2022 15:00:13 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E5=AE=9A=E6=97=B6=E6=8A=A5=E5=91=8A=E5=8F=91=E9=80=81=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E6=95=B0=E6=8D=AE=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DeViewSelect/index.bak.vue | 238 ++++++++++++++++++
 .../src/components/DeViewSelect/index.vue     | 138 +++++-----
 .../chart/components/normal/LabelNormal.vue   |   1 +
 3 files changed, 307 insertions(+), 70 deletions(-)
 create mode 100644 frontend/src/components/DeViewSelect/index.bak.vue

diff --git a/frontend/src/components/DeViewSelect/index.bak.vue b/frontend/src/components/DeViewSelect/index.bak.vue
new file mode 100644
index 0000000000..40160056f6
--- /dev/null
+++ b/frontend/src/components/DeViewSelect/index.bak.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="el-view-select" :class="selectClass">
+    <el-select
+      ref="select"
+      v-model="innerValues"
+      v-popover:popover
+      popper-class="view-select-option"
+      style="width: 100%;"
+      multiple
+      clearable
+      @remove-tag="_selectRemoveTag"
+      @clear="_selectClearFun"
+      @focus="_popoverShowFun"
+    >
+      <el-option
+        v-for="item in selectOptions"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id"
+      />
+    </el-select>
+
+    <el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
+      <el-scrollbar v-if="viewLoaded" tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
+        <div :style="{'height': panelHeight + 'px'}">
+          <Preview
+            :component-data="componentData"
+            :canvas-style-data="canvasStyleData"
+            :panel-info="panelInfo"
+            :show-position="showPosition"
+          />
+        </div>
+
+      </el-scrollbar>
+      <el-empty v-else style="height: 150px;" :image-size="120" description="" />
+
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import { on, off } from './dom'
+import Preview from '@/components/canvas/components/Editor/Preview'
+import { findOne } from '@/api/panel/panel'
+import { viewOptions } from '@/api/chart/chart'
+import { panelDataPrepare } from '@/components/canvas/utils/utils'
+export default {
+  name: 'DeViewSelect',
+  components: { Preview },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    panelId: {
+      type: String,
+      default: null
+    }
+
+  },
+  data() {
+    return {
+      visible: false,
+      placement: 'bottom',
+      transition: 'el-zoom-in-top',
+      width: 500,
+      selectClass: 'my-top-class',
+      innerValues: [],
+      panelHeight: 450,
+      showPosition: 'email-task',
+      viewLoaded: false,
+      selectOptions: []
+    }
+  },
+  computed: {
+    popperClass() {
+      const _c = 'el-view-select-popper ' + this.popoverClass
+      return this.disabled ? _c + ' disabled ' : _c
+    },
+    selectedViews() {
+      return this.$store.getters.panelViews[this.panelId]
+    }
+  },
+  watch: {
+    value(val, old) {
+      this.innerValues = val
+    },
+    innerValues(val, old) {
+      if (val !== old) {
+        this.$emit('input', val)
+      }
+    },
+    panelId(val, old) {
+      if (val !== old) {
+        this.innerValues = []
+        this.loadView()
+      }
+    },
+    selectedViews: {
+      handler(val) {
+        if (!val || !JSON.stringify(val)) {
+          this.innerValues = []
+          return
+        }
+        const viewIds = JSON.parse(JSON.stringify(val))
+
+        this.innerValues = JSON.parse(JSON.stringify(viewIds))
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this._updateH()
+    this.$nextTick(() => {
+      on(document, 'mouseup', this._popoverHideFun)
+    })
+  },
+  beforeDestroy() {
+    this._selectClearFun()
+    off(document, 'mouseup', this._popoverHideFun)
+  },
+  created() {
+    this.loadView()
+  },
+  methods: {
+    loadView() {
+      this._selectClearFun()
+      this.innerValues = this.value
+      this.viewLoaded = false
+      this.panelId && findOne(this.panelId).then(response => {
+        this.panelInfo = {
+          id: response.data.id,
+          name: response.data.name,
+          privileges: response.data.privileges,
+          sourcePanelName: response.data.sourcePanelName,
+          status: response.data.status
+        }
+        this.$store.dispatch('panel/setPanelInfo', this.panelInfo)
+        panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), rsp => {
+          this.viewLoaded = true
+          this.componentData = rsp.componentData
+          this.canvasStyleData = rsp.componentStyle
+          this.loadOptions()
+        })
+      })
+    },
+
+    loadOptions() {
+      this.panelId && viewOptions(this.panelId).then(res => {
+        this.selectOptions = res.data
+        this.init()
+      })
+    },
+    _updateH() {
+      this.$nextTick(() => {
+        this.width = this.$refs.select.$el.getBoundingClientRect().width
+        this.panelHeight = this.width * 9 / 16
+      })
+    },
+    _popoverShowFun(val) {
+      this._updateH()
+      this.$emit('onFoucs')
+    },
+    _popoverHideFun(e) {
+      const path = this._getEventPath(e)
+      const isInside = path.some(list => {
+        return list.className && typeof list.className === 'string' && list.className.indexOf('el-view-select') !== -1
+      })
+      if (!isInside) {
+        this.visible = false
+      }
+    },
+    _getEventPath(evt) {
+      const path = (evt.composedPath && evt.composedPath()) || evt.path
+      const target = evt.target
+      if (path != null) {
+        return path.indexOf(window) < 0 ? path.concat(window) : path
+      }
+      if (target === window) {
+        return [window]
+      }
+      function getParents(node, memo) {
+        memo = memo || []
+        const parentNode = node.parentNode
+        if (!parentNode) {
+          return memo
+        } else {
+          return getParents(parentNode, memo.concat(parentNode))
+        }
+      }
+      return [target].concat(getParents(target), window)
+    },
+    _selectRemoveTag(viewId) {
+      this.selectedViews.forEach(item => {
+        if (item.viewId === viewId) {
+          this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item.viewId })
+        }
+      })
+    },
+    _selectClearFun() {
+      this.$store.dispatch('task/delPanelViews', this.panelId)
+    },
+    init() {
+      if (this.value && this.value.length) {
+        const viewIds = JSON.parse(JSON.stringify(this.value))
+        this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.el-view-select .view-select-option {
+  display: none !important;
+}
+
+.el-view-select-popper {
+  max-height: 800px;
+  overflow: auto;
+}
+.el-view-select-popper.disabled {
+  display: none !important;
+}
+.el-view-select-popper .el-button--small {
+  width: 25px !important;
+  min-width: 25px !important;
+}
+
+.el-view-select-popper[x-placement^='bottom'] {
+  margin-top: 5px;
+}
+
+.my-top-class {
+  width: 100%;
+}
+</style>
diff --git a/frontend/src/components/DeViewSelect/index.vue b/frontend/src/components/DeViewSelect/index.vue
index 40160056f6..909e17c2f2 100644
--- a/frontend/src/components/DeViewSelect/index.vue
+++ b/frontend/src/components/DeViewSelect/index.vue
@@ -3,7 +3,6 @@
     <el-select
       ref="select"
       v-model="innerValues"
-      v-popover:popover
       popper-class="view-select-option"
       style="width: 100%;"
       multiple
@@ -20,26 +19,38 @@
       />
     </el-select>
 
-    <el-popover ref="popover" v-model="visible" :placement="placement" :transition="transition" :popper-class="popperClass" :width="width" trigger="click">
-      <el-scrollbar v-if="viewLoaded" tag="div" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list" class="is-empty">
-        <div :style="{'height': panelHeight + 'px'}">
-          <Preview
-            :component-data="componentData"
-            :canvas-style-data="canvasStyleData"
-            :panel-info="panelInfo"
-            :show-position="showPosition"
-          />
-        </div>
+    
 
-      </el-scrollbar>
-      <el-empty v-else style="height: 150px;" :image-size="120" description="" />
-
-    </el-popover>
+    
+    <el-dialog
+      :visible="dialogShow"
+      :show-close="false"
+      class="dialog-css"
+      :fullscreen="true"
+    >
+      <div ref="contaninerDiv" :style="{'height': panelHeight + 'px'}" v-if="dialogShow && viewLoaded">
+        <Preview
+          :component-data="componentData"
+          :canvas-style-data="canvasStyleData"
+          :panel-info="panelInfo"
+          :show-position="showPosition"
+        />
+      </div>
+      
+      <div slot="title" class="dialog-footer title-text">
+        <span style="font-size: 14px;">
+          选择视图
+        </span>
+        <span style="float: right;">
+          <el-button type="primary" size="mini" @click="closeDialog()">{{ $t('commons.confirm') }}</el-button>
+          <el-button size="mini" @click="cancelDialog()">{{ $t('commons.cancel') }}</el-button>
+        </span>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { on, off } from './dom'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import { findOne } from '@/api/panel/panel'
 import { viewOptions } from '@/api/chart/chart'
@@ -69,7 +80,9 @@ export default {
       panelHeight: 450,
       showPosition: 'email-task',
       viewLoaded: false,
-      selectOptions: []
+      selectOptions: [],
+      dialogShow: false,
+      idsBeforeOpen: []
     }
   },
   computed: {
@@ -111,13 +124,11 @@ export default {
   },
   mounted() {
     this._updateH()
-    this.$nextTick(() => {
-      on(document, 'mouseup', this._popoverHideFun)
-    })
+    
   },
   beforeDestroy() {
     this._selectClearFun()
-    off(document, 'mouseup', this._popoverHideFun)
+    
   },
   created() {
     this.loadView()
@@ -153,47 +164,24 @@ export default {
     },
     _updateH() {
       this.$nextTick(() => {
-        this.width = this.$refs.select.$el.getBoundingClientRect().width
-        this.panelHeight = this.width * 9 / 16
+        if(this.$refs.contaninerDiv) {
+          this.width = this.$refs.contaninerDiv.clientWidth
+          this.panelHeight = this.width * 9 / 16
+        }
+        
       })
     },
     _popoverShowFun(val) {
+      this.openDialog()
       this._updateH()
       this.$emit('onFoucs')
     },
-    _popoverHideFun(e) {
-      const path = this._getEventPath(e)
-      const isInside = path.some(list => {
-        return list.className && typeof list.className === 'string' && list.className.indexOf('el-view-select') !== -1
-      })
-      if (!isInside) {
-        this.visible = false
-      }
-    },
-    _getEventPath(evt) {
-      const path = (evt.composedPath && evt.composedPath()) || evt.path
-      const target = evt.target
-      if (path != null) {
-        return path.indexOf(window) < 0 ? path.concat(window) : path
-      }
-      if (target === window) {
-        return [window]
-      }
-      function getParents(node, memo) {
-        memo = memo || []
-        const parentNode = node.parentNode
-        if (!parentNode) {
-          return memo
-        } else {
-          return getParents(parentNode, memo.concat(parentNode))
-        }
-      }
-      return [target].concat(getParents(target), window)
-    },
+    
+    
     _selectRemoveTag(viewId) {
       this.selectedViews.forEach(item => {
-        if (item.viewId === viewId) {
-          this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item.viewId })
+        if (item === viewId) {
+          this.$store.dispatch('task/delView', { 'panelId': this.panelId, 'viewId': item })
         }
       })
     },
@@ -205,6 +193,21 @@ export default {
         const viewIds = JSON.parse(JSON.stringify(this.value))
         this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
       }
+    },
+    openDialog() {
+      if (this.value && this.value.length) {
+        this.idsBeforeOpen =  JSON.parse(JSON.stringify(this.value))
+      }
+      this.dialogShow = true
+    },
+    closeDialog() {
+      this.dialogShow = false
+    },
+    cancelDialog() {
+      this.innerValues = JSON.parse(JSON.stringify(this.idsBeforeOpen))
+      const viewIds = JSON.parse(JSON.stringify(this.innerValues))
+      this.$store.dispatch('task/initPanelView', { 'panelId': this.panelId, 'viewIds': viewIds })
+      this.closeDialog()
     }
   }
 
@@ -216,23 +219,18 @@ export default {
   display: none !important;
 }
 
-.el-view-select-popper {
-  max-height: 800px;
-  overflow: auto;
-}
-.el-view-select-popper.disabled {
-  display: none !important;
-}
-.el-view-select-popper .el-button--small {
-  width: 25px !important;
-  min-width: 25px !important;
-}
-
-.el-view-select-popper[x-placement^='bottom'] {
-  margin-top: 5px;
-}
-
 .my-top-class {
   width: 100%;
 }
+.dialog-css ::v-deep .el-dialog__title {
+  font-size: 14px;
+}
+
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 20px 20px 0;
+}
+
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 20px;
+}
 </style>
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index bc9754d1d4..aa39b60651 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -227,6 +227,7 @@ export default {
     },
 
     resultFormat() {
+      if(!this.chart.data)return
       const value = this.chart.data.series[0].data[0]
       let yAxis = []
       try {