<template>
|
<div id="zhu">
|
<div id="skukuang">
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
</div>
|
<div id="xkukuang">
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
<div class="pai">
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
<div class="ge" @click="xian()"></div>
|
</div>
|
</div>
|
<div id="caozuo">
|
<div id="kuleik">
|
<div class="leizi" style="margin-left: 2%;">无货</div>
|
<div class="lei">
|
<div id="kong"></div>
|
</div>
|
<div class="leizi">有货</div>
|
<div class="lei">
|
<div id="huo"></div>
|
</div>
|
<div class="leizi">锁定</div>
|
<div class="lei">
|
<div id="suo"></div>
|
</div>
|
<div class="leizi">禁用</div>
|
<div class="lei">
|
<div id="jin"></div>
|
</div>
|
<div class="leizi">空桶</div>
|
<div class="lei">
|
<div id="tong"></div>
|
</div>
|
</div>
|
<div id="xiank">
|
<div id="wenz">当前选中位置为：</div>
|
<div id="weny"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted } from "vue";
|
import axios from "axios";
|
|
//图标显示
|
onMounted(() => {
|
setInterval(() => {
|
axios.post("api/LocationInfo/getLocation", { rows: 1000 }).then(x => {
|
console.log(x);
|
let w = document.getElementsByClassName("ge");
|
//每排总数
|
let num = x.data.length / 2;
|
//排2
|
for (let i = 0; i < 2; i++) {
|
//列51
|
for (let k = 0; k < 51; k++) {
|
//层5
|
for (let n = 1; n <= 5; n++) {
|
//反向个数
|
let t = 5 - n;
|
//当前数组对应值
|
let m = num * i + k * 5 + t;
|
//对应数据库货位
|
//一排
|
let s = num - k * 5 - n ;
|
//二排
|
if (i == 1) {
|
s = num * i + num - k * 5 - n;
|
}
|
//标记货位
|
w[m].dataset.mark = x.data[s].locationName;
|
//获取当前货位状态
|
let status = x.data[s].locationStatus;
|
let enable = x.data[s].enableStatus;
|
//判断类型
|
//空闲
|
if (status == 0) {
|
w[m].style.backgroundImage = "url('')";
|
}
|
//有货
|
if (status == 100) {
|
w[m].style.backgroundImage =
|
"url(" + require("@../../../src/img/Stored.png") + ")";
|
}
|
//空桶
|
if (status == 101) {
|
w[m].style.backgroundImage =
|
"url(" + require("@../../../src/img/Stored2.png") + ")";
|
}
|
//锁定
|
if (status == 1) {
|
w[m].style.backgroundImage =
|
"url(" + require("@../../../src/img/Lock.png") + ")";
|
}
|
//禁用
|
if (enable == 1) {
|
w[m].style.backgroundImage =
|
"url(" + require("@../../../src/img/Error.png") + ")";
|
}
|
//console.log(m+"/"+status+"/"+enable);
|
}
|
}
|
}
|
});
|
}, 1000);
|
});
|
|
//货位位置选中显示
|
const xian = () => {
|
//重置
|
let v = document.getElementsByClassName("ge");
|
for (let i = 0; i < v.length; i++) {
|
v[i].style.border = "1px solid black";
|
}
|
//选中
|
let s=document.getElementById("weny");
|
const clickableElements = document.querySelectorAll(".ge");
|
clickableElements.forEach(element => {
|
element.addEventListener("click", function() {
|
s.textContent = this.dataset.mark;
|
this.style.border = "2px solid red";
|
});
|
});
|
};
|
</script>
|
|
<style>
|
#weny {
|
width: 50%;
|
height: 100%;
|
float: left;
|
line-height: 400%;
|
font-weight: 600;
|
font-size: 20px;
|
text-align: left;
|
}
|
#wenz {
|
width: 50%;
|
height: 100%;
|
float: left;
|
line-height: 400%;
|
font-weight: 600;
|
font-size: 20px;
|
text-align: right;
|
}
|
#xiank {
|
width: 58%;
|
height: 25%;
|
float: left;
|
}
|
#kong {
|
width: 70%;
|
height: 100%;
|
border: 1px solid black;
|
float: left;
|
}
|
#huo {
|
width: 70%;
|
height: 100%;
|
border: 1px solid black;
|
float: left;
|
background-image: url("../../img/Stored.png");
|
background-size: 100%;
|
}
|
#suo {
|
width: 70%;
|
height: 100%;
|
border: 1px solid black;
|
float: left;
|
background-image: url("../../img/Lock.png");
|
background-size: 100%;
|
}
|
#jin {
|
width: 70%;
|
height: 100%;
|
border: 1px solid black;
|
float: left;
|
background-image: url("../../img/Error.png");
|
background-size: 100%;
|
}
|
#tong {
|
width: 70%;
|
height: 100%;
|
border: 1px solid black;
|
float: left;
|
background-image: url("../../img/Stored2.png");
|
background-size: 100%;
|
}
|
.lei {
|
width: 12%;
|
height: 80%;
|
float: left;
|
margin: 1.5% 0%;
|
}
|
.leizi {
|
width: 7%;
|
height: 80%;
|
float: left;
|
margin: 1.5% 0%;
|
line-height: 280%;
|
}
|
#kuleik {
|
width: 42%;
|
height: 25%;
|
float: left;
|
}
|
.ge {
|
width: 100%;
|
height: 10%;
|
border: 1px solid black;
|
margin: 80% 0%;
|
background-size: 100%;
|
background-repeat: no-repeat;
|
cursor: pointer;
|
}
|
.pai {
|
width: 1.5%;
|
height: 100%;
|
margin: 0% 0.23%;
|
float: left;
|
}
|
#zhu {
|
width: 100%;
|
height: 89.8vh;
|
float: left;
|
}
|
#skukuang {
|
width: 95%;
|
margin: 1% 2.5%;
|
float: left;
|
background: rgb(241, 241, 245);
|
height: 30%;
|
border-radius: 5px;
|
}
|
#xkukuang {
|
width: 95%;
|
margin: 0% 2.5%;
|
float: left;
|
background: rgb(241, 241, 245);
|
height: 30%;
|
border-radius: 5px;
|
}
|
#caozuo {
|
width: 95%;
|
margin: 2% 2.5%;
|
float: left;
|
background: rgb(241, 241, 245);
|
height: 30%;
|
border-radius: 5px;
|
}
|
</style>
|
