fix/环境配置

This commit is contained in:
季万俊 2025-10-17 17:01:58 +08:00
parent 1f77b00c58
commit 8a605b91fc
19 changed files with 349 additions and 169 deletions

24
.env.development Normal file
View File

@ -0,0 +1,24 @@
###
# @Author: 季万俊
# @Date: 2025-09-04 19:58:43
# @Description:
###
# 页面标题
VUE_APP_TITLE = 十堰运维
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
VITE_APP_BASE_API = '/'
# VITE_APP_BASE_API = '/dev-api'
# VUE_APP_CONTROL_BASE_API = '/control-api'
VITE_VUE_APP_CONTROL_BASE_API = 'http://172.16.1.253:12310/api'
VITE_VUE_APP_SERVER_BASE_API = '/control-api/Server'
#VUE_APP_MONITOR_URL='http://172.16.1.147:8083/cn/demo.html'
VITE_VUE_APP_MONITOR_URL='http://172.16.1.138:8666/cn/camera.html'
VITE_VUE_LOGIN_USERNAME = 'admin'
VITE_VUE_LOGIN_PASSWORD = 'admin123'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

23
.env.production Normal file
View File

@ -0,0 +1,23 @@
###
# @Author: 季万俊
# @Date: 2025-09-04 19:58:43
# @Description:
###
# 页面标题
VUE_APP_TITLE = 十堰运维
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'
# VUE_APP_CONTROL_BASE_API = '/control-api'
VITE_VUE_APP_CONTROL_BASE_API = 'http://172.16.1.253:12310/api'
VITE_VUE_APP_SERVER_BASE_API = '/control-api/Server'
#VUE_APP_MONITOR_URL='http://172.16.1.147:8083/cn/demo.html'
VITE_VUE_APP_MONITOR_URL='http://172.16.1.138:8666/cn/camera.html'
VITE_VUE_LOGIN_USERNAME = 'admin'
VITE_VUE_LOGIN_PASSWORD = 'admin123'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

23
.env.staging Normal file
View File

