123
dcc
2024-06-27 90d901daf17ba0644eb5c3096450262cfd76ef58
123
6 files modified
1 files added
300 ■■■■■ changed files
src/App.vue 62 ●●●● patch | view | raw | blame | history
src/locales/zh.json 3 ●●●● patch | view | raw | blame | history
src/page/home/home.vue 7 ●●●●● patch | view | raw | blame | history
src/page/list/trading-list.vue 1 ●●●● patch | view | raw | blame | history
src/page/list/tradingList/data.list.vue 170 ●●●●● patch | view | raw | blame | history
src/page/list/tradingList/tabs.vue 2 ●●● patch | view | raw | blame | history
src/utils/WhrWebSocket.js 55 ●●●●● patch | view | raw | blame | history
src/App.vue
@@ -1,20 +1,12 @@
<template>
  <div
    id="app"
    :class="`${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"
  >
  <div id="app" :class="`${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`">
    <div :class="`header-box`" v-if="hasHeader && title !== $t('hj248')">
      <mt-header :title="title">
        <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
        <div v-if="!is_Show">
          <template v-if="iconRight == 'search'">
            <img
              slot="right"
              class="search-right"
              src="./assets/ico/fangdajing.png"
              alt
            />
            <img slot="right" class="search-right" src="./assets/ico/fangdajing.png" alt />
          </template>
          <template v-else>
            <mt-button icon="more" slot="right"></mt-button>
@@ -24,7 +16,9 @@
    </div>
    <div class="body-box">
      <transition :name="transitionName">
        <router-view></router-view>
        <!-- <keep-alive include="TradingList"> -->
          <router-view></router-view>
        <!-- </keep-alive> -->
      </transition>
    </div>
    <foot v-if="$route.meta.show !== true" @close="footColse"></foot>
