From 7d67e0f2efa4f1bd729e16355b95de9765fa2919 Mon Sep 17 00:00:00 2001
From: "lj7788@126.com" <lj7788@126.com>
Date: Fri, 18 Jul 2025 18:25:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=8F=91=E6=9D=90=E6=96=99=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yanzhu-bigscreen/src/api/machmater.js         |  23 +-
 .../src/components/consumeChart.vue           | 221 ++++++++
 .../components/manyBarChart.vue               |   2 +-
 .../machmater/components/appFormDialog.vue    | 384 ++++++++++++++
 .../views/machmater/components/manyChart.vue  |   4 +-
 .../src/views/machmater/materialManage.vue    | 477 +++++++++++++++++-
 .../bigscreen/MachMaterController.java        |  44 ++
 7 files changed, 1146 insertions(+), 9 deletions(-)
 create mode 100644 yanzhu-bigscreen/src/components/consumeChart.vue
 rename yanzhu-bigscreen/src/{views/machmater => }/components/manyBarChart.vue (99%)
 create mode 100644 yanzhu-bigscreen/src/views/machmater/components/appFormDialog.vue

diff --git a/yanzhu-bigscreen/src/api/machmater.js b/yanzhu-bigscreen/src/api/machmater.js
index ee0acdbb..15630515 100644
--- a/yanzhu-bigscreen/src/api/machmater.js
+++ b/yanzhu-bigscreen/src/api/machmater.js
@@ -211,6 +211,24 @@ const materGetConcreteOrderDetailsInfoService=data=>{
     })
 }
 
+//材料销号制-工单运输信息
+const materGetConcreteOrderMSSelectService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetConcreteOrderMSSelectService',
+        method: 'get',
+        params: data
+    })
+}
+
+//材料销号制-工单人员信息
+const materGetFlowInfo2LogInfoByBusibessIdPageService=data=>{
+    return request({
+        url: '/manage/bgscreen/machMater/materGetFlowInfo2LogInfoByBusibessIdPageService',
+        method: 'get',
+        params: data
+    })
+}
+
 export default{
     machGetManageQuota,
     machGetEquipmentOverview,
@@ -231,5 +249,8 @@ export default{
     materGetProjectChaoHaoStatisticsRPTService,
     materGetReportConcreteExceedReasonService,
     materGetReportConcreteExceedMaterielTopService,
-    materGetConcreteOrderDetailsInfoService
+    materGetConcreteOrderDetailsInfoService,
+    materGetConcreteOrderMSSelectService,
+    materGetFlowInfo2LogInfoByBusibessIdPageService
+
 }
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/components/consumeChart.vue b/yanzhu-bigscreen/src/components/consumeChart.vue
new file mode 100644
index 00000000..23a115ae
--- /dev/null
+++ b/yanzhu-bigscreen/src/components/consumeChart.vue
@@ -0,0 +1,221 @@
+<template>
+    <div style="width:100%;height:100%" ref="chart"> </div>
+</template>
+
+<script>
+export default {
+    props: {
+        width: {
+            type: Number,
+            default: 100,
+        },
+        dataList: {
+            type: [Array, Object],
+        }
+    },
+    data() {
+        return {
+            option: {}
+        }
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        init() {
+            this.getChartData()
+        },
+        //分类及工时情况
+        getChartData() {
+            var chChartBar = echarts.init(this.$refs.chart);
+            this.echartBar(chChartBar, this.dataList || [])
+        },
+        echartBar(chChart, chartData) {
+            let newPromise = new Promise((resolve) => {
+                resolve()
+            })
+            //然后异步执行echarts的初始化函数
+            newPromise.then(() => {
+
+                let is1K = this.$dpi() == "1K";
+                let is2K = this.$dpi() == "2K";
+                var value = [];
+                var prop = [];
+                var text = [];
+                var zero = []
+                var bgd = []
+                var total = 0;
+                for (let i = chartData.length - 1; i >= 0; i--) {
+                    total += chartData[i].value;
+                    value.push(chartData[i].value)
+                    prop.push(chartData[i].prop)
+                    text.push(chartData[i].text)
+                    bgd.push(100)
+                    zero.push(0)
+                }
+
+
+                var data = []
+                var data_all = new Array(prop.length)
+                for (let i = 0; i < prop.length; i++) {
+                    let tmp = new Array(prop.length).fill(0)
+                    tmp[i] = prop[i]
+                    data.push(tmp)
+                    let tmp_all = 0
+
+                    for (let j = i; j < prop.length; j++) {
+                        tmp_all += prop[j];
+                    }
+                    data_all[i] = tmp_all.toFixed(1);
+                }
+
+                data_all.splice(0, 1)
+                data_all.push(0)
+
+                var series = [
+                    //背景色--------------------我是分割线君------------------------------//
+                    {
+                        show: true,
+                        type: 'bar',
+                        barGap: '-100%',
+                        barWidth:  is1K ? 6 : is2K ? 8 : 10, //统计条宽度
+                        itemStyle: {
+                            normal: {
+                                color: 'rgba(27, 61, 133,0.5)',
+                            },
+
+                        },
+                        z: 1,
+                        data: bgd
+                    },
+                    //数据条--------------------我是分割线君------------------------------//
+                    {
+                        show: true,
+                        type: 'bar',
+                        xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
+                        barGap: '-100%',
+                        barWidth: is1K ? 6 : is2K ? 8 : 10, //统计条宽度
+                        itemStyle: {
+                            normal: {
+                                color: 'rgba(22,203,115,0.05)'
+                            },
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                //label 的position位置可以是top bottom left,right,也可以是固定值
+                                //在这里需要上下统一对齐,所以用固定值
+                                position: [0, is1K ? -25 : is2K ? -30 : -40],
+                                rich: { //富文本
+                                    prop: { //自定义颜色
+                                        color: '#c6d9fa',
+                                        fontSize: is1K ? 16 : is2K ? 18 : 28,
+                                    },
+                                    index: {
+                                        color: '#fcbc02',
+                                        fontStyle: 'italic',
+                                        padding: [0, 0, 0, 5],
+                                        fontSize: is1K ? 14 : is2K ? 16 : 20,
+                                    },
+                                    name: {
+                                        width: this.width,
+                                        color: '#c6d9fa',
+                                        padding: [0, 0, 0, 10],
+                                        fontSize: is1K ? 16 : is2K ? 18 : 28,
+                                    },
+                                    color: {
+                                        color: '#8ca2be',
+                                        fontSize: is1K ? 14 : is2K ? 16 : 20,
+                                    },
+                                    arrow: {
+                                        width: is1K ? 12 : is2K ? 16 : 18,
+                                        height: is1K ? 8 : is2K ? 10 : 12,
+                                        backgroundColor: {
+                                            image: "/cdn/images/WEB_2B7C06210CD44D55BFEE6205A35DE4A7.png",
+                                        },
+                                    },
+
+                                },
+                                formatter: function (data) {
+                                    //富文本固定格式{colorName|这里填你想要写的内容}
+                                    return '{arrow|}{index|No.' + (chartData.length - data.dataIndex) + '}{name|' + text[data.dataIndex] + '}{prop|' + prop[data.dataIndex] + '} {color| %}';
+                                },
+                            }
+                        },
+                        data: value
+                    },
+                ]
+                for (let i = 0; i < data.length; i++) {
+                    series.push({
+                        type: "bar",
+                        barWidth:  is1K ? 6 : is2K ? 8 : 10,
+                        stack: "总",
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#41adf5",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#175eac",
+                                    },
+                                ]),
+                                barBorderRadius: [5, 5, 5, 5],
+                            },
+                        },
+                        data: data[i]
+                    })
+                }
+
+                this.option = {
+                    grid: {
+                        left: '2%',
+                        right: '2%',
+                        bottom: '-8%',
+                        top: '3%',
+                        containLabel: true
+                    },
+                    yAxis: {
+                        type: 'category',
+                        axisLabel: {
+                            show: false, //让Y轴数据不显示
+                        },
+                        itemStyle: {
+
+                        },
+                        axisTick: {
+                            show: false, //隐藏Y轴刻度
+                        },
+                        axisLine: {
+                            show: false, //隐藏Y轴线段
+                        },
+                        data: text,
+                    },
+
+                    xAxis: [{
+                        show: false,
+                    },
+                    //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
+                    {
+                        show: false,
+                    }
+                    ],
+                    series: series
+                };
+                console.log(series,JSON.stringify(this.option) )
+                chChart.setOption(this.option);
+                window.onresize = chChart.resize;
+            })
+        },
+    },
+    watch: {
+        dataList: function () {
+            this.init()
+        }
+    }
+}
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/views/machmater/components/manyBarChart.vue b/yanzhu-bigscreen/src/components/manyBarChart.vue
similarity index 99%
rename from yanzhu-bigscreen/src/views/machmater/components/manyBarChart.vue
rename to yanzhu-bigscreen/src/components/manyBarChart.vue
index 491cec7f..5338f1af 100644
--- a/yanzhu-bigscreen/src/views/machmater/components/manyBarChart.vue
+++ b/yanzhu-bigscreen/src/components/manyBarChart.vue
@@ -221,7 +221,7 @@ export default {
         },
     },
     watch: {
-        data: function () {
+        dataList: function () {
             this.init()
         }
     }
diff --git a/yanzhu-bigscreen/src/views/machmater/components/appFormDialog.vue b/yanzhu-bigscreen/src/views/machmater/components/appFormDialog.vue
new file mode 100644
index 00000000..6f53ebf1
--- /dev/null
+++ b/yanzhu-bigscreen/src/views/machmater/components/appFormDialog.vue
@@ -0,0 +1,384 @@
+<template>
+    <MyDialog v-if="show" v-model="show" width="60vw" height="65vh" class="app-form-dlg">
+        <template slot="title">
+            {{ title }}
+        </template>
+
+        <div class="popup-project-introduction-details" v-loading="loading">
+            <div class="popup-xhz-title">
+                <table>
+                    <tr>
+                        <td >项目名称：</td>
+                        <td>{{ applyOrder.projectName }}</td>
+                        <td >领料日期：</td>
+                        <td>{{ applyOrder.addTime }}</td>
+                    </tr>
+                    <tr>
+                        <td>申领单类型：</td>
+                        <td>{{ applyOrder.applyTypeName }}</td>
+                        <td>用料单位：</td>
+                        <td>{{ applyOrder.labourName }}</td>
+                    </tr>
+                    <tr>
+                        <td>工号全称：</td>
+                        <td>{{ applyOrder.applyName }}</td>
+                        <td>拌和站名称：</td>
+                        <td>{{ applyOrder.makerName }}</td>
+                    </tr>
+                    <tr v-if="applyOrder.applyName == '56bf890f465311ebba7b7cd30aeb749e'">
+                        <td>超耗类型：</td>
+                        <td>{{ applyOrder.causeType }}</td>
+                        <td>具体原因：</td>
+                        <td>{{ applyOrder.causeNote }}</td>
+                    </tr>
+                </table>
+            </div>
+            <div class="xhz-quality-table">
+                <el-table :data="concreteTableData.data" style="width: 100%" :max-height="table1Height">
+                    <el-table-column v-for="(item, idx) in concreteTableData.label" :key="idx" :width="item.width"
+                        :label="item.label">
+                        <template slot-scope="scope">
+                            <div :style="{ 'color': item.color }">{{ scope.row[item.data] }}</div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="xhz-quality-table">
+                <el-table :data="concretePersonTableData.data" style="width: 100%" :max-height="table2Height">
+                    <el-table-column v-for="(item, idx) in concretePersonTableData.label" :key="idx" :width="item.width"
+                        :label="item.label">
+                        <template slot-scope="scope">
+                            <div :style="{ 'color': scope.row[item.color] }">{{ scope.row[item.data] }}</div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="xhz-quality-table">
+                <el-table :data="concretePersonTableDataCarList.data" style="width: 100%" max-height="136">
+                    <el-table-column v-for="(item, idx) in concretePersonTableDataCarList.label" :key="idx"
+                        :width="item.width" :label="item.label">
+                        <template slot-scope="scope">
+                            <div :style="{ 'color': scope.row[item.color] }">{{ scope.row[item.data] }}</div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+
+    </MyDialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dpi: "",
+            show: false,
+            title: "混凝土申请单",
+            row: null,
+            projectId: "",
+            loading: true,
+            table1Height: 181,
+            table2Height: 226,
+            applyOrder: {
+                projectName: "",
+                addTime: "",
+                applyTypeName: "",
+                labourName: "",
+                applyName: "",
+                makerName: "",
+                causeType: "",
+                causeNote: ""
+            },
+            concreteTableData: {
+                label: [
+                    {
+                        label: '材料名称',
+                        width: '',
+                        color: '',
+                        data: 'materName',
+                    },
+                    {
+                        label: '规格型号',
+                        width: '',
+                        color: '',
+                        data: 'materielModel',
+                    },
+                    {
+                        label: '材料单位',
+                        width: '',
+                        color: '',
+                        data: 'unit',
+                    },
+                    {
+                        label: '初始设计量',
+                        width: '',
+                        color: '',
+                        data: 'initialQuantity',
+                    },
+                    {
+                        label: '损耗系数(%)',
+                        width: '',
+                        color: '',
+                        data: 'planLossParam',
+                    },
+                    {
+                        label: '应耗量',
+                        width: '',
+                        color: '',
+                        data: 'applyQuantity',
+                    },
+                    {
+                        label: '申请量',
+                        width: '',
+                        color: '',
+                        data: 'actQuantity',
+                    },
+                    {
+                        label: '申请原因',
+                        width: '',
+                        color: '',
+                        data: 'causeNote',
+                    },
+                ],
+                data: []
+            },
+            concretePersonTableData: {
+                label: [
+                    {
+                        label: '流转公司',
+                        width: '',
+                        color: '',
+                        data: 'nodeName',
+                    },
+                    {
+                        label: '负责人',
+                        width: '',
+                        color: '',
+                        data: 'approvalUserName',
+                    },
+                    {
+                        label: '状态',
+                        width: '',
+                        color: 'color',
+                        data: 'approvalStatus',
+                    },
+                    {
+                        label: '审核时间',
+                        width: '',
+                        color: '',
+                        data: 'approvalTime',
+                    },
+                ],
+                data: []
+            },
+            concretePersonTableDataCarList: {
+                label: [
+                    {
+                        label: '发货时间',
+                        width: '',
+                        color: '',
+                        data: 'sendTime',
+                    },
+                    {
+                        label: '本车方量',
+                        width: '',
+                        color: '',
+                        data: 'bcfl',
+                    },
+                    {
+                        label: '车牌号',
+                        width: '',
+                        color: 'color',
+                        data: 'carNo',
+                    },
+                    {
+                        label: '载重（t)',
+                        width: '',
+                        color: '',
+                        data: 'load',
+                    },
+                    {
+                        label: '附件',
+                        width: '',
+                        color: '',
+                        data: 'files',
+                    },
+                ],
+                data: []
+            },
+        };
+    },
+    methods: {
+
+        showDialog(prjId, row) {
+            this.projectId = prjId;
+            this.row = row;
+            this.loading = true;
+            this.dpi = this.$dpi();
+            window.addEventListener("resize", () => {
+                if (this.dpi != this.$dpi()) {
+                    this.dpi = this.$dpi();
+                    this.resize();
+                }
+            });
+            this.resize();
+            this.show = true;
+            this.loadData();
+        },
+        resize() {
+            let is1K = this.$dpi() == "1K";
+            let is2K = this.$dpi() == "2K";
+            this.table1Height = is1K ? 181 : (is2K ? 181 : 181);
+            this.table2Height = is1K ? 136 : (is2K ? 226 : 442);
+        },
+        loadData() {
+            this.applyOrder = {
+                projectName: "",
+                addTime: "",
+                applyTypeName: "",
+                labourName: "",
+                applyName: "",
+                makerName: "",
+                causeType: "",
+                causeNote: ""
+            };
+            this.concreteTableData.data = [];
+            this.concretePersonTableData.data = [];
+            this.concretePersonTableDataCarList.data = []
+            let param = {
+                projectId: this.projectId,
+                initialId: this.row.initialId,
+                businessId: this.row.initialId
+            };
+            let ajaxs = [
+                this.$api.machMater.materGetConcreteOrderMSSelectService(param),
+                this.$api.machMater.materGetFlowInfo2LogInfoByBusibessIdPageService(param),
+            ];
+            Promise.all(ajaxs).then((res) => {
+                this.loading = false;
+                let result = res[0].data;
+                if (result && result.code == "000000") {
+                    let materialDataTemp = []
+                    let data = result.data[0]
+                    let materialItem = {
+                        materName: data.materName,
+                        materielModel: data.materielModel,
+                        unit: '立方米',
+                        initialQuantity: data.initialQuantity,
+                        planLossParam: data.planLossParam,
+                        applyQuantity: data.applyQuantity,
+                        actQuantity: data.actQuantity,
+                        causeNote: data.causeNote ? data.causeNote : '',
+                    }
+                    materialDataTemp.push(materialItem)
+                    this.concreteTableData.data = materialDataTemp
+                    this.applyOrder = {
+                        projectName: data.projectName,
+                        addTime: data.addTime,
+                        applyTypeName: data.applyTypeName,
+                        labourName: data.labourName,
+                        applyName: data.applyName,
+                        makerName: data.makerName,
+                        causeType: data.causeTypeName,
+                        causeNote: data.causeNote
+                    }
+                }
+                result = res[1].data;
+                if (result && result.code == "000000") {
+                    let data = result.data || []
+                    let tempApprovalData = []
+                    this.concretePersonTableDataCarList.data = []
+                    data.forEach((item, index) => {
+                        tempApprovalData.push({
+                            nodeName: item.nodeName,
+                            approvalUserName: item.approvalUserName,
+                            approvalStatus: item.approvalUserName == '免审批' ? '免审批' : item.approvalStatus == 1 ? '审批通过' : item.approvalStatus == 2 ? '审批驳回' : item.approvalStatus == 4 ? '自主撤单' : '未审批',
+                            approvalTime: this.getApprovalTime(data, index),
+                            color: item.approvalUserName == '免审批' ? '#0ebd82' : item.approvalStatus == 1 ? '#0ebd82' : item.approvalStatus == 2 ? '#ff0000' : '#cccccc'
+                        })
+
+                        for (let i = 0; i < item.receipt; i++) {
+                            this.concretePersonTableDataCarList.data.push({
+                                "sendTime": item.addTime,
+                                "bcfl": "8",
+                                "carNo": this.carList[Math.floor(Math.random() * (19)) + 1],
+                                "load": "19.9",
+                                "files": ""
+                            })
+                        }
+                    })
+                    this.concretePersonTableData.data = tempApprovalData
+
+
+                }
+
+            });
+        },
+        getApprovalTime(data, index) {
+            if (data[index].approvalUserName != '免审批') {
+                return data[index].approvalTime
+            } else {
+                for (let i = 0; i < data.length; i++) {
+                    if (data[index - i].approvalUserName != '免审批') {
+                        return data[index - i].approvalTime
+                    }
+                }
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.app-form-dlg {
+    .popup-project-introduction-min {
+        transform: translateY(20%);
+        min-width: 960px;
+        min-height: 550px;
+
+        .popup-project-introduction-details {
+            padding: 0px;
+
+
+        }
+    }
+
+
+}
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+    .machine-info-dlg {
+        .popup-project-introduction-min {
+            .popup-project-introduction-details {
+                * {
+                    font-size: 24px;
+                    line-height: 40px;
+                }
+            }
+
+
+        }
+    }
+}
+
+@media (min-width: 2561px) {
+    .app-form-dlg {
+        .popup-project-introduction-min {
+            .popup-project-introduction-details {
+                * {
+                    font-size: 32px;
+                    line-height: 60px;
+                }
+
+                .popup-xhz-title {
+                    td:nth-child(odd) {
+                        width: 200px;
+                    }
+                }
+
+            }
+        }
+    }
+}
+</style>
diff --git a/yanzhu-bigscreen/src/views/machmater/components/manyChart.vue b/yanzhu-bigscreen/src/views/machmater/components/manyChart.vue
index a003e9bb..1cd9082c 100644
--- a/yanzhu-bigscreen/src/views/machmater/components/manyChart.vue
+++ b/yanzhu-bigscreen/src/views/machmater/components/manyChart.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import manyBarChart from './manyBarChart.vue'
+import manyBarChart from '../../../components/manyBarChart.vue'
 export default {
     components: {
         'material-many-bar-chart': manyBarChart
@@ -99,7 +99,7 @@ export default {
     .many-chart-text {
         font-size: 18px;
         position: relative;
-        top: -10px;
+        top: -4px;
     }
 }
 </style>
diff --git a/yanzhu-bigscreen/src/views/machmater/materialManage.vue b/yanzhu-bigscreen/src/views/machmater/materialManage.vue
index c0ee2302..681a1e20 100644
--- a/yanzhu-bigscreen/src/views/machmater/materialManage.vue
+++ b/yanzhu-bigscreen/src/views/machmater/materialManage.vue
@@ -3,7 +3,8 @@
     <el-col :span="18" class="h100">
       <module-one-2-3 label="近期工单" class="h66 order-data-module">
         <div class="element-table-ranking" :key="orderDataKey">
-          <el-table :data="todaysWorkOrderData.data" class="scroll mytable" :height="orderDataHeight">
+          <el-table :data="todaysWorkOrderData.data" class="scroll mytable" :height="orderDataHeight"
+            @row-click="onInspectionPopup">
             <el-table-column v-for="(st, idx) in todaysWorkOrderData.labels" :prop="st.data" :key="idx"
               :width="st.width" :label="st.label" show-overflow-tooltip></el-table-column>
           </el-table>
@@ -42,8 +43,88 @@
     </el-col>
 
     <el-col :span="6" class="h100">
-      <module-one-3-1 label="超耗情况" class="labor-base h100" style="height: cacl(100% - 20px)"></module-one-3-1>
+      <module-one-3-1 label="超耗情况" class="labor-base h100" style="height: cacl(100% - 20px)">
+        <div class="xhz-device-data">
+          <el-row>
+            <el-col :span="12">
+              <div class="xhz-device-data-min">
+                <div class="survey_content">
+                  <div class="survey_content_img xhz-education_bgd">
+                    <img :src="'./images/education_icon_1.png'">
+                  </div>
+                </div>
+                <div class="xhz-current-value-data">
+                  <div>销号设计量</div>
+                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhSjl }}</span>{{ unit }}</p>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="xhz-device-data-min">
+                <div class="survey_content">
+                  <div class="survey_content_img xhz-education_bgd">
+                    <img :src="'./images/education_icon_2.png'">
+                  </div>
+                </div>
+                <div class="xhz-current-value-data">
+                  <div>销号实耗</div>
+                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhshl }}</span>{{ unit }}</p>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="xhz-device-data-min">
+                <div class="survey_content">
+                  <div class="survey_content_img xhz-education_bgd">
+                    <img :src="'./images/education_icon_3.png'">
+                  </div>
+                </div>
+                <div class="xhz-current-value-data">
+                  <div>节超量</div>
+                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhJcl }}</span>{{ unit }}</p>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <div class="xhz-device-data-min">
+                <div class="survey_content">
+                  <div class="survey_content_img xhz-education_bgd">
+                    <img :src="'./images/education_icon_4.png'">
+                  </div>
+                </div>
+                <div class="xhz-current-value-data">
+                  <div>节超率</div>
+                  <p><span class="led-number">{{ finishGhBaseUseTired.finishGhJclRate }}</span> %</p>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+
+        <div class="excess-rate" :key="excessRateDataKey">
+          <div class="rank-chart" style="padding: 15px;">
+            <div class="rank-chart-title xhz-rank-chart-title">超耗率TOP5材料</div>
+            <div class="consume-chart" :style="{ height: erHeight * excessRateData.length + 'px' }">
+              <consume-chart :dataList="excessRateData" :width="excessNameWidth"></consume-chart>
+            </div>
+          </div>
+        </div>
+
+
+        <div class="excess-reason" :key="excessReasonKey">
+          <div class="rank-chart">
+            <div class="rank-chart-title xhz-rank-chart-title">超耗原因分析 <span>混凝土（m³）</span></div>
+          </div>
+          <div class="excess-chart">
+            <project-overview-chart :htmlShow="true" :key="'ai1' + excessReasonKey" :sp="''" :fn="changeChart3"
+              :maintitle="excessTitle" :legend-opt="excessReasonLegendOpt" :typedata="typEreasonData" text="超耗总量"
+              :height="chart3Height"></project-overview-chart>
+          </div>
+        </div>
+
+      </module-one-3-1>
     </el-col>
+    <app-form-dialog ref="appFormDialog"></app-form-dialog>
   </div>
 </template>
 
@@ -51,15 +132,21 @@
 import debounce from "lodash.debounce";
 import moreButton from "./components/moreButton.vue";
 import manyChart from "./components/manyChart.vue";
+import consumeChart from "@/components/consumeChart.vue";
+import appFormDialog from "./components/appFormDialog.vue";
+
 export default {
   components: {
     moreButton,
     manyChart,
+    consumeChart,
+    appFormDialog,
   },
   data() {
     return {
       dpi: "",
       selProject: null,
+      unit: 'm³', //混凝土:m³,钢筋:t
       //今日工单
       todaysWorkOrderData: {
         labels: [],
@@ -78,6 +165,25 @@ export default {
       moreData: [],
       workerOrderKey: 0,
       workerOrderLoading: false,
+      //项目开累应用情况
+      finishGhBaseUseTired: {
+        finishGhSjl: 0,
+        finishGhshl: 0,
+        finishGhJcl: 0,
+        finishGhJclRate: 0.0
+      },
+      //超耗情况  超耗率TOP5材料
+      excessRateData: [],
+      excessRateDataKey: 0,
+      excessNameWidth: 100,
+      erHeight: 30,
+      //超耗情况  超耗原因分析
+      typEreasonData: [],
+      excessReasonKey: 100000,
+      excessTitle: 100,
+      excessReasonLegendOpt: {},
+      chart3Height: 300,
+
     };
   },
   mounted() {
@@ -110,18 +216,191 @@ export default {
       this.chartKey++;
       this.orderDataKey++;
       this.workerOrderKey++;
+      this.excessNameWidth = is1K ? 250 : is2K ? 150 : 650;
+      this.excessRateDataKey++;
+      this.excessReasonKey++;
+      this.chart3Height = is1K ? 250 : is2K ? 400 : 600;
+      this.erHeight = is1K ? 20 : is2K ? 30 : 150;
+
     },
     init() {
+
       if (!this.selProject) {
         return;
       }
-
+      this.initExcessReasonLegendOpt();
       //今日工单
       this.loadTodaysWorkOrderData();
 
       //获取工号信息
       this.loadWorkOrderData();
 
+      //获取用量情况统计服务
+      this.getProjectChaoHaoStatisticsRPTService();
+
+      //超耗率TOP5材料
+      this.getReportExceedMaterielTopService();
+
+      //超耗原因分析
+      this.getReportConcreteExceedReasonService();
+
+    },
+    onInspectionPopup(row) {
+      console.log(row)
+
+      this.$refs.appFormDialog.showDialog(this.selProject.id, row)
+    },
+    initExcessReasonLegendOpt() {
+      let is1K = this.$dpi() == "1K";
+      let is2K = this.$dpi() == "2K";
+      this.excessReasonLegendOpt = {
+        icon: "rect",
+        orient: "vertical",
+        itemWidth: "50%",
+
+        itemWidth: 20,
+        itemGap: 20,
+        itemHeight: 20,
+        type: "scroll",
+        pageTextStyle: {
+          color: "#c3dbfd",
+          fontSize: is1K ? 12 : is2K ? 16 : 24,
+        },
+        scroll: {
+          y: is1K ? 300 : is2K ? 500 : 600,
+          bar: {
+            show: true,
+            width: 5,
+            height: 10,
+          },
+        },
+        textStyle: {
+          padding: [0, 0, 0, 0],
+          fontSize: is1K ? 12 : is2K ? 16 : 24,
+          color: "#c3dbfd",
+          align: "center",
+          rich: {
+            name: {
+              fontSize: is1K ? 12 : is2K ? 16 : 24,
+              color: "#c3dbfd",
+              padding: [5, 2, 5, 2],
+            },
+            percent: {
+              fontSize: is1K ? 12 : is2K ? 16 : 24,
+              color: "#4676FD",
+              padding: [0, 2, 0, 2],
+            },
+          },
+        },
+      };
+    },
+    changeChart3(opt) {
+      if (this.$dpi() == "1K") {
+        opt.legend[0].left = 200;
+        return opt;
+      } else if (this.$dpi() == "2K") {
+        opt.legend[0].left = 290;
+        return opt;
+      } else {
+        opt.legend[0].left = 500;
+        return opt;
+      }
+    },
+    getReportConcreteExceedReasonService() {
+      this.$api.machMater.materGetReportConcreteExceedReasonService({
+        projectId: this.selProject.id
+      }).then(d => {
+        this.excessTitle = 0;
+        let result = d.data;
+        if (result && result.code == '000000' && result.data) {
+          var temp = {}
+          let datas2 = []
+          for (let i = 0; i < result.data.length; i++) {
+            if (result.data[i].causeName.indexOf('其他') != -1) {
+              for (let k in result.data[i]) {
+                temp[k] = result.data[i][k]
+              }
+              temp.name = "其它原因"
+              temp.value = Number(temp.chActQuantity).toFixed(1);
+              result.data.splice(i, 1)
+              break;
+            }
+          }
+
+          for (let i = 0; i < result.data.length; i++) {
+            if (i < 5) {
+              result.data[i].value = Number(result.data[i].chActQuantity).toFixed(1);
+              result.data[i].name = result.data[i].causeName;
+              datas2.push(
+                result.data[i]
+              )
+            } else {
+              temp.value = Number(Number(temp.value) + Number(Number(result.data[i].chActQuantity).toFixed(1))).toFixed(1)
+            }
+          }
+
+          datas2 = datas2.sort((next, prev) => prev.value - next.value)
+          if (Object.keys(temp).length > 0) {
+            datas2.push(temp)
+          }
+          this.typEreasonData = datas2;
+        }
+        this.typEreasonData.forEach(item => {
+          this.excessTitle += item.value * 1;
+        });
+        this.excessReasonKey++;
+        this.excessTitle = Number(this.excessTitle).toFixed(1);
+
+      });
+    },
+    getReportExceedMaterielTopService() {
+      this.$api.machMater.materGetReportConcreteExceedMaterielTopService({
+        projectId: this.selProject.id,
+        top: 5
+      }).then(d => {
+        let res = d.data;
+        if (res && res.code == '000000') {
+          let objs = res.data || [];
+          objs = objs;
+          this.excessRateData = objs.map((item, index) => {
+            return {
+              value: index + 1,
+              prop: parseFloat(parseFloat(item.chPer || "0").toFixed(1)),
+              text: item.materielName + '(' + item.materielModel + ')'
+            }
+          }).sort((a, b) => a.prop - b.prop);
+          this.excessRateDataKey++;
+          console.log("+++++>", this.excessRateData)
+        }
+      });
+    },
+    getProjectChaoHaoStatisticsRPTService() {
+      this.$api.machMater.materGetProjectChaoHaoStatisticsRPTService({
+        projectId: this.selProject.id,
+      }).then(d => {
+        let res = d.data;
+        this.finishGhBaseUseTired = {
+          finishGhSjl: 0,
+          finishGhshl: 0,
+          finishGhJcl: 0,
+          finishGhJclRate: 0.0
+        }
+
+        if (res && res.code == '000000' && res.data && res.data.length > 0) {
+          let tmp = res.data[0];
+          if (!tmp) {
+            return;
+          }
+          //完工工号设计量(混凝土)
+          this.finishGhBaseUseTired.finishGhSjl = parseFloat(tmp.concrete_finish_designtotal_not_loss).toFixed(1);
+          //完工工号实耗量(混凝土)
+          this.finishGhBaseUseTired.finishGhshl = parseFloat(tmp.concrete_real_consume).toFixed(1);
+          //完工工号节超量(混凝土)
+          this.finishGhBaseUseTired.finishGhJcl = parseFloat(tmp.concrete_deviation_not_loss).toFixed(1);
+          //完工工号节超率(混凝土)
+          this.finishGhBaseUseTired.finishGhJclRate = isNaN(parseFloat((tmp.concrete_deviation_not_loss / tmp.concrete_finish_designtotal_not_loss) * 100).toFixed(1)) ? '0.0' : parseFloat((tmp.concrete_deviation_not_loss / tmp.concrete_finish_designtotal_not_loss) * 100).toFixed(1);
+        }
+      });
     },
     //获取材料销号制混凝土楼号维度信息
     async getConcreteMaterialActQuantityBuildingNoInfoService(type) {
@@ -517,7 +796,7 @@ export default {
     }
 
     &.h33 {
-      height: calc(33% - 20px);
+      height: calc(33% - 11px);
     }
   }
 
@@ -567,6 +846,39 @@ export default {
     }
   }
 
+  .excess-rate {
+    height: 400px;
+
+    .rank-chart {
+      height: 100%;
+
+      .rank-chart-title {}
+
+      .consume-chart {
+        height: calc(100% - 40px);
+      }
+    }
+  }
+
+  .excess-reason {
+    .rank-chart {
+      .rank-chart-title {}
+    }
+
+    .excess-chart {
+      position: relative;
+      top: -10px;
+
+      .chart-gif,
+      .chart-text {
+        width: 120px;
+        height: 120px;
+        left: 44px;
+        top: 65px !important;
+      }
+    }
+  }
+
   @media (max-width: 1920px) {
     .order-data-module {
       .element-table-ranking {
@@ -583,5 +895,160 @@ export default {
       }
     }
   }
+
+  @media (min-width: 1921px) and (max-width: 2560px) {
+    .xhz-device-data {
+      .xhz-device-data-min {
+        .survey_content {
+          .xhz-education_bgd {
+            width: 110px;
+            height: 110px;
+            background-size: 90px 70px;
+
+            img {
+              width: 50px;
+              height: 50px;
+              margin-top: 25px
+            }
+          }
+        }
+
+        .xhz-current-value-data {
+          font-size: 24px;
+
+          .led-number {
+            font-size: 40px;
+          }
+        }
+      }
+    }
+
+    .excess-rate {
+      height: 520px;
+
+      .rank-chart {
+        height: 100%;
+
+        .rank-chart-title {
+          font-size: 24px;
+
+        }
+
+        .consume-chart {
+          height: calc(100% - 40px);
+        }
+      }
+    }
+
+    .excess-reason {
+      margin-top: 30px;
+
+      .rank-chart {
+        .rank-chart-title {
+          font-size: 24px;
+
+          span {
+            font-size: 16px;
+          }
+        }
+      }
+
+      .excess-chart {
+        position: relative;
+        top: -10px;
+
+        .chart-gif,
+        .chart-text {
+          width: 190px;
+          height: 190px;
+          left: 49px;
+          top: 106px !important;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 2561px) {
+    .xhz-device-data {
+      .xhz-device-data-min {
+        .survey_content {
+          .xhz-education_bgd {
+            width: 160px;
+            height: 160px;
+            background-size: 130px 110px;
+
+            img {
+              width: 70px;
+              height: 70px;
+              margin-top: 45px
+            }
+          }
+        }
+
+        .xhz-current-value-data {
+          font-size: 32px;
+
+          .led-number {
+            font-size: 50px;
+          }
+        }
+      }
+    }
+
+    .excess-rate {
+      height: 920px;
+
+      .rank-chart {
+        height: 100%;
+
+        .rank-chart-title {
+          font-size: 32px;
+          height: 80px;
+        }
+
+        .consume-chart {
+          height: calc(100% - 40px);
+        }
+      }
+    }
+
+    .excess-reason {
+      margin-top: 60px;
+
+      .rank-chart {
+        .rank-chart-title {
+          font-size: 32px;
+          height: 80px;
+          line-height: 80px;
+
+          span {
+            font-size: 24px;
+          }
+        }
+      }
+
+      .excess-chart {
+        position: relative;
+        top: -30px;
+
+        .chart-gif,
+        .chart-text {
+          width: 290px;
+          height: 290px;
+          left: 78px;
+          top: 155px !important;
+
+          .chart-text-title {
+            font-size: 48px;
+          }
+
+          .chart-text-sub-title {
+            font-size: 28px;
+          }
+        }
+      }
+    }
+
+  }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java b/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java
index df367dff..15479949 100644
--- a/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java
+++ b/yanzhu-modules/yanzhu-manage/src/main/java/com/yanzhu/manage/controller/bigscreen/MachMaterController.java
@@ -393,4 +393,48 @@ public class MachMaterController extends BaseController {
         return AjaxResult.success(JSONObject.parseObject(result));
     }
 
+
+    /**
+     * 材料销号制-工单运输信息
+     */
+    @GetMapping("/materGetConcreteOrderMSSelectService")
+    public AjaxResult materGetConcreteOrderMSSelectService(Long projectId, String initialId, String businessId) throws Exception {
+        Map<String, Object> map = getConfig(projectId, "mater");
+        String url = map.get("url").toString();
+        url += "/MklBaseController/getService";
+        JSONObject paramJson = (JSONObject) map.get("obj");
+        if (StringUtils.isNotEmpty(initialId)) {
+            paramJson.put("initialId", initialId);
+        }
+        if (StringUtils.isNotEmpty(businessId)) {
+            paramJson.put("businessId", businessId);
+        }
+        paramJson.put("service", "getConcreteOrderMSSelectService");
+        HttpUtils httpUtils = new HttpUtils();
+
+        String result = httpUtils.sendGet(url, HttpUtils.jsonToGetParams(paramJson));
+        return AjaxResult.success(JSONObject.parseObject(result));
+    }
+
+    /**
+     * 材料销号制-工单人员信息
+     */
+    @GetMapping("/materGetFlowInfo2LogInfoByBusibessIdPageService")
+    public AjaxResult materGetFlowInfo2LogInfoByBusibessIdPageService(Long projectId, String initialId, String businessId) throws Exception {
+        Map<String, Object> map = getConfig(projectId, "mater");
+        String url = map.get("url").toString();
+        url += "/MklBaseController/getService";
+        JSONObject paramJson = (JSONObject) map.get("obj");
+        if (StringUtils.isNotEmpty(initialId)) {
+            paramJson.put("initialId", initialId);
+        }
+        if (StringUtils.isNotEmpty(businessId)) {
+            paramJson.put("businessId", businessId);
+        }
+        paramJson.put("service", "getFlowInfo2LogInfoByBusibessIdPageService");
+        HttpUtils httpUtils = new HttpUtils();
+
+        String result = httpUtils.sendGet(url, HttpUtils.jsonToGetParams(paramJson));
+        return AjaxResult.success(JSONObject.parseObject(result));
+    }
 }