123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339 |
- <template>
- <div class="evaluationWaring">
- <div class="evaluationWaringBtn">
- <div style="display:flex;justify-content: space-between;border-bottom: 1px solid#D6DBEA;">
- <div class="collectSeach" :style="$utils.collectSeachSty()">
- <div class="exceed">
- <span class="exceedSpan">业务属性:</span>
- <el-select v-model="sectionStr" placeholder="请选择业务属性">
- <el-option
- v-for="item in moduleData"
- :key="item.id"
- :label="item.sectionName"
- :value="item.id">
- </el-option>
- </el-select>
- </div>
- <div class="exceed">
- <span class="exceedSpan">预警时间:</span>
- <el-date-picker
- v-model="warnTime"
- value-format="YYYY-MM-DD HH:mm:ss"
- type="datetimerange"
- range-separator="至"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- @change="changeTime"
- />
- </div>
- <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
- </div>
- <div class="warningExport">
- <el-button
- type="info"
- icon="Download"
- size="mini"
- @click="handleExport"
- >导出</el-button>
- </div>
- </div>
- <div class="evaluationWaringTableData">
- <el-table :data="evaluationWaringData" style="width: 100%" :class="evalwarningTableSty()">
- <el-table-column label="序号" type="index" align="center" />
- <el-table-column label="考评单位" prop="company" width="200" />
- <el-table-column label="指标类型" prop="title" width="200" />
- <el-table-column label="预警内容" prop="content" />
- <el-table-column label="目标值" prop="targetValue" width="100" />
- <el-table-column label="完成值" prop="completeValue" width="100" />
- <el-table-column label="预警时间" prop="createTime" />
- <el-table-column label="确认人" prop="userName" />
- <el-table-column label="确认时间" prop="confirmTime" />
- <el-table-column label="状态" width="100">
- <template #default="scope">
- <span class="statusSty"
- :style="scope.row.isConfirm ? 'background:#61C760':'background:#5093E1'">
- {{scope.row.isConfirm?'已确认':'未确认'}}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="100">
- <template #default="scope">
- <p class="indicitem" @click="confirmFn(scope.row)">确认</p>
- </template>
- </el-table-column>
- </el-table>
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="page.currentPage"
- :page-size="page.pagesize"
- layout="total, prev, pager, next, jumper"
- :total="page.total">
- </el-pagination>
- </div>
- </div>
- </div>
- </template>
- <script>
- import ExcelJS from 'exceljs'
- import fileSave from 'file-saver'
- import seachs from '../seachGroup.vue'
- import exportIcon from '../../assets/btnIcon/export.png'
- import {apiGetevaluationwarninginfoList, apiGetbinsectionList, apiGetevaluationwarninginfoSave} from '../../api/api'
- export default {
- components: { seachs },
- data() {
- return {
- sectionStr: '',
- warnTime: [],
- evaluationWaringData:[],
- moduleData: [],
- exportIcon: exportIcon,
- page:{
- pagesize: 15,
- currentPage: 1,
- total: 0
- },
- winPix: window.devicePixelRatio,
- }
- },
- created() {
- this.getevaluationWaringData()
- this.getBinSectionS()
- },
- methods:{
- getevaluationWaringData() {
- let that = this
- let st = that.warnTime.length>0?that.warnTime[0]:''
- let et = that.warnTime.length>0?that.warnTime[1]:''
- let params = {
- pageNum: that.page.currentPage,
- pageSize: that.page.pagesize,
- binStation: that.sectionStr,
- st: st,
- et: et
- }
- apiGetevaluationwarninginfoList(params).then(datas =>{
- if (datas && datas.data) {
- that.evaluationWaringData = datas.data.records
- that.page.total = datas.data.total
- }
- })
- },
-
- getBinSectionS() {
- let that = this
- apiGetbinsectionList().then(datas =>{
- if (datas && datas.data) {
- that.moduleData = datas.data
- }
- })
- },
- confirmFn(row) {
- let that = this
- row.isConfirm = true
- apiGetevaluationwarninginfoSave(row).then(datas =>{
- if (datas) {
- that.getevaluationWaringData()
- }
- })
- },
- changeTime(val) {
- console.log(val)
- },
- getSeachData() {
- this.page.currentPage = 1
- this.getevaluationWaringData()
- },
- resetSeach() {
- this.page.currentPage = 1
- this.sectionStr = ''
- this.getevaluationWaringData()
- },
- handleSizeChange(val){
- this.page.pagesize = val
- this.getevaluationWaringData()
- },
- handleCurrentChange(val){
- this.page.currentPage =val
- this.getevaluationWaringData()
- },
- handleExport() {
- let that = this
- let st = that.warnTime.length>0?that.warnTime[0]:''
- let et = that.warnTime.length>0?that.warnTime[1]:''
- let params = {
- pageNum: 1,
- pageSize: 10000,
- binStation: that.sectionStr,
- st: st,
- et: et
- }
- apiGetevaluationwarninginfoList(params).then(datas =>{
- if (datas && datas.data) {
- that.getExportWarData(datas.data.records)
- }
- })
- },
- getExportWarData(datas) {
- let data = datas
- const workbook = new ExcelJS.Workbook()
- const worksheet = workbook.addWorksheet('Sheet1')
-
- let colums = []
- colums = [
- { header: 'ID', key: 'id', width: 26 },
- { header: '考评单位', key: 'company', width: 26 },
- { header: '指标类型', key: 'title', width: 26 },
- { header: '预警内容', key: 'content', width: 26 },
- { header: '目标值', key: 'targetValue', width: 26 },
- { header: '完成值', key: 'completeValue', width: 26 },
- { header: '预警时间', key: 'createTime', width: 26 },
- { header: '确认人', key: 'userName', width: 26 },
- { header: '确认时间', key: 'confirmTime', width: 26 }
- ]
- worksheet.columns = colums
- worksheet.getRow(1).font = {
- size: 12,
- bold: true
- }
- worksheet.addRows(data)
- workbook.xlsx.writeBuffer().then(buffer => {
-
- const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' })
- fileSave(blob, `考评预警数据导出.xlsx`)
- })
- },
- evalwarningTableSty() {
- if (this.winPix === 1.25) {
- return 'warning125Table'
- } else {
- return 'warning100Table'
- }
- }
- }
- }
- </script>
- <style lang="less">
- .evaluationWaring{
- .evaluationWaringBtn{
- .collectSeach{
- display: flex;
- padding: 24px 20px;
- .exceed{
- display: flex;
- .exceedSpan{
- width: 80px;
- height: 12px;
- font-size: 14px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #8991B0;
- line-height: 12px;
- margin-top: 14px;
- }
- }
- .el-select{
- margin-right:10px;
- .el-input__inner{
- height:40px;
- }
- .el-input__suffix{
- .el-select__caret{
- line-height:30px;
- }
- }
- }
- .el-date-editor{
- height: 40px;
- }
- }
- .warningExport{
- .el-button{
- position: relative;
- top: 24px;
- right: 10px;
- }
- }
- span{
- font-size:14px;
- }
- .PeriodBtn{
- display: flex;
- justify-content: end;
- padding: 20px 0;
- }
- .el-button{
- height: 30px;
- // width:100px;
- padding: 0 30px ;
- // padding-top: 8px;
- span{
- margin:0;
- }
- }
- .evaluationWaringTableData{
- margin-top: 20px;
- .warning125Table{
- .el-table__body-wrapper{
- height: 59vh !important;
- }
- }
- .warning100Table{
- .el-table__body-wrapper{
- height: 65vh !important;
- }
- }
- .el-table{
- .el-input__inner{
- height: 30px !important;
- }
- .el-radio__label{
- display: none;
- }
- .statusSty{
- width: 52px;
- height: 21px;
- line-height: 21px;
- display: inline-block;
- border-radius: 3px;
- color: #fff;
- padding: 0 0 0 10px;
- }
- .indicitem{
- color: #409EFF;
- font-size: 12px;
- margin-right: 20px;
- cursor:pointer;
- &:hover{
- text-decoration: underline;
- }
- }
- }
- .el-pagination{
- margin-top: 20px;
- text-align: end;
- position: relative;
- }
- }
- .el-overlay{
- .el-dialog{
- .el-dialog__body{
- padding: 30px 60px 30px 20px !important;
- .periodFrom{
- .el-select, .el-input{
- width: 100%;
- }
- .el-input{
- height: 30px;
- }
- }
- }
- }
- }
- }
- }
- </style>
|