地质所 沉降监测网建设项目
chenhuan
2024-05-28 67e03b179e1a257622cf2b5b21ec0610115c3bf9
javaweb-plus/javaweb-cms/src/main/resources/templates/geo/project/info.html
@@ -161,11 +161,49 @@
        </el-row>
        <el-row style="height: 200px;">
            <el-col :span="24">
                <el-card class="box-card  card-green" style="height: 320px;margin-top: 20px">
                    <div slot="header" class="clearfix">
                        <span>材料信息</span>
                    </div>
                <el-card class="box-card  card-green"  style="height: 320px;margin-top: 20px">
                        <div slot="header" class="clearfix">
                            <span>材料统计</span>
                        </div>
                        <el-col :span="10" style="height: 320px;">
                            <template>
                                <el-table :data="tubLogs" border size="small" style="width: 100%"
                                          :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"
                                          :row-class-name="tableRowClassName">
                                    <el-table-column prop="tubName" label="名称"></el-table-column>
                                    <el-table-column prop="inboundNumber" label="入库数量"></el-table-column>
                                    <el-table-column prop="outboundNumber" label="出库数量"></el-table-column>
                                    <el-table-column prop="unit" label="单位"></el-table-column>
                                </el-table>
                            </template>
                        </el-col>
                        <el-col :span="14" style="height: 320px;">
                            <div id="column-chart" style="height: 250px; width: 100%;"></div>
                        </el-col>
                </el-card>
<!--                <el-card class="box-card  card-green" style="height: 320px;margin-top: 20px">-->
<!--                    <div slot="header" class="clearfix">-->
<!--                        <span>材料信息</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <template>-->
<!--                            <el-table :data="tubLogs" border size="small" style="width: 100%"-->
<!--                                      :header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"-->
<!--                                      :row-class-name="tableRowClassName">-->
<!--                                &lt;!&ndash;                           <el-table-column prop="code" label="序号"></el-table-column>&ndash;&gt;-->
<!--                                <el-table-column prop="tubName" label="名称"></el-table-column>-->
<!--                                <el-table-column prop="inboundNumber" label="入库数量"></el-table-column>-->
<!--                                <el-table-column prop="outboundNumber" label="出库数量"></el-table-column>-->
<!--                                <el-table-column prop="unit" label="单位"></el-table-column>-->
<!--                            </el-table>-->
<!--                        </template>-->
<!--                    </div>-->
<!--                </el-card>-->
            </el-col>
        </el-row>
@@ -173,12 +211,14 @@
    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
   <script th:inline="javascript">
        var project =[[${project}]];
        var projectId=[[${projectId}]];
        var statusDatas = [[${@dict.getType('hole_status')}]];
        var prefix = ctx + "geo/hole";
        var prefix2 = ctx + "geo/TubLog";
        $(function() {
            var url = prefix + "/holelist?projectId=" + projectId;
@@ -187,10 +227,77 @@
                vm.holeData = res.data;
            });
            vm.project = project;
            console.log(vm.project);
            console.log(vm.holeData);
            tubLogs();
        });
        function tubLogs() {
            const chart = echarts.init(document.getElementById("column-chart"));
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '出库',
                        type: 'bar',
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '入库',
                        type: 'bar',
                        stack: 'Ad',
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                ]
            };
            let url = prefix2 + "/countTubLogDate/" + projectId;
            $.ajaxSettings.async = false;
            $.get(url,{},function(res){
                vm.tubLogs = res.data;
                res.data.forEach(function(value, index, array) {
                    const tubName = value.tubName;
                    const inboundNumber = value.inboundNumber;
                    const outboundNumber = value.outboundNumber;
                    const unit = value.unit;
                    option.xAxis[0].data[index] = tubName;
                    option.series[0].data[index] = outboundNumber;
                    option.series[1].data[index] = inboundNumber;
                });
                chart.setOption(option, true);
            })
            $.ajaxSettings.async = false;
        }
        var vm = new Vue({
            el: "#app",
@@ -198,9 +305,17 @@
                return {
                    project: "",
                    holeData: [],
                    tubLogs:[],
                };
            },
            methods: {
                tableRowClassName({ row, rowIndex }) {
                    if (rowIndex % 2 == 0) {
                        return "";
                    } else {
                        return "warning-row";
                    }
                },
            }
        });