333

schangxiang@126.com

2025-09-19 18966e02fb573c7e2bb0c6426ed792b38b910940

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
  <div class="chart-wrapper">
    <div class="">
      <el-select v-model="value" placeholder="请选择" @change="changeDay()">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="haocai-title"></div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="100" :lg="8">
        <ring-chart ref="ringchartOne" :ring-color="'#ff6699'" :ring-value="numStatistics.noAcceptWayBillNum" :ring-proportion="numStatistics.noAcceptWayBillProportion" />
        <div class="haocai-title">未揽收运单</div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <ring-chart ref="ringchartTwo" :ring-color="'#cc0066'" :ring-value="numStatistics.acceptWayBillNum" :ring-proportion="numStatistics.acceptWayBillNumProportion" />
        <div class="haocai-title">已揽收运单</div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <ring-chart ref="ringchartThree" :ring-value="numStatistics.endWayBillNum" :ring-proportion="numStatistics.endWayBillNumProportion" />
        <div class="haocai-title">已完成运单</div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import RingChart from "../components/RingChart";
 
export default {
  components: {
    RingChart
  },
  data() {
    return {
      value: "近三月",
      options: [
        {
          value: "今日",
          label: "今日"
        },
        {
          value: "近两日",
          label: "近两日"
        },
        {
          value: "近一星期",
          label: "近一星期"
        },
        {
          value: "近一月",
          label: "近一月"
        },
        {
          value: "近三月",
          label: "近三月"
        },
        {
          value: "近半年",
          label: "近半年"
        },
        {
          value: "近一年",
          label: "近一年"
        }
      ],
      numStatistics: {
        noAcceptWayBillNum: 0,
        acceptWayBillNum: 0,
        endWayBillNum: 0,
        noAcceptWayBillProportion: 0,
        acceptWayBillNumProportion: 0,
        endWayBillNumProportion: 0
      }
    };
  },
  mounted() {
    this.getWayBillNumStatistics();
  },
  methods: {
    getWayBillNumStatistics() {
      var the = this;
      var dateType = this.value;
      const url = "/api/dashboard/tms/getWayBillNumStatistics";
      const params = { dateType: dateType };
      var callback = res => {
        if (res.result) {
          this.$set(
            this.numStatistics,
            "noAcceptWayBillNum",
            res.data.noAcceptWayBillNum
          );
          this.$set(
            this.numStatistics,
            "acceptWayBillNum",
            res.data.acceptWayBillNum
          );
          this.$set(
            this.numStatistics,
            "endWayBillNum",
            res.data.endWayBillNum
          );
          var noAcceptWayBillProportion = 0;
          if (res.data.WayBillNum !== 0) {
            noAcceptWayBillProportion = parseFloat(
              (res.data.noAcceptWayBillNum / res.data.WayBillNum) * 100
            );
          }
          var acceptWayBillNumProportion = 0;
          if (res.data.WayBillNum !== 0) {
            acceptWayBillNumProportion = parseFloat(
              (res.data.acceptWayBillNum / res.data.WayBillNum) * 100
            );
          }
          var endWayBillNumProportion = 0;
          if (res.data.WayBillNum !== 0) {
            endWayBillNumProportion = parseFloat(
              (res.data.endWayBillNum / res.data.WayBillNum) * 100
            );
          }
          this.$set(
            this.numStatistics,
            "noAcceptWayBillProportion",
            noAcceptWayBillProportion
          );
          this.$set(
            this.numStatistics,
            "acceptWayBillNumProportion",
            acceptWayBillNumProportion
          );
          this.$set(
            this.numStatistics,
            "endWayBillNumProportion",
            endWayBillNumProportion
          );
          window.setTimeout(function() {
            the.$refs.ringchartOne.initChart();
            the.$refs.ringchartTwo.initChart();
            the.$refs.ringchartThree.initChart();
          }, 10);
        }
      };
      this.common.ajax(url, params, callback, true);
    },
    changeDay() {
      this.getWayBillNumStatistics();
    }
  }
};
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px;
    margin-bottom: 10px;
    .haocai-title {
      text-align: center;
      color: #888;
      font-size: 18px;
    }
  }
</style>