fix: 空气质量日报表显示

quanyawei

2024-03-28 2c6d91d758241e1f97fe2790d92b754ea2cc860c

fix: 空气质量日报表显示

 src/components/formTypeComponets/dialog/index.vue

@@ -29,7 +29,7 @@
      <el-button
        v-if="isShowSumbitBut"
        type="primary"
        @click="close()"
        @click="handleSumbmit()"
      >
        确 定
      </el-button>
@@ -81,8 +81,9 @@
      this.visible = false
      this.$emit('update:dialogVisible', false)
    },
    handleClose () {

    handleSumbmit () {
      this.close()
      this.$emit('dialogSubmit', false)
    }
  }
}

 src/router/dynamicRouter.js

@@ -113,6 +113,12 @@
  component: () => import('@/views/hand/index'),
  meta: { title: '手持设备', icon: 'example' }
}
const statement = {
  path: 'report/statement',
  name: 'statement',
  component: () => import('@/views/statement/index'),
  meta: { title: '空气质量日报表显示', icon: 'example' }
}
// 空气质量小时播报
const airQualityReportDisplay = {
  path: 'report/airQualityReportDisplay',
@@ -247,6 +253,7 @@
  staffManagement: staffManagement,
  showGovHourData: showGovHourData,
  hand: hand,
  statement: statement,
  cityAirRank: cityAirRank,
  levelStatistic: levelStatistic,
  onlineRate: onlineRate,

 src/views/statement/index.vue

New file
@@ -0,0 +1,445 @@
<template>
  <div class="container">
    <div class="searchBox">
      <div>时间:</div>
      <el-date-picker
        v-model="timePicker"
        class="margOut"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <div>
        <el-button
          type="primary"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          @click="()=>isVisible = true"
        >
          生成报告
        </el-button>
      </div>
    </div>
    <div>
      <el-row :gutter="24">
        <el-col :span="10">
          <el-table
            :data="tableData"
            style="width: 100%"
            @row-click="rowClick"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="100"
            />
            <el-table-column
              prop="reportTime"
              align="center"
              label="时间"
              width="180"
            />
            <el-table-column
              prop="reportContent"
              align="center"
              label="内容"
            >
              <template slot-scope="scope">
                <div
                  style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                  v-html="scope.row.reportContent"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col
          :span="14"
          style="position: relative;"
        >
          <el-input
            id="myText"
            v-model="reportContent"
            readonly
            class="wordContent"
            type="textarea"
            resize="none"
          />

          <div
            v-if="filesList.length > 0"
            class="fileBox"
          >
            <el-row
              type="flex"
              align="middle"
            >
              <el-col :span="18">
                <div
                  v-for="item in filesList"
                  :key="item.fileId"
                >
                  <el-button
                    type="text"
                    @click="handleExport(item)"
                  >
                    {{ item.fileName }}
                  </el-button>
                </div>
              </el-col>
              <el-col
                :span="6"
                style="text-align: center;"
              >
                <div>
                  <el-button
                    type="text"
                    @click="copyText"
                  >
                    复制
                  </el-button>
                </div>
                <el-button
                  type="text"
                  @click="()=>resetFileVisible = true"
                >
                  重新上传
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="pagina">
      <el-pagination
        background
        :current-page="pagination.currentPage"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        :total="pagination.totalCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <diaLog
      v-if="isVisible"
      :dialog-visible.sync="isVisible"
      :title="`报告生成`"
      :width="`500px`"
      @dialogSubmit="dialogSubmit"
    >
      <template #body>
        <div>
          <el-form
            label-width="80px"
            :model="formInline"
          >
            <div style="width: 400px">
              <el-form-item label="日期:">
                <el-date-picker
                  v-model="formInline.time"
                  style="width: 100%"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item label="字典:">
                <el-input
                  v-model="formInline.code"
                  placeholder="请输入"
                />
              </el-form-item>
              <p style="text-align: center;color: red">
                提示：生成时间较长，请耐心等待!
              </p>
            </div>
          </el-form>
        </div>
      </template>
    </diaLog>
    <diaLog
      v-if="resetFileVisible"
      :dialog-visible.sync="resetFileVisible"
      :title="`重新上传`"
      :width="`500px`"
      @dialogSubmit="handleResetFile"
    >
      <template #body>
        <div>
          <div
            v-for="(item,index) in filesList"
            :key="item.fileId"
            class="resetFileBox"
          >
            <span>
              {{ item.fileName }}
            </span>
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              accept=".xls,.xlsx"
              :show-file-list="false"
              :data="{sysCode}"
              :on-success="handleUploadSuccess"
              :headers="{ token: token }"
            >
              <el-button
                type="text"
                @click="updataFileid(index)"
              >
                点击上传
              </el-button>
            </el-upload>
          </div>
        </div>
      </template>
    </diaLog>
  </div>
</template>

<script>
import _ from 'lodash'
import requestObj from '@/utils/request'
import { getToken } from '@/utils/auth'
import diaLog from '@/components/formTypeComponets/dialog/index.vue'
import dayjs from 'dayjs'
export default {
  components: {
    diaLog
  },
  data () {
    return {
      upFileList: [],
      sysCode: '1250301',
      token: getToken(),
      isVisible: false,
      resetFileVisible: false,
      filesList: [],
      reportContent: '',
      formInline: {
        code: '',
        time: new Date()
      },
      pagination: {
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 30, 60, 100],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      },
      timePicker: [],
      tableData: [],
      clickId: '',
      selectFileIndex: null
    }
  },
  computed: {
    uploadUrl () {
      return `${requestObj.baseUrl}/file/upload`
    },
    exportUrl () {
      return `${requestObj.baseUrl}/file/preview/`
    }
  },
  watch: {
    resetFileVisible (newValue, oldValue) {
      if (newValue) { this.upFileList = _.cloneDeep(this.filesList) }
    }
  },
  created () {
    this.handleSearch()
  },
  methods: {
    handleExport (item) {
      this.$request({
        url: `file/preview/${item.fileId}`,
        method: 'get',
        responseType: 'blob',
      }).then(res => {
        this.getOutExcel(`${item.fileName}.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)
      }
    },
    updataFileid (index) {
      this.selectFileIndex = index
    },
    // 图片上传成功
    handleUploadSuccess (response, file, fileList) {
      this.upFileList[this.selectFileIndex] = response.data
      console.log('this.upFileList', this.upFileList)
    },
    handleResetFile (item) {
      this.$request({
        url: '/cityReptiles/fileUpload',
        method: 'post',
        data: {
          list: this.upFileList,
          id: this.clickId
        }
      }).then((res) => {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      })
        .catch(err => {
          console.log(err)
          this.$message.error('操作失败')
        })
    },
    copyText () {
      const textToCopy = document.getElementById('myText').value
      this.copyToClipboard(textToCopy)
    },
    async copyToClipboard (text) {
      try {
        await navigator.clipboard.writeText(text)
        this.$message({
          message: '内容已成功复制到剪贴板',
          type: 'success'
        })
      } catch (err) {
        console.error('复制失败:', err)
      }
    },
    rowClick (val) {
      this.reportContent = val.reportContent
      this.filesList = val.list
      this.clickId = val.id
    },
    dialogSubmit () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$request({
        url: '/cityReptiles/report',
        method: 'get',
        params: {
          code: this.formInline.code,
          time: dayjs(this.formInline.time).format('YYYY-MM-DD')
        }
      }).then((res) => {
        console.log('res', res)
        this.handleSearch()
        loading.close()
      })
        .catch(err => {
          loading.close()
          console.log(err)
          this.$message.error('操作失败')
        })
    },
    handleSearch () {
      this.$request({
        url: '/cityReptiles/page',
        method: 'post',
        data: {
          'page': this.pagination,
          startTime: this.timePicker && this.timePicker.length > 0 ? dayjs(this.timePicker[0]).format('YYYY-MM-DD') : '',
          endTime: this.timePicker && this.timePicker.length > 0 ? dayjs(this.timePicker[1]).format('YYYY-MM-DD') : ''
        }
      }).then((res) => {
        this.tableData = res.data.list
        this.pagination.totalCount = res.data.page.totalNum
        this.reportContent = res.data.list.length > 0 ? res.data.list[0].reportContent : ''
        this.filesList = res.data.list.length > 0 ? res.data.list[0].list : ''
        this.clickId = res.data.list.length > 0 ? res.data.list[0].id : ''
      })
        .catch(err => {
          console.log(err)
          this.$message.error('操作失败')
        })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数
      this.pagination.pageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.pagination.currentPage = 1
      this.handleSearch()
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      this.pagination.currentPage = val
      this.handleSearch()
      // console.log(val)
    },
  },
}
</script>

<style lang="scss" scoped>
.container{
  overflow-y:auto;
  overflow-x:hidden;
  height: 100%;
  padding: 10px;
  .searchBox{
    display: flex;
    // font-size: 18px;
    align-items: center;
    .margOut{
      margin: 0 10px;
    }
    margin-bottom: 20px;
  }
}
/deep/.wordContent{
   .el-textarea__inner{
    font-size: 14px;
    height: 600px;
  }
}
.fileBox{
  width: 100%;
  position: absolute;
}
.copy{
  padding: 0;
  margin-right: 20px;
  text-align: right;
}
.resetFileBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
</style>

 src/views/toCarryOutLegislativeReforms/delay/index.vue

@@ -210,7 +210,7 @@
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 20, 30, 40],
        pageSizes: [10, 30, 60, 100],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      },