Files
app-govern/pages/index/comp/device.vue
2024-09-02 09:50:59 +08:00

351 lines
13 KiB
Vue

<template>
<view class="index-device">
<view class="nav" :style="{ top: navTabHeight + 'px' }">
<!-- <view class="nav-menu" :class="{ 'nav-menu-active': select.engineeringName }" @click="openDrawer"
>{{ select.engineeringName || '工程' }}
</view> -->
<picker
@change="projectNameChange"
@cancel="selectProject = false"
:value="select.projectNameIndex"
:range="projectList"
range-key="text"
v-if="store.params.engineerId"
>
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectName }" @click="selectProject = true">
{{
select.projectName
? select.projectName.length > 12
? select.projectName.substring(0, 12) + '...'
: select.projectName
: '全部项目'
}}
<uni-icons
type="top"
size="14"
:color="select.projectName ? '#376cf3' : '#666'"
v-if="selectProject"
></uni-icons>
<uni-icons
type="bottom"
size="14"
:color="select.projectName ? '#376cf3' : '#666'"
v-else
></uni-icons>
</view>
</picker>
<view style="flex: 1"></view>
<template v-if="transfer || share">
<view class="nav-menu nav-menu-btn" @click="cancel">取消</view>
<view class="nav-menu nav-menu-btn" @click="submit">确定</view>
</template>
<template v-else-if="deviceListFilter.length">
<view
class="nav-menu nav-menu-btn"
@click="selectDevice('transfer')"
v-if="userInfo.authorities === 'app_vip_user' || userInfo.authorities === 'engineering_user'"
>移交
</view>
<view
class="nav-menu nav-menu-btn"
@click="selectDevice('share')"
v-if="userInfo.authorities === 'app_vip_user'"
>分享
</view>
</template>
<!-- <picker @change="projectTypeChange" :value="select.projectTypeIndex" :range="projectType" range-key="text">
<view class="nav-menu" :class="{ 'nav-menu-active': select.projectType }"
>{{ select.projectType || '类型' }}
</view>
</picker> -->
</view>
<view class="content device" :style="{ minHeight: minHeight }">
<Cn-device-card v-for="(item, index) in deviceListFilter" :device="item" :key="index">
<template v-slot:title v-if="transfer || share">
<!-- 卡片标题 -->
<view class="uni-card__header">
<view class="uni-card__header-box">
<view class="uni-card__header-avatar">
<image
class="uni-card__header-avatar-image"
:src="deviceIcon(item.runStatus)"
mode="aspectFit"
/>
</view>
<view class="uni-card__header-content">
<text class="uni-card__header-content-title uni-ellipsis">
{{ item.equipmentName }}
</text>
<text class="uni-card__header-content-subtitle uni-ellipsis">
{{ item.mac }}
</text>
</view>
</view>
<view class="uni-card__header-extra" style="position: relative">
<switch
:checked="checkList.indexOf(item.equipmentId) > -1"
style="transform: scale(0.8); position: relative; left: 20rpx"
@change="switchChange(item)"
/>
</view>
</view>
</template>
</Cn-device-card>
<uni-load-more
v-if="store.status == 'loading' || deviceListFilter.length > 0"
:status="store.status"
></uni-load-more>
<Cn-empty v-else></Cn-empty>
</view>
</view>
</template>
<script>
import { getProjectList } from '@/common/api/project'
import { queryDictData } from '@/common/api/dictionary'
export default {
props: {
store: {
type: Object,
default: {},
},
},
data() {
return {
loading: false,
transfer: false,
share: false,
checkList: [],
select: {
projectName: '',
projectNameIndex: 0,
projectType: '',
projectTypeIndex: 0,
},
minHeight: 0,
navTabHeight: 0,
engineeringList: [],
projectList: [],
projectType: [],
userInfo: {},
selectProject: false,
}
},
computed: {
deviceListFilter() {
let arr = this.store.data.filter((item) => {
if (this.select.projectName && this.select.projectType) {
return item.project === this.select.projectName && item.type === this.select.projectType
} else if (this.select.projectName) {
return item.projectId === this.projectList[this.select.projectNameIndex].id
} else if (this.select.projectType) {
return item.projectType === this.projectType[this.select.projectTypeIndex].id
} else {
return true
}
})
if (this.transfer || this.share) {
return arr.filter((item) => {
return item.isPrimaryUser === '1' //&& item.process == 4
})
} else {
return arr
}
},
},
created() {
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
},
mounted() {},
methods: {
selectDevice(type) {
if (this.deviceListFilter.findIndex((item) => item.isPrimaryUser === '1') === -1) {
this.$util.toast('没有可操作的设备')
} else {
this[type] = true
}
},
deviceIcon(e) {
let str = ''
switch (e) {
case 1:
str = '/static/device_bad.png'
break
case 2:
str = '/static/device.png'
break
default:
str = '/static/device.png'
break
}
return str
},
switchChange(e) {
console.log(e)
let index = this.checkList.indexOf(e.equipmentId)
if (index > -1) {
this.checkList.splice(index, 1)
} else {
this.checkList.push(e.equipmentId)
}
},
cancel() {
this.transfer = false
this.share = false
this.checkList = []
},
submit() {
console.log(this.checkList)
if (this.checkList.length === 0) {
this.$util.toast('请选择设备')
return
}
if (this.transfer) {
uni.navigateTo({ url: '/pages/device/transfer?id=' + this.checkList.join(',') })
} else if (this.share) {
uni.navigateTo({ url: '/pages/device/share?id=' + this.checkList.join(',') })
}
this.cancel()
},
async init() {
console.warn('init')
this.transfer = false
this.share = false
this.getProjectList()
this.getDeviceList()
},
getDeviceList() {
this.store.params.pageSize = 50
this.store.firstCallBack = (res) => {
uni.createSelectorQuery()
.select('.uni-navbar')
.boundingClientRect((rect1) => {
if (!rect1) return
this.navTabHeight = rect1.height
uni.createSelectorQuery()
.select('.nav')
.boundingClientRect((rect2) => {
if (!rect2) return
// #ifdef H5
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height + 50) + 'px)'
// #endif
// #ifdef APP-PLUS
this.minHeight = 'calc(100vh - ' + (this.navTabHeight + rect2.height) + 'px)'
console.log(this.minHeight)
// #endif
})
.exec()
})
.exec()
}
this.store.reload()
},
getProjectList() {
getProjectList({
pageNum: 1,
pageSize: 9999,
engineeringId: this.store.params.engineerId,
}).then((res) => {
console.log(res)
let arr = [
{
text: '全部项目',
value: '-1',
},
...res.data.records.map((item) => {
return {
text: item.name,
value: item.id,
...item,
}
}),
]
this.projectList = arr
uni.setStorageSync('projectList', arr)
})
},
queryDictData() {
queryDictData('项目类型').then((res) => {
this.projectType = [
{
text: '全部类型',
value: '',
},
...res.data.map((item) => {
return {
text: item.anotherName,
value: item.id,
}
}),
]
})
},
submitFeedBack() {
uni.navigateTo({ url: '/pages/home/feedback' })
},
projectTypeChange(e) {
this.select.projectTypeIndex = e.detail.value
if (e.detail.value === 0) {
this.select.projectType = ''
return
}
this.select.projectType = this.projectType[e.detail.value].text
},
projectNameChange(e) {
this.selectProject = false
console.log(e)
this.select.projectNameIndex = e.detail.value
if (e.detail.value === 0) {
this.select.projectName = ''
return
}
this.select.projectName = this.projectList[e.detail.value].text
},
registerDevice() {
uni.showModal({
title: '提示',
content: '请选择设备类型',
confirmText: '直连设备',
cancelText: '网关接入',
cancelColor: '#007aff',
success: ({ confirm, cancel }) => {
if (confirm) {
uni.navigateTo({
url: '/pages/device/new',
})
} else if (cancel) {
uni.navigateTo({
url: '/pages/gateway/list',
})
}
},
})
},
registerGateway() {
uni.navigateTo({
url: '/pages/gateway/new',
})
},
navMenuClick(index) {
this.navMenuActive = index
},
jump(item) {
uni.navigateTo({
url: '/pages/device/APF/detail?id=' + item.equipmentId + '&isPrimaryUser=' + item.isPrimaryUser+ '&ndid=' + item.ndid,
})
},
},
}
</script>
<style lang="scss">
.index-device{
.nav-menu {
}
}
</style>