From 1d5d4845c22e5bc234a93e7024ad918379a18277 Mon Sep 17 00:00:00 2001
From: guoyue <guoyue2@hisense.com>
Date: Mon, 3 Oct 2022 15:46:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=82=E5=B1=80=EF=BC=9A=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=EF=BC=8C=E9=83=A8=E9=97=A8=E6=95=B0=E6=BC=8F?=
 =?UTF-8?q?=E6=96=97=E5=9B=BE=E6=9B=B4=E6=94=B9=EF=BC=8C=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8=E9=87=8F=E6=9B=B4=E6=94=B9=E4=B8=BA=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E6=B1=87=E8=81=9A=E9=83=A8=E9=97=A8=E9=87=8F=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8E=E9=83=A8=E9=97=A8=E6=80=BB=E6=95=B0=E4=BF=9D=E6=8C=81?=
 =?UTF-8?q?=E4=B8=80=E7=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ResourceAggregation.vue        | 1044 +++++++++--------
 1 file changed, 552 insertions(+), 492 deletions(-)

diff --git a/front/src/views/abilityStatistics/components/ResourceAggregation.vue b/front/src/views/abilityStatistics/components/ResourceAggregation.vue
index 4ef65f01..50f850f7 100644
--- a/front/src/views/abilityStatistics/components/ResourceAggregation.vue
+++ b/front/src/views/abilityStatistics/components/ResourceAggregation.vue
@@ -11,12 +11,9 @@
           <div v-for="item in dataList.dataList" :key="item.name">
             <div v-if="item.type !== '资源汇聚总量'" class="content-left">
               <div class="name">
-                <span
-                  class="name-photo"
-                  :style="{
-                    backgroundImage: `url(${item.photo}) `,
-                  }"
-                ></span>
+                <span class="name-photo" :style="{
+                  backgroundImage: `url(${item.photo}) `,
+                }"></span>
                 <span class="name-text">{{ item.type }}</span>
               </div>
               <div class="organization-value">
@@ -55,516 +52,579 @@
   </div>
 </template>
 <script setup>
-  import { ref, onMounted, watch } from 'vue'
-  import { selectTotal } from '@/api/home'
-  import {
-    // numberOfResourcesByCategory,
-    sourceDepartmentStatistics,
-  } from '@/api/abilityStatistics.js'
-  // import { zywMessage } from '@/api/home'
-  import * as echarts from 'echarts'
-  //各类资源汇聚量
-  let dataList = ref({
-    title: '各类资源汇聚量',
-    dataList: [],
-  })
-  // let photo = ref([
-  //   require('../../../assets/abilityStatistics/banner-jc.png'),
-  //   require('../../../assets/abilityStatistics/banner-sj.png'),
-  //   require('../../../assets/abilityStatistics/banner-zj.png'),
-  //   require('../../../assets/abilityStatistics/banner-yy.png'),
-  //   require('../../../assets/abilityStatistics/banner-zs.png'),
-  // ])
-  // let name = ref([])
-  // 获取数据资源数据
-  // const findZywMessage = () => {
-  //   zywMessage().then((res) => {
-  //     const { data } = res.data
-  //     dataSourceNum.value = data.sxmlcount || 0
-  //     snum()
-  //   })
-  // }
-  //各类资源数目接口
-  // function snum() {
-  //   numberOfResourcesByCategory().then((res) => {
-  //     dataList.value.dataList = res.data.data
-  //     res.data.data.map((item, index) => {
-  //       // if (dataList.value.dataList[index].type === '数据资源') {
-  //       //   dataList.value.dataList[index].amount = dataSourceNum.value || 0
-  //       // }
-  //       dataList.value.dataList[index].organization = '个'
-  //       dataList.value.dataList[index].photo = photo.value[index]
-  //     })
-  //   })
-  // }
-  selectTotal().then((res) => {
-    console.log('selectTotal===============>', res.data.data)
-    // res.data.data.map((item, index) => {
-    //   dataList.value.dataList[index].organization = '个'
-    //   dataList.value.dataList[index].photo = photo.value[index]
-    // })
-    res.data.data.total.forEach((val) => {
-      switch (val.type) {
-        case '组件服务':
-          dataList.value.dataList.push({
-            organization: '个',
-            type: '组件服务',
-            photo: require('../../../assets/abilityStatistics/banner-zj.png'),
-            amount: val.count,
-          })
-          break
-        case '应用资源':
-          dataList.value.dataList.push({
-            organization: '个',
-            type: '应用资源',
-            photo: require('../../../assets/abilityStatistics/banner-yy.png'),
-            amount: val.count,
-          })
-          break
-        case '基础设施':
-          if (uavAndIndividualSoldier.num) {
-            val.count = val.count - 0 + uavAndIndividualSoldier.num
-          }
-          dataList.value.dataList.push({
-            organization: '个',
-            type: '基础设施',
-            photo: require('../../../assets/abilityStatistics/banner-jc.png'),
-            amount: val.count,
-          })
-          break
-        case '数据资源':
-          dataList.value.dataList.push({
-            organization: '个',
-            type: '数据资源',
-            photo: require('../../../assets/abilityStatistics/banner-sj.png'),
-            amount: val.count,
-          })
-          break
-        case '知识库':
-          dataList.value.dataList.push({
-            organization: '个',
-            type: '知识库',
-            photo: require('../../../assets/abilityStatistics/banner-zs.png'),
-            amount: val.count,
-          })
-          break
-      }
-    })
-    let arr = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
-    dataList.value.dataList.sort((a, b) => {
-      return arr.indexOf(a.type) - arr.indexOf(b.type)
-    })
-  })
-  let datas = ref([])
-  let laiyuanDataList = ref([])
-  // let dataSourceNum = ref(0)
-  let bumenSum = ref([])
-
-  //能力统计-来源部门统计接口
-  const sourceDepartment = () => {
-    sourceDepartmentStatistics().then((res) => {
-      // datas.value = res.data.data.deptTypeCount
-      bumenSum.value = res.data.data.deptCount
-      for (const key in res.data.data.deptTypeCount) {
-        datas.value.push({
-          name: key,
-          value: res.data.data.deptTypeCount[key],
-        })
-      }
-      let fanwei = ref([])
-      for (const key in res.data.data.deptTotalCount) {
-        laiyuanDataList.value.push({
-          name: res.data.data.deptTotalCount[key],
-          value: res.data.data.deptTotalCount[key],
-          fanwei: '',
-        })
-        fanwei.value.push(key)
-        fanwei.value.map((item, index) => {
-          if (index + 1 < fanwei.value.length) {
-            laiyuanDataList.value[index].fanwei =
-              item + '-' + fanwei.value[index + 1]
-          } else {
-            laiyuanDataList.value[index].fanwei = item + '以上'
-          }
-        })
-      }
-      console.log('laiyuanDataList.value', laiyuanDataList.value)
-    })
+import { ref, onMounted, watch } from 'vue'
+import { selectTotal } from '@/api/home'
+import {
+  // numberOfResourcesByCategory,
+  sourceDepartmentStatistics,
+} from '@/api/abilityStatistics.js'
+// import { zywMessage } from '@/api/home'
+import * as echarts from 'echarts'
+//各类资源汇聚量
+let dataList = ref({
+  title: '各类资源汇聚量',
+  dataList: [],
+})
+// let photo = ref([
+//   require('../../../assets/abilityStatistics/banner-jc.png'),
+//   require('../../../assets/abilityStatistics/banner-sj.png'),
+//   require('../../../assets/abilityStatistics/banner-zj.png'),
+//   require('../../../assets/abilityStatistics/banner-yy.png'),
+//   require('../../../assets/abilityStatistics/banner-zs.png'),
+// ])
+// let name = ref([])
+// 获取数据资源数据
+// const findZywMessage = () => {
+//   zywMessage().then((res) => {
+//     const { data } = res.data
+//     dataSourceNum.value = data.sxmlcount || 0
+//     snum()
+//   })
+// }
+//各类资源数目接口
+// function snum() {
+//   numberOfResourcesByCategory().then((res) => {
+//     dataList.value.dataList = res.data.data
+//     res.data.data.map((item, index) => {
+//       // if (dataList.value.dataList[index].type === '数据资源') {
+//       //   dataList.value.dataList[index].amount = dataSourceNum.value || 0
+//       // }
+//       dataList.value.dataList[index].organization = '个'
+//       dataList.value.dataList[index].photo = photo.value[index]
+//     })
+//   })
+// }
+selectTotal().then((res) => {
+  console.log('selectTotal===============>', res.data.data)
+  // res.data.data.map((item, index) => {
+  //   dataList.value.dataList[index].organization = '个'
+  //   dataList.value.dataList[index].photo = photo.value[index]
+  // })
+  let imgObj = {
+    '组件服务': require('../../../assets/abilityStatistics/banner-zj.png'),
+    '应用资源': require('../../../assets/abilityStatistics/banner-yy.png'),
+    '基础设施': require('../../../assets/abilityStatistics/banner-jc.png'),
+    '数据资源': require('../../../assets/abilityStatistics/banner-sj.png'),
+    '知识库': require('../../../assets/abilityStatistics/banner-zs.png'),
   }
-  //来源部门饼图
-  let leftDom = ref(0)
-  const pieCharti = (dataLists) => {
-    leftDom.value += 'a'
-    echarts.init(document.getElementById('left')).dispose()
-    let chartDom = document.getElementById('left')
-    let myChart = echarts.init(chartDom)
-    let option
-    let index = -1
-    option = {
-      title: {
-        // text: '区级占比',
-        x: 'center',
-        y: '35%',
-        textStyle: {
-          fontWeight: 'normal',
-          fontSize: 16,
-        },
-      },
-      tooltip: {
-        show: true,
-        trigger: 'item',
-        formatter: '{b}: {c} ({d}%)',
-      },
-      legend: {
-        icon: 'emptyCircle',
-        height: 3,
-        itemGap: 40,
-        // orient: 'horizontal',
-        bottom: 0,
-        formatter: function (name) {
-          if (index < 4) {
-            index += 1
-          }
-          let dom = ref()
-          datas.value.map((item) => {
-            if (item.name == name) {
-              dom.value = name + '  ' + item.value
-            }
-          })
-          return dom.value
-        },
-      },
-      series: [
-        {
-          center: ['50%', '40%'],
-          type: 'pie',
-          selectedMode: 'single',
-          radius: ['50%', '30%'],
-          color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#FAC858'],
-          top: '0',
-          label: {
-            normal: {
-              show: false,
-              position: 'inner',
-              formatter: '{d}%',
-
-              // textStyle: {
-              //   color: '#fff',
-              //   fontWeight: 'bold',
-              //   fontSize: 14,
-              // },
-            },
-          },
-          labelLine: {
-            normal: {
-              show: false,
-            },
-          },
-          data: dataLists,
-        },
-        {
-          type: 'pie',
-          center: ['50%', '40%'],
-          radius: ['58%', '50%'],
-          itemStyle: {
-            normal: {
-              color: '#c2c7d6',
-            },
-            emphasis: {
-              color: '#ADADAD',
-            },
-          },
-          label: {
-            normal: {
-              position: 'inner',
-              formatter: '{c}',
-              textStyle: {
-                color: '#777777',
-                fontWeight: 'bold',
-                fontSize: 14,
-              },
-            },
-          },
-          // data: dataLists,
-        },
-      ],
+  res.data.data.total.forEach((val) => {
+    let _obj = {
+      organization: '个',
+      type: val.type,
+      photo: val.type && imgObj[val.type],
+      amount: val.count,
     }
+    if (val.type == '基础设施') {
+      if (uavAndIndividualSoldier.num) {
+        _obj.amount = val.count - 0 + uavAndIndividualSoldier.num
+      }
+    }
+    dataList.value.dataList.push(_obj)
+    // switch (val.type) {
+    //   case '组件服务':
+    //     dataList.value.dataList.push({
+    //       organization: '个',
+    //       type: '组件服务',
+    //       photo: require('../../../assets/abilityStatistics/banner-zj.png'),
+    //       amount: val.count,
+    //     })
+    //     break
+    //   case '应用资源':
+    //     dataList.value.dataList.push({
+    //       organization: '个',
+    //       type: '应用资源',
+    //       photo: require('../../../assets/abilityStatistics/banner-yy.png'),
+    //       amount: val.count,
+    //     })
+    //     break
+    //   case '基础设施':
+    //     if (uavAndIndividualSoldier.num) {
+    //       val.count = val.count - 0 + uavAndIndividualSoldier.num
+    //     }
+    //     dataList.value.dataList.push({
+    //       organization: '个',
+    //       type: '基础设施',
+    //       photo: require('../../../assets/abilityStatistics/banner-jc.png'),
+    //       amount: val.count,
+    //     })
+    //     break
+    //   case '数据资源':
+    //     dataList.value.dataList.push({
+    //       organization: '个',
+    //       type: '数据资源',
+    //       photo: require('../../../assets/abilityStatistics/banner-sj.png'),
+    //       amount: val.count,
+    //     })
+    //     break
+    //   case '知识库':
+    //     dataList.value.dataList.push({
+    //       organization: '个',
+    //       type: '知识库',
+    //       photo: require('../../../assets/abilityStatistics/banner-zs.png'),
+    //       amount: val.count,
+    //     })
+    //     break
+    // }
+  })
+  let arr = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
+  dataList.value.dataList.sort((a, b) => {
+    return arr.indexOf(a.type) - arr.indexOf(b.type)
+  })
+})
+let datas = ref([])
+let laiyuanDataList = ref([])
+// let dataSourceNum = ref(0)
+let bumenSum = ref([])
 
-    option && myChart.setOption(option)
-  }
-  //来源部门漏斗图
-  const funnelPlot = (dataList) => {
-    // let arr = ['0-5', '5-10', '10-15', '15-20', '20以上']
-    // dataList.sort((a, b) => {
-    //   console.log(arr.indexOf(a.fanwei), arr.indexOf(b.fanwei))
-    //   return arr.indexOf(b.fanwei) - arr.indexOf(a.fanwei)
-    // })
-    console.log('============》', dataList)
-    echarts.init(document.getElementById('right')).dispose()
-    let chartDom = document.getElementById('right')
-    let myChart = echarts.init(chartDom)
-    let option
+//能力统计-来源部门统计接口
+const sourceDepartment = () => {
+  sourceDepartmentStatistics().then((res) => {
+    // datas.value = res.data.data.deptTypeCount
+    bumenSum.value = res.data.data.deptCount
+    for (const key in res.data.data.deptTypeCount) {
+      datas.value.push({
+        name: key,
+        value: res.data.data.deptTypeCount[key],
+      })
+    }
+    let fanwei = ref([])
+    for (const key in res.data.data.deptTotalCount) {
+      laiyuanDataList.value.push({
+        name: res.data.data.deptTotalCount[key],
+        value: res.data.data.deptTotalCount[key],
+        fanwei: '',
+      })
+      fanwei.value.push(key)
+      fanwei.value.map((item, index) => {
+        if (index + 1 < fanwei.value.length) {
+          laiyuanDataList.value[index].fanwei =
+            item + '-' + fanwei.value[index + 1]
+        } else {
+          laiyuanDataList.value[index].fanwei = item + '以上'
+        }
+      })
+    }
+    console.log('laiyuanDataList.value', laiyuanDataList.value)
+  })
+}
+//来源部门饼图
+let leftDom = ref(0)
+const pieCharti = (dataLists) => {
+  leftDom.value += 'a'
+  echarts.init(document.getElementById('left')).dispose()
+  let chartDom = document.getElementById('left')
+  let myChart = echarts.init(chartDom)
+  let option
+  let index = -1
+  option = {
+    title: {
+      // text: '区级占比',
+      x: 'center',
+      y: '35%',
+      textStyle: {
+        fontWeight: 'normal',
+        fontSize: 16,
+      },
+    },
+    tooltip: {
+      show: true,
+      trigger: 'item',
+      formatter: '{b}: {c} ({d}%)',
+    },
+    legend: {
+      icon: 'emptyCircle',
+      height: 3,
+      itemGap: 40,
+      // orient: 'horizontal',
+      bottom: 0,
+      formatter: function (name) {
+        if (index < 4) {
+          index += 1
+        }
+        let dom = ref()
+        datas.value.map((item) => {
+          if (item.name == name) {
+            dom.value = name + '  ' + item.value
+          }
+        })
+        return dom.value
+      },
+    },
+    series: [
+      {
+        center: ['50%', '40%'],
+        type: 'pie',
+        selectedMode: 'single',
+        radius: ['50%', '30%'],
+        color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#FAC858'],
+        top: '0',
+        label: {
+          normal: {
+            show: false,
+            position: 'inner',
+            formatter: '{d}%',
 
-    option = {
-      // title: {
-      //   text: '汇聚量',
-      // },
-      tooltip: {
-        trigger: 'item',
-        formatter: function (name) {
-          let dom = ref()
-          dom.value =
-            '部门数<br/>' + name.data.fanwei + ' : ' + name.data.value + '个'
-          console.log('name', name.data)
-          return dom.value
+            // textStyle: {
+            //   color: '#fff',
+            //   fontWeight: 'bold',
+            //   fontSize: 14,
+            // },
+          },
         },
-      },
-      grid: {
-        height: '65%',
-        width: '45%',
-        left: '20%',
-        bottom: 30,
-      },
-      xAxis: {
-        show: false,
-        type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-      },
-      yAxis: {
-        show: false,
-        type: 'value',
-        min: 0,
-        max: 20,
-      },
-      series: [
-        {
-          name: '部门数',
-          type: 'funnel',
-          left: '20%',
-          top: '10%',
-          width: '60%',
-          height: '80%',
-          min: 0,
-          max: 100,
-          minSize: '0%',
-          maxSize: '100%',
-          sort: 'ascending',
-          gap: 2,
-          label: {
-            show: true,
-            position: 'inside',
+        labelLine: {
+          normal: {
+            show: false,
           },
-          labelLine: {
-            length: 10,
-            lineStyle: {
-              width: 1,
-              type: 'solid',
-            },
-          },
-          itemStyle: {
-            borderColor: '#fff',
-            borderWidth: 1,
+        },
+        data: dataLists,
+      },
+      {
+        type: 'pie',
+        center: ['50%', '40%'],
+        radius: ['58%', '50%'],
+        itemStyle: {
+          normal: {
+            color: '#c2c7d6',
           },
           emphasis: {
-            label: {
-              fontSize: 20,
+            color: '#ADADAD',
+          },
+        },
+        label: {
+          normal: {
+            position: 'inner',
+            formatter: '{c}',
+            textStyle: {
+              color: '#777777',
+              fontWeight: 'bold',
+              fontSize: 14,
             },
           },
-          data: dataList,
         },
-        {
-          data: [],
-          type: 'bar',
-        },
-      ],
-    }
-
-    option && myChart.setOption(option)
+        // data: dataLists,
+      },
+    ],
   }
-  onMounted(() => {
-    // findZywMessage()
-    // snum()
-    sourceDepartment()
+
+  option && myChart.setOption(option)
+}
+//来源部门漏斗图
+const funnelPlot = (dataList) => {
+  // 排序
+  let arrCopy = ['0-5', '5-10', '10-15', '15-20', '20以上']
+  // 真实数据
+  dataList.sort((a, b) => {
+    console.log(arrCopy.indexOf(a.fanwei), arrCopy.indexOf(b.fanwei))
+    return arrCopy.indexOf(b.fanwei) - arrCopy.indexOf(a.fanwei)
   })
-  watch(
-    datas,
-    (value) => {
-      pieCharti(value)
+  let _arr = dataList.map(v => v.fanwei) || arrCopy;
+  // 数据配置形成金字塔形状固定
+  let chartData = _arr.map((v, i) => {
+    return {
+      name: v,
+      value: 10 + 10 * i,
+    }
+  })
+
+  let newArr = [];
+  dataList.map(v => {
+    if (v.value && Number(v.value > 0)) {
+      newArr.push({
+        name: v.fanwei,
+        value: v.value
+      })
+    }
+  })
+  console.log('============》', dataList)
+  echarts.init(document.getElementById('right')).dispose()
+  let chartDom = document.getElementById('right')
+  let myChart = echarts.init(chartDom)
+  let option = {
+    tooltip: {
+      trigger: 'item',
+      formatter: function (info) {
+        let _obj = dataList.find(v => v.fanwei == info.data.name) || {}
+        let dom = ref()
+        dom.value =
+          '部门数<br/>' + (_obj.fanwei || '--') + ' : ' + (_obj.value || _obj.value === 0 ? _obj.value : '--') + '个'
+        console.log('name', info.data)
+        return dom.value
+      },
     },
-    { deep: true }
-  )
-  watch(
-    laiyuanDataList,
-    (value) => {
-      funnelPlot(value)
-      console.log(value, '   laiyuanDataList')
+    grid: {
+      height: '65%',
+      width: '45%',
+      left: '20%',
+      bottom: 30,
     },
-    { deep: true }
-  )
+    xAxis: {
+      show: false,
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      show: false,
+      type: 'value',
+      min: 0,
+      max: 20,
+    },
+    series: [
+      {
+        name: '部门数',
+        type: 'funnel',
+        left: '28%',
+        right: '35%',
+        top: '15%',
+        bottom: '10%',
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'ascending',
+        label: {
+          show: true,
+          formatter: function (info) {
+            let _obj = dataList.find(v => v.fanwei == info.data.name) || {}
+            let dom = ref()
+            dom.value = (_obj.fanwei || '--') + ' : ' + (_obj.value || _obj.value === 0 ? _obj.value : '--') + '个';
+            console.log('name', info.data)
+            return dom.value
+          },
+          rich: {
+            b: {
+              fontSize: 14
+            }
+          }
+        },
+        labelLine: {
+          length: 40,
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          }
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1,
+        },
+        emphasis: {
+          label: {
+            fontSize: 20,
+          },
+        },
+        data: chartData,
+      }
+    ],
+  }
+
+  option && myChart.setOption(option)
+}
+onMounted(() => {
+  // findZywMessage()
+  // snum()
+  sourceDepartment()
+})
+watch(
+  datas,
+  (value) => {
+    pieCharti(value)
+  },
+  { deep: true }
+)
+watch(
+  laiyuanDataList,
+  (value) => {
+    funnelPlot(value)
+    console.log(value, '   laiyuanDataList')
+  },
+  { deep: true }
+)
 </script>
 <style lang="less" scoped>
-  @font-face {
-    font-family: 'num-typeface';
-    src: url('~@/assets/newHome/font/num-typeface.otf');
-  }
-  @font-face {
-    font-family: 'text-typeface';
-    src: url('~@/assets/newHome/font/text-typeface.otf');
-  }
-  .num {
-    font-family: num-typeface;
-    font-size: 32px;
-    font-weight: 600;
-    margin-right: 5px;
-  }
-  .hengxian {
-    height: 3px;
-    width: 30px;
-    border-radius: 1px;
-    margin-top: 6px;
-    background: #0058e1;
-  }
-  .resource-aggregation {
-    font-size: 18px;
-    font-family: text-typeface;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    background: #f3f5f9;
-    padding-bottom: 60px;
-    .resource-aggregation-left {
-      background: #fff;
-      border: 1px solid #e6e9ed;
-      border-radius: 2px;
-      box-shadow: 0 4px 20px rgba(233, 233, 233, 0.1);
-      width: 360px;
-      height: 397px;
-      padding: 20px;
-      padding-top: 64px;
-      position: relative;
-      .title {
-        position: absolute;
-        top: 20px;
-        font-size: 18px;
-        color: #212121;
-      }
-      .content {
-        .content-son {
-          .content-left {
-            margin-bottom: 8px;
-            height: 56px;
-            width: 320px;
-            background: #f1f4fb;
+@font-face {
+  font-family: 'num-typeface';
+  src: url('~@/assets/newHome/font/num-typeface.otf');
+}
+
+@font-face {
+  font-family: 'text-typeface';
+  src: url('~@/assets/newHome/font/text-typeface.otf');
+}
+
+.num {
+  font-family: num-typeface;
+  font-size: 32px;
+  font-weight: 600;
+  margin-right: 5px;
+}
+
+.hengxian {
+  height: 3px;
+  width: 30px;
+  border-radius: 1px;
+  margin-top: 6px;
+  background: #0058e1;
+}
+
+.resource-aggregation {
+  font-size: 18px;
+  font-family: text-typeface;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background: #f3f5f9;
+  padding-bottom: 60px;
+
+  .resource-aggregation-left {
+    background: #fff;
+    border: 1px solid #e6e9ed;
+    border-radius: 2px;
+    box-shadow: 0 4px 20px rgba(233, 233, 233, 0.1);
+    width: 360px;
+    height: 397px;
+    padding: 20px;
+    padding-top: 64px;
+    position: relative;
+
+    .title {
+      position: absolute;
+      top: 20px;
+      font-size: 18px;
+      color: #212121;
+    }
+
+    .content {
+      .content-son {
+        .content-left {
+          margin-bottom: 8px;
+          height: 56px;
+          width: 320px;
+          background: #f1f4fb;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-radius: 1px;
+
+          .name {
             display: flex;
-            justify-content: space-between;
+            justify-content: center;
             align-items: center;
-            border-radius: 1px;
-            .name {
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              .name-photo {
-                margin-left: 10px;
-                display: inline-block;
-                height: 32px;
-                width: 32px;
-                margin-right: 11px;
-              }
-            }
-            .organization-value {
-              margin-right: 16px;
-              .num {
-                font-size: 26px;
-              }
-              span:nth-child(2) {
-                font-size: 16px;
-              }
+
+            .name-photo {
+              margin-left: 10px;
+              display: inline-block;
+              height: 32px;
+              width: 32px;
+              margin-right: 11px;
             }
           }
-        }
-      }
-    }
-    .resource-aggregation-right {
-      background: #fff;
-      border: 1px solid #e6e9ed;
-      border-radius: 2px;
-      box-shadow: 0 4px 20px rgba(233, 233, 233, 0.1);
-      margin-left: 20px;
-      width: 920px;
-      height: 397px;
-      padding: 64px;
-      overflow: hidden;
-      position: relative;
-      display: flex;
-      padding-left: 120px;
-      .title {
-        position: absolute;
-        top: 20px;
-        left: 20px;
-        font-size: 18px;
-        color: #212121;
-      }
-      .bumensnum {
-        width: 100px;
-        position: absolute;
-        left: 20px;
-        height: 313px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding-top: 66px;
-        background: rgba(0, 88, 225, 0.1);
-        border-right: 1px solid rgba(0, 88, 225, 0.5);
-        border-radius: 2px;
-        .bumensnum-photo {
-          height: 50px;
-          width: 50px;
-          background: url('~@/assets/abilityStatistics/bumenzongshu.png')
-            no-repeat;
-          margin-bottom: 30px;
-        }
-        p {
-          margin-top: 18px;
-          color: #0058e1;
-          .num {
-            font-size: 30px;
+
+          .organization-value {
+            margin-right: 16px;
+
+            .num {
+              font-size: 26px;
+            }
+
+            span:nth-child(2) {
+              font-size: 16px;
+            }
           }
-          span:last-child {
-            font-size: 16px;
-          }
-        }
-      }
-      .content {
-        width: 779px;
-        height: 313px;
-        display: flex;
-        position: relative;
-        background: #f1f4fb;
-        .left {
-          width: 373px;
-          height: 313px;
-        }
-        .center {
-          height: 240px;
-          width: 1px;
-          margin-top: 31px;
-          background: #d0d4de;
-        }
-        .right {
-          width: 406px;
-          height: 313px;
-        }
-        .right-son1 {
-          position: absolute;
-          top: 10px;
-          left: 52.5%;
-        }
-        .right-son2 {
-          position: absolute;
-          top: 10px;
-          left: 70.5%;
         }
       }
     }
   }
+
+  .resource-aggregation-right {
+    background: #fff;
+    border: 1px solid #e6e9ed;
+    border-radius: 2px;
+    box-shadow: 0 4px 20px rgba(233, 233, 233, 0.1);
+    margin-left: 20px;
+    width: 920px;
+    height: 397px;
+    padding: 64px;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    padding-left: 120px;
+
+    .title {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      font-size: 18px;
+      color: #212121;
+    }
+
+    .bumensnum {
+      width: 100px;
+      position: absolute;
+      left: 20px;
+      height: 313px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 66px;
+      background: rgba(0, 88, 225, 0.1);
+      border-right: 1px solid rgba(0, 88, 225, 0.5);
+      border-radius: 2px;
+
+      .bumensnum-photo {
+        height: 50px;
+        width: 50px;
+        background: url('~@/assets/abilityStatistics/bumenzongshu.png') no-repeat;
+        margin-bottom: 30px;
+      }
+
+      p {
+        margin-top: 18px;
+        color: #0058e1;
+
+        .num {
+          font-size: 30px;
+        }
+
+        span:last-child {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .content {
+      width: 779px;
+      height: 313px;
+      display: flex;
+      position: relative;
+      background: #f1f4fb;
+
+      .left {
+        width: 373px;
+        height: 313px;
+      }
+
+      .center {
+        height: 240px;
+        width: 1px;
+        margin-top: 31px;
+        background: #d0d4de;
+      }
+
+      .right {
+        width: 406px;
+        height: 313px;
+      }
+
+      .right-son1 {
+        position: absolute;
+        top: 10px;
+        left: 52.5%;
+      }
+
+      .right-son2 {
+        position: absolute;
+        top: 10px;
+        left: 70.5%;
+      }
+    }
+  }
+}
 </style>