project-neic/src/components/allMatrices.vue

<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">{{ item.length }}</div> -->
                <div class="jrts_num">{{ getStatus(item, 'jr') }}</div>
              </div>
              <div class="num">
                <div class="djts">待机台数</div>
                <div class="djts_num">
                  <!-- {{ item.filter((val) => val.status === 2)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'dj') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="bwts">并网台数</div>
                <div class="bwts_num">
                  <!-- {{ item.filter((val) => val.status === 4)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'bw') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">故障台数</div>
                <div class="gzts_num">
                  <!-- {{ item.filter((val) => val.status === 5)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'gz') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="jxts">检修台数</div>
                <div class="jxts_num">
                  <!-- {{ item.filter((val) => val.status === 6)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'jx') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="lxts">离线台数</div>
                <div class="lxts_num">
                  <!-- {{ item.filter((val) => val.status === 7)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'lx') }}</div>
                </div>
              </div>

              <div class="stationInfo">
                <div class="name">实时功率</div>
                <div class="nums">
                  <!-- {{
                      $store.state.titleInfo.stationOverviewInfos[
                        item[0].stationId
                      ]?.realTimePower?.value.toFixed(2)
                  }}MW -->
                  {{getseeting($store.state.titleInfo.stationOverviewInfos, item[0], 'power')}}MW
                </div>
              </div>
              <div class="stationInfo">
                <div class="name">平均风速</div>
                <div class="nums">
                  <!-- {{
                      $store.state.titleInfo.stationOverviewInfos[
                        item[0].stationId
                      ]?.averageWindSpeed?.value.toFixed(2)
                  }}m/s -->
                  {{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">{{ item.length }}</div> -->
                <div class="jrts_num">{{ getStatus(item, 'jr') }}</div>
              </div>
              <div class="num">
                <div class="djts">待机台数</div>
                <div class="djts_num">
                  <!-- {{ item.filter((val) => val.status === 2)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'dj') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="bwts">并网台数</div>
                <div class="bwts_num">
                  <!-- {{ item.filter((val) => val.status === 4)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'bw') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">故障台数</div>
                <div class="gzts_num">
                  <!-- {{ item.filter((val) => val.status === 5)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'gz') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="jxts">离线台数</div>
                <div class="jxts_num">
                  <!-- {{ item.filter((val) => val.status === 6)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'lx') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="lxts">维护台数</div>
                <div class="lxts_num">
                  <!-- {{ item.filter((val) => val.status === 7)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'wh') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">限电台数</div>
                <div class="gzts_num">
                  <!-- {{ item.filter((val) => val.status === 7)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'xd') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="gzts">限电停机台数</div>
                <div class="gzts_num">
                  <!-- {{ item.filter((val) => val.status === 5)?.length }} -->
                  <div class="jrts_num">{{ getStatus(item, 'xdtj') }}</div>
                </div>
              </div>
              <div class="num">
                <div class="lxts">未知台数</div>
                <div class="lxts_num">
                  <!-- {{ item.filter((val) => val.status === 6)?.length }} -->
                  <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).sort();
      for (const id of list) {
        stationArr.push(stationObj[id]);
      }
      this.stationObj = stationObj;
      this.stationArr = stationArr;
      console.log('stationArr======>>>>>', this.stationArr)
      debugger
    },
    //风场回调
    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, ...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]);
            }
            // 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>