hi-ucs/front/src/views/abilityStatistics/components/ResourceAggregation.vue

<template>
  <div class="resource-aggregation">
    <!-- 各类资源汇聚量 -->
    <div class="resource-aggregation-left">
      <div class="title">
        {{ dataList.title }}
        <div class="hengxian"></div>
      </div>
      <div class="content">
        <div class="content-son">
          <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-text">{{ item.type }}</span>
              </div>
              <div class="organization-value">
                <span class="num">{{ item.amount || 0 }}</span>
                <span>{{ item.organization }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="resource-aggregation-right">
      <div class="title">
        来源部门
        <div class="hengxian"></div>
      </div>
      <div class="bumensnum">
        <div class="bumensnum-photo"></div>
        <span>部门总数</span>
        <p>
          <span class="num">{{ bumenSum }}</span>
          <span>个</span>
        </p>
      </div>
      <div class="content">
        <div :key="leftDom"></div>
        <div class="left" id="left"></div>
        <div class="center"></div>
        <div class="right" id="right"></div>
        <div class="right-son1">汇聚量</div>
        <div class="right-son2">部门数</div>
      </div>
    </div>
    <!-- 来源部门 -->
    <div></div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from 'vue'
  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]
      })
    })
  }
  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)
    })
  }
  //来源部门饼图
  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', '#fe8455'],
          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,
        },
      ],
    }

    option && myChart.setOption(option)
  }
  //来源部门漏斗图
  const funnelPlot = (dataList) => {
    echarts.init(document.getElementById('right')).dispose()
    let chartDom = document.getElementById('right')
    let myChart = echarts.init(chartDom)
    let option

    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
        },
      },
      grid: {
        height: '65%',
        width: '45%',
        left: '20%',
        bottom: 30,
      },
      xAxis: {
        show: false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        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: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid',
            },
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1,
          },
          emphasis: {
            label: {
              fontSize: 20,
            },
          },
          data: dataList,
        },
        {
          data: [],
          type: 'bar',
        },
      ],
    }

    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;
            display: flex;
            justify-content: space-between;
            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;
              }
            }
          }
        }
      }
    }
    .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>