feat: 接口联调

css/index.css

@@ -138,12 +138,12 @@ h3.title {
   color: rgba(255, 255, 255, 0.85);
 }
 .text-container p.name {
-  margin-bottom: 15px;
-  font-size: 16px;
+  margin-bottom: 0.78125vw;
+  font-size: 0.8333vw;
   font-weight: 500;
 }
 .text-container p.num {
-  font-size: 20px;
+  font-size: 1.042vw;
   font-weight: 700;
   cursor: pointer;
 }

index.html

@@ -3,6 +3,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>查账</title>
+  <link rel="icon" href="./img/1698663585020favicon2.ico">
 
   <link rel="stylesheet" href="./css/index.css">
   <link rel="stylesheet" href="./css/dialog.css">
@@ -142,6 +143,7 @@
   </div>
 
   <script src="./js/echarts.min.js"></script>
+  <script src="./js/dayjs.min.js"></script>
   <script src="./js/index.js"></script>
 
   <script>

js/index.js

@@ -11,8 +11,9 @@ const axisTick = {
 
 function init() {
   showCwzbClickFunc()
-  initSzqkCharts()
-  initNsqkCharts()
+  // initSzqkCharts()
+  // initNsqkCharts()
+  getIndexData()
 
   document.querySelector('.dialog-footer .close-dialog').addEventListener('click', closeDialog)
 }
@@ -53,7 +54,7 @@ function closeDialog() {
   // }, 500)
 }
 
-function initSzqkCharts() {
+function initSzqkCharts(data) {
   var chartDom = document.querySelector('.szqk-echarts-box');
   var myChart = echarts.init(chartDom);
   var option;
@@ -75,7 +76,7 @@ function initSzqkCharts() {
       }
     },
     legend: {
-      data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
+      data: ['收入', '成本', '费用', '利润'],
       top: '0%',
       right: '1.5%',
       icon: 'circle',
@@ -116,7 +117,7 @@ function initSzqkCharts() {
     xAxis: [
       {
         type: 'category',
-        data: ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月', '2016年6月', '2016年7月', '2016年8月', '2016年9月', '2016年10月', '2016年11月', '2016年12月'],
+        data: cal1Year(),
         axisTick,
       }
     ],
@@ -127,7 +128,7 @@ function initSzqkCharts() {
     ],
     series: [
       {
-        name: 'Line 1',
+        name: '收入',
         type: 'line',
         stack: 'Total',
         smooth: true,
@@ -147,10 +148,10 @@ function initSzqkCharts() {
         emphasis: {
           focus: 'series'
         },
-        data: [140, 232, 101, 264, 90, 340, 250, 101, 264, 90, 340, 250]
+        data: data.sr,
       },
       {
-        name: 'Line 2',
+        name: '成本',
         type: 'line',
         stack: 'Total',
         smooth: true,
@@ -170,10 +171,10 @@ function initSzqkCharts() {
         emphasis: {
           focus: 'series'
         },
-        data: [120, 282, 111, 234, 220, 340, 310, 111, 234, 220, 340, 310]
+        data: data.cb,
       },
       {
-        name: 'Line 3',
+        name: '费用',
         type: 'line',
         stack: 'Total',
         smooth: true,
@@ -193,10 +194,10 @@ function initSzqkCharts() {
         emphasis: {
           focus: 'series'
         },
-        data: [320, 132, 201, 334, 190, 130, 220, 201, 334, 190, 130, 220]
+        data: data.fy
       },
       {
-        name: 'Line 4',
+        name: '利润',
         type: 'line',
         stack: 'Total',
         smooth: true,
@@ -216,7 +217,7 @@ function initSzqkCharts() {
         emphasis: {
           focus: 'series'
         },
-        data: [220, 402, 231, 134, 190, 230, 120, 231, 134, 190, 230, 120]
+        data: data.lr
       },
     ]
   };
@@ -227,12 +228,13 @@ function initSzqkCharts() {
   })
 }
 
-function initNsqkCharts() {
+function initNsqkCharts(data) {
   var chartDom = document.querySelector('.nsqk-echarts-box');
   var myChart = echarts.init(chartDom);
   var option;
 
   option = {
+    color: ['rgba(42, 130, 228, 1)', '#07BEAA', '#FF8D1A', '#AC33C1'],
     tooltip: {
       trigger: 'axis',
       axisPointer: {
@@ -240,7 +242,7 @@ function initNsqkCharts() {
       }
     },
     title: {
-      text: '收支情况（近一年）',
+      text: '纳税情况（近一年）',
       textStyle,
       subtext: '单位：元'
     },
@@ -254,7 +256,7 @@ function initNsqkCharts() {
     xAxis: [
       {
         type: 'category',
-        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        data: cal1Year(),
         axisTick
       }
     ],
@@ -267,9 +269,8 @@ function initNsqkCharts() {
       {
         name: 'Direct',
         type: 'bar',
-        barWidth: '60%',
         barWidth: 27,
-        data: [10, 52, 200, 334, 390, 330, 220]
+        data: data.ns
       }
     ]
   };
@@ -278,4 +279,29 @@ function initNsqkCharts() {
   window.addEventListener('resize', function () {
     myChart.resize()
   })
+}
+
+async function getIndexData () {
+  const response = await fetch('/api/public/wzfCzList', {
+    method: 'POST',
+    mode: 'cors',
+    headers: {
+      "Content-Type": "application/json",
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: JSON.stringify({
+      key: '85b3073504fa703c29db2c36c14632fe3fd07bfd',
+      taxNo: '91330782MA2GXE6NX2'
+    })
+  })
+  const res = await response.json()
+  console.log(dayjs)
+  initSzqkCharts(res.data)
+  initNsqkCharts(res.data)
+}
+
+function cal1Year() {
+  return Array(12).fill(0).map((_, i) => {
+    return dayjs().subtract(11 - i, 'month').format('YYYY年MM月')
+  })
 }

package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.20.3",
     "express": "^4.21.2",
     "request": "^2.88.2"
   }

server.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const request = require('request');
 const path = require('path');
+const bodyParser = require('body-parser');
 
 const app = express();
 const port = 5500;
@@ -12,6 +13,8 @@ app.use('/css', express.static(path.join(__dirname, 'css')));
 app.use('/img', express.static(path.join(__dirname, 'img')));
 app.use('/index.html', express.static(path.join(__dirname, 'index.html')));
 
+app.use(bodyParser.json())
+
 // 允许跨域
 app.all('*', function (req, res, next) {
   res.header("Access-Control-Allow-Origin", '*');
@@ -46,7 +49,6 @@ app.post('*', (req, res) => {
     method: 'POST',
     json: req.body,
     headers: {
-      token: req.headers.token,
       'content-type': req.headers['content-type']
     }
   };