zsjz-ai/ai-frontend/packages/trans/views/aiBaseStation/index.vue

<template>
  <div :class="prefixCls" class="ai-base-station-page">
    <div class="filter-bar filter-bar--stacked">
      <div class="filter-row filter-row--carrier">
        <div class="filter-item filter-item--carrier">
          <span class="filter-item__label">MNC:</span>
          <RadioGroup v-model:value="formState.mnc">
            <Radio v-for="item in carrierOptions" :key="item.value" :value="item.value">{{ item.label }}</Radio>
          </RadioGroup>
        </div>
      </div>

      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-item__label">LAC:</span>
          <Input
            v-model:value="formState.lac"
            class="filter-item__input"
            :maxlength="15"
            placeholder="请输入搜索内容"
            @input="handleCodeInput('lac', $event)"
          />
        </div>
        <div class="filter-item">
          <span class="filter-item__label">CID:</span>
          <Input
            v-model:value="formState.ci"
            class="filter-item__input"
            :maxlength="15"
            placeholder="请输入搜索内容"
            @input="handleCodeInput('ci', $event)"
          />
        </div>
        <div class="filter-item">
          <span class="filter-item__label">DEC/HEX:</span>
          <Select v-model:value="formState.radixMode" class="filter-item__select" :options="radixOptions" />
        </div>
        <div class="filter-actions">
          <Button type="primary" :loading="queryLoading" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </div>
        <div class="side-actions">
          <Button @click="handleFetchTemplate">获取转换基站模版</Button>
          <Button @click="handleConvertFile">批量转换基站</Button>
        </div>
      </div>
    </div>

    <div class="content-panel">
      <div class="table-card">
        <div class="panel-header">
          <div>
            <div class="panel-title">基站结果地图</div>
            <div class="panel-desc">
              {{ resultSummary }}
            </div>
          </div>
        </div>
        <div class="table-panel">
          <div class="map-panel__body">
            <BaseStationQueryMap :points="mapPoints" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="ViewsAiBaseStationIndex">
  import { computed, ref } from 'vue';
  import { Button, Input, Radio, Select } from 'ant-design-vue';
  import { useDesign } from '@jeesite/core/hooks/web/useDesign';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { useTableSkill } from '@jeesite/core/hooks/web/useTableSkill';
  import {
    convertBaseStationData,
    fetchBaseStationTemplatePath,
    searchBaseStation,
    type BaseStationSearchLocation,
    type BaseStationSearchResponse,
    type BaseStationTemplateResponse,
  } from '@jeesite/trans/api/baseStationQueryApi';
  import BaseStationQueryMap, { type BaseStationMapPoint } from './components/BaseStationQueryMap.vue';

  type RadixMode = 'dec' | 'hex';

  const { prefixCls } = useDesign('ai-base-station');
  const { createConfirm, createMessage } = useMessage();
  const { queryLoading, runWithQueryLoading } = useTableSkill();
  const RadioGroup = Radio.Group;

  const carrierOptions: Array<{ label: string; value: string }> = [
    { label: '移动', value: '0' },
    { label: '联通', value: '1' },
    { label: '电信', value: '11' },
  ];

  const radixOptions: Array<{ label: string; value: RadixMode }> = [
    { label: '10进制', value: 'dec' },
    { label: '16进制', value: 'hex' },
  ];

  const formState = ref({
    mnc: '0',
    lac: '',
    ci: '',
    radixMode: 'dec' as RadixMode,
  });

  const mapPoints = ref<BaseStationMapPoint[]>([]);

  const normalizeText = (value: unknown) => String(value ?? '').trim();
  const getCarrierLabel = (value: string) => carrierOptions.find((item) => item.value === value)?.label || '未知运营商';
  const ipcRenderer = window.electron?.ipcRenderer;

  const resultSummary = computed(() => {
    if (!mapPoints.value.length) return '当前无可展示的基站坐标数据。';
    return `当前展示 ${mapPoints.value.length} 个查询命中基站点。`;
  });

  const sanitizeCodeText = (value: string) => value.replace(/[^0-9a-fA-F]/g, '');

  const handleCodeInput = (field: 'lac' | 'ci', event: Event) => {
    const input = event?.target as HTMLInputElement | null;
    const sanitized = sanitizeCodeText(input?.value || '');
    formState.value[field] = sanitized;
  };

  const normalizeCodeValue = (value: string, label: string) => {
    const text = normalizeText(value);
    if (!text) {
      throw new Error(`请输入${label}`);
    }
    if (formState.value.radixMode === 'hex') {
      if (!/^[0-9a-fA-F]+$/.test(text)) {
        throw new Error(`${label}仅支持 16 进制字符`);
      }
      return String(parseInt(text, 16));
    }
    if (!/^\d+$/.test(text)) {
      throw new Error(`${label}仅支持数字`);
    }
    return text;
  };

  const getFirstDefinedText = (...values: unknown[]) => {
    for (const value of values) {
      const text = normalizeText(value);
      if (text) return text;
    }
    return '';
  };

  const extractSearchLocation = (result: BaseStationSearchResponse): BaseStationSearchLocation | null => {
    if (!result) return null;
    if (Array.isArray(result)) {
      if (!result.length) return null;
      if (Array.isArray(result[0])) {
        const row = result[0] as Array<string | number | null>;
        return {
          lat: row?.[0],
          lng: row?.[1],
          address: row?.[2] as string | null,
        };
      }
      const firstItem = result[0];
      if (firstItem && typeof firstItem === 'object') {
        return firstItem as BaseStationSearchLocation;
      }
      return {
        lat: result?.[0] as string | number | null,
        lng: result?.[1] as string | number | null,
        address: result?.[2] as string | null,
      };
    }
    if (typeof result === 'object') {
      if ('rows' in result && Array.isArray(result.rows) && result.rows.length) return result.rows[0];
      if ('list' in result && Array.isArray(result.list) && result.list.length) return result.list[0];
      if ('records' in result && Array.isArray(result.records) && result.records.length) return result.records[0];
      if ('data' in result && result.data) return extractSearchLocation(result.data as BaseStationSearchResponse);
      if ('result' in result && result.result) return extractSearchLocation(result.result as BaseStationSearchResponse);
      return result as BaseStationSearchLocation;
    }
    return null;
  };

  const buildSingleSearchPoint = (result: BaseStationSearchResponse) => {
    const location = extractSearchLocation(result);
    if (!location) return null;
    const latitudeText = getFirstDefinedText(location.latitude, location.lat, location.y);
    const longitudeText = getFirstDefinedText(location.longitude, location.lng, location.lon, location.x);
    const range = getFirstDefinedText(location.range, location.radius);
    const address = getFirstDefinedText(location.address, location.addr, location.stationAddr, location.stationName);
    const lng = Number(longitudeText);
    const lat = Number(latitudeText);
    if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
      return null;
    }
    return {
      id: ['search', formState.value.mnc, formState.value.lac, formState.value.ci].join('||'),
      lng,
      lat,
      title: address || '查询结果',
      address,
      regionId: getFirstDefinedText(location.lac, formState.value.lac) || '-',
      cellId: getFirstDefinedText(location.ci, location.cid, formState.value.ci) || '-',
      longitudeText,
      latitudeText,
      range: range || '-',
      operatorName: getFirstDefinedText(location.operatorName, location.yys) || getCarrierLabel(formState.value.mnc),
    } satisfies BaseStationMapPoint;
  };

  const resolveTemplatePath = (payload: BaseStationTemplateResponse | null | undefined): string => {
    if (!payload) return '';
    if (typeof payload === 'string') return normalizeText(payload);

    const candidates = [
      payload.data,
      payload.path,
      payload.filePath,
      payload.file,
      payload.message,
      payload.msg,
      (payload.data as Recordable | null | undefined)?.path,
      (payload.data as Recordable | null | undefined)?.filePath,
      (payload.data as Recordable | null | undefined)?.file,
    ];

    for (const candidate of candidates) {
      const text = normalizeText(candidate);
      if (text) return text;
    }
    return '';
  };

  const openDirectoryByPath = async (targetPath: string) => {
    if (!ipcRenderer?.invoke) {
      createMessage.warning(`当前不在 Electron 环境，路径为：${targetPath}`);
      return;
    }

    const opened = await ipcRenderer.invoke('controller/os/openDirectory', { id: targetPath });
    if (!opened) {
      throw new Error('打开文件夹失败');
    }
  };

  const handleFetchTemplate = async () => {
    await runWithQueryLoading(async () => {
      const response = await fetchBaseStationTemplatePath();
      const code = typeof response === 'object' && response ? Number(response.code ?? 200) : 200;
      if (code !== 200) {
        throw new Error(
          (typeof response === 'object' && response && (response.message || response.msg)) || '获取导入模版失败',
        );
      }

      const templatePath = resolveTemplatePath(response);
      if (!templatePath) {
        throw new Error('未获取到转换基站模版路径');
      }

      createConfirm({
        title: '已获取转换基站模版',
        content: `模版路径为：<br/>${templatePath}<br/><br/>点击确定后将打开所在文件夹。`,
        iconType: 'success',
        okText: '打开文件夹',
        cancelText: '关闭',
        async onOk() {
          await openDirectoryByPath(templatePath);
          return Promise.resolve();
        },
      });
    }).catch((error: any) => {
      createMessage.error(error?.message || '获取转换基站模版失败');
    });
  };

  const handleSearch = async () => {
    let lac = '';
    let ci = '';
    try {
      lac = normalizeCodeValue(formState.value.lac, 'LAC');
      ci = normalizeCodeValue(formState.value.ci, 'CID');
    } catch (error: any) {
      createMessage.warning(error?.message || '请输入正确的查询条件');
      return;
    }

    await runWithQueryLoading(async () => {
      const result = await searchBaseStation({
        mnc: formState.value.mnc,
        lac,
        ci,
      });
      const point = buildSingleSearchPoint(result);
      mapPoints.value = point ? [point] : [];
      if (!point) {
        createMessage.warning('未查询到可用的基站坐标');
      }
    });
  };

  const handleReset = () => {
    formState.value = {
      mnc: '0',
      lac: '',
      ci: '',
      radixMode: 'dec',
    };
    mapPoints.value = [];
  };

  const doConvertFile = async (fileToken: string) => {
    await runWithQueryLoading(async () => {
      const convertResult = await convertBaseStationData(fileToken);
      const convertedPath = convertResult;
      if (!convertedPath) {
        createMessage.warning('转换完成，但未获取到有效路径');
        return;
      }

      createConfirm({
        title: '转换完成',
        content: `基站转换完成，路径为：<br/>${convertedPath}<br/><br/>点击确定后将打开所在文件夹。`,
        okText: '打开文件夹',
        cancelText: '关闭',
        iconType: 'success',
        async onOk() {
          if (!ipcRenderer?.invoke) return Promise.resolve();
          await ipcRenderer.invoke('controller/os/openDirectory', { id: convertedPath });
          return Promise.resolve();
        },
      });
    });
  };

  const handleConvertFile = async () => {
    if (!ipcRenderer?.invoke) {
      createMessage.warning('当前不在 Electron 环境');
      return;
    }

    const filePath: string = await ipcRenderer.invoke('controller/os/selectXlsFile');
    if (!filePath) return;

    await doConvertFile(filePath);
  };
