优化双坐标展示界面。

git-svn-id: https://202.107.226.68:8443/svn/Services/ResistanceMonitor@85 a05970a1-87b9-9d4f-9ee5-fa77e2ec115b

2.Web/src/chart/force-curve-disassemble.js

@@ -0,0 +1,515 @@
+import dayjs from 'dayjs'
+
+const pos_regex = /定位|1号/
+const inv_regex = /反位|2号/
+const zh_regex = /转换|3号/
+function forceDisassemble({
+ curve_data_list,
+ force_unit,
+ title,
+ tem_data,
+ tem_unit,
+ line,
+ show_label,
+ show_tem,
+ refer_curve,
+ start_value,
+ end_value,
+ starttime,
+ endtime,
+ threshold,
+}) {
+ let series = []
+ let legend_data = []
+ let color = ''
+ let y_max = 0 // Y轴最大值
+ let y_min = 0 // Y轴最小值
+ let zh_max = 0 // 转换阻力Y轴最大值
+ let zh_min = 0 // 转换阻力Y轴最大值
+ let max_min_time = {}
+ if (starttime && endtime) {
+  max_min_time.min = dayjs(starttime).valueOf()
+  max_min_time.max = dayjs(endtime).valueOf()
+ }
+ let filtering = localStorage.getItem('filtering')
+ let show_tooltips = true
+ if (filtering != 0) {
+  show_tooltips = threshold == 0
+ }
+ if (curve_data_list && curve_data_list.length) {
+  curve_data_list.forEach((element, index) => {
+   if (!legend_data.includes(element.name)) {
+    legend_data.push(element.name)
+   }
+   let idx = null
+   if (pos_regex.test(element.name) || inv_regex.test(element.name)) idx = 0
+   if (zh_regex.test(element.name)) idx = 1
+   // label
+   let yAxisIndex = 0
+   let name_list = series.map(item => item.name).filter(Boolean)
+   if (element.mark_points && element.mark_points.length) {
+    let mark_points = []
+    element.mark_points.forEach(item => {
+     mark_points.push({
+      coord: item.coord,
+      symbolSize: 0,
+      label: {
+       show: show_label || false,
+       textStyle: {
+        color: item.color || element.color,
+       },
+       padding: [3, 5],
+       fontSize: 20,
+       borderRadius: 8,
+       backgroundColor: 'rgba(25, 189, 122, 0.2)',
+       position: item.position || 'top',
+       formatter: item.label,
+      },
+     })
+    })
+    if (!name_list.includes(element.name)) {
+     series.push({
+      name: element.name,
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      type: 'line',
+      symbol: 'none',
+      silent: true, // 开启静默模式
+      data: element.points || element.data || [],
+      color: element.color,
+      animation: false,
+      markPoint: {
+       data: mark_points,
+      },
+     })
+    }
+   } else {
+    if (!name_list.includes(element.name)) {
+     series.push({
+      name: element.name,
+      xAxisIndex: idx,
+      yAxisIndex: idx,
+      type: 'line',
+      symbol: 'none',
+      silent: true, // 开启静默模式
+      data: element.points || element.data || [],
+      color: element.color,
+      animation: false,
+     })
+    }
+   }
+  })
+ }
+
+ // 温度
+ if (tem_data && tem_data[0].data.length) {
+  legend_data.push('温度')
+  tem_data.forEach(element => {
+   series.push({
+    type: 'line',
+    name: element.name,
+    showSymbol: true,
+    color: color,
+    data: element.points || element.data || [],
+    xAxisIndex: 0,
+    yAxisIndex: 2,
+    animation: false,
+   })
+   series.push({
+    type: 'line',
+    name: element.name,
+    showSymbol: true,
+    color: color,
+    data: element.points || element.data || [],
+    xAxisIndex: 1,
+    yAxisIndex: 3,
+    animation: false,
+   })
+  })
+ }
+
+ // 是否有标识线
+ if (line && line.length) {
+  // 分开判断标识线的最大值最小值
+  let main_val = line.filter(item => !item.label.includes('扳'))
+  let zhuanhuan_val = line.filter(item => item.label.includes('扳'))
+  // 定反
+  let main_value_list = main_val.map(item => item.val)
+  y_max = Math.max(...main_value_list)
+  y_min = Math.min(...main_value_list)
+  let line_style = lineStyle(main_val, 0)
+  series.push(line_style)
+  // 转换阻力
+  let zh_value_list = zhuanhuan_val.map(item => item.val)
+  zh_max = Math.max(...zh_value_list)
+  zh_min = Math.min(...zh_value_list)
+  let zh_style = lineStyle(zhuanhuan_val, 1)
+  series.push(zh_style)
+ }
+
+ if (refer_curve && refer_curve.length) {
+  let refer_line = referCurve(refer_curve)
+  series.push(...refer_line)
+ }
+
+ let option = {
+  axisPointer: {
+   link: {
+    xAxisIndex: 'all',
+   },
+  },
+  title: {
+   left: '10px',
+   text: title,
+   textStyle: {
+    color: 'white',
+   },
+  },
+  legend: {
+   show: true,
+   data: legend_data,
+   right: 'center',
+   top: '5px',
+   textStyle: {
+    color: 'white',
+   },
+   selected: {
+    温度: show_tem,
+   },
+  },
+  grid: [
+   {
+    bottom: 0,
+    top: '30px',
+    left: 100,
+    height: '40%',
+   },
+   {
+    bottom: 0,
+    top: '50%',
+    left: 100,
+    height: '40%',
+   },
+  ],
+  dataZoom: [
+   {
+    type: 'slider',
+    filterMode: 'none', //filter
+    height: 20,
+    startValue: start_value || null,
+    endValue: end_value || null,
+    xAxisIndex: [0, 1],
+   },
+   {
+    type: 'inside',
+    filterMode: 'none', //filter
+    startValue: start_value || null,
+    endValue: end_value || null,
+    xAxisIndex: [0, 1],
+   },
+  ],
+  tooltip: {
+   show: show_tooltips,
+   trigger: 'axis',
+   backgroundColor: '#232526',
+   borderColor: '#606266',
+   textStyle: {
+    color: '#c0c4cc',
+   },
+   formatter: params => {
+    if (!params.length) return
+    let new_params = duplicateRemoval(params)
+    let html_list = [],
+     label_text = '',
+     time_text = ''
+    time_text = `${new_params[0].axisValueLabel}`
+    html_list.push(time_text)
+    new_params.forEach(item => {
+     label_text = `${item.marker}${item.seriesName}：${item.value[1]}`
+     html_list.push(label_text)
+    })
+    return html_list.join('<br>')
+   },
+  },
+  toolbox: {
+   right: '200px',
+   top: 0,
+   feature: {
+    restore: {},
+    saveAsImage: {
+     name: `${title}-${starttime}~${endtime}`,
+     backgroundColor: 'auto',
+    },
+   },
+   iconStyle: {
+    borderColor: '#ffffff',
+   },
+  },
+  xAxis: [
+   {
+    type: 'time',
+    ...max_min_time,
+    // splitNumber: 8,
+    axisLine: {
+     show: true,
+     lineStyle: {
+      color: 'white',
+     },
+    },
+    splitLine: {
+     show: false,
+    },
+    axisLabel: {
+     show: true,
+     color: 'white',
+    },
+    axisTick: {
+     show: false,
+    },
+   },
+   {
+    gridIndex: 1,
+    type: 'time',
+    ...max_min_time,
+    // splitNumber: 8,
+    axisLine: {
+     show: true,
+     lineStyle: {
+      color: 'white',
+     },
+    },
+    splitLine: {
+     show: false,
+    },
+    axisLabel: {
+     show: true,
+     color: 'white',
+    },
+    axisTick: {
+     show: false,
+    },
+   },
+  ],
+  yAxis: [
+   {
+    name: `定/反位:${force_unit}`,
+    nameGap: 10,
+    nameTextStyle: {
+     padding: [0, 0, 0, 50],
+    },
+    max: val => {
+     if (y_max == 0) return
+     if (val.max > y_max) return parseInt(val.max * 1.05)
+     else return parseInt(y_max * 1.05)
+    },
+    min: 0,
+    gridIndex: 0,
+    axisLine: {
+     show: true,
+     lineStyle: {
+      color: 'white',
+     },
+    },
+    splitLine: {
+     show: true,
+     lineStyle: {
+      color: '#CFD6E1',
+      type: 'dashed',
+     },
+    },
+    axisLabel: {
+     show: true,
+     color: 'white',
+    },
+    axisTick: {
+     show: false,
+    },
+   },
+   {
+    scale: true, // y轴起始值自适应
+    name: `转换阻力:${force_unit}`,
+    nameGap: 10,
+    nameTextStyle: {
+     padding: [0, 0, 0, 50],
+    },
+    max: val => {
+     if (zh_max == 0) return
+     if (val.max > zh_max) return parseInt(val.max * 1.05)
+     else return parseInt(zh_max * 1.05)
+    },
+    min: val => {
+     if (zh_min == 0) return
+     if (val.min < zh_min) return val.min
+     else return zh_min
+    },
+    gridIndex: 1,
+    axisLine: {
+     show: true,
+     lineStyle: {
+      color: 'white',
+     },
+    },
+    splitLine: {
+     show: true,
+     lineStyle: {
+      color: '#CFD6E1',
+      type: 'dashed',
+     },
+    },
+    axisLabel: {
+     show: true,
+     color: 'white',
+    },
+    axisTick: {
+     show: false,
+    },
+   },
+   {
+    // 温度
+    scale: true, // y轴起始值自适应
+    // minInterval: 1,
+    gridIndex: 0,
+    position: 'right',
+    name: tem_unit,
+    axisLine: {
+     show: true,
+     symbol: ['none', 'none'], // 添加箭头
+     lineStyle: {
+      color: 'white',
+     },
+    },
+    splitLine: {
+     show: true,
+     lineStyle: {
+      color: '#CFD6E1',
+      type: 'dashed',
+     },
+    },
+    axisLabel: {
+     show: true,
+     color: 'white',
+    },
+    axisTick: {
+     show: false,
+    },
+   },
+   {
+    // 温度
+    scale: true, // y轴起始值自适应
+    // minInterval: 1,
+    gridIndex: 1,
+    position: 'right',
+    name: tem_unit,
+    axisLine: {
+     show: true,
+     symbol: ['none', 'none'], // 添加箭头
+     lineStyle: {
+      color: 'white',
+     },
+    },
+    splitLine: {
+     show: true,
+     lineStyle: {
+      color: '#CFD6E1',
+      type: 'dashed',
+     },
+    },
+    axisLabel: {
+     show: true,
+     color: 'white',
+    },
+    axisTick: {
+     show: false,
+    },
+   },
+  ],
+  series: series,
+ }
+
+ return option
+}
+
+// 获取标识线的配置
+function lineStyle(data, yIndex) {
+ let markLine_data = []
+ let markPoint_data = []
+ // 标识线样式
+ data.forEach((element, index) => {
+  markLine_data.push({
+   yAxis: element.val,
+   lineStyle: { type: 'dashed', width: 1, color: element.color },
+   label: { show: false },
+  })
+  markPoint_data.push({
+   yAxis: element.val,
+   symbolSize: 0.1,
+   x: '92%',
+   label: {
+    show: true,
+    color: element.color,
+    fontSize: 12,
+    position: 'right',
+    formatter: `${element.label}${element.val}`,
+   },
+  })
+ })
+ // 标识线
+ let line_style = {
+  type: 'line',
+  xAxisIndex: yIndex,
+  yAxisIndex: yIndex,
+  lineStyle: { width: 1 },
+  showSymbol: false,
+  markLine: {
+   symbol: ['none', 'arrow'],
+   silent: true,
+   label: { position: 'start' },
+   data: markLine_data,
+   animation: false,
+  },
+  markPoint: {
+   silent: true,
+   data: markPoint_data,
+   animation: false,
+  },
+ }
+ return line_style
+}
+
+// 参考曲线
+function referCurve(data) {
+ let refer_line = []
+ data.forEach((element, index) => {
+  let idx = null
+  if (pos_regex.test(element.name) || inv_regex.test(element.name)) idx = 0
+  if (zh_regex.test(element.name)) idx = 1
+  refer_line.push({
+   name: element.name,
+   type: 'line',
+   xAxisIndex: idx,
+   yAxisIndex: idx,
+   symbol: 'none',
+   data: element.points || element.data,
+   color: '#FF0000',
+   zlevel: 1,
+   animation: false,
+  })
+ })
+ return refer_line
+}
+
+// 对tooltip去重
+function duplicateRemoval(params) {
+ let newParamsName = []
+ params.forEach(item => {
+  let target_data = newParamsName.find(
+   ele => ele.seriesName === item.seriesName && ele.axisValueLabel === item.axisValueLabel
+  )
+  if (!target_data) {
+   newParamsName.push(item)
+  }
+ })
+ return newParamsName
+}
+
+export default forceDisassemble

