admin-fiveFollowing/src/views/siteDistribution/dialogComponent.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="showDialog"
    width="640px"
    @close="closeDialog"
    @open="open"
  >
    <el-form
      ref="formInfo"
      :model="form"
      class="demo-form-inline alarmStatusDialog"
      label-width="100px"
    >
      <div class="topInfo underline">
        <el-form-item label="告警时间：" prop="soeTime">
          {{ itemInfo.soeTime }}
        </el-form-item>
        <!-- <el-form-item label="告警历时：" prop="stationCode">3分钟</el-form-item> -->
        <!-- <el-form-item label="关联告警：" prop="stationAddress">
          2021-09-14 14:54:59
        </el-form-item> -->
        <!-- <div class="deviceTit"></div> -->
        <el-button type="success" class="lubo" style="margin-bottom: 15px">
          {{ itemInfo.measDesc }}
        </el-button>
        <div
          class="handleStatus"
          :style="{
            color:
              itemInfo.handlingStatus == 1
                ? '#8DCF6E'
                : itemInfo.handlingStatus == 2
                ? '#FF747B'
                : '#5c88fa',
          }"
        >
          {{
            itemInfo.handlingStatus == 0
              ? '未处理'
              : itemInfo.handlingStatus == 1
              ? '已处理'
              : itemInfo.handlingStatus == 2
              ? '待确认'
              : itemInfo.handlingStatus == 3
              ? '自动恢复'
              : '过期失效'
          }}
        </div>
      </div>

      <div class="basicTit">基本信息</div>

      <el-form-item label="站点名称：" prop="pointNum">
        {{ form.siteName }}
      </el-form-item>
      <el-form-item label="台区展示：" prop="deviceNum">
        {{ form.stationArea }}
      </el-form-item>
      <el-form-item label="线路：" prop="deviceNum">
        {{ form.route }}
      </el-form-item>
      <el-form-item label="告警信息：" prop="deviceNum">
        {{ itemInfo.measDesc.split(itemInfo.measDesc.slice(-2))[0] }}
      </el-form-item>
      <el-form-item label="告警状态：" prop="deviceNum">
        {{ itemInfo.measDesc.slice(-2) }}
      </el-form-item>
      <el-form-item label="采集终端：" prop="deviceNum">
        {{ form.deviceCode }}
      </el-form-item>
      <el-form-item label="站点地址：" prop="deviceNum">
        {{ form.siteAddress }}
      </el-form-item>
      <el-form-item label="联系人：" prop="deviceNum">
        {{ form.sparUserName }}
      </el-form-item>
      <el-form-item label="联系方式：" prop="deviceNum">
        {{ form.handlerPhone }}
      </el-form-item>

      <div class="basicTit">处理信息</div>

      <el-form-item
        label="处理内容："
        prop="handlingContent"
        style="margin-bottom: 20px"
      >
        <el-input
          v-model="textarea"
          :rows="2"
          type="textarea"
          placeholder="请输入..."
          v-if="itemInfo.handlingStatus != 1"
        />
        <span v-if="itemInfo.handlingStatus == 1">
          {{
            itemInfo.handlingContent === '' ? '无' : itemInfo.handlingContent
          }}
        </span>
      </el-form-item>

      <el-form-item label="现场照片：" prop="deviceNum">
        <el-upload
          :action="uploadUrl"
          :on-success="handleUpAvatar"
          :on-remove="handleRemove"
          :show-file-list="true"
          list-type="picture-card"
          :limit="3"
          :on-preview="handlePictureCardPreview"
          :headers="{ accessToken: [accessToken] }"
          v-if="itemInfo.handlingStatus != 1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog title="查看图片" v-model="dialogVisible" width="400px">
          <img
            style="width: 100%"
            :src="
              itemInfo.handlingStatus == 1
                ? fileImages + form.image
                : dialogImageUrl
            "
            alt=""
          />
        </el-dialog>
        <img
          @click="handlePictureCardPreview"
          v-if="itemInfo.handlingStatus == 1"
          style="width: 90px"
          :src="fileImages + form.image"
          alt=""
        />
      </el-form-item>
      <br />
      <br />
      <br />
      <div style="text-align: right" v-if="itemInfo.handlingStatus != 1">
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="submitForm()">确定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect, reactive, toRefs } from 'vue'
import * as api from '@/api/alarmManage/index'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'DialogComponent',
  emits: ['closeDialog', 'listSelect'],
  props: {
    show_Dialog: Boolean,
    dialogTitle: {
      type: String,
      default: '告警详情',
    },
    itemInfo: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  setup(props, { emit }) {
    const store = useStore()
    const showDialog = ref(false)
    const formInfo = ref(null)
    const form = ref([])
    const textarea = ref('')
    const dialogVisible = ref(false)
    const accessToken = ref(store.state.user.accessToken)
    const dialogImageUrl = ref('')
    const fileImages = ref(window.PLATFROM_CONFIG.images)
    const image = ref('')
    const imageFile = ref([])

    const dataSet = reactive({
      uploadUrl:
        window.PLATFROM_CONFIG.baseUrl +
        '/patrolInspectionDevice/pictureUpload',
      fileList: [],
    })

    //删除照片
    function handleRemove(res) {
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i
        }
        return -1
      }
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val)
        if (index > -1) {
          this.splice(index, 1)
        }
      }
      dataSet.fileList.remove(res.name)
    }

    const handleUpAvatar = (res, file) => {
      image.value = res.data
      imageFile.value = file
    }

    const handlePictureCardPreview = (file) => {
      dialogImageUrl.value = file.url
      dialogVisible.value = true
    }

    const resetForm = () => {
      formInfo.value.resetFields()
    }

    const roleValid = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('角色不能为空'))
      } else {
        callback()
      }
    }

    // onSelectedDrug(event) {
    //   this.siteList = event;
    //   console.log(this.siteList);
    // },
    // 保存操作
    const submitForm = () => {
      api
        .alarmPower({
          id: props.itemInfo.id,
          handlingContent: textarea.value,
          image: image.value,
          handlingStatus: 1,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            ElMessage({
              message: '操作成功！',
              type: 'success',
            })
            textarea.value = ''
            closeDialog()
            emit('listSelect')
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    const open = () => {
      api.alarmPower1(props.itemInfo.id).then((requset) => {
        if (requset.status === 'SUCCESS') {
          form.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    // 关闭弹框
    const closeDialog = () => {
      showDialog.value = false
      emit('closeDialog', false)
    }

    watchEffect((fn, options) => {
      fn, options
      showDialog.value = props.show_Dialog
    })

    return {
      open,
      handleUpAvatar,
      handleRemove,
      handlePictureCardPreview,
      resetForm,
      roleValid,
      submitForm,
      closeDialog,

      ...toRefs(dataSet),
      accessToken,
      dialogImageUrl,
      fileImages,
      image,
      disabled: false,
      dialogVisible,
      textarea,
      showDialog,
      form,
      formInfo,
      options: [
        {
          value: '选项1',
          label: '站点一',
        },
        {
          value: '选项2',
          label: '站点二',
        },
        {
          value: '选项3',
          label: '站点三',
        },
        {
          value: '选项4',
          label: '站点四',
        },
        {
          value: '选项5',
          label: '站点五',
        },
      ],
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

.el-form-item {
  margin-left: 0 !important;
}
</style>
<style>
.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {
}
</style>