Merge branch 'master' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb
xuhaoyun
2 years ago
commit
8621a45b05
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<!-- 我的流程 -->
|
||||
<div>
|
||||
<div class="course_body">
|
||||
<div class="search_top">
|
||||
<div class="btn">
|
||||
<el-button @click="search_data">搜索</el-button>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</div>
|
||||
<el-form :model="search" class="search_top_form">
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model="search.course_select" @change="change_course">
|
||||
<el-option
|
||||
v-for="item in course_list"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.label"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="search.course_time"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键字">
|
||||
<el-input
|
||||
v-model="search.word"
|
||||
placeholder="请选择关键词"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="search_table">
|
||||
<el-table
|
||||
:data="table_data"
|
||||
:header-cell-style="table_header"
|
||||
:cell-style="{ background: 'revert', 'text-align': 'center' }"
|
||||
>
|
||||
<el-table-column prop="course_name" label="流程名称" width="420">
|
||||
</el-table-column>
|
||||
<el-table-column prop="create_time" label="创建时间" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_type" label="流程类型" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="course_status" label="流程状态" width="220">
|
||||
<template slot-scope="scope">
|
||||
<div :style="{ color: styleChange(scope.row.course_status) }">
|
||||
{{ scope.row.course_status }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="tips" label="当前节点" width="220">
|
||||
</el-table-column>
|
||||
<el-table-column prop="person" label="未操作者" width="280">
|
||||
</el-table-column>
|
||||
<el-table-column prop="operation" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="small"
|
||||
class="operation"
|
||||
@click="check_details(scope.row)"
|
||||
>详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<div class="table_pagination">
|
||||
<el-pagination
|
||||
:background="true"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[5, 10]"
|
||||
:pager-count="5"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNum"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "MyCourse",
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
course_select: "待审核",
|
||||
course_num: "1", // 表格查询待定入参
|
||||
course_time: [this.get_today(), this.get_tomorrow()],
|
||||
word: "",
|
||||
},
|
||||
course_list: [
|
||||
{ label: "待审核", value: "1" },
|
||||
{ label: "通过", value: "2" },
|
||||
{ label: "驳回", value: "3" },
|
||||
{ label: "处置中", value: "4" },
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
table_data: [
|
||||
{
|
||||
course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
|
||||
create_time: "2023-06-06 12:53:30",
|
||||
course_type: "防疫安全",
|
||||
course_status: "进行中",
|
||||
tips: "治安大队",
|
||||
person: "王伟、李勋勋",
|
||||
},
|
||||
{
|
||||
course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
|
||||
create_time: "2023-06-06 12:53:30",
|
||||
course_type: "防疫安全",
|
||||
course_status: "处置成功",
|
||||
tips: "治安大队",
|
||||
person: "王伟、李勋勋",
|
||||
},
|
||||
{
|
||||
course_name: "宁波市北越石化有限公司-核酸检测率-异常处置",
|
||||
create_time: "2023-06-06 12:53:30",
|
||||
course_type: "防疫安全",
|
||||
course_status: "处置失败",
|
||||
tips: "治安大队",
|
||||
person: "王伟、李勋勋",
|
||||
},
|
||||
],
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
change_course(val) {
|
||||
this.search.course_num = this.course_list.find((item) => {
|
||||
item.label === val;
|
||||
}).value;
|
||||
},
|
||||
// 查询
|
||||
search_data() {
|
||||
console.log("this.search.course_time", this.search.course_time);
|
||||
let param = {
|
||||
startTime:
|
||||
this.search.course_time == null
|
||||
? ""
|
||||
: this.dateConversion(this.search.course_time[0]),
|
||||
endTime:
|
||||
this.search.course_time == null
|
||||
? ""
|
||||
: this.dateConversion(this.search.course_time[1]),
|
||||
};
|
||||
console.log("param", param);
|
||||
},
|
||||
// 重置查询
|
||||
reset() {
|
||||
this.search.course_select = "待审核";
|
||||
this.search.course_num = "1";
|
||||
this.search.course_time = [this.get_today(), this.get_tomorrow()];
|
||||
this.search.word = "";
|
||||
this.search_data();
|
||||
},
|
||||
// 详情点击跳转
|
||||
check_details(val) {
|
||||
console.log(val);
|
||||
this.$emit("change_to_detail");
|
||||
},
|
||||
// 转换时间格式
|
||||
dateConversion(value) {
|
||||
let date = new Date(value);
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
let M = date.getMinutes();
|
||||
M = M < 10 ? "0" + M : M;
|
||||
let s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
let dateTime = y + "-" + m + "-" + d + " " + h + ":" + M + ":" + s;
|
||||
return dateTime;
|
||||
},
|
||||
// 获取当前时间
|
||||
get_today() {
|
||||
let date = new Date();
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let dateTime =
|
||||
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||
return dateTime;
|
||||
},
|
||||
// 获取明天时间
|
||||
get_tomorrow() {
|
||||
let date = new Date();
|
||||
let y = date.getFullYear();
|
||||
let m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
let d = date.getDate() + 1;
|
||||
d = d < 10 ? "0" + d : d;
|
||||
let dateTime =
|
||||
y + "-" + m + "-" + d + " " + "00" + ":" + "00" + ":" + "00";
|
||||
return dateTime;
|
||||
},
|
||||
// 表头样式
|
||||
table_header({ row, rowIndex }) {
|
||||
console.log(row);
|
||||
console.log(rowIndex);
|
||||
return {
|
||||
"text-align": "center", // 表头文字居中
|
||||
color: "#fff",
|
||||
border: "0.1px solid #3b4f5c",
|
||||
};
|
||||
},
|
||||
// 跟后端返回判断流程状态颜色
|
||||
styleChange(val) {
|
||||
switch (val) {
|
||||
case "进行中":
|
||||
return "#3eba75";
|
||||
// case "yellow":
|
||||
// return "#FDA722";
|
||||
case "处置成功":
|
||||
return "#2eb9ef";
|
||||
case "处置失败":
|
||||
return "#e55b5b";
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
this.pageNum = 1;
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
this.pageNum = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-table {
|
||||
// width: 96vw;
|
||||
height: 60vh;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 0.1px solid #3f5564;
|
||||
thead {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border: 0.1px solid #3f5564;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#284f49,
|
||||
#2f6363 5%,
|
||||
#233b38 80%
|
||||
) !important;
|
||||
|
||||
& th {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
/deep/ .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border: 0.1px solid #3f5564;
|
||||
}
|
||||
/deep/.el-button.operation {
|
||||
background-color: #182527;
|
||||
border: 0px;
|
||||
color: #2fabdc;
|
||||
}
|
||||
|
||||
/deep/.el-button.operation:hover,
|
||||
.el-button.operation:focus {
|
||||
background-color: #182527;
|
||||
border: 0px;
|
||||
color: #2fabdc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
}
|
||||
.course_body {
|
||||
height: 72vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
.search_top {
|
||||
width: 96vw;
|
||||
height: 5vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
/deep/.el-form {
|
||||
display: flex;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
margin-left: 0.5vw;
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 440px;
|
||||
}
|
||||
}
|
||||
.el-form-item__label {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
.el-form-item__content {
|
||||
.el-input__inner {
|
||||
// width: 300px;
|
||||
border-radius: 0px;
|
||||
border: 1px solid #3d505e;
|
||||
// border: 0.5px dashed;
|
||||
background: #283436;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 查询框点击颜色变化 */
|
||||
.el-input__inner:focus,
|
||||
.el-input__inner:hover {
|
||||
border-color: #1b3736;
|
||||
}
|
||||
.el-range-input {
|
||||
color: #fff;
|
||||
background: #283436;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-range-separator {
|
||||
color: #fff;
|
||||
width: 10%;
|
||||
}
|
||||
/deep/.el-input__icon.el-range__close-icon {
|
||||
display: none;
|
||||
}
|
||||
.btn {
|
||||
margin-left: 8px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.el-button {
|
||||
width: 70px;
|
||||
height: 4.1vh;
|
||||
border: 1px solid #4a6072;
|
||||
color: #fff;
|
||||
border-radius: 0px !important;
|
||||
background: #323f43;
|
||||
}
|
||||
.el-button:focus,
|
||||
.el-button:hover {
|
||||
color: #34e1b3;
|
||||
border: 2px solid #137868;
|
||||
background: url("~@/assets/companyFile/2121.png") no-repeat !important;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
}
|
||||
.search_table {
|
||||
width: 96vw;
|
||||
height: 67vh;
|
||||
// border: 0.1px solid #2f6363;
|
||||
}
|
||||
}
|
||||
.table_pagination {
|
||||
width: 96vw;
|
||||
height: 5vh;
|
||||
/deep/.el-input--suffix .el-input__inner {
|
||||
color: #fff;
|
||||
border: 0.1px solid #277f79;
|
||||
border-radius: 0px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
width: 5vw;
|
||||
// height: 2.6vh;
|
||||
// line-height: 2.6vh;
|
||||
}
|
||||
/deep/.el-input__icon {
|
||||
color: #fff;
|
||||
line-height: 2.6vh;
|
||||
height: 2.6vh;
|
||||
}
|
||||
/deep/.el-pagination {
|
||||
margin-left: 65%;
|
||||
margin-top: 2vh;
|
||||
.el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
.el-input__inner {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #277f79;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-prev {
|
||||
border-radius: 0px;
|
||||
border: 0.1px solid #277f79;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
border: 0.1px solid #277f79;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.btn-next {
|
||||
border: 0.1px solid #277f79;
|
||||
border-radius: 0px;
|
||||
background: #3c4b4a;
|
||||
color: #fff;
|
||||
}
|
||||
.el-pager {
|
||||
li {
|
||||
border: 0.1px solid #34a6a6;
|
||||
background: #3c4b4a !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<!-- 我的流程详情 -->
|
||||
<div>
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="表单信息" name="first">
|
||||
<MyCourseDetailForm ref="myCourseDetailForm"></MyCourseDetailForm>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流程图" name="second">流程图</el-tab-pane>
|
||||
<el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MyCourseDetailForm from "./myCourseDetailForm";
|
||||
export default {
|
||||
name: "MyCourseDetail",
|
||||
components:{
|
||||
MyCourseDetailForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: "first",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.el-tabs__active-bar.is-top {
|
||||
display: none;
|
||||
background: #33cccc;
|
||||
}
|
||||
/deep/.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
background: #5b748c;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px;
|
||||
// margin-right: 20px;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top.is-active {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-bottom: 4px solid #33cccc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
#3a5856,
|
||||
#3b746c
|
||||
) !important;
|
||||
}
|
||||
/deep/.el-tabs__item.is-top:focus,
|
||||
.el-tabs__item.is-top:hover {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
border-bottom: 4px solid #33cccc;
|
||||
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0),
|
||||
#3a5856,
|
||||
#3b746c
|
||||
) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,640 @@
|
||||
<!-- 指标表格 -->
|
||||
<template>
|
||||
<div class="display">
|
||||
<table>
|
||||
<tr class="table_title">
|
||||
<th class="table_title_one">一级指标</th>
|
||||
<th class="table_title_two">二级指标</th>
|
||||
<th class="table_title_three">三级指标</th>
|
||||
</tr>
|
||||
<!-- 防疫安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="5" @click="click_onelevel('3')">防疫安全</td>
|
||||
<td @click="click_twolevel('4')">疫苗接种数</td>
|
||||
<td @click="click_threelevel('5', '1')">疫苗接种数</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('7')">核酸检测率</td>
|
||||
<td @click="click_threelevel('8', '1')">核算检测率</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('9')">场所码数据</td>
|
||||
<td @click="click_threelevel('10', '1')">场所码异常数</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('11')" rowspan="2">中高风险返企数</td>
|
||||
<td @click="click_threelevel('12', '1')">境外人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('13', '1')">境内人员</td>
|
||||
</tr>
|
||||
<!-- 人员安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="14" @click="click_onelevel('14')">人员安全</td>
|
||||
<td rowspan="4" @click="click_twolevel('15')">流动人员</td>
|
||||
<td @click="click_threelevel('16', '1')">未登记人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('17', '1')">未注销人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('18', '1')">未变更人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('19', '1')">高危人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="7" @click="click_twolevel('20')">重点人员</td>
|
||||
<td @click="click_threelevel('21', '1')">重性精神病人</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('22', '1')">非访人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('23', '1')">退役重点人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('24', '1')">个人极端人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('25', '1')">前科人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('26', '1')">家暴人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('27', '1')">酗酒人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('28')">重点岗位人员</td>
|
||||
<td @click="click_threelevel('29', '1')">危险品领用、保管、使用人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('30', '1')">危险品技术资质人员</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('31')">专家人员</td>
|
||||
<td @click="click_threelevel('32', '1')">
|
||||
领域内有较高专业知识技术的专家、人才
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 消防安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="13" @click="click_onelevel('33')">消防安全</td>
|
||||
<td rowspan="3" @click="click_twolevel('34')">消防设施维护</td>
|
||||
<td @click="click_threelevel('35', '1')">设备录入率</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('36', '2')">配置合理性</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('37', '1')">日常保养及时率</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('38')">企业台账建设</td>
|
||||
<td @click="click_threelevel('39', '2')">必要资质</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('40', '2')">验收许可或建设许可</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('41', '2')">日常检查表</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('42')">消防制度执行</td>
|
||||
<td @click="click_threelevel('43', '1')">人员培训率</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('44', '2')">演习举办情况</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('45', '2')">管理层专业知晓程度</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="4" @click="click_twolevel('46')">消防事件发生</td>
|
||||
<td @click="click_threelevel('47', '1')">火灾事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('48', '1')">其他事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('49', '1')">消防违建</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('50', '1')">协助扑救</td>
|
||||
</tr>
|
||||
<!-- 危化运输安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="15" @click="click_onelevel('51')">危化运输安全</td>
|
||||
<td rowspan="2" @click="click_twolevel('52')">源头检查</td>
|
||||
<td @click="click_threelevel('53', '1')">区内企业评分</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('54', '1')">区外企业评分</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="5" @click="click_twolevel('55')">违章数据</td>
|
||||
<td @click="click_threelevel('56', '1')">违停</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('57', '1')">闯禁</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('58', '1')">超速</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('59', '1')">疲劳驾驶</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('60', '1')">未按车道行驶</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('61')">交通事故</td>
|
||||
<td @click="click_threelevel('62', '1')">经损事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('63', '1')">伤亡事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('64', '1')">泄漏事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('65')">行政/刑事案件</td>
|
||||
<td @click="click_threelevel('66', '2')">有无拘留、判刑</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('67')">企业整改</td>
|
||||
<td @click="click_threelevel('68', '1')">反馈整改完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('69', '1')">整改反馈未完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('70')">企业演习、培训</td>
|
||||
<td @click="click_threelevel('71', '1')">企业演习</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('72', '1')">集中培训学习</td>
|
||||
</tr>
|
||||
<!-- 列管物品安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="10" @click="click_onelevel('73')">列管物品安全</td>
|
||||
<td rowspan="2" @click="click_twolevel('74')">危险化学品</td>
|
||||
<td @click="click_threelevel('75', '1')">
|
||||
易制爆物品生产、购买、销售、储存、使用
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('76', '1')">
|
||||
剧毒物品生产、购买、销售、储存、使用
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('77')">放射源物品</td>
|
||||
<td @click="click_threelevel('78', '1')">放射源储存</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('79', '1')">放射源运输</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('80', '1')">放射源使用</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('81')">民爆物品</td>
|
||||
<td @click="click_threelevel('82', '1')">烟花爆竹运输、销售、燃放</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('83', '1')">炸药、雷管保管、运输、使用</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('84')">民用枪支管理</td>
|
||||
<td @click="click_threelevel('85', '1')">猎枪</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('86', '1')">竞技体育用枪</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('87', '1')">商业射击馆枪支</td>
|
||||
</tr>
|
||||
<!-- 内部治安安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="15" @click="click_onelevel('88')">内部治安安全</td>
|
||||
<td rowspan="4" @click="click_twolevel('89')">企业三防基础数据</td>
|
||||
<td @click="click_threelevel('90', '2')">企业保卫人员名单</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('91', '2')">企业物防设施清单</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('92', '2')">
|
||||
企业技防前端感知(人脸、车脸、重要部位视频监控)建设
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('93', '2')">企业技防设施连入平台情况</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('94')">
|
||||
企业各类规章制度、应急预案、应急演练
|
||||
</td>
|
||||
<td @click="click_threelevel('95', '2')">规章制度</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('96', '2')">应急预案</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('97', '2')">应急演练</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('98')">部门检查及系统研判</td>
|
||||
<td @click="click_threelevel('99', '2')">部门检查合格进行评分</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('100', '2')">
|
||||
部门检查不合格及有缺项的要求企业整改
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('101', '2')">
|
||||
应系统研判(设施过期及设施故障)
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('102')">企业整改</td>
|
||||
<td @click="click_threelevel('103', '1')">企业反馈整改完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('104', '1')">企业反馈整改未完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('105')">
|
||||
企业发生的案件及企业员工涉及的案件
|
||||
</td>
|
||||
<td @click="click_threelevel('106', '1')">
|
||||
企业发生被盗、被骗等各类案件
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('107', '1')">企业员工涉及的各类案件</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('108', '1')">企业员工涉及的信访等案件</td>
|
||||
</tr>
|
||||
<!-- 道路安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="13" @click="click_onelevel('109')">道路安全</td>
|
||||
<td rowspan="2" @click="click_twolevel('110')">源头检查</td>
|
||||
<td @click="click_threelevel('111', '1')">区内企业评分</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('112', '1')">区外企业评分</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="5" @click="click_twolevel('113')">违章数据</td>
|
||||
<td @click="click_threelevel('114', '1')">违停</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('115', '1')">闯禁</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('116', '1')">超速</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('117', '1')">未按车道行驶</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('118', '1')">闯红灯</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('119')">交通事故</td>
|
||||
<td @click="click_threelevel('120', '1')">经损事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('121', '1')">伤亡事故</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('122')">企业整改</td>
|
||||
<td @click="click_threelevel('123', '1')">反馈整改完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('124', '1')">反馈整改未完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('125')">企业周边交通设施检查</td>
|
||||
<td @click="click_threelevel('126', '1')">设施完善</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('127', '1')">设施缺失</td>
|
||||
</tr>
|
||||
<!-- 防攻击安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="16" @click="click_onelevel('128')">防攻击安全</td>
|
||||
<td rowspan="6" @click="click_twolevel('129')">企业人防达标情况</td>
|
||||
<td @click="click_threelevel('130', '2')">
|
||||
重要岗位人员是否进行安全背景调查
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('131', '2')">应急力量是否配备</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('132', '2')">是否安排人员24小时值班</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('133', '2')">是否安排巡逻防控力量</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('134', '2')">是否建立联防联动联治机制</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('135', '2')">是否定期开展实战演练</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('136')">企业物防达标情况</td>
|
||||
<td @click="click_threelevel('137', '2')">是否有实体防护设施</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('138', '2')">是否配备必要的防爆器械</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('139', '2')">
|
||||
车辆进出口是否安装车辆冲撞设施
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('140')">企业技防达标情况</td>
|
||||
<td @click="click_threelevel('141', '2')">
|
||||
是否全方位安装视频监控系统
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('142', '2')">是否安装访客登记系统</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('143', '2')">
|
||||
是否安装入侵和紧急报警系统
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('144')">企业整改情况</td>
|
||||
<td @click="click_threelevel('145', '1')">企业反馈完成整改</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('146', '1')">企业反馈未完成整改</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('147')">
|
||||
企业定期开展反恐实战演练、培训
|
||||
</td>
|
||||
<td @click="click_threelevel('148', '2')">是否定期开展反恐实战演练</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('149', '2')">是否定期开展反恐培训</td>
|
||||
</tr>
|
||||
<!-- 网络安全 -->
|
||||
<tr class="table_body">
|
||||
<td rowspan="10" @click="click_onelevel('150')">网络安全</td>
|
||||
<td rowspan="2" @click="click_twolevel('151')">漏洞整改</td>
|
||||
<td @click="click_threelevel('152', '1')">反馈整改完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('153', '1')">反馈整改未完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('154')">行政案件</td>
|
||||
<td @click="click_threelevel('155', '2')">是否有过行政处罚</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('156')">重大网络安全事件</td>
|
||||
<td @click="click_threelevel('157', '2')">是否发生过</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="3" @click="click_twolevel('158')">网站应急系统备案</td>
|
||||
<td @click="click_threelevel('159', '2')">网站备案</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('160', '2')">应用备案</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('161', '2')">应用评估</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_twolevel('162')">等保定级评审</td>
|
||||
<td @click="click_threelevel('163', '2')">等保定级评审完成/未完成</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td rowspan="2" @click="click_twolevel('164')">企业演习、培训</td>
|
||||
<td @click="click_threelevel('165', '2')">应急演练</td>
|
||||
</tr>
|
||||
<tr class="table_body">
|
||||
<td @click="click_threelevel('166', '2')">集中培训学习</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getIndexTable } from "@/api/systemManagement/safeIndex";
|
||||
import bus from "@/assets/js/eventBus.js";
|
||||
export default {
|
||||
name: "IndexTable",
|
||||
data() {
|
||||
return {
|
||||
display_data: {},
|
||||
one_index_three_level: [
|
||||
{ id: 5, levelIndexThree: "疫苗接种数" },
|
||||
{ id: 8, levelIndexThree: "核算检测率" },
|
||||
{ id: 10, levelIndexThree: "场所码异常数" },
|
||||
{ id: 12, levelIndexThree: "境外人员" },
|
||||
{ id: 13, levelIndexThree: "境内人员" },
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// table_header() {
|
||||
// return {
|
||||
// "text-align": "center", // 表头文字居中
|
||||
// color: "#fff",
|
||||
// };
|
||||
// },
|
||||
// 获取表格数据
|
||||
getData() {
|
||||
getIndexTable().then((res) => {
|
||||
console.log("res", res);
|
||||
this.display_data = res.data;
|
||||
});
|
||||
},
|
||||
// 一级指标点击事件
|
||||
click_onelevel(id) {
|
||||
let obj = document.querySelectorAll("td");
|
||||
let index = 0;
|
||||
if (id < 6) {
|
||||
index = id - 3;
|
||||
} else {
|
||||
index = id - 4;
|
||||
}
|
||||
obj.forEach((item) => {
|
||||
item.className = "";
|
||||
});
|
||||
obj[index].className = "lightcolor";
|
||||
const massage = {
|
||||
safeRuleId: id,
|
||||
level: "1",
|
||||
};
|
||||
this.$emit("back", massage);
|
||||
bus.$emit("send", massage); // 传给一级指标详情
|
||||
},
|
||||
// 二级点击事件
|
||||
click_twolevel(id) {
|
||||
let obj = document.querySelectorAll("td");
|
||||
let index = 0;
|
||||
if (id < 6) {
|
||||
index = id - 3;
|
||||
} else {
|
||||
index = id - 4;
|
||||
}
|
||||
obj.forEach((item) => {
|
||||
item.className = "";
|
||||
});
|
||||
obj[index].className = "lightcolor";
|
||||
const massage = {
|
||||
safeRuleId: id,
|
||||
level: "2",
|
||||
};
|
||||
this.$emit("back", massage);
|
||||
bus.$emit("send", massage); // 传给二级指标详情
|
||||
},
|
||||
// 三级点击事件
|
||||
click_threelevel(id, num) {
|
||||
const massage = {
|
||||
safeRuleId: id,
|
||||
level: "3",
|
||||
table_num: num,
|
||||
};
|
||||
let obj = document.querySelectorAll("td");
|
||||
console.log("obj", obj);
|
||||
let index = 0;
|
||||
if (id < 6) {
|
||||
index = id - 3;
|
||||
} else {
|
||||
index = id - 4;
|
||||
}
|
||||
obj.forEach((item) => {
|
||||
item.className = "";
|
||||
});
|
||||
obj[index].className = "lightcolor";
|
||||
this.$emit("back", massage);
|
||||
bus.$emit("send_three", massage); // 传给三级指标详情
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.display {
|
||||
width: 32vw;
|
||||
height: 51vh;
|
||||
margin-top: 1vh;
|
||||
overflow-y: scroll;
|
||||
border: 0.1px solid #4d8f89;
|
||||
}
|
||||
.display::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background-color: #5e666a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.display::-webkit-scrollbar-thumb {
|
||||
width: 5px;
|
||||
background-color: #3c4b4a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
table {
|
||||
width: 31.5vw;
|
||||
height: 50vh;
|
||||
border: 0.1px solid #4d8f89;
|
||||
.table_title {
|
||||
color: #fff;
|
||||
background: linear-gradient(to right, #284f49, #2f6363, #233b38);
|
||||
height: 4vh;
|
||||
.table_title_one {
|
||||
width: 9vw;
|
||||
}
|
||||
.table_title_two {
|
||||
width: 14vw;
|
||||
}
|
||||
.table_title_three {
|
||||
width: 17vw;
|
||||
}
|
||||
}
|
||||
.table_body {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
td {
|
||||
border: 0.1px solid #4d8f89;
|
||||
height: 4vh !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
td:hover {
|
||||
background: #3c4b4a;
|
||||
color: #54ffbe;
|
||||
}
|
||||
}
|
||||
}
|
||||
.display_title {
|
||||
display: flex;
|
||||
width: 40vw;
|
||||
height: 4vh;
|
||||
background: linear-gradient(to right, #284f49, #2f6363, #233b38);
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
.title_one {
|
||||
width: 9vw;
|
||||
}
|
||||
.title_two {
|
||||
width: 14vw;
|
||||
}
|
||||
.title_three {
|
||||
width: 17vw;
|
||||
}
|
||||
}
|
||||
.parent {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
border-bottom: 0.2px solid #4d8f89;
|
||||
// background: #243333;
|
||||
.son_one {
|
||||
width: 9vw;
|
||||
height: 20vh;
|
||||
line-height: 20vh;
|
||||
}
|
||||
.son_two {
|
||||
width: 14vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
div {
|
||||
height: 5vh;
|
||||
line-height: 5vh;
|
||||
}
|
||||
}
|
||||
.son_three {
|
||||
width: 17vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
div {
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lightcolor {
|
||||
background: #3c4b4a;
|
||||
color: #54ffbe;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue