<template>
  <div class="firstdiv">
    <el-row>
      <el-col :span="12">
        <StandAloneImg
          :activeIndex="showIndex"
          @selectSvg="selectSvg"
          class="sai"
        ></StandAloneImg>
      </el-col>
      <el-col :span="12" class="rights">
        <div class="titleList">
          <div
            class="titleItem"
            @dblclick="dbClicks({ code: 'JKZS', name: '健康指数' })"
          >
            <div class="titleName">健康指数:</div>
            <div class="titleValues">{{ dataValues?.score?.toFixed(0) }}</div>
          </div>
          <div class="line" />
          <div
            class="titleItem"
            @dblclick="dbClicks({ code: 'ZYZS', name: '资源指数' })"
          >
            <div class="titleName">资源指数:</div>
            <div class="titleValues">
              {{ dataValues?.resourceLevel?.toFixed(0) }}
            </div>
          </div>
          <div class="line" />
          <div class="titleItem">
            <div class="titleName">运行状态:</div>
            <div class="titleValues">{{ typeList[dataValues?.status] }}</div>
          </div>
          <div class="line" />
          <div class="titleItem">
            <div class="titleName">故障状态:</div>
            <img
              class="titleImg"
              v-if="!dataValues?.faultStatus"
              src="../assets/img/controlcenter/daraTrue.png"
              alt=""
            />
            <img
              class="titleImg"
              v-else
              src="../assets/img/controlcenter/dataFalse.png"
              alt=""
            />
          </div>
        </div>
        <div class="records">
          <div class="recordList">
            <el-scrollbar class="recordsScorll">
              <el-table
                stripe="true"
                border-color="#141414"
                :data="recordData"
                style="width: 100%"
                :header-cell-style="{
                  background: '#141414',
                  color: '#B3B3B3',
                  'border-bottom': 'solid 1px #242424',
                  'text-align': 'center',
                }"
                :cell-style="{
                  background: '#141414',
                  color: '#B3B3B3',
                  'border-bottom': 'solid 1px #242424',
                  'text-align': 'center',
                }"
              >
                <el-table-column
                  prop="time"
                  label="日期"
                  width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="controls"
                  label="控制命令"
                  width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="result" label="操作结果" align="center">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="操作人"
                  width="120"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </div>
        </div>
        <div class="showDate">
          <div class="label1">
            <div class="title">挂牌信息：</div>
            <!-- <div>挂牌原因</div> -->
            <el-select
              filterable
              allow-create
              default-first-option
              @change="listedChange(value)"
              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>
        <div class="label">
          <!-- <div
            class="button"
            v-if="types === 2"
            @click="sendCommand({ controlType: '1' })"
          >
            启动
          </div>
          <div
            class="button"
            v-if="types === 4"
            @click="sendCommand({ controlType: '2' })"
          >
            停机
          </div>
          <div
            class="button"
            v-if="types === 0 || types === 5"
            @click="sendCommand({ controlType: '5' })"
          >
            复位
          </div>
          <div
            class="button"
            v-if="types === 2"
            @click="sendCommand({ controlType: '6' })"
          >
            维护
          </div>
          <div
            class="button"
            v-if="types === 6"
            @click="sendCommand({ controlType: '8' })"
          >
            取消维护
          </div> -->
          <div
            class="button"
            v-if="selectValue !== ''"
            @click="sendLock({ value: 'UnLock' })"
          >
            取消挂牌
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="datas">
      <el-col :span="12">
        <div class="dataList">
          <div class="dataTitles">
            <div style="margin-left: 24px">部件主要参数</div>
          </div>
          <div class="dataContent">
            <div
              class="dataBlock"
              v-for="(item, index) in showData"
              :key="index"
              @dblclick="dbClicks(item)"
            >
              <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>
      </el-col>
      <el-col :span="12">
        <div class="dataLists">
          <div class="dataTitles">
            <div style="margin-left: 24px">报警记录</div>
          </div>
          <el-scrollbar class="scorll">
            <el-table
              stripe="true"
              border-color="#141414"
              :data="warning"
              style="width: 100%"
              :header-cell-style="{
                background: '#141414',
                color: '#B3B3B3',
                'border-bottom': 'solid 1px #242424',
                'text-align': 'center',
              }"
              :cell-style="{
                background: '#141414',
                color: '#B3B3B3',
                'border-bottom': 'solid 1px #242424',
                'text-align': 'center',
              }"
            >
              <el-table-column prop="alertTime" label="时间" width="220">
              </el-table-column>
              <el-table-column prop="alertText" label="故障信息" width="280">
              </el-table-column>
              <el-table-column prop="rank" label="故障级别">
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
    <BasicDataDetails
      @closed="closeds()"
      v-model="display"
      :datas="windDetails"
      :partsName="partsName"
      echartsId="partEcharts"
      @search-data="search"
      @original-data="originalData"
    ></BasicDataDetails>
  </div>
</template>

<script>
import BackgroundData from "utils/BackgroundData";
import BasicDataDetails from "./basicDataDetails.vue";
import StandAloneImg from "./StandAloneImg.vue";
import dayjs from "dayjs";
import api from "api/index";
export default {
  name: "BasicInformationDetail",
  components: {
    // Worning,
    StandAloneImg,
    BasicDataDetails,
  },
  props: {
    types: {
      type: Number,
      default: null,
    },
    windturbine: Object,
  },
  mounted() {
    this.getLocks();
    // this.getHealthDate()
    this.getWarning();
    this.getDetial();
    this.records();
  },

  data() {
    return {
      display: false,
      BasicInfo: {},
      restaurants: [],
      lockValues: [],
      windDetails: [],
      showWarningList: [],
      state1: "",
      showIndex: 1,
      starValue: 3,
      max: 4,
      current: null,
      disableds: true,
      options: [
        {
          value: "8",
          label: "检修",
        },
        {
          value: "7",
          label: "故障维修",
        },
        {
          value: "2",
          label: "场内受累检修",
        },
        {
          value: "3",
          label: "场内受累故障",
        },
        {
          value: "4",
          label: "场外受累电网",
        },
        {
          value: "5",
          label: "场外受累天气",
        },
      ],
      typeList: [
        "停机",
        "上电",
        "待机",
        "启动",
        "并网",
        "故障",
        "维护",
        "离线",
      ],
      selectValue: "7",
      healthInfo: {},
      dataValues: {},
      warning: ["-"],
      showData: [],
      partsName: "",
      modelData: {},
      interval: 60,
      controlErorCodes: [
        "控制成功",
        "控制命令发送失败",
        "无效的控制地址",
        "被控设备异常",
        "无效的控制功能",
        "网络连接错误,检查场站通信",
        "控制结果读取超时",
        "未知错误",
        "控制命令错误",
        "收到无法识别数据",
        "未读取到数据包",
        "未知错误",
        "风机操作过频繁",
        "风机被挂牌",
        "风机操作与风机状态不符",
        "需要登录",
      ],
      recordData: [],
      intervals: null,
      refreshTimer: "",
    };
  },
  methods: {
    getHealthDate() {
      api
        .getHealthDate(
          this.windturbine.stationId,
          this.windturbine.windturbineId
        )
        .then((msg) => {
          if (msg.data.code === 200) {
            this.healthInfo = msg.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDetial() {
      api.getDetial(this.windturbine.windturbineId).then((msg) => {
        this.dataValues = msg.data;
        this.$emit("health-click", msg.data);
        if (msg.data.lockType === 9) {
          this.selectValue = this.lockValues?.filter(
            (item) => this.windturbine.windturbineId === item.windturbineID
          )[0]?.value;
        } else {
          this.selectValue =
            msg.data.lockType === 0 ? "" : String(msg.data.lockType);
        }
      });
    },
    getLocks() {
      api.getCustomerLock().then((res) => {
        if (res) {
          this.lockValues = res.data;
        }
      });
    },
    records() {
      let date = new Date();
      api
        .controlRecord({
          stationId: this.windturbine.stationId,
          userName: "",
          windturbineId: this.windturbine.windturbineId,
          startTime: dayjs(date.getTime() - 172800000).format(
            "YYYY/MM/DD HH:mm:ss"
          ),
          endTime: dayjs(date.getTime()).format("YYYY/MM/DD HH:mm:ss"),
          pageSize: 100,
          pageIndex: 1,
        })
        .then((res) => {
          if (res) {
            let types = {
              Start: "启动",
              Stop: "停止",
              Reset: "复位",
              Maintain: "维护",
              UnMaintain: "取消维护",
              Lock: "挂牌",
              UnLock: "取消挂牌",
            };
            res.data.dataList.forEach((item) => {
              item.time = dayjs(item.time).format("MM-DD HH:mm:ss");
              item.result = this.controlErorCodes[item.errorCode];
              item.controls = types[item.controlType];
            });
            this.recordData = res.data.dataList;
          }
        });
    },
    async getWarning() {
      await api.getWindturbineWarning({
          pagenum: 1000,
          pagesize: 1,
          windturbineid: this.windturbine.windturbineId,
          starttime: dayjs(new Date(this.windturbine.ts).getTime()- 172800000).format('YYYY-MM-DD HH:mm:ss'),
          endtime:  dayjs(new Date(this.windturbine.ts).getTime()).format('YYYY-MM-DD HH:mm:ss'),
        })
        .then((msg) => {
          if (msg.data) {
            msg.data.records.forEach((item) => {
                item.alertTime = dayjs(item.alertTime).format("MM-DD HH:mm:ss");
              });
            this.warning = msg.data.records;
            // this.warningDeal() 
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    warningDeal(){
      let parts = "";
      switch (this.showIndex) {
        case 1:
          parts = "fdj";
          break;
        case 2:
          parts = "clx";
          break;
        case 3:
          parts = "bj";
          break;
        case 4:
          parts = "ph";
          break;
        case 5:
          parts = "yy";
          break;
      }
      this.warning.forEach(item =>{
        if(item.category3 === parts){
          this.showWarningList.push(item)
        }
      })

    },
    listedChange() {
      switch (this.selectValue) {
        case "8":
          this.sendLock({ value: "CheckLock" });
          break;
        case "7":
          this.sendLock({ value: "FaultLock" });
          break;
        case "2":
          this.sendLock({ value: "StationCheckLock" });
          break;
        case "3":
          this.sendLock({ value: "StationFaulLock" });
          break;
        case "4":
          this.sendLock({ value: "StationPowerLineLock" });
          break;
        case "5":
          this.sendLock({ value: "StationWeatherLock" });
          break;
        default:
          this.sendLock({ value: "CustomerLock", lockValue: this.selectValue });
          break;
      }
    },

    start(bi) {
      this.BasicInfo = bi;
      // this.bindData();
      this.refreshData();
      this.getLocks();
      this.intervals = setInterval(this.getDetial, 1000);
      this.records();
      this.getWarning()
      this.refreshTimer = setInterval(this.refreshData, 3000);
    },
    end() {
      clearInterval(this.intervals);
      clearInterval(this.refreshTimer);
      this.intervals = null;
      this.refreshTimer = null;
    },
    /* 刷新数据 */
    refreshData() {
      let bg = BackgroundData.getInstance();
      let mark = BackgroundData.getInstance().Marks;
      bg.initWinturbineBaseData(this.BasicInfo, this.onMessage);
    },

    /* 获得数据 */
    onMessage(msg) {
      this.BasicInfo.forEach((element) => {
        element.param.forEach((im) => {
          let val = msg[im.code];
          if (typeof val !== "undefined") {
            if (im.unit == "万度") {
              im.value = (val.doubleValue / 10000).toFixed(2);
            } else {
              im.value =
                val.doubleValue === 0
                  ? val.doubleValue
                  : val.doubleValue
                  ? val.doubleValue.toFixed(2)
                  : val.longValue
                  ? val.longValue
                  : val.booleanValue;
            }
          }
        });
      });
      switch (this.showIndex) {
        case 1:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 6
          )[0]?.param;
          break;
        case 2:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 8
          )[0]?.param;
          break;
        case 3:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 7
          )[0]?.param;
          break;
        case 4:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 10
          )[0]?.param;
          break;
        case 5:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 9
          )[0]?.param;
          break;
      }
    },
    selectSvg(index) {
      this.showIndex = index;
      switch (this.showIndex) {
        case 1:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 6
          )[0]?.param;
          break;
        case 2:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 8
          )[0]?.param;
          break;
        case 3:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 7
          )[0]?.param;
          break;
        case 4:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 10
          )[0]?.param;
          break;
        case 5:
          this.showData = this.BasicInfo.filter(
            (item) => item.index === 9
          )[0]?.param;
          break;
      }
      // this.getWarning();
      // this.warningDeal()
    },
    // 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 = [];
    //   this.windturbine.controlType = Number(msg.controlType);
    //   sendList.push(this.windturbine);
    //   if (sendList.length > 0) {
    //     bd.checkout(sendList);
    //     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.windturbControl(pairs).then((res) => {
    //       if (res) {
    //         this.controlSuccess(res);
    //       }
    //     });
    //   }
    // },

    sendLock(msg) {
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      let sendList = [];
      this.windturbine.lockType = msg.value;
      if (msg.lockValue) {
        this.windturbine.lockValue = msg.lockValue;
      }
      sendList.push(this.windturbine);
      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,
            lockValue: item.lockValue,
            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";
      let dt = iserror ? 0 : 4500;
      // if (!iserror) {
      //   mss = "控制成功";
      // }

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

    /* 控制失败 */
    controlError(err) {
      this.$notify({
        title: "控制出现错误",
        message: err.message,
        type: "warning",
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },

    dbClicks(value, windturbineId, timeValues) {
      this.modelData = value;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      api
        .getWindturbinePower({
          thingId: windturbineId
            ? windturbineId
            : this.windturbine.windturbineId,
          uniformCode: value.code,
          startTs: startTs,
          endTs: endTs,
          thingType: "windturbine",
          interval: this.interval,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.windDetails = res.data;
            this.partsName = value.name;
            this.display = true;
            loading.close();
          } else {
            this.windDetails = [];
            loading.close();
          }
        });
    },

    original(value, windturbineId, timeValues) {
      this.modelData = value;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      const loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      api
        .getOriginalWindturbinePower({
          thingId: windturbineId
            ? windturbineId
            : this.windturbine.windturbineId,
          uniformCode: value.code,
          startTs: startTs,
          endTs: endTs,
          thingType: "windturbine",
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.windDetails = res.data;
            this.partsName = value.name;
            this.display = true;
            loading.close();
          } else {
            this.windDetails = [];
            loading.close();
          }
        });
    },
    search(values, interval) {
      this.interval = interval;
      this.dbClicks(this.modelData, "", values);
    },
    originalData(values) {
      this.original(this.modelData, "", values);
    },
    closeds() {
      this.display = false;
      this.interval = 60;
    },
  },
};
</script>

<style scoped>
.firstdiv {
  height: 70vh;
}

.onediv {
  float: left;
  margin-right: 30px;
}

.twodiv {
  float: right;
  margin-right: 30px;
}

td:nth-child(1) {
  height: 25px;
  width: 130px;
  text-align: right;
}

td:nth-child(2) {
  width: 78px;
  text-align: right;
  color: rgb(5, 176, 71);
}

td:nth-child(3) {
  text-align: center;
  width: 30px;
}

tr:nth-child(1) {
  font-size: 20px;
  width: 90px;
  text-align: right;
}

th {
  height: 40px;
}

table {
  margin-top: 30px;
}

.sai {
  float: left;
  margin-left: 40px;
  margin-top: 30px;
  margin-bottom: 15px;
  width: 55vh;
  height: 34vh;
}

.rights {
  display: flex;
  flex-direction: column;
}

.marks {
  display: flex;
  flex-direction: column;
}

.title {
  margin-right: 16px;
  font-size: 18px;
  color: #ffffff;
}

.inputs {
  border: none;
  width: 174px !important;
}

.area {
  border: 2px dashed #ffffff;
  height: 200px;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 5.5%;
}

.healthInfo {
  margin-top: 16px;
  margin-bottom: 11px;
  font-size: 18px;
  color: #ffffff;
}

