科研生产tab2
This commit is contained in:
hh
@ -124,7 +124,9 @@ export default {
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
if (200 == res.code) {
|
||||
this.val = res.data[0];
|
||||
if(res.data[0] != undefined) {
|
||||
this.val = res.data[0];
|
||||
}
|
||||
this.$refs.seamlessScroll.reset();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -87,7 +87,6 @@ export default {
|
||||
flex: 1;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,50 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="生产指标">
|
||||
<div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
|
||||
<div style="display: flex; height: 100%">
|
||||
<div style="height: 100%; width: 22%; display: flex; flex-direction: column; justify-content: space-evenly">
|
||||
<div class="tag">
|
||||
<div class="title">军品收入</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>3380/<i style="font-size: 16px">12342</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">装药量</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>3380/<i style="font-size: 16px">12342</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">大型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>3380/<i style="font-size: 16px">12342</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">中型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>3380/<i style="font-size: 16px">12342</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">小型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
|
||||
>3380/<i style="font-size: 16px">12342</i></i
|
||||
>
|
||||
万
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%; width: 78%" ref="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
<div>
|
||||
<container1 title="生产指标">
|
||||
<div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
|
||||
<div style="display: flex; height: 100%">
|
||||
<div style="height: 100%; width: 22%; display: flex; flex-direction: column; justify-content: space-evenly">
|
||||
<div class="tag">
|
||||
<div class="title">军品收入</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMilitaryIncome}}/<i
|
||||
style="font-size: 16px">{{res.targetMilitaryIncome}}</i></i>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">装药量</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realCharge}}/<i
|
||||
style="font-size: 16px">{{res.targetCharge}}</i></i>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">大型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realBigProduct}}/<i
|
||||
style="font-size: 16px">{{res.targetBigProduct}}</i></i>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">中型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMediumProduct}}/<i
|
||||
style="font-size: 16px">{{res.targetMediumProduct}}</i></i>
|
||||
万
|
||||
</div>
|
||||
<div class="tag">
|
||||
<div class="title">小型产品</div>
|
||||
<i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realSmallProduct}}/<i
|
||||
style="font-size: 16px">{{res.targetSmallProduct}}</i></i>
|
||||
万
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%; width: 78%" ref="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -55,281 +50,312 @@ import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
container1,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 50,
|
||||
bottom: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '装药量(大)',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
itemStyle: {
|
||||
color: yelloColorList[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量(中)',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
itemStyle: {
|
||||
color: yelloColorList[1],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量(小)',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
itemStyle: {
|
||||
color: yelloColorList[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '支付数量',
|
||||
type: 'bar',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
itemStyle: {
|
||||
color: '#45D1CC',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: '型号5',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [620, 732, 701, 734, 1090, 1130, 1120],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[4],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号4',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [120, 132, 101, 134, 290, 230, 220],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[3],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号3',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [60, 72, 71, 74, 190, 130, 110],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[2],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号2',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [62, 82, 91, 84, 109, 110, 120],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[1],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号1',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [62, 82, 91, 84, 109, 110, 120],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[0],
|
||||
// },
|
||||
// },
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
container1,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
res: {
|
||||
realBigProduct: "0",
|
||||
realCharge: "0",
|
||||
realMediumProduct: "0",
|
||||
realMilitaryIncome: "0",
|
||||
realSmallProduct: "0",
|
||||
targetBigProduct: "0",
|
||||
targetCharge: "0",
|
||||
targetMediumProduct: "0",
|
||||
targetMilitaryIncome: "0",
|
||||
targetSmallProduct: "0",
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getProductionIndexPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.res = res.data.pic1;
|
||||
let list = res.data.pic2;
|
||||
this.setOptions(list)
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
setOptions (list) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 50,
|
||||
bottom: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 4),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: list.map(e => e.month),
|
||||
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 'value',
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// interval: 20,
|
||||
// axisLabel: {
|
||||
// formatter: '{value} %',
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false, //不显示网格线
|
||||
// },
|
||||
// splitArea: {
|
||||
// show: false, //不显示网格区域
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: 'rgb(255, 255, 255)',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '装药量(大)',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: list.map(e => e.bigCharge),
|
||||
// data: [120, 132, 101, 134, 90, 230, 210],
|
||||
itemStyle: {
|
||||
color: yelloColorList[2],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量(中)',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: list.map(e => e.mediumCharge),
|
||||
// data: [220, 182, 191, 234, 290, 330, 310],
|
||||
itemStyle: {
|
||||
color: yelloColorList[1],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '装药量(小)',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: list.map(e => e.smallCharge),
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
itemStyle: {
|
||||
color: yelloColorList[0],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '交付数量',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: list.map(e => e.targetDeliver),
|
||||
// data: [320, 332, 301, 334, 390, 330, 320],
|
||||
itemStyle: {
|
||||
color: '#45D1CC',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// name: '型号5',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [620, 732, 701, 734, 1090, 1130, 1120],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[4],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号4',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [120, 132, 101, 134, 290, 230, 220],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[3],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号3',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [60, 72, 71, 74, 190, 130, 110],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[2],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号2',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [62, 82, 91, 84, 109, 110, 120],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[1],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: '型号1',
|
||||
// type: 'bar',
|
||||
// stack: 'Search Engine',
|
||||
// emphasis: {
|
||||
// focus: 'series',
|
||||
// },
|
||||
// data: [62, 82, 91, 84, 109, 110, 120],
|
||||
// itemStyle: {
|
||||
// color: blueColorList[0],
|
||||
// },
|
||||
// },
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left3-content {
|
||||
padding: 0 10px 0 20px;
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="物资计划">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container1>
|
||||
</div>
|
||||
<div>
|
||||
<container1 title="本月计划执行情况">
|
||||
<!-- style="position: absolute; z-index: 1; left: 30px" -->
|
||||
|
||||
<el-select slot="datePicker" v-model="value" size="mini" placeholder="请选择">
|
||||
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
|
||||
</el-select>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -14,237 +19,297 @@ require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../../dashboard/mixins/resize'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['装药', '总装', '交付'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 10,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '交付',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '总装',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FA8C16',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '装药',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 900],
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
data: [500, 550, 700, 520, 650, 520, 900],
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#FA8C16',
|
||||
},
|
||||
data: [600, 500, 700, 620, 750, 800, 900],
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
data: [650, 550, 750, 670, 780, 900, 900],
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
container1,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
selectData: [
|
||||
'厂计划',
|
||||
'六院计划'
|
||||
],
|
||||
value: '厂计划'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.initChart()
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMonthPlanPic',
|
||||
method: 'get',
|
||||
params: {
|
||||
type: this.value,
|
||||
},
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
let list = res.data;
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions(list)
|
||||
}
|
||||
})
|
||||
},
|
||||
setOptions (list) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 7),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['装药', '总装', '交付'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 40,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: list.map(e => e.month),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '交付',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.realDeliver),
|
||||
// data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '总装',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FA8C16',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.realAssemble),
|
||||
},
|
||||
{
|
||||
name: '装药',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: list.map(e => e.realCharge),
|
||||
// data: [150, 232, 201, 154, 190, 330, 900],
|
||||
},
|
||||
{
|
||||
name: '交付完成率',
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
data: list.map(e => e.deliverRate),
|
||||
// data: [500, 550, 700, 520, 650, 520, 900],
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
name: '总装完成率',
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#FA8C16',
|
||||
},
|
||||
data: list.map(e => e.assembleRate),
|
||||
// data: [600, 500, 700, 620, 750, 800, 900],
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
name: '装药完成率',
|
||||
yAxisIndex: 1,
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
data: list.map(e => e.chargeRate),
|
||||
// data: [650, 550, 750, 670, 780, 900, 900],
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left3-content {
|
||||
padding: 0 10px 0 20px;
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
font-size: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-select {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,24 +4,27 @@
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||
<el-col style="text-align: center" :span="5">物资名称</el-col>
|
||||
<el-col style="text-align: center" :span="5">现有库存</el-col>
|
||||
<el-col style="text-align: center" :span="7">是否开始备货采购</el-col>
|
||||
<el-col style="text-align: center" :span="4">序号</el-col>
|
||||
<el-col style="text-align: center" :span="4">物资名称</el-col>
|
||||
<el-col style="text-align: center" :span="3">现有库存</el-col>
|
||||
<el-col style="text-align: center" :span="6">是否开始备货采购</el-col>
|
||||
<el-col style="text-align: center" :span="3">采购数量</el-col>
|
||||
<el-col style="text-align: center" :span="4">入库时间</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="3">1</el-col>
|
||||
<el-col style="text-align: center" :span="5">3181</el-col>
|
||||
<el-col style="text-align: center" :span="5">
|
||||
是
|
||||
<el-col style="text-align: center" :span="4">{{item.id}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.materialName}}</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{item.stock}}</el-col>
|
||||
|
||||
<el-col style="text-align: center" :span="6">
|
||||
{{item.startPurchase}}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">363</el-col>
|
||||
<el-col style="text-align: center" :span="4">2021-12-12 </el-col>
|
||||
<el-col style="text-align: center" :span="3">{{item.purchaseNumber}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.createTime}}</el-col>
|
||||
|
||||
</el-row>
|
||||
</li>
|
||||
@ -50,41 +53,28 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '计划一',
|
||||
level: '一级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '计划二',
|
||||
level: '二级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '计划三',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '计划四',
|
||||
level: '二级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '计划五',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
],
|
||||
scrollList: [],
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMaterialPlanPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="生产责任令">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
||||
<!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container1>
|
||||
</div>
|
||||
@ -27,169 +27,165 @@ export default {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['预测', '实际', '目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
left: 40,
|
||||
right: 40,
|
||||
top: 30,
|
||||
bottom: 70,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'型号一',
|
||||
'型号二',
|
||||
'型号三',
|
||||
'型号四',
|
||||
'型号五',
|
||||
'型号六',
|
||||
'型号七',
|
||||
'型号八',
|
||||
'型号九',
|
||||
'型号十',
|
||||
'型号十一',
|
||||
'型号十二',
|
||||
'型号十三',
|
||||
'型号十四',
|
||||
'型号十五',
|
||||
'型号十六',
|
||||
'型号十七',
|
||||
'型号十八',
|
||||
'型号十九',
|
||||
'型号二十',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: [
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
// z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 3],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
},
|
||||
data: [10, 40, 16, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions () {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getYearDutyPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
let list = res.data;
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['预测', '实际', '目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
left: 40,
|
||||
right: 40,
|
||||
top: 30,
|
||||
bottom: 70,
|
||||
},
|
||||
xAxis: {
|
||||
data: list.map(e => e.productModel),
|
||||
// data: [
|
||||
// '型号一',
|
||||
// '型号二',
|
||||
// '型号三',
|
||||
// '型号四',
|
||||
// '型号五',
|
||||
// '型号六',
|
||||
// '型号七',
|
||||
// '型号八',
|
||||
// '型号九',
|
||||
// '型号十',
|
||||
// '型号十一',
|
||||
// '型号十二',
|
||||
// '型号十三',
|
||||
// '型号十四',
|
||||
// '型号十五',
|
||||
// '型号十六',
|
||||
// '型号十七',
|
||||
// '型号十八',
|
||||
// '型号十九',
|
||||
// '型号二十',
|
||||
// ],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(list.length, 6),
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: [
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
// z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: list.map(e => e.targetTotal),
|
||||
// data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: list.map(e => e.realTotal),
|
||||
// data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 3],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#F64F58',
|
||||
},
|
||||
data: list.map(e => e.rate),
|
||||
// data: [10, 40, 16, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="工厂计划">
|
||||
<el-date-picker slot="datePicker" v-model="dateRange" type="month" size="mini" placeholder="选择月">
|
||||
<el-date-picker slot="datePicker" v-model="month" value-format="yyyy-MM" type="month" size="mini" placeholder="选择月">
|
||||
</el-date-picker>
|
||||
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||
</container1>
|
||||
@ -24,10 +24,16 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dateRange: [],
|
||||
|
||||
chart: null,
|
||||
month: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
month (newVal) {
|
||||
this.initChart(newVal)
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
@ -35,70 +41,86 @@ export default {
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
initChart () {
|
||||
initChart (month) {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
let params = {};
|
||||
if (month) {
|
||||
params['month'] = month
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions () {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}%'
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
data: ['绝热', '装药', '总装'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '20%',
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
width: '60%',
|
||||
min: 20,
|
||||
max: 60,
|
||||
minSize: '40%',
|
||||
maxSize: '70%',
|
||||
sort: 'descending',
|
||||
gap: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
formatter: '{b} : {c}%'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 80, name: '绝热' },
|
||||
{ value: 40, name: '装药' },
|
||||
{ value: 20, name: '总装' },
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMonthFactoryPlanPic',
|
||||
method: 'get',
|
||||
params,
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
let list = res.data;
|
||||
if (200 == res.code) {
|
||||
|
||||
]
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} : {c}%'
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
data: ['绝热', '装药', '总装'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '20%',
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
width: '60%',
|
||||
min: 20,
|
||||
max: 60,
|
||||
minSize: '40%',
|
||||
maxSize: '70%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
formatter: '{b} : {c}%'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20,
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: list.map(e => e.realInsulate).reduce((prev, next) => prev + next), name: '绝热' },
|
||||
{ value: list.map(e => e.realCharge).reduce((prev, next) => prev + next), name: '装药' },
|
||||
{ value: list.map(e => e.realAssemble).reduce((prev, next) => prev + next), name: '总装' },
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="里程牌及瓶颈短线工作计划">
|
||||
<el-select clearable slot="datePicker" v-model="value" size="mini" placeholder="请选择">
|
||||
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
|
||||
</el-select>
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
@ -11,25 +14,25 @@
|
||||
<el-col style="text-align: center" :span="4">目标完成时间</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="5">{{ item.name }}</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{ item.projectName }}</el-col>
|
||||
<el-col style="text-align: center" :span="5">{{ item.jobContent }}</el-col>
|
||||
<el-col style="text-align: center" :span="5">
|
||||
<span class="state" :class="{success: item.status == 1,
|
||||
fault: item.status == 3,
|
||||
progress: item.status == 2,
|
||||
<span class="state" :class="{success: item.progress == '已完成',
|
||||
fault: item.progress == '未完成',
|
||||
progress: item.progress == '未开始',
|
||||
}">
|
||||
<section v-if="item.status == 1">已完成</section>
|
||||
<section v-else-if="item.status == 3">未完成</section>
|
||||
<section v-if="item.progress == 1">已完成</section>
|
||||
<section v-else-if="item.progress == 3">未完成</section>
|
||||
<section v-else>未开始</section>
|
||||
</span>
|
||||
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">2021-12-12 </el-col>
|
||||
<el-col style="text-align: center" :span="4">2021-12-12 </el-col>
|
||||
<el-col style="text-align: center" :span="7">{{item.forecastCompleteTime}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.targetCompleteTime}}</el-col>
|
||||
|
||||
</el-row>
|
||||
</li>
|
||||
@ -57,42 +60,44 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectData: [],
|
||||
value: '',
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '计划一',
|
||||
level: '一级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '计划二',
|
||||
level: '二级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '计划三',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '计划四',
|
||||
level: '二级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '计划五',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
],
|
||||
scrollList: [],
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value (newVal, oldVal) {
|
||||
this.getData(newVal)
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getData (projectName) {
|
||||
let params = {};
|
||||
if (projectName) {
|
||||
params['projectName'] = projectName
|
||||
}
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getMilepostAndBottleneckPic',
|
||||
method: 'get',
|
||||
params,
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data.list;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
if (!projectName) {
|
||||
this.selectData = res.data.allProject;
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -158,4 +163,24 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-select {
|
||||
border-radius: 0;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
.el-range-input,
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-editor.is-active {
|
||||
border-color: #fff !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -16,7 +16,7 @@ require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
name: 'right1',
|
||||
components: {
|
||||
container1,
|
||||
},
|
||||
@ -32,10 +32,21 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getProductionSituationPic',
|
||||
method: 'get',
|
||||
}).then(res=>{
|
||||
if (200 == res.code) {
|
||||
console.log(res)
|
||||
let list = res.data;
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
this.setOptions(list)
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
setOptions() {
|
||||
setOptions(list) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -67,7 +78,8 @@ export default {
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
data: list.map(e=>e.month),
|
||||
// data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -101,7 +113,8 @@ export default {
|
||||
name: '绝热',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
data: [200, 300, 200, 300, 200, 300, 200],
|
||||
data: list.map(e=>e.realAdiabat),
|
||||
// data: [200, 300, 200, 300, 200, 300, 200],
|
||||
// itemStyle: {
|
||||
// color: '#53C19D',
|
||||
// },
|
||||
@ -114,7 +127,8 @@ export default {
|
||||
// itemStyle: {
|
||||
// color: '#8BB1ED',
|
||||
// },
|
||||
data: [300, 400, 300, 400, 300, 400, 300],
|
||||
data: list.map(e=>e.realAssemble),
|
||||
// data: [300, 400, 300, 400, 300, 400, 300],
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
@ -124,7 +138,8 @@ export default {
|
||||
// itemStyle: {
|
||||
// color: '#8BB1ED',
|
||||
// },
|
||||
data: [400, 500, 400, 500, 400, 500, 400],
|
||||
data: list.map(e=>e.realDeliver),
|
||||
// data: [400, 500, 400, 500, 400, 500, 400],
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
@ -134,7 +149,8 @@ export default {
|
||||
// itemStyle: {
|
||||
// color: '#8BB1ED',
|
||||
// },
|
||||
data: [500, 600, 500, 600, 500, 600, 500],
|
||||
data: list.map(e=>e.realCharge),
|
||||
// data: [500, 600, 500, 600, 500, 600, 500],
|
||||
symbol: 'none',
|
||||
},
|
||||
{
|
||||
@ -144,7 +160,8 @@ export default {
|
||||
// itemStyle: {
|
||||
// color: '#8BB1ED',
|
||||
// },
|
||||
data: [600, 700, 600, 700, 600, 700, 600],
|
||||
// data: [600, 700, 600, 700, 600, 700, 600],
|
||||
data: list.map(e=>e.realEster),
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,38 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<container1 title="里程牌及瓶颈短线工作计划">
|
||||
<container1 title="调度会">
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="3">工作内容</el-col>
|
||||
<el-col style="text-align: center" :span="4">工作内容</el-col>
|
||||
<el-col style="text-align: center" :span="5">会议名称</el-col>
|
||||
<el-col style="text-align: center" :span="5">督办领导</el-col>
|
||||
<el-col style="text-align: center" :span="7">责任单位</el-col>
|
||||
<el-col style="text-align: center" :span="4">工作进展</el-col>
|
||||
<el-col style="text-align: center" :span="3">工作进展</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="3">全面落..</el-col>
|
||||
<el-col style="text-align: center" :span="5">管理大会</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.jobContent}}</el-col>
|
||||
<el-col style="text-align: center" :span="5">{{item.meetingName}}</el-col>
|
||||
<el-col style="text-align: center" :span="5">
|
||||
寇婉珊
|
||||
{{item.checkLeader}}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">xxx单位</el-col>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<span class="state" :class="{success: item.status == 1,
|
||||
fault: item.status == 3,
|
||||
progress: item.status == 2,
|
||||
<el-col style="text-align: center" :span="7">{{item.responsibleUnit}}</el-col>
|
||||
<el-col style="text-align: center" :span="3">
|
||||
<span class="state" :class="{success: item.workProgress == '已完成',
|
||||
fault: item.workProgress == '未完成',
|
||||
progress: item.workProgress == '未开始',
|
||||
}">
|
||||
<section v-if="item.status == 1">已完成</section>
|
||||
<section v-else-if="item.status == 3">未完成</section>
|
||||
<section v-else>未开始</section>
|
||||
<section>{{item.workProgress|| '未开始'}}</section>
|
||||
</span>
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -61,40 +57,28 @@ export default {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '计划一',
|
||||
level: '一级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '计划二',
|
||||
level: '二级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '计划三',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '计划四',
|
||||
level: '二级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '计划五',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getDispatchMeetingPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -4,23 +4,23 @@
|
||||
<div class="left3-content">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="3">班组名称</el-col>
|
||||
<el-col style="text-align: center" :span="5">人员数量</el-col>
|
||||
<el-col style="text-align: center" :span="5">班次数</el-col>
|
||||
<el-col style="text-align: center" :span="7">到岗人数</el-col>
|
||||
<el-col style="text-align: center" :span="4">到岗人员</el-col>
|
||||
<el-col style="text-align: center" :span="4">班组名称</el-col>
|
||||
<el-col style="text-align: center" :span="4">人员数量</el-col>
|
||||
<el-col style="text-align: center" :span="4">班次数</el-col>
|
||||
<el-col style="text-align: center" :span="4">到岗人数</el-col>
|
||||
<el-col style="text-align: center" :span="8">到岗人员</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{singleHeight: 42,}">
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="3">三组</el-col>
|
||||
<el-col style="text-align: center" :span="5">66人</el-col>
|
||||
<el-col style="text-align: center" :span="5">3
|
||||
<el-col style="text-align: center" :span="4">{{item.teamName}}</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.peopleTotal}}人</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.shift}}
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">64人</el-col>
|
||||
<el-col style="text-align: center" :span="4">戚强 林若</el-col>
|
||||
<el-col style="text-align: center" :span="4">{{item.realWorkerTotal}}人</el-col>
|
||||
<el-col style="text-align: center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :span="8" :title="item.peopleList">{{item.peopleList}}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -48,41 +48,28 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '计划一',
|
||||
level: '一级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '计划二',
|
||||
level: '二级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '计划三',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '计划四',
|
||||
level: '二级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '计划五',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
],
|
||||
scrollList: [],
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/scientificProduction/getTeamAttendancePic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList = res.data;
|
||||
this.listData = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user