优化配方维护功能-增加简写首字母自动填充，优化车间大屏和设备大屏界面

baoshiwei

9 小时以前 a3e955e801044d8abc2ec575cdf74a6815b8d963

 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">&gt;{{ realData?.efficAvg?.toFixed(2) }} 优 </div>
                              <div class="label bad">&lt;{{ ((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">&gt;{{ realData?.steamAvg?.toFixed(2) }} 差</div>
                              <div class="label good">&lt;{{ ((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">&gt;{{ realData?.wattAvg?.toFixed(3) }} 差</div>
                              <div class="label good">&lt;{{ ((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>