<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="value1" multiple placeholder="请选择" style="color: red">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="value2" multiple placeholder="请选择" style="color: red">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="value3" multiple placeholder="请选择" style="color: red">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="value4" multiple placeholder="请选择" style="color: red">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="value5" multiple placeholder="请选择" style="color: red">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select v-model="value6" multiple placeholder="请选择" style="color: red">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<el-form-item>
|
<el-radio-group v-model="radio" style="padding: 20px 0;">
|
<el-radio :label="1">按隐患部门</el-radio>
|
<el-radio :label="2">按专业</el-radio>
|
<el-radio :label="3">按级别</el-radio>
|
<el-radio :label="4">按检查类别</el-radio>
|
<el-radio :label="5">按检查单位（上级单位）</el-radio>
|
<el-radio :label="6">按检查单位（本部单位）</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-radio-group v-model="radio">
|
<el-radio :label="1">按隐患部门</el-radio>
|
<el-radio :label="2">按专业</el-radio>
|
<el-radio :label="3">按级别</el-radio>
|
<el-radio :label="4">按检查类别</el-radio>
|
<el-radio :label="5">按检查单位（上级单位）</el-radio>
|
<el-radio :label="6">按检查单位（本部单位）</el-radio>
|
</el-radio-group>
|
</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="close()"
|
>汇总</el-button>
|
<el-button class="btn" size="small" type="primary" @click="close()"
|
>导出Excel</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
<el-table
|
:data="tableData"
|
style="width: 100%">
|
<el-table-column align="center" label="众泰煤焦化-安全隐患台帐">
|
<el-table-column
|
prop="name"
|
label="隐患部门\隐患专业"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="province"
|
label="采掘"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="city"
|
label="生产"
|
width="120"
|
align="center">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="合计"
|
width="300"
|
align="center">
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
<div style="color: #c5021a;margin-top: 20px;">
|
<div>温馨提示：</div>
|
<div>点选可查询隐患详情。</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
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,
|
time: '',
|
tableData: [{
|
name: '财务部',
|
province: '1',
|
city: '4',
|
address: '1'
|
}, {
|
name: '党委副书记',
|
province: '0',
|
city: '2',
|
address: '0'
|
}, {
|
name: '众泰煤焦化',
|
province: '2',
|
city: '3',
|
address: '1'
|
}, {
|
name: '王小虎',
|
province: '3',
|
city: '9',
|
address: '2'
|
}]
|
}
|
}
|
}
|
</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;
|
}
|
.btn{
|
background-color: #034ea2;
|
border: 1px solid #034ea2;
|
}
|
</style>
|
