Falcon/ReportService
1
1
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

界面美化

Browse Source
This commit is contained in:
falcon 2020-06-02 09:11:45 +08:00
parent d29552c455
commit 0b1110cc37
6 changed files with 106 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ReportService/Views/Home/Index.cshtml
View File

@ -1,16 +1,17 @@
<style type="text/css"> <style type="text/css">
#rpPage { #rpPage {
padding: 3px 0; border: 1px solid #000;
padding: 3px;
} }
</style> </style>
<div id="reportMain"> <div id="reportMain">
<ul class="nav nav-tabs" v-if="showReportList"> <ul class="menu-v reportForm" v-if="showReportList">
<li class="nav-item" v-for="m in reportList"> <li class="menu-item-v reportItem" v-for="m in reportList">
<a class="nav-link" href="#" v-on:click="cli(m)">{{m}}</a> <a class="nav-link" href="#" v-on:click="cli(m)">{{m}}</a>
</li> </li>
</ul> </ul>
<div id="rpPage"></div> <div id="rpPage" v-show="showPage"></div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var vm = new Vue({ var vm = new Vue({
@ -20,6 +21,7 @@
url: myjs.urls.files, url: myjs.urls.files,
fileContentUrl: myjs.urls.fileContentUrl, fileContentUrl: myjs.urls.fileContentUrl,
showReportList: true, showReportList: true,
showPage: false,
}, },
created() { created() {
$.get(this.url, function (d) { $.get(this.url, function (d) {
@ -34,6 +36,7 @@
methods: { methods: {
cli(m) { cli(m) {
$.get(this.fileContentUrl, { fileName: m }, function (h) { $.get(this.fileContentUrl, { fileName: m }, function (h) {
vm.showPage = true;
$("#rpPage").html(h); $("#rpPage").html(h);
}); });
}, },

31
ReportService/Views/Shared/_Layout.cshtml
View File

@ -14,8 +14,9 @@
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3 headbar">
<div class="container"> <div class="container">
<img alt="" src="~/images/logo75.png" class="logo" />
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">自定义报表服务</a> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">自定义报表服务</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
@ -24,10 +25,15 @@
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">报表</a> <a class="nav-link text-dark" href=".">主页</a>
</li>
<li>
<a href="#" class="userbar nav-link"></a>
</li> </li>
</ul> </ul>
</div> </div>
<ul class="nav pull-right">
</ul>
</div> </div>
</nav> </nav>
</header> </header>
@ -39,7 +45,11 @@
<footer class="border-top footer text-muted"> <footer class="border-top footer text-muted">
<div class="container"> <div class="container">
<div class="user"></div> <ul class="nav">
<li class="nav-item">
<a class="nav-link" target="_blank" href="http://39.105.71.191/ggws_klmy/ReportService/issues">技术支持</a>
</li>
</ul>
</div> </div>
</footer> </footer>
<script type="text/javascript"> <script type="text/javascript">
@ -47,10 +57,23 @@
var uid = myjs.getUId(); var uid = myjs.getUId();
var un = myjs.getUName(); var un = myjs.getUName();
if (uid && un) { if (uid && un) {
$("footer .user").html("" + un + "(" + uid + ")"); $(".userbar").html("" + un + "(" + uid + ")");
} }
}); });
</script> </script>
@RenderSection("Scripts",required: false) @RenderSection("Scripts",required: false)
<style type="text/css">
.headbar {
height: 66px;
background-color: #4489CA !important;
color: #000;
}
.logo {
margin-right: 30px;
width: 40px;
}
</style>
</body> </body>
</html> </html>

43
ReportService/wwwroot/css/site.css
View File

@ -14,8 +14,8 @@ a {
.btn-primary { .btn-primary {
color: #fff; color: #fff;
background-color: #1b6ec2; background-color: #00AE44;
border-color: #1861ac; border-color: #fff;
} }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
@ -29,6 +29,7 @@ a {
html { html {
font-size: 14px; font-size: 14px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
html { html {
font-size: 16px; font-size: 16px;
@ -38,6 +39,7 @@ html {
.border-top { .border-top {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;
} }
.border-bottom { .border-bottom {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
} }
@ -62,10 +64,45 @@ body {
/* Margin bottom by footer height */ /* Margin bottom by footer height */
margin-bottom: 60px; margin-bottom: 60px;
} }
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
line-height: 60px; /* Vertically center the text there */ line-height: 30px; /* Vertically center the text there */
} }
.reportForm {
border: 1px solid #000;
padding: 2px;
}
.reportForm .reportItem {
background-color: #8FBEE8;
border: 1px solid #fff;
padding: 2px 10px;
}
.menu-v {
display: inline-block;
list-style: none;
width: 100%;
}
.menu-item-v {
display: inline-block;
}
.reportFilter {
padding: 3px 3px;
}
.reportTable {
}
.reportTable th {
}
.reportTable td {
}

BIN
ReportService/wwwroot/images/logo75.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

9
ReportService/wwwroot/report/报表1.html
View File

@ -1,5 +1,5 @@
<div id="findPerson"> <div id="findPerson">
<div id="para"> <div id="para" class="reportFilter">
<input type="hidden" name="ProcedureName" value="example" /> <input type="hidden" name="ProcedureName" value="example" />
<input type="hidden" name="reportName" value="报表1" /> <input type="hidden" name="reportName" value="报表1" />
<input type="hidden" name="sqlStr" value="" /> <input type="hidden" name="sqlStr" value="" />
@ -9,11 +9,12 @@
<label>姓名:<input name="name" value="" placeholder="输入姓名或留空" /></label> <label>姓名:<input name="name" value="" placeholder="输入姓名或留空" /></label>
<label>地址:<input name="address" value="" placeholder="输入地址数据" /></label> <label>地址:<input name="address" value="" placeholder="输入地址数据" /></label>
<label>地址:<input name="marry" value="" placeholder="是否结婚" /></label> <label>地址:<input name="marry" value="" placeholder="是否结婚" /></label>
<button v-on:click="find">查询</button> <button class="btn btn-primary" v-on:click="find">查询</button>
<button v-on:click="print">打印</button> <button class="btn btn-primary" v-on:click="print">打印</button>
<button class="btn btn-primary" v-on:click="print">打印</button>
</div> </div>
<div id="result" v-if="result.length > 0"> <div id="result" v-if="result.length > 0">
<table class="table"> <table class="table reportTable" id="resultTable">
<thead> <thead>
<tr> <tr>
<td>姓名</td> <td>姓名</td>

2
ReportService/wwwroot/report/报表1.rpt.html
View File

@ -64,7 +64,7 @@
myjs.post(this.url, { sql: sql }, function (d) { myjs.post(this.url, { sql: sql }, function (d) {
findPersonPrint.result = d; findPersonPrint.result = d;
}); });
myjs.GetServerTime("yyyy年MM月dd日 HH点", function (r) { myjs.GetServerTime("yyyy年MM月dd日", function (r) {
_this.printTime = r; _this.printTime = r;
}); });
}, },