@@ -124,35 +118,43 @@
/deep/ .van-list__finished-text {
  line-height: 1.925926rem !important;
}
/deep/ .van-list__error-text {
  line-height: 1.925926rem !important;
}
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "rubik";
  .header-box {
    width: 100%;
    height: 1.4rem;
    /deep/.mint-header {
      height: 100%;
      background-color: #16171d;
      // background-color: rgba(20, 45, 55, 0.3);
      .is-left {
        .mintui {
          font-size: 20px;
        }
      }
      .mint-header-title {
        font-size: 0.36rem;
        color: rgba(255, 255, 255, 1);
      }
    }
    button {
      outline: none;
    }
  }
  .body-box {
    width: 100%;
    height: 100%;
@@ -160,59 +162,76 @@
    box-sizing: border-box;
    overflow-y: auto;
  }
  &.red-theme {
    background: rgb(241, 242, 246);
    color: #000;
    /deep/.mint-header {
      background: none;
      .mint-header-title {
        font-size: 0.42rem;
        color: #212121;
      }
      .mintui {
        color: #212121;
      }
    }
    /deep/.van-swipe-item {
      color: #000;
    }
    /deep/.navs_content {
      background: #fff !important;
    }
    /deep/.fo_content {
      background: #fff;
    }
    /deep/.news-tab {
      background: #fff;
    }
    /deep/.mint-tab-item-label {
      color: #000;
      font-size: 0.26rem;
    }
    /deep/.top_title {
      color: #000;
    }
    /deep/.titContent {
      color: #000;
    }
    /deep/.mint-navbar {
      background: #fff;
    }
    /deep/.mint-tab-item {
      background: #fff;
      border: none;
    }
    /deep/.footCss {
      background: #fff;
    }
    /deep/.newDetail-tits {
      color: #aaa;
    }
    /deep/.van-skeleton__row,
    .van-skeleton__title {
      background-color: #fff !important;
    }
  }
  &.black-theme {
    // background: #16171d;
    // background: rgb(14, 14, 15);
@@ -221,48 +240,58 @@
    /deep/.navs_content {
      background: #272733;
    }
    /deep/.fo_content {
      background: #272733;
    }
    /deep/.news-tab {
      background: #272733;
    }
    /deep/.mint-navbar {
      background: #272733;
    }
    /deep/.mint-tab-item-label {
      color: #fff;
      font-size: 0.26rem;
    }
    /deep/.titContent {
      color: #000;
    }
    /deep/.mint-tab-container {
    }
    /deep/.mint-tab-container {}
    /deep/.mint-tab-item {
      background: #272733;
    }
    /deep/.van-swipe-item {
      color: #000;
    }
    /deep/.footCss {
      background: rgb(33, 33, 43);
    }
    /deep/.newDetail-tits {
      color: #999;
    }
  }
}
.search-right {
  width: 0.3rem;
  height: 0.3rem;
}
.mint-search-list {
  position: relative !important;
}
.topLeft {
}
.topLeft {}
/deep/.el-alert {
  width: 75% !important;
@@ -275,12 +304,15 @@
  margin: auto !important;
  font-size: 0.36rem !important;
}
/deep/.el-alert__title {
  font-size: 0.36rem !important;
}
/deep/.el-icon-close::before {
  display: none;
}
/deep/.icon-icon_A::before {
  font-size: 0.6rem !important;
}
src/locales/zh.json
@@ -566,5 +566,6 @@
  "配售结束时间": "配售结束时间",
  "请选择提现金额": "请选择提现金额",
  "关于我们": "关于我们",
  "贷款": "贷款"
  "贷款": "贷款",
  "hj621": "大宗交易"
}
src/page/home/home.vue
@@ -34,20 +34,19 @@
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQvSURBVHgB7Zq/TxRBFMe/gyZCI4cmICSa5R8wWGiiIeEoTEwkETWxsOFsSKyAQAxWd9qY2ICVCQ00lgZN7MHEWNgcsdLqzl+cMcE7rM5Cxvf2bvHY25mdvds9DtxP8nLL7OzsfufN25l5CxATExMTExPzP2GRrZEtV48PLQmyDJl02QIOofBpsiLqxTqWI5vAISCJyvCVhsbCh3AAschWoReW05w/MPHtxKlq+HJ5uloP1WOdxzNoY8bRmNes6rkDE99J6OOUz40YtMOxq+uwLPZ5mPOwXIT6AXn4TiE4KbRhfGegn2bS+BenjWBBH9/cIdNoAUnoe38N4fa+hX2Ob92NRxAdKeg7OjIaj9PJrYzudK4oE4WiTBW25fJmSWYLJVkkk1UrctnDRwvy9BmrKcECwXA33kNW8r2qIjaNpZN19yORluzAlJC2F33j/svnPC6cHXQXG+s4iuYwF+uCPXqMX37CFmsMeRhebQ32CP9nIToQJQqx7NVOgawQDU1bdXBb3KZJ3egEK8T+KMoh8mr4b3Nq8yu37UOzMex9vUJsUAqPT3iW9yf23pZeas5hnp5wtL9H5KEgfA+HJLZBbE9zTKsqhCt4f8U6WF0d6mcIT3B7iLWREtOql1g0MeyCFxOozLOhoInhXaTA4kC3mHGXRy64SPFUFvaKLDSMBNMa4bfEoHt+jnYeJsqVxEDLoS5JdB7BNY/yQPh7eHIr1MX83OUuzJLVYuJhG4GV/m5xp7Yocg83g5fYINCStW4h0raCmxXL7His5tpScBhiGeGx+2p2t1SPawvI+1ld9f57P/f8HZZYFa3wsNG2jQlbrPS4d7OCLb8Kghf0BpiK/bVt3H8sLu9R1hS8zdNmD2nFswEfTMUuPV3E+fpsR6B7h+Fh/tzJCbYJzxo7eK1rwETs2zfrdlonfX8mkIdpeK27i4IK5kk871Fuka3AI0neCbyAJo51Yjl/dWMsiZtjo/axG073PH+1pry+/AcvERI8jHVp0wxqhH/flgs1GUhf+/ipKGfn06q25fHuhJybz+jb4Q1LyFgwTJLzVs1U7ANKxbIgVbuTd6ftDvFtyzDH1ajwrI/wIT8v09CUF4dHlEIvDSftOiadtkn3QgtIQTPMe3v7Vt+9z9U9HJfduj2hFMqJ9+Vnq8bhQJbTpXiiIA21t+3YrI1T1fB14tRo+NaI9RvKQbeHplioCE95nXSS6V5vXubK1XHQZxXPpLuG/BGJ6709QjvvRyXYgbdn/L8elkllilOQ1+3fgOT90rMOUa+lubd5aaSav21o+JJHF+05NahYzl2VJc6ZiGWi9nAtFipfGt1L0czGh29W36mBFMwpkdAVsYMnpkIdWinYwUIlvvl31/P8Zu3k/FcHRjhTISvnnbdtiTch9tqYlou8gjL9eBYTExMTExPTPvwFuTt0PD0I6k4AAAAASUVORK5CYII="
                    alt="" />
                </div>
                <div class="name">{{ $t("hj261") }}</div>
                <div class="name">{{ $t("hj621") }}</div>
              </div>
            </li>
            <li @click="$router.push('/subDK')">
            <!-- <li @click="$router.push('/subDK')">
              <div class="link">
                <div class="icon">
                  <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUzSURBVHgB7ZrPbxtFFMe/47VV51DHIQk4pSTTChA0ipoeQIgLTlUhRBEEJCSEIDGRQClCariA6KEN3DiRSAjKqeGKQGn/grq3QpHiAwJxyqakjQUBGyKklMb7eLOuYXe9ib3eHwZpPxd7x+Od/e578+a92QViYmJiYmJiuoWATwZy8hwEzYGQRRgQSiSoBIMu/frzTxfhE1+C+3P3FQQSFxARBOg1iIlqWdfRIQn4QEBIRAhbRyaJVvpzchod4lMw6YgagSyPuzQ4KMfRAUn4wBCoCrI1Xdksr+URIBwj8gJGgSBsVjU0Ws5m5bFqVa/CA74snCKtZD1m7SNu/QaG5NxgbmR1IDdyOZuTEh7YLOvFX8rXCxDibWu76d77jAI84kvwdhpV50U4+5gCiT6i+m/5JBkL6IDNDX2Bo/WirVGI5+ARX4KrOruTsIt2WjDt+A8JcRQdUtuXmHc05dmtPS2HvgTfQbcepGr29djNC7xeZAPzBgNrtvFSzV61F74FE8h2AYZWs0XPIC7SwaptfG2nuxYWJJouwMyULDhvSpT4FsyZlm49Jrhaz9aH70DXBPtahxWCalWy3DfhEpQSRCWyZrECvc4+qxXKpoBJLYEniDDOZ5R887L17qgafNOEQOnkk3l5fU1Hp3gWrKJwUhiTIKO0WV4vatCKO7BlH/n+3PAFYZm3fLHSnrSLfOPbRoVkDZhLCkybAqme4FvPqNq5bZy/jN99Tw6RCa6LpRWY81TjLOjgRJkTA04oivxzvtGPc+yC9X/OCkVFamXRngTOsTXnNNgFemH+gw+nT774culQn2gr4/I0h1Oo5a1lILuyme4lIV4Tznnagr+2fl9VYuGTYXm4kBZYUZ7STv8gojTYyrrGZVu7ol+ZnkEm0xtk/SzZbS6vV6hlMPQdtBqU6zXqIZXs86zNu/U5Mjomn3n2helXWXAISE1gmS09MdQn9N06BSa4gUr2+aPobFdzVrkewsW0NI91bLc5HYhLt4MKUICvDKtd5J2xXIlEsAooQQSodlFj7RbEIhHM6/A8Ikat7W7toQuu8NxNcFKBiFFjqrjR1I6Q2eZ0EV2Al0gzVXW2hy7YsGRgUaPycmdb6IJ5bex4h8MvvMHYlIhEEbQkuoThMnboghslXjcQLmNHlnj8VwhdsCre0SXIZewoLKyjSyRcxg68ePiH2Q2pPr67ubOW6UnsWrb19ghk0r6f2rpCvCXkbAtH8Ou/LfPzXHPRP7HwR8vuX81m8Pjh4C+lZuCKsy14l56tcIlGnrKrL769hTC4DTQ9QA9e8Pk+nbcui+12V+781GgKgSOw5FYTh+PSn9010ZjDismxdPbM0xnX4r+XBWd6QpjDBt53aw4vaJ0f0htflV99UqFF3lc+DZ/8+MP3tuOHHj7S1Ifr4cUDu2zzRLfjUa+Jdfjg0vKX2Nr6NwgeuPcg9u/POLvpt/aovyMT3KfmE2ECHYq+eWMdn35sf7T8yKOPObvpaoy99qj9vePh8RmR2k3UCM/Do+hr31zFzNRLuMGirZx6y7apYZ57rx1LhadokZUym9ymirWNzIunIjzwwP0PytGxo/lW/ZT7Xvv6qs2NG7zJYi2CTcu2EqvwHB4Hc8NLzhdMokZt5L/73lnzuwpQas62+6jFs2Bl5dQ2rVCX6tx3zpzF1NRMdYfwOT+TWmjHqlY6WgDroo2FyCwtUD1+/MTaG6dOl0ZHx4q8T3axXYs2n8oH6l2NZBrjAjWJsNC00u0/oXt9HysmJiYmJuZ/wN/6Zaai9yOqrAAAAABJRU5ErkJggg=="
                    alt="" />
                </div>
                <!-- $t("马股") -->
                <div class="name">{{ $t("贷款") }}</div>
              </div>
            </li>
            </li> -->
            <li @click="$router.push('/yeb')">
              <div class="link">
                <div class="icon">
