379 lines
12 KiB
Vue
379 lines
12 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="filter-specil">
|
||
<div class="specil-lable">
|
||
隐患级别：
|
||
</div>
|
||
<div class="specil-select">
|
||
<el-checkbox-group v-model="checkedCities" :disabled="hiddenleved" @change="handleCheckedCitiesChange">
|
||
<el-checkbox v-for="city in hiddenlevelList" :label="city" :key="city.BIANMA">{{ city.NAME }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="14">
|
||
<div class="filter-specil">
|
||
<div class="specil-lable">
|
||
隐患类型：
|
||
</div>
|
||
<div class="specil-select">
|
||
<el-checkbox-group v-model="hiddentypecheckedCities" :disabled="hiddentyped" @change="hiddentypeCheckedCitiesChange">
|
||
<el-checkbox v-for="city in hiddentypeList" :label="city" :key="city.BIANMA">{{ city.NAME }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<div style="text-align: right;">
|
||
<MutilSelectTree ref="treeSelect" :default-callback="false" :data="treeData" :check-strictly="true" :default-props="{children: 'nodes', label: 'name'}" :node-key="'id'" :clearable="false" placeholder="请选择" multiple @handleTreeSelected="handleTreeSelected" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="filter-specil">
|
||
<div class="specil-lable">
|
||
隐患状态：
|
||
</div>
|
||
<div class="specil-select">
|
||
<el-checkbox-group v-model="statecheckedCities" :disabled="stated" @change="stateCheckedCitiesChange">
|
||
<el-checkbox v-for="state in states" :label="state" :key="state.id">{{ state.name }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="filter-container" style="text-align: right;">
|
||
<div class="filter-group">
|
||
<div class="filter-lable">
|
||
发现日期：
|
||
</div>
|
||
<div class="filter-date">
|
||
<el-date-picker v-model="dates" type="datetimerange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
|
||
</div>
|
||
</div>
|
||
<div class="filter-group">
|
||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">
|
||
搜索
|
||
</el-button>
|
||
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="chongzhi">
|
||
重置
|
||
</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
|
||
<el-table ref="multipleTable" :data="varList" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="DEPARTMENT_ID" default-expand-all border tooltip-effect="dark" style="width: 100%">
|
||
<el-table-column v-if="varList.length>0" label="序号" type="index" />
|
||
<template v-for="(col) in retultlist">
|
||
<el-table-column :show-overflow-tooltip="true" :prop="col.dataItem" :label="col.dataName" :key="col.dataItem" sortable />
|
||
</template>
|
||
|
||
</el-table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Pagination from '@/components/Pagination'
|
||
import waves from '@/directive/waves'
|
||
import { requestFN } from '@/utils/request'
|
||
import { Message } from 'element-ui'
|
||
import MutilSelectTree from '@/components/MutilSelectTree'
|
||
const cityOptions = [{ id: '1', name: '未整改' }, { id: '3', name: '待验收' }, { id: '4', name: '已验收' }, { id: '-1', name: '已过期' }]
|
||
const hiddentypeOptions = []
|
||
const hiddenleveOptions = []
|
||
export default {
|
||
components: { Pagination, Message, MutilSelectTree },
|
||
directives: { waves },
|
||
data() {
|
||
return {
|
||
defaultProps: {
|
||
value: 'id',
|
||
children: 'nodes',
|
||
label: 'name',
|
||
disabled: true
|
||
},
|
||
checkAll: false,
|
||
checkedCities: [],
|
||
hiddenleves: hiddenleveOptions,
|
||
isIndeterminate: true,
|
||
hiddentypecheckAll: false,
|
||
hiddentypecheckedCities: [],
|
||
hiddentypes: hiddentypeOptions,
|
||
hiddentypecities: cityOptions,
|
||
hiddentypeisIndeterminate: true,
|
||
listLoading: true,
|
||
statecheckAll: false,
|
||
statecheckedCities: [],
|
||
states: cityOptions,
|
||
stateisIndeterminate: true,
|
||
hiddentyped: false,
|
||
hiddenleved: false,
|
||
stated: false,
|
||
add: false,
|
||
del: false,
|
||
edit: false,
|
||
listQuery: {
|
||
page: 1,
|
||
limit: 20
|
||
},
|
||
total: 0,
|
||
hiddenlevelList: [],
|
||
hiddentypeList: [],
|
||
treeData: [],
|
||
varList: [],
|
||
KEYWORDS: '',
|
||
dates: [],
|
||
retultlist: [],
|
||
HIDDENLEVEL: 'hiddenLevel0002',
|
||
ISQUALIFIED: '',
|
||
checkedIds: [],
|
||
decheckedIds: []
|
||
}
|
||
},
|
||
created() {
|
||
this.getDict()
|
||
this.getTreeData()
|
||
},
|
||
methods: {
|
||
|
||
// 获得部门树
|
||
getTreeData() {
|
||
requestFN(
|
||
'/department/listTree',
|
||
{}
|
||
).then((data) => {
|
||
this.treeData = JSON.parse(data.zTreeNodes)
|
||
this.decheckedIds.push(this.treeData[0].id)
|
||
this.$nextTick(() => {
|
||
this.$refs.treeSelect.loadCheckedKeys(this.decheckedIds)
|
||
})
|
||
|
||
this.treeData[0].disabled = true
|
||
this.checkedIds = []
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
handleTreeSelected(checkedIds, checkedData) {
|
||
console.log(111111111)
|
||
this.checkedIds = checkedIds
|
||
},
|
||
handleCheckAllChange(val) {
|
||
if (val) {
|
||
this.stated = true
|
||
this.hiddentyped = true
|
||
this.hiddentypecheckedCities = []
|
||
this.statecheckedCities = []
|
||
} else {
|
||
this.stated = false
|
||
this.hiddentyped = false
|
||
}
|
||
this.checkedCities = val ? this.hiddenlevelList : []
|
||
this.isIndeterminate = false
|
||
},
|
||
handleCheckedCitiesChange(value) {
|
||
const checkedCount = value.length
|
||
if (checkedCount > 0) {
|
||
this.stated = true
|
||
this.hiddentyped = true
|
||
this.hiddentypecheckedCities = []
|
||
this.statecheckedCities = []
|
||
} else {
|
||
this.stated = false
|
||
this.hiddentyped = false
|
||
}
|
||
this.checkAll = checkedCount === this.hiddenleves.length
|
||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.hiddenleves.length
|
||
},
|
||
hiddentypeCheckAllChange(val) {
|
||
if (val) {
|
||
this.stated = true
|
||
this.hiddenleved = true
|
||
this.checkedCities = []
|
||
this.statecheckedCities = []
|
||
} else {
|
||
this.stated = false
|
||
this.hiddenleved = false
|
||
}
|
||
this.hiddentypecheckedCities = val ? this.hiddentypes : []
|
||
this.hiddentypeisIndeterminate = false
|
||
},
|
||
hiddentypeCheckedCitiesChange(value) {
|
||
const checkedCount = value.length
|
||
if (checkedCount > 0) {
|
||
this.stated = true
|
||
this.hiddenleved = true
|
||
this.checkedCities = []
|
||
this.statecheckedCities = []
|
||
} else {
|
||
this.stated = false
|
||
this.hiddenleved = false
|
||
}
|
||
this.hiddentypecheckAll = checkedCount === this.hiddentypes.length
|
||
this.hiddentypeisIndeterminate = checkedCount > 0 && checkedCount < this.hiddentypes.length
|
||
}, stateCheckAllChange(val) {
|
||
if (val) {
|
||
this.hiddentyped = true
|
||
this.hiddenleved = true
|
||
this.checkedCities = []
|
||
this.hiddentypecheckedCities = []
|
||
} else {
|
||
this.hiddentyped = false
|
||
this.hiddenleved = false
|
||
}
|
||
this.statecheckedCities = val ? this.states : []
|
||
this.stateisIndeterminate = false
|
||
},
|
||
stateCheckedCitiesChange(value) {
|
||
const checkedCount = value.length
|
||
if (checkedCount > 0) {
|
||
this.hiddentyped = true
|
||
this.hiddenleved = true
|
||
this.checkedCities = []
|
||
this.hiddentypecheckedCities = []
|
||
} else {
|
||
this.hiddentyped = false
|
||
this.hiddenleved = false
|
||
}
|
||
this.statecheckAll = checkedCount === this.states.length
|
||
this.stateisIndeterminate = checkedCount > 0 && checkedCount < this.states.length
|
||
},
|
||
// 判断按钮权限，用于是否显示按钮
|
||
hasButton() {
|
||
var keys = 'hidden:add,hidden:del,hidden:edit,toExcel'
|
||
requestFN(
|
||
'/head/hasButton',
|
||
{
|
||
keys: keys
|
||
}
|
||
).then((data) => {
|
||
this.add = data.hiddenfhadminadd
|
||
this.del = data.hiddenfhadmindel
|
||
this.edit = data.hiddenfhadminedit
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
// 获取列表
|
||
getList() {
|
||
this.listLoading = true
|
||
|
||
var STARTTIME = ''
|
||
var ENDTIME = ''
|
||
if (this.dates) {
|
||
STARTTIME = this.dates[0]
|
||
ENDTIME = this.dates[1]
|
||
}
|
||
if (this.checkedCities.length > 0 || this.hiddentypecheckedCities.length > 0 || this.statecheckedCities.length > 0) {
|
||
console.log(this.checkedIds)
|
||
requestFN(
|
||
'/statistics/gostatistics',
|
||
{
|
||
KEYWORDS: this.KEYWORDS,
|
||
DISPOSESTATE: '2',
|
||
STARTTIME: STARTTIME,
|
||
ENDTIME: ENDTIME,
|
||
checkedCities: JSON.stringify(this.checkedCities),
|
||
hiddentypecheckedCities: JSON.stringify(this.hiddentypecheckedCities),
|
||
statecheckedCities: JSON.stringify(this.statecheckedCities),
|
||
checkedIds: JSON.stringify(this.checkedIds),
|
||
tm: new Date().getTime()
|
||
}
|
||
).then((data) => {
|
||
this.listLoading = false
|
||
this.varList = data.varList
|
||
this.retultlist = data.retultlist
|
||
|
||
this.hasButton()
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
} else {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请选择统计项'
|
||
})
|
||
}
|
||
},
|
||
// 获取数据字典数据
|
||
getDict() {
|
||
requestFN(
|
||
'dictionaries/getLevels?tm=' + new Date().getTime(),
|
||
{
|
||
DICTIONARIES_ID: '5e7cf8620ba54ad89719d0be62133c7a'
|
||
}
|
||
).then((data) => {
|
||
this.hiddenlevelList = data.list
|
||
this.hiddenleves = []
|
||
for (var i = 0; i < data.list.length; i++) {
|
||
this.hiddenleves.push(data.list[i].NAME)
|
||
}
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
|
||
requestFN(
|
||
'dictionaries/getLevels?tm=' + new Date().getTime(),
|
||
{
|
||
DICTIONARIES_ID: '3babc15144444bdc8d763d0af2bdfff6'
|
||
}
|
||
).then((data) => {
|
||
this.hiddentypeList = data.list
|
||
this.hiddentypes = []
|
||
for (var i = 0; i < data.list.length; i++) {
|
||
this.hiddentypes.push(data.list[i].NAME)
|
||
}
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
},
|
||
chongzhi() {
|
||
this.$refs.treeSelect.handleClear()
|
||
|
||
console.log('==============================' + this.decheckedIds)
|
||
this.$nextTick(() => {
|
||
this.$refs.treeSelect.loadCheckedKeys(this.decheckedIds)
|
||
})
|
||
this.checkedIds = []
|
||
this.checkedCities = []
|
||
this.statecheckedCities = []
|
||
this.hiddentypecheckedCities = []
|
||
|
||
this.hiddenleved = false
|
||
this.stated = false
|
||
this.hiddentyped = false
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.filter-specil {
|
||
// height: 32px;
|
||
// line-height: 32px;
|
||
.specil-lable {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
font-size: 13px;
|
||
line-height: 32px;
|
||
|
||
color: #4b4b4b;
|
||
}
|
||
.specil-select {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
// border: 1px solid red;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
.filter-container .filter-group:last-child {
|
||
padding-right: 0px;
|
||
}
|
||
</style>
|