main page animate

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "new_back",
+  "name": "SignalDigger",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/Mock/index.js

@@ -75,6 +75,60 @@ let getLoftInfo = function () {
     };
     return res;
 };
+let wifiSingle = function () {
+    let item = [];
+    let t =0;
+    for (var i = 0; i < 13; i++) {
+        t = i+1;
+        item.push({
+            '页面': "信道" + t,
+            '访问量': "@integer(301,600)",
+        })
+    }
+
+    let res = {
+        Rs: item,
+        Code: 0,
+        Memo: '登陆成功'
+    };
+    return res;
+};
+let Scan = function () {
+    let item = [];
+    let t =0;
+    for (var i = 0; i < 13; i++) {
+        t = i+1;
+        item.push({
+            '页面': t + ".0M",
+            '访问量': "@integer(301,600)",
+        })
+    }
+
+    let res = {
+        Rs: item,
+        Code: 0,
+        Memo: '登陆成功'
+    };
+    return res;
+};
+let Watching = function () {
+    let item = [];
+    let t =0;
+    for (var i = 0; i < 9; i++) {
+        t = i+1;
+        item.push({
+            'time': "@date",
+            'checkRs': "Signal设备03@integer(301,600)检测完成，206会议室安全",
+        })
+    }
+
+    let res = {
+        Rs: item,
+        Code: 0,
+        Memo: '登陆成功'
+    };
+    return res;
+};
 
 Mock.mock('/api/worldDetail', 'post', worldDetail());
 Mock.mock('/api/SignIn', 'post', SignIn());//用户登录
@@ -82,6 +136,9 @@ Mock.mock('/api/editbasicinfo', 'post', editbasicinfo());//用户设置修改
 Mock.mock('/api/modPwd', 'post', modPwd());//密码修改
 Mock.mock('/api/logout', 'post', logout());//退出登陆
 Mock.mock('/api/getLoftInfo', 'post', getLoftInfo());//楼层获取
+Mock.mock('/api/wifiSingle', 'post', wifiSingle());//
+Mock.mock('/api/Scan', 'post', Scan());//
+Mock.mock('/api/Watching', 'post', Watching());//
 
 // 业务类
 

src/api/getApiRes.js

@@ -16,12 +16,7 @@ export function worldDetail(postdata) {
         return getApiBasic(url,postdata);
 }
 
