new page ready

src/components/SingleEquipInfo.vue

@@ -8,70 +8,81 @@
             <div class="other-people-title">
                 设备信息统计
             </div>
-            <div class="thisContent">
-                <h5>设备运行时间 <s class="timeShow">{{timeShow}}</s></h5>
-                <ul>
-                    <li>
-                        <div class="ringCircle">
-                            <Ring></Ring>
-                        </div>
-                        <em>{{info.state}}</em>
-                        <span>设备状态</span>
-                    </li>
-                    <li>
-                        <div class="ringCircle">
-                            <Ring></Ring>
-                        </div>
-                        <em>{{info.warning}}台</em>
-                        <span>可疑事件数</span>
-                    </li>
-                </ul>
+            <div class="timePart">
+                <div class="lt">
+                    <h5>设备运行时间 <s>EQUIP ACTIVE TIME</s></h5>
+                    <P>{{time}}</P>
+                    <span><s>可疑事件 WARNING EVENT</s>  <em>{{dangerItem}}</em></span>
+                    <ul>
+                        <li>
+                            <em>STOP</em>
+                            <i v-if="i == 1"></i>
+                        </li>
+                        <li>
+                            <em>SLOW</em>
+                            <i v-if="i == 2"></i>
+                        </li>
+                        <li>
+                            <em>NORMAL</em>
+                            <i v-if="i == 3"></i>
+                        </li>
+                        <li>
+                            <em>RACING</em>
+                            <i v-if="i == 4"></i>
+                        </li>
+                    </ul>
+                </div>
+                <div class="rt">
+                    <div class="top">
+                        <h5>在线</h5>
+                        <s>ONLINE</s>
+                        <i v-if="state"></i>
+                    </div>
+                    <div class="middle">
+                        <span>设备运行状态</span>
+                        <s>EQUIP ACTIVE STATE</s>
+                    </div>
+                    <div class="bottom">
+                        <h5>离线</h5>
+                        <s>OFFLINE</s>
+                        <i v-if="!state"></i>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    // todo 接收main。vue 传入的参数并渲染 ，本身不请求Ajax
-    import Ring from '@/components/Ring.vue'
+    // 数据获取ajax todo
     export default {
-        data(){
-            return{
-                timeShow: ' 00 : 00 : 00',
-                info:{
-                    state:'在线',
-                    warning:72,
-                }
+        data() {
+            return {
+                i: 3,
+                state: true,
+                time: '00:00:00',
+                dangerItem: '46',
             }
         },
         mounted() {
-            // this.timeRun();
-            // this.timer = setInterval(() => {
-            //     this.timeRun();
-            // }, 1000);
+            this.timer = setInterval(() => {
+                this.test();
+            }, 1000);
         },
         beforeDestroy() {
             clearInterval(this.timer);
         },
         methods: {
-            // 显示设备持续时间
-            timeRun() {
-                let seconds = this.seconds;
-                let hour = parseInt(seconds / 3600);
-                let r = parseInt(seconds % 3600);
-                let m = parseInt(r / 60);
-                let s = parseInt(r % 60);
-                hour = hour > 9 ? hour : '0' + hour;
-                m = m > 9 ? m : '0' + m;
-                s = s > 9 ? s : '0' + s;
-                let res = hour + " : " + m + " : " + s;
-                this.timeShow = res;
-                this.seconds += 1;
+            test: function () {
+                let house = new Date().getHours();
+                let min = new Date().getMinutes();
+                let sec = new Date().getSeconds();
+               this.time = house + ":" + min + ":" +sec;
+               this.dangerItem =  Math.floor(Math.random()*10) * 2;
+                this.state = Math.floor(Math.random()*2) == 2;
+                this.i = Math.floor(Math.random()*3);
             },
         },
-        components: {
-            Ring
-        }
     }
 </script>
 
@@ -83,12 +94,14 @@
         display: block;
         margin: 0 auto;
     }
+
     .equipinfo {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
     }
+
     .other-people {
         width: 439px;
         height: 422px;
@@ -96,82 +109,235 @@
         overflow: hidden;
         background: #000F2A;
     }
+
     .equipinfo .image-border2 {
         right: 0;
     }
+
     .equipinfo .image-border4 {
         right: 0;
     }
-    ul,li {
+
+    ul, li {
         list-style: none;
         padding: 0;
         margin: 0;
     }
-    .thisContent ul {
-        width: 80%;
-        height: 100%;
+
+    em, s, i {
+        font-style: normal;
+        text-decoration: none;
+    }
+
+    .timePart {
+        width: 385px;
+        height: 170px;
         overflow: hidden;
         display: block;
-        padding: 0 13px;
         margin: 0 auto;
-        margin-top: 60px;
+        margin-top: 120px;
     }
-    .thisContent ul li {
-        width: 120px;
-        height: 110px;
+
+    .timePart .lt {
+        width: 240px;
+        overflow: hidden;
+
         float: left;
-        margin-right: 20px;
     }
-    .thisContent ul li:nth-child(2){
-        margin-right: 0;
+
+    .timePart .rt {
+        width: 140px;
+        overflow: hidden;
+
         float: right;
     }
-    .ringCircle {
-        width: 100px;
-        height: 100px;
+
+    .timePart .lt h5 {
+        width: 100%;
         overflow: hidden;
-        border-radius: 250px;
-        border:10px solid rgba(37,146,226,0.6) ;
+        display: block;
+        margin: 0 auto;
+        font-size: 16px;
+        font-weight: normal;
+        color: #005EA2;
+        text-align: left;
     }
-    .thisContent li em {
-        position: relative;
+
+    .timePart .lt s {
+        font-size: 12px;
+    }
+
+    .timePart .lt p {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        bottom: 75px;
-        color: #67BFFF;
-        font-size: 18px;
-        text-align: center;
-        font-style: normal;
+        font-size: 72px;
+        color: #005EA2;
+        text-align: left;
+        font-family: UniDreamLED;
+        letter-spacing:8px;
     }
-    .thisContent li span {
-        position: relative;
-        bottom: 20px;
-        color: #67BFFF;
-        font-size: 16px;
-        text-align: center;
+
+    .timePart .lt span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 24px;
+        color: #005EA2;
+        text-align: right;
+
     }
-    .thisContent h5 {
-        width: 320px;
-        height: 43px;
-        line-height: 43px;
+
+    .timePart .lt span em {
+        font-family: UniDreamLED;
+    }
+
+    .timePart .lt ul {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .timePart .lt li {
+        width: 23%;
+        height: 25px;
+        background: #005EA2;
+        color: #fff;
         text-align: center;
-        color: #6DC1FF;
-        font-size: 22px;
+        float: left;
+        margin-right: 6px;
+        font-size: 12px;
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+    .timePart .lt li:nth-child(4) {
+        margin-right: 0;
+    }
+
+    .timePart .lt li i {
+        width: 90%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 5px;
+        height: 5px;
+        background: #fff;
+    }
+
+    .rt .top {
+        width: 100%;
+        height: 50px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background: #005EA2;
+        color: #fff;
+        padding-top: 3px;
+        padding-bottom: 3px;
+    }
+
+    .rt .top h5 {
+        width: 80px;
+        font-size: 24px;
         margin: 0;
-        margin-left: 41px;
-        margin-top: 60px;
-        margin-bottom: 19px;
-        background: url("../assets/img/main/bigTitle.png") top center no-repeat;
-        background-size: 100% 100%;
+        float: left;
+        text-align: left;
+        padding-left: 20px;
     }
-    .timeShow {
-        text-decoration: none;
-        line-height: 43px;
+
+    .rt .top s {
+        float: left;
+        font-size: 12px;
+        text-align: left;
+        padding-left: 20px;
+    }
+
+    .rt .top i {
+        position: relative;
+        top: -20px;
+        right: 10px;
+        float: right;
+        width: 15px;
+        height: 30px;
+        background: aliceblue;
+    }
+
+    .rt .middle {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 6px;
+        margin-bottom: 6px;
+        background: #005EA2;
+        color: #fff;
+        padding-top: 4px;
+        padding-bottom: 5px;
+    }
+
+    .middle span {
+        width: 100%;
+        margin: 0 auto;
+        display: block;
+        font-size: 14px;
+        text-align: left;
+        padding-left: 10px;
+    }
+
+    .middle s {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-size: 12px;
+    }
+
+    .rt .bottom {
+        width: 100%;
+        height: 50px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        background: #005EA2;
+        color: #fff;
+        padding-top: 3px;
+        padding-bottom: 3px;
+    }
+
+    .rt .bottom h5 {
+        width: 80px;
         font-size: 24px;
-        color: #6DC1FF;
-        text-align: center;
-        font-family: UnidreamLED;
+        margin: 0;
+        float: left;
+        text-align: left;
+        padding-left: 20px;
+    }
+
+    .rt .bottom s {
+        float: left;
+        font-size: 12px;
+        text-align: left;
+        padding-left: 20px;
+    }
+
+    .rt .bottom s {
+        font-size: 12px;
+    }
+
+    .rt .bottom i {
+        position: relative;
+        top: -20px;
+        right: 10px;
+        float: right;
+        width: 15px;
+        height: 30px;
+        background: linear-gradient(135deg,#fff 25%,#005EA2 0,
+        #005EA2 50%,#fff 0,
+        #fff 75%,#005EA2 0);
+        background-size: 12px 12px;
     }
 </style>

src/components/SingleEquipInfo2.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="equipinfo">
+        <div class="other-people">
+            <div class="image-border image-border1"></div>
+            <div class="image-border image-border2"></div>
+            <div class="image-border image-border3"></div>
+            <div class="image-border image-border4"></div>
+            <div class="other-people-title">
+                设备信息统计
+            </div>
+            <div class="thisContent">
+                <h5>设备运行时间 <s class="timeShow">{{timeShow}}</s></h5>
+                <ul>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.state}}</em>
+                        <span>设备状态</span>
+                    </li>
+                    <li>
+                        <div class="ringCircle">
+                            <Ring></Ring>
+                        </div>
+                        <em>{{info.warning}}台</em>
+                        <span>可疑事件数</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // todo 接收main。vue 传入的参数并渲染 ，本身不请求Ajax
+    import Ring from '@/components/Ring.vue'
+    export default {
+        data(){
+            return{
+                timeShow: ' 00 : 00 : 00',
+                info:{
+                    state:'在线',
+                    warning:72,
+                }
+            }
+        },
+        mounted() {
+            // this.timeRun();
+            // this.timer = setInterval(() => {
+            //     this.timeRun();
+            // }, 1000);
+        },
+        beforeDestroy() {
+            clearInterval(this.timer);
+        },
+        methods: {
+            // 显示设备持续时间
+            timeRun() {
+                let seconds = this.seconds;
+                let hour = parseInt(seconds / 3600);
+                let r = parseInt(seconds % 3600);
+                let m = parseInt(r / 60);
+                let s = parseInt(r % 60);
+                hour = hour > 9 ? hour : '0' + hour;
+                m = m > 9 ? m : '0' + m;
+                s = s > 9 ? s : '0' + s;
+                let res = hour + " : " + m + " : " + s;
+                this.timeShow = res;
+                this.seconds += 1;
+            },
+        },
+        components: {
+            Ring
+        }
+    }
+</script>
+
+<style scoped>
+    .thisContent {
+        width: 100%;
+        height: 400px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+    .equipinfo {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+    .other-people {
+        width: 439px;
+        height: 422px;
+        margin-left: 0;
+        overflow: hidden;
+        background: #000F2A;
+    }
+    .equipinfo .image-border2 {
+        right: 0;
+    }
+    .equipinfo .image-border4 {
+        right: 0;
+    }
+    ul,li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    .thisContent ul {
+        width: 80%;
+        height: 100%;
+        overflow: hidden;
+        display: block;
+        padding: 0 13px;
+        margin: 0 auto;
+        margin-top: 60px;
+    }
+    .thisContent ul li {
+        width: 120px;
+        height: 110px;
+        float: left;
+        margin-right: 20px;
+    }
+    .thisContent ul li:nth-child(2){
+        margin-right: 0;
+        float: right;
+    }
+    .ringCircle {
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        border-radius: 250px;
+        border:10px solid rgba(37,146,226,0.6) ;
+    }
+    .thisContent li em {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        bottom: 75px;
+        color: #67BFFF;
+        font-size: 18px;
+        text-align: center;
+        font-style: normal;
+    }
+    .thisContent li span {
+        position: relative;
+        bottom: 20px;
+        color: #67BFFF;
+        font-size: 16px;
+        text-align: center;
+    }
+    .thisContent h5 {
+        width: 320px;
+        height: 43px;
+        line-height: 43px;
+        text-align: center;
+        color: #6DC1FF;
+        font-size: 22px;
+        margin: 0;
+        margin-left: 41px;
+        margin-top: 60px;
+        margin-bottom: 19px;
+        background: url("../assets/img/main/bigTitle.png") top center no-repeat;
+        background-size: 100% 100%;
+    }
+    .timeShow {
+        text-decoration: none;
+        line-height: 43px;
+        font-size: 24px;
+        color: #6DC1FF;
+        text-align: center;
+        font-family: UnidreamLED;
+    }
+</style>

src/components/Watching.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="watching">
         <ul>
-            <li v-for="l in list" :class="{'red':l.WarnNum != 0}">
+            <li v-for="l in list" :class="{'yellow':l.WarnNum != 0}">
                 <span> {{l.Dettime |fmtDate }}</span>
                 <em>{{l.RegionName}} {{l.WarnString}}</em>
             </li>
@@ -81,7 +81,7 @@
         font-size: 16px;
         margin-right: 10px;
     }
-    .watching li.red {
-        color: red;
+    .watching li.yellow {
+        color: #FFDD00;
     }
 </style>

src/views/Main.vue

@@ -24,17 +24,15 @@
                                 <Watching :total-rs="totalRs"></Watching>
                             </div>
                         </div>
-                        <!--</div>-->
-                        <!--</div>-->
-                        <!--<div class="manageContainer" v-if="managePanel">-->
-                        <!--<div class="tlt">-->
-                        <!--<h5></h5>-->
-                        <!--<SmallRader  :strs="totalRs"></SmallRader>-->
-                        <!--</div>-->
-                        <!--<div class="trt">-->
-                        <!--<Loft></Loft>-->
-                        <!--</div>-->
-                        <!--</div>-->
+                        <div class="manageContainer" v-if="managePanel">
+                            <div class="tlt">
+                                <h5></h5>
+                                <SmallRader :strs="totalRs"></SmallRader>
+                            </div>
+                            <div class="trt">
+                                <Loft></Loft>
+                            </div>
+                        </div>
                         <!--<div class="RoomContainer" v-if="RoomPanel">-->
                         <!--<div class="tlt">-->
                         <!--<h5></h5>-->
@@ -94,6 +92,7 @@
     import Loft from '@/components/Loft.vue'
     import Room from '@/components/Room.vue'
     import {RegionDetInfolist} from '../api/getApiRes.js'
+
     let qs = require('qs');
     export default {
         data() {
@@ -131,7 +130,7 @@
         },
         methods: {
             changPanel(level, btn) {
-                 let that = this;
+                let that = this;
                 this.regionId = btn.Id ? btn.Id : 0;
                 if (btn == 0) {
                     // 首页单独处理
@@ -144,7 +143,7 @@
             // 根据层级和地区ID调用不同的Ajax接口
             getDate() {
                 let that = this;
-                if(that.pageLevel != 4){
+                if (that.pageLevel != 4) {
                     // 非设备层级
                     let param = {
                         token: localStorage.token,
@@ -152,7 +151,7 @@
                     };
                     let postdata = qs.stringify(param);
                     that.getRegionDetInfolist(postdata);
-                }else{
+                } else {
                     // 单个设备层级
                     // todo
                 }

src/views/Region.vue

@@ -27,9 +27,9 @@
                     <span>{{ node.label }}</span>
                       <span class="treeIcon">
                       <img src="../assets/img/region/add.png" height="18" width="18" @click="addLoft(node)"/>
-                      <img src="../assets/img/region/edit.png" height="18" width="18"/>
-                      <img src="../assets/img/region/del.png" height="18" width="18"/>
-                      <img src="../assets/img/region/watch.png" height="18" width="18"/>
+                      <img src="../assets/img/region/edit.png" height="18" width="18" @click="editLoft(node)"/>
+                      <img src="../assets/img/region/del.png" height="18" width="18" @click="delLoft(node)"/>
+                      <img src="../assets/img/region/watch.png" height="18" width="18"@click="seeLoft(node)"/>
                       </span>
                   </span>
                 </el-tree>
@@ -68,7 +68,7 @@
                     </el-col>
                     <el-col :span="20" v-if="dialog_level != 1">
                         <label>
-                            建筑平面图123
+                            建筑平面图
                         </label>
                         <el-upload
                                 action="#"
@@ -129,6 +129,7 @@
                 dialog: {
                     name: '',
                     region: '',
+                    regionId: 0,
                     memo: '',
                 },
                 dialogImageUrl: '',
@@ -151,23 +152,30 @@
         },
         methods: {
             // 获取建筑树列表
-            getDate(){
+            getDate() {
                 this.tree = [{
                     label: '1号楼',
+                    regionId: 1,
                     children: [{
                         label: '1号楼1楼',
-                        children: [{
-                            label: '第一会议室'
-                        },
+                        regionId: 6,
+                        children: [
                             {
-                                label: '第二会议室'
+                                label: '第一会议室',
+                                regionId: 10,
                             },
                             {
-                                label: '第三会议室'
+                                label: '第二会议室',
+                                regionId: 11,
+                            },
+                            {
+                                label: '第三会议室',
+                                regionId: 12,
                             }]
                     }]
                 }, {
                     label: '2号小平房',
+                    regionId: 2,
                     children: []
                 }]
             },
@@ -179,15 +187,42 @@
                 that.dialog_type = 1;
                 that.dialog_level = 1;
             },
+            // 修改弹窗
+            editLoft(node) {
+                let that = this;
+                that.dialog_state = true;
+                that.dialog_title = '修改';
+                that.dialog_type = 2;
+                that.dialog_level = node.level;
+                that.dialog.name = node.data.label;
+                that.dialog.regionId = node.data.regionId;
+                console.log(node);
+                // that.dialog_level = 1;
+            },
+            // 删除楼层
+            delLoft(node) {
+                let regionId = node.data.regionId;
+                let name = node.data.label;
+                this.$alert('是否删除'+name+'区域？', '删除操作', {
+                    confirmButtonText: '确定',
+                    callback: action => {
+                        // ajax todo
+                        this.$message({
+                            type: 'success',
+                            message: `删除成功`
+                        });
+                    }
+                })
+            },
             // 提交主建筑
             confirmAddMain() {
-                 let that = this;
-                 // checkVal
-                if(!that.dialog.name){
+                let that = this;
+                // checkVal
+                if (!that.dialog.name) {
                     this.$message.error('错了哦，主建筑名称不能空');
                     return false
                 }
-                if(that.dialog.name.length > 20){
+                if (that.dialog.name.length > 20) {
                     this.$message.error('错了哦，主建筑名称不能超过20个字符');
                     return false
                 }
@@ -199,8 +234,27 @@
                     type: 'success'
                 });
             },
+            confirmEdit() {
+                let that = this;
+                // checkVal
+                if (!that.dialog.name) {
+                    this.$message.error('错了哦，建筑名称不能空');
+                    return false
+                }
+                if (that.dialog.name.length > 20) {
+                    this.$message.error('错了哦，建筑名称不能超过20个字符');
+                    return false
+                }
+                // ajax todo
+                // ok
+                that.dialog_state = false;
+                that.$message({
+                    message: '建筑已修改',
+                    type: 'success'
+                });
+            },
             // 添加次级建筑
-            addLoft(node){
+            addLoft(node) {
                 let that = this;
                 that.dialog_state = true;
                 that.dialog_title = '添加楼层或区域';
@@ -250,16 +304,24 @@
             },
             dialog_ok() {
                 let that = this;
-                // 获取提交类型
-                switch (parseInt(that.dialog_level)) {
-                    case 1:
-                        that.confirmAddMain();
-                        break;
-                    case 2:
-                        break;
-                    case 3:
-                        break;
+                // 添加类
+                if (that.dialog_type == 1) {
+                    // 获取提交类型
+                    switch (parseInt(that.dialog_level)) {
+                        case 1:
+                            that.confirmAddMain();
+                            break;
+                        case 2:
+                            break;
+                        case 3:
+                            break;
+                    }
+                }
+                // 修改类
+                if (that.dialog_type == 2) {
+                    that.confirmEdit();
                 }
+
                 // let dialog_type = that.dialog_type;
                 // let name = that.field_name;
                 // let id = that.field_id;
@@ -273,7 +335,11 @@
             },
             handleDownload(file) {
                 console.log(file);
-            }
+            },
+            // 查看当前区域情况
+            seeLoft(node){
+                // todo
+            },
         },
         components: {
             dialog_referrer_list
@@ -470,4 +536,16 @@
         margin: 0 auto;
     }
 
+    /*upload*/
+    /deep/ .el-upload--picture-card {
+        float: left;
+        background: none;
+        border: 1px solid #005EA2;
+        color: #005EA2;
+    }
+
+    /deep/ .el-upload--picture-card i {
+        color: #005EA2;
+    }
+
 </style>