<template>
|
<div>
|
<div class="whole_top">
|
<el-form ref="form" :inline="true" :model="form" label-width="100px">
|
<div class="top">
|
<div class="select">
|
<el-form-item>
|
<el-select v-model="form.ht_branch" multiple placeholder="请选择隐患部门" style="color: red">
|
<el-option
|
v-for="item in YHBMList"
|
:key="item.branch_name"
|
:label="item.branch_name"
|
:value="item.branch_name">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="form.ht_typesub" multiple placeholder="请选择隐患专业" style="color: red">
|
<el-option
|
v-for="item in YHLXList"
|
:key="item.value"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="form.ht_level" multiple placeholder="请选择隐患级别" style="color: red">
|
<el-option
|
v-for="item in YHJBList"
|
:key="item.value"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="form.checktype" multiple placeholder="请选择检查类型" style="color: red">
|
<el-option
|
v-for="item in JCLBList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="form.ht_community" multiple placeholder="请选择上级检查单位"
|
style="color: red">
|
<el-option
|
v-for="item in SJLBList"
|
:key="item.value"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="form.check_branch" multiple placeholder="请选择本部检查单位"
|
style="color: red">
|
<el-option
|
v-for="item in JCBMList"
|
:key="item.value"
|
:label="item.value"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-row>
|
<el-form-item label="统计类别">
|
<el-radio-group v-model="form.x_axis" style="padding: 0px 0;">
|
<el-radio label="ht_branch">按隐患部门</el-radio>
|
<el-radio label="ht_typesub">按专业</el-radio>
|
<el-radio label="ht_level">按级别</el-radio>
|
<el-radio label="checktype">按检查类别</el-radio>
|
<el-radio label="ht_community">按检查单位（上级单位）</el-radio>
|
<el-radio label="check_branch">按检查单位（本部单位）</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-row>
|
<el-row>
|
<el-form-item label="汇总类别">
|
<el-radio-group v-model="form.y_axis">
|
<el-radio label="ht_branch">按隐患部门</el-radio>
|
<el-radio label="ht_typesub">按专业</el-radio>
|
<el-radio label="ht_level">按级别</el-radio>
|
<el-radio label="checktype">按检查类别</el-radio>
|
<el-radio label="ht_community">按检查单位（上级单位）</el-radio>
|
<el-radio label="check_branch">按检查单位（本部单位）</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-row>
|
</div>
|
<div class="center" style="text-align: center;padding-top: 10px;">
|
<el-form-item label="检查时间：">
|
<el-date-picker
|
v-model="time"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button class="btn" size="small" type="primary" @click="queryData"
|
>汇总
|
</el-button>
|
<el-button class="btn" size="small" type="primary" @click="exportData()"
|
>导出Excel
|
</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
<el-table id="out-table"
|
:data="tableData"
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column align="center" label="众泰煤焦化-安全隐患台帐">
|
<el-table-column
|
prop="y_label"
|
label="隐患部门\隐患专业"
|
|
align="center">
|
</el-table-column>
|
<el-table-column
|
v-for="item in tableData[0].items"
|
:label="item.x_label"
|
align="center">
|
<template slot-scope="scope">
|
<span @click="showYHList(scope.row,item)" class="clickSpan">
|
{{ getRowNum(scope.row, item.x_label) }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
<div style="color: #c5021a;margin-top: 20px;">
|
<div>温馨提示：</div>
|
<div>点选可查询隐患详情。</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import {
|
initJCBM,
|
initYHLX,
|
initBC,
|
initJCLB,
|
initYHBM,
|
initYHJB,
|
initLlr,
|
initReformStatus
|
} from "@/api/sgyhpczl/initSelect";
|
|
import {danger_summary} from "@/api/sgyhpczl/summaryPotentialSafetyHzards";
|
import FileSaver from "file-saver";
|
import XLSX from "xlsx";
|
|
export default {
|
name: "index",
|
data() {
|
return {
|
options: [{
|
value: '选项1',
|
label: '安全环保部'
|
}, {
|
value: '选项2',
|
label: '生产技术部'
|
}, {
|
value: '选项3',
|
label: '企管部'
|
}, {
|
value: '选项4',
|
label: '消防保卫部'
|
}, {
|
value: '选项5',
|
label: '质检中心'
|
}],
|
value1: [],
|
value2: [],
|
value3: [],
|
value4: [],
|
value5: [],
|
value6: [],
|
radio: 3,
|
TJType: "ht_typesub",
|
HZType: "ht_branch",
|
time: [],
|
tableData: [
|
{}
|
],
|
form: {
|
x_axis: "ht_typesub",
|
y_axis: "ht_branch"
|
},
|
JCDWList: [{label: "众泰煤焦化", value: 0}, {label: "上级单位", value: 1}],
|
JCBMList: [],
|
YHLXList: [],
|
BCList: [],
|
JCLBList: [],
|
SJLBList: [],
|
YHBMList: [],
|
YHJBList: [],
|
YHZTList: [],
|
loading: false,
|
startDate: "",
|
endDate: "",
|
}
|
},
|
mounted() {
|
this.initYHLX()
|
this.initYHJB()
|
this.initBC()
|
this.initJCLB()
|
this.initLlr()
|
this.initYHBM()
|
this.initYHZT()
|
this.initJCBM()
|
this.initSJJCBM()
|
let startDate = this.getCurrentMonthFirst();
|
let endDate = this.getCurrentMonthLast();
|
this.time.push(startDate, endDate);
|
this.queryData();
|
|
},
|
methods: {
|
initYHLX() {
|
initYHLX().then(res => {
|
if (res.data.ok == 1) {
|
this.YHLXList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initYHJB() {
|
initYHJB().then(res => {
|
if (res.data.ok == 1) {
|
this.YHJBList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initYHZT() {
|
initReformStatus().then(res => {
|
if (res.data.ok == 1) {
|
this.YHZTList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initBC() {
|
initBC().then(res => {
|
if (res.data.ok == 1) {
|
this.BCList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initJCLB() {
|
initJCLB().then(res => {
|
if (res.data.ok == 1) {
|
this.JCLBList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initLlr() {
|
initLlr().then(res => {
|
if (res.data.ok == 1) {
|
this.llrList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initYHBM() {
|
initYHBM().then(res => {
|
if (res.data.ok == 1) {
|
this.YHBMList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initJCBM() {
|
initJCBM(0).then(res => {
|
if (res.data.ok == 1) {
|
this.JCBMList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
initSJJCBM() {
|
initJCBM(1).then(res => {
|
if (res.data.ok == 1) {
|
this.SJLBList = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
queryData() {
|
let requestData = {};
|
let selectData = []
|
for (const queryElement in this.form) {
|
if (queryElement != "x_axis" && queryElement != "y_axis") {
|
if (this.form[queryElement] != null && this.form[queryElement] != '') {
|
let searchCloumn = {
|
"field": queryElement,
|
"value": this.form[queryElement].join(','),
|
"type": "IN"
|
}
|
selectData.push(searchCloumn);
|
}
|
} else {
|
requestData[queryElement] = this.form[queryElement];
|
}
|
}
|
let timeSearchCloumn = {
|
"field": "check_date",
|
"value": this.time[0] + "至" + this.time[1],
|
"type": "DAT"
|
}
|
selectData.push(timeSearchCloumn)
|
requestData.query_condition = selectData;
|
this.loading = true;
|
danger_summary(requestData).then(res => {
|
this.loading = false;
|
if (res.data.ok == 1) {
|
this.tableData = res.data.data
|
} else {
|
this.$message({type: 'error', message: res.data.msg, duration: 3000})
|
}
|
})
|
},
|
getCurrentMonthFirst() {
|
var date = new Date();
|
date.setDate(1);
|
var month = parseInt(date.getMonth() + 1);
|
var day = date.getDate();
|
if (month < 10) {
|
month = '0' + month
|
}
|
if (day < 10) {
|
day = '0' + day
|
}
|
|
return date.getFullYear() + '-' + month + '-' + day;
|
},
|
getCurrentMonthLast() {
|
var date = new Date();
|
var currentMonth = date.getMonth();
|
var nextMonth = ++currentMonth;
|
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
|
var oneDay = 1000 * 60 * 60 * 24;
|
var lastTime = new Date(nextMonthFirstDay - oneDay);
|
var month = parseInt(lastTime.getMonth() + 1);
|
var day = lastTime.getDate();
|
if (month < 10) {
|
month = '0' + month
|
}
|
if (day < 10) {
|
day = '0' + day
|
}
|
return date.getFullYear() + '-' + month + '-' + day;
|
},
|
getRowNum(row, str) {
|
var data = row.items.find(n => n.x_label == str);
|
return data.value
|
},
|
|
showYHList(row, item) {
|
var searchData = {};
|
console.log(item)
|
if (item.x_label != null && item.x_label != "合计") {
|
searchData[this.form.x_axis] = item.x_label;
|
}
|
if (row.y_label != null && row.y_label != "合计") {
|
searchData[this.form.y_axis] = row.y_label;
|
}
|
let requestData = {};
|
let selectData = []
|
for (const queryElement in this.form) {
|
if (queryElement != "x_axis" && queryElement != "y_axis") {
|
if (this.form[queryElement] != null && this.form[queryElement] != '') {
|
let searchCloumn = {
|
"field": queryElement,
|
"value": this.form[queryElement].join(','),
|
"type": "IN"
|
}
|
selectData.push(searchCloumn);
|
}
|
} else {
|
requestData[queryElement] = this.form[queryElement];
|
}
|
}
|
searchData.query_condition = selectData;
|
this.$router.push({
|
path: "/summaryList",
|
query: {"searchData": searchData}
|
})
|
},
|
exportData() {
|
var xlsxParam = {raw: true};
|
/* 从表生成工作簿对象 */
|
var wb = XLSX.utils.table_to_book(
|
document.querySelector("#out-table"),
|
xlsxParam
|
);
|
/* 获取二进制字符串作为输出 */
|
var wbout = XLSX.write(wb, {
|
bookType: "xlsx",
|
bookSST: true,
|
type: "array",
|
});
|
try {
|
FileSaver.saveAs(
|
//Blob 对象表示一个不可变、原始数据的类文件对象。
|
//Blob 表示的不一定是JavaScript原生格式的数据。
|
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
|
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
|
new Blob([wbout], {type: "application/octet-stream"}),
|
//设置导出文件名称
|
"安全隐患汇总.xlsx"
|
);
|
} catch (e) {
|
if (typeof console !== "undefined") console.log(e, wbout);
|
}
|
return wbout;
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.top {
|
padding: 10px 5px;
|
background: #e4edf4;
|
}
|
|
/*下拉框图标隐藏*/
|
.whole_top .select /deep/ .el-input__suffix-inner .is-reverse {
|
display: none;
|
}
|
|
.whole_top .select /deep/ .el-input__suffix-inner .el-icon-arrow-up {
|
display: none;
|
}
|
|
/*设下拉框颜色*/
|
.select /deep/ .el-input__inner {
|
border: 1px solid #c5dbec;
|
font-weight: bold;
|
background: #dfeffc;
|
/*.el-icon-circle-close*/
|
}
|
|
.whole_top .select /deep/ .el-select .el-input__inner:focus {
|
color: #e6860b;
|
}
|
|
.select /deep/ .is-focus .el-select__tags-text {
|
color: #000000;
|
}
|
|
/*下拉框选值之后的样式*/
|
.select /deep/ .el-tag.el-tag--info {
|
background-color: transparent;;
|
border-color: transparent;
|
font-weight: bold;
|
color: #e6860b;
|
}
|
|
/*placeholder颜色修改*/
|
.whole_top ::-webkit-input-placeholder {
|
color: #000000;
|
}
|
|
.whole_top :-moz-placeholder {
|
color: #000000;
|
}
|
|
.whole_top ::-moz-placeholder {
|
color: #000000;
|
}
|
|
.whole_top :-ms-input-placeholder {
|
color: #000000;
|
}
|
|
/*日期*/
|
/deep/ .el-date-editor .el-range-separator {
|
width: auto;
|
}
|
|
.clickSpan:hover {
|
cursor: pointer;
|
}
|
|
.btn {
|
background-color: #034ea2;
|
border: 1px solid #034ea2;
|
}
|
</style>
|
