verce-vue-test 0.0.11 → 0.0.13

package/src/components/executive/ExecutiveAccountPanel.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'
+import { ringOption, useChartRegistry } from './chart'
+
+const balanceChart = ref<HTMLElement>()
+const quotaChart = ref<HTMLElement>()
+const { panelChart, mountCharts } = useChartRegistry()
+
+onMounted(() => {
+  mountCharts(() => {
+    panelChart(balanceChart.value, ringOption('55%', [
+      { value: 55, name: '账户余额', itemStyle: { color: '#1267f2' } },
+      { value: 45, name: '其他', itemStyle: { color: '#e7f0ff' } },
+    ]))
+
+    panelChart(quotaChart.value, {
+      color: ['#1267f2', '#0b55d9', '#57aaf7', '#bfeeff'],
+      series: [
+        {
+          type: 'pie',
+          radius: '75%',
+          center: ['50%', '51%'],
+          label: { show: false },
+          labelLine: { show: false },
+          itemStyle: { borderColor: '#fff', borderWidth: 2 },
+          data: [
+            { value: 36.6, name: '国库集中支付' },
+            { value: 39.8, name: '财政资金专户' },
+            { value: 23.6, name: '预算单位零余额' },
+            { value: 18, name: '其他客户' },
+          ],
+        },
+      ],
+    })
+  })
+})
+</script>
+
+<template>
+  <article class="board account-board">
+    <div class="board-head">
+      <h2><span></span>人行账户情况</h2>
+      <div class="actions">
+        <button>本月数据<el-icon><ArrowDown /></el-icon></button>
+        <el-icon><RefreshRight /></el-icon>
+        <el-icon><Setting /></el-icon>
+        <el-icon><Minus /></el-icon>
+      </div>
+    </div>
+    <div class="account-layout">
+      <div class="metric-box balance-box">
+        <h3>账户余额</h3>
+        <div ref="balanceChart" class="ring"></div>
+        <div class="balance-copy">
+          <p><b class="dot blue"></b>账户余额(亿)</p>
+          <strong>2.02.33</strong>
+          <p><b class="dot sky"></b>账户数量(个)</p>
+          <strong>23</strong>
+          <small>较上月 +8%</small>
+        </div>
+      </div>
+      <div class="metric-box quota-box">
+        <h3>可用额度</h3>
+        <div ref="quotaChart" class="pie"></div>
+        <ul class="quota-list">
+          <li><b></b>国库集中支付</li>
+          <li><b></b>财政资金专户</li>
+          <li><b></b>预算单位零余额</li>
+          <li><b></b>其他客户</li>
+          <li><b></b>保证金专户</li>
+          <li><b></b>待清算资金</li>
+        </ul>
+        <div class="pie-foot">
+          <span><b></b>16.48亿&nbsp;&nbsp;36.6%</span>
+          <span><b></b>18.63亿&nbsp;&nbsp;39.8%</span>
+          <span><b></b>11.57亿&nbsp;&nbsp;23.6%</span>
+        </div>
+      </div>
+      <div class="progress-box">
+        <div>
+          <p>账户总数(个)</p>
+          <strong>63</strong>
+        </div>
+        <b>6.29% <em>↑</em></b>
+        <div class="progress-line"><i></i><span>63</span></div>
+        <div class="scale-row">
+          <span>0</span><span>10</span><span>20</span><span>30</span><span>40</span><span>50</span>
+          <span>60</span><span>70</span><span>80</span><span>90</span><span>100</span>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>

