|
|
|
@ -2,7 +2,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-left: 9%;margin-right: 2%"> <a-month-picker :disabled-date="disabledDate" placeholder="选择日期" @change="disabledDate" v-model="formData.dateItem"/> </span> |
|
|
|
|
<span style="margin-left: 9%;margin-right: 2%"> <a-month-picker placeholder="选择日期" @change="disabledDate" v-model="formData.dateItem"/> </span> |
|
|
|
|
<j-dict-select-tag type="list" v-model="formData.materialType" style="width: 30%;margin-left: 2%" |
|
|
|
|
:trigger-change="true" dictCode="material_type" |
|
|
|
|
placeholder="请选择物资类型" @change="handleChange"/> |
|
|
|
@ -32,7 +32,6 @@ name: "Cost",
|
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
msg: '我的echarts图表', |
|
|
|
|
materialType: null, |
|
|
|
|
url:{ |
|
|
|
|
getSection: '/hy/processStatistics/getSection', |
|
|
|
|
}, |
|
|
|
@ -56,7 +55,8 @@ name: "Cost",
|
|
|
|
|
this.timeNum = []; |
|
|
|
|
// console.log( this.formData.dateItem,"===="); |
|
|
|
|
let date = new Date(this.formData.dateItem); |
|
|
|
|
this.timeNum = GetRecentMonth(date.getMonth() + 1,this.timeNum) |
|
|
|
|
this.timeNum = GetRecentMonth(date.getMonth() + 1,this.timeNum); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(ss,"sdasDFsd"); |
|
|
|
|
let it ={ |
|
|
|
@ -86,12 +86,16 @@ name: "Cost",
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
disabledDate(current) { |
|
|
|
|
disabledDate() { |
|
|
|
|
// Can not select days before today and today |
|
|
|
|
return current && current < moment().endOf('day'); |
|
|
|
|
// return current && current < moment().endOf('day'); |
|
|
|
|
this.getList(); |
|
|
|
|
}, |
|
|
|
|
handleChange(value) { |
|
|
|
|
console.log(`selected ${value}`); |
|
|
|
|
this.formData.materialType = value; |
|
|
|
|
this.getList(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
handleBlur() { |
|
|
|
|
console.log('blur'); |
|
|
|
@ -106,16 +110,36 @@ name: "Cost",
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
drawLine() { |
|
|
|
|
drawLine(shuju) { |
|
|
|
|
// let echarts = require('echarts/lib/echarts') |
|
|
|
|
// 基于准备好的dom,初始化echarts实例 |
|
|
|
|
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 myChart = echarts.init(this.$refs["myChartCon"]); |
|
|
|
|
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%' |
|
|
|
@ -126,7 +150,7 @@ name: "Cost",
|
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
type: 'category', |
|
|
|
|
data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], |
|
|
|
|
data: this.timeNum, |
|
|
|
|
// show: false, |
|
|
|
|
axisLine: { |
|
|
|
|
show: false, |
|
|
|
@ -156,7 +180,7 @@ name: "Cost",
|
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
data: [10, 20, 40, 40, 50, 60,60,70,25,56,23,23], //对应每一个X坐标的值 |
|
|
|
|
data: shuzu, //对应每一个X坐标的值 |
|
|
|
|
type: 'line', |
|
|
|
|
// itemStyle: { |
|
|
|
|
// normal: { |
|
|
|
|