mky-vent-base/src/views/vent/home/configurable/components/MonitorCenter.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="monitor-center pt-10px pl-2px pr-2px pb-10px">
    <div class="flex">
      <div class="monitor-center__item_A">
        <span>巷道总长度（m）</span>
        <span class="color-green">{{ data.flength }}</span>
      </div>
      <div class="monitor-center__item_B flex flex-items-center">
        <span>吨煤通风费用（元）</span>
        <span class="color-yellow">{{ data.cost }}</span>
      </div>
    </div>
    <div class="flex">
      <div class="ml-7px text-center">
        <span>总风量（m³/min）</span>
        <div class="number_grid">
          <span v-for="(c, i) in data.m3Str" :key="`vhccmcc-${i}`">{{ c }}</span>
        </div>
      </div>
      <div class="ml-7px text-center">
        <span>总阻力（pa）</span>
        <div class="number_grid">
          <span v-for="(c, i) in data.paStr" :key="`vhccmcc-${i}`">{{ c }}</span>
        </div>
      </div>
      <div class="ml-7px text-center">
        <span>等积孔（m³）</span>
        <div class="number_grid">
          <span v-for="(c, i) in data.eStr" :key="`vhccmcc-${i}`">{{ c }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="monitor-center flex flex-wrap w-240px ml-166px">
    <div v-for="(item, i) in chartOptions" :key="`vhccmc-${i}`" class="w-100px m-10px">
      <Chart class="w-100% m-auto" height="100px" :option="item.option" />
      <div class="monitor-center__chart_title">{{ item.title }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import Chart from '/@/components/chart/Chart.vue';
  import { EChartsOption } from 'echarts';
  import _ from 'lodash';
  // import mapComponent from './components/3Dmap/index.vue';

  // 设备类别，是个枚举 TODO: 将手动换为自动获取类别
  // const devicekind = 'fanlocal';

  const data = ref<Record<string, any>>({});

  // 图表相关
  const chartOptions = ref([
    { title: '外部漏风率', option: getChartOption(40) },
    { title: '有效风量率', option: getChartOption(30) },
    { title: '灵敏度A', option: getChartOption(20) },
    { title: '灵敏度B', option: getChartOption(50) },
  ]);

  function getChartOption(percent: number): EChartsOption {
    const data = [
      // 最下面的一环
      {
        // 中间展示数据的一环
        name: 'root',
        value: 100,
        // itemStyle: item1,
        children: [
          {
            value: percent,
            name: 'node-0',
            children: [
              {
                name: 'leaf-0-0',
                value: percent,
              },
            ],
          },
          {
            name: 'node-1',
            value: 100 - percent,
            itemStyle: {
              color: 'transparent',
            },
            children: [
              {
                name: 'leaf-1-0',
                value: 100 - percent,
              },
            ],
          },
        ],
      },
    ];

    return {
      title: {
        text: percent + '%',
        left: 'center',
        top: 'center',
        textStyle: {
          color: '#0afff0',
        },
      },
      grid: {
        show: false,
      },
      xAxis: { show: false },
      yAxis: { show: false },
      series: {
        startAngle: 270,
        // radius: ['60%', '90%'],
        nodeClick: false,
        type: 'sunburst',
        sort: undefined,
        emphasis: {
          focus: 'none',
        },
        label: {
          show: false,
        },
        labelLine: { show: false },
        levels: [
          {},
          {
            radius: ['60%', '65%'],
            // 最靠内测的第一层
            itemStyle: {
              color: '#0afff0',
            },
          },
          {
            radius: ['70%', '90%'],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#55fdbf', // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: '#4bcbff', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#56e6ff', // 100% 处的颜色
                  },
                ],
              },
              borderWidth: 0,
            },
          },
          {
            radius: ['95%', '100%'],
            itemStyle: {
              color: '#0afff0',
            },
          },
        ],
        itemStyle: {
          borderWidth: 0,
        },
        tooltip: {
          show: false,
        },
        silent: true,
        data,
      },
    };
  }

  function fetchData() {
    Promise.resolve({
      flength: 222,
      m3: 33333,
      pa: 44444,
      e: 55555,
      cost: 111,
      p1: 40,
      p2: 20,
      p3: 30,
      p4: 10,
    }).then((r: any) => {
      data.value = r;
      const reference = [r.p1, r.p2, r.p3, r.p4];
      r.eStr = _.pad(r.e.toString(), 5, '0');
      r.m3Str = _.pad(r.m3.toString(), 5, '0');
      r.paStr = _.pad(r.pa.toString(), 5, '0');
      chartOptions.value.forEach((item, i) => {
        item.option = getChartOption(reference[i]);
      });
    });
  }

  onMounted(() => {
    fetchData();
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/theme.less';

  .monitor-center__primary_text {
    font-size: 20px;
    color: @vent-gas-primary-text;
  }

  .monitor-center {
    background-image: @vent-configurable-home-bg-img;
    border-top: 2px solid @vent-configurable-home-light-border;
    color: @white;
  }

  .monitor-center__item_A {
    width: 201px;
    height: 36px;
    background-image: url('@/assets/images/home-container/configurable/list_item_green.png');
    padding-left: 45px;
    line-height: 36px;
  }
  .monitor-center__item_B {
    width: 201px;
    height: 36px;
    background-image: url('@/assets/images/home-container/configurable/list_item_yellow.png');
    padding-left: 45px;
    line-height: 36px;
  }
  .number_grid {
    width: 125px;
    height: 37px;
    background-image: url('@/assets/images/home-container/configurable/number_grid.png');
    line-height: 37px;
    display: flex;
    justify-content: flex-start;
    padding: 0 2px 0 2px;

    span {
      flex-basis: 20%;
    }
  }

  .monitor-center__chart_title {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid @vent-configurable-home-light-border;
  }
</style>