package/src/components/executive/ExecutiveReliablePanel.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'
+import { ringOption, sparkOption, useChartRegistry } from './chart'
+
+const reliableChart = ref<HTMLElement>()
+const pressureChart = ref<HTMLElement>()
+const trendChart = ref<HTMLElement>()
+const pressureTrendChart = ref<HTMLElement>()
+const { panelChart, mountCharts } = useChartRegistry()
+
+onMounted(() => {
+  mountCharts(() => {
+    panelChart(reliableChart.value, ringOption('低靠', [
+      { value: 65, name: '巨靠系数', itemStyle: { color: '#1267f2' } },
+      { value: 35, name: '其他', itemStyle: { color: '#e7f0ff' } },
+    ]))
+
+    panelChart(pressureChart.value, ringOption('逾期概率', [
+      { value: 34, name: '高压力', itemStyle: { color: '#18c7c0' } },
+      { value: 66, name: '低压力', itemStyle: { color: '#1267f2' } },
+    ]))
+
+    panelChart(trendChart.value, sparkOption([15, 34, 18, 8, 27, 55, 36, 48]))
+    panelChart(pressureTrendChart.value, sparkOption([12, 24, 18, 49, 62, 30, 52, 72]))
+  })
+})
+</script>
+
+<template>
+  <article class="board reliable-board">
+    <div class="board-head">
+      <h2><span></span>头寸巨靠情况</h2>
+      <div class="actions">
+        <button class="active">本月数据<el-icon><ArrowDown /></el-icon></button>
+        <el-icon><RefreshRight /></el-icon>
+        <el-icon><Setting /></el-icon>
+        <el-icon><Minus /></el-icon>
+      </div>
+    </div>
+    <div class="reliable-layout">
+      <div class="metric-box">
+        <h3>巨靠结果</h3>
+        <div ref="reliableChart" class="ring"></div>
+        <ul class="legend-list">
+          <li><b class="blue"></b>极高靠(≥2.0)</li>
+          <li><b class="deep"></b>高靠(1.5-2.0)</li>
+          <li><b class="sky"></b>中靠(1.0-1.5)</li>
+          <li><b class="orange"></b>低靠(&lt;1.0)</li>
+        </ul>
+      </div>
+      <div class="metric-box">
+        <h3>流动性压力点</h3>
+        <div ref="pressureChart" class="ring"></div>
+        <ul class="legend-list pressure">
+          <li><b class="green"></b>高压力(≥70%)</li>
+          <li><b class="pale"></b>中压力(30%-70%)</li>
+          <li><b class="blue"></b>低压力(&lt;30%)</li>
+        </ul>
+      </div>
+      <div class="mini-strip">
+        <div><p>巨靠客户数(个)</p><strong>3566</strong></div>
+        <div><p>较上月</p><strong class="blue-text">0.1 <em>↓</em></strong></div>
+        <div><p>巨靠趋势(近7日)</p><div ref="trendChart" class="spark"></div></div>
+        <div><p>流动性缺口(万元)</p><strong>1025596</strong></div>
+        <div><p>较上月</p><strong class="blue-text">↑ 1.2%</strong></div>
+        <div><p>压力趋势(近7日)</p><div ref="pressureTrendChart" class="spark"></div></div>
+      </div>
+    </div>
+  </article>
+</template>

