文件预览源码

<template>
    <div>
        <div class="body-control">
            <div class="body-left">
                <h2>项目树</h2>
                <div class="demo-input-suffix">
                    <el-row :gutter="20">
                        <el-col :span="14" class="ipt-col">
                            <el-input v-model="projectName" class="w-50 m-2" @input="SearchProjectName"
                                placeholder="请输入项目名称" clearable>
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="3" :offset="7" class="icon-col">
                            <!-- <img src="../../assets//icons//add.png" alt=""> -->
                        </el-col>
                    </el-row>
                </div>
                <div class="data-list">
                    <div v-for="(item, index) in treeList" :key="index" :class="{ 'divactive': divactivenum == index }"
                        @click="detailnumFn(item.id, index,item.label)">
                        {{ item.label }}
                    </div>
                </div>
            </div>
            <div class="body-right">
                <div class="right-top">
                    <div class="top-tags">
                        <span type="primary" plain round @click="tagClickFn()"
                            :class="{ active: activeIndex == true }">全部<span v-show="cityCount != 0">({{ cityCount
                            }})</span>
                        </span>
                        <span type="primary" v-for="(item, index) in tagListproject" :class="{ active: item.show == false }"
                            :key="index" plain round @click="tagClickFn(item.district_id)">{{
                                item.district }}
                            <span v-show="item.number != 0">({{ item.count }})</span>
                        </span>
                    </div>
                    <el-form label-position="left" label-width="80px" :model="searchForm">
                        <el-row :gutter="5">
                            <el-col :span="8">
                                <el-form-item label="子任务名称:">
                                    <el-input v-model="searchzitaskname" placeholder="请输入关键字" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item class="search-btn">
                                    <el-button type="success" @click="searchziTask">查询</el-button>
                                    <el-button type="success" plain @click="resetsearchziTask">重置</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item>
                                    <!-- <el-button type="success" plain @click="submitProjectFn()" v-if="statusCode.status == 0 && statusCode.type == 1"> -->
                                    <!-- <el-button type="success" plain @click="submitProjectFn()"
                                        v-if="statusCode.status == 0 && statusCode.type == 1" style=" border-radius: 20px;">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                        <span> 提交任务</span>
                                    </el-button> -->
                                    <el-button type="success" plain @click="addProjectFn" style=" border-radius: 20px;">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                        <span> 创建任务</span>
                                    </el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="right-bottom">
                    <!-- 新增按钮 -->
                    <!-- <div class="addbtn">
                        <el-button type="success" plain @click="submitProjectFn()" v-if="statusCode.status == 0 && statusCode.type == 1">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            <span> 提交任务</span>
                        </el-button>
                        <el-button type="success" plain @click="addProjectFn">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            <span> 创建任务</span>
                        </el-button>
                    </div> -->
                    <!-- 表格 -->
                    <el-table row-key="taskId" :data="tableDatalist" class="one-table" style="width:100%;height: 520px;">
                         <el-table-column type="expand">
                            <template #default="props">
                                <div m="4" class="taskitem-test">
                                    <div style="height:50px"> 
                                        <span m="t-0 b-2" class="table-span">任务完成度: {{ getAvgFn(props.row.children)}} %</span>
                                        <span m="t-0 b-2" class="table-span">负责人: {{ props.row.leader }}</span>
                                        <span m="t-0 b-2" class="table-span">联系电话: {{ props.row.phone }}</span>
                                        <!-- <span m="t-0 b-2" class="table-span" v-if="props.row.district">默认模板: {{props.row.district }}</span> -->
                                     </div>
                                    <el-table :data="props.row.children" style="width: 95%; margin: auto;"
                                        class="two-table" default-expand-all> 
                                        <el-table-column type="expand" >
                                            <template #default="props">
                                                <el-table :data="props.row.standard" style="width: 90%; margin: auto;"
                                                    class="there-table">
                                                    <el-table-column label="评分标准" prop="name" />
                                                    <el-table-column label="任务数量" align="center" >
                                                        <template #default="scope">
                                                            <span  v-if="scope.row.type == 1" >{{ scope.row.complete}}<span style="margin-left:3px">份</span></span>
                                                            <span v-else >{{ scope.row.complete}}/{{ scope.row.num}}<span style="margin-left:3px">项</span></span>
                                                        </template>
                                                    </el-table-column>
                                                     <el-table-column label="操作" align="center">
                                                         <template #default="scope">
                                                            <!-- 详情 -->
                                                            <span @click="standardDetailFn(scope.row)"><img src="../../assets/project/detail.png" alt=""></span>
                                                                <!-- 开关 -->
                                                               <el-tooltip content="显示/隐藏问卷的可见" effect="light">
                                                                    <el-switch active-value="1" inactive-value="0"  
                                                                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"  
                                                                    v-if="scope.row.type == 1" 
                                                                     v-model="scope.row.can_write" @change="handleSwitchChange(scope.row)" />
                                                               </el-tooltip> 
                                                               <!-- 满意度 -->
                                                                 <el-popover
                                                                    placement="bottom"
                                                                    :width="250"
                                                                    trigger="click"
                                                                    :show-after="500"
                                                                >
                                                                    <template #reference>
                                                                             <el-icon  v-if="scope.row.type == 1" v-preventReClick="2000" @click="satisfactionFn(scope.row.id)" class="Satisfaction"><DataLine /></el-icon>
                                                                    </template>
                                                                      <div v-if="satisfactionValue != null">
                                                                        <div>问卷填写总数为: <span style="color: rgb(48, 48, 216);">{{ satisfactionValue.totalCount }}</span></div>
                                                                        <div>满意度达标的份数为: <span style="color: #13ce66;">{{ satisfactionValue.satisfiedCount }}</span></div>
                                                                        <div>满意度未达标的份数为: <span style="color: brown;">{{ satisfactionValue.unsatisfiedCount }}</span></div>
                                                                        <div>综合得分为: <span style="color: #13ce66;">{{ satisfactionValue.score }}</span></div>
                                                                    </div>
                                                                    <div v-else>
                                                                          暂未查询到该问卷的填写信息
                                                                    </div>
                                                                </el-popover>
                                                                <!-- 问卷数据导出 -->
                                                                 <el-tooltip content="满意度问卷数据导出" effect="light">
                                                                     <el-icon v-if="scope.row.type == 1" class="Export" v-preventReClick="2000" @click="exportFn(scope.row)"><TakeawayBox /></el-icon>
                                                                 </el-tooltip>
                                                                     <el-tooltip content="评价部分问题数据导出" effect="light">
                                                                         <el-icon v-if="scope.row.type == 0" class="Export" v-preventReClick="2000" @click="problemExportFn(scope.row, props.row.taskId)"><TakeawayBox /></el-icon>
                                                                     </el-tooltip>
                                                        </template>
                                                     </el-table-column>
                                                </el-table>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="子任务" prop="district" :show-overflow-tooltip='true' />
                                        <el-table-column label="子任务执行人" prop="childrenexecutor"
                                            :show-overflow-tooltip='true' />
                                         <el-table-column label="执行时间段" :show-overflow-tooltip='true'>
                                            <template v-slot="{ row }">
                                                <span>{{ row.startTime ? moment(row.startTime).format('yyyy-MM-DD') : ''
                                                }}</span>
                                                <span>~</span>
                                                <span>{{ row.endTime ? moment(row.endTime).format('yyyy-MM-DD') : ''
                                                }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="子任务进度" prop="process">
                                              <template v-slot="{ row }">
                                                {{ row.process ? row.process : 0 }}%
                                                </template>
                                        </el-table-column>
                                        <el-table-column label="分配时间" :show-overflow-tooltip='true'>
                                            <template v-slot="{ row }">
                                                <div>{{ row.allocateTime ? moment(row.allocateTime).format('yyyy-MM-DD') :
                                                    '' }}</div>
                                            </template>
                                        </el-table-column>
                                        <!-- <el-table-column label="项目名称">
                                        </el-table-column> -->
                                        <el-table-column label="详情" align="center" width="210">
                                            <template #default="scope">
                                            <span @click="fuJianFn(scope.row.taskId)"><img src="../../assets/project/annex.png" alt=""> &nbsp;</span>
                                            <span @click="detailFn(scope.$index, scope.row, props.row.taskId)"><img src="../../assets/project/detail.png" alt=""></span>
                                            <span @click="addTaskAttachmentFn(scope.row.taskId)">&nbsp; <img src="../../assets/project/Export.png" alt=""></span>
                                            </template>
                                         </el-table-column>
                                    </el-table>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="任务" prop="name" :show-overflow-tooltip='true' />
                        <el-table-column label="市县/区划" prop="district" />
                        <el-table-column label="任务状态" prop="status">
                            <template #default="scope">
                                <div v-if="scope.row.addStatus == '10'">待提交</div>
                                <div v-else-if="scope.row.addStatus == '20'">待下发审核</div> 
                                <div v-else-if="scope.row.addStatus == '30'">执行中</div> 
                                <div v-else-if="scope.row.addStatus == '40'">待预审</div> 
                                <div v-else-if="scope.row.addStatus == '50'">待终审</div> 
                                <div v-else>完成</div>
                                <!-- <div v-if="scope.row.status == '1'">待下发审核</div> -->
                                <!-- <div v-if="scope.row.status == '2'">执行中</div>
                                <div v-if="scope.row.status == '3'">待预审</div>
                                <div v-if="scope.row.status == '4'">待终审</div>
                                <div v-if="scope.row.status == '5'">完成</div> -->
                             </template>
                        </el-table-column>
                        <el-table-column label="操作" width="210">
                            <template #default="scope">
                                <span @click="submitTaskFn(scope.row.taskId)"
                                    v-if="scope.row.sonTaskStatus"
                                    style="cursor: pointer;color: rgba(42, 130, 228, 1);">提交 &nbsp;</span>
                                <!-- <span @click="submitTaskFn(scope.row.taskId)"
                                    v-if="sonTaskStatus(scope.row.children || null)"
                                    style="cursor: pointer;color: rgba(42, 130, 228, 1);">提交 &nbsp;</span> -->
                                <!-- <span @click="submitTaskFn(scope.row.taskId)" v-if="hasApproval" style="cursor: pointer;color: rgba(42, 130, 228, 1);">提交 &nbsp;</span> -->
                                <span @click="editTaskBtn(scope.$index, scope.row)"
                                 v-if="scope.row.sonTaskStatus"
                                    style=" cursor: pointer;color: rgba(255, 195, 0, 1);">编辑 &nbsp;</span>
                                <span @click="deleteTaskBtn(scope.$index, scope.row)"
                                    style=" cursor: pointer;color: rgba(255, 87, 51, 1);"> 删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="demo-pagination-block">
                        <el-pagination v-model:current-page="currentPagetask" v-model:page-size="pageSizetask"
                            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
                            :total="currentPagetasktotal" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 上传弹窗 -->
        <el-dialog v-model="dialogFormVisible"  class="upload-dialog" title="上传附件" id="dialogShow">
            <p style="color: #adabab;font-size: 12px;"> 注 : 仅能上传图片, 视频, pdf, Word(.docx), Excel(.xlsx)表格等类型文件</p>
            <el-upload class="upload-demo" drag :on-remove="handleRemoves" action="#" :http-request="handleBeforeUpload"
                :on-success="handleAvatarSuccess" :show-file-list="false">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    拖动上传or<em>点击上传</em>
                </div>
                <template #tip>
                    <div class="file-list-box" style="height: 250px;overflow: auto;">
                         <div class="el-upload__tip" v-for="(item, index) in fileListArr" :key="index">
                            <p><span style="width: 50%;display: inline-block;">{{ item.name }}</span> <span
                                    style="cursor: pointer;" @click="fileDeleteFn(item.id)">X</span></p>
                        </div>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="quXiaoUpload()">取消</el-button>
                    <el-button type="primary" @click="addFileFn()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- //显示附件弹窗 -->
        <el-dialog v-model="dialogTabsVisible" title="附件展示" class="file-show-box" @close="closeDialog()">
            <div class="file-body">
                <!-- 左侧附件列表 -->
                <div class="file-left" >
                    <div class="list" :class="{'list-active' : listAct == index}" v-for="(item, index) in fileList" :key="index" @click="handleClick(item,index)">{{ item.name }}</div>
                </div>
                <div class="file-right">
                    <div class="downFile" v-if="fileType != 'pdf'">
                            <el-button @click="DownloadFn()"> 下载</el-button>
                    </div>
                    <!-- 若是图片数据展示 -->
                    <img style="width: 150px;height: 150px;" :src="fileAddress" alt="" v-if="fileType == 'jpg' || fileType == 'png'">
                    <!-- 若是txt格式数据展示 -->
                    <iframe :src="fileAddress" frameborder="0" v-else-if="fileType == 'txt'" style="width: 90%; height: 100%;"></iframe>
                    <!-- 若是pdf数据展示 -->
                    <iframe :src="fileAddress"   type="application/pdf"  v-else-if="fileType == 'pdf'" id="pdfShow" width="100%" height="100%"></iframe>
                    <!-- 若是word文档格式数据号展示 -->
                    <div ref="refWord" id="fileShow" v-else-if="fileType == 'docx'" style="width: 100%;height: 100%;"></div>
                    <!-- 若是excel格式数据展示 -->
                    <div  id="fileShowTwo" style="width: 100%;height: 100%;" v-else-if="fileType == 'xlsx'">
                           <div class="tab">
                            <el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
                                <el-radio-button v-for="(item, index) in excel.sheetNames" :key="index" :label="item"></el-radio-button>
                            </el-radio-group>
                            </div>
                            <div
                                style="margin-top: 5px;border: 1px solid #a0a0a0;">
                            <div v-html="excel.SheetActiveTable" style="padding: 10px 15px"></div>
                            </div>
                    </div>
                    <div v-else-if="fileType == 'mp4'" style="width: 100%;height: 100%;">
                        <video :src="fileAddress" controls  style="width: 100%;height: 100%;"></video>
                    </div>
                    <div v-else>
                            该文件暂不支持预览,请下载查看
                    </div>
                </div>
            </div>
        </el-dialog>

          <el-dialog v-model="exportDialogTableVisible" title="导出选项" class="exportDialog">
            <span>请选择您要导出的内容</span>
            <div style="margin: 10px 0px;">
                <el-checkbox-group v-model="checkList" @change="handCheckFn">
                  <el-checkbox checked :label="item.fieldId" v-for="(item,index) in labelArrList" :key="index">{{item.fieldName}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-table
                ref="multipleTableRef"
                :data="showCheckValue"
                style="width: 100%;height: 100%;"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column label="选项">
                        <template #default="scope">{{ scope.row.value }}</template>
                </el-table-column>
            </el-table>
               <template #footer>
                <span class="dialog-footer">
                    <el-button @click="exportDialogTableVisible = false">取消</el-button>
                    <el-button type="primary" @click="ExportDataListFn()">
                    导出
                    </el-button>
                </span>
                </template>
          </el-dialog>

    </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance, toRefs } from 'vue'
import { useUserStore } from '@/store/modules/manifest'
const useStore = useUserStore()
const { proxy } = getCurrentInstance();
//word文档注释
import { renderAsync } from 'docx-preview';
//excel注释
import * as XLSX from "xlsx";

import { useRouter } from 'vue-router';
import { getfileupload, getfiledownload, download } from '@/api/filesevers/index'
import {
    getTreeList, getTaskAttachment, getTaskdistrictnum, getTaskList, deleteTask,
    deleteTaskitem, submitProjectApi, getProjectTaskStatus, submitTaskApi, getOutlineLeader, getOutlineMember,
    addTaskAttachment, getOpenQuestionnaire, getQuestionnaireScoreListApi, getQuestionnaireInfo, getTaskItemType,
    getTaskItemIdList, getTaskItemNum, getExportQuestionnaireApi, getExportProblemApi
} from '@/api/project/index'
import { ElMessage, ElMessageBox , ElLoading, ElNotification  } from 'element-plus'
import moment from "moment";
const activeNum = ref(0)
const dialogFormVisible = ref(false)
const dialogTabsVisible = ref(false)
// 导出弹窗
const exportDialogTableVisible = ref(false)
const projectName = ref('')
const divactivenum = ref(0)
const searchzitaskname = ref("")
const file = ref()
// 分页
const currentPagetask = ref(1)
const pageSizetask = ref(10)
const currentPagetasktotal = ref(10)

// 弹窗加载loading数据
const loading = ref(true)

// 求子任务平均值
const getAvgFn = (child) => { 
    if (child.length > 0) {
        // 提取每个 "child" 内的 "process" 值，并计算平均值
        var total = 0;  // 初始化总和
        var count = 0;  // 初始化计数器

        for (var i = 0; i < child.length; i++) {
            var processValue = child[i].process;
            total += processValue;
            count++;
        }

        // 计算平均值
        var average = total / count;
        // //console.log(average,'child');
    } else { 
        var average = 0
    }
    return average

}

const handleSizeChange = (val) => {
    pageSizetask.value = val
    gettablelist()

}
const handleCurrentChange = (val) => {
    currentPagetask.value = val
    gettablelist()
}
//表格预览所需数据
const data = reactive({
    excel: {
        // 数据
        workbook: {},
        // 表名称集合
        sheetNames: [],
        // 激活项
        sheetNameActive: "",
        // 当前激活表格
        SheetActiveTable: ""
    }
})
const { excel } = toRefs(data);
// 视频预览所需数据
const emptyTips = ref('暂无内容');
// 下载文件
// 文件地址
const fileAddress = ref('')
// 下载流数据
const blobUploadValue = ref('')
const downloadFn = (id, type) => {
    let params = { fileId: id }
    download(params).then(result => {
        // //console.log(result.url, 'resolve');
        // //console.log(result.blob, 'blob');
         blobUploadValue.value = result.url
        if (type == 'jpg' || type == 'png' || type == 'mp4') {
            //格式为图片 视频时
            fileAddress.value = result.url
        } else if (type == 'docx') {
            //格式为word时
            const previewContainer = document.getElementById('fileShow');
            renderAsync(result.blob, previewContainer) //渲染
        } else if (type == 'xlsx') {
            //格式为excel时
            const reader = new FileReader();
            //通过readAsArrayBuffer将blob转换为ArrayBuffer对象
            reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流
            reader.onload = (event) => {
                // 读取ArrayBuffer数据变成Uint8Array
                var data = new Uint8Array(event.target.result);
                // 这里的data里面的类型和后面的type类型要对应
                var workbook = XLSX.read(data, { type: "array" });
                const sheetNames = workbook.SheetNames // 工作表名称集合
                excel.value.workbook = workbook
                excel.value.sheetNames = sheetNames
                excel.value.sheetNameActive = sheetNames[0]
                getSheetNameTable(sheetNames[0])
            };
        } else if (type == 'pdf') {
            //格式为pdf时
             const reader = new FileReader();
            reader.readAsArrayBuffer(result.blob);
            reader.onload = function () {
                fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))
            }
        }
    })
}

