1

src/views/repair/screen/repairBigScreen.vue

@@ -8,7 +8,7 @@
       <div class="c_left">
         <div class="six_box">
           <div class="s_title">
-            客户来源
+            客户来源分析
           </div>
           <div class="echaets_box">
             <div id="khly" style="width: 400px; height: 267px;"></div>
@@ -16,36 +16,71 @@
         </div>
         <div class="six_box">
           <div class="s_title">
-            月工单数据来源
+            月工单数量走势
+          </div>
+          <div class="echaets_box">
+            <div id="gdslzs" style="width: 400px; height: 267px;"></div>
           </div>
-          <div class="echaets_box"></div>
         </div>
         <div class="six_box">
           <div class="s_title">
             支付渠道统计
           </div>
-          <div class="echaets_box"></div>
+          <div class="echaets_box">
+            <div id="zfqdtj" style="width: 400px; height: 267px;"></div>
+          </div>
         </div>
       </div>
       <div class="c_cont">
         <div class="tab_">
-          <div class="tab_buttom tab_acvit" >数量</div>
+          <div @click="countOrAmount()" class="tab_buttom tab_acvit">数量</div>
-          <div class="tab_buttom">金额</div>
+          <div @click="countOrAmount()" class="tab_buttom">金额</div>
         </div>
-        <div class="tab_bt">
+        <div v-if="isCount" class="tab_bt">
           <div class="yb_">
             <div class="yb_title">工单总数</div>
             <div class="numlist">
-                <div class="num_box" v-for="(item,index) in 6" :key="index">
+              <!--                <div class="num_box" v-for="(item,index) in 6" :key="index">-->
-                  {{index}}
+              <!--                  {{index}}-->
+              <!--                </div>-->
+              <div class="num_box">
+                {{ statistics.totalCount }}
               </div>
             </div>
           </div>
           <div class="yb_">
             <div class="yb_title">今日工单</div>
             <div class="numlist">
