commit

04.系统编码/Frontend/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "element-plus": "^1.2.0-beta.4",
+    "moment": "^2.29.1",
     "typescript": "^4.5.2",
     "vue": "^3.0.4",
     "vue-router": "^4.0.12"

04.系统编码/Frontend/src/App.vue

@@ -1,27 +1,37 @@
 <template>
     <Header v-if="showHeader" />
-  <!-- <login/> -->
+    <router-view />
-  <router-view />
 </template>
 
 <script lang="ts">
-    import { reactive, ref, toRefs, watch } from 'vue';
+    import { onMounted, reactive, ref, toRefs, watch } from 'vue';
     import { useRouter } from 'vue-router';
     import Header from './components/Shared/Header.vue';
-    import Login from "./components/Login.vue";
 
     export default {
         name: 'App',
-        components: {Login, Header },
+        components: {Header},
         setup() {
             const router = useRouter();
             const showHeader = ref(false);
+
+            onMounted(() => {
+                getRem(1920, 100);
+                window.onresize = () => getRem(1920, 100);
+            })
+
             watch(() => router.currentRoute.value.path,
                 (current, prev) => {
                     showHeader.value = current === "/Login" ? false : true;
                 }
             );
 
+            const getRem = (pwidth, prem) => {
+                let html = document.getElementsByTagName("html")[0];
+                let oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+                html.style.fontSize = oWidth / pwidth*prem + "px";
+            }
+
             return {showHeader}
         }
     }

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

@@ -1,50 +1,103 @@
 <template>
     <div class="tabs">
-        <div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}">垂直廓线</div>
+        <div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}">
-        <div class="tab-item" @click="onTabClick('对流指数对流指数对流指数')" :class="{'active': currentTab === '对流指数对流指数对流指数'}">对流指数对流指数对流指数</div>
+            垂直廓线
-        <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">T-logP图</div>
+            <img src="/images/line.png" v-if="currentTab === '垂直廓线'" />
-        <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">BP反演产品</div>
+        </div>
+        <div class="tab-item" @click="onTabClick('对流指数对流指数对流指数')" :class="{'active': currentTab === '对流指数对流指数对流指数'}">
+            对流指数对流指数对流指数
+            <img src="/images/line.png" v-if="currentTab === '对流指数对流指数对流指数'" />
+        </div>
+        <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">
+            T-logP图
+            <img src="/images/line.png" v-if="currentTab === 'T-logP图'" />
+        </div>
+        <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">
+            BP反演产品
+            <img src="/images/line.png" v-if="currentTab === 'BP反演产品'" />
+        </div>
     </div>
     <div class="main">
         <div class="menu panel">
             <div class="menu-item">
                 <h2 class="tip">区域选择</h2>
                 <el-row :gutter="12">
-                    <el-col :span="8"><span class="active">江宁</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('江宁')" :class="{'active': currentRegion === '江宁'}">江宁</span></el-col>
-                    <el-col :span="8"><span>六合</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col>
-                    <el-col :span="8"><span>浦口</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col>
-                    <el-col :span="8"><span>高淳</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('高淳')" :class="{'active': currentRegion === '高淳'}">高淳</span></el-col>
-                    <el-col :span="8"><span>溧水</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</span></el-col>
                 </el-row>
             </div>
             <div class="menu-item">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
-                    <el-col :span="8"><span class="active">温度</span></el-col>
+                    <el-col :span="8"><span @click="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</span></el-col>
-                    <el-col :span="8"><span>湿度</span></el-col>
+                    <el-col :span="8"><span @click="onElementClick('湿度')" :class="{'active': currentElement === '湿度'}">湿度</span></el-col>
                 </el-row>
             </div>
         </div>
