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>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="9">
|
||||
<el-card>
|
||||
<div class="flex">
|
||||
<div class="img">
|
||||
<img src="/src/assets/images/index/icon1.png" alt="" />
|
||||
</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 v-for="(item, index) in data.countlist" :key="index" :span="4">
|
||||
<div class="wrap">
|
||||
<div class="num">{{ item.num }}</div>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getHiddenCount, getMemoryUsage } from "@/request/index.js";
|
||||
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({
|
||||
hidCount: {
|
||||
dzg: 0,
|
||||
yys: 0,
|
||||
ycq: 0,
|
||||
},
|
||||
riskCount: {
|
||||
cnzfx: 0,
|
||||
idcount: 0,
|
||||
unitcount: 0,
|
||||
},
|
||||
memoryUsage: {
|
||||
total_usage: 0,
|
||||
},
|
||||
countlist: [
|
||||
{
|
||||
num: 456321,
|
||||
title: "风险单元",
|
||||
},
|
||||
{
|
||||
num: 456321,
|
||||
title: "辨识部位",
|
||||
},
|
||||
{
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.el-col-4 {
|
||||
.wrap {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
border-image: linear-gradient(to bottom, #214e74, #25417a) 1 stretch;
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #087cca;
|
||||
}
|
||||
|
||||
div:not(:first-child) {
|
||||
cursor: pointer;
|
||||
.title {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) .wrap .num {
|
||||
color: #087cca;
|
||||
}
|
||||
|
||||
.countup-wrap {
|
||||
padding-top: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
&:nth-child(3) .wrap .num {
|
||||
color: #d19312;
|
||||
}
|
||||
|
||||
&:nth-child(6) .wrap .num {
|
||||
color: #aa0608;
|
||||
}
|
||||
}
|
||||
</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-col :span="18">
|
||||
<count />
|
||||
<el-row class="mt-10">
|
||||
<el-col :span="24">
|
||||
<list-check-type />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="mt-10" :gutter="10">
|
||||
<el-row :gutter="10" class="mt-10">
|
||||
<el-col :span="10">
|
||||
<risk-classification />
|
||||
<annualTraining />
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<checklist-check />
|
||||
</el-col>
|
||||
<el-card>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="12"><doublePreventionCheck /> </el-col>
|
||||
<el-col :span="12">
|
||||
<rectificationOfHiddenDangers />
|
||||
</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-col>
|
||||
<el-col :span="6">
|
||||
<el-card>
|
||||
<announcement />
|
||||
<calendar />
|
||||
</el-card>
|
||||
<info />
|
||||
<statistics class="mt-10" />
|
||||
<waybill />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -29,11 +33,19 @@
|
|||
|
||||
<script setup>
|
||||
import Count from "./components/count.vue";
|
||||
import ListCheckType from "./components/list_check_type.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";
|
||||
import annualTraining from "./components/annualTraining.vue";
|
||||
import doublePreventionCheck from "./components/doublePreventionCheck.vue";
|
||||
import rectificationOfHiddenDangers from "./components/rectificationOfHiddenDangers.vue";
|
||||
import trainingStatistics from "./components/trainingStatistics.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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue