new-map
parent
3ce3bb5847
commit
c556a48e43
|
|
@ -4,9 +4,9 @@
|
|||
</span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
|
||||
import { useTransition, TransitionPresets } from '@vueuse/core';
|
||||
import { isNumber } from '/@/utils/is';
|
||||
import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue'
|
||||
import { useTransition, TransitionPresets } from '@vueuse/core'
|
||||
import { isNumber } from '/@/utils/is'
|
||||
|
||||
const props = {
|
||||
startVal: { type: Number, default: 0 },
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
type: Number,
|
||||
default: 0,
|
||||
validator(value: number) {
|
||||
return value >= 0;
|
||||
return value >= 0
|
||||
},
|
||||
},
|
||||
prefix: { type: String, default: '' },
|
||||
|
|
@ -36,41 +36,41 @@
|
|||
* Digital animation
|
||||
*/
|
||||
transition: { type: String, default: 'linear' },
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CountTo',
|
||||
props,
|
||||
emits: ['onStarted', 'onFinished'],
|
||||
setup(props, { emit }) {
|
||||
const source = ref(props.startVal);
|
||||
const disabled = ref(false);
|
||||
let outputValue = useTransition(source);
|
||||
const source = ref(props.startVal)
|
||||
const disabled = ref(false)
|
||||
let outputValue = useTransition(source)
|
||||
|
||||
const value = computed(() => formatNumber(unref(outputValue)));
|
||||
const value = computed(() => formatNumber(unref(outputValue)))
|
||||
|
||||
watchEffect(() => {
|
||||
source.value = props.startVal;
|
||||
});
|
||||
source.value = props.startVal
|
||||
})
|
||||
|
||||
watch([() => props.startVal, () => props.endVal], () => {
|
||||
if (props.autoplay) {
|
||||
start();
|
||||
start()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
props.autoplay && start();
|
||||
});
|
||||
props.autoplay && start()
|
||||
})
|
||||
|
||||
function start() {
|
||||
run();
|
||||
source.value = props.endVal;
|
||||
run()
|
||||
source.value = props.endVal
|
||||
}
|
||||
|
||||
function reset() {
|
||||
source.value = props.startVal;
|
||||
run();
|
||||
source.value = props.startVal
|
||||
run()
|
||||
}
|
||||
|
||||
function run() {
|
||||
|
|
@ -80,31 +80,32 @@
|
|||
onFinished: () => emit('onFinished'),
|
||||
onStarted: () => emit('onStarted'),
|
||||
...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function formatNumber(num: number | string) {
|
||||
if (!num && num !== 0) {
|
||||
return '';
|
||||
return ''
|
||||
}
|
||||
const { decimals, decimal, separator, suffix, prefix } = props;
|
||||
num = Number(num).toFixed(decimals);
|
||||
num += '';
|
||||
const { decimals, decimal, separator, suffix, prefix } = props
|
||||
num = Number(num).toFixed(decimals)
|
||||
num = parseFloat(num)
|
||||
num += ''
|
||||
|
||||
const x = num.split('.');
|
||||
let x1 = x[0];
|
||||
const x2 = x.length > 1 ? decimal + x[1] : '';
|
||||
const x = num.split('.')
|
||||
let x1 = x[0]
|
||||
const x2 = x.length > 1 ? decimal + x[1] : ''
|
||||
|
||||
const rgx = /(\d+)(\d{3})/;
|
||||
const rgx = /(\d+)(\d{3})/
|
||||
if (separator && !isNumber(separator)) {
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + separator + '$2');
|
||||
x1 = x1.replace(rgx, '$1' + separator + '$2')
|
||||
}
|
||||
}
|
||||
return prefix + x1 + x2 + suffix;
|
||||
return prefix + x1 + x2 + suffix
|
||||
}
|
||||
|
||||
return { value, start, reset };
|
||||
return { value, start, reset }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const columns: BasicColumn[] = [
|
|||
dataIndex: 'areas',
|
||||
},
|
||||
{
|
||||
title: '街镇就业人数',
|
||||
title: '街镇人数',
|
||||
dataIndex: 'workforce',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -160,6 +160,7 @@
|
|||
|
||||
function autoChage(time) {
|
||||
timer && clearInterval(timer)
|
||||
if (time == 0) return
|
||||
timer = setInterval(() => {
|
||||
const index = Data.tabList.findIndex((e) => e.id == Data.currentTab)
|
||||
const currentIndex = index + 1
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<div class="text-white ml-6px">
|
||||
<div class="text-12px font-bold">{{ item.name }}</div>
|
||||
<div class="text-10px font-bold mt-4px">
|
||||
<CountTo :startVal="0" :endVal="item.value" class="text-10px font-bold" />
|
||||
<CountTo :startVal="0" :decimals="2" :endVal="item.value" class="text-10px font-bold" />
|
||||
<span>{{ item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -239,6 +239,9 @@
|
|||
}
|
||||
|
||||
function onChangeMap(el) {
|
||||
console.log('===========')
|
||||
console.log(el)
|
||||
|
||||
const keys = ['city_data_street']
|
||||
const temp = [] as cityDataType[]
|
||||
cityDefaultData.forEach((e) => {
|
||||
|
|
@ -249,7 +252,7 @@
|
|||
obj.value = Number(el.areas)
|
||||
obj.unit = '亩'
|
||||
} else if (e.slug == 'city_data_population') {
|
||||
obj.value = el.workforce
|
||||
obj.value = el.workforce / 10000
|
||||
} else if (e.slug == 'city_data_cultivated_area') {
|
||||
obj.value = el.cultivated
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue