sl-sfy-safety/src/views/dashboard/home/components/Score.vue

<template>
  <div class="score-layout">
    <div class="score-left">
      <div class="score-header">
        <span class="score-title">综合评分</span>
        <el-radio-group v-model="timeSelect" class="score-select" @change="changeTime">
          <el-radio-button v-for="item in ScoreTimeList" :label="item.label" :value="item.value" />
        </el-radio-group>
      </div>
      <el-divider />
      <div class="score-show">
        <VChart class="pic-show" :option="options" />
      </div>
    </div>
    <div class="score-divider"></div>
    <div class="score-right">
      <div class="concern-title">重点关注车间</div>
      <ul v-if="workshopList.length > 0" class="concern-workspace">
        <li v-for="workshop in workshopList">{{ workshop }}</li>
      </ul>
      <div class="score-tip">
        <el-icon><Warning /></el-icon>
        <div class="tip-content">动态显示当前安全评分最低的三个车间</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { ScoreTimeList, TimeEnum } from '../types';
  import { computed } from 'vue';
  import VChart from 'vue-echarts';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import { Warning } from '@element-plus/icons-vue';
  import {
    TooltipComponent,
    LegendComponent,
    GridComponent,
    DataZoomComponent,
  } from 'echarts/components';
  import useScore from '../hooks/useScoreInfo';
  import useWorkshopTop from '../hooks/useWorkshopTop';

  const useTop = useWorkshopTop();
  const { openTopWs, workshopList } = useTop;

  onMounted(() => {
    openTopWs();
    console.log('workshopList', workshopList.value);
  });

  const useHomeScore = useScore();
  const {
    scoreInfoList,
    getDailyScoreList,
    getWeeklyScoreList,
    getMonthlyScoreList,
    getQuarterlyScoreList,
  } = useHomeScore;

  use([
    CanvasRenderer,
    BarChart,
    TooltipComponent,
    LegendComponent,
    GridComponent,
    DataZoomComponent,
  ]);
  const timeSelect = ref<TimeEnum>(TimeEnum.DAY);
  //const workspaceList = ['车间1', '车间2', '车间3'];

  const dataZoomConfig = computed(() => [
    {
      type: 'slider',
      show: true,
      showDetail: false,
      showDataShadow: false,
      xAxisIndex: [0],
      start: 0,
      end: Number(10 / scoreInfoList.value.length) * 100,
      handleSize: 1,
      height: 7,
      bottom: 2,
      brushSelect: false,
      handleStyle: {
        opacity: 0,
      },
    },
    {
      // 没有下面这块的话，只能拖动滚动条，
      // 鼠标滚轮在区域内不能控制外部滚动条
      type: 'inside',
      // 控制哪个轴，如果是number表示控制一个轴，
      // 如果是Array表示控制多个轴。此处控制第二根轴
      xAxisIndex: [0, 1],
      // 滚轮是否触发缩放
      zoomOnMouseWheel: false,
      // 鼠标移动能否触发平移
      moveOnMouseMove: true,
      // 鼠标滚轮能否触发平移
      moveOnMouseWheel: true,
    },
  ]);

  const options = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
        formatter: (v) => {
          let [a] = v;
          const workshopList = scoreInfoList.value.find(
            (item) => item.date === a.name,
          )?.workshopList;
          return `
            <div class='u-p-2'>
                <div>评分最低的三个车间</div>
                ${workshopList?.map((t) => `<span style="color: blue;">•</span> ${t}`).join('<br>')}
            </div>
        `;
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '4%',
        top: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: scoreInfoList.value.map((item) => item.date),
        axisLabel: {
          interval: 0, // 强制显示所有标签
          //rotate: dataChart.value.map((item) => item.name).length > 10 ? 45 : 0, // 旋转角度
          margin: 20, // 调整标签与轴线的距离，避免标签被遮挡
        },
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: scoreInfoList.value.map((item) => item.score),
          type: 'bar',
        },
      ],
      dataZoom: scoreInfoList.value.length > 10 ? dataZoomConfig.value : null,
      // 启用数据区域缩放
    };
  });

  const changeTime = () => {
    switch (timeSelect.value) {
      case TimeEnum.DAY:
        getDailyScoreList();
        break;

      case TimeEnum.WEEK:
        getWeeklyScoreList();
        break;

      case TimeEnum.MONTH:
        getMonthlyScoreList();
        break;
      case TimeEnum.QUARTER:
        getQuarterlyScoreList();
        break;
    }
  };
</script>

<style scoped>
  .score-layout {
    display: flex;
  }

  .score-left {
    display: flex;
    /* width: 965px; */
    flex-grow: 1;
    flex-direction: column;
  }

  .score-right {
    width: 158px;
    flex-shrink: 0;
  }

  .score-header {
    display: flex;
    justify-content: space-between;
    height: 50px;
  }

  .score-show {
    flex-grow: 1;
    width: calc(100%-660px);
    overflow-x: auto;
  }

  .score-title {
    font-size: 16px;
    margin-top: 17px;
    margin-left: 18px;
  }
  .score-select {
    /* flex-grow: 1; */
    margin-right: 10px;
  }

  .score-divider {
    width: 1px;
    height: 320px;
    background: #e9e9e9;
    /* margin-left: 29px;
    margin-right: 27px; */
  }

  .el-divider--horizontal {
    margin: 0px;
  }

  .pic-show {
    flex-grow: 1;
    height: 270px;
  }

  .concern-title {
    margin-left: 20px;
    margin-top: 51px;
    font-size: 14px;
  }
  .concern-workspace {
    margin-left: 23px;
    margin-top: 24px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
  }

  li {
    margin-bottom: 16px;
  }
  li:before {
    content: '•';
    color: red;
    display: inline-block;
    margin-right: 20px;
    width: 8px;
    height: 8px;
    font-size: 16px;
    line-height: 1;
  }

  .score-tip {
    display: flex;
    margin-top: 20px;
    margin-left: 14px;
  }

  .tip-content {
    margin-left: 16px;
    margin-right: 14px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 10px;
  }
</style>