|  |  |  | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <i class="el-icon-s-fold" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-if="rankListShow"> | 
|---|
|  |  |  | <!--                --> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | style="position: relative" | 
|---|
|  |  |  | class="rankCar" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="success-checkmark" | 
|---|
|  |  |  | @click="showRankList" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | <p>排名列表</p> | 
|---|
|  |  |  | <ul> | 
|---|
|  |  |  | <li | 
|---|
|  |  |  | v-for="(item, index) in rankList" | 
|---|
|  |  |  | :key="index" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="rankCarItem"> | 
|---|
|  |  |  | <div> {{ index+1 }}. {{ item.road }}</div> | 
|---|
|  |  |  | <div style="margin-left: 10px"> | 
|---|
|  |  |  | {{ item.avg }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </li> | 
|---|
|  |  |  | </ul> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | v-if="noneData" | 
|---|
|  |  |  | 
|---|
|  |  |  | <!-- 百度地图 --> | 
|---|
|  |  |  | </el-container> | 
|---|
|  |  |  | </el-container> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | v-if="rankListShow" | 
|---|
|  |  |  | style="position: absolute; | 
|---|
|  |  |  | right: 0; | 
|---|
|  |  |  | top: 45px; | 
|---|
|  |  |  | }" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <!--                --> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | style="position: relative" | 
|---|
|  |  |  | class="rankCar" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="success-checkmark" | 
|---|
|  |  |  | @click="showRankList" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | <p>排名列表</p> | 
|---|
|  |  |  | <ul> | 
|---|
|  |  |  | <li | 
|---|
|  |  |  | v-for="(item, index) in rankList" | 
|---|
|  |  |  | :key="index" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="rankCarItem"> | 
|---|
|  |  |  | <div> {{ index+1 }}. {{ item.road }}</div> | 
|---|
|  |  |  | <div style="margin-left: 10px"> | 
|---|
|  |  |  | {{ item.avg }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </li> | 
|---|
|  |  |  | </ul> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <el-dialog | 
|---|
|  |  |  | title="6参设定" | 
|---|
|  |  |  | :visible.sync="dialogFormVisible" | 
|---|
|  |  |  | 
|---|
|  |  |  | deep: true, | 
|---|
|  |  |  | immediate: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | mounted () { | 
|---|
|  |  |  | // this.$watch('carMac', () => { | 
|---|
|  |  |  | if (this.dataType === 'history') { | 
|---|
|  |  |  | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | if (res.data.length > 0) { | 
|---|
|  |  |  | this.noneDustldData = true | 
|---|
|  |  |  | this.rankList = res.data | 
|---|
|  |  |  | this.rankList = [...res.data] | 
|---|
|  |  |  | console.log('排名', res) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.rankListShow = false | 
|---|
|  |  |  | this.noneDustldData = false | 
|---|
|  |  |  | this.rankList = [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | searchType: { type: String, default: '' } | 
|---|
|  |  |  | searchType: { type: String, default: '' }, | 
|---|
|  |  |  | initializationData: { type: Object, default: () => {} } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.getUnitList() | 
|---|
|  |  |  | this.formData.isInvalid = 0 | 
|---|
|  |  |  | this.getContaminateList() | 
|---|
|  |  |  | if (Object.entries(this.initializationData).length !== 0) { | 
|---|
|  |  |  | this.formData.startTime = this.initializationData.startTime | 
|---|
|  |  |  | this.formData.endTime = this.initializationData.endTime | 
|---|
|  |  |  | // total 总交办单 unComplete 进行中 complete 已完成 overdue 逾期 | 
|---|
|  |  |  | if (this.initializationData.type === 'total') { | 
|---|
|  |  |  | this.formData.state = [] | 
|---|
|  |  |  | } else if (this.initializationData.type === 'unComplete') { | 
|---|
|  |  |  | this.formData.state = [9, 20, 30] | 
|---|
|  |  |  | } else if (this.initializationData.type === 'complete') { | 
|---|
|  |  |  | this.formData.state = [40] | 
|---|
|  |  |  | } else if (this.initializationData.type === 'overdue') { | 
|---|
|  |  |  | this.formData.state = [] | 
|---|
|  |  |  | this.formData.changeType = 2 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | changeUid (val) { | 
|---|
|  |  |  | 
|---|
|  |  |  | <searchBar | 
|---|
|  |  |  | v-if="searchType" | 
|---|
|  |  |  | :search-type="'reform'" | 
|---|
|  |  |  | :initialization-data="initializationData" | 
|---|
|  |  |  | @handleSearch="handleSearchBut" | 
|---|
|  |  |  | @handleAdd="handleOpenDialog(null, 'add')" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | 
|---|
|  |  |  | parseInt(item.dataKey) === this.editEscalationUnitData.polluteType | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | return data ? data.dataValue : '' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | initializationData () { | 
|---|
|  |  |  | return this.$route.query | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | watch: { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | this.handleSearch({ isInvalid: 0, state: [9, 20, 30] }) | 
|---|
|  |  |  | if (Object.entries(this.$route.query).length === 0) { | 
|---|
|  |  |  | this.handleSearch({ isInvalid: 0, state: [9, 20, 30] }) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | let state = [] | 
|---|
|  |  |  | let changeType = null | 
|---|
|  |  |  | let startTime = this.initializationData.startTime | 
|---|
|  |  |  | let endTime = this.initializationData.endTime | 
|---|
|  |  |  | if (this.initializationData.type === 'total') { | 
|---|
|  |  |  | state = [] | 
|---|
|  |  |  | } else if (this.initializationData.type === 'unComplete') { | 
|---|
|  |  |  | state = [9, 20, 30] | 
|---|
|  |  |  | } else if (this.initializationData.type === 'complete') { | 
|---|
|  |  |  | state = [40] | 
|---|
|  |  |  | } else if (this.initializationData.type === 'overdue') { | 
|---|
|  |  |  | state = [] | 
|---|
|  |  |  | changeType = 2 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.handleSearch({ isInvalid: 0, state: state, changeType: changeType, startTime: startTime, endTime: endTime }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.getUnitList() | 
|---|
|  |  |  | this.getContaminateList() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // mounted () { | 
|---|
|  |  |  | //   console.log('this.$route.query', this.$route.query) | 
|---|
|  |  |  | //   this.initializationData = this.$route.query | 
|---|
|  |  |  | // }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | getaddressAndLnt (position, address) { | 
|---|
|  |  |  | if (this.mapType === 'edit') { | 
|---|
|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div :class="className" :style="{ height: height, width: width }" /> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | :class="className" | 
|---|
|  |  |  | :style="{ height: height, width: width }" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | 
|---|
|  |  |  | default: () => [] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | chart: null, | 
|---|
|  |  |  | seriesData: [] | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | watch: { | 
|---|
|  |  |  | 'chartData': { | 
|---|
|  |  |  | handler(newVal) { | 
|---|
|  |  |  | handler (newVal) { | 
|---|
|  |  |  | console.log('newVal', newVal) | 
|---|
|  |  |  | this.seriesData = [] | 
|---|
|  |  |  | this.seriesData = newVal | 
|---|
|  |  |  | 
|---|
|  |  |  | immediate: true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | mounted() { | 
|---|
|  |  |  | mounted () { | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.initChart() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | beforeDestroy() { | 
|---|
|  |  |  | beforeDestroy () { | 
|---|
|  |  |  | if (!this.chart) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | this.chart = null | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | initChart() { | 
|---|
|  |  |  | initChart () { | 
|---|
|  |  |  | this.chart = echarts.init(this.$el, 'macarons') | 
|---|
|  |  |  | this.chart.clear() | 
|---|
|  |  |  | this.setOptions() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | setOptions() { | 
|---|
|  |  |  | setOptions () { | 
|---|
|  |  |  | // function fontSize(res) { | 
|---|
|  |  |  | //     let clientWidth = | 
|---|
|  |  |  | //         window.innerWidth || | 
|---|
|  |  |  | 
|---|
|  |  |  | fontSize: 16 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | value: { | 
|---|
|  |  |  | width: 20, | 
|---|
|  |  |  | width: 100, | 
|---|
|  |  |  | align: 'right', | 
|---|
|  |  |  | fontFamily: 'Medium', | 
|---|
|  |  |  | fontSize: 16 | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="agentSummary"> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="circle" | 
|---|
|  |  |  | @click="toOtherPage('total')" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div>总交办单</div> | 
|---|
|  |  |  | <div>{{ responeForm.total }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="circle" | 
|---|
|  |  |  | @click="toOtherPage('unComplete')" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div>进行中</div> | 
|---|
|  |  |  | <div>{{ responeForm.unComplete }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="circle" | 
|---|
|  |  |  | @click="toOtherPage('complete')" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div>已完成</div> | 
|---|
|  |  |  | <div>{{ responeForm.complete }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="circle" | 
|---|
|  |  |  | @click="toOtherPage('overdue')" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div>逾期</div> | 
|---|
|  |  |  | <div>{{ responeForm.overdue }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | this.handleSearch() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | toOtherPage (val) { | 
|---|
|  |  |  | console.log('val', val) | 
|---|
|  |  |  | let startTime = '' | 
|---|
|  |  |  | let endTime = '' | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if (this.searchForm.number) { | 
|---|
|  |  |  | startTime = this.getPeriods(Number(this.searchForm.number))[0] | 
|---|
|  |  |  | endTime = this.getPeriods(Number(this.searchForm.number))[1] | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | startTime = this.timeInterval[0] | 
|---|
|  |  |  | endTime = this.timeInterval[1] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.$router.push({ path: '/toCarryOutLegislativeReforms/toCarryOutLegislativeReforms/reform', | 
|---|
|  |  |  | query: { | 
|---|
|  |  |  | type: val, | 
|---|
|  |  |  | startTime: startTime, | 
|---|
|  |  |  | endTime: endTime | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getPeriods (month) { | 
|---|
|  |  |  | const now = new Date() | 
|---|
|  |  |  | const end = new Date(new Date()) | 
|---|
|  |  |  | const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()) | 
|---|
|  |  |  | // 获取近一个月的时间段 | 
|---|
|  |  |  | const oneMonthAgo = new Date(today) | 
|---|
|  |  |  | oneMonthAgo.setMonth(oneMonthAgo.getMonth() - month) | 
|---|
|  |  |  | const startTime = oneMonthAgo.toISOString().split('T')[0] | 
|---|
|  |  |  | const endTime = end.toISOString().substring(0, 10) | 
|---|
|  |  |  | console.log('startTime', startTime, 'endTime', endTime) | 
|---|
|  |  |  | return [startTime, endTime] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeUid (val) { | 
|---|
|  |  |  | this.unitIdlist = this.uniqueArrayReduce(val) | 
|---|
|  |  |  | this.handleSearch() | 
|---|
|  |  |  | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|