RuoYi-Vue/ruoyi-ui/src/views/newstocksystem/trends/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="交易日期" prop="tradeDate">
        <el-date-picker clearable size="small"
                        v-model="queryParams.tradeDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择交易日期"
                        style="width: 160px"
                        @change="dateChanged"
                        :editable="false"
                        :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="动量周期" prop="momentumType">
        <el-select v-model="queryParams.momentumType"
                   placeholder="动量周期"
                   clearable
                   size="small"
                   @change="selectChanged"
                   style="width: 100px"
                   :clearable="false"
        >
          <el-option key="1" label="1日" :value="'1'" />
          <el-option key="3" label="3日" :value="'3'" />
          <el-option key="5" label="5日" :value="'5'" />
          <el-option key="10" label="10日" :value="'10'" />
          <el-option key="15" label="15日" :value="'15'" />
          <el-option key="20" label="20日" :value="'20'" />
          <el-option key="30" label="30日" :value="'30'" />
        </el-select>
      </el-form-item>
      <el-form-item label="行业名称" prop="industryName">
        <el-autocomplete
          v-model="queryParams.industryName"
          placeholder="请输入行业名称"
          size="small"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          @change="dateChanged"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <div style="border-bottom: solid 2px #A9A4A4;margin: 10px 0 10px 0;height: 30px;">
          <span id="lotDistribute">{{ queryParams.type }}日趋势板块</span>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><el-icon type="primary" plain circle size = "mini" class="el-icon-medal-1" style="border: 0px;"></el-icon> 动量趋势</span>
            <el-table :data="this.lotTrendsList[0].sortDataList"
                      height='560'
                      style="width: 100%;"
                      empty-text="暂无数据"
                      tooltip-effect="dark"
                      @cell-click="handleClickTable"
                      :cell-style="trendCellStyle"
                      :key="itemKey"
                      v-loading="loading"
            >
              <template v-for="item in this.lotTrendsList">
                <el-table-column
                  :label="item.title"
                  class="active"
                >
                  <template slot-scope="scope">
                    <span>{{ item.sortDataList[scope.$index] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import stockdataApi from '@/api/newstocksystem/stockdata'
import { listTrends, listTrendsSection } from '@/api/newstocksystem/trends'

export default {
  name: "Trends",
  data() {
    return {
      // 遮罩层
      itemKey: '',//用于强制表格刷新
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 动量结果表格数据,需要初始化，否则第一次加载会报错
      lotTrendsList: [{sortDataList:[]}],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tradeDate: null,
        industryName: null,
        momentumType: "10"
      }
    };
  },
  created() {
    this.getLastTradeDate();
  },
  methods: {
    /** 获取最后一个交易日 */
    getLastTradeDate() {
      stockdataApi.getLastTradeDate().then(response => {
        const lastTradeDate = response.msg;
        console.log("getLastTradeDate " , lastTradeDate);
        this.queryParams.tradeDate = lastTradeDate;
        // 在获取到最后交易日后，再调用查询方法，确保日期已经设置
        this.getListSection();
      });
    },
    /** 查询动量结果列表 */
    getListSection() {
      this.loading = true;
      listTrendsSection(this.queryParams).then(response => {
        this.lotTrendsList = response.rows;
        this.itemKey = Math.random();
        document.getElementById('lotDistribute').innerText = this.queryParams.momentumType + "日趋势板块";
        this.loading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.industryName = "";
      this.getLastTradeDate();
    },
    handleClickTable(row, column) {
      console.log("handleClickTable : ",row, column.label);
    },
    dateChanged() {
      this.getListSection();
    },
    selectChanged() {
      this.getListSection();
    },
    querySearchAsync(queryString, cb) {
      // 这里可以实现异步搜索行业名称的逻辑
      // 暂时返回空数组
      cb([]);
    },
    handleSelect(item) {
      console.log("handleSelect : ", item);
    },
    //修改单元格样式
    trendCellStyle({row, column, rowIndex, columnIndex}) {
      if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 3 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 0)
        return 'background:red;color:white;text-align:center;';
      else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 6 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 3)
        return 'background:#FF9D00;color:white;text-align:center;';
      else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 10 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 6)
        return 'background:#FFD000;color:white;text-align:center;';
      else
        return 'text-align:center;';
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 15px;
}

.box-card {
  margin-bottom: 15px;
}

.text-red {
  color: #f56c6c;
}

.text-green {
  color: #67c23a;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>