Merge branch 'feature_1.0'

quanyawei

2023-10-07 9083fd270cd172f998eb2dd3dfae59187a70cb1a

 src/views/toCarryOutLegislativeReforms/summaryPage/index.vue

New file
@@ -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>