|
|
@@ -2,16 +2,23 @@
|
|
|
<div class="home">
|
|
|
<div class="hander">
|
|
|
<div class="handertime">
|
|
|
- <div class="ledfont">10:30:00</div>
|
|
|
- <div class="date">2022-01-10 星期一</div>
|
|
|
+ <div class="ledfont">{{ getTimer(new Date()) }}</div>
|
|
|
+ <div class="date">{{ getDay(new Date()) }}</div>
|
|
|
<div class="weather"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="system">
|
|
|
- <template v-for="menu in sysmenu" >
|
|
|
- <div class="defaultbtn" v-bind:class="{ isActive: activeIndex==menu.index }" :key="menu.index" @click="menuClick(menu)">{{menu.name}}</div>
|
|
|
+ <template v-for="menu in sysmenu">
|
|
|
+ <div
|
|
|
+ class="defaultbtn"
|
|
|
+ v-bind:class="{ isActive: activeIndex == menu.index }"
|
|
|
+ :key="menu.index"
|
|
|
+ @click="menuClick(menu)"
|
|
|
+ >
|
|
|
+ {{ menu.name }}
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-<!--
|
|
|
+ <!--
|
|
|
<div class="defaultbtn" @click="dashboardClick">数据总览</div>
|
|
|
<div class="defaultbtn" @click="pipedmaClick">管网漏控</div>
|
|
|
<div class="defaultbtn">客户营销</div>
|
|
|
@@ -20,7 +27,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <router-view ></router-view>
|
|
|
+ <router-view></router-view>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -29,113 +36,140 @@
|
|
|
// @ is an alias to /src // lang='scss'
|
|
|
|
|
|
export default {
|
|
|
- name: 'Home',
|
|
|
- components: {
|
|
|
- },
|
|
|
+ name: "Home",
|
|
|
+ components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- sysmenu:[
|
|
|
- {index:'0',name:'数据总览',path:'dashboard'},
|
|
|
- {index:'1',name:'管网漏控',path:'pipedma'},
|
|
|
- {index:'2',name:'客户营销',path:'mis'},
|
|
|
- {index:'3',name:'生产工艺',path:'scada'},
|
|
|
- {index:'4',name:'视频监控',path:'video'},
|
|
|
- ],
|
|
|
- activeIndex:'0'
|
|
|
- }
|
|
|
+ sysmenu: [],
|
|
|
+ activeIndex: "0",
|
|
|
+ };
|
|
|
},
|
|
|
- created(){
|
|
|
+ created() {
|
|
|
let currentPath = this.$route.path;
|
|
|
- let currentMenu = this.sysmenu.find(menu=>{
|
|
|
- return currentPath.includes(menu.path)
|
|
|
+ let currentMenu = this.sysmenu.find((menu) => {
|
|
|
+ return currentPath.includes(menu.path);
|
|
|
});
|
|
|
- if(typeof(currentMenu) != "undefined"){
|
|
|
+ if (typeof currentMenu != "undefined") {
|
|
|
console.log(JSON.stringify(currentMenu));
|
|
|
- this.activeIndex = currentMenu.index
|
|
|
+ this.activeIndex = currentMenu.index;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
},
|
|
|
methods: {
|
|
|
- menuClick(e){
|
|
|
- console.log(JSON.stringify(e))
|
|
|
- this.activeIndex = e.index
|
|
|
- this.$router.push({name:e.path,query: {}})
|
|
|
+ menuClick(e) {
|
|
|
+ console.log(JSON.stringify(e));
|
|
|
+ this.activeIndex = e.index;
|
|
|
+ this.$router.push({ name: e.path, query: {} });
|
|
|
},
|
|
|
- dashboardClick(){
|
|
|
- this.$router.push({name:'dashboard',query: {}})
|
|
|
+ dashboardClick() {
|
|
|
+ this.$router.push({ name: "dashboard", query: {} });
|
|
|
},
|
|
|
- pipedmaClick(){
|
|
|
- this.$router.push({name:'pipedma',query: {}})
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ pipedmaClick() {
|
|
|
+ this.$router.push({ name: "pipedma", query: {} });
|
|
|
+ },
|
|
|
+ getDay(data) {
|
|
|
+ var date = new Date(data);
|
|
|
+ var y = date.getFullYear();
|
|
|
+ var m = date.getMonth() + 1;
|
|
|
+ m = m < 10 ? "0" + m : m;
|
|
|
+ var d = date.getDate();
|
|
|
+ d = d < 10 ? "0" + d : d;
|
|
|
+ var week = date.getDay();
|
|
|
+ if (week == 0) {
|
|
|
+ week = "日";
|
|
|
+ } else if (week == 1) {
|
|
|
+ week = "一";
|
|
|
+ } else if (week == 2) {
|
|
|
+ week = "二";
|
|
|
+ } else if (week == 3) {
|
|
|
+ week = "三";
|
|
|
+ } else if (week == 4) {
|
|
|
+ week = "四";
|
|
|
+ } else if (week == 5) {
|
|
|
+ week = "五";
|
|
|
+ } else if (week == 6) {
|
|
|
+ week = "六";
|
|
|
+ }
|
|
|
+ var currentdate = y + "-" + m + "-" + d + " " + "星期" + week;
|
|
|
+ return currentdate;
|
|
|
+ },
|
|
|
+ getTimer(data) {
|
|
|
+ var date = new Date(data);
|
|
|
+ var hh = date.getHours();
|
|
|
+ hh = hh < 10 ? "0" + hh : hh;
|
|
|
+ var mm = date.getMinutes();
|
|
|
+ mm = mm < 10 ? "0" + mm : mm;
|
|
|
+ var ss = date.getSeconds();
|
|
|
+ ss = ss < 10 ? "0" + ss : ss;
|
|
|
+ var time = hh + ":" + mm + ":" + ss;
|
|
|
+ return time;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss'>
|
|
|
-
|
|
|
-.home{
|
|
|
+.home {
|
|
|
height: 100%;
|
|
|
- background: url('../assets/bg.png') no-repeat;
|
|
|
- background-size:100%100%;
|
|
|
+ background: url("../assets/bg.png") no-repeat;
|
|
|
+ background-size: 100%100%;
|
|
|
// font-family: Source Han Sans CN;
|
|
|
overflow: hidden;
|
|
|
|
|
|
- .hander{
|
|
|
+ .hander {
|
|
|
margin-top: 8px;
|
|
|
height: 56px;
|
|
|
- background: url('../assets/logo.png') no-repeat;
|
|
|
- background-size:100%100%;
|
|
|
+ background: url("../assets/logo.png") no-repeat;
|
|
|
+ background-size: 100%100%;
|
|
|
// border:1px red solid;
|
|
|
- display:flex;
|
|
|
- align-items:flex-end;
|
|
|
-
|
|
|
- .handertime{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .handertime {
|
|
|
width: 500px;
|
|
|
height: 24px;
|
|
|
line-height: 24px;
|
|
|
// border:1px red solid;
|
|
|
padding-bottom: 6px;
|
|
|
- display:flex;
|
|
|
+ display: flex;
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
- div{
|
|
|
+ div {
|
|
|
// border: 1px red solid;
|
|
|
padding-bottom: 2px;
|
|
|
}
|
|
|
|
|
|
- .ledfont{
|
|
|
+ .ledfont {
|
|
|
font-size: 24px;
|
|
|
font-family: "myFont";
|
|
|
- color: #C7EAFF;
|
|
|
+ color: #c7eaff;
|
|
|
width: 100px;
|
|
|
}
|
|
|
|
|
|
- .date{
|
|
|
+ .date {
|
|
|
font-size: 16px;
|
|
|
- color: #6BBDEF;
|
|
|
+ color: #6bbdef;
|
|
|
width: 150px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .system{
|
|
|
+ .system {
|
|
|
// border: 1px red solid;
|
|
|
padding-bottom: 2px;
|
|
|
right: 24.3%;
|
|
|
position: absolute;
|
|
|
- display:flex;
|
|
|
- justify-content: flex-end;//flex-start;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end; //flex-start;
|
|
|
|
|
|
- .defaultbtn{
|
|
|
+ .defaultbtn {
|
|
|
// border: 1px red solid;
|
|
|
width: 145px;
|
|
|
height: 44px;
|
|
|
- background: url('../assets/defaultbtn.png') no-repeat;
|
|
|
- background-size:100%100%;
|
|
|
+ background: url("../assets/defaultbtn.png") no-repeat;
|
|
|
+ background-size: 100%100%;
|
|
|
font-weight: 400;
|
|
|
-
|
|
|
- color: #29B1FF;
|
|
|
- line-height: 44px;
|
|
|
+
|
|
|
+ color: #29b1ff;
|
|
|
+ line-height: 44px;
|
|
|
position: relative;
|
|
|
margin-left: -10px;
|
|
|
}
|
|
|
@@ -147,92 +181,87 @@ export default {
|
|
|
// cursor: pointer;
|
|
|
// }
|
|
|
|
|
|
- .isActive{
|
|
|
- background: url('../assets/hoverbtn.png') no-repeat;
|
|
|
- background-size:100%100%;
|
|
|
- color: #FFFFFF;
|
|
|
+ .isActive {
|
|
|
+ background: url("../assets/hoverbtn.png") no-repeat;
|
|
|
+ background-size: 100%100%;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
- .defaultbtn:hover{
|
|
|
- background: url('../assets/hoverbtn.png') no-repeat;
|
|
|
- background-size:100%100%;
|
|
|
- color: #FFFFFF;
|
|
|
+ .defaultbtn:hover {
|
|
|
+ background: url("../assets/hoverbtn.png") no-repeat;
|
|
|
+ background-size: 100%100%;
|
|
|
+ color: #ffffff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content{
|
|
|
+ .content {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 64px);
|
|
|
// border: 1px red solid;
|
|
|
}
|
|
|
}
|
|
|
- .box{
|
|
|
- /* border:1px red solid; */
|
|
|
- /* background: url('../assets/box.png') no-repeat; */
|
|
|
- background: url('../assets/box.png') left top no-repeat;
|
|
|
- background-size:100% auto;
|
|
|
- }
|
|
|
+.box {
|
|
|
+ /* border:1px red solid; */
|
|
|
+ /* background: url('../assets/box.png') no-repeat; */
|
|
|
+ background: url("../assets/box.png") left top no-repeat;
|
|
|
+ background-size: 100% auto;
|
|
|
+}
|
|
|
|
|
|
- .boxm{
|
|
|
- width: 400px;
|
|
|
- height: 400px;
|
|
|
- }
|
|
|
+.boxm {
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+}
|
|
|
|
|
|
- .boxm1{
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
- .sijiaobiankuang1{
|
|
|
-
|
|
|
- border: 1px #2BAEFD solid;
|
|
|
- background:
|
|
|
- linear-gradient(to top, #28ACFF , #28ACFF ) left top no-repeat,/*上左*/
|
|
|
- linear-gradient(to right, #28ACFF , #28ACFF ) left top no-repeat,/*左上*/
|
|
|
- linear-gradient(to left, #28ACFF , #28ACFF ) right top no-repeat,/*上右*/
|
|
|
- linear-gradient(to bottom, #28ACFF , #28ACFF ) right top no-repeat,/*上右*/
|
|
|
- linear-gradient(to left, #28ACFF , #28ACFF ) left bottom no-repeat,/*下左*/
|
|
|
- linear-gradient(to bottom, #28ACFF , #28ACFF ) left bottom no-repeat,/*左下*/
|
|
|
- linear-gradient(to top, #28ACFF , #28ACFF ) right bottom no-repeat,/*下右*/
|
|
|
- linear-gradient(to left, #28ACFF , #28ACFF ) right bottom no-repeat;/*右下*/
|
|
|
-
|
|
|
- background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px;
|
|
|
- /* background-color: rgba(36,56,128,0.21); */
|
|
|
- }
|
|
|
- .sijiaobiankuang{
|
|
|
-
|
|
|
- border: 1px #2BAEFD solid;
|
|
|
- background:
|
|
|
- linear-gradient(to top, #28ACFF , #28ACFF ) left top no-repeat,/*上左*/
|
|
|
- linear-gradient(to right, #28ACFF , #28ACFF ) left top no-repeat;/*左上*/
|
|
|
- background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
|
|
|
- /* background-color: rgba(36,56,128,0.21); */
|
|
|
- }
|
|
|
-
|
|
|
- .box1{
|
|
|
- /* border:1px red solid; */
|
|
|
- width: 200px;
|
|
|
-height: 200px;
|
|
|
-padding: 10px;
|
|
|
-border: 1px #2BAEFD solid;
|
|
|
-background-image:
|
|
|
-linear-gradient(top right, #f00 15px, #162e48 0);
|
|
|
-/* linear-gradient(-135deg, #f00 15px, #162e48 0); */
|
|
|
-/* background-image: linear-gradient(-45deg, #f00 15px, #162e48 0); */
|
|
|
-/* background-image: -webkit-linear-gradient(top,red 20%,blue 40%,green 60%,black 80%); */
|
|
|
- /* linear-gradient(transparent 10px, #0e294c 10px, #0e294c calc(100% - 10px), transparent calc(100% - 10px), transparent 100%),
|
|
|
+.boxm1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+}
|
|
|
+.sijiaobiankuang1 {
|
|
|
+ border: 1px #2baefd solid;
|
|
|
+ background: linear-gradient(to top, #28acff, #28acff) left top no-repeat,
|
|
|
+ /*上左*/ linear-gradient(to right, #28acff, #28acff) left top no-repeat,
|
|
|
+ /*左上*/ linear-gradient(to left, #28acff, #28acff) right top no-repeat,
|
|
|
+ /*上右*/ linear-gradient(to bottom, #28acff, #28acff) right top no-repeat,
|
|
|
+ /*上右*/ linear-gradient(to left, #28acff, #28acff) left bottom no-repeat,
|
|
|
+ /*下左*/ linear-gradient(to bottom, #28acff, #28acff) left bottom no-repeat,
|
|
|
+ /*左下*/ linear-gradient(to top, #28acff, #28acff) right bottom no-repeat,
|
|
|
+ /*下右*/ linear-gradient(to left, #28acff, #28acff) right bottom no-repeat; /*右下*/
|
|
|
+
|
|
|
+ background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px;
|
|
|
+ /* background-color: rgba(36,56,128,0.21); */
|
|
|
+}
|
|
|
+.sijiaobiankuang {
|
|
|
+ border: 1px #2baefd solid;
|
|
|
+ background: linear-gradient(to top, #28acff, #28acff) left top no-repeat,
|
|
|
+ /*上左*/ linear-gradient(to right, #28acff, #28acff) left top no-repeat; /*左上*/
|
|
|
+ background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
|
|
|
+ /* background-color: rgba(36,56,128,0.21); */
|
|
|
+}
|
|
|
+
|
|
|
+.box1 {
|
|
|
+ /* border:1px red solid; */
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px #2baefd solid;
|
|
|
+ background-image: linear-gradient(top right, #f00 15px, #162e48 0);
|
|
|
+ /* linear-gradient(-135deg, #f00 15px, #162e48 0); */
|
|
|
+ /* background-image: linear-gradient(-45deg, #f00 15px, #162e48 0); */
|
|
|
+ /* background-image: -webkit-linear-gradient(top,red 20%,blue 40%,green 60%,black 80%); */
|
|
|
+ /* linear-gradient(transparent 10px, #0e294c 10px, #0e294c calc(100% - 10px), transparent calc(100% - 10px), transparent 100%),
|
|
|
linear-gradient(90deg, transparent 10px, #0e294c 10px, #0e294c calc(100% - 10px), transparent calc(100% - 10px), transparent 100%),
|
|
|
linear-gradient(#4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%),
|
|
|
linear-gradient(90deg, #4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%); */
|
|
|
-background-repeat: no-repeat;
|
|
|
-background-position: top left, top left, bottom right, bottom right;
|
|
|
-background-size: 100% 100%, 100% 100%;
|
|
|
- }
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top left, top left, bottom right, bottom right;
|
|
|
+ background-size: 100% 100%, 100% 100%;
|
|
|
+}
|
|
|
|
|
|
- .box2{
|
|
|
- /* border:1px red solid; */
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
+.box2 {
|
|
|
+ /* border:1px red solid; */
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+}
|
|
|
</style>
|
bulusiLuo
