mo-bai
4 years ago
18 changed files with 658 additions and 54 deletions
Split View
Diff Options
-
12apis/deviceApi.js
-
8manifest.json
-
16pages.json
-
2pages/complete-info/EnterpriseForm.vue
-
2pages/device-info/index.vue
-
8pages/device-operation/index.vue
-
15pages/device-production-detail/index.vue
-
4pages/digital-workshops/index.vue
-
177pages/production-info/index.vue
-
405pages/production-operation/index.vue
-
5pages/promotion/Banner.vue
-
58pages/promotion/index.vue
-
BINstatic/imgs/general/left-arrow-blue-icon.png
-
BINstatic/imgs/general/share-black-icon.png
-
BINstatic/imgs/general/share-gray-icon.png
-
BINstatic/imgs/promotion/add-icon.png
-
BINstatic/imgs/promotion/address-icon.png
-
BINstatic/imgs/promotion/phone-blue-icon.png
@ -0,0 +1,177 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="授信记录"></uni-nav-bar> |
|||
<view class="flex-col group_4"> |
|||
<view class="flex-col group_5"> |
|||
<view class="flex-col items-center group_6"> |
|||
<swiper class="swiper" @change="changeSwiper"> |
|||
<swiper-item v-for="(item, index) in info.imgItemList" :key="index"> |
|||
<image mode="aspectFit" :src="item.url" class="image" @click="preview(item.url)" /> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="flex-col items-center text-wrapper"> |
|||
<text>{{ swiperCurrent + 1 }}/{{ info.imgItemList.length }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-col section_1"> |
|||
<text class="text_5">{{ info.name || '设备' }}</text> |
|||
<text class="text_6"> |
|||
{{ info.machineDescribe || '没有描述' }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-row section_2"> |
|||
<view class="flex-col items-center text-wrapper_1" @click="deleteDevice"> |
|||
<text>删除</text> |
|||
</view> |
|||
<view class="flex-col items-center text-wrapper_2" @click="go2('device-operation', { operation: 'edit', id: info.id })"> |
|||
<text>编辑</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back } from '@/utils/hook.js' |
|||
import { getEquipmentInfo } from '@/apis/deviceApi.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
info: { imgItemList: [] }, |
|||
id: null, |
|||
swiperCurrent: 1 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.id = options.id |
|||
} |
|||
}, |
|||
onShow() { |
|||
if (this.id) { |
|||
getEquipmentInfo({ id: this.id }).then((res) => { |
|||
if (res) { |
|||
this.info = res |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back, |
|||
changeSwiper(e) { |
|||
this.swiperCurrent = e.detail.current |
|||
}, |
|||
preview(url) { |
|||
let urls = info.imgItemList.map((img) => img.url) |
|||
uni.previewImage({ |
|||
current: url, |
|||
urls: urls |
|||
}) |
|||
}, |
|||
// 删除当前设备 |
|||
deleteDevice() {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 750rpx; |
|||
.group_4 { |
|||
flex: 1 1 auto; |
|||
overflow-y: auto; |
|||
.group_5 { |
|||
.group_6 { |
|||
width: 750rpx; |
|||
height: 440rpx; |
|||
.swiper { |
|||
width: 100%; |
|||
height: 100%; |
|||
.image { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgb(0, 0, 0); |
|||
} |
|||
} |
|||
color: rgb(255, 255, 255); |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
|
|||
.text-wrapper { |
|||
background-color: rgba(0, 0, 0, 0.4); |
|||
border-radius: 20rpx; |
|||
width: 64rpx; |
|||
position: absolute; |
|||
right: 32rpx; |
|||
bottom: 60rpx; |
|||
} |
|||
} |
|||
.section_1 { |
|||
margin-top: -40rpx; |
|||
padding: 32rpx 30rpx 100rpx 32rpx; |
|||
background-image: linear-gradient( |
|||
180deg, |
|||
rgb(255, 255, 255) 0%, |
|||
rgb(255, 255, 255) 0%, |
|||
rgb(253, 253, 254) 30.62%, |
|||
rgba(247, 248, 250, 0) 100%, |
|||
rgba(247, 248, 250, 0) 100% |
|||
); |
|||
border-radius: 40rpx 40rpx 0px 0px; |
|||
position: relative; |
|||
.text_5 { |
|||
color: rgb(0, 0, 0); |
|||
font-size: 36rpx; |
|||
font-weight: 500; |
|||
line-height: 50rpx; |
|||
white-space: nowrap; |
|||
} |
|||
.text_6 { |
|||
margin-top: 20rpx; |
|||
color: rgb(51, 51, 51); |
|||
font-size: 26rpx; |
|||
line-height: 37rpx; |
|||
text-align: left; |
|||
} |
|||
} |
|||
} |
|||
.section_2 { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
padding: 16rpx 28rpx; |
|||
background-color: rgb(255, 255, 255); |
|||
.text-wrapper_1 { |
|||
padding: 21rpx 0; |
|||
color: rgb(245, 34, 45); |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
line-height: 42rpx; |
|||
white-space: nowrap; |
|||
border-radius: 10rpx; |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: solid 2rpx rgb(245, 34, 45); |
|||
} |
|||
.text-wrapper_2 { |
|||
margin-left: 24rpx; |
|||
padding: 23rpx 0; |
|||
flex: 1 1 auto; |
|||
color: rgb(255, 255, 255); |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
line-height: 42rpx; |
|||
white-space: nowrap; |
|||
background-color: rgb(0, 122, 255); |
|||
border-radius: 10rpx; |
|||
height: 88rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,405 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed :title="operation == 'add' ? '新增设备' : '编辑设备'"></uni-nav-bar> |
|||
<view class="form"> |
|||
<view class="flex-col group_9"> |
|||
<view class="flex-row group_10"> |
|||
<text class="text_18">*</text> |
|||
<text class="text_19">设备图片</text> |
|||
<text class="tip">(图片单张大小不超过2M，数量最多5张)</text> |
|||
</view> |
|||
<view class="flex-row"> |
|||
<view v-for="(item, index) in form.imgItemList" :key="item.url" class="image-area"> |
|||
<image class="image__close-icon" @click="clearImage(index)" src="/static/imgs/general/close-icon.png"></image> |
|||
<image :src="item.url" class="upload_image" @click="preview(item.url)"></image> |
|||
</view> |
|||
<view v-show="form.imgItemList.length < 5" class="flex-col items-center section_4" @click="selectImg"> |
|||
<image src="/static/imgs/general/camera-icon.png" class="image_6" /> |
|||
<text class="text_20">点击上传</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="justify-between group"> |
|||
<view class="flex-row"> |
|||
<text class="text_1">*</text> |
|||
<text class="text_2">设备名称</text> |
|||
</view> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
v-model="form.name" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholderStyle="fontSize: 28rpx" |
|||
placeholder="请输入设备名称" |
|||
></qn-easyinput> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="justify-between group"> |
|||
<view class="flex-row"> |
|||
<text class="text_2">设备类型</text> |
|||
</view> |
|||
<view style="width: 400rpx; z-index: 2"> |
|||
<qn-select |
|||
:placeholderStyle="placeholderStyle" |
|||
contentStyle="background: none; padding: 0;text-align: right;" |
|||
:options="deviceTypeList" |
|||
v-model="form.type" |
|||
placeholder="请选择设备类型" |
|||
></qn-select> |
|||
</view> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="justify-between group"> |
|||
<view class="flex-row"> |
|||
<text class="text_2">生产工艺</text> |
|||
</view> |
|||
<view style="width: 400rpx; z-index: 1"> |
|||
<qn-select |
|||
:placeholderStyle="placeholderStyle" |
|||
contentStyle="background: none; padding: 0;text-align: right;" |
|||
:options="technicsTypeList" |
|||
v-model="form.technicsTypeList" |
|||
placeholder="请选择设备支持的生产类型" |
|||
multiple |
|||
></qn-select> |
|||
</view> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="group"> |
|||
<view class="flex-row"> |
|||
<text class="text_1">*</text> |
|||
<text class="text_2">设备描述</text> |
|||
</view> |
|||
<qn-easyinput |
|||
:maxlength="200" |
|||
v-model="form.machineDescribe" |
|||
type="textarea" |
|||
placeholderStyle="fontSize: 28rpx " |
|||
placeholder="请输入设备介绍" |
|||
style="background-color: rgb(247, 248, 250); margin-top: 16rpx" |
|||
></qn-easyinput> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="justify-between group"> |
|||
<view class="flex-row"> |
|||
<text class="text_2">摄像头ID</text> |
|||
</view> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
v-model="form.cameraId" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholderStyle=" fontSize: 28rpx" |
|||
placeholder="请输入摄像头ID" |
|||
></qn-easyinput> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="justify-between group"> |
|||
<view class="flex-row"> |
|||
<text class="text_2">摄像头渠道号</text> |
|||
</view> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
v-model="form.channelNum" |
|||
:inputBorder="false" |
|||
text="right" |
|||
type="number" |
|||
placeholderStyle=" fontSize: 28rpx" |
|||
placeholder="请输入摄像头渠道号" |
|||
></qn-easyinput> |
|||
</view> |
|||
<view class="divider"></view> |
|||
<view class="justify-between group"> |
|||
<view class="flex-row"> |
|||
<text class="text_2">云盒ID</text> |
|||
</view> |
|||
<qn-easyinput |
|||
:maxlength="20" |
|||
v-model="form.cloudBoxId" |
|||
:inputBorder="false" |
|||
text="right" |
|||
placeholderStyle=" fontSize: 28rpx" |
|||
placeholder="请输入云盒ID" |
|||
></qn-easyinput> |
|||
</view> |
|||
</view> |
|||
<qn-footer fixed> |
|||
<view class="flex-col items-center text-wrapper_1" @click="save"> |
|||
<text>保存</text> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back, uploadImage } from '@/utils/hook.js' |
|||
import { validateField } from '@/utils/index.js' |
|||
import { fileType } from '@/enums/index.js' |
|||
import { getDeviceTypeList, getTechnicsList, changeDevice, getEquipmentInfo } from '@/apis/deviceApi.js' |
|||
|
|||
const validateFields = [ |
|||
{ |
|||
name: 'imgItemList', |
|||
rules: [{ required: true, message: '请上传设备图片' }] |
|||
}, |
|||
{ |
|||
name: 'name', |
|||
rules: [{ required: true, message: '请输入设备名称' }] |
|||
}, |
|||
{ |
|||
name: 'machineDescribe', |
|||
rules: [{ required: true, message: '请输入设备描述' }] |
|||
} |
|||
] |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
operation: 'add', // add:新增, edit:编辑 |
|||
deviceId: null, |
|||
form: { |
|||
id: null, |
|||
imgItemList: [], |
|||
machineDescribe: '', |
|||
cameraId: '', |
|||
channelNum: '', |
|||
cloudBoxId: '', |
|||
name: '', |
|||
type: '', |
|||
technicsTypeList: [] |
|||
}, |
|||
deviceTypeList: [], |
|||
technicsTypeList: [], |
|||
placeholderStyle: 'font-size: 28rpx;font-weight:400;' |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (options.operation) { |
|||
this.operation = options.operation |
|||
if (options.operation == 'edit') { |
|||
this.init(options.id) |
|||
} |
|||
} else { |
|||
uni.showToast({ |
|||
title: '参数错误，即将返回', |
|||
icon: 'error', |
|||
duration: 2000, |
|||
mask: true, |
|||
success: () => { |
|||
setTimeout(() => { |
|||
back() |
|||
}, 2000) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
created() { |
|||
getDeviceTypeList().then((res) => { |
|||
if (res) { |
|||
this.deviceTypeList = res.map((item) => ({ label: item.name, value: item.id })) |
|||
} |
|||
}) |
|||
getTechnicsList().then((res) => { |
|||
if (res) { |
|||
this.technicsTypeList = res.map((item) => ({ label: item.name, value: item.id })) |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back, |
|||
clearImage(index) { |
|||
this.form.imgItemList.splice(index, 1) |
|||
}, |
|||
// 编辑初始化 |
|||
init(id) { |
|||
getEquipmentInfo({ id }).then((res) => { |
|||
if (res) { |
|||
Object.keys(this.form).forEach((key) => { |
|||
this.form[key] = res[key] |
|||
}) |
|||
this.form.technicsTypeList = res.technicsTypeList.map((item) => item.id) |
|||
} |
|||
}) |
|||
}, |
|||
preview(url) { |
|||
uni.previewImage({ |
|||
urls: [url], |
|||
current: url |
|||
}) |
|||
}, |
|||
selectImg() { |
|||
uploadImage() |
|||
.then((urls) => { |
|||
if (urls) { |
|||
this.form.imgItemList.push({ |
|||
url: urls[0], |
|||
type: fileType.IMG |
|||
}) |
|||
} |
|||
}) |
|||
.catch((e) => { |
|||
uni.showToast({ |
|||
title: '上传失败:' + (e.message || e), |
|||
icon: 'fail', |
|||
duration: 1500 |
|||
}) |
|||
}) |
|||
}, |
|||
save() { |
|||
for (let field of validateFields) { |
|||
const { name, rules } = field |
|||
const value = this.form[name] |
|||
const { isValid, msg } = validateField(value, rules) |
|||
if (!isValid) { |
|||
uni.showToast({ |
|||
title: msg, |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
} |
|||
if (this.form.cameraId) { |
|||
if (!this.form.channelNum) { |
|||
uni.showToast({ |
|||
title: '请输入摄像头渠道号', |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
} |
|||
let list = this.technicsTypeList.filter((item) => this.form.technicsTypeList.includes(item.value)) |
|||
let technicsTypeList = list.map((item) => ({ id: item.value, name: item.label })) |
|||
this.form.typeName = this.deviceTypeList.find((item) => item.value == this.form.type).label |
|||
changeDevice({ ...this.form, technicsTypeList }).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '保存成功', |
|||
icon: 'success', |
|||
duration: 1500 |
|||
}) |
|||
setTimeout(() => { |
|||
back() |
|||
}, 1500) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.form { |
|||
width: 750rpx; |
|||
background-color: #fff; |
|||
} |
|||
.group { |
|||
padding: 24rpx 28rpx 24rpx 32rpx; |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
.text_3 { |
|||
color: rgb(0, 122, 255); |
|||
} |
|||
.text_1 { |
|||
color: rgb(245, 34, 45); |
|||
} |
|||
.text_2 { |
|||
margin-left: 4rpx; |
|||
color: rgb(0, 0, 0); |
|||
} |
|||
} |
|||
.divider { |
|||
margin: 0 28rpx; |
|||
background-color: rgb(216, 216, 216); |
|||
height: 2rpx; |
|||
} |
|||
.group_9 { |
|||
padding: 22rpx 32rpx 32rpx; |
|||
.group_10 { |
|||
padding-bottom: 16rpx; |
|||
.text_18 { |
|||
color: rgb(245, 34, 45); |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
} |
|||
.text_19 { |
|||
margin-left: 4rpx; |
|||
color: rgb(0, 0, 0); |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
} |
|||
.tip { |
|||
margin-left: 16rpx; |
|||
font-size: 24rpx; |
|||
line-height: 40rpx; |
|||
color: #858585; |
|||
} |
|||
} |
|||
.section_4 { |
|||
margin-left: 19rpx; |
|||
padding: 23rpx 0 13rpx; |
|||
color: rgb(76, 74, 88); |
|||
font-size: 26rpx; |
|||
line-height: 37rpx; |
|||
white-space: nowrap; |
|||
background-color: rgba(220, 222, 224, 0.5); |
|||
border-radius: 10rpx; |
|||
width: 120rpx; |
|||
.image_6 { |
|||
width: 42rpx; |
|||
height: 36rpx; |
|||
} |
|||
.text_20 { |
|||
margin-top: 12rpx; |
|||
} |
|||
} |
|||
} |
|||
.upload_image { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 10rpx; |
|||
} |
|||
.video-area { |
|||
position: relative; |
|||
width: 686rpx; |
|||
.video__close-icon { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
z-index: 100; |
|||
} |
|||
.video { |
|||
width: 686rpx; |
|||
height: 450rpx; |
|||
} |
|||
} |
|||
.image-area { |
|||
position: relative; |
|||
margin-left: 19rpx; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 10rpx; |
|||
|
|||
.image__close-icon { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
z-index: 1; |
|||
} |
|||
} |
|||
.text-wrapper_1 { |
|||
margin: 0 32rpx; |
|||
padding: 23rpx 0; |
|||
background-color: rgb(0, 122, 255); |
|||
border-radius: 10rpx; |
|||
color: rgb(255, 255, 255); |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 20 | Height: 36 | Size: 899 B |
| Before | After |
|---|---|
|
|
| Width: 74 | Height: 74 | Size: 3.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 66 | Height: 66 | Size: 2.9 KiB |
| Before | After |
|---|---|
|
|
| Width: 82 | Height: 82 | Size: 1.7 KiB |
| Before | After |
|---|---|
|
|
| Width: 27 | Height: 30 | Size: 1.2 KiB |
| Before | After |
|---|---|
|
|
| Width: 28 | Height: 28 | Size: 1.1 KiB |
Write
Preview
Loading…
Cancel
Save