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 @@ ...@@ -8,7 +8,7 @@
</div> </div>
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div> <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"> <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" /> <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path class="arrow-path " <path class="arrow-path "
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<!-- 核心数据指标 --> <!-- 核心数据指标 -->
<!-- <div class="container" v-if="!props.lineArray"> <div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left"> <div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve> <cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
</div> </div>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true"> <cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve> </cdfCurve>
</div> </div>
</div> --> </div>
<div class="container" v-if="props.lineArray"> <div class="container" v-if="props.lineArray">
<div class="flex-box"> <div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data" :color="colorList" <cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data" :color="colorList"
...@@ -37,6 +37,52 @@ ...@@ -37,6 +37,52 @@
</cdfCurve> </cdfCurve>
</div> </div>
</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> </div>
</template> </template>
...@@ -77,6 +123,27 @@ onBeforeUnmount(() => { ...@@ -77,6 +123,27 @@ onBeforeUnmount(() => {
//console.log("中，zhelixieza"); //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({}); const componentProps = ref({});
</script> </script>
...@@ -169,4 +236,175 @@ const componentProps = ref({}); ...@@ -169,4 +236,175 @@ const componentProps = ref({});
.flex-left { .flex-left {
/* background-color: rgb(180, 180, 180); */ /* 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> </style>
\ No newline at end of file
src/pages/all/components/hotMapComponents/hotMap.vue
浏览文件 @ 107d8d1e
...@@ -38,6 +38,8 @@ const props = defineProps({ ...@@ -38,6 +38,8 @@ const props = defineProps({
watch(() => props.data, (newVal) => { watch(() => props.data, (newVal) => {
// // updateChart(); // // updateChart();
console.log('触发时');
setTimeout(() => { setTimeout(() => {
initChart(); initChart();
}, 0) }, 0)
...@@ -51,10 +53,14 @@ const obj = { ...@@ -51,10 +53,14 @@ const obj = {
} }
watch(() => appStore.currentHotMapCountry, (newVal, oldVal) => { watch(() => appStore.currentHotMapCountry, (newVal, oldVal) => {
console.log('触发时5555');
initChart() initChart()
}) })
watch(() => maxValue.value, (newVal) => { watch(() => maxValue.value, (newVal) => {
console.log('562626触发时');
if (myChart && newVal > 0) { if (myChart && newVal > 0) {
myChart.setOption({ myChart.setOption({
visualMap: { visualMap: {
...@@ -93,8 +99,9 @@ const data = computed(() => { ...@@ -93,8 +99,9 @@ const data = computed(() => {
}) })
const mergeData = (data, baseData = []) => { const mergeData = (data, baseData = []) => {
if (!baseData) return []
// if(data) // if(data)
let _baseData = baseData.map(item => ({ let _baseData = baseData?.map(item => ({
name: item.gridName, name: item.gridName,
code: item.gridCode, code: item.gridCode,
value: [ value: [
...@@ -331,6 +338,8 @@ function resizeChart() { ...@@ -331,6 +338,8 @@ function resizeChart() {
} }
onMounted(async () => { onMounted(async () => {
console.log(6636);
// 确保DOM渲染完成后初始化图表 // 确保DOM渲染完成后初始化图表
// nextTick(() => { // nextTick(() => {
// initChart(); // initChart();
......
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 107d8d1e
...@@ -10,9 +10,13 @@ ...@@ -10,9 +10,13 @@
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div> <div class="hot-title-text">{{ props.title }}</div>
<el-select v-model="selectedValue" placeholder="切换热力图" class="selects"> <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> </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"> <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" /> <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path class="arrow-path " <path class="arrow-path "
...@@ -26,13 +30,51 @@ ...@@ -26,13 +30,51 @@
</div> </div>
<!-- 核心数据指标 --> <!-- 核心数据指标 -->
<div class="container"> <div class="container">
<div class="flex-box "> <div class="flex-box " v-if="hotStatus">
<hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap> <hotMap :title="props.legendName[selectedValue]" :data="props.data[selectedValue]"></hotMap>
</div> </div>
<!-- <div class="flex-box flex-right"> <!-- <div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap> <hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
</div> --> </div> -->
</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> </div>
</template> </template>
...@@ -57,8 +99,37 @@ const props = defineProps({ ...@@ -57,8 +99,37 @@ const props = defineProps({
default: () => [] default: () => []
} }
}) })
const hotStatus = ref(true)
const selectedValue = ref(0)//热力图下拉框 const selectedValue = ref(0)//热力图下拉框
console.log(props, '热力图数据') 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> </script>
<style scoped> <style scoped>
...@@ -147,7 +218,192 @@ console.log(props, '热力图数据') ...@@ -147,7 +218,192 @@ console.log(props, '热力图数据')
background-color: rgb(180, 180, 180); background-color: rgb(180, 180, 180);
} */ } */
.selects { .selects {
width: 140px; width: 140px !important;
height: 32px !important;
border-radius: 0px !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> </style>
\ No newline at end of file
src/pages/all/components/instant/index.vue
浏览文件 @ 107d8d1e
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
:propsDate="componentProps" :color="colorList"></instantCurve> :propsDate="componentProps" :color="colorList"></instantCurve>
</div> </div>
</div> </div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" :modal-penetrable='true' width="200" <el-dialog v-model="bigStatus" :modal='true' :show-close="true" modal-class="dialogModel" :modal-penetrable='true'
:before-close="closeDialogFn" style="margin: 0;padding: 0; "> width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container"> <div class="dashboard-container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<header class="dashboard-header"> <header class="dashboard-header">
...@@ -117,20 +117,38 @@ const props = defineProps({ ...@@ -117,20 +117,38 @@ const props = defineProps({
lineArray: { lineArray: {
type: Boolean, type: Boolean,
default: false default: false
} },
}); });
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置 const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => { setTimeout(() => {
console.log('瞬时值曲线', props.lineArray) console.log('瞬时值曲线', props)
}, 2000); }, 2000);
// setInterval(() => {
// console.log(props.lineArray, '類別');
// }, 3000);
const bigStatus = ref(false) const bigStatus = ref(false)
//点击放大窗口详细查看曲线 //点击放大窗口详细查看曲线
const clickBig = () => { const clickBig = () => {
console.log('放大'); console.log('放大');
bigStatus.value = true bigStatus.value = true
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "open"
})));
}
} }
const closeDialogFn = () => { const closeDialogFn = () => {
bigStatus.value = false bigStatus.value = false
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "LargeScreenConfigurationDialog",
status: "close"
})));
}
} }
const componentProps = ref({}) const componentProps = ref({})
</script> </script>
...@@ -336,4 +354,63 @@ const componentProps = ref({}) ...@@ -336,4 +354,63 @@ const componentProps = ref({})
padding: 1rem; padding: 1rem;
overflow-y: hidden; 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> </style>
\ No newline at end of file
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 107d8d1e
...@@ -121,6 +121,7 @@ onUnmounted(() => { ...@@ -121,6 +121,7 @@ onUnmounted(() => {
myChart.dispose(); myChart.dispose();
} }
}); });
const series1Data = ref([])//时间轴对象数据 const series1Data = ref([])//时间轴对象数据
function initChart() { function initChart() {
const chartDom = document.getElementById(idName.value); const chartDom = document.getElementById(idName.value);
...@@ -129,49 +130,63 @@ function initChart() { ...@@ -129,49 +130,63 @@ function initChart() {
}; };
chartDom.style.height = '100%'; chartDom.style.height = '100%';
chartDom.style.width = '100%'; chartDom.style.width = '100%';
//判断x轴刻度问题
var firstTime = 0, lastTime = 0;
let seriesArr = [];//图标数据 let seriesArr = [];//图标数据
if (props.lineArray) { if (props.lineArray) {
props.data.forEach((it, index) => { 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]); 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, '最终数据'); // console.log(series1Data.value, '最终数据');
seriesArr.push({ if (series1Data.value.length > 0) {
color: props.color[index], if (firstTime < 1) {
name: props.legendName[index], firstTime = new Date(series1Data.value[0][0]).getTime()
data: series1Data.value, }
type: 'line', firstTime = new Date(series1Data.value[0][0]).getTime() < firstTime ? new Date(series1Data.value[0][0]).getTime() : firstTime
smooth: 0.6, lastTime = new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() > lastTime ? new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() : lastTime
symbol: 'none', seriesArr.push({
lineStyle: {
color: props.color[index], color: props.color[index],
width: 3 name: props.legendName[index],
}, data: series1Data.value,
areaStyle: { type: 'line',
color: { smooth: 0.6,
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', symbol: 'none',
label: { lineStyle: {
show: false 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 { } else {
seriesArr.push({ seriesArr.push({
...@@ -232,7 +247,6 @@ function initChart() { ...@@ -232,7 +247,6 @@ function initChart() {
}) })
} }
var option = { var option = {
legend: { legend: {
show: true, show: true,
...@@ -263,7 +277,7 @@ function initChart() { ...@@ -263,7 +277,7 @@ function initChart() {
// type: 'category', // type: 'category',
type: props.lineArray ? 'time' : 'category', type: props.lineArray ? 'time' : 'category',
boundaryGap: false, boundaryGap: false,
// data: dataX.value, data: dataX.value,
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: { axisLabel: {
interval: 0, interval: 0,
...@@ -271,25 +285,27 @@ function initChart() { ...@@ -271,25 +285,27 @@ function initChart() {
color: '#fff', color: '#fff',
rotate: 45, rotate: 45,
margin: 20, margin: 20,
fontSize: 10, interval: !props.lineArray ? 'auto' : 0, // 或直接不写
interval: 'auto', // 或直接不写 hideOverlap: false, // 防重叠（很关键）
hideOverlap: true, // 防重叠（很关键） showMinLabel: true, // 显示最小刻度标签
showMaxLabel: true, // 显示最大刻度标签
formatter: function (value) { formatter: function (value) {
if (!props.lineArray) {
const date = new Date(value); return value
console.log(value, '判断依据', `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`); }
if (value.toString().includes(':')) { if (value.toString().includes(':')) {
const date = new Date(value); const date = new Date(value);
const minutes = date.getMinutes(); const minutes = date.getMinutes();
if (minutes === 0 || minutes === 30) { if (minutes === 0) {
// console.log(value, '判断分钟');
return value return value
} }
} else if (!isNaN(Number(value))) { } else if (!isNaN(Number(value)) || (firstTime == value || lastTime == value)) {//展示整点和其实和结束点
const date = new Date(value); const date = new Date(value);
const minutes = date.getMinutes(); 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); // console.log(date, '判断分钟11', value);
return timestampToHMS(value) return timestampToHMS(value)
} }
...@@ -375,6 +391,7 @@ function initChart() { ...@@ -375,6 +391,7 @@ function initChart() {
} }
} }
}; };
// console.log(option, '配置项目');
if (props.lineArray) { if (props.lineArray) {
delete option.xAxis.data delete option.xAxis.data
...@@ -395,10 +412,10 @@ function hexToRgba(hex, alpha) { ...@@ -395,10 +412,10 @@ function hexToRgba(hex, alpha) {
} }
//将时间戳转换成时分秒 //将时间戳转换成时分秒
function timestampToHMS(timestamp) { function timestampToHMS(timestamp) {
const date = new Date(timestamp * 1000); // 如果传入的是秒，需要乘以1000转换为毫秒 const date = new Date(timestamp); // 如果传入的是秒，需要乘以1000转换为毫秒
const hours = date.getUTCHours().toString().padStart(2, '0'); const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getUTCMinutes().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getUTCSeconds().toString().padStart(2, '0'); const seconds = date.getSeconds().toString().padStart(2, '0');
return `${hours}:${minutes}:${seconds}`; return `${hours}:${minutes}:${seconds}`;
} }
var timesset = null var timesset = null
......
src/pages/header/component/screenConfigCase.vue
浏览文件 @ 107d8d1e
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
</div> </div>
</div> </div>
<div class="section-item_content_down"> <div class="section-item_content_down">
<!-- <div>{{ el.defaultComponent }}</div> -->
<KeepAlive> <KeepAlive>
<component :is="el.defaultComponent" :title="titleFn(el)" :slogan="el.title" :legendName="el.legendName"> <component :is="el.defaultComponent" :title="titleFn(el)" :slogan="el.title" :legendName="el.legendName">
</component> </component>
...@@ -317,12 +319,9 @@ watch(() => props.settingConfig, (newVal) => { ...@@ -317,12 +319,9 @@ watch(() => props.settingConfig, (newVal) => {
// debugger // debugger
for (let attr in newVal) { for (let attr in newVal) {
for (let item of settingConfig.value) { for (let item of settingConfig.value) {
const obj = item.templateSelector.find(el => el.type === attr) const obj = item.templateSelector.find(el => el.type === attr)
if (!obj) continue if (!obj) continue
obj.default = newVal[attr] obj.default = newVal[attr]
if (attr.includes('CurveType')) { if (attr.includes('CurveType')) {
switch (newVal[attr]) { switch (newVal[attr]) {
case '1': case '1':
......
src/pages/header/index.vue
浏览文件 @ 107d8d1e
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
</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;"> :show-close="false" :before-close="handleScreenConfigeClose" style="padding: 0;margin: 0;z-index: 999;">
<screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige> <screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
<!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> --> <!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
...@@ -553,20 +553,54 @@ const initChartData = async () => { ...@@ -553,20 +553,54 @@ const initChartData = async () => {
/* 弹框遮罩层 */ /* 弹框遮罩层 */
:deep().dialogModel { :deep().dialogModel {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
} }
:deep().dashboard-container { :deep().dialogModel .dashboard-container {
border: 1px solid #cccccc2a; 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: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 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-top: 1px solid transparent;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
/* 透明边框 */ /* 透明边框 */
......
src/pages/lefts/index.vue
浏览文件 @ 107d8d1e
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="orbit-visualization"> <div class="orbit-visualization">
<!-- <ordit></ordit> --> <!-- <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"> :autoplay="globaleAutoPlay" :interval="Number(globalIntervalTime)" @change="handleCarouselChange">
<el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs" <el-carousel-item v-for="indexs in orbitMetrics.length" :key="indexs"
style="text-align: center;height: 100%;"> style="text-align: center;height: 100%;">
...@@ -958,12 +958,12 @@ onUnmounted(() => { ...@@ -958,12 +958,12 @@ onUnmounted(() => {
.constellation-panel { .constellation-panel {
/* background-color: #0a0f1e; */ /* background-color: #0a0f1e; */
color: #e0e7ff; color: #e0e7ff;
padding: 15px; padding: 10px;
border-radius: 8px; border-radius: 8px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 10px;
overflow-y: auto; overflow-y: auto;
background-color: #010102; background-color: #010102;
/* background-color: rgba(0, 0, 0, 0.2); */ /* background-color: rgba(0, 0, 0, 0.2); */
...@@ -973,7 +973,7 @@ onUnmounted(() => { ...@@ -973,7 +973,7 @@ onUnmounted(() => {
.header-container { .header-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 5px;
/* 方法1: 在定义变量时就计算好 */ /* 方法1: 在定义变量时就计算好 */
/* min-height: calc(((var(--InnerHeight)-20) / 3) * 1px); */ /* min-height: calc(((var(--InnerHeight)-20) / 3) * 1px); */
...@@ -1446,7 +1446,7 @@ onUnmounted(() => { ...@@ -1446,7 +1446,7 @@ onUnmounted(() => {
.section-divider { .section-divider {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0px 0 5px 0; /* margin: 0px 0 5px 0; */
background-image: url('@/assets/images/lefts/bg_title.png'); background-image: url('@/assets/images/lefts/bg_title.png');
background-size: cover; background-size: cover;
/* 或者 cover/auto */ /* 或者 cover/auto */
...@@ -1483,7 +1483,7 @@ onUnmounted(() => { ...@@ -1483,7 +1483,7 @@ onUnmounted(() => {
.satellite-table-container { .satellite-table-container {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 5px;
overflow: hidden; overflow: hidden;
} }
...@@ -1507,7 +1507,7 @@ onUnmounted(() => { ...@@ -1507,7 +1507,7 @@ onUnmounted(() => {
.table-header { .table-header {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 10px; margin-bottom: 5px;
width: 100%; width: 100%;
} }
......
src/pages/rights/index.vue
浏览文件 @ 107d8d1e
...@@ -186,12 +186,13 @@ function errorDialoghandleClose() { ...@@ -186,12 +186,13 @@ function errorDialoghandleClose() {
<style scoped> <style scoped>
.constellation-panel { .constellation-panel {
color: #e0e7ff; color: #e0e7ff;
padding: 15px; padding: 10px;
border-radius: 8px; border-radius: 8px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; justify-content: space-around;
gap: 10px;
overflow-y: auto; overflow-y: auto;
background-color: #010102; background-color: #010102;
} }
...@@ -200,17 +201,17 @@ function errorDialoghandleClose() { ...@@ -200,17 +201,17 @@ function errorDialoghandleClose() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
min-height: 300px; min-height: 20px;
} }
.satellite-section { .satellite-section {
min-height: 300px; min-height: 20px;
/* background-color: #2E7DFF; */ /* background-color: #2E7DFF; */
/* overflow-y: hidden; */ /* overflow-y: hidden; */
} }
.ground-system-section { .ground-system-section {
min-height: 300px; min-height: 20px;
/* background-color: #2E7DFF; */ /* background-color: #2E7DFF; */
/* overflow-y: hidden; */ /* overflow-y: hidden; */
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论