foreign-exchange-ui/ruoyi-ui/src/views/trade/components/deals.vue

<template>
  <div class="trade-cdeposit">
    <el-table
      :data="holdTimeData"
      style="width: 100%"
    >
      <el-table-column prop="symbol" label="交易品种"
        width="100"
        align="center"
      />
      <el-table-column label="预警持仓时长" align="center" prop="wariningHoldDuration" >
        <template slot-scope="scope">
              <span>  {{ scope.row.wariningHoldDuration}}天</span>
           </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status > 0" type="danger">预警中</el-tag>
          <el-tag v-else type="info">已停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="setTime" label="设置时间" align="center" >
        <template slot-scope="scope">
              <span>  {{ parseTime(scope.row.setTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
           </template>
      </el-table-column>
      <el-table-column  label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
        <el-button v-if="scope.row.status <= 0" size="mini" type="primary" @click="start(scope.row)">启用</el-button>
        <el-button size="mini" v-else type="danger" @click="start(scope.row)">关闭</el-button>
        </template>
       
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="holdTimeTotal >0" :total="holdTimeTotal" 
      :page.sync="holdTimeParams.index"
      :limit.sync="holdTimeParams.size"
      @pagination="getWarninglist"
      />
    <el-row>
      <el-col :span="24"><div class="record"><svg-icon icon-class="EarlyWarning" />预警记录:</div></el-col>
    </el-row>
    <!-- 行情预警记录 -->
    <el-table :data="holdTimeRecordData" style="width: 100%">
      <el-table-column prop="symbol" label="交易品种" width="100" align="center" />
      <el-table-column prop="direction" label="买卖方向" width="300" align="center" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.direction == 'buy'" type="danger">买</el-tag>
          <el-tag v-else>卖</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="tradingHour" label="交易时间" align="center" >
        <template slot-scope="scope">
              <span>  {{ parseTime(scope.row.tradingHour, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
           </template>
      </el-table-column>
      <el-table-column prop="holdDuration" label="持仓时长" align="center" >
       
      </el-table-column>
      <el-table-column prop="wariningHoldDuration" label="预警持仓时长" align="center" >
        <template slot-scope="scope">
              <span>  {{ scope.row.wariningHoldDuration}}天</span>
           </template>
      </el-table-column>
      <el-table-column prop="wariningTime" label="预警时间" align="center" >
        <template slot-scope="scope">
              <span>  {{ parseTime(scope.row.wariningTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
           </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
        <el-button type="danger" size="mini" @click="delrecord(scope.row.id)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <pagination v-show="holdTimeRecordTotal > 0" :total="holdTimeRecordTotal"
      :page.sync="holdTimeParams.index"
      :limit.sync="holdTimeParams.size"
      @pagination="getrecord"
      />
  </div>
</template>
<script>
import * as forewarning from '@/api/forewarning'
export default {
  data() {
    return {

     
      socket : null,
      // 持仓时长parsma
      holdTimeParams:{
        trainingId:this.$route.query.id,
        memberId:this.$store.state.user.memberId,
        index:1,
        size:5
      },
      // 持仓时长预警列表
      holdTimeData:null,
      // 持仓时长total
      holdTimeTotal:0,
       // 持仓时长预警记录列表
      holdTimeRecordData:null,
      // 持仓时长预警记录total
      holdTimeRecordTotal:0,
    }
  },
  created(){
    this.getWarninglist()
    this.getrecord()
  },
  methods:{
    // 获取持仓时长预警表
    getWarninglist(){
      forewarning.getHoldTimeWarning(this.holdTimeParams).then(res=>{
        // console.log(res)
        if(res.code !== 200) return 
        this.holdTimeData = res.data.list
        this.holdTimeTotal = res.data.total
      })
    },
    // 获取持仓时长预警记录
    getrecord(){
      forewarning.getHoldTimeWarningRecord(this.holdTimeParams).then(res=>{
        if(res.code !== 200) return 
        this.holdTimeRecordData=res.data.list
        this.holdTimeRecordTotal=res.data.total
      })
    },
    // 删除持仓时长预警 
    del(val){
    // 删除传给后端的参数
      let params = {
        symbol:val.symbol,
        warningHoldDuration : val.wariningHoldDuration,
      }
      forewarning.deleteHoldTimeWarning(params).then(res=>{
        // if(res.code !== 200) return
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getWarninglist()
      })
    },
    // 删除持仓时长预警记录
    delrecord(id){
      forewarning.deleteHoldTimeWarningRecord({id:id}).then(res=>{
        // if(res.code !== 200) return
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getrecord()
      })
    },
    // 启用或关闭持仓时长预警
    start(row){
      let params = {
        status:row.status === 0 ? 1 : 0,
        symbol: row.symbol,
        warningHoldDuration : row.wariningHoldDuration,
      }
      forewarning.setHoldTimeWarning(params).then(res=>{
        // if(res.code !== 200) return
        this.$message({ message:row.status == 1 ? '关闭成功' : '启用成功' ,type: 'success'})
        this.getWarninglist()
      })
    },

  }
 
}
</script>
    <style lang="scss" scoped>
    .trade-cdeposit{
      background: #fff;
      .record{
        height: 60px;
        line-height: 60px;
        border-top: 1px solid #EAEAEA;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }
    }
    .pagination-container {
      background: #fff;
      margin-bottom: 20px;
    }

    </style>