// 文件下载
const DownloadFn = () => { 
    let a = document.createElement('a')
     // 下载链接
    a.href = blobUploadValue.value
    // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
    a.download = fileNameValue.value + '.' + fileType.value
    document.body.appendChild(a)
    // 点击a标签，进行下载 
    a.click()
    // 移除元素
    document.body.removeChild(a)
}

const getSheetNameTable = (sheetName) => { 
      try {
        // 获取当前工作表的数据
        const worksheet = excel.value.workbook.Sheets[sheetName]
        // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改
        let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
        htmlData = htmlData === '' ? htmlData : htmlData.replace(/<table/, '<table class="default-table" border="1px solid #ccc" cellpadding="0" cellspacing="0"')
        // 第一行进行改颜色
        htmlData = htmlData === '' ? htmlData : htmlData.replace(/<tr/, '<tr style="background:#b4c9e8"')
        excel.value.SheetActiveTable = htmlData
    } catch (e) {
        // 如果工作表没有数据则到这里来处理
        excel.value.SheetActiveTable = '<h4 style="text-align: center">' + emptyTips.value + '</h4>'
    }
}

//弹框关闭事件
const closeDialog = () => {
    fileType.value = ''
}


// 模板详情
const standardDetailFn = (row) => {  
    router.push({ path: '/evaluate/standard/detail', query: { id: row.standardId } })
    useStore.setTemplateValue(row.standardId)    
}
// 标签点击
//标签数组
const tagArrList = ref([])
// 备用数组
const beiArrList = ref([])
// 全部选中样式
const activeIndex = ref(true)
// const zhongEdit = ref(true)
const tagClickFn = (id) => {
    if (id == '' || id == undefined) {
        activeIndex.value = !activeIndex.value
        if (activeIndex.value == false) {
            for (const item of tagListproject.value) {
                item.show = false
            }
        } else {
            tagArrList.value = beiArrList.value
            for (const item of tagListproject.value) {
                item.show = true
            }
        }
    } else {
        activeIndex.value = false
        tagArrList.value = []
        tagArrList.value.push(id)
    }
    // 遍历第二个数组
    for (const item of tagListproject.value) {
        // 检查当前对象的district_id是否存在于第一个数组中
        if (tagArrList.value.includes(item.district_id)) {
            // 如果存在，将show属性设置为false
            item.show = !item.show;
        }
    }

    tagArrList.value = tagListproject.value
        .filter(item => item.show === false)
        .map(item => item.district_id);

    if (tagListproject.value.every(tag => tagArrList.value.includes(tag.district_id))) {
        activeIndex.value = true
        if (id == '') {
            activeIndex.value = false;
        }
    }
    gettablelist()
}



