统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

 src/views/popup/Popup.vue

@@ -1,16 +1,32 @@
<template>
  <div id="popup" v-if="isShow" class="s-map-popup-panel">
    <el-tabs v-model="tabsValue" type="card">
  <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px">
    <el-tabs type="card" v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane
              :key="item.name"
              v-for="(item) in tabs"
              :key="index"
              v-for="(item,index) in datas"
              :label="item.title"
              :name="item.name"
              :name="index.toString()"
      >
        <el-row v-for="(v,k) in filter" :key="k">
          <el-col :span="10"><B>{{k}}：</B></el-col>
          <el-col :span="14">{{v}}</el-col>
        <el-row v-for="(item,key)  in item.content" :key="key">
          <el-col :span="12"><B>{{key}}：</B></el-col>
          <el-col :span="12">{{item}}</el-col>
        </el-row>
        <el-table v-if="item.tableList"
                :data="item.tableList"
                style="width: 100%">
          <el-table-column
                  prop="pipesegcode"
                  label="管段编码">
          </el-table-column>
          <el-table-column
                  prop="startpointdepth"
                  label="起点埋深(m)">
          </el-table-column>
          <el-table-column
                  prop="startpointz"
                  label="起点高程(m)">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
@@ -18,76 +34,48 @@

<script>
// import '@/assets/css/map/map-popup.scss'
import { props } from '../../conf/Constants'

import { highlight } from '../../components/helpers/LocateHelper'

export default {
  name: 'Popup',
  props: ['datas'],
  data () {
    return {
      tabsValue: '1',
      tabs: [],
      tabIndex: 2,
      tabsValue: '',
      tabIndex: 0,
      isShow: false,
      properties: {},
      props: props
      properties: {}
    }
  },
  computed: {
    filter () {
      var obj = {}
      for (const key in this.properties) {
        if (this.props[key]) {
          obj[this.props[key]] = this.properties[key]
        }
      }
      return obj
    }
  },
  methods: {
    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
    filter (content) {
      var obj = {}
      for (const key in content) {
        if (this.props[key]) {
          obj[this.props[key]] = content[key]
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    },
    setDatas (layer) {
      console.log(layer)
      this.tabs = [{
        title: layer.feature.properties.name || layer.feature.id,
        name: '1'
      }]
      this.properties = layer.feature.properties
      // console.log(obj)
      return obj
    },
    setShow () {
      // this.style.display='auto'
      this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa'
      this.isShow = true
    },
    onClick () {
      const param = 1111
      this.$emit('callPopup', param)
    handleClick (tab, event) {
      const data = this.datas[this.tabIndex]
      const feature = data.feature
      highlight(feature)
    }
  },
  watch: {
    datas (newVal) {
      if (newVal != null) {
        this.tabsValue = newVal[0].name
      }
    }
  }
}