root/screenkb-beian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接口

Browse Source
This commit is contained in:
xiangxy
2025-06-26 17:51:08 +08:00
parent 5601a107e5
commit b6e8a59359
2 changed files with 301 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/config/mork01.js Normal file
View File

@@ -0,0 +1,141 @@
/* eslint-disable */
export const synthesizeInfo = () => {
let res = {
"inAndOutTrend": {
"in": [
{
"date": "11-13",
"qty": "400.000"
},
{
"date": "11-12",
"qty": "0"
},
{
"date": "11-11",
"qty": "220"
},
{
"date": "11-10",
"qty": "0"
},
{
"date": "11-09",
"qty": "0"
},
{
"date": "11-08",
"qty": "100"
},
{
"date": "11-07",
"qty": "0"
}
],
"out": [
{
"date": "11-13",
"qty": "0"
},
{
"date": "11-12",
"qty": "0"
},
{
"date": "11-11",
"qty": "120"
},
{
"date": "11-10",
"qty": "0"
},
{
"date": "11-09",
"qty": "60"
},
{
"date": "11-08",
"qty": "80"
},
{
"date": "11-07",
"qty": "0"
}
]
},
"pointUse": {
"total_qty": 960,
"use_qty": 5,
"emp_qty": 955,
"use_percentage": "0.52%"
},
"toDayInAndOut":{
"in": {
"total_qty": 4400,
"vehicle_qty": 1119
},
"out": {
"total_qty": 220,
"vehicle_qty": 20
}
},
"ivtAnalyse": {
"total_qty": 15800.000,
"data": [
{
"ivt_qty": 12000.000,
"material_name": "测试物料",
"percentage": "75.95%"
},
{
"ivt_qty": 2000.000,
"material_name": "A345度等径承插口弯头45CCL1 1/8USNA0131010TH",
"percentage": "12.66%"
},
{
"ivt_qty": 1500.000,
"material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014",
"percentage": "9.49%"
},
{
"ivt_qty": 300.000,
"material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014TH",
"percentage": "1.90%"
},
{
"ivt_qty": 1500.000,
"material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014",
"percentage": "9.49%"
},
{
"ivt_qty": 300.000,
"material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014TH",
"percentage": "1.90%"
}
]
},
"realTask": [
{
"task_code": 'rw001',
"point_code1": "dw-1-1",
"point_code2": "dw-2-2",
"vehicle_code": "vc123123",
"task_status": "生成"
},
],
"unIos": [
{
"bill_code": 'dj001',
"io_type": "入库",
"bill_type": "待定",
"biz_date": "2025-03-28",
"stor_name": "仓库1",
"total_qty": "100",
"detail_count": "60",
"source_id": "ydh0001",
"bill_status": "生成"
},
]
}
return res
}

