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

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

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