驾驶舱样式调整
This commit is contained in:
parent
3f61765b12
commit
f7722ea708
|
|
@ -15,11 +15,17 @@
|
|||
<div class="area-header">
|
||||
<div class="header-left">
|
||||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
<span class="header-left-text">城区供水温度【实时】</span>
|
||||
<span class="header-left-text">城区供回水温度【实时】</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div style="background: linear-gradient(90deg, #ffce53, #6eecff);"></div>
|
||||
<div>供水</div>
|
||||
<div class="header-right" style="display: flex; ">
|
||||
<div class="header-right">
|
||||
<div style="background: linear-gradient(90deg, #ffce53, #6eecff);"></div>
|
||||
<div>供水</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div style="background: linear-gradient(90deg, #fff, #5BB7F7);"></div>
|
||||
<div>回水</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-body">
|
||||
|
|
@ -28,7 +34,7 @@
|
|||
</div>
|
||||
|
||||
<!-- area-4 折线图 -->
|
||||
<div class="area2 areabg area-4">
|
||||
<!-- <div class="area2 areabg area-4">
|
||||
<div class="area-header">
|
||||
<div class="header-left">
|
||||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
|
|
@ -42,9 +48,9 @@
|
|||
<div class="area-body">
|
||||
<div id="lineChart" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="area3 areabg area-9">
|
||||
<div class="areabg area-9">
|
||||
<div class="area-body list-container">
|
||||
<!-- 标题行 -->
|
||||
<div class="list-header">
|
||||
|
|
@ -55,17 +61,24 @@
|
|||
<span>二次网回水</span>
|
||||
<span>二次网供压</span>
|
||||
<span>二次网回压</span>
|
||||
<img src="./dashboard/dp_icon4-right.png" class="left-icon" />
|
||||
<div>
|
||||
<span v-if="tableCanScroll" @click="stopScroll()">停</span>
|
||||
<span v-else @click="startScroll()">启</span>
|
||||
</div>
|
||||
<!-- <img src="./dashboard/dp_icon4-right.png" class="left-icon" /> -->
|
||||
</div>
|
||||
<!-- 内容行滚动区域 -->
|
||||
<div class="list-body">
|
||||
<div v-for="item in z" :key="item.view028" class="list-row">
|
||||
<span>{{ item.view028 }}</span>
|
||||
<span>{{ item.view030 }}</span>
|
||||
<span>{{ item.view009 }}</span>
|
||||
<span>{{ item.view010 }}</span>
|
||||
<span>{{ item.view011 }}</span>
|
||||
<span>{{ item.view012 }}</span>
|
||||
<div :style="{ maxHeight: `calc(100% - 30px)`, overflowY: 'auto' }"
|
||||
style="scrollbar-width: none;-ms-overflow-style: none;">
|
||||
<div class="list-body" :style="{ transform: `translateY(${-scrollTop}px)` }">
|
||||
<div v-for="item in doubleZList" :key="item.view028" class="list-row">
|
||||
<span>{{ item.view028 }}</span>
|
||||
<span>{{ item.view030 }}</span>
|
||||
<span>{{ item.view009 }}</span>
|
||||
<span>{{ item.view010 }}</span>
|
||||
<span>{{ item.view011 }}</span>
|
||||
<span>{{ item.view012 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,6 +143,16 @@
|
|||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
<span class="header-left-text">郊县供回水温度【实时】</span>
|
||||
</div>
|
||||
<div class="header-right" style="display: flex; ">
|
||||
<div class="header-right">
|
||||
<div style="background: linear-gradient(90deg, #2E5A6B, #F7B833);"></div>
|
||||
<div>供水</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div style="background: linear-gradient(90deg, #ffd3be, #FF9D71);"></div>
|
||||
<div>回水</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" area-body"></div>
|
||||
</div>
|
||||
|
|
@ -188,7 +211,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick, computed } from 'vue';
|
||||
import { slcx, cqglfgswd, glfzb } from '/@/api/dashboard/api';
|
||||
import * as echarts from 'echarts';
|
||||
import aImg from './dashboard/c.png';
|
||||
|
|
@ -217,7 +240,7 @@ const cqglfsl = ref(0)
|
|||
const cqhrzsl = ref(0)
|
||||
const jxglfsl = ref(0)
|
||||
const jxsl = ref(0)
|
||||
const jbztys = ref('#59accf')
|
||||
const jbztys = ref('#fff')
|
||||
const jbzbzys = ref('rgba(27, 147, 191, 0.3)')
|
||||
|
||||
const cityList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
|
|
@ -226,12 +249,37 @@ const countyList = ref<{ name: string; value: number; raw: any }[]>([]);
|
|||
const cityHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
const countyHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
|
||||
const scrollTop = ref(0);
|
||||
const speed = 1; // 滚动速度（像素/次）
|
||||
let tableTimer = null;
|
||||
const tableCanScroll = ref(true)
|
||||
|
||||
const startScroll = () => {
|
||||
tableCanScroll.value = true
|
||||
|
||||
const totalHeight = 28 * z.value.length;
|
||||
|
||||
tableTimer = setInterval(() => {
|
||||
scrollTop.value += speed;
|
||||
if (scrollTop.value >= totalHeight) {
|
||||
scrollTop.value = 0; // 归位，形成循环
|
||||
}
|
||||
}, 30);
|
||||
};
|
||||
|
||||
function stopScroll() {
|
||||
tableCanScroll.value = false
|
||||
clearInterval(tableTimer)
|
||||
|
||||
}
|
||||
|
||||
// 区域 main 柱状图
|
||||
function updateChartMain() {
|
||||
if (!chartMain) return;
|
||||
const names = cityList.value.map(i => i.name);
|
||||
const values = cityList.value.map(i => i.value);
|
||||
const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
|
||||
const gsValues = cityList.value.map(i => i.value);
|
||||
const hsValues = cityList.value.map(i => Number(i.raw?.view006 || 0));
|
||||
const maxVal = gsValues.length ? Math.max(...gsValues) * 1.15 : 100;
|
||||
|
||||
chartMain.setOption({
|
||||
grid: { left: 10, right: 0, bottom: 14, top: 28, containLabel: true },
|
||||
|
|
@ -262,7 +310,8 @@ function updateChartMain() {
|
|||
+ 'background:linear-gradient(to right, #cccccc46, #ececec7c, #cccccc46);'
|
||||
+ 'background-position:left;'
|
||||
+ '"></div>' // 下边框渐变
|
||||
+ params[0].name + '锅炉房<br/>供水温度: ' + params[1].value + '</div>';
|
||||
+ params[0].name + '锅炉房<br/>供水温度: ' + params[1].value
|
||||
+ '<br/>回水温度: ' + params[3].value + '</div>';
|
||||
return content;
|
||||
},
|
||||
},
|
||||
|
|
@ -270,12 +319,60 @@ function updateChartMain() {
|
|||
yAxis: { type: 'value', axisLabel: { color: jbztys.value, margin: 8 }, axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: jbzbzys.value } }, splitLine: { show: false } },
|
||||
series: [
|
||||
{ type: 'bar', barWidth: '15px', data: names.map(() => maxVal), barGap: '-100%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] } }, z: 1, silent: true },
|
||||
{ type: 'bar', barWidth: '15px', data: values, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#e8a929' }, { offset: 1, color: '#27a3d5' }] }, opacity: 0.95 }, z: 2 },
|
||||
{ type: 'pictorialBar', symbol: `image://${aImg}`, symbolSize: [15, 15], symbolOffset: [0, -10], symbolPosition: 'end', data: values, z: 3, silent: true }
|
||||
{ type: 'bar', yAxisIndex: 0, barWidth: '15px', data: gsValues, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#e8a929' }, { offset: 1, color: '#27a3d5' }] }, opacity: 0.95 }, z: 2 },
|
||||
{ type: 'pictorialBar', symbol: `image://${aImg}`, symbolSize: [15, 15], symbolOffset: [0, -10], symbolPosition: 'end', data: gsValues, z: 3, silent: true },
|
||||
{ name: '回水温度', type: 'line', data: hsValues, symbol: 'none', lineStyle: { width: 2, color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'white' }, { offset: 0.2, color: '#009BFF' }, { offset: 0.4, color: '#49B0FF' }, { offset: 0.6, color: 'white' }, { offset: 0.8, color: '#009BFF' }, { offset: 1, color: '#49B0FF' }] } }, showSymbol: false, z: 5 }
|
||||
]
|
||||
}, true);
|
||||
|
||||
// --------- 自动轮播 tooltip 的逻辑（每 5 秒切换） ---------
|
||||
// 清除旧定时器（避免重复）
|
||||
if (chartMain.__autoTooltipTimer) {
|
||||
clearInterval(chartMain.__autoTooltipTimer);
|
||||
chartMain.__autoTooltipTimer = null;
|
||||
// 隐藏可能残留的 tooltip/highlight
|
||||
try { chartMain.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||||
try { chartMain.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||||
}
|
||||
|
||||
if (!names || names.length === 0) return;
|
||||
|
||||
let idx = 0;
|
||||
// 先展示第一个
|
||||
try {
|
||||
chartMain.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: idx });
|
||||
chartMain.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||||
} catch (e) { }
|
||||
|
||||
chartMain.__autoTooltipTimer = setInterval(() => {
|
||||
try {
|
||||
// 取消上一个高亮（safe）
|
||||
chartMain.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||||
// 移动到下一个索引
|
||||
idx = (idx + 1) % names.length;
|
||||
// 显示 tooltip 并高亮新项
|
||||
chartMain.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: idx });
|
||||
chartMain.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||||
} catch (e) {
|
||||
// 防止报错中断定时器
|
||||
console.error(e);
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// 可选：当销毁 chart 时清理定时器（如果你在别处销毁 chart，请一并 clearInterval）
|
||||
// 例如：chartMain.on('legendselectchanged', ()=>{}) ... 这里不强制绑定销毁事件
|
||||
}
|
||||
|
||||
// 如果需要在别处停止轮播，调用：
|
||||
function stopAutoTooltip() {
|
||||
if (chartMain && chartMain.__autoTooltipTimer) {
|
||||
clearInterval(chartMain.__autoTooltipTimer);
|
||||
chartMain.__autoTooltipTimer = null;
|
||||
try { chartMain.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 区域 line 折线图
|
||||
function updateChartLine() {
|
||||
if (!chartLine) return;
|
||||
|
|
@ -484,7 +581,6 @@ function updateRadarChart() {
|
|||
}, true);
|
||||
}
|
||||
|
||||
// area-8 折线图更新函数
|
||||
function updateChartArea8() {
|
||||
if (!chartArea8) return;
|
||||
|
||||
|
|
@ -495,7 +591,7 @@ function updateChartArea8() {
|
|||
const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
|
||||
|
||||
chartArea8.setOption({
|
||||
grid: { left: 30, right: 40, bottom: 14, top: 30, containLabel: true },
|
||||
grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'transparent',
|
||||
|
|
@ -533,19 +629,19 @@ function updateChartArea8() {
|
|||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '温度℃', // 标题
|
||||
nameLocation: 'end', // 放在轴末端
|
||||
nameTextStyle: { // 标题样式
|
||||
color: '#ffffff', // 白色
|
||||
align: 'right', // 靠左对齐
|
||||
verticalAlign: 'bottom', // 垂直对齐
|
||||
name: '温度℃',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff',
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 11
|
||||
},
|
||||
nameGap: 15,
|
||||
axisLabel: {
|
||||
color: jbztys.value,
|
||||
margin: 8,
|
||||
formatter: '{value}' // 显示温度单位
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
|
||||
axisTick: { show: false },
|
||||
|
|
@ -569,7 +665,7 @@ function updateChartArea8() {
|
|||
},
|
||||
opacity: 0.8
|
||||
},
|
||||
label: { show: false } // 关闭折线上数值显示
|
||||
label: { show: false }
|
||||
},
|
||||
{
|
||||
name: '回水',
|
||||
|
|
@ -588,13 +684,174 @@ function updateChartArea8() {
|
|||
},
|
||||
opacity: 0.8
|
||||
},
|
||||
label: { show: false } // 关闭折线上数值显示
|
||||
label: { show: false }
|
||||
}
|
||||
]
|
||||
}, true);
|
||||
|
||||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||||
// 清理旧定时器（避免重复）
|
||||
if (chartArea8.__autoTooltipTimer) {
|
||||
clearInterval(chartArea8.__autoTooltipTimer);
|
||||
chartArea8.__autoTooltipTimer = null;
|
||||
try { chartArea8.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||||
try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||||
try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||||
}
|
||||
|
||||
if (!names || names.length === 0) return;
|
||||
|
||||
let idx = 0;
|
||||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||||
setTimeout(() => {
|
||||
try {
|
||||
chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||||
// 同时也可以高亮第二条线的点（可选）
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||||
} catch (e) { }
|
||||
chartArea8.__autoTooltipTimer = setInterval(() => {
|
||||
try {
|
||||
// 取消上一个高亮
|
||||
chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||||
|
||||
// 下一个索引
|
||||
idx = (idx + 1) % names.length;
|
||||
|
||||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||||
chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}, 5000);
|
||||
}, 2500);
|
||||
|
||||
}
|
||||
|
||||
// 停止轮播（需要时调用）
|
||||
function stopAutoTooltipArea8() {
|
||||
if (chartArea8 && chartArea8.__autoTooltipTimer) {
|
||||
clearInterval(chartArea8.__autoTooltipTimer);
|
||||
chartArea8.__autoTooltipTimer = null;
|
||||
try { chartArea8.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||||
}
|
||||
}
|
||||
|
||||
// area-8 折线图更新函数
|
||||
// function updateChartArea8() {
|
||||
// if (!chartArea8) return;
|
||||
|
||||
// const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
|
||||
// const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view035) : Number(i.raw.view005));
|
||||
// const returnData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view036) : Number(i.raw.view006));
|
||||
|
||||
// const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
|
||||
|
||||
// chartArea8.setOption({
|
||||
// grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// backgroundColor: 'transparent',
|
||||
// extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
|
||||
// formatter: function (params) {
|
||||
// const p = params[0];
|
||||
// const content = `<div style="
|
||||
// position:relative;
|
||||
// border-left:2px solid #cccccc46;
|
||||
// border-right:2px solid #cccccc46;
|
||||
// border-radius:5px;
|
||||
// background:linear-gradient(to right bottom, #08101D, #1a3b70);
|
||||
// color:#ffffff;
|
||||
// padding:5px 10px;
|
||||
// margin-left:10px;
|
||||
// z-index:99;
|
||||
// text-align:center;">
|
||||
// <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
|
||||
// <div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
|
||||
// ${params[0].name}<br/>
|
||||
// 供水: ${supplyData[p.dataIndex]}<br/>
|
||||
// 回水: ${returnData[p.dataIndex]}
|
||||
// </div>`;
|
||||
// return content;
|
||||
// }
|
||||
// },
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// boundaryGap: false,
|
||||
// data: names,
|
||||
// axisLabel: { rotate: 0, interval: 0, color: jbztys.value },
|
||||
// axisLine: { lineStyle: { color: jbzbzys.value } },
|
||||
// axisTick: { show: false },
|
||||
// splitLine: { show: false }
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// name: '温度℃', // 标题
|
||||
// nameLocation: 'end', // 放在轴末端
|
||||
// nameTextStyle: { // 标题样式
|
||||
// color: '#ffffff', // 白色
|
||||
// align: 'right', // 靠左对齐
|
||||
// verticalAlign: 'bottom', // 垂直对齐
|
||||
// fontSize: 11
|
||||
// },
|
||||
// nameGap: 15,
|
||||
// axisLabel: {
|
||||
// color: jbztys.value,
|
||||
// margin: 8,
|
||||
// formatter: '{value}' // 显示温度单位
|
||||
// },
|
||||
// axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
|
||||
// axisTick: { show: false },
|
||||
// splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } },
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '供水',
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// data: supplyData,
|
||||
// areaStyle: { opacity: 0.4 },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0, y: 0, x2: 0, y2: 1,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: '#e8a929' },
|
||||
// { offset: 1, color: '#27a3d5' }
|
||||
// ]
|
||||
// },
|
||||
// opacity: 0.8
|
||||
// },
|
||||
// label: { show: false } // 关闭折线上数值显示
|
||||
// },
|
||||
// {
|
||||
// name: '回水',
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// data: returnData,
|
||||
// areaStyle: { opacity: 0.4 },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: 'linear',
|
||||
// x: 0, y: 0, x2: 0, y2: 1,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: '#ff7e5f' },
|
||||
// { offset: 1, color: '#feb47b' }
|
||||
// ]
|
||||
// },
|
||||
// opacity: 0.8
|
||||
// },
|
||||
// label: { show: false } // 关闭折线上数值显示
|
||||
// }
|
||||
// ]
|
||||
// }, true);
|
||||
|
||||
// }
|
||||
const z = ref<any[]>([]);
|
||||
const doubleZList = computed(() => [...z.value, ...z.value]);
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
|
|
@ -648,16 +905,17 @@ async function loadData() {
|
|||
countyHrzList.value = countys2;
|
||||
|
||||
updateChartMain();
|
||||
updateChartLine();
|
||||
// updateChartLine();
|
||||
updateChartCounty();
|
||||
updateRadarChart();
|
||||
updateChartArea8();
|
||||
|
||||
startScroll();
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
|
||||
// 监听全屏变化
|
||||
const handleFullScreenChange = () => {
|
||||
console.log(123)
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
|
|
@ -665,24 +923,24 @@ onMounted(() => {
|
|||
timer = setInterval(() => { currentTime.value = new Date().toLocaleString(); }, 1000);
|
||||
|
||||
const chartDom1 = document.getElementById("main") as HTMLElement;
|
||||
const chartDom2 = document.getElementById("lineChart") as HTMLElement;
|
||||
// const chartDom2 = document.getElementById("lineChart") as HTMLElement;
|
||||
const chartDom3 = document.querySelector(".area-6 .area-body") as HTMLElement;
|
||||
const radarDom = document.querySelector('.area-7 .area-body') as HTMLElement;
|
||||
const area8Dom = document.querySelector('.area-8 .area-body') as HTMLElement;
|
||||
|
||||
chartMain = echarts.init(chartDom1);
|
||||
chartLine = echarts.init(chartDom2);
|
||||
// chartLine = echarts.init(chartDom2);
|
||||
chartCounty = echarts.init(chartDom3);
|
||||
chartRadar = echarts.init(radarDom);
|
||||
chartArea8 = echarts.init(area8Dom);
|
||||
|
||||
updateChartMain();
|
||||
updateChartLine();
|
||||
// updateChartLine();
|
||||
updateChartCounty();
|
||||
updateChartArea8();
|
||||
|
||||
loadData();
|
||||
dataTimer = window.setInterval(() => { loadData(); }, 60 * 1000);
|
||||
dataTimer = window.setInterval(() => { loadData(); }, 5 * 60 * 1000);
|
||||
|
||||
window.addEventListener("resize", resizeChart);
|
||||
|
||||
|
|
@ -690,6 +948,7 @@ onMounted(() => {
|
|||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
window.addEventListener('resize', handleFullScreenChange);
|
||||
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
@ -700,7 +959,7 @@ onUnmounted(() => {
|
|||
|
||||
function resizeChart() {
|
||||
if (chartMain) chartMain.resize();
|
||||
if (chartLine) chartLine.resize();
|
||||
// if (chartLine) chartLine.resize();
|
||||
if (chartCounty) chartCounty.resize();
|
||||
if (chartRadar) chartRadar.resize();
|
||||
if (chartArea8) chartArea8.resize();
|
||||
|
|
@ -709,12 +968,14 @@ function resizeChart() {
|
|||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", resizeChart);
|
||||
if (chartMain) { chartMain.dispose(); chartMain = null; }
|
||||
if (chartLine) { chartLine.dispose(); chartLine = null; }
|
||||
// if (chartLine) { chartLine.dispose(); chartLine = null; }
|
||||
if (chartCounty) { chartCounty.dispose(); chartCounty = null; }
|
||||
if (chartRadar) { chartRadar.dispose(); chartRadar = null; }
|
||||
if (chartArea8) { chartArea8.dispose(); chartArea8 = null; }
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
clearInterval(timer);
|
||||
});
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
|
|
@ -746,7 +1007,6 @@ function closeModal() {
|
|||
}
|
||||
|
||||
async function detailFunc(record) {
|
||||
console.log(record);
|
||||
modalVisible2.value = true;
|
||||
await nextTick()
|
||||
registerModal.value.init(record)
|
||||
|
|
@ -917,6 +1177,17 @@ function closeModal2() {
|
|||
transform: scaleY(0.85);
|
||||
}
|
||||
|
||||
.area1 {
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.area-9 {
|
||||
border-radius: 10px;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
/* 说明行 */
|
||||
.bottom-text-1,
|
||||
.bottom-text-2,
|
||||
|
|
@ -1063,7 +1334,7 @@ function closeModal2() {
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: #59accf;
|
||||
color: #fff;
|
||||
/* 若在浅背景上看不清，可改为深色 */
|
||||
}
|
||||
|
||||
|
|
@ -1133,7 +1404,7 @@ function closeModal2() {
|
|||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 4px 0;
|
||||
height: 275px;
|
||||
height: 578px;
|
||||
}
|
||||
|
||||
/* 标题行 */
|
||||
|
|
@ -1142,7 +1413,7 @@ function closeModal2() {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(19, 23, 34, 0.05); // #131722 几乎透明
|
||||
color: #83c2df;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
|
|
@ -1171,7 +1442,7 @@ function closeModal2() {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: rgba(19, 23, 34, 0.4); // #131722 半透明
|
||||
color: #83c2df;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin: 5px 0; // 行间距 2px
|
||||
padding: 0 30px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue