安全隐患汇总-查看隐患单

13937891274

2022-05-18 34fec9feefe645cfe22d467ddff915f5198d1586

安全隐患汇总-查看隐患单

 src/views/summaryPotentialSafetyHzards/index.vue

@@ -1,13 +1,249 @@
<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"
    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>