首页修改
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<view>
|
||||
<uni-data-checkbox v-model="radio" :localdata="sex"></uni-data-checkbox>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData"/>
|
||||
<qiun-data-charts type="column" :ontouch='true' :opts="opts" :chartData="chartData"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -12,8 +12,8 @@ export default {
|
||||
props: {
|
||||
basicData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -26,31 +26,45 @@ export default {
|
||||
//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
|
||||
opts: {
|
||||
enableScroll: true,
|
||||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
|
||||
padding: [10, 0, 10, 0],
|
||||
color: [
|
||||
'#1890FF',
|
||||
'#91CB74',
|
||||
'#FAC858',
|
||||
'#EE6666',
|
||||
'#73C0DE',
|
||||
'#3CA272',
|
||||
'#FC8452',
|
||||
'#9A60B4',
|
||||
'#ea7ccc',
|
||||
],
|
||||
padding: [20, 10, 0, 0],
|
||||
legend: {},
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
itemCount: 8,
|
||||
// scrollShow: true,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
yAxis: {
|
||||
data: [
|
||||
{
|
||||
min: 0
|
||||
}
|
||||
]
|
||||
min: 0,
|
||||
tofix: 4,
|
||||
},
|
||||
],
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 30,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
width: 10,
|
||||
categoryGap: 1,
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
basicData: {
|
||||
@@ -75,7 +89,8 @@ export default {
|
||||
})
|
||||
if (index > -1) {
|
||||
if (this.renderData[arr[index]['name']][item.phase]) {
|
||||
this.renderData[arr[index]['name']][item.phase][item.statisticalName] = item.statisticalData || 0
|
||||
this.renderData[arr[index]['name']][item.phase][item.statisticalName] =
|
||||
item.statisticalData || 0
|
||||
} else {
|
||||
this.renderData[arr[index]['name']][item.phase] = {
|
||||
phase: item.phase,
|
||||
@@ -88,76 +103,59 @@ export default {
|
||||
this.sex = Object.keys(this.renderData['电网侧']).map((item, index) => {
|
||||
return {
|
||||
text: item,
|
||||
value: index
|
||||
value: index,
|
||||
}
|
||||
})
|
||||
|
||||
let obj = JSON.parse(JSON.stringify(this.renderData['电网侧'][Object.keys(this.renderData['电网侧'])[0]]))
|
||||
let obj = JSON.parse(
|
||||
JSON.stringify(this.renderData['电网侧'][Object.keys(this.renderData['电网侧'])[0]]),
|
||||
)
|
||||
delete obj['phase']
|
||||
console.log(Object.keys(obj).map(item => {
|
||||
return Number(item.match(/Pq_HarmI_(\d+)/)[1])
|
||||
}))
|
||||
console.log(Object.values(this.renderData['电网侧'][this.sex[this.radio].text]).filter((item) => {
|
||||
return typeof item === 'number'
|
||||
}))
|
||||
console.log(Object.values(this.renderData['负载侧'][this.sex[this.radio].text]).filter((item) => {
|
||||
return typeof item === 'number'
|
||||
}))
|
||||
this.chartData = {
|
||||
categories: Object.keys(obj).map(item => {
|
||||
console.log(
|
||||
Object.keys(obj).map((item) => {
|
||||
return item.match(/Pq_HarmI_(\d+)/)[1]
|
||||
}),
|
||||
)
|
||||
console.log(
|
||||
Object.values(this.renderData['电网侧'][this.sex[this.radio].text]).filter((item) => {
|
||||
return typeof item === 'number'
|
||||
}),
|
||||
)
|
||||
console.log(
|
||||
Object.values(this.renderData['负载侧'][this.sex[this.radio].text]).filter((item) => {
|
||||
return typeof item === 'number'
|
||||
}),
|
||||
)
|
||||
this.chartData = {
|
||||
categories: Object.keys(obj).map((item) => {
|
||||
return Number(item.match(/Pq_HarmI_(\d+)/)[1])
|
||||
}),
|
||||
series: [
|
||||
{
|
||||
name: "电网侧",
|
||||
name: '电网侧',
|
||||
data: Object.values(this.renderData['电网侧'][this.sex[this.radio].text]).filter((item) => {
|
||||
return typeof item === 'number'
|
||||
})
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "负载侧",
|
||||
name: '负载侧',
|
||||
data: Object.values(this.renderData['负载侧'][this.sex[this.radio].text]).filter((item) => {
|
||||
return typeof item === 'number'
|
||||
})
|
||||
}
|
||||
]
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.getServerData();
|
||||
},
|
||||
methods: {
|
||||
getServerData() {
|
||||
//模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
|
||||
let res = {
|
||||
categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"],
|
||||
series: [
|
||||
{
|
||||
name: "电网侧",
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 7]
|
||||
},
|
||||
{
|
||||
name: "负载册",
|
||||
data: [5, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chartData = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.charts-box {
|
||||
margin-top: 20rpx;
|
||||
height: 600px;
|
||||
height: 800rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Cn-page :loading="loading" noPadding>
|
||||
<view slot="body">
|
||||
<view class="detail" :style="{ opacity: domLoading ? '0' : '1' }">
|
||||
<view class="detail" :style="{ opacity: domLoading ? '0' : '1' }" style="overflow: hidden">
|
||||
<view class="detail-header">
|
||||
<Cn-htmlToImg domId="header" @renderFinish="renderFinish">
|
||||
<view class="header" id="header" ref="header" @click="previewImg">
|
||||
@@ -331,7 +331,7 @@ export default {
|
||||
this.timer = setInterval(() => {
|
||||
console.log('askDevData')
|
||||
this.client.publish(`/zl/askDevData/${this.devId}`)
|
||||
}, 10000)
|
||||
}, 1000 * 60)
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -346,9 +346,10 @@ export default {
|
||||
console.log('连接断开')
|
||||
})
|
||||
.on('message', (topic, message) => {
|
||||
console.log('接收推送信息:', message.toString())
|
||||
if (!message.toString()) {
|
||||
return
|
||||
console.log('接收推送信息:', message.toString(), topic)
|
||||
if (topic !== `/zl/devData/${this.devId}`) return
|
||||
if ((!message.toString() || message.toString().length < 10) && this.loading) {
|
||||
this.$util.toast('该设备暂无数据')
|
||||
}
|
||||
this.loading = false
|
||||
this.handlerData(JSON.parse(message.toString()))
|
||||
@@ -389,6 +390,8 @@ export default {
|
||||
uni.setNavigationBarTitle({title: this.deviceInfo.devName || '设备详情'})
|
||||
this.topolodyData.filter((item) => {
|
||||
let index = this.deviceInfo.appsLineTopologyDiagramPO.findIndex((element) => {
|
||||
element.label = element.name
|
||||
item.label = element.name
|
||||
return element.linePostion === item.linePostion
|
||||
})
|
||||
if (index > -1) {
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<uni-forms>
|
||||
<uni-forms-item label="设备识别码">
|
||||
<view style="display: flex">
|
||||
<uni-easyinput type="text" v-model="formData.nDid" placeholder="请输入设备识别码" />
|
||||
<uni-easyinput type="text" v-model="formData.nDid" placeholder="请输入设备识别码"/>
|
||||
<uni-icons
|
||||
type="camera"
|
||||
color="#007aff"
|
||||
@@ -18,7 +18,7 @@
|
||||
</uni-forms>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn-wrap-item" @click="register"> 发起注册 </view>
|
||||
<view class="btn-wrap-item" @click="register"> 发起注册</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -41,17 +41,17 @@
|
||||
<view style="display: flex">
|
||||
<view style="flex: 1">
|
||||
<view v-if="formData.topologyDiagramUrl">
|
||||
<image :src="formData.topologyDiagramUrl" style="width: 100%" mode="widthFix" />
|
||||
<image :src="formData.topologyDiagramUrl" style="width: 100%" mode="widthFix"/>
|
||||
</view>
|
||||
<view v-else class="gplot gplot-empty center" @click="chooseGplot"> 选择拓扑图 </view>
|
||||
<view v-else class="gplot gplot-empty center" @click="chooseGplot"> 选择拓扑图</view>
|
||||
</view>
|
||||
<!-- <uni-icons
|
||||
<uni-icons
|
||||
type="image"
|
||||
color="#007aff"
|
||||
size="26"
|
||||
class="ml20"
|
||||
@click="chooseGplot"
|
||||
></uni-icons> -->
|
||||
></uni-icons>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="监测点" v-if="pointList.length && formData.topologyDiagramUrl">
|
||||
@@ -68,10 +68,10 @@
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
<image class="gplot-image" ref="gplot-image" :src="formData.topologyDiagramUrl" mode="widthFix" />
|
||||
<image class="gplot-image" ref="gplot-image" :src="formData.topologyDiagramUrl" mode="widthFix"/>
|
||||
<view class="btn-wrap">
|
||||
<!-- <view class="btn-wrap-item" @click="add"> 添加监测点 </view> -->
|
||||
<view class="btn-wrap-item" @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">
|
||||
@@ -86,8 +86,8 @@
|
||||
:key="key"
|
||||
/>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
|
||||
<view class="btn-wrap-item ml20" @click="confirmGplot"> 确定 </view>
|
||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
|
||||
<view class="btn-wrap-item ml20" @click="confirmGplot"> 确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -96,7 +96,7 @@
|
||||
<scroll-view style="height: 100%" scroll-y="true">
|
||||
<view style="background: #fff">
|
||||
<view class="map-pin-box">
|
||||
<image class="gplot" mode="widthFix" :src="formData.topologyDiagramUrl" />
|
||||
<image class="gplot" mode="widthFix" :src="formData.topologyDiagramUrl"/>
|
||||
|
||||
<movable-area class="map-pin-box-area">
|
||||
<movable-view :x="point.lat" :y="point.lng" direction="all" @change="dragPoint">
|
||||
@@ -125,8 +125,8 @@
|
||||
/>
|
||||
</uni-forms>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
|
||||
<view class="btn-wrap-item ml20" @click="addPoint"> 确定 </view>
|
||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消</view>
|
||||
<view class="btn-wrap-item ml20" @click="addPoint"> 确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -135,8 +135,9 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { registerDevice, getModel, addDevice, queryByTopoId, updateDevice } from '@/common/api/device.js'
|
||||
import { getProjectList, queryTopologyDiagramPage } from '@/common/api/project.js'
|
||||
import {registerDevice, getModel, addDevice, queryByTopoId, updateDevice} from '@/common/api/device.js'
|
||||
import {getProjectList, queryTopologyDiagramPage} from '@/common/api/project.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -170,6 +171,8 @@ export default {
|
||||
position: item.linePostion,
|
||||
}
|
||||
})
|
||||
console.log(this.pointList, 'this.poinitList')
|
||||
this.queryTopologyDiagramPage()
|
||||
},
|
||||
created() {
|
||||
let engineering = uni.getStorageSync(this.$cacheKey.engineering)
|
||||
@@ -236,8 +239,9 @@ export default {
|
||||
projectId: this.formData.projectId,
|
||||
}).then((res) => {
|
||||
this.imageList = res.data.records
|
||||
this.activeGplot = 0
|
||||
this.confirmGplot()
|
||||
this.activeGplot = this.imageList.findIndex(item => {
|
||||
return item.id === this.deviceInfo.id
|
||||
})
|
||||
})
|
||||
}, 100)
|
||||
},
|
||||
@@ -247,7 +251,8 @@ export default {
|
||||
positionChange(e) {
|
||||
this.point.name = this.positionList.find((item) => item.id == e).name
|
||||
},
|
||||
projectChange(e) {},
|
||||
projectChange(e) {
|
||||
},
|
||||
scanCode() {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
@@ -309,6 +314,8 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
this.point.lat = this.point.coordinate.x
|
||||
this.point.lng = this.point.coordinate.y
|
||||
this.pointList[this.editIndex] = this.point
|
||||
console.log(this.pointList)
|
||||
this.closeDrawer()
|
||||
@@ -317,6 +324,7 @@ export default {
|
||||
this.pointList.splice(index, 1)
|
||||
},
|
||||
editPoint(item, index) {
|
||||
console.log(item)
|
||||
this.point = item
|
||||
console.log(this.point)
|
||||
this.editIndex = index
|
||||
@@ -334,15 +342,22 @@ export default {
|
||||
},
|
||||
dragPoint(e) {
|
||||
console.log(e)
|
||||
this.point.lat = e.detail.x
|
||||
this.point.lng = e.detail.y
|
||||
this.point.coordinate = {
|
||||
x: e.detail.x,
|
||||
y: e.detail.y,
|
||||
}
|
||||
// this.point.lat = e.detail.x
|
||||
// this.point.lng = e.detail.y
|
||||
},
|
||||
submit() {
|
||||
updateDevice(this.pointList).then((res) => {
|
||||
updateDevice({
|
||||
pointList: this.pointList,
|
||||
id: this.imageList[this.activeGplot].id
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
this.$util.toast('提交成功')
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({ delta: 2 })
|
||||
uni.navigateBack({delta: 2})
|
||||
}, 1500)
|
||||
})
|
||||
},
|
||||
@@ -383,6 +398,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 188rpx;
|
||||
}
|
||||
|
||||
.gplot-empty {
|
||||
margin: 0 auto;
|
||||
border: 1px dashed #dcdfe6;
|
||||
@@ -460,6 +476,7 @@ export default {
|
||||
.point-item:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.gplot-image {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
@@ -278,9 +278,14 @@ export default {
|
||||
},
|
||||
scanCode() {
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
success (res) {
|
||||
console.log('条码类型:' + res.scanType)
|
||||
console.log('条码内容:' + res.result)
|
||||
let content = JSON.parse(res.result)
|
||||
if (content.type === 'NDID') {
|
||||
this.formData.nDid = content.nDid
|
||||
this.register()
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
@@ -337,6 +342,8 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
this.point.lat = this.point.coordinate.x
|
||||
this.point.lng = this.point.coordinate.y
|
||||
this.pointList[this.editIndex] = this.point
|
||||
console.log(this.pointList)
|
||||
this.closeDrawer()
|
||||
@@ -362,8 +369,12 @@ export default {
|
||||
},
|
||||
dragPoint(e) {
|
||||
console.log(e)
|
||||
this.point.lat = e.detail.x
|
||||
this.point.lng = e.detail.y
|
||||
this.point.coordinate = {
|
||||
x: e.detail.x,
|
||||
y: e.detail.y,
|
||||
}
|
||||
// this.point.lat = e.detail.x
|
||||
// this.point.lng = e.detail.y
|
||||
},
|
||||
submit() {
|
||||
if (!this.formData.projectId) {
|
||||
|
||||
197
pages/device/share.vue
Normal file
197
pages/device/share.vue
Normal file
File diff suppressed because one or more lines are too long
@@ -4,7 +4,8 @@
|
||||
<view class="transfer">
|
||||
<!-- <div class="transfer-img" ref="qrCodeUrl" /> -->
|
||||
<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }"></uqrcode> -->
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }" :loading="false"></uqrcode>
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="content" :options="{ margin: 10 }"
|
||||
:loading="false"></uqrcode>
|
||||
|
||||
<canvas id="qrcode" width="200" height="200"></canvas>
|
||||
<view class="transfer-text">请让接收人员扫码接收</view>
|
||||
@@ -12,7 +13,7 @@
|
||||
<button class="transfer-btn-item" style="background-color: #fff; color: #111" @click="back">
|
||||
返回
|
||||
</button>
|
||||
<button class="transfer-btn-item ml20" @click="home">转移成功</button>
|
||||
<button class="transfer-btn-item ml20" @click="scan">扫一扫</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -22,22 +23,51 @@
|
||||
// import QRCode from 'qrcodejs2'
|
||||
// import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
|
||||
|
||||
import {transferDevice} from "@/common/api/device";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
content: '',
|
||||
options: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
uni.navigateBack({delta: 1})
|
||||
},
|
||||
home() {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
uni.navigateBack({delta: 1})
|
||||
},
|
||||
transferDevice(userId) {
|
||||
transferDevice(this.options.id, userId).then((res) => {
|
||||
uni.showToast({
|
||||
title: '移交成功',
|
||||
icon: 'none',
|
||||
})
|
||||
uni.navigateBack()
|
||||
})
|
||||
},
|
||||
scan() {
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let data = JSON.parse(res.result)
|
||||
if (data.type === 'userId') {
|
||||
this.transferDevice(data.id)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请扫描正确的二维码',
|
||||
icon: 'none',
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.options = options
|
||||
this.content = JSON.stringify({
|
||||
type: 'transferDevice',
|
||||
id: options.id,
|
||||
|
||||
Reference in New Issue
Block a user