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 { selectTotal } from '@/api/home'
  import {
    // numberOfResourcesByCategory,
    sourceDepartmentStatistics,
  } from '@/api/abilityStatistics.js'
  // import { zywMessage } from '@/api/home'
  import * as echarts from 'echarts'
  import { message } from 'ant-design-vue'
  //各类资源汇聚量
  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)
    if (res.data.code !== 0) {
      return message.error(res.data.msg)
    }
    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'),
    }
    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
        }
      }
      if (val.type == '知识库') {
        _obj.organization = '条'
      }
      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([])

  //能力统计-来源部门统计接口
  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)
      funnelPlot(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',
        itemGap: 20,
        padding: 20,
        // 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,
        },
      ],
    }

    option && myChart.setOption(option)
  }
  //来源部门漏斗图
  const funnelPlot = (dataList) => {
    // 排序
    let arrCopy = ['1-5', '5-10', '10-15', '15-20', '20以上']
    // 真实数据
    dataList.sort((a, b) => {
      return Number(a.value) - Number(b.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)
    dataList = dataList.reverse()
    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
    //     },
    //   },
    //   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: '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,
    //     },
    //   ],
    // }

    let option = {
      //          title: {
      //              text: 'ECharts 入门示例'
      //          },
      tooltip: {
        trigger: 'item',
        formatter: function (info) {
          let _obj = dataList.find((v) => v.fanwei == info.name) || {}
          let dom = ref()
          dom.value =
            '部门数<br/>' +
            (_obj.fanwei || '--') +
            ' : ' +
            (_obj.value || _obj.value === 0 ? _obj.value : '--') +
            '个'
          console.log('name', info)
          return dom.value
        },
      },
      legend: {
        data: [],
      },
      xAxis: {
        name: '上架数量区间',
        data: [],
      },
      yAxis: {
        name: '部门数量（个）',
        minInterval: 1,
      },
      grid: {
        height: '65%',
        width: '63%',
        left: '12%',
        bottom: 30,
      },
      series: [
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          barGap: '-100%',
          itemStyle: {
            normal: {
              color: '#ECB53F',
            },
          },
          //              data: [5, 20, 36, 10, 10, 20]
          data: [],
        },
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          barGap: '-100%',
          itemStyle: {
            normal: {
              color: '#FE845E',
            },
          },
          //              data: [5, 20, 36, 10, 10, 20]
          data: [],
        },
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          barGap: '-100%',
          itemStyle: {
            normal: {
              color: '#6CC95A',
            },
          },
          //              data: [5, 20, 36, 10, 10, 20]
          data: [],
        },
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          barGap: '-100%',
          itemStyle: {
            normal: {
              color: '#02D1B0',
            },
          },
          //              data: [5, 20, 36, 10, 10, 20]
          data: [],
        },
        {
          name: '',
          type: 'bar',
          barWidth: 35,
          barGap: '-100%',
          itemStyle: {
            normal: {
              color: '#1772FF',
            },
          },
          //              data: [5, 20, 36, 10, 10, 20]
          data: [],
        },
      ],
    }
    option.legend.data = []
    option.xAxis.data = []
    dataList.map((val, index) => {
      // option.legend.data.push(val.fanwei)
      option.xAxis.data.push(val.fanwei)
      option.series[index].name = val.fanwei
      let arr = []
      for (let i = 0; i < 5; i++) {
        if (i == index) {
          arr.push(val.value)
          // arr.push(10) // 方便更改样式
        } else {
          arr.push(0)
        }
      }
      option.series[index].data = arr
    })
    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: 65.5%;
        }
      }
    }
  }
</style>