科研生产tab
This commit is contained in:
hh
BIN
src/views/bigScreen/scientific/tab1/components/container1/bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/components/container1/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 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: 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>
|
||||
BIN
src/views/bigScreen/scientific/tab1/components/container2/bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/components/container2/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@ -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>
|
||||
BIN
src/views/bigScreen/scientific/tab1/img/1.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 B |
BIN
src/views/bigScreen/scientific/tab1/img/2.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 525 B |
BIN
src/views/bigScreen/scientific/tab1/img/tit-bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/tit-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon1.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 576 B |
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon2.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon3.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 904 B |
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon4.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/trends-item-icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -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>
|
||||
285
src/views/bigScreen/scientific/tab1/left1.vue
Normal file
285
src/views/bigScreen/scientific/tab1/left1.vue
Normal 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>
|
||||
125
src/views/bigScreen/scientific/tab1/left2.vue
Normal file
125
src/views/bigScreen/scientific/tab1/left2.vue
Normal 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>
|
||||
Reference in New Issue
Block a user