-
-export function SignIn(postdata) {
-        let url = headapi + 'SignIn';
-        return getApiBasic(url,postdata);
-}
-
+// 测试用接口
 export function editbasicinfo(postdata) {
     let url = headapi + 'editbasicinfo';
     return getApiBasic(url,postdata);
@@ -34,6 +29,35 @@ export function getLoftInfo(postdata) {
     let url = headapi + 'getLoftInfo';
     return getApiBasic(url,postdata);
 }
+export function wifiSingle(postdata) {
+    let url = headapi + 'wifiSingle';
+    return getApiBasic(url,postdata);
+}
+export function Scan(postdata) {
+    let url = headapi + 'Scan';
+    return getApiBasic(url,postdata);
+}
+export function Watching(postdata) {
+    let url = headapi + 'Watching';
+    return getApiBasic(url,postdata);
+}
+
+// 真实接口
+// 用户登录
+export function SignIn(postdata) {
+    let url = headapi + 'v1/Auth/SignIn';
+    return getApiBasic(url,postdata);
+}
+// 获取验证图片
+export function GenVerifyPic(postdata) {
+    let url = headapi + 'v1/Auth/GenVerifyPic';
+    return getApiBasic(url,postdata);
+}
+// 用户退出
+export function SignOut(postdata) {
+    let url = headapi + 'v1/Auth/SignOut';
+    return getApiBasic(url,postdata);
+}
 
 
 

src/components/Headside.vue

@@ -9,7 +9,7 @@
             <div class="center">
                 保密会议室无线信号安全监控系统
             </div>
-            <ul class="user-info-menu right-links list-inline list-unstyled">
+            <ul class="user-info-menu right-links list-inline list-unstyled" v-if="false">
                 <li class="dropdown user-profile">
                     <el-dropdown>
                          <i class="icon-user"></i>

src/components/Loft.vue

@@ -6,7 +6,7 @@
         <div class="loftContainer">
             <div class="loftBg">
                 <ul>
-                    <li :class="{'active':p.state == 0}" v-for="p in points" :style="{ left: p.left, top: p.top}"><em>{{p.name}}</em><i>{{p.room}}</i></li>
+                    <li :class="{'active':p.state == 0}" v-for="p in points" :style="{ left: p.left, top: p.top}"><em>{{p.name}}</em><i></i></li>
                 </ul>
             </div>
         </div>

src/components/Navside.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-row  :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
+        <el-row :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
             <el-col :span="24">
                 <el-menu
                         default-active="2"
@@ -28,7 +28,7 @@
                             </el-menu-item>
                         </el-menu-item-group>
                     </el-submenu>
-                    <el-menu-item index="99" route="#" title="退出登陆"  @click="clickLogout">
+                    <el-menu-item index="99" route="#" title="退出登陆" @click="clickLogout">
                         <i class="icon-logout"></i>
                         <span slot="title">退出登陆</span>
                     </el-menu-item>
@@ -39,7 +39,8 @@
 </template>
 <script>
     import Navs from '../api/Navs';
-
+    import {SignOut} from '../api/getApiRes.js'
+    let qs = require('qs');
     export default {
         data() {
             return {
@@ -67,17 +68,29 @@
             },
             clickLogout() {
                 let that = this;
-                that.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
+                let param = {
+                    token: localStorage.token
+                };
+                let postdata = qs.stringify(param);
+
+                this.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                 }).then(() => {
-                    localStorage.usercode = '';
-                    that.$router.push({path: '/login', query: {status: 1}});
+                    SignOut(postdata).then(res => {
+                            that.$message({
+                                showClose: true,
+                                message: '用户已退出！',
+                                type: 'success'
+                            });
+                            localStorage.usercode = '';
+                            that.$router.push({path: '/login', query: {status: 1}});
+                        })
                 }).catch(() => {
-                    that.$message({
-                        showClose: true,
-                        message: '您已取消退出操作',
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除'
                     });
                 })
             }
@@ -106,25 +119,32 @@
         margin: 0 auto;
         height: 100%;
     }
+
     .el-col, .el-menu {
         height: 100%;
         border-right: 0;
     }
+
     /deep/ .el-menu-item {
-        background-color: rgba(255,255,255,0)!important;
+        background-color: rgba(255, 255, 255, 0) !important;
     }
-    /deep/.el-menu {
-        background-color: rgba(255,255,255,0.1)!important;
+
+    /deep/ .el-menu {
+        background-color: rgba(255, 255, 255, 0.1) !important;
     }
+
     /deep/ .el-submenu__title {
-        background:rgba(255,255,255,0)!important;
+        background: rgba(255, 255, 255, 0) !important;
     }
+
     .el-menu li:hover {
         background: #00599A;
     }
+
     /deep/ .el-menu-item:hover {
-        background: #00599A!important;
+        background: #00599A !important;
     }
+
     .logout {
         color: #fff;
         font-size: 14px;
@@ -136,9 +156,11 @@
     .logout:hover {
         background: rgb(67, 74, 80);
     }
+
     .littleLogo {
         float: left;
     }
+
     .icon-home {
         width: 18px;
         height: 18px;
@@ -147,6 +169,7 @@
         background: url("../assets/img/icon/home.png") top center no-repeat;
         background-size: 100%;
     }
+
     .icon-location {
         width: 18px;
         height: 18px;
@@ -155,6 +178,7 @@
         background: url("../assets/img/icon/location.png") top center no-repeat;
         background-size: 100%;
     }
+
     .icon-list {
         width: 18px;
         height: 18px;
@@ -163,6 +187,7 @@
         background: url("../assets/img/icon/list.png") top center no-repeat;
         background-size: 100%;
     }
+
     .icon-equip {
         width: 18px;
         height: 18px;
@@ -171,6 +196,7 @@
         background: url("../assets/img/icon/equip.png") top center no-repeat;
         background-size: 100%;
     }
+
     .icon-qrcode {
         width: 18px;
         height: 18px;
@@ -178,7 +204,9 @@
         margin-top: 20px;
         background: url("../assets/img/icon/qrcode.png") top center no-repeat;
         background-size: 100%;
-    } .icon-setting {
+    }
+
+    .icon-setting {
         width: 18px;
         height: 18px;
         float: left;
@@ -186,6 +214,7 @@
         background: url("../assets/img/icon/setting.png") top center no-repeat;
         background-size: 100%;
     }
+
     .icon-logout {
         width: 18px;
         height: 18px;

src/components/Room.vue

@@ -6,7 +6,7 @@
         <div class="RoomContainer">
             <div class="RoomBg">
                 <ul>
-                    <li :class="{'active':p.state == 0}" v-for="p in points" :style="{ left: p.left, top: p.top}"><em>{{p.name}}</em><i>{{p.room}}</i></li>
+                    <li :class="{'active':p.state == 0}" v-for="p in points" :style="{ left: p.left, top: p.top}"><em>{{p.name}}</em><i></i></li>
                 </ul>
             </div>
         </div>

src/components/Scan.vue

@@ -15,6 +15,8 @@
 </template>
 
 <script>
+    import {Scan} from '../api/getApiRes.js'
+    let qs = require('qs');
     export default {
         data() {
             return {
@@ -23,19 +25,7 @@
                 chartData: {
                     columns: ['页面', '访问量'],
                     rows: [
-                        {'页面': '1.0M', '访问量': 123},
-                        {'页面': '2.0M', '访问量': 321},
-                        {'页面': '3.0M', '访问量': 231},
-                        {'页面': '4.0M', '访问量': 112},
-                        {'页面': '5.0M', '访问量': 321},
-                        {'页面': '6.0M', '访问量': 121},
-                        {'页面': '7.0M', '访问量': 333},
-                        {'页面': '8.0M', '访问量': 231},
-                        {'页面': '9.0M', '访问量': 411},
-                        {'页面': '10.0M', '访问量': 142},
-                        {'页面': '11.0M', '访问量': 321},
-                        {'页面': '12.0M', '访问量': 441},
-                        {'页面': '13.0M', '访问量': 441},
+                        // {'页面': '1.0M', '访问量': 123},
                     ]
                 },
                 chartExtend: {
@@ -80,13 +70,25 @@
         },
         mounted() {
             let that = this;
-            // this.timer = setInterval(() => {
+            this.timer = setInterval(() => {
             that.getDate();
-            // }, 3300);
+            }, 1600);
         },
         methods: {
             getDate() {
                 let that = this;
+                let param = {
+                    token: localStorage.token
+                };
+                let postdata = qs.stringify(param);
+                Scan(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        this.chartData.rows = json.Rs;
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
             },
             getRandomInt(min, max) {
                 return Math.floor(Math.random() * (max - min + 1)) + min;

src/components/Total.vue

@@ -49,9 +49,9 @@
     export default {
         data(){
           return{
-              TotalPanel:false,//总控
+              TotalPanel:true,//总控
               LoftPanel:false,//楼层
-              RoomPanel:true,//房间
+              RoomPanel:false,//房间
           }
         },
         components: {

src/components/Watching.vue

@@ -1,17 +1,66 @@
 <template>
     <div class="watching">
         <ul>
-            <li v-for="i in 9">
-                <span>06-18 12:32:03 </span>
-                <em>Signal设备03检测完成，206会议室安全</em>
+            <li v-for="l in list">
+                <span> {{l.time}}</span>
+                <em>{{l.checkRs}}</em>
             </li>
         </ul>
     </div>
 </template>
 
 <script>
+    import {Watching} from '../api/getApiRes.js'
+
+    let qs = require('qs');
     export default {
-        name: "Watching"
+        data() {
+            return {
+                list: [],
+            }
+        },
+        mounted() {
+            this.getDate();
+            let that = this;
+            this.timer = setInterval(() => {
+                that.getDate();
+            }, 6800);
+        },
+        methods: {
+            getDate() {
+                let that = this;
+                let param = {
+                    token: localStorage.token
+                };
+                let postdata = qs.stringify(param);
+                Watching(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        this.list = json.Rs;
+                        console.log(this.list.length);
+                        for(var i = 0; i < this.list.length; i++) {
+                            that.wordDisplay(that.list[i].checkRs,i);
+                        }
+                        // that.wordDisplay(that.list[0].checkRs,0);
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            wordDisplay(word,i) {
+                let index = 0;
+                let that = this;
+                type();
+                function type() {
+                    that.list[i].checkRs = word.substring(0, index++);
+                    if (index > word.length) {
+                        return;
+                    } else {
+                        setTimeout(type, 50);
+                    }
+                }
+            }
+        }
     }
 </script>
 
@@ -22,24 +71,27 @@
         display: block;
         margin: 0 auto;
     }
+
     .watching ul {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
     }
+
     .watching li {
         height: 34px;
         line-height: 34px;
         padding-left: 20px;
         padding-right: 10px;
-        background: rgba(0,107,184,0.2);
+        background: rgba(0, 107, 184, 0.2);
         font-size: 14px;
         color: #6DC1FF;
         text-align: left;
         overflow: hidden;
         margin-bottom: 5px;
     }
+
     .watching li span {
         font-family: UnidreamLED;
         font-size: 16px;

src/components/WifiSign.vue

@@ -15,6 +15,8 @@
 </template>
 
 <script>
+    import {wifiSingle} from '../api/getApiRes.js'
+    let qs = require('qs');
     export default {
         data() {
             return {
@@ -23,18 +25,7 @@
                 chartData: {
                     columns: ['页面', '访问量'],
                     rows: [
-                        {'页面': '信道1', '访问量': 123},
-                        {'页面': '信道2', '访问量': 321},
-                        {'页面': '信道3', '访问量': 231},
-                        {'页面': '信道4', '访问量': 112},
-                        {'页面': '信道5', '访问量': 321},
-                        {'页面': '信道6', '访问量': 121},
-                        {'页面': '信道7', '访问量': 333},
-                        {'页面': '信道8', '访问量': 231},
-                        {'页面': '信道9', '访问量': 411},
-                        {'页面': '信道10', '访问量': 142},
-                        {'页面': '信道11', '访问量': 321},
-                        {'页面': '信道12', '访问量': 441},
+                        // {'页面': '信道1', '访问量': 123},
                     ]
                 },
                 chartExtend: {
@@ -79,13 +70,25 @@
         },
         mounted() {
             let that = this;
-            // this.timer = setInterval(() => {
+            this.timer = setInterval(() => {
             that.getDate();
-            // }, 3300);
+            }, 1600);
         },
         methods: {
             getDate() {
                 let that = this;
+                let param = {
+                    token: localStorage.token
+                };
+                let postdata = qs.stringify(param);
+                wifiSingle(postdata).then(res => {
+                      let json = res;
+                      if (json.Code == 0) {
+                          this.chartData.rows = json.Rs;
+                      } else {
+                          that.$message.error(json.Memo);
+                      }
+                  })
             },
             getRandomInt(min, max) {
                 return Math.floor(Math.random() * (max - min + 1)) + min;

src/views/Index.vue

@@ -55,6 +55,10 @@
                 let str = ""; //存放第一层遍历的值
                 let strArray = []; //存放第二层遍历的值
                 let item = {};
+                if(data == 99){
+                    // 退出直接后面不处理了
+                    return false
+                }
                 if (data == 1) {
                     // 首页直接处理了
                     item = {
@@ -103,6 +107,7 @@
         bottom: 0;
         width: 100%;
         height: 100%;
+        background-color:#01355B;
         background: url("../assets/img/mainBg.png")top center no-repeat;
         background-size: 100% 100%;
         overflow-y: scroll;

src/views/Login.vue

@@ -7,16 +7,18 @@
                 <span class="subtitle">专用场所无线信号安全监控系统</span>
                 <el-card class="box-card">
                     <div class="center">
-                    <el-form ref="form" :model="form" label-width="0px">
+                    <el-form ref="form" :model="form" label-width="0px" >
                         <el-form-item label="">
                             <el-input v-model="form.name" placeholder="用户名"></el-input>
                         </el-form-item>
                         <el-form-item label="">
                             <el-input v-model="form.pwd" placeholder="密码"></el-input>
                         </el-form-item>
-                        <el-form-item label="">
+                        <el-form-item label=""  v-loading="validImgState"   element-loading-text="拼命加载中"
+                                      element-loading-spinner="el-icon-loading"
+                                      element-loading-background="rgba(0, 0, 0, 0.4)">
                             <el-input v-model="form.valid" placeholder="验证码"></el-input>
-                            <img id="validImg" :src="valImgSrc" alt="" width="100px" height="30px" title="看不清？刷一下试试！">
+                            <img  id="validImg" :src="valImgSrc" alt="" width="100px" height="30px" title="看不清？刷一下试试！" @click="changeValImg" >
                         </el-form-item>
                         <el-form-item>
                             <el-button type="primary" class="primaryBtn" @click="onSubmit">确认</el-button>
@@ -33,7 +35,7 @@
 </template>
 
 <script>
-    import { SignIn } from '../api/getApiRes.js'
+    import { SignIn,GenVerifyPic } from '../api/getApiRes.js'
     let qs = require('qs');
     import Global from '../Global.js'
 
@@ -45,12 +47,16 @@
                     name: '',
                     pwd: '',
                     valid: '',
+                    picId: '',
                 },
-                valImgSrc: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAABQCAMAAAAQlwhOAAAAP1BMVEUAAACcvA7J6TuszB6gwBKcvA6z0yXC4jSryx2+3jCy0iTG5ji72y3G5jievhCryx2dvQ+buw3N7T+21iioyBqdrAOEAAAAAXRSTlMAQObYZgAAA9BJREFUeJzsW2mP4yAMxT341FTVzP//r6tuJmAbm6sh0CRvpF0pTYDHM76amhMnWsBa23sJm8LagzE+Ce8eR+PbGVOPSa/Xa49p35gmhfGz4aTXa0/G8uXnsyHjroQ17FbhLtg9X2B/uwdQ7J0yhFDv/fn52XRtTVDG9/sZ/xkx+mtN+PXxCJ9BoPir3LoK4derL2PBhn9/I4zVgR65M36BwjmO+/EIGY/o7qNOar5DvifQ6cGfinmDfkgSliIzQOIkzps0YkSPhyEUtIKrL+rd0WeObNp6OiChAhiJ8EJVit2I7IiJKlwuF9Cz6HnVEmMAWWFgCo+m8eXyn7GaY8lCqQqTszukwozw4lndMpW9mC8ECvPdGV9hYDZsvVHjp1T/y0PRcArDfIaJdRr/r7X2/5IDpRTlpNtGY+y9MFf4fcnCYuK5CgfDN1x8DQJrNlhhCN2Sfyx39Cbrvt1uVc9ROpQZOF4B4cwcqp2Xvt0qGHuO6JKQRXIPbjIVrsm0cjeojrBgrLINBnadE2GhIpcOz46CcsJKKRPxvkt0IsavE68yZuRKEigWWHBEJuplmF3r/szQ+qFqVesXWmq1qk4EJHRxwjzbwKl0FecV3TsoFZ+fTn9uvkOMXHQMg89A8UE25Ph8hncdG+tFJBRmxix/X+EUNuQUlKwyJkrJOHOnIjJQTGEcoUnCzdaGtfljjYjMEnpa6gabqE/MwnwIX/oY0cgJvMpfaAb97OV/6+3bzS6lcDBNkx4y5imq6Ca9X8KM6Ek1gvvytAGWd0WwmyNxx9n8NCmM3aJrCEO6a5owofAwUsqBdJZthnJbjLC3jELjBjCKW+bLjxuAOCwqocGg4GUCL+eOv0F2miBMzk9BxSLeCqj6S7sIeTvAN4I4WNxarD0YYpqmBBXI7oL6syOPo3cfsxmjJXnlgLSJPg6ofNO024zPAeID5QicKpK0D9fpTy8BMOa107IFCicmje2I+vy6iTGgxqjUT9LPLxkiT+AMiZX8fM1KYPF9AFIdkzNVwWr4gE82kOTU1jBoYUTA5TPgy1nIfO+LLZ68Hyfvb4Nv1JCuBR6XIv1m31L50wyS8BX6Q62/UXM8i6dIKgxBKGTaAS6oDHaGTVu17UZHqQS6Qj52qRVpeYzWis8FyaAM9+60XKLHq++66wGUst6qH/r74SIIrSy55dH85G4GJqzRIv4uyDognrmF1vejeYTtCf0Npd3y7fx25MY4Ce8eR+N74sSJEydObI37/d57CZvifj8Y48EIt/8971iEt/jF9kh8j/cT9cMQ/hcAAP//l64Pg1y7/TYAAAAASUVORK5CYII=',
                 overtime: '',
+                validImgState: true,
+                valImgSrc: '',
             }
         },
         mounted() {
+            // 读取验证码
+            this.CurentGenVerifyPic();
             this.overtime = new Date();
             // 如果是手动退出用户
             if (this.$route.query.status == 1) {
@@ -61,10 +67,24 @@
             }
         },
         methods: {
+            CurentGenVerifyPic(){
+                let that = this;
+                let postdata;
+                GenVerifyPic(postdata).then(res => {
+                  let json = res;
+                  if (json.Id) {
+                      that.valImgSrc=json.Pic;
+                      that.form.picId=json.Id;
+                      this.validImgState = false;
+                  } else {
+                      that.$message.error(json.Memo);
+                  }
+              })
+            },
             //            点击验证码切换
             changeValImg: function () {
-                let that = this;
-                that.valImgSrc = that.valImgSrc + '?' + Math.random();
+                this.validImgState = true;
+                this.CurentGenVerifyPic();
             },
             // 登陆
             onSubmit() {
@@ -97,6 +117,7 @@
                 let username = this.form.name;
                 let userpwd = this.form.pwd;
                 let uservalid = this.form.valid;
+                let picId = this.form.picId;
                 let current = new Date();
                 let betweenTime = current - that.overtime;
                 let s = 120;
@@ -106,12 +127,11 @@
                     return false
                 }
                 let param = {
-                    'usercode': username,
-                    'passwd': userpwd,
-                    'vcode': uservalid,
-                    'logintype': 1,
-                    'accounttype': 3,
-                    'src': 'pc'
+                    'verifyName': username,
+                    'verifyCode': userpwd,
+                    'src': 'pc',
+                    'picId': picId ,
+                    'picCode': uservalid,
                 };
                 let postdata = qs.stringify(param);
                 SignIn(postdata).then(res => {

vue.config.js

@@ -3,7 +3,7 @@ module.exports = {
     devServer: {
         proxy: {
             '/api': {
-                target: 'http://192.168.0.162:19080/',
+                target: 'http://192.168.0.162:19082/',
                 changeOrigin: true,
                 pathRewrite: {
                     '^/api': '',