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

baoshiwei

15 小时以前 a3e955e801044d8abc2ec575cdf74a6815b8d963

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

 package.json

@@ -52,6 +52,7 @@
    "ant-design-vue": "^3.2.12",
    "axios": "^0.26.1",
    "china-area-data": "^5.0.1",
    "chinese-to-pinyin": "^1.3.1",
    "clipboard": "^2.0.8",
    "codemirror": "^5.65.3",
    "cron-parser": "^3.5.0",

 pnpm-lock.yaml

ÎļþÌ«´ó

 src/router/routes/index.ts

@@ -58,7 +58,7 @@
export const BigEqp: AppRouteRecordRaw = {
    path: '/bigEqp',
    name: 'BigEqp',
    component: () => import('/src/views/dry/bigScreen/BigEqp-tjt.vue'),
    component: () => import('/@/views/dry/bigScreen/BigEqp-tjt.vue'),
    meta: {
        title: t('big.screen.eqp'),
    },

 src/utils/common/renderUtils.ts

@@ -7,6 +7,8 @@
import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
import { isEmpty } from '/@/utils/is';
import { useMessage } from '/@/hooks/web/useMessage';
import pinyin from 'chinese-to-pinyin';

const { createMessage } = useMessage();

const render = {
@@ -172,4 +174,25 @@
  }
}

/**
 * èŽ·å–中文字符串的全拼
 * @param str ä¸­æ–‡å­—符串
 * @returns æ‹¼éŸ³å­—符串
 */
export function getFullWordSpell(str: string): string {
  if (!str) return '';
  return pinyin(str, { toneToNumber: true });
}

/**
 * èŽ·å–中文字符串的首字母
 * @param str ä¸­æ–‡å­—符串
 * @returns é¦–字母组成的字符串
 */
export function getFirstWordSpell(str: string): string {
  if (!str) return '';
  // èŽ·å–每个字的拼音首字母并连接
  return pinyin(str, { keepRest: true, firstCharacter: true, removeSpace: true });
}

export { render, downloadFile };

 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>

 src/views/dry/bigScreen/BigWorkShop-tjt.vue

@@ -28,9 +28,9 @@
                        <!--                        </div>-->
                    </div>
                    <div class="feed">
                        <div style="width: 700px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between">
                        <div style="width: 800px; margin-left: 50px; display: flex; flex-direction: column; height: 950px; justify-content: space-between">
                            <div style="display: flex; flex-wrap: wrap; justify-content: space-between">
                                <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                                <dv-border-box7 class="toptip">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16"> æ€»æŠ•æ–™é‡ </div>
                                        <div class="stat_value">
@@ -43,7 +43,7 @@
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                                <dv-border-box7 class="toptip">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16"> ç”µé‡æ¶ˆè€— </div>
                                        <div class="stat_value">
@@ -56,7 +56,7 @@
                                        </div>
                                    </div>
                                </dv-border-box7>
                                <dv-border-box7 style="width: 210px; height: 100px; padding: 10px">
                                <dv-border-box7 class="toptip">
                                    <div class="statistics putincolor">
                                        <div class="stat_label font16"> è’¸æ±½æ¶ˆè€— </div>
                                        <div class="stat_value">
