监控台模块下3个模式得相关修改

shuishen

2021-04-07 eebbc840b49f3c14ced71dbb49e7e9fe6110315d

监控台模块下3个模式得相关修改

 src/views/supervisoryConsole/card.vue

@@ -1,13 +1,132 @@
<template>
  
  <el-row>
    <el-col
      class="card-container"
      :span="1"
      v-for="(item, index) in option"
      :key="index"
    >
      <a href="">
        <el-card
          :style="
            item.state == ''
              ? item.onlineStatus == 1
                ? 'background: #1DBB99e6'
                : 'background: #C9C9C9e6'
              : 'background: #F48F57e6'
          "
          @click="alert(1)"
        >
          <div>{{ item.deviceName }}</div>
          <div>{{ item.street }}</div>

          <div class="cet">
            {{
              item.state == ""
                ? item.onlineStatus == 1
                  ? "设备在线"
                  : "设备掉线"
                : "设备故障"
            }}
          </div>

          <img src="/img/alarm.png" alt="" />

          <div class="bot">
            <span>
              {{ item.deviceNumber }}
            </span>
            <span>
              {{ item.stime }}
            </span>
          </div>
        </el-card>
      </a>
    </el-col>
  </el-row>
</template>

<script>
import { getList } from "@/api/supervisory/card";
export default {
  data() {
    return {
      option: [],
    };
  },
  created() {
    getList().then((res) => {
      var a = [],
        b = [],
        c = [];

}
      res.data.data.forEach((item) => {
        if (item.state != "") a.push(item);
        if (item.state == "" && item.onlineStatus != 1) b.push(item);
        if (item.state == "" && item.onlineStatus == 1) c.push(item);
      });

      this.option = a.concat(c.concat(b));
    });
  },
};
</script>

<style>

<style lang="scss">
.card-container {
  padding: 0 10px;
  height: 172px !important;
  box-sizing: border-box;
  margin-bottom: 20px !important;
  min-width: 368px;
  max-width: 370px;
  a {
    width: 100%;
    height: 100%;
    cursor: pointer;
    .el-card {
      height: 100%;
      color: #180808;
      &:hover {
        transform: scale(1.04);
      }
      .el-card__body {
        position: relative;
        height: 100%;
        box-sizing: border-box;
        .bot {
          position: absolute;
          left: 16px;
          bottom: 16px;
          width: calc(100% - 32px);
          span:nth-child(1) {
            float: left;
          }
          span:nth-child(2) {
            float: right;
          }
        }
        .cet {
          position: absolute;
          top: 50%;
          left: 16px;
        }
        div {
          line-height: 24px;
          font-size: 14px;
        }
        img {
          position: absolute;
          right: 16px;
          top: 40%;
          width: 40px;
        }
      }
    }
    &:hover {
      color: #180808;
      text-decoration: none;
    }
  }
}
</style>

 src/views/supervisoryConsole/data.vue

@@ -22,49 +22,41 @@
            <div class="info-active-top">
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(0)"
                    class="dashboard_alarm ng-binding"
                    >预警</span
                  >
                  <span class="dashboard_alarm ng-binding">预警</span>
                </div>
                <div><span class="ng-binding">3</span></div>
                <div class="ng-binding">占比&nbsp;1.8%</div>
                <div>
                  <span class="ng-binding">{{ yj }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ yjper }}</div>
              </div>
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(4)"
                    class="dashboard_malfunction ng-binding"
                    >故障</span
                  >
                  <span class="dashboard_malfunction ng-binding">故障</span>
                </div>
                <div><span class="ng-binding">25</span></div>
                <div class="ng-binding">占比&nbsp;15%</div>
                <div>
                  <span class="ng-binding">{{ gz }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ gzper }}</div>
              </div>
            </div>
            <div class="info-active-bottom">
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(1)"
                    class="dashboard_normal ng-binding"
                    >正常</span
                  >
                  <span class="dashboard_normal ng-binding">正常</span>
                </div>
                <div><span class="ng-binding">125</span></div>
                <div class="ng-binding">占比&nbsp;75%</div>
                <div>
                  <span class="ng-binding">{{ zx }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ zxper }}</div>
              </div>
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(3)"
                    class="dashboard_inactive ng-binding"
                    >掉线</span
                  >
                  <span class="dashboard_inactive ng-binding">掉线</span>
                </div>
                <div><span class="ng-binding">15</span></div>
                <div class="ng-binding">占比&nbsp;10%</div>
                <div>
                  <span class="ng-binding">{{ dx }}</span>
                </div>
                <div class="ng-binding">占比&nbsp;{{ dxper }}</div>
              </div>
            </div>
          </div>
