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" "build": "vue-cli-service build"
}, },
"dependencies": { "dependencies": {
"amfe-flexible": "^2.2.1",
"axios": "^1.1.3", "axios": "^1.1.3",
"core-js": "^2.6.5", "core-js": "^2.6.5",
"echarts": "^5.4.0", "echarts": "^5.4.0",
"echarts-gl": "^2.0.5", "echarts-gl": "^2.0.5",
"element-ui": "^2.15.10", "element-ui": "^2.15.6",
"less": "^4.1.3", "less": "^4.1.3",
"less-loader": "^5.0.0", "less-loader": "^5.0.0",
"moment": "^2.29.4", "moment": "^2.29.4",
"pdfjs-dist": "2.5.207", "pdfjs-dist": "2.5.207",
"postcss-px2rem-exclude": "^0.0.6",
"px2rem-loader": "^0.1.9",
"v-fit-columns": "^0.2.0", "v-fit-columns": "^0.2.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-pdf": "4.2.0", "vue-pdf": "4.2.0",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",
"vue-video-player": "^5.0.2",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
"devDependencies": { "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 id="app">
<div class="top"> <div class="top">
<div class="left"> <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>
<div class="middle"> <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">2022年度中国能源大数据报告——电力行业发展篇</div></div>
@ -10,7 +10,7 @@
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></div> <div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">2022年度中国能源大数据报告——能源发展综述篇</div></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}} <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> </div>
<div class="content"> <div class="content">
@ -80,6 +80,11 @@ import {getData} from './api/index.js'
} }
}, },
mounted() { 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() let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
this.week = this.weekList[week] this.week = this.weekList[week]
window.setInterval(()=>{ window.setInterval(()=>{
@ -215,8 +220,8 @@ import {getData} from './api/index.js'
text-align: center; text-align: center;
// color: #2c3e50; // color: #2c3e50;
// margin-top: 60px; // margin-top: 60px;
width: 5760px; width: 5120px;
height: 1080px; height: 1440px;
transition: all .2s linear; transition: all .2s linear;
transform-origin: left top; transform-origin: left top;
background: url("./assets/images/home.png") no-repeat; background: url("./assets/images/home.png") no-repeat;
@ -235,7 +240,7 @@ import {getData} from './api/index.js'
background-size: 100% 100%; background-size: 100% 100%;
.left{ .left{
width: 10%; width: 10%;
height: 100%; height: 68%;
display: flex; display: flex;
-webkit-box-align: center; -webkit-box-align: center;
align-items: flex-start; align-items: flex-start;
@ -243,6 +248,8 @@ import {getData} from './api/index.js'
justify-content: space-around; justify-content: space-around;
font-weight: 800; font-weight: 800;
font-family:"Microsoft YaHei"; font-family:"Microsoft YaHei";
align-items: center;
font-size:27px;
} }
.middle{ .middle{
width: 50%; width: 50%;
@ -266,7 +273,7 @@ import {getData} from './api/index.js'
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 24px;
} }
} }
.handleAction{ .handleAction{
@ -284,7 +291,7 @@ import {getData} from './api/index.js'
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 24px;
} }
} }
.middleText{ .middleText{
@ -322,7 +329,7 @@ import {getData} from './api/index.js'
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 24px;
} }
} }
.handleAction1{ .handleAction1{
@ -340,18 +347,19 @@ import {getData} from './api/index.js'
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 25px; font-size: 24px;
} }
} }
} }
.right{ .right{
width: 9%; width: 9%;
height: 100%; height: 68%;
font-size:28px; font-size:28px;
display: flex; display: flex;
-webkit-box-pack: end; -webkit-box-pack: end;
color: #ffffff; color: #ffffff;
font-weight: 700; font-weight: 700;
align-items: center;
} }
} }
.content { .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' import moment from 'moment'
//定义一个全局过滤器实现日期格式化 //定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型 Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
@ -28,8 +23,14 @@ Vue.prototype.$moment = moment
Vue.config.productionTip = false Vue.config.productionTip = false
//页面加载完毕后设置html字体大小
window.onload=function()
{
//获取标准rem单位
document.documentElement.style.fontSize=(document.documentElement.clientWidth/5120)*15+'px';
}
import './config/rem'
new Vue({ new Vue({
router, router,
render: h => h(App) render: h => h(App)

199
src/views/index.vue
View File

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

2
vue.config.js
View File

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