src/views/toCarryOutLegislativeReforms/components/queryForm.vue
@@ -1,52 +1,145 @@ <template> <div> <div class="search-form"> <el-form :inline="true" :model="formData" class="demo-form-inline"> <el-form :inline="true" :model="formData" class="demo-form-inline" > <el-form-item label="交办单号:"> <el-input v-model="formData.allocationNum" placeholder="请输入单号" size="small" clearable /> <el-input v-model="formData.allocationNum" placeholder="请输入单号" size="small" clearable /> </el-form-item> <el-form-item label="开始时间:"> <el-date-picker v-model="formData.startTime" style="width:92%" size="small" value-format="yyyy-MM-dd" type="date" placeholder="开始日期" /> <el-date-picker v-model="formData.startTime" style="width:92%" size="small" value-format="yyyy-MM-dd" type="date" placeholder="开始日期" /> </el-form-item> <el-form-item label="结束时间:"> <el-date-picker v-model="formData.endTime" style="width:92%" size="small" value-format="yyyy-MM-dd" type="date" placeholder="结束时间" /> <el-date-picker v-model="formData.endTime" style="width:92%" size="small" value-format="yyyy-MM-dd" type="date" placeholder="结束时间" /> </el-form-item> <el-form-item label="责任主体:" class="rddd"> <el-select v-model="formData.unitId" size="small" clearable multiple collapse-tags placeholder="请选择"> <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" /> </el-select> <el-form-item label="责任主体:" > <el-cascader size="small" collapse-tags class="searchUid" :show-all-levels="false" :options="unitList" :props="{ multiple: true, value:'unitId',label:'unitName',children:'children'}" @change="changeUid" /> </el-form-item> <el-form-item label="污染分类:"> <el-select v-model="formData.polluteType" size="small" clearable multiple collapse-tags placeholder="请选择"> <el-option v-for="item in polluteList" :key="item.dataKey" :label="item.dataValue" :value="item.dataKey" /> <el-select v-model="formData.polluteType" size="small" clearable multiple collapse-tags placeholder="请选择" > <el-option v-for="item in polluteList" :key="item.dataKey" :label="item.dataValue" :value="item.dataKey" /> </el-select> </el-form-item> <el-form-item label="排查方式:"> <el-select v-model="formData.investigationType" size="small" clearable placeholder="请选择"> <el-option v-for="item in Dic.investigationEnum" :key="item.value" :label="item.name" :value="item.value" /> <el-select v-model="formData.investigationType" size="small" clearable placeholder="请选择" > <el-option v-for="item in Dic.investigationEnum" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="整改类型:"> <el-select v-model="formData.changeType" placeholder="请选择" clearable size="small"> <el-option v-for="item in Dic.changeEnum" :key="item.value" :label="item.name" :value="item.value" /> <el-select v-model="formData.changeType" placeholder="请选择" clearable size="small" > <el-option v-for="item in Dic.changeEnum" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="流程状态:"> <el-select v-model="formData.state" size="small" clearable multiple collapse-tags placeholder="请选择" @change="replacePerChange($event)"> <el-option v-for="item in Dic.allocationApproveEnum" :key="item.value" :label="item.name" :value="item.value" /> <el-select v-model="formData.state" size="small" clearable multiple collapse-tags placeholder="请选择" @change="replacePerChange($event)" > <el-option v-for="item in Dic.allocationApproveEnum" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> <el-form-item label="是否作废:"> <el-select v-model="formData.isInvalid" placeholder="请选择" clearable size="small" @change="replaceIsInvalid($event)"> <el-option v-for="item in Dic.yesOrNo" :key="item.value" :label="item.name" :value="item.value" /> <el-select v-model="formData.isInvalid" placeholder="请选择" clearable size="small" @change="replaceIsInvalid($event)" > <el-option v-for="item in Dic.yesOrNo" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="small" @click="onSubmit">查询</el-button> <el-button type="primary" size="small" @click="onSubmit" > 查询 </el-button> <!-- <el-button type="primary" size="small" @click="handleAdd">新建</el-button> --> </el-form-item> </el-form> @@ -59,7 +152,7 @@ props: { searchType: { type: String, default: '' } }, data() { data () { return { formData: { isInvalid: null, @@ -73,22 +166,45 @@ } }, created() { created () { this.getUnitList() this.formData.isInvalid = 0 this.getContaminateList() }, methods: { changeUid (val) { this.formData.unitId = this.uniqueArrayReduce(val) }, uniqueArrayReduce (arrays) { return arrays.reduce((acc, curr) => { return acc.concat(curr.filter(item => !acc.includes(item))) }, []) }, removeEmptyArrays (obj) { if (Array.isArray(obj)) { return obj .map(item => this.removeEmptyArrays(item)) // 递归处理每个元素 .filter(item => !Array.isArray(item) || item.length > 0) // 过滤空数组 } else if (typeof obj === 'object' && obj !== null) { Object.keys(obj).forEach(key => { obj[key] = this.removeEmptyArrays(obj[key]) // 递归处理对象属性 if (Array.isArray(obj[key]) && obj[key].length === 0) { delete obj[key] // 移除空数组属性 } }) } return obj }, // 获取责任单位list getUnitList() { getUnitList () { this.$request({ url: '/allocation/unit', url: '/allocation/unitQuery', method: 'get' }).then(res => { this.unitList = res.data this.unitList = this.removeEmptyArrays(res.data) }) }, getContaminateList() { getContaminateList () { this.$request({ url: '/allocation/contaminate', method: 'get' @@ -96,18 +212,18 @@ this.polluteList = res.data }) }, replaceIsInvalid(val) { replaceIsInvalid (val) { this.formData.isInvalid = val this.$forceUpdate() }, replacePerChange(val) { replacePerChange (val) { this.$forceUpdate() }, onSubmit() { onSubmit () { console.log('formData', this.formData) this.$emit('handleSearch', this.formData) }, handleAdd() { handleAdd () { this.$emit('handleAdd', '12122') } } @@ -122,7 +238,7 @@ right: 20; } /deep/ .el-form-item__content { width: auto; width: 214px; } } /deep/.el-form-item__label { @@ -131,4 +247,5 @@ /deep/.el-form-item { margin-bottom: 5px; } </style> src/views/toCarryOutLegislativeReforms/delay/componets/queryForm.vue
@@ -1,9 +1,18 @@ <template> <div> <div class="search-form"> <el-form :inline="true" :model="formData" class="demo-form-inline"> <el-form :inline="true" :model="formData" class="demo-form-inline" > <el-form-item label="交办单号:"> <el-input v-model="formData.allocationNum" placeholder="请输入单号" size="small" clearable /> <el-input v-model="formData.allocationNum" placeholder="请输入单号" size="small" clearable /> </el-form-item> <el-form-item label="开始时间:"> @@ -15,7 +24,6 @@ type="date" placeholder="开始日期" /> </el-form-item> <el-form-item label="结束时间:"> <el-date-picker @@ -28,18 +36,25 @@ /> </el-form-item> <el-form-item label="责任主体:"> <el-select v-model="formData.unitId" size="small" clearable placeholder="请选择"> <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" /> </el-select> <el-form-item label="责任主体:" > <el-cascader size="small" collapse-tags :show-all-levels="false" :options="unitList" :props="{ multiple: true, value:'unitId',label:'unitName',children:'children'}" @change="changeUid" /> </el-form-item> <el-form-item label="污染分类:"> <el-select v-model="formData.polluteType" size="small" clearable placeholder="请选择"> <el-select v-model="formData.polluteType" size="small" clearable placeholder="请选择" > <el-option v-for="item in polluteList" :key="item.dataKey" @@ -49,7 +64,12 @@ </el-select> </el-form-item> <el-form-item label="整改类型:"> <el-select v-model="formData.changeType" placeholder="请选择" clearable size="small"> <el-select v-model="formData.changeType" placeholder="请选择" clearable size="small" > <el-option v-for="item in Dic.changeEnum" :key="item.value" @@ -59,7 +79,12 @@ </el-select> </el-form-item> <el-form-item label="审批状态:"> <el-select v-model="formData.state" placeholder="请选择" clearable size="small"> <el-select v-model="formData.state" placeholder="请选择" clearable size="small" > <el-option v-for="item in Dic.allocationExtensionApproveEnum" :key="item.value" @@ -69,8 +94,21 @@ </el-select> </el-form-item> <el-form-item> <el-button type="primary" size="small" @click="onSubmit">查询</el-button> <el-button v-if="searchType==='reform'" type="primary" size="small" @click="handleAdd">新建</el-button> <el-button type="primary" size="small" @click="onSubmit" > 查询 </el-button> <el-button v-if="searchType==='reform'" type="primary" size="small" @click="handleAdd" > 新建 </el-button> </el-form-item> </el-form> </div> @@ -82,7 +120,7 @@ props: { searchType: { type: String, default: '' } }, data() { data () { return { formData: {}, unitList: [], @@ -93,22 +131,46 @@ } }, created() { created () { this.getUnitList() this.getContaminateList() console.log('searchType', this.searchType) }, methods: { // 获取责任单位list getUnitList() { changeUid (val) { this.formData.unitId = this.uniqueArrayReduce(val) }, uniqueArrayReduce (arrays) { return arrays.reduce((acc, curr) => { return acc.concat(curr.filter(item => !acc.includes(item))) }, []) }, removeEmptyArrays (obj) { if (Array.isArray(obj)) { return obj .map(item => this.removeEmptyArrays(item)) // 递归处理每个元素 .filter(item => !Array.isArray(item) || item.length > 0) // 过滤空数组 } else if (typeof obj === 'object' && obj !== null) { Object.keys(obj).forEach(key => { obj[key] = this.removeEmptyArrays(obj[key]) // 递归处理对象属性 if (Array.isArray(obj[key]) && obj[key].length === 0) { delete obj[key] // 移除空数组属性 } }) } return obj }, // 获取责任单位list getUnitList () { this.$request({ url: '/allocation/unit', url: '/allocation/unitQuery', method: 'get' }).then((res) => { this.unitList = res.data }).then(res => { this.unitList = this.removeEmptyArrays(res.data) }) }, getContaminateList() { getContaminateList () { this.$request({ url: '/allocation/contaminate', method: 'get' @@ -116,10 +178,10 @@ this.polluteList = res.data }) }, onSubmit() { onSubmit () { this.$emit('handleSearch', this.formData) }, handleAdd() { handleAdd () { this.$emit('handleAdd', '12122') } } src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -1,7 +1,11 @@ <template> <div class="main"> <div class="timeSelect"> <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber('timeMouted')"> <el-radio-group v-model="searchForm.number" style="margin-left:20px" @input="changeNumber('timeMouted')" > <el-radio-button label="1"> 近1个月 </el-radio-button> @@ -18,7 +22,24 @@ 近12个月 </el-radio-button> </el-radio-group> <el-date-picker v-model="timeInterval" el-time-picker type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeNumber('timeValue')" /> <el-date-picker v-model="timeInterval" el-time-picker type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeNumber('timeValue')" /> <el-cascader collapse-tags placeholder="责任主体" :show-all-levels="false" :options="unitList" :props="{ multiple: true, value:'unitId',label:'unitName',children:'children'}" @change="changeUid" /> </div> <div class="agentSummary"> <div class="circle"> @@ -39,69 +60,232 @@ </div> </div> <div class="overviewAndDetails"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="总览" name="first"> <el-tabs v-model="activeName" @tab-click="handleClick" > <el-tab-pane label="总览" name="first" > <div class="tit"> <span> 责任单位交办单总览 </span> <el-button type="primary" plain size="small" style="float: right;" @click="ecxport"> <el-button type="primary" plain size="small" style="float: right;" @click="ecxport" > 导出 </el-button> </div> <div> <div class="min"> <div class="tab" style="display: inline-block; width: 100%"> <el-table :data="tableData" class="topTable" border style="width: 100%" :header-cell-style="{ <div class="tab" style="display: inline-block; width: 100%" > <el-table :data="tableData" class="topTable" border style="width: 100%" :header-cell-style="{ background: '#99D4FF', color: '#101111', fontSize: '16px' }"> <el-table-column align="center" type="index" width="60" label="序号" /> <el-table-column align="center" prop="unitName" label="责任单位" /> <el-table-column align="center" prop="total" label="总工单" /> <el-table-column align="center" prop="number" label="完成数" /> <el-table-column align="center" prop="unNumber" label="未成数" /> <el-table-column align="center" prop="rate" label="完成率" /> <el-table-column align="center" prop="deduction" label="扣分" /> <el-table-column align="center" prop="marks" label="加分" /> <el-table-column align="center" prop="totalPoints" label="总得分" /> }" > <el-table-column align="center" type="index" width="60" label="序号" /> <el-table-column align="center" prop="unitName" label="责任单位" /> <el-table-column align="center" prop="total" label="总工单" /> <el-table-column align="center" prop="number" label="完成数" /> <el-table-column align="center" prop="unNumber" label="未成数" /> <el-table-column align="center" prop="rate" label="完成率" /> <el-table-column align="center" prop="deduction" label="扣分" /> <el-table-column align="center" prop="marks" label="加分" /> <el-table-column align="center" prop="totalPoints" label="总得分" /> </el-table> <vueSeamless v-if="tableData.length>5" ref="scroll3" :data="tableData" :pause="true" class="seamless-warp" style="width: 100%;" :class-option="classOption"> <el-table v-if="tableData.length>0" :data="tableData" class="bottomTable" border style="width: 100%;margin-bottom:50px"> <el-table-column align="center" type="index" width="60" /> <el-table-column align="center" prop="unitName" label="责任单位" /> <el-table-column align="center" prop="total" label="总工单" /> <el-table-column align="center" prop="number" label="完成数" /> <el-table-column align="center" prop="unNumber" label="未成数" /> <el-table-column align="center" prop="rate" label="完成率" /> <el-table-column align="center" prop="deduction" label="扣分" /> <el-table-column align="center" prop="marks" label="加分" /> <el-table-column align="center" prop="totalPoints" label="总得分" /> <vueSeamless v-if="tableData.length>5" ref="scroll3" :data="tableData" :pause="true" class="seamless-warp" style="width: 100%;" :class-option="classOption" > <el-table v-if="tableData.length>0" :data="tableData" class="bottomTable" border style="width: 100%;margin-bottom:50px" > <el-table-column align="center" type="index" width="60" /> <el-table-column align="center" prop="unitName" label="责任单位" /> <el-table-column align="center" prop="total" label="总工单" /> <el-table-column align="center" prop="number" label="完成数" /> <el-table-column align="center" prop="unNumber" label="未成数" /> <el-table-column align="center" prop="rate" label="完成率" /> <el-table-column align="center" prop="deduction" label="扣分" /> <el-table-column align="center" prop="marks" label="加分" /> <el-table-column align="center" prop="totalPoints" label="总得分" /> </el-table> </vueSeamless> <el-table v-else :data="tableData" class="bottomTable" border style="width: 100%;margin-bottom:50px"> <el-table-column align="center" type="index" width="60" /> <el-table-column align="center" prop="unitName" label="责任单位" /> <el-table-column align="center" prop="total" label="总工单" /> <el-table-column align="center" prop="number" label="完成数" /> <el-table-column align="center" prop="unNumber" label="未成数" /> <el-table-column align="center" prop="rate" label="完成率" /> <el-table-column align="center" prop="deduction" label="扣分" /> <el-table-column align="center" prop="marks" label="加分" /> <el-table-column align="center" prop="totalPoints" label="总得分" /> <el-table v-else :data="tableData" class="bottomTable" border style="width: 100%;margin-bottom:50px" > <el-table-column align="center" type="index" width="60" /> <el-table-column align="center" prop="unitName" label="责任单位" /> <el-table-column align="center" prop="total" label="总工单" /> <el-table-column align="center" prop="number" label="完成数" /> <el-table-column align="center" prop="unNumber" label="未成数" /> <el-table-column align="center" prop="rate" label="完成率" /> <el-table-column align="center" prop="deduction" label="扣分" /> <el-table-column align="center" prop="marks" label="加分" /> <el-table-column align="center" prop="totalPoints" label="总得分" /> </el-table> </div> </div> </div> </el-tab-pane> <el-tab-pane label="明细" name="second"> <el-tab-pane label="明细" name="second" > <div> <div> <p style="text-align: center;"> <!-- <p style="text-align: center;"> 责任单位: <el-select v-model="unitId" size="small" placeholder="请选择" @change="changeUnitId"> <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" /> <el-select v-model="unitId" size="small" placeholder="请选择" @change="changeUnitId" > <el-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" /> </el-select> </p> </p> --> </div> <div class="chartsTitle"> <p>污染分类</p> @@ -109,10 +293,18 @@ </div> <div class="caets"> <div> <pollutionClassificationEcharts v-if="activeName === 'second'" ref="leftEcharts" :chart-data="chartData" /> <pollutionClassificationEcharts v-if="activeName === 'second'" ref="leftEcharts" :chart-data="chartData" /> </div> <div> <reportTypeEcharts v-if="activeName === 'second'" ref="rightEcharts" :cylindricality-data="cylindricalityData" /> <reportTypeEcharts v-if="activeName === 'second'" ref="rightEcharts" :cylindricality-data="cylindricalityData" /> </div> </div> </div> @@ -132,7 +324,7 @@ pollutionClassificationEcharts, reportTypeEcharts }, data() { data () { return { mount: '', timeInterval: [], @@ -155,23 +347,57 @@ }, chartData: [], cylindricalityData: [], tableDataTotal: 0 tableDataTotal: 0, unitIdlist: [] } }, computed: { classOption() { classOption () { let data = this.loadMore() console.log('return ', data) return data } }, created() { created () { this.getUnitList() this.getContaminateList() this.handleSearch() }, methods: { loadMore() { changeUid (val) { this.unitIdlist = this.uniqueArrayReduce(val) this.handleSearch() }, uniqueArrayReduce (arrays) { return arrays.reduce((acc, curr) => { return acc.concat(curr.filter(item => !acc.includes(item))) }, []) }, removeEmptyArrays (obj) { if (Array.isArray(obj)) { return obj .map(item => this.removeEmptyArrays(item)) // 递归处理每个元素 .filter(item => !Array.isArray(item) || item.length > 0) // 过滤空数组 } else if (typeof obj === 'object' && obj !== null) { Object.keys(obj).forEach(key => { obj[key] = this.removeEmptyArrays(obj[key]) // 递归处理对象属性 if (Array.isArray(obj[key]) && obj[key].length === 0) { delete obj[key] // 移除空数组属性 } }) } return obj }, // 获取责任单位list getUnitList () { this.$request({ url: '/allocation/unitQuery', method: 'get' }).then(res => { this.unitList = this.removeEmptyArrays(res.data) }) }, loadMore () { let data = {} if (this.tableDataTotal > 5) { data = { @@ -197,7 +423,7 @@ console.log('data', data) return data }, ecxport() { ecxport () { this.$request({ url: '/allocation/unitExel', method: 'get', @@ -211,7 +437,7 @@ this.getOutExcel('列表数据导出.xlsx', res) }) }, getOutExcel(fileName, res) { getOutExcel (fileName, res) { const blob = new Blob([res], { type: 'application/x-xls' }) if (window.navigator.msSaveOrOpenBlob) { // 兼容 IE & EDGE @@ -230,13 +456,13 @@ url.revokeObjectURL(link.href) } }, unitIdFormatter(val) { unitIdFormatter (val) { const data = this.unitList.find( item => item && item.unitId === val.unitId ) return data ? data.unitName : '' }, changeNumber(val) { changeNumber (val) { if (val === 'timeValue') { this.searchForm.number = null } else { @@ -244,10 +470,10 @@ } this.handleSearch() }, handleClick(tab, event) { handleClick (tab, event) { console.log(tab) }, changeUnitId() { changeUnitId () { this.$request({ url: '/allocation/selectUnitView', method: 'get', @@ -268,13 +494,14 @@ } }) }, handleSearch() { handleSearch () { this.$request({ url: '/allocation/selectUnitView', method: 'get', params: { startTime: this.timeInterval[0], endTime: this.timeInterval[1], unitId: this.unitIdlist.join(','), number: Number(this.searchForm.number) } }).then(res => { @@ -290,16 +517,16 @@ }) }, // 获取责任单位list getUnitList() { this.$request({ url: '/allocation/unit', method: 'get' }).then(res => { this.unitList = res.data console.log(' JSON.stringify(this.unitList)', this.unitList) }) }, getContaminateList() { // getUnitList () { // this.$request({ // url: '/allocation/unit', // method: 'get' // }).then(res => { // this.unitList = res.data // console.log(' JSON.stringify(this.unitList)', this.unitList) // }) // }, getContaminateList () { this.$request({ url: '/allocation/contaminate', method: 'get'