const currentprojectId = ref("")

const router = useRouter()
const searchForm = ref({
    name: '',
    sex: ''
})
// 表格数据

const tableDatalist = ref([])
const treeList = ref([])
let labelName = ref('')
// const pageSize = ref(10)
// const pageNum = ref(1)
// 获取数据方法

function getList() {
    let params = {
        name: projectName.value
    }
    // 获取项目数数据
    getTreeList(params).then(res => {
        if (res.code == 200 && res.data) {
            treeList.value = res.data
            // 获取第一条数据在右边
            if (res.data.length > 0) {
                let firstid = res.data[0].id
                currentprojectId.value = res.data[0].id
                labelName.value = res.data[0].label
                if (edit.value == true) {
                    detailnumFn(firstid, 0)
                } else { 
                      detailnumFn(useStore.value, useStore.index)
                }
            }
        }
    })
}
const switchValue = ref(false)
// 开关切换数值事件  getOpenQuestionnaire
const handleSwitchChange = (value) => { 
    
    switchValue.value = value.id
    if (value.can_write == 0) {
           switchValue.value = false
    } else { 
         switchValue.value = true
    }
    getOpenQuestionnaireFn(value.id)
}
// 打开关闭调查问卷
const getOpenQuestionnaireFn = (id) => { 
    let obj = {
        taskItemId: id,
        open: switchValue.value
    }
    getOpenQuestionnaire(obj).then(res => { 
        if (res.code == 200) { 
            if (switchValue.value == false) {
                ElMessage({
                    type: 'success',
                    message: '关闭成功',
                })
            } else { 
                 ElMessage({
                    type: 'success',
                    message: '开启成功',
                })
            }
            // 刷新表格数据
            // getList()
        }
    })
}

