pc_manager_smoke/src/components/smokeWarn/index.vue

<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">冒烟告警</div>
      </el-col>
    </el-row>

    <!-- 分割线 -->
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">
    <div style="margin: 20px 0;"></div>

    <!-- 时间选择框 -->
    <el-row>
      <el-col :span="8">
        <el-date-picker
          v-model="select_datetime"
          type="daterange"
          align="center"
          unlink-panels
          range-separator="至"
          :start-placeholder="startTime"
          :end-placeholder="endTime"
          @change="dateChange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          class="shijian_plus"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <div class="smoke_title">次数统计:</div>
      </el-col>
      <el-col :span="4">
        <div class="smoke_num">{{totalCount}}次</div>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;"></div>
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">

    <!-- 表格区域 -->
    <el-row>
      <el-col
        :span="24"
        class="third-row"
      >

        <el-table
          :data="tableData"
          style="width: 100%;font-size: 14px;"
          highlight-current-row
          height="450"
        >
          <el-table-column
            prop="publishTime"
            label="发现时间"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="publishTime"
            label="推送时间"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="pushRecords"
            label="推送人员"
            align="center"
            :formatter="peopleData"
          >
          </el-table-column>
          <el-table-column
            prop="place"
            label="发现地点"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="回传图片"
            align="center"
          >
            <template slot-scope="{ row }">
              <img
                style="width: 82px; height: 60px"
                :src="row.images"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="操作详情"
            align="center"
          >
            <template slot-scope="{ row }">
              <div v-if="row.handleStatus==='1'">
                <el-button
                  type="danger"
                  @click="handleWarn(row.id)"
                >未处理</el-button>
              </div>
              <div v-else>
                <div>{{row.handleDesc}}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;"></div>

    <!-- 分页器 -->
    <el-row>
      <div class="pagination_smoke">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :total="totalCount"
          :page-size="pageSize"
          :current-page.sync="curPage"
          @current-change="changeCurPage"
        >
        </el-pagination>
      </div>

    </el-row>

    <!-- 处理警告弹窗 -->
    <el-dialog
      title="处置操作"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-input
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="textarea"
      >
      </el-input>

      <div style="margin: 20px 0;"></div>

      <div class="button_save">
        <el-button
          type="primary"
          @click="handleSave"
        >保存</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      select_datetime: [], // 选择的时间范围
      startTime: "",
      endTime: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      curPage: 1, // 当前页
      pageSize: 4, // 每页记录数
      totalCount: null, // 总条数
      tableData: [], // 列表
      dialogVisible: false,
      textarea: "", // 处理内容
      warningId: "",
    };
  },
  mounted() {
    this.getSmokeRecord();
  },
  methods: {
    // 换页逻辑
    changeCurPage(val) {
      this.handleCurrentChange(val);
    },
    // 更改时间逻辑
    dateChange(val) {
      if (val) {
        this.startTime = val[0];
        this.endTime = val[1];
        this.handleCurrentChange(1);
      } else {
        this.startTime = "";
        this.endTime = "";
        this.handleCurrentChange(1);
      }
    },
    // 整理参数
    handleCurrentChange(val) {
      this.curPage = val;
      this.getSmokeRecord();
    },
    // 处理表格数据
    peopleData(row) {
      let peopleArr = [];
      row.pushRecords.forEach((item) => {
        peopleArr.push(item.dutyName + "   ");
      });
      return peopleArr;
    },

    // 获取 冒烟警告记录列表
    async getSmokeRecord() {
      let params = {
        curPage: this.curPage,
        pageSize: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime,
      };
      let res = await this.$axios({
        url: "/diseaseRight/warningOfSmokeRecord/list",
        method: "get",
        params: params,
      });
      // console.log(res);
      if (res.status == 200) {
        this.tableData = res.data.data.list;
        this.totalCount = res.data.data.totalCount;
      } else {
        console.log("获取 冒烟警告记录列表 请求失败");
      }
    },
    // 处理警告
    handleWarn(id) {
      this.warningId = id;
      this.dialogVisible = true;
    },
    // 处理保存
    async handleSave() {
      let data = {
        warningId: this.warningId,
        handleDesc: this.textarea,
      };
      this.dialogVisible = false;
      let res = await this.$axios({
        url: "/diseaseRight/warningOfSmokeRecord/handle",
        method: "put",
        data,
        headers: {
          "Admin-Token": sessionStorage.getItem("token"),
        },
      });
      // console.log(res);
      if (res.status == 200 && res.data.success) {
        this.$message({
          showClose: true,
          message: "处置成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "处置失败",
          type: "error",
        });
      }
      this.handleCurrentChange(this.curPage);
    },
  },
};
</script>

<style scoped>
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.tag {
  width: 108px;
  height: 40px;
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 54px;
}
.shijian_plus.el-date-editor--daterange {
  width: 250px;
}
.smoke_title {
  color: #2784c1;
  line-height: 200%;
}
.smoke_num {
  line-height: 200%;
}
.third-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}
.button_save {
  margin-left: 40%;
}
.pagination_smoke {
  text-align: center;
}
</style>