@@ -484,12 +484,12 @@
        height: 980px;
        width: 100%;
        margin-top: -100px;
        font-size: 20px;
        font-size: 24px;
    }
    .title {
        height: 200px;
        padding: 20px;
        font-size: 30px;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        color: white;
@@ -518,14 +518,14 @@
    }
    .down {
        padding-left: 683px;
        margin-top: -823px;
        margin-top: -730px;
        display: flex;

        align-content: center;
        justify-content: flex-start;
    }
    .eqpInfoup {
        width: 304px;
        width: 340px;
        height: 400px;
        position: relative;
        display: flex;
@@ -533,7 +533,7 @@
    }

    .eqpInfodown {
        width: 313px;
        width: 340px;
        height: 490px;
        position: relative;
        display: flex;
@@ -542,19 +542,19 @@
    }

    .one {
        margin: 310px 52px;
        margin: 280px 45px;
    }

    .two {
        margin: 248px -45px;
        margin: 218px -45px;
    }

    .three {
        margin: 129px 222px;
        margin: 99px 222px;
    }

    .four {
        margin: 3px 4px;
        margin: -27px 4px;
    }

    .four_down {
@@ -566,7 +566,7 @@

        width: 100%;

        padding: 10px 20px;
        padding: 10px 10px;
    }

    .eqp-name {
@@ -601,15 +601,15 @@

    .eqp-info-up {
        flex: 1;
        padding-top: 108px;
        padding-top: 140px;
        display: flex;
    }

    .weight {
        flex: 1;
        display: flex;
        margin-left: 36px;
        font-size: 20px;
        margin-left: 45px;
        font-size: 24px;
    }

    .eqp-info-down {
@@ -644,7 +644,7 @@
        height: 160px;
        display: flex;
        padding: 10px 20px;
        font-size: 30px;
        font-size: 36px;
        flex-direction: column-reverse;
        align-items: flex-end;
        color: white;
@@ -675,7 +675,7 @@
    }

    .stat_value {
        font-size: 28px;
        font-size: 33px;
    }

    .herb_weight {
@@ -691,7 +691,7 @@
        background: #a0782e;
        border-radius: 50px;
        /* text-align: center; */
        font-size: 18px;
        font-size: 22px;
        color: white;
        display: flex;
        justify-content: center;
@@ -731,11 +731,11 @@
        color: sandybrown;
    }
    .font16 {
        font-size: 16px;
        font-size: 20px;
    }
    .stat_avg {
        width: 100%;
        font-size: 16px;
        font-size: 20px;
        display: flex;
        color: rgb(176, 176, 176);
        justify-content: space-between;
@@ -762,7 +762,7 @@
        content: '';
        position: absolute;
        left: 90px;
        top: 34%;
        top: 39%;
        width: 65px;
        height: 6px;
        background: repeating-linear-gradient(90deg, #5596c7 0 5px, transparent 5px 10px);
@@ -784,4 +784,7 @@
        background-size: 200% 100%;
        animation: flowLight 15s infinite linear;
    }
  .toptip {
    width: 250px; height: 120px; padding: 10px;
  }
</style>

 src/views/dry/components/DryHerbFormulaModal.vue

@@ -1,5 +1,5 @@
<template>
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1100" @ok="handleSubmit">
        <BasicForm @register="registerForm" />
    </BasicModal>
</template>
@@ -15,10 +15,10 @@
    const isUpdate = ref(true)
    //表单配置
    const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({
        //labelWidth: 150,
        labelWidth: 150,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { span: 24 },
        baseColProps: { span: 11 },
    })

    //表单赋值

 src/views/dry/dataDefine/DryHerbFormula.data.ts

@@ -2,6 +2,7 @@
import {render} from "/@/utils/common/renderUtils";
import {rules} from "/@/utils/helper/validator";
import {queryById} from "/@/views/dry/api/DryHerbInfo.api"
import { getFirstWordSpell } from "/@/utils/common/renderUtils";
//列表数据
export const columns: BasicColumn[] = [
    {
@@ -20,12 +21,36 @@
        dataIndex: 'eqpType_dictText',
    },
  {
    title: '配方分类',
    title: '缩写',
    align: 'center',
    dataIndex: 'category',
    dataIndex: 'abbr',
  },
  {
    title: '特种物料',
    align: 'center',
    dataIndex: 'special',
    customRender: ({ text }) => {
      return render.renderDict(text, 'formula_category');
      return render.renderSwitch(text, [
        { text: '是', value: 'true' },
        { text: '否', value: 'false' },
      ])
    },
  },
  {
    title: '轻质物料',
    align: 'center',
    dataIndex: 'light',
    customRender: ({ text }) => {
      return render.renderSwitch(text, [
        { text: '是', value: 'true' },
        { text: '否', value: 'false' },
      ])
    },
  },
  {
    title: '初始含水率',
    align: 'center',
    dataIndex: 'initial',
  },
    {
        title: '目标含水率',
@@ -52,41 +77,25 @@
    align: 'center',
    dataIndex: 'fanSpeed',
  },
    // {
    //     title: '环境温度',
    //     align: 'center',
    //     dataIndex: 'envTemp',
    // },
    // {
    //     title: '环境湿度',
    //     align: 'center',
    //     dataIndex: 'envHum',
    // },

    {
        title: '荡料延时ms',
        title: '启用翻料策略',
        align: 'center',
        dataIndex: 'delay',
        dataIndex: 'strategy',
    customRender: ({ text }) => {
      return render.renderSwitch(text, [
        { text: '是', value: 'true' },
        { text: '否', value: 'false' },
      ])
    },
    },
    // {
    //     title: '翻料次数',
    //     align: 'center',
    //     dataIndex: 'turn',
    // },
  {
    title: '含水率补偿',
    align: 'center',
    dataIndex: 'moisOffset',
  },

  {
    title: '冷风时长',
    align: 'center',
    dataIndex: 'coolingDuration',
  },
    // {
    //     title: '租户id',
    //     align: 'center',
    //     dataIndex: 'tenantId',
    // },

]
//查询数据
export const searchFormSchema: FormSchema[] = [
@@ -115,6 +124,12 @@
          }
          queryById(param).then(res => {
            formModel.name = res.name
            if (res.name) {
              const abbr = getFirstWordSpell(res.name);
              formModel.abbr = abbr.toUpperCase();
            } else {
              formModel.abbr = '';
            }
          })
        },
      }
