yudao-web/src/views/screen/compenonts/leftwrapper.vue

<template>
  <section class="left-wrapper" ref="leftWrapperRef">
    <TitleBox>
      <Charts :options="row1Options" ref="row1Chart" />
    </TitleBox>
    <TitleBox title="各大队企业数量" isRight>
      <Charts :options="row2Options" ref="row2Chart" />
    </TitleBox>
    <TitleBox title="各大队任务进度" isRight>
      <Charts :options="row3Options" ref="row3Chart" />
    </TitleBox>
  </section>
</template>

<script setup lang="ts">
import TitleBox from './titleBox.vue'
import { ScreenApi } from '@/api/screen'

const leftWrapperRef = ref()

let observer: Nullable<ResizeObserver> = null

const row1Options = ref({
  grid: {
    top: 40,
    bottom: 0,
    left: 10,
    right: 10,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.20)'
      }
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12
    }
  },
  yAxis: {
    type: 'value',
    max: (v) => {
      return Math.floor(v.max * 1.1 + 1)
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255,255,255,0.2)'
      }
    }
  },
  series: [
    {
      type: 'bar',
      data: [100, 10],
      barWidth: 5,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(50, 215, 75, 0)'
            },
            {
              offset: 1,
              color: 'rgba(50, 215, 75, 0.4)'
            }
          ]
        }
      }
    },
    {
      name: '任务类型占比',
      type: 'scatter',
      data: [100, 90, 10, 90, 90, 20, 56, 89],
      symbol:
        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASOSURBVHgBzVhBbBNHFP0z610Ht4SkIieSxrRSpZJIlEOpzKElUlult1SFtjcKSs9FIucW7iCFM2mhtxSomlur5hDSQ61yaQ5JD0hVHBxOICVxkIN3vTP8N95dDMTJrOJEPMmenfXszvOfP///N4JSYqRI+aygESXpqCA6ybe6og+wqolKQpvPbE3T1FSBSpQCwnbg6bv0DTdnIhLWYIJzFNLVWwW6YTN+W0KninRSOnSdL/PRI5WQ5B+h8Io+7V/Y8LrvV9x8Bb90BqXOff7Km55YP5JR/glJapgpdUbMSlrRpe2ItSQ08i91eT79wCPOR0PLAWUnVrP9v8QEbNBX/etLTz+5QFr3RcTGfY8uTR2jVWtCX7OfhA79xj++B4somb28mPtognaAw9WZUamCMWMxtpavaGgz/xKbkVEOzZBZIlGuuL1fPMweWaY24KC/0HcgeHDbWKsFKdncwTIlZISYbycZ4JE3UF5zD53SJBbYFHmXVwFztiRkfCa2TKb3XDvJNJOqeIfO8R8uwyWiORMkS4ZtzZ3r8Bm2zMe7QaYZZvn8B9PwKRXS0O0C3cF92cTMMIUD7zYZAJZS0r1sSEgTVighFAW9PJZqp7spDRZzQxNYOvjT6aLh0CDE1vkOrU8dV2iPEehswwAOnTFcom2+yEzX/n/t03dtX4So/EZQGhWqzhE5PIF7vHvmA+qYKL/+4c007+mp3bsLX/JDOiw1J0r8gHRg+xI4ZI9/b9pRtbGYjPl3pAc92hh/+/Gf//TU/uu1eReifjx3hrlIJRrJMtRekSyRBLeW0H2dwfKv+PdkAeRFtIIrCCkE9aMTZPYv2DyM3LQ1mWekumulb8kCgZObN4S4koBT59GpOt1lm4dd9cRqEsAR9YLNuKpz0MzNpUoXCJnQbZvB2U8GyBJCP/OvrRDPLSJCrxRAyNQltg6ohfibLKFIWvllPDcv2ark2ncNnVy4YuGo2I0Z691Yp+w1m3G58JGZm5esJJnVHXTc+rqVb6xk37pmwv22EGXbAOmqqpmbS9wlWGgOHYd8qx0BB0RNszWpRmFHlshwtDeE2DggNGUICTVs60fI1JxmPvDlvvOm2IrA10XO4FceZt/5JE3FIKk+jLbOXEw9xNl+BkGpLju+X9rDbA8YEaA2xvly7uZxOhZv+5/xlVE166DXLhhFwtCs3dAaQreOG61UQrjvr86O0h7BzBUV/LFeSwIjl5Fn0WZ07YJtpt4JUDHwiozhGgIyvp8QQk3LXn6VGR9Apt5NUokc4hoIczar2edSR+DSRYIWR/lQX/5pN0hFZH6MlyqakzYlBHkrQ/qc4E9aD7bbUk1CcTARii9I6peS6yQrSSY1RJGTs6Wm2+HoeIeRPWwZnIhYS+kYUJRuQBdjAYDoCxGQtl7uqi195YraaFzUwWewTKkOG5oRCchI0ZpHKqHI/I4kiyoThV3zcQyStKvWBxzlFxxSnzUfx7D+Ojv5fiN3tkKqAysejKOZo5QOsxz0brTtwOpFQDYZpcLigNs830JNnhzpoZxBkkTSRp6cTHmk9xRXBRnSHOR+CgAAAABJRU5ErkJggg==',
      symbolSize: 15
    }
  ],
  legend: {
    top: 0,
    left: 'center',
    show: true,
    itemWidth: 15,
    itemHeight: 15,
    textStyle: {
      color: '#fff'
    }
  }
})
const row2Options = ref({
  color: [
    'rgba(4, 180, 64, 1)',
    'rgba(4, 180, 64, .8)',
    'rgba(4, 180, 64, .6)',
    'rgba(4, 180, 64, .4)',
    'rgba(4, 180, 64, .2)'
  ],
  title: {
    text: '500',
    subtext: '入驻企业',
    left: '49%',
    top: '35%',
    textAlign: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 26,
      fontWeight: 'normal'
    },
    subtextStyle: {
      color: '#fff',
      fontSize: 14,
      fontWeight: 'normal'
    }
  },
  series: [
    {
      type: 'pie',
      itemStyle: {},
      radius: ['55%', '75%'],
      center: ['50%', '50%'],
      label: {
        show: true,
        position: 'outside',
        formatter: '{b} : {c}',
        color: '#fff'
      },
      data: [
        {
          value: 335,
          name: '一大队'
        },
        {
          value: 310,
          name: '二大队'
        },
        {
          value: 234,
          name: '三大队'
        },
        {
          value: 135,
          name: '四大队'
        },
        {
          value: 1548,
          name: '五大队'
        }
      ]
    }
  ]
})
const row3Options = ref({
  grid: {
    top: 10,
    bottom: 10,
    left: 10,
    right: 10,
    containLabel: true
  },
  yAxis: [
    {
      type: 'category',
      data: ['一大队', '二大队', '三大队', '四大队', '五大队'],
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      }
    },
    {
      type: 'category',
      data: ['1', '2', '3', '4', '5'],
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      }
    }
  ],
  xAxis: {
    max: 110,
    type: 'value',
    axisTick: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  tooltip: {
    show: true,
    trigger: 'item',
    backgroundColor: 'rgba(25, 119, 43,1)',
    axisPointer: {
      type: 'shadow'
    },
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      type: 'bar',
      data: [110, 110, 110, 110, 110],
      barWidth: 15,
      itemStyle: {
        color: 'rgba(255, 255, 255, 0.05)',
        borderRadius: [5, 5, 5, 5]
      },
      xAxisIndex: 0,
      yAxisIndex: 1,
      tooltip: {
        show: false
      }
    },
    {
      xAxisIndex: 0,
      type: 'bar',
      yAxisIndex: 0,
      data: [90, 80, 50, 20, 10],
      barWidth: 15,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(86, 202, 0, 0.00)'
            },
            {
              offset: 1,
              color: 'rgba(86, 202, 0, 0.50)'
            }
          ]
        },
        borderRadius: [5, 0, 0, 5]
      }
    },
    {
      type: 'pictorialBar',
      yAxisIndex: 0,
      symbolPosition: 'end',
      symbolSize: [10, 15],
      symbolOffset: [5, 0],
      itemStyle: {
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowBlur: 5,
        shadowOffsetY: 3,
        shadowOffsetX: 0,
        color: 'rgba(86, 202, 0, 1)'
      },
      data: [90, 80, 50, 20, 10]
    }
  ]
})