const satisfactionValue = ref({})
// 获取填写的问卷评分数据
const satisfactionFn = (id) => { 
     let params = {
        taskItemId: id,
    }
    getQuestionnaireScoreListApi(params).then(res => {
        // //console.log(res);
        if (res.code == 200 && res.data != null) {
            satisfactionValue.value = res.data
            // let totalCount = res.data.totalCount
            // let score = res.data.score
            // let satisfiedCount = res.data.satisfiedCount
            // let unsatisfiedCount = res.data.unsatisfiedCount
            // satisfactionValue.value = '问卷填写总数为:' + totalCount + "/n" + '满意度达标的份数为:' + satisfiedCount + "/n" + '满意度未达标的份数为:' + unsatisfiedCount + "/n" + '综合得分为:' + score
        } else { 
            satisfactionValue.value = null
        }
    })
}
//搜索
const SearchProjectName = () => {
    getList()
}

// 城市标签总数
const cityCount = ref(0)
//任务接口
const detailnumFn = (id, index, label) => {
    labelName.value = label
    currentprojectId.value = id
    divactivenum.value = index
    let params = {
        projectId: currentprojectId.value
    }
    getTaskdistrictnum(params).then(res => {
        cityCount.value = 0
        tagArrList.value = []
        if (res.code == 200 && res.data) {
           
            // 标签id数组
            res.data.forEach((value, index, array) => {
                cityCount.value += value.count
                tagArrList.value.push(value.district_id)
                beiArrList.value.push(value.district_id)
                value.show = false
            })
              // 标签数组
            tagListproject.value = res.data
            gettablelist()
              
            // 遍历第二个数组
            // for (const item of  tagListproject.value) {
            //     // 检查当前对象的district_id是否存在于第一个数组中
            //     if (tagArrList.value.includes(item.district_id)) {
            //         // 如果存在，将show属性设置为false
            //         item.show = !item.show;
            //     }
            // }
             
        }
    })
}
const gettablelist = () => {
    // 加载图
    var loadingInstance = ElLoading.service({
        target: '.one-table', // 这里替换为你要加载的元素的选择器
        text: '加载中...', // 可选，加载提示文本
      });
    
    let tagArrLists = tagArrList.value
    let projectId = currentprojectId.value
    let name = searchzitaskname.value
    let pageSize = pageSizetask.value
    let pageNum = currentPagetask.value

    getTaskList(tagArrLists, projectId, name, pageSize, pageNum).then((res) => {
      
        if (res.code == 200 && res.data) {

            currentPagetasktotal.value = res.data.count

            for (let index = 0; index < res.data.data.length; index++) {
                const i = res.data.data[index];
                i["sonTaskStatus"] = sonTaskStatus(i.children || null);
                i["addStatus"] = addStatus(i.children || null);
                for (let index = 0; index < i.children.length; index++) {
                    const j = i.children[index];
                    if (j.executor) {
                        if (j.executor.length > 1) {
                            j.childrenexecutor = j.executor[0].name + "，" + j.executor[1].name

                        } else {
                            j.childrenexecutor = j.executor[0].name
                        }
                    }

                }
            }
            tableDatalist.value = res.data.data
            loadingInstance.close()
        } else { 
              loadingInstance.close()
        }
    })
}
// 搜索
const searchziTask = () => {
    gettablelist()
}
// 重置
const resetsearchziTask = () => {
    searchzitaskname.value = ""
    pageSizetask.value = 10
    currentPagetask.value = 1
    gettablelist()
}
// 删除任务
const deleteTaskBtn = (index, item) => {
    ElMessageBox.confirm(
        '确定要删除该任务吗?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: '删除',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            deleteTask(item.taskId).then((res) => {
                if (res.code == 200) {
                    detailnumFn(currentprojectId.value, divactivenum.value)
                }
            })
        })
        .catch(() => {
            // ElMessage({
            //     type: 'info',
            //     message: '取消',
            // })
        })
}
// 提交项目进入待下发状态
const submitProjectFn = () => {
    let obj = {
        projectId: currentprojectId.value
    }
    ElMessageBox.confirm(
        '是否确认提交此项目',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            submitProjectApi(obj).then(res => {
                if (res.data == true) {
                    ElMessage({
                        type: 'success',
                        message: '提交成功',
                    })
                    detailnumFn(currentprojectId.value)
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '提交失败',
            })
        })
}
// 提交任务到待下发状态 submitTaskApi
const submitTaskFn = (id) => {
    let obj = {
        taskId: id
    }
    ElMessageBox.confirm(
        '是否确认提交此任务',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            submitTaskApi(obj).then(res => {
                if (res.data == true) {
                    ElMessage({
                        type: 'success',
                        message: '提交成功',
                    })
                    detailnumFn(currentprojectId.value)
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '提交失败',
            })
        })
}
const typename = ref("")
// 编辑任务
const editTaskBtn = (index, item) => {
    typename.value = "edit"
        if (item.taskId) { 
            router.push({ path: '/task/manifest/addTask', query: { id: currentprojectId.value, name: item.name, taskId: item.taskId, typename: typename.value } })
            useStore.setValue(currentprojectId.value, divactivenum.value)
        }
}

