hqchart 1.1.12693 → 1.1.12706

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

@@ -1,316 +0,0 @@
-<!--
-    最新分笔
--->
-<template>
-    <div class="divstockdeal" ref="divstockdeal">
-      <div class="table_content" ref="tableContent" v-show="IsTradeDay">
-        <div class="tableWrap" v-for="(curTable,index) in TableData.CurentTables" :key="index">
-          <table class="tabHori">
-            <thead ref="tableHeader">
-              <tr>
-                <td>时间</td>
-                <td class="alignCenter">价格</td>
-                <td class="alignCenter">成交量(手)</td>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(rowItem,ind) in curTable" :key="ind">
-                <td>{{rowItem.Time}}</td>
-                <td class="alignRight" :class="rowItem.PriceColor">{{rowItem.Price}}</td>
-                <td class="alignRight">
-                  {{parseInt(rowItem.Vol)}}&nbsp;
-                  <span
-                    :class="rowItem.Flag == 'B' ? 'red' : 'green'"
-                  >{{rowItem.Flag}}</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-      <div class="notTradeDay" v-show="!IsTradeDay">不是交易日</div>
-      <div id="paginationWrap" ref="paginationWrap" v-show="IsTradeDay">
-        <el-pagination
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page.sync="Pagination.CurrentPage"
-          :page-size="Pagination.PageSize"
-          layout="prev, pager, next, jumper"
-          :total="Pagination.Total"
-        ></el-pagination>
-      </div>
-    </div>
-  </template>
-  
-  <script>
-  import JSCommonStock from "../umychart.vue/umychart.stock.vue.js";
-  import StringFormat from '../umychart.vue/stockstringformat.js'
-  
-  export default {
-    name: "StockDealLastest",
-    data() {
-      return {
-        Symbol: "600000.sh",
-        ChoiceCountIndex: "",
-        IsReverseData: false,
-        LatestDetail: null,
-        TableData: {
-          Meta: [],
-          Selected: [],
-          SelectedReverse: [],
-          Paginationed: [],
-          CurrentPageData: [],
-          CurentTables: []
-        }, //Meta:接口返回的缓存数据，Selected：筛选后的数据，Paginationed：筛选后分页过的数据,CurrentPageData：当前页面所有表格的数据
-        Pagination: {
-          SingleTableCount: 20,
-          CurrentPage: 1,
-          PageSize: 20 * 6,
-          Total: 10
-          // IsShow:false
-        },
-        loadingBody: false,
-        IsTradeDay: true
-      };
-    },
-  
-    props: ["DealSymbol"],
-  
-    //创建
-    created: function() {
-      console.log("[stockdeal::created]");
-      this.ChoiceCountIndex = this.ChoiceIndex != null ? this.ChoiceIndex : "";
-    //   this.IsReverseData = this.IsReverse != null ? this.IsReverse : false;
-      this.Symbol = this.DealSymbol != null ? this.DealSymbol : "600000.sh";
-
-      this.LatestDetail = JSCommonStock.JSStock.GetLatestDetailData(this.Symbol);
-      this.LatestDetail.InvokeUpdateUICallback = this.UpdateData;
-
-    },
-    
-    mounted: function() {
-      console.log("[stockdeal::mounted]");
-      this.loadingBody = true;
-      // this.OnSize();
-    },
-    watch: {
-      // DealSymbol: function(val) {
-      //   this.LatestDetail = JSCommonStock.JSStock.GetDealDay(val);
-      //   this.LatestDetail.PageSize = this.Pagination.PageSize;
-      //   this.LatestDetail.InvokeUpdateUICallback = this.UpdateData;
-      //   this.LatestDetail.RequestData();
-      // },
-    },
-  
-    methods: {
-      UpdateData() {
-        let test = 0;
-        console.log("[stockdeallastest::UpdateData]data:",++test, this.LatestDetail.Data);
-        var data = this.LatestDetail.Data;
-        // this.$emit("LatestDetail", data);
-        if (data != null) {
-          this.loadingBody = false;
-          var count = data.Count;
-          var start = data.Response.Start;
-          var end = data.Response.End;
-          var yClose = data.Day.YClose;
-          var symbol = data.Stock.Symbol;
-          var name = data.Stock.Name;
-          document.title = name + '-' + symbol;
-          if (data.Deal) {
-            this.TableData.Meta = data.Deal;
-            this.IsTradeDay = true;
-            this.Pagination.Total = count;
-            var currentPageData = [];
-            var endIndex = end < count ? end : count;
-            for(let i = start; i < endIndex; ++i){
-                var item = data.Deal[i];
-                currentPageData.push(item);
-            }
-            console.log("[stockdeallastest::UpdateData]currentPageData:",currentPageData);
-            this.ChoiceData("",currentPageData, yClose); //接收传入的筛选条件
-          }
-        } else {
-          this.IsTradeDay = false;
-        }
-      },
-      handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-      },
-      handleCurrentChange(val) {
-        this.LatestDetail.RequestPage(val - 1);
-      },
-      // 成交量筛选方法
-      ChoiceData(num, data, yClose) {
-        var dataAry = [];
-        console.log("[stockdeal::ChoiceData]data:", data);
-        if (data.length > 0) {
-          for (let i = 0; i < data.length; i++) {
-            var item = data[i];
-            var color = this.FormatValueColor(item.Price, yClose);
-            var dataObj = {
-              Time: this.processingTime(item.Time),
-              Price: StringFormat.StockStringFormat.FormatValueString(item.Price,2),
-              PriceColor: color,
-              Vol: parseInt(item.Vol),
-              Flag: item.Flag,
-              Amount: item.Amount
-            };
-  
-            if (num != "") {
-              if (item.Vol >= num) {
-                dataAry.push(dataObj);
-              }
-            } else {
-              dataAry.push(dataObj);
-            }
-          }
-          this.TableData.CurrentPageData = dataAry;
-          this.InitPageData(this.TableData.CurrentPageData);
-        }
-      },
-      InitPageData(data) {
-        var count = this.Pagination.SingleTableCount;
-        console.log("[::InitPageData]count:", count);
-        this.TableData.CurentTables = this.CutDataAry(count, 6, data);
-      },
-      UpdateDataShow(count) {
-          console.log('[StockDealLastest::UpdateDataShow]count:',count);
-        this.Pagination.SingleTableCount = count;
-        this.Pagination.PageSize = count * 6;
-        this.LatestDetail.PageSize = this.Pagination.PageSize;
-        this.LatestDetail.RequestPage(this.Pagination.CurrentPage - 1);
-      },
-      FormatValueColor(currentValue, targetValue) {
-        var color = "";
-        if (currentValue > targetValue) {
-          color = "red";
-        } else if (currentValue < targetValue) {
-          color = "green";
-        } else {
-          color = "";
-        }
-        return color;
-      },
-      OnSize() {
-        var divstockdeal = this.$refs.divstockdeal;
-        var tableContent = this.$refs.tableContent;
-        var paginationWrap = this.$refs.paginationWrap;
-        var width = divstockdeal.clientWidth;
-        var height = divstockdeal.clientHeight;
-        if (height <= 0) return;
-  
-        var mainHight = height - paginationWrap.offsetHeight;
-        var mainWdith = width + "px";
-        var tdHeight = 20;
-        var borderHeight = 1;
-        var everyTableCount = Math.floor(
-          (mainHight - tdHeight - borderHeight) / tdHeight
-        );
-        if(everyTableCount < 0){
-            everyTableCount = 1;
-        }
-        
-        this.UpdateDataShow(everyTableCount);
-  
-        tableContent.style.height = mainHight + "px";
-      },
-      //处理时间
-      processingTime(mss) {
-        var hours = parseInt(mss / 10000);
-        var minutes = parseInt((mss / 100) % 100);
-        if (hours < 10) {
-          hours = "0" + hours;
-        }
-        if (minutes < 10) {
-          minutes = "0" + minutes;
-        }
-        return hours + ":" + minutes;
-      },
-      CutDataAry(everyCount, cutIndex, data) {
-        var paginationAry = [];
-        var total = this.Pagination.Total;
-        for (let i = 0; i < cutIndex; i++) {
-            if(everyCount * (i + 1) < total){
-                paginationAry.push(data.slice(everyCount * i, everyCount * (i + 1)));
-            }else{
-                paginationAry.push(data.slice(everyCount * i, total));
-            }
-          
-        }
-        return paginationAry;
-      }
-    }
-  };
-  </script>
-  
-  <style lang='less' scoped>
-  .divstockdeal {
-    width: 100%;
-    height: 100%;
-    .red {
-      color: #ff0000;
-    }
-  
-    .green {
-      color: #009900;
-    }
-    .table_content {
-      overflow-y: auto;
-      height: 100%;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      overflow-x: hidden;
-  
-      .tableWrap {
-        flex-grow: 1;
-        height: 100%;
-  
-        .tabHori {
-          font: 12px "Microsoft Yahei";
-          width: 100%;
-          box-sizing: border-box;
-          border-collapse: collapse;
-          border: none;
-          td,
-          th {
-            border: none;
-            padding: 0 10px;
-            line-height: 20px;
-          }
-          tr>td:last-child,tr>th:last-child{
-              padding-left: 0;
-          }
-          .alignRight {
-            text-align: right;
-          }
-          .alignCenter {
-            text-align: center;
-          }
-          thead {
-            td,
-            th {
-              border-bottom: 1px solid #ebeef5;
-            }
-          }
-          tbody {
-            tr > td:last-child,
-            tr > th:last-child {
-              border-right: 1px solid #ebeef5;
-            }
-          }
-          tr > td:nth-of-type(n + 2),
-          tr > th:nth-of-type(n + 2) {
-            font-size: 14px;
-          }
-        }
-      }
-    }
-    #paginationWrap{
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-    }
-  }
-  </style>

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

@@ -1,343 +0,0 @@
-<!-- 
-    画笔工具组件
-  !-->
-
-<template>
-    <div class="draw-box" v-if="IsShowBrushTool" id="toolBox" :class='{blackStyle: isBlackStyle}'>
-        <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>
-    //字体图标项目名称：H5 Stock
-    import '../umychart.resource/font/fontSymbol.js'
-    // import "../umychart.resource/font/brushSymbol.js";
-    import "../umychart.resource/font/fontSymbol.css";
-
-    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 });
-
-    export default {
-    name: "Stockdrawtool",
-    data() {
-        return {
-        IsShowBrushTool: true,
-        ClickName: "",
-        DisabledTip: true,
-        ToolList1: [
-            { name: "尺子", icon: "#icon-ruler" },
-            { name: "线段", icon: "#icon-draw_line" },
-            { name: "射线", icon: "#icon-draw_rays" },
-            { name: "箭头", icon: "#icon-arrow_up" },
-            { name: "标价线", icon: "#icon-price_line" },
-            { name: "PriceLabel", icon:"#icon-drawicon_message" },
-            { name: "PriceNote", icon:"#icon-draw_line" },
-            { name: "趋势线", icon: "#icon-draw_trendline" },
-            { name: "水平线", icon: "#icon-draw_hline" },
-            { name: "水平线段", icon: "#icon-draw_hlinesegment" },
-            { name: "垂直线", icon: "#icon-vertical_line" },
-            { name: "平行线", icon: "#icon-draw_parallel_lines" },
-            { name: "平行射线", icon: "#icon-draw_p_rays_lines" },
-            { name: "平行通道", icon: "#icon-draw_parallelchannel" },
-            { name: "价格通道线", icon: "#icon-draw_pricechannel" },
-            { name: "M头W底", icon: "#icon-draw_wavemw" },
-            { name: "头肩型", icon:"#icon-draw_head_shoulders_bt" }, 
-            { name: "波浪尺", icon: "#icon-waveruler" },
-            { name: "AB波浪尺", icon: "#icon-waveruler" },
-            { name: "箱型线", icon: "#icon-draw_box" },
-            { name: "涂鸦线段", icon: "#icon-draw_line" },
-        ],
-        ToolList2: [
-            { name: "圆弧线", icon: "#icon-draw_arc" },
-            { name: "矩形", icon: "#icon-rectangle" },
-            { name: "平行四边形", icon: "#icon-draw_quadrangle" },
-            { name: "三角形", icon: "#icon-draw_triangle" },
-            { name: "圆", icon: "#icon-draw_circle" },
-            { name: "对称角度", icon: "#icon-draw_symangle" }
-        ],
-
-        ToolList3: [
-            { name: "江恩角度线", icon: "#icon-draw_gannfan" },
-            { name: "斐波那契周期线", icon: "#icon-draw_fibonacci" },
-            { name: "阻速线", icon: "#icon-draw_resline" },
-            { name: "黄金分割", icon: "#icon-draw_goldensection" },
-            { name: "百分比线", icon: "#icon-draw_percentage" },
-            { name: "波段线", icon: "#icon-draw_waveband" },
-            { name: "线形回归线", icon: "#icon-linear_3" },
-            { name: "线形回归带", icon: "#icon-linear_1" },
-            { name: "延长线形回归带", icon: "#icon-linear_2" }
-            
-        ],
-
-        ToolList4: [
-            { name: "文本", icon: "#icon-draw_text", tip: "文本" },
-            {
-            name: "icon-arrow_up",
-            icon: "#icon-arrow_up",
-            tip: "向上箭头"
-            },
-            {
-            name: "icon-arrow_down",
-            icon: "#icon-arrow_down",
-            tip: "向下箭头"
-            },
-            {
-            name: "icon-arrow_right",
-            icon: "#icon-arrow_right",
-            tip: "向右箭头"
-            },
-            {
-            name: "icon-arrow_left",
-            icon: "#icon-arrow_left",
-            tip: "向左箭头"
-            },
-            { name: "全部删除", icon: "#icon-recycle_bin", tip: "全部删除" }
-        ],
-        isBlackStyle: false
-        };
-    },
-    props: {
-        topheight: Number,
-        totalheight: Number
-    },
-    mounted: function() {
-        this.ToolBoxHandle();
-    },
-    methods: {
-      //风格切换
-      ChangeStyle(styleName){
-        // debugger
-        this.isBlackStyle = 'black' === styleName;
-      },
-      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: 145px;
-    height: 650px;
-    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: 100px;
-          height: 1px;
-          display: block;
-          background: #e3e7ea;
-          margin: 10px calc(50% - 50px);
-          /* margin-left: ; */
-        }
-    }
-    }
-
-    #toolBox.blackStyle{
-      background-color: #2f363b;
-	    border: solid 1px #181c1f;
-
-      .closeBtn .move-area{
-        background: #2f363b;  
-      }
-      .closeBtn .icon-close{
-        color: #9ca7b3;
-      }
-
-      .line-style{
-        background: #202427;
-      }
-      
-    }
-</style>