From 0b0dd5c8e87d1de8ca8c9fa70f6d71b156c98733 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Thu, 18 Jun 2026 13:54:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=88=E8=B4=B9=E5=A4=A7=E5=B1=8F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/invest/statisticAnalysis.js           |   27 +
 .../accountDealLocationScreen/index.vue       | 1468 +++++++++++++++++
 vite.config.js                                |    4 +-
 3 files changed, 1497 insertions(+), 2 deletions(-)
 create mode 100644 src/views/invest/accountDealLocationScreen/index.vue

diff --git a/src/api/invest/statisticAnalysis.js b/src/api/invest/statisticAnalysis.js
index 294e867..385aa3c 100644
--- a/src/api/invest/statisticAnalysis.js
+++ b/src/api/invest/statisticAnalysis.js
@@ -121,3 +121,30 @@ export function getBankCardStatistics() {
     method: 'get'
   })
 }
+
+// 查询交易地点消费地图概览
+export function getAccountDealLocationOverview(query) {
+  return request({
+    url: '/invest/analysis/accountDealLocationOverview',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询交易地点消费地图聚合点位
+export function getAccountDealLocationPoints(query) {
+  return request({
+    url: '/invest/analysis/accountDealLocationPoints',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询交易地点消费明细
+export function getAccountDealLocationRecords(query) {
+  return request({
+    url: '/invest/analysis/accountDealLocationRecords',
+    method: 'get',
+    params: query
+  })
+}
diff --git a/src/views/invest/accountDealLocationScreen/index.vue b/src/views/invest/accountDealLocationScreen/index.vue
new file mode 100644
index 0000000..59f29a1
--- /dev/null
+++ b/src/views/invest/accountDealLocationScreen/index.vue
@@ -0,0 +1,1468 @@
+<template>
+  <div class="location-screen">
+    <div class="screen-map" id="accountDealLocationMap"></div>
+
+    <div class="screen-header">
+      <div class="screen-heading">
+        <div class="screen-title">消费地图大屏</div>
+        <div class="screen-subtitle">基于账户交易经纬度的地点消费分析</div>
+      </div>
+      <div class="screen-actions">
+        <el-date-picker
+          v-model="queryParams.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="YYYY-MM-DD"
+          class="filter-date"
+          popper-class="screen-filter-popper"
+        />
+        <el-select
+          v-model="queryParams.accountId"
+          placeholder="账户"
+          clearable
+          filterable
+          class="filter-select filter-account"
+          popper-class="screen-filter-popper"
+        >
+          <el-option v-for="account in accountList" :key="account.id" :label="account.typeNameCodeAvailableLimit || account.nameCode" :value="account.id" />
+        </el-select>
+        <el-select v-model="queryParams.dealType" placeholder="交易类型" clearable class="filter-select" popper-class="screen-filter-popper">
+          <el-option v-for="dict in deal_type" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+        <el-select
+          v-model="queryParams.dealCategory"
+          placeholder="交易类别"
+          clearable
+          class="filter-select"
+          popper-class="screen-filter-popper"
+          @change="handleDealCategoryChange"
+        >
+          <el-option v-for="dict in deal_category" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+        <el-select v-model="queryParams.childCategory" placeholder="日常支出子类" clearable class="filter-select" popper-class="screen-filter-popper">
+          <el-option v-for="dict in daily_expenses" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+        <div class="screen-action-group">
+          <el-button type="primary" icon="Search" :loading="loading" class="screen-btn screen-btn-primary" @click="handleQuery">查询</el-button>
+          <el-button icon="Refresh" class="screen-btn screen-btn-plain" @click="resetQuery">重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="summary-panel">
+      <div class="summary-card">
+        <span>消费金额</span>
+        <strong>{{ formatMoney(overview.totalAmount) }}</strong>
+      </div>
+      <div class="summary-card">
+        <span>消费地点</span>
+        <strong>{{ overview.locationCount || 0 }}</strong>
+      </div>
+      <div class="summary-card">
+        <span>交易笔数</span>
+        <strong>{{ overview.dealCount || 0 }}</strong>
+      </div>
+      <div class="summary-card">
+        <span>单点最高</span>
+        <strong>{{ formatMoney(overview.maxAmount) }}</strong>
+      </div>
+    </div>
+
+    <div class="side-panel side-panel-left">
+      <div class="panel-title">地点消费排行</div>
+      <div v-if="locationPoints.length" class="rank-list">
+        <button
+          v-for="(item, index) in locationPoints.slice(0, 12)"
+          :key="item.locationKey"
+          class="rank-item"
+          :class="{ active: selectedPoint && selectedPoint.locationKey === item.locationKey }"
+          @click="selectPoint(item)"
+        >
+          <span class="rank-index">{{ index + 1 }}</span>
+          <span class="rank-info">
+            <span class="rank-name">{{ item.locationName || '未命名地点' }}</span>
+            <span class="rank-address">{{ item.locationAddress || `${item.longitude}, ${item.latitude}` }}</span>
+          </span>
+          <span class="rank-value">
+            <strong>{{ formatMoney(item.totalAmount) }}</strong>
+            <em>{{ item.dealCount || 0 }}笔</em>
+          </span>
+        </button>
+      </div>
+      <el-empty v-else description="暂无定位交易" :image-size="80" />
+    </div>
+
+    <div class="side-panel side-panel-right">
+      <div class="panel-title">
+        <span>点位明细</span>
+        <small v-if="selectedPoint">{{ selectedPoint.dealCount || 0 }}笔交易</small>
+      </div>
+      <div v-if="selectedPoint" class="selected-info">
+        <div class="selected-main">
+          <div class="selected-copy">
+            <span class="selected-kicker">当前点位</span>
+            <strong>{{ selectedPoint.locationName || '未命名地点' }}</strong>
+          </div>
+          <div class="selected-amount">
+            <span>累计消费</span>
+            <strong>{{ formatMoney(selectedPoint.totalAmount) }}</strong>
+          </div>
+        </div>
+        <div class="selected-address">
+          <span>地址</span>
+          <strong>{{ selectedPoint.locationAddress || '暂无地址' }}</strong>
+        </div>
+        <div class="selected-stat-grid">
+          <div>
+            <span>交易笔数</span>
+            <strong>{{ selectedPoint.dealCount || 0 }}笔</strong>
+          </div>
+          <div>
+            <span>单笔均值</span>
+            <strong>{{ formatMoney(getAverageAmount(selectedPoint)) }}</strong>
+          </div>
+          <div class="selected-stat-wide">
+            <span>经纬度</span>
+            <strong>{{ formatCoordinate(selectedPoint) }}</strong>
+          </div>
+        </div>
+      </div>
+      <div v-if="recordList.length" class="detail-section">
+        <div class="detail-section-head">
+          <span>交易流水</span>
+          <em>最新 {{ recordList.length }} 条</em>
+        </div>
+        <div class="detail-list">
+          <div v-for="(record, index) in recordList" :key="record.id" class="detail-card">
+            <div class="detail-row-main">
+              <div class="detail-title">
+                <span class="detail-index">{{ String(index + 1).padStart(2, '0') }}</span>
+                <strong>{{ formatChildCategory(record) }}</strong>
+                <em :class="['deal-type-tag', getDealTypeClass(record.dealType)]">{{ formatDealType(record.dealType) }}</em>
+              </div>
+              <strong :class="['detail-amount', getAmountClass(record)]">{{ formatRecordAmount(record) }}</strong>
+            </div>
+            <div class="detail-meta-line">
+              <span>{{ formatRecordDate(record.createTime) }} {{ formatRecordTime(record.createTime) }}</span>
+              <span>{{ formatParentCategory(record) }}</span>
+              <span>{{ record.accountName || '未知账户' }}</span>
+            </div>
+            <div v-if="record.remark" class="detail-remark">备注：{{ record.remark }}</div>
+          </div>
+        </div>
+      </div>
+      <el-empty v-else description="点击地图点查看明细" :image-size="80" />
+    </div>
+
+    <div v-if="loading" class="screen-loading">
+      <el-icon class="is-loading"><Loading /></el-icon>
+      <span>正在加载消费地图</span>
+    </div>
+  </div>
+</template>
+
+<script setup name="AccountDealLocationScreen">
+import dayjs from 'dayjs'
+import { PointLayer, PolygonLayer, Popup, RasterLayer } from '@antv/l7'
+import { listAccounts } from '@/api/invest/accounts'
+import { mapConfig, layerUrl } from '@/config/map'
+import { initMap } from '@/utils/map'
+import { getAccountDealLocationOverview, getAccountDealLocationPoints, getAccountDealLocationRecords } from '@/api/invest/statisticAnalysis'
+
+const { proxy } = getCurrentInstance()
+const { deal_type, deal_category, daily_expenses } = proxy.useDict('deal_type', 'deal_category', 'daily_expenses')
+
+const loading = ref(false)
+const scene = ref(null)
+const pointLayers = ref([])
+const popup = ref(null)
+const mapReady = ref(false)
+let darkBaseLayerReady = false
+const accountList = ref([])
+const locationPoints = ref([])
+const recordList = ref([])
+const selectedPoint = ref(null)
+const overview = ref({
+  totalAmount: 0,
+  dealCount: 0,
+  locationCount: 0,
+  maxAmount: 0,
+  latestTime: ''
+})
+
+const queryParams = ref({
+  time: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
+  accountId: null,
+  dealType: '2',
+  dealCategory: null,
+  childCategory: null
+})
+
+const darkMapMaskData = {
+  type: 'FeatureCollection',
+  features: [
+    {
+      type: 'Feature',
+      properties: {
+        name: 'dark-map-mask'
+      },
+      geometry: {
+        type: 'Polygon',
+        coordinates: [
+          [
+            [-180, -85],
+            [180, -85],
+            [180, 85],
+            [-180, 85],
+            [-180, -85]
+          ]
+        ]
+      }
+    }
+  ]
+}
+
+function buildQuery(extra = {}) {
+  const params = {
+    accountId: queryParams.value.accountId,
+    dealType: queryParams.value.dealType,
+    dealCategory: queryParams.value.dealCategory,
+    childCategory: queryParams.value.childCategory,
+    ...extra
+  }
+  const timeRange = queryParams.value.time
+  if (timeRange && timeRange.length === 2) {
+    params.startTime = timeRange[0]
+    params.endTime = timeRange[1]
+  }
+  return params
+}
+
+function formatMoney(value) {
+  return Number(value || 0).toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })
+}
+
+function formatParentCategory(record) {
+  return record.dealCategoryName || record.dealCategory || '未分类'
+}
+
+function formatChildCategory(record) {
+  return record.childCategoryName || record.childCategory || record.dealCategoryName || record.dealCategory || '未分类'
+}
+
+function formatDealType(value) {
+  const dict = deal_type.value.find((item) => String(item.value) === String(value))
+  return dict ? dict.label : '交易记录'
+}
+
+function getDealTypeClass(value) {
+  if (String(value) === '1') return 'deal-type-income'
+  if (String(value) === '2') return 'deal-type-expense'
+  return 'deal-type-transfer'
+}
+
+function getAmountClass(record) {
+  if (String(record.dealType) === '1') return 'detail-amount-income'
+  if (String(record.dealType) === '2') return 'detail-amount-expense'
+  return 'detail-amount-transfer'
+}
+
+function formatRecordAmount(record) {
+  const amount = Number(record.amount || 0)
+  if (amount < 0) return formatMoney(amount)
+  const prefix = String(record.dealType) === '1' ? '+' : String(record.dealType) === '2' ? '-' : ''
+  return `${prefix}${formatMoney(amount)}`
+}
+
+function formatRecordDate(value) {
+  if (!value) return '--'
+  const date = dayjs(value)
+  return date.isValid() ? date.format('MM-DD') : '--'
+}
+
+function formatRecordTime(value) {
+  if (!value) return '--:--'
+  const date = dayjs(value)
+  return date.isValid() ? date.format('HH:mm') : '--:--'
+}
+
+function formatCoordinate(point) {
+  if (point?.longitude == null || point?.latitude == null || point.longitude === '' || point.latitude === '') return '--'
+  const longitude = Number(point.longitude)
+  const latitude = Number(point.latitude)
+  if (!Number.isFinite(longitude) || !Number.isFinite(latitude)) return '--'
+  return `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
+}
+
+function getAverageAmount(point) {
+  const dealCount = Number(point?.dealCount || 0)
+  if (!dealCount) return 0
+  return Number(point?.totalAmount || 0) / dealCount
+}
+
+function escapeHtml(value) {
+  return String(value ?? '').replace(/[&<>"']/g, (char) => {
+    const escapeMap = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#39;'
+    }
+    return escapeMap[char]
+  })
+}
+
+function handleDealCategoryChange(value) {
+  if (value !== '1') {
+    queryParams.value.childCategory = null
+  }
+}
+
+function handleQuery() {
+  loadScreenData()
+}
+
+function resetQuery() {
+  queryParams.value = {
+    time: [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
+    accountId: null,
+    dealType: '2',
+    dealCategory: null,
+    childCategory: null
+  }
+  selectedPoint.value = null
+  recordList.value = []
+  loadScreenData()
+}
+
+async function loadAccounts() {
+  const response = await listAccounts({
+    pageNum: 1,
+    pageSize: 1000,
+    state: '1'
+  })
+  accountList.value = response.rows || []
+}
+
+async function loadScreenData() {
+  loading.value = true
+  try {
+    const params = buildQuery()
+    const [overviewResponse, pointsResponse] = await Promise.all([getAccountDealLocationOverview(params), getAccountDealLocationPoints(params)])
+    overview.value = overviewResponse.data || {}
+    locationPoints.value = pointsResponse.data || []
+    recordList.value = []
+    selectedPoint.value = null
+    clearPopup()
+    renderPointLayers()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function selectPoint(point) {
+  selectedPoint.value = point
+  renderPointLayers({ fitFirst: false })
+  scene.value?.setCenter([Number(point.longitude), Number(point.latitude)])
+  const params = buildQuery({
+    longitude: point.longitude,
+    latitude: point.latitude
+  })
+  const response = await getAccountDealLocationRecords(params)
+  recordList.value = response.data || []
+  showPointPopup(point)
+}
+
+function getPointColor(amount) {
+  if (amount >= 5000) return '#ff5c7a'
+  if (amount >= 1000) return '#facc15'
+  if (amount >= 300) return '#22d3ee'
+  return '#2dd4bf'
+}
+
+function getPointSize(amount) {
+  if (!overview.value.maxAmount) return 16
+  const rate = Math.max(Number(amount || 0) / Number(overview.value.maxAmount || 1), 0.08)
+  return Math.min(34, Math.max(16, 13 + rate * 28))
+}
+
+function mapPointData() {
+  return locationPoints.value.map((item) => {
+    const pointSize = getPointSize(Number(item.totalAmount || 0))
+    const isSelected = selectedPoint.value && selectedPoint.value.locationKey === item.locationKey
+    return {
+      ...item,
+      pointColor: getPointColor(Number(item.totalAmount || 0)),
+      haloSize: pointSize + (isSelected ? 22 : 14),
+      ringSize: pointSize + (isSelected ? 10 : 5),
+      coreSize: isSelected ? Math.max(12, pointSize * 0.58) : Math.max(9, pointSize * 0.42),
+      selectedSize: pointSize + 16,
+      isSelected
+    }
+  })
+}
+
+function clearPointLayers() {
+  if (!scene.value || !pointLayers.value.length) return
+  pointLayers.value.forEach((layer) => {
+    scene.value.removeLayer(layer)
+  })
+  pointLayers.value = []
+}
+
+function createPointLayer(data, options) {
+  const layer = new PointLayer({
+    zIndex: options.zIndex,
+    name: options.name
+  })
+    .source(data, {
+      parser: {
+        type: 'json',
+        x: 'longitude',
+        y: 'latitude'
+      }
+    })
+    .shape(options.shape || 'circle')
+    .size(options.sizeField, (size) => size)
+
+  if (options.colorField) {
+    layer.color(options.colorField, (color) => color)
+  } else {
+    layer.color(options.color)
+  }
+
+  layer.style(options.style)
+
+  if (options.animate) {
+    layer.animate(options.animate)
+  }
+  scene.value.addLayer(layer)
+  pointLayers.value.push(layer)
+  return layer
+}
+
+function renderPointLayers(options = {}) {
+  if (!scene.value || !mapReady.value) return
+  clearPointLayers()
+
+  const data = mapPointData()
+  if (!data.length) return
+
+  const haloLayer = createPointLayer(data, {
+    zIndex: 18,
+    name: 'accountDealLocationPointHalo',
+    sizeField: 'haloSize',
+    colorField: 'pointColor',
+    style: {
+      opacity: 0.28,
+      strokeWidth: 0,
+      blur: 0.7
+    },
+    animate: {
+      enable: true,
+      speed: 0.6,
+      rings: 3
+    }
+  })
+  haloLayer.on('click', (event) => {
+    selectPoint(event.feature)
+  })
+
+  const ringLayer = createPointLayer(data, {
+    zIndex: 20,
+    name: 'accountDealLocationPointRing',
+    sizeField: 'ringSize',
+    colorField: 'pointColor',
+    style: {
+      opacity: 0.78,
+      strokeWidth: 3,
+      stroke: '#dff7ff',
+      strokeOpacity: 0.82,
+      blur: 0.18
+    }
+  })
+  ringLayer.on('click', (event) => {
+    selectPoint(event.feature)
+  })
+
+  const coreLayer = createPointLayer(data, {
+    zIndex: 22,
+    name: 'accountDealLocationPointCore',
+    sizeField: 'coreSize',
+    colorField: 'pointColor',
+    style: {
+      opacity: 0.96,
+      strokeWidth: 2,
+      stroke: '#ffffff',
+      strokeOpacity: 0.95,
+      blur: 0.08
+    }
+  })
+  coreLayer.active({
+    color: '#ffffff',
+    mix: 0.35
+  })
+  coreLayer.on('click', (event) => {
+    selectPoint(event.feature)
+  })
+
+  const selectedData = data.filter((item) => item.isSelected)
+  if (selectedData.length) {
+    const selectedLayer = createPointLayer(selectedData, {
+      zIndex: 24,
+      name: 'accountDealLocationPointSelected',
+      sizeField: 'selectedSize',
+      color: '#67e8f9',
+      style: {
+        opacity: 0.5,
+        strokeWidth: 3,
+        stroke: '#ffffff',
+        strokeOpacity: 0.9,
+        blur: 0.35
+      },
+      animate: {
+        enable: true,
+        speed: 0.8,
+        rings: 2
+      }
+    })
+    selectedLayer.on('click', (event) => {
+      selectPoint(event.feature)
+    })
+  }
+
+  if (options.fitFirst !== false) {
+    const firstPoint = data[0]
+    scene.value.setCenter([Number(firstPoint.longitude), Number(firstPoint.latitude)])
+    scene.value.setZoom(12)
+  }
+}
+
+function initDarkBaseLayer(mapScene) {
+  if (darkBaseLayerReady) return
+  darkBaseLayerReady = true
+
+  layerUrl.forEach((item, index) => {
+    const layer = new RasterLayer({
+      zIndex: index,
+      name: item.name
+    })
+      .source(item.url, {
+        parser: {
+          type: 'rasterTile',
+          tileSize: 256
+        }
+      })
+      .style({
+        opacity: item.name === 'title' ? 0.82 : 0.68
+      })
+    mapScene.addLayer(layer)
+  })
+
+  const maskLayer = new PolygonLayer({
+    zIndex: 8,
+    name: 'accountDealLocationDarkMask'
+  })
+    .source(darkMapMaskData)
+    .shape('fill')
+    .color('#03111f')
+    .style({
+      opacity: 0.64
+    })
+  mapScene.addLayer(maskLayer)
+}
+
+function clearPopup() {
+  if (scene.value && popup.value) {
+    scene.value.removePopup(popup.value)
+    popup.value = null
+  }
+}
+
+function showPointPopup(point) {
+  if (!scene.value || !point) return
+  clearPopup()
+  const locationName = escapeHtml(point.locationName || '未命名地点')
+  const locationAddress = escapeHtml(point.locationAddress || '')
+  popup.value = new Popup({
+    offsets: [0, 18],
+    closeButton: false
+  }).setLnglat([Number(point.longitude), Number(point.latitude)]).setHTML(`
+      <div class="location-popup">
+        <div class="location-popup-head">
+          <span class="location-popup-kicker">消费点位</span>
+          <strong class="location-popup-title">${locationName}</strong>
+        </div>
+        <div class="location-popup-metrics">
+          <div>
+            <span>消费金额</span>
+            <strong>${formatMoney(point.totalAmount)}</strong>
+          </div>
+          <div>
+            <span>交易笔数</span>
+            <strong>${point.dealCount || 0}</strong>
+          </div>
+        </div>
+        <div class="location-popup-address">${locationAddress || '暂无地址'}</div>
+      </div>
+    `)
+  scene.value.addPopup(popup.value)
+}
+
+async function initScreenMap() {
+  scene.value = await initMap('accountDealLocationMap', {
+    ...mapConfig,
+    zoom: 11
+  })
+  scene.value.on('loaded', () => {
+    mapReady.value = true
+    initDarkBaseLayer(scene.value)
+    renderPointLayers()
+  })
+  if (scene.value.loaded) {
+    mapReady.value = true
+    initDarkBaseLayer(scene.value)
+    renderPointLayers()
+  }
+}
+
+onMounted(async () => {
+  await initScreenMap()
+  await loadAccounts()
+  await loadScreenData()
+})
+
+onBeforeUnmount(() => {
+  clearPointLayers()
+  if (scene.value) {
+    scene.value.destroy()
+    scene.value = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.location-screen {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  color: #f5f7fa;
+  background: #040b14;
+}
+
+.screen-map {
+  position: absolute;
+  inset: 0;
+  background: #040b14;
+}
+
+.screen-header,
+.summary-panel,
+.side-panel,
+.screen-loading {
+  position: relative;
+  z-index: 2;
+}
+
+.screen-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 78px;
+  padding: 14px 18px;
+  background: rgba(8, 20, 32, 0.88);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
+  backdrop-filter: blur(8px);
+}
+
+.screen-heading {
+  flex: 0 0 auto;
+}
+
+.screen-title {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.screen-subtitle {
+  margin-top: 6px;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 13px;
+}
+
+.screen-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+  max-width: min(1180px, calc(100vw - 330px));
+}
+
+.screen-actions :deep(.el-input__wrapper),
+.screen-actions :deep(.el-select__wrapper) {
+  min-height: 34px;
+  color: #dff7ff;
+  background: rgba(3, 15, 28, 0.68);
+  border: 1px solid rgba(103, 232, 249, 0.32);
+  border-radius: 4px;
+  box-shadow: inset 0 0 18px rgba(14, 165, 233, 0.12), 0 0 14px rgba(8, 145, 178, 0.08);
+}
+
+.screen-actions :deep(.el-input__wrapper:hover),
+.screen-actions :deep(.el-select__wrapper:hover),
+.screen-actions :deep(.el-input__wrapper.is-focus),
+.screen-actions :deep(.el-select__wrapper.is-focused) {
+  border-color: rgba(45, 212, 191, 0.78);
+  box-shadow: inset 0 0 18px rgba(20, 184, 166, 0.16), 0 0 18px rgba(45, 212, 191, 0.18);
+}
+
+.screen-actions :deep(.el-input__inner),
+.screen-actions :deep(.el-range-input),
+.screen-actions :deep(.el-select__placeholder),
+.screen-actions :deep(.el-select__selected-item),
+.screen-actions :deep(.el-range-separator) {
+  color: #e0faff;
+}
+
+.screen-actions :deep(.el-range-input::placeholder),
+.screen-actions :deep(.el-input__inner::placeholder) {
+  color: rgba(186, 230, 253, 0.62);
+}
+
+.screen-actions :deep(.el-input__prefix),
+.screen-actions :deep(.el-input__suffix),
+.screen-actions :deep(.el-select__caret),
+.screen-actions :deep(.el-range__icon),
+.screen-actions :deep(.el-range__close-icon) {
+  color: rgba(125, 211, 252, 0.88);
+}
+
+.screen-btn {
+  height: 34px;
+  min-width: 72px;
+  padding: 0 14px;
+  color: #dff7ff;
+  font-weight: 700;
+  background: rgba(3, 15, 28, 0.66);
+  border: 1px solid rgba(103, 232, 249, 0.34);
+  border-radius: 4px;
+  box-shadow: inset 0 0 14px rgba(14, 165, 233, 0.16);
+}
+
+.screen-action-group {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.screen-action-group :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+
+.screen-btn:hover,
+.screen-btn:focus {
+  color: #ffffff;
+  border-color: rgba(45, 212, 191, 0.86);
+  background: rgba(13, 148, 136, 0.34);
+  box-shadow: 0 0 18px rgba(45, 212, 191, 0.2), inset 0 0 18px rgba(45, 212, 191, 0.18);
+}
+
+.screen-btn-primary {
+  color: #06121e;
+  background: linear-gradient(135deg, #67e8f9 0%, #2dd4bf 100%);
+  border-color: rgba(103, 232, 249, 0.86);
+  box-shadow: 0 0 18px rgba(45, 212, 191, 0.24);
+}
+
+.screen-btn-primary:hover,
+.screen-btn-primary:focus {
+  color: #06121e;
+  background: linear-gradient(135deg, #a5f3fc 0%, #5eead4 100%);
+}
+
+.filter-date {
+  width: 246px;
+}
+
+.filter-select {
+  width: 128px;
+}
+
+.filter-account {
+  width: 230px;
+}
+
+.summary-panel {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(130px, 1fr));
+  gap: 10px;
+  width: min(760px, calc(100vw - 36px));
+  margin: 14px auto 0;
+}
+
+.summary-card,
+.side-panel {
+  background: rgba(8, 20, 32, 0.86);
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
+  backdrop-filter: blur(8px);
+}
+
+.summary-card {
+  min-height: 78px;
+  padding: 14px 16px;
+  border-radius: 6px;
+}
+
+.summary-card span {
+  display: block;
+  margin-bottom: 8px;
+  color: rgba(226, 232, 240, 0.68);
+  font-size: 13px;
+}
+
+.summary-card strong {
+  font-size: 24px;
+  color: #f8fafc;
+}
+
+.side-panel {
+  position: absolute;
+  top: 178px;
+  bottom: 18px;
+  width: 360px;
+  padding: 16px;
+  min-height: 0;
+  border-radius: 6px;
+}
+
+.side-panel-left {
+  display: flex;
+  flex-direction: column;
+  left: 18px;
+}
+
+.side-panel-right {
+  display: flex;
+  flex-direction: column;
+  right: 18px;
+  width: 410px;
+}
+
+.panel-title {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.panel-title small {
+  overflow: hidden;
+  max-width: 210px;
+  color: rgba(226, 232, 240, 0.64);
+  font-size: 12px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rank-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.rank-item {
+  display: grid;
+  grid-template-columns: 28px 1fr 92px;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-height: 62px;
+  padding: 10px;
+  color: #f8fafc;
+  text-align: left;
+  cursor: pointer;
+  background: rgba(15, 23, 42, 0.7);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 6px;
+}
+
+.rank-item:hover,
+.rank-item.active {
+  border-color: rgba(45, 212, 191, 0.86);
+  background: rgba(15, 118, 110, 0.3);
+}
+
+.rank-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  color: #06121e;
+  font-weight: 700;
+  background: #67e8f9;
+  border-radius: 50%;
+}
+
+.rank-info {
+  min-width: 0;
+}
+
+.rank-name,
+.rank-address {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rank-name {
+  font-weight: 700;
+}
+
+.rank-address {
+  margin-top: 6px;
+  color: rgba(226, 232, 240, 0.58);
+  font-size: 12px;
+}
+
+.rank-value {
+  text-align: right;
+}
+
+.rank-value strong,
+.rank-value em {
+  display: block;
+}
+
+.rank-value strong {
+  font-size: 14px;
+}
+
+.rank-value em {
+  margin-top: 6px;
+  color: rgba(226, 232, 240, 0.62);
+  font-style: normal;
+  font-size: 12px;
+}
+
+.selected-info {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: hidden;
+  margin-bottom: 10px;
+  padding: 11px;
+  color: rgba(226, 232, 240, 0.76);
+  background: linear-gradient(135deg, rgba(8, 47, 73, 0.88), rgba(15, 23, 42, 0.74));
+  border: 1px solid rgba(103, 232, 249, 0.26);
+  border-radius: 6px;
+  box-shadow: inset 0 0 24px rgba(14, 165, 233, 0.12), 0 0 18px rgba(14, 165, 233, 0.08);
+}
+
+.selected-info::before {
+  position: absolute;
+  top: 0;
+  left: 12px;
+  right: 12px;
+  height: 1px;
+  content: '';
+  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.86), transparent);
+}
+
+.selected-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 124px;
+  gap: 8px;
+  align-items: stretch;
+}
+
+.selected-copy,
+.selected-amount {
+  min-width: 0;
+}
+
+.selected-kicker,
+.selected-amount span,
+.selected-address span,
+.selected-stat-grid span {
+  display: block;
+  color: rgba(186, 230, 253, 0.58);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.selected-copy strong {
+  display: block;
+  margin-top: 5px;
+  overflow: hidden;
+  color: #f8fafc;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-amount {
+  padding: 8px 9px;
+  text-align: right;
+  background: rgba(3, 15, 28, 0.32);
+  border: 1px solid rgba(125, 211, 252, 0.14);
+  border-radius: 4px;
+}
+
+.selected-amount strong {
+  display: block;
+  margin-top: 5px;
+  overflow: hidden;
+  color: #67e8f9;
+  font-size: 20px;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-shadow: 0 0 14px rgba(103, 232, 249, 0.34);
+}
+
+.selected-address {
+  margin-top: 8px;
+  padding: 7px 8px;
+  background: rgba(15, 23, 42, 0.44);
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  border-radius: 4px;
+}
+
+.selected-address strong {
+  display: block;
+  margin-top: 5px;
+  overflow: hidden;
+  color: rgba(226, 232, 240, 0.8);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.55;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px;
+  margin-top: 8px;
+}
+
+.selected-stat-grid div {
+  min-width: 0;
+  padding: 7px 8px;
+  background: rgba(14, 165, 233, 0.1);
+  border: 1px solid rgba(125, 211, 252, 0.14);
+  border-radius: 4px;
+}
+
+.selected-stat-grid strong {
+  display: block;
+  margin-top: 5px;
+  overflow: hidden;
+  color: rgba(224, 250, 255, 0.88);
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-stat-wide {
+  grid-column: 1 / -1;
+}
+
+.detail-section {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-section-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+  color: rgba(224, 250, 255, 0.88);
+  font-size: 13px;
+}
+
+.detail-section-head span {
+  font-weight: 700;
+}
+
+.detail-section-head em {
+  color: rgba(186, 230, 253, 0.58);
+  font-style: normal;
+  font-size: 12px;
+}
+
+.detail-list {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow: auto;
+  padding: 2px 4px 16px 0;
+}
+
+.detail-card {
+  position: relative;
+  min-width: 0;
+  padding: 10px 11px 10px 13px;
+  background: rgba(8, 20, 32, 0.72);
+  border: 1px solid rgba(125, 211, 252, 0.14);
+  border-radius: 6px;
+  box-shadow: inset 3px 0 0 rgba(45, 212, 191, 0.38);
+}
+
+.detail-card:hover {
+  border-color: rgba(45, 212, 191, 0.42);
+  background: rgba(8, 47, 73, 0.62);
+}
+
+.detail-row-main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.detail-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+
+.detail-index {
+  flex: 0 0 auto;
+  min-width: 24px;
+  color: rgba(103, 232, 249, 0.42);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.detail-title strong {
+  min-width: 0;
+  overflow: hidden;
+  color: #f8fafc;
+  font-size: 13px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.deal-type-tag {
+  flex: 0 0 auto;
+  display: inline-flex;
+  padding: 2px 6px;
+  color: rgba(224, 250, 255, 0.78);
+  font-size: 12px;
+  font-style: normal;
+  line-height: 1.25;
+  background: rgba(45, 212, 191, 0.12);
+  border: 1px solid rgba(45, 212, 191, 0.18);
+  border-radius: 4px;
+}
+
+.deal-type-income {
+  color: #bbf7d0;
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(74, 222, 128, 0.2);
+}
+
+.deal-type-expense {
+  color: #bae6fd;
+  background: rgba(14, 165, 233, 0.14);
+  border-color: rgba(125, 211, 252, 0.2);
+}
+
+.deal-type-transfer {
+  color: #fde68a;
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(251, 191, 36, 0.2);
+}
+
+.detail-amount {
+  flex: 0 0 auto;
+  color: #67e8f9;
+  font-size: 17px;
+  line-height: 1.1;
+  text-align: right;
+  white-space: nowrap;
+  text-shadow: 0 0 14px rgba(103, 232, 249, 0.38);
+}
+
+.detail-amount-income {
+  color: #86efac;
+  text-shadow: 0 0 14px rgba(74, 222, 128, 0.28);
+}
+
+.detail-amount-expense {
+  color: #67e8f9;
+}
+
+.detail-amount-transfer {
+  color: #fcd34d;
+  text-shadow: 0 0 14px rgba(251, 191, 36, 0.24);
+}
+
+.detail-meta-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  margin-top: 8px;
+  overflow: hidden;
+}
+
+.detail-meta-line span {
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  color: rgba(226, 232, 240, 0.62);
+  font-size: 12px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-meta-line span + span::before {
+  margin-right: 10px;
+  color: rgba(103, 232, 249, 0.3);
+  content: '/';
+}
+
+.detail-remark {
+  margin-top: 8px;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.screen-loading {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 18px;
+  color: #e0f2fe;
+  background: rgba(8, 20, 32, 0.86);
+  border: 1px solid rgba(125, 211, 252, 0.38);
+  border-radius: 6px;
+  transform: translate(-50%, -50%);
+}
+
+:global(.screen-filter-popper) {
+  background: rgba(3, 15, 28, 0.96) !important;
+  border: 1px solid rgba(103, 232, 249, 0.28) !important;
+  border-radius: 6px !important;
+  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36), 0 0 20px rgba(14, 165, 233, 0.14) !important;
+}
+
+:global(.screen-filter-popper .el-popper__arrow::before) {
+  background: rgba(3, 15, 28, 0.96) !important;
+  border-color: rgba(103, 232, 249, 0.28) !important;
+}
+
+:global(.screen-filter-popper .el-select-dropdown__item) {
+  color: rgba(224, 250, 255, 0.82);
+}
+
+:global(.screen-filter-popper .el-select-dropdown__item.hover),
+:global(.screen-filter-popper .el-select-dropdown__item:hover),
+:global(.screen-filter-popper .el-select-dropdown__item.selected) {
+  color: #67e8f9;
+  background: rgba(14, 165, 233, 0.18);
+}
+
+:global(.screen-filter-popper .el-picker-panel),
+:global(.screen-filter-popper .el-date-range-picker),
+:global(.screen-filter-popper .el-picker-panel__sidebar) {
+  color: #dff7ff;
+  background: transparent;
+}
+
+:global(.screen-filter-popper .el-date-table th),
+:global(.screen-filter-popper .el-date-table td),
+:global(.screen-filter-popper .el-picker-panel__icon-btn),
+:global(.screen-filter-popper .el-date-range-picker__header),
+:global(.screen-filter-popper .el-date-range-picker__header div) {
+  color: rgba(224, 250, 255, 0.82);
+}
+
+:global(.screen-filter-popper .el-date-table td.available:hover),
+:global(.screen-filter-popper .el-date-table td.today .el-date-table-cell__text) {
+  color: #67e8f9;
+}
+
+:global(.l7-popup .l7-popup-tip) {
+  display: none !important;
+}
+
+:global(.l7-popup .l7-popup-content) {
+  padding: 0 !important;
+  overflow: visible !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+}
+
+:global(.location-popup) {
+  position: relative;
+  width: 260px;
+  padding: 14px;
+  color: #e0faff;
+  background: linear-gradient(145deg, rgba(3, 15, 28, 0.96), rgba(8, 47, 73, 0.9));
+  border: 1px solid rgba(103, 232, 249, 0.38);
+  border-radius: 6px;
+  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 24px rgba(14, 165, 233, 0.22), inset 0 0 22px rgba(14, 165, 233, 0.12);
+}
+
+:global(.location-popup::after) {
+  position: absolute;
+  left: 50%;
+  bottom: -7px;
+  width: 12px;
+  height: 12px;
+  content: '';
+  background: rgba(8, 47, 73, 0.96);
+  border-right: 1px solid rgba(103, 232, 249, 0.38);
+  border-bottom: 1px solid rgba(103, 232, 249, 0.38);
+  transform: translateX(-50%) rotate(45deg);
+}
+
+:global(.location-popup-head) {
+  min-width: 0;
+}
+
+:global(.location-popup-kicker) {
+  display: block;
+  margin-bottom: 4px;
+  color: rgba(125, 211, 252, 0.68);
+  font-size: 12px;
+}
+
+:global(.location-popup-title) {
+  display: block;
+  overflow: hidden;
+  color: #ffffff;
+  font-size: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:global(.location-popup-metrics) {
+  display: grid;
+  grid-template-columns: 1fr 78px;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+:global(.location-popup-metrics div) {
+  padding: 8px;
+  background: rgba(14, 165, 233, 0.12);
+  border: 1px solid rgba(125, 211, 252, 0.18);
+  border-radius: 4px;
+}
+
+:global(.location-popup-metrics span) {
+  display: block;
+  color: rgba(224, 250, 255, 0.66);
+  font-size: 12px;
+}
+
+:global(.location-popup-metrics strong) {
+  display: block;
+  margin-top: 4px;
+  color: #67e8f9;
+  font-size: 17px;
+}
+
+:global(.location-popup-address) {
+  margin-top: 10px;
+  color: rgba(226, 232, 240, 0.76);
+  font-size: 12px;
+  line-height: 1.6;
+  word-break: break-all;
+}
+
+@media (max-width: 1180px) {
+  .screen-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .screen-actions {
+    justify-content: flex-start;
+    max-width: 100%;
+  }
+
+  .side-panel {
+    width: 320px;
+  }
+}
+
+@media (max-width: 900px) {
+  .summary-panel {
+    grid-template-columns: repeat(2, minmax(130px, 1fr));
+  }
+
+  .side-panel {
+    position: relative;
+    top: auto;
+    bottom: auto;
+    left: auto;
+    right: auto;
+    width: calc(100% - 36px);
+    min-height: 360px;
+    max-height: none;
+    margin: 14px 18px;
+  }
+
+  .rank-list,
+  .detail-list {
+    max-height: 420px;
+  }
+}
+
+@media (max-width: 520px) {
+  .detail-row-main {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 7px;
+  }
+
+  .detail-amount {
+    justify-self: start;
+    text-align: left;
+  }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index 5b9e93d..a48d9ff 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -42,8 +42,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-           target: 'https://www.qdintc.com/prod-api/',
-          // target: 'http://127.0.0.1:8080',
+          //  target: 'https://www.qdintc.com/prod-api/',
+          target: 'http://127.0.0.1:8080',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         },