verce-vue-test 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verce-vue-test",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
   "type": "module",
   "scripts": {

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

@@ -1,20 +1,64 @@
 <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, useChartRegistry } from './chart'
+import * as echarts from 'echarts'
+import type { ECharts, EChartsOption } from 'echarts'
 
 const balanceChart = ref<HTMLElement>()
 const quotaChart = ref<HTMLElement>()
-const { panelChart, mountCharts } = useChartRegistry()
+const charts: ECharts[] = []
 
-onMounted(() => {
-  mountCharts(() => {
-    panelChart(balanceChart.value, ringOption('55%', [
+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,
+      },
+    ],
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  createChart(
+    balanceChart.value,
+    ringOption('55%', [
       { value: 55, name: '账户余额', itemStyle: { color: '#1267f2' } },
       { value: 45, name: '其他', itemStyle: { color: '#e7f0ff' } },
-    ]))
+    ]),
+  )
 
-    panelChart(quotaChart.value, {
+  createChart(quotaChart.value, {
       color: ['#1267f2', '#0b55d9', '#57aaf7', '#bfeeff'],
       series: [
         {
@@ -33,7 +77,13 @@ onMounted(() => {
         },
       ],
     })
-  })
+
+  window.addEventListener('resize', resizeCharts)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeCharts)
+  charts.forEach((chart) => chart.dispose())
 })
 </script>
 
@@ -92,3 +142,297 @@ onMounted(() => {
     </div>
   </article>
 </template>
+
+<style scoped>
+.account-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;
+}
+
+.account-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;
+  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,
+.pie {
+  position: absolute;
+  left: 38%;
+  top: 53%;
+  width: min(58%, 340px);
+  height: min(72%, 340px);
+  transform: translate(-50%, -50%);
+}
+
+.pie {
+  left: 36%;
+  width: min(60%, 360px);
+  height: min(74%, 360px);
+}
+
+.balance-copy {
+  position: absolute;
+  right: 8%;
+  top: 50%;
+  width: 132px;
+  transform: translateY(-42%);
+}
+
+.balance-copy p,
+.quota-list li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #56606d;
+  font-size: 15px;
+  white-space: nowrap;
+}
+
+.balance-copy strong {
+  display: block;
+  margin: 14px 0 22px 20px;
+  font-size: 32px;
+  font-weight: 800;
+}
+
+.balance-copy small {
+  display: block;
+  margin-left: 21px;
+  color: #7b828c;
+  font-size: 14px;
+}
+
+.dot,
+.quota-list b,
+.pie-foot b {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--blue);
+}
+
+.sky {
+  background: #58aef7 !important;
+}
+
+.quota-list {
+  position: absolute;
+  right: 8%;
+  top: 50%;
+  transform: translateY(-55%);
+  display: grid;
+  gap: 18px;
+  list-style: none;
+}
+
+.quota-list b:nth-child(n) {
+  background: #399df7;
+}
+
+.pie-foot {
+  position: absolute;
+  left: 40px;
+  right: 30px;
+  bottom: 28px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.pie-foot span {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.progress-box {
+  grid-column: 1 / -1;
+  height: 124px;
+  position: relative;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+  padding: 16px 19px;
+}
+
+.progress-box p {
+  color: #4d5868;
+  font-size: 14px;
+}
+
+.progress-box strong {
+  display: block;
+  margin-top: 10px;
+  color: var(--blue);
+  font-size: 30px;
+  font-weight: 800;
+}
+
+.progress-box > b {
+  position: absolute;
+  left: 143px;
+  top: 52px;
+  font-size: 36px;
+  line-height: 1;
+}
+
+em {
+  color: #10b990;
+  font-style: normal;
+}
+
+.progress-line {
+  position: absolute;
+  left: 222px;
+  right: 21px;
+  top: 41px;
+  height: 44px;
+  border-top: 6px solid #e4e8ee;
+}
+
+.progress-line i {
+  display: block;
+  width: 57%;
+  height: 6px;
+  margin-top: -6px;
+  background: var(--blue);
+}
+
+.progress-line span {
+  position: absolute;
+  left: 55%;
+  top: -17px;
+  min-width: 52px;
+  height: 28px;
+  padding: 5px 14px;
+  transform: translateX(-50%);
+  border-radius: 14px;
+  background: var(--blue);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.scale-row {
+  position: absolute;
+  left: 222px;
+  right: 16px;
+  bottom: 14px;
+  display: flex;
+  justify-content: space-between;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+@media (max-width: 1200px) {
+  .account-board {
+    height: auto;
+  }
+
+  .account-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .metric-box {
+    min-height: 253px;
+  }
+}
+
+@media (max-width: 720px) {
+  .actions {
+    gap: 10px;
+  }
+
+  .board-head {
+    height: auto;
+    gap: 12px;
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+  }
+
+  .account-layout {
+    gap: 10px;
+  }
+
+  .balance-copy,
+  .quota-list {
+    right: 16px;
+  }
+}
+</style>