fix: npm 概况分数图 No data 占位 ,npm 下钻地图标题

This commit is contained in:
@changcode
2022-10-10 17:18:23 +08:00
parent 65dd58305c
commit c95cce51b6
4 changed files with 24 additions and 3 deletions

View File

@@ -8,6 +8,9 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex: 1; flex: 1;
.npm-app-letter-no-data.npm-app-letter {
min-width: 500px;
}
.npm-app-letter { .npm-app-letter {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;

View File

@@ -1,3 +1,12 @@
.cn-chart__map-title {
font-size: 14px;
color: #353636;
font-weight: 600;
margin-bottom: 10px;
}
.cn-chart__map-drilldown.cn-chart__map {
height: calc(100% - 30px);
}
.cn-chart__map { .cn-chart__map {
height: 100%; height: 100%;
width: 100%; width: 100%;

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="npm-app"> <div class="npm-app">
<div class="npm-app-left"> <div class="npm-app-left">
<div class="npm-app-letter"> <div class="npm-app-letter" :class="{'npm-app-letter-no-data': isNoData}">
<div v-for="(letter, index) in colorPatchData" :key="index"> <div v-for="(letter, index) in colorPatchData" :key="index">
{{letter.letter}} {{letter.letter}}
</div> </div>

View File

@@ -1,11 +1,12 @@
<template> <template>
<div class="cn-chart__map"> <div class="cn-chart__map-title" v-if="tabIndex == 1">{{$t('npm.clientLocation')}}</div>
<div class="cn-chart__map" :class="{'cn-chart__map-drilldown': tabIndex == 1}">
<div class="map-canvas" id="npmDrillDownMap"></div> <div class="map-canvas" id="npmDrillDownMap"></div>
</div> </div>
</template> </template>
<script> <script>
import { shallowRef } from 'vue' import { ref, shallowRef } from 'vue'
import * as am4Core from '@amcharts/amcharts4/core' import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps' import * as am4Maps from '@amcharts/amcharts4/maps'
import { computeScore, getGeoData } from '@/utils/tools' import { computeScore, getGeoData } from '@/utils/tools'
@@ -15,8 +16,16 @@ import { getSecond } from '@/utils/date-util'
import { api, getData } from '@/utils/api' import { api, getData } from '@/utils/api'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import chartMixin from '@/views/charts2/chart-mixin' import chartMixin from '@/views/charts2/chart-mixin'
import { useRoute } from 'vue-router'
export default { export default {
name: 'NpmIpMap', name: 'NpmIpMap',
setup () {
const { query } = useRoute()
const tabIndex = ref(query.tabIndex || '')
return {
tabIndex
}
},
data () { data () {
return { return {
myChart: null, myChart: null,