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