提交

package.json

@@ -9,6 +9,7 @@
     "preinstall": "npx pm-keeper yarn@1.22.10"
   },
   "dependencies": {
+    "@antv/f2": "^4.0.29",
     "@vant/touch-emulator": "^1.3.2",
     "core-js": "^3.6.5",
     "dayjs": "^1.11.2",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@antv/f2': ^4.0.29
   '@vant/touch-emulator': ^1.3.2
   '@vue/cli-plugin-babel': ~4.5.0
   '@vue/cli-plugin-eslint': ~4.5.0
@@ -20,6 +21,7 @@ specifiers:
   vue-template-compiler: ^2.6.11
 
 dependencies:
+  '@antv/f2': 4.0.29
   '@vant/touch-emulator': 1.3.2
   core-js: 3.23.2
   dayjs: 1.11.3
@@ -59,6 +61,51 @@ packages:
       '@jridgewell/trace-mapping': 0.3.13
     dev: true
 
+  /@antv/adjust/0.2.5:
+    resolution: {integrity: sha512-MfWZOkD9CqXRES6MBGRNe27Q577a72EIwyMnE29wIlPliFvJfWwsrONddpGU7lilMpVKecS3WAzOoip3RfPTRQ==}
+    dependencies:
+      '@antv/util': 2.0.17
+      tslib: 1.14.1
+    dev: false
+
+  /@antv/event-emitter/0.1.3:
+    resolution: {integrity: sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg==}
+    dev: false
+
+  /@antv/f2-graphic/0.0.8:
+    resolution: {integrity: sha512-grJftwBg9mhFOwhhwaZ8SgUkad5ejj0DtMwu8jFBjMxiLsY1mji88Vc/Zc1Je6qw3UdlMRZ62tubaEQHCD8nLQ==}
+    dependencies:
+      '@antv/util': 2.0.17
+      '@babel/runtime': 7.18.3
+    dev: false
+
+  /@antv/f2/4.0.29:
+    resolution: {integrity: sha512-siYZnajKJcbMY+Yv8q/pvYwFBEkXGSFJZN/PJJlTRvA1cI1fXT+yh8J57x2KY3Ysywq8Z4Mt1YiR3NSNVVryfA==}
+    dependencies:
+      '@antv/adjust': 0.2.5
+      '@antv/event-emitter': 0.1.3
+      '@antv/f2-graphic': 0.0.8
+      '@antv/scale': 0.3.18
+      '@antv/util': 2.0.17
+      '@babel/runtime': 7.18.3
+      d3-cloud: 1.2.5
+    dev: false
+
+  /@antv/scale/0.3.18:
+    resolution: {integrity: sha512-GHwE6Lo7S/Q5fgaLPaCsW+CH+3zl4aXpnN1skOiEY0Ue9/u+s2EySv6aDXYkAqs//i0uilMDD/0/4n8caX9U9w==}
+    dependencies:
+      '@antv/util': 2.0.17
+      fecha: 4.2.3
+      tslib: 2.3.0
+    dev: false
+
+  /@antv/util/2.0.17:
+    resolution: {integrity: sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==}
+    dependencies:
+      csstype: 3.1.0
+      tslib: 2.3.0
+    dev: false
+
   /@babel/code-frame/7.16.7:
     resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==}
     engines: {node: '>=6.9.0'}
@@ -3410,10 +3457,24 @@ packages:
       css-tree: 1.1.3
     dev: true
 
+  /csstype/3.1.0:
+    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
+    dev: false
+
   /cyclist/1.0.1:
     resolution: {integrity: sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==}
     dev: true
 
+  /d3-cloud/1.2.5:
+    resolution: {integrity: sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw==}
+    dependencies:
+      d3-dispatch: 1.0.6
+    dev: false
+
+  /d3-dispatch/1.0.6:
+    resolution: {integrity: sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==}
+    dev: false
+
   /dashdash/1.14.1:
     resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
     engines: {node: '>=0.10'}
@@ -4239,6 +4300,10 @@ packages:
       websocket-driver: 0.7.4
     dev: true
 
+  /fecha/4.2.3:
+    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
+    dev: false
+
   /figgy-pudding/3.5.2:
     resolution: {integrity: sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==}
     dev: true
@@ -8188,7 +8253,6 @@ packages:
 
   /tslib/1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-    dev: true
 
   /tslib/2.3.0:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}

