hvac-web/src/views/real-time-monitor/device-control/AIOptimization.vue

<script setup lang="ts">
import { computed, ref, shallowRef } from 'vue';
import { message, Modal } from 'ant-design-vue';

import SvgIcon from '@/components/SvgIcon.vue';
import { useViewVisible } from '@/hooks/view-visible';
import { t } from '@/i18n';

import ChillerUnitOptimize from '../device-optimize/ChillerUnitOptimize.vue';
import CoolingTowerOptimize from '../device-optimize/CoolingTowerOptimize.vue';

import type { Component } from 'vue';
import type { ColumnType } from 'ant-design-vue/es/table';

interface OptimizeAlgorithmItem {
  algorithm: string;
  setValue: number;
  isEnabled: boolean;
  unit?: string;
  modalWidth?: number;
  modalComponent?: Component;
}

const dataSource = ref<OptimizeAlgorithmItem[]>([
  {
    algorithm: '冷机水温寻优',
    setValue: 10,
    isEnabled: false,
    unit: '°C',
    modalComponent: shallowRef(ChillerUnitOptimize),
  },
  {
    algorithm: '塔出水温度寻优',
    setValue: 10,
    isEnabled: true,
    unit: '°C',
    modalWidth: 460,
    modalComponent: shallowRef(CoolingTowerOptimize),
  },
  {
    algorithm: '冷冻泵寻优',
    setValue: 10,
    isEnabled: true,
  },
  {
    algorithm: '冷却泵寻优',
    setValue: 10,
    isEnabled: true,
  },
]);

const columns = computed<ColumnType<OptimizeAlgorithmItem>[]>(() => [
  {
    title: t('realTimeMonitor.optimizationAlgorithm'),
    dataIndex: 'algorithm',
    key: 'algorithm',
  },
  {
    title: t('realTimeMonitor.setValue'),
    dataIndex: 'setValue',
    key: 'setValue',
  },
  {
    title: t('realTimeMonitor.isEnabled'),
    dataIndex: 'isEnabled',
    key: 'isEnabled',
  },
  {
    title: t('common.operation'),
    dataIndex: 'operation',
    key: 'operation',
  },
]);

const handleSwitchClick = (record: OptimizeAlgorithmItem) => {
  const titlePrefix = record.isEnabled ? t('common.confirmClose') : t('common.confirmOpen');

  Modal.confirm({
    title: titlePrefix + record.algorithm,
    closable: true,
    async onOk() {
      try {
        record.isEnabled = !record.isEnabled;
      } catch (err) {
        message.error((err as Error).message);
        console.error(err);
      }
    },
  });
};

const selectedAlgorithm = ref<OptimizeAlgorithmItem>();

const handleSettingClick = (record: OptimizeAlgorithmItem) => {
  selectedAlgorithm.value = record;
  showView();
};

const { visible, showView } = useViewVisible();

const modalTitle = computed(() => {
  return selectedAlgorithm.value?.algorithm + t('common.settings');
});

const handleOk = () => {
  // 实际场景中处理确定逻辑
};
</script>

<template>
  <div>
    <ATable class="ai-optimize-table" :columns="columns" :data-source="dataSource" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'algorithm'">
          <span>{{ record.algorithm }}</span>
          <span v-if="record.unit">({{ record.unit }})</span>
        </template>
        <template v-if="column.key === 'setValue'">
          <AInput class="ai-optimize-input" v-model:value="record.setValue" />
        </template>
        <template v-if="column.key === 'isEnabled'">
          <ASwitch
            :checked="record.isEnabled"
            :checked-children="$t('common.on')"
            :un-checked-children="$t('common.off')"
            @click="handleSwitchClick(record as OptimizeAlgorithmItem)"
          />
        </template>
        <template v-else-if="column.key === 'operation'">
          <div class="ai-optimize-setting">
            <SvgIcon name="setting" @click="handleSettingClick(record as OptimizeAlgorithmItem)" />
          </div>
        </template>
      </template>
    </ATable>
    <AModal
      v-model:open="visible"
      wrap-class-name="hvac-modal ai-optimize-modal"
      :title="modalTitle"
      :width="selectedAlgorithm?.modalWidth || 920"
      destroy-on-close
      @ok="handleOk"
    >
      <component :is="selectedAlgorithm?.modalComponent" />
    </AModal>
  </div>
</template>

<style lang="scss">
.ai-optimize-modal {
  .ant-modal-body {
    max-height: 638px;
    overflow-y: auto;
  }
}
</style>

<style lang="scss" scoped>
:deep(.ai-optimize-table).ant-table-wrapper .ant-table {
  color: rgba(255 255 255 / 85%);
  background: transparent;

  .ant-table-thead > tr > th {
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255 255 255 / 85%);
    background: rgba(255 255 255 / 8%);
    border-bottom: none;
  }

  .ant-table-header {
    border-radius: 0;
  }

  table > thead > tr:first-child > {
    *:first-child {
      border-start-start-radius: 0;
    }

    *:last-child {
      border-start-end-radius: 0;
    }
  }

  .ant-table-thead
    > tr
    > th.ant-table-cell:not(:last-child, .ant-table-selection-column, .ant-table-row-expand-icon-cell, [colspan]) {
    &::before {
      background-color: transparent;
    }
  }

  .ant-table-tbody > tr {
    > td {
      padding-inline: 12px;
      border-top-color: rgba(255 255 255 / 8%);
    }

    &:last-child > td {
      border-bottom-color: rgba(255 255 255 / 8%);
    }

    &.ant-table-row:hover > td,
    > td.ant-table-cell-row-hover {
      background: rgba(255 255 255 / 8%);
    }
  }
}

.ai-optimize-input {
  width: 96px;
  color: #fff;
  background: rgb(30 37 48 / 32%);
  border-color: rgb(255 255 255 / 24%);
  border-radius: 4px;

  &.ant-input:hover,
  &.ant-input:focus,
  &.ant-input-focused {
    border-color: var(--antd-color-primary-hover);
  }
}

.ai-optimize-setting {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--antd-color-primary);
  cursor: pointer;
}
</style>