package/src/components/executive/ExecutiveWarningOverview.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'
+import { chartGradient, lineOption, useChartRegistry } from './chart'
+
+const scaleChart = ref<HTMLElement>()
+const gapChart = ref<HTMLElement>()
+const { panelChart, mountCharts } = useChartRegistry()
+
+onMounted(() => {
+  mountCharts(() => {
+    panelChart(scaleChart.value, lineOption([
+      {
+        name: '日头寸规模',
+        type: 'line',
+        smooth: false,
+        symbolSize: 8,
+        data: [120, 138, 91, 98, 88, 148],
+        lineStyle: { color: '#1267f2', width: 2 },
+        itemStyle: { color: '#1267f2' },
+        areaStyle: {
+          color: chartGradient('rgba(18, 103, 242, .28)', 'rgba(18, 103, 242, .02)'),
+        },
+      },
+      {
+        name: '最优头寸',
+        type: 'line',
+        symbol: 'none',
+        data: [120, 138, 91, 98, 88, 148],
+        lineStyle: { color: '#1267f2', width: 1, opacity: 0 },
+      },
+    ]))
+
+    panelChart(gapChart.value, lineOption([
+      {
+        name: '资金缺口',
+        type: 'line',
+        smooth: true,
+        symbolSize: 8,
+        data: [-18, 18, 62, 165, 122, 130],
+        lineStyle: { color: '#16c5aa', width: 2 },
+        itemStyle: { color: '#16c5aa' },
+      },
+      {
+        name: '累计缺口',
+        type: 'line',
+        smooth: true,
+        symbolSize: 8,
+        data: [-65, -25, 60, 165, 120, 128],
+        lineStyle: { color: '#1267f2', width: 2 },
+        itemStyle: { color: '#1267f2' },
+        areaStyle: {
+          color: chartGradient('rgba(18, 103, 242, .25)', 'rgba(18, 103, 242, .03)'),
+        },
+      },
+    ], -100, 200))
+  })
+})
+</script>
+
+<template>
+  <article class="board warning-board">
+    <div class="board-head">
+      <h2><span></span>头寸预警总览</h2>
+      <div class="actions">
+        <button>本月数据<el-icon><ArrowDown /></el-icon></button>
+        <el-icon><RefreshRight /></el-icon>
+        <el-icon><Setting /></el-icon>
+        <el-icon><Minus /></el-icon>
+      </div>
+    </div>
+    <div class="warning-layout">
+      <div class="chart-box">
+        <h3>全行头寸规模</h3>
+        <small>(亿元)</small>
+        <div ref="scaleChart" class="line-chart"></div>
+      </div>
+      <div class="chart-box">
+        <h3>资金缺口</h3>
+        <small>(亿元)</small>
+        <div ref="gapChart" class="line-chart"></div>
+      </div>
+      <div class="stat-strip">
+        <div><p>预警客户数(个)</p><strong class="blue-text">83</strong></div>
+        <div><b>6.2% <em>↑</em></b></div>
+        <div><p>较上月</p><strong>79</strong></div>
+        <div><p>正常(个)</p><strong>76</strong></div>
+        <div><p>关注(个)</p><strong>-</strong></div>
+        <div><p>预警(个)</p><strong>19</strong></div>
+        <div><p>严重(个)</p><strong>-</strong><span class="tiny-bar"></span></div>
+      </div>
+    </div>
+  </article>
+</template>

