123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395 |
- <template>
- <div class="gatewayNewPage">
- <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" :style="getPickerSty()" />
- <div class="quarterChoose">
- <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>
- </div>
- </div>
- <div class="tableHeader">
- <div class="headerOne"></div>
- <div class="headerTwo">
- <div class="headerComTit">
- <span class="headerTwoTit">评级统计</span>
- </div>
- </div>
- <div class="headerThree">
- <div class="headerComTit">
- <span class="headerThreeTit">年度榜</span>
- </div>
- <div class="headerNameTit">
- <div class="headerNameTit_left">
- <span>单位名称</span>
- </div>
- <div class="headerNameTit_right">
- <span>级别</span>
- <span style="margin-left: 20px">得分</span>
- </div>
- </div>
- </div>
- <div class="headerFour">
- <div class="headerComTit">
- <span class="headerFourTit">考评排行榜</span>
- </div>
- <div class="headerNameForeTit">
- <div class="headerNameForeTit_left">
- <span>单位名称</span>
- </div>
- <div class="headerNameForeTit_right">
- <span>得分</span>
- <span>加分事项</span>
- <span>扣分事项</span>
- <span>管理加分</span>
- <span>管理扣分</span>
- <span>高于基准</span>
- <span>低于基准</span>
- </div>
- </div>
- </div>
- </div>
- <!-- v-for="it in 4" :key="it" -->
- <div class="tableMain" v-for="(it, index) in cupDataYearArr.section" :key="index">
- <div class="mainOne">
- <span :style="getMainOneSty()">{{it.name}}</span>
- </div>
- <div class="mainTwo">
- <!-- <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 class="mainTwoMsg" :style="getPos()">
- <el-col :span="12">
- <span class="mainTwoComColor" style="background: #F65177;"></span>
- <span class="mainTwoComTit">A级</span>
- </el-col>
- <el-col :span="12">
- <span class="mainTwoComColor" style="background: #50C14E;"></span>
- <span class="mainTwoComTit">B级</span>
- </el-col>
- <el-col :span="12">
- <span class="mainTwoComColor" style="background: #5093E1;"></span>
- <span class="mainTwoComTit">C级</span>
- </el-col>
- <el-col :span="12">
- <span class="mainTwoComColor" style="background: #9DA5BE;"></span>
- <span class="mainTwoComTit">D级</span>
- </el-col>
- </el-row>
- </div>
- <div class="mainThree">
- <div class="mainMore" @click="yearSeeMore(it.nameEn, 'year')"></div>
- <div style="display: flex" v-for="(item, index) in it.tableDatas" :key="index">
- <div class="mainThreeMsg">
- <img :src="item.img" alt="">
- <div class="msgProgress">
- <span
- :style="winPix === 1.25 || innerWidth < 1800?'font-size: 12px;width: 65%':''">{{item.company}}</span>
- <span>{{item.grade}}</span>
- <span :style="winPix === 1.25 || innerWidth < 1800?'width: 25%':''">{{item.score.toFixed(2)}}</span>
- </div>
- </div>
- </div>
- </div>
- <div class="mainFour">
- <div class="mainMore" @click="yearSeeMore(it.nameEn, 'season')"></div>
- <div style="display: flex" v-for="(item, index) in it.section" :key="index">
- <div class="mainFourMsg">
- <span class="mainFourcompany" :style="getFooter12Sty()">{{item.company}}</span>
- <div class="mainFourImg">
- <span class="mainFourImgSpan" :style="getFooterseaSty()">{{item.score.toFixed(2)}}</span>
- <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="">
- </template>
- </el-popover>
- <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"
- alt="">
- </template>
- </el-popover>
- <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"
- alt="">
- </template>
- </el-popover>
- <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="">
- </template>
- </el-popover>
- <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="">
- </template>
- </el-popover>
- <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="">
- </template>
- </el-popover>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="tableFooter">
- <div class="footerOne">
- <span :style="getFooterOneSty()">煤电一体化</span>
- </div>
- <div class="footerTwo">
- <div style="display: flex" v-for="(item, index) in cupDataYearArr.integration" :key="index">
- <div class="footerTwoMsg">
- <img :src="item.img" alt="">
- <div class="footerProgress">
- <span class="footerOneSpan" :style="getFooter12Sty()">{{item.company}}</span>
- <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>
- </div>
- </div>
- </div>
- <div class="footerThree">
- <div class="mainMore" @click="yearSeeMore('MDYTH', 'season')"></div>
- <!-- <div style="display: flex; justify-content: space-between;width: 100%"
- v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
- <div class="footerThreeMsg" v-for="it in matterMsg" :key="it">
- <div class="footerImg">
- <span :style="getfooterSpan()">{{it}}</span>
- <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 === '加分事项'">
- </template>
- </el-popover>
- <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 === '扣分事项'">
- </template>
- </el-popover>
- <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 === '管理加分'">
- </template>
- </el-popover>
- <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 === '管理扣分'">
- </template>
- </el-popover>
- <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 === '高于基准'">
- </template>
- </el-popover>
- <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 === '低于基准'">
- </template>
- </el-popover>
- </div>
- </div>
- </div> -->
- <div style="display: flex" v-for="(item, index) in cupDataSeasonArr.integration" :key="index">
- <div class="mainFourMsg">
- <span class="mainFourcompany" :style="getFooter12Sty()">{{item.company}}</span>
- <div class="mainFourImg">
- <span class="mainFourImgSpan" :style="getFooterseaSty()">{{item.score}}</span>
- <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="">
- </template>
- </el-popover>
- <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"
- alt="">
- </template>
- </el-popover>
- <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"
- alt="">
- </template>
- </el-popover>
- <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="">
- </template>
- </el-popover>
- <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="">
- </template>
- </el-popover>
- <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="">
- </template>
- </el-popover>
- </div>
- </div>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :span="5" class="report">
- <div class="gateway_report">
- <div class="reportTit">
- <p :style="winPix === 1.25 || innerWidth < 1800? 'font-size: 16px;':''">通告栏</p>
- <el-icon :size="20" color="#3B7AD1" :style="winPix === 1.25 || innerWidth < 1800? 'left: 80px;':''"
- @click="watchAllNotification">
- <Plus />
- </el-icon>
- </div>
- <div class="reportMain">
- <div class="reportMain_msg" v-for="it in noticeData" :key="it.id">
- <div class="rightDiv"></div>
- <div class="rightTitMsg">
- <p @click="watchDetail(it)" style="cursor:pointer">{{it.noticeTitle}}</p>
- <div style="margin-top: 5px; display: flex">
- <span
- style="margin-right: 10px">{{it.createTime.substring(0, it.createTime.indexOf(' '))}}</span>
- <span class="rightTwoSpanMsg"
- :style="winPix === 1.25 || innerWidth < 1800? 'width: 50%;':''">{{it.releaseDeptName}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </el-col>
- </el-row>
- <year-from ref="yearFrom"></year-from>
- <season-from ref="seasonFrom"></season-from>
- <notification-detail ref="notificationDetail"></notification-detail>
- <notification-all-data ref="notificationAllData"></notification-all-data>
- </div>
- </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/topNewS.png'
- import botImg from '../assets/getwayImg/botNewS.png'
- import cenImg from '../assets/getwayImg/cenNew.png'
- import {
- apiGetevaluationportallist,
- apiGetevaluationportalhomeSeason,
- 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: ['第一季度', '第二季度', '第三季度'],
- winPix: window.devicePixelRatio,
- innerWidth: window.innerWidth
- }
- },
- created() {
- this.cupFootMsgArr = [{
- level: 'A',
- points: '134',
- img: cup1,
- name: '大港电厂(广安津能)'
- },
- {
- level: 'A',
- points: '134',
- img: cup2,
- name: '怀安热电'
- }
- ]
- },
- mounted() {
- this.getYearSeasonData()
- this.getDeptNoticeData()
- },
- methods: {
- // 获取首页年份和季度数据
- getYearSeasonData() {
- let that = this
- apiGetevaluationportalhomeSeason().then(datas => {
- if (datas.success) {
- if (datas.data) {
- that.changeYear = datas.data.year
- if (datas.data.season === '1') {
- that.seasonStr = '第一季度'
- } else if (datas.data.season === '2') {
- that.seasonStr = '第二季度'
- } else {
- that.seasonStr = '第三季度'
- }
- }
- } else {
- that.changeYear = (new Date().getFullYear() - 1).toString()
- that.seasonStr = '第一季度'
- }
- that.getGateWayData()
- })
- },
- 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
- }
- })
- }
- },
- getPos() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'top: -15%;'
- }
- },
- getPickerSty() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'margin: 5px 0 0 20px;'
- }
- },
- getMainOneSty() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'font-size: 14px'
- }
- },
- getFooterOneSty() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'font-size: 12px;line-height: 12px;'
- }
- },
- getFooter12Sty() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'font-size: 12px;width:25%'
- }
- },
- getFooterseaSty() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'width:10%'
- }
- },
- getfooterSpan() {
- if (this.winPix === 1.25 || this.innerWidth < 1800) {
- return 'width: 3.4vw;padding: 5px 3px 0;'
- }
- },
- 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)
- }
- 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
- }
- 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
- }
- }
- })
- 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)
- })
- }
- })
- },
- getEcharts(datas) {
- datas.forEach((item, index) => {
- this.getEchartsData(item.echartsData.echarts, 'pieChart' + index)
- })
- },
- getEchartsData(data, name) {
- let total = 0
- data.forEach(it => {
- total += it.value
- })
- let option = {
- color: ['#F65177', '#50C14E', '#5093E1', '#9DA5BE'],
- tooltip: {
- trigger: 'item'
- },
- series: [{
- name: '年度榜',
- type: 'pie',
- radius: ['50%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: true,
- position: 'center',
- formatter: () => {
- return total
- },
- fontSize: 16,
- fontWeight: 600
- },
- // 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;
- height: 5vh;
- 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;
- }
- .el-icon {
- cursor: pointer;
- }
- }
- }
- .tableHeader {
- display: flex;
- border-bottom: 1px solid #E1E3EA;
- // height: 75px;
- height: 9vh;
- width: 100%;
- .headerComTit {
- // height: 40px;
- height: 5vh;
- border-bottom: 1px solid #E1E3EA;
- span {
- font-size: 14px;
- color: #3B7AD1;
- }
- }
- .headerNameTit {
- display: flex;
- justify-content: space-between;
- padding: 8px 10px;
- font-size: 12px;
- color: #414141;
- .headerNameTit_left {
- width: 60%;
- }
- .headerNameTit_right {
- width: 40%;
- display: flex;
- justify-content: center;
- }
- }
- .headerOne {
- // width: 35px;
- width: 3%;
- background: #184FB4;
- }
- .headerTwo {
- // width: 150px;
- width: 12%;
- border-right: 1px solid #E1E3EA;
- .headerTwoTit {
- position: relative;
- top: 10px;
- left: 30%;
- }
- }
- .headerThree {
- // width: 350px;
- width: 28%;
- border-right: 1px solid #E1E3EA;
- .headerThreeTit {
- position: relative;
- top: 10px;
- left: 40%;
- }
- }
- .headerFour {
- // width: calc(100% - 535px);
- width: 57%;
- .headerFourTit {
- position: relative;
- top: 10px;
- left: 40%;
- }
- .headerNameForeTit {
- display: flex;
- justify-content: space-between;
- padding: 8px 10px;
- font-size: 12px;
- color: #414141;
- .headerNameForeTit_left {
- width: 30%;
- }
- .headerNameForeTit_right {
- width: 72%;
- display: flex;
- justify-content: space-between;
- }
- }
- }
- }
- .tableMain {
- display: flex;
- border-bottom: 1px solid #E1E3EA;
- // height: 150px;
- height: 16vh;
- .mainOne {
- // width: 35px;
- width: 3%;
- 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: 20%;
- left: 25%;
- }
- }
- .mainTwo {
- // width: 149px;
- width: 12%;
- border-right: 1px solid #E1E3EA;
- position: relative;
- @media screen and (max-width: 1540px) and (min-width: 1300px) {
- .mainTwoMsg {
- top: -15%;
- }
- }
- .mainTwoMsg {
- position: relative;
- .mainTwoComColor {
- display: inline-block;
- width: 6px;
- height: 6px;
- border-radius: 20px;
- margin-left: 15px;
- position: relative;
- top: -1px;
- }
- .mainTwoComTit {
- font-size: 14px;
- display: inline-block;
- margin-left: 5px;
- }
- }
- .echartsNum {
- font-size: 16px;
- font-weight: 600;
- position: absolute;
- top: 42px;
- left: 65px;
- }
- }
- .mainThree {
- // width: 350px;
- width: 28%;
- 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;
- height: 3.5vh;
- 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;
- }
- .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%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-weight: 400;
- color: #666;
- margin-right: 10px;
- }
- span:nth-child(2) {
- font-weight: 600;
- margin-right: 30px;
- color: #F65177;
- }
- span:nth-child(3) {
- display: inline-block;
- width: 20%;
- font-weight: 600;
- color: #666;
- }
- }
- }
- }
- .mainFour {
- // width: calc(100% - 536px);
- width: 57%;
- 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;
- justify-content: space-between;
- margin: 0 10px;
- width: 100%;
- // height: 33px;
- height: 3.5vh;
- background: #F6F7FA;
- margin-bottom: 8px;
- padding-left: 10px;
- padding-top: 2px;
- border-radius: 5px;
- span {
- font-size: 14px;
- font-family: Microsoft YaHei;
- position: relative;
- top: 6px;
- display: inline-block;
- }
- .mainFourcompany {
- width: 27%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-weight: 400;
- color: #666;
- margin-right: 17px;
- }
- .mainFourImg {
- display: flex;
- justify-content: space-between;
- width: 76%;
- .mainFourImgSpan {
- width: 5%;
- font-weight: 600;
- // margin-right: 15px;
- color: #666;
- }
- img {
- width: 20px;
- height: 20px;
- position: relative;
- top: 5px;
- left: -10px;
- // margin-right: 33px;
- // margin-left: 22px;
- }
- }
- }
- }
- }
- .tableFooter {
- display: flex;
- // height: 100px;
- height: 10vh;
- @media screen and (max-width: 1540px) and (min-width: 1300px) {
- .footerOne {
- span {
- font-size: 12px;
- line-height: 12px;
- }
- }
- }
- @media screen and (max-width: 1920px) and (min-width: 1800px) {
- .footerOne {
- span {
- font-size: 16px;
- line-height: 16px;
- }
- }
- }
- .footerOne {
- // width: 35px;
- width: 3%;
- background: #7D8297;
- border-radius: 0 0 0 10px;
- span {
- display: inline-block;
- // width: 20px;
- width: 3%;
- margin: 0 auto;
- // line-height: 16px;
- // font-size: 16px;
- font-weight: bold;
- color: #fff;
- position: relative;
- top: 10px;
- left: 10px;
- }
- }
- .footerTwo {
- // width: 500px;
- width: 40%;
- padding-top: 10px;
- border-right: 1px solid #E1E3EA;
- .footerTwoMsg {
- display: flex;
- margin: 0 10px;
- width: 100%;
- // height: 33px;
- height: 3.5vh;
- 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;
- }
- .footerProgress {
- margin-top: 5px;
- display: flex;
- width: 91%;
- span {
- font-size: 14px;
- font-family: Microsoft YaHei;
- }
- .footerOneSpan {
- display: inline-block;
- width: 35%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- 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 {
- display: inline-block;
- width: 12%;
- font-weight: 600;
- color: #666;
- }
- }
- }
- }
- .footerThree {
- // width: calc(100% - 536px);
- width: 57%;
- padding-top: 10px;
- 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;
- width: 13%;
- // margin: 0 10px;
- // margin-left: 10px;
- padding: 0 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;
- width: 3vw;
- // height: 30px;
- height: 3vh;
- padding: 5px 8px 0;
- position: relative;
- top: 2px;
- }
- img {
- width: 20px;
- height: 20px;
- position: relative;
- top: 5px;
- margin-right: 8px;
- position: relative;
- top: 7px;
- }
- }
- }
- .mainFourMsg {
- display: flex;
- justify-content: space-between;
- margin: 0 10px;
- width: 100%;
- // height: 33px;
- height: 3.5vh;
- background: #F6F7FA;
- margin-bottom: 8px;
- padding-left: 10px;
- padding-top: 2px;
- border-radius: 5px;
- span {
- font-size: 14px;
- font-family: Microsoft YaHei;
- position: relative;
- top: 6px;
- display: inline-block;
- }
- .mainFourcompany {
- width: 27%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-weight: 400;
- color: #666;
- margin-right: 17px;
- }
- .mainFourImg {
- display: flex;
- justify-content: space-between;
- width: 76%;
- .mainFourImgSpan {
- width: 5%;
- font-weight: 600;
- // margin-right: 15px;
- color: #666;
- }
- img {
- width: 20px;
- height: 20px;
- position: relative;
- top: 5px;
- left: -10px;
- // margin-right: 33px;
- // margin-left: 22px;
- }
- }
- }
- }
- }
- }
- .report {
- margin-left: 20px;
- height: 100%;
- .gateway_report {
- // width: 355px;
- width: 100%;
- 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 {
- position: relative;
- left: 120px;
- top: 3px;
- cursor: pointer;
- }
- }
- .reportMain {
- height: 80vh !important;
- overflow-x: hidden;
- overflow-y: auto;
- .reportMain_msg {
- width: 100%;
- display: flex;
- padding: 25px 0 25px 27px;
- border-bottom: 1px solid #D6DBEA;
- .rightDiv {
- width: 4px;
- height: 40px;
- // height: 5vh;
- background: #4883D4;
- border-radius: 2px;
- position: relative;
- top: 2px;
- }
- .rightTitMsg {
- margin-left: 15px;
- width: calc(100% - 20px);
- p {
- // width: 300px;
- width: 95%;
- 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;
- display: inline-block;
- }
- .rightTwoSpanMsg {
- width: 60%;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- }
- }
- }
- }
- }
- </style>
|