324 lines
8.1 KiB
Vue
324 lines
8.1 KiB
Vue
<template>
|
||
<Card title="主材料计划和进场对比图">
|
||
<div class="typedata">
|
||
<div class="containbox">
|
||
<div class="typeName">材料类别</div>
|
||
<div>
|
||
<el-select
|
||
v-model="typeId"
|
||
@change="checkTypes"
|
||
placeholder="请选择"
|
||
style="background: transparent; width: 100px"
|
||
>
|
||
<el-option
|
||
v-for="item in typeList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div style="margin-left: 20px">
|
||
<el-date-picker
|
||
v-model="checkDate"
|
||
type="year"
|
||
value-format="yyyy"
|
||
@change="checkTypes"
|
||
placeholder="选择年"
|
||
>
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div class="myChart">
|
||
<JBarChart
|
||
v-if="isblock"
|
||
:grid="grid"
|
||
:xData="xData"
|
||
:legend="legend"
|
||
:series="series"
|
||
:tooltip="tooltip"
|
||
/>
|
||
</div>
|
||
<!-- <div class="dataImg" >
|
||
<img src="@/assets/images/noData3.png" alt srcset />
|
||
<p>{{ $t("message.dataBoard.nodata") }}</p>
|
||
</div> -->
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script>
|
||
import Card from "../components/Card.vue";
|
||
import JBarChart from "../../common/jChart/bar/JBarChart.vue";
|
||
import echarts from "echarts4";
|
||
// import {
|
||
// getMaterialRequisitionTrendChart,
|
||
// trendChartTime,
|
||
// } from "@/assets/js/api/markingRoom";
|
||
import {
|
||
getPassConsumeRatioList,//根据类别id和年月进行材料统计
|
||
} from "@/assets/js/api/markingRoom";
|
||
import { getMaterialTypeApi,//查询类别
|
||
} from '@/assets/js/api/zhongjianFourth.js'
|
||
|
||
export default {
|
||
components: { Card, JBarChart },
|
||
data() {
|
||
return {
|
||
// checkImg:false,
|
||
time1: [],
|
||
typeId:"",
|
||
checkDate:"",
|
||
typeList: [],
|
||
dataList: [
|
||
{
|
||
value: "1",
|
||
label: "年",
|
||
},
|
||
{
|
||
value: "2",
|
||
label: "月",
|
||
},
|
||
{
|
||
value: "3",
|
||
label: "日",
|
||
},
|
||
],
|
||
legend: ["计划用量", "进场量", "偏差比例"],
|
||
value1: "1",
|
||
value2: "1",
|
||
grid: ["18%", "2%", "2%", "2%"],
|
||
xData: new Array(12).fill("破产倒闭").map((v, i) => i + 1 + "月"),
|
||
series: [
|
||
{
|
||
name: "计划用量",
|
||
type: "bar",
|
||
data: [],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#6de1ee" },
|
||
{ offset: 1, color: "#6de1ee24" },
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
name: "进场量",
|
||
type: "bar",
|
||
data: [],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: "#DE5F2A" },
|
||
{ offset: 1, color: "#DE5F2A24" },
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
name: "偏差比例",
|
||
type: "line",
|
||
symbolSize: 10,
|
||
symbol: "circle",
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgb(206, 190, 69)",
|
||
barBorderRadius: 0,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 4,
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(255, 195, 3, 1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(255, 195, 3, 1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
data: [],
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
|
||
formatter:function(params) {
|
||
var str = params[0].name + '<br>'
|
||
for(let item of params) {
|
||
if(item.seriesName === "偏差比例") {
|
||
str += item.seriesName + ' : ' + Math.abs(item.value) + '%<br>'
|
||
}else{
|
||
str += item.seriesName + ' : ' + Math.abs(item.value) + '<br>'
|
||
|
||
}
|
||
|
||
}
|
||
return str;
|
||
}
|
||
},
|
||
sn: "",
|
||
plan: [],
|
||
actual: [],
|
||
monly: [],
|
||
yearsList: [],
|
||
yearValue: "",
|
||
isblock: false,
|
||
year:'',
|
||
}
|
||
},
|
||
created() {
|
||
// this.getList();
|
||
this.getgetMaterialTypeApi()
|
||
},
|
||
methods: {
|
||
getgetMaterialTypeApi() {
|
||
getMaterialTypeApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||
this.typeList = res.result
|
||
// if(res.result.length == 0) {
|
||
// this.checkImg = true
|
||
// }
|
||
if(res.result.length >= 1) {
|
||
res.result.forEach(element => {
|
||
if(element.name === "钢筋(t)") {
|
||
this.typeId=element.id
|
||
}
|
||
});
|
||
|
||
this.checkDate = "2023"
|
||
this.getgetPassConsumeRatioList()
|
||
this.isblock = true
|
||
}
|
||
|
||
console.log('查询材料类别',res);
|
||
})
|
||
},
|
||
getgetPassConsumeRatioList() {
|
||
getPassConsumeRatioList({ typeId:this.typeId,year:this.checkDate }).then(res => {
|
||
let passList = []
|
||
let consumeList = []
|
||
let deviationRatioList = []
|
||
res.result.forEach(element => {
|
||
passList.push(element.plan)
|
||
consumeList.push(element.pass)
|
||
deviationRatioList.push(element.deviationRatio)
|
||
});
|
||
this.series[0].data = passList //计划用量 pass
|
||
this.series[1].data = consumeList //实际用量 consume
|
||
this.series[2].data = deviationRatioList //偏差比例 deviationRatio
|
||
console.log('查询getgetPassConsumeRatioList ： ',this.series);
|
||
})
|
||
},
|
||
checkTypes(val) {
|
||
console.log("类型或者时间修改事件值 ：", val);
|
||
this.getgetPassConsumeRatioList()
|
||
},
|
||
// getTime1(val) {
|
||
// this.time1 = val;
|
||
// },
|
||
// getList() {
|
||
// this.sn = this.$store.state.projectSn;
|
||
|
||
// trendChartTime({ projectSn: this.sn }).then((res) => {
|
||
// this.yearsList = res.result;
|
||
// if (this.yearsList.length > 0) {
|
||
// this.yearValue = this.yearsList[0];
|
||
// getMaterialRequisitionTrendChart({
|
||
// projectSn: this.sn,
|
||
// year: this.yearValue,
|
||
// }).then((res) => {
|
||
// let dataAll = res.result;
|
||
// console.log(dataAll, "dataAlldataAlldataAlldataAlldataAll ");
|
||
|
||
// let frequency = this.series[0].data;
|
||
// let weight = this.series[1].data;
|
||
|
||
// for (let i = 0; i < 12; i++) {
|
||
// let rest = dataAll.find((item) => item.date == i + 1);
|
||
// if (rest) {
|
||
// frequency[i] = rest.plan;
|
||
// weight[i] = rest.actual;
|
||
// }
|
||
// }
|
||
// this.series[0].data = frequency;
|
||
// this.series[1].data = weight;
|
||
// this.isblock = true;
|
||
// });
|
||
// }
|
||
// });
|
||
// },
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.typedata {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.containbox {
|
||
margin-top: 2%;
|
||
margin-left: 70%;
|
||
height: 20px;
|
||
line-height: 25px;
|
||
display: flex;
|
||
span {
|
||
margin-left: 15px;
|
||
margin-right: 5px;
|
||
font-size: 14px;
|
||
}
|
||
.typeName {
|
||
width: 75px;
|
||
height: 40px;
|
||
font-weight: 500;
|
||
line-height: 40px;
|
||
}
|
||
}
|
||
.dataImg {
|
||
width: 200px;
|
||
height: 200px;
|
||
margin: -360px 0 0 645px;
|
||
p {
|
||
margin: 6px 0 0 13px;
|
||
}
|
||
}
|
||
.myChart {
|
||
width: 100%;
|
||
height: 90%;
|
||
}
|
||
}
|
||
// .dataImg{
|
||
|
||
// margin: 80% 0px 0px -120px;
|
||
// p{
|
||
// margin: 6px 0 0 13px
|
||
// }
|
||
// }
|
||
|
||
::v-deep .el-input--suffix .el-input__inner {
|
||
background: transparent !important;
|
||
color: #fff !important;
|
||
border: 1px solid #66d3d8 !important ;
|
||
z-index: 999;
|
||
}
|
||
|
||
::v-deep .el-date-editor.el-input,
|
||
.el-date-editor.el-input__inner {
|
||
width: 160px;
|
||
}
|
||
</style>
|