2

src/pages/components/HeadMenu.vue

@@ -22,12 +22,50 @@
                     <span class="date">{{ times }}</span>
                 </div>
                 <!-- 用户栏 -->
-                <div>
-
+                <div class="userBox">
+                    <span class="userSpan">
+                        <img style="width: 12px;height: 12px;" src="../../assets/icon/user_gray.png" alt="">
+                    </span>
+                    <el-dropdown trigger="click">
+                        <span class="el-dropdown-link">
+                            Admin<el-icon class="el-icon--right" style="color: #BAC0E1;"><arrow-down /></el-icon>
+                        </span>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item>
+                                    <!-- 个人信息 -->
+                                    <div>
+                                        <!-- 头像及登陆信息 -->
+                                        <div
+                                            style="display: flex;justify-content: space-around;align-items: center;height: 80px;border-bottom: 1px solid gray;">
+                                            <div>
+                                                <img style="width: 40px;height: 40px;" src="../../assets/icon/Avatar.png"
+                                                    alt="">
+                                            </div>
+                                            <div>
+                                                <p>Admin</p>
+                                                <p>登陆时间:2000-01-01</p>
+                                            </div>
+                                        </div>
+                                        <div class="logOut" @click="logOut">
+                                            <div style="text-align: center;line-height: 10px;">
+                                                <img style="width: 20px;height: 20px;display: inline-block;"
+                                                    src="../../assets/icon/SignOut.png" alt="">
+                                            </div>
+                                            <div>
+                                                <span>注销</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
                 </div>
                 <!-- 最小化，关闭 -->
                 <div>
-
+                    <span class="moreSet" @click="miniSize">-</span>
+                    <span class="moreSet" @click="closeSize">x</span>
                 </div>
             </div>
         </div>
