hqchart 1.1.12687 → 1.1.12706

package/src/pages/hqchart.black/components/stockdrawtool.vue

@@ -1,300 +0,0 @@
-<!-- 
-    画笔工具组件
-  !-->
-
-<template>
-    <div class="draw-box" v-if="IsShowBrushTool" id="toolBox">
-        <ul>
-        <!-- 关闭 -->
-        <li class="closeBtn">
-            <span
-            class="move-area"
-            id="moveArea"
-            title="可拖动"
-            @mousedown.stop="ToolBoxHandle"
-            @mouseover="ToolBoxMove"
-            ></span>
-            <svg class="symbolIkcon icon-close" aria-hidden="true" @click="CloseBtn">
-            <use xlink:href="#icon-guanbi"></use>
-            </svg>
-        </li>
-        <!-- 图标 -->
-        <li
-            v-for="item in ToolList1"
-            :key="item.name"
-            :class="AddBackgroundColor(item.name)"
-            :title="item.name"
-            class="title-style"
-        >
-            <svg class="symbolIkcon icon-style" aria-hidden="true" @click="ClickIcon(item.name)">
-            <use :href="item.icon"></use>
-            </svg>
-        </li>
-        <li class="line-style"></li>
-        <li
-            v-for="item in ToolList2"
-            :key="item.name"
-            :class="AddBackgroundColor(item.name)"
-            :title="item.name"
-        >
-            <svg class="symbolIkcon icon-style" aria-hidden="true" @click="ClickIcon(item.name)">
-            <use :href="item.icon"></use>
-            </svg>
-        </li>
-        <li class="line-style"></li>
-        <li
-            v-for="item in ToolList3"
-            :key="item.name"
-            :class="AddBackgroundColor(item.name)"
-            :title="item.name"
-        >
-            <svg class="symbolIkcon icon-style" aria-hidden="true" @click="ClickIcon(item.name)">
-            <use :href="item.icon"></use>
-            </svg>
-        </li>
-        <li class="line-style"></li>
-        <li
-            v-for="item in ToolList4"
-            :key="item.name"
-            :class="AddBackgroundColor(item.name)"
-            :title="item.tip"
-        >
-            <svg class="symbolIkcon icon-style" aria-hidden="true" @click="ClickIcon(item.name)">
-            <use :href="item.icon"></use>
-            </svg>
-        </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-    import "../../../jscommon/umychart.resource/font/brushSymbol.js";
-    import "../../../jscommon/umychart.resource/font/fontSymbol.css";
-
-    import Vue from "vue";
-    import ElementUI from "element-ui";
-    import "element-ui/lib/theme-default/index.css";
-    import locale from "element-ui/lib/locale/lang/en";
-
-    Vue.use(ElementUI, { locale });
-
-    export default {
-    name: "Stockdrawtool",
-    data() {
-        return {
-        IsShowBrushTool: true,
-        ClickName: "",
-        DisabledTip: true,
-        ToolList1: [
-            { name: "线段", icon: "#icon-xianduan" },
-            { name: "射线", icon: "#icon-shexian" },
-            { name: "趋势线", icon: "#icon-qushixian" },
-            { name: "水平线", icon: "#icon-shuipingxian" },
-            { name: "平行线", icon: "#icon-pinghangxian" },
-            { name: "平行通道", icon: "#icon-pinghangtongdao" },
-            { name: "价格通道线", icon: "#icon-jiagetongdaoxian" },
-            { name: "M头W底", icon: "#icon-MtouWdi" }
-        ],
-        ToolList2: [
-            { name: "圆弧线", icon: "#icon-yuanhuxian" },
-            { name: "矩形", icon: "#icon-juxing" },
-            { name: "平行四边形", icon: "#icon-pinghangsibianxing" },
-            { name: "三角形", icon: "#icon-sanjiaoxing" },
-            { name: "圆", icon: "#icon-yuan" },
-            { name: "对称角度", icon: "#icon-duichengjiaodu" }
-        ],
-
-        ToolList3: [
-            { name: "江恩角度线", icon: "#icon-jiangenjiaoduxian" },
-            { name: "斐波那契周期线", icon: "#icon-feibonaqizhouxian" },
-            { name: "阻速线", icon: "#icon-zusuxian" },
-            { name: "黄金分割", icon: "#icon-huangjinfenge" },
-            { name: "百分比线", icon: "#icon-baifenbixian" },
-            { name: "波段线", icon: "#icon-boduanxian" }
-        ],
-
-        ToolList4: [
-            { name: "文本", icon: "#icon-wenben", tip: "文本" },
-            {
-            name: "icon-arrow_up",
-            icon: "#icon-xiangshangjiantou",
-            tip: "向上箭头"
-            },
-            {
-            name: "icon-arrow_down",
-            icon: "#icon-xiangxiajiantou",
-            tip: "向下箭头"
-            },
-            {
-            name: "icon-arrow_right",
-            icon: "#icon-xiangyoujiantou",
-            tip: "向右箭头"
-            },
-            {
-            name: "icon-arrow_left",
-            icon: "#icon-xiangzuojiantou",
-            tip: "向左箭头"
-            },
-            { name: "全部删除", icon: "#icon-shanchu", tip: "全部删除" }
-        ]
-        };
-    },
-    props: {
-        topheight: Number,
-        totalheight: Number
-    },
-    mounted: function() {
-        this.ToolBoxHandle();
-    },
-    methods: {
-        ToolBoxHandle() {
-        this.DisabledTip = true;
-        ///用以获取滚动条的距离
-        let getStyle = function(obj, name) {
-            if (obj.currentStyle) {
-            return obj.currentStyle[name];
-            } else {
-            return getComputedStyle(obj, false)[name];
-            }
-        };
-
-        let toolBox = document.getElementById("toolBox");
-        let moveArea = document.getElementById("moveArea");
-        //鼠标按下坐标
-        let x = 0;
-        let y = 0;
-        //div左部和顶部的偏移量
-        let l = 0;
-        let t = 0;
-        //屏幕大小
-        let w = document.documentElement.clientWidth;
-        let h = 0;
-        if (!this.totalheight && !this.topheight) {
-            h = document.documentElement.clientHeight;
-        } else {
-            h = this.totalheight - this.topheight;
-        }
-        //div宽度、高度 2为变宽(border)
-        let tw = parseInt(getStyle(toolBox, "width")) + 2;
-        let th = parseInt(getStyle(toolBox, "height")) + 2;
-        let isDown = false;
-
-        //鼠标按下事件
-        moveArea.onmousedown = function(e) {
-            //获取x坐标和y坐标
-            x = e.clientX;
-            y = e.clientY;
-
-            //获取左部和顶部的偏移量
-            l = toolBox.offsetLeft;
-            t = toolBox.offsetTop;
-
-            //开关打开
-            isDown = true;
-            //设置样式
-            moveArea.style.cursor = "move";
-        };
-        //鼠标移动
-        document.onmousemove = function(e) {
-            // 鼠标未按下不获取
-            if (!isDown) {
-            return;
-            }
-            //获取x和y
-            let nx = e.clientX;
-            let ny = e.clientY;
-            //计算移动后的左偏移量和顶部的偏移量
-            let nl = nx - (x - l);
-            let nt = ny - (y - t);
-
-            //判断是否越界
-            nl = nl < 0 ? 0 : nl > w - tw ? w - tw : nl;
-            nt = nt < 0 ? 0 : nt > h - th ? h - th : nt;
-            toolBox.style.left = nl + "px";
-            toolBox.style.top = nt + "px";
-        };
-        //鼠标抬起事件
-        document.onmouseup = function() {
-            //开关关闭
-            isDown = false;
-            // moveArea.style.cursor = "default";
-        };
-        },
-        ToolBoxMove() {
-        let moveArea = document.getElementById("moveArea");
-        moveArea.style.cursor = "move";
-        },
-        // 关闭画笔工具
-        CloseBtn() {
-        this.IsShowBrushTool = false;
-        this.$emit("IsShowBrushTool", this.IsShowBrushTool);
-        },
-        // 点击图标
-        ClickIcon(iconName) {
-        this.ClickName = iconName;
-        this.DisabledTip = false;
-        this.$emit("CurrentIcon", iconName);
-        },
-        AddBackgroundColor(name) {
-        if (name === this.ClickName) {
-            return "icon-color";
-        }
-        }
-    }
-    };
-</script>
-
-
-<style lang="less">
-    #toolBox {
-    width: 115px;
-    height: 516px;
-    border: 1px solid #dadada;
-    position: absolute;
-    z-index: 999;
-    background: #fff;
-    ul {
-        .icon-color {
-        background: #d9e9f9;
-        }
-        .closeBtn {
-        width: 100%;
-        height: 30px;
-        text-align: right;
-        color: #8696a4;
-        margin-left: 0;
-        display: flex;
-        .move-area {
-            display: inline-block;
-            width: 40px;
-            background: #edf5ff;
-            flex: 3;
-        }
-        .icon-close {
-            font-size: 18px;
-            text-align: center;
-            padding-top: 5px;
-            flex: 1;
-        }
-        }
-
-        li {
-        list-style: none;
-        margin-left: 17px;
-        float: left;
-        .icon-style {
-            font-size: 21px;
-            text-align: center;
-            padding: 5px;
-        }
-        }
-        .line-style {
-        width: 87px;
-        height: 1px;
-        display: block;
-        background: #e3e7ea;
-        margin: 10px 14px;
-        }
-    }
-    }
-</style>

