<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('弹层组件')" />
|
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
|
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
|
<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
|
<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
|
<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
|
<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />
|
|
<style type="text/css">
|
.content {
|
width: 100%;
|
background-color: rgba(0,0,0,0.01) !important;
|
padding:10px;
|
}
|
[v-cloak]{
|
display: none;
|
}
|
|
.active-red{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
font-size: 14px;
|
color: white;
|
background: #F56C6C;
|
text-align: center;
|
line-height: 20px;
|
float: left;
|
}
|
|
.active-yellow{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
font-size: 14px;
|
color: white;
|
background: #E6A23C;
|
text-align: center;
|
line-height: 20px;
|
float: left;
|
}
|
|
.active-blue{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
font-size: 14px;
|
color: white;
|
background: #67C23A;
|
text-align: center;
|
line-height: 20px;
|
float: left;
|
}
|
|
.rankrow{
|
margin-top: 12px;
|
cursor: pointer;
|
}
|
.ilblock{
|
border-left: 1px solid #e3e5e7;
|
padding: 0 40px;
|
align-content: center;
|
}
|
.ilblock>span{
|
display: block;
|
line-height: 30px;
|
}
|
|
|
|
|
.el-table th,
|
.el-table tr,
|
.el-table td {
|
background-color: transparent;
|
border: 0px;
|
color: #4D4D4D;
|
font-size: 13px;
|
font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
|
font-weight: Normal;
|
}
|
.el-table::before {
|
height: 0px;
|
}
|
.el-table__body tr,
|
.el-table__body td {
|
padding: 0;
|
height: 22px;
|
}
|
|
</style>
|
</head>
|
|
<body class="gray-bg">
|
<div class="content" id="app" v-cloak>
|
|
<el-row style="height: 127px;">
|
<el-col :span="24">
|
<el-card class="box-card">
|
<div style="flex:4;padding-right: 20px;">
|
<div>
|
<li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">资料文件</span>
|
</div>
|
<div style="text-align: center">
|
<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">
|
{{indexDataCount.fileCount}}
|
</span>
|
</div>
|
</div>
|
|
<div style="flex:6;" class="ilblock">
|
<span style="color:rgba(0,0,0,.87);font-size: 15px;">
|
施工资料 <span style="float: right">0</span>
|
<!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
|
</span>
|
<span style="color:rgba(0,0,0,.87);font-size: 15px;">
|
安全资料 <span style="float: right">0</span>
|
<!-- <li class="el-icon-caret-bottom" style="color: #409eff">-->
|
</span>
|
<span style="color:rgba(0,0,0,.87);font-size: 15px;">
|
质量资料 <span style="float: right">0</span>
|
<!-- <li class="el-icon-caret-bottom" style="color: #409eff">-->
|
</span>
|
</div>
|
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-card class="box-card">
|
<div style="height: 70vh;width: 100%;">
|
<h3>材料统计</h3>
|
<el-col :span="10" style="height: 200px;">
|
<div style="margin-top: 15px">
|
<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="code" label="序号"></el-table-column>-->
|
<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-col>
|
<el-col :span="14" style="height: 200px;">
|
<div id="column-chart" style="height: 380px; width: 100%;"></div>
|
</el-col>
|
</div>
|
</el-card>
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/js/bootstrap.min.js}"></script>
|
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
|
<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
|
<script th:src="@{/js/custom/main.js}"></script>
|
|
<script th:src="@{/js/vue.min.js}"></script>
|
<script th:src="@{/js/elementUI/index.js}"></script>
|
|
<th:block th:include="include :: sparkline-js" />
|
<th:block th:include="include :: footer" />
|
|
<script th:inline="javascript">
|
|
$(function() {
|
indexCount();
|
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: [],
|
itemStyle: {
|
// 修改柱子的颜色
|
color: '#e2b507'
|
}
|
},
|
{
|
name: '入库',
|
type: 'bar',
|
stack: 'Ad',
|
emphasis: {
|
focus: 'series'
|
},
|
data: [],
|
itemStyle: {
|
// 修改柱子的颜色
|
color: '#2992c6'
|
}
|
},
|
|
]
|
};
|
|
let url = ctx + "/system/stat/tubLogData";
|
$.ajaxSettings.async = false;
|
$.get(url,{},function(res){
|
vm.tubLogs = res.tubLogs;
|
|
res.tubLogs.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;
|
}
|
|
//首页第一行个数统计
|
function indexCount() {
|
let url = ctx + "/system/stat/indexDataCount";
|
$.ajaxSettings.async = false;
|
$.get(url,{},function(res){
|
vm.indexDataCount = res.data;
|
vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
|
})
|
$.ajaxSettings.async = false;
|
}
|
|
var vm = new Vue({
|
el: "#app",
|
data() {
|
return {
|
stationProcessData: [],
|
indexDataCount :"",
|
tubLogs:[],
|
};
|
},
|
methods: {
|
tableRowClassName({ row, rowIndex }) {
|
if (rowIndex % 2 == 0) {
|
return "";
|
} else {
|
return "warning-row";
|
}
|
},
|
}
|
});
|
|
</script>
|
|
</body>
|
</html>
|
