| | |
| | | |
| | | <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> |