package/src/components/executive/ExecutiveWarningTablePanel.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'
+
+const rows = [
+  ['1', '0101', '0101', '2024-05-21', '622', '462', '108', '42', '10', '572', '92.0'],
+  ['2', '0102', '0102', '2024-05-21', '518', '385', '93', '30', '10', '471', '90.9'],
+  ['3', '0103', '0103', '2024-05-21', '345', '262', '58', '18', '7', '310', '89.9'],
+  ['4', '0104', '0104', '2024-05-21', '287', '210', '45', '22', '10', '243', '84.7'],
+  ['5', '0105', '0105', '2024-05-21', '254', '192', '37', '17', '8', '210', '82.7'],
+  ['6', '0106', '0105', '2024-05-21', '198', '150', '28', '15', '5', '163', '82.3'],
+  ['7', '0107', '0103', '2024-05-21', '156', '118', '22', '12', '4', '125', '80.1'],
+]
+</script>
+
+<template>
+  <article class="board table-board">
+    <div class="board-head">
+      <h2><span></span>全行头寸预警信息累计清结表</h2>
+      <div class="actions">
+        <button class="active">本月数据<el-icon><ArrowDown /></el-icon></button>
+        <el-icon><RefreshRight /></el-icon>
+        <el-icon><Setting /></el-icon>
+        <el-icon><Minus /></el-icon>
+      </div>
+    </div>
+    <table class="warning-table">
+      <thead>
+        <tr>
+          <th rowspan="2">序号</th>
+          <th rowspan="2">机构编码</th>
+          <th rowspan="2">机构名称</th>
+          <th rowspan="2">预警日期</th>
+          <th colspan="5">全行预警信息累计总数</th>
+          <th rowspan="2">清结笔数</th>
+          <th rowspan="2">清结率(%)</th>
+        </tr>
+        <tr>
+          <th>总数</th>
+          <th>正常</th>
+          <th>关注</th>
+          <th>预警</th>
+          <th>严重预警</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row[0]">
+          <td v-for="cell in row" :key="cell">{{ cell }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="pager">
+      <span>共 35 条</span>
+      <button>‹</button>
+      <button class="selected">1</button>
+      <button>2</button>
+      <button>3</button>
+      <button>4</button>
+      <button>5</button>
+      <span>...</span>
+      <button>→</button>
+      <span>前往</span>
+      <input value="1" readonly>
+      <span>页</span>
+    </div>
+  </article>
+</template>

package/src/components/executive/chart.ts

@@ -0,0 +1,116 @@
+import { nextTick, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+import type { ECharts, EChartsOption } from 'echarts'
+
+export function useChartRegistry() {
+  const charts: ECharts[] = []
+
+  function panelChart(el: HTMLElement | undefined, option: EChartsOption) {
+    if (!el) return
+    const chart = echarts.init(el)
+    chart.setOption(option)
+    charts.push(chart)
+  }
+
+  function resizeCharts() {
+    charts.forEach((chart) => chart.resize())
+  }
+
+  async function mountCharts(render: () => void) {
+    await nextTick()
+    render()
+    window.addEventListener('resize', resizeCharts)
+  }
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', resizeCharts)
+    charts.forEach((chart) => chart.dispose())
+  })
+
+  return { panelChart, mountCharts }
+}
+
+export function ringOption(
+  centerText: string,
+  data: Array<{ value: number; name: string; itemStyle?: object }>,
+): EChartsOption {
+  return {
+    color: ['#1267f2', '#e7f0ff'],
+    animationDuration: 900,
+    title: {
+      text: centerText,
+      left: 'center',
+      top: '42%',
+      textStyle: { color: '#05070b', fontSize: 30, fontWeight: 800 },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['57%', '77%'],
+        center: ['50%', '51%'],
+        startAngle: 90,
+        avoidLabelOverlap: false,
+        label: { show: false },
+        labelLine: { show: false },
+        itemStyle: { borderColor: '#fff', borderWidth: 4 },
+        data,
+      },
+    ],
+  }
+}
+
+export function lineOption(series: echarts.SeriesOption[], yMin = 0, yMax = 200): EChartsOption {
+  return {
+    grid: { left: 56, right: 28, top: 46, bottom: 42 },
+    legend: {
+      top: 4,
+      right: 8,
+      icon: 'path://M0,4 L12,4',
+      itemWidth: 16,
+      itemHeight: 7,
+      textStyle: { color: '#6e7787', fontSize: 11 },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: ['05-15', '05-16', '05-17', '05-18', '05-20', '05-21'],
+      axisTick: { show: false },
+      axisLine: { lineStyle: { color: '#d6dde8' } },
+      axisLabel: { color: '#6b7280', fontSize: 12 },
+    },
+    yAxis: {
+      type: 'value',
+      min: yMin,
+      max: yMax,
+      splitNumber: 4,
+      axisLabel: { color: '#6b7280', fontSize: 12 },
+      splitLine: { lineStyle: { color: '#e7ecf3' } },
+    },
+    series,
+  }
+}
+
+export function sparkOption(values: number[]): EChartsOption {
+  return {
+    animationDuration: 700,
+    grid: { left: 2, right: 2, top: 8, bottom: 7 },
+    xAxis: { type: 'category', show: false, data: values.map((_, index) => index) },
+    yAxis: { type: 'value', show: false },
+    series: [
+      {
+        type: 'line',
+        data: values,
+        symbol: 'none',
+        smooth: false,
+        lineStyle: { color: '#1267f2', width: 2 },
+      },
+    ],
+  }
+}
+
+export function chartGradient(start: string, end: string) {
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: start },
+    { offset: 1, color: end },
+  ])
+}

package/src/router/index.ts

@@ -54,6 +54,12 @@ const router = createRouter({
       name: 'positionForecast',
       component: () => import('../views/PositionForecastView.vue'),
     },
+    {
+      path: '/position-forecast-execution',
+      name: 'positionForecastExecution',
+      meta: { fullscreen: true },
+      component: () => import('../views/PositionForecastExecutionView.vue'),
+    },
     {
       path: '/executive-management',
       name: 'executiveManagement',