2.Web/src/views/Force.vue

@@ -173,14 +173,6 @@
      @click="get_tem_data"
      >显示温度</el-button
     >
-    <el-button
-     style="margin-left:5px;"
-     type="primary"
-     size="mini"
-     v-if="click_id && !loading"
-     @click="coordinate_state_toggle"
-     >双坐标切换</el-button
-    >
     <!-- 移动x/y轴 -->
     <div class="x_y_val" v-if="show_xy">
      <div class="x_val">
@@ -430,7 +422,8 @@ import {
  resist_move,
  resist_data,
 } from '../api'
-import forceOption from '../chart/force-curve'
+// import forceOption from '../chart/force-curve'
+import forceDisassemble from '../chart/force-curve-disassemble'
 export default {
  name: 'Force',
  data() {
@@ -557,7 +550,6 @@ export default {
    refresh_nodes: null,
    refresh_datas: null,
    is_get_more: false,
-   coordinate_state: false, // false: 双坐标系、true：三坐标系
   }
  },
  watch: {
@@ -1201,7 +1193,8 @@ export default {
      this.is_nodata = true
      let num_list = res.data.map(item => item.points.length || 0)
      let sum = num_list.reduce((total, current) => total + current, 0)
-     this.curve_data.force_unit = `定/反位:` + res.unit
+     //  this.curve_data.force_unit = `定/反位:` + res.unit
+     this.curve_data.force_unit = res.unit
      this.curve_data.curve_data_list = _.cloneDeep(res.data)
      if (res.warn_line && res.warn_line.length) {
       this.warn_line_data = _.cloneDeep(res.warn_line)
@@ -1362,7 +1355,6 @@ export default {
    this.show_switch = false
    this.is_query = false
    this.show_xy = false
-   this.coordinate_state = false
    this.click_id = data.id
    this.send_data.tag = data.id + '.resist'
    this.query_hist_confirm.tag = data.id + '.resist'
@@ -1529,11 +1521,6 @@ export default {
      })
    }
   },
-  // 坐标系切换
-  coordinate_state_toggle() {
-   this.coordinate_state = !this.coordinate_state
-   return this.draw_line_curve()
-  },
   // 画图
   draw_line_curve() {
    let date_num = +new Date()
@@ -1554,8 +1541,7 @@ export default {
      if (zh_regex.test(element.name)) element.color = '#6DD5FA' // 天空蓝
     })
    }
-   this.curve_data.coordinate_state = this.coordinate_state
-   let option = forceOption(this.curve_data)
+   let option = forceDisassemble(this.curve_data)
    this.myCharts.off('legendselectchanged') // 解除监听legend事件
    this.myCharts.setOption(option, true) // 重新渲染
    console.log(`3.绘制折线图耗时:${+new Date() - date_num} ms`)
@@ -1618,7 +1604,7 @@ export default {
     }
     this.curve_data.line = warn_line_data
     this.get_datazoom()
-    let option = forceOption(this.curve_data)
+    let option = forceDisassemble(this.curve_data)
     let result = this.refer_curve_data
      .map(item => item.name)
      .filter(ele => !refer_curve.includes(ele))
@@ -1900,6 +1886,7 @@ export default {
    //  this.times = [1716307200000, 1716393600000] // 2024年5月22~23号有数据
    //  this.times = [1715961600000, 1716048000000] // 2024年5月18~19号有数据
    // this.times = [1715988120000, 1715988540000] // 2024年5月18~19号7点数据
+   //  this.times = [1724256000000, 1724342399000] // 2024年8月22号0~23点数据
   },
   // 发送浏览记录
   send_record(commit_data) {