intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

物品使用统计

Browse Source
init
zhusiyu 3 years ago
parent f1edf37738
commit c9f267162a
2 changed files with 429 additions and 0 deletions
Show Stats Download Patch File Download Diff File

401
src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/goodsUseCensus.vue
Unescape View File

@ -0,0 +1,401 @@
<template>
<div class="goodsUseCensus">
<TabComp :tabArr="tabArr" showName="title" @tabChange="tabChange"/>
<DateChoose @flushDate="flushDate" :begin_date="begin_date" :end_date="end_date"></DateChoose>
<div class="part-record-div">
<div class="part-title">领用情况</div>
<div class="useTimes part-record-divChild">
<p>领用次数</p>
<h2 style="font-size: 20px;font-weight:600;color: #fff">{{15}}</h2>
</div>
<div class="useMount part-record-divChild">
<p>领用数量</p>
<h2 style="font-size: 20px;font-weight:600;color: #fff">{{76}}</h2>
</div>
<div class="useMost part-record-divChild">
<p>用量最多</p>
<h2 style="font-size: 20px;font-weight:600;color: #fff">{{15}}</h2>
</div>
</div>
<div class="part-record-div">
<div class="part-title">领用物品分类</div>
<div id="myEChart" ref="echartsPic" class="echart-div"></div>
<div class="part-record-divLeft">按次数排序</div>
<div class="part-record-divRigt">按数量排序</div>
</div>
</div>
</template>
<script>
import TabComp from '../common/tabComp.vue';
import DateChoose from '../common/dateChoose.vue';
// import {} from 'ant-design-vue';
import InterConfig from './interConfig';
import moment from 'moment';
import * as echarts from 'echarts';
export default{
data(){
return {
tabArr: [
{title: "本人"},
{title: "部门"},
{title: "本机构"},
],
tabIndex: 0,
begin_date: null,
end_date: null,
depId: this.BaseConfig.person_info_my.dep_id,
//柱状图数据
// tooltip: {
// trigger: 'item',
// axisPointer: {}
// },
// grid: {
// left: '5%',
// bottom: '2%',
// top: '4%',
// containLabel: true
// },
// xAxis: [
// {
// type: 'value',
// show: false,
// }
// ],
// yAxis: [
// {
// type: 'category',
// show: false,
// }
// ],
// series: [
// {
// type: 'bar',
// stack: 'Total',
// label: {
// show: false
// },
// emphasis: {
// focus: 'series'
// },
// color: ['rgba(238, 201, 0,1)', 'rgba(238, 201, 0,1)'],
// data: [320, 302, 341, 374, 390, 450, 420],
// itemStyle: {
// normal: {
// barBorderRadius: [0, 20, 20, 0]
// }
// }
// },
// {
//// name: 'Expenses',
// type: 'bar',
// stack: 'Total',
// label: {
// show: false,
// position: 'left'
// },
// emphasis: {
// focus: 'series'
// },
// data: [-120, -132, -101, -134, -190, -230, -210],
// color: ['rgba(72, 118, 255,1)', 'rgba(72, 118, 255,1)'],
// itemStyle: {
// normal: {
// barBorderRadius: [20, 0, 0, 20]
// }
// }
// }
// ]
option: {
dataZoom: [{
end: 0,
start: 0,
type: "slider",
xAxisIndex: 0,
show: false,
}],
grid: {
left: '',
bottom: '',
top: '',
containLabel: true
},
legend: {
data: []
},
series: [
{
stack: 'Total',
label: {
show: false
},
emphasis: {
focus: 'series'
},
color: ['rgba(238, 201, 0,1)', 'rgba(238, 201, 0,1)'],
itemStyle: {
normal: {
barBorderRadius: [0, 20, 20, 0]
}
},
data: [320, 302, 341, 374, 390, 450, 420],
name: '',
type: ''
},
{
stack: 'Total',
label: {
show: false,
position: 'left'
},
emphasis: {
focus: 'series'
},
color: ['rgba(72, 118, 255,1)', 'rgba(72, 118, 255,1)'],
itemStyle: {
normal: {
barBorderRadius: [20, 0, 0, 20]
}
},
data: [-120, -132, -101, -134, -190, -230, -210],
name: '',
type: ''
}
],
tooltip: {
trigger: '',
axisPointer: {}
},
xAxis: {
data: [],
type: '',
show: false,
},
yAxis: {
minInterval: 1,
type: '',
show: false,
}
}
}
},
components: {
TabComp,
DateChoose
},
created(){
this.getNowTime();
},
mounted(){
// this.echartsDraw();
},
methods: {
tabChange: function (param) {
//console.log('goodsusecensus', param)
if (this.tabIndex != param.index) {
this.tabIndex = param.index;
}
},
getGoodsUseRecord(){
let param = {
person_id: this.BaseConfig.userInfo.person_id,//当前登录人员ID，必填
dept_id: this.depId,//部门ID，data_flag=2时必填
org_id: this.BaseConfig.person_info_my.bureau_id,//机构ID，必填
data_flag: 1,//当=1时表示统计本人，2本部门，3本机构
//start_date: moment(this.begin_date).format("YYYY-MM-DD"),//开始日期，例2020-12-15，非必填
//end_date: moment(this.end_date).format("YYYY-MM-DD")//结束日期，例2021-12-15，非必填
};
// console.log(param)
this.InterfaceConfig.callInterface([{
url: InterConfig.getGoodsUseRecord.url,
params: param,
method: InterConfig.getGoodsUseRecord.method,
isTestLogin: InterConfig.getGoodsUseRecord.isTestLogin,
}], (result) => {
// console.log('getGoodsUseRecord', result)
if (result[0].data.code === 2000) {
console.log('getGoodsUseRecord', result)
let op = result[0].data.data.option;
op.series[0].data = [320, 302, 341, 374, 390, 450, 420]
op.series[1].data = [-120, -132, -101, -134, -190, -230, -210]
op.dataZoom[0].show = false
this.option = op
// this.option = result[0].data.data.option;
this.echartsDraw();
// console.log(this.option)
}
})
},
//时间选择器
flushDate (param) {
this.begin_date = param.beginDate_i;
this.end_date = param.endDate_i;
},
getNowTime() {
this.InterfaceConfig.callInterface([{
url: InterConfig.getNowTime.url,
params: {},
method: InterConfig.getNowTime.method,
isTestLogin: InterConfig.getNowTime.isTestLogin,
}], (result) => {
let resData = result[0].data;
if (result[0].status === 200) {
if (resData.code === 2000) {
let year = resData.data.year;
let month = resData.data.month;
let day = resData.data.day;
this.begin_date = moment(year + "-" + month + "-01");
this.end_date = moment(year + "-" + month + "-" + day);
this.getGoodsUseRecord()
}
}
})
},
//echarts柱状图
echartsDraw(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('myEChart'));
// 绘制图表
myChart.setOption(this.option)
// myChart.setOption({
// tooltip: {
// trigger: 'item',
// axisPointer: {}
// },
// grid: {
// left: '5%',
// bottom: '2%',
// top: '4%',
// containLabel: true
// },
// xAxis: [
// {
// type: 'value',
// show: false,
// }
// ],
// yAxis: [
// {
// type: 'category',
// show: false,
// }
// ],
// series: [
// {
// type: 'bar',
// stack: 'Total',
// label: {
// show: false
// },
// emphasis: {
// focus: 'series'
// },
// color: ['rgba(238, 201, 0,1)', 'rgba(238, 201, 0,1)'],
// data: [320, 302, 341, 374, 390, 450, 420],
// itemStyle: {
// normal: {
// barBorderRadius: [0, 20, 20, 0]
// }
// }
// },
// {
//// name: 'Expenses',
// type: 'bar',
// stack: 'Total',
// label: {
// show: false,
// position: 'left'
// },
// emphasis: {
// focus: 'series'
// },
// data: [-120, -132, -101, -134, -190, -230, -210],
// color: ['rgba(72, 118, 255,1)', 'rgba(72, 118, 255,1)'],
// itemStyle: {
// normal: {
// barBorderRadius: [20, 0, 0, 20]
// }
// }
// }
// ]
// })
}
},
}
</script>
<style scoped lang="scss">
.goodsUseCensus {
padding: 10px;
width: 100%;
min-height: 19rem;
.part-record-div {
min-height: 7rem;
border: 2px solid rgba(144, 202, 249, 1);
border-radius: 5px;
position: relative;
margin-top: 1.5rem;
display: flex;
justify-content: center;
padding: 1rem 0;
.part-title {
position: absolute;
top: -16px;
padding: 0.2rem 1rem;
border-radius: 1rem;
background-color: #31a8fa;
color: white;
font-size: 12px;
}
.part-record-divChild {
vertical-align: middle;
text-align: center;
padding-top: 1rem;
width: 25%;
height: 5rem;
color: #fff;
box-shadow: 2px 2px 2px #fff;
}
.useTimes {
background-color: rgba(255, 153, 102, 1);
}
.useMount {
background-color: rgba(102, 204, 204, 1);
margin: 0 8%;
}
.useMost {
background-color: rgba(153, 204, 255, 1);
}
.echart-div {
width: 80%;
min-height: 15rem;
}
.part-record-divLeft {
position: absolute;
top: 0;
left: 5%;
width: 7%;
padding: 3% 1% 0 1%;
height: 7rem;
background-color: rgb(72, 118, 255);
font-weight: 600;
border-radius: 0 0 15px 15px;
text-align: center;
vertical-align: bottom;
}
.part-record-divRigt {
position: absolute;
top: 0;
right: 5%;
width: 7%;
height: 7rem;
border: 3px solid rgb(238, 201, 0);
color: rgb(238, 201, 0);
font-weight: 600;
border-radius: 0 0 15px 15px;
text-align: center;
vertical-align: bottom;
padding-top: 2%;
}
}
}
</style>

28
src/views/screenAdaptation/pages/adminCenter/moduleCom/oa/goodsUseCensus/interConfig.js
Unescape View File

@ -0,0 +1,28 @@
export default {
/*
* 获取服务器端系统时间
* */
"getNowTime":{
url:'/intellioa/common/getNowTime',
method:'get',
isTestLogin:true
},
//y-获取物品使用统计数据6.1
"getGoodsUseRecord":{
url:'/intellioa/supplies/report/byEveryday',
method:'get',
isTestLogin:true
}
// // Y-获取即时库存数据
// "getStock":{
// url:'/intellioa/supplies/info/treelist',
// method:'post',
// isTestLogin:true
// },
// 返回值
// code：状态码2000、5000、4011
// msg：响应说明
}
Write Preview
Loading…
Cancel
Save