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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <CostumeHeader v-model:value="selectedDeviceID" :options="options">
    <!-- <div class="w-200px flex flex-items-center">
      <RightCircleOutlined class="w-30px" />
      <div class="flex-grow-1">
        {{ selectedDevice.strinstallpos }}
      </div>
    </div> -->
  </CostumeHeader>
  <LineMulti
    :option="chartOption"
    :prop-type-arr="propTypeArr"
    x-axis-prop-type="x"
    :chart-data="chartData"
    height="140px"
    class="worksurface-chart"
  />
  <div class="flex justify-around">
    <MiniBoard
      v-for="(label, prop) in configs.list"
      :key="`vhccws-${prop}`"
      :label="label"
      :value="get(selectedDevice, prop)"
      layout="label-top"
      type="B"
    />
  </div>
</template>
<script lang="ts" setup>
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import CostumeHeader from './CostumeHeader.vue';
  import { computed, onMounted, ref } from 'vue';
  import { EChartsOption } from 'echarts';
  import { useInitConfig, useInitDevices } from '../hooks/useInit';
  import { get } from '../../billboard/utils';
  import _ from 'lodash-es';
  import MiniBoard from './MiniBoard.vue';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const { configs, fetchConfig } = useInitConfig(devicekind);
  const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);

  onMounted(() => {
    fetchConfig();
    fetchDevices();
  });

  const chartData = ref<any[]>([
    { valueA: 1, valueB: 3, x: 2 },
    { valueA: 2, valueB: 1, x: 3 },
    { valueA: 1, valueB: 1, x: 4 },
    { valueA: 3, valueB: 2, x: 5 },
    { valueA: 2, valueB: 1, x: 6 },
    { valueA: 1, valueB: 2, x: 7 },
  ]);

  const propTypeArr = computed(() => {
    if (configs.value.chart) {
      const map = new Map();
      _.forEach(configs.value.chart || [], (label, prop) => {
        map.set(prop, label);
      });

      return map;
    } else {
      return new Map([
        ['valueA', '值A'],
        ['valueB', '值B'],
      ]);
    }
  });

  function fetchChartData() {}

  onMounted(() => {
    fetchChartData();
  });

  // 图表相关
  const chartOption: EChartsOption = {
    legend: {
      top: 10,
      right: 10,
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      top: 35,
      height: 80,
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          color: '#fff',
          opacity: 0.3,
        },
      },
    },
    textStyle: {
      color: '#fff',
    },
    backgroundColor: '#081f33',
    // backgroundColor: '#0091ff12',
  };
</script>
<style scoped lang="less">
  @import '@/design/vent/color.less';

  .worksurface-chart {
    border: 1px solid @vent-configurable-home-light-border;
  }
</style>