代码提交
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# nengyuan
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "nengyuan",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"core-js": "^2.6.5",
|
||||
"echarts": "^5.4.0",
|
||||
"echarts-gl": "^2.0.5",
|
||||
"element-ui": "^2.15.10",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^5.0.0",
|
||||
"moment": "^2.29.4",
|
||||
"pdfjs-dist": "2.5.207",
|
||||
"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": {
|
||||
"@vue/cli-plugin-babel": "^3.0.4",
|
||||
"@vue/cli-service": "^3.0.4",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>盐城能源大数据中心</title>
|
||||
</head>
|
||||
<body style="margin: 0;">
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div style="font-size:28px;color:#ffffff">2022-12-14 14:30:50 | 星期二</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="leftBtn" @click="powerPdf"><div class="leftBtnText">电力行业发展</div></div>
|
||||
<div class="middleText"><img src="./assets/images/homeText.png"/></div>
|
||||
<div class="rightBtn" @click="energyPdf"><div class="rightBtnText">能源发展综述</div></div>
|
||||
</div>
|
||||
<div class="right"><img :src="weather" style="width:10%;height:50%"/>晴转多云 | -2-5℃ | 东风3级</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="pdfShow"
|
||||
v-show="fileType"
|
||||
style="
|
||||
width: 20%;
|
||||
height: 85%;
|
||||
position: absolute;
|
||||
background: rgb(5,53,45);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
overflow-y:scroll
|
||||
z-index: 9999;
|
||||
top: 98px;
|
||||
border: 20px solid rgb(5,53,45);
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
position: fixed;
|
||||
width: 20%;
|
||||
height: 3%;
|
||||
font-size: 18px;
|
||||
padding: 5px 10px 0 0;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
background: rgb(5,53,45,0.7);
|
||||
z-index: 9999;
|
||||
"
|
||||
@click="handleClosePdf"
|
||||
>
|
||||
x
|
||||
</div>
|
||||
<pdf v-for="i in numPages" :key="i" :page="i" :src="filePdf" style="top:3.2%;z-index:999"></pdf>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pdf from 'vue-pdf'
|
||||
import axios from "axios"
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
fileType:false, //pdf显示
|
||||
numPages: 1, //pdf页数
|
||||
filePdf:'', //pdf文件
|
||||
weather:require('./assets/weather/Cloudy .png')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//pdf文件加载
|
||||
// this.$nextTick(()=>{
|
||||
// this.filePdf.promise.then((pdf) => {
|
||||
// this.numPages = pdf.numPages
|
||||
// }).catch(err =>{
|
||||
// console.log(err);
|
||||
// })
|
||||
// })
|
||||
|
||||
},
|
||||
methods:{
|
||||
//关闭PDF文件
|
||||
handleClosePdf(){
|
||||
this.fileType = false
|
||||
this.filePdf = ''
|
||||
},
|
||||
powerPdf(){
|
||||
let fileUrl = "/pdf/power.pdf";
|
||||
this.numPages = 20
|
||||
this.filePdf = pdf.createLoadingTask(fileUrl)
|
||||
this.fileType = true
|
||||
|
||||
},
|
||||
energyPdf(){
|
||||
let fileUrl = "/pdf/energy.pdf";
|
||||
this.numPages = 27
|
||||
this.filePdf = pdf.createLoadingTask(fileUrl)
|
||||
this.fileType = true
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
pdf
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/*将大屏设置为1920*1080,设置缩放的方向*/
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
// color: #2c3e50;
|
||||
// margin-top: 60px;
|
||||
width: 5760px;
|
||||
height: 1080px;
|
||||
transition: all .2s linear;
|
||||
transform-origin: left top;
|
||||
background: url("./assets/images/home.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.top{
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 40px;
|
||||
box-sizing: border-box;
|
||||
background: url("./assets/images/homeTop.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.left{
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: flex-start;
|
||||
-webkit-box-pack: start;
|
||||
justify-content: space-around;
|
||||
font-weight: 800;
|
||||
font-family:"Microsoft YaHei";
|
||||
}
|
||||
.middle{
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
font-size:28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.leftBtn{
|
||||
width:20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color:rgb(15,251,251);
|
||||
.leftBtnText{
|
||||
height: 61%;
|
||||
// width: 56.62%;
|
||||
width: 62%;
|
||||
background: url("./assets/images/btnLeftPdf.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.middleText{
|
||||
width:59%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color:#ffffff;
|
||||
font-size: 60px;
|
||||
font-weight: 800;
|
||||
// font-style:italic;
|
||||
letter-spacing:6px;
|
||||
font-family:"微软雅黑";
|
||||
}
|
||||
// .middleText:before{
|
||||
// content: attr(text);
|
||||
// position: absolute;
|
||||
// z-index: 100;
|
||||
// color:rgba(84,255,233,0.4);
|
||||
// -webkit-mask:linear-gradient(to top, rgb(58,253,228), transparent );
|
||||
// }
|
||||
.rightBtn{
|
||||
width:24%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color:rgb(15,251,251);
|
||||
.rightBtnText{
|
||||
height: 61%;
|
||||
// width: 56.62%;
|
||||
width: 62%;
|
||||
background: url("./assets/images/btnRightPdf.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 9%;
|
||||
height: 100%;
|
||||
font-size:28px;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 11%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.pdfShow{
|
||||
&::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
</style>>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import axios from 'axios'
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
axios.defaults.baseURL = '/api'
|
||||
} else if (process.env.NODE_ENV === 'production') {
|
||||
axios.defaults.baseURL = '/api'
|
||||
}
|
||||
// 设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
|
||||
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
|
||||
|
||||
//查询数据
|
||||
export const getData = (params) => {
|
||||
return axios.get('/Handler/Data.ashx', {
|
||||
params
|
||||
})
|
||||
};
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 290 KiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 313 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 428 B |
|
After Width: | Height: | Size: 442 B |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 876 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,159 @@
|
|||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
li,
|
||||
ol,
|
||||
dl,
|
||||
dd,
|
||||
dt,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
img,
|
||||
input,
|
||||
button,
|
||||
textarea {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
input {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/*防止拖动*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 去掉图片低测默认的3像素空白缝隙*/
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
/*IE/7/6*/
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
s,
|
||||
i,
|
||||
em {
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* IE 浏览器 */
|
||||
.scrollbar-body {
|
||||
/*三角箭头的颜色*/
|
||||
scrollbar-arrow-color: #0581ab;
|
||||
/*滚动条滑块按钮的颜色*/
|
||||
scrollbar-face-color: #0581ab;
|
||||
/*滚动条整体颜色*/
|
||||
scrollbar-highlight-color: #0a393f;
|
||||
/*滚动条阴影*/
|
||||
scrollbar-shadow-color: #0099dd;
|
||||
/*滚动条轨道颜色*/
|
||||
scrollbar-track-color: #0a393f;
|
||||
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
|
||||
scrollbar-3dlight-color: #0099dd;
|
||||
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
|
||||
scrollbar-darkshadow-color: #0099dd;
|
||||
/*滚动条基准颜色*/
|
||||
scrollbar-base-color: #0581ab;
|
||||
}
|
||||
|
||||
.scrollbar-body {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.scrollbar-body::-webkit-scrollbar {
|
||||
width: 0.36vw;
|
||||
background-color: rgba(51, 238, 255, 0.2);
|
||||
}
|
||||
|
||||
.scrollbar-body::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 192, 255, 0.51);
|
||||
border-radius: 0.18vw;
|
||||
}
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<div ref="mapBar" class="map-class"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import geoJson from '../json/320900.json';
|
||||
|
||||
export default {
|
||||
name: 'echartsMap',
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
echarts.registerMap('yancheng', geoJson);
|
||||
var myChart = echarts.init(this.$refs.mapBar);
|
||||
// 使用数据 geoJson 注册名为 'china' 的地图
|
||||
var option ={
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}<br/>{c}'
|
||||
},
|
||||
// 一系列的配置参数
|
||||
visualMap: {
|
||||
min: 800,
|
||||
max: 50000,
|
||||
text: ['High', 'Low'],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1", "#215096"]
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
map: "yancheng",
|
||||
aspectScale: 0.75,
|
||||
layoutCenter: ["50%", "51.5%"], //地图位置
|
||||
layoutSize: "80%",
|
||||
roam: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "rgba(147, 235, 248, 1)",
|
||||
borderWidth: 0.5,
|
||||
color: {
|
||||
type: "linear-gradient",
|
||||
x: 0,
|
||||
y: 1500,
|
||||
x2: 2500,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#009DA1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#005B9E", // 50% 处的颜色
|
||||
},
|
||||
],
|
||||
global: true, // 缺省为 false
|
||||
},
|
||||
opacity: 0.5,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#2a333d",
|
||||
},
|
||||
},
|
||||
// regions: [
|
||||
// {
|
||||
// name: "南海诸岛",
|
||||
// itemStyle: {
|
||||
// areaColor: "rgba(0, 10, 52, 1)",
|
||||
// borderColor: "rgba(0, 10, 52, 1)",
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: "rgba(0, 10, 52, 1)",
|
||||
// borderColor: "rgba(0, 10, 52, 1)",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
z: 2,
|
||||
},
|
||||
series: [{
|
||||
type: 'map',
|
||||
map: 'yancheng',
|
||||
|
||||
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。开启缩放'scale'，开启平移'move'。设置成 true 为都开启
|
||||
// zoom: 1.23, // 当前视角的缩放比例
|
||||
// scaleLimit: { // 滚轮缩放的极限控制，默认的缩放为1
|
||||
// min: 1, // 最小的缩放值
|
||||
// max: 10, // 最大的缩放值
|
||||
// },
|
||||
|
||||
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
|
||||
label: {
|
||||
show: true, // 是否显示标签。
|
||||
fontSize: '11',
|
||||
color: 'rgba(0,0,0,0.7)',
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: '#dfdfdf',
|
||||
borderColor: '#ffffff',
|
||||
borderWidth: 1,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#9ebd2a'
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{ name: '滨海县', value: 20057.34 },
|
||||
{ name: '大丰市', value: 15477.48 },
|
||||
{ name: '东台市', value: 31686.1 },
|
||||
{ name: '阜宁县', value: 6992.6 },
|
||||
{ name: '建湖县', value: 44045.49 },
|
||||
{ name: '射阳县', value: 40689.64 },
|
||||
{ name: '亭湖区', value: 37659.78 },
|
||||
{ name: '响水县', value: 45180.97 },
|
||||
{ name: '盐都区', value: 55204.26 },
|
||||
],
|
||||
// "left": 0,
|
||||
// "right": 0,
|
||||
// "top": 0,
|
||||
// "bottom": 0
|
||||
}]
|
||||
};
|
||||
myChart.on('click', function(params){
|
||||
console.log(params);//此处可以写一些某个市被点击后的操作
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-class{
|
||||
width: 60%;
|
||||
height: 50%;
|
||||
border: 1px solid #ccc;
|
||||
/* -moz-transform:rotate(15deg);
|
||||
-webkit-transform:rotate(15deg);
|
||||
-o-transform:rotate(15deg);
|
||||
transform:rotate(15deg);
|
||||
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
Vue.use(ElementUI)
|
||||
import Plugin from 'v-fit-columns';
|
||||
Vue.use(Plugin);
|
||||
import * as echarts from 'echarts'
|
||||
import 'echarts-gl'
|
||||
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类型
|
||||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
Vue.prototype.$moment = moment
|
||||
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
const originalPush = Router.prototype.push
|
||||
|
||||
Router.prototype.push = function push (location) {
|
||||
|
||||
return originalPush.call(this, location).catch(err => err)
|
||||
|
||||
}
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect:'/index',
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
component: () => import ('./views/index.vue'),
|
||||
// //路由嵌套
|
||||
// children:[
|
||||
// {path: '/main',component: () => import('./views/main.vue')},
|
||||
// {path: '/main1',component: () => import('./views/main1.vue')},
|
||||
// ]
|
||||
},
|
||||
]
|
||||
})
|
||||
|
|
@ -0,0 +1,441 @@
|
|||
<template>
|
||||
<div class="pop">
|
||||
<div class="twoTitle" :text="popName">
|
||||
{{popName}}
|
||||
<img src="../assets/images/close.png" style="position: absolute;right:0" @click="close"/>
|
||||
</div>
|
||||
<div class="secondContent">
|
||||
<el-table
|
||||
:data="popData"
|
||||
style="width:100%"
|
||||
height="100%"
|
||||
stripe
|
||||
v-if="tableShow == 1"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="50">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="xianqu"
|
||||
label="区县"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yongdianliang"
|
||||
label="用电量(kwh)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="tanpaifang"
|
||||
label="碳排放量(kg)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="qiyeshuliang"
|
||||
label="企业数量"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="popData"
|
||||
style="width:100%"
|
||||
height="100%"
|
||||
stripe
|
||||
v-if="tableShow == 2"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="50">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="diqu"
|
||||
label="地区"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dianzhanshu"
|
||||
label="电站数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jizhongshi"
|
||||
label="电站数(集中式)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fenbushi"
|
||||
label="电站数(分布式)"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="popData"
|
||||
style="width:100%"
|
||||
height="100%"
|
||||
stripe
|
||||
v-if="tableShow == 3"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="50">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="feitongdiao"
|
||||
label="非统调电源类型"
|
||||
width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zuoshu"
|
||||
label="座数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="taishu"
|
||||
label="台数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bingwang"
|
||||
label="实际并网容量(MW)"
|
||||
width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="popData"
|
||||
style="width:100%"
|
||||
height="100%"
|
||||
stripe
|
||||
v-if="tableShow == 4"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="diqu"
|
||||
label="地区"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="guangfuhezhun"
|
||||
label="光伏核准总装机容量(MW)"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="guangfushiji"
|
||||
label="光伏实际总装机容量(MW)"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="popData"
|
||||
style="width:100%"
|
||||
height="100%"
|
||||
stripe
|
||||
v-if="tableShow == 5"
|
||||
>
|
||||
<el-table-column label="序号" align="center" width="80">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fadianchang"
|
||||
label="发电厂名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zhuangji"
|
||||
label="装机容量(MW)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fengdian"
|
||||
label="发电厂类型"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zuigao"
|
||||
label="最高电压等级"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="投运日期"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="运行状态"
|
||||
>
|
||||
<template slot-scope="scop">
|
||||
<span v-if="scop.row.status =='在运'">{{ scop.row.status}}</span>
|
||||
<span v-else-if="scop.row.status =='退运'" style="color:red">{{ scop.row.status}}</span>
|
||||
<span v-else-if="scop.row.status =='在建'" style="color:yellow">{{ scop.row.status}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-table
|
||||
:data="popData"
|
||||
style="width:100%"
|
||||
height="100%"
|
||||
stripe
|
||||
v-if="tableShow == 6"
|
||||
>
|
||||
<el-table-column label="序号" width="100">
|
||||
<template slot-scope="scop">
|
||||
{{ scop.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fadianchang"
|
||||
label="发电厂名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="shangwang"
|
||||
label="上网电量(单位/万KWH)"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'pop',
|
||||
props: {
|
||||
popName:{
|
||||
type: String,
|
||||
},
|
||||
popTableShow:{
|
||||
type:Number
|
||||
},
|
||||
popTableData1:{
|
||||
type:Array
|
||||
},
|
||||
popTableData2:{
|
||||
type:Array
|
||||
},
|
||||
popTableData3:{
|
||||
type:Array
|
||||
},
|
||||
popTableData4:{
|
||||
type:Array
|
||||
},
|
||||
popTableData5:{
|
||||
type:Array
|
||||
},
|
||||
popTableData6:{
|
||||
type:Array
|
||||
},
|
||||
popTableData7:{
|
||||
type:Array
|
||||
},
|
||||
popTableData8:{
|
||||
type:Array
|
||||
},
|
||||
popTableData9:{
|
||||
type:Array
|
||||
},
|
||||
popTableData10:{
|
||||
type:Array
|
||||
},
|
||||
popTableData11:{
|
||||
type:Array
|
||||
},
|
||||
popTableData12:{
|
||||
type:Array
|
||||
},
|
||||
popTableData13:{
|
||||
type:Array
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
tableShow:0,
|
||||
popData:[]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.popTableData2,'popTableData');
|
||||
this.tableShow = this.popTableShow;
|
||||
if (this.popTableShow == 1) {
|
||||
this.popData = this.popTableData1;
|
||||
}else if (this.popTableShow == 2) {
|
||||
this.popData = this.popTableData2;
|
||||
}else if (this.popTableShow == 3) {
|
||||
this.popData = this.popTableData3;
|
||||
}else if (this.popTableShow == 4) {
|
||||
this.popData = this.popTableData4;
|
||||
}else if (this.popTableShow == 5) {
|
||||
if (this.popName == '风电') {
|
||||
this.popData = this.popTableData5;
|
||||
}else if (this.popName == '光伏') {
|
||||
this.popData = this.popTableData6;
|
||||
}else if (this.popName == '光热一体') {
|
||||
this.popData = this.popTableData7;
|
||||
}else if (this.popName == '火电') {
|
||||
this.popData = this.popTableData8;
|
||||
}else if (this.popName == '水电') {
|
||||
this.popData = this.popTableData9;
|
||||
}
|
||||
}else if (this.popTableShow == 6) {
|
||||
if (this.popName == '光伏发电') {
|
||||
this.popData = this.popTableData10;
|
||||
}else if (this.popName == '风力发电') {
|
||||
this.popData = this.popTableData11;
|
||||
}else if (this.popName == '余电上网光伏') {
|
||||
this.popData = this.popTableData12;
|
||||
}else if (this.popName == '电厂') {
|
||||
this.popData = this.popTableData13;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
this.$parent.componentShow = "";
|
||||
this.$parent.modelOthers = false;
|
||||
this.$nextTick(()=>{
|
||||
this.$parent.cityActive = null;
|
||||
this.$parent.powerTypeAction = null
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pop{
|
||||
width: 13%;
|
||||
height: 49%;
|
||||
background: url("../assets/images/kuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
-webkit-animation: fadeInDown 0.3s;
|
||||
animation: fadeInDown 0.3s;
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
.twoTitle{
|
||||
height: 8%;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
background: url("../assets/images/twoTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.twoTitle:before{
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color:rgb(11,243,194);
|
||||
-webkit-mask:linear-gradient(to top, rgb(11,243,194), transparent );
|
||||
}
|
||||
.secondContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 2%;
|
||||
box-sizing: border-box;
|
||||
/deep/ .el-table {
|
||||
background-color: transparent !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
/deep/ .el-table th {
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/ .el-table__header {
|
||||
height: 48px;
|
||||
background: url("../assets/images/table.png") no-repeat !important;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .el-table__header th {
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
.cell {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&.el-table__cell.is-leaf {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
/deep/ .el-table tr {
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||||
.el-table .cell {
|
||||
// background-color: transparent !important;
|
||||
border: none;
|
||||
color: rgb(4,237,174);
|
||||
}
|
||||
/deep/ .el-table__body td .cell {
|
||||
white-space: nowrap !important;
|
||||
// word-break: break-all;
|
||||
}
|
||||
/deep/ .el-table th.el-table__cell>.cell{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/deep/.el-table::before{
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/.el-table ::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
// 表格斑马自定义颜色
|
||||
|
||||
/deep/ .el-table tbody tr:hover > td {
|
||||
background: rgb(6,168,127) !important;
|
||||
}
|
||||
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background: rgb(5, 70, 59);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
下拉显示动画效果
|
||||
*/
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, -20%, 0);
|
||||
transform: translate3d(0, -20%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
-webkit-transform: translate3d(0, -20%, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
module.exports = {
|
||||
// 打包文件配置
|
||||
publicPath: "/",
|
||||
assetsDir: "static",
|
||||
lintOnSave: false,
|
||||
devServer: {
|
||||
// overlay: { // 让浏览器 overlay 同时显示警告和错误
|
||||
// warnings: true,
|
||||
// errors: true,
|
||||
// },
|
||||
// hotOnly: true,
|
||||
// open: false, // npm run serve后自动打开页面
|
||||
// https: false, // https:{type:Boolean}
|
||||
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
|
||||
// port: 8989, // 开发服务器运行端口号
|
||||
proxy: {
|
||||
'/api': { //代理的名字
|
||||
target:'http://172.16.1.254:3333/',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite:{
|
||||
'^/api':'',
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||