监控台页面相关

shuishen

2021-04-02 b4b91ddcd1fab16d8597feef223fbdf407b2878b

监控台页面相关

 src/views/supervisoryConsole/card.vue

New file
@@ -0,0 +1,13 @@
<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

 src/views/supervisoryConsole/data.vue

New file
@@ -0,0 +1,554 @@
<template>
  <el-row>
    <el-col class="super-data-box" :span="16">
      <div class="container-box">
        <div class="info-head">
          <div class="head-left">
            <div class="ng-binding">基本信息</div>
          </div>
          <div class="head-right">
            <div class="head-list ng-binding">预警</div>
            <div class="head-list ng-binding">正常</div>
            <div class="head-list ng-binding">故障</div>
            <div class="head-list ng-binding">掉线</div>
          </div>
        </div>
        <div class="info-content">
          <div
            class="pie-total-container"
            id="base_information_pie_echarts"
          ></div>
          <div class="info-active">
            <div class="info-active-top">
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(0)"
                    class="dashboard_alarm ng-binding"
                    >预警</span
                  >
                </div>
                <div><span class="ng-binding">3</span></div>
                <div class="ng-binding">占比&nbsp;1.8%</div>
              </div>
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(4)"
                    class="dashboard_malfunction ng-binding"
                    >故障</span
                  >
                </div>
                <div><span class="ng-binding">25</span></div>
                <div class="ng-binding">占比&nbsp;15%</div>
              </div>
            </div>
            <div class="info-active-bottom">
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(1)"
                    class="dashboard_normal ng-binding"
                    >正常</span
                  >
                </div>
                <div><span class="ng-binding">125</span></div>
                <div class="ng-binding">占比&nbsp;75%</div>
              </div>
              <div class="active-list">
                <div>
                  <span
                    ng-click="menuToDetail(3)"
                    class="dashboard_inactive ng-binding"
                    >掉线</span
                  >
                </div>
                <div><span class="ng-binding">15</span></div>
                <div class="ng-binding">占比&nbsp;10%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-box">
        <div class="info-head">
          <div class="head-left">
            <div class="ng-binding">
              最近预警事件<span class="ng-binding">最近7天预警事件</span>
            </div>
          </div>
          <div class="head-right offset-right">
            <a href="/#/realTimePolice/index">预警记录</a>
          </div>
        </div>
        <div class="info-content">
          <el-table
            class="info-content-table"
            :data="tableData"
            stripe
            style="width: 100%; margin: 10px"
            max-height="352px"
            :resizable="false"
          >
            <el-table-column prop="waringType" label="警情类型" width="100">
            </el-table-column>
            <el-table-column prop="alarmTime" label="报警时间" width="180">
            </el-table-column>
            <el-table-column prop="oneContacts" label="主要负责人" width="160">
            </el-table-column>
            <el-table-column prop="onePhone" label="负责人电话" width="180">
            </el-table-column>
            <el-table-column prop="galarmPeople" label="报警人" width="160">
            </el-table-column>
            <el-table-column prop="alarmPeople" label="接警人" width="160">
            </el-table-column>
            <el-table-column prop="jtype" label="警情状态" width="">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-col>
    <el-col class="super-data-box" :span="8">
      <div class="container-box week-alarm">
        <div class="info-head alarm-title">
          <div class="head-left">
            <div class="ng-binding">近7天预警趋势</div>
          </div>
          <div class="head-right">
            <div class="head-right offset-right">
              <a href="/#/realTimePolice/index">预警分析</a>
            </div>
          </div>
        </div>
        <div class="alarm-content">
          <div class="alarm-bar">
            <div class="alarm-bar-title">
              <div class="title-left ng-binding">日累计预警事件数</div>
              <div class="title-right week ng-scope" ng-if="$ctrl.barRate >= 1">
                <span class="ng-binding">0</span
                ><span class="ng-binding">1.00</span>
              </div>
            </div>
            <div
              class="week-alarm-bar ng-isolate-scope"
              data="$ctrl.weekAlarm"
              alarm-bar="alarmBarEvent(chart)"
            ></div>
          </div>
          <div class="border-line"></div>
          <div class="alarm-line">
            <div class="alarm-bar-title">
              <div class="title-left change-flex-alarm ng-binding">
                日累计预警设备数
              </div>
              <!-- ngIf: $ctrl.deviceRate >= 1 -->
              <div
                class="title-right week ng-scope"
                ng-if="$ctrl.deviceRate >= 1"
              >
                <span class="ng-binding">0</span
                ><span class="ng-binding">1.00</span>
              </div>
              <!-- end ngIf: $ctrl.deviceRate >= 1 -->
              <!-- ngIf: $ctrl.deviceRate < 1 -->
            </div>
            <div
              class="week-device-line ng-isolate-scope"
              data="$ctrl.weekDevice"
              device-line="deviceLineEvent(chart)"
            ></div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { getList } from "@/api/supervisory/data";

