diff --git a/src/api/home.js b/src/api/home.js index a8297c0..68963b6 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -151,4 +151,12 @@ export function whDaydata(params){ method: 'get', params, }) +} +// 图书馆今日借阅办证数据 +export function getLibraryLeaseData(param) { + return request({ + url: '/library.pass/getLibraryLeaseData', + method: 'get', + param, + }) } \ No newline at end of file diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue index f253de8..ad0cdd8 100644 --- a/src/views/cultrue/index.vue +++ b/src/views/cultrue/index.vue @@ -109,6 +109,9 @@ export default { rsqsDatas: [], rsqsDataName: [], rsqsDataAll: [], + newreader:0,//今日借书册数 + returncount:0, + servcount:0, }; }, mounted() { @@ -128,7 +131,8 @@ export default { this.getGcgNumDatas();//人次趋势 // 图书馆借阅查询 - this.cultrue_bar3(); + this.getLibraryData(); + // this.addNumber(0, this.todayNum, 'insv') // this.addNumber(0, this.monthNum, 'insv2') // this.addNumber(0, this.yearNum, 'insv3') @@ -141,6 +145,7 @@ export default { setTimeout(() => { this.cultrue_bar1();//24小时总服务 this.cultrue_bar2();//人次趋势 + this.cultrue_bar3(); }, 900); }, methods: { @@ -523,291 +528,284 @@ export default { }, 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() { - // 获取图书馆的借阅信息 - homeApi.libbrow().then(res=>{ - console.log(res, '----') - }); - + let that = this; var chartDom = document.getElementById("tsgchart"); var option; - var data = [{ - name: '今日办证人数', - icon: '../../assets/wh/wh_right3.png', - value: 352, - }, - { - name: '今日还书册数', - icon: '../../assets/wh/wh_right2.png', - value: 17775, - }, - { - 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 + function run(myChart){ + // 获取新数据-处理 + var data = [{ + name: '今日办证人数', + icon: '../../assets/wh/wh_right3.png', + value: that.servcount, + }, + { + name: '今日还书册数', + icon: '../../assets/wh/wh_right2.png', + value: that.returncount, }, - xAxis: { - show: false + { + name: '今日借书册数', + icon: '../../assets/wh/wh_right1.png', + value: that.newreader, }, - 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 + ]; + 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 }, - axisTick: { + xAxis: { 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 + 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 }, - 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 - } + 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 }, - Accreditation: { - height: 40, - align: 'center', - backgroundColor: { - image: libraryIcons.Lend + 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 + { + triggerEvent: true, + show: true, + // inverse: true, + data: getArrByKey(data, 'name'), + axisLine: { + show: false }, - } - }], - 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: [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 - }]); + 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 + '}' }, - barBorderRadius: 10 }, - // color: '#A71A2B', - barBorderRadius: 4, - }, - label: { - normal: { + }, { + 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', - show: true, - position: [0, '-20px'], - textStyle: { - fontSize: 16 + align: 'right', + verticalAlign: 'bottom', + lineHeight: 30, + fontSize: 16, + margin: -4,// 单位与图表右侧边距 + formatter: function (value, index) { + return data[index].value + valueColor[index].unit }, - rich: { - img1: { - backgroundColor: { - image: '../../assets/wh/wh_right1.png' - } - } + } + }], + 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: [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) { - var res = ''; - res += '{img1|}' + param.name + // 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 - // } + return res; + }, + // formatter: function (a) { + // return a.name + // } + } } - } - }] - }; - function run(myChart){ - // 获取新数据-处理 - myChart.setOption({ - series: [ - {data: getSymbolData(data)}, - {data: data,} - ] - }); + }] + }; + option && myChart.setOption(option); } setTimeout(() => { var myChart = echarts.init(chartDom); - option && myChart.setOption(option); + run(myChart); setInterval(function () { myChart.clear(); - option && myChart.setOption(option); + that.getLibraryData(); run(myChart); }, 3000); }, 200);