事件管理、维修管理添加图片视频上传；维修管理添加地图详情页面、详情数据显示上传的图片和视频

guoshilong

2022-09-26 680dcd3efb79f439a1e4bf95240a0c2b8d975837

事件管理、维修管理添加图片视频上传；维修管理添加地图详情页面、详情数据显示上传的图片和视频

 src/const/eventgm/eventgm.js

@@ -157,6 +157,21 @@
      },
    },
    {
      label: '图片上传',
      prop: 'picUrls',
      type: 'upload',
      span: 24,
      listType: 'picture-card',
      limit:5,
      hide:true,
      props:"value",
      propsHttp: {
        url:'link',
        res: 'data'
      },
      action: '/api/blade-resource/oss/endpoint/put-file-attach'
    },
    {
      label: "修改人",
      prop: "updateUser",
      type: "input",

 src/const/repairsorder/repairsorder.js

@@ -89,6 +89,20 @@
      }],
    },
    {
      label: '图片上传',
      prop: 'picUrls',
      type: 'upload',
      span: 24,
      listType: 'picture-card',
      limit:5,
      hide:true,
      propsHttp: {
        url:'link',
        res: 'data'
      },
      action: '/api/blade-resource/oss/endpoint/put-file-attach'
    },
    {
      label: "内容",
      prop: "content",
      type: "textarea",

 src/util/determiningFileFormat.js

New file
@@ -0,0 +1,4 @@
export const isImage = (str) =>{
  var reg = /.(png|jpg|gif|jpeg|webp)$/;
  return reg.test(str);
}

 src/views/eventgm/eventgm.vue

@@ -8,6 +8,7 @@
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :upload-before="uploadBefore"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
@@ -117,6 +118,9 @@
    },
    methods: {
      rowSave(row, done, loading) {
        if (!row.picUrls){
          row.picUrls = null
        }
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
@@ -184,7 +188,6 @@
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            console.log(res);
            this.form = res.data.data;
            this.form.avueMapAddress = {
              "formattedAddress": this.form.address,
@@ -239,6 +242,14 @@
          this.selectionClear();
        });
      },
      uploadBefore(file, done, loading,column) {
        if (["image","video"].includes(file.type.split("/")[0])){
          done()
        }else {
          this.$message.warning('请上传图片或视频')
          loading()
        }
      },
      handleDisposal(row) {
        this.disposalVisible = true
        this.$nextTick(() => {

 src/views/eventgm/eventgmDetail.vue

@@ -89,6 +89,63 @@
              </el-form>
            </el-card>

            <!--事件图片或视频-->
            <div
                style=""
                role="tab"
                aria-expanded="true"
                aria-controls="el-collapse-content-823"
                aria-describedby="el-collapse-content-823"
              >
                <div
                  role="button"
                  tabindex="0"
                  class="el-collapse-item__header focusing is-active"
                >
                  <div class="avue-group__header avue-group">
                    <i class="el-icon-s-order avue-group__icon"></i>
                    <h1 class="avue-group__title">事件图片</h1>
                  </div>
                </div>
              </div>
            <el-card class="scene-image-box">
                <el-image
                  v-for="(item, index) in picUrls"
                  :key="index"
                  :src="item"
                  :preview-src-list="picUrls"
                  v-show="picUrls.length > 0"
                ></el-image>
                <span v-show="picUrls.length == 0">暂无图片</span>
              </el-card>

            <div
              style=""
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-s-order avue-group__icon"></i>
                  <h1 class="avue-group__title">事件视频</h1>
                </div>
              </div>
            </div>
            <el-card>
              <video
                :src="videoUrls"
                style="width: 200px; height: 200px; object-fit: fill"
                controls
                v-show="videoUrls != ''"
              ></video>
              <span v-show="videoUrls.length == 0">暂无视频</span>
            </el-card>
            <!--事件流程信息-->
            <div
              style=""
@@ -120,6 +177,7 @@
                <el-table-column prop="remark" label="说明"  align="center"></el-table-column>
              </el-table>
            </el-card>

            <div v-if="this.form.no">
              <!--维修人员信息-->
              <div v-if="repairsDetail.toUserId != -1">
@@ -190,7 +248,6 @@
          </el-card>
        </div>
      </el-col>

      <el-col :span="12">
        <open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :pointLonLat="pointLonLat" :routeRange="form.routeRange"></open-layers-map>
      </el-col>
@@ -204,10 +261,12 @@
import {getList as getRepairsorderRecordList} from "@/api/repairsorder/repairsorderRecord";
import {getDetail} from "@/api/repairsorder/repairsorder";
import {getUser} from "@/api/system/user"
import EleGallery from 'vue-ele-gallery'
import {isImage} from "@/util/determiningFileFormat";

export default {
  name: "eventgmDetail",
  components: {OpenLayersMap},
  components: {OpenLayersMap,EleGallery},
  props:["detailInfo"],
  data(){
    return{
@@ -218,10 +277,21 @@
      repairsRecord:[],
      repairsDetail:{},
      repairsPersonInfo:[],
      picUrls:[],
      videoUrls:[],
    }
  },
  created() {
    this.form = this.detailInfo;
    if (this.form.picUrls){
      this.form.picUrls.forEach(e=>{
        if (isImage(e.value)){
          this.picUrls.push(e.value)
        }else {
          this.videoUrls.push(e.value)
        }
      })
    }
    this.pointLonLat = {
      lon:this.form.longitude,
      lat:this.form.latitude
@@ -275,7 +345,7 @@
    },
    handleBack(){
      this.$emit('isDetail');
    }
    },
  },
}
</script>
@@ -316,4 +386,29 @@
  right: 3%;
  z-index: 99999;
}

.scene-image-box {
  line-height: 32px !important;
  height: auto;
  max-height: 200px;
  overflow-y: auto;

  .el-card__body {
    display: flex;
    padding: 0 10px !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .x-audio-wrap.inline {
      margin: 10px;
    }

    .el-image {
      margin: 10px;
      width: 160px;
      height: 80px;
    }
  }
}
</style>

 src/views/repairsorder/repairsorder.vue

@@ -1,6 +1,6 @@
<template>
  <basic-container>
    <avue-crud :option="option"
    <avue-crud v-show="!detailVisible" :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
@@ -8,9 +8,11 @@
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               :upload-before="uploadBefore"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-dblclick="rowClick"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
@@ -28,7 +30,7 @@
        </el-button>
      </template>
      <template slot-scope="{type,size,row,index}" slot="menu">
        <el-button icon="el-icon-view" :size="size" :type="type" @click="$refs.crud.rowView(row,index)">查 看</el-button>
        <el-button icon="el-icon-view" :size="size" :type="type" @click="rowClick(row)">查 看</el-button>
        <el-button icon="el-icon-check" :size="size" :type="type" :disabled="row.state == 1" @click="handleSendorder(row)">派 单</el-button>
        <el-button icon="el-icon-edit" :size="size" :type="type" :disabled="row.state >= 1" @click="$refs.crud.rowEdit(row,index)">编 辑</el-button>
        <el-button icon="el-icon-delete" :size="size" :type="type" :disabled="row.state >= 1" @click="$refs.crud.rowDel(row,index)">删 除</el-button>
@@ -37,6 +39,7 @@

    <!-- 弹窗, 派单 -->
    <sendorder v-if="sendorderVisible" ref="sendorder" @refreshOnLoad="refreshChange"></sendorder>
    <repairsorder-detail v-if="detailVisible" ref="detailVisible" :detailInfo="detailInfo" @isDetail="isDetail"></repairsorder-detail>
  </basic-container>
</template>

@@ -45,9 +48,11 @@
  import option from "@/const/repairsorder/repairsorder";
  import {mapGetters} from "vuex";
  import sendorder from "./sendorder.vue"
  import RepairsorderDetail from "@/views/repairsorder/repairsorderDetail";

  export default {
    components: {
      RepairsorderDetail,
      sendorder
    },
    data() {
@@ -63,7 +68,9 @@
        selectionList: [],
        option: option,
        data: [],
        sendorderVisible: false
        sendorderVisible: false,
        detailVisible:false,
        detailInfo:{},
      };
    },
    watch: {
@@ -98,6 +105,9 @@
    },
    methods: {
      rowSave(row, done, loading) {
        if (!picUrls){
          row.picUrls = null
        }
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
@@ -213,11 +223,27 @@
          this.selectionClear();
        });
      },
      uploadBefore(file, done, loading,column) {
        if (["image","video"].includes(file.type.split("/")[0])){
          done()
        }else {
          this.$message.warning('请上传图片或视频')
          loading()
        }
      },
      handleSendorder(row) {
        this.sendorderVisible = true
        this.$nextTick(() => {
          this.$refs.sendorder.init(row)
        })
      },
      //点击当前行事件
      rowClick(val){
        this.detailInfo = val
        this.isDetail();
      },
      isDetail(){
        this.detailVisible = !this.detailVisible
      }
    }
  };

 src/views/repairsorder/repairsorderDetail.vue

