<template>
|
<div class="d-flex align-items-stretch flex-grow-1 pr">
|
<!-- 左侧条件区 start -->
|
<!-- 侧边栏按钮 start -->
|
<div
|
class="toggleOpen-btn bg-dark"
|
:class="!isOpenTree?'isShow':''"
|
v-if="!isOpenTree"
|
style="z-index:9"
|
>
|
<b-button variant="link" class="tree-btn" @click="isOpenTree = !isOpenTree">
|
<i class="ion ion-md-swap f20 text-white"></i>
|
</b-button>
|
</div>
|
<!-- 侧边栏按钮 end -->
|
<div class="bg-white home-sidenav border-right" :class="isOpenTree?'w-20':'w-0'">
|
<div class="pl-2 pr-2" style="min-width:200px">
|
<b-button variant="link" class="tree-btn" @click="isOpenTree = !isOpenTree">
|
<i class="ion ion-md-swap f20"></i>
|
</b-button>
|
</div>
|
</div>
|
<!-- 左侧条件区 edn -->
|
<!-- 右侧内容区 start -->
|
<div class="flex-grow-1" :class="isOpenTree?'w-80':''">
|
<!-- 右侧 标题 start -->
|
<div class="py-3 bg-white border-bottom mb-4 clearfix">
|
<div class="row">
|
<div class="col-md-2 d-flex">
|
<div style="height:40px;"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 右侧 标题 end -->
|
<div class="container-p-x">
|
<div class="row bg-white pb-2 px-2 border overflow-auto mb30">
|
<div class="col-md-12 col-lg-12">
|
<!-- 集群按钮 非集群按钮 start -->
|
<!-- <div v-if="tabType!=='map'" class="d-flex">
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'commonList'?'active':'']"
|
@click="tableType='commonList'"
|
>commonList</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'compareList'?'active':'']"
|
@click="tableType='compareList'"
|
>compareList</div>
|
<div class="flex-vertical-center px-3">
|
<span class="text-light">|</span>
|
</div>
|
<div
|
variant="link"
|
:class="['table-type-btns',tableType === 'mapList'?'active':'']"
|
@click="tableType='mapList'"
|
>mapList</div>
|
</div>-->
|
<!-- 集群按钮 非集群按钮 end -->
|
<div style="height:76vh">
|
<!-- <view-map ref="mapDevice" v-if="tabType==='map'"
|
:content="content"
|
:currentItem="currentItem"/>
|
<map ref="mapDevice" v-if="tabType==='map'"
|
:searchName="searchName"
|
:currentItem="currentItem"
|
></map>-->
|
<!-- <view-table-local
|
ref="viewTableLocal"
|
v-if="tabType==='table' && tableType ==='local'"
|
@add-device="showDeviceModel"
|
:content="content"
|
:currentItem="currentItem"
|
@del-device-success="deviceDel"
|
/>
|
<view-table-colony
|
ref="viewTableColony"
|
v-if="tabType==='table' && tableType ==='colony'"
|
:content="content"
|
:analysis="analysis"
|
:currentColonyItem="currentColonyItem"
|
@del-colony-success="colonyDel"
|
/>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { DatePicker, Input, Button } from 'element-ui'
|
let allMinDate = ''
|
export default {
|
name: 'home',
|
metaInfo: {
|
title: '首页'
|
},
|
components: {
|
elButton: Button,
|
elInput: Input,
|
elDatePicker: DatePicker
|
},
|
data() {
|
return {
|
mapParam: {},
|
leftMap: [],
|
pickerOptions: {
|
disabledDate(time) {
|
if (allMinDate) {
|
return (
|
time.getTime() > Date.now() ||
|
time > new Date(allMinDate.getTime() + 3600 * 1000 * 24 * 90) ||
|
time < new Date(allMinDate.getTime() - 3600 * 1000 * 24 * 90)
|
)
|
}
|
return time.getTime() > Date.now()
|
},
|
onPick({ maxDate, minDate }) {
|
allMinDate = minDate
|
},
|
shortcuts: [
|
{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}
|
]
|
},
|
userInfo: this.$store.getters.basicUserInfo,
|
isShowBar: false,
|
tabType: 'map', // table , map
|
tableType: 'commonList', // commonList 通用 compareList 比较 mapList
|
isOpenTree: true,
|
treeData: [],
|
currentItem: {
|
type: 'areaTree',
|
node: { id: '0', type: 'MENU', name: '平台设备' }
|
},
|
/* 检索条件 */
|
// 记录
|
recordData: {
|
valNames: ['全部记录'],
|
dataBaseList: [],
|
recordType: '',
|
data: null
|
},
|
// 分析
|
sdkData: {
|
valNames: ['全部分析'],
|
sdkType: [],
|
data: null
|
},
|
// 日期
|
dateTime: [],
|
// 关键字
|
content: '', // 后台
|
searchName: '', // 前台自用
|
isOpenColony: false,
|
|
// 弹窗使用
|
BigPic: {},
|
accompanyPerson: {},
|
childrenData: {},
|
// 搜图对比阈值
|
threshold: 60,
|
/** mapModel2用 */
|
mapModel2params: {}
|
}
|
},
|
watch: {},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
userId() {
|
return this.$store.getters.basicUserInfo.id
|
},
|
selectBarList() {
|
const list = [
|
{
|
title: '记录',
|
type: 'selectTypeLibrary',
|
value:
|
this.recordData && this.recordData.valNames
|
? this.recordData.valNames.join('/')
|
: '全部记录'
|
},
|
{
|
title: '分析',
|
type: 'selectKeyword',
|
value:
|
this.sdkData && this.sdkData.valNames
|
? this.sdkData.valNames.join('/')
|
: '全部分析'
|
},
|
{
|
title: '关键词',
|
type: 'search',
|
value: this.content
|
}
|
]
|
return list
|
}
|
},
|
methods: {
|
|
setDataTimeVal(val) {
|
if (val === null) {
|
this.$toast({
|
type: 'error',
|
message: '抱歉，检索必须选择时间，已经为您重置近一个月的时间'
|
})
|
// 日期插件赋值
|
this.dateTime = this.getDateInit()
|
}
|
},
|
getDateInit() {
|
// 要求 默认一个月
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
// 霍文博添加 尔松需要的时间参数写入h5本地存储
|
let json = {
|
startDate: this.$moment(start).format('YYYY-MM-DD HH:mm:ss'),
|
endDate: this.$moment(end).format('YYYY-MM-DD HH:mm:ss')
|
}
|
localStorage.setItem('sear', JSON.stringify(json))
|
/// //////////////////////////////////////////////////////////////
|
return [
|
this.$moment(start).format('YYYY-MM-DD HH:mm:ss'),
|
this.$moment(end).format('YYYY-MM-DD HH:mm:ss')
|
]
|
},
|
// * 获取组织树
|
getOrgDevice(data) {
|
return new Promise((resolve, reject) => {
|
if (!data) {
|
reject(new Error('递归函数传入参数存在问题！！！'))
|
}
|
const list = []
|
const _recursionFn = data => {
|
for (let item of data) {
|
if (item.type !== 'MENU' && item.type > 2) {
|
// resolve(item)
|
list.push(item)
|
} else if (item.child) {
|
_recursionFn(item.child)
|
}
|
}
|
}
|
_recursionFn(data)
|
resolve(list)
|
})
|
},
|
async getIndeviceid({ type = 'areaTree', node }) {
|
if (node.id === 0) {
|
// 查询某种全部直接返回
|
return {
|
cluId: type,
|
indeviceid: []
|
}
|
}
|
let list = await this.getOrgDevice([node])
|
list = list.map(item => item.id)
|
return {
|
cluId: '',
|
indeviceid: list
|
}
|
},
|
/* 搜索框 */
|
handleSearch() {
|
/* 检索框 实际赋值 */
|
this.content = this.searchName
|
|
this.getIndeviceid(this.currentItem)
|
let params = {
|
currentItem: this.currentItem,
|
recordData: this.recordData,
|
sdkData: this.sdkData,
|
dateTime: this.dateTime,
|
content: this.content
|
}
|
if (this.tabType === 'map') {
|
this.$refs.mapDevice && this.$refs.mapDevice.findDeviceByParams(params)
|
} else if (this.tableType === 'commonList') {
|
// 公共list
|
console.log(params, '调用列入表前的参数')
|
this.$refs.commonList && this.$refs.commonList.getList(params)
|
// this.$refs.viewTableLocal && this.$refs.viewTableLocal._initData()
|
} else if (this.tableType === 'compareList') {
|
// 比较list
|
this.$refs.compareList && this.$refs.compareList.getList(params)
|
}
|
}
|
},
|
created() {
|
},
|
mounted() {
|
}
|
}
|
</script>
|
<style lang="scss" >
|
.ui-icon-lg {
|
font-size: 30px;
|
width: 60px;
|
height: 60px;
|
line-height: 60px !important;
|
}
|
.home-sidenav {
|
transition: all 0.5s;
|
overflow: hidden;
|
}
|
@media (max-width: 1000px) {
|
.home-sidenav {
|
position: fixed;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
width: 320px !important;
|
}
|
}
|
.w-20 {
|
width: 20%;
|
}
|
.w-80 {
|
width: 80%;
|
}
|
.w-0 {
|
width: 0%;
|
}
|
.toggleOpen-btn {
|
border-radius: 5px;
|
position: absolute;
|
left: -8px;
|
top: 3.5rem;
|
transition: all 2s;
|
opacity: 0;
|
}
|
.toggleOpen-btn.isShow {
|
opacity: 1;
|
}
|
|
.table-switch-btn {
|
height: 40px;
|
line-height: 30px;
|
font-size: 30px;
|
padding: 5px 8px;
|
color: #ccc;
|
cursor: pointer;
|
&.active {
|
color: #35bde7;
|
}
|
}
|
.bg-grid {
|
background: #ccc;
|
}
|
.btn-circle {
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
text-align: center;
|
padding: 0;
|
}
|
.shrink {
|
padding: 2px 0;
|
text-align: center;
|
.shrink-btn {
|
width: 200px;
|
height: 10px;
|
line-height: 5px;
|
text-align: center;
|
margin: 0 auto;
|
border-radius: 5px;
|
cursor: pointer;
|
transition: all 1s;
|
background: #ccc;
|
/* 抑制选中 */
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
user-select: none;
|
span {
|
margin-top: -4px;
|
color: #fff;
|
font-size: 15px;
|
}
|
}
|
&:hover .shrink-btn {
|
background: #35bde7;
|
}
|
}
|
</style>
|
