大屏在同一标签页跳转

This commit is contained in:
wenxin 2024-12-06 18:10:16 +08:00
parent f724600ba2
commit 69bfee5580
15 changed files with 334 additions and 242 deletions

View File

@ -5,6 +5,10 @@ module.exports = {
es2021: true,
node: true,
},
globals: {
BASE_API: 'readonly',
API_URL_PRE: 'readonly',
},
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 12,

22
config.js Normal file
View File

@ -0,0 +1,22 @@
const BASE_API = {
SERVER_IP: 'http://www.linxyun.com',
// SERVER_IP: 'http://121.229.160.133:8088',
GetFileConfigUrl: '/smartroadlamp/genFileConfig.action',
// 部署时是否要加前缀后端API地址需要统计加上这串当部署不需要时该串配置成空串就可以
URL_PRE: '',
// 显示的项目名称
PROJECT_NAME: '智慧路灯',
PROJECT_URI: '/smartroadlamp',
ContainCustmerID: '0',
CustomerType: 1,
// 项目ID
ENT_CODE: '56',
SubSysID: '2',
// 提示消息显示时长
MSG_SHOW_TIME: 3000,
IS_TEST: false,
// 是否开启国际化
I18N: false,
// 管理员角色编码
MANAGER_ROLE: '2101'
}

View File

@ -13,6 +13,7 @@
content="vue-next-admin基于 vue3 + CompositionAPI + typescript + vite + element plus适配手机、平板、pc 的后台开源免费管理系统模板vue-prev-admin基于 vue2 + element ui适配手机、平板、pc 的后台开源免费管理系统模板!"
/>
<link rel="icon" href="/favicon.ico" />
<script src="./config.js"></script>
<title>vue-next-admin</title>
</head>
<body>

6
plugins.d.ts vendored Normal file
View File

@ -0,0 +1,6 @@
/* eslint-disable */
declare module 'vue-grid-layout';
declare module 'qrcodejs2-fixes';
declare module 'splitpanes';
declare module 'js-cookie';
declare const BASE_API: any;

35
src/api/linxyun/common.ts Normal file
View File

@ -0,0 +1,35 @@
import request from '/@/utils/request';
import { getApiUrl } from '/@/api/linxyun/linxyunapi';
// 获取所有数据
export const getAllData = async (uriName: string) => {
const records = [];
let url = getApiUrl(uriName);
let current = 1;
let limit = 399;
while (true) {
try {
const response = await request({
url: url,
method: 'get',
params: { current, limit }
});
console.log("分页:", response);
if (response.Records.length === 0) {
console.log("分页结束: ", response);
break;
}
// 将当前页的数据合并到 records 中
records.push(...response.Records);
// 更新 current 或其他分页条件
current++;
} catch (error) {
console.error('请求出错:', error);
break;
}
}
return records;
};

View File

@ -1,4 +1,3 @@
import {BASE_API} from '/@/config.js'
const apiUrl = new Map<string, string>();
// apiurl.set('queryEnumOptions', '/eslithe/queryEnumOptionsNew.action');
// apiurl.set('addEnumOptions', '/eslithe/add_dev_enum_options.action');
@ -12,7 +11,7 @@ export function getApiUrl(apiName: string) {
// 全量Url
url = apiName;
} else {
let uri = '';
let uri: string | undefined = '';
if (apiName.indexOf('/') === 0) {
//全量URI
uri = apiName;

View File

@ -5,7 +5,6 @@
<script setup>
import { onMounted, onUnmounted, ref, defineProps, toRefs, watch } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import coordtransform from 'coordtransform';
const props = defineProps({
markerData: {
type: Object,

View File

@ -1,65 +0,0 @@
var BASE_URL = ''
var BASE_API = null
if (process.env.NODE_ENV == 'development') {
BASE_API = {
SERVER_IP: 'http://www.linxyun.com',
// SERVER_IP: 'http://121.229.160.133:8088',
GetFileConfigUrl: '/smartroadlamp/genFileConfig.action',
// 部署时是否要加前缀后端API地址需要统计加上这串当部署不需要时该串配置成空串就可以
URL_PRE: '',
// 显示的项目名称
PROJECT_NAME: '智慧路灯',
PROJECT_URI: '/smartroadlamp',
ContainCustmerID: '0',
CustomerType: 1,
// 项目ID
ENT_CODE: '56',
SubSysID: '2',
// 提示消息显示时长
MSG_SHOW_TIME: 3000,
IS_TEST: false,
// 是否开启国际化
I18N: false,
// 管理员角色编码
MANAGER_ROLE: '2101'
}
BASE_URL = BASE_API.SERVER_IP + BASE_API.URL_PRE + BASE_API.PROJECT_URI // qe环境
// BASE_URL = 'http://dev.linxyun.com:8080'
// BASE_URL = 'http://42.192.98.233:8080/usercenter' // qe环境
} else {
BASE_API = {
SERVER_IP: 'http://www.linxyun.com',
GetFileConfigUrl: '/smartroadlamp/genFileConfig.action',
// 部署时是否要加前缀后端API地址需要统计加上这串当部署不需要时该串配置成空串就可以
URL_PRE: '',
// 显示的项目名称
PROJECT_NAME: '智慧路灯',
PROJECT_URI: '/smartroadlamp',
ContainCustmerID: '0',
CustomerType: 1,
// 项目ID
ENT_CODE: '56',
SubSysID: '2',
// 提示消息显示时长
MSG_SHOW_TIME: 3000,
IS_TEST: false,
// 是否开启国际化
I18N: false,
// 管理员角色编码
MANAGER_ROLE: '2100'
}
BASE_URL = BASE_API.SERVER_IP + BASE_API.URL_PRE + BASE_API.PROJECT_URI // 生产环境
// BASE_URL = 'http://dev.linxyun.com:8080'
}
//http://dev.linxyun.com:8080
const config = {
base_url: BASE_API.SERVER_IP + BASE_API.URL_PRE,
project_url: BASE_API.URL_PRE + BASE_API.PROJECT_URI,
project_pre: BASE_API.URL_PRE,
server_addr: BASE_API.SERVER_IP,
ent_code: BASE_API.ENT_CODE,
msg_show_time: BASE_API.MSG_SHOW_TIME,
sub_sys_id: BASE_API.SubSysID
}
export { config, BASE_API }

View File

@ -73,11 +73,10 @@ export default {
layoutLinkView: '外链',
layoutIframeViewOne: '内嵌 iframe1',
layoutIframeViewTwo: '内嵌 iframe2',
visualizingIndex: '可视化',
visualizingDeviceManagement: '设备管理',
visualizingEventList: '事件列表',
visualizingEventHandle: '事件处理',
visualizingDataStatistics: '数据统计'
deviceManagement: '设备管理',
eventList: '事件列表',
eventHandle: '事件处理',
dataStatistics: '数据统计'
},
staticRoutes: {
signIn: '登录',

View File

@ -50,18 +50,74 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
{
path: '/home',
name: 'home',
component: () => import('/@/views/home/index.vue'),
component: () => import('/@/views/visualizing/index.vue'),
meta: {
title: 'message.router.home',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: true,
isIframe: false,
roles: ['admin', 'common'],
roles: ['admin'],
icon: 'iconfont icon-shouye',
},
},
{
path: '/deviceManagement',
name: 'deviceManagement',
component: () => import('/@/views/visualizing/deviceManagement.vue'),
meta: {
title: 'message.router.deviceManagement',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/eventHandle',
name: 'eventHandle',
component: () => import('/@/views/visualizing/eventHandle.vue'),
meta: {
title: 'message.router.eventHandle',
isLink: '/visualizingEventHandle',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/eventList',
name: 'eventList',
component: () => import('/@/views/visualizing/eventList.vue'),
meta: {
title: 'message.router.eventList',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/dataStatistics',
name: 'dataStatistics',
component: () => import('/@/views/visualizing/dataStatistics.vue'),
meta: {
title: 'message.router.dataStatistics',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/system',
name: 'system',
@ -1057,81 +1113,81 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
* isLink staticRoutes
*/
children: [
{
path: '/visualizing/index',
name: 'RootVisualizingIndex',
component: () => import('/@/layout/routerView/link.vue'),
meta: {
title: 'message.router.visualizingIndex',
isLink: '/visualizingIndex',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/visualizing/deviceManagement',
name: 'RootVisualizingDeviceManagement',
component: () => import('/@/layout/routerView/link.vue'),
meta: {
title: 'message.router.visualizingDeviceManagement',
isLink: '/visualizingDeviceManagement',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/visualizing/eventHandle',
name: 'RootVisualizingEventHandle',
component: () => import('/@/layout/routerView/link.vue'),
meta: {
title: 'message.router.visualizingEventHandle',
isLink: '/visualizingEventHandle',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/visualizing/eventList',
name: 'RootVisualizingEventList',
component: () => import('/@/layout/routerView/link.vue'),
meta: {
title: 'message.router.visualizingEventList',
isLink: '/visualizingEventList',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
{
path: '/visualizing/dataStatistics',
name: 'RootVisualizingDataStatistics',
component: () => import('/@/layout/routerView/link.vue'),
meta: {
title: 'message.router.visualizingDataStatistics',
isLink: '/visualizingDataStatistics',
isHide: false,
isKeepAlive: false,
isAffix: false,
isIframe: false,
roles: ['admin'],
icon: 'iconfont icon-caozuo-wailian',
},
},
// {
// path: '/visualizing/index',
// name: 'RootVisualizingIndex',
// component: () => import('/@/layout/routerView/link.vue'),
// meta: {
// title: 'message.router.visualizingIndex',
// isLink: '/visualizingIndex',
// isHide: false,
// isKeepAlive: false,
// isAffix: false,
// isIframe: false,
// roles: ['admin'],
// icon: 'iconfont icon-caozuo-wailian',
// },
// },
// {
// path: '/visualizing/deviceManagement',
// name: 'RootVisualizingDeviceManagement',
// component: () => import('/@/layout/routerView/link.vue'),
// meta: {
// title: 'message.router.visualizingDeviceManagement',
// isLink: '/visualizingDeviceManagement',
// isHide: false,
// isKeepAlive: false,
// isAffix: false,
// isIframe: false,
// roles: ['admin'],
// icon: 'iconfont icon-caozuo-wailian',
// },
// },
// {
// path: '/visualizing/eventHandle',
// name: 'RootVisualizingEventHandle',
// component: () => import('/@/layout/routerView/link.vue'),
// meta: {
// title: 'message.router.visualizingEventHandle',
// isLink: '/visualizingEventHandle',
// isHide: false,
// isKeepAlive: false,
// isAffix: false,
// isIframe: false,
// roles: ['admin'],
// icon: 'iconfont icon-caozuo-wailian',
// },
// },
// {
// path: '/visualizing/eventList',
// name: 'RootVisualizingEventList',
// component: () => import('/@/layout/routerView/link.vue'),
// meta: {
// title: 'message.router.visualizingEventList',
// isLink: '/visualizingEventList',
// isHide: false,
// isKeepAlive: false,
// isAffix: false,
// isIframe: false,
// roles: ['admin'],
// icon: 'iconfont icon-caozuo-wailian',
// },
// },
// {
// path: '/visualizing/dataStatistics',
// name: 'RootVisualizingDataStatistics',
// component: () => import('/@/layout/routerView/link.vue'),
// meta: {
// title: 'message.router.visualizingDataStatistics',
// isLink: '/visualizingDataStatistics',
// isHide: false,
// isKeepAlive: false,
// isAffix: false,
// isIframe: false,
// roles: ['admin'],
// icon: 'iconfont icon-caozuo-wailian',
// },
// },
],
},
{
@ -1272,44 +1328,44 @@ export const staticRoutes: Array<RouteRecordRaw> = [
*
* `dynamicRoutes`
*/
{
path: '/visualizingIndex',
name: 'visualizingIndex',
component: () => import('/@/views/visualizing/index.vue'),
meta: {
title: 'message.router.visualizingIndex',
},
},
{
path: '/visualizingDeviceManagement',
name: 'visualizingDeviceManagement',
component: () => import('/@/views/visualizing/deviceManagement.vue'),
meta: {
title: 'message.router.visualizingDeviceManagement',
},
},
{
path: '/visualizingEventHandle',
name: 'visualizingEventHandle',
component: () => import('/@/views/visualizing/eventHandle.vue'),
meta: {
title: 'message.router.visualizingEventHandle'
}
},
{
path: '/visualizingEventList',
name: 'visualizingEventList',
component: () => import('/@/views/visualizing/eventList.vue'),
meta: {
title: 'message.router.visualizingEventList'
}
},
{
path: '/visualizingDataStatistics',
name: 'visualizingDataStatistics',
component: () => import('/@/views/visualizing/dataStatistics.vue'),
meta: {
title: 'message.router.visualizingDataStatistics'
}
},
// {
// path: '/visualizingIndex',
// name: 'visualizingIndex',
// component: () => import('/@/views/visualizing/index.vue'),
// meta: {
// title: 'message.router.visualizingIndex',
// },
// },
// {
// path: '/visualizingDeviceManagement',
// name: 'visualizingDeviceManagement',
// component: () => import('/@/views/visualizing/deviceManagement.vue'),
// meta: {
// title: 'message.router.visualizingDeviceManagement',
// },
// },
// {
// path: '/visualizingEventHandle',
// name: 'visualizingEventHandle',
// component: () => import('/@/views/visualizing/eventHandle.vue'),
// meta: {
// title: 'message.router.visualizingEventHandle'
// }
// },
// {
// path: '/visualizingEventList',
// name: 'visualizingEventList',
// component: () => import('/@/views/visualizing/eventList.vue'),
// meta: {
// title: 'message.router.visualizingEventList'
// }
// },
// {
// path: '/visualizingDataStatistics',
// name: 'visualizingDataStatistics',
// component: () => import('/@/views/visualizing/dataStatistics.vue'),
// meta: {
// title: 'message.router.visualizingDataStatistics'
// }
// },
];

View File

@ -5,7 +5,6 @@ import { Session } from '/@/utils/storage';
import { storeToRefs } from 'pinia';
import { useErrorInfo } from '/@/stores/errorInfo';
import { UserInfosState } from '/@/stores/interface';
import {BASE_API} from '/@/config.js'
// 配置新建一个 axios 实例

View File

@ -76,10 +76,10 @@
</div>
<div class="control-buttons">
<button>预警管理</button>
<button class="active" @click="router.push('/home')">数据统计</button>
<button @click="router.push('/eventList')">预警管理</button>
<button class="active" @click="router.push('/dataStatistics')">数据统计</button>
</div>
<EventPopUp :visible="false"/>
<EventPopUp :visible="true"/>
<LampPopUp :visible="false"/>
<ScreenPopUp :visible="false"/>
<BroadcastPopUp :visible="false"/>

View File

@ -19,7 +19,7 @@
<img :src="item.icon" alt="">
<div class="total">
<div class="label">{{ item.title.substring(0, 2) }}总数</div>
<div class="value">3900</div>
<div class="value">{{ item.total }}</div>
</div>
<div class="online-rate">
<div class="label">在线率</div>
@ -33,18 +33,17 @@
</div>
</div>
<div class="control-buttons">
<button >可视化</button>
<button class="active" @click="router.push('/home')">设备管理</button>
<button @click="router.push('/home')">可视化</button>
<button class="active" @click="router.push('/deviceManagement')">设备管理</button>
</div>
</div>
</template>
<script setup>
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import { defineAsyncComponent, ref, onMounted} from 'vue';
import { useRouter } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
import { CirclePlus, Remove } from '@element-plus/icons-vue'
import { getAllData } from '/@/api/linxyun/common'
const Map = defineAsyncComponent(() => import('/@/components/map/index.vue'));
const router = useRouter();
import IconLamp from '/@/assets/icon-lamp.png'
@ -52,14 +51,15 @@ import IconCamera from '/@/assets/icon-camera.png'
import IconScreen from '/@/assets/icon-screen.png'
import IconBroadcast from '/@/assets/icon-broadcast.png'
const data = ref([
{
id: 1,
title: '路灯管理',
icon: IconLamp,
total: 3900,
onlineRate: 80,
contactLossRate: 20
total: 0,
onlineRate: 0,
contactLossRate: 0
},
{
id: 2,
@ -112,32 +112,33 @@ const options = [
const markerData = ref({
"lamps": [
[118.853, 32.065],
[118.855, 32.062],
[118.851, 32.066]
lamps: [
],
"cameras": [
[118.854, 32.067],
[118.852, 32.063],
[118.856, 32.064]
cameras: [
],
"screens": [
[118.854, 32.061],
[118.850, 32.068],
[118.857, 32.062]
screens: [
]
}
)
onMounted(() => {
//
let width = window.innerWidth;
let height = window.innerHeight;
console.log('浏览器窗口宽度:', width);
console.log('浏览器窗口高度:', height);
const getLampData = async () => {
//
let records = await getAllData('queryRoadLampInfo')
if (!records) return;
let lampData = data.value[0]
console.log('lampData', lampData)
lampData.total = parseInt(records.length)
lampData.onlineRate = records.filter(item => parseInt(item.OnLineStatus) === 1).length / lampData.total * 100// 线
lampData.contactLossRate = 100 - lampData.onlineRate
markerData.value.lamps = records.map(item => {
return [parseFloat(item.Lng), parseFloat(item.Lat)]
})
}
onMounted(async () => {
//
await getLampData()
NextLoading.done();
})
@ -207,23 +208,28 @@ onMounted(() => {
height: 50px;
background: linear-gradient(90deg, rgba(0, 131, 255, 0.5) 0%, rgba(9, 64, 125, 0.1) 100%);
}
.content {
background: linear-gradient(90deg, rgba(24, 42, 85, 0.7) 0%, rgba(24, 42, 85, 0.6) 48%, rgba(54, 69, 103, 0.1) 100%);
display: flex;
align-items: center;
height: 135px;
img {
width: 82px;
height: 77px;
}
.label {
font-size: 16px;
height: 16px;
color: #fff;
font-family: SourceHanSansCN-Medium;
}
.total {
margin-left: 24px;
.value {
height: 18px;
margin-top: 10px;
@ -234,8 +240,10 @@ onMounted(() => {
font-family: DOUYU;
}
}
.online-rate {
margin-left: 60px;
.value {
height: 18px;
margin-top: 10px;
@ -246,8 +254,10 @@ onMounted(() => {
font-family: DOUYU;
}
}
.contact-loss-rate {
margin-left: 48px;
.value {
height: 18px;
margin-top: 10px;

View File

@ -38,8 +38,8 @@
:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
<div class="control-buttons">
<button class="active">预警管理</button>
<button @click="router.push('/home')">数据统计</button>
<button class="active" @click="router.push('/eventList')">预警管理</button>
<button @click="router.push('/dataStatistics')">数据统计</button>
</div>
</div>
</template>
@ -107,6 +107,26 @@ const tableData = [
}
]
const handleSizeChange = (val) => {
// pageSize.value = val
currentPage.value = 1
getEventInfoList()
}
const handleCurrentChange = (val) => {
// currentPage.value = val
getEventInfoList()
}
const getEventInfoList = async () => {
let params = {
current: currentPage.value,
limit: pageSize.value
}
let resp = await http.Get('queryEventInfo', params)
console.log('getEventInfoList', resp)
eventInfoList.value = resp.Records
}
const options = [
{

View File

@ -129,8 +129,8 @@
</div>
</div>
<div class="control-buttons">
<button class="active">可视化</button>
<button @click="router.push('/home')">设备管理</button>
<button class="active" @click="router.push('/home')">可视化</button>
<button @click="router.push('/deviceManagement')">设备管理</button>
</div>
</div>
</template>
@ -140,9 +140,9 @@ import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmoun
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';
import { NextLoading } from '/@/utils/loading';
import { CirclePlus, Remove } from '@element-plus/icons-vue'
import { CirclePlus, Remove } from '@element-plus/icons-vue';
import { httpRequestApi } from '/@/api/linxyun/base/index';
// import Map from '/@/components/map/index.vue';
import {getAllData} from '/@/api/linxyun/common';
const Map = defineAsyncComponent(() => import('/@/components/map/index.vue'));
const Total = defineAsyncComponent(() => import('/@/components/total/index.vue'));
@ -156,6 +156,8 @@ const lampData = ref({
records: []
})
const eventInfoList = ref({})
const screenData = ref({
current: 1,
content: '驾校培训广告.mp4',
@ -350,30 +352,35 @@ const initLightingRateChart = () => {
echarts.init(lightingRateRef.value).setOption(option);
}
const getEventInfoList = async () => {
let params = {
current: 1,
limit: 5
}
let resp = await http.Get('queryEventInfo', params)
console.log('getEventInfoList', resp)
eventInfoList.value = resp.Records
}
const getLampData = async () => {
//
let data = await http.Get('queryRoadLampInfo')
console.log('data ', data)
const { Records, TotalSize } = data
lampData.value.total = parseInt(TotalSize)
lampData.value.online = Records.filter(item => parseInt(item.OnLineStatus) === 1).length // 线
lampData.value.lighting = Records.filter(item => parseInt(item.Light) > 0).length // 0
lampData.value.records = Records
markerData.value.lamps = Records.map(item => {
let records = await getAllData('queryRoadLampInfo')
if (!records) return;
lampData.value.total = parseInt(records.length)
lampData.value.online = records.filter(item => parseInt(item.OnLineStatus) === 1).length // 线
lampData.value.lighting = records.filter(item => parseInt(item.Light) > 0).length // 0
lampData.value.records = records
markerData.value.lamps = records.map(item => {
return [parseFloat(item.Lng), parseFloat(item.Lat)]
})
}
onMounted(async () => {
//
let width = window.innerWidth;
let height = window.innerHeight;
console.log('浏览器窗口宽度:', width);
console.log('浏览器窗口高度:', height);
getEventInfoList();
await getLampData();
initOnlineRateChart();
initLightingRateChart();
NextLoading.done();
})