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 @@ ...@@ -79,8 +79,6 @@
String projectTypeDesc = FrameworkInfo.getProjectTypeDesc(); String projectTypeDesc = FrameworkInfo.getProjectTypeDesc();
%> %>
<c:set var="ctx" value="<%=iPlatContext%>"/> <c:set var="ctx" value="<%=iPlatContext%>"/>
...@@ -89,7 +87,7 @@ ...@@ -89,7 +87,7 @@
<html> <html>
<head> <head>
<%-- <title>Title</title>--%> <%-- <title>Title</title>--%>
<script src="${iPlatStaticURL}/kendoui/js/jquery.min.js"></script> <script src="${iPlatStaticURL}/kendoui/js/jquery.min.js"></script>
<script src="${iPlatStaticURL}/kendoui/js/kendo.all.min.js"></script> <script src="${iPlatStaticURL}/kendoui/js/kendo.all.min.js"></script>
...@@ -109,7 +107,7 @@ ...@@ -109,7 +107,7 @@
<script src="${iPlatStaticURL}/iplatui/assets/js/iplat.ui.bootstrap.min.js"></script> <script src="${iPlatStaticURL}/iplatui/assets/js/iplat.ui.bootstrap.min.js"></script>
<script src="${iPlatStaticURL}/iplatui/js/iplat.ui.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/vue-2.6.10.js"></script>
<script src="${ctx}/common/js/httpVueLoader.js"></script> <script src="${ctx}/common/js/httpVueLoader.js"></script>
<link rel="stylesheet" href="${ctx}/common/css/element-ui.css"> <link rel="stylesheet" href="${ctx}/common/css/element-ui.css">
...@@ -144,7 +142,8 @@ ...@@ -144,7 +142,8 @@
</el-header> </el-header>
<el-container style="height:94vh;margin-top: 2vw"> <el-container style="height:94vh;margin-top: 2vw">
<el-aside style="width: 20vw;"> <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-aside>
<el-container> <el-container>
<el-header style="height: 45vh;margin-left: 1vw"> <el-header style="height: 45vh;margin-left: 1vw">
...@@ -155,7 +154,9 @@ ...@@ -155,7 +154,9 @@
:key="index" :key="index"
style="display: flex;margin-right: 1vw"> style="display: flex;margin-right: 1vw">
<div class="group-splicing-font">{{splicingList[index]}}</div> <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> </div>
<div class="production-trend-chart"> <div class="production-trend-chart">
...@@ -169,9 +170,12 @@ ...@@ -169,9 +170,12 @@
style="width: 100%;display: flex;margin-left: 2vw;margin-bottom: 7vh;"> style="width: 100%;display: flex;margin-left: 2vw;margin-bottom: 7vh;">
<div class="text-container"> <div class="text-container">
<span class="text-with-underline">{{ item.groupName }}</span> <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>
<div style=" margin-left: 2vw" class="production-header-ltext">{{ item.prodName }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -182,9 +186,10 @@ ...@@ -182,9 +186,10 @@
<div class="page-title-span"> <div class="page-title-span">
近7日综合产量 近7日综合产量
</div> </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> </div>
<div class="comprehensive-output" style="margin-left: 2vw"> <div class="comprehensive-output" style="margin-left: 2vw">
<div class="comprehensive-output-title"> <div class="comprehensive-output-title">
...@@ -194,22 +199,43 @@ ...@@ -194,22 +199,43 @@
</div> </div>
<div class="page-content-main" style="margin: 1vw 1vh;"> <div class="page-content-main" style="margin: 1vw 1vh;">
<div class="page-title-project"> <%-- <div class="page-title-project">--%>
<div v-for="(item,index) in dataList" <%-- <div v-for="(item,index) in dataList"--%>
:key="index" class="project-title-font" <%-- :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 }} <template slot-scope="scope">
</div> <span class="project-title-font">{{scope.row[colVal.value] | resetData}}</span>
</div> </template>
<div v-for="(temp,index) in queryXMinfoList" </el-table-column>
class="page-title-project"
style="margin-top: 0.8vh;height: 5vh;border: 1px solid #0097FF ;"> </el-table>
<div v-for="(item,index) in queryXMinfoArrary "
:key="index" class="project-title-font" style="opacity: 0.7;"
>
{{ temp[item] }}
</div>
</div>
</div> </div>
<%-- 导入组件--%> <%-- 导入组件--%>
</div> </div>
...@@ -242,33 +268,82 @@ ...@@ -242,33 +268,82 @@
}, },
data() { data() {
return { return {
splicingList:['组拼','加焊','综合'], splicingList: ['组拼', '加焊', '综合'],
querySplicingList:['zp','jh','zh'], querySplicingList: ['zp', 'jh', 'zh'],
ctx:'${ctx}', ctx: '${ctx}',
option:{}, option: {},
option2:{}, option2: {},
factory:'', factory: '',
factoryList:[], factoryList: [],
dataPicker: '20241019', dataPicker: '20241019',
querySplicingObject:[], querySplicingObject: [],
queryGroupCLnfoList:[], queryGroupCLnfoList: [],
queryBJInfoList:[], queryBJInfoList: [],
queryGroup:[], queryGroup: [],
queryZHCLInfoDate:[], queryZHCLInfoDate: [],
queryZHCLInfoArray:[], queryZHCLInfoArray: [],
queryZHCLInfoList:[], queryZHCLInfoList: [],
queryXMinfoArrary:['projName','jhdate','jhcl','sjcl','scjd','fhjd'], queryXMinfoArrary: ['projName', 'jhdate', 'jhcl', 'sjcl', 'scjd', 'fhjd'],
queryXMinfoList:[], queryXMinfoList: [],
dataList:['项目名称','计划完成时间','计划产量','实际产量','生产进度','发货进度'], dataList: ['项目名称', '计划完成时间', '计划产量', '实际产量', '生产进度', '发货进度'],
testList:[], testList: [],
extremes:{}, 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() { mounted() {
this.queryCompanyInfo(); this.queryCompanyInfo();
this.queryMaxDate(); this.queryMaxDate();
...@@ -286,7 +361,7 @@ ...@@ -286,7 +361,7 @@
}, },
methods: { methods: {
initPage(){ initPage() {
this.queryMaxDate(); this.queryMaxDate();
this.queryZCLinfo(); this.queryZCLinfo();
this.queryGroupCLnfo(); this.queryGroupCLnfo();
...@@ -297,7 +372,7 @@ ...@@ -297,7 +372,7 @@
this.queryXMinfo(); this.queryXMinfo();
}, },
handledataPicker(){ handledataPicker() {
this.queryZCLinfo(); this.queryZCLinfo();
this.queryGroupCLnfo(); this.queryGroupCLnfo();
this.setOption(); this.setOption();
...@@ -309,13 +384,13 @@ ...@@ -309,13 +384,13 @@
this.$refs.homepageleft.queryYCLinfo(); this.$refs.homepageleft.queryYCLinfo();
this.$refs.homepageleft.queryNCLinfo(); this.$refs.homepageleft.queryNCLinfo();
}, },
queryCompanyInfo(){ queryCompanyInfo() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
// inInfo.set('requestList','[{\\"ids\\":[\\"show65\\"],\\"params\\":\\"\\"}]') // inInfo.set('requestList','[{\\"ids\\":[\\"show65\\"],\\"params\\":\\"\\"}]')
IPLAT.EiCommunicator.send('HPBI003', 'queryCompanyInfo', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryCompanyInfo', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
if(undefined != res.blocks.result.rows){ if (undefined != res.blocks.result.rows) {
_this.factoryList = res.blocks.result.rows; _this.factoryList = res.blocks.result.rows;
_this.factory = _this.factoryList[0][1] _this.factory = _this.factoryList[0][1]
} }
...@@ -327,12 +402,12 @@ ...@@ -327,12 +402,12 @@
{async: false} {async: false}
); );
}, },
queryMaxDate(){ queryMaxDate() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
IPLAT.EiCommunicator.send('HPSC008', 'queryMaxDate', inInfo, { IPLAT.EiCommunicator.send('HPSC008', 'queryMaxDate', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
if(undefined != res.extAttr.registerDate){ if (undefined != res.extAttr.registerDate) {
_this.dataPicker = res.extAttr.registerDate; _this.dataPicker = res.extAttr.registerDate;
console.log(_this.dataPicker) console.log(_this.dataPicker)
} }
...@@ -344,15 +419,15 @@ ...@@ -344,15 +419,15 @@
{async: false} {async: false}
); );
}, },
queryZCLinfo(){ queryZCLinfo() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory) inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker) inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryZCLinfo', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryZCLinfo', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
console.log('queryZCLinfo',res) console.log('queryZCLinfo', res)
if(undefined != res.extAttr.result[0]){ if (undefined != res.extAttr.result[0]) {
_this.querySplicingObject = res.extAttr.result[0]; _this.querySplicingObject = res.extAttr.result[0];
} }
}, },
...@@ -364,15 +439,15 @@ ...@@ -364,15 +439,15 @@
); );
}, },
//多柱形图 //多柱形图
queryGroupCLnfo(){ queryGroupCLnfo() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory) inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker) inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryGroupCLnfo', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryGroupCLnfo', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
if(undefined != res.extAttr.result){ if (undefined != res.extAttr.result) {
_this.queryGroupCLnfoList =res.extAttr.result _this.queryGroupCLnfoList = res.extAttr.result
} }
}, },
onFail: function (err) { onFail: function (err) {
...@@ -382,14 +457,14 @@ ...@@ -382,14 +457,14 @@
{async: false} {async: false}
); );
}, },
setOption(){ setOption() {
this.option = { this.option = {
textStyle: { textStyle: {
color: '#A4B3C5', color: '#A4B3C5',
fontSize: 14, fontSize: 14,
}, },
grid: { grid: {
top: '5%', // 图表距离容器顶部的距离 top: '8%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间 bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%', left: '2%',
right: '2%', right: '2%',
...@@ -406,20 +481,21 @@ ...@@ -406,20 +481,21 @@
// { product: '生产四组', zp: 72.4, jh: 53.9, zh: 39.1 } // { product: '生产四组', zp: 72.4, jh: 53.9, zh: 39.1 }
// ] // ]
}, },
xAxis: { type: 'category' }, xAxis: {type: 'category'},
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
type: 'bar', type: 'bar',
itemStyle: { color: '#0391FF' }, itemStyle: {color: '#0391FF'},
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
} }
}, },
{ type: 'bar' , {
type: 'bar',
itemStyle: itemStyle:
{ {
color: '#00EBFF' color: '#00EBFF'
...@@ -431,7 +507,7 @@ ...@@ -431,7 +507,7 @@
}, },
{ {
type: 'bar', type: 'bar',
itemStyle: { color: '#05CC26' } , itemStyle: {color: '#05CC26'},
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
...@@ -439,14 +515,14 @@ ...@@ -439,14 +515,14 @@
}] }]
} }
}, },
queryBJInfo(){ queryBJInfo() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory) inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker) inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryBJInfo', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryBJInfo', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
if(undefined != res.extAttr.result){ if (undefined != res.extAttr.result) {
_this.queryBJInfoList = res.extAttr.result _this.queryBJInfoList = res.extAttr.result
} }
}, },
...@@ -458,18 +534,18 @@ ...@@ -458,18 +534,18 @@
); );
}, },
//七天日期 //七天日期
queryZHCLInfo(){ queryZHCLInfo() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory) inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker) inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryZHCLInfo', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryZHCLInfo', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
_this.queryZHCLInfoList = res.extAttr.result; _this.queryZHCLInfoList = res.extAttr.result;
_this.queryZHCLInfoList.forEach(item => { _this.queryZHCLInfoList.forEach(item => {
item.label = { item.label = {
show: true, show: false,
position: 'top' position: 'top'
}; };
}); });
...@@ -503,13 +579,13 @@ ...@@ -503,13 +579,13 @@
); );
}, },
setOption2(){ setOption2() {
this.option2 = { this.option2 = {
textStyle: { textStyle: {
color: '#A4B3C5', color: '#A4B3C5',
fontSize: 14, fontSize: 14,
}, },
tooltip:{ tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
...@@ -533,7 +609,7 @@ ...@@ -533,7 +609,7 @@
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
show:false show: false
} }
}, },
series: this.queryZHCLInfoList, series: this.queryZHCLInfoList,
...@@ -542,14 +618,20 @@ ...@@ -542,14 +618,20 @@
}, },
//项目跟踪进度,没数据 //项目跟踪进度,没数据
queryXMinfo(){ queryXMinfo() {
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
inInfo.set('inqu_status-0-factoryCode',this.factory) inInfo.set('inqu_status-0-factoryCode', this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker) inInfo.set('inqu_status-0-date', this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryXMinfo', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryXMinfo', inInfo, {
onSuccess: function (res) { 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) { onFail: function (err) {
console.error('request_tools----------------->错误信息', err); console.error('request_tools----------------->错误信息', err);
...@@ -574,7 +656,7 @@ ...@@ -574,7 +656,7 @@
} }
}, },
}, },
computed:{ computed: {
barOption() { barOption() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定 // 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.option; return this.option;
...@@ -586,12 +668,11 @@ ...@@ -586,12 +668,11 @@
}, },
}, },
) )
</script> </script>
<style> <style>
html,body { html, body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
padding: 0; padding: 0;
...@@ -603,6 +684,7 @@ ...@@ -603,6 +684,7 @@
background-repeat: repeat-y; background-repeat: repeat-y;
background-position: center; background-position: center;
} }
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
...@@ -620,26 +702,30 @@ ...@@ -620,26 +702,30 @@
margin: 1.3vw 1.3vw; 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; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
div{
div {
display: block; display: block;
unicode-bidi: isolate; unicode-bidi: isolate;
} }
*, :after, :before{
*, :after, :before {
box-sizing: border-box; box-sizing: border-box;
} }
*, :after, ::before{
*, :after, ::before {
box-sizing: border-box; box-sizing: border-box;
} }
.production-header-right{ .production-header-right {
width: 65%; width: 65%;
} }
.production-header-left{
.production-header-left {
margin-left: 1vw; margin-left: 1vw;
height: 100%; height: 100%;
width: 30%; width: 30%;
...@@ -647,13 +733,15 @@ ...@@ -647,13 +733,15 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.production-group-splicing{
.production-group-splicing {
width: 100%; width: 100%;
height: 48px; height: 48px;
display: flex; display: flex;
padding-left: 1vw; padding-left: 1vw;
} }
.group-splicing-font{
.group-splicing-font {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
font-size: 0.8vw; font-size: 0.8vw;
...@@ -663,7 +751,8 @@ ...@@ -663,7 +751,8 @@
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.group-splicing-data{
.group-splicing-data {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
font-size: 1.2vw; font-size: 1.2vw;
...@@ -671,11 +760,13 @@ ...@@ -671,11 +760,13 @@
line-height: 25px; line-height: 25px;
margin-left: 1vw; margin-left: 1vw;
} }
.group-splicing-data:nth-of-type(1){
.group-splicing-data:nth-of-type(1) {
color: #0391FF; color: #0391FF;
} }
/*#0391FF #00EBFF #05CC26*/ /*#0391FF #00EBFF #05CC26*/
.el-input__inner{ .el-input__inner {
width: 10vw; width: 10vw;
height: 4vh; height: 4vh;
background-image: url("${ctx}/common/img/select.png"); background-image: url("${ctx}/common/img/select.png");
...@@ -691,12 +782,14 @@ ...@@ -691,12 +782,14 @@
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 1vw; padding-left: 1vw;
} }
.production-trend-chart{
.production-trend-chart {
background-image: url("${ctx}/common/img/productionTrendChart.png"); background-image: url("${ctx}/common/img/productionTrendChart.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
/* background-position: center; */ /* background-position: center; */
} }
.text-container { .text-container {
width: 60px; width: 60px;
position: relative; position: relative;
...@@ -715,7 +808,8 @@ ...@@ -715,7 +808,8 @@
color: #01A9FF; color: #01A9FF;
line-height: 25px; line-height: 25px;
} }
.production-header-ltext{
.production-header-ltext {
height: 40px; height: 40px;
width: 16vw; width: 16vw;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -726,7 +820,8 @@ ...@@ -726,7 +820,8 @@
align-content: center; align-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.comprehensive-output{
.comprehensive-output {
width: 48%; width: 48%;
height: 36.9vh; height: 36.9vh;
background-image: url("${ctx}/common/img/comprehensive-output.png"); background-image: url("${ctx}/common/img/comprehensive-output.png");
...@@ -735,7 +830,8 @@ ...@@ -735,7 +830,8 @@
background-position: left; background-position: left;
position: relative; position: relative;
} }
.comprehensive-output::before{
.comprehensive-output::before {
content: ""; /* 伪元素需要内容，即使它是空的 */ content: ""; /* 伪元素需要内容，即使它是空的 */
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -749,11 +845,13 @@ ...@@ -749,11 +845,13 @@
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.comprehensive-output-title{
.comprehensive-output-title {
height: 4.5vh; height: 4.5vh;
width: 100%; width: 100%;
} }
.page-title-span{
.page-title-span {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
font-size: 1vw; font-size: 1vw;
...@@ -764,12 +862,14 @@ ...@@ -764,12 +862,14 @@
margin-left: 2vw; margin-left: 2vw;
padding-top: 0.2vh; padding-top: 0.2vh;
} }
.home-header-pagemain{
.home-header-pagemain {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.top-main{
.top-main {
width: 10vw; width: 10vw;
height: 4vh; height: 4vh;
background-image: url("${ctx}/common/img/select.png"); background-image: url("${ctx}/common/img/select.png");
...@@ -778,7 +878,7 @@ ...@@ -778,7 +878,7 @@
background-position: center; background-position: center;
display: flex; display: flex;
align-content: center; align-content: center;
//justify-content: center; / / justify-content: center;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
font-size: 1vw; font-size: 1vw;
...@@ -786,30 +886,35 @@ ...@@ -786,30 +886,35 @@
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 1vw; padding-left: 1vw;
} }
.data-picker{
.data-picker {
width: 10vw; width: 10vw;
height: 4vh; height: 4vh;
margin-left: 1vw; margin-left: 1vw;
font-size: 1vw; font-size: 1vw;
} }
.page-content-main{
.page-content-main {
height: 79%; height: 79%;
overflow: auto; overflow: auto;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0.3vw; width: 0.3vw;
cursor:pointer; cursor: pointer;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(94, 113, 135, 0.5) !important; background-color: rgba(94, 113, 135, 0.5) !important;
cursor:pointer; cursor: pointer;
} }
.page-content-main::-webkit-scrollbar-thumb { .page-content-main::-webkit-scrollbar-thumb {
background-color: rgb(42, 36, 36); background-color: rgb(42, 36, 36);
border-radius: 10px; border-radius: 10px;
} }
.page-title-project{
.page-title-project {
width: 100%; width: 100%;
height: 4vh; height: 4vh;
display: flex; display: flex;
...@@ -817,27 +922,85 @@ ...@@ -817,27 +922,85 @@
border-radius: 2px; border-radius: 2px;
border: 1px solid #000000; border: 1px solid #000000;
} }
.project-title-font{
width: 20%; .project-title-font {
height: 100%;
display: flex; color: #f4f4f4;
font-size: 0.7vw; overflow: hidden;
justify-content: center; flex-wrap: wrap;
align-items: center; font-size: 0.65vw;
color: #fff;
} }
.color-0 { .color-0 {
color: #0391FF; color: #0391FF;
} }
.color-1 { .color-1 {
color: #00EBFF; color: #00EBFF;
} }
.color-2 { .color-2 {
color: #05CC26; color: #05CC26;
} }
.default-color { .default-color {
color: #000000; /* 或其他默认颜色 */ 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> </style>
</body> </body>
</html> </html>
src/main/webapp/HP/BI/HPBI004.jsp
...@@ -256,18 +256,21 @@ ...@@ -256,18 +256,21 @@
querySbNODate:[], querySbNODate:[],
currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss"), currentTime:dayjs().format("YYYY-MM-DD HH:mm:ss"),
lineOption1:'', lineOption1:'',
lineOption2:'' lineOption2:'',
timer: ''
}; };
}, },
mounted() { mounted() {
this.getYesterdayDateFormatted();
setInterval(() => { setInterval(() => {
this.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss") this.currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
}, 1000); }, 1000);
this.queryCompanyInfo(); this.queryCompanyInfo();
this.initPage();
this.setOption(); this.setOption();
this.setOption2(); this.setOption2();
this.getYesterdayDateFormatted();
this.initPage();
this.onSetInterval(); 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