xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图书馆统计

lite
luyisha 3 years ago
parent
826e73ba66
commit
f1800c29c6
2 changed files with 263 additions and 257 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      src/api/home.js
  2. 512
      src/views/cultrue/index.vue

8
src/api/home.js
View File

@ -151,4 +151,12 @@ export function whDaydata(params){
method: 'get', method: 'get',
params, params,
}) })
}
// 图书馆今日借阅办证数据
export function getLibraryLeaseData(param) {
return request({
url: '/library.pass/getLibraryLeaseData',
method: 'get',
param,
})
} }

512
src/views/cultrue/index.vue
View File

@ -109,6 +109,9 @@ export default {
rsqsDatas: [], rsqsDatas: [],
rsqsDataName: [], rsqsDataName: [],
rsqsDataAll: [], rsqsDataAll: [],
newreader:0,//今日借书册数
returncount:0,
servcount:0,
}; };
}, },
mounted() { mounted() {
@ -128,7 +131,8 @@ export default {
this.getGcgNumDatas();//人次趋势 this.getGcgNumDatas();//人次趋势
// 图书馆借阅查询 // 图书馆借阅查询
this.cultrue_bar3(); this.getLibraryData();
// this.addNumber(0, this.todayNum, 'insv') // this.addNumber(0, this.todayNum, 'insv')
// this.addNumber(0, this.monthNum, 'insv2') // this.addNumber(0, this.monthNum, 'insv2')
// this.addNumber(0, this.yearNum, 'insv3') // this.addNumber(0, this.yearNum, 'insv3')
@ -141,6 +145,7 @@ export default {
setTimeout(() => { setTimeout(() => {
this.cultrue_bar1();//24小时总服务 this.cultrue_bar1();//24小时总服务
this.cultrue_bar2();//人次趋势 this.cultrue_bar2();//人次趋势
this.cultrue_bar3();
}, 900); }, 900);
}, },
methods: { methods: {
@ -523,291 +528,284 @@ export default {
}, 200); }, 200);
}, },
// 图书馆统计图数据
getLibraryData(){
let that = this;
homeApi.getLibraryLeaseData().then(res=>{
that.newreader = res.data.data.newreader;
that.returncount = res.data.data.returncount;
that.servcount = res.data.data.servcount;
})
},
//图书馆统计图 //图书馆统计图
cultrue_bar3() { cultrue_bar3() {
// 获取图书馆的借阅信息 let that = this;
homeApi.libbrow().then(res=>{
console.log(res, '----')
});
var chartDom = document.getElementById("tsgchart"); var chartDom = document.getElementById("tsgchart");
var option; var option;
var data = [{ function run(myChart){
name: '今日办证人数', // 获取新数据-处理
icon: '../../assets/wh/wh_right3.png', var data = [{
value: 352, name: '今日办证人数',
}, icon: '../../assets/wh/wh_right3.png',
{ value: that.servcount,
name: '今日还书册数', },
icon: '../../assets/wh/wh_right2.png', {
value: 17775, name: '今日还书册数',
}, icon: '../../assets/wh/wh_right2.png',
{ value: that.returncount,
name: '今日借书册数',
icon: '../../assets/wh/wh_right1.png',
value: 24546,
},
];
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;
}
// var opt = {
// index: 0
// }
// var color = ['#A71A2B'];
// data = data.sort((a, b) => {
// return b.value - a.value
// });
console.log(getSymbolData(data));
option = {
// backgroundColor: '#000000',
grid: {
top: 20,
bottom: -5,
right: 0,
left: 50,
// containLabel: true
}, },
xAxis: { {
show: false name: '今日借书册数',
icon: '../../assets/wh/wh_right1.png',
value: that.newreader,
}, },
yAxis: [{ ];
triggerEvent: true, let valueColor = [
show: true, { color1: '#15224C', color2: '#FF0042', unit: ' 人 '},
// inverse: true, { color1: '#15224C', color2: '#FED700', unit: ' 册 '},
// data: getArrByKey(data, 'name'), { color1: '#15224C', color2: '#00FEC5', unit: ' 册 '}
data: [ ]
'Lend', 'Still', 'Accreditation' var libraryIcons = {
// '../assets/img/wh_right1.png','../assets/img/wh_right1.png','../assets/img/wh_right1.png' 'Lend': '/img/wh_right1.png',
], 'Still': '/img/wh_right2.png',
axisLine: { 'Accreditation': '/img/wh_right3.png'
show: false };
}, var getArrByKey = (data, k) => {
splitLine: { let key = k || "value";
show: false 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
}, },
axisTick: { xAxis: {
show: false show: false
}, },
axisLabel: { yAxis: [{
// show: false, triggerEvent: true,
// interval: 0, show: true,
// color: '#fff', // inverse: true,
// align: 'left', // data: getArrByKey(data, 'name'),
// margin: 80, data: [
fontSize: 12, 'Lend', 'Still', 'Accreditation'
verticalAlign: 'bottom', // '../assets/img/wh_right1.png','../assets/img/wh_right1.png','../assets/img/wh_right1.png'
// margin: [10, 0, 0, 0], ],
// formatter: function (value) { axisLine: {
// return '{title|' + value + '}' show: false
// },
formatter: function (value) {
//return '{' + value + '| }\n{value|' + value + '}';
return '{' + value + '|}'; //只显示图片icon
}, },
rich: { splitLine: {
title: { show: false
width: 165 },
}, axisTick: {
value: { show: false
lineHeight: 30, },
align: 'center' axisLabel: {
}, // show: false,
Lend: { // interval: 0,
height: 40, // color: '#fff',
align: 'center', // align: 'left',
backgroundColor: { // margin: 80,
image: libraryIcons.Accreditation fontSize: 12,
} verticalAlign: 'bottom',
}, // margin: [10, 0, 0, 0],
Still: { // formatter: function (value) {
height: 40, // return '{title|' + value + '}'
align: 'center', // },
backgroundColor: { formatter: function (value) {
image: libraryIcons.Still //return '{' + value + '| }\n{value|' + value + '}';
} return '{' + value + '|}'; //只显示图片icon
}, },
Accreditation: { rich: {
height: 40, title: {
align: 'center', width: 165
backgroundColor: { },
image: libraryIcons.Lend 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, triggerEvent: true,
show: true, show: true,
// inverse: true, // inverse: true,
data: getArrByKey(data, 'name'), data: getArrByKey(data, 'name'),
axisLine: { axisLine: {
show: false 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
}, },
} splitLine: {
}], show: false
series: [{ },
name: 'XXX', axisTick: {
type: 'pictorialBar', show: false
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], axisLabel: {
symbolOffset: [20, 0], show: false,
z: 12, interval: 0,
itemStyle: { color: '#fff',
normal: { align: 'left',
color: '#14b1eb' margin: 10,
} fontSize: 12,
}, formatter: function (value) {
data: getSymbolData(data) return '{title|' + value + '}'
}, {
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, triggerEvent: true,
}, show: true,
label: { // inverse: true,
normal: { data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
shadowOffsetX: '-20px',
color: '#fff', color: '#fff',
show: true, align: 'right',
position: [0, '-20px'], verticalAlign: 'bottom',
textStyle: { lineHeight: 30,
fontSize: 16 fontSize: 16,
margin: -4,// 单位与图表右侧边距
formatter: function (value, index) {
return data[index].value + valueColor[index].unit
}, },
rich: { }
img1: { }],
backgroundColor: { series: [{
image: '../../assets/wh/wh_right1.png' 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: [50, 50],
symbolOffset: [20, 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
}, },
formatter: function (param) { // color: '#A71A2B',
var res = ''; barBorderRadius: 4,
res += '{img1|}' + param.name },
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; return res;
}, },
// formatter: function (a) { // formatter: function (a) {
// return a.name // return a.name
// } // }
}
} }
} }]
}] };
}; option && myChart.setOption(option);
function run(myChart){
// 获取新数据-处理
myChart.setOption({
series: [
{data: getSymbolData(data)},
{data: data,}
]
});
} }
setTimeout(() => { setTimeout(() => {
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
option && myChart.setOption(option); run(myChart);
setInterval(function () { setInterval(function () {
myChart.clear(); myChart.clear();
option && myChart.setOption(option); that.getLibraryData();
run(myChart); run(myChart);
}, 3000); }, 3000);
}, 200); }, 200);

Write Preview
Loading…
Cancel
Save