|
|
@@ -0,0 +1,983 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+ <!-- 抽屉组件 -->
|
|
|
+
|
|
|
+ <!-- 地图组件 -->
|
|
|
+
|
|
|
+
|
|
|
+ <view>
|
|
|
+ <web-view :webview-styles="webviewStyles" src="https://192.168.1.105:4397/websocket/usercontroller/view?userid=admin"></web-view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import res from '../../../common/data.json';
|
|
|
+
|
|
|
+var _self;
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ conflict:false,
|
|
|
+ kg:true,
|
|
|
+ leftNavigationtitle:'预测功能分组',
|
|
|
+ leftbarkg:false,
|
|
|
+ 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: [],
|
|
|
+ plusDrawerList: [],
|
|
|
+ permissionsInformation:[]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //document.querySelector('body').setAttribute('style', 'background-color:#000000');
|
|
|
+ },created: function() {
|
|
|
+ // this.pushWindPowerStationNameToSessionStorage("麻黄山");
|
|
|
+ this.viewUserid();
|
|
|
+ this.monitoringAuthority();
|
|
|
+
|
|
|
+ this.address = this.dataprocessing.getWindPowerStationName();
|
|
|
+ this.FDC=this.dataprocessing.getWindPowerStationId();
|
|
|
+ this.windPowerStationId =this.dataprocessing.getWindPowerStationId();
|
|
|
+
|
|
|
+
|
|
|
+ this.$nextTick(function() {
|
|
|
+ //this.getWeatherDataToday();
|
|
|
+ //this.getWeatherData7();
|
|
|
+ });
|
|
|
+ this.cWidth = uni.upx2px(2000);
|
|
|
+ this.cHeight = uni.upx2px(350);
|
|
|
+ this.cWidth40 = uni.upx2px(5000);
|
|
|
+ this.cHeight40 = uni.upx2px(350);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.windStation =this.dataprocessing.getWindPowerStationNameByNames(this.address);
|
|
|
+ this.windStationName = this.windStation[0].replace('风电场', '');
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ 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: {
|
|
|
+ viewUserid: function() {
|
|
|
+ this.plusDrawerList=uni.getStorageSync('plusList');
|
|
|
+ },
|
|
|
+ monitoringAuthority: function() {
|
|
|
+ this.drawerList=uni.getStorageSync('leftlist3');
|
|
|
+ },
|
|
|
+ mapdelete(){
|
|
|
+ //#ifdef H5
|
|
|
+
|
|
|
+ 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.$replace(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();
|
|
|
+
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ //#ifdef APP-PLUS
|
|
|
+ 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();
|
|
|
+ //#endif
|
|
|
+ },
|
|
|
+ mapDate(){
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ openDrawer: function() {
|
|
|
+ this.monitoringAuthority();
|
|
|
+ this.kg=false;
|
|
|
+ if(this.$refs.drawer != undefined){
|
|
|
+ this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
|
|
|
+ }else{
|
|
|
+ console.log('雷霆嘎巴');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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');
|
|
|
+ },
|
|
|
+ leftbar(){
|
|
|
+
|
|
|
+ this.kg=true;
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+
|
|
|
+ this.$refs.drawer.closeDrawer();
|
|
|
+ this.hideModal();
|
|
|
+ },
|
|
|
+ onShow: function() {
|
|
|
+ this.leftbar();
|
|
|
+ this.windPowerStationId = uni.getStorageSync('windPowerStationId');
|
|
|
+ this.address = this.getWindPowerStationNameToSessionStorage();
|
|
|
+
|
|
|
+ this.viewUserid();
|
|
|
+ this.monitoringAuthority();
|
|
|
+ },
|
|
|
+ showModal(e) {
|
|
|
+ this.conflict = true;
|
|
|
+ this.viewUserid();
|
|
|
+ this.kg=false;
|
|
|
+ this.modalName = e.currentTarget.dataset.target;
|
|
|
+ this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
|
|
|
+ },
|
|
|
+ hideModal() {
|
|
|
+ this.conflict = false;
|
|
|
+ this.leftbar();
|
|
|
+ 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%2009:26:27&&endDate=2020-04-25%2009: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/all',
|
|
|
+ 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-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);
|
|
|
+
|
|
|
+ }
|
|
|
+ .windStationNameAndChoice {
|
|
|
+ clear: both;
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ margin-top: 1%;
|
|
|
+ color: silver;
|
|
|
+ /* border: 1px solid red; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .windStationName {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 9.5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .windStationChoice {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-right: 5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-popup-wrapper {
|
|
|
+ width: 500rpx;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-popup-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #211E21;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-popup-word {
|
|
|
+ width: calc(100% - 65px);
|
|
|
+ height: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: white;
|
|
|
+ line-height: 50px;
|
|
|
+ float: left;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-popup-cha {
|
|
|
+ width: 40px;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ float: right;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .windStationItemContainer {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .windStationItemContainerBlack {
|
|
|
+ width: 100%;
|
|
|
+ background-color: grey;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .windStationItem {
|
|
|
+ width: 80%;
|
|
|
+ height: 50px;
|
|
|
+ border-bottom: 1px solid #c8c8c8;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 50px;
|
|
|
+ margin-left: 10%;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .DrawerPage {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ left: 0vw;
|
|
|
+ background-color: #1f1f1f;
|
|
|
+ transition: all 0.4s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage.show {
|
|
|
+ transform: scale(0.9, 0.9);
|
|
|
+ left: 85vw;
|
|
|
+ box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
|
|
+ transform-origin: 0;
|
|
|
+ }
|
|
|
+ .DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
|
|
+ width: 64upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ margin: 0;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .nav {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .nav .cu-item.cur {
|
|
|
+ border-bottom: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .nav .cu-item.cur::after {
|
|
|
+ content: '';
|
|
|
+ width: 10upx;
|
|
|
+ height: 10upx;
|
|
|
+ background-color: currentColor;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .DrawerPage .cu-bar.tabbar .action {
|
|
|
+ flex: initial;
|
|
|
+ }
|
|
|
+</style>
|
wangjiawen