dvcp_v2_webapp/project/dvui/components/AiDvRender.vue

<template>
  <div class="AiDvRender" style="width: 100%; height: 100%;">
    <ai-dv-display v-if="data.type === 'display'" :title="data.title" :list="values"></ai-dv-display>
    <ai-dv-panel
        style="height: 100%; width: 100%;"
        v-if="data.type !== 'display'"
        :title="data.title"
        :border="data.border || ''">
      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="values"/>
      <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
      <dv-scroll-board
          v-if="data.type === 'table'"
          :class="'dvScrollBoard' + theme"
          :config="formatTable(values, data.isShowIndex, data.rowNum)"
          :key="data.height"
          :theme="theme"
          :style="{height: data.height + 'px', width: '100%'}"/>
      <ai-echart v-else-if="/Chart/.test(data.type)"
                 style="height: 100%; width: 100%;"
                 :ref="'chart' + index"
                 :key="`chart${index}`"
                 :theme="theme"
                 :data="values"
                 :ops="chartList[data.config]"/>
      <ai-map :markers="values" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId"
              :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"/>
      <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
      <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
      <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>
      <ai-sprite v-else-if="/building/.test(data.type)" v-bind="data" is3D @init="mods[data.type]"/>
    </ai-dv-panel>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import AiSwiper from './AiSwiper.vue'
import chartList from './AiEchart/echartTpls'
import AiMonitor from "./AiMonitor/AiMonitor";
import AiDvPanel from "../layout/AiDvPanel/AiDvPanel";
import AiDvDisplay from "../layout/AiDvDisplay/AiDvDisplay";
import AiDvSummary from "../layout/AiDvSummary/AiDvSummary";
import AiSprite from "./AiSprite";
import * as mods from "./AiSprite/mods";


export default {
  name: 'AiDvRender',
  props: ['data', 'index', 'theme', 'instance'],
  components: {
    AiSprite,
    AiDvSummary,
    AiDvDisplay,
    AiDvPanel,
    AiMonitor,
    AiSwiper
  },
  data() {
    return {
      mods,
      chartList,
      map: null,
      lib: null
    }
  },
  computed: {
    ...mapState(['user']),
    values() {
      if (!this.data) {
        return []
      }
      return this.data.type === 'map' ? this.data[this.data.dataType].map(e => {
        return {...e, lng: e['经度'], lat: e['纬度'], label: e['地区名称']}
      }) : this.data[this.data.dataType]
    },
  },
  methods: {
    formatTable(data, isShowIndex, rowNum) {
      if (!data.length) {
        return {
          header: [],
          data: []
        }
      }
      let rows = []
      const header = data.map(v => {
        return v[Object.keys(v)[0]]
      })
      Object.keys(data[0]).forEach((item, index) => {
        if (index !== 0) {
          rows.push(item)
        }
      })
      return {
        header: header,
        data: rows.map(item => {
          return data.map(v => {
            return v[item]
          })
        }),
        headerBGC: 'transparent',
        evenRowBGC: 'transparent',
        oddRowBGC: 'rgba(0, 133, 255, 0.2)',
        headerHeight: 42,
        rowNum: rowNum || 7,
        index: isShowIndex === '1',
        waitTime: 8000,
        carousel: 'page',
        indexHeader: '排名',
        align: ['center', 'center', 'center', 'center', 'center']
      }
    },
    handleMapClick(count = 0) {
      let {lib: AMap, map} = this
      if (AMap) {
        let infoWin = new AMap.InfoWindow({content: ""})
        map.clearMap()
        let markers = this.values.filter(e => e.lng).map(e => {
          return new AMap.Marker({
            map,
            label: e.label,
            icon: e.icon,
            position: [e.lng, e.lat]
          }).on('click', ({target}) => {
            map.clearInfoWindow()
            markers?.map(m => m.getIcon() == e.selectedIcon && m.setIcon(e.icon))
            target.setIcon(e.selectedIcon)
            infoWin.setContent([
              `<div class="infoWin">`,
              `<b>${e.label}</b>`,
              `<div>累计成交金额：${e['累计成交金额(万)']}万元</div>`,
              `<div>金融产品：${e['金融产品(万)']}万元</div>`,
              `<div>融资需求：${e['融资需求(万)']}万元</div>`,
              '</div>'
            ].join(''))
            infoWin.open(map, [e.lng, e.lat])
          })
        })
        map.setFitView(markers)
      } else if (count < 10) {
        console.log("正在加载...%s", count)
        setTimeout(() => this.handleMapClick(++count), 1000)
      }
    }
  },
  mounted() {
    if (this.data.type == 'map') {
      this.handleMapClick()
    }
  }
}
</script>

<style lang="scss" scoped>
.AiDvRender {
  ::v-deep .dvScrollBoard1 {

    .header {
      background: rgba(0, 0, 0, 0.1) !important;

      .header-item {
        color: #FFBB73 !important;
        font-size: 16px !important;
        font-weight: 600;
      }
    }


    .rows {
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 21px;
      text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
      background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      & > div:nth-of-type(2n - 1) {
        background-color: transparent !important;
      }

      & > div:nth-of-type(2n) {
        background-color: rgba(0, 0, 0, 0.1) !important;
      }

      .index {
        color: #fff;
        text-shadow: none;
        background: #BD4921 !important;
        -webkit-background-clip: inherit;
        -webkit-text-fill-color: #fff;
      }
    }
  }

  ::v-deep.amap-info-contentContainer {
    .amap-info-content {
      background: #0A3257;
      border: 1px solid #7BE5FF;
      padding: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;

      .infoWin {
        & > b {
          display: block;
          font-size: 18px;
          font-weight: 600;
          color: #FFFFFF;
          margin-bottom: 13px;
        }

        & > div {
          font-size: 16px;
          font-weight: 400;
          color: #7BE5FF;

          & + div {
            margin-top: 8px;
          }
        }
      }
    }

    .amap-info-sharp {
      border-top-color: #0A3257;

      &:after {
        border-top-color: #7BE5FF;
        filter: none;
      }
    }
  }
}
</style>