mky-vent-base/src/views/vent/home/configurable/components/AirVolumeMonitor.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 :api="fetchOptions" @change="selectDeviceByID">
    <div class="w-200px flex flex-items-center">
      <RightCircleOutlined class="w-30px" />
      <div class="flex-grow-1">
        {{ selectedDevice.strinstallpos }}
      </div>
    </div>
  </CostumeHeader> -->
    <PictorialBar :option="chartOption" series-prop-type="y" x-axis-prop-type="x" :chart-data="chartData" height="100%" />
    <!-- <div class="flex justify-around mt-10px">
    <MiniBoard v-for="item in configs" :key="item.prop" :label="item.label" :value="selectedDevice[item.prop]" />
  </div> -->
  </ModuleBasic>
</template>
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue';
  import PictorialBar from '/@/components/chart/PictorialBar.vue';
  import { EChartsOption, graphic } from 'echarts';
  import { useInitScene } from '../hooks/useInit';
  import _ from 'lodash-es';
  import { get } from '../../billboard/utils';
  import ModuleBasic from './moduleBasic.vue';
  // import mapComponent from './components/3Dmap/index.vue';

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

  const config = ref({
    moduleName: '矿井风量实时监测',
    moduleData: {
      chart: {
        x: 'stationname',
        y: 'readData.m3',
      },
    },
    showStyle: {
      size: 'width:1000px;height:280px;',
      position: 'left:460px;top:640px;',
      version: 'enhanced',
    },
  });
  // const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
  const { scene, fetchScene } = useInitScene(devicekind);

  const chartData = computed(() => {
    return scene.value.map((ele) => {
      return {
        x: get(ele, get(config.value, 'moduleData.chart.x', 'x')),
        y: get(ele, get(config.value, 'moduleData.chart.y', 'y')),
      };
    });
  });

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

  // 图表的配置项
  const chartOption: EChartsOption = {
    grid: {
      top: 50,
      height: 150,
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          color: '#ffffff',
          opacity: 0.3,
        },
      },
    },
    legend: { show: false },
    series: [
      {
        type: 'pictorialBar',
        name: 'pictorial element',
        symbol: 'circle',
        symbolPosition: 'end',
        symbolSize: [16, 16],
        symbolOffset: [0, -8],
        itemStyle: {
          color: '#66ffff',
        },
        data: [],
      },
      {
        name: 'reference bar',
        type: 'bar',
        silent: true,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#66ffff' },
            { offset: 0.2, color: '#66ffff' },
            { offset: 1, color: '#66ffff22' },
          ]),
        },
        tooltip: {
          show: false,
        },
        barWidth: 8,
        data: [],
      },
    ],
    textStyle: {
      color: '#fff',
    },
  };
</script>
<style scoped></style>