williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2

Browse Source
This commit is contained in:
hh
2021-12-14 13:10:52 +08:00
parent f618618633
commit e8c78ce65d
5 changed files with 668 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/views/bigScreen/scientific/tab2/center3.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div>
<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="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-row>
</el-col>
<vue-seamless-scroll :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>
<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-row>
</li>
</ul>
</vue-seamless-scroll>
</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 vueSeamlessScroll from 'vue-seamless-scroll'
export default {
mixins: [resize],
name: 'left2',
components: {
container1,
vueSeamlessScroll,
},
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,
},
],
}
},
}
</script>
<style lang="scss" scoped>
.left3-content {
padding: 0 10px 0 20px;
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;
}
}
.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;
}
}
}
}
</style>

40
src/views/bigScreen/scientific/tab2/index.vue
View File

@ -6,17 +6,37 @@
<div class="left2">
<left2></left2>
</div>
<div class="left3">
<left3></left3>
</div>
<div class="center3">
<center3></center3>
</div>
<div class="right2">
<right2></right2>
</div>
<div class="right3">
<right3></right3>
</div>
</div>
</template>
<script>
import left1 from './left1.vue'
import left2 from './left2.vue'
import left3 from './left3.vue'
import center3 from './center3.vue'
import right2 from './right2.vue'
import right3 from './right3.vue'
export default {
name: 'tab2',
components: {
left1,
left2,
left3,
center3,
right2,
right3,
},
props: {
title: {
@ -46,4 +66,24 @@ export default {
top: 456px;
left: 24px;
}
.left3 {
position: absolute;
top: 770px;
left: 24px;
}
.center3 {
position: absolute;
top: 770px;
left: 653px;
}
.right2 {
position: absolute;
top: 456px;
left: 1282px;
}
.right3 {
position: absolute;
top: 770px;
left: 1282px;
}
</style>

161
src/views/bigScreen/scientific/tab2/left3.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div>
<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="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-row>
</el-col>
<vue-seamless-scroll :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="5">
<span class="state" :class="{success: item.status == 1,
fault: item.status == 3,
progress: item.status == 2,
}">
<section v-if="item.status == 1">已完成</section>
<section v-else-if="item.status == 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-row>
</li>
</ul>
</vue-seamless-scroll>
</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 vueSeamlessScroll from 'vue-seamless-scroll'
export default {
mixins: [resize],
name: 'left2',
components: {
container1,
vueSeamlessScroll,
},
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,
},
],
}
},
}
</script>
<style lang="scss" scoped>
.left3-content {
padding: 0 10px 0 20px;
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;
}
}
.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;
}
}
}
}
</style>

163
src/views/bigScreen/scientific/tab2/right2.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<div>
<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="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-row>
</el-col>
<vue-seamless-scroll :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="5">
寇婉珊
</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,
}">
<section v-if="item.status == 1">已完成</section>
<section v-else-if="item.status == 3">未完成</section>
<section v-else>未开始</section>
</span>
</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</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 vueSeamlessScroll from 'vue-seamless-scroll'
export default {
mixins: [resize],
name: 'left2',
components: {
container1,
vueSeamlessScroll,
},
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,
},
],
}
},
}
</script>
<style lang="scss" scoped>
.left3-content {
padding: 0 10px 0 20px;
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;
}
}
.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;
}
}
}
}
</style>

151
src/views/bigScreen/scientific/tab2/right3.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div>
<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="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-row>
</el-col>
<vue-seamless-scroll :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>
<el-col style="text-align: center" :span="7">64人</el-col>
<el-col style="text-align: center" :span="4">戚强 林若</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</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 vueSeamlessScroll from 'vue-seamless-scroll'
export default {
mixins: [resize],
name: 'left2',
components: {
container1,
vueSeamlessScroll,
},
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,
},
],
}
},
}
</script>
<style lang="scss" scoped>
.left3-content {
padding: 0 10px 0 20px;
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;
}
}
.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;
}
}
}
}
</style>