commit

3 years ago · 2a7e5e9e4d
11 changed files with 188 additions and 3689 deletions
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
--- a/04.系统编码/Frontend/package.json
+++ b/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"
--- a/04.系统编码/Frontend/public/images/line.png
+++ b/04.系统编码/Frontend/public/images/line.png
--- a/04.系统编码/Frontend/public/images/next.png
+++ b/04.系统编码/Frontend/public/images/next.png
--- a/04.系统编码/Frontend/public/images/prev.png
+++ b/04.系统编码/Frontend/public/images/prev.png
--- a/04.系统编码/Frontend/src/App.vue
+++ b/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}
        }
    }
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/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>
-        <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">T-logP图</div>
-        <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">BP反演产品</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('对流指数对流指数对流指数')" :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>六合</span></el-col>
-                    <el-col :span="8"><span>浦口</span></el-col>
-                    <el-col :span="8"><span>高淳</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 @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('高淳')" :class="{'active': currentRegion === '高淳'}">高淳</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>湿度</span></el-col>
+                    <el-col :span="8"><span @click="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</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
            }
        }
    }
--- a/04.系统编码/Frontend/src/components/SystemManagement.vue
+++ b/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>
--- a/04.系统编码/Frontend/src/index.less
+++ b/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 {
-    height: 100vh;
-    background: url("../images/bg.png") no-repeat top center;
+img {
+    width: 100%;
+    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 {
-            content: '';
+        img {
            width: 100%;
-            height: 4px;
-            display: block;
+            height: 2px;
            position: absolute;
            left: 0;
-            bottom: -10px;
-            // background: linear-gradient(to right, #ffffff 0%,#eeffff 10%, #99fdff 30%, #27fbff 50%, #99fdff 70%, #eeffff 90%,#ffffff 100%);
+            bottom: -9px;
        }

        &.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;
+                    }
+                }
+            }
+        }
    }
 }
--- a/04.系统编码/Frontend/tsconfig.json
+++ b/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"]
 }
--- a/04.系统编码/Frontend/vite.config.ts
+++ b/04.系统编码/Frontend/vite.config.ts