dt-fe · mmmiaoo · Aug 7, 2021 · Aug 7, 2021 · Aug 7, 2021 · Aug 9, 2021
diff --git a/苗雅文/dist/index.html b/苗雅文/dist/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!-- <script src="../main.js"></script> -->
+    <title>阿里练习生项目——交易页面</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  <script src="./main.js"></script></body>
+</html>
diff --git a/苗雅文/dist/main.js b/苗雅文/dist/main.js
diff --git a/苗雅文/package-lock.json b/苗雅文/package-lock.json
diff --git a/苗雅文/package.json b/苗雅文/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "webpack01",
+  "version": "1.0.0",
+  "description": "alibb项目",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server --open --config webpack.config.js"
+  },
+  "author": "miao",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/runtime": "^7.15.3",
+    "antd-icon-loader": "^1.0.0",
+    "babel-loader": "^8.2.2",
+    "html-webpack-plugin": "^4.5.0",
+    "react-hot-loader": "^4.13.0",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2"
+  },
+  "dependencies": {
+    "@ant-design/compatible": "^1.0.8",
+    "@ant-design/icons": "^4.6.3",
+    "antd": "^4.16.9",
+    "css-loader": "^4.3.0",
+    "echarts": "^5.1.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^6.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "style-loader": "^1.3.0",
+    "url-loader": "^4.1.1"
+  }
+}
diff --git a/苗雅文/public/index.html b/苗雅文/public/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
+    <!-- <script src="../main.js"></script> -->
+    <title>阿里练习生项目——交易页面</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/苗雅文/src/App.css b/苗雅文/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/苗雅文/src/App.js b/苗雅文/src/App.js
@@ -0,0 +1,14 @@
+import './App.css';
+import Nav from './components/navComponent/nav'
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function App() {
+  return (
+    <div className="App">
+      <Nav />  
+    </div>
+  );
+}
+
+export default App;
diff --git a/苗雅文/src/assets/img/arrowdown.png b/苗雅文/src/assets/img/arrowdown.png
diff --git a/苗雅文/src/assets/img/arrowup.png b/苗雅文/src/assets/img/arrowup.png
diff --git a/苗雅文/src/assets/img/index.png b/苗雅文/src/assets/img/index.png
diff --git a/苗雅文/src/assets/img/index2.png b/苗雅文/src/assets/img/index2.png
diff --git a/苗雅文/src/assets/img/index3.png b/苗雅文/src/assets/img/index3.png
diff --git a/苗雅文/src/assets/img/reset.svg b/苗雅文/src/assets/img/reset.svg
diff --git a/苗雅文/src/assets/img/trade.svg b/苗雅文/src/assets/img/trade.svg
diff --git a/苗雅文/src/components/blank/blan.jsx b/苗雅文/src/components/blank/blan.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+class Blank extends React.Component {
+    render(){
+        return(
+            <div>
+
+            </div>
+        )
+    }
+}
+
+export default Blank;
diff --git a/苗雅文/src/components/chartComponent/charts.css b/苗雅文/src/components/chartComponent/charts.css
@@ -0,0 +1,8 @@
+#chart{
+    display: flex;
+    width: 100%;
+}
+
+#inchart{
+    flex:1;
+}
diff --git a/苗雅文/src/components/chartComponent/charts.jsx b/苗雅文/src/components/chartComponent/charts.jsx
@@ -0,0 +1,215 @@
+import React from 'react';
+// import request from '../../fetch';
+import "./charts.css"
+import * as echarts from 'echarts';
+// import echarts from 'echarts/lib/echarts'
+import moment from 'moment';
+import { getKeyThenIncreaseKey } from 'antd/lib/message';
+
+
+
+class Chart extends React.Component {
+    constructor(props) {
+        let current = moment().local("zh-cn").format("YYYY-MM-DD")
+        let weekAgo = moment().subtract(7, "days").format("YYYY-MM-DD")
+        super(props);
+        this.state = {
+            // legendData: [],
+            source: [],
+            series: [],
+            myChart:"",
+            date:[current, weekAgo]//初始选中date，最近一周
+        }
+        this.getMaxLength = this.getMaxLength.bind(this);
+    };
+    //将数组的行变成列，列改变为行
+    getMaxLength(arr) {
+        var max = 0;
+        if (!arr) return max;
+        for (let i = 0; i < arr.length; i++) {
+            if (arr[i].length > max) {
+                max = arr[i].length;
+            }
+        }
+        return max;
+    }
+    changearr(oldarr) {
+        // console.log(oldarr);
+        var maxLength = this.getMaxLength(oldarr);
+        if (!maxLength) return oldarr
+        var rowarr = []
+        for (var k = 0; k < oldarr.length; k++) {
+            for (var m = 0; m < maxLength; m++) {
+                if (!rowarr[m]) rowarr[m] = [];
+                rowarr[m].push(oldarr[k][m]);
+            }
+        }
+        return rowarr;
+    }
+    //在加载成功前初始化图表占位
+    initBarEcharts() {
+        let myChart = echarts.init(document.getElementById('main'));
+        let options = {
+            title: { text: 'ECharts 入门示例' },
+            tooltip: {},
+            xAxis: {
+                data: this.state.data
+            },
+            yAxis: {},
+            series: [{
+                name: '销量',
+                type: 'bar',
+            }]
+        };
+        myChart.setOption(options, true)
+    }
+
+    componentDidMount() {
+        this.setState({
+            myChart: echarts.init(this.node)
+        })
+    }
+
+    componentWillMount() {
+    }
+
+    componentDidUpdate(prevProps) {
+        let option = {
+            title: {
+                subtext: `已选 ${this.props.options.length}/ ${prevProps.com.length}`,
+                right: 50
+            },
+            grid: {
+                width: "100%",
+                left: 70
+            },
+            legend: {
+                left: 50,
+                icon: "rect",
+                itemHeight: 10,
+                itemWidth: 10
+            },
+            tooltip: {
+                trigger: 'axis',
+            },
+            toolbox: {
+                show: "true",
+                feature: {
+                    myReset: {
+                        show: true,
+                        title: '重置',
+                        icon: 'path://M512 842.66666667c-102.4 0-201.6-38.4-278.4-108.8-12.8-12.8-12.8-32-3.2-44.8 12.8-12.8 32-12.8 44.8-3.2 64 57.6 150.4 92.8 236.8 92.8 195.2 0 352-156.8 352-352S707.2 74.66666667 512 74.66666667c-172.8 0-316.8 121.6-345.6 291.2-3.2 19.2-19.2 28.8-38.4 25.6-16-3.2-28.8-19.2-25.6-38.4C137.6 154.66666667 310.4 10.66666667 512 10.66666667c230.4 0 416 185.6 416 416s-185.6 416-416 416z',
+                        onclick: this.props.clearOption
+                    },
+                }
+            },
+            dataset: [{
+                id: 'dataset_raw',
+                source: this.state.source
+            },
+            ],
+            // 类目轴category
+            xAxis: {
+                show: 'false',
+                type: 'category',
+                axisLabel:{interval:0} //这里是为了阻止echarts类目轴数字太多时，会隔一个显示一个
+            },
+            yAxis: {
+                axisLabel: {//这个设置是为了y轴不显示数字
+                    formatter: function () {
+                        return "";
+                    }
+                }
+            },
+            series:
+                this.state.series
+        }
+        this.state.myChart.setOption(option, true)
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.options === []) {
+            this.setState({
+                source: [],
+                series: []
+            })
+        }
+        if (this.props.idDates && this.props.date && this.props.idValues) {
+            //以下操作获取props传值
+            let date = new Array()
+            if(nextProps != this.props.date){
+                date = [nextProps.date[0], nextProps.date[1]]
+                this.setState({
+                    date: nextProps.date
+                })
+            }
+
+            let legend = nextProps.idDates; //全部时间
+            let leValue = nextProps.idValues;//全部的详细数据
+            // console.log(legend);
+            // console.log(leValue);
+            //对全部的时间转时间戳
+            if(legend){
+                legend = legend.map((item) => {
+                    return (
+                        moment(item).format().split("T")[0]
+                    )
+                })
+            }
+
+            //选中的时间在整个时间数组的位置，因此获取时间的
+            let color = ['#5FABF9', '#FF9F4E', '#76D687', '#77E0DE', '#979CBD',
+                '#FFC159', '#EC78BE', '#4DB8FF', '#FC8474', '#D26FF5', '#FF715F', '#875B9B'];
+            let series = [];
+            let i = legend.indexOf(date[0]), j = legend.indexOf(date[1]);//查找选中的时间
+            let datesel = legend.slice(i, j + 1);//获取选中的时间段
+            let valuesel = [];
+            for (let k = 0; k < this.props.com.length; k++) {
+                let tmp = leValue[k];//从数据的数组中获取
+                if (!tmp) {
+                    tmp = [0]
+                }
+
+                valuesel[k] = tmp.slice(i, j + 1)//获取选中时间段对应数据
+            };
+            // console.log(valuesel);
+            let tmp = this.changearr(valuesel), valueChange = [];//这里给数组横纵转换，以符合chartdata要求
+            if (tmp) {
+                valueChange[0] = new Array()
+                valueChange[0].push("pruduct")
+                for (let i = 0; i < tmp.length; i++) {
+                    valueChange[i + 1] = new Array();
+                    valueChange[i + 1].push(datesel[i])
+                    for (let j of nextProps.options) {
+                        if (!valueChange[0].includes(this.props.com[j])) {
+                            valueChange[0].push(this.props.com[j]) //这里在构成横坐标的数据
+                            series.push({ type: 'line', smooth: 'true', symbol: 'none', color: color[j] })//这里能保证color是一一对应不会改变的
+                        }
+                        valueChange[i + 1].push(tmp[i][j])//这里填入选中时间对应的value数据
+                    }
+                }
+            }
+            this.setState({
+                source: valueChange,
+                series: series
+            })
+        }
+    }
+    componentWillUnmount = () => {
+        this.setState = (state,callback)=>{
+          return;
+        };
+    }    
+    render() {
+        return (
+            <div id="chart">
+                <div id="inchart" ref={node => this.node = node} style={{ height: "400px", background: 'white' }}></div>
+            </div>
+        )
+    }
+}
+
+export default Chart;
+
+
+