From 5dcb6bed4c269b31174864e8723c96a1b5186e64 Mon Sep 17 00:00:00 2001
From: Sylar012 <jialinli199259@gmail.com>
Date: Mon, 12 Feb 2018 23:13:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=99=BB=E5=BD=95=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/WebTrader/web/index.html | 314 +++++++++++++++++++-----------
 1 file changed, 204 insertions(+), 110 deletions(-)
diff --git a/examples/WebTrader/web/index.html b/examples/WebTrader/web/index.html
index c3685406..836d3abd 100644
--- a/examples/WebTrader/web/index.html
+++ b/examples/WebTrader/web/index.html
@@ -10,13 +10,26 @@
 
 <body>
     <div id="app">
+        <el-dialog title="请登录" :visible.sync="LoginFormVisible" :close-on-click-modal="false" :show-close ="false" :lock-scroll="true">
+            <el-form :model="loginForm">
+                <el-form-item label="用户名" :label-width="formLabelWidth">
+                    <el-input v-model="loginForm.user" auto-complete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="密码" :label-width="formLabelWidth">
+                    <el-input v-model="loginForm.pwd" auto-complete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="onLogin">确 定</el-button>
+            </div>
+        </el-dialog>
         <template>
             <el-tabs v-model="activeTab" @tab-click="handleTab">
                 <el-tab-pane label="交易" name="home">
                     <el-container style="margin-top: 12px;">
                         <el-aside class="leftTrade" :style="{ height: leftTradeHeight, width:'320px'}">
                             <el-row>
-                                <el-form class="el-col el-col el-col-24" ref="form" :model="form" :rules="formRules" label-width="50px" show-message="true" inline-message="true" validate="formValidate">
+                                <el-form class="el-col el-col el-col-24" ref="form" :model="form" label-width="50px" show-message="true" inline-message="true" validate="formValidate">
                                     <div class="el-form-item">
                                         <label class="el-form-item__label" style="width: 50px;">代码</label>
                                         <div class="el-form-item__content" style="margin-left: 50px;">
@@ -36,10 +49,10 @@
                                         </el-input>
                                         <p>卖五</p>
                                     </el-form-item> -->
-                                    <el-form-item label="名称">
+                                    <!--<el-form-item label="名称">
                                         <el-input class="el-input--suffix" v-model="form.name"></el-input>
                                         <p>卖四</p>
-                                    </el-form-item>
+                                    </el-form-item> -->
                                     <el-form-item label="方向类型">
                                         <el-select v-model="form.direction" placeholder="请选择">
                                             <el-option label="多" value="DIRECTION_LONG"></el-option>
@@ -73,19 +86,20 @@
                                         </el-select>
                                         <p>买一 {{leftTrade.bidPrice1}} {{leftTrade.bidVolume1}}</p>
                                     </el-form-item>
-                                    <el-form-item label="交易接口">
+                                    <!--<el-form-item label="交易接口">
                                         <el-select v-model="form.region" placeholder="请选择">
                                             <el-option label="区域一" value="shanghai"></el-option>
                                             <el-option label="区域二" value="beijing"></el-option>
                                         </el-select>
                                         <p>买二</p>
-                                    </el-form-item>
+                                    </el-form-item>-->
                                 </el-form>
                             </el-row>
                             <el-row class="body-left__btn">
                                 <div class="el-col el-col-18">
                                     <el-button class="el-col el-col-24" type="primary" @click="onSubmit" v-loading="loading.order">发单</el-button>
                                     <el-button class="el-col el-col-24">全撤</el-button>
+                                    <el-button class="el-col el-col-24" v-loading="loading.token" @click="gGateway">连接CTP</el-button>
                                 </div>
                             </el-row>
                             <el-row class="body-left__connection">
@@ -295,10 +309,10 @@
                         <el-row>
                             <el-col :span='24'>
                                 <el-button type="primary" plain @click="doOnLoad">加载策略</el-button>
-                                <el-button type="success" plain>全部初始化</el-button>
-                                <el-button type="danger" plain>全部启动</el-button>
-                                <el-button type="warning" plain>全部停止</el-button>
-                                <el-button type="info" plain>保持持仓</el-button>
+                                <el-button type="success" plain @click="doAction('','init')">全部初始化</el-button>
+                                <el-button type="danger"  plain @click="doAction('','start')">全部启动</el-button>
+                                <el-button type="warning" plain @click="doAction('','stop')">全部停止</el-button>
+                                <!--<el-button type="info" plain>保持持仓</el-button>-->
                             </el-col>
                             <el-col :span='24' class="cta-frame cta-frame__top" :style="{ height: topFrame}" v-loading="loading.strategy">
                                 <div class="cta-frame__top_section" v-for="item,index in strategy">
@@ -317,7 +331,7 @@
                                     </template>
                                     <template>
                                         <el-table :data="[item.var]" stripe style="width: 100%">
-                                            <el-table-column :pro="subindex" :label="subindex" v-for="(subitem, subindex) in item.var"  width="120">
+                                            <el-table-column :pro="subindex" :label="subindex" v-for="(subitem, subindex) in item.var" width="120">
                                                 <template scope="scope">
                                                     {{[item.var][scope.$index][subindex]}}
                                                 </template>
@@ -348,16 +362,17 @@
 <!-- 引入组件库 -->
 <script src="https://cdn.bootcss.com/element-ui/2.1.0/index.js"></script>
 <script>
-var socket = io.connect("http://127.0.0.1:5000", { transports: ['websocket'] });
+var host = "http://127.0.0.1:5000"
+var socket = io.connect(host + "", { transports: ['websocket'] });
 var _strategy = new Object()
 new Vue({
     el: '#app',
     data: function() {
         return {
             table_height: (window.innerHeight - 70) / 3 - 15 || 250,
-            winHeight:window.innerHeight,
-            topFrame:window.innerHeight*2/3 - 65 + "px",
-            bottomFrame:window.innerHeight/3 - 65 + "px",
+            winHeight: window.innerHeight,
+            topFrame: window.innerHeight * 2 / 3 - 65 + "px",
+            bottomFrame: window.innerHeight / 3 - 65 + "px",
             leftTradeHeight: (window.innerHeight - 50) + 'px',
             selected_data: [],
             form: {
@@ -368,23 +383,12 @@ new Vue({
                 offset: '',
                 priceType: '',
             },
-            formRules: {
-                vtSymbol: [
-                    { required: true, message: '请输入代码', trigger: 'blur' }
-                ],
-                lastPrice: [
-                    { required: true, message: '请输入代码', trigger: 'blur' }
-                ],
-                direction: [
-                    { required: true, message: '请选择方向类型', trigger: 'change' }
-                ],
-                offset: [
-                    { required: true, message: '请输入开平', trigger: 'change' }
-                ],
-                priceType: [
-                    { required: true, message: '请输入价格类型', trigger: 'change' }
-                ]
+            loginForm: {
+                user: "",
+                pwd: ""
             },
+            LoginFormVisible: true,
+            formLabelWidth: '120px',
             eAccount: [],
             eTick: [],
             tickObj: {},
@@ -403,17 +407,17 @@ new Vue({
             leftTrade: {}, //存放左侧交易区显示数据
             config: {}, //存放token等数据
             strategy: {}, //策略名
-            ctaLog:[],
+            ctaLog: [],
             loading: {
                 subScribe: false,
                 order: false,
                 contract: false,
-                strategy:false,
+                strategy: false,
+                token: false,
             },
         }
     },
     created: function() {
-        this.gToken()
         this.gAccount()
         this.gConnectionStatus()
         this.gTick()
@@ -422,50 +426,98 @@ new Vue({
         this.gError()
         this.gOrder()
         this.gTrade()
-        const that = this;
-        that.onLoadInfo('account', 'account')
-        that.onLoadInfo('trades', 'trade')
-        that.onLoadInfo('position', 'position')
-        that.onLoadInfo('log', 'log')
-        that.onLoadInfo('error', 'error')
+
     },
     methods: {
 
+        onLogin() {
+            console.log(this.loginForm.user)
+            let userName = this.loginForm.user,
+                pwd = this.loginForm.pwd;
+            this.gToken(userName, pwd)
+        },
 
-        doAction(e,type){
-            let name = e, that = this, info="";
-            switch(type){
-                case "init": info = "初始化"
-                break;
-                case "stop": info = "停止"
-                break;
-                case "start": info = "启动"
-                break;
+        gToken(username, password) {
+            const that = this;
+            that.loading.token = true;
+            axios.get(host + '/token?username=' + username + '&password=' + password)
+                .then(function(res) {
+                    that.loading.token = false;
+                    if (res.status == 200 && res.data.result_code == "success") {
+                        that.$message({ message: '已登录', type: 'success' });
+                        that.config.token = res.data.data
+                        that.LoginFormVisible = false
+                        that.onLoadInfo('account', 'account')
+                        that.onLoadInfo('trades', 'trade')
+                        that.onLoadInfo('position', 'position')
+                        that.onLoadInfo('log', 'log')
+                        that.onLoadInfo('error', 'error')
+                    } else {
+                        that.$notify({ title: '警告', message: 'token获取失败，用户名或密码错误', type: 'warning', duration: 0, });
+                    }
+                })
+                .catch(function(err) {
+                    that.loading.token = false;
+                    that.$notify({ title: '警告', message: 'token获取失败，连接错误', type: 'warning', duration: 0, });
+                });
+        },
+
+        doAction(e, type) {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
             }
 
-            axios.post("http://127.0.0.1:5000/ctastrategy/" + type,{
-                name:name,
-                token:this.config.token
-            })
-            .then(res=>{
-                if (res.data.result_code =="success") {
-                    that.$message({ message: name + info + '成功', type: 'success' });
-                    if (type == "start") {
-                        that.gCtaStrategy()
+            let name = e,
+                that = this,
+                info = "";
+            switch (type) {
+                case "init":
+                    info = "初始化"
+                    break;
+                case "stop":
+                    info = "停止"
+                    break;
+                case "start":
+                    info = "启动"
+                    break;
+            }
+
+            axios.post(host + "/ctastrategy/" + type, {
+                    name: name,
+                    token: this.config.token
+                })
+                .then(res => {
+                    if (res.data.result_code == "success") {
+                        that.$message({ message: name + info + '成功', type: 'success' });
+                        if (type == "start") {
+                            that.gCtaStrategy()
+                        }
+                    } else {
+                        that.$message({ message: name + info + '成功', type: 'fail' });
                     }
-                }else{
-                    that.$message({ message: name + info +'成功', type: 'fail' });
-                }
-            })
-            .catch(res=>{
-                that.$message({ message: name + info +'成功', type: 'fail' });
-            })
+                })
+                .catch(res => {
+                    that.$message({ message: name + info + '成功', type: 'fail' });
+                })
         },
         doOnLoad() {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
+
             const that = this;
             let strategy = {};
             that.loading.strategy = true;
-            axios.post('http://127.0.0.1:5000/ctastrategy/load', {
+            axios.post(host + '/ctastrategy/load', {
                     token: this.config.token
                 })
                 .then(res => {
@@ -483,9 +535,17 @@ new Vue({
                 })
         },
         gVar(name) {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
             const that = this,
                 _var = new Object();
-            axios.get("http://127.0.0.1:5000/ctastrategy/var?name=" + name + "&token=" + this.config.token)
+            axios.get(host + "/ctastrategy/var?name=" + name + "&token=" + this.config.token)
                 .then(res => {
                     if (res.data.result_code !== "success") {
                         that.$notify({ title: '警告', message: 'ctastrategy/var接口报错', type: 'warning', duration: 0, });
@@ -520,8 +580,16 @@ new Vue({
         },
 
         gParams(name) {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
             const that = this;
-            axios.get("http://127.0.0.1:5000/ctastrategy/param?name=" + name + "&token=" + this.config.token)
+            axios.get(host + "/ctastrategy/param?name=" + name + "&token=" + this.config.token)
                 .then(res => {
                     if (res.data.result_code !== "success") {
                         that.$notify({ title: '警告', message: 'ctastrategy/param接口报错', type: 'warning', duration: 0, });
@@ -534,7 +602,6 @@ new Vue({
 
                 })
                 .catch(res => {
-                    console.log(res)
                     that.$notify({ title: '警告', message: 'ctastrategy/param接口报错', type: 'warning', duration: 0, });
                 })
         },
@@ -545,7 +612,7 @@ new Vue({
             if (this.config.token !== undefined) {
                 gInfo(apiName, this.config.token)
             } else {
-                axios.get('http://127.0.0.1:5000/token?username=test&password=test', {
+                axios.get(host + '/token?username=test&password=test', {
 
                     })
                     .then(function(res) {
@@ -562,7 +629,7 @@ new Vue({
             }
 
             function gInfo(apiName, token) {
-                axios.get("http://127.0.0.1:5000/" + apiName + "?token=" + token)
+                axios.get(host + "/" + apiName + "?token=" + token)
                     .then(res => {
                         if (res.data.result_code == "success") {
                             that[dataArr] = that[dataArr].concat(res.data.data).reverse()
@@ -577,8 +644,16 @@ new Vue({
         },
         onSubmit(e) {
             this.loading.order = true;
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
             const that = this;
-            axios.post('http://127.0.0.1:5000/order', {
+            axios.post(host + '/order', {
                     vtSymbol: this.form.vtSymbol,
                     price: this.form.lastPrice,
                     volume: this.form.volume,
@@ -601,6 +676,14 @@ new Vue({
                 });
         },
         onSubscribe(target) {
+
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
             const that = this;
             if (typeof(target) !== "object") {
                 var _vtSymbol = target
@@ -616,7 +699,7 @@ new Vue({
                 });
             } else {
                 this.loading.subScribe = true;
-                axios.post("http://127.0.0.1:5000/tick", {
+                axios.post(host + "/tick", {
                         vtSymbol: _vtSymbol,
                         token: this.config.token
                     })
@@ -638,9 +721,17 @@ new Vue({
             }
         },
         dOrder(e) {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
             let vtOrderID = e.vtOrderID,
                 that = this;
-            axios.delete("http://127.0.0.1:5000/order?vtOrderID=" + vtOrderID + "&token=" + this.config.token)
+            axios.delete(host + "/order?vtOrderID=" + vtOrderID + "&token=" + this.config.token)
                 .then(res => {
                     if (res.data.result_code == "success") {
                         that.$message({ message: '撤单已提交', type: 'success' });
@@ -652,21 +743,6 @@ new Vue({
                     that.$notify({ title: '警告', message: '服务异常，撤单提交失败', type: 'warning', duration: 2000, });
                 })
         },
-        gToken() {
-            const that = this;
-            axios.get('http://127.0.0.1:5000/token?username=test&password=test')
-                .then(function(res) {
-                    if (res.status == 200 && res.data.result_code == "success") {
-                        that.config.token = res.data.data
-                        that.gGateway(res.data.data)
-                    } else {
-                        that.$notify({ title: '警告', message: 'token获取失败', type: 'warning', duration: 0, });
-                    }
-                })
-                .catch(function(err) {
-                    that.$notify({ title: '警告', message: 'token获取失败', type: 'warning', duration: 0, });
-                });
-        },
         handleClick(row) {
             this.onSubscribe(row.vtSymbol)
         },
@@ -675,30 +751,47 @@ new Vue({
             that.loading.contract = true;
             if (tab.name == "search") {
                 this.gContract()
-            }else if(tab.name == "cta"){
+            } else if (tab.name == "cta") {
                 this.judgeIfStrategy()
                 this.gCtaLog()
             }
         },
-        judgeIfStrategy(){
+        judgeIfStrategy() {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
             let that = this;
-            axios.get("http://127.0.0.1:5000/ctastrategy/name?token="+this.config.token)
-                .then(res=>{
+            axios.get(host + "/ctastrategy/name?token=" + this.config.token)
+                .then(res => {
                     let nameArray = res.data.data;
-                    nameArray.forEach(function(item){
+                    nameArray.forEach(function(item) {
                         _strategy[item] = { name: item };
                         that.gParams(item)
                         that.gVar(item)
                     })
                 })
-                .catch(res=>{
-                    console.log(res)
+                .catch(res => {
+                    that.$notify({ title: '警告', message: '连接异常', type: 'warning', duration: 4500, });
                 })
         },
-        gContract(){
+        gContract() {
+
+            if (this.config.token == undefined || this.config.token == "") {
+                this.loading.contract = false;
+                this.$alert('请先连接CTP', '警告', {
+                    confirmButtonText: '确定',
+                });
+                return;
+            }
+
             const that = this;
             if (that.contract.length == 0) {
-                axios.get("http://127.0.0.1:5000/contract?token=" + this.config.token)
+                axios.get(host + "/contract?token=" + this.config.token)
                     .then(res => {
                         that.loading.contract = false;
                         if (res.data.result_code == "success") {
@@ -713,14 +806,17 @@ new Vue({
             }
 
         },
-        gGateway(token) {
-            axios.post('http://127.0.0.1:5000/gateway', {
-                    token: token,
+        gGateway() {
+            const that = this;
+            axios.post(host + '/gateway', {
+                    token: this.config.token,
                     gatewayName: 'CTP'
                 })
                 .then(function(res) {
+                    that.$message({ message: '已连接CTP', type: 'success' });
                 })
                 .catch(function(err) {
+                    console.log("res",err)
                 });
         },
         gTick(target) {
@@ -748,7 +844,7 @@ new Vue({
 
             socket.on("eTick.", function(data) {
                 that.leftTrade = that.tickObj[target]
-                that.leftTrade.priceRatio = ((that.tickObj[target].lastPrice / that.tickObj[target].preClosePrice) - 1).toFixed(2) + "%"
+                that.leftTrade.priceRatio = (((that.tickObj[target].lastPrice / that.tickObj[target].preClosePrice) - 1)*100.0).toFixed(2) + "%"
                 // if (that.tickObj[target] !== undefined) {
                 //     if (that.tickObj[target].lastPrice == undefined) {
                 //         that.form.lastPrice = that.tickObj[target].lastPrice
@@ -770,15 +866,15 @@ new Vue({
                 accounts = new Object();
             socket.on("eAccount.", function(data) {
                 accounts[data.orderID] = data
-                that.account = that.account.concat(Object.values(accounts)).reverse()
+                that.account = Object.values(accounts).reverse()
             });
         },
         gPosition() {
             let that = this,
                 positions = new Object();
             socket.on("ePosition.", function(data) {
-                positions[data.symbol] = data
-                that.position = that.position.concat(Object.values(positions)).reverse()
+                positions[data.vtSymbol] = data
+                that.position = Object.values(positions).reverse()
             });
         },
         gTrade() {
@@ -803,13 +899,11 @@ new Vue({
                 logObj = new Object();
             socket.on("eLog.", function(data) {
                 logObj[data.logTime] = data
-                that.log = that.concat(Object.values(logObj)).reverse()
+                that.log = that.log.concat(Object.values(logObj)).reverse()
             });
         },
-        handleTabLeft(tab, event) {
-        },
-        handleTabRight(tab, event) {
-        },
+        handleTabLeft(tab, event) {},
+        handleTabRight(tab, event) {},
         gConnectionStatus() {
             const that = this;
             socket.on('disconnect', function() {
@@ -856,4 +950,4 @@ new Vue({
 })
 </script>
 
-</html>
\ No newline at end of file
+</html>
