forked from integrated_whb/integrated_whb_vue
dev
parent
1306882ed0
commit
456855000a
|
|
@ -0,0 +1,132 @@
|
||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<div class="main">
|
||||||
|
<div class="title">年度培训情况统计</div>
|
||||||
|
<div class="num">
|
||||||
|
培训班级数: <span>8965 </span> 参与培训人员数: <span>8965 </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main1" />
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
let myChart1;
|
||||||
|
|
||||||
|
const annualTraining = () => {
|
||||||
|
myChart1 = echarts.init(document.querySelector("#main1"));
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: "",
|
||||||
|
textStyle: {
|
||||||
|
fontSize: "14",
|
||||||
|
fontWeight: "700",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["培训班级数", "参与培训人员数"],
|
||||||
|
top: "5%",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
right: "8%",
|
||||||
|
bottom: "0%",
|
||||||
|
top: "20%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#102b60",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#102b60",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#102b60",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "培训班级数",
|
||||||
|
type: "line",
|
||||||
|
data: [100, 560, 324, 21, 244, 566, 234, 456, 345, 55, 133, 122],
|
||||||
|
itemStyle: {
|
||||||
|
color: "#3ca272",
|
||||||
|
lineStyle: {
|
||||||
|
color: "#3ca272",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "参与培训人员数",
|
||||||
|
type: "line",
|
||||||
|
data: [243, 43, 54, 433, 44, 546, 234, 345, 46, 145, 222, 676],
|
||||||
|
itemStyle: {
|
||||||
|
color: "#5470c6",
|
||||||
|
lineStyle: {
|
||||||
|
color: "#5470c6",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart1.setOption(option);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
annualTraining();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
color: #ffffff;
|
||||||
|
span {
|
||||||
|
color: #087cca;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#main1 {
|
||||||
|
width: 500px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,140 +1,77 @@
|
||||||
<template>
|
<template>
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="9">
|
<el-col v-for="(item, index) in data.countlist" :key="index" :span="4">
|
||||||
<el-card>
|
<div class="wrap">
|
||||||
<div class="flex">
|
<div class="num">{{ item.num }}</div>
|
||||||
<div class="img">
|
<div class="title">{{ item.title }}</div>
|
||||||
<img src="/src/assets/images/index/icon1.png" alt="" />
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
@click="
|
|
||||||
router.push({
|
|
||||||
path: '/hidden_danger_government/ledger',
|
|
||||||
query: { STATE: '4' },
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<span>已验收</span>
|
|
||||||
<count-to :end-val="data.hidCount.yys" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click="
|
|
||||||
router.push({
|
|
||||||
path: '/hidden_danger_government/ledger',
|
|
||||||
query: { STATE: '-1' },
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<span>已超期</span>
|
|
||||||
<count-to :end-val="data.hidCount.ycq" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click="
|
|
||||||
router.push({ path: '/hidden_danger_government/rectification' })
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<span>待整改</span>
|
|
||||||
<count-to :end-val="data.hidCount.dzg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="9">
|
|
||||||
<el-card>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="img">
|
|
||||||
<img src="/src/assets/images/index/icon2.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div @click="router.push({ path: '/risk_control/ledger' })">
|
|
||||||
<span>存在风险</span>
|
|
||||||
<count-to :end-val="data.riskCount.cnzfx" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
@click="router.push({ path: '/risk_control/identifying_parts' })"
|
|
||||||
>
|
|
||||||
<span>辨识部位</span>
|
|
||||||
<count-to :end-val="data.riskCount.idcount" />
|
|
||||||
</div>
|
|
||||||
<div @click="router.push({ path: '/risk_control/risk_point' })">
|
|
||||||
<span>风险点(单元)</span>
|
|
||||||
<count-to :end-val="data.riskCount.unitcount" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-card>
|
|
||||||
<div class="flex">
|
|
||||||
<div class="img">
|
|
||||||
<img src="/src/assets/images/index/icon3.png" alt="" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span>已使用存储</span>
|
|
||||||
<count-to
|
|
||||||
:end-val="(data.memoryUsage.total_usage / 1000 / 1000).toFixed(2)"
|
|
||||||
:options="{ suffix: 'MB' }"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getHiddenCount, getMemoryUsage } from "@/request/index.js";
|
|
||||||
import { reactive } from "vue";
|
import { reactive } from "vue";
|
||||||
import CountTo from "vue-countup-v3";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { getRiskManagement } from "@/request/large_screen_data_display.js";
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
hidCount: {
|
countlist: [
|
||||||
dzg: 0,
|
{
|
||||||
yys: 0,
|
num: 456321,
|
||||||
ycq: 0,
|
title: "风险单元",
|
||||||
},
|
},
|
||||||
riskCount: {
|
{
|
||||||
cnzfx: 0,
|
num: 456321,
|
||||||
idcount: 0,
|
title: "辨识部位",
|
||||||
unitcount: 0,
|
|
||||||
},
|
},
|
||||||
memoryUsage: {
|
{
|
||||||
total_usage: 0,
|
num: 456321,
|
||||||
|
title: "风险因素",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
num: 456321,
|
||||||
|
title: "排查清单数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
num: 456321,
|
||||||
|
title: "自查次数",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
num: 456321,
|
||||||
|
title: "隐患数",
|
||||||
|
},
|
||||||
|
],
|
||||||
});
|
});
|
||||||
const fnGetData = async () => {
|
|
||||||
const { hidCount } = await getHiddenCount();
|
|
||||||
const { riskCount } = await getRiskManagement();
|
|
||||||
const { pd: memoryUsage } = await getMemoryUsage();
|
|
||||||
data.hidCount = hidCount;
|
|
||||||
data.riskCount = riskCount;
|
|
||||||
data.memoryUsage = memoryUsage;
|
|
||||||
};
|
|
||||||
fnGetData();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
img {
|
.el-col-4 {
|
||||||
width: 40px;
|
.wrap {
|
||||||
height: 40px;
|
width: 100%;
|
||||||
}
|
padding: 20px;
|
||||||
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-image: linear-gradient(to bottom, #214e74, #25417a) 1 stretch;
|
||||||
|
|
||||||
div:not(:first-child) {
|
.num {
|
||||||
cursor: pointer;
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #087cca;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countup-wrap {
|
.title {
|
||||||
padding-top: 10px;
|
color: #ffffff;
|
||||||
font-weight: bold;
|
}
|
||||||
font-size: 20px;
|
}
|
||||||
|
&:nth-child(1) .wrap .num {
|
||||||
|
color: #087cca;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) .wrap .num {
|
||||||
|
color: #d19312;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(6) .wrap .num {
|
||||||
|
color: #aa0608;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<div class="title">双重预防运行情况统计</div>
|
||||||
|
<el-table :data="data.tableData" style="width: 100%" size="small">
|
||||||
|
<el-table-column prop="date" label="序号" />
|
||||||
|
<el-table-column prop="date" label="清单名称" />
|
||||||
|
<el-table-column prop="date" label="检查时间" />
|
||||||
|
<el-table-column prop="date" label="检查人" />
|
||||||
|
<el-table-column prop="date" label="隐患数" />
|
||||||
|
|
||||||
|
></el-table
|
||||||
|
></el-card
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from "vue";
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,135 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="title">双重预防检查情况统计</div>
|
||||||
|
<div id="main2"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
let myChart1;
|
||||||
|
|
||||||
|
const annualTraining = () => {
|
||||||
|
myChart1 = echarts.init(document.querySelector("#main2"));
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
dataView: { show: false, readOnly: false },
|
||||||
|
magicType: { show: false, type: ["line", "bar"] },
|
||||||
|
restore: { show: false },
|
||||||
|
saveAsImage: { show: false },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ["清单检查数", "发现隐患数"],
|
||||||
|
top: "10%",
|
||||||
|
left: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
right: "8%",
|
||||||
|
bottom: "0%",
|
||||||
|
top: "30%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#102b60",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "",
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#102b60",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#102b60",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "清单检查数",
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "发现隐患数",
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart1.setOption(option);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
annualTraining();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wrap {
|
||||||
|
width: 50%;
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#main2 {
|
||||||
|
width: 330px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="flex top">
|
||||||
|
<div class="img">
|
||||||
|
<img src="@/assets/images/public/loginbg.jpg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<div>
|
||||||
|
<span>公司名称：</span><br />
|
||||||
|
秦皇岛卓云科技有限公司
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>组织机构代码证：</span>
|
||||||
|
<br />455555
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex f14 mt20 number">
|
||||||
|
<div>驾驶员数:<span>234</span></div>
|
||||||
|
<div>押运员数:<span>234</span></div>
|
||||||
|
<div>装卸员数:<span>234</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="wrap_text">
|
||||||
|
<div class="wrap_main">
|
||||||
|
<div class="flex space-between">
|
||||||
|
<div>主要负责人: 张三岁</div>
|
||||||
|
<div>主要负责人电话: 13833550548</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-between">
|
||||||
|
<div>法定代表人: 李四折</div>
|
||||||
|
<div>法人手机号: 13833550547</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex space-between">
|
||||||
|
<div>占地面积（㎡）: 10000</div>
|
||||||
|
<div>职工人数（人）: 22</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
<script setup></script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wrap {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.mt20 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
.img {
|
||||||
|
width: 150px;
|
||||||
|
height: 90px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #234e6c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 10px;
|
||||||
|
line-height: 1.6;
|
||||||
|
span {
|
||||||
|
color: #76afed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.number {
|
||||||
|
justify-content: space-between;
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wrap_text {
|
||||||
|
margin-top: 20px;
|
||||||
|
line-height: 2;
|
||||||
|
.wrap_main {
|
||||||
|
background: #1b346c;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.space-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="title">隐患整改情况统计</div>
|
||||||
|
<div id="main3"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
let myChart1;
|
||||||
|
|
||||||
|
const annualTraining = () => {
|
||||||
|
myChart1 = echarts.init(document.querySelector("#main3"));
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: "0%",
|
||||||
|
left: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
right: "8%",
|
||||||
|
bottom: "0%",
|
||||||
|
top: "35%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Access From",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["40%", "70%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 2,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: "未整改" },
|
||||||
|
{ value: 735, name: "已整改" },
|
||||||
|
{ value: 484, name: "已验收" },
|
||||||
|
{ value: 300, name: "已过期" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart1.setOption(option);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
annualTraining();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wrap {
|
||||||
|
width: 50%;
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#main3 {
|
||||||
|
width: 330px;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrap">
|
||||||
|
<el-card>
|
||||||
|
<div class="title">人员统计</div>
|
||||||
|
<div id="main4"></div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
let myChart1;
|
||||||
|
|
||||||
|
const annualTraining = () => {
|
||||||
|
myChart1 = echarts.init(document.querySelector("#main4"));
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: "0%",
|
||||||
|
left: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "0%",
|
||||||
|
right: "8%",
|
||||||
|
bottom: "0%",
|
||||||
|
top: "0%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "Access From",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["40%", "70%"],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: "驾驶员" },
|
||||||
|
{ value: 735, name: "押运员" },
|
||||||
|
{ value: 484, name: "装卸员" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart1.setOption(option);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
annualTraining();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wrap {
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#main4 {
|
||||||
|
width: 330px;
|
||||||
|
height: 165px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<el-card>
|
||||||
|
<div class="title">培训情况统计</div>
|
||||||
|
<el-table :data="data.tableData" style="width: 100%" size="small">
|
||||||
|
<el-table-column prop="date" label="序号" />
|
||||||
|
<el-table-column prop="date" label="班级名称" />
|
||||||
|
<el-table-column prop="date" label="班级状态" />
|
||||||
|
<el-table-column prop="date" label="涉及工种数" />
|
||||||
|
<el-table-column prop="date" label="培训人数" />
|
||||||
|
<el-table-column prop="date" label="培训进度" /> </el-table
|
||||||
|
></el-card>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from "vue";
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "2016-05-03",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<el-card style="margin-top: 10px">
|
||||||
|
<div class="title">双重预防运行情况统计</div>
|
||||||
|
<el-table :data="data.tableData" style="width: 100%" size="small">
|
||||||
|
<el-table-column prop="date" label="序号" />
|
||||||
|
<el-table-column prop="date" label="运单编号" />
|
||||||
|
<el-table-column prop="date" label="运输车辆" />
|
||||||
|
<el-table-column prop="date" label="三检状态" />
|
||||||
|
|
||||||
|
></el-table
|
||||||
|
></el-card
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from "vue";
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date: "34",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "34",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "34",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "34",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "34",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: "34",
|
||||||
|
name: "Tom",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,25 +3,29 @@
|
||||||
<el-row :gutter="10">
|
<el-row :gutter="10">
|
||||||
<el-col :span="18">
|
<el-col :span="18">
|
||||||
<count />
|
<count />
|
||||||
<el-row class="mt-10">
|
<el-row :gutter="10" class="mt-10">
|
||||||
<el-col :span="24">
|
|
||||||
<list-check-type />
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="mt-10" :gutter="10">
|
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<risk-classification />
|
<annualTraining />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
<checklist-check />
|
<el-card>
|
||||||
|
<el-row :gutter="10">
|
||||||
|
<el-col :span="12"><doublePreventionCheck /> </el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<rectificationOfHiddenDangers />
|
||||||
</el-col>
|
</el-col>
|
||||||
|
</el-row> </el-card
|
||||||
|
></el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="mt-10" :gutter="10">
|
||||||
|
<el-col :span="12"> <trainingStatistics /> </el-col>
|
||||||
|
<el-col :span="12"><doublePrevention /></el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card>
|
<info />
|
||||||
<announcement />
|
<statistics class="mt-10" />
|
||||||
<calendar />
|
<waybill />
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,11 +33,19 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Count from "./components/count.vue";
|
import Count from "./components/count.vue";
|
||||||
import ListCheckType from "./components/list_check_type.vue";
|
import annualTraining from "./components/annualTraining.vue";
|
||||||
import RiskClassification from "./components/risk_classification.vue";
|
import doublePreventionCheck from "./components/doublePreventionCheck.vue";
|
||||||
import ChecklistCheck from "./components/checklist_check.vue";
|
import rectificationOfHiddenDangers from "./components/rectificationOfHiddenDangers.vue";
|
||||||
import Announcement from "./components/announcement.vue";
|
import trainingStatistics from "./components/trainingStatistics.vue";
|
||||||
import Calendar from "./components/calendar.vue";
|
import doublePrevention from "./components/doublePrevention.vue";
|
||||||
|
import info from "./components/info.vue";
|
||||||
|
import statistics from "./components/statistics.vue";
|
||||||
|
import waybill from "./components/waybill.vue";
|
||||||
|
|
||||||
|
// import RiskClassification from "./components/risk_classification.vue";
|
||||||
|
// import ChecklistCheck from "./components/checklist_check.vue";
|
||||||
|
// import Announcement from "./components/announcement.vue";
|
||||||
|
// import Calendar from "./components/calendar.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue