Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
76b186dd by 华明祺
Options

no message

1 parent 3c1ef169
Inline Side-by-side
Showing 3 changed files with 287 additions and 22 deletions
src/viewsPc/components/homeCalendar.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <el-calendar v-model="currentDate" :range="calendarRange"> 3 <el-calendar ref="calendar" v-model="currentDate">
4 <template #header="{ date }">
5 <div class="father">
6 <span class="textDay">{{ date }}</span>
7 <el-button-group class="son">
8 <el-button size="small" type="info" @click="selectDateCalendar('prev-month')">
9 {{ language == 0 ? '上一月' : 'Last month' }}
10 </el-button>
11 <el-button size="small" type="info" @click="selectDateCalendar('today')">
12 {{ language == 0 ? '今天' : 'Today' }}
13 </el-button>
14 <el-button size="small" type="info" @click="selectDateCalendar('next-month')">
15 {{ language == 0 ? '下一月' : 'Next month' }}
16 </el-button>
17 </el-button-group>
18 </div>
19
20 </template>
4 <template #date-cell="data"> 21 <template #date-cell="data">
5 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)"> 22 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
6 {{ data.data.day.slice(8, 10) }} 23 {{ data.data.day.slice(8, 10) }}
7 </div> 24 </div>
8
9 </template> 25 </template>
10 </el-calendar> 26 </el-calendar>
11 <div class="calendarList"> 27 <div class="calendarList">
...@@ -15,42 +31,69 @@ ...@@ -15,42 +31,69 @@
15 <div class="esp mt5">{{ n.name }}</div> 31 <div class="esp mt5">{{ n.name }}</div>
16 </li> 32 </li>
17 </ul> 33 </ul>
18 <el-empty v-if="schList.length== 0" 34 <el-empty
19 style="--el-empty-padding:0;--el-empty-description-margin-top:0" 35 v-if="schList.length== 0"
20 :image="`/img/order_no.png`" :image-size="200"/> 36 :image="`/img/order_no.png`"
37 :image-size="200" style="--el-empty-padding:0;--el-empty-description-margin-top:0"
38 />
21 </div> 39 </div>
22 </div> 40 </div>
23 </template> 41 </template>
24 42
25 <script setup> 43 <script setup>
26 import {ref} from "vue"; 44 import { onMounted, ref } from 'vue'
27 import {dayjs} from "element-plus"; 45 import { dayjs } from 'element-plus'
28 import {getIndexScheduleList} from "@/apiPc/common"; 46 import { getIndexScheduleList } from '@/apiPc/common'
29 import {useRouter} from "vue-router"; 47 import { useRouter } from 'vue-router'
48 import { useStorage } from '@vueuse/core/index'
49 import { getMaList } from '@/apiPc/match'
50
51 const language = useStorage('language', 0)
52
53 const calendar = ref('')
30 const router = useRouter() 54 const router = useRouter()
31 const currentDate = ref(new Date()) 55 const currentDate = ref()
32 const calendarRange = ref([dayjs('2024-07-17').toDate(), dayjs('2024-07-17').toDate()])
33 const schList = ref([]) 56 const schList = ref([])
34 const loading = ref(false) 57 const loading = ref(false)
35 const query = ref({ 58 const query = ref({
36 // currentDate:dayjs().format('YYYY-MM-DD') 59 currentDate: dayjs().format('YYYY-MM-DD')
37 currentDate: '2024-07-17'
38 }) 60 })
39 getScheduleList() 61
40 function getScheduleList() { 62 onMounted(async() => {
63 await handelGetMatch()
64 await getScheduleList()
65 })
66
67 async function handelGetMatch() {
68 const res = await getMaList({
69 type: '-1',
70 progressStatusCode: '-1',
71 pageNum: 1,
72 pageSize: 10
73 })
74 if (res.rows.length > 0) {
75 query.value.currentDate = res.rows[0].beginTime
76 currentDate.value = res.rows[0].beginTime
77 }
78 }
79
80
81 async function getScheduleList() {
41 loading.value = true 82 loading.value = true
42 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD') 83 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
43 getIndexScheduleList(query.value).then(res=>{ 84 await getIndexScheduleList(query.value).then(res => {
44 loading.value = false 85 loading.value = false
45 schList.value = res.data 86 schList.value = res.data
46 }) 87 })
47 } 88 }
89
48 function selectDate(date) { 90 function selectDate(date) {
49 console.log(dayjs(date).toDate()) 91 console.log(dayjs(date).toDate())
50 console.log(query.value.currentDate) 92 console.log(query.value.currentDate)
51 query.value.currentDate = dayjs(date).toDate() 93 query.value.currentDate = dayjs(date).toDate()
52 getScheduleList() 94 getScheduleList()
53 } 95 }
96
54 function goMatch(n) { 97 function goMatch(n) {
55 router.push({ 98 router.push({
56 name: 'matchDetail', 99 name: 'matchDetail',
...@@ -62,9 +105,20 @@ function goMatch(n) { ...@@ -62,9 +105,20 @@ function goMatch(n) {
62 } 105 }
63 }) 106 })
64 } 107 }
108
109 const selectDateCalendar = (val) => {
110 if (!calendar.value) return
111 calendar.value.selectDate(val)
112 if (val == 'today') {
113 query.value.currentDate = dayjs().toDate()
114 getScheduleList()
115 }
116 }
117
118
65 </script> 119 </script>
66 120
67 <style scoped lang="scss"> 121 <style lang="scss" scoped>
68 .el-calendar { 122 .el-calendar {
69 --el-calendar-border: none; 123 --el-calendar-border: none;
70 --el-calendar-cell-width: 40px; 124 --el-calendar-cell-width: 40px;
...@@ -99,6 +153,7 @@ function goMatch(n) { ...@@ -99,6 +153,7 @@ function goMatch(n) {
99 153
100 .primaryDate { 154 .primaryDate {
101 color: #fff; 155 color: #fff;
156 //background: linear-gradient(90deg, #8623FC, #453DEA);
102 background: #000; 157 background: #000;
103 } 158 }
104 159
...@@ -119,7 +174,8 @@ function goMatch(n) { ...@@ -119,7 +174,8 @@ function goMatch(n) {
119 height: 225px; 174 height: 225px;
120 175
121 ul { 176 ul {
122 li {cursor: pointer; 177 li {
178 cursor: pointer;
123 background: #F6F9FE; 179 background: #F6F9FE;
124 margin: 7px 0 7px 20px; 180 margin: 7px 0 7px 20px;
125 position: relative; 181 position: relative;
...@@ -129,6 +185,7 @@ function goMatch(n) { ...@@ -129,6 +185,7 @@ function goMatch(n) {
129 font-size: 15px; 185 font-size: 15px;
130 186
131 label { 187 label {
188 //color: #453DEA;
132 color: #000; 189 color: #000;
133 margin-right: 15px; 190 margin-right: 15px;
134 191
...@@ -150,6 +207,7 @@ function goMatch(n) { ...@@ -150,6 +207,7 @@ function goMatch(n) {
150 207
151 li::before { 208 li::before {
152 content: ''; 209 content: '';
210 //background: linear-gradient(0deg, #8623FC, #453DEA);
153 background: #000; 211 background: #000;
154 border-radius: 50%; 212 border-radius: 50%;
155 width: 8px; 213 width: 8px;
...@@ -174,6 +232,7 @@ function goMatch(n) { ...@@ -174,6 +232,7 @@ function goMatch(n) {
174 232
175 li:hover { 233 li:hover {
176 color: #fff; 234 color: #fff;
235 //background: linear-gradient(-90deg, #8623FC, #453DEA);
177 background: #000; 236 background: #000;
178 237
179 label { 238 label {
...@@ -183,4 +242,23 @@ function goMatch(n) { ...@@ -183,4 +242,23 @@ function goMatch(n) {
183 } 242 }
184 } 243 }
185 244
245 .father {
246 text-align: center;
247 position: relative;
248 width: 100%;
249 }
250
251 .son {
252 position: absolute;
253 right: 0;
254 //width: 230px;
255 }
256
257 //.textDay {
258 // font-weight: bold;
259 // background: linear-gradient(to right, #8623FC, #453DEA); /* 定义渐变方向和颜色 */
260 // -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
261 // background-clip: text; /* 标准语法 */
262 // -webkit-text-fill-color: transparent; /* 文字颜色透明 */
263 //}
186 </style> 264 </style>
......
src/viewsPc/components/homeCalendar_old.vue 0 → 100644
1 <template>
2 <div>
3 <el-calendar v-model="currentDate" :range="calendarRange">
4 <template #date-cell="data">
5 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
6 {{ data.data.day.slice(8, 10) }}
7 </div>
8
9 </template>
10 </el-calendar>
11 <div class="calendarList">
12 <ul v-loading="loading">
13 <li v-for="n in schList" :key="n.id" @click="goMatch(n)">
14 <label>{{ n.timeStr }}</label>
15 <div class="esp mt5">{{ n.name }}</div>
16 </li>
17 </ul>
18 <el-empty v-if="schList.length== 0"
19 style="--el-empty-padding:0;--el-empty-description-margin-top:0"
20 :image="`/img/order_no.png`" :image-size="200"/>
21 </div>
22 </div>
23 </template>
24
25 <script setup>
26 import {ref} from "vue";
27 import {dayjs} from "element-plus";
28 import {getIndexScheduleList} from "@/apiPc/common";
29 import {useRouter} from "vue-router";
30 const router = useRouter()
31 const currentDate = ref(new Date())
32 const calendarRange = ref([dayjs('2024-07-21').toDate(), dayjs('2024-07-21').toDate()])
33 const schList = ref([])
34 const loading = ref(false)
35 const query = ref({
36 // currentDate:dayjs().format('YYYY-MM-DD')
37 currentDate: '2024-07-21'
38 })
39 getScheduleList()
40 function getScheduleList() {
41 loading.value = true
42 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
43 getIndexScheduleList(query.value).then(res=>{
44 loading.value = false
45 schList.value = res.data
46 })
47 }
48 function selectDate(date) {
49 console.log(dayjs(date).toDate())
50 console.log(query.value.currentDate)
51 query.value.currentDate = dayjs(date).toDate()
52 getScheduleList()
53 }
54 function goMatch(n) {
55 router.push({
56 name: 'matchDetail',
57 params: {
58 id: n.cptId
59 },
60 query: {
61 matchId: n.cptId
62 }
63 })
64 }
65 </script>
66
67 <style scoped lang="scss">
68 .el-calendar {
69 --el-calendar-border: none;
70 --el-calendar-cell-width: 40px;
71 text-align: center;
72 --el-text-color-regular: #8E8D94;
73
74 :deep(.el-calendar__header) {
75 justify-content: center;
76 padding: 0 0 10px
77 }
78
79 :deep(.el-calendar__body) {
80 border: 1px solid #F0F0F0;
81 padding: 0
82 }
83
84 :deep(.el-calendar-table .el-calendar-day) {
85 padding: 1px;
86 }
87
88 :deep(.el-calendar-table td.is-selected) {
89 background: transparent;
90 }
91
92 :deep(.el-calendar__button-group) {
93 display: none;
94 }
95
96 :deep(.el-calendar-table thead th) {
97 padding: 5px 0 0
98 }
99
100 .primaryDate {
101 color: #fff;
102 background: #000;
103 }
104
105 .date {
106 margin: auto;
107 border-radius: 50%;
108 width: 30px;
109 height: 30px;
110 line-height: 30px;
111 font-weight: bold;
112 }
113 }
114
115 .calendarList {
116 border: 1px solid #F0F0F0;
117 padding: 12px 20px;
118 overflow: auto;
119 height: 225px;
120
121 ul {
122 li {cursor: pointer;
123 background: #F6F9FE;
124 margin: 7px 0 7px 20px;
125 position: relative;
126 padding: 13px;
127 border-radius: 10px;
128 font-weight: 500;
129 font-size: 15px;
130
131 label {
132 color: #000;
133 margin-right: 15px;
134
135 &::before {
136 content: '';
137 background: #fff;
138 left: -17px;
139 top: 0px;
140 bottom: 0;
141 margin: auto;
142 border-radius: 50%;
143 width: 2px;
144 height: 2px;
145 position: absolute;
146 z-index: 1
147 }
148 }
149 }
150
151 li::before {
152 content: '';
153 background: #000;
154 border-radius: 50%;
155 width: 8px;
156 height: 8px;
157 position: absolute;
158 left: -20px;
159 top: 0;
160 bottom: 0;
161 margin: auto;
162 z-index: 1;
163 }
164
165 li::after {
166 content: '';
167 left: -16px;
168 width: 1px;
169 height: 100%;
170 background: #EBEBEB;
171 position: absolute;
172 top: 20px
173 }
174
175 li:hover {
176 color: #fff;
177 background: #000;
178
179 label {
180 color: #fff;
181 }
182 }
183 }
184 }
185
186 </style>
vite.config.js
...@@ -70,13 +70,14 @@ export default defineConfig(({mode, command}) => { ...@@ -70,13 +70,14 @@ export default defineConfig(({mode, command}) => {
70 rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '') 70 rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '')
71 }, 71 },
72 '/dev-api/ztx-match': { 72 '/dev-api/ztx-match': {
73 // target: 'http://192.168.1.118:8083', 73 target: 'http://192.168.1.118:8083',
74 target: 'https://wdsfwuxicenter.com/stage-api/', 74 // target: 'https://wdsfwuxicenter.com/stage-api/',
75 changeOrigin: true, 75 changeOrigin: true,
76 rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '') 76 rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '')
77 }, 77 },
78 '/dev-api/ztx-webSite': { 78 '/dev-api/ztx-webSite': {
79 target: 'http://192.168.1.118:8082/', 79 target: 'http://192.168.1.118:8082/',
80 // target: 'https://jijin.wtwuxicenter.com/stage-api',
80 // target: 'https://ces.2025wtcwuxi.com/stage-api/', 81 // target: 'https://ces.2025wtcwuxi.com/stage-api/',
81 changeOrigin: true, 82 changeOrigin: true,
82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 83 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
...@@ -84,7 +85,7 @@ export default defineConfig(({mode, command}) => { ...@@ -84,7 +85,7 @@ export default defineConfig(({mode, command}) => {
84 '/dev-api': { 85 '/dev-api': {
85 target: 'http://192.168.1.118:8082/', 86 target: 'http://192.168.1.118:8082/',
86 // target: 'http://192.168.1.131:8081/', 87 // target: 'http://192.168.1.131:8081/',
87 // target: 'https://ces.2025wtcwuxi.com/stage-api/', 88 // target: 'https://jijin.wtwuxicenter.com/stage-api',
88 // target: 'http://124.70.181.90:1880/stage-api', 89 // target: 'http://124.70.181.90:1880/stage-api',
89 // target: 'https://sys.2025wtcwuxi.com/stage-api/', 90 // target: 'https://sys.2025wtcwuxi.com/stage-api/',
90 changeOrigin: true, 91 changeOrigin: true,
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!