修改车辆设备统计分析，修改借款打印

oa-ui/src/views/flowable/form/components/print/borrowPrint.vue

@@ -17,6 +17,12 @@
             {{ formartUsage(form.borrowUsage) }}
           </td>
         </tr>
+        <tr v-if="form.borrowUsage != '0'">
+          <td :colspan="2" class="fontbold">借款事由</td>
+          <td :colspan="8">
+            {{ form.applyReason }}
+          </td>
+        </tr>
         <tr v-if="form.borrowUsage == '0'">
           <td :colspan="2" class="fontbold">项目名称</td>
           <td :colspan="4">{{ chooseProject.projectName }}</td>
@@ -210,7 +216,6 @@ export default {
     }
   },
   mounted() {
-
   },
   methods: {
     formartUsage(val) {

oa-ui/src/views/oa/material/buy.vue

@@ -124,7 +124,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog title="选择耗材" :visible.sync="materialOpen" width="60%" append-to-body>
+    <el-dialog title="选择耗材" :visible.sync="materialOpen" width="60%" append-to-body :close-on-click-modal="false">
       <choose-materal @confirmChoose="confirmMaterial"></choose-materal>
     </el-dialog>
   </div>

oa-ui/src/views/oa/material/give.vue

@@ -122,7 +122,7 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog title="选择耗材" :visible.sync="materialOpen" width="60%" append-to-body>
+    <el-dialog title="选择耗材" :visible.sync="materialOpen" width="60%" append-to-body :close-on-click-modal="false">
       <choose-materal @confirmChoose="confirmMaterial"></choose-materal>
     </el-dialog>
   </div>

oa-ui/src/views/oa/project/invest.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ysh
  * @Date: 2024-02-27 14:49:15
- * @LastEditors: wrh
- * @LastEditTime: 2024-09-20 17:11:35
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-17 11:27:44
 -->
 <template>
   <div class="project-wrapper">
@@ -134,7 +134,7 @@
         <el-form-item label="项目负责人：" prop="projectLeader">
           <el-tag effect="plain" type="warning" style="margin-right: 10px;"
             v-if="addForm.projectLeaderName != undefined">{{
-        addForm.projectLeaderName }}</el-tag>
+              addForm.projectLeaderName }}</el-tag>
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="choosePeople">选择</el-button>
         </el-form-item>
         <el-form-item label="项目类型：" prop="projectType">