src/App.vue

@@ -22,7 +22,6 @@ export default {
 * {
   margin: 0;
   padding: 0;
-  font-weight: 400;
 }
 
 *::-webkit-scrollbar {

src/api/index.js

@@ -268,3 +268,6 @@ export function listOrder(data){
         method: "GET",
       });
 }
+
+
+export default {}

src/router/coffee.js

@@ -0,0 +1,67 @@
+export default [
+    {
+      path: "/coffee",
+      meta: {
+        title: "咖啡",
+      },
+      component: () =>
+        import(/* webpackChunkName: "coffee" */ "../views/coffee/index.vue"),
+      children: [
+        {
+          path: "orders",
+          name: "Orders",
+          meta: {
+            title: "订单列表",
+          },
+          component: () =>
+            import(
+              /* webpackChunkName: "coffee" */ "../views/coffee/orders/index.vue"
+            ),
+        },
+        {
+          path: "",
+          name: "Drinks",
+          meta: {
+            title: "点餐",
+          },
+          component: () =>
+            import(
+              /* webpackChunkName: "coffee" */ "../views/coffee/drinks/index.vue"
+            ),
+        },
+      ],
+    },
+    {
+      path: "/coffeeOrder",
+      name: "CoffeeOrder",
+      meta: {
+        title: "订单详情",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "coffee" */ "../views/coffee/order/index.vue"
+        ),
+    },
+    {
+      path: "/coffeeAddList",
+      name: "CoffeeAddList",
+      meta: {
+        title: "地址列表",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "coffee" */ "../views/coffee/contacts/list.vue"
+        ),
+    },
+    {
+      path: "/coffeeEdit",
+      name: "CoffeeEdit",
+      meta: {
+        title: "编辑地址",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "coffee" */ "../views/coffee/contacts/edit_add.vue"
+        ),
+    },
+  ];

src/router/index.js

@@ -2,129 +2,90 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 Vue.use(VueRouter);
 
