You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
471 lines
14 KiB
471 lines
14 KiB
<template>
|
|
<view class="content">
|
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="生产详情">
|
|
<view slot="right"><text class="text_4" @click="popupShow">分享</text></view>
|
|
</uni-nav-bar>
|
|
<view class="flex-col group_5">
|
|
<view class="flex-col section_1">
|
|
<view class="justify-between group_6">
|
|
<text class="text_5">生产数据</text>
|
|
<view class="flex-row group_7">
|
|
<qn-datetime-picker :border="false" type="daterange" @change="dateRangeChange">
|
|
<text>{{ (dateRange ? `${dateRange[0]}～${dateRange[1]}` : '全部') | formatDate }}</text>
|
|
</qn-datetime-picker>
|
|
<image v-show="!dateRange" src="/static/imgs/digital-workshops/down-arrow-icon.png" class="image-icon" />
|
|
<image v-show="dateRange" @click="dateRangeChange(null)" src="/static/imgs/general/close-icon.png" class="image-icon" />
|
|
</view>
|
|
</view>
|
|
<view class="justify-between section_2">
|
|
<qn-select
|
|
contentStyle="background: none; padding: 14rpx 22rpx;text-align: left;"
|
|
:options="deviceList"
|
|
v-model="id"
|
|
placeholder="请选择设备"
|
|
></qn-select>
|
|
</view>
|
|
<view class="flex-row group_8">
|
|
<view class="flex-col section_3">
|
|
<text class="text_8">{{ curDevice.produceTotalNum }}</text>
|
|
<text class="text_9">产能/件</text>
|
|
</view>
|
|
<view class="flex-col section_4">
|
|
<text class="text_10">{{ curDevice.totalWorkHour | formatNumber }}</text>
|
|
<text class="text_11">工作时长/h</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col section_5">
|
|
<view class="flex-col items-center group_9" v-if="curDevice.cameraId">
|
|
<view class="camera_bg"></view>
|
|
<image @click="palyVideo()" src="/static/imgs/general/camera-bg.png" class="image_7" />
|
|
</view>
|
|
<view v-else>
|
|
<view class="flex-col items-center group_9">
|
|
<image mode="aspectFit" src="/static/imgs/digital-workshops/no-camera.png" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popup" type="bottom">
|
|
<view class="flex-col group_10">
|
|
<view class="flex-col section_7">
|
|
<view class="flex-col section_8">
|
|
<text class="text_12">立即分享给好友</text>
|
|
<view class="flex-col group_11">
|
|
<view class="top-group flex-row">
|
|
<image src="/static/imgs/general/session-share-icon.png" class="image_8" @click="share('WXSceneSession')" />
|
|
<image src="/static/imgs/general/line-share-icon.png" class="image_9" @click="share('WXSceneTimeline')" />
|
|
</view>
|
|
<view class="top-group flex-row view_1">
|
|
<text>微信好友</text>
|
|
<text class="text_14">朋友圈</text>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="flex-col section_9">
|
|
<view class="justify-between group_12">
|
|
<view class="flex-row group_13" @click="selectMethod(true)">
|
|
<image :src="hasPassword ? '/static/imgs/general/selected-icon.png' : '/static/imgs/general/select-icon.png'" class="image_10" />
|
|
<text class="text_15">密码分享</text>
|
|
</view>
|
|
<view class="flex-row group_14" v-show="hasPassword">
|
|
<qn-easyinput
|
|
:maxlength="20"
|
|
v-model="password"
|
|
:inputBorder="false"
|
|
text="right"
|
|
placeholderStyle=" fontSize: 28rpx"
|
|
placeholder="请设置访问密码"
|
|
></qn-easyinput>
|
|
</view>
|
|
</view>
|
|
<text class="text_17" v-show="hasPassword">请提前告知用户访问密码，以便及时查看信息</text>
|
|
<view class="flex-row group_15" @click="selectMethod(false)">
|
|
<image :src="hasPassword ? '/static/imgs/general/select-icon.png' : '/static/imgs/general/selected-icon.png'" class="image_10" />
|
|
<text class="text_18">公开访问</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col items-center button" @click="popupHide">
|
|
<text>取消</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { go2, back } from '@/utils/hook.js'
|
|
import { round } from '@/utils/index.js'
|
|
import { getDeviceList, makeDeviceShare } from '@/apis/deviceApi.js'
|
|
import { H5_URL_DEVICE, isEncrypt, YINGSHI_LIVE_URL } from '@/enums/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: null,
|
|
dateRange: null,
|
|
deviceList: [],
|
|
password: '',
|
|
hasPassword: true
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.id = options.id
|
|
this.getList()
|
|
}
|
|
},
|
|
methods: {
|
|
go2,
|
|
back,
|
|
popupShow() {
|
|
this.$refs.popup.open('bottom')
|
|
},
|
|
popupHide() {
|
|
this.$refs.popup.close()
|
|
},
|
|
getDeviceInfo() {},
|
|
dateRangeChange(value) {
|
|
if (value) {
|
|
this.dateRange = [...value]
|
|
} else {
|
|
this.dateRange = null
|
|
}
|
|
},
|
|
getList() {
|
|
getDeviceList({
|
|
startTime: this.dateRange ? this.dateRange[0] : null,
|
|
endTime: this.dateRange ? this.dateRange[1] : null,
|
|
pageNum: 1,
|
|
pageSize: 1000
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.deviceList = res.records.map((item) => ({ ...item, label: item.name, value: item.id }))
|
|
}
|
|
})
|
|
},
|
|
selectMethod(isPassword) {
|
|
this.hasPassword = isPassword
|
|
},
|
|
share(scene) {
|
|
// 先处理密码的逻辑
|
|
if (this.hasPassword && !this.password) {
|
|
uni.showToast({
|
|
title: '请输入访问密码',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
makeDeviceShare({
|
|
encryptOrNot: this.hasPassword ? isEncrypt.YES : isEncrypt.NO,
|
|
mechanicalEquipmentId: this.id,
|
|
password: this.password
|
|
}).then((res) => {
|
|
if (res) {
|
|
uni.share({
|
|
provider: 'weixin',
|
|
type: 0,
|
|
title: '设备展示',
|
|
summary: '机器进度实时查看',
|
|
scene: scene, // WXSceneTimeline,WXSceneSession
|
|
imageUrl: 'https://qncloud.oss-cn-shenzhen.aliyuncs.com/paper_shopkeeper/wx-share-store.png',
|
|
href: H5_URL_DEVICE + `shareId=${res}`,
|
|
success: () => {
|
|
console.log('分享成功')
|
|
},
|
|
fail: (err) => {
|
|
console.log('err', err)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
palyVideo() {
|
|
if (this.curDevice) {
|
|
this.curDevice.accessToken = 'at.1bi93a6k73ochhe60yo0tl3h15b4atv1-8kz22w16z4-1vni1th-smig38b8n'
|
|
let url = YINGSHI_LIVE_URL + `accessToken=${this.curDevice.accessToken}&deviceSerial=${this.curDevice.cameraId}&channelNo=${this.curDevice.channelNum}`
|
|
go2('page-view', { url: encodeURIComponent(url) })
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
dateRange() {
|
|
this.getList()
|
|
}
|
|
},
|
|
computed: {
|
|
curDevice() {
|
|
return this.deviceList.find((item) => item.id === this.id) || {}
|
|
}
|
|
},
|
|
filters: {
|
|
formatDate(time) {
|
|
return time.replace(/-/g, '.')
|
|
},
|
|
formatNumber(number) {
|
|
if (number) {
|
|
return round(number, 2)
|
|
}
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 750rpx;
|
|
.text_4 {
|
|
color: rgb(0, 122, 255);
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.group_5 {
|
|
padding: 20rpx 32rpx;
|
|
.section_1 {
|
|
padding: 0 28rpx;
|
|
background-image: url('/static/imgs/digital-workshops/device-detail-bg.png');
|
|
background-position: 0px 0px;
|
|
background-size: 686rpx 380rpx;
|
|
background-repeat: no-repeat;
|
|
.group_6 {
|
|
padding: 32rpx 0 18rpx;
|
|
.text_5 {
|
|
color: transparent;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
line-height: 48rpx;
|
|
white-space: nowrap;
|
|
background-image: linear-gradient(180deg, rgb(15, 90, 212) 0%, rgb(15, 90, 212) 0%, rgb(135, 226, 241) 155.46%, rgb(135, 226, 241) 100%);
|
|
-webkit-background-clip: text;
|
|
}
|
|
.group_7 {
|
|
margin: 6rpx 0;
|
|
color: rgb(133, 133, 133);
|
|
font-size: 26rpx;
|
|
line-height: 37rpx;
|
|
white-space: nowrap;
|
|
.image-icon {
|
|
margin: 0 0 5rpx 16rpx;
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.section_2 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
line-height: 45rpx;
|
|
white-space: nowrap;
|
|
border-radius: 10rpx;
|
|
border: solid 2rpx rgb(224, 224, 224);
|
|
.image_5 {
|
|
margin: 6rpx 0;
|
|
}
|
|
}
|
|
.group_8 {
|
|
padding: 28rpx 0 40rpx;
|
|
.section_3 {
|
|
padding: 22rpx 22rpx 36rpx;
|
|
flex: 1 1 308rpx;
|
|
background-image: url('/static/imgs/digital-workshops/gear.png');
|
|
background-position: 0px 0px;
|
|
background-size: 308rpx 136rpx;
|
|
background-repeat: no-repeat;
|
|
height: 136rpx;
|
|
.text_8 {
|
|
color: rgb(68, 113, 189);
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
line-height: 42rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_9 {
|
|
margin-top: 6rpx;
|
|
color: rgb(68, 113, 189);
|
|
font-size: 22rpx;
|
|
line-height: 30rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.section_4 {
|
|
margin-left: 14rpx;
|
|
padding: 22rpx 22rpx 36rpx;
|
|
flex: 1 1 308rpx;
|
|
background-image: url('/static/imgs/digital-workshops/clock.png');
|
|
background-position: 0px 0px;
|
|
background-size: 308rpx 136rpx;
|
|
background-repeat: no-repeat;
|
|
height: 136rpx;
|
|
.text_10 {
|
|
color: rgb(83, 146, 106);
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
line-height: 42rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_11 {
|
|
margin-top: 6rpx;
|
|
color: rgb(83, 146, 106);
|
|
font-size: 22rpx;
|
|
line-height: 30rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
.image_4 {
|
|
margin-left: 17rpx;
|
|
align-self: center;
|
|
width: 20rpx;
|
|
height: 13rpx;
|
|
}
|
|
}
|
|
.section_5 {
|
|
margin-top: 20rpx;
|
|
padding: 28rpx 0;
|
|
background-color: rgb(255, 255, 255);
|
|
box-shadow: 0px 5rpx 22rpx 0px rgba(0, 0, 0, 0.04);
|
|
border-radius: 14rpx;
|
|
.group_9 {
|
|
margin: 0 28rpx;
|
|
border-radius: 6rpx;
|
|
position: relative;
|
|
.camera_bg {
|
|
border-radius: 6rpx;
|
|
width: 630rpx;
|
|
height: 340rpx;
|
|
background-color: rgb(51, 51, 51);
|
|
}
|
|
.image_7 {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.group_10 {
|
|
height: 637rpx;
|
|
.section_7 {
|
|
padding-bottom: 96rpx;
|
|
background-color: rgb(247, 248, 250);
|
|
border-radius: 40rpx 40rpx 0px 0px;
|
|
.section_8 {
|
|
padding-top: 40rpx;
|
|
overflow: hidden;
|
|
border-radius: 40rpx 40rpx 0px 0px;
|
|
background-color: rgb(255, 255, 255);
|
|
height: 520rpx;
|
|
.text_12 {
|
|
align-self: center;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_11 {
|
|
margin-top: 40rpx;
|
|
.top-group {
|
|
padding: 0 48rpx;
|
|
.image_8 {
|
|
border-radius: 50%;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
}
|
|
.image_9 {
|
|
margin-left: 64rpx;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
}
|
|
.text_14 {
|
|
margin-left: 76rpx;
|
|
}
|
|
}
|
|
.view_1 {
|
|
margin-top: 16rpx;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 24rpx;
|
|
line-height: 33rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.divider {
|
|
margin: 32rpx 32rpx 0;
|
|
background-color: rgb(235, 237, 240);
|
|
height: 1rpx;
|
|
}
|
|
.section_9 {
|
|
padding: 24rpx 32rpx 0;
|
|
background-color: rgb(255, 255, 255);
|
|
.image_10 {
|
|
margin: 4rpx 0;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
.group_12 {
|
|
padding-left: 2rpx;
|
|
.group_13 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
.text_15 {
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
.group_14 {
|
|
color: rgb(136, 136, 136);
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.text_17 {
|
|
margin-top: 16rpx;
|
|
align-self: center;
|
|
color: rgb(136, 136, 136);
|
|
font-size: 24rpx;
|
|
line-height: 33rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_15 {
|
|
margin-top: 22rpx;
|
|
padding: 26rpx 2rpx 20rpx;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
border-top: solid 2rpx rgb(235, 237, 240);
|
|
.image_12 {
|
|
margin: 4rpx 0;
|
|
}
|
|
.text_18 {
|
|
margin-left: 18rpx;
|
|
}
|
|
}
|
|
.image_4 {
|
|
margin-left: 17rpx;
|
|
align-self: center;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.button {
|
|
margin-top: -75rpx;
|
|
padding: 26rpx 0;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
line-height: 45rpx;
|
|
white-space: nowrap;
|
|
background-color: rgb(255, 255, 255);
|
|
position: relative;
|
|
}
|
|
}
|
|
</style>
|