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.
1305 lines
35 KiB
1305 lines
35 KiB
<template>
|
|
<v-scale-screen width="3840" height="2160">
|
|
<div id="cultrue">
|
|
<!-- 左侧 -->
|
|
<div class="leftbox">
|
|
<div class="lb_wht">
|
|
<span class="wh_big_tit">文化</span>
|
|
<span class="wh_small">图书馆 | 文化馆 | 博物馆</span>
|
|
</div>
|
|
<!-- 总计进馆总人数 -->
|
|
<div class="inszone">
|
|
<span class="institle">总计服务人数</span>
|
|
<!-- 今日进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/td_ins.png" />
|
|
<span id="insv" class="insv">
|
|
{{ todayNum }}
|
|
<!-- 234,098 -->
|
|
</span>
|
|
<span class="inst">今日进馆人数</span>
|
|
</div>
|
|
<!-- 本月进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/tm_ins.png" />
|
|
<span id="insv2" class="insv">
|
|
<!-- 234,098 -->
|
|
{{ monthNum }}
|
|
</span>
|
|
<span class="inst">本月进馆人数</span>
|
|
</div>
|
|
<!-- 本年进馆人数 -->
|
|
<div class="insval">
|
|
<img src="../../assets/wh/tyear_ins.png" />
|
|
<span id="insv3" class="insv">
|
|
<!-- 234,098 -->
|
|
{{ yearNum }}
|
|
</span>
|
|
<span class="inst">本年进馆人数</span>
|
|
</div>
|
|
</div>
|
|
<!-- ins 统计图 -->
|
|
<div class="dinszone">
|
|
<span class="dins_title">24小时总服务人次趋势</span>
|
|
<!-- 柱状统计图 -->
|
|
<div class="dins_chart" id="dinschart" style="height: 3rem; width: 100%;margin-top:0.2rem;"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div class="center">
|
|
<div class="bg"></div>
|
|
<div class="ctop">24小时服务人次</div>
|
|
<div class="cmid">
|
|
<div class="cmdiv">
|
|
<span id="cmdval1" class="cmdval">{{bwg_num}}</span>
|
|
<span class="cmdt">博物馆</span>
|
|
</div>
|
|
<div class="cmdiv">
|
|
<span id="cmdval2" class="cmdval">{{whg_num}}</span>
|
|
<span class="cmdt">文化馆</span>
|
|
</div>
|
|
</div>
|
|
<div class="cbuttom">
|
|
<span id="cmdval3" class="cbval">{{ tsg_num }}</span>
|
|
<span class="cbt">图书馆</span>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧 -->
|
|
<div class="rightbox">
|
|
<!-- 各场馆人流趋势 -->
|
|
<div class="pcgrliu">
|
|
<span class="pcg_title">各场馆服务人次趋势</span>
|
|
<div id="pcgchart" style="width: 100%;height: 3.2rem;margin-top: 0.1rem;"></div>
|
|
</div>
|
|
<!-- 图书馆数据统计 -->
|
|
<div class="tsgrliu">
|
|
<span class="tsg_title">图书馆数据统计</span>
|
|
<div id="tsgchart" ></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</v-scale-screen>
|
|
</template>
|
|
<script>
|
|
// 引入echarts
|
|
import * as echarts from "echarts";
|
|
|
|
// 引入api
|
|
import * as homeApi from '@/api/home'
|
|
let barChart1 = null, lineChart2 = null, barChart2 = null;
|
|
let ws;
|
|
export default {
|
|
data() {
|
|
return {
|
|
todayNum: 0,
|
|
monthNum: 0,
|
|
yearNum: 0,
|
|
//24h data
|
|
whdata:[],
|
|
// 博物馆
|
|
bwg_num:0,
|
|
// 文化馆
|
|
whg_num:0,
|
|
// 图书馆
|
|
tsg_num:0,
|
|
data24h: [],
|
|
data24hX: [],
|
|
// 趋势图
|
|
rsqsXData: [],
|
|
rsqsDatas: [],
|
|
rsqsDataName: [],
|
|
rsqsDataAll: [],
|
|
newreader:0,//今日办证人数
|
|
returncount:0,
|
|
servcount:0,
|
|
timer1: null,
|
|
timer2: null,
|
|
timer3: null
|
|
};
|
|
},
|
|
mounted() {
|
|
let cc = window.document.getElementById("app");
|
|
// 清除其他多余的classname
|
|
setTimeout(() => {
|
|
if (cc.className.indexOf("wh_bg") > -1) {
|
|
cc.className = "btgym";
|
|
} else {
|
|
cc.classList.add("wh_bg");
|
|
}
|
|
}, 200);
|
|
// 博物馆人数
|
|
// this.bwugrs();
|
|
this.gethomeBarData();//24小时服务人次
|
|
this.getData24h();//24小时总服务
|
|
this.getGcgNumDatas();//人次趋势
|
|
|
|
// 图书馆借阅查询
|
|
this.getLibraryData();
|
|
|
|
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;
|
|
barChart1 = echarts.init(chartDom);
|
|
|
|
function run(){
|
|
var xData = that.data24hX
|
|
// .slice(-10,that.data24hX.length);
|
|
|
|
var data = that.data24h
|
|
// .slice(-10,that.data24h.length);
|
|
let max=data[0];
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (data[i]>max) {
|
|
max = data[i];
|
|
}
|
|
}
|
|
let dataLenArr = [], dataBGArr = [];
|
|
data.map(item=>{
|
|
dataLenArr.push(0);// 获取和数据一样长度的图形数组
|
|
dataBGArr.push(max);// 数组最大值做背景柱形
|
|
})
|
|
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params) {
|
|
return params[0].name + "</br>" + params[0].value
|
|
}
|
|
},
|
|
// legend: {
|
|
// data: ['厂用电量']
|
|
// },
|
|
grid: {
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
top: '-1%',//隐藏最高一条刻度线
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
data: xData,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#0095FF',
|
|
width: 1,
|
|
type: 'solid',
|
|
},
|
|
show: true
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// interval: 0,
|
|
// rotate: 0
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
// name: ' 今日发电量( KWh )',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
// 使用深浅的间隔色
|
|
color: '#027eff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#0095FF',
|
|
showMaxLabel: false//显示最大刻度
|
|
}
|
|
}],
|
|
series: [{
|
|
// name: '厂用电量',
|
|
type: 'bar',
|
|
barGap: '5%',
|
|
barWidth: '10%',
|
|
barCategoryGap: '60%',
|
|
stack: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: [30, 30, 0, 0],
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#00feff'
|
|
},
|
|
// {
|
|
// offset: 0.5,
|
|
// color: '#00feff'
|
|
// },
|
|
{
|
|
offset: 1,
|
|
color: '#0286ff'
|
|
}
|
|
]
|
|
)
|
|
}
|
|
},
|
|
data: data,
|
|
zlevel: 11
|
|
},
|
|
{
|
|
// name: '厂用电量',
|
|
type: 'scatter',
|
|
stack: 1,
|
|
xAxisIndex: 0,
|
|
symbolOffset: [0, 0], //相对于原本位置的偏移量
|
|
data: dataLenArr,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
symbolSize: 13,
|
|
zlevel: 10,
|
|
z: 2,
|
|
},
|
|
{
|
|
name: '背景',
|
|
type: 'bar',
|
|
barWidth: '10%',
|
|
barGap: '-100%',
|
|
data: dataBGArr,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#004298',
|
|
barBorderRadius: 30,
|
|
// backgroundColor:'#091C24'
|
|
// borderColor:'#00D1F0'
|
|
}
|
|
},
|
|
z: 1,
|
|
},
|
|
]
|
|
}
|
|
option && barChart1.setOption(option);
|
|
}
|
|
|
|
run();
|
|
that.timer1 = setInterval(function () {
|
|
barChart1.clear();
|
|
run();
|
|
}, 3000);
|
|
},
|
|
|
|
// 各场馆服务人次趋势
|
|
cultrue_bar2() {
|
|
let that = this;
|
|
var chartDom = document.getElementById("pcgchart");
|
|
lineChart2 = echarts.init(chartDom);
|
|
var option
|
|
|
|
function run(){
|
|
var xData = that.rsqsXData;
|
|
var name = that.rsqsDataName;
|
|
// console.log(that.rsqsDataName, 'that.rsqsDataName')
|
|
// = ['体育场', '体育馆', '游泳场馆'];
|
|
var data = that.rsqsDataAll;
|
|
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
|
|
let iconData = [];
|
|
that.rsqsDataName.forEach((item, index)=>{
|
|
if(index==0){
|
|
iconData.push({icon: 'image://img/tyc_icon.png', name: name[0]})
|
|
}else if(index==1){
|
|
iconData.push({icon: 'image://img/tyg_icon.png', name: name[1]})
|
|
}else if(index==2){
|
|
iconData.push({icon: 'image://img/yyg_icon.png', name: name[2]})
|
|
}
|
|
})
|
|
|
|
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",
|
|
legend: {
|
|
top: 0,
|
|
left: 0,
|
|
itemGap: 20,
|
|
itemWidth: 20,
|
|
itemHeight: 20,
|
|
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: '14',
|
|
// padding: [1, 12]
|
|
},
|
|
data: iconData
|
|
},
|
|
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: 50,
|
|
bottom: 30,
|
|
right: 0,
|
|
left: 30,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
xAxis: [{
|
|
type: "category",
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitArea: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#FFFFFF',
|
|
fontWeight: 'normal',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
data: xData,
|
|
}],
|
|
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,
|
|
}
|
|
option && lineChart2.setOption(option);
|
|
}
|
|
|
|
run();
|
|
that.timer2 = setInterval(function () {
|
|
lineChart2.clear();
|
|
run();
|
|
}, 3000);
|
|
},
|
|
|
|
// 图书馆统计图数据
|
|
getLibraryData(){
|
|
let that = this;
|
|
homeApi.getLibraryLeaseData().then(res=>{
|
|
if(!res.data){
|
|
return;
|
|
}
|
|
that.newreader = res.data.data.newreader;
|
|
that.returncount = res.data.data.returncount;
|
|
that.servcount = res.data.data.servcount;
|
|
})
|
|
},
|
|
//图书馆统计图
|
|
cultrue_bar3() {
|
|
let that = this;
|
|
var chartDom = document.getElementById("tsgchart");
|
|
barChart2 = echarts.init(chartDom);
|
|
var option;
|
|
|
|
function run(){
|
|
var data = [{
|
|
name: '今日办证人数',
|
|
icon: '../../assets/wh/wh_right3.png',
|
|
value: that.newreader,
|
|
},
|
|
{
|
|
name: '今日还书册数',
|
|
icon: '../../assets/wh/wh_right2.png',
|
|
value: that.returncount,
|
|
},
|
|
{
|
|
name: '今日借书册数',
|
|
icon: '../../assets/wh/wh_right1.png',
|
|
value: that.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;
|
|
}
|
|
|
|
// console.log(getSymbolData(data), '-----');
|
|
option = {
|
|
// backgroundColor: '#000000',
|
|
grid: {
|
|
top: 20,
|
|
bottom: -5,
|
|
right: 0,
|
|
left: 50,
|
|
// containLabel: true
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: [{
|
|
triggerEvent: true,
|
|
show: true,
|
|
// inverse: true,
|
|
// data: getArrByKey(data, 'name'),
|
|
data: [
|
|
'Lend', 'Still', 'Accreditation'
|
|
// '../assets/img/wh_right1.png','../assets/img/wh_right1.png','../assets/img/wh_right1.png'
|
|
],
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// show: false,
|
|
// interval: 0,
|
|
// color: '#fff',
|
|
// align: 'left',
|
|
// margin: 80,
|
|
fontSize: 12,
|
|
verticalAlign: 'bottom',
|
|
// margin: [10, 0, 0, 0],
|
|
// formatter: function (value) {
|
|
// return '{title|' + value + '}'
|
|
// },
|
|
formatter: function (value) {
|
|
//return '{' + value + '| }\n{value|' + value + '}';
|
|
return '{' + value + '|}'; //只显示图片icon
|
|
},
|
|
rich: {
|
|
title: {
|
|
width: 165
|
|
},
|
|
value: {
|
|
lineHeight: 30,
|
|
align: 'center'
|
|
},
|
|
Lend: {
|
|
height: 40,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: libraryIcons.Accreditation
|
|
}
|
|
},
|
|
Still: {
|
|
height: 40,
|
|
align: 'center',
|
|
backgroundColor: {
|
|
image: libraryIcons.Still
|
|
}
|
|
},
|
|
Accreditation: {
|
|
height: 40,
|
|
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: 10,
|
|
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: 30,
|
|
fontSize: 16,
|
|
margin: -4,// 单位与图表右侧边距
|
|
formatter: function (value, index) {
|
|
return data[index].value + valueColor[index].unit
|
|
},
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
name: 'XXX',
|
|
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: [20, 40],
|
|
symbolOffset: [10, 0],
|
|
z: 12,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#14b1eb'
|
|
}
|
|
},
|
|
data: getSymbolData(data)
|
|
}, {
|
|
name: '条',
|
|
type: 'bar',
|
|
showBackground: true,
|
|
barBorderRadius: 30,
|
|
yAxisIndex: 0,
|
|
data: data,
|
|
barWidth: 10,
|
|
// align: left,
|
|
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: 10
|
|
},
|
|
// color: '#A71A2B',
|
|
barBorderRadius: 4,
|
|
},
|
|
label: {
|
|
normal: {
|
|
color: '#fff',
|
|
show: true,
|
|
position: [0, '-20px'],
|
|
textStyle: {
|
|
fontSize: 16
|
|
},
|
|
rich: {
|
|
img1: {
|
|
backgroundColor: {
|
|
image: '../../assets/wh/wh_right1.png'
|
|
}
|
|
}
|
|
},
|
|
formatter: function (param) {
|
|
var res = '';
|
|
res += '{img1|}' + param.name
|
|
|
|
return res;
|
|
},
|
|
// formatter: function (a) {
|
|
// return a.name
|
|
// }
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
option && barChart2.setOption(option);
|
|
}
|
|
|
|
run();
|
|
that.timer3 = setInterval(function () {
|
|
barChart2.clear();
|
|
run();
|
|
}, 3000);
|
|
},
|
|
|
|
// 24小时服务人次
|
|
gethomeBarData(){
|
|
let that = this;
|
|
homeApi.libflow().then(res=>{
|
|
if(!res.data){
|
|
return;
|
|
}
|
|
const rtdata = res.data.data
|
|
//
|
|
that.todayNum = rtdata.today.incount
|
|
that.monthNum = rtdata.month.incount
|
|
that.yearNum = rtdata.year.incount
|
|
// 24小时的数据
|
|
const hour24 = rtdata.hour24
|
|
hour24.forEach(function(item){
|
|
that.whdata.push({
|
|
gname: item.groupName,
|
|
gval: item.incount
|
|
})
|
|
})
|
|
// bind data
|
|
that.tsg_num = that.whdata[0].gval
|
|
that.bwg_num = that.whdata[1].gval
|
|
that.whg_num = that.whdata[2].gval
|
|
//
|
|
// that.todayNum =
|
|
|
|
})
|
|
|
|
},
|
|
|
|
toLocaleString(num) {
|
|
const arr = num.toString().split('').reverse()
|
|
// 遍历数组
|
|
for (let i = 0; i < arr.length; i++) {
|
|
// 如果索引被3整除，并且索引不为0
|
|
if (i % 3 === 0 && i !== 0) {
|
|
// 在当前字符前面加一个逗号
|
|
arr[i] = arr[i] + ','
|
|
}
|
|
}
|
|
// 遍历完后，先反转数组，再将数组转换为字符串
|
|
// 注意：用join方法时，里面必须加双引号，不然默认会用逗号分割
|
|
const str = arr.reverse().join('')
|
|
// 返回这个字符串
|
|
return str
|
|
},
|
|
|
|
// 24小时趋势
|
|
getData24h(){
|
|
let that = this;
|
|
homeApi.getID().then(res=>{
|
|
// console.log(res, '=====');
|
|
let idArr = "";
|
|
res.data.data.map(item=>{
|
|
if(item.type==0){
|
|
idArr += "|"+item.groupId;
|
|
}
|
|
})
|
|
// 获取24小时服务数据
|
|
homeApi.wh24hdata().then(res=>{
|
|
if(!res.data){
|
|
return;
|
|
}
|
|
that.data24h = res.data.data.dvalue;
|
|
that.data24hX = res.data.data.dkeys;
|
|
})
|
|
});
|
|
},
|
|
// 折线趋势图
|
|
getGcgNumDatas(){
|
|
let that = this;
|
|
homeApi.getID().then(res=>{
|
|
// console.log(res, '=====');
|
|
// let idArr = "";
|
|
// res.data.data.map(item=>{
|
|
// if(item.type==2){
|
|
// idArr += "|"+item.groupId;
|
|
// }
|
|
// idArr = idArr.slice(1)
|
|
// })
|
|
|
|
homeApi.whDaydata().then(res=>{
|
|
// console.log( 'toDayGroupsEnterNum',res);
|
|
if(!res.data){
|
|
return;
|
|
}
|
|
const tmpdata = res.data.data;
|
|
tmpdata.forEach((item) => {
|
|
that.rsqsDataName.push(item.groupName);
|
|
that.rsqsDatas.push(item.list)
|
|
})
|
|
|
|
that.rsqsXData = res.data.data[0].list.dkeys;
|
|
that.rsqsDatas.forEach((item) => {
|
|
let rsqsData = []
|
|
Object.getOwnPropertyNames(item).forEach((value) => {
|
|
|
|
if(value=='dkeys'){
|
|
|
|
}
|
|
if(value=='dvalue'){
|
|
// console.log(item, value, '-----')
|
|
// rsqsData.push(item[value])
|
|
rsqsData = item[value];
|
|
}
|
|
});
|
|
that.rsqsDataAll.push(rsqsData)
|
|
})
|
|
});
|
|
|
|
});
|
|
},
|
|
|
|
// 获取实时数据
|
|
getsckdata(){
|
|
let that = this;
|
|
ws = new WebSocket(publicConfig.WS_URL_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>
|
|
<style>
|
|
/* 全局背景 */
|
|
.wh_bg {
|
|
clear: both;
|
|
background-image: url("../../assets/wh/whbg.png") !important;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.screen-box {
|
|
background: none !important;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
#cultrue {
|
|
width: 100%;
|
|
// height: 100%;
|
|
/* float: left; */
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* 左边 */
|
|
.leftbox {
|
|
width: 5.65rem;
|
|
float: left;
|
|
color: #fff;
|
|
margin-top: calc(-3.86rem + 2.16rem);
|
|
// clear: both;
|
|
}
|
|
|
|
.leftbox .lb_wht {
|
|
background-image: url("../../assets/wh/wht_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
width: 5.65rem;
|
|
height: 3.86rem;
|
|
position: relative;
|
|
margin-left: -0.4rem;
|
|
}
|
|
|
|
.leftbox .lb_wht span {
|
|
display: block;
|
|
}
|
|
|
|
.leftbox .lb_wht .wh_big_tit {
|
|
font-size: 0.56rem;
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: 0.94rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.leftbox .lb_wht .wh_small {
|
|
font-size: 0.19rem;
|
|
position: absolute;
|
|
top: 2.9rem;
|
|
right: 0.06rem;
|
|
}
|
|
|
|
/* 总计进馆人数 */
|
|
.inszone {
|
|
width: 100%;
|
|
float: left;
|
|
height: 2.4rem;
|
|
background-image: url("../../assets/wh/ins_count.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-top: 0.29rem;
|
|
}
|
|
|
|
.inszone .institle {
|
|
color: #00c6ff;
|
|
padding-left: 0.4rem;
|
|
line-height: 0.38rem;
|
|
height: 0.38rem;
|
|
display: block;
|
|
font-size: 0.22rem;
|
|
}
|
|
|
|
.inszone .insval {
|
|
width: 30%;
|
|
height: 1.68rem;
|
|
float: left;
|
|
margin-left: 0.16rem;
|
|
}
|
|
|
|
.inszone .insval:first {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.inszone .insval img {
|
|
padding-top: 0.268rem;
|
|
display: block;
|
|
text-align: center;
|
|
width: 1.37rem;
|
|
height: 1.02rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.inszone .insval span {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.inszone .insval .insv {
|
|
height: 0.48rem;
|
|
line-height: 0.48rem;
|
|
font-size: 0.3rem;
|
|
margin-top: -0.35rem;
|
|
}
|
|
|
|
.inszone .insval .inst {
|
|
font-size: 0.19rem;
|
|
height: 0.12rem;
|
|
line-height: 0.12rem;
|
|
}
|
|
|
|
/* 24小时进馆总趋势 */
|
|
.dinszone {
|
|
margin-top: 0.14rem;
|
|
width: 100%;
|
|
height: 0.48rem;
|
|
float: left;
|
|
}
|
|
|
|
.dinszone .dins_title {
|
|
display: block;
|
|
height: 0.68rem;
|
|
line-height: 0.48rem;
|
|
color: #fff;
|
|
font-size: 0.31rem;
|
|
background-image: url('../../assets/wh/dins_title_bg.png');
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
padding-left: 0.7rem;
|
|
}
|
|
|
|
/* 中间部位 */
|
|
.center {
|
|
margin-top: 0.59rem;
|
|
width: 11.5rem;
|
|
height: 8.94rem;
|
|
float: left;
|
|
// background-image: url('../../assets/wh/center_bg.png');
|
|
// background-repeat: no-repeat;
|
|
// background-position: 0 0;
|
|
// background-size: 100% 100%;
|
|
position: relative;
|
|
}
|
|
@keyframes animationB {
|
|
0%{
|
|
// transform: translateY(-10px);
|
|
opacity: 0.6;
|
|
}
|
|
25%{
|
|
// transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
50%{
|
|
// transform: translateY(10px);
|
|
opacity: 0.6;
|
|
}
|
|
75%{
|
|
// transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
100%{
|
|
// transform: translateY(-10px);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
.center .bg{
|
|
width: 11.5rem;
|
|
height: 8.94rem;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
background-image: url('../../assets/wh/center_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
z-index: 1;
|
|
animation: animationB 2s ease-out infinite;
|
|
}
|
|
.center .ctop {
|
|
margin-top: 0.3rem;
|
|
line-height: 0.4rem;
|
|
color: #fff;
|
|
font-size: 0.41rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* 中间中部 */
|
|
.center .cmid {
|
|
padding-top: 4rem;
|
|
width: 100%;
|
|
height: 12vh;
|
|
position: absolute;
|
|
top: 0.6rem;
|
|
width: 100%;
|
|
z-index: 3;
|
|
}
|
|
.center .cmid .cmdiv {
|
|
// padding-top: 3vh;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
width: 50%;
|
|
}
|
|
|
|
.center .cmid .cmdiv span {
|
|
display: block;
|
|
}
|
|
|
|
.center .cmid .cmdiv .cmdval {
|
|
color: #fff;
|
|
font-size: 0.4rem;
|
|
}
|
|
|
|
.center .cmid .cmdiv .cmdt {
|
|
color: #00c6ff;
|
|
font-size: 0.27rem;
|
|
width: 6vw;
|
|
height: 0.43rem;
|
|
line-height: 0.43rem;
|
|
text-align: center;
|
|
background: url('../../assets/wh/ct_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.center .cmid .cmdiv:nth-child(1) {
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.center .cmid .cmdiv:nth-child(2) {
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
/* 中间底部 */
|
|
.center .cbuttom {
|
|
margin-top: 1.3rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 6.5rem;
|
|
width: 100%;
|
|
z-index: 3;
|
|
}
|
|
|
|
.center .cbuttom span {
|
|
display: block;
|
|
}
|
|
|
|
.center .cbuttom .cbval {
|
|
padding-top: 3vh;
|
|
font-size: 0.4rem;
|
|
color: #fff;
|
|
height: 2vh;
|
|
line-height: 2vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.center .cbuttom .cbt {
|
|
color: #00c6ff;
|
|
height: 0.43rem;
|
|
line-height: 0.43rem;
|
|
background: url('../../assets/wh/ct_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center center;
|
|
width: 6vw;
|
|
margin: 2vh auto;
|
|
font-size: 0.27rem;
|
|
}
|
|
|
|
/* 右边 */
|
|
.rightbox {
|
|
width: 5.63rem;
|
|
float: left;
|
|
}
|
|
|
|
.rightbox .pcgrliu {
|
|
margin-top: 0.76rem;
|
|
height: 26vh;
|
|
}
|
|
|
|
.rightbox .pcgrliu .pcg_title {
|
|
display: block;
|
|
height: 0.76rem;
|
|
line-height: 0.55rem;
|
|
background: url('../../assets/wh/r_t_bg_1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 center;
|
|
padding-left: 0.68rem;
|
|
color: #fff;
|
|
font-size: 0.31rem;
|
|
}
|
|
|
|
.rightbox .tsgrliu {
|
|
margin-top: 1.15rem;
|
|
height: 26vh;
|
|
}
|
|
|
|
.rightbox .tsgrliu .tsg_title {
|
|
display: block;
|
|
height: 0.76rem;
|
|
line-height: 0.55rem;
|
|
background: url('../../assets/wh/r_t_bg_2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 center;
|
|
padding-left: 0.68rem;
|
|
color: #fff;
|
|
font-size: 0.31rem;
|
|
}
|
|
|
|
|
|
|
|
#tsgchart{
|
|
width: 100%;height: 3.1rem;margin-top: 0.3rem;
|
|
}
|
|
.screen-box{
|
|
overflow: visible !important;
|
|
::v-deep .screen-wrapper{
|
|
width: calc(24rem - 1.14rem) !important;
|
|
height: 10.71rem !important;
|
|
overflow: visible !important;
|
|
// margin: 0px 0.57rem 0px 0.57rem !important;
|
|
margin: 0px auto !important;
|
|
box-sizing: border-box !important;
|
|
// transform-origin: center top !important;
|
|
transform: scale(1) !important;
|
|
}
|
|
}
|
|
#cultrue{
|
|
// transform: scale(1.25);//浏览器缩小至1536时，匹配外盒子逻辑赋予的transform: scale(0.8, 0.8)
|
|
transform-origin: 0 0;
|
|
}
|
|
</style>
|