-import Appointment from "../views/Appointment.vue"
-const routes = [
+import Appointment from "../views/Appointment.vue";
+
+import coffee from "./coffee";
+import report from "./report";
+// http://djweb.smcic.net/hair/index.html#/appointment
+const router = new VueRouter({
+  routes: [
     {
       path: "/",
       name: "Queue",
-      component: () => import(/* webpackChunkName: "hair" */ "../views/Queue.vue"),
+      component: () =>
+        import(/* webpackChunkName: "hair" */ "../views/Queue.vue"),
       meta: {
-          title: '美发预约系统'
-      }
+        title: "美发预约系统",
+      },
     },
     {
       path: "/apply",
       name: "Apply",
-      component: () => import(/* webpackChunkName: "hair" */ "../views/Apply.vue"),
+      component: () =>
+        import(/* webpackChunkName: "hair" */ "../views/Apply.vue"),
       meta: {
-          title: '美发预约系统'
-      }
+        title: "美发预约系统",
+      },
     },
     {
       path: "/applyreal",
       name: "Applyreal",
-      component: () => import(/* webpackChunkName: "hair" */ "../views/Applyreal.vue"),
+      component: () =>
+        import(/* webpackChunkName: "hair" */ "../views/Applyreal.vue"),
       meta: {
-          title: '美发预约系统'
-      }
+        title: "美发预约系统",
+      },
     },
     {
       path: "/appointment",
       name: "Appointment",
       component: Appointment,
       meta: {
-          title: '美发预约系统'
-      }
+        title: "美发预约系统",
+      },
     },
     {
-        path: '/actionSheet',
-        name: "ActionSheet",
-        component: () => import(/* webpackChunkName: "actionSheet" */ "../views/ActionSheet.vue"),
-        meta: {
-            title: '汽车保险'
-        }
+      path: "/actionSheet",
+      name: "ActionSheet",
+      component: () =>
+        import(/* webpackChunkName: "actionSheet" */ "../views/ActionSheet.vue"),
+      meta: {
+        title: "汽车保险",
+      },
     },
     {
-        path: '/menuDiet',
-        name: "MenuDiet",
-        component: () => import(/* webpackChunkName: "menu" */ "../views/MenuDiet.vue"),
-        meta: {
-            title: '菜单'
-        }
+      path: "/menuDiet",
+      name: "MenuDiet",
+      component: () =>
+        import(/* webpackChunkName: "menu" */ "../views/MenuDiet.vue"),
+      meta: {
+        title: "菜单",
+      },
     },
     {
-        path: '/pushMenu',
-        name: "PushMenu",
-        component: () => import(/* webpackChunkName: "menu" */ "../views/PushMenu.vue"),
-        meta: {
-            title: '添加菜单'
-        }
+      path: "/pushMenu",
+      name: "PushMenu",
+      component: () =>
+        import(/* webpackChunkName: "menu" */ "../views/PushMenu.vue"),
+      meta: {
+        title: "添加菜单",
+      },
     },
     // 排行
     {
-        path: '/ranking',
-        name: "Ranking",
-        component: () => import(/* webpackChunkName: "ranking" */ "../views/ranking/index.vue"),
-        meta: {
-            title: '各频率频道日推数据'
-        }
-    },
-    // 咖啡
-    {
-        path: '/coffee',
-        name: "Coffee",
-        meta: {
-            title: '咖啡'
-        },
-        component: () => import(/* webpackChunkName: "coffee" */ "../views/coffee/index.vue"),
-        children: [
-            {
-                path: "orders",
-                name: "Orders",
-                meta: {
-                    title: '订单列表'
-                },
-                component: ()=> import(/* webpackChunkName: "coffee" */ "../views/coffee/orders/index.vue")
-            },
-            {
-                path: "",
-                name: "Drinks",
-                meta: {
-                    title: '点餐'
-                },
-                component: ()=> import(/* webpackChunkName: "coffee" */ "../views/coffee/drinks/index.vue")
-            }
-        ]
-    },
-    {
-        path: "/coffeeOrder",
-        name: "CoffeeOrder",
-        meta: {
-            title: '订单详情'
-        },
-        component: ()=> import(/* webpackChunkName: "coffee" */ "../views/coffee/order/index.vue")
-    },
-    {
-        path: "/coffeeAddList",
-        name: "CoffeeAddList",
-        meta: {
-            title: '地址列表'
-        },
-        component: ()=> import(/* webpackChunkName: "coffee" */ "../views/coffee/contacts/list.vue")
+      path: "/ranking",
+      name: "Ranking",
+      component: () =>
+        import(/* webpackChunkName: "ranking" */ "../views/ranking/index.vue"),
+      meta: {
+        title: "各频率频道日推数据",
+      },
     },
-    {
-        path: "/coffeeEdit",
-        name: "CoffeeEdit",
-        meta: {
-            title: '编辑地址'
-        },
-        component: ()=> import(/* webpackChunkName: "coffee" */ "../views/coffee/contacts/edit_add.vue")
-    }
-];
-// http://djweb.smcic.net/hair/index.html#/appointment
-
-const router = new VueRouter({
-  routes,
+    //    咖啡
+    ...coffee,
+    //   周报
+    ...report
+  ]
 });
 
 export default router;

src/router/report.js

@@ -0,0 +1,13 @@
+export default [
+  {
+    path: "/advertisement",
+    name: "Advertisement",
+    meta: {
+      title: "电视广告数据周报",
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "report" */ "../views/report/Advertisement/index.vue"
+      ),
+  },
+];

