<template>
  <el-dialog
    fullscreen
    @opened="opened()"
    @closed="closed()"
    modal-class="my-info-dialog"
  >
    <template #title>
      <div style="margin-top: -10px; color: #ffffff">风机详情</div>
    </template>

    <div class="body">
      <el-tabs
        v-model="activeName"
        class="wind-tabs"
        @tab-click="handleTabsClick"
        type="border-card"
        stretch
        lazy
      >
        <el-tab-pane label="主要参数(宁夏)" name="first" class="tabSty">
          <div class="titleList">
            <div class="chunkdiv" @click="handleClick(true)">
              <div class="title">风机号：&emsp;</div>
              <div>{{ windturbine.windturbineId }}</div>
              <!-- <div>
            {{ windturbine.stationId.slice(0, 2) }}-{{ windturbine.code }}
          </div> -->
            </div>
            <div
              class="chunkdiv"
              @click="handleClick(true)"
              @dblclick="dbClicks(baseDate.windSpeed)"
            >
              <div class="title">{{ baseDate.windSpeed.name }}：&emsp;</div>
              <div>
                {{ baseDate.windSpeed.value }}{{ baseDate.windSpeed.unit }}
              </div>
            </div>
            <div
              class="chunkdiv"
              @click="handleClick(true)"
              @dblclick="dbClicks({ code: 'YDPJFS5M', name: '五分钟平均风速' })"
            >
              <div class="title">五分钟平均风速：&emsp;</div>
              <div>{{ healthInfo?.averageWindSpeed5?.toFixed(2) }}m/s</div>
            </div>
            <div
              class="chunkdiv"
              @click="handleClick(true)"
              @dblclick="dbClicks(theoreticalPower)"
            >
              <div class="title">理论功率：&emsp;</div>
              <div>{{ healthInfo?.theoreticalPower?.toFixed(2) }}Kw</div>
            </div>
            <div
              class="chunkdiv"
              @click="handleClick(true)"
              @dblclick="dbClicks(baseDate.power)"
            >
              <div class="title">{{ baseDate.power.name }}：&emsp;</div>
              <div>{{ baseDate.power.value }}{{ baseDate.power.unit }}</div>
            </div>
            <div
              class="chunkdiv"
              @click="handleClick(true)"
              @dblclick="dbClicks(baseDate.generatorSpeed)"
            >
              <div class="title">
                {{ baseDate.generatorSpeed.name }}：&emsp;
              </div>
              <div>
                {{ baseDate.generatorSpeed.value
                }}{{ baseDate.generatorSpeed.unit }}
              </div>
            </div>
            <div class="chunkdiv" @click="handleClick(false)">
              <div class="title">故障信息: &emsp;{{ faultNum }}</div>
            </div>
          </div>
          <BasicInformationDetail
            v-show="current"
            ref="BasicInfo"
            :types="types"
            @health-click="handleHealth"
            :windturbine="windturbine"
          ></BasicInformationDetail>
          <div class="faultInfo" v-show="!current">
            <div class="left-item">
              <div
                :class="item.openedCount > 0 ? 'faultNameErr' : 'faultName'"
                v-for="(item, index) in fault"
                :key="index"
                @click="handleFaultClick(index)"
              >
                {{ item.component }}
                <div class="faultNum" v-if="item.openedCount > 0">
                  ({{ item.openedCount }})
                </div>
              </div>
            </div>
            <div class="right-item">
              <div class="tables">
                <el-table
                  :data="faultList"
                  class="table"
                  style="width: 100%"
                  height="67vh"
                  stripe
                  highlight-current-row
                  :header-cell-style="{
                    background: 'rgb(30,30,30)',
                    color: 'rgb(220,220,220)',
                    padding: '4px',
                    fontSize: '14px',
                    'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                  }"
                  :cell-style="tableCellStyle"
                >
                  <el-table-column
                    prop="id"
                    label="报警编号"
                    width="200"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="modelId"
                    label="风机型号"
                    width="150"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="alertText"
                    label="报警信息"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column label="故障状态" width="120" align="center">
                    <template #default="scope">
                      <span>
                        {{ scope.row.isOpened > 0 ? "故障" : "正常" }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="主要参数(山西)" name="second">
          <div class="paramsMain">
            <div class="paramsLeft">
              <div
                class="dataList"
                v-for="(it, index) in leftData"
                :key="index"
              >
                <div class="dataTitles">
                  <div style="margin-left: 24px; font-size: 16px">
                    {{ it.name }}
                  </div>
                </div>
                <div class="dataContent">
                  <div
                    class="dataBlock"
                    v-for="(item, index) in it.data"
                    :key="index"
                  >
                    <div class="dataName">{{ item.name }}</div>
                    <div class="numerical">
                      <div class="values">{{ item.value }}</div>
                      <div class="unit">{{ item.unit }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="paramsCenter">
              <StandAloneImg
                :activeIndex="showIndex"
                @selectSvg="selectSvg"
                class="sai"
              ></StandAloneImg>
              <div
                class="dataList"
                v-for="(it, index) in centerData"
                :key="index"
              >
                <div class="dataTitles">
                  <div style="margin-left: 24px; font-size: 16px">
                    {{ it.name }}
                  </div>
                </div>
                <div class="dataContent">
                  <div
                    class="dataBlock"
                    v-for="(item, index) in it.data"
                    :key="index"
                  >
                    <div class="dataName">{{ item.name }}</div>
                    <div class="numerical">
                      <div class="values">{{ item.value }}</div>
                      <div class="unit">{{ item.unit }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="paramsRight">
              <div
                class="dataList"
                v-for="(it, index) in rightData"
                :key="index"
              >
                <div class="dataTitles">
                  <div style="margin-left: 24px; font-size: 16px">
                    {{ it.name }}
                  </div>
                </div>
                <div class="dataContent">
                  <div
                    class="dataBlock"
                    v-for="(item, index) in it.data"
                    :key="index"
                  >
                    <div class="dataName">{{ item.name }}</div>
                    <div class="numerical">
                      <div class="values">{{ item.value }}</div>
                      <div class="unit">{{ item.unit }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="paramsMainBot">
            <div
              class="dataList"
              v-for="(it, index) in mainBotData"
              :key="index"
            >
              <div class="dataTitles">
                <div style="margin-left: 24px; font-size: 16px">
                  {{ it.name }}
                </div>
              </div>
              <div class="dataContent">
                <div
                  class="dataBlock"
                  v-for="(item, index) in it.data"
                  :key="index"
                >
                  <div class="dataName">{{ item.name }}</div>
                  <div class="numerical">
                    <div class="values">{{ item.value }}</div>
                    <div class="unit">{{ item.unit }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实时报警" name="third">
          <div class="nowWarn">
            <div class="nowWarnTree">
              <el-tree
                class="filter-tree"
                :data="nowWarnTreeData"
                :props="defaultProps"
                node-key="id"
                :default-expanded-keys="[0]"
                ref="tree"
                @node-click="handleChange"
              >
              </el-tree>
            </div>
            <div class="nowWarnTable">
              <el-table
                :data="nowWarnTableData"
                class="table"
                style="width: 100%"
                height="85vh"
                stripe
                highlight-current-row
                :header-cell-style="{
                  background: 'rgb(30,30,30)',
                  color: 'rgb(220,220,220)',
                  padding: '4px',
                  fontSize: '14px',
                  'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                }"
                :cell-style="tableCellStyle"
              >
                <el-table-column
                  prop="id"
                  label="报警编号"
                  width="200"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="最近一次报警时间"
                  width="150"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="alertText"
                  label="报警文字信息"
                  align="center"
                >
                </el-table-column>
                <el-table-column label="故障状态" width="120" align="center">
                  <template #default="scope">
                    <span>
                      {{ scope.row.isOpened > 0 ? "故障" : "正常" }}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史报警" name="fourth">
          <div class="searchTitle">
            <div class="search">
              <div class="date">日期:</div>
              <el-date-picker
                class="pickers"
                @change="changes"
                v-model="timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>

            <div class="buttons">查询</div>
            <div class="buttons">导出</div>
          </div>
          <div class="historyWarnTable">
            <el-table
              :data="historyWarnTableData"
              class="table"
              style="width: 100%"
              height="75vh"
              stripe
              highlight-current-row
              :header-cell-style="{
                background: 'rgb(30,30,30)',
                color: 'rgb(220,220,220)',
                padding: '4px',
                fontSize: '14px',
                'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
              }"
              :cell-style="tableCellStyle"
            >
              <el-table-column
                prop="time"
                label="时间"
                width="200"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="id"
                label="设备"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="alertText"
                label="报警信息"
                width="500"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="leavl" label="级别" align="center">
              </el-table-column>
              <el-table-column prop="warnType" label="报警类型" align="center">
              </el-table-column>
              <el-table-column prop="stopType" label="停机类型" align="center">
              </el-table-column>
              <el-table-column label="故障类型" align="center">
                <template #default="scope">
                  <span>
                    {{ scope.row.isOpened > 0 ? "故障" : "正常" }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="isOpenedType"
                label="故障原因"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
          <div class="paginations">
            <el-pagination
              :hide-on-single-page="true"
              :page-size="page.pagesize"
              background
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测点详情" name="five">
          <div class="searchTitle">
            <div class="search">
              <div class="date">测点:</div>
              <el-input
                class="inputs"
                placeholder="请输入"
                v-model="inputVlaues"
              ></el-input>
            </div>

            <div class="buttons">查询</div>
          </div>
          <div class="measurePoint">
            <div class="measurePointL">
              <el-table
                :data="measurePointDataL"
                class="table"
                style="width: 100%"
                height="75vh"
                stripe
                highlight-current-row
                :header-cell-style="{
                  background: 'rgb(30,30,30)',
                  color: 'rgb(220,220,220)',
                  padding: '4px',
                  fontSize: '14px',
                  'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                }"
                :cell-style="tableCellStyle"
              >
                <el-table-column prop="name" label="测点名称" align="center">
                </el-table-column>
                <el-table-column prop="value" label="测点值" align="center">
                </el-table-column>
              </el-table>
            </div>
            <div class="measurePointR">
              <el-table
                :data="measurePointDataR"
                class="table"
                style="width: 100%"
                height="75vh"
                stripe
                highlight-current-row
                :header-cell-style="{
                  background: 'rgb(30,30,30)',
                  color: 'rgb(220,220,220)',
                  padding: '4px',
                  fontSize: '14px',
                  'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                }"
                :cell-style="tableCellStyle"
              >
                <el-table-column prop="name" label="测点名称" align="center">
                </el-table-column>
                <el-table-column prop="value" label="测点值" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import api from "api/index";
import BasicInformationDetail from "./BasicInformationDetail.vue";
import StandAloneImg from "./StandAloneImg.vue";
import BackgroundData from "utils/BackgroundData";
import Fault from "utils/fault";

import dataJson from "./windturbinJsondata.json";
export default {
  components: {
    BasicInformationDetail,
    StandAloneImg,
  },
  props: {
    windturbine: Object,
  },
  data() {
    return {
      current: true,
      BasicInfo: {},
      healthInfo: {},
      activeName: "first",
      showIndex: 1,
      line: "",
      alarmTime: "",
      alarmContent: "",
      alarms: [],
      count: false,
      theoreticalPower: {
        code: "LLGL",
        name: "理论功率",
      },
      typeList: [
        {
          type: 0,
          name: "已经停机",
        },
        {
          type: 1,
          name: "上电",
        },
        {
          type: 2,
          name: "待机",
        },
        {
          type: 3,
          name: "启动",
        },
        {
          type: 4,
          name: "并网",
        },
        {
          type: 5,
          name: "故障",
        },
        {
          type: 6,
          name: "维护",
        },
        {
          type: 7,
          name: "离线",
        },
      ],
      baseDate: {
        windSpeed: {
          name: "",
          num: "",
          unit: "",
        },
        power: {
          name: "",
          num: "",
          unit: "",
        },
        generatorSpeed: {
          name: "",
          num: "",
          unit: "",
        },
      },
      types: null,
      fault: {},
      refreshTimer: "",
      refreshTimers: "",
      faultNum: 0,
      faultList: [],
      // station: [],
      leftData: [],
      centerData: [],
      rightData: [],
      mainBotData: [],
      nowWarnTreeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      nowWarnTableData: [],
      timeValue: [],
      historyWarnTableData: [],
      page: {
        pagenum: 1,
        pagesize: 100,
        total: 0,
      },
      inputVlaues: "",
      measurePointDataL: [],
      measurePointDataR: [],
    };
  },
  created() {
    this.getUniformCodes();
    this.baseDate = dataJson.baseDate;
    // this.getWindturbineFdc();
  },
  mounted() {
    this.leftData = dataJson.leftData;
    this.centerData = dataJson.centerData;
    this.rightData = dataJson.rightData;
    this.mainBotData = dataJson.mainBotData;
    this.nowWarnTreeData = dataJson.nowWarnTreeData;
    this.nowWarnTableData = dataJson.nowWarnTableData;
    this.historyWarnTableData = dataJson.historyWarnTableData;
    this.measurePointDataL = dataJson.measurePointDataL;
    this.measurePointDataR = dataJson.measurePointDataR;
  },
  methods: {
    handleTabsClick() {},
    selectSvg(index) {
      this.showIndex = index;
    },
    handleCurrentChange(val) {
      this.page.pagenum = val;
    },
    // getWindturbineFdc() {
    //   api.getWindturbineFdc().then((res) => {
    //     this.station = res.data;
    //   });
    // },
    handleFaultClick(index) {
      this.faultList = this.fault[index].alertSnaps;
    },
    handleClick(val) {
      this.current = val;
    },
    getUniformCodes() {
      api.getUniformCodes().then((res) => {
        this.UniformCodes = res.data;
      });
    },
    opened() {
      this.line = "";
      this.alarmTime = "";
      this.alarmContent = "";
      this.BasicInfo = this.uniformCodesDeal(this.windturbine);
      this.BasicInfo.windturbineId = this.windturbine.windturbineId;
      // this.dateDeal(this.BasicInfo)
      this.$refs.BasicInfo.start(this.BasicInfo);
      this.initData();
      this.refreshData();
      this.refreshTimer = setInterval(this.refreshData, 5000);
    },
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      let warningColor = false;
      let obj = {};
      if (row.isOpened > 0) {
        warningColor = true;
      }
      if (warningColor) {
        obj = {
          height: "40px",
          background: "rgb(30,30,30)",
          color: "rgb(255,156,0)",
          padding: "3px",
          fontSize: "12px",
          "border-top": "0px solid #000000",
          "border-bottom": "1px solid #000000",
          "border-right": "1px solid #000000",
        };
      } else {
        obj = {
          height: "40px",
          background: "rgb(30,30,30)",
          color: "rgb(220,220,220)",
          padding: "3px",
          fontSize: "12px",
          "border-top": "0px solid #000000",
          "border-bottom": "1px solid #000000",
          "border-right": "1px solid #000000",
        };
      }

      return obj;
    },
    uniformCodesDeal(windturbine) {
      let val = this.UniformCodes[windturbine.stationId][windturbine.modelId];
      let codes = "";
      val.forEach((element) => {
        element.param.forEach((itm) => {
          codes += itm.code + ",";
        });
      });
      val.codes = codes;
      return val;
    },
    closed() {
      this.$refs.BasicInfo.end();
      this.$emit("close");
      clearInterval(this.refreshTimer);
      clearInterval(this.refreshTimers);
      this.refreshTimers = null;
      this.refreshTimer = null;
    },
    dateDeal(BasicInfo) {
      let showInf = {};
      showInf = BasicInfo.filter((item) => item.tag === "基本信息")[0];
      this.baseDate.windSpeed = showInf.param.filter(
        (item) => item.name === "风速"
      )[0];
      this.baseDate.power = showInf.param.filter(
        (item) => item.name === "有功功率"
      )[0];
      this.baseDate.generatorSpeed = showInf.param.filter(
        (item) => item.name === "发电机转速"
      )[0];
      this.baseDate.type = showInf.param.filter(
        (item) => item.name === "状态"
      )[0].value
        ? this.typeList.filter(
            (status) =>
              status.type ===
              Number(
                showInf.param.filter((item) => item.name === "状态")[0].value
              )
          )[0].name
        : "";
      this.types = Number(
        showInf.param.filter((item) => item.name === "状态")[0].value
      );
    },
    refreshData() {
      let bg = BackgroundData.getInstance();
      bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
      this.dateDeal(this.BasicInfo);
      // clearInterval(this.refreshTimer);
      // this.refreshTimers = setInterval(this.refreshData, 5000);
    },
    initData() {
      api
        .getWindWarning(this.windturbine.windturbineId, "1", "50")
        .then((msg) => {
          let vs = msg.data;
          if (vs.length <= 0) return;
          this.alarmTime = BackgroundData.getInstance().formatDate(
            vs[0].lastUpdateTime
          );
          this.alarmContent = vs[0].alertText;
          this.alarms = msg.data;
          this.$refs.BasicInfo.alarmd(this.alarms);
        })
        .catch((err) => {
          console.log(err);
        });
      api
        .alarmSnap({
          windturbineId: this.windturbine.windturbineId,
        })
        .then((res) => {
          this.fault = res.data;
          this.faultList = res.data[0].alertSnaps;
          let faultNum = 0;
          this.fault.forEach((item) => {
            faultNum = faultNum + item.openedCount;
          });
          this.faultNum = faultNum;
        });
    },
    dbClicks(value) {
      this.$refs.BasicInfo.dbClicks(value, this.windturbine.windturbineId);
    },
    handleHealth(value) {
      this.healthInfo = value;
    },
  },
  watch: {
    windturbine: {
      handler: function (json) {
        if (json) {
          this.initData();
        }
      },
    },
  },
};
</script>


<style lang="less">
.my-info-dialog {
  box-shadow: 0px 0px 10px #05bb4c;
  z-index: 10000 !important;
  .paramsMain {
    width: 100%;
    display: flex;
    .paramsLeft {
      width: 25%;
      .dataList {
        width: 97%;
        /* min-height: 250px; */
        background-color: #141414;
        display: flex;
        flex-direction: column;
        margin-left: 2%;
        margin-bottom: 30px;
        .dataTitles {
          display: flex;
          height: 37px;
          width: 100%;
          background-color: #242424;
          color: #ffffff;
          font-size: 12px;
          align-items: center;
        }
        .dataContent {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          overflow: auto;
          justify-content: space-around;
          .dataBlock {
            width: 100%;
            height: 25px;
            background-color: #242424;
            border: 1px solid #3d3d3d;
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            padding: 10px 20px 0 20px;
            .dataName {
              font-size: 12px;
              color: #ffffff;
              margin-bottom: 6px;
            }

            .numerical {
              display: flex;
              flex-direction: row;
              color: #05bb4c;
              align-items: baseline;
              position: relative;
              top: -3px;
              .values {
                font-size: 16px;
              }

              .unit {
                font-size: 12px;
                margin-left: 8px;
              }
            }
          }
        }
      }
    }
    .paramsCenter {
      width: 50%;
      .sai {
        float: left;
        margin-left: 40px;
        margin-top: 30px;
        margin-bottom: 15px;
        width: 100%;
        height: 34vh;
      }
      .dataList {
        width: 97%;
        /* min-height: 250px; */
        background-color: #141414;
        display: flex;
        flex-direction: column;
        margin-left: 2%;
        margin-bottom: 10px;
        .dataTitles {
          display: flex;
          height: 37px;
          width: 100%;
          background-color: #242424;
          color: #ffffff;
          font-size: 12px;
          align-items: center;
        }
        .dataContent {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          overflow: auto;
          justify-content: space-around;
          .dataBlock {
            width: 24%;
            height: 25px;
            background-color: #242424;
            border: 1px solid #3d3d3d;
            margin-top: 22px;
            display: flex;
            justify-content: space-between;
            padding: 10px 20px 0 20px;
            .dataName {
              font-size: 12px;
              color: #ffffff;
              margin-bottom: 6px;
            }

            .numerical {
              display: flex;
              flex-direction: row;
              color: #05bb4c;
              align-items: baseline;
              position: relative;
              top: -3px;
              .values {
                font-size: 16px;
              }

              .unit {
                font-size: 12px;
                margin-left: 8px;
              }
            }
          }
        }
      }
    }
    .paramsRight {
      width: 25%;
      .dataList {
        width: 97%;
        /* min-height: 250px; */
        background-color: #141414;
        display: flex;
        flex-direction: column;
        margin-left: 2%;
        margin-bottom: 30px;
        .dataTitles {
          display: flex;
          height: 37px;
          width: 100%;
          background-color: #242424;
          color: #ffffff;
          font-size: 12px;
          align-items: center;
        }
        .dataContent {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          overflow: auto;
          justify-content: space-around;
          .dataBlock {
            width: 100%;
            height: 25px;
            background-color: #242424;
            border: 1px solid #3d3d3d;
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            padding: 10px 20px 0 20px;
            .dataName {
              font-size: 12px;
              color: #ffffff;
              margin-bottom: 6px;
            }

            .numerical {
              display: flex;
              flex-direction: row;
              color: #05bb4c;
              align-items: baseline;
              position: relative;
              top: -3px;
              .values {
                font-size: 16px;
              }

              .unit {
                font-size: 12px;
                margin-left: 8px;
              }
            }
          }
        }
      }
    }
  }
  .paramsMainBot {
    .dataList {
      width: 100%;
      background-color: #141414;
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      .dataTitles {
        display: flex;
        height: 37px;
        width: 100%;
        background-color: #242424;
        color: #ffffff;
        font-size: 12px;
        align-items: center;
      }
      .dataContent {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: auto;
        justify-content: space-around;
        .dataBlock {
          width: 20%;
          height: 25px;
          background-color: #242424;
          border: 1px solid #3d3d3d;
          margin-top: 22px;
          display: flex;
          justify-content: space-between;
          padding: 10px 20px 0 20px;
          .dataName {
            font-size: 12px;
            color: #ffffff;
            margin-bottom: 6px;
          }

          .numerical {
            display: flex;
            flex-direction: row;
            color: #05bb4c;
            align-items: baseline;
            position: relative;
            top: -3px;
            .values {
              font-size: 16px;
            }

            .unit {
              font-size: 12px;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
  .nowWarn {
    width: 100%;
    display: flex;
    .nowWarnTree {
      width: 20%;
      .el-tree {
        height: 100%;
        color: #ffffff !important;
        background-color: rgba(77, 77, 77, 1) !important;
      }

      .el-tree-node:focus > .el-tree-node__content {
        background-color: #000000 !important;
      }

      .el-tree-node__content:hover {
        background-color: #000000 !important;
      }
    }
    .nowWarnTable {
      width: 80%;
    }
  }
  .searchTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 3vw;
    padding-top: 10px;
    color: #ffffff;
    .search {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-right: 50px;
      .date {
        margin-right: 10px;
        font-size: 16px;
      }
    }
  }
  .historyWarnTable {
    margin-top: 10px;
  }
  .paginations {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
    .el-pagination__total {
      color: #ffffff;
    }
  }
  .measurePoint {
    width: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .measurePointL,
    .measurePointR {
      width: 49%;
    }
  }
}
</style>
<style scoped>
.body {
  background-color: black;
  margin-top: -30px;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -30px;
  border-bottom: 20px solid rgb(36, 36, 36);
}

.chunkdiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 17%;
  background-color: #363636;
  margin: 1px;
  padding: 4px 0px;
  font-size: 12px;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
}

.title {
  font-size: 12px;
  color: #b3b3b3;
}

table {
  margin-left: 2px;
  margin-right: 2px;
}

/* td {
		width: 20%;
	} */

/* el-tabs {
  background-color: black;
} */

.svg {
  height: 67vh;
}
.titleList {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.faultInfo {
  height: 70vh;
  display: flex;
  flex-direction: row;
  width: 100%;
}
.left-item {
  width: 16%;
  background-color: #4d4d4d;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  align-items: center;
  height: 96%;
  overflow-y: auto;
}
.faultName {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
}
.faultNameErr {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  font-size: 16px;
  color: red;
  margin-bottom: 15px;
}
.faultNum {
  font-size: 12px;
}
.right-item {
  width: 83%;
  background-color: #4d4d4d;
  margin-left: 15px;
  height: 96%;
  padding-bottom: 20px;
}
.el-table {
  background-color: #000000 !important;
}
.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px !important;
  height: 0px !important;
  background-color: black !important;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #292929 !important;
  border-radius: 6px !important;
}
.tables {
  width: 98%;
  margin: 1%;
}
</style>
