From 8c803b4e7eb897a4fd1c8fe83383c598eff87f60 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Sun, 16 Mar 2025 23:03:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AD=E9=97=B4=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/big-data/charts/content-bottom.tsx  |  61 ++++++++--
 .../components/content-bottom.vue             |   5 +-
 .../components/right-bottom.vue               | 113 +++++++++++++++++-
 .../components/right-middle.vue               | 113 +++++++++++++++++-
 .../big-data-right/components/right-top.vue   |  73 +++++++++--
 src/views/big-data/index.vue                  |   4 +-
 6 files changed, 337 insertions(+), 32 deletions(-)

diff --git a/src/views/big-data/charts/content-bottom.tsx b/src/views/big-data/charts/content-bottom.tsx
index 05b8962..25758e9 100644
--- a/src/views/big-data/charts/content-bottom.tsx
+++ b/src/views/big-data/charts/content-bottom.tsx
@@ -7,33 +7,72 @@ let myChart = null;
 
 const option = {
   backgroundColor: 'transparent',
-  grid: { top: '54px', right: '14px', left: '14px', bottom: '24px' },
+  grid: { top: 79, right: 9, left: 34, bottom: '24px' },
   title: {
     text: '最近12个月税收概览',
+    subtext: '单位/万元',
     textStyle: { color: '#fff', fontSize: 22, fontWeight: 'lighter' },
+    subtextStyle: { color: '#fff', fontSize: 12, fontWeight: 'lighter' },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+    formatter: function (params: any): string {
+      return `<div>${params[0].seriesName}</div> ${params[0].marker} ${params[0].name}  ${params[0].value}万元`;
+    },
   },
-  tooltip: {},
   legend: { show: false },
   xAxis: {
     type: 'category',
     show: true,
-    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-    // data: category,
+    data: [
+      '2021.01',
+      '2021.02',
+      '2021.03',
+      '2021.04',
+      '2021.05',
+      '2021.06',
+      '2021.07',
+      '2021.08',
+      '2021.09',
+      '2021.10',
+      '2021.11',
+      '2021.12',
+    ],
     itemStyle: { color: '#ccc' },
-    splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } },
-    splitArea: { show: false },
+    splitLine: { show: false },
+  },
+  yAxis: {
+    show: true,
+    type: 'value',
+    name: '',
+    nameTextStyle: { color: '#fff', padding: [0, 0, 0, 40] },
+    splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } },
   },
-  yAxis: { show: true, type: 'value', splitLine: { show: false } },
   series: [
     {
       name: '金额',
       type: 'bar',
-      barWidth: 14,
+      barWidth: 9,
+      label: { show: true, position: 'top', color: '#fff', distance: 9 },
       itemStyle: {
-        borderRadius: 5,
+        borderRadius: [0, 0, 4, 4],
         color: graphicLinearGradient('#66FFFF', '#66FFFF33'),
       },
-      data: [2, 8, 3, 7, 1, 9, 18, 3, 7, 1, 9, 6],
+      data: [596, 566, 512, 375, 566, 437, 492, 519, 309, 482, 539, 572],
+    },
+    {
+      name: '金额',
+      type: 'line',
+      smooth: true,
+      symbol: 'circle',
+      symbolSize: 19,
+      symbolOffset: [0, 5],
+      data: [596, 566, 512, 375, 566, 437, 492, 519, 309, 482, 539, 572],
+      itemStyle: { color: '#66FFFF' },
+      lineStyle: { color: 'transparent' },
+      animationDuration: 499,
+      animationDelay: 644,
     },
   ],
 };