New file
@@ -0,0 +1,264 @@
<template>
  <div>
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
    </el-button>
    <el-row>
      <el-col :span="12">
        <div>
          <el-card class="trackClass" style="overflow-y: auto">
            <!--维修信息-->
            <div
              style="margin-top: -10px"
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-message-solid avue-group__icon"></i>
                  <h1 class="avue-group__title">维修信息</h1>
                </div>
              </div>
            </div>
            <el-card>
              <el-form
                :model="form"
                label-position="right"
                size="mini"
                class="taskinfoForm"
                label-width="100px"
                style="
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
              >
                <el-row>
                  <el-col span="12">
                    <el-form-item label="工单编号">
                      <el-input disabled="true" v-model="form.no" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="任务状态">
                      <el-input disabled="true" v-model="form.$state" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col span="24">
                    <el-form-item label="地址">
                      <el-input disabled="true" v-model="form.location" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col span="24">
                    <el-form-item label="任务内容">
                      <el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>
            </el-card>

            <!--维修图片或视频-->
            <div
              style=""
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-s-order avue-group__icon"></i>
                  <h1 class="avue-group__title">维修图片</h1>
                </div>
              </div>
            </div>
            <el-card class="scene-image-box">
              <el-image
                v-for="(item, index) in picUrls"
                :key="index"
                :src="item"
                :preview-src-list="picUrls"
                v-show="picUrls.length > 0"
              ></el-image>
              <span v-show="picUrls.length == 0">暂无图片</span>
            </el-card>

            <div
              style=""
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-s-order avue-group__icon"></i>
                  <h1 class="avue-group__title">维修视频</h1>
                </div>
              </div>
            </div>
            <el-card>
              <video
                :src="videoUrls"
                style="width: 200px; height: 200px; object-fit: fill"
                controls
                v-show="videoUrls != ''"
              ></video>
              <span v-show="videoUrls.length == 0">暂无视频</span>
            </el-card>

            <!--维修人员信息-->
            <div
              style="margin-top: 15px"
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-s-custom avue-group__icon"></i>
                  <h1 class="avue-group__title">维修人员信息</h1>
                </div>
              </div>
            </div>
            <el-card>
              <el-table
                ref="multipleTable"
                :data="repairPersonInfo"
                tooltip-effect="dark"
                style="width: 100%"
                max-height="240"
              >
                <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
                <el-table-column prop="realName" label="真名" width="150" align="center"></el-table-column>
                <el-table-column prop="phone" label="联系电话" width="170" align="center"></el-table-column>
              </el-table>
            </el-card>
          </el-card>
        </div>
      </el-col>

      <el-col :span="12">
        <open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :pointLonLat="pointLonLat" :routeRange="form.routeRange"></open-layers-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getUser} from "@/api/system/user"
