中建四局大屏（安全管理）页面更改
This commit is contained in:
yjl
parent
eac2a55ee5
commit
f6b81e6114
@ -26,7 +26,7 @@ export default {
|
|||||||
height: 34px;
|
height: 34px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-image: url('../assets/images/common/bg-card.png');
|
background-image: url('../assets/images/common/bg-card.png');
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
|||||||
@ -1,79 +1,118 @@
|
|||||||
<template>
|
<template>
|
||||||
<Card title="人员管理">
|
<Card title="安全教育">
|
||||||
<div class="containerBox">
|
<div class="containerBox">
|
||||||
<div class="topbox">
|
<div class="centerLeft">
|
||||||
<div class="item">
|
<div class="text">入场<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">三级</span>交底</div>
|
||||||
<span>总人数</span>
|
|
||||||
<p>{{ WorkerNum.sumNumber }}</p>
|
<div class="textDivBox">
|
||||||
</div>
|
<div class="textDiv">
|
||||||
<div class="item">
|
<span>67</span>
|
||||||
<span>实际出勤人数</span>
|
<p>项目总人数</p>
|
||||||
<p>{{ WorkerNum.attendanceNumber }}</p>
|
</div>
|
||||||
</div>
|
<div class="textDiv">
|
||||||
<div class="item">
|
<span>51</span>
|
||||||
<span>未出勤人数</span>
|
<p>项目培训人数</p>
|
||||||
<p>{{ WorkerNum.noAttendanceNumber }}</p>
|
</div>
|
||||||
</div>
|
<div class="textDiv">
|
||||||
<div class="item">
|
<span>46.79%</span>
|
||||||
<span>实名制人数</span>
|
<p>项目培训率</p>
|
||||||
<p>{{ WorkerNum.realNameNumber }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="item margin">
|
|
||||||
<span>入职培训人数</span>
|
|
||||||
<p>{{ WorkerNum.inductionTrainingNumber }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="item margin">
|
|
||||||
<span>特殊工种人数</span>
|
|
||||||
<p>{{ WorkerNum.specialNumber }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="item margin">
|
|
||||||
<span>普通工种人数</span>
|
|
||||||
<p>{{ WorkerNum.commonNumber }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="item margin">
|
|
||||||
<span>管理人员人数</span>
|
|
||||||
<p>{{ WorkerNum.managerNumber }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bunbox">
|
|
||||||
<div class="left">
|
|
||||||
<span>员工申报年龄段</span>
|
|
||||||
<el-date-picker
|
|
||||||
v-model="time1"
|
|
||||||
type="daterange"
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
@change="getTime1"
|
|
||||||
></el-date-picker>
|
|
||||||
<JBarChart
|
|
||||||
:tooltip="{}"
|
|
||||||
:xData="xData"
|
|
||||||
:series="series"
|
|
||||||
:grid="grid"
|
|
||||||
v-if="series[0].data.length != 0"
|
|
||||||
/>
|
|
||||||
<div class="nodata" v-else>
|
|
||||||
<img src="@/assets/images/noData3.png" alt srcset />
|
|
||||||
<p>暂无数据</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
|
||||||
<span>人员增长趋势</span>
|
<div class="tableDiv">
|
||||||
<el-date-picker
|
<div class="tableSon">
|
||||||
v-model="time2"
|
<div class="row">培训主题</div>
|
||||||
type="daterange"
|
<div class="row">培训人</div>
|
||||||
range-separator="-"
|
<div class="row">培训课时(h)</div>
|
||||||
start-placeholder="开始日期"
|
<div class="row">培训时间</div>
|
||||||
end-placeholder="结束日期"
|
</div>
|
||||||
value-format="yyyy-MM-dd"
|
<div class="tbody">
|
||||||
@change="getTime2"
|
<vue-scroll>
|
||||||
></el-date-picker>
|
<div class="row" v-for="i in 20" :key="i">
|
||||||
<div v-if="xdata2.length != 0" class="rightChart" ref="rightChart"></div>
|
<div class="td">每日安全交底</div>
|
||||||
<div class="nodata" v-else>
|
<div class="td">缪维彪</div>
|
||||||
<img src="@/assets/images/noData3.png" alt srcset />
|
<div class="td">45</div>
|
||||||
<p>暂无数据</p>
|
<div class="td">2022-09-28</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="centerC">
|
||||||
|
<div class="text">每日<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">班前</span>喊话</div>
|
||||||
|
|
||||||
|
<div class="textDivBox">
|
||||||
|
<div class="textDiv">
|
||||||
|
<span>3次</span>
|
||||||
|
<p>今日班前喊话次数</p>
|
||||||
|
</div>
|
||||||
|
<div class="textDiv">
|
||||||
|
<span>12</span>
|
||||||
|
<p>班前喊话次数</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tableDiv">
|
||||||
|
<div class="tableSon">
|
||||||
|
<div class="row">时间</div>
|
||||||
|
<div class="row">负责人</div>
|
||||||
|
<div class="row">班组</div>
|
||||||
|
<div class="row">照片</div>
|
||||||
|
</div>
|
||||||
|
<div class="tbody">
|
||||||
|
<vue-scroll>
|
||||||
|
<div class="row" v-for="i in 20" :key="i">
|
||||||
|
<div class="td">2022-09-28</div>
|
||||||
|
<div class="td">缪维彪</div>
|
||||||
|
<div class="td">钢筋班组</div>
|
||||||
|
<div class="td"><img :src="src" /></div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="centerRight">
|
||||||
|
<div class="text">
|
||||||
|
<!-- <div class="text">每日<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">班前</span>喊话</div> -->
|
||||||
|
|
||||||
|
安<span style="width:100px;height:100px;border-bottom:1px solid #F56C35;padding:0 0 5px 0">全交</span>底
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="textDivBox">
|
||||||
|
<div class="textDiv">
|
||||||
|
<span>67次</span>
|
||||||
|
<p>培训次数</p>
|
||||||
|
</div>
|
||||||
|
<div class="textDiv">
|
||||||
|
<span>23次</span>
|
||||||
|
<p>特种作业</p>
|
||||||
|
</div>
|
||||||
|
<div class="textDiv">
|
||||||
|
<span>11次</span>
|
||||||
|
<p>雨季交底</p>
|
||||||
|
</div>
|
||||||
|
<div class="textDiv">
|
||||||
|
<span>26次</span>
|
||||||
|
<p>用电交底</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tableDiv">
|
||||||
|
<div class="tableSon">
|
||||||
|
<div class="row">交底主题</div>
|
||||||
|
<div class="row">类型</div>
|
||||||
|
<div class="row">负责人</div>
|
||||||
|
<div class="row">交底时间</div>
|
||||||
|
</div>
|
||||||
|
<div class="tbody">
|
||||||
|
<vue-scroll>
|
||||||
|
<div class="row" v-for="i in 20" :key="i">
|
||||||
|
<div class="td">每日安全交底</div>
|
||||||
|
<div class="td">钢筋交底</div>
|
||||||
|
<div class="td">缪维彪</div>
|
||||||
|
<div class="td">2022-09-28</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -82,184 +121,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Card from "../components/Card.vue";
|
import Card from '../components/Card.vue'
|
||||||
import JBarChart from "../../common/jChart/bar/JBarChart.vue";
|
|
||||||
import {
|
|
||||||
getWorkerNumApi,
|
|
||||||
getWorkerGrowthApi,
|
|
||||||
getDeclareAgeApi
|
|
||||||
} from "@/assets/js/api/zhongjianFourth";
|
|
||||||
import echarts from "echarts4";
|
|
||||||
export default {
|
export default {
|
||||||
components: { Card, JBarChart },
|
components: {
|
||||||
|
Card
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
WorkerNum: {},
|
src: require('../assets/images/common/bg_redCar.png')
|
||||||
time1:["2022-08-19","2022-09-19"],
|
}
|
||||||
time2: ["2022-08-19","2022-09-19"],
|
}
|
||||||
xData: ["18-24", "25-34", "34-49", "50-55", "未登记"],
|
}
|
||||||
grid: ["10%", "2%", "18%", "10%"],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// "2200", "4000", "8000", "3000", "8000"
|
|
||||||
data: [],
|
|
||||||
itemStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{ offset: 0, color: "#DE5F2A" },
|
|
||||||
{ offset: 1, color: "#DE5F2A24" },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
xdata2: [],
|
|
||||||
ydata2: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created(){
|
|
||||||
this.time1 = this.getDefaultTime();
|
|
||||||
this.time2 = this.getDefaultTime();
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getData();
|
|
||||||
this.getAgeData();
|
|
||||||
this.getYearData();
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
time1: {
|
|
||||||
handler(oldVal, newVal) {
|
|
||||||
if (oldVal != newVal) {
|
|
||||||
this.getAgeData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate:true,
|
|
||||||
},
|
|
||||||
time2: {
|
|
||||||
handler(oldVal, newVal) {
|
|
||||||
if (oldVal != newVal) {
|
|
||||||
this.getYearData();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate:true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getDefaultTime () {
|
|
||||||
const start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)
|
|
||||||
.toISOString()
|
|
||||||
.replace('T', ' ')
|
|
||||||
.split('.')[0].split(' ')[0] //默认开始时间30天前
|
|
||||||
const end = new Date(new Date().getTime())
|
|
||||||
.toISOString()
|
|
||||||
.replace('T', ' ')
|
|
||||||
.split('.')[0].split(' ')[0]//默认结束时间当天日期
|
|
||||||
return [start, end]
|
|
||||||
},
|
|
||||||
getData() {
|
|
||||||
getWorkerNumApi({ projectSn: this.$store.state.projectSn }).then(
|
|
||||||
(res) => {
|
|
||||||
this.WorkerNum = res.result;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
getTime1(val) {
|
|
||||||
this.time1 = val;
|
|
||||||
},
|
|
||||||
getTime2(val) {
|
|
||||||
this.time2 = val;
|
|
||||||
},
|
|
||||||
getAgeData(){
|
|
||||||
let data = {}
|
|
||||||
data.projectSn = this.$store.state.projectSn;
|
|
||||||
if (this.time1 != null) {
|
|
||||||
data.startDate = this.time1[0];
|
|
||||||
data.endDate = this.time1[1];
|
|
||||||
getDeclareAgeApi(data).then((res)=>{
|
|
||||||
if(JSON.stringify(res.result) != "{}"){
|
|
||||||
this.series[0].data = Object.values(res.result)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getYearData() {
|
|
||||||
let data = {};
|
|
||||||
data.projectSn = this.$store.state.projectSn;
|
|
||||||
if (this.time2 != null) {
|
|
||||||
data.startDate = this.time2[0];
|
|
||||||
data.endDate = this.time2[1];
|
|
||||||
getWorkerGrowthApi(data).then((res) => {
|
|
||||||
// console.log('---趋势--',res)
|
|
||||||
if (res.reult != null) {
|
|
||||||
this.xdata2 = result.map((item) => {
|
|
||||||
return item.date;
|
|
||||||
});
|
|
||||||
this.ydata2 = result.map((item) => {
|
|
||||||
return item.count;
|
|
||||||
});
|
|
||||||
this.createChart();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createChart() {
|
|
||||||
let myChart = echarts.init(this.$refs.rightChart);
|
|
||||||
const option = {
|
|
||||||
tooltip: {
|
|
||||||
trigger: "axis",
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "10%",
|
|
||||||
right: "2%",
|
|
||||||
bottom: "18%",
|
|
||||||
left: "2%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
boundaryGap: false,
|
|
||||||
data: this.xdata2,
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
color: "#60c5d1",
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
type: "dashed",
|
|
||||||
color: "#777f8a",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "人员数",
|
|
||||||
data: this.ydata2,
|
|
||||||
type: "line",
|
|
||||||
color: "#62c2ce",
|
|
||||||
areaStyle: {
|
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
||||||
{ offset: 0, color: "rgba(194, 92, 50,1)" },
|
|
||||||
{ offset: 1, color: "rgba(99, 193, 204,1)" },
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
myChart.setOption(option);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@ -267,84 +139,127 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-top: 2%;
|
margin-top: 2%;
|
||||||
.topbox {
|
display: flex;
|
||||||
height: 27%;
|
justify-content: space-between;
|
||||||
display: flex;
|
.centerLeft,
|
||||||
flex-wrap: wrap;
|
.centerC,
|
||||||
justify-content: space-between;
|
.centerRight {
|
||||||
.item {
|
width: 340px;
|
||||||
flex-shrink: 0;
|
height: 95%;
|
||||||
width: 14%;
|
.text {
|
||||||
height: 70px;
|
|
||||||
margin-right: 5%;
|
|
||||||
margin-left: 5%;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-image: url(../assets/images/common/num_bg.png);
|
margin-bottom: 20px;
|
||||||
background-repeat: no-repeat;
|
font-size: 14px;
|
||||||
background-size: 100%;
|
.el-icon-minus {
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
color: #6ee4f0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 10%;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.item.margin {
|
.textDivBox {
|
||||||
margin-top: 1%;
|
width: 340px;
|
||||||
}
|
height: 8%;
|
||||||
}
|
display: flex;
|
||||||
.bunbox {
|
justify-content: space-between;
|
||||||
height: 60%;
|
.textDiv {
|
||||||
width: 100%;
|
background: rgba(111, 202, 226, 0.65);
|
||||||
display: flex;
|
border-radius: 2px 2px 2px 2px;
|
||||||
justify-content: space-between;
|
opacity: 1;
|
||||||
.left,
|
font-size: 12px;
|
||||||
.right {
|
width: 100px;
|
||||||
width: 50%;
|
height: 41px;
|
||||||
height: 90%;
|
// background-color: #6fcae2;
|
||||||
margin-top: 5%;
|
div {
|
||||||
span {
|
text-align: center;
|
||||||
color: #6ee4f0;
|
}
|
||||||
font-size: 16px;
|
span {
|
||||||
margin: 4% 20% 0% 6%;
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rightChart {
|
}
|
||||||
|
.tableDiv {
|
||||||
|
margin-top: 12px;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(85%);
|
||||||
|
.tableSon {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
background: rgba(111, 202, 226, 0.3);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
opacity: 1;
|
||||||
|
height: 27px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
// opacity: 0.2;
|
||||||
|
.row {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.nodata{
|
.tbody {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.tableSon .row,
|
||||||
|
.tbody .row {
|
||||||
|
display: flex;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20%;
|
justify-content: left;
|
||||||
|
//height: 40px;
|
||||||
|
line-height: 38px;
|
||||||
|
.td {
|
||||||
|
color: #fff;
|
||||||
|
opacity: 0.5;
|
||||||
|
&:nth-child(1) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
&:nth-child(4) {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.centerC {
|
||||||
::v-deep .el-date-editor--daterange.el-input__inner {
|
.textDiv {
|
||||||
width: 230px;
|
flex: 1;
|
||||||
height: 30px;
|
&:nth-child(2) {
|
||||||
background-color: #182337;
|
margin-left: 20px;
|
||||||
border: 1px solid #264b5e;
|
}
|
||||||
}
|
}
|
||||||
::v-deep .el-range-input {
|
img {
|
||||||
background-color: #182337;
|
width: 48px;
|
||||||
color: #6ee4f0;
|
height: 26px;
|
||||||
}
|
border-radius: 0px 0px 0px 0px;
|
||||||
::v-deep .el-date-editor {
|
opacity: 1;
|
||||||
.el-range__icon {
|
margin-top: 5px;
|
||||||
line-height: 23px;
|
}
|
||||||
color: #6ee4f0;
|
|
||||||
}
|
}
|
||||||
.el-range-separator {
|
.centerRight {
|
||||||
line-height: 23px;
|
.textDivBox {
|
||||||
color: #757d88;
|
width: 360px;
|
||||||
}
|
height: 8%;
|
||||||
.el-range__close-icon {
|
display: flex;
|
||||||
color: #757d88;
|
justify-content: space-between;
|
||||||
line-height: 23px;
|
.textDiv {
|
||||||
|
margin-right: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 100px;
|
||||||
|
height: 41px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -8,7 +8,10 @@
|
|||||||
<div class="top"><CenterTop /></div>
|
<div class="top"><CenterTop /></div>
|
||||||
<div class="bottom"><CenterBottom /></div>
|
<div class="bottom"><CenterBottom /></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right"><RightTop /></div>
|
<div class="right">
|
||||||
|
<div class="rightTop"> <RightTop /> </div>
|
||||||
|
<div class="rightbottom"> <RightBottom /> </div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -18,8 +21,9 @@ import LeftBottom from './leftBottom.vue'
|
|||||||
import CenterTop from './centerTop.vue'
|
import CenterTop from './centerTop.vue'
|
||||||
import CenterBottom from './centerBottom.vue'
|
import CenterBottom from './centerBottom.vue'
|
||||||
import RightTop from './rightTop.vue'
|
import RightTop from './rightTop.vue'
|
||||||
|
import RightBottom from './rightBottom.vue'
|
||||||
export default {
|
export default {
|
||||||
components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop }
|
components: { LeftTop, LeftBottom, CenterTop, CenterBottom, RightTop,RightBottom }
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -54,6 +58,13 @@ export default {
|
|||||||
.right {
|
.right {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
.rightTop{
|
||||||
|
height: 65%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.rightbottom{
|
||||||
|
height: 35%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
214
src/views/projectAdmin/fourEngin/security/rightBottom.vue
Normal file
214
src/views/projectAdmin/fourEngin/security/rightBottom.vue
Normal file
@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<Card title="人员管理" id="text">
|
||||||
|
<div class="table">
|
||||||
|
<!-- 出勤数据结构 -->
|
||||||
|
<div class="topbox">
|
||||||
|
<div>
|
||||||
|
<span>总人数</span>
|
||||||
|
<p class="item">{{ WorkerNum.sumNumber }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>实际出勤人数</span>
|
||||||
|
<p class="item">{{ WorkerNum.attendanceNumber }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>未出勤人数</span>
|
||||||
|
<p class="item">{{ WorkerNum.noAttendanceNumber }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>实名制人数</span>
|
||||||
|
<p class="item">{{ WorkerNum.realNameNumber }}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>入职培训人数</span>
|
||||||
|
<p class="item">{{ WorkerNum.inductionTrainingNumber }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" margin">
|
||||||
|
<span>管理人员人数</span>
|
||||||
|
<p class="item">{{ WorkerNum.managerNumber }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 出勤横向柱状图结构 -->
|
||||||
|
<div id="main">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts4'
|
||||||
|
import Card from '../components/Card.vue'
|
||||||
|
import { getWorkerNumApi } from '@/assets/js/api/zhongjianFourth'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Card
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
WorkerNum: {} //出勤数据
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getData()
|
||||||
|
this.AttendanceData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//出勤人员数据
|
||||||
|
getData() {
|
||||||
|
getWorkerNumApi({ projectSn: this.$store.state.projectSn }).then(res => {
|
||||||
|
this.WorkerNum = res.result
|
||||||
|
})
|
||||||
|
},
|
||||||
|
AttendanceData() {
|
||||||
|
let myChart = echarts.init(document.getElementById('main'))
|
||||||
|
//初始化数据
|
||||||
|
var category = ['中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数', '中建四局出勤人数']
|
||||||
|
var barData = [5, 5, 4, 6, 5]
|
||||||
|
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: '10%',
|
||||||
|
left: '1%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '5%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: { show: false }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitArea: { show: false },
|
||||||
|
type: 'category',
|
||||||
|
data: category,
|
||||||
|
max: 3.5,
|
||||||
|
boundaryGap: [5, 5],
|
||||||
|
axisLine: {
|
||||||
|
show:false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#6EE4F0'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// splitLine: { show: false },
|
||||||
|
|
||||||
|
offset: 0,
|
||||||
|
|
||||||
|
nameTextStyle: {
|
||||||
|
fontSize: 30
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// emphasis: {
|
||||||
|
// barBorderRadius: 7
|
||||||
|
// },
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 7,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#3977E6' },
|
||||||
|
{ offset: 1, color: '#37BBF8' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '数量',
|
||||||
|
type: 'bar',
|
||||||
|
data: barData,
|
||||||
|
barWidth: 15,
|
||||||
|
barGap: 10,
|
||||||
|
smooth: true,
|
||||||
|
barCategoryGap: 20,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
position: 'right',
|
||||||
|
offset: [5, 5],
|
||||||
|
// textStyle: {
|
||||||
|
// // color: '#F68300',
|
||||||
|
// fontSize: 13
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
emphasis: {
|
||||||
|
barBorderRadius: 7
|
||||||
|
},
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 7,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||||
|
{ offset: 0, color: '#E7622A' },
|
||||||
|
{ offset: 1, color: '#162235' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
myChart.setOption(option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
#text{
|
||||||
|
font-size: 20px ;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.topbox {
|
||||||
|
margin-top: 10px;
|
||||||
|
height: 27%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
.item {
|
||||||
|
margin-top: 5px;
|
||||||
|
// padding-top: 15px;
|
||||||
|
width: 100px;
|
||||||
|
height: 44px;
|
||||||
|
text-align: center;
|
||||||
|
background-image: url(../assets/images/common/num_bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
color: #6ee4f0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#main {
|
||||||
|
margin-top: 55px;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user