Skip to content

H
hp-smart
Commit 0fb1e3dc by zhangzhen
Options

界面展示优化

parent 2aea91e6
Showing with 331 additions and 123 deletions
src/main/webapp/HP/BI/HPBI003.jsp
......@@ -79,8 +79,6 @@
String projectTypeDesc = FrameworkInfo.getProjectTypeDesc();
%>
<c:set var="ctx" value="<%=iPlatContext%>"/>
......@@ -89,7 +87,7 @@
<html>
<head>
<%-- <title>Title</title>--%>
<%-- <title>Title</title>--%>
<script src="${iPlatStaticURL}/kendoui/js/jquery.min.js"></script>
<script src="${iPlatStaticURL}/kendoui/js/kendo.all.min.js"></script>
......@@ -109,7 +107,7 @@
<script src="${iPlatStaticURL}/iplatui/assets/js/iplat.ui.bootstrap.min.js"></script>
<script src="${iPlatStaticURL}/iplatui/js/iplat.ui.min.js"></script>
<script src="${ctx}/common/js/public.js"></script>
<script src="${ctx}/common/js/vue-2.6.10.js"></script>
<script src="${ctx}/common/js/httpVueLoader.js"></script>
<link rel="stylesheet" href="${ctx}/common/css/element-ui.css">
......@@ -144,7 +142,8 @@
</el-header>
<el-container style="height:94vh;margin-top: 2vw">
<el-aside style="width: 20vw;">
<home-page-left ref="homepageleft" :factory="factory" :datapicker="dataPicker" :ctx="ctx" ></home-page-left>
<home-page-left ref="homepageleft" :factory="factory" :datapicker="dataPicker"
:ctx="ctx"></home-page-left>
</el-aside>
<el-container>
<el-header style="height: 45vh;margin-left: 1vw">
......@@ -155,7 +154,9 @@
:key="index"
style="display: flex;margin-right: 1vw">
<div class="group-splicing-font">{{splicingList[index]}}</div>
<div class="group-splicing-data" :class="getDataColorClass(index)">{{querySplicingObject[item]}}T</div>
<div class="group-splicing-data" :class="getDataColorClass(index)">
{{querySplicingObject[item]}}T
</div>
</div>
</div>
<div class="production-trend-chart">
......@@ -169,9 +170,12 @@
style="width: 100%;display: flex;margin-left: 2vw;margin-bottom: 7vh;">
<div class="text-container">
<span class="text-with-underline">{{ item.groupName }}</span>
<img src="${ctx}/common/img/productionBorder.png" style="width: 61px;height: 15px;background-repeat: no-repeat;background-position: center;" alt/>
<img src="${ctx}/common/img/productionBorder.png"
style="width: 61px;height: 15px;background-repeat: no-repeat;background-position: center;"
alt/>
</div>
<div style=" margin-left: 2vw" class="production-header-ltext">{{ item.prodName }}
</div>
<div style=" margin-left: 2vw" class="production-header-ltext">{{ item.prodName }}</div>
</div>
</div>
</div>
......@@ -182,9 +186,10 @@
<div class="page-title-span">
近7日综合产量
</div>
<home-echarts :option="lineOption" :height="31" :width="36" style="margin-top: 3vh"></home-echarts>
<home-echarts :option="lineOption" :height="31" :width="36"
style="margin-top: 3vh"></home-echarts>
</div>
<%-- 导入组件--%>
<%-- 导入组件--%>
</div>
<div class="comprehensive-output" style="margin-left: 2vw">
<div class="comprehensive-output-title">
......@@ -194,22 +199,43 @@
</div>
<div class="page-content-main" style="margin: 1vw 1vh;">
<div class="page-title-project">
<div v-for="(item,index) in dataList"
:key="index" class="project-title-font"
<%-- <div class="page-title-project">--%>
<%-- <div v-for="(item,index) in dataList"--%>
<%-- :key="index" class="project-title-font"--%>
<%-- >--%>
<%-- {{ item }}--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- <div v-for="(temp,index) in queryXMinfoList"--%>
<%-- class="page-title-project"--%>
<%-- style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;">--%>
<%-- <div v-for="(item,index) in queryXMinfoArrary "--%>
<%-- :key="index" class="project-title-font" style="opacity: 0.7;"--%>
<%-- >--%>
<%-- {{ temp[item] }}--%>
<%-- </div>--%>
<%-- </div>--%>
<el-table
:data="queryXMinfoList"
border
height="28vh"
id="tableId1"
:highlight-current-row="true"
style="width: 100%">
<el-table-column
v-for="(colVal,i) in columns"
:prop="colVal.value"
:align="colVal.align"
:label="colVal.label"
>
{{ item }}
</div>
</div>
<div v-for="(temp,index) in queryXMinfoList"
class="page-title-project"
style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;">
<div v-for="(item,index) in queryXMinfoArrary "
:key="index" class="project-title-font" style="opacity: 0.7;"
>
{{ temp[item] }}
</div>
</div>
<template slot-scope="scope">
<span class="project-title-font">{{scope.row[colVal.value] | resetData}}</span>
</template>
</el-table-column>
</el-table>
</div>
<%-- 导入组件--%>
</div>
......@@ -242,33 +268,82 @@
},
data() {
return {
splicingList:['组拼','加焊','综合'],
querySplicingList:['zp','jh','zh'],
splicingList: ['组拼', '加焊', '综合'],
querySplicingList: ['zp', 'jh', 'zh'],
ctx:'${ctx}',
option:{},
option2:{},
ctx: '${ctx}',
option: {},
option2: {},
factory:'',
factoryList:[],
factory: '',
factoryList: [],
dataPicker: '20241019',
querySplicingObject:[],
queryGroupCLnfoList:[],
queryBJInfoList:[],
queryGroup:[],
queryZHCLInfoDate:[],
queryZHCLInfoArray:[],
queryZHCLInfoList:[],
queryXMinfoArrary:['projName','jhdate','jhcl','sjcl','scjd','fhjd'],
queryXMinfoList:[],
dataList:['项目名称','计划完成时间','计划产量','实际产量','生产进度','发货进度'],
testList:[],
extremes:{},
querySplicingObject: [],
queryGroupCLnfoList: [],
queryBJInfoList: [],
queryGroup: [],
queryZHCLInfoDate: [],
queryZHCLInfoArray: [],
queryZHCLInfoList: [],
queryXMinfoArrary: ['projName', 'jhdate', 'jhcl', 'sjcl', 'scjd', 'fhjd'],
queryXMinfoList: [],
dataList: ['项目名称', '计划完成时间', '计划产量', '实际产量', '生产进度', '发货进度'],
testList: [],
extremes: {},
columns: [
{
label: '项目名称',
align: 'center',
value: 'projName',
width: ''
},
{
label: '计划完成时间',
align: 'center',
value: 'jhdate',
width: ''
},
{
label: '计划产量',
align: 'center',
value: 'jhcl',
width: '60'
},
{
label: '实际产量',
align: 'center',
value: 'sjcl',
width: '60'
},
{
label: '生产进度(%)',
align: 'center',
value: 'scjd',
width: '80'
},
{
label: '发货进度(%)',
align: 'center',
value: 'fhjd',
width: '80'
}
]
};
},
filters: {
resetData(d) {
if (d === '' || d === undefined) {
return '-'
} else if (d === 0) {
return 0
} else if (typeof d === 'number') {
return d.toFixed(2)
}
return d
}
},
mounted() {
this.queryCompanyInfo();
this.queryMaxDate();
......@@ -286,7 +361,7 @@
},
methods: {
initPage(){
initPage() {
this.queryMaxDate();
this.queryZCLinfo();
this.queryGroupCLnfo();
......@@ -297,7 +372,7 @@
this.queryXMinfo();
},
handledataPicker(){
handledataPicker() {
this.queryZCLinfo();
this.queryGroupCLnfo();
this.setOption();
......@@ -309,13 +384,13 @@
this.$refs.homepageleft.queryYCLinfo();
this.$refs.homepageleft.queryNCLinfo();
},
queryCompanyInfo(){
queryCompanyInfo() {
let _this = this;
var inInfo = new EiInfo();
// inInfo.set('requestList','[{\\"ids\\":[\\"show65\\"],\\"params\\":\\"\\"}]')
IPLAT.EiCommunicator.send('HPBI003', 'queryCompanyInfo', inInfo, {
onSuccess: function (res) {
if(undefined != res.blocks.result.rows){
if (undefined != res.blocks.result.rows) {
_this.factoryList = res.blocks.result.rows;
_this.factory = _this.factoryList[0][1]
}
......@@ -327,12 +402,12 @@
{async: false}
);
},
queryMaxDate(){
queryMaxDate() {
let _this = this;
var inInfo = new EiInfo();
IPLAT.EiCommunicator.send('HPSC008', 'queryMaxDate', inInfo, {
onSuccess: function (res) {
if(undefined != res.extAttr.registerDate){
if (undefined != res.extAttr.registerDate) {
_this.dataPicker = res.extAttr.registerDate;
console.log(_this.dataPicker)
}
......@@ -344,15 +419,15 @@
{async: false}
);
},
queryZCLinfo(){
queryZCLinfo() {
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryZCLinfo', inInfo, {
onSuccess: function (res) {
console.log('queryZCLinfo',res)
if(undefined != res.extAttr.result[0]){
console.log('queryZCLinfo', res)
if (undefined != res.extAttr.result[0]) {
_this.querySplicingObject = res.extAttr.result[0];
}
},
......@@ -364,15 +439,15 @@
);
},
//多柱形图
queryGroupCLnfo(){
queryGroupCLnfo() {
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryGroupCLnfo', inInfo, {
onSuccess: function (res) {
if(undefined != res.extAttr.result){
_this.queryGroupCLnfoList =res.extAttr.result
if (undefined != res.extAttr.result) {
_this.queryGroupCLnfoList = res.extAttr.result
}
},
onFail: function (err) {
......@@ -382,14 +457,14 @@
{async: false}
);
},
setOption(){
setOption() {
this.option = {
textStyle: {
color: '#A4B3C5',
fontSize: 14,
},
grid: {
top: '5%', // 图表距离容器顶部的距离
top: '8%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
......@@ -406,20 +481,21 @@
// { product: '生产四组', zp: 72.4, jh: 53.9, zh: 39.1 }
// ]
},
xAxis: { type: 'category' },
xAxis: {type: 'category'},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
itemStyle: { color: '#0391FF' },
itemStyle: {color: '#0391FF'},
label: {
show: true,
position: 'top'
}
},
{ type: 'bar' ,
{
type: 'bar',
itemStyle:
{
color: '#00EBFF'
......@@ -431,7 +507,7 @@
},
{
type: 'bar',
itemStyle: { color: '#05CC26' } ,
itemStyle: {color: '#05CC26'},
label: {
show: true,
position: 'top'
......@@ -439,14 +515,14 @@
}]
}
},
queryBJInfo(){
queryBJInfo() {
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryBJInfo', inInfo, {
onSuccess: function (res) {
if(undefined != res.extAttr.result){
if (undefined != res.extAttr.result) {
_this.queryBJInfoList = res.extAttr.result
}
},
......@@ -458,18 +534,18 @@
);
},
//七天日期
queryZHCLInfo(){
queryZHCLInfo() {
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryZHCLInfo', inInfo, {
onSuccess: function (res) {
_this.queryZHCLInfoList = res.extAttr.result;
_this.queryZHCLInfoList.forEach(item => {
item.label = {
show: true,
show: false,
position: 'top'
};
});
......@@ -503,13 +579,13 @@
);
},
setOption2(){
setOption2() {
this.option2 = {
textStyle: {
color: '#A4B3C5',
fontSize: 14,
},
tooltip:{
tooltip: {
trigger: 'axis'
},
legend: {
......@@ -533,7 +609,7 @@
yAxis: {
type: 'value',
axisLabel: {
show:false
show: false
}
},
series: this.queryZHCLInfoList,
......@@ -542,14 +618,20 @@
},
//项目跟踪进度,没数据
queryXMinfo(){
queryXMinfo() {
let _this = this;
var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryXMinfo', inInfo, {
onSuccess: function (res) {
_this.queryXMinfoList = res.extAttr.result;
let list = []
_this.queryXMinfoList = res.extAttr.result && res.extAttr.result.length ? res.extAttr.result : list;
_this.$nextTick(() => {
tableContentScroll('tableId1')
})
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
......@@ -574,7 +656,7 @@
}
},
},
computed:{
computed: {
barOption() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.option;
......@@ -586,12 +668,11 @@
},
},
)
</script>
<style>
html,body {
html, body {
width: 100vw;
height: 100vh;
padding: 0;
......@@ -603,6 +684,7 @@
background-repeat: repeat-y;
background-position: center;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
......@@ -620,26 +702,30 @@
margin: 1.3vw 1.3vw;
}
.a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{
.a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div{
div {
display: block;
unicode-bidi: isolate;
}
*, :after, :before{
*, :after, :before {
box-sizing: border-box;
}
*, :after, ::before{
*, :after, ::before {
box-sizing: border-box;
}
.production-header-right{
.production-header-right {
width: 65%;
}
.production-header-left{
.production-header-left {
margin-left: 1vw;
height: 100%;
width: 30%;
......@@ -647,13 +733,15 @@
background-repeat: no-repeat;
background-size: 100% 100%;
}
.production-group-splicing{
.production-group-splicing {
width: 100%;
height: 48px;
display: flex;
padding-left: 1vw;
}
.group-splicing-font{
.group-splicing-font {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 0.8vw;
......@@ -663,7 +751,8 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.group-splicing-data{
.group-splicing-data {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1.2vw;
......@@ -671,11 +760,13 @@
line-height: 25px;
margin-left: 1vw;
}
.group-splicing-data:nth-of-type(1){
.group-splicing-data:nth-of-type(1) {
color: #0391FF;
}
/*#0391FF #00EBFF #05CC26*/
.el-input__inner{
.el-input__inner {
width: 10vw;
height: 4vh;
background-image: url("${ctx}/common/img/select.png");
......@@ -691,12 +782,14 @@
flex-wrap: wrap;
padding-left: 1vw;
}
.production-trend-chart{
.production-trend-chart {
background-image: url("${ctx}/common/img/productionTrendChart.png");
background-repeat: no-repeat;
background-size: 100% 100%;
/* background-position: center; */
}
.text-container {
width: 60px;
position: relative;
......@@ -715,7 +808,8 @@
color: #01A9FF;
line-height: 25px;
}
.production-header-ltext{
.production-header-ltext {
height: 40px;
width: 16vw;
font-family: Microsoft YaHei;
......@@ -726,7 +820,8 @@
align-content: center;
flex-wrap: wrap;
}
.comprehensive-output{
.comprehensive-output {
width: 48%;
height: 36.9vh;
background-image: url("${ctx}/common/img/comprehensive-output.png");
......@@ -735,7 +830,8 @@
background-position: left;
position: relative;
}
.comprehensive-output::before{
.comprehensive-output::before {
content: ""; /* 伪元素需要内容，即使它是空的 */
position: absolute;
top: 0;
......@@ -749,11 +845,13 @@
background-size: 100% 100%;
background-repeat: no-repeat;
}
.comprehensive-output-title{
.comprehensive-output-title {
height: 4.5vh;
width: 100%;
}
.page-title-span{
.page-title-span {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
......@@ -764,12 +862,14 @@
margin-left: 2vw;
padding-top: 0.2vh;
}
.home-header-pagemain{
.home-header-pagemain {
width: 100%;
display: flex;
justify-content: flex-start;
}
.top-main{
.top-main {
width: 10vw;
height: 4vh;
background-image: url("${ctx}/common/img/select.png");
......@@ -778,7 +878,7 @@
background-position: center;
display: flex;
align-content: center;
//justify-content: center;
/ / justify-content: center;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
......@@ -786,30 +886,35 @@
flex-wrap: wrap;
padding-left: 1vw;
}
.data-picker{
.data-picker {
width: 10vw;
height: 4vh;
margin-left: 1vw;
font-size: 1vw;
}
.page-content-main{
.page-content-main {
height: 79%;
overflow: auto;
}
::-webkit-scrollbar {
width: 0.3vw;
cursor:pointer;
cursor: pointer;
}
::-webkit-scrollbar-thumb {
background-color: rgba(94, 113, 135, 0.5) !important;
cursor:pointer;
cursor: pointer;
}
.page-content-main::-webkit-scrollbar-thumb {
background-color: rgb(42, 36, 36);
border-radius: 10px;
}
.page-title-project{
.page-title-project {
width: 100%;
height: 4vh;
display: flex;
......@@ -817,27 +922,85 @@
border-radius: 2px;
border: 1px solid #000000;
}
.project-title-font{
width: 20%;
height: 100%;
display: flex;
font-size: 0.7vw;
justify-content: center;
align-items: center;
color: #fff;
.project-title-font {
color: #f4f4f4;
overflow: hidden;
flex-wrap: wrap;
font-size: 0.65vw;
}
.color-0 {
color: #0391FF;
}
.color-1 {
color: #00EBFF;
}
.color-2 {
color: #05CC26;
}
.default-color {
color: #000000; /* 或其他默认颜色 */
}
.page-content-main .el-table, .el-table__expanded-cell {
background-color: transparent !important;
}
.page-content-main .el-table__cell .cell {
font-size: 10px;
padding: 0;
}
.page-content-main .el-table tr {
background-color: transparent !important;
}
.page-content-main .el-table--border, .el-table--group {
/*border-color: #4295f7;*/
border-color: transparent !important;
}
.page-content-main .el-table td.el-table__cell, .el-table th.el-table__cell {
background-color: transparent !important;
border-color: transparent !important;
}
.page-content-main .el-table--border .el-table__cell .cell {
padding-left: 0;
}
.page-content-main .el-table th.el-table__cell > .cell {
padding-right: 0;
}
.page-content-main .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
color: #ffffff;
border-color: transparent !important;
font-size: 0.8vw;
}
.page-content-main .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf .cell {
font-size: 0.68vw;
}
.page-content-main .el-table--border th.el-table__cell.gutter:last-of-type {
border-color: transparent !important;
}
.page-content-main .el-table--border::after, .el-table--group::after, .el-table::before {
/*background-color: #4295f7!important;*/
background-color: transparent !important;
}
.page-content-main tr {
border-bottom: 1px solid #4295f7 !important;
}
</style>
</body>
</html>
src/main/webapp/HP/BI/HPBI004.jsp
......@@ -256,18 +256,21 @@
querySbNODate:[],
currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss"),
lineOption1:'',
lineOption2:''
lineOption2:'',
timer: ''
};
},
mounted() {
this.getYesterdayDateFormatted();
setInterval(() => {
this.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
}, 1000);
this.queryCompanyInfo();
this.initPage();
this.setOption();
this.setOption2();
this.getYesterdayDateFormatted();
this.initPage();
this.onSetInterval();
},
......
src/main/webapp/common/js/public.js 0 → 100644
let timer1 = {}
const tableContentScroll = (el) => {
if (timer1[el]) {
clearInterval(timer1[el])
timer1[el] = null;
}
setTimeout(()=>{
let i = $("#" + el + ' .el-table__body-wrapper table');
let i2 = $("#" + el + ' .el-table__body-wrapper');
let a = 0;
let boxHeight = i.height();
let height = i2.height();
let num = boxHeight - height;
// console.log(boxHeight, height, num,"高度数据")
let run = () => {
if (num > 0) {
timer1[el] = setInterval(() => {
a = a + 0.07;
if (a >= num) {
a = 0
}
i2.scrollTop(a);
}, 10)
}
}
run()
i.on('mouseenter', () => {
clearInterval(timer1[el])
timer1[el] = null
i2.on('scroll',()=>{
a = i2.scrollTop();
})
})
i.on("mouseleave",()=>{
i2.off("scroll");
if(!timer1[el]){
run()
}
})
},50)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment