|
|
@@ -0,0 +1,361 @@
|
|
|
+<template>
|
|
|
+ <div :class="showDatePicker || showSelect? 'homeMobeilMask': ''">
|
|
|
+ </div>
|
|
|
+ <div class="earlyWarningPage">
|
|
|
+ <van-nav-bar title="单位考评预警" />
|
|
|
+ <div class="mobeilVant">
|
|
|
+ <div class="mobeilTop">
|
|
|
+ <div class="topLeft">
|
|
|
+ <!-- <van-icon name="star" size="20" /> -->
|
|
|
+ <img :src="logoImg" alt="">
|
|
|
+ <span>全业务域考评系统</span>
|
|
|
+ </div>
|
|
|
+ <div class="topRight">
|
|
|
+ <span>系统导航</span>
|
|
|
+ <!-- <van-icon name="wap-nav" size="23" /> -->
|
|
|
+ <img :src="daohangImg" alt="" @click="chooseMenu">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="earlyWarningMain">
|
|
|
+ <div class="mainSeach">
|
|
|
+ <div class="rankingList">
|
|
|
+ <span>{{showDate}}年度</span>
|
|
|
+ <img :src="dateImg" @click="changePickerDate" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="sectionModel">
|
|
|
+ <span @click="changeSelect">{{binSectionName}}板块</span>
|
|
|
+ </div>
|
|
|
+ <div class="mainSeachImg">
|
|
|
+ <img :src="sortImg" alt="">
|
|
|
+ <img :src="seachImg" alt="" @click="getNotificationData(binSection, showDate)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-date-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ title="选择年季"
|
|
|
+ :columns-type="['year', 'month']"
|
|
|
+ :filter="filterPicker"
|
|
|
+ @confirm="confirmFn"
|
|
|
+ @cancel="cancelpickerFn"
|
|
|
+ v-if="showDatePicker"
|
|
|
+ />
|
|
|
+ <van-picker
|
|
|
+ title="选择板块"
|
|
|
+ :columns="columnSection"
|
|
|
+ @confirm="selectConfirm"
|
|
|
+ @cancel="cancelSelect"
|
|
|
+ v-if="showSelect"
|
|
|
+ />
|
|
|
+ <div class="mainModel">
|
|
|
+ <el-table :data="evaluationWaringData" style="width: 100%">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import logoImg from '../assets/mobeilImg/logo.png'
|
|
|
+import daohangImg from '../assets/mobeilImg/daohang.png'
|
|
|
+import dateImg from '../assets/mobeilImg/date.png'
|
|
|
+import sortImg from '../assets/mobeilImg/sort.png'
|
|
|
+import seachImg from '../assets/mobeilImg/seach.png'
|
|
|
+
|
|
|
+import {apiGetevaluationwarninginfoList} from '../api/api'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ logoImg: logoImg,
|
|
|
+ daohangImg: daohangImg,
|
|
|
+ dateImg: dateImg,
|
|
|
+ sortImg: sortImg,
|
|
|
+ seachImg: seachImg,
|
|
|
+ showDatePicker: false,
|
|
|
+ showSelect: false,
|
|
|
+ currentDate: [],
|
|
|
+ showDate: '',
|
|
|
+ binSection: 'HD',
|
|
|
+ binSectionName: '火电',
|
|
|
+ evaluationWaringData: [],
|
|
|
+ columnSection: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.showDate = new Date().getFullYear()-1
|
|
|
+ this.getevaluationWaringData()
|
|
|
+ this.columnSection = [
|
|
|
+ { text: '火电', value: 'HD' },
|
|
|
+ { text: '水电', value: 'SD' },
|
|
|
+ { text: '新能源', value: 'XNYFG' },
|
|
|
+ { text: '海外业务', value: 'GJYW' },
|
|
|
+ { text: '煤电一体化', value: 'MDYTH' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取公告数据
|
|
|
+ getevaluationWaringData() {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ binStation: '',
|
|
|
+ st: '',
|
|
|
+ et: ''
|
|
|
+ }
|
|
|
+ apiGetevaluationwarninginfoList(params).then(datas =>{
|
|
|
+ if (datas && datas.data) {
|
|
|
+ that.evaluationWaringData = datas.data.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ filterPicker(type, options) {
|
|
|
+ if (type === 'month') {
|
|
|
+ return options.filter((option) => Number(option.value) < 5);
|
|
|
+ }
|
|
|
+ return options;
|
|
|
+ },
|
|
|
+ noticDetail(row) {
|
|
|
+ let detailObj = JSON.stringify(row)
|
|
|
+ this.$router.push({ path: "/notificationDetail", query: {rowObj: detailObj}})
|
|
|
+ },
|
|
|
+ chooseMenu() {
|
|
|
+ this.$router.push({ path: "/menu"})
|
|
|
+ },
|
|
|
+ changePickerDate() {
|
|
|
+ this.showDatePicker = true
|
|
|
+ },
|
|
|
+ changeSelect() {
|
|
|
+ this.showSelect = true
|
|
|
+ },
|
|
|
+ confirmFn(val) {
|
|
|
+ this.showDate = val.selectedValues[0]
|
|
|
+ this.cancelpickerFn()
|
|
|
+ },
|
|
|
+ selectConfirm(val) {
|
|
|
+ this.binSection = val.selectedValues[0]
|
|
|
+ if (this.binSection === 'HD') {
|
|
|
+ this.binSectionName = '火电'
|
|
|
+ } else if (this.binSection === 'SD') {
|
|
|
+ this.binSectionName = '水电'
|
|
|
+ } else if (this.binSection === 'XNYFG') {
|
|
|
+ this.binSectionName = '新能源'
|
|
|
+ } else if (this.binSection === 'GJYW') {
|
|
|
+ this.binSectionName = '海外业务'
|
|
|
+ } else if (this.binSection === 'MDYTH') {
|
|
|
+ this.binSectionName = '煤电一体化'
|
|
|
+ }
|
|
|
+ this.cancelSelect()
|
|
|
+ },
|
|
|
+ cancelpickerFn() {
|
|
|
+ this.showDatePicker = false
|
|
|
+ },
|
|
|
+ cancelSelect() {
|
|
|
+ this.showSelect = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.homeMobeilMask{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0,0,0,0.5);
|
|
|
+ z-index: 111;
|
|
|
+}
|
|
|
+.earlyWarningPage {
|
|
|
+ background-color: #184FB4;
|
|
|
+ .van-nav-bar{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #184FB4;
|
|
|
+ color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ z-index: 111111;
|
|
|
+ .van-nav-bar__content{
|
|
|
+ .van-nav-bar__left{
|
|
|
+ .van-nav-bar__text{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mobeilVant{
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 45px;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+ .mobeilTop{
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .topLeft{
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width: 24px;
|
|
|
+ height: 28px;
|
|
|
+ position: relative;
|
|
|
+ top: 18px;
|
|
|
+ left: -10px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #444950;
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topRight{
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width: 22px;
|
|
|
+ height: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: 21px;
|
|
|
+ left: 5px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #545960;
|
|
|
+ line-height: 60px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .earlyWarningMain{
|
|
|
+ // height: 50px;
|
|
|
+ background-color: #ededf5;
|
|
|
+ padding: 17px 20px;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ .mainSeach{
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ .rankingList{
|
|
|
+ width: 37%;
|
|
|
+ height: 40px;
|
|
|
+ background: #184FB4;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 85%;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 5px;
|
|
|
+ position: relative;
|
|
|
+ left: 20px;
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 22px;
|
|
|
+ height: 18px;
|
|
|
+ position: relative;
|
|
|
+ top: -10px;
|
|
|
+ left: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sectionModel{
|
|
|
+ width: 37%;
|
|
|
+ height: 40px;
|
|
|
+ background: #838DAB;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ margin-right: 15px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mainSeachImg{
|
|
|
+ width: 17%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ img:nth-child(1){
|
|
|
+ width: 25px;
|
|
|
+ height: 15px;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ img:nth-child(2){
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-picker{
|
|
|
+ z-index: 222222
|
|
|
+ }
|
|
|
+ .mainModel{
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px 0;
|
|
|
+ .el-table{
|
|
|
+ .el-table__header-wrapper{
|
|
|
+ .el-table__header{
|
|
|
+ tr{
|
|
|
+ .cell{
|
|
|
+ line-height: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-table__body-wrapper{
|
|
|
+ .el-table__body{
|
|
|
+ tr{
|
|
|
+ .cell{
|
|
|
+ img{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statusSty{
|
|
|
+ width: 52px;
|
|
|
+ height: 21px;
|
|
|
+ line-height: 21px;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 3px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
