U 晋源统计页

he wei

2024-07-08 10ea1515d5a3441c8e05a7c5f79dadb1be569f89

U 晋源统计页

 src/components/bigScreenPage/acInfoBox.vue

@@ -34,7 +34,7 @@
  position: absolute;
  width: 88px;
  height: 104px;
  background-image: url("./images/ac_box_bg.png");
  background-image: url("./images/ac_box_bg_2.png");
  background-size: 100% 100%;
}
.ac-info-box-container {

 src/components/bigScreenPage/big_screen_card_jy.vue

New file
@@ -0,0 +1,95 @@
<template>
  <div class="big-screen-card">
    <div class="big-screen-card-container">
      <div class="big-screen-card-header">
        <!-- <img src="./images/arrow_mark.png"> -->
        <span class="big-screen-card-title" :class="{'red': isRedTitle}">{{ title }}</span>
        <span class="big-screen-card-title big-screen-card-title-sub">
          <slot name="sub-title">{{ subTitle }}</slot>
        </span>
        <div class="tools">
          <slot name="tools"></slot>
        </div>
      </div>
      <div :class="['big-screen-card-body', contentClass]">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "big_screen_card",
  props: {
    title: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    },
    contentClass: {
      type: [String, Array],
      default() {
        return []
      }
    },
    isRedTitle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {}
}
</script>

<style scoped>
.big-screen-card {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 8px;
}
.big-screen-card-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--jy-panel-bgcolor);
  border: 1px var(--jy-panel-border-color) solid;
}
.big-screen-card-header {
  padding: 8px;
  position: relative;
  background: linear-gradient(180deg, var(--jy-panel-title-bgcolor0), var(--jy-panel-title-bgcolor1));
   /* var(--jy-panel-title-bgcolor); */
}
.tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
}
.big-screen-card-header img {
  height: 16px;
  vertical-align: middle;
}
.big-screen-card-title {
  margin-left: 8px;
  color: var(--jy-panel-title-fcolor);
  font-size: 20px;
  font-weight: bold;
}
.big-screen-card-title.red {
  color: #ff0000;
}
.big-screen-card-body {
  flex: 1;
}
.big-screen-card-title-sub {
  font-size: 16px;
}
</style>

 src/components/bigScreenPage/big_screen_jy.vue

New file
@@ -0,0 +1,792 @@
<template>
  <div class="big-screen-container">
    <div class="big-screen-content">
      <div class="big-screen-body">
        <div class="big-screen-body-container">
          <div class="big-screen-left">
            <div class="big-screen-left-container">
              <div class="card-container">
                <big-screen-card title="资源统计">
                  <div class="ac-container">
                    <ac-info-box
                      title="站点"
                      :value="stationNum | toLarge"
                      :box-style="{ top: '4px', left: '100px' }"
                    ></ac-info-box>
                    <ac-info-box
                      title="电源"
                      :value="powerNum | toLarge"
                      :box-style="{ top: '4px', right: '100px' }"
                    ></ac-info-box>
                    <ac-info-box
                      title="设备"
                      :value="devCount | toLarge"
                      :box-style="{ bottom: '30px', left: '36px' }"
                    ></ac-info-box>
                    <ac-info-box
                      title="已核容"
                      :value="checkCapNum | toLarge"
                      :box-style="{ bottom: '30px', right: '36px' }"
                    ></ac-info-box>
                    <!-- <div class="ac-widget-box"></div> -->
                  </div>
                </big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="电池统计">
                  <battery-pie-chart ref="batteryChart"></battery-pie-chart>
                </big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="整组容量">
                  <div class="mon-box-container">
                    <div class="mon-info-box">
                      <div class="mon-info-title">大于95%比例:</div>
                      <div class="mon-info-value">{{ cap.level0 }}</div>
                    </div>
                    <div class="mon-info-box box2">
                      <div class="mon-info-title">95%~85%比例:</div>
                      <div class="mon-info-value">{{ cap.level1 }}</div>
                    </div>
                    <div class="mon-info-box box3">
                      <div class="mon-info-title">85%~60%比例:</div>
                      <div class="mon-info-value">{{ cap.level2 }}</div>
                    </div>
                  </div>
                  <div class="mon-box-container mgt16">
                    <div class="mon-info-box box2">
                      <div class="mon-info-title">60%~50%比例:</div>
                      <div class="mon-info-value">{{ cap.level3 }}</div>
                    </div>
                    <div class="mon-info-box box3">
                      <div class="mon-info-title">小于50%:</div>
                      <div class="mon-info-value">{{ cap.level4 }}</div>
                    </div>
                  </div>
                </big-screen-card>
              </div>
            </div>
          </div>
          <div class="big-screen-middle">
            <div class="big-screen-middle-container">
              <!-- <div class="big-screen-middle-header">
                <div class="total-data-container">
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <total-data
                        type="站点"
                        label="个"
                        :value="stationNum | toLarge"
                      ></total-data>
                    </el-col>
                    <el-col :span="6">
                      <total-data
                        type="电源"
                        label="个"
                        :value="powerNum | toLarge"
                      ></total-data>
                    </el-col>
                    <el-col :span="6">
                      <total-data
                        type="设备"
                        label="个"
                        :value="devCount | toLarge"
                      ></total-data>
                    </el-col>
                    <el-col :span="6">
                      <total-data
                        type="已核容"
                        label="个"
                        :value="checkCapNum | toLarge"
                      ></total-data>
                    </el-col>
                  </el-row>
                </div>
              </div> -->
              <div class="big-screen-middle-body">
                <div class="map-chart-container">
                  <!-- center -->
                  <div class="flex-center">
                    <div class="flex-map-contain">
                      <div class="inner">
                        <map-chart :roam="true" ref="map"></map-chart>
                      </div>
                    </div>
                    <!-- 表格 -->
                    <div class="table-wrap">
                      <div class="table-contain">
                        <el-table
                          :data="tableData"
                          stripe
                          size="mini"
                          height="100%"
                          style="width: 100%"
                        >
                          <el-table-column
                            :prop="item.prop"
                            :label="item.label"
                            :min-width="item.minWidth"
                            :resizable="false"
                            align="center"
                            v-for="(item, index) in headers"
                            :key="index"
                          ></el-table-column>
                          <el-table-column
                            label="标记颜色"
                            width="220"
                            align="center"
                          >
                            <template slot-scope="scope">
                              <div
                                class="color-panel"
                                :style="{ backgroundColor: scope.row.color }"
                              ></div>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="big-screen-right">
            <div class="big-screen-left-container">
              <div class="card-container">
                <big-screen-card title="单体电压/内阻/温度">
                  <mon-warn-bar ref="battAlarm"></mon-warn-bar>
                </big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="设备状态">
                  <radar-chart ref="devState"></radar-chart>
                </big-screen-card>
              </div>
              <div class="card-container">
                <big-screen-card title="实时告警">
                  <bar3d ref="bar3d"></bar3d>
                </big-screen-card>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BigScreenCard from "@/components/bigScreenPage/big_screen_card_jy.vue";
