160 lines
3.9 KiB
Vue
160 lines
3.9 KiB
Vue
<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="4">班组名称</el-col>
|
|
<el-col style="text-align: center" :span="4">人员数量</el-col>
|
|
<el-col style="text-align: center" :span="4">班次数</el-col>
|
|
<el-col style="text-align: center" :span="4">到岗人数</el-col>
|
|
<el-col style="text-align: center" :span="8">到岗人员</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<vue-seamless-scroll
|
|
ref="seamlessScroll"
|
|
:data="listData"
|
|
class="warp-scroll"
|
|
: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="4">{{
|
|
item.teamName
|
|
}}</el-col>
|
|
<el-col style="text-align: center" :span="4"
|
|
>{{ item.peopleTotal }}人</el-col
|
|
>
|
|
<el-col style="text-align: center" :span="4"
|
|
>{{ item.shift }}
|
|
</el-col>
|
|
<el-col style="text-align: center" :span="4"
|
|
>{{ item.realWorkerTotal }}人</el-col
|
|
>
|
|
<el-col
|
|
style="text-align: center"
|
|
:span="8"
|
|
:title="item.peopleList"
|
|
>{{ item.peopleList }}</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: [],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.getData();
|
|
});
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.request({
|
|
url: "/hx/scientificProduction/getTeamAttendancePic",
|
|
method: "get",
|
|
}).then((res) => {
|
|
if (200 == res.code) {
|
|
this.scrollList = res.data;
|
|
this.listData = Array(this.scrollList.length).fill(0);
|
|
this.$refs.seamlessScroll.reset();
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.left3-content {
|
|
padding: 0 10px 0 20px;
|
|
|
|
font-size: 14px;
|
|
}
|
|
.warp-scroll {
|
|
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> |