Compare commits
3 Commits
192f1b0e75
...
f618618633
| Author | SHA1 | Date | |
|---|---|---|---|
| f618618633 | |||
| 793556fb12 | |||
| 53ae783bf9 |
@ -5,9 +5,9 @@
|
||||
<div @click="index = 1" :class="{active: index == 1}">生产管理</div>
|
||||
<div @click="index = 2" :class="{active: index == 2}">项目管理</div>
|
||||
</div>
|
||||
<tab1 class="tabWrap" v-show="index == 0"></tab1>
|
||||
<tab2 class="tabWrap" v-show="index == 1"></tab2>
|
||||
<tab3 class="tabWrap" v-show="index == 2"></tab3>
|
||||
<tab1 class="tabWrap" v-if="index == 0"></tab1>
|
||||
<tab2 class="tabWrap" v-if="index == 1"></tab2>
|
||||
<tab3 class="tabWrap" v-if="index == 2"></tab3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
BIN
src/views/bigScreen/scientific/tab1/center-bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/center-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
14
src/views/bigScreen/scientific/tab1/center1.vue
Normal file
14
src/views/bigScreen/scientific/tab1/center1.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<container3 title="全厂工房作业信息" :width="768" :height="975">
|
||||
<div><img style="width:100%;height:100%" src="./center-bg.png" alt="" srcset=""></div>
|
||||
</container3>
|
||||
</template>
|
||||
<script>
|
||||
import container3 from './components/container3/index.vue'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
components: {
|
||||
container3,//#endregion,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,148 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="container3" :style="{width:width+ 'px',height:height+ 'px'}">
|
||||
<div class="tit">
|
||||
<rocketTit>{{title}}</rocketTit>
|
||||
<div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot />
|
||||
<div class="spot spot1"></div>
|
||||
<div class="spot spot2"></div>
|
||||
<div class="spot spot3"></div>
|
||||
<div class="spot spot4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from "../../../../components/rocketTit/index.vue";
|
||||
|
||||
export default {
|
||||
name: 'container3',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 535
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 914
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 537px;
|
||||
height: 307px;
|
||||
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;
|
||||
position: relative;
|
||||
border-top: 1px solid #91d5fe;
|
||||
border-bottom: 1px solid #91d5fe;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 0px;
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
opacity: 0.4;
|
||||
background: #91D5FE;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 0px;
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
opacity: 0.4;
|
||||
background: #91D5FE;
|
||||
}
|
||||
|
||||
.spot {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #91d5fe;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.spot1 {
|
||||
top: -3px;
|
||||
left: 0;
|
||||
}
|
||||
.spot2 {
|
||||
top: -3px;
|
||||
right: 0;
|
||||
}
|
||||
.spot3 {
|
||||
bottom: -3px;
|
||||
left: 0;
|
||||
}
|
||||
.spot4 {
|
||||
bottom: -3px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/scientific/tab1/img/sub/sub1.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/sub/sub1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 B |
BIN
src/views/bigScreen/scientific/tab1/img/sub/sub2.png
Normal file
BIN
src/views/bigScreen/scientific/tab1/img/sub/sub2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
@ -6,17 +6,30 @@
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import left1 from './left1.vue'
|
||||
import left2 from './left2.vue'
|
||||
import center1 from './center1.vue'
|
||||
import right1 from './right1.vue'
|
||||
export default {
|
||||
name: 'tab1',
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
center1,
|
||||
right1,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -31,4 +44,14 @@ export default {
|
||||
top: 755px;
|
||||
left: 24px;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
left: 576px;
|
||||
}
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
left: 1361px;
|
||||
}
|
||||
</style>
|
||||
311
src/views/bigScreen/scientific/tab1/right1.vue
Normal file
311
src/views/bigScreen/scientific/tab1/right1.vue
Normal file
@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<container3 title="全厂作业明细" :width="535" :height="975">
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
|
||||
singleHeight: 84
|
||||
}">
|
||||
<ul>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房一</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level1">一级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item active">
|
||||
<div class="item-tit">工房二</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间二</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间二</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level2">二级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房三</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间三</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level3">三级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房三</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间三</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level3">三级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item">
|
||||
<div class="item-tit">工房三</div>
|
||||
<div class="item-content">
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间三</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">工序:</span><span class="text-val">车工</span></el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12"><span class="text-tit">车间:</span><span class="text-val">车间一</span></el-col>
|
||||
<el-col :span="12"><span class="text-tit">危险级别:</span><span class="text-val level3">三级</span></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
<div class="sub">
|
||||
<div class="sub-left">
|
||||
<div class="sub-tit"><img src="./img/sub/sub1.png" alt="">装药当前作业内容</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">编 号：</div>
|
||||
<div class="sub-item-val">12345</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">称 量：</div>
|
||||
<div class="sub-item-val">第一锅</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">混 合：</div>
|
||||
<div class="sub-item-val">第一锅</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">浇 注：</div>
|
||||
<div class="sub-item-val">第一锅</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">总体推迟时间：</div>
|
||||
<div class="sub-item-val">1972-02-04</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">倒班车：</div>
|
||||
<div class="sub-item-val">正在XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-right">
|
||||
<div class="sub-tit"><img src="./img/sub/sub2.png" alt="">酯生产量</div>
|
||||
<div class="sub-content">
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">XX年XX轮XX生产</div>
|
||||
<div class="sub-item-val">12345</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">开车时间：</div>
|
||||
<div class="sub-item-val">2005-12-12</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">预计结束时间：</div>
|
||||
<div class="sub-item-val">2025-12-12</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">酯生产量：</div>
|
||||
<div class="sub-item-val">XX吨</div>
|
||||
</div>
|
||||
<div class="sub-item">
|
||||
<div class="sub-item-tit">粘合剂干燥量：</div>
|
||||
<div class="sub-item-val">XXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</template>
|
||||
<script>
|
||||
import container3 from './components/container3/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
export default {
|
||||
components: {
|
||||
container3,//#endregion,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp {
|
||||
height: 416px;
|
||||
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: 40px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
margin: 0 0 4px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(0, 255, 255, 0.75);
|
||||
background: #0a1047;
|
||||
height: 80px;
|
||||
&.active {
|
||||
box-shadow: inset 0px 0px 20px 0px #ffd082;
|
||||
}
|
||||
.item-tit {
|
||||
text-align: center;
|
||||
width: 124px;
|
||||
height: 80px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #00ffff;
|
||||
line-height: 80px;
|
||||
background: rgba(0, 255, 255, 0.14);
|
||||
}
|
||||
&.active .item-tit {
|
||||
color: #ffd082;
|
||||
background: rgba(255, 208, 130, 0.14);
|
||||
}
|
||||
.item-content {
|
||||
flex: 1;
|
||||
line-height: 30px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
.text-tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #00ffff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.text-val {
|
||||
font-size: 14px;
|
||||
font-family: PingFang-SC-Regular, PingFang-SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
&.active .text-tit {
|
||||
color: #ffd082;
|
||||
}
|
||||
|
||||
.level1 {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #f64f58;
|
||||
font-size: 14px;
|
||||
color: #f64f58;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fa8c16;
|
||||
font-size: 14px;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
.level2 {
|
||||
display: inline-block;
|
||||
|
||||
border-radius: 2px;
|
||||
border: 1px solid #91d5fe;
|
||||
font-size: 14px;
|
||||
color: #91d5fe;
|
||||
line-height: 1;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub {
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
& > div {
|
||||
width: 260px;
|
||||
height: 472px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sub-left {
|
||||
float: left;
|
||||
}
|
||||
.sub-right {
|
||||
float: right;
|
||||
}
|
||||
.sub-tit {
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(10, 16, 75, 0) 0%,
|
||||
rgba(8, 56, 105, 0.11) 33%,
|
||||
rgba(6, 116, 151, 0.91) 75%,
|
||||
#00ffff 100%
|
||||
);
|
||||
}
|
||||
.sub-content {
|
||||
flex: 1;
|
||||
box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
background-color: rgba(139, 177, 237, 0.15);
|
||||
}
|
||||
.sub-item {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
padding: 0 32px;
|
||||
margin: 16px 0;
|
||||
.sub-item-tit {
|
||||
color: #00ffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
<div class="tab2">
|
||||
tab2
|
||||
<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: 'tab2',
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
@ -27,3 +35,15 @@ export default {
|
||||
},
|
||||
}
|
||||
</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