From a76b5c8223a2477328e3c9c5575e1af5ba0d9c62 Mon Sep 17 00:00:00 2001
From: hehongxing <hehongxing@pc.com>
Date: Tue, 30 Nov 2021 15:30:12 +0800
Subject: [PATCH] commit

---
 .../Frontend/public/images/refresh.png        | Bin 0 -> 1379 bytes
 .../src/components/MicrowaveRadiation.vue     |  54 +++++-
 04.系统编码/Frontend/src/index.less       | 158 ++++++++++++++++++
 3 files changed, 209 insertions(+), 3 deletions(-)
 create mode 100644 04.系统编码/Frontend/public/images/refresh.png

diff --git a/04.系统编码/Frontend/public/images/refresh.png b/04.系统编码/Frontend/public/images/refresh.png
new file mode 100644
index 0000000000000000000000000000000000000000..a613249c4711c001cfb52009a4f11e2405947573
GIT binary patch
literal 1379
zcmV-p1)TbcP)<h;3K|Lk000e1NJLTq003S9002S=1^@s6-o{~$000FlNkl<ZcwX(C
zKWr0c6u{qijveBVgbaiw3<Z`p0!3_L!TeKVmZVb2P*KFtvQVidiGT&gzydVpk4Oe+
zrB<p~QY7r9NfZ$7lujjT6gmY4SO|md1UreH^M~GN&ORGQvdi83PPy+UUvl@od%ySY
zegED)24%;w8}Uw$N9zU71B^i@0BkG2Mx9qhAi+7z0%I{<&qb%tx6YdHV&;?Xk>n2=
z<F~77R$WvJfkck8(9}@N9pk0~_~1z55isb(e;oP3%a3*V*seAYY^^V`O)bJ)eeJt7
z4lfpUn4Zt@C(pBah#VplL)*T@pW+X}aQsIAcB{b)x#7M>ZQss1S3|Q}`F~%nLnxBc
zSF_*&;O8a=TW>Rr>2)6V424}g(Fh8<)!6gxA^eMfr0{2AUFU~bPdFZ8z=kor4EFd{
zT(O6{Xf-^U7GZ}2zs!Q+cnp9YRNihQ@efTGy`KNYg5g9Qhm7NAn^i|@GkffC`^T0<
zxIyq7fBiYoVzXG)JQ6s5GbunQ@WlS0z!L*E#3}F!JPm>A`3&5Tt-`MD9=O!&mo|`a
zoyQvrqnQ!@wf;sa@LdP~N;Cz3FRT|{FIn(i2Oh`J7slVg%eOhH@LdNUX*&VFBf!tS
z*5OSu2XB^&UTAk$n_A-#`Dd*}%-;4oxZdArw`kG6RPYaG)`ap1!70bxlUreTo5%LY
zkpdoH^^4;vc=1-ZUBOxfP%RQl0e@jU1#_>9BMSr0-gf&v&1{H;MIF+a;$QqefQR4H
ztW}YN#|g}>sg;7Z2>VQ+f#mfzLoa_0gnqrBCd^2Q@#b;#XWKQQEcJe_Z0J(Jn`e$^
z0$ZSOe|@cC_>-=80(9x%sX8*VrObw>4lk9SgKRzCthfyDXMbN7vsRhVUFq>Sl%0FE
z4wx&nqgg9BAx_@R=bseMs<@eaR3qEtD>1qEbOoZ%GSJqn!RR+MoxK7N04K(l3bSXb
z@Tb6=)=ltjP~fYGlU7|KBm60kR~~Pb|JL4)^7z`BS#pO0ZwbcQ8&TkEXJ*MAt^j}f
z=OtKN&hI$=`fU^GY;hwixdJ>+&2fcrUwfTnK7Mco_)1=fnO(T|O1as*(Te4!oj{d?
zzd5x6kLQc~Z&ZrA8hkl)T&n%;JK7H;Oy494TWsnq15~gQbjm$X!{e_;(=fA;6{l@Y
zOc<WxAYU?Y5_HV#c`&nD;QV!0J)G>?LcyIrp$R)t>`cu^*KV)an4mf^feJ&6Ij;x3
zee_fl*~UA$$DjUX85Rjs^{O$ZjBP-2@L!E4OOlAH0b}Pim|`-}?I+LcAqO9xOv97s
z`OeHZs58h!N7}5xfjwU6+T*p;t{b*Z4!%-~^wAC<40Jb00U%2#Ie1i5!Izk(?RNN5
zJl=S{E5VnsWFRBlNCjUWc5qlXcFGw`#daG*I(P#<Rx#SqqB&xH-frmFz9Ya>DC#sB
z3cMtXDDVorBm$DeDvy^9zGoz!V2rh>(pdIe!YGZ!IZvu$aQ5>qNGK@=XOurY{JB>j
z3i|1GB?uLEim0C^(%Gl~Wxb;Op(x_4K@7u<Tc+(Y3}JXXh8aBvfzlGUKBf=%`aP=J
zs<oy;=$E5ueI>(-C2kE7J>htS0qe!{qa8j`)EReas6PU>R%LmuVMmHz8DdfA$MYHC
z;2d~#a<Ekt&Mqlwi^ZKehY*Gxd5^sLB#TiDgAf*THnjVwmT<msKlCwx0O!!DjPU;)
l;REbh4iM9Ih?E!Ze-Cc>U%)pVM!o<5002ovPDHLkV1n`pnYaJ|

literal 0
HcmV?d00001

diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index a198718..127dd2c 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/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,9 +92,15 @@
                 }, {
                     value: '11',
                     label: '11'
-                }]
+                }],
+                times: [],
+                currentTime: null
             })
 
+            onMounted(() => {
+                initTimes();
+            })
+            
             const onTabClick = (name) => {
                 options.currentTab = 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
             }
         }
     }
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 8db2cae..3be9362 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/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;
+                    }
+                }
+            }
         }
     }
 }
\ No newline at end of file