|
|
@@ -10,29 +10,32 @@
|
|
|
<!-- <div class="topContain">-->
|
|
|
<div style="width: 100%;height: 100%;display: flex;">
|
|
|
<el-form :model="queryParams" :rules="searchRules" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="searchForm">
|
|
|
- <el-form-item label="行政区" prop="district">
|
|
|
- <el-select v-model="queryParams.district" placeholder="请选择行政区" clearable
|
|
|
- @change="queryParams.areaId = undefined;getAreaList(queryParams.district)"
|
|
|
- @clear="queryParams.areaId = undefined;areaList=[];
|
|
|
- queryParams.buildingId = undefined;buildingList=[];
|
|
|
- queryParams.unitId = undefined;unitList=[]">
|
|
|
- <el-option
|
|
|
- v-for="dict in dict.type.district"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="小区名称" prop="areaId" label-width="80px">
|
|
|
- <el-select v-model="queryParams.areaId" filterable clearable placeholder="请选择小区">
|
|
|
- <el-option
|
|
|
- v-for="item in areaList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
+ <!--<el-form-item label="行政区" prop="district">-->
|
|
|
+ <!--<el-select v-model="queryParams.district" placeholder="请选择行政区" clearable-->
|
|
|
+ <!--@change="queryParams.areaId = undefined;getAreaList(queryParams.district)"-->
|
|
|
+ <!--@clear="queryParams.areaId = undefined;areaList=[];-->
|
|
|
+ <!--queryParams.buildingId = undefined;buildingList=[];-->
|
|
|
+ <!--queryParams.unitId = undefined;unitList=[]">-->
|
|
|
+ <!--<el-option-->
|
|
|
+ <!--v-for="dict in dict.type.district"-->
|
|
|
+ <!--:key="dict.value"-->
|
|
|
+ <!--:label="dict.label"-->
|
|
|
+ <!--:value="dict.value"-->
|
|
|
+ <!--/>-->
|
|
|
+ <!--</el-select>-->
|
|
|
+ <!--</el-form-item>-->
|
|
|
+ <!--<el-form-item label="小区名称" prop="areaId" label-width="80px">-->
|
|
|
+ <!--<el-select v-model="queryParams.areaId" filterable clearable placeholder="请选择小区">-->
|
|
|
+ <!--<el-option-->
|
|
|
+ <!--v-for="item in areaList"-->
|
|
|
+ <!--:key="item.id"-->
|
|
|
+ <!--:label="item.name"-->
|
|
|
+ <!--:value="item.id">-->
|
|
|
+ <!--</el-option>-->
|
|
|
+ <!--</el-select>-->
|
|
|
+ <!--</el-form-item>-->
|
|
|
+ <el-form-item label="工程名称" prop="enginName">
|
|
|
+ <el-input v-model="queryParams.enginName" placeholder="请输入工程名称" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
<!--<el-form-item label="工程类型" prop="enginType">-->
|
|
|
<!--<el-select v-model="queryParams.enginType" placeholder="请选择工程类型" clearable-->
|
|
|
@@ -82,17 +85,17 @@
|
|
|
></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="规格" prop="realitySpecifications"label-width="45px">
|
|
|
- <el-select v-model="queryParams.realitySpecifications" filterable clearable placeholder="请选择规格"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in EnginSpecificationsList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <!--<el-form-item label="规格" prop="realitySpecifications"label-width="45px">-->
|
|
|
+ <!--<el-select v-model="queryParams.realitySpecifications" filterable clearable placeholder="请选择规格"-->
|
|
|
+ <!-->-->
|
|
|
+ <!--<el-option-->
|
|
|
+ <!--v-for="item in EnginSpecificationsList"-->
|
|
|
+ <!--:key="item.id"-->
|
|
|
+ <!--:label="item.name"-->
|
|
|
+ <!--:value="item.id">-->
|
|
|
+ <!--</el-option>-->
|
|
|
+ <!--</el-select>-->
|
|
|
+ <!--</el-form-item>-->
|
|
|
<!-- <el-form-item label="工程周期" prop="enginCycle" label-width="80px">-->
|
|
|
<!-- <el-select v-model="queryParams.enginCycle" filterable clearable placeholder="请选择规格"-->
|
|
|
<!-- >-->
|
|
|
@@ -119,6 +122,7 @@
|
|
|
|
|
|
</div>
|
|
|
<el-table
|
|
|
+ v-if="false"
|
|
|
class="materialStatisticsTable"
|
|
|
:data="AreaCompletionInformationList"
|
|
|
style="width: 100%">
|
|
|
@@ -158,43 +162,42 @@
|
|
|
:data="tableData"
|
|
|
style="width: 100%">
|
|
|
<el-table-column
|
|
|
- prop="areaName"
|
|
|
- label="小区"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="enginType"
|
|
|
- label="工程类型">
|
|
|
+ prop="enginName"
|
|
|
+ label="工程名称">
|
|
|
</el-table-column>
|
|
|
+ <!--<el-table-column-->
|
|
|
+ <!--prop="enginType"-->
|
|
|
+ <!--label="工程类型">-->
|
|
|
+ <!--</el-table-column>-->
|
|
|
<el-table-column
|
|
|
prop="enginClassification"
|
|
|
label="工程分类">
|
|
|
</el-table-column>
|
|
|
- <!-- <el-table-column-->
|
|
|
- <!-- prop="nodeType"-->
|
|
|
- <!-- label="工程步骤">-->
|
|
|
- <!-- </el-table-column>-->
|
|
|
<el-table-column
|
|
|
- prop="realityQuality"
|
|
|
- label="材质"
|
|
|
- >
|
|
|
+ prop="actualityPE"
|
|
|
+ label="PE实际用料">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="realitySpecifications"
|
|
|
- label="规格"
|
|
|
- >
|
|
|
+ prop="anticipationPE"
|
|
|
+ label="PE预计用料">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="estimatedSize"
|
|
|
- label="预计用料">
|
|
|
+ prop="percentagePE"
|
|
|
+ label="PE用料占比">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="realitySize"
|
|
|
- label="实际用料">
|
|
|
+ prop="actualityIron"
|
|
|
+ label="钢材实际用料">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="anticipationIron"
|
|
|
+ label="钢材预计用料">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="percentageIron"
|
|
|
+ label="钢材用料占比">
|
|
|
</el-table-column>
|
|
|
-
|
|
|
</el-table>
|
|
|
-
|
|
|
</div>
|
|
|
<div id="zhuzhuangtu" style="width: 100%;height: 75vh"></div>
|
|
|
</div>
|
|
|
@@ -362,38 +365,119 @@
|
|
|
}
|
|
|
return longestLength;
|
|
|
},
|
|
|
- getList()
|
|
|
- {
|
|
|
-
|
|
|
+ getList(){
|
|
|
+ this.queryParams.enginSort = this.queryParams.enginClassification; // 工程分类
|
|
|
+ this.queryParams.materialStatistics = this.queryParams.realityQuality; // 工程材质
|
|
|
+ console.log('this.queryParams=',this.queryParams)
|
|
|
materialStatistics(this.queryParams).then(res=>{
|
|
|
this.tableData=res.data;
|
|
|
let seriesData = [];
|
|
|
+ let names = [];
|
|
|
+ let dataG = [];
|
|
|
+ let dataGP = [];
|
|
|
+ let dataPE = [];
|
|
|
+ let dataPEP = [];
|
|
|
+
|
|
|
for (let item in res.data) {
|
|
|
- seriesData.push({
|
|
|
- name: res.data[item].realityQuality+'\n'+res.data[item].realitySpecifications,
|
|
|
- type: 'bar',
|
|
|
- stack: res.data[item].realityQuality,
|
|
|
- label:{
|
|
|
- show:true,
|
|
|
- formatter:'{a}\n{c}米'
|
|
|
- },
|
|
|
- data: [res.data[item].realitySize]
|
|
|
- },);
|
|
|
+ names.push(res.data[item].enginName)
|
|
|
+ dataG.push(res.data[item].actualityIron)
|
|
|
+ dataGP.push(res.data[item].percentageIron.replace("%",""))
|
|
|
+ dataPE.push(res.data[item].actualityPE)
|
|
|
+ dataPEP.push(res.data[item].percentagePE.replace("%",""))
|
|
|
}
|
|
|
+ const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
|
|
let option = {
|
|
|
+ color: colors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left:'10%',
|
|
|
+ right: '10%'
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: { show: true }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['Evaporation', 'Precipitation', 'Temperature']
|
|
|
+ },
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
- data: ['A'],
|
|
|
- show:false,
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ // prettier-ignore
|
|
|
+ // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
|
|
+ data: names
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
- type: 'value'
|
|
|
+ type: 'value',
|
|
|
+ name: '数量',
|
|
|
+ position: 'right',
|
|
|
+ alignTicks: true,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '占比',
|
|
|
+ position: 'left',
|
|
|
+ alignTicks: true,
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: colors[2]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ }
|
|
|
}
|
|
|
],
|
|
|
- series: seriesData
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '钢材实际用料',
|
|
|
+ type: 'bar',
|
|
|
+ // data: [
|
|
|
+ // 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
|
|
+ // ]
|
|
|
+ data: dataG
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '钢材用料占比',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ // data: [
|
|
|
+ // 20,10,50,60
|
|
|
+ // ]
|
|
|
+ data: dataGP,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'PE实际用料',
|
|
|
+ type: 'bar',
|
|
|
+ data: dataPE
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'PE用料占比',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: dataPEP }
|
|
|
+ ]
|
|
|
};
|
|
|
|
|
|
var myChart = echarts.init(document.getElementById('zhuzhuangtu'));
|
|
|
@@ -412,6 +496,7 @@
|
|
|
{
|
|
|
getEnginMaterialQualityList().then(res=>{
|
|
|
this.EnginMaterialQualityList=res.data
|
|
|
+ this.getList();
|
|
|
})
|
|
|
},
|
|
|
getEnginSpecificationsList(materId)
|
|
|
@@ -447,6 +532,7 @@
|
|
|
this.AreaCompletionInformationList=[]
|
|
|
this.tableData=[]
|
|
|
//this.handleQuery();
|
|
|
+ this.getList();
|
|
|
},
|
|
|
getAreaList(district) {
|
|
|
if (district === undefined || district == null || district === '')
|
wangzhe