diff --git a/src/assets/img/yyg_icon.png b/src/assets/img/yyg_icon.png index 87f28c7..25af799 100644 Binary files a/src/assets/img/yyg_icon.png and b/src/assets/img/yyg_icon.png differ diff --git a/src/assets/img/yyg_icon_2.png b/src/assets/img/yyg_icon_2.png new file mode 100644 index 0000000..87f28c7 Binary files /dev/null and b/src/assets/img/yyg_icon_2.png differ diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index a2bd82c..1377202 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -142,7 +142,7 @@ import { numGrow,ecMaxVal,numberGrow} from '@/utils/comm'; // 引入api import * as homeApi from '@/api/home' - +let ws = null; export default { name: 'HomeView', data() { @@ -442,7 +442,7 @@ export default { } }, { - data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], + data: [1, 1, 1, 1, 1, 1, 1, 1], type: 'pictorialBar', barMaxWidth: '15', symbol: 'circle', @@ -489,7 +489,8 @@ export default { option = { - color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"], + // color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"], + color: ['#ff9acc', '#6666ff', '#a9eeff', '#02ff00','#00ffff', '#fdff00'], series: [ { @@ -700,12 +701,12 @@ export default { getsckdata(){ let that = this; // websocket - const ws = new WebSocket(publicConfig.WS_URL_ZL); + ws = new WebSocket(publicConfig.WS_URL_ZL); ws.onopen = function() { - console.log("ws connected success!") + // console.log("ws connected success!") }; ws.onclose = function(event) { - console.log('WebSocket连接已关闭'); + // console.log('WebSocket连接已关闭'); }; ws.onmessage = (e)=> { var jstr = JSON.parse(e.data); @@ -822,6 +823,9 @@ export default { }); } + }, + beforeUnmount(){ + ws.close(); } } @@ -843,7 +847,9 @@ export default { color: #fff; left: 0; top: 0; - background-color: #080A25; + /* background-color: #080A25; */ + background-color: #032461; + box-shadow: 0px 3px 4px 0px rgba(255, 255, 255, 0.1); margin-bottom: 30rpx; } @@ -942,6 +948,13 @@ export default { width: 20%; height: 3.2rem; float: left; + width: 5rem; + height: 4rem; +} +.numbox .numicon img{ + width: 100%; + height: 100%; + margin-top: 0.7rem; } .numbox .numdiv { @@ -990,11 +1003,11 @@ export default { .klqs .klqs_bg { float: left; /* width: 80%; */ - margin-left: 4rem; + margin-left: 5rem; /* padding-left: 6.4rem; */ line-height: 2.8rem; font-size: 1.1rem; - color: gray; + color: #999; } .klqs .klbtn { @@ -1117,10 +1130,10 @@ export default { background-size: 100% 100%; background-position: -1.04rem 0.2rem; height: 3.2rem; - line-height: 0rem; - padding-left: 4.6rem; + line-height: 3.5rem; + padding-left: 5rem; font-size: 1.1rem; - color: gray; + color: #999; padding-bottom: 1rem; } @@ -1139,9 +1152,9 @@ export default { height: 3.8rem; line-height: 2.8rem; background-position: -1.04rem 0.2rem; - padding-left: 4.6rem; + padding-left: 5.5rem; font-size: 1.1rem; - color: gray; + color: #999; } .pcgrs .pcg_item { @@ -1167,6 +1180,7 @@ export default { margin-top: 1.6rem; margin-right: 1.1rem; /* padding-right: 0.9rem; */ + color: #3E96F7; } .pcgrs .pcg_item .pcval { @@ -1222,7 +1236,8 @@ export default { font-size: 0.2rem; } .pcgrs .pcg_item .rbrate0 { - width: 32%; + /* width: 32%; */ + width: 3.4rem; height: 3.4rem; line-height: 3.4rem; display: block; diff --git a/src/views/TycView.vue b/src/views/TycView.vue index 1d3436d..1d927a0 100644 --- a/src/views/TycView.vue +++ b/src/views/TycView.vue @@ -402,6 +402,7 @@ import * as echarts from 'echarts'; import * as btApi from '../api/home' import { ecMaxVal,numGrow } from '@/utils/comm'; +let ws = null; export default { name: 'TycView', data() { @@ -431,6 +432,8 @@ export default { this.cg_line() // this.getTdcg() + + this.getsckdata() }, methods: { // 110,210,310 @@ -495,7 +498,7 @@ export default { }); // 2 }, - // 24H 进馆人数 + // 24H 服务人次绘制柱形图 cgsf_line() { var chartDom = document.getElementById('gcins_charts'); var myChart = echarts.init(chartDom); @@ -625,19 +628,19 @@ export default { ] } - option && myChart.setOption(option); + // option && myChart.setOption(option); //消停几秒后开始,动画 - setInterval(()=>{ + // setInterval(()=>{ myChart.clear() option && myChart.setOption(option); - },4000); + // },4000); }, // 获取各场馆的趋势 getTdcg(){ let guids = "110|210|310" - btApi.tdGroupRealTimeEnter({groupsId:guids}).then(res=>{ + btApi.tdGroupRealTimeEnter({type:1}).then(res=>{ console.log(res) const tmpdata = res.data.data // X 轴的名称字段 @@ -658,7 +661,7 @@ export default { }) }, - // 场馆人流趋势 + // 场馆人流趋势绘制线图 cg_line() { var chartDom = document.getElementById("gc_charts"); var myChart = echarts.init(chartDom); @@ -817,9 +820,81 @@ export default { series: series, } + myChart.clear() option && myChart.setOption(option); }, + getsckdata(){ + let that = this; + // websocket + ws = new WebSocket(publicConfig.WS_URL_TY); + ws.onopen = function() { + // console.log("ws connected success!") + }; + ws.onclose = function(event) { + // console.log('WebSocket连接已关闭'); + }; + ws.onmessage = (e)=> { + var jstr = JSON.parse(e.data); + if(!jstr){ + return; + } + + // 24 小时柱形图数据 + const vkdata = new Array; + vkdata.push({ + xname: jstr.getPassHoursData.data.dkeys.slice(-8, jstr.getPassHoursData.data.dkeys.length), + xval: jstr.getPassHoursData.data.dvalue.slice(-8, jstr.getPassHoursData.data.dvalue.length) + }) + that.ecbardata = vkdata; + that.cgsf_line(); + // 线图数据 + function linedata(){ + that.zxliddata=[]; + that.rsqsDataName=[],that.rsqsDatas=[]; + const tmpdata = jstr.toDayGroupsEnterNum.data; + tmpdata.forEach((item) => { + that.rsqsDataName.push(item.groupName); + that.rsqsDatas.push(item.list) + }) + + that.zxlindata = jstr.toDayGroupsEnterNum.data[0].list.dkeys; + that.rsqsDatas.forEach((item) => { + let rsqsData = [] + Object.getOwnPropertyNames(item).forEach((value) => { + if(value=='dvalue'){ + rsqsData = item[value]; + } + }); + that.zxliddata.push(rsqsData) + }) + that.cg_line() + } + linedata(); + // 占比、顶部数据 + function proportion(){ + // 场馆人次占比 + const tgdata = jstr.allGroupTimeNum.data.data.groupsData + that.cgdata = tgdata + // today in + // tgdata.forEach(item=>{ + // that.tdnum += item.noRepeatInNum + // }); + } + proportion(); + // 服务人数数据 + const rtdata = jstr.allGroupNum.data + that.tdnum = rtdata.day.noRepeatInNum + that.wdnum = rtdata.week.noRepeatInNum + that.tmdata = rtdata.month.noRepeatInNum + that.tydata = rtdata.year.noRepeatInNum + } + } + }, + beforeUnmount(){ + // console.log('体育关闭链接'); + ws.close(); + } } \ No newline at end of file