@@ -123,33 +138,69 @@
            return [{ required: true, message: '请选择药材!' }]
        },
    },
    {
        label: '配方名称',
        field: 'name',
        component: 'Input',
  {
    label: '配方名称',
    field: 'name',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [{ required: true, message: '请输入配方名称!' }, { ...rules.duplicateCheckRule('dry_herb_formula', 'name', model, schema)[0] }]
    },
    },
    componentProps: ({ formModel }) => {
      return {
        onChange: (e) => {
          const value = e.target.value;
          // ç”Ÿæˆæ‹¼éŸ³é¦–字母并赋值给 abbr å­—段
          if (value) {
            const abbr = getFirstWordSpell(value);
            formModel.abbr = abbr.toUpperCase();
          } else {
            formModel.abbr = '';
          }
        }
      };
    },
  },

    {
        label: '设备类型',
        field: 'eqpType',
        component: 'JSearchSelect',
        componentProps: {
            dict: 'dry_eqp_type,name,id',
            dict: 'dry_eqp_type,name,id'
        },
        dynamicRules: ({ model, schema }) => {
            return [{ required: true, message: '请设备设备类型!' }]
            return [{ required: true, message: '请选择设备类型!' }]
        },
    defaultValue: '1952566592372215810',
    },
  {
    label: '配方分类',
    field: 'category',
    component: 'JDictSelectTag',
    componentProps: {
      dictCode: 'formula_category',
      placeholder: '请选择配方分类',
      stringToNumber: true,
    label: '首字母缩写',
    field: 'abbr',
    component: 'Input'
  },
  {
    label: '特种物料',
    field: 'special',
    component: 'Switch',
    defaultValue: false
  },
  {
    label: '轻质物料',
    field: 'light',
    component: 'Switch',
    defaultValue: false
  },
  {
    label: '初始含水率',
    field: 'initial',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
    renderComponentContent: () => {
      return {
        suffix: () => '%',
      }
    },
  },
    {
@@ -217,71 +268,13 @@
      }
    },
  },
    // {
    //     label: '环境温度',
    //     field: 'envTemp',
    //     component: 'Input',
    //     dynamicRules: ({ model, schema }) => {
    //         return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    //     },
    //     renderComponentContent: () => {
    //         return {
    //             suffix: () => '℃',
    //         }
    //     },
    // },
    // {
    //     label: '环境湿度',
    //     field: 'envHum',
    //     component: 'Input',
    //     dynamicRules: ({ model, schema }) => {
    //         return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    //     },
    //     renderComponentContent: () => {
    //         return {
    //             suffix: () => 'rh',
    //         }
    //     },
    // },

    {
        label: '荡料延时',
        field: 'delay',
        component: 'Input',
        dynamicRules: ({ model, schema }) => {
            return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
        },
        renderComponentContent: () => {
            return {
                suffix: () => 'ms',
            }
        },
        label: '启用翻料策略',
        field: 'strategy',
    component: 'Switch',
    defaultValue: false,
    },
    // {
    //     label: '翻料次数',
    //     field: 'turn',
    //     component: 'Input',
    //     dynamicRules: ({ model, schema }) => {
    //         return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    //     },
    //     renderComponentContent: () => {
    //         return {
    //             suffix: () => '次',
    //         }
    //     },
    // },
  {
    label: '含水率补偿',
    field: 'moisOffset',
    component: 'Input',
    dynamicRules: ({ model, schema }) => {
      return [{ required: false }, { pattern: /^-?\d+\.?\d*$/, message: '请输入数字!' }]
    },
    renderComponentContent: () => {
      return {
        suffix: () => '%',
      }
    },
  },
  {
    label: '冷风时长',
    field: 'coolingDuration',

 yarn.lock

ÎļþÌ«´ó