root
/
smart-erp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[update]:首页图表样式调整

dev
youjianchi 10 months ago
parent
1a6cc4f245
commit
a75bed0c08
2 changed files with 127 additions and 357 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ruoyi-admin/src/main/resources/static/css/style.css
  2. 480
      ruoyi-admin/src/main/resources/templates/main.html

4
ruoyi-admin/src/main/resources/static/css/style.css
View File

@ -3183,7 +3183,7 @@ video {
}
.wrapper-content {
/*padding: 20px;*/
padding: 20px;
}
#page-wrapper {
@ -6875,7 +6875,7 @@ body.rtls .top-navigation .footer.fixed, body.rtls.top-navigation .footer.fixed
}
/* ECHARTS */
.echarts {
height: 240px;
height: 250px;
}
.checkbox-inline, .radio-inline, .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {

480
ruoyi-admin/src/main/resources/templates/main.html
View File

@ -6,143 +6,50 @@
<!--360浏览器优先以webkit内核解析-->
<title>smart-erp</title>
<link rel="shortcut icon" href="favicon.ico">
<link href="../static/css/bootstrapv4/bootstrap.min.css" th:href="@{/css/bootstrapv4/bootstrap.min.css}" rel="stylesheet"/>
<!-- <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.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 th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>-->
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>
<link th:href="@{/css/skins.css}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css?v=4.6.0}" rel="stylesheet"/>
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style2.css}" rel="stylesheet"/>
<link rel="stylesheet" href="../static/css/fontawesome-all.min.css" th:href="@{/css/fontawesome-all.min.css}">
<!-- <link th:href="@{/img/favicon.ico}">-->
<link rel="stylesheet" href="../static/css/datta-icon.css" th:href="@{/css/datta-icon.css}">
<link rel="stylesheet" href="../static/css/jquery.scrollbar.min.css" th:href="@{/css/jquery.scrollbar.min.css}">
<link rel="stylesheet" href="../static/css/feather.css" th:href="@{/css/feather.css}">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<th:block th:include="include :: header('仪表盘')"/>
<th:block th:include="include :: datetimepicker-css"/>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<style>
.body{
background-color: #F9F9F9;
}
i{
padding-top: 6px;
padding-left: 9px;
width: 32px;
height: 32px;
display: inline;
}
p{
margin: 0;
padding-left: 10px;
color: #000000;
}
.container{
width: 100%;
background-color: #F9F9F9;
}
.style1{
margin: 10px;
height: 300px;
border-radius:5%;
background-color: #FFFFFF;
}
.style2 {
display: inline-block;
height: 30%;
border-radius: 50%;
background-color: #F0F0F0;
}
.style3{
display: inline-block;
width: 70px;
height: 30%;
font-size: 10px;
text-align: center;
vertical-align: middle;
}
.icon1{
color: #3fb1e3;
font-size: 20px;
}
.icon2{
color: #6be6c1;
font-size: 20px;
}
.icon3{
color: #626c91;
font-size: 20px;
}
.icon4{
color: #a0a7e6;
font-size: 20px;
}
.inputss{
width: 100px;
height: 15px;
font-size: 10px;
}
th{
border: 0.5px solid silver;
}
.row{
margin: 1% 2%;
border: 0.5px solid #0a2730;
}
.table-scrollable .table-scrollable-borderless{
height: 40%;
}
p{
margin: 2%
}
</style>
</head>
<body class="gray-bg body scroll-content">
<div class="container">
<div class="container form-control-sm">
<div class="row">
<div class="col-xs-12 col-sm-6 p-0">
<div style="border:1px solid darkgrey; text-align: center ">
<h2 style="font-size: 30px" id="oderNolist">10</h2>
<!-- <div class="style2"><i class="fa fa-file-text-o icon1"></i></div>-->
<div style="color: #3fb1e3;">
<p style="font-size: 20px;">进行中 - 生产订单数</p><br>
</div>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-6">
<div class="ibox">
<div class="ibox-content">
<h3 class="text-success" id="oderNolist">进行中-生产订单数</h3>
<h1 class="no-margins">11</h1>
</div>
</div>
<div class="col-xs-12 col-sm-6 p-0">
<div style="border:1px solid darkgrey; text-align: center ">
<h2 style="font-size: 30px" id="oderlist">15</h2>
<!-- <div class="style2"><i class="fa fa-file-text-o icon2"></i></div>-->
<div >
<p style="color: #6be6c1;font-size: 20px">已完成 - 生产订单数</p><br>
</div>
</div>
<div class="col-sm-6">
<div class="ibox">
<div class="ibox-content ">
<h3 class="text-info" id="oderlist">已结案-生产订单数</h3>
<h1 class="no-margins">10</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 p-0">
<div class="table-scrollable table-scrollable-borderless">
<div class="style1">
<p>成品料号分析统计</p>
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
<button class="inputss" >top10</button><button class="inputss">top50</button>
</p>
<table class="table table-hover table-light" style="width: 100%;font-size: 16px">
</div>
<div class="row">
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>成品料号分析统计</h5>
</div>
<div class="ibox-content echarts">
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
<button class="inputss" >top10</button><button class="inputss">top50</button>
</p>
<table class="table table-hover table-light" style="width: 100%;font-size: 16px">
<thead>
<tr class="uppercase">
<th style="width: 33%">料号</th>
<th style="width: 33%;">物料名称</th>
<th style="width: 25%">占比</th>
</tr>
<tr class="uppercase">
<th style="width: 33%">料号</th>
<th style="width: 33%;">物料名称</th>
<th style="width: 25%">占比</th>
</tr>
</thead>
<tr>
<td><a href="javascript:;" class="primary-link">3325454555</a></td>
@ -165,12 +72,15 @@
<td><span class="bold theme-font">58%</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 p-0">
<div class="style1">
<p>周产量</p>
</div>
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>周产量</h5>
</div>
<div class="ibox-content echarts">
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
</p>
@ -178,169 +88,84 @@
</div>
</div>
</div>
<!-- <div class="col-xs-6 col-sm-3 p-0" style="display: flex;">
<div class="style1">
<div class="row" style="padding-top: 60px">
<div class="col-xs-12 col-sm-6 p-0">
<div style="padding-left: 40px">
<div class="style2"><i class="fa fa-file-text-o icon1"></i></div>
<div class="style3" style="color: #3fb1e3;">
计划数量<br>
1000
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 p-0">
<div style="padding-left: 10px">
<div class="style2"><i class="fa fa-file-text-o icon2"></i></div>
<div class="style3" style="color: #6be6c1;">
完成数量<br>
819
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 p-0">
<div style="padding-left: 40px">
<div class="style2"><i class="fa fa-file-text-o icon3"></i></div>
<div class="style3" style="color: #626c91;">
完工率<br>
81.9%
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 p-0">
<div style="padding-left: 10px">
<div class="style2"><i class="fa fa-file-text-o icon4"></i></div>
<div class="style3" style="color: #a0a7e6;">
合格率<br>
97.3%
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="col-sm-12 p-0" style="height: 40%">
<div class="row">
<p>生产订单周期</p>
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
<label class="col-form-label">生产订单号:</label> <input class="form-control-sm" type="text" />
</p>
<table class=" table table-hover table-light" id="qualitlist">
<thead>
<tr class="uppercase">
<th style="width: 12%;">生产订单</th>
<th style="width: 12%;">料号</th>
<th style="width: 12%">物业名称</th>
<th style="width: 12%">业务部</th>
<th style="width: 12%;">工程部</th>
<th style="width: 12%">采购部</th>
<th style="width: 12%">品质部(来料)</th>
<th style="width: 12%">生产部</th>
<th style="width: 12%">品质(生产)</th>
</tr>
</thead>
<tr>
<td rowspan="2" style="border-right:0.5px solid #f0f0f0 ;">PO122242342</td>
<td><a href="javascript:;" class="primary-link">3325454555</a></td>
<td>yk测试-原材料</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">1000000000</a></td>
<td>yk测试-原材料2</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
<tr>
<td rowspan="2" style="border-right:0.5px solid #f0f0f0 ;">PO122242342</td>
<td><a href="javascript:;" class="primary-link">3325454235</a></td>
<td>yk测试-原材料3</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">3325454554</a></td>
<td>yk测试-原材料4</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
</table>
</div>
</div>
<div class="col-sm-12 p-0" style="height:100px">
</div>
<!-- <div class="col-xs-12 col-sm-6 p-0">
<div class="style1">
<div id="dailyGrowthTrend" style="width: 100%;height: 200px;">Daily growth trend</div>
</div>
</div>
<div class="table-scrollable table-scrollable-borderless">
<table id="qualitylist" class="table table-hover table-light"></table>
</div>
<div class="col-xs-6 col-sm-3 p-0">
<div class="style1">
<p>产品分类产量分布统计</p>
<div id="productClassificationYield" style="width: 100%;height: 200px;">productClassificationYield</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 p-0">
<div class="style1">
<div id="dailyProductGrowth" style="width: 100%;height: 200px;"></div>
</div>
</div>
<div class="col-xs-6 col-sm-3 p-0">
<div class="style1">
<p>产品缺陷分布统计</p>
<div id="productDefects" style="width: 100%;height: 200px;">productDefects</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 p-0">
<div class="style1">
<p>产品缺陷分类分布统计</p>
<div id="productClassificationDefects" style="width: 100%;height: 200px;">productClassificationDefects</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 p-0">
<div class="style1">
<div id="dailyGrowthTrend" style="width: 100%;height: 200px;">Daily growth trend</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>生产订单周期</h5>
</div>
<div class="ibox-content" style="height: 300px;">
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
<label class="col-form-label">生产订单号:</label> <input class="form-control-sm" type="text" />
</p>
<table class=" table table-hover table-light" id="qualitlist">
<thead>
<tr class="uppercase">
<th style="width: 12%;">生产订单</th>
<th style="width: 12%;">料号</th>
<th style="width: 12%">物业名称</th>
<th style="width: 12%">业务部</th>
<th style="width: 12%;">工程部</th>
<th style="width: 12%">采购部</th>
<th style="width: 12%">品质部(来料)</th>
<th style="width: 12%">生产部</th>
<th style="width: 12%">品质(生产)</th>
</tr>
</thead>
<tr>
<td rowspan="2" style="border-right:0.5px solid #f0f0f0 ;">PO122242342</td>
<td><a href="javascript:;" class="primary-link">3325454555</a></td>
<td>yk测试-原材料</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">1000000000</a></td>
<td>yk测试-原材料2</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
<tr>
<td rowspan="2" style="border-right:0.5px solid #f0f0f0 ;">PO122242342</td>
<td><a href="javascript:;" class="primary-link">3325454235</a></td>
<td>yk测试-原材料3</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">3325454554</a></td>
<td>yk测试-原材料4</td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
<td><span class="bold theme-font">/</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3 p-0">
<div class="style1">
<p>产品合格率统计</p>
<div id="passRate" style="width: 100%;height: 200px;">Pass rate</div>
</div>
</div> -->
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script th:src="@{/js/walden.js}"></script>
<script th:src="@{/js/pcoded.min.js}"></script>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: datetimepicker-js"/>
<!-- 进行中订单数量-->
<script type="text/javascript">
@ -866,7 +691,7 @@
<!--产品分类合格率统计-->
<script type="text/javascript">
var classificationPassRateDom = document.getElementById('classificationPassRate');
var classificationPassRate = echarts.init(classificationPassRateDom, 'walden', {
var classificationPassRate = echarts.init(classificationPassRateDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
@ -902,9 +727,9 @@
symbol: ['none','arrow'],
symbolSize: [4, 4],
show: true, //隐藏X轴轴线
lineStyle: {
/*lineStyle: {
color: 'blue'
}
}*/
},
},
yAxis: {
@ -921,13 +746,13 @@
symbol: ['none','arrow'],
symbolSize: [4, 4],
show: true, //隐藏X轴轴线
lineStyle: {
/*lineStyle: {
color: 'blue'
}
}*/
},
},
legend: {
data: ["折线图", "柱状图"],
data: ["增速", "数量"],
right:"1%",
top: "1%",
textStyle: {
@ -939,12 +764,12 @@
},
series: [
{
name: "折线图",
name: "增速",
type: "line",
barWidth: '20%',
"itemStyle": {
"normal": {
"color": "blue",
"color": "#23c6c8",
"barBorderRadius": 20,
"label": {
"show": true,
@ -958,12 +783,17 @@
data: [441, 453, 486, 534]
},
{
name: "柱状图",
name: "数量",
type: "bar",
barWidth: '20%',
areaStyle:{
color: "black"
},
itemStyle: {
normal: {
color:"#1c84c6"
}
},
data: [441, 453, 486, 534]
}
]
@ -973,65 +803,5 @@
}
window.addEventListener('resize', classificationPassRate.resize);
</script>
<!-- <script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:makeorder:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:makeorder:remove')}]];
var cancelFlag = [[${@permission.hasPermi('system:makeorder:cancel')}]];
var restoreFlag = [[${@permission.hasPermi('system:makeorder:restore')}]];
var makeStatusDatas = [[${@dict.getType('sys_erp_makeStatus')}]];
var eceiptStatusDatas = [[${@dict.getType('eceiptStatus')}]];
var qualityStatusDatas = [[${@dict.getType('qualityStatus')}]];
var useStatusDatas = [[${@dict.getType('useStatus')}]];
var prefix = ctx + "system/makeorder";
$(function() {
var options = {
url: prefix + "/list",
exportUrl: prefix + "/export",
modalName: "生产订单周期",
columns: [{
checkbox: true
},
{
field: 'id',
title: '生产订单id',
visible: false
},
{
field: 'makeNo',
title: '生产单号'
},
{
field: 'materialNo',
title: '料号'
},
{
field: '',
title: '业务部'
},
{
field: '',
title: '工程部'
},
{
field: '',
title: '采购部'
},
{
field: '',
title: '品质部(来料)'
},
{
field: '',
title: '生产部'
},
{
field: '',
title: '品质部(生产)'
}
]
};
$.table("#qualitlist").init(options);
});
</script> -->
</body>
</html>

Write Preview
Loading…
Cancel
Save