record

JInann · Nov 10, 2023 · c19ad09 · c19ad09
1 parent fabdf4c
commit c19ad09
Show file tree

Hide file tree

Showing 12 changed files with 261 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "axios": "^0.26.1",
     "dayjs": "^1.11.0",
+    "echarts": "^5.4.3",
     "jszip": "^3.10.1",
     "pinia": "^2.0.11",
     "swiper": "^5.4.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/record/App.vue b/src/pages/record/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div ref="app" class="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./mixin.scss";
+.app {
+  height: 100vh;
+  overflow: scroll;
+  background-color: #f0f2f6;
+  width: 100vw;
+  overflow-x: hidden;
+}
+</style>
diff --git a/src/pages/record/api.ts b/src/pages/record/api.ts
@@ -0,0 +1,4 @@
+const host = "http://api.1036892522.top";
+export default {
+  record: host + "/record",
+};
diff --git a/src/pages/record/common.ts b/src/pages/record/common.ts
@@ -0,0 +1,15 @@
+import axios from "axios";
+import api from "./api";
+const GET = (url: string) => {
+  return axios
+    .get(url)
+    .then((res) => res.data)
+    .then((res) => {
+      if (res.code != -1) {
+        return res.data;
+      } else {
+        throw new Error(res.msg);
+      }
+    });
+};
+export { api, GET };
diff --git a/src/pages/record/index.html b/src/pages/record/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+  <title>ucw tools</title>
+  <script>
+    !(function (doc, win) {
+      var docEl = doc.documentElement;
+      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
+      var recalc = function () {
+        var clientWidth = docEl.clientWidth;
+        var MAX_WIDTH = 750; // 设计稿宽度为750px，html设置字体大小100px，设计稿上30px相当于页面上0.3rem；
+        if (!clientWidth) {
+          return;
+        }
+        if (clientWidth >= MAX_WIDTH) {
+          docEl.style.fontSize = '100px';
+        } else {
+          docEl.style.fontSize = 100 * (clientWidth / MAX_WIDTH) + 'px';
+        }
+      };
+      recalc();
+      if (!doc.addEventListener) {
+        return;
+      }
+      win.addEventListener(resizeEvt, recalc, false);
+      doc.addEventListener('DOMContentLoaded', recalc, false);
+    })(document, window);
+  </script>
+</head>
+
+<body style="font-size:16px">
+  <noscript>
+    <strong>We're sorry but mass doesn't work properly without JavaScript enabled. Please enable it to
+      continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+  <script type="module" src="./main.ts"></script>
+</body>
+
+</html>
diff --git a/src/pages/record/index.vue b/src/pages/record/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="record">
+    <!-- <h1>余额</h1> -->
+    <div class="yue"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import * as echarts from "echarts";
+import { onMounted } from "vue";
+import { api, GET } from "./common";
+onMounted(() => {
+  const myChart = echarts.init(
+    document.querySelector(".yue") as HTMLDivElement
+  );
+  const option = {
+    xAxis: {
+      type: "category",
+      data: [] as string[],
+      name: "日期",
+    },
+    yAxis: [
+      {
+        type: "value",
+        name: "余额(w)",
+      },
+      {
+        type: "value",
+        name: "新增(w)",
+      },
+    ],
+    series: [
+      {
+        data: [] as number[],
+        type: "bar",
+      },
+      {
+        data: [] as number[],
+        type: "line",
+        yAxisIndex: 1,
+      },
+    ],
+    tooltip: {
+      show: true,
+      trigger: "axis",
+      formatter: "余额: {c0}<br />新增: {c1}",
+    },
+  };
+  GET(api.record + location.search).then((res) => {
+    let data = res;
+    data.forEach((item, i) => {
+      option.xAxis.data.push(item.dt);
+      option.series[0].data.push(item.value);
+      if (i > 0) {
+        option.series[1].data.push(item.value - data[i - 1].value);
+      }
+    });
+    myChart.setOption(option);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./mixin.scss";
+.yue {
+  margin: 0 auto;
+  width: 1000px;
+  height: 500px;
+}
+</style>
+<style>
+@font-face {
+  font-family: num;
+  src: url(./font/num.OTF);
+}
+html,
+body {
+  background-color: #f0f2f6 !important;
+}
+.ani {
+  pointer-events: none;
+}
+* {
+  line-height: 1;
+}
+</style>
diff --git a/src/pages/record/main.ts b/src/pages/record/main.ts
@@ -0,0 +1,18 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import store from "./store";
+import { createRouter, createWebHashHistory } from "vue-router";
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [{ path: "/", component: () => import("./index.vue") }],
+});
+
+// Vue.config.productionTip = false;
+// import VConsole from "vconsole";
+if (import.meta.env.VITE_APP_TITLE != "production") {
+  // new VConsole();
+}
+const app = createApp(App);
+app.use(store);
+app.use(router);
+app.mount("#app");
diff --git a/src/pages/record/mixin.scss b/src/pages/record/mixin.scss
@@ -0,0 +1,47 @@
+@mixin imgBg($url,$width,$height) {
+  background-image:url($url);
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: $width $height;
+  width:$width;
+  height:$height;
+}
+@mixin flexCenter() {
+  display:flex; 
+  justify-content: center;
+  align-items:center;
+}
+@mixin font($size,$color,$weight:normal) {
+  font-size: $size;
+  color: $color;
+  font-weight: $weight;
+}
+@function top($top){
+  @return "calc(var(--top,0) + 0.2rem + "+$top+")";
+}
+@mixin fontBorder($size:0.02rem,$color:#000,$blur:0.0rem) {
+  text-shadow: $size 0 $blur $color,
+  calc(#{$size} * -1) 0 $blur $color,
+  0 calc(#{$size} * -1)  $blur $color,
+  0 $size $blur $color,0 0 $size $color,
+  $size $size $blur $color,0 0 $size $color,
+  calc(#{$size} * -1) calc(#{$size} * -1) $blur $color,0 0 $size $color,
+  calc(#{$size} * -1) $size $blur $color,0 0 $size $color,
+  $size calc(#{$size} * -1) $blur $color,0 0 $size $color,;
+}
+@mixin textHide($max_width){
+  max-width: $max_width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: keep-all;
+  white-space: nowrap;
+}
+.n::after {
+  content: "数";
+  display: inline-block;
+  width: 0;
+  opacity: 0;
+}
+img {
+  -webkit-touch-callout: none;
+}
diff --git a/src/pages/record/store.ts b/src/pages/record/store.ts
@@ -0,0 +1,10 @@
+import { createPinia, defineStore } from "pinia";
+import { api, APP, debounce, GET, JGET } from "./common";
+export default createPinia();
+export const useStore = defineStore("store", {
+  state: () => {
+    return {};
+  },
+  getters: {},
+  actions: {},
+});
diff --git a/src/pages/record/ts.d.ts b/src/pages/record/ts.d.ts
diff --git a/src/pages/record/useApi.ts b/src/pages/record/useApi.ts