guoyixuan
/
tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:代码格式化配置

Browse Source
master
guoyixuan 2 months ago
parent 99dbc02ee6
commit 9b1e2c8995
3 changed files with 211 additions and 228 deletions
Show Stats Download Patch File Download Diff File

22
.vscode/settings.json vendored
Unescape Escape View File

@ -0,0 +1,22 @@
{
"workbench.colorCustomizations": {
"activityBar.activeBackground": "#1f6fd0",
"activityBar.background": "#1f6fd0",
"activityBar.foreground": "#e7e7e7",
"activityBar.inactiveForeground": "#e7e7e799",
"activityBarBadge.background": "#ee90bb",
"activityBarBadge.foreground": "#15202b",
"commandCenter.border": "#e7e7e799",
"sash.hoverBorder": "#1f6fd0",
"statusBar.background": "#1857a4",
"statusBar.foreground": "#e7e7e7",
"statusBarItem.hoverBackground": "#1f6fd0",
"statusBarItem.remoteBackground": "#1857a4",
"statusBarItem.remoteForeground": "#e7e7e7",
"titleBar.activeBackground": "#1857a4",
"titleBar.activeForeground": "#e7e7e7",
"titleBar.inactiveBackground": "#1857a499",
"titleBar.inactiveForeground": "#e7e7e799"
},
"peacock.color": "#1857a4"
}

359
css/common.css
Unescape Escape View File

