From a3e955e801044d8abc2ec575cdf74a6815b8d963 Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期四, 11 九月 2025 15:30:36 +0800
Subject: [PATCH] 优化配方维护功能-增加简写首字母自动填充，优化车间大屏和设备大屏界面
---
src/views/dry/bigScreen/BigEqp-tjt.vue | 332 +++++++++++++++++++------------------------------------
1 files changed, 116 insertions(+), 216 deletions(-)
diff --git a/src/views/dry/bigScreen/BigEqp-tjt.vue b/src/views/dry/bigScreen/BigEqp-tjt.vue
index 120aea8..4cbfeac 100644
--- a/src/views/dry/bigScreen/BigEqp-tjt.vue
+++ b/src/views/dry/bigScreen/BigEqp-tjt.vue
@@ -6,59 +6,59 @@
<div class="leftEqp">
<div style="width: 373px">
<div class="herbInfo">
- <dv-border-box7 class="curEqp">
+ <dv-border-box13 class="curEqp">
<div style="display: flex">
<div style="padding-top: 20px; padding-left: 10px" @click="back">
<Icon style="color: powderblue" icon="ion:caret-back-sharp" :size="35" />
</div>
<div class="eqpName" style="text-align: right" @click="changeEqp">
- <div class="mainInfo" style="font-size: 26px">{{ eqp?.name }}</div>
+ <div class="mainInfo" style="font-size: 31px">{{ eqp?.name }}</div>
<div class="subhead">{{ eqp?.type }}</div>
<dv-decoration-1 style="width: 240px; height: 90px; margin-left: 20px" />
<!-- 璁惧锛歿{ eqp.name }}</div>
<div class="eqpName">鍨嬪彿锛歿{ eqp.type }}</div> -->
</div>
</div>
- </dv-border-box7>
- <dv-border-box7 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }">
+ </dv-border-box13>
+ <dv-border-box13 class="curHerb" :style="{ 'background-image': 'url(' + getHerbImageUrl(realData?.herbImage) + ')' }">
<div class="eqpName" style="margin-left: 156px; height: 190px">
- <div class="mainInfo" style="font-size: 26px">{{ realData?.herbName }}</div>
+ <div class="mainInfo" style="font-size: 31px">{{ realData?.herbName }}</div>
<div class="subhead">骞茬嚗閰嶆柟</div>
</div>
<div class="formula">
- <div class="formulaItem">
- <Icon style="color: powderblue" icon="la:box" :size="38" />
- <div>
- <div class="mainInfo2">{{ realData?.feed || 0 }} 绛�</div>
- <div class="subhead2">鎶曟枡閲�</div>
- </div>
- </div>
+<!-- <div class="formulaItem">-->
+<!-- <Icon style="color: powderblue" icon="la:box" :size="38" />-->
+<!-- <div>-->
+<!-- <div class="mainInfo2">{{ realData?.feed || 0 }} 绛�</div>-->
+<!-- <div class="subhead2">鎶曟枡閲�</div>-->
+<!-- </div>-->
+<!-- </div>-->
<div class="formulaItem">
<Icon style="color: red" icon="bx:wind" :size="35" />
<div>
<div class="mainInfo2">{{ realData?.windTemp || 0 }} 掳C</div>
- <div class="subhead2">鐑</div>
+ <div class="subhead2">鐑娓╁害</div>
</div>
</div>
<div class="formulaItem">
<Icon style="color: green" icon="tabler:target-arrow" :size="35" />
<div>
<div class="mainInfo2">{{ realData?.target || 0 }} %</div>
- <div class="subhead2">鐩爣</div>
+ <div class="subhead2">鐩爣鍚按鐜�</div>
</div>
</div>
</div>
<!-- <div class="eqpName">{{ realData?.herbName }}</div>
<div class="eqpName">{{ realData?.feed }} 绛�</div> -->
- </dv-border-box7>
+ </dv-border-box13>
</div>
- <!-- <dv-border-box7 class="infoChart" style="margin-left: 0px;">
+ <!-- <dv-border-box13 class="infoChart" style="margin-left: 0px;">
<div class="chartTittle">椋庢満棰戠巼</div>
<div class="outDiv" style="padding-top: 10px">
<div id="fanFreq" style="width: 240px; height: 240px"></div>
</div>
- </dv-border-box7> -->
- <dv-border-box7 class="infoChart" style="margin-left: 0px">
+ </dv-border-box13> -->
+ <dv-border-box13 class="infoChart" style="margin-left: 0px">
<div class="chartTittle">鍚按鐜�</div>
<div class="outDiv" style="padding-top: 20px">
<div class="leftData">
@@ -81,10 +81,10 @@
</div>
<div id="moisture" style="width: 170px; height: 170px"></div>
</div>
- <div class="subhead2" style="margin-top: -37px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div>
- </dv-border-box7>
+ <div class="subhead2" style="margin-top: -54px; padding-left: 205px; font-weight: bold">瀹炴椂鍚按鐜�</div>
+ </dv-border-box13>
</div>
- <dv-border-box7 class="leftTop">
+ <dv-border-box13 class="leftTop">
<div class="leftTop0">
<div class="leftTop1">
<Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
@@ -104,7 +104,7 @@
<div class="outDiv eqpStatus">
<div
style="
- font-size: 28px;
+ font-size: 33px;
color: white;
background-color: #1595ea;
@@ -348,24 +348,24 @@
</div>
</div>
- </dv-border-box7>
- <dv-border-box7 class="infoChart" style="margin-left: 0px; margin-right: 10px">
+ </dv-border-box13>
+ <dv-border-box13 class="infoChart" style="margin-left: 0px; margin-right: 10px">
<div class="chartTittle">椋庣娓╁害</div>
<div class="outDiv">
<div id="bellowsTemp" style="width: 230px; height: 230px">
- <Icon icon="emojione:hourglass-with-flowing-sand" :size="50" />
+
</div>
</div>
- </dv-border-box7>
- <dv-border-box7 class="leftMid">
+ </dv-border-box13>
+ <dv-border-box13 class="leftMid">
<div class="chartTittle">瀹炴椂杩涘害</div>
<div id="efficiencyLine" style="width: 907px; height: 180px; margin-top: -10px"></div>
- <div style="height: 10px; display: flex; width: 907px; padding: 0 60px; justify-content: space-between">
+ <div style="height: 10px; font-size: 16px; display: flex; width: 907px; padding: 0 60px; justify-content: space-between">
<div style="width: 100px; height: 20px">{{ realData?.dryTime | 0 }} min</div>
<div style="width: 100px; height: 20px; text-align: right">{{ realData?.totalTime | 0 }} min</div>
</div>
<div id="progressBar" style="width: 907px; height: 80px"></div>
- </dv-border-box7>
+ </dv-border-box13>
<!-- <div class="outDiv">
<div style="height: 100px; width: 400px">
@@ -387,17 +387,17 @@
</div>
<div class="rightInfo">
<div class="rightTop">
- <dv-border-box7 class="tempMoisChart">
+ <dv-border-box13 class="tempMoisChart">
<div :id="'moisChart'" style="width: 690px; height: 420px"></div>
- </dv-border-box7>
+ </dv-border-box13>
</div>
<div class="rightTwo">
- <dv-border-box7 class="infoChart">
+ <dv-border-box13 class="infoChart">
<div class="chartTittle">
骞茬嚗鏁堢巼(kg/h)
<div class="rightLabel">
- <div class="label good">>{{ realData?.efficAvg?.toFixed(2) }} 浼� </div>
- <div class="label bad"><{{ ((realData?.efficAvg|0) * 0.9)?.toFixed(2) }} 宸�</div>
+ <div class="label good"> 浼� </div>
+ <div class="label bad"> 宸�</div>
</div>
</div>
<div class="outDiv" style="padding-top: 20px">
@@ -423,7 +423,7 @@
<div class="barBack">
<div class="barDiv" :style="{ height: realData?.xlsHeight }"></div>
</div>
- <div style="line-height: 20px">
+ <div class="barBottom" >
棰濆畾
<br />
鏁堢巼
@@ -439,7 +439,7 @@
>
</div>
</div>
- <div style="line-height: 20px">
+ <div class="barBottom">
瀹炴椂
<br />
鏁堢巼
@@ -447,14 +447,15 @@
</div>
</div>
</div>
- </dv-border-box7>
+ </dv-border-box13>
- <dv-border-box7 class="infoChart">
+ <dv-border-box13 class="infoChart">
<div class="chartTittle"
>钂告苯娑堣��(m鲁/kg)
<div class="rightLabel">
- <div class="label bad">>{{ realData?.steamAvg?.toFixed(2) }} 宸�</div>
- <div class="label good"><{{ ((realData?.steamAvg|0) * 0.9).toFixed(2) }} 浼�</div>
+
+ <div class="label good"> 浼�</div>
+ <div class="label bad"> 宸�</div>
</div>
</div>
<div class="outDiv" style="padding-top: 20px">
@@ -474,7 +475,7 @@
<div class="barBack">
<div class="barDiv" :style="{ height: realData?.zqsHeight }"></div>
</div>
- <div style="line-height: 20px">
+ <div class="barBottom">
棰濆畾
<br />
娑堣��
@@ -490,7 +491,7 @@
>
</div>
</div>
- <div style="line-height: 20px">
+ <div class="barBottom">
瀹炴椂
<br />
娑堣��
@@ -498,19 +499,20 @@
</div>
</div>
</div>
- </dv-border-box7>
- <dv-border-box7 class="infoChart">
+ </dv-border-box13>
+ <dv-border-box13 class="infoChart">
<div class="chartTittle">鏁堢巼瀵规瘮</div>
<div class="outDiv" style="padding-top: 10px">
<div id="compare" style="width: 300px; height: 250px"></div>
</div>
- </dv-border-box7>
- <dv-border-box7 class="infoChart">
+ </dv-border-box13>
+ <dv-border-box13 class="infoChart">
<div class="chartTittle">
<div> 鐢佃兘娑堣��(kWh/kg)</div>
<div class="rightLabel">
- <div class="label bad">>{{ realData?.wattAvg?.toFixed(3) }} 宸�</div>
- <div class="label good"><{{ ((realData?.wattAvg|0) * 0.9).toFixed(3) }} 浼�</div>
+
+ <div class="label good"> 浼�</div>
+ <div class="label bad"> 宸�</div>
</div>
</div>
<div class="outDiv" style="padding-top: 20px">
@@ -530,7 +532,7 @@
<div class="barBack">
<div class="barDiv" :style="{ height: realData?.dnsHeight }"></div>
</div>
- <div style="line-height: 20px">
+ <div class="barBottom">
棰濆畾
<br />
娑堣��
@@ -545,7 +547,7 @@
:style="[realData?.dnrHeight && { height: realData?.dnrHeight }]"
></div>
</div>
- <div style="line-height: 20px">
+ <div class="barBottom">
瀹炴椂
<br />
娑堣��
@@ -553,7 +555,7 @@
</div>
</div>
</div>
- </dv-border-box7>
+ </dv-border-box13>
</div>
</div>
</div>
@@ -774,11 +776,12 @@
text: '鍚按鐜�/娓╁害瓒嬪娍',
textStyle: {
color: '#fff',
- fontSize: 15,
+ fontSize: 18,
},
},
tooltip: {
trigger: 'axis',
+
},
grid: {
left: 50,
@@ -790,6 +793,7 @@
right: 60,
textStyle: {
color: '#fff',
+ fontSize: 16,
},
},
// toolbox: {
@@ -808,6 +812,7 @@
type: 'value',
axisLabel: {
color: '#fff',
+ fontSize: 16,
},
//boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@@ -831,6 +836,7 @@
boundaryGap: ['10%', '10%'],
axisLabel: {
color: '#fff',
+ fontSize: 16,
},
splitLine: {
lineStyle: {
@@ -975,41 +981,41 @@
max: 80,
splitNumber: 8,
itemStyle: {
- color: '#FFAB91',
+ color: '#973535',
},
progress: {
show: true,
- width: 10,
+ width: 14,
},
pointer: {
show: false,
},
axisLine: {
lineStyle: {
- width: 10,
+ width: 14,
},
},
axisTick: {
- distance: -15,
+ distance: -20,
splitNumber: 5,
- length: 3,
+ length: 4,
lineStyle: {
width: 1,
- color: '#999',
+ color: '#973535',
},
},
splitLine: {
- distance: -18,
- length: 6,
+ distance: -24,
+ length: 7,
lineStyle: {
width: 2,
- color: '#999',
+ color: '#973535',
},
},
axisLabel: {
- distance: -13,
+ distance: -24,
color: '#fff',
- fontSize: 12,
+ fontSize: 20,
},
anchor: {
show: false,
@@ -1023,7 +1029,7 @@
lineHeight: 40,
borderRadius: 8,
offsetCenter: [0, '0%'],
- fontSize: 20,
+ fontSize: 24,
fontWeight: 'bolder',
formatter: '{value}掳C',
color: 'inherit',
@@ -1042,7 +1048,7 @@
min: 0,
max: 80,
itemStyle: {
- color: '#FD7347',
+ color: '#973535',
},
progress: {
show: true,
@@ -1177,28 +1183,7 @@
// }
const progressBarOption = {
- // tooltip: {
- // trigger: 'axis',
- // axisPointer: {
- // // Use axis to trigger tooltip
- // type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
- // },
- // },
- // color: [
- // '#0653F6',
- // // '#1B61E7',
- // '#3673D5',
- // // '#4A80C8',
- // '#608FB8',
- // // '#719BAD',
- // '#82A6A1',
- // // '#8DAD9A',
- // '#9CB790',
- // // '#A7BE88',
- // '#B3C681',
- // '#CAD671',
- // '#DBE165',
- // ],
+
animation: false, // 鍏抽棴鍔ㄧ敾
color: ['#397FD7', '#2D8CDE', '#239CE5', '#1DA4E8', '#14B2EF', '#0BC4FA', '#02D2FF', '#19EEFF', '#33FAFF', '#5EFFF8', '#60FFFE', '#64FAFF', '#70FFFF', '#7BFFFF', '#88FFFD', '#97FFFF', '#A5FFFD', '#B1FFFF', '#BFFFFF', '#CAFFFF'],
grid: {
@@ -1231,112 +1216,7 @@
type: 'category',
data: ['鏃堕棿'],
},
- series: [
- // {
- // name: '绗竴闃舵',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // barWidth: 26,
- // emphasis: {
- // focus: 'series',
- // },
- // data: [30],
- // },
- // {
- // name: '绗簩闃舵',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [30],
- // },
- // {
- // name: 'Affiliate Ad',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [20],
- // },
- // {
- // name: 'Video Ad',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [15],
- // },
- // {
- // name: 'Search Engine',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [10],
- // },
- // {
- // name: 'df Engine',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [5],
- // },
- // {
- // name: 'df Engine',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [5],
- // },
- // {
- // name: 'df Engine',
- // type: 'bar',
- // stack: 'total',
- // label: {
- // show: true,
- // },
- // emphasis: {
- // focus: 'series',
- // },
- // data: [
- // {
- // value: 35,
- // itemStyle: {
- // color: '#c0c0c0',
- // },
- // },
- // ],
- // },
- ],
+ series: [],
}
const efficiencyLineOption = {
@@ -1355,6 +1235,7 @@
right: 60,
textStyle: {
color: '#fff',
+ fontSize: 16,
},
},
xAxis: {
@@ -1389,7 +1270,7 @@
name: '骞茬嚗鏁堢巼',
type: 'line',
lineStyle: {
- width: 1,
+ width: 2,
},
// [[15,10], [15,11], [10,6], [7.5,12], [5,12], [2.5,5], [2.5,9], [1,7]]
data: [],
@@ -1398,9 +1279,14 @@
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
+ // label: {
+ // color: '#fff',
+ // fontSize: 16,
+ // },
},
markLine: {
symbol: 'none',
+ width: 2,
data: [
{
name: '棰濆畾',
@@ -1410,6 +1296,7 @@
label: {
formatter: '{b}\n{c}',
color: '#fff',
+ fontSize: 16,
},
},
// markLine: {
@@ -1443,18 +1330,22 @@
},
type: 'category',
data: ['1#', '2#', '3#', '4#', '5#', '6#'],
+ axisLabel: {
+ color: '#fff',
+ fontSize: 16,
+ },
},
series: [
{
name: '2011',
type: 'bar',
- barWidth: 10,
+ barWidth: 16,
data: [0, 0, 0, 0, 0, 0],
label: {
show: true,
position: 'right',
valueAnimation: true,
-
+ fontSize: 16,
color: '#fff',
},
},
@@ -1474,7 +1365,7 @@
// 鍔ㄦ�佽鍙栧浘鐗�
function getHerbImageUrl(name: string) {
//return new URL(`/src/assets/images/dry/yaocai/${name}`, import.meta.url).href
- return "";
+ return "/src/assets/images/dry/yaocai/yc3.jpg";
}
// 鍔ㄦ�佽鍙栧浘鐗�
@@ -1650,6 +1541,7 @@
stack: 'total',
label: {
show: true,
+ fontSize: 16
},
emphasis: {
focus: 'series',
@@ -1671,6 +1563,7 @@
stack: 'total',
label: {
show: true,
+ fontSize: 16
},
emphasis: {
focus: 'series',
@@ -1695,6 +1588,7 @@
stack: 'total',
label: {
show: true,
+ fontSize: 16
},
emphasis: {
focus: 'series',
@@ -1791,6 +1685,7 @@
label: {
formatter: '{b}\n{c}%',
color: '#fff',
+ fontSize: 16,
},
},
},
@@ -2304,23 +2199,23 @@
.mainInfo {
line-height: 33px;
padding-left: 10px;
- font-size: 30px;
+ font-size: 35px;
color: white;
}
.subhead {
- color: #cdcdcd;
- font-size: 16px;
+ color: white;
+ font-size: 20px;
padding-left: 10px;
}
.mainInfo2 {
line-height: 20px;
- padding-left: 0px;
- font-size: 16px;
+ padding-left: 5px;
+ font-size: 24px;
}
.subhead2 {
- color: #cdcdcd;
- font-size: 12px;
+ color: white;
+ font-size: 16px;
padding-left: 0px;
}
.zhengqi {
@@ -2359,8 +2254,8 @@
display: flex;
justify-content: center;
align-items: center;
- font-size: 30px;
- color: #727272;
+ font-size: 36px;
+ color: white;
}
.leftTop2 {
width: 266px;
@@ -2369,8 +2264,8 @@
display: flex;
justify-content: center;
align-items: center;
- font-size: 30px;
- color: #727272;
+ font-size: 36px;
+ color: white;
}
.leftTop3 {
width: 363px;
@@ -2413,9 +2308,10 @@
border-radius: 10px;
}
.chartTittle {
+ margin-top:10px;
width: 362px;
height: 30px;
- font-size: 16px;
+ font-size: 20px;
display: flex;
justify-content: space-between;
padding: 15px 15px;
@@ -2434,6 +2330,7 @@
}
.barTop {
+ font-size: 17px;
width: 55px;
height: 30px;
}
@@ -2464,7 +2361,7 @@
width: 50px;
border-radius: 4px;
height: 20px;
- font-size: 10px;
+ font-size: 14px;
line-height: 21px;
}
.good {
@@ -2472,7 +2369,7 @@
}
.mainInfo3 {
- font-size: 24px;
+ font-size: 28px;
}
.herbInfo {
width: 362px;
@@ -2493,7 +2390,6 @@
height: 260px;
/* background: white;
border-radius: 10px; */
- opacity: 0.7;
background-repeat: no-repeat;
background-size: 120px;
background-position: 14px 10px;
@@ -2580,7 +2476,7 @@
.fault {
padding: 10px;
height: 60px;
- font-size: 26px;
+ font-size: 30px;
width: 100%;
text-align: right;
color: red;
@@ -2603,18 +2499,18 @@
.formulaItem {
display: flex;
justify-content: center;
- width: 85px;
+ width: 115px;
height: 40px;
}
.eqpInfoText {
- font-size: 18px;
+ font-size: 22px;
font-weight: bold;
}
:deep() .ant-slider-mark-text {
padding-left: 15px;
- font-size: 10px;
+ font-size: 14px;
}
:deep() .ant-slider-mark-text::before {
content: '';
@@ -2734,4 +2630,8 @@
height: 24px;
background: gray; border-radius: 5px; font-weight: bold; color: orange;
}
+
+ .barBottom{
+ line-height: 20px; font-size: 16px
+ }
</style>
--
Gitblit v1.9.3