1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- <template>
- <div class="center-top-wrap">
- <div>
- <dv-digital-flop :config="config" style="width:90%;height:50px;" />
- <div>{{ year }}年总销售数量</div>
- </div>
- <div>
- <dv-digital-flop :config="config1" style="width:90%;height:50px;" />
- <div>{{ year }}年总销售金额</div>
- </div>
- </div>
- </template>
- <script>
- import { formatThousands } from '@/utils/util.js'
- export default {
- props: {
- totalNums: {
- type: [Number, String],
- default: 0
- },
- totalAmount: {
- type: [Number, String],
- default: 0
- }
- },
- data () {
- return {
- year: 0,
- config: null,
- config1: null
- }
- },
- mounted () {
- this.year = new Date().getFullYear()
- },
- watch: {
- totalNums (newValue, oldValue) {
- console.log(newValue)
- this.config = {
- number: [newValue],
- content: '{nt}',
- style: {
- fill: '#00aaff',
- fontSize: 40,
- fontWeight: 'bold'
- },
- formatter: formatThousands
- }
- },
- totalAmount (newValue, oldValue) {
- console.log(newValue)
- this.config1 = {
- number: [newValue],
- toFixed: 2,
- content: '{nt}',
- style: {
- fill: '#ffb442',
- fontSize: 40,
- fontWeight: 'bold'
- },
- formatter: formatThousands
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .center-top-wrap{
- display: flex;
- align-items: center;
- justify-content: space-between;
- > div{
- width: 50%;
- text-align: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 110px;
- color: rgba(255, 255, 255, 0.4);
- font-size:16px;
- }
- }
- </style>
|