提交 1db1452d authored 作者: 汪雄's avatar 汪雄

完善曲线配置细节

上级 e6ae360b
...@@ -269,7 +269,7 @@ function initChart() { ...@@ -269,7 +269,7 @@ function initChart() {
minSpan: 1, minSpan: 1,
bottom: 8, bottom: 8,
left: '14%', left: '14%',
right: '22%', right: '10%',
height: Number(props?.zoomHeight) || 20, height: Number(props?.zoomHeight) || 20,
handleLabel: { handleLabel: {
show: false show: false
......
...@@ -268,7 +268,7 @@ function initChart() { ...@@ -268,7 +268,7 @@ function initChart() {
end: 100, end: 100,
minSpan: 1, minSpan: 1,
type: 'slider', type: 'slider',
left: '10%', left: '14%',
right: '10%', right: '10%',
height: Number(props.zoomHeight) || 20, height: Number(props.zoomHeight) || 20,
bottom: 8, bottom: 8,
......
<template> <template>
<div class="common-layout" :style="{ '--headerHeight': headerHeight, '--asideWidth': asideWidth }"> <div class="common-layout" :style="{ '--headerHeight': headerHeight, '--asideWidth': asideWidth }">
<!-- 悬浮控制窗口 --> <!-- 悬浮控制窗口 -->
<div class="control-panel" id="control_panel1" v-if="useAppStoreInstance.iscontrolPanelShow"> <div class="control-panel" id="control_panel1" v-if="useAppStoreInstance.iscontrolPanelShow">
<div class="panel-content"> <div class="panel-content">
...@@ -18,6 +19,23 @@ ...@@ -18,6 +19,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="control-panel" style="top: 22.8%;" id="control_panel1" v-else="useAppStoreInstance.iscontrolPanelShow">
<div class="panel-content">
<div class="controls-list">
<div class="control-item" v-for="item in subControls" :key="item.label">
<el-switch
v-model="item.enabled"
class="control-switch"
active-color="#165DFF"
inactive-color="#4E5969"
:disabled="item.disabled"
@change="handleSwitchChange(item)"
/>
<span class="control-label">{{ item.label }}</span>
</div>
</div>
</div>
</div>
<!-- <div class="search-panel" id="search_panel"> <!-- <div class="search-panel" id="search_panel">
<div class="search-panel-wrapper"> <div class="search-panel-wrapper">
<el-input <el-input
...@@ -97,6 +115,14 @@ const controls = ref([ ...@@ -97,6 +115,14 @@ const controls = ref([
{ label: '图例', enabled: useAppStoreInstance.islegendShow, disabled: false } { label: '图例', enabled: useAppStoreInstance.islegendShow, disabled: false }
]) ])
// let siteExpand1 = ref(false)
// let siteExpand2 = ref(false)
const subControls = ref([
{ label: '卫星展开一级', enabled: false, disabled: false },
{ label: '卫星展开二级', enabled: false, disabled: false },
])
const handleControlChange = (item, value) => { const handleControlChange = (item, value) => {
//console.log(`${item.label} 状态变为: ${value ? '开启' : '关闭'}`) //console.log(`${item.label} 状态变为: ${value ? '开启' : '关闭'}`)
item.enabled = value item.enabled = value
...@@ -160,6 +186,14 @@ const handleSwitchChange = (item) => { ...@@ -160,6 +186,14 @@ const handleSwitchChange = (item) => {
})));} })));}
break; break;
case '卫星展开一级':
console.log(11)
break;
case '卫星展开二级':
console.log(22)
break;
default: default:
ElMessage({ ElMessage({
...@@ -520,6 +554,7 @@ onUnmounted(() => { ...@@ -520,6 +554,7 @@ onUnmounted(() => {
.control-panel { .control-panel {
right: -60px; right: -60px;
/* top: 30px; */
} }
.search-panel { .search-panel {
......
...@@ -238,7 +238,7 @@ const templateSelector = ref() ...@@ -238,7 +238,7 @@ const templateSelector = ref()
const templateSelectorOptions = ref([]) const templateSelectorOptions = ref([])
watch(() => templateCaseList.value, () => { watch(() => templateCaseList.value, () => {
console.log('templateCaseList', templateCaseList.value) // console.log('templateCaseList', templateCaseList.value)
templateSelectorOptions.value = templateCaseList.value.map(item => ({ templateSelectorOptions.value = templateCaseList.value.map(item => ({
label: item.templateName, label: item.templateName,
value: item.templateId value: item.templateId
...@@ -490,7 +490,7 @@ const handleConfigApplay = async () => { ...@@ -490,7 +490,7 @@ const handleConfigApplay = async () => {
component3: currentComponent3.value, component3: currentComponent3.value,
_titles: titles.value _titles: titles.value
} }
console.log('appStore.chartConfig 传递的时候', appStore.chartConfig) // console.log('appStore.chartConfig 传递的时候', appStore.chartConfig)
// Promise.all([ // Promise.all([
// // getCapacityData(data), // // getCapacityData(data),
...@@ -516,7 +516,6 @@ const handleConfigApplay = async () => { ...@@ -516,7 +516,6 @@ const handleConfigApplay = async () => {
} }
const handleConfigData = async () => { const handleConfigData = async () => {
console.log('handleConfigData')
const ret = await templateConfigQuery() const ret = await templateConfigQuery()
if (ret.code == 200 && ret.data.templateConfigResponse !== null) { if (ret.code == 200 && ret.data.templateConfigResponse !== null) {
keliSelector.value.value = ret.data.granularity keliSelector.value.value = ret.data.granularity
...@@ -540,7 +539,7 @@ const handleConfigData = async () => { ...@@ -540,7 +539,7 @@ const handleConfigData = async () => {
// }) // })
// calculateTitle(ret.data.templateConfigResponse) // calculateTitle(ret.data.templateConfigResponse)
} }
console.log('ret', ret) // console.log('ret', ret)
} }
const handleList = async () => { const handleList = async () => {
...@@ -556,7 +555,7 @@ const templateOnChange = (val) => { ...@@ -556,7 +555,7 @@ const templateOnChange = (val) => {
const selectedTemplate = templateCaseList.value.find(item => item.templateId === val) const selectedTemplate = templateCaseList.value.find(item => item.templateId === val)
currentSettingConfig.value = selectedTemplate currentSettingConfig.value = selectedTemplate
resetData() // 切换模板时重置数据,避免数据混乱 resetData() // 切换模板时重置数据,避免数据混乱
console.log('selectedTemplate', selectedTemplate) // console.log('selectedTemplate', selectedTemplate)
// availabilityCurveType // availabilityCurveType
// capacityCurveType // capacityCurveType
// latencyCurveType // latencyCurveType
......
...@@ -51,8 +51,8 @@ let granularity = null ...@@ -51,8 +51,8 @@ let granularity = null
let granularityValue = null let granularityValue = null
watch(() => appStore.chartConfig, (newVal) => { watch(() => appStore.chartConfig, (newVal) => {
console.log('appStore.chartConfig', appStore.chartConfig) // console.log('appStore.chartConfig', appStore.chartConfig)
console.log('newVal', newVal) // console.log('newVal', newVal)
if (appStore.chartConfig) { if (appStore.chartConfig) {
const { _capacityData, _trafficData, _delayData, _availabilityData, _lossRateData, _titles } = appStore.chartConfig const { _capacityData, _trafficData, _delayData, _availabilityData, _lossRateData, _titles } = appStore.chartConfig
component1.value = markRaw(appStore.chartConfig.component1) component1.value = markRaw(appStore.chartConfig.component1)
...@@ -65,17 +65,8 @@ watch(() => appStore.chartConfig, (newVal) => { ...@@ -65,17 +65,8 @@ watch(() => appStore.chartConfig, (newVal) => {
availabilityData.value = _availabilityData availabilityData.value = _availabilityData
lossRateData.value = _lossRateData lossRateData.value = _lossRateData
console.log('1', capacityData.value)
console.log('2', trafficData.value)
console.log('3', delayData.value)
console.log('4', availabilityData.value)
console.log('5', lossRateData.value)
titles.value = _titles titles.value = _titles
// console.log('component1.value', component1.value)
// console.log('component2.value', component2.value)
// console.log('component3.value', component3.value)
} }
}, { deep: true }) }, { deep: true })
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论