修改看板
夜笙歌
7 days ago
parent
62b98c0420
commit
353fc06857
Binary file not shown.
|
Before Width: | Height: | Size: 690 KiB After Width: | Height: | Size: 776 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 690 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 668 KiB After Width: | Height: | Size: 760 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 668 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
@ -0,0 +1,568 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="headTitle">京源生产监控平台</div>
|
||||
<div v-for="(i,k) in title"
|
||||
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
|
||||
class="title">
|
||||
{{ i }}
|
||||
</div>
|
||||
<div class="table1">
|
||||
<div style="background-color: #1077bc19">
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 10%">
|
||||
编号
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 23.333%">
|
||||
生产工单
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
计划数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
实际数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
差异值
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
完成率
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:class-option="scrollTableOption"
|
||||
:data="scrollTableData"
|
||||
class="case-item"
|
||||
style="height: calc(100% - 30px);overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in scrollTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
||||
<div
|
||||
class="scrollTableItem" style="width: 10%">
|
||||
{{ item.value1 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem" style="width: 23.333%">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value3 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value4 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value5 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value6 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="table2">
|
||||
<div style="background-color: #1077bc19">
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 10%">
|
||||
编号
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 23.333%">
|
||||
生产工单
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
计划数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
实际数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
差异值
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
完成率
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:class-option="scrollTableOption"
|
||||
:data="scrollTableData"
|
||||
class="case-item"
|
||||
style="height: calc(100% - 30px);overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in scrollTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
||||
<div
|
||||
class="scrollTableItem" style="width: 10%">
|
||||
{{ item.value1 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem" style="width: 23.333%">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value3 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value4 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value5 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value6 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="table3">
|
||||
<div style="background-color: #1077bc19">
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 10%">
|
||||
编号
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;width: 23.333%">
|
||||
生产工单
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
计划数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
实际数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
差异值
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
完成率
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:class-option="scrollTableOption"
|
||||
:data="scrollTableData"
|
||||
class="case-item"
|
||||
style="height: calc(100% - 30px);overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in scrollTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
||||
<div
|
||||
class="scrollTableItem" style="width: 10%">
|
||||
{{ item.value1 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem" style="width: 23.333%">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value3 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value4 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value5 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value6 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="chart1">
|
||||
<Chart key="chart1" ref="chart1"></Chart>
|
||||
</div>
|
||||
<div class="chart2">
|
||||
<Chart key="chart2" ref="chart2"></Chart>
|
||||
</div>
|
||||
<div class="num1 num1_1" style="top: 11.9%;left: 11.1%;color:#5fc2f2">1</div>
|
||||
<div class="num1 num1_2" style="top: 11.9%;left:14.6%;color:#5fc2f2">0</div>
|
||||
<div class="num1 num1_3" style="top: 11.9%;left:18.1%;color:#5fc2f2">0</div>
|
||||
<div class="num1 num1_4" style="top: 11.9%;left:21.8%;color:#5fc2f2">0</div>
|
||||
<div class="num1 num1_5" style="top: 11.9%;left:35.6%;color:#59ee7b">1</div>
|
||||
<div class="num1 num1_6" style="top: 11.9%;left:39.2%;color:#59ee7b">0</div>
|
||||
<div class="num1 num1_7" style="top: 11.9%;left:42.8%;color:#59ee7b">0</div>
|
||||
<div class="num1 num1_8" style="top: 11.9%;left:46.4%;color:#59ee7b">0</div>
|
||||
<div class="num1 num1_9" style="top: 11.9%;left:60.3%;color:#f60008">1</div>
|
||||
<div class="num1 num1_10" style="top: 11.9%;left:63.9%;color:#f60008">0</div>
|
||||
<div class="num1 num1_11" style="top: 11.9%;left:67.4%;color:#f60008">0</div>
|
||||
<div class="num1 num1_12" style="top: 11.9%;left:71%;color:#f60008">0</div>
|
||||
<div class="num1 num1_13" style="top: 11.9%;left:84.8%;color:#f60008">1</div>
|
||||
<div class="num1 num1_14" style="top: 11.9%;left:88.4%;color:#f60008">0</div>
|
||||
<div class="num1 num1_15" style="top: 11.9%;left:92%;color:#f60008">0</div>
|
||||
<div class="num1 num1_16" style="top: 11.9%;left:95.6%;color:#f60008">0</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import Chart from '@/components/board/Chart'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
||||
export default {
|
||||
name: 'Board1',
|
||||
components: {
|
||||
vueSeamlessScroll,
|
||||
Chart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: [
|
||||
'工位生产进度',
|
||||
'工位生产效率TOP',
|
||||
'工位生产异常情况',
|
||||
'计划数量:',
|
||||
'完成数量:',
|
||||
'差异值:',
|
||||
'完成进度:',
|
||||
],
|
||||
titlePosition: [
|
||||
{
|
||||
top: 41.6,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 41.6,
|
||||
left: 69
|
||||
},
|
||||
{
|
||||
top: 70.5,
|
||||
left: 69
|
||||
},
|
||||
{
|
||||
top: 11.9,
|
||||
left: 4
|
||||
},
|
||||
{
|
||||
top: 11.9,
|
||||
left: 29
|
||||
},
|
||||
{
|
||||
top: 11.9,
|
||||
left: 54
|
||||
},
|
||||
{
|
||||
top: 11.9,
|
||||
left: 78
|
||||
}
|
||||
],
|
||||
scrollTableOption: {
|
||||
step: 0.5, // 数值越大速度滚动越快
|
||||
limitMoveNum: 22, // 开始无缝滚动的数据量 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: 0,
|
||||
},
|
||||
scrollTableData: Array(50).fill('').map(function (i, k) {
|
||||
let val1 = Math.ceil(Math.random() * 10000)
|
||||
let val2 = val1 - Math.ceil(Math.random() * val1)
|
||||
let val3 = val1 - val2
|
||||
let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
|
||||
return {
|
||||
value1: k + 1,
|
||||
value2: "20230304" + k,
|
||||
value3: val1,
|
||||
value4: val2,
|
||||
value5: val3,
|
||||
value6: val4,
|
||||
}
|
||||
}),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart1.setData({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
left: "70%",
|
||||
align: "left",
|
||||
top: "middle",
|
||||
textStyle: {
|
||||
color: "#8C8C8C",
|
||||
},
|
||||
height: 250,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "库存情况",
|
||||
type: "pie",
|
||||
radius: ["20%", "70%"],
|
||||
center: ["35%", "50%"],
|
||||
clockwise: false,
|
||||
data: [
|
||||
{
|
||||
value: 45,
|
||||
name: "已过期",
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
name: "半年内",
|
||||
},
|
||||
{
|
||||
value: 15,
|
||||
name: "三个月内",
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
name: "一个月内",
|
||||
},
|
||||
],
|
||||
label: {
|
||||
normal: {
|
||||
position: "inner",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
formatter: (e) => {
|
||||
return e.percent.toFixed(2) + '%'
|
||||
}
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
this.$refs.chart2.setData({
|
||||
grid: {
|
||||
top: 30,
|
||||
left: "2%",
|
||||
right: "5%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: "#ffffff63",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: "#ffffff63",
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "产量",
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
showAllSymbol: true,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#fff", // 线条颜色
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: "red",
|
||||
borderColor: "#fff",
|
||||
borderWidth: 3,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#eb64fb",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3fbbff0d",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
window.onresize = () => {
|
||||
this.$refs.chart1.chart.resize()
|
||||
this.$refs.chart2.chart.resize()
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.app-container {
|
||||
background-image: url("../../../assets/board/productionBg3_1.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.headTitle {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 1.5vw;
|
||||
color: #d6eaed;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
color: #dddddd;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.num1 {
|
||||
position: absolute;
|
||||
font-size: 1.5vw;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.table1 {
|
||||
position: absolute;
|
||||
top: 44.5%;
|
||||
left: 3.3%;
|
||||
width: 62.5%;
|
||||
height: 48.5%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table2 {
|
||||
position: absolute;
|
||||
top: 44.5%;
|
||||
left: 67.3%;
|
||||
width: 29.5%;
|
||||
height: 19.5%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.table3 {
|
||||
position: absolute;
|
||||
top: 73.5%;
|
||||
left: 67.3%;
|
||||
width: 29.5%;
|
||||
height: 19.5%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scrollTableItem {
|
||||
display: inline-block;
|
||||
width: calc(100% / 6);
|
||||
text-align: center;
|
||||
padding: 14px 0;
|
||||
color: #4e99c5
|
||||
}
|
||||
|
||||
.chart1 {
|
||||
position: absolute;
|
||||
top: 16%;
|
||||
left: 30%;
|
||||
width: 35.5%;
|
||||
height: 21.5%;
|
||||
}
|
||||
|
||||
.chart2 {
|
||||
position: absolute;
|
||||
top: 16%;
|
||||
left: 67.3%;
|
||||
width: 29%;
|
||||
height: 21%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,892 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="warehouse"></div>
|
||||
<div class="headTitle">京源智能仓储监控平台</div>
|
||||
<div v-for="(i,k) in title"
|
||||
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
|
||||
class="title">
|
||||
{{ i }}
|
||||
</div>
|
||||
<div class="table1">
|
||||
<div style="background-color: #1077bc19">
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
任务编号
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
任务类型
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
物料名称
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
库位编号
|
||||
</div>
|
||||
<div class="scrollTableItem" style="color:#65c2f3;font-weight: bold;">
|
||||
时间
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:class-option="scrollTableOption"
|
||||
:data="scrollTableData"
|
||||
class="case-item"
|
||||
style="height: calc(100% - 30px);overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in scrollTableData"
|
||||
:key="index"
|
||||
>
|
||||
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value1 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value3 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value4 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value5 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="chart1">
|
||||
<HighChart key="chart1" ref="chart1"></HighChart>
|
||||
</div>
|
||||
<div class="chart2">
|
||||
<HighChart key="chart2" ref="chart2"></HighChart>
|
||||
</div>
|
||||
<div class="chart3">
|
||||
<HighChart key="chart3" ref="chart3"></HighChart>
|
||||
</div>
|
||||
<div class="chart4">
|
||||
<HighChart key="chart4" ref="chart4"></HighChart>
|
||||
</div>
|
||||
<div class="chart5">
|
||||
<Chart key="chart5" ref="chart5"></Chart>
|
||||
</div>
|
||||
<div class="chart6">
|
||||
<Chart key="chart6" ref="chart6"></Chart>
|
||||
</div>
|
||||
|
||||
<div class="num1 num1_1" style="top: 11.9%;left: 17.4%;color:#5fc2f2">1</div>
|
||||
<div class="num1 num1_2" style="top: 11.9%;left:20.9%;color:#5fc2f2">0</div>
|
||||
<div class="num1 num1_3" style="top: 11.9%;left:24.4%;color:#5fc2f2">0</div>
|
||||
<div class="num1 num1_4" style="top: 11.9%;left:27.9%;color:#5fc2f2">0</div>
|
||||
<div class="num1 num1_5" style="top: 11.9%;left:50%;color:#59ee7b">1</div>
|
||||
<div class="num1 num1_6" style="top: 11.9%;left:53.5%;color:#59ee7b">0</div>
|
||||
<div class="num1 num1_7" style="top: 11.9%;left:57%;color:#59ee7b">0</div>
|
||||
<div class="num1 num1_8" style="top: 11.9%;left:60.5%;color:#59ee7b">0</div>
|
||||
<div class="num1 num1_9" style="top: 11.9%;left:82.5%;color:#f60008">1</div>
|
||||
<div class="num1 num1_10" style="top: 11.9%;left:86.1%;color:#f60008">0</div>
|
||||
<div class="num1 num1_11" style="top: 11.9%;left:89.6%;color:#f60008">0</div>
|
||||
<div class="num1 num1_12" style="top: 11.9%;left:93.1%;color:#f60008">0</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import Chart from '@/components/board/Chart'
|
||||
import HighChart from '@/components/board/HighChart'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
||||
export default {
|
||||
name: 'Board1',
|
||||
components: {
|
||||
vueSeamlessScroll,
|
||||
Chart,
|
||||
HighChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: [
|
||||
'原料库出库数量:',
|
||||
'辅料库出库数量:',
|
||||
'半成品入库数量:',
|
||||
'库存占比',
|
||||
'调度任务',
|
||||
'成品库可用库存占比',
|
||||
'成品库订单库存统计',
|
||||
],
|
||||
titlePosition: [
|
||||
{
|
||||
top: 11.5,
|
||||
left: 7.5
|
||||
},
|
||||
{
|
||||
top: 11.5,
|
||||
left: 40
|
||||
},
|
||||
{
|
||||
top: 11.5,
|
||||
left: 72.5
|
||||
},
|
||||
{
|
||||
top: 19.4,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 59.8,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 59.8,
|
||||
left: 37
|
||||
},
|
||||
{
|
||||
top: 59.8,
|
||||
left: 68.5
|
||||
},
|
||||
],
|
||||
scrollTableOption: {
|
||||
step: 0.5, // 数值越大速度滚动越快
|
||||
limitMoveNum: 22, // 开始无缝滚动的数据量 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: 0,
|
||||
},
|
||||
scrollTableData: Array(100).fill('').map(function (i, k) {
|
||||
return {
|
||||
value1: k + 1,
|
||||
value2: '出库',
|
||||
value3: '物料1',
|
||||
value4: '000' + k,
|
||||
value5: '2024.03.04',
|
||||
}
|
||||
}),
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart1.setData({
|
||||
title: {
|
||||
text: '原料库存占比',
|
||||
style: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
chart: {
|
||||
type: 'pie',
|
||||
animation: false,
|
||||
backgroundColor: null,
|
||||
events: {
|
||||
load: function () {
|
||||
let each = Highcharts.each,
|
||||
points = this.series[0].points;
|
||||
each(points, function (p, i) {
|
||||
p.graphic.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side1.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side2.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 60,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
reversed: true,
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: false,
|
||||
cursor: 'pointer',
|
||||
depth: 35,
|
||||
startAngle: 45,
|
||||
size: 200,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
return this.point.options.name + '<br>' + this.point.options.h + '%';
|
||||
}
|
||||
},
|
||||
showInLegend: false,
|
||||
point: {
|
||||
events: {
|
||||
legendItemClick: function (e) {
|
||||
return false; // 直接 return false 即可禁用图例点击事件
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
data: [
|
||||
{
|
||||
'name': '材料1',
|
||||
y: 30.0,
|
||||
h: 30.0
|
||||
},
|
||||
{
|
||||
name: '材料2',
|
||||
y: 26.8,
|
||||
h: 26.8
|
||||
},
|
||||
{
|
||||
'name': '材料3',
|
||||
y: 15,
|
||||
h: 15
|
||||
},
|
||||
{
|
||||
name: '材料4',
|
||||
y: 12.8,
|
||||
h: 12.8
|
||||
},
|
||||
{
|
||||
'name': '材料5',
|
||||
y: 8.5,
|
||||
h: 8.5
|
||||
},
|
||||
{
|
||||
'name': '材料6',
|
||||
y: 6.2,
|
||||
h: 6.2
|
||||
},
|
||||
{
|
||||
'name': '材料7',
|
||||
y: 0.7,
|
||||
h: 0.7
|
||||
}
|
||||
].sort((a, b) => a.y - b.y)
|
||||
}]
|
||||
})
|
||||
this.$refs.chart2.setData({
|
||||
title: {
|
||||
text: '原料库存占比',
|
||||
style: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
chart: {
|
||||
type: 'pie',
|
||||
startAngle: Math.PI / 6,
|
||||
animation: false,
|
||||
backgroundColor: null,
|
||||
events: {
|
||||
load: function () {
|
||||
let each = Highcharts.each,
|
||||
points = this.series[0].points;
|
||||
each(points, function (p, i) {
|
||||
p.graphic.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side1.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side2.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 60,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
reversed: true,
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: false,
|
||||
cursor: 'pointer',
|
||||
depth: 35,
|
||||
startAngle: 45,
|
||||
size: 200,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
return this.point.options.name + '<br>' + this.point.options.h + '%';
|
||||
}
|
||||
},
|
||||
showInLegend: false,
|
||||
point: {
|
||||
events: {
|
||||
legendItemClick: function (e) {
|
||||
return false; // 直接 return false 即可禁用图例点击事件
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
data: [
|
||||
{
|
||||
'name': '材料1',
|
||||
y: 30.0,
|
||||
h: 30.0
|
||||
},
|
||||
{
|
||||
name: '材料2',
|
||||
y: 26.8,
|
||||
h: 26.8
|
||||
},
|
||||
{
|
||||
'name': '材料3',
|
||||
y: 15,
|
||||
h: 15
|
||||
},
|
||||
{
|
||||
name: '材料4',
|
||||
y: 12.8,
|
||||
h: 12.8
|
||||
},
|
||||
{
|
||||
'name': '材料5',
|
||||
y: 8.5,
|
||||
h: 8.5
|
||||
},
|
||||
{
|
||||
'name': '材料6',
|
||||
y: 6.2,
|
||||
h: 6.2
|
||||
},
|
||||
{
|
||||
'name': '材料7',
|
||||
y: 0.7,
|
||||
h: 0.7
|
||||
}
|
||||
].sort((a, b) => a.y - b.y)
|
||||
}]
|
||||
})
|
||||
this.$refs.chart3.setData({
|
||||
title: {
|
||||
text: '原料库存占比',
|
||||
style: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
chart: {
|
||||
type: 'pie',
|
||||
startAngle: Math.PI / 6,
|
||||
animation: false,
|
||||
backgroundColor: null,
|
||||
events: {
|
||||
load: function () {
|
||||
let each = Highcharts.each,
|
||||
points = this.series[0].points;
|
||||
each(points, function (p, i) {
|
||||
p.graphic.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side1.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side2.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 60,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
reversed: true,
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: false,
|
||||
cursor: 'pointer',
|
||||
depth: 35,
|
||||
startAngle: 45,
|
||||
size: 200,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
return this.point.options.name + '<br>' + this.point.options.h + '%';
|
||||
}
|
||||
},
|
||||
showInLegend: false,
|
||||
point: {
|
||||
events: {
|
||||
legendItemClick: function (e) {
|
||||
return false; // 直接 return false 即可禁用图例点击事件
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
data: [
|
||||
{
|
||||
'name': '材料1',
|
||||
y: 30.0,
|
||||
h: 30.0
|
||||
},
|
||||
{
|
||||
name: '材料2',
|
||||
y: 26.8,
|
||||
h: 26.8
|
||||
},
|
||||
{
|
||||
'name': '材料3',
|
||||
y: 15,
|
||||
h: 15
|
||||
},
|
||||
{
|
||||
name: '材料4',
|
||||
y: 12.8,
|
||||
h: 12.8
|
||||
},
|
||||
{
|
||||
'name': '材料5',
|
||||
y: 8.5,
|
||||
h: 8.5
|
||||
},
|
||||
{
|
||||
'name': '材料6',
|
||||
y: 6.2,
|
||||
h: 6.2
|
||||
},
|
||||
{
|
||||
'name': '材料7',
|
||||
y: 0.7,
|
||||
h: 0.7
|
||||
}
|
||||
].sort((a, b) => a.y - b.y)
|
||||
}]
|
||||
})
|
||||
this.$refs.chart4.setData({
|
||||
title: {
|
||||
text: '原料库存占比',
|
||||
style: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
chart: {
|
||||
type: 'pie',
|
||||
startAngle: Math.PI / 6,
|
||||
animation: false,
|
||||
backgroundColor: null,
|
||||
events: {
|
||||
load: function () {
|
||||
let each = Highcharts.each,
|
||||
points = this.series[0].points;
|
||||
each(points, function (p, i) {
|
||||
p.graphic.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side1.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
p.graphic.side2.attr({
|
||||
translateY: -p.shapeArgs.ran
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 60,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
reversed: true,
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: false,
|
||||
cursor: 'pointer',
|
||||
depth: 35,
|
||||
startAngle: 45,
|
||||
size: 200,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
return this.point.options.name + '<br>' + this.point.options.h + '%';
|
||||
}
|
||||
},
|
||||
showInLegend: false,
|
||||
point: {
|
||||
events: {
|
||||
legendItemClick: function (e) {
|
||||
return false; // 直接 return false 即可禁用图例点击事件
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
data: [
|
||||
{
|
||||
'name': '材料1',
|
||||
y: 30.0,
|
||||
h: 30.0
|
||||
},
|
||||
{
|
||||
name: '材料2',
|
||||
y: 26.8,
|
||||
h: 26.8
|
||||
},
|
||||
{
|
||||
'name': '材料3',
|
||||
y: 15,
|
||||
h: 15
|
||||
},
|
||||
{
|
||||
name: '材料4',
|
||||
y: 12.8,
|
||||
h: 12.8
|
||||
},
|
||||
{
|
||||
'name': '材料5',
|
||||
y: 8.5,
|
||||
h: 8.5
|
||||
},
|
||||
{
|
||||
'name': '材料6',
|
||||
y: 6.2,
|
||||
h: 6.2
|
||||
},
|
||||
{
|
||||
'name': '材料7',
|
||||
y: 0.7,
|
||||
h: 0.7
|
||||
}
|
||||
].sort((a, b) => a.y - b.y)
|
||||
}]
|
||||
})
|
||||
this.$refs.chart5.setData({
|
||||
title: {
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
text: "75%",
|
||||
textStyle: {
|
||||
color: '#ccc',
|
||||
fontSize: 2 * vw,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["47.5%", "55%"],
|
||||
center: ["50%", "50%"],
|
||||
startAngle: 225,
|
||||
endAngle: -45,
|
||||
color: ['#fa9800', "transparent"],
|
||||
data: [
|
||||
{
|
||||
value: 75,
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
name: ''
|
||||
},
|
||||
],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
this.$refs.chart6.setData({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
bottom: "10%",
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: "#ffffff63",
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#fff3",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: ['物料1', '物料2', '物料3'],
|
||||
},
|
||||
xAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: "#ffffff63",
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "#ffffff1f",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
barWidth: "40%",
|
||||
itemStyle: {
|
||||
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0a2ad7",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#138dd7",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
data: [1, 2, 3],
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pictorialBar",
|
||||
barWidth: "40%",
|
||||
symbolSize: [5, '100%'],
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [3, 0],
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: '#138dd7'
|
||||
},
|
||||
data: [1, 2, 3],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
window.onresize = () => {
|
||||
this.$refs.chart1.resize()
|
||||
this.$refs.chart2.resize()
|
||||
this.$refs.chart3.resize()
|
||||
this.$refs.chart4.resize()
|
||||
this.$refs.chart5.chart.resize()
|
||||
this.$refs.chart6.chart.resize()
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.app-container {
|
||||
background-image: url("../../../assets/board/warehouseBg3_1.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.warehouse {
|
||||
background-image: url("../../../assets/board/warehouse1.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
width: 18%;
|
||||
height: 27.8%;
|
||||
top: 65%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.headTitle {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 1.5vw;
|
||||
color: #d6eaed;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
.num1 {
|
||||
position: absolute;
|
||||
font-size: 1.5vw;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
color: #dddddd;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.table1 {
|
||||
position: absolute;
|
||||
top: 62.9%;
|
||||
left: 3.4%;
|
||||
width: 30.2%;
|
||||
height: 30%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.scrollTableItem {
|
||||
display: inline-block;
|
||||
width: calc(100% / 5);
|
||||
text-align: center;
|
||||
padding: 14px 0;
|
||||
color: #4e99c5
|
||||
}
|
||||
|
||||
.chart1 {
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 3.4%;
|
||||
width: 23%;
|
||||
height: 32%;
|
||||
}
|
||||
|
||||
.chart2 {
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 26.5%;
|
||||
width: 23%;
|
||||
height: 32%;
|
||||
}
|
||||
|
||||
.chart3 {
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 49.6%;
|
||||
width: 23%;
|
||||
height: 32%;
|
||||
}
|
||||
|
||||
.chart4 {
|
||||
position: absolute;
|
||||
top: 22.5%;
|
||||
left: 72.7%;
|
||||
width: 23%;
|
||||
height: 32%;
|
||||
}
|
||||
|
||||
.chart5 {
|
||||
position: absolute;
|
||||
top: 60.7%;
|
||||
left: 40%;
|
||||
width: 20vw;
|
||||
height: 20vw;
|
||||
}
|
||||
|
||||
.chart6 {
|
||||
position: absolute;
|
||||
top: 63%;
|
||||
left: 66.5%;
|
||||
width: 30%;
|
||||
height: 32%;
|
||||
}
|
||||
|
||||
.span {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.span1 {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue