代码提交
This commit is contained in:
parent
075c6d8ae5
commit
8783c8d658
|
|
@ -17,6 +17,7 @@
|
|||
"less-loader": "^5.0.0",
|
||||
"moment": "^2.29.4",
|
||||
"pdfjs-dist": "2.5.207",
|
||||
"postcss-px2rem-exclude": "^0.0.6",
|
||||
"v-fit-columns": "^0.2.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-pdf": "4.2.0",
|
||||
|
|
|
|||
35
src/App.vue
35
src/App.vue
|
|
@ -2,15 +2,15 @@
|
|||
<div id="app">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div style="color:#ffffff">{{time}} | {{week}}</div>
|
||||
<div style="color:#ffffff;font-family: DOUYU Font" :style="{fontSize:$px2rem('22px')}">{{time}} | {{week}}</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">2022年度中国能源大数据报告——电力行业发展篇</div></div>
|
||||
<div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}" ><div class="leftBtnText" style="font-family: DOUYU Font" :style="{fontSize:$px2rem('22px')}">2022年度中国能源大数据报告——电力行业发展篇</div></div>
|
||||
<div class="middleText"><img src="./assets/images/homeText.png"/></div>
|
||||
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></div>
|
||||
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}" :style="{fontSize:$px2rem('24px')}"><div class="rightBtnText" style="font-family: DOUYU Font" :style="{fontSize:$px2rem('22px')}">2022年度中国能源大数据报告——能源发展综述篇</div></div>
|
||||
</div>
|
||||
<div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} | <span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span> | {{wind}}
|
||||
<span style="color:rgb(23,231,232);font-size:35px">{{windLevel}}</span>级
|
||||
<div class="right" style="font-family: DOUYU Font" :style="{fontSize:$px2rem('22px')}"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} | <span style="color:rgb(23,231,232);font-family: DOUYU Font" :style="{fontSize:$px2rem('22px')}">{{lowTemperature}}-{{highTemperature}}℃</span> | {{wind}}
|
||||
<span style="color:rgb(23,231,232);font-family: DOUYU Font" :style="{fontSize:$px2rem('25px')}">{{windLevel}}</span>级
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
|
@ -210,11 +210,11 @@ import {getData} from './api/index.js'
|
|||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
// font-family:'DOUYU Font' !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
|
|
@ -247,19 +247,20 @@ import {getData} from './api/index.js'
|
|||
-webkit-box-pack: start;
|
||||
justify-content: space-around;
|
||||
font-weight: 800;
|
||||
font-family:"Microsoft YaHei";
|
||||
// font-family:"Microsoft YaHei";
|
||||
align-items: center;
|
||||
font-size:27px;
|
||||
// font-size:27px;
|
||||
// font-family: DOUYU Font !important;
|
||||
}
|
||||
.middle{
|
||||
width: 50%;
|
||||
width: 53%;
|
||||
height: 100%;
|
||||
font-size:28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.leftBtn{
|
||||
width:25%;
|
||||
width:28%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -273,11 +274,11 @@ import {getData} from './api/index.js'
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
// font-size: 24px;
|
||||
}
|
||||
}
|
||||
.handleAction{
|
||||
width:25%;
|
||||
width:28%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -291,7 +292,7 @@ import {getData} from './api/index.js'
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
// font-size: 24px;
|
||||
}
|
||||
}
|
||||
.middleText{
|
||||
|
|
@ -315,7 +316,7 @@ import {getData} from './api/index.js'
|
|||
// -webkit-mask:linear-gradient(to top, rgb(58,253,228), transparent );
|
||||
// }
|
||||
.rightBtn{
|
||||
width:25%;
|
||||
width:28%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -329,11 +330,11 @@ import {getData} from './api/index.js'
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
// font-size: 24px;
|
||||
}
|
||||
}
|
||||
.handleAction1{
|
||||
width:25%;
|
||||
width:28%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -347,7 +348,7 @@ import {getData} from './api/index.js'
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
// font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -5,10 +5,12 @@ body,
|
|||
height: 100%;
|
||||
margin: 0px;
|
||||
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
/* font-family: 'DOUYU Font' !important; */
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
/* font-family: 'DOUYU Font' !important; */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -157,3 +159,7 @@ em {
|
|||
background-color: rgba(0, 192, 255, 0.51);
|
||||
border-radius: 0.18vw;
|
||||
}
|
||||
@font-face {
|
||||
font-family: DOUYU Font;
|
||||
src: url("./font/douyuFont-2.otf");
|
||||
}
|
||||
|
|
|
|||
20
src/main.js
20
src/main.js
|
|
@ -24,12 +24,22 @@ Vue.prototype.$moment = moment
|
|||
|
||||
Vue.config.productionTip = false
|
||||
//页面加载完毕后设置html字体大小
|
||||
window.onload=function()
|
||||
{
|
||||
//获取标准rem单位
|
||||
document.documentElement.style.fontSize=(document.documentElement.clientWidth/5120)*15+'px';
|
||||
}
|
||||
// window.onload=function()
|
||||
// {
|
||||
// //获取标准rem单位
|
||||
// document.documentElement.style.fontSize=(document.documentElement.clientWidth/5760)*15+'px';
|
||||
// }
|
||||
// import './config/rem'
|
||||
import 'amfe-flexible'; //引入amfe-flexible做rem适配
|
||||
function px2rem(px){
|
||||
if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
|
||||
return px
|
||||
}else{
|
||||
return (parseFloat(px) / 576) + 'rem'
|
||||
}
|
||||
}
|
||||
Vue.prototype.$px2rem = px2rem // 放到全局
|
||||
import './assets/index.css';
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<div class="main">
|
||||
<div class="energyPlanning">
|
||||
<div class="energyTop">
|
||||
<div class="title" text="能源规划-政策新闻">能源规划-政策新闻</div>
|
||||
<div class="content">
|
||||
<div v-for="(item,index) in news" :key="index" class="textStyle">
|
||||
<div class="title" text="能源规划-政策新闻" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">能源规划-政策新闻</div>
|
||||
<div class="content" :style="{fontSize:$px2rem('17px')}">
|
||||
<div v-for="(item,index) in news" :key="index" class="textStyle" :class="{textStyleAct : index % 2 !=0}">
|
||||
{{item.Journalism}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="energyBottom">
|
||||
<div class="title" text="污染企业监测">污染企业监测</div>
|
||||
<div class="title" text="污染企业监测" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">污染企业监测</div>
|
||||
<div class="content">
|
||||
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(1)"/></div>
|
||||
<div id="echartsOne"></div>
|
||||
|
|
@ -18,36 +18,36 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="powerProduction">
|
||||
<div class="title" text="电力生产">电力生产</div>
|
||||
<div class="title" text="电力生产" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">电力生产</div>
|
||||
<div class="content">
|
||||
<div class="powerProductionTop">
|
||||
<div class="one">
|
||||
<div class="twoTitle" text="2022年盐城装机容量">2022年盐城装机容量</div>
|
||||
<div class="twoTitle" text="2022年盐城装机容量" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">2022年盐城装机容量</div>
|
||||
<div class="oneContent">
|
||||
<div class="powerCount">
|
||||
<div class="powerImg"><img src="../assets/images/powerCount.png"/></div>
|
||||
<div class="powerNumber">
|
||||
<span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">{{capacity}}MW</span>
|
||||
<span style="color:#ffffff">盐城电力生产总装机量</span>
|
||||
<span style="color:yellow;font-weight: 700;font-family: auto;font-family: DOUYU Font" :style="{fontSize:$px2rem('40px')}">{{capacity}}MW</span>
|
||||
<span style="color:#ffffff" :style="{fontSize:$px2rem('20px')}" >盐城电力生产总装机量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="echartsCount">
|
||||
<div id="echartsTwo"></div>
|
||||
<div class="btnCity">
|
||||
<div class="btnCityList" :class="{'cityActive':cityActive==index}" v-for="(item,index) in city" :key="index" @click="cityChange(index)" :text="item.name">{{item.name}}</div>
|
||||
<div class="btnCityList" :style="{fontSize:$px2rem('17px')}" :class="{'cityActive':cityActive==index}" v-for="(item,index) in city" :key="index" @click="cityChange(index)" :text="item.name">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="twoTitle" text="非统调光伏电站座数分布">非统调光伏电站座数分布</div>
|
||||
<div class="twoTitle" text="非统调光伏电站座数分布" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">非统调光伏电站座数分布</div>
|
||||
<div class="twoCount">
|
||||
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(2)"/></div>
|
||||
<div id="echartsThree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three">
|
||||
<div class="twoTitle" text="非统调电厂">非统调电厂</div>
|
||||
<div class="twoTitle" text="非统调电厂" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">非统调电厂</div>
|
||||
<div class="threeCount">
|
||||
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(3)"/></div>
|
||||
<div id="echartsFour"></div>
|
||||
|
|
@ -56,28 +56,28 @@
|
|||
</div>
|
||||
<div class="powerProductionDown">
|
||||
<div class="one">
|
||||
<div class="twoTitle" text="当日上网电量">当日上网电量</div>
|
||||
<div class="twoTitle" text="当日上网电量" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">当日上网电量</div>
|
||||
<div class="OneContent">
|
||||
<div id="echartsFive"></div>
|
||||
<div class="type">
|
||||
<div class="typeChange" v-for="(item,index) in powerType" :key="index" :class="{'powerTypeAction':powerTypeAction==index}" :text="item.name" @click="typeChange(index)">{{item.name}}</div>
|
||||
<div class="typeChange" :style="{fontSize:$px2rem('17px')}" v-for="(item,index) in powerType" :key="index" :class="{'powerTypeAction':powerTypeAction==index}" :text="item.name" @click="typeChange(index)">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="twoTitle" text="非统调光伏电站装机容量分布">非统调光伏电站装机容量分布</div>
|
||||
<div class="twoTitle" text="非统调光伏电站装机容量分布" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">非统调光伏电站装机容量分布</div>
|
||||
<div class="twoCount">
|
||||
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(4)"/></div>
|
||||
<div id="echartsSix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three">
|
||||
<div class="twoTitle" text="海上风电配套送出工程">海上风电配套送出工程</div>
|
||||
<div class="twoTitle" text="海上风电配套送出工程" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">海上风电配套送出工程</div>
|
||||
<div class="threeContent">
|
||||
<div class="seaCount">
|
||||
<div class="seaNumber" v-for="(item,index) in seaCount" :key="index">
|
||||
<div :style="{color:item.color}" style=" font-size: 40px;font-weight: 700;">{{item.count}}</div>
|
||||
<div>{{item.name}}</div>
|
||||
<div :style="{color:item.color,fontSize:$px2rem('32px')}" style="font-weight: 700;font-family: DOUYU Font">{{item.count}}</div>
|
||||
<div :style="{fontSize:$px2rem('17px')}">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="echartsSeven"></div>
|
||||
|
|
@ -87,25 +87,25 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="newEnergy">
|
||||
<div class="title" text="新能源分布">新能源分布</div>
|
||||
<div class="title" text="新能源分布" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">新能源分布</div>
|
||||
<div class="content">
|
||||
<div class="mapCity">
|
||||
<div class="cityBtn" v-for="(item,index) in mapCity" :key="index" :text="item.name" :class="{'mapCityAction':mapCityAction==index}" @click="mapCityChange(index,item.name)">{{item.name}}</div>
|
||||
<div class="cityBtn" :style="{fontSize:$px2rem('17px')}" v-for="(item,index) in mapCity" :key="index" :text="item.name" :class="{'mapCityAction':mapCityAction==index}" @click="mapCityChange(index,item.name)">{{item.name}}</div>
|
||||
</div>
|
||||
<div id="echartsMap" ref="mapBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car">
|
||||
<div class="title" text="汽车产业数据">汽车产业数据</div>
|
||||
<div class="title" text="汽车产业数据" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">汽车产业数据</div>
|
||||
<div class="content">
|
||||
<div class="one">
|
||||
<div class="twoTitle" text="汽车产业与工业复产率对比">汽车产业与工业复产率对比</div>
|
||||
<div class="twoTitle" text="汽车产业与工业复产率对比" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">汽车产业与工业复产率对比</div>
|
||||
<div class="oneContent">
|
||||
<div id="echartsEight"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="twoTitle" text="各区县汽车产业复产率对比">各区县汽车产业复产率对比</div>
|
||||
<div class="twoTitle" text="各区县汽车产业复产率对比" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">各区县汽车产业复产率对比</div>
|
||||
<div class="twoContent">
|
||||
<div id="echartsNine"></div>
|
||||
</div>
|
||||
|
|
@ -113,26 +113,26 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="Bicarbon">
|
||||
<div class="title" text="绿色双碳">绿色双碳</div>
|
||||
<div class="title" text="绿色双碳" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">绿色双碳</div>
|
||||
<div class="content">
|
||||
<div class="one">
|
||||
<div class="oneContent">
|
||||
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(5)" /></div>
|
||||
<div class="green">
|
||||
<div class="greenLeft">
|
||||
<div class="powerGeneration" v-for="(item,index) in greenLeftData" :key="index">
|
||||
<div class="powerGeneration" :style="{fontSize:$px2rem('16px')}" v-for="(item,index) in greenLeftData" :key="index">
|
||||
<div class="fadian" :text="item.name">{{item.name}}</div>
|
||||
<div class="fadianliang">
|
||||
<div class="shuzhi" :style="{color:item.color}" style="font-size:37px;font-family: emoji;">{{item.count}}</div>
|
||||
<div class="shuzhi" :style="{color:item.color,fontSize:$px2rem('30px')}" style="font-family: DOUYU Font;">{{item.count}}</div>
|
||||
<div class="danwei" :text="item.company">{{item.company}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="greenRight">
|
||||
<div class="powerGeneration" v-for="(item,index) in greenRightData" :key="index">
|
||||
<div class="powerGeneration" :style="{fontSize:$px2rem('20px')}" v-for="(item,index) in greenRightData" :key="index">
|
||||
<div class="fadian" :text="item.name">{{item.name}}</div>
|
||||
<div class="fadianliang">
|
||||
<div class="shuzhi" :style="{color:item.color}" style="font-size:30px;font-family: emoji;">{{item.count}}</div>
|
||||
<div class="shuzhi" :style="{color:item.color,fontSize:$px2rem('27px')}" style="font-family: DOUYU Font;">{{item.count}}</div>
|
||||
<div class="danwei" :text="item.company">{{item.company}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -141,13 +141,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="title" text="清洁能源电力消纳情况">清洁能源电力消纳情况</div>
|
||||
<div class="title" text="清洁能源电力消纳情况" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">清洁能源电力消纳情况</div>
|
||||
<div class="twoContent">
|
||||
<div class="twoTitle" text="清洁能源规模">清洁能源规模</div>
|
||||
<div class="twoTitle" text="清洁能源规模" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">清洁能源规模</div>
|
||||
<div class="cleanEnergy">
|
||||
<div class="left">
|
||||
<div class="cleanEnergyTop">
|
||||
<div text="清洁能源装机容量" class="cleanEnergyText">清洁能源装机容量
|
||||
<div text="清洁能源装机容量" :style="{fontSize:$px2rem('17px')}" class="cleanEnergyText">清洁能源装机容量
|
||||
<span style="color:yellow;font-weight: 700">{{cleanEnergy}}</span>
|
||||
<div class="cleanEnergyText" text="MV">MV</div></div>
|
||||
</div>
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
</div>
|
||||
<div class="right">
|
||||
<div class="cleanEnergyTop">
|
||||
<div text="清洁能发电量" class="cleanEnergyText">清洁能发电量
|
||||
<div text="清洁能发电量" class="cleanEnergyText" :style="{fontSize:$px2rem('17px')}">清洁能发电量
|
||||
<span style="color:yellow;font-weight: 700">{{powerGeneration}}</span>
|
||||
<div class="cleanEnergyText" text="亿千瓦时">亿千瓦时</div></div>
|
||||
</div>
|
||||
|
|
@ -166,13 +166,13 @@
|
|||
</div>
|
||||
<div class="three">
|
||||
<div class="first">
|
||||
<div class="twoTitle" style="font-size:15px" text="盐城市新能源发电量增长">盐城市新能源发电量增长</div>
|
||||
<div class="twoTitle" text="盐城市新能源发电量增长" :style="{fontSize:$px2rem('13px')}" style="font-family: DOUYU Font">盐城市新能源发电量增长</div>
|
||||
<div class="threeContent">
|
||||
<div id="echartsTwelve"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div class="twoTitle" style="font-size:15px" text="盐城市发电量及占比">盐城市发电量及占比</div>
|
||||
<div class="twoTitle" text="盐城市发电量及占比" :style="{fontSize:$px2rem('13px')}" style="font-family: DOUYU Font">盐城市发电量及占比</div>
|
||||
<div class="secondContent">
|
||||
<div id="echartsThirteen"></div>
|
||||
</div>
|
||||
|
|
@ -181,23 +181,23 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="meteorological">
|
||||
<div class="title" text="盐城能源气象相关数据">盐城能源气象相关数据</div>
|
||||
<div class="title" text="盐城能源气象相关数据" :style="{fontSize:$px2rem('20px')}" style="font-family: DOUYU Font">盐城能源气象相关数据</div>
|
||||
<div class="content">
|
||||
<div class="one">
|
||||
<div class="first">
|
||||
<div class="twoTitle" text="近15日天气历史记录">近15日天气历史记录</div>
|
||||
<div class="twoTitle" text="近15日天气历史记录" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">近15日天气历史记录</div>
|
||||
<div class="oneContent">
|
||||
<div id="echartsFourteen"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div class="twoTitle" text="台风实时数据">台风实时数据</div>
|
||||
<div class="twoTitle" text="台风实时数据" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">台风实时数据</div>
|
||||
<div class="secondContent">
|
||||
<div id="echartsFifteen"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="third">
|
||||
<div class="twoTitle" text="设备故障数量统计图">设备故障数量统计图</div>
|
||||
<div class="twoTitle" text="设备故障数量统计图" :style="{fontSize:$px2rem('16px')}" style="font-family: DOUYU Font">设备故障数量统计图</div>
|
||||
<div class="thirdContent">
|
||||
<div id="echartsSixteen"></div>
|
||||
<div id="echartsSeventeen"></div>
|
||||
|
|
@ -206,12 +206,12 @@
|
|||
</div>
|
||||
<div class="two">
|
||||
<div class="first">
|
||||
<div class="twoTitle" style="font-size:15px" text="2022年台风期间设备故障数量分布">2022年台风期间设备故障数量分布</div>
|
||||
<div class="twoTitle" text="2022年台风期间设备故障数量分布" :style="{fontSize:$px2rem('12px')}" style="font-family: DOUYU Font">2022年台风期间设备故障数量分布</div>
|
||||
<div class="twoContents">
|
||||
<div class="count">
|
||||
<div style="color:rgb(255,204,0);font-size:40px;font-family: inherit;font-weight: 700;height: 52%;">{{smallMapData}}</div>
|
||||
<div style="color:#ffffff;font-size:13px;" v-show="smallMapDataShow">易损线路/开关共计</div>
|
||||
<div style="color:#ffffff;font-size:13px;" v-show="!smallMapDataShow">所属变电站</div>
|
||||
<div style="color:rgb(255,204,0);font-family: inherit;font-weight: 700;height: 52%;font-family: DOUYU Font" :style="{fontSize:$px2rem('40px')}">{{smallMapData}}</div>
|
||||
<div style="color:#ffffff;" :style="{fontSize:$px2rem('13px')}" v-show="smallMapDataShow">易损线路/开关共计</div>
|
||||
<div style="color:#ffffff;" :style="{fontSize:$px2rem('13px')}" v-show="!smallMapDataShow">所属变电站</div>
|
||||
</div>
|
||||
<div class="select">
|
||||
<el-select v-model="selectValue" placeholder="请选择" @change="selcetChange(selectValue)">
|
||||
|
|
@ -223,13 +223,13 @@
|
|||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="iconYisun" v-show="smallMapDataShow">易损线路/开关</div>
|
||||
<div class="iconYisun" v-show="!smallMapDataShow">所属变电站</div>
|
||||
<div class="iconYisun" v-show="smallMapDataShow" :style="{fontSize:$px2rem('16px')}">易损线路/开关</div>
|
||||
<div class="iconYisun" v-show="!smallMapDataShow" :style="{fontSize:$px2rem('16px')}">所属变电站</div>
|
||||
<div id="echartsSmallMap" ref="mapBars"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div class="twoTitle" style="font-size:15px" text="台风期配电网易发故障设备清单">台风期配电网易发故障设备清单</div>
|
||||
<div class="twoTitle" text="台风期配电网易发故障设备清单" :style="{fontSize:$px2rem('13px')}" style="font-family: DOUYU Font">台风期配电网易发故障设备清单</div>
|
||||
<div class="secondContent">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
|
|
@ -2407,7 +2407,7 @@ export default {
|
|||
//图例文字样式
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
|
|
@ -2419,7 +2419,7 @@ export default {
|
|||
interval: 1,
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem",
|
||||
fontSize:"15px",
|
||||
interval:0,
|
||||
},
|
||||
axisLine: {
|
||||
|
|
@ -2440,7 +2440,7 @@ export default {
|
|||
textStyle: {
|
||||
//坐标轴颜色
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
//坐标轴线样式
|
||||
|
|
@ -2604,7 +2604,7 @@ export default {
|
|||
//图例文字样式
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
|
|
@ -2616,7 +2616,7 @@ export default {
|
|||
interval: 1,
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem",
|
||||
fontSize:"15px",
|
||||
interval:0,
|
||||
},
|
||||
axisLine: {
|
||||
|
|
@ -2637,7 +2637,7 @@ export default {
|
|||
textStyle: {
|
||||
//坐标轴颜色
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
//坐标轴线样式
|
||||
|
|
@ -2867,7 +2867,7 @@ export default {
|
|||
//图例文字样式
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize:"0.7rem"
|
||||
fontSize:"13px"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
|
|
@ -3039,7 +3039,7 @@ export default {
|
|||
//图例文字样式
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize:"0.7rem"
|
||||
fontSize:"13px"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
|
|
@ -3764,7 +3764,7 @@ export default {
|
|||
//图例文字样式
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
|
|
@ -3804,7 +3804,7 @@ export default {
|
|||
textStyle: {
|
||||
//坐标轴颜色
|
||||
color: '#ffc600',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
//坐标轴线样式
|
||||
|
|
@ -3834,7 +3834,7 @@ export default {
|
|||
textStyle: {
|
||||
//坐标轴颜色
|
||||
color: 'rgb(2,243,175)',
|
||||
fontSize:"1rem"
|
||||
fontSize:"15px"
|
||||
}
|
||||
},
|
||||
//坐标轴线样式
|
||||
|
|
@ -4435,14 +4435,18 @@ export default {
|
|||
overflow: auto;
|
||||
padding:2%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
.textStyle:hover{
|
||||
.textStyleAct{
|
||||
color: rgb(22,193,166);
|
||||
background: url("../assets/images/textKuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.textStyle{
|
||||
margin-top: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.energyBottom{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="pop">
|
||||
<div class="twoTitle" :text="popName">
|
||||
<div class="twoTitle" style="font-family: DOUYU Font" :text="popName">
|
||||
{{popName}}
|
||||
<img src="../assets/images/close.png" style="position: absolute;right:0" @click="close"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,5 +23,17 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
// css: {
|
||||
// loaderOptions: {
|
||||
// postcss: {
|
||||
// plugins: [
|
||||
// require("postcss-px2rem-exclude")({
|
||||
// // 在这里，由于我的设计稿尺寸的屏幕分辨率是1920，具体原因如下：
|
||||
// remUnit: 576, // 设计稿尺寸/10
|
||||
// }),
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
}
|
||||
Loading…
Reference in New Issue