luoshiwen
/
suyiScreen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-04-11 17:08:58 +08:00
parent aabaf5c561
commit 1f04491f70
8 changed files with 1506 additions and 863 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/api/api.js
View File

@ -1,21 +1,21 @@
import axios from 'axios'
// if (process.env.NODE_ENV === 'development') {
// axios.defaults.baseURL = '/api'
// } else if (process.env.NODE_ENV === 'test') {
// axios.defaults.baseURL = '/electric_interface'} else
// if (process.env.NODE_ENV === 'test') {
// axios.defaults.baseURL = 'https://309k63x452.oicp.vip'
// }
// 设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
axios.defaults.headers.common['Authorization'] = `Bearer ${sessionStorage.getItem('tokenStr')}`;
// 首页数据
axios.interceptors.request.use(function (config) {
const tokenStr = localStorage.getItem('tokenStr')
const account= localStorage.getItem('account')
const roleId = localStorage.getItem('roleId')
const tokenStr = sessionStorage.getItem('tokenStr')
const account= sessionStorage.getItem('account')
const roleId = sessionStorage.getItem('roleId')
if (tokenStr) { // 如果本地有token,给它加上请求头
config.headers.token = tokenStr
config.headers.account = account
config.headers.roleId = roleId
// console.log(config,'配置');
}
return config
}, function (error) {
@ -25,58 +25,62 @@ axios.interceptors.request.use(function (config) {
})
// 登录的请求
export const doLogin = (data) =>{
return axios.post('api/login/doLogin',data)
return axios.post('electric_interface/login/doLogin',
data,
{headers: {'Content-Type': 'application/json'}}
)
}
// export const getHomePageInfo = (params) => {
// return axios.post('/gk/homePage/getHomePageInfo?cityId='+params)
// };
// 首页数据
export const getHomePageInfo = (params) => {
return axios.get('api/gk/homePage/getHomePageInfo', {
params
export const getHomePageInfo = (data) => {
return axios.post('electric_interface/gk/homePage/getHomePageInfo?cityId='+data.cityId, {
data
})
};
// 环境信息
export const getEnvironmentInfo = (params) => {
return axios.get('api/gk/info/getEnvironmentInfo', { params
export const getEnvironmentInfo = (data) => {
return axios.post('electric_interface/gk/info/getEnvironmentInfo?siteId='+data.siteId,
{ data
})
};
export const getSiteInfo = (params) => {
return axios.get('api/gk/info/getSiteInfo', {
return axios.get('electric_interface/gk/info/getSiteInfo', {
params
})
};
export const getSwitchInfo = (params) => {
return axios.get('api/gk/info/getSwitchInfo', {
return axios.get('electric_interface/gk/info/getSwitchInfo', {
params
})
};
//查询实时事件
export const getDeviceRecord = (params) => {
return axios.get('api/gk/info/getDeviceRecord', {
return axios.get('electric_interface/gk/info/getDeviceRecord', {
params
})
};
//查询实时记录下拉框
export const getDeviceNum = (params) => {
return axios.get('api/gk/info/getDeviceNum', {
return axios.get('electric_interface/gk/info/getDeviceNum', {
params
})
};
// 修改提交
export const updateDeviceRecord = (params) => {
return axios.get('api/gk/info/updateDeviceRecord', {
return axios.get('electric_interface/gk/info/updateDeviceRecord', {
params
})
};
// 获取城市列表
// export const getCityList = (params)=>{
// return axios.post('/gk/homePage/getCityList')
// }
export const getCityList = (params)=>{
return axios.post('electric_interface/gk/homePage/getCityList')
}
// 点击城市查询详情列表
// export const getCityDetail = (params)=>{
// return axios.post('/gk/homePage/getCityDetail?cityId='+params)
// }
export const getCityDetail = (data)=>{
return axios.post('electric_interface/gk/homePage/getCityDetail?cityId='+data.cityId)
}

1
src/components/layout/header.vue
View File

@ -132,6 +132,7 @@ export default {
message: '返回登录'
});
this.$router.push('/')
sessionStorage.clear(); //清除所有session值
})
.catch(action => {
this.$message({

15
src/main.js
View File

@ -68,6 +68,21 @@ function receiveMessageFromIframePage (event) {
}
window.addEventListener("message", receiveMessageFromIframePage, false);
//判断是否登录
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireLogin)) { // 判断该路由是否需要登录权限
if (sessionStorage.getItem('tokenStr')) { // 判断当前用户的登录信息authorities是否存在
next();
} else {
next({
path: '/'
})
}
} else {
next();
}
})
new Vue({
router,
store,

6
src/router/index.js
View File

@ -18,7 +18,8 @@ const routes = [
path: '/index',
name: 'index',
meta: {
title: '首页'
title: '首页',
requireLogin: true
},
component: () =>
import ('../views/land/index.vue'),
@ -46,7 +47,8 @@ const routes = [
path: '/landChildren',
name: 'landChildren',
meta: {
title: '侵华日军南京大屠杀遇难同胞纪念馆'
title: '侵华日军南京大屠杀遇难同胞纪念馆',
requireLogin: true
},
component: () =>
import ('../views/land/child/index.vue'),

1971
src/views/land/child/index.vue
View File

File diff suppressed because it is too large Load Diff

278
src/views/land/index.vue
View File

@ -1,6 +1,5 @@
<template>
<div id="index" ref="appRef" style="overflow: hidden">
<!-- <div class="bg" :style="{
backgroundImage:
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
@ -22,24 +21,49 @@
<!-- <div v-else class="host-body"> -->
<div class="search">
<el-input size="medium" placeholder="搜索" suffix-icon="el-icon-search" v-model="inputValue">
</el-input>
</div>
<headerIndex style="position: " />
<div class="mains">
<div class="leftContent">
<div class="kehuCount">
<div style="color: #fff; font-size: 12px">客户总数</div>
<div
style="
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: flex-start;
"
>
客户总数
<div class="search">
<i v-show="searchKuangShow" class="el-icon-search" @click="search" style="cursor: pointer;"></i>
<el-input
size="medium"
placeholder="搜索"
suffix-icon="el-icon-search"
v-model="inputValue"
v-show="!searchKuangShow"
>
</el-input>
</div>
</div>
<div style="color: #fff; font-size: 25px; font-weight: 700">
{{ totalCustomer }}&nbsp;&nbsp;<span style="color: #fff; font-size: 12px">个</span>
{{ totalCustomer }}&nbsp;&nbsp;<span
style="color: #fff; font-size: 12px"
>个</span
>
</div>
</div>
<div class="countInfor">
<div class="content" v-for="(item, index) in leftInfodata" :key="index">
<div style="width: 100px; height: 100px" :id="'echarts' + index"></div>
<div
class="content"
v-for="(item, index) in leftInfodata"
:key="index"
>
<div
style="width: 100px; height: 100px"
:id="'echarts' + index"
></div>
<!-- <img :src="item.pic" style="width:30px;height:30px"/> -->
<div class="text">
<div style="color: #fff; font-size: 12px">{{ item.text }}</div>
@ -47,13 +71,15 @@
{{ item.num }}
</div>
</div>
<div style="
color: #fff;
font-size: 12px;
display: flex;
align-items: flex-end;
height: 58%;
">
<div
style="
color: #fff;
font-size: 12px;
display: flex;
align-items: flex-end;
height: 58%;
"
>
{{ item.unit }}
</div>
</div>
@ -62,14 +88,24 @@
<div class="rightContent">
<div class="kehuCount">
<div style="color: #fff; font-size: 12px">主要总数</div>
<div style="color: #fff; font-size: 12px">主变总数</div>
<div style="color: #fff; font-size: 25px; font-weight: 700">
{{ totalTransformationSite }}&nbsp;&nbsp;<span style="color: #fff; font-size: 12px">个</span>
{{ totalTransformationSite }}&nbsp;&nbsp;<span
style="color: #fff; font-size: 12px"
>个</span
>
</div>
</div>
<div class="countInfor">
<div class="content" v-for="(item, index) in rightInfodata" :key="index">
<div style="width: 100px; height: 100px" :id="'rightEcharts' + index"></div>
<div
class="content"
v-for="(item, index) in rightInfodata"
:key="index"
>
<div
style="width: 100px; height: 100px"
:id="'rightEcharts' + index"
></div>
<!-- <img :src="item.pic" style="width:32px;height:32px"/> -->
<div class="text">
<div style="color: #fff; font-size: 12px">{{ item.text }}</div>
@ -77,13 +113,15 @@
{{ item.num }}
</div>
</div>
<div style="
color: #fff;
font-size: 12px;
display: flex;
align-items: flex-end;
height: 58%;
">
<div
style="
color: #fff;
font-size: 12px;
display: flex;
align-items: flex-end;
height: 58%;
"
>
{{ item.unit }}
</div>
</div>
@ -92,11 +130,17 @@
<!-- </div> -->
<!-- 背景圆圈装饰 -->
<div class="decorate">
<img src="@/assets/newbanImg/beijingyuan.png" style="width: 100%; height: 100%" />
<img
src="@/assets/newbanImg/beijingyuan.png"
style="width: 100%; height: 100%"
/>
</div>
<!-- 江苏地图 -->
<div class="jiangsuMap" v-show="jiangsuMapShow">
<img src="@/assets/newbanImg/jiangsuMap.png" style="width: 100%; height: 100%" />
<img
src="@/assets/newbanImg/jiangsuMap.png"
style="width: 100%; height: 100%"
/>
</div>
<!-- 江苏地图市级图标 -->
<div class="shijiIcon" v-show="shijiIconShow">
@ -112,12 +156,32 @@
<img src="@/assets/newbanImg/suzhou.png" class="suzhou" />
<img src="@/assets/newbanImg/wuxi.png" class="wuxi" />
<img src="@/assets/newbanImg/changzhou.png" class="changzhou" />
<img src="@/assets/newbanImg/nanjing.png" class="nanjing" v-show="!nanjingIconShow" />
<img src="@/assets/newbanImg/nanjing.png" class="nanjing1" v-show="nanjingIconShow"
@mouseover="regionMouseEnter" @click="switchNanJing" />
<div class="nanjingxuanshi" v-show="nanjingsekuai" @mouseover="regionMouseEnter"></div>
<img src="@/assets/newbanImg/nanjingsekuai.png" class="nanjingsekuai" @mouseleave="regionMouseLeave"
@click="switchNanJing" v-show="!nanjingsekuai" />
<img
src="@/assets/newbanImg/nanjing.png"
class="nanjing"
v-show="!nanjingIconShow"
/>
<img
src="@/assets/newbanImg/nanjing.png"
class="nanjing1"
v-show="nanjingIconShow"
@mouseover="regionMouseEnter"
@click="switchNanJing"
/>
<div
class="nanjingxuanshi"
v-show="nanjingsekuai"
@mouseover="regionMouseEnter"
v-if="cityName == '南京市'"
></div>
<img
src="@/assets/newbanImg/nanjingsekuai.png"
class="nanjingsekuai"
@mouseleave="regionMouseLeave"
@click="switchNanJing"
v-show="!nanjingsekuai"
v-if="cityName == '南京市'"
/>
</div>
<!-- 南京地图-->
<div class="nanjingMap" v-show="!jiangsuMapShow">
@ -139,19 +203,35 @@
<!-- 南京黄色定位图标 -->
<div class="datushaIcon" v-show="qujiIconShow">
<div class="yellowIcon">
<div style="width: 288px; height: 47px" v-show="popShow" @mouseover="popInfor" @mouseleave="popInforLeave">
</div>
<img src="@/assets/newbanImg/title.png" style="width: 288px; height: 47px; cursor: pointer; z-index: 9999"
@mouseover="popInfor" @mouseleave="popInforLeave" v-show="!popShow" />
<div
style="width: 288px; height: 47px"
v-show="popShow"
@mouseover="popInfor"
@mouseleave="popInforLeave"
></div>
<img
src="@/assets/newbanImg/title.png"
style="width: 288px; height: 47px; cursor: pointer; z-index: 9999"
@mouseover="popInfor"
@mouseleave="popInforLeave"
v-show="!popShow"
/>
<img src="@/assets/newbanImg/yellowIcon.png" style="width: 160px; height: 161px; cursor: pointer"
@click="intoMain" />
<img
src="@/assets/newbanImg/yellowIcon.png"
style="width: 160px; height: 161px; cursor: pointer"
@click="intoMain"
/>
</div>
</div>
<div v-show="popShow" id="pop">
<div class="mask">
<img src="@/assets/newbanImg/contentPop.png" style="width: 288px; height: 275px" @mouseover="popInfor"
@mouseleave="popInforLeave" />
<img
src="@/assets/newbanImg/contentPop.png"
style="width: 288px; height: 275px"
@mouseover="popInfor"
@mouseleave="popInforLeave"
/>
</div>
</div>
</div>
@ -169,7 +249,7 @@ import dialogComponent from "@/components/dialog";
import Chart from "./chart.vue";
// import io from 'socket.io-client'
import BasicBox5 from "@/components/BasicBox5";
import { getHomePageInfo} from "@/api/api";//getCityList, getCityDetail
import { getHomePageInfo, getCityList, getCityDetail } from "@/api/api"; //getCityList, getCityDetail
import mqtt from "mqtt";
// let socketRefs = '';
@ -177,7 +257,10 @@ export default {
mixins: [drawMixin],
data() {
return {
inputValue: '',//搜索框
searchKuangShow:true,
cityName: "", //城市名称
timer: null, //定时器
inputValue: "", //搜索框
qujiIconShow: false, //区级图标显示
jiangsuMapShow: true, //江苏地图显示
shijiIconShow: false, //市级图标降落
@ -213,7 +296,7 @@ export default {
{
pic: require("@/assets/newbanImg/zhuyao.png"),
num: "",
text: "主要总容量",
text: "主变总容量",
unit: "kVA",
name: "transformationCapacity",
},
@ -235,7 +318,6 @@ export default {
Visible: false,
basicInfoShow: true,
videoUrl: "/land/landMap.html",
cityName: "",
nanj: true,
landC: false,
backgroundPic: {
@ -416,7 +498,8 @@ export default {
itemViewM: "",
photoPathsM: [],
searchShow: true,
leftNum: []
leftNum: [],
cityId: "",
};
},
@ -429,15 +512,21 @@ export default {
BasicBox5,
Chart,
},
computed: {
},
computed: {},
mounted() {
// getCityList().then(res => {
// console.log(res, '城市数据');
// })
// getCityDetail(1).then(res => {
// console.log(res, '城市详情数据');
// })
getCityList()
.then((res) => {
console.log(res.data, "城市数据================");
if (res.data.code == 200) {
this.cityName = res.data.data[0].cityName;
this.cityId = res.data.data[0].cityId;
sessionStorage.setItem("cityId", res.data.data[0].cityId);
}
})
.catch((err) => {
console.log(err);
});
// this.getDataByMqtt(
// "ws://175.24.235.243:8083/mqtt",
// "tra_topic"
@ -458,11 +547,12 @@ export default {
that.nanjingIconShow = true;
}, 2600);
// if (this.shijiIconShow) {
window.setInterval(() => {
this.timer = window.setInterval(() => {
// 获取省级数据
getHomePageInfo().then((res) => {
let data = { cityId: this.cityId };
getHomePageInfo(data).then((res) => {
// console.log(res, '省级数据');
that.leftNum = []
that.leftNum = [];
that.totalCustomer = res.data.data.totalCustomer;
that.totalTransformationSite = res.data.data.totalTransformationSite;
let realTimeLoad = res.data.data.realTimeLoad.toString();
@ -471,7 +561,7 @@ export default {
for (let i = 0; i < that.leftInfodata.length; i++) {
if (key == that.leftInfodata[i].name) {
that.leftInfodata[i].num = res.data.data[key];
that.leftNum.push(that.leftInfodata[i].num)
that.leftNum.push(that.leftInfodata[i].num);
}
}
for (let i = 0; i < that.rightInfodata.length; i++) {
@ -482,11 +572,10 @@ export default {
}
}
});
}, 3000);
}, 3000);
// } else {
// window.setInterval(() => {
// 获取市级数据
// window.setInterval(() => {
// 获取市级数据
// getHomePageInfo('1').then((res) => {
// console.log(res, '市级数据');
// that.leftNum = []
@ -513,8 +602,6 @@ export default {
// // }, 3000);
// }
that.leftInfodata.forEach((item, index) => {
if (index == 0) {
that.leftInitEcharts("echarts" + index, that.leftNum[0]);
@ -542,7 +629,16 @@ export default {
},
},
},
beforeDestroy() {
// 离开当前路由前的操作
clearInterval(this.timer);
this.timer = null;
},
methods: {
//点击出现搜索框
search(){
this.searchKuangShow = false
},
//南京区域移入操作
regionMouseEnter() {
this.nanjingsekuai = false;
@ -589,7 +685,7 @@ export default {
axisTick: {
show: false,
},
data: ['a', 'b', 'c'],
data: ["a", "b", "c"],
z: 10,
},
polar: {
@ -611,11 +707,11 @@ export default {
},
series: [
{
name: 'a',
name: "a",
type: "bar",
data: [, '56.77'],
data: [, "56.77"],
showBackground: true,
barGap: '-100%',
barGap: "-100%",
roundCap: true,
z: 10,
// backgroundStyle: {
@ -631,19 +727,18 @@ export default {
},
{
// 浅色背景
type: 'bar',
type: "bar",
data: [, 100],
z: 0,
silent: true,
coordinateSystem: 'polar',
coordinateSystem: "polar",
barMaxWidth: 3,
name: 'c',
name: "c",
roundCap: true,
color: 'rgb(52,69,96)',
barGap: '-100%',
color: "rgb(52,69,96)",
barGap: "-100%",
},
]
],
};
myChart.setOption(option);
},
@ -676,7 +771,7 @@ export default {
axisTick: {
show: false,
},
data: ['a', 'b', 'c'],
data: ["a", "b", "c"],
z: 10,
},
polar: {
@ -698,11 +793,11 @@ export default {
},
series: [
{
name: 'a',
name: "a",
type: "bar",
data: [, '56.77'],
data: [, "56.77"],
showBackground: true,
barGap: '-100%',
barGap: "-100%",
roundCap: true,
z: 10,
// backgroundStyle: {
@ -718,16 +813,16 @@ export default {
},
{
// 浅色背景
type: 'bar',
data: [, '100'],
type: "bar",
data: [, "100"],
z: 0,
silent: true,
coordinateSystem: 'polar',
coordinateSystem: "polar",
barMaxWidth: 3,
name: 'c',
name: "c",
roundCap: true,
color: 'rgb(52,69,96)',
barGap: '-100%',
color: "rgb(52,69,96)",
barGap: "-100%",
},
],
};
@ -816,7 +911,6 @@ export default {
this.basicInfoShow = true;
},
/**
* 动态传输城市名称
* @param event
@ -849,10 +943,10 @@ export default {
// 搜索框的样式和位置
.search {
position: absolute;
top: 208px;
left: 120px;
z-index: 999;
margin-left: 10px;
}
::v-deep .el-input {
@ -868,7 +962,6 @@ export default {
border-radius: 0 !important;
}
/* 返回按钮 */
.back-button a {
position: absolute;
@ -1051,7 +1144,6 @@ export default {
top: 0px;
}
}
}
//背景圆圈的效果

29
src/views/login/login.vue
View File

@ -67,24 +67,23 @@ export default {
// 通过jsRsa加密
let accountA = jsRsa.encrypt(this.loginForm.account)
let passwordA = jsRsa.encrypt(this.loginForm.password)
let userMsg = {
let data = {
account:accountA,
password:passwordA
}
// console.log(this.loginForm, '密码');
// doLogin(userMsg).then(res => {
// if (res.data.code == 200) {
// // 存储token
// localStorage.setItem('tokenStr', res.data.result.token)
// // 存储用户名
// localStorage.setItem('account', res.data.result.account)
// localStorage.setItem('roleId', res.data.result.roleId)
// }
// })
this.$message.success("登录成功");
this.$router.push("/index");
doLogin({data}).then(res => {
console.log(res.data,'-===================');
if (res.data.code == 200) {
// 存储token
sessionStorage.setItem('tokenStr', res.data.data.token)
// 存储用户名
sessionStorage.setItem('account', res.data.data.account)
sessionStorage.setItem('roleId', res.data.data.roleId)
this.$message.success("登录成功");
this.$router.push("/index");
}
})
} else {
this.$message.error("请输入正确的账号和密码");
console.log("error submit!!");

17
vue.config.js
View File

@ -15,15 +15,26 @@ module.exports = {
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
// port: 8989, // 开发服务器运行端口号
proxy: {
'/api': { //代理的名字
'/electric_interface': { //代理的名字
// target: 'https://309k63x452.oicp.vip',
target: 'http://221.226.19.85:10123/',
// target: 'http://221.226.19.85:10123/',
target:'http://223.112.17.26:12303/electric_interface/',
ws: true,
changeOrigin: true,
pathRewrite:{
'^/api':'',
'^/electric_interface':'',
}
},
// '/aps': { //代理的名字
// // target: 'https://309k63x452.oicp.vip/',
// target:'http://223.112.17.26:12303/electric_interface/',
// // target: 'http://221.226.19.85:10123/',
// ws: true,
// changeOrigin: true,
// pathRewrite:{
// '^/aps':'',
// }
// },
}
}
}