科研生产tab

This commit is contained in:
hh
2021-12-13 20:14:13 +08:00
parent 2ce73c46d9
commit 979e6d6601
15 changed files with 640 additions and 17 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

@ -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: 537px;
height: 597px;
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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -0,0 +1,104 @@
<template>
<div class="container2">
<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: 'container2',
components: {
rocketTit,
},
props: {
title: {
type: String,
default: '',
},
selected: {
type: Boolean,
default: false,
},
},
data () {
return {
}
},
}
</script>
<style lang="scss" scoped>
.container2 {
display: flex;
flex-direction: column;
width: 537px;
height: 307px;
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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 640 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 525 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 863 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 904 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,29 +1,34 @@
<template>
<div class="tab1">
tab1
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
</div>
</template>
<script>
import left1 from './left1.vue'
import left2 from './left2.vue'
export default {
name: 'tab1',
components: {
},
props: {
title: {
type: String,
default: '',
},
selected: {
type: Boolean,
default: false,
},
},
data () {
return {
}
left1,
left2,
},
}
</script>
<style lang="scss" scoped>
.left1 {
position: absolute;
top: 142px;
left: 24px;
}
.left2 {
position: absolute;
top: 755px;
left: 24px;
}
</style>

View File

@ -0,0 +1,285 @@
<template>
<container1 title="全厂资源动态">
<div class="trends">
<el-row>
<el-col :span="12">
<div class="trends-item">
<div class="trends-item-icon">
<img src="./img/trends-item-icon1.png" alt="">
</div>
<div class="trends-item-content">
<div class="tit">作业工房/总数</div>
<div class="value">46/<span class="small">60</span></div>
<div class="progressBar">
<progressBar :percentage="70" />
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="trends-item">
<div class="trends-item-icon">
<img src="./img/trends-item-icon2.png" alt="">
</div>
<div class="trends-item-content">
<div class="tit">人员数量/出勤率</div>
<div class="value">754/<span class="small">89%</span></div>
<div class="progressBar">
<progressBar :percentage="89" />
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<div style="height:27px"></div>
</el-col>
<el-col :span="12">
<div class="trends-item">
<div class="trends-item-icon">
<img src="./img/trends-item-icon3.png" alt="">
</div>
<div class="trends-item-content">
<div class="tit">设备运行数量/运行率</div>
<div class="value">324/<span class="small">72%</span></div>
<div class="progressBar">
<progressBar :percentage="72" />
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="trends-item">
<div class="trends-item-icon">
<img src="./img/trends-item-icon2.png" alt="">
</div>
<div class="trends-item-content">
<div class="tit">人员数量/出勤率</div>
<div class="value">77%</div>
<div class="progressBar">
<progressBar :percentage="77" />
</div>
</div>
</div>
</el-col>
</el-row>
<div style="height:45px"></div>
<div class="car">
<div class="car-tit">
<div class="left">被使用车辆总数</div>
<div class="right">89<span></span></div>
</div>
<div style="margin: 5px 0 10px 0;">
<progressBar :percentage="30" :strokeWidth="12" />
</div>
<div class="describe">
<div class="left">总车辆数100</div>
<div class="right">使用率89%</div>
</div>
</div>
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
singleHeight: 48
}">
<ul class="item">
<li>
<el-row>
<el-col :span="10"><img src="./img/1.png">车辆一</el-col>
<el-col :span="6">
<div class="state success">使用中</div>
</el-col>
<el-col :span="8" style="text-align:right"><img src="./img/2.png">A车库</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/1.png">车辆二</el-col>
<el-col :span="6">
<div class="state success">闲置</div>
</el-col>
<el-col :span="8" style="text-align:right"><img src="./img/2.png">A车库</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/1.png">车辆三</el-col>
<el-col :span="6">
<div class="state fault">故障</div>
</el-col>
<el-col :span="8" style="text-align:right"><img src="./img/2.png">A车库</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</div>
</container1>
</template>
<script>
import container1 from './components/container1/index.vue'
import progressBar from '@/views/bigScreen/components/progress/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
container1,//#endregion,
progressBar,
vueSeamlessScroll,
},
data () {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
}
}
}
</script>
<style lang="scss" scoped>
.trends {
padding: 0 25px;
}
.trends-item {
width: 100%;
box-sizing: border-box;
display: flex;
}
.trends-item-icon {
width: 50px;
height: 111px;
background-image: url(./img/trends-item-bg.png);
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
display: flex;
align-items: center;
img {
height: 32px;
}
}
.trends-item-content {
margin-left: 15px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-betweens;
.progressBar {
height: 20px;
width: 100px;
}
.value {
flex: 1;
}
.tit {
padding: 0 10px;
height: 32px;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 32px;
background-image: url(./img/tit-bg.png);
background-size: 140px 32px;
background-repeat: no-repeat;
}
.value {
font-size: 36px;
font-family: Roboto-Medium, Roboto;
font-weight: 500;
color: #55c5a2;
.small {
font-size: 28px;
}
}
}
.car {
font-weight: 500;
color: #ffffff;
.left {
float: left;
}
.right {
float: right;
}
.car-tit {
.right {
font-size: 25px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #1fe7e5;
span {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f4f4f4;
}
}
}
.describe {
font-size: 15px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
}
div {
overflow: hidden;
}
}
.warp {
height: 128px;
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: 32px;
line-height: 32px;
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
padding-left: 20px;
margin: 0 0 16px 0;
img {
vertical-align: sub;
margin-right: 5px;
}
}
.state {
position: relative;
&::before {
content: "";
display: block;
position: absolute;
left: -16px;
top: 12px;
width: 8px;
height: 8px;
background: #a9b8c5;
border-radius: 50%;
}
&.success::before {
background: #1890ff;
}
&.fault::before {
background: #f75f53;
}
&.free::before {
background: #a9b8c5;
}
}
}
}
</style>

View File

@ -0,0 +1,125 @@
<template>
<container2 title="本周计划">
<div style="height: 100%; width: 100%" ref="chart"></div>
</container2>
</template>
<script>
import container2 from './components/container2/index.vue'
import echarts from 'echarts'
export default {
components: {
container2,//#endregion,
},
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',
// formatter: '{a1}<br/>{b1}{c1}',
},
// legend: {
// data: ['数量', '完成率'],
// textStyle: {
// color: '#fff', //legend字体颜色
// },
// // selectedMode: false,
// },
grid: {
containLabel: true,
left: 20,
right: 10,
top: 10,
bottom: 10,
},
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)',
},
},
},
series: [
{
name: '完成率',
type: 'bar',
z: '-1',
barGap: '-100%',
barWidth: 30,
itemStyle: {
color: 'rgba(126, 167, 252, .3)',
},
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
},
{
name: '数量',
type: 'bar',
barWidth: 30,
// position: [0, 0],
itemStyle: {
color: '#7EA7FC',
},
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
},
// {
// name: '目标',
// type: 'scatter',
// symbol: 'rect',
// symbolSize: [30, 4],
// symbolOffset: [3, 0],
// position: [0, 0],
// itemStyle: {
// color: '#F6D97E',
// },
// data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
// },
],
})
},
}
}
</script>