peko-admin-web/src/views/luckGift/arrange.vue

<template>
  <div class="box">
    <div class="condition">
      <!-- 分区 -->
      <div class="inquire">
        <span>奖池</span>
        <el-select
          v-model="inquire.value"
          placeholder="请选择"
          @change="handleChange"
        >
          <el-option
            v-for="item in inquire.options"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <!-- 总分组 -->
    <div class="allArr">
      目前数组 <span>{{ allArr.length }} </span> 组:
      <span class="span" v-for="(item, index) in allArr" :key="index">
        {{ item.expect }},
      </span>
    </div>

    <!-- 数组设置 -->
    <div class="arrSet">数组设置：</div>

    <!-- 数组内容 -->
    <div class="boxs">
      <div class="arrContent" v-for="(item, index) in arr" :key="index">
        <div class="arrBox">
          <div class="left">
            <div class="left_in1">
              期望: <b class="b1">{{ item.expect }}</b> ,
            </div>
            <div class="left_in2">
              得到率: <b class="b2">{{ (item.winRate * 100).toFixed(2) }}%</b> ,
            </div>
          </div>
          <div class="right" v-for="(arrInItem, i) in item.itemList" :key="i">
            <span>{{ arrInItem.multi }}</span>
            <el-input
              @input="handleInput(index, i, $event)"
              v-model="arrInItem.num"
              placeholder=""
              class="input"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 按钮 -->
    <div class="but">
      <el-button class="primary" type="primary" @click="saveFun()"
        >保存
      </el-button>
    </div>
  </div>
</template>
<script>
import { listType, list, save } from "@/api/luckGift/luckGift";
// @ts-ignore
import { dateFormat } from "@/utils/system-helper";
// @ts-ignore
import { ElMessage } from "element-plus";
import moment from "moment-timezone";
export default {
  name: "luckGiftArrange",
  data() {
    return {
      //查询所需条件对象
      inquire: {
        value: "",
        options: [],
      },
      allArr: [], //总数组
      arr: [], //处理下面总数组
    };
  },
  created() {
    listType().then((res) => {
      this.inquire.options = res.data;
      this.inquire.value = res.data[0].type;
      this.getData();
    });
  },
  methods: {
    // 查询接口
    getData() {
      list({ type: this.inquire.value }).then((res) => {
        this.allArr = res.data;
        this.arr = res.data;
      });
    },
    handleInput(index, i, val) {
      // 期望值 expectedvalue = 倍数 * 5 * num / 2500
      // 中奖率 winRate =不为θ的倍数的num / 500
      this.arr[index].expect = this.calculationFun(index, i, val).expect;
      this.arr[index].winRate = this.calculationFun(index, i, val).winRate;
    },
    // 计算函数
    calculationFun(index, i, val) {
      var expectNum = 0;
      var winRate = 0;
      this.arr[index].itemList.forEach((res) => {
        expectNum += res.multi * res.num;
        winRate += Number(res.num);
      });
      console.log(winRate);
      return {
        expect: (expectNum / 500).toFixed(2),
        winRate: (winRate / 500).toFixed(4),
      };
    },
    // 保存
    saveFun() {
      //
      save(
        JSON.stringify({ poolList: this.arr, type: this.inquire.value })
      ).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "保存成功",
            type: "success",
          });
          this.getData();
        } else {
          ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    // 监听类型
    handleChange(value) {
      this.inquire.value = value;
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.box {
  padding-top: 20px;
  background: #ecf0f5;
  font-size: 18px;
  .condition {
    margin-bottom: 20px;
    .inquire {
      display: inline-block;
      margin-right: 20px;
      span {
        margin-right: 10px;
      }
      .input {
        width: 180px;
        margin-right: 10px;
      }
    }
  }
  .but {
    margin-bottom: 20px;
  }
  .allArr {
    margin: 20px 0 10px 0;
    span {
      color: red;
    }
    .span {
      margin: 0 10px;
    }
  }
  .arrSet {
    margin-bottom: 0px;
  }
  .boxs {
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    .arrContent {
      // margin-bottom: 20px;
      width: 190px;
      height: 395px;
      line-height: 30px;
      margin-bottom: 20px;
      .arrBox {
        .left {
          // float: left;
          div {
            min-width: 100px;
            display: block;
            // margin-bottom: -25px;
            .b1 {
              color: red;
            }
            .b2 {
              color: blue;
            }
          }
          .left_in2 {
            margin-bottom: 10px
          }
        }
        .right {
          float: left;
          margin-bottom: 15px;
          span {
            display: inline-block;
            width: 45px;
          }
          .input {
            display: inline-block;
            width: 100px;
            margin-right: 10px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>