<template>
|
<div class="page-container">
|
<Split v-model="split1" min="200px">
|
<div slot="left" class="demo-split-pane" style="height: 100%; overflow-y: auto;">
|
<Tree
|
:data="treeView"
|
:load-data="loadData"
|
@on-select-change="searchDeviceInfo"></Tree>
|
</div>
|
<div slot="right" class="demo-split-pane" style="height: 100%; overflow-y: auto">
|
<router-view :key="routerKey" style="padding: 16px;"></router-view>
|
</div>
|
</Split>
|
</div>
|
</template>
|
<script>
|
import {ajax, getUrlStr} from '../../libs/common';
|
export default {
|
data() {
|
var params = this.$router.currentRoute.params; // 获取路由参数
|
return {
|
params: params,
|
pagenew: true, // 标记页面第一次加载
|
split1: '260px',
|
sensor_dev_id: '',
|
routerKey: new Date().getTime(),
|
treeView: [],
|
}
|
},
|
watch: {
|
'$route': function(to, from) {
|
// 对路由变化作出响应...
|
//console.log(new Date());
|
this.routerKey = new Date().getTime();
|
}
|
},
|
methods: {
|
loadData (item, callback) {
|
// 根据item的type调用方法
|
switch(item.type) {
|
case 'province':
|
this.searchCity(item, callback);
|
break;
|
case 'city':
|
this.searchCounty(item, callback);
|
break;
|
case 'county':
|
this.searchDevice(item, callback);
|
break;
|
default:
|
callback([])
|
break;
|
}
|
},
|
searchProvince: function() { // 查询所有的省
|
var _self = this;
|
_self.treeView = [];
|
var params = this.params;
|
// 请求后台获取所有的省份
|
ajax({
|
data: null,
|
url: 'Sensor_infAction!serchProvice',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
if(rs.code ==1) {
|
var data = rs.data;
|
for(var i=0;i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data,
|
name: _data,
|
province: _data,
|
type: 'province',
|
loading: false,
|
children: []
|
};
|
var func = function(tmp) {
|
// 如果
|
if(params.province) {
|
if(_data == params.province) {
|
tmp.expand = true;
|
_self.searchCity(tmp, function(result) {
|
tmp.children = result;
|
});
|
}
|
|
}else if(i==0 && _self.pagenew) {
|
tmp.expand = true;
|
_self.searchCity(tmp, function(result) {
|
tmp.children = result;
|
});
|
}
|
}(tmp);
|
|
_self.treeView.push(tmp);
|
}
|
}
|
}
|
});
|
},
|
searchCity: function(item, callback) { // 查询某省下的所有市
|
var _self = this;
|
var params = this.params;
|
var searchParams = {
|
province: item.province
|
};
|
// 请求后台获取所有的市
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_infAction!serchCity',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data;
|
|
for(var i=0;i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data,
|
name: _data,
|
province: item.province,
|
city: _data,
|
type: 'city',
|
loading: false,
|
children: []
|
};
|
|
// 设置闭包
|
var func = function(tmp) {
|
// 如果
|
if(params.city) {
|
if(params.city == _data)
|
tmp.expand = true;
|
_self.searchCounty(tmp, function(res) {
|
tmp.children = res;
|
});
|
}else if(i==0 && _self.pagenew) {
|
tmp.expand = true;
|
_self.searchCounty(tmp, function(res) {
|
tmp.children = res;
|
});
|
}
|
}(tmp);
|
|
result.push(tmp);
|
}
|
}
|
callback(result);
|
}
|
});
|
},
|
searchCounty: function(item, callback) { // 查询某市下的所有的区县
|
var _self = this;
|
var params = this.params;
|
var searchParams = {
|
province: item.province,
|
city: item.city
|
};
|
// 请求后台获取所有的区县
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_infAction!serchCounty',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data;
|
for(var i=0;i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data,
|
name: _data,
|
province: item.province,
|
city: item.city,
|
county: _data,
|
type: 'county',
|
loading: false,
|
children: []
|
};
|
|
// 设置闭包
|
var func = function(tmp) {
|
// 如果
|
if(params.county) {
|
if(_data == params.county) {
|
tmp.expand = true;
|
_self.searchDevice(tmp, function(res) {
|
tmp.children = res;
|
});
|
}
|
|
}else if(i==0 && _self.pagenew) {
|
tmp.expand = true;
|
_self.searchDevice(tmp, function(res) {
|
tmp.children = res;
|
});
|
}
|
}(tmp);
|
|
result.push(tmp);
|
}
|
}
|
callback(result);
|
}
|
});
|
},
|
searchDevice: function(item, callback) { // 查询某区县下的所有的设备
|
var _self = this;
|
var params = this.params;
|
var searchParams = {
|
province: item.province,
|
city: item.city,
|
county: item.county
|
};
|
// 请求后台获取所有的设备
|
ajax({
|
data: 'json='+JSON.stringify(searchParams),
|
url: 'Sensor_infAction!serchDevice',
|
success: function(res) {
|
var rs = JSON.parse(res.result);
|
var result = [];
|
if(rs.code ==1) {
|
var data = rs.data;
|
//console.log(rs);
|
for(var i=0; i<data.length; i++) {
|
var _data = data[i];
|
var tmp = {
|
title: _data.device_name,
|
name: _data.device_name,
|
province: item.province,
|
city: item.city,
|
county: _data.county,
|
device_name: _data.device_name,
|
sensor_dev_id: _data.sensor_dev_id,
|
plus: _data,
|
type: 'device'
|
};
|
|
// 设置闭包
|
var func = function(tmp) {
|
// 如果
|
if(params.device_name) {
|
if(tmp.device_name == params.device_name) {
|
tmp.selected = true;
|
_self.searchDeviceInfo({}, tmp);
|
}
|
}else if(i==0 && _self.pagenew) {
|
tmp.selected = true;
|
_self.searchDeviceInfo({}, tmp);
|
}
|
}(tmp);
|
|
result.push(tmp);
|
}
|
}
|
callback(result);
|
}
|
});
|
},
|
searchDeviceInfo: function(data, item, refresh) {
|
console.log(item);
|
var _self = this;
|
var pageState = this.$store.getters.getActiveName;
|
//console.log(pageState);
|
this.pagenew = false;
|
if((item.type=='device' && this.sensor_dev_id != item.sensor_dev_id)||refresh) {
|
this.params = item;
|
this.sensor_dev_id = item.sensor_dev_id;
|
var url = getUrlStr({
|
province: item.province.trim(),
|
city: item.city.trim(),
|
county: item.county.trim(),
|
device_name: item.device_name.trim()
|
});
|
//console.log(url);
|
_self.$router.replace ('/index/data/'+url+pageState+'/');
|
}
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
// 查询省-市-区县-机房
|
this.searchProvince();
|
|
// 监测页面是实时还是历史
|
this.$bus.$off('changePageState').$on('changePageState', function(name) {
|
_self.params.type="device"
|
_self.searchDeviceInfo({}, _self.params, true);
|
});
|
}
|
}
|
</script>
|