</script>

<style lang="less">
  @import '../styles/trans-analysis-table-ui.less';

  @prefix-cls: ~'jeesite-ai-base-station';

  .@{prefix-cls}.ai-base-station-page {
    .analysis-single-panel-frame();

    .filter-bar {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      padding: 6px 8px 8px;
    }

    .filter-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-row--carrier {
      min-height: 24px;
    }

    .filter-item {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .filter-item--carrier {
      gap: 8px;
    }

    .filter-item__label {
      color: #6b7280;
      font-size: 12px;
      line-height: 20px;
      white-space: nowrap;
    }

    .filter-item__input {
      width: 180px;
    }

    .filter-item__select {
      width: 160px;
    }

    .filter-actions,
    .side-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .side-actions {
      margin-left: auto;
    }

    .table-card {
      padding: 8px;
    }

    .table-panel {
      padding-top: 0;
    }

    .map-panel__body {
      display: flex;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    :deep(.ant-radio-wrapper) {
      color: #475569;
      font-size: 14px;
    }

    :deep(.ant-input),
    :deep(.ant-select-selector),
    :deep(.ant-btn) {
      border-radius: 8px;
    }

    @media screen and (max-width: 1280px) {
      .side-actions {
        margin-left: 0;
      }
    }

    @media screen and (max-width: 992px) {
      .filter-row {
        gap: 12px;
      }

      .filter-item,
      .filter-item__input,
      .filter-item__select,
      .filter-actions,
      .side-actions {
        width: 100%;
      }

      .filter-actions,
      .side-actions {
        margin-left: 0;
        justify-content: flex-start;
      }
    }
  }
</style>