|
|
|
|
@ -3,7 +3,7 @@
|
|
|
|
|
<div style="width: 95%;height:100% ;background-color: #ffffff;margin-top: 2%;border-radius: 10px"> |
|
|
|
|
<div style="height: 20%;margin-left: 6%;padding-top: 2%"> |
|
|
|
|
<div style="font-size: 25px;margin-bottom: 5px;margin-bottom: 2%">项目部成本 |
|
|
|
|
<span style="margin: 0% 4%"> <a-month-picker placeholder="选择日期" @change="disabledDate" v-model="this.formData.dateItem"/> </span> |
|
|
|
|
<span style="margin: 0% 4%"> <a-month-picker placeholder="选择日期" @change="disabledDate" v-model="formData.dateItem"/> </span> |
|
|
|
|
<j-dict-select-tag type="list" v-model="formData.materialType" style="width: 30%" |
|
|
|
|
dictCode="material_type" placeholder="请选择物资类型" @input="handleChange"/> |
|
|
|
|
</div> |
|
|
|
|
@ -17,6 +17,7 @@
|
|
|
|
|
<script> |
|
|
|
|
import * as echarts from 'echarts'; |
|
|
|
|
import moment from 'moment' |
|
|
|
|
import { getAction } from '@api/manage' |
|
|
|
|
|
|
|
|
|
// 引入基本模板 |
|
|
|
|
// let echarts = require('echarts/lib/echarts') |
|
|
|
|
@ -33,22 +34,53 @@ export default {
|
|
|
|
|
msg: '我的echarts图表', |
|
|
|
|
timeNum: [], //月份数组 |
|
|
|
|
formData:{ |
|
|
|
|
dateItem: moment(new Date(), 'YYYY-MM'), |
|
|
|
|
materialType: 1, |
|
|
|
|
} |
|
|
|
|
dateItem: undefined, |
|
|
|
|
materialType: 3, |
|
|
|
|
}, |
|
|
|
|
url:{ |
|
|
|
|
getSection: '/hy/processStatistics/getSection', |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.formData.dateItem = moment(new Date(), 'YYYY-MM'); |
|
|
|
|
this.getList(); |
|
|
|
|
this.echartsInit(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods:{ |
|
|
|
|
getList() { |
|
|
|
|
let date = new Date() |
|
|
|
|
this.timeNum = this.getRecentMonth(date.getMonth() + 1) |
|
|
|
|
this.timeNum = []; |
|
|
|
|
// console.log( this.formData.dateItem,"===="); |
|
|
|
|
let date = new Date(this.formData.dateItem); |
|
|
|
|
this.timeNum = this.getRecentMonth(date.getMonth() + 1) |
|
|
|
|
|
|
|
|
|
// console.log(ss,"sdasDFsd"); |
|
|
|
|
let it ={ |
|
|
|
|
time: moment(this.formData.dateItem._d).format('YYYY-MM-DD HH:mm:ss'), |
|
|
|
|
materialsType : this.formData.materialType |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// console.log("====",moment(this.formData.dateItem._d).format('YYYY-MM-DD HH:mm:ss')); |
|
|
|
|
getAction(this.url.getSection,it).then(res=>{ |
|
|
|
|
this.cost = res.result; |
|
|
|
|
console.log("===123132",res.result); |
|
|
|
|
let shuju = []; |
|
|
|
|
let dux= {} |
|
|
|
|
res.result.forEach(item =>{ |
|
|
|
|
// console.log("item",parseInt( item.createTime.substring(5,7) )); |
|
|
|
|
dux= { |
|
|
|
|
sj : parseInt( item.createTime.substring(5,7) ), |
|
|
|
|
lld : item.materialAmount |
|
|
|
|
} |
|
|
|
|
shuju.push(dux); |
|
|
|
|
}); |
|
|
|
|
// console.log(shuju); |
|
|
|
|
this.echartsInit(shuju); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
@ -90,14 +122,15 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
disabledDate(current) { |
|
|
|
|
// console.log("curzdsf",current); |
|
|
|
|
let newTime = this.filterTime( current._d,1); |
|
|
|
|
console.log(newTime);// 2022-02-16 00:00:00 |
|
|
|
|
this.formData.dateItem = newTime; |
|
|
|
|
|
|
|
|
|
// let newTime = this.filterTime( current._d,1); |
|
|
|
|
// console.log("566545645",newTime);// 2022-02-16 00:00:00 |
|
|
|
|
// this.formData.dateItem = newTime; |
|
|
|
|
this.getList(1); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
handleChange(value) { |
|
|
|
|
console.log('selected',value); |
|
|
|
|
this.getList(); |
|
|
|
|
}, |
|
|
|
|
handleBlur() { |
|
|
|
|
console.log('blur'); |
|
|
|
|
@ -110,14 +143,34 @@ export default {
|
|
|
|
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
echartsInit() { |
|
|
|
|
let myEcharts = echarts.init(document.getElementById("myItemCost")) |
|
|
|
|
echartsInit(shuju) { |
|
|
|
|
let myEcharts = echarts.init(document.getElementById("myItemCost")); |
|
|
|
|
let shuzu = [] |
|
|
|
|
this.timeNum.forEach(item =>{ |
|
|
|
|
let num = 0; |
|
|
|
|
shuju.forEach(it => { |
|
|
|
|
if(item.substring(0,1) == it.sj){ |
|
|
|
|
// console.log("时间",item.substring(0,1)); |
|
|
|
|
num += it.lld; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
shuzu.push(num); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
let option ={ |
|
|
|
|
// title: { |
|
|
|
|
// text: '项目部成本', |
|
|
|
|
// subtext: 'Living Expenses in Shenzhen' |
|
|
|
|
// }, |
|
|
|
|
tooltip: {}, |
|
|
|
|
tooltip : { |
|
|
|
|
trigger: 'axis', |
|
|
|
|
axisPointer: { |
|
|
|
|
type: 'cross', |
|
|
|
|
label: { |
|
|
|
|
backgroundColor: '#6a7985' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 图表距边框的距离,可选值：'百分比'¦ {number}(单位px) |
|
|
|
|
grid: { |
|
|
|
|
top: '10%', // 等价于 y: '16%' |
|
|
|
|
@ -128,7 +181,7 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], |
|
|
|
|
data: this.timeNum, |
|
|
|
|
// show: false, |
|
|
|
|
axisLine: { |
|
|
|
|
show: false, |
|
|
|
|
@ -158,7 +211,7 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
data: [10, 20, 40, 40, 50, 60,60,70,25,56,23,23], //对应每一个X坐标的值 |
|
|
|
|
data: shuzu, //对应每一个X坐标的值 |
|
|
|
|
type: 'line', |
|
|
|
|
// itemStyle: { |
|
|
|
|
// normal: { |
|
|
|
|
|