const statusCode = ref({
    status: '',
    type: ''
})
// 获取项目下的所有子任务的审核状态
const getStatusFn = (id) => {
    let obj = {
        projectId: id
    }
    getProjectTaskStatus(obj).then(res => {
        if (res.code == 200 && res.data) {
            statusCode.value = res.data
        }
    })
}
const typeStatus = ref(null)
const hasApproval = ref(null)
// 获取任务下的所有子任务null的审核状态
const sonTaskStatus = (children) => {
    if (children != null) {
        const hasApproval = children.some(child => {
            const approval = child.approval;
            return approval && approval.type == '1' && approval.status == '0';
        });
        typeStatus.value = hasApproval
        return hasApproval
    }
}
// 状态判断 
const addStatus = (children) => {
    if (children != null) { 
        var result = ''
        children.forEach((value, index, array) => {
             if (value.approval) {
                 if (value.approval.type === "3") {
                    //  //console.log("Return 30");
                      result = 30;
                     // 返回30的逻辑
                 } else if (value.approval.type === "2") {
                     //  //console.log("Return 20");
                    result = 20;
                     // 返回20的逻辑
                 } else if (value.approval.type === "1") { 
                     // //console.log("Return 10");
                     result = 10;
                 }else if (value.approval.type === "4") {
                    // //console.log("Return 10");
                    result = 40;
                } else if (value.approval.type === "5") {
                    // //console.log("Return 10");
                    result = 50;
                 } else {
                    result = ''
                }
            }
        })
    }
    return  result
}
// 获取离线职员组长列表
// const getOutlineLeaderFn=()=>{ 
//     getOutlineLeader().then(res => { 
//     })
// }
// 获取离线职员组员列表
// const getOutlineMemberFn=()=>{ 
//     getOutlineMember().then(res => { 
//     })
// }
// 根据任务id获取附件
const fileList = ref([])
const fuJianFn = (id) => {
    dialogTabsVisible.value = true
    let obj = { taskId: id }
    getTaskAttachment(obj).then(res => {
        if (res.code == 200 && res.data) {
            fileList.value = res.data
            handleClick('',0)
        }
    })
}
// 根据任务id绑定附件
const taskId = ref('')
const addTaskAttachmentFn = (id) => {
    taskId.value = id
    dialogFormVisible.value = true
}
const addFileFn = () => {
    let obj = {
        files: uploadFileId.value,
        taskId: taskId.value
    }
    addTaskAttachment(obj).then(res => {
        // //console.log(res);
        if (res.code == 200) {
            dialogFormVisible.value = false
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
        } else {
            ElMessage({
                type: 'info',
                message: res.msg,
            })
        }
    })
}
// 取消上传
const quXiaoUpload = () => {
    dialogFormVisible.value = false
    fileListArr.value = []
    uploadFileId.value = []
}
// 标签页切换
const listAct = ref(0)
const fileType = ref('')
const fileNameValue = ref('')
const handleClick = (item, tab) => {
    listAct.value = tab
    let id = ''
    if (tab != 0) {
        id = item.fileId
        fileType.value = item.format
        fileNameValue.value = item.name
        downloadFn(id, fileType.value)
    } else {
        if (fileList.value.length > 0) { 
            id = fileList.value[0].fileId
            fileType.value = fileList.value[0].format
            fileNameValue.value = fileList.value[0].name
            downloadFn(id, fileType.value)
        }
    }
    // //console.log(fileType.value, 'type');
}