@@ -36,9 +74,12 @@
 
 <script>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router';
 export default {
     setup() {
-        let times = ref('')
+        let times = ref('')//时间显示
+        let router = useRouter()
+        // 获取日期
         function getDate() {
             const currentDate = new Date();
             const year = currentDate.getFullYear();
@@ -47,6 +88,7 @@ export default {
             const formattedDate = `${year}.${month}.${day}`;
             return formattedDate
         }
+        // 获取时间
         function getTime() {
             let currentDate = new Date();
             let hours = currentDate.getHours().toString().padStart(2, '0');
@@ -55,22 +97,44 @@ export default {
             let formattedTime = `${hours}:${minutes}:${seconds}`;
             times.value = formattedTime
         }
+        // 最小化窗口
+        function miniSize() {
+            // windowEx.Min()
+        }
+        // 关闭窗口
+        function closeSize() {
+            // windowEx.Close()
+        }
+        // 退出登录
+        function logOut(){
+            // windowEx.Size(384,426)
+            localStorage.removeItem("loginStatus")
+            router.push("/login")
+        }
         onMounted(() => {
-            getTime()
+            getTime()//不可注释，首次获取时间
             setInterval(() => {
                 getTime()
-            }, 1000)
+            }, 1000)//一秒给times赋值，使其实时显示
         })
         return {
-            getDate,
-            getTime,
-            times,
+            getDate,//获取日期
+            getTime,//获取时间
+            times,//动态显示时间
+            miniSize,//最小化窗口
+            closeSize,//关闭窗口
+            logOut,//登出
         }
     }
 }
 </script>
 
 <style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
 .bigBox {
     width: 97vw;
     height: 55px;
@@ -103,9 +167,9 @@ export default {
 }
 
 .setBox {
-    width: 300px;
+    width: 400px;
     height: 50px;
-    border: 1px solid white;
+    /* border: 1px solid white; */
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -135,4 +199,56 @@ export default {
     font-size: 14px;
     border-bottom: 1px dotted white;
 }
-</style>
+
+.userSpan {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background-color: #BAC0E1;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 24px;
+}
+
+.el-dropdown-link {
+    background: linear-gradient(0deg, #BAC0E1 50%, #EDF2FF 50%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    font-size: 14px;
+    text-align: center;
+    line-height: 25px;
+}
+
+.moreSet {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background: linear-gradient(to bottom, #BAC0E1, #EDF2FF);
+    /* border-radius: 50%; */
+    text-align: center;
+    line-height: 24px;
+    font-size: 26px;
+    cursor: pointer;
+    margin-right: 5px;
+}
+
+.moreSet:nth-child(1):hover {
+    /* border: 1px black solid; */
+    color: #BAC0E1;
+}
+
+.moreSet:nth-child(2):hover {
+    background: rgb(197, 66, 66);
+    color: red;
+}
+
+.logOut {
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    line-height: 40px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}</style>

src/pages/home/HomePage.vue

@@ -66,5 +66,7 @@ export default {
     background-repeat: no-repeat;
     /* background-position: 20px 20px; */
     background-size: 99% 98%;
+    margin: 0;
+    padding: 0;
 }
 </style>

src/pages/login/LoginNow.vue

@@ -75,7 +75,8 @@ export default {
             //         })
             //     }
             // })
-            router.push('/home')
+            router.push('/home/mission')
+            // windowEx.Size(1920,1040)
         }
         onMounted(() => {
         })
@@ -92,8 +93,8 @@ export default {
 
 <style scoped>
 .bigBox {
-    width: 384px;
-    height: 428px;
+    width: 98vw;
+    height: 97vh;
     margin: 0 auto;
     background-color: rgba(127, 127, 127, 0.5);
     position: relative;
@@ -132,7 +133,7 @@ export default {
     height: 68px;
     position: absolute;
     top: 0px;
-    left: 310px;
+    left: 1420px;
 }
 
 .winBtn {

src/pages/mission/MissionVue.vue

@@ -1,17 +1,200 @@
 <template>
     <div>
-        <h1>这里是任务</h1>
+        <div class="bigBox">
+            <!-- 三按钮盒子 -->
+            <div class="btnBox">
+                <template v-for="(item, index) in btnList">
+                    <span :class="btnSelect == index ? 'result' : 'nowMission'" @click="misChange(item, index)">{{ item.name
+                    }}</span>
+                </template>
+            </div>
+            <!-- 功能盒子 -->
+            <div class="settingBox">
+                <!-- 无检测任务时显示的盒子 -->
+                <div class="noMisBox" v-if="btnSelect == 0">
+                    <img style="width: 220px;height: 220px;" src="../../assets/image/create.png" alt="">
+                    <p style="text-align: center;width: 240px;">当前没有需要检测的任务</p>
+                    <p class="createMisp" @click="createMis">
+                        <img style="width: 20px;height: 20px;" src="../../assets/icon/create_btn.png" alt="">
+                        <span>点击创建任务</span>
+                    </p>
+                </div>
+                <!-- 新建任务盒子 -->
+                <div class="createMisBox" v-if="btnSelect == 1">
+                    <div>
+                        <p>新建任务</p>
+                    </div>
+                    <div class="formBox">
+                        <el-form :inline="true" label-position="top" :model="newMission" class="demo-form-inline"
+                            style="width: 1200px;margin: 0 auto;" label-width="520px">
+                            <el-form-item label="检测任务名称">
+                                <el-input class="bestInput" v-model="newMission.misName" placeholder="Approved by"
+                                    clearable />
+                            </el-form-item>
+                            <el-form-item label="任务编号">
+                                <el-input class="bestInput" v-model="newMission.misNum" placeholder="Approved by"
+                                    clearable />
+                            </el-form-item>
+                            <el-form-item label="检测变电站">
+                                <el-select style="width: 512px;" v-model="newMission.flashId" placeholder="Activity zone"
+                                    clearable>
+                                    <el-option label="Zone one" value="shanghai" />
+                                    <el-option label="Zone two" value="beijing" />
+                                </el-select>
+                                <img style="width: 40px;height: 40px;" src="../../assets/icon/create_misBtn.png" alt="">
+                            </el-form-item>
+                            <el-form-item label="报告模板">
+                                <el-select class="bestInput" v-model="newMission.reportNow" placeholder="Activity zone"
+                                    clearable>
+                                    <el-option label="Zone one" value="shanghai" />
+                                    <el-option label="Zone two" value="beijing" />
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="任务说明">
+                                <el-input style="width: 1136px;" v-model="newMission.misMes"></el-input>
+                            </el-form-item>
+                            <el-form-item label="SCD文件">
+                                <el-button style="width: 954px;">点击选择scd文件</el-button>
+                                <span>正在干嘛干嘛</span>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue';
 export default {
     setup() {
+        let btnList = ref([
+            {
+                name: "当前检测任务",
+                value: "1"
+            },
+            {
+                name: "新建检测任务",
+                value: "2",
+            },
+            {
+                name: "历史任务",
+                value: "3"
+            }
+        ])//按钮列表
+        let newMission = ref({
+            misName: "",
+            misNum: "",
+            flashId: "",
+            reportNow: "",
+            misMes: "",
+            scdFolder: "",
 
-
-        return {}
+        })
+        let btnSelect = ref(0)
+        function misChange(row, num) {
+            btnSelect.value = num
+        }
+        function createMis() {
+            btnSelect.value = 1
+        }
+        return {
+            btnList,//按钮列表
+            btnSelect,//按钮切换class
+            misChange,//按钮切换点击事件
+            newMission,//创建时提交的表单
+            createMis,//点击创建新任务
+        }
     }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.bigBox {
+    width: 99%;
+    height: calc(100vh - 100px);
+    border: 1px solid salmon;
+    /* overflow: hidden; */
+}
+
+.btnBox {
+    width: 99%;
+    height: 50px;
+    border: 1px solid rebeccapurple;
+}
+
+.settingBox {
+    width: 100%;
+    height: calc(100vh - 220px);
+    /* margin-top: -65px; */
+    margin-left: 10px;
+}
+
+.nowMission {
+    display: inline-block;
+    width: 110px;
+    height: 40px;
+    margin-left: 10px;
+    margin-top: 5px;
+    cursor: pointer;
+    background-color: gray;
+    text-align: center;
+    line-height: 40px;
+    font-size: 14px;
+    color: white;
+    border-radius: 8px;
+}
+
+.result {
+    display: inline-block;
+    width: 110px;
+    height: 40px;
+    margin-left: 10px;
+    margin-top: 5px;
+    cursor: pointer;
+    background: linear-gradient(to bottom, #ADD8F9, #5779D7);
+    text-align: center;
+    line-height: 40px;
+    font-size: 14px;
+    color: white;
+    border-radius: 8px;
+}
+
+.noMisBox {
+    width: 200px;
+    height: 200px;
+    margin: 80px auto;
+    text-align: center;
+    line-height: 20px;
+}
+
+.createMisp {
+    width: 240px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    cursor: pointer;
+}
+
+.createMisBox {
+    width: 100%;
+    height: calc(100vh - 150px);
+    text-align: center;
+    margin-top: 20px;
+    /* line-height: calc(100vh - 150px); */
+}
+
+.formBox {
+    width: 1136px;
+    height: 339px;
+    margin: 0 auto;
+    border-bottom: 1px dashed #dbdbdb;
+}
+
+.bestInput {
+    width: 550px;
+    height: 40px;
+    border-radius: 2px 2px 2px 2px;
+}
+</style>