|  |  | 
 |  |  |  | 
 |  |  | <body> | 
 |  |  |    <div id="app" style="display: flex;justify-content: center;flex-wrap: wrap;"> | 
 |  |  |       <div style="width: 100%;" class="demo-container"> | 
 |  |  |  | 
 |  |  |             <el-card class="box-card" > | 
 |  |  |                <div slot="header" class="clearfix"> | 
 |  |  |                   <span>设备位置</span> | 
 |  |  |                </div> | 
 |  |  |                <el-row > | 
 |  |  |                   <el-col :span="1" :offset="3"><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                </el-row> | 
 |  |  |                <el-row  type="flex" justify="center"> | 
 |  |  |                   <el-col :span="18" > | 
 |  |  |                      <el-slider v-model="value1" :min="min" :max="max" :format-tooltip="formatTooltip" > | 
 |  |  |                      </el-slider> | 
 |  |  |                   </el-col> | 
 |  |  |  | 
 |  |  |                </el-row> | 
 |  |  |  | 
 |  |  |                <el-row > | 
 |  |  |                   <el-col :span="1" :offset="3"><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" :offset="13"><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                   <el-col :span="1" ><el-card class="card-bg"></el-card></el-col> | 
 |  |  |                </el-row> | 
 |  |  |             </el-card> | 
 |  |  |       </div> | 
 |  |  |       <div style="width: 100%;"> | 
 |  |  |          <el-table border ref="singleTable" :data="tableData" highlight-current-row @row-click="handleRowClick" | 
 |  |  |             max-height="350" style="width: 100%"> | 
 |  |  |             <el-table-column property="rgvNo" label="RGV号"> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column property="workNo1" label="工作号"> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column property="wrkSts$" label="任务状态"> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column property="statusType" label="模式"> | 
 |  |  |             </el-table-column> | 
 |  |  | 
 |  |  |             <el-table-column property="walkPos" label="设备状态"> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column property="pakMk" label="锁定状态"> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column property="warnCode" label="异常代码"> | 
 |  |  |             </el-table-column> | 
 |  |  |             <el-table-column property="alarm" label="异常描述"> | 
 |  |  |             </el-table-column> | 
 |  |  |          </el-table> | 
 |  |  |       </div> | 
 |  |  | 
 |  |  |             </el-card> | 
 |  |  |          </div> | 
 |  |  |          <div style="width: 45%;"> | 
 |  |  |             <el-card class="box-card"> | 
 |  |  |             <el-card style="width: 100%;"> | 
 |  |  |                <div slot="header" class="clearfix"> | 
 |  |  |                   <span>设备状态</span> | 
 |  |  |                </div> | 
 |  |  | 
 |  |  |                      <el-empty description="请选择设备"></el-empty> | 
 |  |  |                   </div> | 
 |  |  |                   <div v-else> | 
 |  |  |                      <el-descriptions :title="currentTitle" direction="vertical" :column="4" border> | 
 |  |  |                      <el-descriptions :title="currentTitle" direction="vertical" :column="8" border> | 
 |  |  |                         <el-descriptions-item label="RGV">{{ tableData[currentIndex].rgvNo }} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="工作号"> | 
 |  |  | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="任务状态"> | 
 |  |  |  | 
 |  |  |                               <el-tag>{{ tableData[currentIndex].status}}</el-tag> | 
 |  |  |                            <el-tag>{{ tableData[currentIndex].status}}</el-tag> | 
 |  |  |  | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="设备状态"> | 
 |  |  |                            <el-tag>{{ tableData[currentIndex].walkPos }}</el-tag> | 
 |  |  |                         <el-descriptions-item label="前后极限"> | 
 |  |  |                            {{ tableData[currentIndex].list32[0]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="故障代码">{{ tableData[currentIndex].warnCode }} | 
 |  |  |                         <el-descriptions-item label="货叉中位1">{{ tableData[currentIndex].list32[1]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="故障描述">{{ tableData[currentIndex].alarm }} | 
 |  |  |                         <el-descriptions-item label="货叉中位2">{{ tableData[currentIndex].list32[2]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  | <!--                        <el-descriptions-item label="源站">{{ tableData[currentIndex].staNo }}--> | 
 |  |  | <!--                        </el-descriptions-item>--> | 
 |  |  | <!--                        <el-descriptions-item label="目标站">{{ tableData[currentIndex].sourceStaNo }}--> | 
 |  |  | <!--                        </el-descriptions-item>--> | 
 |  |  |                         <el-descriptions-item label="货叉前极限">{{ tableData[currentIndex].list32[3]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="货叉后极限">{{ tableData[currentIndex].list32[4]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="行走强减速">{{ tableData[currentIndex].list32[5]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="急停">{{ tableData[currentIndex].list32[6]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="点动前进">{{ tableData[currentIndex].list32[7]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |  | 
 |  |  |                         <el-descriptions-item label="点动后退">{{ tableData[currentIndex].list33[0]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="点动左伸">{{ tableData[currentIndex].list33[1]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="点动右伸">{{ tableData[currentIndex].list33[2]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="本地远程">{{ tableData[currentIndex].list33[3]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="复位">{{ tableData[currentIndex].list33[4]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="行走抱闸">{{ tableData[currentIndex].list33[5]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |                         <el-descriptions-item label="手动顶升">{{ tableData[currentIndex].list34[0]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="顶升上到位">{{ tableData[currentIndex].list34[1]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="顶升下到位">{{ tableData[currentIndex].list34[2]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="左超限">{{ tableData[currentIndex].list34[3]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="右超限">{{ tableData[currentIndex].list34[4]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="前凸出">{{ tableData[currentIndex].list34[5]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="后凸出">{{ tableData[currentIndex].list34[6]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="超高">{{ tableData[currentIndex].list34[7]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |  | 
 |  |  |  | 
 |  |  |                         <el-descriptions-item label="载货台有物">{{ tableData[currentIndex].list32[0]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="左探货1">{{ tableData[currentIndex].list32[1]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="左探货2">{{ tableData[currentIndex].list32[2]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="右探货1">{{ tableData[currentIndex].list32[3]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |                         <el-descriptions-item label="右探货2">{{ tableData[currentIndex].list32[4]}} | 
 |  |  |                         </el-descriptions-item> | 
 |  |  |  | 
 |  |  |                      </el-descriptions> | 
 |  |  |  | 
 |  |  |                   </div> | 
 |  |  | 
 |  |  |                } | 
 |  |  |             ], | 
 |  |  |             demo: 'X', | 
 |  |  |             rgvMode: 0 | 
 |  |  |             rgvMode: 0, | 
 |  |  |             value1:50000, | 
 |  |  |             min:8000, | 
 |  |  |             max:80000 | 
 |  |  |          }, | 
 |  |  |          created() { | 
 |  |  |             this.init() | 
 |  |  | 
 |  |  |  | 
 |  |  |          }, | 
 |  |  |          methods: { | 
 |  |  |             formatTooltip(){ | 
 |  |  |                return "RGV 1" | 
 |  |  |             }, | 
 |  |  |             staTova(sta,end){ | 
 |  |  |                let that = this | 
 |  |  |                that.$confirm('此操作存在风险,是否继续','提示',{ | 
 |  |  | 
 |  |  |                   method: 'post', | 
 |  |  |                   success: function (res) { | 
 |  |  |                      that.tableData = res.data | 
 |  |  |                      that.value1 = res.data.rgvPos | 
 |  |  |                   } | 
 |  |  |                }); | 
 |  |  |             }, | 
 |  |  | 
 |  |  |          } | 
 |  |  |       }) | 
 |  |  |    </script> | 
 |  |  |    <style> | 
 |  |  |        .el-slider__bar { | 
 |  |  |          background-color: #e4e7ed; | 
 |  |  |       } | 
 |  |  |        .el-slider__button{ | 
 |  |  |           width: 30px !important; | 
 |  |  |           height: 30px !important; | 
 |  |  |           border-radius: 2px !important; /* 关键属性 */ | 
 |  |  |           border: 2px solid #409EFF !important; | 
 |  |  |  | 
 |  |  |        } | 
 |  |  |        .el-slider__runway { | 
 |  |  |           cursor: not-allowed !important; | 
 |  |  |           pointer-events: none !important; | 
 |  |  |        } | 
 |  |  |        .card-bg{ | 
 |  |  |           background-color: #9d9d9d; | 
 |  |  |        } | 
 |  |  |        .el-slider { | 
 |  |  |           transform: scaleX(-1); | 
 |  |  |        } | 
 |  |  |        /*.el-slider__button-wrapper {*/ | 
 |  |  |          /* transform: scaleX(-1);*/ | 
 |  |  |        /*}*/ | 
 |  |  |  | 
 |  |  |    </style> | 
 |  |  | </body> | 
 |  |  |  | 
 |  |  | </html> |