commit

04.系统编码/Frontend/src/components/MicrowaveRadiation.vue

@@ -39,6 +39,12 @@
         </div>
         <div class="container panel">
             <div class="toolbar">
+                <div class="times">
+                    <div class="time-item" v-for="(time, index) in times" :key="index" :class="time.name">
+                        <span class="hour">{{time.hour}}</span>
+                        <span class="minute" :class="{'active': currentTime === time.date}" @click="onTimeClick(time)">{{time.minute}}</span>
+                    </div>
+                </div>
                 <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
                 </el-date-picker>
                 <div class="control-btn">
@@ -54,13 +60,21 @@
                     >
                     </el-option>
                 </el-select>
+                <p class="unit">时</p>
+                <div class="refresh-btn">
+                    <img src="/images/refresh.png" />
+                </div>
+                <div class="btns-group">
+                    <span>播放动画</span>
+                    <span>下载动画</span>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-    import { reactive, toRefs } from 'vue';
+    import { onMounted, reactive, toRefs } from 'vue';
     import moment from "moment";
     
     export default {
@@ -78,7 +92,13 @@
                 }, {
                     value: '11',
                     label: '11'
-                }]
+                }],
+                times: [],
+                currentTime: null
+            })
+
+            onMounted(() => {
+                initTimes();
             })
             
             const onTabClick = (name) => {
@@ -93,11 +113,39 @@
                 options.currentElement = region;
             }
 
+            const initTimes = () => {
+                let now = moment();
+                let minute = now.minute();
+                const remainder = minute % 6;
+                if (remainder > 0){
+                    now.minute(minute + (6 - remainder));
+                }
+
+                options.currentTime = now.format('YYYY-MM-DD HH:mm');
+                now.minute(now.minute() - 6);
+
+                for (let i = 0; i < 20 ; i++) {
+                    options.times.push({
+                        hour: now.add(6, 'minute').format('HH时'),
+                        minute: now.format('mm'),
+                        date: now.format('YYYY-MM-DD HH:mm'),
+                        name: 'hour' + now.format('HH')
+                    });
+                }
+            }
+
+            const onTimeClick = (time) => {
+                console.log(time.date)
+                options.currentTime = time.date;
+                console.log(options.currentTime)
+            }
+
             return {
                 ...toRefs(options),
                 onTabClick,
                 onRegionClick,
-                onElementClick
+                onElementClick,
+                onTimeClick
             }
         }
     }

04.系统编码/Frontend/src/index.less

@@ -41,6 +41,38 @@ img {
     color: #666666;
 }
 
+.el-select {
+
+    .el-input {
+
+        .el-input__suffix {
+            right: 0.07rem;
+
+            .el-input__icon {
+                width: 0.1rem;
+
+                svg {
+                    display: none;
+                }
+
+                &::after {
+                    content: '';
+                    width: 0; 
+                    height: 0;
+                    display: block;
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    border-left: 0.05rem solid transparent; 
+                    border-right: 0.05rem solid transparent; 
+                    border-bottom: 0.05rem solid #222222;
+                }
+            }
+        }
+    }
+}
+
 .tabs {
     width: 100%;
     height: 60px;
@@ -134,6 +166,66 @@ img {
             padding: 0.25rem;
             display: flex;
             align-items: center;
+            border-bottom: 1px solid #666666;
+
+            .times {
+                display: flex;
+                margin-right: 0.2rem;
+                align-items: center;
+                border-left: 1px solid #666666;
+                border-right: 1px solid #666666;
+                background-color: #ECF4FF;
+
+                .time-item {
+                    span {
+                        display: block;
+                        position: relative;
+                        color: #498DF0;
+
+                        &.minute {
+                            width: 0.37rem;
+                            line-height: 0.26rem;
+                            text-align: center;
+                            color: #666666;
+                            cursor: pointer;
+
+                            &::before {
+                                content: '';
+                                width: 1px;
+                                height: 0.15rem;
+                                display: block;
+                                position: absolute;
+                                left: -1px;
+                                bottom: 0;
+                                background-color: #666666;
+                            }
+                        }
+
+                        &.active {
+                            color: #ffffff;
+                            background-color: #498DF0;
+
+                            &::before {
+                                display: none;
+                            }
+
+                            &::after {
+                                content: '';
+                                width: 0;
+                                height: 0;
+                                display: block;
+                                margin-left: -0.08rem;
+                                position: absolute;
+                                left: 50%;
+                                bottom: -0.08rem;
+                                border-left: 0.08rem solid transparent; 
+                                border-right: 0.08rem solid transparent; 
+                                border-bottom: 0.08rem solid #498DF0;
+                            }
+                        }
+                    }
+                }
+            }
 
             .date-picker {
                 width: 1.44rem;
@@ -156,6 +248,7 @@ img {
                     color: #498DF0;
                 }
             }
+
             .control-btn {
                 margin: 0 0.15rem;
 
@@ -169,6 +262,71 @@ img {
                     }
                 }
             }
+
+            .el-select {
+                width: 0.57rem;
+                margin-right: 0.03rem;
+
+                .el-input {
+                    line-height: 0.33rem;
+
+                    .el-input__inner {
+                        height: 0.33rem;
+                        padding: 0 0.15rem;
+                        line-height: 0.33rem;
+                        border: 0;
+                        background-color: #ECF4FF;
+                    }
+
+                    .el-input__suffix {
+                        right: 0.07rem;
+
+                        .el-input__icon {
+                            width: 0.1rem;
+                            svg {
+                                display: none;
+                            }
+
+                            &::after {
+                                content: '';
+                                width: 0; 
+                                height: 0;
+                                display: block;
+                                position: absolute;
+                                top: 50%;
+                                right: 0;
+                                transform: translateY(-50%);
+                                border-left: 0.05rem solid transparent; 
+                                border-right: 0.05rem solid transparent; 
+                                border-bottom: 0.05rem solid #222222;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .refresh-btn {
+                width: 0.47rem;
+                margin: 0 0.3rem 0 0.12rem;
+                cursor: pointer;
+            }
+
+            .btns-group {
+                span {
+                    width: 0.88rem;
+                    height: 0.33rem;
+                    line-height: 0.33rem;
+                    display: inline-block;
+                    text-align: center;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    background-color: #ECF4FF;
+
+                    &:last-of-type {
+                        margin-left: 0.06rem;
+                    }
+                }
+            }
         }
     }
 }