From 6d64044bbe23deafc7ec80cb5add1dd4e85ef559 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 29 Jul 2022 18:28:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A7=86=E5=9B=BE):=20=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E5=9C=B0=E5=90=8D=E6=98=A0=E5=B0=84=E9=85=8D=E7=BD=AE=E4=BB=A5?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=B8=96=E7=95=8C=E5=9C=B0=E5=9B=BE=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E4=B8=8B=E9=92=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/chart/chart/map/map.js     |   5 +
 .../views/chart/components/ChartComponent.vue |   1 -
 .../chart/components/senior/MapMapping.vue    | 207 ++++++++++++++++++
 frontend/src/views/chart/view/ChartEdit.vue   |  29 ++-
 4 files changed, 239 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/views/chart/components/senior/MapMapping.vue

diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 278b44f62e..9af23ae8c0 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -88,6 +88,11 @@ export function baseMapOption(chart_option, chart, themeStyle) {
         y.name = chart.data.x[i]
         chart_option.series[0].data.push(y)
       }
+      if (chart.senior) {
+        const senior = JSON.parse(chart.senior)
+
+        senior && senior.mapMapping && (chart_option.series[0].nameMap = senior.mapMapping)
+      }
     }
   }
   componentStyle(chart_option, chart)
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index ad91b3de3a..c1ee8f2edd 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -81,7 +81,6 @@ import {
   geoJson
 } from '@/api/map/map'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
-import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
   name: 'ChartComponent',
diff --git a/frontend/src/views/chart/components/senior/MapMapping.vue b/frontend/src/views/chart/components/senior/MapMapping.vue
new file mode 100644
index 0000000000..6623d0156b
--- /dev/null
+++ b/frontend/src/views/chart/components/senior/MapMapping.vue
@@ -0,0 +1,207 @@
+<template>
+  <div style="width: 100%;display: block !important;">
+    <el-table
+      :data="currentDatas"
+      size="mini"
+      :span-method="mergeCellMethod"
+      style="width: 100%"
+      :row-style="{height:0+'px'}"
+    >
+      <el-table-column
+        label="图形"
+        prop="mapArea"
+        width="160"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="属性"
+        width="50"
+      >
+        <template slot-scope="scope">
+          <el-input
+            v-if="scope.row.isEdit"
+            :ref="scope.row.mapArea + scope.$index + '-widget'"
+            v-model="scope.row.attrArea"
+            size="mini"
+            @blur="finishEdit(scope.row)"
+            @keyup.enter.native="$event.target.blur()"
+          >
+
+            <i slot="suffix" class="el-icon-success el-input__icon map-mapping-ok" @click="finishEdit(scope.row)" />
+          </el-input>
+
+          <el-button v-else size="mini" plain @click="triggerEdit(scope)">
+            <span class="mapping-span">{{ scope.row.attrArea }}</span>
+            <i class="el-icon-edit el-icon--right" />
+          </el-button>
+
+        </template>
+      </el-table-column>
+      <el-table-column align="right">
+
+        <template slot="header">
+          <el-input
+            v-model="keyWord"
+            size="mini"
+            placeholder="输入关键字搜索"
+          />
+        </template>
+
+      </el-table-column>
+    </el-table>
+    <div class="mapping-pagination">
+      <el-pagination
+        small
+        layout="prev, pager, next"
+        :page-size="pageSize"
+        :total="total"
+        :current-page="currentPage"
+        @current-change="searchPager"
+        @prev-click="searchPager"
+        @next-click="searchPager"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'FunctionCfg',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      mappingForm: {},
+
+      keyWord: '',
+      dynamicAreaCode: '',
+      gridList: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      currentDatas: [],
+      usePage: true
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    },
+    'keyWord': {
+      handler: function() {
+        this.buildGridList()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    triggerEdit(scope) {
+      this.$set(scope.row, 'isEdit', true)
+      this.$nextTick(() => {
+        this.$refs[scope.row.mapArea + scope.$index + '-widget'] && this.$refs[scope.row.mapArea + scope.$index + '-widget'].focus()
+      })
+    },
+    finishEdit(row) {
+      row.isEdit = false
+      this.mappingForm[row.mapArea] = row.attrArea
+      this.changeMapping()
+    },
+
+    mergeCellMethod({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        return [1, 2]
+      }
+      if (columnIndex === 2) {
+        return [0, 0]
+      }
+    },
+
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.senior) {
+        let senior = null
+        if (Object.prototype.toString.call(chart.senior) === '[object Object]') {
+          senior = JSON.parse(JSON.stringify(chart.senior))
+        } else {
+          senior = JSON.parse(chart.senior)
+        }
+        if (senior.mapMapping) {
+          this.mappingForm = senior.mapMapping
+        } else {
+          this.initMapping()
+        }
+        this.buildGridList()
+      }
+    },
+    buildGridList() {
+      this.gridList = Object.keys(this.mappingForm).map(key => {
+        return {
+          mapArea: key,
+          attrArea: this.mappingForm[key] || key
+        }
+      })
+      const baseDatas = JSON.parse(JSON.stringify(this.gridList))
+      const tempDatas = baseDatas.filter(data => !this.keyWord || data.mapArea.toLowerCase().includes(this.keyWord.toLowerCase()) || (data.attrArea && data.attrArea.toLowerCase().includes(this.keyWord.toLowerCase())))
+      if (this.usePage) {
+        const start = (this.currentPage - 1) * this.pageSize
+        let end = this.currentPage * this.pageSize
+        if (end >= tempDatas.length) end = tempDatas.length
+        this.currentDatas = tempDatas.slice(start, end)
+      } else {
+        this.currentDatas = tempDatas
+      }
+      this.total = tempDatas.length
+    },
+    initMapping() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      const customAttr = JSON.parse(chart.customAttr)
+      const cCode = this.chart.DetailAreaCode || this.dynamicAreaCode || customAttr.areaCode
+      if (this.$store.getters.geoMap[cCode]) {
+        const json = this.$store.getters.geoMap[cCode]
+        const features = json.features
+        this.mappingForm = {}
+        features.forEach(feature => {
+          this.mappingForm[feature.properties.name] = null
+        })
+      } else {
+        this.$warning('请先选择地图范围')
+      }
+    },
+    changeMapping() {
+      this.$emit('onMapMappingChange', this.mappingForm)
+    },
+    searchPager(pageNumber) {
+      this.currentPage = pageNumber
+      this.buildGridList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mapping-span {
+  display: inline-block;
+  width: 90px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left
+}
+
+.map-mapping-ok {
+  cursor: pointer;
+}
+.map-mapping-ok:hover {
+  color: #409eff;
+}
+
+</style>
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 82b01cae84..52403bf5ab 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -703,7 +703,7 @@
         <el-tab-pane name="senior" :label="$t('chart.senior')" class="padding-tab" style="width: 350px;">
           <el-row class="view-panel">
             <div
-              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table'))"
+              v-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('mix') || view.type.includes('gauge') || view.type === 'text' || view.type.includes('table') || view.type === 'map' || view.type === 'buddle-map')"
               style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;"
               class="attr-style theme-border-class"
             >
