App/app-govern
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

用户模块

Browse Source
This commit is contained in:
仲么了
2023-07-10 20:20:00 +08:00
parent 69063cb241
commit 2104bc0c4c
17 changed files with 4764 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
pages/device/new.vue
View File

@@ -1,12 +1,18 @@
<template>
<view class='new'>
<view class="new">
<template v-if="type == 1">
<view class="content">
<uni-forms>
<uni-forms-item label="设备识别码">
<view style="display:flex">
<uni-easyinput type="number" v-model="code" placeholder="请输入设备识别码" />
<uni-icons type="camera" color="#007aff" size="26" class="ml20" @click="scanCode"></uni-icons>
<view style="display: flex">
<uni-easyinput type="number" v-model="formData.nDid" placeholder="请输入设备识别码" />
<uni-icons
type="camera"
color="#007aff"
size="26"
class="ml20"
@click="scanCode"
></uni-icons>
</view>
</uni-forms-item>
</uni-forms>
@@ -16,37 +22,66 @@
</view>
</template>
<template v-else>
<view class="content">
<uni-forms>
<uni-forms-item label="项目">
<uni-data-select v-model="formData.project" :localdata="projectRange"></uni-data-select>
<uni-data-select
v-model="formData.projectId"
:localdata="projectRange"
@change="queryTopologyDiagramPage"
></uni-data-select>
</uni-forms-item>
<!-- <uni-forms-item label="型号">
<uni-data-select v-model="formData.type" :localdata="typeRange"
@change="typeChange(item)"></uni-data-select>
</uni-forms-item> -->
<uni-forms-item label="位置">
<view style="display:flex;">
<uni-easyinput :clearable="false" type="textarea" autoHeight v-model="formData.address"
placeholder="请输入位置信息" />
<uni-icons type="location" color="#007aff" size="26" class="ml20"
@click="chooseLocation"></uni-icons>
<view style="display: flex">
<uni-easyinput
:clearable="false"
type="textarea"
autoHeight
v-model="formData.area"
placeholder="请输入位置信息"
/>
<!-- <uni-icons
type="location"
color="#007aff"
size="26"
class="ml20"
@click="chooseLocation"
></uni-icons> -->
</view>
</uni-forms-item>
<uni-forms-item label="拓扑图">
<view style="display:flex;">
<view style="flex:1">
<image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
<uni-forms-item label="拓扑图" v-if="formData.projectId">
<view style="display: flex">
<view style="flex: 1">
<image
v-if="formData.topologyDiagramUrl"
class="gplot"
:src="formData.topologyDiagramUrl"
mode="aspectFill"
/>
<view v-else class="gplot gplot-empty center" @click="chooseGplot"> 选择拓扑图 </view>
</view>
<uni-icons type="image" color="#007aff" size="26" class="ml20" @click="chooseGplot"></uni-icons>
<uni-icons
type="image"
color="#007aff"
size="26"
class="ml20"
@click="chooseGplot"
></uni-icons>
</view>
</uni-forms-item>
<uni-forms-item label="监测点" v-if="pointList.length">
<view class="point-item" v-for="(item2, index2) in pointList" :key="index2"
@click="editPoint(item2, index2)">
<view style="flex:1" v-if="item2.pointName">{{ item2.pointName }}</view>
<view style="flex:1;color:#999" v-else>请选择监测点</view>
<uni-forms-item label="监测点" v-if="pointList.length && formData.topologyDiagramUrl">
<view
class="point-item"
v-for="(item2, index2) in pointList"
:key="index2"
@click="editPoint(item2, index2)"
>
<view style="flex: 1" v-if="item2.name">{{ item2.name }}</view>
<view style="flex: 1; color: #999" v-else>请选择监测点</view>
<uni-icons type="compose" color="#007aff" size="26" class="ml20"></uni-icons>
</view>
</uni-forms-item>
@@ -60,35 +95,39 @@
</view>
</uni-forms-item> -->
</uni-forms>
</view>
<view class="btn-wrap">
<!-- <view class="btn-wrap-item" @click="add"> 添加监测点 </view> -->
<view class="btn-wrap-item ml20" @click="submit"> 提交 </view>
<view class="btn-wrap-item" @click="submit"> 提交 </view>
</view>
<uni-drawer ref="gplot" mode="right" :mask-click="false">
<scroll-view style="height: 100%;" scroll-y="true">
<scroll-view style="height: 100%" scroll-y="true">
<view class="content">
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
<image
class="gplot gplot-box"
mode="aspectFill"
:class="{ 'gplot-active': key == activeGplot }"
:src="item.filePath"
@click="activeGplot = key"
v-for="(item, key) in imageList"
:key="key"
/>
<view class="btn-wrap">
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
<view class="btn-wrap-item ml20" @click="closeDrawer"> 确定 </view>
</view>
</view>
</scroll-view>
</uni-drawer>
<uni-drawer ref="point" mode="right" :mask-click="false">
<scroll-view style="height: 100%;" scroll-y="true">
<view style="background:#fff">
<scroll-view style="height: 100%" scroll-y="true">
<view style="background: #fff">
<view class="map-pin-box">
<image class="gplot" mode="widthFix" src="/static/test2.pic.png" />
<image class="gplot" mode="widthFix" :src="formData.topologyDiagramUrl" />
<movable-area class="map-pin-box-area">
<movable-view :x="point.x" :y="point.y" direction="all" @change="dragPoint">
<movable-view :x="point.lat" :y="point.lng" direction="all" @change="dragPoint">
<view class="point center">
<image src="/static/point.png" mode="scaleToFill" />
<!-- <uni-icons type="map-pin" color="#007aff" size="26" class="ml20"></uni-icons> -->
{{ point.alias || point.name }}
</view>
</movable-view>
</movable-area>
@@ -97,7 +136,19 @@
<view class="content">
<view class="content-des">请拖动图中的蓝色定位图标选择监测点位置(左上角)</view>
<uni-forms>
<uni-easyinput type="text" v-model="pointName" placeholder="请输入设监测点名称" />
<uni-data-select
v-model="point.position"
:localdata="positionList"
@change="positionChange"
></uni-data-select>
<uni-easyinput
:clearable="false"
class="mt20"
type="text"
v-model="point.alias"
@change="aliasChange"
placeholder="别名（非必填）"
/>
</uni-forms>
<view class="btn-wrap">
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
@@ -110,154 +161,201 @@
</view>
</template>
<script>
import { registerDevice, getModel, addDevice } from '@/common/api/device.js'
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
export default {
data () {
data() {
return {
loading: false,
code: '',
type: 1,
formData: {
address: '',
type: '',
project: '',
nDid: '',
area: '',
projectId: '',
topologyDiagramUrl: '',
topologyDiagram: '',
},
projectRange: [
{ value: 1, text: "项目1", point: 1 },
{ value: 2, text: "项目2", point: 2 },
{ value: 3, text: "项目3", point: 1 },
],
// typeRange: [
// { value: 1, text: "POS-882AX", point: 1 },
// { value: 2, text: "NPOS-681", point: 2 },
// { value: 3, text: "NPOS-681", point: 1 },
// { value: 4, text: "POV-500", point: 2 },
// { value: 5, text: "PQV-300", point: 1 },
// { value: 6, text: "NPOS-571W", point: 3 },
// { value: 7, text: "NPQS-572W", point: 3 },
// { value: 8, text: "POS-882B6", point: 2 },
// { value: 9, text: "PQS-882B5", point: 1 },
// { value: 10, text: "POS-882B4", point: 2 },
// { value: 11, text: "PQS-882B2", point: 1 },
// { value: 12, text: "POS-882A", point: 2 },
// { value: 13, text: "POS-883A", point: 1 },
// { value: 14, text: "NPOS-581", point: 2 },
// { value: 15, text: "PQS-681", point: 1 },
// { value: 16, text: "POS-8825", point: 3 },
// { value: 17, text: "PQS-782", point: 1 },
// { value: 18, text: "POS-880X", point: 3 },
// { value: 19, text: "NPQS-580", point: 1 },
// { value: 20, text: "NPOS-572", point: 2 },
// ],
projectRange: [],
point: {
x: 170,
y: 100,
},
pointName: '',
pointList: [{
name: '',
x: 170,
y: 100,
}, {
name: '',
x: 170,
y: 100,
}],
pointList: [],
activeGplot: 0,
editIndex: -1,
positionList: [],
imageList: [],
}
},
created() {
let engineering = uni.getStorageSync(this.$cacheKey.engineering)
getProjectList({
pageNum: 1,
pageSize: 9999,
engineeringId: engineering.id,
}).then((res) => {
console.log(res)
let arr = [
...res.data.records.map((item) => {
return {
...item,
text: item.name,
value: item.id,
}
}),
]
this.projectRange = arr
})
let dictData = uni.getStorageSync(this.$cacheKey.dictData)
dictData.forEach((item) => {
if (item.code == 'Line_Position') {
this.positionList = item.children.map((item) => {
return {
...item,
text: item.name,
value: item.id,
}
})
}
})
},
methods: {
projectChange (e) {
queryTopologyDiagramPage() {
console.log(this.formData)
setTimeout(() => {
if (!this.formData.projectId) {
return
}
queryTopologyDiagramPage({
projectId: this.formData.projectId,
}).then((res) => {
this.imageList = res.data.records
this.formData.topologyDiagramUrl = res.data.records[0].filePath
this.formData.topologyDiagram = res.data.records[0].id
})
}, 100)
},
scanCode () {
aliasChange(e) {
this.$forceUpdate()
},
positionChange(e) {
console.log(e)
},
projectChange(e) {},
scanCode() {
uni.scanCode({
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
console.log('条码类型：' + res.scanType)
console.log('条码内容：' + res.result)
},
})
},
register () {
this.type = 2
register() {
if (!this.formData.nDid) {
return this.$util.toast('请输入设备识别码')
}
registerDevice(this.formData.nDid).then(res=>{
getModel(this.formData.nDid).then((res) => {
console.log(res)
this.pointList = res.data.map((item) => {
return {
lat: 0,
lng: 0,
...item,
}
})
this.type = 2
})
})
},
chooseLocation () {
chooseLocation() {
uni.chooseLocation({
success: function (res) {
this.address = res.name
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
}
});
console.log('位置名称：' + res.name)
console.log('详细地址：' + res.address)
console.log('纬度：' + res.latitude)
console.log('经度：' + res.longitude)
},
})
},
chooseGplot () {
chooseGplot() {
this.$refs.gplot.open()
},
closeDrawer () {
this.pointName = ''
this.point = {
x: 170,
y: 100,
}
closeDrawer() {
this.$refs.gplot.close()
this.$refs.point.close()
this.formData.topologyDiagramUrl = this.imageList[this.activeGplot].filePath
this.formData.topologyDiagram = this.imageList[this.activeGplot].id
this.$forceUpdate()
},
add () {
add() {
this.$refs.point.open()
},
addPoint () {
if (!this.pointName) {
this.$util.toast('请输入监测点名称')
addPoint() {
if (!this.point.position) {
this.$util.toast('请选择监测点')
return
}
if (this.editIndex > -1) {
this.pointList[this.editIndex] = {
x: this.point.x,
y: this.point.y,
pointName: this.pointName,
}
this.editIndex = -1
if (this.point.alias) {
this.point.name = this.point.alias
} else {
let arr = this.pointList.filter(item => item.pointName == this.pointName)
if (arr.length > 0) {
this.$util.toast('监测点名称已存在')
return
}
this.pointList.push({
x: this.point.x,
y: this.point.y,
pointName: this.pointName,
this.positionList.forEach((item) => {
if (item.id == this.point.position) {
this.point.name = item.name
}
})
}
console.log(this.pointList);
this.pointList[this.editIndex] = this.point
console.log(this.pointList)
this.closeDrawer()
},
deletePoint (index) {
deletePoint(index) {
this.pointList.splice(index, 1)
},
editPoint (item, index) {
editPoint(item, index) {
this.point = item
this.editIndex = index
this.point.x = item.x
this.point.y = item.y
this.pointName = item.pointName
if (!this.point.alias) {
let every = this.positionList.every((item) => item.name != this.point.name)
console.log(every)
if (every) {
this.point.alias = this.point.name
} else {
this.point.alias = ''
}
}
this.$refs.point.open()
this.$forceUpdate()
},
dragPoint (e) {
dragPoint(e) {
console.log(e)
this.point.x = e.detail.x
this.point.y = e.detail.y
this.point.lat = e.detail.x
this.point.lng = e.detail.y
},
submit () {
this.$util.toast('提交成功')
setTimeout(() => {
uni.navigateBack({ delta: 1 })
}, 1500);
submit() {
if (!this.formData.projectId) {
return this.$util.toast('请选择项目')
}
if (!this.formData.topologyDiagram) {
return this.$util.toast('请选择拓扑图')
}
addDevice({
...this.formData,
list: this.pointList,
ndid: this.formData.nDid,
}).then((res) => {
console.log(res)
this.$util.toast('提交成功')
setTimeout(() => {
uni.navigateBack({ delta: 1 })
}, 1500)
})
},
}
},
}
</script>
<style lang='scss'>
<style lang="scss">
.new {
padding: 34rpx;
@@ -291,6 +389,12 @@ export default {
width: 100%;
height: 188rpx;
}
.gplot-empty {
margin: 0 auto;
border: 1px dashed #dcdfe6;
color: #999;
height: 188rpx;
}
.gplot-box {
height: 280rpx;
@@ -342,19 +446,10 @@ export default {
}
.point {
height: 100rpx;
width: 100rpx;
image {
width: 100%;
height: 100%;
}
white-space: nowrap;
}
}
/deep/ .uni-drawer__content {
width: 100vw !important;
}
@@ -371,4 +466,4 @@ export default {
.point-item:first-of-type {
border-top: none;
}
</style>
</style>