BusinessOpportunity.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!-- 暂无数据 -->
  2. <template>
  3. <div class="modelBlock">
  4. <div class="model-title">
  5. <div class="model-title-text">商机来源</div>
  6. <div class="model-title-right">
  7. <el-date-picker
  8. value-format="yyyy-MM"
  9. v-model="date"
  10. type="month"
  11. placeholder="选择月"
  12. class="saveColumn-select"
  13. @change="changeTime"
  14. :clearable="false"
  15. >
  16. </el-date-picker>
  17. </div>
  18. </div>
  19. <div class="model-content">
  20. <zz-echart
  21. :option="clientOptions"
  22. class="chart"
  23. ></zz-echart>
  24. <div class="totals">
  25. <span class="fonst-color">{{ total }}</span>
  26. <span class="numbers fonst-color">总人数</span>
  27. </div>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import { ringType } from './indexOptionChart';
  33. import index from './allcommunit';
  34. export default {
  35. mixins: [index],
  36. data () {
  37. return {
  38. mixins_query: {
  39. companyOrgId: '',
  40. startDate: ''
  41. },
  42. date: '',
  43. total: 0,
  44. clientOptions: ringType(
  45. [],
  46. [
  47. { value: 0, name: '线上预约' },
  48. { value: 0, name: '线上电话' },
  49. { value: 0, name: '线下访问' },
  50. ]
  51. )
  52. };
  53. },
  54. methods: {
  55. getData () {
  56. this.$http.get('/sc-community-web/business/statistics/source', this.mixins_query).then(({ data, msg, status }) => {
  57. if (status == 0) {
  58. let newData = [];
  59. this.total = 0;
  60. for (let i in data) {
  61. this.total += data[i].total;
  62. newData.push({
  63. name: data[i].businessSource == 1 ? '线上预约' : data[i].businessSource == 2 ? '线上电话' : '线下预约',
  64. value: data[i].total
  65. })
  66. }
  67. this.clientOptions = ringType([], newData);
  68. }
  69. });
  70. },
  71. changeTime (v) {
  72. this.mixins_query.startDate = v;
  73. this.getData();
  74. },
  75. },
  76. created () {
  77. this.mixins_query.startDate = this.$moment().format('YYYY-MM');
  78. this.date = this.$moment().format('YYYY-MM');
  79. this.getData();
  80. }
  81. };
  82. </script>
  83. <style lang="scss" scoped>
  84. @import '../style.scss';
  85. .model-title {
  86. .model-title-right {
  87. .saveColumn-select {
  88. &:not(:first-child) {
  89. margin-left: rem(20);
  90. }
  91. }
  92. }
  93. }
  94. .fonst-color {
  95. color: #fff;
  96. }
  97. </style>