优化图片显示问题

whyczyk

2021-09-10 c01aab181d94e87645470b5f159c093e77ae79d3

优化图片显示问题

 src/assets/units/function/getStationSrc.js

New file
@@ -0,0 +1,12 @@
function getStationSrc(url) {
    let src = "";
    if (process.env.NODE_ENV == 'dev') {
        src = "http://localhost:8920/stationsrc";
    } else {
        src = window.location.origin + "/stationsrc";
    }
    url = src + url.split('stationsrc')[1]
    return url;
}

export default getStationSrc;

 src/assets/units/index.js

@@ -34,6 +34,9 @@
//计算总页数
import convertToPinyin from './function/convertToPinyin'

//替换上传文件地址头部
import getStationSrc from './function/getStationSrc'

export default {
    deepClone,
    deepMerge,
@@ -46,5 +49,6 @@
    splitString,
    toThousands,
    pageTotal,
    convertToPinyin
    convertToPinyin,
    getStationSrc
}

 src/components/v-upload.vue

@@ -1,101 +1,108 @@
<template>
  <van-uploader :after-read="afterRead" v-model="getFileList" accept="image/png, image/jpeg"
    :max-size="10 * 1024 * 1024" @oversize="oversize" :disabled="disabled" :readonly="readonly" />
    <van-uploader
        :after-read="afterRead"
        v-model="getFileList"
        accept="image/png, image/jpeg"
        :max-size="10 * 1024 * 1024"
        @oversize="oversize"
        :disabled="disabled"
        :readonly="readonly"
    />
</template>

<script>
  import {
    uploadAlarmFile
  } from '@/assets/js/api'
  export default {
    name: "v-upload",
    props: {
      value: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
      afterOrBefore: {
        type: String,
        default: 'before'
      }
    },
    data() {
      return {
        fileList: this.value
      }
    },
    model: {
      prop: "value",
      event: "valChange"
    },
    watch: {
      value(newValue) {
        this.fileList = newValue;
      },
      fileList(newValue) {
        this.$emit("valChange", newValue);
      }
    },
    computed: {
      getFileList: {
        get() {
          if (this.fileList) {
            return this.fileList.split(",").map(item => {
              return {
                url: item
              };
            });
          }
          return [];
        },
        set(newValue) {
          var fileList = [];
          newValue.forEach(item => {
            if (item.url) {
              fileList.push(item.url);
            }
          });
          this.fileList = fileList.join(",");
        }
      }
    },
    methods: {
      // 上传图片
      afterRead(file) {
        var formData = new FormData();
        let json = JSON.stringify({
          afterOrBefore: this.afterOrBefore
        })
        formData.append("file", file.file);
        formData.append("json", json);
        //上传图片接口
        uploadAlarmFile(formData).then(res => {
          let resData = JSON.parse(res.data.result);
          if (resData.code == 1) {
            if (this.fileList) {
              var arr = this.fileList.split(",");
              arr.push(resData.data[0]);
              this.fileList = arr.join(",");
              return false;
            }
            this.fileList = resData.data[0];
          }
        });
      },
      // 文件过大
      oversize(e) {
        this.$toast.fail("图片过大！");
      }
    }
  }
import { uploadAlarmFile } from "@/assets/js/api"
export default {
    name: "v-upload",
    props: {
        value: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        afterOrBefore: {
            type: String,
            default: "before",
        },
    },
    data() {
        return {
            fileList: this.value,
        }
    },
    model: {
        prop: "value",
        event: "valChange",
    },
    watch: {
        value(newValue) {
            this.fileList = newValue
        },
        fileList(newValue) {
            this.$emit("valChange", newValue)
        },
    },
    computed: {
        getFileList: {
            get() {
                if (this.fileList) {
                    return this.fileList.split(",").map((item) => {
                        console.log(this.$units.getStationSrc(item))
                        return {
                            url: this.$units.getStationSrc(item),
                            url1: item,
                        }
                    })
                }
                return []
            },
            set(newValue) {
                var fileList = []
                newValue.forEach((item) => {
                    if (item.url1) {
                        fileList.push(item.url1)
                    }
                })
                this.fileList = fileList.join(",")
            },
        },
    },
    methods: {
        // 上传图片
        afterRead(file) {
            var formData = new FormData()
            let json = JSON.stringify({
                afterOrBefore: this.afterOrBefore,
            })
            formData.append("file", file.file)
            formData.append("json", json)
            //上传图片接口
            uploadAlarmFile(formData).then((res) => {
                let resData = JSON.parse(res.data.result)
                if (resData.code == 1) {
                    if (this.fileList) {
                        var arr = this.fileList.split(",")
                        arr.push(resData.data[0])
                        this.fileList = arr.join(",")
                        return false
                    }
                    this.fileList = resData.data[0]
                }
            })
        },
        // 文件过大
        oversize(e) {
            this.$toast.fail("图片过大！")
        },
    },
}
</script>

