Skip to content

S
SatelliteDigital
提交 107d8d1e authored 作者: liujiaxing's avatar liujiaxing
浏览文件
操作

曲线问题

上级 71686d28
隐藏空白字符变更
内嵌 并排
正在显示 包含 717 行增加 和 83 行删除
src/pages/all/components/cdf/index.vue
浏览文件 @ 107d8d1e
......@@ -8,7 +8,7 @@
</div>
<div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge">
<div class="hot-title-enlarge" @click="clickBig">
<svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path class="arrow-path "
......@@ -21,7 +21,7 @@
</div>
</div>
<!-- 核心数据指标 -->
<!-- <div class="container" v-if="!props.lineArray">
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
</div>
......@@ -29,7 +29,7 @@
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve>
</div>
</div> -->
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data" :color="colorList"
......@@ -37,6 +37,52 @@
</cdfCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
<header class="dashboard-header">
<div class="logo">
<div class="logo_header">
<i class="icon-dashboard">
<img src="@/assets/images/headers/config_header.png" alt="" style="width: 20px; height: 20px;">
</i>
<span class="logo_header_content">通信曲线</span>
</div>
<div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div>
<div class="logo logo_right">
<hr class="divider">
</div>
<div class="header-controls">
<button class="close-btn" @click="closeDialogFn">×</button>
</div>
</header>
<!-- 主体内容区 -->
<main class="dashboard-main">
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data"
:color="colorList" :isShowDetial="true">
</cdfCurve>
</div>
</div>
</main>
</div>
</el-dialog>
</div>
</template>
......@@ -77,6 +123,27 @@ onBeforeUnmount(() => {
//console.log("中，zhelixieza");
});
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "open"
})));
}
}
const closeDialogFn = () => {
bigStatus.value = false
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "close"
})));
}
}
const componentProps = ref({});
</script>
......@@ -169,4 +236,175 @@ const componentProps = ref({});
.flex-left {
/* background-color: rgb(180, 180, 180); */
}
</style>
<style scoped>
/* 基础样式设置 */
.dashboard-container {
background-color: #000000;
color: #080606;
position: fixed;
/* 改为fixed定位 */
left: 10%;
top: 10%;
width: 1550px;
z-index: 1001;
overflow: hidden;
}
/* 头部样式 */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0rem 1rem;
}
.logo {
display: flex;
align-items: center;
height: 100%;
width: 200px;
justify-content: space-between;
color: #ffffff;
}
.logo_header {
width: 90px;
height: 100%;
align-items: center;
justify-content: space-between;
display: flex;
}
.icon-dashboard {
width: 10px;
height: 10px;
display: flex;
align-items: center;
}
.logo_header_content {
font-weight: 900;
font-size: 16px;
/* font-family: 'Consolas', monospace; */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.logo_header_right {
display: flex;
padding-left: 10px;
align-items: center;
width: 100px;
height: 100%;
}
.logo_header_right_content {
color: #000000;
padding: 2px;
font-size: 12px;
border-radius: 5px;
font-weight: 200;
background-color: #6ffcba;
}
.logo_right {
width: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.divider {
width: 100%;
border: none;
border-top: 1px solid #3e3f3f;
margin: 0;
}
.header-controls {
display: flex;
align-items: center;
gap: 1rem;
}
.close-btn {
background: none;
border: none;
color: #8890a6;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.2s;
}
.close-btn:hover {
color: #ffffff;
}
/* 主内容区域 */
.dashboard-main {
height: 70vh;
padding: 1rem;
overflow-y: hidden;
}
/* 弹框遮罩层 */
:deep().dialogModel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
/* background-color: red; */
}
:deep().dashboard-container {
border: 1px solid #cccccc2a;
}
:deep().dialogModel .el-dialog__body {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
:deep(.dialogModel>.el-dialog__body>.dashboard-container::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
:deep(.dialogModel>.el-dialog__body::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
</style>
\ No newline at end of file
src/pages/all/components/hotMapComponents/hotMap.vue
浏览文件 @ 107d8d1e
......@@ -38,6 +38,8 @@ const props = defineProps({
watch(() => props.data, (newVal) => {
// // updateChart();
console.log('触发时');
setTimeout(() => {
initChart();
}, 0)
......@@ -51,10 +53,14 @@ const obj = {
}
watch(() => appStore.currentHotMapCountry, (newVal, oldVal) => {
console.log('触发时5555');
initChart()
})
watch(() => maxValue.value, (newVal) => {
console.log('562626触发时');
if (myChart && newVal > 0) {
myChart.setOption({
visualMap: {
......@@ -93,8 +99,9 @@ const data = computed(() => {
})
const mergeData = (data, baseData = []) => {
if (!baseData) return []
// if(data)
let _baseData = baseData.map(item => ({
let _baseData = baseData?.map(item => ({
name: item.gridName,
code: item.gridCode,
value: [
......@@ -331,6 +338,8 @@ function resizeChart() {
}
onMounted(async () => {
console.log(6636);
// 确保DOM渲染完成后初始化图表
// nextTick(() => {
// initChart();
......
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 107d8d1e
......@@ -10,9 +10,13 @@
<div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div>
<el-select v-model="selectedValue" placeholder="切换热力图" class="selects">
<el-option v-for="(building, index) in props.legendName" :key="building" :label="building" :value="index" />
<el-option v-for="(building, index) in props.legendName" :key="building" :label="building" :value="index"
@click="() => {
//console.log('我是喧杂',playbackSpeed);
hotSelectFn()
}" />
</el-select>
<div class="hot-title-enlarge">
<div class="hot-title-enlarge" @click="clickBig">
<svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path class="arrow-path "
......@@ -26,13 +30,51 @@
</div>
<!-- 核心数据指标 -->
<div class="container">
<div class="flex-box ">
<div class="flex-box " v-if="hotStatus">
<hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap>
</div>
<!-- <div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
</div> -->
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
<header class="dashboard-header">
<div class="logo">
<div class="logo_header">
<i class="icon-dashboard">
<img src="@/assets/images/headers/config_header.png" alt="" style="width: 20px; height: 20px;">
</i>
<span class="logo_header_content">热力图</span>
</div>
<div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div>
<div class="logo logo_right">
<hr class="divider">
</div>
<div class="header-controls">
<button class="close-btn" @click="closeDialogFn">×</button>
</div>
</header>
<!-- 主体内容区 -->
<main class="dashboard-main">
<div class="container" v-if="bigStatus">
<!-- 核心数据指标 热力图-->
<div class="flex-box flex-left">
<hotMap :title="props.legendName[0]" :data="props.data[0]"></hotMap>
</div>
<div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
</div>
</div>
</main>
</div>
</el-dialog>
</div>
</template>
......@@ -57,8 +99,37 @@ const props = defineProps({
default: () => []
}
})
const hotStatus = ref(true)
const selectedValue = ref(0)//热力图下拉框
console.log(props, '热力图数据')
const bigStatus = ref(false)
const hotSelectFn = () => {
hotStatus.value = false
// selectedValue.value = false
setTimeout(() => {
hotStatus.value = true
}, 100);
}
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "open"
})));
}
}
const closeDialogFn = () => {
bigStatus.value = false
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "close"
})));
}
}
</script>
<style scoped>
......@@ -147,7 +218,192 @@ console.log(props, '热力图数据')
background-color: rgb(180, 180, 180);
} */
.selects {
width: 140px;
width: 140px !important;
height: 32px !important;
border-radius: 0px !important;
}
:deep(.selects .el-select__wrapper) {
height: 12.5px;
background: #000000;
border: 1px solid #000000;
color: #fff !important;
box-shadow: 0 0 2px rgba(131, 131, 131, 0.95);
}
:deep(.selects .el-select__wrapper .el-select__placeholder) {
color: #fff !important;
}
</style>
<style scoped>
/* 基础样式设置 */
.dashboard-container {
background-color: #000000;
color: #080606;
position: fixed;
/* 改为fixed定位 */
left: 10%;
top: 10%;
width: 1550px;
z-index: 1001;
overflow: hidden;
}
/* 头部样式 */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 0rem 1rem;
}
.logo {
display: flex;
align-items: center;
height: 100%;
width: 200px;
justify-content: space-between;
color: #ffffff;
}
.logo_header {
width: 90px;
height: 100%;
align-items: center;
justify-content: space-between;
display: flex;
}
.icon-dashboard {
width: 10px;
height: 10px;
display: flex;
align-items: center;
}
.logo_header_content {
font-weight: 900;
font-size: 16px;
/* font-family: 'Consolas', monospace; */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.logo_header_right {
display: flex;
padding-left: 10px;
align-items: center;
width: 100px;
height: 100%;
}
.logo_header_right_content {
color: #000000;
padding: 2px;
font-size: 12px;
border-radius: 5px;
font-weight: 200;
background-color: #6ffcba;
}
.logo_right {
width: 80%;
display: flex;
align-items: center;
justify-content: center;
}
.divider {
width: 100%;
border: none;
border-top: 1px solid #3e3f3f;
margin: 0;
}
.header-controls {
display: flex;
align-items: center;
gap: 1rem;
}
.close-btn {
background: none;
border: none;
color: #8890a6;
cursor: pointer;
font-size: 1.2rem;
transition: color 0.2s;
}
.close-btn:hover {
color: #ffffff;
}
/* 主内容区域 */
.dashboard-main {
height: 70vh;
padding: 1rem;
overflow-y: hidden;
}
/* 弹框遮罩层 */
:deep().dialogModel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
/* background-color: red; */
}
:deep().dashboard-container {
border: 1px solid #cccccc2a;
}
:deep().dialogModel .el-dialog__body {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
:deep(.dialogModel>.el-dialog__body>.dashboard-container::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
:deep(.dialogModel>.el-dialog__body::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
</style>
\ No newline at end of file
src/pages/all/components/instant/index.vue
浏览文件 @ 107d8d1e
......@@ -37,8 +37,8 @@
:propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" :modal-penetrable='true' width="200"
:before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container">
<!-- 顶部导航栏 -->
<header class="dashboard-header">
......@@ -117,20 +117,38 @@ const props = defineProps({
lineArray: {
type: Boolean,
default: false
}
},
});
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
console.log('瞬时值曲线', props.lineArray)
console.log('瞬时值曲线', props)
}, 2000);
// setInterval(() => {
// console.log(props.lineArray, '類別');
// }, 3000);
const bigStatus = ref(false)
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "open"
})));
}
}
const closeDialogFn = () => {
bigStatus.value = false
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "close"
})));
}
}
const componentProps = ref({})
</script>
......@@ -336,4 +354,63 @@ const componentProps = ref({})
padding: 1rem;
overflow-y: hidden;
}
/* 弹框遮罩层 */
:deep().dialogModel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
/* background-color: red; */
}
:deep().dashboard-container {
border: 1px solid #cccccc2a;
}
:deep().dialogModel .el-dialog__body {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
:deep(.dialogModel>.el-dialog__body>.dashboard-container::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
:deep(.dialogModel>.el-dialog__body::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
</style>
\ No newline at end of file
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 107d8d1e
......@@ -121,6 +121,7 @@ onUnmounted(() => {
myChart.dispose();
}
});
const series1Data = ref([])//时间轴对象数据
function initChart() {
const chartDom = document.getElementById(idName.value);
......@@ -129,49 +130,63 @@ function initChart() {
};
chartDom.style.height = '100%';
chartDom.style.width = '100%';
//判断x轴刻度问题
var firstTime = 0, lastTime = 0;
let seriesArr = [];//图标数据
if (props.lineArray) {
props.data.forEach((it, index) => {
series1Data.value = it.map((item, idx) => [item.x, it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(it, series1Data.value, '最终数据');
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
data: series1Data.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
// console.log(series1Data.value, '最终数据');
if (series1Data.value.length > 0) {
if (firstTime < 1) {
firstTime = new Date(series1Data.value[0][0]).getTime()
}
firstTime = new Date(series1Data.value[0][0]).getTime() < firstTime ? new Date(series1Data.value[0][0]).getTime() : firstTime
lastTime = new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() > lastTime ? new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() : lastTime
seriesArr.push({
color: props.color[index],
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: hexToRgba(props.color[index], 0.8)
},
{
offset: 1,
color: hexToRgba(props.color[index], 0.2)
}
],
global: false
}
},
markLine: {
name: props.legendName[index],
data: series1Data.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
label: {
show: false
lineStyle: {
color: props.color[index],
width: 3
},
}
})
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: hexToRgba(props.color[index], 0.8)
},
{
offset: 1,
color: hexToRgba(props.color[index], 0.2)
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
}
})
} else {
seriesArr = []
firstTime = 0
lastTime = 0
}
})
} else {
seriesArr.push({
......@@ -232,7 +247,6 @@ function initChart() {
})
}
var option = {
legend: {
show: true,
......@@ -263,7 +277,7 @@ function initChart() {
// type: 'category',
type: props.lineArray ? 'time' : 'category',
boundaryGap: false,
// data: dataX.value,
data: dataX.value,
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: {
interval: 0,
......@@ -271,25 +285,27 @@ function initChart() {
color: '#fff',
rotate: 45,
margin: 20,
fontSize: 10,
interval: 'auto', // 或直接不写
hideOverlap: true, // 防重叠（很关键）
interval: !props.lineArray ? 'auto' : 0, // 或直接不写
hideOverlap: false, // 防重叠（很关键）
showMinLabel: true, // 显示最小刻度标签
showMaxLabel: true, // 显示最大刻度标签
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 (!props.lineArray) {
return value
}
if (value.toString().includes(':')) {
const date = new Date(value);
const minutes = date.getMinutes();
if (minutes === 0 || minutes === 30) {
// console.log(value, '判断分钟');
if (minutes === 0) {
return value
}
} else if (!isNaN(Number(value))) {
} else if (!isNaN(Number(value)) || (firstTime == value || lastTime == value)) {//展示整点和其实和结束点
const date = new Date(value);
const minutes = date.getMinutes();
if (minutes === 0 || minutes === 30) {
if (firstTime == value || lastTime == value) {
return timestampToHMS(value)
}
if (minutes === 0) {
// console.log(date, '判断分钟11', value);
return timestampToHMS(value)
}
......@@ -375,6 +391,7 @@ function initChart() {
}
}
};
// console.log(option, '配置项目');
if (props.lineArray) {
delete option.xAxis.data
......@@ -395,10 +412,10 @@ function hexToRgba(hex, alpha) {
}
//将时间戳转换成时分秒
function timestampToHMS(timestamp) {
const date = new Date(timestamp * 1000); // 如果传入的是秒，需要乘以1000转换为毫秒
const hours = date.getUTCHours().toString().padStart(2, '0');
const minutes = date.getUTCMinutes().toString().padStart(2, '0');
const seconds = date.getUTCSeconds().toString().padStart(2, '0');
const date = new Date(timestamp); // 如果传入的是秒，需要乘以1000转换为毫秒
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${hours}:${minutes}:${seconds}`;
}
var timesset = null
......
src/pages/header/component/screenConfigCase.vue
浏览文件 @ 107d8d1e
......@@ -29,6 +29,8 @@
</div>
</div>
<div class="section-item_content_down">
<!-- <div>{{ el.defaultComponent }}</div> -->
<KeepAlive>
<component :is="el.defaultComponent" :title="titleFn(el)" :slogan="el.title" :legendName="el.legendName">
</component>
......@@ -317,12 +319,9 @@ watch(() => props.settingConfig, (newVal) => {
// debugger
for (let attr in newVal) {
for (let item of settingConfig.value) {
const obj = item.templateSelector.find(el => el.type === attr)
if (!obj) continue
obj.default = newVal[attr]
if (attr.includes('CurveType')) {
switch (newVal[attr]) {
case '1':
......
src/pages/header/index.vue
浏览文件 @ 107d8d1e
......@@ -57,7 +57,7 @@
</div>
</div>
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" modal-class="dialogModel" :modal="true"
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" class="dialogModel" :modal="true"
:show-close="false" :before-close="handleScreenConfigeClose" style="padding: 0;margin: 0;z-index: 999;">
<screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
<!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
......@@ -553,20 +553,54 @@ const initChartData = async () => {
/* 弹框遮罩层 */
:deep().dialogModel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
}
:deep().dashboard-container {
:deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a;
/* border: 10px solid blue; */
}
:deep().dashboard-container::before {
:deep().dialogModel .el-dialog__body {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
:deep(.dialogModel>.el-dialog__body>.dashboard-container::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
:deep(.dialogModel>.el-dialog__body::before) {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
......
src/pages/lefts/index.vue
浏览文件 @ 107d8d1e
......@@ -24,7 +24,7 @@
<div class="orbit-visualization">
<!-- <ordit></ordit> -->
<el-carousel :key="carouselKey" indicator-position="none" height="180px" :loop="true"
<el-carousel :key="carouselKey" indicator-position="none" height="120px" :loop="true"
:autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
<el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs"
style="text-align: center;height: 100%;">
......@@ -958,12 +958,12 @@ onUnmounted(() => {
.constellation-panel {
/* background-color: #0a0f1e; */
color: #e0e7ff;
padding: 15px;
padding: 10px;
border-radius: 8px;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
gap: 10px;
overflow-y: auto;
background-color: #010102;
/* background-color: rgba(0, 0, 0, 0.2); */
......@@ -973,7 +973,7 @@ onUnmounted(() => {
.header-container {
display: flex;
flex-direction: column;
gap: 10px;
gap: 5px;
/* 方法1: 在定义变量时就计算好 */
/* min-height: calc(((var(--InnerHeight)-20) / 3) * 1px); */
......@@ -1446,7 +1446,7 @@ onUnmounted(() => {
.section-divider {
display: flex;
align-items: center;
margin: 0px 0 5px 0;
/* margin: 0px 0 5px 0; */
background-image: url('@/assets/images/lefts/bg_title.png');
background-size: cover;
/* 或者 cover/auto */
......@@ -1483,7 +1483,7 @@ onUnmounted(() => {
.satellite-table-container {
width: 100%;
margin-top: 20px;
margin-top: 5px;
overflow: hidden;
}
......@@ -1507,7 +1507,7 @@ onUnmounted(() => {
.table-header {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
margin-bottom: 5px;
width: 100%;
}
......
src/pages/rights/index.vue
浏览文件 @ 107d8d1e
......@@ -186,12 +186,13 @@ function errorDialoghandleClose() {
<style scoped>
.constellation-panel {
color: #e0e7ff;
padding: 15px;
padding: 10px;
border-radius: 8px;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: space-around;
gap: 10px;
overflow-y: auto;
background-color: #010102;
}
......@@ -200,17 +201,17 @@ function errorDialoghandleClose() {
display: flex;
flex-direction: column;
gap: 15px;
min-height: 300px;
min-height: 20px;
}
.satellite-section {
min-height: 300px;
min-height: 20px;
/* background-color: #2E7DFF; */
/* overflow-y: hidden; */
}
.ground-system-section {
min-height: 300px;
min-height: 20px;
/* background-color: #2E7DFF; */
/* overflow-y: hidden; */
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论