Forecast.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059
  1. <template>
  2. <view class="content">
  3. <!-- <third-comp :key="menuKey"></third-comp> -->
  4. <view v-if="toggleSwitch==false">
  5. <view>
  6. <cu-custom bgColor="bg-blacks" :isBack="false">
  7. <block slot="right"><image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-left: 2%;" @tap="openDrawer"></image></block>
  8. <block slot="right">
  9. <view class="icon cuIcon-notice text-white" v-if="badge != 0" style="margin-left: -70%;">
  10. <view class="cu-tag looknumber" style="margin-top: -2%;">
  11. <block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block>
  12. </view>
  13. </view>
  14. </block>
  15. <block slot="right"></block>
  16. <block slot="content">{{ address }}</block>
  17. <block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block>
  18. <!-- <block slot="right"><view class="plus" @tap="showModal" data-target="viewModal">+</view></block> -->
  19. </cu-custom>
  20. </view>
  21. <!-- 抽屉组件 -->
  22. <!-- 地图组件 -->
  23. <div>
  24. <drawer ref="drawer" @tap="closeDrawer"></drawer>
  25. </div>
  26. <div class="plusDrawer" @tap="hideModal">
  27. <plusDrawer ref="plusDrawer"></plusDrawer>
  28. </div>
  29. <view v-if="kg==true">
  30. <!-- <div class="plusDrawer" @tap="hideModal"><plusDrawer ref="plusDrawer"></plusDrawer></div> -->
  31. <view class="page-body">
  32. <view class="page-section page-section-gap">
  33. <map style="width: 100%; height: 300px;"
  34. :controls="controls"
  35. :circles="circles"
  36. :polyline="polyline"
  37. :scale="scale"
  38. :latitude="latitude"
  39. :longitude="longitude"
  40. :markers="covers"
  41. >
  42. <cover-view style="color: #000000;" > 经度:{{ mapEnd_1 }}</cover-view>
  43. <cover-view style="color: #000000;"> 纬度:{{ mapEnd_2 }}</cover-view>
  44. </map>
  45. </view>
  46. </view>
  47. </view>
  48. <!--经纬度组件-->
  49. <!-- <view class="InformationCard">
  50. <view class="informationCardAll">
  51. <view class="informationCardTextOne">
  52. <view class="informationCardText">
  53. <view class="textSilver">经度:</view>
  54. <view class="textWhite">{{ mapEnd_1 }}</view>
  55. </view>
  56. </view>
  57. <view class="informationCardTextOne">
  58. <view class="informationCardText">
  59. <view class="textSilver">纬度:</view>
  60. <view class="textWhite">{{ mapEnd_2 }}</view>
  61. </view>
  62. </view>
  63. </view>
  64. </view> -->
  65. <scroll-view @tap="hideModal" scroll-y class="DrawerPage" :class="modalName == 'viewModal' ? 'show' : ''">
  66. <!-- 个人信息组件 -->
  67. <view class="Personal_information_W">
  68. <view class="name">姓名:李占国</view>
  69. <view class="history" @click="mapDate"> <span class="navigation"></span> </view>
  70. <view class="skills">技能:电力类,机械类</view>
  71. </view>
  72. <!-- 历史曲线组件 -->
  73. <view class="curve" >
  74. <view class="curve_l">健康情况</view>
  75. <view class="curve_r" @tap="common.navTo('/components/bracelet/braceletHistoryCurve?braceletCurve=' + braceletCurve)">历史曲线</view>
  76. <div class="greater"></div>
  77. </view>
  78. <!-- 健康详情组件 -->
  79. <view class="healthy" >
  80. <view class="healthy_H">
  81. <view class="details_z">心跳频率:{{xtpl_computed}}<!-- ({{ bracelet[deviceName][targetName_xtpl][targetName_xtpl_size].value }}) --></view>
  82. <view class="details_m">步数:{{bs_computed}}</view>
  83. <view class="details_y">收缩血压:{{ssxy_computed}}</view>
  84. </view>
  85. <view class="healthy_N">
  86. <view class="details_z">舒张血压:{{szxy_computed}}<!-- ({{ bracelet[deviceName][targetName_szxy][targetName_szxy_size].value }}) --></view>
  87. <view class="details_m">疲劳度:{{pld_computed}}<!-- ({{ bracelet[deviceName][targetName_pld][targetName_pld_size].value }}) --></view>
  88. <view class="details_y">血氧浓度:{{xynd_computed}}<!-- ({{ bracelet[deviceName][targetName_xynd][targetName_xynd_size].value }}) --></view>
  89. </view>
  90. </view>
  91. </scroll-view>
  92. </view>
  93. <view v-if="toggleSwitch==true">
  94. <WeatherProphethomepage ref="r1"></WeatherProphethomepage>
  95. </view>
  96. <!-- <view class="DrawerClose" :class="modalName == 'viewModal' ? 'show' : ''" @tap="hideModal"><text class="cuIcon-pullright"></text></view> -->
  97. </view>
  98. </template>
  99. <script>
  100. import res from '../../common/data.json';
  101. import drawer from '../../components/drawer/threeLineDrawer.vue';
  102. import plusDrawer from '../../components/drawer/plusDrawer.vue';
  103. import WeatherProphethomepage from '../../components/weatherProphethomepage/WeatherProphethomepage.vue';
  104. var _self;
  105. export default {
  106. components: {
  107. drawer: drawer,
  108. plusDrawer: plusDrawer,
  109. WeatherProphethomepage:WeatherProphethomepage
  110. },
  111. data: function() {
  112. return {
  113. kg:true,
  114. leftNavigationtitle:'预测功能分组',
  115. leftbarkg:false,
  116. bs_computed:'',
  117. xtpl_computed:'',
  118. ssxy_computed:'',
  119. szxy_computed:'',
  120. pld_computed:'',
  121. xynd_computed:'',
  122. WeatherProphethomepagebool:true,
  123. toggleSwitch:false,
  124. menuKey:1,
  125. pointKey: 'MHSFCJSFW.NX_GD_MHSF_XX_XX_XXX_XXX_CI0087',
  126. socketTask_bracelet: '',
  127. socketTask_close_bracelet: '',
  128. deviceName: 'Y1-A0BC',
  129. deviceNamePld: 'Y1-A0BC_PLD',
  130. deviceNameBs: 'Y1-A0BC_BS',
  131. deviceNameSsxy: 'Y1-A0BC_SSXY',
  132. deviceNameXtpl: 'Y1-A0BC_XTPL',
  133. deviceNameXynd: 'Y1-A0BC_XYND',
  134. deviceNameSzxy: 'Y1-A0BC_SZXY',
  135. deviceNameLng: 'Y1-A0BC_LNG',
  136. deviceNameLat: 'Y1-A0BC_LAT',
  137. bracelet: {
  138. deviceName: '',
  139. deviceNamePld: '',
  140. deviceNameBs: '',
  141. deviceNameSsxy: '',
  142. deviceNameXtpl: '',
  143. deviceNameXynd: '',
  144. deviceNameSzxy: '',
  145. },
  146. braceletCurve: {},
  147. mapBegin_1:'',
  148. mapEnd_1:'',
  149. mapBegin_2:'',
  150. mapEnd_2:'',
  151. points:[
  152. {
  153. latitude:'',
  154. longitude:''
  155. },
  156. {
  157. latitude:'',
  158. longitude:''
  159. }
  160. ],
  161. list:{},
  162. braceletCurve_SSXY: [],
  163. braceletCurve_PLD: [],
  164. braceletCurve_SZXY: [],
  165. braceletCurve_XTPL: [],
  166. braceletCurve_BS: [],
  167. braceletCurve_XYND: [],
  168. braceletCurve_LNG: [],
  169. braceletCurve_LAT: [],
  170. /* targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true},
  171. targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''}, */
  172. targetName: '日发电量',
  173. targetUnit: '万kwh',
  174. bool:true,
  175. pld: '',
  176. ssxy: '',
  177. lng: '',
  178. szxy: '',
  179. lat: '',
  180. xtpl: '',
  181. bs: '',
  182. xynd: '',
  183. device_nam: '',
  184. title: 'map',
  185. latitude: 39.907,//定位中心
  186. longitude: 116.39742,//
  187. covers: [
  188. {
  189. latitude:39.909 , //纬度坐标点
  190. longitude:116.39742 , //经度
  191. iconPath: '../../static/picture/forcast/DingWei.png', //显示的图标
  192. title: '阿打算', //标注点名
  193. label: {
  194. //为标记点旁边增加标签
  195. content: '', //文本1
  196. color: '#F76350', //文本颜色
  197. anchorX: 0, //label的坐标,原点是 marker 对应的经纬度
  198. anchorY: -80, //label的坐标,原点是 marker 对应的经纬度
  199. // x:39.909,//这个组件微信在1.2.0以后就废弃了
  200. // y:116.39742,
  201. bgColor: '#fff', //背景色
  202. padding: 5, //文本边缘留白
  203. borderWidth: 1, //边框宽度
  204. borderColor: '#D84C29', //边框颜色
  205. textAlign: 'right' //文本对齐方式。
  206. },
  207. callout: {
  208. //自定义标记点上方的气泡窗口 点击有效
  209. content: '地点1',
  210. color: '#F76350',
  211. fontSize: 12,
  212. borderRadius: 5
  213. }
  214. // anchor:{//经纬度在标注图标的锚点,默认底边中点
  215. // x:5,
  216. // y:1,
  217. // }
  218. } , {
  219. latitude:39.90 ,//最后点
  220. longitude: 116.399,//
  221. iconPath: '../../static/picture/forcast/DingWei.png',
  222. title:'阿迪达斯',
  223. x:'',//
  224. y: '',//116.399
  225. label:{
  226. content:'',
  227. color:'#F76350',
  228. bgColor:'#fff',
  229. padding:5,
  230. borderRadius:4,
  231. },
  232. callout:{
  233. content:'地点2',
  234. color:'#F76350',
  235. fontSize:12
  236. }
  237. }
  238. ],
  239. scale: 15, //地图层级
  240. controls: [
  241. {
  242. //在地图上显示控件,控件不随着地图移动
  243. id: 1, //控件id
  244. /* iconPath: '../../static/picture/forcast/DingWei.png', *///显示的图标
  245. position: {
  246. //控件在地图的位置
  247. left: 15,
  248. top: 15,
  249. width: 40,
  250. height: 40
  251. }
  252. }
  253. ],
  254. circles: [
  255. {
  256. //在地图上显示圆
  257. latitude: 39.9,
  258. longitude: 116.39,
  259. fillColor: '#FFC41F', //填充颜色
  260. color: '#12A1DD', //描边的颜色
  261. radius: 0, //半径
  262. strokeWidth: 2 //描边的宽度
  263. }
  264. ],
  265. polyline: [
  266. { /* .polyline[0].points */
  267. points:[{}],
  268. //指定一系列坐标点,从数组第一项连线至最后一项
  269. /* points: [{ latitude:this.mapBegin_1, longitude:this.mapBegin_2 }, { latitude: this.mapEnd_1, longitude:this.mapEnd_2 }], */
  270. /* points: [{ latitude: 0, longitude: 0 }, { latitude: 0, longitude: 0 }], */
  271. color: '#0000AA', //线的颜色
  272. width: 2, //线的宽度
  273. dottedLine: true, //是否虚线
  274. arrowLine: true //带箭头的线 开发者工具暂不支持该属性
  275. }
  276. ],
  277. badge: 22,
  278. inconList: ['form', 'favor', 'question', 'edit'],
  279. modalName: null,
  280. address: '',
  281. drawerList: [],
  282. plusDrawerList: [],
  283. permissionsInformation:[]
  284. };
  285. },
  286. mounted() {
  287. //document.querySelector('body').setAttribute('style', 'background-color:#000000');
  288. },onShow(){
  289. this.leftbar();
  290. },created: function() {
  291. // this.pushWindPowerStationNameToSessionStorage("麻黄山");
  292. this.viewUserid();
  293. this.monitoringAuthority();
  294. this.address = this.dataprocessing.getWindPowerStationName();
  295. this.FDC=this.dataprocessing.getWindPowerStationId();
  296. this.windPowerStationId =this.dataprocessing.getWindPowerStationId();
  297. this.$nextTick(function() {
  298. //this.getWeatherDataToday();
  299. //this.getWeatherData7();
  300. });
  301. this.cWidth = uni.upx2px(2000);
  302. this.cHeight = uni.upx2px(350);
  303. this.cWidth40 = uni.upx2px(5000);
  304. this.cHeight40 = uni.upx2px(350);
  305. this.windStation =this.dataprocessing.getWindPowerStationNameByNames(this.address);
  306. this.windStationName = this.windStation[0].replace('风电场', '');
  307. },
  308. onLoad(pointKey) {
  309. let _this = this;
  310. this.pointKey = pointKey.pointKey;
  311. this.targetName = pointKey.callTargetName;
  312. this.targetUnit = pointKey.callTargetUnit;
  313. this.braceletData();
  314. /* console.log(_this.bracelet[_this.deviceName]);
  315. console.log(_this.bracelet[_this.deviceName][_this.targetName_pld][0]); */
  316. /* uni.getLocation({//获取当前的位置坐标
  317. type: 'wgs84',
  318. success: function (res) {
  319. console.log('当前位置的经度:' + res.longitude);
  320. console.log('当前位置的纬度:' + res.latitude);
  321. }
  322. }); */
  323. },
  324. onReady() {},
  325. computed: {
  326. targetName_xtpl: function() {
  327. return this.deviceName + '_XTPL';
  328. },
  329. targetName_xtpl_size: function() {
  330. return this.bracelet[this.deviceName][this.targetName_xtpl].length - 1;
  331. },
  332. targetName_pld: function() {
  333. return this.deviceName + '_PLD';
  334. },
  335. targetName_pld_size: function() {
  336. return this.bracelet[this.deviceName][this.targetName_pld].length - 1;
  337. },
  338. targetName_bs: function() {
  339. return this.deviceName + '_BS';
  340. },
  341. targetName_bs_size: function() {
  342. return this.bracelet[this.deviceName][this.targetName_bs].length - 1;
  343. },
  344. targetName_ssxy: function() {
  345. return this.deviceName + '_SSXY';
  346. },
  347. targetName_ssxy_size: function() {
  348. return this.bracelet[this.deviceName][this.targetName_ssxy].length - 1;
  349. },
  350. targetName_szxy: function() {
  351. return this.deviceName + '_SZXY';
  352. },
  353. targetName_szxy_size: function() {
  354. return this.bracelet[this.deviceName][this.targetName_szxy].length - 1;
  355. },
  356. targetName_xynd: function() {
  357. return this.deviceName + '_XYND';
  358. },
  359. targetName_xynd_size: function() {
  360. return this.bracelet[this.deviceName][this.targetName_xynd].length - 1;
  361. },
  362. backStageIp: function() {
  363. return this.$store.state.wholeSituationBackStageIp;
  364. },
  365. backStagePort: function() {
  366. return this.$store.state.wholeSituationBackStagePort;
  367. },
  368. windpowerstationNameToId: function() {
  369. return this.$store.state.windpowerstationNameToId;
  370. }
  371. },
  372. methods: {
  373. viewUserid:function(){
  374. let _this = this;
  375. _this.userid =uni.getStorageSync('userid')
  376. //_this.userid = sessionStorage.getItem('userid');
  377. uni.request({
  378. url: 'http://' + this.backStageIp + ':' + this.backStagePort + '/GyeeorganController/GyeeOrganList?userid=' + _this.userid,
  379. data: {},
  380. method: 'GET',
  381. success: function(res) {
  382. for(let i=0;i<res.data.data.length;i++){
  383. // _this.name.push(res.data.data[i].describes);
  384. // _this.windId.push(res.data.data[i].name);
  385. }
  386. for(let j=0;j<res.data.data.length;j++){
  387. var a = {};
  388. _this.$set(a,"name",res.data.data[j].describes);
  389. _this.$set(a,"windId",res.data.data[j].name);
  390. _this.plusDrawerList.push(a);
  391. }
  392. },
  393. })
  394. },
  395. monitoringAuthority:function(){
  396. let _this = this;
  397. uni.request({
  398. url: 'http://' + this.backStageIp + ':' + this.backStagePort +
  399. '/GyeepermissionController/GyeePermissionList?userid=' + _this.userid,
  400. data: {},
  401. method: 'GET',
  402. success: function(res) {
  403. console.log(res);
  404. for (let i = 0; i < res.data.data.length; i++) {
  405. if (res.data.data[i].describes == "预测") {
  406. var b = {};
  407. _this.$set(b, "gyeePermissionList", res.data.data[i].gyeePermissionList);
  408. _this.permissionsInformation.push(b);
  409. console.log(_this.permissionsInformation);
  410. for (let k = 0; k < _this.permissionsInformation[0].gyeePermissionList.length; k++) {
  411. if (_this.permissionsInformation[0].gyeePermissionList[k].parent == 3) {
  412. var c = {};
  413. var d = {};
  414. _this.$set(c, "name", _this.permissionsInformation[0].gyeePermissionList[k].permisssionname);
  415. _this.$set(c, "remark1",_this.permissionsInformation[0].gyeePermissionList[k].remark1);
  416. _this.drawerList.push(c);
  417. }
  418. }
  419. console.log(_this.drawerList)
  420. }
  421. }
  422. }
  423. })
  424. },
  425. mapDate(){
  426. if(this.bool){
  427. this.$delete(this.polyline[0],'points');
  428. this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
  429. this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
  430. this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
  431. this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
  432. this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
  433. this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
  434. for(let val of this.polyline){
  435. this.$set(val,'points',this.points);
  436. this.bool = false;
  437. console.log("true");
  438. }
  439. /* 定义地图经纬度中心 */
  440. var lat= parseFloat(this.mapBegin_2)+parseFloat(this.mapEnd_2);
  441. var lng= parseFloat(this.mapBegin_1)+parseFloat(this.mapEnd_1);
  442. this.latitude = lat/2;
  443. this.longitude = lng/2;
  444. }else{
  445. /* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
  446. this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
  447. this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
  448. this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
  449. this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
  450. this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value;
  451. */
  452. this.$delete(this.polyline[0],'points');
  453. /* this.latitude = this.mapBegin_2+this.mapEnd_2/2;
  454. this.longitude = this.mapBegin_1+this.mapEnd_1/2; */
  455. console.log("false");
  456. /* 还原定位中心位置 */
  457. this.latitude = this.mapBegin_2;
  458. this.longitude = this.mapBegin_1;
  459. this.bool = true;
  460. }
  461. this.$forceUpdate();
  462. },
  463. openDrawer: function() {
  464. this.kg=false;
  465. this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList,this.leftNavigationtitle);
  466. },
  467. closeDrawer: function() {
  468. this.drawerIsShow = false;
  469. },
  470. pushWindPowerStationNameToSessionStorage(windpowerstationName) {
  471. uni.setStorageSync('windpowerstationName', windpowerstationName);
  472. //sessionStorage.setItem('windpowerstationName', windpowerstationName);
  473. //alert("v"+ sessionStorage.getItem("windpowerstationName"));
  474. //this.common.goback('/pages/index/Index');
  475. },
  476. getWindPowerStationNameToSessionStorage() {
  477. uni.getStorageSync('windpowerstationName');
  478. return uni.getStorageSync('windpowerstationName');
  479. },
  480. leftbar(){
  481. this.kg=true;
  482. },
  483. onHide() {
  484. this.$refs.drawer.closeDrawer();
  485. this.hideModal();
  486. },
  487. onShow() {
  488. this.windPowerStationId = uni.getStorageSync('windPowerStationId');
  489. this.address = this.getWindPowerStationNameToSessionStorage();
  490. },
  491. showModal(e) {
  492. this.kg=false;
  493. this.modalName = e.currentTarget.dataset.target;
  494. this.$refs.plusDrawer.showModal(this.plusDrawerList, this.modalName);
  495. },
  496. hideModal() {
  497. this.leftbar();
  498. this.modalName = null;
  499. //this.$refs.plusDrawer.hideModal(this.modalName);
  500. },
  501. braceletData() {
  502. let _this = this;
  503. let ip;
  504. uni.request({
  505. url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/bracelet?beginDate=2020-04-20 09:26:27&&endDate=2020-04-25 09:26:29',
  506. success: res => {
  507. ip = res.data;
  508. }
  509. });
  510. // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
  511. this.socketTask_bracelet = uni.connectSocket({
  512. /* 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】 */
  513. url: 'ws://' + _this.backStageIp + ':' + _this.backStagePort + '/websocket/pageNumber_9/functionNumber_1',
  514. success(data) {
  515. console.log('websocket连接成功');
  516. }
  517. });
  518. // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
  519. this.socketTask_bracelet.onOpen(res => {
  520. console.log('WebSocket连接正常打开中...!');
  521. _this.is_open_socket = true;
  522. // 注:只有连接正常打开中 ,才能正常收到消息
  523. _this.socketTask_bracelet.onMessage(res => {
  524. //console.log("收到服务器内容:" + res.data);
  525. _this.bracelet = JSON.parse(res.data)[ip];
  526. _this.braceletCurve = JSON.stringify(_this.bracelet[_this.deviceName]);
  527. /* 获取起始经纬度 */
  528. _this.braceletCurve_LNG = _this.bracelet[_this.deviceName][_this.deviceNameLng];
  529. _this.braceletCurve_LAT = _this.bracelet[_this.deviceName][_this.deviceNameLat];
  530. _this.mapBegin_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][0].value);
  531. _this.mapBegin_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][0].value);
  532. _this.mapEnd_1 = (_this.bracelet[_this.deviceName][_this.deviceNameLng][_this.braceletCurve_LNG.length-1].value);
  533. _this.mapEnd_2 = (_this.bracelet[_this.deviceName][_this.deviceNameLat][_this.braceletCurve_LAT.length-1].value);
  534. _this.latitude = _this.mapBegin_2;
  535. _this.longitude = _this.mapBegin_1;
  536. _this.covers[0].latitude = _this.mapBegin_2;
  537. _this.covers[0].longitude = _this.mapBegin_1;
  538. _this.covers[1].latitude = _this.mapEnd_2;
  539. _this.covers[1].longitude = _this.mapEnd_1;
  540. _this.bs_computed = _this.bracelet[_this.deviceName][_this.targetName_bs][_this.targetName_bs_size].value;
  541. _this.xtpl_computed = _this.bracelet[_this.deviceName][_this.targetName_xtpl][_this.targetName_xtpl_size].value;
  542. _this.ssxy_computed = _this.bracelet[_this.deviceName][_this.targetName_ssxy][_this.targetName_ssxy_size].value;
  543. _this.szxy_computed = _this.bracelet[_this.deviceName][_this.targetName_szxy][_this.targetName_szxy_size].value;
  544. _this.pld_computed = _this.bracelet[_this.deviceName][_this.targetName_pld][_this.targetName_pld_size].value;
  545. _this.xynd_computed = _this.bracelet[_this.deviceName][_this.targetName_xynd][_this.targetName_xynd_size].value;
  546. /* this.braceletCurve_LNG = this.bracelet[this.deviceName][this.deviceNameLng];
  547. this.braceletCurve_LAT = this.bracelet[this.deviceName][this.deviceNameLat];
  548. this.points[0].longitude=this.bracelet[this.deviceName][this.deviceNameLng][0].value;
  549. this.points[0].latitude=this.bracelet[this.deviceName][this.deviceNameLat][0].value;
  550. this.points[1].longitude=this.bracelet[this.deviceName][this.deviceNameLng][this.braceletCurve_LNG.length-1].value;
  551. this.points[1].latitude=this.bracelet[this.deviceName][this.deviceNameLat][this.braceletCurve_LAT.length-1].value; */
  552. /* _this.mapDate(); */
  553. /* _this.polyline[0].points[0].latitude=_this.mapBegin_2;
  554. _this.polyline[0].points[0].longitude=_this.mapBegin_1;
  555. _this.polyline[0].points[1].latitude=_this.mapEnd_2;
  556. _this.polyline[0].points[1].longitude=_this.mapEnd_1; */
  557. /* _this.braceletCurve_SSXY = _this.bracelet[_this.deviceName][_this.deviceNameSsxy];
  558. _this.braceletCurve_SZXY = _this.bracelet[_this.deviceName][_this.deviceNameSzxy];
  559. _this.braceletCurve_XYND = _this.bracelet[_this.deviceName][_this.deviceNameXynd];
  560. _this.braceletCurve_XTPL = _this.bracelet[_this.deviceName][_this.deviceNameXtpl];
  561. _this.braceletCurve_BS = _this.bracelet[_this.deviceName][_this.deviceNameBs];
  562. console.log(_this.braceletCurve_BS[0].value); */
  563. });
  564. });
  565. // 这里仅是事件监听【如果socket关闭了会执行】
  566. this.socketTask_bracelet.onClose(() => {
  567. uni.request({
  568. url: 'http://' + _this.backStageIp + ':' + _this.backStagePort + '/bracelet/close_bracelet?pointKey=' + _this.pointKey,
  569. success: res => {}
  570. });
  571. });
  572. }
  573. }
  574. };
  575. </script>
  576. <style>
  577. body {
  578. font-family: '方正兰亭细黑_GBK';
  579. font-size: 15px;
  580. color: silver;
  581. background: #000;
  582. }
  583. @font-face {
  584. font-family: '方正兰亭细黑_GBK';
  585. src: url(../../static/fzltxh.TTF);
  586. }
  587. .content{
  588. //background-color: #000000;
  589. }
  590. page {
  591. background-color: #1f1f1f;
  592. font-family: '方正兰亭细黑_GBK';
  593. overflow-x: hidden;
  594. }
  595. .top {
  596. width: 100%;
  597. height: 130upx;
  598. padding-top: 5upx;
  599. background-color: #1f1f1f;
  600. position: fixed;
  601. top: 0px;
  602. left: 0px;
  603. z-index: 100;
  604. }
  605. .threeLine {
  606. width: 50px;
  607. height: 45px;
  608. float: left;
  609. }
  610. .text {
  611. width: calc(100% - 100px);
  612. height: 45px;
  613. float: left;
  614. user-select: text;
  615. -webkit-user-select: text;
  616. -moz-user-select: text;
  617. -ms-user-select: text;
  618. color: silver;
  619. line-height: 45px;
  620. margin-top: 11px;
  621. font-size: 18px;
  622. }
  623. .notice {
  624. width: 50px;
  625. height: 45px;
  626. float: left;
  627. }
  628. .plus {
  629. width: 30px;
  630. height: 45px;
  631. float: right;
  632. color: white;
  633. font-size: 35px;
  634. line-height: 45px;
  635. text-align: right;
  636. margin-right: 2.5%;
  637. }
  638. .textWindpowerstation {
  639. width: 180px;
  640. height: 45px;
  641. float: left;
  642. text-align: center;
  643. margin-left: 18px;
  644. }
  645. .InformationCard {
  646. position: absolute;
  647. top: 50px;
  648. left: 0px;
  649. margin-top: 0px;
  650. width: 50%;
  651. height: 8%;
  652. background: rgba(0, 0, 0, 0);
  653. float: left;
  654. }
  655. .informationCardAll {
  656. width: 95%;
  657. margin-left: 2.5%;
  658. margin-top: 10px;
  659. height: 60px;
  660. float: left;
  661. }
  662. .informationCardTextOne {
  663. width: 100%;
  664. height: 35px;
  665. float: left;
  666. margin-top: -10px;
  667. }
  668. .informationCardText {
  669. /* margin-left: 2%; */
  670. width: 65px;
  671. height: 35px;
  672. line-height: 35px;
  673. user-select: text;
  674. -webkit-user-select: text;
  675. -moz-user-select: text;
  676. -ms-user-select: text;
  677. color: silver;
  678. font-size: 10px;
  679. transform: scale(0.975);
  680. float: left;
  681. font-weight: 1000;
  682. }
  683. .textSilver {
  684. user-select: text;
  685. -webkit-user-select: text;
  686. -moz-user-select: text;
  687. -ms-user-select: text;
  688. color: black;
  689. float: left;
  690. }
  691. .textWhite {
  692. color: black;
  693. float: right;
  694. width: 24px;
  695. font-size: 10px;
  696. margin-right: 13%;
  697. transform: scale(0.975);
  698. /* text-align: right; */
  699. }
  700. .Personal_information_W {
  701. position: relative;
  702. margin-top: 3%;
  703. width: 90%;
  704. height: 80px;/*
  705. background-color: #242424; */
  706. border-bottom: #BDBDBD solid 0.5px;
  707. transform: translateX(-50%);
  708. left: 50%;
  709. color: #B8B7B7;
  710. }
  711. .name{
  712. position: absolute;
  713. height: 30px;
  714. width: 130px;
  715. left: 3%;
  716. /* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
  717. text-align: left;
  718. line-height: 30px;
  719. margin-top: 1%;
  720. font-weight: 1000;
  721. }
  722. .history {
  723. position: absolute;
  724. margin-top: 6%;
  725. right: 3%;
  726. height: 30px;
  727. height: 20px;
  728. text-align: center;
  729. line-height: 30px;
  730. }
  731. .skills {
  732. position: absolute;
  733. top: 56%;
  734. left: 3%;
  735. height: 25px;
  736. width: 180px;/*
  737. background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
  738. text-align: left;
  739. line-height: 30px;
  740. }
  741. .curve{
  742. position: relative;
  743. width: 90%;
  744. transform: translateX(-50%);
  745. left: 50%;
  746. height: 30px;
  747. margin-top: 3%;
  748. color: #B8B7B7;
  749. font-weight: 1000;
  750. }
  751. .curve_l{
  752. position: absolute;
  753. left: 3%;
  754. }
  755. .curve_r{
  756. position: absolute;
  757. right: 3%;
  758. }
  759. .healthy {
  760. /* margin-top: 6%; */
  761. margin-left: 3%;
  762. height: 180px;
  763. width: 95%;
  764. margin-bottom: 100px;
  765. text-align: center;
  766. color: #B8B7B7;
  767. font-size: 12px;
  768. line-height:65px ;
  769. font-weight: 1000;
  770. }
  771. .healthy_H,
  772. .healthy_N,
  773. .healthy_W {
  774. background-color:#242424;
  775. position: relative;
  776. width: 100%;
  777. height: 42%;
  778. text-align: center;
  779. /* padding-bottom: 1%; */
  780. }
  781. .details_z {
  782. position: absolute;
  783. background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
  784. width: 30%;
  785. left:3%;
  786. height: 60px;
  787. top: 3%;
  788. margin-top: 2%;
  789. }
  790. .details_m {
  791. position: absolute;
  792. background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
  793. width: 30%;
  794. left: 35.5%;
  795. height: 60px;
  796. top: 3%;
  797. margin-top: 2%;
  798. }
  799. .details_y {
  800. position: absolute;
  801. background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
  802. width: 30%;
  803. left: 68%;
  804. height: 60px;
  805. top: 3%;
  806. margin-top: 2%;
  807. /* margin-bottom: 0.6%;
  808. margin-top: 0.6%;
  809. float: right;
  810. margin-left: 0.2%;
  811. margin-right: 1.2%;
  812. width: 31%;
  813. height: 100%;
  814. background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
  815. color: silver;
  816. text-align: center;
  817. padding-top: 10px;
  818. background-color: #ffffff;
  819. font-size: 12px;
  820. padding-bottom: 4px;
  821. line-height: 13px;
  822. border-radius: 5px;
  823. padding-top: 8px; */
  824. }
  825. .navigation::after {
  826. content: url(../../static/picture/forcast/position.png);
  827. }
  828. /* .greater {
  829. position: relative;
  830. width: 249px;
  831. height: 35px;
  832. border: 1px solid #000;
  833. } */
  834. .greater{
  835. float: right;
  836. content: "";
  837. margin-top: 0.8%;
  838. margin-right: 0.8%;
  839. /* position: absolute; */
  840. /* top: 8px;
  841. right: 15px; */
  842. width: 8px;
  843. height: 8px;
  844. border-right: 2px solid #fff;
  845. border-bottom: 2px solid #fff;
  846. transform: rotate(-45deg);
  847. }
  848. .windStationNameAndChoice {
  849. clear: both;
  850. width: 100%;
  851. height: 30px;
  852. margin-top: 1%;
  853. color: silver;
  854. /* border: 1px solid red; */
  855. }
  856. .windStationName {
  857. width: 50%;
  858. height: 100%;
  859. float: left;
  860. line-height: 30px;
  861. font-size: 14px;
  862. margin-left: 9.5%;
  863. }
  864. .windStationChoice {
  865. width: 20%;
  866. height: 100%;
  867. float: right;
  868. text-align: right;
  869. line-height: 30px;
  870. font-size: 14px;
  871. margin-right: 5%;
  872. }
  873. .s-popup-wrapper {
  874. width: 500rpx;
  875. background-color: #f0f0f0;
  876. }
  877. .s-popup-title {
  878. width: 100%;
  879. height: 50px;
  880. background-color: #211E21;
  881. }
  882. .s-popup-word {
  883. width: calc(100% - 65px);
  884. height: 50px;
  885. font-size: 14px;
  886. color: white;
  887. line-height: 50px;
  888. float: left;
  889. margin-left: 25px;
  890. }
  891. .s-popup-cha {
  892. width: 40px;
  893. height: 50px;
  894. text-align: center;
  895. line-height: 50px;
  896. float: right;
  897. font-size: 24px;
  898. }
  899. .windStationItemContainer {
  900. width: 100%;
  901. }
  902. .windStationItemContainerBlack {
  903. width: 100%;
  904. background-color: grey;
  905. color: white;
  906. }
  907. .windStationItem {
  908. width: 80%;
  909. height: 50px;
  910. border-bottom: 1px solid #c8c8c8;
  911. text-align: left;
  912. line-height: 50px;
  913. margin-left: 10%;
  914. color: #333333;
  915. }
  916. .DrawerPage {
  917. position: fixed;
  918. width: 100vw;
  919. height: 100vh;
  920. left: 0vw;
  921. background-color: #1f1f1f;
  922. transition: all 0.4s;
  923. }
  924. .DrawerPage.show {
  925. transform: scale(0.9, 0.9);
  926. left: 85vw;
  927. box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
  928. transform-origin: 0;
  929. }
  930. .DrawerPage .cu-bar.tabbar .action button.cuIcon {
  931. width: 64upx;
  932. height: 64upx;
  933. line-height: 64upx;
  934. margin: 0;
  935. display: inline-block;
  936. }
  937. .DrawerPage .cu-bar.tabbar .action .cu-avatar {
  938. margin: 0;
  939. }
  940. .DrawerPage .nav {
  941. flex: 1;
  942. }
  943. .DrawerPage .nav .cu-item.cur {
  944. border-bottom: 0;
  945. position: relative;
  946. }
  947. .DrawerPage .nav .cu-item.cur::after {
  948. content: '';
  949. width: 10upx;
  950. height: 10upx;
  951. background-color: currentColor;
  952. position: absolute;
  953. bottom: 10upx;
  954. border-radius: 10upx;
  955. left: 0;
  956. right: 0;
  957. margin: auto;
  958. }
  959. .DrawerPage .cu-bar.tabbar .action {
  960. flex: initial;
  961. }
  962. </style>