You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1049 lines
35 KiB
1049 lines
35 KiB
<template>
|
|
<div class="tyc">
|
|
<div class="topnav">文化</div>
|
|
<!-- 图形 -->
|
|
<div class="tyclogo">
|
|
<div class="tyname">文化</div>
|
|
<div class="tydesc">图书馆|文化馆|博物馆</div>
|
|
</div>
|
|
<!-- 总计进馆人数 -->
|
|
<div class="jgbox">
|
|
<div class="jg_title">总计进馆人数</div>
|
|
<div class="jgcon">
|
|
|
|
<div class="jgitem">
|
|
<div class="jgimg"><img src="../assets/img/icon01.png" /></div>
|
|
<span class="jgival" id="wtdjg">{{ tdjg }}</span>
|
|
<span class="jgdesc">今日进馆人数</span>
|
|
</div>
|
|
<div class="jgitem">
|
|
<div class="jgimg"><img src="../assets/img/icon02.png" /></div>
|
|
<span class="jgival" id="wtmjg"> {{ tmjg }} </span>
|
|
<span class="jgdesc">本月进馆人数</span>
|
|
</div>
|
|
<div class="jgitem">
|
|
<div class="jgimg"><img src="../assets/img/icon03.png" /></div>
|
|
<span class="jgival" id="wtyjg"> {{ tyjg }} </span>
|
|
<span class="jgdesc">本年进馆人数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 24小时进馆人数 -->
|
|
<div class="dgins">
|
|
<div class="dgins_title"><span>24小时进馆人数</span></div>
|
|
<div class="dgins_con">
|
|
<div class="dgitem">
|
|
<div class="dgimg"><img src="../assets/img/wh_icon_bwg.png" /></div>
|
|
<span class="dgival">{{ gkbwg }}</span>
|
|
<span class="dgdesc">博物馆</span>
|
|
</div>
|
|
<div class="dgitem">
|
|
<div class="dgimg"><img src="../assets/img/wh_icon_tsg.png" /></div>
|
|
<span class="dgival">{{ gktsg }}</span>
|
|
<span class="dgdesc">图书馆</span>
|
|
</div>
|
|
<div class="dgitem">
|
|
<div class="dgimg"><img src="../assets/img/wh_icon_whg.png" /></div>
|
|
<span class="dgival">{{ gkwhg }} </span>
|
|
<span class="dgdesc">文化馆</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 24小时总服务人次趋势 -->
|
|
<div class="gcins">
|
|
<div class="gcins_title">24小时总服务人次趋势</div>
|
|
<div ref="wgcins_charts" id="wgcins_charts" style="height:16rem"></div>
|
|
</div>
|
|
|
|
<!-- 各场馆服务人次趋势 -->
|
|
<div class="gcgrs">
|
|
<div class="gcgrs_title">各场馆服务人次趋势</div>
|
|
<div ref="wgc_charts" id="wgc_charts" class="gcgrs_charts"></div>
|
|
</div>
|
|
<!-- 各场馆人数趋势 -->
|
|
<div class="tsgbox">
|
|
<div class="tsg_title">图书馆数据统计</div>
|
|
<div ref="tsgchart" id="tsgchart" class="tsgc_charts"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.tyc {
|
|
position: relative;
|
|
}
|
|
|
|
.topnav {
|
|
height: 46px;
|
|
line-height: 46px;
|
|
text-align: center;
|
|
padding: 12rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 90;
|
|
color: #fff;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: #080A25;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.tyclogo {
|
|
margin-top: 1.6rem;
|
|
background-image: url("../assets/img/wh_00.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: -1.8rem 0;
|
|
height: 14rem;
|
|
}
|
|
|
|
.tyclogo .tyname {
|
|
height: 2.5rem;
|
|
line-height: 2.5rem;
|
|
text-align: right;
|
|
padding-right: 6.8rem;
|
|
font-size: 1.7rem;
|
|
padding-top: 7.8rem;
|
|
}
|
|
|
|
.tyclogo .tydesc {
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
font-size: 1.03rem;
|
|
text-align: right;
|
|
padding-right: 0.3rem;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 总计进馆 */
|
|
.jgbox {
|
|
margin-top: 1.02rem;
|
|
width: 100%;
|
|
height: 12rem;
|
|
}
|
|
|
|
.jgbox .jg_title {
|
|
background-image: url('../assets/img/ty_jg_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
padding-left: 4.6rem;
|
|
height: 2.06rem;
|
|
line-height: 2.06rem;
|
|
}
|
|
|
|
.jgbox .jgcon {
|
|
width: 100%;
|
|
height: 7rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem {
|
|
width: 30%;
|
|
margin-left: 3%;
|
|
float: left;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgimg {
|
|
height: 5rem;
|
|
text-align: center;
|
|
float: left;
|
|
overflow: hidden;
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_sc 8s infinite forwards;
|
|
animation: ani_sc 8s infinite forwards;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgimg img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/** 呼吸效果 */
|
|
@keyframes ani_sc {
|
|
0% {
|
|
transform: scale(0.8);
|
|
transition: all;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem span {
|
|
display: block;
|
|
text-align: center;
|
|
height: 1.6rem;
|
|
line-height: 1.6rem;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgival {
|
|
font-size: 1.06rem;
|
|
font-weight: bold;
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_sc 6s infinite;
|
|
animation: ani_sc 6s infinite;
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgival::after {
|
|
content: "";
|
|
|
|
}
|
|
|
|
.jgbox .jgcon .jgitem .jgdesc {
|
|
margin-top: 75%;
|
|
color: #666;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* 24小时进馆人数 */
|
|
.dgins {
|
|
margin-top: 1.2rem;
|
|
}
|
|
|
|
.dgins .dgins_title {
|
|
background-image: url("../assets/img/wh_24ins_bg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 3rem;
|
|
}
|
|
|
|
.dgins .dgins_title span {
|
|
display: block;
|
|
line-height: 2rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dgins .dgins_con {
|
|
height: 6rem;
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.dgins .dgins_con .dgitem {
|
|
width: 30%;
|
|
margin-left: 3%;
|
|
float: left;
|
|
}
|
|
|
|
.dgins .dgins_con .dgitem .dgimg {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_sc 5s infinite forwards;
|
|
animation: ani_sc 5s infinite forwards;
|
|
}
|
|
|
|
.dgins .dgins_con .dgitem span {
|
|
display: block;
|
|
text-align: center;
|
|
height: 1.8rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
.dgins .dgins_con .dgitem .dgival {
|
|
font-size: 1.06rem;
|
|
/* 动画效果 */
|
|
-webkit-animation: ani_sc 5s infinite forwards;
|
|
animation: ani_sc 5s infinite forwards;
|
|
}
|
|
|
|
.dgins .dgins_con .dgitem .dgdesc {
|
|
font-size: 0.6rem;
|
|
background-image: url('../assets/img/wh_icon_bg.png');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/* 24小时总进馆人数趋势 */
|
|
.gcins {
|
|
margin-top: 2.6rem;
|
|
}
|
|
|
|
.gcins .gcins_title {
|
|
background-image: url("../assets/img/tyc_tbg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 2.2rem;
|
|
line-height: 2.2rem;
|
|
padding-left: 2.02rem;
|
|
}
|
|
|
|
/* 各场馆人数趋势 */
|
|
.gcgrs {
|
|
margin-top: 2.6rem;
|
|
}
|
|
|
|
.gcgrs .gcgrs_title {
|
|
background-image: url("../assets/img/wh_tbg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 2.4rem;
|
|
line-height: 2.4rem;
|
|
padding-left: 2.42rem;
|
|
}
|
|
|
|
.gcgrs .gcgrs_charts {
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
height: 18rem;
|
|
}
|
|
|
|
/* 图书馆趋势 */
|
|
.tsgbox {
|
|
margin-top: 1.2rem;
|
|
}
|
|
|
|
.tsgbox .tsg_title {
|
|
background-image: url("../assets/img/wh_tsg_tbg.png");
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
height: 2.4rem;
|
|
line-height: 2.4rem;
|
|
padding-left: 2.42rem;
|
|
}
|
|
|
|
.tsgbox .tsgc_charts {
|
|
/* margin-top: 2rem; */
|
|
width: 100%;
|
|
height: 10rem;
|
|
}
|
|
</style>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
|
|
// 引入api
|
|
import * as homeApi from '@/api/home'
|
|
import { ecMaxVal, numGrow } from '@/utils/comm';
|
|
|
|
let hws = null;
|
|
export default {
|
|
name: 'TycView',
|
|
data() {
|
|
return {
|
|
//三馆人数概况
|
|
tdjg: 0,
|
|
tmjg: 0,
|
|
tyjg: 0,
|
|
//
|
|
gkbwg: 0,
|
|
gktsg: 0,
|
|
gkwhg: 0,
|
|
|
|
// 柱子图
|
|
ecbardata: [],
|
|
|
|
// 24小时总服务人次趋势
|
|
wh24xdata: [],
|
|
wh24ydata: [],
|
|
//折线区域的数据
|
|
zxliddata: [],
|
|
// 折线名称
|
|
zxlindata: [],
|
|
// 图书馆借阅
|
|
libleaData: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
// 三馆人数
|
|
this.sgrsStat()
|
|
|
|
// 24小时总服务人次趋势
|
|
this.getWh24hdata()
|
|
//
|
|
this.whtdrs()
|
|
|
|
// 图书借阅信息
|
|
this.libinfoData()
|
|
|
|
// websocket
|
|
this.getsckdata()
|
|
|
|
},
|
|
methods: {
|
|
// 三馆人数概况
|
|
sgrsStat() {
|
|
homeApi.allGroupNum({ type: 2 }).then(res => {
|
|
const tdata = res.data.returnData;
|
|
this.tdjg = tdata.day.noRepeatInNum
|
|
this.tmjg = tdata.month.noRepeatInNum
|
|
this.tyjg = tdata.year.noRepeatInNum
|
|
});
|
|
homeApi.tsgTrends().then(res => {
|
|
const tdata = res.data.data;
|
|
|
|
// //24小时的情况
|
|
const sgdata = tdata.hour24
|
|
this.gktsg = sgdata[0].incount
|
|
this.gkbwg = sgdata[1].incount
|
|
this.gkwhg = sgdata[2].incount
|
|
});
|
|
},
|
|
|
|
// 24 小时总服务人次趋势
|
|
getWh24hdata() {
|
|
homeApi.wh24ServiceTrends().then(res => {
|
|
const temcgData = res.data.data
|
|
|
|
const vkdata = new Array;
|
|
vkdata.push({
|
|
xname: temcgData.dkeys.slice(-8, temcgData.dkeys.length),
|
|
xval: temcgData.dvalue.slice(-8, temcgData.dvalue.length),
|
|
mxarr: ecMaxVal(temcgData.dvalue.slice(-8, temcgData.dvalue.length))
|
|
})
|
|
this.ecbardata = vkdata
|
|
// do line
|
|
this.cgsf_line()
|
|
})
|
|
},
|
|
// 山峰图---24小时总服务人次趋势
|
|
// 24H 服务人次绘制柱形图
|
|
cgsf_line() {
|
|
//var chartDom = document.getElementById('wgcins_charts');
|
|
var chartDom = this.$refs.wgcins_charts
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params) {
|
|
return params[0].name + "</br>" + params[0].value
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '3%',
|
|
bottom: '3%',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
data: this.ecbardata[0].xname,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: '#027eff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
}
|
|
}],
|
|
series: [{
|
|
type: 'bar',
|
|
barGap: '5%',
|
|
barWidth: '10%',
|
|
barCategoryGap: '60%',
|
|
stack: 1,
|
|
// animation
|
|
animationDurationUpdate: 3000,
|
|
animationEasingUpdate: 'quintcInOut',
|
|
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: [30, 30, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#00feff'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#0286ff'
|
|
}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: this.ecbardata[0].xval,
|
|
zlevel: 11
|
|
},
|
|
{
|
|
type: 'scatter',
|
|
stack: 1,
|
|
xAxisIndex: 0,
|
|
symbolOffset: [0, 0], //相对于原本位置的偏移量
|
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
symbolSize: 13,
|
|
zlevel: 10,
|
|
z: 2,
|
|
},
|
|
{
|
|
name: '背景',
|
|
type: 'bar',
|
|
barWidth: '10%',
|
|
barGap: '-100%',
|
|
//data: ecMaxVal(Object.values(this.ecbardata[0].xval)),
|
|
data: this.ecbardata[0].mxarr,
|
|
//data: ecMaxVal(this.ecbardata[0].xval),
|
|
//data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#004298',
|
|
barBorderRadius: 30,
|
|
}
|
|
},
|
|
z: 1,
|
|
},
|
|
]
|
|
}
|
|
|
|
// option && myChart.setOption(option);
|
|
//消停几秒后开始，动画
|
|
|
|
// setInterval(()=>{
|
|
myChart.clear()
|
|
option && myChart.setOption(option);
|
|
// },4000);
|
|
},
|
|
|
|
// 今日人流
|
|
whtdrs() {
|
|
homeApi.whtdrs().then(res => {
|
|
// get allTimeData
|
|
const tmpdata = res.data.data
|
|
// X 轴的名称字段
|
|
const xarr = tmpdata[0].list.dkeys
|
|
const darr = new Array;
|
|
tmpdata.forEach(function (item, idx) {
|
|
// 读取list
|
|
const list = item.list
|
|
darr.push(list.dvalue)
|
|
})
|
|
|
|
this.zxlindata = xarr
|
|
this.zxliddata = darr
|
|
//
|
|
this.cg_line()
|
|
});
|
|
},
|
|
|
|
// 图书馆借阅查询
|
|
libinfoData() {
|
|
homeApi.libLeaseData().then(res => {
|
|
this.libleaData = res.data.data
|
|
//
|
|
this.tsg_line()
|
|
});
|
|
},
|
|
// 图书馆
|
|
tsg_line() {
|
|
var chartDom = this.$refs.tsgchart;
|
|
// var chartDom = document.getElementById("tsgchart");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
var data = [{
|
|
name: '今日办证人数',
|
|
value: this.libleaData.newreader,
|
|
},
|
|
{
|
|
name: '今日还书册数',
|
|
value: this.libleaData.returncount,
|
|
},
|
|
{
|
|
name: '今日借书册数',
|
|
value: this.libleaData.servcount,
|
|
},
|
|
];
|
|
// 值颜色
|
|
let valueColor = [
|
|
{ color1: '#15224C', color2: '#FF0042', unit: ' 人 ' },
|
|
{ color1: '#15224C', color2: '#FED700', unit: ' 册 ' },
|
|
{ color1: '#15224C', color2: '#00FEC5', unit: ' 册 ' }
|
|
]
|
|
// 前缀图标
|
|
var libraryIcons = {
|
|
'Lend': '/img/wh_right1.png',
|
|
'Still': '/img/wh_right2.png',
|
|
'Accreditation': '/img/wh_right3.png'
|
|
};
|
|
var getArrByKey = (data, k) => {
|
|
let key = k || "value";
|
|
let res = [];
|
|
if (data) {
|
|
data.forEach(function (t) {
|
|
res.push(t[key]);
|
|
});
|
|
}
|
|
return res;
|
|
};
|
|
var getSymbolData = (data) => {
|
|
let arr = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
arr.push({
|
|
value: data[i].value,
|
|
symbolPosition: 'end'
|
|
})
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
option = {
|
|
grid: {
|
|
show: false,
|
|
left: 35,
|
|
right: -45,
|
|
top: 25,//拉伸距离顶部高度
|
|
bottom: -30,//拉伸距离底部高度
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: [
|
|
{
|
|
triggerEvent: true,
|
|
show: true,
|
|
data: [
|
|
'Lend', 'Still', 'Accreditation'
|
|
],
|
|
// max:80,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
type: 'category',
|
|
inverse: true, //true正序false倒序
|
|
|
|
fontSize: 12,
|
|
verticalAlign: 'bottom',
|
|
formatter: function (value) {
|
|
return '{' + value + '|}'; //只显示图片icon
|
|
},
|
|
|
|
rich: {
|
|
value: {
|
|
lineHeight: 30,
|
|
align: 'center'
|
|
},
|
|
Lend: {
|
|
height: 35,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: libraryIcons.Accreditation
|
|
}
|
|
},
|
|
Still: {
|
|
height: 35,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: libraryIcons.Still
|
|
}
|
|
},
|
|
Accreditation: {
|
|
height: 35,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: libraryIcons.Lend
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
triggerEvent: true,
|
|
show: true,
|
|
// inverse: true,
|
|
data: getArrByKey(data, 'name'),
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
interval: 0,
|
|
color: '#fff',
|
|
align: 'left',
|
|
// margin: 80,
|
|
fontSize: 12,
|
|
formatter: function (value) {
|
|
return '{title|' + value + '}'
|
|
},
|
|
},
|
|
}, {
|
|
triggerEvent: true,
|
|
show: true,
|
|
// inverse: true,
|
|
data: getArrByKey(data, 'name'),
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
shadowOffsetX: '-20px',
|
|
color: '#fff',
|
|
align: 'right',
|
|
verticalAlign: 'bottom',
|
|
lineHeight: 42,
|
|
fontSize: 14,
|
|
formatter: function (value, index) {
|
|
return data[index].value + valueColor[index].unit
|
|
},
|
|
}
|
|
}],
|
|
series: [
|
|
// 光圈
|
|
{
|
|
type: 'pictorialBar',
|
|
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
|
|
symbolSize: [50, 50],
|
|
symbolOffset: [20, 0],
|
|
z: 12,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#14b1eb'
|
|
}
|
|
},
|
|
animationDelay: function (idx) {
|
|
return idx * 10
|
|
},
|
|
data: getSymbolData(data)
|
|
},
|
|
{
|
|
type: 'bar',
|
|
showBackground: true,
|
|
barBorderRadius: 30,
|
|
yAxisIndex: 0,
|
|
data: data,
|
|
barWidth: 10,
|
|
barGap: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: (params) => {
|
|
var index = params.dataIndex;
|
|
if (params.dataIndex >= valueColor.length) {
|
|
index = params.dataIndex - valueColor.length;
|
|
}
|
|
return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
|
offset: 0,
|
|
color: valueColor[index].color1
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: valueColor[index].color2
|
|
}, {
|
|
offset: 1,
|
|
color: valueColor[index].color2
|
|
}]);
|
|
},
|
|
barBorderRadius: 0
|
|
},
|
|
// color: '#A71A2B',
|
|
barBorderRadius: 4,
|
|
},
|
|
// 标签
|
|
label: {
|
|
normal: {
|
|
color: '#fff',
|
|
show: true,
|
|
position: [0, '-20px'],
|
|
textStyle: {
|
|
fontSize: 16
|
|
},
|
|
formatter: function (a) {
|
|
return a.name
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
animationEasing: 'elasticOut',
|
|
animationDelayUpdate: function (idx) {
|
|
return idx * 5
|
|
}
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 场馆人流趋势绘制线图
|
|
// 场馆人流趋势绘制线图
|
|
cg_line() {
|
|
|
|
let that = this;
|
|
var chartDom = this.$refs.wgc_charts;
|
|
// var chartDom = document.getElementById("wgc_charts");
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
var option
|
|
var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
var name = that.zxlindata.slice(-10, that.zxlindata.length)
|
|
var data = that.zxliddata.slice(-10, that.zxliddata.length)
|
|
|
|
var series = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
series.push({
|
|
name: name[i],
|
|
type: "line",
|
|
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
|
|
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
|
|
smooth: true, //是否平滑曲线显示
|
|
showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: color[i]
|
|
}, {
|
|
offset: 0.8,
|
|
color: 'rgba(255,255,255,0)'
|
|
}], false),
|
|
// shadowColor: 'rgba(255,255,255, 0.1)',
|
|
shadowBlur: 10,
|
|
opacity: 0.3,
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
lineStyle: {
|
|
width: 1,
|
|
type: 'solid' //'dotted'虚线 'solid'实线
|
|
},
|
|
borderColor: color[i], //图形的描边颜色。支持的格式同 color
|
|
borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ]
|
|
barBorderRadius: 0,
|
|
label: {
|
|
show: false,
|
|
},
|
|
opacity: 0.5,
|
|
}
|
|
},
|
|
data: data[i],
|
|
|
|
})
|
|
}
|
|
option = {
|
|
// backgroundColor: "#141f56",
|
|
title: {
|
|
// text: "负面言论分领域趋势",
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '22',
|
|
fontWeight: 'normal',
|
|
},
|
|
subtextStyle: {
|
|
color: '#90979c',
|
|
fontSize: '16',
|
|
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
|
|
lineStyle: {
|
|
color: '#57617B'
|
|
}
|
|
},
|
|
formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
|
|
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
|
padding: [8, 10], //内边距
|
|
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
|
},
|
|
grid: {
|
|
borderWidth: 0,
|
|
top: 240,
|
|
bottom: 240,
|
|
right: 20,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: name,
|
|
}],
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#32346c ',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#0095FF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
series: series,
|
|
}
|
|
|
|
myChart.clear()
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 从ws 中实时获取数据
|
|
getsckdata() {
|
|
let that = this;
|
|
hws = new WebSocket(publicConfig.WS_URL_WH);
|
|
hws.onopen = function () {
|
|
// console.log("ws connected success!")
|
|
};
|
|
hws.onclose = function (event) {
|
|
// console.log('WebSocket连接已关闭');
|
|
};
|
|
hws.onmessage = (e) => {
|
|
var jstr = JSON.parse(e.data);
|
|
if (!jstr) {
|
|
return;
|
|
}
|
|
|
|
// 总计进馆人数
|
|
const allFlowTrends = jstr.allFlowTrends.data
|
|
that.tdjg = allFlowTrends.today.incount
|
|
that.tmjg = allFlowTrends.month.incount
|
|
that.tyjg = allFlowTrends.year.incount
|
|
// 今日进馆
|
|
const hour24 = allFlowTrends.hour24
|
|
that.gktsg = hour24[0].incount
|
|
that.gkbwg = hour24[1].incount
|
|
that.gkwhg = hour24[2].incount
|
|
|
|
// 图书借阅信息
|
|
const libleas = jstr.getLibraryLeaseData.data
|
|
that.libleaData = libleas
|
|
|
|
// 24 小时柱形图数据
|
|
const vkdata = new Array;
|
|
vkdata.push({
|
|
xname: jstr.getLibraryHours24List.data.dkeys.slice(-8, jstr.getLibraryHours24List.data.dkeys.length),
|
|
xval: jstr.getLibraryHours24List.data.dvalue.slice(-8, jstr.getLibraryHours24List.data.dvalue.length)
|
|
})
|
|
that.ecbardata = vkdata;
|
|
that.cgsf_line();
|
|
|
|
// 线图数据
|
|
function linedata() {
|
|
that.zxliddata = [];
|
|
that.rsqsDataName = [], that.rsqsDatas = [];
|
|
const tmpdata = jstr.getLibraryGroupHoursList.data;
|
|
tmpdata.forEach((item) => {
|
|
that.rsqsDataName.push(item.groupName);
|
|
that.rsqsDatas.push(item.list)
|
|
})
|
|
|
|
that.zxlindata = jstr.getLibraryGroupHoursList.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();
|
|
|
|
}
|
|
},
|
|
|
|
},
|
|
beforeUnmount() {
|
|
hws.close();
|
|
}
|
|
}
|
|
</script>
|