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

<template>
  <section class="right-wrapper" ref="rightWrapperRef">
    <TitleBox title="执法任务">
      <Charts :options="row1Options" ref="row1Chart" />
    </TitleBox>
    <TitleBox>
      <Charts :options="row2Options" ref="row2Chart" />
    </TitleBox>
    <TitleBox title="资质许可状态">
      <section class="list-container">
        <section class="position-absolute inset-0 overflow-y-auto flex flex-col gap-12px list" ref="listRef">
          <section class="flex justify-between font-size-14px" v-for="(row, index) in list" :key="index">
            <span>{{ row.name }}</span>
            <section class="color-#56CA00">
              逾期
              <count-to :start-val="0" :end-val="row.count" :duration="1000"
                :options="{ separator: ',', decimal: 0 }" />
              天
            </section>
          </section>
        </section>
      </section>
    </TitleBox>
    <TitleBox>
      <Charts :options="row3Options" ref="row3Chart" />
    </TitleBox>
  </section>
</template>

<script setup lang="ts">
import TitleBox from './titleBox.vue'
import { ScreenApi } from '@/api/screen'
const rightWrapperRef = 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',
      axisTick: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      max: (v) => {
        return Math.floor(v.max * 1.1 + 1)
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      }
    },
    {
      type: 'value',
      axisTick: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      max: (v) => {
        return Math.floor(v.max * 1.1 + 1)
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      }
    }
  ],
  series: [
    {
      type: 'bar',
      yAxisIndex: 0,
      name: '执法记录',
      data: [100, 90, 10, 90, 90, 20, 56, 89],
      barWidth: 5,
      itemStyle: {
        color: '#56CA00'
      }
    },
    {
      name: '任务数量',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      symbol: 'circle',
      itemStyle: {
        color: 'rgba(22, 177, 255, 1)'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(22, 177, 255, 0.4)'
            },
            {
              offset: 1,
              color: 'rgba(22, 177, 255, 0)'
            }
          ]
        }
      },
      data: [1000, 900, 100, 900, 900, 200, 560, 819]
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(25, 119, 43,1)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    top: 0,
    left: 'center',
    show: true,
    itemWidth: 15,
    itemHeight: 15,
    textStyle: {
      color: '#fff'
    }
  }
})
const list: any = ref([])
const color = ['#56CA00', '#FFE700', '#16B1FF']
const row2Options: any = ref({
  series: [
    {
      type: 'pie',
      itemStyle: {},
      center: ['30%', '50%'],
      radius: ['50%', '80%'],
      roseType: true,
      label: {
        show: true,
        position: 'outside',
        color: 'inherit',
        fontSize: 10,
        alignTo: 'labelLine'
      },
      labelLine: {
        show: true,
        length: 2
      },
      data: [
        {
          value: 335,
          name: '审批通过'
        },
        {
          value: 310,
          name: '执法签到'
        },
        {
          value: 234,
          name: '整改处理'
        }
      ].map((i, index) => {
        return {
          ...i,
          itemStyle: {
            color: color[index]
          }
        }
      })
    }
  ],
  legend: {
    show: true,
    itemWidth: 15,
    itemHeight: 15,
    itemGap: 10,
    right: 0,
    top: 'center',
    orient: 'vertical',
    data: [
      {
        name: '审批通过'
      },
      {
        name: '执法签到'
      },
      {
        name: '整改处理'
      }
    ].map((i, index) => {
      return {
        ...i,
        textStyle: {
          color: color[index]
        }
      }
    })
  }
})
const row3Options = 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',
      axisTick: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      max: (v) => {
        return Math.floor(v.max * 1.1 + 1)
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      }
    },
    {
      type: 'value',
      axisTick: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      max: (v) => {
        return Math.floor(v.max * 1.1 + 1)
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)'
        }
      }
    }
  ],
  series: [
    {
      type: 'line',
      yAxisIndex: 0,
      name: '执法记录',
      data: [120, 70, 10, 90, 90, 20, 56, 89],
      smooth: true,
      symbol: 'circle',
      itemStyle: {
        color: '#56CA00'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(86, 220, 0, 0.4)'
            },
            {
              offset: 1,
              color: 'rgba(86, 220, 0, 0)'
            }
          ]
        }
      }
    },
    {
      name: '任务数量',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      symbol: 'circle',
      itemStyle: {
        color: 'rgba(22, 177, 255, 1)'
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(22, 177, 255, 0.4)'
            },
            {
              offset: 1,
              color: 'rgba(22, 177, 255, 0)'
            }
          ]
        }
      },
      data: [1000, 900, 100, 900, 900, 200, 560, 819]
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(25, 119, 43,1)',
    borderColor: 'transparent',
    textStyle: {
      color: '#fff'
    },
    axisPointer: {
      type: 'shadow',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    top: 0,
    left: 'center',
    show: true,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#fff'
    }
  }
})
const row1Chart = ref()
const row2Chart = ref()
const row3Chart = ref()
const listRef = ref()
const initChart = () => {
  rightFirst()
  // rightSecond()
  rightFourth()
  rightThird()
}

const queryParams: any = ref()

//右一
const rightFirst = async () => {
  // const data: any = await ScreenApi.getRightFirst(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.taskValue)
  row1Options.value.series[0].data = new Array(5).fill(1).map(i=>{
    return Math.floor(Math.random()*100)
  })
  row1Options.value.series[1].data =  new Array(5).fill(1).map(i=>{
    return Math.floor(Math.random()*100)
  })

}

//右二
const rightSecond = async () => {
  const data = await ScreenApi.getRightSecond(queryParams.value)
  row2Options.value.series[0].data = data.map((i, index) => {
    return {
      value: i.value,
      name: i.name,
      itemStyle: {
        color: color[index]
      }
    }
  })
  row2Options.value.legend.data = data.map((i, index) => {
    return {
      name: `${i.name}`,
      textStyle: {
        color: color[index]
      }
    }
  })
  row2Options.value.legend.formatter = (v) => {
    const count = data.find((d) => v == d.name).value
    return `${v} ${count}`
  }
}

let timer: any = null
// 右三
const rightThird = async () => {
  list.value = await ScreenApi.getRightThird(queryParams.value)
  timer = setInterval(() => {
    unref(listRef).scrollTop += 1;
    if (unref(listRef).scrollTop >= unref(listRef).scrollHeight) {
      unref(listRef).scrollTop = 0;
    }
  }, 200);
}

// 右四
const rightFourth = async () => {
  // const data = await ScreenApi.getRightFourth(queryParams.value)
  // row3Options.value.xAxis.data = data.map((i) => i.name)
  // row3Options.value.series[0].data = data.map((i) => i.enforcementGrowthRate)
  // row3Options.value.series[1].data = data.map((i) => i.taskGrowthRate)
  row3Options.value.series[0].data = new Array(5).fill(1).map(i=>{
    return Math.floor(Math.random()*100)
  })
  row3Options.value.series[1].data =  new Array(5).fill(1).map(i=>{
    return Math.floor(Math.random()*100)
  })
}

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

onMounted(() => {
  initChart()
  observer = new ResizeObserver(handlerResize)
  observer.observe(rightWrapperRef.value)
  handlerResize()
})

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

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

  .list-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    scroll-behavior: smooth;

    .list {
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>