const edit = ref(false)
onMounted(() => {
    if (useStore.value && useStore.index) {
        edit.value = false
    } else {
        edit.value = true
    }
        getList()
    // //console.log(useStore.value, useStore.index,'2222');
});
const tagListproject = ref([])
// 详情跳转方法
function detailFn(item, row, id) {
    if (row.taskId) { 
        router.push({ path: '/task/manifest/detail', query: { taskItemId: row.taskId} })
        useStore.setDetailValue(row.taskId)
    }
}
// 新建任务跳转方法
function addProjectFn() {
    typename.value = "add"
    if (currentprojectId.value) { 
        router.push({ path: '/task/manifest/addTask', query: { id: currentprojectId.value, typename: typename.value } })
        useStore.setTaskAndNameValue(currentprojectId.value, typename.value)
    }
}
// 上传附件成功
const handleAvatarSuccess = (res) => {
    // //console.log(res,'1111');
}
const uploadFileId = ref([])
const fileListArr = ref([])
const fileName = ref('')
// 上传附件之前
const handleBeforeUpload = (file) => {
    var loadingInstance = ElLoading.service({
        target: '#dialogShow', // 这里替换为你要加载的元素的选择器
        text: '加载中...', // 可选，加载提示文本
    });
    // //console.log(file, '上传的附件');
     const allowedFileTypes = [
        'image/jpeg',   // JPEG 图像文件
        'image/png',    // PNG 图像文件
        'video/mp4',    // MP4 视频文件
        'video/avi',    // AVI 视频文件 (请确认正确的MIME类型)
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',  // Microsoft Excel 文档
         'application/vnd.openxmlformats-officedocument.wordprocessingml.document',  // Microsoft Word  表格
         'application/pdf',
    ];

    const maxSizeImage = 5 * 1024 * 1024; // 5MB in bytes
    const maxSizeFile = 500 * 1024 * 1024; // 500MB in bytes
    // 获取文件的类型
    const fileType = file.file.type;
    const fileSize = file.file.size;
    // 文件类型校验
        if (!allowedFileTypes.includes(fileType)) {
            ElMessage({
                type: 'error',
                message: '上传格式错误',
            })
            return false; // 阻止文件上传
        } else {
            //文件大小校验
        if (fileType.startsWith('image/') && fileSize > maxSizeImage) {
            ElMessage({
                type: 'error',
                message: '图片大小不能超过5MB',
            });
            return false; // 阻止文件上传
        } else if (fileType.startsWith('video/') || fileType.startsWith('application/')) {
            // 对于视频、文档等类型的文件，限制大小为500MB
            if (fileSize > maxSizeFile) {
                ElMessage({
                    type: 'error',
                    message: '文件大小不能超过500MB',
                });
                return false; // 阻止文件上传
            }
        }
            getfileupload(file.file).then((res) => {
                if (res.code == 200 && res.data) {
                    fileName.value = res.data.name
                    let obj = { name: res.data.name + '.' + res.data.format, id: res.data.fileId }
                    fileListArr.value.push(obj)
                    let id = res.data.fileId
                    uploadFileId.value.push(id)
                    loadingInstance.close()
                }
            })
        }
}

const handleRemoves = (file) => {
}
// 删除上传附件列表
const fileDeleteFn = (id) => {
    // 查找匹配的元素在数组中的索引
    let indexToDelete = fileListArr.value.findIndex(item => item.id == id);

    // 如果找到匹配的元素，就使用 splice 方法删除它
    if (indexToDelete !== -1) {
        fileListArr.value.splice(indexToDelete, 1);
    }
    // 查找匹配的元素在数组中的索引
    let indexToDeletes = uploadFileId.value.findIndex(item => item == id);

    // 如果找到匹配的元素，就使用 splice 方法删除它
    if (indexToDeletes !== -1) {
        uploadFileId.value.splice(indexToDeletes, 1);
    }
    //   //console.log(fileListArr.value,'展示列表');
    // //console.log(uploadFileId.value,'上传列表');
}

// 导出问卷数据方法
const standardName = ref(null)
const labelArrList = ref([])
const exportTaskItemId = ref('')
const exportFn = (row) => { 
    standardName.value = row.name
    // //console.log(row,'row');
    exportTaskItemId.value = row.id
    let params = { taskItemId : row.id}
    getQuestionnaireInfo(params).then(res => { 
        if (res.code == 200 && res.data.length > 0) { 
            labelArrList.value = res.data
            labelArrList.value = labelArrList.value.sort((a, b) => {return a.fieldId - b.fieldId })
            getTaskItemTypeFn(params)
        }
    })
}

// 类型id
const typeId = ref(null)
const getTaskItemTypeFn = (params) => { 
    getTaskItemType(params).then(res => {
        if (res.code == 200) { 
            typeId.value = res.data[0].dict_value
            getTaskItemIdListFn()
        }
    })
}
const showCheckValue = ref([])
const tableItemList = ref([])
const getTaskItemIdListFn = () => {
    let params = { taskItemId : exportTaskItemId.value , typeId : typeId.value}
    getTaskItemIdList(params).then(res => { 
        if (res.code == 200 && res.data.length > 0) { 
            tableItemList.value = res.data
            forTableItemsFn()
        }
    })
}

const forTableItemsFn = () => {
    showCheckValue.value = []
    tableItemList.value = tableItemList.value.sort((a, b) => { return a - b })
    // //console.log(tableItemList.value);
        tableItemList.value.forEach((value, index, array) => {
        let paramsTwo = {
            rowId: value,
            typeId: typeId.value,
            taskItemId: exportTaskItemId.value,
        }
        getTaskItemNum(paramsTwo).then(res => {
            // //console.log(res,'res');
            if (res.code == 200 && res.data.length > 0) {
                res.data[1].rowId = value
                showCheckValue.value.push(res.data[1])
            exportDialogTableVisible.value = true
            }
        })
    })
}
// 导出label选择
const checkList = ref([])
const handCheckFn = () => { 
    // //console.log(checkList.value);
}
const tableCheckList = ref([])
const beiList = ref([])
// 导出表格选中数据选择
const handleSelectionChange = (value) => { 
    tableCheckList.value = []
    value.forEach((items, index, array) => {
        let obj = {
            rowId: items.rowId,
            valueId:items.value_id
        }
        beiList.value.push(items.rowId)
    tableCheckList.value.push(obj)
    })
}



// 确定导出数据
const ExportDataListFn = () => { 
       ElMessage({
        type: 'info',
        message: "正在下载中 请稍后",
    })
    tableCheckList.value.sort((a, b) => {return a.rowId - b.rowId})
    // //console.log(beiList.value,'beiList');
    let params = {
        taskItemId: exportTaskItemId.value,
        labelItems: checkList.value,
        taskItems: tableCheckList.value
    }
    exportDialogTableVisible.value = false
    // return
    getExportQuestionnaireApi(params).then(resolve => {
        if (resolve) {
            ElMessage({
                type: 'success',
                message: "下载成功",
            })
            blobUploadValue.value = resolve.url
            fileNameValue.value = standardName.value
            fileType.value = 'xlsx'
            DownloadFn()
        }
    })
}

