resistancemonitor/2.Web/src/views/Force.vue

<template>
 <div class="force_box">
  <div v-show="show_org" class="station_tree">
   <div style="padding:5px;">
    <el-input
     size="small"
     v-model="search_data"
     prefix-icon="el-icon-search"
     placeholder="请输入关键字搜索"
    >
    </el-input>
   </div>
   <el-tree
    node-key="id"
    ref="zzj_tree"
    :data="station_tree"
    :default-expanded-keys="defaultShowNodes"
    :props="defaultProps"
    :highlight-current="isHighlight"
    :expand-on-click-node="true"
    :filter-node-method="filterNode"
   >
    <span slot-scope="{ node, data }">
     <span
      :class="{
       is_disabled: computed_is_disabled(data),
      }"
      :style="{ backgroundColor: data.id == click_id ? '#304156' : '' }"
      @click="handle_node_click(data, node)"
      >{{ data.name }}</span
     >
    </span>
   </el-tree>
  </div>
  <!-- format="yyyy-MM-dd HH:mm:00" -->
  <div class="charts">
   <div class="times">
    <i
     :class="[show_org ? 'el-icon-s-fold' : 'el-icon-s-unfold', 'show_org']"
     @click="show_org = !show_org"
    ></i>
    <el-date-picker
     v-model="times"
     size="small"
     :clearable="false"
     type="datetimerange"
     @change="get_curve_data('is_query')"
     style="width:300px;"
     value-format="timestamp"
     range-separator="至"
     format="yyyy-MM-dd HH:mm"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-button type="primary" style="margin-left: 5px;" size="mini" v-debounce="refresh_data"
     >查询</el-button
    >
    <el-button
     icon="el-icon-arrow-left"
     type="primary"
     style="margin-left: 5px;"
     size="mini"
     v-debounce="handle_time_left"
     >前一天</el-button
    >
    <el-button
     icon="el-icon-arrow-right"
     style="margin-left: 5px;"
     type="primary"
     size="mini"
     v-debounce="handle_time_right"
     >后一天</el-button
    >
    <el-button style="margin-left: 5px;" type="primary" size="mini" @click="localtion_curve_statics"
     >曲线统计</el-button
    >
    <el-button
     style="margin-left:8px;"
     v-show="$route.query.type"
     type="primary"
     size="small"
     @click="go_back"
     >返回</el-button
    >
    <el-switch
     v-model="show_label"
     v-if="show_switch"
     style="margin: 5px 0 0 5px;"
     active-color="#67C23A"
     inactive-color="#909399"
     active-text="显示峰值"
     inactive-text="不显示峰值"
     @change="get_move_info"
    >
    </el-switch>
    <el-button
     style="margin-left:8px;"
     v-if="curve_data.curve_data_list && curve_data.curve_data_list.length"
     type="primary"
     size="small"
     @click="get_resist_move"
     >重新识别扳动</el-button
    >
    <div class="threshold">
     <el-button size="small" @click="get_curve_data('threshold')" type="primary"
      >滤波数据</el-button
     >
     <el-input
      size="small"
      v-model="threshold_val"
      style="width:95px;"
      placeholder="30≤X≤500"
     ></el-input>
     <el-button size="small" @click="get_curve_data('all')" type="primary">所有数据</el-button>
    </div>
   </div>
   <!-- 参考曲线工具栏 -->
   <div class="refer_curve_tools">
    <el-button
     style="margin-left:5px;"
     type="primary"
     size="mini"
     @click="setting_params"
     v-if="$store.state.admin && click_id && is_nodata && $store.state.backend_type == 1"
     >报警设置</el-button
    >
    <el-button
     style="margin-left:5px;"
     type="primary"
     size="mini"
     @click="localtion_curve_compare"
     v-if="click_id && is_nodata"
     >曲线对比</el-button
    >
    <el-button
     v-if="$store.state.admin && click_id && show_switch && $store.state.backend_type == 1"
     style="margin-left:5px;"
     type="primary"
     size="mini"
     @click="handle_refer_curve('set')"
     >设置参考</el-button
    >
    <el-button
     v-if="$store.state.admin && click_id && show_switch && !show_xy"
     style="margin-left:5px;"
     type="primary"
     size="mini"
     @click="handle_refer_curve('get')"
     >展示参考</el-button
    >
    <el-button
     style="margin-left:5px;"
     type="primary"
     size="mini"
     v-if="show_xy"
     @click="handle_refer_curve('none')"
     >隐藏参考</el-button
    >
    <el-button
     style="margin-left:5px;"
     type="primary"
     size="mini"
     v-if="$store.state.admin && click_id && show_switch && $store.state.backend_type == 1"
     @click="handle_refer_curve('cancel')"
     >取消参考</el-button
    >
    <el-button
     style="margin-left:5px;"
     type="primary"
     size="mini"
     v-if="click_id && !loading"
     @click="get_tem_data"
     >显示温度</el-button
    >
    <!-- 移动x/y轴 -->
    <div class="x_y_val" v-if="show_xy">
     <div class="x_val">
      <span title="X轴左移" class="left" @click="handle_xy('left')">
       <i class="el-icon-back"></i>
      </span>
      <b class="x">X轴</b>
      <span title="X轴右移" class="right" @click="handle_xy('right')">
       <i class="el-icon-right"></i>
      </span>
     </div>
     <div class="y_val">
      <span title="Y轴上移" class="left" @click="handle_xy('top')">
       <i class="el-icon-top"></i>
      </span>
      <b class="y">Y轴</b>
      <span title="Y轴下移" class="right" @click="handle_xy('bottom')">
       <i class="el-icon-bottom"></i>
      </span>
     </div>
    </div>
   </div>
   <div
    v-if="show_chart"
    ref="line_echarts"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(31, 31, 31, 0.6)"
    id="line_chart"
   ></div>
   <el-empty v-else image="/static/img/no_data.png"></el-empty>
  </div>
  <div class="setting_box">
   <el-dialog
    width="450px"
    title="报警配置"
    :lock-scroll="true"
    :show-close="true"
    @close="cancel_setting"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible.sync="setting_dialogVisible"
   >
    <el-tabs @tab-click="tab_click" v-model="post_data.type">
     <!-- <el-tab-pane label="最大值超限" name="monitor.alarm.max_over_limit">
      <p>选择测力点</p>
      <el-radio-group @change="radio_change" v-model="radio">
       <el-radio v-for="(item, index) in rename_list" :label="item.label" :key="index">
        {{ item.name }}
       </el-radio>
      </el-radio-group>
      <p><span class="mark">*</span>状态</p>
      <el-radio-group @change="enable_change" v-model="enable">
       <el-radio label="true">启用</el-radio>
       <el-radio label="false">未启用</el-radio>
      </el-radio-group>
      <template v-if="['1#', '2#'].includes(radio)">
       <p><span class="mark">*</span>锁闭力冲击力报警值</p>
       <el-input style="width:100px" v-model="lock_alarm_high_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5" placeholder="请输入大于0的数字"></el-input>
       <p><span class="mark">*</span>锁闭力稳态预警值</p>
       <el-input style="width:100px" v-model="lock_warn_high_limit" size="small"></el-input>
      </template>
      <template v-else>
       <p></p>
       <span class="mark">*</span>定扳反报警值
       <el-input style="width:75px" v-model="d_alarm_high_limit" size="small"></el-input>
       <span class="mark">*</span><span>反扳定报警值</span>
       <el-input style="width:75px" v-model="f_alarm_high_limit" size="small"></el-input>
       <p></p>
       <span class="mark">*</span>定扳反预警值
       <el-input style="width:75px" v-model="d_warn_high_limit" size="small"></el-input>
       <span class="mark">*</span>反扳定预警值
       <el-input style="width:75px" v-model="f_warn_high_limit" size="small"></el-input>
      </template>
      <p><el-button size="small" type="primary" @click="submit_content">保 存</el-button></p>
     </el-tab-pane>
     <el-tab-pane label="摩擦力超限" name="monitor.alarm.friction_over_limit">
      <p>选择测力点</p>
      <el-radio-group @change="radio_change" v-model="radio">
       <el-radio label="3#">转换阻力曲线</el-radio>
      </el-radio-group>
      <p><span class="mark">*</span>状态</p>
      <el-radio-group @change="enable_change" v-model="enable">
       <el-radio label="true">启用</el-radio>
       <el-radio label="false">未启用</el-radio>
      </el-radio-group>
      <p></p>
      <span class="mark">*</span>上超低限报警值
      <el-input style="width:70px" v-model="up_alarm_low_limit" size="small"></el-input>
      <span class="mark">*</span><span>下超高限报警值</span>
      <el-input style="width:70px" v-model="dw_alarm_high_limit" size="small"></el-input>
      <p></p>
      <span class="mark">*</span>上超低限预警值
      <el-input style="width:70px" v-model="up_warn_low_limit" size="small"></el-input>
      <span class="mark">*</span>下超高限预警值
      <el-input style="width:70px" v-model="dw_warn_high_limit" size="small"></el-input>
      <p><el-button size="small" type="primary" @click="submit_content">保 存</el-button></p>
     </el-tab-pane> -->
     <el-tab-pane label="锁闭力报警" name="suobi_lock">
      <div style="margin-top: 10px;">
        <span class="mark"></span>
      状态&nbsp;&nbsp;&nbsp;
      <el-radio-group v-model="suobi_lock.enable">
       <el-radio :label="true">启用</el-radio>
       <el-radio :label="false">未启用</el-radio>
      </el-radio-group>
      </div>
      <div style="margin-top: 20px;">
        <span class="mark"  ></span>
      位置&nbsp;&nbsp;&nbsp;
      <el-radio-group v-model="posi" @change="posi_change() ">
       <el-radio :label="100">定位</el-radio>
       <el-radio :label="101">反位</el-radio>
      </el-radio-group>
      </div>
     
      <div style="margin-top: 20px;">
        <span class="mark">*</span>最小报警值:
     <el-input
      style="width:90px"
      v-model.number="suobi_lock.alarm_low_limit"  oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
     <span class="mark position_left">*</span><span>最小预警值:</span>
     <el-input
      style="width:90px"
      v-model.number="suobi_lock.warn_low_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
      </div>  
      <div style="margin-top: 20px;">
        <span class="mark">*</span>最大报警值:
     <el-input
      style="width:90px"
      v-model.number="suobi_lock.alarm_high_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
     <span class="mark position_left">*</span>最大预警值:
     <el-input
      style="width:90px"
      v-model.number="suobi_lock.warn_high_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
      </div>
     
    </el-tab-pane>
    <el-tab-pane label="转换阻力报警" name="convert_resist">
      <div style="margin-top: 10px;">
      <span class="mark"></span>状态&nbsp;&nbsp;&nbsp;
      <el-radio-group v-model="convert_resist.enable">
       <el-radio :label="true">启用</el-radio>
       <el-radio :label="false">未启用</el-radio>
      </el-radio-group>
     </div>

     <div style="margin-top: 20px;">
     <span class="mark">*</span>伸出报警值:
     <el-input
      style="width:90px"
      v-model.number="convert_resist.dw_alarm_low_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
     <span class="mark position_left">*</span><span>伸出预警值:</span>
     <el-input
      style="width:90px"
      v-model.number="convert_resist.dw_warn_low_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
     </div>

     <div style="margin-top: 20px;">
      <span class="mark">*</span>缩进报警值:
     <el-input
      style="width:90px"
      v-model.number="convert_resist.up_alarm_high_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>
     <span class="mark position_left">*</span>缩进预警值:
     <el-input
      style="width:90px"
      v-model.number="convert_resist.up_warn_high_limit" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5"  placeholder="输入整数"
     ></el-input>

     </div>
     
    </el-tab-pane>
    <el-tab-pane label="保持力异常报警" name="dw_alarm_low_drop">
     <div style="margin-top: 10px;">
      <span class="mark"></span>状态&nbsp;&nbsp;&nbsp; 
      <el-radio-group  v-model="retension_enable">
      <el-radio :label=true>启用</el-radio>
      <el-radio :label=false>未启用</el-radio>
     </el-radio-group>
     </div>
     <div style="margin-top: 20px;">
      <span class="mark"></span>位置&nbsp;&nbsp;&nbsp;
      <el-radio-group  v-model="retension_posi" @change="posi_change()">
      <el-radio :label="100">定位</el-radio>
       <el-radio :label="101">反位</el-radio>
      </el-radio-group>
     </div>

     <div style="margin-top: 20px;">
      <span class="mark">*</span>最低报警值:
      <!-- <el-input style="width:200px;margin-left: 58px;" v-model="dw_alarm_low_drop" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="5" placeholder="请输入0~40000之间的数字" ></el-input> -->
      <el-input style="width:180px;" v-model="dw_alarm_low_drop"  size="small" maxlength="7" placeholder="请输入100000以内的整数" ></el-input>
     </div>
     <!-- <div class="position_top_20">
      <span class="mark">*</span>下降超限百分比(%):
     <el-input style="width:200px" v-model="alarm_low_percent" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="2" placeholder="请输入5~95之间的数字"></el-input>
     </div>

     <div class="position_top_20">
      <span class="mark">*</span>上升超限百分比(%):
     <el-input style="width:200px" v-model="alarm_high_percent" oninput="value=value.replace(/^0|[^0-9]/g,'')" size="small" maxlength="2"  placeholder="请输入5~95之间的数字"></el-input>
     </div> -->
    </el-tab-pane>
     <el-tab-pane label="报警提醒间隔设置" name="alarm_interval">
      <span>间隔时间:</span>
      <el-input style="width:100px" v-model="alarm_interval" size="small"></el-input>
      <span>分钟</span>
     </el-tab-pane>
     <!-- <el-tab-pane label="最小值超限" name="third">最小值超限</el-tab-pane>
     <el-tab-pane label="峰谷差值超标" name="fourth">峰谷差值超标</el-tab-pane>
     <el-tab-pane label="变化量超标" name="five">变化量超标</el-tab-pane>
     <el-tab-pane label="经验上限" name="six">经验上限</el-tab-pane> -->
    </el-tabs>
    <span slot="footer" class="dialog-footer">
     <!-- <el-button size="small" @click="cancel_setting">取 消</el-button> -->
     <el-button size="small" type="primary" @click="submit_content">提 交</el-button> 
     <el-button size="small" @click="cancel_setting">关 闭</el-button>
    </span>
   </el-dialog>
  </div>
 </div>
