1
This commit is contained in:
hh
@ -5,9 +5,9 @@
|
|||||||
<div @click="index = 1" :class="{active: index == 1}">生产管理</div>
|
<div @click="index = 1" :class="{active: index == 1}">生产管理</div>
|
||||||
<div @click="index = 2" :class="{active: index == 2}">项目管理</div>
|
<div @click="index = 2" :class="{active: index == 2}">项目管理</div>
|
||||||
</div>
|
</div>
|
||||||
<tab1 class="tabWrap" v-show="index == 0"></tab1>
|
<tab1 class="tabWrap" v-if="index == 0"></tab1>
|
||||||
<tab2 class="tabWrap" v-show="index == 1"></tab2>
|
<tab2 class="tabWrap" v-if="index == 1"></tab2>
|
||||||
<tab3 class="tabWrap" v-show="index == 2"></tab3>
|
<tab3 class="tabWrap" v-if="index == 2"></tab3>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
BIN
src/views/bigScreen/scientific/tab2/components/container1/bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab2/components/container1/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,104 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container1">
|
||||||
|
<div class="tit">
|
||||||
|
<rocketTit>{{title}}</rocketTit>
|
||||||
|
<div class="datePicker">
|
||||||
|
<slot name="datePicker"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="snap">
|
||||||
|
<slot name="snap"></slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import rocketTit from "../../../../components/rocketTit/index.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'container1',
|
||||||
|
components: {
|
||||||
|
rocketTit,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container1 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 614px;
|
||||||
|
height: 300px;
|
||||||
|
background-image: url(./bg.png);
|
||||||
|
background-size: cover;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
padding: 16px 16px 16px 24px;
|
||||||
|
position: relative;
|
||||||
|
.datePicker {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 12px;
|
||||||
|
|
||||||
|
::v-deep .el-date-editor {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
.snap {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 25px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,14 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="tab2">
|
<div class="tab2">
|
||||||
tab2
|
<div class="left1">
|
||||||
|
<left1></left1>
|
||||||
|
</div>
|
||||||
|
<div class="left2">
|
||||||
|
<left2></left2>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import left1 from './left1.vue'
|
||||||
|
import left2 from './left2.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'tab2',
|
name: 'tab2',
|
||||||
components: {
|
components: {
|
||||||
|
left1,
|
||||||
|
left2,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
title: {
|
title: {
|
||||||
@ -27,3 +35,15 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.left1 {
|
||||||
|
position: absolute;
|
||||||
|
top: 142px;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
.left2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 456px;
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
178
src/views/bigScreen/scientific/tab2/left1.vue
Normal file
178
src/views/bigScreen/scientific/tab2/left1.vue
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
<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>
|
||||||
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||||
|
</container1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import container1 from "./components/container1/index.vue";
|
||||||
|
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../../dashboard/mixins/resize'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'left1',
|
||||||
|
components: {
|
||||||
|
container1,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
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)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
107
src/views/bigScreen/scientific/tab2/left2.vue
Normal file
107
src/views/bigScreen/scientific/tab2/left2.vue
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<container1 title="工厂计划">
|
||||||
|
<el-date-picker slot="datePicker" v-model="dateRange" type="month" size="mini" placeholder="选择月">
|
||||||
|
</el-date-picker>
|
||||||
|
<div style="height:100%;width:100%;" ref="chart"></div>
|
||||||
|
</container1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import container1 from "./components/container1/index.vue";
|
||||||
|
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '../../../dashboard/mixins/resize'
|
||||||
|
import colorList from '@/utils/colorPalette'
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
name: 'left2',
|
||||||
|
components: {
|
||||||
|
container1,
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
dateRange: [],
|
||||||
|
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: '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: '总装' },
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user