You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
6.5 KiB
239 lines
6.5 KiB
<template>
|
|
<div class="index-container">
|
|
<div class="header">
|
|
<el-row
|
|
class="header-bgimg"
|
|
:gutter="20"
|
|
type="flex"
|
|
align="middle"
|
|
justify="space-between"
|
|
>
|
|
<el-col :span="5">
|
|
<el-row align="middle">
|
|
<el-col class="header-logo">
|
|
<img src="@/assets/logo/logo.png" alt="" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="12" class="header-center">
|
|
<el-row type="flex" class="header-center-btn">
|
|
<button
|
|
v-for="item in tabs"
|
|
:key="item.id"
|
|
:class="item.type == isAcitve ? 'isActive' : ''"
|
|
@click="tabsClick(item)"
|
|
>
|
|
<a>{{ item.name }}</a>
|
|
</button>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :span="6" class="header-right">
|
|
<el-row type="flex">
|
|
<el-col style="font-size: 1.3vw">
|
|
{{ weather_weather }}
|
|
</el-col>
|
|
<!-- <span style="margin: 0 10px 1px; font-size: 1vw">|</span> -->
|
|
<el-col style="font-size: 1.5vw">{{ nowTime }}</el-col>
|
|
<el-col style="font-size: 1.5vw; white-space: nowrap">{{
|
|
nowDate
|
|
}}</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<!-- 隧道管理 -->
|
|
<tunnel v-if="isAcitve == 'tunnel'" />
|
|
<!-- 报警研判 -->
|
|
<warning v-if="isAcitve == 'warning'" />
|
|
<!-- 应急预案 -->
|
|
<contingencyPlan v-if="isAcitve == 'contingencyPlan'"></contingencyPlan>
|
|
<!-- 智能能耗 -->
|
|
<smartEnergyConsumption
|
|
v-if="isAcitve == 'smartEnergyConsumption'"
|
|
></smartEnergyConsumption>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import tunnel from "./tunnel";
|
|
import warning from "./warning";
|
|
import contingencyPlan from "./contingencyPlan";
|
|
import smartEnergyConsumption from "./smartEnergyConsumption";
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
components: {
|
|
tunnel,
|
|
warning,
|
|
contingencyPlan,
|
|
smartEnergyConsumption,
|
|
},
|
|
data() {
|
|
return {
|
|
nowTime: "",
|
|
nowMonth: "",
|
|
nowDate: "",
|
|
tabs: [
|
|
{ id: 0, name: "全视图", type: "tunnel" },
|
|
{ id: 1, name: "报警研判", type: "warning" },
|
|
{ id: 2, name: "应急处置", type: "contingencyPlan" },
|
|
{ id: 3, name: "智能能耗", type: "smartEnergyConsumption" },
|
|
],
|
|
isAcitve: this.$cache.session.get("TABSSELECT") || "tunnel", // 当前页
|
|
weather_weather: "", // 温度
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
// html字体大小设置
|
|
let htmlwidth =
|
|
document.documentElement.clientWidth || document.body.clientWidth; //有些浏览器documentElement获取不到,那就使用后面的body
|
|
console.log(htmlwidth);
|
|
// 2.htmlDom
|
|
let htmlDom = document.getElementsByTagName("html")[0];
|
|
// 3.设置根元素样式
|
|
htmlDom.style.fontSize = htmlwidth / 20 + "px"; // 记住这个20是等份的意思,这样每一份是16px,即1rem=16px;
|
|
|
|
this.getWeather();
|
|
this.initTime();
|
|
},
|
|
methods: {
|
|
// 初始化时间
|
|
initTime() {
|
|
setInterval(() => {
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
var month =
|
|
date.getMonth() + 1 < 10
|
|
? "0" + (date.getMonth() + 1)
|
|
: date.getMonth() + 1;
|
|
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
var hours =
|
|
date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
|
var minutes =
|
|
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
|
var seconds =
|
|
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
this.nowTime = hours + ":" + minutes + ":" + seconds;
|
|
this.nowDate = year + "-" + month + "-" + day;
|
|
this.nowMonth = date.toDateString().split(" ")[1];
|
|
}, 1000);
|
|
},
|
|
// 切换tabs标签页
|
|
tabsClick(item) {
|
|
if (item.type != this.isAcitve) {
|
|
this.isAcitve = item.type;
|
|
this.$cache.session.set("TABSSELECT", item.type);
|
|
}
|
|
},
|
|
// 获取天气
|
|
getWeather() {
|
|
let city = "city=济南";
|
|
let word = "tianqi";
|
|
const key = "key=0c7ebab2461621aeb2c34b3a82e4c702";
|
|
const header = "http://api.tianapi.com/txapi";
|
|
const url = `${header}/${word}/?${key}&${city}`;
|
|
axios.get(url).then((res) => {
|
|
const data = res.data.newslist[0];
|
|
this.weather_weather = data.area + ": " + data.lowest;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "~@/assets/font/font.css";
|
|
.index-container {
|
|
width: 100%;
|
|
padding: 1vw;
|
|
background-color: #004375;
|
|
height: 100%;
|
|
.header {
|
|
height: 6%;
|
|
width: 100%;
|
|
// border: solid 1px red;
|
|
margin-bottom: 1vw;
|
|
color: #09bdef;
|
|
.header-bgimg {
|
|
background: url(~@/assets/image/wire.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 10px 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: 0px !important;
|
|
margin-right: 0px !important;
|
|
|
|
.header-icon {
|
|
width: 3vw;
|
|
height: 2vw;
|
|
background-image: url(~@/assets/image/logo.png);
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.header-logo {
|
|
// width: 5vw;
|
|
// height: 2vw;
|
|
padding: 0 !important;
|
|
margin-right: 1vw;
|
|
font-size: 0;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.header-left {
|
|
white-space: nowrap;
|
|
margin-right: 10px;
|
|
h1 {
|
|
font-size: 1.5vw;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.header-right {
|
|
font-family: Montserrat-Light;
|
|
text-align: center;
|
|
.el-row {
|
|
align-items: center;
|
|
}
|
|
}
|
|
.header-center {
|
|
.header-center-btn {
|
|
button {
|
|
background-color: #143675;
|
|
width: 20%;
|
|
height: 1.5vw;
|
|
text-align: center;
|
|
transform: skewX(-45deg);
|
|
margin-right: 10px;
|
|
border-color: #09bdef;
|
|
font-size: 0.8vw;
|
|
> a {
|
|
transform: scale(0.8);
|
|
display: block;
|
|
color: white;
|
|
transform: skewX(45deg);
|
|
}
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.isActive {
|
|
background-color: #09bdef;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.body {
|
|
height: 91.5%;
|
|
color: white;
|
|
}
|
|
}
|
|
</style>
|
|
|