fix: npm 概况分数图 No data 占位 ,npm 下钻地图标题
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user