<template> <view class="content"> <!-- <third-comp :key="menuKey"></third-comp> --> <view v-if="toggleSwitch==false"> <view> <cu-custom bgColor="bg-blacks" :isBack="false"> <block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block> <block slot="right"> <view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;"> <view class="cu-tag looknumber" style="margin-top: -2%;"> <block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block> </view> </view> </block> <block slot="right"></block> <block slot="content">{{ address }}</block> <block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block> </cu-custom> </view> <!-- 地图组件 --> <view> <div><drawer ref="drawer" ></drawer></div> <div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div> <view class="page-body"> <view class="page-section page-section-gap"> <map style="width: 100%; height: 300px;" :controls="controls" :circles="circles" :polyline="polyline" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" ></map> </view> </view> </view> <!--经纬度组件--> <view class="InformationCard"> <view class="informationCardAll"> <view class="informationCardTextOne"> <view class="informationCardText"> <view class="textSilver">经度:</view> <view class="textWhite">{{ mapEnd_1 }}</view> </view> </view> <view class="informationCardTextOne"> <view class="informationCardText"> <view class="textSilver">纬度:</view> <view class="textWhite">{{ mapEnd_2 }}</view> </view> </view> </view> </view> <!-- 个人信息组件 --> <view class="Personal_information_W"> <view class="name">姓名:李占国</view> <view class="history" @click="mapDate"> <span class="navigation"></span> </view> <view class="skills">技能:电力类,机械类</view> </view> <!-- 历史曲线组件 --> <view class="curve"> <view class="curve_l">健康情况</view> <view class="curve_r" @tap="common.navTo('/components/bracelet/braceletHistoryCurve?braceletCurve=' + braceletCurve)">历史曲线</view> <div class="greater"></div> </view> <!-- 健康详情组件 --> <view class="healthy"> <view class="healthy_H"> <view class="details_z">{{xtpl_computed}}<!-- ({{ bracelet[deviceName][targetName_xtpl][targetName_xtpl_size].value }}) --></view> <view class="details_m">{{bs_computed}}</view> <view class="details_y">{{ssxy_computed}}</view> </view> <view class="healthy_N"> <view class="details_z">{{szxy_computed}}<!-- ({{ bracelet[deviceName][targetName_szxy][targetName_szxy_size].value }}) --></view> <view class="details_m">{{pld_computed}}<!-- ({{ bracelet[deviceName][targetName_pld][targetName_pld_size].value }}) --></view> <view class="details_y">{{xynd_computed}}<!-- ({{ bracelet[deviceName][targetName_xynd][targetName_xynd_size].value }}) --></view> </view> </view> </view> <view v-if="toggleSwitch==true"> <WeatherProphethomepage ref="r1"></WeatherProphethomepage> </view> </view> </template> <script> import res from '../../common/data.json'; import drawer from '../../components/drawer/forecastThreeLineDrawer.vue'; import plusDrawer from '../../components/drawer/plusDrawer.vue'; import WeatherProphethomepage from '../../components/weatherProphethomepage/WeatherProphethomepage.vue'; var _self; export default { components: { drawer: drawer, plusDrawer: plusDrawer, WeatherProphethomepage:WeatherProphethomepage }, data: function() { return { bs_computed:'', xtpl_computed:'', ssxy_computed:'', szxy_computed:'', pld_computed:'', xynd_computed:'', WeatherProphethomepagebool:true, toggleSwitch:false, menuKey:1, pointKey: 'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0087', socketTask_bracelet: '', socketTask_close_bracelet: '', deviceName: 'Y1-A0BC', deviceNamePld: 'Y1-A0BC_PLD', deviceNameBs: 'Y1-A0BC_BS', deviceNameSsxy: 'Y1-A0BC_SSXY', deviceNameXtpl: 'Y1-A0BC_XTPL', deviceNameXynd: 'Y1-A0BC_XYND', deviceNameSzxy: 'Y1-A0BC_SZXY', deviceNameLng: 'Y1-A0BC_LNG', deviceNameLat: 'Y1-A0BC_LAT', bracelet: { deviceName: '', deviceNamePld: '', deviceNameBs: '', deviceNameSsxy: '', deviceNameXtpl: '', deviceNameXynd: '', deviceNameSzxy: '', }, braceletCurve: {}, mapBegin_1:'', mapEnd_1:'', mapBegin_2:'', mapEnd_2:'', points:[ { latitude:'', longitude:'' }, { latitude:'', longitude:'' } ], list:{}, braceletCurve_SSXY: [], braceletCurve_PLD: [], braceletCurve_SZXY: [], braceletCurve_XTPL: [], braceletCurve_BS: [], braceletCurve_XYND: [], braceletCurve_LNG: [], braceletCurve_LAT: [], /* targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true}, targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''}, */ targetName: '日发电量', targetUnit: '万kwh', bool:true, pld: '', ssxy: '', lng: '', szxy: '', lat: '', xtpl: '', bs: '', xynd: '', device_nam: '', title: 'map', latitude: 39.907,//定位中心 longitude: 116.39742,// covers: [ { latitude:39.909 , //纬度坐标点 longitude:116.39742 , //经度 iconPath: '../../static/picture/forcast/DingWei.png', //显示的图标 title: '阿打算', //标注点名 label: { //为标记点旁边增加标签 content: '', //文本1 color: '#F76350', //文本颜色 anchorX: 0, //label的坐标,原点是 marker 对应的经纬度 anchorY: -80, //label的坐标,原点是 marker 对应的经纬度 // x:39.909,//这个组件微信在1.2.0以后就废弃了 // y:116.39742, bgColor: '#fff', //背景色 padding: 5, //文本边缘留白 borderWidth: 1, //边框宽度 borderColor: '#D84C29', //边框颜色 textAlign: 'right' //文本对齐方式。 }, callout: { //自定义标记点上方的气泡窗口 点击有效 content: '地点1', color: '#F76350', fontSize: 12, borderRadius: 5 } // anchor:{//经纬度在标注图标的锚点,默认底边中点 // x:5, // y:1, // } } , { latitude:39.90 ,//最后点 longitude: 116.399,// iconPath: '../../static/picture/forcast/DingWei.png', title:'阿迪达斯', x:'',// y: '',//116.399 label:{ content:'', color:'#F76350', bgColor:'#fff', padding:5, borderRadius:4, }, callout:{ content:'地点2', color:'#F76350', fontSize:12 } } ], scale: 15, //地图层级 controls: [ { //在地图上显示控件,控件不随着地图移动 id: 1, //控件id /* iconPath: '../../static/picture/forcast/DingWei.png', *///显示的图标 position: { //控件在地图的位置 left: 15, top: 15, width: 40, height: 40 } } ], circles: [ { //在地图上显示圆 latitude: 39.9, longitude: 116.39, fillColor: '#FFC41F', //填充颜色 color: '#12A1DD', //描边的颜色 radius: 0, //半径 strokeWidth: 2 //描边的宽度 } ], polyline: [ { /* .polyline[0].points */ points:[{}], //指定一系列坐标点,从数组第一项连线至最后一项 /* points: [{ latitude:this.mapBegin_1, longitude:this.mapBegin_2 }, { latitude: this.mapEnd_1, longitude:this.mapEnd_2 }], */ /* points: [{ latitude: 0, longitude: 0 }, { latitude: 0, longitude: 0 }], */ color: '#0000AA', //线的颜色 width: 2, //线的宽度 dottedLine: true, //是否虚线 arrowLine: true //带箭头的线 开发者工具暂不支持该属性 } ], badge: 22, inconList: ['form', 'favor', 'question', 'edit'], modalName: null, address: '宁夏新能源公司', drawerList: [ { name: '气象预测' } /* { "name": "" }, { "name": "" }, { "name": "" }, { "name": "" }, */ ], plusDrawerList: [ { name: '宁夏新能源公司', windPowerStationId: 'NINGXIAXINNENGYUANGONGSI' }, { name: '牛首山风电场', windPowerStationId: 'NSS_FDC' }, { name: '香山风电场', windPowerStationId: 'XS_FDC' }, { name: '石板泉风电场', windPowerStationId: 'SBQ_FDC' }, { name: '青山风电场', windPowerStationId: 'QS_FDC' }, { name: '麻黄山风电场', windPowerStationId: 'MHS_FDC' } ] }; }, mounted() { //document.querySelector('body').setAttribute('style', 'background-color:#000000'); }, onHide() { this.$refs.drawer.closeDrawer(); this.hideModal(); }, onShow() { this.windPowerStationId = uni.getStorageSync('windPowerStationId'); this.address = this.getWindPowerStationNameToSessionStorage(); }, onLoad(pointKey) { let _this = this; this.pointKey = pointKey.pointKey; this.targetName = pointKey.callTargetName; this.targetUnit = pointKey.callTargetUnit; this.braceletData(); /* console.log(_this.bracelet[_this.deviceName]); console.log(_this.bracelet[_this.deviceName][_this.targetName_pld][0]); */ /* uni.getLocation({//获取当前的位置坐标 type: 'wgs84', success: function (res) { console.log('当前位置的经度:' + res.longitude); console.log('当前位置的纬度:' + res.latitude); } }); */ }, onReady() {}, computed: { targetName_xtpl: function() { return this.deviceName + '_XTPL'; }, targetName_xtpl_size: function() { return this.bracelet[this.deviceName][this.targetName_xtpl].length - 1; }, targetName_pld: function() { return this.deviceName + '_PLD'; }, targetName_pld_size: function() { return this.bracelet[this.deviceName][this.targetName_pld].length - 1; }, targetName_bs: function() { return this.deviceName + '_BS'; }, targetName_bs_size: function() { return this.bracelet[this.deviceName][this.targetName_bs].length - 1; }, targetName_ssxy: function() { return this.deviceName + '_SSXY'; }, targetName_ssxy_size: function() { return this.bracelet[this.deviceName][this.targetName_ssxy].length - 1; }, targetName_szxy: function() { return this.deviceName + '_SZXY'; }, targetName_szxy_size: function() { return this.bracelet[this.deviceName][this.targetName_szxy].length - 1; }, targetName_xynd: function() { return this.deviceName + '_XYND'; }, targetName_xynd_size: function() { return this.bracelet[this.deviceName][this.targetName_xynd].length - 1; }, backStageIp: function() { return this.$store.state.wholeSituationBackStageIp; }, backStagePort: function() { return this.$store.state.wholeSituationBackStagePort; }, windpowerstationNameToId: function() { return this.$store.state.windpowerstationNameToId; } }, methods: { mapDate(){ if(this.bool){ this.$delete(this.polyline[0],'points'); this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng]; this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat]; this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value; this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value; this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value; this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; for(let val of this.polyline){ this.$set(val,'points',this.points); this.bool = false; console.log("true"); } /* 定义地图经纬度中心 */ var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2); var lng= parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1); this.latitude = lat/2; this.longitude = lng/2; }else{ /* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng]; this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat]; this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value; this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value; this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value; this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; */ this.$delete(this.polyline[0],'points'); /* this.latitude = this.mapBegin_2+this.mapEnd_2/2; this.longitude = this.mapBegin_1+this.mapEnd_1/2; */ console.log("false"); /* 还原定位中心位置 */ this.latitude = this.mapBegin_2; this.longitude = this.mapBegin_1; this.bool = true; } this.$forceUpdate(); }, openDrawer: function() { this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList); }, closeDrawer: function() { this.drawerIsShow = false; }, pushWindPowerStationNameToSessionStorage(windpowerstationName) { uni.setStorageSync('windpowerstationName', windpowerstationName); //sessionStorage.setItem('windpowerstationName', windpowerstationName); //alert("v"+ sessionStorage.getItem("windpowerstationName")); //this.common.goback('/pages/index/Index'); }, getWindPowerStationNameToSessionStorage() { uni.getStorageSync('windpowerstationName'); return uni.getStorageSync('windpowerstationName'); }, showModal(e) { this.modalName = e.currentTarget.dataset.target; this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName); }, hideModal() { this.modalName = null; this.$refs.plusDrawer.hideModal(this.modalName); }, braceletData() { let _this = this; let ip; uni.request({ url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/bracelet?beginDate=2020-04-20 09:26:27&&endDate=2020-04-25 09:26:29', success: res => { ip = res.data; } }); // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】 this.socketTask_bracelet = uni.connectSocket({ /* 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】 */ url: 'ws://' + _this.backStageIp + ':' + _this.backStagePort + '/websocket/pageNumber_9/functionNumber_1', success(data) { console.log('websocket连接成功'); } }); // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】 this.socketTask_bracelet.onOpen(res => { console.log('WebSocket连接正常打开中...!'); _this.is_open_socket = true; // 注:只有连接正常打开中 ,才能正常收到消息 _this.socketTask_bracelet.onMessage(res => { //console.log("收到服务器内容:" + res.data); _this.bracelet = JSON.parse(res.data)[ip]; _this.braceletCurve = JSON.stringify(_this.bracelet[_this.deviceName]); /* 获取起始经纬度 */ _this.braceletCurve_LNG = _this.bracelet[_this.deviceName][_this.deviceNameLng]; _this.braceletCurve_LAT = _this.bracelet[_this.deviceName][_this.deviceNameLat]; _this.mapBegin_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][0].value); _this.mapBegin_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][0].value); _this.mapEnd_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][_this.braceletCurve_LNG.length-1].value); _this.mapEnd_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][_this.braceletCurve_LAT.length-1].value); _this.latitude = _this.mapBegin_2; _this.longitude = _this.mapBegin_1; _this.covers[0].latitude = _this.mapBegin_2; _this.covers[0].longitude = _this.mapBegin_1; _this.covers[1].latitude = _this.mapEnd_2; _this.covers[1].longitude = _this.mapEnd_1; _this.bs_computed = _this.bracelet[_this.deviceName][_this.targetName_bs][_this.targetName_bs_size].value; _this.xtpl_computed = _this.bracelet[_this.deviceName][_this.targetName_xtpl][_this.targetName_xtpl_size].value; _this.ssxy_computed = _this.bracelet[_this.deviceName][_this.targetName_ssxy][_this.targetName_ssxy_size].value; _this.szxy_computed = _this.bracelet[_this.deviceName][_this.targetName_szxy][_this.targetName_szxy_size].value; _this.pld_computed = _this.bracelet[_this.deviceName][_this.targetName_pld][_this.targetName_pld_size].value; _this.xynd_computed = _this.bracelet[_this.deviceName][_this.targetName_xynd][_this.targetName_xynd_size].value; /* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng]; this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat]; this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value; this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value; this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value; this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; */ /* _this.mapDate(); */ /* _this.polyline[0].points[0].latitude=_this.mapBegin_2; _this.polyline[0].points[0].longitude=_this.mapBegin_1; _this.polyline[0].points[1].latitude=_this.mapEnd_2; _this.polyline[0].points[1].longitude=_this.mapEnd_1; */ /* _this.braceletCurve_SSXY = _this.bracelet[_this.deviceName][_this.deviceNameSsxy]; _this.braceletCurve_SZXY = _this.bracelet[_this.deviceName][_this.deviceNameSzxy]; _this.braceletCurve_XYND = _this.bracelet[_this.deviceName][_this.deviceNameXynd]; _this.braceletCurve_XTPL = _this.bracelet[_this.deviceName][_this.deviceNameXtpl]; _this.braceletCurve_BS = _this.bracelet[_this.deviceName][_this.deviceNameBs]; console.log(_this.braceletCurve_BS[0].value); */ }); }); // 这里仅是事件监听【如果socket关闭了会执行】 this.socketTask_bracelet.onClose(() => { uni.request({ url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/close_bracelet?pointKey=' + _this.pointKey, success: res => {} }); }); } } }; </script> <style> body { font-family: '方正兰亭细黑_GBK'; font-size: 15px; color: silver; background: #000; } @font-face { font-family: '方正兰亭细黑_GBK'; src: url(../../static/fzltxh.TTF); } .content{ background-color: #000000; } page { background-color: #1f1f1f; font-family: '方正兰亭细黑_GBK'; overflow-x: hidden; } .top { width: 100%; height: 130upx; padding-top: 5upx; background-color: #1f1f1f; position: fixed; top: 0px; left: 0px; z-index: 100; } .threeLine { width: 50px; height: 45px; float: left; } .text { width: calc(100% - 100px); height: 45px; float: left; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; color: silver; line-height: 45px; margin-top: 11px; font-size: 18px; } .notice { width: 50px; height: 45px; float: left; } .plus { width: 30px; height: 45px; float: right; color: white; font-size: 35px; line-height: 45px; text-align: right; margin-right: 2.5%; } .textWindpowerstation { width: 180px; height: 45px; float: left; text-align: center; margin-left: 18px; } .InformationCard { position: absolute; top: 50px; left: 0px; margin-top: 0px; width: 50%; height: 8%; background: rgba(0, 0, 0, 0); float: left; } .informationCardAll { width: 95%; margin-left: 2.5%; margin-top: 10px; height: 60px; float: left; } .informationCardTextOne { width: 100%; height: 35px; float: left; margin-top: -10px; } .informationCardText { /* margin-left: 2%; */ width: 65px; height: 35px; line-height: 35px; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; color: silver; font-size: 10px; transform: scale(0.975); float: left; font-weight: 1000; } .textSilver { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; color: black; float: left; } .textWhite { color: black; float: right; width: 24px; font-size: 10px; margin-right: 13%; transform: scale(0.975); /* text-align: right; */ } .Personal_information_W { position: relative; margin-top: 3%; width: 90%; height: 80px;/* background-color: #242424; */ border-bottom: #BDBDBD solid 0.5px; transform: translateX(-50%); left: 50%; color: #B8B7B7; } .name{ position: absolute; height: 30px; width: 130px; left: 3%; /* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */ text-align: left; line-height: 30px; margin-top: 1%; font-weight: 1000; } .history { position: absolute; margin-top: 6%; right: 3%; height: 30px; height: 20px; text-align: center; line-height: 30px; } .skills { position: absolute; top: 56%; left: 3%; height: 25px; width: 180px;/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */ text-align: left; line-height: 30px; } .curve{ position: relative; width: 90%; transform: translateX(-50%); left: 50%; height: 30px; margin-top: 3%; color: #B8B7B7; font-weight: 1000; } .curve_l{ position: absolute; left: 3%; } .curve_r{ position: absolute; right: 3%; } .healthy { /* margin-top: 6%; */ margin-left: 3%; height: 180px; width: 95%; margin-bottom: 100px; text-align: center; color: #B8B7B7; font-size: 12px; line-height:65px ; font-weight: 1000; } .healthy_H, .healthy_N, .healthy_W { background-color:#242424; position: relative; width: 100%; height: 42%; text-align: center; /* padding-bottom: 1%; */ } .details_z { position: absolute; background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); width: 30%; left:3%; height: 60px; top: 3%; margin-top: 2%; } .details_m { position: absolute; background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); width: 30%; left: 35.5%; height: 60px; top: 3%; margin-top: 2%; } .details_y { position: absolute; background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); width: 30%; left: 68%; height: 60px; top: 3%; margin-top: 2%; /* margin-bottom: 0.6%; margin-top: 0.6%; float: right; margin-left: 0.2%; margin-right: 1.2%; width: 31%; height: 100%; background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); color: silver; text-align: center; padding-top: 10px; background-color: #ffffff; font-size: 12px; padding-bottom: 4px; line-height: 13px; border-radius: 5px; padding-top: 8px; */ } .navigation::after { content: url(../../static/picture/forcast/position.png); } /* .greater { position: relative; width: 249px; height: 35px; border: 1px solid #000; } */ .greater{ float: right; content: ""; margin-top: 0.8%; margin-right: 0.8%; /* position: absolute; */ /* top: 8px; right: 15px; */ width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } </style>