webapp / GreenwayWeb

<template>
	<div style="background-color:#f7f7f7;padding:10px 10px;">
		<div class="zhuti" v-if="addAct==false && bianshow==false && ggXin==false">
			<div style="height:58px;line-height:58px;">
				<div style="color:#0006"> <span>品牌策划</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">氛围方案管理</span></div>
			</div>
			<div>
				<!-- 搜索 -->
				<div class="formSearch">
					<div class="demo-input-suffix">
						<div style="width: 68px;height:36px;line-height:32px;">方案名称</div>
						<el-input placeholder="请输入" v-model="planName" style="width:168px;">
						</el-input>
					</div>
					<div>
						<el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询
						</el-button>
						<el-button @click="resetting" class="buttonHover"
							style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置
						</el-button>
					</div>
				</div>
				<div style="margin:20px 0;">
					<div style="display:flex;">
						<el-button icon="el-icon-circle-plus-outline" @click="create"
							style="background-color: #3F9B6A;color: #fff;">新增</el-button>
						<!-- <el-button style="background-color: #E24E5A;color: #fff;" icon="el-icon-delete"
							@click="handleDelete" class="DelBtnHover">删除</el-button> -->
						<!--  <el-button  style="background-color: #3F9B6A;color: #fff;" @click="duibi">效果对比</el-button>
                  <el-upload class="upload-demo" ref="upload"
                                    :limit="1"
                                    accept=".xlsx"
                                :action="uploadFileUrl"
                                    :on-success="daoru"
                                    :file-list="daoData"
                                     :auto-upload="true"
                                     :show-file-list="false">
                                    <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;margin:0 15px;"  class="buttonHover">导入</el-button>
                                  </el-upload> -->
						<el-button style="background-color: #3F9B6A;color: #fff;" @click="caogao">草稿箱</el-button>
						<!-- <el-button  style="background-color: #3F9B6A;color: #fff;" @click="daochu">审核流程导出</el-button> -->
						<!-- <el-button  style="background-color: #fff;color: #000;border: 1px solid #B1B1B1;"
                    icon="el-icon-folder-add" class="buttonHover" @click="xinFenlei">氛围分类管理</el-button> -->
					</div>
				</div>
				<!-- 分栏 -->
				<div class="fenlan">
					<!-- 搜索分类 -->
					<div class="souLei">
						<div
							style="line-height:42px;height:42px;background-color:#f2f3f5;border-bottom:1px solid #d7d7d7;padding-left:12px;color:#0009">
							标签分类
						</div>
						<div calss="souList">
							<div class="souTabs">
								<div style="padding: 5px 0 0 10px;color:#000000e6;line-height:40px;cursor: pointer;">
									<span @click="getFenAll">全部分类</span>
									<span style="font-size: 15px !important;color:#606266">
										<i class="el-icon-circle-plus" @click="xinFenlei()" style="padding: 5px;"></i>
									</span>
								</div>
								<el-tree :data="xianFenlei" :props="defaultProps" @node-click="handleNodeClick"
									:expand-on-click-node="false">
									<div class="custom-tree-node" slot-scope="{ node, data }">
										<span>{{ node.label }}</span>
										<span style="font-size: 15px !important;">
											<i class="el-icon-circle-plus" v-if="node.level!=2"
												@click="xinFenlei(node,data)" style="padding-right: 7px;"></i>
											<i class="el-icon-edit" @click="editFenlei(node, data)"
												style="padding-right: 7px;"></i>
											<i class="el-icon-delete-solid" @click="() => fenDelete(node, data)"></i>
										</span>
									</div>
								</el-tree>
							</div>
						</div>
					</div>
					<div class="tableList">

						<!-- 表格 -->
						<div>
							<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
								@selection-change="handleSelectionChange" tooltip-effect="dark"
								:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
								ref="mulTable">
								<!-- 	<el-table-column type="selection" min-width="80">
								</el-table-column> -->
								<el-table-column label="方案名称" min-width="300" prop="planName">
								</el-table-column>
								<el-table-column label="类型" prop="planType" min-width="80">
								</el-table-column>

								<el-table-column label="审批状态" min-width="150">
									<template slot-scope="scope">
										{{scope.row.state == ''?'待提交':scope.row.state == '1'?'待审批':scope.row.state == '2'?'部门领导审批':scope.row.state == '3'?'公司领导审批':scope.row.state == '4'?'其他审批':scope.row.state == '5'?'审核通过':'已驳回'}}
									</template>
								</el-table-column>
								<el-table-column label="创建时间" prop="createDate" min-width="250">
								</el-table-column>
								<!-- <el-table-column prop="auditReminderTime" label="审核提醒时间" width="200">

                      </el-table-column> -->
								<el-table-column label="操作" min-width="240" fixed="right">
									<template slot-scope="scope">
										<div class="tableBtn greens" @click="actBian(scope.row)"
											v-if="scope.row.state == ''">修改</div>
										<!-- <div class="tableBtn greens">发布</div> -->
										<div class="tableBtn greens" @click="handleEditForm(scope.row,1)">查看</div>
										<!-- <div class="tableBtn greens" @click="handleEditForm(scope.row,2)">执行情况</div> -->
										<div @click="OAshen(scope.row)" class="tableBtn greens"
											v-if="scope.row.state == ''">提交审核</div>
										<!-- <div class="tableBtn greens" v-if="scope.row.state ==''"  @click="peizhi(scope.row)">
                            审批流程选择
                          </div> -->
										<div class="tableBtn greens" @click="xiaoguo(scope.row)"
											v-if="scope.row.state == '5'">效果评估</div>
										<!-- <div class="tableBtn greens">策略调整</div> -->
										<div class="tableBtn greens" @click="koop(scope.row)">复制</div>
										<div class="tableBtn greens" @click="handleDelete(scope.row.id)">删除</div>
									</template>
								</el-table-column>
							</el-table>
							<div class="fenye">
								<div>
									<!-- <el-button @click="tableAll" class="buttonHover"
										style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">选择全部
									</el-button>
									<el-button @click="toggleSelection(tableData)" class="buttonHover"
										style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">反向选择
									</el-button> -->
								</div>
								<el-pagination class="pagination" :hide-on-single-page="flag" background small
									:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
									layout="prev,pager,next" :total="total" @size-change="handleSizeChange"
									@current-change="handleCurrentChange" />
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="新增明细" :visible.sync="addMing" custom-class='dialog_css' style="padding: 0;" width="50%"
			append-to-body center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div style="padding: 15px;width:100%">
				<div style="">
					<div style="padding: 15px;">
						<el-form label-position="left" ref="ruleFormInfo" :model="mingFrom" label-width="140px"
							style="position: relative">
							<el-form-item label="明细项名称" class="grid-content bg-purple device-from" prop="planName">
								<el-input v-model="mingFrom.detailLtemName" placeholder="请输入" />
							</el-form-item>
							<el-form-item label="实际数量" class="grid-content bg-purple" prop=" planType">
								<el-input v-model="mingFrom.estimatedQuantity" placeholder="请输入" />
							</el-form-item>

							<el-form-item label="实际费用" class="grid-content bg-purple" prop="eventAddrs">
								<el-input v-model="mingFrom.estimatedCost" placeholder="请输入" />
							</el-form-item>
							<el-form-item label="备注" class="grid-content bg-purple device-from" prop="planName">
								<el-input v-model="mingFrom.notes" placeholder="请输入" />
							</el-form-item>
						</el-form>
					</div>
				</div>

			</div>
			<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
				<el-button plain @click="addMing=false" style="background-color: #3F9B6A;color: #fff;">取消
				</el-button>
				<el-button plain @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定
				</el-button>

			</div>
		</el-dialog>
		<!-- 氛围效果分析 -->
		<el-dialog :visible.sync="xiaoguoBox" custom-class='fenxi_css' style="padding: 0;" width="75%" center
			:close-on-click-modal="false" :close-on-press-escape="false">
			<div
				style="padding:15px;background-color:#F9F9F9;font-size:14px;border:1px solid #ECECEC;margin-bottom:20px">
				氛围效果分析
			</div>
			<div style="padding:0 20px;">
				<div style="font-size:14px;margin-bottom:10px;">成本分析</div>
				<div style="display:flex;padding:10px 0;justify-content: space-evenly">
					<div style="margin-right:40px;width:17%">
						<div style="color:#BBBBBB;font-size:10px;">吸引游客流量</div>
						<div style="font-size:14px;padding:10px 0"><span
								style="font-size:20px;font-weight:600;">{{fenxiData.expectedAttractTraffic}}</span>人
						</div>
						<div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">
							{{fenxiData.expectedAttractTrafficAnalyse}}%
						</div>
						<div style="height:5px;background-color:#FEC03D;"></div>
					</div>
					<div style="margin-right:40px;width:17%">
						<div style="color:#BBBBBB;font-size:10px;">参与人数</div>
						<div style="font-size:14px;padding:10px 0"><span
								style="font-size:20px;font-weight:600;">{{fenxiData.expectedParticipation}}</span>人
						</div>
						<div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">
							{{fenxiData.expectedParticipationAnalyse}}%
						</div>
						<div style="height:5px;background-color:#58A3F7;"></div>
					</div>
					<div style="margin-right:40px;width:17%">
						<div style="color:#BBBBBB;font-size:10px;">直接收益</div>
						<div style="font-size:14px;padding:10px 0"><span
								style="font-size:20px;font-weight:600;">{{fenxiData.expectedDirectBenefits?fenxiData.expectedDirectBenefits:'暂无'}}</span>
						</div>
						<div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">
							{{fenxiData.expectedDirectBenefitsAnalysis}}%
						</div>
						<div style="height:5px;background-color:#4BCED0;"></div>
					</div>
					<div style="margin-right:40px;width:17%">
						<div style="color:#BBBBBB;font-size:10px;">间接收益</div>
						<div style="font-size:14px;padding:10px 0"><span
								style="font-size:20px;font-weight:600;">{{fenxiData.expectedIndirectBenefits?fenxiData.expectedIndirectBenefits:'暂无'}}</span>
						</div>
						<div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">
							{{fenxiData.expectedIndirectBenefitsAnalysis}}%
						</div>
						<div style="height:5px;background-color:#3F9B6A;"></div>
					</div>
					<!-- <div style="margin-right:40px;width:17%">
						<div style="color:#BBBBBB;font-size:10px;">投入生产比</div>
						<div style="font-size:14px;padding:10px 0"><span
								style="font-size:20px;font-weight:600;">{{fenxiData.incomeAnalysis}}%</span></div>
						<div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">{{fenxiData.incomeAnalysis}}%</div>
						<div style="height:5px;background-color:#8167F5;"></div>
					</div> -->
				</div>
				<!-- <div style="font-size:14px;margin:10px 0;">效果分析</div> -->
				<!-- <div style="display:flex;padding:10px 0;">
                         <div style="margin-right:40px;width:17%">
                           <div style="color:#BBBBBB;font-size:10px;">吸引游客流量</div>
                           <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                           <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                           <div style="height:5px;background-color:#FEC03D;"></div>
                         </div>
                         <div style="margin-right:40px;width:17%">
                           <div style="color:#BBBBBB;font-size:10px;">参与人数</div>
                           <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                           <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                           <div style="height:5px;background-color:#58A3F7;"></div>
                         </div>
                         <div style="margin-right:40px;width:17%">
                           <div style="color:#BBBBBB;font-size:10px;">直接收益</div>
                           <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                           <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                           <div style="height:5px;background-color:#4BCED0;"></div>
                         </div>
                         <div style="margin-right:40px;width:17%">
                           <div style="color:#BBBBBB;font-size:10px;">间接收益</div>
                           <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;font-weight:600;">4289</span>人</div>
                           <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                           <div style="height:5px;background-color:#3F9B6A;"></div>
                         </div>
                         <div style="margin-right:40px;width:17%">
                           <div style="color:#BBBBBB;font-size:10px;">投入生产比</div>
                           <div style="font-size:14px;padding:10px 0"><span style="font-size:20px;">4289</span>人</div>
                           <div style="color:#BBBBBB;font-size:10px;margin-bottom:10px">+45%</div>
                           <div style="height:5px;background-color:#8167F5;"></div>
                         </div>
                     </div> -->
			</div>
			<div style="padding:0 20px;margin-top:20px;">
				<div style="border:1px solid #EFEFEF;padding:20px 15px">
					<div style="display:flex">
						<!-- <div style="width:30%;margin-right:40px">
							<div>活动主题</div>
							<div style="margin-top:20px;">
								<div style="display:flex;justify-content: space-between;margin-bottom:10px;">
									<div style="font-size:14px;color:#BBBBBB">主题1</div>
									<div>300/100家</div>
								</div>
								<el-progress :text-inside="true" :stroke-width="15" :percentage="70"></el-progress>
								<div style="display:flex;justify-content: space-between;margin:10px 0;">
									<div style="font-size:14px;color:#BBBBBB">主题2</div>
									<div>300/100家</div>
								</div>
								<el-progress :text-inside="true" :stroke-width="15" :percentage="100"
									status="success"></el-progress>
								<div style="display:flex;justify-content: space-between;margin:10px 0;">
									<div style="font-size:14px;color:#BBBBBB">主题3</div>
									<div>300/100家</div>
								</div>
								<el-progress :text-inside="true" :stroke-width="15" :percentage="80"
									status="warning"></el-progress>
								<div style="display:flex;justify-content: space-between;margin:10px 0;">
									<div style="font-size:14px;color:#BBBBBB">主题4</div>
									<div>300/100家</div>
								</div>
								<el-progress :text-inside="true" :stroke-width="15" :percentage="50"
									status="exception"></el-progress>
							</div>
						</div> -->
						<!-- <div style="width:30%;margin-right:40px">
							<div>人群占比</div>
							<div style="height:250px;width:100%;" ref="shopL">
							</div>
						</div> -->
						<div style="width:100%;margin-right:40px">
							<div>氛围效果数据图表化展示</div>
							<div style="height:250px;width:100%;" ref="jiaoL">
							</div>
						</div>
					</div>
				</div>
				<!-- <div style="padding:55px 10px 10px 10px;background-color:#fff; position:relative">

					<el-tabs type="border-card">
						<el-tab-pane label="整体效果分析">
							<el-table :data="dataList"
								:header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
								style="width: 100%">
								<el-table-column label="主题" width="auto" min-width="12%" align="center">
									<template slot-scope="scope">
										{{scope.$index + 1}}
									</template>
								</el-table-column>
								<el-table-column label="环比比较" width="auto" min-width="15%" align="center">
									<template slot-scope="scope">
										{{scope.$index + 1}}
									</template>
								</el-table-column>
								<el-table-column label="增长量" width="auto" min-width="15%" align="center">
									<template slot-scope="scope">
										{{scope.$index + 1}}
									</template>
								</el-table-column>
								<el-table-column label="增长率" prop="name" width="auto" min-width="15%">
									<template slot-scope="scope">
										{{scope.row.name}}
									</template>
								</el-table-column>
								<el-table-column label="投入总金额" prop="name" width="auto" min-width="15%">
									<template slot-scope="scope">
										{{scope.row.name}}
									</template>
								</el-table-column>
								<el-table-column label="投入产出比" prop="name" width="auto" min-width="15%">
									<template slot-scope="scope">
										{{scope.row.name}}
									</template>
								</el-table-column>
							</el-table>
						</el-tab-pane>
					</el-tabs>
				</div> -->

			</div>
		</el-dialog>
		<el-dialog :visible.sync="xinlei" custom-class='xiaoguo_css' style="padding: 0;" width="50%" center
			:close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div
				style="padding:15px;background-color:#F9F9F9;font-size:14px;border:1px solid #ECECEC;margin-bottom:20px;display: flex;justify-content: space-between;">
				<div>{{editFen == 0 ?'新增':'编辑'}}</div>
			</div>
			<div style="padding:0 36px;">
				<el-form label-position="right" ref="fenFrom" :model="xinADD" :rules="rules" label-width="120px"
					style="position: relative">
					<el-form-item label="上级分类" class="grid-content bg-purple device-from" prop="parentId">
						<el-cascader v-model="xinADD.parentId" :options="cascaderList" @change="fenleiChange"
							:props="{ checkStrictly: true }" :show-all-levels="false" clearable ref="cascaderRef"
							style="width: 100%;"></el-cascader>
					</el-form-item>
					<el-form-item label="分类名称" class="grid-content bg-purple device-from" prop="classificationName">
						<el-input v-model="xinADD.classificationName" placeholder="请输入" />
					</el-form-item>
				</el-form>
			</div>

			<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
				<el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
					@click="fenqing">返回</el-button>
				<el-button plain @click="sevLei" style="background-color: #3F9B6A;color: #fff;">保存
				</el-button>
			</div>
		</el-dialog>
		<!-- 效果对比 -->
		<el-dialog :visible.sync="xiaoDui" custom-class='dialog_css' style="padding: 0;" width="60%" center
			:close-on-click-modal="false" :close-on-press-escape="false">
			<div style="padding: 0 50px;display:flex;justify-content: space-evenly;">
				<div style="width:30%">
					<div style="display: flex;">
						<div style="margin-right: 10px;padding: 10px 0;">
							<div>调整前方案</div>
							<div style="font-size: 22px;color: #3F9B6A;font-weight: 600;margin: 10px 0;">
								{{xiaoduiObj.biliOne}}
							</div>
							<div style="font-size: 16px;color: #3F9B6A;font-weight: 600;">投入产出比</div>
						</div>
						<el-progress type="circle" :percentage="xiaoduiObj.bilis" :show-text="false" :width="100">
						</el-progress>
					</div>
					<div style="padding:30px 0">计划任务（完成度）</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">直接收入</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiOne.expectedDirectBenefits)" status="success"
							:format="() => customFormat(duibiOne.expectedDirectBenefits)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">间接收入</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiOne.expectedIndirectBenefits)" status="success"
							:format="() => customFormat(duibiOne.expectedIndirectBenefits)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">人力</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiOne.internalLaborCostEstimation)" status="success"
							:format="() => customFormat(duibiOne.internalLaborCostEstimation)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">设备</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiOne.setCostEstimate)" status="success"
							:format="() => customFormat(duibiOne.setCostEstimate)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">宣传</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiOne.estimatedPromotionalExpenses)" status="success"
							:format="() => customFormat(duibiOne.estimatedPromotionalExpenses)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">其他</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiOne.otherNecessaryEstimates)" status="success"
							:format="() => customFormat(duibiOne.otherNecessaryEstimates)"></el-progress>
					</div>
				</div>
				<div style="width:30%">
					<div style="display: flex;">
						<div style="margin-right: 10px;padding: 10px 0;">
							<div>调整后方案</div>
							<div style="font-size: 22px;color: #3F9B6A;font-weight: 600;margin: 10px 0;">
								{{xiaoduiObj.biliTwo}}
							</div>
							<div style="font-size: 16px;color: #3F9B6A;font-weight: 600;">投入产出比</div>
						</div>
						<el-progress type="circle" :percentage="xiaoduiObj.biliT" :show-text="false" :width="100">
						</el-progress>
					</div>
					<div style="padding:30px 0">计划任务（完成度）</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">直接收入</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiTwo.expectedDirectBenefits)" status="success"
							:format="() => customFormat(duibiTwo.expectedDirectBenefits)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">间接收入</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiTwo.expectedIndirectBenefits)" status="success"
							:format="() => customFormat(duibiTwo.expectedIndirectBenefits)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">人力</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiTwo.internalLaborCostEstimation)" status="success"
							:format="() => customFormat(duibiTwo.internalLaborCostEstimation)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">设备</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiTwo.setCostEstimate)" status="success"
							:format="() => customFormat(duibiTwo.setCostEstimate)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">宣传</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiTwo.estimatedPromotionalExpenses)" status="success"
							:format="() => customFormat(duibiTwo.estimatedPromotionalExpenses)"></el-progress>
					</div>
					<div class="jindutiao">
						<div style="margin-right:10px;width:56px">其他</div>
						<!-- <el-progress :text-inside="true" :stroke-width="26" :format="format(xiaoduiObj.shou)" :percentage="xiaoduiObj.shouBi"></el-progress> -->
						<el-progress style="width: 150px;" :text-inside="true" :stroke-width="24"
							:percentage="baifenbi(duibiTwo.otherNecessaryEstimates)" status="success"
							:format="() => customFormat(duibiTwo.otherNecessaryEstimates)"></el-progress>
					</div>
				</div>
			</div>
		</el-dialog>
		<!-- 复制 -->
		<el-dialog :visible.sync="copyShow" custom-class='xiaoguo_css' style="padding: 0;" width="50%" center
			:close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div
				style="padding:15px;background-color:#F9F9F9;font-size:14px;border:1px solid #ECECEC;margin-bottom:20px;display: flex;justify-content: space-between;">
				<div>复制页</div>
			</div>
			<div style="padding:0 36px;">
				<el-form label-position="right" :model="copy" ref="copyfrom" :rules="copyRules" label-width="120px"
					style="position: relative">
					<el-form-item label="新方案名称" class="grid-content bg-purple device-from" prop="planName">
						<el-input v-model="copy.planName" placeholder="请输入" />
					</el-form-item>
				</el-form>
			</div>

			<div style="display: flex;justify-content: flex-end;padding: 10px 20px 10px 0">
				<el-button class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
					@click="copyClose">返回</el-button>
				<el-button plain @click="copysev" style="background-color: #3F9B6A;color: #fff;">保存
				</el-button>
			</div>
		</el-dialog>
		<el-dialog title="草稿箱" :visible.sync="caogaoshow" custom-class="dialog_css_Xq" style="padding: 0;" width="70%"
			center :close-on-click-modal="false" :show-close="false">
			<div style="padding:20px;">
				<div style="margin-bottom: 20px;">
					<el-table :data="caoList.slice((caogaoPage - 1) * pageSize, caogaoPage * pageSize)"
						:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
						align="left">
						<el-table-column label="方案名称" min-width="300" prop="planName">
						</el-table-column>
						<el-table-column label="类型" prop="planType" min-width="80">
						</el-table-column>

						<el-table-column label="创建时间" prop="createDate" min-width="250">
						</el-table-column>
						<el-table-column label="操作" min-width="120" fixed="right">
							<template slot-scope="scope">
								<div @click="shiyong(scope.row)" class="tableBtn greens">使用</div>
								<!-- <div @click="actBian(scope.row)" class="tableBtn greens" v-if="scope.row.state == ''">修改</div> -->
								<div @click="handleDelete(scope.row.id)" class="tableBtn greens">删除</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="fenye">
						<div>
							共{{caoList.length || 0}}条
						</div>
						<el-pagination :hide-on-single-page="flag" background :current-page="caogaoPage"
							layout="prev,pager,next" :total="caoList.length" @current-change="caogaoCurrentChange" />
					</div>
				</div>
				<div style="display: flex;justify-content: flex-end;">
					<el-button @click="caogaoshow=false" class="buttonHover"
						style="background-color: #fff;color: #000;border: 1px solid #dcdfe6;">返回</el-button>
				</div>
			</div>

		</el-dialog>

		<el-dialog :visible.sync="peiShow" custom-class='bian_css' style="padding: 0;" width="45%"
			:close-on-press-escape="false" center :close-on-click-modal="false" class="dialog_css_Xq"
			:show-close="false">
			<div style="padding:20px;">
				<div style="font-size: 14px;padding-bottom: 20px;color: #000;">审核流程配置</div>
				<el-form label-position="right" ref="jibenFrom" :model="peiForm" label-width="140px"
					style="position: relative">
					<el-form-item label="审核提醒时间" class="grid-content bg-purple device-from" prop="planName">
						<el-date-picker style="width:240px;margin-right:5px" v-model="peiForm.auditReminderTime"
							value-format="yyyy-MM-dd HH:mm:ss" type="datetime" prefix-icon="none">
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div style="padding-top:20px;display:flex;justify-content: flex-end;">
					<el-button style="background-color: #3F9B6A;color: #fff" @click="peiCheck">确定</el-button>
					<el-button @click="peiShow = false"
						style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
						class="buttonHover">取消</el-button>

				</div>

			</div>

		</el-dialog>

		<!-- 详情活动方案 -->
		<div v-if="ggXin" style="background-color:#fff;">
			<div style="height:58px;line-height:58px;background-color:#fff;padding-left:20px;">
				<div style="color:#0006"> <span>品牌策划</span> <span style="padding:0 5px;">></span> <span
						style="color:#000000e6">活动方案详情</span></div>
			</div>
			<div ref="actXiang">
				<div style="width: 100%;">
					<div style="display: flex;padding:0px 20px 20px 20px; ">
						<div style="height: 80px;" v-if="secondData.coverPoster">
							<img :src="$baseURL+secondData.coverPoster" alt="" style="height: 80px;" />
						</div>
						<div
							style="display: flex;flex-direction: column;justify-content: space-around;padding: 0 10px;font-size: 14px;">
							<span style="margin-bottom: 10px;">{{text}}</span>
							<span>活动时间：{{tableData1[1].eventTheme}}至{{tableData1[1].planName}}</span>
							<span>活动地点:{{tableData1[0].planName}}</span>
						</div>
					</div>
				</div>
				<div style="width: 100%;background-color: #fff;">
					<el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left:20px;">
						<el-tab-pane label="方案概况" name="first"></el-tab-pane>
						<el-tab-pane label="执行效果" name="second"></el-tab-pane>
						<!-- <el-tab-pane label="执行情况" name="five"></el-tab-pane> -->
					</el-tabs>
				</div>
				<div v-if="activeName=='first'" style="display: flex;">
					<div style="width: 100%;">
						<div style="width: 100%;">
							<div style="font-size: 14px;padding: 10px 20px 0px 20px;">基本信息</div>
							<div style="padding: 10px 20px;">
								<el-table :data="tableData1"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#fff'}"
									style="width: 100%;margin: auto;">
									<el-table-column class-name="first-column-bg" label="方案编号" prop="name"
										min-width="15%">
									</el-table-column>
									<el-table-column :label="id" prop="eventTheme" min-width="35%">

									</el-table-column>
									<el-table-column class-name="first-column-bg" label="方案名称" prop="text"
										min-width="15%">

									</el-table-column>
									<el-table-column :label="text" prop="planName" min-width="35%">

									</el-table-column>
								</el-table>


							</div>
						</div>
						<div style="width: 100%;">
							<div style="font-size: 14px;padding: 10px 20px 0px 20px;">活动明细信息</div>
							<div style="padding: 10px 20px;">
								<el-table :data="tableData2"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#fff'}"
									style="width: 100%;margin: auto;">
									<el-table-column label="序号" min-width="5%" align='center'>
										<template slot-scope="scope">
											<span style="">{{ scope.$index +1}}</span>
										</template>
									</el-table-column>
									<el-table-column label="明细项名称" prop="detailLtemName" min-width="28%">
									</el-table-column>
									<el-table-column label="预估数量" prop="estimatedQuantity" min-width="20%">

									</el-table-column>
									<el-table-column label="预估费用(元)" prop="estimatedCost" min-width="20%">

									</el-table-column>
									<el-table-column label="备注" prop="notes" min-width="20%">
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div style="width: 100%;">
							<div style="font-size: 14px;padding: 10px 20px 0px 20px;">活动成本信息</div>
							<div style="padding:10px 20px;">
								<el-table :data="tableData3"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#fff'}"
									style="width: 100%;margin: auto;">
									<el-table-column class-name="first-column-bg" label="内部人力成本预估(元)" prop="name"
										min-width="15%">
									</el-table-column>
									<el-table-column :label="internalLaborCostEstimation" prop="eventTheme"
										min-width="35%">

									</el-table-column>
									<el-table-column class-name="first-column-bg" label="外部人力成本预估(元)" prop="text"
										min-width="15%">

									</el-table-column>
									<el-table-column :label="externalLaborCostEstimation" prop="planName"
										min-width="35%">

									</el-table-column>
								</el-table>
							</div>
						</div>
						<div style="width: 100%;">
							<div style="font-size: 14px;padding:10px 20px 0px 20px;">预估效果</div>
							<div style="padding:10px 20px;">
								<el-table :data="tableData4"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#fff'}"
									style="width: 100%;margin: auto;">
									<el-table-column class-name="first-column-bg" label="预计吸引流量" prop="name"
										min-width="15%">
									</el-table-column>
									<el-table-column :label="expectedAttractTraffic" prop="eventTheme" min-width="35%">

									</el-table-column>
									<el-table-column class-name="first-column-bg" label="预计参与人数" prop="text"
										min-width="15%">

									</el-table-column>
									<el-table-column :label="expectedParticipation" prop="planName" min-width="35%">

									</el-table-column>
								</el-table>
								</el-table-column>
							</div>
						</div>
						<div style="width: 100%;">
							<div style="font-size: 14px;padding: 10px 20px 0px 20px;">相关附件信息</div>
							<div style="padding:10px 20px;">
								<el-table :data="tableData6"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#fff'}"
									style="width: 100%;margin: auto;">
									<el-table-column label="序号" min-width="5%" align='center'>
										<template slot-scope="scope">
											<span style="">{{ scope.$index + 1 }}</span>
										</template>
									</el-table-column>
									<el-table-column label="附件名称" prop="attachmentName" min-width="75%">

									</el-table-column>
									<el-table-column label="操作" prop="text" min-width="20%">
										<template slot-scope="scope">
											<a class="tableBtn greens" :href="scope.row.attachmentUrl" target="_blank"
												download>下载</a>
										</template>
									</el-table-column>

								</el-table>
							</div>
						</div>
						<div style="width: 100%;">
							<div style="font-size: 14px;padding: 10px 20px 0px 20px;">系统信息</div>
							<div style="padding:10px 20px;">
								<el-table :data="tableData5"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#fff'}"
									style="width: 100%;margin: auto;">
									<el-table-column class-name="first-column-bg" label="创建人" prop="name"
										min-width="15%">
									</el-table-column>
									<el-table-column :label="createUser" prop="eventTheme" min-width="35%">

									</el-table-column>
									<el-table-column class-name="first-column-bg" label="创建时间" prop="text"
										min-width="15%">

									</el-table-column>
									<el-table-column :label="createDate" prop="planName" min-width="35%">

									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
					<!-- <div style="width: 28%;">
									        <div style="padding: 10px;height: 500px;">
									          <div style="font-size: 14px;font-weight: 600;padding: 10px;">流程轨迹</div>
									          <el-steps style="height: 400px;padding: 10px;" direction="vertical" finish-status="process "
									            :active="0">
									            <el-step>
									              <template slot="title">
									                <div style="font-size: 14px;font-weight: 600;padding-bottom: 10px;">审核节点</div>
									                   </template>
									              <template slot="description">
									                <div class="custom-step-description">
									                  <div>
									                    当前处理人:王伟明
									                  </div>
									                </div>
									              </template>
									            </el-step>
									            <el-step  style="position: relative;">
									              <template slot="title">
									                <div style="font-size: 14px;font-weight: 600;padding-bottom: 10px;">品牌部门审批</div>
									                   </template>
									              <template slot="description">
									                <div class="custom-step-description">
									                  <div>
									                    操作:通过
									                    <span style="position: absolute;top: 0px;right: 0px;">2023-11-02 11:26:48</span>
									                  </div>
									                  <div>
									                    操作人:王伟明
									                  </div>
									                </div>
									              </template>
									            </el-step>
									            <el-step  style="position: relative;">
									              <template slot="title">
									                <div style="font-size: 14px;font-weight: 600;padding-bottom: 10px;">业务部门经理审核</div>
									                   </template>
									              <template slot="description">
									                <div class="custom-step-description">
									                  <div>
									                    操作:通过
									                    <span style="position: absolute;top: 0px;right: 0px;">2023-11-02 11:26:48</span>
									                  </div>
									                  <div>
									                    操作人:王伟明
									                  </div>
									                </div>
									              </template>
									            </el-step>
									            <el-step  style="position: relative;">
									              <template slot="title">
									                <div style="font-size: 14px;font-weight: 600;padding-bottom: 10px;">开始</div>
									                   </template>
									              <template slot="description">
									                <div class="custom-step-description">
									                  <div>
									                    操作:通过
									                    <span style="position: absolute;top: 0px;right: 0px;">2023-11-02 11:26:48</span>
									                  </div>
									                  <div>
									                    操作人:王伟明
									                  </div>
									                  <div>
									                    补充说明:发起流程事项审批
									                  </div>
									                </div>
									              </template>
									            </el-step>
									          </el-steps>
									        </div>
									      </div> -->
				</div>
				<div v-if="activeName=='second'">

					<div style="padding: 20px">
						<div style="border: solid 1px #E5E5E5;border-radius: 5px">
							<div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
								<div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
									基本信息
								</div>
							</div>
							<div style="padding: 20px 40px 20px 20px">
								<el-form label-position="top"  :model="zhixingList" ref="zhixingFormInfo" :rules="zhixingRules" 
									label-width="120px" style="position: relative">
									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="活动名称" class="grid-content bg-purple device-from"
												prop="planName">
												<el-input v-model="zhixingList.planName" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="实际举办地点" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.eventAddrs" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>

										<el-col :span="8">
											<el-form-item label="实际举办时间" class="grid-content bg-purple"
												prop="event_start_time" style="position: relative">
												<el-date-picker style="width: 100%;" v-model="zhixingList.planTime"
													value-format="yyyy-MM-dd HH:mm:ss" :disabled="!zhixingBian"
												@change="formTime" @blur="blur" clear-icon="none" type="datetimerange" range-separator="至"
													start-placeholder="开始日期" end-placeholder="结束日期" align="right">
												</el-date-picker>
											</el-form-item>
										</el-col>
									</el-row>

									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="活动主办方" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.sponsor" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="活动实际参与方" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.participants" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</div>
						</div>
					</div>
					<div style="padding: 0px 20px 20px 20px">
						<div style="border: solid 1px #E5E5E5;border-radius: 5px">
							<div style="border-bottom: 1px solid #E5E5E5;padding: 1px;display: flex">
								<div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
									活动明细信息
								</div>
								<div style="color: #2d8a58;margin-top: 10px;font-size: 14px;" @click="tianMing">
									添加明细
								</div>
							</div>
							<!--          表格-->
							<div style="padding: 20px 20px 20px 20px">
								<el-table :data="tableDa"
									:header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
									style="width: 100%">
									<el-table-column label="序号" width="auto" min-width="5%" align="center">
										<template slot-scope="scope">
											{{scope.$index +1}}
										</template>
									</el-table-column>
									<el-table-column label="明细项名称" prop="detailLtemName" width="auto" min-width="22%">

									</el-table-column>
									<el-table-column label="实际数量" prop="estimatedQuantity" width="auto" min-width="15%">

									</el-table-column>
									<el-table-column label="实际费用(元)" prop="estimatedCost" width="auto" min-width="15%">
									</el-table-column>
									<el-table-column prop="notes" label="备注" width="auto" min-width="15%">
									</el-table-column>
									<el-table-column label="操作" width="auto" min-width="18%" v-if="zhixingBian">
										<template slot-scope="scope">
											<div class="tableBtn greens" @click="MingDelete(scope.$index,scope.row)">删除
											</div>
										</template>
									</el-table-column>
								</el-table>

							</div>
						</div>
					</div>
					<div style="padding: 20px">
						<div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
							<div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
								<div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
									实际花费成本
								</div>
							</div>
							<div style="padding: 20px 40px 0px 20px">
								<el-form label-position="top" ref="ruleFormInfo" :model="zhixingList"
									label-width="120px" style="position: relative">
									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="实际内部人力成本(元)"
												class="grid-content bg-purple device-from" prop="name">
												<el-input v-model="zhixingList.internalLaborCostEstimation"
													placeholder="请输入" :disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="实际外部人力成本(元)" class="grid-content bg-purple"
												prop="name">
												<el-input v-model="zhixingList.externalLaborCostEstimation"
													placeholder="请输入" :disabled="!zhixingBian" />
											</el-form-item>
										</el-col>

										<el-col :span="8">
											<el-form-item label="实际商品成本(元)" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.costEstimationGoods" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
									</el-row>

									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="实际设备成本(元)" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.setCostEstimate" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="实际宣传费用(元)" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.estimatedPromotionalExpenses"
													placeholder="请输入" :disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="实际其他成本(元)" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.otherNecessaryEstimates"
													placeholder="请输入" :disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
									</el-row>

									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="实际总成本(元)" prop="name" class="grid-content bg-purple">
												<el-input v-model="zhixingList.totalCostEstimation" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="16">
											<el-form-item label="备注" prop="name" class="grid-content bg-purple">
												<el-input v-model="zhixingList.notes" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</div>
						</div>
					</div>

					<div style="padding: 20px">
						<div style="border: solid 1px #E5E5E5;border-radius: 5px;padding-bottom: 20px;">
							<div style="border-bottom: 1px solid #E5E5E5;padding: 1px">
								<div style="padding: 10px 20px;background-color: #FAFAFA;font-size: 14px;">
									活动执行效果
								</div>
							</div>
							<div style="padding: 20px 40px 0px 20px">
								<el-form label-position="top" ref="ruleFormInfo" :model="zhixingList"
									label-width="120px" style="position: relative">
									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="实际吸引流量" class="grid-content bg-purple device-from"
												prop="name">
												<el-input v-model="zhixingList.expectedAttractTraffic" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
										<el-col :span="8">
											<el-form-item label="实际参与人数" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.expectedParticipation" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>

										<el-col :span="8">
											<el-form-item label="实际直接收益(元)" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.expectedDirectBenefits" placeholder="请输入"
													:disabled="!zhixingBian" />
											</el-form-item>
										</el-col>
									</el-row>
									<el-row :gutter="20">
										<el-col :span="8">
											<el-form-item label="实际间接收益(元)" class="grid-content bg-purple" prop="name">
												<el-input v-model="zhixingList.expectedIndirectBenefits"
													placeholder="请输入" :disabled="!zhixingBian" />
											</el-form-item>
										</el-col>

									</el-row>
									<!-- <el-row :gutter="20">
									                <el-col :span="24">
									                  <el-form-item label="反馈内容" class="grid-content bg-purple" prop="name">
									                   <el-upload class="upload-demo" ref="upload"  :on-remove="handleRemove"
									                     :action="uploadFileUrl" :on-success="handleUploadSuccess" :file-list="fileData"
									                     :show-file-list="true" v-if="zhixingBian">
									                              <el-button style="background-color: #fff;color: #3F9B6A;border: 1px solid #dcdfe6;"  class="buttonHover" v-if="fileData.length==0">+点击上传</el-button>
									                   </el-upload>
									                   <div v-else>{{zhixingList.feedbackContent}}</div>
									                  </el-form-item>
									                </el-col>
									
									              </el-row> -->
								</el-form>
							</div>
						</div>
						<div v-if="activeName=='five'">
							<div style="width: 100%;padding:20px;">
								<wangEditor v-model="zhixingqingk" ref="editor"></wangEditor>
							</div>

						</div>
					</div>

				</div>
			</div>
			<div style="padding: 0px 20px 20px 20px;display:flex;justify-content: flex-end;">
				<el-button @click="refreshData" style="background-color: #3F9B6A;color: #fff">取消
				</el-button>
				<el-button @click="zhixingBian = true" style="background-color: #3F9B6A;color: #fff;"
					v-if="zhixingBian==false&& activeName=='second'">编辑</el-button>
				<el-button @click="bianji" style="background-color: #3F9B6A;color: #fff"
					v-if="zhixingBian && activeName=='second'">保存
				</el-button>
				<el-button @click="downloadPdf" style="background-color: #3F9B6A;color: #fff"
					v-if="activeName=='first'">下载
				</el-button>
				<el-button @click="fivebian" style="background-color: #3F9B6A;color: #fff" v-if="activeName=='five'">保存
				</el-button>
			</div>


		</div>
		<addAct v-if="addAct" @childClose='childClose' :fenleiName="cascaderList"></addAct>
		<atmbians v-if="bianshow" :showBian="atmbianMsg" @BianchildClose='BianchildClose'></atmbians>
	</div>
