<template>
|
<div class="dashboard-container" style="height: 100%">
|
<el-container style="height: 100%; border: 1px solid #eee">
|
<el-aside
|
v-if="this.$store.state.aside"
|
width="260px"
|
style="background-color: rgb(238, 241, 246)"
|
>
|
<!-- 切换城市框，改成模糊查询框 -->
|
<div style="display: flex; margin-bottom: 5px">
|
<el-cascader
|
v-model="newRegion"
|
placeholder="选择省/市/区"
|
:options="options"
|
:props="{ checkStrictly: true }"
|
clearable
|
change-on-select
|
style="flex: 1"
|
/>
|
<div
|
style="
|
width: 20%;
|
line-height: 30px;
|
text-align: center;
|
background: #409eff;
|
color: #fff;
|
margin: 5px;
|
border-radius: 5px;
|
cursor: pointer;
|
font-size: 14px;
|
"
|
@click="getRegionApi"
|
>
|
查询
|
</div>
|
</div>
|
<div style="display: flex; margin-bottom: 5px">
|
<el-input
|
v-model="searchText"
|
placeholder="快速查询"
|
clearable
|
prefix-icon="el-icon-search"
|
/>
|
</div>
|
<el-menu :default-openeds="openeds" class="elwidth">
|
<el-submenu
|
v-for="(item, index) in defaultData"
|
:key="index"
|
:index="(index + 1).toString()"
|
style="border-bottom: 1px solid #eee; padding-left: 15px"
|
class="abc"
|
>
|
<template
|
slot="title"
|
class="title"
|
style="padding-left: 20px !important"
|
>
|
<!-- <i
|
style="vertical-align: -2px;font-size: 20px;margin-right:5px"
|
class="iconfont icongongsi"
|
/> -->
|
|
<span
|
style="height: 12px; display: inline-block"
|
class="circle"
|
:class="{
|
'circle-0': item.state == 0,
|
'circle-1': item.state == 1,
|
'circle-2': item.state == 2,
|
'circle-3': item.state == 3,
|
'circle-4': item.state == 4,
|
'circle-5': item.state == 5,
|
'circle-6': item.state == 6,
|
}"
|
/>
|
|
<!-- <el-button type="primary" circle /> -->
|
{{ item.name }}
|
</template>
|
<el-menu-item
|
v-for="(items, indexitem) in item.devices"
|
:key="indexitem"
|
style="
|
display: flex;
|
align-items: center;
|
padding-right: 0;
|
padding-left: 35px;
|
"
|
:index="(index + 1 + '-' + indexitem + 1).toString()"
|
@click="jump(items)"
|
>
|
<!-- <div> -->
|
<!-- <el-button type="primary" circle /> -->
|
<span
|
class="circle"
|
:class="{
|
'circle-0': items.state == 0,
|
'circle-1': items.state == 1,
|
'circle-2': items.state == 2,
|
'circle-3': items.state == 3,
|
'circle-4': items.state == 4,
|
'circle-5': items.state == 5,
|
'circle-6': items.state == 6,
|
}"
|
/>
|
<span>{{ items.name }}</span>
|
<i
|
style="
|
vertical-align: -2.5px;
|
font-size: 20px;
|
margin-left: 5px;
|
"
|
class="iconfont iconfaxianzuobiao"
|
@click="deviceDetail(items.mac, item, items, indexitem)"
|
/>
|
<!-- </div> -->
|
</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
</el-aside>
|
|
<el-container>
|
<!-- <Map :mpid="monitorPointId" :rc="regionCode" /> -->
|
<compoment
|
:is="this.$store.state.type"
|
v-if="weidu && jingdu"
|
ref="child"
|
:weidu="weidu"
|
:jingdu="jingdu"
|
:monitor-point-id="monitorPointId"
|
:monitor-point-ids="monitorPointIds"
|
:jump-data="jumpData"
|
:chart-data="lineChartData"
|
:default-data="defaultData"
|
/>
|
</el-container>
|
</el-container>
|
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
<line-chart :chart-data="lineChartData" />
|
</el-row>-->
|
</div>
|
</template>
|
|
<script>
|
// import Cookies from 'js-cookie'
|
import '@/assets/icon/iconfont.css'
|
// import $ from 'jquery'
|
import Map from '@/components/Wind/Map.vue'
|
import LineChart from '@/components/Echarts/LineChart'
|
import Charts from '@/views/charts/index'
|
import ReportForm from '@/views/reportForm/index'
|
import Bus from '@/Bus'
|
|
const lineChartData = {
|
newVisitis: {
|
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
actualData: [120, 82, 91, 154, 162, 140, 145],
|
},
|
messages: {
|
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
actualData: [180, 160, 151, 106, 145, 150, 130],
|
},
|
purchases: {
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
actualData: [120, 90, 100, 138, 142, 130, 130],
|
},
|
shoppings: {
|
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
actualData: [120, 82, 91, 154, 162, 140, 130],
|
},
|
}
|
export default {
|
components: {
|
Map,
|
LineChart,
|
Charts,
|
ReportForm,
|
// vLineChart
|
},
|
data() {
|
return {
|
openeds: [],
|
searchText: '',
|
defaultData: [],
|
defaultDataMiddle: [], // 模糊查询用做监听
|
jumpData: [],
|
// organizationId: this.$store.state.orgId,
|
organizationId: this.$store.state.orgId,
|
regionCode: this.$store.state.regionCode,
|
monitorPointId: 0,
|
monitorPointIds: [],
|
monitorPointInfo: null,
|
bg: require('@/assets/images/tl_PM10.png'),
|
lineChartData: lineChartData.purchases,
|
indexs: 0,
|
jingdu: 0,
|
weidu: 0,
|
options: [],
|
newRegion: [],
|
}
|
},
|
computed: {
|
changeCity() {
|
return this.$store.state.regionCode
|
},
|
},
|
watch: {
|
searchText(newVal, oldVal) {
|
// console.log(oldVal)
|
// console.log(newVal)
|
// defaultData是站点名，包含设备
|
// this.openeds="['1','2','3']"
|
if (newVal !== oldVal) {
|
// let that = this
|
const newDefaultData = [
|
{
|
name: '',
|
devices: [],
|
},
|
]
|
let ke = 1
|
this.defaultData.forEach((v, k, a) => {
|
for (let i = 0; i < v.devices.length; i++) {
|
// console.log(v.devices[i].name)
|
if (v.devices[i].name.match(newVal)) {
|
// console.log(v)
|
// console.log('匹配')
|
this.openeds.push((ke++).toString())
|
// return value.devices[i].name.match(newVal)
|
newDefaultData[k].name = this.defaultData[k].name
|
newDefaultData[k].devices.push(v.devices[i])
|
// this.$set(newDefaultData[k], 'name', this.defaultData[k].name)
|
// this.$set(newDefaultData[k], 'devices', v.devices[i])
|
// console.log(newDefaultData)
|
} else {
|
// console.log('不匹配')
|
// return value.name.match(newVal)
|
}
|
// console.log(newDefaultData)
|
}
|
})
|
// const newDevices = this.defaultData.filter(value => {
|
// const newDevices = this.defaultData.filter(value => {
|
// for (let i = 0; i < value.devices.length; i++) {
|
// console.log(value.devices[i].name)
|
// if (value.devices[i].name.match(newVal)) {
|
// console.log('匹配')
|
// this.openeds.push((ke++).toString())
|
// return value.devices[i].name.match(newVal)
|
// this.newDefaultData.push(value.devices[i].name.match(newVal))
|
// } else {
|
// console.log('不匹配')
|
// return value.name.match(newVal)
|
// }
|
// }
|
// })
|
// console.log(this.openeds)
|
this.defaultData = newDefaultData
|
}
|
if (newVal === '') {
|
this.defaultData = this.defaultDataMiddle
|
this.openeds = []
|
}
|
},
|
changeCity(newVal, oldVal) {
|
// console.log(newVal)
|
if (newVal !== oldVal) {
|
// this.$store.state.regionCode = newVal
|
// this.newRegion = newVal
|
this.getRegionApi()
|
}
|
},
|
},
|
beforeCreate() {
|
// this.$store.state.regionCode = this.$route.params.cName
|
},
|
created() {
|
this.getData()
|
this.getRegion()
|
},
|
methods: {
|
// 百度经纬度转高德经纬度
|
bd09togcj02(bd_lon, bd_lat) {
|
var x_pi = (3.14159265358979324 * 3000.0) / 180.0
|
var x = bd_lon - 0.0065
|
var y = bd_lat - 0.006
|
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
|
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
|
var gg_lng = z * Math.cos(theta)
|
var gg_lat = z * Math.sin(theta)
|
return [gg_lat, gg_lng]
|
},
|
// 父组件点击站点列表子组件跳转地图方法
|
jump(items) {
|
console.log(items)
|
this.jumpData = []
|
// const newLL = this.bd09togcj02(items.longitude, items.latitude)
|
const newLL = [items.latitude, items.longitude]
|
this.jumpData.push(newLL[0])
|
this.jumpData.push(newLL[1])
|
console.log(this.jumpData)
|
this.$refs.child.jumpMap(this.jumpData)
|
},
|
// 跳转设备详情页
|
deviceDetail(mac, item, items, indexs) {
|
this.$message.warning('该功能优化中，暂不支持开放')
|
// console.log('这是传输过去的值')
|
// console.log(mac)
|
// console.log(item)
|
// console.log(items)
|
// console.log(indexs)
|
// this.monitorPointInfo = item
|
// // console.log(this.monitorPointInfo)
|
// // this.$router.push({
|
// // path: '/deviceDetail/index',
|
// // query: {
|
// // macName: mac
|
// // }
|
// // })
|
// // console.log('items')
|
// // console.log(items)
|
// this.$router.push({
|
// name: 'deviceDetail',
|
// params: {
|
// monitorPointInfo: item,
|
// device: items,
|
// macName: mac,
|
// indexs: indexs,
|
// items: [items.latitude, items.longitude],
|
// },
|
// query: {
|
// monitorPointInfo: JSON.stringify(item),
|
// device: JSON.stringify(items),
|
// macName: mac,
|
// indexs: indexs,
|
// items: [items.latitude, items.longitude],
|
// },
|
// })
|
},
|
// 改变regionCode触发子组件重新请求五分钟接口功能
|
getRegionApi() {
|
// console.log('执行getRegionApi')
|
// console.log(this.newRegion[this.newRegion.length - 1])
|
this.$store.state.regionCode = this.newRegion[this.newRegion.length - 1]
|
// this.$store.state.regionCode = this.newRegion
|
this.getData()
|
this.$refs.child.getRegionApiRequest()
|
this.jump({ latitude: this.weidu, longitude: this.jingdu })
|
console.log(this.weidu, '纬度')
|
console.log(this.jingdu, '经度')
|
},
|
// 请求左侧设备数据
|
getData() {
|
this.monitorPointIds = []
|
this.$request({
|
url: '/monitorPoint/queryMonitorPoints',
|
method: 'get',
|
params: {
|
organizationId: this.organizationId,
|
regionCode: this.$store.state.regionCode,
|
},
|
})
|
.then((res) => {
|
console.log(res, '123')
|
this.monitorPointIds = []
|
// console.log(this.monitorPointIds)
|
this.weidu = res.data.monitorPoints[0].devices[0].latitude
|
this.jingdu = res.data.monitorPoints[0].devices[0].longitude
|
for (let i = 0; i < res.data.monitorPoints.length; i++) {
|
this.monitorPointIds.push(res.data.monitorPoints[i].id)
|
}
|
this.monitorPointId = res.data.monitorPoints[0].id
|
this.defaultData = res.data.monitorPoints
|
// console.log('默认defaultData数据')
|
// console.log(this.defaultData)
|
// 遍历设备最大的状态码添加到型号对象
|
let deviceState = []
|
for (let i = 0; i < this.defaultData.length; i++) {
|
deviceState = []
|
let devisesLength = 0
|
if (this.defaultData[i].devices) {
|
for (let j = 0; j < this.defaultData[i].devices.length; j++) {
|
if (
|
this.defaultData[i].devices.length > 1 &&
|
this.defaultData[i].devices[j].state === '0'
|
) {
|
devisesLength++
|
// continue
|
if (devisesLength === this.defaultData[i].devices.length) {
|
this.defaultData[i].state = 0
|
}
|
}
|
deviceState.push(this.defaultData[i].devices[j].state)
|
// console.log(deviceState)
|
}
|
}
|
this.defaultData[i].state = Math.max.apply(Math, deviceState)
|
// console.log(i, this.defaultData[i].state)
|
}
|
// console.log('新数据')
|
// console.log(this.defaultData)
|
this.defaultDataMiddle = this.defaultData
|
this.$store.state.monitorPointId = res.data.monitorPoints[0].id
|
this.$store.state.monitorPointName = res.data.monitorPoints[0].name
|
Bus.$emit('monitorPointIds', this.monitorPointIds) // 中央数据总线传递monitorPointIds
|
})
|
.catch((error) => {
|
console.log(error)
|
// console.log('失败')
|
this.defaultData = []
|
})
|
},
|
getRegion() {
|
this.$request({
|
url: '/organization/getMapPath',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId,
|
},
|
})
|
.then((res) => {
|
// console.log('请求主页getMapPath成功')
|
// console.log(res.data)
|
// console.log(res)
|
const data = res.data
|
for (let i = 0; i < data.length; i++) {
|
this.options.push({
|
value: data[i].provinceCode,
|
label: data[i].provinceName,
|
})
|
this.options[i].children = []
|
for (let j = 0; j < data[i].cities.length; j++) {
|
this.options[i].children.push({
|
value: data[i].cities[j].cityCode,
|
label: data[i].cities[j].cityName,
|
})
|
this.options[i].children[j].children = []
|
for (let k = 0; k < data[i].cities[j].areas.length; k++) {
|
this.options[i].children[j].children.push({
|
value: data[i].cities[j].areas[k].areaCode,
|
label: data[i].cities[j].areas[k].areaName,
|
})
|
}
|
}
|
}
|
})
|
.catch((err) => {
|
// console.log('请求Region失败')
|
console.log(err)
|
})
|
// console.log('请求Region结束')
|
},
|
// 请求地图数据
|
// getMap() {
|
// axios.get('http://47.99.64.149:8080/screen_api_v2/screen/newMap-page?areaCode=130900&accountId=223')
|
// .then((res) => {
|
// console.log(res)
|
// })
|
// .catch((error) => {
|
// console.log(error)
|
// console.log('失败')
|
// })
|
// }
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dashboard {
|
// &-container {
|
// margin: 30px;
|
// }
|
&-text {
|
font-size: 30px;
|
line-height: 46px;
|
}
|
}
|
.el-header {
|
background-color: #b3c0d1;
|
color: #333;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
color: #333;
|
}
|
.el-button.is-circle {
|
padding: 6px;
|
margin-right: 10px;
|
}
|
.circle {
|
padding: 6px;
|
margin-right: 10px;
|
border-radius: 50%;
|
color: #fff;
|
}
|
.circle-0 {
|
background-color: #acacac;
|
border-color: #acacac;
|
}
|
.circle-1 {
|
background-color: #00ff01;
|
border-color: #00ff01;
|
}
|
.circle-2 {
|
background-color: #fdff00;
|
border-color: #fdff00;
|
}
|
.circle-3 {
|
background-color: #ff8202;
|
border-color: #ff8202;
|
}
|
.circle-4 {
|
background-color: #fc0101;
|
border-color: #fc0101;
|
// background-color: #668bac;
|
// border-color: #668bac;
|
}
|
.circle-5 {
|
background-color: #c00261;
|
border-color: #c00261;
|
}
|
.circle-6 {
|
background-color: #9f012f;
|
border-color: #9f012f;
|
}
|
.title {
|
padding: 0 20px;
|
}
|
.elwidth {
|
width: 400px;
|
}
|
</style>
|
