Project_yhfu/src/views/eventdetailsdialog.vue

<template>
	<div class="visual-con">
		<!--头部-->
		<vheader></vheader>
		<!--主体-->
		<div class="visual-body">
			<button @click="showEventDialog"
				style="position: absolute; left:50%;top: 50vh; transform: translateX(-50%);">触发事件详情
			</button>
			<!-- 弹层 -->
			<el-dialog title="事件详情" :visible.sync="eventDialog" customClass="customWidth" v-if="eventDialog"
				@close="cancelEventShow()">
				<div class="dia-event-info">
					<el-row>
						<!-- 左侧 -->
						<el-col :span="18" class="dia-left">
							<div ref="imageTofile" style="height: 75vh;">
								<!-- 应急预案 -->
								<div class="dia-left-top">
									<div class="dia-left-top-tit">应急预案</div>
									<div class="dia-left-top-carousel">
										<el-carousel height="30px" direction="vertical" :interval="2000">
											<el-carousel-item v-if="visuForestCloudYuAnBo!=null">
												<a
													:href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName }}</a>
											</el-carousel-item>
											<el-carousel-item v-else>
												<a href="#">暂未关联预案</a>
											</el-carousel-item>
										</el-carousel>
									</div>
									<el-button size="mini" type="primary" @click="showUpdateYjYuAn">预案调整
									</el-button>
								</div>
								<!-- 应急预案end -->
								<!-- 左侧资源 -->
								<div class="leftbar"
									style="width:fit-content !important;bottom:0rem;left: 1rem; top: unset;">
									<div class="forthis">
										<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
											<div class="i-list-con">
												<div class="d-l-con-icon" style="flex-direction:row;flex-wrap: nowrap;">
													<div class="icon-con" style="width: fit-content !important;"
														v-for="(item,index) in resourcesList"
														@click="listResourceByWz(item.type)">
														<div class="iconfont icon icon-normal" :class="item.icon"></div>
														<div class="icon-text">
															<h5>{{ item.resourceName }}</h5>
														</div>
													</div>
													<el-input type="number" v-model="radius" style="width: 80px;"
														placeholder="请输入搜索半径" />
												</div>
											</div>
										</dv-border-box-7>
									</div>
								</div>
								<!-- 左侧资源end -->
								<!-- 底部工具栏 -->
								<!--   <div class="dia-left-btm-tool">
                   </div> -->
								<!-- 底部工具栏end -->
								<!-- 地图 -->
								<div class="fire-m">
									<el-button size="small" icon="el-icon-upload" @click="showheatPlotting()">火灾蔓延
									</el-button>
								</div>

								<supermapDialog ref="supermapDialog" style="position: absolute; top:0;left: 0;"
									:mapDiv="'forestWarmSuperMap'"
									:mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
									:codes="['9fa5']" :isSideBySide="false" :isdynamicPlotting="true" @preview="preview"/>
								<!-- 地图end -->
							</div>

						</el-col>
						<!-- 左侧end -->
						<!-- 右侧 -->
						<el-col :span="6" class="dia-right">
							<div class="e-right">
								<div class="forthis1">
									<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
										style="padding-bottom:1rem ;">
										<div class="i-list-con">
											<div class="this-con">
												<div class="z-info-list" style="margin-top: 0;">
													<el-timeline>
														<el-timeline-item color="#2bacf7" :timestamp="item.createTime"
															placement="top" v-for="(item,index) in eventLogList">
															<el-card style="width: 40vh">
																<div class="z-info-list-con">
																	<div class="user-and-time flex-d">
																		<span>{{ item.createName }}</span>
																		<span
																			v-if="eventLogList.length - 1 == index&&address!=null&&address!=''"><i
																				class="el-icon-location"></i>
																			{{ address }}</span>
																		<span v-else></span>
																	</div>
																	<div class="z-info">
																		<div class="this-con-list-info">
																			{{ item.logContent }}
																		</div>
																		<div>
																			<router-link to="#"
																				@click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
																				v-for="(itemfile,indexfile) in item.fileVOs">
																				<el-image :src="itemfile.fileUrl"
																					v-if="itemfile.fileType=='image'"
																					:preview-src-list="assetTypeAnImage(item.fileVOs)"
																					style="width:3rem; height:3rem;margin: 2px;"
																					:title="itemfile.fileName">
																				</el-image>
																				<img v-else-if="itemfile.fileType=='video'"
																					style="width:3rem; height:3rem;margin: 2px;"
																					:src="require('@/assets/fileTypeImage/mp4.png')"
																					:title="itemfile.fileName">
																				</img>
																				<img v-else-if="itemfile.fileType=='word'"
																					style="width:3rem; height:3rem;margin: 2px;"
																					:src="require('@/assets/fileTypeImage/word.png')"
																					:title="itemfile.fileName">
																				</img>
																				<img v-else-if="itemfile.fileType=='excel'"
																					style="width:3rem; height:3rem;margin: 2px;"
																					:src="require('@/assets/fileTypeImage/excel.png')"
																					:title="itemfile.fileName">
																				</img>
																				<img v-else
																					style="width:3rem; height:3rem;margin: 2px;"
																					:src="require('@/assets/fileTypeImage/file.png')"
																					:title="itemfile.fileName">
																				</img>
																			</router-link>
																		</div>
																	</div>
																</div>
															</el-card>
														</el-timeline-item>
													</el-timeline>
												</div>
											</div>
										</div>
									</dv-border-box-7>
								</div>
								<div class="forthis2">
									<dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">
										<div class="i-list-con">
											<div class="this-con h-25 no-padding">
												<div class="z-info-list" style="margin-top: 0;">
													<div class="z-info-btm-grp">
														<div class="z-info-btm-grp-top">
															<div class="z-info-btm-grp-left">
																<!--                                <el-button size="small" icon="el-icon-s-flag">责任制-->
																<!--                                </el-button>-->
																<el-button size="small" icon="el-icon-upload"
																	@click="showEventLogUpload()">上传
																</el-button>
																<el-button size="small" icon="el-icon-download"
																	@click="toImage()">截图上传
																</el-button>
                                <el-button size="small" icon="el-icon-s-flag" @click="showResponsibility()">责任制
                                </el-button>
															</div>
															<div class="z-info-btm-grp-right">
																<el-button size="small" icon="el-icon-mic">会议
																</el-button>
															</div>
														</div>
														<div class="z-info-btm-input">
															<el-input type="textarea" v-model="eventLog"
																:autosize="{ minRows: 7, maxRows: 7}"
																placeholder="请输入反馈信息">
															</el-input>
															<div class="z-info-btm-input-btn"
																v-if="eventStatusValue=='forest_event_status_1'">
																<div style="text-align:left">
																	<el-button size="small" icon="el-icon-s-flag"
																		@click="updateCentereventTEventcatalogueStatus('qs',false)">
																		签收
																	</el-button>
																	<el-button size="small" icon="el-icon-question"
																		@click="updateCentereventTEventcatalogueStatus('wb',false)">
																		误报
																	</el-button>
																	<el-button size="small" icon="el-icon-warning"
																		@click="updateCentereventTEventcatalogueStatus('cf',false)">
																		重复
																	</el-button>
																</div>
																<el-button size="small" icon="el-icon-chat-dot-square"
																	@click="sendEventLog()">发送
																</el-button>
															</div>
															<div class="z-info-btm-input-btn"
																v-else-if="eventStatusValue=='forest_event_status_2'">
																<div>
																	<el-button size="small" icon="el-icon-question"
																		@click="updateCentereventTEventcatalogueStatus('wb',false)">
																		误报
																	</el-button>
																	<el-button size="small" icon="el-icon-warning"
																		@click="updateCentereventTEventcatalogueStatus('cf',false)">
																		重复
																	</el-button>
																	<el-button size="small" icon="el-icon-phone"
																		style="text-align:left"
																		@click="updateCentereventTEventcatalogueStatus('ld',false)">
																		联动
																	</el-button>
																	<el-button size="small" icon="el-icon-success" v-if="dataStatus"
																		style="text-align:left"
																		@click="updateCentereventTEventcatalogueStatus('bj',true)">
																		办结
																	</el-button>
																</div>
																<el-button size="small" icon="el-icon-chat-dot-square"
																	@click="sendEventLog()">发送
																</el-button>
															</div>
															<div class="z-info-btm-input-btn"
																v-else-if="eventStatusValue=='forest_event_status_5'&&dataStatus">
																<el-button size="small" icon="el-icon-success"
																	style="text-align:left"
																	@click="updateCentereventTEventcatalogueStatus('gd',false)">
																	填报
																</el-button>
																<el-button size="small" icon="el-icon-chat-dot-square"
																	@click="sendEventLog()">发送
																</el-button>
															</div>
															<div class="z-info-btm-input-btn" v-else>
																<el-button size="small" icon="el-icon-chat-dot-square"
																	@click="sendEventLog()">发送
																</el-button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</dv-border-box-7>
								</div>
							</div>

						</el-col>
						<!-- 左侧end -->
					</el-row>
				</div>
			</el-dialog>
		</div>
		<vBottomMenu ref="bottomMenu"></vBottomMenu>
		<eventLogUpload ref="eventLogUpload"></eventLogUpload>
		<el-dialog :title="eventConfirmTitle" :visible.sync="showEventConfirm" v-if="showEventConfirm" width="50%"
			class="top-dialog" @close="cancelEventConfirm()">
			<el-form label-width="80px">
				<el-form-item label="火灾半径" v-if="eventStatusButton=='qs'">
					<el-input type="number" v-model="sendHuoZaiBanJing" placeholder="请输入火灾半径" />
				</el-form-item>
				<el-form-item :label="deptNameitem">
					<!--          <treeselect v-model="deptId" :options="deptOptions" multiple :show-count="true"-->
					<!--                      placeholder="请选择签收部门"/>-->
					<el-select v-model="sendDeptName" clearable placeholder="请选择部门" class="m-r-1rem" @change="setValue"
						v-if="eventStatusButton=='wb'||eventStatusButton=='qs'||eventStatusButton=='cf'||eventStatusButton=='ld'">
						<el-option v-for="item in deptOptions" :key="item.deptId" :label="item.deptName"
							:value="{value:item.deptId,label:item.deptName}">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="事件类型" v-if="eventStatusButton=='qs'">
					<el-select v-model="sendEventType" placeholder="请选择事件类型！" clearable>
						<el-option v-for="item in eventTypeList" :key="item.id" :label="item.eventTypeName"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="任务来源" v-if="eventStatusButton=='ld'">
					<el-select v-model="sendTaskSource" placeholder="请选择任务来源！" clearable>
						<el-option v-for="dict in dict.type.task_source" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="联动标题" v-if="eventStatusButton=='ld'">
					<el-input v-model="sendTaskTitle" placeholder="请输入联动标题" />
				</el-form-item>
				<el-form-item label="联动内容" v-if="eventStatusButton=='ld'">
					<el-input type="textarea" v-model="sendTaskContent" :autosize="{ minRows: 7, maxRows: 7}"
						placeholder="请输入联动内容">
					</el-input>
				</el-form-item>
				<el-form-item label="联动部门" v-if="eventStatusButton=='ld'">
					<el-input placeholder="输入关键字进行过滤" v-model="filterText">
					</el-input>
					<el-tree class="tree-border" style="height: 20vh; overflow-y:scroll" :data="deptOptionsLiandong"
						show-checkbox ref="LiandongDept" node-key="id" :check-strictly="true"
						:filter-node-method="filterNode" :accordion="true" empty-text="加载中，请稍候" :props="defaultProps">
					</el-tree>
					<!--            default-expand-all-->
				</el-form-item>
				<el-form-item label="关联预案" v-if="eventStatusButton=='qs'">
					<el-select v-model="sendGuanLianYuAn" placeholder="请选择关联预案！" clearable>
						<el-option v-for="item in guanLianYuAnList" :key="item.id" :label="item.resTitle"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-button size="mini" type="primary" v-if="eventStatusButton=='qs'"
					@click="updateCentereventTEventcatalogueStatus('qs',true)">签收
				</el-button>
				<el-button size="mini" type="primary" v-if="eventStatusButton=='wb'"
					@click="updateCentereventTEventcatalogueStatus('wb',true)">误报
				</el-button>
				<el-button size="mini" type="primary" v-if="eventStatusButton=='cf'"
					@click="updateCentereventTEventcatalogueStatus('cf',true)">重复
				</el-button>
				<el-button size="mini" type="primary" v-if="eventStatusButton=='ld'"
					@click="updateCentereventTEventcatalogueStatus('ld',true)">发起联动
				</el-button>
			</el-form>
		</el-dialog>
		<el-dialog title="调整预案" :visible.sync="showGuanLianYuAnConfirm" v-if="showGuanLianYuAnConfirm" width="50%"
			class="top-dialog">
			<el-form label-width="80px">
				<el-form-item label="关联预案">
					<el-select v-model="sendGuanLianYuAn" placeholder="请选择关联预案！" clearable>
						<el-option v-for="item in guanLianYuAnList" :key="item.id" :label="item.resTitle"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-button size="mini" type="primary" @click="updateYjYuAn">确定
				</el-button>
			</el-form>
		</el-dialog>
    <el-dialog title="责任制" :visible.sync="showResponsibilityDialog" v-if="showResponsibilityDialog" width="65%" @close="closeResponsibilityDialog()">
      <el-form label-width="1500px">
        <div class="bottom">
          <!-- 左侧菜单栏 -->
          <div class="bottomLeft">
            <div class="leftItem d-l-con padding-box nowrap" v-for="(item,index) in depteventList">
              <div class="bgt-info">
                <div class="bgt-info-name" :class="{on:iconCurrentIndex==item.deptId}" @click="dutysystemSelect(item.deptId,item.deptName,item.id)">{{item.deptName}}</div>
              </div>
            </div>
          </div>
          <!-- 左侧菜单栏对应的右侧的内容 -->
          <div class="bottomRight" ref="wrapper">
            <el-button
              size="mini"
              type="danger"
              v-if="depteventId!=null&&depteventId!=''"
              @click="addLine">添加
            </el-button>
            <el-table
              :data="dutysystemTableData"
              style="width: 100%">
              <el-table-column prop="id"  label="主键" v-if="false">
                <template slot-scope="scope" hidden>
                  <el-input  v-model="scope.row.id" readonly  placeholder="主键" ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" >
                <template slot-scope="scope">
                  <el-input  v-model="scope.row.name" placeholder="姓名" ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="post" label="岗位">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.post" placeholder="岗位"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="telphone" label="手机号码">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.telphone" placeholder="手机号码"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="bookbuytime" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-save"
                    @click="handleSave(scope.$index, scope.row)">保存
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-button size="mini" type="primary" class="fr_button" @click="closeResponsibilityDialog">确定
        </el-button>
        <div style="clear: both;"></div>
      </el-form>
    </el-dialog>
		<el-dialog title="火险报告" :visible.sync="showEventConfirm_gd" v-if="showEventConfirm_gd" width="100%"
			class="top-dialog" @close="cancelEventConfirm_gd()">
			<div class="table-container">
				<form>
					<table id="table1" cellpadding="0" cellspacing="0">
						<thead style="width: 100%;padding:.5rem 0;">
							<th rowspan="1" colspan="1" class="txt_left" width="100px">填报单位：</th>
							<th rowspan="1" colspan="6" align="left"><input type="text"
									style=" width:100%;margin-left: .5rem;" v-model="table1.reportUnit" /></th>
							<th rowspan="1" colspan="2" class="txt_right">填报时间：</th>
							<th rowspan="1" colspan="6" align="left"><input type="text"
									style="width:3rem;text-align: center;" v-model="table1.reportTimeY" />年<input
									type="text" style="width:4rem;text-align: center;"
									v-model="table1.reportTimeM" />月<input type="text"
									style="width:3rem;text-align: center;" v-model="table1.reportTimeD" />日
							</th>
							<th rowspan="1" colspan="8" style="text-align: right;">吉林省人民政府森林防火指挥部办公室制</th>
						</thead>
						<tbody>

							<tr>
								<td colspan="22" rowspan="1" class="font1" style="letter-spacing:3rem;padding: .5rem 0">
									森林火灾损失</td>
								<td colspan="1" rowspan="6">
									<table class="border0">
										<tr>
											<td>备注</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td rowspan="4" colspan="1">
									<table class="border0">
										<tr>
											<td>森林火灾<br>损失总计</td>
										</tr>
									</table>
								</td>
								<td rowspan="1" colspan="12">火灾损失价值</td>
								<td rowspan="1" colspan="9">扑火费用支出</td>
							</tr>
							<tr>

								<td rowspan="3" colspan="1">
									<table class="border0">
										<tr>
											<td>合计</td>
										</tr>
									</table>
								</td>
								<td rowspan="1" colspan="4">林木资源</td>
								<td rowspan="1" colspan="6">人员伤亡</td>
								<td rowspan="3" colspan="1">
									<table class="border0">
										<tr>
											<td>其他<br>火灾<br>损失</td>
										</tr>
									</table>
								</td>
								<td rowspan="3" colspan="1">
									<table class="border0">
										<tr>
											<td>合计</td>
										</tr>
									</table>
								</td>
								<td rowspan="1" colspan="2">
									<table class="border0">
										<tr>
											<td>人工费</td>
										</tr>
									</table>
								</td>
								<td rowspan="1" colspan="3">
									<table class="border0">
										<tr>
											<td>车辆费</td>
										</tr>
									</table>
								</td>
								<td rowspan="1" colspan="2">
									<table class="border0">
										<tr>
											<td>飞行费</td>
										</tr>
									</table>
								</td>
								<td rowspan="3" colspan="1">
									<table class="border0">
										<tr>
											<td>其他<br>扑火<br>费用</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td rowspan="1" colspan="2">成林</td>
								<td rowspan="1" colspan="2">幼林</td>
								<td rowspan="1" colspan="2">轻伤</td>
								<td rowspan="1" colspan="2">重伤</td>
								<td rowspan="1" colspan="2">死亡</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>出动<br>人工</td>
										</tr>
									</table>
								</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>支出<br>费用</td>
										</tr>
									</table>
								</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>计</td>
										</tr>
									</table>
								</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>其中<br>汽车</td>
										</tr>
									</table>
								</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>支出<br>费用</td>
										</tr>
									</table>
								</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>出动<br>飞机</td>
										</tr>
									</table>
								</td>
								<td rowspan="2" colspan="1">
									<table class="border0">
										<tr>
											<td>支出<br>费用</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td rowspan="1" colspan="1">蓄积</td>
								<td rowspan="1" colspan="1">价值</td>
								<td rowspan="1" colspan="1">株数</td>
								<td rowspan="1" colspan="1">价值</td>
								<td rowspan="1" colspan="1">人数</td>
								<td rowspan="1" colspan="1">支出费用</td>
								<td rowspan="1" colspan="1">人数</td>
								<td rowspan="1" colspan="1">支出费用</td>
								<td rowspan="1" colspan="1">人数</td>
								<td rowspan="1" colspan="1">支出费用</td>
							</tr>
							<tr>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">米³</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">万株</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">人</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">人</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">人</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">工日</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">台</td>
								<td rowspan="1" colspan="1">台</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">架次</td>
								<td rowspan="1" colspan="1">万元</td>
								<td rowspan="1" colspan="1">万元</td>
							</tr>
							<tr>
								<td rowspan="1" colspan="1">1</td>
								<td rowspan="1" colspan="1">2</td>
								<td rowspan="1" colspan="1">3</td>
								<td rowspan="1" colspan="1">4</td>
								<td rowspan="1" colspan="1">5</td>
								<td rowspan="1" colspan="1">6</td>
								<td rowspan="1" colspan="1">7</td>
								<td rowspan="1" colspan="1">8</td>
								<td rowspan="1" colspan="1">9</td>
								<td rowspan="1" colspan="1">10</td>
								<td rowspan="1" colspan="1">11</td>
								<td rowspan="1" colspan="1">12</td>
								<td rowspan="1" colspan="1">13</td>
								<td rowspan="1" colspan="1">14</td>
								<td rowspan="1" colspan="1">15</td>
								<td rowspan="1" colspan="1">16</td>
								<td rowspan="1" colspan="1">17</td>
								<td rowspan="1" colspan="1">18</td>
								<td rowspan="1" colspan="1">19</td>
								<td rowspan="1" colspan="1">20</td>
								<td rowspan="1" colspan="1">21</td>
								<td rowspan="1" colspan="1">22</td>
								<td rowspan="1" colspan="1">23</td>
							</tr>
							<tr class="int_tr">
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.forestFireLossTotal" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.fireLossTotal" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.forestArea" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.forestPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.treesNumber" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.treesPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.minorInjuriesNumber" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.minorInjuriesPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.seriouslyInjuredNumber" />
								</td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.seriouslyInjuredPrice" />
								</td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.deathNumber" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.deathPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.elseFireLossPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.blazesPriceTotal" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.artificialDays" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.artificialPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.vehicleNumber" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.carNumber" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.vehiclePrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.planeNumber" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.planePrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0"
										v-model="table1.elseBlazesPrice" /></td>
								<td rowspan="1" colspan="1"><input type="text" class="border0" v-model="table1.note" />
								</td>

							</tr>
						</tbody>
					</table>
					<table class="table2" cellpadding="0" cellspacing="0" style="white-space: nowrap;">
						<tbody>
							<tr>
								<th rowspan="1" colspan="26" style="letter-spacing:6rem">火场资料</th>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;1.起火时间</td>
								<td colspan="5" rowspan="1"><input type="text" v-model="table2.fireTime" /></td>
								<td colspan="2" rowspan="1">发现时间</td>
								<td colspan="8" rowspan="1"><input type="text" v-model="table2.foundTime" /></td>
								<td colspan="2" rowspan="1">扑灭时间</td>
								<td colspan="7" rowspan="1"><input type="text" v-model="table2.blazesTime" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;2.地点及发现方式</td>
								<td colspan="2" rowspan="1" class="txt_left"><select v-model="table2.address">
										<option>吉林市</option>
										<option>延边州</option>
										<option>白山市</option>
										<option>通化市</option>
										<option>辽源市</option>
										<option>四平市</option>
										<option>长春市</option>
										<option>白城市</option>
										<option>松原市</option>
										<option>敦化航站</option>
										<option>长白山管委会</option>
									</select></td>
								<td colspan="13" rowspan="1"><input type="text" v-model="table2.firePlace" /></td>
								<td colspan="2" rowspan="1">发现方式</td>
								<td colspan="7" rowspan="1"><input type="text" v-model="table2.foundType" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;3.火场位置</td>
								<td colspan="2" rowspan="1" class="border_l0">东经：</td>
								<td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
										v-model="table2.longitudeD" /></td>
								<td colspan="1" rowspan="1" class="border_l0">度</td>
								<td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
										v-model="table2.longitudeM" /></td>
								<td colspan="1" rowspan="1" class="border_l0">分</td>
								<td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
										v-model="table2.longitudeS" /></td>
								<td colspan="2" rowspan="1" class="border_l0">秒</td>
								<td colspan="1" rowspan="1" class="border_l0">；</td>
								<td colspan="2" rowspan="1" class="border_l0">北纬：</td>
								<td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
										v-model="table2.latitudeD" /></td>
								<td colspan="1" rowspan="1" class="border_l0">度</td>
								<td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
										v-model="table2.latitudeM" /></td>
								<td colspan="1" rowspan="1" class="border_l0">分</td>
								<td colspan="1" rowspan="1" class="border_l0"><input type="text" style="width:50px;"
										v-model="table2.latitudeS" /></td>
								<td colspan="1" rowspan="1" class="border_l0">秒</td>
								<td class="border_l0"></td>
								<td class="border_l0"></td>
								<td class="border_l0"></td>
								<td class="border_l0"></td>
								<td class="border_l0"></td>
								<td></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;4.起火原因</td>
								<td colspan="3" rowspan="1" class="txt_left"><select v-model="table2.fireSource">
										<option>未查明火源</option>
										<option>烧荒烧炭</option>
										<option>炼山造林</option>
										<option>烧牧场</option>
										<option disabled>烧窑</option>
										<option>烧隔离带</option>
										<option>火车喷漏</option>
										<option>火车甩瓦</option>
										<option>机车喷火</option>
										<option>其他（生产性火源）</option>
										<option>野外吸烟</option>
										<option>取暖做饭</option>
										<option>上坟烧纸</option>
										<option>烧山驱兽</option>
										<option>小孩玩火</option>
										<option>痴呆弄火</option>
										<option>家火上山</option>
										<option>电线引起</option>
										<option>其他（非生产性用火）</option>
										<option>故意放火</option>
										<option>外省（区）烧入</option>
										<option>外国烧入</option>
										<option>雷击火</option>
										<option>其他自然火</option>
									</select></td>
								<td colspan="3" rowspan="1">火灾种类</td>
								<td colspan="4" rowspan="1" class="txt_left"><select v-model="table2.fireType">
										<option>地表火</option>
										<option>树冠火</option>
										<option>地下火</option>
									</select></td>
								<td colspan="3" rowspan="1">火灾等级</td>
								<td colspan="11" rowspan="1" class="txt_left"><select v-model="table2.fireLevel">
										<option>一般</option>
										<option>较大</option>
										<option>重大</option>
										<option>特大</option>
									</select></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;5.火场面积（公顷）</td>
								<td colspan="2" rowspan="1">总面积合计</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.areaTotal" /></td>
								<td colspan="4" rowspan="1">受害森林面积合计</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.forestLossAreaTotal" />
								</td>
								<td colspan="1" rowspan="1">其中：</td>
								<td colspan="2" rowspan="1">原森林</td>
								<td colspan="4" rowspan="1"><input type="text" v-model="table2.originalForestArea" />
								</td>
								<td colspan="2" rowspan="1">人工林</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.artificialForestArea" />
								</td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;6.扑火人力物力投入</td>
								<td colspan="2" rowspan="1">出动总人数</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.peopleTotal" /></td>
								<td colspan="2" rowspan="1">其中扑火队</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.blazesTeamNumber" /></td>
								<td colspan="1" rowspan="1">森警</td>
								<td colspan="2" rowspan="1"><input type="text" v-model="table2.policeNumber" /></td>
								<td colspan="1" rowspan="1">军队</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.armyNumber" /></td>
								<td colspan="1" rowspan="1">群众</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.crowdNumber" /></td>
								<td colspan="2" rowspan="1">风力灭火机</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.windExtinguisher" /></td>
								<td colspan="2" rowspan="1">二号工具</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.secondTool" /></td>
								<td colspan="2" rowspan="1">水枪</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.waterGun" /></td>
								<td colspan="1" rowspan="1">其他</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.elseThings" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;7.受害森林概况</td>
								<td colspan="2" rowspan="1">林木组成</td>
								<td colspan="11" rowspan="1"><input type="text" v-model="table2.forestComposition" />
								</td>
								<td colspan="2" rowspan="1">林令</td>
								<td colspan="4" rowspan="1"><input type="text" v-model="table2.forestToken" /></td>
								<td colspan="2" rowspan="1">疏密度</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.porosities" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;8.当日天气实况</td>
								<td colspan="2" rowspan="1">天气</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.weather" /></td>
								<td colspan="1" rowspan="1">气温</td>
								<td colspan="2" rowspan="1"><input type="text" v-model="table2.temperature" /></td>
								<td colspan="1" rowspan="1">C°</td>
								<td colspan="3" rowspan="1">火险等级</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.fireInsuranceLevel" />
								</td>
								<td colspan="2" rowspan="1">风力</td>
								<td colspan="2" rowspan="1" class="border_l0"><input type="text"
										v-model="table2.windLevel" /></td>
								<td colspan="2" rowspan="1" class="txt_left">级</td>
								<td colspan="2" rowspan="1">风向</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.windDirection" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;9.指挥扑火负责人</td>
								<td colspan="2" rowspan="1">单位</td>
								<td colspan="11" rowspan="1"><input type="text" v-model="table2.commandUnit" /></td>
								<td colspan="2" rowspan="1">姓名</td>
								<td colspan="4" rowspan="1"><input type="text" v-model="table2.commandName" /></td>
								<td colspan="2" rowspan="1">职务</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.commandPosition" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;10.火场调查负责人</td>
								<td colspan="2" rowspan="1">单位</td>
								<td colspan="11" rowspan="1"><input type="text" v-model="table2.surveyUnit" /></td>
								<td colspan="2" rowspan="1">姓名</td>
								<td colspan="4" rowspan="1"><input type="text" v-model="table2.surveyName" /></td>
								<td colspan="2" rowspan="1">职务</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.surveyPosition" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;11.火灾肇事人情况</td>
								<td colspan="2" rowspan="1">姓名</td>
								<td colspan="2" rowspan="1"><input type="text" v-model="table2.accidentName" /></td>
								<td colspan="2" rowspan="1">性别</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.accidentSex" /></td>
								<td colspan="3" rowspan="1">年龄</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.accidentAge" /></td>
								<td colspan="1" rowspan="1">职业</td>
								<td colspan="1" rowspan="1"><input type="text" v-model="table2.accidentPosition" /></td>
								<td colspan="2" rowspan="1">单位或住址</td>
								<td colspan="9" rowspan="1"><input type="text" v-model="table2.accidentUnit" /></td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left">&nbsp;12.火灾处理情况</td>
								<td colspan="2" rowspan="1">处理方式</td>
								<td colspan="4" rowspan="1"><select v-model="table2.dealType">
										<option>立案（刑事处理）</option>
										<option>破案（刑事处理）</option>
										<option>行政处理</option>
										<option>待查</option>
										<option>拘留</option>
										<option>处理</option>
										<option>未处理</option>
									</select></td>
								<td colspan="3" rowspan="1">已处理人数</td>
								<td colspan="4" rowspan="1"><input type="text" v-model="table2.dealNumber" /></td>
								<td colspan="4" rowspan="1">刑事处罚人数</td>
								<td colspan="7" rowspan="1"><input type="text" v-model="table2.criminalDealNumber" />
								</td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left" style="height: 60px;">
									&nbsp;13.对火灾肇事人<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;的处理情况
								</td>
								<td colspan="24" rowspan="1" class="txt_left">
									<textarea v-model="table2.accidentDealSituation"></textarea>
								</td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left" style="height: 60px;">
									&nbsp;14.对责任人员的<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;责任人追查情况
								</td>
								<td colspan="24" rowspan="1" class="txt_left">
									<textarea v-model="table2.responsibilityDealSituation"></textarea>
								</td>
							</tr>
							<tr>
								<td colspan="2" rowspan="1" class="txt_left" style="height: 60px;">
									&nbsp;15.对有关领导的<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;责任追查情况
								</td>
								<td colspan="24" rowspan="1" class="txt_left">
									<textarea v-model="table2.leadershipDealSituation"></textarea>
								</td>
							</tr>
							<tr class="tr_border">
								<td colspan="4" rowspan="1">县（市、区、局、站）填表人：</td>
								<td colspan="2" rowspan="1"><input type="text" v-model="table2.townForm" /></td>
								<td colspan="4" rowspan="1">县（市、区、局、站）审核人：</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.townAudit" /></td>
								<td colspan="4" rowspan="1">市（州、管委会）填表人：</td>
								<td colspan="2" rowspan="1"><input type="text" v-model="table2.cityForm" /></td>
								<td colspan="4" rowspan="1">市（州、管委会）审核人：</td>
								<td colspan="3" rowspan="1"><input type="text" v-model="table2.cityAudit" /></td>
							</tr>
						</tbody>
					</table>
					<div class="btm-btn-group">
						<el-button size="mini" type="primary"
							@click="updateCentereventTEventcatalogueStatus('gd',true)">归档
						</el-button>
						<el-button size="mini" type="primary" @click="regionalFlagAdd()">火灾区域
						</el-button>
					</div>
				</form>
			</div>
		</el-dialog>
		<!-- 添加区域标记 -->
		<el-dialog title="火灾区域" :visible.sync="regionalFlagOpen" width="1000px">
			<areaSupermap ref="fireAreaSupermap" v-if="regionalFlagOpen" style="width: 100%;height:74vh"
				:mapDiv="'fireAreaSuperMap'" :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
				:showAreaLatLng="showAreaLatLng"></areaSupermap>
		</el-dialog>
		<!-- 图片，视频预览 -->
		<el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" customClass="customWidthMp4">
			<TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
		</el-dialog>
    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
               @close="cancelEventLocationShow()">
      <div style="width:1020px;height:625px;position:relative;">
        <!--视频窗口展示---海康-->
        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas' //截图组件
	import supermapDialog from '@/components/supermap' //超图
	import vheader from '@/components/v-header.vue' //一体化共用头部
	import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
	import eventLogUpload from '@/views/eventLogUpload.vue' //日志上传文件
	import areaSupermap from '@/components/supermap' //区域标记地图
	import TcPlayer from '@/components/TcPlayer' //视频预览
	import {
		getEventDetail,
		sendEventLog,
		listSJfl,
		listYuAn,
		selectByeventCode,
		updateCentereventTEventcatalogueStatus,
		sendTask,
		listResourceByWz,
		updateYjYuAn,
		uploadBase64,
    centereventtdepteventList,
    dutysystemList,
    dutysystemAdd,
    dutysystemRemove
	} from '@/api/forest'
	import {
		treeselectAll as deptTreeselect
	} from '@/api/system/dept'
  import {
    getHaiKangVideoServer
  } from '@/api/haikang/haikang'

	export default {
		dicts: ['task_source'],
		watch: {
			filterText(val) {
				this.$refs.LiandongDept.filter(val)
			}
		},
		components: {
			vheader,
			vBottomMenu,
			supermapDialog,
			eventLogUpload,
			areaSupermap,
			TcPlayer
		},
		data() {
			return {
        //海康
        cameraTitle: '',
        cameraVisible: false,
        initCount: 0,
        pubKey: '',
        oWebControl: null,

				playVideo: '', //视频预览地址
				showTcPlayer: false, //视频预览弹窗
				regionalFlagOpen: false, //区域标记
				//区域标记
				regionalFlagObj: {
					array: []
				},
				filterText: '', //树搜索
				/** *****************事件流程***************************/
				deptNameitem: '签收部门',
				sendDeptId: null, //签收部门/发起部门
				sendDeptName: null, //签收部门/发起部门
				sendEventType: null, //事件类型
				sendHuoZaiBanJing: null, //火灾报告
				sendGuanLianYuAn: null, //关联预案
				sendTaskSource: null, //任务来源
				sendTaskTitle: null, //联动标题
				sendTaskContent: null, //联动内容
				sendLianDongDept: [], //联动部门
				eventTypeList: [], //事件类型列表
				guanLianYuAnList: [], //关联预案列表
				deptOptions: [], //签收部门
				deptOptionsLiandong: [], //联动部门
				eventStatusButton: null, //流程按钮标识
				eventConfirmTitle: null, //弹窗标题  ---签收 误报  重复
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				table1: {
					reportUnit: null,
					reportTimeY: null,
					reportTimeM: null,
					reportTimeD: null,
					forestFireLossTotal: null,
					fireLossTotal: null,
					forestArea: null,
					forestPrice: null,
					treesNumber: null,
					treesPrice: null,
					minorInjuriesNumber: null,
					minorInjuriesPrice: null,
					seriouslyInjuredNumber: null,
					seriouslyInjuredPrice: null,
					deathNumber: null,
					deathPrice: null,
					elseFireLossPrice: null,
					blazesPriceTotal: null,
					artificialDays: null,
					artificialPrice: null,
					vehicleNumber: null,
					carNumber: null,
					vehiclePrice: null,
					planeNumber: null,
					planePrice: null,
					elseBlazesPrice: null,
					note: null
				},
				table2: {
					fireTime: null,
					foundTime: null,
					blazesTime: null,
					address: null,
					firePlace: null,
					foundType: null,
					longitudeD: null,
					longitudeM: null,
					longitudeS: null,
					latitudeD: null,
					latitudeM: null,
					latitudeS: null,
					fireSource: null,
					fireType: null,
					fireLevel: null,
					areaTotal: null,
					forestLossAreaTotal: null,
					originalForestArea: null,
					artificialForestArea: null,
					peopleTotal: null,
					blazesTeamNumber: null,
					policeNumber: null,
					armyNumber: null,
					crowdNumber: null,
					windExtinguisher: null,
					secondTool: null,
					waterGun: null,
					elseThings: null,
					forestComposition: null,
					forestToken: null,
					porosities: null,
					weather: null,
					temperature: null,
					fireInsuranceLevel: null,
					windLevel: null,
					windDirection: null,
					commandUnit: null,
					commandName: null,
					commandPosition: null,
					surveyUnit: null,
					surveyName: null,
					surveyPosition: null,
					accidentName: null,
					accidentSex: null,
					accidentAge: null,
					accidentPosition: null,
					accidentUnit: null,
					dealType: null,
					dealNumber: null,
					criminalDealNumber: null,
					accidentDealSituation: null,
					responsibilityDealSituation: null,
					leadershipDealSituation: null,
					townForm: null,
					townAudit: null,
					cityForm: null,
					cityAudit: null
				},
				/** *****************事件流程***************************/
				showEventConfirm: false, //事件签收弹窗
				showGuanLianYuAnConfirm: false, //调整关联预案弹窗
				showEventConfirm_gd: false, //事件火险报告弹窗
				address: null, //事件上报地址
				eventStatusValue: null, //事件状态
				eventId: null, //事件ID
				eventType: null, //事件类型-大类
        dataStatus: false, //事件处理流程按钮
        deptId: null, //事件处理流程部门
				eventCode: null,
				longitude: null,
				latitude: null,
				eventLog: null,
				eventLogList: [],
				visuForestCloudYuAnBo: null,
				eventDialog: false,
        showResponsibilityDialog: false,//责任制弹窗
        depteventList: [],//责任制部门列表
        iconCurrentIndex:'',
        dutysystemDeptName:'',
        depteventId:'',
        dutysystemTableData:[],
				radius: 50, //资源搜索半径
				resourcesList: [{
						resourceName: '取水口',
						type: 'qsk',
						count: '1',
						icon: 'sj-icon-waterintake'
					},
					{
						resourceName: '水鹤',
						type: 'sh',
						icon: 'sj-icon-watercrane'
					},
					{
						resourceName: '消防栓',
						type: 'xfs',
						count: '1',
						icon: 'sj-icon-firehydrant'
					},
					{
						resourceName: '起降点',
						type: 'qjd',
						count: '1',
						icon: 'sj-icon-landing'
					},
					{
						resourceName: '检查站',
						type: 'jcz',
						count: '1',
						icon: 'sj-icon-checkpoint'
					},
					{
						resourceName: '防火队',
						type: 'fhd',
						count: '1',
						icon: 'sj-icon-fireteam'
					},
					{
						resourceName: '重点区域',
						type: 'zdqy',
						count: '1',
						icon: 'sj-icon-tcqh'
					},
					{
						resourceName: '摄像头',
						type: 'sxt',
						count: '1',
						icon: 'camera'
					}
				],
				resourcesListCheck: [],
				//文本域
				feedback: ''

			}
		},
		props: {
			calendarDay: null //首页日历选择
		},
		methods: {
      /************************************责任制-开始****************************************/
      addLine:function(){//添加负责人行数
        var newValue = {
          id:"",//主键
          dept:"",//部门名称
          depteventId:"",//事件部门关联责任人
          name:"",//姓名
          post:"",//岗位
          telphone:"",//手机号
        };
        //添加新的行数
        this.dutysystemTableData.push(newValue);
      },
      handleDelete:function(index,row){//删除负责人行数
        if(row.id!=null&&row.id!=''){
          let param = { ids: row.id }
          dutysystemRemove(param).then(res => {
            this.$message.success(`删除成功!`)
            this.dutysystemSelect(this.iconCurrentIndex,this.dutysystemDeptName,this.depteventId)
          })
        }else{
          this.dutysystemTableData.splice(index, 1)
        }
      },
      handleSave:function(index,rowData){//保存负责人行数
        rowData.dept=this.dutysystemDeptName
        rowData.depteventId=this.depteventId
        dutysystemAdd(rowData).then(res => {
          this.$message.success(`保存成功!`)
          this.dutysystemSelect(this.iconCurrentIndex,this.dutysystemDeptName,this.depteventId)
        })
      },
      dutysystemSelect:function(deptId,dutysystemDeptName,depteventId){//通过部门查询负责人信息
        this.dutysystemDeptName=dutysystemDeptName
        this.depteventId=depteventId
        this.iconCurrentIndex=deptId
        let param = { depteventId: depteventId }
        dutysystemList(param).then(res => {
          if(res.data!=null&&res.data.length>0){
            this.dutysystemTableData=res.data
          }else{
            this.dutysystemTableData=[{
              id:"",//主键
              dept:this.dutysystemDeptName,//部门名称
              depteventId:this.depteventId,//事件部门关联责任人
              name:"",//姓名
              post:"",//岗位
              telphone:"",//手机号
            }]
          }
        })

      },
      showResponsibility () {//弹出责任制弹窗
        let param={eventCode:this.eventCode}
        centereventtdepteventList(param).then(res => {
          this.depteventList=res.data
          this.showResponsibilityDialog = true
        })
      },
      closeResponsibilityDialog () {//责任制关闭
        this.dutysystemTableData = []
        this.dutysystemDeptName = ''
        this.depteventId = ''
        this.iconCurrentIndex = ''
        this.showResponsibilityDialog = false
      },
      /************************************责任制-结束****************************************/
			showheatPlotting() {
				if (!this.$refs.supermapDialog.isheatPlotting) {
					this.$refs.supermapDialog.showheatPlotting(this.latitude, this.longitude) //火灾蔓延
				} else {
					this.$refs.supermapDialog.isheatPlotting = false
				}
			},
			showUpdateYjYuAn() {
				listYuAn().then(res => {
					//关联预案列表
					if (res.code == 200) {
						this.guanLianYuAnList = res.data
						this.showGuanLianYuAnConfirm = true
					}
				})
			},
			updateYjYuAn() {
				let param = {
					eventCode: this.eventCode,
					reserve: this.sendGuanLianYuAn
				}
				updateYjYuAn(param).then(res => {
					//事件调整关联预案
					if (res.code == 200) {
						this.$message.success(`预案调整成功!`)
						this.refreshEventDialog(this.eventCode)
						this.sendGuanLianYuAn = null
						this.showGuanLianYuAnConfirm = false
					}
				})
			},
			listResourceByWz(type) {
				if (this.resourcesListCheck.indexOf(type) > -1) {
					this.resourcesListCheck.splice(this.resourcesListCheck.indexOf(type), 1)
					setTimeout(() => {
						this.$refs.supermapDialog.clearMByType(type)
					}, 1000)
				} else {
					this.resourcesListCheck.push(type)
					//搜索物资
					let param = {
						longitude: this.longitude,
						latitude: this.latitude,
						type: type,
						radius: this.radius
					}
					listResourceByWz(param).then(res => {
						if (res.data != null && res.data.length > 0) {
							var markersList = []
							for (let i = 0; i < res.data.length; i++) {
								let markersMap = {
									lng: 124.59,
									lat: 43.02,
									icon: 'marker',
									bindPopupHtml: '',
									click: '',
									parameter: '',
									keepBindPopup: false,
									isAggregation: false
								}
								if (res.data.length > 50) {
									markersMap.isAggregation = true
								}
								if (type == 'qsk') {
									markersMap.icon = 'sj-icon-waterintake'
								} else if (type == 'sh') {
									markersMap.icon = 'sj-icon-watercrane'
								} else if (type == 'xfs') {
									markersMap.icon = 'sj-icon-firehydrant'
								} else if (type == 'qjd') {
									markersMap.icon = 'sj-icon-landing'
								} else if (type == 'jcz') {
									markersMap.icon = 'sj-icon-checkpoint'
								} else if (type == 'fhd') {
									markersMap.icon = 'sj-icon-fireteam'
								} else if (type == 'zdqy') {
									markersMap.icon = 'sj-icon-tcqh'
								} else if (type == 'sxt') {
									markersMap.icon = 'sj-icon-jkzx'
								}
								markersMap.lng = res.data[i].longitude
								markersMap.lat = res.data[i].latitude
								markersMap.bindPopupHtml = '<div class="map-tip">' +
									'<span>' +
									'                  <div class="d-l-con">' +
									'                  <div class="d-l-l-text">' +
									'                  <h4>资源名称：' + res.data[i].name + '</h4>' +
									'                </div>' +
									'                </div>' +
									'                </span>' +
									'</div>'
								markersList.push(markersMap)
							}
							setTimeout(() => {
								this.$refs.supermapDialog.setMarkersByType(markersList, type)
							}, 1000)
						}
					})
				}
			},
			// 返回图片列表
			assetTypeAnImage(filePath) {
				let imageList = []
				if (filePath != null && filePath.length > 0) {
					for (let i = 0; i < filePath.length; i++) {
						if (filePath[i].fileType=='image') {
							imageList.push(filePath[i].fileUrl)
						}
					}
				}
				return imageList
			},
			// 获取文件名称
			getFileName(name) {
				if (name.lastIndexOf('/') > -1) {
					return name.slice(name.lastIndexOf('/') + 1)
				} else {
					return ''
				}
			},
			clickFile(fileUrl, fileName,fileType) {
				if (fileType=='image') {
					return
				} else if (fileType=='video') {
					this.showTcPlayer = true
					setTimeout(() => {
						this.playVideo = fileUrl
					}, 500)
				} else {
					let a = document.createElement('a')
					a.download = fileName
					a.href = fileUrl
					a.target = "_blank"
					a.click()
				}
			},
			setValue(event) {
				//签收选择部门
				this.sendDeptName = event.label
				this.sendDeptId = event.value
			},
			cancelEventConfirm() {
				//关闭事件签收弹窗
				this.sendDeptId = null
				this.sendDeptName = null
				this.sendEventType = null
				this.sendHuoZaiBanJing = null
				this.sendGuanLianYuAn = null
				this.longitude = null
				this.latitude = null
				this.sendTaskTitle = null
				this.sendTaskSource = null
				this.sendTaskContent = null
				this.sendLianDongDept = []
				this.eventTypeList = [] //事件类型列表
				this.guanLianYuAnList = [] //关联预案列表
				this.deptOptions = [] //签收部门
				this.deptOptionsLiandong = [] //联动部门
				this.eventStatusButton = null //流程按钮标识
				this.eventConfirmTitle = null //流程按钮标识
				this.resourcesListCheck = []
			},
			cancelEventConfirm_send() {
				//清空表单数据
				this.sendDeptId = null
				this.sendDeptName = null
				this.sendEventType = null
				this.sendHuoZaiBanJing = null
				this.sendGuanLianYuAn = null
				this.sendTaskTitle = null
				this.sendTaskSource = null
				this.sendTaskContent = null
				this.sendLianDongDept = []
				this.eventTypeList = [] //事件类型列表
				this.guanLianYuAnList = [] //关联预案列表
				this.deptOptions = [] //签收部门
				this.deptOptionsLiandong = [] //联动部门
			},
			cancelEventConfirm_gd() {
				//关闭事件火险报告窗口
				this.resetTable1()
				this.resetTable2()
			},
			cancelEventConfirm_mp4() {
				//关闭视频窗口
				this.playVideo = ''
				this.$refs.TcPlayer.destroyed()
			},
			resetTable1() {
				this.table1 = {
					reportUnit: null,
					reportTimeY: null,
					reportTimeM: null,
					reportTimeD: null,
					forestFireLossTotal: null,
					fireLossTotal: null,
					forestArea: null,
					forestPrice: null,
					treesNumber: null,
					treesPrice: null,
					minorInjuriesNumber: null,
					minorInjuriesPrice: null,
					seriouslyInjuredNumber: null,
					seriouslyInjuredPrice: null,
					deathNumber: null,
					deathPrice: null,
					elseFireLossPrice: null,
					blazesPriceTotal: null,
					artificialDays: null,
					artificialPrice: null,
					vehicleNumber: null,
					carNumber: null,
					vehiclePrice: null,
					planeNumber: null,
					planePrice: null,
					elseBlazesPrice: null,
					note: null
				}
			},
			resetTable2() {
				this.table2 = {
					fireTime: null,
					foundTime: null,
					blazesTime: null,
					address: null,
					firePlace: null,
					foundType: null,
					longitudeD: null,
					longitudeM: null,
					longitudeS: null,
					latitudeD: null,
					latitudeM: null,
					latitudeS: null,
					fireSource: null,
					fireType: null,
					fireLevel: null,
					areaTotal: null,
					forestLossAreaTotal: null,
					originalForestArea: null,
					artificialForestArea: null,
					peopleTotal: null,
					blazesTeamNumber: null,
					policeNumber: null,
					armyNumber: null,
					crowdNumber: null,
					windExtinguisher: null,
					secondTool: null,
					waterGun: null,
					elseThings: null,
					forestComposition: null,
					forestToken: null,
					porosities: null,
					weather: null,
					temperature: null,
					fireInsuranceLevel: null,
					windLevel: null,
					windDirection: null,
					commandUnit: null,
					commandName: null,
					commandPosition: null,
					surveyUnit: null,
					surveyName: null,
					surveyPosition: null,
					accidentName: null,
					accidentSex: null,
					accidentAge: null,
					accidentPosition: null,
					accidentUnit: null,
					dealType: null,
					dealNumber: null,
					criminalDealNumber: null,
					accidentDealSituation: null,
					responsibilityDealSituation: null,
					leadershipDealSituation: null,
					townForm: null,
					townAudit: null,
					cityForm: null,
					cityAudit: null
				}
			},
			/**
			 * eventStatusValue 事件状态
			 * isSend 是否办理
			 * */
			async updateCentereventTEventcatalogueStatus(eventStatus, isSend) {
				this.eventStatusButton = eventStatus

				if (!isSend) { //事件弹窗
					if (eventStatus == 'qs') { //签收
						this.eventConfirmTitle = '事件签收'
						let param = {
							parentId: this.eventType
						}
						await listSJfl(param).then(res => {
							//事件类型
							if (res.code == 200) {
								this.eventTypeList = res.data
							}
						})
						await listYuAn().then(res => {
							//关联预案
							if (res.code == 200) {
								this.guanLianYuAnList = res.data
							}
						})
						await selectByeventCode(this.eventCode).then(res => {
							//签收部门
							if (res.code == 200) {
								this.deptOptions = res.data
								this.deptNameitem = '签收部门'
							}
						})
						this.showEventConfirm = true
					} else if (eventStatus == 'wb') { //误报
						this.eventConfirmTitle = '事件误报'
						await selectByeventCode(this.eventCode).then(res => {
							//签收部门
							if (res.code == 200) {
								this.deptOptions = res.data
								this.deptNameitem = '签收部门'
							}
						})
						this.showEventConfirm = true
					} else if (eventStatus == 'cf') { //重复
						this.eventConfirmTitle = '事件重复'
						await selectByeventCode(this.eventCode).then(res => {
							//签收部门
							if (res.code == 200) {
								this.deptOptions = res.data
								this.deptNameitem = '签收部门'
							}
						})
						this.showEventConfirm = true
					} else if (eventStatus == 'ld') { //联动
						await selectByeventCode(this.eventCode).then(res => {
							//签收部门
							if (res.code == 200) {
								this.deptOptions = res.data
								this.deptNameitem = '发起部门'
							}
						})
						this.eventConfirmTitle = '事件联动'
						/** 查询部门树结构 */
						await deptTreeselect().then(response => {
							this.deptOptionsLiandong = response.data
						})
						this.showEventConfirm = true
					} else if (eventStatus == 'gd') { //归档填报
						this.showEventConfirm_gd = true
					}
				} else { //事件提交后台
					if (eventStatus == 'ld') {
						//事件处理流程--联动
						let array = this.$refs.LiandongDept.getCheckedNodes()
						if (array != null && array.length > 0) {
							for (let i = 0; i < array.length; i++) {
								this.sendLianDongDept.push({
									'taskDeptId': array[i].id,
									'taskDeptName': array[i].label
								})
							}
						}
						if (this.sendTaskSource == '' || this.sendTaskSource == null) {
							this.$message.error(`请选择任务来源!`)
							return
						}
						if (this.sendTaskContent == '' || this.sendTaskContent == null) {
							this.$message.error(`请输入任务内容!`)
							return
						}
						if (this.sendTaskTitle == '' || this.sendTaskTitle == null) {
							this.$message.error(`请输入任务标题!`)
							return
						}
						if (this.sendLianDongDept == '' || this.sendLianDongDept == null) {
							this.$message.error(`请选择任务联动部门!`)
							return
						}
						if (this.sendDeptId == '' || this.sendDeptId == null || this.sendDeptName == '' || this
							.sendDeptName == null) {
							this.$message.error(`请选择任务发起部门!`)
							return
						}
						let param = {
							sendDeptId: this.sendDeptId,
							sendDept: this.sendDeptName,
							eventCode: this.eventCode,
							longitude: this.longitude,
							latitude: this.latitude,
							taskTitle: this.sendTaskTitle,
							taskSource: this.sendTaskSource,
							taskContent: this.sendTaskContent,
							taskDept: this.sendLianDongDept
						}
						sendTask(param).then(res => {
							if (res.code == 200) {
								this.$message.success(`联动发起成功!`)
								this.refreshEventDialog(this.eventCode)
								this.cancelEventConfirm_send()
								this.showEventConfirm = false
							}
						})

					} else if (eventStatus == 'gd') {
						//事件处理流程--归档
						let param = {
              deptId: this.deptId,
							eventCode: this.eventCode,
							eventStatus: eventStatus,
							id: this.eventId,
							czlx: '',
							forestFireLoss: {
								eventId: this.eventCode,
								table1: this.table1
							},
							fireInformation: {
								eventId: this.eventCode,
								table2: this.table2
							},
							array: this.regionalFlagObj.array
						}
						updateCentereventTEventcatalogueStatus(param).then(res => {
							if (res.code == 200) {
								this.$message.success(`处理成功!`)
								this.refreshEvent(this.eventCode)
								this.cancelEventConfirm_send()
								this.showEventConfirm_gd = false
								this.$emit('getEventList', this.calendarDay)
								this.$emit('getTodayEvents', this.calendarDay)
							}
						})
					} else {
						if (eventStatus == 'qs' || eventStatus == 'wb' || eventStatus == 'cf') {
							if (this.sendDeptId == '' || this.sendDeptId == null || this.sendDeptName == '' || this
								.sendDeptName == null) {
								this.$message.error(`请选择部门!`)
								return
							}
						}else{
              this.sendDeptId = this.deptId
            }
						//事件处理流程
						let param = {
							eventCode: this.eventCode,
							deptId: this.sendDeptId,
							deptName: this.sendDeptName,
							eventStatus: eventStatus,
							eventType: this.sendEventType,
							id: this.eventId,
							czlx: '',
							fireRadius: this.sendHuoZaiBanJing,
							reserve: this.sendGuanLianYuAn
						}
						updateCentereventTEventcatalogueStatus(param).then(res => {
							if (res.code == 200) {
								this.$message.success(`处理成功!`)
								this.refreshEvent(this.eventCode)
								this.cancelEventConfirm_send()
								this.showEventConfirm = false
								this.$emit('getEventList', this.calendarDay)
								this.$emit('getTodayEvents', this.calendarDay)
							}
						})
					}
				}
			},
			filterNode(value, data) {
				//树搜索
				if (!value) return true
				return data.label.indexOf(value) !== -1
			},
			sendEventLog() {
				//日志发送
				let param = {
					eventCode: this.eventCode,
					conext: this.eventLog
				}
				sendEventLog(param).then(res => {
					if (res.code == 200) {
						this.$message.success(`发送成功!`)
						this.eventLog = null
						this.refreshEventDialog(this.eventCode)
					}
				})
			},
			showEventLogUpload() {
				this.$refs.eventLogUpload.eventLogUpload(this.eventCode)
			},
			cancelEventShow() {
        this.dataStatus=false
        this.deptId=null
				console.log('关闭事件弹窗')
				this.eventLogList = []
			},
			showEventDialog(eventCode) {
				this.eventCode = eventCode
				let that = this
				//获取事件详情
				getEventDetail({
					eventCode: eventCode
				}).then(res => {
					this.eventDialog = true
					this.eventLogList = res.data.eventlog //日志列表
					this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
						this.address = res.data.catalogue.address
						this.eventStatusValue = res.data.catalogue.eventStatusValue
						this.eventType = res.data.catalogue.eventType
						this.dataStatus = res.data.catalogue.dataStatus
						this.deptId = res.data.catalogue.deptId
						this.eventId = res.data.catalogue.id
						this.longitude = res.data.catalogue.longitude
						this.latitude = res.data.catalogue.latitude
						let markersMap = {
							lng: 124.59,
							lat: 43.02,
							icon: 'marker',
							bindPopupHtml: '',
							click: '',
							parameter: '',
							keepBindPopup: false,
							isAggregation: false,
							radius: 0
						}
						if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data
							.catalogue.urgeCount == 0) {
							markersMap.icon = 'sj-icon-map-xinshangbao'
						}
						if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data
							.catalogue.urgeCount > 0) {
							markersMap.icon = 'sj-icon-map-cuiban'
						} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
							markersMap.icon = 'sj-icon-map-qianshou'
						} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
							markersMap.icon = 'sj-icon-map-banjie'
						} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
							markersMap.icon = 'sj-icon-map-guidang'
						}
						markersMap.lng = res.data.catalogue.longitude
						markersMap.lat = res.data.catalogue.latitude
						if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data
							.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res
							.data.eventdetail[0].fireRadius > 0) {
							markersMap.radius = res.data.eventdetail[0].fireRadius
						}
						setTimeout(() => {
							that.$refs.supermapDialog.dynamicPlotting() //弹出动态绘制窗口，防止截图位置改变
							that.$refs.supermapDialog.clearM(false)
							that.$refs.supermapDialog.setMarkersRadius([markersMap])
							that.$refs.supermapDialog.dropLocation(res.data.catalogue.latitude, res.data
								.catalogue.longitude)
						}, 2000)
					if (res.data.centermonitorTCamera != null) {
						let markersMap = {
							lng: 124.59,
							lat: 43.02,
							icon: 'camera',
							bindPopupHtml: '',
              click: 'preview',
              parameter: res.data.centermonitorTCamera.cameraCode,
							keepBindPopup: false,
							isAggregation: false,
							radius: 0
						}
						markersMap.bindPopupHtml = '<div class="map-tip">' +
							'<span>' +
							'                  <div class="d-l-con">' +
							'                  <div class="d-l-l-text">' +
							'                  <h4>摄像头名称：' + res.data.centermonitorTCamera.cameraName + '</h4>' +
							'                </div>' +
							'                </div>' +
							'                </span>' +
							'<span>' +
							'</div>'
						markersMap.lng = res.data.centermonitorTCamera.longitude
						markersMap.lat = res.data.centermonitorTCamera.latitude
						setTimeout(() => {
							that.$refs.supermapDialog.setMarkers([markersMap])
						}, 2000)
					}
				})
			},
			refreshEvent(eventCode) {
				this.eventCode = eventCode
				let that = this
				//刷新--事件详情
				getEventDetail({
					eventCode: eventCode
				}).then(res => {
					this.eventDialog = true
					this.eventLogList = res.data.eventlog
					this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
						this.address = res.data.catalogue.address
						this.eventStatusValue = res.data.catalogue.eventStatusValue
						this.eventType = res.data.catalogue.eventType
						this.dataStatus = res.data.catalogue.dataStatus
						this.deptId = res.data.catalogue.deptId
						this.eventId = res.data.catalogue.id
						this.latitude = res.data.catalogue.latitude
						this.longitude = res.data.catalogue.longitude
						let markersMap = {
							lng: 124.59,
							lat: 43.02,
							icon: 'marker',
							bindPopupHtml: '',
							click: '',
							parameter: '',
							keepBindPopup: false,
							isAggregation: false,
							radius: 0
						}
						if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data
							.catalogue.urgeCount == 0) {
							markersMap.icon = 'sj-icon-map-xinshangbao'
						}
						if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data
							.catalogue.urgeCount > 0) {
							markersMap.icon = 'sj-icon-map-cuiban'
						} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
							markersMap.icon = 'sj-icon-map-qianshou'
						} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
							markersMap.icon = 'sj-icon-map-banjie'
						} else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
							markersMap.icon = 'sj-icon-map-guidang'
						}
						markersMap.lng = res.data.catalogue.longitude
						markersMap.lat = res.data.catalogue.latitude
						if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data
							.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res
							.data.eventdetail[0].fireRadius > 0) {
							markersMap.radius = res.data.eventdetail[0].fireRadius
						}
						setTimeout(() => {
							that.$refs.supermapDialog.clearM(false)
							if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data
								.eventdetail[0].fireRadius != null && res.data.eventdetail[0].fireRadius !=
								'' && res.data.eventdetail[0].fireRadius > 0) {
								that.$refs.supermapDialog.setMarkersRadius([markersMap])
							} else {
								that.$refs.supermapDialog.setMarkers([markersMap])
							}
							that.$refs.supermapDialog.dropLocation(res.data.catalogue.latitude, res.data
								.catalogue.longitude)
						}, 2000)
          if (res.data.centermonitorTCamera != null) {
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: 'camera',
              bindPopupHtml: '',
              click: 'preview',
              parameter: res.data.centermonitorTCamera.cameraCode,
              keepBindPopup: false,
              isAggregation: false,
              radius: 0
            }
            markersMap.bindPopupHtml = '<div class="map-tip">' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>摄像头名称：' + res.data.centermonitorTCamera.cameraName + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '</div>'
            markersMap.lng = res.data.centermonitorTCamera.longitude
            markersMap.lat = res.data.centermonitorTCamera.latitude
            setTimeout(() => {
              that.$refs.supermapDialog.setMarkers([markersMap])
            }, 2000)
          }
				})
			},
			refreshEventDialog(eventCode) {
				//刷新--事件日志
				getEventDetail({
					eventCode: eventCode
				}).then(res => {
					this.eventLogList = res.data.eventlog
					this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
				})
			},
			// 页面元素转图片
			toImage() {
				// 手动创建一个 canvas 标签
				const canvas = document.createElement('canvas')
				// 获取父标签，意思是这个标签内的 DOM 元素生成图片
				// imageTofile是给截图范围内的父级元素自定义的ref名称
				// let canvasBox = this.$refs.imageTofile
				let canvasBox = document.getElementById('forestWarmSuperMap')
				let toolbar = document.getElementById('toolbar')
				canvasBox.removeChild(toolbar)
				// 获取父级的宽高
				const width = parseInt(window.getComputedStyle(canvasBox).width)
				const height = parseInt(window.getComputedStyle(canvasBox).height)

				// 宽高 * 2 并放大 2 倍 是为了防止图片模糊
				canvas.width = width * 2
				canvas.height = height * 2
				canvas.style.width = width + 'px'
				canvas.style.height = height + 'px'
				const context = canvas.getContext('2d')
				context.scale(2, 2)
				const options = {
					backgroundColor: null,
					canvas: canvas,
					useCORS: true
				}
				html2canvas(canvasBox, options).then((canvas) => {
					// toDataURL 图片格式转成 base64
					let dataBase64 = canvas.toDataURL('image/png')
					console.log(dataBase64)
					this.uploadBase64(dataBase64)
				})
				canvasBox.appendChild(toolbar)
			},
			uploadBase64(dataBase64) {
				//事件详情截图直接上传日志
				uploadBase64({
					eventCode: this.eventCode,
					base64: dataBase64
				}).then(res => {
					if (res.code == 200) {
						this.$message.success(`截图上传成功!`)
						this.refreshEventDialog(this.eventCode)
					}
				})
			},
			regionalFlagAdd: function() { //火灾区域
				this.regionalFlagObj.array = []
				this.regionalFlagOpen = true
			},
			showAreaLatLng: function(latlng) { //获取火灾区域经纬度
				console.log(latlng)
				this.regionalFlagObj.array = latlng
				this.$modal.msgSuccess('获取坐标成功！')
			},
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function() {
        this.$modal.msg('登录中....')
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function() {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function() {
        this.$modal.msgWarning('请重新安装客户端')
      },
      cancelEventLocationShow() {
        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd()   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(function() {  // 断开与插件服务连接成功
            },
            function() {  // 断开与插件服务连接失败
            })
        }
      },
      /** 预览按钮操作 */
      preview(cameraCode) {
        let that = this
        // getDahuaVideoServer().then(newResponse => {
        //   console.log(newResponse)
        //   this.ws.detectConnectQt().then(res => {
        //     if (res) { // 连接客户端成功
        //       this.alertLogin()
        //       this.ws.login({
        //         loginIp: newResponse.loginIp,
        //         loginPort: newResponse.loginPort,
        //         userName: newResponse.userName,
        //         userPwd: newResponse.userPwd,
        //         token: '',
        //         https: 1
        //       })
        //       this.ws.on('loginState', (res) => {
        //         this.isLogin = res
        //         console.log('---res-----', res)
        //         if (res) {
        //           this.alertLoginSuccess()
        //           this.activePanel = 'key2'
        //           this.realTimeVideoDialog(channelCode)
        //         } else {
        //           this.alertLoginFailed()
        //         }
        //       })
        //     } else { // 连接客户端失败
        //       this.alertReinstall()
        //     }
        //   })
        // })
        that.cameraVisible = true
        getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
          that.cameraTitle = '摄像头-'+newResponse.data.cameraName
          that.initPlugin(newResponse.data.appkey,newResponse.data.loginIp,newResponse.data.secret,newResponse.data.loginPort)
          setTimeout(function() {
            that.playhk(newResponse.data.channelCode)
          }, 5000)
        })

      },
      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......')
          return false
        }
        this.ws.openVideo(cameraParams)
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */


      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // 创建播放实例
      initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
        let that=this
        that.oWebControl = new WebControl({
          szPluginContainer: 'playWnd',                       // 指定容器id
          iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
          iServicePortEnd: 15909,
          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11',   // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function() {                     // 创建WebControl实例成功
            that.oWebControl.JS_StartService('window', {         // WebControl实例创建成功后需要启动服务
              dllPath: './VideoPluginConnect.dll'         // 值"./VideoPluginConnect.dll"写死
            }).then(function() {                           // 启动插件服务成功
              that.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                cbIntegrationCallBack: cbIntegrationCallBack
              })

              that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
                that.init(newappkey,newloginIp,newsecret,newloginPort)  // 创建播放实例成功后初始化
              })
            }, function() { // 启动插件服务失败
            })
          },
          cbConnectError: function() { // 创建WebControl实例失败
            that.oWebControl = null
            $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
            initCount++
            if (initCount < 3) {
              setTimeout(function() {
                that.initPlugin(newappkey,newloginIp,newsecret,newloginPort)
              }, 3000)
            } else {
              $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            }
          },
          cbConnectClose: function(bNormalClose) {
            // 异常断开：bNormalClose = false
            // JS_Disconnect正常断开：bNormalClose = true
            console.log('cbConnectClose')
            that.oWebControl = null
          }
        })
      },
      //播放海康摄像头
      playhk(channelCode) {
        var cameraIndexCode = channelCode     //获取输入的监控点编号值，必填
        var streamMode = 0                                     //主子码流标识：0-主码流，1-子码流
        var transMode = 1                                      //传输协议：0-UDP，1-TCP
        var gpuMode = 0                                        //是否启用GPU硬解，0-不启用，1-启用
        var wndId = -1                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')

        this.oWebControl.JS_RequestInterface({
          funcName: 'startPreview',
          argument: JSON.stringify({
            cameraIndexCode: cameraIndexCode,                //监控点编号
            streamMode: streamMode,                         //主子码流标识
            transMode: transMode,                           //传输协议
            gpuMode: gpuMode,                               //是否开启GPU硬解
            wndId: wndId                                     //可指定播放窗口
          })
        })
      },
      //初始化
      init(newappkey,newloginIp,newsecret,newloginPort) {
        let that = this
        that.getPubKey(function() {
          ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
          var appkey = newappkey                           //综合安防管理平台提供的appkey，必填
          var secret = that.setEncrypt(newsecret)   //综合安防管理平台提供的secret，必填
          var ip = newloginIp                           //综合安防管理平台IP地址，必填
          var playMode = 0                                  //初始播放模式：0-预览，1-回放
          var port = Number(newloginPort)                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
          var snapDir = 'D:\\SnapDir'                       //抓图存储路径
          var videoDir = 'D:\\VideoDir'                     //紧急录像或录像剪辑存储路径
          var layout = '1x1'                                //playMode指定模式的布局
          var enableHTTPS = 1                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
          var encryptedFields = 'secret'					   //加密字段，默认加密领域为secret
          var showToolbar = 1                               //是否显示工具栏，0-不显示，非0-显示
          var showSmart = 1                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
          var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769'  //自定义工具条按钮
          ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

          that.oWebControl.JS_RequestInterface({
            funcName: 'init',
            argument: JSON.stringify({
              appkey: appkey,                            //API网关提供的appkey
              secret: secret,                            //API网关提供的secret
              ip: ip,                                    //API网关IP地址
              playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
              port: port,                                //端口
              snapDir: snapDir,                          //抓图存储路径
              videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
              layout: layout,                            //布局
              enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
              encryptedFields: encryptedFields,          //加密字段
              showToolbar: showToolbar,                  //是否显示工具栏
              showSmart: showSmart,                      //是否显示智能信息
              buttonIDs: buttonIDs                       //自定义工具条按钮
            })
          }).then(function(oData) {
            that.oWebControl.JS_Resize(1020, 600)  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          })
        })
      },
      //获取公钥
      getPubKey(callback) {
        let that = this
        that.oWebControl.JS_RequestInterface({
          funcName: 'getRSAPubKey',
          argument: JSON.stringify({
            keyLength: 1024
          })
        }).then(function(oData) {
          console.log(oData)
          if (oData.responseMsg.data) {
            that.pubKey = oData.responseMsg.data
            callback()
          }
        })
      },
