new-map
ihzero 2023-03-07 20:42:56 +08:00
parent 3ce3bb5847
commit c556a48e43
4 changed files with 40 additions and 35 deletions

View File

@ -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>

View File

@ -27,7 +27,7 @@ export const columns: BasicColumn[] = [
dataIndex: 'areas',
},
{
title: '街镇就业人数',
title: '街镇人数',
dataIndex: 'workforce',
},
{

View File

@ -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

View File

@ -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
}