From 9083fd270cd172f998eb2dd3dfae59187a70cb1a Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Sat, 07 Oct 2023 09:31:11 +0800
Subject: [PATCH] Merge branch 'feature_1.0'
---
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue | 417 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 417 insertions(+), 0 deletions(-)
diff --git a/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
new file mode 100644
index 0000000..cb5917f
--- /dev/null
+++ b/src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -0,0 +1,417 @@
+<template>
+ <div class="main">
+ <div class="timeSelect">
+ <el-radio-group
+ v-model="searchForm.number"
+ style="margin-left:20px"
+ @input="changeNumber"
+ >
+ <el-radio-button label="1">���1������</el-radio-button>
+ <el-radio-button label="2">���2������</el-radio-button>
+ <el-radio-button label="3">���3������</el-radio-button>
+ <el-radio-button label="6">���6������</el-radio-button>
+ <el-radio-button label="12">���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"
+ />
+ </div>
+ <div class="agentSummary">
+ <div class="circle">
+ <div>������������</div>
+ <div>{{ responeForm.total }}</div>
+ </div>
+ <div class="circle">
+ <div>���������</div>
+ <div>{{ responeForm.unComplete }}</div>
+ </div>
+ <div class="circle">
+ <div>���������</div>
+ <div>{{ responeForm.complete }}</div>
+ </div>
+ <div class="circle">
+ <div>������</div>
+ <div>{{ responeForm.overdue }}</div>
+ </div>
+ </div>
+ <div class="overviewAndDetails">
+ <el-tabs
+ v-model="activeName"
+ @tab-click="handleClick"
+ >
+ <el-tab-pane
+ label="������"
+ name="first"
+ >
+ <div>
+ <div class="tit">
+ <span>
+ ���������������������������
+ </span>
+ <el-button
+ type="primary"
+ plain
+ size="small"
+ style="float: right;"
+ @click="ecxport"
+ >
+ ������
+ </el-button>
+ </div>
+ <div class="tab">
+ <el-table
+ :data="tableData"
+ border
+ max-height="400"
+ style="width: 100%"
+ :header-cell-style="{
+ background: '#99D4FF', color: '#101111', fontSize: '16px'
+ }"
+ >
+ <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>
+ </el-tab-pane>
+ <el-tab-pane
+ label="������"
+ name="second"
+ >
+ <div>
+ <div>
+ <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>
+ </p>
+ </div>
+ <div class="chartsTitle">
+ <p>������������</p>
+ <p>������������</p>
+ </div>
+ <div class="caets">
+ <div>
+ <pollutionClassificationEcharts
+ v-if="activeName === 'second'"
+ ref="leftEcharts"
+ :chart-data="chartData"
+ />
+ </div>
+ <div>
+ <reportTypeEcharts
+ v-if="activeName === 'second'"
+ ref="rightEcharts"
+ :cylindricality-data="cylindricalityData"
+ />
+ </div>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+</template>
+
+<script>
+import pollutionClassificationEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts'
+import reportTypeEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts'
+export default {
+ components: {
+ pollutionClassificationEcharts,
+ reportTypeEcharts
+ },
+ data() {
+ return {
+ mount: '',
+ timeInterval: [],
+ polluteList: [],
+ unitList: [],
+ activeName: 'first',
+ tableData: [],
+ responsibleUnit: '',
+ searchForm: {
+ number: 1,
+ startTime: '',
+ endTime: ''
+ },
+ unitId: '',
+ responeForm: {
+ total: '',
+ complete: '',
+ unComplete: '',
+ overdue: ''
+ },
+ chartData: [],
+ cylindricalityData: []
+ }
+ },
+ created() {
+ this.getUnitList()
+ this.getContaminateList()
+ this.handleSearch()
+ },
+ methods: {
+ ecxport() {
+ this.$request({
+ url: '/allocation/unitExel',
+ method: 'get',
+ responseType: 'blob',
+ params: {
+ startTime: this.timeInterval[0],
+ endTime: this.timeInterval[1],
+ number: Number(this.searchForm.number)
+ }
+ }).then((res) => {
+ this.getOutExcel('������������������.xlsx', res)
+ })
+ },
+ getOutExcel(fileName, res) {
+ const blob = new Blob([res], { type: 'application/x-xls' })
+ if (window.navigator.msSaveOrOpenBlob) {
+ // ������ IE & EDGE
+ navigator.msSaveBlob(blob, fileName)
+ } else {
+ var link = document.createElement('a')
+ // ������������������������URL������
+ const url = window.URL || window.webkitURL || window.moxURL
+ // ������������������
+ link.href = url.createObjectURL(blob)
+ // ������������������
+ link.download = fileName
+ // ������������������
+ link.click()
+ // ������������������������
+ url.revokeObjectURL(link.href)
+ }
+ },
+ unitIdFormatter(val) {
+ const data = this.unitList.find(item => item && item.unitId === val.unitId)
+ return data ? data.unitName : ''
+ },
+ changeNumber(val) {
+ this.handleSearch()
+ },
+ handleClick(tab, event) {
+ console.log(tab)
+ },
+ changeUnitId() {
+ this.$request({
+ url: '/allocation/selectUnitView',
+ method: 'get',
+ params: {
+ startTime: this.timeInterval[0],
+ endTime: this.timeInterval[1],
+ number: Number(this.searchForm.number),
+ unitId: this.unitId
+ }
+ }).then((res) => {
+ if (res.code === 0) {
+ this.chartData = []
+ this.chartData = this.cylindricalityData
+ this.chartData = res.data.polluteType
+ this.cylindricalityData = res.data.escalationType
+ } else {
+ this.$message.error(res.message)
+ }
+ })
+ },
+ handleSearch() {
+ this.$request({
+ url: '/allocation/selectUnitView',
+ method: 'get',
+ params: {
+ startTime: this.timeInterval[0],
+ endTime: this.timeInterval[1],
+ number: Number(this.searchForm.number)
+ }
+ }).then((res) => {
+ if (res.code === 0) {
+ this.responeForm = res.data
+ this.tableData = res.data.unitView
+ this.chartData = res.data.polluteType
+ this.cylindricalityData = res.data.escalationType
+ } else {
+ this.$message.error(res.message)
+ }
+ })
+ },
+ // ������������������list
+ 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'
+ }).then((res) => {
+ this.polluteList = res.data
+ })
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+$red: url('~@/assets/images/1.jpg') ;
+$orange:url('~@/assets/images/2.png');
+$yellow:url('~@/assets/images/3.jpg');
+$green:url('~@/assets/images/4.png');
+$bgcolorlist: $red $orange $yellow $green;
+
+.main {
+ /deep/ .el-table__row{
+ font-size: 18px;
+}
+ background: #bbbbbb;
+ min-height: 800px;
+ padding: 15px 10px;
+ overflow: scroll;
+
+ .timeSelect {
+ width: 100%;
+ height: 80px;
+ line-height: 80px;
+ background-color: rgba(255, 255, 255, 1);
+ color: rgba(16, 16, 16, 1);
+ font-size: 14px;
+ }
+
+ .agentSummary {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 195px;
+ background-color: rgba(255, 255, 255, 1);
+ margin-top: 20px;
+
+ @for $i from 1 to length($bgcolorlist) + 1 {
+ .circle:nth-child(#{$i}) {
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center center;
+ background-image: nth($bgcolorlist, $i);
+ // background-image: radial-gradient(ellipse farthest-side at bottom right, rgba(153, 212, 255, 1), 50%, transparent 50%, transparent),
+ // radial-gradient(ellipse farthest-side at top right, rgba(153, 212, 255, 1), 30%, transparent 30%, transparent);
+ }
+ }
+
+ .circle {
+ box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+ border-radius: 5px;
+ width: 200px;
+ height: 90px;
+ align-items: center;
+ color: rgba(255, 255, 255, 1);
+ font-size: 20px;
+ font-weight: 700;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ flex-direction: column;
+ }
+ }
+
+ .overviewAndDetails {
+ height: 550px;
+ margin-top: 20px;
+ background-color: rgba(255, 255, 255, 1);
+ padding: 15px;
+
+ .tit {
+ width: 100%;
+ display: inline-block;
+ color: rgba(16, 16, 16, 1);
+ font-size: 24px;
+ text-align: center;
+ }
+
+ .tab {
+ margin-top: 10px;
+ }
+ .caets {
+ width: 100%;
+
+ div {
+ display: inline-block;
+ margin-top: 10px;
+ width: 49%;
+ height: 200px;
+ }
+
+ div:nth-child(1) {
+ border-right: 1px dashed rgba(221, 221, 221, 1);
+ }
+ }
+
+ .chartsTitle {
+ width: 100%;
+
+ p {
+ display: inline-block;
+ width: 49%;
+ text-align: center;
+ font-size: 24px;
+ font-weight: 700;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0