const row1Chart = ref()
const row2Chart = ref()
const row3Chart = ref()
const initChart = () => {}

const handlerResize = () => {
  unref(row1Chart).resizeHandler()
  unref(row2Chart).resizeHandler()
  unref(row3Chart).resizeHandler()
}

const queryParams: any = ref()

//左一数据
const leftFirst = async () => {
  const data: any = await ScreenApi.getLeftFirst(queryParams.value)
  row1Options.value.xAxis.data = data.map((i) => i.name)
  row1Options.value.series[0].data = data.map((i) => i.value)
  row1Options.value.series[1].data = data.map((i) => i.value)
}

//左二数据
const leftSecond = async () => {
  const data = await ScreenApi.getLeftSecond(queryParams.value)
  row2Options.value.title.text = data.enterpriseCount
  row2Options.value.series[0].data = data.enterpriseCountGroup
}

//左三数据
const leftThird = async () => {
  const data = await ScreenApi.getLeftThird(queryParams.value)
  row3Options.value.yAxis[0].data = data.map((i) => i.name)
  row3Options.value.yAxis[1].data = data.map((i) => i.execCount)
  row3Options.value.series[1].data = data.map((i) => i.finishCount)
  row3Options.value.series[2].data = data.map((i) => {
    return {
      name: i.name,
      value: i.finishCount,
      symbolSize: !i.finishCount ? 0 : [10, 15]
    }
  })
}

onMounted(() => {
  leftFirst()
  leftSecond()
  leftThird()
  initChart()
  observer = new ResizeObserver(handlerResize)
  observer.observe(leftWrapperRef.value)
  handlerResize()
})

onUnmounted(() => {
  observer?.disconnect()
})
</script>

<style scoped lang="scss">
.left-wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}
</style>