|
|
@@ -3,11 +3,16 @@
|
|
|
<el-row>
|
|
|
<el-col :span="18" class="quarter">
|
|
|
<div class="searchFn">
|
|
|
- <el-date-picker v-model="changeYear" type="year" value-format="YYYY" placeholder="选择年份" @change="changeYearFn" />
|
|
|
+ <el-date-picker v-model="changeYear" type="year" value-format="YYYY" placeholder="选择年份"
|
|
|
+ @change="changeYearFn" />
|
|
|
<div class="quarterChoose">
|
|
|
- <el-icon :size="20" color="#3B7AD1" @click="arrowLeft"><ArrowLeft /></el-icon>
|
|
|
+ <el-icon :size="20" color="#3B7AD1" @click="arrowLeft">
|
|
|
+ <ArrowLeft />
|
|
|
+ </el-icon>
|
|
|
<span class="choose">{{seasonStr}}</span>
|
|
|
- <el-icon :size="20" color="#3B7AD1" @click="arrowRight"><ArrowRight /></el-icon>
|
|
|
+ <el-icon :size="20" color="#3B7AD1" @click="arrowRight">
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tableHeader">
|
|
|
@@ -51,13 +56,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- v-for="it in 4" :key="it" -->
|
|
|
+ <!-- v-for="it in 4" :key="it" -->
|
|
|
<div class="tableMain" v-for="(it, index) in cupDataYearArr.section" :key="index">
|
|
|
<div class="mainOne">
|
|
|
<span :style="index === 2 ? 'top:45px': ''">{{it.name}}</span>
|
|
|
</div>
|
|
|
<div class="mainTwo">
|
|
|
- <div class="echartsNum" :style="it.echartsData.allNum < 10 ? 'left:70px': ''">{{it.echartsData.allNum}}</div>
|
|
|
+ <div class="echartsNum" :style="it.echartsData.allNum < 10 ? 'left:70px': ''">
|
|
|
+ {{it.echartsData.allNum}}</div>
|
|
|
<div :id="'pieChart'+index" style="height: 100px;width: 100%"></div>
|
|
|
<el-row>
|
|
|
<el-col :span="12">
|
|
|
@@ -98,70 +104,46 @@
|
|
|
<span>{{item.company}}</span>
|
|
|
<span>{{item.score}}</span>
|
|
|
<div class="mainFourImg">
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.matter_heigh_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.matter_heigh_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg" alt="">
|
|
|
+ <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg"
|
|
|
+ alt="">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.manage_low_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.manage_low_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" alt="">
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg"
|
|
|
+ alt="">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.manage_height_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.manage_height_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.manage_height === 0 ? cenImg : item.manage_height === 1 ? topImg : botImg" alt="">
|
|
|
+ <img :src="item.manage_height === 0 ? cenImg : item.manage_height === 1 ? topImg : botImg"
|
|
|
+ alt="">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.manage_low_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.manage_low_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" alt="">
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg"
|
|
|
+ alt="">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.standard_heigh_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.standard_heigh_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg" alt="">
|
|
|
+ <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg"
|
|
|
+ alt="">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.standard_low_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.standard_low_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg" alt="">
|
|
|
+ <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg"
|
|
|
+ alt="">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
@@ -179,7 +161,8 @@
|
|
|
<img :src="item.img" alt="">
|
|
|
<div class="footerProgress">
|
|
|
<span class="footerOneSpan">{{item.company}}</span>
|
|
|
- <el-progress :percentage="Math.floor((item.score/item.base_score)*100)" :stroke-width="5" />
|
|
|
+ <el-progress :percentage="Math.floor((item.score/item.base_score)*100)"
|
|
|
+ :stroke-width="5" />
|
|
|
<span class="footerTwoSpan">{{item.grade}}</span>
|
|
|
<span class="footerThreeSpan">{{item.score}}</span>
|
|
|
</div>
|
|
|
@@ -188,74 +171,51 @@
|
|
|
</div>
|
|
|
<div class="footerThree">
|
|
|
<div class="mainMore" @click="yearSeeMore(it.nameEn, 'season')"></div>
|
|
|
- <div style="display: flex; justify-content: space-between;" v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
|
|
|
+ <div style="display: flex; justify-content: space-between;"
|
|
|
+ v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
|
|
|
<div class="footerThreeMsg" v-for="it in matterMsg" :key="it">
|
|
|
<div class="footerImg">
|
|
|
<span>{{it}}</span>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.matter_heigh_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.matter_heigh_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg" v-if="it === '加分事项'">
|
|
|
+ <img :src="item.matter_heigh === 0 ? cenImg : item.matter_heigh === 1 ? topImg : botImg"
|
|
|
+ v-if="it === '加分事项'">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.matter_low_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.matter_low_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.matter_low === 0 ? cenImg : item.matter_low === 1 ? topImg : botImg" v-if="it === '扣分事项'">
|
|
|
+ <img :src="item.matter_low === 0 ? cenImg : item.matter_low === 1 ? topImg : botImg"
|
|
|
+ v-if="it === '扣分事项'">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.manage_heigh_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.manage_heigh_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.manage_heigh === 0 ? cenImg : item.manage_heigh === 1 ? topImg : botImg" v-if="it === '管理加分'">
|
|
|
+ <img :src="item.manage_heigh === 0 ? cenImg : item.manage_heigh === 1 ? topImg : botImg"
|
|
|
+ v-if="it === '管理加分'">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.manage_low_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.manage_low_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg" v-if="it === '管理扣分'">
|
|
|
+ <img :src="item.manage_low === 0 ? cenImg : item.manage_low === 1 ? topImg : botImg"
|
|
|
+ v-if="it === '管理扣分'">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.standard_heigh_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.standard_heigh_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg" v-if="it === '高于基准'">
|
|
|
+ <img :src="item.standard_heigh === 0 ? cenImg : item.standard_heigh === 1 ? topImg : botImg"
|
|
|
+ v-if="it === '高于基准'">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
- <el-popover
|
|
|
- placement="right-start"
|
|
|
- :title="item.company +' '+ item.score"
|
|
|
- :width="200"
|
|
|
- trigger="hover"
|
|
|
- :content="item.standard_low_note"
|
|
|
- >
|
|
|
+ <el-popover placement="right-start" :title="item.company +' '+ item.score"
|
|
|
+ :width="200" trigger="hover" :content="item.standard_low_note">
|
|
|
<template #reference>
|
|
|
- <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg" v-if="it === '低于基准'">
|
|
|
+ <img :src="item.standard_low === 0 ? cenImg : item.standard_low === 1 ? topImg : botImg"
|
|
|
+ v-if="it === '低于基准'">
|
|
|
</template>
|
|
|
</el-popover>
|
|
|
</div>
|
|
|
@@ -268,7 +228,9 @@
|
|
|
<div class="gateway_report">
|
|
|
<div class="reportTit">
|
|
|
<p>通告栏</p>
|
|
|
- <el-icon :size="20" color="#3B7AD1" @click="watchAllNotification"><Plus /></el-icon>
|
|
|
+ <el-icon :size="20" color="#3B7AD1" @click="watchAllNotification">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
<div class="reportMain">
|
|
|
<div class="reportMain_msg" v-for="it in noticeData" :key="it.id">
|
|
|
@@ -276,7 +238,8 @@
|
|
|
<div class="rightTitMsg">
|
|
|
<p @click="watchDetail(it)" style="cursor:pointer">{{it.noticeTitle}}</p>
|
|
|
<div style="margin-top: 5px">
|
|
|
- <span style="margin-right: 10px">{{it.createTime.substring(0, it.createTime.indexOf(' '))}}</span>
|
|
|
+ <span
|
|
|
+ style="margin-right: 10px">{{it.createTime.substring(0, it.createTime.indexOf(' '))}}</span>
|
|
|
<span>{{it.releaseDeptName}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -293,758 +256,853 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import cup1 from '../assets/getwayImg/cup1.png'
|
|
|
-import cup2 from '../assets/getwayImg/cup2.png'
|
|
|
-import cup3 from '../assets/getwayImg/cup3.png'
|
|
|
-
|
|
|
-import topImg from '../assets/getwayImg/topNew.png'
|
|
|
-import botImg from '../assets/getwayImg/botNew.png'
|
|
|
-import cenImg from '../assets/getwayImg/cenNew.png'
|
|
|
-
|
|
|
-import {apiGetevaluationportallist, apiGetevaluationCircularDisplaylist} from '../api/api'
|
|
|
-
|
|
|
-import yearFrom from './gateWay/gatewayNewYearFrom.vue'
|
|
|
-import seasonFrom from './gateWay/gatewayNewSeasonFrom.vue'
|
|
|
-import notificationDetail from './gateWay/gateWayNotificationDetail.vue'
|
|
|
-import NotificationAllData from './gateWay/gateWayNotificationAllData.vue'
|
|
|
-export default {
|
|
|
- components: {yearFrom, seasonFrom, notificationDetail, NotificationAllData},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- noticeData: [],
|
|
|
- cupDataYearArr: {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- },
|
|
|
- cupDataSeasonArr: {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- },
|
|
|
- cupFootMsgArr: [],
|
|
|
- matterMsg: ['加分事项', '扣分事项', '管理加分', '管理扣分', '高于基准', '低于基准'],
|
|
|
- topImg: topImg,
|
|
|
- botImg: botImg,
|
|
|
- cenImg: cenImg,
|
|
|
- changeYear: '',
|
|
|
- seasonStr: '',
|
|
|
- seasonArr: ['第一季度', '第二季度', '第三季度']
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.changeYear = (new Date().getFullYear()-1).toString()
|
|
|
- this.seasonStr = '第一季度'
|
|
|
- this.cupFootMsgArr = [
|
|
|
- {
|
|
|
- level: 'A',
|
|
|
- points: '134',
|
|
|
- img: cup1,
|
|
|
- name: '大港电厂（广安津能）'
|
|
|
- },
|
|
|
- {
|
|
|
- level: 'A',
|
|
|
- points: '134',
|
|
|
- img: cup2,
|
|
|
- name: '怀安热电'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getGateWayData()
|
|
|
- this.getDeptNoticeData()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getDeptNoticeData() {
|
|
|
- let that = this
|
|
|
- let userMes = JSON.parse(window.sessionStorage.getItem('user'))
|
|
|
- if (userMes.deptId) {
|
|
|
- let params = {
|
|
|
- deptId: userMes.deptId,
|
|
|
- noticeTitle: ''
|
|
|
- }
|
|
|
- apiGetevaluationCircularDisplaylist(params).then(datas =>{
|
|
|
- if (datas && datas.data) {
|
|
|
- that.noticeData = datas.data
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ import cup1 from '../assets/getwayImg/cup1.png'
|
|
|
+ import cup2 from '../assets/getwayImg/cup2.png'
|
|
|
+ import cup3 from '../assets/getwayImg/cup3.png'
|
|
|
+
|
|
|
+ import topImg from '../assets/getwayImg/topNew.png'
|
|
|
+ import botImg from '../assets/getwayImg/botNew.png'
|
|
|
+ import cenImg from '../assets/getwayImg/cenNew.png'
|
|
|
+
|
|
|
+ import {
|
|
|
+ apiGetevaluationportallist,
|
|
|
+ apiGetevaluationCircularDisplaylist
|
|
|
+ } from '../api/api'
|
|
|
+
|
|
|
+ import yearFrom from './gateWay/gatewayNewYearFrom.vue'
|
|
|
+ import seasonFrom from './gateWay/gatewayNewSeasonFrom.vue'
|
|
|
+ import notificationDetail from './gateWay/gateWayNotificationDetail.vue'
|
|
|
+ import NotificationAllData from './gateWay/gateWayNotificationAllData.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ yearFrom,
|
|
|
+ seasonFrom,
|
|
|
+ notificationDetail,
|
|
|
+ NotificationAllData
|
|
|
},
|
|
|
- changeYearFn(val) {
|
|
|
- this.changeYear = val
|
|
|
- this.cupDataYearArr = {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- }
|
|
|
- this.cupDataSeasonArr = {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ noticeData: [],
|
|
|
+ cupDataYearArr: {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ },
|
|
|
+ cupDataSeasonArr: {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ },
|
|
|
+ cupFootMsgArr: [],
|
|
|
+ matterMsg: ['加分事项', '扣分事项', '管理加分', '管理扣分', '高于基准', '低于基准'],
|
|
|
+ topImg: topImg,
|
|
|
+ botImg: botImg,
|
|
|
+ cenImg: cenImg,
|
|
|
+ changeYear: '',
|
|
|
+ seasonStr: '',
|
|
|
+ seasonArr: ['第一季度', '第二季度', '第三季度']
|
|
|
}
|
|
|
- this.getGateWayData()
|
|
|
- },
|
|
|
- watchDetail(row) {
|
|
|
- this.$refs.notificationDetail.init(row)
|
|
|
},
|
|
|
- watchAllNotification() {
|
|
|
- this.$refs.notificationAllData.init()
|
|
|
- },
|
|
|
- arrowLeft() {
|
|
|
- if (this.seasonStr === '第一季度') {
|
|
|
- this.seasonStr = '第三季度'
|
|
|
- } else if (this.seasonStr === '第二季度') {
|
|
|
- this.seasonStr = '第一季度'
|
|
|
- } else if (this.seasonStr === '第三季度') {
|
|
|
- this.seasonStr = '第二季度'
|
|
|
- }
|
|
|
- this.cupDataYearArr = {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- }
|
|
|
- this.cupDataSeasonArr = {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- }
|
|
|
- this.getGateWayData()
|
|
|
+ created() {
|
|
|
+ this.changeYear = (new Date().getFullYear() - 1).toString()
|
|
|
+ this.seasonStr = '第一季度'
|
|
|
+ this.cupFootMsgArr = [{
|
|
|
+ level: 'A',
|
|
|
+ points: '134',
|
|
|
+ img: cup1,
|
|
|
+ name: '大港电厂（广安津能）'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 'A',
|
|
|
+ points: '134',
|
|
|
+ img: cup2,
|
|
|
+ name: '怀安热电'
|
|
|
+ }
|
|
|
+ ]
|
|
|
},
|
|
|
- arrowRight() {
|
|
|
- if (this.seasonStr === '第一季度') {
|
|
|
- this.seasonStr = '第二季度'
|
|
|
- } else if (this.seasonStr === '第二季度') {
|
|
|
- this.seasonStr = '第三季度'
|
|
|
- } else if (this.seasonStr === '第三季度') {
|
|
|
- this.seasonStr = '第一季度'
|
|
|
- }
|
|
|
- this.cupDataYearArr = {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- }
|
|
|
- this.cupDataSeasonArr = {
|
|
|
- section: [],
|
|
|
- integration: []
|
|
|
- }
|
|
|
+ mounted() {
|
|
|
this.getGateWayData()
|
|
|
+ // this.getDeptNoticeData()
|
|
|
},
|
|
|
- // 获取首页数据
|
|
|
- getGateWayData() {
|
|
|
- let that = this
|
|
|
- let params = {
|
|
|
- binSection: '',
|
|
|
- year: that.changeYear,
|
|
|
- season: that.seasonStr === '第一季度' ? '1' : that.seasonStr === '第二季度' ? '2' : '3'
|
|
|
- }
|
|
|
- apiGetevaluationportallist(params).then(datas =>{
|
|
|
- if (datas && datas.data) {
|
|
|
- let secArr = ['HD', 'SD', 'XNYFG', 'GJYW', 'MDYTH']
|
|
|
- secArr.forEach(item =>{
|
|
|
- for(let i in datas.data.year) {
|
|
|
- let it = datas.data.year[i]
|
|
|
- if (item === i && i !== 'MDYTH') {
|
|
|
- let gradeA = 0
|
|
|
- let gradeB = 0
|
|
|
- let gradeC = 0
|
|
|
- let gradeD = 0
|
|
|
- let tableData = []
|
|
|
- it.forEach((iv, index) =>{
|
|
|
- if (index < 3) {
|
|
|
- let obj = iv
|
|
|
- if (index === 0) {
|
|
|
- obj.img = cup1
|
|
|
- } else if (index === 1) {
|
|
|
- obj.img = cup2
|
|
|
- } else if (index === 2) {
|
|
|
- obj.img = cup3
|
|
|
+ methods: {
|
|
|
+ getDeptNoticeData() {
|
|
|
+ let that = this
|
|
|
+ let userMes = JSON.parse(window.sessionStorage.getItem('user'))
|
|
|
+ if (userMes.deptId) {
|
|
|
+ let params = {
|
|
|
+ deptId: userMes.deptId,
|
|
|
+ noticeTitle: ''
|
|
|
+ }
|
|
|
+ apiGetevaluationCircularDisplaylist(params).then(datas => {
|
|
|
+ if (datas && datas.data) {
|
|
|
+ that.noticeData = datas.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeYearFn(val) {
|
|
|
+ this.changeYear = val
|
|
|
+ this.cupDataYearArr = {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ }
|
|
|
+ this.cupDataSeasonArr = {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ }
|
|
|
+ this.getGateWayData()
|
|
|
+ },
|
|
|
+ watchDetail(row) {
|
|
|
+ this.$refs.notificationDetail.init(row)
|
|
|
+ },
|
|
|
+ watchAllNotification() {
|
|
|
+ this.$refs.notificationAllData.init()
|
|
|
+ },
|
|
|
+ arrowLeft() {
|
|
|
+ if (this.seasonStr === '第一季度') {
|
|
|
+ this.seasonStr = '第三季度'
|
|
|
+ } else if (this.seasonStr === '第二季度') {
|
|
|
+ this.seasonStr = '第一季度'
|
|
|
+ } else if (this.seasonStr === '第三季度') {
|
|
|
+ this.seasonStr = '第二季度'
|
|
|
+ }
|
|
|
+ this.cupDataYearArr = {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ }
|
|
|
+ this.cupDataSeasonArr = {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ }
|
|
|
+ this.getGateWayData()
|
|
|
+ },
|
|
|
+ arrowRight() {
|
|
|
+ if (this.seasonStr === '第一季度') {
|
|
|
+ this.seasonStr = '第二季度'
|
|
|
+ } else if (this.seasonStr === '第二季度') {
|
|
|
+ this.seasonStr = '第三季度'
|
|
|
+ } else if (this.seasonStr === '第三季度') {
|
|
|
+ this.seasonStr = '第一季度'
|
|
|
+ }
|
|
|
+ this.cupDataYearArr = {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ }
|
|
|
+ this.cupDataSeasonArr = {
|
|
|
+ section: [],
|
|
|
+ integration: []
|
|
|
+ }
|
|
|
+ this.getGateWayData()
|
|
|
+ },
|
|
|
+ // 获取首页数据
|
|
|
+ getGateWayData() {
|
|
|
+ let that = this
|
|
|
+ let params = {
|
|
|
+ binSection: '',
|
|
|
+ year: that.changeYear,
|
|
|
+ season: that.seasonStr === '第一季度' ? '1' : that.seasonStr === '第二季度' ? '2' : '3'
|
|
|
+ }
|
|
|
+ apiGetevaluationportallist(params).then(datas => {
|
|
|
+ if (datas && datas.data) {
|
|
|
+ let secArr = ['HD', 'SD', 'XNYFG', 'GJYW', 'MDYTH']
|
|
|
+ secArr.forEach(item => {
|
|
|
+ for (let i in datas.data.year) {
|
|
|
+ let it = datas.data.year[i]
|
|
|
+ if (item === i && i !== 'MDYTH') {
|
|
|
+ let gradeA = 0
|
|
|
+ let gradeB = 0
|
|
|
+ let gradeC = 0
|
|
|
+ let gradeD = 0
|
|
|
+ let tableData = []
|
|
|
+ it.forEach((iv, index) => {
|
|
|
+ if (index < 3) {
|
|
|
+ let obj = iv
|
|
|
+ if (index === 0) {
|
|
|
+ obj.img = cup1
|
|
|
+ } else if (index === 1) {
|
|
|
+ obj.img = cup2
|
|
|
+ } else if (index === 2) {
|
|
|
+ obj.img = cup3
|
|
|
+ }
|
|
|
+ tableData.push(iv)
|
|
|
}
|
|
|
- tableData.push(iv)
|
|
|
- }
|
|
|
- if (iv.grade === 'A') {
|
|
|
- gradeA ++
|
|
|
- } else if (iv.grade === 'B') {
|
|
|
- gradeB ++
|
|
|
- } else if (iv.grade === 'C') {
|
|
|
- gradeC ++
|
|
|
- } else if (iv.grade === 'D') {
|
|
|
- gradeD ++
|
|
|
- }
|
|
|
- })
|
|
|
- let obj = {
|
|
|
- name: item === 'HD' ? '火电板块' : item === 'SD' ? '水电板块' :item === 'XNYFG' ? '新能源' : '海外业务',
|
|
|
- nameEn: item,
|
|
|
- echartsData: {
|
|
|
- allNum: it.length,
|
|
|
- echarts: [
|
|
|
- { value: gradeA, name: 'A类' },
|
|
|
- { value: gradeB, name: 'B类' },
|
|
|
- { value: gradeC, name: 'C类' },
|
|
|
- { value: gradeD, name: 'D类' }
|
|
|
- ]
|
|
|
- },
|
|
|
- tableDatas: tableData,
|
|
|
- allTableData: it,
|
|
|
- section: [],
|
|
|
- sectionAll: []
|
|
|
- }
|
|
|
- that.cupDataYearArr.section.push(obj)
|
|
|
- } else if(item === i && i === 'MDYTH') {
|
|
|
- it.forEach((iv, index) =>{
|
|
|
- if (index<2) {
|
|
|
- if (index === 0) {
|
|
|
- iv.img = cup1
|
|
|
- } else if (index === 1) {
|
|
|
- iv.img = cup2
|
|
|
+ if (iv.grade === 'A') {
|
|
|
+ gradeA++
|
|
|
+ } else if (iv.grade === 'B') {
|
|
|
+ gradeB++
|
|
|
+ } else if (iv.grade === 'C') {
|
|
|
+ gradeC++
|
|
|
+ } else if (iv.grade === 'D') {
|
|
|
+ gradeD++
|
|
|
}
|
|
|
- that.cupDataYearArr.integration.push(iv)
|
|
|
+ })
|
|
|
+ let obj = {
|
|
|
+ name: item === 'HD' ? '火电板块' : item === 'SD' ? '水电板块' :
|
|
|
+ item === 'XNYFG' ? '新能源' : '海外业务',
|
|
|
+ nameEn: item,
|
|
|
+ echartsData: {
|
|
|
+ allNum: it.length,
|
|
|
+ echarts: [{
|
|
|
+ value: gradeA,
|
|
|
+ name: 'A类'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: gradeB,
|
|
|
+ name: 'B类'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: gradeC,
|
|
|
+ name: 'C类'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: gradeD,
|
|
|
+ name: 'D类'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tableDatas: tableData,
|
|
|
+ allTableData: it,
|
|
|
+ section: [],
|
|
|
+ sectionAll: []
|
|
|
}
|
|
|
- })
|
|
|
+ that.cupDataYearArr.section.push(obj)
|
|
|
+ } else if (item === i && i === 'MDYTH') {
|
|
|
+ it.forEach((iv, index) => {
|
|
|
+ if (index < 2) {
|
|
|
+ if (index === 0) {
|
|
|
+ iv.img = cup1
|
|
|
+ } else if (index === 1) {
|
|
|
+ iv.img = cup2
|
|
|
+ }
|
|
|
+ that.cupDataYearArr.integration.push(iv)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- that.cupDataYearArr.section.forEach(item =>{
|
|
|
- for(let i in datas.data.season) {
|
|
|
- let it = datas.data.season[i]
|
|
|
- if (item.nameEn === i) {
|
|
|
- it.forEach((iv, index) =>{
|
|
|
- if (index<3) {
|
|
|
- item.section.push(iv)
|
|
|
- }
|
|
|
- })
|
|
|
- item.sectionAll = it
|
|
|
+ })
|
|
|
+ that.cupDataYearArr.section.forEach(item => {
|
|
|
+ for (let i in datas.data.season) {
|
|
|
+ let it = datas.data.season[i]
|
|
|
+ if (item.nameEn === i) {
|
|
|
+ it.forEach((iv, index) => {
|
|
|
+ if (index < 3) {
|
|
|
+ item.section.push(iv)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ item.sectionAll = it
|
|
|
+ }
|
|
|
}
|
|
|
+ })
|
|
|
+ if (datas.data.season['MDYTH']) {
|
|
|
+ datas.data.season['MDYTH'].forEach((item, index) => {
|
|
|
+ if (index < 2) {
|
|
|
+ that.cupDataSeasonArr.integration.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- })
|
|
|
- if (datas.data.season['MDYTH']) {
|
|
|
- datas.data.season['MDYTH'].forEach((item, index) =>{
|
|
|
- if (index<2) {
|
|
|
- that.cupDataSeasonArr.integration.push(item)
|
|
|
- }
|
|
|
+ console.log(that.cupDataYearArr)
|
|
|
+ console.log(that.cupDataSeasonArr)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ that.getEcharts(that.cupDataYearArr.section)
|
|
|
})
|
|
|
}
|
|
|
- console.log(that.cupDataYearArr)
|
|
|
- console.log(that.cupDataSeasonArr)
|
|
|
- this.$nextTick(() =>{
|
|
|
- that.getEcharts(that.cupDataYearArr.section)
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getEcharts(datas) {
|
|
|
- datas.forEach((item, index) =>{
|
|
|
- this.getEchartsData(item.echartsData.echarts, 'pieChart'+index)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- getEchartsData(data, name) {
|
|
|
- let option = {
|
|
|
- color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '年度榜',
|
|
|
- type: 'pie',
|
|
|
- radius: ['50%', '70%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- // emphasis: {
|
|
|
- // label: {
|
|
|
- // show: true,
|
|
|
- // fontSize: 10,
|
|
|
- // fontWeight: 'bold'
|
|
|
- // }
|
|
|
- // },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getEcharts(datas) {
|
|
|
+ datas.forEach((item, index) => {
|
|
|
+ this.getEchartsData(item.echartsData.echarts, 'pieChart' + index)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getEchartsData(data, name) {
|
|
|
+ let option = {
|
|
|
+ color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
},
|
|
|
- data: data
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- let dom = document.getElementById(name);
|
|
|
- dom.removeAttribute("_echarts_instance_")
|
|
|
- let myChart = this.$echarts.init(dom);
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function () {
|
|
|
- myChart.resize()
|
|
|
- })
|
|
|
- },
|
|
|
- yearSeeMore(name, type) {
|
|
|
- if (type === 'year') {
|
|
|
- this.$refs.yearFrom.init(name, this.changeYear, this.seasonStr)
|
|
|
- } else {
|
|
|
- this.$refs.seasonFrom.init(name, this.changeYear, this.seasonStr)
|
|
|
+ series: [{
|
|
|
+ name: '年度榜',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['50%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ // emphasis: {
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // fontSize: 10,
|
|
|
+ // fontWeight: 'bold'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let dom = document.getElementById(name);
|
|
|
+ dom.removeAttribute("_echarts_instance_")
|
|
|
+ let myChart = this.$echarts.init(dom);
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ yearSeeMore(name, type) {
|
|
|
+ if (type === 'year') {
|
|
|
+ this.$refs.yearFrom.init(name, this.changeYear, this.seasonStr)
|
|
|
+ } else {
|
|
|
+ this.$refs.seasonFrom.init(name, this.changeYear, this.seasonStr)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.gatewayNewPage{
|
|
|
- height: 93vh;
|
|
|
- width: 87vw;
|
|
|
- background: #EDEFF5;
|
|
|
- padding: 15px 20px;
|
|
|
- .quarter{
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- height: 100%;
|
|
|
- // padding-right: 15px;
|
|
|
- .searchFn{
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #E1E3EA;
|
|
|
- .el-date-editor--year{
|
|
|
- width: 130px;
|
|
|
- margin: 10px 0 0 20px;
|
|
|
- .el-input__wrapper{
|
|
|
- background: #2C7EDC;
|
|
|
- height: 30px;
|
|
|
- .el-input__prefix, .el-input__inner, .el-input__suffix{
|
|
|
- color: #fff;
|
|
|
+ .gatewayNewPage {
|
|
|
+ height: 93vh;
|
|
|
+ width: 87vw;
|
|
|
+ background: #EDEFF5;
|
|
|
+ padding: 15px 20px;
|
|
|
+
|
|
|
+ .quarter {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // padding-right: 15px;
|
|
|
+ .searchFn {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #E1E3EA;
|
|
|
+
|
|
|
+ .el-date-editor--year {
|
|
|
+ width: 130px;
|
|
|
+ margin: 10px 0 0 20px;
|
|
|
+
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: #2C7EDC;
|
|
|
+ height: 30px;
|
|
|
+
|
|
|
+ .el-input__prefix,
|
|
|
+ .el-input__inner,
|
|
|
+ .el-input__suffix {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- ::-webkit-input-placeholder{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .quarterChoose{
|
|
|
- position: relative;
|
|
|
- left: 33%;
|
|
|
- top: 15px;
|
|
|
- width: 225px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- .choose{
|
|
|
- position: relative;
|
|
|
- top: -1px;
|
|
|
+
|
|
|
+ ::-webkit-input-placeholder {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
- .el-icon{
|
|
|
- cursor: pointer;
|
|
|
+
|
|
|
+ .quarterChoose {
|
|
|
+ position: relative;
|
|
|
+ left: 33%;
|
|
|
+ top: 15px;
|
|
|
+ width: 225px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .choose {
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .tableHeader{
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #E1E3EA;
|
|
|
- height: 75px;
|
|
|
- .headerComTit{
|
|
|
- height: 40px;
|
|
|
+
|
|
|
+ .tableHeader {
|
|
|
+ display: flex;
|
|
|
border-bottom: 1px solid #E1E3EA;
|
|
|
- span{
|
|
|
+ height: 75px;
|
|
|
+
|
|
|
+ .headerComTit {
|
|
|
+ height: 40px;
|
|
|
+ border-bottom: 1px solid #E1E3EA;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #3B7AD1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .headerNameTit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8px 20px;
|
|
|
font-size: 14px;
|
|
|
- color: #3B7AD1;
|
|
|
+ color: #414141;
|
|
|
}
|
|
|
- }
|
|
|
- .headerNameTit{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 8px 20px;
|
|
|
- font-size: 14px;
|
|
|
- color: #414141;
|
|
|
- }
|
|
|
- .headerOne{
|
|
|
- width: 35px;
|
|
|
- background: #184FB4;
|
|
|
- }
|
|
|
- .headerTwo{
|
|
|
- width: 150px;
|
|
|
- border-right: 1px solid #E1E3EA;
|
|
|
- .headerTwoTit{
|
|
|
- position: relative;
|
|
|
- top: 10px;
|
|
|
- left: 40px;
|
|
|
+
|
|
|
+ .headerOne {
|
|
|
+ width: 35px;
|
|
|
+ background: #184FB4;
|
|
|
}
|
|
|
- }
|
|
|
- .headerThree{
|
|
|
- width: 350px;
|
|
|
- border-right: 1px solid #E1E3EA;
|
|
|
- .headerThreeTit{
|
|
|
- position: relative;
|
|
|
- top: 10px;
|
|
|
- left: 150px;
|
|
|
+
|
|
|
+ .headerTwo {
|
|
|
+ width: 150px;
|
|
|
+ border-right: 1px solid #E1E3EA;
|
|
|
+
|
|
|
+ .headerTwoTit {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .headerFour{
|
|
|
- width: calc(100% - 535px);
|
|
|
- .headerFourTit{
|
|
|
- position: relative;
|
|
|
- top: 10px;
|
|
|
- left: 40%;
|
|
|
+
|
|
|
+ .headerThree {
|
|
|
+ width: 350px;
|
|
|
+ border-right: 1px solid #E1E3EA;
|
|
|
+
|
|
|
+ .headerThreeTit {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 150px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .tableMain{
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #E1E3EA;
|
|
|
- // height: 150px;
|
|
|
- height: 16vh;
|
|
|
- .mainOne{
|
|
|
- width: 35px;
|
|
|
- background: #184FB4;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- margin: 0 auto;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
- position: relative;
|
|
|
- top: 30px;
|
|
|
- left: 10px;
|
|
|
+
|
|
|
+ .headerFour {
|
|
|
+ width: calc(100% - 535px);
|
|
|
+
|
|
|
+ .headerFourTit {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 40%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .mainTwo{
|
|
|
- width: 149px;
|
|
|
- border-right: 1px solid #E1E3EA;
|
|
|
- position: relative;
|
|
|
- .echartsNum{
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- position: absolute;
|
|
|
- top: 42px;
|
|
|
- left: 65px;
|
|
|
+
|
|
|
+ .tableMain {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid #E1E3EA;
|
|
|
+ // height: 150px;
|
|
|
+ height: 16vh;
|
|
|
+
|
|
|
+ .mainOne {
|
|
|
+ width: 35px;
|
|
|
+ background: #184FB4;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: 30px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- .mainTwoComColor{
|
|
|
- display: inline-block;
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 20px;
|
|
|
- margin-left: 15px;
|
|
|
+
|
|
|
+ .mainTwo {
|
|
|
+ width: 149px;
|
|
|
+ border-right: 1px solid #E1E3EA;
|
|
|
position: relative;
|
|
|
- top: -1px;
|
|
|
- }
|
|
|
- .mainTwoComTit{
|
|
|
- font-size: 14px;
|
|
|
- display: inline-block;
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .mainThree{
|
|
|
- width: 350px;
|
|
|
- padding-top: 13px;
|
|
|
- border-right: 1px solid #E1E3EA;
|
|
|
- position: relative;
|
|
|
- .mainMore{
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 10px solid transparent;
|
|
|
- border-left: 10px solid #B6BBCB;
|
|
|
- border-right: 10px solid transparent;
|
|
|
- border-bottom: 10px solid transparent;
|
|
|
- position: absolute;
|
|
|
- top: -9px;
|
|
|
- right: -9px;
|
|
|
- transform: rotate(-45deg);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .mainThreeMsg{
|
|
|
- display: flex;
|
|
|
- margin: 0 10px;
|
|
|
- width: 100%;
|
|
|
- height: 33px;
|
|
|
- background: #F6F7FA;
|
|
|
- margin-bottom: 8px;
|
|
|
- padding-left: 10px;
|
|
|
- padding-top: 2px;
|
|
|
- border-radius: 5px;
|
|
|
- img{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+
|
|
|
+ .echartsNum {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ position: absolute;
|
|
|
+ top: 42px;
|
|
|
+ left: 65px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainTwoComColor {
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-left: 15px;
|
|
|
position: relative;
|
|
|
- top: 5px;
|
|
|
- margin-right: 10px;
|
|
|
+ top: -1px;
|
|
|
}
|
|
|
- .msgProgress{
|
|
|
- margin-top: 5px;
|
|
|
- display: flex;
|
|
|
- width: 90%;
|
|
|
- span{
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- }
|
|
|
- span:nth-child(1){
|
|
|
- display: inline-block;
|
|
|
- width: 70%;
|
|
|
- font-weight: 400;
|
|
|
- color: #666;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- span:nth-child(2){
|
|
|
- font-weight: 600;
|
|
|
- margin-right: 30px;
|
|
|
- color: #F65177;
|
|
|
- }
|
|
|
- span:nth-child(3){
|
|
|
- font-weight: 600;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
+
|
|
|
+ .mainTwoComTit {
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .mainFour{
|
|
|
- width: calc(100% - 536px);
|
|
|
- padding-top: 13px;
|
|
|
- position: relative;
|
|
|
- .mainMore{
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 10px solid transparent;
|
|
|
- border-left: 10px solid #B6BBCB;
|
|
|
- border-right: 10px solid transparent;
|
|
|
- border-bottom: 10px solid transparent;
|
|
|
- position: absolute;
|
|
|
- top: -9px;
|
|
|
- right: -9px;
|
|
|
- transform: rotate(-45deg);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .mainFourMsg{
|
|
|
- display: flex;
|
|
|
- margin: 0 10px;
|
|
|
- width: 100%;
|
|
|
- height: 33px;
|
|
|
- background: #F6F7FA;
|
|
|
- margin-bottom: 8px;
|
|
|
- padding-left: 10px;
|
|
|
- padding-top: 2px;
|
|
|
- border-radius: 5px;
|
|
|
- .mainFourImg{
|
|
|
+
|
|
|
+ .mainThree {
|
|
|
+ width: 350px;
|
|
|
+ padding-top: 13px;
|
|
|
+ border-right: 1px solid #E1E3EA;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .mainMore {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 10px solid transparent;
|
|
|
+ border-left: 10px solid #B6BBCB;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ border-bottom: 10px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ top: -9px;
|
|
|
+ right: -9px;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainThreeMsg {
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- width: 65%;
|
|
|
- img{
|
|
|
+ margin: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
+ background: #F6F7FA;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
position: relative;
|
|
|
top: 5px;
|
|
|
- margin-right: 33px;
|
|
|
- margin-left: 22px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .msgProgress {
|
|
|
+ margin-top: 5px;
|
|
|
+ display: flex;
|
|
|
+ width: 90%;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
+ display: inline-block;
|
|
|
+ width: 70%;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:nth-child(2) {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 30px;
|
|
|
+ color: #F65177;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:nth-child(3) {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- span{
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- position: relative;
|
|
|
- top: 6px;
|
|
|
- }
|
|
|
- span:nth-child(1){
|
|
|
- display: inline-block;
|
|
|
- width: 26%;
|
|
|
- font-weight: 400;
|
|
|
- color: #666;
|
|
|
- margin-right: 17px;
|
|
|
- }
|
|
|
- span:nth-child(2){
|
|
|
- font-weight: 600;
|
|
|
- margin-right: 15px;
|
|
|
- color: #666;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .tableFooter{
|
|
|
- display: flex;
|
|
|
- height: 100px;
|
|
|
- .footerOne{
|
|
|
- width: 35px;
|
|
|
- background: #7D8297;
|
|
|
- border-radius: 0 0 0 10px;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- margin: 0 auto;
|
|
|
- line-height: 16px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff;
|
|
|
+
|
|
|
+ .mainFour {
|
|
|
+ width: calc(100% - 536px);
|
|
|
+ padding-top: 13px;
|
|
|
position: relative;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .footerTwo{
|
|
|
- width: 500px;
|
|
|
- padding-top: 13px;
|
|
|
- border-right: 1px solid #E1E3EA;
|
|
|
- .footerTwoMsg{
|
|
|
- display: flex;
|
|
|
- margin: 0 10px;
|
|
|
- width: 100%;
|
|
|
- height: 33px;
|
|
|
- background: #F6F7FA;
|
|
|
- margin-bottom: 8px;
|
|
|
- padding-left: 10px;
|
|
|
- padding-top: 2px;
|
|
|
- border-radius: 5px;
|
|
|
- img{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- margin-right: 10px;
|
|
|
+
|
|
|
+ .mainMore {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 10px solid transparent;
|
|
|
+ border-left: 10px solid #B6BBCB;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ border-bottom: 10px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ top: -9px;
|
|
|
+ right: -9px;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .footerProgress{
|
|
|
- margin-top: 5px;
|
|
|
+
|
|
|
+ .mainFourMsg {
|
|
|
display: flex;
|
|
|
- width: 91%;
|
|
|
- span{
|
|
|
+ margin: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
+ background: #F6F7FA;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .mainFourImg {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 65%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ margin-right: 33px;
|
|
|
+ margin-left: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
font-size: 14px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
+ position: relative;
|
|
|
+ top: 6px;
|
|
|
}
|
|
|
- .footerOneSpan{
|
|
|
+
|
|
|
+ span:nth-child(1) {
|
|
|
display: inline-block;
|
|
|
- width: 35%;
|
|
|
+ width: 26%;
|
|
|
font-weight: 400;
|
|
|
color: #666;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .el-progress{
|
|
|
- width: calc(50% - 15px);
|
|
|
- padding-right: 15px;
|
|
|
- position: relative;
|
|
|
- top: -3px;
|
|
|
- .el-progress__text{
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ margin-right: 17px;
|
|
|
}
|
|
|
- .footerTwoSpan{
|
|
|
- font-weight: 600;
|
|
|
- margin-right: 30px;
|
|
|
- color: #F65177;
|
|
|
- }
|
|
|
- .footerThreeSpan{
|
|
|
+
|
|
|
+ span:nth-child(2) {
|
|
|
font-weight: 600;
|
|
|
+ margin-right: 15px;
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .footerThree{
|
|
|
- width: calc(100% - 536px);
|
|
|
- padding-top: 13px;position: relative;
|
|
|
- .mainMore{
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 10px solid transparent;
|
|
|
- border-left: 10px solid #B6BBCB;
|
|
|
- border-right: 10px solid transparent;
|
|
|
- border-bottom: 10px solid transparent;
|
|
|
- position: absolute;
|
|
|
- top: -9px;
|
|
|
- right: -9px;
|
|
|
- transform: rotate(-45deg);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .footerThreeMsg{
|
|
|
- display: flex;
|
|
|
- // margin: 0 10px;
|
|
|
- margin-left: 10px;
|
|
|
- margin-bottom: 8px;
|
|
|
- span{
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #666;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
+
|
|
|
+ .tableFooter {
|
|
|
+ display: flex;
|
|
|
+ height: 100px;
|
|
|
+
|
|
|
+ .footerOne {
|
|
|
+ width: 35px;
|
|
|
+ background: #7D8297;
|
|
|
+ border-radius: 0 0 0 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ margin: 0 auto;
|
|
|
+ line-height: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
}
|
|
|
- .footerImg{
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerTwo {
|
|
|
+ width: 500px;
|
|
|
+ padding-top: 13px;
|
|
|
+ border-right: 1px solid #E1E3EA;
|
|
|
+
|
|
|
+ .footerTwoMsg {
|
|
|
display: flex;
|
|
|
- border-radius: 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 33px;
|
|
|
background: #F6F7FA;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- // width: 100%;
|
|
|
- width: 48px;
|
|
|
- height: 30px;
|
|
|
- padding: 5px 11px 0;
|
|
|
- position: relative;
|
|
|
- top: 2px;
|
|
|
- }
|
|
|
- img{
|
|
|
+ margin-bottom: 8px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-top: 2px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
position: relative;
|
|
|
top: 5px;
|
|
|
margin-right: 10px;
|
|
|
- position: relative;
|
|
|
- top: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerProgress {
|
|
|
+ margin-top: 5px;
|
|
|
+ display: flex;
|
|
|
+ width: 91%;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerOneSpan {
|
|
|
+ display: inline-block;
|
|
|
+ width: 35%;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-progress {
|
|
|
+ width: calc(50% - 15px);
|
|
|
+ padding-right: 15px;
|
|
|
+ position: relative;
|
|
|
+ top: -3px;
|
|
|
+
|
|
|
+ .el-progress__text {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerTwoSpan {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 30px;
|
|
|
+ color: #F65177;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerThreeSpan {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .report{
|
|
|
- margin-left: 20px;
|
|
|
- height: 100%;
|
|
|
- .gateway_report{
|
|
|
- width: 355px;
|
|
|
- background: #fff;
|
|
|
- // margin-right: 30px;
|
|
|
- margin-right: calc(100% - 355px);
|
|
|
- border-radius: 10px;
|
|
|
- padding-bottom: 10px;
|
|
|
- border: 1px solid #D6DBEA;
|
|
|
- .reportTit{
|
|
|
- padding: 21px 25px 10px 25px;
|
|
|
- // background: #E3EFFF;
|
|
|
- border-bottom: 1px solid #D6DBEA;
|
|
|
- border-radius: 10px 10px 0px 0px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- p{
|
|
|
- font-size: 18px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: bold;
|
|
|
- color: #3B7AD1;
|
|
|
- }
|
|
|
- .el-icon{
|
|
|
+
|
|
|
+ .footerThree {
|
|
|
+ width: calc(100% - 536px);
|
|
|
+ padding-top: 13px;
|
|
|
position: relative;
|
|
|
- left: 120px;
|
|
|
- top: 3px;
|
|
|
- cursor: pointer;
|
|
|
+
|
|
|
+ .mainMore {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 10px solid transparent;
|
|
|
+ border-left: 10px solid #B6BBCB;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ border-bottom: 10px solid transparent;
|
|
|
+ position: absolute;
|
|
|
+ top: -9px;
|
|
|
+ right: -9px;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerThreeMsg {
|
|
|
+ display: flex;
|
|
|
+ // margin: 0 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footerImg {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: #F6F7FA;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ // width: 100%;
|
|
|
+ width: 48px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 5px 11px 0;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ position: relative;
|
|
|
+ top: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .reportMain{
|
|
|
- height: 80vh !important;
|
|
|
- overflow-y: auto;
|
|
|
- .reportMain_msg{
|
|
|
- display: flex;
|
|
|
- padding: 25px 0 25px 27px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .report {
|
|
|
+ margin-left: 20px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .gateway_report {
|
|
|
+ width: 355px;
|
|
|
+ background: #fff;
|
|
|
+ // margin-right: 30px;
|
|
|
+ margin-right: calc(100% - 355px);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border: 1px solid #D6DBEA;
|
|
|
+
|
|
|
+ .reportTit {
|
|
|
+ padding: 21px 25px 10px 25px;
|
|
|
+ // background: #E3EFFF;
|
|
|
border-bottom: 1px solid #D6DBEA;
|
|
|
- .rightDiv{
|
|
|
- width: 4px;
|
|
|
- height: 40px;
|
|
|
- background: #4883D4;
|
|
|
- border-radius: 2px;
|
|
|
+ border-radius: 10px 10px 0px 0px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3B7AD1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon {
|
|
|
position: relative;
|
|
|
- top: 2px;
|
|
|
+ left: 120px;
|
|
|
+ top: 3px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- .rightTitMsg{
|
|
|
- margin-left: 15px;
|
|
|
- p{
|
|
|
- width: 300px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reportMain {
|
|
|
+ height: 80vh !important;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .reportMain_msg {
|
|
|
+ display: flex;
|
|
|
+ padding: 25px 0 25px 27px;
|
|
|
+ border-bottom: 1px solid #D6DBEA;
|
|
|
+
|
|
|
+ .rightDiv {
|
|
|
+ width: 4px;
|
|
|
+ height: 40px;
|
|
|
+ background: #4883D4;
|
|
|
+ border-radius: 2px;
|
|
|
+ position: relative;
|
|
|
+ top: 2px;
|
|
|
}
|
|
|
- span{
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #8991B0;
|
|
|
+
|
|
|
+ .rightTitMsg {
|
|
|
+ margin-left: 15px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 300px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #8991B0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style>
|