import {isImage} from "@/util/determiningFileFormat";
export default {
  name: "repairsorderDetail",
  components: {OpenLayersMap},
  props:["detailInfo"],
  data(){
    return{
      form:{},
      pointLonLat: {},
      repairPersonInfo:[],
      picUrls:[],
      videoUrls:[],
    }
  },
  created() {
    this.form = this.detailInfo;
    if (this.form.picUrls){
      this.form.picUrls.forEach(e=>{
        if (isImage(e.value)){
          this.picUrls.push(e.value)
        }else {
          this.videoUrls.push(e.value)
        }
      })
    }
    this.pointLonLat = {
      lon:this.form.longitude,
      lat:this.form.latitude
    }
    this.getUser()
  },
  methods:{
    // 获取巡检人员信息
    getUser(){
      if (this.form.toUserId != -1){
        getUser(this.form.toUserId).then(res=>{
          if (res.data.code == 200){
            this.repairPersonInfo.push(res.data.data)
          }
        })
      }
    },
    handleBack(){
      this.$emit('isDetail');
    }
  },
}
</script>

<style scoped lang="scss">

/deep/ .el-table tbody tr:hover > td {
  background-color: #f3ec94 !important
}

.el-col {
  height: calc(100% - 5px);
}

.trackClass {
  height: 85vh;
  overflow: auto;
  overflow-x: hidden;
}

.receiving-alarm-box {
  line-height: 32px !important;
  height: 200px;
  overflow-y: auto;

  .el-card__body {
    padding: 0 10px !important;
  }
}

#old_video::-webkit-media-controls-timeline {
  display: block;
}

.backBtn{
  position: fixed;
  top: 20%;
  right: 3%;
  z-index: 99999;
}
</style>

 src/views/taskinfo/taskinfoDetail.vue

@@ -149,11 +149,13 @@
  methods:{
    //获取巡检人员信息
    getUser(){
      getUser(this.form.toUserId).then(res=>{
        if (res.data.code == 200){
          this.accepterInfo.push(res.data.data)
        }
      })
      if (this.form.toUserId != -1) {
        getUser(this.form.toUserId).then(res => {
          if (res.data.code == 200) {
            this.accepterInfo.push(res.data.data)
          }
        })
      }
    },
    handleBack(){
      this.$emit('isDetail');