zhzf/client/src/views/dtsjygl/zfsjzbb.vue

304 lines
12 KiB
Vue
Raw Normal View History

<template>
<browser :component-loading="componentLoading"
ref="broTable"
:api-config="apiConfig"
:table-config="tableConfig"
:permissions="permissions"
:dialog-config="dialogConfig"
:custom-query="true"
@custom-query="handleQuery"
:actions="actions"
@update:dialog-config="dialogConfig = $event">
<template #queryPanel>
<el-form label-width="120px" :model="queryParams">
<el-row class="query-condition">
<el-col :span="6">
<el-form-item label="统计周" prop="fillUnit">
<el-date-picker
v-model="queryParams.firstOfWeek"
type="week"
value-format="YYYY-MM-DD"
placeholder="选择周">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<!-- 主表列 -->
<el-table-column header-align="center" align="center" prop="district" label="执法单位" min-width="90"/>
<el-table-column header-align="center" align="center" prop="statisticDate" label="统计数据" min-width="100"/>
<el-table-column header-align="center" align="center" prop="hylb" label="行业领域" min-width="200"/>
<el-table-column header-align="center" align="center" prop="qys" label="监管企业数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="jcqysl" label="执法检查企业数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="jccsl" label="执法检查次数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="wfxwsl" label="发现违法行为数量" min-width="140"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="lasl" label="行政立案数量" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="lajss" label="立案家数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="yasfs" label="一案双罚数量" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" label="行政处罚金额(万元)" min-width="120">
<el-table-column header-align="center" align="center" prop="fkze" label="罚款总额" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="cfqy" label="处罚企业" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="cfgr" label="处罚个人" min-width="120"
class-name="can-click"/>
</el-table-column>
<el-table-column header-align="center" align="center" label="行刑衔接情况" min-width="120">
<el-table-column header-align="center" align="center" prop="yjajs" label="移交案件数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="sjrys" label="涉及人员数" min-width="120"
class-name="can-click"/>
</el-table-column>
<el-table-column header-align="center" align="center" label="约谈情况" min-width="120">
<el-table-column header-align="center" align="center" prop="yts" label="约谈企业数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="ytrs" label="约谈人员数" min-width="120"
class-name="can-click"/>
</el-table-column>
<el-table-column header-align="center" align="center" prop="" label="通报情况" min-width="120">
<el-table-column header-align="center" align="center" prop="tbs" label="通报企业数" min-width="120"
class-name="can-click"/>
<el-table-column header-align="center" align="center" prop="tbrs" label="通报人员数" min-width="120"
class-name="can-click"/>
</el-table-column>
<el-table-column header-align="center" align="center" prop="tczds" label="责令停产整顿数量" min-width="140"
class-name="can-click"/>
<template #dialogContent="{ dialogConfig: dc }">
<el-dialog :open="dc.show" :title="dc.title" :type="dc.type" v-if="dc.show" :show-footer="false"
@update:open="dc.show = false">
<Zfjcqysldetail :dialog-data="dc.data" :tag="tag"/>
</el-dialog>
</template>
<template #dialog>
<el-dialog :open="dialogConfig1.show" :title="dialogConfig1.title" type="max" v-if="dialogConfig1.show"
:show-footer="false" @update:open="dialogConfig1.show = false">
<zfjccssldetail :tag="tag" :dialog-data="dialogConfig1.data"/>
</el-dialog>
</template>
<template>
<el-dialog :open="dialogConfig2.show" type="max" :title="dialogConfig2.title" v-if="dialogConfig2.show"
:show-footer="false" @update:open="dialogConfig2.show = false">
<zflacssldetail :dialog-data="dialogConfig2.data"/>
</el-dialog>
</template>
<template>
<el-dialog :open="dialogConfig3.show" type="max" :title="dialogConfig3.title" v-if="dialogConfig3.show"
:show-footer="false" @update:open="dialogConfig3.show = false">
<zflaqkdetail :dialog-data="dialogConfig3.data"/>
</el-dialog>
</template>
</browser>
</template>
<script setup>
import {reactive, toRefs, getCurrentInstance, watch, computed, ref} from 'vue'
import Browser from '@/components/Browser.vue'
import {useUserStore} from '@/stores/modules/user'
import statisticsApi from '@/api/lawenforcement/Statistics.js'
import moment from 'moment'
import ElDialog from "@/components/ElDialog/index.vue";
import Zfjcqysldetail from "@pages/dtsjygl/zfjcqysldetail.vue";
import zfjccssldetail from "@pages/dtsjygl/zfjccssldetail.vue";
import zflacssldetail from "@pages/dtsjygl/zflacssldetail.vue";
import zflaqkdetail from "@pages/dtsjygl/zflaqkdetail.vue";
const userStore = useUserStore()
const state = reactive({
componentLoading: false,
permissions: {
query: true,
add: false,
modify: false,
detail: false,
delete: false,
importFile: false,
exportFile: true,
exportSelectFile: false,
downloadTemp: false,
},
tableConfig: {
tableId: 'zfsjzbbTableId',
tableLoading: false,
usePage: false,
multipleSelect: false,
hasControlColumn: false,
controlWidth: '150',
cellClick: caseEventClick,
spanMethod: objectSpanMethod
},
apiConfig: {
tableLoading: false,
api: statisticsApi,
modelId: 'enterpriseId',
},
dialogConfig: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
dialogConfig1: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
dialogConfig2: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
dialogConfig3: {
show: false,
mode: 'detail',
loading: false,
data: {},
actions: {},
},
actions: {
query: handleQuery,
exportData: handleExport
},
queryParams: {
period: 'week',
firstOfWeek: moment().weekday(1).format('YYYY-MM-DD'),
statisticDate: []
},
tag: ''
})
function handleQuery() {
queryParams.value.statisticDate[0] = queryParams.value.firstOfWeek
queryParams.value.statisticDate[1] = moment(queryParams.value.firstOfWeek).add(6, 'days').format('YYYY-MM-DD')
tableConfig.value.tableLoading = true
apiConfig.value.api.statisticByWeekForm(queryParams.value).then(res => {
if (res.success) {
tableConfig.value.tableData = res
tableConfig.value.tableLoading = false
}
})
}
function caseEventClick(row, column, cell, event) {
const colProp = column.property
if (colProp === "qys" && row[colProp] > 0) {
tag.value = 'jgqy'
let query = Object.assign(queryParams.value, {industryType: row.industry_type})
dialogConfig.value.data = query
dialogConfig.value.show = true
dialogConfig.value.mode = 'detail'
dialogConfig.value.title = '监管企业'
}
if (colProp === "jcqysl" && row[colProp] > 0) {
tag.value = 'jcqyszbb'
let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
dialogConfig.value.data = query
dialogConfig.value.show = true
dialogConfig.value.mode = 'detail'
dialogConfig.value.title = '检查企业'
}
if (colProp === "jccsl" && row[colProp] > 0) {
tag.value = 'jccsszbb'
let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
dialogConfig1.value.data = query
dialogConfig1.value.show = true
dialogConfig1.value.mode = 'detail'
dialogConfig1.value.title = '检查次数详情'
}
if (colProp === "lajss" && row[colProp] > 0) {
tag.value = 'lajsszbb'
let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
dialogConfig.value.data = query
dialogConfig.value.show = true
dialogConfig.value.mode = 'detail'
dialogConfig.value.title = '立案企业'
}
if (colProp === "lasl" && row[colProp] > 0) {
tag.value = 'laslzbb'
let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
dialogConfig2.value.data = query
dialogConfig2.value.show = true
dialogConfig2.value.mode = 'detail'
dialogConfig2.value.title = '立案数量详情'
}
if ((colProp === "wfxwsl" && row[colProp] > 0) || (colProp === "yasfs" && row[colProp] > 0) || (colProp === "fkze" && row[colProp] > 0) || (colProp === "cfqy" && row[colProp] > 0)
|| (colProp === "wszs" && row[colProp] > 0) || (colProp === "xcclcss" && row[colProp] > 0) || (colProp === "zlxqzgs" && row[colProp] > 0)
|| (colProp === "cfgr" && row[colProp] > 0) || (colProp === "yjajs" && row[colProp] > 0) || (colProp === "sjrys" && row[colProp] > 0)
|| (colProp === "yts" && row[colProp] > 0) || (colProp === "ytrs" && row[colProp] > 0) || (colProp === "tbs" && row[colProp] > 0)
|| (colProp === "tbrs" && row[colProp] > 0) || (colProp === "tczds" && row[colProp] > 0)) {
let query = Object.assign(queryParams.value, {industryType: row.industry_type, statisticDate: row.tjsjd})
dialogConfig3.value.data = query
dialogConfig3.value.show = true
dialogConfig3.value.mode = 'detail'
dialogConfig3.value.title = '填报详情'
}
}
function objectSpanMethod({row, column, rowIndex, columnIndex}) {
let rowCountWeek = row.rowCountWeek === undefined ? 0 : row.rowCountWeek
let rowCountAll = row.rowCountAll === undefined ? 0 : row.rowCountAll
if (columnIndex === 0) {
if (rowIndex === 0) {
return {rowspan: rowCountWeek + rowCountAll, colspan: 1}
} else {
return {rowspan: 0, colspan: 0}
}
}
if (columnIndex === 1) {
if (rowIndex === 0) {
return {rowspan: rowCountWeek, colspan: 1}
} else if (rowIndex === rowCountWeek) {
return {rowspan: rowCountAll, colspan: 1}
} else {
return {rowspan: 0, colspan: 0}
}
}
}
const {
componentLoading,
queryParams,
permissions,
tableConfig,
apiConfig,
dialogConfig,
dialogConfig1,
dialogConfig2,
dialogConfig3,
actions,
tag
} = toRefs(state)
const broTable = ref(null)
function handleExport() {
broTable.value.busiTable.exportExcelFileForCurrentPage(tableConfig.value.tableId, '执法数据周报表')
}
</script>
<style lang="scss" scoped>
:deep(.el-table) {
.can-click {
cursor: pointer;
color: #126eee;
}
}
</style>