//RSA加密
      setEncrypt(value) {
        var encrypt = new JSEncrypt()
        encrypt.setPublicKey(this.pubKey)
        return encrypt.encrypt(value)
      },
      /** ----------------------------------海康摄像头预览结束------------------------------------- */
		}
	}
  // 推送消息
  function cbIntegrationCallBack(oData) {
    console.log(JSON.stringify(oData.responseMsg))
  }
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/base.scss';

	//弹层样式
	//.customWidthMp4 {
	//  width: 70px !important;
	//  height: 70px !important;
	//}

	.tree-border {
		border: 1px $barBorder;

	}

	button {
		padding: .5rem;
	}

	/** 火灾报告**/
	//@font-face {
	//  font-family: 'fontnameRegular';
	//  src: url('../../../../assets/styles/FZYTJW_0.TTF');
	//}

	body,
	html,
	* {
		padding: 0px;
		margin: 0px;
		font-family: "fontnameRegular";
	}

	.table-container {
		width: 100%;
	}

	.txt_right {
		text-align: right !important;
	}

	.txt_left {
		text-align: left !important;
	}

	table {
		border-spacing: 0;
		border-collapse: collapse;
		width: 99%;
		margin: 0 auto;
		color: $inBlue;
	}

	table input {
		font-size: 1rem;
		border: 0px;
		outline: 0px;
		font-family: "微软雅黑";
		background: none;
		color: $inBlue;

	}

	table th input:hover {
		background: $eventBG;
	}


	table thead th {
		font-size: 1rem;
		font-family: "宋体";
		height: 2rem;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		outline: 0px;
	}

	table tr td {
		font-size: 1rem;
		font-family: "fontnameRegular";
		height: 2rem;
		border: 1px $searchBorder;
		text-align: center;

	}

	.font1 {
		font-size: 1.7rem;
		font-weight: bolder;
	}

	.border0 {
		width: 100% !important;
	}

	.border0 tr td {
		border: 0px !important;
	}

	table tr td input {
		width: 100%;
		/*    display: inline-block;*/
		outline: 0px;
		text-align: left;
		height: 94%;
		color: $inBlue;
		background: none;
		float: left;
		padding: 0 .5rem;
	}

	table tr td input:hover {
		background: $eventBG;
	}


	.int_tr td input {
		text-align: center !important;
	}

	.table2 tr th {
		font-size: 1.7rem;
		padding: .5rem 0;
		font-family: 'fontnameRegular';
	}

	.table2 tr td {
		font-size: 1rem;
	}

	.table2 tr td select {
		border: 0px !important;
		outline: 0px;
		width: 100%;
		font-family: "微软雅黑";
		font-size: 1rem;
		padding-left: 1%;
		color: $inBlue;
		background: none;
	}

	.table2 tr td select:hover {
		background: $eventBG;
	}

	.table2 tr td select option {
		font-size: 1rem;
		font-family: "微软雅黑";
	}

	.border_l0 {
		// border-right: 1px solid #ececec !important;
	}

	.table2 tr td textarea {
		border: 0px !important;
		outline: 0px;
		width: 98%;
		padding: .5rem;
		font-size: 1rem;
		resize: none;
		background: none;
		color: $inBlue;

	}

	.table2 tr td textarea:hover {
		background: $eventBG;
	}

	.tr_border td {
		border-right: 0px !important;
		border-left: 0px !important;
		border-bottom: 0px !important;
		font-size: 15px;
	}

	.btm-btn-group {
		padding: 1rem 0;
		width: 100%;
		display: flex;

		button {
			padding: .5rem 2rem;
		}
	}

  .bottom {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;

    .bottomLeft {
      width: 288px;
      height: 500px;
      overflow-y: auto;

      .leftItem {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
      }
    }

    .bottomRight {
      width: calc(100% - 288px);
      height: 500px;
      box-sizing: border-box;
      padding: 36px 36px 0 36px;
      overflow-y: auto;

      .bottomRightContent {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 36px;

        .bottomRightContentHead {
          height: 25px;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: 600;
          font-size: 24px;
          line-height: 25px;
          text-transform: capitalize;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 32px;
        }

        .bottomRightContentBody {
          .el-col {
            position: relative;
            margin-bottom: 18px;

            .circle {
              display: inline-block;
              width: 6px;
              height: 6px;
              background: #4677f6;
              border-radius: 50%;
              position: absolute;
              top: 8px;
              left: 0;
            }

            .word {
              margin-left: 12px;
              font-family: PingFang SC;
              font-style: normal;
              font-weight: normal;
              font-size: 14px;
              color: #4677f6;
              cursor: pointer;
            }

            .word:hover {
              text-decoration: underline;
            }

            .topPlace {
              position: absolute;
              top: 1px;
              margin-left: 8px;
            }
          }
        }

        .bottomRightContentFooter {
          height: 1px;
          width: 100%;
          margin-top: 14px;
        }
      }
    }
  }
</style>