mky-vent-base/src/views/vent/home/configurable/deprecated/WorkSurface.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>
    <LineMulti
      :option="chartOption"
      :prop-type-arr="propTypeArr"
      x-axis-prop-type="time"
      :chart-data="chartData"
      height="140px"
      class="worksurface-chart"
    />
    <div class="flex justify-around">
      <MiniBoard
        v-for="(label, prop) in config.moduleData?.main"
        :key="`vhccws-${prop}`"
        :label="label"
        :value="get(selectedDevice, prop)"
        layout="label-top"
        type="B"
      />
    </div>
  </ModuleBasic>
</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 { 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_surface_caimei';

  const config = ref({
    moduleName: '采煤工作面智能管控',
    moduleData: {
      main: {
        jin: '进风',
        hui: '回风',
        xufengliang: '需风量',
      },
      // 这里的配置比较特殊，需要配置为数据中 history 对象下的取值路径。无法针对 x 轴进行配置
      // 例如数据为 { history: [ jin: 10 ] }，那么需要配置为 jin
      chart: {
        hui: '回风量',
        jin: '进风量',
      },
    },
    showStyle: {
      size: 'width:450px;height:280px;',
      position: 'right:0px;top:350px;',
      version: 'enhanced',
    },
  });
  // const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
  const { options, selectedDevice, selectedDeviceID, fetchDevices } = useInitDevices(devicekind);

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

  const chartData = computed(() => {
    return selectedDevice.value.history || [];
  });

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

  // 图表相关
  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>