feat: 经营完成

src/plugins/echarts.ts

@@ -1,4 +1,4 @@
-import { BarChart, LineChart, PieChart } from 'echarts/charts';
+import { BarChart, LineChart, PictorialBarChart, PieChart } from 'echarts/charts';
 import {
   DataZoomComponent,
   GraphicComponent,
@@ -15,7 +15,6 @@ import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import type { App } from 'vue';
 
 const { use } = echarts;
-
 use([
   PieChart,
   BarChart,
@@ -31,6 +30,7 @@ use([
   TooltipComponent,
   DataZoomComponent,
   VisualMapComponent,
+  PictorialBarChart,
 ]);
 
 /**

src/views/business-supervision/business-supervision-content/charts/contentBottom.ts

@@ -10,13 +10,7 @@ const option = ref<EChartsOption>();
 option.value = {
   tooltip: {
     trigger: 'axis',
-    axisPointer: {
+    axisPointer: { type: 'shadow', shadowStyle: { shadowColor: '#66FFFF', shadowBlur: 10 } },
-      type: 'shadow',
-      shadowStyle: {
-        shadowColor: '#66FFFF',
-        shadowBlur: 10,
-      },
-    },
   },
   grid: { top: '9%', right: '0%', left: '6%', bottom: '9%', containLabel: false },
   xAxis: [
@@ -58,10 +52,10 @@ option.value = {
           { offset: 0, color: '#00CCD2' },
           { offset: 1, color: '#00A2FF' },
         ]),
-        emphasis: {
+      },
-          shadowBlur: 10, // 取消阴影模糊
+      emphasis: {
-          shadowColor: '#000', // 取消阴影颜色
+        shadowBlur: 10, // 取消阴影模糊
-        },
+        shadowColor: '#000', // 取消阴影颜色
       },
       label: { show: true, position: 'top', color: '#fff', fontSize: 14 },
       data: [10, 52, 200, 334, 390, 330, 220, 500, 482, 499, 999, 444],

src/views/business-supervision/business-supervision-content/components/content-bottom.vue

@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
 
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sideBottom';
+import { renderEcharts } from '@/views/business-supervision/business-supervision-content/charts/contentBottom';
 
 const chartYear = ref();
 

src/views/business-supervision/business-supervision-right/chart/bottom-chart.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import 'echarts/lib/component/dataZoom';
+
+import { useDebounceFn, useEventListener } from '@vueuse/core';
+import type { EChartsOption } from 'echarts';
+import { onMounted, type Ref, ref, watch } from 'vue';
+
+import echarts from '@/plugins/echarts';
+
+const props = defineProps({
+  chartData: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const chart = ref<HTMLDivElement>();
+const option = ref<EChartsOption>();
+option.value = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow', shadowStyle: { shadowColor: '#66FFFF', shadowBlur: 10 } },
+    formatter: (data) => {
+      let tip = '';
+      data.forEach((item) => {
+        if (item.seriesType === 'bar') {
+          tip += '<div class="echarts-tip-div">';
+          tip += '<div class="left">' + item.marker + item.seriesName + '：</div>';
+          tip += '<div class="right">' + item.value + '%</div>';
+          tip += '</div>';
+        }
+      });
+      return tip;
+    },
+  },
+  grid: { top: '9%', right: '0%', left: '0%', bottom: '0%', containLabel: false },
+  xAxis: [{ type: 'category', show: false }],
+  yAxis: [{ type: 'value', show: false, max: 100 }],
+  series: [
+    {
+      name: '环比',
+      type: 'bar',
+      barWidth: 30,
+      showBackground: true,
+      backgroundStyle: {
+        color: 'transparent',
+      },
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#FEDB65' },
+          { offset: 1, color: '#66FFFF' },
+        ]),
+      },
+      data: [props.chartData],
+      z: 0,
+    },
+    {
+      type: 'pictorialBar',
+      barWidth: 30,
+      itemStyle: { color: '#0D3770' },
+      symbolRepeat: 'true',
+      symbolMargin: 3,
+      symbol: 'rect',
+      symbolSize: [30, 4],
+
+      data: [props.chartData],
+      z: 1,
+    },
+  ],
+  animationDuration: 0,
+  animationDurationUpdate: 1000,
+  animationEasing: 'linear',
+  animationEasingUpdate: 'linear',
+};
+
+const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  const myChart = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  const debouncedFn = useDebounceFn(() => {
+    myChart.resize();
+  }, 1000);
+  useEventListener(window, 'resize', debouncedFn);
+
+  myChart.setOption(option.value);
+
+  watch(
+    () => props.chartData,
+    () => {
+      myChart.setOption({
+        series: [
+          { name: '环比', type: 'bar', data: [props.chartData] },
+          { type: 'pictorialBar', data: [props.chartData] },
+        ],
+      });
+    }
+  );
+};
+
+onMounted(() => {
+  renderEcharts(chart);
+});
+</script>
+
+<template>
+  <div ref="chart" class="business-supervision__sidebar-chart" />
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__sidebar-chart {
+  width: 20px;
+  height: 63px;
+}
+</style>

src/views/business-supervision/business-supervision-right/components/sidebar-right-bottom.vue

@@ -1,4 +1,18 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import BottomChart from '@/views/business-supervision/business-supervision-right/chart/bottom-chart.vue';
+
+const charData1 = ref(Math.round(Math.random() * 100));
+const charData2 = ref(Math.round(Math.random() * 100));
+
+onMounted(() => {
+  setInterval(() => {
+    charData1.value = Math.round(Math.random() * 100);
+    charData2.value = Math.round(Math.random() * 100);
+  }, 3000);
+});
+</script>
 
 <template>
   <div class="business-supervision__sidebar-item h-[294px]">
@@ -8,7 +22,98 @@
       </div>
       <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
     </div>
+
+    <ul class="business-supervision__sidebar-panel">
+      <li>
+        <div class="business-supervision__sidebar-panel-change">
+          <p>环比变化</p>
+          <span>+43.2%</span>
+        </div>
+        <h1>
+          987.1
+          <em>亿</em>
+        </h1>
+        <h2>货物贸易涉外总额</h2>
+        <div class="business-supervision__sidebar-panel-chart">
+          <bottom-chart :chart-data="charData1" />
+        </div>
+      </li>
+      <li>
+        <div class="business-supervision__sidebar-panel-change">
+          <p>环比变化</p>
+          <span>+43.2%</span>
+        </div>
+        <h1>
+          987.1
+          <em>亿</em>
+        </h1>
+        <h2>货物贸易涉外总额</h2>
+        <div class="business-supervision__sidebar-panel-chart">
+          <bottom-chart :chart-data="charData2" />
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.business-supervision__sidebar {
+  &-panel {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 33px 4px 0 4px;
+    width: 100%;
+    height: 167px;
+
+    li {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 240px;
+      height: 167px;
+      background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-bottom-panel.png')
+        no-repeat center;
+      background-size: cover;
+
+      h1 {
+        margin: 0 0 24px 0;
+        color: var(--color-primary-secondary);
+        font-size: 32px;
+
+        em {
+          font-size: 20px;
+          font-style: normal;
+        }
+      }
+
+      h2 {
+        position: absolute;
+        bottom: 14px;
+        font-size: 19px;
+      }
+    }
+
+    &-change {
+      display: flex;
+
+      span {
+        display: inline-block;
+        margin: 0 0 0 9px;
+        color: var(--color-warning-secondary);
+        font-size: 13px;
+      }
+    }
+
+    &-chart {
+      position: absolute;
+      top: 34px;
+      right: 9px;
+      width: 29px;
+      height: 63px;
+    }
+  }
+}
+</style>

src/views/business-supervision/business-supervision-right/components/sidebar-right-middle.vue

@@ -1,4 +1,11 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const list = [
+  { title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
+  { title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
+  { title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
+  { title: '食品业务出口总值', value: '890.30', unit: '亿 /k㎡', percent: '10' },
+];
+</script>
 
 <template>
   <div class="business-supervision__sidebar-item h-[354px]">
@@ -8,7 +15,78 @@
       </div>
       <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
     </div>
+
+    <ul class="business-supervision__sidebar-panel">
+      <li v-for="(item, index) in list" :key="index">
+        <h1>{{ item.title }}</h1>
+        <strong>¥{{ item.value }}</strong>
+        <span>{{ item.unit }}</span>
+        <div class="business-supervision__sidebar-panel-circle">
+          <div>{{ item.percent }}%</div>
+          <div>环比</div>
+        </div>
+      </li>
+    </ul>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.business-supervision__sidebar {
+  &-panel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin: 14px 0 0 0;
+    width: 100%;
+    height: calc(100% - 60px);
+
+    li {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 0 0 0 14px;
+      width: 243px;
+      height: 124px;
+      background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-panel.png')
+        no-repeat center;
+      background-size: cover;
+
+      h1 {
+        color: #fff;
+        font-size: 17px;
+      }
+
+      strong {
+        color: var(--color-primary-secondary);
+        font-size: 27px;
+      }
+
+      span {
+        position: absolute;
+        right: 56px;
+        bottom: 42px;
+        color: var(--color-primary-secondary);
+        font-size: 15px;
+      }
+    }
+
+    &-circle {
+      position: absolute;
+      top: -14px;
+      right: -9px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 60px;
+      height: 60px;
+      color: var(--color-info);
+      font-size: 9px;
+      background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+</style>