jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/DialogDeviceOffline/index.vue

<template>
  <Dialog v-model="modelVisible" style="z-index: 2050;"  title="设备异常" width="650px">
    <div class="dialogDeviceOffline" >
      <!-- <Form ref="FormConfigRef" :formList="formList" :dFormData="info" label-width="110px" />
      {{info}} -->
      <el-row style="width:90%;margin-top:15px;margin-right:10%;">
        <el-col :span="4" style="text-align:right;color:#00d1ff;">设备名称：</el-col>
        <el-col :span="6">{{info.deviceName}}</el-col>
        <el-col :span="3" style="text-align:right;color:#00d1ff;">设备类型：</el-col>
        <el-col :span="6">{{info.deviceTypeName}}</el-col>
      </el-row>
      <el-row style="width:90%;margin-top:15px;margin-right:10%;">
        <el-col :span="4" style="text-align:right;color:#00d1ff;">方向：</el-col>
        <el-col :span="6">{{info.directionName}}</el-col>
        <el-col :span="3" style="text-align:right;color:#00d1ff;">桩号：</el-col>
        <el-col :span="6">{{info.stakeMark}}</el-col>
      </el-row>
      <el-row style="width:90%;margin-top:15px;margin-right:10%;">
        <el-col :span="4" style="text-align:right;color:#00d1ff;">设备归属类型：</el-col>
        <el-col :span="6">{{info.facilitiesTypeName}}</el-col>
        <el-col :span="3" style="text-align:right;color:#00d1ff;">安装位置：</el-col>
        <el-col :span="6">{{info.installationSite}}</el-col>
      </el-row>
      <el-row style="width:90%;margin-top:15px;margin-right:10%;">
        <el-col :span="4" style="text-align:right;color:#00d1ff;">时间：</el-col>
        <el-col :span="6">{{info.warningTime}}</el-col>
        <el-col :span="3" style="text-align:right;color:#00d1ff;">状态：</el-col>
        <el-col :span="6">{{info.stateName}}</el-col>
      </el-row>
    </div>
    <template #footer v-hasPermi="['home:notice:processDeviceOffline']">
      <Button :style="{ marginTop: '30px', backgroundColor: '#0e708b', padding: '0 24px' }"
        @click.native="modelVisible = false">取消</Button>
      <Button :loading="submitLoading"  v-if="info.status==='0'" style="margin-top: 30px;padding: 0 24px"
        @click.native="updateEvent">处置</Button>
      
    </template>
  </Dialog>
</template>

<script>
import Dialog from "@screen/components/Dialog/index";
import Form from "@screen/components/FormConfig";
import Button from "@screen/components/Buttons/Button.vue";
import request from "@/utils/request";
var moment = require("moment");
import {
  deviceTypeOptions
} from "@screen/utils/enum.js";

export default {
  name: "DialogDeviceOffline",
  components: {
    Dialog,
    Form,
    Button,
  },
  model: {
    prop: "visible",
    event: "update:value",
  },
  props: {
    visible: Boolean,
    activeId: String,
   
  },
 
  data() {
    return {
      info: {},
      source:{},
      submitLoading: false,
    };
  },
  computed: {
    modelVisible: {
      get() {
        if (this.visible) {
            this.getInfo(this.activeId)  
        }
        return this.visible;
      },
      set(val) {
        this.$emit("update:value", val);
      },
    },
  },
  methods: {
    getInfo(id) {
      if(id && id !== ''){

        request({
          url:`deviceOfflineRecord/${id}`,
          method:'get',
        }).then(res=>{
          this.source = res.data;
          const e = _.cloneDeep(res.data);
          const enum_facilitiesType = {
              0: '默认',
              1: '道路沿线',
              2: '桥梁',
              3: '隧道',
              4: '收费广场',
              5: '收费站',
              6: '服务区'
          }
          e.deviceTypeName = _.find(deviceTypeOptions,{value:parseInt(e.deviceType)}).label
          e.directionName = e.direction==='1'?'菏泽方向':'济南方向'
          e.warningTime = moment(e.createTime).format('YYYY-MM-DD HH:mm:ss')
          e.stateName = (e.status==='0'?'未处理':(e.status==='1'?'已处理':'自动处理'))
          e.facilitiesTypeName = enum_facilitiesType[e.facilitiesType]
          this.info = e;
        })
      }
    },

    updateEvent() {
      this.submitLoading = true;
      const self = this;
      this.$confirm(`是否确认处理设备【${this.source['deviceName']}】异常?`, "异常处理", {
          confirmButtonText: "处理",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          request({
            url: `/deviceOfflineRecord`,
            method: 'put',
            data:{
              ...self.source,
              status:'1'
            }
          }).then(res=>{
            self.$message.success('操作成功')
            self.submitLoading = false;
               self.modelVisible = false;
          })
        }).catch(function() {});

    },
  },
  
};
</script>

<style lang="scss" scoped>
.dialogDeviceOffline {
  display: flex;
  gap: 9px;
  width: 905px;
  // height: 768px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:18px;
}
</style>