提交 18c3bacb authored 作者: liujiaxing's avatar liujiaxing

图标曲线配置完成

上级 9484505a
......@@ -62,13 +62,13 @@ const dataX = computed(() => {
if (props.lineArray) {//代表x轴有多个
let arrx = []
props.data.forEach(it => {
arrx.push(it.length > 0 ? it.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
arrx.push(it.length > 0 ? it.map(item => item.x.split(' ')[1]?.slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
})
// console.log(arrx, 'x轴信息');
return arrx
// return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
} else {
return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1]?.slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
}
})
......@@ -274,22 +274,23 @@ function initChart() {
fontSize: 10,
interval: 'auto', // 或直接不写
hideOverlap: true, // 防重叠(很关键)
formatter: function (value, index) {
console.log(value, '判断依据', index);
formatter: function (value) {
const date = new Date(value);
console.log(value, '判断依据', `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
if (value.toString().includes(':')) {
const date = new Date(value);
const minutes = date.getMinutes();
if (minutes === 0 || minutes === 30) {
console.log(value, '判断分钟');
// console.log(value, '判断分钟');
return value
}
} else if (!isNaN(Number(value))) {
const date = new Date(value);
const minutes = date.getMinutes();
if (minutes === 0 || minutes === 30) {
console.log(date, '判断分钟11', value);
// console.log(date, '判断分钟11', value);
return timestampToHMS(value)
}
}
......@@ -378,18 +379,12 @@ function initChart() {
if (props.lineArray) {
delete option.xAxis.data
}
// console.log(option, '配置', myChart, '住新冠');
console.log(option, '数据配置');
// console.log(series1Data.value, '对象');
// if (timesset) {
// clearTimeout(timesset)
// }
// timesset = setTimeout(() => {
// console.log(JSON.stringify(option), '数据配置');
clearTimeout(timesset)
myChart.setOption(option);
resizeChart();
window.addEventListener('resize', resizeChart);
// }, 1000);
}
//转换颜色函数
function hexToRgba(hex, alpha) {
......
......@@ -47,7 +47,7 @@
<div class="selector-item">
<label class="selector-label">{{ keliSelector.label }}</label>
<div class="custom-select">
<!-- 粒度 -->
<!-- 地面粒度 -->
<el-select v-model="keliSelector.value" placeholder="" style="width: 100%;" @change="keliOnChange">
<el-option v-for="item in keliSelector.options" :key="item.value" :label="item.label"
:value="item.value" />
......@@ -70,7 +70,7 @@
<div class="selector-item">
<label class="selector-label">模板列表</label>
<div class="custom-select">
<!-- 粒度 -->
<!-- 模版列表下拉框 -->
<el-select v-model="templateSelector" placeholder="请选择模板列表" @change="templateOnChange"
style="width: 100%;">
<el-option v-for="item in templateSelectorOptions" :key="item.value" :label="item.label"
......@@ -315,7 +315,16 @@ const handleAdd = () => {
onMounted(async () => {
await handleConfigData()
await handleList();
await getPanelCurveData()
await getPanelCurveData(
{
granularity: keliSelector.value.value,//类型
// startTime: '2026-01-03 23:59:59',
// endTime: '2026-01-04 23:59:59',
regionName: keliSelector.value.value == 'region' ? childrenSelector.value.value : null,//区域名称
signalSiteCode: keliSelector.value.value == 'station' ? childrenSelector.value.value : null,//信关站编码
gridCodes: keliSelector.value.value == 'grid' ? childrenSelector.value.value : null,//格网编码
}
)
// await handleConfigData()
// await getCapacityAndTrafficData()
......@@ -398,7 +407,7 @@ const getPanelCurveData = async (data) => {
}
}
// 下拉框选中模版时自动回显对应模版信息接口
const getPaneldetailApiFn = async () => {
const getPaneldetailApiFn = async (data) => {
const res = await getPaneldetailApi(data)
if (res.code == 200) {
console.log('所有曲线数据', res.data)
......@@ -584,14 +593,27 @@ const handleList = async () => {
}
}
const templateOnChange = (val) => {
const templateOnChange = async (val) => {
const selectedTemplate = templateCaseList.value.find(item => item.templateId === val)
currentSettingConfig.value = selectedTemplate
console.log('切换模版', templateSelectorOptions);
resetData() // 切换模板时重置数据,避免数据混乱
// console.log('selectedTemplate', selectedTemplate)
// availabilityCurveType
// capacityCurveType
// latencyCurveType
await getPaneldetailApiFn(
{
granularity: keliSelector.value.value,//类型
selectedTemplate: templateSelector.value,//模版编码
// startTime: '2026-01-03 23:59:59',
// endTime: '2026-01-04 23:59:59',
regionName: keliSelector.value.value == 'region' ? childrenSelector.value.value : null,//区域名称
signalSiteCode: keliSelector.value.value == 'station' ? childrenSelector.value.value : null,//信关站编码
gridCodes: keliSelector.value.value == 'grid' ? childrenSelector.value.value : null,//格网编码
}
)
calculateConfig();
}
......
import useAppStore from '@/store/module/app.js';
// const apiUrl = `ws://121.229.107.155:19021/time`; //线上
const apiUrl = `ws://127.0.0.1:19021/time`; //线上
const apiUrl = `ws://121.229.107.155:19021/time`; //线上
// const apiUrl = `ws://127.0.0.1:19021/time`; //本地
let Timewss = null;
let timer = null;
const appStore = useAppStore();
......
......@@ -9,8 +9,8 @@
import ueHeartbeatInterval from '@/store/module/app.js'
import useAppStore from '@/store/module/app.js'
const useAppStoreInstance = useAppStore()
// const apiUrl = `ws://121.229.107.155:19021/systemData`
const apiUrl = `ws://127.0.0.1:19021/systemData`//本地地址
const apiUrl = `ws://121.229.107.155:19021/systemData`
// const apiUrl = `ws://127.0.0.1:19021/systemData`//本地地址
const SubWss = new WebSocket(apiUrl);
useAppStoreInstance.setSubsystemSocket(SubWss)
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论