debug insertionSort.

build/webpack.base.conf.js

@@ -1,4 +1,5 @@
 'use strict'
+const webpack = require('webpack')
 const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
@@ -88,5 +89,13 @@ module.exports = {
     net: 'empty',
     tls: 'empty',
     child_process: 'empty'
-  }
+  },
+  plugins:[
+    new webpack.ProvidePlugin({
+      $:"jquery",
+      jQuery:"jquery",
+      jquery:"jquery",
+      "window.jQuery":"jquery"
+    })
+  ]
 }

config/index.js

@@ -3,6 +3,7 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 
 const path = require('path')
+const { webpack } = require('webpack')
 
 module.exports = {
   dev: {
@@ -10,7 +11,17 @@ module.exports = {
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/api':{
+        target:'http://127.0.0.1:8080',
+        ws:true,
+        secure:false,
+        changeOrigin:true,
+        pathRewrite:{
+          '^/api':''
+        }
+      }
+    },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
@@ -72,5 +83,13 @@ module.exports = {
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
     bundleAnalyzerReport: process.env.npm_config_report
-  }
+  },
+  // plugins:[
+  //   new webpack.ProvidePlugin({
+  //     $:"jquery",
+  //     jQuery:"jquery",
+  //     jquery:"jquery",
+  //     "window.jQuery":"jquery"
+  //   })
+  // ]
 }

package.json

@@ -12,9 +12,13 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "echarts": "^5.1.1",
     "element-ui": "^2.15.1",
     "es6-promise": "^4.2.8",
+    "jquery": "^3.6.0",
+    "module": "^1.2.5",
     "node-sass": "^4.14.1",
+    "qs": "^6.10.1",
     "vue": "^2.5.2",
     "vue-resource": "^1.5.2",
     "vue-router": "^3.5.1",

src/App.vue

@@ -17,6 +17,7 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 0px;
+  overflow: hidden;
 }
 </style>

src/api.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
 
+axios.defaults.baseURL='/api/';
 axios.defaults.headers.post['Content-Type'] = 'application/json';
-
+//axios.defaults.headers.get['Content-Type']='application/json'
 export const stackPush=(content,value)=>{
     return axios.get('/stack/push',{
         params: {
@@ -19,16 +20,16 @@ export const stackPop=(content)=>{
     })
 }
 
-export const bubbleSort=(content,rule)=>{
+export const bubbleSort=(rule,content)=>{
     return axios.get('/bubble-sort/get-analysis-result',{
         params: {
-            content: content,
-            rule: rule
+            rule: rule,
+            content: content
         }
     })
 }
 
-export const selectionSort=(content,rule)=>{
+export const selectionSort=(rule,content)=>{
     return axios.get('/selection-sort/get-analysis-result',{
         params: {
             content: content,
@@ -37,7 +38,7 @@ export const selectionSort=(content,rule)=>{
     })
 }
 
-export const insertionSort=(content,rule)=>{
+export const insertionSort=(rule,content)=>{
     return axios.get('insertion-sort/get-analysis-result',{
         params: {
             content: content,
@@ -46,7 +47,7 @@ export const insertionSort=(content,rule)=>{
     })
 }
 
-export const quickSort=(content,rule)=>{
+export const quickSort=(rule,content)=>{
     return axios.get('quick-sort/get-analysis-result',{
         params: {
             content: content,
@@ -64,13 +65,13 @@ export const newUDWGraph=(data)=>{
 }
 
 export const graphBreadthFirstTraversal=(data)=>{
-    return axios.post('/graph/get-breadth-first-traversal',data)
+    return axios.post(`/graph/get-breath-first-traversal?startVertex=${data.startVertex}`,data)
 }
 
 export const graphDepthFirstTraversal=(data)=>{
-    return axios.post('/graph/get-depth-first-traversal',data)
+    return axios.post(`/graph/get-depth-first-traversal?startVertex=${data.startVertex}`,data)
 }
 
-export const graphPrimSmallestSpanningTree=(data)=>{
-    return axios.post('/graph/get-prim-smallest-spanning-tree',data)
+export const graphPrimSmallestSpanningTree=(data,params)=>{
+    return axios.post('/graph/get-prim-smallest-spanning-tree',data,params)
 }

src/components/bubbleSort.vue

@@ -2,7 +2,7 @@
   <el-container>
     <el-header>
       <el-row>
-        numbers:
+        <label>numbers:</label>
         <el-input
           class="input"
           v-model="numbersStr"
@@ -10,7 +10,7 @@
         ></el-input>
       </el-row>
       <el-row>
-        rule:
+        <label>rule:</label>  
         <el-select
           v-model="rule"
           placeholder=" please select ordering rule"
@@ -39,6 +39,7 @@
 
 <script>
   import sortChart from '@/components/sortChart';
+  import {bubbleSort} from '../api.js'
   export default {
     name: 'bubbleSort',
     components: {
@@ -1934,6 +1935,18 @@
 
       }
     },
+    // mounted: function(){
+    //   bubbleSort({
+    //     content: this.numbersStr.split(",").map(Number),
+    //     rule:this.rule
+    //   }).then(res=>{
+    //     res=res.content;
+    //     let stepUnit=res.onSortingStates.map((v)=>v.content)
+    //     let allSteps=[res.initial.content,...stepUnit];
+    //     testList=allSttemplisteps;
+    //     this.testTmpItem=this.testList[0];
+    //   })
+    // },
     methods: {
       sleep (time) {
         return new Promise((resolve) => setTimeout(resolve, time));
@@ -1941,17 +1954,35 @@
       async start () {
         this.testTmpItem = [];
         await this.sleep(500);
-        let tmplist = ((res) => {
-          res = res.content;
-          let stepUnit = res.onSortingStates.map((v) => v.content);
-          let allSteps = [res.initial.content, ...stepUnit];
-          return allSteps;
-        })(this.testInsertionSort);
-
-        this.testTmpItem = tmplist[0];
-        await this.sleep(500);
-        for (let i = 0; i < tmplist.length; i++) {
-          this.testTmpItem = tmplist[i];
+        // let tmplist = ((res) => {
+        // res = res.content;
+        // let stepUnit = res.onSortingStates.map((v) => v.content);
+        // let allSteps = [res.initial.content, ...stepUnit];
+        // return allSteps;
+        // })(this.testInsertionSort);
+
+       // this.testTmpItem = tmplist[0];
+       // await this.sleep(500);
+      //  let realContent=[1,2,3];
+      //  console.log("realContent: "+realContent[2]);
+      //  console.log("rule: "+this.rule);
+      //  console.log("numbersStr: "+this.numbersStr);
+
+        bubbleSort(
+        //content: this.numbersStr.split(",").map(Number),
+        this.rule,
+        this.numbersStr.split(",").map(Number)
+        ).then(res=>{
+
+          res=res.data.content;
+          console.log("res:"+res);
+          let stepUnit=res.onSortingStates.map((v)=>v.content)
+          let allSteps=[res.initial.content,...stepUnit];
+          this.testList=allSteps;
+          this.testTmpItem=this.testList[0];
+        })
+        for (let i = 0; i < this.testList.length; i++) {
+          this.testTmpItem = this.testList[i];
           await this.sleep(300);
         }
       },
@@ -1965,6 +1996,13 @@
   }
   .el-row {
     align-items: left;
+    text-align: center;
+  }
+  .sortChart{
+    position:relative;
+    left:30%;
+    top:20%;
   }
+  
 </style>
 

src/components/graphBreadthFirstTraversal.vue

@@ -1,18 +1,509 @@
 <template>
-<div>{{msg}}</div>
+<el-container>
+  <el-header>
+    <el-row>
+      startVertex:
+      <el-select v-model="startVertex" placeholder="">
+          <el-option
+            v-for="item in startVertexOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+         <el-button
+          @click="run"
+          type="primary"
+        >
+          run
+        </el-button>
+        <el-button
+          @click="newGraph"
+          type="primary"
+        >
+          new Graph
+        </el-button>
+      </el-row>
+      <el-row>
+        <p>access sequence:{{sequence}}</p>
+      </el-row>
+  </el-header>
+  
+    <div id="echarts1"></div>
+  
+</el-container>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import {newUDUWGraph,graphBreadthFirstTraversal} from '../api.js';
+import qs from 'qs'
 export default {
   name: 'graphBreadthFirstTraversal',
   data () {
     return {
-      msg: 'Welcome to Your graphBreadthFirstTraversal'
+      msg: 'Welcome to Your graphBreadthFirstTraversal',
+      sequence:"",
+      startVertex:"",
+      startVertexOptions:[
+        {
+          value:0,
+          label:0
+        },
+        {
+          value:1,
+          label:1
+        },
+        {
+          value:2,
+          label:2
+        },
+        {
+          value:3,
+          label:3
+        },
+        {
+          value:4,
+          label:4
+        },
+        {
+          value:5,
+          value:5
+        },
+        {
+          value:6,
+          label:6
+        }
+      ],
+      timer:null,
+      //echarts配置项
+      links: [],  //边的属性设置
+      nodeData:[
+        {
+          name: "0",
+          x: 600,
+          y: -600,
+          fixed:true,
+          // itemStyle:{  //设置节点样式
+          //   borderColor:"black",
+          //   borderWidth:4
+          // }
+        },
+        {
+          name: "1",
+          x: 1000,
+          y: 500,
+          //fixed:true
+        },
+        {
+          name: "2",
+          x: 500,
+          y: 500,
+          //fixed:true
+        },
+        {
+          name: "3",
+          x: 200,
+          y: 300,
+          //fixed:true
+        },
+        {
+          name: "4",
+          x: 400,
+          y: 300,
+          //fixed:true
+        },
+        {
+          name: "5",
+          x: 200,
+          y: 100,
+          //fixed:true
+        },
+        {
+          name: "6",
+          x: 400,
+          y: 100,
+          //fixed:true
+        },
+      ]  //节点的属性设置
+
+     
+      
+    }
+  },
+  watch: {
+    $route(n, o) {
+      clearInterval(this.timer);
+      this.newGraph();
+    },
+  },
+  computed:{
+    options(){
+      let that=this;
+      let option={
+        tooltip: {},
+        animationDurationUpdate: 1500,
+        animationEasingUpdate: "quinticInOut",
+        series: [
+          {
+            type: "graph",
+            layout: "circular",
+            symbolSize: 50,
+            roam: false,
+            label: {
+              show: true,
+            },
+            edgeSymbol: ["circle"],
+            edgeSymbolSize: [4, 10],
+            edgeLabel: {
+              fontSize: 20,
+            },
+            data:that.nodeData, //节点配置
+            links: that.links, //边配置
+            lineStyle: {
+              opacity: 0.9,
+              width: 2,
+              curveness: 0,
+            },
+          },
+        ],
+      };
+      return option;
     }
-  }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.newGraph();
+    });
+  },
+  methods:{
+    newGraph(){
+      //在下一次newGraph之前，将所有的节点和边的样式初始化一下。
+        //初始化访问序列
+        this.sequence="";
+        //初始化节点样式
+      for(var m=0;m<7;m++){
+        this.nodeData[m].itemStyle={};
+      }
+      newUDUWGraph().then((res) => {
+        console.log("changeGraph res: "+res.data.content);
+          this.links = [];
+          let arr = res.data.content.content;
+          this.content = res.data.content;//这是一个图
+          console.log("this.content:"+this.content.content[3][6]);
+          arr.forEach((v, index) => {
+            v.forEach((el, i) => { //一条边有两条连线
+              if (index != i) {
+                if (arr[index][i] == 1&&index<i) {   //去掉重复边
+                    //links配置项
+                  this.links.push({
+                    source: index,
+                    target: i,
+                    symbol:["circle"],
+                    // label:{   //设置label
+                    //   normal:{
+                    //     show:true,
+                    //     formatter:"test"
+                    //   }
+                    // },
+                    // lineStyle:{      //边的颜色设置
+                    //   color:"green",
+                    // }
+                  });
+                }
+                // if (arr[i][index] == 1) {
+                //   this.links.push({
+                //     source: i,
+                //     target: index,
+                //   });
+                // }
+              }
+            });
+          });
+          this.initEcharts();
+        });
+    },
+    run() {
+      if (this.startVertex === "") {
+        this.$notify.error({
+          title: "error",
+          message: "Please select start vertex.",
+        });
+        return;
+      }
+      //在下一次run之前，将所有的节点和边的样式初始化一下。
+        //初始化访问序列
+        this.sequence="";
+        //初始化节点样式
+      for(var m=0;m<7;m++){
+        this.nodeData[m].itemStyle={};
+      }
+        //初始化边样式
+      let refreshLinks=this.links.map(link=>{
+        var refreshlink=link;
+        refreshlink.lineStyle={};
+        return refreshlink;
+      })
+      this.links=refreshLinks;
+      //var graphStr=qs.stringify(...this.content, { arrayFormat: "indices" })
+      graphBreadthFirstTraversal({
+        ...this.content,
+        startVertex: this.startVertex
+      }).then((res) => {
+        //console.log("breadth traversal response:"+res.data);
+        //clearInterval(this.timer);
+        let arr = res.data.content.content;
+        console.log("arr[0].start:"+arr[0].start);
+        let index = 0;
+        var formerVisitNode="";
+        var formerStyleLink={};
+        var visitedNum=0;
+        var tryFirst=true;
+        this.timer = setInterval(() => {
+          if (index != 0) {
+            // this.links.shift();
+          }
+          //每一步根据不同的类型和不同的结果设置不同的边和节点的样式
+          //var isReverse=false;
+         // var visitedNum=0;
+          
+          var step=arr[index];//当前step
+          var isReverse=false;
+          var linkSource=step.start;
+          var linkTarget=step.end;
+         // var formerVisitNode="";  //前一个被访问的节点是哪一个？
+          if(step.start>step.end){
+            isReverse=true;   //step的start end与边的source target是否一致
+            linkSource=step.end;
+            linkTarget=step.start;
+          }
+          //步骤类型如果为探路就设置边的样式，如果为访问就设置节点的样式
+          if(step.type=="tryRoad"){
+            console.log("======tryRoad====="+step.start+" "+step.end+"=========");
+            //第一次渲染
+            //遍历边，找到对应的边，设置，然后push
+          //第一次渲染
+            if(tryFirst==true){
+              console.log("************");
+              index--; //第二次渲染还访问这个数组
+              let newLinks=this.links.map(link=>{
+                if(link.source==linkSource&&link.target==linkTarget){  //如果是这条边
+                  var newlink=link;
+                  formerStyleLink=link; //将边原来的样式存起来，若探路失败，恢复成原来的状态。
+                  //要对这条边做什么
+                  //先尝试探路,将这条边设置为从起点指向终点的单箭头红色连线。
+                  if(isReverse){  //如果起点终点反了
+                    newlink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["arrow","none"],
+                      lineStyle:{
+                        color:"red"
+                      }
+                    }
+                  }else{//如果起点终点没有反
+                    newlink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["none","arrow"],
+                      lineStyle:{
+                        color:"red"
+                      }
+                    }
+                  }
+                  
+                  return newlink;
+                }
+                return link;
+              })
+              this.links=newLinks;
+              tryFirst=false;
+            }else{
+              tryFirst=true;//下面是下个数组的第一次访问
+              //第二次渲染
+              let relinks=this.links.map(link=>{
+                if(link.source==linkSource&&link.target==linkTarget){  //如果是这条边
+                  var relink=link;
+                  //要对这条边做什么
+                  //先尝试探路,将这条边设置为从起点指向终点的单箭头红色连线。
+                  if(step.success==true){  //探路成功
+                    relink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["none","none"],
+                      lineStyle:{
+                        color:"blue"
+                      }
+                    }
+                  }else{//探路没成功
+                    relink=formerStyleLink;
+                  }
+                  return relink;
+                }
+                return link;
+              })
+              this.links=relinks;
+            }  
+         
+          }else if(step.type=="visit"){
+            if(this.sequence===""){
+              this.sequence=step.end+"";
+            }else{
+              this.sequence=this.sequence+", "+step.end;
+            }
+            visitedNum++;
+            console.log("visitedNum"+visitedNum);
+            console.log("=========visit=========="+step.end+"=========");
+            if(formerVisitNode!==""){   //如果它不是第一个被访问的节点，那么它需要将前一个被访问的节点设置为已访问
+              this.nodeData[formerVisitNode].itemStyle={
+                color:"green"  //已访问的节点为绿色
+              }
+               // itemStyle:{  //设置节点样式
+          //   borderColor:"black",
+          //   borderWidth:4
+          // }
+            }
+            this.nodeData[step.end].itemStyle={
+              borderColor:"black",
+              borderWidth:4
+            }
+            formerVisitNode=step.end;
+            console.log("=======former visit node:"+step.end);
+            if(visitedNum==7){  //如果所有的节点都访问过了，就不需要访问了。
+              clearInterval(this.timer);
+              this.nodeData[formerVisitNode].itemStyle={
+                color:"green"  //已访问的节点为绿色
+              }
+            }
+          }
+
+          // this.links.unshift({
+          //   source: arr[index].start,
+          //   target: arr[index].end,
+          //   symbolSize: [5, 20],
+          //   lineStyle: {
+          //     width: 2,
+          //     curveness: 0.1,
+          //     color: arr[index].success ? "green" : "red",
+          //   },
+          // });
+          index++;
+          if(visitedNum<7&&index>=arr.length){
+            clearInterval(this.timer);
+          }
+          this.initEcharts();
+        }, 200);
+      });
+    },
+    initEcharts() {
+      console.log("initEcharts");
+      var myChart = echarts.init(document.getElementById("echarts1"));
+      myChart.setOption(this.options);
+      // 绘制图表
+      // myChart.setOption({
+      //   // title: {
+      //   //   text: "",
+      //   // },
+      //   tooltip: {},
+      //   animationDurationUpdate: 1500,
+      //   animationEasingUpdate: "quinticInOut",
+      //   series: [
+      //     {
+      //       type: "graph",
+      //       layout: "circular",
+      //       symbolSize: 50,
+      //       roam: false,
+      //       label: {
+      //         show: true,
+      //       },
+      //       edgeSymbol: ["circle"],
+      //       edgeSymbolSize: [4, 10],
+      //       edgeLabel: {
+      //         fontSize: 20,
+      //       },
+      //       data: [
+      //         {
+      //           name: "0",
+      //           x: 600,
+      //           y: -600,
+      //           fixed:true
+      //         },
+      //         {
+      //           name: "1",
+      //           x: 1000,
+      //           y: 500,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "2",
+      //           x: 500,
+      //           y: 500,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "3",
+      //           x: 200,
+      //           y: 300,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "4",
+      //           x: 400,
+      //           y: 300,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "5",
+      //           x: 200,
+      //           y: 100,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "6",
+      //           x: 400,
+      //           y: 100,
+      //           //fixed:true
+      //         },
+      //       ],
+      //       // links: [],
+      //       links: this.links,
+      //       lineStyle: {
+      //         opacity: 0.9,
+      //         width: 2,
+      //         curveness: 0,
+      //       },
+      //     },
+      //   ],
+      // });
+    },
+  },
 }
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+// .el-container {
+//   .el-header {
+//     display: flex;
+//     align-items: center;
+//     margin-bottom: 20px;
+//     .el-button {
+//       margin-right: 20px;
+//     }
+//   }
+// }
+// .el-main{
+//   margin-top: 0px;
+//   overflow: hidden;
+//   border: 0px;
+//   margin: 0px;
+// }
+.p{
+  text-align: left;
+}
+#echarts1 {
+  position:relative;
+  left:10%;
+  width: 500px;
+  height: 500px;
+}
 </style>

src/components/graphDepthFirstTraversal.vue

@@ -1,18 +1,506 @@
 <template>
-<div>{{msg}}</div>   
+  <el-container>
+    <el-header>
+      <el-row>
+        startVertex:
+        <el-select v-model="startVertex" placeholder="">
+            <el-option
+              v-for="item in startVertexOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-button
+            @click="run"
+            type="primary"
+          >
+            run
+          </el-button>
+          <el-button
+            @click="newGraph"
+            type="primary"
+          >
+            new Graph
+          </el-button>
+        </el-row>
+        <el-row>
+          <p>access sequence:{{sequence}}</p>
+        </el-row>
+    </el-header>
+    
+      <div id="echarts1"></div>
+    
+  </el-container> 
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import {newUDUWGraph,graphDepthFirstTraversal} from '../api.js';
+import qs from 'qs'
 export default {
   name: 'graphDepthFirstTraversal',
   data () {
     return {
-      msg: 'Welcome to Your graphDepthFirstTraversal'
+      msg: 'Welcome to Your graphDepthFirstTraversal',
+      sequence:"",
+      startVertex:"",
+      startVertexOptions:[
+        {
+          value:0,
+          label:0
+        },
+        {
+          value:1,
+          label:1
+        },
+        {
+          value:2,
+          label:2
+        },
+        {
+          value:3,
+          label:3
+        },
+        {
+          value:4,
+          label:4
+        },
+        {
+          value:5,
+          value:5
+        },
+        {
+          value:6,
+          label:6
+        }
+      ],
+      timer:null,
+      //echarts配置项
+      links: [],  //边的属性设置
+      nodeData:[
+        {
+          name: "0",
+          x: 600,
+          y: -600,
+          fixed:true,
+          // itemStyle:{  //设置节点样式
+          //   borderColor:"black",
+          //   borderWidth:4
+          // }
+        },
+        {
+          name: "1",
+          x: 1000,
+          y: 500,
+          //fixed:true
+        },
+        {
+          name: "2",
+          x: 500,
+          y: 500,
+          //fixed:true
+        },
+        {
+          name: "3",
+          x: 200,
+          y: 300,
+          //fixed:true
+        },
+        {
+          name: "4",
+          x: 400,
+          y: 300,
+          //fixed:true
+        },
+        {
+          name: "5",
+          x: 200,
+          y: 100,
+          //fixed:true
+        },
+        {
+          name: "6",
+          x: 400,
+          y: 100,
+          //fixed:true
+        },
+      ]  //节点的属性设置
+
+     
+      
+    }
+  },
+  watch: {
+    $route(n, o) {
+      clearInterval(this.timer);
+      this.newGraph();
+    },
+  },
+  computed:{
+    options(){
+      let that=this;
+      let option={
+        tooltip: {},
+        animationDurationUpdate: 1500,
+        animationEasingUpdate: "quinticInOut",
+        series: [
+          {
+            type: "graph",
+            layout: "circular",
+            symbolSize: 50,
+            roam: false,
+            label: {
+              show: true,
+            },
+            edgeSymbol: ["circle"],
+            edgeSymbolSize: [4, 10],
+            edgeLabel: {
+              fontSize: 20,
+            },
+            data:that.nodeData, //节点配置
+            links: that.links, //边配置
+            lineStyle: {
+              opacity: 0.9,
+              width: 2,
+              curveness: 0,
+            },
+          },
+        ],
+      };
+      return option;
     }
-  }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.newGraph();
+    });
+  },
+  methods:{
+    newGraph(){
+      //在下一次newGraph之前，将所有的节点和边的样式初始化一下。
+        //初始化访问序列
+        this.sequence="";
+        //初始化节点样式
+      for(var m=0;m<7;m++){
+        this.nodeData[m].itemStyle={};
+      }
+      newUDUWGraph().then((res) => {
+        console.log("changeGraph res: "+res.data.content);
+          this.links = [];
+          let arr = res.data.content.content;
+          this.content = res.data.content;//这是一个图
+          console.log("this.content:"+this.content.content[3][6]);
+          arr.forEach((v, index) => {
+            v.forEach((el, i) => { //一条边有两条连线
+              if (index != i) {
+                if (arr[index][i] == 1&&index<i) {   //去掉重复边
+                    //links配置项
+                  this.links.push({
+                    source: index,
+                    target: i,
+                    symbol:["circle"],
+                    // label:{   //设置label
+                    //   normal:{
+                    //     show:true,
+                    //     formatter:"test"
+                    //   }
+                    // },
+                    // lineStyle:{      //边的颜色设置
+                    //   color:"green",
+                    // }
+                  });
+                }
+                // if (arr[i][index] == 1) {
+                //   this.links.push({
+                //     source: i,
+                //     target: index,
+                //   });
+                // }
+              }
+            });
+          });
+          this.initEcharts();
+        });
+    },
+    run() {
+      if (this.startVertex === "") {
+        this.$notify.error({
+          title: "error",
+          message: "Please select start vertex.",
+        });
+        return;
+      }
+      //在下一次run之前，将所有的节点和边的样式初始化一下。
+        //初始化访问序列
+        this.sequence="";
+        //初始化节点样式
+      for(var m=0;m<7;m++){
+        this.nodeData[m].itemStyle={};
+      }
+        //初始化边样式
+      let refreshLinks=this.links.map(link=>{
+        var refreshlink=link;
+        refreshlink.lineStyle={};
+        return refreshlink;
+      })
+      this.links=refreshLinks;
+      //var graphStr=qs.stringify(...this.content, { arrayFormat: "indices" })
+      graphDepthFirstTraversal({
+        ...this.content,
+        startVertex: this.startVertex
+      }).then((res) => {
+        //console.log("breadth traversal response:"+res.data);
+        //clearInterval(this.timer);
+        let arr = res.data.content.content;
+        console.log("arr[0].start:"+arr[0].start);
+        let index = 0;
+        var formerVisitNode="";
+        var formerStyleLink={};
+        var visitedNum=0;
+        var tryFirst=true;
+        this.timer = setInterval(() => {
+          if (index != 0) {
+            // this.links.shift();
+          }
+          //每一步根据不同的类型和不同的结果设置不同的边和节点的样式
+          //var isReverse=false;
+         // var visitedNum=0;
+          
+          var step=arr[index];//当前step
+          var isReverse=false;
+          var linkSource=step.start;
+          var linkTarget=step.end;
+         // var formerVisitNode="";  //前一个被访问的节点是哪一个？
+          if(step.start>step.end){
+            isReverse=true;   //step的start end与边的source target是否一致
+            linkSource=step.end;
+            linkTarget=step.start;
+          }
+          //步骤类型如果为探路就设置边的样式，如果为访问就设置节点的样式
+          if(step.type=="tryRoad"){
+            console.log("======tryRoad====="+step.start+" "+step.end+"=========");
+            //第一次渲染
+            //遍历边，找到对应的边，设置，然后push
+          //第一次渲染
+            if(tryFirst==true){
+              console.log("************");
+              index--; //第二次渲染还访问这个数组
+              let newLinks=this.links.map(link=>{
+                if(link.source==linkSource&&link.target==linkTarget){  //如果是这条边
+                  var newlink=link;
+                  formerStyleLink=link; //将边原来的样式存起来，若探路失败，恢复成原来的状态。
+                  //要对这条边做什么
+                  //先尝试探路,将这条边设置为从起点指向终点的单箭头红色连线。
+                  if(isReverse){  //如果起点终点反了
+                    newlink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["arrow","none"],
+                      lineStyle:{
+                        color:"red"
+                      }
+                    }
+                  }else{//如果起点终点没有反
+                    newlink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["none","arrow"],
+                      lineStyle:{
+                        color:"red"
+                      }
+                    }
+                  }
+                  
+                  return newlink;
+                }
+                return link;
+              })
+              this.links=newLinks;
+              tryFirst=false;
+            }else{
+              tryFirst=true;//下面是下个数组的第一次访问
+              //第二次渲染
+              let relinks=this.links.map(link=>{
+                if(link.source==linkSource&&link.target==linkTarget){  //如果是这条边
+                  var relink=link;
+                  //要对这条边做什么
+                  //先尝试探路,将这条边设置为从起点指向终点的单箭头红色连线。
+                  if(step.success==true){  //探路成功
+                    relink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["none","none"],
+                      lineStyle:{
+                        color:"blue"
+                      }
+                    }
+                  }else{//探路没成功
+                    relink=formerStyleLink;
+                  }
+                  return relink;
+                }
+                return link;
+              })
+              this.links=relinks;
+            }  
+         
+          }else if(step.type=="visit"){
+            if(this.sequence===""){
+              this.sequence=step.end+"";
+            }else{
+              this.sequence=this.sequence+", "+step.end;
+            }
+            visitedNum++;
+            console.log("visitedNum"+visitedNum);
+            console.log("=========visit=========="+step.end+"=========");
+            if(formerVisitNode!==""){   //如果它不是第一个被访问的节点，那么它需要将前一个被访问的节点设置为已访问
+              this.nodeData[formerVisitNode].itemStyle={
+                color:"green"  //已访问的节点为绿色
+              }
+               // itemStyle:{  //设置节点样式
+          //   borderColor:"black",
+          //   borderWidth:4
+          // }
+            }
+            this.nodeData[step.end].itemStyle={
+              borderColor:"black",
+              borderWidth:4
+            }
+            formerVisitNode=step.end;
+            console.log("=======former visit node:"+step.end);
+            // if(visitedNum==7){  //如果所有的节点都访问过了，就不需要访问了。
+            //   clearInterval(this.timer);
+            //   this.nodeData[formerVisitNode].itemStyle={
+            //     color:"green"  //已访问的节点为绿色
+            //   }
+            // }
+          }else if(step.type=="return"){
+            this.nodeData[formerVisitNode].itemStyle={
+                color:"green"  //已访问的节点为绿色
+            }
+             this.nodeData[step.end].itemStyle={
+              borderColor:"black",
+              borderWidth:4,
+              color:"green"
+            }
+            formerVisitNode=step.end;
+            if(step.end==this.startVertex&&visitedNum==7){
+              clearInterval(this.timer);
+            }
+          }
+
+          // this.links.unshift({
+          //   source: arr[index].start,
+          //   target: arr[index].end,
+          //   symbolSize: [5, 20],
+          //   lineStyle: {
+          //     width: 2,
+          //     curveness: 0.1,
+          //     color: arr[index].success ? "green" : "red",
+          //   },
+          // });
+          index++;
+          if(visitedNum<7&&index>=arr.length){
+            clearInterval(this.timer);
+          }
+          this.initEcharts();
+        }, 200);
+      });
+    },
+    initEcharts() {
+      console.log("initEcharts");
+      var myChart = echarts.init(document.getElementById("echarts1"));
+      myChart.setOption(this.options);
+      // 绘制图表
+      // myChart.setOption({
+      //   // title: {
+      //   //   text: "",
+      //   // },
+      //   tooltip: {},
+      //   animationDurationUpdate: 1500,
+      //   animationEasingUpdate: "quinticInOut",
+      //   series: [
+      //     {
+      //       type: "graph",
+      //       layout: "circular",
+      //       symbolSize: 50,
+      //       roam: false,
+      //       label: {
+      //         show: true,
+      //       },
+      //       edgeSymbol: ["circle"],
+      //       edgeSymbolSize: [4, 10],
+      //       edgeLabel: {
+      //         fontSize: 20,
+      //       },
+      //       data: [
+      //         {
+      //           name: "0",
+      //           x: 600,
+      //           y: -600,
+      //           fixed:true
+      //         },
+      //         {
+      //           name: "1",
+      //           x: 1000,
+      //           y: 500,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "2",
+      //           x: 500,
+      //           y: 500,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "3",
+      //           x: 200,
+      //           y: 300,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "4",
+      //           x: 400,
+      //           y: 300,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "5",
+      //           x: 200,
+      //           y: 100,
+      //           //fixed:true
+      //         },
+      //         {
+      //           name: "6",
+      //           x: 400,
+      //           y: 100,
+      //           //fixed:true
+      //         },
+      //       ],
+      //       // links: [],
+      //       links: this.links,
+      //       lineStyle: {
+      //         opacity: 0.9,
+      //         width: 2,
+      //         curveness: 0,
+      //       },
+      //     },
+      //   ],
+      // });
+    },
+  },
 }
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+.p{
+  text-align: left;
+}
+#echarts1 {
+  position:relative;
+  left:10%;
+  width: 500px;
+  height: 500px;
+}
 </style>

src/components/graphPrimSmallestSpanningTree.vue

@@ -1,18 +1,441 @@
 <template>
- <div>{{msg}}</div>   
+<el-container>
+    <el-header>
+      <el-row>
+        startVertex:
+        <el-select v-model="startVertex" placeholder="">
+            <el-option
+              v-for="item in startVertexOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-button
+            @click="run"
+            type="primary"
+          >
+            run
+          </el-button>
+          <el-button
+            @click="newGraph"
+            type="primary"
+          >
+            new Graph
+          </el-button>
+        </el-row>
+        <!-- <el-row>
+          <p>access sequence:{{sequence}}</p>
+        </el-row> -->
+    </el-header>
+    
+      <div id="echarts1"></div>
+    
+  </el-container>   
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import {newUDWGraph,graphPrimSmallestSpanningTree,graphBreadthFirstTraversal} from '../api.js';
+import qs from 'qs'
 export default {
   name: 'graphPrimSmallestSpanningTree',
   data () {
     return {
-      msg: 'Welcome to Your graphPrimSmallestSpanningTree'
+      msg: 'Welcome to Your graphPrimSmallestSpanningTree',
+      // sequence:"",
+      startVertex:"",
+      startVertexOptions:[
+        {
+          value:0,
+          label:0
+        },
+        {
+          value:1,
+          label:1
+        },
+        {
+          value:2,
+          label:2
+        },
+        {
+          value:3,
+          label:3
+        },
+        {
+          value:4,
+          label:4
+        },
+        {
+          value:5,
+          value:5
+        },
+        {
+          value:6,
+          label:6
+        }
+      ],
+      timer:null,
+      //echarts配置项
+      links: [],  //边的属性设置
+      nodeData:[
+        {
+          name: "0",
+          x: 600,
+          y: -600,
+          fixed:true,
+          // itemStyle:{  //设置节点样式
+          //   borderColor:"black",
+          //   borderWidth:4
+          // }
+        },
+        {
+          name: "1",
+          x: 1000,
+          y: 500,
+          //fixed:true
+        },
+        {
+          name: "2",
+          x: 500,
+          y: 500,
+          //fixed:true
+        },
+        {
+          name: "3",
+          x: 200,
+          y: 300,
+          //fixed:true
+        },
+        {
+          name: "4",
+          x: 400,
+          y: 300,
+          //fixed:true
+        },
+        {
+          name: "5",
+          x: 200,
+          y: 100,
+          //fixed:true
+        },
+        {
+          name: "6",
+          x: 400,
+          y: 100,
+          //fixed:true
+        },
+      ]  //节点的属性设置
+
+     
+      
+    }
+  },
+  watch: {
+    $route(n, o) {
+      clearInterval(this.timer);
+      this.newGraph();
+    },
+  },
+  computed:{
+    options(){
+      let that=this;
+      let option={
+        tooltip: {},
+        animationDurationUpdate: 1500,
+        animationEasingUpdate: "quinticInOut",
+        series: [
+          {
+            type: "graph",
+            layout: "circular",
+            symbolSize: 50,
+            roam: false,
+            label: {
+              show: true,
+            },
+            edgeSymbol: ["circle"],
+            edgeSymbolSize: [4, 10],
+            edgeLabel: {
+              fontSize: 20,
+            },
+            data:that.nodeData, //节点配置
+            links: that.links, //边配置
+            lineStyle: {
+              opacity: 0.9,
+              width: 2,
+              curveness: 0,
+            },
+          },
+        ],
+      };
+      return option;
     }
-  }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.newGraph();
+    });
+  },
+  methods:{
+    newGraph(){
+      //在下一次newGraph之前，将所有的节点和边的样式初始化一下。
+        //初始化访问序列
+        // this.sequence="";
+        //初始化节点样式
+      for(var m=0;m<7;m++){
+        this.nodeData[m].itemStyle={};
+      }
+      newUDWGraph().then((res) => {
+        console.log("changeGraph res: "+res.data.content);
+          this.links = [];
+          let arr = res.data.content.content;
+          this.content = res.data.content;//这是一个图
+          console.log("this.content:"+this.content.content[3][6]);
+          arr.forEach((v, index) => {
+            v.forEach((el, i) => { //一条边有两条连线
+              if (index != i) {
+                if (arr[index][i]>0&&index<i) {   //去掉重复边
+                    //links配置项
+                  this.links.push({
+                    source: index,
+                    target: i,
+                    symbol:["circle"],
+                    label:{   //设置label
+                      show:true,
+                      formatter:arr[index][i]+"",
+                      distance:0,
+                    
+                    },
+                    // lineStyle:{      //边的颜色设置
+                    //   color:"green",
+                    // }
+                  });
+                }
+                // if (arr[i][index] == 1) {
+                //   this.links.push({
+                //     source: i,
+                //     target: index,
+                //   });
+                // }
+              }
+            });
+          });
+          this.initEcharts();
+        });
+    },
+    run() {
+      if (this.startVertex === "") {
+        this.$notify.error({
+          title: "error",
+          message: "Please select start vertex.",
+        });
+        return;
+      }
+      //在下一次run之前，将所有的节点和边的样式初始化一下。
+        //初始化访问序列
+        // this.sequence="";
+        //初始化节点样式
+      for(var m=0;m<7;m++){
+        this.nodeData[m].itemStyle={};
+      }
+        //初始化边样式
+      let refreshLinks=this.links.map(link=>{
+        var refreshlink=link;
+        refreshlink.lineStyle={};
+        return refreshlink;
+      })
+      this.links=refreshLinks;
+      //var graphStr=qs.stringify(...this.content, { arrayFormat: "indices" })
+      graphBreadthFirstTraversal({
+        ...this.content,
+        startVertex: this.startVertex
+      }).then((res) => {
+        //console.log("breadth traversal response:"+res.data);
+        //clearInterval(this.timer);
+        let arr = res.data.content.content;
+        console.log("arr[0].start:"+arr[0].start);
+        let index = 0;
+        var formerVisitNode="";
+        var formerStyleLink={};
+        var visitedNum=0;
+        var tryFirst=true;
+        this.timer = setInterval(() => {
+          if (index != 0) {
+            // this.links.shift();
+          }
+          //每一步根据不同的类型和不同的结果设置不同的边和节点的样式
+          //var isReverse=false;
+         // var visitedNum=0;
+          
+          var step=arr[index];//当前step
+          var isReverse=false;
+          var linkSource=step.start;
+          var linkTarget=step.end;
+         // var formerVisitNode="";  //前一个被访问的节点是哪一个？
+          if(step.start>step.end){
+            isReverse=true;   //step的start end与边的source target是否一致
+            linkSource=step.end;
+            linkTarget=step.start;
+          }
+          //步骤类型如果为探路就设置边的样式，如果为访问就设置节点的样式
+          if(step.type=="tryRoad"){
+            console.log("======tryRoad====="+step.start+" "+step.end+"=========");
+            //第一次渲染
+            //遍历边，找到对应的边，设置，然后push
+          //第一次渲染
+            if(tryFirst==true){
+              console.log("************");
+              index--; //第二次渲染还访问这个数组
+              let newLinks=this.links.map(link=>{
+                if(link.source==linkSource&&link.target==linkTarget){  //如果是这条边
+                  var newlink=link;
+                  formerStyleLink=link; //将边原来的样式存起来，若探路失败，恢复成原来的状态。
+                  //要对这条边做什么
+                  //先尝试探路,将这条边设置为从起点指向终点的单箭头红色连线。
+                  if(isReverse){  //如果起点终点反了
+                    newlink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["arrow","none"],
+                      lineStyle:{
+                        color:"red"
+                      }
+                    }
+                  }else{//如果起点终点没有反
+                    newlink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["none","arrow"],
+                      lineStyle:{
+                        color:"red"
+                      }
+                    }
+                  }
+                  
+                  return newlink;
+                }
+                return link;
+              })
+              this.links=newLinks;
+              tryFirst=false;
+            }else{
+              tryFirst=true;//下面是下个数组的第一次访问
+              //第二次渲染
+              let relinks=this.links.map(link=>{
+                if(link.source==linkSource&&link.target==linkTarget){  //如果是这条边
+                  var relink=link;
+                  //要对这条边做什么
+                  //先尝试探路,将这条边设置为从起点指向终点的单箭头红色连线。
+                  if(step.success==true){  //探路成功
+                    relink={
+                      source:link.source,
+                      target:link.target,
+                      symbol:["none","none"],
+                      lineStyle:{
+                        color:"blue"
+                      }
+                    }
+                  }else{//探路没成功
+                    relink=formerStyleLink;
+                  }
+                  return relink;
+                }
+                return link;
+              })
+              this.links=relinks;
+            }  
+         
+          }else if(step.type=="visit"){
+            // if(this.sequence===""){
+            //   this.sequence=step.end+"";
+            // }else{
+            //   this.sequence=this.sequence+", "+step.end;
+            // }
+            visitedNum++;
+            console.log("visitedNum"+visitedNum);
+            console.log("=========visit=========="+step.end+"=========");
+            if(formerVisitNode!==""){   //如果它不是第一个被访问的节点，那么它需要将前一个被访问的节点设置为已访问
+              this.nodeData[formerVisitNode].itemStyle={
+                color:"green"  //已访问的节点为绿色
+              }
+               // itemStyle:{  //设置节点样式
+          //   borderColor:"black",
+          //   borderWidth:4
+          // }
+            }
+            this.nodeData[step.end].itemStyle={
+              borderColor:"black",
+              borderWidth:4
+            }
+            formerVisitNode=step.end;
+            console.log("=======former visit node:"+step.end);
+            if(visitedNum==7){  //如果所有的节点都访问过了，就不需要访问了。
+              clearInterval(this.timer);
+              this.nodeData[formerVisitNode].itemStyle={
+                color:"green"  //已访问的节点为绿色
+              }
+            }
+          }
+
+          // this.links.unshift({
+          //   source: arr[index].start,
+          //   target: arr[index].end,
+          //   symbolSize: [5, 20],
+          //   lineStyle: {
+          //     width: 2,
+          //     curveness: 0.1,
+          //     color: arr[index].success ? "green" : "red",
+          //   },
+          // });
+          index++;
+          if(visitedNum<7&&index>=arr.length){
+            clearInterval(this.timer);
+          }
+          this.initEcharts();
+        }, 200);
+      });
+    },
+    initEcharts() {
+      console.log("initEcharts");
+      var myChart = echarts.init(document.getElementById("echarts1"));
+      myChart.setOption(this.options); 
+    },
+  },
 }
+// export default {
+//   name: 'graphPrimSmallestSpanningTree',
+//   data () {
+//     return {
+//       msg: 'Welcome to Your graphPrimSmallestSpanningTree'
+//     }
+//   }
+// }
 </script>
 
-<style lang="scss">
-
+<style lang="scss" scoped>
+// .el-container {
+//   .el-header {
+//     display: flex;
+//     align-items: center;
+//     margin-bottom: 20px;
+//     .el-button {
+//       margin-right: 20px;
+//     }
+//   }
+// }
+// .el-main{
+//   margin-top: 0px;
+//   overflow: hidden;
+//   border: 0px;
+//   margin: 0px;
+// }
+.p{
+  text-align: left;
+}
+#echarts1 {
+  position:relative;
+  left:10%;
+  width: 500px;
+  height: 500px;
+}
 </style>

src/components/hanoi.vue

@@ -1,18 +1,177 @@
 <template>
-<div>{{msg}}</div>    
+  <div>
+    number of plate:
+    <select name="level" id="level" onchange="InitCanva()">
+      <option value="3">3</option>
+      <option value="4">4</option>
+      <option value="5">5</option>
+      <option value="6">6</option>
+      <option value="7">7</option>
+      <option value="8">8</option>
+      <option value="9">9</option>
+    </select>
+    <el-button @click="Play()" type="primary">start</el-button>
+    <button id="step" @click="Step()" class="btn-primary" style="display: none">
+      Step
+    </button>
+
+    <el-row>
+      <table id="poleA">
+        <caption>
+          <h3>ColumnA</h3>
+        </caption>
+      </table>
+      <table id="poleB">
+        <caption>
+          <h3>ColumnB</h3>
+        </caption>
+      </table>
+      <table id="poleC">
+        <caption>
+          <h3>ColumnC</h3>
+        </caption>
+      </table>
+    </el-row>
+  </div>
 </template>
 
 <script>
+import $ from 'jquery';
 export default {
-  name: 'hanoi',
-  data () {
+  data() {
     return {
-      msg: 'Welcome to Your hanoi'
+      polA: [],
+      polB: [],
+      polC: [],
+      Steps: [],
+      value: "",
+    };
+  },
+  mounted() {
+    var tr = $("<tr></tr>");
+    for (var i = 0; i < 17; i++) {
+      tr.append($("<td></td>").clone());
     }
-  }
-}
+    $("table").each(function() {
+      for (var i = 0; i < 9; i++) {
+        $(this).append(tr.clone());
+      }
+    });
+    this.InitCanva();
+    this.polA = [];
+    this.polB = [];
+    this.polC = [];
+    this.Steps = [];
+    this.polA.pol = "A";
+    this.polB.pol = "B";
+    this.polC.pol = "C";
+  },
+  methods: {
+    changeSelect(val) {
+      console.log(val);
+    },
+    InitCanva() {
+      this.polA = [];
+      this.polB = [];
+      this.polC = [];
+      this.polA.pol = "A";
+      this.polB.pol = "B";
+      this.polC.pol = "C";
+      this.Steps = [];
+      var level = $("#level").val();
+      $("td").css("background", "#FFF");
+      for (var i = 1; i <= level; i++) {
+        this.polA.push(i * 2 - 1);
+      }
+      this.Draw(this.polA);
+      $("#step").click();
+    },
+    Step() {
+      if (this.Steps.length > 0) {
+        var s = this.Steps.shift();
+        this.DrawUI(s);
+      } else {
+        clearInterval(window.t);
+      }
+    },
+    Draw(pol) {
+      var tmp = [];
+      tmp.pol = pol.pol;
+      for (var i = 0; i < pol.length; i++) {
+        tmp.push(pol[i]);
+      }
+      this.Steps.push(tmp);
+    },
+    DrawUI(pol) {
+      var tb = $("#pole" + pol.pol);
+      var level = pol.length;
+      tb.find("td").css("background", "#FFF");
+      var trs = tb.find("tr:gt(" + (9 - level - 1) + ")");
+      for (var i = 0; i < trs.length; i++) {
+        var min = 8 - (pol[i] + 1) / 2;
+        var max = 8 + (pol[i] + 1) / 2 - 1;
+        $(trs[i])
+          .find("td:gt(" + min + ")")
+          .css("background", "#409EFF");
+        $(trs[i])
+          .find("td:gt(" + max + ")")
+          .css("background", "#FFF");
+      }
+    },
+    MoveHanoi(level, pol_A, pol_B, pol_C) {
+      if (level == 1) {
+        console.log(pol_A.pol + "-->" + pol_C.pol);
+        var m = pol_A.shift();
+        pol_C.reverse();
+        pol_C.push(m);
+        pol_C.reverse();
+        this.Draw(pol_A);
+        this.Draw(pol_C);
+      } else {
+        this.MoveHanoi(level - 1, pol_A, pol_C, pol_B);
+        this.MoveHanoi(1, pol_A, pol_B, pol_C);
+        this.MoveHanoi(level - 1, pol_B, pol_A, pol_C);
+      }
+    },
+    Play() {
+      this.InitCanva();
+      var level = $("#level").val();
+      this.MoveHanoi(level, this.polA, this.polB, this.polC);
+      window.t = setInterval(function() {
+        $("#step").click();
+      }, 300);
+    },
+    Delay(minseconds) {
+      var t = +new Date();
+      while (+new Date() - t < minseconds) {}
+    },
+  },
+};
 </script>
 
-<style lang="scss">
+<style>
+table {
+  border: 1px solid #000000;
+  float: left;
+}
+
+td {
+  width: 13px;
+  height: 13px;
+}
+select {
+  width: 80px;
+  height: 35px;
+  margin-right: 20px;
+  text-align: center;
+}
+caption {
+  text-align: center;
+}
 
-</style>
+.el-row{
+  position: absolute;
+  top:40%;
+  
+}
+</style>

src/components/insertionSort.vue

@@ -1,18 +1,2008 @@
 <template>
-<div>{{msg}}</div>    
+  <el-container>
+    <el-header>
+      <el-row>
+        <label>numbers:</label>
+        <el-input
+          class="input"
+          v-model="numbersStr"
+          placeholder="Numbers need to be separated by Spaces. The numbers must be no more than ten."
+        ></el-input>
+      </el-row>
+      <el-row>
+        <label>rule:</label>  
+        <el-select
+          v-model="rule"
+          placeholder=" please select ordering rule"
+        >
+          <el-option
+            v-for="item in ruleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          @click="start"
+          type="primary"
+        >
+          start
+        </el-button>
+      </el-row>
+    </el-header>
+    <el-main style="height:600px;">
+      <insertionSortChart :list=testTmpItem></insertionSortChart>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-export default {
-  name: 'insertionSort',
-  data () {
-    return {
-      msg: 'Welcome to Your insertionSort'
+  import insertionSortChart from '@/components/insertionSortChart';
+  import {insertionSort} from '../api.js'
+  export default {
+    name: 'insertionSort',
+    components: {
+      insertionSortChart
+    },
+    data () {
+      return {
+        numbersStr: "",
+        rule: "",
+        ruleOptions: [
+          {
+            value: "ascending",
+            label: "ascending"
+          },
+          {
+            value: "descending",
+            label: "descending"
+          }
+        ],
+        testTmpItem: [],
+        testList: [
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            }
+
+          ]
+        ],
+        testInsertionSort: {
+
+          "content": {
+
+            "initial": {
+
+              "type": "onInsertion",
+
+              "insertionIndex": 0,
+
+              "content": [
+
+                {
+
+                  "value": 4,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 3,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 2,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 1,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 0,
+
+                  "color": "blue"
+
+                }
+
+              ]
+
+            },
+
+            "onSortingStates": [
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "allSorted",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              }
+
+            ]
+
+          },
+
+          "message": null,
+
+          "success": true
+
+        }
+
+      }
+    },
+    // mounted: function(){
+    //   insertionSort({
+    //     content: this.numbersStr.split(",").map(Number),
+    //     rule:this.rule
+    //   }).then(res=>{
+    //     res=res.content;
+    //     let stepUnit=res.onSortingStates.map((v)=>v.content)
+    //     let allSteps=[res.initial.content,...stepUnit];
+    //     testList=allSttemplisteps;
+    //     this.testTmpItem=this.testList[0];
+    //   })
+    // },
+    methods: {
+      sleep (time) {
+        return new Promise((resolve) => setTimeout(resolve, time));
+      },
+      async start () {
+        this.testTmpItem = [];
+        await this.sleep(500);
+        // let tmplist = ((res) => {
+        // res = res.content;
+        // let stepUnit = res.onSortingStates.map((v) => v.content);
+        // let allSteps = [res.initial.content, ...stepUnit];
+        // return allSteps;
+        // })(this.testInsertionSort);
+
+       // this.testTmpItem = tmplist[0];
+       // await this.sleep(500);
+      //  let realContent=[1,2,3];
+      //  console.log("realContent: "+realContent[2]);
+      //  console.log("rule: "+this.rule);
+      //  console.log("numbersStr: "+this.numbersStr);
+
+        insertionSort(
+        //content: this.numbersStr.split(",").map(Number),
+        this.rule,
+        this.numbersStr.split(",").map(Number)
+        ).then(res=>{
+
+          res=res.data.content;
+          console.log("res:"+res);
+          let stepUnit=res.onSortingStates.map((v)=>v.content)
+          let allSteps=[res.initial.content,...stepUnit];
+          this.testList=allSteps;
+          this.testTmpItem=this.testList[0];
+        })
+        for (let i = 0; i < this.testList.length; i++) {
+          this.testTmpItem = this.testList[i];
+          await this.sleep(300);
+        }
+      },
     }
   }
-}
 </script>
 
 <style lang="scss">
+.input {
+  width: 70%;
+}
+.el-row {
+  align-items: left;
+  text-align: center;
+}
+.insertionSortChart{
+  position:relative;
+  left:30%;
+  top:20%;
+}
+  
+</style>
 
-</style>

src/components/insertionSortChart.vue

@@ -0,0 +1,126 @@
+<template>  
+  <div
+    class="insertionSortChart"
+    :style="{'width':width + 'px', 'height': height+ 'px'}"
+  >
+    <div class="container">
+      <div
+        v-for="(item,idx) in list"
+        :key="'k-'+idx"
+        class="bar"
+        :style="{'height': getHeight(item.value)+ 'px'
+        ,'background-color': getColor(item.color)
+        ,'top': getTop(item.value) + 'px'
+        ,'width': itemWidth + 'px'
+        }"
+      >
+        <div
+          class="value"
+          :style="{'left': itemWidth / 2 - 7 + 'px'}"
+        >{{Math.abs(item["value"])}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  /**
+    * @name insertionSortChart (组件名称)
+    * @desc 柱状图，用于插入排序带负y轴的情况
+    * @author Li Xuesong
+    * @param list 传入要显示的内容
+    * @param height 柱状图高度
+    * @param itemContainerWidth 柱状图相邻两个柱子的宽度
+    * @param itemWidth 柱子的宽度
+    * @date 
+    * @example 调用示例
+    * <insertionSortChart></insertionSortChart>
+    */
+
+  export default {
+    name: 'insertionSortChart',
+    components: {},
+    props: {
+      list: {
+        default: () => [],
+      },
+      height: {
+        default: 150
+      },
+      itemContainerWidth: {
+        default: 60
+      },
+      itemWidth: {
+        default: 40
+      }
+
+    },
+    data () {
+      return {
+        max: 20,
+        width: 200
+      }
+    },
+    created () {
+    },
+    watch: {
+      list: function (data) {
+        this.max = Math.max(...data.map(v => v["value"]));
+        this.width = data.length * this.itemContainerWidth;
+      }
+    },
+    mounted () { },
+    methods: {
+      getTop (value) {
+        return value > 0 ? 0 : this.height;
+      },
+      getHeight (value) {
+        return (value < 0 ? -value : value) / this.max * this.height;
+      },
+      getColor (color) {
+        switch (color) {
+          case 'green': return '#00cec9';
+          case 'orange': return '#e17055';
+          case 'red': return '#ff7675';
+          case 'purple': return '#a29bfe';
+          case 'yellow': return '#fdcb6e';
+          case 'white': return '#dfe6e9';
+          case 'blue': return '#0984e3'
+        }
+        return color;
+      }
+    },
+    watch: {}
+  }
+</script>
+
+<style scoped>
+  .insertionSortChart {
+    /* width: 800px; */
+    height: 300px;
+  }
+  .container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: flex-end;
+    justify-content: space-around;
+    flex-wrap: nowrap;
+    flex-direction: row;
+  }
+  .bar {
+    display: flex;
+    width: 40px;
+    position: relative;
+  }
+  .value {
+    position: absolute;
+    bottom: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    -moz-user-select: none; /* 火狐 */
+    -webkit-user-select: none; /* 谷歌 */
+    -ms-user-select: none; /* IE */
+    user-select: none;
+  }
+</style>

src/components/navigation.vue

@@ -7,7 +7,7 @@
         class="el-menu-vertical-demo"
         @open="handleOpen"
         @close="handleClose"
-        background-color="#545c64"
+        background-color="#409EFF"
         text-color="#fff"
         active-text-color="#ffd04b">
 
@@ -47,9 +47,9 @@
         </el-menu-item>
 
       </el-menu>
-      <div>
-        under navigation.
-      </div>
+      <!-- <div class="under">
+        <p>under navigation</p>
+      </div> -->
     </el-aside>
     <el-main>
       <router-view></router-view>
@@ -80,9 +80,23 @@ export default {
 
 <style scoped>
   .el-aside {
-    background-color: #909399;
+    background-color:#409EFF;
     color: #333;
     text-align:center;
     line-height: 400px;
+    padding:0px;
+    overflow: hidden;
+    height:600px;
   }
+  .el-container{
+    height:100%;
+    overflow: hidden;
+  }
+  /* *{
+    margin:0;
+    padding:0;
+  } */
+/* .p{
+  text-decoration-color: #409EFF;
+} */
 </style>

src/components/quickSort.vue

@@ -1,16 +1,1968 @@
 <template>
-<div>{{msg}}</div>   
+<el-container>
+    <el-header>
+      <el-row>
+        numbers:
+        <el-input
+          class="input"
+          v-model="numbersStr"
+          placeholder="Numbers need to be separated by Spaces. The numbers must be no more than ten."
+        ></el-input>
+      </el-row>
+      <el-row>
+        rule:
+        <el-select
+          v-model="rule"
+          placeholder=" please select ordering rule"
+        >
+          <el-option
+            v-for="item in ruleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          @click="start"
+          type="primary"
+        >
+          start
+        </el-button>
+      </el-row>
+    </el-header>
+    <el-main style="height:600px;">
+      <sortChart :list=testTmpItem></sortChart>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-export default {
-  name: 'quickSort',
-  data () {
-    return {
-      msg: 'Welcome to Your quickSort'
+  import sortChart from '@/components/sortChart';
+  import {quickSort} from '../api.js'
+  export default {
+    name: 'quickSort',
+     components: {
+      sortChart
+    },
+    data () {
+      return {
+        numbersStr: "",
+        rule: "",
+        ruleOptions: [
+          {
+            value: "ascending",
+            label: "ascending"
+          },
+          {
+            value: "descending",
+            label: "descending"
+          }
+        ],
+        testTmpItem: [],
+        testList: [
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            }
+
+          ]
+        ],
+        testInsertionSort: {
+
+          "content": {
+
+            "initial": {
+
+              "type": "onInsertion",
+
+              "insertionIndex": 0,
+
+              "content": [
+
+                {
+
+                  "value": 4,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 3,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 2,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 1,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 0,
+
+                  "color": "blue"
+
+                }
+
+              ]
+
+            },
+
+            "onSortingStates": [
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "allSorted",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              }
+
+            ]
+
+          },
+
+          "message": null,
+
+          "success": true
+
+        }
+
+      }
+    },
+    methods: {
+      sleep (time) {
+        return new Promise((resolve) => setTimeout(resolve, time));
+      },
+      async start () {
+        this.testTmpItem = [];
+        await this.sleep(500);
+      
+        quickSort(
+        //content: this.numbersStr.split(",").map(Number),
+        this.rule,
+        this.numbersStr.split(",").map(Number)
+        ).then(res=>{
+
+          res=res.data.content;
+          console.log("res:"+res);
+          let stepUnit=res.onSortingStates.map((v)=>v.content)
+          let allSteps=[res.initial.content,...stepUnit];
+          this.testList=allSteps;
+          this.testTmpItem=this.testList[0];
+        })
+        for (let i = 0; i < this.testList.length; i++) {
+          this.testTmpItem = this.testList[i];
+          await this.sleep(300);
+        }
+      },
     }
   }
-}
 </script>
 
 <style lang="scss">

src/components/selectionSort.vue

@@ -1,16 +1,1968 @@
 <template>
-<div>{{msg}}</div>   
+<el-container>
+    <el-header>
+      <el-row>
+        numbers:
+        <el-input
+          class="input"
+          v-model="numbersStr"
+          placeholder="Numbers need to be separated by Spaces. The numbers must be no more than ten."
+        ></el-input>
+      </el-row>
+      <el-row>
+        rule:
+        <el-select
+          v-model="rule"
+          placeholder=" please select ordering rule"
+        >
+          <el-option
+            v-for="item in ruleOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-button
+          @click="start"
+          type="primary"
+        >
+          start
+        </el-button>
+      </el-row>
+    </el-header>
+    <el-main style="height:600px;">
+      <sortChart :list=testTmpItem></sortChart>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-export default {
-  name: 'selectionSort',
-  data () {
-    return {
-      msg: 'Welcome to Your selectionSort'
+  import sortChart from '@/components/sortChart';
+  import {selectionSort} from '../api.js'
+  export default {
+    name: 'selectionSort',
+    components: {
+      sortChart
+    },
+    data () {
+      return {
+        numbersStr: "",
+        rule: "",
+        ruleOptions: [
+          {
+            value: "ascending",
+            label: "ascending"
+          },
+          {
+            value: "descending",
+            label: "descending"
+          }
+        ],
+        testTmpItem: [],
+        testList: [
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "green"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "green"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "orange"
+
+            }
+
+          ],
+          [
+
+            {
+
+              "value": 7,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 8,
+
+              "color": "blue"
+
+            },
+
+            {
+
+              "value": 9,
+
+              "color": "blue"
+
+            }
+
+          ]
+        ],
+        testInsertionSort: {
+
+          "content": {
+
+            "initial": {
+
+              "type": "onInsertion",
+
+              "insertionIndex": 0,
+
+              "content": [
+
+                {
+
+                  "value": 4,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 3,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 2,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 1,
+
+                  "color": "blue"
+
+                },
+
+                {
+
+                  "value": 0,
+
+                  "color": "blue"
+
+                }
+
+              ]
+
+            },
+
+            "onSortingStates": [
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onSelect",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 4,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "green"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 3,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 2,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onCompare",
+
+                "insertionIndex": 1,
+
+                "content": [
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onExchange",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "white"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "green"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "onInsertion",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "orange"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "orange"
+
+                  }
+
+                ]
+
+              },
+
+              {
+
+                "type": "allSorted",
+
+                "insertionIndex": 0,
+
+                "content": [
+
+                  {
+
+                    "value": 0,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 1,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 2,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 3,
+
+                    "color": "blue"
+
+                  },
+
+                  {
+
+                    "value": 4,
+
+                    "color": "blue"
+
+                  }
+
+                ]
+
+              }
+
+            ]
+
+          },
+
+          "message": null,
+
+          "success": true
+
+        }
+
+      }
+    },
+    methods: {
+      sleep (time) {
+        return new Promise((resolve) => setTimeout(resolve, time));
+      },
+      async start () {
+        this.testTmpItem = [];
+        await this.sleep(500);
+      
+        selectionSort(
+        //content: this.numbersStr.split(",").map(Number),
+        this.rule,
+        this.numbersStr.split(",").map(Number)
+        ).then(res=>{
+
+          res=res.data.content;
+          console.log("res:"+res);
+          let stepUnit=res.onSortingStates.map((v)=>v.content)
+          let allSteps=[res.initial.content,...stepUnit];
+          this.testList=allSteps;
+          this.testTmpItem=this.testList[0];
+        })
+        for (let i = 0; i < this.testList.length; i++) {
+          this.testTmpItem = this.testList[i];
+          await this.sleep(300);
+        }
+      },
     }
   }
-}
 </script>
 
 <style lang="scss">

src/components/stack.vue

@@ -207,6 +207,8 @@ export default {
   height:30px;
   border:2px solid black;
   padding:5px;
+  position:relative;
+  left:40%;
   //background-color:#409EFF;
 }
 

src/main.js

@@ -6,20 +6,20 @@ import router from './router'
 import ElementUI from 'element-ui'
 import axios from 'axios'
 import 'element-ui/lib/theme-chalk/index.css'
-import promise from 'es6-promise'
 import store from './store/index'
 import vueResource from 'vue-resource'
+import qs from 'qs'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI,{size:'small',zIndex:3000})
 Vue.use(vueResource)
 /* eslint-disable no-new */
 
-//axios.default.baseURL='http://localhost:8080'
-axios.defaults.withCredentials=true
+axios.default.baseURL='http://localhost:8080'
+//axios.defaults.withCredentials=false;
 //axios.defaults.header.token=localStorage.getItem('token')
 Vue.prototype.$axios=axios
-
+Vue.prototype.$qs = qs;
 new Vue({
   el: '#app',
   render: h => h(App),
@@ -29,16 +29,36 @@ new Vue({
   template: '<App/>'
 })
 
-//添加请求拦截器
-axios.interceptors.request.use(config=>{
-  console.log('发送请求')
-  //在发送请求之前做什么
-  //判断是否存在token，如果存在将每个页面header都添加token
-  let token=localStorage.getItem('token')
-    console.log('把token存下来了')
-    config.headers.token=token
+// //添加请求拦截器
+// axios.interceptors.request.use(config=>{
+//   console.log('发送请求')
+//   //在发送请求之前做什么
+//   //判断是否存在token，如果存在将每个页面header都添加token
+//   let token=localStorage.getItem('token')
+//     console.log('把token存下来了')
+//     config.headers.token=token
   
-  return config
+//   return config
 
   
-})
+// })
+axios.interceptors.request.use(async(config)=>{
+  //只针对get方式进行序列化
+  if(config.method==='get'){
+    config.paramsSerializer=function(params){
+       return qs.stringify(params,{arrayFormat:'repeat'})
+    }
+    
+  }
+  else if(config.method==='post'){
+    // config.headers=Object.assign(config.headers,
+    //   {
+    //     'Content-Type': 'application/x-www-form-urlencoded'
+
+    //   }
+    // )
+    // config.data = qs.stringify({nodeNum:config.data.nodeNum,edgeNum:config.data.nodeNum,content:JSON.stringify(config.data.content)},{startVertex:config.data.startVertex})
+ }
+  return config;
+}
+)

src/store/index.js

@@ -1,22 +1,22 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+// import Vue from 'vue'
+// import Vuex from 'vuex'
 
-Vue.use(Vuex)
+// Vue.use(Vuex)
 
-const state = {
-  token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
-}
-const store = new Vuex.Store({
-  state,
-  mutations: {
-    set_token (state, token) {
-      state.token = token
-      localStorage.setItem('token', token.token)
-    },
-    del_token (state) {
-      state.token = ''
-      localStorage.removeItem('token')
-    }
-  }
-})
-export default store
+// const state = {
+//   token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
+// }
+// const store = new Vuex.Store({
+//   state,
+//   mutations: {
+//     set_token (state, token) {
+//       state.token = token
+//       localStorage.setItem('token', token.token)
+//     },
+//     del_token (state) {
+//       state.token = ''
+//       localStorage.removeItem('token')
+//     }
+//   }
+// })
+// export default store