.healthTable {
  width: 688px;
  background-color: #141414;
}

.healthTitle {
  width: 100%;
  height: 37px;
  background-color: #242424;
  font-size: 12px;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  margin-bottom: 5px;
}

.name {
  width: 172px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.level {
  width: 211px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.times {
  width: 153px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.healthContent {
  height: 30px;
  display: flex;
  flex-direction: row;
  width: 96%;
  margin-left: 2%;
  border-bottom: 1px solid #242424;
  font-size: 12px;
  color: #b3b3b3;
}

.healthContent_on {
  height: 30px;
  display: flex;
  flex-direction: row;
  width: 96%;
  margin-left: 2%;
  border-bottom: 1px solid #242424;
  background-color: #242424;
  font-size: 12px;
  color: #05bb4c;
}

.contentName {
  width: 158px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -5px;
}

.starLevel {
  width: 211px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.contentTimes {
  width: 124px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 11px;
}

.contentTimess {
  width: 120px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
}

.label {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
}

.label1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 16px;
  margin-right: 15px;
}

.button {
  width: 100px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #ffffff;
  background-color: #242424;
  border: 1px solid #3d3d3d;
  margin-right: 12px;
}

.datas {
  margin-top: 15px;
}

.dataList {
  width: 97%;
  /* min-height: 250px; */
  height: 28vh;
  background-color: #141414;
  display: flex;
  flex-direction: column;
  margin-left: 2%;
}

.dataLists {
  width: 97%;
  /* min-height: 250px; */
  height: 28vh;
  background-color: #141414;
  display: flex;
  flex-direction: column;
}

.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;
}

.dataBlock {
  width: 145px;
  height: 62px;
  background-color: #242424;
  border: 1px solid #3d3d3d;
  margin-left: 16px;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dataName {
  font-size: 12px;
  color: #ffffff;
  margin-left: 26px;
  margin-bottom: 6px;
}

.numerical {
  display: flex;
  flex-direction: row;
  color: #05bb4c;
  align-items: baseline;
  margin-left: 26px;
}

.values {
  font-size: 16px;
}

.unit {
  font-size: 12px;
  margin-left: 8px;
}

.scorll {
  height: 23vh;
}

.showDate {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.el-table {
  background-color: #141414 !important;
  min-height: 22vh !important;
}

.el-table::before {
  width: 0;
}

.titleList {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 98%;
  height: 43px;
  background-color: #242424;
  border: 1px solid #3d3d3d;
  margin-top: 13px;
}

.titleItem {
  display: flex;
  flex-direction: row;
  width: 25%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.titleName {
  color: #ffffff;
}

.titleValues {
  color: #05bb4c;
  margin-left: 10px;
}

.line {
  height: 23px;
  width: 1px;
  background-color: #3d3d3d;
}

.titleImg {
  width: 16px;
  height: 16px;
  margin-left: 10px;
}

.recordList {
  width: 98%;
  height: 22vh;
  margin-top: 16px;
}

.recordsScorll {
  height: 22vh;
}
</style>