南昌市物联网技防平台-前端
shuishen
2021-04-22 48d7249fc672823beddb321a3ca7ea57cb3e4d21
src/views/supervisoryConsole/data.vue
@@ -22,7 +22,7 @@
            <div class="info-active-top">
              <div class="active-list">
                <div>
                  <span class="dashboard_alarm ng-binding">预警</span>
                  <span @click.stop="StartEquipment({dxtype:2})" class="dashboard_alarm ng-binding">预警</span>
                </div>
                <div>
                  <span class="ng-binding">{{ yj }}</span>
@@ -31,7 +31,7 @@
              </div>
              <div class="active-list">
                <div>
                  <span class="dashboard_malfunction ng-binding">故障</span>
                  <span @click.stop="StartEquipment({dxtype:3})" class="dashboard_malfunction ng-binding">故障</span>
                </div>
                <div>
                  <span class="ng-binding">{{ gz }}</span>
@@ -42,7 +42,7 @@
            <div class="info-active-bottom">
              <div class="active-list">
                <div>
                  <span class="dashboard_normal ng-binding">正常</span>
                  <span @click.stop="StartEquipment({dxtype:1})" class="dashboard_normal ng-binding">正常</span>
                </div>
                <div>
                  <span class="ng-binding">{{ zx }}</span>
@@ -51,7 +51,7 @@
              </div>
              <div class="active-list">
                <div>
                  <span class="dashboard_inactive ng-binding">掉线</span>
                  <span @click.stop="StartEquipment({dxtype:0})" class="dashboard_inactive ng-binding">掉线</span>
                </div>
                <div>
                  <span class="ng-binding">{{ dx }}</span>
@@ -108,7 +108,7 @@
          </div>
          <div class="head-right">
            <div class="head-right offset-right">
              <a href="/#/realTimePolice/index">预警分析</a>
              <a href="/#/alarmManagement/alarmAnalysis">预警分析</a>
            </div>
          </div>
        </div>
@@ -116,10 +116,10 @@
          <div class="alarm-bar">
            <div class="alarm-bar-title">
              <div class="title-left ng-binding">日累计预警事件数</div>
              <div class="title-right week">
                <span class="ng-binding">0</span
                ><span class="ng-binding">1.00</span>
              </div>
<!--              <div class="title-right week">-->
<!--                <span class="ng-binding">0</span-->
<!--                ><span class="ng-binding">1.00</span>-->
<!--              </div>-->
            </div>
            <div class="week-alarm-bar" id="day_warn_echarts"></div>
          </div>
@@ -129,10 +129,10 @@
              <div class="title-left change-flex-alarm ng-binding">
                日累计预警设备数
              </div>
              <div class="title-right week">
                <span class="ng-binding">0</span
                ><span class="ng-binding">1.00</span>
              </div>
<!--              <div class="title-right week">-->
<!--                <span class="ng-binding">0</span-->
<!--                ><span class="ng-binding">1.00</span>-->
<!--              </div>-->
            </div>
            <div class="week-device-line" id="day_equipment_echarts"></div>
          </div>
@@ -168,17 +168,23 @@
    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,
        });
        if (item.waringType == "紧急求救") {
          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,
          });
        }
      });
    });
@@ -306,6 +312,19 @@
        ],
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        if (params.name == "正常"){
          //跳转在线设备
          that.StartEquipment({dxtype:1});
        }else if(params.name == "掉线"){
          //跳转离线设备
          that.StartEquipment({dxtype:0});
        }else if(params.name == "故障"){
          //跳转故障设备
          that.StartEquipment({dxtype:3});
        }
      });
    },
    drawLine(result) {
@@ -390,6 +409,7 @@
    },
    drawPillar(data) {
      var that = this;
      var myChart = this.$echarts.init(
        document.getElementById("day_warn_echarts")
      );
@@ -464,8 +484,36 @@
        ],
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        var data = [];
        var date=new Date;
        var y = date.getFullYear()
        data.push({
          startTime: y + "-" + params.name+" 00:00:00",
          endTime:y + "-" + params.name+" 23:59:59",
          waringType:'紧急求救',
        })
        that.handleStartAlarm(data);
      });
    },
    //在线设备分页数据
    StartEquipment(data) {
      this.$router.push({
        path: `/clientManagement/index`,
        query: data,
      });
    },
    //日累计预警数量跳转
    handleStartAlarm(data) {
      this.$router.push({
        path: `/realTimePolice/index`,
        query: data[0],
      });
    },
  },
};
</script>
@@ -531,7 +579,7 @@
            background-color: #29c093;
          }
          &:nth-child(3)::before {
            background-color: #F48F57;
            background-color: #f48f57;
          }
          &:nth-child(4)::before {
            background-color: #dfdfdf;
@@ -592,8 +640,8 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(1) span {
            border: 1px solid #F48F57;
            color: #F48F57;
            border: 1px solid #f48f57;
            color: #f48f57;
          }
          .active-list:nth-child(1) > div:nth-child(1) span:hover {
            background: rgba(41, 192, 147, 0.15);
@@ -605,7 +653,7 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #F48F57;
            color: #f48f57;
          }
        }
        .info-active-top,
@@ -727,4 +775,4 @@
    border-bottom: 0px !important;
  }
}
</style>
</style>