|
@@ -1,220 +0,0 @@
|
|
-<template>
|
|
|
|
- <view class="container"><!-- enable-poi layer-style="1" subkey="UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN" -->
|
|
|
|
- <map name="map" style="width: 100%;height: 100vh;" scale="10" :latitude="latitude" :longitude="longitude"
|
|
|
|
- show-location :markers="markers" @markertap="onMarkerTap">
|
|
|
|
- <cover-view slot="callout">
|
|
|
|
- <cover-view class="customCallout" v-for="item in markers" :key="item.id" :marker-id="item.id">
|
|
|
|
- <cover-view class="title">
|
|
|
|
- 设备信息
|
|
|
|
- </cover-view>
|
|
|
|
- <cover-view class="rep">
|
|
|
|
- <cover-view class="row">
|
|
|
|
- 设备名称:<cover-view class="value u-line-1">{{ item.title || ' --' }}</cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- <cover-view class="row">
|
|
|
|
- 设备编号:<cover-view class="value u-line-1">{{ item.serialnumber || ' --' }}</cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- <cover-view class="row ">
|
|
|
|
- 设备状态:<cover-view class="status u-line-1">{{ item.status || ' --' }}</cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- <cover-view class="row" v-for="item1 in information" :key="item1.paramname">
|
|
|
|
- {{ item1.paramname }}:<cover-view class="value u-line-1">{{ item1.lastvalue + item1.unit ||
|
|
|
|
- '--' }}</cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- <cover-view class="botton" hover-class="navigator-hover">
|
|
|
|
- 更多信息
|
|
|
|
- </cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
- </map>
|
|
|
|
- <view class="popup" v-if="h5Popup">
|
|
|
|
- <view class="customCallout" style="padding: 10px;">
|
|
|
|
- <view class="title">
|
|
|
|
- 设备信息
|
|
|
|
- <u-icon name="close" @click="h5Popup = false" :size="tovw('16px')" />
|
|
|
|
- </view>
|
|
|
|
- <view class="rep">
|
|
|
|
- <view class="row">
|
|
|
|
- 设备名称:<view class="value u-line-1">{{ facility.title || ' --' }}士大夫阿萨德阿萨德阿萨德阿三</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="row">
|
|
|
|
- 设备编号:<view class="value u-line-1">{{ facility.serialnumber || ' --' }}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="row">
|
|
|
|
- 设备状态:<view class="status u-line-1">{{ facility.status || ' --' }}</view>
|
|
|
|
- </view>
|
|
|
|
- <view class="row" v-for="item1 in information" :key="item1.paramname">
|
|
|
|
- {{ item1.paramname }}:<view class="value u-line-1">{{ item1.lastvalue + item1.unit || ' --' }}
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="botton" hover-class="navigator-hover">
|
|
|
|
- 更多信息
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-export default {
|
|
|
|
- name: 'My-map',
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- //subkey: 'GUCBZ-FWJCQ-AOQ5J-BUCCC-V7MJV-2QBDD',微信小程序个性化样式KEY
|
|
|
|
- uninitialized: true,
|
|
|
|
- latitude: 30.746129,
|
|
|
|
- longitude: 120.755486,
|
|
|
|
- markers: [],
|
|
|
|
- information: [],
|
|
|
|
- facility: {},
|
|
|
|
- h5Popup: false,
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- this.setLocation();
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- init(forcedUpdating = true) {
|
|
|
|
- this.uninitialized = false;
|
|
|
|
- this.getList()
|
|
|
|
- console.log("加载地图")
|
|
|
|
- },
|
|
|
|
- getList() {
|
|
|
|
- this.$Http.basic({
|
|
|
|
- "id": 20230711144102,
|
|
|
|
- "content": {
|
|
|
|
- "pageNumber": 1,
|
|
|
|
- "pageSize": 9999,
|
|
|
|
- "where": {
|
|
|
|
- "condition": "",
|
|
|
|
- "areaname": ""
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }).then(res => {
|
|
|
|
- console.log("设备列表", res)
|
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
|
- this.markers = res.data.filter(v => v.latitude).map(v => {
|
|
|
|
- v.id = v.w_deviceid - 0;
|
|
|
|
- v.title = v.devicename;
|
|
|
|
- if (this.usePort == 'h5') v.iconPath = require("../../../static/img/icon.png");
|
|
|
|
- v.customCallout = { display: 'BYCLICK', anchorY: -10 }
|
|
|
|
- return v
|
|
|
|
- });
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- onMarkerTap(e) {
|
|
|
|
- console.log("单击标点", e)
|
|
|
|
- this.h5Popup = true;
|
|
|
|
- this.information = [];
|
|
|
|
- this.$Http.basic({
|
|
|
|
- "id": 20230711165702,
|
|
|
|
- "content": {
|
|
|
|
- "w_deviceid": e.detail.markerId
|
|
|
|
- }
|
|
|
|
- }).then(res => {
|
|
|
|
- console.log("设备详情", res)
|
|
|
|
- if (this.cutoff(res.msg)) return;
|
|
|
|
- this.information = res.data;
|
|
|
|
- if (this.usePort == 'h5') {
|
|
|
|
- this.facility = this.markers.find(v => v.id == e.detail.markerId);
|
|
|
|
- console.log(this.facility)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- async setLocation() {
|
|
|
|
- let res = this.location || await this.getLocation();
|
|
|
|
- this.__proto__.location = res;
|
|
|
|
- this.latitude = res.latitude;
|
|
|
|
- this.longitude = res.longitude;
|
|
|
|
- console.log("地图", res)
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
-page {
|
|
|
|
- width: 100vw;
|
|
|
|
- height: 100vh;
|
|
|
|
- overflow: hidden;
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.container {
|
|
|
|
- position: relative;
|
|
|
|
-
|
|
|
|
- .popup {
|
|
|
|
- position: absolute;
|
|
|
|
- top: 13%;
|
|
|
|
- right: 12%;
|
|
|
|
- z-index: 99999;
|
|
|
|
- padding: 10px;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-.customCallout {
|
|
|
|
- width: 178px;
|
|
|
|
- background: rgba($color: #ffffff, $alpha: .8);
|
|
|
|
- border-radius: 4px;
|
|
|
|
- padding: 10rpx;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
-
|
|
|
|
- .title {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- line-height: 22px;
|
|
|
|
- font-size: 16px;
|
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
|
- font-weight: bold;
|
|
|
|
- color: #333333;
|
|
|
|
-
|
|
|
|
- .icon {
|
|
|
|
- margin-right: 5px;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .rep {
|
|
|
|
- margin-top: 5px;
|
|
|
|
-
|
|
|
|
- .row {
|
|
|
|
- display: flex !important;
|
|
|
|
- line-height: 17px;
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: #333333;
|
|
|
|
- margin-top: 5px;
|
|
|
|
-
|
|
|
|
- .value {
|
|
|
|
- flex: 1;
|
|
|
|
- width: 0;
|
|
|
|
- line-height: 17px;
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: #000;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .status {
|
|
|
|
- line-height: 17px;
|
|
|
|
- font-size: 12px;
|
|
|
|
- color: #3874F6;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .botton {
|
|
|
|
- width: 100%;
|
|
|
|
- text-align: center;
|
|
|
|
- height: 30px;
|
|
|
|
- line-height: 30px;
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #3874F6;
|
|
|
|
- background: #EBF2FF;
|
|
|
|
- border: 1px solid #3874F6;
|
|
|
|
- border-radius: 4px;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- margin-top: 10px;
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|