</template>

<script>
	import {
		deleteById,
		queryByPage,
		xiangByPage,
		fujiaTable,
		mingTable,
		danqueryById,
		xiangedit,
		fenEdit,
		actPage,
		actEdit,
		actAdd,
		MingAdd,
		MingDel,
		cereGet,
		cereAdd,
		cereEdit,
		cereDel,
		copy,
		excelQueryByPage,
		excelAdd,
		effectEvaluation
	} from '../../api/activityBz'
	import addAct from "./atmosphereBz"
	import atmbians from "./atmosphereBian"
	import * as echarts from 'echarts'
	import Vue from 'vue'
	import html2canvas from 'html2canvas'
	import jsPDF from 'jspdf'
	import wangEditor from "@/components/editor/index"
	import {
		uploadUrl
	} from '@/utils/request'
	export default {
		name: 'atmosphereGl',
		components: {
			addAct,
			atmbians,
			wangEditor
		},
		data() {
			return {
				addAct: false, //新增页
				atmbianMsg: {},
				bianshow: false, //编辑页
				fenxiData: {},
				planName: '',
				planFen: '',
				eventTheme: '',
				currentPage: 1,
				caogaoPage: 1,
				total: 0,
				flag: false,
				pageSize: 10,
				ggXin: false,
				radio: '1',
				shan: '',
				idX: 0,
				activeName: 'first',
				rules: {
					classificationName: [{
							required: true,
							message: '请输入分类名称',
							trigger: 'blur'
						},

					],
				},
				copyRules: {
					planName: [{
							required: true,
							message: '请输入新方案名称',
							trigger: 'blur'
						},

					],
				},
				fenlei: [],
				formInline: {
					merchantName: '', // 商家名称
					storeId: '', // 编码
					contacts: '', // 联系人
					businessEntity: '', //经营主体
					page: 1, // 当前页
					pageSize: 10 // 每页记录数
				},
				tableData: [],
				id: '',
				text: '123',
				tableData1: [{
					id: 0,
					name: '类型',
					planName: '',
					text: '活动地点',
					eventTheme: ''
				}, {
					id: 0,
					name: '活动开始时间',
					planName: '',
					text: '活动结束时间',
					eventTheme: ''
				}, {
					id: 0,
					name: '活动主题',
					planName: '',
					text: '活动主办方',
					eventTheme: ''
				}, {
					id: 0,
					name: '活动参与方',
					planName: '',
					text: '活动主要目的',
					eventTheme: ''
				}, {
					id: 0,
					name: '范围设置',
					planName: '',
					text: '状态',
					eventTheme: ''
				}],
				internalLaborCostEstimation: '',
				externalLaborCostEstimation: '',
				tableData3: [{
					id: 0,
					name: '商品成本预估(元)',
					planName: '',
					text: '设备成本预估(元)',
					eventTheme: ''
				}, {
					id: 0,
					name: '宣传费用预估(元)',
					planName: '',
					text: '其他必要成本预估(元)',
					eventTheme: ''
				}, {
					id: 0,
					name: '总成本预估(元)',
					planName: '',
					text: '备注',
					eventTheme: ''
				}],
				expectedAttractTraffic: '',
				expectedParticipation: '',
				tableData4: [{
					id: 0,
					name: '预计直接收益(元)',
					planName: '',
					text: '预计间接收益(元)',
					eventTheme: '-'
				}],
				createDate: '',
				createUser: '',
				tableData5: [{
					id: 0,
					name: '更新人',
					planName: '',
					text: '更新时间',
					eventTheme: '-'
				}],
				tableData2: [], //基本信息明细列表
				tableData6: [], //基本信息附件列表
				tableDa: [], //执行效果明细列表
				addMing: false, //执行效果添加明细
				zhixingBian: false, //判断是否编辑执行效果
				zhiXing: true, //判断是否是新增的执行效果
				mingFrom: {
					detailLtemName: '',
					estimatedQuantity: '',
					estimatedCost: '',
					notes: ''
				},
				zhixingList: {
					plan_Time: '',
					planName: '', //活动名称
					eventAddrs: '', //实际举办地点
					eventStartTime: 0, //实际开始时间
					eventEndTime: 0, //实际结束时间
					sponsor: '', //实际主办方
					participants: '', //实际参与方
					internalLaborCostEstimation: '', //内部人工成本
					externalLaborCostEstimation: '', //外部人工成本
					costEstimationGoods: '', //商品成本
					setCostEstimate: '', //设备成本
					estimatedPromotionalExpenses: '', //宣传费用预估
					otherNecessaryEstimates: '', //其他成本预估
					totalCostEstimation: '', //总成本预估
					notes: '', //备注
					expectedAttractTraffic: '', //吸引流量
					expectedParticipation: '', //参与人数
					expectedDirectBenefits: '', //直接收益
					expectedIndirectBenefits: '', //间接收益
					createDate: '', //创建时间
				}, //执行效果列表
				secondData: {},
				planTime: [],
				pageindex: {
					pageNumber: 1,
					pageSize: 10,
					dataOwnership: '2',
					isDraft: 0
				},
				multipleSelection: [], //选择的数据
				options: [],
				xinADD: {
					classificationName: '',
					classificationCode: '',
					parentId: '',
					classificationType: '1'
				},
				value: '',
				xiaoDui: false, //效果对比
				xiaoguoBox: false,
				chart: null, //饼图
				chart1: null, //漏斗图
				dataList: [],
				xinlei: false, //分类管理框
				fenleiDelId: null, //删除的分类ID
				fentcont: true, //分类管理控制
				submenuId: '',
				cascaderList: [],
				xiaoduiObj: {
					biliOne: '0%',
					bilis: 0,
					biliTwo: '0%',
					biliT: 0
				}, //效果对比数据
				defaultProps: {
					children: 'children',
					label: 'classificationName'
				},
				xianFenlei: [],
				copy: {
					planName: ''
				},
				copyShow: false,
				duibiOne: {},
				duibiTwo: {},
				uploadFileUrl: uploadUrl, // 请求地址
				daoData: [],
				fileData: [],
				caoList: [],
				caogaoshow: false,
				peiForm: {
					auditReminderTime: ''
				},
				peiShow: false,
				peiId: '',
				zhixingqingk: '',
				editFen: 0,
				zhixingRules:{
					planName: [{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur'
					}],
				},
				numBerList:0

			}
		},
		watch: {
		      tableDa: {
		          handler(newVal, oldVal) {
								this.numBerList +=1
								
		          },
		          deep: true
		      },
		      zhixingList: {
		          handler(newVal, oldVal) {
								this.numBerList +=1
								
		          },
		          deep: true
		      }
		  },
		created() {
			this.getAll()

		},
		computed: {

		},
		methods: {
			getStatus(state) {
				switch (state) {
					case '':
						return '待提交';
					case '1':
						return '待审核';
					case '2':
						return '业务部审核';
					case '3':
						return '品牌审核';
					case '4':
						return '审核通过';
					case '5':
						return '审核不通过'
				}
			},
			//查询全数据
			async getAll() {
				const res = await queryByPage((this.pageindex))

				this.tableData = res.data.content
				this.total = res.data.content.length
				let page = {
					pageNumber: 1,
					pageSize: 10,
					classificationType: '1'
				}
				const fenleis = await cereGet(page)
				this.fenlei = fenleis.data
				this.xianFenlei = this.trsData(fenleis.data)
				this.cascaderList = this.transformData(fenleis.data)
			},
			transformData(data) {
				return data.map(item => ({
					value: item.cereClassification.id,
					label: item.cereClassification.classificationName,
					children: item.childClassifications.map(child => ({
						value: child.id,
						label: child.classificationName,
					})),
				}));
			},
			trsData(data) {
				return data.map(item => ({
					...item.cereClassification,
					children: item.childClassifications || []
				}));
			},
			async handleNodeClick(data) {

				let pageindex = {
					pageNumber: 1,
					pageSize: 10,
					dataOwnership: '2',
					classificationCode: data.id,
					isDraft: 0
				}
				const res = await queryByPage(pageindex)
				this.tableData = res.data.content
				this.total = res.data.content.length
			},
			async getFenAll() {
				this.pageindex = {
					pageNumber: 1,
					pageSize: 10,
					dataOwnership: '2',
					isDraft: 0
				}
				const res = await queryByPage(this.pageindex)
				this.tableData = res.data.content
				this.total = res.data.content.length
			},
			//删除记录按钮
			handleDelete(val) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							deleteById({
								id: val
							}).then(res => {
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})


				// if (this.multipleSelection.length == 1) {} else {
				// 	this.$message({
				// 		message: '请选择一个文件删除',
				// 		customClass: 'custom-message',
				// 		offset: 100
				// 	})
				// }
			},
			//查询
			async onSubmit() {
				if (this.planName != '' && this.eventTheme == '') {
					const res = await danqueryById({
						planName: this.planName,
						dataOwnership: '2',
						pageNumber: 1,
						pageSize: 10,
						auditTime: 0,
						isDraft: 0
					})
					this.tableData = res.data.content
				} else if (this.planName == '' && this.eventTheme != '') {
					const res = await danqueryById({
						eventTheme: this.eventTheme,
						dataOwnership: '2',
						pageNumber: 1,
						pageSize: 10,
						auditTime: 0,
						isDraft: 0
					})
					this.tableData = res.data.content
				} else {
					const res = await danqueryById({
						planName: this.planName,
						eventTheme: this.eventTheme,
						dataOwnership: '2',
						pageNumber: 1,
						pageSize: 10,
						auditTime: 0,
						isDraft: 0
					})
					this.tableData = res.data.content
				}

			},
			//获取当前时间
			updateCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0');
				const day = now.getDate().toString().padStart(2, '0');
				const hours = now.getHours().toString().padStart(2, '0');
				const minutes = now.getMinutes().toString().padStart(2, '0');
				const seconds = now.getSeconds().toString().padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			formTime(data) {
				this.zhixingList.planTime = data
			},
			blur(){
				this.$forceUpdate()
			},
			//执行效果保存
			 bianji() {
				 if(this.numBerList>3){
				 					 
				 }else{
				 					this.$message({
				 						message: '请填写或修改数据',
				 						type: 'error',
				 						offset: 100
				 					})
				 					return false; 
				 }
				this.$refs.zhixingFormInfo.validate((valid) => {
						          if (valid) {
									  if (this.fileData.length != 0) {
									  	this.zhixingList.feedbackContent = this.fileData[0].url
									  }
									  if (this.zhiXing) {
									  	this.zhixingList.eventStartTime = this.zhixingList.planTime[0]
									  	this.zhixingList.eventEndTime = this.zhixingList.planTime[1]
									  	this.zhixingList.detailsId = this.secondData.id
									  	this.zhixingList.createDate = this.updateCurrentTime()
									  	 actAdd(this.zhixingList).then(()=>{
											 this.ggXin = false
											 this.getAll()
										 })
									  } else {
									  	let that = this
									  	Vue.delete(that.zhixingList, 'createDate')
									  	this.zhixingList.eventStartTime = this.zhixingList.planTime[0]
									  	this.zhixingList.eventEndTime = this.zhixingList.planTime[1]
									  	Vue.delete(that.zhixingList, 'planTime')
									  	this.zhixingList.updateDate = ''
									  	 actEdit(this.zhixingList).then(()=>{
											 this.ggXin = false
											 this.getAll()
										 })
									  }
									  
									
									  }else{
										this.$message({
											message: '请填写数据',
											type: 'error',
											offset: 100
										})
										return false;  
									  }
								})
				
			},
			//详情点击
			handleEditForm(item, val) {
				if (val == 2) {
					this.activeName = 'five'
				}
				this.fileData = []
				this.zhixingList = {
					planTime: [],
					planName: '', //活动名称
					eventAddrs: '', //实际举办地点
					eventStartTime: 0, //实际开始时间
					eventEndTime: 0, //实际结束时间
					sponsor: '', //实际主办方
					participants: '', //实际参与方
					internalLaborCostEstimation: '', //内部人工成本
					externalLaborCostEstimation: '', //外部人工成本
					costEstimationGoods: '', //商品成本
					setCostEstimate: '', //设备成本
					estimatedPromotionalExpenses: '', //宣传费用预估
					otherNecessaryEstimates: '', //其他成本预估
					totalCostEstimation: '', //总成本预估
					notes: '', //备注
					expectedAttractTraffic: '', //吸引流量
					expectedParticipation: '', //参与人数
					expectedDirectBenefits: '', //直接收益
					expectedIndirectBenefits: '', //间接收益
					createDate: '', //创建时间
				} //执行效果列表
				actPage({
					detailsId: item.id,
					pageNumber: 1,
					pageSize: 10,
				}).then(res => {
					console.log(res.data.content)
					if (res.data.content.length == 0) {
						this.zhiXing = true

					} else {
						mingTable({
							detailsId: res.data.content[0].id,
							pageNumber: 1,
							pageSize: 10,
						}).then(res => {
							this.tableDa = res.data.content
						})
						this.zhiXing = false
						this.zhixingList = res.data.content[0]
						if ((typeof this.zhixingList.eventStartTime) == 'object' || (typeof this.zhixingList
								.eventEndTime) == 'object') {
							this.zhixingList.planTime = []
						} else {
							console.log(typeof this.zhixingList.eventStartTime)
							this.zhixingList.planTime = [this.zhixingList.eventStartTime, this.zhixingList
								.eventEndTime
							]
						}
					}
				})
				this.idX = item.id
				this.planTime = [item.eventStartTime, item.eventEndTime]
				let that = this

				fujiaTable({
					detailsId: item.id,
					pageNumber: 1,
					pageSize: 10,
				}).then(res => {
					this.tableData6 = res.data.content
				})
				mingTable({
					detailsId: item.id,
					pageNumber: 1,
					pageSize: 10,
				}).then(res => {
					this.tableData2 = res.data.content
				})

				danqueryById({
					id: item.id,
					dataOwnership: '2',
					pageNumber: 1,
					pageSize: 10,
				}).then(res => {
					this.secondData = res.data.content[0]
					//基本信息
					that.id = res.data.content[0].id
					that.text = res.data.content[0].planName
					that.tableData1[0].eventTheme = res.data.content[0].planType
					that.tableData1[0].planName = res.data.content[0].eventAddrs
					that.tableData1[1].eventTheme = res.data.content[0].eventStartTime
					that.tableData1[1].planName = res.data.content[0].eventEndTime
					that.tableData1[2].eventTheme = res.data.content[0].eventTheme
					that.tableData1[2].planName = res.data.content[0].sponsor
					that.tableData1[3].eventTheme = res.data.content[0].participants
					that.tableData1[3].planName = res.data.content[0].mainPurpose
					that.tableData1[4].planName = this.getStatus(res.data.content[0].state)
					that.tableData1[4].eventTheme = res.data.content[0].rangeSetting
					//活动成本信息
					that.internalLaborCostEstimation = res.data.content[0].internalLaborCostEstimation
					that.externalLaborCostEstimation = res.data.content[0].externalLaborCostEstimation
					that.tableData3[0].eventTheme = res.data.content[0].costEstimationGoods
					that.tableData3[0].planName = res.data.content[0].setCostEstimate
					that.tableData3[1].eventTheme = res.data.content[0].estimatedPromotionalExpenses
					that.tableData3[1].planName = res.data.content[0].otherNecessaryEstimates
					that.tableData3[2].eventTheme = res.data.content[0].totalCostEstimation
					that.tableData3[2].planName = res.data.content[0].notes
					//预估效果
					that.expectedAttractTraffic = res.data.content[0].expectedAttractTraffic
					that.expectedParticipation = res.data.content[0].expectedParticipation
					that.tableData4[0].eventTheme = res.data.content[0].expectedDirectBenefits
					that.tableData4[0].planName = res.data.content[0].expectedIndirectBenefits
					//系统信息
					that.createUser = res.data.content[0].createUser
					that.createDate = res.data.content[0].createDate
					that.tableData5[0].planName = res.data.content[0].updateDate
					that.tableData5[0].eventTheme = res.data.content[0].updateUser


				}).catch(err => {
					console.log(err)

				})
				if (!item) {
					this.formItem = {}
				} else {
					this.formItem = item
				}
				this.numBerList = 0
				this.ggXin = true
			},
			removeEmptyValues(obj) {
				if (typeof obj !== 'object' || obj === null) {
					return obj;
				}

				const newObj = Array.isArray(obj) ? [] : {};

				for (const key in obj) {
					if (Object.prototype.hasOwnProperty.call(obj, key)) {
						const value = obj[key];
						if (value !== null && value !== undefined && value !== '' && !this.isEmptyObject(value)) {
							if (Array.isArray(newObj)) {
								newObj.push(this.removeEmptyValues(value));
							} else {
								newObj[key] = this.removeEmptyValues(value);
							}
						}
					}
				}

				return newObj;
			},
			isEmptyObject(obj) {
				return Object.keys(obj).length === 0 && obj.constructor === Object;
			},
			//新增方案
			create() {
				this.addAct = true
			},
			childClose(msg) {
				this.addAct = msg
				this.getAll()
			},
			//编辑页
			BianchildClose(msg) {
				this.bianshow = msg
				this.getAll()
			},
			//修改
			actBian(item) {

				this.atmbianMsg = item
				this.bianshow = true

			},
			handleCurrentChange(val) {
				this.currentPage = val
			},
			caogaoCurrentChange(val) {
				this.caogaoPage = val
			},
			handleSizeChange(val) {
				this.pageSize = val
			},
			closeFn() {
				this.ggXin = false
			},
			handleClick() {

			},
			refreshData() {
				// console.log('12123')
				this.tableDa = []
				this.activeName = 'first'
				this.zhixingBian = false
				this.ggXin = false
			},
			TabClick(tab, event) {
				console.log(tab, event)
				if (tab.index == '0') {
					this.getAll()
				} else {
					this.tableData = []
				}
			},
			//重置按钮
			resetting() {
				this.planName = ''
				this.eventTheme = ''
				this.getAll()
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				console.log(val)
			},
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.mulTable.toggleRowSelection(row);
					});
				}
			},
			tableAll() {
				this.$refs.mulTable.clearSelection(); // 清除所有选项
				const allRows = this.$refs.mulTable.data; // 获取所有行数据
				allRows.forEach(row => {
					this.$refs.mulTable.toggleRowSelection(row, true); // 全选所有项
				});
			},
			minSev() {
				if (this.zhiXing) {
					this.tableDa.push(this.mingFrom)
				} else {
					this.mingFrom.detailsId = this.zhixingList.id
					MingAdd(this.mingFrom).then(res => {
						this.mingcha(this.zhixingList.id)
					})
				}
				this.mingFrom = {
					detailLtemName: '',
					estimatedQuantity: '',
					estimatedCost: '',
					notes: ''
				}
				this.addMing = false
			},
			// 查询执行明细
			mingcha(id) {
				mingTable({
					detailsId: id,
					pageNumber: 1,
					pageSize: 10
				}).then(res => {
					this.tableDa = res.data.content
				})
			},
			MingDelete(index, item) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							if (this.zhiXing) {
								this.tableDa.splice(item, 1);
							} else {
								MingDel({
									id: item.id
								}).then(res => {
									this.mingcha(this.zhixingList.id)
								})
							}
							done();
						} else {
							done();
						}
					}
				})
			},
			OAshen(item) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否提交审核 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							xiangedit({
								id: item.id,
								state: '1'
							}).then(res => {
								this.getAll()
							})
							done();
						} else {
							done();
						}
					}
				})

			},
			tianMing() {
				if (this.zhixingBian) {
					this.addMing = true
				}
			},
			xiaoguo(item) {
				effectEvaluation({
					id: item.id
				}).then(res => {
					this.fenxiData = res.data
					this.fenxiData.incomeAnalysis = Number(res.data.incomeAnalysis).toFixed(2)
					this.xiaoguoBox = true
					this.$nextTick(() => {
						this.jiaoLiu(this.$refs.jiaoL, this.fenxiData);
						// this.shopLiu(this.$refs.shopL);
						this.resizeChart = () => {
							try {
								// this.chart.resize();
								this.chart1.resize();
							} catch (error) {
								console.log(error);
							}
						};
						window.addEventListener('resize', this.resizeChart, false); // false代表事件句柄在冒泡阶段执行
					})
				})

			},
			shopLiu(Dom) {
				this.chart = echarts.init(Dom)
				let option = {
					tooltip: {
						trigger: 'item'
					},

					legend: {
						textStyle: {
							fontSize: 14
						},
						icon: 'circle',
						top: '40%',
						left: '65%'
					},
					color: ['#50B5FF', '#FFC542', '#8167F5', '#FF7474', '#58A3F7'],
					series: [{
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['35%', '60%'],
						avoidLabelOverlap: false,
						padAngle: 5,
						itemStyle: {
							borderRadius: 10
						},
						label: {
							show: false,
							position: 'center',
							formatter: '{c}'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 16,
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 1048,
								name: '0-20'
							},
							{
								value: 735,
								name: '20-30'
							},
							{
								value: 580,
								name: '30-40'
							},
							{
								value: 484,
								name: '40-50'
							},
							{
								value: 300,
								name: '50-60'
							}
						]
					}]
				}
				this.chart.setOption(option)
			},
			jiaoLiu(Dom, list) {
				this.chart1 = echarts.init(Dom)
				let option = {
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c}%'
					},
					series: [{
						type: 'funnel',
						left: '12%',
						top: 60,
						bottom: 30,
						width: '80%',
						min: 0,
						max: 100,
						minSize: '45%',
						maxSize: '100%',
						sort: 'descending',
						gap: 2,
						label: {
							show: true,
							position: 'inside'
						},
						labelLine: {
							length: 10,
							lineStyle: {
								width: 1,
								type: 'solid'
							}
						},
						itemStyle: {
							borderColor: '#fff',
							borderWidth: 1
						},
						emphasis: {
							label: {
								fontSize: 20
							}
						},
						color: ['#50B5FF', '#5AD8A6', '#5D7092', '#F6BD16', '#f2d2f6'],
						data: [{
								value: list.expectedAttractTrafficAnalyse,
								name: '吸引游客流量'
							},
							{
								value: list.expectedParticipationAnalyse,
								name: '参与人数'
							},
							{
								value: list.expectedDirectBenefitsAnalysis,
								name: '直接收益'
							},
							{
								value: list.expectedIndirectBenefitsAnalysis,
								name: '间接收益'
							},
						]
					}]
				}
				this.chart1.setOption(option)
			},
			xinFenlei(node, data) {
				if (data) {
					this.xinADD.parentId = data.id
				}
				this.xinlei = true
			},
			editFenlei(node, data) {
				this.editFen = 1
				if (data) {
					this.xinADD.parentId = data.id
					this.xinADD.classificationName = data.classificationName
				}
				this.xinlei = true
			},
			sevLei() {
				this.$refs.fenFrom.validate((valid) => {
					if (valid) {
						if (this.editFen == 0) {
							this.xinADD.classificationCode = this.xinADD.classificationName

							cereAdd(this.xinADD).then(res => {
								this.xinlei = false
								this.xinADD = {
									classificationName: '',
									classificationCode: '',
									parentId: '',
									classificationType: '1'
								}
								this.$message({
									message: '保存成功',
									type: 'success',
									offset: 100
								})
								this.getAll()
							})
						} else {
							cereEdit({
								id: this.xinADD.parentId,
								classificationName: this.xinADD.classificationName
							}).then(res => {
								this.xinlei = false
								this.xinADD = {
									classificationName: '',
									classificationCode: '',
									parentId: '',
									classificationType: '1'
								}
								this.$message({
									message: '保存成功',
									type: 'success',
									offset: 100
								})
								this.getAll()
							})
						}

					} else {
						this.$message({
							message: '请填写数据',
							type: 'error',
							offset: 100
						})
						return false;
					}

				})


			},
			fenDelete(node, data) {
				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否当前分类和子分类删除 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							cereDel({
								id: data.id
							}).then(res => {
								this.xinlei = false
								this.getAll()
								done();
							})
						} else {
							done();
						}
					}
				})

			},
			fenqing() {
				this.xinADD = {
					classificationName: '',
					classificationCode: '',
					parentId: '',
					classificationType: '1'
				}
				this.xinlei = false
			},
			fenleiChange(value) {
				this.xinADD.parentId = value[value.length - 1]
				this.$refs.cascaderRef.dropDownVisible = false;
			},
			duibi() {
				if (this.multipleSelection.length == 1) {
					this.xiaoDui = true
					this.duibiOne = this.multipleSelection[0]
					console.log(this.multipleSelection[0])
					let that = this
					actPage({
						detailsId: this.multipleSelection[0].id,
						pageNumber: 1,
						pageSize: 10,
					}).then(res => {
						this.duibiTwo = res.data.content[0] === undefined ? {} : res.data.content[0];
						console.log(this.duibiTwo)
						if (res.data.content[0] === undefined || res.data.content[0].totalCostEstimation == '') {
							that.xiaoduiObj.biliTwo = '0%'
							that.xiaoduiObj.biliT = 0
						} else {
							that.xiaoduiObj.biliT = that.duibiTwo.internalLaborCostEstimation / that.duibiTwo
								.totalCostEstimation * 100
							that.xiaoduiObj.biliTwo =
								`${Math.round(that.duibiTwo.internalLaborCostEstimation  / that.duibiTwo.totalCostEstimation*100)}%`
						}

					})
					if (that.duibiOne.totalCostEstimation == '') {
						that.xiaoduiObj.biliOne = '0%'
						that.xiaoduiObj.bilis = 0
					} else {
						that.xiaoduiObj.bilis = that.duibiOne.internalLaborCostEstimation / that.duibiOne
							.totalCostEstimation * 100
						that.xiaoduiObj.biliOne =
							`${Math.round(that.duibiOne.internalLaborCostEstimation  / that.duibiOne.totalCostEstimation*100)}%`
					}


				} else {
					this.$message({
						message: '请选择一个文件对比',
						customClass: 'custom-message',
						offset: 100
					})
				}

			},

			koop(item) {
				this.copy.id = item.id
				this.copyShow = true
			},
			copyClose() {
				this.copyShow = false
				this.copy.planName = ''
			},
			copysev() {
				this.$refs.copyfrom.validate((valid) => {
					if (valid) {
						copy(this.copy).then(res => {
							this.copyShow = false
							this.getAll()
						})
					} else {
						this.$message({
							message: '请填写数据',
							type: 'error',
							offset: 100
						})
						return false;
					}
				})
			},
			customFormat(percentage) {
				let zong
				if (percentage == undefined || percentage === null || percentage == '') {
					percentage = 0
					zong = 10000
				}
				return `${percentage} / ${percentage==''?zong:parseInt(percentage) *10}`;
			},
			baifenbi(item) {

				let zong
				if (item == undefined || item === null || item == '') {
					item = 0
					zong = 10000
					return Math.round(item / (item * 10) * 100);
				} else {
					return Math.round(item / zong * 100);
				}

			},
			handleUploadSuccess(response, file, fileList) {
				const fileMsg = {
					name: file.name,
					url: file.response.data.url,
				}
				// 将文件地址存储在 uploadedFiles 数组中
				this.fileData.push(fileMsg);
			},
			handleRemove() {
				this.fileData = []
			},
			daoru(response, file, fileList) {
				this.daoData.push(file.raw)
				const formDate = new FormData()
				formDate.append('file', this.daoData[0])
				excelAdd(formDate).then(res => {
					this.getAll()
				})
			},
			caogao() {
				let pageindex = {
					pageNumber: 1,
					pageSize: 10,
					dataOwnership: '2',
					isDraft: 1
				}
				queryByPage(pageindex).then(res => {
					this.caoList = res.data.content
				})
				this.caogaoshow = true

			},
			shiyong(item) {

				const h = this.$createElement;
				this.$msgbox({
					title: '消息',
					message: h('p', null, [
						h('span', null, '是否使用 '),
					]),
					showCancelButton: true,
					showClose: false,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'oe-dialog-btn',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							xiangedit({
								id: item.id,
								draftStatus: 1,
								isDraft: 0
							}).then(res => {
								this.getAll()
								this.caogao()
								done();
							})
						} else {
							done();
						}
					}
				})


			},
			async daochu() {
				let res = await excelQueryByPage(this.pageindex)
				if (!res) {
					return
				}
				const blob = new Blob([res], {
					type: 'application/vnd.ms-excel'
				})
				const fileName = '审核流程.xls'
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a')
					elink.download = fileName
					elink.style.display = 'none'
					elink.href = URL.createObjectURL(blob)
					document.body.appendChild(elink)
					elink.click()
					URL.revokeObjectURL(elink.href) // 释放URL 对象
					document.body.removeChild(elink)
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, fileName)
				}
				this.$message({
					message: '导出成功',
					type: 'success'
				})


			},
			// 下载
			async downloadPdf() {
				const content = this.$refs.actXiang;

				// 使用 html2canvas 将 div 渲染为画布
				const canvas = await html2canvas(content);

				// 获取画布的图像数据
				const imgData = canvas.toDataURL('image/png');

				// 创建一个新的 PDF 文档
				const pdf = new jsPDF('p', 'mm', 'a4');

				// 添加图像到 PDF，第二个参数是图像格式，第三个参数是缩放比例
				const imgWidth = 190; // 图像的宽度（mm）
				const imgHeight = (canvas.height * imgWidth) / canvas.width; // 保持图像的宽高比

				pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); // 10, 10 是图像在 PDF 中的位置（mm）

				// 保存 PDF 文件
				pdf.save('氛围方案.pdf');
			},
			peizhi(item) {
				this.peiForm = {
					auditTime: ''
				}
				this.peiShow = true
				this.peiId = item.id
			},
			async peiCheck() {
				if (this.peiForm.auditReminderTime == '') {
					this.$message({
						message: '请填写审核提醒时间',
					})
					return;
				}
				await xiangedit({
					id: this.peiId,
					auditReminderTime: this.peiForm.auditReminderTime
				})
				this.peiShow = false
				this.getAll()
			},
		}
	}
</script>

<style scoped>
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}

	/deep/ .first-column-bg {
		background-color: #f4f4f5 !important;
	}

	.zhuti {
		padding: 0 20px 20px 20px;
		min-height: calc(100vh - 50px - 20px);
		background-color: #Fff;

	}


	.tableBtn {
		display: inline-block;
		margin-right: 10px;
	}

	.formSearch {
		display: flex;
		width: 100%;
		font-size: 14px;
		justify-content: space-between;
		padding-bottom: 10px;
		align-items: center;
	}


	.greens {
		color: #3F9B6A;
	}

	/deep/ .el-table__row {
		font-size: 14px;
		color: #000000e6;
	}

	.fenye {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #3F9B6A;
	}

	.el-row {
		margin-bottom: 20px;
	}

	:last-child {
		margin-bottom: 0;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		/* background: #d3dce6; */
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	/deep/ .bg-purple[data-v-0e3fe4ec] {
		background: #fff;
		height: 50px;
	}

	/deep/ .el-form--label-top .el-form-item__label {
		padding: 0;
	}


	.pagination {
		text-align: right;
		line-height: 20px;
	}

	/deep/ .el-pagination__total {
		margin-top: 4px;
	}

	/deep/ .dialog_css {
		margin-top: 11vh;
		margin-left: 25%;
		padding: 0px;

		.el-dialog__title {
			font-size: 14px;
		}
	}

	/deep/.el-dialog__body {
		padding: 0px;
	}

	/deep/ .el-dialog__header {
		background-color: #fff;
	}

	/deep/.el-dialog__title {
		color: #000;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	/deep/ .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 108px;
		height: 108px;
		line-height: 108px;
		/*text-align: center;*/
	}

	.avatar {
		width: 108px;
		height: 108px;
		display: block;
	}

	::v-deep .el-tabs__item.is-active {
		color: #389865;
		opacity: 1;
	}

	/deep/ .el-tabs__nav-wrap::after {
		background-color: #fff;
	}

	::v-deep .el-tabs__item:hover {
		color: #389865;
		cursor: pointer;
		opacity: 1;
	}

	/deep/ .el-tabs__active-bar {
		background-color: #389865;
	}

	/deep/ .el-table_2_column_13 {
		font-weight: 100;
	}

	::v-deep .el-input__inner:focus {
		border: #11be59 1px solid;
	}

	::v-deep .el-input__inner:hover {
		border: #11be59 1px solid;
	}

	::v-deep .el-input__inner {
		height: 32px;
		line-height: 32px;
	}

	::v-deep .el-select .el-input.is-focus .el-input__inner {
		border-color: #11be59
	}

	::v-deep .el-form-item__label {
		font-weight: 100;
		font-size: 14px;
		color: #000000e6;
	}

	/* 修改未进行步骤的描述文字颜色 */
	::v-deep .el-steps .el-step__description.is-wait {
		color: #999;
		/* 修改为你想要的颜色 */
	}

	/* 修改未进行步骤的图标颜色 */
	::v-deep .el-steps .el-step__icon.is-text.is-wait {
		color: #999;
		/* 修改为你想要的颜色 */
	}

	/* 修改未进行步骤的边框色 */
	::v-deep .el-steps .el-step__line.is-wait {
		border-color: #eee;
		/* 修改为你想要的颜色 */
	}

	::v-deep .el-steps .is-process .el-step__line {
		background-color: #3F9B6A;
		/* 修改线的颜色 */
	}

	::v-deep .el-steps .is-process .el-step__title {
		color: #fe7b6a;
		/* 修改进行中步骤的标题颜色 */
	}

	::v-deep .el-steps .is-process .el-step__icon {
		color: #fff;
		/* 修改进行中步骤的图标颜色 */
		background: #3F9B6A;
		/* 修改进行中步骤图标的边框颜色 */
		border: 0px;
	}

	::v-deep .el-step__icon-inner {
		line-height: 0
	}

	/* 线条长度 */
	::v-deep .el-step.is-vertical .el-step__line {
		top: 30px;
		height: 60px;
	}

	::v-deep .xiang_css {
		margin-top: 11vh !important;
		margin-left: 13%;
		height: 600px;
		overflow-y: auto;
	}

	.fenlan {
		display: flex;
	}

	.souLei {
		border: 1px solid #d7d7d7;
		background-color: #fff;
		width: 18%;
		margin-right: 20px;

	}

	::v-deep .el-menu {
		border-right: 0px;
	}

	::v-deep .el-menu-item {
		height: 36px;
		line-height: 36px;
	}

	::v-deep .el-submenu__title {
		height: 36px;
		line-height: 36px;
		font-weight: 600;
		border-radius: 4px;
		margin: 4px 0;
	}

	::v-deep .el-menu-item-group__title {
		padding: 0px
	}

	::v-deep .fudan {
		font-weight: 600;
		border-radius: 4px;
		padding-left: 29px !important;
		margin: 4px 0;
	}

	::v-deep .chinddan {
		margin: 5px 0;
	}
</style>
<style lang="scss" scoped>
	::v-deep .souTabs {
		padding: 0 15px 0 12px;

		.el-submenu {
			padding: 0px;
		}

		.el-menu-item:focus,
		.el-menu-item:hover {
			background-color: #3F9B6A !important;
		}

		.el-menu-item:hover {
			background-color: #3f9b6a1a !important;
			color: #000 !important;
		}

		::v-deep .el-menu-item.is-active {
			background-color: #3F9B6A !important;
		}

		.el-tabs--left .el-tabs__header.is-left {
			width: 100%;
			margin-right: 0px;
		}

		.el-tabs--left .el-tabs__item.is-left {
			text-align: center;
		}

		.el-tabs__item.is-active {
			background-color: #DEEBE2;
		}
	}

	::v-deep .tableList {
		width: 81%;

		.el-button:hover {
			border: none
		}
	}

	::v-deep .demo-input-suffix {
		display: flex;
		margin-right: 20px;

		.el-input__inner {
			height: 32px;
		}
	}

	::v-deep .buttonHover:hover {
		color: #3f9b6a !important;
		border-color: #c5e1d2 !important;
		background-color: #ecf5f0 !important;
		outline: none;
	}

	::v-deep .DelBtnHover:hover {
		color: #fff !important;
		border-color: rgb(226, 78, 90) !important;
		background-color: rgb(226, 78, 90) !important;
		outline: none;
	}

	::v-deep .el-input__icon {
		line-height: 25px;
	}

	::v-deep .el-input--mini .el-input__icon {
		line-height: 33px;
	}

	::v-deep .jindutiao {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.el-progress-bar__outer {
			border-radius: 0px;
		}

		.el-progress-bar__inner {
			border-radius: 0px;
		}
	}
</style>