Tue Jan 2 03:42:00 CST 2024 inscode

src/App.vue

@@ -5,12 +5,13 @@ import SearchGrade from './components/SearchGrade.vue'
 import Draw from './components/draw/Draw.vue'
 import Commit from './components/commit/Commit.vue'
 import Drag from  './components/drag/Drag.vue'
+import Visual from  './components/visual/index.vue'
 import { reactive, onBeforeMount,onMounted } from 'vue';
 import html2canvas from 'html2canvas';
 
 // state
 const state = reactive({
-  current: '拖拽'
+  current: 'Visual'
 })
 
 /** 下载图片 */
@@ -85,6 +86,9 @@ onBeforeMount(() => {
     else if(data['type'] = 'grag'){
       state.current = '拖拽'
     }
+    else if(data['type'] = 'Visual'){
+      state.current = 'Visual'
+    }
   }
 })
 </script>
@@ -98,6 +102,7 @@ onBeforeMount(() => {
                 <a-radio value="抽奖">随机抽奖</a-radio>
                 <a-radio value="评论">csdn分析评论</a-radio>
                  <a-radio value="拖拽">拼图</a-radio>
+                 <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
             </a-radio-group>
             <a-button type="primary" @click="shotAction">
                 截图
@@ -108,6 +113,7 @@ onBeforeMount(() => {
             <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
             <Commit v-else-if="state.current === '评论'" />
             <Drag v-else-if="state.current === '拖拽'"/>
+            <Visual v-else-if="state.current === 'Visual'"/>
             <Draw v-else />
         </div>
     </div>

src/components/draw/Draw.vue

+<template>
+    <div>
+        <!-- 抽奖用户 列表 -->
+        <div v-for="item in state.list" :key="item.id" style="display: inline-block;padding:20px">
+            <div style="display: inline-block;text-align: center;">
+                <div>
+                    {{ item.name }}
+                </div>
+                <div>
+                    <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
+                        <template #icon>
+                            <img :src="item.img">
+                        </template>
+                    </a-avatar>
+                </div>
+            </div>
+        </div>
+        <!-- 抽奖用户 随机旋转的用户-->
+        <!-- 0.5s 游戏开始不断轮播用户头像  -->
+        <div style="display: flex;justify-content: center;align-items: center;margin-top:50px"
+            v-if="state.gameStatus !== 'init'">
+            <div style="display: inline-block;text-align: center;">
+
+                <a-card hoverable style="width: 240px">
+                    <template #cover>
+                        <img :src="state.currentPerson?.img">
+                    </template>
+                    <a-card-meta :title="state.currentPerson?.name">
+                        <template #description>抽奖中 角色id:{{ state.currentPerson?.id }} </template>
+                    </a-card-meta>
+                </a-card>
+
+            </div>
+        </div>
+        <!-- 中奖结束弹框 -->
+        <a-modal v-model:open="state.openModal" title="恭喜你中奖" :footer="null" @afterClose="afterCloseModal">
+            <p>中奖用户名称：{{ state.currentPerson?.name }}</p>
+            <p>中奖用户id：{{ state.currentPerson?.id }}</p>
+            <p><img :src="state.currentPerson?.img"></p>
+        </a-modal>
+
+        <!-- 开始游戏按钮 -->
+        <div style="position:absolute;bottom:50px;text-align: center;width:100%">
+            <a-button type="primary" @click="startGameBtn" v-if="state.gameStatus === 'init'">开始抽奖</a-button>
+            <a-button type="primary" disabled v-if="state.gameStatus === 'run'">进行中</a-button>
+            <a-button type="primary" @click="restartGameBtn" v-if="state.gameStatus === 'end'">重新开始</a-button>
+        </div>
+
+
+    </div>
+</template>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+
+const state = reactive({
+    list: [],
+    currentPerson: {
+        name: '',
+        img: '',
+        id: ''
+    },
+    gameStatus: 'init',// init 初始化 状态  run 运行 状态 end 结束状态
+    count: 100,
+    displayCount: 0,
+    openModal: false
+})
+
+// mock 用户数据
+const mockUserData = (n) => {
+    let data = []
+    for (let i = 0; i < n; ++i) {
+        data.push({
+            img: `https://t.mwm.moe/pc/?ts=${i+9}`,// 随机头像
+            name: '角色' + i,
+            id: i
+        })
+    }
+    state.list = data
+    console.log(state.list)
+}
+
+// 延时 delay
+const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
+
+// 开始抽奖
+const startGameBtn = async () => {
+
+    let n = state.count
+    while (n--) {
+        state.displayCount = n
+        await sleep(20)
+        const max = state.list.length - 1;
+        const min = 0;
+        const randomIndex = Math.floor(Math.random() * (max - min)) + min;
+        state.currentPerson = state.list[randomIndex]
+        console.log('randomIndex', randomIndex)
+        console.log('state.currentPerson', state.currentPerson)
+        state.gameStatus = 'run'
+    }
+    state.gameStatus = 'end'
+    state.openModal = true
+}
+
+const afterCloseModal = () => {
+    state.openModal = false
+}
+
+// 重新开始抽奖
+const restartGameBtn = () => {
+    startGameBtn()
+}
+onMounted(() => {
+    mockUserData(13)
+})
+</script>

src/components/visual/commit/data.js

+const commitCountJson={
+  "2023-04-16": 1,
+  "2023-07-29": 2,
+  "2023-06-19": 1,
+  "2023-08-06": 11,
+  "2023-05-13": 1,
+  "2023-10-23": 3,
+  "2023-05-31": 5,
+  "2023-05-10": 3,
+  "2023-04-30": 3,
+  "2023-04-10": 2,
+  "2023-08-18": 6,
+  "2023-05-15": 2,
+  "2023-07-16": 2,
+  "2023-08-19": 2,
+  "2023-06-30": 26,
+  "2023-06-14": 1,
+  "2023-10-25": 13,
+  "2023-10-18": 3,
+  "2023-07-20": 1,
+  "2023-07-07": 2,
+  "2023-08-05": 1,
+  "2023-07-02": 14,
+  "2023-10-11": 8,
+  "2023-07-05": 3,
+  "2023-12-11": 6,
+  "2023-10-26": 6,
+  "2023-10-20": 7,
+  "2023-12-27": 2,
+  "2023-11-13": 3,
+  "2023-10-24": 2,
+  "2023-10-09": 10,
+  "2023-09-05": 4,
+  "2023-07-15": 4,
+  "2023-12-10": 1,
+  "2023-12-04": 1,
+  "2023-06-18": 3,
+  "2023-04-09": 2,
+  "2023-04-06": 1,
+  "2023-06-25": 2,
+  "2023-07-21": 5,
+  "2023-03-31": 7,
+  "2023-12-23": 1,
+  "2023-07-30": 9,
+  "2023-01-02": 2,
+  "2023-11-03": 1,
+  "2023-03-20": 2,
+  "2023-02-19": 1,
+  "2023-09-04": 1,
+  "2023-10-10": 5,
+  "2023-07-28": 3,
+  "2023-09-14": 4,
+  "2023-06-06": 4,
+  "2023-05-09": 2,
+  "2023-10-28": 4,
+  "2023-07-25": 1,
+  "2023-07-23": 2,
+  "2023-04-12": 1,
+  "2023-11-05": 1,
+  "2023-10-19": 1,
+  "2023-08-07": 1,
+  "2023-09-07": 2,
+  "2023-07-12": 1,
+  "2023-06-15": 1,
+  "2023-12-09": 4,
+  "2023-07-24": 3,
+  "2023-07-10": 2,
+  "2023-12-17": 1,
+  "2023-01-08": 2,
+  "2023-02-15": 1,
+  "2023-02-11": 1,
+  "2023-08-30": 2,
+  "2023-10-13": 1,
+  "2023-11-23": 2,
+  "2023-09-20": 1,
+  "2023-06-05": 1,
+  "2023-09-15": 1,
+  "2023-09-16": 1,
+  "2023-04-28": 2,
+  "2023-07-22": 3,
+  "2023-11-25": 6,
+  "2023-08-14": 2,
+  "2023-07-17": 6,
+  "2023-04-13": 2,
+  "2023-10-30": 3,
+  "2023-07-19": 1,
+  "2023-07-31": 2,
+  "2023-02-12": 2,
+  "2023-08-21": 4,
+  "2023-09-06": 2,
+  "2023-07-03": 1,
+  "2023-07-04": 3,
+  "2023-12-19": 1,
+  "2023-05-14": 9,
+  "2023-02-13": 1,
+  "2023-10-22": 3,
+  "2023-07-01": 7,
+  "2023-06-28": 8,
+  "2023-10-05": 1,
+  "2023-08-20": 1,
+  "2023-07-18": 3,
+  "2023-10-12": 2,
+  "2023-11-08": 1,
+  "2023-06-22": 1,
+  "2023-11-04": 5,
+  "2023-10-27": 2,
+  "2023-06-20": 3,
+  "2023-10-07": 4,
+  "2023-08-03": 1,
+  "2023-04-01": 1,
+  "2023-12-05": 2,
+  "2023-11-26": 2
+}
+
+export const getCommitData=()=>{
+    const commitArray=[]
+    Object.keys(commitCountJson).forEach(key=>{
+        commitArray.push({
+            date:key,
+            count:commitCountJson[key]
+        })
+    })
+    commitArray.sort((a,b)=>new Date(a.date)-new Date(b.date))
+    return commitArray
+}
\ No newline at end of file

src/components/visual/commit/index.vue

+<template>
+    <div id="lineChartId" style="width:100vw;height:300px;margin: 0 auto"></div>
+</template>
+<script setup>
+    import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
+import {getCommitData} from './data.js'
+
+const state = reactive({
+    exportLoading: false,
+    echartInstance: undefined,
+    commitConfig:[],
+    lineData:[]
+})
+
+function renderEchartLine() {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance=document.getElementById('lineChartId')
+    if(domInstance){
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else{
+        return 
+    }
+    const myChart = echarts.init(domInstance);
+    const seriesItem=    {
+      data: state.commitConfig.map(item=>item.count),
+      type: 'line',
+      smooth: true
+    }
+    const labelData=state.commitConfig.map(item=>item.date)
+    const seriesData=[seriesItem]
+
+    const option = {
+        title: {
+            text: 'git code git commit次数',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        dataZoom: [
+            {
+                id: 'dataZoomX',
+                type: 'slider',
+                xAxisIndex: [0],
+                filterMode: 'filter'
+            }
+        ],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        legend: {
+            
+        },
+        xAxis: {
+            type: 'category',
+            data: labelData,
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            x: 60,
+            x2: 100
+        },
+        series: seriesData
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+const getCommitConfig= ()=>{
+     state.commitConfig=getCommitData()
+    renderEchartLine()
+}
+
+onMounted(()=>{
+    getCommitConfig()
+})
+</script>
\ No newline at end of file

src/components/visual/index.vue

+<script setup>
+    import {reactive} from 'vue'
+    import CommitLine from './commit/index.vue'
+    const state=reactive({
+        title:''
+    })
+</script>
+<template>
+    <div>
+        <div>
+            {{state.title}}
+            <div>
+                <CommitLine />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file