src/views/report/Advertisement/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="Advertisement">
+    <div class="item">
+      <section class="title">
+        <section>电视广告投放简析</section>
+        <img
+          src="../../../assets/image/640.png"
+          width="96.9922px"
+          style="float: right"
+        />
+      </section>
+      <br />
+      <div class="article">
+        <section
+          style="
+            line-height: 1.75em;
+            margin-bottom: 8px;
+            margin-left: 8px;
+            margin-right: 8px;
+            visibility: visible;
+            text-indent: 2em;
+          "
+        >
+          <span
+            style="color: rgb(84, 84, 84); font-size: 15px; visibility: visible"
+            >根据CTR媒介智讯的数据显示，
+          </span>
+          <span
+            style="font-size: 15px; color: rgb(255, 88, 0); visibility: visible"
+          >
+            <strong style="visibility: visible">
+              2022年上半年电视广告刊例花费同比下跌14.7%。电视广告自3月份开始环比持续提升，至6月环比上涨2.2%。
+            </strong>
+          </span>
+        </section>
+      </div>
+    </div>
+    <div class="item">
+      <section class="title">
+        <section>细分信息对比</section>
+        <img
+          src="../../../assets/image/640.png"
+          width="96.9922px"
+          style="float: right"
+        />
+      </section>
+      <br />
+      <h4 class="xifenxinxiTitle">
+        电视：
+        <span> 广告花费品牌榜单 </span>
+      </h4>
+      <br />
+      <h6 style="text-align: center">2022年8月电视广告花费TOP10</h6>
+      <br />
+      <van-row class="tableHead">
+        <van-col span="3">排名</van-col>
+        <van-col span="7">品牌</van-col>
+        <van-col span="7">费用(万元)</van-col>
+        <van-col span="7">同比增量</van-col>
+      </van-row>
+      <van-row class="tableBody">
+        <van-col span="3">1</van-col>
+        <van-col span="7">陈李济</van-col>
+        <van-col span="7">76246.93</van-col>
+        <van-col span="7">12.5%</van-col>
+      </van-row>
+      <br />
+      <h4 class="xifenxinxiTitle">
+        电视：
+        <span> 行业(大类)广告花费变化 </span>
+      </h4>
+      <br />
+      <h6 style="text-align: center">2022年8月电视广告TOP10行业(大类)</h6>
+      <br />
+      <canvas ref="adTop10" width="400" height="260"></canvas>
+      
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { Col as vanCol, Row as vanRow } from "vant";
+import "vant/lib/col/style/index";
+import "vant/lib/row/style/index";
+
+import {Init} from "./jsx/F2"
+
+export default {
+  name: "Advertisement",
+  data() {
+    return {};
+  },
+  mounted() {
+    Init(this.$refs.adTop10,window.devicePixelRatio)
+  },
+  computed: {},
+  methods: {},
+  beforeUnmount: function () {},
+  components: { vanCol, vanRow },
+};
+</script>
+
+<style>
+.Advertisement {
+  height: 100%;
+  padding: 22px 12px 12px 12px;
+  background-color: #fff;
+}
+.Advertisement .item {
+  max-width: 677px;
+  margin: 0 auto;
+  font-weight: 700;
+}
+.Advertisement section {
+  font-weight: 700;
+}
+.Advertisement .title {
+  background-color: #ff6827;
+  width: 196px;
+  margin: 0 auto;
+}
+.Advertisement .title section {
+  background-color: rgba(255, 255, 255, 0.5);
+  color: #fff;
+  font-size: 16px;
+  height: 35px;
+  line-height: 35px;
+  width: 166px;
+  text-align: center;
+}
+.xifenxinxiTitle {
+  color: #ff1c1c;
+}
+.xifenxinxiTitle span {
+  color: #1d1d1d;
+}
+.Advertisement .tableHead {
+  background-color: #d11e16;
+  color: #fff;
+}
+.tableHead .van-col,
+.tableBody .van-col {
+  height: 2em;
+  line-height: 2em;
+  text-align: center;
+  white-space: nowrap;
+}
+</style>

src/views/report/Advertisement/jsx/F2.jsx

@@ -0,0 +1,27 @@
+import { Canvas, Chart, Interval, Axis, Tooltip } from "@antv/f2";
+
+
+export function Init(ele,devicePixelRatio){
+      const data = [
+        { genre: "Sports", sold: 275 },
+        { genre: "Strategy", sold: 115 },
+        { genre: "Action", sold: 120 },
+        { genre: "Shooter", sold: 350 },
+        { genre: "Other", sold: 150 },
+      ];
+      // 获取 canvas context
+      const context = ele.getContext("2d");
+      const { props } = (
+        <Canvas context={context} pixelRatio={devicePixelRatio}>
+          <Chart data={data}>
+            <Axis field="genre" />
+            <Axis field="sold" />
+            <Interval x="genre" y="sold" color="genre" />
+            <Tooltip />
+          </Chart>
+        </Canvas>
+      );
+      console.log(props);
+      const canvas = new Canvas(props);
+      canvas.render();
+}

src/views/report/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <router-view class="main_coffee" />
+</template>
+
+<script>
+export default {
+  name: "Report",
+  data() {
+    return {};
+  },
+  mounted() {},
+  computed: {},
+  methods: {},
+  beforeUnmount: function () {},
+  components: {},
+};
+</script>
+
+<style>
+.main_coffee {
+  width: 100vw;
+  height: calc(100% - 50px);
+}
+</style>