fix: 责任单位修改

quanyawei

2024-09-12 293a5597a6823edc5c64372ec41b1024c9f87ee0

 src/views/toCarryOutLegislativeReforms/summaryPage/index.vue

@@ -4,13 +4,23 @@
      <el-radio-group
        v-model="searchForm.number"
        style="margin-left:20px"
        @input="changeNumber"
        @input="changeNumber('timeMouted')"
      >
        <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-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"
@@ -20,23 +30,43 @@
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeNumber"
        @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">
      <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>
@@ -50,72 +80,199 @@
          label="总览"
          name="first"
        >
          <div class="tit">
            <span>
              责任单位交办单总览
            </span>
            <el-button
              type="primary"
              plain
              size="small"
              style="float: right;"
              @click="ecxport"
            >
              导出
            </el-button>
          </div>
          <div>
            <div class="tit">
              <span>
                责任单位交办单总览
              </span>
              <el-button
                type="primary"
                plain
                size="small"
                style="float: right;"
                @click="ecxport"
            <div class="min">
              <div
                class="tab"
                style="display: inline-block; width: 100%"
              >
                导出
              </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>
                <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>
                <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>
              </div>
            </div>
          </div>
        </el-tab-pane>
@@ -125,9 +282,14 @@
        >
          <div>
            <div>
              <p style="text-align: center;">
              <!-- <p style="text-align: center;">
                责任单位：
                <el-select v-model="unitId" size="small" placeholder="请选择" @change="changeUnitId">
                <el-select
                  v-model="unitId"
                  size="small"
                  placeholder="请选择"
                  @change="changeUnitId"
                >
                  <el-option
                    v-for="item in unitList"
                    :key="item.unitId"
@@ -135,7 +297,7 @@
                    :value="item.unitId"
                  />
                </el-select>
              </p>
              </p> -->
            </div>
            <div class="chartsTitle">
              <p>污染分类</p>
@@ -165,14 +327,16 @@
</template>

<script>
import vueSeamless from 'vue-seamless-scroll'
import pollutionClassificationEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/pollutionClassificationEcharts'
import reportTypeEcharts from '@/views/toCarryOutLegislativeReforms/summaryPage/components/reportTypeEcharts'
export default {
  components: {
    vueSeamless,
    pollutionClassificationEcharts,
    reportTypeEcharts
  },
  data() {
  data () {
    return {
      mount: '',
      timeInterval: [],
@@ -194,16 +358,115 @@
        overdue: ''
      },
      chartData: [],
      cylindricalityData: []
      cylindricalityData: [],
      tableDataTotal: 0,
      unitIdlist: []
    }
  },
  created() {
  computed: {
    classOption () {
      let data = this.loadMore()
      console.log('return ', data)
      return data
    }
  },
  created () {
    this.getUnitList()
    this.getContaminateList()
    this.handleSearch()
  },
  methods: {
    ecxport() {
    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 today = new Date()
      const end = new Date(new Date())
      // 获取近一个月的时间段
      const oneMonthAgo = new Date(today)
      oneMonthAgo.setMonth(oneMonthAgo.getMonth() - month)
      const startTime = oneMonthAgo.toISOString().substring(0, 10)
      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()
    },
    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 = {
          step: 0.8, // 数值越大速度滚动越快
          limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.tableData
          hoverStop: true, // 是否开启鼠标悬停stop
          autoPlay: true,
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      } else {
        this.$refs.scroll3 && this.$refs.scroll3._cancle()

        data = {
          step: 0, // 数值越大速度滚动越快
          limitMoveNum: this.tableData.length,
          openWatch: true
        }
      }
      console.log('data', data)
      return data
    },
    ecxport () {
      this.$request({
        url: '/allocation/unitExel',
        method: 'get',
@@ -211,13 +474,14 @@
        params: {
          startTime: this.timeInterval[0],
          endTime: this.timeInterval[1],
          number: Number(this.searchForm.number)
          number: Number(this.searchForm.number),
          unitId: this.unitIdlist.join(',')
        }
      }).then((res) => {
      }).then(res => {
        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
@@ -236,17 +500,24 @@
        url.revokeObjectURL(link.href)
      }
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
    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 {
        this.timeInterval = []
      }
      this.handleSearch()
    },
    handleClick(tab, event) {
    handleClick (tab, event) {
      console.log(tab)
    },
    changeUnitId() {
    changeUnitId () {
      this.$request({
        url: '/allocation/selectUnitView',
        method: 'get',
@@ -256,7 +527,7 @@
          number: Number(this.searchForm.number),
          unitId: this.unitId
        }
      }).then((res) => {
      }).then(res => {
        if (res.code === 0) {
          this.chartData = []
          this.chartData = this.cylindricalityData
@@ -267,19 +538,21 @@
        }
      })
    },
    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) => {
      }).then(res => {
        if (res.code === 0) {
          this.responeForm = res.data
          this.tableData = res.data.unitView
          this.tableData = res.data.unitView || []
          this.tableDataTotal = this.tableData.length
          this.chartData = res.data.polluteType
          this.cylindricalityData = res.data.escalationType
        } else {
@@ -288,20 +561,20 @@
      })
    },
    // 获取责任单位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'
      }).then((res) => {
      }).then(res => {
        this.polluteList = res.data
      })
    }
@@ -310,16 +583,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;
@@ -366,6 +639,7 @@
      justify-content: center;
      flex-wrap: wrap;
      flex-direction: column;
      cursor: pointer;
    }
  }

@@ -413,5 +687,20 @@
      }
    }
  }
  .seamless-warp {
    height: 380px;
    overflow: hidden;
  }
  .min {
    display: flex;
    width: 100%;
  }
  .topTable /deep/.el-table__body-wrapper {
    display: none;
  }
  .bottomTable /deep/.el-table__header-wrapper {
    display: none;
    width: 100%;
  }
}
</style>