fix-大屏接口对接

src/api/vehicle.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+// 查询车辆分配占比
+export function getAllocationForCar() {
+  return request({
+    url: '/clw/statistics/allocationForCar',
+    method: 'get',
+  })
+}
+// 查询车辆分布
+export function getDistributionForCar() {
+  return request({
+    url: '/clw/statistics/distributionForCar',
+    method: 'get',
+  })
+}
+// 查询车辆类型占比
+export function getTypeProportionForCar() {
+  return request({
+    url: '/clw/statistics/typeProportionForCar',
+    method: 'get',
+  })
+}
+// 查询油卡分配比例
+export function getDistributionForFuelCard() {
+    return request({
+      url: '/clw/statistics/distributionForFuelCard',
+      method: 'get',
+    })
+  }
+// 查询油耗统计表格
+export function getFuelConsumptionRanking(params) {
+    return request({
+      url: '/clw/statistics/fuelConsumptionRanking',
+      method: 'get',
+      params
+    })
+  }
+  // 查询油耗统计柱状图
+export function getFuelConsumptionStatistics(params) {
+    return request({
+      url: '/clw/statistics/fuelConsumptionStatistics',
+      method: 'get',
+      params
+    })
+  }

src/views/cardIot/components/Video.vue

@@ -28,7 +28,7 @@
               >
             </div>
           </div>
-          <div v-if="gwcUrl">
+          <div v-else-if="gwcUrl">
             <iframe
               style="height: 330px; width: 340px"
               :src="gwcUrl"

src/views/clw/fuelConsumptionLog/index.vue

@@ -146,15 +146,15 @@ export default {
           width:'80px'
         },
         {
-          title: '车辆分类',
+          title: '分类',
           dataIndex: 'categoryName',
           ellipsis: true,
           align: 'center',
           width:'80px'
         },
         {
-          title: '车牌号码',
-          dataIndex: 'plateNumber',
+          title: '名称',
+          dataIndex: 'itemName',
           ellipsis: true,
           align: 'center',
           width:'120px'

src/views/clw/fuelConsumptionLog/modules/CreateForm.vue

@@ -11,7 +11,7 @@
         >
           </a-col>
         <a-col :span="10">
-          <a-form-model-item label="车辆分类" prop="categoryName">
+          <a-form-model-item label="分类" prop="categoryName">
             <a-input v-model="form.categoryName" placeholder="暂无信息" :disabled="true" /> </a-form-model-item
         ></a-col>
       </a-row>
@@ -35,8 +35,8 @@
 
       <a-row>
         <a-col :span="10"
-          ><a-form-model-item label="车牌号码" prop="plateNumber">
-            <a-input v-model="form.plateNumber" placeholder="暂无信息" :disabled="true" /> </a-form-model-item
+          ><a-form-model-item label="名称：" prop="plateNumber">
+            <a-input v-model="form.itemName" placeholder="暂无信息" :disabled="true" /> </a-form-model-item
         ></a-col>
         <a-col :span="10"
           ><a-form-model-item label="交易时间" prop="tradingHour">

src/views/clw/keyCaseOperLog/index.vue

@@ -8,26 +8,26 @@
             <a-col :md="8" :sm="24">
               <a-form-item label="操作类型" prop="operType">
                 <a-select placeholder="请选择操作类型" v-model="queryParam.operType" style="width: 100%" allow-clear :filterOption="filterOption4" showSearch>
-                  <a-select-option v-for="(d, index1) in dict.type.key_box_oper_type" :key="index1" :value="d.value">{{
-                    d.label
+                  <a-select-option v-for="(d1, index1) in dict.type.key_box_oper_type" :key="index1" :value="d1.value">{{
+                    d1.label
                   }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :md="8" :sm="24">
-              <a-form-item label="操作的钥匙柜" prop="operType">
+              <a-form-item label="操作的钥匙柜" prop="boxId">
                 <a-select placeholder="请选择操作的钥匙柜" v-model="queryParam.boxId" style="width: 100%" allow-clear :filterOption="filterOption1" showSearch>
-                  <a-select-option v-for="(d, index) in boxList" :key="index" :value="d.value">{{
+                  <a-select-option v-for="(d, index) in boxList" :key="index+ '-only'" :value="d.value">{{
                     d.label
                   }}</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
             <a-col :md="8" :sm="24">
-              <a-form-item label="车牌号码" prop="operType">
+              <a-form-item label="车牌号码" prop="carId">
                 <a-select placeholder="请选择车牌号码" v-model="queryParam.carId" style="width: 100%" allow-clear :filterOption="filterOption2" showSearch>
-                  <a-select-option v-for="(d, index2) in carList" :key="index2" :value="d.value">{{
-                    d.label
+                  <a-select-option v-for="(d2, index2) in carList" :key="index2+ '-only2'" :value="d2.value">{{
+                    d2.label
                   }}</a-select-option>
                 </a-select>
               </a-form-item>
@@ -47,8 +47,8 @@
               <a-col :md="8" :sm="24">
                 <a-form-item label="操作人" prop="operUserId">
                   <a-select :filterOption="filterOption" placeholder="请选择操作人" v-model="queryParam.operUserId" style="width: 100%" allow-clear showSearch >
-                  <a-select-option v-for="(d, index2) in popList" :key="index2" :value="d.value">{{
-                    d.label
+                  <a-select-option v-for="(d3, index3) in popList" :key="index3+ '-only3'" :value="d3.value">{{
+                    d3.label
                   }}</a-select-option>
                 </a-select>
                 </a-form-item>
@@ -78,15 +78,15 @@
         <!-- <a-button type="primary" @click="handleExport" v-hasPermi="['clw:keyCaseOperLog:export']">
           <a-icon type="download" />导出
         </a-button> -->
-        <table-setting
+        <!-- <table-setting
           :style="{ float: 'right' }"
           :table-size.sync="tableSize"
           v-model="columns"
           :refresh-loading="loading"
           @refresh="getList"
-        />
+        /> -->
       </div>
-      <create-form
+      <CreateForm
         ref="createForm"
         @ok="getList"
       />
@@ -94,7 +94,7 @@
       <a-table
         :loading="loading"
         :size="tableSize"
-        rowKey="boxId"
+        rowKey="id"
         :columns="columns"
         :data-source="list"
         :pagination="false"
@@ -136,7 +136,7 @@ import { tableMixin } from '@/store/table-mixin'
 
 export default {
   name: 'KeyCaseOperLog',
-  components: {},
+  components: {CreateForm},
   mixins: [tableMixin],
   dicts: ['key_box_oper_type'],
   data() {
@@ -231,8 +231,10 @@ export default {
     }
   },
   filters: {},
-  created() {
+  created() {  
     this.getList()
+  },
+  mounted(){
     this.getBoxList()
     this.getPlapentNum()
     this.getUserList()
@@ -264,13 +266,13 @@ export default {
     resetQuery() {
       this.daterangeOperTime = []
       this.queryParam = {
-        boxId: undefined,
-        operType: undefined,
-        operUserId: undefined,
+        boxId: null,
+        operType: null,
+        operUserId: null,
         pageNum: 1,
         pageSize: 10,
       }
-      this.handleQuery()
+      this.getList()
     },
     onShowSizeChange(current, pageSize) {
       this.queryParam.pageSize = pageSize
@@ -281,33 +283,33 @@ export default {
       this.queryParam.pageSize = pageSize
       this.getList()
     },
-    onSelectChange(selectedRowKeys, selectedRows) {
-      this.selectedRowKeys = selectedRowKeys
-      this.selectedRows = selectedRows
-      this.ids = this.selectedRows.map((item) => item.boxId)
-      this.single = selectedRowKeys.length !== 1
-      this.multiple = !selectedRowKeys.length
-    },
+    // onSelectChange(selectedRowKeys, selectedRows) {
+    //   this.selectedRowKeys = selectedRowKeys
+    //   this.selectedRows = selectedRows
+    //   this.ids = this.selectedRows.map((item) => item.boxId)
+    //   this.single = selectedRowKeys.length !== 1
+    //   this.multiple = !selectedRowKeys.length
+    // },
     toggleAdvanced() {
       this.advanced = !this.advanced
     },
     /** 删除按钮操作 */
-    handleDelete(row) {
-      var that = this
-      const boxIds = row.boxId || this.ids
-      this.$confirm({
-        title: '确认删除所选中数据?',
-        content: '当前选中编号为' + boxIds + '的数据',
-        onOk() {
-          return delKeyCaseOperLog(boxIds).then(() => {
-            that.onSelectChange([], [])
-            that.getList()
-            that.$message.success('删除成功', 3)
-          })
-        },
-        onCancel() {},
-      })
-    },
+    // handleDelete(row) {
+    //   var that = this
+    //   const boxIds = row.boxId || this.ids
+    //   this.$confirm({
+    //     title: '确认删除所选中数据?',
+    //     content: '当前选中编号为' + boxIds + '的数据',
+    //     onOk() {
+    //       return delKeyCaseOperLog(boxIds).then(() => {
+    //         that.onSelectChange([], [])
+    //         that.getList()
+    //         that.$message.success('删除成功', 3)
+    //       })
+    //     },
+    //     onCancel() {},
+    //   })
+    // },
     /** 导出按钮操作 */
     handleExport() {
       var that = this
@@ -335,26 +337,27 @@ export default {
     getPlapentNum(){
       getKeyCaseCarInfo().then(res=>{
         this.carList=res.data
+
       })
     },
     getUserList(){
       getKeyCaseUserInfo().then(res=>{
         this.popList=res.data
-        console.log(this.popList);
+     
       })
     },
  
     filterOption (value, option) {
       return option.componentOptions.children[0].text.indexOf(value) >= 0
     },
-    filterOption1(value, option) {
-      return option.componentOptions.children[0].text.indexOf(value) >= 0
+    filterOption1(value1, option1) {
+      return option1.componentOptions.children[0].text.indexOf(value1) >= 0
     },
-    filterOption2(value, option) {
-      return option.componentOptions.children[0].text.indexOf(value) >= 0
+    filterOption2(value2, option2) {
+      return option2.componentOptions.children[0].text.indexOf(value2) >= 0
     },
-    filterOption4(value, option) {
-      return option.componentOptions.children[0].text.indexOf(value) >= 0
+    filterOption4(value3, option3) {
+      return option3.componentOptions.children[0].text.indexOf(value3) >= 0
     },
   },
 }

src/views/vehicle/components/CarType.vue

@@ -33,12 +33,12 @@ export default {
       data5: [21, 55, 10, 13, 35, 11],
     }
   },
-  // props: {
-  //   list: {
-  //     type: Array,
-  //     default: [],
-  //   },
-  // },
+  props: {
+    carTypeLists: {
+      type: Array,
+      default: [],
+    },
+  },
   // watch: {
   //   list: {
   //     handler(val) {
@@ -56,7 +56,7 @@ export default {
 
   methods: {
     initChart() {
-      var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', ]
+      var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c']
       const option = {
         // title: {
         //   // subtext: "报警占比",
@@ -72,12 +72,14 @@ export default {
         //     fontSize: 16,
         //   },
         // },
-
+        tooltip: {
+        trigger: 'item'
+    },
         grid: {
           left: '1%',
           top: '14%',
           right: '5%',
-        //   bottom: '15%',
+          //   bottom: '15%',
         },
         legend: {
           orient: 'horizontal',
@@ -94,7 +96,7 @@ export default {
             color: '#f2f2f2',
             fontSize: 14,
           },
-        //   icon: 'circle',
+          //   icon: 'circle',
         },
         series: [
           // 主要展示层的
@@ -113,19 +115,18 @@ export default {
               normal: {
                 show: true,
                 length: 35,
-               
+
                 // length2: 20,
                 lineStyle: {
                   color: '#fff',
-                  textBorderColor:'none',
-                  
+                  textBorderColor: 'none',
                 },
                 align: 'left',
               },
-            //   color: '#000',
-            //   emphasis: {
-            //     show: true,
-            //   },
+              //   color: '#000',
+              //   emphasis: {
+              //     show: true,
+              //   },
             },
             label: {
               normal: {
@@ -133,23 +134,23 @@ export default {
                   var str = ''
                   switch (params.name) {
                     case '灭火消防车':
-                      str = '灭火消防车' + params.value + '%'
+                      str = '灭火消防车' + params.percent + '%'
                       break
-                    case '教援消防车':
-                      str = '教援消防车' + params.value + '%'
+                    case '战勤消防车':
+                      str = '战勤消防车' + params.percent + '%'
                       break
                     case '举高消防车':
-                      str = '举高消防车' + params.value + '%'
+                      str = '举高消防车' + params.percent + '%'
                       break
                     case '专勤消防车':
-                      str = '专勤消防车' + params.value + '%'
+                      str = '专勤消防车' + params.percent + '%'
                       break
                   }
                   return str
                 },
-                color:'#fff',
-                padding: [0, -20],
-                height: 35,
+                color: '#fff',
+                padding: [0, -10],
+                height: 25,
                 rich: {
                   //   a: {
                   //     width: 28,
@@ -184,7 +185,7 @@ export default {
                   //     align: 'left',
                   //   },
                   nameStyle: {
-                    fontSize: 16,
+                    fontSize: 14,
                     color: '#00A3FF',
                     align: 'left',
                   },
@@ -196,53 +197,59 @@ export default {
                 },
               },
             },
-            data: [
-              {
-                value: 17,
-                name: '灭火消防车',
-              },
-              { value: 23, name: '教援消防车' },
-              { value: 27, name: '举高消防车' },
-              { value: 33, name: '专勤消防车' },
-            ],
+            // data: [
+            //   {
+            //     value: 17,
+            //     name: '灭火消防车',
+            //   },
+            //   { value: 23, name: '教援消防车' },
+            //   { value: 27, name: '举高消防车' },
+            //   { value: 33, name: '专勤消防车' },
+            // ],
+            data:this.carTypeLists.map(item=>{
+              return {
+                value: item.value,
+                name: item.name,
+              }
+            })
           },
           // 边框的设置
-        //   {
-        //     radius: ['24%', '29%'],
-        //     center: ['50%', '50%'],
-        //     type: 'pie',
-        //     label: {
-        //       normal: {
-        //         show: false,
-        //       },
-        //       emphasis: {
-        //         show: false,
-        //       },
-        //     },
-        //     labelLine: {
-        //       normal: {
-        //         show: false,
-        //       },
-        //       emphasis: {
-        //         show: false,
-        //       },
-        //     },
-        //     animation: false,
-        //     tooltip: {
-        //       show: false,
-        //     },
-        //     itemStyle: {
-        //       normal: {
-        //         color: '#00A3FF',
-        //         fontSize: 14,
-        //       },
-        //     },
-        //     data: [
-        //       {
-        //         value: 1,
-        //       },
-        //     ],
-        //   },
+          //   {
+          //     radius: ['24%', '29%'],
+          //     center: ['50%', '50%'],
+          //     type: 'pie',
+          //     label: {
+          //       normal: {
+          //         show: false,
+          //       },
+          //       emphasis: {
+          //         show: false,
+          //       },
+          //     },
+          //     labelLine: {
+          //       normal: {
+          //         show: false,
+          //       },
+          //       emphasis: {
+          //         show: false,
+          //       },
+          //     },
+          //     animation: false,
+          //     tooltip: {
+          //       show: false,
+          //     },
+          //     itemStyle: {
+          //       normal: {
+          //         color: '#00A3FF',
+          //         fontSize: 14,
+          //       },
+          //     },
+          //     data: [
+          //       {
+          //         value: 1,
+          //       },
+          //     ],
+          //   },
         ],
       }
 
@@ -253,7 +260,6 @@ export default {
   },
   mounted() {
     const chartDom = this.$refs.chart
-    console.log('------', chartDom)
     //   // 初始化图表实例
     this.chart = echarts.init(chartDom)
     this.initChart()

src/views/vehicle/components/FuelRanking.vue

@@ -3,26 +3,29 @@
     <div>
       <div class="fuel"></div>
       <div class="list">
-        <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0;">
-          <span>年份</span>
-          <span style="margin: 0 15px">月份</span>
-          <span>每周</span>
+        <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0">
+          <span @click="changeType('CURRENT_YEAR')">年份</span>
+          <span style="margin: 0 15px" @click="changeType('CURRENT_MONTH')">月份</span>
+          <span @click="changeType('CURRENT_WEEK')">每周</span>
         </div>
         <!-- 表格 -->
         <div>
           <div class="row header">
             <span class="type">排名</span>
             <span class="count">所属单位</span>
-            <span class="time" > 总油耗（升）</span>
+            <span class="time"> 总油耗（升）</span>
             <span class="unit">名次</span>
           </div>
-          <ul style="padding-left: 0;">
-            <li class="row">
-              <span class="type">1</span>
-              <span class="count">测试</span>
-              <span class="time">表格</span>
+          <ul style="padding-left: 0">
+            <li class="row" v-for="(item, index) in listStatistics" :key="index">
+              <span class="type">{{ item.rank }}</span>
+              <span class="count">{{ item.name }}</span>
+              <span class="time">{{ item.value }}</span>
               <span class="unit">
-                <img src="../../../assets/vehicle/Vector (6).png" />
+                <img v-if="item.changeRank>0" src="../../../assets/vehicle/Vector (6).png" />
+                <img v-else-if="item.changeRank<0" src="../../../assets/vehicle/Vector (5).png" />
+                <span v-if="item.changeRank!=0">{{ Math.abs(item.changeRank) }}</span>
+                <span v-if="item.changeRank==0">-</span>
               </span>
             </li>
           </ul>
@@ -32,7 +35,33 @@
   </div>
 </template>
 
-<script></script>
+<script>
+import fuelEchart from './fuelEchart'
+import { getFuelConsumptionRanking } from '@/api/vehicle.js'
+export default {
+  components: { fuelEchart },
+  data() {
+    return {
+      type: 'CURRENT_YEAR',
+      listStatistics: [],
+    }
+  },
+  methods: {
+    changeType(val) {
+      this.type = val
+      this.funFuelConsumptionRankings()
+    },
+    funFuelConsumptionRankings() {
+      getFuelConsumptionRanking({ type: this.type }).then((res) => {
+        this.listStatistics = res.data
+      })
+    },
+  },
+  created() {
+    this.funFuelConsumptionRankings()
+  },
+}
+</script>
 
 <style lang="less" scoped>
 .fuel {
@@ -43,78 +72,79 @@
 .list {
   width: 443px;
   height: 434px;
-  border: 1px solid #00AAFF;
+  border: 1px solid #00aaff;
   margin-top: 10px;
   .header {
-  color: #61dbff !important;
-  height: 38px !important;
-  background-color: rgba(66, 92, 108, 0.3) !important;
-  margin-top: 2px;
-  letter-spacing: 1px;
-  line-height: 38px;
-  display: flex;
-  justify-content: space-around;
-  padding: 0 !important;
-  .is_notice {
-    line-height: 19px;
-    font-size: 10px;
+    color: #61dbff !important;
+    height: 38px !important;
+    background-color: rgba(66, 92, 108, 0.3) !important;
+    margin-top: 2px;
+    letter-spacing: 1px;
+    line-height: 38px;
+    display: flex;
+    justify-content: space-around;
+    padding: 0 !important;
+    .is_notice {
+      line-height: 19px;
+      font-size: 10px;
+    }
   }
-}
 
-li.row > span {
-//   text-align: center;
-  font-size: 14px;
-  display: inline-block;
-}
-li.row.active {
-  background-color: rgba(0, 213, 255, 0.2);
-}
+  li.row > span {
+    //   text-align: center;
+    font-size: 14px;
+    display: inline-block;
+  }
+  li.row.active {
+    background-color: rgba(0, 213, 255, 0.2);
+  }
 
-li.row {
-  box-sizing: border-box;
-}
+  li.row {
+    box-sizing: border-box;
+  }
 
-.row,
-li{
-  display: block;
-  height: 46px;
-  border-bottom: 1px dashed #1f2535;
-  line-height: 46px;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  font-size: 14px;
-//   background-color: rgba(0, 0, 0, 0.2);
-  color: #fff;
-  margin-top: 5px;
-  .type,
-  .unit {
-    // display: flex;
-    // justify-content: center;
-    // // align-items: center;
-    // flex: 0.15;
-    img {
-      display: inline-block;
-      width: 11px;
-      height: 16px;
-    //   margin-left: 5px;
+  .row,
+  li {
+    display: block;
+    height: 46px;
+    border-bottom: 1px dashed #1f2535;
+    line-height: 46px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 14px;
+    //   background-color: rgba(0, 0, 0, 0.2);
+    color: #fff;
+    margin-top: 5px;
+    .type,
+    .unit {
+      // display: flex;
+      // justify-content: center;
+      // // align-items: center;
+      // flex: 0.15;
+      img {
+        display: inline-block;
+        width: 11px;
+        height: 16px;
+        margin-right:4px;
+        //   margin-left: 5px;
+      }
     }
+    //   .type {
+    //     flex: 0.15;
+    //   }
+    //   .count {
+    //     text-align: center;
+    //     display: inline-block;
+    //     overflow: hidden;
+    //     text-overflow: ellipsis !important; // 超出隐藏
+    //     white-space: nowrap;
+    //      flex: 0.35;
+    //   }
+    //   .time {
+    //     color: #61dbff;
+    //     flex: 0.35;
+    //   }
   }
-//   .type {
-//     flex: 0.15;
-//   }
-//   .count {
-//     text-align: center;
-//     display: inline-block;
-//     overflow: hidden;
-//     text-overflow: ellipsis !important; // 超出隐藏
-//     white-space: nowrap;
-//      flex: 0.35;
-//   }
-//   .time {
-//     color: #61dbff;
-//     flex: 0.35;
-//   }
-}
 }
 </style>

src/views/vehicle/components/FuelRegistration.vue

@@ -1,42 +1,64 @@
 <template>
+  <div>
     <div>
-      <div>
-        <div class="fuel"></div>
-        <div class="list">
-          <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0;">
-            <span>年份</span>
-            <span style="margin: 0 15px">月份</span>
-            <span>每周</span>
-          </div>
-          <!-- 表格 -->
-        <div>
-            <fuelEchart/>
+      <div class="fuel"></div>
+      <div class="list">
+        <div style="text-align: right; color: #8abfdc; font-size: 14px; margin: 10px 20px 10px 0">
+          <span @click="changeType('CURRENT_YEAR')">年份</span>
+          <span style="margin: 0 15px" @click="changeType('CURRENT_MONTH')">月份</span>
+          <span  @click="changeType('CURRENT_WEEK')">每周</span>
         </div>
+        <!-- 表格 -->
+        <div>
+          <fuelEchart :listStatistics="listStatistics" />
         </div>
       </div>
     </div>
-  </template>
-  
-  <script>
-import fuelEchart from './fuelEchart';
-export default{
-    components:{fuelEchart}
+  </div>
+</template>
+
+<script>
+import fuelEchart from './fuelEchart'
+import {getFuelConsumptionStatistics} from '@/api/vehicle.js'
+export default {
+  components: { fuelEchart },
+  data(){
+    return{
+      type:'CURRENT_YEAR',
+      listStatistics:[]
+    }
+  },
+  methods:{
+    changeType(val){
+      this.type=val
+      this.funFuelConsumptionRanking()
+    },
+    funFuelConsumptionRanking(){
+      getFuelConsumptionStatistics({type:this.type}).then(res=>{
+        this.listStatistics=res.data
+      })
+    }
+  },
+  created(){
+    this.funFuelConsumptionRanking()
+  }
 }
 </script>
-  
-  <style lang="less" scoped>
-  .fuel {
-    width: 443px;
-    height: 50px;
-    background: url('../../../assets/vehicle/tj.png') no-repeat;
-    margin-top: 15px;
-  }
-  .list {
-    width: 443px;
-    height: 387px;
-    border: 1px solid #00AAFF;
-    margin-top: 10px;
-    .header {
+
+<style lang="less" scoped>
+.fuel {
+  width: 443px;
+  height: 50px;
+  background: url('../../../assets/vehicle/tj.png') no-repeat;
+  margin-top: 15px;
+}
+.list {
+  width: 443px;
+  height: 387px;
+  border: 1px solid #00aaff;
+  margin-top: 10px;
+  cursor:pointer;
+  .header {
     color: #61dbff !important;
     height: 38px !important;
     background-color: rgba(66, 92, 108, 0.3) !important;
@@ -51,7 +73,5 @@ export default{
       font-size: 10px;
     }
   }
-  
 }
-  </style>
-  
+</style>

src/views/vehicle/components/VehicleCarAllocation.vue

@@ -4,6 +4,7 @@
 
 <script>
 import * as echarts from 'echarts'
+
 export default {
   data() {
     return {
@@ -12,21 +13,21 @@ export default {
       dataList: [],
     }
   },
-  // props: {
-  //   list: {
-  //     type: Array,
-  //     default: [],
-  //   },
-  // },
+  props: {
+    allocationList: {
+      type: Array,
+      default: [],
+    },
+  },
   // watch: {
-  //   list: {
+  //   allocationList: {
   //     handler(val) {
   //       this.$nextTick(() => {
-  //         const chartDom = this.$refs.chart;
+  //         const chartDom = this.$refs.chart
   //         // 初始化图表实例
-  //         this.chart = echarts.init(chartDom);
-  //         this.initChart(val);
-  //       });
+  //         this.chart = echarts.init(chartDom)
+  //         this.initChart(val)
+  //       })
   //     },
   //     immediate: true,
   //     deep: true,
@@ -43,18 +44,24 @@ export default {
         // },
 
         tooltip: {
+          formatter: function (params) {
+            // console.log(11111111);
+            // console.log('--------连', params)
+            return params[0].name  + ' : ' + params[1].data
+          },
           trigger: 'axis',
           axisPointer: {
             type: 'line',
           },
+        
         },
         grid: {
-            left: '-34%',
-            right: '4%',
-            bottom: '0%',
-            top:'5%',
-            containLabel: true,
-          },
+          left: '-24%',
+          right: '4%',
+          bottom: '0%',
+          top: '5%',
+          containLabel: true,
+        },
         xAxis: {
           type: 'value',
           // 设置x轴显示几段
@@ -80,7 +87,9 @@ export default {
               // fontFamily: 'Source Han Sans CN',
             },
           },
-          data: ['鸳鸯消防站', '翠云消防站', '龙头寺消防站', '礼嘉消防站', '奥园消防站', '大竹林消防站'],
+          data: this.allocationList.map((item) => {
+              return item.name
+            }),
           axisTick: { show: false },
           axisLine: {
             show: false,
@@ -101,19 +110,23 @@ export default {
               borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
             },
             barGap: '-100%', //设置柱形重合的重要步骤
-            data: [100, 100, 100, 100, 100, 100],
+            data:this.allocationList.map((item) => {
+              return item.total
+            }),
             animation: false, // 关闭动画效果
             barWidth: '18px', // 设置柱形宽度
           },
           {
             type: 'bar',
-            data: [65, 75, 33, 34, 45, 66, 77],
+            data: this.allocationList.map((item) => {
+              return item.value
+            }),
             barWidth: '15px',
             barGap: '-90%', //设置柱形重合的重要步骤
             itemStyle: {
               borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
               color: function (params) {
-                var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016']
+                var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016','#33FA8F']
                 return colorList[params.dataIndex]
               },
             },
@@ -127,6 +140,7 @@ export default {
   },
   mounted() {
     const chartDom = this.$refs.chart
+    // console.log('------', chartDom)
     //   // 初始化图表实例
     this.chart = echarts.init(chartDom)
     this.initChart()

src/views/vehicle/components/VehicleDistribution.vue

@@ -20,12 +20,12 @@
 
 <script>
 import * as echarts from 'echarts'
+import {getDistributionForCar} from '@/api/vehicle.js'
 export default {
   data() {
     return {
       chart: null,
       timer: '',
-      dataList: [],
       data1: [10, 15, 10, 13, 15, 11],
       data2: [19, 35, 40, 33, 15, 51],
       data3: [21, 55, 10, 13, 35, 11],
@@ -33,12 +33,12 @@ export default {
       data5: [21, 55, 10, 13, 35, 11],
     }
   },
-  // props: {
-  //   list: {
-  //     type: Array,
-  //     default: [],
-  //   },
-  // },
+  props: {
+    dataList: {
+      type: Array,
+      default: [],
+    },
+  },
   // watch: {
   //   list: {
   //     handler(val) {
@@ -58,9 +58,9 @@ export default {
     initChart() {
       var spNum = 5,
         _max = 100
-      var legendData = ['灭火消防车', '举高消防车', '后援消防车', '专勤消防车', '机场消防车']
-      var y_data = ['两江支队', '鸳鸯站', '大竹林站', '礼嘉站', '翠云站', '龙头寺站']
-      var _datamax = [100, 100, 100, 100, 100, 100]
+      var legendData = ['灭火消防车', '举高消防车', '战勤消防车', '专勤消防车',]
+      // var y_data = ['两江支队', '鸳鸯站', '大竹林站', '礼嘉站', '翠云站', '龙头寺站']
+      var _datamax = [70, 70, 70, 70, 70]
       var fomatter_fn = function (v) {
         return ((v.value / _max) * 100).toFixed(0)
       }
@@ -120,15 +120,12 @@ export default {
             var _arr = p.seriesName.split('/'),
               idx = p.seriesIndex //1，2，3
             return (
+              '机构：'+p.name+'<br>'+
               '名称：' +
               p.seriesName +
               '<br>' +
-              '完成：' +
-              p.value +
-              '<br>' +
-              '占比：' +
-              ((p.value / _max) * 100).toFixed(0) +
-              '%'
+              '数量：' +
+              p.value 
             )
           },
           extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)',
@@ -159,7 +156,9 @@ export default {
         },
         yAxis: [
           {
-            data: y_data,
+            data: this.dataList.map(vn=>{
+              return vn.DEPT_NAME
+            }),
             axisLabel: {
               fontSize: 14,
               color: '#fff',
@@ -177,13 +176,16 @@ export default {
               show: false,
             },
           },
-          {
-            show: false,
-            data: y_data,
-            axisLine: {
-              show: false,
-            },
-          },
+          // {
+          //   show: false,
+          //   data:this.dataList.map(n=>{
+          //     console.log('---循环',n);
+          //     return n.DEPT_NAME
+          //   }),
+          //   axisLine: {
+          //     show: false,
+          //   },
+          // },
         ],
         series: [
           {
@@ -201,7 +203,11 @@ export default {
             //     color: '#33FAE2',
             //   },
             },
-            data: this.data1,
+            data:this.dataList.map(item=>{
+             
+              return item.MHXFC
+            }),
+            // data:this.data1
           },
           {
             type: 'bar',
@@ -218,12 +224,14 @@ export default {
             //     color: '#33FA8F',
             //   },
             },
-            data: this.data2,
+            data:this.dataList.map(en=>{
+              return en.JGXFC
+            }),
           },
           {
             type: 'bar',
             stack: '2',
-            name: '后援消防车',
+            name: '战勤消防车',
             legendHoverLink: false,
             barWidth: 25,
             label: _label,
@@ -235,7 +243,9 @@ export default {
             //     color: '#FAE633',
             //   },
             },
-            data: this.data3,
+            data:this.dataList.map(v=>{
+              return v.ZQBZXFC
+            }),
           },
           {
             type: 'bar',
@@ -252,25 +262,27 @@ export default {
             //     color: '#FA9333',
             //   },
             },
-            data: this.data4,
-          },
-          {
-            type: 'bar',
-            stack: '2',
-            name: '机场消防车',
-            legendHoverLink: false,
-            barWidth: 25,
-            label: _label,
-            itemStyle: {
-              normal: {
-                color: '#00A3FF',
-              },
-            //   emphasis: {
-            //     color: '#00A3FF',
-            //   },
-            },
-            data: this.data5,
+            data:this.dataList.map(en=>{
+              return en.ZQXFC
+            }),
           },
+          // {
+          //   type: 'bar',
+          //   stack: '2',
+          //   name: '机场消防车',
+          //   legendHoverLink: false,
+          //   barWidth: 25,
+          //   label: _label,
+          //   itemStyle: {
+          //     normal: {
+          //       color: '#00A3FF',
+          //     },
+          //   //   emphasis: {
+          //   //     color: '#00A3FF',
+          //   //   },
+          //   },
+          //   data: this.data5,
+          // },
         ],
       }
 
@@ -281,7 +293,7 @@ export default {
   },
   mounted() {
     const chartDom = this.$refs.chart
-    console.log('------', chartDom)
+    // console.log('------', chartDom)
     //   // 初始化图表实例
     this.chart = echarts.init(chartDom)
     this.initChart()

src/views/vehicle/components/cardDistribution.vue

@@ -1,138 +1,149 @@
 <template>
-    <div ref="chart" class="item" style="height: 330px; width: 224px" />
-  </template>
-  
-  <script>
-  import * as echarts from 'echarts'
-  export default {
-    data() {
-      return {
-        chart: null,
-        timer: '',
-        dataList: [],
-      }
+  <div ref="chart" class="item" style="height: 330px; width: 224px" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  data() {
+    return {
+      chart: null,
+      timer: '',
+      dataList: [],
+    }
+  },
+  props: {
+    yCardList: {
+      type: Array,
+      default: [],
     },
-    // props: {
-    //   list: {
-    //     type: Array,
-    //     default: [],
-    //   },
-    // },
-    // watch: {
-    //   list: {
-    //     handler(val) {
-    //       this.$nextTick(() => {
-    //         const chartDom = this.$refs.chart;
-    //         // 初始化图表实例
-    //         this.chart = echarts.init(chartDom);
-    //         this.initChart(val);
-    //       });
-    //     },
-    //     immediate: true,
-    //     deep: true,
-    //   },
-    // },
-  
-    methods: {
-      initChart() {
-        const option = {
-          color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016'], // 设置柱状图的颜色
-          // textStyle: {
-          //   color: '#fff',
-          //   fontSize: 16,
-          // },
-  
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'line',
-            },
+  },
+  // watch: {
+  //   allocationList: {
+  //     handler(val) {
+  //       this.$nextTick(() => {
+  //         const chartDom = this.$refs.chart
+  //         // 初始化图表实例
+  //         this.chart = echarts.init(chartDom)
+  //         this.initChart(val)
+  //       })
+  //     },
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // },
+
+  methods: {
+    initChart() {
+      const option = {
+        color: ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016'], // 设置柱状图的颜色
+        // textStyle: {
+        //   color: '#fff',
+        //   fontSize: 16,
+        // },
+
+        tooltip: {
+          formatter: function (params) {
+            // console.log(11111111);
+            // console.log('--------连', params)
+            return params[0].name  + ' : ' + params[1].data
           },
-          grid: {
-            left: '-34%',
-            right: '4%',
-            bottom: '0%',
-            top:'5%',
-            containLabel: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
           },
-          xAxis: {
-            type: 'value',
-            // 设置x轴显示几段
-            // min: 0,
-            // max: 100,
-            interval: 0,
-            axisTick: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: 'transparent',
-              },
+        
+        },
+        grid: {
+          left: '-24%',
+          right: '4%',
+          bottom: '0%',
+          top: '5%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'value',
+          // 设置x轴显示几段
+          // min: 0,
+          // max: 100,
+          interval: 0,
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              color: 'transparent',
             },
           },
-          yAxis: {
-            type: 'category',
-            axisLabel: {
-              verticalAlign: 'top',
-              align: 'left',
-              padding: [-25, 0, 40, 6],
-              textStyle: {
-                fontSize: 14,
-                color: '#1089E7',
-                // fontFamily: 'Source Han Sans CN',
-              },
+        },
+        yAxis: {
+          type: 'category',
+          axisLabel: {
+            verticalAlign: 'top',
+            align: 'left',
+            padding: [-25, 0, 40, 6],
+            textStyle: {
+              fontSize: 14,
+              color: '#1089E7',
+              // fontFamily: 'Source Han Sans CN',
             },
-            data: ['鸳鸯消防站', '翠云消防站', '龙头寺消防站', '礼嘉消防站', '奥园消防站', '大竹林消防站'],
-            axisTick: { show: false },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#e0e0e0',
-              },
+          },
+          data: this.yCardList.map((item) => {
+              return item.name
+            }),
+          axisTick: { show: false },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#e0e0e0',
             },
-            inside: true,
-            //   textStyle: {
-            //     color: '#000',
-            //   },
           },
-          series: [
-            {
-              type: 'bar',
-              itemStyle: {
-                color: '#739FA8', // 定义柱形的背景色
-                borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
-              },
-              barGap: '-100%', //设置柱形重合的重要步骤
-              data: [100, 100, 100, 100, 100, 100],
-              animation: false, // 关闭动画效果
-              barWidth: '18px', // 设置柱形宽度
+          inside: true,
+          //   textStyle: {
+          //     color: '#000',
+          //   },
+        },
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              color: '#739FA8', // 定义柱形的背景色
+              borderRadius: [10, 10, 10, 10], //定义背景柱形的圆角
             },
-            {
-              type: 'bar',
-              data: [65, 75, 33, 34, 45, 66, 77],
-              barWidth: '15px',
-              barGap: '-90%', //设置柱形重合的重要步骤
-              itemStyle: {
-                borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
-                color: function (params) {
-                  var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016']
-                  return colorList[params.dataIndex]
-                },
+            barGap: '-100%', //设置柱形重合的重要步骤
+            data:[100,100,100,100,100,100],
+            animation: false, // 关闭动画效果
+            barWidth: '18px', // 设置柱形宽度
+          },
+          {
+            type: 'bar',
+            data: this.yCardList.map((item) => {
+              return item.value
+            }),
+            barWidth: '15px',
+            barGap: '-90%', //设置柱形重合的重要步骤
+            itemStyle: {
+              borderRadius: [10, 10, 10, 10], // 定义柱形的圆角
+              color: function (params) {
+                var colorList = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6', '#B68016','#33FA8F']
+                return colorList[params.dataIndex]
               },
             },
-          ],
-        }
-        this.chart.setOption(option)
-        //自适应图表
-        window.onresize = this.chart.resize
-      },
-    },
-    mounted() {
-      const chartDom = this.$refs.chart
-      //   // 初始化图表实例
-      this.chart = echarts.init(chartDom)
-      this.initChart()
+          },
+        ],
+      }
+      this.chart.setOption(option)
+      //自适应图表
+      window.onresize = this.chart.resize
     },
-  }
-  </script>
-  
-  <style scoped lang="less"></style>
-  
+  },
+  mounted() {
+    const chartDom = this.$refs.chart
+    // console.log('------', chartDom)
+    //   // 初始化图表实例
+    this.chart = echarts.init(chartDom)
+    this.initChart()
+  },
+}
+</script>
+
+<style scoped lang="less"></style>

src/views/vehicle/components/fuelEchart.vue

@@ -12,29 +12,29 @@ export default {
       dataList: [],
     }
   },
-  // props: {
-  //   list: {
-  //     type: Array,
-  //     default: [],
-  //   },
-  // },
-  // watch: {
-  //   list: {
-  //     handler(val) {
-  //       this.$nextTick(() => {
-  //         const chartDom = this.$refs.chart;
-  //         // 初始化图表实例
-  //         this.chart = echarts.init(chartDom);
-  //         this.initChart(val);
-  //       });
-  //     },
-  //     immediate: true,
-  //     deep: true,
-  //   },
-  // },
+  props: {
+    listStatistics: {
+      type: Array,
+      default: [],
+    },
+  },
+  watch: {
+    listStatistics: {
+      handler(val) {
+        this.$nextTick(() => {
+          const chartDom = this.$refs.chart;
+          // 初始化图表实例
+          this.chart = echarts.init(chartDom);
+          this.initChart(val);
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
 
   methods: {
-    initChart() {
+    initChart(data) {
       const option = {
         tooltip: {
           axisPointer: {
@@ -48,7 +48,10 @@ export default {
           bottom: '10%',
         },
         xAxis: {
-          data: ['两江支队', '鸳鸯站', '大竹林站', '礼嘉站', '翠云站', '龙头寺站'],
+          // data: ['两江支队', '鸳鸯站', '大竹林站', '礼嘉站', '翠云站', '龙头寺站'],
+          data:data.map(item=>{
+            return item.name
+          }),
           axisLine: {
             lineStyle: {
               color: '#0177d4',
@@ -117,7 +120,9 @@ export default {
                 ),
               },
             },
-            data: [25, 325, 164, 254, 757, 211],
+            data: data.map(item=>{
+            return item.value
+          }),
           },
         ],
       }
@@ -127,12 +132,12 @@ export default {
       window.onresize = this.chart.resize
     },
   },
-  mounted() {
-    const chartDom = this.$refs.chart
-    //   // 初始化图表实例
-    this.chart = echarts.init(chartDom)
-    this.initChart()
-  },
+  // mounted() {
+  //   const chartDom = this.$refs.chart
+  //   //   // 初始化图表实例
+  //   this.chart = echarts.init(chartDom)
+  //   this.initChart()
+  // },
 }
 </script>
 

src/views/vehicle/components/unit3D.vue

@@ -7,52 +7,16 @@ import "echarts-gl";
 export default {
   data() {
     return {
-      optionData: [
-        {
-          code: '3',
-          name: '病区四',
-          cws: 80,
-          zcs: 20,
-          zcl: '25%',
-          value: 80,
-          startRatio: 0,
-          endRatio: 0.34782608695652173,
-        },
-        {
-          code: '0',
-          name: '病区一',
-          cws: 60,
-          zcs: 30,
-          zcl: '50%',
-          value: 60,
-          startRatio: 0.34782608695652173,
-          endRatio: 0.6086956521739131,
-        },
-        {
-          code: '2',
-          name: '病区三',
-          cws: 50,
-          zcs: 20,
-          zcl: '40%',
-          value: 50,
-          startRatio: 0.6086956521739131,
-          endRatio: 0.8260869565217391,
-        },
-        {
-          code: '1',
-          name: '病区二',
-          cws: 40,
-          zcs: 30,
-          zcl: '75%',
-          value: 40,
-          startRatio: 0.8260869565217391,
-          endRatio: 1,
-        },
-      ],
       myChart:null,
       option:null
     }
   },
+  props: {
+    fierList: {
+      type: Array,
+      default: [],
+    },
+  },
   mounted() {
     this.$nextTick(function() {
     const chartDom = this.$refs.pie3d
@@ -65,7 +29,7 @@ export default {
     //初始化构建
     initChart() {
       // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
-      this.option = this.getPie3D(this.optionData, 0.85)
+      this.option = this.getPie3D(this.fierList, 0.85)
       //将配置项设置进去
       this.myChart.setOption(this.option)
       //鼠标移动上去特效效果

src/views/vehicle/index.vue

@@ -32,26 +32,29 @@
                 <span style="color: #70fffd; font-size: 20px">油卡分配</span>
                 <img class="imgs" src="../../assets/vehicle/Vector (7).png" alt="" />
               </div>
-              <cardDistribution />
+              <!-- 油卡分配 -->
+              <cardDistribution :yCardList="yCardList" />
             </div>
             <div class="main-tab">
               <img class="tab-left" src="../../assets/vehicle/left.png" alt="" @click="changeTab('油卡分配')" />
               <span class="tab-text">{{ text }}</span>
               <img class="tab-right" src="../../assets/vehicle/right.png" alt="" @click="changeTab('消防车辆分配')"  />
             </div>
-            <unit3D :fierList="fierList" />
+            <unit3D v-if="text=='油卡分配'" :fierList="fierList" />
+            <unit3Ds v-else-if="text=='消防车辆分配'" :carsList2="carsList2"/>
             <div class="right-car">
               <div style="display: flex; justify-content: space-around; margin-top: 8px">
                 <span style="color: #70fffd; font-size: 20px">消防车辆分配</span>
                 <img class="imgs" src="../../assets/vehicle/Vector (8).png" alt="" />
               </div>
-              <VehicleCarAllocation />
+              <!-- 车辆分配 -->
+              <VehicleCarAllocation :allocationList="allocationList" />
             </div>
           </div>
           <div class="left-box">
-            <VehicleDistribution />
+            <VehicleDistribution :dataList="dataList" />
             <div>
-              <CarType />
+              <CarType :carTypeLists="carTypeLists" />
             </div>
           </div>
         </div>
@@ -70,6 +73,8 @@ import CarType from './components/CarType'
 import unit3D from './components/unit3D'
 import cardDistribution from './components/cardDistribution'
 import VehicleCarAllocation from './components/VehicleCarAllocation'
+import unit3Ds from './unit3Ds'
+import {getAllocationForCar,getTypeProportionForCar,getDistributionForFuelCard,getDistributionForCar} from '@/api/vehicle.js'
 export default {
   mixins: [drawMixin],
   components: {
@@ -80,6 +85,7 @@ export default {
     unit3D,
     cardDistribution,
     VehicleCarAllocation,
+    unit3Ds
   },
   data() {
     return {
@@ -89,38 +95,13 @@ export default {
       weekday: ['周日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
       loading: true,
       fierList: [
-        {
-          glxs: '其他管理形式',
-          sl: 91,
-          qy: '全市',
-        },
-        {
-          glxs: '居民自主管理',
-          sl: 885,
-          qy: '全市',
-        },
-        {
-          glxs: '无管理主体',
-          sl: 160,
-          qy: '全市',
-        },
-        {
-          glxs: '有管理单位（物业）',
-          sl: 38569,
-          qy: '全市',
-        },
-        {
-          glxs: '有管理单位（非物业）',
-          sl: 1848,
-          qy: '全市',
-        },
-        {
-          glxs: '街道社区代管',
-          sl: 3145,
-          qy: '全市',
-        },
       ],
-      text:'油卡分配'
+      carsList2:[],
+      text:'油卡分配',
+      allocationList:[],
+      carTypeLists:[],
+      yCardList:[],
+      dataList:[],
     }
   },
   mounted() {
@@ -139,6 +120,11 @@ export default {
       }, 1000)
     },
     changeTab(val){
+        if(val=='油卡分配'){
+          this.fierList=this.yCardList
+        }else if(val=='消防车辆分配'){
+          this.carsList2=this.allocationList
+        }
         this.text=val
     },
     cancelLoading() {
@@ -147,7 +133,37 @@ export default {
     toManage() {
       this.$router.push({ path: '/cardiot' })
     },
+    funAllocationForCar(){
+      getAllocationForCar().then(res=>{
+        // console.log('--------油卡分配',res);
+        this.allocationList=res.data
+    
+        this.carsList2=this.allocationList
+      })
+    },
+    funTypeProportionForCar(){
+      getTypeProportionForCar().then(res=>{
+        this.carTypeLists=res.data
+      })
+    },
+    funDistributionForFuelCard(){
+      getDistributionForFuelCard().then(res=>{
+        this.yCardList=res.data
+        this.fierList=this.yCardList
+      })
+    },
+    funDistributionForCar(){
+      getDistributionForCar().then(res=>{
+        this.dataList=res.data
+      })
+    }
   },
+  created(){
+    this.funAllocationForCar()
+    this.funTypeProportionForCar()
+    this.funDistributionForFuelCard()
+    this.funDistributionForCar()
+  }
 }
 </script>
 

src/views/vehicle/unit3Ds.vue

@@ -0,0 +1,411 @@
+<template>
+    <div ref="pie3d" style="height: 900px; " />
+  </template>
+  <script>
+  import * as echarts from 'echarts'
+  import "echarts-gl";
+  export default {
+    data() {
+      return {
+        myChart:null,
+        option:null
+      }
+    },
+    props: {
+        carsList2: {
+        type: Array,
+        default: [],
+      },
+    },
+    mounted() {
+      this.$nextTick(function() {
+      const chartDom = this.$refs.pie3d
+      this.myChart = echarts.init(chartDom)
+      this.initChart()
+      });
+      
+    },
+    methods: {
+      //初始化构建
+      initChart() {
+        // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+        this.option = this.getPie3D(this.carsList2, 0.85)
+        //将配置项设置进去
+        this.myChart.setOption(this.option)
+        //鼠标移动上去特效效果
+        this.bindListen(this.myChart)
+      },
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+      bindListen(myChart) {
+        let that = this
+        let selectedIndex = ''
+        let hoveredIndex = ''
+        // 监听点击事件，实现选中效果（单选）
+        myChart.on('click', function (params) {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+          let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected
+          let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered
+          let k = that.option.series[params.seriesIndex].pieStatus.k
+          let startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+          let endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+          // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+          if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+            that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            )
+            that.option.series[selectedIndex].pieStatus.selected = false
+          }
+          // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+          that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          )
+          that.option.series[params.seriesIndex].pieStatus.selected = isSelected
+          // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+          isSelected ? (selectedIndex = params.seriesIndex) : null
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        })
+        // 监听 mouseover，近似实现高亮（放大）效果
+        myChart.on('mouseover', function (params) {
+          // 准备重新渲染扇形所需的参数
+          let isSelected
+          let isHovered
+          let startRatio
+          let endRatio
+          let k
+          // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+          if (hoveredIndex === params.seriesIndex) {
+            return
+            // 否则进行高亮及必要的取消高亮操作
+          } else {
+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+            if (hoveredIndex !== '') {
+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+              isSelected = that.option.series[hoveredIndex].pieStatus.selected
+              isHovered = false
+              startRatio = that.option.series[hoveredIndex].pieData.startRatio
+              endRatio = that.option.series[hoveredIndex].pieData.endRatio
+              k = that.option.series[hoveredIndex].pieStatus.k
+              // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+              that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              )
+              that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+              // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+              hoveredIndex = ''
+            }
+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+              // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+              isSelected = that.option.series[params.seriesIndex].pieStatus.selected
+              isHovered = true
+              startRatio = that.option.series[params.seriesIndex].pieData.startRatio
+              endRatio = that.option.series[params.seriesIndex].pieData.endRatio
+              k = that.option.series[params.seriesIndex].pieStatus.k
+              // 对当前点击的扇形，执行高亮操作（对 option 更新）
+              that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              )
+              that.option.series[params.seriesIndex].pieStatus.hovered = isHovered
+              // 记录上次高亮的扇形对应的系列号 seriesIndex
+              hoveredIndex = params.seriesIndex
+            }
+            // 使用更新后的 option，渲染图表
+            myChart.setOption(that.option)
+          }
+        })
+        // 修正取消高亮失败的 bug
+        myChart.on('globalout', function () {
+          // 准备重新渲染扇形所需的参数
+          let isSelected
+          let isHovered
+          let startRatio
+          let endRatio
+          let k
+          if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected
+            isHovered = false
+            k = that.option.series[hoveredIndex].pieStatus.k
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            )
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = ''
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option)
+        })
+      },
+      getPie3D(pieData, internalDiameterRatio) {
+        let that = this
+        let series = []
+        let sumValue = 0
+        let startValue = 0
+        let endValue = 0
+        let legendData = []
+        let legendBfb = []
+        let k = 1 - internalDiameterRatio
+        pieData.sort((a, b) => {
+          return b.value - a.value
+        })
+        // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+        for (let i = 0; i < pieData.length; i++) {
+          sumValue += pieData[i].value
+          let seriesItem = {
+            //系统名称
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            //是否为参数曲面（是）
+            parametric: true,
+            //曲面图网格线（否）上面一根一根的
+            wireframe: {
+              show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+              selected: false,
+              hovered: false,
+              k: k,
+            },
+          }
+          //曲面的颜色、不透明度等样式。
+          if (typeof pieData[i].itemStyle != 'undefined') {
+            let itemStyle = {}
+            typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null
+            typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null
+            seriesItem.itemStyle = itemStyle
+          }
+          series.push(seriesItem)
+        }
+        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+        legendData = []
+        legendBfb = []
+        for (let i = 0; i < series.length; i++) {
+          endValue = startValue + series[i].pieData.value
+          series[i].pieData.startRatio = startValue / sumValue
+          series[i].pieData.endRatio = endValue / sumValue
+          series[i].parametricEquation = this.getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+          )
+          startValue = endValue
+          let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
+          legendData.push({
+            name: series[i].name,
+            value: bfb,
+          })
+          legendBfb.push({
+            name: series[i].name,
+            value: bfb,
+          })
+        }
+        //(第二个参数可以设置你这个环形的高低程度)
+        let boxHeight = this.getHeight3D(series, 2) //通过传参设定3d饼/环的高度
+        // let boxHeight=2
+        // 准备待返回的配置项，把准备好的 legendData、series 传入。
+        let option = {
+          //图例组件
+          // legend: {
+          //   data: legendData,
+          //   //图例列表的布局朝向。
+          //   orient: 'horizontal',
+          //   left: '34%',
+          //   //图例文字每项之间的间隔
+          //   itemGap: 10,
+          //   textStyle: {
+          //     color: '#A1E2FF',
+          //     fontSize: '0.5rem',
+          //   },
+          //   show: true,
+          //   icon: 'circle',
+          //   //格式化图例文本（我是数值什么显示什么）
+          //   // formatter: function (name) {
+          //   //   var target;
+          //   //   for (var i = 0, l = pieData.length; i < l; i++) {
+          //   //     if (pieData[i].name == name) {
+          //   //       target = pieData[i].value;
+          //   //     }
+          //   //   }
+          //   //   return `${name}: ${target}`;
+          //   // }
+          //   // 这个可以显示百分比那种（可以根据你想要的来配置）
+          //   //   formatter: function(param) {
+          //   //       let item = legendBfb.filter(item => item.name == param)[0];
+          //   //       let bfs = that.fomatFloat(item.value * 100, 2) + "%";
+          //   //       console.log(item.name)
+          //   //       return `${item.name} :${bfs}`;
+          //   //   }
+          // },
+          //移动上去提示的文本内容
+          tooltip: {
+            formatter: (params) => {
+              if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                let bfb = (
+                  (option.series[params.seriesIndex].pieData.endRatio -
+                    option.series[params.seriesIndex].pieData.startRatio) *
+                  100
+                ).toFixed(2)
+                return (
+                  `${params.seriesName}<br/>` +
+                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                  `${bfb}`
+                )
+              }
+            },
+          },
+          //这个可以变形
+          xAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          yAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          zAxis3D: {
+            min: -1,
+            max: 1,
+          },
+          //此处是修改样式的重点
+          grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            //这是饼图的位置
+            top: '29%',
+            left:'4%',
+  
+            viewControl: {
+              //3d效果可以放大、旋转等，请自己去查看官方配置
+              alpha: 8, //角度(这个很重要 调节角度的)
+              distance: 260, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+              rotateSensitivity: 1, //设置为0无法旋转
+              zoomSensitivity: 0, //设置为0无法缩放
+              panSensitivity: 0, //设置为0无法平移
+              autoRotate: true, //自动旋转
+            },
+          },
+          series: series,
+        }
+        return option
+      },
+      getHeight3D(series, height) {
+        series.sort((a, b) => {
+          return b.pieData.value - a.pieData.value
+        })
+        return (height * 2) 
+      },
+      getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2
+        let startRadian = startRatio * Math.PI * 2
+        let endRadian = endRatio * Math.PI * 2
+        let midRadian = midRatio * Math.PI * 2
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+          isSelected = false
+        }
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== 'undefined' ? k : 1 / 3
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1
+        // 返回曲面参数方程
+        return {
+          u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+          },
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+          },
+          x: function (u, v) {
+            if (u < startRadian) {
+              return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            }
+            if (u > endRadian) {
+              return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
+          },
+          y: function (u, v) {
+            if (u < startRadian) {
+              return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            }
+            if (u > endRadian) {
+              return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
+          },
+          z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+              return Math.sin(u)
+            }
+            if (u > Math.PI * 2.5) {
+              return Math.sin(u) * h * 0.1
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
+          },
+        }
+      },
+      fomatFloat(num, n) {
+        var f = parseFloat(num)
+        if (isNaN(f)) {
+          return false
+        }
+        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+        var s = f.toString()
+        var rs = s.indexOf('.')
+        //判定如果是整数，增加小数点再补0
+        if (rs < 0) {
+          rs = s.length
+          s += '.'
+        }
+        while (s.length <= rs + n) {
+          s += '0'
+        }
+        return s
+      },
+    },
+  }
+  </script>
+