436 lines
10 KiB
Vue
436 lines
10 KiB
Vue
<template>
|
|
<div class="screen-container">
|
|
<div class="data-v-container" :key="key">
|
|
<div class="title-bg">
|
|
<div class="btn-content">
|
|
<el-button
|
|
size="medium"
|
|
type="primary"
|
|
@click="
|
|
() => {
|
|
$router.go(-1)
|
|
}
|
|
"
|
|
>返回</el-button
|
|
>
|
|
<el-button size="medium" type="primary" @click="goBackstage"
|
|
>后台管理</el-button
|
|
>
|
|
</div>
|
|
|
|
<!-- 获取天气 -->
|
|
<div class="weather">
|
|
<div class="weather_box">
|
|
<div><img alt="" src="../../assets/img/myImage//time.png" /></div>
|
|
<div class="dateTimeString">{{ dateTimeString }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<NewMap @openDrawer="openDrawer" />
|
|
<div class="screen-left">
|
|
<LeftOne />
|
|
<LeftTwo />
|
|
<LeftFour />
|
|
<!-- <dv-border-box-11 class="left-container">
|
|
|
|
</dv-border-box-11> -->
|
|
<!-- <div class="left-container">
|
|
<LeftTwo />
|
|
</div>
|
|
|
|
<div class="left-container">
|
|
<LeftThree />
|
|
</div> -->
|
|
</div>
|
|
<div class="screen-center">
|
|
<!-- <CenterFold /> -->
|
|
<CenterBottom />
|
|
<div class="tip-container">
|
|
<div class="loginCss">
|
|
<img src="../../assets/img/project-icon.png" alt="" />
|
|
<span>工程位置</span>
|
|
<img
|
|
src="../../assets/img/location-icon.png"
|
|
alt=""
|
|
style="margin-left: 12px"
|
|
/>
|
|
<span>定位设备位置</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="screen-right">
|
|
<RightOne />
|
|
<rightTwo />
|
|
<rightThree />
|
|
<LeftThree></LeftThree>
|
|
<!-- <div class="right-container">
|
|
<RightOne />
|
|
</div> -->
|
|
<!-- <div class="right-container">
|
|
|
|
</div>
|
|
<div class="right-container">
|
|
<RightThree />
|
|
</div>
|
|
<div class="right-container">
|
|
<CenterBottom />
|
|
</div> -->
|
|
</div>
|
|
<!-- <div class="screen-left">
|
|
<div class="left-container">
|
|
<LeftOne />
|
|
</div>
|
|
<div class="left-container">
|
|
<LeftTwo />
|
|
</div>
|
|
|
|
<div class="left-container">
|
|
<LeftThree />
|
|
</div>
|
|
</div>
|
|
<div class="screen-content"></div>
|
|
<div class="screen-right">
|
|
<div class="right-container">
|
|
<RightOne />
|
|
</div>
|
|
<div class="right-container">
|
|
<RightTwo />
|
|
</div>
|
|
<div class="right-container">
|
|
<RightThree />
|
|
</div>
|
|
<div class="right-container">
|
|
<CenterBottom />
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- <div class="new-map-container">
|
|
<NewMap />
|
|
</div> -->
|
|
|
|
|
|
<!-- <el-drawer
|
|
:visible.sync="drawer"
|
|
v-if="drawer"
|
|
:with-header="false"
|
|
:direction="direction"
|
|
size="80%"
|
|
>
|
|
<DrawerProject :queryParams="queryParams" v-if="drawerType == 1" />
|
|
<DrawerDevice :queryParams="queryParams" v-else />
|
|
<img
|
|
@click="
|
|
() => {
|
|
drawer = false
|
|
}
|
|
"
|
|
class="closeIcon"
|
|
src="../../assets/img/close.png"
|
|
/>
|
|
</el-drawer> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CenterFold from '../../components/home/centerFold.vue'
|
|
import CountryMap from '../../components/home/countryMap.vue'
|
|
import LeftOne from '../../components/home/leftOne.vue'
|
|
import LeftTwo from '../../components/home/leftTwo.vue'
|
|
import LeftThree from '../../components/home/leftThree.vue'
|
|
import LeftFour from '../../components/home/leftFour.vue'
|
|
import RightOne from '../../components/home/rightOne.vue'
|
|
import rightTwo from '../../components/home/rightTwo.vue'
|
|
import rightThree from '../../components/home/rightThree.vue'
|
|
import RightFour from '../../components/home/rightFour.vue'
|
|
import CenterBottom from '../../components/home/centerBottom.vue'
|
|
import NewMap from '../../components/home/new-map.vue'
|
|
// import DrawerProject from './components/drawer-project.vue'
|
|
// import DrawerDevice from './components/drawer-device.vue'
|
|
export default {
|
|
components: {
|
|
CenterFold,
|
|
CountryMap,
|
|
LeftOne,
|
|
LeftTwo,
|
|
LeftThree,
|
|
LeftFour,
|
|
RightOne,
|
|
rightTwo,
|
|
rightThree,
|
|
RightFour,
|
|
NewMap,
|
|
CenterBottom,
|
|
// DrawerProject,
|
|
// DrawerDevice,
|
|
},
|
|
data() {
|
|
return {
|
|
key: 0,
|
|
drawer: false,
|
|
direction: 'ltr',
|
|
drawerType: null,
|
|
maType: 1,
|
|
// 地图点击时的查询参数
|
|
queryParams: null,
|
|
dateTimeString: '',
|
|
}
|
|
},
|
|
mounted() {},
|
|
mounted() {
|
|
this.getCurrentDateTime()
|
|
setInterval(this.getCurrentDateTime, 1000)
|
|
// let that = this
|
|
// AMap.plugin('AMap.CitySearch', function () {
|
|
// var citySearch = new AMap.CitySearch()
|
|
// citySearch.getLocalCity(function (status, result) {
|
|
// if (status === 'complete' && result.info === 'OK') {
|
|
// AMap.plugin('AMap.Weather', function () {
|
|
// var weather = new AMap.Weather();
|
|
// weather.getLive('宁夏回族自治区', function (err, data) {
|
|
// // console.log(err, data);
|
|
// that.weatherData = data
|
|
// that.weatherUrl = data.weather == '晴' ? ONE : data.weather == '多云' ? TWO : data.weather == '中雪' ? THREE : ''
|
|
// });
|
|
// })
|
|
// }
|
|
// })
|
|
// })
|
|
// this.getWeather()
|
|
this.getMapSelect(this.maType)
|
|
// getMaintenanceWarningApi().then((res) => {
|
|
// this.transformList = res.data
|
|
// })
|
|
},
|
|
methods: {
|
|
openDrawer(query) {
|
|
this.queryParams = query
|
|
// console.log(query, 'c参数')
|
|
this.drawerType = query.type
|
|
this.drawer = true
|
|
},
|
|
routerClick() {
|
|
this.$router.go()
|
|
},
|
|
getMapSelect(type) {
|
|
if (type == 1) {
|
|
this.maType = 1
|
|
this.$nextTick(() => {
|
|
this.$eventBus.$emit('maType', this.maType)
|
|
})
|
|
} else {
|
|
this.maType = 2
|
|
this.$nextTick(() => {
|
|
this.$eventBus.$emit('maType', this.maType)
|
|
})
|
|
}
|
|
},
|
|
async getWeather() {
|
|
try {
|
|
const res = await axios.get(
|
|
'https://api.map.baidu.com/weather/v1/?district_id=110000&data_type=all&ak=YOUR_AK'
|
|
)
|
|
// 处理返回结果
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
},
|
|
getCurrentDateTime() {
|
|
const date = new Date()
|
|
const year = date.getFullYear()
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
|
const day = date.getDate().toString().padStart(2, '0')
|
|
const weekdays = [
|
|
'星期日',
|
|
'星期一',
|
|
'星期二',
|
|
'星期三',
|
|
'星期四',
|
|
'星期五',
|
|
'星期六',
|
|
]
|
|
const weekday = weekdays[date.getDay()]
|
|
const hours = date.getHours().toString().padStart(2, '0')
|
|
const minutes = date.getMinutes().toString().padStart(2, '0')
|
|
const seconds = date.getSeconds().toString().padStart(2, '0')
|
|
const dateTimeString = `${year}/${month}/${day} ${weekday} ${hours}:${minutes}:${seconds}`
|
|
this.dateTimeString = dateTimeString
|
|
},
|
|
|
|
goBackstage() {
|
|
location.href = 'http://192.168.0.14:21624/index'
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.screen-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../../assets/img/myImage/screenBg.png) no-repeat center;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.new-map-container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
// opacity: 0.6;
|
|
}
|
|
|
|
.data-v-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
// display: flex;
|
|
.screen-left,
|
|
.screen-right {
|
|
width: 23%;
|
|
margin-top: 87px;
|
|
height: calc(100% - 87px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
z-index: 9;
|
|
}
|
|
|
|
.title-bg {
|
|
height: 87px;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: skyblue;
|
|
background: url('../..//assets/img/myImage/screenBg.png') no-repeat;
|
|
background-size: 100%, 100%;
|
|
z-index: 8;
|
|
|
|
.btn-content {
|
|
position: absolute;
|
|
right: 45px;
|
|
bottom: 8px;
|
|
}
|
|
|
|
.weather {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 15%;
|
|
|
|
.weather_box {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-content: center;
|
|
flex-wrap: nowrap;
|
|
|
|
.dateTimeString {
|
|
font-size: 14px;
|
|
font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 18px;
|
|
letter-spacing: 0.1em;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.screen-left {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
// background: linear-gradient(to right, #182151, #d2d6e3);
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(11, 20, 71, 1) 0%,
|
|
rgba(11, 20, 71, 0.9) 32%,
|
|
rgba(11, 20, 70, 0.5) 70%,
|
|
rgba(11, 20, 71, 0.1) 100%
|
|
);
|
|
}
|
|
|
|
.screen-right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
background: linear-gradient(
|
|
-90deg,
|
|
rgba(11, 20, 71, 1) 0%,
|
|
rgba(11, 20, 71, 0.9) 32%,
|
|
rgba(11, 20, 70, 0.5) 70%,
|
|
rgba(11, 20, 71, 0.3) 100%
|
|
);
|
|
}
|
|
|
|
.screen-center {
|
|
width: 54%;
|
|
height: 30%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(11, 20, 71, 1) 0%,
|
|
rgba(11, 20, 71, 0.9) 32%,
|
|
rgba(11, 20, 70, 0.5) 70%,
|
|
rgba(11, 20, 71, 0.1) 100%
|
|
);
|
|
z-index: 9;
|
|
|
|
.tip-container {
|
|
position: absolute;
|
|
height: 60px;
|
|
right: 30px;
|
|
width: 260px;
|
|
top: -50px;
|
|
|
|
.loginCss {
|
|
width: 85%;
|
|
padding: 0 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color:black;
|
|
border: 2px solid #34586b;
|
|
border-radius:4px;
|
|
|
|
img {
|
|
width: 27px;
|
|
height: 32px;
|
|
margin-top:5px;
|
|
margin-right: 5px;
|
|
margin-bottom:5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-container {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
/deep/.el-drawer {
|
|
overflow: visible;
|
|
background: transparent;
|
|
}
|
|
|
|
.closeIcon {
|
|
width: 27px;
|
|
height: 72px;
|
|
position: absolute;
|
|
right: -27px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
cursor: pointer;
|
|
}
|
|
</style>
|