VehicleMonitor-WEB/src/views/alarmInformation/index.vue

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div style="background: #fff">
        <div style="height: 74px; display: flex; align-items: center">
          <el-select
            style="width: 220px; margin-left: 20px; margin-right: 20px"
            v-model="railwayCode"
            placeholder="请选择报警线路"
            clearable
          >
            <el-option
              v-for="(item, index) in routeList"
              :key="index"
              :label="item.railwayName"
              :value="item.railwayCode"
            >
            </el-option>
          </el-select>

          <el-select
            v-model="lineDir"
            placeholder="请选择行别"
            style="width: 220px; margin-right: 20px"
            clearable
          >
            <el-option
              v-for="(item, index) in lineType"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>

          <el-select
            v-model="isLock"
            placeholder="请选择解除状态"
            style="width: 220px; margin-right: 20px"
            clearable
          >
            <el-option
              v-for="(item, index) in zhangtai"
              :key="index"
              :label="item.label"
              :value="item.value"
              :clearable="true"
            >
            </el-option>
          </el-select>

          <div
            v-if="searchShow == true"
            style="display: flex"
            justify="end"
            type="flex"
          >
            <div class="sp-button-submit" type="primary" @click="msgAlarmList">
              查询
            </div>
            <div class="sp-button-reset" @click="resetForm()">重置</div>
            <!-- <div class="sp-button-submit" @click="uploadOut">导出</div> -->
            <el-button
              v-if="searchShow == false"
              @click="searchShow = true"
              type="text"
              style="color: #2766dd"
              icon="el-icon-arrow-up"
              >收起</el-button
            >
            <el-button
              v-if="searchShow == true"
              @click="searchShow = false"
              type="text"
              icon="el-icon-arrow-down"
              style="color: #2766dd"
              >展开</el-button
            >
          </div>
        </div>

        <div
          v-if="searchShow == false"
          style="
            display: flex;
            align-items: center;
            margin-bottom: 17px;
            height: 40px;
          "
        >
          <el-date-picker
            style="width: 460px; margin-right: 20px; margin-left: 20px"
            v-model="value1"
            end-placeholder="结束日期"
            range-separator="至"
            start-placeholder="开始日期"
            clearable
            value-format="yyyy-MM-dd"
            type="daterange"
            :clearable="true"
          >
          </el-date-picker>
          <!-- <el-input
              v-model="alarmMileBD"
              placeholder="请输入里程位置"
              suffix-icon="el-icon-search"
              style="width: 100%"
              clearable
            >
            </el-input> -->

          <el-select
            v-if="searchShow == false"
            v-model="alarmType"
            placeholder="请选择报警类型"
            style="width: 220px; margin-right: 20px"
            clearable
          >
            <el-option
              v-for="(item, index) in damageList"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </div>

        <div v-if="searchShow == false">
          <div
            style="
              display: flex;
              align-items: center;
              padding-bottom: 17px;
              margin-left: 20px;
            "
          >
            <!-- <el-input
              v-model="beginMile"
              placeholder="请输入起始里程"
              @input="changeValue1"
              style="width: 220px; margin-left: 20px"
              clearable
            >
              <template slot="append">km</template></el-input
            > -->
            <!-- <el-select
                v-model="beginMile"
                placeholder="请选择起始里程"
                style="width: 250px"
                clearable
              >
                <el-option
                  v-for="(item, index) in mileageList"
                  :key="index"
                  :clearable="true"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select> -->
            <!-- <div
              style="
                width: 10px;
                height: 1px;
                background-color: #888;
                margin: 0 5px;
              "
            ></div> -->
            <!-- <el-input
              v-model="endMile"
              placeholder="请输入结束里程"
              @input="changeValue2"
              style="width: 220px; margin-right: 20px"
              clearable
            >
              <template slot="append">km</template></el-input
            > -->
            <el-input
              v-model="alarmMileBD"
              placeholder="请输入里程位置"
              clearable
              oninput="value=value.replace(/[^\d.]/g, '')"
              style="width: 220px; margin-right: 20px"
            >
              <template slot="append">km</template></el-input
            >
            <el-select
              v-model="monitorSystemName"
              placeholder="请选择监测系统名称"
              style="width: 220px; margin-right: 20px"
              filterable
            >
              <el-option
                v-for="item in monitorNameData"
                :key="item.monitorSystemName"
                :label="item.monitorSystemName"
                :value="item.clientId"
              />
            </el-select>
            <div
              v-if="searchShow == false"
              style="display: flex; align-items: center"
            >
              <div class="sp-button-submit searth_left" @click="msgAlarmList">
                查询
              </div>
              <div class="sp-button-reset" @click="resetForm()">重置</div>

              <el-button
                v-if="searchShow == false"
                @click="searchShow = true"
                type="text"
                style="color: #2766dd"
                icon="el-icon-arrow-up"
                >收起</el-button
              >
              <el-button
                v-if="searchShow == true"
                @click="searchShow = false"
                type="text"
                icon="el-icon-arrow-down"
                style="color: #2766dd"
                >展开</el-button
              >
            </div>
          </div>

          <!-- <el-col :span="6"></el-col> -->
        </div>
      </div>
    </div>
    <el-card class="cardHeadr" style="margin-top: 15px; padding-top: 0">
      <!-- <div style="font-size: 18px">
          告警:<span style="font-size: 24px; color: red"> {{ total }}</span>
        </div> -->
      <div style="height: 64px; display: flex; align-items: center">
        <div class="export" @click="uploadOut">
          <span class="icon font_family">&#xe605;</span>
          导出
        </div>
      </div>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          label="报警时间"
          prop="alarmTime"
          width="180"
          fixed
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          label="报警线路"
          prop="railwayName"
          fixed
        ></el-table-column> -->
        <el-table-column
          label="来源"
          prop="sourceName"
          width="140"
          fixed
        ></el-table-column>
        <el-table-column align="center" label="报警类型" prop="alarmTypeName" fixed>
          <!-- <template slot-scope="scope">
            <div>
              {{
                scope.row.alarmType == 1
                  ? "泥石流"
                  : scope.row.alarmType == 2
                  ? "异物侵线"
                  : "异物侵入"
              }}
            </div>
          </template> -->
        </el-table-column>
        <!-- <el-table-column
          align="center"
          label="报警病害属性"
          prop="alarmAttr"
          show-overflow-tooltip="true"
        ></el-table-column> -->

        <el-table-column label="行别" align="center" prop="lineDir">
          <template slot-scope="scope">
            <div style="text-align: center">
              {{
                scope.row.lineDir === 1
                  ? "上行"
                  : scope.row.lineDir === 2
                  ? "下行"
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="里程位置(km)"
          align="center"
          prop="alarmMiles"
        ></el-table-column>
        <!-- <el-table-column label="起里里程(km)" prop="beginMile"></el-table-column>
          <el-table-column label="结束里程(km)" prop="endMile"></el-table-column> -->
        <!-- <el-table-column label="报警次数" align="center" prop="alarmCount">
            <template slot-scope="scope">
              <div style="color: red">{{ scope.row.alarmCount }}</div>
            </template>
          </el-table-column> -->
        <!-- <el-table-column label="解除状态" align="center">
          <template slot-scope="scope">
            <div>
              {{
                scope.row.isLock === 1
                  ? "已解除"
                  : scope.row.isLock === 2
                  ? "未解除"
                  : "-"
              }}
            </div>
          </template>
        </el-table-column> -->

        <el-table-column
          label="报警内容"
          show-overflow-tooltip="true"
          align="center"
          prop="content"
        
        >
          <template slot-scope="scope">
            <div
              style="
                max-width: 10em;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.content }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="推送车次"
          align="center"
       
          prop="trainNumName"
        >
        <template slot-scope="scope">
          <el-button
                v-if='scope.row.trainNumName'
                type="text"
                style="text-align: center; color: #2766dd" 
                @click="detailsBtn(scope.row)"               
                >{{ scope.row.trainNumName }}{{ '...' }}</el-button
              >
        </template>
      </el-table-column>
        <el-table-column label="解除状态" align="center" prop="isRelease">
          <template slot-scope="scope">
            {{
              scope.row.isRelease === 1
                ? "已解除"
                : scope.row.isRelease === 2
                ? "未解除"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="解除说明"
          align="center"
        
          prop="releaseContent"
        ></el-table-column>
        <el-table-column
          label="解除时间"
          align="center"
        
          prop="releasedTime"
        ></el-table-column>
      
        <el-table-column label="操作" align="center" width="280" prop="text13">
          <template slot-scope="scope">
            <div>
              <!-- <el-button
                style="color: #2766dd"
                v-if="scope.row.isLock == 2"
                type="text"
                @click="release(scope.row.id)"
                >解除</el-button
              > -->

              <el-button
                type="text"
                style="text-align: center; color: #2766dd"
                @click="
                  seeDetail(scope.row.id, scope.row.railwayCode, scope.row)
                "
                >查看详情</el-button
              >
              <!-- <el-button
                type="text"
                style="text-align: center; color: #2766dd" 
                @click="detailsBtn(scope.row)"               
                >推送详情</el-button
              > -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row justify="end" style="margin-top: 10px" type="flex">
        <el-pagination
          :page-size="100"
          :page-sizes="[10, 15, 20]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <detailsDialog :detailsData="detailsData" v-if="detailsData.dialogVisible"></detailsDialog>
    <warningDispose
      v-if="warningDisposeModal.show"
      :id="warningDisposeModal.id"
      @close="warningDisposeModal.show = false"
      @success="releaseSuccess"
    ></warningDispose>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import warningDispose from "@/components/warning/warningDispose.vue";
import detailsDialog from './components/detailsDialog.vue'
import {
  baseRailwayManagement,
  dataType,
  msgAlarmList,
  getCameraDataUpLoadOut,
  releaseAlarm,
  alarmMessageList
} from "@/api/alarmList";
import { monitorNameList } from "@/api/monitor";
export default {
  name: "cart",
  components: { warningDispose,detailsDialog },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      detailsData:{
        dialogVisible:false,
        alarmId:''
      },
      warningModal: {
        show: true,
      },
      isShow: false,
      searchShow: true,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      value1: "",
      value: "",
      input: "",
      zhangtai: [
        {
          value: "1",
          label: "已解除",
        },
        {
          value: "2",
          label: "未解除",
        },
      ],
      monitorNameData: [],
      tableData: [],
      routeList: [],
      lineType: [],
      damageList: [],
      mileageList: [],
      railwayCode: "",
      lineDir: "",
      alarmType: "",
      alarmMileBD: "",
      monitorSystemName: "",
      beginMile: "",
      endMile: "",
      beginAlarmTime: "",
      endAlarmTime: "",
      isLock: "",
      warningDisposeModal: {
        show: false,
        id: "",
      },
    };
  },
  created() {    
    if(this.$route.params.pageNum) {          
      this.isLock = this.$route.params.isLock + '' 
      this.monitorSystemName = this.$route.params.source
    }
    this.getMonitoreName();
    this.msgAlarmList();
    this.baseRailwayManagement();
    this.dataType("sys_line_dir");
    this.dataType("sys_alarm_type");
    this.dataType("sys_mileage");
    if(this.$route.query.zhangtai){
      this.isLock = "2";
    this.msgAlarmList();
    }
    
  },
  methods: {
    detailsBtn(row) {      
      this.detailsData.alarmId = row.alarmId
      this.detailsData.dialogVisible = true
    },
    getMonitoreName() {
      let params = {};
      monitorNameList(params).then((response) => {
        this.monitorNameData = response.data;
      });
    },
    imagePreview(images) {
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: 0, // 多图预览，默认展示第二张图片
        imgList: images, // 需要预览的多图数组
      });
    },
    seeDetail(val, val1, row) {
      sessionStorage.row = JSON.stringify(row);
      this.$router.push({
        path: "/alarmDetail",
        query: {
          id: val,
          cameraCode: val1,
          alarmId: row.alarmId,
        },
      });
    },
    // uploadOut: function () {
    //   getCameraDataUpLoadOut({}).then((res) => {
    //     this.resolveBlob(res);
    //   });
    // },
    uploadOut: function () {
      getCameraDataUpLoadOut({}).then((res) => {
        this.resolveBlob(res);
      });
    },
    resolveBlob(res) {
      const link = document.createElement("a");
      link.style.dispaly = "none";
      let binaryData = [];
      binaryData.push(res);
      link.href = window.URL.createObjectURL(new Blob(binaryData));
      // link.href = URL.createObjectURL(res);
      link.setAttribute("download", "报警信息列表.xlsx");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

    resetForm() {
      (this.railwayCode = ""),
        (this.lineDir = ""),
        (this.alarmType = ""),
        (this.alarmMileBD = "");
      this.monitorSystemName = "";
      (this.beginMile = ""),
        (this.endMile = ""),
        (this.beginAlarmTime = ""),
        (this.endAlarmTime = "");
      this.value1 = "";
      this.isLock = "";
      this.msgAlarmList();
    },
    getImgUrl(img) {
      return "http://124.71.171.71:18801/picbucket" + img;
    },
    release(val) {
      if (val) {
        this.warningDisposeModal.id = val;
        this.warningDisposeModal.show = true;
      }
    },
    releaseSuccess() {
      this.warningDisposeModal.id = "";
      this.warningDisposeModal.show = false;
      this.msgAlarmList();
    },
    dataType(val) {
      dataType(val).then((res) => {
        console.log(res);
        if (val === "sys_line_dir") {
          this.lineType = [];
          this.lineType = res.data;
          this.$set(this.lineType);
        } else if ("sys_alarm_type" === val) {
          this.damageList = [];
          this.damageList = res.data;
          this.$set(this.damageList);
        } else if ("sys_mileage" === val) {
          this.mileageList = [];
          this.mileageList = res.data;
          this.$set(this.mileageList);
        }
      });
    },
    baseRailwayManagement() {
      baseRailwayManagement().then((res) => {
        console.log(res);
        this.routeList = [];
        this.routeList = res.data;
        this.$set(this.routeList);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.msgAlarmList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.msgAlarmList();
    },

    changeValue(value) {
      this.alarmMileBD = /^[0-9]*$/.test(parseInt(value))
        ? String(parseInt(value)).replace(".", "")
        : "";
    },
    changeValue1(value) {
      this.beginMile = /^[0-9]*$/.test(parseInt(value))
        ? String(parseInt(value)).replace(".", "")
        : "";
    },
    changeValue2(value) {
      this.endMile = /^[0-9]*$/.test(parseInt(value))
        ? String(parseInt(value)).replace(".", "")
        : "";
    },

    msgAlarmList() {
      // if (this.alarmMileBD && !/^(\d+.\d{1,3}|\d+)$/.test(this.alarmMileBD)) {
      //   return this.$message({
      //     type: "error",
      //     message: "请输入正确的里程",
      //   });
      // }
      // if (this.beginMile && !/^(\d+.\d{1,3}|\d+)$/.test(this.beginMile)) {
      //   return this.$message({
      //     type: "error",
      //     message: "请输入正确的起始里程",
      //   });
      // }
      // if (this.endMile && !/^(\d+.\d{1,3}|\d+)$/.test(this.endMile)) {
      //   return this.$message({
      //     type: "error",
      //     message: "请输入正确的结束里程",
      //   });
      // }

      let beginAlarmTime = undefined;
      let endAlarmTime = undefined;
      if (this.value1) {
        beginAlarmTime = this.value1[0];
        endAlarmTime = this.value1[1];
      }
      msgAlarmList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        alarmType: this.alarmType,
        railwayCode: this.railwayCode,
        beginMile: this.beginMile,
        endMile: this.endMile,
        lineDir: this.lineDir,
        isRelease: this.isLock,
        alarmMileBD: this.alarmMileBD,
        beginAlarmTime: beginAlarmTime,
        endAlarmTime: endAlarmTime,
        source: this.monitorSystemName,
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = [];
          this.tableData = res.data.records;
          this.$set(this.tableData);
          this.total = res.data.total;
        } else {
          this.$message({
            message: res.mag,
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .searth_left {
  margin: 0;
}
::v-deep .el-card__body {
  padding: 0 20px 20px 20px;
}
.dashboard {
  &-container {
    margin: 30px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-image-viewer__close {
  color: blue;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus {
  box-shadow: none;
}
.el-card {
  border: 1px solid#FFFF;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
::v-deep .el-date-editor .el-range__icon {
  top: 0;
}
.export {
  // margin: 23px 6px;
  cursor: pointer;
  text-align: center;
  width: 98px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid #abc7fd;
  line-height: 34px;
  font-weight: 400;
  font-size: 14px;
  color: #2250c8;
  background-color: #e7eeff;
}
.export:hover {
  color: #fff;
  border: 1px solid #2250c8;
  background-color: #2250c8;
}
.export:active {
  background-color: #194da4;
  border: 1px solid #194da4;
}
</style>