From c2f77d2f351467e2adbeab482ae4d1f3a02803c1 Mon Sep 17 00:00:00 2001
From: 13713575202 <1345916905@qq.com>
Date: Thu, 12 Jun 2025 14:52:03 +0800
Subject: [PATCH] xiabin

---
 src/router/index.js           |  14 +-
 src/views/trade/dataBoard.vue | 416 ++++++++++++++++++++++++++++++++++
 2 files changed, 429 insertions(+), 1 deletion(-)
 create mode 100644 src/views/trade/dataBoard.vue

diff --git a/src/router/index.js b/src/router/index.js
index 327f1da..b45b3df 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -311,6 +311,18 @@ export const constantRoutes = [
       title: "电商交易",
     },
     children: [
+      {
+        path: 'trade/dataBoard',
+        component: () => import('@/views/trade/dataBoard'),
+        name: 'dataBoard',
+        hidden: false,
+        meta: {
+          title: "电商数据看板",
+          icon: "",
+          noCache: false,
+          link: null,
+        },
+      },
       {
         path: 'trade/agriculturalinputstrading',
         component: () => import('@/views/trade/agriculturalinputstrading'),
@@ -361,7 +373,7 @@ export const constantRoutes = [
       },
     ],
   },
-{
+  {
     path: '/brand',
     name: "brand",
     component: Layout,
diff --git a/src/views/trade/dataBoard.vue b/src/views/trade/dataBoard.vue
new file mode 100644
index 0000000..6fd0a46
--- /dev/null
+++ b/src/views/trade/dataBoard.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="app-container">
+    <div class="app-container-data">
+      <div class="app-container-title">运营看板</div>
+      <div style="display: flex">
+        <div class="app-container-data-left">
+          <div class="app-container-data-left-top">
+            <div>
+              <div class="title">
+                <img
+                  class="title-image"
+                  src="../../assets/images/profile.jpg"
+                  alt=""
+                />
+                <div>销售总额</div>
+              </div>
+              <div class="number">12313</div>
+            </div>
+            <div>
+              <div class="title">
+                <img
+                  class="title-image"
+                  src="../../assets/images/profile.jpg"
+                  alt=""
+                />
+                <div>订单总数</div>
+              </div>
+              <div class="number">55</div>
+            </div>
+          </div>
+          <div class="app-container-data-left-bottom">
+            <div>
+              <div class="title">
+                <img
+                  class="title-image"
+                  src="../../assets/images/profile.jpg"
+                  alt=""
+                />
+                <div>浏览量</div>
+              </div>
+              <div class="number">13415</div>
+            </div>
+            <div>
+              <div class="title">
+                <img
+                  class="title-image"
+                  src="../../assets/images/profile.jpg"
+                  alt=""
+                />
+                <div>成功退款金额</div>
+              </div>
+              <div class="number">1565465</div>
+            </div>
+          </div>
+        </div>
+        <div class="app-container-data-right">
+          <div ref="chartRef" style="width: 600px; height: 400px"></div>
+        </div>
+      </div>
+    </div>
+    <div class="app-container-list">
+      <div class="app-container-block">
+        <div class="app-container-block-title">销售总额</div>
+        <div class="app-container-block-price">
+          15698<text style="font-size: 10px; color: #999999; margin-left: 10px"
+            >元</text
+          >
+        </div>
+        <div class="app-container-block-proportion">
+          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
+        </div>
+      </div>
+      <div class="app-container-block">
+        <div class="app-container-block-title">订单总数</div>
+        <div class="app-container-block-price">
+          52<text style="font-size: 10px; color: #999999; margin-left: 10px"
+            >单</text
+          >
+        </div>
+        <div class="app-container-block-proportion">
+          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
+        </div>
+      </div>
+      <div class="app-container-block">
+        <div class="app-container-block-title">支付转化率</div>
+        <div class="app-container-block-price">
+          16.56<text style="font-size: 10px; color: #999999; margin-left: 10px"
+            >%</text
+          >
+        </div>
+        <div class="app-container-block-proportion">
+          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
+        </div>
+      </div>
+      <div class="app-container-block">
+        <div class="app-container-block-title">客单价</div>
+        <div class="app-container-block-price">
+          12.33<text style="font-size: 10px; color: #999999; margin-left: 10px"
+            >元</text
+          >
+        </div>
+        <div class="app-container-block-proportion">
+          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
+        </div>
+      </div>
+      <div class="app-container-block">
+        <div class="app-container-block-title">成功退款金额</div>
+        <div class="app-container-block-price">
+          152.5<text style="font-size: 10px; color: #999999; margin-left: 10px"
+            >元</text
+          >
+        </div>
+        <div class="app-container-block-proportion">
+          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
+        </div>
+      </div>
+      <div class="app-container-block">
+        <div class="app-container-block-title">浏览量</div>
+        <div class="app-container-block-price">
+          156988<text style="font-size: 10px; color: #999999; margin-left: 10px"
+            >次</text
+          >
+        </div>
+        <div class="app-container-block-proportion">
+          环比：<text style="color: red; font-size: 12px">↓2.6%</text>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+const chartRef = ref(null);
+
+onMounted(() => {
+  if (chartRef.value) {
+    const myChart = echarts.init(chartRef.value);
+    const option = {
+      backgroundColor: "#fff",
+      title: {
+        text: "渐变折线图",
+        left: "12%",
+        top: "13%",
+        textStyle: {
+          color: "#999",
+          fontSize: 14,
+        },
+      },
+      legend: {
+        show: true,
+        icon: "circle",
+        top: "13%",
+        itemWidth: 6,
+        itemHeight: 6,
+        itemGap: 25,
+      },
+      tooltip: {
+        trigger: "axis",
+      },
+      xAxis: [
+        {
+          type: "category",
+          data: ["A", "B", "C", "D", "E", "F", "G"],
+          axisLine: {
+            lineStyle: {
+              color: "#ddd",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: "#c56790",
+            },
+            margin: 15,
+          },
+          boundaryGap: false,
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#ddd",
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#c56790",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "S",
+          type: "line",
+          data: [13, 10, 3, 12, 15, 30, 7],
+          symbolSize: 6,
+          symbol: "circle",
+          smooth: true,
+          lineStyle: {
+            color: "#fe9a8b",
+          },
+          itemStyle: {
+            normal: {
+              color: "#fe9a8b",
+              borderColor: "#fe9a8b",
+            },
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#fe9a8bb3",
+              },
+              {
+                offset: 1,
+                color: "#fe9a8b03",
+              },
+            ]),
+          },
+          emphasis: {
+            itemStyle: {
+              color: {
+                type: "radial",
+                x: 0.5,
+                y: 0.5,
+                r: 0.5,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#fe9a8b",
+                  },
+                  {
+                    offset: 0.4,
+                    color: "#fe9a8b",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 0.7,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#fff",
+                  },
+                ],
+              },
+              borderColor: "#fe9a8b",
+              borderWidth: 2,
+            },
+          },
+        },
+        {
+          name: "M",
+          type: "line",
+          data: [5, 12, 11, 4, 25, 16, 1],
+          symbolSize: 6,
+          symbol: "circle",
+          smooth: true,
+          lineStyle: {
+            color: "#9E87FF",
+          },
+          itemStyle: {
+            normal: {
+              color: "#9E87FF",
+              borderColor: "#9E87FF",
+            },
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#9E87FFb3",
+              },
+              {
+                offset: 1,
+                color: "#9E87FF03",
+              },
+            ]),
+          },
+          emphasis: {
+            itemStyle: {
+              color: {
+                type: "radial",
+                x: 0.5,
+                y: 0.5,
+                r: 0.5,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#9E87FF",
+                  },
+                  {
+                    offset: 0.4,
+                    color: "#9E87FF",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 0.7,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 0.8,
+                    color: "#fff",
+                  },
+                  {
+                    offset: 1,
+                    color: "#fff",
+                  },
+                ],
+              },
+              borderColor: "#9E87FF",
+              borderWidth: 2,
+            },
+          },
+        },
+      ],
+    };
+    myChart.setOption(option);
+  }
+});
+</script>
+<style lang="scss" scoped>
+.title {
+  width: 200px;
+  display: flex;
+  align-items: center;
+  margin-right: 50px;
+  font-size: 20px;
+  color: #999999;
+}
+.title-image {
+  margin-right: 10px;
+  width: 38px;
+  height: 38px;
+}
+.number {
+  margin-right: 100px;
+  margin-top: 20px;
+  font-size: 25px;
+  font-weight: bold;
+  color: #000000;
+}
+.app-container-list {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.app-container-title {
+  margin-bottom: 20px;
+  font-size: 20px;
+  font-weight: bold;
+}
+.app-container-data {
+  border-radius: 10px;
+  padding: 20px;
+  width: 100%;
+  background-color: #fff;
+  .app-container-data-left {
+    width: 40%;
+    .app-container-data-left-top {
+      display: flex;
+    }
+    .app-container-data-left-bottom {
+      margin-top: 50px;
+      display: flex;
+    }
+  }
+  .app-container-data-right {
+    width: 60%;
+  }
+}
+.app-container-block {
+  width: 250px;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 10px;
+  margin-left: 26px;
+  .app-container-block-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .app-container-block-price {
+    font-size: 18px;
+    color: #42b983;
+    font-weight: bold;
+    margin: 10px 0;
+  }
+  .app-container-block-proportion {
+    font-size: 12px;
+  }
+}
+</style>