@ -0,0 +1,23 @@
###
# @Author: 季万俊
# @Date: 2025-09-04 19:58:43
# @Description:
###
# 页面标题
VUE_APP_TITLE = 十堰运维
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'
# VUE_APP_CONTROL_BASE_API = '/control-api'
VITE_VUE_APP_CONTROL_BASE_API = 'http://172.16.1.253:12310/api'
VITE_VUE_APP_SERVER_BASE_API = '/control-api/Server'
#VUE_APP_MONITOR_URL='http://172.16.1.147:8083/cn/demo.html'
VITE_VUE_APP_MONITOR_URL='http://172.16.1.138:8666/cn/camera.html'
VITE_VUE_LOGIN_USERNAME = 'admin'
VITE_VUE_LOGIN_PASSWORD = 'admin123'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@ -1,3 +1,8 @@
<!--
* @Author: 季万俊
* @Date: 2025-09-26 11:23:42
* @Description:
-->
<template>
<section class="app-main">
<router-view v-slot="{ Component, route }">
@ -38,10 +43,10 @@ function addIframe() {
<style lang="scss" scoped>
.app-main {
/* 50= navbar 50 */
min-height: calc(100vh - 50px);
height: calc(100vh - 84px);
width: 100%;
position: relative;
overflow: hidden;
overflow-y: auto;
}
.fixed-header + .app-main {

View File

@ -234,7 +234,7 @@ export const constantRoutes = [
},
]
},
{
{
name: "linkConfig",
alwaysShow: true,
component: Layout,
@ -504,6 +504,31 @@ export const constantRoutes = [
title: "角色管理",
},
},
{
component: () => import('@/views/system/dict/index'),
hidden: false,
name: "dict",
path: "dict",
meta: {
icon: "dict",
link: null,
noCache: false,
title: "字典管理",
},
},
// {
// component: () => import('@/views/system/menu/index'),
// hidden: false,
// name: "menu",
// path: "menu",
// meta: {
// icon: "menu",
// link: null,
// noCache: false,
// title: "菜单管理",
// },
// },
{
component: () => import('@/views/system/log/index'),
hidden: false,

View File

@ -59,7 +59,7 @@ export const useUserStore = defineStore('user', {
const avatar =
user.avatar == "" || user.avatar == null
? require("@/assets/images/profile.jpg")
: process.env.VITE_VUE_APP_BASE_API + user.avatar
: process.env.VITE_VITE_VUE_APP_BASE_API + user.avatar
if (res.roles && res.roles.length > 0) {
console.log("获取用户信息")
// 验证返回的roles是否是一个非空数组

View File

@ -19,8 +19,10 @@ export function useDict(...args) {
// res.value[dictType] = dicts
// } else {
getDicts(dictType).then(resp => {
res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
useDictStore().setDict(dictType, res.value[dictType])
if(resp && resp.data) {
res.value[dictType] = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.listClass, elTagClass: p.cssClass }))
useDictStore().setDict(dictType, res.value[dictType])
}
})
// }
})

View File

@ -293,7 +293,6 @@ const cancel = () => {
.meter-monitoring-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
/* 卡片样式:圆角 + 悬浮阴影,增强层次感 */

View File

@ -5,7 +5,6 @@
<div class="device-tree-panel">
<div class="tree-header">
<div class="search-add">
<!-- 修复确保 ElInput 标签闭合图标组件正确引用 -->
<ElInput
v-model="searchDevice"
placeholder="请输入设备"
@ -14,29 +13,44 @@
></ElInput>
</div>
</div>
<!-- 修复ElTree 标签闭合避免自闭合语法不兼容 -->
<ElTree
ref="deviceTreeRef"
:data="deviceTreeData"
:props="treeProps"
:filter-node-method="filterNode"
:current-node-key="currentNodeKey"
:current-node-id="currentSelectedNode"
:disabled="isDisabled"
default-expand-all
highlight-current
@node-click="handleNodeClick"
class="device-tree"
></ElTree>
<!-- 自定义设备列表 -->
<div class="custom-tree">
<div
v-for="group in filteredTreeData"
:key="group.label"
class="tree-group"
>
<div class="group-label">{{ group.label }}</div>
<div
v-for="item in group.children"
:key="item.label"
class="tree-item"
:class="{
'selected': isItemSelected(item.label),
'disabled': isItemDisabled && !isItemSelected(item.label)
}"
@click="handleItemClick(item)"
>
<div class="item-content">
<Camera class="item-icon"></Camera>
<span class="item-label">{{ item.label }}</span>
</div>
<div v-if="isItemSelected(item.label)" class="selected-indicator">
<el-icon><Check /></el-icon>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧视频墙面板 -->
<div class="video-wall-panel">
<div class="video-header">
<!-- 修复图标组件闭合添加类名语法正确 -->
<Camera class="icon"></Camera>
<span>监控视频</span>
</div>
<!-- 修复style 绑定语法完整英文逗号闭合大括号 -->
<div
class="video-container"
:style="{
@ -44,7 +58,6 @@
gridTemplateRows: gridRows
}"
>
<!-- 修复v-for key 唯一暂用index实际建议用设备ID标签闭合 -->
<div
v-for="(video, index) in videoList"
:key="`video-${index}`"
@ -58,7 +71,6 @@
<div class="video-placeholder">
<Camera class="icon"></Camera>
<span>{{ video.name }}</span>
<!-- 修复Close 图标标签闭合@click.stop 语法正确 -->
<Close
v-if="video.name !== '待选择区域'"
class="close-icon"
@ -70,7 +82,6 @@
<!-- 布局切换按钮 -->
<div class="layout-switch">
<!-- 修复v-for key 唯一ElButton 标签闭合 -->
<ElButton
v-for="item in buttonType"
:key="`layout-${item.type}`"
@ -88,14 +99,11 @@
</template>
<script setup>
//
import { ref, computed, watch, onMounted, nextTick } from 'vue';
import { ElInput, ElTree, ElButton, ElMessage } from 'element-plus';
import { Search, Camera, Close } from '@element-plus/icons-vue';
import { ref, computed, watch, onMounted } from 'vue';
import { ElInput, ElButton, ElMessage } from 'element-plus';
import { Search, Camera, Close, Check } from '@element-plus/icons-vue';
//
const searchDevice = ref('');
const deviceTreeRef = ref(null);
const deviceTreeData = ref([
{
label: "公共区域",
@ -110,32 +118,19 @@ const deviceTreeData = ref([
]
}
]);
const currentLayout = ref(1);
const videoList = ref([
{ name: "待选择区域", bgColor: "#e6f7ff", isSelected: false }
]);
const selectedNodes = ref([]);
const currentSelectedNode = ref(null);
//
const currentLayout = ref(1);
// 使keyvalue
const videoPositions = ref({});
const selectedNodes = ref([]);
const buttonType = [
{ label: "1x1", type: 1 },
{ label: "2x2", type: 2 },
{ label: "3x3", type: 3 }
];
const treeProps = {
children: "children",
label: "label"
};
const currentNodeKey = "label";
//
const isDisabled = computed(() => {
if (currentLayout.value === 1) return false;
if (currentLayout.value === 2) return selectedNodes.value.length === 4;
return selectedNodes.value.length === 9;
});
//
const gridColumns = computed(() => {
switch (currentLayout.value) {
case 1: return "1fr";
@ -158,107 +153,138 @@ const maxCapacity = computed(() => {
return currentLayout.value === 1 ? 1 : (currentLayout.value === 2 ? 4 : 9);
});
// /
const filterNode = (value, data) => {
if (!value) return true;
return data.label.toLowerCase().includes(value.toLowerCase());
};
const updateVideoList = () => {
const capacity = maxCapacity.value;
videoList.value = Array.from({ length: capacity }, (_, index) => {
const deviceName = selectedNodes.value[index];
return {
name: deviceName || "待选择区域",
bgColor: deviceName ? `rgba(64, 158, 255, ${0.1 + (index % 5) * 0.15})` : "#e6f7ff",
isSelected: !!deviceName
};
});
};
const handleNodeClick = (data) => {
if (currentLayout.value === 1) {
selectedNodes.value = [data.label];
updateVideoList();
return;
}
const isExist = selectedNodes.value.includes(data.label);
if (isExist) {
selectedNodes.value = selectedNodes.value.filter(item => item !== data.label);
} else {
if (selectedNodes.value.length >= maxCapacity.value) {
const layoutLabel = buttonType.find(item => item.type === currentLayout.value).label;
ElMessage.warning(`当前${layoutLabel}模式最多选择${maxCapacity.value}个视频,请先移除一个`);
return;
}
selectedNodes.value.push(data.label);
}
updateVideoList();
};
const syncTreeSelection = () => {
if (currentLayout.value === 1) {
currentSelectedNode.value = selectedNodes.value[0] || null;
return;
}
nextTick(() => {
const treeNodes = document.querySelectorAll(".device-tree .el-tree-node");
treeNodes.forEach(node => {
const labelElem = node.querySelector(".el-tree-node__label");
if (!labelElem) return;
const label = labelElem.textContent.trim();
if (selectedNodes.value.includes(label)) {
node.classList.add("is-selected");
} else {
node.classList.remove("is-selected");
}
});
});
};
const changeLayout = (layoutType) => {
currentLayout.value = layoutType;
selectedNodes.value = [];
updateVideoList();
};
const handleVideoClick = (index) => {
const video = videoList.value[index];
if (video.name !== "待选择区域") {
currentSelectedNode.value = video.name;
}
};
const removeVideo = (index) => {
const removedItem = selectedNodes.value[index];
if (!removedItem) return;
selectedNodes.value = selectedNodes.value.filter((_, i) => i !== index);
updateVideoList();
ElMessage.info(`已移除${removedItem}`);
};
// watch
watch(searchDevice, (value) => {
if (deviceTreeRef.value) {
deviceTreeRef.value.filter(value);
}
const isItemDisabled = computed(() => {
return selectedNodes.value.length >= maxCapacity.value;
});
watch(selectedNodes, (newVal) => {
syncTreeSelection();
}, { immediate: true }); // immediate
//
const videoList = computed(() => {
const capacity = maxCapacity.value;
const list = [];
// onMounted
onMounted(() => {
const style = document.createElement("style");
//
style.textContent = `
.device-tree .el-tree-node.is-selected .el-tree-node__content {
background-color: #e6f7ff;
color: #409eff;
for (let i = 0; i < capacity; i++) {
if (videoPositions.value[i]) {
//
const device = videoPositions.value[i];
list.push({
name: device.label,
bgColor: `rgba(64, 158, 255, ${0.1 + (i % 5) * 0.15})`,
isSelected: false
});
} else {
//
list.push({
name: "待选择区域",
bgColor: "#e6f7ff",
isSelected: false
});
}
}
return list;
});
//
const filteredTreeData = computed(() => {
if (!searchDevice.value) return deviceTreeData.value;
return deviceTreeData.value.map(group => ({
...group,
children: group.children.filter(item =>
item.label.toLowerCase().includes(searchDevice.value.toLowerCase())
)
})).filter(group => group.children.length > 0);
});
//
const isItemSelected = (label) => {
return selectedNodes.value.includes(label);
};
//
const findAvailablePosition = () => {
const capacity = maxCapacity.value;
for (let i = 0; i < capacity; i++) {
if (!videoPositions.value[i]) {
return i;
}
}
return -1;
};
//
const findDevicePosition = (label) => {
for (const [position, device] of Object.entries(videoPositions.value)) {
if (device.label === label) {
return parseInt(position);
}
}
return -1;
};
//
const handleItemClick = (item) => {
const itemLabel = item.label;
const position = findDevicePosition(itemLabel);
if (position !== -1) {
//
delete videoPositions.value[position];
selectedNodes.value = selectedNodes.value.filter(label => label !== itemLabel);
ElMessage.info(`已移除${itemLabel}`);
} else {
//
if (selectedNodes.value.length >= maxCapacity.value) {
ElMessage.warning(`当前${buttonType.find(b => b.type === currentLayout.value)?.label}模式最多选择${maxCapacity.value}个视频`);
return;
}
const availablePosition = findAvailablePosition();
if (availablePosition !== -1) {
videoPositions.value[availablePosition] = item;
selectedNodes.value.push(itemLabel);
}
}
};
//
const changeLayout = (layoutType) => {
currentLayout.value = layoutType;
videoPositions.value = {};
selectedNodes.value = [];
};
//
const handleVideoClick = (index) => {
//
const updatedList = [...videoList.value];
updatedList.forEach((video, i) => {
video.isSelected = i === index && video.name !== "待选择区域";
});
// videoList
//
};
//
const removeVideo = (index) => {
if (videoPositions.value[index]) {
const removedDevice = videoPositions.value[index];
delete videoPositions.value[index];
selectedNodes.value = selectedNodes.value.filter(label => label !== removedDevice.label);
ElMessage.info(`已移除${removedDevice.label}`);
}
};
//
watch(searchDevice, () => {
// computed
});
onMounted(() => {
//
const style = document.createElement("style");
style.textContent = `
.video-item .close-icon {
position: absolute;
top: 5px;
@ -274,10 +300,6 @@ onMounted(() => {
.video-item:hover .close-icon {
opacity: 1;
}
.el-tree.is-disabled .el-tree-node__content {
cursor: not-allowed;
opacity: 0.7;
}
.video-header .icon,
.video-placeholder .icon {
color: #409eff;
@ -295,7 +317,6 @@ onMounted(() => {
</script>
<style scoped>
/* 修复:样式选择器无语法错误,分号闭合 */
.monitor-page {
height: calc(100vh - 84px);
background-color: #f5f7fa;
@ -310,7 +331,7 @@ onMounted(() => {
}
.device-tree-panel {
flex: 0 0 220px;
flex: 0 0 280px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
@ -333,12 +354,74 @@ onMounted(() => {
width: 100%;
}
.device-tree {
.custom-tree {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.tree-group {
margin-bottom: 16px;
}
.group-label {
font-weight: 600;
color: #303133;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 8px;
}
.tree-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin: 4px 0;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.tree-item:hover {
background-color: #f5f7fa;
}
.tree-item.selected {
background-color: #e6f7ff;
color: #409eff;
}
.tree-item.disabled:not(.selected) {
opacity: 0.5;
cursor: not-allowed;
}
.item-content {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.item-icon {
color: #909399;
font-size: 16px;
}
.tree-item.selected .item-icon {
color: #409eff;
}
.item-label {
font-size: 14px;
}
.selected-indicator {
color: #409eff;
font-size: 14px;
}
.video-wall-panel {
flex: 1;
background-color: #fff;
@ -376,8 +459,14 @@ onMounted(() => {
position: relative;
cursor: pointer;
transition: all 0.2s ease;
min-height: 120px;
}
.item-icon {
width: 18px;
}
.icon {
width: 30px;
}
.video-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

View File

@ -254,7 +254,6 @@ const handleCurrentChange = (val) => {
.area-management-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
/* 卡片样式:圆角 + 悬浮阴影增强层次感 */

View File

@ -294,7 +294,6 @@ const handleCurrentChange = (val) => {
.cabin-management-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
/* 卡片样式:圆角 + 悬浮阴影增强层次感 */

View File

@ -237,7 +237,6 @@ const padZero = (num) => {
.meter-monitoring-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
/* 卡片样式:圆角 + 悬浮阴影,增强层次感 */

View File

@ -346,7 +346,6 @@ const getList = () => {
.alarm-management-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px);
}
.page-card {

View File

@ -311,7 +311,7 @@
import { ref, reactive, toRefs, onUnmounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { User, Edit, Upload, Plus } from '@element-plus/icons-vue';
import ExcelExporter from "./../../utils/ExcelExporter"
import ExcelExporter from "@/utils/ExcelExporter"
//
const isAdmin = ref(true);
@ -721,7 +721,6 @@ onUnmounted(() => {
.maintenance-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px);
}
.page-card {

View File

@ -627,7 +627,6 @@ onUnmounted(() => {
.inspection-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px);
}
.page-card {

View File

@ -356,7 +356,6 @@ onMounted(() => {
.report-management-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
.page-card {

View File

@ -247,7 +247,6 @@ const MOUSE_CURRENT_Y = ref(0);
//
const activeMarker = ref({ target: "" });
const Shrink = ref(false);
const SELECT_ACTION_TYPE = ref("");

View File

@ -185,7 +185,6 @@ const handleCurrentChange = (val) => {
.operation-record-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
/* 卡片样式:圆角 + 悬浮阴影增强层次感 */

View File

@ -444,7 +444,6 @@ const getList = () => {};
.meter-monitoring-page {
padding: 20px;
background-color: #f8fafc;
min-height: calc(100vh - 64px); /* 适配顶部导航高度 */
}
/* 卡片样式:圆角 + 悬浮阴影,增强层次感 */