曲线问题

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

@@ -136,6 +136,7 @@ function initChart() {
         data: series1Data.value,
         type: 'line',
         smooth: 0.6,
+        unit: props.yName.value[index],
         symbol: 'none',
         lineStyle: {
           color: props.color[index],
@@ -287,13 +288,14 @@ function initChart() {
     },
     yAxis: {
       type: 'value',
-      name: props.yName,//y轴名称
+      name: props.lineArray ? (props.yName.type ? props.yName.value[0] : '') : props.yName.value,//y轴名称
       // max: 120,
       minInterval: 1,
       nameTextStyle: {            // 文本样式
         fontSize: 12,
         fontWeight: 'bold',
-        color: '#fff'
+        color: '#fff',
+        padding: [0, 40, 0, 0]
       },
       splitLine: {
         show: true,
@@ -355,6 +357,12 @@ function initChart() {
         color: '#fff',
         fontSize: 12
       },
+      formatter: function (params) {
+        let res = params[0].axisValue + '<br>';
+        res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
+        return res;
+      },
+      // props.yName.value[index],
       // 固定tooltip位置在顶部
       position: function (pos, params, dom, rect, size) {
         return ['10%', pos[1]];

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

@@ -55,12 +55,14 @@
     <!-- 核心数据指标 -->
     <div class="container" v-if="!props.lineArray">
       <div class="flex-box flex-left">
-        <cdfCurve :legendName="props.legendName[0]" :yName="props.yName" :data="props.data[0]" color="#ff9f7f"
-          :isShowDetial="true"></cdfCurve>
+        <cdfCurve :legendName="props.legendName[0]"
+          :yName="{ type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' }"
+          :data="props.data[0]" color="#ff9f7f" :isShowDetial="true"></cdfCurve>
       </div>
       <div class="flex-box flex-right">
-        <cdfCurve :legendName="props.legendName[1]" :yName="props.yName" :data="props.data[1]" color="#6ffcba"
-          :isShowDetial="true">
+        <cdfCurve :legendName="props.legendName[1]"
+          :yName="{ type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' }"
+          :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
         </cdfCurve>
       </div>
     </div>
@@ -83,9 +85,9 @@
               </i>
               <span class="logo_header_content">通信曲线</span>
             </div>
-            <div class="logo_header_right">
+            <!-- <div class="logo_header_right">
               <span class="logo_header_right_content">[区域一特事故]</span>
-            </div>
+            </div> -->
           </div>
 
           <div class="logo logo_right">

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

@@ -82,9 +82,9 @@
               </i>
               <span class="logo_header_content">热力图</span>
             </div>
-            <div class="logo_header_right">
+            <!-- <div class="logo_header_right">
               <span class="logo_header_right_content">[区域一特事故]</span>
-            </div>
+            </div> -->
           </div>
 
           <div class="logo logo_right">
@@ -99,10 +99,14 @@
           <div class="container" v-if="bigStatus">
             <!-- 核心数据指标 热力图-->
             <div class="flex-box flex-left">
-              <hotMap :title="props.legendName[0]" :yName="props.yName" :data="props.data[0]"></hotMap>
+              <hotMap :title="props.legendName[0]"
+                :yName="{ type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' }"
+                :data="props.data[0]"></hotMap>
             </div>
             <div class="flex-box flex-right">
-              <hotMap :title="props.legendName[1]" :yName="props.yName" :data="props.data[1]"></hotMap>
+              <hotMap :title="props.legendName[1]"
+                :yName="{ type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' }"
+                :data="props.data[1]"></hotMap>
             </div>
           </div>
         </main>

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

@@ -55,21 +55,23 @@
     <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
     <div class="container" v-if="!props.lineArray">
       <div class="flex-box flex-left">
-        <!-- <div>{{ props.data[0] }}-----</div> -->
+
         <instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
-          :legendName="props.legendName[0]" :yName="props.yName[0] ? props.yName[0] : ''" :propsDate="componentProps"
-          :istemplate="props.istemplate"></instantCurve>
+          :legendName="props.legendName[0]"
+          :yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' } : {}"
+          :propsDate="componentProps" :istemplate="props.istemplate"></instantCurve>
       </div>
       <div class="flex-box flex-right">
         <instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
-          :legendName="props.legendName[1]" :yName="props.yName[1] ? props.yName[1] : ''" :propsDate="componentProps"
-          isShowDetail="true" :istemplate="props.istemplate">
+          :legendName="props.legendName[1]"
+          :yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' } : {}"
+          :propsDate="componentProps" isShowDetail="true" :istemplate="props.istemplate">
         </instantCurve>
       </div>
     </div>
     <div class="container" v-if="props.lineArray">
       <div class="flex-box">
-        <instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
+        <instantCurve :lineArray="props.lineArray" :yName="props.yName" :data="props.data"
           :legendName="props.legendName" :propsDate="componentProps" :color="colorList" :istemplate="props.istemplate">
         </instantCurve>
       </div>
@@ -86,9 +88,9 @@
               </i>
               <span class="logo_header_content">通信曲线</span>
             </div>
-            <div class="logo_header_right">
+            <!-- <div class="logo_header_right">
               <span class="logo_header_right_content">[区域一特事故]</span>
-            </div>
+            </div> -->
           </div>
 
           <div class="logo logo_right">
@@ -103,18 +105,20 @@
           <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
           <div class="container" v-if="!props.lineArray">
             <div class="flex-box flex-left">
-              <instantCurve :idName="`instant-left-${props.allIdName}`" :yName="props.yName[0] ? props.yName[0] : ''"
+              <instantCurve :idName="`instant-left-${props.allIdName}`"
+                :yName="props.yName ? { type: props.yName.type, value: props.yName.value[0] ? props.yName.value[0] : '' } : {}"
                 :data="props.data[0]" :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
             </div>
             <div class="flex-box flex-right">
-              <instantCurve :idName="`instant-right-${props.allIdName}`" :yName="props.yName[1] ? props.yName[1] : ''"
+              <instantCurve :idName="`instant-right-${props.allIdName}`"
+                :yName="props.yName ? { type: props.yName.type, value: props.yName.value[1] ? props.yName.value[1] : '' } : {}"
                 :data="props.data[1]" color="#6ffcba" :legendName="props.legendName[1]" :isShowDetail="true">
               </instantCurve>
             </div>
           </div>
           <div class="container" v-if="props.lineArray">
             <div class="flex-box">
-              <instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
+              <instantCurve :lineArray="props.lineArray" :yName="props.yName" :data="props.data"
                 :legendName="props.legendName" :propsDate="componentProps" :color="colorList"></instantCurve>
             </div>
           </div>
@@ -126,6 +130,7 @@
 </template>
 
 <script setup>
+
 import instantCurve from './instantCurve.vue'
 import bigdialog from '../../../header/component/bigdialog.vue'
 
@@ -166,6 +171,8 @@ const props = defineProps({
   }
 
 });
+console.log(props.yName, 'y轴名称------');
+
 const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
 setTimeout(() => {
   // console.log('瞬时值曲线', props)

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

@@ -140,8 +140,12 @@ function initChart() {
   chartDom.style.width = '100%';
   //判断x轴刻度问题
   var firstTime = 0, lastTime = 0;
+  // 定义一个字段,判断x轴是不是时间,如果是,则type为time
+  var xAxisType = 'category';
+
   let seriesArr = [];//图标数据
   if (props.lineArray) {
+    xAxisType = 'time';
     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(series1Data.value, '最终数据');
@@ -197,10 +201,25 @@ function initChart() {
       }
     })
   } else {
+    // console.log(dataX.value, 'xinxi1-----', props.data);
+
+    if (props.data[0]?.x?.includes(':')) {
+      xAxisType = 'time';
+      if (dataX.value.length > 0) {
+        firstTime = props.data[0]?.x
+        lastTime = props.data[props.data.length - 1]?.x
+      }
+      series1Data.value = props.data.map((item, idx) => [item.x, item?.y && Object.prototype.toString(item?.y) === '[object Object]' && item.y?.errorRate !== undefined ? item.y.dropRate : item.y]);
+      // console.log(series1Data.value, '最终数据');
+
+    } else {
+      xAxisType = 'category';
+    }
+
     seriesArr.push({
       color: props.color,
       name: props.legendName,
-      data: dataY.value,
+      data: xAxisType == 'time' ? series1Data.value : dataY.value,
       type: 'line',
       smooth: 0.6,
       symbol: 'none',
@@ -255,6 +274,7 @@ function initChart() {
     })
   }
 
+
   var option = {
     legend: {
       show: true,
@@ -282,8 +302,8 @@ function initChart() {
       containLabel: true //自动计算x轴label
     },
     xAxis: {
-      // type: 'category',
-      type: props.lineArray ? 'time' : 'category',
+      type: xAxisType,
+      // type: props.lineArray ? 'time' : 'category',
       boundaryGap: false,
       data: dataX.value,
       // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
@@ -299,7 +319,24 @@ function initChart() {
         showMaxLabel: true,    // 显示最大刻度标签
         formatter: function (value) {
           if (!props.lineArray) {
-            return value
+            if (xAxisType == 'time') {
+              return timestampToHMS(value)
+              //   if (firstTime == value || lastTime == value) {
+              //     return value
+              //   } else {
+              //     if (value.split(':')[1] == '00' && value.split(':')[2] == '00') {
+              //       console.log(value);
+              //       return value
+              //     }
+              //   }
+            } else {
+              return value
+            }
+
+            // console.log(value, 'x轴刻度', firstTime, lastTime);
+
+
+
           }
           if (value.toString().includes(':')) {
             const date = new Date(value);
@@ -329,11 +366,12 @@ function initChart() {
     },
     yAxis: {
       type: 'value',
-      name: props.yName,//y轴名称
+      name: props.lineArray ? (props.yName.type ? props.yName.value[0] : '') : props.yName.value,//y轴名称
       nameTextStyle: {            // 文本样式
         fontSize: 12,
         fontWeight: 'bold',
-        color: '#fff'
+        color: '#fff',
+        padding: [0, 40, 0, 0]
       },
       // max: 120,
       minInterval: 1,
@@ -399,6 +437,11 @@ function initChart() {
         color: '#fff',
         fontSize: 12
       },
+      formatter: function (params) {
+        let res = params[0].axisValue + '<br>';
+        res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
+        return res;
+      },
       // 固定tooltip位置在顶部
       position: function (pos, params, dom, rect, size) {
         return ['10%', pos[1]];

src/pages/header/component/screenConfigeDialog.vue

@@ -84,20 +84,20 @@
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量"
-                :legendName="['链路层容量', '用户实际流量']" :lineArray="true" :istemplate="true">
+                :yName="yName1" :legendName="['链路层容量', '用户实际流量']" :lineArray="true" :istemplate="true">
               </component>
               <!-- </KeepAlive> -->
 
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
-                slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true" :istemplate="true">
+                slogan="可用性" :yName="yName2" :legendName="['规划可用性', '实际可用性']" :lineArray="true" :istemplate="true">
               </component>
               <!-- </KeepAlive> -->
 
               <!-- <KeepAlive> -->
               <component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
-                :legendName="['搜星时延', '丢包率']" :lineArray="false" :istemplate="true">
+                :yName="yName3" :legendName="['搜星时延', '丢包率']" :lineArray="false" :istemplate="true">
               </component>
               <!-- </KeepAlive> -->
 
@@ -181,7 +181,19 @@ const resetData = () => {
   availabilityData.value = []
   actualAvailabilityData.value = []
 }
-
+// y轴单位
+const yName1 = ref({
+  type: true,
+  value: ["Mbps", 'Mbps']
+})
+const yName2 = ref({
+  type: false,
+  value: ['s', 'dB']
+})
+const yName3 = ref({
+  type: true,
+  value: ["ms", ""]
+})
 const screenConfigCaseRef = ref()
 
 const currentSettingConfig = ref()

src/pages/rights/index.vue

@@ -41,9 +41,18 @@ const startTime = ref('')
 const endTime = ref('')
 const timeclick = ref(true)//选择时间时更新组件
 // y轴单位
-const yName1 = ref(["Mbps"])
-const yName2 = ref([])
-const yName3 = ref(["ms", ""])
+const yName1 = ref({
+  type: true,
+  value: ["Mbps", 'Mbps']
+})
+const yName2 = ref({
+  type: false,
+  value: ['s', 'dB']
+})
+const yName3 = ref({
+  type: true,
+  value: ["ms", ""]
+})
 //组件返回时信息根据type区分判断
 const changeTimeFn = (type, times) => {
   console.log(times, '对比', type);