update

src/store/gameList.js

@@ -8,6 +8,7 @@ const api = {
   gameList: `/hqserver/demo/GetGameList`,
   historyGameList: `/hqserver/demo/GetGameListHistory`,
   kline: `/hqserver/demo/KLineJSQ`,
+  matchKline: `/hqserver/demo/KLineCC`,
 };
 const state = () => ({});
 const mutations = {};
@@ -33,11 +34,16 @@ const actions = {
     const res = await this.$axios.$post(`${api.historyGameList}`, payload);
     return res;
   },
-  // K线图
+  // 净胜球K线图
   async kline({ commit }, payload) {
     const res = await this.$axios.$post(`${api.kline}`, payload);
     return res;
   },
+  // 场次K线图
+  async matchKLine({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.matchKline}`, payload);
+    return res;
+  },
 };
 export default {
   namespaced: true,

src/views/kline/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="kLineIndex">
     <div class="left-menu">
-      <leftMenu />
+      <leftMenu v-model="kLineType" />
     </div>
     <div id="kline1Frame" class="frame">
       <!--//****************************Franklin 创建主队K线*********************************-->
@@ -43,6 +43,7 @@ export default {
   components: { leftMenu, subs },
   data: function () {
     return {
+      kLineType: 'number', // K线图类型,配置见left-menu => data => kLineList
       jsChart1: undefined,
       jsChart2: undefined,
       jsChart3: undefined,
@@ -70,9 +71,8 @@ export default {
     $(window).resize(this.resizeCanvas);
   },
   methods: {
-    ...gameList(['kline']),
+    ...gameList(['kline', 'matchKLine']),
     init() {
-      let jsChart1, jsChart2, jsChart3;
       let symbol = this.$route.query.name || '600000.sh';
       let aryIndex = [];
       let index = this.$route.query.index || 'MA';
@@ -102,7 +102,7 @@ export default {
       };
       aryIndex.push(scriptIndex);
       // 创建股票K线图   主队K线图
-      jsChart1 = JSChart.Init(document.getElementById('klineHome'));
+      this.jsChart1 = JSChart.Init(document.getElementById('klineHome'));
       var option1 = {
         Type: '历史K线图',
         Windows: aryIndex, //窗口指标
@@ -151,10 +151,10 @@ export default {
         Team: 1, //1主队，2客队，3计算
       };
       console.warn(option1);
-      jsChart1.SetOption(option1);
+      this.jsChart1.SetOption(option1);
       //****************************Franklin 创建第二条K线*********************************
       //客队K线图
-      jsChart2 = JSChart.Init(document.getElementById('klineAway'));
+      this.jsChart2 = JSChart.Init(document.getElementById('klineAway'));
       var option2 = {
         Type: '历史K线图',
         Windows: aryIndex, //窗口指标
@@ -198,10 +198,10 @@ export default {
         Frame: [],
         Team: 2, //1主队，2客队，3计算
       };
-      jsChart2.SetOption(option2);
+      this.jsChart2.SetOption(option2);
       //****************************Franklin 创建第三条K线*********************************
       //主客队数据计算K线图
-      jsChart3 = JSChart.Init(document.getElementById('klineCalculation'));
+      this.jsChart3 = JSChart.Init(document.getElementById('klineCalculation'));
       var arrIndexCalculation = new Array();
       arrIndexCalculation.push(aryIndex[0]); //计算K线没有指标图
       let testIndex1 = jsIndexData.Get('MACD12');
@@ -252,11 +252,8 @@ export default {
         Frame: [],
         Team: 3, //1主队，2客队，3计算
       };
-      jsChart3.SetOption(option3);
+      this.jsChart3.SetOption(option3);
       this.resizeCanvas();
-      this.$set(this, `jsChart1`, jsChart1);
-      this.$set(this, `jsChart2`, jsChart2);
-      this.$set(this, `jsChart3`, jsChart3);
     },
     ComplierError(error) {
       alert(error);
@@ -283,7 +280,10 @@ export default {
             start: -1,
             count: data.Request.Data.count,
           };
-          const res = await this.kline(reqData);
+          console.warn('function in:' + this.kLineType);
+          let res;
+          if (this.kLineType === 'number') res = await this.kline(reqData);
+          else if (this.kLineType === 'match') res = await this.matchKLine(reqData);
           if (this.$checkRes(res)) {
             this.$set(this.team, `team${data.Team}`, res);
             callback(res);
@@ -301,7 +301,7 @@ export default {
       // var height= $(window).height()-300; //300高度给指标编辑器
       // 计算k线框体大小
       var height = $(window).height() / 3; //300高度给指标编辑器
-      var width = $(window).width() - 375;
+      var width = $(window).width() - 405;
       //****************************Franklin 创建第一条K线*********************************
       var divKlineHome = document.getElementById('klineHome');
       divKlineHome.style.width = width + 'px';
@@ -338,6 +338,24 @@ export default {
       var lockData = { IndexName: info.Data.IndexName, IsLocked: false };
       info.HQChart.LockIndex(lockData);
     },
+    reInit() {
+      this.jsChart1 = undefined;
+      this.jsChart2 = undefined;
+      this.jsChart3 = undefined;
+      const elements = ['klineHome', 'klineAway', 'klineCalculation'];
+      for (const key of elements) {
+        let e = document.getElementById(key);
+        e.innerHTML = '';
+      }
+      this.init();
+    },
+  },
+  watch: {
+    kLineType: {
+      handler(val) {
+        this.reInit();
+      },
+    },
   },
   computed: {
     ...mapState(['user', 'menuParams']),
@@ -358,7 +376,7 @@ export default {
 .left-menu {
   background: #18191d;
   color: #fff;
-  width: 60px;
+  width: 80px;
   float: left;
   height: 100vh;
 }

src/views/kline/parts/left-menu.vue

@@ -1,6 +1,16 @@
 <template>
   <div id="left-menu">
+    <template name="K线图类型列表">
+      <el-row class="kLine_type">
+        <el-col :span="24" v-for="(i, index) in kLineList" :key="`kline_type-${index}`">
+          <el-link :type="value === i.value ? 'danger' : ''" :underline="false" @click="changeKLine(i.value)">{{ i.label }}</el-link>
+        </el-col>
+      </el-row>
+    </template>
+
     <el-link class="word" :underline="false" @click="dialog = true"> 编程</el-link>
+
+    <!-- 编程的dialog -->
     <el-dialog title="编程" width="80%" center :visible.sync="dialog" :close-on-click-modal="false" :destory-on-close="false">
       <el-row class="rows" :gutter="20">
         <el-col :span="24">
@@ -54,11 +64,21 @@ import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: common } = createNamespacedHelpers('common');
 export default {
   name: 'left-menu',
-  props: {},
+  props: {
+    value: { type: String },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   components: {},
   data: function () {
     return {
       dialog: false,
+      kLineList: [
+        { label: '净胜球', value: 'number' },
+        { label: '场次', value: 'match' },
+      ],
       position: [
         { label: '副图', value: '0' },
         { label: '主图', value: '1' },
@@ -289,6 +309,10 @@ export default {
       delete dup.Script;
       this.$set(this, 'form', dup);
     },
+    // 切换K线图
+    changeKLine(type) {
+      this.$emit('change', type);
+    },
   },
   watch: {
     'form.Args': {
@@ -339,11 +363,11 @@ export default {
   font-size: 24px;
   color: #fff !important;
   padding-top: 30px;
-  padding-left: 5px;
+  padding-left: 15px;
 }
 .rows {
   .el-col {
-    padding: 5px;
+    padding: 10px;
   }
 }
 .inner_element_lr {
@@ -352,4 +376,11 @@ export default {
 .inner_element_ud {
   margin: 10px 0;
 }
+.kLine_type {
+  text-align: center;
+  .el-link {
+    padding: 10px 0;
+    font-size: 20px;
+  }
+}
 </style>