import totalData from "@/components/bigScreenPage/totalData.vue";
import MonitorBox from "@/components/bigScreenPage/monitorBox.vue";
import batteryImage from "./images/monitor/battery.png";
import deviceImage from "./images/monitor/device.png";
import powerImage from "./images/monitor/power.png";
import xuHangImage from "./images/monitor/xuhang.png";
import MapChart from "@/components/myCharts/MapChart.vue";
import CityChart from "@/components/chart/cityChart.vue";
import RadarChart from "@/components/myCharts/RadarChart.vue";
import BatteryPieChart from "@/components/myCharts/BatteryPieChart.vue";
import PieList from "@/components/myCharts/PieList.vue";
import AcInfoBox from "@/components/bigScreenPage/acInfoBox.vue";
import MonWarnBar from "@/components/myCharts/monWarnBar.vue";
import bar3d from "@/views/home/components/bar-3d";
import createWs from "@/assets/js/websocket";
const WSMixin = createWs("screenJy");
// 班组管理的站点颜色 超过七个班组的第七个及以后的都用最后一种颜色
const colors = [
  "#fecb40",
  "#219141",
  "#23a8f2",
  "#ff8080",
  "#1c9d95",
  "#b91fea",
  "#d64d0d",
];
export default {
  name: "big_screen_page",
  mixins: [WSMixin],
  components: {
    MonWarnBar,
    AcInfoBox,
    PieList,
    BatteryPieChart,
    RadarChart,
    CityChart,
    MapChart,
    MonitorBox,
    BigScreenCard,
    totalData,
    bar3d,
  },
  data() {
    return {
      headers: [
        {
          prop: "groupName",
          label: "班组名称",
          minWidth: 160,
        },
        {
          prop: "stationCount",
          label: "管理机房数",
          minWidth: 120,
        },
        // {
        //   prop: "battAlarmCount",
        //   label: "电池告警数",
        //   minWidth: 120,
        // },
        // {
        //   prop: "powerAlarmCount",
        //   label: "电源告警数",
        //   minWidth: 120,
        // },
        // {
        //   prop: "deviceAlarmCount",
        //   label: "设备告警数",
        //   minWidth: 120,
        // },
        // {
        //   prop: "color",
        //   label: "标记颜色",
        //   minWidth: 120,
        // },
      ],
      tableData: [],
      checkCapNum: 0,
      deviceImage,
      powerImage,
      batteryImage,
      xuHangImage,
      mapName: "zhongguo",
      acInfo: {
        overVol: 0, // 过压
        lowVol: 0, // 欠压
        overCurr: 0, // 过流
        lackVol: 0, // 缺项
      },
      stationNum: 0,
      devCount: 0,
      battGroupCount: 0,
      powerNum: 0,
      capAlarmNum: 0,
      devAlarmNum: 0,
      battAlarmNum: 0,
      powerAlarmNum: 0,
      cap: {
        level0: 0,
        level1: 0,
        level2: 0,
        level3: 0,
        level4: 0,
      },
      isChange: true,
      time: "",
    };
  },
  filters: {
    toLarge(input) {
      if (undefined == input) {
        return "";
      } else {
        if (input > 999) {
          return "999+";
        } else {
          return input;
        }
      }
    },
  },
  methods: {
    close() {
      this.$emit("close", false);
    },
    onWSMessage(res) {
      let rs = JSON.parse(res.data);
      // console.log(rs, "=-===msg");
      if (rs.code == 1) {
        let {
          monVRTAnalysis,
          devCountMap,
          battGroupInfo,
          devAlarmNum,
          capAlarmNum,
          groupCap,
          res_groupInfo,
        } = rs.data;
        // 设置交流ABC
        let acABC = rs.data.acABC;
        if (acABC.code == 1 && acABC.data) {
          this.setAcInfo(acABC.data2[0]);
        } else {
          this.setAcInfo({
            过压: 0,
            欠压: 0,
            过流: 0,
            缺项: 0,
          });
        }

        // 设置设备状态
        let devStates = rs.data.devStates;
        if (devStates.code == 1 && devStates.data) {
          this.setDevStates(devStates.data2);
        } else {
          this.setDevStates({
            内阻测试数量: 0,
            核容测试数量: 0,
            在线浮充数量: 0,
            通讯故障数量: 0,
            预充电数量: 0,
          });
        }

        // 单体电压/内阻/温度  图表
        this.updateBattAlarm(monVRTAnalysis);

        // 资源总数统计
        this.updateDevCount(devCountMap);

        // 电池统计
        this.updateBattInfo(battGroupInfo);

        // 实时告警  统计
        this.updateRTAlarm(devAlarmNum);

        // 续航监测 告警数
        // if (capAlarmNum.code && capAlarmNum.data) {
        //   this.capAlarmNum = capAlarmNum.data2;
        // }

        // 整组容量
        this.updateGroupCap(groupCap);

        // 地图 及下方统计
        this.updateStationInfo(res_groupInfo);
      }
    },
    updateStationInfo(obj) {
      let list = [];
      let stationList = [];
      if (obj && obj.code) {
        obj.data.forEach((v, i) => {
          let color =
            i <= colors.length - 1 ? colors[i] : colors[colors.length - 1];
          v.color = color;
          stationList.push(
            ...v.stationInfList.map((item) => ({ ...item, color }))
          );
          list.push(v);
        });
      }
      this.tableData = list;

      if (this.$refs.map) {
        this.updateMap(stationList);
      }
    },
    setAcInfo(data) {
      this.acInfo.overVol = data["过压"];
      this.acInfo.lowVol = data["欠压"];
      this.acInfo.overCurr = data["过流"];
      this.acInfo.lackVol = data["缺项"];
    },
    setDevStates(data) {
      let values = [];
      Object.keys(data).forEach((key) => {
        values.push({
          name: key,
          value: data[key],
        });
      });
      this.$refs.devState.setData(values);
    },
    // 单体电压/内阻/温度  图表
    updateBattAlarm(obj) {
      let { code, data, data2 } = obj;
      let res = [0, 0],
        temp = [0, 0],
        vol = [0, 0];
      if (code && data) {
        res = [
          data2["单体内阻"]["单体内阻低告警"],
          data2["单体内阻"]["单体内阻高告警"],
        ];
        temp = [
          data2["单体温度"]["单体温度低告警"],
          data2["单体温度"]["单体温度高告警"],
        ];
        vol = [
          data2["单体电压"]["单体电压低告警"],
          data2["单体电压"]["单体电压高告警"],
        ];
      }
      this.$refs.battAlarm.setData({
        res,
        temp,
        vol,
      });
    },
    // 资源总数统计 地图
    updateDevCount(obj) {
      let { code, data, data2 } = obj;
      let devCount = 0,
        stationNum = 0,
        battGroupCount = 0,
        powerNum = 0,
        checkCapNum = 0;
      // stationList = [];
      if (code && data) {
        devCount = data2.devCount;
        battGroupCount = data2.battGroupCount;
        powerNum = data2.powerNum;
        stationNum = data2.stationNum;
        // stationList = data2.stationInfList;
        checkCapNum = data2.checkCapNum;
      }
      this.stationNum = stationNum;
      this.devCount = devCount;
      this.battGroupCount = battGroupCount;
      this.powerNum = powerNum;
      this.checkCapNum = checkCapNum;

      // 地图上的站点信息
      // if (this.$refs.map) {
      //   this.updateMap(stationList);
      // }
    },
    // 电池统计
    updateBattInfo(obj) {
      let { code, data, data2 } = obj;
      let vol2 = 0,
        vol12 = 0,
        producer = [{ name: "电池品牌", value: 0 }];
      if (code && data) {
        vol2 = data2.monVol["2.0"];
        vol12 = data2.monVol["12.0"];
        let arr = Object.keys(data2.producer)
          .map((v) => ({ name: v, value: data2.producer[v] }))
          .sort((a, b) => b.value - a.value);
        if (arr.length <= 5) {
          producer = arr;
        } else {
          let name = "其他";
          let value = 0;
          arr.splice(4).forEach((v) => {
            value += v.value * 1;
          });
          arr.push({ name, value });
          producer = arr;
        }
      }
      this.$refs.batteryChart.setData(vol2, vol12, producer);
    },
    // 实时告警  统计
    updateRTAlarm(obj) {
      let { code, data, data2 } = obj;
      let powerAlarmNum = 0,
        battAlarmNum = 0,
        devAlarmNum = 0;
      if (code && data) {
        powerAlarmNum = data2.powerAlarmNum;
        battAlarmNum = data2.battAlarmNum;
        devAlarmNum = data2.devAlarmNum;
      }
      this.devAlarmNum = devAlarmNum;
      this.battAlarmNum = battAlarmNum;
      this.powerAlarmNum = powerAlarmNum;

      this.$refs.bar3d.setData({
        xLabel: ["电源告警", "设备告警", "电池告警"],
        sData: [powerAlarmNum, devAlarmNum, battAlarmNum],
      });
    },
    // 更新地图
    updateMap(data) {
      // const getColor = (o) => {
      //   let res = 0;
      //   res = o.devWorkState <= 3 ? o.devWorkState : 0;
      //   return ["#0081ff", "#66f842", "#ff6b6c", "#7668f9"][res];
      // };
      this.$refs.map.setData(
        data.map((v) => {
          // console.log(v.stationName3, v.color, '================');
          return {
            ...v,
            name: v.nodeStation ? "节" : "",
            label: v.stationName3,
            // color: getColor(v),
            // fontColor: '#fff',
            points: [v.stationLongitude, v.stationLatitude],
            // 无实际意义
            value: 100,
          };
        })
      );
    },
    // 整组容量
    updateGroupCap(obj) {
      let { code, data, data2 } = obj;
      let level0 = 0,
        level1 = 0,
        level2 = 0,
        level3 = 0,
        level4 = 0;
      if (code && data) {
        level0 = data2[1];
        level1 = data2[2];
        level2 = data2[3];
        level3 = data2[4];
        level4 = data2[5];
      }
      this.cap.level0 = level0;
      this.cap.level1 = level1;
      this.cap.level2 = level2;
      this.cap.level3 = level3;
      this.cap.level4 = level4;
    },
    changeTime() {
      let isChange = this.isChange;
      let date = new Date();
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let week = weeks[date.getDay()];
      this.time = date.format("yyyy-MM-dd hh:mm:ss") + " 星期" + week;
      if (isChange) {
        setTimeout(() => {
          this.changeTime();
        }, 1000);
      }
    },
  },
  mounted() {
    this.changeTime();
    setTimeout(() => {

      console.log(this.$refs.map.getChart().getOption(), '0000')
    }, 2000);
  },
  destroyed() {
    this.isChange = false;
  },
};
</script>

