neic-hefeng/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="right">
        <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="showDate">
          <div class="label">
            <div class="title">标注信息：</div>
            <el-autocomplete @blur="labelChange(state1)" class="inputs" v-model="state1"
              :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" style="width: 174px">
            </el-autocomplete>
          </div>
          <div class="label1">
            <div class="title">挂牌信息：</div>
            <!-- <div>挂牌原因</div> -->
            <el-select @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="menuClicked({ type: 'send', controlType:'1' })">启动</div>
          <div class="button" v-if="types === 4" @click="menuClicked({ type: 'send', controlType:'2' })">停机</div>
          <div class="button" v-if="types === 0 ||types === 5 " @click="menuClicked({ type: 'send', controlType:'5' })">
            复位</div>
          <div class="button" v-if="types === 2" @click="menuClicked({ type: 'send', controlType:'6' })">维护</div>
          <div class="button" v-if="types === 6" @click="menuClicked({ type: 'send', controlType:'8' })">取消维护</div>
          <div class="button" v-if="selectValue !==''" @click="menuClicked({ type: 'lock', value: 'UnLock' })">取消挂牌
          </div>
          <!-- <div class="button" @click="menuClicked({ type: 'send' })">生成缺陷单</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">
              <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>
  </div>
</template>

<script>
  import BackgroundData from 'utils/BackgroundData'
  // import Worning from "./warning.vue"
  import axios from 'axios';
  import StandAloneImg from "./StandAloneImg.vue";
  import dayjs from 'dayjs'
  export default {
    name: "BasicInformationDetail",
    components: {
      // Worning,
      StandAloneImg,
    },
    props: {
      types: {
        type: Number,
        default: null,
      },
      windturbine: Object,
    },
    mounted() {
      this.getDetial()
      this.getHealthDate()
      this.getWarning()
    },
    beforeUpdate() {
      
    },

    data() {
      return {
        // warnList: [],
        BasicInfo: {},
        temperatureInfo: new Array() /* 温度信息 */,
        pitchInfo: new Array() /* 变桨信息 */,
        generalInfo: new Array() /* 基本信息 */,
        powerGridInfo: new Array() /* 电网信息 */,
        restaurants: [],
        state1: "",
        showIndex: 1,
        starValue: 3,
        max: 4,
        current: null,
        disableds: true,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          date: '2016-05-09',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        options: [{
          value: '8',
          label: '检修'
        }, {
          value: '7',
          label: '故障维修'
        }, {
          value: '2',
          label: '场内受累检修'
        }, {
          value: '3',
          label: '场内受累故障'
        }, {
          value: '4',
          label: '场外受累电网'
        }, {
          value: '5',
          label: '场外受累天气'
        }],
        selectValue: '7',
        healthInfo: {},
        warning: [],
        showData: [],
        controlErorCodes: [
          "控制成功",
          "控制命令发送失败",
          "无效的控制地址",
          "被控设备异常",
          "网络连接错误,检查场站通信",
          "控制结果读取超时",
          "未知错误",
          "控制命令错误",
          "收到无法识别数据",
          "未读取到数据包",
          "未知错误",
          "风机操作过频繁",
          "风机被挂牌",
          "风机操作与风机状态不符",
          "需要登录",
        ],
      };
    },
    methods: {
      getHealthDate() {
        axios.get(`http://18.6.30.53:8070/alarm/statistic?stId=${this.windturbine.stationId}&wtId=${this.windturbine.windturbineId}`)
          .then(msg => {
            if (msg.data.code === 200) {
              this.healthInfo = msg.data.data;
            }

          })
          .catch(err => {
            console.log(err);
          });
      },
      getDetial() {
        axios.get(process.env.VUE_APP_API+`/api/windturbine/info/${this.windturbine.windturbineId}`)
          .then(msg => {
            let restaurants = []
            this.selectValue = (msg.data.lockType === 0 ? '' : String(msg.data.lockType))
            this.state1 = msg.data.markValue
            msg.data.markValues.forEach(item => {
              let data = {}
              data.value = item
              restaurants.push(data)
            })
            this.restaurants = restaurants
          })
      },
      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;
        }
        axios.get(`http://18.6.30.53:8070/alarm/list?stId=${this.windturbine.stationId}&wtId=${this.windturbine.windturbineId}&widget=${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] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0].param : []
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0].param : []
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0].param : []
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0].param : []
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0].param : []
            break;
        }
        this.getWarning()
      },
      listedChange() {
        switch (this.selectValue) {
          case '8':
            this.menuClicked({ type: "lock", value: "CheckLock" });
            break;
          case '7':
            this.menuClicked({ type: "lock", value: "FaultLock" });
            break;
          case '2':
            this.menuClicked({ type: "lock", value: "StationCheckLock" });
            break;
          case '3':
            this.menuClicked({ type: "lock", value: "StationFaulLock" });
            break;
          case '4':
            this.menuClicked({ type: "lock", value: "StationPowerLineLock" });
            break;
          case '5':
            this.menuClicked({ type: "lock", value: "StationWeatherLock" });
            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);
      },
      show() {
        // axios.get(`http://${config.calcUrl}/alarm/real-time-alarm?objectId=${this.windturbine.windturbineId}&pageIndex=1&pageSize=50`)
        // .then(msg=>{
        //   var 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;
        //   console.log(this.alarms)
        // })
      },
      start(bi) {
        this.BasicInfo = bi;
        this.bindData();

        this.refreshData();
        this.refreshTimer = setInterval(this.refreshData, 3000);
      },
      end() {
        clearInterval(this.refreshTimer);
      },
      // alarmd(bi) {
      //   let dataList = []
      //   let warnList = []
      //   let date1 = {
      //     type: 1,
      //     alertText: []
      //   }
      //   let date2 = {
      //     type: 2,
      //     alertText: []
      //   }
      //   let date3 = {
      //     type: 3,
      //     alertText: []
      //   }
      //   let date4 = {
      //     type: 4,
      //     alertText: []
      //   }
      //   let date5 = {
      //     type: 5,
      //     alertText: []
      //   }
      //   bi.forEach(item => {
      //     let data = {}
      //     data.alertText = item.alertText
      //     if (item.alertText.indexOf("变桨") >= 0) {
      //       data.type = 1
      //     } else if (item.alertText.indexOf("偏航") >= 0) {
      //       data.type = 5
      //     }
      //     else if (item.alertText.indexOf("发电机") >= 0) {
      //       data.type = 3
      //     }
      //     else if (item.alertText.indexOf("齿轮箱") >= 0) {
      //       data.type = 2
      //     }
      //     else if (item.alertText.indexOf("液压") >= 0) {
      //       data.type = 4
      //     }
      //     data.type ? warnList.push(data) : ''
      //   })
      //   warnList.forEach(item => {
      //     switch (item.type) {
      //       case 1:
      //         date1.alertText.push(item.alertText)
      //         break;
      //       case 2:
      //         date2.alertText.push(item.alertText)
      //         break;
      //       case 3:
      //         date3.alertText.push(item.alertText)
      //         break;
      //       case 4:
      //         date4.alertText.push(item.alertText)
      //         break;
      //       case 5:
      //         date5.alertText.push(item.alertText)
      //         break;
      //     }
      //   })
      //   date1.alertText.length > 0 ? dataList.push(date1) : ''
      //   date2.alertText.length > 0 ? dataList.push(date2) : ''
      //   date3.alertText.length > 0 ? dataList.push(date3) : ''
      //   date4.alertText.length > 0 ? dataList.push(date4) : ''
      //   date5.alertText.length > 0 ? dataList.push(date5) : ''
      //   this.warnList = dataList
      // },
      /* 刷新数据 */
      refreshData() {
        var 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) => {
            var 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;
              }
            }
          });
        });
        console.log(msg);
        console.log(this.BasicInfo.BasicInfo);
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0].param : []
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0].param : []
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0].param : []
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0].param : []
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0] ? 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) {
        var restaurants = this.restaurants;
        var 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;
        switch (this.showIndex) {
          case 1:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part6")[0].param : []
            break;
          case 2:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part8")[0].param : []
            break;
          case 3:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part7")[0].param : []
            break;
          case 4:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part10")[0].param : []
            break;
          case 5:
            this.showData = this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0] ? this.BasicInfo.BasicInfo.filter(item => item.index === "part9")[0].param : []
            break;
        }
        this.getWarning()
      },
      menuClicked(msg, windturbine) {
        let dataList = []
        dataList[0] = windturbine ? windturbine : this.windturbine
        var bd = BackgroundData.getInstance();
        if (!bd.LoginUser) {
          this.$notify({
            title: "请登录",
            message: "控制风机需要先登录！",
            type: "warning",
            position: "bottom-right",
            offset: 60,
            duration: 3000,
          });
          this.selectValue = ''
          return;
        }
        if (msg.type == "lock") {
          // 挂牌
          var los = dataList;
          for (var id in los) {
            los[id].lockType = msg.value;
          }
          bd.windturbineControl(
            los,
            true,
            '',
            this.controlSuccess,
            this.controlError
          );
        } else if (msg.type == "send") {

          // 发送
          dataList[0].controlType = Number(msg.controlType)
          var vs = dataList;
          bd.windturbineControl(
            vs,
            false,
            '',
            this.controlSuccess,
            this.controlError
          );
        } else if (msg.type == "marking") {
          // 标注
          var vvs = dataList;
          bd.marking(vvs);
        }
      },
      /* 控制成功 */
      controlSuccess(msg) {
        console.log(msg);
        var mss = '';     // 信息
        var iserror = false;// 是否有控制错误的风机
        for (var v in msg.data) {
          var val = msg.data[v];
          if (val.errorCode > 0) {
            iserror = true;
            mss += `${val.windturbineId}  ${this.controlErorCodes[val.errorCode]}\n`;
          }
        }
        var tp = iserror ? "warning" : "success";
        var 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,
        });
      },
    },
  };
</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;
  }

  /* .worning1{
    position: absolute;
    top: 143px;
    left: 119px;
    z-index: 999;
  }
  .worning2{
    position: absolute;
    top: 210px;
    left: 282px;
    z-index: 99;
  }
  .worning3{
    position: absolute;
    top: 219px;
    left: 348px;
    z-index: 0;
  }
  .worning4{
    position: absolute;
    top: 273px;
    left: 296px;
    z-index: 0;
  }
  .worning5{
    position: absolute;
    top: 287px;
    left: 252px;
    z-index: 0;
  } */
  .sai {
    float: left;
    margin-left: 40px;
    margin-top: 30px;
    margin-bottom: 15px;
    width: 55vh;
    height: 34vh;
  }

  /* .inline-input {
    .el-scrollbar{
      max-height: 160px; 
    }
  } */
  .right {
    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;
  }
</style>