lixiaobang
/
yanchengScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-01-11 17:55:32 +08:00
parent e60a9c4ef8
commit 98c421faee
8 changed files with 170 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -7,20 +7,22 @@
"build": "vue-cli-service build"
},
"dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^1.1.3",
"core-js": "^2.6.5",
"echarts": "^5.4.0",
"echarts-gl": "^2.0.5",
"element-ui": "^2.15.10",
"element-ui": "^2.15.6",
"less": "^4.1.3",
"less-loader": "^5.0.0",
"moment": "^2.29.4",
"pdfjs-dist": "2.5.207",
"postcss-px2rem-exclude": "^0.0.6",
"px2rem-loader": "^0.1.9",
"v-fit-columns": "^0.2.0",
"vue": "^2.6.10",
"vue-pdf": "4.2.0",
"vue-router": "^3.0.3",
"vue-video-player": "^5.0.2",
"vuex": "^3.0.1"
},
"devDependencies": {

9
postcss.config.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
"rootValue": 16,
"propList": ["*"]
}
}
}

28
src/App.vue
View File

@ -2,7 +2,7 @@
<div id="app">
<div class="top">
<div class="left">
<div style="font-size:28px;color:#ffffff">{{time}} &nbsp;&nbsp; | &nbsp;&nbsp;{{week}}</div>
<div style="color:#ffffff">{{time}} &nbsp;&nbsp; | &nbsp;&nbsp;{{week}}</div>
</div>
<div class="middle">
<div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">2022年度中国能源大数据报告——电力行业发展篇</div></div>
@ -10,7 +10,7 @@
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></div>
</div>
<div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} &nbsp;&nbsp;| &nbsp;&nbsp;<span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span>&nbsp;&nbsp;|&nbsp;&nbsp; {{wind}}
<span style="color:rgb(23,231,232);height: 50%;align-items: center;display: flex;">{{windLevel}}</span>级
<span style="color:rgb(23,231,232);font-size:35px">{{windLevel}}</span>级
</div>
</div>
<div class="content">
@ -80,6 +80,11 @@ import {getData} from './api/index.js'
}
},
mounted() {
// window.onload=function()
// {
// //获取标准rem单位
// document.documentElement.style.fontSize=(document.documentElement.clientWidth/5120)+'px';
// }
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
this.week = this.weekList[week]
window.setInterval(()=>{
@ -215,8 +220,8 @@ import {getData} from './api/index.js'
text-align: center;
// color: #2c3e50;
// margin-top: 60px;
width: 5760px;
height: 1080px;
width: 5120px;
height: 1440px;
transition: all .2s linear;
transform-origin: left top;
background: url("./assets/images/home.png") no-repeat;
@ -235,7 +240,7 @@ import {getData} from './api/index.js'
background-size: 100% 100%;
.left{
width: 10%;
height: 100%;
height: 68%;
display: flex;
-webkit-box-align: center;
align-items: flex-start;
@ -243,6 +248,8 @@ import {getData} from './api/index.js'
justify-content: space-around;
font-weight: 800;
font-family:"Microsoft YaHei";
align-items: center;
font-size:27px;
}
.middle{
width: 50%;
@ -266,7 +273,7 @@ import {getData} from './api/index.js'
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-size: 24px;
}
}
.handleAction{
@ -284,7 +291,7 @@ import {getData} from './api/index.js'
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-size: 24px;
}
}
.middleText{
@ -322,7 +329,7 @@ import {getData} from './api/index.js'
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-size: 24px;
}
}
.handleAction1{
@ -340,18 +347,19 @@ import {getData} from './api/index.js'
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
font-size: 24px;
}
}
}
.right{
width: 9%;
height: 100%;
height: 68%;
font-size:28px;
display: flex;
-webkit-box-pack: end;
color: #ffffff;
font-weight: 700;
align-items: center;
}
}
.content {

BIN
src/assets/images/textKuang.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

15
src/config/rem.js Normal file
View File

@ -0,0 +1,15 @@
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 5120
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}

13
src/main.js
View File

