generated from cyj/evo_tech
提交
This commit is contained in:
cjb
parent
3f361a666c
commit
48210de451
1
.github/FUNDING.yml
vendored
1
.github/FUNDING.yml
vendored
@ -1 +0,0 @@
|
||||
custom: http://doc.ruoyi.vip/bms-vue/other/donate.html
|
||||
Binary file not shown.
@ -7,6 +7,7 @@
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
|
||||
<title>伊特BMS管理系统</title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
@ -210,6 +211,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<!-- <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ZJABZ-FWV6G-F7ZQ2-QKQKL-KQ3I5-DNBT7"></script> -->
|
||||
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=ZJABZ-FWV6G-F7ZQ2-QKQKL-KQ3I5-DNBT7"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
"name": "ruoyi",
|
||||
"version": "3.9.0",
|
||||
"description": "伊特BMS管理系统",
|
||||
"author": "若依",
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@ -30,6 +30,7 @@
|
||||
"jsencrypt": "3.3.2",
|
||||
"nprogress": "0.2.0",
|
||||
"pinia": "3.0.2",
|
||||
"sortablejs": "^1.15.6",
|
||||
"splitpanes": "4.0.4",
|
||||
"vue": "3.5.16",
|
||||
"vue-cropper": "1.1.1",
|
||||
|
||||
4715
pnpm-lock.yaml
Normal file
4715
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.2 KiB |
@ -42,3 +42,35 @@ export function delDevices(id) {
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
//设备实时数据
|
||||
export function getreadata(deviceId) {
|
||||
return request({
|
||||
url: `/devices/devices/realtime/${deviceId}`,
|
||||
method: 'get'
|
||||
// params:{
|
||||
// deviceId
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
//运行历史
|
||||
// export function getreadata(deviceId) {
|
||||
// return request({
|
||||
// url: `/devices/devices/realtime/${deviceId}`,
|
||||
// method: 'get'
|
||||
// // params:{
|
||||
// // deviceId
|
||||
// // }
|
||||
// })
|
||||
// }
|
||||
|
||||
//运行历史
|
||||
export function gethistory(deviceId) {
|
||||
return request({
|
||||
url: `/devices/devices/history/${deviceId}`,
|
||||
method: 'get'
|
||||
// params:{
|
||||
// deviceId
|
||||
// }
|
||||
})
|
||||
}
|
||||
|
||||
50
src/api/home.js
Normal file
50
src/api/home.js
Normal file
@ -0,0 +1,50 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
//统计数据
|
||||
export function gettotal() {
|
||||
return request({
|
||||
url: '/api/dashboard/home',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//车辆位置轨迹
|
||||
export function getloca(deviceId,start,end) {
|
||||
return request({
|
||||
url: `/vehicle-location/${deviceId}`,
|
||||
method: 'get',
|
||||
params:{
|
||||
start,
|
||||
end
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//设备数据
|
||||
export function equdata() {
|
||||
return request({
|
||||
url: '/monitor/dashboard/overview',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//设备分布
|
||||
export function equfenbu() {
|
||||
return request({
|
||||
url: '/monitor/device/latest-locations',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
//查询设备轨迹
|
||||
export function equguiji(deviceId,start,end) {
|
||||
return request({
|
||||
url: `monitor/device/${deviceId}/track`,
|
||||
method: 'get',
|
||||
params:{
|
||||
deviceId,
|
||||
start,
|
||||
end
|
||||
}
|
||||
})
|
||||
}
|
||||
BIN
src/assets/images/dcdl.png
Normal file
BIN
src/assets/images/dcdl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/dcdy.png
Normal file
BIN
src/assets/images/dcdy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/images/dcsoc.png
Normal file
BIN
src/assets/images/dcsoc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/ewcode.png
Normal file
BIN
src/assets/images/ewcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/guz.png
Normal file
BIN
src/assets/images/guz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
src/assets/images/loginbg.jpg
Normal file
BIN
src/assets/images/loginbg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 KiB |
BIN
src/assets/images/loginbg1.png
Normal file
BIN
src/assets/images/loginbg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
BIN
src/assets/images/profile.png
Normal file
BIN
src/assets/images/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/images/sheb.png
Normal file
BIN
src/assets/images/sheb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/images/xms.png
Normal file
BIN
src/assets/images/xms.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
src/assets/images/zaix.png
Normal file
BIN
src/assets/images/zaix.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.1 KiB |
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<section class="app-main">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<!-- <transition-group name="fade-transform" mode="out-in">
|
||||
|
||||
</transition-group> -->
|
||||
<keep-alive :include="tagsViewStore.cachedViews">
|
||||
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
<iframe-toggle />
|
||||
<copyright />
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="appStore.device !== 'mobile'">
|
||||
<!-- <template v-if="appStore.device !== 'mobile'">
|
||||
<header-search id="header-search" class="right-menu-item" />
|
||||
|
||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
||||
@ -28,7 +28,7 @@
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</template> -->
|
||||
|
||||
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
|
||||
<div class="avatar-wrapper">
|
||||
@ -37,12 +37,12 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<router-link to="/user/profile">
|
||||
<!-- <router-link to="/user/profile">
|
||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||||
</router-link>
|
||||
<el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
|
||||
<span>布局设置</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-item> -->
|
||||
<el-dropdown-item divided command="logout">
|
||||
<span>退出登录</span>
|
||||
</el-dropdown-item>
|
||||
@ -191,22 +191,22 @@ function toggleTheme() {
|
||||
padding-right: 0px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 10px;
|
||||
right: 8px;
|
||||
margin-top: 12px;
|
||||
right: 20px;
|
||||
position: relative;
|
||||
|
||||
.user-avatar {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
//border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-nickname{
|
||||
position: relative;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -70,10 +70,10 @@ const getLogoTextColor = computed(() => {
|
||||
width: 100%;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 28px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
@ -82,7 +82,7 @@ const getLogoTextColor = computed(() => {
|
||||
color: v-bind(getLogoTextColor);
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ import { ElMessageBox, } from 'element-plus'
|
||||
import { login, logout, getInfo } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
import { isHttp, isEmpty } from "@/utils/validate"
|
||||
import defAva from '@/assets/images/profile.jpg'
|
||||
import defAva from '@/assets/images/profile.png'
|
||||
|
||||
const useUserStore = defineStore(
|
||||
'user',
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,34 +1,775 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||
<h2>伊特BMS后台管理框架</h2>
|
||||
<el-row :gutter="20" style="margin-bottom: 25px;">
|
||||
<el-col :span="6">
|
||||
<div style="display: flex;width: 100%;height:80px;align-items: center;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="display: flex;width: 80px;height: 80px;background: #0152a5;align-items: center;justify-content: center;border-radius: 12px 0 0 12px;color: #0152a5;">
|
||||
<img src="../assets/images/xms.png" width="50" height="50" />
|
||||
</div>
|
||||
<div style="flex: 1;text-align: center;">
|
||||
<div style="font-size: 40px;color: #0152a5;">{{xmtotal}}</div>
|
||||
<div style="font-size: 16px;">项目数</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div style="display: flex;width: 100%;height:80px;align-items: center;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="display: flex;width: 80px;height: 80px;background: #28b3a1;align-items: center;justify-content: center;border-radius: 12px 0 0 12px;color: #0152a5;">
|
||||
<img src="../assets/images/sheb.png" width="50" height="50" />
|
||||
</div>
|
||||
<div style="flex: 1;text-align: center;">
|
||||
<div style="font-size: 40px;color: #28b3a1;">{{sbtotal}}</div>
|
||||
<div style="font-size: 16px;">设备数</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div style="display: flex;width: 100%;height:80px;align-items: center;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="display: flex;width: 80px;height: 80px;background: #67c23a;align-items: center;justify-content: center;border-radius: 12px 0 0 12px;color: #0152a5;">
|
||||
<img src="../assets/images/zaix.png" width="50" height="50" />
|
||||
</div>
|
||||
<div style="flex: 1;text-align: center;">
|
||||
<div style="font-size: 40px;color: #67c23a;">{{onlinnum}}</div>
|
||||
<div style="font-size: 16px;">在线数</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div style="display: flex;width: 100%;height:80px;align-items: center;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
|
||||
<div style="display: flex;width: 80px;height: 80px;background: #e6a23c;align-items: center;justify-content: center;border-radius: 12px 0 0 12px;color: #0152a5;">
|
||||
<img src="../assets/images/guz.png" width="50" height="50" />
|
||||
</div>
|
||||
<div style="flex: 1;text-align: center;">
|
||||
<div style="font-size: 40px;color: #e6a23c;">{{gznum}}</div>
|
||||
<div style="font-size: 16px;">故障数</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="20">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
||||
<el-card class="update-log">
|
||||
|
||||
</el-card>
|
||||
<el-col :span="12">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div ref="socChart" style="height: 260px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="8">
|
||||
<el-card class="update-log">
|
||||
|
||||
</el-card>
|
||||
<el-col :span="12">
|
||||
<div ref="gzdjChart" style="height: 260px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div ref="cfdChart" style="height: 260px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div id="shebmap" style="height: 600px;margin: 25px 0;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;">
|
||||
<el-descriptions
|
||||
size="large"
|
||||
title=""
|
||||
border
|
||||
:column="1"
|
||||
label-width="200"
|
||||
|
||||
>
|
||||
<el-descriptions-item align="center" label="累计运行时间(h)">1233</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="累计充电时间(h)">545456</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="累计放电时间(h)">566452</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="累计充电能量(kWh)">71233</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="累计放电能量(KWh)">566452</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="累计放电电容量(Ah)">8233</el-descriptions-item>
|
||||
<el-descriptions-item align="center" label="累计充电容量(Ah)">8233</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div ref="yxscChart" style="height: 355px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-drawer
|
||||
v-model="dcdrawer"
|
||||
size="50%"
|
||||
title=""
|
||||
:with-header="false">
|
||||
<el-divider content-position="left" style="margin-bottom: 30px;">
|
||||
<div style="font-size: 18px;color: #278ed9;">电池信息</div>
|
||||
</el-divider>
|
||||
<el-descriptions title="" border>
|
||||
<el-descriptions-item label="设备名称">{{sbinfor.deviceName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备ID">{{sbinfor.deviceId}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备SN">{{sbinfor.deviceSn}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备类型">{{sbinfor.deviceType}}</el-descriptions-item>
|
||||
<el-descriptions-item label="固件版本">{{sbinfor.firmwareVersion}}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备状态">{{sbinfor.status}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-divider content-position="left" style="margin-bottom: 30px;">
|
||||
<div style="font-size: 18px;color: #278ed9;">电池轨迹</div>
|
||||
</el-divider>
|
||||
<div v-if="dcdrawer" id="wzmap" style="height: 600px;margin: 25px 0;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup name="Index">
|
||||
const version = ref('3.9.0')
|
||||
|
||||
function goTarget(url) {
|
||||
window.open(url, '__blank')
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
import {
|
||||
gettotal,
|
||||
getloca,
|
||||
equdata,
|
||||
equfenbu,
|
||||
equguiji
|
||||
} from '@/api/home'
|
||||
|
||||
let xmtotal = ref(0)
|
||||
let sbtotal = ref(0)
|
||||
let onlinnum = ref(0)
|
||||
let gznum = ref(0)
|
||||
|
||||
let sbdata = []
|
||||
|
||||
let markerlist = []
|
||||
|
||||
nextTick(() => {
|
||||
equdata().then(rps => {
|
||||
|
||||
xmtotal.value = rps.data.summary.projectCount
|
||||
sbtotal.value = rps.data.summary.deviceCount
|
||||
onlinnum.value = rps.data.summary.onlineCount
|
||||
gznum.value = rps.data.summary.faultCount
|
||||
|
||||
sbdata = rps.data.socDistribution
|
||||
|
||||
if(rps.data.trend && rps.data.trend.length > 0){
|
||||
daycfd.value = rps.data.trend.map(n => {
|
||||
return n.date
|
||||
})
|
||||
chond.value = rps.data.trend.map(n => {
|
||||
return n.date.chargeDuration
|
||||
})
|
||||
fangd.value = rps.data.trend.map(n => {
|
||||
return n.date.dischargeDuration
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
sbinit()
|
||||
gzdjinit()
|
||||
ricfdinit()
|
||||
yxscinit()
|
||||
})
|
||||
|
||||
|
||||
//positionmap()
|
||||
equfenbu().then(rps => {
|
||||
|
||||
|
||||
|
||||
if(rps.data && rps.data.length > 0){
|
||||
rps.data.forEach(n => {
|
||||
markerlist.push({
|
||||
id:n.device.deviceId,
|
||||
styleId: 'marker',
|
||||
position: new TMap.LatLng(n.location?n.location.latitude:'',n.location?n.location.longitude:'') //(39.954104, 116.357503),
|
||||
})
|
||||
// {
|
||||
// id: 1,
|
||||
// styleId: 'marker',
|
||||
// position: new TMap.LatLng(39.954104, 116.357503),
|
||||
// // properties: {
|
||||
// // title: 'marker1'
|
||||
// // },
|
||||
// src:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
|
||||
// }
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
addmarker()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
function getDaysAgoTimestamp(days) {
|
||||
return Date.now() - days * 24 * 60 * 60 * 1000;
|
||||
}
|
||||
|
||||
gettotal()
|
||||
|
||||
//getloca('137PBP1M11001AFCF0000006',getDaysAgoTimestamp(7),Date.now())
|
||||
|
||||
|
||||
//设备SOC
|
||||
const socChart = ref()
|
||||
let sbChart
|
||||
function sbinit() {
|
||||
|
||||
if (socChart.value) {
|
||||
//初始化echarts实例
|
||||
sbChart = echarts.init(socChart.value);
|
||||
// 指定图表的配置项和数据
|
||||
const option = {
|
||||
title: {
|
||||
text: '设备SOC',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#2363a5',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// top:'20%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}({c})'//'{b}({d}%)' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
// legend: {
|
||||
// type: "scroll",
|
||||
// orient: "horizontal",
|
||||
// left: "center",
|
||||
// bottom: 0,
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "pie",
|
||||
top:'10%',
|
||||
radius: ['40%','70%'],
|
||||
data: sbdata,
|
||||
padAngle: 2,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
paddingTop:'20px',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
},
|
||||
},
|
||||
itemStyle:{
|
||||
borderRadius: 3
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
sbChart.setOption(option);
|
||||
}
|
||||
}
|
||||
|
||||
//故障等级
|
||||
const gzdjChart = ref()
|
||||
let gzdjChar
|
||||
let gzdjdata = [
|
||||
{
|
||||
name:'正常',
|
||||
value:80
|
||||
},
|
||||
{
|
||||
name:'一级故障',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
name:'二级故障',
|
||||
value:10
|
||||
},
|
||||
{
|
||||
name:'三级故障',
|
||||
value:15
|
||||
}
|
||||
]
|
||||
|
||||
function gzdjinit() {
|
||||
if (gzdjChart.value) {
|
||||
//初始化echarts实例
|
||||
gzdjChar = echarts.init(gzdjChart.value);
|
||||
// 指定图表的配置项和数据
|
||||
const option = {
|
||||
title: {
|
||||
text: '故障等级',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#cd7509',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// top:'20%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
formatter: '{b}({c})' // 使用 formatter 来格式化标签，其中 {b} 是名称，{d} 是百分比，{@2019} 是对应年份的数据值（如果需要的话）
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
// legend: {
|
||||
// type: "scroll",
|
||||
// orient: "horizontal",
|
||||
// left: "center",
|
||||
// bottom: 0,
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: "数量",
|
||||
type: "pie",
|
||||
top:'10%',
|
||||
radius: ['40%','70%'],
|
||||
data: gzdjdata,
|
||||
padAngle: 2,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
paddingTop:'20px',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)"
|
||||
},
|
||||
},
|
||||
itemStyle:{
|
||||
borderRadius: 3
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
gzdjChar.setOption(option);
|
||||
}
|
||||
}
|
||||
//const version = ref('3.9.0')
|
||||
|
||||
// function goTarget(url) {
|
||||
// window.open(url, '__blank')
|
||||
// }
|
||||
|
||||
|
||||
//日充放电
|
||||
const cfdChart = ref();
|
||||
let chongfChart
|
||||
|
||||
let daycfd = ref([])
|
||||
let chond = ref([])
|
||||
let fangd = ref([])
|
||||
function ricfdinit() {
|
||||
if (cfdChart.value) {
|
||||
//初始化echarts实例
|
||||
chongfChart = echarts.init(cfdChart.value);
|
||||
// 指定图表的配置项和数据
|
||||
const option = {
|
||||
title: {
|
||||
text: "日充放时长",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: '#2363a5',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
top:'25%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// dataView: { title: "数据视图", show: true, readOnly: false },
|
||||
// magicType: {
|
||||
// title: { line: "折线图", bar: "柱状图" },
|
||||
// show: true,
|
||||
// type: ["line", "bar"],
|
||||
// },
|
||||
// restore: { title: "刷新", show: true },
|
||||
// saveAsImage: { title: "下载", show: true },
|
||||
// },
|
||||
// },
|
||||
legend: {
|
||||
data: [ "充电", "放电"],
|
||||
top:25
|
||||
//bottom: 0,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: daycfd.value, //["2025-01-12", "2025-01-13", "2025-01-14", "2025-01-15", "2025-01-16", "2025-01-17", "2025-01-18"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}h",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "充电",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
barWidth:'20px',
|
||||
data:chond.value, //[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
itemStyle: {
|
||||
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
||||
normal: {
|
||||
//柱形图圆角，初始化效果
|
||||
// 第一个值表示顶部的左上角，第二个值表示顶部右上角
|
||||
// 第三个值表示底部左下角，第四个值表示底部右下角
|
||||
barBorderRadius:[20,20,0,0]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "放电",
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value
|
||||
},
|
||||
},
|
||||
data:fangd.value, //[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
barWidth:'20px',
|
||||
itemStyle: {
|
||||
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
||||
normal: {
|
||||
width:'10px',
|
||||
//柱形图圆角，初始化效果
|
||||
// 第一个值表示顶部的左上角，第二个值表示顶部右上角
|
||||
// 第三个值表示底部左下角，第四个值表示底部右下角
|
||||
barBorderRadius:[20,20,0,0]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
chongfChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//电池信息弹框
|
||||
let dcdrawer = ref(false)
|
||||
let sbinfor =ref({})
|
||||
//添加电池标记
|
||||
function addmarker() {
|
||||
//初始化地图
|
||||
let map = new TMap.Map('shebmap', {
|
||||
//center: new TMap.LatLng(39.984104, 116.307503),//设置中心点坐标
|
||||
zoom:8
|
||||
})
|
||||
|
||||
//初始化marker
|
||||
let marker = new TMap.MultiMarker({
|
||||
id: 'marker-layer',
|
||||
map: map,
|
||||
styles: {
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
//src:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
|
||||
})
|
||||
},
|
||||
geometries:markerlist
|
||||
})
|
||||
|
||||
marker.on('click', (v) => {
|
||||
dcdrawer.value = true
|
||||
nextTick(() => {
|
||||
//getDaysAgoTimestamp(7),Date.now()
|
||||
equguiji(v.geometry.id,1768040591000,1769027619000).then(rps => {
|
||||
sbinfor.value = rps.data
|
||||
if(sbinfor.value.trackList && sbinfor.value.trackList.length > 0){
|
||||
sbinfor.value.trackList.forEach(n => {
|
||||
pathlist.value.push(new TMap.LatLng(n.latitude, n.longitude))
|
||||
})
|
||||
}
|
||||
|
||||
positionmap()
|
||||
})
|
||||
})
|
||||
|
||||
console.log(v)
|
||||
})
|
||||
|
||||
//初始化
|
||||
let bounds = new TMap.LatLngBounds()
|
||||
|
||||
//设置自适应显示marker
|
||||
//判断标注点是否在范围内
|
||||
markerlist.forEach(function(item){
|
||||
//若坐标点不在范围内，扩大bounds范围
|
||||
if(bounds.isEmpty() || !bounds.contains(item.position)){
|
||||
bounds.extend(item.position)
|
||||
}
|
||||
})
|
||||
//设置地图可视范围
|
||||
map.fitBounds(bounds, {
|
||||
padding: 100 // 自适应边距
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
//位置信息
|
||||
let pathlist = ref([])
|
||||
function positionmap() {
|
||||
|
||||
//let center = new TMap.LatLng(39.984104, 116.307503);
|
||||
// 初始化地图
|
||||
let map = new TMap.Map( document.getElementById('wzmap'), {
|
||||
zoom: 10,
|
||||
//center: center,
|
||||
});
|
||||
|
||||
|
||||
let polylineLayer = new TMap.MultiPolyline({
|
||||
map, // 绘制到目标地图
|
||||
// 折线样式定义
|
||||
styles: {
|
||||
style_blue: new TMap.PolylineStyle({
|
||||
color: '#3777FF', // 线填充色
|
||||
width: 4, // 折线宽度
|
||||
borderWidth: 2, // 边线宽度
|
||||
borderColor: '#FFF', // 边线颜色
|
||||
lineCap: 'round', // 线端头方式
|
||||
eraseColor: 'rgba(190,188,188,1)',
|
||||
}),
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: 'erasePath',
|
||||
styleId: 'style_blue',
|
||||
paths: pathlist.value,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
let marker = new TMap.MultiMarker({
|
||||
map,
|
||||
styles: {
|
||||
'car-down': new TMap.MarkerStyle({
|
||||
width: 40,
|
||||
height: 40,
|
||||
anchor: {
|
||||
x: 20,
|
||||
y: 20,
|
||||
},
|
||||
faceTo: 'map',
|
||||
rotate: 180,
|
||||
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
|
||||
}),
|
||||
start: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
|
||||
}),
|
||||
end: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
|
||||
}),
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
id: 'car',
|
||||
styleId: 'car-down',
|
||||
position: pathlist.value[0],
|
||||
},
|
||||
{
|
||||
id: 'start',
|
||||
styleId: 'start',
|
||||
position: pathlist.value[0],
|
||||
},
|
||||
{
|
||||
id: 'end',
|
||||
styleId: 'end',
|
||||
position: pathlist.value[pathlist.value.length -1],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
//初始化
|
||||
let bounds = new TMap.LatLngBounds()
|
||||
|
||||
//设置自适应显示marker
|
||||
//判断标注点是否在范围内
|
||||
markerlist.forEach(function(item){
|
||||
//若坐标点不在范围内，扩大bounds范围
|
||||
if(bounds.isEmpty() || !bounds.contains(item.position)){
|
||||
bounds.extend(item.position)
|
||||
}
|
||||
})
|
||||
//设置地图可视范围
|
||||
map.fitBounds(bounds, {
|
||||
padding: 100 // 自适应边距
|
||||
})
|
||||
|
||||
// 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
|
||||
marker.moveAlong(
|
||||
{
|
||||
car: {
|
||||
path:pathlist.value,
|
||||
speed: 1000,
|
||||
},
|
||||
},
|
||||
{
|
||||
autoRotation: true,
|
||||
}
|
||||
)
|
||||
marker.on('moving', (e) => {
|
||||
var passedLatLngs = e.car && e.car.passedLatLngs;
|
||||
if (passedLatLngs) {
|
||||
// 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
|
||||
polylineLayer.eraseTo(
|
||||
'erasePath',
|
||||
passedLatLngs.length - 1,
|
||||
passedLatLngs[passedLatLngs.length - 1]
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
//运行时长
|
||||
const yxscChart = ref()
|
||||
let yunxChart
|
||||
|
||||
function yxscinit() {
|
||||
if (yxscChart.value) {
|
||||
//初始化echarts实例
|
||||
yunxChart = echarts.init(yxscChart.value);
|
||||
// 指定图表的配置项和数据
|
||||
const option = {
|
||||
title: {
|
||||
text: "运行时长",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: '#2363a5',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
top:'15%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
},
|
||||
// toolbox: {
|
||||
// feature: {
|
||||
// dataView: { title: "数据视图", show: true, readOnly: false },
|
||||
// magicType: {
|
||||
// title: { line: "折线图", bar: "柱状图" },
|
||||
// show: true,
|
||||
// type: ["line", "bar"],
|
||||
// },
|
||||
// restore: { title: "刷新", show: true },
|
||||
// saveAsImage: { title: "下载", show: true },
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// data: [ "充电", "放电"],
|
||||
// top:25
|
||||
// //bottom: 0,
|
||||
// },
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data:["10h", "50h", "100h", "150h", "200h", "250h", "300h"],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "",
|
||||
// min: 0,
|
||||
// max: 50,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}台",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
barWidth:'20px',
|
||||
data:[80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
itemStyle: {
|
||||
//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
||||
normal: {
|
||||
//柱形图圆角，初始化效果
|
||||
// 第一个值表示顶部的左上角，第二个值表示顶部右上角
|
||||
// 第三个值表示底部左下角，第四个值表示底部右下角
|
||||
barBorderRadius:[20,20,0,0]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
],
|
||||
};
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
yunxChart.setOption(option);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="logocont">
|
||||
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<el-form-item prop="username">
|
||||
@ -9,6 +10,7 @@
|
||||
size="large"
|
||||
auto-complete="off"
|
||||
placeholder="账号"
|
||||
style="background: none;"
|
||||
>
|
||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
@ -49,18 +51,20 @@
|
||||
style="width:100%;"
|
||||
@click.prevent="handleLogin"
|
||||
>
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-if="!loading" style="font-size: 18px;color: #fff;">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
</el-button>
|
||||
<div style="float: right;" v-if="register">
|
||||
<!-- <div style="float: right;" v-if="register">
|
||||
<router-link class="link-type" :to="'/register'">立即注册</router-link>
|
||||
</div>
|
||||
</div> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
|
||||
</div>
|
||||
|
||||
<!-- 底部 -->
|
||||
<!-- <div class="el-login-footer">
|
||||
<span>河北伊特</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -163,25 +167,38 @@ getCode()
|
||||
getCookie()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .logocont :deep(.el-input__wrapper){
|
||||
background-color:rgba(60, 86, 127, 0.5) !important;
|
||||
}
|
||||
.logocont :deep(.el-input__inner){
|
||||
color: #fff;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
background-image: url("../assets/images/login-background.jpg");
|
||||
|
||||
|
||||
background-image: url("../assets/images/loginbg.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
margin: 0px auto 30px auto;
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
color: #00529b;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
border-radius: 6px;
|
||||
background: #ffffff;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
//background:rgba(60, 86, 127, 0.5);
|
||||
width: 500px;
|
||||
padding: 25px 25px 5px 25px;
|
||||
z-index: 1;
|
||||
.el-input {
|
||||
@ -226,4 +243,6 @@ getCookie()
|
||||
height: 40px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-register-footer">
|
||||
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
|
||||
<span>河北伊特</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,7 +2,7 @@ import { defineConfig, loadEnv } from 'vite'
|
||||
import path from 'path'
|
||||
import createVitePlugins from './vite/plugins'
|
||||
|
||||
const baseUrl = 'http://localhost:8080' // 后端接口
|
||||
const baseUrl = 'http://192.168.5.200:8011' // 后端接口
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode, command }) => {
|
||||
@ -43,7 +43,7 @@ export default defineConfig(({ mode, command }) => {
|
||||
// vite 相关配置
|
||||
server: {
|
||||
port: 80,
|
||||
host: true,
|
||||
host: '192.168.5.209',//true,
|
||||
open: true,
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
|
||||
Loading…
Reference in New Issue
Block a user