-
-
-
-
-
-
-
-
-
{{ e.device_name }}
-
-
-
-
任务起点
-
{{ e.start_loc }}
-
-
-
任务终点
-
{{ e.target_loc }}
-
-
-
电量
-
{{ e.battery_level }}
-
-
-
-
提示信息
-
{{ e.message }}
-
-
-
-
-
-
-
-
-
{{ e.device_name }}
-
-
-
-
当前位置
-
{{ e.current_loc }}
-
-
-
目标位置
-
-
{{ e.target_loc }}
-
-
-
电量
-
{{ e.battery_level }}
-
-
-
-
提示信息
-
{{ e.message }}
-
-
-
-
-
-
@@ -170,8 +69,6 @@ export default {
return {
interTime: this.$store.getters.setTime,
timer: null,
- // chart2Timer: null,
- // chart5Timer: null,
materList: [], // 原料库存
curList: [], // 当日出入
historyList: [], // 历史分析
@@ -183,22 +80,7 @@ export default {
myChart1: null,
myChart2: null,
myChart3: null,
- myChart4: null,
- myChart5: null
- }
- },
- computed: {
- defaultOption1 () {
- return {
- step: 0.3, // 数值越大速度滚动越快
- limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
- hoverStop: true, // 是否开启鼠标悬停stop
- direction: 1, // 0向下 1向上 2向左 3向右
- openWatch: true, // 开启数据实时监控刷新dom
- singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
- singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
- waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
- }
+ myChart4: null
}
},
created () {
@@ -209,7 +91,6 @@ export default {
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
- this.myChart5 = this.$echarts.init(this.$refs.echartsRef5)
},
destroyed () {
if (this.myChart1 !== null) {
@@ -228,22 +109,10 @@ export default {
this.myChart4.dispose()
this.myChart4 = null
}
- if (this.myChart5 !== null) {
- this.myChart5.dispose()
- this.myChart5 = null
- }
if (this.timer !== null) {
clearInterval(this.timer)
this.timer = null
}
- // if (this.chart2Timer !== null) {
- // clearInterval(this.chart2Timer)
- // this.chart2Timer = null
- // }
- // if (this.chart5Timer !== null) {
- // clearInterval(this.chart5Timer)
- // this.chart5Timer = null
- // }
},
methods: {
back () {
@@ -269,130 +138,14 @@ export default {
},
async _getAllBigScreen () {
let res = await getAllBigScreen()
- // if (this.chart2Timer !== null) {
- // clearInterval(this.chart2Timer)
- // this.chart2Timer = null
- // }
- // if (this.chart5Timer !== null) {
- // clearInterval(this.chart5Timer)
- // this.chart5Timer = null
- // }
this.materList = [...res.inventoryAnalysis]
this.curList = [...res.inventoryIOAnalysis]
- this.historyList = [...res.historyInventoryIOAnalysis]
- this.statisList = [...res.todayProduceStatistic]
- this.loadList = [...res.todayLoadingAndUnloadingStatistics]
- this.taskList = [...res.todayTask]
- this.agvList = [...res.agvInfo]
- this.rgvList = [...res.rgvInfo]
this.setEchart1()
this.setEchart2()
this.setEchart3()
this.setEchart4()
- this.setEchart5()
},
setEchart1 () {
- let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
- let seriesData = []
- let seriesName = []
- this.materList.map((e, i) => {
- seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
- seriesName.push({name: e.material_name})
- })
- let total = 0
- this.materList.map(e => {
- total = total + Number(e.total_material_qty)
- }, 0)
- if (!this.materList.length) {
- total = '0'
- }
- let option = {
- color: colors,
- grid: {
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- containLabel: true
- },
- title: {
- x: '16%',
- y: '35%',
- text: '总数',
- subtext: total,
- textAlign: 'center',
- textStyle: {
- fontSize: 9,
- lineHeight: 10,
- color: '#A8C3E6'
- },
- subtextStyle: {
- fontSize: 10,
- lineHeight: 8,
- color: '#DBE7F6'
- }
- },
- legend: {
- show: true,
- // type: 'scroll',
- orient: 'vertical',
- right: 0,
- bottom: 0,
- itemGap: 6,
- icon: 'rect',
- itemWidth: 4,
- itemHeight: 4,
- data: seriesName,
- formatter: (name) => {
- const item = seriesData.filter((item) => item.name === name)[0]
- return `{a|${name}}\n{b| ${item.value + '}'}`
- },
- textStyle: {
- rich: {
- a: {
- fontSize: 8,
- lineHeight: 10,
- padding: [0, 0, 0, 0],
- wordWrap: 'break-word',
- color: '#9BB9DD',
- align: 'left'
- },
- b: {
- fontSize: 8,
- lineHeight: 10,
- padding: [0, 0, 0, 0],
- color: '#DFECFB',
- align: 'left'
- }
- }
- }
- },
- series: [{
- name: '库存量监控',
- type: 'pie',
- radius: ['50%', '60%'],
- center: ['19%', '50%'],
- labelLine: {
- show: false
- },
- tooltip: {
- show: false
- },
- itemStyle: {
- borderColor: 'RGBA(27, 58, 98, .5)',
- borderWidth: 2
- },
- label: {
- show: false
- },
- selectedMode: 'single',
- selectedOffset: 20,
- data: seriesData
- }]
- }
- this.myChart1.setOption(option, true)
- },
- setEchart2 () {
let barName = []
let barData1 = []
let barData2 = []
@@ -522,7 +275,7 @@ export default {
}
]
}
- this.myChart2.setOption(option, true)
+ this.myChart1.setOption(option, true)
// this.chart2Timer = setInterval(() => {
// if (option.dataZoom[0].endValue >= barData1.length - 1) {
// option.dataZoom[0].endValue = 3
@@ -531,19 +284,152 @@ export default {
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
// }
- // this.myChart2.setOption(option, true)
+ // this.myChart1.setOption(option, true)
// }, 2000)
},
- setEchart3 () {
- let total = 0
- this.historyList.map(el => {
- total = Math.max(total, Number(el.total_instorage_qty), Number(el.total_outstorage_qty))
+ setEchart2 () {
+ let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
+ let seriesData = []
+ let seriesName = []
+ this.materList.map((e, i) => {
+ if (i === 0) {
+ seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage, radius: ['70%', '100%']})
+ } else {
+ seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
+ }
+ seriesName.push({name: e.material_name})
})
+ console.log(seriesData)
+ let total = 0
+ this.materList.map(e => {
+ total = total + Number(e.total_material_qty)
+ }, 0)
+ if (!this.materList.length) {
+ total = '0'
+ }
+ let option = {
+ color: colors,
+ grid: {
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ containLabel: true
+ },
+ title: {
+ left: '19%',
+ top: '50%',
+ text: `{a|总数（台）}\n{b|${total}}`,
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
+ padding: 0,
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 8,
+ lineHeight: 10,
+ color: '#A8C3E6'
+ },
+ b: {
+ fontSize: 14,
+ lineHeight: 16,
+ color: '#DBE7F6'
+ }
+ }
+ }
+ },
+ legend: {
+ show: true,
+ // type: 'scroll',
+ orient: 'vertical',
+ right: 0,
+ bottom: 0,
+ itemGap: 6,
+ icon: 'rect',
+ itemWidth: 4,
+ itemHeight: 4,
+ data: seriesName,
+ formatter: (name) => {
+ const item = seriesData.filter((item) => item.name === name)[0]
+ return `{a|${name}}\n{b| ${item.value + '}'}`
+ },
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 8,
+ lineHeight: 10,
+ padding: [0, 0, 0, 0],
+ wordWrap: 'break-word',
+ color: '#9BB9DD',
+ align: 'left'
+ },
+ b: {
+ fontSize: 8,
+ lineHeight: 10,
+ padding: [0, 0, 0, 0],
+ color: '#DFECFB',
+ align: 'left'
+ }
+ }
+ }
+ },
+ series: [
+ {
+ clockwise: true,
+ hoverAnimation: false,
+ legendHoverLink: false,
+ hoverOffset: 0,
+ name: '外层空心圆',
+ type: 'pie',
+ radius: ['80%', '80%'],
+ center: ['19%', '50%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ labelLine: {
+ show: false
+ },
+ itemStyle: {
+ borderColor: '#4774AD',
+ borderWidth: 1
+ },
+ data: [{ value: 0 }]
+ },
+ {
+ name: '库存量监控',
+ type: 'pie',
+ radius: ['50%', '60%'],
+ center: ['19%', '50%'],
+ labelLine: {
+ show: false
+ },
+ tooltip: {
+ show: false
+ },
+ itemStyle: {
+ borderColor: 'RGBA(27, 58, 98, .5)',
+ borderWidth: 2
+ },
+ label: {
+ show: false
+ },
+ selectedMode: true,
+ hoverAnimation: false,
+ selectedOffset: 2,
+ data: seriesData
+ }
+ ]
+ }
+ this.myChart2.setOption(option, true)
+ },
+ setEchart3 () {
let barName = []
let barData1 = []
let barData2 = []
- this.historyList.map(el => {
- barName.push(el.data)
+ this.curList.map(el => {
+ barName.push(el.material_name)
barData1.push(el.total_instorage_qty)
barData2.push(el.total_outstorage_qty)
})
@@ -583,34 +469,10 @@ export default {
},
axisLabel: {
interval: 0,
- // rotate: 45,
color: '#7591B2',
fontSize: 8,
lineHeight: 6,
- // align: 'right',
margin: 5
- // formatter: (value) => {
- // let str = ''
- // let num = 5
- // let valLength = value.length
- // let rowNum = Math.ceil(valLength / num)
- // if (rowNum > 1) {
- // for (let i = 0; i < rowNum; i++) {
- // let temp = ''
- // let start = i * num
- // let end = start + num
- // if (i === rowNum - 1) {
- // temp = value.substring(start, end)
- // } else {
- // temp = value.substring(start, end) + '\n'
- // }
- // str += temp
- // }
- // return str
- // } else {
- // return value
- // }
- // }
},
data: barName
},
@@ -634,30 +496,26 @@ export default {
type: [2, 1],
color: '#455C86'
}
- },
- max: total
+ }
},
series: [
{
name: '入库',
- type: 'line',
- showSymbol: false,
+ type: 'bar',
+ barWidth: '10',
itemStyle: {
- color: '#67D470',
- lineStyle: {
- color: '#67D470',
- width: 1
- }
- },
- areaStyle: {
- color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: 'rgba(103,212,112,0.1)'
- },
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
- color: 'rgba(103,212,112,0.74)'
+ color: 'rgba(103,212,112,0.2)'
+ },
+ {
+ offset: 0.08,
+ color: 'rgba(103,212,112,0.9)'
+ },
+ {
+ offset: 0,
+ color: 'rgba(255,255,255,0.9)'
}
])
},
@@ -665,271 +523,139 @@ export default {
},
{
name: '出库',
- type: 'line',
- showSymbol: false,
+ type: 'bar',
+ barWidth: '10',
itemStyle: {
- color: '#58A2E3',
- lineStyle: {
- color: '#58A2E3',
- width: 1
- }
- },
- areaStyle: {
- color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: 'rgba(45,144,255,0)'
- },
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
- color: 'rgba(45,144,255,0.85)'
+ color: 'rgba(25,128,234,0.2)'
+ },
+ {
+ offset: 0.08,
+ color: 'rgba(25,128,234,0.9)'
+ },
+ {
+ offset: 0,
+ color: 'rgba(255,255,255,0.9)'
}
])
},
data: barData2
}
+ ],
+ dataZoom: [
+ {
+ xAxisIndex: 0, // 这里是从X轴的0刻度开始
+ show: false, // 是否显示滑动条，不影响使用
+ type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+ startValue: 0, // 从头开始。
+ endValue: 3 // 展示到第几个。
+ }
]
}
this.myChart3.setOption(option, true)
},
setEchart4 () {
- let xAxisData = []
+ let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
let seriesData = []
- let colors = ['#1980EA', '#67D470', '#EF5252']
- this.statisList.map(el => {
- xAxisData.push(el.region_name)
- seriesData.push(el.count)
+ let seriesName = []
+ this.materList.map((e, i) => {
+ seriesData.push({name: e.material_name, value: e.total_material_qty, percentage: e.percentage})
+ seriesName.push({name: e.material_name})
})
+ let total = 0
+ this.materList.map(e => {
+ total = total + Number(e.total_material_qty)
+ }, 0)
+ if (!this.materList.length) {
+ total = '0'
+ }
let option = {
+ color: colors,
grid: {
- top: 22,
+ top: 0,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
- xAxis: {
- type: 'category',
- axisTick: {
- show: false
+ title: {
+ x: '16%',
+ y: '35%',
+ text: '总数',
+ subtext: total,
+ textAlign: 'center',
+ textStyle: {
+ fontSize: 9,
+ lineHeight: 10,
+ color: '#A8C3E6'
},
- axisLine: {
- show: true,
- lineStyle: {
- width: 1,
- color: '#3C5787'
- }
- },
- axisLabel: {
- interval: 0,
- color: '#7591B2',
- fontSize: 8,
- lineHeight: 6,
- margin: 5
- },
- data: xAxisData
- },
- yAxis: {
- type: 'value',
- name: '产量:托',
- nameTextStyle: {
- fontSize: 8,
- color: '#fff',
- padding: [0, 0, 0, 0]
- },
- axisLine: {
- show: false
- },
- splitNumber: 2,
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#B5C5D4',
- fontSize: 6
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: [2, 1],
- color: '#455C86'
- }
+ subtextStyle: {
+ fontSize: 10,
+ lineHeight: 8,
+ color: '#DBE7F6'
}
},
- series: [
- {
- name: '产量',
- type: 'pictorialBar',
- symbolRepeat: 'fixed',
- symbolMargin: 2,
- symbol: 'rect',
- symbolClip: true,
- symbolSize: [19, 4],
- symbolPosition: 'center',
- itemStyle: {
- color: (params) => {
- return colors[params.dataIndex]
- }
- },
- data: seriesData
- }
- ]
- }
- this.myChart4.setOption(option, true)
- },
- setEchart5 () {
- let attaData1 = []
- let attaData2 = []
- let ydata = []
- this.loadList.map(el => {
- ydata.push(el.region_name)
- attaData1.push(el.material_loading_count)
- attaData2.push(el.material_unloading_count)
- })
- let option = {
- grid: {
- top: 20,
- left: 0,
- right: 8,
- bottom: 0,
- containLabel: true
- },
legend: {
+ show: true,
+ // type: 'scroll',
+ orient: 'vertical',
+ right: 0,
+ bottom: 0,
+ itemGap: 6,
icon: 'rect',
- top: '0',
- right: '0',
- textStyle: {
- color: '#9BB9DD',
- fontSize: 8,
- lineHeight: 8
- },
- itemGap: 15,
itemWidth: 4,
itemHeight: 4,
- data: [{name: '上料', itemStyle: {color: '#A68615'}}, {name: '下料', itemStyle: {color: '#4E8BFB'}}]
- },
- yAxis: {
- type: 'category',
- inverse: true,
- axisTick: {
- show: false
+ data: seriesName,
+ formatter: (name) => {
+ const item = seriesData.filter((item) => item.name === name)[0]
+ return `{a|${name}}\n{b| ${item.value + '}'}`
},
- axisLine: {
- show: true,
- lineStyle: {
- width: 1,
- color: '#3C5787'
- }
- },
- axisLabel: {
- interval: 0,
- color: '#7591B2',
- fontSize: 8,
- lineHeight: 6,
- margin: 5
- },
- data: ydata
- },
- xAxis: {
- type: 'value',
- // name: '单位:托',
- nameTextStyle: {
- fontSize: 8,
- color: '#fff',
- padding: [0, 0, 0, 0]
- },
- axisLine: {
- show: false
- },
- splitNumber: 4,
- axisTick: {
- show: false
- },
- axisLabel: {
- color: '#B5C5D4',
- fontSize: 6
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: [2, 1],
- color: '#455C86'
+ textStyle: {
+ rich: {
+ a: {
+ fontSize: 8,
+ lineHeight: 10,
+ padding: [0, 0, 0, 0],
+ wordWrap: 'break-word',
+ color: '#9BB9DD',
+ align: 'left'
+ },
+ b: {
+ fontSize: 8,
+ lineHeight: 10,
+ padding: [0, 0, 0, 0],
+ color: '#DFECFB',
+ align: 'left'
+ }
}
}
},
- series: [
- {
- name: '上料',
- type: 'bar',
- label: {
- show: true,
- position: 'right',
- fontSize: 8,
- color: '#F5F5F5',
- formatter: '{c}托'
- },
- barWidth: '6',
- itemStyle: {
- color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: '#8C620F'
- },
- {
- offset: 1,
- color: '#C7B51C'
- }
- ])
- },
- data: attaData1
+ series: [{
+ name: '库存量监控',
+ type: 'pie',
+ radius: ['50%', '60%'],
+ center: ['19%', '50%'],
+ labelLine: {
+ show: false
},
- {
- name: '下料',
- type: 'bar',
- label: {
- show: true,
- position: 'right',
- fontSize: 8,
- color: '#F5F5F5',
- formatter: '{c}托'
- },
- barWidth: '6',
- itemStyle: {
- color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: '#3261FB'
- },
- {
- offset: 1,
- color: '#6BB4FB'
- }
- ])
- },
- data: attaData2
- }
- ],
- dataZoom: [
- {
- yAxisIndex: 0, // 这里是从X轴的0刻度开始
- show: false, // 是否显示滑动条，不影响使用
- type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
- startValue: 0, // 从头开始。
- endValue: 7 // 展示到第几个。
- }
- ]
+ tooltip: {
+ show: false
+ },
+ itemStyle: {
+ borderColor: 'RGBA(27, 58, 98, .5)',
+ borderWidth: 2
+ },
+ label: {
+ show: false
+ },
+ selectedMode: 'single',
+ selectedOffset: 20,
+ data: seriesData
+ }]
}
- this.myChart5.setOption(option, true)
- // this.chart5Timer = setInterval(() => {
- // if (option.dataZoom[0].endValue >= ydata.length - 1) {
- // option.dataZoom[0].endValue = 7
- // option.dataZoom[0].startValue = 0
- // } else {
- // option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
- // option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
- // }
- // this.myChart5.setOption(option, true)
- // }, 2000)
+ this.myChart4.setOption(option, true)
}
}
}
diff --git a/src/pages/modules/home/style.stylus b/src/pages/modules/home/style.stylus
index ac20dce..ef1c58f 100644
--- a/src/pages/modules/home/style.stylus
+++ b/src/pages/modules/home/style.stylus
@@ -36,25 +36,29 @@
width 100%
height 100%
padding 60px 10px 10px 10px
+.n_wraper
+ width 100%
+ height calc(50% - 4px)
+ background-color #082B64
display: flex;
justify-content: space-between;
-.n_left_wraper
+ &:first-child
+ margin-bottom 8px
+.l_wraper
width 24%
height 100%
-.n-center_wraper
+.r_wraper
width 75%
height 100%
+ background center / 100% 100% url('../../../images/area_a.png') no-repeat
+.item_wraper
+ width 100%
+ height calc(50% - 2px)
+ &:first-child
+ margin-bottom 4px
.w_wraper
width 100%
height 100%
-.item_wraper
- width 100%
- height calc((100% - 30px) / 4)
- margin-bottom 10px
- &:last-child
- margin-bottom 0
-.item_wraper_1
- height calc((200% - 20px) / 3)
.title_wraper
width 100%
height 24px
@@ -70,7 +74,7 @@
.content_wraper
width 100%
height calc(100% - 24px)
- padding 8px
+ padding 4px
background-color rgba(30, 65, 126, 70%)
.content_wraper_2
padding 0
@@ -158,74 +162,4 @@
height 14px
.state_name
width 100%
- height 20px
-.agv_wrap
- display flex
- justify-content space-between
- width 100%
- height 47%
- padding-bottom 10px
-.rgv_wrap
- height 53%
- padding-bottom 0
-.agv_item
- display: flex;
- justify-content: space-between;
- width 32%
- padding 5px
- border 1px solid #3AA2F2
- border-radius 4px
- box-shadow inset 0px 0px 3px 3px rgba(58, 162, 242, 40%)
-.rgv_item
- display: block
- width 24%
-.agv_left
- width 33%
- height 100%
- padding-bottom 8px
-.rgv_left
- width 100%
- height 20%
- padding 0
- display: flex;
- justify-content: space-between;
- align-items: center;
-.agv_img
- height calc(100% - 30px)
- background center center / 80% auto url('../../../images/agv_s.png') no-repeat
-.agv_info
- width 64%
-.p1
- height 30px
- font-size: 9px;
- line-height 30px
- color: #78B1DE;
- text-align: center;
- white-space nowrap
-.agv_txt
- display: flex;
- justify-content: space-between;
- align-items: center;
- height 20%
- background bottom center / 100% 3px url('../../../images/screen1/line_1.png') no-repeat
- &:last-child
- background none
-.p2
- font-size: 7px;
- color: #84B0DA;
- text-align: center;
- font-weight: 700;
-.p3
- font-size: 8px;
- color: #FFFFFF;
- text-align: center;
- font-weight: 700;
-.rgv_img
- width 50%
- height 100%
- background center center / 80% auto url('../../../images/rgv_s.png') no-repeat
- margin-bottom 0
-.rgv_info
- height 80%
-.rgv_txt
- height 20%
\ No newline at end of file
+ height 20px
\ No newline at end of file