<style scoped lang="less">
.big-screen-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--jy-bgcolor);
  background-size: 100% 100%;
  z-index: 99999999;
}

.big-screen-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.big-screen-header {
  position: relative;
  background-image: url("./images/header_bg.png");
  background-size: 100% 100%;
  height: 88px;
  text-align: center;
}

.big-screen-header img.title-txt {
  margin-top: 20px;
  height: 41px;
}

.big-screen-header-right-tools {
  position: absolute;
  top: 8px;
  right: 16px;
}

.big-screen-header-time {
  position: absolute;
  top: 48px;
  right: 48px;
}

.big-screen-header-right-tools .close-switch {
  height: 31px;
}

.big-screen-header-right-tools .close-switch:hover {
  height: 34px;
  cursor: pointer;
}

.big-screen-body {
  flex: 1;
}

.big-screen-body-container {
  display: flex;
  height: 100%;
}

.big-screen-left,
.big-screen-right {
  flex: 1;
  height: 100%;
}

.big-screen-middle {
  width: 960px;
  padding: 8px;
}

.big-screen-middle-container {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.big-screen-middle-header {
  background-image: url("./images/round_bg.png");
  background-size: 100% 100%;
  height: 184px;
}

.big-screen-left-container {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.card-container {
  flex: 1;
}

.total-data-container {
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
}

.big-screen-middle-body {
  flex: 1;
}

.monitor-box-list {
  padding-bottom: 24px;
}

.map-chart-container {
  position: relative;
  height: 100%;
  /* padding-bottom: 8px; */
  padding: 0;
  display: flex;
}
.flex-right,
.flex-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 0;
}
.flex-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  .table-wrap {
    width: 100%;
    height: 214px;
    position: relative;
    .table-contain {
      // height: 100%;
      // margin: 0 6px;
      position: absolute;
      left: 6px;
      right: 6px;
      top: 0;
      bottom: 0;
    }
  }
  .flex-map-contain {
    flex: 1;
    width: 100%;
    position: relative;
    .inner {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }
}

.ac-container {
  position: relative;
  height: 100%;
  background-image: url("./images/ac_bg_2.png");
  background-size: 100% 100%;
}

.ac-widget-box {
  position: absolute;
  bottom: 60px;
  left: 50%;
  margin-left: -44px;
  width: 88px;
  height: 104px;
  background-image: url("./images/ac_widget.png");
  background-size: 100% 100%;
}

.mon-box-container {
  text-align: center;
  box-sizing: border-box;
  padding-top: 8px;
}

.mon-info-box {
  display: inline-block;
  margin-left: 8px;
  width: 139px;
  height: 90px;
  background-image: url("./images/mon_info_box1.png");
  background-size: 100% 100%;
  text-align: center;
  padding-top: 1px;
  box-sizing: border-box;
}

.mon-info-box.box2 {
  background-image: url("./images/mon_info_box2.png");
}

.mon-info-box.box3 {
  background-image: url("./images/mon_info_box3.png");
}

.mon-info-title {
  margin-top: 32px;
  font-size: 13px;
}

.mon-info-value {
  font-size: 16px;
  color: #ffff00;
  font-weight: bold;
}
.color-panel {
  display: inline-block;
  width: 3em;
  height: 1em;
  vertical-align: middle;
  border-radius: 4px;
}
</style>

 src/components/bigScreenPage/images/ac_bg_2.png

 src/components/bigScreenPage/images/ac_box_bg_2.png

 src/permission.js

@@ -4,7 +4,9 @@
import 'nprogress/nprogress.css' // progress bar style

NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login'] // no redirect whitelist

// /frame-jy 为山西晋源的iframe 统计页面
const whiteList = ['/login', '/frame-jy'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
  // determine whether the user has logged in
  const username = sessionStorage.getItem('username')

 src/router/index.js

@@ -1077,6 +1077,11 @@
    }
  ]
},
// 山西晋源
{
  path: '/frame-jy',
  component: () => import('@/components/bigScreenPage/big_screen_jy.vue')
},
// 强制刷新空界面
{
  path: '/redirect/:path*',

 src/styles/frame-sxjy.css

New file
@@ -0,0 +1,9 @@
body {
  /* 晋源iframe页面配色 */
  --jy-bgcolor: #0E1016;
  --jy-panel-bgcolor: rgba(49, 66, 77, .5);
  --jy-panel-title-bgcolor0: #0464CF;
  --jy-panel-title-bgcolor1: #0075F4;
  --jy-panel-title-fcolor: #fff;
  --jy-panel-border-color: #2A86AC;
}

 src/styles/index.scss

@@ -3,3 +3,5 @@
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";

@import "./frame-sxjy.css";

 yarn.lock

Diff too large