@@ -41,7 +80,7 @@ const option = {
 /** 渲染图表 */
 export const renderEcharts = (element: Ref<HTMLDivElement>) => {
   myChart = echarts.init(element.value, null, {
-    renderer: 'svg',
+    renderer: 'canvas',
     devicePixelRatio: window.devicePixelRatio,
   });
 
diff --git a/src/views/big-data/components/big-data-content/components/content-bottom.vue b/src/views/big-data/components/big-data-content/components/content-bottom.vue
index 0a474c6..2944104 100644
--- a/src/views/big-data/components/big-data-content/components/content-bottom.vue
+++ b/src/views/big-data/components/big-data-content/components/content-bottom.vue
@@ -18,11 +18,12 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .big-data__sidebar-item {
-  width: 800px;
+  margin: 16px 0 0 0;
+  width: 100%;
   height: 377px;
 
   &-chart {
-    padding: 29px 25px 21px 28px;
+    padding: 19px 0 0 0;
     width: 100%;
     height: 100%;
   }
diff --git a/src/views/big-data/components/big-data-right/components/right-bottom.vue b/src/views/big-data/components/big-data-right/components/right-bottom.vue
index 82f77e3..bcfcbc3 100644
--- a/src/views/big-data/components/big-data-right/components/right-bottom.vue
+++ b/src/views/big-data/components/big-data-right/components/right-bottom.vue
@@ -1,11 +1,116 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
+
+const chartPie = ref<HTMLDivElement>();
+
+onMounted(() => {
+  renderEcharts(chartPie);
+});
 </script>
 
 <template>
-top
+  <div class="big-data__sidebar-item">
+    <div class="flex-x-between">
+      <h1 class="big-data__sidebar-title">企业信息</h1>
+      <span class="big-data__sidebar-title-describe">截止时间至2021.12.30</span>
+    </div>
+
+    <ul class="big-data__sidebar-card">
+      <li>
+        <h1>报税金额</h1>
+        <p class="c-warning-secondary">¥1551154545</p>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <div>
+            <h1>企业数量</h1>
+            <p class="c-primary-secondary">783</p>
+          </div>
+          <div ref="chartPie" class="big-data__sidebar-card-chart-pie" />
+        </div>
+        <div class="big-data__sidebar-card-enterprise-type">
+          <span class="mr-[13px]">
+            <i class="bg-primary-secondary" />
+            国营企业 345
+          </span>
+          <span>
+            <i class="bg-warning-secondary" />
+            私营企业 345
+          </span>
+        </div>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <h1>总投资金额</h1>
+          <span class="font-size-[12px]">环比变化</span>
+          <span class="font-size-[12px]">+123%</span>
+        </div>
+        <p class="c-primary-secondary">¥1551154545</p>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <h1>税收总金额</h1>
+          <span class="font-size-[12px]">环比变化</span>
+          <span class="font-size-[12px]">-123%</span>
+        </div>
+        <p class="c-primary-secondary">¥1551154545</p>
+      </li>
+    </ul>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.big-data__sidebar-item {
+  width: 100%;
+  height: 338px;
+}
 
-</style>
\ No newline at end of file
+.big-data__sidebar-card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  width: 100%;
+
+  li {
+    padding: 9px 16px 0 19px;
+    margin: 15px 0 0 0;
+    width: 242px;
+    height: 124px;
+    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      margin: 0 0 2px 0;
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 30px;
+    }
+  }
+
+  &-enterprise-type {
+    margin: 4px 0 0 0;
+    width: 100%;
+
+    span {
+      font-size: 13px;
+    }
+
+    i {
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+    }
+  }
+
+  &-chart-pie {
+    width: 82px;
+    height: 82px;
+  }
+}
+</style>
diff --git a/src/views/big-data/components/big-data-right/components/right-middle.vue b/src/views/big-data/components/big-data-right/components/right-middle.vue
index 82f77e3..bcfcbc3 100644
--- a/src/views/big-data/components/big-data-right/components/right-middle.vue
+++ b/src/views/big-data/components/big-data-right/components/right-middle.vue
@@ -1,11 +1,116 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
+
+const chartPie = ref<HTMLDivElement>();
+
+onMounted(() => {
+  renderEcharts(chartPie);
+});
 </script>
 
 <template>
-top
+  <div class="big-data__sidebar-item">
+    <div class="flex-x-between">
+      <h1 class="big-data__sidebar-title">企业信息</h1>
+      <span class="big-data__sidebar-title-describe">截止时间至2021.12.30</span>
+    </div>
+
+    <ul class="big-data__sidebar-card">
+      <li>
+        <h1>报税金额</h1>
+        <p class="c-warning-secondary">¥1551154545</p>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <div>
+            <h1>企业数量</h1>
+            <p class="c-primary-secondary">783</p>
+          </div>
+          <div ref="chartPie" class="big-data__sidebar-card-chart-pie" />
+        </div>
+        <div class="big-data__sidebar-card-enterprise-type">
+          <span class="mr-[13px]">
+            <i class="bg-primary-secondary" />
+            国营企业 345
+          </span>
+          <span>
+            <i class="bg-warning-secondary" />
+            私营企业 345
+          </span>
+        </div>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <h1>总投资金额</h1>
+          <span class="font-size-[12px]">环比变化</span>
+          <span class="font-size-[12px]">+123%</span>
+        </div>
+        <p class="c-primary-secondary">¥1551154545</p>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <h1>税收总金额</h1>
+          <span class="font-size-[12px]">环比变化</span>
+          <span class="font-size-[12px]">-123%</span>
+        </div>
+        <p class="c-primary-secondary">¥1551154545</p>
+      </li>
+    </ul>
+  </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.big-data__sidebar-item {
+  width: 100%;
+  height: 338px;
+}
 
-</style>
\ No newline at end of file
+.big-data__sidebar-card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  width: 100%;
+
+  li {
+    padding: 9px 16px 0 19px;
+    margin: 15px 0 0 0;
+    width: 242px;
+    height: 124px;
+    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      margin: 0 0 2px 0;
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 30px;
+    }
+  }
+
+  &-enterprise-type {
+    margin: 4px 0 0 0;
+    width: 100%;
+
+    span {
+      font-size: 13px;
+    }
+
+    i {
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+    }
+  }
+
+  &-chart-pie {
+    width: 82px;
+    height: 82px;
+  }
+}
+</style>
diff --git a/src/views/big-data/components/big-data-right/components/right-top.vue b/src/views/big-data/components/big-data-right/components/right-top.vue
index 868ff8a..876b0cf 100644
--- a/src/views/big-data/components/big-data-right/components/right-top.vue
+++ b/src/views/big-data/components/big-data-right/components/right-top.vue
@@ -1,32 +1,87 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
+<script lang="tsx" setup>
+import { onMounted, ref } from 'vue';
 
