|
|
|
@ -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(); |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