@@ -358,10 +358,12 @@ export default {
     },
     handleView(row) {
       let id = row.projectId
-      this.$router.push({
-        path: '/project/info',
-        query: { projectId: id }
-      })
+      this.$router.push(
+        {
+          name: 'projectInfo',
+          params: { id },
+          query: { projectId: id, projectName: row.projectName }
+        });
     },
     handleUpdate(row) {
       this.addForm = row;

oa-ui/src/views/statistics/components/carDeviceStatistics.vue

@@ -0,0 +1,602 @@
+<!--
+ * @Author: ysh
+ * @Date: 2024-10-17 10:40:13
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2024-10-17 17:21:13
+-->
+<template>
+  <div style="width:100%;" v-loading="loading">
+    <div class="titles">设备和车辆统计</div>
+    <div class="warpper">
+      <div class="left">
+        <div class="left-top" id="deviceYearBar"></div>
+        <div class="left-top" id="deviceStatusPie"></div>
+      </div>
+      <div class="middle">
+        <div class="middle-chart" id="deviceApprovalBar"></div>
+      </div>
+      <div class="right">
+        <div class="right-top" id="carYearBar"></div>
+        <div class="right-top" id="carStatusPie"></div>
+      </div>
+      <div class="right">
+        <div class="right-top" id="carApprovalBar"></div>
+        <div class="right-top" id="carDayBar"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ehcartsInit } from '@/utils/echarts'
+let deviceYearChart, deviceStatusChart, deviceApprovalChart, carYearChart, carStatusChart, carApprovalChart, carDayChart
+export default {
+  props: {
+    deviceData: {
+      type: Object,
+      require: true,
+    },
+    carData: {
+      type: Object,
+      require: true,
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      deviceApproval: {},
+      deviceStatus: {},
+      deviceYear: {},
+      carApproval: {},
+      carStatus: {},
+      carYear: {},
+      carUsage: {},
+      carDay: {},
+    }
+  },
+  created() {
+    this.loading = true;
+    this.initDeviceDatas();
+    this.initCarDatas();
+    this.loading = false;
+  },
+  mounted() {
+    this.initDeviceYearBar();
+    this.initDeviceStatusPie();
+    this.initDeviceApprovalBar();
+    this.initCarYearBar();
+    this.initCarStatusPie();
+    this.initCarApprovalBar();
+    this.initCarDayBar();
+  },
+  methods: {
+    async initDeviceDatas() {
+      if (Object.keys(this.deviceData).length !== 0) {
+        this.deviceApproval = this.deviceData.approval;
+        this.deviceStatus = this.deviceData.status[0];
+        this.deviceYear = this.deviceData.year[0];
+      }
+    },
+    async initCarDatas() {
+      if (Object.keys(this.carData).length !== 0) {
+        this.carApproval = this.carData.approval;
+        this.carStatus = this.carData.status[0];
+        this.carYear = this.carData.year[0];
+        this.carUsage = this.carData.usage[0];
+        this.carDay = this.carData.day;
+      }
+    },
+    initDeviceYearBar() {
+      let option = {
+        title: {
+          text: '各年设备申领次数',
+          subtext: ''
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        // legend: {},
+        graphic: [
+          {
+            type: 'text',
+            name: '',
+            right: '0',
+            top: '20%',
+            style: {
+              text: '全部年份',
+              fill: '#000', // 文本颜色  
+              fontSize: 12, // 文本大小  
+              fontWeight: '' // 文本粗细  
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          name: '年',
+          type: 'category',
+          data: Object.keys(this.deviceYear),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：次'
+        },
+        series: [
+          {
+            data: Object.values(this.deviceYear),
+            type: 'bar',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle:{
+              color:'#3498DB'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(deviceYearChart, 'deviceYearBar', option);
+    },
+    initDeviceStatusPie() {
+      let option = {
+        title: {
+          text: '设备和车辆状态',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: 'bottom'
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '25%',
+            center:['25%', '50%'],
+            avoidLabelOverlap: false,
+            data: Object.entries(this.deviceStatus).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          },
+          
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '25%',
+            center:['75%', '50%'],
+            avoidLabelOverlap: false,
+            data: Object.entries(this.carStatus).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          },
+        ]
+      };
+      ehcartsInit(deviceStatusChart, 'deviceStatusPie', option);
+    },
+    initDeviceApprovalBar() {
+      let xData = this.deviceApproval.map(item => item.count)
+      let yData = this.deviceApproval.map(item => item.name)
+      let option = {
+        title: {
+          text: '各类设备申请次数榜'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        toolbox: {
+          feature: {
+            dataView: {
+              show: true,
+              optionToContent: function (opt) {
+                var axisData = opt.yAxis[0].data;
+                var series = opt.series;
+                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
+                  + '<td>设备名称</td>'
+                  + '<td>数量</td>'
+                  + '</tr>';
+                for (var i = 0, l = axisData.length; i < l; i++) {
+                  table += '<tr>'
+                    + '<td>' + axisData[i] + '</td>'
+                    + '<td>' + series[0].data[i] + '</td>'
+                    + '</tr>';
+                }
+                table += '</tbody></table>';
+                return table;
+              }
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            show: true,
+            yAxisIndex: 0,
+          }
+        ],
+        grid: {
+          left: '3%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: yData.reverse(),
+          axisLabel: {
+            fontSize: 12,
+            width: 120,
+            overflow: 'truncate',
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            data: xData.reverse(),
+          }
+        ]
+      };
+      ehcartsInit(deviceApprovalChart, 'deviceApprovalBar', option);
+    },
+    initCarYearBar(){
+      let option = {
+        title: {
+          text: '各年用车申请次数',
+          subtext: ''
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        // legend: {},
+        graphic: [
+          {
+            type: 'text',
+            name: '',
+            right: '0',
+            top: '20%',
+            style: {
+              text: '全部年份',
+              fill: '#000', // 文本颜色  
+              fontSize: 12, // 文本大小  
+              fontWeight: '' // 文本粗细  
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          name: '年',
+          type: 'category',
+          data: Object.keys(this.carYear),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：次'
+        },
+        series: [
+          {
+            data: Object.values(this.carYear),
+            type: 'bar',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            itemStyle:{
+              color:'#1ABC9C'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(carYearChart, 'carYearBar', option);
+    },
+    initCarStatusPie(){
+      let option = {
+        title: {
+          text: '车辆状态和申请类型情况',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: 'bottom'
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '40%',
+            // center:['75%', '50%'],
+            avoidLabelOverlap: false,
+            data: Object.entries(this.carUsage).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          },
+        ]
+      };
+      ehcartsInit(carStatusChart, 'carStatusPie', option);
+    },
+    initCarApprovalBar(){
+      let xData = this.carApproval.map(item => item.count)
+      let yData = this.carApproval.map(item => item.name)
+      let option = {
+        title: {
+          text: '车辆使用次数榜'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        toolbox: {
+          feature: {
+            dataView: {
+              show: true,
+              optionToContent: function (opt) {
+                var axisData = opt.yAxis[0].data;
+                var series = opt.series;
+                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
+                  + '<td>车辆名称</td>'
+                  + '<td>数量</td>'
+                  + '</tr>';
+                for (var i = 0, l = axisData.length; i < l; i++) {
+                  table += '<tr>'
+                    + '<td>' + axisData[i] + '</td>'
+                    + '<td>' + series[0].data[i] + '</td>'
+                    + '</tr>';
+                }
+                table += '</tbody></table>';
+                return table;
+              }
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            show: true,
+            yAxisIndex: 0,
+          }
+        ],
+        grid: {
+          left: '3%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: yData.reverse(),
+          axisLabel: {
+            fontSize: 12,
+            width: 120,
+            overflow: 'truncate',
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            data: xData.reverse(),
+          }
+        ]
+      };
+      ehcartsInit(carApprovalChart, 'carApprovalBar', option);
+    },
+    initCarDayBar(){
+      let xData = this.carDay.map(item => item.count)
+      let yData = this.carDay.map(item => item.name)
+      let option = {
+        title: {
+          text: '车辆使用天数榜'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        toolbox: {
+          feature: {
+            dataView: {
+              show: true,
+              optionToContent: function (opt) {
+                var axisData = opt.yAxis[0].data;
+                var series = opt.series;
+                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
+                  + '<td>车辆名称</td>'
+                  + '<td>数量</td>'
+                  + '</tr>';
+                for (var i = 0, l = axisData.length; i < l; i++) {
+                  table += '<tr>'
+                    + '<td>' + axisData[i] + '</td>'
+                    + '<td>' + series[0].data[i] + '</td>'
+                    + '</tr>';
+                }
+                table += '</tbody></table>';
+                return table;
+              }
+            }
+          }
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100,
+            show: true,
+            yAxisIndex: 0,
+          }
+        ],
+        grid: {
+          left: '3%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'category',
+          data: yData.reverse(),
+          axisLabel: {
+            fontSize: 12,
+            width: 120,
+            overflow: 'truncate',
+          }
+        },
+        series: [
+          {
+            type: 'bar',
+            data: xData.reverse(),
+          }
+        ]
+      };
+      ehcartsInit(carDayChart, 'carDayBar', option);
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.titles {
+  font-family: 'puhuiti';
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.warpper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .left {
+    flex: 1;
+
+    .left-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+
+  .middle {
+    flex: 1;
+
+    .middle-chart {
+      width: 100%;
+      height: 600px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+
+  .right {
+    flex: 1;
+
+    .right-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+  }
+}
+</style>

oa-ui/src/views/statistics/components/contractStatistics.vue

@@ -89,7 +89,6 @@ export default {
       }
       this.subLoading = true;
       let subDatas = await getSubContractStatistic();
-      console.log(subDatas.data);
       this.subAmount = subDatas.data.amount[0];
       this.subYearNum = subDatas.data.year[0];
       this.subCwAmount = subDatas.data.cwAmount[0];
@@ -249,7 +248,18 @@ export default {
             },
             label: {
               alignTo: 'none',
-              formatter: '{name|{b}}\n{value|{c}元}',
+              formatter: function (params) {
+                let value = params.value;
+                if (value >= 100000000) {
+                  // 亿  
+                  let v = (value / 100000000).toFixed(4) + '亿'
+                  return params.name + '\n' + v + '元';
+                } else {
+                  // 千万元 
+                  let v = (value / 10000000).toFixed(4) + '千万元';
+                  return params.name + '\n' + v + '元';
+                }
+              },
               minMargin: 5,
               edgeDistance: 8,
               lineHeight: 15,
@@ -467,7 +477,18 @@ export default {
             },
             label: {
               alignTo: 'none',
-              formatter: '{name|{b}}\n{value|{c}元}',
+              formatter: function (params) {
+                let value = params.value;
+                if (value >= 100000000) {
+                  // 亿  
+                  let v = (value / 100000000).toFixed(4) + '亿'
+                  return params.name + '\n' + v + '元';
+                } else {
+                  // 千万元 
+                  let v = (value / 10000000).toFixed(4) + '千万';
+                  return params.name + '\n' + v + '元';
+                }
+              },
               minMargin: 5,
               edgeDistance: 8,
               lineHeight: 15,

oa-ui/src/views/statistics/components/topHead.vue

@@ -31,18 +31,18 @@
           <div id="thisContract"></div>
         </div>
       </div>
-      <div class="three item-box">
+      <div class="three item-box" @click="$emit('handleClick', 'device')">
         <div class="data-left">
-          <div class="data-title">2024项目总数</div>
-          <div class="number">{{ projectNum.toLocaleString('en-US') }}</div>
+          <div class="data-title">{{ thisYear }}年设备申领记录</div>
+          <div class="number">{{ deviceNum.toLocaleString('en-US') }}</div>
           <div>
             <span class="text-1">较去年</span>
-            <span class="text-2" :class="{ upColor: isProjectUp, dowColor: !isProjectUp }">206</span>
-            <img :src="isProjectUp ? upImg : downImg" alt="">
+            <span class="text-2" :class="{ upColor: isDeviceUp, dowColor: !isDeviceUp }">{{ deviceSubYear }}</span>
+            <img :src="isDeviceUp ? upImg : downImg" alt="">
           </div>
         </div>
         <div class="chart-box">
-          <div id=""></div>
+          <div id="thisDevice"></div>
         </div>
       </div>
       <div class="four item-box">
@@ -67,8 +67,8 @@
 import upSrc from '@/assets/icons/up.png'
 import downSrc from '@/assets/icons/down.png'
 import * as echarts from 'echarts'
-import { disposeCharts, echartsSetoption, ehcartsInit } from '@/utils/echarts'
-let thisYearChart, contractYearChart
+import { ehcartsInit } from '@/utils/echarts'
+let thisYearChart, contractYearChart, deviceYearChart
 export default {
   props: {
     pDatas: {
@@ -78,16 +78,22 @@ export default {
     cDatas: {
       type: Object,
       require: true,
+    },
+    dDatas: {
+      type: Object,
+      require: true,
     }
   },
   data() {
     return {
       projectNum: 0,
       contractNum: 0,
+      deviceNum: 0,
       upImg: upSrc,
       downImg: downSrc,
       isProjectUp: false,
       isContractUp: false,
+      isDeviceUp: false,
       thisYear: new Date().getFullYear(),
       year: {},
       type: {},
@@ -97,8 +103,12 @@ export default {
       contractCwAmount: {},
       contractSource: {},
       contractYear: {},
+      deviceApproval: {},
+      deviceStatus: {},
+      deviceYear: {},
       subYear: 0,
       contractSubYear: 0,
+      deviceSubYear:0,
       loading: true
     }
   },
@@ -109,6 +119,9 @@ export default {
     contractYear() {
       this.initChartTwo();
     },
+    deviceYear(){
+      this.initChartThree();
+    },
     pDatas: {
       handler(newVal) {
         if (newVal) {
@@ -149,7 +162,12 @@ export default {
         this.contractYear = this.cDatas.year[0]
         this.getContractYearSub(this.contractYear)
       }
-
+      if (Object.keys(this.dDatas).length !== 0) {
+        this.deviceApproval = this.dDatas.approval[0];
+        this.deviceStatus = this.dDatas.status[0];
+        this.deviceYear = this.dDatas.year[0];
+        this.getDeviceYearSub(this.deviceYear)
+      }
       this.loading = false
     },
     initChartOne() {
@@ -233,6 +251,48 @@ export default {
       };
       ehcartsInit(contractYearChart, 'thisContract', option);
     },
+    initChartThree() {
+      let option = {
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: Object.keys(this.deviceYear).slice(-6),
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { show: false },
+          splitLine: { show: false }
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.deviceYear).slice(-6),
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              color: '#3498DB'
+            }
+          }
+        ]
+      };
+      ehcartsInit(deviceYearChart, 'thisDevice', option);
+    },
     getProjectYearSub(year) {
       let arr = Object.values(year).slice(-2);
       this.subYear = Number(arr[1]) - Number(arr[0]);
@@ -255,6 +315,17 @@ export default {
         this.isContractUp = true
       }
     },
+    getDeviceYearSub(year) {
+      let arr = Object.values(year).slice(-2);
+      this.deviceSubYear = Number(arr[1]) - Number(arr[0]);
+      this.deviceNum = Number(arr[1])
+      if (this.deviceSubYear < 0) {
+        this.deviceSubYear = - this.deviceSubYear;
+        this.isDeviceUp = false
+      } else {
+        this.isDeviceUp = true
+      }
+    },
   },
 }
 </script>

oa-ui/src/views/statistics/index.vue

@@ -2,16 +2,17 @@
  * @Author: ysh
  * @Date: 2024-10-11 09:23:15
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-16 15:30:12
+ * @LastEditTime: 2024-10-17 16:59:56
 -->
 <template>
   <div class="app-container bg">
     <div class="head">
-      <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo"></top-head>
+      <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo" :dDatas="deviceInfo"></top-head>
     </div>
     <div class="content">
       <project-statistics v-if="isActive == 'project'" :datas="projectInfo"></project-statistics>
       <contract-statistics v-else-if="isActive == 'contract'" :datas="contractInfo"></contract-statistics>
+      <car-device-statistics v-else-if="isActive == 'device'" :deviceData="deviceInfo" :carData="carInfo"></car-device-statistics>
     </div>
   </div>
 </template>
@@ -24,8 +25,9 @@ import { getDeviceStatistic } from '@/api/oa/device/device';
 import ProjectStatistics from './components/projectStatistics.vue';
 import contractStatistics from './components/contractStatistics.vue';
 import topHead from './components/topHead.vue';
+import CarDeviceStatistics from './components/carDeviceStatistics.vue';
 export default {
-  components: { topHead, ProjectStatistics, contractStatistics },
+  components: { topHead, ProjectStatistics, contractStatistics, CarDeviceStatistics },
   data() {
     return {
       isActive: 'project',
@@ -60,12 +62,12 @@ export default {
     async getCarInfo() {
       let res = await getCarStatistic();
       this.carInfo = res.data;
-      
+      console.log(res.data);
     },
     async getDeviceInfo() {
       let res = await getDeviceStatistic();
       this.deviceInfo = res.data;
-      
+      console.log(res.data);
     },
     changeClick(val) {
       this.isActive = val