src/page/list/trading-list.vue
@@ -29,6 +29,7 @@
<script>
import tabsList from "./tradingList/tabs";
export default {
  name: "TradingList",
  components: { tabsList },
  data() {
    return {
src/page/list/tradingList/data.list.vue
@@ -24,81 +24,62 @@
        </van-col>
      </van-row>
    </div>
    <van-list
      style="margin-bottom: 50px"
      v-model="loadings"
      :finished="finished"
      :finished-text="$t('hj43')"
      :loading-text="$t('hj430')"
      @load="onLoads"
      :immediate-check="false"
    >
      <div
        class="item"
        @click="handleGoToKlineDetail1(item, index)"
        v-for="(item, index) in listArr"
        :key="item.indexCode"
      >
        <van-row type="flex" align="center" gutter="20">
          <van-col span="8">
            <div>
              <div class="tp">
                <div class="collection" @click="optionszx(item)">
                  <div
                    class="shu"
                    :class="item.isOption == '1' ? 'shublue' : ''"
                  ></div>
                </div>
                <div
                  class="title_color"
                  style="
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list style="margin-bottom: 50px" v-model="loadings" :finished="finished" :finished-text="$t('hj43')"
        :loading-text="$t('hj430')" @load="onLoads" :immediate-check="false">
        <div class="item" @click="handleGoToKlineDetail1(item, index)" v-for="(item, index) in listArr"
          :key="item.indexCode">
          <van-row type="flex" align="center" gutter="20">
            <van-col span="8">
              <div>
                <div class="tp">
                  <div class="collection" @click="optionszx(item)">
                    <div class="shu" :class="item.isOption == '1' ? 'shublue' : ''"></div>
                  </div>
                  <div class="title_color" style="
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ item.name }}
                  ">
                    {{ item.name }}
                  </div>
                </div>
                <div class="bt">
                  <span>{{ item.spell }}</span>
                </div>
              </div>
              <div class="bt">
                <span>{{ item.spell }}</span>
              </div>
            </div>
          </van-col>
            </van-col>
          <van-col span="3">
            <div style="text-align: right">
              {{ item.gid }}
            </div>
          </van-col>
            <van-col span="3">
              <div style="text-align: right">
                {{ item.gid }}
              </div>
            </van-col>
          <van-col span="7">
            <div style="text-align: right">
              <div class="tp">
                <span class="price_color">
                  {{ item.nowPrice | _toLocaleString(false) }}
                </span>
            <van-col span="7">
              <div style="text-align: right">
                <div class="tp">
                  <span class="price_color">
                    {{ item.nowPrice | _toLocaleString(false) }}
                  </span>
                </div>
                <div class="bt">
                  <span>{{ item.addTime }}</span>
                </div>
              </div>
              <div class="bt">
                <span>{{ item.addTime }}</span>
            </van-col>
            <van-col span="6">
              <div style="text-align: right">
                <div class="tp right_bs" :class="`${item.color > 0 ? 'green' : 'red'}`">
                  <span class="price_color">{{ item.hcrateP }}</span>
                </div>
              </div>
            </div>
          </van-col>
          <van-col span="6">
            <div style="text-align: right">
              <div
                class="tp right_bs"
                :class="`${item.color > 0 ? 'green' : 'red'}`"
              >
                <span class="price_color">{{ item.hcrateP }}</span>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-list>
            </van-col>
          </van-row>
        </div>
      </van-list>
    </van-pull-refresh>
    <dazy ref="dazy" />
  </div>
@@ -108,6 +89,7 @@
import * as api from "@/axios/api";
import handleDt from "@/utils/deTh";
import dazy from "./dazy.vue";
import { WhrWebSocket } from "@/utils/WhrWebSocket";
export default {
  components: { dazy },
@@ -163,7 +145,8 @@
      listArr: [],
      pageNumVal: 1,
      getInterval: null,
      num: 1
      num: 1,
      refreshing: false
    };
  },
