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