-              <div class="num_box" v-for="(item,index) in 6" :key="index">
+              <!--              <div class="num_box" v-for="(item,index) in 6" :key="index">-->
-                {{index}}
+              <!--                {{index}}-->
+              <!--              </div>-->
+              <div class="num_box">
+                {{ statistics.todayCount }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="tab_bt">
+          <div class="yb_">
+            <div class="yb_title">工单总金额（元）</div>
+            <div class="numlist">
+              <!--                <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                  {{index}}-->
+              <!--                </div>-->
+              <div class="num_box">
+                {{ statistics.totalAmount }}
+              </div>
+            </div>
+          </div>
+          <div class="yb_">
+            <div class="yb_title">今日工单金额（元）</div>
+            <div class="numlist">
+              <!--              <div class="num_box" v-for="(item,index) in 6" :key="index">-->
+              <!--                {{index}}-->
+              <!--              </div>-->
+              <div class="num_box">
+                {{ statistics.todayAmount }}
               </div>
             </div>
           </div>
@@ -56,8 +91,8 @@
               <img src="./imgs/1.png" style="width: 60px;height: 60px">
             </div>
             <div>
-              <div class="f_size">未派工</div>
+              <div class="f_size">{{ statusTickets[3].name }}</div>
-              <div class="f_num">2082</div>
+              <div class="f_num">{{ statusTickets[3].value }}</div>
             </div>
           </div>
           <div class="f_box">
@@ -65,8 +100,8 @@
               <img src="./imgs/2.png" style="width: 60px;height: 60px">
             </div>
             <div>
-              <div class="f_size">施工中</div>
+              <div class="f_size">{{ statusTickets[4].name }}</div>
-              <div class="f_num">2082</div>
+              <div class="f_num">{{ statusTickets[4].value }}</div>
             </div>
           </div>
           <div class="f_box">
@@ -74,8 +109,8 @@
               <img src="./imgs/3.png" style="width: 60px;height: 60px">
             </div>
             <div>
-              <div class="f_size">未结账</div>
+              <div class="f_size">{{ statusTickets[0].name }}</div>
-              <div class="f_num">2082</div>
+              <div class="f_num">{{ statusTickets[0].value }}</div>
             </div>
           </div>
           <div class="f_box">
@@ -83,8 +118,8 @@
               <img src="./imgs/4.png" style="width: 60px;height: 60px">
             </div>
             <div>
-              <div class="f_size">已结账</div>
+              <div class="f_size">{{ statusTickets[1].name }}</div>
-              <div class="f_num">2082</div>
+              <div class="f_num">{{ statusTickets[1].value }}</div>
             </div>
           </div>
           <div class="f_box">
@@ -92,13 +127,13 @@
               <img src="./imgs/5.png" style="width: 60px;height: 60px">
             </div>
             <div>
-              <div class="f_size">挂账</div>
+              <div class="f_size">{{ statusTickets[5].name }}</div>
-              <div class="f_num">2082</div>
+              <div class="f_num">{{ statusTickets[5].value }}</div>
             </div>
           </div>
         </div>
         <div class="co_title">
-          最新工单
+          今日工单
         </div>
         <div class="list_long">
           <div class="long_title">
@@ -108,14 +143,13 @@
             <div class="l_four">创建时间</div>
           </div>
           <div class="ot_vox">
-            <div class="long_box" v-for="(item,index) in 16" :key="index">
+            <div class="long_box" v-for="(item,index) in todayTickets" :key="index">
-              <div class="l_one">1209840149750105501</div>
+              <div class="l_one">{{ item.ticketNo }}</div>
-              <div class="l_two">张三</div>
+              <div class="l_two">{{ item.userName }}</div>
-              <div class="l_three">李向东</div>
+              <div class="l_three">{{ item.adviserName }}</div>
-              <div class="l_four">2024-10-20 12:00</div>
+              <div class="l_four">{{ parseTime(item.createTime) }}</div>
             </div>
           </div>
-
         </div>
       </div>
       <div class="c_right">
@@ -123,19 +157,36 @@
           <div class="s_title">
             维修类型统计
           </div>
-          <div class="echaets_box"></div>
+          <div class="echaets_box">
+            <div id="wxlxtj" style="width: 400px; height: 267px;"></div>
+          </div>
         </div>
         <div class="six_box">
           <div class="s_title">
             月工单金额走势
           </div>
-          <div class="echaets_box"></div>
+          <div class="echaets_box">
+            <div id="gdjezs" style="width: 400px; height: 267px;"></div>
+          </div>
         </div>
         <div class="six_box">
           <div class="s_title">
             维修工人排行
           </div>
-          <div class="echaets_box"></div>
+          <div class="echaets_box">
+            <div class="list_long">
+              <div class="long_title">
+                <div class="l_one">姓名</div>
+                <div class="l_two">服务工单数</div>
+              </div>
+              <div class="ot_vox">
+                <div class="long_box" v-for="(item,index) in workers" :key="index">
+                  <div class="l_one">{{ item.name }}</div>
+                  <div class="l_two">{{ item.value }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -145,38 +196,71 @@
 
 <script>
 import * as echarts from 'echarts';
+import * as RepairBigScreenApi from '@/views/repair/screen/api/repairBigScreen';
+
 export default {
   name: 'Index',
-  components: {
+  components: {},
-
-  },
   data() {
     return {
-
+      //金额数量统计
+      statistics: {},
+      //工单各状态数量
+      statusTickets: [],
+      //金额数量切换
+      isCount: true,
+      //今日工单
+      todayTickets: [],
+      //维修工人排行
+      workers: []
     }
   },
   created() {
-
+    //工单总数、今日工单、工单总金额、今日工单金额
+    this.ticketStatistics()
+    //工单状态数量统计
+    this.ticketStatusCount()
+    //今日工单
+    this.listTicketToday()
+    //维修工人排行
+    this.listWorks()
   },
   mounted() {
-    this.echaerCar();
+    //客户来源分析饼图
+    this.customerSource();
+    //月工单数量走势
+    this.ticketMainCount()
+    //月工单金额走势
+    this.ticketMainAmount()
+    //支付渠道统计
+    this.ticketMainPayWay()
+    //维修类型相关统计分析饼图
+    this.repairTypeStatistics()
   },
   methods: {
-    echaerCar(){
+    countOrAmount() {
+      this.isCount = !this.isCount
+    },
+
+    /**
+     * 客户来源分析饼图
+     */
+    async customerSource() {
+      const res = await RepairBigScreenApi.customerSource();
       var chartDom = document.getElementById('khly');
       var myChart = echarts.init(chartDom);
       var option;
       option = {
-        // legend: {
-        //   top: 'bottom'
-        // },
         toolbox: {
           show: true,
-
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
         },
         series: [
           {
-            name: 'Nightingale Chart',
+            name: '客户来源分析',
             type: 'pie',
             radius: [20, 100],
             center: ['50%', '50%'],
@@ -184,18 +268,181 @@ export default {
             itemStyle: {
               borderRadius: 2
             },
-            data: [
+            data: res.data,
-              { value: 40, name: '救援' },
-              { value: 38, name: '线下' },
-              { value: 32, name: '小程序预约' },
-
-            ]
           }
         ]
       };
-
       option && myChart.setOption(option);
+    },
+
+    /**
+     * 月工单数量走势
+     */
+    async ticketMainCount() {
+      const res = await RepairBigScreenApi.ticketMainCount();
+      var chartDom = document.getElementById('gdslzs');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: res.data.xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.data,
+            type: 'line',
+            smooth: true
           }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+
+    /**
+     * 月工单金额走势
+     */
+    async ticketMainAmount() {
+      const res = await RepairBigScreenApi.ticketMainAmount();
+      var chartDom = document.getElementById('gdjezs');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: res.data.xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.data,
+            type: 'line',
+            smooth: true
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 支付渠道统计
+     */
+    async ticketMainPayWay() {
+      const res = await RepairBigScreenApi.ticketMainPayWay();
+      var chartDom = document.getElementById('zfqdtj');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: res.data.xData
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: res.data.data,
+            type: 'bar'
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 维修类型相关统计分析饼图
+     */
+    async repairTypeStatistics() {
+      const res = await RepairBigScreenApi.repairTypeStatistics();
+      var chartDom = document.getElementById('wxlxtj');
+      var myChart = echarts.init(chartDom, 'dark');
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: '维修类型统计',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 5,
+            itemStyle: {
+              borderRadius: 10
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 40,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: res.data
+          }
+        ]
+      };
+      option && myChart.setOption(option);
+    },
+    /**
+     * 单总数、今日工单、工单总金额、今日工单金额
+     */
+    async ticketStatistics() {
+      const res = await RepairBigScreenApi.ticketStatistics();
+      this.statistics = res.data
+    },
+
+    /**
+     * 工单状态数量统计
+     */
+    async ticketStatusCount() {
+      const res = await RepairBigScreenApi.ticketStatusCount();
+      this.statusTickets = res.data
+    },
+
+    /**
+     * 今日工单
+     */
+    async listTicketToday() {
+      const res = await RepairBigScreenApi.listTicketToday();
+      this.todayTickets = res.data
+    },
+
+    /**
+     * 维修工人排行
+     */
+    async listWorks() {
+      const res = await RepairBigScreenApi.listWorks();
+      this.workers = res.data
+    }
+
   }
 }
 </script>
@@ -208,6 +455,7 @@ export default {
   width: 100%;
   height: 100vh;
 }
+
 .top_ {
   width: 100%;
   height: 86px;
@@ -221,18 +469,22 @@ export default {
   font-weight: bold;
   margin-bottom: 15px;
 }
+
 .content_ {
   width: 100%;
   display: flex;
   //align-items: center;
   justify-content: space-between;
 }
+
 .c_left {
   width: 25%;
 }
+
 .c_cont {
   width: 50%;
 }
+
 .tab_ {
   display: flex;
   align-items: center;
@@ -242,12 +494,14 @@ export default {
   color: #FFFFFF;
   margin: 15px auto;
 }
+
 .yb_title {
   text-align: center;
   font-size: 18px;
   color: #FFFFFF;
   margin: 15px auto;
 }
+
 .tab_bt {
   display: flex;
   align-items: center;
@@ -257,6 +511,7 @@ export default {
   box-sizing: border-box;
   padding-bottom: 20px;
 }
+
 .tab_buttom {
   width: 120px;
   height: 32px;
@@ -266,17 +521,20 @@ export default {
   align-items: center;
   justify-content: center;
 }
+
 yb_title {
   font-size: 16px;
   color: #FFFFFF;
   text-align: center;
   width: 100%;
 }
+
 .numlist {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .num_box {
   width: 38px;
   height: 50px;
@@ -291,36 +549,44 @@ yb_title{
   color: #FFFFFF;
   margin: 0px 10px;
 }
+
 .yb_ {
   width: 50%;
 }
+
 .tab_acvit {
   background: #0174F6 !important;
 }
+
 .five_box {
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin: 30px auto;
 }
+
 .f_size {
   font-size: 14px;
   color: #FFFFFF;
 }
+
 .f_num {
   font-weight: bold;
   font-size: 24px;
   color: #FFFFFF;
 }
+
 .img_left {
   width: 60px;
   height: 60px;
   margin-right: 10px;
 }
+
 .f_box {
   display: flex;
   align-items: center;
 }
+
 .co_title {
   width: 100%;
   height: 32px;
@@ -332,6 +598,7 @@ yb_title{
   box-sizing: border-box;
   padding-left: 40px;
 }
+
 .s_title {
   width: 90%;
   height: 32px;
@@ -344,17 +611,20 @@ yb_title{
   padding-left: 40px;
   margin: 0px auto;
 }
+
 .echaets_box {
   width: 90%;
   height: 267px;
   margin: 0px auto;
   border-bottom: 1px solid #0174F6;
 }
+
 .list_long {
   width: 100%;
   height: 563px;
 
 }
+
 .l_one {
   width: 30%;
   text-align: left;
@@ -364,6 +634,7 @@ yb_title{
   box-sizing: border-box;
   padding-left: 35px;
 }
+
 .l_two {
   width: 20%;
   text-align: center;
@@ -371,6 +642,7 @@ yb_title{
   color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
 }
+
 .l_three {
   width: 20%;
   text-align: center;
@@ -378,6 +650,7 @@ yb_title{
   color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
 }
+
 .l_four {
   width: 30%;
   text-align: right;
@@ -387,6 +660,7 @@ yb_title{
   box-sizing: border-box;
   padding-right: 35px;
 }
+
 .long_title {
   width: 100%;
   height: 58px;
@@ -398,12 +672,14 @@ yb_title{
   justify-content: space-between;
   margin: 10px auto;
 }
+
 .ot_vox {
   width: 100%;
   height: 500px;
   overflow: auto;
   scrollbar-width: none;
 }
+
 .long_box {
   width: 100%;
   height: 58px;
@@ -413,9 +689,11 @@ yb_title{
   justify-content: space-between;
   margin: 10px auto;
 }
+
 .six_box {
   margin-bottom: 15px;
 }
+
 .c_right {
   width: 25%;
 }