gasInjection-project/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>吨煤通风费用（元）</span>
        <span class="color-green">32</span>
      </div>
      <div class="monitor-center__item_B flex flex-items-center">
        <span>吨煤通风费用（元）</span>
        <span class="color-yellow">32</span>
      </div>
    </div>
    <div class="flex">
      <div class="ml-7px text-center">
        <span>总风量</span>
        <div class="number_grid">
          <span>1</span>
          <span>2</span>
          <span>.</span>
          <span>3</span>
          <span>4</span>
        </div>
      </div>
      <div class="ml-7px text-center">
        <span>吨煤通风</span>
        <div class="number_grid">
          <span>1</span>
          <span>2</span>
          <span>.</span>
          <span>3</span>
          <span>4</span>
        </div>
      </div>
      <div class="ml-7px text-center">
        <span>吨煤通风</span>
        <div class="number_grid">
          <span>1</span>
          <span>2</span>
          <span>.</span>
          <span>3</span>
          <span>4</span>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="justify-end monitor-center w-300px">
    <div class="flex">
      <Pie
        class="w-50% text-center"
        :option="chartOption"
        :chart-data="[
          {
            value: 70,
            name: 'A',
          },
          {
            value: 30,
            name: 'B',
          },
        ]"
        height="100px"
      />
      <Pie
        class="w-50% text-center"
        :option="chartOption"
        :chart-data="[
          {
            value: 70,
            name: 'A',
          },
          {
            value: 30,
            name: 'B',
          },
        ]"
        height="100px"
      />
    </div>
  </div> -->
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
  import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
  import Pie from '/@/components/chart/Pie.vue';
  import { EChartsOption } from 'echarts';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const configs = ref<{ prop: string; label: string }[]>([]);
  function fetchConfig() {
    cfgList({
      deviceType: 'devicekind',
    }).then(({ records }) => {
      const moduleData = JSON.parse(records[0]?.moduleData);
      configs.value = Object.keys(moduleData).map((k) => {
        return {
          prop: k,
          label: moduleData[k],
        };
      });
    });
  }

  const devices = ref<any[]>([]);
  const selectedDevice = ref<any>({});
  function selectDeviceByID(id: string) {
    selectedDevice.value = devices.value.find((e) => {
      return e.id === id;
    });
  }
  // 获取全部局扇的数据，并以选项格式返回给 Header 消费
  function fetchOptions() {
    return list({
      devicekind,
    }).then(({ records }) => {
      devices.value = records;
      selectDeviceByID(records[0]?.id);
      return records.map((e) => {
        return {
          label: e.strinstallpos,
          key: e.id,
        };
      });
    });
  }

  // 图标相关
  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'],
  };

  onMounted(() => {
    fetchConfig();
  });
</script>
<style lang="less" scoped>
  @import '@/design/vent/color.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%;
    }
  }
</style>