center-top.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <div class="center-top-wrap">
  3. <div>
  4. <dv-digital-flop :config="config" style="width:90%;height:50px;" />
  5. <div>{{ year }}年总销售数量</div>
  6. </div>
  7. <div>
  8. <dv-digital-flop :config="config1" style="width:90%;height:50px;" />
  9. <div>{{ year }}年总销售金额</div>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import { formatThousands } from '@/utils/util.js'
  15. export default {
  16. props: {
  17. totalNums: {
  18. type: [Number, String],
  19. default: 0
  20. },
  21. totalAmount: {
  22. type: [Number, String],
  23. default: 0
  24. }
  25. },
  26. data () {
  27. return {
  28. year: 0,
  29. config: null,
  30. config1: null
  31. }
  32. },
  33. mounted () {
  34. this.year = new Date().getFullYear()
  35. },
  36. watch: {
  37. totalNums (newValue, oldValue) {
  38. console.log(newValue)
  39. this.config = {
  40. number: [newValue],
  41. content: '{nt}',
  42. style: {
  43. fill: '#00aaff',
  44. fontSize: 40,
  45. fontWeight: 'bold'
  46. },
  47. formatter: formatThousands
  48. }
  49. },
  50. totalAmount (newValue, oldValue) {
  51. console.log(newValue)
  52. this.config1 = {
  53. number: [newValue],
  54. toFixed: 2,
  55. content: '{nt}',
  56. style: {
  57. fill: '#ffb442',
  58. fontSize: 40,
  59. fontWeight: 'bold'
  60. },
  61. formatter: formatThousands
  62. }
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="less" scoped>
  68. .center-top-wrap{
  69. display: flex;
  70. align-items: center;
  71. justify-content: space-between;
  72. > div{
  73. width: 50%;
  74. text-align: center;
  75. display: flex;
  76. flex-direction: column;
  77. justify-content: center;
  78. align-items: center;
  79. height: 110px;
  80. color: rgba(255, 255, 255, 0.4);
  81. font-size:16px;
  82. }
  83. }
  84. </style>