2024-10-31 安全教育-api补齐调用

This commit is contained in:
Rain 2024-10-31 10:53:51 +08:00
parent 05b94e1b85
commit 39f060abfb
7 changed files with 368 additions and 258 deletions

View File

@ -0,0 +1,27 @@
import http from "@/api";
const BASEURL = import.meta.env.VITE_API_URL;
// 培训概况
export const safecationOverview = (params: {}) => {
return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationOverview`, params);
};
// 班前教育人数统计(近七日)
export const safecationByWeek = (params: {}) => {
return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationByWeek`, params);
};
// 教育类型分析
export const safecationByType = (params: {}) => {
return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationByType`, params);
};
// 近七日人员培训记录
export const safeWorkerPage = (params: {}) => {
return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectSafeEducationWorkerPage`, params);
};
// 培训统计(近一个月内) 培训人员班组统计(近一个月内)
export const safecationByMonth = (params: {}) => {
return http.post(BASEURL + `/xmgl/workerSafeEducationWorker/selectWorkerEducationByMonth`, params);
};

View File

@ -4,19 +4,19 @@
<div class="total-bg">
<div class="worker-total">
<div class="text">工人总数</div>
<div class="number">4098</div>
<div class="number">{{ByMonthdata.workerNum || "0"}}</div>
</div>
<div class="train-num">
<div class="text">培训人数</div>
<div class="number">3827</div>
<div class="number">{{ByMonthdata.educationNum || "0"}}</div>
</div>
<div class="pass-num">
<div class="text">合格人数</div>
<div class="number">2098</div>
<div class="number">{{ByMonthdata.passNum || "0"}}</div>
</div>
<div class="unqualified-num">
<div class="text">不合格人数</div>
<div class="number">1729</div>
<div class="number">{{ByMonthdata.unPassNum || "0"}}</div>
</div>
</div>
</div>
@ -26,6 +26,28 @@
<script setup lang="ts">
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
// api
import { safecationByMonth } from "@/api/modules/safeEdgeProtection";
// sn
import { GlobalStore } from "@/stores";
const store = GlobalStore();
onMounted(() => {
getlist();
});
const ByMonthdata = ref({});
const getlist = async () => {
const res: any = await safecationByMonth({
projectSn: store.sn
});
console.log("训统计(近一个月内) 培训人员班组统计(近一个月内", res);
// overviewdata.value = res.result;
ByMonthdata.value = res.result.workerStat;
};
</script>
<style scoped lang="scss">

View File