// 导出问题数据方法
const problemExportFn = (row, taskIds) => {
     standardName.value = row.name
    ElMessage({
        type: 'info',
        message: "正在下载中 请稍后(图片较多时,下载可能会较慢..)",
    })
    // //console.log(row, '选中的导出项');
    // //console.log(taskId, '选中的导出项');
    let params = {
        taskItemId: row.id,
        standardId: row.standardId,
        taskId: taskIds,
    }
    getExportProblemApi(params).then(resolve => {
        //console.log(resolve, 'resolve');
        if (resolve) {
            ElMessage({
                type: 'success',
                message: "下载成功",
            })
            blobUploadValue.value = resolve.url
            fileNameValue.value = row.name
            fileType.value = 'xlsx'
            DownloadFn()
        } else { 
             ElMessage({
                type: 'error',
                message: "导出失败",
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.body-control {
    display: flex;
    justify-content: space-between;
    width: 100%;
    // height: 790px;

    // 左侧项目树
    .body-left {
        width: 20%;
        padding: 0px 10px;
        background-color: #fff;
        box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);

        //    标题
        h2 {
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0px;
            color: rgba(0, 0, 0, 1);
            text-align: left;
            vertical-align: top;
        }

        //    输入框盒子
        .demo-input-suffix {
            margin: 5px 0px;

            // 输入框
            ::v-deep(.el-input__wrapper) {
                background: rgba(245, 245, 245, 1);
                border-radius: 15px;
            }
        }

        //   添加图标
        .icon-col {
            display: flex;
            align-items: center;

            img {
                width: 20px;
                height: 20px;
            }
        }

        // 项目列表
        .data-list {
            margin-top: 20px;

            div {
                   overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
                padding: 8px 10px;
                font-size: 18px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(77, 77, 77, 1);
                text-align: left;
                vertical-align: middle;
                cursor: pointer;
            }

            div:hover {
                font-size: 18px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(255, 255, 255, 1);
                text-align: left;
                vertical-align: middle;
                background: rgba(89, 169, 255, 1);
            }

            .divactive {
                font-size: 18px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(255, 255, 255, 1);
                text-align: left;
                vertical-align: middle;
                background: rgba(89, 169, 255, 1);

            }
        }
    }

    .body-right {
        width: 78%;
        display: flex;
        flex-direction: column;

        .right-top {
            flex: 1;
            background-color: #fff;
            box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0px 15px;
            margin-bottom: 20px;
            width: 100%;

            // 标签盒子
            .top-tags {
                flex: 1;
                // background-color: #fff;
                // box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 10px 20px;
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                overflow: auto;

                >span {
                    margin: 5px 15px;
                    cursor: pointer;
                    border-radius: 15px;
                    padding: 5px 10px;
                    color: #6d6b6b;
                    background-color: rgb(227, 233, 236);
                }

                .active {
                    background-color: #59a9ff;
                    color: white;
                }

                // 标签样式
                .el-button {
                    margin-right: 30px;
                    margin-top: 10px;
                }

                >.el-button:first-child {
                    margin-left: 12px !important;
                }
            }

            // 表单控件样式
            .el-form {
                width: 100%;

                .el-col {
                    margin: 10px 0px;
                    // margin-bottom: 20px;
                }

                ::v-deep(.el-form-item__label) {
                    justify-content: end;
                }

                // 输入框样式
                ::v-deep(.el-input__wrapper) {
                    display: inline-flex;
                    flex-grow: 1;
                    align-items: center;
                    justify-content: center;
                    padding: 5px 11px;
                    background-color: rgba(253, 255, 247, 1);
                    background-image: none;
                    border: 1.33px solid rgba(67, 207, 124, 1);
                    cursor: text;
                    transform: translate3d(0, 0, 0);
                }

                .el-form-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: initial;
                }

                .el-button {
                    padding: 20px 30px;
                }
            }

            ::v-deep(.search-btn .el-form-item__content) {
                margin-left: 30px !important;
            }

        }

        .right-bottom {
            flex: 7;
            background-color: #fff;
            box-shadow: 0px 2.67px 10.67px rgba(186, 186, 186, 0.1);
            width: 100%;
            padding: 20px 40px;

            //表格
            .el-table {
                font-size: 14px !important;

                ::v-deep(th) {
                    padding: 10px 0px;
                    font-size: 16px !important;
                    // font-weight: normal;
                }

                tbody .table-span {
                    margin-left: 40px;
                    line-height: 45px;
                }

                tbody img {
                    cursor: pointer;
                    vertical-align: middle;
                    // margin-right: 25px;
                }
                ::v-deep(.el-switch){
                        position: absolute;
                        /* right: 90px; */
                        transform: translateX(20px);
                        bottom: 5px;
                        /* margin-bottom: 46px; */
                }
            }

            // ::v-deep().el-table[data-v-b7d2d175] th{
            //     background-color: red !important;
            // }
            // 第一个表头样式
            ::v-deep(.one-table th) {
                background-color: #fff !important;
                font-size: 17px !important;
                width: 100%;
            }

            // 第二个表头样式
            ::v-deep(.two-table th) {
                font-weight: normal;
                background-color: rgba(232, 243, 255, 1) !important;
                font-size: 16px !important;
            }

            // 第三个表头样式
            ::v-deep(.there-table th) {
                background-color: #f5f5f5 !important;
            }

            // 分页
            .el-pagination {
                justify-content: center;
                margin-top: 15px;
            }
        }
    }
}

.taskitem-test {
    // height: 80px;
}

::v-deep(.el-form-item__label) {
    width: 100px !important;
}

// 表格
::v-deep(.el-table tr) {
    background-color: var(--el-table-tr-bg-color);
    height: 47.3px;
}

::v-deep(.el-overlay-dialog) {
    display: flex !important;
    align-items: center !important;
}

::v-deep(.el-dialog__body) {
    height: 470px;
}

.tabs-contain-item {
    overflow-y: auto;
    position: relative;

    .a {
        position: absolute;
        right: 0px;
    }
}
::v-deep(.file-show-box){
 margin-top: 6vh !important;
 width: 70%;
 height: 90%;
 background-color: #ededed;
//  附件主体
.file-body{
    width: 100%;
    height: 100%;
        display: flex;
    .file-left{
        background-color: #fff;
        border-radius: 5px;
        flex: 2;
        margin-right: 10px;
        // 单条数据
        .list{
            padding: 15px 10px;
            overflow: hidden;
             cursor: pointer;
        }
        .list-active{
        background-color: #90c1f5;
             border-radius: 5px;
            color: white;
        }
         .list:hover{
            background-color: #90c1f5;
             border-radius: 5px;
            color: white;
        }
    }
     .file-right{
        flex: 8;
        overflow: auto;
        position: relative;
        .downFile{
            position: sticky;
            top: 0px;
                display: flex;
            justify-content: end;
        }
        .docx-wrapper{
            background-color: #ededed;
        }
        #fileShowTwo{
            table{
                 table-layout: fixed !important;
                  width: 100% !important;
                border-collapse:collapse;
                border:none;
                font-size:0.7rem;
            }
            td,th {
                height: 30px;
                width:100px;
                white-space:nowrap; /* 自适应宽度*/
                word-break:keep-all; /* 避免长单词截断，保持全部 */
                border:solid #676767 1px;
                text-align:center;
                white-space:pre-line;
                word-break:break-all !important;
                word-wrap:break-word !important;
                display:table-cell;
                vertical-align:middle !important;
                white-space: normal !important;
                // height:auto;
                vertical-align:text-top;
                padding:2px 2px 0 2px;
                display: table-cell;
}
        }
    }
}
.el-dialog__body{
    height: 94% !important;
    padding: 10px 10px !important;
 }
 ::v-deep(.el-dialog__body){
        overflow: auto;
 }
 .el-dialog__header{
    background-color: #fff !important;
    margin-right: auto;
 }
}
// excel表格样式
// table {
//     table-layout: fixed !important;
//     width: 100% !important;
//     border-collapse:collapse;
//     border:none;
//     font-size:0.23rem;
// }

// td,th {
//     width:1px;
//     white-space:nowrap; /* 自适应宽度*/
//     word-break:keep-all; /* 避免长单词截断，保持全部 */
//     border:solid #676767 1px;
//     text-align:center;
//     white-space:pre-line;
//     word-break:break-all !important;
//     word-wrap:break-word !important;
//     display:table-cell;
//     vertical-align:middle !important;
//     white-space: normal !important;
//     height:auto;
//     vertical-align:text-top;
//     padding:2px 2px 0 2px;
//     display: table-cell;
// }

//上传附件格式
.upload-dialog{
   .el-upload__tip{
        font-size: 15px;
        color: #606266;
        // color: red;
        margin-top: 7px;
    }

}
//满意度分数查看
.Satisfaction{
    position: absolute;
    right: 60px;
    font-size: 20px;
    top: 15px;
    cursor: pointer;
}
.Export{
  position: absolute;
    right: 25px;
    font-size: 20px;
    top: 15px;
    cursor: pointer;
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
// 弹框

</style>
<style>
.exportDialog {
        height: 700px;
}
 .exportDialog .el-dialog__footer{
            padding-top: 100px;
        }
</style>