|
|
|
@ -5,8 +5,8 @@
|
|
|
|
|
<div class="topNum planNum">{{ planNum }}</div>
|
|
|
|
|
<div class="topNum practicalNum">{{ practicalNum }}</div>
|
|
|
|
|
<div class="topNum differenceValue">{{ differenceValue }}</div>
|
|
|
|
|
<div class="title" v-for="(i,k) in title"
|
|
|
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
|
|
|
<div class="title" v-for="(i, k) in title"
|
|
|
|
|
:style="'top:' + (titlePosition[k] && titlePosition[k].top || 0) + '%;left:' + (titlePosition[k] && titlePosition[k].left || 0) + '%'">
|
|
|
|
|
{{ i }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="meter">平均节拍:{{ meter }}</div>
|
|
|
|
@ -19,9 +19,6 @@
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;">
|
|
|
|
|
产品型号
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;">
|
|
|
|
|
计划数量
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scrollTableItem" style="font-weight: bold;">
|
|
|
|
|
前板计划
|
|
|
|
|
</div>
|
|
|
|
@ -35,44 +32,26 @@
|
|
|
|
|
计划时间
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<vue-seamless-scroll
|
|
|
|
|
:class-option="scrollTableOption"
|
|
|
|
|
:data="scrollTableData"
|
|
|
|
|
class="case-item"
|
|
|
|
|
style="height: 84%;overflow: hidden;"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in scrollTableData"
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem">
|
|
|
|
|
<vue-seamless-scroll :class-option="scrollTableOption" :data="scrollTableData" class="case-item"
|
|
|
|
|
style="height: 84%;overflow: hidden;">
|
|
|
|
|
<div v-for="(item, index) in scrollTableData" :key="index">
|
|
|
|
|
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
|
|
|
|
|
<div class="scrollTableItem">
|
|
|
|
|
{{ item.value1 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem">
|
|
|
|
|
<div class="scrollTableItem">
|
|
|
|
|
{{ item.value2 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem">
|
|
|
|
|
{{ item.value31 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" :style="'color:'+(item.value3>0?'green':'#0000')">
|
|
|
|
|
<div class="scrollTableItem" :style="'color:' + (item.value3 > 0 ? 'green' : '#0000')">
|
|
|
|
|
{{ item.value3 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem" :style="'color:'+(item.value32>0?'green':'#0000')">
|
|
|
|
|
<div class="scrollTableItem" :style="'color:' + (item.value32 > 0 ? 'green' : '#0000')">
|
|
|
|
|
{{ item.value32 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem">
|
|
|
|
|
<div class="scrollTableItem">
|
|
|
|
|
{{ item.value4 }}
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="scrollTableItem">
|
|
|
|
|
<div class="scrollTableItem">
|
|
|
|
|
{{ item.value5 }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -100,7 +79,7 @@
|
|
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
|
|
import Chart from "../../../components/board/Chart";
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import {getData} from "@/api/board/getData";
|
|
|
|
|
import { getData } from "@/api/board/getData";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
@ -116,7 +95,7 @@ export default {
|
|
|
|
|
frontNum: 100,
|
|
|
|
|
laterNum: 100,
|
|
|
|
|
title: [
|
|
|
|
|
'工单计划',
|
|
|
|
|
'生成计划',
|
|
|
|
|
'小时产量统计',
|
|
|
|
|
'壳胆库存统计',
|
|
|
|
|
'生产型号统计',
|
|
|
|
@ -163,6 +142,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
getData().then(e => {
|
|
|
|
|
this.scrollTableData = e.caseShell2.table1
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
@ -227,6 +207,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -248,6 +240,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -328,6 +332,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -349,6 +365,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -429,6 +457,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -450,6 +490,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: "30%",
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -530,6 +582,18 @@ export default {
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: '30%',
|
|
|
|
|
barMaxWidth: 50,
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: "top",
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#a8aab0",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
fontFamily: "微软雅黑",
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
@ -629,7 +693,7 @@ export default {
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: calc(100% / 7);
|
|
|
|
|
width: calc(100% / 6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart1 {
|
|
|
|
@ -673,7 +737,8 @@ export default {
|
|
|
|
|
color: #fff;
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
}
|
|
|
|
|
.inventoryInfo2{
|
|
|
|
|
|
|
|
|
|
.inventoryInfo2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
transform: translateY(-50%);
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
|