Compare commits
46 Commits
428d5c90c8
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 30079ec854 | |||
| aa7229e21b | |||
| 84af6f5cfe | |||
| c7a05f2118 | |||
| 7445e789a4 | |||
| fabab0a577 | |||
| 8b53fbe0ca | |||
| 65af3b6956 | |||
| 47d8f14ad4 | |||
| 1c664cc2f6 | |||
| b89bc455f6 | |||
| ee4eec1e2e | |||
| b6c64df004 | |||
| 93166e0f71 | |||
| dc28fb65ba | |||
| 03df0388b4 | |||
| 6d6d395bff | |||
| 75a7da4a19 | |||
| 8e552df724 | |||
| 72699abdec | |||
| 2dca6e3ff8 | |||
| 63804635de | |||
| eb598255f3 | |||
| 492d43c709 | |||
| 8f28eb920f | |||
| 4a4902ab72 | |||
| 462656880c | |||
| 80d1570e68 | |||
| fc3a8e58d9 | |||
| 9906c2653b | |||
| 52d18cf408 | |||
| 7081f28ee0 | |||
| cb9ea99008 | |||
| 4aac36cd4c | |||
| e7e58d28cc | |||
| af45e3fda3 | |||
| e0b9daa40e | |||
| 08c0d8ebd3 | |||
| 7eb64f2d70 | |||
| 13f72a49ae | |||
| 28aa794e3f | |||
| 6454933d59 | |||
| 848f471ef1 | |||
| a3be91c6ac | |||
| 25aa857758 | |||
| 52d90d490b |
@ -5,11 +5,11 @@ VITE_APP_TITLE = 云平台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
|
||||
# VITE_APP_BASE_API = 'https://www.cnxhyc.com/xh'
|
||||
|
||||
#VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
|
||||
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
|
||||
#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
#代永飞接口
|
||||
#VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||
|
||||
|
||||
# 应用访问路径 例如使用前缀 /admin/
|
||||
|
||||
@ -1,174 +0,0 @@
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: radial-gradient( 0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%), #267AD0;
|
||||
}
|
||||
|
||||
/* 全屏地图 - 背景图层 */
|
||||
.fullscreen-map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 顶部栏 */
|
||||
.top-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background-color: rgba(74, 85, 104, 0.9);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.top-bar h1 {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-info span {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 悬浮模块容器 */
|
||||
.floating-modules {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px); /* 减去顶部栏高度 */
|
||||
z-index: 5;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bottom-middle-module {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.module-card {
|
||||
background-color: rgba(107, 114, 128, 0.9);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.module-card:hover {
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.module-header {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #3b82f6, #60a5fa);
|
||||
}
|
||||
|
||||
.module-header::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.module-content {
|
||||
padding: 14px;
|
||||
color: #e5e7eb;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 36px);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.overview-card .module-header::before { background-color: #3b82f6; }
|
||||
.alarm-card .module-header::before { background-color: #ef4444; }
|
||||
.realtime-card .module-header::before { background-color: #f97316; }
|
||||
.module-card:nth-child(2) .module-header::before { background-color: #8b5cf6; }
|
||||
.module-card:nth-child(3) .module-header::before { background-color: #06b6d4; }
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.left-modules,
|
||||
.right-modules {
|
||||
width: 100%;
|
||||
}
|
||||
.bottom-middle-module {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -26,6 +26,14 @@ function SosSetting (data: any) {
|
||||
data: data
|
||||
});
|
||||
};
|
||||
//批量强制报警
|
||||
function SosSettingBatch(data:any){
|
||||
return request({
|
||||
url: `/api/xinghan/device/SOSGradeSettingsBatch`,
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
//静电探测档位控制
|
||||
function staticPowerSetting (data: any) {
|
||||
@ -62,5 +70,6 @@ export default {
|
||||
SosSetting:SosSetting,
|
||||
staticPowerSetting:staticPowerSetting,
|
||||
deviceRealTimeStatus:deviceRealTimeStatus,
|
||||
SendMessage:SendMessage
|
||||
SendMessage:SendMessage,
|
||||
SosSettingBatch:SosSettingBatch
|
||||
};
|
||||
114
src/api/controlCenter/controlPanel/eqControl.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import xhyc from '@/api/controlCenter/controlPanel/670'
|
||||
import fys from '@/api/controlCenter/controlPanel/index'
|
||||
|
||||
|
||||
var dic = [{
|
||||
typeNames: ['670'],//星汉的配置
|
||||
sendMsg: {
|
||||
cfg: ['sendMsg', 'deviceIds', 'deviceImeiList', 'instructValue', 'batchId'],
|
||||
method: xhyc.SendMessage
|
||||
},
|
||||
SOS: {
|
||||
|
||||
cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "instructValue"],
|
||||
method: xhyc.SosSettingBatch
|
||||
},
|
||||
sendImg: {
|
||||
cfg: [],
|
||||
method: null
|
||||
}
|
||||
},
|
||||
{
|
||||
typeNames: ['6170', '210'],//富源晟的配置
|
||||
sendMsg: {
|
||||
cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "sendMsg"],
|
||||
method: fys.deviceSendMessage
|
||||
},
|
||||
SOS: {
|
||||
cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "instructValue"],
|
||||
method: fys.sendAlarmMessage
|
||||
},
|
||||
sendImg: {
|
||||
cfg: [],
|
||||
method: null
|
||||
}
|
||||
},
|
||||
{
|
||||
typeNames: null,//如果找不到,以富源晟的配置为准
|
||||
sendMsg: {
|
||||
cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "sendMsg"],
|
||||
method: fys.deviceSendMessage
|
||||
},
|
||||
SOS: {
|
||||
cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "instructValue"],
|
||||
method: fys.sendAlarmMessage
|
||||
},
|
||||
sendImg: {
|
||||
cfg: [],
|
||||
method: null
|
||||
}
|
||||
|
||||
}
|
||||
];
|
||||
|
||||
function getCfg(json, type) {
|
||||
let f = dic.find(v => {
|
||||
|
||||
let flag = false;
|
||||
for (let index = 0; index < v.typeNames.length; index++) {
|
||||
let i = v.typeNames[index];
|
||||
if (i.toLowerCase().indexOf(json.typeName.toLowerCase()) > -1 || json.typeName.toLowerCase().indexOf(i.toLowerCase()) > -1) {
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
});
|
||||
|
||||
if (!f) {
|
||||
f = dic.find(v => {
|
||||
return !v.typeNames;
|
||||
});
|
||||
}
|
||||
if (f) {
|
||||
let keys = f[type].cfg;
|
||||
let method = f[type].method;
|
||||
|
||||
let formData = {};
|
||||
keys.forEach(key => {
|
||||
formData[key] = json[key];
|
||||
});
|
||||
|
||||
return {
|
||||
formData: formData,
|
||||
method: method
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
//发送信息
|
||||
function deviceSendMessage(json) {
|
||||
let cfg = getCfg(json, 'sendMsg');
|
||||
if (cfg.method) {
|
||||
return cfg.method(cfg.formData);
|
||||
}
|
||||
return Promise.reject({ code: 500, msg: '配置中找不到该类型的设备' });
|
||||
|
||||
}
|
||||
|
||||
//强制报警
|
||||
function sendAlarmMessage(json) {
|
||||
|
||||
let cfg = getCfg(json, 'SOS');
|
||||
if (cfg.method) {
|
||||
return cfg.method(cfg.formData);
|
||||
}
|
||||
return Promise.reject({ code: 500, msg: '配置中找不到该类型的设备' });
|
||||
}
|
||||
export default {
|
||||
deviceSendMessage: deviceSendMessage,
|
||||
sendAlarmMessage: sendAlarmMessage
|
||||
}
|
||||
@ -42,7 +42,8 @@ export interface DeviceDetail {
|
||||
name: string; // 姓名
|
||||
code: string; // ID(身份证/工号)
|
||||
};
|
||||
chargeState: string
|
||||
chargeState: string;
|
||||
alarmStatus:number
|
||||
}
|
||||
// 定义灯光模式的类型接口
|
||||
export interface LightMode {
|
||||
|
||||
@ -58,8 +58,17 @@ function uploadBoot(formData){
|
||||
// });
|
||||
}
|
||||
|
||||
function getDeviceInfoById(id){
|
||||
// 6170上传logo开机画面
|
||||
function deviceUploadLogo(formData){
|
||||
return request({
|
||||
url: '/api/bjq/device/batchUploadLogo',
|
||||
method: 'post',
|
||||
data: formData
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function getDeviceInfoById(id){
|
||||
return request({
|
||||
url: '/api/device/debug/detail/'+id,
|
||||
method: 'get'
|
||||
@ -67,11 +76,14 @@ function getDeviceInfoById(id){
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default{
|
||||
getDevice:getDevice,
|
||||
uploadFile:uploadFile,
|
||||
addVideo:addVideo,
|
||||
updateItem:updateItem,
|
||||
uploadBoot:uploadBoot,
|
||||
getDeviceInfoById:getDeviceInfoById
|
||||
getDeviceInfoById:getDeviceInfoById,
|
||||
deviceUploadLogo:deviceUploadLogo
|
||||
}
|
||||
29
src/api/debugCenter/deviceApi.ts
Normal file
@ -0,0 +1,29 @@
|
||||
|
||||
import debugCenter from '@/api/debugCenter/debugCenter';
|
||||
const uploadConfig = {
|
||||
670: {
|
||||
api: debugCenter.uploadBoot, // 670对应接口
|
||||
requiredParams: ['deviceIds', 'file']
|
||||
},
|
||||
6170: {
|
||||
api: debugCenter.deviceUploadLogo,
|
||||
requiredParams: ['deviceIds', 'file',]
|
||||
},
|
||||
default: {
|
||||
api: debugCenter.uploadBoot,
|
||||
requiredParams: ['deviceIds', 'file']
|
||||
}
|
||||
};
|
||||
function handleParams(deviceType, deviceIds, file) {
|
||||
const formattedIds = Array.isArray(deviceIds) ? deviceIds : [deviceIds];
|
||||
const formData = new FormData();
|
||||
formattedIds.forEach(id => formData.append('deviceIds', id));
|
||||
formData.append('file', file);
|
||||
return formData;
|
||||
}
|
||||
export function uploadLogo(deviceType, deviceIds, file) {
|
||||
const currentConfig = uploadConfig[deviceType] || uploadConfig.default;
|
||||
const formData = handleParams(deviceType, deviceIds, file);
|
||||
return currentConfig.api(formData);
|
||||
}
|
||||
export default { uploadLogo };
|
||||
@ -5,6 +5,7 @@ export interface deviceQuery extends PageQuery {
|
||||
deviceType: string;
|
||||
deviceStatus: string;
|
||||
bluetoothName?: string; // 蓝牙名称查询字段
|
||||
onlineStatus?: string;
|
||||
}
|
||||
|
||||
export interface deviceForm {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
var map = null;
|
||||
|
||||
var layPoints = [];
|
||||
|
||||
function initMap(click) {
|
||||
// let key = '90bc158992feb8ccd0145e168cab1307';
|
||||
@ -7,12 +7,12 @@ function initMap(click) {
|
||||
map = new AMap.Map("map", {
|
||||
viewMode: '2D', //默认使用 2D 模式
|
||||
zoom: 11, //地图级别
|
||||
center: [114.420739, 30.487514], //地图中心点
|
||||
center: [116.396477, 39.909278], //地图中心点
|
||||
mapStyle: "amap://styles/darkblue"
|
||||
});
|
||||
|
||||
map.on('click', function (evt) {
|
||||
// alert('您点击的位置:'+evt.lnglat.longitude+' , '+ evt.lnglat.latitude);
|
||||
// alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
|
||||
if (click) {
|
||||
click(evt.lnglat);
|
||||
}
|
||||
@ -38,7 +38,17 @@ function AddPoint(point, index, dragEnd, click, iconImg) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
let center = point ? new AMap.LngLat(point.longitude, point.latitude) : map.getCenter();
|
||||
if (!point) {
|
||||
reject("point不可用")
|
||||
return;
|
||||
}
|
||||
if (!point.longitude || !point.latitude) {
|
||||
reject("point的经纬度不可用")
|
||||
return;
|
||||
}
|
||||
layPoints.push({ lng: point.longitude, lat: point.latitude });
|
||||
|
||||
let center = new AMap.LngLat(point.longitude, point.latitude);
|
||||
|
||||
let icon = new AMap.Icon({
|
||||
size: new AMap.Size(45, 45), //图标尺寸
|
||||
@ -55,7 +65,8 @@ function AddPoint(point, index, dragEnd, click, iconImg) {
|
||||
title: point.isAlarming ? '正在报警:' + point.deviceName : point.deviceName,
|
||||
text: index,
|
||||
class: 'point',
|
||||
extData: point
|
||||
extData: point,
|
||||
anchor:'bottom-center'
|
||||
});
|
||||
marker.setMap(map);
|
||||
|
||||
@ -88,25 +99,48 @@ function setCenter(lon, latitude) {
|
||||
var position = new AMap.LngLat(lon, latitude); //传入经纬度
|
||||
map.setCenter(position); //简写 设置地图中心点
|
||||
|
||||
}
|
||||
|
||||
function calcCenter() {
|
||||
|
||||
|
||||
}
|
||||
//画多边形
|
||||
function DrawPoy(points) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!map) {
|
||||
reject("map未初始化");
|
||||
return;
|
||||
}
|
||||
if (!points) {
|
||||
reject("points未初始化");
|
||||
return;
|
||||
}
|
||||
if (!points.coordinates) {
|
||||
reject("coordinates未初始化");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Array.isArray(points.coordinates)) {
|
||||
points.coordinates = JSON.parse(points.coordinates);
|
||||
}
|
||||
|
||||
let path = [];
|
||||
let path1 = [];
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
points.coordinates.filter(v => {
|
||||
path.push(new AMap.LngLat(v.longitude, v.latitude));
|
||||
path1.push(new AMap.LngLat(v.longitude * 0.5, v.latitude * 0.5));
|
||||
if (v.lng && v.lat) {
|
||||
path.push(new AMap.LngLat(v.lng, v.lat));
|
||||
layPoints.push({ lng: v.lng, lat: v.lat });
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (!path.length) {
|
||||
reject("path为空");
|
||||
}
|
||||
let polygon = new AMap.Polygon({
|
||||
path: path,
|
||||
fillColor: '#F00C0C',
|
||||
@ -120,18 +154,40 @@ function DrawPoy(points) {
|
||||
extData: points
|
||||
});
|
||||
map.add(polygon);
|
||||
resolve("添加多边形成功");
|
||||
}, 0);
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
//画圆形
|
||||
function DrawCicle(points, raduis, dragEnd) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!map) {
|
||||
reject("map未初始化");
|
||||
return;
|
||||
}
|
||||
if (!points) {
|
||||
reject("points未初始化");
|
||||
return;
|
||||
}
|
||||
if (!points.coordinates) {
|
||||
reject("coordinates未初始化");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!Array.isArray(points.coordinates)) {
|
||||
points.coordinates = JSON.parse(points.coordinates);
|
||||
}
|
||||
|
||||
if (!(points.coordinates[0].lng && points.coordinates[0].lat)) {
|
||||
reject("圆的中心点不正确")
|
||||
return;
|
||||
}
|
||||
|
||||
let circle = new AMap.Circle({
|
||||
center: [points.coordinates[0].longitude, points.coordinates[0].latitude],
|
||||
center: [points.coordinates[0].lng, points.coordinates[0].lat],
|
||||
radius: raduis ? raduis : 1000, //半径
|
||||
borderWeight: 3,
|
||||
strokeColor: "#F00C0C",
|
||||
@ -144,17 +200,19 @@ function DrawCicle(points, raduis, dragEnd) {
|
||||
fillColor: '#1791fc',
|
||||
zIndex: 50,
|
||||
})
|
||||
|
||||
|
||||
|
||||
map.add(circle);
|
||||
// 缩放地图到合适的视野级别
|
||||
layPoints.push({ lng: points.coordinates[0].lng, lat: points.coordinates[0].lat });
|
||||
resolve("添加圆成功");
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
//清除所有
|
||||
function clearOverLays() {
|
||||
map && map.clearMap();
|
||||
layPoints = [];
|
||||
}
|
||||
|
||||
|
||||
@ -177,6 +235,7 @@ export default {
|
||||
DrawCicle: DrawCicle,
|
||||
clearOverLays: clearOverLays,
|
||||
removeOverLay: removeOverLay,
|
||||
|
||||
setCenter: setCenter,
|
||||
calcCenter: calcCenter,
|
||||
setFitView: setFitView
|
||||
}
|
||||
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 21 KiB |
BIN
src/assets/homeIndex/card1.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/homeIndex/card2.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/homeIndex/card3.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/homeIndex/card4.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/homeIndex/card5.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/homeIndex/card6.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/homeIndex/card7.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/homeIndex/select.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
4
src/assets/icons/svg/home.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="_图层_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.99 18">
|
||||
<path id="_矢量_42" d="M17.82,5.81L9.5.08c-.16-.11-.38-.11-.54,0L.2,5.81c-.13.08-.2.21-.2.35v11.41c0,.24.21.43.46.43h5.54c.25,0,.46-.19.46-.43v-2.48c0-1.42,1.17-2.65,2.68-2.69,1.57-.04,2.85,1.13,2.85,2.58v2.59c0,.24.21.43.46.43h5.08c.25,0,.46-.19.46-.43V6.15c0-.14-.06-.26-.18-.35h.01Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 417 B |
6
src/assets/icons/svg/报警信息1.1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 18">
|
||||
|
||||
<path d="M8.1,3.9c.6,0,1-.5,1-1v-1.9C9.1.5,8.6,0,8.1,0s-1,.4-1,1v1.9c0,.6.4,1,1,1h0ZM3.3,5.7c-.4.4-1,.4-1.4,0l-1.6-1.5c-.4-.4-.4-.9,0-1.3.4-.4,1-.4,1.4,0l1.6,1.5c.4.4.4.9,0,1.3ZM12.6,5.7c.4.4,1,.4,1.4,0l1.6-1.5c.4-.4.4-.9,0-1.3-.4-.4-1-.4-1.4,0l-1.6,1.5c-.4.4-.4.9,0,1.3ZM3,15.4v-5.4c0-2.8,2.3-5.1,5-5.1s5.1,2.3,5.1,5.1v5.4h1.6c.7,0,1.3.6,1.3,1.3s-.6,1.3-1.3,1.3H1.5c-.7,0-1.3-.6-1.3-1.3s.6-1.3,1.3-1.3c0,0,1.6,0,1.6,0ZM10.1,11.3h-1.1c-.1,0-.2,0-.2-.2l.4-2.1c0-.1-.2-.2-.3-.1l-2.9,2.6c0,0,0,.2.1.2h1.2c0,0,.2,0,.2.2l-.4,2.1c0,.1.2.2.3.1l2.9-2.6c.1,0,0-.2-.1-.2Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 699 B |
4
src/assets/icons/svg/控制中心1.1.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 16">
|
||||
<path id="_矢量_54" class="cls-1" d="M13.5,12.6v-1.1h2.2v1.1h2.2v2.3h-2.2v1.1h-2.2v-1.1H0v-2.3h13.5ZM7.9,6.9v-1.1h2.2v1.1h7.9v2.3h-7.9v1.1h-2.2v-1.1H0v-2.3s7.9,0,7.9,0ZM2.2,1.1V0h2.2v1.1h13.5v2.3H4.5v1.1h-2.2v-1.1H0V1.1h2.2Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 356 B |
6
src/assets/icons/svg/数据可视化1.1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 15">
|
||||
|
||||
<path d="M.8,0h16.4s.1,0,.2,0c0,0,.1,0,.1,0,0,0,.1,0,.1,0,0,0,0,0,.1,0,0,0,0,0,.1.1s0,0,0,.1c0,0,0,.1,0,.2,0,0,0,.1,0,.2v10.8c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.1,0,0,0,0-.1.1s0,0-.1.1c0,0,0,0-.1,0,0,0-.1,0-.1,0s-.1,0-.2,0H.8c0,0-.1,0-.2,0,0,0-.1,0-.1,0,0,0,0,0-.1,0s0,0-.1-.1c0,0,0,0,0-.1s0,0,0-.1c0,0,0-.1,0-.2C0,11.8,0,11.7,0,11.7V.8S0,.7,0,.7c0,0,0-.1,0-.2s0,0,0-.1c0,0,0,0,0-.1s0,0,.1,0c0,0,0,0,.1,0,0,0,.1,0,.1,0C.7,0,.8,0,.8,0h0ZM2.5,6.7h0s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v2.7s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h1s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0v-2.7s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h-.9ZM6.5,5h0s0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v4.3s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h1s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0v-4.3s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0-.9,0-.9,0ZM10.6,2.5h0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0v6.8s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0h1s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0V2.8s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h0s-.8,0-.8,0ZM14.7,5.8h0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0v3.5s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0h1s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v-3.5s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h0s-.8,0-.8,0ZM6.6,14.2v-.5s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h4.3s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v.5h3.8s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v.2s0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0H2.8s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0v-.2s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h3.8Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
7
src/assets/icons/svg/日志报表1.1.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 18">
|
||||
|
||||
<path d="M5.8,2.4h4.4c.4,0,.7-.3.7-.7V.7c0-.4-.3-.7-.7-.7h-4.4c-.4,0-.7.3-.7.7v1.1c0,.4.3.7.7.7Z"/>
|
||||
<path d="M13.8,1.3h-2.3v.7c0,.5-.4.8-.9.8h-5.2c-.5,0-.9-.4-.9-.8v-.7h-2.3C1,1.3,0,2.2,0,3.4v12.5c0,1.1,1,2.1,2.2,2.1h11.5c1.2,0,2.2-.9,2.2-2.1V3.4c0-1.2-1-2.1-2.2-2.1ZM13.2,13.4H3.3c-.3,0-.6-.2-.6-.5s.2-.5.6-.5h9.9c.3,0,.6.2.6.5s-.3.5-.6.5h0ZM13.2,10H3.3c-.3,0-.6-.2-.6-.5s.2-.5.6-.5h9.9c.3,0,.6.2.6.5s-.3.5-.6.5h0ZM13.2,6.5H3.3c-.3,0-.6-.2-.6-.5s.2-.5.6-.5h9.9c.3,0,.6.2.6.5s-.3.5-.6.5h0Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 633 B |
6
src/assets/icons/svg/用户管理1.1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
|
||||
|
||||
<path d="M16.9,12.8c-.1-.4-.3-.8-.5-1.2l.6-1-.5-.6-1,.6c-.3-.2-.7-.4-1.1-.4l-.3-1.2h-.8l-.3,1.2c-.4,0-.7.2-1.1.4l-1-.6-.5.6.6,1c-.2.4-.4.8-.5,1.2l-1.1.3v.8l1,.3c0,.5.2,1,.5,1.4l-.5.9.5.5.8-.5c.4.3.9.6,1.4.7l.2.9h.8l.2-.9c.3,0,.5-.1.8-.2s.5-.2.7-.4l.8.5.5-.5-.5-.9c.3-.4.4-.9.5-1.4l1-.3v-.8l-1.1-.3s0,0,0,0ZM13.7,15.6h-.2c0,0-.1,0-.2,0,0,0-.1,0-.2,0s-.1,0-.2,0c0,0-.1,0-.2,0,0,0-.1,0-.2-.1s-.1,0-.1-.1c0,0,0,0-.1-.1,0,0,0,0-.1-.1s0-.1-.1-.1c0,0,0-.1,0-.2,0,0,0-.1,0-.2s0-.1,0-.2,0-.1,0-.2c0,0,0-.1,0-.2v-.4c0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2s0-.1,0-.2c0,0,0-.1,0-.2s0-.1.1-.1c0,0,0-.1.1-.1,0,0,0,0,.1-.1s.1,0,.1-.1c0,0,.1,0,.2-.1s.1,0,.2,0c0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.2,0h.4c0,0,.1,0,.2,0,0,0,.1,0,.2,0s.1,0,.2,0c0,0,.1,0,.2,0,0,0,.1,0,.2.1s.1,0,.1.1c0,0,0,0,.1.1,0,0,0,0,.1.1s0,.1.1.1c0,0,0,.1,0,.2,0,0,0,.1,0,.2s0,.1,0,.2,0,.1,0,.2c0,0,0,.1,0,.2v.4c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.2s0,.1,0,.2c0,0,0,.1,0,.2s0,.1-.1.1c0,0,0,.1-.1.1,0,0,0,0-.1.1s-.1,0-.1.1c0,0-.1,0-.2.1,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.2,0-.2,0ZM10.4,9.6c-.6-.5-1.3-.8-2-1,1.4-.7,2.5-2.3,2.5-4S8.9,0,6.5,0,2.2,2,2.2,4.5s1,3.3,2.4,4C1.9,9.4,0,11.9,0,14.8,0,14.8,3.3,15.8,6.6,15.8s1.7,0,2.5-.2c-.1-.3-.2-.7-.3-1,0-.4-.1-.7-.1-1.1,0-1.6.7-3,1.7-3.9h0Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
8
src/assets/icons/svg/租户管理1.1.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
|
||||
|
||||
<path d="M7.4,12.7c.3-2,1.8-3.2,2.4-3.7h0c0,0,.2,0,.3-.2,1.9-.7,3.2-2.3,3.2-4.3,0-2.5-2.3-4.6-5.1-4.6S3.1,2.1,3.1,4.6s1.4,3.6,3.3,4.3c-.9.2-1.8.6-2.5,1C.6,11.7,0,14.2,0,17.7s.3.3.6.3h9.9l-.9-.4c-.9-.4-2.7-2.3-2.3-4.9h0Z"/>
|
||||
<path d="M13.2,11.6l-1.7,1.4v2.4h.7v-1.2h2v1.2h.7v-2.4l-1.7-1.4h0ZM14.9,11.9h-.3l.3.3v-.3Z"/>
|
||||
<path d="M13.2,9.1c-2.7,0-4.8,2-4.8,4.4s2.2,4.4,4.8,4.4,4.8-2,4.8-4.4-2.1-4.4-4.8-4.4ZM15.9,13.6c0,0-.1,0-.3,0s-.1,0-.2,0v2c0,.2-.2.4-.5.4h-1.6v-1.2h-.6v1.2h-1.6c-.3,0-.5-.2-.5-.4v-2s0,0-.2,0-.2,0-.3,0,0-.2,0-.2,0-.2,0-.2l2.4-2c.3-.2.6-.2.9,0l.4.4c0,0,.2-.2.3-.2h.9c.2,0,.3.2.3.3v.8c0,.1,0,.2-.1.2l.5.5c0,0,0,.1,0,.2,0,0,0,.1,0,.2h0Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 804 B |
6
src/assets/icons/svg/维修记录1.1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
|
||||
|
||||
<path d="M17.2,2.8s0,0,0,0c-.1-.1-.3-.1-.4,0l-3.2,3.2c-.4.4-1,.4-1.4,0h-.1c-.4-.5-.4-1.1,0-1.5l3.2-3.2s0,0,0,0c0-.1,0-.3-.1-.4-2.2-1.3-5.1-1-7,.9-1.4,1.4-1.9,3.2-1.6,5,0,.3,0,.7-.3,1L0,13.9c0,0,0,.2,0,.2l3.8,3.8c0,0,.2,0,.2,0l6.2-6.2c.2-.2.6-.3,1-.3,1.8.3,3.7-.2,5-1.6,1.9-1.9,2.2-4.8.9-7h0Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 428 B |
4
src/assets/icons/svg/联调中心1.1.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
|
||||
<path id="_联调中心图标" class="cls-1" d="M9.8,12.3c-1.1,0-2.1-.4-2.9-1.2-.2-.2-.3-.5-.3-.8s.1-.6.3-.8c.4-.4,1.2-.4,1.6,0,.8.8,2.1.7,3-.2l3.5-3.5c.5-.5.7-1.1.7-1.7s0-.9-.6-1.3c-.5-.5-1-.6-1.4-.5-.6,0-1.1.3-1.6.7l-2,2c-.5-.5-2.4-.8-2.9-.3l3.3-3.3c.9-.9,2-1.4,3.1-1.4,1.2,0,2.3.4,3.1,1.2.8.8,1.2,1.8,1.2,2.9s-.5,2.4-1.4,3.3l-3.5,3.5c-.9.9-2.1,1.4-3.3,1.4M4.9,7.1l-3.5,3.5C.5,11.5,0,12.7,0,13.9s.4,2.1,1.2,2.9c.8.8,1.9,1.3,3.1,1.2,1.1,0,2.2-.5,3.1-1.4l3.3-3.3c-.5.5-2.5.2-2.9-.3l-2,2c-.4.4-1,.7-1.6.7-.4,0-.9,0-1.4-.6-.5-.4-.5-1-.5-1.3,0-.6.3-1.2.7-1.7l3.5-3.5c.9-.9,2.2-1,3-.2s.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8c-.8-.8-1.9-1.2-2.9-1.2s-2.4.5-3.3,1.4h0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
6
src/assets/icons/svg/设备管理1.1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
|
||||
|
||||
<path d="M17.6,14.4l-6.4,3.5s-.1,0-.1,0c0,0-.1,0-.2,0h-.2c0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.1,0s0,0-.1-.1,0,0-.1-.1c0-.1-.1-.3-.1-.4v-5.9c0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1.1-.2,0,0,.1,0,.2-.1l6.4-3.5s.1,0,.1,0,.1,0,.2,0h.2c0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.1,0,0,0,0,0,.1.1s0,0,.1.1c0,.1.1.3.1.4v5.9c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1-.1.2,0,0-.1,0-.2.1h0ZM.4,14.4c0,0-.1,0-.2-.1,0,0,0-.1-.1-.2,0,0,0-.1,0-.2C0,13.8,0,13.7,0,13.6v-5.9C0,7.3.4,7,.9,7s.3,0,.4.1l6.4,3.5c0,0,.1,0,.2.1,0,0,0,.1.1.2s0,.1,0,.2,0,.1,0,.2v5.9c0,.5-.4.8-.9.8s-.3,0-.4-.1L.4,14.4H.4ZM8.6.1c.3-.1.6-.1.9,0l7.3,3.9s0,0,0,0,0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0v.2s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0l-7.3,3.9c0,0-.1,0-.2,0,0,0-.1,0-.2,0s-.1,0-.2,0-.1,0-.2,0L1.3,5.5s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0v-.2s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0L8.6.1h0Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
6
src/assets/icons/svg/首页1.1.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
|
||||
|
||||
<path d="M17.8,5.8L9.5,0c-.2-.1-.4-.1-.5,0L.2,5.8c-.1,0-.2.2-.2.3v11.4c0,.2.2.4.5.4h5.5c.2,0,.5-.2.5-.4v-2.5c0-1.4,1.2-2.6,2.7-2.7,1.6,0,2.8,1.1,2.8,2.6v2.6c0,.2.2.4.5.4h5.1c.2,0,.5-.2.5-.4V6.2c0-.1,0-.3-.2-.3h0Z"/>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 345 B |
BIN
src/assets/images/di.png
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/diAc.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/high.png
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/assets/images/highAc.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/rb.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/rbAc.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/images/sg.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/images/sgAc.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/zhong.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/assets/images/zhongAc.png
Normal file
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,13 +1,16 @@
|
||||
<template>
|
||||
<div v-if="!item.hidden">
|
||||
<template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
|
||||
<template
|
||||
v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
|
||||
<span @click="handleMenuClick(onlyOneChild, $event)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
|
||||
<svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
|
||||
<template #title>
|
||||
<span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</span>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
@ -17,14 +20,8 @@
|
||||
<span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
|
||||
</template>
|
||||
|
||||
<sidebar-item
|
||||
v-for="(child, index) in item.children"
|
||||
:key="child.path + index"
|
||||
:is-nest="true"
|
||||
:item="child"
|
||||
:base-path="resolvePath(child.path)"
|
||||
class="nest-menu"
|
||||
/>
|
||||
<sidebar-item v-for="(child, index) in item.children" :key="child.path + index" :is-nest="true" :item="child"
|
||||
:base-path="resolvePath(child.path)" class="nest-menu" />
|
||||
</el-sub-menu>
|
||||
</div>
|
||||
</template>
|
||||
@ -77,8 +74,25 @@ const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[])
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
// 处理菜单点击,完全控制跳转行为
|
||||
const handleMenuClick = (route, event) => {
|
||||
console.log(route, 'route');
|
||||
if (route.meta.openInNewTab) {
|
||||
// 完全阻止默认行为和事件冒泡
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
console.log('Opening in new tab:', route);
|
||||
const resolvedRoute = router.resolve({
|
||||
name: route.name || route.path
|
||||
});
|
||||
const fullUrl = new URL(resolvedRoute.href, window.location.origin).href;
|
||||
window.open(fullUrl, '_blank');
|
||||
} else {
|
||||
}
|
||||
};
|
||||
const resolvePath = (routePath: string, routeQuery?: string): any => {
|
||||
|
||||
if (isExternal(routePath)) {
|
||||
return routePath;
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
path: "/homeIndex",
|
||||
name: "HomeIndex",
|
||||
component: () => import("@/views/homeIndex/index.vue"),
|
||||
meta: {title: '数据大屏', icon: 'dashboard', preload: true, keepAlive: true },
|
||||
meta: { title: '数据大屏', icon: '首页1.1', preload: true, keepAlive: true, openInNewTab: true },
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
@ -54,7 +54,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
path: '/index',
|
||||
component: () => import('@/views/index.vue'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true, keepAlive: false }
|
||||
meta: { title: '首页', icon: '首页1.1', affix: true, keepAlive: false }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div>设备型号:{{ deviceDetail.deviceImei }}</div>
|
||||
<div class="device-status">设备状态:
|
||||
<span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
|
||||
{{ deviceDetail.onlineStatus === 1 ? "在线" : "离线" }}
|
||||
{{ deviceDetail.onlineStatus === 1 ? '在线' : (deviceDetail.onlineStatus === 2 ? '故障' : '离线') }}
|
||||
</span>
|
||||
</div>
|
||||
<div>电量:{{ deviceDetail.batteryPercentage || 0 }}%</div>
|
||||
@ -15,6 +15,14 @@
|
||||
|
||||
<!-- 主体内容区域 -->
|
||||
<div class="content-wrapper">
|
||||
<el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" >
|
||||
<el-col :lg="24" :xs="24">
|
||||
<div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'"
|
||||
@click="showClose()">
|
||||
设备强制报警中!
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第一行:灯光模式 + 灯光亮度、强制报警、位置信息 -->
|
||||
<el-row :gutter="20" class="content-row">
|
||||
<el-col :lg="16" :xs="24">
|
||||
@ -50,8 +58,8 @@
|
||||
:loading-text="lightModesLoading ? '保存中...' : '保存'"> {{
|
||||
lightModesLoading ? '保存中' : '保存' }}</el-button>
|
||||
</div>
|
||||
<el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading"
|
||||
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
|
||||
<el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading" v-if="deviceDetail.alarmStatus === 0 || deviceDetail.alarmStatus === null"
|
||||
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'" > {{
|
||||
forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
|
||||
</div>
|
||||
<div class="content-card_gps">
|
||||
@ -248,7 +256,8 @@ const deviceDetail = ref<DeviceDetail & { typeName: string }>({
|
||||
address: '',
|
||||
sendMsg: '',
|
||||
chargeState: '0',
|
||||
typeName: ''
|
||||
typeName: '',
|
||||
alarmStatus: 0
|
||||
});
|
||||
// 保留原有的操作中标志位
|
||||
const isUpdatingStatus = ref(false);
|
||||
@ -357,7 +366,7 @@ const handleLaserClick = async () => {
|
||||
laserMode.value.switchStatus = !targetStatus;
|
||||
}
|
||||
} catch (error: any) {
|
||||
proxy?.$modal.msgError(error.msg) ;
|
||||
// proxy?.$modal.msgError(error.msg);
|
||||
// 恢复之前的状态
|
||||
laserMode.value.switchStatus = !laserMode.value.switchStatus;
|
||||
} finally { }
|
||||
@ -420,11 +429,56 @@ const saveBtn = () => {
|
||||
|
||||
} else {
|
||||
lightModesLoading.value = false
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
//proxy?.$modal.msgError(res.msg);
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
// 解除报警
|
||||
const showClose = async () => {
|
||||
try {
|
||||
await proxy?.$modal.confirm('确定要对该设备解除报警?', '提示');
|
||||
// 2. 准备请求数据
|
||||
const batchId = generateShortId();
|
||||
let data = {
|
||||
deviceIds: [route.params.deviceId],
|
||||
typeName: deviceDetail.value.typeName,
|
||||
deviceImeiList: [deviceDetail.value.deviceImei],
|
||||
batchId: batchId,
|
||||
instructValue: '0', //强制报警1,解除报警0
|
||||
}
|
||||
const registerRes = await api.sendAlarmMessage(data);
|
||||
if (registerRes.code !== 200) {
|
||||
proxy?.$modal.msgWarning(registerRes.msg)
|
||||
return
|
||||
}
|
||||
// 4. 获取设备状态
|
||||
let deviceImei = deviceDetail.value.deviceImei
|
||||
const statusRes = await getDeviceStatus({
|
||||
functionMode: 2,
|
||||
batchId,
|
||||
typeName: 'FunctionAccessBatchStatusRule',
|
||||
deviceImei,
|
||||
interval: 500
|
||||
},
|
||||
api.deviceRealTimeStatus
|
||||
);
|
||||
// 只有当状态为'OK'时才显示成功弹窗
|
||||
if (statusRes.data.functionAccess === 'OK') {
|
||||
proxy?.$modal.msgSuccess(statusRes.msg);
|
||||
await getList();
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 强制报警
|
||||
const forceAlarm = async () => {
|
||||
try {
|
||||
@ -458,10 +512,12 @@ const forceAlarm = async () => {
|
||||
// 只有当状态为'OK'时才显示成功弹窗
|
||||
if (statusRes.data.functionAccess === 'OK') {
|
||||
proxy?.$modal.msgSuccess(statusRes.msg);
|
||||
await getList();
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
proxy?.$modal.msgWarning(error.msg)
|
||||
// proxy?.$modal.msgWarning(error.msg)
|
||||
forceAlarmLoading.value = false;
|
||||
|
||||
} finally {
|
||||
forceAlarmLoading.value = false;
|
||||
@ -536,17 +592,15 @@ const getMainLightModeLabel = (mode: any) => {
|
||||
// 处理设备消息
|
||||
const handleDeviceMessage = (msg: any) => {
|
||||
try {
|
||||
// 解析设备消息(假设格式为 { state: [类型, 模式值, 亮度, 续航...] })
|
||||
const payloadObj = JSON.parse(msg.payload.toString());
|
||||
const deviceState = payloadObj.state; // 设备状态数组
|
||||
if (!Array.isArray(deviceState)) {
|
||||
return;
|
||||
}
|
||||
// 用switch处理不同的消息类型(deviceState[0])
|
||||
switch (deviceState[0]) {
|
||||
case 1:
|
||||
// 类型1灯光主键
|
||||
const lightModeId = getMainLightModeLabel(deviceState[1]); // 获取模式ID(如'strong')
|
||||
const lightModeId = getMainLightModeLabel(deviceState[1]);
|
||||
const brightness = deviceState[2]; // 亮度值
|
||||
const batteryTime = deviceState[3]; // 续航时间
|
||||
console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
|
||||
@ -569,7 +623,7 @@ const handleDeviceMessage = (msg: any) => {
|
||||
break;
|
||||
case 12:
|
||||
// 灯光主键
|
||||
const lightModeIdA = getMainLightModeLabel(deviceState[1]); // 获取模式ID(如'strong')
|
||||
const lightModeIdA = getMainLightModeLabel(deviceState[1]);
|
||||
if (lightModeIdA !== 'unknown') {
|
||||
lightModes.value.forEach(mode => {
|
||||
const isActive = mode.id === lightModeIdA;
|
||||
@ -586,11 +640,14 @@ const handleDeviceMessage = (msg: any) => {
|
||||
deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
|
||||
// getList(); // 重新获取设备详情
|
||||
if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
|
||||
centerDialogVisible.value=true
|
||||
centerDialogVisible.value = true
|
||||
}
|
||||
break;
|
||||
case 7:
|
||||
deviceDetail.value.alarmStatus = deviceState[1];
|
||||
|
||||
break;
|
||||
default:
|
||||
// 其他类型消息(不处理,仅打印)
|
||||
console.log('未处理的消息类型:', deviceState[0]);
|
||||
break;
|
||||
}
|
||||
@ -598,7 +655,7 @@ const handleDeviceMessage = (msg: any) => {
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getList(); // 先获取设备信息
|
||||
await getList();
|
||||
// 连接mqtt
|
||||
onConnect(async () => {
|
||||
const deviceImei = deviceDetail.value.deviceImei;
|
||||
@ -624,7 +681,7 @@ onMounted(async () => {
|
||||
handleDeviceMessage(msg);
|
||||
});
|
||||
onError((err) => {
|
||||
console.error('MQTT连接失败原因:', err.message); // 关键:打印连接失败的具体原因
|
||||
console.error('MQTT连接失败原因:', err.message);
|
||||
});
|
||||
connect();
|
||||
});
|
||||
@ -638,12 +695,13 @@ onUnmounted(() => {
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.p-2{
|
||||
.p-2 {
|
||||
background: rgba(247, 248, 252, 1);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.device-page {
|
||||
.header-bar {
|
||||
border-radius: 8px;
|
||||
@ -948,4 +1006,23 @@ onUnmounted(() => {
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.staticRwo {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
height: auto;
|
||||
line-height: 36px;
|
||||
box-sizing: border-box;
|
||||
text-indent: 15px;
|
||||
color: #ff0000;
|
||||
font-weight: bold;
|
||||
font-size: 17px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.displayNone {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="device-page p-2">
|
||||
<!-- 头部信息栏 -->
|
||||
<div class="header-bar">
|
||||
<div>设备名称:{{ deviceDetail.deviceName }},IMEI:{{deviceDetail.deviceImei }}</div>
|
||||
<div>设备名称:{{ deviceDetail.deviceName }},IMEI:{{ deviceDetail.deviceImei }}</div>
|
||||
<div>设备型号:{{ deviceDetail.typeName }}</div>
|
||||
<div class="device-status">
|
||||
设备状态:
|
||||
@ -19,8 +19,8 @@
|
||||
<el-row :gutter="20" class="content-row" :class="deviceDetail.sta_ShakeBit == 1 || deviceDetail.staSOSGrade == 1 ? '' : 'displayNone'">
|
||||
<el-col :lg="24" :xs="24">
|
||||
<div class="staticRwo" :class="deviceDetail.sta_ShakeBit == 1 ? '' : 'displayNone'">设备静止报警中!</div>
|
||||
<div class="staticRwo" :class="deviceDetail.staSOSGrade == 1 ? '' : 'displayNone'" @click="showClose()">
|
||||
设备强制报警中,<span v-show="Status.timeOut>0">{{ Status.timeOut }}S</span>!
|
||||
<div class="staticRwo" :class="deviceDetail.staSOSGrade == 1 && Status.timeOut > 0 ? '' : 'displayNone'" @click="showClose()">
|
||||
设备强制报警中<span v-show="Status.timeOut > 0">,{{ Status.timeOut }}S</span>!
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -95,15 +95,15 @@
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<span class="form-label">单位:</span>
|
||||
<el-input v-if="deviceDetail" placeholder="请输入单位名称" v-model="deviceDetail.personnelInfo.unitName" />
|
||||
<el-input v-if="deviceDetail" placeholder="请输入单位" v-model="deviceDetail.personnelInfo.unitName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">职位:</span>
|
||||
<el-input v-if="deviceDetail" placeholder="请输入职位名称" v-model="deviceDetail.personnelInfo.position" />
|
||||
<el-input v-if="deviceDetail" placeholder="请输入职位" v-model="deviceDetail.personnelInfo.position" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">姓名</span>
|
||||
<el-input v-if="deviceDetail" placeholder="请输入职位姓名" v-model="deviceDetail.personnelInfo.name" />
|
||||
<span class="form-label">姓名:</span>
|
||||
<el-input v-if="deviceDetail" placeholder="请输入姓名" v-model="deviceDetail.personnelInfo.name" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">ID:</span>
|
||||
@ -206,11 +206,23 @@ const router = useRouter();
|
||||
// 导入图片资源(确保路径正确)
|
||||
import strongLightDefault from '@/assets/images/strong-light.png';
|
||||
import strongLightActive from '@/assets/images/strong-light_HL.png';
|
||||
import weakLightDefault from '@/assets/images/weak-light.png';
|
||||
import weakLightActive from '@/assets/images/weak-light_HL.png';
|
||||
import floodLightDefault from '@/assets/images/flood-light.png';
|
||||
import floodLightActive from '@/assets/images/flood-light_HL.png';
|
||||
|
||||
import di from '@/assets/images/di.png';
|
||||
import diAc from '@/assets/images/diAc.png';
|
||||
import high from '@/assets/images/high.png';
|
||||
import highAc from '@/assets/images/highAc.png';
|
||||
import rb from '@/assets/images/rb.png';
|
||||
import rbAc from '@/assets/images/rbAc.png';
|
||||
import sg from '@/assets/images/sg.png';
|
||||
import sgAc from '@/assets/images/sgAc.png';
|
||||
import zhong from '@/assets/images/zhong.png';
|
||||
import zhongAc from '@/assets/images/zhongAc.png';
|
||||
import closeDefault from '@/assets/images/close.png';
|
||||
import closeActive from '@/assets/images/close_HL.png';
|
||||
import { hi } from 'element-plus/es/locale/index.mjs';
|
||||
|
||||
const fullscreenLoading = ref(false);
|
||||
var timer = null;
|
||||
const sendTextLoading = ref(false);
|
||||
@ -248,8 +260,8 @@ const lightModes = ref<any[]>([
|
||||
{
|
||||
id: '2',
|
||||
name: '弱光',
|
||||
icon: weakLightDefault,
|
||||
activeIcon: weakLightActive,
|
||||
icon: floodLightDefault,
|
||||
activeIcon: floodLightActive,
|
||||
active: false
|
||||
},
|
||||
{
|
||||
@ -265,24 +277,24 @@ const sosModes = ref<any[]>([
|
||||
{
|
||||
id: '1',
|
||||
name: '声光报警',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: sg, // 直接使用导入的变量
|
||||
activeIcon: sgAc,
|
||||
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '红蓝模式',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: rb, // 直接使用导入的变量
|
||||
activeIcon: rbAc,
|
||||
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '0',
|
||||
name: '关闭',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: closeDefault, // 直接使用导入的变量
|
||||
activeIcon: closeActive,
|
||||
|
||||
active: false
|
||||
}
|
||||
@ -292,32 +304,32 @@ const staticModes = ref<any[]>([
|
||||
{
|
||||
id: '3',
|
||||
name: '高档',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: high, // 直接使用导入的变量
|
||||
activeIcon: highAc,
|
||||
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '中档',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: zhong, // 直接使用导入的变量
|
||||
activeIcon: zhongAc,
|
||||
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: '低档',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: di, // 直接使用导入的变量
|
||||
activeIcon: diAc,
|
||||
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: '0',
|
||||
name: '关闭',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
icon: closeDefault, // 直接使用导入的变量
|
||||
activeIcon: closeActive,
|
||||
|
||||
active: false
|
||||
}
|
||||
@ -414,37 +426,35 @@ const handleModeClick = async (id: string, type: string) => {
|
||||
dic.callback();
|
||||
}
|
||||
if (callback) {
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
}
|
||||
});
|
||||
};
|
||||
if(type == 'sosMode' && Status.sosMode=== '1' && id==='0' && timer){
|
||||
if (type == 'sosMode' && Status.sosMode === '1' && id === '0' && timer) {
|
||||
showClose();
|
||||
return;
|
||||
}
|
||||
else if (type == 'sosMode' && id === '1') {
|
||||
} else if (type == 'sosMode' && id === '1' && timer == null) {
|
||||
ShowConfirm({
|
||||
title: '提示',
|
||||
text: '您确认开启180秒强制报警',
|
||||
cancelCallback: null,
|
||||
cancelCallback: () => {
|
||||
timer = null;
|
||||
},
|
||||
OkCallback: () => {
|
||||
sendCmd(function () {
|
||||
|
||||
Status.confirm.Visible = false;
|
||||
deviceDetail.value.staSOSGrade="1";
|
||||
deviceDetail.value.staSOSGrade = '1';
|
||||
Status.timeOut = 180;
|
||||
timer = setInterval(() => {
|
||||
if (Status.timeOut === 0) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
hideConfirm();
|
||||
handleModeClick('1','sosMode');
|
||||
deviceDetail.value.staSOSGrade="0";
|
||||
handleModeClick('1', 'sosMode');
|
||||
deviceDetail.value.staSOSGrade = '0';
|
||||
return;
|
||||
}
|
||||
|
||||
@ -463,8 +473,12 @@ const handleModeClick = async (id: string, type: string) => {
|
||||
};
|
||||
|
||||
const getList = () => {
|
||||
api.deviceRealTimeStatus(route.params.deviceId).then((res) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
api
|
||||
.deviceRealTimeStatus(route.params.deviceId)
|
||||
.then((res) => {
|
||||
if (res && res.code == 200) {
|
||||
|
||||
let keys = Object.keys(res.data);
|
||||
keys.forEach((key) => {
|
||||
deviceDetail.value[key] = res.data[key];
|
||||
@ -472,7 +486,19 @@ const getList = () => {
|
||||
Status.sosMode = res.data.staSOSGrade;
|
||||
Status.staticPower = res.data.staDetectGrade;
|
||||
Status.lightMode = res.data.staLightGrade;
|
||||
if (!deviceDetail.value.personnelInfo) {
|
||||
deviceDetail.value.personnelInfo = {
|
||||
'id': null,
|
||||
'deviceId': null,
|
||||
'name': null,
|
||||
'position': null,
|
||||
'unitName': null,
|
||||
'code': null
|
||||
};
|
||||
}
|
||||
}
|
||||
})
|
||||
.finally(resolve);
|
||||
});
|
||||
};
|
||||
|
||||
@ -561,23 +587,31 @@ const lookMap = (row: any) => {
|
||||
function showClose() {
|
||||
Status.confirm.Visible = true;
|
||||
Status.confirm.OkTxt = '关闭';
|
||||
Status.confirm.OkCallback=()=>{
|
||||
Status.confirm.OkCallback = () => {
|
||||
clearInterval(timer);
|
||||
timer=null;
|
||||
handleModeClick('0','sosMode');
|
||||
deviceDetail.value.staSOSGrade="0";
|
||||
timer = null;
|
||||
handleModeClick('0', 'sosMode');
|
||||
deviceDetail.value.staSOSGrade = '0';
|
||||
|
||||
Status.timeOut=0;
|
||||
Status.timeOut = 0;
|
||||
|
||||
hideConfirm();
|
||||
}
|
||||
};
|
||||
}
|
||||
// 处理设备消息
|
||||
const handleDeviceMessage = (payload: any) => {
|
||||
let json = JSON.parse(payload);
|
||||
let json = null;
|
||||
try {
|
||||
json = JSON.parse(payload);
|
||||
} catch (ex) {
|
||||
return;
|
||||
}
|
||||
|
||||
let keys = Object.keys(json);
|
||||
|
||||
function parseDataMQ(json) {
|
||||
try {
|
||||
debugger;
|
||||
deviceDetail.value.staDetectGrade = json.sta_DetectGrade;
|
||||
deviceDetail.value.staLightGrade = json.sta_LightGrade;
|
||||
deviceDetail.value.staDetectResult = json.sta_DetectResult;
|
||||
@ -592,7 +626,9 @@ const handleDeviceMessage = (payload: any) => {
|
||||
Status.sosMode = json.sta_SOSGrade;
|
||||
Status.staticPower = json.sta_DetectGrade;
|
||||
Status.lightMode = json.sta_LightGrade;
|
||||
|
||||
console.log('Status=', Status);
|
||||
console.log('sosModes=', sosModes.value);
|
||||
console.log('sta_SOSGrade=', json.sta_SOSGrade);
|
||||
if (json.sta_PowerPercent < 20) {
|
||||
centerDialogVisible.value = true;
|
||||
}
|
||||
@ -607,6 +643,7 @@ const handleDeviceMessage = (payload: any) => {
|
||||
if (json.sta_ShakeBit == 1) {
|
||||
confirm('设备静止报警中');
|
||||
}
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
if (keys.indexOf('sta_DetectGrade') > -1) {
|
||||
@ -619,6 +656,7 @@ onMounted(async () => {
|
||||
await getList(); // 先获取设备信息
|
||||
// 连接mqtt
|
||||
onConnect(async () => {
|
||||
|
||||
const deviceImei = deviceDetail.value.deviceImei;
|
||||
if (!deviceImei) {
|
||||
return;
|
||||
@ -632,6 +670,7 @@ onMounted(async () => {
|
||||
});
|
||||
// 2. 注册消息接收回调(核心:处理设备发送的消息)
|
||||
onMessage((msg) => {
|
||||
|
||||
console.log('收到新消息:', {
|
||||
主题: msg.topic,
|
||||
内容: msg.payload,
|
||||
@ -639,7 +678,7 @@ onMounted(async () => {
|
||||
QoS: msg.qos
|
||||
});
|
||||
// 在这里处理消息(根据实际业务逻辑)
|
||||
handleDeviceMessage(msg);
|
||||
handleDeviceMessage(msg.payload);
|
||||
});
|
||||
onError((err) => {
|
||||
console.error('MQTT连接失败原因:', err.message); // 关键:打印连接失败的具体原因
|
||||
@ -720,7 +759,7 @@ window.hideConfirm = function () {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.p-2{
|
||||
.p-2 {
|
||||
background: rgba(247, 248, 252, 1);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -222,7 +222,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.amap-container {
|
||||
height: 640px;
|
||||
height: calc(100vh - 25vh);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
@ -234,11 +234,12 @@ onUnmounted(() => {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
height: 620px;
|
||||
height: calc(100vh - 25vh);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
left: 10px
|
||||
left: 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* 其他样式保持不变... */
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
<el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
|
||||
<el-option label="在线" value="1"></el-option>
|
||||
<el-option label="离线" value="0"></el-option>
|
||||
<el-option label="故障" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备MAC" prop="deviceMac">
|
||||
@ -81,7 +82,7 @@
|
||||
</transition>
|
||||
<el-card class="Maplist">
|
||||
<div v-if="isListView" key="list">
|
||||
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange" height="calc(100vh - 310px)">
|
||||
<el-table-column type="selection" width="50" align="center" :selectable="isSelectable" />
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column label="设备图片" align="center" prop="devicePic">
|
||||
@ -109,6 +110,7 @@
|
||||
<template #default="scope">
|
||||
<div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
|
||||
<div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
|
||||
<div class="normal red" v-if="scope.row.onlineStatus == 2">故障</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="电量" align="center" prop="battery">
|
||||
@ -118,10 +120,22 @@
|
||||
'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
|
||||
'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
|
||||
}">
|
||||
{{ scope.row.battery || '0'}}%
|
||||
{{ scope.row.battery || '0' }}%
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="绑定状态" align="center" prop="bindingStatus">
|
||||
<template #default="scope">
|
||||
<div class="normal green" v-if="scope.row.bindingStatus == 1">已绑定</div>
|
||||
<div class="normal red" v-if="scope.row.bindingStatus == 0">未绑定</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警状态" align="center" prop="alarmStatus">
|
||||
<template #default="scope">
|
||||
<div class="normal red" v-if="scope.row.alarmStatus == 1">报警中</div>
|
||||
<div class="normal green" v-if="scope.row.alarmStatus == 0">未报警</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
@ -163,6 +177,8 @@ import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||||
import { deviceQuery, deviceVO } from '@/api/controlCenter/controlPanel/types';
|
||||
import Amap from "./components/map.vue";
|
||||
import { generateShortId, getDeviceStatus } from '@/utils/function';
|
||||
import eqControl from '@/api/controlCenter/controlPanel/eqControl';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute(); // 新增:用于获取URL中的query参数
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
@ -378,6 +394,7 @@ const submitForm = async () => {
|
||||
return
|
||||
}
|
||||
try {
|
||||
|
||||
sendTextLoading.value = true;
|
||||
// 2. 准备请求数据
|
||||
const deviceIds = ids.value.map(item => item.id);
|
||||
@ -390,10 +407,11 @@ const submitForm = async () => {
|
||||
typeName: typeName,
|
||||
batchId: batchId,
|
||||
deviceImeiList: deviceImeiList,
|
||||
sendMsg: form.value.messageToSend
|
||||
sendMsg: form.value.messageToSend,
|
||||
instructValue:""
|
||||
};
|
||||
// 3.人员信息
|
||||
const registerRes = await api.deviceSendMessage(data);
|
||||
const registerRes = await eqControl.deviceSendMessage(data);
|
||||
if (registerRes.code !== 200) {
|
||||
proxy?.$modal.msgWarning(registerRes.msg)
|
||||
return
|
||||
@ -452,9 +470,10 @@ const forceAlarm = async () => {
|
||||
typeName: typeName,
|
||||
batchId: batchId,
|
||||
deviceImeiList: deviceImeiList,
|
||||
instructValue: '1', //强制报警1,解除报警0
|
||||
instructValue: '1' //强制报警1,解除报警0
|
||||
|
||||
}
|
||||
const registerRes = await api.sendAlarmMessage(data);
|
||||
const registerRes = await eqControl.sendAlarmMessage(data);
|
||||
if (registerRes.code !== 200) {
|
||||
proxy?.$modal.msgWarning(registerRes.msg)
|
||||
return
|
||||
@ -485,15 +504,17 @@ const forceAlarm = async () => {
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.p-2{
|
||||
.p-2 {
|
||||
background: rgba(247, 248, 252, 1);
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
:deep .el-collapse{
|
||||
border-top:none
|
||||
|
||||
:deep .el-collapse {
|
||||
border-top: none
|
||||
}
|
||||
|
||||
:deep .el-collapse-item__header {
|
||||
display: none;
|
||||
}
|
||||
@ -554,7 +575,7 @@ const forceAlarm = async () => {
|
||||
}
|
||||
|
||||
.Maplist {
|
||||
height: 680px;
|
||||
overflow: auto;
|
||||
//height: calc(100vh - 24vh);
|
||||
//overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
</transition>
|
||||
<el-card class="Maplist">
|
||||
<div>
|
||||
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange" height="calc(100vh - 400px)">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column label="设备型号" align="center" prop="deviceType" />
|
||||
@ -251,7 +251,7 @@ const handleExport = () => {
|
||||
<style lang="scss" scoped>
|
||||
.p-2{
|
||||
background: rgba(247, 248, 252, 1);
|
||||
min-height: 100vh;
|
||||
height: calc(100vh - 8vh);
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
@ -299,7 +299,7 @@ const handleExport = () => {
|
||||
}
|
||||
|
||||
.Maplist {
|
||||
height: 680px;
|
||||
overflow: auto;
|
||||
height: calc(100vh - 24vh);
|
||||
// overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
</transition>
|
||||
<el-card class="Maplist">
|
||||
<div>
|
||||
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
|
||||
<el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange" height="calc(100vh - 400px)">
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column label="设备型号" align="center" prop="deviceType" />
|
||||
@ -259,7 +259,7 @@ const historyjectory = (row: any) => {
|
||||
<style lang="scss" scoped>
|
||||
.p-2{
|
||||
background: rgba(247, 248, 252, 1);
|
||||
min-height: 100vh;
|
||||
height: calc(100vh - 8vh);
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
@ -307,7 +307,7 @@ const historyjectory = (row: any) => {
|
||||
}
|
||||
|
||||
.Maplist {
|
||||
height: 680px;
|
||||
overflow: auto;
|
||||
height: calc(100vh - 24vh);
|
||||
// overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
:data="List"
|
||||
:height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
|
||||
>
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column type="selection" width="50" align="center" :selectable="isSelectable"/>
|
||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||
<el-table-column label="设备图片" align="center" prop="devicePic">
|
||||
<template #default="scope">
|
||||
@ -169,42 +169,50 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 单个个设备编辑层 -->
|
||||
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="500px">
|
||||
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
|
||||
<div class="SingEditContent">
|
||||
<div class="Boot item">
|
||||
<div class="title">开机画面</div>
|
||||
<div class="img">
|
||||
<div class="imgs">
|
||||
<div class="Preview">
|
||||
<img class="img" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
|
||||
<img class="img" v-show="cEdit.fileBoot.src" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileBoot')">修改</div>
|
||||
<div class="clear">
|
||||
<input type="file" id="fileBoot" class="displayNone" />
|
||||
<input type="file" accept="image/*" id="fileBoot" class="displayNone" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Param item">
|
||||
<div class="title">产品参数</div>
|
||||
<div class="img">
|
||||
<div class="imgs">
|
||||
<div class="Preview">
|
||||
<img v-for="(item, index) in cEdit.fileParam" class="img" :src="item.src" />
|
||||
<div class="imgContent" v-for="(item, index) in cEdit.fileParam">
|
||||
<img class="img" :src="item.src" />
|
||||
<div class="opt" @click.stop="DelImg(item,index,'fileParam')">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileParam')">修改</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileParam')">添加</div>
|
||||
<div class="clear">
|
||||
<input type="file" id="fileParam" class="displayNone" />
|
||||
<input type="file" accept="image/*" id="fileParam" class="displayNone" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Oprat item">
|
||||
<div class="title">操作说明</div>
|
||||
<div class="img">
|
||||
<div class="imgs">
|
||||
<div class="Preview">
|
||||
<img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileOprat')">修改</div>
|
||||
<div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
|
||||
<div class="clear">
|
||||
<input type="file" id="fileOprat" class="displayNone" />
|
||||
<input type="file" accept="image/*" id="fileOprat" class="displayNone" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="Video item">
|
||||
@ -240,6 +248,7 @@
|
||||
import api from '@/api/debugCenter/debugCenter';
|
||||
import common from '@/utils/common';
|
||||
import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||||
import uploadHelper from '@/api/debugCenter/deviceApi';
|
||||
|
||||
var fileInput = document.getElementById('fileInput');
|
||||
var fileInputs = {
|
||||
@ -283,7 +292,8 @@ var cEdit = reactive({
|
||||
fileBoot: { name: '', type: '', size: '', src: '', file: null },
|
||||
fileParam: [],
|
||||
fileOprat: [],
|
||||
Video: ''
|
||||
Video: '',
|
||||
fileIds:[]
|
||||
});
|
||||
//页码控件数据
|
||||
var pagin = reactive({
|
||||
@ -327,6 +337,12 @@ function handleQuery() {
|
||||
queryTime = setTimeout(getList, 500);
|
||||
}
|
||||
|
||||
const isSelectable = (row: any) => {
|
||||
// 仅当在线状态(onlineStatus == 1)时允许选中
|
||||
return row.onlineStatus === 1;
|
||||
}
|
||||
|
||||
|
||||
function getList() {
|
||||
Status.loading = true;
|
||||
api
|
||||
@ -412,6 +428,7 @@ function ShowMultiEdit(type: MideaType) {
|
||||
function ShowSingleEdit(item) {
|
||||
Status.ShowEditPop = true;
|
||||
//期待接口返回以下4个字段
|
||||
|
||||
cEdit.deviceId = item.id;
|
||||
cEdit.deviceImei = item.deviceImei;
|
||||
cEdit.Video = item.Video;
|
||||
@ -437,7 +454,7 @@ function ShowSingleEdit(item) {
|
||||
return v.fileType == 1;
|
||||
})
|
||||
.map((v) => {
|
||||
return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
});
|
||||
|
||||
cEdit.fileParam = arr
|
||||
@ -445,8 +462,10 @@ function ShowSingleEdit(item) {
|
||||
return v.fileType == 2;
|
||||
})
|
||||
.map((v) => {
|
||||
return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||||
});
|
||||
|
||||
cEdit.fileBoot.src = '';
|
||||
}
|
||||
});
|
||||
|
||||
@ -459,6 +478,7 @@ function CloseSingleEdit() {
|
||||
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
|
||||
cEdit.fileOprat = [];
|
||||
cEdit.fileParam = [];
|
||||
cEdit.fileIds=[];
|
||||
}
|
||||
|
||||
//关闭上传框
|
||||
@ -481,7 +501,6 @@ function SaveMultiData() {
|
||||
}
|
||||
Status.fullLoading = true;
|
||||
setTimeout(() => {
|
||||
|
||||
let promise = null;
|
||||
|
||||
let formData = new FormData();
|
||||
@ -507,7 +526,7 @@ function SaveMultiData() {
|
||||
});
|
||||
|
||||
if (Status.currMideaType == MideaType.Boot) {
|
||||
promise=updaeLogo(arr,checkFile.file);
|
||||
promise = updaeLogo(arr, checkFile.file);
|
||||
} else if (Status.currMideaType == MideaType.Video) {
|
||||
promise = api.addVideo(json); //操作视频
|
||||
} else {
|
||||
@ -528,22 +547,39 @@ function SaveMultiData() {
|
||||
}, 0);
|
||||
}
|
||||
//上传开机画面
|
||||
function updaeLogo(ids, file) {
|
||||
debugger;
|
||||
if (!file || !ids) {
|
||||
// function updaeLogo(ids, file) {
|
||||
// if (!file || !ids) {
|
||||
// return Promise.resolve({ code: 200, msg: '成功' });
|
||||
// }
|
||||
// if (!Array.isArray(ids)) {
|
||||
// ids = [ids];
|
||||
// }
|
||||
// var formData = new FormData();
|
||||
// ids.forEach((element) => {
|
||||
// formData.append('deviceIds', element);
|
||||
// });
|
||||
// formData.append('file', file);
|
||||
// return api.uploadBoot(formData);
|
||||
// }
|
||||
// 上传开机画面根据类型适配不同的上传接口,其他类型暂且默认670
|
||||
function updaeLogo(ids, file, deviceType?: number) {
|
||||
const selectedRows = getSelectionRows(grid);
|
||||
let realDeviceType = 670; // 默认670
|
||||
if (selectedRows.length > 0) {
|
||||
const deviceTypeName = selectedRows[0].typeName || '';
|
||||
if (deviceTypeName.includes('670')) {
|
||||
realDeviceType = 670;
|
||||
} else if (deviceTypeName.includes('6170')) {
|
||||
realDeviceType = 6170;
|
||||
}
|
||||
}
|
||||
const finalDeviceType = deviceType || realDeviceType;
|
||||
const finalIds = Array.isArray(ids) ? ids : [ids];
|
||||
const finalFile = file || checkFile.file || cEdit.fileBoot.file;
|
||||
if (!finalFile || finalIds.length === 0) {
|
||||
return Promise.resolve({ code: 200, msg: '成功' });
|
||||
}
|
||||
if (!Array.isArray(ids)) {
|
||||
ids = [ids];
|
||||
}
|
||||
var formData = new FormData();
|
||||
ids.forEach((element) => {
|
||||
formData.append('deviceIds', element);
|
||||
});
|
||||
|
||||
formData.append('file', file);
|
||||
|
||||
return api.uploadBoot(formData);
|
||||
return uploadHelper.uploadLogo(finalDeviceType, finalIds, finalFile);
|
||||
}
|
||||
//保存单个设备的数据
|
||||
function SaveItemData() {
|
||||
@ -555,8 +591,7 @@ function SaveItemData() {
|
||||
var formData = new FormData();
|
||||
formData.append('deviceId', cEdit.deviceId);
|
||||
formData.append('deviceImei', cEdit.deviceImei);
|
||||
|
||||
// formData.append("logoFile",cEdit.fileBoot.file);//开机画面
|
||||
formData.append("fileIds",cEdit.fileIds);
|
||||
|
||||
cEdit.fileParam.forEach((v) => {
|
||||
if (v.file) {
|
||||
@ -580,7 +615,7 @@ function SaveItemData() {
|
||||
if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
|
||||
if (res[0].value.code == 200 && res[1].value.code == 200) {
|
||||
CloseSingleEdit();
|
||||
alert("操作成功");
|
||||
alert('操作成功');
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -649,7 +684,6 @@ function dragImgAddEvt() {
|
||||
});
|
||||
}
|
||||
function handleDrop(e) {
|
||||
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
|
||||
@ -662,7 +696,6 @@ function dragImgAddEvt() {
|
||||
}
|
||||
|
||||
function addFileEvt() {
|
||||
|
||||
var checkImgOver = function (res, type) {
|
||||
if (type == 'fileBoot') {
|
||||
let keys = Object.keys(res);
|
||||
@ -677,7 +710,6 @@ function addFileEvt() {
|
||||
fileInputs.fileBoot = document.getElementById('fileBoot');
|
||||
fileInputs.fileOprat = document.getElementById('fileOprat');
|
||||
fileInputs.fileParam = document.getElementById('fileParam');
|
||||
}
|
||||
|
||||
let keys = Object.keys(fileInputs);
|
||||
keys.forEach((k) => {
|
||||
@ -687,6 +719,7 @@ function addFileEvt() {
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理选择的文件
|
||||
@ -788,6 +821,20 @@ var hideConfirm = function () {
|
||||
Status.confirm = Cfg;
|
||||
};
|
||||
|
||||
//删除某个图片
|
||||
function DelImg(item,index,type){
|
||||
|
||||
if(item.id){
|
||||
confirm('您确认删除吗?',()=>{
|
||||
cEdit.fileIds.push(item.id);
|
||||
cEdit[type].splice(index,1);
|
||||
|
||||
});
|
||||
}else{
|
||||
cEdit[type].splice(index,1);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDeviceType();
|
||||
getList();
|
||||
@ -914,7 +961,8 @@ onMounted(() => {
|
||||
|
||||
.SingEditContent .item {
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
min-height: 90px;
|
||||
height: auto;
|
||||
border-bottom: 1px dashed #e7e7e7;
|
||||
|
||||
padding: 12px 0px;
|
||||
@ -947,10 +995,11 @@ onMounted(() => {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.SingEditContent .item .img {
|
||||
.SingEditContent .item .imgs {
|
||||
width: calc(100% - 110px);
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 90px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.SingEditContent .item .option {
|
||||
@ -1003,10 +1052,46 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.SingEditContent .Preview .img {
|
||||
height: 100%;
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d3d5d7;
|
||||
}
|
||||
|
||||
.SingEditContent .item .imgContent {
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.SingEditContent .item .imgContent .opt {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-color: #00000091;
|
||||
display: none;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 90px;
|
||||
width: 160px;
|
||||
cursor: pointer;
|
||||
color: #bd2b2b;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
}
|
||||
.SingEditContent .item .imgContent:hover .opt {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: rgba(0, 165, 82, 1);
|
||||
}
|
||||
|
||||
.red {
|
||||
color: rgba(224, 52, 52, 1);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
</div>
|
||||
<div class="label">报警地点</div>
|
||||
<div class="alearmADD">
|
||||
{{ item.location }}
|
||||
{{ item.location && item.location !== '[]' ? item.location : '无' }}
|
||||
</div>
|
||||
<div v-if="item.treatmentState === 0" class="dl_bot d_fl">
|
||||
<div v-if="item.durationTime">时长:{{ item.durationTime }}</div>
|
||||
@ -131,7 +131,11 @@
|
||||
<div>{{ scope.row.deviceImei }} {{ scope.row.deviceMac }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警地点" align="center" prop="location" show-overflow-tooltip/>
|
||||
<el-table-column label="报警地点" align="center" prop="location" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.location && scope.row.location !== '[]' ? scope.row.location : '无' }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警事项" align="center" prop="deviceAction">
|
||||
<template #default="scope">
|
||||
<el-tag type="danger" v-if="scope.row.deviceAction == 0">强制报警</el-tag>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<el-form-item label="设备MAC" prop="deviceMac">
|
||||
<el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="请输入设备IMEI" prop="deviceImei">
|
||||
<el-form-item label="设备IMEI" prop="deviceImei">
|
||||
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
@ -27,6 +27,13 @@
|
||||
<el-option label="失效" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="在线状态" prop="onlineStatus">
|
||||
<el-select v-model="queryParams.onlineStatus" placeholder="在线状态" style="margin-left: 10px">
|
||||
<el-option label="在线" value="1" />
|
||||
<el-option label="离线" value="0" />
|
||||
<el-option label="故障" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||
@ -88,7 +95,7 @@
|
||||
<el-popover placement="right" trigger="click">
|
||||
<template #reference>
|
||||
<img v-if="scope.row.devicePic" :src="scope.row.devicePic"
|
||||
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
|
||||
style="width: 50px; height: 50px; cursor: pointer; object-fit: contain"
|
||||
class="hover:opacity-80 transition-opacity" />
|
||||
<img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px;">
|
||||
</template>
|
||||
@ -107,6 +114,13 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="onlineStatus" label="设备状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.onlineStatus === 1 ? 'success' : 'info'">
|
||||
{{ scope.row.onlineStatus === 1 ? '在线' : (scope.row.onlineStatus === 2 ? '故障' : '离线') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deviceStatus" label="设备状态" v-hasPermi="['equipment:devices:allocate']">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">
|
||||
@ -298,11 +312,11 @@
|
||||
<span style="color: #409eff">批量导入完成,共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据,导入成功
|
||||
<span style="color: #67c23a">{{ importResult.succeed }}</span> 条,失败
|
||||
<span style="color: red">{{ importResult.errorSun }}</span> 条。</span>
|
||||
</div>
|
||||
</el-upload>
|
||||
<p v-if="importResult.errorSun > 0" style="padding: 10px">
|
||||
<a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
|
||||
</p>
|
||||
</div>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="importDialogVisible = false">取 消</el-button>
|
||||
@ -444,7 +458,8 @@ const initData: PageData<deviceForm, deviceQuery> = {
|
||||
deviceMac: '',
|
||||
deviceImei: '',
|
||||
deviceType: '',
|
||||
deviceStatus: ''
|
||||
deviceStatus: '',
|
||||
onlineStatus:''
|
||||
},
|
||||
rules: {
|
||||
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||
@ -704,17 +719,17 @@ const httpRequestImg = (parm): Promise<any> => {
|
||||
return Promise.resolve();
|
||||
};
|
||||
const beforeUpload = (file) => {
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
//const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
|
||||
if (!isJPG) {
|
||||
ElMessage.warning('请上传jpg、png格式,大小不超过2M的照片');
|
||||
ElMessage.warning('请上传jpg、png格式');
|
||||
return false;
|
||||
}
|
||||
if (!isLt2M) {
|
||||
ElMessage.warning('大小不超过2M的照片片');
|
||||
return false;
|
||||
}
|
||||
return isJPG && isLt2M;
|
||||
// if (!isLt2M) {
|
||||
// ElMessage.warning('大小不超过2M的照片片');
|
||||
// return false;
|
||||
// }
|
||||
return isJPG;
|
||||
};
|
||||
// 文件上传状态改变时触发
|
||||
const fileUploadChange = (files, fileList) => {
|
||||
@ -917,7 +932,7 @@ const handleImportSuccess = (response: any) => {
|
||||
importResult.value.isShow = true;
|
||||
|
||||
if (response.data) {
|
||||
console.log(response.data,'response.data');
|
||||
console.log(response.data, 'response.data');
|
||||
|
||||
importResult.value.succeed = response.data.successCount;
|
||||
importResult.value.errorSun = response.data.failureCount;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="main">
|
||||
<div class="TopTool">
|
||||
<div class="button-row">
|
||||
<el-button type="primary" icon="Plus" @click.stop="ShowEdit(null, true,formRef)">新增维修</el-button>
|
||||
<el-button type="primary" icon="Plus" @click.stop="ShowEdit(null, true, formRef)">新增维修</el-button>
|
||||
<el-button type="primary" plain icon="Download" @click.stop="ExportRecord()">导出</el-button>
|
||||
<el-button type="danger" plain icon="Delete" @click.stop="DropRecord()">批量删除</el-button>
|
||||
</div>
|
||||
@ -47,7 +47,7 @@
|
||||
v-model="advanceSearch.Date"
|
||||
type="daterange"
|
||||
format="YYYY-MM-DD"
|
||||
style="width: 240px;"
|
||||
style="width: 240px"
|
||||
value-format="YYYY-MM-DD"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
@ -74,7 +74,7 @@
|
||||
<el-table-column label="操作" align="center" fixed="right" width="280" class-name="small-padding fixed-width opt">
|
||||
<template #default="scope">
|
||||
<div class="center">
|
||||
<el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, true,formRef)">编辑</el-text>
|
||||
<el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, true, formRef)">编辑</el-text>
|
||||
<el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, false)">详情</el-text>
|
||||
<el-text class="mx-1" type="danger" @click.stop="DropRecord([scope.row])">删除</el-text>
|
||||
</div>
|
||||
@ -101,8 +101,7 @@
|
||||
:draggable="true"
|
||||
>
|
||||
<div class="form">
|
||||
<el-form :model="cEdit" ref="formRef" style="max-width: 750px" :rules="rules" >
|
||||
|
||||
<el-form :model="cEdit" ref="formRef" style="max-width: 750px" :rules="rules">
|
||||
<el-form-item label="设备名称" label-position="right" prop="deviceId">
|
||||
<!-- <el-input v-model="selectedRow['deviceName']" :readonly="true" @click.stop="ShowDevice('Edit', true)" placeholder="请选择设备" /> -->
|
||||
<el-select v-model="cEdit.deviceId" placeholder="选择设备" clearable :disabled="!cEdit.isEdit" filterable>
|
||||
@ -143,6 +142,7 @@
|
||||
accept=".jpg,.jpeg,.png,.gif.webp"
|
||||
:limit="9"
|
||||
list-type="picture-card"
|
||||
:class="{ 'hide-add-btn': !cEdit.isEdit }"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus />
|
||||
@ -154,7 +154,7 @@
|
||||
<img :src="file.url" class="el-upload-list__item-thumbnail" />
|
||||
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="el-upload-list__item-actions">
|
||||
<div class="el-upload-list__item-actions" v-show="cEdit.isEdit">
|
||||
<!-- 自定义删除按钮 -->
|
||||
<span class="el-upload-list__item-delete" @click.stop="dropImg('before', file, index)">
|
||||
<el-icon>
|
||||
@ -179,6 +179,7 @@
|
||||
accept=".jpg,.jpeg,.png,.gif.webp"
|
||||
:limit="9"
|
||||
list-type="picture-card"
|
||||
:class="{ 'hide-add-btn': !cEdit.isEdit }"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus />
|
||||
@ -189,7 +190,7 @@
|
||||
<!-- 图片缩略图 -->
|
||||
<img :src="file.url" class="el-upload-list__item-thumbnail" />
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="el-upload-list__item-actions">
|
||||
<div class="el-upload-list__item-actions" v-show="cEdit.isEdit">
|
||||
<!-- 自定义删除按钮 -->
|
||||
<span class="el-upload-list__item-delete" @click.stop="dropImg('after', file, index)">
|
||||
<el-icon>
|
||||
@ -338,7 +339,6 @@
|
||||
import api from '@/api/equipmentManagement/repairRecords/index';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
|
||||
var grid = ref(null);
|
||||
var deviceGrid = ref(null);
|
||||
|
||||
@ -490,15 +490,12 @@ function DropRecord(arr = undefined) {
|
||||
() => {
|
||||
showloading('fullLoading');
|
||||
arr = arr.map((item) => item.recordId);
|
||||
api.dropRepir(arr).then(res=>{
|
||||
if(res && res.code==200){
|
||||
api.dropRepir(arr).then((res) => {
|
||||
if (res && res.code == 200) {
|
||||
Search();
|
||||
}
|
||||
alert(res.msg);
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
hideConfirm,
|
||||
'提示'
|
||||
@ -511,7 +508,7 @@ function ToggleAdvance() {
|
||||
}
|
||||
|
||||
//显示编辑
|
||||
function ShowEdit(item = undefined, isEdit = true,formEl=undefined) {
|
||||
function ShowEdit(item = undefined, isEdit = true, formEl = undefined) {
|
||||
Status.ShowEditPop = true;
|
||||
let def = {
|
||||
recordId: null, //维修记录id
|
||||
@ -590,7 +587,7 @@ function ShowEdit(item = undefined, isEdit = true,formEl=undefined) {
|
||||
return { name: v.imageId, url: v.imageUrl, id: v.imageId };
|
||||
});
|
||||
|
||||
if (!formEl) return
|
||||
if (!formEl) return;
|
||||
|
||||
formEl.validate();
|
||||
}
|
||||
@ -671,12 +668,13 @@ var dropImg = (type, file, index) => {
|
||||
//保存表单数据
|
||||
function SaveFormData(formEl: FormInstance | undefined) {
|
||||
if (!cEdit.isEdit) {
|
||||
CloseEdit();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formEl) return
|
||||
if (!formEl) return;
|
||||
|
||||
let submit=()=>{
|
||||
let submit = () => {
|
||||
showloading('fullLoading');
|
||||
setTimeout(() => {
|
||||
let promise = null;
|
||||
@ -737,14 +735,12 @@ function SaveFormData(formEl: FormInstance | undefined) {
|
||||
hideloading();
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
submit();
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//导出
|
||||
@ -1079,12 +1075,16 @@ input:focus {
|
||||
}
|
||||
|
||||
:deep .el-upload-list--picture-card .el-upload-list__item .el-upload-list__item,
|
||||
.el-upload-list--picture-card .el-upload-list__item .el-upload-list__item{
|
||||
margin:0px ;
|
||||
.el-upload-list--picture-card .el-upload-list__item .el-upload-list__item {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
// :deep .el-upload-list__item,.el-upload-list__item{
|
||||
// margin-right: 8px !important;
|
||||
// }
|
||||
|
||||
:deep .hide-add-btn .el-upload.is-disabled,
|
||||
.hide-add-btn .el-upload.is-disabled {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
<div class="treeContent">
|
||||
<el-tree :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick" :highlight-current="true">
|
||||
<el-tree :default-expand-all="true" :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick" :highlight-current="true">
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node">
|
||||
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
||||
@ -171,12 +171,17 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加节点的弹出框 -->
|
||||
<el-dialog :width="350" :draggable="true" v-model="Status.dialogEditNode" :title="cEdit.id ? '修改分组' :(cEdit.pNode?'新增子节点': '新增根节点')" center>
|
||||
<el-dialog
|
||||
:width="350"
|
||||
:draggable="true"
|
||||
v-model="Status.dialogEditNode"
|
||||
:title="cEdit.id ? '修改分组' : cEdit.pNode ? '新增子节点' : '新增根节点'"
|
||||
center
|
||||
>
|
||||
<div>
|
||||
<el-form class="demo-form-inline" :inline="true" :model="cEdit" label-width="auto" style="width: 100%">
|
||||
<el-form-item label="分组名称"> <el-input v-model="cEdit.groupName" placeholder="请输入" /> </el-form-item
|
||||
>
|
||||
<div style="text-indent: 68px;color: #f56c6c;margin-top: -15px;">{{ cEdit.groupName?'':'请输入分组名称' }}</div>
|
||||
<el-form-item label="分组名称"> <el-input v-model="cEdit.groupName" placeholder="请输入" /> </el-form-item>
|
||||
<div style="text-indent: 68px; color: #f56c6c; margin-top: -15px">{{ cEdit.groupName ? '' : '请输入分组名称' }}</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
@ -337,6 +342,7 @@ var getDeviceList = () => {
|
||||
deviceName: GjSearchForm.deviceName
|
||||
};
|
||||
showloading();
|
||||
return new Promise((resolve, reject) => {
|
||||
api
|
||||
.getNodeDevice(para)
|
||||
.then((res) => {
|
||||
@ -348,6 +354,8 @@ var getDeviceList = () => {
|
||||
})
|
||||
.finally(() => {
|
||||
hideloading();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
//树控件节点点击事件
|
||||
@ -363,6 +371,12 @@ var handleNodeClick = (node) => {
|
||||
//树控件筛选后显示的数据源
|
||||
var treeData = computed(() => {
|
||||
let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
|
||||
if (arr.length && !checkNode.val) {
|
||||
checkNode.val = arr[0].id;
|
||||
getDeviceList().finally(() => {
|
||||
checkNode.val = '';
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
});
|
||||
|
||||
@ -379,7 +393,7 @@ var editNode = (node) => {
|
||||
Status.isEditTreeNode = true;
|
||||
cEdit.value.editNode = node;
|
||||
cEdit.value.pNode = null;
|
||||
Status.dialogEditNode=true;
|
||||
Status.dialogEditNode = true;
|
||||
//
|
||||
};
|
||||
|
||||
@ -413,7 +427,7 @@ var completeEdit = (node) => {
|
||||
if (res.code == 200) {
|
||||
alert('操作成功');
|
||||
RefreshTree();
|
||||
Status.dialogEditNode=false;
|
||||
Status.dialogEditNode = false;
|
||||
} else {
|
||||
alert(res.msg);
|
||||
}
|
||||
@ -477,7 +491,7 @@ var addNode = (node) => {
|
||||
};
|
||||
|
||||
var saveNode = () => {
|
||||
if(!cEdit.value.groupName){
|
||||
if (!cEdit.value.groupName) {
|
||||
return;
|
||||
}
|
||||
let val = new Date().getTime();
|
||||
@ -917,8 +931,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.custom-tree-node .iconContent .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -3,13 +3,25 @@
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'
|
||||
import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
myChart = echarts.init(chartRef.value);
|
||||
updateChartData();
|
||||
window.addEventListener('resize', handleResize);
|
||||
};
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!myChart) return;
|
||||
getMonthlyAlarmStatistics({}).then((res) => {
|
||||
const monthlyData = res.data.monthlyStatistics || {};
|
||||
// 提取1-12月数据并转为数字
|
||||
@ -99,7 +111,7 @@ onMounted(() => {
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
color: (params: any) => {
|
||||
if (params.dataIndex === maxIndex) {
|
||||
return '#fff'; // 最大值的点标为白色
|
||||
}
|
||||
@ -107,7 +119,7 @@ onMounted(() => {
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: (params) => params.dataIndex === maxIndex,
|
||||
show: (params: any) => params.dataIndex === maxIndex,
|
||||
position: 'top',
|
||||
color: '#22E1DB',
|
||||
formatter: '{c}', // 显示当前数据值
|
||||
@ -119,14 +131,50 @@ onMounted(() => {
|
||||
|
||||
myChart.setOption(option);
|
||||
}).catch(err => {
|
||||
console.error('获取月度报警统计数据失败:', err);
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
};
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每300秒(5分钟
|
||||
dataTimer = setInterval(updateChartData, 300000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
startDataTimer();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.4vh;
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
<template>
|
||||
|
||||
<!-- 图表容器,设置宽高 -->
|
||||
<div class="vchartPage">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'; // 引入 ECharts
|
||||
const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
|
||||
const echartData = ref<any>({});
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
const props = defineProps({
|
||||
alarmOverview: {
|
||||
type: Object,
|
||||
@ -33,7 +32,7 @@ onMounted(() => {
|
||||
geoFenceAlarms
|
||||
} = echartData.value;
|
||||
// 初始化 ECharts 实例
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
myChart = echarts.init(chartRef.value);
|
||||
// 配置图表参数
|
||||
const option = {
|
||||
tooltip: {
|
||||
@ -113,28 +112,33 @@ onMounted(() => {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 将配置项设置到图表实例
|
||||
myChart.setOption(option);
|
||||
|
||||
// 窗口resize时,图表自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
window.addEventListener('resize', handleResize);
|
||||
}
|
||||
}, 200)
|
||||
},500)
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.2vh;
|
||||
margin-top: 4.8vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 23vh;
|
||||
height: 24.5vh;
|
||||
}
|
||||
</style>
|
||||
@ -3,13 +3,18 @@
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
const myChart = echarts.init(chartRef.value);
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
// 更新图表数据
|
||||
const updateChartData = () => {
|
||||
if (!myChart) return;
|
||||
|
||||
getDeviceCommunicationModeStatistics().then((res) => {
|
||||
console.log(res, '接口数据');
|
||||
@ -71,7 +76,7 @@ onMounted(() => {
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(0,166,255,1)' },
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.6)' }
|
||||
{ offset: 1, color: 'rgba(0,125,221, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
@ -87,7 +92,7 @@ onMounted(() => {
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: 'rgba(232,69,37,1)' },
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.6)' }
|
||||
{ offset: 1, color: 'rgba(240,12,12, 0.3)' }
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
@ -101,20 +106,66 @@ onMounted(() => {
|
||||
}).catch(err => {
|
||||
console.log('获取数据失败', err);
|
||||
});
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', () => {
|
||||
};
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
// 每800秒(8分钟
|
||||
dataTimer = setInterval(updateChartData, 800000);
|
||||
};
|
||||
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
myChart = echarts.init(chartRef.value);
|
||||
// 初始加载数据
|
||||
updateChartData();
|
||||
// 启动定时器
|
||||
startDataTimer();
|
||||
// 窗口 resize 时自适应
|
||||
window.addEventListener('resize', handleResize);
|
||||
};
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 清除定时器
|
||||
clearDataTimer();
|
||||
// 移除事件监听
|
||||
window.removeEventListener('resize', handleResize);
|
||||
// 销毁图表实例
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.8vh;
|
||||
margin-top: 5.8vh;
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 22vh;
|
||||
height: 23.5vh;
|
||||
}
|
||||
</style>
|
||||
@ -3,20 +3,20 @@
|
||||
<div class="deviceOvery">
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.totalDevices || '0'}} <span>个</span></div>
|
||||
<div class="deviceNum">{{ DataOverview.totalDevices || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备总数</div>
|
||||
</div>
|
||||
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.onlineDevices || '0'}} <span>个</span></div>
|
||||
<div class="deviceNum">{{ DataOverview.onlineDevices || '0' }} <span>个</span></div>
|
||||
</div>
|
||||
<div class="deviceText">在线数量</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<div class="deviceIMG">
|
||||
<div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
|
||||
<div class="deviceNum">{{ DataOverview.deviceTypes || '0' }} <span>种</span></div>
|
||||
</div>
|
||||
<div class="deviceText">设备型号</div>
|
||||
</div>
|
||||
@ -26,15 +26,24 @@
|
||||
<script setup lang="ts">
|
||||
import { getDeviceOverview } from '@/api/homeIndex'
|
||||
const DataOverview = ref<any>({})
|
||||
onMounted(() => {
|
||||
const getData = () => {
|
||||
getDeviceOverview({}).then((res) => {
|
||||
if (res.code==200) {
|
||||
if (res.code == 200) {
|
||||
DataOverview.value = res.data
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getData();
|
||||
})
|
||||
|
||||
const timerAlarm = setInterval(() => {
|
||||
getData();
|
||||
}, 300000);
|
||||
onUnmounted(() => {
|
||||
clearInterval(timerAlarm);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.deviceOvery {
|
||||
@ -44,7 +53,7 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
margin-top: 7.5vh;
|
||||
text-align: center;
|
||||
font-size:0.7vw;
|
||||
font-size: 0.7vw;
|
||||
color: #DEEFFF;
|
||||
padding: 1.5vw;
|
||||
}
|
||||
@ -57,11 +66,12 @@ onMounted(() => {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.deviceText{
|
||||
|
||||
.deviceText {
|
||||
padding-top: 1.5vh;
|
||||
}
|
||||
|
||||
.deviceNum{
|
||||
.deviceNum {
|
||||
line-height: 12vh;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@ -75,7 +85,8 @@ onMounted(() => {
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
}
|
||||
.deviceNum span{
|
||||
|
||||
.deviceNum span {
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
</style>
|
||||
@ -4,27 +4,57 @@
|
||||
<div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
|
||||
<div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
|
||||
</div>
|
||||
|
||||
<div ref="chartContainerRef" class="chartContainer" :class="{ 'show-scroll': showScroll }">
|
||||
<div ref="chartRef" class="chartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
|
||||
|
||||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
const chartContainerRef = ref<HTMLDivElement | null>(null);
|
||||
const activeTab = ref('month');
|
||||
let myChart: echarts.ECharts | null = null; // 保存图表实例
|
||||
const showScroll = ref(false); // 控制是否显示滚动条
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
let dataTimer: NodeJS.Timeout | null = null;
|
||||
|
||||
// 根据天数获取数据并更新图表
|
||||
const fetchDataAndUpdate = (days: number) => {
|
||||
getDeviceUsageFrequency({ days }).then((res) => {
|
||||
if (res.code === 200 && res.data && myChart) {
|
||||
// 处理接口返回的真实数据(转换为图表所需格式)
|
||||
// 模拟数据(根据需求调整数量)
|
||||
const dataCount = activeTab.value === 'month' ? 8 : 25; // 一月8条,半年25条
|
||||
const mockData = Array.from({ length: dataCount }, (_, index) => ({
|
||||
deviceName: `设备${index + 1}`,
|
||||
frequency: Math.floor(Math.random() * 100)
|
||||
}));
|
||||
const chartData = res.data.map(item => ({
|
||||
name: item.deviceName,
|
||||
value: item.frequency
|
||||
}));
|
||||
const scrollThreshold = 20;
|
||||
showScroll.value = chartData.length > scrollThreshold;
|
||||
|
||||
// 动态计算图表高度
|
||||
const baseItemHeight = 20;
|
||||
const minHeight = 200;
|
||||
const maxHeight = 600;
|
||||
|
||||
let chartHeight;
|
||||
if (showScroll.value) {
|
||||
|
||||
chartHeight = Math.min(chartData.length * baseItemHeight, maxHeight);
|
||||
} else {
|
||||
chartHeight = Math.max(chartData.length * baseItemHeight, minHeight);
|
||||
}
|
||||
|
||||
if (chartRef.value) {
|
||||
chartRef.value.style.height = `${chartHeight}px`;
|
||||
}
|
||||
|
||||
// 更新图表
|
||||
myChart.setOption({
|
||||
yAxis: {
|
||||
@ -34,41 +64,72 @@ const fetchDataAndUpdate = (days: number) => {
|
||||
data: chartData.map(item => item.value)
|
||||
}]
|
||||
});
|
||||
|
||||
// 数据更新后,重新调整图表尺寸
|
||||
setTimeout(() => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('获取数据失败', err);
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
// 切换标签逻辑
|
||||
const switchTab = (tab: string) => {
|
||||
activeTab.value = tab;
|
||||
// 根据标签切换天数(近半月=15天,近半年=180天,按实际需求调整)
|
||||
const days = tab === 'month' ? 30 : 180;
|
||||
fetchDataAndUpdate(days);
|
||||
startDataTimer();
|
||||
|
||||
// 重置滚动位置
|
||||
if (chartContainerRef.value) {
|
||||
chartContainerRef.value.scrollTop = 10;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
// 初始化图表实例
|
||||
myChart = echarts.init(chartRef.value);
|
||||
// 开始数据定时器
|
||||
const startDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
}
|
||||
dataTimer = setInterval(() => {
|
||||
const days = activeTab.value === 'month' ? 30 : 180;
|
||||
fetchDataAndUpdate(days);
|
||||
}, 300000);
|
||||
};
|
||||
|
||||
// 初始图表配置(空数据占位)
|
||||
// 清除数据定时器
|
||||
const clearDataTimer = () => {
|
||||
if (dataTimer) {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
myChart = echarts.init(chartRef.value);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
|
||||
axisPointer: { type: 'shadow' }
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '10%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
right: '5%',
|
||||
bottom: '2%',
|
||||
top: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: [], // 初始空数据
|
||||
inverse: true,
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a8a',
|
||||
@ -76,26 +137,37 @@ onMounted(() => {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#DEEFFF'
|
||||
color: '#DEEFFF',
|
||||
fontSize: 12
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
splitLine: { show: false }
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(30, 58, 138, 0.3)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '使用频次',
|
||||
type: 'bar',
|
||||
data: [], // 初始空数据
|
||||
barWidth: '14px',
|
||||
data: [],
|
||||
barWidth: '12px',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
valueAnimation: true,
|
||||
color: '#DEEFFF'
|
||||
color: '#DEEFFF',
|
||||
fontSize: 11
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
@ -106,23 +178,44 @@ onMounted(() => {
|
||||
]
|
||||
),
|
||||
borderRadius: 4
|
||||
}
|
||||
},
|
||||
barGap: '30%',
|
||||
barCategoryGap: '40%'
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
fetchDataAndUpdate(30);
|
||||
// 窗口resize自适应
|
||||
window.addEventListener('resize', () => {
|
||||
myChart?.resize();
|
||||
});
|
||||
startDataTimer();
|
||||
};
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart) {
|
||||
myChart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearDataTimer();
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (myChart) {
|
||||
myChart.dispose();
|
||||
myChart = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vchartPage {
|
||||
margin-top: 7.8vh;
|
||||
position: relative; // 新增:确保按钮定位正确
|
||||
margin-top: 4.9vh;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn_mounth_box {
|
||||
@ -134,8 +227,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.btn_mounth {
|
||||
width:4.5vw;
|
||||
height:4.5vh;
|
||||
width: 4.5vw;
|
||||
height: 4.5vh;
|
||||
background: url(@/assets/homeIndex/btn.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
@ -143,7 +236,7 @@ onMounted(() => {
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
cursor: pointer;
|
||||
margin-left: 0.5vw; // 新增:按钮间距
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
|
||||
.cur {
|
||||
@ -151,8 +244,49 @@ onMounted(() => {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
// margin-top: 2vh;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 当需要显示滚动条时的样式
|
||||
&.show-scroll {
|
||||
height: 24vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(7, 104, 212, 0.8);
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(7, 104, 212, 1);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: rgba(30, 58, 138, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track:hover {
|
||||
background-color: rgba(30, 58, 138, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chartRef {
|
||||
width: 100%;
|
||||
height: 22vh;
|
||||
min-height: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@ -7,13 +7,20 @@
|
||||
<div class="vertiLine"></div>
|
||||
<div class="input" @click.stop="showCheck('showCheckGroup')">
|
||||
<div>{{ groupName }}</div>
|
||||
<div>
|
||||
<div class="iconContent">
|
||||
<div class="arrow">
|
||||
<el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
|
||||
<el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
|
||||
</div>
|
||||
<div class="clear" @click.stop="search.groupId = ''">
|
||||
<el-icon><CloseBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul" :class="Status.showCheckGroup ? '' : 'displayNone'">
|
||||
<div class="li" @click.stop="checkItem(item, 'groupId')"
|
||||
<div
|
||||
class="li"
|
||||
@click.stop="checkItem(item, 'groupId')"
|
||||
:class="item.value === search.groupId ? 'active' : ''"
|
||||
v-for="item in groups"
|
||||
:style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
|
||||
@ -23,15 +30,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-item">
|
||||
<div class="vertiLine"></div>
|
||||
<div class="input" @click.stop="showCheck('showCheckType')">
|
||||
<div>{{ devType }}</div>
|
||||
<div>
|
||||
<el-icon v-show="!Status.showCheckType"><CaretTop /></el-icon>
|
||||
<el-icon v-show="Status.showCheckType"><CaretBottom /></el-icon>
|
||||
|
||||
<div class="iconContent">
|
||||
<div class="arrow">
|
||||
<el-icon v-show="!Status.showCheckType"><CaretBottom /></el-icon>
|
||||
<el-icon v-show="Status.showCheckType"><CaretTop /></el-icon>
|
||||
</div>
|
||||
<div class="clear" @click.stop="search.deviceType = ''">
|
||||
<el-icon><CloseBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul" :class="Status.showCheckType ? '' : 'displayNone'">
|
||||
@ -300,17 +311,19 @@ function getPoints() {
|
||||
method: 'get'
|
||||
});
|
||||
|
||||
let fakeData = getFakeData();
|
||||
// let fakeData = getFakeData();
|
||||
promise
|
||||
.then((res) => {
|
||||
map.clearOverLays();
|
||||
if (res) {
|
||||
if (res.code && res.code == 200) {
|
||||
var array = res.data;
|
||||
if (!array.length) {
|
||||
ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
|
||||
array = fakeData;
|
||||
}
|
||||
// if (!array.length) {
|
||||
// // ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
|
||||
// // array = fakeData;
|
||||
// // return;
|
||||
// }
|
||||
let promise = [];
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let v = array[i];
|
||||
|
||||
@ -332,21 +345,22 @@ function getPoints() {
|
||||
}
|
||||
points.value.push(json);
|
||||
|
||||
map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint);
|
||||
promise.push(map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint));
|
||||
}
|
||||
|
||||
if (fens.value && fens.value.length > 0) {
|
||||
for (let i = 0; i < fens.value.length; i++) {
|
||||
let f = fens.value[i];
|
||||
if (f.areaType === 0) {
|
||||
map.DrawPoy(f);
|
||||
promise.push(map.DrawPoy(f));
|
||||
} else {
|
||||
map.DrawCicle(f, f.radius, null);
|
||||
promise.push(map.DrawCicle(f, f.radius, null));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Promise.allSettled(promise).then((res) => {
|
||||
map.setFitView();
|
||||
});
|
||||
} else {
|
||||
console.error('接口getDeviceLocationInfo出现了未知的异常', res);
|
||||
}
|
||||
@ -371,7 +385,7 @@ function getTypes() {
|
||||
if (res.data.length) {
|
||||
types.value = res.data.map((v) => {
|
||||
return {
|
||||
value: v.id,
|
||||
value: v.deviceTypeId,
|
||||
label: v.typeName
|
||||
};
|
||||
});
|
||||
@ -434,26 +448,22 @@ function getGroups() {
|
||||
level: v.level
|
||||
};
|
||||
});
|
||||
} else
|
||||
|
||||
{
|
||||
let array=[];
|
||||
} else {
|
||||
let array = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
array.push({
|
||||
value: i,
|
||||
label: '假数据' + (i + 1),
|
||||
level:i%3+1
|
||||
level: (i % 3) + 1
|
||||
});
|
||||
}
|
||||
|
||||
groups.value=array;
|
||||
groups.value = array;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function checkItem(item, type) {
|
||||
if (search.value[type] === item.value) {
|
||||
return;
|
||||
@ -464,7 +474,6 @@ function checkItem(item, type) {
|
||||
}
|
||||
|
||||
var groupName = computed(() => {
|
||||
|
||||
if (search.value.groupId) {
|
||||
let f = groups.value.find((v) => {
|
||||
return v.value === search.value.groupId;
|
||||
@ -478,7 +487,6 @@ var groupName = computed(() => {
|
||||
});
|
||||
|
||||
var devType = computed(() => {
|
||||
|
||||
if (search.value.deviceType) {
|
||||
let f = types.value.find((v) => {
|
||||
return v.value === search.value.deviceType;
|
||||
@ -497,9 +505,9 @@ function hideCheck() {
|
||||
}
|
||||
|
||||
function showCheck(type) {
|
||||
if(type=='showCheckGroup'){
|
||||
if (type == 'showCheckGroup') {
|
||||
Status.showCheckType = false;
|
||||
}else{
|
||||
} else {
|
||||
Status.showCheckGroup = false;
|
||||
}
|
||||
Status[type] = !Status[type];
|
||||
@ -508,6 +516,7 @@ function showCheck(type) {
|
||||
onMounted(() => {
|
||||
map.initMap(hideCheck).then((res) => {
|
||||
getPoints();
|
||||
setInterval(getPoints, 300000);
|
||||
});
|
||||
|
||||
getTypes();
|
||||
@ -520,6 +529,10 @@ onMounted(() => {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.el-icon {
|
||||
color: #007eff;
|
||||
font-size: 1vw;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
@ -545,19 +558,19 @@ onMounted(() => {
|
||||
|
||||
.topTool .form-item {
|
||||
width: calc(calc(100% - 160px) / 3);
|
||||
height: 45px;
|
||||
height: 5vh;
|
||||
border: none;
|
||||
}
|
||||
:deep .el-select__wrapper,
|
||||
:deep .el-input__wrapper {
|
||||
border: none;
|
||||
height: 45px;
|
||||
height: 7vh;
|
||||
}
|
||||
|
||||
:deep .el-select__wrapper,
|
||||
:deep .el-input__wrapper,
|
||||
.topTool .form-item {
|
||||
background: linear-gradient(to bottom, #007eff59 0%, /* 顶部红色 */ #00efed59 50%, /* 中间蓝色 */ #1d5df459 100% /* 底部红色 */);
|
||||
background: url(@/assets/homeIndex/select.png) no-repeat;
|
||||
}
|
||||
.topTool .form {
|
||||
width: 43%;
|
||||
@ -605,7 +618,7 @@ onMounted(() => {
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 10px;
|
||||
line-height: 45px;
|
||||
line-height: 4.5vh;
|
||||
outline: none;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 15px;
|
||||
@ -616,13 +629,14 @@ onMounted(() => {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
.topTool .form-item input::placeholder {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 15px;
|
||||
color: #deefff;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.topTool .form-item input:focus {
|
||||
outline: none;
|
||||
@ -632,7 +646,7 @@ onMounted(() => {
|
||||
.topTool .form-item .vertiLine {
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
|
||||
// background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
|
||||
}
|
||||
|
||||
.topTool .form-item .ul {
|
||||
@ -672,4 +686,16 @@ onMounted(() => {
|
||||
.displayNone {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.iconContent:hover .arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconContent .clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconContent:hover .clear {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,56 +7,175 @@
|
||||
<div class="header-item">报警事件</div>
|
||||
<div class="header-item">报警位置</div>
|
||||
</div>
|
||||
<div class="alarm-table-body" ref="tableBody"
|
||||
:style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
|
||||
<div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
|
||||
<div class="alarm-table-body">
|
||||
<div ref="tableBody" class="alarm-table-body-inner">
|
||||
<div v-for="(item, index) in displayData" :key="`first-${getKey(item, index)}`" class="alarm-item">
|
||||
<div class="item-cell">{{ item.startTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceTypeName }}</div>
|
||||
<div class="item-cell">{{ item.deviceImei }}</div>
|
||||
<div class="item-cell alarm-event">
|
||||
{{ {
|
||||
0: '强制报警',
|
||||
1: '撞击闯入',
|
||||
2: '自动报警',
|
||||
3: '电子围栏告警'
|
||||
}[item.deviceAction]}}
|
||||
|
||||
{{ getEventName(item.deviceAction) }}
|
||||
</div>
|
||||
<div class="item-cell loaction"> {{ item.location && item.location !== '[]' ? item.location : '无' }}</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in displayData" :key="`second-${getKey(item, index)}`" class="alarm-item">
|
||||
<div class="item-cell">{{ item.startTime }}</div>
|
||||
<div class="item-cell">{{ item.deviceTypeName }}</div>
|
||||
<div class="item-cell">{{ item.deviceImei }}</div>
|
||||
<div class="item-cell alarm-event">
|
||||
{{ getEventName(item.deviceAction) }}
|
||||
</div>
|
||||
<div class="item-cell loaction"> {{ item.location && item.location !== '[]' ? item.location : '无' }}</div>
|
||||
</div>
|
||||
<div class="item-cell">{{ item.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getRealtimeAlarm } from '@/api/homeIndex/index';
|
||||
|
||||
// 模拟报警数据
|
||||
const alarmData = ref([
|
||||
]);
|
||||
let alarmTimer = null;
|
||||
const alarmData = ref([]);
|
||||
const displayData = ref([]); // 显示的数据(复制一份用于无缝滚动)
|
||||
const tableBody = ref(null);
|
||||
const isScrolling = ref(true);
|
||||
const animationId = ref(null);
|
||||
const scrollPosition = ref(0);
|
||||
const itemHeight = ref(0); // 动态计算每个条目的高度
|
||||
|
||||
// 获取报警事件名称
|
||||
const getEventName = (action) => {
|
||||
const eventMap = {
|
||||
0: '强制报警',
|
||||
1: '撞击闯入',
|
||||
2: '自动报警',
|
||||
3: '电子围栏告警'
|
||||
};
|
||||
return eventMap[action] || '未知报警';
|
||||
};
|
||||
|
||||
// 获取实时报警数据
|
||||
const getRealtimeAlarmData = () => {
|
||||
getRealtimeAlarm().then((res) => {
|
||||
alarmData.value = res.data;
|
||||
});
|
||||
}
|
||||
if (res.data && res.data.length > 0) {
|
||||
// 新数据插入到最前面
|
||||
alarmData.value = [...res.data, ...alarmData.value];
|
||||
|
||||
const tableBody = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
getRealtimeAlarmData()
|
||||
// 启动滚动动画
|
||||
// 限制数据量,避免性能问题
|
||||
if (alarmData.value.length > 10) {
|
||||
alarmData.value = alarmData.value.slice(0, 10);
|
||||
}
|
||||
// 更新显示数据
|
||||
updateDisplayData();
|
||||
// 新数据插入时重置滚动位置
|
||||
scrollPosition.value = 0;
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.animationName = 'scroll';
|
||||
tableBody.value.style.animationIterationCount = 'infinite';
|
||||
tableBody.value.style.transform = `translateY(0)`;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 更新显示数据(复制一份用于无缝滚动)
|
||||
const updateDisplayData = () => {
|
||||
displayData.value = [...alarmData.value];
|
||||
// 计算每个条目的实际高度
|
||||
nextTick(() => {
|
||||
const items = document.querySelectorAll('.alarm-item');
|
||||
if (items.length > 0) {
|
||||
itemHeight.value = items[0].offsetHeight;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 生成唯一的key
|
||||
const getKey = (item, index) => {
|
||||
return `${item.deviceImei}_${item.startTime}_${index}`;
|
||||
};
|
||||
|
||||
// 开始滚动动画
|
||||
const startScroll = () => {
|
||||
if (!tableBody.value || displayData.value.length === 0) return;
|
||||
stopScroll(); // 先停止之前的动画
|
||||
const scrollSpeed = 0.3; // 滚动速度
|
||||
const animate = () => {
|
||||
if (!isScrolling.value) {
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
return;
|
||||
}
|
||||
|
||||
scrollPosition.value += scrollSpeed;
|
||||
|
||||
// 当滚动超过一份数据的高度时,减去整段高度,实现无缝衔接
|
||||
const oneListHeight = itemHeight.value * displayData.value.length;
|
||||
if (itemHeight.value > 0 && scrollPosition.value >= oneListHeight) {
|
||||
scrollPosition.value -= oneListHeight;
|
||||
}
|
||||
|
||||
// 应用滚动效果
|
||||
if (tableBody.value) {
|
||||
tableBody.value.style.transform = `translateY(-${scrollPosition.value}px)`;
|
||||
}
|
||||
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animationId.value = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
// 停止滚动动画
|
||||
const stopScroll = () => {
|
||||
if (animationId.value) {
|
||||
cancelAnimationFrame(animationId.value);
|
||||
animationId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始报警定时器
|
||||
const startAlarmTimer = () => {
|
||||
if (alarmTimer) {
|
||||
clearInterval(alarmTimer);
|
||||
}
|
||||
getRealtimeAlarmData();
|
||||
alarmTimer = setInterval(getRealtimeAlarmData, 30 * 10000);
|
||||
};
|
||||
|
||||
// 清除报警定时器
|
||||
const clearAlarmTimer = () => {
|
||||
if (alarmTimer) {
|
||||
clearInterval(alarmTimer);
|
||||
alarmTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听数据变化
|
||||
watch(displayData, (newData) => {
|
||||
if (newData.length > 0) {
|
||||
// 延迟一点确保DOM已更新
|
||||
setTimeout(() => {
|
||||
startScroll();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
startAlarmTimer();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearAlarmTimer();
|
||||
stopScroll();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.alarm-table-container {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 4vh;
|
||||
padding: 1.5vw;
|
||||
padding: 1vw 0vw;
|
||||
}
|
||||
|
||||
.alarm-table-header {
|
||||
@ -64,6 +183,7 @@ onMounted(() => {
|
||||
color: #00C0FF;
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 0.8vw;
|
||||
background-color: #0C2644;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
@ -74,9 +194,16 @@ onMounted(() => {
|
||||
|
||||
.alarm-table-body {
|
||||
height: 18vh;
|
||||
/* 可根据需求调整高度 */
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.alarm-table-body-inner {
|
||||
transition: none;
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.alarm-item {
|
||||
@ -84,7 +211,9 @@ onMounted(() => {
|
||||
border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
|
||||
font-size: 0.6vw;
|
||||
align-items: center;
|
||||
padding: 0.5vw;
|
||||
padding: 0.8vw;
|
||||
height: 7vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-cell {
|
||||
@ -94,17 +223,15 @@ onMounted(() => {
|
||||
|
||||
.alarm-event {
|
||||
color: #ff5252;
|
||||
/* 报警事件红色显示 */
|
||||
}
|
||||
|
||||
/* 滚动动画 */
|
||||
@keyframes scroll {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* 隐藏滚动条 */
|
||||
.alarm-table-body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.alarm-table-body {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
@ -21,21 +21,21 @@
|
||||
<div class="left">
|
||||
<div class="left-modules">
|
||||
<div class="module-card overview-card">
|
||||
<div class="module-header">设备总览</div>
|
||||
<!-- <div class="module-header">设备总览</div> -->
|
||||
<div class="module-content">
|
||||
<DeviceOverview />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">设备类别</div>
|
||||
<!-- <div class="module-header">设备类别</div> -->
|
||||
<div class="module-content">
|
||||
<DeviceCategory />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">设备使用频次</div>
|
||||
<!-- <div class="module-header">设备使用频次</div> -->
|
||||
<div class="module-content">
|
||||
<DeviceUsage />
|
||||
</div>
|
||||
@ -48,21 +48,21 @@
|
||||
|
||||
<div class="right-modules">
|
||||
<div class="module-card alarm-card">
|
||||
<div class="module-header">报警数据</div>
|
||||
<!-- <div class="module-header">报警数据</div> -->
|
||||
<div class="module-content">
|
||||
<AlarmOverview :alarmOverview="alarmOverview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警事件</div>
|
||||
<!-- <div class="module-header">报警事件</div> -->
|
||||
<div class="module-content">
|
||||
<AlarmEvent :alarmOverview="alarmOverview" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="module-card">
|
||||
<div class="module-header">报警次数</div>
|
||||
<!-- <div class="module-header">报警次数</div> -->
|
||||
<div class="module-content">
|
||||
<AlarmCount />
|
||||
</div>
|
||||
@ -74,7 +74,7 @@
|
||||
<div class="bottom">
|
||||
<div class="bottom-middle-module">
|
||||
<div class="module-card realtime-card">
|
||||
<div class="module-header realtime-header">实时报警信息</div>
|
||||
<!-- <div class="module-header realtime-header">实时报警信息</div> -->
|
||||
<div class="module-content">
|
||||
<RealTimeAlarm />
|
||||
</div>
|
||||
@ -105,6 +105,7 @@ const timer = setInterval(() => {
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
clearInterval(timerAlarm);
|
||||
});
|
||||
|
||||
// 格式化时间
|
||||
@ -119,6 +120,11 @@ const getData = async () => {
|
||||
alarmOverview.value = res.data
|
||||
}
|
||||
}
|
||||
|
||||
const timerAlarm = setInterval(() => {
|
||||
getData();
|
||||
}, 300000);
|
||||
|
||||
getData()
|
||||
onMounted(() => {
|
||||
|
||||
@ -137,7 +143,7 @@ onMounted(() => {
|
||||
|
||||
.top-fixed {
|
||||
width: 100%;
|
||||
height: 13vh;
|
||||
height: 7vh;
|
||||
background: url(@/assets/homeIndex/top.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 11;
|
||||
@ -194,19 +200,22 @@ onMounted(() => {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30vw;
|
||||
width: 35vw;
|
||||
height: 100vh;
|
||||
background: url(@/assets/homeIndex/left.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30vw;
|
||||
width: 35vw;
|
||||
height: 100vh;
|
||||
background: url(@/assets/homeIndex/right.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
/* 左侧模块组 */
|
||||
.left-modules {
|
||||
position: absolute;
|
||||
@ -215,7 +224,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 27.2vw;
|
||||
height: calc(100vh - 9vh);
|
||||
height: calc(100vh - 8vh);
|
||||
pointer-events: auto;
|
||||
|
||||
}
|
||||
@ -228,26 +237,36 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 27.2vw;
|
||||
height: calc(100vh - 9vh);
|
||||
height: calc(100vh - 8vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 底部中间模块 */
|
||||
.bottom-middle-module {
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0.4vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 44vw;
|
||||
height: calc(39vh - 9vh);
|
||||
height: calc(40vh - 7vh);
|
||||
pointer-events: auto;
|
||||
background: url(@/assets/homeIndex/bottom.png) no-repeat;
|
||||
background: url(/src/assets/homeIndex/bottom.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 底部中间模块 */
|
||||
.bottom-middle-module {
|
||||
position: absolute;
|
||||
bottom: 0.1vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 44vw;
|
||||
height: calc(40vh - 10.5vh);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 模块卡片样式 */
|
||||
.module-card {
|
||||
background: url(@/assets/homeIndex/card.png) no-repeat;
|
||||
/* background: url(@/assets/homeIndex/card.png) no-repeat; */
|
||||
position: relative;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
@ -257,24 +276,66 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 1vh;
|
||||
}
|
||||
|
||||
.left-modules .module-card:nth-of-type(1) {
|
||||
background: url(@/assets/homeIndex/card1.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left-modules .module-card:nth-of-type(2) {
|
||||
background: url(@/assets/homeIndex/card2.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left-modules .module-card:nth-of-type(3) {
|
||||
background: url(@/assets/homeIndex/card3.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-modules .module-card:nth-of-type(1) {
|
||||
background: url(@/assets/homeIndex/card4.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-modules .module-card:nth-of-type(2) {
|
||||
background: url(@/assets/homeIndex/card5.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.right-modules .module-card:nth-of-type(3) {
|
||||
background: url(@/assets/homeIndex/card6.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.bottom-middle-module .module-card:nth-of-type(1) {
|
||||
background: url(@/assets/homeIndex/card7.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* 模块标题 */
|
||||
.module-header {
|
||||
position: absolute;
|
||||
font-size: 1.6vh;
|
||||
color: #fff;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
left: 5vh;
|
||||
top: 3.2vh;
|
||||
left: 4.8vh;
|
||||
top: 1.5vh;
|
||||
font-family: SourceHanSansCN, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
/* font-size: 18px; */
|
||||
color: #F2F8FF;
|
||||
|
||||
text-shadow: 3px 0px 6px rgba(3, 33, 42, 0.5);
|
||||
|
||||
}
|
||||
|
||||
.realtime-header {
|
||||
left: 8vh;
|
||||
top: 3.4vh;
|
||||
left: 7.5vh;
|
||||
top: 1.5vh;
|
||||
}
|
||||
|
||||
/* 模块内容 */
|
||||
|
||||
@ -369,7 +369,7 @@ const initAlarmBarChart = () => {
|
||||
const alarmTypeMap = [
|
||||
{ name: '强制报警', field: 'alarmForced' }, // alarmForced
|
||||
{ name: '撞击闯入', field: 'intrusionImpact' }, // intrusionImpact
|
||||
{ name: '自动报警', field: 'alarmManual' }, // alarmManual
|
||||
{ name: '自动报警', field: 'alarmAuto' }, // alarmAuto
|
||||
{ name: '电子围栏', field: 'fenceElectronic' } // fenceElectronic
|
||||
];
|
||||
|
||||
|
||||
@ -13,13 +13,13 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off"
|
||||
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" name="random-username-field"
|
||||
placeholder="账号">
|
||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off"
|
||||
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" name="random-password-field"
|
||||
placeholder="密码" @keyup.enter="handleLogin">
|
||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||
</el-input>
|
||||
@ -61,9 +61,9 @@ const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
||||
const loginForm = ref<LoginData>({
|
||||
tenantId: '000000',
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
tenantId: '',
|
||||
username: '',
|
||||
password: '',
|
||||
rememberMe: false,
|
||||
code: '',
|
||||
uuid: ''
|
||||
|
||||
@ -43,9 +43,9 @@
|
||||
删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
|
||||
</el-col>
|
||||
|
||||
@ -48,9 +48,9 @@
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['system:role:delete']" type="danger" plain :disabled="ids.length === 0" @click="handleDelete()">删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<!-- <el-col :span="1.5">
|
||||
<el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -84,7 +84,7 @@
|
||||
<el-button v-hasPermi="['system:role:edit']" link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.roleId !== 1" content="分配用户" placement="top">
|
||||
<el-button v-hasPermi="['system:role:edit']" link type="primary" icon="User" @click="handleAuthUser(scope.row)"></el-button>
|
||||
<el-button v-hasPermi="['system:role:edit']" link type="primary" icon="User" @click=" (scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
6
src/views/system/user/profile/appVer.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>敬请期待</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
@ -61,6 +61,7 @@
|
||||
<el-tab-pane label="在线设备" name="onlineDevice">
|
||||
<onlineDevice :devices="state.devices" />
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
@ -78,7 +79,7 @@ import { getAuthList } from '@/api/system/social/auth';
|
||||
import { getUserProfile } from '@/api/system/user';
|
||||
import { getOnline } from '@/api/monitor/online';
|
||||
import { UserVO } from '@/api/system/user/types';
|
||||
|
||||
import appVer from './appVer.vue';
|
||||
const activeTab = ref('userinfo');
|
||||
interface State {
|
||||
user: Partial<UserVO>;
|
||||
@ -86,13 +87,15 @@ interface State {
|
||||
postGroup: string;
|
||||
auths: any;
|
||||
devices: any;
|
||||
vers: any;
|
||||
}
|
||||
const state = ref<State>({
|
||||
user: {},
|
||||
roleGroup: '',
|
||||
postGroup: '',
|
||||
auths: [],
|
||||
devices: []
|
||||
devices: [],
|
||||
vers: ''
|
||||
});
|
||||
|
||||
const userForm = ref({});
|
||||
|
||||