@ -8,10 +8,17 @@
<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted } from "vue";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/lineSymbol.png";
// api
import { safecationByMonth } from "@/api/modules/safeEdgeProtection";
// sn
import { GlobalStore } from "@/stores";
const store = GlobalStore();
function draw() {
let chartDom = document.getElementById("educationBottomRight");
if (chartDom) {
@ -42,7 +49,8 @@ function draw() {
},
xAxis: {
show: true,
data: ["外墙施工人员", "机电安装工", "司机", "油漆工", "木工", "园林工"],
// data: ["", "", "", "", "", ""],
data: xdata.value,
triggerEvent: true,
axisTick: {
show: false,
@ -67,6 +75,26 @@ function draw() {
}
}
},
dataZoom: {
type: "slider", //
show: xdata.value.length > 7 ? true : false, // ,
startValue: 0, //
endValue: 6, //
height: 6, //
bottom: 0, //
showDetail: false, //
showDataShadow: false, //
fillerColor: "#2493f4", //
borderColor: "transparent", //
zoomLock: true, //
brushSelect: false, //
//
handleStyle: {
//
opacity: 0,
// borderRadius: 20
}
},
yAxis: {
triggerEvent: true,
nameTextStyle: {
@ -133,7 +161,8 @@ function draw() {
}
}
},
data: [100, 200, 300, 100, 20, 60, 120],
// data: [100, 200, 300, 100, 20, 60, 120],
data: servedata.value,
z: 10
},
{
@ -147,16 +176,33 @@ function draw() {
// color: "rgba(11,47,68,.8)"
}
},
data: [100, 200, 300, 100, 20, 60, 120],
// data: [100, 200, 300, 100, 20, 60, 120],
data: servedata.value,
z: 9
}
]
};
echartsTest.setOption(option);
}
onMounted(() => {
draw();
onMounted(async () => {
await getTypelist();
await draw();
});
const xdata = ref([]);
const servedata = ref([]);
const getTypelist = async () => {
const res: any = await safecationByMonth({
projectSn: store.sn
});
console.log("教育类型分析", res);
if (res.result) {
xdata.value = res.result.teamStat.map(obj => obj.name);
servedata.value = res.result.teamStat.map(obj => obj.num);
}
};
</script>
<style scoped lang="scss">

View File

@ -10,12 +10,18 @@
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
// const store = GlobalStore();
// const airType = ref(1);
// let gasName = ref(1 as any);
let selectDay = ref(1 as any);
// api
import { safecationByType } from "@/api/modules/safeEdgeProtection";
// sn
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// let noiseList = ref([
// {
// value: 1,
@ -54,78 +60,78 @@ let dayList = ref([
}
]);
let dataList = ref([
{
value: 37,
show: true,
name: "入场安全教育",
itemStyle: {
normal: {
color: "#82FBEA",
borderWidth: 20
}
}
},
{
value: 46,
show: true,
name: "日常安全教育",
itemStyle: {
normal: {
color: "#EEA959",
borderWidth: 20
}
}
},
{
value: 30,
show: true,
name: "每日安全交底",
itemStyle: {
normal: {
color: "#4CC4F8"
}
}
},
{
value: 30,
show: true,
name: "VR安全教育",
itemStyle: {
normal: {
color: "#E0D838"
}
}
},
{
value: 8,
show: true,
name: "班前教育",
itemStyle: {
normal: {
color: "#EC6266"
}
}
},
{
value: 32,
show: true,
name: "日常教育(日常违规教育)",
itemStyle: {
normal: {
color: "#6375C7"
}
}
},
{
value: 15,
show: true,
name: "每日交底(专项方案交底)",
itemStyle: {
normal: {
color: "#81F279"
}
}
}
// {
// value: 37,
// show: true,
// name: "",
// itemStyle: {
// normal: {
// color: "#82FBEA",
// borderWidth: 20
// }
// }
// },
// {
// value: 46,
// show: true,
// name: "",
// itemStyle: {
// normal: {
// color: "#EEA959",
// borderWidth: 20
// }
// }
// },
// {
// value: 30,
// show: true,
// name: "",
// itemStyle: {
// normal: {
// color: "#4CC4F8"
// }
// }
// },
// {
// value: 30,
// show: true,
// name: "VR",
// itemStyle: {
// normal: {
// color: "#E0D838"
// }
// }
// },
// {
// value: 8,
// show: true,
// name: "",
// itemStyle: {
// normal: {
// color: "#EC6266"
// }
// }
// },
// {
// value: 32,
// show: true,
// name: "()",
// itemStyle: {
// normal: {
// color: "#6375C7"
// }
// }
// },
// {
// value: 15,
// show: true,
// name: "()",
// itemStyle: {
// normal: {
// color: "#81F279"
// }
// }
// }
]);
function Pie() {
let dataArr = [];
@ -159,8 +165,9 @@ function Pie() {
return dataArr;
}
onMounted(() => {
drawEchart();
onMounted(async () => {
await getTypelist();
await drawEchart();
});
function drawEchart() {
@ -201,13 +208,13 @@ function drawEchart() {
subtextStyle: {
color: "#ccc",
fontSize: 14,
fontWeight: "normal",
fontWeight: "normal"
}
},
legend: {
selectedMode: false, //
icon: "rect",
type: "plain",
type: "scroll", //
orient: "vertical",
left: "52%",
top: "8%",
@ -249,6 +256,7 @@ function drawEchart() {
}
}
},
color:['#82FBEA','#EEA959','#4CC4F8','#E0D838','#EC6266','#6375C7','#81F279'],
series: [
// 线
{
@ -394,6 +402,22 @@ function drawEchart() {
};
echartsTest.setOption(option, true);
}
const getTypelist = async () => {
const res: any = await safecationByType({
projectSn: store.sn
});
console.log("教育类型分析", res);
if (res.result) {
dataList.value = res.result.map(item => {
return {
value:item.num,
name:item.type,
show: true,
}
})
}
};
</script>
<style lang="scss" scoped>

View File

@ -8,10 +8,17 @@
<script setup lang="ts">
import Card from "@/components/card.vue";
import { onMounted } from "vue";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import symbolIcon from "@/assets/images/lineSymbol.png";
// api
import { safecationByWeek } from "@/api/modules/safeEdgeProtection";
// sn
import { GlobalStore } from "@/stores";
const store = GlobalStore();
function draw() {
let chartDom = document.getElementById("educationCenterTop");
if (chartDom) {
@ -42,7 +49,8 @@ function draw() {
},
xAxis: {
show: true,
data: ["8.30", "8.31", "9.1", "9.2", "9.4", "9.5", "9.6"],
// data: ["8.30", "8.31", "9.1", "9.2", "9.4", "9.5", "9.6"],
data: xdata.value,
triggerEvent: true,
axisTick: {
show: false,
@ -132,7 +140,8 @@ function draw() {
}
}
},
data: [100, 200, 300, 100, 20, 60, 120],
// data: [100, 200, 300, 100, 20, 60, 120],
data: servedata.value,
z: 10
},
{
@ -146,15 +155,33 @@ function draw() {
// color: "rgba(11,47,68,.8)"
}
},
data: [100, 200, 300, 100, 20, 60, 120],
data: servedata.value,
z: 9
}
]
};
echartsTest.setOption(option);
}
onMounted(() => {
draw();
const xdata = ref([]);
const servedata = ref([]);
const getctlist = async () => {
const res: any = await safecationByWeek({
projectSn: store.sn
});
console.log("班前教育人数统计", res);
if (res.result) {
xdata.value = res.result.map(obj => obj.time);
servedata.value = res.result.map(obj => obj.num);
console.log("xdata.value", xdata.value);
console.log("servedata.value", servedata.value);
}
};
onMounted(async () => {
await getctlist();
await draw();
});
</script>

View File

@ -4,7 +4,7 @@
<div class="trainee-number">
<div class="text-detail">
培训总人数
<span>200</span>
<span>{{overviewdata.educationNum || '0'}}</span>
</div>
<div class="icon-detail">
<img :src="detailIcon1" />
@ -13,7 +13,7 @@
<div class="pass-number">
<div class="text-detail">
合格人数
<span>120</span>
<span>{{overviewdata.educationPass || '0'}}</span>
</div>
<div class="icon-detail">
<img :src="detailIcon2" />
@ -22,8 +22,8 @@
<div class="trainee-record">
<div class="text-detail">
最新培训记录
<span>20</span>
<span style="font-size: 12px; margin-top: 1%">min</span>
<span>{{overviewdata.educationNewRecord || '0'}}</span>
<!-- <span style="font-size: 12px; margin-top: 1%"></span> -->
</div>
<div class="icon-detail">
<img :src="detailIcon3" />
@ -40,6 +40,13 @@
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
// api
import { safecationOverview } from "@/api/modules/safeEdgeProtection";
// sn
import { GlobalStore } from "@/stores";
const store = GlobalStore();
import detailIcon1 from "@/assets/images/safeEducation/icon1.png";
import detailIcon2 from "@/assets/images/safeEducation/icon2.png";
import detailIcon3 from "@/assets/images/safeEducation/icon3.png";
@ -72,6 +79,20 @@ const list = reactive([
color: "#EC6266"
}
]);
onMounted(() => {
getlist();
});
const overviewdata = ref({});
const getlist = async () => {
const res: any = await safecationOverview({
projectSn: store.sn
});
// console.log("", res);
overviewdata.value = res.result
};
</script>
<style scoped lang="scss">
@ -174,7 +195,8 @@ const list = reactive([
right: -3%;
top: 10%;
.text-detail {
height: 15%;
// white-space: nowrap;
// height: 15%;
display: flex;
justify-content: center;
align-items: center;
@ -183,6 +205,8 @@ const list = reactive([
background-size: 100% 100%;
color: #ffffff;
font-size: 14px;
display: flex;
flex-direction: column;
span {
font-size: 16px;
font-family: OPPOSans-Heavy, OPPOSans;

View File

@ -11,20 +11,21 @@
<div>是否合格</div>
<div>培训得分</div>
</div>
<el-scrollbar class="list-box">
<el-scrollbar class="list-box" @scroll="handleScroll" ref="refScrollbarer">
<div v-for="(item, index) in list" class="list-style" :key="item.id">
<div>{{ index + 1 }}</div>
<div>{{ item.personName }}</div>
<div>{{ item.personGrade }}</div>
<div>{{ item.personAge }}</div>
<div>{{ item.teamGroup }}</div>
<div :style="{ color: item.passType == 1 ? '#EC6266' : '#FFFFFF' }">
{{ item.passType == 0 ? "合格" : "不合格" }}
<div>{{ item.workerName }}</div>
<div>{{ item.sex == 1 ? '男' : '女' }}</div>
<div>{{ item.age }}</div>
<div>{{ item.teamName }}</div>
<div :style="{ color: item.isQualified != 1 ? '#EC6266' : '#FFFFFF' }">
{{ item.isQualified
== 1 ? "合格" : "不合格" }}
</div>
<div>{{ item.trainScore }}</div>
<div>{{ item.score }}</div>
</div>
<div class="not-data" v-if="list.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<img src="@/assets/images/noData.png" alt />
<p>暂无数据</p>
</div>
</el-scrollbar>
@ -35,160 +36,93 @@
<script lang="ts" setup>
import Card from "@/components/card.vue";
import { reactive, ref, onMounted } from "vue";
import { reactive, ref, onMounted, nextTick } from "vue";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
import { safeWorkerPage } from "@/api/modules/safeEdgeProtection";
let showDialog = ref(false as any);
let rangeTime = ref("" as any);
const list = reactive([
{
id: 1,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 2,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 1,
trainScore: 78
},
{
id: 3,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 4,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 1,
trainScore: 78
},
{
id: 5,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 6,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 1,
trainScore: 78
},
{
id: 7,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 8,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 9,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 10,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 11,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 12,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 13,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 14,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 15,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
},
{
id: 16,
personName: "梁雷",
personGrade: "女",
personAge: "54",
teamGroup: "木工班组",
passType: 0,
trainScore: 78
}
const list = ref([
// {
// id: 1,
// personName: "",
// personGrade: "",
// personAge: "54",
// teamGroup: "",
// passType: 0,
// trainScore: 78
// },
]);
onMounted(async () => {});
onMounted(async () => {
getProgressListData();
});
const refScrollbarer = ref(null as any); //
const moreScroll = ref(true as any);
const pagInfo = ref({
pageNo: 1, //
pageSize: 30, //
total: 0 //
});
// --
function getProgressListData() {
let data = {
pageNo: pagInfo.value.pageNo,
pageSize: pagInfo.value.pageSize,
projectSn: store.sn,
videoType: 1
};
safeWorkerPage(data).then(res => {
moreScroll.value = false;
if (res.code == 200 && res.result.records.length > 0) {
console.log("========近七日人员培训记录======", res.result.records);
list.value = list.value.concat(res.result.records);
// listData.value = res.result.records
// console.log("listData.value=============", listData.value);
pagInfo.value.total = res.result.total;
nextTick(() => {
moreScroll.value = true;
});
}
});
}
// -
function handleScroll(event) {
// console.log("event", event);
refScrollbarer.value.wrapRef.addEventListener("scroll", (e: any) => {
const scrollTop = e.target.scrollTop;
const scrollHeight = e.target.scrollHeight;
const clientHeight = e.target.clientHeight;
// console.log("event", event);
//
if (scrollTop >= scrollHeight - clientHeight - 1) {
if (moreScroll.value) {
console.log("===================加载第二页===================");
pagInfo.value.pageNo += 1;
console.log("pagInfo.value.pageNo", pagInfo.value.pageNo);
moreScroll.value = false;
getProgressListData();
}
}
});
// const { scrollTop, scrollHeight, clientHeight } = event.target;
// //
// if (scrollTop + clientHeight >= scrollHeight) {
// //
// console.log("======================================");
// }
}
</script>
<style lang="scss" scoped>
@ -269,6 +203,9 @@ onMounted(async () => {});
text-align: center;
white-space: nowrap;
width: 14%;
white-space: nowrap; /* 强制文本在一行内显示 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
}
.list-style:hover {
@ -278,9 +215,10 @@ onMounted(async () => {});
}
}
.not-data {
top: 73%;
width: 12%;
left: 44%;
top: 50%;
// width: 12%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
img {
width: 40%;
@ -293,3 +231,5 @@ onMounted(async () => {});
}
}
</style>