Commit 025fe70a authored by “yiyousong”'s avatar “yiyousong”

perf: 评价报表添加评价人视频和音频信息查看

parent c8bda477
# 开发环境配置
NODE_ENV = development
# VUE_APP_API_BASE_URL=http://8.136.255.30:11078
VUE_APP_API_BASE_URL=http://192.168.0.98:11078
VUE_APP_API_BASE_URL=http://192.168.0.124:11078
#图片显示拼接
# VUE_APP_API_IMG_URL=http://8.136.255.30:11078/
VUE_APP_API_IMG_URL=http://192.168.0.98:11078/
VUE_APP_API_IMG_URL=http://192.168.0.124:11078/
#余林
# VUE_APP_API_PHP_URL=http://8.136.255.30:8090
VUE_APP_API_PHP_URL=http://192.168.0.98:8090
VUE_APP_API_PHP_URL=http://192.168.0.124:8090
#宜宾
#VUE_APP_API_BASE_URL=http://10.12.185.213:11072
......@@ -778,6 +778,13 @@ img {
// }
// }
.anticon-sound {
font-size: 20px;
color: #1890ff;
cursor: pointer;
}
// 统一设置表格为空时的展示
.ant-table-tbody {
td:empty::after {
......
<template>
<div class="previe-modal" v-if="Visible" @click="Visible = false">
<img @click.stop v-if="previeData.type === 'img'" :src="previeData.url" />
<video
@click.stop
v-else
:src="previeData.url"
autoplay
muted
controls
></video>
<a-icon type="close-circle" />
<div class="previe-modal" v-if="Visible">
<div class="main">
<img v-if="previeData.type === 'img'" :src="previeData.url" />
<video
v-else-if="previeData.type === 'video'"
:src="previeData.url"
autoplay
muted
controls
></video>
<audio
v-else-if="previeData.type === 'audio'"
controls
src="@/assets/images/out.mp3"
></audio>
</div>
<a-icon @click="Visible = false" type="close-circle" />
</div>
</template>
......@@ -55,10 +61,17 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
img,
video {
.main {
height: 400px;
max-width: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img,
video {
height: 100%;
object-fit: contain;
}
.anticon-close-circle {
......@@ -68,4 +81,4 @@ export default {
cursor: pointer;
}
}
</style>
\ No newline at end of file
</style>
......@@ -120,24 +120,35 @@
>
</a-col>
<a-col :span="12">
<span>
<span class="flex">
<span class="lable">评价人照片:</span>
<a-avatar
v-if="!detailsInfo.picture"
shape="square"
:size="40"
icon="user"
/>
<img
v-else
:src="baseurl + '/' + detailsInfo.picture"
@click="
$viewerApi({
images: [baseurl + '/' + detailsInfo.picture],
})
"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
/>
<span v-if="detailsInfo.picture || detailsInfo.process">
<img
v-if="detailsInfo.picture"
:src="baseurl + '/' + detailsInfo.picture"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="
$viewerApi({
images: [baseurl + '/' + detailsInfo.picture],
})
"
/>
<video
v-else-if="
detailsInfo.process &&
estimateVideo(detailsInfo.process)
"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + detailsInfo.process"
@click="checkMultimedia(detailsInfo.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(detailsInfo.process)"
/>
</span>
<a-avatar v-else shape="square" :size="40" icon="user" />
</span>
</a-col>
</a-row>
......@@ -382,11 +393,17 @@
</a-step>
</a-steps>
</div>
<!-- 音视频查看 -->
<PrevieModal
:previeData="previeData"
:previeVisible.sync="previeVisible"
></PrevieModal>
</a-drawer>
</div>
</template>
<script>
import PrevieModal from "@/components/PrevieModal.vue";
export default {
props: {
type: {
......@@ -412,9 +429,14 @@ export default {
},
},
},
components: {
PrevieModal,
},
data() {
return {
baseurl: process.env.VUE_APP_API_PHP_URL,
previeData: {},
previeVisible: false,
};
},
computed: {
......@@ -462,6 +484,30 @@ export default {
}
}
},
// 判断是否是视频文件
estimateVideo(url) {
let index = url.lastIndexOf(".");
let type = url.slice(index + 1);
return type === "mp4";
},
// 查看音视频
checkMultimedia(url) {
let isVideo = this.estimateVideo(url);
let curUrl = this.baseurl + "/" + url;
if (isVideo) {
this.previeData = {
type: "video",
url: curUrl,
};
} else {
this.previeData = {
type: "audio",
url: curUrl,
};
}
this.previeVisible = true;
},
},
};
</script>
......@@ -517,4 +563,4 @@ export default {
color: #656565;
}
}
</style>
\ No newline at end of file
</style>
......@@ -24,14 +24,27 @@
@change="changeTable"
>
<!-- 评价人照片 -->
<template slot="picture" slot-scope="text">
<a-avatar v-if="!text" shape="square" :size="40" icon="user" />
<img
v-else
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<template slot="picture" slot-scope="text, record">
<div v-if="text || record.process">
<img
v-if="text"
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<video
v-else-if="record.process && estimateVideo(record.process)"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + record.process"
@click="checkMultimedia(record.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(record.process)"
/>
</div>
<a-avatar v-else shape="square" :size="40" icon="user" />
</template>
<!-- 操作 -->
......@@ -61,13 +74,19 @@
:title="title"
:type="detailsType"
></HandlingDetails>
<!-- 音视频查看 -->
<PrevieModal
:previeData="previeData"
:previeVisible.sync="previeVisible"
></PrevieModal>
</div>
</template>
<script>
<script>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage";
import HandlingDetails from "./components/HandlingDetails.vue";
import PrevieModal from "@/components/PrevieModal.vue";
import { export2Excel } from "@/utils/js/exportExcel";
import { getEvaList, getEvaData, getEvaDetil } from "@/api/dataAdmin";
const tHeader = [
......@@ -93,6 +112,7 @@ const filterVal = [
export default {
components: {
HandlingDetails,
PrevieModal,
},
data() {
const columns = [
......@@ -205,6 +225,8 @@ export default {
return {
baseurl: process.env.VUE_APP_API_PHP_URL,
siteId: storage.get(2, "siteId"),
previeData: {},
previeVisible: false,
columns,
tHeader,
filterVal,
......@@ -417,9 +439,33 @@ export default {
onCancel() {},
});
},
// 判断是否是视频文件
estimateVideo(url) {
let index = url.lastIndexOf(".");
let type = url.slice(index + 1);
return type === "mp4";
},
// 查看音视频
checkMultimedia(url) {
let isVideo = this.estimateVideo(url);
let curUrl = this.baseurl + "/" + url;
if (isVideo) {
this.previeData = {
type: "video",
url: curUrl,
};
} else {
this.previeData = {
type: "audio",
url: curUrl,
};
}
this.previeVisible = true;
},
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<style lang="less" scoped></style>
......@@ -23,14 +23,27 @@
@change="changeTable"
>
<!-- 评价人照片 -->
<template slot="picture" slot-scope="text">
<a-avatar v-if="!text" shape="square" :size="40" icon="user" />
<img
v-else
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<template slot="picture" slot-scope="text, record">
<div v-if="text || record.process">
<img
v-if="text"
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<video
v-else-if="record.process && estimateVideo(record.process)"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + record.process"
@click="checkMultimedia(record.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(record.process)"
/>
</div>
<a-avatar v-else shape="square" :size="40" icon="user" />
</template>
<!-- 操作 -->
......@@ -60,13 +73,19 @@
:title="title"
:type="detailsType"
></HandlingDetails>
<!-- 音视频查看 -->
<PrevieModal
:previeData="previeData"
:previeVisible.sync="previeVisible"
></PrevieModal>
</div>
</template>
<script>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage";
import HandlingDetails from "./components/HandlingDetails.vue";
import PrevieModal from "@/components/PrevieModal.vue";
import { export2Excel } from "@/utils/js/exportExcel";
import { getEvaList, getEvaDetil, getQueEvaData } from "@/api/dataAdmin";
const tHeader = [
......@@ -92,6 +111,7 @@ const filterVal = [
export default {
components: {
HandlingDetails,
PrevieModal,
},
data() {
const columns = [
......@@ -202,6 +222,8 @@ export default {
return {
baseurl: process.env.VUE_APP_API_PHP_URL,
siteId: storage.get(2, "siteId"),
previeData: {},
previeVisible: false,
columns,
tHeader,
filterVal,
......@@ -413,9 +435,32 @@ export default {
onCancel() {},
});
},
// 判断是否是视频文件
estimateVideo(url) {
let index = url.lastIndexOf(".");
let type = url.slice(index + 1);
return type === "mp4";
},
// 查看音视频
checkMultimedia(url) {
let isVideo = this.estimateVideo(url);
let curUrl = this.baseurl + "/" + url;
if (isVideo) {
this.previeData = {
type: "video",
url: curUrl,
};
} else {
this.previeData = {
type: "audio",
url: curUrl,
};
}
this.previeVisible = true;
},
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<style lang="less" scoped></style>
......@@ -24,14 +24,27 @@
@change="changeTable"
>
<!-- 评价人照片 -->
<template slot="picture" slot-scope="text">
<a-avatar v-if="!text" shape="square" :size="40" icon="user" />
<img
v-else
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<template slot="picture" slot-scope="text, record">
<div v-if="text || record.process">
<img
v-if="text"
:src="baseurl + '/' + text"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
@click="$viewerApi({ images: [baseurl + '/' + text] })"
/>
<video
v-else-if="record.process && estimateVideo(record.process)"
class="cursor-pointer w-[50px] max-h-[50px] rounded-[4px]"
:src="baseurl + '/' + record.process"
@click="checkMultimedia(record.process)"
></video>
<a-icon
v-else
type="sound"
@click="checkMultimedia(record.process)"
/>
</div>
<a-avatar v-else shape="square" :size="40" icon="user" />
</template>
<!-- 操作 -->
......@@ -61,13 +74,19 @@
:title="title"
:type="detailsType"
></HandlingDetails>
<!-- 音视频查看 -->
<PrevieModal
:previeData="previeData"
:previeVisible.sync="previeVisible"
></PrevieModal>
</div>
</template>
<script>
import { mapState } from "vuex";
import storage from "@/utils/js/Storage";
import HandlingDetails from "./components/HandlingDetails.vue";
import PrevieModal from "@/components/PrevieModal.vue";
import { export2Excel } from "@/utils/js/exportExcel";
import { getEvaList, getEvaData, getEvaDetil } from "@/api/dataAdmin";
const tHeader = [
......@@ -93,6 +112,7 @@ const filterVal = [
export default {
components: {
HandlingDetails,
PrevieModal,
},
data() {
const columns = [
......@@ -206,6 +226,8 @@ export default {
columns,
tHeader,
filterVal,
previeData: {},
previeVisible: false,
tableData: [],
current: 1,
size: 10,
......@@ -415,9 +437,33 @@ export default {
onCancel() {},
});
},
// 判断是否是视频文件
estimateVideo(url) {
let index = url.lastIndexOf(".");
let type = url.slice(index + 1);
return type === "mp4";
},
// 查看音视频
checkMultimedia(url) {
let isVideo = this.estimateVideo(url);
let curUrl = this.baseurl + "/" + url;
if (isVideo) {
this.previeData = {
type: "video",
url: curUrl,
};
} else {
this.previeData = {
type: "audio",
url: curUrl,
};
}
this.previeVisible = true;
},
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<style lang="less" scoped></style>
......@@ -333,6 +333,7 @@ export default {
speed: 1000, // 时长
// simulateTouch: false, //是否允许鼠标滑动切换
grabCursor: false, // 手形鼠标
shortSwipes: false,
cubeEffect: {
shadow: false, // 取消盒子阴影
slideShadows: false, // 取消子项拖动时候的阴影
......@@ -457,33 +458,30 @@ export default {
// }
// }
@media(max-width: 1900px){
.slogan{
@media (max-width: 1900px) {
.slogan {
// font-size: 60px !important;
margin-left: 200px !important;
}
}
@media (max-width: 1700px){
.slogan{
@media (max-width: 1700px) {
.slogan {
// font-size: 60px !important;
margin-left: 100px !important;
}
}
@media (max-width: 1500px){
.slogan{
@media (max-width: 1500px) {
.slogan {
margin-left: 0px !important;
margin-right: 0px !important;
}
}
.login {
--pd: 9%;
--input-height: 50px;
--input-border-color: rgba(238, 238, 238, 1);
--time: 1s;
--time: 1.5s;
background: url("@/assets/images/login_bg.png");
background-size: 100% auto;
animation: bg-roll 150s cubic-bezier(0.21, 0.07, 0.88, 1.02) infinite;
......@@ -506,11 +504,11 @@ export default {
overflow: hidden;
}
.slogan-text-1 {
animation: printText var(--time) steps(5) both;
animation: printText var(--time) both;
}
.slogan-text-2 {
margin-left: 1em;
animation: var(--time) printText var(--time) steps(5) both;
animation: var(--time) printText var(--time) both;
}
.swiper {
width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment