This commit is contained in:
parent
6b9242bceb
commit
bbe8fd48f6
|
|
@ -19,7 +19,7 @@ var proxyUrl = (module.exports = {
|
||||||
proxyTable: {
|
proxyTable: {
|
||||||
'/screen': {
|
'/screen': {
|
||||||
// target: 'http://112.29.103.165:21626',//重庆
|
// target: 'http://112.29.103.165:21626',//重庆
|
||||||
target: 'http://192.168.2.216:39080', //测试
|
target: 'http://localhost:39080', //测试
|
||||||
// target: 'http://10.40.92.74:8080',
|
// target: 'http://10.40.92.74:8080',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
// secure: true, //如果是https接口，需要配置这个参数
|
// secure: true, //如果是https接口，需要配置这个参数
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,9 @@
|
||||||
content="width=device-width, initial-scale=1.0, user-scalable=0"
|
content="width=device-width, initial-scale=1.0, user-scalable=0"
|
||||||
/>
|
/>
|
||||||
<link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
|
<link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon" />
|
||||||
|
<script async src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||||
|
<script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
|
||||||
|
<script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
|
||||||
<title>智慧仓储管理平台</title>
|
<title>智慧仓储管理平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body style="margin: 0;">
|
<body style="margin: 0;">
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,7 +7,8 @@ axios.defaults.timeout = 30000
|
||||||
// 默认配置
|
// 默认配置
|
||||||
// axios.defaults.baseURL = process.env.API_ROOT;
|
// axios.defaults.baseURL = process.env.API_ROOT;
|
||||||
// axios.defaults.baseURL = 'http://192.168.0.56:21627/bigScreen'
|
// axios.defaults.baseURL = 'http://192.168.0.56:21627/bigScreen'
|
||||||
axios.defaults.baseURL = 'screen'
|
// axios.defaults.baseURL = 'screen'
|
||||||
|
axios.defaults.baseURL = 'http://localhost:8080/screen'
|
||||||
|
|
||||||
axios.interceptors.request.use(
|
axios.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,24 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="centerTopPage">
|
<div class="centerTopPage">
|
||||||
<div class="mapBox">
|
<div class="mapBox">
|
||||||
<div v-if="type == 1" id="mapEcharts"></div>
|
<div id="mapEcharts"></div>
|
||||||
<div v-if="type == 2" id="mapEcharts2"></div>
|
|
||||||
</div>
|
|
||||||
<div class="buttonTop">
|
|
||||||
<div
|
|
||||||
:class="type == 1 ? 'on' : ''"
|
|
||||||
@click="getMapSelect(1)"
|
|
||||||
class="buttom1"
|
|
||||||
>
|
|
||||||
全国
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="type == 2 ? 'on' : ''"
|
|
||||||
@click="getMapSelect(2)"
|
|
||||||
class="buttom1"
|
|
||||||
>
|
|
||||||
全市
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -111,48 +94,6 @@ export default {
|
||||||
// }
|
// }
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
getMapSelect(type) {
|
|
||||||
let dom = document.getElementsByClassName('iconMap')
|
|
||||||
dom[0].style.display = 'none'
|
|
||||||
if (type == 1) {
|
|
||||||
this.type = 1
|
|
||||||
if (this.mapEcharts) {
|
|
||||||
this.mapEcharts.dispose()
|
|
||||||
this.mapEcharts = null
|
|
||||||
}
|
|
||||||
if (this.mapEcharts2) {
|
|
||||||
this.mapEcharts2.dispose()
|
|
||||||
this.mapEcharts2 = null
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
|
||||||
let mapJson1 = mapChinaJson
|
|
||||||
echarts.registerMap('china', mapJson1)
|
|
||||||
this.setMapOption()
|
|
||||||
}, 200)
|
|
||||||
} else {
|
|
||||||
this.type = 2
|
|
||||||
this.isCity = 1
|
|
||||||
this.getCityCount()
|
|
||||||
if (this.mapEcharts) {
|
|
||||||
this.mapEcharts.dispose()
|
|
||||||
this.mapEcharts = null
|
|
||||||
}
|
|
||||||
if (this.mapEcharts2) {
|
|
||||||
this.mapEcharts2.dispose()
|
|
||||||
this.mapEcharts2 = null
|
|
||||||
}
|
|
||||||
setTimeout(() => {
|
|
||||||
this.mapEcharts2 = echarts.init(
|
|
||||||
document.getElementById('mapEcharts2')
|
|
||||||
)
|
|
||||||
// let mapJson2 = mapJson('1515507975659761665', '')
|
|
||||||
let mapJson2 = ningxiaJson
|
|
||||||
echarts.registerMap('hs', mapJson2)
|
|
||||||
this.setMapOption2()
|
|
||||||
}, 200)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getInitData() {
|
getInitData() {
|
||||||
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
|
||||||
this.mapJson = mapChinaJson
|
this.mapJson = mapChinaJson
|
||||||
|
|
@ -175,27 +116,47 @@ export default {
|
||||||
})
|
})
|
||||||
|
|
||||||
let mapData = [
|
let mapData = [
|
||||||
|
// {
|
||||||
|
// name: '青海省',
|
||||||
|
// value: ['101.778', '36.623'],
|
||||||
|
// a: '100',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '宁夏回族自治区',
|
||||||
|
// value: ['106.278', '38.466'],
|
||||||
|
// a: '100',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '安徽省',
|
||||||
|
// value: ['117.283', '31.861'],
|
||||||
|
// a: '100',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '湖南省',
|
||||||
|
// value: ['112.982', '28.194'],
|
||||||
|
// a: '100',
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
name: '青海省',
|
name: '重庆市',
|
||||||
value: ['101.778', '36.623'],
|
value: [],
|
||||||
a: '100',
|
a: 100,
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '宁夏回族自治区',
|
|
||||||
value: ['106.278', '38.466'],
|
|
||||||
a: '100',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '安徽省',
|
|
||||||
value: ['117.283', '31.861'],
|
|
||||||
a: '100',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '湖南省',
|
|
||||||
value: ['112.982', '28.194'],
|
|
||||||
a: '100',
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
// let mapData = this.mapList.map((e) => {
|
||||||
|
// return {
|
||||||
|
// name: e.province,
|
||||||
|
// a: e.num,
|
||||||
|
// value: [],
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
|
for (let i = 0; i < mapData.length; i++) {
|
||||||
|
let geoCoord = geoCoordMap[mapData[i].name]
|
||||||
|
if (geoCoord) {
|
||||||
|
mapData[i].value = geoCoord.concat(mapData[i].value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let that = this
|
let that = this
|
||||||
this.pointAll = this.cityCount
|
this.pointAll = this.cityCount
|
||||||
this.pointAll.push({
|
this.pointAll.push({
|
||||||
|
|
@ -219,7 +180,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '重庆市',
|
name: '重庆市',
|
||||||
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
itemStyle: { normal: { areaColor: '#2187FF' } },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '河北省',
|
name: '河北省',
|
||||||
|
|
@ -323,7 +284,7 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '宁夏回族自治区',
|
name: '宁夏回族自治区',
|
||||||
itemStyle: { normal: { areaColor: '#2187FF' } },
|
itemStyle: { normal: { areaColor: '#0A2B7B' } },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '海南省',
|
name: '海南省',
|
||||||
|
|
@ -492,26 +453,27 @@ export default {
|
||||||
zlevel: 1,
|
zlevel: 1,
|
||||||
symbolSize: [45, 55],
|
symbolSize: [45, 55],
|
||||||
symbol: (value, params) => {
|
symbol: (value, params) => {
|
||||||
if (params.name == '安徽省') {
|
return 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||||
return (
|
// if (params.name == '安徽省') {
|
||||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
// return (
|
||||||
)
|
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||||
}
|
// )
|
||||||
if (params.name == '湖南省') {
|
// }
|
||||||
return (
|
// if (params.name == '湖南省') {
|
||||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
// return (
|
||||||
)
|
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||||
}
|
// )
|
||||||
if (params.name == '宁夏回族自治区') {
|
// }
|
||||||
return (
|
// if (params.name == '宁夏回族自治区') {
|
||||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
// return (
|
||||||
)
|
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||||
}
|
// )
|
||||||
if (params.name == '青海省') {
|
// }
|
||||||
return (
|
// if (params.name == '青海省') {
|
||||||
'image://' + require('@/assets/img/myImage/markPoints.png')
|
// return (
|
||||||
)
|
// 'image://' + require('@/assets/img/myImage/markPoints.png')
|
||||||
}
|
// )
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
scale: false,
|
scale: false,
|
||||||
|
|
@ -527,7 +489,7 @@ export default {
|
||||||
position: 'top',
|
position: 'top',
|
||||||
padding: [0, 0, -15, 0],
|
padding: [0, 0, -15, 0],
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.data.count
|
return params.data.a
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -563,7 +525,22 @@ export default {
|
||||||
that.mapEcharts.setOption(option) //设置option
|
that.mapEcharts.setOption(option) //设置option
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const _this = this
|
||||||
this.mapEcharts.on('click', function (params) {
|
this.mapEcharts.on('click', function (params) {
|
||||||
|
if (params.data && params.data.a > 0) {
|
||||||
|
_this.$router.push({
|
||||||
|
path: '/bigScrap/home-new',
|
||||||
|
query: { province: params.data.name, location: params.data.value },
|
||||||
|
})
|
||||||
|
} else if (params.region.count > 0) {
|
||||||
|
_this.$router.push({
|
||||||
|
path: '/bigScrap/home-new',
|
||||||
|
query: { province: params.name, location: params.region.value },
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
_this.$message.error('当前省份没有工程数据！')
|
||||||
|
}
|
||||||
|
|
||||||
if (params.seriesType === 'scatter' && !params.name) {
|
if (params.seriesType === 'scatter' && !params.name) {
|
||||||
let option = that.mapEcharts.getOption() //获得option对象
|
let option = that.mapEcharts.getOption() //获得option对象
|
||||||
// 点击变黄
|
// 点击变黄
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
<template>
|
||||||
|
<div id="map-container"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { getProjectByMapApi, getDeviceByMapApi } from '@/api/screen.js'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
projectList: [],
|
||||||
|
deviceList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// Promise.all([this.getProjectByMapData(), this.getDeviceByMapData()]).then(
|
||||||
|
// () => {
|
||||||
|
// this.initMap()
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
this.initMap()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
/** 组件销毁之前 先清除地图实例 */
|
||||||
|
// 清除地图上面的标点覆盖物 并清除地图实例
|
||||||
|
|
||||||
|
if (this.map) {
|
||||||
|
this.map.clearOverlays()
|
||||||
|
this.map.destroy()
|
||||||
|
this.map = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化地图和轨迹
|
||||||
|
initMap() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log(this.projectList, '工程信息--', this.deviceList)
|
||||||
|
const _this = this
|
||||||
|
this.map = new BMapGL.Map('map-container') // 创建地图实例
|
||||||
|
let point = new BMapGL.Point(
|
||||||
|
this.$route.query.location[0] || 117.13805,
|
||||||
|
this.$route.query.location[1] || 31.8734
|
||||||
|
) // 创建点坐标
|
||||||
|
// let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||||
|
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||||
|
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||||
|
this.map.setHeading(64.5) //设置地图旋转角度
|
||||||
|
this.map.setTilt(73) //设置地图的倾斜角度
|
||||||
|
var icon1 = new BMapGL.Icon(
|
||||||
|
require('../../assets/img/location-icon.png'),
|
||||||
|
new BMapGL.Size(30, 42),
|
||||||
|
{
|
||||||
|
anchor: new BMapGL.Size(3, 10),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
var icon2 = new BMapGL.Icon(
|
||||||
|
require('../../assets/img/project-icon.png'),
|
||||||
|
new BMapGL.Size(30, 42),
|
||||||
|
{
|
||||||
|
anchor: new BMapGL.Size(3, 10),
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
var points = []
|
||||||
|
|
||||||
|
this.projectList.forEach((e) => {
|
||||||
|
points.push({
|
||||||
|
point: new BMapGL.Point(e.longitude * 1, e.latitude * 1),
|
||||||
|
type: 1,
|
||||||
|
...e,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
this.deviceList.forEach((e) => {
|
||||||
|
points.push({
|
||||||
|
iotId: e.iotLocationVo.iotId,
|
||||||
|
voltagepercent: e.iotLocationVo.voltagepercent,
|
||||||
|
point: new BMapGL.Point(
|
||||||
|
e.iotLocationVo.callon,
|
||||||
|
e.iotLocationVo.callat
|
||||||
|
),
|
||||||
|
type: 2,
|
||||||
|
...e,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
let positionList = []
|
||||||
|
for (let i = 0; i < points.length; i++) {
|
||||||
|
let marker = new BMapGL.Marker(points[i].point, {
|
||||||
|
icon: points[i].type === 1 ? icon2 : icon1,
|
||||||
|
}) // 创建标点
|
||||||
|
marker.data = {
|
||||||
|
...points[i],
|
||||||
|
}
|
||||||
|
this.map.addOverlay(marker) // 将标点添加到地图中
|
||||||
|
|
||||||
|
positionList.push(
|
||||||
|
marker.getPosition(points[i].longitude, points[i].latitude)
|
||||||
|
)
|
||||||
|
// 可以添加标注
|
||||||
|
// this.addInfoWindow(marker, points[i].title)
|
||||||
|
|
||||||
|
if (points[i].type === 2) {
|
||||||
|
// let opts = {
|
||||||
|
// width: 320, // 信息窗口宽度
|
||||||
|
// height: 280, // 信息窗口高度
|
||||||
|
// title: points[i].typeModelName, // 信息窗口标题
|
||||||
|
// }
|
||||||
|
// const mapHtml = `<div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码：</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程：${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码：${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：在用/电量/${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置：</span></div>`
|
||||||
|
const mapHtml = `<div class='my-info-window'><h3 class='my-info-window-title'>${points[i].typeModelName}</h3><div class='my-info-window-content'><div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码：</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程：${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码：${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：在用/ 电量${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置：${points[i].iotLocationVo.address}</span></div></div></div>`
|
||||||
|
let infoWindow = new BMapGL.InfoWindow(mapHtml) // 创建信息窗口对象
|
||||||
|
// marker.openInfoWindow(infoWindow) // 打开信息窗口
|
||||||
|
// 可以绑定点击事件打开信息窗口
|
||||||
|
marker.addEventListener('mouseover', function () {
|
||||||
|
this.openInfoWindow(infoWindow, this.map.getCenter())
|
||||||
|
})
|
||||||
|
marker.addEventListener('mouseout', function () {
|
||||||
|
this.closeInfoWindow(infoWindow)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
marker.addEventListener('click', function (e) {
|
||||||
|
// infoWindow.open(this.map, marker)
|
||||||
|
// infoWindow.setPosition(marker.getPosition())
|
||||||
|
// this.map.openInfoWindow(infoWindow, this.map.getCenter())
|
||||||
|
console.log(e, '地图点击了--')
|
||||||
|
_this.$emit('openDrawer', e.target.data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
this.map.setViewport(positionList)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 获取工程和设备的标点等信息
|
||||||
|
async getProjectByMapData() {
|
||||||
|
if (this.$route.query && this.$route.query.province) {
|
||||||
|
const { data: res } = await getProjectByMapApi({
|
||||||
|
province: this.$route.query.province,
|
||||||
|
})
|
||||||
|
this.projectList = res
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取工程和设备的标点等信息
|
||||||
|
async getDeviceByMapData() {
|
||||||
|
if (this.$route.query && this.$route.query.province) {
|
||||||
|
const { data: res } = await getDeviceByMapApi({
|
||||||
|
province: this.$route.query.province,
|
||||||
|
})
|
||||||
|
this.deviceList = res
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: {
|
||||||
|
handler(newValue) {
|
||||||
|
console.log(newValue, '路由参数')
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#map-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #bfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BMap_pop > div {
|
||||||
|
background: transparent !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BMap_pop > div > div {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BMap_pop > div > img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BMap_pop > img {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ll {
|
||||||
|
height: 35px;
|
||||||
|
line-height: 35px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
border: 1px dashed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.my-info-window {
|
||||||
|
margin: 15px;
|
||||||
|
width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-info-window-title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -16,6 +16,11 @@ const routes = [
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/Layout',
|
redirect: '/Layout',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/bigScrap/home-new',
|
||||||
|
name: 'home-new',
|
||||||
|
component: () => import('@/views/newHome/index.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/Layout',
|
path: '/Layout',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
@ -52,6 +57,7 @@ const routes = [
|
||||||
requireLoginAuth: true,
|
requireLoginAuth: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -63,7 +69,7 @@ const routes = [
|
||||||
const router = new Router({
|
const router = new Router({
|
||||||
mode: 'history',
|
mode: 'history',
|
||||||
routes,
|
routes,
|
||||||
base: '/screen',
|
base: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
router.beforeEach(async (to, from, next) => {
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
|
@ -72,7 +78,7 @@ router.beforeEach(async (to, from, next) => {
|
||||||
}
|
}
|
||||||
const token = localStorage.getItem('token')
|
const token = localStorage.getItem('token')
|
||||||
if (!token) {
|
if (!token) {
|
||||||
next('/screen/login/index') // 跳转到登录页
|
next('/login/index') // 跳转到登录页
|
||||||
} else {
|
} else {
|
||||||
next() // 放行
|
next() // 放行
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,31 +19,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="center-top">
|
<div class="center-top">
|
||||||
<!-- 宁夏地图 -->
|
<!-- 宁夏地图 -->
|
||||||
<!-- <CountryMap></CountryMap> -->
|
<CountryMap></CountryMap>
|
||||||
<!-- 重庆地图 -->
|
<!-- 重庆地图 -->
|
||||||
<Center3DMap></Center3DMap>
|
<!-- <Center3DMap></Center3DMap> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="center-bottom">
|
<div class="center-bottom">
|
||||||
<CenterBottom></CenterBottom>
|
<CenterBottom></CenterBottom>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="buttom-box">
|
|
||||||
<div class="buttonTop">
|
|
||||||
<div
|
|
||||||
:class="maType == 1 ? 'on' : ''"
|
|
||||||
class="buttom1"
|
|
||||||
@click="getMapSelect(1)"
|
|
||||||
>
|
|
||||||
施工机具
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="maType == 2 ? 'on' : ''"
|
|
||||||
class="buttom1"
|
|
||||||
@click="getMapSelect(2)"
|
|
||||||
>
|
|
||||||
工器具
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 右侧数据模块列表 -->
|
<!-- 右侧数据模块列表 -->
|
||||||
<div class="rightModuleBox">
|
<div class="rightModuleBox">
|
||||||
|
|
@ -98,8 +80,8 @@ import CenterTop from '../../components/home/centerTop.vue'
|
||||||
// import Center3DMap from '../../components/home/Center3DMap.vue'
|
// import Center3DMap from '../../components/home/Center3DMap.vue'
|
||||||
import Center3DMap from '../../components/home/center3DMap_new.vue'
|
import Center3DMap from '../../components/home/center3DMap_new.vue'
|
||||||
// import Center3DMap from '../../components/home/center3DMap_new.vue'
|
// import Center3DMap from '../../components/home/center3DMap_new.vue'
|
||||||
// import CountryMap from '../../components/home/countryMap.vue'
|
import CountryMap from '../../components/home/countryMap.vue'
|
||||||
import CountryMap from '../../components/home/countryMap1.vue'
|
// import CountryMap from '../../components/home/countryMap1.vue'
|
||||||
import CenterFold from '../../components/home/centerFold.vue'
|
import CenterFold from '../../components/home/centerFold.vue'
|
||||||
import { getMaintenanceWarningApi } from '../../api/screen'
|
import { getMaintenanceWarningApi } from '../../api/screen'
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,430 @@
|
||||||
|
<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">
|
||||||
|
<dv-border-box-8>
|
||||||
|
<img src="../../assets/img/project-icon.png" alt="" />
|
||||||
|
<span>工程位置</span>
|
||||||
|
<img
|
||||||
|
src="../../assets/img/location-icon.png"
|
||||||
|
alt=""
|
||||||
|
style="margin-left: 12px"
|
||||||
|
/>
|
||||||
|
<span>定位设备位置</span>
|
||||||
|
</dv-border-box-8>
|
||||||
|
</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: 1920px;
|
||||||
|
height: 1080px;
|
||||||
|
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: 25%;
|
||||||
|
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: 50%;
|
||||||
|
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: -90px;
|
||||||
|
|
||||||
|
/deep/ .dv-border-box-8 .border-box-content {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 27px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 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>
|
||||||
Loading…
Reference in New Issue