project-neic/src/components/BasicInformationDetail.vue

<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="marks" v-if="healthInfo.bj">
          <div class="healthInfo">健康指数：</div>
          <div class="healthTable" v-if="healthInfo.other">
            <div class="healthTitle">
              <div class="name">名称</div>
              <div class="level">等级</div>
              <div class="times">重要报警次数</div>
              <div class="times">一般报警次数</div>
            </div>
            <div :class="showIndex===3?'healthContent_on':'healthContent'" @click="chooseInfo(3)">
              <div class="contentName">变桨</div>
              <el-rate class="starLevel" v-model="healthInfo.bj.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.bj.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.bj.lowCount}}</div>
            </div>
            <div :class="showIndex===2?'healthContent_on':'healthContent'" @click="chooseInfo(2)">
              <div class="contentName">齿轮箱</div>
              <el-rate class="starLevel" v-model="healthInfo.clx.star" disabled :max="max" void-color="#242424"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.clx.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.clx.lowCount}}</div>
            </div>
            <div :class="showIndex===1?'healthContent_on':'healthContent'" @click="chooseInfo(1)">
              <div class="contentName">发电机</div>
              <el-rate class="starLevel" v-model="healthInfo.fdj.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.fdj.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.fdj.lowCount}}</div>
            </div>
            <div :class="showIndex===5?'healthContent_on':'healthContent'" @click="chooseInfo(5)">
              <div class="contentName">液压</div>
              <el-rate class="starLevel" v-model="healthInfo.yy.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.yy.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.yy.lowCount}}</div>
            </div>
            <div :class="showIndex===4?'healthContent_on':'healthContent'" @click="chooseInfo(4)">
              <div class="contentName">偏航</div>
              <el-rate class="starLevel" v-model="healthInfo.ph.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.ph.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.ph.lowCount}}</div>
            </div>
            <div :class="showIndex===6?'healthContent_on':'healthContent'">
              <div class="contentName">其他</div>
              <el-rate class="starLevel" v-model="healthInfo.other.star" disabled :max="max" void-color="#141414"
                text-color="#E8A20D">
              </el-rate>
              <div class="contentTimes">{{healthInfo.other.heightCount}}</div>
              <div class="contentTimess">{{healthInfo.other.lowCount}}</div>
            </div>
          </div>
        </div> -->
        <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">
          <el-scrollbar style="height:99%;">
            <div class="tables">
                <el-table :data="recordData" class="table" style=" width:100%" height="22vh" :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="{
                    height: '40px',
                    background: 'rgb(30,30,30)',
                    color: 'rgb(220,220,220)',
                    padding: '3px',
                    fontSize: '12px',
                    'border-bottom': '1px solid #000000'
                  }">
                    <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>
            </div>
        </el-scrollbar>
        </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="dataTitle">
            <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="dataTitle">
            <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="time" label="时间" width="220">
              </el-table-column>
              <el-table-column prop="alertText" label="故障信息" width="280">
              </el-table-column>
              <el-table-column prop="rankName" 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 {
        // warnList: [],
        display: false,
        BasicInfo: {},
        // temperatureInfo: new Array() /* 温度信息 */,
        // pitchInfo: new Array() /* 变桨信息 */,
        // generalInfo: new Array() /* 基本信息 */,
        // powerGridInfo: new Array() /* 电网信息 */,
        restaurants: [],
        lockValues: [],
        windDetails: [],
        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: [],
      };
    },
    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))
          }
          setTimeout(() => {
            this.getDetial()
          }, 1000);
        })
      },
      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
          }
        })
      },
      getWarning() {
        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;
        }
        api.getWarning(this.windturbine.stationId, this.windturbine.windturbineId, parts).then(msg => {
          if (msg.data.code === 200) {
            msg.data.data && msg.data.data.forEach(item => {
              item.time = dayjs(item.time).format('MM-DD HH:mm:ss')
            })
            this.warning = msg.data.data;
          }

        })
          .catch(err => {
            console.log(err);
          });
      },
      chooseInfo(value) {
        this.showIndex = value
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0]?.param
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0]?.param
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0]?.param
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0]?.param
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0]?.param
            break;
        }
        this.getWarning()
      },
      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;
        }
      },
      // labelChange() {
      //   let values = BackgroundData.getInstance().Marks;
      //   if (!values.filter(item => item.title = this.windturbine.windturbineId)[0]) {
      //     this.menuClicked({ type: "marking" })
      //   }
      //   BackgroundData.getInstance().updateMarks(this.windturbine, this.state1);
      // },

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

      },

      /* 获得数据 */
      onMessage(msg) {
        this.BasicInfo.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.BasicInfo.filter(item => item.index === "part6")[0]?.param
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0]?.param
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0]?.param
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0]?.param
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0]?.param
            break;
        }
      },

      // bindData() {
      //   this.BasicInfo.BasicInfo.forEach((element) => {
      //     if (element.tag == "基本信息") {
      //       this.generalInfo = element.param;
      //     } else if (element.tag == "温度信息") {
      //       this.temperatureInfo = element.param;
      //     } else if (element.tag == "电网信息") {
      //       this.powerGridInfo = element.param;
      //     } else if (element.tag == "桨叶信息") {
      //       this.pitchInfo = element.param;
      //     }
      //   });
      // },
      querySearch(queryString, cb) {
        let restaurants = this.restaurants;
        let results = queryString
          ? restaurants.filter(this.createFilter(queryString))
          : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
            0
          );
        };
      },
      handleSelect(item) {
        console.log(item);
      },
      selectSvg(index) {
        this.showIndex = index;
        // this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === `part${this.showIndex+5}`)[0]?.param
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === `part6`)[0]?.param
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0]?.param
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0]?.param
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0]?.param
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0]?.param
            break;
        }
        this.getWarning()
      },
      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) {
        console.log(msg);
        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,
        });
      },

      /* 控制失败 */
      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;
        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;
          } else {
            this.windDetails = []
          }
        })
      },

      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;
        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
          } else {
            this.windDetails = []
          }
        })
      },
      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: 94%;
    /* 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;
  }

  .dataTitle {
    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: 212px;
  }

  .showDate {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .el-table {
        background-color: #141414 !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;
  }
  .records{
    width: 98%;
    height: 22vh;
    margin-top: 16px;
  }
</style>