<style scoped>

 src/pages/alarm-details.vue

@@ -1,21 +1,26 @@
<template>
  <div class="alarm-details">
    <van-nav-bar title="告警详情" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
    </van-nav-bar>
    <div class="detailsCon">
      <div class="card">
        <div class="commonTitle cardTitle">
          {{alarmInfo.alarmName}}
        </div>
        <div class="commonTitle">
          <div class="label">
            站点名称：
          </div>
          <div class="text">
            {{alarmInfo.stationName}}
          </div>
        </div>
        <!-- <div class="commonTitle">
    <div class="alarm-details">
        <van-nav-bar
            title="告警详情"
            @click-left="$router.back()"
            left-arrow
            fixed
            safe-area-inset-top
            placeholder
        >
        </van-nav-bar>
        <div class="detailsCon">
            <div class="card">
                <div class="commonTitle cardTitle">
                    {{ alarmInfo.alarmName }}
                </div>
                <div class="commonTitle">
                    <div class="label">站点名称：</div>
                    <div class="text">
                        {{ alarmInfo.stationName }}
                    </div>
                </div>
                <!-- <div class="commonTitle">
          <div class="label">
            电池组：
          </div>
@@ -23,463 +28,526 @@
            {{alarmInfo.alarmData.battGroupName}}
          </div>
        </div> -->
        <div class="commonTitle">
          <div class="label">
            告警类型：
          </div>
          <div class="text" v-if="alarmInfo.battGroupId==0">
            设备告警
          </div>
          <div class="text" v-else>
            电池告警
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            告警等级：
          </div>
          <div class="text" v-if="alarmInfo.alarmLevel==1">
            一级告警
          </div>
          <div class="text" v-else-if="alarmInfo.alarmLevel==2">
            二级告警
          </div>
          <div class="text" v-else>
            三级告警
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            告警时间：
          </div>
          <div class="text">
            {{alarmInfo.alarmTime}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            创建时间：
          </div>
          <div class="text">
            {{alarmInfo.createTime}}
          </div>
        </div>
        <div class="commonTitle" v-if="alarmInfo.dispatchTime">
          <div class="label">
            派发时间：
          </div>
          <div class="text">
            {{alarmInfo.dispatchTime}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            订单状态：
          </div>
          <div class="text" v-if="alarmInfo.status==2&&stepsActive==0" style="color: #eac406;">
            处理中
          </div>
          <div class="text" v-else-if="alarmInfo.status==2&&stepsActive==1" style="color: #eac406;">
            待审核
          </div>
          <div class="text" v-else-if="alarmInfo.status==3" style="color: #07c160;">
            已完成
          </div>
          <div class="text" v-else-if="alarmInfo.status==0" style="color: #4B88F9;">
            待派发
          </div>
          <div class="text" v-else-if="alarmInfo.status==1&&userPower==0" style="color: #4B88F9;">
            已派发
          </div>
          <div class="text" v-else style="color: #4B88F9;">
            待处理
          </div>
        </div>
      </div>
      <!-- 如果是处理中状态 -->
      <div class="card" v-if="alarmInfo.status==2||alarmInfo.status==3">
        <div class="commonTitle cardTitle">
          订单状态：
        </div>
        <van-steps :active="stepsActive">
          <van-step>处理中</van-step>
          <van-step>待审核</van-step>
          <van-step>已完成</van-step>
        </van-steps>
      </div>
      <!-- 如果是进入审核状态 -->
      <div class="card"
        v-if="alarmInfo.status==2&&stepsActive==1||alarmInfo.status==2&&stepsActive==2||alarmInfo.status==3">
        <div class="commonTitle cardTitle">
          告警处理：
        </div>
        <div class="commonTitle">
          <div class="label">
            问题描述：
          </div>
          <div class="text">
            {{handleInfo.description}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            处理前照片：
          </div>
          <div class="text">
            <div class="van-uploader__wrapper"
              v-if="handleInfo.imageBefore&&handleInfo.imageBefore.split(',').length>0">
              <div class="van-uploader__preview" v-for="(item,i) in handleInfo.imageBefore.split(',')" :key="i"
                @click="toShowImgpreview(handleInfo.imageBefore.split(','))">
                <div class="van-image van-uploader__preview-image">
                  <img :src="item" class="van-image__img" style="object-fit: cover;">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            处理方法：
          </div>
          <div class="text">
            {{handleInfo.workWay}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            处理后照片：
          </div>
          <div class="text">
            <div class="van-uploader__wrapper" v-if="handleInfo.imageAfter&&handleInfo.imageAfter.split(',').length>0">
              <div class="van-uploader__preview" v-for="(item,i) in handleInfo.imageAfter.split(',')" :key="i"
                @click="toShowImgpreview(handleInfo.imageAfter.split(','))">
                <div class="van-image van-uploader__preview-image">
                  <img :src="item" class="van-image__img" style="object-fit: cover;">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            意见建议：
          </div>
          <div class="text">
            {{handleInfo.workSuggest}}
          </div>
        </div>
      </div>
      <!-- 如果是维护员并且有实时告警 -->
      <div v-if="userPower!=0&&!isNoAlarm">
        <div class="subBtn" @click="startHandle" v-if="alarmInfo.status==1">开始处理</div>
        <div class="subBtn" @click="toPage('edit')" v-if="alarmInfo.status==2&&stepsActive==0">继续处理</div>
      </div>
      <!-- 如果是维护员并且实时告警已自动消除 -->
      <div class="subBtn" @click="completeAlarm" v-else-if="userPower!=0&&isNoAlarm">确认告警自动消除</div>
      <!-- 如果是管理员未派发 -->
      <div v-if="userPower==0&&alarmInfo.status==0">
        <div class="card">
          <div class="commonTitle cardTitle">
            指派人员：
          </div>
          <van-cell :title="assignUser.UName" is-link @click="$router.push({
            path:'/userList',
            query: {
              stationId:alarmInfo.stationId,
            }})" />
        </div>
        <div class="subBtn" @click="toAssign">确认指派</div>
      </div>
      <!-- 如果是管理员待审核 -->
      <div v-if="userPower==0&&alarmInfo.status==2&&stepsActive==1">
        <div class="card">
          <van-field v-model="handleInfo.note" rows="2" autosize label="审核意见" type="textarea" placeholder="请输入审核意见…"
            show-word-limit />
        </div>
        <div class="btnCon">
          <div class="subBtn" @click="suggest(3)">通过</div>
          <div class="subBtn" @click="suggest(-1)">不通过</div>
        </div>
      </div>
    </div>
    <van-image-preview v-model="showImgPreview" :images="ImgPreviewList">
    </van-image-preview>
  </div>
                <div class="commonTitle">
                    <div class="label">告警类型：</div>
                    <div class="text" v-if="alarmInfo.battGroupId == 0">设备告警</div>
                    <div class="text" v-else>电池告警</div>
                </div>
                <div class="commonTitle">
                    <div class="label">告警等级：</div>
                    <div class="text" v-if="alarmInfo.alarmLevel == 1">一级告警</div>
                    <div class="text" v-else-if="alarmInfo.alarmLevel == 2">二级告警</div>
                    <div class="text" v-else>三级告警</div>
                </div>
                <div class="commonTitle">
                    <div class="label">告警时间：</div>
                    <div class="text">
                        {{ alarmInfo.alarmTime }}
                    </div>
                </div>
                <div class="commonTitle">
                    <div class="label">创建时间：</div>
                    <div class="text">
                        {{ alarmInfo.createTime }}
                    </div>
                </div>
                <div class="commonTitle" v-if="alarmInfo.dispatchTime">
                    <div class="label">派发时间：</div>
                    <div class="text">
                        {{ alarmInfo.dispatchTime }}
                    </div>
                </div>
                <div class="commonTitle">
                    <div class="label">订单状态：</div>
                    <div
                        class="text"
                        v-if="alarmInfo.status == 2 && stepsActive == 0"
                        style="color: #eac406"
                    >
                        处理中
                    </div>
                    <div
                        class="text"
                        v-else-if="alarmInfo.status == 2 && stepsActive == 1"
                        style="color: #eac406"
                    >
                        待审核
                    </div>
                    <div
                        class="text"
                        v-else-if="alarmInfo.status == 3"
                        style="color: #07c160"
                    >
                        已完成
                    </div>
                    <div
                        class="text"
                        v-else-if="alarmInfo.status == 0"
                        style="color: #4b88f9"
                    >
                        待派发
                    </div>
                    <div
                        class="text"
                        v-else-if="alarmInfo.status == 1 && userPower == 0"
                        style="color: #4b88f9"
                    >
                        已派发
                    </div>
                    <div class="text" v-else style="color: #4b88f9">待处理</div>
                </div>
            </div>
            <!-- 如果是处理中状态 -->
            <div class="card" v-if="alarmInfo.status == 2 || alarmInfo.status == 3">
                <div class="commonTitle cardTitle">订单状态：</div>
                <van-steps :active="stepsActive">
                    <van-step>处理中</van-step>
                    <van-step>待审核</van-step>
                    <van-step>已完成</van-step>
                </van-steps>
            </div>
            <!-- 如果是进入审核状态 -->
            <div
                class="card"
                v-if="
                    (alarmInfo.status == 2 && stepsActive == 1) ||
                    (alarmInfo.status == 2 && stepsActive == 2) ||
                    alarmInfo.status == 3
                "
            >
                <div class="commonTitle cardTitle">告警处理：</div>
                <div class="commonTitle">
                    <div class="label">问题描述：</div>
                    <div class="text">
                        {{ handleInfo.description }}
                    </div>
                </div>
                <div class="commonTitle">
                    <div class="label">处理前照片：</div>
                    <div class="text">
                        <div
                            class="van-uploader__wrapper"
                            v-if="
                                handleInfo.imageBefore &&
                                handleInfo.imageBefore.split(',').length > 0
                            "
                        >
                            <div
                                class="van-uploader__preview"
                                v-for="(item, i) in handleInfo.imageBefore.split(',')"
                                :key="i"
                                @click="toShowImgpreview(handleInfo.imageBefore.split(','))"
                            >
                                <div class="van-image van-uploader__preview-image">
                                    <img
                                        :src="$units.getStationSrc(item)"
                                        class="van-image__img"
                                        style="object-fit: cover"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="commonTitle">
                    <div class="label">处理方法：</div>
                    <div class="text">
                        {{ handleInfo.workWay }}
                    </div>
                </div>
                <div class="commonTitle">
                    <div class="label">处理后照片：</div>
                    <div class="text">
                        <div
                            class="van-uploader__wrapper"
                            v-if="
                                handleInfo.imageAfter &&
                                handleInfo.imageAfter.split(',').length > 0
                            "
                        >
                            <div
                                class="van-uploader__preview"
                                v-for="(item, i) in handleInfo.imageAfter.split(',')"
                                :key="i"
                                @click="toShowImgpreview(handleInfo.imageAfter.split(','))"
                            >
                                <div class="van-image van-uploader__preview-image">
                                    <img
                                        :src="$units.getStationSrc(item)"
                                        class="van-image__img"
                                        style="object-fit: cover"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="commonTitle">
                    <div class="label">意见建议：</div>
                    <div class="text">
                        {{ handleInfo.workSuggest }}
                    </div>
                </div>
            </div>
            <!-- 如果是维护员并且有实时告警 -->
            <div v-if="userPower != 0 && !isNoAlarm">
                <div class="subBtn" @click="startHandle" v-if="alarmInfo.status == 1">
                    开始处理
                </div>
                <div
                    class="subBtn"
                    @click="toPage('edit')"
                    v-if="alarmInfo.status == 2 && stepsActive == 0"
                >
                    继续处理
                </div>
            </div>
            <!-- 如果是维护员并且实时告警已自动消除 -->
            <div
                class="subBtn"
                @click="completeAlarm"
                v-else-if="userPower != 0 && isNoAlarm"
            >
                确认告警自动消除
            </div>
            <!-- 如果是管理员未派发 -->
            <div v-if="userPower == 0 && alarmInfo.status == 0">
                <div class="card">
                    <div class="commonTitle cardTitle">指派人员：</div>
                    <van-cell
                        :title="assignUser.UName"
                        is-link
                        @click="
                            $router.push({
                                path: '/userList',
                                query: {
                                    stationId: alarmInfo.stationId,
                                },
                            })
                        "
                    />
                </div>
                <div class="subBtn" @click="toAssign">确认指派</div>
            </div>
            <!-- 如果是管理员待审核 -->
            <div v-if="userPower == 0 && alarmInfo.status == 2 && stepsActive == 1">
                <div class="card">
                    <van-field
                        v-model="handleInfo.note"
                        rows="2"
                        autosize
                        label="审核意见"
                        type="textarea"
                        placeholder="请输入审核意见…"
                        show-word-limit
                    />
                </div>
                <div class="btnCon">
                    <div class="subBtn" @click="suggest(3)">通过</div>
                    <div class="subBtn" @click="suggest(-1)">不通过</div>
                </div>
            </div>
        </div>
        <van-image-preview v-model="showImgPreview" :images="ImgPreviewList">
        </van-image-preview>
    </div>
</template>

<script>
  import {
    updateWorkAlarm,
    searchStatusById,
    dispatchTask,
    updateUserWork,
  } from '@/assets/js/api'
  import {
    mapState,
  } from 'vuex';
  import vUpload from '@/components/v-upload.vue'
  export default {
    components: {
      vUpload
    },
    data() {
      return {
        isNoAlarm: false,
        showImgPreview: false,
        ImgPreviewList: [],
        stepsActive: 0,
        alarmInfo: {
          id: 0,
          alarmRecId: 0,
          battGroupId: 0,
          managerId: 0,
          status: 0,
          dispatchTime: "",
          alarmData: {
            num: 0,
            BattGroupId: 0,
            MonNum: 0,
            alm_signal_id: 0,
            alm_level: 0,
            alm_start_time: "",
            alm_end_time: "",
            alm_value: 0,
            alm_is_confirmed: 0,
            alm_confirmed_time: "",
            stationname: "",
            battGroupName: "",
            alarmname: "",
            alarmtype: ""
          }
        },
        handleInfo: {},
        assignUser: {
          UName: '请选择指派人员',
        }
      }
    },
    computed: {
      ...mapState(['userPower']),
    },
    mounted() {
      this.alarmInfo = JSON.parse(this.$route.query.alarmData);
      let assignUser = sessionStorage.getItem('assignUser')
      if (assignUser) {
        this.assignUser = JSON.parse(assignUser)
      }
      this.loadStatus()
    },
    destroyed() {
      sessionStorage.removeItem('assignUser')
    },
    methods: {
      toPage(type) {
        this.$router.push({
          path: '/alarmHandle',
          query: {
            id: this.alarmInfo.id,
            type: type,
            managerId: this.alarmInfo.managerId
          }
        })
      },
      //确认指派
      toAssign() {
        this.$dialog.confirm({
          title: '提示',
          message: `是否确认把该告警指派给${this.assignUser.UName}?`,
        }).then(() => {
          let postData = [{
            id: this.alarmInfo.id,
            userId: this.assignUser.UId
          }]
          dispatchTask(postData).then((res) => {
            let resData = JSON.parse(res.data.result)
            if (resData.code == 1) {
              this.$toast('指派成功!')
              this.loadStatus()
              sessionStorage.removeItem('assignUser')
            }
          }).catch((err) => {
            console.log(err)
          });
        }).catch(() => {
          // on cancel
        });
      },
      //确认自动完成告警
      completeAlarm() {
        this.$dialog.confirm({
          title: '提示',
          message: '请核实确认,该告警是否已自动消除？',
        }).then(() => {
          let postData = this.$units.deepClone(this.alarmInfo)
          postData.status = 3;
          postData.userId = sessionStorage.getItem('userId');
          updateWorkAlarm(postData).then((res) => {
            let resData = JSON.parse(res.data.result)
            if (resData.code == 1) {
              this.$toast('确认成功!')
              this.loadStatus()
            }
          }).catch((err) => {
            console.log(err)
          });
        }).catch(() => {
          // on cancel
        });
      },
      //点击图片显示图片预览层
      toShowImgpreview(list) {
        this.ImgPreviewList = list;
        this.showImgPreview = true;
      },
      //查询订单当前最新状态
      loadStatus() {
        let postData = {
          id: this.alarmInfo.id
        }
        searchStatusById(postData).then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.alarmInfo.status = resData.data.status;
            if (resData.data.dispatchTime) {
              this.alarmInfo.dispatchTime = resData.data.dispatchTime;
            }
            if (resData.data.managerId) {
              this.alarmInfo.managerId = resData.data.managerId;
            }
            if (resData.data.userWorkList && resData.data.userWorkList.length > 0) {
              this.handleInfo = resData.data.userWorkList[0];
              this.stepsActive = this.handleInfo.checkStatus - 1
            }
            if (this.alarmInfo.status != 3 && resData.data.flg == 0) {
              this.isNoAlarm = true
            } else {
              this.isNoAlarm = false
            }
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      //开始处理
      startHandle() {
        let postData = this.$units.deepClone(this.alarmInfo)
        postData.status = 2;
        postData.userId = sessionStorage.getItem('userId');
        updateWorkAlarm(postData).then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.toPage('add')
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      suggest(checkStatus) {
        this.handleInfo.checkStatus = checkStatus;
        let endTime = this.$units.timeFormat(new Date().getTime, 'yyyy-mm-dd hh:MM:ss');
        this.handleInfo.endTime = endTime;
        if (this.handleInfo.note == '') {
          this.$toast('请输入审核意见…')
          return
        }
        updateUserWork(this.handleInfo).then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.$toast('审核成功!')
            this.loadStatus()
          }
        }).catch((err) => {
          console.log(err)
        });
      }
    }
  }
import {
    updateWorkAlarm,
    searchStatusById,
    dispatchTask,
    updateUserWork,
} from "@/assets/js/api"
import { mapState } from "vuex"
import vUpload from "@/components/v-upload.vue"
export default {
    components: {
        vUpload,
    },
    data() {
        return {
            isNoAlarm: false,
            showImgPreview: false,
            ImgPreviewList: [],
            stepsActive: 0,
            alarmInfo: {
                id: 0,
                alarmRecId: 0,
                battGroupId: 0,
                managerId: 0,
                status: 0,
                dispatchTime: "",
                alarmData: {
                    num: 0,
                    BattGroupId: 0,
                    MonNum: 0,
                    alm_signal_id: 0,
                    alm_level: 0,
                    alm_start_time: "",
                    alm_end_time: "",
                    alm_value: 0,
                    alm_is_confirmed: 0,
                    alm_confirmed_time: "",
                    stationname: "",
                    battGroupName: "",
                    alarmname: "",
                    alarmtype: "",
                },
            },
            handleInfo: {},
            assignUser: {
                UName: "请选择指派人员",
            },
        }
    },
    computed: {
        ...mapState(["userPower"]),
    },
    mounted() {
        this.alarmInfo = JSON.parse(this.$route.query.alarmData)
        let assignUser = sessionStorage.getItem("assignUser")
        if (assignUser) {
            this.assignUser = JSON.parse(assignUser)
        }
        this.loadStatus()
    },
    destroyed() {
        sessionStorage.removeItem("assignUser")
    },
    methods: {
        toPage(type) {
            this.$router.push({
                path: "/alarmHandle",
                query: {
                    id: this.alarmInfo.id,
                    type: type,
                    managerId: this.alarmInfo.managerId,
                },
            })
        },
        //确认指派
        toAssign() {
            this.$dialog
                .confirm({
                    title: "提示",
                    message: `是否确认把该告警指派给${this.assignUser.UName}?`,
                })
                .then(() => {
                    let postData = [
                        {
                            id: this.alarmInfo.id,
                            userId: this.assignUser.UId,
                        },
                    ]
                    dispatchTask(postData)
                        .then((res) => {
                            let resData = JSON.parse(res.data.result)
                            if (resData.code == 1) {
                                this.$toast("指派成功!")
                                this.loadStatus()
                                sessionStorage.removeItem("assignUser")
                            }
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                })
                .catch(() => {
                    // on cancel
                })
        },
        //确认自动完成告警
        completeAlarm() {
            this.$dialog
                .confirm({
                    title: "提示",
                    message: "请核实确认,该告警是否已自动消除？",
                })
                .then(() => {
                    let postData = this.$units.deepClone(this.alarmInfo)
                    postData.status = 3
                    postData.userId = sessionStorage.getItem("userId")
                    updateWorkAlarm(postData)
                        .then((res) => {
                            let resData = JSON.parse(res.data.result)
                            if (resData.code == 1) {
                                this.$toast("确认成功!")
                                this.loadStatus()
                            }
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                })
                .catch(() => {
                    // on cancel
                })
        },
        //点击图片显示图片预览层
        toShowImgpreview(list) {
            this.ImgPreviewList = list
            this.showImgPreview = true
        },
        //查询订单当前最新状态
        loadStatus() {
            let postData = {
                id: this.alarmInfo.id,
            }
            searchStatusById(postData)
                .then((res) => {
                    let resData = JSON.parse(res.data.result)
                    if (resData.code == 1) {
                        this.alarmInfo.status = resData.data.status
                        if (resData.data.dispatchTime) {
                            this.alarmInfo.dispatchTime = resData.data.dispatchTime
                        }
                        if (resData.data.managerId) {
                            this.alarmInfo.managerId = resData.data.managerId
                        }
                        if (
                            resData.data.userWorkList &&
                            resData.data.userWorkList.length > 0
                        ) {
                            this.handleInfo = resData.data.userWorkList[0]
                            this.stepsActive = this.handleInfo.checkStatus - 1
                        }
                        if (this.alarmInfo.status != 3 && resData.data.flg == 0) {
                            this.isNoAlarm = true
                        } else {
                            this.isNoAlarm = false
                        }
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        //开始处理
        startHandle() {
            let postData = this.$units.deepClone(this.alarmInfo)
            postData.status = 2
            postData.userId = sessionStorage.getItem("userId")
            updateWorkAlarm(postData)
                .then((res) => {
                    let resData = JSON.parse(res.data.result)
                    if (resData.code == 1) {
                        this.toPage("add")
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        suggest(checkStatus) {
            this.handleInfo.checkStatus = checkStatus
            let endTime = this.$units.timeFormat(
                new Date().getTime,
                "yyyy-mm-dd hh:MM:ss"
            )
            this.handleInfo.endTime = endTime
            if (this.handleInfo.note == "") {
                this.$toast("请输入审核意见…")
                return
            }
            updateUserWork(this.handleInfo)
                .then((res) => {
                    let resData = JSON.parse(res.data.result)
                    if (resData.code == 1) {
                        this.$toast("审核成功!")
                        this.loadStatus()
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },
    },
}
</script>

<style scoped>
  .alarm-details {
    width: 100%;
    min-height: 100%;
    background: #F5F5F5;
  }
.alarm-details {
    width: 100%;
    min-height: 100%;
    background: #f5f5f5;
}

  .detailsCon {
    padding: 24px;
  }
.detailsCon {
    padding: 24px;
}

  .card {
    background-color: #FFFFFF;
    border-radius: 16px;
    margin: 0 auto 24px;
    width: 702px;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
  }
.card {
    background-color: #ffffff;
    border-radius: 16px;
    margin: 0 auto 24px;
    width: 702px;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}

  .commonTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 22px;
    display: flex;
  }
.commonTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 22px;
    display: flex;
}

  .cardTitle {
    font-weight: bold;
  }
.cardTitle {
    font-weight: bold;
}

  .commonTitle .label {
    line-height: 40px;
    display: inline-block;
    width: 170px;
  }
.commonTitle .label {
    line-height: 40px;
    display: inline-block;
    width: 170px;
}

  .commonTitle .text {
    flex: 1;
  }
.commonTitle .text {
    flex: 1;
}

  .subBtn {
    width: 702px;
    height: 98px;
    background: #4B88F9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 36px;
    margin-top: 48px;
  }
.subBtn {
    width: 702px;
    height: 98px;
    background: #4b88f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
}

  .btnCon {
    width: 100%;
    display: flex;
    align-items: center;
  }
.btnCon {
    width: 100%;
    display: flex;
    align-items: center;
}

  .btnCon .subBtn {
    flex: 1;
    height: 98px;
    background: #07c160;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 36px;
    margin-top: 48px;
    margin-right: 24px;
  }
.btnCon .subBtn {
    flex: 1;
    height: 98px;
    background: #07c160;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
    margin-right: 24px;
}

  .btnCon .subBtn:last-of-type {
    margin-right: 0;
    background: #f9534b;
  }
.btnCon .subBtn:last-of-type {
    margin-right: 0;
    background: #f9534b;
}
</style>