-        <div class="container panel"></div>
+        <div class="container panel">
+            <div class="toolbar">
+                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
+                </el-date-picker>
+                <div class="control-btn">
+                    <span><img src="/images/prev.png" /></span>
+                    <span><img src="/images/next.png" /></span>
+                </div>
+                <el-select v-model="currentHour" placeholder="">
+                    <el-option
+                    v-for="item in hours"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    >
+                    </el-option>
+                </el-select>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-    import { reactive, toRefs } from 'vue'
+    import { reactive, toRefs } from 'vue';
+    import moment from "moment";
+    
     export default {
         name: 'MicrowaveRadiation',
         setup() {
             let options = reactive({
-                currentTab: '垂直廓线'
+                currentTab: '垂直廓线',
+                currentRegion: '江宁',
+                currentElement: '温度',
+                date: new Date(),
+                currentHour: '10',
+                hours: [{
+                    value: '10',
+                    label: '10'
+                }, {
+                    value: '11',
+                    label: '11'
+                }]
             })
 
             const onTabClick = (name) => {
                 options.currentTab = name;
             }
 
+            const onRegionClick = (region) => {
+                options.currentRegion = region;
+            }
+
+            const onElementClick = (region) => {
+                options.currentElement = region;
+            }
+
             return {
                 ...toRefs(options),
-                onTabClick
+                onTabClick,
+                onRegionClick,
+                onElementClick
             }
         }
     }

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

@@ -0,0 +1,30 @@
+<template>
+    <div class="tabs">
+    </div>
+    <div class="main">
+        <div class="container system-container panel">
+            
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { reactive, toRefs } from 'vue';
+    
+    export default {
+        name: 'SystemManagement',
+        setup() {
+            
+
+            return {
+                
+            }
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .system-container {
+        width: calc(~"100% - 40px");
+        margin: 0 20px;
+    }
+</style>

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

@@ -3,6 +3,15 @@
     padding: 0;
 }
 
+body {
+    height: 100vh;
+    background: url("../images/bg.png") no-repeat top center;
+}
+
+:root {
+    font-family: '微软雅黑';
+}
+
 a {
     display: block;
     color: #222222;
@@ -13,9 +22,9 @@ ul, li {
     list-style: none;
 }
 
-body {
+img {
-    height: 100vh;
+    width: 100%;
-    background: url("../images/bg.png") no-repeat top center;
+    display: block;
 }
 
 #app {
@@ -26,6 +35,12 @@ body {
   font-size: 16px;
 }
 
+.el-input__inner {
+    font-family: '微软雅黑';
+    font-size: 0.16rem;
+    color: #666666;
+}
+
 .tabs {
     width: 100%;
     height: 60px;
@@ -42,23 +57,16 @@ body {
         cursor: pointer;
         color: #ffffff;
 
-        &::after {
+        img {
-            content: '';
             width: 100%;
-            height: 4px;
+            height: 2px;
-            display: block;
             position: absolute;
             left: 0;
-            bottom: -10px;
+            bottom: -9px;
-            // background: linear-gradient(to right, #ffffff 0%,#eeffff 10%, #99fdff 30%, #27fbff 50%, #99fdff 70%, #eeffff 90%,#ffffff 100%);
         }
 
         &.active {
             color: #23FBFF;
-
-            &::after {
-                background: url("/images/line.png") no-repeat center/cover;
-            }
         }
     }
 }
@@ -121,5 +129,46 @@ body {
     .container {
         width: calc(~"100% - 290px");
         margin-left: 20px;
+
+        .toolbar {
+            padding: 0.25rem;
+            display: flex;
+            align-items: center;
+
+            .date-picker {
+                width: 1.44rem;
+                height: 0.33rem;
+                line-height: normal;
+                cursor: pointer;
+
+                .el-input__inner {
+                    height: 100%;
+                    border: 0;
+                    padding: 0 0 0 0.1rem;
+                    line-height: 1.2;
+                    cursor: pointer;
+                    background-color: #ECF4FF;
+                }
+
+                .el-input__prefix {
+                    left: auto;
+                    right: 0.05rem;
+                    color: #498DF0;
+                }
+            }
+            .control-btn {
+                margin: 0 0.15rem;
+
+                span {
+                    width: 0.08rem;
+                    display: inline-block;
+                    cursor: pointer;
+
+                    &:last-of-type {
+                        margin-left: 0.15rem;
+                    }
+                }
+            }
+        }
     }
 }

04.系统编码/Frontend/tsconfig.json

@@ -12,5 +12,5 @@
       "esModuleInterop": true,
       "lib": ["esnext", "dom"]
     },
-    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"]
 }