最新代码

src/main.js

@@ -47,10 +47,6 @@ import './permission' // 路由拦截和加载页面进度条
 // import { useDict } from '@/utils/dict'
 
 import directive from './directive' // 导入公共函数
-
-
-
-
 import 'element-plus/dist/index.css'
 
 

src/pages/all/components/cdf/index.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
     <!-- 核心数据指标 -->
-    <div class="container">
+    <!-- <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,6 +29,13 @@
         <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>
   </div>
 </template>
@@ -36,6 +43,7 @@
 <script setup>
 import { onBeforeUnmount } from 'vue';
 import cdfCurve from './cdfCurve.vue'
+const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
 
 const props = defineProps({
   title: {
@@ -57,6 +65,10 @@ const props = defineProps({
   zoomHeight: {
     type: String,
     default: null
+  },
+  lineArray: {
+    type: Boolean,
+    default: false
   }
 });
 

src/pages/all/components/instant/index.vue

@@ -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 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 "
@@ -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">
         <instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
           :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
@@ -30,9 +30,8 @@
         <instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
           :legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
       </div>
-    </div> -->
+    </div>
     <div class="container" v-if="props.lineArray">
-      <div>5555</div>
       <div class="flex-box">
         <instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
           :propsDate="componentProps" :color="colorList"></instantCurve>
@@ -76,7 +75,11 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜
 setTimeout(() => {
   console.log('瞬时值曲线', props.lineArray)
 }, 2000);
+//点击放大窗口详细查看曲线
+const clickBig = () => {
+  console.log('放大');
 
+}
 const componentProps = ref({})
 </script>
 

src/pages/all/components/instant/instantCurve.vue

@@ -55,11 +55,6 @@ const props = defineProps({
     default: false
   }
 })
-setTimeout(() => {
-
-  console.log(props, '大屏配置曲线图',);
-}, 2000);
-
 watch(() => props.data, (newVal) => {
   initChart();
 })
@@ -127,7 +122,7 @@ onUnmounted(() => {
     myChart.dispose();
   }
 });
-
+const series1Data = ref([])//时间轴对象数据
 function initChart() {
   const chartDom = document.getElementById(idName.value);
   if (!myChart) {
@@ -136,17 +131,14 @@ function initChart() {
   chartDom.style.height = '100%';
   chartDom.style.width = '100%';
   let seriesArr = [];//图标数据
-  // console.log(props.data.length, '判断值是多少?', props)
-  console.log('颜色', props.data);
   if (props.lineArray) {
     props.data.forEach((it, index) => {
-      const series1Data = it.map((item, idx) => [item.x, item.y]);
-      console.log(series1Data, '最终数据');
-
+      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,
+        data: series1Data.value,
         type: 'line',
         smooth: 0.6,
         symbol: 'none',
@@ -164,11 +156,11 @@ function initChart() {
             colorStops: [
               {
                 offset: 0,
-                color: props.color[index]
+                color: hexToRgba(props.color[index], 0.8)
               },
               {
                 offset: 1,
-                color: 'rgba(111,252,186,0.20)'
+                color: hexToRgba(props.color[index], 0.2)
               }
             ],
             global: false
@@ -204,11 +196,11 @@ function initChart() {
           colorStops: [
             {
               offset: 0,
-              color: props.color
+              color: hexToRgba(props.color, 0.8)
             },
             {
               offset: 1,
-              color: 'rgba(111,252,186,0.20)'
+              color: hexToRgba(props.color, 0.2)
             }
           ],
           global: false
@@ -240,7 +232,10 @@ function initChart() {
       }
     })
   }
-  const option = {
+  // console.log(seriesArr, '总数据对比');
+
+
+  var option = {
     legend: {
       show: true,
       data: Array.isArray(props.legendName) ? props.legendName : [props.legendName],
@@ -261,30 +256,49 @@ function initChart() {
     },
     grid: {
       top: '23%',
-      right: '8%',
+      right: '4%',
       bottom: '16%',
-      left: '18%',
+      left: '8%',
       containLabel: true //自动计算x轴label
     },
     xAxis: {
       // type: 'category',
-      type: 'time',
+      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,
         fontSize: 10,
         color: '#fff',
         rotate: 45,
-        fontSize: 10,
         margin: 20,
+        fontSize: 10,
         interval: 'auto', // 或直接不写
-        // interval: function (index) {
-        //   return index % 10 === 0 // 每10个显示一个
-        // },
         hideOverlap: true, //  防重叠（很关键）
-
+        formatter: function (value) {
+          console.log(value);
+          if (value.toString().includes(':')) {
+            return value
+          }
+        }
+        // formatter: function (value) {
+        //   if (value.toString().includes(':') && false) {
+        //     // console.log('嘿嘿', value)
+        //     let str = []
+        //     const arr = value.split('-') // 只保留日期部分
+        //     for (let val of arr) {
+        //       if (Number(val) >= 1e8 && val.includes('.')) {
+        //         // console.log(val)
+        //         val = (Number(val) / 1e8).toFixed(0) + '亿'
+        //       }
+        //       str.push(val)
+        //     }
+        //     return str.join('-') // 用换行符连接
+        //   }
+        //   // console.log('value', value)
+        //   return value
+        // }
       },
       axisLine: {
         show: true, //去除轴线
@@ -318,36 +332,7 @@ function initChart() {
         }
       }
     },
-    dataZoom: dataX.value.length <= 7 ? [] : [
-      // {
-      //   type: 'slider',
-      //   xAxisIndex: 0,
-      //   startValue: 0,
-      //   endValue: 20, // 一屏只看20个点 ⭐
-      //   height: 5,
-      //   showDetail: false,
-      //   top: 40
-      // },
-
-      // {
-      //   type: 'inside',
-      //   start: 0,
-      //   end: 10,
-      //   left: '18%',
-      //   right: '8%',
-      //   minSpan: 1,
-      //   handleLabel: {
-      //     show: false
-      //   },
-      //   labelFormatter: function (value) {
-      //     console.log('xxx', dataX[value])
-      //     return dataX[value]
-      //   },
-      //   textStyle: {
-      //     color: 'rgba(255, 255, 255, 0.92)',
-      //     fontSize: 8
-      //   }
-      // },
+    dataZoom: (props.lineArray ? series1Data.value.length <= 7 : dataX.value.length <= 7) ? [] : [
       {
         start: 0,
         end: 100,
@@ -361,13 +346,19 @@ function initChart() {
           show: false
         },
         labelFormatter: function (value) {
-          return dataX[value]
+          if (props.lineArray) {
+            // console.log('触发', value);
+            return series1Data.value[value]
+          } else {
+            return dataX[value]
+          }
         },
         textStyle: {
           color: 'rgba(255, 255, 255, 0.92)',
           fontSize: 8
         }
-      }
+      },
+      { type: 'inside', start: 0, end: 100 }
     ],
     series: seriesArr,
     tooltip: {
@@ -388,13 +379,30 @@ function initChart() {
       }
     }
   };
-  console.log(option, '配置', myChart, '住新冠');
 
+  if (props.lineArray) {
+    delete option.xAxis.data
+  }
+  // console.log(option, '配置', myChart, '住新冠');
+  // console.log(option, '数据');
+  // console.log(series1Data.value, '对象');
+  // if (timesset) {
+  //   clearTimeout(timesset)
+  // }
+  // timesset = setTimeout(() => {
+  clearTimeout(timesset)
   myChart.setOption(option);
   resizeChart();
   window.addEventListener('resize', resizeChart);
+  // }, 1000);
 }
-
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+var timesset = null
 function resizeChart() {
   if (myChart) {
     myChart.resize();

src/pages/header/component/screenConfigeDialog.vue

@@ -91,13 +91,13 @@
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
-                slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="false">
+                slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true">
               </component>
               <!-- </KeepAlive> -->
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
-                :legendName="['搜星时延', '丢包率']" :lineArray="true">
+                :legendName="['搜星时延', '丢包率']" :lineArray="false">
               </component>
               <!-- </KeepAlive> -->
 

src/pages/rights/index.vue

@@ -3,22 +3,22 @@
     <!-- 顶部区域：标题与核心指标 -->
     <div class="header-container">
       <!-- <allHotMap></allHotMap> -->
+      <!-- <div>{{ component1 }}</div> -->
       <component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
-        :legendName="['链路层容量', '用户实际流量']"></component>
+        :legendName="['链路层容量', '用户实际流量']" :lineArray="true"></component>
     </div>
     <!-- 卫星列表 -->
     <div class="satellite-section">
       <!-- <cdf></cdf> -->
       <component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]"
-        slogan="可用性" :legendName="['规划可用性', '实际可用性']"></component>
-
+        slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true"></component>
     </div>
 
     <!-- 地面系统 -->
     <div class="ground-system-section">
       <!-- <instant></instant> -->
       <component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包"
-        :legendName="['搜星时延', '丢包率']"></component>
+        :legendName="['搜星时延', '丢包率']" :lineArray="false"></component>
     </div>
   </div>
 </template>