quanyawei
2023-11-15 740f7af7e3a5a669fd97b26102bf7bccfde00899
src/views/toCarryOutLegislativeReforms/summaryPage/index.vue
@@ -1,27 +1,14 @@
<template>
  <div class="main">
    <div class="timeSelect">
      <el-radio-group
        v-model="searchForm.number"
        style="margin-left:20px"
        @input="changeNumber"
      >
      <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"
      />
      <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">
@@ -42,98 +29,40 @@
      </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>
            <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 class="tab">
              <el-table
                :data="tableData"
                border
                max-height="400"
                style="width: 100%"
                :header-cell-style="{
              <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-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"
        >
        <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-option v-for="item in unitList" :key="item.unitId" :label="item.unitName" :value="item.unitId" />
                </el-select>
              </p>
            </div>
@@ -143,18 +72,10 @@
            </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>
@@ -213,7 +134,7 @@
          endTime: this.timeInterval[1],
          number: Number(this.searchForm.number)
        }
      }).then((res) => {
      }).then(res => {
        this.getOutExcel('列表数据导出.xlsx', res)
      })
    },
@@ -237,7 +158,9 @@
      }
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      const data = this.unitList.find(
        item => item && item.unitId === val.unitId
      )
      return data ? data.unitName : ''
    },
    changeNumber(val) {
@@ -256,7 +179,7 @@
          number: Number(this.searchForm.number),
          unitId: this.unitId
        }
      }).then((res) => {
      }).then(res => {
        if (res.code === 0) {
          this.chartData = []
          this.chartData = this.cylindricalityData
@@ -276,7 +199,7 @@
          endTime: this.timeInterval[1],
          number: Number(this.searchForm.number)
        }
      }).then((res) => {
      }).then(res => {
        if (res.code === 0) {
          this.responeForm = res.data
          this.tableData = res.data.unitView
@@ -292,7 +215,7 @@
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
      }).then(res => {
        this.unitList = res.data
        console.log(' JSON.stringify(this.unitList)', this.unitList)
      })
@@ -301,7 +224,7 @@
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
      }).then(res => {
        this.polluteList = res.data
      })
    }
@@ -310,16 +233,16 @@
</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');
$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;
}
  /deep/ .el-table__row {
    font-size: 18px;
  }
  background: #bbbbbb;
  min-height: 800px;
  padding: 15px 10px;