vent-template/src/views/vent/home/configurable/components/VentilateAnalysis.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
    <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>
    <Pie :option="chartOption" :chart-data="chartData" height="140px" />
    <div class="flex justify-around mt-10px">
      <MiniBoard
        v-for="(label, prop) in config.moduleData?.main"
        :key="`vhccva-${prop}`"
        :label="label"
        :value="get(selectedDevice, prop)"
        layout="label-top"
        type="D"
      />
    </div>
  </ModuleBasic>
</template>
<script lang="ts" setup>
  import CostumeHeader from './CostumeHeader.vue';
  import { computed, onMounted, ref } from 'vue';
  import Pie from '/@/components/chart/Pie.vue';
  import { EChartsOption } from 'echarts';
  import { useInitDevices } from '../hooks/useInit';
  import { get } from '../../billboard/utils';
  import _ from 'lodash-es';
  import MiniBoard from './MiniBoard.vue';
  import ModuleBasic from './moduleBasic.vue';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const config = ref({
    moduleName: '关键通风路线', // 通风系统监测与分析
    moduleData: {
      main: {
        // m3_total: '总风量',
        // drag_total: '总阻力',
        // dengjikong: '等积孔',
        'majorpath.drag_1': '阻力1',
        'majorpath.drag_2': '阻力2',
        'majorpath.drag_3': '阻力3',
      },
      chart: {
        'majorpath.drag_1': '阻力1',
        'majorpath.drag_2': '阻力2',
        'majorpath.drag_3': '阻力3',
      },
    },
    showStyle: {
      size: 'width:450px;height:280px;',
      position: 'right:0px;top:60px;',
      version: 'enhanced',
    },
  });
  // const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
  const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);

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

  const chartData = computed(() => {
    return _.map(config.value.moduleData?.chart || [], (label, prop) => {
      return {
        value: parseInt(get(selectedDevice.value, prop, 0)),
        name: label,
      };
    });
  });

  onMounted(() => {});

  // 图表配置项
  const chartOption: EChartsOption = {
    series: [
      {
        type: 'pie',
        radius: ['50%', '75%'],
        center: ['50%', '55%'],
        data: [],
        labelLine: { show: false },
        label: {
          show: false,
          // formatter: '{b} \n ({d}%)',
          // color: '#B1B9D3',
        },
        itemStyle: {
          shadowBlur: 20,
          shadowColor: '#259bcf',
        },
      },
    ],
    color: ['#d9a1ff', '#00d1ff', '#82fe78'],
  };
</script>
<style scoped></style>