diff --git a/src/App.vue b/src/App.vue index 73c524b..d897a91 100644 --- a/src/App.vue +++ b/src/App.vue @@ -59,18 +59,8 @@ export default { const seconds = ('0' + this.date.getSeconds()).slice(-2); this.curtime = `${hours}:${minutes}:${seconds}` this.nowtime = `${year}.${month}.${day} ` + cweeks[wday]; - setTimeout(()=>{ - // console.log(this.$router.currentRoute.path) - let path = this.$router.currentRoute.path; - if(path=='/'){ - this.currentPage = 0; - }else if(path=='/ty'){ - this.currentPage = 2; - }else if(path=='/cultrue'){ - this.currentPage = 1; - } - }, 500) }, + updated(){}, mounted() { this.getTimespan(); this.getStat(); @@ -88,6 +78,18 @@ export default { }, 200); }, }, + $route(to,from){ + // console.log(to.path, '监听路由'); + // let path = this.$router.currentRoute.path; + let path = to.path; + if(path=='/'){ + this.currentPage = 0; + }else if(path=='/ty'){ + this.currentPage = 2; + }else if(path=='/cultrue'){ + this.currentPage = 1; + } + } }, methods: { // diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue index b001b81..e6618dd 100644 --- a/src/views/cultrue/index.vue +++ b/src/views/cultrue/index.vue @@ -87,7 +87,8 @@ import * as echarts from "echarts"; // 引入api import * as homeApi from '@/api/home' -let lineChart1 = null, lineChart2 = null, barChart = null; +let barChart1 = null, lineChart2 = null, barChart2 = null; +let ws; export default { data() { return { @@ -136,27 +137,19 @@ export default { // 图书馆借阅查询 this.getLibraryData(); - // this.addNumber(0, this.todayNum, 'insv') - // this.addNumber(0, this.monthNum, 'insv2') - // this.addNumber(0, this.yearNum, 'insv3') - // - // this.addNumber(0, this.bwg_num, 'cmdval1') - // this.addNumber(0, this.whg_num, 'cmdval2') - // this.addNumber(0, this.tsg_num, 'cmdval3') - // this.getTsgInfoDatas() - // var name = ['图书馆', '文化馆', '博物馆'] setTimeout(() => { this.cultrue_bar1();//24小时总服务 this.cultrue_bar2();//人次趋势 this.cultrue_bar3(); }, 900); + this.getsckdata(); }, methods: { cultrue_bar1() { let that = this; var chartDom = document.getElementById("dinschart"); // var option; - lineChart1 = echarts.init(chartDom); + barChart1 = echarts.init(chartDom); function run(){ var xData = that.data24hX @@ -306,12 +299,12 @@ export default { }, ] } - option && lineChart1.setOption(option); + option && barChart1.setOption(option); } run(); that.timer1 = setInterval(function () { - lineChart1.clear(); + barChart1.clear(); run(); }, 3000); }, @@ -512,7 +505,7 @@ export default { cultrue_bar3() { let that = this; var chartDom = document.getElementById("tsgchart"); - barChart = echarts.init(chartDom); + barChart2 = echarts.init(chartDom); var option; function run(){ @@ -770,32 +763,15 @@ export default { } }] }; - option && barChart.setOption(option); + option && barChart2.setOption(option); } run(); that.timer3 = setInterval(function () { - barChart.clear(); + barChart2.clear(); run(); }, 3000); }, - addNumber(start, end, id) { - var o = document.getElementById(id); - var i = start; - var Interval; - if (i < end) { - Interval = setInterval(function () { - i += 4000; // 设置每次增加的动态数字，可调整 - if (i > end) { - clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档 - o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同 - i = 0; - } else { - o.innerHTML = i.toLocaleString(); - } - }, 10); // 数据跳转的速度控制 - } - }, // 24小时服务人次 gethomeBarData(){ @@ -910,12 +886,74 @@ export default { }); }, + + // 获取实时数据 + getsckdata(){ + let that = this; + ws = new WebSocket("ws://192.168.66.16/wh"); + ws.onopen = function() {}; + // 连接关闭时触发 + ws.onclose = function(event) { + console.log('WebSocket连接已关闭'); + }; + ws.onmessage = (e)=> { + var jstr = JSON.parse(e.data) + if(!jstr){ + return; + } + // 柱形图数据 + that.data24h = jstr.getLibraryHours24List.data.dvalue; + that.data24hX = jstr.getLibraryHours24List.data.dkeys; + // 图书馆数据 + that.newreader = jstr.getLibraryLeaseData.data.newreader; + that.returncount = jstr.getLibraryLeaseData.data.returncount; + that.servcount = jstr.getLibraryLeaseData.data.servcount; + // 折线数据 + function linedata(){ + that.rsqsDataName=[],that.rsqsDatas=[],that.rsqsDataAll=[]; + const tmpdata = jstr.getLibraryGroupHoursList.data; + tmpdata.forEach((item) => { + that.rsqsDataName.push(item.groupName); + that.rsqsDatas.push(item.list) + }) + + that.rsqsXData = jstr.getLibraryGroupHoursList.data[0].list.dkeys; + that.rsqsDatas.forEach((item) => { + let rsqsData = [] + Object.getOwnPropertyNames(item).forEach((value) => { + if(value=='dvalue'){ + rsqsData = item[value]; + } + }); + that.rsqsDataAll.push(rsqsData) + }) + } + linedata(); + // 中间数据、左上人数统计 + that.whdata = []; + const rtdata = jstr.allFlowTrends.data + that.todayNum = rtdata.today.incount + that.monthNum = rtdata.month.incount + that.yearNum = rtdata.year.incount + const hour24 = rtdata.hour24 + hour24.forEach(function(item){ + that.whdata.push({ + gname: item.groupName, + gval: item.incount + }) + }) + that.tsg_num = that.whdata[0].gval + that.bwg_num = that.whdata[1].gval + that.whg_num = that.whdata[2].gval + } + } }, beforeDestroy(){ console.log('清除文化定时器') clearInterval(this.timer1); clearInterval(this.timer2); clearInterval(this.timer3); + ws.close(); } }; diff --git a/src/views/index.vue b/src/views/index.vue index f75295a..60875a3 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -231,7 +231,7 @@ export default { this.index_pie1(); }, 1000) - // this.getsckdata(); + this.getsckdata(); }, methods: { autoTimer0(){ @@ -678,24 +678,6 @@ export default { }, 3000); }, - addNumber(start, end, id) { - var o = document.getElementById(id); - var i = start; - var Interval; - if (i < end) { - Interval = setInterval(function () { - i += 4000; // 设置每次增加的动态数字，可调整 - if (i > end) { - clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档 - o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同 - i = 0; - } else { - o.innerHTML = i.toLocaleString(); - } - }, 10); // 数据跳转的速度控制 - } - }, - getStat() { let that = this homeApi.allGroupNum().then(res => { @@ -741,9 +723,9 @@ export default { // return;//Cannot read properties of undefined (reading 'returnData') if(res.data){ that.ssjgNumDatas = res.data.returnData - console.log(that.ssjgNumDatas, 'that.ssjgNumDatas') + // console.log(that.ssjgNumDatas, 'that.ssjgNumDatas') that.ssjgNumDatas.forEach(item => { - let proportion = parseInt(item.proportion); + // let proportion = parseInt(item.proportion); // if (proportion < 50 || proportion == 50) { // this.$refs.proportionbox.addClass('rbrate2') @@ -827,8 +809,10 @@ export default { // 设置每层圆环颜色和添加间隔的透明色 color.forEach((item) => { color1.push(item, 'transparent'); - color2.push(hexToRgba(item, 0.4), 'transparent'); - color3.push(hexToRgba(item, 1), 'transparent'); + // color2.push(hexToRgba(item, 0.4), 'transparent'); + color2.push(hexToRgba(item, 0.4));// 不要间隔 + // color3.push(hexToRgba(item, 1), 'transparent'); + color3.push(hexToRgba(item, 1));// 不要间隔 }); let data1 = []; let sum = 0; @@ -837,21 +821,27 @@ export default { sum += Number(item.value); }); // 给每个数据后添加特定的透明的数据形成间隔 + // dataP.forEach((item, index) => { + // if (item.value !== 0) { + // data1.push(item, { + // name: '', + // value: sum / 100, + // labelLine: { + // show: false, + // lineStyle: { + // color: 'transparent', + // }, + // }, + // itemStyle: { + // color: 'transparent', + // }, + // }); + // } + // }); + // 不要间隔 dataP.forEach((item, index) => { if (item.value !== 0) { - data1.push(item, { - name: '', - value: sum / 70, - labelLine: { - show: false, - lineStyle: { - color: 'transparent', - }, - }, - itemStyle: { - color: 'transparent', - }, - }); + data1.push(item); } }); var option = { @@ -944,9 +934,9 @@ export default { if(!jstr){ return; } + + // 饼图、右侧数据 const pieData = jstr.realTimeData.data; - - // 饼图数据 that.proportionData = [];that.groupNameData=[];that.dataP=[]; pieData.forEach((item) => { that.proportionData.push(item.proportion); @@ -956,6 +946,7 @@ export default { value:item.proportion.split('%')[0] }) }) + that.ssjgNumDatas = pieData;// 右侧数据 // 折线图数据 function handleLine(){ that.rsqsDatas = [];that.rsqsDataName = [];that.rsqsData_z = []; @@ -1007,6 +998,13 @@ export default { that.klqsXDataY = dkeys3; } handleBar(); + + // 中间数据 + that.day_num = jstr.allGroupNum.data.day.noRepeatInNum; + that.week_num = jstr.allGroupNum.data.week.noRepeatInNum; + that.mon_num = jstr.allGroupNum.data.month.noRepeatInNum; + that.year_num = jstr.allGroupNum.data.year.noRepeatInNum; + }; }, }, @@ -1017,7 +1015,7 @@ export default { clearInterval(this.timer2); clearInterval(this.timer3); clearInterval(this.timer4); - // ws.close(); + ws.close(); } }; diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue index a995959..3cd745c 100644 --- a/src/views/ty/index.vue +++ b/src/views/ty/index.vue @@ -154,6 +154,7 @@ import * as echarts from "echarts"; // 引入api import * as homeApi from '@/api/home' let lineChart1 = null, lineChart2 = null; +let ws; export default { components: { @@ -243,12 +244,7 @@ export default { }, 500); }) - - // this.$nextTick(()=>{ - // this.addNumber(0, this.todayNum, 'insv') - // this.addNumber(0, this.monthNum, 'insv2') - // this.addNumber(0, this.yearNum, 'insv3') - // }); + this.getsckdata(); }, methods: { @@ -644,7 +640,7 @@ export default { value: (DD.proportion.split('%'))[0], }, { - name: '/'+DD.groupName, + name: '', value: 100-((DD.proportion.split('%'))[0]), } ]; @@ -661,13 +657,13 @@ export default { ')' ); } - let color = ['#00d2ff', '#22e5d1', '#f4d64e', '#0072ff']; + let color = ['#22e5d1', '#00d2ff', '#f4d64e', '#0072ff']; let color1=[], color2=[], color3=[]; // 设置每层圆环颜色和添加间隔的透明色 color.forEach((item) => { color1.push(item, 'transparent'); color2.push(hexToRgba(item, 0.4), 'transparent'); - color3.push(hexToRgba(item, 0.7), 'transparent'); + color3.push(hexToRgba(item, 1), 'transparent'); }); let data1 = []; let sum = 0; @@ -912,13 +908,83 @@ export default { }); }); }, - + // 获取实时数据 + getsckdata(){ + let that = this; + ws = new WebSocket("ws://192.168.66.16/ty"); + ws.onopen = function() {}; + // 连接关闭时触发 + ws.onclose = function(event) { + console.log('WebSocket连接已关闭'); + }; + ws.onmessage = (e)=> { + var jstr = JSON.parse(e.data) + if(!jstr){ + return; + } + // 柱形图数据 + that.data24h = jstr.getPassHoursData.data.dvalue; + that.data24hX = jstr.getPassHoursData.data.dkeys; + // 线图数据 + function linedata(){ + that.rsqsDataAll=[],that.rsqsDataName=[],that.rsqsDatas=[]; + const tmpdata = jstr.toDayGroupsEnterNum.data; + tmpdata.forEach((item) => { + that.rsqsDataName.push(item.groupName); + that.rsqsDatas.push(item.list) + }) + + that.rsqsXData = jstr.toDayGroupsEnterNum.data[0].list.dkeys; + that.rsqsDatas.forEach((item) => { + let rsqsData = [] + Object.getOwnPropertyNames(item).forEach((value) => { + if(value=='dvalue'){ + rsqsData = item[value]; + } + }); + that.rsqsDataAll.push(rsqsData) + }) + } + linedata(); + // 右上占比、中间数据 + function proportion(){ + that.groupsData = []; + // console.log(res.data.data.groupsData) + jstr.allGroupTimeNum.data.data.groupsData.forEach(item=>{ + that.groupsData.push(item); + that.cgdata.push({ + gname:item.groupName, + grate:item.proportion, + gval:item.noRepeatInNum + }) + }); + // console.log(that.groupsData, 'that.groupsData') + that.cgn_1 = that.groupsData[0].groupName; + that.cgv_1 = that.groupsData[0].noRepeatInNum; + that.cgp_1 = that.groupsData[0].proportion; + that.cgn_2 = that.groupsData[1].groupName; + that.cgv_2 = that.groupsData[1].noRepeatInNum; + that.cgp_2 = that.groupsData[1].proportion; + that.cgn_3 = that.groupsData[2].groupName; + that.cgv_3 = that.groupsData[2].noRepeatInNum; + that.cgp_3 = that.groupsData[2]?that.groupsData[2].proportion:''; + } + proportion(); + // 左上人数数据 + const rtdata = jstr.allGroupNum.data + that.todayNum = rtdata.day.noRepeatInNum + that.weekNum = rtdata.week.noRepeatInNum + that.monthNum = rtdata.month.noRepeatInNum + that.yearNum = rtdata.year.noRepeatInNum + } + }, }, beforeDestroy(){ console.log('清除体育定时器') clearInterval(this.timer1); clearInterval(this.timer2); clearInterval(this.timer3); + ws.close(); } };