首页

package.json

@@ -23,6 +23,7 @@
         "vue-router": "^4.2.4"
     },
     "devDependencies": {
+        "@iconify-json/ic": "^1.1.13",
         "@unocss/eslint-config": "^0.53.5",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/compiler-sfc": "^3.3.4",

src/layout/index.vue

@@ -1,12 +1,12 @@
 <template>
-    <el-container class="layout-tmp  h-full">
-        <el-header>
+    <el-container class="layout-tmp h-full">
+        <el-header class="layout-header">
             <div class="layout_header">
                 <div class="header_left">
                     <div class="header_info">
                         <el-select v-model="projectId">
-                            <el-option label="项目名称1" value="1"/>
-                            <el-option label="项目名称2" value="2"/>
+                            <el-option label="项目名称1" value="1" />
+                            <el-option label="项目名称2" value="2" />
                         </el-select>
                     </div>
                 </div>
@@ -27,17 +27,16 @@
                 </div>
             </div>
         </el-header>
-        <el-main>
+        <el-main class="layout-main">
             <router-view />
         </el-main>
     </el-container>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import { ref } from 'vue'
 
 const projectId = ref('1')
-
 </script>
 
 <style lang="scss">

src/layout/layout.scss

@@ -1,6 +1,6 @@
 .layout-tmp {
     position: relative;
-    .el-header {
+    .layout-header {
         position: relative;
         padding: 12px 0 24px;
         height: 72px;
@@ -19,13 +19,6 @@
                     display: flex;
                     align-items: center;
                     justify-content: flex-start;
-                    .el-select {
-                        position: relative;
-                        top: 5px;
-                        --el-border-color: rgba(0,255,252,.5);
-                        --el-select-border-color-hover: #23b1d9;
-                        --el-select-input-focus-border-color: #23b1d9;
-                    }
                 }
             }
             .header_center {
@@ -57,7 +50,8 @@
             }
         }
     }
-    .el-main {
+    .layout-main {
         position: relative;
+        padding: 8px 16px 20px;
     }
 }

src/styles/index.scss

@@ -17,6 +17,16 @@ html.dark {
         background-color: #20213D;
         color: #fff;
     }
+    .el-select {
+        position: relative;
+        top: 5px;
+        --el-border-color: rgba(0,255,252,.5);
+        --el-select-border-color-hover: #23b1d9;
+        --el-select-input-focus-border-color: #23b1d9;
+    }
+    .el-select .el-input__inner {
+        color: #09c;
+    }
     .el-popper {
         border: none;
         --el-bg-color-overlay: #1d3850;
@@ -34,4 +44,19 @@ html.dark {
         font-weight: initial;
         color: white;
     }
+    .el-date-editor {
+        --el-input-border-color: rgba(0,255,252,.5);
+        --el-text-color-placeholder: #09c;
+        .el-range-input, .el-range-separator {
+            color: #09c;
+        }
+    }
+    .el-date-range-picker {
+        --el-border-color-lighter: #274c71;
+        --el-datepicker-border-color: #274c71;
+        --el-datepicker-inner-border-color: #274c71;
+    }
+    .el-date-table td.today .el-date-table-cell__text {
+        color: #09c;
+    }
 }

src/views/home/components/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="row_tab">
+        <div class="row_monitors">
+            <div class="col">
+                <div class="item" :class="tab_key === '1' ? 'select' : ''" @click="tabTap('1')">
+                    <span>位移</span>
+                </div>
+            </div>
+            <div class="col">
+                <div class="item" :class="tab_key === '2' ? 'select' : ''" @click="tabTap('2')">
+                    <span>温度</span>
+                </div>
+            </div>
+            <div class="col">
+                <div class="item" :class="tab_key === '3' ? 'select' : ''" @click="tabTap('3')">
+                    <span>应变</span>
+                </div>
+            </div>
+        </div>
+        <div class="search-form">
+            <div class="form-type">
+                <el-select v-model="typeId">
+                    <el-option label="项目名称1" value="1" />
+                    <el-option label="项目名称2" value="2" />
+                </el-select>
+            </div>
+            <div class="form-date">
+                <el-date-picker v-model="dateTime" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+//选项卡
+const tab_key = ref('1')
+const tabTap = (val) => {
+    tab_key.value = val
+}
+
+//类型
+const typeId = ref('1')
+
+const dateTime = ref(null)
+</script>
+
+<style lang="scss">
+@import "./style";
+</style>

