<template>
  <el-dialog
    width="70%"
    @open="opened"
    @closed="closed"
    :fullscreen="true"
    :show-close="true"
    class="dialogs"
  >
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">矩阵</div>
      </div>
    </template>
    <div class="body" @contextmenu="contextmenu">
      <div class="titleList">
        <div class="title">
          <div
            :class="current === item.id ? 'title-onItem' : 'title-item'"
            v-for="(item, index) in stationList"
            :key="index"
            @click="handleChange(item.id)"
          >
            {{ item.name }}
          </div>
        </div>

        <div class="infoMsg">
          <div class="infoTitle">
            <span>欠发电量</span>
          </div>
          <div v-for="item in showpieColor" :key="item.name" class="infoMainCV">
            <span class="colorLine" :style="{ background: item.value }"></span>
            <span class="colorValue">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="content">
        <box-select node=".box" @selectList="selectList">
          <div
            class="windStation"
            v-for="(item, index) in stationArr"
            :key="index"
          >
            <div class="stationTitle" v-if="item[0].stationId">
              <div class="stationName">
                {{ getStationName(item) }}
              </div>
              <div class="num">
                <div class="jrts">接入台数</div>
                <div class="jrts_num">{{ getStatus(item, "jr") }}</div>
              </div>
              <div class="num">
                <div class="djts">待机台数</div>
                <div class="djts_num">
                  <div class="jrts_num">{{ getStatus(item, "dj") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="bwts">并网台数</div>
                <div class="bwts_num">
                  <div class="jrts_num">{{ getStatus(item, "bw") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">故障台数</div>
                <div class="gzts_num">
                  <div class="jrts_num">{{ getStatus(item, "gz") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="jxts">检修台数</div>
                <div class="jxts_num">
                  <div class="jrts_num">{{ getStatus(item, "jx") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="lxts">离线台数</div>
                <div class="lxts_num">
                  <div class="jrts_num">{{ getStatus(item, "lx") }}</div>
                </div>
              </div>

              <div class="stationInfo">
                <div class="name">实时功率</div>
                <div class="nums">
                  {{
                    getseeting(
                      $store.state.titleInfo.stationOverviewInfos,
                      item[0],
                      "power"
                    )
                  }}MW
                </div>
              </div>
              <div class="stationInfo">
                <div class="name">平均风速</div>
                <div class="nums">
                  {{
                    getseeting(
                      $store.state.titleInfo.stationOverviewInfos,
                      item[0],
                      "wind"
                    )
                  }}m/s
                </div>
              </div>
            </div>
            <div class="stationTitle" v-else>
              <div class="stationName">
                {{ getStationName(item) }}
              </div>
              <div class="num">
                <div class="jrts">接入台数</div>
                <div class="jrts_num">{{ getStatus(item, "jr") }}</div>
              </div>
              <div class="num">
                <div class="djts">待机台数</div>
                <div class="djts_num">
                  <div class="jrts_num">{{ getStatus(item, "dj") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="bwts">并网台数</div>
                <div class="bwts_num">
                  <div class="jrts_num">{{ getStatus(item, "bw") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">故障台数</div>
                <div class="gzts_num">
                  <div class="jrts_num">{{ getStatus(item, "gz") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="jxts">离线台数</div>
                <div class="jxts_num">
                  <div class="jrts_num">{{ getStatus(item, "lx") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="lxts">维护台数</div>
                <div class="lxts_num">
                  <div class="jrts_num">{{ getStatus(item, "wh") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">限电台数</div>
                <div class="gzts_num">
                  <div class="jrts_num">{{ getStatus(item, "xd") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">限电停机台数</div>
                <div class="gzts_num">
                  <div class="jrts_num">{{ getStatus(item, "xdtj") }}</div>
                </div>
              </div>
              <div class="num">
                <div class="lxts">未知台数</div>
                <div class="lxts_num">
                  <div class="jrts_num">{{ getStatus(item, "wz") }}</div>
                </div>
              </div>

              <div class="stationInfo">
                <div class="name">实时功率</div>
                <div class="nums">
                  {{
                    $store.state.titleInfo.stationOverviewInfos[
                      item[0].station
                    ]?.realTimePower?.value.toFixed(2)
                  }}MW
                </div>
              </div>
              <div class="stationInfo">
                <div class="name">日照强度</div>
                <div class="nums">
                  {{
                    $store.state.titleInfo.stationOverviewInfos[
                      item[0].station
                    ]?.averageWindSpeed?.value.toFixed(2)
                  }}KW/㎡
                </div>
              </div>
            </div>
            <div class="block" v-if="showWh(item)">
              <UnpaidMatrixBlock
                @on-click="handleDetial"
                @choose-click="handleClick"
                :dataList="item"
              >
              </UnpaidMatrixBlock>
            </div>
            <div class="block" v-else>
              <UnpaidMatrixBlockPv
                @on-click="handleDetialPv"
                @choose-click="handleClickPv"
                :dataList="item"
              >
              </UnpaidMatrixBlockPv>
            </div>
          </div>
        </box-select>
      </div>
    </div>
    <WindturbineDetailPages
      v-model="dialogVisible"
      @close="handleClose"
      :windturbine="currentWindturbine"
    >
    </WindturbineDetailPages>
    <PvDetailPages
      v-model="dialogPvDia"
      @close="handleClose"
      :windturbine="currentWindturbinePv"
    >
    </PvDetailPages>
    <ParametersContrast
      :chooseList="chooseList"
      v-model="parametersDisplay"
    ></ParametersContrast>
  </el-dialog>
</template>
<script>
import BackgroundData from "utils/BackgroundData";
import UnpaidMatrixBlock from "components/unpaidMatrixBlock.vue";
import UnpaidMatrixBlockPv from "components/unpaidMatrixBlockPv.vue";
import WindturbineDetailPages from "components/WindturbineDetailPages.vue";
import PvDetailPages from "components/PvDetailPages.vue";
import boxSelect from "components/boxSelect.vue";
import ParametersContrast from "./control/parametersContrast.vue";
import MessageBridge from "../utils/MessageBridge";
import api from "api/index";
export default {
  components: {
    UnpaidMatrixBlock,
    UnpaidMatrixBlockPv,
    WindturbineDetailPages,
    PvDetailPages,
    boxSelect,
    ParametersContrast,
  },
  data() {
    return {
      current: "all",
      windterbin: {},
      stationObj: {},
      cache: {},
      stationArr: [],
      dialogVisible: false,
      dialogPvDia: false,
      currentWindturbine: {},
      currentWindturbinePv: {},
      chooseList: [],
      lockValues: [],
      parametersDisplay: false,
      intervals: null,
      showpieColor: [
        {
          name: "×5:  0%~5%",
          value: "#57cf3a",
        },
        {
          name: "×4:  5%~10%",
          value: "#0ec7dc",
        },
        {
          name: "×3:  10%~20%",
          value: "#1974ff",
        },
        {
          name: "×2:  20%~40%",
          value: "#cd4cdd",
        },
        {
          name: "×1:  >40%",
          value: "#ff3c80",
        },
      ],
    };
  },
  created() {
    this.getLocks();
  },
  mounted() {},
  methods: {
    showWh(item) {
      let show = false;
      if (item[0].stationId) {
        show = true;
      }
      return show;
    },
    getStatus(item, type) {
      let num = 0;
      if (item[0].stationId) {
        if (type === "jr") {
          num = item.length;
        } else if (type === "dj") {
          num = item.filter((val) => val.status === 2)?.length;
        } else if (type === "bw") {
          num = item.filter((val) => val.status === 4)?.length;
        } else if (type === "gz") {
          num = item.filter((val) => val.status === 5)?.length;
        } else if (type === "jx") {
          num = item.filter((val) => val.status === 6)?.length;
        } else if (type === "lx") {
          num = item.filter((val) => val.status === 7)?.length;
        }
      } else {
        if (type === "jr") {
          num = item.length;
        } else if (type === "dj") {
          num = item.filter((val) => val.status === 0)?.length;
        } else if (type === "bw") {
          num = item.filter((val) => val.status === 1)?.length;
        } else if (type === "gz") {
          num = item.filter((val) => val.status === 2)?.length;
        } else if (type === "lx") {
          num = item.filter((val) => val.status === 3)?.length;
        } else if (type === "wh") {
          num = item.filter((val) => val.status === 4)?.length;
        } else if (type === "xd") {
          num = item.filter((val) => val.status === 5)?.length;
        } else if (type === "xdtj") {
          num = item.filter((val) => val.status === 6)?.length;
        } else if (type === "wz") {
          num = item.filter((val) => val.status === -1)?.length;
        }
      }
      return num;
    },
    getStationName(item) {
      let name = "";
      if (item[0]) {
        this.stationList.forEach((val) => {
          if (item[0].stationId) {
            if (item[0].stationId === val.id) {
              name = val.name;
            }
          } else if (item[0].station) {
            if (item[0].station === val.id) {
              name = val.name;
            }
          }
        });
      }
      return name;
    },
    getseeting(arr, item, type) {
      let num = "";
      if (arr[item.stationId]) {
        if (arr[item.stationId].realTimePower) {
          if (type === "power") {
            num = arr[item.stationId].realTimePower.value.toFixed(2);
          } else {
            num = arr[item.stationId].averageWindSpeed.value.toFixed(2);
          }
        }
      }
      return num;
    },
    opened() {
      let stationList = [
        {
          id: "all",
          name: "全部",
        },
      ];
      let stations = this.$store.state.stationList;
      stations.forEach((item) => {
        if (item.id.indexOf("FDC") != -1 || item.id.indexOf("GDC") != -1) {
          stationList.push(item);
          this.stationObj[item.id] = [];
        }
      });
      this.stationList = stationList;
      this.handleWindturbineChange();
      //   this.intervals = setInterval(this.handleWindturbineChange, 3000);
    },
    closed() {
      this.chooseList = [];
      clearInterval(this.intervals);
      this.intervals = null;
    },
    handleChange(val) {
      let stationArr = [];
      this.current = val;
      let stationObj = {};
      let stations = this.$store.state.stationList;
      stations.forEach((item) => {
        if (val === "all") {
          if (item.id.indexOf("FDC") != -1 || item.id.indexOf("GDC") != -1) {
            stationObj[item.id] = [];
          }
        } else if (item.id === val) {
          stationObj[item.id] = [];
        }
      });
      if (val === "all") {
        stationObj = this.cache;
      } else {
        stationObj[val] = this.cache[val];
      }

      let list = Object.keys(stationObj);
      for (const id of list) {
        stationArr.push(
          stationObj[id].sort((a, b) => {
            let aSubString = "0",
              bSubString = "0";
            if (a.windturbineId && b.windturbineId) {
              aSubString = a.windturbineId.substring(
                a.windturbineId.lastIndexOf("_") + 1
              );
              bSubString = b.windturbineId.substring(
                b.windturbineId.lastIndexOf("_") + 1
              );
            } else if (a.id && b.id) {
              aSubString = a.id.substring(a.id.lastIndexOf("_") + 1);
              bSubString = b.id.substring(b.id.lastIndexOf("_") + 1);
            }
            return parseInt(aSubString) - parseInt(bSubString);
          })
        );
      }
      this.stationObj = stationObj;
      this.stationArr = stationArr;
    },
    //风场回调
    handleDetial(itm) {
      this.dialogVisible = true;
      this.currentWindturbine = itm;
    },
    handleClick(values) {
      if (values.active) {
        let showIndex = null;
        this.chooseList.forEach((item, index) => {
          if (item.windturbineId === values.windturbineId) {
            showIndex = index;
          }
        });
        this.chooseList.splice(showIndex, 1);
      } else {
        this.chooseList.push(values);
      }
      this.stationArr.forEach((item) => {
        item.forEach((val) => {
          if (val.windturbineId === values.windturbineId) {
            val.active = !val.active;
          }
        });
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.getLocks();
    },
    //光伏回调
    handleDetialPv(item) {
      this.dialogPvDia = true;
      this.currentWindturbinePv = item;
      console.log("item", item);
    },
    handleClickPv(values) {
      if (values.active) {
        let showIndex = null;
        this.chooseList.forEach((item, index) => {
          if (item.id === values.id) {
            showIndex = index;
          }
        });
        this.chooseList.splice(showIndex, 1);
      } else {
        this.chooseList.push(values);
      }
      this.stationArr.forEach((item) => {
        item.forEach((val) => {
          if (val.id === values.id) {
            val.active = !val.active;
          }
        });
      });
    },
    handleClosePv() {
      this.dialogPvDia = false;
    },

    selectList(val) {
      val.forEach((item) => {
        this.handleClick(this.windterbin[item.id]);
      });
    },
    getLocks() {
      api.getCustomerLock().then((res) => {
        if (res) {
          this.lockValues = res.data;
        }
      });
    },

    /* 右键菜单 */
    contextmenu() {
      const remote = require("electron").remote;
      let that = this;
      let menuTemplate = [];
      menuTemplate = [
        {
          label: "启动",
          click() {
            that.sendCommand({ controlType: "1", deviceType: "Manual" });
          },
        },
        {
          label: "停机",
          click() {
            that.sendCommand({ controlType: "2", deviceType: "Manual" });
          },
        },
        {
          label: "复位",
          click() {
            that.sendCommand({ controlType: "5", deviceType: "Manual" });
          },
        },
        {
          label: "维护",
          click() {
            that.sendCommand({ controlType: "6", deviceType: "Manual" });
          },
        },
        {
          label: "取消维护",
          click() {
            that.sendCommand({ controlType: "8", deviceType: "Manual" });
          },
        },
        {
          label: "挂牌",
          submenu: [
            {
              label: "检修",
              click() {
                that.sendLock({ value: "CheckLock" });
              },
            },
            {
              label: "故障维修",
              click() {
                that.sendLock({ value: "FaultLock" });
              },
            },
            {
              label: "场内受累检修",
              click() {
                that.sendLock({ value: "StationCheckLock" });
              },
            },
            {
              label: "场内受累故障",
              click() {
                that.sendLock({ value: "StationFaulLock" });
              },
            },
            {
              label: "场外受累电网",
              click() {
                that.sendLock({ value: "StationPowerLineLock" });
              },
            },
            {
              label: "场外受累天气",
              click() {
                that.sendLock({ value: "StationWeatherLock" });
              },
            },
          ],
        },
        {
          label: "取消挂牌",
          click() {
            that.sendLock({ value: "UnLock" });
          },
        },
        {
          label: "参数对比",
          click() {
            that.parametersContrast();
          },
        },
      ];

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

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

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

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

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

    /* 控制失败 */
    controlError(err) {
      this.$notify({
        title: "控制出现错误",
        message: err.message,
        type: "warning",
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },
    parametersContrast() {
      if (this.chooseList.length > 0) {
        this.parametersDisplay = true;
      }
    },
    getPvMsg(msg) {
      window.sessionStorage.removeItem("pv");
      // let jsonMsg = JSON.parse(msg)
      window.sessionStorage.setItem("pv", msg);
      this.changeData();
    },
    getWindMsg(msg) {
      window.sessionStorage.removeItem("wind");
      // let jsonMsg = JSON.parse(msg)
      window.sessionStorage.setItem("wind", msg);
      this.changeData();
    },
    changeData() {
      let wswind = JSON.parse(window.sessionStorage.getItem("wind"));
      let pv = JSON.parse(window.sessionStorage.getItem("pv"));
      let msg = {};
      if (wswind || pv) {
        msg = { ...wswind };
        if (pv) {
          msg = { ...msg, ...pv };
        }
        let stationArr = [];
        for (const key in this.stationObj) {
          this.stationObj[key] = [];
        }
        this.windterbin = msg;
        // let arr = Object.keys(msg).sort();
        let arr = Object.keys(msg);
        for (const id of arr) {
          let val = msg[id];

          //风机
          if (val.stationId) {
            if (val.lockValue === 9) {
              val.lockValues = this.lockValues.filter(
                (item) => val.windturbineId === item.windturbineID
              )[0]?.value;
            }
            this.chooseList.forEach((item) => {
              if (item.windturbineId === val.windturbineId) {
                val.active = true;
              }
            });
            if (this.current === "all") {
              this.stationObj[val.stationId]?.push(val);
            } else {
              if (this.current === val.stationId) {
                this.stationObj[val.stationId]?.push(val);
              }
            }
          }
          // 光伏
          if (val.station) {
            if (this.current === "all") {
              this.stationObj[val.station]?.push(val);
            } else {
              if (this.current === val.station) {
                this.stationObj[val.station]?.push(val);
              }
            }
            this.chooseList.forEach((item) => {
              if (item.id === val.id) {
                val.active = true;
              }
            });
          }
        }
        this.current === "all" &&
          (this.cache = JSON.parse(JSON.stringify(this.stationObj)));
        // let list = Object.keys(this.stationObj).sort();
        let list = Object.keys(this.stationObj);
        for (const id of list) {
          stationArr.push(
            this.stationObj[id].sort((a, b) => {
              let aSubString = "0",
                bSubString = "0";
              if (a.windturbineId && b.windturbineId) {
                aSubString = a.windturbineId.substring(
                  a.windturbineId.lastIndexOf("_") + 1
                );
                bSubString = b.windturbineId.substring(
                  b.windturbineId.lastIndexOf("_") + 1
                );
              } else if (a.id && b.id) {
                aSubString = a.id.substring(a.id.lastIndexOf("_") + 1);
                bSubString = b.id.substring(b.id.lastIndexOf("_") + 1);
              }
              return parseInt(aSubString) - parseInt(bSubString);
            })
          );
        }
        // this.stationArr = stationArr;
        this.stationArr = this.sortStarionArr(stationArr);
      }
    },
    // 按照场站排序
    sortStarionArr(arr) {
      let newArr = [];
      for (let i = 0; i < this.stationList.length; i++) {
        let item = this.stationList[i];
        for (let j = 0; j < arr.length; j++) {
          let itn = arr[j];
          if (itn[0].stationId && itn[0].stationId === item.id) {
            newArr.push(itn);
          } else if (itn[0].station && itn[0].station === item.id) {
            newArr.push(itn);
          }
        }
      }
      return newArr;
    },
    handleWindturbineChange() {
      let ws = MessageBridge.getInstance();
      let wind = [{ key: "/topic/windturbine", action: this.getWindMsg }];
      let guangfu = [{ key: "/topic/pv", action: this.getPvMsg }];
      ws.register(wind);
      ws.register(guangfu);
      //   api.getWindturbine().then((res) => {
      //     if (res.data) {
      //       let stationArr = [];
      //       for (const key in this.stationObj) {
      //         this.stationObj[key] = [];
      //       }
      //       this.windterbin = res.data;
      //       let arr = Object.keys(res.data).sort();
      //       for (const id of arr) {
      //         let val = res.data[id];
      //         if (val.lockValue === 9) {
      //           val.lockValues = this.lockValues.filter(
      //             (item) => val.windturbineId === item.windturbineID
      //           )[0]?.value;
      //         }
      //         this.chooseList.forEach((item) => {
      //           if (item.windturbineId === val.windturbineId) {
      //             val.active = true;
      //           }
      //         });
      //         if (this.current === "all") {
      //           this.stationObj[val.stationId]?.push(val);
      //         } else {
      //           if (this.current === val.stationId) {
      //             this.stationObj[val.stationId]?.push(val);
      //           }
      //         }
      //       }
      //       this.current === "all" &&
      //         (this.cache = JSON.parse(JSON.stringify(this.stationObj)));
      //       let list = Object.keys(this.stationObj).sort();
      //       for (const id of list) {
      //         stationArr.push(this.stationObj[id]);
      //       }
      //       this.stationArr = stationArr;
      //     }
      //   });
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  display: flex;
  flex-direction: column;
  background-color: #000000;
  height: 90vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
  overflow-y: auto;
}

.body::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.titleList {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 3vw;
  padding-top: 8px;
  position: absolute;
  width: 96%;
  background-color: #000000;
  padding-bottom: 10px;
  .infoMsg {
    display: flex;
    border-radius: 10px;
    height: 34px;
    padding: 0 10px;
    margin-right: 20px;
    position: relative;
    top: 5px;
    .infoTitle {
      position: relative;
      top: 2px;
      color: #fff;
      font-weight: 600;
      padding: 0 10px;
      span {
        margin-right: 10px;
      }
    }
    .infoMainCV {
      .colorLine {
        width: 25px;
        height: 14px;
        border-radius: 3px;
        display: inline-block;
        margin-top: 2px;
        position: relative;
        top: 3px;
      }
      .colorValue {
        font-size: 12px;
        margin: 0 15px 0 5px;
        color: #fff;
      }
    }
    .infoMain {
      padding: 0 20px;
      color: #fff;
      .infoMain_top {
        display: flex;
        justify-content: end;
        .whiteBox {
          display: inline-block;
          width: 15px;
          height: 5px;
          background: #fff;
          position: relative;
          top: 5px;
        }
        .infoMainMsg {
        }
      }
      .infoMain_bot {
        position: relative;
        top: -3px;
      }
    }
    .item9 {
      background-color: rgba(05, 187, 76, 1);
    }

    .item8 {
      background-color: #0ec7dc;
    }

    .item7 {
      background-color: rgba(75, 85, 174, 1);
    }

    .item6 {
      background-color: rgba(225, 125, 36, 1);
    }

    .item5 {
      background-color: rgba(186, 50, 55, 1);
    }
  }
}

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

  .title-item {
    background-color: #242424;
    border-radius: 4px;
    padding: 8px 27px 7px 25px;
    font-size: 14px;
    color: #b4bdc0;
    margin-right: 10px;
  }

  .title-onItem {
    background-color: rgba(37, 116, 219, 1);
    border-radius: 4px;
    padding: 8px 27px 7px 25px;
    font-size: 14px;
    color: #b4bdc0;
    margin-right: 10px;
  }
}

.content {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}

.block {
  padding-left: 10px;
}

.windStation {
  display: flex;
  flex-direction: column;
  background-color: #242424;
  border-radius: 4px;
  width: 95%;
  margin-left: 3vw;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-bottom: 20px;

  .stationTitle {
    display: flex;
    flex-direction: row;
    // align-items: center;
    margin-top: 10px;

    .stationName {
      font-size: 14px;
      margin-left: 10px;
      color: #b4bdc0;
    }

    .num {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 25px;
      width: 90px;

      .jrts {
        font-size: 12px;
        color: #606769;
      }

      .jrts_num {
        font-size: 16px;
        color: #ffffff;
      }

      .djts {
        font-size: 12px;
        color: #05bb4c;
      }

      .djts_num {
        font-size: 16px;
        color: #05bb4c;
      }

      .bwts {
        font-size: 12px;
        color: #4b55ae;
      }

      .bwts_num {
        font-size: 16px;
        color: #4b55ae;
      }

      .gzts {
        font-size: 12px;
        color: #ba3237;
      }

      .gzts_num {
        font-size: 16px;
        color: #ba3237;
      }

      .jxts {
        font-size: 12px;
        color: #e17d24;
      }

      .jxts_num {
        font-size: 16px;
        color: #e17d24;
      }

      .lxts {
        font-size: 12px;
        color: #606769;
      }

      .lxts_num {
        font-size: 16px;
        color: #606769;
      }
    }
  }

  .stationInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 30px;
    font-size: 16px;

    .name {
      color: #ffffff;
      margin-right: 25px;
    }

    .nums {
      color: #05bb4c;
    }
  }
}

.item2 {
  flex: 1;
  display: flex;
  width: 20%;
  flex-wrap: wrap;

  .name {
    color: #fff;
    width: 50%;
    text-align: center;
  }

  .num2 {
    width: 50%;
    color: #fff;
    text-align: left;
  }

  .num1 {
    width: 50%;
    color: #fff;
    text-align: center;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      width: 1.481vh;
      height: 0.556vh;
      background-color: #fff;
      left: 1.204vh;
      top: 0.741vh;
    }
  }

  .num3 {
    width: 50%;
    color: #fff;
    text-align: left;
  }
}
</style>
