开发IN02模块。还没开发完

src/pages/components/Fac.vue

@@ -2,7 +2,7 @@
     <!--这是全厂模块的模块展示内容-->
     <div for="FAC" id="top" class="top topfac" @click="switchIndex">
         <div title="返回主视图"
-            style="cursor: pointer;position: absolute;right: 40px;top: 25px;height: 38px;width: 38px;text-align: center;"
+            style="cursor: pointer;position: absolute;right: 40px;top: 32px;height: 38px;width: 38px;text-align: center;"
             @click.stop="backMasterViewByFac"><img src="../../assets/image/view.png"></div>
     </div>
     <div class="bg1"></div>

src/pages/components/In02.vue

@@ -1,5 +1,8 @@
 <template>
     <!--这是经编模块的模块展示内容-->
+    <div class="bg23">
+        <div class="bg32"></div>
+    </div>
     <div @click="HideWindow">
         <div for="IN02" id="search"><input v-model="seachValue" type="text" placeholder="请输入设备编号" maxlength="4" @keyup.enter="search"><img
         style="position: absolute;top: 20%;right: 5px;" src="../../assets/image/search_icon.png" class="search_btn" @click="search"></div>
@@ -10,172 +13,136 @@
             </template>
         </div>
         <div for="IN02"  id="top" class="top top02">
+            <!--
             <div ref="func_menu_btn" id="func_menu_btn" title=""
                 @click.stop="showFuncMenuList"
                 style="cursor: pointer;position: absolute;right: 176px;top: 25px;height: 38px;width: 38px;"><img src="../../assets/image/menu1.png"></div>
-            <div ref="autoplayer_btn" id="autoplayer_btn" title="切换自动漫游" style="cursor: pointer;position: absolute;right: 120px;top: 25px;height: 38px;width: 38px;" @click="switchAutoPlayer">
+            -->
+            <div ref="autoplayer_btn" id="autoplayer_btn" title="切换自动漫游" style="cursor: pointer;position: absolute;right: 80px;top: 32px;height: 38px;width: 38px;" @click="switchAutoPlayer">
                 <img v-if="AutoPlayer" src="../../assets/image/auto3d_start.png">
                 <img v-else src="../../assets/image/auto3d_stop.png">
             </div>
+            <!--
             <div ref="imp_btn" id="imp_btn" title="导出数据" style="cursor: pointer;position: absolute;right: 65px;top: 25px;height: 38px;width: 38px;" @click.stop="showImpMenu">
                 <img  src="../../assets/image/imp_icon.png">
             </div>
+            -->
             <div title="返回主视图"
-                style="cursor: pointer;position: absolute;right: 10px;top: 25px;height: 38px;width: 38px;text-align: center;"
+                style="cursor: pointer;position: absolute;right: 32px;top: 32px;height: 38px;width: 38px;text-align: center;"
                 @click="backMasterViewBy02"><img src="../../assets/image/view.png"></div>
         </div>
         <div v-if="isShowFuncMenuList" id="func_menulist">
             <div  id="maogao_btn" title="" style="cursor: pointer;" @click="OpenMaoGaoWin">毛高比重</div>
             <div  id="bpb_fx" title="" style="cursor: pointer;" @click="OpenBPBWin">白坯布预测分析</div>
         </div>
-        <div for="IN02" id="dev_state" show="设备状态">
-            <div class="title"></div>
-            <div class="content">
-                <div style="float: left;width: 100%;margin-top: 10px;">
-                    <div title="设备总数"
-                        style="float: left;width: 45%;margin-left: 4%;background: linear-gradient( 89deg, rgba(33,62,117,0.8) 0%, rgba(33,62,117,0) 100%);">
-                        <img src="../../assets/image/total_icon.png" style="float: left;width: 58px;">
-                        <span style="float: left;font-weight: 500;font-size: 15px;color: #9ED1FF;line-height: 22px;text-align: left;width: 60%;margin-left: 5%;">设备总数</span>
-                        <span id="dev_state_total"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 400;font-size: 30px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 5%;color: #FFFFFF;">{{ alarmjsondata.device.total }}</span>
-                        <span style="float: left;font-size: 22px;color: #49A8FF;">(台)</span>
-                    </div>
-                    <div title="运行数量"
-                        style="float: left;width: 45%;margin-left: 4%;background: linear-gradient( 89deg, rgba(33,62,117,0.8) 0%, rgba(33,62,117,0) 100%);cursor: pointer;"
-                        @click.stop="showImpWin({name:'停机状态分析',path:'/imp-00',code:'00'})">
-                        <img src="../../assets/image/total_icon.png" style="float: left;width: 58px;">
-                        <span style="float: left;font-weight: 500;font-size: 15px;color: #9ED1FF;line-height: 22px;text-align: left;width: 60%;margin-left: 5%;">运行数量</span>
-                        <span id="dev_state_runtotal"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 400;font-size: 30px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 5%;color: #FFFFFF;">{{ alarmjsondata.device.online }}</span>
-                        <span style="float: left;font-size: 22px;color: #49A8FF;">(台)</span>
-                    </div>
+        <div for="IN02" id="dev_state" show="设备状态" style="width: 790px;height: calc(182px*var(--hRate));left: 50%;margin-left: -395px;top:78%;">
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>生产情况</span><span style="color:#27e6ff">（今日）</span>
+            </div>
+            <div class="data_row content" style="display:flex;width:100%;height:calc(134px*var(--hRate));font-weight:normal;font-size: 24px;">
+                <div style="width:15%;">
+                    <div class="littleFont">米数</div>
+                    <div class="label">{{ indexjsondata.efficiency.totalLength||'-' }}<span  class="unitname">米</span></div>
+                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">重量</div>
+                    <div class="label">{{ indexjsondata.efficiency.totalWeight||'-' }}<span  class="unitname">吨</span></div>
                 </div>
