|
|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <div :class="showDatePicker || showSelect? 'homeMobeilMask': ''">
|
|
|
+ </div>
|
|
|
+ <div class="notificationPage">
|
|
|
+ <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="notificationMain">
|
|
|
+ <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="noticeData" style="width: 100%">
|
|
|
+ <el-table-column type="index" label="序号" align="center"></el-table-column>
|
|
|
+ <el-table-column label="公告名称" prop="noticeTitle" width="130" />
|
|
|
+ <el-table-column label="所属部门" prop="releaseDeptName" width="150" />
|
|
|
+ <el-table-column label="创建时间" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{scope.row.createTime.substring(0, scope.row.createTime.indexOf(' '))}}</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 {apiGetevaluationCircularDisplaylist} 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: '火电',
|
|
|
+ noticeData: [],
|
|
|
+ columnSection: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.showDate = new Date().getFullYear()-1
|
|
|
+ this.getNotificationData()
|
|
|
+ this.columnSection = [
|
|
|
+ { text: '火电', value: 'HD' },
|
|
|
+ { text: '水电', value: 'SD' },
|
|
|
+ { text: '新能源', value: 'XNYFG' },
|
|
|
+ { text: '海外业务', value: 'GJYW' },
|
|
|
+ { text: '煤电一体化', value: 'MDYTH' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取公告数据
|
|
|
+ getNotificationData() {
|
|
|
+ let that = this
|
|
|
+ // let userMes = JSON.parse(window.sessionStorage.getItem('user'))
|
|
|
+ // if (userMes.deptId) {
|
|
|
+ let params = {
|
|
|
+ // deptId: userMes.deptId,
|
|
|
+ deptId: '1',
|
|
|
+ noticeTitle: ''
|
|
|
+ }
|
|
|
+ apiGetevaluationCircularDisplaylist(params).then(datas => {
|
|
|
+ if (datas && datas.data) {
|
|
|
+ that.noticeData = datas.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ filterPicker(type, options) {
|
|
|
+ if (type === 'month') {
|
|
|
+ return options.filter((option) => Number(option.value) < 5);
|
|
|
+ }
|
|
|
+ return options;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+}
|
|
|
+.notificationPage {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .notificationMain{
|
|
|
+ // 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
