293 lines
10 KiB
Vue
293 lines
10 KiB
Vue
<template>
|
|
<Cn-page :loading="loading" noPadding>
|
|
<view slot="body">
|
|
<view class="detail">
|
|
<view class="header">
|
|
<view class="header-title"
|
|
>{{ project.name }}
|
|
<!-- <view class="header-title-extra">用能</view> -->
|
|
</view>
|
|
<view class="header-des">{{ project.description }}</view>
|
|
</view>
|
|
<view class="nav">
|
|
<view
|
|
class="nav-menu"
|
|
:class="{ 'nav-menu-active': navMenuActive == index }"
|
|
v-for="(item, index) in navMenuList"
|
|
:key="index"
|
|
@click="navMenuClick(index)"
|
|
>{{ item.text }}
|
|
</view>
|
|
</view>
|
|
<view class="content device" :style="{ minHeight: 'calc(100vh - ' + navHeight + 'px)' }">
|
|
<view v-show="navMenuActive == 0">
|
|
<uni-card
|
|
:title="item.equipmentName"
|
|
sub-title="创建时间"
|
|
v-for="item in store.data"
|
|
:key="item.equipmentId"
|
|
@click="goDevice"
|
|
padding="0"
|
|
thumbnail="/static/device.png"
|
|
>
|
|
</uni-card>
|
|
<Cn-empty v-if="store.empty"></Cn-empty>
|
|
<uni-load-more v-if="store.data && store.data.length > 0" :status="store.status"></uni-load-more>
|
|
</view>
|
|
<view style="padding: 0 20rpx" v-show="navMenuActive == 1">
|
|
<uni-list>
|
|
<uni-list-item title="张三" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
|
|
<template v-slot:footer>
|
|
<view class="footer-btn mt20" style="background: #e47470" @click="del">移除</view>
|
|
<!-- <view class="footer-btn mt20 ml10" @click="goUserDetail">查看</view> -->
|
|
</template>
|
|
</uni-list-item>
|
|
<uni-list-item title="李四" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
|
|
<template v-slot:footer>
|
|
<view class="footer-btn mt20" style="background: #e47470" @click="del">移除</view>
|
|
<!-- <view class="footer-btn mt20 ml10" @click="goUserDetail">查看</view> -->
|
|
</template>
|
|
</uni-list-item>
|
|
</uni-list>
|
|
</view>
|
|
<view style="padding: 0 20rpx" v-show="navMenuActive == 2">
|
|
<!-- <image
|
|
class="gplot gplot-box"
|
|
mode="aspectFill"
|
|
:src="item.filePath"
|
|
v-for="(item, key) in topologyDiagramPage"
|
|
:key="key"
|
|
/> -->
|
|
<uni-file-picker
|
|
ref="filePicker"
|
|
v-model="topologyDiagramPage"
|
|
:sourceType="['album']"
|
|
:auto-upload="false"
|
|
@select="addAppTopologyDiagram"
|
|
@delete="deleteTopologyDiagramPage"
|
|
></uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<uni-fab
|
|
ref="fab"
|
|
direction="vertical"
|
|
horizontal="right"
|
|
vertical="bottom"
|
|
:content="content"
|
|
@trigger="trigger"
|
|
v-if="content.length"
|
|
/>
|
|
<uni-popup ref="share" type="share" background-color="#fff">
|
|
<uni-popup-share title="分享到"></uni-popup-share>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</Cn-page>
|
|
</template>
|
|
<script>
|
|
import list from '../../common/js/list'
|
|
import { queryTopologyDiagramPage, deleteAppTopologyDiagram, addAppTopologyDiagram } from '../../common/api/project'
|
|
export default {
|
|
mixins: [list],
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
project: {},
|
|
navMenuList: [
|
|
{
|
|
text: '设备',
|
|
},
|
|
{
|
|
text: '子用户',
|
|
},
|
|
{
|
|
text: '拓扑图',
|
|
},
|
|
],
|
|
content: [],
|
|
navHeight: 0,
|
|
navMenuActive: 0,
|
|
topologyDiagramPage: [],
|
|
}
|
|
},
|
|
methods: {
|
|
addAppTopologyDiagram(e) {
|
|
console.log(e)
|
|
addAppTopologyDiagram(
|
|
{
|
|
projectId: this.project.id,
|
|
topologyDiagramName: e.tempFiles[0].name,
|
|
},
|
|
e.tempFiles[0].path
|
|
).then((res) => {
|
|
console.log(res)
|
|
if (res.length > 1) {
|
|
const result = JSON.parse(res[1].data)
|
|
console.log(result)
|
|
if (result.code === 'A0000') {
|
|
this.topologyDiagramPage.push({
|
|
name: result.name,
|
|
extname: 'img',
|
|
url: result.filePath,
|
|
...result,
|
|
})
|
|
} else {
|
|
this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
|
|
uni.showToast({
|
|
title: result.message,
|
|
icon: 'none',
|
|
})
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '上传失败',
|
|
icon: 'none',
|
|
})
|
|
this.$refs.filePicker.clearFiles(this.topologyDiagramPage.length - 1)
|
|
}
|
|
})
|
|
},
|
|
deleteTopologyDiagramPage(e) {
|
|
console.log(e)
|
|
deleteAppTopologyDiagram(e.tempFile.id).then((res) => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
trigger(e) {
|
|
console.log(this.$refs)
|
|
if (e.item.text == '移交') {
|
|
uni.navigateTo({
|
|
url: '/pages/project/transfer',
|
|
})
|
|
} else if (e.item.text == '分享') {
|
|
this.$refs.share.open()
|
|
}
|
|
},
|
|
navMenuClick(index) {
|
|
this.navMenuActive = index
|
|
},
|
|
goUserDetail() {
|
|
uni.navigateTo({
|
|
url: '/pages/mine/userDetail',
|
|
})
|
|
},
|
|
del() {
|
|
console.log('del')
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要移除该成员吗？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定')
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
}
|
|
},
|
|
})
|
|
},
|
|
goDevice() {
|
|
uni.navigateTo({
|
|
url: '/pages/device/APF/detail',
|
|
})
|
|
},
|
|
init() {
|
|
this.store = this.DataSource('/EquipmentDelivery/queryEquipmentByProject')
|
|
this.store.params.projectId = this.project.id
|
|
this.store.reload()
|
|
|
|
queryTopologyDiagramPage({
|
|
projectId: this.project.id,
|
|
}).then((res) => {
|
|
console.log(res)
|
|
this.topologyDiagramPage = res.data.records.map((item) => {
|
|
return {
|
|
name: item.name,
|
|
extname: 'img',
|
|
url: item.filePath,
|
|
...item,
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
onLoad(option) {
|
|
let userInfo = uni.getStorageSync('userInfo')
|
|
if (userInfo.role == '3') {
|
|
this.content.push({
|
|
iconPath: '/static/transfer.png',
|
|
text: '移交',
|
|
})
|
|
} else if (userInfo.role == '4') {
|
|
this.content.push({
|
|
iconPath: '/static/share.png',
|
|
text: '分享',
|
|
})
|
|
}
|
|
setTimeout(() => {
|
|
// 获取nav高度
|
|
uni.createSelectorQuery()
|
|
.select('.nav')
|
|
.boundingClientRect((rect) => {
|
|
this.navHeight = rect.height
|
|
})
|
|
.exec()
|
|
}, 1000)
|
|
this.project = JSON.parse(option.project)
|
|
this.init()
|
|
// uni.setNavigationBarTitle({ title: this.project })
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.detail {
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.header {
|
|
padding: 20rpx 20rpx 0;
|
|
|
|
.header-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 40rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.header-title-extra {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
padding-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.header-des {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.footer-btn {
|
|
padding: 0 20rpx;
|
|
height: 50rpx;
|
|
background-color: #007aff;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
/deep/ .is-add {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.gplot {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
border: 8rpx solid #ccc;
|
|
}
|
|
</style>
|