console
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>森林火灾演示</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="renderer" content="webkit">
<script src="https://app.vizo.top/js/utils.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 14px;
font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
color: #27282b;
background: #fff;
}
a {
text-decoration: none;
color: #27282b;
}
*,
*::before,
*::after {
outline: none;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.setting-item {
width: 770px;
height: 35px;
color: #666;
margin: 10px auto 20px auto;
display: flex;
align-items: center;
}
.inp1 {
width: 50px;
height: 30px;
color: #666;
border: 1px solid #ddd;
margin-left: 10px;
padding: 0 5px;
font-size: 15px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
.u4 {
width: 770px;
height: 770px;
background: #f5f5f5;
margin: 10px auto 50px auto;
display: flex;
flex-wrap: wrap;
}
.u4 li {
flex: 0 1 10px;
height: 10px;
line-height: 10px;
font-size: 10px;
margin: 0 1px 1px 0;
background: #14c3c9;
transition: background-color 2s;
}
.u4 li.file {
background: #f10202;
}
.u4 li.sp {
background: #ade2e4;
}
</style>
</head>
<body>
<div class="wrapper" id="app">
<div class="setting-item">
森林覆盖率: <input class="inp1" type="number" min="0" max="1" step="0.1" v-model="coverRate" @change="changeCoverRate()">
  格子总数: {{ getListLength }}
  树木总数: {{ getTreeSum }}
  着火数量: {{ getOnfileNum }}
  着火率: {{ getOnfilePercent }}
</div>
<ul class="u4" @click="handleSetSource">
<li :class="getCls(index)" v-for="(item, index) of zlist" :key="index" :data-id="index"></li>
</ul>
</div>
<script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
<script>
let vio = VIZO_UTILS
let vm = new Vue({
el: '#app',
data() {
return {
vio,
timer1s: null,
zlist: [],
coverRate: +vio.getStore('demo.coverRate') || 0.5,
}
},
computed: {
getListLength() {
return this.zlist.length
},
getOnfileNum() {
return this.zlist.reduce((acc, v) => acc + (v === 1 ? 1 : 0), 0)
},
getTreeSum() {
return this.zlist.reduce((acc, v) => acc + (v !== 2 ? 1 : 0), 0)
},
getOnfilePercent() {
return vio.round(this.getOnfileNum / this.getTreeSum * 100) + '%'
},
},
methods: {
changeCoverRate() {
if (this.coverRate >= 0 && this.coverRate <= 1) {
this.initBlock()
} else {
alert('请设置0-1之间的数')
}
},
initBlock() {
clearTimeout(this.timer1s)
this.zlist = Array(4900).fill(0).map(v => {
if (vio.getProbability(1 - this.coverRate)) {
v = 2
}
return v
})
},
getCls(index) {
let itm = this.zlist[index]
let cls = itm === 1 && 'file' || itm === 2 && 'sp'
return cls
},
handleSetSource(e) {
clearTimeout(this.timer1s)
let index = Number(e.target.dataset.id)
this.zlist = this.zlist.map((v, i) => {
if (i === index && v !== 2) {
v = 1
}
return v
})
this.runTimer()
},
runTimer() {
let len = this.getOnfileNum
this.timer1s = setTimeout(() => {
this.zlist = this.zlist.map((v, i, y) => {
if (v === 1 || v === 2) return v
let isClose = ((i - 1) % 70 !== 69 && y[i - 1] === 1) || ((i + 1) % 70 && y[i + 1] === 1) || y[i - 70] === 1 || y[i + 70] == 1
if (isClose) {
v = 1
}
return v
})
if (len < this.getOnfileNum) {
this.runTimer()
}
}, 1000)
},
},
watch: {
coverRate(nVal) {
vio.setStore('demo.coverRate', nVal)
},
},
mounted() {
this.initBlock()
},
})
</script>
</body>
</html>