111

src/icons/svg/code.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#D1D2DC;}
+</style>
+<g>
+	<path class="st0" d="M12.35,14.82h-8.7C1.63,14.82,0,13.18,0,11.17V5.78c0-2.01,1.63-3.65,3.65-3.65h8.7
+		c2.01,0,3.65,1.63,3.65,3.65v5.39C16,13.18,14.37,14.82,12.35,14.82z M5.9,6.35H2.1V7.2H5.9V6.35z M7.59,9.32H2.1v0.84h5.48V9.32z
+		 M13.05,6.99c0-0.82-0.66-1.48-1.47-1.48c-0.81,0-1.47,0.66-1.47,1.48c0,0.51,0.25,0.95,0.64,1.22c-0.87,0.34-1.48,1.18-1.48,2.16
+		h4.63c0-0.99-0.62-1.83-1.48-2.16C12.8,7.94,13.05,7.5,13.05,6.99z"/>
+</g>
+</svg>

src/icons/svg/password.svg

@@ -1 +1,19 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D1D2DC;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M14.54,7.58c0-0.87-0.55-1.63-1.34-1.88c-0.31-0.1-0.63-0.11-0.95-0.1c-0.14,0.01-0.22,0.01-0.21-0.2
+	c0.04-0.53,0.05-1.06,0.02-1.6c-0.07-1.75-1.3-3.22-3.02-3.68C7.4-0.31,5.65,0.41,4.71,1.86C3.96,3.02,4.06,4.29,4.12,5.6
+	c-0.22,0-0.42-0.01-0.62,0c-1.04,0.03-1.87,0.85-1.88,1.9c-0.01,2.19-0.01,4.37,0,6.55c0.01,1.06,0.83,1.93,1.89,1.94
+	c3.06,0.02,6.13,0.02,9.19,0c1.02-0.01,1.83-0.87,1.84-1.89C14.55,11.93,14.55,9.75,14.54,7.58z M10.19,5.61
+	C9.5,5.59,8.8,5.6,8.11,5.6c-0.71,0-1.41-0.01-2.12,0.01C5.72,5.61,5.67,5.52,5.67,5.27c0.02-0.43,0-0.85,0.01-1.28
+	C5.69,2.66,6.74,1.61,8.06,1.6c1.32-0.01,2.38,1.03,2.41,2.37c0.01,0.45-0.01,0.91,0.01,1.36C10.49,5.57,10.41,5.61,10.19,5.61
+	L10.19,5.61z"/>
+<path class="st1" d="M8.74,10.85C8.64,10.93,8.61,11,8.61,11.12c0.01,0.31,0.01,1.04,0,1.35c-0.01,0.36-0.21,0.58-0.54,0.58
+	c-0.31-0.01-0.51-0.22-0.52-0.57c0-0.18-0.01-0.77,0-0.96c0.01-0.32,0-0.59-0.29-0.85c-0.31-0.28-0.32-0.7-0.13-1.1
+	c0.19-0.4,0.52-0.59,0.88-0.62C8.53,8.97,8.94,9.27,9.08,9.7S9.1,10.58,8.74,10.85L8.74,10.85z"/>
+</svg>

src/icons/svg/user.svg

@@ -1 +1,12 @@
-<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D1D2DC;}
+</style>
+<path class="st0" d="M4.01,4.21c0,2.21,1.8,4,4.03,4c2.23,0,4.03-1.79,4.03-4c0,0,0,0,0,0c0-2.21-1.8-4-4.03-4
+	C5.82,0.22,4.01,2.01,4.01,4.21C4.01,4.21,4.01,4.21,4.01,4.21z"/>
+<path class="st0" d="M5.78,8.98h5.07c0,0,1.14,0.01,3.24,2.17c0.88,0.9,1.42,3.09,0.98,4.06c0,0-0.35,0.64-1.39,0.73
+	c-0.46,0.04-9.46,0-9.46,0s-2.28,0.31-2.84-0.55c-0.32-0.42-0.01-1.7,0.15-2.51C1.61,12.45,2.76,9.4,5.78,8.98z"/>
+</svg>

src/icons/svg/user1.svg

@@ -0,0 +1 @@
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>

src/layout/components/Navbar.vue

@@ -13,14 +13,15 @@
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
+          <!-- <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
+          <div><strong>admin</strong></div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
-            <el-dropdown-item> Home </el-dropdown-item>
+            <el-dropdown-item> 首页 </el-dropdown-item>
           </router-link>
-          <a
+          <!-- <a
             target="_blank"
             href="https://github.com/PanJiaChen/vue-admin-template/"
           >
@@ -31,9 +32,9 @@
             href="https://panjiachen.github.io/vue-element-admin-site/#/"
           >
             <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+          </a> -->
           <el-dropdown-item divided @click.native="logout">
-            <span style="display: block">Log Out</span>
+            <span style="display: block">退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -179,7 +180,7 @@ export default {
       margin-right: 30px;
 
       .avatar-wrapper {
-        margin-top: 5px;
+        // margin-top: 5px;
         position: relative;
 
         .user-avatar {
@@ -193,7 +194,7 @@ export default {
           cursor: pointer;
           position: absolute;
           right: -20px;
-          top: 25px;
+          top: 20px;
           font-size: 12px;
         }
       }

src/router/index.js

@@ -44,6 +44,14 @@ export const constantRoutes = [{
         hidden: true
     },
 
+    {
+        path: '/index',
+        component: () =>
+            import ('@/views/index'),
+        hidden: true,
+
+    },
+
     {
         path: '/',
         component: Layout,

src/styles/index.scss

@@ -338,4 +338,184 @@ div:focus {
 
 .el-dialog__headerbtn .el-dialog__close {
     color: #303133
+}
+
+
+/**
+      首页
+**/
+
+.main-container-box {
+    min-width: 1280px;
+    min-height: 100%;
+    width: 100%;
+    height: 100vh;
+    background-color: #021132;
+    overflow: hidden;
+    color: #fff
+}
+
+// 头部导航样式
+.nav-header {
+    min-width: 1280px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    color: #fff;
+    text-align: center;
+    font-size: 2rem;
+    line-height: 80px;
+    background: url(../assets/nav-header-bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+@media (max-width: 1440px) {
+    .nav-header {
+        font-size: 30px;
+        line-height: 60px;
+    }
+}
+
+.panel-box {
+    margin-top: 80px;
+    position: relative;
+    height: 100vh
+}
+
+.panel {
+    width: 410px;
+    border: 1px solid #3486DA;
+    .panel-tit {
+        background: linear-gradient(to right, #021132 0%, #3053AF 50%, #021132 100%);
+        padding: 12px;
+        color: #fff;
+        text-align: center;
+        font-size: 16px;
+    }
+    .pie-item {
+        margin-top: 40px;
+        width: 50%;
+        height: 300px;
+        display: inline-block;
+        border: 1px solid pink
+    }
+}
+
+.panel::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid #02a6b5;
+    border-left: 2px solid #02a6b5;
+}
+
+.panel::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-top: 2px solid #02a6b5;
+    border-right: 2px solid #02a6b5;
+}
+
+.panel .panel-footer {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.panel .panel-footer::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #02a6b5;
+    border-left: 2px solid #02a6b5;
+}
+
+.panel .panel-footer::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-bottom: 2px solid #02a6b5;
+    border-right: 2px solid #02a6b5;
+}
+
+.panel.sbgk {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    z-index: 2
+}
+
+.panel.monitor {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    z-index: 3
+}
+
+.num-analysis {
+    margin: 10px
+}
+
+.num-analysis>div {
+    width: 48.7%;
+    border: 1px solid #3486DA;
+    display: inline-block;
+    background: #074198
+}
+
+.num-analysis>div:first-child {
+    margin-right: 10px;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+li,
+p {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.num-analysis ul li {
+    padding: 0 10px;
+    margin: 10px 0;
+    float: left;
+    width: 50%;
+    text-align: center;
+    position: relative;
+}
+
+.num-analysis ul li:first-child {
+    border-right: 1px dashed #42A4FF
+}
+
+.num-tit {
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+
+.num-no {
+    font-size: 18px;
+    color: #04F9AB;
+    font-weight: 500
 }

src/views/index/index.vue

@@ -1,420 +1,77 @@
 <template>
-  <div class="app-container">
-    <div class="filter-container">
-      <div class="filter-left">
-        <div class="filter-item">
-          单位名称:
-          <el-select v-model="value" placeholder="" style="width: 100px">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+  <div class="app-container" style="background:black;margin:0 padding:0">
+      <div class="main-container-box">
+    <div class="nav-header">安防综合管理平台</div>
+    <div class="panel-box">
+      <div class="panel sbgk">
+        <div class="panel-tit">
+          设备工况
         </div>
-        <div class="filter-item">
-          隶属单位:
-          <el-select v-model="value2" placeholder="" style="width: 110px">
-            <el-option
-              v-for="item in options2"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </div>
-        <div class="filter-item">
-          机构类型:
-          <el-select v-model="value3" placeholder="" style="width: 100px">
-            <el-option
-              v-for="item in options3"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+        <div class="pie-box">
+          <div class="pie-item">
+            饼状图1
+          </div>
+
+          <div class="pie-item">
+            饼状图2
+          </div>
         </div>
 
-        <div class="filter-item">
-          组织机构代码:
-          <el-input
-            v-model="input"
-            placeholder=""
-            style="width: 120px"
-          ></el-input>
+        <div class="num-analysis">
+          <div>
+            <ul>
+              <li>
+                <p class="num-tit">设备总数</p>
+                <p class="num-no">260</p>
+              </li>
+              <li>
+                <p class="num-tit">异常数量</p>
+                <p class="num-no" style="color:#F84803">260</p>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <ul>
+               <li>
+                <p class="num-tit">设备总数</p>
+                <p class="num-no" style="color:#00ACFF">260</p>
+              </li>
+              <li>
+                <p class="num-tit">异常数量</p>
+                <p class="num-no" style="color:#FEC400">260</p>
+              </li>
+            </ul>
+          </div>
         </div>
 
-        <el-button type="primary" icon="el-icon-search" class="search-button"
-          >搜索</el-button
-        >
-      </div>
-
-      <div class="handle-button-right">
-        <el-button
-          icon="el-icon-plus"
-          type="success"
-          @click="dialogFormVisible = true"
-          >新增</el-button
-        >
-        <el-button icon="el-icon-delete" type="danger" @click="batchDelete"
-          >删除</el-button
-        >
-        <el-button type="warning" @click="handleDownload">
-          <svg-icon icon-class="export" />
-          导出
-        </el-button>
+     
+        <div class="panel-footer"></div>
       </div>
+      <!-- <div class="panel monitor"></div> -->
     </div>
-
-    <el-divider></el-divider>
-    <el-table
-      :data="list"
-      stripe
-      border
-      :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
-      style="width: 100%"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="40"> </el-table-column>
-
-      <el-table-column prop="author" label="author" width="100">
-      </el-table-column>
-      <el-table-column prop="display_time" label="display_time" width="200">
-      </el-table-column>
-      <el-table-column prop="pageviews" label="pageviews" width="100">
-      </el-table-column>
-      <el-table-column prop="status" label="status"> </el-table-column>
-      <el-table-column prop="title" width="600" label="title">
-      </el-table-column>
-
-      <el-table-column label="操作" width="150" fixed="right">
-        <template slot-scope="scope">
-          <el-button
-            icon="el-icon-edit"
-            style="color: #406ce5"
-            @click="handleEdit(scope.$index, scope.row)"
-            >编辑</el-button
-          >
-          <el-button
-            icon="el-icon-delete"
-            style="color: #f27979"
-            @click="handleDelete(scope.$index, scope.row)"
-            >删除</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination background layout="prev, pager, next" :total="1000">
-    </el-pagination>
-
-    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="648px">
-      <el-form :model="form">
-        <el-form-item label="单位名称:" :label-width="formLabelWidth">
-          <el-input v-model="form.name" autocomplete="off"></el-input>
-        </el-form-item>
-
-        <el-form-item label="单位编号:" :label-width="formLabelWidth">
-          <el-input v-model="form.name2" autocomplete="off"></el-input>
-        </el-form-item>
-
-        <el-form-item label="部门:" :label-width="formLabelWidth">
-          <el-input v-model="form.name3" autocomplete="off"></el-input>
-        </el-form-item>
-
-        <el-form-item label="隶属单位:" :label-width="formLabelWidth">
-          <el-select
-            v-model="form.region"
-            placeholder="请选择活动区域"
-            style="width: 100%"
-          >
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="机构类型:" :label-width="formLabelWidth">
-          <el-select
-            v-model="form.region2"
-            placeholder="请选择活动区域"
-            style="width: 100%"
-          >
-            <el-option label="类型一" value="1"></el-option>
-            <el-option label="类型二" value="2"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="组织机构代码:" :label-width="formLabelWidth">
-          <el-input v-model="form.name4" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="负责人:" :label-width="formLabelWidth">
-          <el-input v-model="form.name5" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="联系方式:" :label-width="formLabelWidth">
-          <el-input v-model="form.name6" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button
-          @click="dialogFormVisible = false"
-          style="background: #f6f6f6"
-          >取 消</el-button
-        >
-        <el-button type="primary" @click="dialogFormVisible = false"
-          >提 交</el-button
-        >
-      </div>
-    </el-dialog>
+  </div>
+   
   </div>
 </template>
 
 
 <script>
-//aa 1：引入api文件
-import { getList } from "@/api/table";
 
-import { parseTime } from '@/utils'
 
 
 export default {
   data() {
     return {
-      //aa 2：声明变量
-      page:{
-        current:1,
-        size:20,
-        total:0
-
-      },
-      query:{},
-      list: [],
-
-
-
-      tokon: "suibian",
-      listQuery: {
-        page: 1,
-        limit: 5,
-      },
-
-      tableData: [
-        {
-          companyName: "上海永天科技股份有限公司",
-          companyCode: "0001",
-          department: "技术部",
-          superName: "上海永天",
-          type: "机构类型",
-          orgCode: "465798651698",
-          chargeMan: "张三",
-          contact: "16621076543",
-        },
-        {
-          companyName: "上海永天科技股份有限公司",
-          companyCode: "0002",
-          department: "技术部",
-          superName: "上海永天",
-          type: "机构类型",
-          orgCode: "465798651698",
-          chargeMan: "张三",
-          contact: "16621076543",
-        },
-        {
-          companyName: "上海永天科技股份有限公司",
-          companyCode: "0003",
-          department: "技术部",
-          superName: "上海永天",
-          type: "机构类型",
-          orgCode: "465798651698",
-          chargeMan: "张三",
-          contact: "16621076543",
-        },
-        {
-          companyName: "上海永天科技股份有限公司",
-          companyCode: "0004",
-          department: "技术部",
-          superName: "上海永天",
-          type: "机构类型",
-          orgCode: "465798651698",
-          chargeMan: "张三",
-          contact: "16621076543",
-        },
-      ],
-      multipleSelection: [],
-
-      options: [
-        {
-          value: "1",
-          label: "单位1",
-        },
-        {
-          value: "2",
-          label: "单位2",
-        },
-        {
-          value: "3",
-          label: "单位3",
-        },
-      ],
-      value: "",
-
-      options2: [
-        {
-          value: "1",
-          label: "隶属单位1",
-        },
-        {
-          value: "2",
-          label: "隶属单位2",
-        },
-        {
-          value: "3",
-          label: "隶属单位3",
-        },
-      ],
-      value2: "",
-
-      options3: [
-        {
-          value: "1",
-          label: "类型1",
-        },
-        {
-          value: "2",
-          label: "类型2",
-        },
-        {
-          value: "3",
-          label: "类型3",
-        },
-      ],
-      value3: "",
-
-      input: "",
-
-      dialogFormVisible: false,
-      form: {
-        name: "",
-        region: "",
-        region2: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        desc: "",
-      },
-      formLabelWidth: "120px",
-    };
-  },
-
-  created() {
-    //aa 4渲染数据
-    this.fetchData();
-  },
-  methods: {
-    //aa 3请求接口
-    // getList() {
-    //   getList(this.tokon).then(res => {
-    //     this.list = res.data.items
-    //     console.log(res)
-    //   })
-    // },
-
-    // async getList() {
-    //   this.listLoading = true;
-    //   const { data } = await getList(this.listQuery);
-    //   this.list = data.items;
-    //   console.log(this.list);
-   
-    //   this.$nextTick(() => {
-       
-    //   });
-    // },
-    fetchData(){
-      getList(this.query,this.page.current,this.page.size).then(response=>{
-         this.list = response.data.items;
-         this.page.total=response.data.total;
-          console.log('response',response)
-      })
-    },
-
-    handleDownload() {
-      this.downloadLoading = true;
-      import("@/vendor/Export2Excel").then((excel) => {
-        const tHeader = ["timestamp", "title", "type", "importance", "status"];
-        const filterVal = [
-          "timestamp",
-          "title",
-          "type",
-          "importance", 
-          "status",
-        ];
-        const data = this.formatJson(filterVal);
-        excel.export_json_to_excel({
-          header: tHeader,
-          data,
-          filename: "table-list",
-        });
-        this.downloadLoading = false;
-      });
-    },
-    formatJson(filterVal) {
-      return this.list.map((v) =>
-        filterVal.map((j) => {
-          if (j === "timestamp") {
-            return parseTime(v[j]);
-          } else {
-            return v[j];
-          }
-        })
-      );
-    },
-
-    handleEdit(index, row) {
-      alert(index, row);
-    },
-    handleDelete(index, row) {
-      this.$confirm("确定删除该单位吗?", "删除", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.$message({
-            type: "success",
-            message: "删除成功!",
-          });
-          this.tableData.splice(index, 1);
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除",
-          });
-        });
-    },
-
-    batchDelete() {
-      let multData = this.multipleSelection;
-      let tableData = this.tableData;
-      let multDataLen = multData.length;
-      let tableDataLen = tableData.length;
-
-      for (let i = 0; i < multDataLen; i++) {
-        for (let y = 0; y < tableDataLen; y++) {
-          if (JSON.stringify(tableData[y]) == JSON.stringify(multData[i])) {
-            this.tableData.splice(y, 1);
-            console.log("aa");
-          }
-        }
-      }
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-  },
-};
-</script>
+      
+  
+  
+}
+  }
+}
+</script>
+<style >
+.app-container{
+    background:black;margin:0 ;padding:0;
+    height:100vh;
+}
+</style>

src/views/index/index2.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="main-container-box">
+    <div class="nav-header">安防综合管理平台</div>
+    <div class="panel-box">
+      <div class="panel sbgk">
+        <div class="panel-tit">
+          设备工况
+        </div>
+        <div class="pie-box">
+          <div class="pie-item">
+            饼状图1
+          </div>
+
+          <div class="pie-item">
+            饼状图2
+          </div>
+        </div>
+
+        <div class="num-analysis">
+          <div>
+            <ul>
+              <li>
+                <p class="num-tit">设备总数</p>
+                <p class="num-no">260</p>
+              </li>
+              <li>
+                <p class="num-tit">异常数量</p>
+                <p class="num-no" style="color:#F84803">260</p>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <ul>
+               <li>
+                <p class="num-tit">设备总数</p>
+                <p class="num-no" style="color:#00ACFF">260</p>
+              </li>
+              <li>
+                <p class="num-tit">异常数量</p>
+                <p class="num-no" style="color:#FEC400">260</p>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+     
+        <div class="panel-footer"></div>
+      </div>
+      <!-- <div class="panel monitor"></div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .main-container-box .el-input input {
+    color: $cursor;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+// @import "../../styles/mixin.scss";
+
+
+.main-container-box {
+  min-width: 1280px;
+  min-height: 100%;
+  width: 100%;
+  height:100vh;
+  background-color: #021132;
+  overflow: hidden;
+  color:#fff
+}
+
+// 头部导航样式
+.nav-header {
+  min-width: 1280px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 2rem;
+  line-height: 80px;
+  background: url(../../assets/nav-header-bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 1440px) {
+  .nav-header {
+    font-size: 30px;
+    line-height: 60px;
+  }
+}
+
+.panel-box {
+  margin-top: 80px;
+  position:relative;
+  height:100vh
+}
+
+.panel {
+  width: 410px;
+
+  border:1px solid #3486DA;
+
+  .panel-tit{
+    background: linear-gradient(to right, #021132 0%, #3053AF 50%, #021132 100%);
+    padding:12px;
+    color:#fff;
+    text-align:center;
+    font-size:16px;
+  }
+  .pie-item{
+    margin-top:40px;
+    width:50%;
+    height:300px;
+    display:inline-block;
+    border:1px solid pink
+  }
+}
+
+.panel::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid #02a6b5;
+  border-left: 2px solid #02a6b5;
+}
+.panel::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid #02a6b5;
+  border-right: 2px solid #02a6b5;
+}
+.panel .panel-footer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+.panel .panel-footer::before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #02a6b5;
+  border-left: 2px solid #02a6b5;
+}
+.panel .panel-footer::after {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-bottom: 2px solid #02a6b5;
+  border-right: 2px solid #02a6b5;
+}
+
+
+.panel.sbgk{
+  position:absolute;
+  left:20px;
+  top:20px;
+  z-index:2
+  
+}
+.panel.monitor{
+   position:absolute;
+  left:20px;
+  bottom:20px;
+  
+  z-index:3
+
+}
+
+
+.num-analysis{
+  margin:10px
+}
+.num-analysis>div{
+  width:48.7%;
+  border:1px solid #3486DA;
+  display:inline-block;
+  background:#074198
+}
+.num-analysis>div:first-child{
+  margin-right:10px;
+}
+ul{
+  padding:0;margin:0;list-style:none;
+
+}
+li,p{
+  padding:0;margin:0;list-style:none;
+
+}
+.num-analysis ul li{
+  padding:0 10px;
+  margin:10px 0;
+  float:left;
+  width:50%;
+ 
+  text-align:center;
+  position:relative;
+ 
+
+}
+
+.num-analysis ul li:first-child {
+   border-right:1px dashed #42A4FF
+}
+.num-tit{
+ font-size:14px;
+ margin-bottom:10px;
+}
+.num-no{
+  font-size:18px;
+  color:#04F9AB;
+  font-weight:500
+
+}
+</style>

src/views/login/index.vue

@@ -1,23 +1,20 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
-
+    <div class="nav-header">安防综合管理平台</div>
+    <el-form class="login-form" auto-complete="on" label-position="left">
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">用户登录</h3>
       </div>
 
-      <el-form-item prop="username">
+      <el-form-item prop="username" width="460px">
         <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
         <el-input
           ref="username"
-          v-model="loginForm.username"
-          placeholder="Username"
+          placeholder="请输入用户名"
           name="username"
           type="text"
-          tabindex="1"
-          auto-complete="on"
         />
       </el-form-item>
 
@@ -25,112 +22,54 @@
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
+        <el-input ref="password" placeholder="请输入密码" name="password" />
+      </el-form-item>
+
+      <el-form-item
+        prop="verificationCode"
+        style="width: 66%; position: relative"
+      >
+        <img src="../../assets/code-verify.png" alt="" class="code-verify" />
+        <span class="svg-container">
+          <svg-icon icon-class="code" />
+        </span>
         <el-input
-          :key="passwordType"
-          ref="password"
-          v-model="loginForm.password"
-          :type="passwordType"
-          placeholder="Password"
-          name="password"
-          tabindex="2"
-          auto-complete="on"
-          @keyup.enter.native="handleLogin"
+          ref="verificationCode"
+          placeholder="请输入验证码"
+          name="verificationCode"
         />
-        <span class="show-pwd" @click="showPwd">
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-        </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
-
-      <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
-      </div>
-
+      <el-button
+        class="login-button"
+        style="width: 100%; margin-bottom: 30px; border-radius: 23px"
+        >登 录</el-button
+      >
     </el-form>
   </div>
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
+import { validUsername } from "@/utils/validate";
 
 export default {
-  name: 'Login',
+  //   name: 'Login',
   data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('Please enter the correct user name'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('The password can not be less than 6 digits'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: 'admin',
-        password: '111111'
-      },
-      loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
-      },
-      loading: false,
-      passwordType: 'password',
-      redirect: undefined
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
+    return {};
   },
+  watch: {},
   methods: {
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || '/' })
-            this.loading = false
-          }).catch(() => {
-            this.loading = false
-          })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-  }
-}
+    // }
+  },
+};
 </script>
 
 <style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
 $cursor: #fff;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -173,23 +112,55 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 
 .login-container {
+    min-width:1280px;
   min-height: 100%;
   width: 100%;
-  background-color: $bg;
+  // background-color: $bg;
+  background-image: url("../../assets/login-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
   overflow: hidden;
+  display: flex;
+  //  justify-content:center;
+  align-items: center;
 
   .login-form {
-    position: relative;
-    width: 520px;
+    width: 30%;
+    min-width: 400px;
     max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
+    padding: 35px;
+    margin-left: 60%;
+    position: relative;
+    background-image: url("../../assets/login-form-bg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     overflow: hidden;
+    // border:1px dashed #000
+  }
+  .login-form::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 10px;
+    height: 10px;
+    border-left: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+    content: "";
+  }
+  .login-form::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid #02a6b5;
+    border-top: 2px solid #02a6b5;
+    content: "";
   }
 
   .tips {
@@ -234,4 +205,47 @@ $light_gray:#eee;
     user-select: none;
   }
 }
+
+.login-button {
+  background: #5d88f9;
+  font-size: 20px;
+  color: #fff;
+  border: none;
+}
+.login-button:hover {
+  opacity: 0.7;
+}
+.code-verify {
+  top: 3px;
+  position: absolute;
+  right: -108px;
+  width: 82px;
+}
+
+
+// 头部导航样式
+.nav-header {
+    min-width:1280px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  font-size: 40px;
+  line-height: 80px;
+  background: url(../../assets/nav-header-bg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 1440px) {
+  .nav-header {
+    font-size: 30px;
+    line-height: 60px;
+  }
+}
+
+
+
 </style>

src/views/login/index2.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="login-container">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+
+      <div class="title-container">
+        <h3 class="title">用户登录</h3>
+      </div>
+
+      <el-form-item prop="username">
+        <span class="svg-container">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          ref="username"
+          v-model="loginForm.username"
+          placeholder="请输入用户名"
+          name="username"
+          type="text"
+          tabindex="1"
+          auto-complete="on"
+        />
+      </el-form-item>
+
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          :key="passwordType"
+          ref="password"
+          v-model="loginForm.password"
+          :type="passwordType"
+          placeholder="请输入密码"
+          name="password"
+          tabindex="2"
+          auto-complete="on"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+        </span>
+      </el-form-item>
+
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+
+      <div class="tips">
+        <span style="margin-right:20px;">username: admin</span>
+        <span> password: any</span>
+      </div>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate'
+
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error('Please enter the correct user name'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        callback(new Error('The password can not be less than 6 digits'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: 'admin',
+        password: '111111'
+      },
+      loginRules: {
+        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+      },
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true
+          this.$store.dispatch('user/login', this.loginForm).then(() => {
+            this.$router.push({ path: this.redirect || '/' })
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg:#283443;
+$light_gray:#fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg:#2d3a4b;
+$dark_gray:#889aa4;
+$light_gray:#eee;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  // background-color: $bg;
+  background-image:url('../../assets/login-bg.png');
+  background-size:cover;
+  background-repeat:no-repeat;
+  overflow: hidden;
+
+  .login-form {
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    margin-right:10%;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+</style>

src/views/system/auth-manage/index.vue

@@ -308,7 +308,6 @@ export default {
           menuSort: "2",
           url: "http://www.chinausky.com",
           imageUrl: require("@/assets/img.png"),
-          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
           createTime: "2020-09-15 12:20:12",
           createMan: "张三",
           editTime: "2020-09-15 12:20:12",
@@ -321,7 +320,6 @@ export default {
           menuSort: "1",
           url: "http://www.chinausky.com",
           imageUrl: require("@/assets/img.png"),
-          // imageUrl:"https://avatar.csdnimg.cn/F/1/C/3_weixin_43962877.jpg",
           createTime: "2020-09-15 12:20:12",
           createMan: "张三",
           editTime: "2020-09-15 12:20:12",

vue.config.js

@@ -36,6 +36,16 @@ module.exports = {
             warnings: false,
             errors: true
         },
+        proxy: {
+            [process.env.VUE_APP_BASE_API]: {
+                target: 'http://127.0.0.1:8080/Device_Manager/',
+                changeOrigin: true,
+                pathRewrite: {
+                    ['^' + process.env.VUE_APP_BASE_API]: ''
+                }
+            }
+        },
+
         before: require('./mock/mock-server.js')
     },
     configureWebpack: {