pc_manager_smoke/src/components/disposeSituation/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: 32px 0;"></div>

    <el-row>
      <el-col :span="3">
        1、扑救火灾
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible1"
          v-model="inputValue1"
          ref="saveTagInput1"
          size="small"
          @keyup.enter.native="handleInputConfirm(1)"
          @blur="handleInputConfirm(1)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(1)"
        >{{inputValue1}}</el-button>
        次
      </el-col>
      <el-col :span="3">
        5、维护社会治安
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible5"
          v-model="inputValue5"
          ref="saveTagInput5"
          size="small"
          @keyup.enter.native="handleInputConfirm(5)"
          @blur="handleInputConfirm(5)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(5)"
        >{{inputValue5}}</el-button>
        次
      </el-col>
    </el-row>

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

    <el-row>
      <el-col :span="3">
        2、转移安置人员
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible2"
          v-model="inputValue2"
          ref="saveTagInput2"
          size="small"
          @keyup.enter.native="handleInputConfirm(2)"
          @blur="handleInputConfirm(2)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(2)"
        >{{inputValue2}}</el-button>
        次
      </el-col>
      <el-col :span="3">
        6、发布信息
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible6"
          v-model="inputValue6"
          ref="saveTagInput6"
          size="small"
          @keyup.enter.native="handleInputConfirm(6)"
          @blur="handleInputConfirm(6)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(6)"
        >{{inputValue6}}</el-button>
        次
      </el-col>
    </el-row>

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

    <el-row>
      <el-col :span="3">
        3、救治伤员
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible3"
          v-model="inputValue3"
          ref="saveTagInput3"
          size="small"
          @keyup.enter.native="handleInputConfirm(3)"
          @blur="handleInputConfirm(3)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(3)"
        >{{inputValue3}}</el-button>
        次
      </el-col>
      <el-col :span="3">
        7、善后处置
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible7"
          v-model="inputValue7"
          ref="saveTagInput7"
          size="small"
          @keyup.enter.native="handleInputConfirm(7)"
          @blur="handleInputConfirm(7)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(7)"
        >{{inputValue7}}</el-button>
        次
      </el-col>
    </el-row>

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

    <el-row>
      <el-col :span="3">
        4、保护重要目标
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible4"
          v-model="inputValue4"
          ref="saveTagInput4"
          size="small"
          @keyup.enter.native="handleInputConfirm(4)"
          @blur="handleInputConfirm(4)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(4)"
        >{{inputValue4}}</el-button>
        次
      </el-col>
      <el-col :span="3">
        8、火场清理
      </el-col>
      <el-col :span="6">
        <el-input
          class="input-new-tag"
          v-if="inputVisible8"
          v-model="inputValue8"
          ref="saveTagInput8"
          size="small"
          @keyup.enter.native="handleInputConfirm(8)"
          @blur="handleInputConfirm(8)"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput(8)"
        >{{inputValue8}}</el-button>
        次
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 控制输入框和按钮框切换
      inputVisible1: false,
      inputVisible2: false,
      inputVisible3: false,
      inputVisible4: false,
      inputVisible5: false,
      inputVisible6: false,
      inputVisible7: false,
      inputVisible8: false,
      // 按钮框绑定的数据

      inputValue1: "", // 扑灭火灾次数
      inputValue2: "", // 转移安置人员人数
      inputValue3: "", // 救治伤员人数
      inputValue4: "", // 保护重要目标次数
      inputValue5: "", // 维护社会治安次数
      inputValue6: "", // 发布信息次数
      inputValue7: "", // 善后处置次数
      inputValue8: "", // 火场清理次数
      inputValue9: "", // 冒烟警告次数
    };
  },
  mounted() {
    this.getDisposeData();
  },
  methods: {
    // 点击按钮 切换输入框 并聚焦
    showInput(i) {
      if (i == 1) {
        this.inputVisible1 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput1.$refs.input.focus();
        });
      } else if (i == 2) {
        this.inputVisible2 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput2.$refs.input.focus();
        });
      } else if (i == 3) {
        this.inputVisible3 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput3.$refs.input.focus();
        });
      } else if (i == 4) {
        this.inputVisible4 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput4.$refs.input.focus();
        });
      } else if (i == 5) {
        this.inputVisible5 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput5.$refs.input.focus();
        });
      } else if (i == 6) {
        this.inputVisible6 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput6.$refs.input.focus();
        });
      } else if (i == 7) {
        this.inputVisible7 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput7.$refs.input.focus();
        });
      } else {
        this.inputVisible8 = true;
        this.$nextTick(() => {
          this.$refs.saveTagInput8.$refs.input.focus();
        });
      }
    },
    // 失去焦点或者回车 切换回按钮框 并更新数据
    handleInputConfirm(i) {
      if (i == 1) {
        this.inputVisible1 = false;
        this.inputValue1 = this.inputValue1;
      } else if (i == 2) {
        this.inputVisible2 = false;
        this.inputValue2 = this.inputValue2;
      } else if (i == 3) {
        this.inputVisible3 = false;
        this.inputValue3 = this.inputValue3;
      } else if (i == 4) {
        this.inputVisible4 = false;
        this.inputValue4 = this.inputValue4;
      } else if (i == 5) {
        this.inputVisible5 = false;
        this.inputValue5 = this.inputValue5;
      } else if (i == 6) {
        this.inputVisible6 = false;
        this.inputValue6 = this.inputValue6;
      } else if (i == 7) {
        this.inputVisible7 = false;
        this.inputValue7 = this.inputValue7;
      } else {
        this.inputVisible8 = false;
        this.inputValue8 = this.inputValue8;
      }
      this.reDisposeData();
    },
    // 获取应急处置信息
    async getDisposeData() {
      let res = await this.$axios({
        url: "/diseaseRight/emergencyDisposalStatistics/info",
        method: "get",
        // headers: {
        //   "Admin-Token": sessionStorage.getItem("token"),
        // },
      });
      // console.log(res);
      if (res.status == 200) {
        this.inputValue1 = res.data.data.numOfPutOutTheFire;
        this.inputValue2 = res.data.data.numOfTransfer;
        this.inputValue3 = res.data.data.numOfCure;
        this.inputValue4 = res.data.data.numOfImportantTarget;
        this.inputValue5 = res.data.data.numOfPublicSecurity;
        this.inputValue6 = res.data.data.numOfInfo;
        this.inputValue7 = res.data.data.numOfAftermath;
        this.inputValue8 = res.data.data.numOfFireClean;
        this.inputValue9 = res.data.data.numOfSmoke;
      } else {
        console.log("获取 应急处置信息 请求失败");
      }
    },
    // 修改应急处置信息
    async reDisposeData() {
      let data = {
        id: 1,
        numOfPutOutTheFire: this.inputValue1,
        numOfTransfer: this.inputValue2,
        numOfCure: this.inputValue3,
        numOfImportantTarget: this.inputValue4,
        numOfPublicSecurity: this.inputValue5,
        numOfInfo: this.inputValue6,
        numOfAftermath: this.inputValue7,
        numOfFireClean: this.inputValue8,
        numOfSmoke: this.inputValue9,
      };
      let res = await this.$axios({
        url: "/diseaseRight/emergencyDisposalStatistics/update",
        method: "put",
        data: 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.getDisposeData();
      }
    },
  },
};
</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;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: middle;
}
.button-new-tag {
  width: 90px;
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}
</style>