EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/views/enterprise/complaintEvaluate.vue

<template>
    <div class="address_edit">
        <!-- 导航栏 -->
        <!--<div class="header_body">
          <header-nav :slefBack="true" @goBack="goBack" :titelText="`评价详情`"></header-nav>
        </div>
        -->
        <!-- 中间 -->
        <div class="warp_body">

            <div class="cardsty"><label>处置单位</label><span>{{data.dataObj.orgText}}</span></div>
            <div class="cardsty">
                <h4>您对我们的执法执法满意吗？</h4>
                <div class="eval-item">
                    <label>处置速度</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.dealSpeedMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.dealSpeedMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 4">满意</span>
                    <span v-if="data.dataObj.dealSpeedMetrics == 5">非常满意</span>
                </div>
                <div class="eval-item">
                    <label>处置效果</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.dealEffectMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.dealEffectMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.dealEffectMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 4">满意</span>
                    <span v-if="data.dataObj.dealEffectMetrics == 5">非常满意</span>
                </div>
                <div class="eval-item">
                    <label>服务体验</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.serviceMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.serviceMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.serviceMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 4">满意</span>
                    <span v-if="data.dataObj.serviceMetrics == 5">非常满意</span>
                </div>
                <div class="eval-item">
                    <label>反馈质量</label>
                    <span class="eval-star">
                        <van-icon class="active" name="star" v-for="n in data.dataObj.feedbackQualityMetrics"/>
                        <van-icon name="star" v-for="n in (5 - data.dataObj.feedbackQualityMetrics)"/>
                    </span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 1">非常不满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 2">不满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 3">基本满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 4">满意</span>
                    <span v-if="data.dataObj.feedbackQualityMetrics == 5">非常满意</span>
                </div>

                <div class="eval-all">
                    <span>整体评价：</span>
                    <i class="verygood bad" v-if="data.dataObj.approveCode == 1 || data.dataObj.approveCode == 2"></i>
                    <i class="verygood good" v-if="data.dataObj.approveCode == 3 || data.dataObj.approveCode == 4"></i>
                    <i class="verygood" v-if="data.dataObj.approveCode == 5"></i>
                    <span v-if="data.dataObj.approveCode == 1">非常不满意</span>
                    <span v-if="data.dataObj.approveCode == 2">不满意</span>
                    <span v-if="data.dataObj.approveCode == 3">基本满意</span>
                    <span v-if="data.dataObj.approveCode == 4">满意</span>
                    <span v-if="data.dataObj.approveCode == 5">非常满意</span>
                    <span v-if="data.dataObj.approveCode == 6">未评价</span>
                    <span v-if="data.dataObj.approveCode == 7">无效评价</span>
                </div>

            </div>
            <div class="cardsty">
                <label>意见|建议</label>
                <div class="eval-cont">
                    {{data.dataObj.writingEvaluation}}
                </div>
            </div>

            <div class="file-upload">
                <div class="file-upload-center">
                    <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
                </div>
                <van-uploader v-model="submitData.fileObjList" class="file" multiple :show-upload="false" :deletable="false" readonly accept="image/*, video/*">
                    <template #preview-cover="{ file }">
<!--                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
                    </template>
                </van-uploader>
            </div>
            <video controls id="myVideo" v-for="(item, index) in data.videos">
                <source :src="item" type="video/mp4" />
            </video>
        </div>
    </div>
</template>

