mo-bai
3 years ago
8 changed files with 36 additions and 512 deletions
Unified View
Diff Options
-
17components/qn-select/qn-select.vue
-
8pages.json
-
2pages/device-operation/index.vue
-
479pages/device-production-detail/index.vue
-
5pages/digital-workshops/index.vue
-
22pages/enterprise-info-edit/index.vue
-
8pages/factory-operation/index.vue
-
7pages/factory/index.vue
@ -1,479 +0,0 @@ |
|||||
<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 :end="maxTimestamp" :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, getAccessToken } 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, |
|
||||
maxTimestamp: new Date().getTime() |
|
||||
} |
|
||||
}, |
|
||||
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) { |
|
||||
getAccessToken().then((res) => { |
|
||||
if (res) { |
|
||||
console.log('res', res) |
|
||||
// this.curDevice.accessToken = 'at.1bi93a6k73ochhe60yo0tl3h15b4atv1-8kz22w16z4-1vni1th-smig38b8n' |
|
||||
this.curDevice.accessToken = res |
|
||||
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> |
|
||||
Write
Preview
Loading…
Cancel
Save