567
src/pages/modules/index2.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="box relative">
<t-header type="1" title1="仓储监控" title2="北安集团WMS仓储看板"></t-header>
<t-header type="1" title1="仓储监控" title2="北安WMS仓储看板"></t-header>
<div class="box body_container">
<div class="relative b_title">
<span class="absolute sj_icon"></span>
@@ -16,20 +16,20 @@
<p class="title">货位使用</p>
<div class="zd-row wraper_4">
<div class="box percent_item">
<p>{{ lx_used.percent }}</p>
<p>{{ pointUse.use_percentage }}</p>
</div>
<div class="box zd-col-16 zd-row flexcol jccenter">
<div class="zd-row mgb8">
<p class="zd-col-8 item_label">总货位数</p>
<p class="zd-col-16 item_value">{{ lx_used.total }}<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ pointUse.total_qty }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row mgb8">
<p class="zd-col-8 item_label">已用货位</p>
<p class="zd-col-16 item_value">{{ lx_used.used }}<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ pointUse.use_qty }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row">
<p class="zd-col-8 item_label">空余货位</p>
<p class="zd-col-16 item_value">{{ lx_used.free }}<span class="item_unit">个</span></p>
<p class="zd-col-16 item_value">{{ pointUse.emp_qty }}<span class="item_unit">个</span></p>
</div>
</div>
</div>
@@ -40,17 +40,16 @@
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">今日出入库</p>
<div v-if="lx_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
<div class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row flexstart mgb8">
<div class="zd-col-3 item_label">入库</div>
<div class="zd-col-21">
<div class="percent_line">
<div class="percent_i" :style="{'width': getPercentage(lx_task[0].box, lx_task[0].total)}"></div>
<div class="percent_i" :style="{'width': inw}"></div>
</div>
<div class="zd-row">
<p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[0].total }}</span></p>
<p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[0].box }}</span>箱</p>
<p class="item_label font_2">时间评估:<span class="c_y">{{ lx_task[0].time }}</span></p>
<p class="item_label font_2">总数量:<span class="c_y">{{ inqty1 }}</span></p>
<p class="item_label font_2">箱数:<span class="c_y">{{ inqty2 }}</span>箱</p>
</div>
</div>
</div>
@@ -58,12 +57,11 @@
<div class="zd-col-3 item_label">出库</div>
<div class="zd-col-21">
<div class="percent_line percent_line_c">
<div class="percent_i percent_i_c" :style="{'width': getPercentage(lx_task[1].box, lx_task[1].total)}"></div>
<div class="percent_i percent_i_c" :style="{'width': outw}"></div>
</div>
<div class="zd-row">
<p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[1].total }}</span></p>
<p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[1].box }}</span>箱</p>
<p class="item_label font_2">时间评估:<span class="c_y">{{ lx_task[1].time }}</span></p>
<p class="item_label font_2">总数量:<span class="c_y">{{ outqty1 }}</span></p>
<p class="item_label font_2">箱数:<span class="c_y">{{ outqty2 }}</span>箱</p>
</div>
</div>
</div>
@@ -82,13 +80,13 @@
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
</div>
<div class="box zd-col-16 zd-row flexwrap jcflexstart aligncenter flexstart">
<div class="zd-col-12 zd-row flexstart pie_item_wrap" v-for="(e, i) in lx_inventory.slice(1)" :key="i">
<div class="zd-col-12 zd-row flexstart pie_item_wrap" v-for="(e, i) in lx_inventory.data" :key="i">
<div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
<div class="zd-col-21">
<p class="pie_legend_txt_1">{{ e.name }}</p>
<p class="pie_legend_txt_1">{{ e.material_name }}</p>
<div class="zd-row jcflexstart">
<p class="pie_legend_txt_2">{{ e.qty }}</p>
<p class="pie_legend_txt_3">{{ e.percent }}</p>
<p class="pie_legend_txt_2">{{ e.ivt_qty }}</p>
<p class="pie_legend_txt_3">{{ e.percentage }}</p>
</div>
</div>
</div>
@@ -114,104 +112,73 @@
<p>托盘库监控</p>
</div>
<div class="zd-row wraper_1">
<div class="box zd-col-7 mgr8">
<div class="relative wraper_2 mgb8">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">货位使用</p>
<div class="zd-row wraper_4">
<div class="box percent_item">
<p>{{ tp_used.percent }}</p>
</div>
<div class="box zd-col-16 zd-row flexcol jccenter">
<div class="zd-row mgb8">
<p class="zd-col-8 item_label">总货位数</p>
<p class="zd-col-16 item_value">{{ tp_used.total }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row mgb8">
<p class="zd-col-8 item_label">已用货位</p>
<p class="zd-col-16 item_value">{{ tp_used.used }}<span class="item_unit">个</span></p>
</div>
<div class="zd-row">
<p class="zd-col-8 item_label">空余货位</p>
<p class="zd-col-16 item_value">{{ tp_used.free }}<span class="item_unit">个</span></p>
</div>
</div>
</div>
</div>
<div class="relative wraper_2">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">今日出入库</p>
<div v-if="tp_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
<div class="zd-row flexstart mgb8">
<div class="zd-col-3 item_label">入库</div>
<div class="zd-col-21">
<div class="percent_line">
<div class="percent_i" :style="{'width': getPercentage(tp_task[0].box, tp_task[0].total)}"></div>
</div>
<div class="zd-row">
<p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[0].total }}</span></p>
<p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[0].box }}</span>箱</p>
<p class="item_label font_2">时间评估:<span class="c_y">{{ tp_task[0].time }}</span></p>
</div>
</div>
</div>
<div class="zd-row flexstart">
<div class="zd-col-3 item_label">出库</div>
<div class="zd-col-21">
<div class="percent_line percent_line_c">
<div class="percent_i percent_i_c" :style="{'width': getPercentage(tp_task[1].box, tp_task[1].total)}"></div>
</div>
<div class="zd-row">
<p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[1].total }}</span></p>
<p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[1].box }}</span>箱</p>
<p class="item_label font_2">时间评估:<span class="c_y">{{ tp_task[1].time }}</span></p>
</div>
</div>
<div class="relative wraper_1 wraper_3 wraper_5 mgr8">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">实时任务</p>
<div class="zd-row wraper_6">
<div class="box scroll_wrap">
<ul class="scroll_tab_1 scroll_tab_2">
<li>任务编码</li>
<li>任务起点</li>
<li>任务终点</li>
<li>载具编码</li>
<li>任务状态</li>
</ul>
<div class="scroll_container_0">
<vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in taskList" :key="i">
<div class="scroll-ul_1_div">{{e.task_code}}</div>
<div class="scroll-ul_1_div">{{e.point_code1}}</div>
<div class="scroll-ul_1_div">{{e.point_code2}}</div>
<div class="scroll-ul_1_div">{{e.vehicle_code}}</div>
<div class="scroll-ul_1_div">{{e.task_status}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
<div class="box zd-col-10 mgr8">
<div class="relative wraper_2 wraper_3">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">实时库存分析</p>
<div class="zd-row wraper_4">
<div class="box zd-col-8 mgr8">
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
<div class="relative wraper_1 wraper_3 wraper_5">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">未完成单据</p>
<div class="zd-row wraper_6">
<div class="box scroll_wrap">
<ul class="scroll_tab_1 scroll_tab_3">
<li>单据编码</li>
<li>出入类型</li>
<li>单据类型</li>
<li>业务日期</li>
<li>仓库</li>
<li>总数量</li>
<li>明细数</li>
<li>源单号</li>
<li>单据状态</li>
</ul>
<div class="scroll_container_0">
<vue-seamless-scroll :data="billList" :class-option="defaultOption1">
<ul class="scroll-ul_1 scroll-ul_2">
<li v-for="(e, i) in billList" :key="i">
<div class="scroll-ul_1_div">{{e.bill_code}}</div>
<div class="scroll-ul_1_div">{{e.io_type}}</div>
<div class="scroll-ul_1_div">{{e.bill_type}}</div>
<div class="scroll-ul_1_div">{{e.biz_date}}</div>
<div class="scroll-ul_1_div">{{e.stor_name}}</div>
<div class="scroll-ul_1_div">{{e.total_qty}}</div>
<div class="scroll-ul_1_div">{{e.detail_count}}</div>
<div class="scroll-ul_1_div">{{e.source_id}}</div>
<div class="scroll-ul_1_div">{{e.bill_status}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
<div class="box zd-col-16 zd-row flexwrap jcflexstart aligncenter flexstart">
<div class="zd-col-11 zd-row flexstart" v-for="(e, i) in tp_inventory.slice(1)" :key="i">
<div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
<div class="zd-col-21">
<p class="pie_legend_txt_1">{{ e.name }}</p>
<div class="zd-row jcflexstart">
<p class="pie_legend_txt_2">{{ e.qty }}</p>
<p class="pie_legend_txt_3">{{ e.percent }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box zd-col-7">
<div class="relative wraper_2 wraper_3">
<div class="absolute bg_j bg_j_1"></div>
<div class="absolute bg_j bg_j_2"></div>
<div class="absolute bg_j bg_j_3"></div>
<div class="absolute bg_j bg_j_4"></div>
<p class="title">出入库趋势</p>
<div class="zd-row wraper_4">
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
@@ -222,7 +189,8 @@
<script>
import THeader from '@components/header.vue'
import { synthesizeInfo } from '@js/getData2.js'
// import { synthesizeInfo } from '@js/getData2.js'
import { synthesizeInfo } from '@js/mork01.js'
export default {
components: {
THeader
@@ -235,18 +203,34 @@ export default {
historyList: [],
myChart1: null,
myChart2: null,
myChart3: null,
myChart4: null,
taskList: [],
billList: [],
lx_in_week: [], // 料箱库入库趋势
lx_out_week: [], // 料箱库出库趋势
tp_in_week: [], // 托盘库入库趋势
tp_out_week: [], // 托盘库出库趋势
lx_inventory: [], // 料箱实时库存
tp_inventory: [], // 托盘实时库存
lx_used: {}, // 料箱货位使用
tp_used: {}, // 托盘库货位使用
lx_task: [], // 料箱今日出入库
tp_task: [] // 托盘库今日出入库
pointUse: {}, // 料箱货位使用
toDayInAndOut: {}, // 料箱今日出入库
inw: '0',
inqty1: '0',
inqty2: '0',
outw: '0',
outqty1: '0',
outqty2: '0'
}
},
computed: {
defaultOption1 () {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 55, // 开始无缝滚动的数据量 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)
}
}
},
created () {
@@ -256,8 +240,6 @@ export default {
mounted () {
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
},
destroyed () {
if (this.intervalId !== null) {
@@ -272,14 +254,6 @@ export default {
this.myChart2.dispose()
this.myChart2 = null
}
if (this.myChart3 !== null) {
this.myChart3.dispose()
this.myChart3 = null
}
if (this.myChart4 !== null) {
this.myChart4.dispose()
this.myChart4 = null
}
},
methods: {
getPercentage (part, whole) {
@@ -301,31 +275,34 @@ export default {
},
async _synthesizeInfo () {
let res = await synthesizeInfo()
this.lx_used = res.lx_used
this.tp_used = res.tp_used
this.lx_in_week = [...res.lx_in_week]
this.lx_out_week = [...res.lx_out_week]
this.lx_task = [...res.lx_task]
this.tp_task = [...res.tp_task]
this.tp_in_week = [...res.tp_in_week]
this.tp_out_week = [...res.tp_out_week]
this.lx_inventory = [...res.lx_inventory]
this.tp_inventory = [...res.tp_inventory]
this.pointUse = res.pointUse
this.toDayInAndOut = res.toDayInAndOut
this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
this.inqty1 = this.toDayInAndOut.in.total_qty
this.inqty2 = this.toDayInAndOut.in.vehicle_qty
this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
this.outqty1 = this.toDayInAndOut.out.total_qty
this.outqty2 = this.toDayInAndOut.out.vehicle_qty
this.lx_in_week = [...res.inAndOutTrend.in]
this.lx_out_week = [...res.inAndOutTrend.out]
this.lx_inventory = res.ivtAnalyse
this.taskList = [...res.realTask]
this.billList = [...res.unIos]
this.setEchart1()
this.setEchart2()
this.setEchart3()
this.setEchart4()
// this.setEchart3()
// this.setEchart4()
},
setEchart1 () {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListIn = ['rgba(15, 45, 115, .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListOut = ['#1980EA', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)']
let seriesData = this.lx_inventory.slice(1)
let seriesData = this.lx_inventory.data
seriesData.map(el => {
el.value = el.qty
el.name = el.name
el.value = el.ivt_qty
el.name = el.material_name
})
let total = this.lx_inventory[0].total
let total = this.lx_inventory.total_qty
let option = {
color: colors,
grid: {
@@ -449,11 +426,11 @@ export default {
let barData1 = []
let barData2 = []
this.lx_in_week.map(el => {
barData1.push(el.total_qty)
barData1.push(el.qty)
})
this.lx_out_week.map(el => {
barName.push(el.date)
barData2.push(el.total_qty)
barData2.push(el.qty)
})
let option = {
grid: {
@@ -575,265 +552,6 @@ export default {
]
}
this.myChart2.setOption(option, true)
},
setEchart3 () {
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListIn = ['rgba(15, 45, 115, .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
let colorListOut = ['#1980EA', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)', 'rgba(15, 45, 115, .1)']
let seriesData = this.tp_inventory.slice(1)
seriesData.map(el => {
el.value = el.qty
el.name = el.name
})
let total = this.tp_inventory[0].total
let option = {
color: colors,
grid: {
top: 0,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
title: {
left: '50%',
top: '50%',
text: `{a|总数}\n{b|${total}}`,
textAlign: 'center',
textVerticalAlign: 'middle',
padding: 0,
textStyle: {
rich: {
a: {
fontSize: 12,
lineHeight: 18,
color: '#A8C3E6'
},
b: {
fontSize: 17,
lineHeight: 17,
fontWeight: 'bold',
color: '#DBE7F6'
}
}
}
},
series: [
{
name: '内层实心圆',
type: 'pie',
hoverOffset: 0,
radius: '58%',
center: ['50%', '50%'],
startAngle: 270,
label: {
show: false
},
itemStyle: {
borderColor: '#2C4E6E',
borderWidth: 6,
color: '#132942'
},
data: [{ value: 0 }]
},
{
name: '外层空心圆',
type: 'pie',
hoverOffset: 0,
radius: ['97%', '97%'],
center: ['50%', '50%'],
startAngle: 270,
label: {
show: false
},
itemStyle: {
borderColor: '#4677B8',
borderWidth: 1
},
data: [{ value: 0 }]
},
{
name: '设备运行统计内圈',
type: 'pie',
radius: ['70%', '80%'],
center: ['50%', '50%'],
startAngle: 270,
labelLine: {
show: false
},
tooltip: {
show: false
},
itemStyle: {
borderColor: 'rgba(15, 45, 115, .1)',
borderWidth: 1,
color: (params) => {
return colorListIn[params.dataIndex]
}
},
label: {
show: false
},
data: seriesData
},
{
name: '设备运行统计外圈',
type: 'pie',
radius: ['80%', '90%'],
center: ['50%', '50%'],
startAngle: 270,
labelLine: {
show: false
},
tooltip: {
show: false
},
itemStyle: {
borderColor: 'rgba(15, 45, 115, .1)',
borderWidth: 1,
color: (params) => {
return colorListOut[params.dataIndex]
}
},
label: {
show: false
},
data: seriesData
}
]
}
this.myChart3.setOption(option, true)
},
setEchart4 () {
let barName = []
let barData1 = []
let barData2 = []
this.tp_in_week.map(el => {
barName.push(el.date)
barData1.push(el.total_qty)
})
this.tp_out_week.map(el => {
barData2.push(el.total_qty)
})
let option = {
grid: {
top: 30,
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
legend: {
icon: 'rect',
top: '0',
right: '0',
textStyle: {
color: '#9BB9DD',
fontSize: 12,
lineHeight: 16
},
itemGap: 16,
itemWidth: 8,
itemHeight: 8,
data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 1,
color: '#3C5787'
}
},
axisLabel: {
interval: 0,
rotate: 45,
color: '#7591B2',
fontSize: 12,
lineHeight: 12
},
data: barName
},
yAxis: {
type: 'value',
// name: '单位：块',
axisLine: {
show: false
},
splitNumber: 4,
axisTick: {
show: false
},
axisLabel: {
color: '#B5C5D4',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
type: [2, 1],
color: '#455C86'
}
}
},
series: [
{
name: '入库',
type: 'line',
showSymbol: false,
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)'
},
{
offset: 1,
color: 'rgba(103,212,112,0.74)'
}
])
},
data: barData1
},
{
name: '出库',
type: 'line',
showSymbol: false,
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)'
},
{
offset: 1,
color: 'rgba(45,144,255,0.85)'
}
])
},
data: barData2
}
]
}
this.myChart4.setOption(option, true)
}
}
}
@@ -856,10 +574,18 @@ export default {
background-color rgba(15, 45, 115, 60%)
.wraper_3
height 100%
.wraper_5
height calc(100% - 4px)
padding 4px 10px
background-color rgba(15, 45, 115, 60%)
.wraper_6
height calc(100% - 4px)
background-color rgba(15, 45, 115, 60%)
.title
font-size 14px
line-height 16px
color #fff
// margin-left 14px
.wraper_4
width 100%
height calc(100% - 16px)
@@ -879,4 +605,31 @@ export default {
white-space nowrap
.c_y
color #f4ab00
.mgl8
margin-left 8px
.scroll_tab_2 li
width 20%
&:nth-child(1)
width 20%
.scroll_tab_3 li
width 11%
&:nth-child(1)
width 11%
.scroll-ul_1_div
width 20% !important
height 30px !important
.scroll-ul_2 .scroll-ul_1_div
width 11% !important
height 30px !important
&:nth-child(1)
width 11%
.scroll_container_0
width: 100%;
height: calc(100% - 20px);
.scroll-ul_1 li
height 30px !important
// line-height 30px !important
.scroll-ul_2 li
height 30px !important
// line-height 30px !important
</style>