</template>

<script>
import {
 conf_read,
 get_tem_curve,
 get_data_temp,
 equip_list,
 commit_record,
 refer_option,
 refer_curve,
 post_refer_curve,
 read_convert_resist,
 write_convert_resist,
 read_mitie_lock,
 write_mitie_lock,
 get_reminder_interval,
 set_reminder_interval,
 get_retension_force,
 set_retension_force,
 resist_move,
 resist_data,
} from '../api'
// import forceOption from '../chart/force-curve'
import forceDisassemble from '../chart/force-curve-disassemble'
export default {
 name: 'Force',
 data() {
  return {
   setting_dialogVisible: false,
   station_tree: [],
   defaultProps: {
    children: 'children',
    label: 'name',
   },
   isHighlight: true, // 是否高亮选中的tree节点
   show_chart: false,
   send_data: {
    cmd: 'query_hist',
    tag: '',
    time: '',
   }, //获取阻力曲线图
   query_hist_confirm: {
    cmd: 'query_hist_confirm',
    tag: '',
   }, //确认包
   //  times: [+new Date() - 120 * 60000, new Date()],
   times: [null, null],
   click_id: '', //确认是否激活
   curve_data: new Object(), // 曲线数据
   loading: false,
   defaultShowNodes: [],
   search_data: '',
   title: '', // 曲线名称
   get_tem: {
    mo: '',
    mp: '',
    starttime: '',
    endtime: '',
   }, // 获取温度数据
   myCharts: null,
   get_max_over_tag: '',
   warn_line_data: [], // 警戒线数据
   warn_line_map: new Map([
    ['lock_alarm_high_limit', ''],
    ['lock_warn_high_limit', ''],
    ['d_alarm_high_limit', '定扳反'],
    ['f_alarm_high_limit', '反扳定'],
    ['d_warn_high_limit', '定扳反'],
    ['f_warn_high_limit', '反扳定'],
   ]),
   /**报警设置数据*/
   /**转换阻力报警值设置*/
   convert_resist: {
    enable: false,
    dw_alarm_low_limit: null,
    dw_warn_low_limit: null,
    up_alarm_high_limit: null,
    up_warn_high_limit: null,
   },
   /**锁闭力报警值设置*/
   suobi_lock: {
    enable: false,
    alarm_low_limit: null,
    warn_low_limit: null,
    alarm_high_limit: null,
    warn_high_limit: null,
   },
   posi: 100,
   radio: '1#', //测力点
   enable: '', // 是否启用
   lock_alarm_high_limit: '', //锁闭力冲击力报警值 短整数
   lock_warn_high_limit: '', //锁闭力稳态预警值 短整数
   d_alarm_high_limit: '', // 定扳反报警值
   d_warn_high_limit: '', // 定扳反预警值
   f_alarm_high_limit: '', // 反扳定报警值
   f_warn_high_limit: '', // 反扳定预警值
   up_alarm_low_limit: '', //上超低限报警值
   up_warn_low_limit: '', //上超低限预警值
   dw_alarm_high_limit: '', //下超高限报警值
   dw_warn_high_limit: '', //下超高限预警值
   retension_enable: true, // 保持力是否启用
   retension_posi: 100,
   dw_alarm_low_drop: '', // 最低报警值
   alarm_low_percent: '', // 下降超限百分比
   alarm_high_percent: '', // 上升超限百分比
   alarm_interval: 0, // 分钟
   conf: [],
   post_data: {
    cmd: 'conf_read',
    type: 'suobi_lock', // 最大值超限
    tag: '',
   }, // 获取配置
   get_name: {
    cmd: 'conf_read',
    type: 'monitor.resist.rename',
    tag: '',
   }, // 获取名称
   rename_list: [], // 获取到的名称
   equip_list_data: [],
   setting_index: null,
   show_org: true, //是否显示机构
   show_label: false, // 是否显示文字
   show_switch: false, // 是否显示按钮
   is_nodata: false, // 是否有数据
   datazoom_time: [], // 缩放后的起止值
   pullInformation: [], // 扳动信息
   show_xy: false, // 是否显示xy移动
   show_label: false,
   // 浏览记录
   commit_data: {
    module: 2,
    dura: '', // 必传
    analyze_type: '',
    station: '', // 必传
    station_name: '', // 必传
    mo: '', // 必传
    mo_name: '', // 必传
    mp: '', // 必传
    mp_name: '', // 必传
    start_time: '', // 必传
    end_time: '', // 必传
    time: '', // 必传
    name: this.$store.state.name, // 必传
    username: this.$store.state.user_name, // 必传
   },
   res_time: null,
   load_finished: false,
   refer_curve_data: [],
   threshold_val: 100,
   refresh_nodes: null,
   refresh_datas: null,
   is_get_more: false,
  }
 },
 watch: {
  search_data(val) {
   this.$refs.zzj_tree.filter(val)
  },
 },
 methods: {
  // 前一天
  handle_time_left() {
   let start_time = this.times[0] - 24 * 60 * 60 * 1000
   let end_time = this.times[1] - 24 * 60 * 60 * 1000
   this.times = [start_time, end_time]
   return this.get_curve_data('is_query')
  },
  // 后一天
  handle_time_right() {
   let start_time = this.times[0] + 24 * 60 * 60 * 1000
   let end_time = this.times[1] + 24 * 60 * 60 * 1000
   this.times = [start_time, end_time]
   return this.get_curve_data('is_query')
  },
  // 前往曲线对比
  localtion_curve_compare() {
   if (!this.click_id) return
   if (!this.load_finished) return this.$message.warning('曲线暂未加载完毕，请等加载完毕后再点击')
   let data = this.get_datazoom('get_value')
   let copy_data = _.cloneDeep(this.curve_data)
   copy_data.curve_data_list.forEach(item => {
    item.points = item.points.filter(ele => {
     return ele[0] >= Math.floor(data.startValue) && ele[0] <= Math.floor(data.endValue)
    })
   })
   copy_data = copy_data.curve_data_list
   let starttime,
    endtime = null
   if (copy_data[0].points.length) {
    starttime = copy_data[0].points[0][0]
    endtime = copy_data[0].points[copy_data[0].points.length - 1][0]
   } else {
    return this.$message.warning('此区间内无值，无法对比')
   }
   this.$router.push({
    name: 'curve_compare',
    query: {
     tag: this.click_id,
     name: this.title,
     starttime,
     endtime,
    },
   })
   this.$store.state.defaultActive = '/layout/curve_compare'
   this.$store.commit('handle_save_defaultActive', '/layout/curve_compare')
  },
  // 获取扳动信息
  get_move_info(val) {
   this.curve_data.show_label = val
   setTimeout(() => {
    this.get_datazoom()
    return this.draw_line_curve()
   }, 16)
  },
  /**报警配置开始*/
  // 位置变化
  posi_change() {
   return this.tab_click()
  },
  // 点击获取预报警值
  alarm_warn_setting(type) {
   if (!this.click_id) return this.$message.warning('请选择重要信息')
   let [mo, mp] = this.click_id.split('.')
   let send_data = { mo, mp }
   switch (type) {
    case 'convert_resist':
     read_convert_resist(send_data)
      .then(res => {
       console.log('转换阻力：', res)
       this.convert_resist = res
      })
      .catch(e => {
       console.log(e)
      })
     break
    case 'suobi_lock':
     send_data.posi = this.posi
     read_mitie_lock(send_data)
      .then(res => {
       console.log('锁闭力：', res)
       this.suobi_lock = res
      })
      .catch(e => {
       console.log(e)
      })
     break
   }
  },
  // 保存预告警设置
  save_settting(type) {
   if (!this.click_id) return this.$message.warning('请选择重要信息')
   let [mo, mp] = this.click_id.split('.')
   let send_data = {
    mo,
    mp,
    conf: {},
   }
   switch (type) {
    case 'convert_resist':
     send_data.conf = _.cloneDeep(this.convert_resist)
     write_convert_resist(send_data)
      .then(res => {
       return this.$message.success('设置成功...')
      })
      .catch(e => {
       console.log(e)
      })
     break
    case 'suobi_lock':
     send_data.posi = this.posi
     send_data.conf = _.cloneDeep(this.suobi_lock)
     write_mitie_lock(send_data)
      .then(res => {
       return this.$message.success('设置成功...')
      })
      .catch(e => {
       console.log(e)
      })
     break
   }
  },
  // 关闭预告警设置
  close_setting() {
   this.convert_resist = {
    enable: false,
    dw_alarm_low_limit: null,
    dw_warn_low_limit: null,
    up_alarm_high_limit: null,
    up_warn_high_limit: null,
   }
   this.posi = 100
   this.suobi_lock = {
    enable: false,
    alarm_low_limit: null,
    warn_low_limit: null,
    alarm_high_limit: null,
    warn_high_limit: null,
   }
  },
  //  点击tabs
  tab_click() {
   switch (this.post_data.type) {
    case 'monitor.alarm.max_over_limit':
     this.radio = '1#'
     return this.get_setting_data()
    case 'monitor.alarm.friction_over_limit':
     this.reset_val()
     this.radio = '3#'
     return this.get_setting_data()
    case 'dw_alarm_low_drop':
     if (!this.click_id) return this.$message.warning('请先选择设备...')
     let [mo, mp] = this.click_id.split('.')
     let send_data = { mo, mp, posi: this.retension_posi }
     get_retension_force(send_data)
      .then(res => {
       this.retension_enable = res.enable
       this.dw_alarm_low_drop = res.dw_alarm_low_drop
       this.alarm_high_percent = res.alarm_high_percent
       this.alarm_low_percent = res.alarm_low_percent
      })
      .catch(e => {
       console.log(e)
      })
     return
    case 'alarm_interval':
     return this.handle_interval('get')
    case 'suobi_lock':
    case 'convert_resist':
     return this.alarm_warn_setting(this.post_data.type)
    default:
     break
   }
  },
  // 提交其他配置
  submit_content_other() {
   switch (this.send_data.type) {
    case 'alarm_interval':
     return this.handle_interval('set')
   }
  },
  // 获取、设置间隔
  handle_interval(type) {
   if (type == 'get') {
    get_reminder_interval()
     .then(res => {
      this.alarm_interval = res.interval
     })
     .catch(e => {
      console.log(e)
     })
   } else {
    if (isNaN(this.alarm_interval)) return this.$message.warning('请输入大于0的数字')
    let interval = Number(this.alarm_interval)
    if (interval < 0) return this.$message.warning('请输入大于0的数字')
    set_reminder_interval({ interval })
     .then(res => {
      this.handle_interval('get')
      return this.$message.success('设置成功...')
     })
     .catch(e => {
      console.log(e)
     })
   }
  },
  // 点击报警设置
  setting_params() {
   this.setting_dialogVisible = true
   return this.posi_change();
   //return this.send_get_name()
   //  return this.get_setting_data()
  },
  // 重置数据
  reset_val(data) {
   let key_list = [
    'enable',
    'lock_alarm_high_limit',
    'lock_warn_high_limit',
    'd_alarm_high_limit',
    'd_warn_high_limit',
    'f_alarm_high_limit',
    'f_warn_high_limit',
    'up_alarm_low_limit',
    'up_warn_low_limit',
    'dw_alarm_high_limit',
    'dw_warn_high_limit',
    'dw_alarm_low_drop',
    'alarm_low_percent',
    'alarm_high_percent',
   ]
   this.alarm_interval = 0
   key_list.forEach(key => {
    this[key] = ''
   })
   this.close_setting()
   if (data) return
   this.radio = '1#'
  },
  //  关闭报警配置按钮
  cancel_setting() {
   this.setting_dialogVisible = false
   this.post_data.type = 'suobi_lock'
   return this.reset_val()
  },
  // 提交配置
  submit_content() {
   if (['alarm_interval'].includes(this.post_data.type)) return this.submit_content_other()
   if (!this.click_id) return this.$message.warning('请先选择设备...')
   let target_data = this.equip_list_data.find(item => item.mo_mp == this.click_id)
   if (
    !target_data.zl_1_loca ||
    !target_data.zl_2_loca ||
    !target_data.direct1 ||
    !target_data.direct2
   )
    return this.$message.warning(
     '请先去"设备管理"模块设置1号、2号测力点位置和3号测力点伸出位、缩进位位置...'
    )
   let key_list = []
   let send_data = {};
   switch (this.post_data.type) {
    case 'monitor.alarm.max_over_limit':
     if (['1#', '2#'].includes(this.radio)) {
      key_list = ['enable', 'lock_alarm_high_limit', 'lock_warn_high_limit']
     } else {
      key_list = [
       'enable',
       'd_alarm_high_limit',
       'd_warn_high_limit',
       'f_alarm_high_limit',
       'f_warn_high_limit',
      ]
     }
     break
    case 'monitor.alarm.friction_over_limit':
     key_list = [
      'enable',
      'up_alarm_low_limit',
      'up_warn_low_limit',
      'dw_alarm_high_limit',
      'dw_warn_high_limit',
     ]
     break
     case 'dw_alarm_low_drop':
      let dw_alarm_low_drop = '';
      let alarm_low_percent = '';
      let alarm_high_percent= '';
      let regex  = /^-?\d+$/;
      if (this.dw_alarm_low_drop) {
        if(!regex.test(this.dw_alarm_low_drop) || Math.abs(this.dw_alarm_low_drop) > 100000){
          return this.$message.warning('最低报警值要求：-100000~100000之间的数字');
        }else{
          dw_alarm_low_drop = Number(this.dw_alarm_low_drop);
        }        
      }
      if (this.alarm_low_percent ){
        if(this.alarm_low_percent < 5 || this.alarm_low_percent > 95){
          return this.$message.warning('下降超限百分比要求：5~95之间的数字');
        }else{
          alarm_low_percent= Number(this.alarm_low_percent);
        }        
     }
     if (this.alarm_high_percent ){
      if(this.alarm_high_percent < 5 || this.alarm_high_percent > 95){
        return this.$message.warning('上升超限百分比要求：5~95之间的数字');
      }else{
        alarm_high_percent= Number(this.alarm_high_percent);  
      }      
       
     }
     let [mo, mp] = this.click_id.split('.')

     send_data = {
      mo,
      mp,
      posi: this.retension_posi,
      conf: {
       enable: this.retension_enable,
       dw_alarm_low_drop:dw_alarm_low_drop,
       alarm_low_percent:alarm_low_percent,
       alarm_high_percent:alarm_high_percent,
      },
     }
     set_retension_force(send_data)
      .then(res => {
       this.tab_click()
       return this.$message.success('设置成功...')
      })
      .catch(e => {
       console.log(e)
      })
     return
    case 'suobi_lock':
    if(!this.$isSortedIgnoringEmpty(this.suobi_lock.alarm_high_limit,this.suobi_lock.warn_high_limit,this.suobi_lock.alarm_low_limit,this.suobi_lock.warn_low_limit)){
        return this.$message.warning('最大报警值 > 最大预警值 > 最小报警值 > 最小预警值');
    }
    return this.save_settting(this.post_data.type);
    case 'convert_resist':

    if(this.convert_resist.dw_alarm_low_limit  && this.convert_resist.dw_warn_low_limit 
     && this.convert_resist.dw_alarm_low_limit  <= this.convert_resist.dw_warn_low_limit){
      return this.$message.warning('伸出报警值 应该大于 伸出预警值');
     }
     if(this.convert_resist.up_alarm_high_limit && this.convert_resist.up_warn_high_limit
     && this.convert_resist.up_alarm_high_limit  <= this.convert_resist.up_warn_high_limit){
      return this.$message.warning('缩进报警值 应该大于 缩进预警值');
     }
     return this.save_settting(this.post_data.type);
    default:
     break
   }
   let isEmpty = key_list.every(key => this[key] != '')
   if (!isEmpty) return this.$message.warning('请检查必填项...')
   this.conf = []
   key_list.forEach(item => {
    this.conf.push({
     name: item,
     val: this[item],
    })
   })
   this.post_data.tag = `${this.click_id}.${this.radio}.resist`
   let post_data = {
    cmd: 'conf_write',
    type: this.post_data.type,
    tag: this.post_data.tag,
    conf: this.conf,
   }
   console.log(post_data)
   this.$wsk.ws.send(JSON.stringify(post_data))
  },
  // 测力点变化
  radio_change(val) {
   this.post_data.tag = `${this.click_id}.${this.radio}.resist`
   this.reset_val('no_reset_radio')
   return this.get_setting_data()
  },
  // 状态变化
  enable_change(val) {
   console.log(val)
  },
  // 发送获取配置数据
  get_setting_data() {
   if (!this.click_id) return this.$message.warning('请先选择设备...')
   this.post_data.tag = `${this.click_id}.${this.radio}.resist`
   this.$wsk.ws.send(JSON.stringify(this.post_data))
   // 使用父路由统一接受数据
   this.$wsk.ws.onmessage = this.$parent.websocketonmessage
  },
  // 发送获取name
  send_get_name() {
   this.get_name.tag = `${this.click_id}`
   this.$wsk.ws.send(JSON.stringify(this.get_name))
   this.$wsk.ws.onmessage = this.$parent.websocketonmessage
  },
  // 获取name
  get_radio_name(re_msg) {
   let radio_list = ['1#', '2#', '3#']
   this.rename_list = []
   if (re_msg.conf && re_msg.conf.length) {
    re_msg.conf.forEach((item, index) => {
     this.rename_list.push({
      label: radio_list[index],
      name: item,
     })
    })
    // console.log(this.rename_list)
    return this.get_setting_data()
   }
  },
  // 父路由传过来的配置值
  parent_call_setting(re_msg) {
   if (!re_msg.conf || !re_msg.conf.length) return
   if (re_msg.type.includes('rename')) return this.get_radio_name(re_msg)
   return this.get_setting_list(re_msg)
  },
  // 获取配置数据
  get_setting_list(re_msg) {
   if (re_msg.tag != this.post_data.tag) return
   let key_list = []
   switch (this.post_data.type) {
    case 'monitor.alarm.max_over_limit':
     if (['1#', '2#'].includes(this.radio)) {
      key_list = ['enable', 'lock_alarm_high_limit', 'lock_warn_high_limit']
     } else {
      key_list = [
       'enable',
       'd_alarm_high_limit',
       'd_warn_high_limit',
       'f_alarm_high_limit',
       'f_warn_high_limit',
      ]
     }
     break
    case 'monitor.alarm.friction_over_limit':
     key_list = [
      'enable',
      'up_alarm_low_limit',
      'up_warn_low_limit',
      'dw_alarm_high_limit',
      'dw_warn_high_limit',
     ]
     break
    default:
     break
   }
   if (re_msg.conf && re_msg.conf.length) {
    key_list.forEach(key => {
     this[key] = re_msg.conf.find(item => item.name == key).val
    })
   }
  },
  /**报警配置结束*/
  //  获取站数据
  get_conf_read() {
   conf_read()
    .then(res => {
     this.station_tree = [res]
     return this.filterTree(this.station_tree)
    })
    .catch(e => {
     console.log(e)
    })
   // 获取设备列表
   equip_list()
    .then(res => {
     res.forEach(item => {
      item['mo_mp'] = `${item.mo}.${item.mp}`
     })
     this.equip_list_data = res
    })
    .catch(e => {
     console.log(e)
    })
  },
  // 返回
  go_back() {
   this.$store.state.defaultActive = '/layout/alarm_management'
   this.$store.commit('handle_save_defaultActive', '/layout/alarm_management')
   this.$router.push('/layout/alarm_management')
  },
  // 展开站
  filterTree(data) {
   for (let i = 0; i < data.length; i++) {
    if (data[i].children && data[i].children.length != 0) {
     for (let j = 0; j < data[i].children.length; j++) {
      if (data[i].children[j].children && data[i].children[j].children.length != 0) {
       for (let k = 0; k < data[i].children[j].children.length; k++) {
        if (
         data[i].children[j].children[k].children &&
         data[i].children[j].children[k].children.length != 0
        ) {
         for (let l = 0; l < data[i].children[j].children[k].children.length; l++) {
          this.defaultShowNodes.push(data[i].children[j].children[k].children[l].id)
         }
        }
       }
      }
     }
    }
   }
  },
  // 左侧树结构筛选转辙机
  filterNode(value, data, node) {
   if (!value) return true
   return this.checkBelongToChooseNode(value, data, node)
  },
  // 判断传入的节点是不是选中节点的子节点
  checkBelongToChooseNode(value, data, node) {
   if (data.name.indexOf(value) !== -1) {
    return true
   }
   const level = node.level
   // 如果传入的节点本身就是一级节点就不用校验了
   if (level === 1) {
    return false
   }
   // 先取当前节点的父节点
   let parentData = node.parent
   // 遍历当前节点的父节点
   let index = 0
   while (index < level - 1) {
    // 如果匹配到直接返回
    if (parentData.data.name.indexOf(value) != -1) {
     return true
    }
    // 否则的话再往上一层做匹配
    parentData = parentData.parent
    index++
   }
   // 没匹配到返回false
   return false
  },
  // 计算是否禁用
  computed_is_disabled(data) {
   if (data.type == 'mo.mp' && this.$store.state.backend_type == 2) return false
   return data.type == 'mo.mp' && !data['IMEI'] ? true : false
  },
  // 重新计算
  get_resist_move() {
   let starttime = this.$dayjs(this.times[0]).format('YYYY-MM-DD HH:mm:ss')
   let endtime = this.$dayjs(this.times[1]).format('YYYY-MM-DD HH:mm:ss')
   let send_data = {
    mo: this.get_tem.mo,
    mp: this.get_tem.mp,
    starttime,
    endtime,
    tt: +new Date(),
   }
   resist_move(send_data)
    .then(res => {
     this.show_label = false
     this.curve_data.show_label = false
     this.pullInformation = []
     if (!res || !res.data || !res.data.length) {
      if (this.curve_data.curve_data_list.length) {
       this.curve_data.curve_data_list.forEach(item => {
        item.mark_points = []
       })
      }
      this.get_datazoom()
      this.$message.warning('无重新识别扳动后的数据')
      return this.draw_line_curve()
     }
     let isEmpty = res.data.every(item => item.mark_points.length == 0)
     if (isEmpty) {
      if (this.curve_data.curve_data_list.length) {
       this.curve_data.curve_data_list.forEach(item => {
        item.mark_points = []
       })
      }
      this.get_datazoom()
      this.$message.warning('无重新识别扳动后的数据')
      return this.draw_line_curve()
     }
     this.show_label = true
     this.curve_data.show_label = true
     this.pullInformation =
      res.data
       .filter(item => {
        return item.name === '转换阻力曲线'
       })
       .find(item => {
        return item.mark_points
       }).mark_points || []
     if (this.curve_data && this.curve_data.curve_data_list) {
      if (this.curve_data.curve_data_list.length) {
       this.curve_data.curve_data_list.forEach(item => {
        let target_data = res.data.find(ele => ele.name == item.name)
        if (target_data) {
         item.mark_points = target_data.mark_points
        }
       })
      }
     }
     this.get_datazoom()
     return this.draw_line_curve()
    })
    .catch(e => {
     console.log(e)
    })
  },
  isValidNumber(value) {
   // 判断是否为数字或可以转为数字
   if (!isNaN(value)) {
    // 判断是否为整数
    if (Number.isInteger(Number(value))) {
     // 判断是否在指定范围内
     if (value >= 30 && value <= 500) {
      return true
     }
    }
   }
   return false
  },
  // http请求阻力
  get_resist_data(type) {
   let starttime = this.$dayjs(this.times[0]).format('YYYY-MM-DD HH:mm:ss')
   let endtime = this.$dayjs(this.times[1]).format('YYYY-MM-DD HH:mm:ss')
   let send_data = {
    mo: this.get_tem.mo,
    mp: this.get_tem.mp,
    starttime,
    endtime,
    tt: +new Date(),
   }
   if (type == 'all') {
    send_data.threshold = 0
   } else if (type == 'threshold') {
    send_data.threshold = Number(this.threshold_val)
    localStorage.setItem('threshold_val', this.threshold_val)
   } else {
    send_data.threshold = 30
   }
   this.curve_data = new Object()
   let date_num = +new Date()
   this.curve_data.title = this.title
   resist_data(send_data)
    .then(res => {
     console.log(`1.获取数据耗时:${+new Date() - date_num} ms`)
     date_num = +new Date()
     this.pullInformation = []
     if (!res || !res.data || !res.data.length) {
      this.show_chart = false
      this.loading = false
      return this.$message.warning('该范围内无测力数据')
     }
     let isEmpty = res.data.every(item => item.points.length == 0)
     if (isEmpty) {
      this.show_chart = false
      this.loading = false
      return this.$message.warning('该范围内无测力数据')
     }
     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.curve_data_list = _.cloneDeep(res.data)
     if (res.warn_line && res.warn_line.length) {
      this.warn_line_data = _.cloneDeep(res.warn_line)
      this.curve_data.line = _.cloneDeep(res.warn_line)
     }
     this.pullInformation =
      res.data
       .filter(item => {
        return item.name === '转换阻力曲线'
       })
       .find(item => {
        return item.mark_points
       }).mark_points || []
     if (this.pullInformation.length) {
      this.show_label = true
      this.curve_data.show_label = true
     } else {
      this.show_label = false
      this.curve_data.show_label = false
     }
     this.curve_data.starttime = starttime
     this.curve_data.endtime = endtime
     this.curve_data.threshold = send_data.threshold
     console.log(`2.处理数据耗时:${+new Date() - date_num} ms`)
     this.draw_line_curve()
     if (res.has_more) {
      this.is_get_more = true
      console.log(`点个数: ${sum}`)
      return this.get_more_data(res.data, send_data, 4, sum)
     }
    })
    .catch(e => {
     this.loading = false
     if (this.show_chart) return this.draw_line_curve()
     console.log(e)
    })
  },
  // 前往历史数据
  localtion_curve_statics() {
   if (!this.get_tem.mo || !this.get_tem.mp)
    return this.$message({
     type: 'warning',
     showClose: true,
     duration: 1500,
     message: '请选择重要信息',
    })
   let route_data = {
    name: 'curve_statistical',
    query: {
     tag: this.click_id,
     time: this.times[0] / 1000,
     endtime: this.times[1] / 1000,
     title: this.title,
    },
   }
   this.$router.push(route_data)
   this.$store.state.defaultActive = '/layout/curve_statistical'
   this.$store.commit('handle_save_defaultActive', '/layout/curve_statistical')
  },
  // 获取更多数据
  get_more_data(data, source, count, points_num) {
   let date_num = +new Date()
   if (source.mo != this.get_tem.mo || source.mp != this.get_tem.mp) return
   let data_list = data.map(item => {
    if (item.points && item.points.length) {
     return item.points[item.points.length - 1][0]
    }
   })
   let last_time = Math.max(...data_list)
   let starttime = this.$dayjs(last_time).format('YYYY-MM-DD HH:mm:ss')
   let send_data = {
    mo: source.mo,
    mp: source.mp,
    starttime,
    endtime: source.endtime,
    tt: +new Date(),
    threshold: source.threshold,
   }
   resist_data(send_data)
    .then(res => {
     if (source.mo != this.get_tem.mo || source.mp != this.get_tem.mp) return
     let option = this.myCharts.getOption()
     option.series.forEach(item => {
      res.data.forEach(ele => {
       if (item.name == ele.name) {
        item.data.push(...ele.points)
       }
      })
     })
     this.myCharts.setOption(option, false)
     let num_list = res.data.map(item => item.points.length || 0)
     let sum = num_list.reduce((total, current) => total + current, 0)
     console.log(
      `${count}.第${count - 3}次获取更多数据并追加绘制耗时:${+new Date() -
       date_num} ms, 本次点个数：${sum}`
     )
     if (res.has_more) {
      this.is_get_more = true;
      return this.get_more_data(res.data, send_data, count + 1, points_num + sum)
     }
     console.log(`Tip:获取更多数据结束,总计点个数：${points_num + sum}`)
     this.is_get_more = false
     this.load_finished = true;
    })
    .catch(e => {
     console.log(e)
    })
  },
  // 点击树结构
  handle_node_click(data, node) {
   if (data.type != 'mo.mp') return
   if (!data['IMEI'] && this.$store.state.backend_type == 1)
    return this.$message.warning('未绑定设备...')
   if (
    this.times[0] == null ||
    this.times[0] == undefined ||
    this.times[1] == null ||
    this.times[1] == undefined
   )
    return this.$message.warning('时间格式有误，请重新选择时间...')
   this.pullInformation = []
   /**浏览记录*/
   if (this.res_time) {
    this.commit_data.dura = +new Date() - this.res_time
    let copy_data = _.cloneDeep(this.commit_data)
    this.send_record(copy_data)
   }
   this.refresh_datas = _.cloneDeep(data)
   this.refresh_nodes = _.cloneDeep(node)
   this.res_time = +new Date()
   this.commit_data.station = node.parent.data.id
   this.commit_data.station_name = node.parent.data.name
   let mo_mp = data.id.split('.')
   let mo_mp_name = data.name.split('.')
   this.commit_data.mo = mo_mp[0]
   this.commit_data.mp = mo_mp[1]
   this.commit_data.mo_name = mo_mp_name[0]
   this.commit_data.mp_name = mo_mp_name[1]
   this.commit_data.time = +new Date()
   this.commit_data.start_time = this.times[0]
   this.commit_data.end_time = this.times[1]
   /**结束*/
   this.show_label = false // 是否显示label
   this.show_switch = false
   this.is_query = false
   this.show_xy = false
   this.click_id = data.id
   this.send_data.tag = data.id + '.resist'
   this.query_hist_confirm.tag = data.id + '.resist'
   this.get_tem.mo = mo_mp[0]
   this.get_tem.mp = mo_mp[1]
   this.get_max_over_tag = data.id
   this.title = data.name
   if (this.myCharts) {
    this.myCharts.dispose()
    this.myCharts = null
   }
   this.show_chart = true
   this.loading = true
   setTimeout(() => {
    return this.get_curve_data()
   }, 16)
  },
  // 刷新/查询数据
  refresh_data() {
   if (!this.refresh_datas || !this.refresh_nodes) return this.$message.warning('请选择重要信息')
   return this.handle_node_click(this.refresh_datas, this.refresh_nodes)
  },
  // 获取警戒线
  get_warnline() {
   let key = ['1#', '2#', '3#']
   let tag = ''
   let get_warn_line = {
    cmd: 'conf_read',
    type: 'suobi_lock', // 最大值超限
    tag: '',
   }
   for (let i = 0; i < key.length; i++) {
    get_warn_line.tag = this.get_max_over_tag + '.' + key[i] + '.resist'
    this.$wsk.ws.send(JSON.stringify(get_warn_line))
   }
  },
  // 父路调用的获取警戒线数据
  warnline(re_msg) {
   console.log(re_msg)
  },
  // 父路由layout调用的方法，原先websocket获取阻力数据
  parent_call(re_msg, status) {
   console.log(re_msg)
  },
  // 开始时间变化
  start_time_change(val) {
   let end_time = val + 2 * 60 * 60 * 1000
   this.times = [val, end_time]
   return this.get_curve_data()
  },
  // 结束时间变化
  end_time_change(val) {
   if (val < this.times[0]) return this.$message.warning('结束时间需大于开始时间,请重新选择')
   this.times = [this.times[0], val]
   return this.get_curve_data()
  },
  // 获取曲线数据
  get_curve_data(type) {
   if (!this.send_data.tag) return this.$message.warning('请选择重要信息')
   if (
    this.times[0] == null ||
    this.times[0] == undefined ||
    this.times[1] == null ||
    this.times[1] == undefined
   )
    return this.$message.warning('时间格式有误，请重新选择时间...')
   if (this.times[1] < this.times[0])
    return this.$message.warning('结束时间需大于开始时间,请重新选择')
  
    const timeDifference = Math.abs(this.times[1]  - this.times[0] );
    // 将时间差转换为天数
    const daysDifference = timeDifference / (1000 * 3600 * 24);
    if(daysDifference > 7)
    return this.$message.warning('时间范围是7天内,请重新选择')

   if (type == 'threshold') {
    if (!this.isValidNumber(this.threshold_val))
     return this.$message.warning('滤波阈值范围：30≤X≤500，且为整数')
   }
   if (type == 'is_query') {
    this.is_query = false
   }
   this.show_label = false // 是否显示label
   this.show_switch = false
   let starttime = this.$dayjs(this.times[0]).format('YYYY-MM-DD HH:mm:ss')
   let endtime = this.$dayjs(this.times[1]).format('YYYY-MM-DD HH:mm:ss')
   this.send_data.time = `${starttime}~${endtime}`
   if (
    this.send_data.time == 'Invalid Date~Invalid Date' ||
    this.send_data.time.includes('Invalid')
   )
    return this.$message.warning('时间格式有误，请重新选择时间...')
   this.is_get_more = false
   this.get_tem.starttime = starttime
   this.get_tem.endtime = endtime
   this.curve_data = new Object() // 清空上一次的
   this.curve_data.curve_data_list = [] // 重置为空数组
   this.warn_line_data = [] // 警戒线清空
   this.show_chart = true
   this.loading = true
   this.is_nodata = false
   this.curve_data.title = this.title
   console.log(`切换机位:${this.click_id}`)
   console.log(`时间:${starttime}~${endtime}`)
   setTimeout(() => {
    return this.get_resist_data(type)
   }, 16)
  },
  // 获取温度数据
  get_tem_data() {
   this.curve_data.tem_data = []
   this.curve_data.tem_unit = ''
   this.curve_data.show_tem = false
   if (this.$store.state.backend_type == 1) {
    get_tem_curve(this.get_tem)
     .then(res => {
      if (!res.data.length) {
       this.$message.warning('无温度数据...')
       if (!this.show_chart) return
       this.get_datazoom()
       return this.draw_line_curve()
      }
      if (!this.show_chart) {
       this.show_chart = true
      }
      this.is_nodata = true
      this.curve_data.tem_data = [
       {
        name: res.name,
        data: res.data,
       },
      ]
      this.curve_data.show_tem = true
      this.curve_data.tem_unit = res.name + ':' + res.ValueSuffix
      setTimeout(() => {
       this.get_datazoom()
       return this.draw_line_curve()
      }, 160)
     })
     .catch(e => {
      console.log(e)
     })
   } else {
    get_data_temp(this.get_tem)
     .then(res => {
      if (!res.data.length) {
       this.$message.warning('无温度数据...')
       if (!this.show_chart) return
       this.get_datazoom()
       return this.draw_line_curve()
      }
      if (!this.show_chart) {
       this.show_chart = true
      }
      this.is_nodata = true
      this.curve_data.tem_data = [
       {
        name: res.name,
        data: res.data,
       },
      ]
      this.curve_data.show_tem = true
      this.curve_data.tem_unit = res.name + ':' + res.ValueSuffix
      setTimeout(() => {
       this.get_datazoom()
       return this.draw_line_curve()
      }, 160)
     })
     .catch(e => {
      console.log(e)
     })
   }
  },
  // 画图
  draw_line_curve() {
   let date_num = +new Date()
   this.myCharts = this.$echarts.getInstanceByDom(document.getElementById('line_chart'))
   if (this.myCharts == null) {
    this.myCharts = this.$echarts.init(document.getElementById('line_chart'), null, {
     renderer: 'canvas',
    })
   }
   let pos_regex = /定位|1号/
   let inv_regex = /反位|2号/
   let zh_regex = /转换|3号/
   if (this.curve_data.curve_data_list && this.curve_data.curve_data_list.length) {
    this.show_switch = true
    this.curve_data.curve_data_list.forEach(element => {
     if (pos_regex.test(element.name)) element.color = '#a8ff78' // 苹果绿
     if (inv_regex.test(element.name)) element.color = '#FFE000' // 芒果黄
     if (zh_regex.test(element.name)) element.color = '#6DD5FA' // 天空蓝
    })
   }
   let option = forceDisassemble(this.curve_data)
   this.myCharts.off('legendselectchanged') // 解除监听legend事件
   this.myCharts.setOption(option, true) // 重新渲染
   console.log(`3.绘制折线图耗时:${+new Date() - date_num} ms`)
   this.loading = false
   // legend点击事件
   this.myCharts.on('legendselectchanged', params => {
    // if (params.name == '温度') return
    let target_list = this.refer_curve_data.map(item => item.name)
    if (target_list.includes(params.name)) return
    if (!this.warn_line_data.length && !this.refer_curve_data.length) return
    let legend_list = [] // 有哪些数据
    let legend_state = [] // 状态
    let warn_line_data = []
    let refer_curve = []
    let refer_curve_legend = []
    Object.keys(params.selected).forEach(item => {
     if (item != '温度') {
      legend_state.push({
       name: item,
       state: params.selected[item],
      })
     }
    })
    let legend_name = legend_state.filter(item => item.state == true).map(item => item.name)
    if (!legend_name.length) {
     this.curve_data.line = []
     this.curve_data.refer_curve = []
     legend_list = []
     warn_line_data = []
     refer_curve = []
     refer_curve_legend = []
    } else {
     refer_curve_legend = []
     if (legend_name.includes('1号') || legend_name.includes('定位测力曲线')) {
      legend_list.push('定位')
      refer_curve_legend.push('定位')
     }
     if (legend_name.includes('2号') || legend_name.includes('反位测力曲线')) {
      legend_list.push('反位')
      refer_curve_legend.push('反位')
     }
     if (legend_name.includes('3号') || legend_name.includes('转换阻力曲线')) {
      legend_list.push('定扳反', '反扳定')
      refer_curve_legend.push('转换')
     }
     for (let i = 0; i < legend_list.length; i++) {
      let target_data = this.warn_line_data.filter(item => item.label.includes(legend_list[i]))
      warn_line_data.push(...target_data)
     }
     for (let i = 0; i < refer_curve_legend.length; i++) {
      for (let j = 0; j < this.refer_curve_data.length; j++) {
       if (this.refer_curve_data[j].name.indexOf(refer_curve_legend[i]) != -1) {
        refer_curve.push(this.refer_curve_data[j].name)
       }
      }
     }
    }
    if (params.name == '温度') {
     this.curve_data.show_tem = params.selected['温度']
    }
    this.curve_data.line = warn_line_data
    this.get_datazoom()
    let option = forceDisassemble(this.curve_data)
    let result = this.refer_curve_data
     .map(item => item.name)
     .filter(ele => !refer_curve.includes(ele))
    result.forEach(key => {
     option.legend.selected[key] = false
    })
    refer_curve.forEach(key => {
     option.legend.selected[key] = true
    })
    this.myCharts.setOption(option, false)
   })
   window.addEventListener('resize', () => {
    this.myCharts.resize()
   })
   const resizeOb = new ResizeObserver(entries => {
    for (const entry of entries) {
     this.$echarts.getInstanceByDom(entry.target).resize()
    }
   })
   resizeOb.observe(this.$refs.line_echarts)
  },
  // 上下左右移动
  handle_xy(type) {
   switch (type) {
    case 'top':
     this.refer_curve_data.forEach(item => {
      item.data.forEach(ele => {
       ele[1] = ele[1] + 50
      })
     })
     break
    case 'bottom':
     this.refer_curve_data.forEach(item => {
      item.data.forEach(ele => {
       ele[1] = ele[1] - 50
      })
     })
     break
    case 'left':
     this.refer_curve_data.forEach(item => {
      item.data.forEach(ele => {
       ele[0] = ele[0] - 100
      })
     })
     break
    case 'right':
     this.refer_curve_data.forEach(item => {
      item.data.forEach(ele => {
       ele[0] = ele[0] + 80
      })
     })
     break
   }
   this.curve_data.refer_curve = JSON.parse(JSON.stringify(this.refer_curve_data))
   setTimeout(() => {
    this.get_datazoom()
    this.draw_line_curve()
   }, 16)
  },
  // 获取目前缩放层级
  get_datazoom(type) {
   if (!this.myCharts) return
   let optionAfterZoom = this.myCharts.getOption()
   let startValue = optionAfterZoom.dataZoom[0].startValue
   let endValue = optionAfterZoom.dataZoom[0].endValue
   if (type == 'get_value') return { startValue, endValue }
   this.curve_data.start_value = startValue
   this.curve_data.end_value = endValue
  },
  // 设置/获取参考
  handle_refer_curve(type) {
   if (type == 'none') {
    this.curve_data.refer_curve = []
    this.refer_curve_data = []
    this.show_xy = false
    this.get_datazoom()
    return this.draw_line_curve()
   }
   if (!this.pullInformation.length)
    return this.$message.warning(
     `无对应转换阻力峰值信息，不可${type == 'set' ? '设置' : '展示'}参考曲线`
    )
   let optionAfterZoom = this.myCharts.getOption()
   let startValue = optionAfterZoom.dataZoom[0].startValue
   let endValue = optionAfterZoom.dataZoom[0].endValue
   startValue = new Date(startValue).getTime()
   endValue = new Date(endValue).getTime()
   let target_data = this.pullInformation.filter(item => {
    return new Date(item.time).getTime() >= startValue && new Date(item.time).getTime() <= endValue
   })
   if (target_data.length != 1)
    return this.$message.warning(
     `缩放区域内有且只有1个转换阻力峰值时方可${type == 'set' ? '设置' : '展示'}参考曲线`
    )
   target_data = {
    time: target_data[0].time,
    direct: target_data[0].label.includes('反扳定') ? 4 : 3,
   }
   let send_data = {
    station: this.commit_data.station,
    mo: this.commit_data.mo,
    mp: this.commit_data.mp,
    direct: target_data.direct,
    show_time: target_data.time,
   }
   let other_data = {
    mo_name: this.commit_data.mo_name,
    mp_name: this.commit_data.mp_name,
    full_name: this.$store.state.name,
   }
   let set_curve = data => {
    post_refer_curve(data)
     .then(res => {
      let tip = data.show_time ? '设置' : '取消'
      if (tip == '取消') {
       this.curve_data.refer_curve = []
       this.refer_curve_data = []
       this.show_xy = false
       setTimeout(() => {
        this.get_datazoom()
        return this.draw_line_curve()
       }, 16)
      }
      return this.$message.success(`${tip}参考曲线成功!`)
     })
     .catch(e => {
      console.log(e)
     })
   }
   if (type == 'set') {
    // 设置参考曲线
    refer_option(send_data)
     .then(res => {
      this.$confirm('已存在，是否覆盖?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
       showClose: false,
       closeOnClickModal: false,
       closeOnHashChange: false,
       closeOnPressEscape: false,
      })
       .then(() => {
        set_curve({ ...send_data, ...other_data })
       })
       .catch(() => {})
     })
     .catch(e => {
      set_curve({ ...send_data, ...other_data })
     })
   }
   if (type == 'get') {
    // 获取参考曲线
    refer_option(send_data)
     .then(res => {
      this.curve_data.refer_curve = []
      this.refer_curve_data = []
      refer_curve(send_data)
       .then(res => {
        if (res.data.length) {
         this.show_xy = true
         this.refer_curve_data = res.data
         this.curve_data.refer_curve = JSON.parse(JSON.stringify(this.refer_curve_data))
        }
        setTimeout(() => {
         this.get_datazoom()
         return this.draw_line_curve()
        }, 16)
       })
       .catch(e => {
        console.log(e)
       })
     })
     .catch(e => {
      return this.$message.warning('无参考曲线，请先设置')
     })
   }
   if (type == 'cancel') {
    // 取消参考
    refer_option(send_data)
     .then(res => {
      this.$confirm('取消参考曲线将无法撤销此操作, 是否继续?', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
       showClose: false,
       closeOnClickModal: false,
       closeOnHashChange: false,
       closeOnPressEscape: false,
      })
       .then(() => {
        send_data.show_time = ''
        set_curve({ ...send_data, ...other_data })
       })
       .catch(() => {})
     })
     .catch(e => {
      return this.$message.warning('无参考曲线，操作无效')
     })
   }
  },
  // 判断URL中是否有参数
  url_is_query() {
   if (this.$route.query.tag) {
    let query = this.$route.query
    return this.format_query(query)
   }
   return this.get_time()
  },
  // 解析query
  format_query(query) {
   this.is_query = true
   let tag = query.tag.split('.')
   let title = query.title
   if (tag.length == 3) {
    tag.splice(-1, 1)
   }
   this.get_tem.mo = tag[0]
   this.get_tem.mp = tag[1]
   this.send_data.tag = tag.join('.') + '.resist'
   this.query_hist_confirm.tag = tag.join('.') + '.resist'
   this.click_id = query.tag
   if (!query.time) {
    this.get_max_over_tag = tag.join('.')
    this.get_time()
    this.show_chart = true
    this.loading = true
    this.title = title
    setTimeout(() => {
     this.get_curve_data()
    }, 150)
    return
   }
   let time = null,
    start_time = null,
    end_time = null
   if (query.time && query.endtime) {
    start_time = query.time * 1000
    end_time = query.endtime * 1000
   } else {
    time = this.$dayjs(query.time).unix()
    start_time = (time - 600) * 1000
    end_time = (time + 600) * 1000
   }
   this.times = [start_time, end_time]
   this.title = tag.join('.')
   if (title) this.title = title
   if (query.alarm_layer) {
    let content = query.alarm_layer.split('.')
    this.title = content[1] + '.' + content[2]
   }
   setTimeout(() => {
    if (this.title.includes('.')) {
     let target_search = this.title.split('.')
     this.search_data = target_search[0]
    } else {
     this.search_data = this.title
    }
   }, 300)
   this.get_max_over_tag = tag.join('.')
   this.show_chart = true
   this.loading = true
   setTimeout(() => {
    this.get_curve_data()
   }, 100)
  },
  // 获取默认时间
  get_time() {
   let threshold_val = localStorage.getItem('threshold_val')
   if (threshold_val) this.threshold_val = Number(threshold_val)
   let start_times = this.$dayjs().format('YYYY-MM-DD 00:00:00')
   let end_times = this.$dayjs().format('YYYY-MM-DD 23:59:59')
   start_times = this.$dayjs(start_times).valueOf()
   end_times = this.$dayjs(end_times).valueOf()
   this.times = [start_times, end_times]
   //  let unix_time = this.$dayjs(times).unix() * 1000
   //  this.times = [unix_time - 2 * 60 * 60 * 1000, unix_time]
   //  this.times = [1714764900000, 1714766100000] // 2024年5月4号有数据
   //  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) {
   if (commit_data.dura <= 500) return
   if (!commit_data.station || !commit_data.station_name) return
   if (!commit_data.mo || !commit_data.mo_name) return
   if (!commit_data.mp || !commit_data.mp_name) return
   commit_record([commit_data])
    .then(res => {})
    .catch(e => {})
  },
  // 离开界面时
  leave_page() {
   if (!this.res_time) return
   this.commit_data.dura = +new Date() - this.res_time
   let copy_data = _.cloneDeep(this.commit_data)
   return this.send_record(copy_data)
  },
 },
 mounted() {
  this.get_conf_read()
  this.url_is_query()
  // setTimeout(() => {
  //  this.search_data = '108'
  // }, 300)
 },
 beforeDestroy() {
  // this.myCharts.clear()
  this.leave_page()
 },
 // 监听路由变化
 beforeRouteUpdate(to, from, next) {
  this.leave_page()
  return this.format_query(to.query)
 },
}
</script>
<style lang="scss">
.station_tree {
 .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: transparent;
 }
}
</style>
<style lang="scss" scoped>
@import '../../static/css/force.scss';
</style>