mo-bai
3 years ago
8 changed files with 36 additions and 512 deletions
Split 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