<script setup name="register">


    import {uploadFile} from '../../util/fileUpload'
    import {reactive, ref} from "vue";
    import * as w6s from 'szient-js-sdk';
    import {getObjByKey, mssqDownFile, mssqDownFiles} from "../../api/enterprise";

    const {useCommon, useMy} = $globalStore

    const router = useRouter();
    const route = useRoute();

    const data = reactive({
        dataObj: {
            dealSpeedMetrics: 0,
            dealEffectMetrics: 0,
            serviceMetrics: 0,
            feedbackQualityMetrics: 0,
            writingEvaluation: "",
        },
        videoPath: "",
        uploadPaths: [],
        videos: [],
    });
    //保存参数
    const submitData = reactive({
        fileObjList: [],
    });

    onMounted(() => {
        submitData.id = route?.query?.id;
        getObjById(submitData.id)
    });

    const getObjById = (proWorkCode) => {
        getObjByKey(proWorkCode, success => {
            data.dataObj = success.data
            if (null != data.dataObj.assessFiles && "" != data.dataObj.assessFiles) {
                var fileObj = JSON.parse(data.dataObj.assessFiles);
                for (var i=0; i<fileObj.length; i++) {
                    let suffix = fileObj[i].filePath.substring(fileObj[i].filePath.lastIndexOf("."));
                    downFile(fileObj[i].filePath, suffix);
                }
            }
        }, error => {})
    }
    const downFile = (uploadPath, suffix) => {
        mssqDownFile({"uploadPath": uploadPath}, success => {
            let obj = JSON.parse(success.data);
            if (".jpeg" == suffix) {
                toImage(obj.data);
                // submitData.images.push({"suffix":suffix, "url": obj.data});
            }
            if (".mp4" == suffix) {
                toVideo(obj.data);
                // console.log("obj.data mp4 ---> : ", obj.data);
                // submitData.video.push({"suffix":suffix, "url": obj.data});
            }
        }, error => {})
    }

    const downFiles = (uploadPaths) => {
        mssqDownFiles({"uploadPaths": uploadPaths}, success => {
            for (var i=0; i<success.data.length; i++) {
                let obj = JSON.parse(success.data[i]);
                console.log("base64 -----> : ", obj.data)
                let img = 'data:image/jpeg;base64,' + obj.data;
                let imgurl = base64ImgtoFile(img);
                console.log('imgurl===', imgurl)
                let url = window.webkitURL.createObjectURL(imgurl) || window.URL.createObjectURL(imgurl);
                // 创建图片地址
                submitData.fileListObj.push({
                    content: img,
                    File: imgurl,
                    name: 'v'+i,
                    status: 'done',
                    message: '上传中',
                    isImage: true,
                    url
                })
            }
            console.log("======> : ", submitData.fileListObj);
        }, error => {
        })
    }

    const toImage = (base64) => {
        let img = 'data:image/jpeg;base64,' + base64;
        let imgurl = base64ImgtoFile(img);
        let url = window.webkitURL.createObjectURL(imgurl) || window.URL.createObjectURL(imgurl);
        // 创建图片地址
        submitData.fileObjList.push({
            content: img,
            File: imgurl,
            name: 'v',
            status: 'done',
            message: '上传中',
            isImage: true,
            url
        })
    }

    const toVideo = (base64) => {
        let video = 'data:video/mp4;base64,' + base64;
        let vidoeurl = base64ImgtoFile(video);
        let url = window.webkitURL.createObjectURL(vidoeurl) || window.URL.createObjectURL(vidoeurl);
        // 创建视频地址
        // submitData.fileObjList.push({
        //     content: video,
        //     File: vidoeurl,
        //     name: 'v',
        //     status: 'done',
        //     message: '上传中',
        //     isImage: false,
        //     url
        // })
        data.videos.push(url);
    }

    const base64ImgtoFile = (dataurl, filename = 'file') => {
        const arr = dataurl.split(',')
        const mime = arr[0].match(/:(.*?);/)[1]
        const suffix = mime.split('/')[1]
        const bstr = atob(arr[1])
        let n = bstr.length
        const u8arr = new Uint8Array(n)
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
            type: mime
        })
    }


</script>

<style lang="less" scoped>
    .address_edit {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;
    }

    .warp_body {
        margin: 2% 3%;
        padding-bottom: 3rem;
        width: 94%;
        height: 100%;
        //border-radius: 0.25rem;
        //background-image: linear-gradient(to bottom, #ebf3fb, #fff);
        background: transparent;
        overflow-y: auto;
    }

    .file-upload {
        position: relative;
        min-height: 3.0rem;
        /*max-height: 6.5rem;*/
        padding: 1rem 0.27rem 0.27rem 0.43rem;
        box-sizing: border-box;
        background: #fff;
        border-radius: 0.2rem;
    }

    .file-upload-center {
        position: absolute;
        top: 0.27rem;
        left: 0.43rem;
        width: 90%;
        height: 0.65rem;
        font-size: 0.37rem;

        span {
            font-size: 0.32rem;
            color: rgb(221, 229, 227);
        }
    }

    .file {
        position: relative;
        width: 100%;
        height: calc(100% - 1.5rem);
    }

    /deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
        width: 1.95rem !important;
    }

    .preview-cover {
        position: absolute;
        bottom: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 4px;
        color: #fff;
        font-size: 0.32rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
    }

    .zoom {
        /*margin-top: 0.65rem;
        padding-top: 0.27rem;
        padding-left: 0.27rem;*/

        img {
            width: 1.95rem;
            height: 2rem;
            margin: 0 0.21rem 0.21rem 0;
            font-size: 0.35rem;
        }
    }

    .cardsty {
        margin: 3% 0;
        width: 100%;
        padding: 5%;
        background: #fff;
        border-radius: 0.2rem;
        font-size: 0.37rem;
        box-sizing: border-box;
    }

    .cardsty h4 {
        margin: 0.2rem 0 0.5rem;
        font-size: 0.42rem;
    }

    .cardsty label {
        margin-right: 0.3rem;
        color: #323233;
    }

    .eval-item {
        display: flex;
        align-items: center;
        margin: 0.27rem 0;
    }

    .eval-star {
        margin: 0 0.3rem 0 0.2rem;
    }

    .eval-star i {
        margin: 0 0.1rem;
        color: #ddd;
        font-size: 0.5rem;
    }

    .eval-star i.active {
        color: #fbb516;
    }

    .eval-all {
        display: flex;
        align-items: center;
        margin: 8% 2% 3%;
        padding: 8% 0 0 0;
        width: 96%;
        border-top: 0.02667rem solid #eee;
    }

    .eval-all i {
        display: inline-block;
        margin: 0 0.3rem 0 0.5rem;
        width: 0.75rem;
        height: 0.75rem;
        background: url("../../assets/images/eval-verygood.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-all i.good {
        background: url("../../assets/images/eval-good.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-all i.bad {
        background: url("../../assets/images/eval-bad.png") no-repeat;
        background-size: 100% 100%;
    }

    .eval-cont {
        margin: 3% 0;
        width: 100%;
        min-height: 3rem;
        border-radius: 0.2rem;
        border: 0.02667rem solid #eee;
        box-sizing: border-box;
        line-height: 1.5;
    }

</style>