@@ -171,9 +154,10 @@
    this.listArr = [];
    this.pageNumVal = 1;
    this.getStock(this.active, this.zxactive, 1);
    this.getInterval = setInterval(() => {
      this.getStock(this.active, this.zxactive, 1);
    }, 5000);
    this.initWebSocket()
    // this.getInterval = setInterval(() => {
    //   this.getStock(this.active, this.zxactive, 1);
    // }, 5000);
  },
  methods: {
    filterSH(val) {
@@ -232,7 +216,7 @@
      let pageNumVal = c || this.pageNumVal;
      let opt = {
        pageNum: pageNumVal,
        pageSize: 20*this.num,
        pageSize: 20 * this.num,
        stockPlate: "",
        keyWords: this.sousuo,
        stockType: stockType,
@@ -258,7 +242,7 @@
              this.listArr = data.data.list;
              this.loadings = false;
              // this.finished = true;
              if(this.listArr.length % 20 ){
              if (this.listArr.length % 20) {
                this.finished = true;
              }
            }
@@ -267,7 +251,7 @@
              this.listArr = data.data.list;
              this.loadings = false;
              // this.finished = true;
              if(this.listArr.length % 20 ){
              if (this.listArr.length % 20) {
                this.finished = true;
              }
            }
@@ -277,14 +261,48 @@
        this.finished = true;
      }
    }, 500),
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true,表示处于加载状态
      this.loading = true;
      if (this.refreshing) {
        // this.listArr = [];
        this.refreshing = false;
      }
      this.getStock();
    },
    initWebSocket() {
      this.Trade = new WhrWebSocket({
        path: `ws://ws.is4vc.com:8001/websocket-server`,
        onmessage: this.getTradeMessage,
      });
      this.Trade.init();
    },
    getTradeMessage({ data }) {
      let result = JSON.parse(data)
      let pid = result.pid
      let userToUpdate = this.listArr.find(item => item.code == pid)
      if (userToUpdate) {
        // 更新对象数据
        userToUpdate.nowPrice = result.last;
        userToUpdate.hcrateP = result.pcp;
      }
    },
    onLoads() {
      console.log('onLoads');
      // this.pageNumVal++;
      this.loadings = true;
      this.num+=1
      this.num += 1
      this.getStock();
    },
    optionszx() {},
    optionszx() { },
  },
  destroyed() {
    clearInterval(this.getInterval);
@@ -312,6 +330,7 @@
  // display: flex;
  // justify-content: space-between;
  border-bottom: 1px solid #f0f2f3;
  .right_bs {
    text-align: center;
    border-radius: 0.05333rem;
@@ -331,10 +350,12 @@
  .green {
    background-color: rgb(3, 173, 143);
  }
  .red {
    background-color: rgb(208, 75, 100);
  }
}
.center_price {
  font-style: normal;
  font-weight: 500;
@@ -346,6 +367,7 @@
  flex: 1;
  margin-right: 20px;
}
.title_color {
  font-style: normal;
  font-weight: 500;
src/page/list/tradingList/tabs.vue
@@ -51,7 +51,7 @@
      tabsList: [
        { title: this.$t("hj61"), key: "" },
        { title: this.$t("印股"), key: "IN", name: "IN" },
        { title: this.$t("hj261"), key: "DZ", name: "DZ" },
        { title: this.$t("hj621"), key: "DZ", name: "DZ" },
      ],
      zxtabsList: [{ title: this.$t("印股"), key: "IN", name: "IN" }],
      active: "",
src/utils/WhrWebSocket.js
New file
@@ -0,0 +1,55 @@
export function strFirstBit(val) {
  let arr = val.map((val, index, arr) => {
    return val.currency;
  });
  return arr;
}
export function filterArrayEmpty(val) {
  let isEmpty = val.every((val) => {
    return val != "";
  });
  return isEmpty;
}
export class WhrWebSocket {
  constructor(params) {
    //只有params这个参数必须卸载constructor方法里,其他的实例属性可以写在外面
    // 比如 socket = null
    this.socket = null;
    this.params = params;
    this.j = 0; //websocket重连次数
    this.i = 0; //发送信息次数
  }
  init(params) {
    if (this.params.path) {
      this.path = this.params.path;
    } else {
      throw new Error("参数socket服务器地址path必须存在");
    }
    this.socket = new WebSocket(this.path);
    // this.socket.send('key:eVKtHt7aG4m6ozwWL9qG')
    console.log('已连接到服务器');
    this.socket.onopen = () => {
      // console.log("连接开启");
    };
    // this.socket.onclose = () => {
    //     console.log("连接关闭")
    //     this.reconnect()
    // }
    // this.socket.onerror = () => {
    //     console.log("连接错误")
    // }
    this.socket.onmessage = this.params.onmessage;
  }
  // getMessage(msg) {
  //     console.log("收到的消息", msg)
  //     return msg
  // }
  close() {
    clearTimeout(this.time);
    this.socket.close(1000, "手动关闭");
  }
}