src/views/home/components/style.scss

@@ -0,0 +1,57 @@
+.row_tab {
+    position: relative;
+    display: flex;
+    align-items: center;
+    .row_monitors {
+        display: flex;
+        padding: 0 10px;
+        flex-flow: row wrap;
+        row-gap: 8px;
+        .col {
+            position: relative;
+            max-width: 100%;
+            min-height: 1px;
+            .item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 30px;
+                min-width: 80px;
+                padding: 0 8px;
+                transform: skew(30deg);
+                border: 1px solid rgba(0,255,252,.35);
+                cursor: pointer;
+                span {
+                    transform: skew(-30deg);
+                    color: #09c;
+                }
+                &.select {
+                    background-color: #09c;
+                    span {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .search-form {
+        flex: 1;
+        display: flex;
+        position: relative;
+        align-items: center;
+        padding-right: 24px;
+        justify-content: flex-end;
+        .form-type {
+            position: relative;
+            right: 14px;
+            top: -5px;
+        }
+        .form-date {
+            position: relative;
+            width: 260px;
+            .el-date-editor {
+                width: 100%;
+            }
+        }
+    }
+}

src/views/home/index.vue

@@ -1,11 +1,186 @@
 <template>
-
+    <div class="dv-home-box">
+        <div class="dv-home-left" :style="isScreen ? 'width: 100%;' : ''">
+            <div class="content">
+                <div class="top_menu">
+                    <ul class="top_menu_ul">
+                        <li class="top_menu_item">
+                            <span class="top_menu_item_title">数据采集测站</span>
+                        </li>
+                    </ul>
+                    <div class="fullscreen_icon" @click="fullscreenTap">
+                        <span class="anticon-fullscreen">
+                            <svg viewBox="64 64 896 896" focusable="false" data-icon="fullscreen" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+                                <path d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" />
+                            </svg>
+                        </span>
+                    </div>
+                </div>
+                <div class="content_layout">
+                    <el-container>
+                        <el-aside :width="isCollapse ? '200px' : '0px'">
+                            <div class="sider_menu">
+                                <div class="sider_menu_item active">
+                                    <div class="menu_title">
+                                        <i class="i-ic-baseline-remove-red-eye" />
+                                        <span>数据查看</span>
+                                    </div>
+                                </div>
+                                <div class="sider_menu_item">
+                                    <div class="menu_title">
+                                        <i class="i-ic-baseline-view-in-ar" />
+                                        <span>模型数据</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="isCollapse" class="collapse_icon" @click="collapseTap">
+                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABjCAYAAABqpXv5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoNJREFUeNrsmslKA0EQhrvc16hERVxRcUONS1yewqt48eDRk/gCHnwMQbz7ICJ48yYKCl68uIAgBKNjjanAMJn0MlPdpy74CZNAvpnu6ppefhBBWTgIQC02OQCFjCJq0DasDbWNylWptqIHtUVAYRM2hFpHNcbbkzumUQuUFMIWrAG1jBqXZQpHNFPGDajSMmt0UCJ064yBLNGH2kS16g64tDGCWqW+EjZhs6i5NKXENONWUKNp65ZJxoX9k89SJHWik2pcZ9aKrIo8PVEzR/mXxRiqYJJxaWHzqBnuF1tSxq2hhm28RaPRSv3TZ+uVXY1uqnEdNucHgqp1kSPjVLAJeg+Bi5lPQTiKBuEwPMzDPMzDPMzDPIxh3riPmmT6/xfUmQy2xDjL6o1egAjKOwlr5BEGUIB6Rb3LnuwLde+qz5poQQF0d7L+eJesfkJdqWAnqC7Nmz1FfcS+C/eqjlB3OrBHWi6p4g31ndDfxzSknnWa8UJzX6MUuw6n8QeCtvtEbJNMthgspdwXyZkmSJgcU5rNeBO5DvvnF7VL1z86sEODp3mIZeQ1fe7GB3Q92KWo7BmCxpN9Jnx/TU3aEv8hqYJwRc04tVn1A51m3EMtMgGfUOeqqs+1iJ9z1Wd+DuJhHuZhHuZhHsYBu1WsVhinWxUjg5N9fYi4JqyfWEDMomH1LAYS/CDWTplAYj5hPz8DhdOF9WQQNGw1bGeeoOnhYTnNBQPDUOZzajB0J2U6gYeUVqhU3gLI4Lsydk1ARpOXkR8EGBxl2k4XYLKvhZm6gep3AatmqtSdBBaMeXV9V2DJBZjoKAOLlsMarxxY9je2EzDnAlbda/n3N4JL5+afAAMAl2hr012qfrMAAAAASUVORK5CYII=" alt="">
+                            </div>
+                        </el-aside>
+                        <div v-if="!isCollapse" class="open_icon" @click="collapseTap">
+                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAABjCAYAAABqpXv5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoNJREFUeNrsmslKA0EQhrvc16hERVxRcUONS1yewqt48eDRk/gCHnwMQbz7ICJ48yYKCl68uIAgBKNjjanAMJn0MlPdpy74CZNAvpnu6ppefhBBWTgIQC02OQCFjCJq0DasDbWNylWptqIHtUVAYRM2hFpHNcbbkzumUQuUFMIWrAG1jBqXZQpHNFPGDajSMmt0UCJ064yBLNGH2kS16g64tDGCWqW+EjZhs6i5NKXENONWUKNp65ZJxoX9k89SJHWik2pcZ9aKrIo8PVEzR/mXxRiqYJJxaWHzqBnuF1tSxq2hhm28RaPRSv3TZ+uVXY1uqnEdNucHgqp1kSPjVLAJeg+Bi5lPQTiKBuEwPMzDPMzDPMzDPIxh3riPmmT6/xfUmQy2xDjL6o1egAjKOwlr5BEGUIB6Rb3LnuwLde+qz5poQQF0d7L+eJesfkJdqWAnqC7Nmz1FfcS+C/eqjlB3OrBHWi6p4g31ndDfxzSknnWa8UJzX6MUuw6n8QeCtvtEbJNMthgspdwXyZkmSJgcU5rNeBO5DvvnF7VL1z86sEODp3mIZeQ1fe7GB3Q92KWo7BmCxpN9Jnx/TU3aEv8hqYJwRc04tVn1A51m3EMtMgGfUOeqqs+1iJ9z1Wd+DuJhHuZhHuZhHsYBu1WsVhinWxUjg5N9fYi4JqyfWEDMomH1LAYS/CDWTplAYj5hPz8DhdOF9WQQNGw1bGeeoOnhYTnNBQPDUOZzajB0J2U6gYeUVqhU3gLI4Lsydk1ARpOXkR8EGBxl2k4XYLKvhZm6gep3AatmqtSdBBaMeXV9V2DJBZjoKAOLlsMarxxY9je2EzDnAlbda/n3N4JL5+afAAMAl2hr012qfrMAAAAASUVORK5CYII=" alt="">
+                        </div>
+                        <el-main>
+                            <div class="content_top" />
+                            <index-vue />
+                        </el-main>
+                    </el-container>
+                </div>
+                <div class="footer_container">
+                    <div class="footer" />
+                </div>
+            </div>
+        </div>
+        <div class="dv-home-right" :style="isScreen ? 'display: none;' : ''">
+            <div class="top_line" />
+            <div class="row_circle">
+                <el-row>
+                    <el-col :span="6">
+                        <div class="circle_item a">
+                            <div>
+                                <span class="number">31</span>个
+                            </div>
+                        </div>
+                        <div class="circle_item_title">
+                            设备数量
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="circle_item b">
+                            <div>
+                                <span class="number">0</span>/31个
+                            </div>
+                        </div>
+                        <div class="circle_item_title">
+                            网卡欠费
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="circle_item c">
+                            <div>
+                                <span class="number">31</span>个
+                            </div>
+                        </div>
+                        <div class="circle_item_title">
+                            测点数量
+                        </div>
+                    </el-col>
+                    <el-col :span="6">
+                        <div class="circle_item d">
+                            <div>
+                                <span class="number">31</span>个
+                            </div>
+                        </div>
+                        <div class="circle_item_title">
+                            近一周报警
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="message_container">
+                <div class="card_header">
+                    <div class="text_container" :class="msg_type === '1' ? 'selected' : ''" @click="msgTypeTap('1')">
+                        报警消息
+                    </div>
+                    <div class="text_container" :class="msg_type === '2' ? 'selected' : ''" @click="msgTypeTap('2')">
+                        报表消息
+                    </div>
+                </div>
+                <div class="message_content">
+                    <el-scrollbar v-if="msg_type === '1'">
+                        <div class="message-item">
+                            <div class="title_wrapper">
+                                <span class="dot" />
+                                <span class="time">2023-04-09 08:03:36</span>
+                            </div>
+                            <div class="content_wrapper">
+                                <span class="content">阈值报警：2-2-12105(XZC3-4应变)已经解除报警，当前值为：61.8με。</span>
+                            </div>
+                        </div>
+                        <div class="message-item">
+                            <div class="title_wrapper">
+                                <span class="dot" />
+                                <span class="time">2023-04-09 08:03:36</span>
+                            </div>
+                            <div class="content_wrapper">
+                                <span class="content">阈值报警：2-2-12105(XZC3-4应变)已经解除报警，当前值为：61.8με。</span>
+                            </div>
+                        </div>
+                        <div class="message-item">
+                            <div class="title_wrapper">
+                                <span class="dot" />
+                                <span class="time">2023-04-09 08:03:36</span>
+                            </div>
+                            <div class="content_wrapper">
+                                <span class="content">阈值报警：2-2-12105(XZC3-4应变)已经解除报警，当前值为：61.8με。</span>
+                            </div>
+                        </div>
+                    </el-scrollbar>
+                    <div v-if="msg_type === '2'" class="message_empty">
+                        <div class="empty-imag">
+                            <svg class="empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+                                <g transform="translate(0 1)" fill="none" fill-rule="evenodd">
+                                    <ellipse class="empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7" />
+                                    <g class="empty-img-simple-g" fill-rule="nonzero">
+                                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
+                                        <path class="empty-img-simple-path" d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" />
+                                    </g>
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="empty-description">
+                            暂无数据
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import indexVue from './components/index.vue'
 
-</script>
+//全屏
+const isScreen = ref(false)
+const fullscreenTap = () => {
+    isScreen.value = !isScreen.value
+}
 
-<style lang="scss" scoped>
+// 侧边栏
+const isCollapse = ref(true)
+const collapseTap = () => {
+    isCollapse.value = !isCollapse.value
+}
+
+// 报警消息
+const msg_type = ref('1')
+const msgTypeTap = (val) => {
+    msg_type.value = val
+}
+</script>
 
+<style lang="scss">
+@import "./style";
 </style>

yarn.lock

@@ -216,7 +216,14 @@
   resolved "http://47.110.251.215:9000/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@iconify/types@^2.0.0":
+"@iconify-json/ic@^1.1.13":
+  version "1.1.13"
+  resolved "http://47.110.251.215:9000/@iconify-json/ic/-/ic-1.1.13.tgz#f5405e6ec65c1ac5b85e2d1ea1adde9093b199bd"
+  integrity sha512-5i5zal/VRwTrs99iMTnG1Zu97bgX9Mkiu9TzR1U1rHBylUnBW+HkOweoQVEPgQITGG024/lNbZxU+3Aa2xuDww==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify/types@*", "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "http://47.110.251.215:9000/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
   integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==