+import { displayContent } from '@/components/PanelItem/DigitalNumber';
 import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';
+
+const chartProgress = ref<HTMLDivElement>();
+const money = '1386114';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
   { label: '2020.09', value: '2021' },
   { label: '2020.09', value: '2021' },
 ]);
+
+onMounted(() => {
+  renderEcharts(chartProgress);
+});
 </script>
 
 <template>
-  <div class="big-data__sidebar-item">
+  <div class="big-data__sidebar-item h-[226px]">
     <div class="flex-x-between">
-      <div class="big-data__sidebar-title">
-        <h1>规模效益</h1>
-      </div>
-
+      <h1 class="big-data__sidebar-title">园区进出口额</h1>
       <div>
+        <span class="big-data__sidebar-tag">总数据</span>
         <TimeSelect :time-list="timeList" />
       </div>
     </div>
+
+    <div class="money-digit">
+      <component :is="displayContent(money)" />
+    </div>
+
+    <div>
+      <div ref="chartProgress" class="big-data__sidebar-progress" />
+
+      <ul class="big-data__sidebar-value">
+        <li>
+          进口额
+          <i>¥1551154545</i>
+        </li>
+        <li class="thin-line h-[20px]" />
+        <li>
+          <i>¥1551154545</i>
+          出口额
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.big-data__sidebar-item {
-  height: 274px;
+.money-digit {
+  margin: 14px 0 0 0;
+  width: 100%;
+
+  span {
+    height: 69px;
+  }
+}
+
+.big-data__sidebar {
+  width: 100%;
+
+  &-progress {
+    margin: 14px 0 0 0;
+    width: 100%;
+    height: 24px;
+  }
+
+  &-value {
+    display: flex;
+    justify-content: space-between;
+    margin: 9px 0 0 0;
+    font-size: 18px;
+
+    i {
+      font-style: normal;
+      font-size: 20px;
+      color: var(--color-primary-secondary);
+    }
+  }
 }
 </style>
diff --git a/src/views/big-data/index.vue b/src/views/big-data/index.vue
index 02636b1..54bd380 100644
--- a/src/views/big-data/index.vue
+++ b/src/views/big-data/index.vue
@@ -26,10 +26,10 @@ onBeforeMount(async () => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 25px 14px 25px;
+  padding: 0 9px 0 9px;
   width: 100%;
   height: 100%;
 
-  @include view-style-default(530px, 748px, #122953b3);
+  @include view-style-default(530px, 800px, #122953b3);
 }
 </style>