@ -1,200 +1,201 @@
#app{
box-sizing: border-box;
padding: 12px;
width: 100%;
height: 100%;
}
.content{
background: #fff;
width: 100%;
height: 100%;
display: flex;
border: 1px solid #e8e8e8;
border-radius: 4px;
position: relative;
}
.context-menu{
position: absolute;
z-index: 9;
background: #fff;
display: flex;
flex-direction: column;
padding: 4px 6px;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.context-menu >div{
cursor: pointer;
font-size: 14px;
line-height: 22px;
}
.context-menu >div:hover{
background-color: #f5f5f5;
}
.tree-content{
padding: 12px 0;
width: 20%;
border-right: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
}
.input-box{
padding: 0 8px;
}
.tree-box{
flex: 1;
min-height: 0;
overflow-y: auto;
}
.ant-tree-child-tree li .ant-tree-switcher{
visibility: hidden;
}
.bottom-btns{
padding: 8px 8px 0 8px;
display: flex;
justify-content: center;
}
.right-content{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.panel-views{
flex: 1;
min-height: 0;
}
.sub-content{
height: 100%;
width: 100%;
}
.history-trend{
display: flex;
flex-direction: column;
}
.top-selector{
border-bottom: 1px solid #e8e8e8;
padding: 0 24px 12px 0;
text-align: right;
#app {
box-sizing: border-box;
padding: 12px;
width: 100%;
height: 100%;
}
.content {
background: #fff;
width: 100%;
height: 100%;
display: flex;
border: 1px solid #e8e8e8;
border-radius: 4px;
position: relative;
}
.context-menu {
position: absolute;
z-index: 9;
background: #fff;
display: flex;
flex-direction: column;
padding: 4px 6px;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.context-menu > div {
cursor: pointer;
font-size: 14px;
line-height: 22px;
}
.context-menu > div:hover {
background-color: #f5f5f5;
}
.tree-content {
padding: 12px 0;
width: 20%;
border-right: 1px solid #e8e8e8;
display: flex;
flex-direction: column;
}
.input-box {
padding: 0 8px;
}
.tree-box {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.ant-tree-child-tree li .ant-tree-switcher {
visibility: hidden;
}
.bottom-btns {
padding: 8px 8px 0 8px;
display: flex;
justify-content: center;
}
.right-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.panel-views {
flex: 1;
min-height: 0;
}
.sub-content {
height: 100%;
width: 100%;
}
.history-trend {
display: flex;
flex-direction: column;
}
.top-selector {
border-bottom: 1px solid #e8e8e8;
padding: 0 24px 12px 0;
text-align: right;
}
.top-selector .custom-date-picker {
width: 360px !important;
}
.trend-graph-container{
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.trend-graph-container .trend-item{
border-bottom: 1px dashed #e8e8e8;
height: 240px;
display: flex;
flex-direction: column;
}
.trend-graph-container .trend-item .title{
padding: 12px 0 0 12px;
font-size: 14px;
font-weight: 700;
}
.trend-graph-container .trend-item .line-graph{
flex: 1;
min-height: 0;
}
.alarm-config .grid-content{
padding: 0 24px;
}
.alarm-config .search-bar{
padding: 0 24px 0 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.alarm-config .search-bar .search-item{
margin-right: 24px;
margin-bottom: 12px;
}
.alarm-config .search-bar .break{
flex-basis: 100%;
height: 0; /* 避免影响垂直间距 */
width: 360px !important;
}
.trend-graph-container {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
.trend-graph-container .trend-item {
border-bottom: 1px dashed #e8e8e8;
height: 240px;
display: flex;
flex-direction: column;
}
.trend-graph-container .trend-item .title {
padding: 12px 0 0 12px;
font-size: 14px;
font-weight: 700;
}
.trend-graph-container .trend-item .line-graph {
flex: 1;
min-height: 0;
}
.alarm-config .grid-content {
padding: 0 24px;
}
.alarm-config .search-bar {
padding: 0 24px 0 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.alarm-config .search-bar .search-item {
margin-right: 24px;
margin-bottom: 12px;
}
.alarm-config .search-bar .break {
flex-basis: 100%;
height: 0; /* 避免影响垂直间距 */
}
.config-page{
padding: 0 24px;
.config-page {
padding: 0 24px;
}
.config-page .station-config{
padding-bottom: 12px;
border-bottom: 1px dashed #e8e8e8;
.config-page .station-config {
padding-bottom: 12px;
border-bottom: 1px dashed #e8e8e8;
}
.config-page .station-config .title,.config-page .path-config .title{
font-size: 14px;
font-weight: 700;
.config-page .station-config .title,
.config-page .path-config .title {
font-size: 14px;
font-weight: 700;
}
.path-config{
margin-top: 12px;
.path-config {
margin-top: 12px;
}
.config-page .path-config .path-item{
margin-top: 12px;
.config-page .path-config .path-item {
margin-top: 12px;
}
.config-page .path-config .path-item .name{
font-size: 14px;
.config-page .path-config .path-item .name {
font-size: 14px;
}
.config-page .path-config .path-item .row{
margin: 4px 0;
.config-page .path-config .path-item .row {
margin: 4px 0;
}
.config-page .station-config .station{
margin-top: 12px;
.config-page .station-config .station {
margin-top: 12px;
}
.config-page .delete-bar{
margin-top: 12px;
.config-page .delete-bar {
margin-top: 12px;
}
.config-page .delete-bar .delete-time{
margin-right: 12px;
.config-page .delete-bar .delete-time {
margin-right: 12px;
}
.config-page .delete-bar .label{
margin-right: 8px;
.config-page .delete-bar .label {
margin-right: 8px;
}
.is-root > .el-tree-node__content {
background-color: transparent !important;
color: inherit !important;
}
.is-root > .el-tree-node__content {
background-color: transparent!important;
color: inherit!important;
}
.total-prpd,
.prpd-and-prps{
display: flex;
flex-direction: column;
.prpd-and-prps {
display: flex;
flex-direction: column;
}
.total-prpd .trend-box,
.prpd-and-prps .trend-box{
height: 180px;
border-bottom: 1px solid #e8e8e8;
.prpd-and-prps .trend-box {
height: 180px;
border-bottom: 1px solid #e8e8e8;
}
.total-prpd .prpd-box,
.prpd-and-prps .prpd-and-prps-box{
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.total-prpd .prpd-box .total-prpd-item,
.prpd-and-prps .prpd-and-prps-box .prpd-and-prps-item{
border: 1px solid #e8e8e8;
}
.prps-and-prpd-container{
height: 100%;
width: 100%;
position: relative;
}
.prps-and-prpd-container .switcher{
position: absolute;
bottom: 0;
}
.prps-and-prpd-container .switcher >span{
cursor: pointer;
font-size: 12px;
margin-left: 8px;
}
.prps-and-prpd-container .switcher .active-span{
color: #1890ff;
}
.prpd-and-prps .prpd-and-prps-box {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.total-prpd .prpd-box .total-prpd-item,
.prpd-and-prps .prpd-and-prps-box .prpd-and-prps-item {
border: 1px solid #e8e8e8;
}
.prps-and-prpd-container {
height: 100%;
width: 100%;
position: relative;
}
.prps-and-prpd-container .switcher {
position: absolute;
bottom: 0;
}
.prps-and-prpd-container .switcher > span {
cursor: pointer;
font-size: 12px;
margin-left: 8px;
}
.prps-and-prpd-container .switcher .active-span {
color: #1890ff;
}

58
index.html
Unescape Escape View File

@ -69,8 +69,7 @@
<div class="top-selector">
<el-date-picker v-model="dateRange" style="width: 360px" class="custom-date-picker"
value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate"
@panel-change="handlePanelChange" />
start-placeholder="开始日期" end-placeholder="结束日期" />
</div>
<div class="trend-graph-container">
<div class="trend-item" v-for="item in trendGraphData" :key="item.id">
@ -81,6 +80,7 @@
</div>
</div>
</div>
<div v-if="activeKey === 'alarmConfig'" key="alarmConfig" class="sub-content alarm-config">
<!-- 告警配置 -->
<div class="search-bar">
@ -264,7 +264,7 @@
</a-modal>
</div>
<script>
axios.defaults.baseURL = 'http://192.168.1.80:9501'; // 临时服务地址
axios.defaults.baseURL = 'http://192.168.1.198:9501'; // 临时服务地址
axios.defaults.timeout = 10000;
const findParentByKey = (tree, targetKey) => {
for (const parent of tree) {
@ -867,7 +867,7 @@
};
const searchValue = ref('');
const treeRef = ref()
const activeKey = ref('prpdAndPrps')
const activeKey = ref('historyTrend')
const tabsArr = [
{ key: 'historyTrend', tab: '历史趋势' },
{ key: 'alarmConfig', tab: '告警管理' },
@ -1107,37 +1107,12 @@
};
const childRefs = ref({});
const dateRange = ref([]);
const currentYear = ref(new Date().getFullYear());
const allowedMonths = ref([]); // 允许选择的月份（如[1,5]表示1月和5月）
// 禁用日期规则（核心逻辑）
const disabledDate = (time) => {
const date = new Date(time);
const year = date.getFullYear();
const month = date.getMonth() + 1;
// 规则1：只允许选择当前年份
if (year !== currentYear.value) return true;
// 规则2：只允许选择API返回的月份
if (!allowedMonths.value.includes(month)) return true;
// 规则3：限制选择范围为1个月内（当已选开始日期时）
if (dateRange.value?.[0]) {
const startDate = new Date(dateRange.value[0]);
const minDate = new Date(startDate);
const maxDate = new Date(startDate);
minDate.setMonth(minDate.getMonth() - 1);
maxDate.setMonth(maxDate.getMonth() + 1);
return date < minDate || date > maxDate;
}
return false;
};
const handlePanelChange = (date) => {
currentYear.value = date?.[0]?.getFullYear() || 2025
};
const fetchHistoryTrendData = async (id, time) => {
try {
const params = {
current: 1,
startTimeStr: time[0],
endTimeStr: time[1],
startTime: time[0],
endTime: time[1],
monitorKey: id,
pageSize: 99999
}
@ -1147,7 +1122,7 @@
return {
id,
// label:
data: result
data: result || []
}
} catch (error) {
console.error(`请求 ${id} 时出错:`, error);
@ -1156,6 +1131,7 @@
}
// 初始化趋势echart
const initTrendGraph = (el, data) => {
console.log(data, 'data');
const legendData = [
{ id: 'avg', name: '平均值' },
{ id: 'maxValue', name: '最大值' },
@ -1249,7 +1225,7 @@
// tab在历史趋势监听勾选节点
watch([checkedKeys1, dateRange], async ([keys, time]) => {
const [starTime, endTime] = time || [];
if (unref(activeKey) !== 'historyTrend' || !keys.length || !starTime || !endTime) return;
if (unref(activeKey) !== 'historyTrend' || !starTime || !endTime) return;
// 先清理之前的图表
Object.values(chartGroups.value).forEach(group => {
group.instances.forEach(chart => chart.dispose());
@ -1287,17 +1263,6 @@
});
});
});
const checkedKeys1Str = computed(() => checkedKeys1.value.join(',')) // 选中节点的字符串 为了减少监听
// 请求可选择的月份
watch([checkedKeys1Str, currentYear], async ([keys, year]) => {
if (!keys || !year) return
dateRange.value = []
const { data: { result } } = await axios.post(`/ldpdtools/trendData/multHasData?year=${year}`, unref(checkedKeys1))
allowedMonths.value = result.map(item => Number(item))
}, {
immediate: true
})
// 告警信息
const configLoading = ref(false)
const columns = [
@ -1554,8 +1519,6 @@
trendGraphData.value = []
childRefs.value = {}
dateRange.value = []
currentYear.value = new Date().getFullYear()
allowedMonths.value = []
}
if (oldKey === 'alarmConfig') {
// 销毁告警管理
@ -1618,9 +1581,6 @@
monitorModalForm,
onMonitorModalSubmit,
dateRange,
handlePanelChange,
currentYear,
disabledDate,
checkTree,
trendGraphData,
trendGraphRefs,

Write Preview
Loading…
Cancel
Save