|
@@ -1,228 +1,299 @@
|
|
|
<template>
|
|
|
- <transition name="dialog-fade">
|
|
|
- <el-dialog
|
|
|
- v-if="showDialog"
|
|
|
- :title="dialogTitle"
|
|
|
- class="dialog-component"
|
|
|
- v-model="showDialog"
|
|
|
- width="640px"
|
|
|
- @close="closeDialog(0)"
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogTitle"
|
|
|
+ v-model="showDialog"
|
|
|
+ width="640px"
|
|
|
+ @close="closeDialog"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formInfo"
|
|
|
+ :model="form"
|
|
|
+ class="demo-form-inline alarmStatusDialog"
|
|
|
+ label-width="100px"
|
|
|
>
|
|
|
- <el-form
|
|
|
- ref="formInfo"
|
|
|
- :model="formInfo"
|
|
|
- class="demo-form-inline alarmStatusDialog"
|
|
|
- label-width="100px"
|
|
|
- :rules="rules"
|
|
|
- >
|
|
|
- <div class="topInfo underline">
|
|
|
- <el-form-item label="卡号:" prop="stationName">
|
|
|
- 2021-09-14 14:53:28
|
|
|
- </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">故障录播</el-button>
|
|
|
- <div class="handleStatus">未处理</div>
|
|
|
+ <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">
|
|
|
+ {{ 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>
|
|
|
+ <div class="basicTit">基本信息</div>
|
|
|
|
|
|
- <el-form-item label="站点名称:" prop="pointNum">
|
|
|
- 测试站点1
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="台区展示:" prop="deviceNum">
|
|
|
- 测试台区1
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="线路:" prop="deviceNum"> 进线二 </el-form-item>
|
|
|
- <el-form-item label="告警信息:" prop="deviceNum"> 低压 </el-form-item>
|
|
|
- <el-form-item label="告警状态:" prop="deviceNum"> 动作 </el-form-item>
|
|
|
- <el-form-item label="采集终端:" prop="deviceNum">
|
|
|
- DA00013433
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="站点地址:" prop="deviceNum">
|
|
|
- 沪太路8786弄155号
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="联系人:" prop="deviceNum"> 张三 </el-form-item>
|
|
|
- <el-form-item label="联系方式:" prop="deviceNum">
|
|
|
- 12345675223
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item label="站点名称:" prop="pointNum">测试站点1</el-form-item>
|
|
|
+ <el-form-item label="台区展示:" prop="deviceNum">测试台区1</el-form-item>
|
|
|
+ <el-form-item label="线路:" prop="deviceNum">进线二</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">
|
|
|
+ {{ itemInfo.deviceCode }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="站点地址:" prop="deviceNum">
|
|
|
+ 沪太路8786弄155号
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人:" prop="deviceNum">张三</el-form-item>
|
|
|
+ <el-form-item label="联系方式:" prop="deviceNum">
|
|
|
+ {{ itemInfo.handlerPhone }}
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <div class="basicTit">处理信息</div>
|
|
|
+ <div class="basicTit">处理信息</div>
|
|
|
|
|
|
- <el-form-item label="处理内容" prop="handleCont" style="margin-bottom:20px">
|
|
|
- <el-input
|
|
|
- v-model="textarea"
|
|
|
- :rows="2"
|
|
|
- type="textarea"
|
|
|
- placeholder="Please input"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="处理内容:"
|
|
|
+ prop="handlingContent"
|
|
|
+ style="margin-bottom: 20px"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="textarea"
|
|
|
+ :rows="2"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="Please input"
|
|
|
+ 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="#"
|
|
|
- list-type="picture-card"
|
|
|
- :auto-upload="false"
|
|
|
- :limit="3"
|
|
|
- >
|
|
|
- <!-- slot="default" -->
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
- <!-- :default-slot="{ file }" -->
|
|
|
- <div >
|
|
|
- <!-- <img
|
|
|
- class="el-upload-list__item-thumbnail"
|
|
|
- :src="file.url"
|
|
|
- alt=""
|
|
|
- /> -->
|
|
|
- <span class="el-upload-list__item-actions">
|
|
|
- <span
|
|
|
- class="el-upload-list__item-preview"
|
|
|
- @click="handlePictureCardPreview(file)"
|
|
|
- >
|
|
|
- <!-- <i class="el-icon-zoom-in"></i> -->
|
|
|
- </span>
|
|
|
- <span
|
|
|
- v-if="!disabled"
|
|
|
- class="el-upload-list__item-delete"
|
|
|
- @click="handleRemove(file)"
|
|
|
- >
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- <el-dialog v-model="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
- </el-dialog>
|
|
|
- </el-form-item>
|
|
|
- <br />
|
|
|
- <br />
|
|
|
- <br />
|
|
|
- <div style="text-align: right">
|
|
|
- <el-button @click="closeDialog(0)">取消</el-button>
|
|
|
- <el-button type="primary" @click="submitForm('formInfo')"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </el-dialog>
|
|
|
- </transition>
|
|
|
+ <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 + 'chart3-1.png'
|
|
|
+ : dialogImageUrl
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+ <img
|
|
|
+ @click="handlePictureCardPreview"
|
|
|
+ v-if="itemInfo.handlingStatus == 1"
|
|
|
+ style="width: 90px"
|
|
|
+ :src="fileImages + 'chart3-1.png'"
|
|
|
+ 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>
|
|
|
-export default {
|
|
|
- name: "DialogComponent",
|
|
|
+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: "告警详情",
|
|
|
+ default: '告警详情',
|
|
|
},
|
|
|
itemInfo: {
|
|
|
type: Object,
|
|
|
default: function () {
|
|
|
- return {};
|
|
|
+ return {}
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- disabled: false,
|
|
|
- textarea: "请输入",
|
|
|
- showDialog: false,
|
|
|
- formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "选项1",
|
|
|
- label: "站点一",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项2",
|
|
|
- label: "站点二",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项3",
|
|
|
- label: "站点三",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项4",
|
|
|
- label: "站点四",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项5",
|
|
|
- label: "站点五",
|
|
|
- },
|
|
|
- ],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const store = useStore()
|
|
|
+ const showDialog = ref(false)
|
|
|
+ const formInfo = ref(null)
|
|
|
+ const form = JSON.parse(JSON.stringify(props.itemInfo))
|
|
|
+ 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('')
|
|
|
|
|
|
- rules: {
|
|
|
-
|
|
|
- handleCont: [
|
|
|
- { required: true, message: "请输入处理内容", trigger: "blur" },
|
|
|
- { trigger: "blur" },
|
|
|
- ],
|
|
|
- unloadImg: [
|
|
|
- { required: true, message: "请上传图片", trigger: "blur" },
|
|
|
- { trigger: "blur" },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ const dataSet = reactive({
|
|
|
+ uploadUrl:
|
|
|
+ window.PLATFROM_CONFIG.baseUrl +
|
|
|
+ '/patrolInspectionDevice/pictureUpload',
|
|
|
+ fileList: [],
|
|
|
+ })
|
|
|
|
|
|
- handleRemove(file) {
|
|
|
- console.log(file);
|
|
|
- },
|
|
|
- handlePictureCardPreview(file) {
|
|
|
- this.dialogImageUrl = file.url;
|
|
|
- this.dialogVisible = true;
|
|
|
- },
|
|
|
+ //删除照片
|
|
|
+ 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)
|
|
|
+ }
|
|
|
|
|
|
- resetForm(formName) {
|
|
|
- this.$refs[formName].resetFields();
|
|
|
- },
|
|
|
+ const handleUpAvatar = (res, file) => {
|
|
|
+ // console.log(res, file)
|
|
|
+ file
|
|
|
+ image.value = res.data
|
|
|
+ }
|
|
|
+
|
|
|
+ const handlePictureCardPreview = (file) => {
|
|
|
+ dialogImageUrl.value = file.url
|
|
|
+ dialogVisible.value = true
|
|
|
+ }
|
|
|
|
|
|
+ const resetForm = () => {
|
|
|
+ formInfo.value.resetFields()
|
|
|
+ }
|
|
|
|
|
|
- roleValid(rule, value, callback) {
|
|
|
+ const roleValid = (rule, value, callback) => {
|
|
|
if (value.length === 0) {
|
|
|
- callback(new Error("角色不能为空"));
|
|
|
+ callback(new Error('角色不能为空'))
|
|
|
} else {
|
|
|
- callback();
|
|
|
+ callback()
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
|
|
|
// onSelectedDrug(event) {
|
|
|
// this.siteList = event;
|
|
|
// console.log(this.siteList);
|
|
|
// },
|
|
|
// 保存操作
|
|
|
- submitForm(formName) {
|
|
|
- const params = Object.assign(this.formInfo, {});
|
|
|
- console.log(params)
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- // 走保存请求
|
|
|
- this.$message({
|
|
|
- message: "操作成功!",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- this.closeDialog(1);
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
+ const submitForm = () => {
|
|
|
+ api
|
|
|
+ .alarmPower({ id: props.itemInfo.id, handlingContent: textarea.value })
|
|
|
+ .then((requset) => {
|
|
|
+ if (requset.status === 'SUCCESS') {
|
|
|
+ ElMessage({
|
|
|
+ message: '操作成功!',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ closeDialog()
|
|
|
+ emit('listSelect')
|
|
|
+ } else {
|
|
|
+ ElMessage.error(requset.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
// 关闭弹框
|
|
|
- closeDialog(flag) {
|
|
|
- this.$refs["formInfo"].resetFields();
|
|
|
- this.showDialog = false;
|
|
|
- this.$emit("closeDialog", flag);
|
|
|
- },
|
|
|
+ const closeDialog = () => {
|
|
|
+ showDialog.value = false
|
|
|
+ emit('closeDialog', false)
|
|
|
+ }
|
|
|
+
|
|
|
+ watchEffect((fn, options) => {
|
|
|
+ fn, options
|
|
|
+ showDialog.value = props.show_Dialog
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ 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">
|