export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    var that = this;
    getList().then((res) => {
      res.data.data.forEach((item) => {
        that.tableData.push({
          waringType:
            item.waringType == "紧急求救" ? "一键求助" : item.waringType,
          alarmTime: item.alarmTime,
          oneContacts: item.oneContacts,
          onePhone: item.onePhone,
          galarmPeople: item.galarmPeople,
          jtype:
            item.jtype == 0 ? "未处理" : item.jtype == 1 ? "处理中" : "已处理",
          alarmPeople: item.alarmPeople,
        });
      });
    });
  },
  mounted() {
    this.drawPie();
  },
  methods: {
    drawPie() {
      var myChart = this.$echarts.init(
        document.getElementById("base_information_pie_echarts")
      );

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

      var sum = 0;

      m2R2Data.forEach((item) => {
        sum += item.value;
      });

      var option = {
        title: [
          {
            text: sum,
            subtext: "监测点总数",
            textStyle: {
              fontSize: 36,
              fontWeight: "normal",
              color: "#393939",
            },
            subtextStyle: {
              fontSize: 16,
              color: "#434343",
            },
            textAlign: "center",
            x: "49%",
            y: "39%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["66%", "86%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: m2R2Data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss">
.super-data-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 0px !important;
  height: 96% !important;
  font-size: 14px;
  &:nth-child(2) {
    padding-left: 10px;
    box-sizing: border-box;
  }
  .container-box {
    flex: 1;
    background: #fff;
    .info-head {
      display: flex;
      padding-left: 20px;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      border-bottom: 1px solid #dfdfdf;
      .head-left {
        flex: 1;
        .ng-binding {
          color: #252525;
          font-size: 1pc;
          span {
            display: inline-block;
            margin-left: 10px;
            color: #d1d1d1;
            font-size: 9pt;
          }
        }
      }
      .head-right {
        display: flex;
        flex: 1 1 auto;
        .head-list {
          position: relative;
          padding-right: 20px;
          padding-left: 18px;
          flex: 1;
          &::before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            display: block;
            margin: auto;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            content: "";
          }
          &:nth-child(1)::before {
            background-color: #f34a4a;
          }
          &:nth-child(2)::before {
            background-color: #29c093;
          }
          &:nth-child(3)::before {
            background-color: #6d5eac;
          }
          &:nth-child(4)::before {
            background-color: #dfdfdf;
          }
        }
        a {
          margin-right: 20px;
          color: #29c093;
        }
      }
      .head-right.offset-right {
        justify-content: flex-end;
      }
    }
    .info-content {
      display: flex;
      height: calc(100% - 50px);
      div {
        flex: 1;
      }
      .pie-total-container {
        display: flex;
        padding: 20px 0;
      }
      .info-active {
        display: flex;
        flex-direction: column;
        .info-active-top {
          display: flex;
          margin-right: 30px;
          border-bottom: 1px solid #e4e4e6;
          .active-list:nth-child(1) > div:nth-child(1) span {
            border: 1px solid #f2494a;
            color: #f2494a;
          }
          .active-list:nth-child(2) > div:nth-child(1) span {
            border: 1px solid #b6b6b6;
            color: #b6b6b6;
          }
          .active-list:nth-child(1) > div:nth-child(1) span:hover {
            background: rgba(243, 74, 74, 0.15);
          }
          .active-list:nth-child(2) > div:nth-child(1) span:hover {
            background: rgba(181, 181, 181, 0.15);
          }
          .active-list:nth-child(1) > div:nth-child(2) span {
            color: #f2494a;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #b6b6b6;
          }
        }
        .info-active-bottom {
          display: flex;
          margin-right: 30px;
          .active-list:nth-child(1) > div:nth-child(1) span {
            border: 1px solid #29c194;
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(1) span {
            border: 1px solid #6d5eac;
            color: #6d5eac;
          }
          .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;
          }
          .active-list:nth-child(1) > div:nth-child(2) span {
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #6d5eac;
          }
        }
        .info-active-top,
        .info-active-bottom {
          .active-list {
            display: flex;
            padding: 40px 0 20px;
            flex: 1;
            flex-direction: column;
            & > div:nth-child(1) {
              flex: 1;
              span {
                display: inline-block;
                padding: 2px 8px;
                border-radius: 4px;
                cursor: pointer;
              }
            }
            & > div:nth-child(2) {
              display: flex;
              flex: 1;
              align-items: flex-end;
              span {
                font-weight: 300;
                font-size: 28px;
              }
            }
            & > div:nth-child(3) {
              display: flex;
              padding-top: 8px;
              flex: 1;
              align-items: flex-start;
            }
          }
        }
      }
    }
    &:nth-child(2) {
      margin-top: 10px;
    }
  }
}
.week-alarm {
  .alarm-content {
    display: flex;
    height: calc(100% - 50px);
    flex-direction: column;
    box-sizing: border-box;
    .alarm-bar,
    .alarm-line {
      position: relative;
      box-sizing: border-box;
      flex: 1;
      .alarm-bar-title {
        position: absolute;
        top: 10px;
        display: flex;
        padding: 0 30px 0 20px;
        width: 100%;
        line-height: 24px;
        box-sizing: border-box;
        .title-left {
          flex: 1;
        }
        .title-right {
          position: relative;
          display: flex;
          flex: 1;
          justify-content: flex-end;
          &.week:after {
            margin-top: 8px;
            width: 11px;
            height: 7px;
            background: url(/img/red-up.png) no-repeat;
            background-size: 11px 7px;
            content: "";
          }
          span:first-child {
            display: inline-block;
            margin-right: 15px;
            vertical-align: middle;
            font-size: 1pc;
          }
          span:last-child {
            display: inline-block;
            margin-right: 3px;
            height: 22px;
            vertical-align: middle;
            line-height: 22px;
          }
        }
      }
      .week-alarm-bar {
        display: flex;
        margin-top: 44px;
        height: calc(100% - 54px);
        background: pink;
      }
      .week-device-line {
        display: flex;
        margin-top: 44px;
        height: calc(100% - 54px);
        background: orange;
      }
    }
    .border-line {
      margin: 0 20px;
      height: 1px;
      background-color: #e4e4e6;
    }
  }
}
.info-content-table {
  &::before {
    height: 0px;
  }
  th,
  td {
    border-bottom: 0px !important;
  }
}
</style>

 src/views/supervisoryConsole/map.vue

New file
@@ -0,0 +1,13 @@
<template>
  <iframe src="" frameborder="0"></iframe>
</template>

<script>
export default {

}
</script>

<style>

</style>