# cat majiang.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入http-vue-loader -->
<script src="https://unpkg.com/http-vue-loader"></script>
<!-- 这里使用了element ui框架 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script> -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title></title>
<style type="text/css">
ul{list-style: none;}
</style>
</head>
<body>
<div id="app">
<el-collapse >
<el-collapse-item title="血流麻将配牌说明" name="1">
<div>
<h3>麻将配牌：</h3>
<h5>版本：V1.0.0</h5>
<p>游戏参与人数：4 </p>
<p>卡牌数量：108张，由花色（万、筒、条）、牌值（1-9）组成一张卡牌，每张牌4张</p>
<p>说明：多个配置项组合成一套完整的配置规则，每个配置项目下面有指定的触发概率，以及配置类型，可以指定为完全匹配或者规则匹配</p>
<p>如：当前测试需求，需要配置100%概率触发指定牌型，玩家A、B、C、D，且需要指定玩家A的手牌，则加一条配置、且匹配类型为：<b>完全匹配</b>，在对应的输入框中输入指定的牌型，最大为13张，最小为1张</p>
<p>
如W1代表一万，B1为一筒，S1代表一条，如以下代码: W1,W1,W1,W1,B1,B1,S1,S2,S3则表示手牌为一万杠子+一对一筒+一条二条三条刻字</p>
</div>
</el-collapse-item>
</el-collapse>
<div>
<br/><br/>
</div>
<!-- <el-steps :active="1" align-center>
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps> -->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="规则编号">
<el-input v-model="form.id" type="number" placeholder="eg：10010"></el-input>
</el-form-item>
<el-form-item label="触发概率">
<el-slider v-model="form.odds" type="number" show-input></el-slider>
</el-form-item>
<el-form-item label="是否启用">
<el-switch v-model="form.enable"></el-switch>
</el-form-item>
<el-form-item label="生效时间">
<el-date-picker
v-model="form.enableTime"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00']">
</el-date-picker>
</el-form-item>
<el-form-item label="匹配类型">
<el-select v-model="form.mateType" placeholder="请选择匹配类型" @change="changeMateType($event)">
<el-option label="完全匹配" value="eq"></el-option>
<el-option label="模糊匹配" value="like"></el-option>
<el-option label="随机匹配" value="random"></el-option>
</el-select>
</el-form-item>
<el-form-item label="牌型配置" v-show="showConf('eq')">
<div>
玩家1： <el-input v-model="eqConf.frist" placeholder="eg. W1 W1 W1"></el-input>
</div>
<div>
玩家2： <el-input v-model="eqConf.right"></el-input>
</div>
<div>
玩家3： <el-input v-model="eqConf.opposite"></el-input>
</div>
<div>
玩家4： <el-input v-model="eqConf.left"></el-input>
</div>
<div>
底牌： <el-input v-model="eqConf.others"></el-input>
</div>
</el-form-item>
<el-form-item label="模糊配置" v-show="showConf('like')">
<el-button type="primary" icon="el-icon-plus" @click="visible = true">添加卡牌</el-button>
<el-radio-group v-model="player">
<el-radio label="frist">玩家1</el-radio>
<el-radio label="right">玩家2</el-radio>
<el-radio label="opposite">玩家3</el-radio>
<el-radio label="left">玩家4</el-radio>
</el-radio-group>
<div>
玩家1： <el-input type="textarea" v-model="likeConf.frist" placeholder="eg. []"></el-input>
</div>
<div>
玩家2： <el-input type="textarea" v-model="likeConf.right"></el-input>
</div>
<div>
玩家3： <el-input type="textarea" v-model="likeConf.opposite"></el-input>
</div>
<div>
玩家4： <el-input type="textarea" v-model="likeConf.left"></el-input>
</div>
<div>
底牌： <el-input type="textarea" v-model="likeConf.others"></el-input>
</div>
</el-form-item>
<el-form-item label="规则描述">
<el-input type="textarea" v-model="form.name" placeholder="eg：完全匹配规则，5.1-5.30生效，30%触发概率"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">添加规则</el-button>
<!-- <el-button type="success">2. 生成模版</el-button>
--> <el-button>重置</el-button>
</el-form-item>
<!--子项目配置-->
<el-dialog :visible.sync="visible" title="模糊匹配子牌型">
<el-form-item label="牌型描述">
<el-input v-model="likeConf.desc" placeholder="100%触发，第一个卡牌位置"></el-input>
</el-form-item>
<el-form-item label="触发概率">
<el-slider v-model="likeConf.odds" show-input></el-slider>
</el-form-item>
<el-form-item label="生成规则">
<el-radio-group v-model="likeConf.generate">
<el-radio :label="1">指定卡牌</el-radio>
<el-radio :label="2">匹配规则</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="目标花色">
<el-checkbox-group v-model="likeConf.suits">
<el-checkbox label="万" name="suits"></el-checkbox>
<el-checkbox label="条" name="suits"></el-checkbox>
<el-checkbox label="筒" name="suits"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="牌值">
<el-input v-model="likeConf.values" ></el-input>
</el-form-item>
<el-form-item label="牌型分组">
<!-- <el-input v-model="form.group" ></el-input>
-->
<el-select v-model="form.group" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="长度">
<el-input v-model="likeConf.size" ></el-input>
</el-form-item>
<el-form-item>
<el-form-item>
<el-button type="primary" @click="insertItem()">立即插入</el-button>
<el-button @click="visible = false">取消</el-button>
</el-form-item>
</el-form-item>
</el-dialog>
</el-form>
<!--
<pre><code class="nohighlight">
let a = 66
console.log(a)
</code></pre> -->
<div>
<!-- <pre >
<code class="lang-json">
</code>
</pre> -->
{{codeText}}
</div>
<div>
<information-box :bar-object='titleObj' :data-list='dataList121'></information-box>
</div>
</div>
<script>
hljs.highlightAll();
console.log(1111)
function mj(string) {
var tiles = {
m:["🀇","🀈","🀉","🀊","🀋","🀌","🀍","🀎","🀏"],
p:["🀙","🀚","🀛","🀜","🀝","🀞","🀟","🀠","🀡"],
s:["🀐","🀑","🀒","🀓","🀔","🀕","🀖","🀗","🀘"],
z:["🀀","🀁","🀂","🀃","🀆","🀅","🀄","🀫","🀪"]};
var current = [];
var output = "";
var type;
function show(num) {
output += tiles[type][num - 1];
}
var length = string.length;
for (var v=0;v < length;v++) {
if ("123456789".includes(string.charAt(v))) {
current.push(string.charAt(v));
} else if ("mpsz".includes(string.charAt(v))){
type = string.charAt(v);
current.forEach(show);
current = [];
} else {
output += " ";
}
}
return output;
}
function click(val){
console.log(val);
}
function getbigicon(str){
return "<span>"+mj(str)+"</span>";
}
Vue.use(httpVueLoader)
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
new Vue({
el: '#app',
data: {
options: [
{
value: 'random',
label: '默认'
},
{
value: 'dui',
label: '对子'
}, {
value: 'random',
label: '随机'
}, {
value: 'shun',
label: '顺子'
}, {
value: 'ke',
label: '刻子'
}, {
value: 'gang',
label: '杠'
}],
player: 'frist',
form: {
id: 10010,
odds: 10,
enable: true,
enableTime: '',
mateType : 'random',
name: ''
// type: [],
// resource: '',
// desc: ''
},
codeText : "",
oddsvalue:10,
eqConf:{},
likeConf:{
odds: 50,
desc: '',
generate: '1',
suits: [],
group: 'random',
size: 2
},
value1: '',
value2: '',
visible: false,
msg: '大家好，欢迎大家学习Vue.js',
configs:[],
titleObj: {
sno: 1,
title: '法律条文'
},
dataList121: [{
sno: '1',
title: 'fdshkjfhkjsdahfk'
}, {
sno: '2',
title: 'werwerwerwerwerwerw'
}]
},
created(){
this.init();
},
mounted() {
console.log(getbigicon("1s1s1s"))
},
methods: {
onSubmit() {
this.$message({
message: '规则生成成功',
type: 'success'
});
let item = Object.assign({},this.form);
let tmpConfigs = this.configs.slice();
// tmpConfigs.push(item);
// 配置ID列表
let ids = [];
let checkConfig = true;
let maxOdds = 0;
const configSize = tmpConfigs.length;
for(let i=0;i<configSize;i++){
const element = tmpConfigs[i];
let odds = element.odds;
let id = element.id;
maxOdds+=odds;
ids.push(id);
};
console.log(ids);
console.log(maxOdds);
let itemId = item.id;
let odds = item.odds;
let enableTime = item.enableTime;
let mateType = item.mateType;
if(enableTime==""){
alert("生效时间不能为空");
checkConfig = false;
return;
}else{
if (enableTime instanceof Array){
let start = enableTime[0].getTime();
let end = enableTime[0].getTime();
item.enableTime = start;
item.expireTime = end;
}else{
alert("生效时间配置错误")
checkConfig = false;
return;
}
}
if(ids.indexOf(itemId)!=-1){
let errorMessage = "id:"+itemId+"，已存在，请修改后重试"
alert(errorMessage);
checkConfig = false;
return;
}
if(maxOdds+odds>100){
alert("配置错误，概率总合已经超过100%，请修改后重试");
checkConfig = false;
return;
}
if(mateType=="eq"){
let eqConf = this.eqConf;
let eqConfigSuccess = true;
Object.keys(eqConf).map(key => {
console.log(key)
let val = eqConf[key];
// 对于非空值属性进行数据过滤
if(val!=""){
let eqConfigItems ;
if(val instanceof Array){
eqConfigItems = val;
}else{
eqConfigItems = val.split(" ");
}
eqConfigItems.forEach(function(element){
if(element.length!=2){
eqConfigSuccess = false;
return;
}
});
if(!eqConfigSuccess){
alert("完全匹配，key，配置错误:"+key)
}else{
eqConf[key] = eqConfigItems
}
// console.log(eqConfigItem);
}else{
eqConf[key] = [];
}
})
if(eqConfigSuccess){
item.eqConf = eqConf;
}else{
return;
}
}else if(mateType=="like"){
item.likeConf = this.likeConf;
}else{
}
if(checkConfig){
tmpConfigs.push(Object.assign({},item));
this.configs = tmpConfigs;
// this.form.id++;
// console.log(this.form.id);
this.codeText = JSON.stringify(this.configs);
console.log("==============")
console.log(this.codeText);
console.log("==============")
}
},
insertItem(){
console.log("Hello World");
this.$message({
message: '插入成功',
type: 'success'
});
alert(this.player)
this.visible = false;
},
init(){
console.log("Hello World");
},
changeMateType(value){
var obj = {};
},
showConf(val){
// console.log(val);
// console.log(this.form.region);
var samePannel = (val == this.form.mateType);
return samePannel;
}
},
components: {
'information-box': httpVueLoader('./majiang-box.vue'),
},
})
</script>
</body>
</html># cat majiang-box.vue<template>
<div class='main_div'>
<span>{{barObject.stitle}}</span>
<span class="span_more">更多</span>
<el-divider></el-divider>
<ul style="padding:0.0.0.0;">
<li v-for="(item,index) in dataList" :key='item.sno'>{{item.title}}</li>
</ul>
</div>
</template>
<script>
module.exports = {
name: "informationBox",
props: {
barObject: {
sno: String,
stitle: String
},
dataList: {
type: Array
}
}
}
</script>
<style scoped>
ul li {
list-style: none;
}
.main_div {
display:none;
width: 256px;
position: absolute;
}
.span_more {
position: relative;
right: 0;
color: red;
}
</style>正文完
