优化图片显示问题

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


 src/pages/alarm-details.vue

@@ -1,6 +1,13 @@
<template>
  <div class="alarm-details">
    <van-nav-bar title="告警详情" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
        <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">
@@ -8,9 +15,7 @@
          {{alarmInfo.alarmName}}
        </div>
        <div class="commonTitle">
          <div class="label">
            站点名称：
          </div>
                    <div class="label">站点名称：</div>
          <div class="text">
            {{alarmInfo.stationName}}
          </div>
@@ -24,83 +29,77 @@
          </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 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 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="label">告警时间：</div>
          <div class="text">
            {{alarmInfo.alarmTime}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            创建时间：
          </div>
                    <div class="label">创建时间：</div>
          <div class="text">
            {{alarmInfo.createTime}}
          </div>
        </div>
        <div class="commonTitle" v-if="alarmInfo.dispatchTime">
          <div class="label">
            派发时间：
          </div>
                    <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 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
                        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
                        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
                        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
                        class="text"
                        v-else-if="alarmInfo.status == 1 && userPower == 0"
                        style="color: #4b88f9"
                    >
            已派发
          </div>
          <div class="text" v-else 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>
                <div class="commonTitle cardTitle">订单状态：</div>
        <van-steps :active="stepsActive">
          <van-step>处理中</van-step>
          <van-step>待审核</van-step>
@@ -108,62 +107,83 @@
        </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="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="label">问题描述：</div>
          <div class="text">
            {{handleInfo.description}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            处理前照片：
          </div>
                    <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-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;">
                                    <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="label">处理方法：</div>
          <div class="text">
            {{handleInfo.workWay}}
          </div>
        </div>
        <div class="commonTitle">
          <div class="label">
            处理后照片：
          </div>
                    <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-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;">
                                    <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="label">意见建议：</div>
          <div class="text">
            {{handleInfo.workSuggest}}
          </div>
@@ -171,30 +191,56 @@
      </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 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
                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({
                    <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 />
                    <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>
@@ -213,14 +259,12 @@
    searchStatusById,
    dispatchTask,
    updateUserWork,
  } from '@/assets/js/api'
  import {
    mapState,
  } from 'vuex';
  import vUpload from '@/components/v-upload.vue'
} from "@/assets/js/api"
import { mapState } from "vuex"
import vUpload from "@/components/v-upload.vue"
  export default {
    components: {
      vUpload
        vUpload,
    },
    data() {
      return {
@@ -249,108 +293,124 @@
            stationname: "",
            battGroupName: "",
            alarmname: "",
            alarmtype: ""
          }
                    alarmtype: "",
                },
        },
        handleInfo: {},
        assignUser: {
          UName: '请选择指派人员',
        }
                UName: "请选择指派人员",
            },
      }
    },
    computed: {
      ...mapState(['userPower']),
        ...mapState(["userPower"]),
    },
    mounted() {
      this.alarmInfo = JSON.parse(this.$route.query.alarmData);
      let assignUser = sessionStorage.getItem('assignUser')
        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')
        sessionStorage.removeItem("assignUser")
    },
    methods: {
      toPage(type) {
        this.$router.push({
          path: '/alarmHandle',
                path: "/alarmHandle",
          query: {
            id: this.alarmInfo.id,
            type: type,
            managerId: this.alarmInfo.managerId
          }
                    managerId: this.alarmInfo.managerId,
                },
        })
      },
      //确认指派
      toAssign() {
        this.$dialog.confirm({
          title: '提示',
            this.$dialog
                .confirm({
                    title: "提示",
          message: `是否确认把该告警指派给${this.assignUser.UName}?`,
        }).then(() => {
          let postData = [{
                })
                .then(() => {
                    let postData = [
                        {
            id: this.alarmInfo.id,
            userId: this.assignUser.UId
          }]
          dispatchTask(postData).then((res) => {
                            userId: this.assignUser.UId,
                        },
                    ]
                    dispatchTask(postData)
                        .then((res) => {
            let resData = JSON.parse(res.data.result)
            if (resData.code == 1) {
              this.$toast('指派成功!')
                                this.$toast("指派成功!")
              this.loadStatus()
              sessionStorage.removeItem('assignUser')
                                sessionStorage.removeItem("assignUser")
            }
          }).catch((err) => {
                        })
                        .catch((err) => {
            console.log(err)
          });
        }).catch(() => {
                        })
                })
                .catch(() => {
          // on cancel
        });
                })
      },
      //确认自动完成告警
      completeAlarm() {
        this.$dialog.confirm({
          title: '提示',
          message: '请核实确认,该告警是否已自动消除？',
        }).then(() => {
            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) => {
                    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.$toast("确认成功!")
              this.loadStatus()
            }
          }).catch((err) => {
                        })
                        .catch((err) => {
            console.log(err)
          });
        }).catch(() => {
                        })
                })
                .catch(() => {
          // on cancel
        });
                })
      },
      //点击图片显示图片预览层
      toShowImgpreview(list) {
        this.ImgPreviewList = list;
        this.showImgPreview = true;
            this.ImgPreviewList = list
            this.showImgPreview = true
      },
      //查询订单当前最新状态
      loadStatus() {
        let postData = {
          id: this.alarmInfo.id
                id: this.alarmInfo.id,
        }
        searchStatusById(postData).then((res) => {
            searchStatusById(postData)
                .then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.alarmInfo.status = resData.data.status;
                        this.alarmInfo.status = resData.data.status
            if (resData.data.dispatchTime) {
              this.alarmInfo.dispatchTime = resData.data.dispatchTime;
                            this.alarmInfo.dispatchTime = resData.data.dispatchTime
            }
            if (resData.data.managerId) {
              this.alarmInfo.managerId = resData.data.managerId;
                            this.alarmInfo.managerId = resData.data.managerId
            }
            if (resData.data.userWorkList && resData.data.userWorkList.length > 0) {
              this.handleInfo = resData.data.userWorkList[0];
                        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) {
@@ -359,43 +419,51 @@
              this.isNoAlarm = false
            }
          }
        }).catch((err) => {
                })
                .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) => {
            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')
                        this.toPage("add")
          }
        }).catch((err) => {
                })
                .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('请输入审核意见…')
            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) => {
            updateUserWork(this.handleInfo)
                .then((res) => {
          let resData = JSON.parse(res.data.result)
          if (resData.code == 1) {
            this.$toast('审核成功!')
                        this.$toast("审核成功!")
            this.loadStatus()
          }
        }).catch((err) => {
                })
                .catch((err) => {
          console.log(err)
        });
      }
    }
                })
        },
    },
  }
</script>

@@ -403,7 +471,7 @@
  .alarm-details {
    width: 100%;
    min-height: 100%;
    background: #F5F5F5;
    background: #f5f5f5;
  }

  .detailsCon {
@@ -411,7 +479,7 @@
  }

  .card {
    background-color: #FFFFFF;
    background-color: #ffffff;
    border-radius: 16px;
    margin: 0 auto 24px;
    width: 702px;
@@ -426,7 +494,7 @@
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EEEEEE;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 22px;
    display: flex;
  }
@@ -448,12 +516,12 @@
  .subBtn {
    width: 702px;
    height: 98px;
    background: #4B88F9;
    background: #4b88f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
  }
@@ -472,7 +540,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
    margin-right: 24px;