@ -13,11 +13,6 @@ Vue.prototype.$echarts = echarts
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VideoPlayer)
import moment from 'moment'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
@ -28,8 +23,14 @@ Vue.prototype.$moment = moment
Vue.config.productionTip = false
//页面加载完毕后设置html字体大小
window.onload=function()
{
//获取标准rem单位
document.documentElement.style.fontSize=(document.documentElement.clientWidth/5120)*15+'px';
}
import './config/rem'
new Vue({
router,
render: h => h(App)

199
src/views/index.vue
View File

@ -4,7 +4,7 @@
<div class="energyTop">
<div class="title" text="能源规划-政策新闻">能源规划-政策新闻</div>
<div class="content">
<div v-for="(item,index) in news" :key="index">
<div v-for="(item,index) in news" :key="index" class="textStyle">
{{item.Journalism}}
</div>
</div>
@ -12,7 +12,7 @@
<div class="energyBottom">
<div class="title" text="污染企业监测">污染企业监测</div>
<div class="content">
<div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(1)"/></div>
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(1)"/></div>
<div id="echartsOne"></div>
</div>
</div>
@ -42,14 +42,14 @@
<div class="two">
<div class="twoTitle" text="非统调光伏电站座数分布">非统调光伏电站座数分布</div>
<div class="twoCount">
<div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(2)"/></div>
<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="threeCount">
<div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(3)"/></div>
<div class="details"><img src="../assets/images/details.png" style="width:20%;height:75%;cursor: pointer;" @click="handlePop(3)"/></div>
<div id="echartsFour"></div>
</div>
</div>
@ -67,7 +67,7 @@
<div class="two">
<div class="twoTitle" text="非统调光伏电站装机容量分布">非统调光伏电站装机容量分布</div>
<div class="twoCount">
<div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(4)"/></div>
<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>
@ -76,7 +76,7 @@
<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: 30px;font-weight: 700;">{{item.count}}</div>
<div :style="{color:item.color}" style=" font-size: 40px;font-weight: 700;">{{item.count}}</div>
<div>{{item.name}}</div>
</div>
</div>
@ -117,7 +117,7 @@
<div class="content">
<div class="one">
<div class="oneContent">
<div class="details"><img src="../assets/images/details.png" style="width:99px;height:41px" @click="handlePop(5)" /></div>
<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">
@ -166,13 +166,13 @@
</div>
<div class="three">
<div class="first">
<div class="twoTitle" text="盐城市新能源发电量增长">盐城市新能源发电量增长</div>
<div class="twoTitle" style="font-size:15px" text="盐城市新能源发电量增长">盐城市新能源发电量增长</div>
<div class="threeContent">
<div id="echartsTwelve"></div>
</div>
</div>
<div class="second">
<div class="twoTitle" text="盐城市发电量及占比">盐城市发电量及占比</div>
<div class="twoTitle" style="font-size:15px" text="盐城市发电量及占比">盐城市发电量及占比</div>
<div class="secondContent">
<div id="echartsThirteen"></div>
</div>
@ -206,8 +206,8 @@
</div>
<div class="two">
<div class="first">
<div class="twoTitle" text="2022年台风期间设备故障数量分布">2022年台风期间设备故障数量分布</div>
<div class="twoContent">
<div class="twoTitle" style="font-size:15px" text="2022年台风期间设备故障数量分布">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>
@ -223,12 +223,13 @@
</el-option>
</el-select>
</div>
<div class="iconYisun">易损线路/开关</div>
<div class="iconYisun" v-show="smallMapDataShow">易损线路/开关</div>
<div class="iconYisun" v-show="!smallMapDataShow">所属变电站</div>
<div id="echartsSmallMap" ref="mapBars"></div>
</div>
</div>
<div class="second">
<div class="twoTitle" text="台风期配电网易发故障设备清单">台风期配电网易发故障设备清单</div>
<div class="twoTitle" style="font-size:15px" text="台风期配电网易发故障设备清单">台风期配电网易发故障设备清单</div>
<div class="secondContent">
<el-table
:data="tableData"
@ -477,6 +478,7 @@ export default {
}
},
mounted(){
this. mapCityChange(0,'总览');
this.echartsMap(null);
this.echartsSmallMap(null);
//查询新闻政策
@ -785,12 +787,15 @@ export default {
action:'one',
key:'地图经纬度'
}).then((res)=>{
let mapData = []
for (let i = 0; i < res.data.data.length; i++) {
if (name == res.data.data[i].地区) {
let mapData = res.data.data[i]
this.echartsMap(mapData);
if (name == res.data.data[i].类型) {
mapData.push(res.data.data[i])
}else if (name == '总览') {
mapData.push(res.data.data[i])
}
}
this.echartsMap(mapData);
})
},
echartsOne(contaminatedData){
@ -1998,56 +2003,55 @@ export default {
myChart.setOption(option);
},
echartsMap(val){
let mapData = []
let mapData = val
let mapList = []
if (val != null) {
mapData.push(val)
mapList = Object.keys(mapData).map((item,index)=>{
return {name:mapData[index].地区,value:[mapData[index].经度,mapData[index].纬度],obj:mapData[index].项目名称}
})
}
var iconData = [
{
name: "响水县", locs: [
{name: "", value: [119.354952, 33.247371]},
{name: "", value: [119.319891, 33.230946]}
]
},
{
name: "滨海县", locs: [
{name: "", value: [119.499821, 32.788484]},
{name: "", value: [119.511176, 32.779256]}
]
},
{
name: "射阳县", locs: [
{name: "", value: [119.576383, 32.440478]},
{name: "", value: [119.573257, 32.464578]}
]
},
{
name: "亭湖区", locs: [
// {name: "", value: [120.139998,33.377631]},
{name: "", value: [119.358967, 32.397142]}
]
},
{
name: "大丰市", locs: [
{name: "", value: [119.249536, 32.26075]},
{name: "", value: [119.1541, 32.320819]}
]
}
];
function getsimboldata(mapName, XXX_ARR) {
//console.log(mapName);
let NullArr = [];
// var iconData = [
// {
// name: "响水县", locs: [
// {name: "", value: [119.354952, 33.247371]},
// {name: "", value: [119.319891, 33.230946]}
// ]
// },
// {
// name: "滨海县", locs: [
// {name: "", value: [119.499821, 32.788484]},
// {name: "", value: [119.511176, 32.779256]}
// ]
// },
// {
// name: "射阳县", locs: [
// {name: "", value: [119.576383, 32.440478]},
// {name: "", value: [119.573257, 32.464578]}
// ]
// },
// {
// name: "亭湖区", locs: [
// // {name: "", value: [120.139998,33.377631]},
// {name: "", value: [119.358967, 32.397142]}
// ]
// },
// {
// name: "大丰市", locs: [
// {name: "", value: [119.249536, 32.26075]},
// {name: "", value: [119.1541, 32.320819]}
// ]
// }
// ];
// function getsimboldata(mapName, XXX_ARR) {
// //console.log(mapName);
// let NullArr = [];
for (const arr of XXX_ARR) {
NullArr = NullArr.concat(arr.locs);
}
console.log(NullArr);
return NullArr;
}
// for (const arr of XXX_ARR) {
// NullArr = NullArr.concat(arr.locs);
// }
// console.log(NullArr);
// return NullArr;
// }
this.$echarts.registerMap('yancheng', geoJson);
var myChart = this.$echarts.init(this.$refs.mapBar);
// 使用数据 geoJson 注册名为 'china' 的地图
@ -2114,9 +2118,13 @@ export default {
geo: {
map: "yancheng",
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地图位置
layoutSize: "80%",
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "100%",
roam: false,
// show:false,
// zoom:0.82,
zoom:1.25,
// zlevel:-10,
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
@ -2152,13 +2160,13 @@ export default {
{
type: 'map',
map: 'yancheng',
// geoIndex:0,
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
// zoom: 1.23, // 当前视角的缩放比例
// scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
// min: 1, // 最小的缩放值
// max: 10, // 最大的缩放值
// },
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true, // 是否显示标签。
@ -2367,17 +2375,17 @@ export default {
thirdIndustry.push(val[i].工业复产率);
}
var option = {
// grid: {
// x: 0,
// y: 0,
// x2: 0,
// y2: 0,
// top: '15%',
// left: '3%',
// right: '3%',
// bottom: '20%',
// containLabel: true,
// },
grid: {
// x: 0,
// y: 0,
// x2: 0,
// y2: 0,
// top: '15%',
left: '13%',
// right: '3%',
// bottom: '20%',
// containLabel: true,
},
tooltip: {
trigger: 'axis',
show:true,
@ -3719,7 +3727,7 @@ export default {
let firstIndustry = [];
let thirdIndustry = [];
val.forEach((item,index) => {
xData.push(this.$moment().format("YY-M-")+item.第N天)
xData.push(this.$moment().format("M-")+item.第N天)
firstIndustry.push(item.风速);
thirdIndustry.push(item.降水量)
});
@ -4144,6 +4152,10 @@ export default {
top: '30%',
containLabel: true,
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
legend: {
orient: 'horizontal',
top: 'top',
@ -4159,7 +4171,7 @@ export default {
//color: ['#ff7824', '#ffde32', '#3bffb7', '#00eaff', '#0084ff'],
series: [
{
name: 'Nightingale Chart',
name: '设备故障数量统计图',
type: 'pie',
radius: [20, 80],
center: ['50%', '60%'],
@ -4268,16 +4280,18 @@ export default {
}
},
// 一系列的配置参数
visualMap: {
type: 'piecewise',
min: 0,
max: maxData,
left: '50',
left: '0',
bottom:'90',
showLabel: !0,
color: '#fff',
// align: 'left',
// marginTop:10,
inRange: {
color: ['rgb(190,248,221)', 'rgb(86,202,149)', 'rgb(88,182,229)','rgb(255,186,85)','rgb(241,136,112)'],
symbol: 'rect'
@ -4297,7 +4311,11 @@ export default {
// min: 1, // 最小的缩放值
// max: 10, // 最大的缩放值
// },
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: "80%",
roam: false,
zoom:1,
zlevel:-10,
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
label: {
show: true, // 是否显示标签。
@ -4413,13 +4431,18 @@ export default {
text-indent : 32px;
letter-spacing:1px;
text-align:left;
line-height:25px;
// line-height:25px;
overflow: auto;
padding:2%;
box-sizing: border-box;
&::-webkit-scrollbar{
width: 0;
}
.textStyle:hover{
color: rgb(22,193,166);
background: url("../assets/images/textKuang.png") no-repeat;
background-size: 100% 100%;
}
}
}
.energyBottom{
@ -4562,6 +4585,9 @@ export default {
color: #ffffff;
background: url("../assets/images/mapKuang.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
}
.btnCityList:before{
content: attr(text);
@ -5118,6 +5144,8 @@ export default {
background-size: 100% 100%;
box-sizing: border-box;
padding-left: 5%;
display: flex;
justify-content: center;
.cleanEnergyText{
color: #ffffff;
display: flex;
@ -5148,7 +5176,9 @@ export default {
background: url("../assets/images/energyKuang.png") no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding-left: 5%;
// padding-left: 5%;
display: flex;
justify-content: center;
.cleanEnergyText{
color: #ffffff;
display: flex;
@ -5324,10 +5354,13 @@ export default {
.twoTitle{
height: 8%;
}
.twoContent{
.twoContents{
width: 100%;
height: calc(100% - 8%);
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
.count{
width: 25.5%;
height: 26.8%;
@ -5379,8 +5412,8 @@ export default {
};
#echartsSmallMap{
width: 100%;
height: 100%;
width: 92%;
height: 90%;
}
}
@ -5401,7 +5434,7 @@ export default {
/deep/ .el-table {
background-color: transparent !important;
height: 100%;
overflow-y: auto;
// overflow-y: auto;
}
/deep/ .el-table th {
background-color: transparent;

2
vue.config.js
View File

@ -15,7 +15,7 @@ module.exports = {
// port: 8989, // 开发服务器运行端口号
proxy: {
'/api': { //代理的名字
target:'http://172.16.1.254:3333/',
target:'http://111.229.30.246:3113/',
ws: true,
changeOrigin: true,
pathRewrite:{