feat: 右侧完成部分

src/assets/styles/animations/animations.scss

@@ -1,3 +1,3 @@
 @use "src/rotate";
 @use "src/transition";
-@use "src/line-move";
+@use "src/line-move";

src/assets/styles/global.scss

@@ -4,7 +4,7 @@
 :root {
   --color-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
-  --color-primary-secondary-1: rgba(0, 255, 255, 0.71);
+  --color-primary-secondary-1: #00FFFFB5;
   --color-success: #44D7B6;
   --color-info: #7CC1FF;
   --color-info-secondary: #707070;

src/views/big-data/charts/right-top.ts

@@ -0,0 +1,56 @@
+import 'echarts/lib/component/dataZoom';
+
+import type { EChartsOption } from 'echarts';
+import { type Ref, ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+const option = ref<EChartsOption>();
+option.value = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+  },
+  grid: { top: 0, left: 0, right: -100, bottom: 0, containLabel: false },
+  xAxis: { show: false, type: 'value' },
+  yAxis: { show: false, type: 'category', data: ['进出口金额'] },
+  series: [
+    {
+      name: '进口额',
+      type: 'bar',
+      barMaxWidth: 24,
+      barGap: '-100%',
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: '#1B3052' },
+          { offset: 1, color: '#32A5DE' },
+        ]),
+      },
+      data: [381],
+    },
+    {
+      name: '出口额',
+      type: 'bar',
+      barMaxWidth: 23,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: '#1B3052' },
+          { offset: 1, color: '#3684F2' },
+        ]),
+      },
+      data: [-158],
+    },
+  ],
+};
+
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  const myChart: any = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option.value);
+};

src/views/big-data/components/big-data-right/components/right-bottom.vue

@@ -1,61 +1,21 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+const list = [
-
+  { title: '134.5㎡', summary: '建成投产面积' },
-import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
+  { title: '38000㎡', summary: '保税仓库面积' },
-
+  { title: '327.3㎡', summary: '物流场站' },
-const chartPie = ref<HTMLDivElement>();
+];
-
-onMounted(() => {
-  renderEcharts(chartPie);
-});
 </script>
 
 <template>
   <div class="big-data__sidebar-item">
     <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">企业信息</h1>
+      <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>
+      <li v-for="(item, index) in list" :key="index">
-        <h1>报税金额</h1>
+        <h1>{{ item.title }}</h1>
-        <p class="c-warning-secondary">¥1551154545</p>
+        <p>{{ item.summary }}</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>
@@ -64,53 +24,63 @@ onMounted(() => {
 <style lang="scss" scoped>
 .big-data__sidebar-item {
   width: 100%;
-  height: 338px;
+  height: 166px;
+
+  .big-data__sidebar-card {
+    display: flex;
+    justify-content: center;
+    margin: 19px 0;
+    width: 100%;
+  }
 }
 
-.big-data__sidebar-card {
+li {
+  position: relative;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
-  align-content: flex-start;
+  align-items: center;
-  width: 100%;
+  margin: 0 24px 0 0;
+  width: 144px;
+  height: 83px;
+  background: url('@/assets/images/big-data/bg/bg-right-bottom.png') no-repeat center;
+  background-size: cover;
 
-  li {
+  &::before {
-    padding: 9px 16px 0 19px;
+    content: '';
-    margin: 15px 0 0 0;
+    position: absolute;
-    width: 242px;
+    width: 10px;
-    height: 124px;
+    height: 10px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background: var(--color-primary-secondary);
-    background-size: cover;
+    border-radius: 50%;
-
+    bottom: -5px;
-    h1 {
+    z-index: 1;
-      margin: 0 0 2px 0;
-      font-size: 18px;
-    }
-
-    p {
-      font-size: 30px;
-    }
   }
 
-  &-enterprise-type {
+  &::after {
-    margin: 4px 0 0 0;
+    content: '';
-    width: 100%;
+    position: absolute;
-
+    width: 20px;
-    span {
+    height: 20px;
-      font-size: 13px;
+    background: var(--color-primary-secondary-1);
-    }
+    border-radius: 50%;
-
+    bottom: -10px;
-    i {
+    animation: zoomIn 0.8s alternate infinite;
-      display: inline-block;
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-    }
   }
 
-  &-chart-pie {
+  &:last-child {
-    width: 82px;
+    margin: 0;
-    height: 82px;
+  }
+
+  h1 {
+    margin: 0 0 2px 0;
+    color: var(--color-primary-secondary);
+    font-size: 18px;
+  }
+
+  p {
+    color: #fff;
+    font-size: 12px;
   }
 }
 </style>

src/views/big-data/components/big-data-right/components/right-top.vue

@@ -4,7 +4,7 @@ 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';
+import { renderEcharts } from '@/views/big-data/charts/right-top';
 
 const chartProgress = ref<HTMLDivElement>();
 const money = '1386114';

src/views/welcome/components/welcome-content.vue

@@ -40,7 +40,7 @@ const list = [
 
   &-inner {
     margin: 156px 0 0 0;
-    animation: flipInY 1s 1.5s;
+    animation: flipInY 1s 0.9s;
   }
 
   p {