package/src/pages/hqchart.black/components/stockfull.vue

@@ -1,313 +0,0 @@
-<!-- 
-    完整的行情页面 (股票最新信息 买卖盘 分笔 走势图 K线图)
-  !-->
-
-<template>
-    <div id="stockfull" ref='stockfull' style="width:100%;height:100%">
-
-        <div class='divstockmain' ref='divstockmain'>
-            <!--  走势图|K线图 !-->
-            <div ref='divstockkline' style="height:200px;position: relative">
-                <StockKLine ref='stockkline' :KlineType="KlineType" :DefaultSymbol=this.DefaultSymbol :DefaultPeriod=this.DefaultPeriod :TradeInfoTabWidth=this.TradeInfo.Width 
-                    :KLineOption=this.KLineOption :MinuteOption=this.MinuteOption>
-                </StockKLine> 
-            </div>
-
-            <!--  买卖盘信息 !-->
-            <div class='divtradeinfo' ref='divtradeinfo' style='width:200px;position: relative' v-show="TradeInfo.IsShow">
-                <StockTradeInfo ref='tradeinfo'  IsShareStock=1 :DefaultSymbol=this.DefaultSymbol >
-                    
-                    <!--  股票最新信息 !-->
-                    <div ref='divstockinfo' name="info">
-                        <StockInfo ref='stockinfo' IsShareStock=1 :DefaultSymbol=this.DefaultSymbol></StockInfo>
-                    </div>
-                </StockTradeInfo> 
-            </div>
-        </div>
-        <div class='divtradeinfotab'  v-show="TradeInfo.Tab.IsShow" ref='divtradeinfotab'>
-            <span v-for='(item,index) in TradeInfo.Tab.Menu' :key='index' :class='{active:TradeInfo.Tab.Selected==index}' v-show='item.IsShow'
-                @click="OnClickTradeInfoTab(item,index)">{{item.Name}}</span>
-        </div>
-    </div>
-</template>
-
-
-<script>
-import StockInfo from './stockinfo.vue'
-import StockTradeInfo from './stocktradeinfo.vue'
-import StockKLine from './stockkline.demo.vue'
-
-export default 
-{
-    name:'StockFull',
-    data () 
-    {
-        return {
-
-            JSStock:null,  //共享的股票数据类
-            Symbol:'600000.sh',
-
-            TradeInfo:
-            { 
-                Width:230, IsShow:true,
-                Tab:
-                {
-                    Menu:[ 
-                        {Name:'分笔',Value:1, IsShow:true },
-                        {Name:'分价',Value:5, IsShow:true},
-                        {Name:'资金',Value:4, IsShow:true }, 
-                        {Name:'筹码',Value:2, IsShow:true } ,
-                        {Name:'异动',Value:3, IsShow:true}],
-                    Selected:0,
-                    IsShow:true,
-                },
-                
-            }
-        }
-    }, 
-    
-    props: 
-    [
-        'DefaultSymbol',     //默认股票,
-        'DefaultPeriod',
-        'KLineOption',
-        'MinuteOption',
-        'KlineType'
-    ],
-
-    components: { StockInfo, StockTradeInfo, StockKLine},
-
-    created:function()
-    {
-        console.log(this.DefaultSymbol)
-        if (this.DefaultSymbol) this.Symbol=this.DefaultSymbol;
-        this.JSStock=StockInfo.JSCommonStock.JSStockInit(); //创建股票数据类
-    },
-
-    mounted:function()
-    {
-        var isIndex=StockInfo.JSCommon.MARKET_SUFFIX_NAME.IsSHSZIndex(this.Symbol);
-        if (isIndex) this.TradeInfo.IsShow=false;    //指数不显示买卖盘
-
-        this.OnSize();
-
-        var stockInfo=this.$refs.stockinfo;
-        stockInfo.SetJSStock(this.JSStock);                         //绑定一个外部的stock ( 五档买卖盘和分笔数据可以共享这一个股票数据类)
-        stockInfo.SetChangeSymbolCallback(this.OnChangeSymbol);   //股票切换以后通知
-        stockInfo.SetSymbol(this.Symbol);
-        stockInfo.InitalStock();
-
-        var tradeInfo=this.$refs.tradeinfo;
-        tradeInfo.SetJSStock(this.JSStock); 
-        tradeInfo.SetSymbol(this.Symbol);
-        tradeInfo.InitalStock();
-
-        var kline=this.$refs.stockkline;
-        kline.Event.ChangePeriodEvent=this.OnChangePeriod;    //设置周期切换回调
-
-        this.JSStock.ReqeustData();
-
-        this.UpdateUIPosition();
-    },
-
-    methods:
-    {
-        //切换股票
-        SetSymbol:function(symbol)
-        {
-            if (this.Symbol==symbol) return;
-
-            var oldSymbol=this.Symbol;
-            this.Symbol=symbol;
-
-            var oldIsIndex=StockInfo.JSCommon.MARKET_SUFFIX_NAME.IsSHSZIndex(oldSymbol);
-            this.JSStock.UnsubscribeStock(oldSymbol);
-
-            this.$refs.stockinfo.SetSymbol(symbol);
-            this.$refs.tradeinfo.SetSymbol(symbol);
-            this.$refs.stockkline.ChangeSymbol(symbol);
-
-            this.JSStock.ReqeustData();
-
-            this.UpdateUIPosition();
-        },
-
-        OnChangeSymbol:function(symbol)
-        {
-            console.log(`[StockFull::OnChangeSymbol] symbol=${symbol}`);
-            this.SetSymbol(symbol);
-        },
-
-        OnSize:function()
-        {
-            var stockFull=this.$refs.stockfull;
-            var divStockInfo=this.$refs.divstockinfo;
-            var divStockMain=this.$refs.divstockmain;
-            var divStockKLine=this.$refs.divstockkline;
-            var divTradeInfo=this.$refs.divtradeinfo;
-            var divTradeInfoTab=this.$refs.divtradeinfotab;
-            
-            var width=stockFull.offsetWidth;
-            var height=stockFull.offsetHeight;
-            var tradeInfoTabHeight = divTradeInfoTab.offsetHeight;
-            var stockKLineHeight=height;
-            var stockKLineWidth=width;
-            if (this.TradeInfo.IsShow) stockKLineWidth=width-this.TradeInfo.Width;;
-
-            divStockMain.style.height=stockKLineHeight+'px';
-            divStockMain.style.width=width+'px';
-
-            divStockKLine.style.height=stockKLineHeight+'px';
-            divStockKLine.style.width=stockKLineWidth+'px';
-
-            divTradeInfo.style.width=this.TradeInfo.Width+'px';
-            divTradeInfo.style.height=stockKLineHeight - tradeInfoTabHeight +'px'; //交易数据高度
-            
-            divTradeInfoTab.style.width=this.TradeInfo.Width+'px';
-            divTradeInfoTab.style.left=(width-this.TradeInfo.Width)+'px';
-
-            this.$refs.stockinfo.OnSize();
-            this.$refs.tradeinfo.OnSize();
-            this.$refs.stockkline.OnSize();
-        },
-
-        UpdateUIPosition:function()
-        {
-            var isIndex=StockInfo.JSCommon.MARKET_SUFFIX_NAME.IsSHSZIndex(this.Symbol);
-            var tabIndex=this.TradeInfo.Tab.Selected;
-            var kline=this.$refs.stockkline;
-            var selTabItem=this.TradeInfo.Tab.Menu[this.TradeInfo.Tab.Selected];
-            if (isIndex)
-            {
-                //指数 隐藏右边的报价栏
-                this.TradeInfo.IsShow=false;
-                this.TradeInfo.Tab.IsShow=false;
-                kline.ShowStockChip(false);
-            }
-            else
-            {
-                if (this.TradeInfo.Tab.Selected>=0 && selTabItem.Value===2)
-                {
-                    if (kline.KLine.IsShow)
-                    {
-                        this.TradeInfo.IsShow=false;
-                        kline.ShowStockChip(true);
-                    }
-                    else
-                    {
-                        this.TradeInfo.Tab.Selected=0;  //分时默认第1个
-                        this.TradeInfo.IsShow=true;
-                        kline.ShowStockChip(false);
-                    }
-                }
-                else
-                {
-                    this.TradeInfo.IsShow=true;
-                    kline.ShowStockChip(false);
-                }
-
-                //筹码只在K线上出现
-                if (kline.KLine.IsShow)
-                {
-                    this.TradeInfo.Tab.Menu[2].IsShow=true;
-                    this.TradeInfo.Tab.Menu[3].IsShow=true;     //筹码
-                    this.TradeInfo.Tab.Menu[4].IsShow=false;    //异动
-                    if (selTabItem.Value==3) //异动
-                        this.OnClickTradeInfoTab({Name:'分笔', Value:1}, 0);    //K线不显示移动， 切换到分笔上
-                }   
-                else
-                {
-                    this.TradeInfo.Tab.Menu[2].IsShow=true;
-                    this.TradeInfo.Tab.Menu[3].IsShow=false;    //筹码
-                    this.TradeInfo.Tab.Menu[4].IsShow=true;     //异动
-                }
-                
-                this.TradeInfo.Tab.IsShow=true;
-            }
-
-            this.OnSize();
-        },
-
-        OnClickTradeInfoTab:function(item,index)
-        {
-            if (item.Value===2) //筹码显示
-            {
-                var kline=this.$refs.stockkline;
-                kline.ShowStockChip(true);
-                this.TradeInfo.IsShow=false;
-                this.OnSize();
-            }
-            else
-            {
-                if (this.TradeInfo.Tab.Selected>=0 && this.TradeInfo.Tab.Menu[this.TradeInfo.Tab.Selected].Value===2) 
-                {
-                    var kline=this.$refs.stockkline;
-                    kline.ShowStockChip(false);
-                    this.TradeInfo.IsShow=true;
-                    this.OnSize();
-                }
-
-                switch(item.Value)
-                {
-                    case 1:         //分笔
-                    case 4:         //资金
-                    case 3:         //异动
-                    case 5:         //分价
-                        this.$refs.tradeinfo.ChangeShowData(item.Name,item.Value);
-                        break;
-                }
-            }
-
-            this.TradeInfo.Tab.Selected=index;
-        },
-
-        //周期切换回调
-        OnChangePeriod:function(name)
-        {
-            console.log('[StockFull::OnChangePeriod] ',name);
-            this.UpdateUIPosition();
-        },
-    }
-}
-
-
-</script>
-
-<style scoped>
-.divstockmain
-{
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    clear: both;
-}
-
-.divstockmain>div {float: left;}
-
-.divtradeinfotab
-{
-    position: relative;
-    height: 30px;
-    top:-30px;
-    display: flex;
-    flex-direction: row;
-}
-
-.divtradeinfotab span 
-{
-    height: 30px;
-    line-height: 30px;
-    text-align: center;
-    cursor: pointer;
-    flex-grow: 1;
-}
-
-.divtradeinfotab span.active 
-{
-    color: #ff9900;
-}
-
-
-</style>