From ca51ffc536988ce0e55b82b27c2f7a8bd5141976 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 21 Apr 2021 17:10:50 +0800
Subject: [PATCH] 添加audio相关插件，追踪页面，录音显示更换，图片展示，反馈视频展示
---
package-lock.json | 10 +++
src/main.js | 2
src/views/policeTracking/policeTracking.vue | 132 +++++++++++++++++++++-----------------------
package.json | 1
4 files changed, 76 insertions(+), 69 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5884a59..2fea7e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11817,6 +11817,16 @@
"vue-style-loader": "^4.1.0"
}
},
+ "vue-mobile-audio": {
+ "version": "0.1.3",
+ "resolved": "https://registry.npm.taobao.org/vue-mobile-audio/download/vue-mobile-audio-0.1.3.tgz",
+ "integrity": "sha1-LTrV14UgV5RC/JZzpzD68AoxGJY=",
+ "requires": {
+ "vue": "^2.5.17",
+ "vue-router": "^3.0.1",
+ "vuex": "^3.0.1"
+ }
+ },
"vue-router": {
"version": "3.4.9",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1610356181553&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz",
diff --git a/package.json b/package.json
index a52bed6..9bc4865 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
"vue": "^2.6.10",
"vue-axios": "^2.1.2",
"vue-i18n": "^8.7.0",
+ "vue-mobile-audio": "^0.1.3",
"vue-router": "^3.0.1",
"vuex": "^3.1.1"
},
diff --git a/src/main.js b/src/main.js
index eced8de..1485fae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,6 +25,8 @@
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
import * as echarts from 'echarts';
+import audio from 'vue-mobile-audio';
+Vue.use(audio);
Vue.prototype.$echarts = echarts;
// 注册全局crud驱动
window.$crudCommon = crudCommon;
diff --git a/src/views/policeTracking/policeTracking.vue b/src/views/policeTracking/policeTracking.vue
index df39cc2..5fbd3e5 100644
--- a/src/views/policeTracking/policeTracking.vue
+++ b/src/views/policeTracking/policeTracking.vue
@@ -295,16 +295,19 @@
class="el-collapse-item__header focusing is-active"
>
<div class="avue-group__header avue-group">
- <i class="el-icon-document avue-group__icon"></i>
+ <i class="el-icon-phone avue-group__icon"></i>
<h1 class="avue-group__title">对讲信息</h1>
</div>
</div>
</div>
- <el-card class="receiving-alarm-box">
- <div v-for="(item, index) in audios" :key="index" style="margin: 10px 0; width: 100%; height: 40px;">
- <audio :src="item.address" style="width: 40%; height: 100%;" controls></audio>
- </div>
+ <el-card class="audios-box">
+ <m-audio
+ :block="false"
+ v-for="(item, index) in audios"
+ :key="index"
+ :src="item.address"
+ ></m-audio>
</el-card>
<div
@@ -362,39 +365,10 @@
</el-row>
<el-row>
<el-col span="12">
- <el-form-item label="性别">
- <el-input
- disabled="true"
- v-model="security.sex"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="年龄">
- <el-input
- disabled="true"
- v-model="security.age"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row>
- <el-col span="12">
<el-form-item label="联系电话">
<el-input
disabled="true"
v-model="security.phone"
- autocomplete="off"
- ></el-input>
- </el-form-item>
- </el-col>
- <el-col span="12">
- <el-form-item label="家庭住址">
- <el-input
- disabled="true"
- v-model="security.address"
autocomplete="off"
></el-input>
</el-form-item>
@@ -432,7 +406,7 @@
<el-input
disabled="true"
type="textarea"
- v-model="security.snumber"
+ v-model="security.describe"
autocomplete="off"
></el-input>
@@ -455,23 +429,14 @@
</div>
</div>
</div>
- <div>
+ <el-card class="scene-image-box">
<el-image
- :src="src"
+ v-for="(item, index) in imgSrc"
+ :key="index"
+ :src="item"
:preview-src-list="srcList"
- style="width: 150px; margin-left: 5px"
></el-image>
- <el-image
- :src="src"
- :preview-src-list="srcList"
- style="width: 150px; margin-left: 5px"
- ></el-image>
- <el-image
- :src="src"
- :preview-src-list="srcList"
- style="width: 150px; margin-left: 5px"
- ></el-image>
- </div>
+ </el-card>
</div>
<div class="block">
<div
@@ -493,11 +458,11 @@
</div>
</div>
<div>
- <el-image :src="src" style="width: 150px; margin-left: 5px">
- <div slot="placeholder" class="image-slot">
- 加载中<span class="dot">...</span>
- </div>
- </el-image>
+ <video
+ :src="feedbackVideo"
+ style="width: 100%; height: 100%; object-fit: fill"
+ controls
+ ></video>
</div>
</div>
</div>
@@ -560,21 +525,9 @@
flag: true,
selectOptions: [],
receivingList: [],
- security: {
- snumber: 20018,
- sname: "金同涛",
- sex: "男",
- age: 23,
- phone: 1387975426,
- address: "江西省南昌市西湖区",
- },
- src:
- "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
- srcList: [
- "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
- "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
- "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
- ],
+ security: {},
+ imgSrc: [],
+ srcList: [],
form: {},
itemOption: {
menuBtn: false,
@@ -634,6 +587,7 @@
oldVideoSatart: false,
vaddress: null,
audios: [],
+ feedbackVideo: "",
};
},
created() {
@@ -645,6 +599,7 @@
mounted() {
this.getList();
this.getAudios();
+ this.getImgAndVideo();
this.$refs.mapDiv.onload = () => {
window.frames[0].init("AlertSecurity", {
x: this.form.jd,
@@ -889,6 +844,22 @@
this.audios = resdata.data.data.records;
});
},
+
+ getImgAndVideo() {
+ axios({
+ method: "post",
+ url: "/api/blade-jfpts/feedback/feedback/selectFeedEdit",
+ params: {
+ jid: this.form.id,
+ },
+ }).then((resdata) => {
+ console.log(resdata.data.data[0], 56569);
+ this.security = resdata.data.data[0].List[0];
+ this.imgSrc = resdata.data.data[0].tp;
+ this.srcList = resdata.data.data[0].tp;
+ this.feedbackVideo = resdata.data.data[0].sp[0];
+ });
+ },
},
};
</script>
@@ -912,4 +883,27 @@
padding: 0 10px !important;
}
}
+
+.audios-box,
+.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>
--
Gitblit v1.9.3