<template>
  <div class="problem" @contextmenu="contextmenu">
    <div class="body">
      <img class="logo" src="../../assets/img/logo.png" alt="" />
      <div class="titleBar">
        <div class="title" @click="parametersContrast()">设备区</div>
        <el-select
          @change="listedChange()"
          class="inputs"
          v-model="selectValue"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div
        class="content"
        style="
          margin-top: 20px;
          margin-left: 35px;
          height: 85%;
          overflow-y: auto;
        "
      >
        <!-- <el-scrollbar>
          <div class="scoll"> -->
        <div class="matrix" v-if="showList.length > 0">
          <box-select node=".box" @selectList="selectList">
            
                <!-- v-if="showWh(showList[0])" -->
            <MatrixBlock
                v-if="showWh(showList[0])"
                @choose-click="handleClick"
                @on-click="handleDetails"
                :dataList="showList"
            >
            </MatrixBlock>
            <MatrixBlockPv
                v-else
              @on-click="handleDetialPv"
              :dataList="showList"
            >
            </MatrixBlockPv>
          </box-select>
        </div>
        <!-- </div>
        </el-scrollbar> -->
      </div>
    </div>

    <WindturbineDetailPages
      v-model="dialogVisible"
      :showSvg="showSvg"
      @close="handleClose"
      :windturbine="currentWindturbine"
    ></WindturbineDetailPages>
    <PvDetailPages v-model="dialogPvDia" @close="handleClose" :windturbine="currentWindturbinePv">
    </PvDetailPages>
    <ParametersContrast
      :chooseList="chooseList"
      v-model="parametersDisplay"
    ></ParametersContrast>
  </div>
</template>

<script>
import WindturbineDetailPages from "../WindturbineDetailPages.vue";
import PvDetailPages from "components/PvDetailPages.vue";
import MatrixBlock from "../matrixBlock.vue";
import MatrixBlockPv from "../matrixBlockPv.vue";
import EaxyMatrxBlock from "../eaxyMatrixBlock.vue";
import BackgroundData from "utils/BackgroundData";
import api from "api/index";
import boxSelect from "components/boxSelect.vue";
import ParametersContrast from "./parametersContrast.vue";
import MessageBridge from "utils/MessageBridge";
export default {
  name: "ProblemArea",
  components: {
    WindturbineDetailPages,
    PvDetailPages,
    MatrixBlock,
    MatrixBlockPv,
    boxSelect,
    ParametersContrast,
    EaxyMatrxBlock,
  },
  props: {
    current: {
      type: Number,
    },
    datas: {
      type: String,
    },
  },
  data() {
    return {
      allNames: [],
      allList: {},
      dataList: [],
      showList: [],
      chooseList: [],
      lockValues: [],
      currentWindturbine: {},
      currentWindturbinePv: {},
      dialogVisible: false,
      dialogPvDia: false,
      showSvg: false,
      parametersDisplay: false,
      windturbinelist: {},
      options: [
        {
          value: "0",
          label: "问题设备",
        },
        {
          value: "1",
          label: "故障",
        },
        {
          value: "2",
          label: "维护",
        },
        {
          value: "3",
          label: "离线",
        },
        {
          value: "4",
          label: "挂牌",
        },
      ],
      selectValue: "0",
      intervals: null,
      controlErorCodes: [
        "控制成功",
        "控制命令发送失败",
        "无效的控制地址",
        "被控设备异常",
        "无效的控制功能",
        "网络连接错误,检查场站通信",
        "控制结果读取超时",
        "未知错误",
        "控制命令错误",
        "收到无法识别数据",
        "未读取到数据包",
        "未知错误",
        "风机操作过频繁",
        "风机被挂牌",
        "风机操作与风机状态不符",
        "需要登录",
      ],
    };
  },
  computed: {},
  created: function () {
    this.initData();
    this.handleWindturbineChange();
    this.controls();
    this.getLocks();
    this.intervals = setInterval(() =>{
        this.handleWindturbineChange
    }, 3000);
  },
  methods: {
    showWh(item) {
        let show = false
        if (item.stationId) {
            show = true
        }
        return show
    },
    selectList(val) {
      val.forEach((item) => {
        this.handleClick(this.windturbinelist[item.id]);
      });
    },
    controls() {
        this.options = [
            {
            value: "0",
            label: "问题设备",
            },
            {
            value: "1",
            label: "故障",
            },
            {
            value: "2",
            label: "维护",
            },
            {
            value: "3",
            label: "离线",
            },
            {
            value: "4",
            label: "挂牌",
            },
        ];
        let stationList = this.$store.state.stationList;
        stationList.forEach((item, index) => {
            if (item.id.indexOf("FDC") != -1 || item.id.indexOf("GDC") != -1) {
                let obj = {};
                obj.value = String(index + 6);
                obj.label = item.name;
                obj.stationId = item.code || item.id;
                this.options.push(obj);
            }
        });
        // let json = this.$store.state.windturbinelist;
        let wswind = JSON.parse(window.sessionStorage.getItem('windSbq'))
        let pv = JSON.parse(window.sessionStorage.getItem('pvSbq'))
        let json = {}
        if (wswind && pv) {
            json = {...wswind, ...pv}
            this.dataList = [];
            const showList = [];
            let arr = Object.keys(json).sort();
            for (let id of arr) {
                let val = json[id];
                this.chooseList.forEach((item) => {
                if (item.windturbineId === val.windturbineId) {
                    val.active = true;
                }
                });
                this.dataList.push(val);
                switch (Number(this.selectValue)) {
                case 0:
                    if (
                    val.status === 5 ||
                    val.status === 6 ||
                    val.status === 7 ||
                    val.lockValue > 0
                    ) {
                    showList.push(val);
                    }
                    break;
                case 1:
                    val.status === 5 ? showList.push(val) : "";
                    break;
                case 2:
                    val.status === 6 ? showList.push(val) : "";
                    break;
                case 3:
                    val.status === 7 ? showList.push(val) : "";
                    break;
                case 4:
                    val.lockValue > 0 ? showList.push(val) : "";
                    break;
                default:
                    if (
                    val.stationId ===
                    this.options.filter((ops) => ops?.value === this.selectValue)[0]
                        .stationId
                    ) {
                    showList.push(val);
                    }
                    break;
                }
            }
            let checkoutList = BackgroundData.getInstance().checkouts;
            checkoutList.forEach((item) => {
                let showIndex = null;
                showList.forEach((param, index) => {
                if (item.windturbineId === param.windturbineId) {
                    showIndex = index;
                }
                });
                showList.splice(showIndex, 1);
            });
            showList.sort((a,b)=>{
              let aSubString = '0', bSubString = '0'
              let aStation = '1', bStation = '2'
              if(a.windturbineId && b.windturbineId){
                aSubString = a.windturbineId.substring(a.windturbineId.lastIndexOf('_')+1)
                bSubString = b.windturbineId.substring(b.windturbineId.lastIndexOf('_')+1)

                aStation = a.windturbineId.substring(0, a.windturbineId.lastIndexOf('_'))
                bStation = b.windturbineId.substring(0, b.windturbineId.lastIndexOf('_'))

              }else if(a.id && b.id){
                aSubString = a.id.substring(a.id.lastIndexOf('_')+1)
                bSubString = b.id.substring(b.id.lastIndexOf('_')+1)

                aStation = a.id.substring(0, a.id.lastIndexOf('_'))
                bStation = b.id.substring(0, b.id.lastIndexOf('_'))
              }
              if(aStation === bStation){
                return parseInt(aSubString) - parseInt(bSubString)
              }else{
                return 0
              }
            })
            this.showList = showList
        }
    },
    getLocks() {
      api.getCustomerLock().then((res) => {
        if (res) {
          this.lockValues = res.data;
        }
      });
    },
    initData: function () {
        let mb = MessageBridge.getInstance();
        let vss = [
            { key: "/topic/voice-control", action: this.windturbineMessage },
        ];
        mb.register(vss);
    },
    windturbineMessage(msg) {
      if (this.$store.state.current === 2) {
        let arr = [];
        if (msg === "CLOSE") {
          arr.push(msg);
        } else {
          arr = msg.split("-");
        }
        this.dialogVisible = false;
        this.showSvg = false;
        this.svgWeb = "";
        if (arr[0] === "OPEN_FJ") {
          this.currentWindturbine = this.windturbinelist[arr[1]];
          this.dialogVisible = true;
        } else if (arr[0] === "CLOSE") {
          this.dialogVisible = false;
        }  else if (
          arr[0] === "CONTROL_START" ||
          arr[0] === "CONTROL_STOP" ||
          arr[0] === "CONTROL_MAINTAIN"
        ) {
          let windControlList = [];
          let mss = {};
          arr.forEach((item) => {
            if (
              item ===
              (this.windturbinelist[item]
                ? this.windturbinelist[item].windturbineId
                : "")
            ) {
              switch (arr[0]) {
                case "CONTROL_START":
                  this.windturbinelist[item].controlType = "1";
                  break;
                case "CONTROL_STOP":
                  this.windturbinelist[item].controlType = "2";
                  break;
                case "CONTROL_MAINTAIN":
                  this.windturbinelist[item].controlType = "6";
                  break;
                case "CONTROL_UNMAINTAIN":
                  this.windturbinelist[item].controlType = "8";
                  break;
              }
              windControlList.push(this.windturbinelist[item]);
            }
          });
          mss.type = "send";
          this.sendCommand(mss, windControlList);
        } else if (
          arr[0] === "CONTROL_LOCK_OVERHAUL" ||
          arr[0] === "CONTROL_LOCK_MAINTAIN" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_OVERHAUL" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_MAINTAIN" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_PG" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_WEATHER" ||
          arr[0] === "CONTROL_UNLOCK"
        ) {
          let windturbine = this.windturbinelist[arr[1]];
          switch (arr[0]) {
            case "CONTROL_LOCK_OVERHAUL":
              this.sendLock({ value: "CheckLock" }, windturbine);
              break;
            case "CONTROL_LOCK_MAINTAIN":
              this.sendLock({ value: "FaultLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_OVERHAUL":
              this.sendLock({ value: "StationCheckLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_MAINTAIN":
              this.sendLock({ value: "StationFaulLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_PG":
              this.sendLock({ value: "StationPowerLineLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_WEATHER":
              this.sendLock({ value: "StationWeatherLock" }, windturbine);
              break;
            case "CONTROL_UNLOCK":
              this.sendLock({ value: "UnLock" }, windturbine);
              break;
          }
        }
      }
    },
    /* 右键菜单 */
    contextmenu() {
      const remote = require("electron").remote;
      let that = this;
      let menuTemplate = [];
      if (
        this.selectValue === "0" ||
        this.selectValue === "1" ||
        this.selectValue === "2" ||
        this.selectValue === "3" ||
        this.selectValue === "4"
      ) {
        menuTemplate = [
          {
            label: "挂牌",
            submenu: [
              {
                label: "检修",
                click() {
                  that.sendLock({ value: "CheckLock" });
                },
              },
              {
                label: "故障维修",
                click() {
                  that.sendLock({ value: "FaultLock" });
                },
              },
              {
                label: "场内受累检修",
                click() {
                  that.sendLock({ value: "StationCheckLock" });
                },
              },
              {
                label: "场内受累故障",
                click() {
                  that.sendLock({ value: "StationFaulLock" });
                },
              },
              {
                label: "场外受累电网",
                click() {
                  that.sendLock({ value: "StationPowerLineLock" });
                },
              },
              {
                label: "场外受累天气",
                click() {
                  that.sendLock({ value: "StationWeatherLock" });
                },
              },
            ],
          },
          {
            label: "取消挂牌",
            click() {
              that.sendLock({ value: "UnLock" });
            },
          },
          {
            label: "参数对比",
            click() {
              that.parametersContrast();
            },
          },
        ];
      } else {
        menuTemplate = [
          {
            label: "启动",
            click() {
              that.sendCommand({ controlType: "1", deviceType: "Manual" });
            },
          },
          {
            label: "停机",
            click() {
              that.sendCommand({ controlType: "2", deviceType: "Manual" });
            },
          },
          {
            label: "复位",
            click() {
              that.sendCommand({ controlType: "5", deviceType: "Manual" });
            },
          },
          {
            label: "维护",
            click() {
              that.sendCommand({ controlType: "6", deviceType: "Manual" });
            },
          },
          {
            label: "取消维护",
            click() {
              that.sendCommand({ controlType: "8", deviceType: "Manual" });
            },
          },
          {
            label: "挂牌",
            submenu: [
              {
                label: "检修",
                click() {
                  that.sendLock({ value: "CheckLock" });
                },
              },
              {
                label: "故障维修",
                click() {
                  that.sendLock({ value: "FaultLock" });
                },
              },
              {
                label: "场内受累检修",
                click() {
                  that.sendLock({ value: "StationCheckLock" });
                },
              },
              {
                label: "场内受累故障",
                click() {
                  that.sendLock({ value: "StationFaulLock" });
                },
              },
              {
                label: "场外受累电网",
                click() {
                  that.sendLock({ value: "StationPowerLineLock" });
                },
              },
              {
                label: "场外受累天气",
                click() {
                  that.sendLock({ value: "StationWeatherLock" });
                },
              },
            ],
          },
          {
            label: "取消挂牌",
            click() {
              that.sendLock({ value: "UnLock" });
            },
          },
          {
            label: "参数对比",
            click() {
              that.parametersContrast();
            },
          },
        ];
      }

      const menu = remote.Menu.buildFromTemplate(menuTemplate);

      menu.popup(remote.getCurrentWindow());
    },

    sendCommand(msg, windturbine) {
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      let sendList = [];
      if (windturbine) {
        sendList = windturbine;
      } else {
        this.chooseList.forEach((item) => {
          item.controlType = Number(msg.controlType);
        });
        sendList = this.chooseList;
      }

      if (sendList.length > 0) {
        bd.checkout(sendList);
        this.chooseList = [];
        let pairs = {};
        sendList.forEach((item) => {
          let ct = {
            windturbineId: item.windturbineId,
            stationId: item.stationId,
            projectId: item.projectId,
            modelId: item.modelId,
            controlType: item.controlType,
            lockType: item.lockType,
            userName: `system_${bd.LoginUser.name}`,
            userId: 0,
            auto: false,
            deviceType: msg.deviceType,
          };
          pairs[ct.windturbineId] = ct;
        });
        api.windturbControl(pairs).then((res) => {
          if (res) {
            this.controlSuccess(res);
          }
        });
      }
    },
    sendLock(msg, windturbine) {
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      let sendList = [];
      if (windturbine) {
        windturbine.lockType = msg.value;
        sendList.push(windturbine);
      } else {
        this.chooseList.forEach((item) => {
          item.lockType = msg.value;
        });
        sendList = this.chooseList;
      }
      if (sendList.length > 0) {
        this.chooseList = [];
        let pairs = {};
        sendList.forEach((item) => {
          let ct = {
            windturbineId: item.windturbineId,
            stationId: item.stationId,
            projectId: item.projectId,
            modelId: item.modelId,
            controlType: item.controlType,
            lockType: item.lockType,
            userName: `system_${bd.LoginUser.name}`,
            userId: 0,
          };
          pairs[ct.windturbineId] = ct;
        });
        api.windturbControlLock(pairs).then((res) => {
          if (res) {
            this.controlSuccess(res);
          }
        });
      }
    },

    /* 控制成功 */
    controlSuccess(msg) {
      let bd = BackgroundData.getInstance();
      for (let id in msg.data) {
        let val = msg.data[id];
        if (val.errorCode !== "0") {
          bd.removeCheckouts(val);
        }
      }
      let mss = ""; // 信息
      let iserror = false; // 是否有控制错误的风机
      for (let v in msg.data) {
        let val = msg.data[v];
        if (val.errorCode > 0) {
          iserror = true;
          mss += `${val.windturbineId}  ${
            this.controlErorCodes[val.errorCode]
          }\n`;
        }
      }
      let tp = iserror ? "warning" : "success";
      // if (!iserror) {
      //   mss = "控制成功";
      // }

      this.$notify({
        title: "控制",
        message: mss,
        type: tp,
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },

    /* 控制失败 */
    controlError(err) {
      this.$notify({
        title: "控制出现错误",
        message: err.message,
        type: "warning",
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },
    handleClick(values) {
      if (values.active) {
        let showIndex = null;
        this.chooseList.forEach((item, index) => {
          if (item.windturbineId === values.windturbineId) {
            showIndex = index;
          }
        });
        this.chooseList.splice(showIndex, 1);
      } else {
        this.chooseList.push(values);
      }
      this.showList.forEach((item) => {
        if (item.windturbineId === values.windturbineId) {
          item.active = !item.active;
        }
      });
    },
    listedChange() {
      this.chooseList = [];
      const showList = [];
      if (Number(this.selectValue) >= 6) {
        console.log(
          this.options.filter((ops) => ops?.value === this.selectValue)[0]
            .stationId
        );
        this.$store.commit(
          "currentStation",
          this.options.filter((ops) => ops?.value === this.selectValue)[0]
            .stationId
        );
      } else {
        this.$store.commit("currentStation", "");
      }
      console.log(this.$store.state.currentStation);
      this.dataList.forEach((val) => {
        val.active = false;
        switch (Number(this.selectValue)) {
          case 0:
            if (
              val.status === 5 ||
              val.status === 6 ||
              val.status === 7 ||
              val.lockValue > 0
            ) {
              showList.push(val);
            }
            break;
          case 1:
            val.status === 5 ? showList.push(val) : "";
            break;
          case 2:
            val.status === 6 ? showList.push(val) : "";
            break;
          case 3:
            val.status === 7 ? showList.push(val) : "";
            break;
          case 4:
            val.lockValue > 0 ? showList.push(val) : "";
            break;
          default:
            if (Number(this.selectValue) < 12) {
                if (
                  val.stationId ===
                  this.options.filter((ops) => ops?.value === this.selectValue)[0]
                    .stationId
                ) {
                  showList.push(val);
                }
            } else {
                if (
                  val.station ===
                  this.options.filter((ops) => ops?.value === this.selectValue)[0]
                    .stationId
                ) {
                  showList.push(val);
                }
            }
            break;
        }
      });
      showList.sort((a,b)=>{
        let aSubString = '0', bSubString = '0'
        let aStation = '1', bStation = '2'
        if(a.windturbineId && b.windturbineId){
          aSubString = a.windturbineId.substring(a.windturbineId.lastIndexOf('_')+1)
          bSubString = b.windturbineId.substring(b.windturbineId.lastIndexOf('_')+1)

          aStation = a.windturbineId.substring(0, a.windturbineId.lastIndexOf('_'))
          bStation = b.windturbineId.substring(0, b.windturbineId.lastIndexOf('_'))

        }else if(a.id && b.id){
          aSubString = a.id.substring(a.id.lastIndexOf('_')+1)
          bSubString = b.id.substring(b.id.lastIndexOf('_')+1)

          aStation = a.id.substring(0, a.id.lastIndexOf('_'))
          bStation = b.id.substring(0, b.id.lastIndexOf('_'))
        }
        if(aStation === bStation){
          return parseInt(aSubString) - parseInt(bSubString)
        }else{
          return 0
        }
      })
      this.showList = showList
    },
    handleDetails(itm) {
      this.dialogVisible = true;
      this.currentWindturbine = itm;
    },
    handleDetialPv(item) {
        this.dialogPvDia = true;
        this.currentWindturbinePv = item;
    },
    handleClose() {
      this.dialogVisible = false;
      this.showSvg = false;
      this.getLocks();
    },
    parametersContrast() {
      if (this.chooseList.length > 1) {
        this.parametersDisplay = true;
      }
    },
    handleWindturbineChange() {
        let ws = MessageBridge.getInstance();
        let wind = [
            { key: "/topic/windturbine", action: this.getWindMsg },
        ];
        let guangfu = [
            { key: "/topic/pv", action: this.getPvMsg },
        ];
        ws.register(wind);
        ws.register(guangfu);
    },
    getPvMsg(msg) {
        window.sessionStorage.removeItem('pvSbq')
        // let jsonMsg = JSON.parse(msg)
        window.sessionStorage.setItem('pvSbq', msg)
        this.changeData()
    },
    getWindMsg(msg) {
        window.sessionStorage.removeItem('windSbq')
        // let jsonMsg = JSON.parse(msg)
        window.sessionStorage.setItem('windSbq', msg)
        this.changeData()
    },
    changeData() {
        let wswind = JSON.parse(window.sessionStorage.getItem('windSbq'))
        let pv = JSON.parse(window.sessionStorage.getItem('pvSbq'))
        let msg = {}
        if (wswind || pv) {
            msg = {...wswind}
            if(pv){
              msg = {...msg, ...pv}
            }
            this.windturbinelist = msg;
            this.$store.commit("windturbinelist", msg);
            this.dataList = [];
            const showList = [];
            let arr = Object.keys(msg).sort();
            let newArr = [];
            for (let id of arr) {
                let val = msg[id];
                newArr.push(val);
                this.chooseList.forEach((item) => {
                if (item.windturbineId === val.windturbineId) {
                    val.active = true;
                }
                });
                if (val.lockValue === 9) {
                val.lockValues = this.lockValues.filter(
                    (item) => val.windturbineId === item.windturbineID
                )[0]?.value;
                }
                this.dataList.push(val);
                switch (Number(this.selectValue)) {
                case 0:
                    if (
                    val.status === 5 ||
                    val.status === 6 ||
                    val.status === 7 ||
                    val.lockValue > 0
                    ) {
                    showList.push(val);
                    }
                    break;
                case 1:
                    val.status === 5 ? showList.push(val) : "";
                    break;
                case 2:
                    val.status === 6 ? showList.push(val) : "";
                    break;
                case 3:
                    val.status === 7 ? showList.push(val) : "";
                    break;
                case 4:
                    val.lockValue > 0 ? showList.push(val) : "";
                    break;

                default:
                    // if (
                    // val.stationId ===
                    // this.options.filter(
                    //     (ops) => ops?.value === this.selectValue
                    // )[0].stationId
                    // ) {
                    // this.showList.push(val);
                    // }
                    if (Number(this.selectValue) < 12) {
                        if (
                        val.stationId ===
                        this.options.filter((ops) => ops?.value === this.selectValue)[0]
                            .stationId
                        ) {
                        showList.push(val);
                        }
                    } else {
                        if (
                        val.station ===
                        this.options.filter((ops) => ops?.value === this.selectValue)[0]
                            .stationId
                        ) {
                        showList.push(val);
                        }
                    }
                    break;
                }
            }
            // console.log('showList', this.showList)
            let checkoutList = BackgroundData.getInstance().checkouts;
            if (checkoutList.length>0) {
                checkoutList.forEach((item) => {
                    let showIndex = null;
                    showList.forEach((param, index) => {
                    if (item.windturbineId === param.windturbineId) {
                        showIndex = index;
                    }
                    });
                    showList.splice(showIndex, 1);
                });
            }
            showList.sort((a,b)=>{
              let aSubString = '0', bSubString = '0'
              let aStation = '1', bStation = '2'
              if(a.windturbineId && b.windturbineId){
                aSubString = a.windturbineId.substring(a.windturbineId.lastIndexOf('_')+1)
                bSubString = b.windturbineId.substring(b.windturbineId.lastIndexOf('_')+1)

                aStation = a.windturbineId.substring(0, a.windturbineId.lastIndexOf('_'))
                bStation = b.windturbineId.substring(0, b.windturbineId.lastIndexOf('_'))

              }else if(a.id && b.id){
                aSubString = a.id.substring(a.id.lastIndexOf('_')+1)
                bSubString = b.id.substring(b.id.lastIndexOf('_')+1)

                aStation = a.id.substring(0, a.id.lastIndexOf('_'))
                bStation = b.id.substring(0, b.id.lastIndexOf('_'))
              }
              if(aStation === bStation){
                return parseInt(aSubString) - parseInt(bSubString)
              }else{
                return 0
              }
            })
            this.showList = showList
            
        }
    }
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
};
</script>
<style scoped>
.problem {
  height: 100%;
}

.body {
  border: 1px solid #373737;
  width: 100%;
  margin-left: 15px;
  margin-top: 10px;
  height: 61vh;
}

.body .scoll {
  height: 91%;
}

.titleBar {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.title {
  color: #ffffff;
  font-size: 14px;
  margin-left: 32px;
  /* margin-top: 12px; */
  margin-bottom: 10px;
  /* width: 570px; */
  width: 29vw;
  height: 50px;
  display: flex;
  align-items: center;
  position: absolute;
  background-color: #000000;
}

.title::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: -18px !important;
  /* top: 30px !important; */
  width: 5px;
  height: 5px;
  background-color: #54b75a;
  border-radius: 50%;
}

.inputs {
  border: none;
  width: 174px !important;
  margin-left: 110px;
}

.el-input__inner {
  background-color: rgb(100, 100, 100) !important;
  color: rgb(220, 220, 220) !important;
  border: 1px solid red !important;
}

.logo {
  position: absolute;
  top: 2px;
  left: 12px;
}
.content::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.box1 {
  width: 99%;
  height: 40px;
  background-color: rgb(30, 30, 30);
  margin-top: 2px;
  text-align: left;
  line-height: 40px;
  color: #fff;
  box-sizing: border-box;
  padding-left: 20px;
}
</style>