|
|
@@ -0,0 +1,543 @@
|
|
|
+<template>
|
|
|
+ <div ref="body">
|
|
|
+ <div class="prize">
|
|
|
+ <span class="prize-text">{{ drawOption.prize_name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="slot counter_0">
|
|
|
+ <b-row>
|
|
|
+ <div>
|
|
|
+ <i class="slot-text-dep">部門</i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="slot-text">
|
|
|
+ <i>0</i>
|
|
|
+ <i>0</i>
|
|
|
+ <i>0</i>
|
|
|
+ <i>0</i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="slot-text"></span>
|
|
|
+ </div>
|
|
|
+ </b-row>
|
|
|
+ </div>
|
|
|
+ <div class="activity" :style="activitySpacing(activityName.length)">
|
|
|
+ <span class="activity-text">
|
|
|
+ {{ activityName }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="year">
|
|
|
+ <span class="year-text">
|
|
|
+ {{ year }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="counter">
|
|
|
+ <div class="top">
|
|
|
+ <span class="counter-text">已抽:{{ drawnCount }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span class="counter-text">未抽:{{ notDrawnCount }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ BRow,
|
|
|
+ BCol,
|
|
|
+ BCard,
|
|
|
+ BCardText,
|
|
|
+ BLink,
|
|
|
+ BTable,
|
|
|
+ BModal,
|
|
|
+ BFormInput,
|
|
|
+ BFormSpinbutton,
|
|
|
+ BButton,
|
|
|
+ BFormCheckbox,
|
|
|
+ BFormRadio,
|
|
|
+ BImg,
|
|
|
+} from "bootstrap-vue";
|
|
|
+import Ripple from "vue-ripple-directive";
|
|
|
+import useJwt from "@/auth/jwt/useJwt";
|
|
|
+import vSelect from "vue-select";
|
|
|
+import { VueGoodTable } from "vue-good-table";
|
|
|
+import "vue-select/dist/vue-select.css";
|
|
|
+
|
|
|
+import Pusher from "pusher-js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ BRow,
|
|
|
+ BCol,
|
|
|
+ BCard,
|
|
|
+ BCardText,
|
|
|
+ BLink,
|
|
|
+ BTable,
|
|
|
+ BModal,
|
|
|
+ BFormInput,
|
|
|
+ BFormSpinbutton,
|
|
|
+ BButton,
|
|
|
+ BFormCheckbox,
|
|
|
+ BFormRadio,
|
|
|
+ BImg,
|
|
|
+ VueGoodTable,
|
|
|
+ vSelect,
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ Ripple,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activityName: "亞新春酒聯歡餐會",
|
|
|
+ year:'2023',
|
|
|
+
|
|
|
+ activityId: this.$route.params.activity_id,
|
|
|
+ activity: {},
|
|
|
+ userList: [],
|
|
|
+ departmentList: [],
|
|
|
+
|
|
|
+
|
|
|
+ prizeId: "",
|
|
|
+ drawList: [],
|
|
|
+ department_name: "",
|
|
|
+ user_id: "",
|
|
|
+ user_name: "",
|
|
|
+
|
|
|
+ drawnCount: 0,
|
|
|
+ notDrawnCount: 0,
|
|
|
+ isDrawn: false,
|
|
|
+ prizeList: [],
|
|
|
+
|
|
|
+ drawOption: {
|
|
|
+ activity_id: this.$route.params.activity_id,
|
|
|
+ prize_id: "0",
|
|
|
+ prize_name: "",
|
|
|
+ region: ['北區', '中區', '南區', '泰瑞', '來賓'],
|
|
|
+ draw_one: true,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // Pusher.logToConsole = true;
|
|
|
+
|
|
|
+ var pusher = new Pusher("9fb7f6f0141efc7e1293", {
|
|
|
+ cluster: "ap3",
|
|
|
+ });
|
|
|
+
|
|
|
+ var channel = pusher.subscribe("my-channel");
|
|
|
+ channel.bind("set-event", (data) => {
|
|
|
+ let message = data.message;
|
|
|
+ console.log(message);
|
|
|
+
|
|
|
+ if (message == "updateData") {
|
|
|
+ this.updateDataset();
|
|
|
+ } else if (message && message.prize_id) {
|
|
|
+ this.clearResult();
|
|
|
+ this.drawOption = message;
|
|
|
+ this.drawList = [];
|
|
|
+ this.count();
|
|
|
+ } else if (message && message.success) {
|
|
|
+ this.drawList = message.drawList;
|
|
|
+ if (message.drawList.length == 1) {
|
|
|
+ this.department_name = message.drawList[0].department_name;
|
|
|
+ this.user_id = message.drawList[0].user_id;
|
|
|
+ this.user_name = message.drawList[0].user_name;
|
|
|
+ this.animate();
|
|
|
+ }
|
|
|
+ }else if (message == "clearResult") {
|
|
|
+ this.clearResult();
|
|
|
+ this.drawList = [];
|
|
|
+ this.count();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ useJwt
|
|
|
+ .postData("/api/activity/show", { activity_id: this.activityId })
|
|
|
+ .then((res) => {
|
|
|
+ this.activity = res.data;
|
|
|
+ this.activityName = res.data.activity_name;
|
|
|
+ this.year = res.data.year;
|
|
|
+ if (this.activityName.includes("年度")) {
|
|
|
+ this.activityName =
|
|
|
+ "亞新" + this.activityName.split("年度")[1];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ useJwt
|
|
|
+ .postData("/api/check_in/index_by_activity", {
|
|
|
+ activity_id: this.activityId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.userList = res.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ useJwt
|
|
|
+ .postData("/api/prize/index_by_activity", {
|
|
|
+ activity_id: this.$route.params.activity_id,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.prizeList = res.data;
|
|
|
+ });
|
|
|
+
|
|
|
+ useJwt.postData("/api/department/index").then((res) => {
|
|
|
+ this.departmentList = Object.values(res.data);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.bodyListener = (e) => {
|
|
|
+ if (
|
|
|
+ (e.keyCode === 13 || e.keyCode === 32) &&
|
|
|
+ e.target === document.body
|
|
|
+ ) {
|
|
|
+ console.log("enter");
|
|
|
+ this.draw();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ document.body.addEventListener("keyup", this.bodyListener, false);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateDataset() {
|
|
|
+ useJwt
|
|
|
+ .postData("/api/prize/index_by_activity", {
|
|
|
+ activity_id: this.$route.params.activity_id,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.prizeList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ draw() {
|
|
|
+ console.log("fun draw in");
|
|
|
+ useJwt
|
|
|
+ .postData("/api/drawManager", {
|
|
|
+ message: "draw",
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ animate() {
|
|
|
+ var departmentList = this.departmentList;
|
|
|
+ var numbers = "0123456789";
|
|
|
+ var string = numbers;
|
|
|
+
|
|
|
+ this.drawList.forEach((element, index) => {
|
|
|
+ var departmentName = element.department_name;
|
|
|
+ var deps = document.querySelectorAll(
|
|
|
+ "div.slot.counter_" +
|
|
|
+ index +
|
|
|
+ " > div > div:nth-child(1) > i"
|
|
|
+ );
|
|
|
+ var allCounters = document.querySelectorAll(
|
|
|
+ "div.slot.counter_" +
|
|
|
+ index +
|
|
|
+ " > div > div:nth-child(2) > span > i"
|
|
|
+ );
|
|
|
+
|
|
|
+ deps.forEach((el) => {
|
|
|
+ var duration = 1000;
|
|
|
+ var interval = setInterval(() => {
|
|
|
+ el.innerText =
|
|
|
+ departmentList[
|
|
|
+ Math.floor(
|
|
|
+ Math.random() * departmentList.length
|
|
|
+ )
|
|
|
+ ];
|
|
|
+ duration = duration - 50;
|
|
|
+ if (duration <= 0) {
|
|
|
+ clearInterval(interval);
|
|
|
+ el.innerText = departmentName;
|
|
|
+ this.department_name = departmentName;
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ });
|
|
|
+ allCounters.forEach((el, i) => {
|
|
|
+ var duration = 500 + i * 1000;
|
|
|
+ var interval = setInterval((e) => {
|
|
|
+ el.innerText = string.charAt(
|
|
|
+ Math.random() * string.length
|
|
|
+ );
|
|
|
+ duration = duration - 50;
|
|
|
+ if (duration <= 0) {
|
|
|
+ clearInterval(interval);
|
|
|
+ el.innerText = element.user_id[i];
|
|
|
+ if (i == 3) {
|
|
|
+ document.querySelector(
|
|
|
+ "div.slot.counter_" +
|
|
|
+ index +
|
|
|
+ " > div > div:nth-child(3) > span"
|
|
|
+ ).innerText = element.user_name;
|
|
|
+ this.user_id = element.user_id;
|
|
|
+ this.isAnimated = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearResult() {
|
|
|
+ document.querySelector(
|
|
|
+ "div.slot.counter_0 > div > div:nth-child(1) > i"
|
|
|
+ ).innerText = "部門";
|
|
|
+ document.querySelectorAll(
|
|
|
+ "div.slot.counter_0 > div > div:nth-child(2) > span > i"
|
|
|
+ )[0].innerText = "0";
|
|
|
+ document.querySelectorAll(
|
|
|
+ "div.slot.counter_0 > div > div:nth-child(2) > span > i"
|
|
|
+ )[1].innerText = "0";
|
|
|
+ document.querySelectorAll(
|
|
|
+ "div.slot.counter_0 > div > div:nth-child(2) > span > i"
|
|
|
+ )[2].innerText = "0";
|
|
|
+ document.querySelectorAll(
|
|
|
+ "div.slot.counter_0 > div > div:nth-child(2) > span > i"
|
|
|
+ )[3].innerText = "0";
|
|
|
+ document.querySelector(
|
|
|
+ "div.slot.counter_0 > div > div:nth-child(3) > span"
|
|
|
+ ).innerText = "";
|
|
|
+ this.isDrawn = false;
|
|
|
+ this.isAnimated = false;
|
|
|
+ },
|
|
|
+ count() {
|
|
|
+ useJwt
|
|
|
+ .postData("/api/prize/count_by_prize", {
|
|
|
+ prize_id: this.drawOption.prize_id,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.drawnCount = res.data.drawnCount;
|
|
|
+ this.notDrawnCount = res.data.notDrawnCount;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ activitySpacing(length) {
|
|
|
+ return (
|
|
|
+ "letter-spacing: " + (725 - length * 75) / (length - 1) + "px;"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ prizeId: function (newValue) {
|
|
|
+ this.count();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "~@resources/scss/vue/libs/vue-select.scss";
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: "新微軟正黑體";
|
|
|
+ unicode-range: U+7db0, U+78A7, U+7B75;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: bold;
|
|
|
+ src: local(MS Gothic), local(Yu Gothic);
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: "新微軟正黑體";
|
|
|
+ unicode-range: U+7db0, U+78A7, U+7B75;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ src: local(微軟正黑體), local(Microsoft JhengHei);
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: "全真海報體";
|
|
|
+ src: url("/fonts/AVPOPV.woff") format("woff"),
|
|
|
+ url("/fonts/AVPOPV.ttf") format("truetype"),
|
|
|
+ url("/fonts/AVPOPV.eot") format("embedded-opentype");
|
|
|
+}
|
|
|
+
|
|
|
+html,
|
|
|
+body {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ background-color: white;
|
|
|
+ background-image: url("/MAA03.jpg");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: left top;
|
|
|
+ font-family: "Open Sans", Verdana, Geneva, "新微軟正黑體",
|
|
|
+ "Microsoft JhengHei", "微軟正黑體", sans-serif, "全真海報體";
|
|
|
+}
|
|
|
+
|
|
|
+.arrow-right {
|
|
|
+ right: 0;
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow-left {
|
|
|
+ left: 0;
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+body::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.slot {
|
|
|
+ width: 970px;
|
|
|
+ height: 250px;
|
|
|
+ position: absolute;
|
|
|
+ top: 425px;
|
|
|
+ color: black;
|
|
|
+ left: 380px;
|
|
|
+}
|
|
|
+
|
|
|
+.slot-text-dep {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 260px;
|
|
|
+ width: 330px;
|
|
|
+ font-size: 46px;
|
|
|
+ -webkit-text-stroke: 1px white;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.slot-text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 260px;
|
|
|
+ width: 330px;
|
|
|
+ font-size: 80px;
|
|
|
+ -webkit-text-stroke: 1px white;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.prize {
|
|
|
+ position: absolute;
|
|
|
+ left: 390px;
|
|
|
+ top: 280px;
|
|
|
+ width: 950px;
|
|
|
+}
|
|
|
+
|
|
|
+.prize-text {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 120px;
|
|
|
+ -webkit-text-stroke: 2px white;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #966a13;
|
|
|
+ font-size: 73px;
|
|
|
+ text-shadow: 5px 5px 0 #222222, -1px -1px 0 #222222, 1px -1px 0 #222222,
|
|
|
+ -1px 1px 0 #222222, 1px 1px 0 #222222;
|
|
|
+ letter-spacing: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+.activity {
|
|
|
+ position: absolute;
|
|
|
+ left: 1702px;
|
|
|
+ top: 255px;
|
|
|
+ width: 30px;
|
|
|
+ height: 780px;
|
|
|
+}
|
|
|
+
|
|
|
+.activity-text {
|
|
|
+ font-family: "全真海報體";
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-text-stroke: 2px #f4c951;
|
|
|
+ -webkit-writing-mode: vertical-lr;
|
|
|
+ writing-mode: vertical-lr;
|
|
|
+ color: #000;
|
|
|
+ font-size: 75px;
|
|
|
+}
|
|
|
+
|
|
|
+.year {
|
|
|
+ position: absolute;
|
|
|
+ left: 1745px;
|
|
|
+ top: 174px;
|
|
|
+ width: 30px;
|
|
|
+ height: 780px;
|
|
|
+}
|
|
|
+
|
|
|
+.year-text {
|
|
|
+ font-family: '全真海報體';
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-text-stroke: 2px #F4C951;
|
|
|
+ color: #000;
|
|
|
+ font-size: 43px;
|
|
|
+}
|
|
|
+
|
|
|
+.menu {
|
|
|
+ width: 191px;
|
|
|
+ height: 179px;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ position: absolute;
|
|
|
+ right: 67px;
|
|
|
+ top: 12px;
|
|
|
+ border: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.draw {
|
|
|
+ width: 123px;
|
|
|
+ height: 123px;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ position: absolute;
|
|
|
+ right: 330px;
|
|
|
+ top: 288px;
|
|
|
+ border: 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.func-group {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 95px;
|
|
|
+ left: 460px;
|
|
|
+ width: 800px;
|
|
|
+}
|
|
|
+
|
|
|
+.func-btn {
|
|
|
+ background-color: #0000 !important;
|
|
|
+ border-color: #0000 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.func-img {
|
|
|
+ width: 250px;
|
|
|
+}
|
|
|
+
|
|
|
+.counter {
|
|
|
+ position: absolute;
|
|
|
+ top: 75px;
|
|
|
+ left: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.counter-text {
|
|
|
+ font-size: 56px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ -webkit-text-stroke: 1px white;
|
|
|
+}
|
|
|
+
|
|
|
+.draw-img {
|
|
|
+ width: 159px;
|
|
|
+ position: absolute;
|
|
|
+ top: 256px;
|
|
|
+ left: 260px;
|
|
|
+}
|
|
|
+
|
|
|
+.top {
|
|
|
+ float: top;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ float: bottom;
|
|
|
+}
|
|
|
+
|
|
|
+.right {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+</style>
|