-                <div class="stat" style="float: left;width: 100%;margin-top: 10px;">
-                    <div title="落米停机数" style="float: left;width: 33%;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="number" attr="stop6"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 400;font-size: 20px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;">{{ alarmjsondata.device.stop6 }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(台)</span>
-                        <span style="float: left;font-weight: 500;font-size: 14px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">落米停机数</span>
-                    </div>
-                    <div title="断纱停机数" style="float: left;width: 33%;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="number" attr="stop2"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 400;font-size: 20px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;color: #FFB342;">{{ alarmjsondata.device.stop2 }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(台)</span>
-                        <span style="float: left;font-weight: 500;font-size: 14px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">断纱停机数</span>
-                    </div>
-                    <div title="停经片停机数" style="float: left;width: 33%;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="number" attr="stop1"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 400;font-size: 20px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;color: #FFB342;">{{ alarmjsondata.device.stop1 }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(台)</span>
-                        <span style="float: left;font-weight: 500;font-size: 14px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">停经片停机数</span>
-                    </div>
-                    <div title="叫料数" style="float: left;width: 33%;margin-top: 7px;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="number" attr="stop8"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 700;font-size: 22px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;color: red;">{{ alarmjsondata.device.stop8 }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(台)</span>
-                        <span style="float: left;font-weight: 500;font-size: 14px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">叫料数</span>
-                    </div>
-                    <div title="其他停机数" style="float: left;width: 33%;margin-top: 7px;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="number" attr="alarm"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 700;font-size: 22px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;color: red;">{{ alarmjsondata.device.alarm }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(台)</span>
-                        <span style="float: left;font-weight: 500;font-size: 14px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">其他停机数</span>
-                    </div>
-                    <div title="盘头小于200圈" style="float: left;width: 33%;margin-top: 7px;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="number" attr="stopPan"
-                            style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 700;font-size: 22px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;color: red;">{{ alarmjsondata.device.stopPan }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(台)</span>
-                        <span style="float: left;font-weight: 500;font-size: 12px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">盘头小于200圈</span>
-                    </div>
-                    <div title="开机率" style="float: left;width: 33%;margin-top: 7px;color: #FFB342;">
-                        <img src="../../assets/image/t1.png" style="float: left;width: 40px;">
-                        <span class="runningRatio" style="float: left;font-family: Bebas Neue, Bebas Neue;font-weight: 700;font-size: 22px;line-height: 30px;text-align: left;font-style: normal;text-transform: none;margin-left: 1%;color: red;">{{ indexjsondata.device.runningRatio }}</span>
-                        <span style="float: left;font-size: 15px;margin-top: 6px;">(%)</span>
-                        <span style="float: left;font-weight: 500;font-size: 12px;color: #FFFFFF;line-height: 22px;text-align: left;width: 65%;margin-left: 1%;">开机率</span>
-                    </div>
+                <div style="margin: 0 5%; width:1px;border-left:1px solid #168895 ;"></div>
+                <div style="width:11%;height: 100%;">
+                    <div class="littleFont">设备<span style="color:#27e6ff">（开机）</span></div>
+                    <div class="label">{{ alarmjsondata.device.online||'-' }}<span  class="unitname">台</span></div>
+                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">设备<span style="color:#27e6ff">（总数）</span></div>
+                    <div class="label">{{ alarmjsondata.device.total||'-' }}<span  class="unitname">台</span></div>
+                </div>
+                <div style="margin: 0 5%; width:1px;border-left:1px solid #168895 ;"></div>
+                <div>
+                    <div class="littleFont">落米停机数</div>
+                    <div class="label">{{ alarmjsondata.device.stop6||'-' }}<span class="unitname">台</span></div>
+                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">其他停机数</div>
+                    <div class="label">{{ alarmjsondata.device.alarm||'-' }}<span class="unitname">台</span></div>
+                </div>
+                <div style="width:15%;">
+                    <div class="littleFont">断纱停机数</div>
+                    <div class="label">{{ alarmjsondata.device.stop2||'-' }}<span class="unitname">台</span></div>
+                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">盘头小于200圈</div>
+                    <div class="label">{{ alarmjsondata.device.stopPan||'-' }}<span class="unitname">台</span></div>
+                </div>
+                <div>
+                    <div class="littleFont">停经片停机数</div>
+                    <div  class="label">{{ alarmjsondata.device.stop1||'-' }}<span class="unitname">台</span></div>
+                    <div class="littleFont" style="margin-top: calc(30px*var(--hRate));">开机率</div>
+                    <div class="label">{{ indexjsondata.device.runningRatio||'-' }}<span class="unitname">台</span></div>
+                </div>
+                <div>
+                    <div class="littleFont">叫料数</div>
+                    <div class="label">{{ alarmjsondata.device.stop8||'-' }}<span class="unitname">台</span></div>
                 </div>
             </div>
         </div>
         <div for="IN02" id="dev_alarm" ref="dev_alarm" show="当前告警" style="color: #ffffff;font-size: 14px;">
-            <div class="title">{{AlarmData.length==0?'当前无告警':''}}</div>
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>当前告警</span>
+            </div>
             <div class="content">
-                <table style="width: 100%;font-weight: bold;" cellspacing=0>
+                <table style="width: 100%;font-weight:normal;" cellspacing=0>
                     <thead>
                     <tr>
-                        <td style="width: 30%">设备编号</td>
-                        <td style="width: 70%">告警类型</td>
+                        <td class="label" style="width: 30%;text-align: center;">设备编号</td>
+                        <td class="label" style="width: 70%">告警类型</td>
                     </tr>
                     </thead>
                 </table>
                 <div style="height: 128px;width: 100%;overflow: hidden;">
-                    <table v-show="AlarmData.length>0" id="dev_alarm_list" ref="dev_alarm_list" style="width: 100%;background: rgba(25,57,103,0.3);" cellspacing=0>
+                    <table v-show="AlarmData.length>0" id="dev_alarm_list" ref="dev_alarm_list" style="width: 100%;background: transparent;" cellspacing=0>
                         <tbody>
-                        <tr v-for="item in alarmDevList" @click="clickalarmtr(item)" style="font-weight:bold" :devno="item.devcode"><td style="width: 30%;">{{item.devcode}}#</td><td :style="'width: 70%;color:'+ item.color">{{ item.typename }}</td></tr>
+                        <tr v-for="item in alarmDevList" @click="clickalarmtr(item)" :devno="item.devcode"><td style="width: 30%;text-align: center;">{{item.devcode}}#</td><td :style="'width: 70%;color:'+ item.color">{{ item.typename }}</td></tr>
                         </tbody>
                     </table>
                 </div>
-                <div style="margin-top: 15px;">
+                <div style="margin-top: 20px;">
                     <div style="text-align: center;"><img src="../../assets/image/alarm_txt.png"></div>
-                    <div class="echarts_alarm" ref="echarts_alarm" id="echarts_alarm" style="height: 122px;width: 100%;">
+                    <div class="echarts_alarm" ref="echarts_alarm" id="echarts_alarm" style="height: calc(180px*var(--hRate));width: 100%;">
                     </div>
                 </div>
             </div>
         </div>
         <div for="IN02" id="dev_stop" ref="dev_stop" show="停机原因" style="color: #ffffff;font-size: 14px;">
-            <div class="title">{{ stopDeviceNum==0?'当前无机器停机':''}}</div>
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>停机原因</span>
+            </div>
             <div class="content">
-                <div style="margin-top: 15px;">
-                    <div class="echarts_stop" ref="echarts_stop" id="echarts_stop" style="height: 190px;width: 100%;">
-
-                    </div>
-                </div>
+                <div class="echarts_stop" ref="echarts_stop" id="echarts_stop" style="height: calc(280px*var(--hRate));width: 100%;"></div>
             </div>
         </div>
         <div for="IN02" id="dev_xiaolv" show="生产效率" style="color: #ffffff;font-size: 14px;">
-            <div class="title"></div>
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>生产效率</span>
+            </div>
             <div class="content">
-                <div style="">
-                    <div style="text-align: center;font-size: 16px;margin:16px 0;">今日产量</div>
-                    <div style="text-align: center;">
-                                <span style="width: 160px;text-align: center;display: inline-block;height: 32px;line-height: 32px;margin: 0 12px;padding: 5px;"><span
-                                        id="totay1" style="font-size: 30px">{{ scxljsondata.totalLength }}</span><span
-                                        style="color: #9ED1FF;font-size: 16px">(米)</span></span>
-                        <span style="width: 128px;text-align: center;display: inline-block;height: 32px;line-height: 32px;margin: 0 12px;padding: 5px;"><span
-                                id="totay2" style="font-size: 30px">{{ scxljsondata.totalWeight }}</span><span
-                                style="color: #9ED1FF;font-size: 16px">(吨)</span></span>
-                    </div>
-                </div>
-                <div style="max-height: 96px;width: 100%;overflow: hidden;margin-top: 25px;">
+                <div style="max-height: 96px;width: 100%;overflow: hidden;font-size: 12px;">
                     <table style="width: 100%;" cellspacing=0>
                         <thead>
                         <tr>
-                            <td style="width: 10%">班组</td>
-                            <td style="width: 25%">生产时间(H)</td>
-                            <td style="width: 25%">已织造数(米)</td>
-                            <td style="width: 20%">总重量(T)</td>
-                            <td style="width: 20%">稼动率(%)</td>
+                            <td class="label" style="width: 10%;text-align: center;">班组</td>
+                            <td class="label" style="width: 25%">生产时间(H)</td>
+                            <td class="label" style="width: 25%">已织造数(米)</td>
+                            <td class="label" style="width: 20%">总重量(T)</td>
+                            <td class="label" style="width: 20%">稼动率(%)</td>
                         </tr>
                         </thead>
                         <tbody>
                         <tr id="scxl_a">
-                            <td style="width: 10%;color: #9ED1FF">A组</td>
-                            <td style="width: 25%;font-size: 18px;font-weight: bold;">{{ scxljsondata.atime }}</td>
-                            <td style="width: 25%;font-size: 18px;font-weight: bold;">{{ scxljsondata.alength }}</td>
-                            <td style="width: 20%;font-size: 18px;font-weight: bold;">{{ scxljsondata.aweight }}</td>
-                            <td style="width: 20%;font-size: 18px;font-weight: bold;">{{ scxljsondata.aefficiency }}</td>
+                            <td style="width: 10%;text-align: center;">A组</td>
+                            <td style="width: 25%;">{{ scxljsondata.atime }}</td>
+                            <td style="width: 25%;">{{ scxljsondata.alength }}</td>
+                            <td style="width: 20%;">{{ scxljsondata.aweight }}</td>
+                            <td style="width: 20%;">{{ scxljsondata.aefficiency }}</td>
                         </tr>
                         <tr id="scxl_b">
-                            <td style="width: 10%;color: #9ED1FF">B组</td>
-                            <td style="width: 25%;font-size: 18px;font-weight: bold;">{{ scxljsondata.btime }}</td>
-                            <td style="width: 25%;font-size: 18px;font-weight: bold;">{{ scxljsondata.blength }}</td>
-                            <td style="width: 20%;font-size: 18px;font-weight: bold;">{{ scxljsondata.bweight }}</td>
-                            <td style="width: 20%;font-size: 18px;font-weight: bold;">{{ scxljsondata.befficiency }}</td>
+                            <td style="width: 10%;text-align: center;">B组</td>
+                            <td style="width: 25%;">{{ scxljsondata.btime }}</td>
+                            <td style="width: 25%;">{{ scxljsondata.blength }}</td>
+                            <td style="width: 20%;">{{ scxljsondata.bweight }}</td>
+                            <td style="width: 20%;">{{ scxljsondata.befficiency }}</td>
                         </tr>
                         </tbody>
                     </table>
@@ -183,33 +150,27 @@
             </div>
         </div>
         <div for="IN02" id="dev_jiadonglv" show="稼动率周曲线" style="color: #ffffff;font-size: 14px;">
-            <div class="title"></div>
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>稼动率周曲线</span>
+            </div>
             <div class="content">
-                <div style="margin-top: 15px;">
-                    <div class="echarts_jiadonglv" ref="echarts_jiadonglv" id="echarts_jiadonglv" style="height: 142px;width: 100%;">
-
-                    </div>
-                </div>
+                <div class="echarts_jiadonglv" ref="echarts_jiadonglv" id="echarts_jiadonglv" style="height: 142px;width: 100%;"></div>
             </div>
         </div>
         <div for="IN02" id="dev_sc_qushi" show="生产趋势" style="color: #ffffff;font-size: 14px;">
-            <div class="title"></div>
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>生产趋势</span>
+            </div>
             <div class="content">
-                <div style="margin-top: 15px;">
-                    <div class="echarts_sc_qushi" ref="echarts_sc_qushi" id="echarts_sc_qushi" style="height: 142px;width: 100%;">
-
-                    </div>
-                </div>
+                <div class="echarts_sc_qushi" ref="echarts_sc_qushi" id="echarts_sc_qushi" style="height: 142px;width: 100%;"></div>
             </div>
         </div>
         <div for="IN02" id="dev_used_qushi" show="能耗趋势" style="color: #ffffff;font-size: 14px;">
-            <div class="title"></div>
+            <div class="title_row" style="font-weight: normal;">
+                <div class="title_left_line"></div><span>能耗趋势</span>
+            </div>
             <div class="content">
-                <div style="margin-top: 15px;">
-                    <div class="echarts_used_qushi" ref="echarts_used_qushi" id="echarts_used_qushi" style="height: 142px;width: 100%;">
-
-                    </div>
-                </div>
+                <div class="echarts_used_qushi" ref="echarts_used_qushi" id="echarts_used_qushi" style="height: 142px;width: 100%;"></div>
             </div>
         </div>
         <div for="IN02" id="imp_item" v-if="isShowImpItem" desc="导出功能菜单">
@@ -1415,7 +1376,7 @@ export default {
         let MODEL_LOADED  = 1;
         let ALARM_DEVS=[];
         let OFFLINE_DEVS={}
-        let indexjsondata=ref({device:{},weekData:null,efficiency:null});
+        let indexjsondata=ref({device:{},weekData:[],efficiency:{}});
         let alarmjsondata=ref({device:{}});
         let scxljsondata=ref({});
         let alarmWeek=ref([]);
@@ -2263,7 +2224,7 @@ export default {
                     top: '1%',
                     bottom: '0'
                 },
-                color: ["#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8",],
+                color: ["#ffb649", "#cdff5b", "#47b9fb", "#fe7a00","#8fc318","#277dfe"],
 
                 tooltip: {
                     trigger: 'axis',
@@ -2280,8 +2241,10 @@ export default {
                 legend: {
                     data: ['停经片A班', 'CCD断纱A班', '人工停机A班', '停经片B班', 'CCD断纱B班', '人工停机B班',],
                     button: '5%',
+                    icon:"circle",
                     textStyle: {color: "#fff"},
-                    top: "0",
+                    top: "0px",
+                    padding:[0,0],
                 },
                 grid: {
                     containLabel: true,
@@ -2321,28 +2284,28 @@ export default {
                     stack: 'jp',
                     data: week.stop1A
                 }, {
-                    name: '停经片B班',
-                    type: 'bar',
-                    stack: 'jp',
-                    data: week.stop2A
-                }, {
                     name: 'CCD断纱A班',
                     type: 'bar',
                     barWidth: 5,
                     stack: 'ccd',
                     data: week.stop3A
                 }, {
-                    name: 'CCD断纱B班',
-                    type: 'bar',
-                    stack: 'ccd',
-                    data: week.stop1B
-                }, {
                     name: '人工停机A班',
                     type: 'bar',
                     barWidth: 5,
                     stack: 'r',
                     data: week.stop2B
                 }, {
+                    name: '停经片B班',
+                    type: 'bar',
+                    stack: 'jp',
+                    data: week.stop2A
+                }, {
+                    name: 'CCD断纱B班',
+                    type: 'bar',
+                    stack: 'ccd',
+                    data: week.stop1B
+                }, {
                     name: '人工停机B班',
                     type: 'bar',
                     stack: 'r',
@@ -2398,9 +2361,9 @@ export default {
                 name: "B组稼动率", type: 'line', smooth: true, //symbol: 'none',
                 data: week_befficiency, itemStyle: {
                     normal: {
-                        color: '#295589', // 这里设置折线的颜色
+                        color: '#fb4750', // 这里设置折线的颜色
                         lineStyle: {
-                            color: '#295589' // 这里同时设置线头的颜色
+                            color: '#fb4750' // 这里同时设置线头的颜色
                         }
                     }
                 },
@@ -2433,7 +2396,8 @@ export default {
                     inactiveColor: "#04417A",
                     data: "",
                     textStyle: {color: "#fff"},
-                    top: "5",
+                    top: "top",
+                    padding:[0,0],
                 },
                 grid: {
                     left: '3%',
@@ -2482,18 +2446,17 @@ export default {
             var times = [];
             var v_series = [];
             for (var i = 0; i < data.length; i++) {
-                var v = data[i]['weight'];
                 var tv = data[i]['time'].split("-")
                 times.push(tv[1] + "-" + tv[2])
-                if (v != null) week_efficiency.push(v);
-                week_aefficiency.push(data[i]['aweight'])
-                week_befficiency.push(data[i]['bweight'])
+                week_efficiency.push(data[i]['length'])
+                week_aefficiency.push(data[i]['lengthA'])
+                week_befficiency.push(data[i]['lengthB'])
             }
             if (week_efficiency.length == 0) {
                 return
             }
             v_series.push({
-                name: "白坯布总产量", type: 'line', smooth: false, //symbol: 'none',
+                name: "总产量", type: 'line',  //symbol: 'none',
                 data: week_efficiency, itemStyle: {
                     normal: {
                         color: '#F0F275', // 这里设置折线的颜色
@@ -2504,7 +2467,7 @@ export default {
                 },
             });
             v_series.push({
-                name: "A组产量", type: 'bar', stack: '1', smooth: true, //symbol: 'none',
+                name: "A组产量", type: 'line', //symbol: 'none',
                 data: week_aefficiency, itemStyle: {
                     normal: {
                         color: '#1EFFFF', // 这里设置折线的颜色
@@ -2512,38 +2475,17 @@ export default {
                             color: '#1EFFFF' // 这里同时设置线头的颜色
                         }
                     }
-                },
-                barWidth: "15",
-                itemStyle: {
-                    color: new echarts.graphic.LinearGradient(
-                        0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
-                        [
-                            {offset: 0, color: '#1EFFFF'},   // 0% 处的颜色
-                            {offset: 1, color: '#1D7777'}   // 100% 处的颜色
-                        ]
-                    )
                 }
             });
             v_series.push({
-                name: "B组产量", type: 'bar', stack: '1', smooth: true, //symbol: 'none',
+                name: "B组产量", type: 'line',  //symbol: 'none',
                 data: week_befficiency, itemStyle: {
                     normal: {
-                        color: '#295589', // 这里设置折线的颜色
+                        color: '#fc4850', // 这里设置折线的颜色
                         lineStyle: {
-                            color: '#295589' // 这里同时设置线头的颜色
+                            color: '#fc4850' // 这里同时设置线头的颜色
                         }
                     }
-                },
-                barWidth: "15",
-                itemStyle: {
-                    barBorderRadius: [3, 3, 0, 0,],
-                    color: new echarts.graphic.LinearGradient(
-                        0, 0, 0, 1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
-                        [
-                            {offset: 0, color: '#32A9FF'},   // 0% 处的颜色
-                            {offset: 1, color: '#2B5A7C'}   // 100% 处的颜色
-                        ]
-                    )
                 }
             });
             var opt = {
@@ -2562,23 +2504,11 @@ export default {
                     inactiveColor: "#04417A",
                     data: "",
                     textStyle: {color: "#fff"},
-                    top: "5",
+                    top: "top",
+                    padding:[0,0],
                 },
                 tooltip: {
                     trigger: 'axis',
-                    axisPointer: {
-                        label: {
-                            show: true,
-                            backgroundColor: '#fff',
-                            color: '#556677',
-                            borderColor: 'rgba(0,0,0,0)',
-                            shadowColor: 'rgba(0,0,0,0)',
-                            shadowOffsetY: 0
-                        },
-                        lineStyle: {
-                            width: 0
-                        }
-                    },
                     backgroundColor: '#fff',
                     textStyle: {
                         color: '#5c6c7c'
@@ -2678,9 +2608,9 @@ export default {
                 name: "B组电量", type: 'line', smooth: true, //symbol: 'none',
                 data: week_befficiency, itemStyle: {
                     normal: {
-                        color: '#295589', // 这里设置折线的颜色
+                        color: '#fb4750', // 这里设置折线的颜色
                         lineStyle: {
-                            color: '#295589' // 这里同时设置线头的颜色
+                            color: '#fb4750' // 这里同时设置线头的颜色
                         }
                     }
                 },
@@ -2713,7 +2643,8 @@ export default {
                     inactiveColor: "#04417A",
                     data: "",
                     textStyle: {color: "#fff"},
-                    top: "5",
+                    top: "top",
+                    padding:[0,5]
                 },
                 grid: {
                     left: '3%',
@@ -3026,7 +2957,7 @@ export default {
             //动态设置停机原因的top
             var ele = document.getElementById('dev_alarm');
             var style = window.getComputedStyle(ele);            
-            dev_stop.value.style.top= (ele.offsetTop * 1 + parseInt(style.height) + 10) + "px"; 
+            dev_stop.value.style.top= (ele.offsetTop * 1 + parseInt(style.height) + 30) + "px"; 
             clearTimeout(dataTimer1);
             clearTimeout(dataTimer2);
             clearTimeout(dataTimer3);
@@ -3107,4 +3038,48 @@ export default {
         }
     }
 }
-</script>
+</script>
+<style>
+.bg23{
+    z-index: 1; pointer-events: none;position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: 0;
+    border: 0px solid #17666e;
+    border-top: 0px;
+    background:url('../../assets/image/bg.png');
+    -webkit-mask-image: linear-gradient(to bottom, #0b313de5 10%, transparent 40%,transparent 50%, #0b313d 100%);
+    mask-image: linear-gradient(to bottom, #0b313de5 10%,transparent 40%,transparent 50%, #0b313d 100%);
+    /*
+    
+    background:url('../../assets/image/000.png');
+    -webkit-mask-image:radial-gradient(circle, transparent 26%, #95afc5 54%);
+    
+    background: 
+    repeating-linear-gradient(
+      45deg,
+      #ccc 0, #ccc 10px,
+      transparent 10px, transparent 20px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      #ccc 0, #ccc 10px,
+      transparent 10px, transparent 20px
+    );
+    background-size: 20px 20px;
+   */
+}
+
+.bg32{
+    z-index: 2; pointer-events: none;position: absolute;
+    top: calc(22px * var(--hRate));
+    left: 0;
+    width: 1877.54px;
+    height: 96%;
+    margin-left: 19px;
+    border: 2px solid #17666e;
+    border-top: 0px;
+}
+</style>

src/pages/components/In03.vue

@@ -1,6 +1,10 @@
 <template>
     <!--这是印花模块的模块展示内容-->
-    <div for="IN03"  id="top" class="top top03"  @click="switchIndex"></div>
+    <div for="IN03"  id="top" class="top top03"  @click="switchIndex">
+        <div title="返回主视图"
+            style="cursor: pointer;position: absolute;right: 40px;top: 32px;height: 38px;width: 38px;text-align: center;"
+            @click.stop="backMasterViewByFac"><img src="../../assets/image/view.png"></div>
+    </div>
     <div class="bg2"></div>
     <template v-if="showIndexData=='index'">
         <div class="abs" style="left:50%;top:10%;width: 210px;margin-left:-105px;text-align: center;">
@@ -260,24 +264,7 @@ export default {
         }
 
         async function init(){
-            if(player==null || player.Native==null) return;
-            if(BODY_H_RATE>0.9){
-                //全屏模式下的视角
-                player.Native.Camera.moveTo([-91.64839019242504, -186.23753805841608, 166.78946395819892], 
-            [-90.82528929434541, 136.7362546068112, -54.52457853422797], 
-            [0.0014405644117746175, 0.5652582237894268, 0.8249127621831281], 1);
-            }else{
-                //非全屏模式下的视角
-                player.Native.Camera.moveTo([-90.4534875451608, -201.60779996809177, 156.1529830648182], 
-            [-89.63620356422999, 119.08351214395233, -52.22443982968761], 
-            [0.001388561848385436, 0.544853112866498, 0.838530355619688], 1);
-            }
-            // 使用异步函数
-            (async () => {
-                setTimeout(function() {
-                    player.Native.Camera.setAnchorPos([ -80.69618225097656,21.59876251220703,11.815500259399414]);
-                }, 3000);
-            })();
+            backMasterViewByFac();
             if(window.LINELIST==null){
                 var rootItem = await player.Native.ModelTree.getRootItems();
                 var rootObj=null;
@@ -632,6 +619,26 @@ export default {
             echartsEleIns_0 = echarts.init(t);            
             echartsEleIns_0.setOption(opt);
         }
+        function backMasterViewByFac(){
+            if(player==null || player.Native==null) return;
+            if(BODY_H_RATE>0.9){
+                //全屏模式下的视角
+                player.Native.Camera.moveTo([-91.64839019242504, -186.23753805841608, 166.78946395819892], 
+            [-90.82528929434541, 136.7362546068112, -54.52457853422797], 
+            [0.0014405644117746175, 0.5652582237894268, 0.8249127621831281], 1);
+            }else{
+                //非全屏模式下的视角
+                player.Native.Camera.moveTo([-90.4534875451608, -201.60779996809177, 156.1529830648182], 
+            [-89.63620356422999, 119.08351214395233, -52.22443982968761], 
+            [0.001388561848385436, 0.544853112866498, 0.838530355619688], 1);
+            }
+            // 使用异步函数
+            (async () => {
+                setTimeout(function() {
+                    player.Native.Camera.setAnchorPos([ -80.69618225097656,21.59876251220703,11.815500259399414]);
+                }, 3000);
+            })();
+        }
         onMounted(()=>{
             if(BODY_H_RATE>0.9) isFullScreen.value=true;
             else isFullScreen.value=false;
@@ -662,6 +669,7 @@ export default {
             isFullScreen,
             LoadUsedLine,
             LoadSCLine,
+            backMasterViewByFac,
         }
     }
 }

src/styles/main.css

@@ -10,29 +10,32 @@
     }
     thead tr{
         background-image: url('../assets/image/thead_bg.png');
-        background: rgba(25,57,103,0.4);
-        border: 1px solid #7DA2CD;
+        background: transparent;
+        border: 0px solid #7DA2CD;
         height: 32px;
         font-weight: bold;
         color: #decdcd;
     }
     tbody>tr{
-        border: 1px solid #7DA2CD;
+        border: 0px solid #7DA2CD;
         height: 32px;
-        font-size: 16px;
+        font-size: 12px;
     }
     table:not(.el-date-table) tbody>tr:hover{
         background-color:rgb(75, 112, 163) !important;
     }
+    table thead>tr {
+        background-color:#016a7c; /* 奇数行 */
+    }
     table:not(.el-date-table) tbody>tr:nth-child(odd) {
-        background-color:rgb(25 57 103 / 75%); /* 奇数行 */
+        background-color:transparent; /* 奇数行 */
     }
      
     table:not(.el-date-table) tbody>tr:nth-child(even) {
-        background-color: rgb(25 57 103 / 85%); /* 偶数行 */
+        background-color: #016a7c; /* 偶数行 */
     }
     td{
-        border-bottom: 1px solid #7DA2CD;
+        border-bottom: 0px solid #7DA2CD;
     }
         /* ---- Chrome ----*/
         ::-webkit-scrollbar {
@@ -394,17 +397,23 @@
         width: 416px;
     }
     #dev_state .content{
-        margin:5px;
-        padding: 10px;
-        width: 400px;
-        height: 238px;
-        background: rgba(41,85,137,0.7);
+        display:flex;width:100%;height:calc(134px*var(--hRate));font-weight:normal;font-size: 24px;
+    }
+    #dev_state .content>div{
+        width:13%;
+        height: 100%;
+    }
+    .label{
+        color:#27e6ff;
+    }
+    .unitname{
+        font-size: 12px;
     }
     #dev_alarm{
         position: absolute;
         z-index: 1;
-        top:410px;
-        left: 10px;
+        top:7%;
+        left: 3%;
     }
     #dev_alarm .title{
         background-image: url('../assets/image/dev_alarm_title.png');
@@ -417,18 +426,19 @@
         line-height: 32px;
     }
     #dev_alarm .content{
-        margin:5px;
+        margin-top:20px;
         padding: 10px;
         width: 400px;
         height: auto;
-        background: rgba(41,85,137,0.7);
+        background: #033c519c;
+        border: 1px solid #008899;
     }
 
     #dev_stop{
         position: absolute;
         z-index: 1;
-        top:705px;
-        left: 10px;
+        top:780px;
+        left: 3%;
     }
     #dev_stop .title{
         background-image: url('../assets/image/stop_title.png');
@@ -441,104 +451,69 @@
         line-height: 32px;
     }
     #dev_stop .content{
-        margin:5px;
+        margin-top:10px;
         padding: 10px;
         width: 400px;
         height: auto;
-        background: rgba(41,85,137,0.7);
+        background: #054d5b9c;
+        border: 1px solid #008899;
     }
     #dev_xiaolv{
         position: absolute;
         z-index: 1;
-        top:100px;
-        right: 10px;
-    }
-    #dev_xiaolv .title{
-        background-image: url('../assets/image/xiaolv_title.png');
-        background-repeat: no-repeat;
-        background-size: auto;
-        height: 32px;
-        width: 416px;
-        text-align: center;
-        color: #f0f377;
-        line-height: 32px;
+        top:7%;
+        right: 3%;
     }
     #dev_xiaolv .content{
-        margin:5px;
-        padding: 10px;
+        margin-top:20px;
+        padding: 20px;
         width: 416px;
         height: auto;
-        background: rgba(41,85,137,0.7);
+        background: #054d5b9c;
+        border: 1px solid #008899;
     }
 
     #dev_jiadonglv{
         position: absolute;
         z-index: 1;
-        top:380px;
-        right: 10px;
-    }
-    #dev_jiadonglv .title{
-        background-image: url('../assets/image/dev_jiadonglv_title.png');
-        background-repeat: no-repeat;
-        background-size: auto;
-        height: 32px;
-        width: 416px;
-        text-align: center;
-        color: #f0f377;
-        line-height: 32px;
+        top:28%;
+        right: 3%;
     }
     #dev_jiadonglv .content{
-        margin:5px;
+        margin-top:10px;
         padding: 10px;
-        width: 416px;
+        width: 436px;
         height: auto;
-        background: rgba(41,85,137,0.7);
+        background: #054d5b9c;
+        border: 1px solid #008899;
     }
     #dev_sc_qushi{
         position: absolute;
         z-index: 1;
-        top:605px;
-        right: 10px;
-    }
-    #dev_sc_qushi .title{
-        background-image: url('../assets/image/dev_sc_qushi_title.png');
-        background-repeat: no-repeat;
-        background-size: auto;
-        height: 32px;
-        width: 416px;
-        text-align: center;
-        color: #f0f377;
-        line-height: 32px;
+        top:51%;
+        right: 3%;
     }
     #dev_sc_qushi .content{
-        margin:5px;
+        margin-top:10px;
         padding: 10px;
-        width: 410px;
+        width: 436px;
         height: auto;
-        background: rgba(41,85,137,0.7);
+        background: #054d5b9c;
+        border: 1px solid #008899;
     }
     #dev_used_qushi{
         position: absolute;
         z-index: 1;
-        top:830px;
-        right: 10px;
-    }
-    #dev_used_qushi .title{
-        background-image: url('../assets/image/dev_used_qushi_title.png');
-        background-repeat: no-repeat;
-        background-size: auto;
-        height: 32px;
-        width: 416px;
-        text-align: center;
-        color: #f0f377;
-        line-height: 32px;
+        top:74%;
+        right: 3%;
     }
     #dev_used_qushi .content{
-        margin:5px;
+        margin-top:10px;
         padding: 10px;
-        width: 416px;
+        width: 436px;
         height: auto;
-        background: rgba(41,85,137,0.7);
+        background: #054d5b9c;
+        border: 1px solid #008899;
     }
     .showinfo{
         position: absolute;