1

src/views/repair/screen/repairBigScreen.vue

@@ -3,12 +3,12 @@
     <div class="top_">
       <div>车辆维修数据分析</div>
     </div>
-<!--    -->
+    <!--    -->
     <div class="content_">
       <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,31 +268,195 @@ 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>
 
 <style lang="scss" scoped>
-.cont{
+.cont {
   background: #020F32;
   //background: url("./imgs/back.png") no-repeat;
   background-size: 100% 100%;
   width: 100%;
   height: 100vh;
 }
-.top_{
+
+.top_ {
   width: 100%;
   height: 86px;
   background: url("./imgs/top.png") no-repeat;
@@ -221,19 +469,23 @@ export default {
   font-weight: bold;
   margin-bottom: 15px;
 }
-.content_{
+
+.content_ {
   width: 100%;
   display: flex;
   //align-items: center;
   justify-content: space-between;
 }
-.c_left{
+
+.c_left {
   width: 25%;
 }
-.c_cont{
+
+.c_cont {
   width: 50%;
 }
-.tab_{
+
+.tab_ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -242,13 +494,15 @@ export default {
   color: #FFFFFF;
   margin: 15px auto;
 }
-.yb_title{
+
+.yb_title {
   text-align: center;
   font-size: 18px;
   color: #FFFFFF;
   margin: 15px auto;
 }
-.tab_bt{
+
+.tab_bt {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -257,7 +511,8 @@ export default {
   box-sizing: border-box;
   padding-bottom: 20px;
 }
-.tab_buttom{
+
+.tab_buttom {
   width: 120px;
   height: 32px;
 
@@ -266,18 +521,21 @@ export default {
   align-items: center;
   justify-content: center;
 }
-yb_title{
+
+yb_title {
   font-size: 16px;
   color: #FFFFFF;
   text-align: center;
   width: 100%;
 }
-.numlist{
+
+.numlist {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.num_box{
+
+.num_box {
   width: 38px;
   height: 50px;
   border-radius: 0px 0px 0px 0px;
@@ -291,37 +549,45 @@ yb_title{
   color: #FFFFFF;
   margin: 0px 10px;
 }
-.yb_{
+
+.yb_ {
   width: 50%;
 }
-.tab_acvit{
+
+.tab_acvit {
   background: #0174F6 !important;
 }
-.five_box{
+
+.five_box {
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin: 30px auto;
 }
-.f_size{
+
+.f_size {
   font-size: 14px;
   color: #FFFFFF;
 }
-.f_num{
+
+.f_num {
   font-weight: bold;
   font-size: 24px;
   color: #FFFFFF;
 }
-.img_left{
+
+.img_left {
   width: 60px;
   height: 60px;
   margin-right: 10px;
 }
-.f_box{
+
+.f_box {
   display: flex;
   align-items: center;
 }
-.co_title{
+
+.co_title {
   width: 100%;
   height: 32px;
   background: url("./imgs/c_title.png") no-repeat;
@@ -332,7 +598,8 @@ yb_title{
   box-sizing: border-box;
   padding-left: 40px;
 }
-.s_title{
+
+.s_title {
   width: 90%;
   height: 32px;
   background: url("./imgs/title.png") no-repeat;
@@ -344,53 +611,60 @@ yb_title{
   padding-left: 40px;
   margin: 0px auto;
 }
-.echaets_box{
+
+.echaets_box {
   width: 90%;
   height: 267px;
   margin: 0px auto;
   border-bottom: 1px solid #0174F6;
 }
-.list_long{
+
+.list_long {
   width: 100%;
   height: 563px;
 
 }
-.l_one{
+
+.l_one {
   width: 30%;
   text-align: left;
   font-size: 18px;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
   box-sizing: border-box;
   padding-left: 35px;
 }
-.l_two{
+
+.l_two {
   width: 20%;
   text-align: center;
   font-size: 18px;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
 }
-.l_three{
+
+.l_three {
   width: 20%;
   text-align: center;
   font-size: 18px;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
 }
-.l_four{
+
+.l_four {
   width: 30%;
   text-align: right;
   font-size: 18px;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
   box-sizing: border-box;
   padding-right: 35px;
 }
-.long_title{
+
+.long_title {
   width: 100%;
   height: 58px;
-  background: rgba(1,116,246,0.1);
+  background: rgba(1, 116, 246, 0.1);
   background: url("./imgs/c_list.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
@@ -398,25 +672,29 @@ yb_title{
   justify-content: space-between;
   margin: 10px auto;
 }
-.ot_vox{
+
+.ot_vox {
   width: 100%;
   height: 500px;
   overflow: auto;
   scrollbar-width: none;
 }
-.long_box{
+
+.long_box {
   width: 100%;
   height: 58px;
-  background: rgba(1,116,246,0.1);
+  background: rgba(1, 116, 246, 0.1);
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 10px auto;
 }
-.six_box{
+
+.six_box {
   margin-bottom: 15px;
 }
-.c_right{
+
+.c_right {
   width: 25%;
 }