@@ -155,12 +147,21 @@
  getList,
  getEquipmentList,
  getDayWarnList,
  getEquipment,
} from "@/api/supervisory/data";

export default {
  data() {
    return {
      tableData: [],
      dx: null,
      zx: null,
      gz: null,
      yj: null,
      dxper: null,
      zxper: null,
      gzper: null,
      yjper: null,
    };
  },
  created() {
@@ -188,34 +189,56 @@
    getDayWarnList().then((res) => {
      that.drawPillar(res.data.data);
    });

    getEquipment().then((res) => {
      console.log(res.data.data, 123);

      var total = 0;

      total += res.data.data.zx;
      total += res.data.data.dx;
      total += res.data.data.gz;

      console.log(total, 45);

      that.dx = res.data.data.dx;
      that.zx = res.data.data.zx;
      that.gz = res.data.data.gz;
      that.yj = res.data.data.yj;
      that.dxper = ((res.data.data.dx / total) * 100).toFixed(2) + "%";
      that.zxper = ((res.data.data.zx / total) * 100).toFixed(2) + "%";
      that.gzper = ((res.data.data.gz / total) * 100).toFixed(2) + "%";
      that.yjper = ((res.data.data.yj / total) * 100).toFixed(2) + "%";

      that.drawPie();
    });
  },
  mounted() {
    this.drawPie();
  },
  mounted() {},
  methods: {
    drawPie() {
      var that = this;
      var myChart = this.$echarts.init(
        document.getElementById("base_information_pie_echarts")
      );

      var m2R2Data = [
        {
          value: 125,
          value: that.zx,
          legendname: "正常",
          name: "正常",
          itemStyle: { color: "#29c194" },
        },
        {
          value: 25,
          value: that.gz,
          legendname: "故障",
          name: "故障",
          itemStyle: { color: "#b6b6b6" },
        },
        {
          value: 15,
          value: that.dx,
          legendname: "掉线",
          name: "掉线",
          itemStyle: { color: "#6d5eac" },
          itemStyle: { color: "#F48F57" },
        },
      ];

@@ -248,8 +271,6 @@
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
@@ -265,7 +286,6 @@
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["66%", "86%"],
@@ -383,7 +403,7 @@

      data.dataList.forEach((item) => {
        if (item.name == "一键求助") {
          yData = item.alarmData
          yData = item.alarmData;
        }
      });

@@ -511,7 +531,7 @@
            background-color: #29c093;
          }
          &:nth-child(3)::before {
            background-color: #6d5eac;
            background-color: #F48F57;
          }
          &:nth-child(4)::before {
            background-color: #dfdfdf;
@@ -572,20 +592,20 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(1) span {
            border: 1px solid #6d5eac;
            color: #6d5eac;
            border: 1px solid #F48F57;
            color: #F48F57;
          }
          .active-list:nth-child(1) > div:nth-child(1) span:hover {
            background: rgba(41, 192, 147, 0.15);
          }
          .active-list:nth-child(2) > div:nth-child(1) span:hover {
            background: #e9e7f3;
            background: #f3ab8448;
          }
          .active-list:nth-child(1) > div:nth-child(2) span {
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #6d5eac;
            color: #F48F57;
          }
        }
        .info-active-top,

 src/views/supervisoryConsole/map.vue

@@ -1,13 +1,39 @@
<template>
  <iframe src="" frameborder="0"></iframe>
  <el-row>
    <el-col :span="24">
      <iframe
        id="supervisoryMap"
        ref="supervisoryMap"
        :src="baseUrl"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
       baseUrl: "",
    };
  },
  created() {
    this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
  },
  mounted() {

}
    // this.$refs.supervisoryMap.onload = () => {
    //   window.frames[0].init("AlertSecurity", {
    //     x: this.form.jd,
    //     y: this.form.wd,
    //   });
    // };
  },
};
</script>

<style>

</style>