南昌市物联网技防平台-前端
liuyg
2021-04-24 522ef20c5501a74bf3d8ef14cad5b2f9174a6c69
src/views/supervisoryConsole/data.vue
@@ -22,7 +22,11 @@
            <div class="info-active-top">
              <div class="active-list">
                <div>
                  <span @click.stop="StartEquipment({dxtype:2})" 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 +35,11 @@
              </div>
              <div class="active-list">
                <div>
                  <span @click.stop="StartEquipment({dxtype:3})" 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 +50,11 @@
            <div class="info-active-bottom">
              <div class="active-list">
                <div>
                  <span @click.stop="StartEquipment({dxtype:1})" 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 +63,11 @@
              </div>
              <div class="active-list">
                <div>
                  <span @click.stop="StartEquipment({dxtype:0})" 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>
@@ -78,27 +94,121 @@
            class="info-content-table"
            :data="tableData"
            stripe
            style="width: 100%; margin: 0 10px"
            style="width: 100%; margin: 0 15px"
            max-height="380px"
            :resizable="false"
          >
            <el-table-column prop="waringType" label="警情类型" width="100">
            <el-table-column prop="waringType" label="警情类型" width="120">
              <template scope="scope">
                <span
                  v-if="scope.row.jtype == 0"
                  style="color: rgb(255, 39, 39)"
                  >{{ scope.row.waringType }}</span
                >
                <span
                  v-else-if="scope.row.jtype == 1"
                  style="color: rgb(21, 162, 254)"
                  >{{ scope.row.waringType }}</span
                >
                <span v-else>{{ scope.row.waringType }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="alarmTime" label="报警时间" width="180">
              <template scope="scope">
                <span
                  v-if="scope.row.jtype == 0"
                  style="color: rgb(255, 39, 39)"
                  >{{ scope.row.alarmTime }}</span
                >
                <span
                  v-else-if="scope.row.jtype == 1"
                  style="color: rgb(21, 162, 254)"
                  >{{ scope.row.alarmTime }}</span
                >
                <span v-else>{{ scope.row.alarmTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="oneContacts" label="主要负责人" width="160">
              <template scope="scope">
                <span
                  v-if="scope.row.jtype == 0"
                  style="color: rgb(255, 39, 39)"
                  >{{ scope.row.oneContacts }}</span
                >
                <span
                  v-else-if="scope.row.jtype == 1"
                  style="color: rgb(21, 162, 254)"
                  >{{ scope.row.oneContacts }}</span
                >
                <span v-else>{{ scope.row.oneContacts }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="onePhone" label="负责人电话" width="180">
              <template scope="scope">
                <span
                  v-if="scope.row.jtype == 0"
                  style="color: rgb(255, 39, 39)"
                  >{{ scope.row.onePhone }}</span
                >
                <span
                  v-else-if="scope.row.jtype == 1"
                  style="color: rgb(21, 162, 254)"
                  >{{ scope.row.onePhone }}</span
                >
                <span v-else>{{ scope.row.onePhone }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="galarmPeople" label="报警人" width="160">
              <template scope="scope">
                <span
                  v-if="scope.row.jtype == 0"
                  style="color: rgb(255, 39, 39)"
                  >{{ scope.row.galarmPeople }}</span
                >
                <span
                  v-else-if="scope.row.jtype == 1"
                  style="color: rgb(21, 162, 254)"
                  >{{ scope.row.galarmPeople }}</span
                >
                <span v-else>{{ scope.row.galarmPeople }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="alarmPeople" label="接警人" width="160">
              <template scope="scope">
                <span
                  v-if="scope.row.jtype == 0"
                  style="color: rgb(255, 39, 39)"
                  >{{ scope.row.alarmPeople }}</span
                >
                <span
                  v-else-if="scope.row.jtype == 1"
                  style="color: rgb(21, 162, 254)"
                  >{{ scope.row.alarmPeople }}</span
                >
                <span v-else>{{ scope.row.alarmPeople }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="jtype" label="警情状态" width="">
              <template scope="scope">
                <el-button size="mini" @click.stop="stateHandling(scope.row)">
                  <span
                    v-if="scope.row.jtype == 0"
                    style="color: rgb(255, 39, 39)"
                    >未处理</span
                  >
                  <span
                    v-else-if="scope.row.jtype == 1"
                    style="color: rgb(21, 162, 254)"
                    >处理中</span
                  >
                  <span v-else>已处理</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <real-popup ref="realPopupView"> </real-popup>
    </el-col>
    <el-col class="super-data-box" :span="8">
      <div class="container-box week-alarm">
@@ -116,10 +226,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 +239,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>
@@ -169,21 +279,7 @@
    getList().then((res) => {
      res.data.data.forEach((item) => {
        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,
          });
          that.tableData.push(item);
        }
      });
    });
@@ -312,18 +408,17 @@
        ],
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
        if (params.name == "正常"){
      myChart.on("click", function (params) {
        if (params.name == "正常") {
          //跳转在线设备
          that.StartEquipment({dxtype:1});
        }else if(params.name == "掉线"){
          that.StartEquipment({ dxtype: 1 });
        } else if (params.name == "掉线") {
          //跳转离线设备
          that.StartEquipment({dxtype:0});
        }else if(params.name == "故障"){
          that.StartEquipment({ dxtype: 0 });
        } else if (params.name == "故障") {
          //跳转故障设备
          that.StartEquipment({dxtype:3});
          that.StartEquipment({ dxtype: 3 });
        }
      });
    },
@@ -484,19 +579,17 @@
        ],
      };
      myChart.setOption(option);
      myChart.on('click', function (params) {
      myChart.on("click", function (params) {
        var data = [];
        var date=new Date;
        var y = date.getFullYear()
        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:'紧急求救',
        })
          startTime: y + "-" + params.name + " 00:00:00",
          endTime: y + "-" + params.name + " 23:59:59",
          waringType: "紧急求救",
        });
        that.handleStartAlarm(data);
      });
    },
    //在线设备分页数据
    StartEquipment(data) {
@@ -512,8 +605,16 @@
        query: data[0],
      });
    },
    // 点击状态的处理事件
    stateHandling(row) {
      console.log(row);
      if (row.jtype == 0) {
        this.$refs.realPopupView.onItemGetParentData(row);
      } else {
        this.$router.push({ path: "/policeTracking/track", query: row });
      }
    },
  },
};
</script>