<template>
|
<div id="centerRight1">
|
<div class="bg-color-black">
|
<div class="d-flex pt-2 pl-2">
|
<span>
|
<icon name="chart-line" class="text-icon"></icon>
|
</span>
|
<div class="d-flex">
|
<span class="fs-xl text mx-2">任务列表</span>
|
</div>
|
</div>
|
<div>
|
<dv-scroll-board style="height: 470px;" :config="config" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from "@/api/ajax.js"
|
export default {
|
data() {
|
return {
|
config: {
|
header: ['任务号','货物类型', '起点地址', '终点地址', '任务状态'],
|
data: [
|
// ['组件1', 'dev-1', "<span class='colorGrass'>↑75%</span>", "ddd"],
|
// ['组件2', 'dev-2', "<span class='colorRed'>↓33%</span>"],
|
// ['组件3', 'dev-3', "<span class='colorGrass'>↑100%</span>"],
|
// ['组件4', 'rea-1', "<span class='colorGrass'>↑94%</span>"],
|
// ['组件5', 'rea-2', "<span class='colorGrass'>↑95%</span>"],
|
// ['组件6', 'fix-2', "<span class='colorGrass'>↑63%</span>"],
|
// ['组件7', 'fix-4', "<span class='colorGrass'>↑84%</span>"],
|
// ['组件8', 'fix-7', "<span class='colorRed'>↓46%</span>"],
|
// ['组件9', 'dev-2', "<span class='colorRed'>↓13%</span>"],
|
// ['组件10', 'dev-9', "<span class='colorGrass'>↑76%</span>"],
|
// ['组件11', 'dev-9', "<span class='colorGrass'>↑76%</span>"],
|
// ['组件12', 'dev-9', "<span class='colorGrass'>↑76%</span>"],
|
// ['组件13', 'dev-9', "<span class='colorGrass'>↑76%</span>"],
|
// ['组件14', 'dev-9', "<span class='colorGrass'>↑76%</span>"]
|
],
|
rowNum: 12, //表格行数
|
headerHeight: 35,
|
headerBGC: '#0f1325', //表头
|
oddRowBGC: '#0f1325', //奇数行
|
evenRowBGC: '#171c33', //偶数行
|
index: true,
|
columnWidth: [50],
|
align: ['center']
|
}
|
}
|
},
|
mounted() {
|
this.changeTiming()
|
},
|
methods: {
|
changeTiming() {
|
this.changeNumber()
|
setInterval(() => {
|
this.changeNumber()
|
},3000)
|
},
|
changeNumber() {
|
axios.post("http://192.168.2.51:9290/api/Task/GetAGVTaskDataCP", {
|
// axios.post("http://127.0.0.1:9290/api/Task/GetAGVTaskDataCP", {
|
MainData: {
|
AGVName: "505"
|
}
|
}).then((res) => {
|
if (res.data.status) {
|
let agvs = res.data.data
|
// console.log(agvs);
|
let GetAGVTaskData = []
|
agvs.forEach(element => {
|
let data = [element.taskNum,element.materialtype,"<span class='colorRed'>"+element.sourceAddress+"</span>" , "<span class='colorGrass'>" + element.targetAddress + "</span>", element.remark]
|
GetAGVTaskData.push(data)
|
});
|
this.config.data = GetAGVTaskData
|
this.config = {
|
header: ['任务号','货物类型', '起点地址', '终点地址', '任务状态'],
|
data: GetAGVTaskData,
|
rowNum: 12, //表格行数
|
headerHeight: 35,
|
headerBGC: '#0f1325', //表头
|
oddRowBGC: '#0f1325', //奇数行
|
evenRowBGC: '#171c33', //偶数行
|
index: true,
|
columnWidth: [50],
|
align: ['center']
|
}
|
}
|
else {
|
this.config = {
|
header: ['任务号','货物类型', '起点地址', '终点地址', '任务状态'],
|
// data: [
|
// ["<span class='colorRed'>暂无数据</span>","<span class='colorRed'>暂无数据</span>","<span class='colorRed'>暂无数据</span>","<span class='colorRed'>暂无数据</span>"],
|
// ],
|
rowNum: 12, //表格行数
|
headerHeight: 35,
|
headerBGC: '#0f1325', //表头
|
oddRowBGC: '#0f1325', //奇数行
|
evenRowBGC: '#171c33', //偶数行
|
index: true,
|
columnWidth: [50],
|
align: ['center']
|
}
|
}
|
}).catch((res) => {
|
console.log(res)
|
})
|
}
|
}
|
}
|
</script>
|
|
<!-- <style lang="scss" scoped>
|
$box-height: 520px;
|
$box-width: 100%;
|
#centerRight1 {
|
padding: 16px;
|
padding-top: 20px;
|
height: $box-height;
|
width: $box-width;
|
border-radius: 5px;
|
.bg-color-black {
|
height: $box-height - 30px;
|
border-radius: 10px;
|
}
|
.text {
|
color: #c3cbde;
|
}
|
.body-box {
|
border-radius: 10px;
|
overflow: hidden;
|
.dv-scr-board {
|
width: 670px;
|
height: 340px;
|
}
|
}
|
}
|
</style> -->
|
<!-- <style lang="scss" class>
|
$box-height: 520px;
|
$box-width: 100%;
|
#bottomRight {
|
padding: 14px 16px;
|
height: $box-height;
|
width: $box-width;
|
border-radius: 5px;
|
.bg-color-black {
|
height: $box-height - 30px;
|
border-radius: 10px;
|
}
|
.text {
|
color: #c3cbde;
|
}
|
//下滑线动态
|
.decoration2 {
|
position: absolute;
|
right: 0.125rem;
|
}
|
.chart-box {
|
margin-top: 16px;
|
width: 170px;
|
height: 170px;
|
.active-ring-name {
|
padding-top: 10px;
|
}
|
}
|
}
|
</style> --> -->
|
<style lang="scss" scoped>
|
$box-height: 520px;
|
$box-width: 100%;
|
#centerRight1 {
|
padding: 16px;
|
padding-top: 10px;
|
height: $box-height;
|
width: $box-width;
|
border-radius: 5px;
|
.bg-color-black {
|
height: $box-height - 30px;
|
border-radius: 10px;
|
}
|
.text {
|
color: #ffffff;
|
font-size: 12pt;
|
}
|
.body-box {
|
border-radius: 10px;
|
overflow: hidden;
|
.dv-scr-board {
|
width: 1000px;
|
height: 230px;
|
}
|
}
|
}
|
</style>
|
<!-- <template>
|
|
<div id="bottomRight">
|
<div class="bg-color-black">
|
<div class="d-flex pt-2 pl-2">
|
<span>
|
<icon name="chart-area" class="text-icon"></icon>
|
</span>
|
<div class="d-flex">
|
<span class="fs-xl text mx-2">NG&OK</span>
|
<div class="decoration2">
|
<dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
|
</div>
|
</div>
|
</div>
|
<div>
|
<BottomRightChart />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
|
export default {
|
components: {
|
BottomRightChart
|
}
|
};
|
</script>
|
|
<style lang="scss" class>
|
$box-height: 520px;
|
$box-width: 100%;
|
#bottomRight {
|
padding: 14px 16px;
|
height: $box-height;
|
width: $box-width;
|
border-radius: 5px;
|
.bg-color-black {
|
height: $box-height - 30px;
|
border-radius: 10px;
|
}
|
.text {
|
color: #c3cbde;
|
}
|
//下滑线动态
|
.decoration2 {
|
position: absolute;
|
right: 0.125rem;
|
}
|
.chart-box {
|
margin-top: 16px;
|
width: 170px;
|
height: 170px;
|
.active-ring-name {
|
padding-top: 10px;
|
}
|
}
|
}
|
</style> -->
|
