verce-vue-test 0.0.19 → 0.0.21

package/src/views/ExecutiveManagementView/components/ExecutiveReliablePanel.vue

@@ -1,29 +1,100 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'
-import { ringOption, sparkOption, useChartRegistry } from './chart'
+import * as echarts from 'echarts'
+import type { ECharts, EChartsOption } from 'echarts'
 
 const reliableChart = ref<HTMLElement>()
 const pressureChart = ref<HTMLElement>()
 const trendChart = ref<HTMLElement>()
 const pressureTrendChart = ref<HTMLElement>()
-const { panelChart, mountCharts } = useChartRegistry()
+const charts: ECharts[] = []
 
-onMounted(() => {
-  mountCharts(() => {
-    panelChart(reliableChart.value, ringOption('低靠', [
+function createChart(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())
+}
+
+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,
+      },
+    ],
+  }
+}
+
+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 },
+      },
+    ],
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  createChart(
+    reliableChart.value,
+    ringOption('低靠', [
       { value: 65, name: '巨靠系数', itemStyle: { color: '#1267f2' } },
       { value: 35, name: '其他', itemStyle: { color: '#e7f0ff' } },
-    ]))
+    ]),
+  )
 
-    panelChart(pressureChart.value, ringOption('逾期概率', [
+  createChart(
+    pressureChart.value,
+    ringOption('逾期概率', [
       { value: 34, name: '高压力', itemStyle: { color: '#18c7c0' } },
       { value: 66, name: '低压力', itemStyle: { color: '#1267f2' } },
-    ]))
+    ]),
+  )
+
+  createChart(trendChart.value, sparkOption([15, 34, 18, 8, 27, 55, 36, 48]))
+  createChart(pressureTrendChart.value, sparkOption([12, 24, 18, 49, 62, 30, 52, 72]))
+
+  window.addEventListener('resize', resizeCharts)
+})
 
-    panelChart(trendChart.value, sparkOption([15, 34, 18, 8, 27, 55, 36, 48]))
-    panelChart(pressureTrendChart.value, sparkOption([12, 24, 18, 49, 62, 30, 52, 72]))
-  })
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeCharts)
+  charts.forEach((chart) => chart.dispose())
 })
 </script>
 
@@ -69,3 +140,252 @@ onMounted(() => {
     </div>
   </article>
 </template>
+
+<style scoped>
+.reliable-board {
+  --blue: #1267f2;
+  --line: #dce4ef;
+  min-width: 0;
+  height: calc(100vh - 190px);
+  min-height: 700px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, .96);
+  border-radius: 10px;
+  box-shadow: 0 10px 22px rgba(34, 67, 123, .16);
+}
+
+.board-head {
+  height: 38px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.board-head h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  line-height: 1.1;
+  font-weight: 900;
+}
+
+.board-head h2 span {
+  width: 13px;
+  height: 14px;
+  border-radius: 4px;
+  background: var(--blue);
+  box-shadow: inset 0 0 4px rgba(255, 255, 255, .35);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  color: #6c7480;
+  font-size: 15px;
+}
+
+.actions button {
+  height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  border: 0;
+  background: transparent;
+  color: #6c7480;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.actions button.active {
+  padding: 0 13px;
+  border-radius: 14px;
+  background: var(--blue);
+  color: #fff;
+}
+
+.reliable-layout {
+  display: grid;
+  flex: 1;
+  margin-top: 8px;
+  gap: 12px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.metric-box {
+  min-width: 0;
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+}
+
+.metric-box h3 {
+  position: absolute;
+  left: 18px;
+  top: 18px;
+  z-index: 1;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.ring {
+  position: absolute;
+  left: 35%;
+  top: 53%;
+  width: min(56%, 330px);
+  height: min(72%, 330px);
+  transform: translate(-50%, -50%);
+}
+
+.legend-list {
+  position: absolute;
+  top: 50%;
+  right: 9%;
+  transform: translateY(-55%);
+  display: grid;
+  gap: 18px;
+  list-style: none;
+}
+
+.legend-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #56606d;
+  font-size: 15px;
+  white-space: nowrap;
+}
+
+.legend-list b {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--blue);
+}
+
+.deep {
+  background: #1667e8 !important;
+}
+
+.sky {
+  background: #58aef7 !important;
+}
+
+.green {
+  background: #18c7c0 !important;
+}
+
+.pale {
+  background: #aeeeff !important;
+}
+
+.orange {
+  background: #ff9f13 !important;
+}
+
+.pressure {
+  right: 60px;
+}
+
+.mini-strip {
+  grid-column: 1 / -1;
+  height: 100%;
+  min-height: 130px;
+  display: grid;
+  grid-template-columns: 1.1fr .65fr 1.35fr 1.45fr .7fr 1.35fr;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+}
+
+.mini-strip > div {
+  padding: 18px;
+  border-right: 1px solid #e4e9f0;
+}
+
+.mini-strip > div:last-child {
+  border-right: 0;
+}
+
+.mini-strip p {
+  color: #4d5868;
+  font-size: 14px;
+}
+
+.mini-strip strong {
+  display: block;
+  margin-top: 18px;
+  font-size: 25px;
+  font-weight: 900;
+}
+
+.blue-text {
+  color: var(--blue) !important;
+}
+
+.mini-strip em {
+  color: #14a77c;
+  font-style: normal;
+}
+
+.spark {
+  width: min(92%, 260px);
+  height: 84px;
+  margin-top: 13px;
+}
+
+@media (max-width: 1200px) {
+  .reliable-board {
+    height: auto;
+  }
+
+  .reliable-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-box {
+    min-height: 253px;
+  }
+
+  .mini-strip {
+    grid-template-columns: repeat(3, 1fr);
+    height: auto;
+  }
+
+  .mini-strip > div {
+    min-height: 72px;
+  }
+}
+
+@media (max-width: 720px) {
+  .actions {
+    gap: 10px;
+  }
+
+  .board-head {
+    height: auto;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
+
+  .reliable-layout {
+    gap: 10px;
+  }
+
+  .legend-list {
+    right: 16px;
+  }
+
+  .mini-strip {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/views/ExecutiveManagementView/components/ExecutiveWarningOverview.vue

@@ -1,15 +1,65 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import { ArrowDown, Minus, RefreshRight, Setting } from '@element-plus/icons-vue'
-import { chartGradient, lineOption, useChartRegistry } from './chart'
+import * as echarts from 'echarts'
+import type { ECharts, EChartsOption } from 'echarts'
 
 const scaleChart = ref<HTMLElement>()
 const gapChart = ref<HTMLElement>()
-const { panelChart, mountCharts } = useChartRegistry()
+const charts: ECharts[] = []
 
-onMounted(() => {
-  mountCharts(() => {
-    panelChart(scaleChart.value, lineOption([
+function createChart(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())
+}
+
+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,
+  }
+}
+
+function chartGradient(start: string, end: string) {
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    { offset: 0, color: start },
+    { offset: 1, color: end },
+  ])
+}
+
+onMounted(async () => {
+  await nextTick()
+  createChart(scaleChart.value, lineOption([
       {
         name: '日头寸规模',
         type: 'line',
@@ -31,7 +81,7 @@ onMounted(() => {
       },
     ]))
 
-    panelChart(gapChart.value, lineOption([
+  createChart(gapChart.value, lineOption([
       {
         name: '资金缺口',
         type: 'line',
@@ -54,7 +104,13 @@ onMounted(() => {
         },
       },
     ], -100, 200))
-  })
+
+  window.addEventListener('resize', resizeCharts)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeCharts)
+  charts.forEach((chart) => chart.dispose())
 })
 </script>
 
@@ -92,3 +148,201 @@ onMounted(() => {
     </div>
   </article>
 </template>
+
+<style scoped>
+.warning-board {
+  --blue: #1267f2;
+  --line: #dce4ef;
+  min-width: 0;
+  height: calc(100vh - 190px);
+  min-height: 700px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, .96);
+  border-radius: 10px;
+  box-shadow: 0 10px 22px rgba(34, 67, 123, .16);
+}
+
+.board-head {
+  height: 38px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.board-head h2 {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  line-height: 1.1;
+  font-weight: 900;
+}
+
+.board-head h2 span {
+  width: 13px;
+  height: 14px;
+  border-radius: 4px;
+  background: var(--blue);
+  box-shadow: inset 0 0 4px rgba(255, 255, 255, .35);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  color: #6c7480;
+  font-size: 15px;
+}
+
+.actions button {
+  height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  border: 0;
+  background: transparent;
+  color: #6c7480;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.warning-layout {
+  display: grid;
+  flex: 1;
+  margin-top: 8px;
+  gap: 12px;
+  grid-template-columns: 1.05fr .9fr;
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.chart-box {
+  min-width: 0;
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+}
+
+.chart-box h3 {
+  position: absolute;
+  left: 18px;
+  top: 18px;
+  z-index: 1;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.chart-box small {
+  position: absolute;
+  left: 18px;
+  top: 56px;
+  z-index: 1;
+  color: #232a33;
+  font-size: 12px;
+}
+
+.line-chart {
+  position: absolute;
+  inset: 72px 22px 22px 18px;
+}
+
+.stat-strip {
+  grid-column: 1 / -1;
+  min-height: 110px;
+  display: grid;
+  grid-template-columns: .8fr .7fr .8fr .8fr .8fr .8fr .8fr;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+}
+
+.stat-strip > div {
+  min-height: 50px;
+  padding-left: 17px;
+  border-right: 1px solid #dce4ef;
+}
+
+.stat-strip > div:last-child {
+  border-right: 0;
+}
+
+.stat-strip p {
+  color: #4d5868;
+  font-size: 14px;
+}
+
+.stat-strip strong,
+.stat-strip b {
+  display: block;
+  margin-top: 8px;
+  font-size: 21px;
+  font-weight: 900;
+}
+
+.blue-text {
+  color: var(--blue) !important;
+}
+
+em {
+  color: #10b990;
+  font-style: normal;
+}
+
+.tiny-bar {
+  display: block;
+  width: 64px;
+  height: 8px;
+  margin-top: 7px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, var(--blue) 0 56%, #e7ebf0 56%);
+}
+
+@media (max-width: 1200px) {
+  .warning-board {
+    height: auto;
+  }
+
+  .warning-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .chart-box {
+    min-height: 253px;
+  }
+
+  .stat-strip {
+    grid-template-columns: repeat(3, 1fr);
+    height: auto;
+  }
+
+  .stat-strip > div {
+    min-height: 72px;
+  }
+}
+
+@media (max-width: 720px) {
+  .actions {
+    gap: 10px;
+  }
+
+  .board-head {
+    height: auto;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
+
+  .warning-layout {
+    gap: 10px;
+  }
+
+  .stat-strip {
+    grid-template-columns: 1fr;
+  }
+}
+</style>