hqchart 1.1.12693 → 1.1.12708

package/src/jscommon/umychart.vue.components/simulatetrade.vue

@@ -1,1471 +0,0 @@
-<template>
-    <div class="simulateContainer" ref='simulateContainer' style='height: 215px;'>
-        <div class="collapseWrap" ref='collapseWrap' v-show='IsShow.CollapseWrap'>
-            <p class="block" :class='{"hide":IsCollapse}' @click='collapseContainer'></p>
-        </div>
-        <div class="topAccountInfo" ref='topAccountInfo'>
-            <!-- 底部数据 -->
-            <p><span>{{TopAccountData.Account.Value}}</span></p>
-            <p><span>{{TopAccountData.TotalMoney.Text}}</span><span>{{TopAccountData.TotalMoney.Value}}</span></p>
-            <p><span>{{TopAccountData.Available.Text}}</span><span>{{TopAccountData.Available.Value}}</span></p>
-            <p><span>{{TopAccountData.TotalMarketValue.Text}}</span><span>{{TopAccountData.TotalMarketValue.Value}}</span>
-            </p>
-            <p><span>{{TopAccountData.TotalProfitRate.Text}}</span><span>{{TopAccountData.TotalProfitRate.Value}}</span>
-            </p>
-        </div>
-        <div class="oprContainer" :style="{height:OprContainerH+'px'}">
-            <div class="oprType" ref='oprType'>
-                <div class="" v-for='(item,index) in DefaultOprType' :key='index'
-                    :class='{active:OprTypeIndex == index}' @click='ChangeOprType(item,index)'>
-                    <span>{{item.Text}} <i :class="OprTypeIndex == index ? 'el-icon-arrow-up colorWhite' : 'el-icon-arrow-down'" v-show='item.Children.length > 0'></i></span>
-                    <div class="menuTwo" v-show='OprTypeIndex == index'>
-                        <p v-for='(child,ind) in item.Children' :key='ind' :class='{active:ind == OprMenuTwoIndex}'
-                            @click.stop='CheckTrade(item,child,ind)'>{{child}}</p>
-                    </div>
-                </div>
-            </div>
-            <div class="oprInfo" v-show='IsShow.Buy' ref='oprInfoBuy'>
-                <!-- 买入 -->
-                <div class="symbolWrap"><span class="title">证券代码</span>
-                    <div class="inputBox"><input type="text" maxlength="9" v-model='Symbol' @keyup='SpellSock()'>
-                        <div class="stockList" v-show='IsShow.SpellListEle'>
-                            <p class="item" v-for='(item,index) in SpellStockData' @click='hideSpellList(item)'
-                                :key='index'><span class="symbol">{{item.Symbol}}</span><span>{{item.Name}}</span></p>
-                        </div>
-                    </div>
-                </div>
-                <div class="aa"><span class="title">买入价格</span>
-                    <div class="inputCalu"><span class="min" @click='MinPriceValue'>-</span><input type="text"
-                            v-model='BuyInputData.Price'><span class="add" @click='AddPriceValue'>+</span></div>
-                    <div></div>
-                </div>
-                <div class="volWrap"><span class="title">可买数量</span>
-                    <div class="inputBox"><input type="text" v-model='BuyInputData.Amount'><span>股</span></div>
-                </div>
-                <div class="aa"><span class="title">买入数量</span>
-                    <div class="inputCalu"><span class="min" @click='MinVolValue'>-</span><input type="text"
-                            v-model='BuyInputData.Vol'><span class="add" @click='AddVolValue'>+</span></div>
-                    <span>股</span>
-                </div>
-                <div class="rates"><span v-for='(item,index) in RateList' :key='index'
-                        @click='CalVolByRate(item.Value)'>{{item.Text}}</span></div>
-                <div class="oprBtn"><span class="buyBtn" @click='QueryApi'>买入</span></div>
-            </div>
-            <div class="oprInfo" v-show='IsShow.Sell' ref='oprInfoSell'>
-                <!-- 卖出 -->
-                <div class="symbolWrap"><span class="title">证券代码</span>
-                    <div class="inputBox"><input type="text" maxlength="9" v-model='Symbol' @keyup='SpellSock()'>
-                        <div class="stockList" v-show='IsShow.SpellListEle'>
-                            <p class="item" v-for='(item,index) in SpellStockData' @click='hideSpellList(item.Symbol)'
-                                :key='index'><span class="symbol">{{item.Symbol}}</span><span>{{item.Name}}</span></p>
-                        </div>
-                    </div>
-                </div>
-                <div class="aa"><span class="title">卖出价格</span>
-                    <div class="inputCalu"><span class="min" @click='MinPriceValue'>-</span><input type="text"
-                            v-model='SellInputData.Price'><span class="add" @click='AddPriceValue'>+</span></div>
-                    <div></div>
-                </div>
-                <div class="volWrap"><span class="title">可卖数量</span>
-                    <div class="inputBox"><input type="text" v-model='SellInputData.Amount'><span>股</span></div>
-                </div>
-                <div class="aa"><span class="title">卖出数量</span>
-                    <div class="inputCalu"><span class="min" @click='MinVolValue'>-</span><input type="text"
-                            v-model='SellInputData.Vol'><span class="add" @click='AddVolValue'>+</span></div>
-                    <span>股</span>
-                </div>
-                <div class="rates"><span v-for='(item,index) in RateList' :key='index'
-                        @click='CalVolByRate(item.Value)'>{{item.Text}}</span></div>
-                <div class="oprBtn"><span class="sellBtn" @click='QueryApi'>卖出</span></div>
-            </div>
-            <div class="tradeInfo" v-show='IsShow.TradeInfo' :style="{width:TradeInfoWidth+'px'}">
-                <el-table :max-height='TableMaxheight' :data="CapitalTableData"
-                    style="width: 100%" :row-class-name="ClassNameByRateFun" highlight-current-row @current-change="selectCurrentRow">
-                    <el-table-column v-for='(item,index) in CapitalTHeader' :key='index' :prop='item.Prop' :label='item.Label' :align="index>1 ? 'right':'left'"></el-table-column>
-                </el-table>
-            </div>
-            <div class="CancelContainer" v-show='IsShow.Cancel' :style="{width:CheckWidth+'px'}">
-                <!-- 撤单 -->
-                <div class="tableTopSelct" ref='tableTopSelct'><span class="countText">共{{CancelTableData.length}}条</span>
-                    <p><span class="borderBtn" @click='QueryCancelApi'>撤单</span><span class="borderBtn" @click='QueryEntrustApi'>刷新</span></p>
-                </div>
-                <el-table ref='tabelForCancel' :max-height="CancelTableMaxheight" :data="CancelTableData" style="width: 100%" highlight-current-row @current-change="selectCurrentRow"
-                    :row-class-name="ClassNameByBuySellFun">
-                    <el-table-column v-for='(item,index) in EntrustTHeader' :key='index' :prop='item.Prop' :align="index > 1 ? 'right' : 'left'"
-                        :label='item.Label'></el-table-column>
-                </el-table>
-            </div>
-            <div class="checkTableContainer" v-show='IsShow.Check' :style="{width:CheckWidth+'px'}">
-                <!-- 右侧查询部分 -->
-                <div class="dateSelect" ref='dateSelect' v-show='IsShow.DateRange'>
-                    查询日期
-                    <el-date-picker v-model="dateValue1" type="date" placeholder="选择日期" @change='GetStartDate'></el-date-picker>
-                    <span class='spaceText'>至</span>
-                    <el-date-picker v-model="dateValue2" type="date" placeholder="选择日期" @change='GetEndDate'></el-date-picker>
-                    <span class='borderBtn' @click='QueryHistory'>查询</span>
-                </div>
-
-                <el-table v-show='IsShow.CheckTable.Capital' :max-height="TableMaxheight" @current-change="selectCurrentRow" :data="CapitalTableData"
-                    style="width: 100%" :row-class-name="ClassNameByRateFun">
-                    <el-table-column v-for='(item,index) in CapitalTHeader' :key='index' :prop='item.Prop' :align="index>1 ? 'right':'left'"
-                        :label='item.Label'></el-table-column>
-                </el-table>
-
-                <el-table v-show='IsShow.CheckTable.Entrust' :max-height="TableMaxheight" :data="EntrustTableData" @current-change="selectCurrentRow"
-                    style="width: 100%" :row-class-name="ClassNameByBuySellFun">
-                    <el-table-column v-for='(item,index) in EntrustTHeader' :key='index' :prop='item.Prop' :align="index > 3 ? 'right' : 'left'"
-                        :label='item.Label'></el-table-column>
-                </el-table>
-
-                <el-table v-show='IsShow.CheckTable.Deal' :max-height="TableMaxheight" :data="DealTableData" style="width: 100%" @current-change="selectCurrentRow"
-                    :row-class-name="ClassNameByBuySellFun">
-                    <el-table-column v-for='(item,index) in DealTHeader' :key='index' :prop='item.Prop' :align="index > 2 ? 'right' : 'left'"
-                        :label='item.Label'></el-table-column>
-                </el-table>
-
-                <el-table v-show='IsShow.CheckTable.HistoryEntrust' :max-height="HistoryTableMaxheight" :data="HistoryEntrustTableData" @current-change="selectCurrentRow"
-                    style="width: 100%" :row-class-name="ClassNameByBuySellFun">
-                    <el-table-column v-for='(item,index) in HistoryEntrustTHeader' :key='index' :prop='item.Prop' :align="index > 3 ? 'right' : 'left'"
-                        :label='item.Label'></el-table-column>
-                </el-table>
-
-                <el-table v-show='IsShow.CheckTable.HistoryDeal' :max-height="HistoryTableMaxheight" :data="HistoryDealTableData" @current-change="selectCurrentRow"
-                    style="width: 100%" :row-class-name="ClassNameByBuySellFun">
-                    <el-table-column v-for='(item,index) in HistoryDealTHeader' :key='index' :prop='item.Prop' :align="index > 3 ? 'right' : 'left'"
-                        :label='item.Label'></el-table-column>
-                </el-table>
-            </div>
-            
-        </div>
-    </div>
-</template>
-
-<script>
-
-    import JSCommonStock from '../umychart.vue/umychart.stock.vue.js'
-    import JSCommon from '../umychart.vue/umychart.vue.js'
-    import $ from "jquery"
-
-    // import Vue from 'vue'
-    // import ElementUI from 'element-ui'
-    // import '../../../node_modules/element-ui/lib/theme-default/index.css';
-    // import locale from '../../../node_modules/element-ui/lib/locale/lang/en'
-
-    // Vue.use(ElementUI,{ locale })
-
-    function DefaultData(){}
-
-    DefaultData.SetBuyInput = function(){
-        return { Symbol: '', Name: '', Price: 0, Amount: 0, Vol: 0 };  /* Amount 可买数量 */
-    }
-
-    DefaultData.SetSellInput = function(){
-        return { Symbol: '', Price: 0, Amount: 0, Vol: 0 };  /* Amount 可卖数量 */
-    }
-
-    export default
-        {
-            name: 'SimulateTrade',
-            data() {
-                return {
-                    BuyInputData: DefaultData.SetBuyInput(),
-                    SellInputData: DefaultData.SetSellInput(),
-                    CancelData: {},
-                    Symbol: '',
-                    SearchStock: null,
-                    SpellStockData: [],
-                    IsSpell: true, //是否要联想
-                    DefaultOprType: [
-                        {
-                            Text: '买入',
-                            ActiveIndex: -1,
-                            Children: [],
-                        },
-                        {
-                            Text: '卖出',
-                            ActiveIndex: -1,
-                            Children: [],
-                        },
-                        {
-                            Text: '撤单',
-                            ActiveIndex: -1,
-                            Children: [],
-                        },
-                        {
-                            Text: '查询',
-                            ActiveIndex: 0,
-                            Children: ['资金股份', '当日委托', '当日成交', '历史委托', '历史成交'],
-                        },
-                    ],
-                    IsCollapse:false, //收起容器
-                    dateValue1:'', //日期选择
-                    dateValue2:'',
-                    DatePicker:{
-                        Start:0,
-                        End:0
-                    },
-                    OprType: '买入',
-                    IsShow: {
-                        SpellListEle: false,
-                        // MenuTwo:false,
-                        Buy: true,
-                        TradeInfo: true,
-                        Sell: false,
-                        Cancel: false,
-                        DateRange: false,
-                        CheckTable: {
-                            Capital: true,
-                            Entrust: false,
-                            Deal: false,
-                            HistoryEntrust: false,
-                            HistoryDeal: false
-                        },
-                        CollapseWrap:true //收起按钮
-                    },
-                    RateList: [
-                        { Text: '1/4', Value: 1 / 4 },
-                        { Text: '1/3', Value: 1 / 3 },
-                        { Text: '1/2', Value: 1 / 2 },
-                        { Text: '全部', Value: 1 }
-                    ],
-                    Domain: 'https://opensource.zealink.com/API/',
-
-                    tableData: [],
-                    currentRow: {},
-                    BuySellRow:{},
-                    EntrustTHeader: [
-                        { Prop: 'time', Label: '委托时间', Width: '180' },
-                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
-                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
-                        { Prop: 'name', Label: '证券名称', Width: '180' },
-                        { Prop: 'status', Label: '状态说明', Width: '180' },
-                        { Prop: 'price', Label: '委托价格', Width: '180' },
-                        { Prop: 'vol', Label: '委托数量', Width: '180' },
-                        { Prop: 'tradeVol', Label: '成交数量', Width: '180' },
-                        { Prop: 'bookid', Label: '申报编号', Width: '180' }
-                    ],
-                    DealTHeader: [
-                        { Prop: 'time', Label: '成交时间', Width: '180' },
-                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
-                        { Prop: 'name', Label: '证券名称', Width: '180' },
-                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
-                        { Prop: 'vol', Label: '成交数量', Width: '180' },
-                        { Prop: 'price', Label: '成交价格', Width: '180' },
-                        { Prop: 'amount', Label: '成交金额', Width: '180' },
-                        { Prop: 'bookid', Label: '申报编号', Width: '180' }
-                    ],
-                    HistoryEntrustTHeader: [
-                        { Prop: 'date', Label: '委托日期', Width: '180' },
-                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
-                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
-                        { Prop: 'name', Label: '证券名称', Width: '180' },
-                        { Prop: 'status', Label: '状态说明', Width: '180' },
-                        { Prop: 'price', Label: '委托价格', Width: '180' },
-                        { Prop: 'vol', Label: '委托数量', Width: '180' },
-                        { Prop: 'tradeVol', Label: '成交数量', Width: '180' },
-                        { Prop: 'bookid', Label: '委托编号', Width: '180' }
-                    ],
-                    HistoryDealTHeader: [
-                        { Prop: 'date', Label: '成交日期', Width: '180' },
-                        { Prop: 'time', Label: '成交时间', Width: '180' },
-                        { Prop: 'symbol', Label: '证券代码', Width: '180' },
-                        { Prop: 'name', Label: '证券名称', Width: '180' },
-                        { Prop: 'oprid', Label: '操作标志', Width: '180' },
-                        { Prop: 'vol', Label: '成交数量', Width: '180' },
-                        { Prop: 'price', Label: '成交价格', Width: '180' },
-                        { Prop: 'amount', Label: '成交金额', Width: '180' },
-                        { Prop: 'bookid', Label: '委托编号', Width: '180' }
-                    ],
-                    CapitalTHeader: [
-                        { Prop: 'symbol', Label: '证券代码', Width: '' },
-                        { Prop: 'Name', Label: '证券名称', Width: '100' },
-                        { Prop: 'Vol', Label: '证券数量', Width: '100' },
-                        { Prop: 'TradeVol', Label: '可卖数量', Width: '' },
-                        { Prop: 'FlowProfit', Label: '浮动盈亏', Width: '' },
-                        { Prop: 'FlowProfitRate', Label: '盈亏比例', Width: '' },
-                        { Prop: 'OprPrice', Label: '参考成本价', Width: '' },
-                        { Prop: 'Price', Label: '市价', Width: '180' },
-                        { Prop: 'MarketValue', Label: '参考市值', Width: '' }
-                    ],
-
-                    // Defaultdefaultu: 'lixq',
-                    BuyApiObj: { "userid": "", "symbol": "", "name": "", "price": 0, "vol": 0 },
-                    SellApiObj: { "userid": "", "symbol": "", "price": 0, "vol": 0 },
-                    CancelApiObj: { "userid": "", "bookid": 0 },
-                    EntrustApiObj: { "userid": "", "type": 0 },
-                    DealApiObj: { "userid": "", "type": 1 },
-                    HistoryEntrustApiObj: { "userid": "", "querydate": { "StartDate": 0, "EndDate": 0 }, "type": 0 },
-                    HistoryDealApiObj: { "userid": "", "querydate": { "StartDate": 0, "EndDate": 0 }, "type": 1 },
-                    AccountApiObjPostion: { "userid": "", "stock": "true" },//请求账户+持仓
-                    AccountApiObj: { "userid": "", "stock": "false" },//请求账户
-
-                    CapitalTableData: [],
-                    EntrustTableData: [],
-                    DealTableData: [],
-                    HistoryEntrustTableData: [],
-                    HistoryDealTableData: [],
-
-                    CancelTableData: [],
-                    AccountPostionData: { Available: 0, Balance: 0, Stock: [] },
-
-                    TableMaxheight:0,
-                    HistoryTableMaxheight:0,
-                    CancelTableMaxheight:0,
-                    TradeInfoWidth:0,  //左，中，右-账户信息
-                    CheckWidth:0, //左，右-查询(撤单)信息
-                    OprContainerH:0, //上，下-操作信息
-
-                    TableList: [], //{Symbol:'',Name:'',Amount:0,TradeVol:0,FloatingPL:0,PLRate:0,MetaPrice:0,Price:0,MarketValue:0}
-                    JsStock: null,
-                    ID: JSCommon.JSChart.CreateGuid(),
-                    IDForPosition: JSCommon.JSChart.CreateGuid(),
-                    OprTypeIndex: 0,
-                    OprMenuTwoIndex: 0,
-                    TopAccountData: {
-                        Account: { Text: '', Value: '' },
-                        TotalMoney: { Text: '总资产：', Value: 0 },
-                        Available: { Text: '可用资金：', Value: 0 },
-                        TotalMarketValue: { Text: '股票市值：', Value: 0 },
-                        TotalProfitRate: { Text: '总盈亏：', Value: 0 }
-                    },
-                    ClassNameByRateFun:null,
-                    ClassNameByBuySellFun:null
-
-                };
-
-            },
-            watch: {
-            },
-
-            props:
-                [
-                    'DefaultUserID','DefaultElementUI',
-                    'DefaultCollapseDiv' //'no' 表示没有收起按钮
-                ],
-
-            //创建
-            created: function () {
-                this.JsStock = JSCommonStock.JSStockInit();
-                this.InitalStock();
-                this.JsStock.ReqeustData();
-
-                if(this.DefaultElementUI && (this.DefaultElementUI == 2)){
-                    this.ClassNameByRateFun = this.ClassNameByRate2;
-                    this.ClassNameByBuySellFun = this.ClassNameByBuySell2;
-                }else{
-                    this.ClassNameByRateFun = this.ClassNameByRate;
-                    this.ClassNameByBuySellFun = this.ClassNameByBuySell;
-                }
-
-                if(this.DefaultCollapseDiv) this.IsShow.CollapseWrap = this.DefaultCollapseDiv == 'no' ? false : true;
-
-                this.QueryAccountApi();
-            },
-
-            mounted: function () {
-                var _self = this;
-                $(document).click(function (event) {
-                    var target = $('.symbolWrap');
-                    if (!target.is(event.target) && target.has(event.target).length == 0) {
-                        _self.IsShow.SpellListEle = false;
-                    }
-                });
-
-                this.OnSize();
-            },
-
-            methods:
-            {
-                collapseContainer(){ //收起容器
-                    
-                    this.IsCollapse = !this.IsCollapse;
-                    console.log('[this.IsCollapse]',this.IsCollapse);
-                    var simulateContainer = this.$refs.simulateContainer;
-                    var collapseWrap = this.$refs.collapseWrap;
-                    var defaultHeight = 215;
-                    var currentHeight = 0;
-                    if(this.IsCollapse){
-                        currentHeight = collapseWrap.offsetHeight;
-                    }else{
-                        currentHeight = defaultHeight;
-                    }
-                    simulateContainer.style.height = currentHeight + 'px';
-                    this.$emit('collapsediv',currentHeight);
-                },
-                selectCurrentRow(val){
-                    if(this.OprType == '买入' || this.OprType == '卖出' ){
-                        this.AddToBuySell(val);
-                    }else if(this.OprType == '撤单'){
-                        this.CancelCurrentChange(val)
-                    }
-                    this.$emit('selectRow',val.symbol,val.Name);
-                },
-                AddToBuySell(val){
-                    this.BuySellRow = val;
-                    this.Symbol = val.symbol;
-                    if(this.OprType == '买入'){
-                        this.BuyInputData.Symbol = val.symbol;
-                        var arySymbol = new Array();
-                        arySymbol.push(this.BuyInputData.Symbol);
-                        console.log('simulatetrade::AddToBuySell this.Symbol',this.Symbol);
-                        this.InitalStock();
-                        this.QueryStockInfo(null, arySymbol, null, this.JsStock);
-                        this.JsStock.ReqeustData();
-                        //请求价格
-                    }else if(this.OprType == '卖出'){
-                        this.SellInputData.Symbol = val.symbol;
-                        this.SellInputData.Amount = val.TradeVol;
-                        var arySymbol = new Array();
-                        arySymbol.push(this.SellInputData.Symbol);
-                        this.InitalStock();
-                        this.QueryStockInfo(null, arySymbol, null, this.JsStock);
-                        this.JsStock.ReqeustData();
-                    }
-                    
-                },
-                ClassNameByRate(row,index){
-                    if(row.FlowProfitRate != ''){
-                        var flowProfitRate = row.FlowProfitRate.substring(0,row.FlowProfitRate.length - 2);
-                        if(flowProfitRate > 0){
-                            return 'buy-row';
-                        }else{
-                            return 'sell-row';
-                        }
-                    }
-                },
-                ClassNameByRate2({row,index}){ //element-ui 2.0以上
-                    if(row.FlowProfitRate != ''){
-                        var flowProfitRate = row.FlowProfitRate.substring(0,row.FlowProfitRate.length - 2);
-                        if(flowProfitRate > 0){
-                            return 'buy-row';
-                        }else{
-                            return 'sell-row';
-                        }
-                    }
-                },
-                ClassNameByBuySell(row,index){
-                    if(row.oprid == '买入'){
-                        return 'buy-row';
-                    }else if(row.oprid == '卖出'){
-                        return 'sell-row';
-                    }
-                },
-                ClassNameByBuySell2({row,index}){ //element-ui 2.0以上
-                    if(row.oprid == '买入'){
-                        return 'buy-row';
-                    }else if(row.oprid == '卖出'){
-                        return 'sell-row';
-                    }
-                },
-                SpellSock() {
-                    this.SearchStock = JSCommonStock.JSStock.GetSearchStock(this.SpellCallback);
-                    var type = this.OprType;
-                    var symbol = this.Symbol;                 
-                    if(symbol != ''){
-                        this.SearchStock.Search(symbol, 0);
-                    }
-                },
-                GetStartDate(val){
-                    if(val != undefined){
-                        var dateAry = val.split('-');
-                        var dateStr = '';
-                        dateAry.forEach(item => {
-                            dateStr += item;
-                        });
-                        this.DatePicker.Start = Number(dateStr);
-                    }
-                    
-                },
-                GetEndDate(val){
-                    if(val != undefined){
-                        var dateAry = val.split('-');
-                        var dateStr = '';
-                        dateAry.forEach(item => {
-                            dateStr += item;
-                        });
-                        this.DatePicker.End = Number(dateStr);
-                    }
-                    
-                },
-                OnSize(width,height){
-                    var simulateContainer = this.$refs.simulateContainer;
-                    var topAccountInfo = this.$refs.topAccountInfo;
-                    var oprType = this.$refs.oprType;
-                    var oprInfoBuy = this.$refs.oprInfoBuy;
-                    var dateSelect = this.$refs.dateSelect;
-                    var tableTopSelct = this.$refs.tableTopSelct;
-                    var collapseWrap = this.$refs.collapseWrap;
-
-                    console.log('simulatetrade::OnSize:height',height);
-
-                    if(width){
-                        simulateContainer.style.width = width + 'px';
-                    }else{
-                        var width = simulateContainer.clientWidth;
-                    }
-
-                    if(height){
-                        simulateContainer.style.height = height + 'px';
-                    }else{
-                        var height = simulateContainer.clientHeight;
-                    }
-                    
-                    
-                    // var topAccountInfoHeight = topAccountInfo.offsetHeight;
-                    var topAccountInfoHeight = 26;
-                    var collapseWrapHeight = 0;
-                    if(this.CollapseWrap){
-                        collapseWrapHeight = collapseWrap.offsetHeight;
-                    }
-                    var oprContainerH = height - topAccountInfoHeight - collapseWrapHeight;  //仿真部分高度
-                    
-                    this.OprContainerH = oprContainerH;
-                    this.TableMaxheight = oprContainerH;
-                    // this.TradeInfoWidth = width - oprType.offsetWidth - oprInfoBuy.offsetWidth;
-                    this.TradeInfoWidth = width - 135 - 281;
-                    this.CancelTableMaxheight = oprContainerH - 30 - collapseWrapHeight;
-                    this.HistoryTableMaxheight = oprContainerH - 30 - collapseWrapHeight;
-
-                    this.CheckWidth = width - 135;
-                },
-                SpellCallback(data) {
-                    var stocks = data.Data;
-                    this.SpellStockData = stocks;
-                    this.showSpellList();
-                },
-                QueryHistory() {
-                    var startDate = this.DatePicker.Start;
-                    var endDate = this.DatePicker.End;
-                    if(startDate != 0 && endDate != 0){  //时间范围判断
-                        if (this.OprType == '历史委托') {
-                            this.QueryHistoryEntrustApi(startDate, endDate);
-                        } else if (this.OprType == '历史成交') {
-                            this.QueryHistoryDealApi(startDate, endDate);
-                        }
-                    }else{
-                        this.$message('请选择时间范围');
-                    }
-                    
-                },
-                CancelCurrentChange(val) {
-                    this.currentRow = val;
-                },
-                QueryHistoryEntrustApi(start, end) { //历史委托
-                    this.HistoryEntrustApiObj.userid = this.DefaultUserID;
-                    this.HistoryEntrustApiObj.querydate.StartDate = start;
-                    this.HistoryEntrustApiObj.querydate.EndDate = end;
-                    this.QueryApiJSTemplate(this.HistoryEntrustApiObj, 'VTradeQuery', this.HistoryEntrustCallback);
-                },
-                QueryHistoryDealApi(start, end) {  //历史成交
-                    this.HistoryDealApiObj.userid = this.DefaultUserID;
-                    this.HistoryDealApiObj.querydate.StartDate = start;
-                    this.HistoryDealApiObj.querydate.EndDate = end;
-                    this.QueryApiJSTemplate(this.HistoryDealApiObj, 'VTradeQuery', this.HistoryDealCallback);
-                },
-                HistoryEntrustCallback(res) {
-                    let _self = this;
-                    _self.HistoryEntrustTableData.splice(0,_self.HistoryEntrustTableData.length);
-                    if (res.code == 0) {
-                        let statusAry = ['已报待撤', '待委托', '已撤单', '已委托', '部分成交', '完全成交']; //数据对应:下标-2
-                        var entrustAry = res.entrust;
-                        entrustAry.forEach(item => {
-                            var historyEnTr = {
-                                date: JSCommon.IFrameSplitOperator.FormatDateString(item.date),
-                                oprid: item.operationid > 0 ? '卖出' : '买入',
-                                symbol: item.symbol,
-                                name: item.name,
-                                status: statusAry[item.status + 2],
-                                price: JSCommon.IFrameSplitOperator.FormatValueString(item.price,2),
-                                vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol,0),
-                                tradeVol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.dealvol,0),
-                                bookid: item.bookid
-                            }
-                            _self.HistoryEntrustTableData.push(historyEnTr);
-                        });
-                    } else {
-                        this.$message(res.message);
-                    }
-
-                },
-                HistoryDealCallback(res) {
-                    let _self = this;
-                    _self.HistoryDealTableData.splice(0,_self.HistoryDealTableData.length);
-                    if (res.code == 0) {
-                        var DealAry = res.deal;
-                        DealAry.forEach(item => {
-                            var historyDealTr = {
-                                date: JSCommon.IFrameSplitOperator.FormatDateString(item.date),
-                                time: JSCommon.IFrameSplitOperator.FormatTimeString(item.time),
-                                symbol: item.symbol,
-                                name: item.name,
-                                oprid: item.operationid > 0 ? '卖出' : '买入',
-                                vol: item.vol,
-                                price: item.price,
-                                amount: item.vol * item.price,
-                                bookid: item.bookid
-                            }
-                            _self.HistoryDealTableData.push(historyDealTr);
-                        });
-                    } else {
-                        this.$message(res.message);
-                    }
-                },
-                CheckTrade(menuOne, child, ind) {
-                    this.OprType = child;
-                    this.OprMenuTwoIndex = ind;
-                    switch (child) {
-                        case '资金股份':
-                            this.IsShow.DateRange = false;
-                            this.IsShow.CheckTable = {
-                                Capital: true,
-                                Entrust: false,
-                                Deal: false,
-                                HistoryEntrust: false,
-                                HistoryDeal: false
-                            };
-                            break;
-                        case '当日委托':
-                            this.QueryEntrustApi(); //当日委托
-                            this.IsShow.DateRange = false;
-                            this.IsShow.CheckTable = {
-                                Capital: false,
-                                Entrust: true,
-                                Deal: false,
-                                HistoryEntrust: false,
-                                HistoryDeal: false
-                            };
-                            break;
-                        case '当日成交':
-                            this.QueryDealApi(); //当日成交
-                            this.IsShow.DateRange = false;
-                            this.IsShow.CheckTable = {
-                                Capital: false,
-                                Entrust: false,
-                                Deal: true,
-                                HistoryEntrust: false,
-                                HistoryDeal: false
-                            };
-                            break;
-                        case '历史委托':
-                            this.dateValue1 = '';
-                            this.dateValue2 = '';
-                            this.DatePicker.start = 0;
-                            this.DatePicker.End = 0;
-                            this.QueryHistoryEntrustApi(20190315, 20190325);
-                            this.IsShow.DateRange = true;
-                            this.IsShow.CheckTable = {
-                                Capital: false,
-                                Entrust: false,
-                                Deal: false,
-                                HistoryEntrust: true,
-                                HistoryDeal: false
-                            };
-                            break;
-                        case '历史成交':
-                            this.dateValue1 = '';
-                            this.dateValue2 = '';
-                            this.DatePicker.start = 0;
-                            this.DatePicker.End = 0;
-                            this.QueryHistoryDealApi(20190315, 20190325);
-                            this.IsShow.DateRange = true;
-                            this.IsShow.CheckTable = {
-                                Capital: false,
-                                Entrust: false,
-                                Deal: false,
-                                HistoryEntrust: false,
-                                HistoryDeal: true
-                            };
-                            break;
-                    }
-                },
-                hideSpellList(item) {
-                    var symbol = item.Symbol;
-                    var name = item.Name;
-                    this.IsShow.SpellListEle = false;
-                    let type = this.OprType;
-                    this.Symbol = symbol;
-                    if(type == '买入'){
-                        this.BuyInputData.Symbol = symbol;
-                    }else if(type == '卖出'){
-                        this.SellInputData.Symbol = symbol;
-                    }
-                    this.IsSpell = false;
-                    if(symbol != ''){
-                        var arySymbol = new Array();
-                        arySymbol.push(symbol);
-                        this.InitalStock();
-                        this.QueryStockInfo(null, arySymbol, null, this.JsStock);
-                        this.JsStock.ReqeustData();
-                    }
-                    
-                    this.$emit('selectedsymbol',symbol,name)
-                },
-                QueryApi() {
-                    var type = this.OprType;
-                    console.log('::QueryApi type', type);
-                    switch (type) {
-                        case '买入':
-                            this.QueryBuyApi();
-                            break;
-                        case '卖出':
-                            this.QuerySellApi();
-                            break;
-                    }
-                },
-                QueryAccountApi() {  //查询账户信息
-                    this.AccountApiObjPostion.userid = this.DefaultUserID;
-                    this.QueryApiJSTemplate(this.AccountApiObjPostion, 'VTradeUser', this.AccountCallback);
-                },
-                AccountCallback(res) {
-                    if (res.code == 0) {
-                        this.AccountPostionData.Available = res.available;
-                        this.AccountPostionData.Balance = res.balance;
-                        this.AccountPostionData.Stock = res.stock;
-                        let stocks = this.AccountPostionData.Stock;
-                        var _self = this;
-
-                        _self.TopAccountData.Account.Value = this.DefaultUserID;
-                        _self.TopAccountData.Available.Value = Number(res.available).toFixed(2);
-                        let arySymbol = [];
-                        stocks.forEach(stock => {
-                            var positionTableItem = {
-                                symbol: stock.symbol,
-                                Name: stock.name,
-                                Vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(stock.vol,0),
-                                TradeVol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(stock.tradevol,0),
-                                FlowProfit: '', //(市价 - stock.price) * stock.vol
-                                FlowProfitRate: '', //(市价 - stock.price) / stock.price
-                                OprPrice: JSCommon.IFrameSplitOperator.FormatValueString(stock.price,2),
-                                Price: '',//市价
-                                MarketValue: ''  //市价 * stock.vol
-                            };
-                            _self.CapitalTableData.push(positionTableItem);
-
-                            arySymbol.push(stock.symbol);
-                        });
-
-                        this.InitalStockAry(arySymbol);
-                        this.QueryStockAryInfo(null, arySymbol, null, this.JsStock);
-                        this.JsStock.ReqeustData();
-                    } else {
-                        this.$message(res.message);
-                    }
-
-                },
-                QueryCancelApi() {
-                    if(this.currentRow.bookid){
-                        this.CancelApiObj.userid = this.DefaultUserID;
-                        this.CancelApiObj.bookid = this.currentRow.bookid;  //测试订单号
-                        this.QueryApiJSTemplate(this.CancelApiObj, 'VTradeCanel', this.CancelCallback);
-                    }else{
-                        this.$message('请选择订单');
-                    }
-                    
-                },
-                CancelCallback(res) {
-                    if (res.code == 0) {
-                        this.$message('撤单成功');
-                    } else {
-                        this.$message(res.message);
-                    }
-                },
-                QueryEntrustApi() {
-                    this.EntrustApiObj.userid = this.DefaultUserID;
-                    this.QueryApiJSTemplate(this.EntrustApiObj, 'VTradeQuery', this.EntrustCallback);
-                },
-                EntrustCallback(res) { //委托数据中包含撤单信息
-                    let _self = this;
-                    if (res.code == 0) {
-                        let statusAry = ['已报待撤', '待委托', '已撤单', '已委托', '部分成交', '完全成交']; //数据对应:下标-2
-                        var entrusts = res.entrust;
-                        this.EntrustTableData.splice(0,this.EntrustTableData.length);
-                        entrusts.forEach(item => {
-                            var entrustItem = {
-                                time: JSCommon.IFrameSplitOperator.FormatTimeString(item.time),
-                                oprid: item.operationid > 0 ? '卖出' : '买入',
-                                symbol: item.symbol,
-                                name: item.name,
-                                status: statusAry[item.status + 2],
-                                price: JSCommon.IFrameSplitOperator.FormatValueString(item.price,2),
-                                vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol,0),
-                                tradeVol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.dealvol,0),
-                                bookid: item.bookid,
-                            };
-                            this.EntrustTableData.push(entrustItem);
-                        });
-                        _self.GetCancelData(this.EntrustTableData);
-                    } else {
-                        this.$message(res.message);
-                    }
-                },
-                GetCancelData(data) {
-                    data.forEach(item => {
-                        if (!(item.status == '已撤单' || item.status == '完全成交')) {
-                            this.CancelTableData.push(item);
-                        }
-                    });
-                },
-                QueryDealApi() {
-                    this.DealApiObj.userid = this.DefaultUserID;
-                    this.QueryApiJSTemplate(this.DealApiObj, 'VTradeQuery', this.DealCallback);
-                },
-                DealCallback(res) {
-                    if (res.code == 0) {
-                        var dealAry = res.deal;
-                        this.DealTableData.splice(0,this.DealTableData.length);
-                        dealAry.forEach(item => {
-                            var dealTrItem = {
-                                time: JSCommon.IFrameSplitOperator.FormatTimeString(item.time),
-                                symbol: item.symbol,
-                                name: item.name,
-                                oprid: item.operationid > 0 ? '卖出' : '买入',
-                                vol: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol,0),
-                                price: item.price,
-                                amount: JSCommon.IFrameSplitOperator.FormatValueThousandsString(item.vol * item.price,2),
-                                bookid: item.bookid
-                            };
-                            this.DealTableData.push(dealTrItem);
-                        });
-                    } else {
-                        this.$message(res.message);
-                    }
-                },
-                QueryBuyApi() {
-                    this.BuyApiObj.userid = this.DefaultUserID;
-                    this.BuyApiObj.symbol = this.BuyInputData.Symbol;
-                    this.BuyApiObj.name = this.BuyInputData.Name;
-                    this.BuyApiObj.price = this.BuyInputData.Price;
-                    this.BuyApiObj.vol = this.BuyInputData.Vol;
-                    this.QueryApiJSTemplate(this.BuyApiObj, 'VTradeBuy', this.BuyCallback);
-                },
-                BuyCallback(res) {
-                    if (res.code == 0) {
-                        this.$message('委托成功');
-                    } else {
-                        this.$message(res.message);
-                    }
-                },
-                QuerySellApi() {
-                    this.SellApiObj.userid = this.DefaultUserID;
-                    this.SellApiObj.symbol = this.SellInputData.Symbol;
-                    this.SellApiObj.price = this.SellInputData.Price;
-                    this.SellApiObj.vol = this.SellInputData.Vol;
-                    this.QueryApiJSTemplate(this.SellApiObj, 'VTradeSell', this.SellCallback);
-                },
-                SellCallback(res) {
-                    if (res.code == 0) {
-                        this.$message('委托成功');
-                    } else {
-                        this.$message(res.message);
-                    }
-                },
-                QueryApiJSTemplate(queryObj, apiUrl, callback) {
-                    $.ajax({
-                        url: this.Domain + apiUrl,
-                        method: 'POST',
-                        data: queryObj,
-                        dataType: 'json',
-                        success(res) {
-                            callback(res);
-                        }
-                    });
-                },
-                QueryStockInfo(id, arySymbol, dataType, jsStock) {  //拿到数据
-                    console.log('[simulatetrade::QueryStockInfo]', id, arySymbol, dataType, jsStock, this.ID);
-                    if (id != this.ID) return;
-                    var type = this.OprType;
-                    var symbol = '';
-                    if(type == '买入'){
-                        symbol = this.BuyInputData.Symbol;
-                    }else if(type == '卖出'){
-                        symbol = this.SellInputData.Symbol;
-                    }
-                    if (arySymbol.indexOf(symbol) < 0 || symbol == '') return;
-
-                    let read = jsStock.GetStockRead(this.ID, this.QueryStockInfo); //获取一个读取数据类,并绑定id和更新数据方法
-                    var price = read.Get(symbol, JSCommonStock.STOCK_FIELD_NAME.PRICE);
-
-                    if (type == '买入') {
-                        this.BuyInputData.Price = price;
-                        var balance = this.AccountPostionData.Balance;
-                        var amount = this.BuyInputData.Price == 0 ? 0 : Math.floor(balance / this.BuyInputData.Price / 100) * 100;
-                        this.BuyInputData.Amount = amount;
-                    } else if (type == '卖出') {
-                        this.SellInputData.Price = price;
-                        var tradeVol = 0;
-                        let stocks = this.AccountPostionData.Stock;
-                        stocks.forEach(item => {
-                            if(item.symbol == symbol){
-                                tradeVol = item.tradevol;
-                                return;
-                            }
-                        });
-                        var amount = Math.floor(tradeVol / 100) * 100;
-                        this.SellInputData.Amount = amount;
-                    }
-                },
-                QueryStockAryInfo(id, arySymbol, dataType, jsStock) { //获取持仓所有股票信息
-                    console.log('[simulatetrade::QueryStockAryInfo]', id, arySymbol, dataType, jsStock, this.IDForPosition);
-                    if (id != this.IDForPosition) return;
-
-                    var read = jsStock.GetStockRead(this.IDForPosition, this.QueryStockAryInfo);
-                    let stocks = this.AccountPostionData.Stock;
-                    var _self = this;
-                    _self.TopAccountData.TotalMarketValue.Value = 0;
-                    _self.TopAccountData.TotalProfitRate.Value = 0;
-                    stocks.forEach((stock, index) => {
-                        var price = read.Get(stock.symbol, JSCommonStock.STOCK_FIELD_NAME.PRICE);
-                        var yclose = read.Get(stock.symbol, JSCommonStock.STOCK_FIELD_NAME.YCLOSE);
-
-                        var flowProfit = (price - stock.price) * stock.vol;
-                        var flowProfitRate = (price - stock.price) / stock.price * 100;
-                        var Price = price != null ? price : yclose;   //停牌，取收盘价
-                        // Price = Number(Price);
-                        var marketValue = price * stock.vol;
-                        _self.CapitalTableData[index].FlowProfit = JSCommon.IFrameSplitOperator.FormatValueThousandsString(flowProfit,2);
-                        _self.CapitalTableData[index].FlowProfitRate = JSCommon.IFrameSplitOperator.FormatValueString(flowProfitRate,2) + '%';
-                        _self.CapitalTableData[index].Price = JSCommon.IFrameSplitOperator.FormatValueString(Price,2);
-                        _self.CapitalTableData[index].MarketValue = JSCommon.IFrameSplitOperator.FormatValueThousandsString(marketValue,2);
-
-                        _self.TopAccountData.TotalMarketValue.Value += price != undefined ? Price * stock.vol : 0;
-                        _self.TopAccountData.TotalProfitRate.Value += price != undefined ? (Price - stock.price) * stock.vol : 0;
-                    });
-                    _self.TopAccountData.TotalMarketValue.Value = Number(_self.TopAccountData.TotalMarketValue.Value).toFixed(2);
-                    _self.TopAccountData.TotalProfitRate.Value = Number(_self.TopAccountData.TotalProfitRate.Value).toFixed(2);
-                    var available = Number(_self.TopAccountData.Available.Value);
-                    var totalMarketValue = Number(_self.TopAccountData.TotalMarketValue.Value);
-                    _self.TopAccountData.TotalMoney.Value = Number(totalMarketValue + available).toFixed(2);
-                },
-                
-                InitalStock() {  //订阅数据
-                    let read = this.JsStock.GetStockRead(this.ID, this.QueryStockInfo);         //获取一个读取数据类,并绑定id和更新数据方法
-                    const stockField = [
-                        JSCommonStock.STOCK_FIELD_NAME.PRICE
-                    ];
-                    if(this.Symbol != ''){
-                        read.SetQueryField(this.Symbol, stockField);
-                    }
-                },
-                InitalStockAry(arySymbol) {
-                    let read = this.JsStock.GetStockRead(this.IDForPosition, this.QueryStockAryInfo);         //获取一个读取数据类,并绑定id和更新数据方法
-                    const stockField = [
-                        JSCommonStock.STOCK_FIELD_NAME.PRICE,
-                        JSCommonStock.STOCK_FIELD_NAME.YCLOSE
-                    ];
-                    arySymbol.forEach(symbol => {
-                        if(symbol != ''){
-                            read.SetQueryField(symbol, stockField);
-                        }
-                    });
-                },
-                showSpellList() {
-                    this.IsShow.SpellListEle = true;
-                },
-                ChangeOprType(item, index) {
-                    this.OprType = item.Text;
-                    this.OprTypeIndex = index;
-                    switch (index) {
-                        case 0:
-                            this.IsShow.Buy = true;
-                            this.IsShow.TradeInfo = true;
-                            this.IsShow.Sell = false;
-                            this.IsShow.Cancel = false;
-                            this.IsShow.Check = false;
-
-                            this.BuyInputData = DefaultData.SetBuyInput();
-                            this.Symbol = '';
-                            break;
-                        case 1:  //卖出
-                            this.IsShow.Buy = false;
-                            this.IsShow.TradeInfo = true;
-                            this.IsShow.Sell = true;
-                            this.IsShow.Cancel = false;
-                            this.IsShow.Check = false;
-
-                            this.SellInputData = DefaultData.SetSellInput();
-                            this.Symbol = '';
-                            break;
-                        case 2:  //撤单
-                            this.IsShow.Buy = false;
-                            this.IsShow.TradeInfo = false;
-                            this.IsShow.Sell = false;
-                            this.IsShow.Cancel = true;
-                            this.IsShow.Check = false;
-                            this.QueryEntrustApi();
-                            break;
-                        case 3:
-                            this.IsShow.Buy = false;
-                            this.IsShow.TradeInfo = false;
-                            this.IsShow.Sell = false;
-                            this.IsShow.Cancel = false;
-                            this.IsShow.Check = true;
-                            break;
-                    }
-                },
-                MinPriceValue() { //减少
-                    var type = this.OprType;
-                    var value = 0;
-                    if (type == '买入') {
-                        value = Number(this.BuyInputData.Price);
-                        this.BuyInputData.Price = Number(value - 0.1).toFixed(2);
-                    } else if(type == '卖出'){
-                        value = Number(this.SellInputData.Price);
-                        this.SellInputData.Price = Number(value - 0.1).toFixed(2);;
-                    }
-                },
-                AddPriceValue() { //增加
-                    var type = this.OprType;
-                    var value = 0;
-                    if (type == '买入') {
-                        value = Number(this.BuyInputData.Price);
-                        this.BuyInputData.Price = Number(value + 0.1).toFixed(2);
-                    } else if(type == '卖出'){
-                        value = Number(this.SellInputData.Price);
-                        this.SellInputData.Price = Number(value + 0.1).toFixed(2);
-                    }
-                },
-                MinVolValue() { //减少
-                    var type = this.OprType;
-                    var value = 0;
-                    if (type == '买入') {
-                        value = Number(this.BuyInputData.Vol);
-                        this.BuyInputData.Vol = Math.floor(value - 100)
-                    } else if(type == '卖出'){
-                        value = Number(this.SellInputData.Vol);
-                        this.SellInputData.Vol = Math.floor(value - 100);
-                    }
-                },
-                AddVolValue() { //增加
-                    var type = this.OprType;
-                    var value = 0;
-                    if (type == '买入') {
-                        value = Number(this.BuyInputData.Vol);
-                        this.BuyInputData.Vol = Math.floor(value + 100)
-                    } else if(type == '卖出'){
-                        value = Number(this.SellInputData.Vol);
-                        this.SellInputData.Vol = Math.floor(value + 100);
-                    }
-                },
-                CalVolByRate(rate) {
-                    var type = this.OprType;
-                    var vol = 0;
-                    if (type == '买入') {
-                        vol = Number(this.BuyInputData.Amount);
-                        this.BuyInputData.Vol = Math.floor(vol * rate / 100) * 100;
-                    } else if(type == '卖出'){
-                        vol = Number(this.SellInputData.Amount);
-                        this.SellInputData.Vol = Math.floor(vol * rate / 100) * 100;
-                    }
-                }
-
-            }
-        }
-
-</script>
-
-<style lang="less">
-
-    .simulateContainer {
-        * {
-            font: 14px/normal 'Microsoft Yahei';
-            color: #333;
-            margin: 0;
-            padding: 0;
-        }
-
-        li,
-        ol {
-            list-style: none;
-        }
-
-        a {
-            text-decoration: none;
-        }
-        @border: 1px solid #e1ecf2;
-        overflow: hidden;
-
-        .upColor {
-            color: #ee1515;
-        }
-
-        .lowColor {
-            color: #22ac38;
-        }
-
-        ::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 10px;
-            /*高宽分别对应横竖滚动条的尺寸*/
-            height: 10px;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            /*滚动条里面小方块*/
-            border-radius: 10px;
-            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-            background: #535353;
-        }
-
-        ::-webkit-scrollbar-track {
-            /*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-            border-radius: 10px;
-            background: #EDEDED;
-        }
-        .collapseWrap {
-            height: 8px;
-            .block{
-                width: 30px;
-                height: 100%;
-                background-color: #ddd;
-                margin: 0 auto;
-                position: relative;
-            }
-            .block::after {
-                width: 0;
-                height: 0;
-                content:'';
-                border-style: solid;
-                border-width: 3px 6px 0 6px;
-                border-color: #535353 transparent transparent transparent;
-                position: absolute;
-                left: 9px;
-                top: 3px;
-            }
-            .block.hide::after{
-                border-width: 0 6px 3px 6px;
-                border-color: transparent transparent #535353 transparent;
-            }
-        }
-
-        .topAccountInfo {
-            height: 25px;
-            padding-left: 20px;
-            border: @border;
-
-            >p {
-                display: inline-block;
-                line-height: 25px;
-                margin-right: 15px;
-            }
-        }
-
-        .oprContainer {
-            width: 100%;
-            position: relative;
-            overflow-x: hidden;
-            >div {
-                position: absolute;
-                top: 0;
-            }
-            /*element ui 表格*/
-            .el-table {border: none;}
-            .el-table .buy-row td div{
-                color: #ee1515;
-            }
-            .el-table .sell-row td div{
-                color: #22ac38;
-            }
-            .el-table td, .el-table th {
-                height: 28px;
-                padding: 2px 0;
-            }
-            .el-table th>.cell{
-                line-height: 28px;
-            }
-            .el-table td{
-                border-bottom: none;
-            }
-            .el-table th {
-                background-color: #fff;
-            }
-            .el-table th.gutter{
-                display: table-cell!important;
-            }
-            .el-table colgroup.gutter{
-                display: table-cell!important;
-            }
-            .el-table::before {height: 0;}
-            .el-table__footer-wrapper thead div, .el-table__header-wrapper thead div {background-color: #fff;}
-            .oprType {
-                left: 0;
-                width: 134px;
-                height: 100%;
-                overflow-y: auto;
-                border-right: @border;
-
-                >div {
-                    width: 100%;
-
-                    >span {
-                        display: block;
-                        width: 100%;
-                        height: 34px;
-                        box-sizing: border-box;
-                        padding-left: 34px;
-                        cursor: pointer;
-                        line-height: 34px;
-                        cursor: pointer;
-                        >i {
-                            margin-left: 5px;
-                        }
-                        .colorWhite {
-                            color: #fff;
-                        }
-                    }
-
-                    .menuTwo {
-                        width: 100%;
-
-                        >p {
-                            padding-left: 41px;
-                            line-height: 28px;
-                            cursor: pointer;
-                        }
-
-                        >p.active {
-                            color: #093e8a;
-                            background-color: #e1ecf2;
-                        }
-                    }
-                }
-
-                >div.active {
-                    >span {
-                        background-color: #093e8a;
-                        color: #fff;
-                    }
-                }
-            }
-
-            .oprInfo {
-                left: 135px;
-                width: 281px;
-                height: 100%;
-                box-sizing: border-box;
-                padding-top: 10px;
-                padding-left: 10px;
-                border-right: @border;
-
-                >div {
-                    height: 22px;
-                    margin-bottom: 5px;
-
-                    .title {
-                        margin-right: 19px;
-                    }
-
-                    input[type='text'] {
-                        border: none;
-                        height: 16px;
-                        outline: none;
-                    }
-
-                    .inputBox {
-                        display: inline-block;
-                        border: @border;
-                        height: 20px;
-                        padding-left: 5px;
-                    }
-
-                    .inputCalu {
-                        display: inline-block;
-                        border: @border;
-
-                        .min,
-                        .add {
-                            display: inline-block;
-                            width: 20px;
-                            height: 20px;
-                            text-align: center;
-                            line-height: 20px;
-                            border-right: @border;
-                            cursor: pointer;
-                        }
-
-                        .add {
-                            border-right: none;
-                            border-left: @border;
-                        }
-
-                        input {
-                            width: 82px;
-                            height: 18px;
-                            margin-left: 5px;
-                        }
-                    }
-
-                }
-
-                .symbolWrap {
-                    position: relative;
-                    z-index: 333;
-
-                    .stockList {
-                        position: absolute;
-                        top: 21px;
-                        left: 75px;
-                        height: 120px;
-                        overflow-y: auto;
-                        background-color: #e1ecf2;
-                        border: @border;
-                        padding: 6px 0;
-
-                        p {
-                            line-height: 22px;
-                            padding: 0 6px;
-                            color: #666;
-
-                            .symbol {
-                                margin-right: 12px;
-                            }
-                        }
-
-                        p:hover,
-                        p.active {
-                            background-color: #217cd9;
-                            color: #fff;
-                        }
-                    }
-
-                    .inputBox {
-                        width: 82px;
-
-                        input {
-                            width: 100%;
-                        }
-                    }
-                }
-
-                .volWrap {
-                    .inputBox {
-                        width: 151px;
-
-                        input {
-                            width: 119px;
-                            margin-right: 2px;
-                        }
-                    }
-                }
-
-                .rates {
-                    padding-left: 75px;
-
-                    >span {
-                        display: inline-block;
-                        width: 34px;
-                        height: 20px;
-                        line-height: 20px;
-                        text-align: center;
-                        color: #217cd9;
-                        background-color: #e1ecf2;
-                        margin-right: 5px;
-                        cursor: pointer;
-                    }
-
-                    >span:hover {}
-                }
-
-                .oprBtn {
-                    padding-left: 75px;
-                    height: 24px;
-
-                    >span {
-                        width: 156px;
-                        height: 24px;
-                        line-height: 24px;
-                        text-align: center;
-                        color: #fff;
-                        background-color: #ccc;
-                        display: inline-block;
-                        cursor: pointer;
-                    }
-
-                    .buyBtn {
-                        background-color: #ff4343;
-                    }
-
-                    .sellBtn {
-                        background-color: #22ac38;
-                    }
-                }
-            }
-
-            .CancelContainer {
-                left: 135px;
-                width: 1776px;
-
-                .tableTopSelct {
-                    height: 30px;
-                    line-height: 30px;
-                    padding-left: 10px;
-                    border-bottom: @border;
-
-                    .countText {
-                        color: #ee1515;
-                        margin-right: 40px;
-                    }
-
-                    .borderBtn {
-                        width: 48px;
-                        height: 18px;
-                        line-height: 18px;
-                        border: @border;
-                        text-align: center;
-                        display: inline-block;
-                        cursor: pointer;
-                        margin-right: 10px;
-                    }
-
-                    .borderBtn.active {
-                        color: #fff;
-                        background-color: #093e8a;
-                    }
-
-                    >div,
-                    >p {
-                        display: inline-block;
-                    }
-                }
-            }
-
-            .checkTableContainer {
-                left: 135px;
-                width: 1776px;
-
-                .dateSelect {
-                    height: 25px;
-                    padding-top: 5px;
-                    .el-date-editor:first-child {
-                        margin-left:15px;
-                    }
-                    .el-date-editor.el-input{
-                        width: 128px;
-                    }
-                    .spaceText {
-                        margin: 0 4px;
-                    }
-                    .el-input__inner {
-                        border-radius:0;
-                        height:20px;
-                    }
-                    .borderBtn {
-                        display: inline-block;
-                        height: 20px;
-                        padding: 0 10px;
-                        line-height:1;
-                        box-sizing: border-box;
-                        border: @border;
-                        vertical-align: top;
-                    }
-                }
-            }
-
-            .tradeInfo {
-                left: 416px;
-                width: 1490px;
-                height: 100%;
-            }
-        }
-    }
-</style>