修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 src/views/supervisoryConsole/data.vue

@@ -22,7 +22,11 @@
            <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 +35,11 @@
              </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 +50,11 @@
            <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 +63,11 @@
              </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>
@@ -78,27 +94,121 @@
            class="info-content-table"
            :data="tableData"
            stripe
            style="width: 100%; margin: 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">
@@ -108,7 +218,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 +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>
@@ -147,7 +257,7 @@
  getList,
  getEquipmentList,
  getDayWarnList,
  getEquipment,
  getEquipments,
} from "@/api/supervisory/data";

export default {
@@ -168,17 +278,9 @@
    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(item);
        }
      });
    });

@@ -190,7 +292,7 @@
      that.drawPillar(res.data.data);
    });

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

      var total = 0;
@@ -198,6 +300,7 @@
      total += res.data.data.zx;
      total += res.data.data.dx;
      total += res.data.data.gz;
      total += res.data.data.yj;

      console.log(total, 45);

@@ -229,6 +332,12 @@
          itemStyle: { color: "#29c194" },
        },
        {
          value: that.yj,
          legendname: "预警",
          name: "预警",
          itemStyle: { color: "#F34A4A" },
        },
        {
          value: that.gz,
          legendname: "故障",
          name: "故障",
@@ -243,10 +352,11 @@
      ];

      var sum = 0;

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

      // sum +=that.yj;

      var option = {
        title: [
@@ -269,20 +379,21 @@
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
          // formatter: function (parms) {
          //   var str =
          //     parms.marker +
          //     "" +
          //     parms.data.legendname +
          //     "</br>" +
          //     "数量：" +
          //     parms.data.value +
          //     "</br>" +
          //     "占比：" +
          //     parms.percent +
          //     "%";
          //   return str;
          // },
          formatter: "{b}: {c} ({d}%)",
        },
        series: [
          {
@@ -306,6 +417,18 @@
        ],
      };
      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 +513,7 @@
    },

    drawPillar(data) {
      var that = this;
      var myChart = this.$echarts.init(
        document.getElementById("day_warn_echarts")
      );
@@ -464,6 +588,40 @@
        ],
      };
      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],
      });
    },
    // 点击状态的处理事件
    stateHandling(row) {
      console.log(row);
      if (row.jtype == 0) {
        this.$refs.realPopupView.onItemGetParentData(row);
      } else {
        this.$router.push({ path: "/policeTracking/track", query: row });
      }
    },
  },
};
@@ -531,7 +689,7 @@
            background-color: #29c093;
          }
          &:nth-child(3)::before {
            background-color: #F48F57;
            background-color: #f48f57;
          }
          &:nth-child(4)::before {
            background-color: #dfdfdf;
@@ -554,6 +712,7 @@
      }
      .pie-total-container {
        display: flex;
        border: 1px solid transparent;
        padding: 20px 0;
      }
      .info-active {
@@ -592,8 +751,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 +764,7 @@
            color: #29c194;
          }
          .active-list:nth-child(2) > div:nth-child(2) span {
            color: #F48F57;
            color: #f48f57;
          }
        }
        .info-active-top,
@@ -727,4 +886,4 @@
    border-bottom: 0px !important;
  }
}
</style>
</style>