@@ -761,6 +761,25 @@
                   </el-collapse-item>
                 </el-collapse>
               </el-row>
+
+              <el-row v-if="view.type && (view.type === 'map' || view.type === 'buddle-map')">
+
+                <span class="padding-lr">{{ $t('chart.senior_cfg') }}</span>
+                <el-collapse v-model="attrActiveNames" class="style-collapse">
+
+                  <el-collapse-item title="地名映射">
+                    <map-mapping
+                      :param="param"
+                      class="attr-selector"
+                      :chart="chart"
+                      @onMapMappingChange="onMapMappingChange"
+                    />
+
+                  </el-collapse-item>
+
+                </el-collapse>
+              </el-row>
+
             </div>
             <div v-else class="no-senior">
               {{ $t('chart.chart_no_senior') }}
@@ -1084,6 +1103,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
 import { mapState } from 'vuex'
 
 import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
+import MapMapping from '@/views/chart/components/senior/MapMapping'
 import AssistLine from '@/views/chart/components/senior/AssistLine'
 import Threshold from '@/views/chart/components/senior/Threshold'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
@@ -1129,7 +1149,8 @@ export default {
     ChartDragItem,
     DrillItem,
     DrillPath,
-    PluginCom
+    PluginCom,
+    MapMapping
   },
   props: {
     param: {
@@ -1952,6 +1973,10 @@ export default {
       this.view.senior.scrollCfg = val
       this.calcStyle()
     },
+    onMapMappingChange(val) {
+      this.view.senior.mapMapping = val
+      this.calcStyle()
+    },
 
     showDimensionEditFilter(item) {
       this.dimensionItem = JSON.parse(JSON.stringify(item))